カテゴリー
JavaScript

オブジェクトリテラルについて知ろう

この章ではオブジェクトリテラルについて説明します。
オブジェクトリテラルは配列と似たところがありまして、データをまとめて管理することが出来ます。
配列はデータに順序がありましたが(添え字が0から始まっていました), オブジェクトリテラルは順番は決まっていません。
オブジェクトの要素はプロパティと呼ばれています。
プロパティとはオブジェクトが持つ情報のことです。
例えば「cats」というプロパティに猫というデータを入れると
catsプロパティは猫というデータを持っていることになります。
オブジェクトの作成方法は2種類あります。111
まず初めに基本構文1の例から見てみましょう。1 初めに1と言う形式でオブジェクトを作成します。
この例では1の箇所です。
その後は以下の形式でプロパティにデータを入れます。1 この例では1とデータを入れています。
もしくは以下の形式でプロパティにデータを入れます。
オブジェクト名とプロパティの間には1が必要です。1 この例では1とデータを入れています。
データを出力したい時はdocument.writeなどの引数に
「オブジェクト名[プロパティ]」
もしくは
「オブジェクト名.プロパティ」
という形式で指定します。
例えば1のように記述しますと「ウサギ」が出力されます。

次は基本構文2の例を見てみましょう。1 1この例では以下の箇所です。1 データを追加する場合には基本構文1と同じです。
データを出力する方法も基本構文1と同じです。

次はプロパティの値に関数を設置した例について説明します。1 以下のようにプロパティの値に関数を入れることが出来ます。1 そして、関数の中身を出力するには1 という形式で書きます。
この例では1を出力すると1を出力します。
1例えば1と書きますとrabbitプロパティが削除されます。
削除されたものを出力しようとすればundefinedが出力されます。

次はnewを使ったオブジェクトの作成方法について説明します。
11と書いても同じです。
では「new Object();」を使ってオブジェクトを作ります。11 を作成してから、データを入れていきます。
データの入れ方はこれまでの方法と同じです。

カテゴリー
JavaScript

関数について知ろう3

この章では関数の定義の3つ目である「関数リテラルで定義」について説明します。
初めに先ほど説明した「関数の定義の基本構文1」で作成した例を見てみましょう。11 これを「関数リテラルで関数を定義」する方法で書き直してみると以下のようになります。11 関数はデータ型であり、配列リテラルと同じように関数も関数リテラルで記述することが出来ます。1 この形式で書いた関数は無名関数と呼ばれています。
注意する点としては関数の定義は例のように呼び出しより前に書いてください。
つまり、以下のコードはエラーです。1

カテゴリー
JavaScript

関数について知ろう2

この章では関数の定義の2つ目である「Functionで定義」について説明します。
初めに先ほど説明した「関数の定義の基本構文1」で作成した例を見てみましょう。11 これを「Functionで定義」する方法で書き直してみると以下のようになります(変数の値は違います)。11これはFunctionオブジェクトを使った関数の定義です。
オブジェクトについては「オブジェクト指向型プログラミングについて」の章で学習しますので、今は形だけ覚えておいてください。1 カッコの中の引数はダブルクォートで囲って何個でも書くことが出来ますが、カッコの中の末尾は関数の処理文を書きます。
処理文もセミコロンで区切れば何個でも書くことが出来ます。
では関数の中身の説明をします。
関数の初めの3つ1は送られてきたデータが入れられる引数です。
末尾の1は3つの文からなっていますが、文の区切りにはセミコロンを付け、全体をダブルクォートで囲います(スペースの都合で関数を2行で書いていますが1行で書いても結構です)。
注意する点としてはFunctionで定義する場合は関数本体を関数の呼び出しより前に書いてください。
つまり、以下のコードはエラーです。1

カテゴリー
JavaScript

関数について知ろう1

