Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
接案自由工作者 Freelancer
承接網站建置、主機代管服務。
於台北、中壢教學網站設計開發相關領域課程。
2009 年:進入職場,曾任職於中視、華視、Yahoo!、新創公司。
2013 年:全職的網站前端自由工作者。
2016 年:成立卡斯有限公司:承接網站設計開發、主機代管。
2017 年:承接標案
2018 年 ~ 至今:網站相關教學
2019 年:維護存股管家 Chatbot
張互賓/Carlos
個人 email: chang.abin@gmail.com
希望 學員/讀者 在這學習領域中,有遇到任何問題,可直接與我聯繫,盼能協助各位在這領域上精進。
然而 script 標籤儘量寫在 </body>
之前,當然也可以寫在 <head>...</head>
區段裡面。但我們希望先讓使用者看到內容,然後再執行 JS 程式碼。
範例:
例 1:onclick
指的是滑鼠左鍵點擊一下:
例 2:ondblclick
指的是滑鼠左鍵快速點擊二下:
在 javascript/practice
資料夾下建立 js
資料夾,然後在 js 資料夾中,建立 index.js
檔案,然後將 1.4 第一個 JavaScript
所寫的 js 部份,全部移到 index.js 中。(註:不要連 script 標籤也移進去。)
在 practice/index.html
檔,如果要載入 practice/js/index.js
檔案的話,使用以下語法:
最後 index.html
會變成如下:
如果將此例的 script 標籤,改成放到 head 結束標籤之前,會發生什麼錯誤?
DOM = Document Object Model,中文即「文件物件模型」。
建立 practice/dom.html
檔案,內容如下:
瀏覽器解析以上 html 後,產出的 DOM tree:
用瀏覽器開啟檔案,按下 Cmd + Option + i
或 F12
,如下圖的 Elements 頁籤,展開看看,這就是瀏覽器將你寫的 html 解析出來的 DOM Tree:
試著加上以下的原始碼(可放在 </body>
之前):
再到上述提的 Elements 頁籤觀察看看,出了什麼問題?
javascript 本身並沒有 window、document 這種物件,這是瀏覽器解析完之後,提供給開發人員使用的,例如:
window.alert
document.getElementById
document.setAttribute
document.getAttribute
以上這些其實都是 DOM Scripting,參考書籍。
以這個 html 為例:
往內層找元素,回傳的會是 NodeList,可以使用 .forEach()
函式。
例:
找到第一層的子元素。回傳的會是 HTMLCollection,無法使用 .forEach()
函式。
例:
找到第一個子元素、找到最後一個子元素。
例:
透過 querySelector 往內層找,以及使用 :nth-child()
:
例:
找到同層的前一個元素。
例:
找到同層的下一個元素。
例:
找到最近的父元素。
例:
往父層找,找到指定的元素。
例:
任何的事件發生時,都會隨附一個事件物件(Event Object),它會提供的額外資訊,依照事件類型的不同,會帶有不同的資料。
如果在某些情境當中,需要使用到事件物件,那就可以帶入函式的第一個參數,例:
透過 e.which
來取得 keyup 事件發生時的 ASCII Code 碼:
參考:w3schools Event Object。(看看網址裡面的,找一下 e.target
是什麼?)
click 事件的寫法,使用 .addEventListener()
:
範例(click):
範例(dblclick):
如果要停止事件冒泡狀況發生,在正確的位置執行以下程式:
mousedown:滑鼠按壓下去時觸發。(會發生冒泡狀況)
mouseup:滑鼠按壓下去放開時觸發。(會發生冒泡狀況)
範例(不用背,要會觀察):
mouseover:滑鼠移入時觸發。(會發生冒泡狀況)
mouseout:滑鼠移出時觸發。(會發生冒泡狀況)
範例:
mouseenter:滑鼠移入時觸發。(不會發生冒泡狀況)
mouseleave:滑鼠移出時觸發。(不會發生冒泡狀況)
範例:
說明:滑鼠游標在元素上移動時觸發。(會發生事件冒泡狀況)
範例:
針對 document 綁定 mousemove 事件。
e.pageX:滑鼠距離頁面最左側的距離。
e.pageY:滑鼠距離頁面最上方的距離。
window.scrollY:垂直方向滑動了多少距離。
提供 html:
參考作法:
示意圖:
MDN:
建立 practice/location.html
檔案來練習。
http://localhost:5500/practice/location.html?a=value1&b=value2#other
location.html
的檔案內容如下:
瀏覽 http://localhost:5500/practice/location.html?a=value1&b=value2#other
並觀察 console 中的輸出。以及各按鈕的作用。
編輯 location.html
檔案,多一個按鈕:
以及 JS 的部份(使用內建的 URLSearchParams
):
透過 new URLSearchParams()
,然後將 location.search
帶入,就可以再透過 .get()
來取得網址參數的資訊。
在 javascript
資料夾中,建立 assignment
資料夾。然後在 assignment
資料夾內,建立以下資料夾及檔案:
index.html
css/index.css
js/index.js
建議執行順序:
介面1 → 介面2 → 資料1 → 資料2 → 介面3 → 資料3 → 介面4 → 資料4 → 介面5 → 資料5 → 介面6 → 資料6。
提供 html 及 CSS:
完成以下項目:
index.html 頁面需載入 index.js
及 index.css
檔。
input.task_name
在 focus 事件觸發時,div.task_add_block
加上 -on
class。
input.task_name
在 blur 事件觸發時,div.task_add_block
移除 -on
class。
結果示意:
更新 html、css:
新增「待辦事項」的 html:
完成以下項目:
按下「新增」按鈕時,將以上的待辦事項 html,新增到 ul.task_list
裡面的最前面。
如果沒有輸入待辦事項,按「新增」的話,不能有任何反應。
新增成功的話,待辦事項欄位要清空。
輸入的待辦事項,如果文字的最左邊、最右邊有空格,需移除。(語法:JS 內建的 trim()
函式)。
按下「Enter」鍵,也要能新增待辦事項。
結果示意:
更新 index.html:
將以下這行放到 h1 標籤之前:
更新 index.css:
完成以下項目:
按下「移除」按鈕,需詢問使用者是否要移除,若確定的話,ul.task_list
裡的第一層子元素 li
標籤,加上 fade_out
這個 class,就會淡出 1 秒,然後請移除該筆待辦事項。
按下「清空」按鈕,需詢問使用者是否要清空,若確定的話,ul.task_list
裡的第一層子元素 li
標籤,加上 fade_out
這個 class,就會淡出 1 秒,然後請清除全部的待辦事項。
結果示意:
index.js
檔案更新,待辦事項更新以下結構,以老師自己寫的為例,有以下這行:
在其下方,加上這行(留意有加上 -none
這個 class,即預設是消失狀態):
更新 index.css:
完成以下項目:
按下「更新」按鈕,出現一般文字框,然後可以更新。
再按下「更新」按鈕,回到不可編輯的狀態,但待辦事項要是更新的。
如果所更新的待辦事項,沒有輸入文字,跳出提醒視窗(alert),顯示「請輸入待辦事項」。
待辦事項的文字若最左邊、最右邊有空格的話,需移除。
結果示意:
更新 index.css:
完成以下項目:
按下「往上」按鈕,與上面的待辦事項對調。(註:每個待辦事項是以 li
為單位。)
按下「往下」按鈕,與下面的待辦事項對調。
第一個的待辦事項,「往上」按鈕按了要沒反應;最後一個的待辦事項,「往下」按鈕按了要沒反應。
結果示意:
更新 index.css:
完成以下項目:
點擊星號的時候,該星號加上 -on
這個 class,然後該筆待辦事項,星號數( data-star
)小於等於點擊的星號數的話,也要加上 -on
這個 class;反之則移除。
結果示意:
資料儲存至 localStorage,提供參考原始碼如下:
提示:頁面 DOMContentLoaded
事件發生之後,執行某個函式(例:get_tasks()
),這段函式用途是將 localStorage 裡的資料抓出來,然後進行資料的處理,拼裝完 html 之後,再丟回到頁面上:
在 DOMContentLoaded 事件發生之後,執行以下程式:
提示:先認識 陣列.filter() 函式:https://codepen.io/carlos411/pen/RwBmybr
移除 localStorage 中的單筆待辦事項:
清空 localStorage 所有的資料,內建就有的程式語法:
提示:將待辦事項從 localStorage 裡全部抓出來,然後跑迴圈,然後找到欲更新的待辦事項,將 name 換掉,然後回存至 localStorage,部份原始碼:
提供寫好的參考原始碼:
仿照第四步更新 name 的部份,很類似。提供部份原始碼:
完成。
0/(日) 晚上 點之前繳交。
將 assignment 資料夾
,壓成一個壓縮檔,然後繳交至 Tibame 後台。
前端班後台網址:https://frontend.tibame.com/
JAVA班後台網址:https://java.tibame.com/
請先在自己的電腦桌面或其它您自己習慣的位置,建立一個 javascript
資料夾,然後使用編輯器開啟該資料夾,如下圖:
然後在 javascript
資料夾裡,建立一個 practice
資料夾。
然後在 practice
資料夾裡,建立一個 index2.html
檔案。如下圖:
編輯 index2.html
,原始碼如下,可直接複製貼上,原始碼需整齊:
請使用本機端網站的方式,來開啟網頁。(可使用 live server 套件)。
以下原始碼放到 </head>
結束標籤之前:
在 script 標籤中,放入以下原始碼:
執行看看。
在 script 標籤中,再放入以下原始碼:
執行看看。
在 script 標籤中,再放入以下原始碼:
執行看看。
在 script 標籤中,再放入以下原始碼:
執行看看。完成。
試著解讀以上原始碼。
另外附上 jQuery 語法範例:
在 practice
資料夾下,建立 cookie.html
,以便練習。
並用網域(例:http://127.0.0.1:5500/practice/cookie.html
)的方式來開啟。
Cookie 是網站在您瀏覽網頁時儲存在您的電腦上的資料。
Cookie 可用於儲存各種資訊,包含個人識別資訊(例如姓名、id……等等)。
容量空間有限,大約 4K 左右。
可以設定 cookie 的存活期間,如果沒有設定,預設就是當下使用者瀏覽網頁的期間(session),結束瀏覽器的話就自動消失。
開啟開發者工具,在 Application 頁籤當中。
以下程式建立了兩個 cookie,名稱(Name)叫做「food_id」,值(Value)是「abc」;另一個是名稱叫做「ad_code」,值是「year2020」:(執行完以下程式後,找出在哪裡看得到。)
更新的語法同上,如果 food_id 本身是已經存在的話,那就會是更新。
會是一整個字串。如果想取得單一的資訊呢? 其實滿麻煩。參考後續的函式提供。
以下原始碼,設定 ad_code 這個 cookie 的存活期間是到「Thu, 18 Dec 2999 03:00:00 UTC
」
只要將 cookie 的存活期間設定成過去的時間,就會刪除,例:
https://www.w3schools.com/js/js_cookies.asp 官方提供了 setCookie 及 getCookie 函式,讓我們方便設定 cookie 及 取得 cookie,第三個 checkCookie 是老師改寫,判斷某 cookie 是否存在,回傳 true 或 false。
在 practice/js/
資料夾下,建立 all_func.js
檔案,將以上原始碼放進去。然後頁面要載入 all_func.js
檔案。
然後練習執行以下程式:
Object Property Value Shorthand(物件屬性簡寫):
留意以下的寫法二(新語法)。
例:
在 practice
資料夾下,建立 localstorage.html
,以便練習。
在 html5 還沒有出來之前,本機端的儲存方式,使用的是 cookie,但空間有限,大約是 4k 左右。
而 html5 出來之後,多了 localStorage 儲存方式,空間更大,大約 5M,而且使用了 key-value
的儲存方式,使得更有彈性。
以下是將資料儲存在 localStorage 的三種寫法,以 key-value
的方式儲存,例:
開啟本機端網址來觀察:http://127.0.0.1:3000/web_storage/localstorage.html
如下圖:
儲存 JSON 格式資料,使用 JSON.stringify()
將資料字串化:
可透過以下方式取得 localStorage 裡的資料:
如果 localStorage 裡沒有指定的資料,會回傳 undefined
。
如果有儲存 JSON 資料,取出時,通常會用 JSON.parse()
來轉回物件格式:
可透過以下方式來更新 localStorage 裡的資料:
可透過以下方式來刪除 localStorage 裡的資料:
特性
cookie
localStorage
生命週期
預設是關閉瀏覽器後失效,但可以設定失效的時間。
除非手動清除,否則並不會消失。
大小
大約4K
一般是 5Mb