スクリプトでは記述された処理を続けて行うだけでなく、ある条件をもとに処理を変えたり、処理を繰り返したりできます。
スクリプトは、通常。
1行目から記述した順に実行されていきますが、特定の条件によってこの流れを制御することで、ユーザーのアクションなどに応じた複雑な処理を記述できるようになります。
このようにスクリプトの流れをコントロールする仕組みを「制御構造」といいます。
制御構造には「条件分岐」と「ループ」があります。
JQueryの基本（制御構造編）
1. 条件分岐
条件分岐は「もしも〇〇だったら〇〇の処理を実行する」といったように、ある条件によって処理を分岐させ、プログラムの流れを制御します。
条件の指定には「=」や「<」などの演算子を利用します。
1-1. if文
条件分岐のなかで最も利用するのがif文です。
DateオブジェクトのgetHoursメソッドで現在の時刻を取得し、7時から10時の間は、「おはようございます」、それ以外は「こんにちは」を書き出します。
処理内容は「(～)」(ブレース)の中に記述します。処理の内容が一つの場合はブレースの記述を省略できます。
「else」の記述も条件に合致しなかった場合の処理が必要なければ章略することができます。
構文：
if(分岐する条件){
条件に合致した場合の処理
}else{
条件に合致しなかった場合の処理
}例文：if文
var today = new Date();
var hour = today.getHours();
if((hour >=7)&&(hour <= 10)){
document.weite("おはようございます");
}else{
document.weite("こんにちは");
}DateオブジェクトのgetHoursメソッドで現在の時刻を取得し、7時から10時の間は、「おはようございます」、それ以外は「こんにちは」を書き出します。
処理内容は「(～)」(ブレース)の中に記述します。処理の内容が一つの場合はブレースの記述を省略できます。
「else」の記述も条件に合致しなかった場合の処理が必要なければ章略することができます。
1-2. else if文
構文：
if(分岐する条件１){
条件１に合致した場合の処理
}else if(分岐する条件２){
条件１には合致しないで条件２に合致した場合の処理
}else{
すべての条件に合致しなかった場合の処理
}例文：else if文
var today = new Date();
var hour = today.getHours();
if((hour >= 7)&&(hour <= 10)){
document.write("おはようございます");
}else if((hour > 10)&&(hour <= 18)){
document.write("こんにちは");
}else{
document.write("こんばんは");
}DateオブジェクトのgetHoursメソッドで現在の時刻を取得し、7時から10時の間は、「おはようございます」、10時から18時の間は、「こんにちは」、それ以外は「こんばんは」を書き出します。
if文の例より条件がひとつ増えました。条件を増やせることで細かく制御することができます。
1-3. switch文
条件分岐はif文だけで表現できますが、分岐が多くなった場合にはswitch文を利用してシンプルに記述することができます。
DateのgetDayメソッドを利用して曜日を取得してその値によって処理を分散させています。
break文がないと次のcase文やdefault文の内容を実行してしまうので注意しましょう。
構文：
switch(条件となる式、または変数){
case ラベル１：
条件がラベル１の値に合致した場合の処理
break;
case ラベル２：
条件がラベル２の値に合致した場合の処理
break;
default;
すべてのラベルに合致しなかった場合の処理
}例文：switch文
var today = new Date();
var dayNumber = today.getDay();
switch(dayNumber){
case 0:
window.alert("今日は日曜日です")
break;
case 6:
window.alert("今日は土曜日です")
break;
default;
window.alert("今日はウィークデーです")
}DateのgetDayメソッドを利用して曜日を取得してその値によって処理を分散させています。
break文がないと次のcase文やdefault文の内容を実行してしまうので注意しましょう。
2. ループ
ある条件に合致する場合、同じ処理を何度も繰り返す制御方法を「ループ」といいます。
ループを利用する際は、条件が最後に必ず合致しなくなるよう(false)に記述しないと、無限ループに陥ってしまいますので注意しましょう。
2-1. for文
for文では、条件を設定し、その条件に合致するあいだ、処理を繰り返します。
ループを開始する値、ループの条件、カウンタの増減をまとめて記述します。
ループを開始する値、変数dayが1から31になるまで日付を書き出します。
「day++」で変数dayに1加算しています。
ループを開始する値、ループの条件、カウンタの増減をまとめて記述します。
構文：
for(開始値；条件；カウンタ){
繰り返す処理
}例文：for文
var element = "<table><tr>";
for(var day = 1 ; day <= 31 ; day++){
element = element + "<td>" + day + "日";
if(!(day % 7)){ // 7で割り切れる場会は改行します。
element = element + "</tr><tr>";
}
}
element = element + "<table><tr>";
$(document.body).append($(element));ループを開始する値、変数dayが1から31になるまで日付を書き出します。
「day++」で変数dayに1加算しています。
2-2. while文
while文も条件そ指定し、その条件に合致するあいだ、処理を続けます。
For文と違って、ループの回数が特定できる場合はfor文（またはwhile文）、ループの回数が条件に応じて変わる場合はwhile文を使います。
while文では、for文と違い、ループを開始する値とカウンタの増減（条件の更新）を別々に記述します。
「day++」がないと無限ループに陥りますので注意しましょう。
For文と違って、ループの回数が特定できる場合はfor文（またはwhile文）、ループの回数が条件に応じて変わる場合はwhile文を使います。
構文：
while(繰り返す条件){
繰り返す処理
}例文：while文
var day = 1;
var element = "<table><tr>";
while(day <= 31){
element = element + "<td>" + day + "日";
if(!(day % 7)){
element = element + "</tr><tr>";
}
day++;
}
element = element + "<table><tr>";
$(document.body).append($(element));while文では、for文と違い、ループを開始する値とカウンタの増減（条件の更新）を別々に記述します。
「day++」がないと無限ループに陥りますので注意しましょう。
3. 変数
値を一時的に記憶したり、同じ値を繰り返し使う場合に利用するのが変数です。
変数の宣言は、変数名の前に「ver」というキーワードをつけます。
var 変数名 = 値 ;
「var」は仕様上は省略できますが、記述しておいた方が安全です。「var」を省略した場合は、同時に利用したほかのライブラリやスクリプトからも参照できてしまうため、誤動作の原因にもなります。
変数を宣言するときは、2行目のように代入演算子を使い変数の宣言と値の代入を同時に行うこともできます。
変数には、数値、文字列、論理値など、「データ型」と呼ばれる基本的な値の型があります。
ほかにも値が存在しないことを表現する「null」、未定義を表現する「undefined」などの型もあります。
javaScriptではデータ型は自動的に判断されるため、数値型と文字型が混在する場合など、演算の優先順位があるので注意が必要です。
var b ="a"; // 文字型 数値として扱われる
var b ="c"; // 文字型 数値として扱われる
var d = a + c ; // dには"104"の文字が格納される
変数
変数は、数値や文字列など、スクリプトで利用する値を名前を付けて保管する入れ物といえます。変数の宣言は、変数名の前に「ver」というキーワードをつけます。
構文：
var 変数名 ;var 変数名 = 値 ;
「var」は仕様上は省略できますが、記述しておいた方が安全です。「var」を省略した場合は、同時に利用したほかのライブラリやスクリプトからも参照できてしまうため、誤動作の原因にもなります。
変数を宣言するときは、2行目のように代入演算子を使い変数の宣言と値の代入を同時に行うこともできます。
変数には、数値、文字列、論理値など、「データ型」と呼ばれる基本的な値の型があります。
ほかにも値が存在しないことを表現する「null」、未定義を表現する「undefined」などの型もあります。
javaScriptではデータ型は自動的に判断されるため、数値型と文字型が混在する場合など、演算の優先順位があるので注意が必要です。
変数の利用例：
var a =10; // 数値型 数値として扱われるvar b ="a"; // 文字型 数値として扱われる
var b ="c"; // 文字型 数値として扱われる
var d = a + c ; // dには"104"の文字が格納される
4. 配列
配列は、変数にインデックスをつけて、複数のデータをまとめて扱う入れ物です。
配列を宣言するときは「Array」を記述します。
配列の個々の値を「要素」、配列に割り当てる番号を「インデックス」といいます。
インデックスは「０」から始まるため、1番目の要素のインデックスは「０」から始めるため、１番目の要素のインデックスは「０」、2番目の要素は「１」となります。
インデックスには文字列を設定することもでき、これを「連想配列」と呼びます。
配列の利用例：
var image = new Array(3); // 要素数「3」の配列を宣言
image[0] = 120;
image[1] = 90;
image[2] = “画像の説明”;
var a = image[1]; // 変数aには90が格納される
配列の要素には、異なるデータ型の値を代入することができます。
5. 代入演算子
変数や配列に値を代入する際に使う「=」などを、代入演算子と言います。
「+=」などと算術演算子と組み合わせることで、数値の計算と値の代入の２つの処理を同時に行います。
「変数aの値に5を加算して、そのまま変数aに代入したい」場合等によく使われます。
代入演算子：
| 演算子 | 内容 | ||
| = | A=5 | Aに数値5を代入 | |
| += | A+=1 | Aに1を加算した値をAに代入（Aが9の場合は10） | |
| -= | A-=3 | Aから3を減算した値をAに代入（Aが9の場合は6） | |
| *= | A*=5 | Aに5を乗算した値をAに代入（Aが6の場合は30） | |
| /= | A/=4 | Aを4で除算した値をAに代入（Aが9の場合は2.25） | |
| %= | A%=6 | Aを6で除算した余りの値をAに代入（Aが7の場合は1） | |