この章ではユーザー定義関数について説明します。
関数とは「引数と言うデータ」を受け取って、ある一定の処理を行い、戻り値という結果を呼び出し元に返す命令のことを言います。
引数とは関数を実行するときに使われるデータです。戻り値とは関数を実行した結果、返される値です。
エクセルをご存知の方はわかると思いますが、例えばエクセル関数にSUMと言う関数がありますが、この関数は指定した範囲のデータに基づいて足し算を行う関数です。
例えば指定した範囲のデータが3,5,7(引数)であるならば結果は15です。
SUMには初めから指定した範囲の足し算を行うと言う仕組みが備わっています。エクセルの内部機構でSUMの機能は指定した範囲の足し算を行うというプログラムがされているということです。
この章で説明する関数はユーザー定義関数という名前が付いていますが、要はこのSUMのような機能を持つ関数を自分で作る方法について説明をしていきます。
例えば「消費税を自動で計算する関数」を自分で作りたいとします。
その場合、お金を関数に渡すと関数は商品金額に消費税率を掛けた処理をして、その結果を返すという関数を作ることになります。
関数に「ある一定の処理」を書くことを「関数の定義」といいます。
書き方は3つあります。1 関数名の付け方は基本的には変数の命名規則と同じです。
引数が複数ある場合はカンマで区切ります。
必要が無いならば引数は省略出来ます。1 カッコの中の引数はダブルクォートで囲って何個でも書くことが出来ますが、引数の末尾には「関数の処理文」を書きます。
処理文もセミコロンで区切れば何個でも書くことが出来ます。
「関数の定義の基本構文2」の説明は「関数について知ろう2」で説明します。1 関数はデータ型であり、配列リテラルと同じように関数も関数リテラルで記述することが出来ます。
「関数の定義の基本構文3」の説明は「関数について知ろう3」で説明します。
実は関数はただ書いただけでは動きません。
関数を実行するためには関数を呼び出さなくてはいけませんが、その構文は以下の通りです。1 必要が無いならば引数は省略出来ますが、引数を省略する場合もカッコを付けてください。
引数が複数ある場合はカンマで区切ります。
この章では「関数の定義の基本構文1」を説明します。
では例をみてみましょう。
この関数の書き方が一番分かりやすくて、よく使われます。11 この関数は三教科の平均を求める関数です。
heikinは関数名で、変数の命名規則と同じ範囲で自由に付けることが出来ます。
この関数を呼び出すには関数名と同じ名前を付けて呼び出します。
例で言えば以下の箇所です。1 関数を呼び出すことによってheikin関数の中身が実行されます。
関数の呼び出しの1のkokugo,sansuu,eigoの部分を実引数といい、1のe,f,gの部分を仮引数といいます。
なお、関数を呼び出しする位置は関数の定義の前でも後でも問題ありません。1 つまり例のように1を関数の定義の後に書いても問題ありません。

ではこの関数について詳しく見てみましょう。
①heikin(kokugo,sansuu,eigo);で関数を呼び出します。
引数である変数にはそれぞれ50、40、90が代入されています。
②1で関数を呼び出した後はkokugoの値が関数の引数eに、sansuuの値がfに、eigoの値がgに代入されます。
補足すべきことが2つあります。
1つ目は実引数と仮引数の変数名が同じでなくても問題ありません。
つまりkokugoとe, sansuuとf, eigoとgが同じ変数名である必要はありません。
2つ目は仮引数にvarは付ける必要はありません。
③2で仮引数e,f,gの部分にそれぞれ実引数の値が代入されましたが、仮引数eはfunction内部のeの部分に、仮引数fはfunction内部のfの部分に、仮引数gはfunction内部のgの部分に代入され計算が実行されます。1 ④function内部の処理が終わった後は呼び出し部分の1に戻ります。
結果は以下の通りです。
「三科目の平均は60です」

では次の例を見てみましょう。11 先ほどの例とほとんど同じですが、このheikin関数は計算結果を呼び出し元に戻しています。
結果を戻すには関数内に1という形式で記述してください。
returnは値を1つだけ返すことが出来ます。
そして、返された結果は例の1に代入します(変数名はbでなくても自由です)。
最後に1で出力して、結果を表示します。1
次は仮引数と実引数の数が違う場合はどうなるのかを説明します。11 heikin(kokugo,sansuu);のように実引数が2つで、1 のように仮引数が3つの場合、つまり実引数が仮引数より少ない場合は仮引数の余った変数(この例ではg)にはundefined(未定義値)が入ります。
結果は「NaN」ですが、これは数値型の値であり、この例のようにundefinedと足し算するなどの通常とは違った演算が実行された時に返される値です(数値に変換しようとしてできなかった場合)。
答えは以下の通りです。
「三科目の平均はNaNです」

カテゴリー
JavaScript

do-while文について知ろう

