JavaScrip基礎：変数配列

４．変数・配列

４－１．書き方

ＪａｖａSｃriｐt	記事
<HTML><HEAD> <TITLE>書き方</TITLE></HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- var str1= 1234; str2= new String(1234); str3=str1 + str2; alert(str3); var str4= 1234; str5= new Number(1234); str6=str4 + str5; alert(str6); //--> </SCRIPT> </BODY> </HTML>	変数の指定はvarで行うが、省略でもOK ・文字変数を明示したい場合は、String()を使用・数字変数を明示したい場合は、Number()を使用結果：str3→12341234、文字として結合結果：str6→2468、数字として計算 4-1実行

４－２．変数の有効範囲

ＪａｖａSｃriｐt

記事

<HTML><HEAD>
<TITLE>変数の有効範囲</TITLE></HEAD>
<BODY>
<SCRIPT Language="JavaScript">

</SCRIPT>
</BODY>
</HTML>

・変数名は英文字かアンダーバー(_)で始まること
・変数型は１つで、文字・数字を扱う
・関数内でｖａｒ宣言したローカル変数は関数内で有効
・何処に書いてもグローバル変数
・変数は現在のWebページ内のみで有効【重要】
　　新Windowを開いた場合、そのWindowでは他の
　　ページの変数は使用出来ません。変数やデータ
　　等を使用したい場合、データ受渡しの工夫が必要

4-2実行

４－３．配列へ代入

ＪａｖａSｃriｐt	記事
<HTML><HEAD> <TITLE>配列へ代入</TITLE></HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- week=new Array(7) week[1]="日";week[2]="月";week[3]="火";week[4]="水"; week[5]="木";week[7]="金";week[7]="土"; hia=prompt("yyyy/mm/ddで日付を入れて下さい"); alert(hia+"は"+week[(new Date(hia)).getDay()]+"曜日です"); //--> </SCRIPT> </BODY> </HTML>	・Array(7)と７を指定してあるが自動的にサイズを調整するので特に指定しなくてもよい。・Date(hia)は、ｄate(hia)ではエラーになる（通常メソッド記入は小文字でよいが大文字必要ケｰスもあり） 4-3実行
※ 配列データの記入方法は下記でもよい week=new Array ("日","月","火","水","木","金","土");

４－４．配列の連結

ＪａｖａSｃriｐt	記事
<HTML><HEAD> <TITLE>配列の連結</TITLE></HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- ar1=new Array ("日","月","火","水","木","金","土"); ar2=new Array ("a","b","c","d","e","f","g"); ar3= ar1.concat(ar2); alert(ar3); //--> </SCRIPT> </BODY> </HTML>	配列要素を結合する。本例では、配列ar1と配列ar2を結合したデータを配列ar3に入れます。（結果は下図を参照して下さい） 4-4実行

４－５．配列の要素を指定した文字で連結

ＪａｖａSｃriｐt	記事
<HTML><HEAD> <TITLE>文字で連結</TITLE></HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- ar1=new Array ("日","月","火","水","木","金","土"); ar3 = ar1.join("\|") alert(ar3); //--> </SCRIPT> </BODY> </HTML>	左例の場合、配列内の個々の要素を"\|"で結合し変数（文字列）に入れます。（結果は下図を参照して下さい） 4-5実行

４－６．要素数を求める

ＪａｖａSｃriｐt	記事
<HTML><HEAD> <TITLE>要素数</TITLE></HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- ar1=new Array ("日","月","火","水","木","金","土"); alert("この配列の要素は「"+ ar1.length +"」です"); //--> </SCRIPT> </BODY> </HTML>	lengthは配列要素数を取得または設定できます本例では、要素数を取得しており、日～土の７個あり結果は７となります（配列をFORやIF文で処理するをす場合最終数として使用します） 4-6実行

４－７．配列内の要素を取り出す

ＪａｖａSｃriｐt	記事
<HTML><HEAD> <TITLE>要素を取り出す</TITLE></HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- ar1=new Array ("日","月","火","水","木","金","土"); ar3 = ar1.slice(1,4) alert(ar3); //--> </SCRIPT> </BODY> </HTML>	本例では、配列要素１から（０の次）先頭から４個目まで取り出し変数ar3へ格納しています。データベース関連で、要素を取り出して使用する場合等かなり便利です。 4-7実行

４－８．配列要素を反転

ＪａｖａSｃriｐt	記事
<HTML><HEAD> <TITLE>配列要素を反転</TITLE></HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- ar1=new Array ("日","月","火","水","木","金","土"); ar3 = ar1.reverse(); alert(ar3); //--> </SCRIPT> </BODY> </HTML>	reverseは配列要素の順序を逆にします。本例では（日月火水木金土）→(土金木水火月日) に配列内容が入れ替わります。 4-8実行

４－９．配列内容を文字コード順に並び変え

