ITメモ
JavaScript
「Javascript」の基礎知識
「Javascript」とは「Node.js」とは「Ajax」とは「chart.js」とは「Javascript」の使い方「Javascript」の「エラーチェック」をする方法「Javascript」の「変数」「Javascript」の「配列(Array)」「Javascript」の「DOM(Document Object Model)」の「使い方」「Javascript」の「関数 / Function」「Javascript」の「条件分岐・繰り返し」「Javascript」の「イベントハンドラー(Event Handler)」「Javascript」の「文字」を操作する方法「Javascript」の「文字」を検索する方法「Javascript」の「スコープ」「Javascript」の「ファイル操作方法」「Javascript」の「画像操作方法」「Javascript」の「情報」を出力・チェックする方法「Javascript」での「ヒアドキュメント」の使い方「Javascript」の「Built-in Object(ビルトインオブジェクト)」「Javascript」の「ライブラリー / Library」
Reference
数字
「Javascript」で「計算」に誤差が出る時の解決方法
ファイル読み込み
「XMLHttpRequest」オブジェクト - サーバーのファイルを読み込む方法
イベント
ページ読み込み時に「Javascript」を実行する方法画像読み込みが完了してから、次の処理を実行する方法「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法
要素情報
HTMLタグの「class」属性値を取得、変更する方法「querySelector()」の使い方 - HTML要素の情報を参照・設定する方法「querySelectorAll()」の使い方 - 要素内の指定した子要素を参照・設定する方法「classList」プロパティ - HTMLタグ属性値「class」の情報を参照・確認・追加・削除する方法「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法「getElemetnsByClassName()」の使い方 - HTML要素の情報を「クラス名」で参照・設定する方法「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法「ParentNode.children」の使い方 - 要素内の子要素を参照・設定する方法要素の配置位置を確認する方法
Style関連
スタイル属性(色・線・大きさなど)を参照・変更する方法「getPropertyValue」メソッド - 指定されたCSSプロパティの値などを取得する「getComputedStyle」メソッド - CSSを適用したスタイルを参照する
ページ関連
Webページのタイトルを変更する方法「モニター」情報を取得する方法「ブラウザ」情報を取得する方法「ページ」情報を取得する方法「イベント」情報を取得する方法「マウス」情報を取得する方法
サイズ関連
要素の縦・横サイズを参照・変更する方法「モニター」「ブラウザ」のサイズ情報を取得する方法
端末情報
スマートフォンからのアクセスを識別する方法
Library「jQuery」
【jQuery】とは【jQuery】の書式【jQuery】「Javascript」にリンクさせる方法【jQuery】「Javascript」に記述する方法【jQuery】のオブジェクト【jQuery】「CSS」を参照・設定する方法【jQuery】「HTML」要素の情報を参照・設定する方法【jQuery】「HTML」タグを追加する方法【jQuery】ユーティリティ関数【jQuery】イベントアクションを設定する方法【jQuery】イベントオブジェクト「.on」の使い方【jQuery】読み込み完了してから実行する「.ready」の使い方【jQuery】「Ajax」を使う方法【jQuery】「エフェクト」「アニメーション」を使う方法





【Javascript】条件分岐・繰り返し

【Javascript】
条件分岐・繰り返し




構文は、プログラミングを記入していく上で、必ず利用されます。
条件分岐ができるので、条件にあったプログラミングを記述する際には、必ず必要になってきます。
一つずつ使い慣れてくると、凄く便利なものです。






条件分岐・繰り返し構文の種類


「条件分岐」「繰り返し」構文の一覧
条件分岐(if)
if (expression) statements1 else statements2expression が真であれば statements1 を、真でなければ、statements2 を実行。
条件分岐(switch)
switch (expression) { case value: statements; ... }expression の値に応じて処理を振り分ける。case:の値にマッチするとcase:に記述されて内容が実行される。
繰り返し(while)
while (expression) statementsexpression が真である間、statements を繰り返す。
繰り返し(do)
do statements while (expression) doを1度実行し、以降、expression が真である間、statements を繰り返します。
繰り返し(for)
for (expression1; expression2; expression3) statements最初に expression1 を実行し、次に、statements と expression3 を行い、 expression2 が真である間繰り返す。
for (variable in array) statementsfor を用いてオブジェクトが持つ属性の一覧を調べる。
ループを抜ける(break)
break最も内側のループの残りを実行しないで抜ける。
break labelラベル指定したループを残りを実行しないで抜ける。
ループを続ける(continue)
continueループ内の残りの処理をスキップし、もっとも内側のループの次条件を実行。
continue labelループ内の残りの処理をスキップし、もっとも内側のループの次条件を実行。label指定した場合は、ラベルで指定したループの次条件を実行。
ラベル(label)
label:スクリプト中の位置にラベルをつける。
オブジェクト参照(with)
with (obj) statementsobj で指定したオブジェクトについて処理を行う。


