JavaScript 演習 1 山口研究室後期博士課程 2 年玉川奨 ( たまがわすすむ ) 居室 :24-604 / 23-620 mail : s_tamagawa@ae.keio.ac.jp 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 演習 (3 回 ) 目的 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> htmlex1.html
CSS 15
CSS の書き方 HTML ファイル内に書く方法 <head> タグ内に以下のように記述 htmlex3.html <style type="text/css"> ここにスタイルを記述 </style> 別のテキストファイルに書く方法 htmlex2.html, cssex.css Web ページのデザインを定義 <link rel="stylesheet" type="text/css" href=" ファイル名.css "> 16
CSS の書式 セレクタ { プロパティ : 値 ; プロパティ : 値 } セレクタ : スタイル適用対象の選択プロパティ : font-size や line-height のようなレンダリング特性値 : プロパティに指定可能な値が定義 とほほのスタイルシート入門 http://www.tohoho-web.com/css/
JavaScript 18
JavaScript の書き方 HTML ファイル内に書く方法 <head> タグ内に以下のように記述 ex1.html <script type="text/javascript"> <!-- ここにスクリプトを書く //--> </script> 別のテキストファイルに書く方法 ex2.html, ex1.js <script type="text/javascript" src=" ファイル名.js"></script> 19
HTML と CSS と JavaScript の違い HTML CSS JavaScript 外部ファイル CSS JavaScript HTML Web ページの骨格のみを担当 表現力は紙の文書と同程度 CSS Web ページのデザインを担当 通常は HTML と組み合わせて用いる JavaScript Web ページを動的なものにする 通常は HTML と組み合わせて用いる
内容 alert 関数 変数 データ型 演算子 関数 document.write 関数 prompt 関数 演習問題 1 条件分岐 繰り返し parseint 関数とparseFloat 関数 演習問題 2 21
alert 関数 ポップアップウィンドウに指定したメッセージを表示する関数 デバッグに利用可能 Java の System.out.println メソッドに相当 Ruby の puts メソッドに相当 関数 再利用可能な JavaScript コードのかたまりに名前をつけたもの alert + ( + 表示するテキスト + ) + ; alert( Hello, World! ); 22
変数 データ型 変数宣言は var を用いる 変数の長さは 1 文字以上 変数の最初の文字に使えるのは, 英字, アンダースコア (_), ドル記号 ($) $total,_firstname,top100 空白文字と (_ と $ 以外の ) 特殊文字は使えない 5to10,first name,#total,world! 23
変数 データ型 基本データ型は数値 文字列 論理値の 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); 24
演算子 ( よく使われるもの ) 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 /=( 除算 ),%=( 余剰 ) 25
関数 再利用可能な JavaScript コードのかたまりに名前をつけたもの ex7.html 定義方法 function 関数名 ( 引数 ) { 定義内容 return 戻り値 ; } 呼び出し方法 関数名 ( 引数 ); var num = 関数名 ( 引数 ); 26
document.write 関数 document.write( 引数 )- 引数を HTML として表示させる ex8.html var str = "Hello, World"; document.write("<p>" + str + "</p>"); document.write("<p style='color: red;'>" + str + "</p>"); 27
prompt 関数 prompt( 引数 )- 引数をメッセージとして表示し, ユーザからの入力情報 ( 文字列 ) を取得する関数 ex9.html var value = prompt(" 値を入力してください."); alert(value); document.write('<h1>prompt 関数 </h1>'); document.write('<h1>' +value + '</h1>'); 28
演習問題 1 prompt 関数と document.write 関数を用いて, ユーザから入力されたテキスト, 文字の色, 文字のサイズ (%) に応じて, 表示内容を変化させる JavaScript プログラムを書きなさい 29
条件分岐 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 文を使って他の選択肢が実行されないようにする 30
繰り返し ex12.html for 文 for ( 初期化 ; テスト ; 更新 ) { アクション ; } while 文 初期化 ; while ( テスト ) { アクション ; 更新 ; } 31
parseint 関数と parsefloat 関数 parseint( 引数 ) 引数で文字列を渡すと数値に変換 parsefloat( 引数 ) 引数で文字列を渡すと浮動小数点に変換 ex13.html 32
演習問題 2 Hello! という文字列をユーザが入力した数だけ表示する JavaScript プログラムを作成しなさい 行数を 5 で割った余りが 1 の場合には赤色,2 の場合には緑色,3 の場合には黄色,4 の場合には黒,0 の場合には青色, さらに,3 の倍数の場合には 200% の大きさで Hello! を表示しなさい 33