Java Script -3. 課程大綱 第三週 寫在外部檔案區的 JS DOM (Document Object Model) Window Document Form Cookie 建立 有效期 刪除.

Presentation on theme: "Java Script -3. 課程大綱 第三週 寫在外部檔案區的 JS DOM (Document Object Model) Window Document Form Cookie 建立 有效期 刪除."— Presentation transcript:

1 Java Script -3

2 課程大綱 第三週 寫在外部檔案區的 JS DOM (Document Object Model) Window Document Form Cookie 建立 有效期 刪除

3 寫在外部檔案區的 JS In HTML a=AAA(); ChangePic.js <!-- function AAA() { return p; } //-->

4 DOM (Document Object Model) Document Object Model ( 文件物件模型 ) 瀏覽器載入網頁時，就會根據網頁的內容來建 立相關的文件物件模型 DOM. DOM 是階層式的物件模型，有網頁的各種物件 的性質和方法. 用以產生動態網頁 Dynamical HTML.

5 DOM (Document Object Model) 資料來源 :Jyh-Shing Roger Jang

6 DOM 使用法 物件都有其相對應的 Method( 方法 ) 與 Property( 屬性 ) objectName.propertyName objectName["propertyName"]

7 DOM 使用法 - Window.status. window.status= “ 歡迎光臨 LEo 小站 "; window[ “ status ” ]= “ 歡迎光臨 LEo 小站 ";

8 Document( 文件 ) 的 property( 屬性 ) document.location 網址 document.URL 網址 document.lastModified 最後修改時間 document.fileModifiedDate 最後修改時間 document.fileUpdatedDate 檔案修改日期 document.fileCreatedDate 檔案產生日期 document.fileSize 檔案大小 document.bgColor 網頁背景顏色 document.fgColor 網頁前景顏色 document.linkColor 文字連結顏色 document.alinkColor 點選中的文字連結顏色 document.vlinkColor 點選後的文字連結顏色 document.defaultCharset 預設的字元集 document.cookie cookie 字串值 document.referer 從哪連結而來 document.protocol 傳輸通訊協定 document.security 安全憑證資訊

9 列出所有的 Property ( 無 method) function showAllProp(obj, objName) { for (var i in obj) document.writeln(objName+"."+i+"="+obj[i]); } showAllProp(document, “ document")

10 Method( 方法 ) 之用法 前一頁 重新整理 下一頁 列印網頁 document.body.background = “ image URL ” ; ( 換背景圖 )

11 Method( 方法 ) 之用法 window.open([url],[Name],[ControlString],[keepHistory]); url ：新視窗之網址 Name ：新視窗名稱 ControlString ：設定新視窗的寬度、高度、位置、是否顯示狀態 列, 工具列等功能 keepHistory ：是否保留 History 資料 EX: window.open('http://www.nthu.edu.tw', ‘ NTHU','status=no,toolb ar=no,width=800,height=600');

12 Try Look Look! 請寫一個可換背景圖的程式

13 Cookie JavaScript 不能對使用端的硬碟做任何存取的 動作. 除了餅乾（ Cookie ）可以存小部分有限的資料。 (Cookie 是否啟動 ) navigator.cookieEnabled

14 Cookie 建立 document.cookie= “ name=value;expires=exp Date ” ; name=value (cookie 名稱與值 ) expires=expDate (cookie 有效日期 ) EX: document.cookie= “ VisitTime=5"; 秀出所有的 Cookie alert(document.cookie);

15 Cookie 值之取出 function getCookie(name) { var arg = name + "="; var nameLen = arg.length; var cookieLen = document.cookie.length; var i = 0; while (i < cookieLen) { var j = i + nameLen; if (document.cookie.substring(i, j) == arg) { var endIndex = document.cookie.indexOf(";", j); if (endIndex == -1) endIndex = document.cookie.length; return document.cookie.substring(j, endIndex); } i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; }

16 Cookie 有效期 duration = 365; // 保留天數 today = new Date(); expireDate = new Date(); // 有效期 expireDate.setTime(today.getTime()+1000*60*60*24*duration); document.cookie= “ visit=5;expires="+expireDate.toGMTString();

17 Cookie 刪除 ? 把有效期設為昨天即可.

18 Try Try Look! 請寫一個紀錄使用者 來幾次的 JS

19 作業 請用 JS 寫一個電子時鐘 ( 表 ) ( 盡量酷一點 ) 看看你可以加入什麼功能 或者 你可以用目前學的東西寫一 個 JS 小遊戲嗎 ?