Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/

Size: px

Start display at page:

Download "Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/"

しげじろうおおふさ
5 years ago
Views:

1 Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/8 ( 水 ) HTML+CSS (3) (2 章 ) 5/15 ( 水 ) HTML+CSS (4) (2 章 ) 5/22 ( 水 ) HTML+CSS (5) (2 章 ) 5/29 ( 水 ) HTML+CSS (6) (2 章 ) 6/5 ( 水 ) HTML+CSS (7) (2 章 ) 日時講義内容 6/12 ( 水 ) CGI (3 章 ) 6/19 ( 水 ) JavaScript (1) (4 章 ) 6/26 ( 水 ) JavaScript (2) (4 章 ) 7/3 ( 水 ) JavaScript (3) (4 章 ) 7/10 ( 水 ) 休講 7/17 ( 水 ) JavaScript (4) (4 章 ) 7/24 ( 水 ) レポート出題 7/31( 水 ) XML (5 章 ) レポート提出講義計画湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 1/20 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 2/20 成績評価は以下の方針とします演習への取り組み状況 ( 毎回 ) 50% レポート内容 50% 出席 3 分の2 以上 ( 出席 10 回 ) を単位取得の条件とします ( 出席状況が3 分の2に満たない者のレポートは採点しません ) 出席は講義回ごとに取ります成績評価演習室の PC のハードディスクには演習で作成したデータは保管できません各 PC のネットワーク接続ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名使用するフォルダ演習 1 Z: Web プログラミング演習 1 演習 2 Z: Web プログラミング演習 2 演習 3 Z: Web プログラミング演習 3 演習 4 Z: Web プログラミング演習 4 演習 5 Z: Web プログラミング演習 5 講義で使うフォルダ 3/20 4/20

