実習1

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "実習1"

Transcription

1 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 実 習 問 題 2 実 習 問 題 1(exe1.html)をもとにして 以 下 の 3 行 を 表 示 するようにしましょう Hello こんにちは Bonjour ファイル 名 :exe2.html 2

3 1.プログラムの 基 本 制 御 構 造 1. 順 次 ( 連 続 ) 上 から 順 に 処 理 をすすめる 2. 反 復 ( 繰 返 し) 条 件 や 回 数 によって 処 理 を 繰 り 返 す 3. 選 択 ( 分 岐 ) 条 件 によって 処 理 を 分 岐 する 反 復 ( 繰 返 し) for 文 による 繰 返 し 書 式 ) for( 初 期 化 式 ; 繰 返 し 条 件 式 ; ループの 更 新 式 ) { 繰 り 返 す 処 理 例 ) for( i=0 ; i<5 ; i++ ) { 繰 り 返 す 処 理 反 復 ( 繰 返 し) while 文 による 繰 返 し 書 式 ) while( 繰 返 し 条 件 式 ) { 繰 り 返 す 処 理 例 ) while( i<5 ) { 繰 り 返 す 処 理 選 択 ( 分 岐 ) 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

4 選 択 ( 分 岐 ) switch case 文 による 多 分 岐 書 式 )switch( 条 件 式 または 値 ){ case 値 1: 処 理 break; case 値 2: 処 理 break; default: 処 理 break; 例 )switch( a%3 ){ case 0: 処 理 break; case 1: 処 理 break; default: 処 理 break; 4

5 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

6 実 習 問 題 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 実 習 問 題 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

8 実 習 問 題 9 if 文 を 使 って ランダムに グー チョキ パー のいずれかを 表 示 するプログラムを 作 成 しましょう ファイル 名 :exe9.html <Point> Math.random( ) 0.0 以 上 1.0 未 満 の 擬 似 乱 数 的 に 返 すメソッド Math.floor ( ) 小 数 点 以 下 の 数 値 を 切 り 捨 てるメソッド 例 Math.random( )の 値 Math.random( )*3 Math.floor(Math.random( ) * 3); < 説 明 > i = Math.floor(Math.random( ) * 3); とすると 変 数 i には メソッド 実 行 ごとにラ ンダムに 0,1,2が 入 ります i が0の 場 合 には グー 1の 場 合 には チョキ 2の 場 合 には パー と 画 面 に 表 示 します 実 習 問 題 10 実 習 問 題 9を switch case 文 を 使 ったプログラムに 変 更 しましょう ファイル 名 :exe10.html 8

9 3.オブジェクト 指 向 オブジェクト 指 向 とは 現 実 世 界 の 物 と 同 様 にプログラムを 作 成 できるようにした 考 え 方 オブジェクト 指 向 の 利 点 1.カプセル 化 2. 部 品 の 独 立 性 3. 部 品 の 再 利 用 性 [キーワード] オブジェクト 物 状 態 (プロパティ)とふるまい(メソッド)をもつ プロパティ オブジェクトの 属 性 メソッド オブジェクトに 対 する 動 作 インスタンス 生 成 されたオブジェクト [ 記 述 方 法 ] オブジェクト 名.メソッド( ); オブジェクト 名.プロパティ= 指 定 する 値 ; 例 ) document.write( 'Hello<br>' ); history.back(); document.bgcolor = '#ffff00'; document.write( navigator.appname ); ドキュメントに Hello と 表 示 する ひとつ 前 のページに 戻 る ドキュメントの 背 景 色 を 黄 色 にする ドキュメントにブラウザの 種 類 を 表 示 する 参 考 : 9

10 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 実 習 問 題 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

12 <メソッド> ウィンドウのメソッド window.open(url, name [, style]) ウィンドウの 表 示 新 しいウィンドウを 開 く 引 数 はすべて 省 略 可 能 url 表 示 する URL を 指 定 name ウィンドウの 名 前 style ステータスバーの 表 示 / 非 表 示 などウィンドウに 関 するいろいろなオプション 参 考 リターン 値 :ウィンドウ 名 ダイアログボックスのメソッド 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

13 実 習 問 題 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

14 実 習 問 題 13 confirm メソッドを 利 用 し [OK]ボタンをクリックした 場 合 新 しいウィンドウを 開 くプ ログラムを 作 成 しましょう 新 しくウィンドウ url name style には 何 も 指 定 しない 確 認 メッセージ 新 しいウィンドウを 開 きますか? ファイル 名 :exe13.html <アレンジ> url: name:subwin style: 任 意 (いろいろな 指 定 を 試 してみましょう) 参 照 実 習 問 題 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 実 習 問 題 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

16 実 習 問 題 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

17 4.イベント イベントとは クリックやキー 入 力 などのユーザ 操 作 や メッセージの 受 信 など あるオブジェクトに 対 して 発 生 したアクションをイベントといいます このイベントの 発 生 を 検 知 し 何 らか の 処 理 を 実 行 させる 機 能 をイベントハンドラといいます イベントハンドラ 一 覧 イベントハンドラ イベントが 起 こるタイミング onblur ページやフォーム 要 素 がフォーカスを 失 った 時 onfocus ページやフォーム 要 素 がフォーカスされた 時 onchange フォーム 要 素 の 選 択 入 力 内 容 が 変 更 された 時 onselect テキストが 選 択 された 時 onsubmit フォーム 内 容 を 送 信 しようとした 時 onreset フォーム 内 容 がリセットされた 時 onabort 画 像 の 読 み 込 みを 中 断 した 時 onerror 画 像 の 読 み 込 み 中 にエラーが 発 生 した 時 onload ページや 画 像 の 読 み 込 みが 完 了 した 時 onunload ウィンドウを 閉 じた 時 他 のページに 切 り 替 えた 時 ページをリロード( 更 新 )した 時 onclick 要 素 やリンクをクリックした 時 ondblclick 要 素 をダブルクリックした 時 onkeyup 押 していたキーをあげた 時 onkeydown キーを 押 した 時 onkeypress キーを 押 している 時 onmouseout マウスを 離 した 時 onmouseover マウスを 重 ねた 時 onmouseup クリックしたマウスを 上 げた 時 onmousedown マウスでクリックした 時 onmousemove マウスを 動 かしている 時 17

18 5. 関 数 (function)の 定 義 ひとまとまりの 処 理 に 名 前 をつけて 関 数 として 定 義 することができます この 関 数 を 呼 び 出 すことで 必 要 な 時 に 実 行 したい 処 理 をすることができます 書 き 方 ) function 関 数 名 ( [ 引 数 1 引 数 2 ] ){ 処 理 1 引 数 (パラメータ)は 省 略 可 能 2 1つページ 内 で 同 じ 関 数 名 は 使 用 できません 例 1) function changebgcolor(){ document.bgcolor = '#ff0000'; 例 2) function changebgcolor( col ){ document.bgcolor = col; 18

19 実 習 問 題 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

20 <アレンジ> 1) 文 字 色 を 緑 にする 関 数 changefgcolor を 作 成 し 文 字 色 を 緑 ボタンクリックで 呼 び 出 すように 変 更 しましょう 少 し 暗 い 緑 :# ) 背 景 色 を 白 (#ffffff)にする 関 数 changebgcolorw 文 字 色 を 黒 (#000000)にす る 関 数 changefgcolorb を 作 成 し それぞれ 実 行 できるようにしましょう 3) changebgcolor changefgcolor を 引 数 のある 関 数 に 書 き 換 えましょう 関 数 の 記 述 function changebgcolor( col ){ document.bgcolor = col; 呼 び 出 し 時 の 記 述 <button onclick="changebgcolor( '#ff0000' );"> 背 景 色 を 赤 </button> changefgcolor も 同 様 に 変 更 しましょう ダブルクォーテーション 内 で 文 字 列 を 表 す 場 合 は シングルクォーテーションを 使 用 します 4) 背 景 色 文 字 色 の 変 更 ができるボタンをいくつか 作 成 しましょう 参 考 ) 紹 介 したプログラムでの 色 設 定 赤 系 緑 系 青 系 背 景 色 #ff0000 #00ff00 #0000ff 文 字 色 # # # Web Safe Color 一 覧 表 /カラーチャート 20

