iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 1561 瀏覽

鐵人賽自我挑戰組 DAY 21

JavaScript老學徒筆記—馬步篇系列第 22 篇

技術【Day21】給我一個節點，我可以把網頁改頭換面

「DOM API 定義了 JavaScript 存取、改變 HTML 架構、內容、樣式的方法，甚至對節點綁定的事件。」前一篇的內容，是關於 JavaScri...

popeye_ux ‧ 2021-09-21

0 Like 0 留言 548 瀏覽

技術 HTML5-解決數值輸入框可以輸入字母"e"及"."問題

<input id="phone" type="number" oninput="maxLengthCh...

璽安娜 ‧ 2021-08-04

1 Like 0 留言 1286 瀏覽

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

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

RIN ‧ 2020-11-16

5 Like 1 留言 2978 瀏覽

鐵人賽 Modern Web

JavaScript基本功修煉系列第 31 篇

技術 JavaScript基本功修練：Day31 - 完賽了，然後呢？

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

Alysa Chan ‧ 2020-10-16 ‧團隊十萬伏bug打字團

0 Like 0 留言 786 瀏覽

鐵人賽 Modern Web DAY 30

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 30 篇

技術 [Day 30] - 終成行男

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

chasel1020 ‧ 2020-10-15

1 Like 0 留言 3373 瀏覽

鐵人賽 Modern Web DAY 29

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 29 篇

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

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

chasel1020 ‧ 2020-10-14

0 Like 0 留言 896 瀏覽

鐵人賽 Modern Web DAY 28

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 28 篇

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

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

chasel1020 ‧ 2020-10-13

0 Like 0 留言 1061 瀏覽

鐵人賽自我挑戰組 DAY 30

溫故知新 JavaScript 系列第 30 篇

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

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

AWEI ‧ 2020-10-13

0 Like 0 留言 952 瀏覽

鐵人賽 Modern Web DAY 27

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 27 篇

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

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

chasel1020 ‧ 2020-10-12

0 Like 0 留言 986 瀏覽

鐵人賽 Modern Web DAY 26

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 26 篇

技術 [Day 26] - Gatsby feat. WordPress

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

chasel1020 ‧ 2020-10-11

0 Like 0 留言 4042 瀏覽

鐵人賽 Modern Web DAY 25

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 25 篇

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

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

chasel1020 ‧ 2020-10-10

0 Like 0 留言 938 瀏覽

鐵人賽 Modern Web DAY 24

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 24 篇

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

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

chasel1020 ‧ 2020-10-09

0 Like 0 留言 1106 瀏覽

鐵人賽 Modern Web DAY 23

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 23 篇

技術 [Day 23] - Gatsby Image

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

chasel1020 ‧ 2020-10-08

3 Like 1 留言 739 瀏覽

鐵人賽 Modern Web DAY 30

實作經典 JavaScript 30 系列第 30 篇

技術 Day30: 完賽心得

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

喬依司 ‧ 2020-10-08 ‧團隊自討苦吃三十天#像極了愛情

0 Like 0 留言 1010 瀏覽

鐵人賽 Modern Web DAY 22

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 22 篇

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

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

chasel1020 ‧ 2020-10-07

1 Like 0 留言 1049 瀏覽

鐵人賽 Modern Web DAY 29

實作經典 JavaScript 30 系列第 29 篇

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

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

喬依司 ‧ 2020-10-07 ‧團隊自討苦吃三十天#像極了愛情

0 Like 0 留言 633 瀏覽

鐵人賽 Modern Web DAY 21

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 21 篇

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

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

chasel1020 ‧ 2020-10-06

1 Like 0 留言 1467 瀏覽

鐵人賽 Modern Web DAY 28

實作經典 JavaScript 30 系列第 28 篇

技術 Day28: Sticky Nav

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

喬依司 ‧ 2020-10-06 ‧團隊自討苦吃三十天#像極了愛情

0 Like 0 留言 594 瀏覽

鐵人賽 Modern Web DAY 20

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 20 篇

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

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

chasel1020 ‧ 2020-10-05

1 Like 0 留言 1153 瀏覽

鐵人賽 Modern Web DAY 27

實作經典 JavaScript 30 系列第 27 篇

技術 Day27:Speech Synthesis

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

喬依司 ‧ 2020-10-05 ‧團隊自討苦吃三十天#像極了愛情

0 Like 0 留言 832 瀏覽

鐵人賽 Modern Web DAY 21

JavaScript初心者ノ研究日記。系列第 21 篇

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

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

RIN ‧ 2020-10-04

0 Like 0 留言 663 瀏覽

鐵人賽 Modern Web DAY 19

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 19 篇

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

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

chasel1020 ‧ 2020-10-04

1 Like 0 留言 897 瀏覽

鐵人賽 Modern Web DAY 26

實作經典 JavaScript 30 系列第 26 篇

技術 Day26: Follow Along Links

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

喬依司 ‧ 2020-10-04 ‧團隊自討苦吃三十天#像極了愛情

0 Like 0 留言 1076 瀏覽

鐵人賽 Modern Web DAY 18

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 18 篇

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

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

chasel1020 ‧ 2020-10-03

2 Like 0 留言 945 瀏覽

鐵人賽 Modern Web DAY 25

實作經典 JavaScript 30 系列第 25 篇

技術 Day25: Adding Up Times With Reduce

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

喬依司 ‧ 2020-10-03 ‧團隊自討苦吃三十天#像極了愛情

0 Like 0 留言 1038 瀏覽

鐵人賽 Modern Web DAY 17

從ES到ESNext - 30天輕鬆掌握ECMAScript 系列第 17 篇

技術 ES2017(ES8) - async / await

本系列文章經過重新編排和擴充，已出書為ECMAScript關鍵30天。原始文章因當時準備時程緊迫，多少有些許錯誤。為了避免造成讀者的困擾，以及配合書籍的內容規...

Yuri Tsai ‧ 2020-10-02

0 Like 0 留言 1034 瀏覽

鐵人賽 Modern Web DAY 17

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 17 篇

技術 [Day 17] - 主題 Theme

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

chasel1020 ‧ 2020-10-02

1 Like 0 留言 800 瀏覽

鐵人賽 Modern Web DAY 24

實作經典 JavaScript 30 系列第 24 篇

技術 Day24: Sort Without Articles

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

喬依司 ‧ 2020-10-02 ‧團隊自討苦吃三十天#像極了愛情

0 Like 0 留言 1079 瀏覽

鐵人賽 Modern Web DAY 16

雖然你不是木村拓哉，但它也可以讓你變很行 - Gatsby.js 系列第 16 篇

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

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

chasel1020 ‧ 2020-10-01

3 Like 0 留言 881 瀏覽