JavaScript ５日目
代入演算子
左辺に右辺の値を代入し変数等の値を変更する際に使用する。
| 演算子 | 名称 | 内容 |
|---|---|---|
| = | 代入演算子 | 右辺の値を左辺に代入 |
| += | 文字列連結代入演算子 | 左辺の文字列に右辺の文字列を連結して代入 |
| += | 加算代入演算子 | 左辺の数値に右辺の数値を足し算した結果を代入 |
| -= | 減算代入演算子 | 左辺の数値に右辺の数値を引き算した結果を代入 |
| *= | 乗算代入演算子 | 左辺の数値に右辺の数値を掛け算した結果を代入 |
| /= | 除算代入演算子 | 左辺の数値に右辺の数値を割り算した結果を代入 |
| %= | 剰余代入演算子 | 左辺の数値に右辺の数値を割り算した余りを代入 |
代入演算子: 「=」今までのプログラムに何度も出てきた「=」は代入演算子と呼ばれるもので
右辺の値を左辺に代入する。もし左辺の変数に値が入っている時は右辺の値で上書きする。
代入演算子を連鎖させる（あまり使わないので授業ではスルー）
代入処理は右から処理されていくため「x=y=z」の変数xには一番右側にあった変数zがもつ「20」が連鎖して代入される。
var x =5;
var y = 10;
var z = 20;
x = y;
console.log('１回目の出力');
console.log(x);
x = y = z;
console.log('２回目の出力');
console.log(x);
文字列連結代入演算子:「+=」
var text1 = '2018年1月';
console.log('１回目の出力');
console.log(text1 + 'お正月');
// '2018年1月お正月'をコンソールに表示
console.log(text1); //変数の値は元のまま
var text2 = '2018年1月';
text2 = text2 + 'お正月'; //文字列連結した結果を変数に代入
console.log('２回目の出力');
console.log(text2);
var text3 = '2018年1月';
text3 += 'お正月'; //代入演算子で短く記述
console.log('３回目の出力');
console.log(text3);
// 文字列連結代入演算子「+=」が出てきたら
// 変数内の文字列に右辺の値を追記していく
文字列でつないで保存するには「文字列連結代入演算子」を使用する。
主に長い文章を作成する際、１行ずつ連結していく処理に使われる。
【１回目の出力】文字列連結演算子「+」を使って文字列同士を連結しても変数 text1 の値は連結前のまま。
文字列連結演算子「+」はその場で文字列を連結するだけ。
【２回目の出力】連結した文字列を代入演算子「=」を使って変数内に入れる。
変数内の値が連結語後の文字列に変更され、後から使えるようになる。
連結した文字列をその場で使う場合は文字列連結演算子「+」を使用。
連結後の文字列をあとから使う場合は代入演算子「=」を使って変数内に保存する。
【３回目の出力】文字列連結と代入を短く記述する際に使用するのが文字列連結代入演算子「+=」。
text3 = text3 + ‘お正月’
と
text3 += ‘お正月’
は同じ処理
加算代入演算子の応用（HTML内にリストを作る）
// 変数lessonを宣言し
// 好きな俳優ベスト3を番号付きリストで作成
// コードの文字列連結代入しながら作成
var lesson = '<ol>'
lesson += '<li> 増田梨沙</li>';
lesson += '<li> 林遣都</li>';
lesson += '<li> 吉沢亮</li>';
console.log(lesson);
console.log(document.getElementById('display1'));
//ブラウザにid名「diaplay1」の
// div要素を作成し番号付きリストを表示する
document.getElementById('display1').innerHTML
= lesson; <div id="display1">
</div>
加算代入演算子：「+=」（減算代入演算子「-=」も同様）
加算した結果を保存するには「加算代入演算子」を使用する。
計算結果を維持しなければならないような時に使用する。
var num = 10;
console.log('加算：１回目の出力');
console.log(num + 20);
console.log(num); //変数の値は元のまま
加算演算子「+」を使って計算した結果はその場の処理に使われた後消えてしまう。
つまり変数numの値は元のまま。
num = 10;
num + 20; //加算しただけ:結果も処理に使っていない（無駄な処理
console.log('加算：２回目の出力');
console.log(num);
例えば「num+20」の計算をしても変数numには変化がない。
計算結果をあとから利用できるようにするには代入演算子を使って代入処理する。
num = 10;
num = num + 20; //加算した結果を変数に代入
console.log('加算：３回目の出力');
console.log(num);
計算結果を代入演算子「=」を使って変数に代入する。
変数の値が計算結果の数値に変更され、計算結果の値を後から使えるようになる。
num = 10;
num += 20; //代入演算子で短く記述
console.log('加算：４回目の出力');
console.log(num);加算と代入を短く記述する際に使用するのが加算代入演算子「+=」
num = num + 20
と
num += 20
は同じ処理
ステップアップ
//ページ読み込み時に実行
// 文字サイズを管理
var size = 16;
// 文字サイズを変更する時の値
var step = 5;
document.getElementById('display1').innerHTML = size;
console.log(size);
document.getElementById('change').style.fontSize = size + 'px';
// 「大」ボタンを押したときに実行
function bigSize() {
console.log('「大」ボタンが押されました');
size += step;
// 加算代入演算子
// 1回目：変数size「16」,変数step「5」
// 16+5の計算結果をsizeに代入「21」
document.getElementById('display1').innerHTML = size;
console.log(size);
document.getElementById('change').style.fontSize = size + 'px';
document.getElementById('display1').style.color = 'blue';
}
// 「小」ボタンを押したときに実行
function smallSize() {
console.log('「小」ボタンが押されました');
size -= step;
// 減算代入演算子
// size = size - step;
document.getElementById('display1').innerHTML = size;
console.log(size);
document.getElementById('change').style.fontSize = size + 'px';
document.getElementById('display1').style.color = '#ff6347';
}エスケープシーケンス
エスケープシーケンスはJavaScriptで意味のある記号を文字列として扱いたい場合や特殊な文字を表示する際に使用する。
| 文字 | 名称 | JavaScriptとしての意味 |
|---|---|---|
| \’ | シングルクォート | 文字列の開始や終了を意味する |
| \” | ダブルクォート | 文字列の開始や終了を意味する |
| \\ | バックスラッシュもしくは円yenマーク | エスケープシーケンス記号 |
| 文字 | 名称 |
|---|---|
| \n | 改行（LF:Line Feed） |
| \r | 復帰（CR:Carriage Return） |
| \t | タブ |
※「\」バックスラッシュは環境によって「￥」円yenマーク表示になる
【１回目の出力】
console.log('１回目の出力');
console.log('いちご\nみかん\nりんご');
出力された文字列の「\n」位置で改行される。
長い文字列やHTMLコードを適度な位置で改行させるために使う。
ブラウザ表示での改行は<br>タグを使用するので、あくまでもソースコード上の見やすさのために使用する。
【２回目の出力】
console.log('２回目の出力');
// console.log('I'm a programmer.');
console.log('I\'m a programmer.');
console.log("I'm a programmer.");
「// （コメント）」を外すと・・・
console.log('２回目の出力');
console.log('I'm a programmer.');
// 「I'm a programmer.」の「' （シングルクォート）」位置で文字列が終了
// 「m a programmer.」が不適切な記述でエラーになる。
「I’m a programmer.」のように文字列の中に「’ （シングルクォート）」や「” （ダブルクォート）」が入っている場合は注意
【正しい記述①】<console.log('I\'m a programmer.');>
「\’」と記述することで文字列終了の意味をもつ記号ではなく、ただの文字として扱われる。 （インラインコードでは「\」が「￥」になってる・・・）
【正しい記述②】<console.log("I'm a programmer.");>
「’ （シングルクォート）」文字列使用時は「” （ダブルクォート）」で囲む。
「” （ダブルクォート）」文字使用時は「’ （シングルクォート）」で囲むことでエスケープシーケンスを使わずに済む。
console.log('問題 1');
// 「60's Music」とコンソール表示する
console.log("パターン1 : 60's Music");
console.log('パターン2 : 60\'s Music');
console.log('問題 2');
// 「60's "Music"」とコンソール表示する
console.log('パターン1 : 60\'s "Music"');
console.log("パターン2 : 60's \"Music\"");
第６章：制御構文・比較演算子
いったん飛ばして・・・
第７章：ｉｆ文・論理演算子
ｉｆ文の使い方
if文は分岐処理のひとつで条件の結果で処理を分ける。
if文
if後の「()丸カッコ」内に条件を記述。条件が満たされた（true）時に
「{}中カッコ」（ブロックと呼ぶ）内の処理を実行、条件が満たされない（false）時にはブロック内の処理を実行しない。
if (条件式){
条件式true時の処理
}// 分岐処理：条件で処理が分かれる
// if文の確認
// 年齢管理変数
var age = 16;
// 条件：変数ageは20より小さいか
if (age < 20) {
// 条件が満たされた（true）の時の処理
console.log('未成年');
}
if文は処理を分岐する。
条件が満たされる（true）時と、条件が満たされない（false）時の2択で分岐する。
条件にはよく比較演算子が使われる。比較演算子は左辺と右辺を比較して関係が成り立つ場合は「true」を返す。関係が成り立たない時は「false」を返す。
console.log(purchase);
if (purchase >= 10000) {
console.log('使いすぎ');
}
console.log(purchase >= 10000);
「使いすぎ」が出てる
if else 文
if文の後に「elseブロック」が追加されている。elseブロックは条件式が満たされない（false）時に選択される。
if(条件式) {
条件式true時の処理
} else {
条件式false時の処理
}変数ageに「16」を代入した時、条件式「(age < 20)」は「true」を返す。条件が満たされた時は条件式直後のブロック内処理を実行する。
var age = 16;
// プログラムのテストをする
// 条件にしようされている境界となる値でテストをする
// 閾値（しきいち） ⇒今回の場合、19/20/21
if (age < 20) {
console.log('未成年');
} else {
console.log('成人');
}
変数ageに「30」を代入した時は、条件式「(age < 20)」は「false」を返す。条件が満たされなかった時は条件式直後のブロックは実行せず、elseブロックを実行する。
追加問題
購入額10000円以上の場合
「200円引き」「購入金額：〇〇円」「割引後金額：〇〇円」
とコンソールに出力
購入額10000円未満の場合
「購入金額：〇〇円」「支払額：〇〇円」
とコンソールに出力
console.log('問');
var purchase = prompt(); //購入額
var discount = 200; //割引額
var payment = purchase - discount; //支払額
console.log(purchase);
if (purchase >= 10000) {
console.log('★' + discount + '円引き!');
console.log('購入金額 : ' + purchase + '円');
console.log('割引後額 : ' + payment + '円');
} else {
console.log('購入金額 : ' + purchase + '円');
console.log('支払額 : ' + purchase + '円');
}
10,000円以上の場合
10,000円未満の場合