JavaScriptについて
Webブラウザなどの利用に適したスクリプト言語です。静的な表現しか出来なかったWebページに動きをつける役割を果たすもの。
Javascriptの開発環境
Cresent eveとか、Style Note、ただのテキストエディタでも構いません。
後はEclipseでもVisual StudioやApata Studioでも使えます。
開発を始める前に
Webブラウザのjavascriptが有効であるか確認をします。
(IEの場合)
インターネットオプション → セキュリティタブ→セキュリティレベルのレベルカスタマイズ → アクティブスクリプトを有効にする
(chromeの場合)
設定 →高度な設定(詳細設定) → コンテンツの設定 → javascriptを有効にする
初期設定では有効になってると思いますので大丈夫です。
記入の仕方
javaScriptは大きく分けて4つの場所に記入することが出来ます。
①HTMLファイルのヘッダー内
body部分より前に読み込まれます
こちらはjavascriptに対応していないブラウザ対策向け
<script type="text/javascript"> <!-- 記入 // --> </script>
通常はこっちで書いていく
<script> ここにJavaScriptのソースを記入 </script>
②HTMLファイルのbody内
ヘッダー内と同じ
③HTMLファイルのタグ内
<a href="jsソース">クリック</a><br> <form> <input type="button" value="Click!" onClick="jsソース"> </form>
④外部ファイル
元のHTMLファイルのヘッダー内にリンクを挿入して外部から読み込む
<head> <script type="text/javascript" src="JSファイル"></script> </head>
外部ファイルは.jsとしてファイルを保存する
基本プログラム
コメント
// これはコメントになる /* コメント コメント */
アラートで文字を表示
alert("文字");
例:
<script> alert("こんにちは"); </script>
画面を開いた時にアラートを表示させる
アラートで数字や計算結果を表示
alert(2+1);
計算結果が表示される。
アラートの改行の仕方
alert("こんち\nこんば");
\nで途中で改行されます。
文字を表示する
document.write(文字列など);
<script> document.write("こんちは"); </script>
ブラウザ上に表示される
ちなみにscriptはjavascirptがONの時だけ表示されることであり、
OFFの時はnonscriptでOFFの時でも表示される。
★文字以外も出力できる
document.write(10+20);
計算結果が表示される
変数の宣言
var test;
(中身を指定)
var test = 10;
var test = "こんち";
var 変数名 = 初期値
★変数の利用
<script> var test = 10; var test1 = 12; alert(test + test1); </script>
文字をつなげる
var konti = "こんにちは";
var konba = "こんばんは";
document.write(konti + konba);
- でつなげることが出来る。
また、文字と数字もつなげることが可能です。
関数
function 関数名( 引数 ) { 処理 }
関数名は小文字
<script> function konti(){ alert("おはよう"); alert("こんにちは"); alert("こんばんは"); } </script>
使用するときは
基本は konti() と関数名を書く
例:
ボタンクリックイベントに使う
HTMLファイル
<form> <input type="button" value="ボタン1" onclick="aisatu()"><br> <input type="button" value="ボタン2" onclick="aisatu()"> </form>
引数
()内に数値などを記入して値を渡す。
returnは値を呼び出し元に戻す処理をしています。
<script> function test(a){ return a*a; } </script> <script> document.write("2の2乗は" + test(2) + "です。"); </script>
出力:
2の2乗は4です
条件式
if文
if (条件式) { 処理 }
<script> var n = 5; if(n > 3){ alert("3より大きいです"); } </script>
nが3より大きいかを比べる。
一行だけの式はこう書く
if(n>3) alert("3より大きいです");
if else文
if (条件式) { 処理1 } else { 処理2 }
<script> var n = 5; if (n < 3) { alert("3より小さいです!"); } else { alert("3以上です!"); } </script>
複数のif文
複数のifを重ねて書くことも出来ます。
<script> var n = 3; if (n == 2) { alert("nは2です"); } else { if (n == 5) { alert("nは5です"); }else { alert("nは2と5ではありません"); } } </script>
switch文
ifは2通りにしか分岐できませんでしたが、switch文では何通りにも分岐できる。
switch ( 条件式 ) {
case 値1 : 処理1; break;
case 値2 : 処理2; break;
…
default : 処理3; break;
}
条件式の結果がcase:の後に記入された値に合致すれば、それ以降の処理をする。
またbreak;を入れてswitch分を抜け出す。
defaultはどのcaseにも合致されなかった場合に処理される。
例:
<script> //曜日取得 var today = new Date(); var week = today.getDay(); //条件分岐 switch (week) { case 0: document.write("今日は日曜日です!"); break; case 1: document.write("今日は月曜日です!"); break; case 2: document.write("今日は火曜日です!"); break; case 3: document.write("今日は水曜日です!"); break; case 4: document.write("今日は木曜日です!"); break; case 5: document.write("今日は金曜日です!"); break; default : document.write("今日は土曜日です!"); break; } </script>
for文
for ( var i = 初期値; 繰り返し条件; i++ ){ 処理 }
条件を満たしている間、処理を繰り返す
例:
<script> for (var i=1 ; i<=10 ; i++){ document.write("繰り返し文です。<br>"); } </script>
continueとbreak
break
繰り返し文から抜け出します。
continue
以下の処理をスルーして、繰り返し文の先頭に戻ります。
例:
<script> for(var i=1 ; i<=10 ; i++){ if(i==3) continue; if(i==7) break; document.write(i+"回目の繰り返しです!<br>"); } </script>
while文
while ( 繰り返しの条件 ) { 処理 }
条件を満たしている間、中括弧内の処理を繰り返します
例:
<scirpt> var num=10; while ( num <100){ num++; } document.write(num); </script>
numが100になるまで繰り返す
配列を使う
★配列を宣言
var 配列名 = new Array()
★配列の値の指定方法
var test new Array("1月","2月","3月");
var test new Array(
"1月",
"2月",
"3月"
);
var test = new Array();
test[0] = "1月";
test[1] = "2月";
test[2] = "3月";