..

JavaScriptの入門とサンプル集
■JavaScript入門−基本編−変数と配列、演算子について　　　　　■戻る　　　　　■次へ　　　　　■Home
■変数と配列、演算子について

　JavaScriptで変数を使ってみましょう。変数とは数値や文字列、真偽値、オブジェクトなどを代入して、計算や表示、オブジェクトの指定などを行 うプログラミングにはなくてはならないものです。それでは、サンプルプログラムと照らしあわせて、どんなアラート表示が出るのか見てください。 JavaScriptでは他の言語のように最初に変数の型を宣言する必要はなく、なんとも融通の利くようにできています。

<html>
<head>
<title>変数</title>

<script language="JavaScript"><!--

   a=10;                          //　aに10を代入
   window.alert(a);

   a=20;
   b=a;                           //　bにaを代入
   window.alert(b);

   a=b=c=100;                //　aとbとcに100を代入
   window.alert;(c);

   d="文字列の場合";　　//　dに文字列を代入
   window.alert(d);

   a=b+c;                      //　aにbとcの和を代入
   window.alert(a);

// --></script>

</head>
<body>
</body>
</html>

 〜sample2_1.html〜のリスト






「a」という変数に10を代入します。
アラートダイアログに「10」と表示されます。


「b」という変数に「a」の値を大移入します。
アラートダイアログに「20」と表示されます。

このように一度に複数の代入を行うこともできます。
アラートダイアログに「100」と表示されます。

文字列の場合は「"」か「'」で囲みます。
アラートダイアログに「文字列の場合」と表示されます。

計算結果を代入するにはこのようにします。
アラートダイアログに「200」と表示されます。
演算記号については下記を参照してください。



行末は「；」でくぎります。
「//」はJavaScriptでのコメント文を意味します。

　　　■sample2_1.htmlを実行する

sample2_1.htmlの実行画面
《　演算子の種類　》
+
-
*
/
%
++var
var++
--var
var--
&
|
^
~
!
<<
>>
>>>
+=
 加算
減算
乗算
除算
剰余
インクリメント
〃
デクリメント
〃
AND
OR
XOR
NOT
否定
左シフト
右シフト
0埋め右シフト
複合代入演算子



割り算の余り
代入前に1加算　　++a
代入後に1加算　　a++
代入前に1減算　　--a
代入後に1減算　　a--
ビット演算は４バイト整数と見なす







a+=1・・・a=a+1　　a*=5・・・a=a*5
比較演算子については「繰り返し処理、条件分岐」の項目を参照
■補足　『ローカル変数とグローバル変数』

　変数を明示的に宣言するには「var」を使います。　通常変数はグローバル変数となりますが、関数のパラメーターや関数内で「var」を使って明示するとその関数内だけで有効になるローカル変数となりグローバル変数と名前が同じであっても区別されます。
　ちなみに、初めに宣言していないグローバル変数を関数内で初めて使うとネスケの場合はグローバル変数と解釈してくれるようですが、ＩＥの場合はエラーとなるようなので、グローバル変数は最初に宣言しておいた方が無難のようです。
a=10;
var b=10;
var c=10;
subfunc(10);

function subfunc(a)
{
   var b=100;
   b=b-a;
　c=b;
}
aはグローバル変数
bもグローバル変数
cもグローバル変数


aはローカル変数

bもローカル変数なのでグローバル変数のbは書き換えられない

cはグローバル変数なのでcの値はローカル変数bの値が代入される

　　【参照】関数


　アラートを表示させるだけのプログラムではつまらないので、コンピューターから二つの値を問われて入力し、その和を表示するプログラムを見てみましょう。ここでは、BASICで言えばINPUTにあたるような命令を使っています。

<html>
<head>
<title>変数２</title>

<script language="JavaScript"><!--

   a=prompt("Aの値を入力してください","");  // input a
   b=prompt("Bの値を入力してください","");  // input b
 




   a=parseInt(a);  // 　　　promptの入力は文字列なので
   b=parseInt(b);  //　　　数値に変換します




   c=a+b;
   window.alert("答えは"+c+"です"); //　答えの表示

// --></script>

</head>
<body>
</body>
</html>

〜sample2_2.html〜のリスト
■補足
　　　window.prompt("説明","初期値")
　　　　文字列入力ダイアログを表示します
　　　　入力された文字列は関数の戻り値として返される
　　　　キャンセルボタンが押されると特殊値nullを返す
　　　　windowと"初期値は"省略可

　　　parseInt("文字列")
　　　　文字列を整数値に変換します
　　　parseFloat("文字列")
　　　　文字列を小数化します
　　　　いずれも失敗した場合は特殊値NaNを返す
答えの計算
答えの表示



