ポートフォリオ作成に向けて、1月中に基礎学習を終わらせます。
HTML/CSSの復習を終わらせたので、次にJavaScriptの復習をProgate、ドットインストールを用いて行っていきます。
なお、記述する内容は自分が忘れがちな所、苦手な所です。
HTML/CSS編同様、自分用の備忘録的に投稿していくので(箇条書きで)、
読みづらいor間違えていることを書いている可能性もあるので、悪しからず。
(できるだけ他の方が見てもためになれば良いなとは思って投稿しますが・・・)
箇条書きで書いたことに関して、新たな発見、学び、気づき等あれば、
それぞれ個々に詳細を記述していこうと思います。
プログラムの実行
JavaScriptファイル
console.log('出力したい文字列');
//出力したい文字列はダブルクォーテーションorシングルクォーテーションで囲む
変数の定義、命名ルール
JavaScriptファイル
// 変数の定義
let name = 'Taro';
// let:変数の宣言 name:変数名 ’Taro':代入する値
変数の命名ルール
○良い例・・・ 英単語を用いる、2語以上の場合は大文字で区切る
× 悪い例 ・・・ 数字で始まる、ローマ字、日本語
定数の定義
JavaScriptファイル
// 定数の定義
const name = 'Taro';
// const:定数の宣言 name:定数名 'Taro':代入する値
テンプレートリテラルを用いた連結
JavaScriptファイル
const name = 'たろう';
console.log(`こんにちは、${name}さん`);
// 出力したい内容をバッククォーテーションで囲む(シングルクォーテーションやダブルクォーテーションではなく)
コンソール
こんにちは、たろうさん
if文のコード
JavaScriptファイル
const number = 12;
if(number > 10) {
console.log('numberは10より大きい');
}
コンソール
numberは10より大きい
比較演算子
JavaScriptファイル
a === b // aとbが等しい
a !== b // aとbが異なる
elseのコード
JavaScriptファイル
const number = 7;
if(number > 10) {
console.log('numberは10より大きい');
} else {
console.log('numberは10以下');
}
コンソール
numberは10以下
else if のコード
JavaScriptファイル
const number = 7;
if(number > 10) {
console.log('numberは10より大きい');
} else if (number > 5) {
console.log('numberは5より大きい');
} else {
console.log('numberは5以下');
}
コンソール
numberは5より大きい
なおかつ、または
JavaScriptファイル
// x = 20 の時
console.log(x > 10 && x < 30); // true
console.log(x < 10 || x > 30); // false
// x = 5 の時
console.log(x > 10 && x < 30); // false
console.log(x < 10 || x > 30); // true
switch文
JavaScriptファイル
const color = "赤"
switch (color){
case "red";
console.log("Stop!")
break;
case "yellow";
console.log("Caution");
break;
case "green";
console.log("Go!");
break;
default; //if文のelseに似たようなもの
console.log("Wrong color")
break;
}
switch文で条件を複数指定するときは、縦に続けて記述する。
JavaScriptファイル
const color = "赤"
switch (color){
case "red";
console.log("Stop!")
break;
case "yellow";
console.log("Caution");
break;
case "green";
case "blue"; //縦に続けて記述
console.log("Go!");
break;
default; //if文のelseに似たようなもの
console.log("Wrong color")
break;
}
while文
JavaScriptファイル
let number = 1;
while (number <= 100) {
console.log(number);
number += 1;
}
コンソール
1
2
3
.
.
99
100
条件を満たせずに、処理が実行されないものを、実行するためには以下のように記述する。
JavaScriptファイル
let hp = -50
do {
console.log(`${hp} HP left!);
hp -= 15;
} while (hp > 0);
for文
JavaScriptファイル
for (let number = 1; number <= 100; number += 1) {
console.log(number);
}
// let number = 1 ・・・ 変数の定義
// number <= 100 ・・・ 条件式
// number += 1 ・・・ 変数の更新
コンソール
1
2
3
.
.
99
100
for文でスキップさせる
JavaScriptファイル
for (let i = 1; i <= 10; i++) {
if(i === 4){
continue;
}
console.log(i);
}
コンソール
//4がスキップされる
1
2
3
5
6
7
8
9
10
for文でストップさせる
JavaScriptファイル
for (let i = 1; i <= 10; i++) {
if(i === 4) {
break;
}
console.log(i);
}
コンソール
1
2
3
配列を定数に代入する、インデックス番号、配列の要素更新
JavaScriptファイル
const fruits = ["apple", "banana", "orange"];
console.log(fruits);
console.log(fruits[0]);
console.log(fruits[2]);
fruits[0] = "grape";
console.log(fruits[0]);
// 上記のfruitsの部分は定数名と言う
// インデックス番号はそれぞれ、"apple"が0、"banana"が1、"orange"が2
コンソール
["apple", "banana", "orange"]
apple
orange
grape