本節の目的
プログラミング言語としてのJavaScriptの学習を行います。
ほとんどのプログラム言語にある、最も基本的なプログラミング言語の要素について学習します。
プログラミング言語の基本
一般的なプログラミング言語の文法に基づき、JavaScriptの基本的な文法を理解しましょう。
プログラム実行時の基本的な流れ
プログラムは、基本的には、記述された処理を上から下に順に実行します。
例えば、以下のような sample1()の処理では、まずshori1( )を行い、次に、shori2( )を、 最後にshori3( )を実行します。
function sample1( ) { shori1( ); shori2( ); shori3( ); }
「変数」および「代入」
数値や文字を入れることができる変数が利用できます。変数は、物を入れる「物入れ(箱、ケース)」としてイメージしてもらうと、わかりやすいでしょう。
ところで、変数の名前(変数名)は、自由に付けてよいことになっています。入れる内容物を表す名前つけるようにしましょう。そうすれば、後になって、プログラムを変更するとき、すぐにその意味がわかります。例えば、年齢を入れる変数の名前は、「x」とするより「nenrei」とか「age」とする方が、わかりやすいですね。
ただし、そのコンピュータ言語において、命令の名前(コマンド名)などとして予約されている単語を変数名として利用することはできません。例えば、JavaScript言語で、"function"は、関数(メソッド)を定義するための命令として予約されているので、変数名には使うことはできません。
数学では、変数といえば慣例として「x」や「y」を用いますので、 プログラミングの経験のない方は、そのような変数名を付けてしまいます。意識して内容の分る変数名を付けるよう心がけましょう。
ところで、「物入れ」には、物を入れないと意味がありませんね。 変数に物を入れることを、代入と呼びます。
代入は、次のように「=」で表します。 この処理(式)は、 『「nenrei」という変数(物入れ)に「47」という数値を入れる』ということを表しています。
nenrei = 47 ;
上の処理(式)で「=」の両端に空白があるのは、代入操作を表す「=」と、変数名や変数に入れる値との区切りを明確にするためです。
nenrei=47;
のように、空白を無くして(詰めて)も動作は全く同じです。
ここで、「代入処理の書き方」と「変数の値(中身)の利用」に関して、 2つの注意を行っておきます。
【1】代入処理の書き方
上記の処理を、変数と代入する値を入れ替えて次のように書くことができると思いますか?
47 = nenrei ;
答えは、「NO」です。
なぜなら、「代入」は、『代入処理を表す「=」の左側にある変数に、「=」の右側の値を入れる』 という処理として定義されているからです。そのため、『代入を行う記号である「=」の左側には、変数しか書くことができない」ことになります。
【2】変数の値(中身)を別の変数やその変数自身へ代入できる
次の処理の意味がわかりますか?2つ目の処理に、「- 2」という記述がありますが、これは「2だけ減ずること」を表しています。
kare_no_nenrei = 20 ; watashi_no_nenrei = kare_no_nenrei - 2 ;
まず、上方の処理で「kare_no_nenrei」という変数に「20」を代入しています。 次の処理では、「kare_no_nenrei」から 2引いた値を、 「watashi_no_nenrei」に代入しています。つまり、この時点で、「watashi_no_nenrei」の値(中身)は、「18」になっています。
ちなみに、「kare_no_nenrei」は、「20」のままです。「watashi_no_nenrei」に、その値から2引いた値を代入したからといって、「kare_no_nenrei」の値(中身)は、無くなりません。
kare_no_nenrrei = 20 ;
watashi_no_nenrei = kare_no_nenrei - 2 ;
watashi_no_nenrei = watashi_no_nenrei + 1 ;
答えは、「正しい」です。えっ?何で???
追加した処理は、x=x+1という形をしていますので、数学の方程式として解釈すると確かにおかしいです。ところが、 JavaScript(ほとんどのプログラミング言語でも同様)では、「=」は、代入処理を表しますので、x=x+1は、おかしくないのです。
つまり、JavaScriptにおいて x=x+1 は、『「=」の右側にある x+1 と言う処理を行った結果(の値)を、「=」の左側にある x という変数に代入するという処理』を表しています。 つまり、「=」の左右にある変数 x の値(中身)は、異なるということです。
ですから、上の紫字の処理は、文法的に正しいのです。2行目までで、「watashi_no_nenrei」が「18」になっていましたので、3行目の紫字の処理を行うと、その結果、「watashi_no_nenrei」が「19」になります。
このような処理は、頻繁に出てきますので、意味をしっかり理解しておいて下さい。
基本的な演算
前節にも出てきましたが、四則演算を行うことができます。また、整数の計算については、余り(剰余)を求めることもできます。
例 | 内容 |
---|---|
a + b | a と b を加算する |
a - b | a から b を減じる |
a * b | a と b をかける |
a / b | a を b で割る |
a % b | a を b で割った余り (ただし、aもbも整数の時) |
例えば、肥満の度合を示す指数であるBMI値は、次のような処理(計算)を行うことで得られます。 身長及び体重を表す変数を、それぞれ weight 及び hight としています。BMI値は、変数 bmi に入ります(設定されます)。
weight = 62.5 ; hight = 1.72 ; bmi = weight / (hight * hight) ;
最も基本的な結果の表示
プログラミングの経験の無い人にとって、わかりにくいことの一つに、 表示の問題があります。上記のように、代入したり計算したりすると、 その結果が自動的に表示されるように思ってしまいますが、それは間違いです。 プログラミングを行う際には、表示したいものは、 表示する処理を明示的に行わないと何も表示されません。
処理をした結果を表示するにはさまざな方法がありますが、 ここでは、今対象となっているWebブラウザの画面に直接表示する方法を示します。
次のように書くと、「変数名」で示した変数の内容をWebブラウザに表示できます。
document.write(変数名) ;
先のBMI値を表示させるためには、以下のようにすればよいのです。
weight = 62.5 ;
hight = 1.72 ;
bmi = weight / (hight * hight) ;
document.write(bmi) ;