Java Script -3 Java Script -3

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

a=AAA(); Change. Pic." src="https://present5.com/presentation/c6d95bed1cfd82c464f1bb5b6dd3df32/image-3.jpg" alt="寫在外部檔案區的JS n In HTML n n n a=AAA(); Change. Pic." /> 寫在外部檔案區的JS n In HTML n n n a=AAA(); Change. Pic. js n n n

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

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

DOM使用法 n 物件都有其相對應的Method(方法)與 Property(屬性) n object. Name. property. Name n object. Name[ DOM使用法 n 物件都有其相對應的Method(方法)與 Property(屬性) n object. Name. property. Name n object. Name["property. Name"]

window[“status”]=“歡迎光臨LEo小站 ";" src="https://present5.com/presentation/c6d95bed1cfd82c464f1bb5b6dd3df32/image-7.jpg" alt="DOM使用法-Window. status. n n n window. status=“歡迎光臨LEo小站"; window[“status”]=“歡迎光臨LEo小站 ";" /> DOM使用法-Window. status. n n n window. status=“歡迎光臨LEo小站"; window[“status”]=“歡迎光臨LEo小站 ";

Document(文件 )的 property(屬性 ) n n n n n document. location 網址 document. URL網址 Document(文件 )的 property(屬性 ) n n n n n document. location 網址 document. URL網址 document. last. Modified 最後修改時間 document. file. Modified. Date 最後修改時間 document. file. Updated. Date 檔案修改日期 document. file. Created. Date 檔案產生日期 document. file. Size 檔案大小 document. bg. Color 網頁背景顏色 document. fg. Color 網頁前景顏色 document. link. Color 文字連結顏色 document. alink. Color 點選中的文字連結顏色 document. vlink. Color 點選後的文字連結顏色 document. default. Charset 預設的字元集 document. cookie字串值 document. referer 從哪連結而來 document. protocol 傳輸通訊協定 document. security 安全憑證資訊

列出所有的Property(無method) n function show. All. Prop(obj, obj. Name) { for (var i in obj) 列出所有的Property(無method) n function show. All. Prop(obj, obj. Name) { for (var i in obj) document. writeln(obj. Name+". "+i+"="+obj[i]); } n show. All. Prop(document, “document") n n

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

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

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

Cookie n n Java. Script 不能對使用端的硬碟做任何存取的 動作. 除了餅乾(Cookie)可以存小部分有限的資料。 (Cookie是否啟動) navigator. cookie. Enabled Cookie n n Java. Script 不能對使用端的硬碟做任何存取的 動作. 除了餅乾(Cookie)可以存小部分有限的資料。 (Cookie是否啟動) navigator. cookie. Enabled

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

Cookie值之取出 n n n n n function get. Cookie(name) { var arg = name Cookie值之取出 n n n n n function get. Cookie(name) { var arg = name + "="; var name. Len = arg. length; var cookie. Len = document. cookie. length; var i = 0; while (i < cookie. Len) { var j = i + name. Len; if (document. cookie. substring(i, j) == arg) { var end. Index = document. cookie. index. Of("; ", j); if (end. Index == -1) end. Index = document. cookie. length; return document. cookie. substring(j, end. Index); } i = document. cookie. index. Of(" ", i) + 1; if (i == 0) break; } return null; }

Cookie有效期 n n n duration = 365; //保留天數 today = new Date(); expire. Date Cookie有效期 n n n duration = 365; //保留天數 today = new Date(); expire. Date = new Date(); //有效期 n expire. Date. set. Time(today. get. Time()+1000*60*60*24*duration) ; n document. cookie=“visit=5; expires="+expire. Date. to. GMTString();

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

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

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