20200722 授業メモ 連結演算子・算術演算子・インクリメント・デクリメント演算子・代入演算子
演算子の続き
booleam trueORfalse
number
string '""'
undefined
☆文字連結演算子
var name = '田中';
console.log('１回目の出力');
console.log('こんにちは' + name + 'さん');
→①こんにちは+田中
→②こんにちは田中+さん
→こんにちは田中さん
とコンソールに出力される
console.log('２回目の出力');
console.log(name + 200);
→①田中+200
→田中200
とコンソールに出力される
数値200が文字列型200に自動変換して連結処理
注意
JSは異なるデータ型同士の処理は不可
そのため、自動的にデータ型を変換して
データ型をそろえてから処理する
☆算術演算子
％→数値同士を割り算した余りを出す演算子
NaN→Not a Number 計算不可の意味
console.log('答えは' + 6 % 3);
→余り0
console.log('答えは' + 2 % 3);
→余り2S
console.log('答えは' + 0% 2);
→余り0
console.log('答えは' + 4 + 2);
→答えは4+2
と表示コンソールに出力される
これは文字列連結演算子として処理をしてしまうため。
計算結果を出したいなら
console.log('答えは' + (4 + 2));
→答えは6
と出力される
console.log(4+2)
→同様に6
加算演算子として処理したい場合は（）の数値は
どちらも数値型でそろえないといけない。
※掛け算、割り算、余り算は処理優先度が高いので
そのまま使用しても問題なし
左辺右辺ともに数値型に変換して処理をする。
console.log('10' - '20');
console.log('10' - 20);
console.log(10 - '20');
console.log(10 - 20);
↑よって全部-10という答えが出る。
console.log('10個' - 20);
↑これはNaN
数値型に変換できないため。
☆算術演算子のステップアップ
JSファイル
function displayMessage(){
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
console.log('１回目の出力');
console.log(num1);
console.log(typeof num1);
console.log(num2);
console.log(typeof num2);
var result = num1 + num2;
//→num1、num2どちらも外部から取得した値で文字列型なので+が文字列連結演算子
で処理されてしまう。
document.getElementById('display1').innerHTML = result;
result = parseInt(num1) + parseInt(num2);
//主導で数値型に変換する場合はparseInt()を使用する。
()内に数値型に変換したい値や変数名を記述する。
document.getElementById('display2').innerHTML = result;
}
HTMLファイル
<body>
<div class="box">
<input type="text" id="num1" size="5"> +
<input type="text" id="num2" size="5">
</div>
<div class="box">
<p>計算結果１：<span id="display1">？</span></p>
<p>計算結果２：<span id="display2">？</span></p>
</div>
<script src="arithmetic_operator3.js"></script>
</body>
☆算術演算子のステップアップ２
HTMLファイル
<body>
<div class="box">
<input type="text" id="num1" size="4"> と
<input type="text" id="num2" size="4"> を
</div>
<div class="box">
<p id="display1">表示箇所</p>
</div>
<script src="arithmetic_operator4.js"></script>
</body>
JSファイル
//↓掛け算のぼたんが押されたときの処理↓
function displayAnswer1(){
console.log('掛け算');
var answer;
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
console.log(num1);
console.log(num2);
answer = num1 * num2;
console.log(answer);
document.getElementById('display1').innerHTML = answer;
}
//↑掛け算のぼたんが押されたときの処理↑
//↓割り算のぼたんが押されたときの処理↓
function displayAnswer2(){
console.log('割り算');
var answer;
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
console.log(num1);
console.log(num2);
answer = num1 / num2;
console.log(answer);
document.getElementById('display1').innerHTML = answer;
}
//↑割り算のぼたんが押されたときの処理↑
//↓足し算のぼたんが押されたときの処理↓
function displayAnswer3() {
console.log('足し算');
var answer;
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
console.log(num1);
console.log(num2);
answer = parseInt(num1) + parseInt(num2);
//↑足し算の計算結果を表示させたい場合はparseInt()を使用する！
console.log(answer);
document.getElementById('display1').innerHTML = answer;
}
//↑足し算のぼたんが押されたときの処理↑
☆インクリメント・デクリメント演算子
変数内の数値を減らしたり増やしたりする演算子
JSファイル
var num = 10;
console.log('１回目の出力');
console.log(num);
++num;
//↑変数内の値を1増やす
console.log(num);
num++;
//↑変数内の値を1増やす
console.log(num);
num = 10;
console.log('２回目の出力');
console.log(num);
→10
console.log(++num);←++が付く方向に要注目
→11
console.log(num);
→11
console.log(num++);←++が付く方向に要注目
→11
console.log(num);
→12
num = 10;
console.log('３回目の出力');
console.log(num);
--num;
//↑変数内の値を1減らす
console.log(num);
num--;
//↑変数内の値を1減らす
console.log(num);
num = 10;
console.log('４回目の出力');
console.log(num);
console.log(--num);
console.log(num);
console.log(num--);
console.log(num);
☆インクリメント・デクリメント演算子の応用
下記のコードを書き込むと、ブラウザ上のボタンで文字の大小を変更できる
機能が作成される。
HTMLファイル
<body>
<div class="box">
</div>
<div id="change" class="box">
<p>フォントサイズ：<span id="display1">？</span></p>
</div>
<script src="increment_decrement2.js"></script>
</body>
JSファイル
//ページ読み込み時に実行
var size = 16;
document.getElementById('display1').innerHTML = size;
console.log(size);
document.getElementById('change').style.fontSize = size + 'px';
//↑style:style属性を管理している。
→fonsize:CSSのプロパティ（font-size）
[-]付きのCSSプロパティはキャメルケースに名前が変更される
<要素 style="font-size:16px" ・・・・>
※console
.dir(document.getElementById('change'))；
↑dirはリストを表示するタグ
これを追記するとJSのリスト一覧をコンソール上で見ることができる
// 「大」ボタンを押したときに実行
function bigSize(){
console.log('「大」ボタンが押されました');
document.getElementById('display1').innerHTML = ++size;
//↑変数sizeに今使用している文字サイズの数値が入っているインクリメントして表示
console.log(size);
document.getElementById('change').style.fontSize = size + 'px';
//インクリメントされた数値をCSSのfont-sizeのプロパティに指定。
※指定する際に単位をつけるのを忘れないこと。
}
// 「小」ボタンを押したときに実行
function smallSize(){
console.log('「小」ボタンが押されました');
document.getElementById('display1').innerHTML = --size;
console.log(size);
document.getElementById('change').style.fontSize = size + 'px';
}
※function→呼び出されないと実行されない
☆代入演算子
JSファイル
var x =5;
var y = 10;
var z = 20;
x = y;
console.log('１回目の出力');
console.log(x);
↑コンソール上にyの値が表示される
この場合は10
xの値は消滅するのではなく、yの値がコピーされて代入されている扱い
x = y = z;←非推奨。間違えやすいかららしい
console.log('２回目の出力');
console.log(x);
↑コンソール上にzの値が表示される
この場合は20
☆文字連結代入演算子
JSファイル
var text1 = '2018年1月';
console.log('１回目の出力');
console.log(text1 + 'お正月');
console.log(text1); //変数の値は元のまま
コンソール上は
１回目の出力
2018年1月お正月
2018年1月
var text2 = '2018年1月';
text2 = text2 + 'お正月'; //文字列連結した結果を変数に代入
console.log('２回目の出力');
console.log(text2);
コンソール上は
２回目の出力
2018年1月お正月
var text3 = '2018年1月';
text3 += 'お正月'; //代入演算子で短く記述。
console.log('３回目の出力');
console.log(text3);
コンソール上は
３回目の出力
2018年1月お正月
☆代入演算子 ステップアップ
JSファイル
//ページ読み込み時に実行
var size = 16;//←文字サイズ
var step = 5;//←文字サイズ変更時の変化の値
document.getElementById('display1').innerHTML = size;//←いまの文字サイズがわかるようにHTMLに表示
console.log(size);//←コンソールに確認用に表示
document.getElementById('change').style.fontSize = size + 'px';//←CSSに変更を加えて文字サイズを変更
// 「大」ボタンを押したときに実行
function bigSize(){
console.log('「大」ボタンが押されました');
size += step;//←変数size（元のサイズ）に変更する量を加算して代入
document.getElementById('display1').innerHTML = size;
console.log(size);
document.getElementById('change').style.fontSize = size + 'px';
}
// 「小」ボタンを押したときに実行
function smallSize(){
console.log('「小」ボタンが押されました');
size -= step;
document.getElementById('display1').innerHTML = size;
console.log(size);
document.getElementById('change').style.fontSize = size + 'px';
}
実際は文字サイズを変更するボタンを設置する際は
サイズを決めて設定している。
例）大：25px；中：20px;小12:px;
