JavaScript演習

Size: px

Start display at page:

Download "JavaScript演習"

かおりまきい
5 years ago
Views:

1 JavaScript 演習 1 1

2 JavaScript( 言語 ) とは情報システムのプログラミングソースコード記述, 外部ファイル保存, コンパイル, テスト, デバッグ... 大変な作業もっと手軽なプログラミング特別な言語処理系は不要! Web ブラウザだけで実行可能 ( 実際は,HTML ファイル内 or 外部ファイルとして記述保存 ) 2

3 Web ブラウザは Web ページ閲覧に使うはずなんでプログラムが動くの? 通常は,Web ページ閲覧のために,Web ブラウザ (IE) を開く. 今回は ( 特別に ), プログラミングするために IE を開く. でも IE は Web ページを閲覧 ( 提示 ) するんだから, 一体,IE のどこにプログラムを入力するんだ? 入力箇所はあります. それは URL 欄でもそこはネットのアドレスを入力する欄でしょう. プログラムなんか入力したらエラーになるよ. 通常はによりアドレスを指定しますプログラム文とすれば確かにエラーになります確認しましょう 3

4 失敗 vs. 成功を URL 欄に入力して実行サーバが見つかりませんでしたという名前のサーバが見つかりませんでした http: HTTP プロトコル // ホスト記述の開始を表す ( ルート ) alert(hello) をに解釈して www :Web サーバ名 alert(hello).com ドメイン名ネット上にそのサーバが存在しなかったちなみになら成功する 4

5 URL の復習 URL( ネット上の情報資源を一意に決定する方法 ) であり, 他のサーバが持つ情報資源を利用する時,http プロトコルを宣言する < スキーム名 >:< スキームにおける固有表現 > http: ハイパーテキスト転送プロトコル用スキーム ftp: ファイル転送プロトコル用スキーム mailto: 電子メールアドレス用スキーム file: ホストのファイルシステム用スキーム... ( 非公式 )javascript: JavaScriptプログラム用スキーム 5

6 Web ブラウザーでプログラミング! アラートウィンドウ出現 1 行プログラミングアドレス欄を削除し,javascript:alert( hello ); と入力して改行 ( 実行 ) copy&paste すると変なコードが挿入されて動かないかも!? 小さな ( アラート = 警告 ) ウィンドウが出現しましたか? 出現したら,ok ボタンをクリックして小ウィンドウを閉じましょうインタラクション 3 行プログラミング javascript: ans=prompt("1+12"); document.write(ans);document.write(" は正解です ") 6

7 90 年代 : JavaScript は不遇 Java 言語とは全く異なる, 簡易型プログラミング ( スクリプト = 台本 ) 言語コンパイラではなくインタープリタオブジェクト指向型スクリプト言語 C 言語に似た手続き型言語のようなスタイルで書かれる NetScape 社でサーバ負荷軽減のために開発 90 年代後半は, セキュリティの脆弱性, ブラウザによって挙動が異なるなど, 問題の多かった言語 7

8 2005-: JavaScript は脚光 2000 年頃から Amazon や Google といった企業が採用 2005 年 Google Map の登場により状況が一変ユーザ満足度 ( ユーザエクスペリエンス ) を重視したリッチクライアントに対応した Web サイトが続々登場サーバからクライアントへの転送データ量の減少直感的な操作が可能 Gmail, Google サジェスト, Amazon Web Service, ドラッグアンドドロップ, タブページ, Widget などなど入力値チェックなどにも利用 8

従来の Web アプリケーションモデルユーザーインターフェース Http リクエストブラウザー HTTP(s) 通信

