参考にした動画
学んだこと
・変数宣言 変数宣言 | MDN
・スコープ
写経 && 実験したコード
<html>
<body>
</body>
<script>
// 変数宣言しないで値を代入する方法
// 変数宣言しないで値を代入する方法とverの違いはあるのか実験
// tioさんの動画とコンソールの結果が異なるのはバージョンが違う説
console.log("変数宣言しないで値を代入する方法")
i = "tio"
console.log(i)
for (let i = 0; i < 2; i++) {
console.log(i)
// スコープの内だからtioの文字列ではなくてiには数字出力される。
console.log("name = " + i)
}
// スコープの外だからtioの文字列がiに出力される。
console.log("name = " + i)
console.log("変数宣言のvarの値を使って値を代入する方法")
// 変数宣言のvarの値を使って値を代入する方法
var b = "tio"
console.log(b)
for (let b = 0; b < 2; b++) {
console.log(b)
// スコープの内だからtioの文字列ではなくてiには数字出力される。
console.log("name = " + b)
}
// スコープの外だからtioの文字列がiに出力される。
console.log("name = " + b)
// 変数宣言しないで値を代入する方法とverの違いはあるのか実験結果
// 変数宣言しないで値を代入する方法とverを使うのは同じ挙動
</script>
</html>
ブラウザ
<html>
<body>
</body>
<script>
console.log("変数宣言のletを使う方法")
// スコープの内外で使用できるが、内外それぞれで同じ変数名でも代入の値を使い分けができる
let i = "tio"
for (let i = 0; i < 3; i++) {
console.log(i)
}
console.log("name = " + i)
console.log("変数宣言しないで値を代入する方法")
i = "tio"
for (i = 0; i < 3; i++) {
console.log(i)
}
console.log("name = " + i)
ブラウザ
<html>
<body>
<button id="my-button">my button</button>
<button id="my-button2">my button2</button>
</body>
<script>
// ずっと1だけカウントされる。
// 仕組み
// ボタンがクリックされるたびにカウントに0が代入された後に1が代入されるというのが1クリックの内容になる。
btn = document.getElementById("my-button")
btn.addEventListener("click",(event)=>{
let count = 0
count = count + 1;
console.log(count)
})
// ボタンをクリックするたびに+1される。
let count2 = 0;
btn2 = document.getElementById("my-button2")
btn2.addEventListener("click",(event)=>{
count2 = count2 + 1;
console.log(count2)
})
ブラウザ
<html>
<body>
<button id="carrot" class="tax">🥕</button>
<button id="greenPeppe" class="tax">🫑</button>
<button id="onion" class="tax">🧅</button>
<button id="wine" class="tax">🍷</button>
</body>
<script>
// constを使う
// ボタンを押したら税込金額を教えてくれるプログラム
let bag = 0;
eightBtns = document.getElementsByClassName("tax")
for (let i = 0; i < eightBtns.length; i++) {
eightBtns[i].addEventListener("click",(event)=>{
const tax8 = 0.08
const tax10 = 0.1
// idで条件分岐できた！
const id = event.target.id;
if(id === "carrot"){
bag = 100 * tax8 + 100
console.log(bag)
} else if(id === "greenPeppe"){
bag = 150 * tax8 + 150
console.log(bag)
} else if(id === "onion"){
bag = 200 * tax8 + 200
console.log(bag)
} else if(id === "wine"){
bag = 500 * tax10 + 500
console.log(bag)
}
});
}
</script>
</html>
ブラウザ
変数宣言
変数宣言しないで変数に値を代入する方法とvar。var | MDN
・varはES5以前のバージョンで使用されていた変数宣言である。
・変数宣言しないで変数に値を代入する方法とvarは同じ挙動をする。
・変数宣言しないで変数に値を代入する方法とvarはスコープの内外問わずアクセスできるグローバル変数と呼ばれる。
・グローバル変数は値を使うとどこからでも値を代入できてしまうので基本的には使わない。
let
・jsではletを基本的に使う。
・スコープの内外で同じ変数名を使えるけど使える範囲が限定されるのでグローバル変数ではない。
・スコープ内で定義した値はスコープの外で定義しても値は上書きされない。
・同じ変数名を使ってもスコープ内のみ、スコープの外のみというそれぞれで使い分けをすることができる。
const
・constは再代入ができないので値を変えたくない場合に使う。
・消費税の計算
・円周率の計算