9. JavaScriptとフローチャート

ここでは、JavaScriptとフローチャートの対応関係について書きます。ソースコードとフローチャートと順番に書くことで、JavaScriptの処理の流れを明確にします。

9.1. 三項の条件演算子

三項の条件演算子の構文

条件 ? 式１ : 式２ ;

三項の条件演算子の例

js_conditional_op.html

<html>
<script type="text/javascript">
<!--

var sum = 10;
var str = "";
str = (sum >= 60) ? "合格" : "不合格";
alert(str);

// -->
</script>
</html>

三項の条件演算子フローチャート

_images/sanko.gif

9.2. if...else文

if..elseの構文

if (条件式1) {
    命令文1;
}
else if (条件式2) {
    命令文2;
}
else {
    命令文3;
}

if..elseのフローチャート

_images/ifelse.gif

if..elseの例

js_if_else.html

<html>
<script type="text/javascript">
<!--

var age = 16;
var result="";
if (age >= 70 ){
    result ="心の欲する所に従って矩を踰えず";
}
else if (age >= 60 ){
    result ="耳順う";
}
else if (age >= 50 ){
    result ="天命を知る";
}
else if (age >= 40 ){
    result ="惑わず";
}
else if (age >= 30 ){
    result ="立つ";
}
else if (age >= 15){
    result ="学に志す";
}
else{
    result ="無し";
}
alert(result); //=> 学に志す


// -->
</script>
</html>

if..else文例のフローチャート

_images/rongo.gif

9.3. switch文

switch文の構文

switch (式) {
    case 値1:
        命令文1;
        break;
    case値2:
        命令文2;
        break;
    default:
        命令文3;
        break;
}

switch文のフローチャート

_images/switch.gif

switch文の例

js_switch.html

<html>
<script type="text/javascript">
<!--

var month = 2;
var result="";
switch(month){
	case 1: result = "January"; break;
	case 2: result = "February"; break;
	case 3: result = "March"; break;
	case 4: result = "April"; break;
	case 5: result = "May"; break;
	case 6: result = "June"; break;
	case 7: result = "July"; break;
	case 8: result = "August"; break;
	case 9: result = "September"; break;
	case 10: result = "October"; break;
	case 11: result = "November"; break;
	case 12: result = "December"; break;
	default: alert("assert!"); break;
}
alert(result); //=> February

// -->
</script>
</html>

switch文例のフローチャート

_images/switch_ex.gif

9.4. for文

for文の構文

for (初期化式; 条件式; 再初期化式) {
    命令文;
}

for文のフローチャート

_images/for.gif

1～10の合計を求めるfor文の例

js_for.html

<html>
<script type="text/javascript">
<!--

var sum = 0;
for(var i=1 ; i<=10 ; i++){
    sum += i;
}
alert(sum);//=>55

// -->
</script>
</html>

for文例のフローチャート

_images/for_ex.gif

9.5. for-each文

for-eachのループ文の説明


for in文の構文

for (変数 in オブジェクト)
    文;
オブジェクト：オブジェクトの名前、評価するとオブジェクトになる式です。
※オブジェクトに配列を使うのは避けた方がよい。(下記の例のfor(in)を参照)

1～10の合計を求めるfor文の例
js_for_each.html
<html>
<script type="text/javascript">
<!--

var nums = [1,2,3,4,5,6,7,8,9,10];
var sum = 0;

//インデックスを使う方法
sum = 0;
for(var i =0; i<nums.length; i++) {
	sum += nums[i];
}
alert(sum);//=>55

//or

//コールバック関数を使う方法
sum = 0;
nums.forEach(function (x, i) {
	sum += x;
});
alert(sum);//=>55

//or

//for(in)を使う方法.※要注意
sum = 0;
for (var num in nums){
	sum += nums[num];
}
alert(sum);//=>55

//for(in)はArray.prototypeを使うと動作が変わってしまうので注意.
Array.prototype.test=1;
sum = 0;
for (var num in nums){
	sum += nums[num];
}
alert(sum);//=>56

// -->
</script>
</html>

for_each文例のフローチャート

_images/for_each.gif

9.6. while文

while文の構文

while (継続条件式) {
    命令文;
}

while文のフローチャート

_images/while.gif

1～10の合計を求める。while文の例

js_while.html

<html>
<script type="text/javascript">
<!--

var i = 1;
var sum = 0;
while(i<=10){
	sum += i;
	i++;
}
alert(sum);//=>55

// -->
</script>
</html>

while文例のフローチャート

_images/while_ex.gif

9.7. do..while文

do-while文の構文

do {
    命令文;
} while (継続条件式);

do-while文のフローチャート

_images/do_while.gif

1～10の合計を求める。do-while文の例

js_do_while.html

<html>
<script type="text/javascript">
<!--

var i = 1;
var sum = 0;
do{
        sum += i;
        i++;
}while(i<=10);
alert(sum);//=>55

// -->
</script>
</html>

do-while文のフローチャート

_images/do_while_ex.gif

9.8. continue文

continueの構文

ループ文{
        continue;
}

ループ文はwhile、forを指す。

continue文の例
js_for_continue.html
<html>
<script type="text/javascript">
<!--

var sum = 0;
for (var i = 1; i <= 10; i++) {
        if (i == 3) {
                continue;
        }
        sum += i;
}
alert(sum);//=>52

// -->
</script>
</html>

continue文例のフローチャート

_images/bat_for_continue_ex.gif

9.9. break文

breakの構文

ループ文{
        break;
}

ループ文はwhile、forを指す。

break文の例
js_for_break.html
<html>
<script type="text/javascript">
<!--

var sum = 0;
for (var i = 1; i <= 10; i++) {
        sum += i;

        if (sum >= 30) {
                break; // ループを脱出する。
        }
}
alert(sum);//=>36

// -->
</script>
</html>

break文例のフローチャート

_images/bat_for_break_ex.gif

9.10. ラベル付きcontinue文

ラベル付きのものは、主に多重ループを抜ける処理をスマートの書くために使います。

ラベル付きcontinue文の例

js_for_break.html

<html>
<script type="text/javascript">
<!--

var sum = 0;
MYLABEL : for (var i = 1; i <= 10; i++) {
        for(var j=1; j<=10; j++){
                if (i == 3) {
                        continue MYLABEL;
                }
                sum += i * j ;
        }
}
alert(sum);//>2860

// -->
</script>
</html>

ラベル付きcontinue文例のフローチャート

_images/bat_for_double_continue_ex.gif

9.11. ラベル付きbreak文

ラベル付きのものは、主に多重ループを抜ける処理をスマートの書くために使います。

ラベル付きbreak文の例

js_for_double_break.html

<html>
<script type="text/javascript">
<!--

var sum = 0;
MYLABEL : for (var i = 1; i <= 10; i++) {
        for(var j=1; j<=10; j++){
                sum += i * j ;
                if (sum >= 15) {
                        break MYLABEL; // MYLABEL:forのループを脱出する。
                }
        }
}
alert(sum);//>15

// -->
</script>
</html>

ラベル付きbreak文例のフローチャート

_images/bat_for_double_break_ex.gif

9.12. goto文

goto文は未定義となっています。