22日目、JavascriptⅡ 。console.logの出力先はブラウザの開発ツールのコンソールでした。

9644 ワード
初心者 JavaScript Progate JavaScript テキストリンク

22日目、JavascriptⅡを攻略しました！
PHPに比べるとずっと分かりやすいです。なるほど順番には意味があったのかもしれません。

前回、Javascript１の時はProgateで作ったコードをどうやって公開するのか分かりませんでしたが、
一周回ってきたので分かりましたよ！開発ツールのコンソールで見れるのでした。

ネットのソースコードをコピペしてどうにか動かしたわけですが・・・
1ヶ月前のQiitaを見て、何も知らない方が野蛮なチャレンジをするもんだなと思いました。

なかなか思うように動かない今日なのでした。#100DaysOfCode #Day3
https://qiita.com/robamimim/items/c4706991b205371efc84

以下、JavascriptⅡまとめです。

22日目
http://appdays.herokuapp.com/Day22/

console.logの使い方

console.log(xxxx);で、コンソールに実行結果を出力。

whileで繰り返し

///1〜100をずらっと出力するWhile文
let number=1;
while ( number<= 100) {
  console.log(number);
  number++;
}

forで繰り返し

///1〜100をずらっと出力するfor文
for ( let number=1; number<=100; number++ ) {
  console.log(number);
}

if文

if文の書き方。
※比較のイコールが３つなのに注意！なぜ３つにした！？

 if ( number % 3 === 0 ) {
    console.log("3の倍数です");
    }

配列

こんな感じ。

const animals = ["dog", "cat", "sheep"];
console.log(animals);
for (let i = 0; i < animals.length; i++) {
  console.log(animals[i]);
}

オブジェクトとは

オブジェクトがなんなのかが、今のところピンときていません。
便利な配列みたいな感じ・・・？オブジェクトと配列の使い所は？
初心者には謎めいたアイテムです！
使い方はオブジェクト={プロパティ1: 値1, プロパティ2: 値2}

const characters = [
  {name: "にんじゃわんこ", age: 14},
  {name: "ひつじ仙人", age: 100},
  {name: "ベイビーわんこ", age: 5},
];

for (let i=0; i<characters.length ; i++ ) {
  //オブジェクトの要素を１つずつ定数に入れて処理。なるほどです！  
  const character = characters[i]
  console.log("名前は" + character.name + "です");
  console.log(character.age + "歳です");
}

undefined

オブジェクトで定義されていない要素を呼び出すとundefinedと出力されます。便利。

  if (character.age===undefined) {
    console.log("年齢は秘密です");
  }

演習

最後にJavascriptⅡの内容に沿って演習問題でした。
楽勝と思ったら、オブジェクトの中の配列ではイコールがコロンになるのに引っかかりました。

完成！

演習ではJavascriptの実行結果をコンソールに出力しています。
自分の所でどうやったら見れるのでしょう。
調べてみたら、ブラウザの開発ツールでコンソールを見れるのだそう。

そこでindex.htmlを書いて、作ったJavascriptを読み込んでChromeの開発ツールでコンソールを開いてみると・・・文字化けですが、何かが出力されています。
そういえば、CSSの回でutf-8を指定するんだっけと思い出してmetaに追加、できました！

 <html>
  <head>
    <meta charset="utf-8">
    <title>Javascriptの練習</title>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <h1>このページは</h1>
    console.log(xxxx); を使って開発ツールのコンソールに実行結果を出力しています。
  </body>
</html>

Chromeでコンソールを見るとこうなりました。

(１時間半くらい)