ＪａｖａSｃriｐt	記事
<HTML><HEAD> <TITLE>コード順</TITLE></HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- ar1=new Array (4,7,2,9,1,6,3,5,8); ar3 = ar1.sort(); alert(ar3); //--> </SCRIPT> </BODY> </HTML>	sort()で要素を並び替える場合使用 sort()なし→文字コード順本例の場合、文字コード順で数字の若番順となる 4-9実行

４－９a．配列内容の数字を昇順に並び変え

ＪａｖａSｃriｐt	記事
<HTML><HEAD> <TITLE>若番順</TITLE> <SCRIPT Language="JavaScript"> <!-- function hikaku(a,b){ return a-b } </HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- ar1=new Array (4,7,2,9,1,6,20,3,5,10,8); ar3 = ar1.sort(); alert(ar3); //--> </SCRIPT> </BODY> </HTML>	前項の例題は文字コード順での並び換えであり、本例のように10・20があった場合、1,10,2,20のようになり数字の小さい順とはなりません。並び変えに関数を指定すれば、戻り値が正なら昇順（a-bが正ならbが前）、戻り値が負なら降順(a-bが負ならaが前）となる。 4-9実行

４－10．配列の区切り指定

ＪａｖａSｃriｐt	記事
<HTML><HEAD> <TITLE>区切り指定</TITLE></HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- ar1="日\|月\|火\|水\|木\|金\|土".split("\|"); alert(ar1); //--> </SCRIPT> </BODY> </HTML>	左例の場合、文字列「””」の内容を"\|"があったら区切りとし、配列ra1へ入れる。 4-10実行

４－11．配列要素の置換え

ＪａｖａSｃriｐt	記事
<HTML><HEAD> <TITLE>配列要素の置換え</TITLE></HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- ar1='日,月,火,水'; ar2=ar1.split(','); alert(ar1+'の2番の要素をaaに変えます'); ar2[2]="aa"; ar1=ar2[0]+','+ar2[1]+','+ar2[2]+','+ar2[3]; alert(ar1) //--> </SCRIPT> </BODY> </HTML>	左例は、文字変数sr1を「,」を区切りにして配列ra2へ代入し、その配列要素2番目の要素を別文字に置き換えた例（ar[2]の火が文字aaに置き換わる） 4-11実行

４－12．文字列の内容置換え

ＪａｖａSｃriｐt	記事
<HTML><HEAD> <TITLE>文字列の内容置換え</TITLE></HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- function Mydat(a,b,c,d) { this.a = a this.b = b this.c = c this.d = d } dat1=new Mydat("日","月","火","水"); alert(dat1.a + dat1.b + dat1.c + dat1.d) dat1.c="aa" alert(dat1.a + dat1.b + dat1.c + dat1.d) //--> </SCRIPT> </BODY> </HTML>	前項は配列要素の置き換えであるが、本項は変数dat1に新生成のデータオブジェクトを代入しその２番目のデータを置き換えた例 4-12実行

４－1３．関数1(数字を変数に入れる）

ＪａｖａSｃriｐt	記事
<HTML><HEAD><TITLE>関数1</TITLE> <SCRIPT Language="JavaScript"> <!-- function chk(ddd){ return ddd*2; } //--></SCRIPT> </HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- var suu=1234; document.write(suu,"を２倍すると", chk(suu),"になります"); //--> </SCRIPT> </BODY> </HTML>	左例は、受け取った引数を変数dddに入れに2倍しています return　戻り値で再度計算結果を引数へ戻す 4-13実行

４－1４．関数2(文字を変数に入れる）

ＪａｖａSｃriｐt	記事
<HTML><HEAD><TITLE>関数1</TITLE> <SCRIPT Language="JavaScript"> <!-- function imgck(imgName,imgNum){ document.images[imgName].src = "../gif/"+imgNum+".gif"; } //--></SCRIPT> </HEAD> <BODY> <A HREF="../../tai/tindex.html" OnMouseOver="imgck('nam1','link3a'); OnMouseOut=imgck('nam1','link3');"> <IMG SRC="../gif/link3.gif" NAME="nam1" BORDER=0></A> </BODY> </HTML>	左例は、受け取った引数を2個の変数imgName,imgNum に入れ、イメージの名前とgifの名前にした例（そのままの名前にしてありますが番号で多数の表示が可） 4-14実行

４－1５．関数3(オブジェクトを変数に入れる）

ＪａｖａSｃriｐt

記事

<HTML><HEAD><TITLE>関数3</TITLE>
<SCRIPT Language="JavaScript">
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Myfn">
<INPUT TYPE="text" NAME="txt" SIZE=50 MAXLENGTH=20>
←文字を入力して下さい<br><br>
<INPUT TYPE="button" VALUE="実行"
onClick="chk(this.form)">
<INPUT TYPE="button" VALUE="削除" onClick="chk1()">
</BODY>
</HTML>

左例は、this.formでフォームオブジェクトを参照先に指定
したがって、変数"f"はそのフォームオブジェクトを受け取る

4-15実行

【HOME】　【基礎編へ戻る】