在這門課程之前,你所掌握的知識大多是關於「設計出漂亮的網頁」 在這門課程中,學會了 Cookie, Local Storage, AJAX 等等現代技術 從這門課程開始,你逐漸開始具備「前端工程開發」的能力 能夠跟伺服器端溝通、能將狀態存在瀏覽器端,打造出好用、功能豐富的應用程式!...
## 課程目標 認識 AJAX 與不同的 HTTP 請求方法 ## 課程內容 HTTP 協定中,HTTP Request 有多種不同的方法 前面幾課的寫法,都是 HTTP GET 類型,這一課來接著談談更多不同的請求方法 繼續使用模擬電商網站的範例 API ###...
## 課程目標 認識 AJAX 錯誤處理 ## 課程內容 在前一課,我們說過以下的話 > 有些任務現在還不會立刻執行,但我先把要執行的任務交待清楚,時間點到的時候,就執行 > 以 UI 動作來說,時間點就是 `onclick` 之時、`onchange` 之時 >...
## 課程目標 認識基本的 AJAX 原理 ## 課程內容 這一課來認識大名鼎鼎的 AJAX 觀念 AJAX 全名 Asynchronous JavaScript and XML 簡單來說,就是「非同步從主機取得資料來更新網頁內容」的技術 舊式的網頁,都是瀏覽器向...
## 課程目標 認識變數作用域 認識函式的不同寫法與特性 ## 課程內容 來認識一些程式語言觀念與名詞 ``` <button onclick="action1()"> global scope </button> <button onclick="acti...
## 課程目標 認識並且能使用 Cookie 相關功能 ## 課程內容 大名鼎鼎的 cookie,很多人在科技新聞上都聽過 某某公司利用網頁 cookie 追蹤個資、某某公司偷偷用 cookie 分享個資 這類新聞提到的 cookie,就是本課在說的 cookie ...
如果你是網頁設計師,或者開發的網站以公司介紹、形象網站為主 那麼目前為止的課程,已讓你具備相當的動態網頁開發能力 各種特效與視覺效果,你都做得出來 甚至更複雜的動態效果,直接上網找現成的套件,也都不是問題,你都能夠自行研究&導入了 不過,如果需要開發與伺服器互動的應用程式,例...
框架背後有什麼必學觀念的?這篇文章簡單整理如下 原文出處:https://dev.to/lexlohr/concepts-behind-modern-frameworks-4m1g --- 很多初學者會問“我應該學哪個框架?”和“學一個框架之前需要學多少JS或TS?” - 無數自以...
在這份教材中,實際使用了多個第三方套件,來達成功能 不斷上網找適合套件、翻文件、找範例程式碼、確認堪用,是軟體工程師的日常 到處用現成套件,其實滿好玩的,可以做到很多強大的效果,也在這個過程中,了解實務上要如何跟第三方套件互動 --- 如果你是網頁設計師,目前為止的能力,已經...
## 課程目標 認識並且能使用 vanilla-lazyload 套件 ## 課程內容 這次的套件是 https://github.com/verlok/vanilla-lazyload 文件與 demo 在 https://www.andreaverlicchi.eu/va...
## 課程目標 認識並且能使用 autosize 套件 ## 課程內容 這次的套件是 https://github.com/jackmoore/autosize 文件與 demo 在 https://www.jacklmoore.com/autosize/ 這是一個讓 ...
進入到 JavaScript 基礎課程的第四部份 你已經算是有了初步的前端開發與設計能力了 實務上,我們在專案中大部份的功能、元件,都會去找找看「現成的」、「開源專案」來使用 也就是如果已經有人做過了、有人分享過了,如果堪用,基本上就不會自己重做一個 因為成本差太多,什麼都自...
建議您將自己完成的網站分享給您的朋友,讓大家看看您最新學會的技能! 完成這些,你就完成這次的課程目標了! 想成為網頁設計師的朋友,之後可以開始找更多資源學習CSS的進階技術。 想成為前端工程師的朋友,之後可以開始找 JavaScript 的資源學習。 想成為後端工程師的朋友,...
在這份教材中,實際練習了實務上常見的 UI 元件 雖然只有少少幾個元件,但已能滿足許多網站設計需求 實務上,不會經常需要手做這些元件 通常會拿現成的 UI 套件包當作基礎,接著客製化與修改,例如最知名的 Bootstrap 套件 但是,不論是網頁設計師、前端工程師,在使用現成...
## 課程目標 認識並且能實做 collapse 效果 ## 課程內容 collapse 中文叫「折疊」效果,也就是內容可以展開、收起的效果 當頁面上「資訊非常多、多到難以閱讀」的時候,會使用這個效果來精簡資訊 通常用在 FAQ 常見問題集的頁面 一行一行列出各種...
## 課程目標 認識並且能實做表單驗證 ## 課程內容 雖然表單欄位驗證,可以用 alert 跳訊息提醒就好 但因為 alert 視窗,普遍被認為太醜、功能太弱,設計師通常會想要做得更漂亮一點 欄位驗證的 UX 可簡單可複雜,可以在送出表單的時候驗證,也可以在打字輸入的...
## 課程目標 認識並且能實做 modal 元件 ## 課程內容 modal 中文叫「互動視窗」元件,也有人叫「燈箱」或者「視窗」 這是幾乎所有網站都會用到的元件 台灣各大媒體網站常見的「蓋板廣告」,就算是一種「視窗」 各大社群網站,逛一逛就跳出「視窗」強迫你登入...
## 課程目標 認識並且能實做 toast 元件 ## 課程內容 toast 中文叫「吐司」元件,就跟烤土司機,烤好吐司會跳出來一樣 用這元件來讓一些操作回饋訊息跳出,可以讓使用者體驗(User Experience,簡稱 UX)更好 很多網站因為沒有做好適當的 toa...
## 課程目標 認識並且能實做 alert 元件 ## 課程內容 alert 中文叫「示警」元件,當有訊息要公告在網站上,就可使用 或者當用戶執行了某些動作,在頁面上要提示、回饋訊息的時候,也可使用 通常要將 alert 做成幾種不同樣式,根據不同使用情境來使用 ...
本課程為 JavaScript 基礎課程的第三部份 在前兩部份的課程中,已經學會程式設計的基本觀念,以及 DOM 操作的基本方法 在這次的課程,我們將練習製作實務上常用的 UI 元件 藉由這次練習,強化在前兩部份課程學到的知識 --- 身為工程師,常常要做一些沒做過的功...
每週二晚上《CodeLove Talk》直播! 聊聊科技新聞,一起討論軟體開發相關的話題!