この章ではdo-while文について説明します。
do-while文はwhile文と同じで、繰り返し文を実行します。
while文は条件式を評価してから繰り返しを行うかどうか決定するので、条件式がfalseの場合は一度も実行されないこともあります。
do-while文は一度繰り返しを行った後に条件式を評価するので、最低でも一回は繰り返し処理を行います。1 では例をみてみましょう。1 では説明をしていきます。
①変数iに0を格納する。
②条件を判定することなく、初めに「こんにちは」を出力する。
③i++で変数iの値に1を加えて1にする。
while(i<2)の箇所で変数iの値が2より小さいかどうか評価しますが、iの値は1なのでtrueになります。
④先頭に戻って「こんにちは」を出力する。
⑤i++で変数iの値に1を加えて2にする。
while(i<2)の箇所で変数iの値が2より小さいかどうか評価しますが、iの値は2なのでfalseになり繰り返しを終了します。
結果は「こんにちはこんにちは」です。

カテゴリー
JavaScript

while文の中でif文とbreakを使おう

この章ではwhile文の中でif文を使うことと、さらにはwhile文の中で「強制的に繰り返し文を終了させたい時に使用するbreak」を使った例について説明します。
では例をみてみましょう。11 結果は以下の通りです。1 では詳しく説明します。
①iに1を代入します。
②(i <= 10)の条件を判定します。
iは1でtrueなので、whileの処理文を実行します。
③iは1なので、if文の条件部分にはマッチしないので、そのままif文はスルーします。
1を実行して「ループ1回目」を出力します。
⑤i++で1を足して、2になります。
⑥(i <= 10)の条件を判定します。
iは2でtrueなので、whileの処理文を実行します。
⑦iは2なので、if文の条件部分にはマッチしないので、そのままif文はスルーします。
1を実行して「ループ2回目」を出力します。
⑨i++で1を足して、3になります。
⑩(i <= 10)の条件を判定します。
iは3でtrueなので、whileの処理文を実行します。
⑪3回目のループで初めて、if文にマッチして1 を実行します。
そして、次にbreakがあるのでここでwhile文を抜けます。

カテゴリー
JavaScript

while文について知ろう

この章ではwhile文について説明します。
while文もfor文と同じく、条件式がtrueの場合は何度でも繰り返しを実行します。1 では例をみてみましょう。1 結果は「12345」です。
初めにwhileが実行される時に条件式がtrueかfalseなのかをチェックします。
trueである場合はwhile文が実行されます。
falseである場合はwhile文は実行されません。
falseの場合はwhile文はスルーされます。
whileは条件式がtrueである限り何度でも処理を実行します。
順を追って説明しましょう。
①初めにiに初期値1を代入します。
while( i < 6 )の条件式をif文と同じようにtrueかfalseで判定します。
もし条件式がtrueであるならば、1を実行します。
falseであるならば1は実行されません。
この例の場合には初期値1は6未満なので1を実行して、1を出力します。
そしてi++の箇所で1を加えiは2になります。
②そして、また最初の1の部分に戻ります。
上の1番でiは1が足されて2になっていますが、2は6未満なのでtrueになり、1を実行して、2を出力します。
そしてi++の箇所で1を加えiは3になります。
③そして、また最初の1の部分に戻ります。
上の2番でiは1が足されて3になっていますが、3は6未満なのでtrueになり、1を実行して、3を出力します。
そしてi++の箇所で1を加えiは4になります。
④そして、また最初の1の部分に戻ります。
上の3番でiは1が足されて4になっていますが、4は6未満なのでtrueになり、1を実行して、4を出力します。
そしてi++の箇所で1を加えiは5になります。
⑤そして、また最初の1の部分に戻ります。
上の4番でiは1が足されて5になっていますが、5は6未満なのでtrueになり、1を実行して、5を出力します。
そしてi++の箇所で1を加えiは6になります。
⑥そして、また最初の1の部分に戻ります。
上の5番でiは1が足されて6になっていますが、1の条件判定はfalseになるため、ここで処理を終了します。
このように繰り返しを1の条件部分がfalseになるまで繰り返します。
つまり変数iが6以上になったらループを抜けます。
もし、i++がないとどうなると思いますか?
答えは無限ループと言いまして、1の部分が永遠に6以下にならないので無限に1を繰り返します。

