JavaScript 演習 1 1
JavaScript( 言語 ) とは 情報システムのプログラミング ソースコード記述, 外部ファイル保存, コンパイル, テスト, デバッグ... 大変な作業 もっと手軽なプログラミング 特別な言語処理系は不要! Web ブラウザだけで実行可能 ( 実際は,HTML ファイル内 or 外部ファイルとして記述保存 ) 2
Web ブラウザは Web ページ閲覧に使うはず なんでプログラムが動くの? 通常は,Web ページ閲覧のために,Web ブラウザ (IE) を開く. 今回は ( 特別に ), プログラミングするために IE を開く. でも IE は Web ページを閲覧 ( 提示 ) するんだから, 一体,IE のどこにプログラムを入力するんだ? 入力箇所はあります. それは URL 欄 でもそこはネットのアドレスを入力する欄でしょう. プログラムなんか入力したらエラーになるよ. 通常は http://~ によりアドレスを指定します http://javascript プログラム文とすれば確かにエラーになります 確認しましょう 3
失敗 http://alert(hello) vs. 成功 http://yahoo http://alert(hello) を URL 欄に入力して実行 サーバが見つかりませんでした www.alert(hello).com という 名前のサーバが見つかりませんでした http: HTTP プロトコル // ホスト記述の開始を表す ( ルート ) alert(hello) を www.alert(hello).com に解釈して www :Web サーバ名 alert(hello).com ドメイン名ネット上にそのサーバが存在しなかった ちなみに http://yahoo なら成功する 4
URL の復習 URL( ネット上の情報資源を一意に決定する方法 ) であり, 他のサーバが持つ情報資源を利用する時,http プロトコルを宣言する < スキーム名 >:< スキームにおける固有表現 > http: ハイパーテキスト転送プロトコル用スキーム ftp: ファイル転送プロトコル用スキーム mailto: 電子メールアドレス用スキーム file: ホストのファイルシステム用スキーム... ( 非公式 )javascript: JavaScriptプログラム用スキーム 5
Web ブラウザーでプログラミング! アラートウィンドウ出現 1 行プログラミング アドレス欄を削除し,javascript:alert( hello ); と入力して改行 ( 実行 ) copy&paste すると変なコードが挿入されて動かないかも!? 小さな ( アラート = 警告 ) ウィンドウが出現しましたか? 出現したら,ok ボタンをクリックして小ウィンドウを閉じましょう インタラクション 3 行プログラミング javascript: ans=prompt("1+12"); document.write(ans);document.write(" は正解です ") 6
90 年代 : JavaScript は不遇 Java 言語とは全く異なる, 簡易型プログラミング ( スクリプト = 台本 ) 言語 コンパイラではなくインタープリタ オブジェクト指向型スクリプト言語 C 言語に似た手続き型言語のようなスタイルで書かれる NetScape 社でサーバ負荷軽減のために開発 90 年代後半は, セキュリティの脆弱性, ブラウザによって挙動が異なるなど, 問題の多かった言語 7
2005-: JavaScript は脚光 2000 年頃から Amazon や Google といった企業が採用 2005 年 Google Map の登場により状況が一変 ユーザ満足度 ( ユーザエクスペリエンス ) を重視したリッチクライアントに対応した Web サイトが続々登場 サーバからクライアントへの転送データ量の減少直感的な操作が可能 Gmail, Google サジェスト, Amazon Web Service, ドラッグアンドドロップ, タブページ, Widget などなど 入力値チェックなどにも利用 8
従来の Web アプリケーションモデル ユーザーインターフェース Http リクエスト ブラウザー HTTP(s) 通信 Web サーバー HTML+CSS データ データベース バックエンド処理 レガシーシステム サーバーサイドシステム ブラウザーによって Ajax エンジン自体や 呼び出し方法が異なる Ajax (Asynchronous JavaScript and XML) Web アプリケーションモデル ブラウザー ユーザーインターフェース JavaScript コール XMLHttp リクエスト非同期制御 Ajax エンジン 非同期実現 HTTP(s) 通信 HTML +CSS データ Web または XML サーバー データベース バックエンド処理 レガシーシステム サーバーサイドシステム 二重構造 XML データ
クライアント 従来の Web アプリ ( 同期 ユーザが待たされる ) ユーザー側の活動 データ送信 ユーザー側の活動 データ送信 データ送信 待ち時間がある データ送信 時間軸 ユーザー側の活動 データ送信 サーバー システム処理 システム処理 Ajax Web アプリ ( 非同期 ユーザが快適 ) クライアント ユーザー側の活動 待ち時間がない 入力表示入力表示入力表示入力表示 サーバー クライアント側処理 データ送信 データ送信 データ送信 データ送信 Ajaxエンジンが通信を担当する サーバーサイドの処理 サーバーサイドの処理 サーバーサイドの処理 サーバーサイドの処理
JavaScript 演習 (2 回 ) 目的 HTML CSS のおさらいと 流行り (?) の Web2.0 技術 JavaScript プログラミング DHTML 作成を通じて 見て動くプログラムの楽しさ COM 実験への基礎知識 11
HTML のおさらい 12
HTML の構造 <!DOCTYPE> ドキュメントタイプの宣言 <HTML>~</HTML> HTML 文書だということの宣言 <HEAD>~</HEAD> 文書のヘッダ情報 <META /> その文書に関するメタ情報 <TITLE>~</TITLE> 文書のタイトル <BODY></BODY> 文書本体 <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd" > <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> テストページ </title> </head> <body> </body> </html>
HTML タグの一例 <h1>~<h6> <p> 見出しをつける 一つの段落を表す <br> 改行 <ul>,<ol> <li> <a> 順序の無し, ありのリスト リストの項目 リンクの開始 <img> 画像の表示 <html> <head> <title> テストページ </title> </head> <body> <h1> 見出し 1</h1> <h2> 見出し 2</h2> <p>helloworld!</p> Hello<br>World! <ol type="a"> <li> リスト 1</li> <li> リスト 2</li> <li> リスト 3</li> </ol> <p><a href="./htmlex2.html"> サンプルその 2</a></p> <p><img src="./ex.jpg"></p> </body> </html>
JavaScript 15
内容 JavaScriptの書き方 alert 関数 変数 データ型 演算子 関数 document.write 関数 prompt 関数 演習問題 1 条件分岐 繰り返し parseint 関数とparseFloat 関数 演習問題 2 document.getelementbyid 関数 演習問題 3 レポート 16
JavaScript の書き方 HTML ファイル内に書く方法 <head> タグ内に以下のように記述 ex1.html <script type="text/javascript"> <!-- ここにスクリプトを書く //--> </script> 別のテキストファイルに書く方法 ex2.html, ex1.js <script type="text/javascript" src=" ファイル名.js"></script> 17
alert 関数 ポップアップウィンドウに指定したメッセージを表示する関数 デバッグに利用可能 Java の System.out.println メソッドに相当 Ruby の puts メソッドに相当 関数 再利用可能な JavaScript コードのかたまりに名前をつけたもの alert + ( + 表示するテキスト + ) + ; alert( Hello, World! ); 18
変数 データ型 変数宣言は var を用いる 変数の長さは 1 文字以上 変数の最初の文字に使えるのは, 英字, アンダースコア (_), ドル記号 ($) $total,_firstname,top100 空白文字と (_ と $ 以外の ) 特殊文字は使えない 5to10,first name,#total,world! 19
変数 データ型 基本データ型は数値 文字列 論理値の 3 種類 ex3.html 数値 var num = 1; alert(num); num = 3.14 alert(num); 文字列 論理値 var message = Hello, World! ; alert(message); var bool = true; alert(bool); bool = false; alert(bool); 20
演算子 ( よく使われるもの ) ex4.html,ex5.html,ex6.html 算術演算子 +( 加算 ),-( 減算 ),*( 乗算 ),/( 除算 ),%( 余剰 ) ++( インクリメント ),--( デクリメント ) 論理演算子 &&( 論理積 ), ( 論理和 ),!( 否定 ) 比較演算子 <( 小なり ),<=( 以下 ),>( 大なり ),>=( 以上 ) ==( 等しい ),!=( 等しくない ) 代入演算子 =( 代入 ),+=( 加算 ),-=( 減算 ),*=( 乗算 ) p q p && q true true true true false false false true false false false false p q p q true true true true false true false true true false false false p!p true false false true /=( 除算 ),%=( 余剰 ) 21
関数 再利用可能な JavaScript コードのかたまりに名前をつけたもの ex7.html 定義方法 function 関数名 ( 引数 ) { 定義内容 return 戻り値 ; } 呼び出し方法 関数名 ( 引数 ); var num = 関数名 ( 引数 ); 22
document.write 関数 document.write( 引数 )- 引数を HTML として表示させる ex8.html var str = "Hello, World"; document.write("<p>" + str + "</p>"); document.write("<p style='color: red;'>" + str + "</p>"); 23
CSS の書式 セレクタ { プロパティ : 値 ; プロパティ : 値 } セレクタ : スタイル適用対象の選択プロパティ : font-size や line-height のようなレンダリング特性値 : プロパティに指定可能な値が定義 とほほのスタイルシート入門 http://www.tohoho-web.com/css/
prompt 関数 prompt( 引数 )- 引数をメッセージとして表示し, ユーザからの入力情報 ( 文字列 ) を取得する関数 ex9.html var value = prompt(" 値を入力してください."); alert(value); document.write('<h1>prompt 関数 </h1>'); document.write('<h1>' +value + '</h1>'); 25
演習問題 1 prompt 関数と document.write 関数を用いて, ユーザから入力されたテキスト, 文字の色, 文字のサイズ (%) に応じて, 表示内容を変化させる JavaScript プログラムを書きなさい 26
条件分岐 ex10.html, ex11.html if 文 switch 文 マッチする選択肢がなかったときに実行 if ( 条件 1) { 文 1; } else if ( 条件 2) { 文 2; } else { 文 N; } switch ( テストデータ ) { case マッチデータ 1: 文 1; break; case マッチデータ 2: 文 2; break; default: 文 3; break; } 条件の部分には, 論理値 (true or false) が入る break 文を使って他の選択肢が実行されないようにする 27
繰り返し ex12.html for 文 for ( 初期化 ; テスト ; 更新 ) { アクション ; } while 文 初期化 ; while ( テスト ) { アクション ; 更新 ; } 28
parseint 関数と parsefloat 関数 parseint( 引数 ) 引数で文字列を渡すと数値に変換 parsefloat( 引数 ) 引数で文字列を渡すと浮動小数点に変換 ex13.html 29
演習問題 2 Hello! という文字列をユーザが入力した数だけ表示する JavaScript プログラムを作成しなさい 行数を 5 で割った余りが 1 の場合には赤色,2 の場合には緑色,3 の場合には黄色,4 の場合には黒,0 の場合には青色, さらに,3 の倍数の場合には 200% の大きさで Hello! を表示しなさい 30
document.getelementbyid 関数 document.getelementbyid( 引数 ) 引数で指定した要素オブジェクトを得る document.getelementbyid( 引数 ).innerhtml 引数で指定した要素オブジェクトの HTML を得る document.getelementbyid( 引数 ).style.css プロパティ 引数で指定した要素オブジェクトの CSS プロパティを得る CSS プロパティ名は, 基本的には ハイフン (-) を除去し, ハイフンの後の文字を大文字に変換したものを用いる 参考 : http://codepunk.hardwar.org.uk/css2js.htm 31
オブジェクトのイメージ <body> <h1 <h1 id="id1 id="id1">hello</h1> style= color: red >Hello, World</h1> </body> H1 要素のオブジェクト document.getelementbyid( id ) 属性 : 色 (style.color): black HTML テキスト (innerhtml): Hello document.getelementbyid( id ).style.color = red ; document.getelementbyid( id ).innerhtml = Hello, World ;
document.getelementbyid 関数 ex14.html function test() { var h1value = document.getelementbyid("id1").innerhtml; alert(h1value); document.getelementbyid("id1").innerhtml = prompt(''); var item1 = document.getelementbyid("item1").innerhtml; alert(item1); var item2 = document.getelementbyid("item2").innerhtml; alert(item2); var item1 = document.getelementbyid("item3").innerhtml; alert(item3); JavaScript } document.getelementbyid("divid").innerhtml = " テスト "; document.getelementbyid("divid").style.color = "red"; document.getelementbyid("divid").style.fontsize = "200%"; document.getelementbyid("divid").style.backgroundcolor = "black"; HTML onload= 関数名 <body onload='test()'> ドキュメントが完全に読み込まれた後に指定した関数を呼び出す </body> <h1 id="id1">document.getelementbyid 関数 </h1> <ul> <li id="item1"> 項目 1</li> <li id="item2"> 項目 2</li> <li id="item3"> 項目 3</li> </ul> <div id="divid"></div> div は division( 区画 ) の略 他の要素をまとめて, 構造化する際に用いられる JavaScript で操作する対象になる 33
演習問題 3 div 要素に id 属性を指定し,JavaScript プログラムにより div 要素の CSS プロパティを設定し, 以下の長方形を表示するプログラムを作成せよ <div style="position:absolute; top:40; left:40; width:150; height:250; background-color:#0000ff; border: thick solid red; visibility: visible;"> </div> JavaScript ヒント function showrect() { document.getelementbyid( rect ).style. } HTML <body onload= showrect() > <div id= rect ></div> 34 </body>
レポート 演習問題 1,2,3 を以下のアドレスにメールで提出 提出先 To:s_tamagawa@ae.keio.ac.jp 提出期限 5 月 27 日 ( 金 )13:00 まで : 次回授業前まで メールの件名 : 学籍番号 _ 氏名 _JS 演習 1 ファイル名は以下のようにすること 学籍番号 _ 氏名 _JS 演習問題 1.html 学籍番号 _ 氏名 _JS 演習問題 2.html 学籍番号 _ 氏名 _JS 演習問題 3.html 学籍番号 アンダーバーは必ず半角でお願いします 35
問い合わせ先 第 1 研究室 24-604 第 2 研究室 23-620 E-mail: s_tamagawa@ae.keio.ac.jp 気軽にお越しください 優しい山口研メンバーが待ってます