ブラウザーによって Ajax エンジン自体や呼び出し方法が異なる Ajax (Asynchronous

JavaScript コール XMLHttp リクエスト非同期制御 Ajax エンジン非同期実現 HTTP(s) 通信

9 従来の Web アプリケーションモデルユーザーインターフェース Http リクエストブラウザー HTTP(s) 通信 Web サーバー HTML+CSS データデータベースバックエンド処理レガシーシステムサーバーサイドシステムブラウザーによって Ajax エンジン自体や呼び出し方法が異なる Ajax (Asynchronous JavaScript and XML) Web アプリケーションモデルブラウザーユーザーインターフェース JavaScript コール XMLHttp リクエスト非同期制御 Ajax エンジン非同期実現 HTTP(s) 通信 HTML +CSS データ Web または XML サーバーデータベースバックエンド処理レガシーシステムサーバーサイドシステム二重構造 XML データ

10 クライアント従来の Web アプリ ( 同期ユーザが待たされる ) ユーザー側の活動データ送信ユーザー側の活動データ送信データ送信待ち時間があるデータ送信時間軸ユーザー側の活動データ送信サーバーシステム処理システム処理 Ajax Web アプリ ( 非同期ユーザが快適 ) クライアントユーザー側の活動待ち時間がない入力表示入力表示入力表示入力表示サーバークライアント側処理データ送信データ送信データ送信データ送信 Ajaxエンジンが通信を担当するサーバーサイドの処理サーバーサイドの処理サーバーサイドの処理サーバーサイドの処理

11 JavaScript 演習 (2 回 ) 目的 HTML CSS のおさらいと流行り (?) の Web2.0 技術 JavaScript プログラミング DHTML 作成を通じて見て動くプログラムの楽しさ COM 実験への基礎知識 11

12 HTML のおさらい 12

13 HTML の構造 <!DOCTYPE> ドキュメントタイプの宣言 <HTML>~</HTML> HTML 文書だということの宣言 <HEAD>~</HEAD> 文書のヘッダ情報 <META /> その文書に関するメタ情報 <TITLE>~</TITLE> 文書のタイトル <BODY></BODY> 文書本体 <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01//EN" " > <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> テストページ </title> </head> <body> </body> </html>

14 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>

15 JavaScript 15

16 内容 JavaScriptの書き方 alert 関数変数データ型演算子関数 document.write 関数 prompt 関数演習問題 1 条件分岐繰り返し parseint 関数とparseFloat 関数演習問題 2 document.getelementbyid 関数演習問題 3 レポート 16

17 JavaScript の書き方 HTML ファイル内に書く方法 <head> タグ内に以下のように記述 ex1.html <script type="text/javascript">  </script> 別のテキストファイルに書く方法 ex2.html, ex1.js <script type="text/javascript" src=" ファイル名.js"></script> 17

18 alert 関数ポップアップウィンドウに指定したメッセージを表示する関数デバッグに利用可能 Java の System.out.println メソッドに相当 Ruby の puts メソッドに相当関数再利用可能な JavaScript コードのかたまりに名前をつけたもの alert + ( + 表示するテキスト + ) + ; alert( Hello, World! ); 18

19 変数データ型変数宣言は var を用いる変数の長さは 1 文字以上変数の最初の文字に使えるのは, 英字, アンダースコア (_), ドル記号 ($) $total,_firstname,top100 空白文字と (_ と $ 以外の ) 特殊文字は使えない 5to10,first name,#total,world! 19

20 変数データ型基本データ型は数値文字列論理値の 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

21 演算子 ( よく使われるもの ) 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

22 関数再利用可能な JavaScript コードのかたまりに名前をつけたもの ex7.html 定義方法 function 関数名 ( 引数 ) { 定義内容 return 戻り値 ; } 呼び出し方法関数名 ( 引数 ); var num = 関数名 ( 引数 ); 22

23 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

24 CSS の書式セレクタ { プロパティ : 値 ; プロパティ : 値 } セレクタ : スタイル適用対象の選択プロパティ : font-size や line-height のようなレンダリング特性値 : プロパティに指定可能な値が定義とほほのスタイルシート入門

25 prompt 関数 prompt( 引数 )- 引数をメッセージとして表示し, ユーザからの入力情報 ( 文字列 ) を取得する関数 ex9.html var value = prompt(" 値を入力してください."); alert(value); document.write('<h1>prompt 関数 </h1>'); document.write('<h1>' +value + '</h1>'); 25

26 演習問題 1 prompt 関数と document.write 関数を用いて, ユーザから入力されたテキスト, 文字の色, 文字のサイズ (%) に応じて, 表示内容を変化させる JavaScript プログラムを書きなさい 26

27 条件分岐 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

28 繰り返し ex12.html for 文 for ( 初期化 ; テスト ; 更新 ) { アクション ; } while 文初期化 ; while ( テスト ) { アクション ; 更新 ; } 28

29 parseint 関数と parsefloat 関数 parseint( 引数 ) 引数で文字列を渡すと数値に変換 parsefloat( 引数 ) 引数で文字列を渡すと浮動小数点に変換 ex13.html 29

30 演習問題 2 Hello! という文字列をユーザが入力した数だけ表示する JavaScript プログラムを作成しなさい行数を 5 で割った余りが 1 の場合には赤色,2 の場合には緑色,3 の場合には黄色,4 の場合には黒,0 の場合には青色, さらに,3 の倍数の場合には 200% の大きさで Hello! を表示しなさい 30

31 document.getelementbyid 関数 document.getelementbyid( 引数 ) 引数で指定した要素オブジェクトを得る document.getelementbyid( 引数 ).innerhtml 引数で指定した要素オブジェクトの HTML を得る document.getelementbyid( 引数 ).style.css プロパティ引数で指定した要素オブジェクトの CSS プロパティを得る CSS プロパティ名は, 基本的にはハイフン (-) を除去し, ハイフンの後の文字を大文字に変換したものを用いる参考 : 31

32 オブジェクトのイメージ <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.

innerhtml; alert(item3); JavaScript } document.getelementbyid("divid").innerhtml = " テスト "; document.getelementbyid("divid").style.color = "red"; document.getelementbyid("divid").style.fontsize = "200%"; document.

33 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;

34 演習問題 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>

35 レポート演習問題 1,2,3 を以下のアドレスにメールで提出提出先提出期限 5 月 27 日 ( 金 )13:00 まで : 次回授業前までメールの件名 : 学籍番号 _ 氏名 _JS 演習 1 ファイル名は以下のようにすること学籍番号 _ 氏名 _JS 演習問題 1.html 学籍番号 _ 氏名 _JS 演習問題 2.html 学籍番号 _ 氏名 _JS 演習問題 3.html 学籍番号アンダーバーは必ず半角でお願いします 35

36 問い合わせ先第 1 研究室第 2 研究室 s_tamagawa@ae.keio.ac.jp 気軽にお越しください優しい山口研メンバーが待ってます

JavaScript演習

JavaScript演習 JavaScript 演習 1 山口研究室後期博士課程 2 年玉川奨 ( たまがわすすむ ) 居室 :24-604 / 23-620 mail : s_tamagawa@ae.keio.ac.jp 1 JavaScript( 言語 ) とは情報システムのプログラミングソースコード記述, 外部ファイル保存, コンパイル, テスト, デバッグ... 大変な作業もっと手軽なプログラミング特別な言語処理系は不要!