2 jstest11-5.html の内容を修正し jstest12-1.html で保存してください <title> 演習 12-1(JavaScript)</title> <h1> 日本の風景 </h1> <table> <tr><td> <img src="m_nature01.jpg" onmouseover="this.src='nature01.jpg'" onmouseout="this.src='m_nature01.jpg'"> <img src="m_nature02.jpg" onmouseover="this.src='nature02.jpg'" onmouseout="this.src='m_nature02.jpg'"> ( 演習 1)Image オブジェクト (1) <img src="m_nature03.jpg" onmouseover="this.src='nature03.jpg'" onmouseout="this.src='m_nature03.jpg'"> </tr><tr><td> <img src="m_nature04.jpg" onmouseover="this.src='nature04.jpg'" onmouseout="this.src='m_nature04.jpg'"> <img src="m_nature05.jpg" onmouseover="this.src='nature05.jpg'" onmouseout="this.src='m_nature05.jpg'"> <img src="m_nature06.jpg" onmouseover="this.src='nature06.jpg'" onmouseout="this.src='m_nature06.jpg'"> </tr> 画像上にマウスを移動するとカラー表示する ( 演習 1) 結果 5/20 6/20 Image オブジェクトのプロパティ jstest12-1.html の内容を修正し jstest12-2.html で保存してくださいプロパティ値内容 src 文字列画像ファイル名 (URL) width 数値画像の幅 ( ピクセル ) height 数値画像の高さ ( ピクセル ) border 数値画像の枠線 ( ピクセル ) name 文字列画像の名前 this( 自分自身 ) の利用 <img src= aaa.jpg onclick= this.width=500 > クリックされると自分自身 (Image) の幅を変更イベントハンドラ onmouseover, onmouseout Image オブジェクト : 解説 <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title> 演習 12-2(JavaScript)</title> function resize(s){ document.images[i].width = s; // ( 演習 2)Image オブジェクト (2) <h1> 日本の風景 </h1> <button onclick="resize(120)"> サイズ小 <button onclick="resize(180)"> サイズ中 <button onclick="resize(240)"> サイズ大 <table> <tr><td> <img src="m_nature01.jpg" onmouseover="this.src='nature01.jpg'" onmouseout="this.src='m_nature01.jpg'"> <img src="m_nature02.jpg" onmouseover="this.src='nature02.jpg'" onmouseout="this.src='m_nature02.jpg'"> 後略 7/20 8/20

$width = s; function ColorHyouji(){ document.images[i].src = "nature0" + (i+1) + ".jpg"; function MonoHyouji(){ document.images[i].src = "m_nature0" + (i+1) + ".$ jpg"; // 中略 </tr> <button onclick="colorhyouji()"> 全画像をカラーで表示 <button onclick="monohyouji()"> 全画像をモノクロで表示 ( 演習 2) 結果 ( 演習 3)Image

jpg"; // 中略 </tr> <button onclick="colorhyouji()"> 全画像をカラーで表示 <button onclick="monohyouji()"> 全画像をモノクロで表示 ( 演習 2) 結果 ( 演習 3)Image

images[i] imgタグが登場した順にi = 0,1,2,3 で指定演習 2 解説 document.images[i].width = 120, 180, 240 ボタンクリックにより幅を変更演習 3 解説 document.images[i].src = nature0 + (i+1) +.

3 jstest12-2.html の内容を修正し jstest12-3.html で保存してくださいサイズ小ボタンを押すと画像サイズを小さくする function resize(s){ document.images[i].width = s; function ColorHyouji(){ document.images[i].src = "nature0" + (i+1) + ".jpg"; function MonoHyouji(){ document.images[i].src = "m_nature0" + (i+1) + ".jpg"; // 中略 </tr> <button onclick="colorhyouji()"> 全画像をカラーで表示 <button onclick="monohyouji()"> 全画像をモノクロで表示 ( 演習 2) 結果 ( 演習 3)Image オブジェクト (3) 9/20 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 10/20 全画像をカラーで表示ボタンを押すと画像をカラーで表示 ( 演習 3) 結果 Imageオブジェクトの指定 document.images[i] imgタグが登場した順にi = 0,1,2,3 で指定演習 2 解説 document.images[i].width = 120, 180, 240 ボタンクリックにより幅を変更演習 3 解説 document.images[i].src = nature0 + (i+1) +.jpg ; カラー m_nature0 + (i+1) +.jpg ; 白黒 Image オブジェクト : 解説 (2) 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 11/20 12/20

jstest12-3.html の内容を修正し jstest12-4.html で保存してください <img src="m_nature06.jpg" onmouseover="this.src='nature06.jpg'" onmouseout="this.src='m_nature06.

bgcolor = '#00ff00'"> みどり <button onclick="document.bgcolor = '#0000ff'"> あお <button onclick="document.bgcolor = '#ffa500'"> オレンジ <button onclick="document.

bgcolor = '#ffffff'"> しろ ( 演習 4)document オブジェクトあかオレンジ ( 演習 4) 結果みどりくろあおしろ 13/20 14/20 document オブジェクトのプロパティプロパティ bgcolor fgcolor linkcolor vlinkcolor alinkcolor title lastmodified URL 内容

4 jstest12-3.html の内容を修正し jstest12-4.html で保存してください <img src="m_nature06.jpg" onmouseover="this.src='nature06.jpg'" onmouseout="this.src='m_nature06.jpg'"> </tr> <button onclick="colorhyouji()"> 全画像をカラーで表示 <button onclick="monohyouji()"> 全画像をモノクロで表示 <br> 背景色を変更します <br> <button onclick="document.bgcolor = '#ff0000'"> あか <button onclick="document.bgcolor = '#00ff00'"> みどり <button onclick="document.bgcolor = '#0000ff'"> あお <button onclick="document.bgcolor = '#ffa500'"> オレンジ <button onclick="document.bgcolor = '#000000'"> くろ <button onclick="document.bgcolor = '#ffffff'"> しろ ( 演習 4)document オブジェクトあかオレンジ ( 演習 4) 結果みどりくろあおしろ 13/20 14/20 document オブジェクトのプロパティプロパティ bgcolor fgcolor linkcolor vlinkcolor alinkcolor title lastmodified URL 内容ホームページの背景色文字色リンク文字色訪問済みのリンク文字色リンクをクリックしたときの色タイトル文字ファイルの最終更新日時ホームページの URL document. プロパティ名 = 値 document.bgcolor = ff0000 背景色を赤色に document オブジェクト : 解説湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 15/20 jstest11-5.html の内容を修正し jstest12-5.html で保存してください var url = new Array(3); url[0] = " url[1] = " url[2] = " var sub = new Array(3); function hiraku(x) { sub[x] = window.open(url[x]); function tojiru(y) { sub[y].close(); // 次ページへ ( 演習 5)window オブジェクト (1/2) 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 16/20

onclick="hiraku(1)"> 開く <td><button onclick="tojiru(1)"> 閉じる </tr><tr> <th> コンピュータ応用学科 </th> <td><button onclick="hiraku(2)"> 開く <td><button onclick="tojiru(2)"> 閉じる </tr> ( 演習 5)window オブジェクト (2/2)

5 jstest11-5.html の内容を修正し jstest12-5.html で保存してください <h3> 湘南工科大学リンク集 </h3> <table border="1 ><tr> <th> 情報工学科 </th> <td><button onclick="hiraku(0)"> 開く <td><button onclick="tojiru(0)"> 閉じる </tr><tr> <th> 電気電子工学科 </th> <td><button onclick="hiraku(1)"> 開く <td><button onclick="tojiru(1)"> 閉じる </tr><tr> <th> コンピュータ応用学科 </th> <td><button onclick="hiraku(2)"> 開く <td><button onclick="tojiru(2)"> 閉じる </tr> ( 演習 5)window オブジェクト (2/2) 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 17/20 ( 演習 5) 結果 IE8/9 はセキュリティの仕様からローカル環境では close() は正常動作しない湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 18/20 新しいウィンドウを開く window.open() window.open( URL, ウィンドウ名, 属性 ); ウィンドウを閉じる window.close() window.close(); オブジェクト変数新しいウィンドウをオブジェクト変数 subに代入 var sub = window.open(url); オブジェクト変数 subを閉じる sub.close(); window オブジェクト : 解説湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 19/20 本日の演習内容について復習してください演習内容作成ファイル演習 1 Imageオブジェクト (1) jstest12-1.html 演習 2 Imageオブジェクト (2) jstest12-2.html 演習 3 Imageオブジェクト (3) jstest12-3.html 演習 4 documentオブジェクト jstest12-4.html 演習 5 windowオブジェクト jstest12-5.html JavaScript(3) まとめ 20/20

Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/18

Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 1/18 演習室の PC のハードディスクには演習で作成したデータは保管できません各 PC のネットワーク接続ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名使用するフォルダ演習 1 Z: Web データ管理 20111221

Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/

Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/