フロントエンドエンジニアを目指す! JavaScript講座(7)グローバル変数とローカル変数
前回は、指定範囲の値を整数で出す方法を勉強しました。
今回は、グローバル変数とローカル変数について学びます。
前回の復習
まずは前回の復習です。
出す範囲の最小値は整数をプラスして出す
ここでは仮に30-50の値を出すことにします。
普通に計算するとfloor関数で切り上げるとして
0-50の値が出ます。しかし、最小値が30なので、30を足します。
30-50の間を出すようにします。
50-30=20 (出したい値の幅)
20/0.99(予測上のざっくりとした最大値)=20.202020……
最小値ざっくり計算 0.001 * 21 = 0.021 ->0 0 + 30 = 30
最大値ざっくり計算 0.999 * 21 = 20.979 -> 20 20 + 30 = 50
グローバル変数とローカル変数
今回は、グローバル変数とローカル変数についてです。
ファイル、つまりプログラムのどこからでも参照ができる変数のことです。
ローカル変数は関数内で宣言した変数です。そのため、関数内でしか使用できません。
言葉だけだとイメージが付きにくいですね。
実際に見てみましょう。
〇以下の内容に書き換えます
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript講座sampleテキスト7</title>
</head>
<body>
<h1>グローバル関数とローカル関数</h1>
<button type="button" onclick="getRandumNumber()">ranNum</button>
<br>
<br>
<button type="button" onclick=alert(ranNum)>ranNum</button>
<script>
//グローバル関数
var ranNum = 100 ;
function getRandumNumber() {
//ローカル関数
var ranNum = Math.floor(Math.random() * 21) +30 ;
alert(ranNum);
}
//var testText = '整数です';
//document.write(testText);
</script>
</body>
</html>
=====
関数の中の変数ranNumの下に、シンプルに変数ranNumを指定したボタンをつくりました。
実行してみましょう。
上のボタンの実行例
下のボタンの実行例
〇グローバル変数を関数の中で使用する
グローバル変数は「プログラム全体で使用する変数」です。
そこで、グローバル変数を関数の中で使用する方法を確認します。
グローバル変数は、
ファイル単位=一つのwindow単位
です。
そこで、以下のように記載します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript講座sampleテキスト7</title>
</head>
<body>
<h1>グローバル関数とローカル関数</h1>
<button type="button" onclick="getRandumNumber()">ranNum</button>
<br>
<br>
<button type="button" onclick=alert(ranNum)>ranNum</button>
<script>
//グローバル関数
var ranNum = 100 ;
function getRandumNumber() {
//ローカル関数
var ranNum = Math.floor(Math.random() * 21) +30 ;
alert(window.ranNum);
}
//var testText = '整数です';
//document.write(testText);
</script>
</body>
</html>
=====ボタンの実行例
上のボタンを押しても、下のボタンを押しても、グローバル関数に設定した「100」が表示されるようになりましたね。
〇まとめ
・ファイル、つまりプログラムのどこからでも参照ができる変数
・ローカル変数は関数内で宣言した変数
・グローバル変数はプログラム内でずっと使用するものに使用する
・ローカル変数は値を毎回変更するなど一時的に使用する場合に使う
・グローバル変数とローカル変数は保存場所が異なる
**
今日は以上です。
Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san
ストリートアカデミーで毎月講座を開催中。
https://www.street-academy.com/steachers/198346
note専用コミュニティへの招待について
https://note.mu/hamasan918/n/ne4d98f9db9ec
note専用コミュニティ、作成しました。コミュニティでは質問などを受け付けています。毎月500円となります。
この記事が気に入ったらサポートをしてみませんか？