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でコンソールを見るとこうなりました。
(１時間半くらい)