→積が30未満の九九の生成

for(var i=1;i<=10;i++){
　for(var j=1;j<10;j++){
　　var k=i*j
　　if(k>30){break;}
　　document.write(k+'&nbsp');
　}
　document.write('<br/>');
}

処理の流れをSourcesで確認したのでそれもアウトプット

処理の流れ

var i = 1

i <= 10

(1 <= 10)

true

①　var j = 1

j < 10

(1 < 10)

true

var k = i*j

(1 = 1 * 1)

k > 30

(1 > 30)

true

document.write(k+'&nbsp');

(htmlに1とスペースが出力)

②　j++

(2 = 1 + 1)

j < 10

(2 < 10)

true

var k = i*j

(2 = 1 * 2)

k > 30

(2 > 30)

true

document.write(k+'&nbsp');

(htmlに2とスペースが出力)

j++

②の処理に戻りループが続く

j++

(9 = 9 + 1)

j < 10

(10 < 10)

false

③　 document.write('<br/>');

(下段に改行)この時点で1の段が終了

i++

(2 = 1 + 1)

i <= 10

(2 <= 10)

true

var j = 1

（①の処理からループを繰り返し③に入る）

i++

(3 = 2 +1)

その後もループを繰り返し積が30になった時点で

ネストからループを抜け処理していく。

結果：

1 2 3 4 5 6 7 8 9
2 4 6 8 10 12 14 16 18
3 6 9 12 15 18 21 24 27
4 8 12 16 20 24 28
5 10 15 20 25 30
6 12 18 24 30
7 14 21 28
8 16 24
9 18 27
10 20 30

ラベルを利用してネスト構造を抜けたあと全体の出力を停止させる。

例

→積が30を超えた時点で出力を停止

kuku :←　ラベル名:

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

　　for (var j = 1; j < 10; j ++) {

　　　var k = i * j if (k > 30) { break kuku; }←　break ラベル名;

　　　document. write( k + '&nbsp');

　　}

　document. write('< br />');

}

2018-09-08

今日の復習

Javascript プログラム今日の復習

break命令

→特定の条件を満たした場合、ループを中断する。

→1以上、100以下の整数を1から順番に足していき

　合計が1000を以上になる数字はいくつか求めたい。

var result=0;
for(var i=1;i<=100;i++){
result+=i;　//result=result+i 慣れていないため補足
if(result>1000){break;}//←が特定条件であり条件分岐命令を使用するのが一般的
}
console.log('合計金額が1000を超えるのは'+i);

結果：合計金額が1000を超えるのは45

continue命令

→特定の条件を満たした場合、その時のループをスキップして

　処理は継続する。

→1以上100以下の奇数の合計を求めたい。

var result=0;
for(var i=1;i<=100;i++){
　if(i%2===0){continue;}　　//変数iが偶数の場合のみ処理をスキップ
　result+=i;　　//result=result+i 慣れていないため補足
}
console.log('合計:'+result);

結果：2500

2018-09-06

今日の復習

Javascript ES2015 プログラム今日の復習

ループ構文

→反復に分類。同じ処理を繰り返す。

while命令

→条件が真である間、処理処理を繰り返す。

構文

while(条件式){

　条件式がtrueのときに実行される命令

}

var x=10;
while(x<10){
　console.log('xの値は'+x)
　x++;
}//結果：xの値は8　xの値は9

do...while命令

→条件が真である間、処理処理を繰り返す。

構文

do{

　条件式がtrueのときに実行される命令

}while(条件式);

var x=10;
do{
　　console.log('xの値は'+x);
　　x++;
}while(x<10);//結果：xの値は8　xの値は9

while命令とdo...while命令の違い

→while命令は前置判定。条件式をループの最初で判定。

　do...while命令は後置判定。条件式をループの最後で判定。

　そのため条件の真偽に関わらず、後置判定では必ず処理されるが

　前置判定では処理されない場合がある。

for命令

→回数を指定してループ処理をさせる。

構文

for(初期化式;ループ継続条件式;増減式){

　ループ内で実行する命令

}

for(var x=8;x<10;x++){
　console.log('Xの値は'+x);
};//結果：xの値は8　xの値は9

処理の流れ

var x = 8

x<10

(8<10)

true

console.log('Xの値は'+x);

(コンソールに表示)

x++

(9=8+1)

x<10

(9<10)

true

console.log('Xの値は'+x);

(コンソールに表示)

x++

(10=9+1)

x<10

(x<10)

false

終了

例2

→カンマ演算子を利用

for(var i=1,j=1;i<5;i++,j++){
　console.log('i*jは'+i*j);
}//結果：i*jは1　i*jは4 　i*jは9 　i*jは16

for...in命令

→オブジェクトのプロパティを取り出して先頭から順に処理する。

構文

for(仮変数 in 連想配列){

　ループ内で実行する命令

};

var data={apple:150,orange:100,banana:120};
for(var key in data){
　console.log(key+"="+data[key]);
};

/結果：apple =150 orange=100 banana=120

