全社向けプログラミング講座

2回目

本格的にやっていきましょう

アジェンダ

if文
while文
for文
関数
スコープ(グローバルとローカル)

プログラムの構造は基本的に3種類

1. 順次処理

　　１つずつ処理を行う

2. 分岐

　　条件によって処理を変える

3. 繰り返し

　　同じ処理を繰り返す

プログラムの構造は基本的に3種類

1. 順次処理

　　１つずつ処理を行う

2. 分岐　←if文

　　条件によって処理を変える

3. 繰り返し　←while文、for文

　　同じ処理を繰り返す

例えば

if(条件) {
    真の処理 
}　else {
    偽の処理
}

条件分岐

if文

<script>
　var score = 50;
　if (score > 50) {
　    document.write("たいへんよくできました");
　} else {
    　document.write("もうすこしです");
　}
</script>

点数によって文字列を変える

条件分岐

比較演算子

==：値が等しければtrue

!= ：値が等しくなければtrue

> ：値が大きければtrue

< ：値が小さければtrue

>=：値が同じか大きければtrue

<=：値が同じが小さければtrue

条件分岐

<script>
　var score = 50;
　if (score == 100) {
　    document.write("たいへんよくできました");
　} else {
    　document.write("もうすこしです");
　}
</script>

点数によって文字列を変える

条件分岐

論理演算子(条件を更に組み合わせるためのもの)

&&：条件が両方成立すればtrue (AND)

||：どちらかの条件が成立すればtrue (OR)

<script>
　var score = 50;
　if (score > 80) {
　    document.write("たいへんよくできました");
　} else if (score > 60 && score <= 80) {
    　document.write("よくできました");
　} else if (score > 40 && score <= 60) {
    　document.write("がんばりました");
　} else {
    　document.write("もうすこしです");
　}
</script>

条件分岐

ループ(繰り返し)

while文

<script>
    var i = 0;
    while (i < 10) {　// 真
        document.write(i);
        i++;
    }
</script>

条件が真である場合、この条件を続ける

0から1ずつ増やして9でストップしたものを表示

for文

<script>
    for (var i = 0; i < 10; i++) {
        document.write(i);
    }
</script>

()内は初期値、継続条件、カウンターを記述

ループ(繰り返し)

ループを抜ける処理

<script>
    for (var i = 0; i < 10; i++){
        if (i == 5){
            break;
        }
        document.write(i);
    }
</script>

break:ループ処理を抜ける

ループ(繰り返し)

ループを抜ける処理

<script>
    for (var i = 0; i < 10; i++) {
        if (i == 5) {
            continue;
        }
        document.write(i);
    }
</script>

continue:ループ処理を1回スキップ

ループ(繰り返し)

課題２−１

①ループ処理を使って自分の名前を

100回出力してみましょう

　　※出力は「document.write("名前<br>")」を使用

②51回目以降は末尾に「さん」を付けて

　出力してみましょう

<html>
    <head>
    </head>
    <body>
        <script>
            for(var i=1; i<=100; i++) {
                var msg = i+':shimizu';
                if(i>50){
                    msg = msg + 'さん';
                }
                document.write(msg+'<br>');
            }
        </script>
    </body>
</html>

課題２−１解答例

関数

複数の処理をまとめ、名前をつけたもの
（同じような処理を繰り返し書くとき、使いまわしができる）

function 関数名() {
    処理
}

helloという関数に処理を指定する
→コンソールにhelloと表示

<script>
　  function hello() {
　　    document.write("hello");
　  }
　  hello(); 
</script>

関数

引数（パラメータ）を指定することが可能

<script>
    function hello(name) { 
    　　document.write("hello" + name); 
    }
    hello(" Tom "); 
    hello(" Bob ");
</script>

関数

返り値をもらう

<script>
    function hello(name) { 
　　    return "hello" + name ; 
    }
    var greet = hello(" Tom ");
    document.write(greet); 
</script>

スコープ

変数の有効な範囲のことをスコープと言います。

変数の宣言されている位置によって、スコープの範囲が変わります。

スコープ

JavaScriptの変数スコープはグローバルとローカルの２つです。

・グローバル変数
関数の外で宣言される変数

スコープの範囲は「プログラム全体」

・ローカル変数
関数の中で宣言される変数

スコープの範囲は「その関数の中」のみ

スコープ

以下のサンプルを実行して動作を確認してみましょう。

<script>
    var value = "グローバル"; //グローバル変数

    function dispValue() {
        var value = "ローカル"; //ローカル変数
        alert(value);
    }

    alert(value);
    dispValue();
</script>

課題２−２

以下の実行処理結果はどうなる？

<script>
    var a = 5;
    var b = 5;
    function myFunc(){
        var a = 100;
        a += 10;
        b += 10;
    }
    document.write("関数呼び出し前：a=" + a + ":b=" + b + "<br>");
    myFunc();
    document.write("関数呼び出し後：a=" + a + ":b=" + b + "<br>");
</script>

まとめ

if文
while文
for文
関数
スコープ(グローバルとローカル)

おまけ：条件分岐(if以外の書き方)

switch文(if文とやっていることは同じ)

<script>
　var signal = "red"; //シグナルが赤の時
　switch(signal) {
　　case "red":
    　　document.write("stop!");
　    　break; // break忘れないように
　　case "green":
　　    document.write("go!");
　　    break; 
　　case "yellow":
　　    document.write("slow down!");
　　    break;
　　default:
　　    document.write("wrong signal");
　　    break; 
　}
</script>

アジェンダ

例えば

関数

関数

関数

スコープ

スコープ

スコープ

まとめ

プログラミング講座2回目

プログラミング講座2回目

n_shimizu

アジェンダ

例えば

関数

関数

関数

スコープ

スコープ

スコープ

まとめ

プログラミング講座2回目

More from n_shimizu