63 個專案實戰,寫出作品集,讓面試官眼前一亮!
作為開發人員,我們在終端機上花費了大量時間。有很多有用的 CLI 工具,它們可以讓您在命令行中的生活更輕鬆、更快速,而且通常更有趣。 這篇文章概述了 50 個必備的好用 CLI 工具。 原文出處:https://dev.to/lissy93/cli-tools-you-cant-live...
讓我總結說明一下,老方法、新方法的關鍵思維差異: - 在老方法中,工程師眼中主要關心 html,開發過程會一直去思考 html 結構,因為「應用程式的狀態(資料)」就存在 html 之中,html 同時是狀態、也是 UI - 在新方法中,工程師眼中主要關心 data model,通常就是...
## 課程目標 繼續熟悉 data model 的觀念 ## 課程內容 有了 data model 與 render function 之後 除了在更新資料時,腦中一律只要想著 data model 就好 就連在撈資料時,也一樣只要思考 data model 就好,非常...
## 課程目標 能夠在陣列更新元素 繼續熟悉 anonymous function 的觀念 ## 課程內容 這課先介紹一種資料型態:布林(boolean) 這種資料型態,幾乎所有程式語言都有,是一種寫程式必備的基本資料型態 ``` var x = true; ...
## 課程目標 繼續熟悉 render function 的觀念 ## 課程內容 render function 雖然只是將 data model 轉換成 UI 呈現在 root 裡面 但是根據資料內容的不同,render function 當然也可以有各種條件判斷、巢狀結構...
## 課程目標 能夠從陣列刪除元素 認識 for in 迴圈寫法 認識匿名函式(anonymous function) ## 課程內容 在 JavaScript 中,刪除陣列元素的方法,有超多種 這邊介紹一種根據索引刪除的方法 ``` var fruits...
## 課程目標 能夠新增元素到陣列 ## 課程內容 因為我們不再使用「在各處胡亂更新各處 DOM」的寫法 現在要認真開始學習,如何在 JavaScript 中,用各種變數、資料型別,建立出 data model 這一課來學學新增元素到陣列的方法 ``` <but...
## 課程目標 認識 data model 的觀念 認識 render function 的觀念 ## 課程內容 如果電商網站上有這樣的內容 ``` <div> 商品名稱:<span id="name">冬季外套</span> 價格:<span id="p...
身為前端新手學習者,雖然你已經知道怎麼寫 UI 小元件、怎麼寫簡單小工具 但是看著自己每天在用的那些網站、大型科技公司開發的 web application(網路應用程式) 你一定常常心想:這也太華麗了,畫面上 DOM 的變化很複雜、很頻繁,我好像寫不出來呀? 別擔心,這是因為你目...
## 課程目標 認識 AJAX 錯誤處理 ## 課程內容 在前一課,我們說過以下的話 > 有些任務現在還不會立刻執行,但我先把要執行的任務交待清楚,時間點到的時候,就執行 > 以 UI 動作來說,時間點就是 `onclick` 之時、`onchange` 之時 >...
## 課程目標 認識基本的 AJAX 原理 ## 課程內容 這一課來認識大名鼎鼎的 AJAX 觀念 AJAX 全名 Asynchronous JavaScript and XML 簡單來說,就是「非同步從主機取得資料來更新網頁內容」的技術 舊式的網頁,都是瀏覽器向...
框架背後有什麼必學觀念的?這篇文章簡單整理如下 原文出處:https://dev.to/lexlohr/concepts-behind-modern-frameworks-4m1g --- 很多初學者會問“我應該學哪個框架?”和“學一個框架之前需要學多少JS或TS?” - 無數自以...
## 課程目標 認識並且能使用 jQuery 套件 ## 課程內容 這一課要教的東西比較有爭議 jQuery 是 2006 - 2015 年代,前端網頁開發的王者 當時的瀏覽器廠商眾多,網頁規格 API 支援方式不同、不完整(尤其是 IE 一堆奇怪的 API) 當...
在這份教材中,實際練習了實務上常見的 UI 元件 雖然只有少少幾個元件,但已能滿足許多網站設計需求 實務上,不會經常需要手做這些元件 通常會拿現成的 UI 套件包當作基礎,接著客製化與修改,例如最知名的 Bootstrap 套件 但是,不論是網頁設計師、前端工程師,在使用現成...
## 課程目標 認識並且能實做表單驗證 ## 課程內容 雖然表單欄位驗證,可以用 alert 跳訊息提醒就好 但因為 alert 視窗,普遍被認為太醜、功能太弱,設計師通常會想要做得更漂亮一點 欄位驗證的 UX 可簡單可複雜,可以在送出表單的時候驗證,也可以在打字輸入的...
## 課程目標 認識並且能實做 modal 元件 ## 課程內容 modal 中文叫「互動視窗」元件,也有人叫「燈箱」或者「視窗」 這是幾乎所有網站都會用到的元件 台灣各大媒體網站常見的「蓋板廣告」,就算是一種「視窗」 各大社群網站,逛一逛就跳出「視窗」強迫你登入...
## 課程目標 認識並且能實做 toast 元件 ## 課程內容 toast 中文叫「吐司」元件,就跟烤土司機,烤好吐司會跳出來一樣 用這元件來讓一些操作回饋訊息跳出,可以讓使用者體驗(User Experience,簡稱 UX)更好 很多網站因為沒有做好適當的 toa...
## 課程目標 認識並且能實做 alert 元件 ## 課程內容 alert 中文叫「示警」元件,當有訊息要公告在網站上,就可使用 或者當用戶執行了某些動作,在頁面上要提示、回饋訊息的時候,也可使用 通常要將 alert 做成幾種不同樣式,根據不同使用情境來使用 ...
本課程為 JavaScript 基礎課程的第三部份 在前兩部份的課程中,已經學會程式設計的基本觀念,以及 DOM 操作的基本方法 在這次的課程,我們將練習製作實務上常用的 UI 元件 藉由這次練習,強化在前兩部份課程學到的知識 --- 身為工程師,常常要做一些沒做過的功...
## 課程目標 學習基本的 for 迴圈用法 ## 課程內容 之前的課程中,我們學過陣列&索引的基本用法 實務上,使用陣列時,通常會需要寫一些 for 迴圈搭配使用 for 的寫法有很多種,我們先學 for of 的寫法就好 ``` var fruits = [...
精選技術文章、免費程式設計資源、以及業界重要新聞!