行末は「；」でくぎります。
「//」はJavaScriptでのコメント文を意味します。

　　　■sample2_2.htmlを実行する
　

sample2_1.htmlの実行画面
..


　では、次にJavaScriptで配列を使ってみましょう。配列は「Array」オブジェクトを使って宣言します。配列を作るには色々な方法があるのでサンプルプログラムで配列の中身がどんな値になっているか表示させてみましょう。
★配列

　　　　　配列名=new Array()　　　　　　　　　　　・・・配列の宣言

　　　　　配列名=new Array(e1,e2,e3,・・・,en)　・・・直接代入する場合

　　　　　配列名=[e1,e2,e3,・・・,en]　　　　　　　・・・new Array()を省略して直接代入する場合

　　　　　配列名=new Array(n)　　　　　　　　　　・・・この場合はn個の配列を宣言する
　　　　　配列名["Str"]=e 　　　　　　　　　　　　・・・[ ]内に文字列を使用することもできます

　　　　　nは配列の要素数。e,e1,e2,e3,・・・enは配列の要素。同じ配列の要素に数値や
　　　　　文字列を混在させることも可能。　　　　　


<html>
<head>
<title>配列</title>

<script language="JavaScript"><!--

   a=new Array();   //　配列の作成方法その１
   a[0]=10;
   a[1]=20;
   a[2]=30;
   a[3]=40;

   b=new Array(50,60,70,80);   //　配列の作成方法その２

   c=new Array(4)   //　この場合は注意！


   d=[1,2,3,4];   //　配列の作成方法その３

   e=[5];

   f=[0,"file",1,"menu"];   //　数値と文字列は混在可能


   for(i=0;i<4;i++)   //　配列の中身を表示します
   {
      document.write("a["+i+"]="+a[i]+" b["+i+"]="+b[i]+
      " c["+i+"]="+c[i]+" d["+i+"]="+d[i]+" e["+i+"]="
      +e[i]+"<br>");
   }



   document.write("<br>");   //　改行

   for(i=0;i<4;i++)document.write("f["+i+"]="+f[i]+"<br>");

// --></script>

</head>

<body>
</body>
</html>

〜sample2_3.html〜のリスト






配列を作成するには、「new Array()」を使います。
「a」という名前の配列を作成します。
配列の個数は特に設定しなくても大丈夫です。



配列を作成すると同時に代入することもできます。

この場合は配列をc[0]〜c[3]まで作成する意味になります。
c[0]に「4」を代入する意味ではないので注意してください。

「new Array()」を省略することもできます。

この場合は、e[0]に「5」を代入します。

配列には数値と文字列を混在することができます。


ここで配列の中身を画面に表示します。
「for()」については後で説明します。
【参照】繰り返し処理、条件分岐
「document.write()」を用いて画面に配列の中身を表示します。
最後に改行のタグ<br>を入れています。
■補足
　　　document.write("文字列",数値,・・・)
　　　指定したドキュメントに文字列や数値を書き込みます
ここで一行改行しています。

ここでは、「f」の配列の中身を表示しています。



行末は「；」でくぎります。
「//」はJavaScriptでのコメント文を意味します。

　　　■sample2_3.htmlを実行する

a[0]=10 b[0]=50 c[0]=undefined d[0]=1 e[0]=5
a[1]=20 b[1]=60 c[1]=undefined d[1]=2 e[1]=undefined
a[2]=30 b[2]=70 c[2]=undefined d[2]=3 e[2]=undefined
a[3]=40 b[3]=80 c[3]=undefined d[3]=4 e[3]=undefined

f[0]=0
f[1]=file
f[2]=1
f[3]=menu
sample2_3.htmlを実行するとこんな画面になります。
配列「c」に関しては配列の個数しか宣言していないのでundefined(未定義）になっています。
配列「e」に関してはe[0]のみ代入しているのでe[1]以降はundefined（未定義）の状態になっています。

配列「f」は数値と文字列が混在していますが、このように表示されます。
sample2_3.htmlの実行画面
■注意

　JavaScriptでは、変数名・関数名・オブジェクト名を付ける場合には、先頭が英文字で始まり二文字目以降はアンダーバー「_ 」を含む英数字の組み合わせにしなければなりません。また、英字の大文字小文字も区別されるので注意してください。

　　　　　（良い例）
　　　　　　　　myText　my_Image　a1 a2 rad　
　　　　　（悪い例）
　　　　　　　　@Text　_Image　1a　2a　$rad
　　　　　（違うものと見なされる例）
　　　　　　　　myText　Mytext　MyText


..
■JavaScript入門−基本編−変数と配列、演算子について　　　　　■戻る　　　　　■次へ　　　　　■Home

..