JavaScript 入 門 1
JavaScript( 言 語 )とは 情 報 システムのプログラミング ソースコード 記 述, 外 部 ファイル 保 存, コンパイル,テスト,デバッグ... 大 変 な 作 業 もっと 手 軽 なプログラミング 特 別 な 言 語 処 理 系 は 不 要! Webブラウザだけで 実 行 可 能 ( 実 際 は,HTMLファイル 内 or 外 部 ファイル として 記 述 保 存 ) 2
1990 年 代 : JavaScript は 不 遇 Java 言 語 とは 全 く 異 なる, 簡 易 型 プログラミング(スクリプト= 台 本 ) 言 語 コンパイラではなくインタープリタ オブジェクト 指 向 型 スクリプト 言 語 C 言 語 に 似 た 手 続 き 型 言 語 のようなスタイルで 書 かれる NetScape 社 でサーバ 負 荷 軽 減 のために 開 発 90 年 代 後 半 は,セキュリティの 脆 弱 性,ブラウザによって 挙 動 が 異 なるなど, 問 題 の 多 かった 言 語 3
2005-: JavaScriptは 脚 光 2000 年 頃 から AmazonやGoogleといった 企 業 が 採 用 2005 年 Google Mapの 登 場 により 状 況 が 一 変 ユーザ 満 足 度 (ユーザエクスペリエンス)を 重 視 した リッチクライアントに 対 応 したWebサイトが 続 々 登 場 サーバからクライアントへの 転 送 データ 量 の 減 少 直 感 的 な 操 作 が 可 能 Gmail, Googleサジェスト, Amazon Web Service, ドラッグアンドドロップ, タブページ, Widgetなどなど 入 力 値 チェックなどにも 利 用 4
従 来 の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エンジンが 通 信 を 担 当 する サーバーサイドの 処 理 サーバーサイドの 処 理 サーバーサイドの 処 理 サーバーサイドの 処 理
HTMLとCSSとJavaScriptの 違 い HTML CSS JavaScript 外 部 ファイル CSS JavaScript HTML Webページの 骨 格 のみ を 担 当 表 現 力 は 紙 の 文 書 と 同 程 度 CSS Webページのデザイン を 担 当 通 常 はHTMLと 組 み 合 わせて 用 いる JavaScript Webページを 動 的 なも のにする 通 常 はHTML と 組 み 合 わせて 用 いる
JavaScript 実 行 8
JavaScriptコンソール 起 動 方 法 WebブラウザーにはJSコンソールが 付 与 JSスクリプトを 実 行 し 確 認 できる F12( 開 発 者 ツール)を 押 す その 後 Consoleタブを 選 択 最 下 行 がJSスクリプト 入 力 画 面 実 行 :Ctr+Enter or 右 下 の をクリック それではWebブラウザーを 起 動 して F12を 押 してください 9
JavaScriptの 書 き 方 HTMLファイル 内 に 書 く 方 法 <head>タグ 内 に 以 下 のように 記 述 ex1.html <script type="text/javascript"> <!-- ここにスクリプトを 書 く //--> </script> 別 のテキストファイルに 書 く 方 法 ex2.html, ex1.js <script type="text/javascript" src="ファイル 名.js"></script> 10
内 容 alert 関 数 変 数 データ 型 演 算 子 関 数 document.write 関 数 prompt 関 数 演 習 問 題 1 条 件 分 岐 繰 り 返 し parseint 関 数 とparseFloat 関 数 演 習 問 題 2 11
alert 関 数 ポップアップウィンドウに 指 定 したメッセージを 表 示 する 関 数 デバッグに 利 用 可 能 JavaのSystem.out.printlnメソッドに 相 当 Rubyのputsメソッドに 相 当 関 数 再 利 用 可 能 なJavaScriptコードのかたまりに 名 前 をつけ たもの alert + ( + 表 示 するテキスト + ) + ; alert( Hello, World! ); 12
変 数 データ 型 変 数 宣 言 はvarを 用 いる 変 数 の 長 さは1 文 字 以 上 変 数 の 最 初 の 文 字 に 使 えるのは, 英 字,アンダー スコア(_),ドル 記 号 ($) $total,_firstname,top100 空 白 文 字 と(_と$ 以 外 の) 特 殊 文 字 は 使 えない 5to10,first name,#total,world! 13
変 数 データ 型 基 本 データ 型 は 数 値 文 字 列 論 理 値 の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); 14
演 算 子 (よく 使 われるもの) 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 /=( 除 算 ),%=( 余 剰 ) 15
関 数 再 利 用 可 能 なJavaScriptコードのかたまりに 名 前 を つけたもの ex7.html 定 義 方 法 function 関 数 名 ( 引 数 ) { 定 義 内 容 return 戻 り 値 ; } 呼 び 出 し 方 法 関 数 名 ( 引 数 ); var num = 関 数 名 ( 引 数 ); 16
document.write 関 数 document.write( 引 数 )- 引 数 をHTMLとして 表 示 させる ex8.html var str = "Hello, World"; document.write("<p>" + str + "</p>"); document.write("<p style='color: red;'>" + str + "</p>"); 17
prompt 関 数 prompt( 引 数 )- 引 数 をメッセージとして 表 示 し,ユーザから の 入 力 情 報 ( 文 字 列 )を 取 得 する 関 数 ex9.html var value = prompt(" 値 を 入 力 してください."); alert(value); document.write('<h1>prompt 関 数 </h1>'); document.write('<h1>' +value + '</h1>'); 18
演 習 問 題 1 prompt 関 数 とdocument.write 関 数 を 用 いて,ユーザから 入 力 されたテキスト, 文 字 の 色, 文 字 のサイズ(%)に 応 じて, 表 示 内 容 を 変 化 させるJavaScriptプログラムを 書 きなさい 19
条 件 分 岐 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 文 を 使 って 他 の 選 択 肢 が 実 行 されないようにする 20
繰 り 返 し ex12.html for 文 for ( 初 期 化 ; テスト; 更 新 ) { アクション; } while 文 初 期 化 ; while (テスト) { アクション; 更 新 ; } 21
parseint 関 数 とparseFloat 関 数 parseint( 引 数 ) 引 数 で 文 字 列 を 渡 すと 数 値 に 変 換 parsefloat( 引 数 ) 引 数 で 文 字 列 を 渡 すと 浮 動 小 数 点 に 変 換 ex13.html 22
演 習 問 題 2 Hello! という 文 字 列 をユーザが 入 力 した 数 だけ 表 示 するJavaScriptプログラムを 作 成 しなさい 行 数 を5で 割 った 余 りが1の 場 合 には 赤 色,2の 場 合 には 緑 色,3の 場 合 には 黄 色,4の 場 合 には 黒,0 の 場 合 には 青 色,さらに,3の 倍 数 の 場 合 には 200%の 大 きさで Hello! を 表 示 しなさい 23