iT邦幫忙

#javascript相關文章
共有 111 則文章

技術 JavaScript ⑅ES6:展開運算子 & 其餘運算子

展開運算子及 其餘運算子( 又稱 其餘參數 ) 他們有共通特點,那就是「 都跟陣列有關 」   寫法就是 ... 沒錯,就是 「 ... 」( 寫在文字編輯器中...

鐵人賽 Modern Web
JavaScript基本功修煉 系列 第 31

技術 JavaScript基本功修練:Day31 - 完賽了,然後呢?

最終完賽了,可以明正言順發廢文!趁著剛剛完賽的心情,趕緊寫一下心得,反思整個過程裏,除了技術以外所學習到的東西。 坦白說,雖然看到六角學院一直在推鐵人賽,但我一...

鐵人賽 Modern Web DAY 30

技術 [Day 30] - 終成行男

呼,想當初在鐵人賽開賽前還在猶豫到底要不要開賽呢? 參賽後是要寫什麼主題呢? 一探 React Native 、React 百寶箱 blablabla 太多想寫...

鐵人賽 Modern Web DAY 29

技術 [Day 29] - Gatsby v.s. Next

終於來到尾聲了,今天我們將對 Next.js 來做一番介紹,介紹完後,我們會跟這二十九天來的戰友 Gatsby 來做一次簡單的比較,最後會告訴大家,什麼時候該選...

鐵人賽 Modern Web DAY 28

技術 [Day 28] - Gatsby feat. EC ( 下 )

昨天我們完成了一個基本的購物流程,但程式碼內有著不安全的問題,今天我們要用 .env 的形式來規避這個風險,至於怎麼做呢?就讓我們看下去吧! 補充說明一下 Sk...

鐵人賽 自我挑戰組 DAY 30
溫故知新 JavaScript 系列 第 30

技術 Day30- 最後完成代辦事項 To DO List 小工具

大家好,來到 IT 鐵人賽最後一天了,終於要進入尾聲了! 今天我們要整合這三十天來所學到的知識量,來完成一個待辦事項小工具,這工具要做到以下幾個功能! 1....

鐵人賽 Modern Web DAY 27

技術 [Day 27] - Gatsby feat. EC ( 上 )

這邊的 EC 指的是 Electronic Commerce,也就是所謂的電子商務,我們將用一到兩章節的篇幅來介紹如何用 Gatsby 來建立一個基礎的電子商務...

鐵人賽 Modern Web DAY 26

技術 [Day 26] - Gatsby feat. WordPress

今天我們要與鼎鼎大名的 WordPress 進行串接,將 WordPress 站內的資料藉由 GraphQL 來撈取,並在 Gatsby 專案中,將這些資料做一...

鐵人賽 Modern Web DAY 25

技術 [Day 25] - 會員驗證 ( User Authentication )

有時候,我們在做專案時,總會有會員的需求,大概上就是指有些內容只有登入過的使用者能夠瀏覽,今天我們就要來實作這樣的流程。 在 Gatsby 中,我們透過 API...

鐵人賽 Modern Web DAY 24

技術 [Day 24] - 動態導覽列 ( Dynamic Navigation )

身為一個專業的網站,怎麼可以讓使用者在我們的網站中迷路了呢? 所以今天我們要來做導覽列 ( Nav Bar ),我們會用 Gatsby 中的資料來動態的產生,而...

鐵人賽 Modern Web DAY 23

技術 [Day 23] - Gatsby Image

不知道有沒有細心的讀者發現,我們在做部落格或一些簡單的入門專案時,都沒有圖片的存在? 人都是視覺的動物,對於一個熱門的部落格來說,怎麼可以缺少了圖片呢? 今天我...

鐵人賽 Modern Web DAY 30
實作經典 JavaScript 30 系列 第 30

技術 Day30: 完賽心得

第30天,不免俗要來寫個完賽心得 雖然javascript-30還差個幾天,才能把全部的實例都做完 但還是要給自己拍拍手,利用這30天養成了一個好習慣 而且真的...

鐵人賽 Modern Web DAY 22

技術 [Day 22] - 建立屬於自己的主題 ( 五 )

今天,我們要把樣式套用上去,並且幫做好的主題發佈到 NPM 上去供使用者使用,也會是建立屬於自己的主題的最後一章,就讓我們開始吧! 安裝相關套件並設定 首先我們...

鐵人賽 Modern Web DAY 29
實作經典 JavaScript 30 系列 第 29

技術 Day29: Event Capture, Propagation, Bubbling and Once

WES BOS系列影片 Alex快速導讀系列影片 今天比較偏觀念的講解 主要是希望能較深入理解addEventListener() 學習DOM的事件機制,包括事...

鐵人賽 Modern Web DAY 21

技術 [Day 21] - 建立屬於自己的主題 ( 四 )

上一個章節,我們完成了將資料轉變為列表頁、內頁,今天我們要來把昨天做的內頁再做一些微調,新增一個時間顯示的邏輯,並且將 Gatsby-theme-events...

鐵人賽 Modern Web DAY 28
實作經典 JavaScript 30 系列 第 28

技術 Day28: Sticky Nav

WES BOS系列影片 Alex快速導讀系列影片 今天針對常用的Navbar做fix的狀態 這真的是很常見的功能,可以立馬學起來 1.先抓出NavBar的位置,...

鐵人賽 Modern Web DAY 20

技術 [Day 20] - 建立屬於自己的主題 ( 三 )

昨天我們完成了 Slug 的添加跟靜態資料的讀取,今天我們要建立一個頁面模板來動態的創建頁面,話不多說,就直接來進入主題吧! 使用 createPages 來動...

鐵人賽 Modern Web DAY 27
實作經典 JavaScript 30 系列 第 27

技術 Day27:Speech Synthesis

WES BOS系列影片 Alex快速導讀系列影片 今天來認識 Web Speech API中的兩個功能 一個是 SpeechSynthesisUtterance...

鐵人賽 Modern Web DAY 21

技術 二十一日目:JavaScript ⑅unshift  ⑅splice  ⑅sort  ⑅copyWithin  ⑅fill ノ章

おはー(U 'ᴗ' U)⑅ SONYKO 打油。 連假最後一天、再上幾天班又放假了ok 的。   不知不覺寫到21 天了耶, 來點 ⑅中場感言⑅ 好了 ✎ :...

鐵人賽 Modern Web DAY 19

技術 [Day 19] - 建立屬於自己的主題 ( 二 )

前一篇文章,我們成功的建立了環境,今天我們要來添加一些靜態資料到專案中,並用這些資料來創建一些頁面。 將資料添加到主題中 首先,我們在 Gatsby-theme...

鐵人賽 Modern Web DAY 26
實作經典 JavaScript 30 系列 第 26

技術 Day26: Follow Along Links

WES BOS系列影片 Alex快速導讀系列影片 ​ 今天的練習是用js控制滑鼠游標, 當滑鼠游標到達當前的連結時, 我們使用一個新的方法 getBoundin...

鐵人賽 Modern Web DAY 18

技術 [Day 18] - 建立屬於自己的主題 ( 一 )

在前一章節中,我們使用了官方提供的主題去快速建立了一個部落格,後續幾個章節中,我們要建立一個主題,並將它放到 NPM 上供人下載使用。 設置工作區 首先,我們要...

鐵人賽 Modern Web DAY 25
實作經典 JavaScript 30 系列 第 25

技術 Day25: Adding Up Times With Reduce

WES BOS系列影片 Alex快速導讀系列影片 今天的練習會用到reduce() 還有用一些數學的運算,將秒數換算成時分秒 然後又複習了一下dataset的用...

鐵人賽 Modern Web DAY 17

技術 [Day17] ES2017(ES8) - Await & Async

在 ES2015 中,將 Promise 標準化,解決了以往要寫非同步時容易產生的 callback hell。不過寫久了就會發現,如果有多個非同步,或是有複雜...

鐵人賽 Modern Web DAY 17

技術 [Day 17] - 主題 Theme

今天我們要來學習如何使用主題,先前我們辛辛苦苦安裝了很多套件、調整了很多設定、寫了不少組件,才做出一個較為基礎的部落格版型,而如果我們套用主題,可能在短短一小時...

鐵人賽 Modern Web DAY 24
實作經典 JavaScript 30 系列 第 24

技術 Day24: Sort Without Articles

WES BOS系列影片 Alex快速導讀系列影片 ​ 今天要結合正規表達式跟sort()來做排序的功能 作者這邊假設了一個情境 就是我們拿到了一串樂團的清單,...

鐵人賽 Modern Web DAY 16

技術 [Day 16] - 部署 Gatsby 到網路上

經由前面幾個章節,我們學會了 創建一個 Gatsby 的專案 建立頁面與元件 為元件增加樣式 為專案增加套件 使用 GraphQL 來查詢資料 如何動態的建立...

鐵人賽 Modern Web DAY 23
實作經典 JavaScript 30 系列 第 23

技術 Day23: Mouse Move Shadow

WES BOS系列影片 Alex快速導讀系列影片 今天的練習重點是抓取DOM容器的座標與mousemove事件 我們要做一個文字陰影與滑鼠互動的效果 要做出這個...

鐵人賽 Modern Web DAY 15

技術 [Day 15] - 建置第一個 Blog - 文章內頁 ( 下 )

在前一章節的尾聲,我們成功地在文章節點中加入 Slug ,今天我們要來用這些資訊建立一個共用的頁面,根據點擊的文章 Slug 來帶入對應的內容,那就讓我們開始吧...

鐵人賽 Modern Web DAY 22
實作經典 JavaScript 30 系列 第 22

技術 Day22: LocalStorage(二)

我們就必須使用LocalStorage 來讓瀏覽器記住剛才輸入的資料 紀錄完成後,同時將表單的回復成未輸入的狀態 localStorage.setItem('i...