Back



条件分岐・繰り返し構文の使い方


条件分岐「if」構文


if (expression) statements1 else statements2

//expression が真であれば statements1 を、真でない場合、statements2 を実行。


if (n < 10) {
alert("SMALL");
} else if (n > 20) {
alert("BIG");
} else {
alert("NORMAL");
}


条件分岐「switch」構文


switch (expression) { case value: statements; ... }

expression の値に応じて処理を振り分ける。
case 値:にマッチした場合、そこに記述された内容が実行される。


switch (xx) {
case 1:
alert("ONE");
break;
case 2:
alert("TWO");
break;
case 3:
case 4:
alert("THREEorFOUR");
break;
default:
alert("OTHER");
break;
}


Back



繰り返し構文の使い方


繰り返し「while」構文

while (expression) statements

expression が真である間、statements を繰り返す。
n = 0;
while (n < 10) {
document.write(n);
n++;
}



do statements while (expression)

doが1度実行され、expression が真である間、statements を繰り返す。
n = 0;
do {
document.write(n);
n++;
} while (n < 10);


繰り返し「for」構文


for (expression1; expression2; expression3) statements
最初に expression1 を実行し、次に、statements と expression3 を expression2 が真である間繰り返す。


for (i = 0; i < 10; i++) {
document.write(i);
}



for (variable in array) statements

配列のすべての要素に関する処理を行う。
xx = new Array(3);
xx[0] = "A";
xx[1] = "B";
xx[2] = "C";
for (i in xx) {
document.write(xx[i]);
}

for を用いてオブジェクトが持つ属性の確認例:
for (i in navigator) {
document.write(i, "<br>");
}


「break」の使い方

break は、最も内側の for、while、do ループや、switch 文の case 節を中止してスキップする。
for (i = 0; i < 10; i++) {
if (i == 5) {
break;
}
document.write(i);
}

labelを使用するとラベル付けされた繰り返し分がスキップされる。
abc:
for (i = 0; i < 10; i++) {
for (j = 0; j < 10; j++) {
xx = i * 10 + j;
if (xx > 20) {
break abc;
}
document.write(xx + "<br>");
}
}


「continue」の使い方

ループ内の残りの処理をスキップし、もっとも内側の for, while, do ループの次条件判定ループを実行。
for (i = 0; i < 10; i++) {
if (i == 5) {
continue;
}
document.write(i);
}

labelを使用してのcontinueの使用例:
abc:
for (i = 0; i < 10; i++) {
for (j = 0; j < 10; j++) {
xx = i * 10 + j;
if (xx == 55) {
continue abc;
}
}
}


「label:」の使い方

スクリプト中の位置にラベルをつける。目印となり、continue,breakなどで指定することも可能。
label1:
for (i = 0; i < 10; i++) {
for (j = 0; j < 10; j++) {
if (func(i, j) {
break label1;
}
}
}



「with (obj)」ステートメントの使い方

obj で指定したオブジェクトについて処理を行う。
通常例:
document.write(document.bgColor);
document.write(document.fgColor);

withの使用例:
with (document) {
write(bgColor);
write(fgColor);
}


Back



変数の「空(null)」判定


空判定は、変数に値がはいっているかを判定することをいう。
プログラムを書いていると、変数の値によって、別のプログラムを適用するコードを頻繁に記述する。
その時に、変数に値が入っていない場合の処理も、頻繁に記述する。
どのプログラム言語でも、空判定は必要になる。





値の種類と判定結果

プログラムでしようする「値」「型」の条件式による判定結果。


種類結果
{}オブジェクトtrue
"sample"文字列true
空文字("")文字false
空文字('')文字false
1数値true
-1数値true
0数値false
[]配列true
true真偽値true
false真偽値false
undefinedundefinedfalse
nullnullfalse



空判定に使える条件式

説明
!変数名 「!」を加えると「空の変数」「false」「undefined」「null」の通常「false」判定になる値が「true」になる。

通常は、
変数に値があると「true」。
変数が空だと「false」。
「!」は、
「false」の時に、「true」を返す。
「true」の時に、「false」を返す。
変数名=="" 変数が空文字と一致して結果「ture」となる条件式。
変数名=='' 変数が空文字と一致して結果「ture」となる条件式。
変数名=="false" 変数が真偽値の「false」と一致して結果「ture」となる条件式。
変数名=="undefined" 変数が真偽値の「undefined」と一致して結果「ture」となる条件式。
変数名=="null" 変数が真偽値の「null」と一致して結果「ture」となる条件式。


記述例


if ( !変数名 ) {
プログラム
}

if ( 変数名=="" ) {
プログラム
}

if ( 変数名=='' ) {
プログラム
}

if ( 変数名=="false" ) {
プログラム
}

if ( 変数名=="undefined" ) {
プログラム
}

if ( 変数名=="null" ) {
プログラム
}




Back