HTML5入門その10-実機で動作させる(準備)

実機での動作にはWEBサーバが必要です

  1. WEBサーバにプログラムを保存
  2. スマホでそのページへアクセス
  3. 実行結果を見てみる

という流れです。

無料のWEBサーバをうまく探せなかった方は、Wドライブを使ってください。
ただしWドライブは来年度以降なくなる予定です。

いずれにしろ、自分が権利を保持していないコンテンツはアップロードしないようにしましょう.

 


まずはグローバル変数とローカル変数についておさらいしておきましょう

変数の扱いについて

変数には,(例えば)hogeという関数 function hoge(){  ~  } 内でだけ使えるローカル変数と,プログラム内のどこでも使えるグローバル変数があります.

<!DOCTYPE html>
<html>
<head>
<title>Global or Local</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Global or Local</h1>
<script type="text/javascript">
var neko = 10;
function inu(){
var dog = 5;
}
inu();
console.log("neko=" + neko);
console.log("dog=" + dog);
</script>
</body>
</html>

このHTMLを実行し,WEBコンソールを確認してみてください.cosole-global

このように表示され,14,14行目のconsole.logのうち,15行目が実行されていません.

10行目の var neko = 10;nekoはfunctionの外で宣言されています.ので,プログラム内のどこでも(function の中でも)使用できます.これをグローバル変数と言います.世界用ですね.

しかし12行目のvar dog = 5; はfunction inu中で宣言されています.この変数dogfunction inu中でしか使えません.これをローカル変数と呼びます.ご近所さん用ですね.

carGlobal

では.14行目,15行目を変更せず,コンソールに両方の変数が表示されるためにはどうしたら良いでしょうか?


解答例(1)

<!DOCTYPE html>
<html>
<head>
<title>Global or Local</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Global or Local</h1>
<script type="text/javascript">
var neko = 10;
var dog = 5;//ここで宣言するとグローバル変数になるのでどこでも使える♪
function inu(){
//var dog = 5;//コメントアウトして無効にしています
}
inu();
console.log("neko=" + neko);
console.log("dog=" + dog);
</script>
</body>
</html>

解答例(2)

<!DOCTYPE html>
<html>
<head>
<title>Global or Local</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Global or Local</h1>
<script type="text/javascript">
var neko = 10;
var dog = 0;//変数 dogをグローバルで宣言
function inu(){
dog = 5;//dogに5を代入
}
inu();//function inu を実行
console.log("neko=" + neko);
console.log("dog=" + dog);
</script>
</body>
</html>