JavaScript 成瀬　基樹平野敦北浦繁

JavaScript 成瀬　基樹平野敦北浦繁

JavaScript • JavaScriptは現在のウェブアプリケーションに必須の技術 • Google，Twitter，Wikipedia • Ajax • Javaと完全に別物 • 記法こそ似ているものの構造は全く別物 • Webアプリケーションの処理をクライアントに行わせることができる

歴史 • ネットスケープコミュニケーションズが開発 • Netscape Navigator2.0で実装 • 当時('95)大注目だったJavaを作った(故)サン･マイクロシステムズと提携関係にあったため、その名をあやかってJavaScriptに変更された • (元：LiveScript) • Googleを筆頭に徐々に使い始められる • それまでは嫌われ者 • その後JavaScriptによる非同期通信が発達 • Ajax

JavaScriptの例 <?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”> </script> HTMLのコメントタグでくくる

文法-変数- 使用可能文字は「a-zA-Z0-9$_」 ※一文字目は数字禁止型の指定をしない • 変数の宣言 • ローカル変数 • var変数名 • グローバル変数 • 変数名 • 関数外で宣言すると，varをつけてもグローバル変数になる

基本データ型 特殊な値 null 値なし undefined 未定義 NaN 数字ではない Infinity 無限 • 基本データ型 • boolean • true，false • number • 数字（整数、実数） • string • 文字列

文法 • 行末の「;」は省略可能であるが， • 省略すべきではない • キャメル記法を用いることが多い • var heartCatch = true;

構文 • If文 • switch文 • For文 • while文 • do while文 • コメント文 • 演算子は基本的にCと同様だが例外もあり • 割り算は小数を返す • alert(2/3); • 数値と文字列を足すと文字列を返す var hoge= 1+"String"; alert(typeof hoge); 引数を表示するダイアログをポップアップ Cと同じデータ型を文字列で返す

文法：例題 • とりあえずはろわ • alert()を使ってhelloworldを表示させよう <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 Boolean あまり使わない・・・ Array Math Date Function Object RegExp よく使う！

オブジェクト-配列- 大きさの指定はしなくても良い • 宣言 • var 配列名 = newArray(); 配列名[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() //指定時間後に関数を実行 • etc... • window.は省略できる alert()

ブラウザオブジェクト • document • (window.)document • ページの情報を保持 • プロパティ • document.forms //Formオブジェクトの入った配列 • document.bgColor //背景色 • document.title //タイトル • etc... • メソッド • document.open() //ひらいて • document.write() //かいて • document.close() //とじて • etc... • 他にもいっぱい

文書内のオブジェクトを得る • JavaScriptからテキストフィールドにアクセス • 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を付けて全て小文字

イベント：例題 • ボタンを押すと警告ダイアログをポップアップする。イベントで関数を呼び出そう。

必須課題 • BMIを計算する • これと同じようなものを作る

任意課題 • 任意課題1 • 入力された値がメールアドレスかどうかチェック • 参照：RFC5322 • 任意課題2 • 自由

JavaScript 成瀬　基樹平野敦北浦繁