EVERDEVEL

グローバル変数とローカル変数

今度はグローバル変数とローカル変数について学習してみましょう。

f(x)って知ってますか、知らなくてもいいです。

同じ技能を何回も使うときはその技能を関数を造って使います。
次は関数の作り方です。

関数の造り方

function 関数の名(){
}

上のソースが関数のつくりかたです。

例え　関数の名をharoとすると下のよう書きます。

function haro(){
}

関数を造ったから今度は関数の呼び方法をみてみましょう。簡単です。

関数の呼び方

関数の名();
例え上で造ったharo関数の呼び方は
haro();          <== です.

では、ソースを入力してから結果をみてみましょう。

関数は Hello worldを出力する関数です。

function hello(){
    document.write("Hello world");
}

下のソースは関数はあるけどその関数の呼びはないソースです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>everdevel - JavaScript</title>
<script>
    function hello(){
        document.write("Hello world");
    }
</script>
</head>
<body>
</body>
</html>

結果

上のソースの結果には何も出てないです。関数の呼びがないからですね。

では次は関数の呼びがあるソースです。

hello();

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>everdevel - JavaScript</title>
<script>
    function hello(){
        document.write("Hello world");
    }
    hello();　//関数の呼び
</script>
</head>
<body>
</body>
</html>

結果

上のソースの結果を見るとhello関数が作動してHello worldという文字列が出力されます。
グローバル変数、ローカル変数について勉強するため　関数について勉強しした。では本格的に。。。

グローバル変数、ローカル変数

var

varは　変数を宣言するときに使います。

var 変数名 = バリュー

varを付けなくてもいいです。

まずグローバル変数は全域で使える変数であり、ローカル変数は関数の内だけ使える変数です。

理解しやすくCSSを利用し地役を区別しますね。

<!DOCTYPE html>
<html>
<head>
<title>everdevel - JavaScript</title>
<script>

a = 10;

function hello(){

hello = "Hello World";

document.write(hello);

}

</script>
</head>
<body>
</body>
</html>

赤いエリアはグローバル変数の領域です。 ^-^

青いエリアはローカル変数の領域です。赤いエリアの外では使えません。

上のソースを見るだけではよくわからないんでソースをプレーしてみてみましょう。

下のソースはグローバル変数名は　glo_varで宣言し、ローカル変数は　local_varで宣言しました。そして関数の外で変数glo_varを出力する例です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>everdevel - JavaScript</title>
<style type="text/css">
</style>
<script type="text/javascript">
    glo_var = 10;
    function hello(){
        local_var = 20;
    }
    document.write(glo_var);
</script>
</head>
<body>
</body>
</html>

結果

上のソースの結果を見ると変数 glo_varのバリューは10ですね。

では、上のソースで　出力文の変数をローカル変数なlocal_varにして出力できるかどうかみてみましょう。

結果はもちろんローカル変数だから、出力出来ませんが、でも目でみてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>everdevel - JavaScript</title>
<style type="text/css">
</style>
<script type="text/javascript">
    glo_var = 10;
    function hello(){
        local_var = 20;
    }
    document.write(local_var);
</script>
</head>
<body>
</body>
</html>

結果

結果を見ると何も出てないですね。

関数の内で変数の前にvarを付けるのと付かないのは何が違うんでしょうか

関数の外でvarを付けるのと付けないのは関係なくグローバル変数ですが、

関数の内では違います。

ローカル変数の前にvarがあるとそのローカル変数は関数の内でだけ作動しますが、

ローカル変数お前にvarがないとその関数が一度呼ばれた以降ではグローバル変数になります。

では例を見て確認しましょう。

下の例はvar2が付けてない変数なlocal_var2変数を関数の外で出力する例です

varが付けてない変数は一度その関数を読んだたグローバル変数になります。下のソースはhello関数を呼ぶコードがないから結果は出力出来ません。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>everdevel - JavaScript</title>
<style type="text/css">
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
    glo_var = 10;
    function hello(){
        var local_var = 20;
        local_var2 = 30;
    }
    document.write(local_var2);
</script>
</head>
<body>
</body>
</html>

結果

下のソースは上のソースにはない関数の呼びがあるソースです。だから local_var2変数はvarがついてないから関数を読んでからはグローバル関数になります。
そしてグローバル関数になったからバリューが出力できます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>everdevel - JavaScript</title>
<style type="text/css">
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
    glo_var = 10;
    function hello(){
        var local_var = 20;
        local_var2 = 30;
    }
    hello();
    document.write(local_var2);
</script>
</head>
<body>
</body>
</html>

結果

次のコンテンツは
演算子

ご覧くださってありがとうございます。お問い合わせと間違い説明はある場合、下にあるコメントにお願いいたします。

新しい窓を開き

講義に戻る。