条件分岐（else if）
else ifとは
if文の条件式がfalseになると、else以降が実行されます。
elseの後ろにまた別のif文を追加する時にelse ifを使います。
if( ①条件式... ) {
処理❶.....
} else if ( ②条件式... ) {
処理❷.....
} else {
処理❸....
}
まず、①条件式...が評価されます。
評価結果がtrueだった場合、処理❶....が実行されます。
falseだった場合、else if以降に進みます。
すると次のifがあり、②条件式...が評価されます。
評価結果がtrueだった場合、処理❷....が実行されます。
falseの場合は、処理❸....が実行されます。
今回は3種類の処理を振り分けましたが、
if文は好きなだけ条件式を追加し、処理を振り分けることができます。
変数
変数とは
値を代入する数値や文字列です。
データを入れる箱とイメージすると分かりやすいかな。
変数の使い方
-
変数を「定義」する
-
変数にデータを「代入」する
-
変数からデータを「読み出す」
-
変数のデータを「書き換える」
変数の使い方にはパターンがあり、3と4が入れ替わったり、4は一度も使用しない場合もあります。
1.変数を「定義」する
変数を定義する方法
var answer
varに続けて、半角スペース、変数名（ここではanswer）を書くと
その変数名をもつ変数が定義できます。
2.変数にデータを「代入」する
データの代入方法
var answer = 100
変数を定義したら、その変数に保存したいデータを入れます。
これをデータを代入すると言います。
ここではanswerという変数に、100が代入されています。
代入演算子（=）
「=」は、右側のデータを左側の変数やプロパティに代入する役割をする記号。
3.変数からデータを「読み出す」
変数に代入したいデータを読み出す場合は、変数名をそのまま書けばOK。
console.log(answer);
4.変数のデータを「書き換える」
変数は代入したデータを書き換えることが可能。
書き換える場合は、2.の変数にデータを「代入」すると同じことをするだけ。
変数データの書き換えの例
<script>
var answer = 'yes';
console.log('answer');
answer = 'no'; ←ここで代入するデータをnoに書き換え
console.log('answer');
</script>
変数名をつけるときの注意点
- 文字か、アンダースコア、ダラーマーク数字が使用可能。
- 記号「=」「-」などは使用不可。
- 1文字目に数字は使えない。
- 予約語は使えない。
変数名は自分一人がわかる名前でなく、周りの人が触ることも考えて一目で何のデータを保存しているのかわかるような名前をつけるように心がけましょうね。
条件分岐(if)
条件分岐(if)とは
「もし○○なら」「もし○○でないなら」といったように、条件を指定して動作を変えるのが条件分岐(if)です。
条件によってブール値がtrueなのかfalseなのかを判断し、次に実行する処理を決定します。
書式
if(条件式) {
条件式がtrueとなる場合に実行する処理
} else {
条件式がfalseとなる場合に実行する処理
}
解説
条件式がtrueとなる場合、その次の{ }に書かれたプログラムを実行。
そうでない場合(false)、elseの次の{ }に書かれたプログラムを実行する。
else以降は省略可能
falseの場合に何も実行しないようにしたい時は、else以降を省略しましょう。
console.log()
console.log()
console.logは、()内に指定したテキストや、数式の結果などをコンソールにアウトプットする機能です。
テキストを出力する場合は、（'）シングルクォートまたは、(")ダブルクォートで囲む。
数式の結果を出力する場合は、シングルクォートやダブルクォートでは囲まない。
例）
console.log('テキストが入力されます'); → テキストが入力されます
console.log(5+5); → 10
プログラムの入力ミスを減らすには？
1.一旦()の中は入力せずに、セミコロンまで入力！
console.log();
2.次に、シングルクォートを入力！
console('');
3.最後に、シングルクォートの中にテキストや数式を入力する！
console('りんご');
慣れない間は、頭から順に書くと閉じかっこやシングルクォートを書き忘れてしまうことがあるので一旦セミコロンで閉じて、中身を入力するようにしましょう＾＾
JavaScript超入門編
Javascriptとは
ブラウザを操作するためのプログラミング言語。
htmlやcssをリアルタイムに書き換えて、一部のコンテンツを書き換えたり、
動きをつけたりすることができるプログラム。
JavaScriptを使った書き換えの例
1.タグに囲まれたテキストを置き換える
<p>詳細をもっと見る</p> → JavaScript → <p>閉じる</p>
2.要素を追加・削除する
html要素に新たな要素を追加または、削除することができる。
<ul>
<li>開始します...</li>
</ul>
↓
↓
<ul>
<li>開始します...</li>
<li>最適化中...</li> <!--JavaScriptによってliを追加-->
</ul>
3.タグの属性の値を変更する
class属性、href属性、src属性など、HTMLタグにはさまざなな属性がある。
Javascriptではこれらの属性の値を変更することができる。
<img src="apple.jpg"> → JavaScript → <img src="orange.jpg">
(appleの画像をorangeの画像に変更している)
4.CSSの値を変更する
p {
font-size: 14px;
}
↓
↓
p {
font-size: 18px;
}
(JavaScriptでフォントサイズを変更)
JavaScriptでは、これら4つのパターンでhtmlとcssの書き換えが可能。
Javascriptで書き換えるメリット
1.変更内容が即座にブラウザに反映される。
2.変更があった場所だけ書き変わるので、ページ全体の再読み込みが発生しない。
よって待ち時間がない。
JavaScriptの最も基本的で重要な役割
1.ブラウザに表示されているHTMLやCSSを書き換える。
2.ブラウザに表示されているHTMLやCSSから情報を読み取る 。
