JavaScript JavaScript は Netscape 社 が 開 発 したスクリプト 言 語 です HTML ドキュメント(Web ペー ジ)に 埋 め 込 まれ ブラウザがそのページを 表 示 する 際 にスクリプトの 記 述 を 解 釈 し 実 行 されます スクリプト 言 語 : 機 械 語 への 変 換 を 簡 単 に 実 行 できるようにした 簡 易 プログラム 言 語 Java とは 別 の 言 語 です 実 習 問 題 1 サンプルプログラム exe1.html を 作 成 しましょう (テキストエディタで 以 下 のプログラムを 入 力 ) 大 文 字 小 文 字 の 区 別 スペル 間 違 いに 注 意 しましょう <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title> 演 習 問 題 1</title> <script type="text/javascript"> document.write( 'Hello<br>' ); </script> </head> <body> </body> </html> <Point> 処 理 内 容 document.write( ): 文 字 列 を HTML 文 書 に 出 力 するメソッド 1
実 習 問 題 2 実 習 問 題 1(exe1.html)をもとにして 以 下 の 3 行 を 表 示 するようにしましょう Hello こんにちは Bonjour ファイル 名 :exe2.html 2
1.プログラムの 基 本 制 御 構 造 1. 順 次 ( 連 続 ) 上 から 順 に 処 理 をすすめる 2. 反 復 ( 繰 返 し) 条 件 や 回 数 によって 処 理 を 繰 り 返 す 3. 選 択 ( 分 岐 ) 条 件 によって 処 理 を 分 岐 する 1-2-1. 反 復 ( 繰 返 し) for 文 による 繰 返 し 書 式 ) for( 初 期 化 式 ; 繰 返 し 条 件 式 ; ループの 更 新 式 ) { 繰 り 返 す 処 理 例 ) for( i=0 ; i<5 ; i++ ) { 繰 り 返 す 処 理 1-2-2. 反 復 ( 繰 返 し) while 文 による 繰 返 し 書 式 ) while( 繰 返 し 条 件 式 ) { 繰 り 返 す 処 理 例 ) while( i<5 ) { 繰 り 返 す 処 理 1-3-1. 選 択 ( 分 岐 ) if 文 による 分 岐 処 理 書 式 1) if( 条 件 式 ) { 処 理 書 式 2)if( 条 件 式 ) { 処 理 else if( 条 件 式 ) { 処 理 else if( 条 件 式 ) { 処 理 else { 処 理 例 1) if( a>3 ) { 処 理 例 2) if( a>=60 && b>=60 ) { 処 理 else if( a==0 b==0 ) { 処 理 else { 処 理 3
1-3-2. 選 択 ( 分 岐 ) switch case 文 による 多 分 岐 書 式 )switch( 条 件 式 または 値 ){ case 値 1: 処 理 break; case 値 2: 処 理 break; default: 処 理 break; 例 )switch( a%3 ){ case 0: 処 理 break; case 1: 処 理 break; default: 処 理 break; 4
2. 演 算 子 演 算 子 基 本 的 な 演 算 を 実 行 する 命 令 算 術 演 算 子 加 減 乗 除 などの 基 本 的 な 計 算 を 実 行 する 演 算 子 演 算 子 例 説 明 + a+b 加 算 aとbを 足 す - a-b 減 算 aからbを 引 く * a*b 乗 算 aとbを 掛 ける / a/b 除 算 aをbで 割 った 商 % a%b 剰 余 aをbで 割 った 余 り ++ a++ インクリメント aの 値 を1 増 やす a デクリメント aの 値 を1 減 らす 代 入 演 算 子 変 数 に 値 を 代 入 する 演 算 子 演 算 子 例 説 明 = a=3 変 数 aに 3 を 代 入 する a=b+c 変 数 aにb+cしたものを 代 入 する 関 係 演 算 子 2 つの 値 を 比 較 し 結 果 を true または false を 返 す 演 算 子 演 算 子 例 説 明 > a>3 aが3より 大 きいとき >= a>=3 aが3 以 上 のとき < a<3 aが3より 小 さいとき <= a<=3 aが3 以 下 のとき == a==3 aが3と 等 しいとき 等 価 演 算 子!= a!=3 aが3 以 外 のとき 非 等 価 演 算 子 === a===3 aが3と 等 しいとき 厳 密 等 価 演 算 子!== a!==3 aが3 以 外 のとき 厳 密 非 等 価 演 算 子 条 件 演 算 子 複 数 の 条 件 の 関 係 を 表 す 演 算 子 演 算 子 例 説 明 && a==0 && b==0 aが0かつbが0のとき( 両 方 ) a==0 b==0 aが0もしくはbが0のとき(どちらか) 5
実 習 問 題 3 for 文 を 使 って Hello を 10 行 繰 り 返 すプログラムを 作 成 しましょう ファイル 名 :exe3.html <アレンジ> 1) 行 番 号 を 表 示 してみましょう document.write( i + ' Hello<br>' ); 2)100 行 表 示 するようにしてみましょう 行 番 号 は 0 から 99 までになります 実 習 問 題 4 while 文 を 使 って Hello を 10 行 繰 り 返 すプログラムを 作 成 しましょう ファイル 名 :exe4.html 実 習 問 題 5 実 習 問 題 3(exe3.html)を 元 にして if 文 を 使 って 行 番 号 4,5の 間 に 区 切 り 線 を 入 れて みましょう ファイル 名 :exe5.html 実 習 問 題 6 if 文 を 使 って 偶 数 (2の 倍 数 )を 表 示 するプログラムを 作 成 しましょう ファイル 名 :exe6.html ヒント) for( i=0 ; i<100 ; i++){ if( i を2で 割 った 余 り が0 と 等 しければ ){ document.write( i + ' Hello<br>' ); 6
実 習 問 題 7 実 習 問 題 6(exe6.html)を 元 にして i を 3 で 割 った 余 りが 0 の 場 合 Hello 余 りが 1 の 場 合 こんにちは それ 以 外 の 場 合 Bonjour と 表 示 するプログラムを 作 成 しましょ う ファイル 名 :exe7.html ヒント) for( i=0 ; i<100 ; i++){ if( i を3で 割 った 余 り が0 と 等 しければ ){ document.write( i + ' Hello<br>' ); else if( 条 件 文 ){ 処 理 else{ 処 理 実 習 問 題 8 1) 実 習 問 題 5(exe5.html)を 元 にして 10 行 ごとのに 区 切 り 線 が 表 示 するようにしま しょう 2) 区 切 り 線 を 2 パターン 交 互 (10 行 5 行 に 区 切 り 線 )に 表 示 するようにしてみま しょう ファイル 名 :exe8.html 7
実 習 問 題 9 if 文 を 使 って ランダムに グー チョキ パー のいずれかを 表 示 するプログラムを 作 成 しましょう ファイル 名 :exe9.html <Point> Math.random( ) 0.0 以 上 1.0 未 満 の 擬 似 乱 数 的 に 返 すメソッド Math.floor ( ) 小 数 点 以 下 の 数 値 を 切 り 捨 てるメソッド 例 Math.random( )の 値 Math.random( )*3 Math.floor(Math.random( ) * 3); 0.0 0.0 0 0.35 1.05 1 0.7 2.1 2 0.99 2.97 2 < 説 明 > i = Math.floor(Math.random( ) * 3); とすると 変 数 i には メソッド 実 行 ごとにラ ンダムに 0,1,2が 入 ります i が0の 場 合 には グー 1の 場 合 には チョキ 2の 場 合 には パー と 画 面 に 表 示 します 実 習 問 題 10 実 習 問 題 9を switch case 文 を 使 ったプログラムに 変 更 しましょう ファイル 名 :exe10.html 8
3.オブジェクト 指 向 オブジェクト 指 向 とは 現 実 世 界 の 物 と 同 様 にプログラムを 作 成 できるようにした 考 え 方 オブジェクト 指 向 の 利 点 1.カプセル 化 2. 部 品 の 独 立 性 3. 部 品 の 再 利 用 性 [キーワード] オブジェクト 物 状 態 (プロパティ)とふるまい(メソッド)をもつ プロパティ オブジェクトの 属 性 メソッド オブジェクトに 対 する 動 作 インスタンス 生 成 されたオブジェクト [ 記 述 方 法 ] オブジェクト 名.メソッド( ); オブジェクト 名.プロパティ= 指 定 する 値 ; 例 ) document.write( 'Hello<br>' ); history.back(); document.bgcolor = '#ffff00'; document.write( navigator.appname ); ドキュメントに Hello と 表 示 する ひとつ 前 のページに 戻 る ドキュメントの 背 景 色 を 黄 色 にする ドキュメントにブラウザの 種 類 を 表 示 する 参 考 : http://www.tohoho-web.com/js/basic.htm#object http://www.scollabo.com/banban/java/object.html http://www.scollabo.com/banban/java/ref_13.html 9
HTML ドキュメントをロードすると JavaScript で 利 用 可 能 なオブジェクトを 自 動 的 に 生 成 します オブジェクトは 階 層 構 造 をもっており それぞれのオブジェクトのプロパティを 指 定 するためには 最 上 位 からの 親 の 名 前 を 記 述 します 但 し window オブジェクトの 部 分 だけは 省 略 することができます 主 なオブジェクト <ブラウザに 関 するオブジェクト> window オブジェクト トップレベルのオブジェクト location history document Frame の4つの 下 位 オブジェクトをもつ location オブジェクト 現 在 表 示 しているアドレス(URL)に 関 する 情 報 をもつオブジェクト history オブジェクト ひとつ 前 に 見 ていたページ ふたつ 前 に 見 ていたページなどの ウィンドウのヒ ストリ 情 報 を 保 持 制 御 するオブジェクト document オブジェクト 表 示 している 文 書 自 体 を 示 すドキュメントオブジェクト <その 他 > ビルトインオブジェクト JavaScript が 独 自 にブラウザに 組 み 込 んでいるオブジェクト Array Boolean Date Event Function Math Number Object RegExp screen String 10
実 習 問 題 11 以 下 のプログラムを 作 成 しましょう ファイル 名 :exe11.html 下 線 部 (1~3)は 記 述 しないでください <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> 実 習 問 題 11</title> <script type="text/javascript"> document.write( 'ブラウザ 名 :' + navigator.appname + '<br>' ); アレンジ 1)を 記 述 window.alert( 'alert メソッドの 実 行 ' ); i = 10; アレンジ 2)を 記 述 document.bgcolor = '#ffff00'; アレンジ 3)を 記 述 </script> </head> <body> </body> </html> <アレンジ> 1)ドキュメントの 最 終 更 新 時 刻 と ドキュメントのタイトルを 表 示 しましょう 2)alert メソッドを 使 って i の 値 を 表 示 しましょう 3)ドキュメントの 文 字 色 を 変 更 しましょう 11
<メソッド> ウィンドウのメソッド window.open(url, name [, style]) ウィンドウの 表 示 新 しいウィンドウを 開 く 引 数 はすべて 省 略 可 能 url 表 示 する URL を 指 定 name ウィンドウの 名 前 style ステータスバーの 表 示 / 非 表 示 などウィンドウに 関 するいろいろなオプション 参 考 http://www.tagindex.com/javascript/window/open_option.html リターン 値 :ウィンドウ 名 ダイアログボックスのメソッド window.alert(message) 警 告 ダイアログ 指 定 した message と[OK]ボタンのついたダイアログを 表 示 メッセージ 内 の 改 行 : \n リターン 値 :なし window.confirm(message) 確 認 ダイアログ 指 定 した message と[OK] [キャンセル]ボタンのついたダイアログを 表 示 リターン 値 :true,false window.prompt(message [, default]) 文 字 列 入 力 ダイアログ 指 定 した message と[OK] [キャンセル]ボタンのついた 入 力 用 のダイアログを 表 示 default( 省 略 可 )は 文 字 列 の 初 期 値 を 指 定 リターン 値 :[OK]の 場 合 は 入 力 された 文 字 列 [キャンセル]の 場 合 は null OK キャンセル:if を 利 用 して 処 理 を 分 岐 OK の 場 合 ブラウザ 画 面 を3つ 表 示 (for 文 を 利 用 )ウィンドウを <プロパティ> window.navigator.appcodename ブラウザのコード 名 を 表 す 文 字 列 document.bgcolor ドキュメントの 背 景 色 document.fgcolor ドキュメントの 前 景 色 ( 文 字 色 ) document.lastmodified ドキュメントの 最 終 更 新 時 刻 document.title ドキュメントのタイトル 12
実 習 問 題 12 以 下 のプログラムを 作 成 しましょう ファイル 名 :exe12.html script 部 分 のみを 記 述 しています 適 宜 HTML の 記 述 を 書 き 加 えてください <script type="text/javascript"> ret = window.confirm( ' 背 景 色 を 変 更 しますか?' ); document.write( ret ); </script> <アレンジ> if 文 を 利 用 して 確 認 ダイアログ(confirm)で [OK]ボタンをクリックした 場 合 のみ 背 景 色 を 変 更 するプログラムに 書 き 換 えましょう ヒント) if 文 (p.3) 関 係 演 算 子 (p.5) ドキュメントの 背 景 色 を 示 すプロパティ(p.12)を 利 用 します 背 景 色 は 好 きな 色 にしてください 13
実 習 問 題 13 confirm メソッドを 利 用 し [OK]ボタンをクリックした 場 合 新 しいウィンドウを 開 くプ ログラムを 作 成 しましょう 新 しくウィンドウ url name style には 何 も 指 定 しない 確 認 メッセージ 新 しいウィンドウを 開 きますか? ファイル 名 :exe13.html <アレンジ> url: http://www.yahoo.co.jp name:subwin style: 任 意 (いろいろな 指 定 を 試 してみましょう) http://www.tagindex.com/javascript/window/open_option.html 参 照 実 習 問 題 14 以 下 のプログラムを 作 成 しましょう ファイル 名 :exe14.html script 部 分 のみを 記 述 しています 適 宜 HTML の 記 述 を 書 き 加 えてください <script type="text/javascript"> document.write( '<h1> 背 景 色 文 字 色 を 指 定 できます </h1>' ); ret = window.prompt( ' 背 景 色 を 入 力 してください ', '' ); document.write( ret ); </script> 色 番 号 は #ff0000 というように # 記 号 と 数 字 6 桁 でしてします <アレンジ> 1)prompt メソッドのリターン 値 が null 以 外 の 場 合 は 背 景 色 を 変 更 するようにして みましょう 2) 文 字 色 を 変 更 する 命 令 も 書 き 加 えてみましょう 14
実 習 問 題 15 prompt メソッドを 利 用 し URL を 指 定 し OK ボタンをクリックした 場 合 その URL を 表 示 するウィンドウを 新 しく 開 くプログラムを 作 成 しましょう ファイル 名 :exe15.html window.open メソッドの name は subwin style はおまかせします 実 習 問 題 16 prompt メソッドを 利 用 し 新 しく 開 くウィンドウの 数 を 指 定 し OK ボタンをクリックし た 場 合 指 定 数 のウィンドウを 開 くプログラムを 作 成 しましょう ファイル 名 :exe16.html for 文 (p.3)を 利 用 します window.open メソッドの url style はおまかせします name は 'subwin' にします 指 定 した 数 のウィンドウが 表 示 されましたか? ウィンドウの 数 をいくつに 指 定 しても1つしかウィンドウが 開 かないですよね <アレンジ> window.open メソッドの name を 'subwin' + i などとし 異 なるウィンドウ 名 を 指 定 するようにしましょう 15
実 習 問 題 17 以 下 のプログラムを 作 成 しましょう ファイル 名 :exe17.html script 部 分 のみを 記 述 しています 適 宜 HTML の 記 述 を 書 き 加 えてください <script type="text/javascript"> document.write( '<h1> 現 在 時 間 の 表 示 </h1>' ); mytime = new Date(); y = mytime.getfullyear(); m = mytime.getmonth()+1; d = mytime.getdate(); h = mytime.gethours(); min = mytime.getminutes(); sec = mytime.getseconds(); day = mytime.getday(); document.write( y + ' 年 ' + m + ' 月 ' + d + ' 日 ' + h + ' 時 ' + min + ' 分 ' + sec + ' 秒 <br>'); document.write( day + ' 曜 日 <br>'); </script> <point> new 演 算 子 オブジェクトの 新 しく 生 成 します <アレンジ> 1) 変 数 day には 0( 日 曜 日 )~6( 土 曜 日 )までの 値 が 代 入 されています 日 曜 日 月 曜 日 など 単 語 で 表 示 するように 変 更 しましょう 2) 現 在 時 刻 によって 異 なるメッセージを 表 示 しましょう 8 時 以 降 12 時 未 満 (20 秒 以 降 35 秒 未 満 ) おはよう 12 時 以 降 18 時 未 満 (35 秒 以 降 50 秒 未 満 ) こんにちは 18 時 以 降 2 時 未 満 (50 秒 以 降 5 秒 未 満 ) こんばんは 2 時 以 降 8 時 未 満 (5 秒 以 降 20 秒 未 満 ) 就 寝 中 関 係 演 算 子 条 件 演 算 子 (p.5) 参 照 16
4.イベント イベントとは クリックやキー 入 力 などのユーザ 操 作 や メッセージの 受 信 など あるオブジェクトに 対 して 発 生 したアクションをイベントといいます このイベントの 発 生 を 検 知 し 何 らか の 処 理 を 実 行 させる 機 能 をイベントハンドラといいます イベントハンドラ 一 覧 イベントハンドラ イベントが 起 こるタイミング onblur ページやフォーム 要 素 がフォーカスを 失 った 時 onfocus ページやフォーム 要 素 がフォーカスされた 時 onchange フォーム 要 素 の 選 択 入 力 内 容 が 変 更 された 時 onselect テキストが 選 択 された 時 onsubmit フォーム 内 容 を 送 信 しようとした 時 onreset フォーム 内 容 がリセットされた 時 onabort 画 像 の 読 み 込 みを 中 断 した 時 onerror 画 像 の 読 み 込 み 中 にエラーが 発 生 した 時 onload ページや 画 像 の 読 み 込 みが 完 了 した 時 onunload ウィンドウを 閉 じた 時 他 のページに 切 り 替 えた 時 ページをリロード( 更 新 )した 時 onclick 要 素 やリンクをクリックした 時 ondblclick 要 素 をダブルクリックした 時 onkeyup 押 していたキーをあげた 時 onkeydown キーを 押 した 時 onkeypress キーを 押 している 時 onmouseout マウスを 離 した 時 onmouseover マウスを 重 ねた 時 onmouseup クリックしたマウスを 上 げた 時 onmousedown マウスでクリックした 時 onmousemove マウスを 動 かしている 時 17
5. 関 数 (function)の 定 義 ひとまとまりの 処 理 に 名 前 をつけて 関 数 として 定 義 することができます この 関 数 を 呼 び 出 すことで 必 要 な 時 に 実 行 したい 処 理 をすることができます 書 き 方 ) function 関 数 名 ( [ 引 数 1 引 数 2 ] ){ 処 理 1 引 数 (パラメータ)は 省 略 可 能 2 1つページ 内 で 同 じ 関 数 名 は 使 用 できません 例 1) function changebgcolor(){ document.bgcolor = '#ff0000'; 例 2) function changebgcolor( col ){ document.bgcolor = col; 18
実 習 問 題 18 背 景 色 を 変 更 するプログラムを 作 成 しましょう ファイル 名 :exe18.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> 実 習 問 題 18</title> <script type="text/javascript"> function changebgcolor(){ document.bgcolor = '#ff0000'; </script> </head> <body> <h1> 背 景 色 文 字 色 の 変 更 </h1> <hr> <form> <button type="button" onclick="changebgcolor();"> 背 景 色 を 赤 </b utton><br> <button type="button" onclick=""> 文 字 色 を 緑 </button> </form> </body> </html> 19
<アレンジ> 1) 文 字 色 を 緑 にする 関 数 changefgcolor を 作 成 し 文 字 色 を 緑 ボタンクリックで 呼 び 出 すように 変 更 しましょう 少 し 暗 い 緑 :#009900 2) 背 景 色 を 白 (#ffffff)にする 関 数 changebgcolorw 文 字 色 を 黒 (#000000)にす る 関 数 changefgcolorb を 作 成 し それぞれ 実 行 できるようにしましょう 3) changebgcolor changefgcolor を 引 数 のある 関 数 に 書 き 換 えましょう 関 数 の 記 述 function changebgcolor( col ){ document.bgcolor = col; 呼 び 出 し 時 の 記 述 <button onclick="changebgcolor( '#ff0000' );"> 背 景 色 を 赤 </button> changefgcolor も 同 様 に 変 更 しましょう ダブルクォーテーション 内 で 文 字 列 を 表 す 場 合 は シングルクォーテーションを 使 用 します 4) 背 景 色 文 字 色 の 変 更 ができるボタンをいくつか 作 成 しましょう 参 考 ) 紹 介 したプログラムでの 色 設 定 赤 系 緑 系 青 系 背 景 色 #ff0000 #00ff00 #0000ff 文 字 色 #990000 #009900 #000099 Web Safe Color 一 覧 表 /カラーチャート http://www.scollabo.com/banban/lectur/websafe.html 20
実 習 問 題 19 いろいろなフォーム 部 品 (セレクトボックス テキストフィールド)を 利 用 するプログラ ムを 作 成 しましょう ファイル 名 :exe19.html body 部 分 のみを 記 述 しています 適 宜 HTML の 記 述 を 書 き 加 えてください <body> <h1> 背 景 色 文 字 色 の 変 更 </h1> <hr> <form> <label> 背 景 色 選 択 </label> <select id="bgcol"> <option value="#ffffff" selected="selected"> 白 </option> <option value="#ff0000"> 赤 </option> <option value="#00ff00"> 緑 </option> <option value="#0000ff"> 青 </option> <option value="#000000"> 黒 </option> <option value="#ffff00"> 黄 </option> </select> <br> <hr> <input type="text" value="#" size="10" id="coltext"> <button type="button" onclick=""> 背 景 色 を 変 更 </button> </form> </body> </html> 21
<アレンジ> 1)セレクトボックスで 値 を 変 更 すると 背 景 色 を 指 定 した 色 に 変 更 するようにしましょ う 1 セレクトボックスの 値 を 変 更 したときに 関 数 を 呼 び 出 します onchange="changebgcolor();" 2 背 景 色 を 変 更 する 関 数 を 作 成 します 関 数 名 : changebgcolor 処 理 内 容 document.bgcolor = document.getelementbyid('bgcol').value; 2) 同 様 に 文 字 色 も 変 更 できるようにしましょう 文 字 色 のセレクトボックスの id : fgcol 関 数 名 : changefgcolor 3) 背 景 色 を 変 更 ボタンをクリックすると 背 景 色 をテキストフィールドで 指 定 した 色 に 変 更 するようにしましょう 関 数 名 : changecolor 処 理 内 容 ドキュメントの 背 景 色 に id:coltext の 値 (value)を 代 入 します 4) 次 のステップへの 準 備 です 関 数 changecolor の 変 更 引 数 つきの 関 数 にします 引 数 名 : mode 処 理 内 容 mode の 値 が 0 ならば 背 景 色 を 変 更 する 呼 び 出 し 方 の 変 更 <button type="button" onclick="changecolor();"> 背 景 色 を 変 更 </button> を <button type="button" onclick="changecolor( 0 );"> 背 景 色 を 変 更 </button> と 変 更 します 5)テキストフィールドで 指 定 した 値 で 文 字 色 も 変 更 できるようにしましょう ボタンを 追 加 クリック 時 の 処 理 onclick="changecolor( 1 )"; 関 数 changecolor に mode が 1 の 場 合 の 処 理 を 追 加 22
実 習 問 題 20 文 字 サイズを 変 更 するプログラムを 作 成 しましょう ファイル 名 :exe20.html 完 成 図 ヒント) この 部 分 の 文 字 が 変 わります は 以 下 のようにマークアップしましょう <div id="contents"> この 部 分 の 文 字 が 変 わります </div> 関 数 は1つだけ 作 成 します 引 数 によって 大 中 小 の 文 字 サイズに 変 更 するようにしましょう 大 中 小 のボタンをクリックすることで id: contents 部 分 の 文 字 サイズを 変 更 します 指 定 ID の 文 字 サイズ 変 更 document.getelementbyid(id).style.fontsize = 値 ; 値 :xx-small, x-small, small, medium, large, x-large, xx-large 例 ) document.getelementbyid('contents').style.fontsize = 'xx-large'; どの 文 字 サイズを 選 択 するかはお 任 せします 23
<アレンジ> 1)id: contents 部 分 の 文 字 色 を 変 更 しましょう 指 定 ID の 文 字 色 変 更 document.getelementbyid(id).style.color = 値 ; 値 : 色 番 号 (#ffffff, #000000) 色 名 (white,black,red,blue) 例 ) document.getelementbyid('contents').style.color = '#00ffff'; document.getelementbyid('contents').style.color = 'blue'; 2)id: contents 部 分 の 表 示 内 容 を 変 更 しましょう 指 定 ID の 表 示 内 容 変 更 document.getelementbyid(id).innerhtml = 文 字 列 ; 例 ) document.getelementbyid('contents').innerhtml = 'Hello'; document.getelementbyid('contents').innerhtml = '<h1>bye</h1>'; 24
実 習 問 題 21 背 景 画 像 を 変 更 するプログラムを 作 成 しましょう ファイル 名 :exe21.html body 部 分 のみを 記 述 しています 適 宜 HTML の 記 述 を 書 き 加 えてください <body id="mybody"> <h1> 背 景 画 像 の 変 更 </h1> <form> <button type="button" style="background:#fff url(img/r2.gif); width:60px; height:60px;" onclick="changebgimage('url(img/r2.gif)'); "></button> <button type="button" style="background:#fff url(); width:60p x; height:60px;" onclick="changebgimage('url()');"></button> </form> </body> </html> style 属 性 :タグに 対 して 直 接 スタイルを 指 定 をします 上 記 の 例 では background:#fff url(img/r2.gif); 背 景 指 定 ( 色 画 像 ) 背 景 画 像 は url(ファイル 名 )と 表 記 します width:60px; 幅 height:60px; 高 さ ヒント) 関 数 名 : changebgimage 引 数 : value 処 理 内 容 document.getelementbyid('mybody').style.backgroundimage = value; <アレンジ> セレクトボックスでも 背 景 色 が 変 更 できるようにしてみましょう 25
実 習 問 題 22 画 像 のロールオーバープログラムを 作 成 しましょう ファイル 名 :exe22.html 配 布 教 材 : 画 像 ファイル(img フォルダ) script body 部 分 のみを 記 述 しています 適 宜 HTML の 記 述 を 書 き 加 えてください <script type="text/javascript"> function changeimg( filename ){ document.getelementbyid( 'img1' ).src = filename; </script> </head> <body> <h1>マウスオーバーによる 画 像 の 変 化 </h1> <hr> <div> <img src="img/sakura.jpg" alt=" 桜 の 写 真 " id="img1" onmouseover ="changeimg( 'img/hana.jpg' )" onmouseout="changeimg( 'img/sakura.jp g' )"> </div> </body> </html> <アレンジ> 現 在 1つ 画 像 のロールオーバーができます 3つの 画 像 をロールオーバーできるようにしてみましょう ヒント) 関 数 changeimg に src を 変 更 したい 画 像 の id を 渡 します 以 下 のように 引 数 を2つにするわけです function changeimg( id, filename ){ 使 用 する 画 像 は 各 自 用 意 しましょう 26
実 習 問 題 23 ロールオーバーした 画 像 を 拡 大 表 示 するプログラムを 作 成 しましょう ファイル 名 :exe23.html body 部 分 のみを 記 述 しています 適 宜 HTML の 記 述 を 書 き 加 えてください <body> <h1>マウスオーバーによる 画 像 の 変 化 </h1> <hr> <div> <img src="img/sakura.jpg" alt=" 桜 の 写 真 " width="40" height="30"> <img src="img/image0.jpg" alt=" 朝 の 画 像 " width="40" height="30"> <img src="img/image1.jpg" alt=" 昼 の 画 像 " width="40" height="30"> <img src="img/image2.jpg" alt=" 夜 の 画 像 " width="40" height="30"> </div> <hr> <div> <img src="img/hana.jpg" alt=" 拡 大 画 像 " id="zoom" width="240" height="180"> </div> </body> ヒント) 関 数 zoomimg を 作 成 しましょう function zoomimg( filename ){ 処 理 :id zoom の src を filename にする 各 画 像 にマウスオーバーした 時 に 関 数 zoomimg を 呼 び 出 すようにしましょう 27
実 習 問 題 24 四 則 演 算 をするプログラムを 作 成 しましょう ファイル 名 :exe24.html 完 成 図 script 部 分 の 記 述 です function calcfunc(){ document.getelementbyid( 'ans' ).innerhtml = ' 計 算 結 果 '; body 部 分 の 記 述 です <h1> 四 則 演 算 </h1> <hr> <form> <label>=</label> <span id="ans"></span> <br> <button type="button" onclick="calcfunc();"> 計 算 </button> </form> <アレンジ> 1) 値 を 入 力 するテキストフィールド2つ 演 算 子 を 選 択 するセレクトボックス1つを 追 加 しましょう 作 成 条 件 ) 各 テキストフィールドの id x y セレクトボックスの id op セレクトボックスの 各 要 素 の value + - * / 2) 計 算 ボタンをクリックすると 計 算 実 行 するように 関 数 calcfunc 内 の 記 述 を 変 更 しましょう できましたか? できないでしょ 解 答 例 は 後 ほど 28
実 習 問 題 25 BMI を 計 算 するプログラムを 作 成 しましょう ファイル 名 :exe25.html 1)まずは フォーム 部 品 を 記 述 しましょう ( 計 算 ボタンを 押 しても 何 も 実 行 されませ ん ) script body 部 分 のみを 記 述 しています 適 宜 HTML の 記 述 を 書 き 加 えてください <script type="text/javascript"> function bmifunc(){ </script> </head> <body> <h1> 標 準 体 重 と 肥 満 度 の 計 算 </h1> <form> <label> 身 長 (cm):</label> <input type="text" size="10" id="height"><br> <label> 体 重 (Kg):</label> <input type="text" size="10" id="weight"><br> <br> <input type="button" value=" 計 算 " onclick="bmifunc()"><br><br> <hr> <h2> 結 果 </h2> <label> 標 準 体 重 :</label> <span id="std"></span><br> <label> 肥 満 度 :</label> <span id="bmi"></span><br><br> <span id="bmi2"></span> </form> </body> BMI 計 算 式 標 準 体 重 (kg) = 身 長 (m) 身 長 (m) 22 肥 満 度 = 体 重 (kg) ( 身 長 (m) 身 長 (m) ) 29
2) 標 準 体 重 を 計 算 し その 結 果 を 表 示 するようにしましょう id height の 値 を 利 用 して 計 算 し その 結 果 を id std に 表 示 します 3) 肥 満 度 を 計 算 し その 結 果 を 表 示 するようにしましょう id height id weight の 値 を 利 用 して 計 算 し その 結 果 を id bmi に 表 示 し ます 4) 標 準 体 重 肥 満 度 を 小 数 点 第 三 位 を 四 捨 五 入 した 形 式 で 表 示 しましょう Math.round() 小 数 点 以 下 を 四 捨 五 入 するメソッドを 利 用 します 使 用 例 ) a = Math.round( 4.567 ); a には 5 が 代 入 されます b = Math.round( 4.567 * 10 ); b には 46 が 代 入 されます c = Math.round( 4.567 * 10 ) / 10 ; c には 4.6 が 代 入 されます 5)BMI 判 定 結 果 を 表 示 しましょう 下 記 の BMI 判 定 をもとに if 命 令 を 使 って 肥 満 度 を 判 定 し その 指 標 を id bmi2 に 表 示 しましょう BMI 判 定 状 態 低 体 重 普 通 体 重 肥 満 (1 度 ) 肥 満 (2 度 ) 肥 満 (3 度 ) 肥 満 (4 度 ) 指 標 18.5 未 満 18.5 以 上 25 未 満 25 以 上 30 未 満 30 以 上 35 未 満 35 以 上 40 未 満 40 以 上 6)BMI 判 定 結 果 を 異 なる 文 字 色 で 表 示 しましょう 30
実 習 問 題 26 google map を 表 示 するプログラムを 作 成 しましょう ファイル 名 :gmap.html 1) <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% body { height: 100%; margin: 1em; padding: 0px #map_canvas { height: 100% </style> <script type="text/javascript" src="http://maps.google.com/maps/api/j s?sensor=false"> </script> <script type="text/javascript"> var map; var geocoder; function initialize() { var latlng = new google.maps.latlng(35.050421, 135.772473); var myoptions = { zoom: 13, center: latlng, disabledefaultui: true, maptypeid: google.maps.maptypeid.roadmap ; var map = new google.maps.map(document.getelementbyid("map_canva s"),myoptions); </script> <title>google map</title> </head> <body onload="initialize()"> <h1>google map</h1> <div id="map_canvas" style="width: 500px; height: 500px;"></div> </body> </html> 31
2)いろいろ 変 更 してみましょう 1 地 図 のサイズ 2 表 示 している 位 置 自 分 の 家 を 表 示 するように 変 更 しましょう 経 緯 緯 度 を 調 べる: http://www.geocoding.jp/ 3myOptions の 設 定 値 の 変 更 Ⅰ zoom レベル Ⅱ disabledefaultui: true, を disabledefaultui: false, としてみると? Ⅲ maptypeid: google.maps.maptypeid.roadmap の ROADMAP を HYBRID, SATELLITE, TERRAIN のいずれかに 変 更 してみると? 参 考 : https://developers.google.com/maps/documentation/javascript/reference?hl=ja 32
3)テキストボックスに 任 意 の 地 名 を 入 れると その 場 所 を 表 示 するようにしてみましょ う Geocoder クラスの 利 用 <!DOCTYPE html> <html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% body { height: 100%; margin: 1em; padding: 0px #map_canvas { height: 100% </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map; var geocoder; function initialize() { var latlng = new google.maps.latlng(35.050421, 135.772473); var myoptions = { zoom: 13, center: latlng, disabledefaultui: false, maptypeid: google.maps.maptypeid.roadmap ; map = new google.maps.map(document.getelementbyid("map_canvas"),myoptions); geocoder = new google.maps.geocoder(); function showaddress() { var address = document.getelementbyid('address').value; geocoder.geocode( { 'address': address, function(results, status) { if (status == google.maps.geocoderstatus.ok) { map.setcenter(results[0].geometry.location); var marker = new google.maps.marker({ map: map, position: results[0].geometry.location ); else { alert('geocode was not successful for the following reason: ' + status); ); </script> <title>google map</title> </head> <body onload="initialize()"> <h1>google map</h1> <form> <input id="address" type="textbox" size="60" value=" 京 都 府 京 都 市 "> <input type="button" value=" 表 示 " onclick="codeaddress()"> </form> <hr> <div id="map_canvas" style="width: 500px; height: 33 500px;"></div> </body></html>
4)マーカーをクリックするとウィンドウ 表 示 するようにしてみましょう infowindow.open メソッドの 利 用 script 部 分 の 変 更 二 重 枠 線 の 部 分 を 書 き 加 えましょう if (status == google.maps.geocoderstatus.ok) { map.setcenter(results[0].geometry.location); var marker = new google.maps.marker({ map: map, position: results[0].geometry.location ); var infowindow = new google.maps.infowindow({ content: address ); google.maps.event.addlistener(marker, 'click', function() { infowindow.open(map,marker); ); else { 5)セレクトボックスの 利 用 1 Script 部 分 の 変 更 二 重 枠 線 の 部 分 を 変 更 しましょう function showaddress( no ) { var address = document.getelementbyid("location").options[no].value; 2html 部 分 の 変 更 二 重 枠 線 の 部 分 を 変 更 しましょう <form> <select id="location" onchange="showaddress(this.selectedindex)"> <option value=" 京 都 府 京 都 市 "> 場 所 を 選 択 してください</option> <option value=" 京 都 市 "> 京 都 市 </option> <option value=" 札 幌 市 "> 札 幌 市 </option> <select id="location" onchange="showaddress(this.selectedindex); return <option value=" 福 岡 市 "> 福 岡 市 </option> <option value=" 那 覇 市 "> 那 覇 市 </option> </select> </form> 34
6)マーカーのメッセージをカスタマイズ 1 表 示 するメッセージの 配 列 を 作 成 します Script 部 分 の 変 更 二 重 枠 線 の 部 分 を 書 き 加 えましょう var map; var geocoder; var infostring = new Array( "<h1> 京 都 市 </h1><div><a href='http://www.city.kyoto.lg.jp/'> click!</a></div>", "<h1> 祇 園 祭 </h1><div><a href='http://www.gionmatsuri.jp/'> 京 都 祇 園 祭 </a></div>", "<h1> 雪 まつり</h1><div><a href='http://www.snowfes.com/'>さ っぽろ 雪 まつり 公 式 サイト</a></div>", " 博 多 どんたく", "ゴーヤチャンプルー" ); 2 作 成 したメッセージの 配 列 を infowindow にセットします Script 部 分 の 変 更 二 重 枠 線 の 部 分 を 変 更 しましょう var infowindow = new google.maps.infowindow({ content: infostring[no] ); 7)セレクトボックスで 表 示 する 場 所 表 示 メッセージなどを 変 更 してみましょう 35