Download presentation
Presentation is loading. Please wait.
1
JavaScript 成瀬 基樹 平野 敦 北浦 繁
2
JavaScript JavaScriptは現在の ウェブアプリケーションに必須の技術 Google，Twitter，Wikipedia
Ajax Javaと完全に別物 記法こそ似ているものの構造は全く別物 Webアプリケーションの処理をクライアントに行わせることができる
3
歴史 ネットスケープコミュニケーションズが開発 Netscape Navigator2.0で実装
当時('95)大注目だったJavaを作った(故)サン･マイクロシステムズと提携関係にあったため、その名をあやかってJavaScriptに変更された (元：LiveScript) Googleを筆頭に徐々に使い始められる それまでは嫌われ者 その後JavaScriptによる非同期通信が発達 Ajax
4
JavaScriptの例 function helloWorld(){ var str = "Hello World";
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" 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>
5
書き方 HTML文書内に書きこむ場合 <script type=”text/javascript”>
<!-- 処理 //--> </script> 外部ファイルに書き込む場合 <script type=”text/javascript” src=”hoge.js”> HTMLのコメントタグでくくる
6
文法-変数- 変数の宣言 ローカル変数 var 変数名 グローバル変数 変数名 関数外で宣言すると，varをつけてもグローバル変数になる
使用可能文字は 「a-zA-Z0-9$_」 ※一文字目は数字禁止 型の指定をしない
7
基本データ型 基本データ型 boolean true，false number 数字（整数、実数） string 文字列 特殊な値 null
値なし undefined 未定義 NaN 数字ではない Infinity 無限
8
文法 行末の「;」は省略可能であるが， 省略すべきではない キャメル記法を用いることが多い var heartCatch = true;
9
Cと同じ 構文 If文 演算子は基本的にCと同様 switch文 だが例外もあり For文 while文 割り算は小数を返す
do while文 コメント文 演算子は基本的にCと同様 だが例外もあり 割り算は小数を返す alert(2/3); 数値と文字列を足すと 文字列を返す var hoge= 1+"String"; alert(typeof hoge); 引数を表示する ダイアログをポップアップ Cと同じ データ型を文字列で返す
10
文法：例題 とりあえずはろわ 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
11
オブジェクト オブジェクトの作り方 var hoge = new Hoge(); 基本オブジェクトの種類 Number String
すべての型を オブジェクトタイプ として実装するゾ オブジェクトの作り方 var hoge = new Hoge(); 基本オブジェクトの種類 Number String Boolean あまり使わない・・・ Array Math Date Function Object RegExp よく使う！
12
オブジェクト-配列- 宣言 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]; 何でも入る
![オブジェクト-配列- 宣言 var 配列名 = new Array(); 配列名[0] = abc ; 配列名[1] = 72;](http://slidesplayer.net/slide/11516910/62/images/12/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88-%E9%85%8D%E5%88%97-+%E5%AE%A3%E8%A8%80+var+%E9%85%8D%E5%88%97%E5%90%8D+%3D+new+Array%28%29%3B+%E9%85%8D%E5%88%97%E5%90%8D%5B0%5D+%3D+abc+%3B+%E9%85%8D%E5%88%97%E5%90%8D%5B1%5D+%3D+72%3B.jpg "大きさの指定はしなくても良い. 宣言. var 配列名 = new Array(); 配列名[0] = abc ; 配列名[1] = 72; var 配列名 = new Array( abc , 72); var 配列名 = [ abc , 72]; アクセス. var hoge =配列名[0]; 何でも入る.")
13
ブラウザオブジェクト ブラウザオブジェクトモデル 下図 オブジェクトからブラウザ上の値を 取得,変更できる
14
ブラウザオブジェクト window 根っこの部分 ウィンドウが持っている値を保持 要するに全部 プロパティ メソッド
window.status //ステータスバーの値 window.closed //ウィンドウが閉じているか window.document //documentオブジェクト etc... メソッド window.open() //新たなウィンドウを作成する window.alert() //警告ダイアログ window.setTimeout() //指定時間後に関数を実行 window.は省略できる alert()
15
ブラウザオブジェクト document (window.)document ページの情報を保持 プロパティ メソッド
document.forms //Formオブジェクトの入った配列 document.bgColor //背景色 document.title //タイトル etc... メソッド document.open() //ひらいて document.write() //かいて document.close() //とじて 他にもいっぱい
16
文書内のオブジェクトを得る 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”);
17
ブラウザオブジェクト：例題 JavaScriptでHTML文書内にはろわを表示する
document.write(文字列);でbody内にかけるよ！
18
文法-関数- function 関数名(引数){ //処理 } var 関数名 = function(引数){
戻り値の型，引数の型を指定しない 値を返す場合はCと同じ return hoge; 呼び出し方もCと同じ 関数名(引数) 無名関数
19
イベント HTMLや，XHTMLの属性値として指定 ○○が行われた場合に関数実行するように指示
「onsubmit」の様に接頭辞onを付けて全て小文字 イベント名 説明 mouseover マウスがオブジェクトに合わさったとき focus オブジェクトがフォーカスを得たとき click オブジェクトをクリックしたとき contextmenu コンテキストメニューが表示されるとき load イメージやページの読み込み終了時 submit submitが実行されたとき その他
20
イベント：例題 ボタンを押すと警告ダイアログをポップアップする。 イベントで関数を呼び出そう。
21
必須課題 BMIを計算する これと同じようなものを作る
22
任意課題 任意課題1 入力された値がメールアドレスかどうかチェック 参照：RFC5322 任意課題2 自由
Similar presentations
