JavaScript 成瀬 基樹 平野 敦 北浦 繁
JavaScript JavaScriptは現在の ウェブアプリケーションに必須の技術 Google，Twitter，Wikipedia Ajax Javaと完全に別物 記法こそ似ているものの構造は全く別物 Webアプリケーションの処理をクライアントに行わせることができる
歴史 ネットスケープコミュニケーションズが開発 Netscape Navigator2.0で実装 当時('95)大注目だったJavaを作った(故)サン･マイクロシステムズと提携関係にあったため、その名をあやかってJavaScriptに変更された (元：LiveScript) Googleを筆頭に徐々に使い始められる それまでは嫌われ者 その後JavaScriptによる非同期通信が発達 Ajax
JavaScriptの例 function helloWorld(){ var str = "Hello World"; <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>JavaScript Example</title> <script type="text/javascript"> //<![CDATA[ function helloWorld(){ var str = "Hello World"; document.body.textContent = str; } //]]> </script> </head> <body onload="helloWorld();"> <p>JavaScriptの世界へようこそ</p> </body> </html>
書き方 HTML文書内に書きこむ場合 <script type=”text/javascript”> <!-- 処理 //--> </script> 外部ファイルに書き込む場合 <script type=”text/javascript” src=”hoge.js”> HTMLのコメントタグでくくる
文法-変数- 変数の宣言 ローカル変数 var 変数名 グローバル変数 変数名 関数外で宣言すると，varをつけてもグローバル変数になる 使用可能文字は 「a-zA-Z0-9$_」 ※一文字目は数字禁止 型の指定をしない
基本データ型 基本データ型 boolean true，false number 数字（整数、実数） string 文字列 特殊な値 null 値なし undefined 未定義 NaN 数字ではない Infinity 無限
文法 行末の「;」は省略可能であるが， 省略すべきではない キャメル記法を用いることが多い var heartCatch = true;
Cと同じ 構文 If文 演算子は基本的にCと同様 switch文 だが例外もあり For文 while文 割り算は小数を返す do while文 コメント文 演算子は基本的にCと同様 だが例外もあり 割り算は小数を返す alert(2/3); 数値と文字列を足すと 文字列を返す var hoge= 1+"String"; alert(typeof hoge); 引数を表示する ダイアログをポップアップ Cと同じ データ型を文字列で返す
文法：例題 とりあえずはろわ alert()を使ってhelloworldを表示させよう True or False <html> <head> <title>はろわ</title> </head> <body> (ここに処理を書く) </body> </html> True or False if文で以下の値の評価がtrue,falseどっちになるか調べてみよう 0, 1, "", [], null, undefined, NaN, Infinity
オブジェクト オブジェクトの作り方 var hoge = new Hoge(); 基本オブジェクトの種類 Number String すべての型を オブジェクトタイプ として実装するゾ オブジェクトの作り方 var hoge = new Hoge(); 基本オブジェクトの種類 Number String Boolean あまり使わない・・・ Array Math Date Function Object RegExp よく使う！
オブジェクト-配列- 宣言 var 配列名 = new Array(); 配列名[0] = "abc"; 配列名[1] = 72; 大きさの指定はしなくても良い 宣言 var 配列名 = new Array(); 配列名[0] = "abc"; 配列名[1] = 72; var 配列名 = new Array("abc", 72); var 配列名 = [“abc”, 72]; アクセス var hoge =配列名[0]; 何でも入る
ブラウザオブジェクト ブラウザオブジェクトモデル 下図 オブジェクトからブラウザ上の値を 取得,変更できる
ブラウザオブジェクト window 根っこの部分 ウィンドウが持っている値を保持 要するに全部 プロパティ メソッド window.status //ステータスバーの値 window.closed //ウィンドウが閉じているか window.document //documentオブジェクト etc... メソッド window.open() //新たなウィンドウを作成する window.alert() //警告ダイアログ window.setTimeout() //指定時間後に関数を実行 window.は省略できる alert()
ブラウザオブジェクト document (window.)document ページの情報を保持 プロパティ メソッド document.forms //Formオブジェクトの入った配列 document.bgColor //背景色 document.title //タイトル etc... メソッド document.open() //ひらいて document.write() //かいて document.close() //とじて 他にもいっぱい
文書内のオブジェクトを得る JavaScriptからテキストフィールドにアクセス HTML fooとbarは 「<input type="text" name="text1" value="hoge" />」 というオブジェクトになる HTML <form name=”form1” > <input type="text" name="text1" id=”formText1”/> </form> JavaScript var foo = document.form1.text1; var bar = document.getElementById(“formText1”);
ブラウザオブジェクト：例題 JavaScriptでHTML文書内にはろわを表示する document.write(文字列);でbody内にかけるよ！
文法-関数- function 関数名(引数){ //処理 } var 関数名 = function(引数){ 戻り値の型，引数の型を指定しない 値を返す場合はCと同じ return hoge; 呼び出し方もCと同じ 関数名(引数) 無名関数
イベント HTMLや，XHTMLの属性値として指定 ○○が行われた場合に関数実行するように指示 「onsubmit」の様に接頭辞onを付けて全て小文字 イベント名 説明 mouseover マウスがオブジェクトに合わさったとき focus オブジェクトがフォーカスを得たとき click オブジェクトをクリックしたとき contextmenu コンテキストメニューが表示されるとき load イメージやページの読み込み終了時 submit submitが実行されたとき その他
イベント：例題 ボタンを押すと警告ダイアログをポップアップする。 イベントで関数を呼び出そう。
必須課題 BMIを計算する これと同じようなものを作る
任意課題 任意課題1 入力された値がメールアドレスかどうかチェック 参照：RFC5322 任意課題2 自由