2017年7月30日 星期日

五倍紅寶石- JavaScript & jQuery 前端開發入門實戰 (Kuro老師)

https://5xruby.tw/talks/JS-jQuery-2017-7
這門課程將透過 jQuery 這套跨瀏覽器的 JavaScript 函式庫來簡化 HTML 與 JavaScript 之間的操作,即使學員在不熟悉 JavaScript 這門程式語言時,也能打造實用的互動效果,進一步認識 JavaScript 與前端開發的眉眉角角。


其實我很害怕任何JavaScript相關的東西,因為有很挫折的經驗囧
雖然在那之後自己有多看一下相關的東西,不過有點支離破碎
趁這次正好好好重頭有系統的研究一次
不然想當年那個搞不清楚東南西北,然後哪個是JavaScript哪個是jquery都搞不清楚的時候真的很撞牆
或是從最基本一開始上課就有講到的,如果不透過var去宣告變數會讓他變成全域變數,成為window成員屬性之一 (嗯~想當年的我就是連這個都不知道)
第一堂課先從JavaScript最基本的語法講起,然後再講到DOM,也講到了要如何用jquery和JavaScript選到自己想要元素,也有出練習題目讓大家可以實作回答問題.
最後也有講到一些JavaScript讓我覺得很謎的部分,比方說是數字又不是數字的NaN
你明明就Not a Number但是卻又是數字
typeof NaN ==> "Number"
又或者是為 JS 隱含 動轉換型別的特性,比較數值時, 建議 採 === 取代 ==
JavaScript 是個事件驅動 ( Event-driven ) 的語言
這是上課後期講的東西,這其實也是讓我對js覺得困惑的東西,以前常常我以為他應該要被驅動了,結果一點反應都沒有.
preventDefault什麼的對我來說也和浮雲一樣

下面這東西也是原本我搞不清楚的用法,為什麼有時候大家要直接指定到要做操作的元素,有時候卻要指定到上一層去接收
這點課程裡面有特別介紹,因為在網頁載入完成後才產生的元素,先前綁定的事件是無法被觸發的。
所以必須要利用js 事件會向上傳遞的特性,先綁定到 元素上,再由 元素將事件指定給新 成的元素。

$(".del").on('click', function() {
  $(".wrap").remove();
});
$(".wrap").on('click', '.del' ,  function() {
  $(".wrap").remove();
});

當然也有講到實作上常用到的ajax,一開始先從簡單的範例開始,帶著我們練習了從randomuser.me上抓資料回來更新自己的網站
課程的最後更是帶大家做了一個配合google map和data.taipei上的YouBike資料實作了一個可以顯示哪邊還有車可以借的網站

課程的最最後有講到一些js更謎的部分
js裡面可以允許變數先使用在被宣告,函式宣告與變數宣告都會被提升,但函式的優先序會比
Immediately Invoked Function Expression,匿名且立即被呼叫的 function
為 延長外部變數的生命週期,在 function 中定義的 function,內部的 function 可以存取外部 function 定義的變數, 這樣叫做 Closure

我覺得我上過這一輪之後比之前更了解我在寫js的時候我到底在幹嘛,而不是只是貼上別人說這樣子ok的程式碼,我很希望課程可以再多幾堂聽到更多東西XD

沒有留言:

張貼留言