for...of命令 ES2015

→配列などを列挙する命令

構文

for(仮変数 of 配列){

　ループ内で実行する命令

}

var data = ['100','200','300'];
for(var val of data){
　console.log(val);
};

/結果：100 200 300

2018-09-06

今日の復習

Javascript プログラム今日の復習

switch命令

→選択に分類。条件から複数の選択肢のいずれかを実行。

構文

→breakは現在のブロックから脱出するための命令

switch(式){

case 値1:

break;

式=値1の場合に実行する命令

case 値2:

break;

式=値2の場合に実行する命令

...

default:

式の値がすべてに合致しない際に実行する命令

break;

}

例1

var rank='B';
switch(rank){
　case'A':
　　console.log('Aランク');
　　break;
　case'B':
　　console.log('Bランク');
　　break;
　case'C':
　　console.log('Cランク');
　　break;
　default:
　　console.log('Cランク');
　　break;

}

例2

→複数の条件に対して命令をまとめたい場合はブロックを空にしてまとめる

こともできる。

var rank='B';
switch(rank){
　case'A':
　case'B':
　case'C':
　　console.log('合格');
　　break;
　case'D':
　　console.log('不合格');
　　break;
}

2018-08-31

今日の復習

Javascript 今日の復習プログラム

制御構文

→順次、選択、反復を組み合わせてプログラムを組み立てる手法を構造化プログラミングという。

順次：記述された順番に処理を実行する。
選択：条件によって処理を分岐する。
反復：特定の処理を繰り返し実行する。

if命令

→選択に分類。条件から二択のいずれかを実行

構文1

→ブロック：｛｝に囲まれた部分

if(条件式){

条件式がtrueの場合実行する命令

}else{

条件式がfalseの場合実行する命令

}

構文2（分岐が複数の場合）

if(条件式1){

条件式がtrueの場合実行する命令

}else if(条件式2){

条件式がfalseの場合実行する命令

}

...

else{

すべての条件式がfalseの場合実行する命令

}

構文3（ネスト構造）

if(条件式1){

　if(条件式1がtrueの場合判定する条件式2){

　　条件式2がtrueの場合実行する命令

　}else{

　　条件式2がfalseの場合実行する命令

　}

}else{

　条件式1がfalseの場合実行する命令

}

例

2018-08-31

今日の復習

Javascript プログラム今日の復習

チャプター2続きその4

比較演算子

等価演算子

→等価演算子で参照型を比較する場合はメモリのアドレスが等しい場合のみtrueを返す。

例

var data1=['Javascript','Ajax','ASP.NET'];
var data2=['Javascript','Ajax','ASP.NET'];

console.log(data1==data2);　　結果：false

var data1=['Javascript','Ajax','ASP.NET'];
var data2=data1;
console.log(data1==data2);　　結果：true

条件演算子

記述方法

条件式? trueの処理;falseの処理

例

var x=200

console.log((x=200)? '当たり':'はずれ');　　結果：当たり

論理演算子

delete演算子

→オペランドに指定した変数、要素、プロパティを破棄。

破棄に成功したらtrue、失敗した場合はfalseを返す。

例1

→配列の要素を削除した場合、インデックス番号は変わらない。

　繰り上がることはなく該当箇所が削除される。

var ary = ['JavaScript','ajax','ASP.NET'];
console.log(delete ary[0]);　　結果：true
console.log(ary);　　結果：[1:'ajax',2:'ASP.NET']

例2

→オブジェクトもプロパティを削除した場合も配列と同様。

var obj = {x:1,y:2};
console.log(delete obj.x);　結果：true
console.log(obj.x);　結果：undefined

var obj2 = {x:obj,y:2};
console.log(delete obj2.x);　結果：true
console.log(obj);　結果：{y:2}

例3

→明示的に宣言された変数は削除できない。
var data1=1;
console.log(delete data1);　結果：false
console.log(data1);　結果：1

data2=10;
console.log(delete data2);　結果：true
console.log(data2);　結果：エラー

typeof演算子

→オペランドに指定した変数、リテラルのデータ型を表す文字列を返す。

例

var num = 1;
console.log(typeof num);　結果：number

var str ='カバ';
console.log(typeof str); 結果：string

var flag =true;
console.log(typeof flag); 結果：boolean

var ary =['フグ','okome','sendai'];
console.log(typeof ary); 結果：object

var obj={x:1,y:2}
console.log(typeof obj);　結果：object

学習日記

プログラミング学習のアウトプット用日記

今後の学習

JavaSciript

UML

デザイン

UX

adobeXD

英語リーディング(ヒアリング)

今日の復習

ネスト構文のループ脱出

ラベルを利用してネスト構造を抜けたあと全体の出力を停止させる。

今日の復習

break命令

continue命令

今日の復習

ループ構文

while命令

do...while命令

while命令とdo...while命令の違い

for命令

処理の流れ

for...in命令

for...of命令 ES2015

今日の復習

switch命令

今日の復習

制御構文

if命令

今日の復習

比較演算子

論理演算子