21 実 習 問 題 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

22 <アレンジ> 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

23 実 習 問 題 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

24 <アレンジ> 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

25 実 習 問 題 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

26 実 習 問 題 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

27 実 習 問 題 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

28 実 習 問 題 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

29 実 習 問 題 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

30 2) 標 準 体 重 を 計 算 し その 結 果 を 表 示 するようにしましょう id height の 値 を 利 用 して 計 算 し その 結 果 を id std に 表 示 します 3) 肥 満 度 を 計 算 し その 結 果 を 表 示 するようにしましょう id height id weight の 値 を 利 用 して 計 算 し その 結 果 を id bmi に 表 示 し ます 4) 標 準 体 重 肥 満 度 を 小 数 点 第 三 位 を 四 捨 五 入 した 形 式 で 表 示 しましょう Math.round() 小 数 点 以 下 を 四 捨 五 入 するメソッドを 利 用 します 使 用 例 ) a = Math.round( ); a には 5 が 代 入 されます b = Math.round( * 10 ); b には 46 が 代 入 されます c = Math.round( * 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

31 実 習 問 題 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( , ); 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

32 2)いろいろ 変 更 してみましょう 1 地 図 のサイズ 2 表 示 している 位 置 自 分 の 家 を 表 示 するように 変 更 しましょう 経 緯 緯 度 を 調 べる: 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

33 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( , ); 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: px;"></div> </body></html>

34 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

35 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

■新聞記事

■新聞記事 情 報 処 理 C (P.1) 情 報 処 理 C (2016 年 度 ) ホームページ 作 成 入 門 テキストエディタ(メモ 帳 TeraPad など)でHTMLファイルを 作 成 する HTML(Hyper Text Markup Language ) ホームページを 記 述 するための 言 語 のこと テキストエディタの 起 動 (TeraPad の 場 合 ) [スタート]-[プログラム]-[テキストエディタ]-[TeraPad]

More information

目 次 準 備 事 項 ( 前 日 までに 行 っていただきたいこと) 4 まずは 地 図 を 表 示 してみよう 6 Google Mapsの 機 能 の 再 確 認 8 自 分 のサイトに 地 図 を 埋 め 込 む 10 中 心 地 点 にマーカーを 表 示 する 12 近 隣 の 施 設 に

目 次 準 備 事 項 ( 前 日 までに 行 っていただきたいこと) 4 まずは 地 図 を 表 示 してみよう 6 Google Mapsの 機 能 の 再 確 認 8 自 分 のサイトに 地 図 を 埋 め 込 む 10 中 心 地 点 にマーカーを 表 示 する 12 近 隣 の 施 設 に 第 3クールSeason3 WebサービスAPI 勉 強 会 Google Maps API v3の 利 用 目 次 準 備 事 項 ( 前 日 までに 行 っていただきたいこと) 4 まずは 地 図 を 表 示 してみよう 6 Google Mapsの 機 能 の 再 確 認 8 自 分 のサイトに 地 図 を 埋 め 込 む 10 中 心 地 点 にマーカーを 表 示 する 12 近 隣 の 施

More information

コンピュータサイエンス 4. ウェブプログラミング

コンピュータサイエンス 4. ウェブプログラミング 4. Chris Plaintail 2014 1 / 43 1 HTML CSS 2 JavaScript DOM jquery 3 4 PHP SQL PHP SQL 2 / 43 HTML HTML CSS HTML Ajax (Asynchronous JavaScript + XML) PHP SQL 3 / 43 HTML, CSS http, https CSS HTML CSS.html

More information

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

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

More information

JavaScript演習

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

More information

何かの宣言。必要。

<!DOCTYPE html> 何かの宣言。必要。 プロジェクトI/II テーマH( 担 当 : 日 紫 喜 光 良 ) 目 標 地 図 上 に 情 報 を 表 示 することが 解 決 に 役 立 つような 問 題 を 見 つけることができる 問 題 解 決 のために 必 要 な 情 報 をグループメンバーと 協 力 して 収 集 できる Google の 地 図 (Google Maps) 上 に 情 報 を 表 示 することができる 地 理 情

More information

コンピュータサイエンス 1. ウェブの基本

コンピュータサイエンス 1. ウェブの基本 1. Chris Plaintail May 18, 2016 1 / 27 1 2 HTML HTML 3 CSS style 2 / 27 HTML HTML HTML HTML CSS HTML CSS 3 / 27 4 / 27 HTML HTML, CSS HTML, CSS http, https file CSS HTML CSS.html PC file:// PC.html 5 /

More information

untitled

untitled JavaScript HP JavaScript JavaScript Web JavaScript Web JavaScript JavaScript JavaScript HTML HTML HTML JavaScript 1. JavaScript ON/OFF 2. JavaScript 3. 4. 5. 6. 7. 8. 9. 10. if 11. if 12. switch 13. 14.

More information

Microsoft PowerPoint - A07回目②.pptx

Microsoft PowerPoint - A07回目②.pptx 1 コンピュータリテラシーII ( 樋 口 担 当 ) 7 回 目 2 11/14 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I. JavaScript( 画 像 関 係 ) II. 課 題 3 I.JavaScript 1.JavaScriptを 使 用 するためのお 約 束 4 の 間 に

More information

携帯電話でGoogle Mapsを使う

携帯電話でGoogle Mapsを使う PHPのファイルは UTF-8 BOMなしで 保 存 し www.cyaneum.orgのpublic_htmlに 置 く! テーマ 研 究 会 (04/28) Google Mapsを 使 う 政 策 情 報 学 部 渡 辺 恭 人 riho-m@cuc.ac.jp メーリングリスト riho-m-rg10@cuc.ac.jp 資 料 http://www.cuc.ac.jp/rg10/ 前 回

More information

JavaScriptプログラミング入門

JavaScriptプログラミング入門 JavaScript 2015 8 15 1 2 1.1 JavaScript.................................. 2 1.2..................................... 3 1.3 if................................... 4 2 6 2.1.....................

More information

担 当 分 のメニュー 6/21, 6/28: アルゴリズムについて 7/5: 出 張 につき 休 講 7/12, 7/19: プログラミングについて ( 補 講 の 予 定 内 容 は 未 定 です) 講 義 情 報 http://www.fos.kuis.kyotou.ac.jp/~igaras

担 当 分 のメニュー 6/21, 6/28: アルゴリズムについて 7/5: 出 張 につき 休 講 7/12, 7/19: プログラミングについて ( 補 講 の 予 定 内 容 は 未 定 です) 講 義 情 報 http://www.fos.kuis.kyotou.ac.jp/~igaras 全 学 共 通 科 目 工 学 部 専 門 科 目 計 算 機 科 学 概 論 アルゴリズムとプログラミング その3 五 十 嵐 淳 igarashi@kuis.kyoto-u.ac.jp 大 学 院 情 報 学 研 究 科 通 信 情 報 システム 専 攻 担 当 分 のメニュー 6/21, 6/28: アルゴリズムについて 7/5: 出 張 につき 休 講 7/12, 7/19: プログラミングについて

More information

方程式を解いてみよう! C++ から PHP + JavaScriptへ

方程式を解いてみよう! C++ から PHP + JavaScriptへ 方 程 式 を 解 いてみよう! C++ から PHP + HTML + JavaScriptへ 静 岡 理 工 科 大 学 総 合 情 報 学 部 コンピュータシステム 学 科 幸 谷 智 紀 (こうや とものり) http://na-inet.jp/ 今 日 のメニュー 1. コンピュータ 環 境 と 本 日 のゴールの 確 認 2. PHPプログラムを 実 行 してみる 3. HTMLで 自

More information

(1) ,,,,, <> ( ) (/ ) (2) HTML5 (3) HTML (4) html (ja) (5) JavaScript CSS (6)