カテゴリー
JavaScript

for文の中でcontinueを使おう

この章ではcontinueの使い方について説明します。
continueは現在進行している周回を抜けても、ループ自体は続けたい場合に使います。
では例をみてみましょう。11実行結果は以下の通りです。
「1つのリンゴ2つのリンゴ3つのリンゴ5つのリンゴ」
if(i==k)の条件がtrueの場合、下の行にある1を実行することなく、forの先頭に戻ります。
つまり、例の場合は「4つのリンゴ」という文を出力しません。
そして、iとkがイコールになったのならばforの先頭に戻って、1でループを続けるかどうかを決めますが、5はまだtrueなので「5つのリンゴ」を出力します。
breakと違いループ自体を止めることはしません。

次はラベル付きのcontinueについて説明します。
では例をみてみましょう。11 結果は「035679」です。
これはラベル付きのbreakと構造は同じです。
「ある条件になったら周回を抜けたいと思う箇所」に1と記述してください
(例の場合は「continue A;」)
次に抜けたいところに1と言う形式で記述すると、そこまで実行位置を移すことが出来ます。
(この例の場合はA:)
ラベル名は変数名と同じ規則で自由に付けることが出来ます。
この例の場合はcが8になった時にcontinue でAのあるところまで実行位置が移るので、1 が実行されないのはiが1の時と2の時と4の時と8の時になります。

カテゴリー
JavaScript

forとifとbreakを組み合わせて使おう

この章で説明することはfor文の中でif文を使うことと、さらにはfor文の中で「強制的に繰り返し文を終了させたい時に使用するbreak」の使い方について説明します。
breakは、現在実行中の 繰り返し文の実行を強制的に終了させます。
では例をみてみましょう。
11 結果は1です。 
for文のブロックの中にif文が入っています。
このようにfor文にif文を入れることも出来ます。
この例のif文の中にはbreakが入っているので「もし、iが4になったらforループを抜けますよ」と言う意味です。
ですので、「4つのリンゴ」を出力することなくループを終了します。
breakはこのように「一連の流れ(ループ)を強制的に中止しブロックを抜ける」と言う意味になります。
iが4になった時にfor文をbreakするので、それ以降の「4つのリンゴ」「5つのリンゴ」は表示されません。
for文の入れ子の中でbreakを使う場合には注意が必要です。
では例を見てみましょう。11 結果は以下の通りです。1上から2つ目のforの中でbreakを使っていますが、2つ目のforの中でbreakを使った場合breakで抜けることができるのはbreakのあるfor文(例の場合は上から2つ目)だけです。
つまり例の場合は上から2つ目のfor文の中のif文の条件部分が3を超えたら、(上から2つ目の)for文をbreakするのですが、breakした後はまた一番前の1に戻ってループを繰り返します。
ですので
2掛ける2=4
2掛ける3=6
3掛ける2=6
3掛ける3=9
は ifの条件式(i*j>3)を超えているので表示されません。

では次に進みます。
for文の入れ子の場合、内側のfor文の中に
あるbreakはbreakを含むfor文のブロックしか抜けませんが、一気に外側のブロック(一番前のfor)を抜ける方法について説明します。
では例をみてみましょう。11 ある条件になったら繰り返しを止めたいと思う箇所に1 と記述してください
(例の場合はbreak OUT;)。
次に抜けたいところに1と言う形式で記述すると、そこまで実行位置を移すことが出来ます(例の場合は「OUT:」)。
ラベル名は変数名と同じ規則で自由に付けることが出来ます。
この例では1 の所で「i*j」の結果が3より大きければ、1のある場所まで実行位置を移すので二重ループそのものを抜けます
結果は以下の通りです。1

カテゴリー
JavaScript

配列の要素をfor文で取り出そう

この章ではfor文で配列の要素を取り出す方法について説明します。
配列の要素をすべて取り出すには以下の形式でfor文を使用します。
では例をみてみましょう。1 for文のもう一つの使い方ですが、cにはperson1配列の添え字が順番に入ります。
その結果、person1[c]の中のcに順番に添え字が入るので、配列の要素を出力することが可能になります。1 もしくは前の章のfor文の使い方で配列の要素を取り出すことが出来ます。1 0から1までの添え字が順番に1の中のiに代入されますので、すべての配列の要素を出力することが出来ます。