Hooks 是 React 最強大的功能之一。 它們使我們能夠輕鬆地在應用程式的元件中重用功能。掛鉤的最大優點在於它們的可重用性——您可以跨元件和專案重用掛鉤。 以下是我在每個 React 專案中重複使用的七個最重要的鉤子。今天就試一試,看看它們在建置您自己的 React 應用程式時是否...
練習1 ── alert 示警元件 https://jsfiddle.net/birdie2019/4ur1c7xf/34/ 練習2 ── toast 吐司元件 https://jsfiddle.net/birdie2019/fmc6b8ht/49/ 研究了一下setTimeout()用...
框架背後有什麼必學觀念的?這篇文章簡單整理如下 原文出處:https://dev.to/lexlohr/concepts-behind-modern-frameworks-4m1g --- 很多初學者會問“我應該學哪個框架?”和“學一個框架之前需要學多少JS或TS?” - 無數自以...
軟體工程師寫部落格,對於職業生涯很有幫助,有很多好處。這篇文章的作者簡單分享心得。 原文出處:https://dev.to/nasirovelchin/every-software-developer-should-write-a-blog-4622 --- 作為一名軟體工程師,我...
在這份教材中,實際使用了多個第三方套件,來達成功能 不斷上網找適合套件、翻文件、找範例程式碼、確認堪用,是軟體工程師的日常 到處用現成套件,其實滿好玩的,可以做到很多強大的效果,也在這個過程中,了解實務上要如何跟第三方套件互動 --- 如果你是網頁設計師,目前為止的能力,已經...
## 課程目標 認識並且能使用 jQuery 套件 ## 課程內容 這一課要教的東西比較有爭議 jQuery 是 2006 - 2015 年代,前端網頁開發的王者 當時的瀏覽器廠商眾多,網頁規格 API 支援方式不同、不完整(尤其是 IE 一堆奇怪的 API) 當...
### 第1課 ── 基本的函數操作、onclick 事件 https://jsfiddle.net/j80d9gao/17/ --- ### 第2課 ── 基本的變數操作、從 html 取得內容 https://jsfiddle.net/09v5oadu/23/ --- ### 第...
## 課程目標 認識並且能實做表單驗證 ## 課程內容 雖然表單欄位驗證,可以用 alert 跳訊息提醒就好 但因為 alert 視窗,普遍被認為太醜、功能太弱,設計師通常會想要做得更漂亮一點 欄位驗證的 UX 可簡單可複雜,可以在送出表單的時候驗證,也可以在打字輸入的...
## 課程目標 能動態在 DOM 樹存取元素的 class 能動態在 DOM 樹修改元素的 class ## 課程內容 學到現在,應該會發現,DOM 元素,一堆屬性,都可以直接讀取、修改,很方便 連我們設計樣式會用到的 class 也是一樣簡單,很方便 ``` ...
## 課程目標 學會「數字」資料型態 學會基本的資料型態轉換 ## 課程內容 在之前的課程中,我們學會了宣告字串、以及字串的連接 ``` var str1 = '新年'; var str2 = '快樂'; var str3 = var1 + str2; aler...
## 課程目標 學會基本的 if/else 條件判斷,進行流程控制 學會基本的字串比較 ## 課程內容 這課來學一點流程控制 ``` var str1 = '星期一'; var str2 = '星期二'; var str3 = '星期三'; var str4 =...
## 課程目標 學會基本的陣列取值 能從 html 元素中,得到用戶選取的內容 ## 課程內容 這課先來學一點陣列觀念 ``` var colors = ['red', 'orange', 'yellow', 'green']; ``` 中括號 `[]` 包起...
## 課程目標 學會基本的變數賦值 學會基本的字串連接 能從 html 元素中,得到用戶輸入的內容 ## 課程內容 在上一課的內容中,我們這樣來顯示訊息視窗 ``` alert('你點擊了按鈕!'); ``` 像這樣單引號包起來的內容 `'你點擊了按鈕!...
## 課程目標 學會定義函數的基本方法 學會呼叫函數的基本方法 學會 onclick 事件的用法 ## 課程內容 請打開這個網站,用這個網站來練習&寫作業: https://jsfiddle.net 在學 html/css 時,我們會給元素一些屬性,例如 i...
## 簡介 CSS 是任何網站設計的重要組成部分,但理解其中一些細微差別觀念可能不容易。其中最重要的觀念之一是 rem 和 em 之間的區別,以及為什麼/何時應該使用它們。 原文出處:https://dev.to/refine/rem-vs-em-everything-you-need-...
想要在 2023 年的 **Web 開發** 旅程中一帆風順嗎?參考看看這些免費工具吧! 原文出處:https://dev.to/ruppysuppy/7-free-tools-for-the-modern-web-developers-of-2023-4lhh ## 1. [Omats...
# 第4課 課程目標 能夠讓元素在不同裝置上面,以不同的順序顯示。 # 第4課 課程內容 請參考:https://getbootstrap.com/docs/5.3/layout/columns/#order-classes # 第4課 作業 承接前一課的作業。 ...
# 第4課 課程目標 學會使用 Bootstrap 的卡片元件。 # 第4課 課程內容 卡片式設計近幾年非常流行,在各大網站中都看得到它。 它的功能非常通用,可以在各種場景中使用,這一課要學習使用它。 請閱讀入門教學: https://www.w3schools....
# 第3課 課程目標 能夠用 Bootstrap 的網格系統做出多欄式排版、各種排版。 # 第3課 課程內容 業界工程師會去使用 Bootstrap,除了美感之外,通常還有一大理由就是想用它的網格系統。 以網頁設計常見的多欄式設計來說,手寫 html 跟 css 實在有點麻煩...
# 第4課 課程目標 學會使用HTML的table來整理、顯示資料 能夠做出漂亮的表格 # 第4課 課程內容 用jsfiddle來練習: https://jsfiddle.net 這次要寫HTML跟CSS兩個區塊~ 請閱讀這份教材: [HTML Tables]...
每週二晚上《CodeLove Talk》直播! 開放觀眾 Call-in,一起討論軟體開發相關的話題!