(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis > HTML HTML HyperText Markup Language (Markup Language) (< > ) 1 sample0.html ( ) html sample0.html // JavaScript

More information

~モバイルを知る~ 日常生活とモバイルコンピューティング

~モバイルを知る~ 日常生活とモバイルコンピューティング Webプログラミングの 基 礎 PHPの 基 礎 (8) (2011/07/06) 政 策 情 報 学 部 渡 辺 恭 人 riho-m@cuc.ac.jp メーリングリスト:riho-m-rg11@cuc.ac.jp: 資 料 ページ: http://www.cuc.ac.jp/~riho-m/rg11/ 前 回 の 課 題 POSTでデータが 送 信 されているかを 確 認 送 信 されていれば

More information

Microsoft PowerPoint - InfPro_I9.pptx

Microsoft PowerPoint - InfPro_I9.pptx 今 日 の 学 習 内 容 エディタ(emacs)を 使 った 基 本 的 なHTML の 書 き 方 Webページの 公 開 HTMLの 基 礎 知 識 HTML(Hyper Text Markup Language)は Webページを 作 るための 必 要 な 記 述 言 語 HTMLにおける 指 定 の 内 容 は: 1. 文 章 (テキスト)に 対 する 役 割 2. 文 章 やイメージなどのページ

More information

7回目(JavaScript1)

7回目(JavaScript1) JavaScript 演 習 1 1 1 回 目 JavaScript 演 習 の 概 要 JavaScriptの 概 要 開 発 環 境 の 整 備 JavaScriptの 基 本 文 法 2 回 目 イベント 処 理 3 回 目 DOM (Document Object Model) 2 JavaScript 演 習 1の 内 容 JavaScriptとは JavaScriptの 開 発 環 境

More information

m_sotsuron

m_sotsuron iphone Web 0848066 1. 1 1 1 2 iphone 2 3 2 4 3 2. 3 1 3 2 iphone Web 6 3 HTML 10 4 CSS 12 5 iphone 14 6 15 7 16 8 ipad 18 3. 22 iphone Web Web 2 iphone Web iphone iphone Web iphone Web PC 1 2000 iphone

More information

html_text

html_text HTML の 基 礎 2015.12.15 1. HTML ファイルの 構 成 1.1. HTML とは? Web ブラウザでホームページを 表 示 するためには,HTML(Hyper Text Markup Language)と 呼 ぶ 言 語 で 記 述 す る 必 要 が あ り ま す.HTML 形 式 のファイルは < と > で 囲 んだ 予 約 語 (タグ)を 含 むテキストファイルで,Web

More information

第9回

第9回 第 9 回 2016 年 7 月 16 日 情 報 教 育 演 習 II 第 9 回 (1) CSS(4) (1) 今 回 の 課 題 (2) リストの 記 号 や 番 号 の 設 定 (2) クラスの 利 用 (2) クラスとは (2) クラスを 使 った 設 定 (3) CSSファイルでの 設 定 (3) HTMLファイルでの 利 用 (3) クラスの 利 用 例 (1) (3) クラスの 利

More information

CSSの基礎

CSSの基礎 Webページの 見 た 目 を 定 義 する 視 覚 のための 言 語 CSS ファイル 視 覚 表 現 関 連 付 ける HTML ファイル 論 理 構 造 CSSの 基 礎 CSSの 記 述 方 法 基 本 的 な 形 セレクタ{ プロパティ1: 値 ; プロパティ2: 値 ; セレクタの 種 類 タイプセレクタ CSSの 記 述 HTML CSSを 適 用 する 箇 所 CSSを 記 述 する

More information

第3回HP講習会資料ver1.2(2007.9.20)

第3回HP講習会資料ver1.2(2007.9.20) 1.はじめに 第 3 回 技 術 センター 職 員 向 けHP 講 習 会 では スタイルシートの 基 礎 として CSSを 使 った Webページを 作 成 していきます HTMLだけでは 出 来 ないCSSを 用 いたレイアウトを 分 かり 易 く 体 験 してもらえるように 今 回 はCSSの 中 でもクラスやIDといった 概 念 を 省 いています 2.スタイルシートとは? スタイルシート

More information

「V-Sido CONNECT RC」 Raspberry Pi 2との連係方法

「V-Sido CONNECT RC」 Raspberry Pi 2との連係方法 アスラテック 株 式 会 社 V-Sido CONNECT RC Raspberry Pi 2との 連 係 方 法 目 次 1. はじめに 1-1. 本 マニュアルの 概 要 p.3 1-2. 使 用 する 機 材 など p.4 1-3. 各 機 器 の 接 続 イメージ p.5 1-4. JavaScriptによる 開 発 環 境 の 概 略 p.6 2. Raspberry Pi 2を 利 用

More information

サーバサイドスクリプトPHPを実感しよう

サーバサイドスクリプトPHPを実感しよう 第 3 講 サーバサイドスクリプト PHP を 実 感 しよう! クライアントサイドでは HTML に 埋 め 込 んだ(あるいは 別 ファイルから HTML に 読 み 込 まれた)JavaScript によって さまざまな 処 理 や 動 的 ページの 生 成 を 行 えることは すで に 第 3 講 までで 学 習 しました しかし HTML と JavaScript の 組 合 せではどうしても

More information

Microsoft PowerPoint - kyoin15-naka.pptx

Microsoft PowerPoint - kyoin15-naka.pptx ホームページ 作 成 技 術 の 基 礎 と 応 用 動 的 ホームページの 作 成 九 州 産 業 大 学 情 報 科 学 部 情 報 科 学 科 仲 隆 今 日 の 講 習 会 用 ページ http://www.is.kyusan-u.ac.jp/~naka/kyoin/ 演 習 で 作 成 するプログラムは 全 て 掲 載 している クリックすれば 動 く ソースを 表 示 すればプログラムを

More information

アスラテック株式会社 会社案内

アスラテック株式会社 会社案内 JavaScript SDK for V-Sido CONNECT 利 用 の 手 引 き Mac 編 アスラテック 株 式 会 社 目 次 1. はじめに 1-1. 本 マニュアルの 概 要 p.3 1-2. 使 用 する 機 材 など p.4 1-3. 各 機 器 の 接 続 構 成 と 開 発 イメージ p.5 2. 初 期 設 定 とVSidoConn4Macの 導 入 2-1. Bluetoothのペアリング

More information

(Microsoft Word - \203v\203\215\203O\203\211\203~\203\223\203O1new.doc)

(Microsoft Word - \203v\203\215\203O\203\211\203~\203\223\203O1new.doc) 1.プログラム 言 語 1-1 プログラム 言 語 の 種 類 プログラム 言 語 は その 言 語 が 目 的 とする 処 理 別 に 基 本 的 な 記 述 概 念 が 存 在 する プログ ラム 言 語 の 種 類 ごとに 記 述 的 特 徴 や 生 産 性 が 異 なる Program 言 語 低 水 準 言 語 マシン 語 アセンブラ 高 水 準 言 語 手 続 き 型 言 語 FORTRAN

More information

第 10 問 スマートフォンはパソコンとは 異 なり コンピュータウイルスなどの 不 正 プログラムの 侵 入 感 染 フィッシングなど の 詐 欺 に 遭 うことがないため セキュリティソフトをスマートフォンに 導 入 する 必 要 はない 2. 以 下 の 設 問 に 答 えよ 第 11 問 C

第 10 問 スマートフォンはパソコンとは 異 なり コンピュータウイルスなどの 不 正 プログラムの 侵 入 感 染 フィッシングなど の 詐 欺 に 遭 うことがないため セキュリティソフトをスマートフォンに 導 入 する 必 要 はない 2. 以 下 の 設 問 に 答 えよ 第 11 問 C 1. 各 設 問 において 正 しいものは1を 間 違 っているものは 2 を 該 当 設 問 の 解 答 欄 に 記 せ 第 1 問 HTML5 では タグの 省 略 は 一 切 認 められていない 第 2 問 インターネット 上 のすべてのコンピュータは イーサネットで 繋 がっている 第 3 問 新 規 にウェブサイトを 公 開 する 際 は HTML ドキュメントをアップロードした 後 に

More information

おすすめページ

おすすめページ 第 6 章 フォーム コントロールを 作 成 する 作 成 した 内 に お 名 前 や ご 意 見 ご 要 望 などの 入 力 フォームを 作 成 していきま す 最 後 に 送 信 ボタンを 設 置 します テキストフィールドを 作 成 する 名 前 を 入 力 できる 欄 をテキストフィールドで 作 成 します テキストフィールドを 作 成 すると 同 時 にラベ ルのテキストも

More information

ホームページ制作スターターズ

ホームページ制作スターターズ HTML タグ はじめての 方 ガイド Ver1.0 1 < 目 次 > 1ホームページ 構 造 2HTML タグ 3スタイルシート Copyright ナレッジコーディネーター All Rights Reserved. 2 第 1 章 ホームページ 構 造 Copyright ナレッジコーディネーター All Rights Reserved. 3 1HTMLとは ウェブ 上 の 文 書 を 記 述

More information

タグの 内 側 で 関 数 を 定 義 してタグ 側 で 実 行 することもできます JavaScript サンプル function write(str) { document.write(str); } write('hello World!'); 上 例 のように

タグの 内 側 で 関 数 を 定 義 してタグ 側 で 実 行 することもできます <TITLE>JavaScript サンプル</TITLE> function write(str) { document.write(str); } write('hello World!'); 上 例 のように 情 報 メディアとインターネット 授 業 資 料 (2011.7.4) 1.HTML の 基 本 HTML ファイルというのは 例 えば 以 下 のような 内 容 のテキストファイルです 拡 張 子 を.html また は.htm とするのが 普 通 で Web ブラウザで 読 み 込 まれて 中 身 の 表 示 が 行 われます Simple HTML File Hello

More information

1/2

1/2 札 幌 学 院 大 学 社 会 情 報 学 部 AO 入 試 課 題 用 テキスト (2) 1 札 幌 学 院 大 学 社 会 情 報 学 部 AO 入 試 課 題 用 テキスト HTMLの 基 礎 知 識 (2) 1 画 像 の 表 示 HPに 画 像 を 表 示 させてみる まず HTML 文 書 と 同 じフォルダ 内 にJPEGファイル( 拡 張 子.jpg )を1 個 準 備 する ( 画

More information

日 付 更 新 者 内 容 2013/11/29 月 橋 新 規 作 成 2

日 付 更 新 者 内 容 2013/11/29 月 橋 新 規 作 成 2 オープンデータマップ (SVG 地 図 操 作 用 スクリプト) デモ コンテンツ 操 作 ガイド 1 日 付 更 新 者 内 容 2013/11/29 月 橋 新 規 作 成 2 目 次 1. デモ コンテンツ 操 作 ガイド... 4 Google Chrome の 設 定... 4 コンテンツのロード... 4 アイコン 等 について... 5 POIの 設 定... 7 POI を CSV

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション ホームページの 基 礎 IPアドレス インターネットへの 接 続 に 必 要 なネットワーク 上 のアドレス こ のアドレスは0から255までの4 組 に 数 字 で 表 されます ( 例 192.168.1.1) URL IPアドレスはホームページの 場 所 を 示 す 住 所 です たとえば 220.133.0.1に 接 続 しようとして ブラウザーのURLに 220.133.0.1と 入 れればいいのですが

More information

HTMLとメタデータ

HTMLとメタデータ HTMLとメタデータ http://www2.mmc.atomi.ac.jp/~artnavi1/lib rarysci/index.htmlを 例 にHTMLを 理 解 する IPアドレス ドメイン 名 http://www2.mmc.atomi.ac.jp httpとはhyper Text Transfer Protocol( 何 でもリンクできるテ キストの 通 信 手 順 : 説 明 JPNIC)

More information

あいち電子自治体ガイドライン(第1章)

あいち電子自治体ガイドライン(第1章) 1-1 HTML/XHTML 5 1-2 h 6 1-3 TITLE 7 1-4 8 1-5 9 1-6 10 1-7 11 1-8 12 2-1 13 2-2 14 2-3 15 2-4 16 2-5 17 2-6 18 2-7 19 2-8 20 3-1 21 3-2 22 3-3 23 3-4 24 3-5 25 3-6 4 26 3-7 27 3-8 28 - i - 4-1 29 4-2

More information

教材ドットコムオリジナル教材

教材ドットコムオリジナル教材 第 1 章 ドキュメントオブジェクトを 使 って JavaScriptで 文 字 を 表 示 させよう 第 1 節 JavaScriptって 何!? JavaScriptとはHTMLファイルに 埋 め 込 むスクリプト(プログラムよりは 若 干 難 易 度 が 低 いプログラムという 意 味 でよく 使 われる)である HTMLでは タグと 呼 ばれる 命 令 をプログラミングしていき レイアウトやデザイン

More information

2016年COM実験_JavaScript演習資料

2016年COM実験_JavaScript演習資料 COM 実 験 JavaScript 演 習 問 題 2016 年 7 月 14 日 ( 木 ) 山 口 高 平 はじめに 開 発 環 境 の 準 備 JavaScriptの 復 習 演 習 問 題 の 概 要 演 習 問 題 1 演 習 問 題 2 演 習 問 題 3 演 習 問 題 4 演 習 問 題 5 レポート 課 題 の 説 明 目 次 はじめに 演 習 を 通 じてHTMLとJavaScriptの

More information

2 1 6 2 7 2.1....................................... 7 2.2.......................................... 7 3 9 3.1.......................................

2 1 6 2 7 2.1....................................... 7 2.2.......................................... 7 3 9 3.1....................................... 23 Travel M 20 2 1 6 2 7 2.1....................................... 7 2.2.......................................... 7 3 9 3.1....................................... 9 3.1.1....................................

More information

Microsoft PowerPoint - 2016_2b-DOM.pptx

Microsoft PowerPoint - 2016_2b-DOM.pptx < 練 習 2-11> DOMの 空 白 ノード 2_nodeVisit の 実 行 結 果 ( 前 ページ)から,HTML をルート 要 素 とするDOMの 木 構 造 を 示 しなさい ただし, 空 白 ノードは 空 白,その 他 のテキストノードは テキスト とすること HTML DOMによる 文 書 データの 参 照 と 変 更 DOMツリー 内 のノード 参 照 相 対 位 置 によるノード

More information

HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパー

HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパー Web ページ 作 成 2011/ 5/31 Web ページとは IT 用 語 事 典 e-words より Web ページ web page 読 み 方 : ウェブページ WWW システムを 使 ってインターネット 上 で 公 開 されている 文 書 Web ブラウザに 一 度 に 表 示 されるデータのまとまりで テキストデータや HTML によるレイアウト 情 報 文 書 中 に 埋 め 込

More information

~モバイルを知る~ 日常生活とモバイルコンピューティング

~モバイルを知る~ 日常生活とモバイルコンピューティング Webプログラミングの 基 礎 PHPの 基 礎 (6) ~POST (2011/06/22) 政 策 情 報 学 部 渡 辺 恭 人 riho-m@cuc.ac.jp メーリングリスト:riho-m-rg11@cuc.ac.jp: 資 料 ページ: http://www.cuc.ac.jp/~riho-m/rg11/ 入 力 された 文 字 を 受 け 取 りPOSTで 送 信 する 部 分 (post.htm)

More information

<4D6963726F736F667420506F776572506F696E74202D20434D53837D836A83858341838B81698C888DCF8ED29770816A2E707074205B8CDD8AB78382815B83685D>

<4D6963726F736F667420506F776572506F696E74202D20434D53837D836A83858341838B81698C888DCF8ED29770816A2E707074205B8CDD8AB78382815B83685D> 茨 城 県 筑 西 市 CMS マニュアル ( 決 裁 者 用 ) 第 版 -CMS - 目 次 ログイン P3 メイン P4 課 係 P6 アカウント P 階 層 P4 ページ P7 お 知 らせ P カレンダー P6 FAQ P30 メールフォーム P34 関 連 書 類 P45 マップ P48 掲 示 板 P5 ログアウト P55 付 録 表 示 順 P56 付 録 公 開 P57 付 録 3

More information

H10-3 placeholder 未 入 力 時 placeholder title +placeholder + 各 input typeの 読 み 上 げ 例 tit

H10-3 placeholder 未 入 力 時 <textarea title=title  placeholder=placeholder ></textarea> placeholder title +placeholder + 各 input typeの 読 み 上 げ 例 tit HTML H1-1 title - あり - ページタイトル + ページ 遷 移 時 に 読 み 上 げる H1-2 - なし なし 読 み 上 げしない H2 h1...h6 みだし + H3 em - タグ 前 後 の がある 場 合 は 一 拍 おいて 読 まれる H4 strong

More information

So-Cool CART マニュアル

So-Cool CART マニュアル So-Cool CART Ver..0 補 足 資 料 : 埋 め 込 み 機 能 タグ 一 覧 COPYRIGHT 008 Japan Area Code TV Co.,Ltd. ALL RIGHTS RESERVED. 埋 め 込 み 機 能 タグの 設 置 準 備 埋 め 込 み 機 能 タグ 商 品 ページに [カートに 入 れる]ボタン や 商 品 検 索 フォーム などの 機 能 を 埋

More information

目 次 1. 携 帯 対 応 登 録 ページ... 2 1-1 機 能 概 要... 2 1-2 設 定 方 法... 3 2. 登 録 情 報 変 更 ページ... 4 2-1 機 能 概 要... 4 2-2 設 定 方 法... 4 3. 登 録 情 報 変 更 ページ + 配 信 再 開..

目 次 1. 携 帯 対 応 登 録 ページ... 2 1-1 機 能 概 要... 2 1-2 設 定 方 法... 3 2. 登 録 情 報 変 更 ページ... 4 2-1 機 能 概 要... 4 2-2 設 定 方 法... 4 3. 登 録 情 報 変 更 ページ + 配 信 再 開.. PowerStepMail Regist Manual パワーステップメール レジストマニュアル 2015/03/10 改 定 株 式 会 社 ビズクリエイト 目 次 1. 携 帯 対 応 登 録 ページ... 2 1-1 機 能 概 要... 2 1-2 設 定 方 法... 3 2. 登 録 情 報 変 更 ページ... 4 2-1 機 能 概 要... 4 2-2 設 定 方 法... 4 3.

More information

68 69

70 71 72 73

68 <td valign=top class=c8> 69 <p class=c13><a name=マーク0><span class=c9>⓪</span></a></p> 70 </td> 71 </tr> 72 <tr> 73 <td valign=top class ページ 内 のリンクでページ 内 に 移 動 の html のページの 追 加 方 法 三 宅 節 雄 Html 文 書 を TeraPad で 開 きます 1 2

More information

Taro-01_Web_html自習テキストⅠ.

Taro-01_Web_html自習テキストⅠ. 平 成 18 年 度 学 校 Web ページ 作 成 研 修 講 座 HTML の 基 礎 Ⅰ ~メモ 帳 で Web ページを 作 ろう!!~ 今 回 の 勉 強 内 容 メモ 帳 /ファイルの 保 存 / 文 字 入 力 /ページタイトルの 設 定 文 字 色 の 設 定 / 文 字 サイズの 設 定 / 水 平 線 /リンクの 設 定 岩 手 県 立 総 合 教 育 センター 情 報 教 育

More information

練 習 問 題 1. dataフォルダのq1フォルダ 内 のindex.htmlでブラウザで 正 しく 表 示 できない 状 態 にあ る 画 像 を 正 常 に 表 示 できるようにソースを 修 正 しなさい 修 正 したindex.htmlファイルなどは デスクトップのwdフォルダ 内 にt1と

練 習 問 題 1. dataフォルダのq1フォルダ 内 のindex.htmlでブラウザで 正 しく 表 示 できない 状 態 にあ る 画 像 を 正 常 に 表 示 できるようにソースを 修 正 しなさい 修 正 したindex.htmlファイルなどは デスクトップのwdフォルダ 内 にt1と ウェブデザイン 技 能 検 定 3 級 実 技 練 習 問 題 本 練 習 問 題 の 著 作 権 は 当 協 会 に 帰 属 します 協 会 の 提 供 する 一 部 又 は 全 ての 練 習 問 題 を 無 断 で 複 写 転 載 営 利 利 用 することを 禁 止 します 内 容 解 答 その 他 一 切 のお 問 い 合 わせは 受 け 付 けておりません 本 練 習 問 題 と 実 際 の

More information

文 書 構 造 とスタイル

文 書 構 造 とスタイル 第 4 回 の 内 容 文 書 構 造 とスタイル CSSの 基 礎 図 表 の 利 用 文 書 構 造 とスタイル 自 己 紹 介 のHTML 文 書 放 送 太 郎 の 自 己 紹 介

More information

スライド 1

スライド 1 第 7 講 観 光 情 報 論 2008 年 6 月 4 日 Style Sheet (CSS) 宮 国 薫 子 1 スタイルシート (CSS) CSSとは(Cascading Style Sheets) 本 来 ホームページにデザインを 加 える 機 能 の すべて 教 科 書 で 言 う スタイルシート とはCSSのことを 指 す CSSを 使 うと Page 106 にあるようにホーム ページの

More information

07_経営論集2010 小松先生.indd

07_経営論集2010 小松先生.indd 19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT

More information

目 次 1. はじめに... 2 2. Cform をサーバーにアップロードする... 3 3. カレンダー 予 約 システムを 表 示 する... 6 直 接 表 示 の 場 合... 6 Javascript での 埋 め 込 み 表 示... 7 Iframe での 埋 め 込 み 表 示..

目 次 1. はじめに... 2 2. Cform をサーバーにアップロードする... 3 3. カレンダー 予 約 システムを 表 示 する... 6 直 接 表 示 の 場 合... 6 Javascript での 埋 め 込 み 表 示... 7 Iframe での 埋 め 込 み 表 示.. Cform カレンダー 予 約 システム 機 能 解 説 マニュアル 目 次 1. はじめに... 2 2. Cform をサーバーにアップロードする... 3 3. カレンダー 予 約 システムを 表 示 する... 6 直 接 表 示 の 場 合... 6 Javascript での 埋 め 込 み 表 示... 7 Iframe での 埋 め 込 み 表 示... 9 4. 予 約 申 込 管

More information

メディアプロジェクト 演 習 1 HTML 講 座 発 展 編 4 a['cat'] = ' 猫 '; a['mouse'] = ' 鼠 '; // 指 定 された 要 素 の 値 を 表 示 document.write("dog の 日 本 語 は " + a['dog'] + " で す.")

メディアプロジェクト 演 習 1 HTML 講 座 発 展 編 4 a['cat'] = ' 猫 '; a['mouse'] = ' 鼠 '; // 指 定 された 要 素 の 値 を 表 示 document.write(dog の 日 本 語 は  + a['dog'] +  で す.) 2015 年 度 メディアプロジェクト 演 習 1 HTML 講 座 発 展 編 4 ~ JavaScript の 応 用 立 命 館 大 学 情 報 理 工 学 部 メディア 情 報 学 科 1 プログラミング 言 語 としての JavaScript HTML 講 座 発 展 編 3 の 2.2 節 でも 述 べたように, JavaScript は C 言 語 などと 同 じように, 関 数 や

More information

(Microsoft Word - \203X\203\215\203b\203g\203}\203V\203\223.doc)

(Microsoft Word - \203X\203\215\203b\203g\203}\203V\203\223.doc) JavaScript (スロットマシン) ここでは JavaScript を 使 ってスロットマシンを 作 ります スロットマシンを 作 る と 言 っても そう 難 しいものではありません 3 枚 のボードの 数 字 を0から9まで 順 番 に 表 示 して ボタンをクリックすると それぞ れの 札 の 動 きが 止 まり その 結 果 によってメッセージが 異 なる このようなものを 作 りましょう

More information

目 次 0. 計 測 タグ 設 置 の 基 本 3 このマニュアルについて... 4 計 測 タグ 設 置 の 流 れ... 5 必 ず 確 認 していただきたいこと... 6 1. 計 測 タグの 種 類 7 入 口 ページタグ... 9 コンバージョンタグ... 10 イベント 計 測 用 タグ

目 次 0. 計 測 タグ 設 置 の 基 本 3 このマニュアルについて... 4 計 測 タグ 設 置 の 流 れ... 5 必 ず 確 認 していただきたいこと... 6 1. 計 測 タグの 種 類 7 入 口 ページタグ... 9 コンバージョンタグ... 10 イベント 計 測 用 タグ 計 測 タグの 設 置 と 動 作 確 認 方 法 このマニュアルの 対 象 となる 方 ウェブアンテナの 計 測 タグをサイトに 設 置 するご 担 当 の 方 (HTML に 関 する 知 識 をある 程 度 お 持 ちの 方 を 想 定 ) このマニュアルでわかること 計 測 タグの 設 置 方 法 や 注 意 点 コンバージョン 属 性 を 計 測 するための 実 装 例 計 測 タグの 動

More information

/ 0/0/ : 実 結 果 HTMLファイルを 表 します 下 図 の 画 が 表 されます " 出 し"の 部 分 をクリックすると"コンテンツですよ "の 字 が 表 されます もう 度 " 出 し"をクリックすると"コンテンツですよ "の 字 が 非 表 になります 折 りたたみパネルの 基

/ 0/0/ : 実 結 果 HTMLファイルを 表 します 下 図 の 画 が 表 されます  出 しの 部 分 をクリックするとコンテンツですよ の 字 が 表 されます もう 度  出 しをクリックするとコンテンツですよ の 字 が 非 表 になります 折 りたたみパネルの 基 / 0/0/ : [CSS] 折 りたたみ 可 能 なパネルの 作 成 - CSSのみを 利 した 折 りたたみ 領 域 / アコー ディオンパネル このページのタグ:[CSS] [アコーディオンパネル] 新 着 記 事 覧 タグ 覧 トップページ ipentec.com CSSのみを 利 した 折 りたたみ 可 能 なパネル( 折 りたたみ 可 能 領 域 )を 実 現 するコードを 紹 介 します

More information

クリック クリック リンクを 張 るためのタグ タグ ~ リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク フォルダ 内 のファイルに

クリック クリック リンクを 張 るためのタグ タグ <a href= リンク 先 のURL ファイル 名 > ~ </a> リンク 先 のURLやファイル 名 に 対 してリンクを 張 る 同 じフォルダ 内 のファイルにリンク <a href= hoge.html > フォルダ 内 のファイルに Webプログラミング プログラミング1 HTML+CSS (5) (2 章 ) 2013/5/22( 水 ) 演 習 室 のPCのハードディスクには 演 習 で 作 成 したデータは 保 管 できません 各 PCの ネットワーク 接 続 ショートカットからメディア 情 報 セ ンターのサーバーにアクセスしてください 演 習 名 使 用 するフォルダ 演 習 1 Z: Webプログラミング1 20130522

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション HTMLガイダンス 1 HTMLを 用 いたUI 設 定 2 色 々な 見 え 方 で 画 面 に 表 示 されるWebページ 全 て 文 字 /キャラクタで 表 現 されたデータの 集 まり HTML(Hyper Text Markup Language) パソコン 等 のインターネット 端 末 のブラウザソフトで 文 書 情 報 を 表 示 するときに 用 いられるプログラム 言 語 の 一 種

More information

目 次 第 1 章 GC スクリプトとは?... 4 第 2 章 JavaScript と GC スクリプトの 違 いは?... 6 2-1 jquery とは?... 6 2-2 jquery オブジェクトを 作 ってみよう... 6 2-3 jquery オブジェクトを 既 存 の 要 素 に

目 次 第 1 章 GC スクリプトとは?... 4 第 2 章 JavaScript と GC スクリプトの 違 いは?... 6 2-1 jquery とは?... 6 2-2 jquery オブジェクトを 作 ってみよう... 6 2-3 jquery オブジェクトを 既 存 の 要 素 に GC スクリプト 利 用 ガイド 第 1 版 最 終 更 新 日 2016/03/31 目 次 第 1 章 GC スクリプトとは?... 4 第 2 章 JavaScript と GC スクリプトの 違 いは?... 6 2-1 jquery とは?... 6 2-2 jquery オブジェクトを 作 ってみよう... 6 2-3 jquery オブジェクトを 既 存 の 要 素 に 追 加 してみよう...

More information

目 次 章 ポータル 画 面.... ポータル 画 面 のレイアウト....2 地 図 を 選 択 する...2 2 章 基 本 操 作...3 2. 画 面 構 成...3 2.2 ヘルプを 表 示 する...4 2.3 地 図 を 移 動 する...4 2.4 地 図 を 拡 大 / 縮 小 す

目 次 章 ポータル 画 面.... ポータル 画 面 のレイアウト....2 地 図 を 選 択 する...2 2 章 基 本 操 作...3 2. 画 面 構 成...3 2.2 ヘルプを 表 示 する...4 2.3 地 図 を 移 動 する...4 2.4 地 図 を 拡 大 / 縮 小 す 地 図 情 報 とよなか 操 作 手 順 書 Copyright (C) Toyonaka City, All rights reserved. 目 次 章 ポータル 画 面.... ポータル 画 面 のレイアウト....2 地 図 を 選 択 する...2 2 章 基 本 操 作...3 2. 画 面 構 成...3 2.2 ヘルプを 表 示 する...4 2.3 地 図 を 移 動 する...4

More information

HTML文章作成

HTML文章作成 HTML 文 章 作 成 Web ページは HTML(Hyper Text Markup Language) という 言 語 を 使 っ て 欠 かれた HTML ファイルでできています ここでは 簡 単 な HTML 文 章 を 実 際 につくっていきます 参 考 文 献 :エクスナレッジ HTML とスタイルシートによる Web サイト 作 成 術 1. 簡 単 なホームページをつくりましょう

More information

Microsoft Word - chap5.doc

Microsoft Word - chap5.doc 第 5 章 フォームと PHP プログラム [1] PHP プログラムのデバッグ プログラムがうまく 動 作 しない 場 合 原 因 を 見 つけて 修 正 するデバッグが 必 要 となる PHP に 限 らず 一 般 に CGI のプロ グラムのデバッグは 結 構 面 倒 になる と いうのは 単 独 のプログラム(つまり CGI ではなくて 普 通 の Java や C のプログラ ムと 同 じようにして)として

More information

Microsoft Word - Excel2_Excel関数_2013.docx

Microsoft Word - Excel2_Excel関数_2013.docx 表 計 算 ソフト(Excel) 講 習 会 テキスト 関 数 編 明 治 大 学 教 育 の 情 報 化 推 進 本 部 目 次 1. 関 数 の 入 力... 3 1.1. 関 数 とは... 3 1.2. 関 数 の 基 本 構 造... 4 1.3. 関 数 の 入 力 方 法... 5 2. よく 使 う 関 数... 7 2.1. SUM 関 数... 7 2.2. AVERAGE 関

More information

report for biz 顧客分析レポートAPI ver 1.00 仕様書

report for biz 顧客分析レポートAPI ver 1.00 仕様書 report for biz API 仕 様 書 顧 客 分 析 レポート API ver1.00 技 研 商 事 インターナショナル 株 式 会 社 作 成 日 :2015/06/24 改 訂 履 歴 改 訂 履 歴 日 付 バージョン 更 新 内 容 2015/06/24 1.00 初 版 第 1 章 概 要... 4 1 本 サービスのコンセプト... 4 1-1 r4b(report 4 biz)とは...

More information

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 XHTML DOM JavaScript 2 2008 7 1 1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 2.1.2 HTML.........................

More information

4 chop($line); 5 $line =~ s/ r$//; 6 unshift(@output,$line); 7 } 8 print join(" n",@output); 1 行 目 は Perl インタープリターがあるディレクトリを 明 示 する インタープリターとは 書 かれたプロ

4 chop($line); 5 $line =~ s/ r$//; 6 unshift(@output,$line); 7 } 8 print join( n,@output); 1 行 目 は Perl インタープリターがあるディレクトリを 明 示 する インタープリターとは 書 かれたプロ 2014.6.17 医 療 者 のための 情 報 技 術 入 門 第 8 回 プログラムがはたらくしくみを 学 ぶ(1) 日 紫 喜 光 良 概 要 1.はじめに- 具 体 例 から- -------------ここまで-------------- 2. 足 りないものは 借 りてくる-Javascript のライブラリ 3. 仕 事 は 人 にやらせる-サーバーとブラウザの 役 割 分 担 1.はじめに-

More information

4 Java へようこそ の 画 面 が 表 示 されるので インストール をクリックします 5 Java セットアップ 進 行 中 画 面 が 表 示 されます 6 Java セットアップ 完 了 画 面 が 表 示 されるので 閉 じる をクリックします インストール が 完 了 しました 7

4 Java へようこそ の 画 面 が 表 示 されるので インストール をクリックします 5 Java セットアップ 進 行 中 画 面 が 表 示 されます 6 Java セットアップ 完 了 画 面 が 表 示 されるので 閉 じる をクリックします インストール が 完 了 しました 7 NPO 法 人 いきいきネットとくしま 第 95 回 定 例 勉 強 会 森 の 日 2012 年 5 月 23 日 担 当 : 今 柴 有 美 子 折 り 紙 飛 行 機 を 飛 ばして 遊 ぼう 折 り 紙 飛 行 機 を 飛 ばして 写 真 の 動 画 を 楽 しむためには Java という 無 料 のフリーソフ トが 必 要 です Java とは 1 ネットワークを 通 じて Web プラウザにダウンロードされ

More information

0序文‐1章.indd

0序文‐1章.indd 本 書 に 記 載 されたURL 等 は 執 筆 時 点 でのものであり 予 告 なく 変 更 される 場 合 があります 本 書 の 使 用 ( 本 書 のとおりに 操 作 を 行 う 場 合 を 含 む)により 万 一 直 接 的 間 接 的 に 損 害 が 発 生 し ても 出 版 社 および 著 者 は 一 切 の 責 任 を 負 いかねますので あらかじめご 了 承 下 さい Microsoft

More information

e-class

e-class e-class ユーザマニュアル v10.01(jun. 2016) 簡 易 マニュアル 目 次 ようこそ e-class へ 3 e-class を 利 用 する 前 に 3 e-class にログインする 3 表 示 する 言 語 を 切 り 替 える 4 スマートフォンからログインする 5 e-class をログアウトする 5 科 目 に 参 加 する 6 科 目 選 択 について 6 利 用

More information

1" 3 3 4 5 9 15 16 17 18 20 22 22

1 3 3 4 5 9 15 16 17 18 20 22 22 - - 2014 8 TEL 03-4455-7453 FAX 03-6740-1754 Mail tamago-con@temona.co.jp 1" 3 3 4 5 9 15 16 17 18 20 22 22 2" 2 23 24 25 27 28 29 30 31 32 33 34 35 42 47 STEP1 3" 4" STEP2 URL URL 5" STEP3 2 STEP4 jpg

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 操 作 マニュアル( 事 業 者 編 ) 平 成 24 年 10 月 SHIFTで 作 成 されるホームページ: 構 成 SHIFT 作 成 メニュー HPイメージ お 問 合 わせ フォーム BtoBページ 掲 示 板 メインページ 商 品 ページ 電 子 決 算 公 告 ページ 1 登 録 画 面 への 入 り 方 (コミュニティ 利 用 の 場 合 ) 商 工 会 HP(イメージ) ログイン

More information

1 1 1........................ 1 2........................ 1 3 JavaScript..................... 2 4................... 2 2 3 1 Python..................

1 1 1........................ 1 2........................ 1 3 JavaScript..................... 2 4................... 2 2 3 1 Python.................. JavaScript 0648016 1 1 1........................ 1 2........................ 1 3 JavaScript..................... 2 4................... 2 2 3 1 Python.................. 3 2......................... 4 3..........................

More information

Page 2 of 7 フォーム 部 品 フォーム
内 のテキスト 入 力 や 実 行 ボタンなどの 各 フォーム 部 品 を 表 示 します 下 記 の type 属 性 の 値 によって 見 栄 えも 動 作 も 異 なる 部 品 となります type 属 性 text

Page 2 of 7 <input>フォーム 部 品 フォーム<form> 内 のテキスト 入 力 や 実 行 ボタンなどの 各 フォーム 部 品 を 表 示 します 下 記 の type 属 性 の 値 によって 見 栄 えも 動 作 も 異 なる 部 品 となります type 属 性 text Page 1 of 7 ホームページ 作 成 Note HOME HPビルダー HTML/CSS CGI/Perl ez-html WebDesign Link SiteMap HTML 入 力 フォーム WebブラウザにHTMLファイルを 表 示 させる 通 常 の 静 的 なページ に 対 し メールフォ ーム 掲 示 板 ブログなどのようにWebブラウザから 入 力 された 要 求 に 対 して

More information

1

1 目 次 はじめに... 2 音 声 ブラウザの 読 み 上 げ 手 順... 2 音 声 ブラウザへの 具 体 的 な 対 応 方 法... 3 1. 基 本 言 語 3 2.スペースの 挿 入 と 改 行 (タグ)の 挿 入 3 3. 取 り 消 し 線 4 4. 記 号 などの 表 記 4 5. 英 単 語 5 6. 数 字 5 7.イメージマップ 6 8. 表 組 み 6 9.PDF

More information

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 1 11 13 2 11 27 3 12 11 HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 WWW(World Wide Web) HTML(HyperText Markup Language) HTML HTML HTML HTML - 1 - .1 HTML (V)(C) HTML - 2 - HTML HTML OS Windows 2.1 HTML

More information

(Microsoft PowerPoint - \225\275\220\25423\224N\223xHTML5\225\224\211\357.ppt)

(Microsoft PowerPoint - \225\275\220\25423\224N\223xHTML5\225\224\211\357.ppt) 平 成 23 年 度 技 術 研 究 会 HTML5 部 会 HTML5を 使 ったWebアプリの 開 発 ~HTML4.0とHTML5の 比 較 ~ メンバー 富 士 通 九 州 システムズ 三 角 瞳 オーガス 大 分 シーイーシー オーイーシー オーイーシー 老 川 翔 太 行 部 佑 希 西 角 幸 恵 下 郡 剛 九 州 東 芝 エンジニアリング 渡 邉 泰 三 大 分 交 通 松 迫 翔

More information

CONTENTS 0 1 2 3 4 5 6 7 8 9 10 0 viii ix x http://www.vector.co.jp/vpack/filearea/win/writing/edit/hm/index.html http://hidemaru.xaxon.co.jp/lib/macro/index.html ftp://ftp.m17n.org/pub/mule/windows/ http://www.yatex.org/

More information

to-r

to-r to-r We re targeting a 1.0 release within the next few weeks. 1.0 IE6 jquery Mobile Sample

More information

Microsoft PowerPoint - 08回目.pptx

Microsoft PowerPoint - 08回目.pptx 1 コンピュータリテラシーII ( 樋 口 担 当 ) 4 回 目 10/17 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I.スタイルシート II.レイアウト III. 課 題 3 I.スタイルシート 1.スタイルシート 4 スタイルシート: 文 書 のスタイルの 設 定 が 書 かれているデータ CSS:スタイルシートの 書 き 方 ( 言 語 )の 一 つ Cascading

More information

改 訂 履 歴 版 数 日 付 改 訂 内 容 改 訂 箇 所 1.0 2015 年 3 月 31 日 初 版 作 成 - - i -

改 訂 履 歴 版 数 日 付 改 訂 内 容 改 訂 箇 所 1.0 2015 年 3 月 31 日 初 版 作 成 - - i - ( 事 業 者 向 け) 1.0 版 2015 年 3 月 31 日 改 訂 履 歴 版 数 日 付 改 訂 内 容 改 訂 箇 所 1.0 2015 年 3 月 31 日 初 版 作 成 - - i - 目 次 1. はじめに... 1 2. システム 動 作 環 境... 1 2.1. 動 作 の 条 件 注 意 事 項... 1 2.1.1. JAVA スクリプトの 設 定... 1 2.1.2.

More information

Microsoft PowerPoint - 051105-2.ppt

Microsoft PowerPoint - 051105-2.ppt 1.Webアプリケーション 1-1 Web 1989Tim Berners-Lee 1993 1999iWindows98 2005: http://www.w3.org/people/berners-lee/ 1-2 ( ) 汎 用 機 オフコン データベース アプリケーション 言 語 (COBOLなど) 文 字 端 末 タイプライター 端 末 http://research.microsoft.com/~gbell/digital/timeline/dechistory.htm

More information

Lecture/CompPracR2003/12th

Lecture/CompPracR2003/12th Lecture/CompPracR2003/12th 2016 年 7 月 17 日 コンピュータ 演 習 ( 再 ) 第 12 回 (1) Webページの 作 成 (1) Webページを 作 成 する 道 具 (1) テキストエディタを 使 うメリット デメリット (2) HTML (2) HTMLとは (2) HTMLの 書 き 方 (3) HTMLファイルの 構 造 (3) 空 白 と 改 行

More information

Microsoft PowerPoint - css [互換モード]

Microsoft PowerPoint - css [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく 使

More information

What 色 々な Web サービスを 提 供 している 会 社 です http://www.heartrails.com/ http://twitter.com/heartrails( 会 社 ) http://twitter.com/joraku( 私 ) ぜひ 名 前 を 覚 えていってくださ

What 色 々な Web サービスを 提 供 している 会 社 です http://www.heartrails.com/ http://twitter.com/heartrails( 会 社 ) http://twitter.com/joraku( 私 ) ぜひ 名 前 を 覚 えていってくださ HeartRails APIs for MA5 ハートレイルズの 提 供 API について http://www.heartrails.com/ What 色 々な Web サービスを 提 供 している 会 社 です http://www.heartrails.com/ http://twitter.com/heartrails( 会 社 ) http://twitter.com/joraku( 私

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション グーグル アナリティクス 操 作 設 定 ガイド Google Analytics 0 年 8 月 現 在 版 お 問 い 合 せはこちらまで カゴラボサポートセンター 00-7- ( 携 帯 電 話 からは 098-- ) E-mail : support@cagolab.jp 受 付 時 間 : 平 日 0:00~:00/:00~8:00 ( 祝 祭 日 及 び 弊 社 休 業 日 を 除 く)

More information

Microsoft PowerPoint - css.ppt [互換モード]

Microsoft PowerPoint - css.ppt [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 W3Cで 推 奨 される

More information

Microsoft Word - class_specification_guide_v60.doc

Microsoft Word - class_specification_guide_v60.doc IM-FormatCreator クラス 指 定 手 順 書 Ver 6.0 IM-FormatCreator i 1 はじめに 1 1.1 目 的 1 2 プログラムの 作 成 2 2.1 ファンクション コンテナ(.JS)の 作 成 2 2.2 プレゼンテーションページ(.HTML)の 作 成 3 3 クラス 指 定 項 目 の 設 定 5 3.1 クラス 指 定 設 定 画 面 5 3.2 クラスパス

More information

インターネットマガジン1999年12月号―INTERNET magazine No.59

インターネットマガジン1999年12月号―INTERNET magazine No.59 +CD-ROM A N S W E R TD { color: white; borer-with: 8px; paing: ; :

More information

[ 編 集 ]ボタンをクリックすると スクリプトを 入 力 できるスクリプトアシスタントが 開 きます (Shift キーを 押 しながらマウスのホイールを 回 転 させるとフォントのサイズが 変 わります) スクリプトを 記 入 し [OK]をクリックしてスクリプトを 設 定 します [グループ]

[ 編 集 ]ボタンをクリックすると スクリプトを 入 力 できるスクリプトアシスタントが 開 きます (Shift キーを 押 しながらマウスのホイールを 回 転 させるとフォントのサイズが 変 わります) スクリプトを 記 入 し [OK]をクリックしてスクリプトを 設 定 します [グループ] VB スクリプトによる BarTender のカスタマイズ (BarTender 8.01 10.0 対 応 ) VB スクリプト(Microsoft Visual Basic Scripting Edition)とは Windows PC で 使 用 できるスクリプト 言 語 です Visual Basic や Office の VBA と 似 てはいますが 別 の 言 語 となります BarTender

More information

Microsoft Word - 関数の資料_var100.doc

Microsoft Word - 関数の資料_var100.doc 関 数 教 科 書 P98~P108 関 数 の 考 え 方 関 数 とは 処 理 の 集 まり の 事 です new Date( ); や Math.random( );も あらかじめ 用 意 されている 関 数 から 呼 び 出 されています オリジナルの 関 数 を 作 ってみる 自 分 が 使 いたい 処 理 だけを 集 めたオリジナルの 関 数 を 作 ることもできます 自 分 オリジナルの

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 操 作 マニュアル( 事 業 者 編 ) 平 成 23 年 1 月 1 SHIFTで 作 成 されるホームページ: 構 成 SHIFT 作 成 メニュー HP 完 成 イメージ 登 録 画 面 への 入 り 方 (コミュニティ 利 用 の 場 合 ) 商 工 会 HP(イメージ) ログイン 画 面 1. 都 道 府 県 ID パスワードを 入 力 して OK をクリックします コミュニティTOP 画

More information

Microsoft PowerPoint - jouhou11vista.ppt [互換モード]

Microsoft PowerPoint - jouhou11vista.ppt [互換モード] VBA (Visual BASIC for Applications)で Body Mass Index 判 定 プログラムを 作 る ユーザーフォームを 用 いた プログラムの 作 成 Graphic User Interface ( GUI ) の 利 用 法 Excelメニューバーの 表 示 タグをクリック 右 端 のマクロのアイコンをダブルクリック マクロ 作 成 のダイアログが 現 れる

More information

スライド 1

スライド 1 Webプログラミング2 2.Webプログラミング 概 要 (2) ( 復 習 )Webとは 様 々な 利 用 シーン 様 々なデバイス/ブラウザ パソコン 携 帯 電 話 ゲーム 機 /TV 電 子 ブックリーダー 学 校 案 内 / 会 社 案 内 オンラインショップ ブログ/ 掲 示 板 /SNS/Twitter/Facebook 学 内 / 社 内 システム スケジューラ/カレンダー/Webメール

More information

Microsoft PowerPoint - WMClass_2008July11.ppt

Microsoft PowerPoint - WMClass_2008July11.ppt Googleマップを 使 った ウェブマッピング 入 門 今 日 の 授 業 GoogleマップAPI マッシュアップ Googleアース 1 様 々なGoogleサービス 2 Googleマップのページを 開 くには もしくは http://maps.google.co.jp/ 3 Googleマップ Googleの 地 図 を 用 いた 検 索 サービス 4 地 図 を 用 いた 検 索 サービス

More information

インターネットマガジン1999年2月号―INTERNET magazine No.49

インターネットマガジン1999年2月号―INTERNET magazine No.49 A MagnaviIp990Htmltips +CD-ROM 3.0 3.0 A N S W E R A N S W E R 74 INTERNET magazine 999/ click here! 3

More information