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 20130703 演習 1 演習 2 Z: Web プログラミング 1 20130703 演習 2 演習 3 Z: Web プログラミング 1 20130703 演習 3 演習 4 Z: Web プログラミング 1 20130703 演習 4 演習 5 Z: Web プログラミング 1 20130703 演習 5 講義で使うフォルダ 3/20 4/20
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
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.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] = "http://www.shonan-it.ac.jp/contents/faculties/technology/information/index.html"; url[1] = "http://www.shonan-it.ac.jp/contents/faculties/technology/electronic/index.html"; url[2] = "http://www.shonan-it.ac.jp/contents/faculties/technology/computer/index.html"; 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
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