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

1 Like 0 留言 8229 瀏覽

鐵人賽 Modern Web DAY 29

JavaScript 初心者筆記系列第 29 篇

技術 JavaScript 初心者筆記: AJAX - post 與傳送格式

昨天我們學到了用 get 方式發送資料請求，今天要繼續講如何用 post 發送資料請求。 post — 傳統表單輸入介紹這個功能常用在註冊帳號時，將使用者輸入...

Grete Ma ‧ 2019-09-30

1 Like 0 留言 13920 瀏覽

鐵人賽 Modern Web DAY 28

JavaScript 初心者筆記系列第 28 篇

技術 JavaScript 初心者筆記: AJAX - 從遠端即時撈取資料

什麼是 AJAX ？ AJAX 是 Asynchronous JavaScript and XML（非同步的 JavaScript 與 XML 技術）的縮寫，簡...

Grete Ma ‧ 2019-09-29

0 Like 0 留言 3053 瀏覽

鐵人賽 Modern Web DAY 27

JavaScript 初心者筆記系列第 27 篇

技術 JavaScript 初心者筆記: 瀏覽器物件模型 (BOM)

關於瀏覽器物件模型 (BOM) BOM，是 JavaScript 與瀏覽器溝通的橋樑，JavaScript 可以透過 BOM 對瀏覽器進行各種操作，包含開啟及關...

Grete Ma ‧ 2019-09-28

2 Like 0 留言 2679 瀏覽

鐵人賽 Modern Web DAY 26

JavaScript 初心者筆記系列第 26 篇

技術 JavaScript 初心者筆記: 簡易 to-do list 練習

學會了 localStorage 跟 data-* 屬性後，今天就可以結合這兩者試著寫一個 to-do list 囉！先貼個成品的程式碼連結。 HTML 部...

Grete Ma ‧ 2019-09-27

5 Like 0 留言 12680 瀏覽

鐵人賽 Modern Web DAY 25

JavaScript 初心者筆記系列第 25 篇

技術 JavaScript 初心者筆記: HTML 的自訂資料屬性 - data-*

data-* 屬性在 HTML 標籤中可以放入自創的屬性，這麼做的目的是去綁定 DOM 與資料以及驗證資料。語法是 data-*，把 * 代換成自訂屬性名稱跟...

Grete Ma ‧ 2019-09-26

3 Like 0 留言 12780 瀏覽

鐵人賽 Modern Web DAY 24

JavaScript 初心者筆記系列第 24 篇

技術 JavaScript 初心者筆記: localStorage - 將網頁上的資料儲存在瀏覽器

資料如何儲存在瀏覽器？透過 HTML 中的網頁儲存物件，可以將網頁中的資料儲存在使用者的瀏覽器當中。在 HTML5 問世之前，我們只能將小筆的資料儲存在 c...

Grete Ma ‧ 2019-09-25

2 Like 0 留言 8775 瀏覽

鐵人賽 Modern Web DAY 23

JavaScript 初心者筆記系列第 23 篇

技術 JavaScript 初心者筆記: 常用事件及相關語法分享

前一篇筆記介紹的是事件基本概念，而本篇將介紹一些在操作事件時常用的語法。表單內容更動時觸發 - change 此事件僅限用於元素、和元素，當元素的...

Grete Ma ‧ 2019-09-24

2 Like 1 留言 9643 瀏覽

鐵人賽 Modern Web DAY 22

JavaScript 初心者筆記系列第 22 篇

技術 JavaScript 初心者筆記: 事件基本觀念（事件參數、事件監聽）

什麼是事件(event)？事件是 JavaScript 應用的心臟，也是把所有東西黏在一起的膠水，當我們與網頁進行某些互動時，事件就發生了。例如，當使用者點擊...

Grete Ma ‧ 2019-09-23

1 Like 0 留言 4169 瀏覽

鐵人賽 Modern Web DAY 21

JavaScript 初心者筆記系列第 21 篇

技術 JavaScript 初心者筆記: 應用 innerHTML 與 for 迴圈將資料渲染至網頁

學會了在 HTML 新增內容之後，就可以接著學習如何運用之前學到的 for 迴圈，把資料撈取出來後渲染到網頁了。今天的筆記將會以範例程式碼為主體，介紹如何將資料...

Grete Ma ‧ 2019-09-22

3 Like 1 留言 24123 瀏覽

鐵人賽 Modern Web DAY 20

JavaScript 初心者筆記系列第 20 篇

技術 JavaScript 初心者筆記: DOM - 如何用 JS 新增 HTML 內容

今天這篇文章要介紹兩種在 DOM 樹中增加內容的方法，分別為 innerHTML 特性和 DOM 控制處理（createElement() + appendCh...

Grete Ma ‧ 2019-09-21

2 Like 0 留言 19128 瀏覽

鐵人賽 Modern Web DAY 19

JavaScript 初心者筆記系列第 19 篇

技術 JavaScript 初心者筆記: DOM - 如何用 JS 更改 HTML & CSS 屬性

今天要接續昨天的主題，繼續談在選取 DOM 之後，有哪些語法可以動態更改 HTML 元素的屬性及 CSS 屬性。增加 / 更改屬性的值 - setAttri...

Grete Ma ‧ 2019-09-20

2 Like 0 留言 5466 瀏覽

鐵人賽 Modern Web DAY 18

JavaScript 初心者筆記系列第 18 篇

技術 JavaScript 初心者筆記: DOM - 如何用 JS 選取 HTML 元素

什麼是 DOM？在前面的文章有簡單介紹過，傳送門：JavaScript 初心者筆記: JS 內建物件 - 全域物件篇。DOM 是 Document Objec...

Grete Ma ‧ 2019-09-19

2 Like 2 留言 8482 瀏覽

鐵人賽 Modern Web DAY 17

JavaScript 初心者筆記系列第 17 篇

技術 JavaScript 初心者筆記: 迴圈 + JSON 練習

今天這篇比較偏我個人練習心得，不過既然我的鐵人主題本來就是定位成個人學習筆記，所以我就心安理得地放進來了～什麼是 JSON？一種共通性資料交換的格式，用來...

Grete Ma ‧ 2019-09-18

1 Like 0 留言 1860 瀏覽

鐵人賽 Modern Web DAY 2

~網頁入門~ 系列第 2 篇

技術 Day02-網站的運作與分類

提到網頁，我們常常會聽到「前端」、「後端」這兩個名詞。所以在了解網頁的基本架構之前，我們首先來看看網頁是如何運作的~ 甚麼是前端、後端？前端 (Front-e...

Sherry ‧ 2019-09-18 ‧團隊紅蟳當兵等他開賽

2 Like 0 留言 2903 瀏覽

鐵人賽 Modern Web DAY 16

JavaScript 初心者筆記系列第 16 篇

技術 JavaScript 初心者筆記: 在迴圈中 take a "break"

當我們在執行迴圈時，不一定要從頭到尾都做完，有時候只要找到一個符合條件的值，後面就可以不用跑程式碼了。如果是這種情形，那就可以用關鍵字 break 退出迴圈。...

Grete Ma ‧ 2019-09-17

3 Like 1 留言 23302 瀏覽

鐵人賽 Modern Web DAY 12

React.js 從【0】到【1】推坑計畫系列第 12 篇

技術【Day 12】Styled-component

原本今天要介紹其他主題的，但後來想想既然昨天都介紹 inline-style 了，今天就介紹另一種 styling 的方式 - styled-component...

莫力全 Kyle Mo ‧ 2019-09-16

3 Like 0 留言 16514 瀏覽

鐵人賽自我挑戰組 DAY 1

從門外漢到前端新手系列第 1 篇

技術 Day1 前端自學心得-萬事起頭難

自學之前的掙扎想學網頁前端，卻像在大海中迷航，不知道從何下手嗎？這30篇文章為我的學習做筆記，也分享給自詡為門外漢的你。從準備自學，到開始自學，最後可以執行基...

JinWen ‧ 2019-09-16 ‧團隊好想工作室 v3.0

2 Like 0 留言 1648 瀏覽

鐵人賽 Modern Web DAY 15

JavaScript 初心者筆記系列第 15 篇

技術 JavaScript 初心者筆記: 迴圈如何加總

昨天簡介完迴圈的基本觀念之後，今天要分享一個迴圈加總的範例，透過範例應該能夠更清楚迴圈實際的運作。有一個村莊，裡面有三個農場，要如何透過迴圈計算三個農場的...

Grete Ma ‧ 2019-09-16

0 Like 0 留言 2072 瀏覽

鐵人賽 Modern Web DAY 14

JavaScript 初心者筆記系列第 14 篇

技術 JavaScript 初心者筆記: 迴圈簡介

迴圈可以重複執行同一組程式碼，幫我們處理不斷重複的事情。迴圈會檢測條件，如果條件為 true，便會執行程式碼；接著條件繼續被檢測、程式碼繼續執行，直到條件為 f...

Grete Ma ‧ 2019-09-15

1 Like 1 留言 5949 瀏覽

鐵人賽 Modern Web DAY 11

讓 TypeScript 成為你全端開發的 ACE！系列第 11 篇

技術 Day 11. 前線維護・特殊型別 X 無法無天 - Any & Unknown Type

閱讀本篇文章前，仔細想想看當函式遇到 100% 無法跳脫或會拋出例外的狀況，這時 TypeScript 會如何對該函式進行推論？ never 型別為所...

Maxwell Alexius ‧ 2019-09-21

1 Like 1 留言 6169 瀏覽

鐵人賽 Modern Web DAY 10

讓 TypeScript 成為你全端開發的 ACE！系列第 10 篇

技術 Day 10. 前線維護・特殊型別 X 永無止盡 - Never Type

閱讀本篇文章前，仔細想想看如何跳脫死板定義的型別 type 格式？對狹義物件的屬性下達 undefined 之原始型別跟使用選用屬性（Optional...

Maxwell Alexius ‧ 2019-09-20

0 Like 0 留言 8945 瀏覽

鐵人賽 Modern Web DAY 13

JavaScript 初心者筆記系列第 13 篇

技術 JavaScript 初心者筆記: 判斷式 - if...else / switch 篇

接續昨天學到的比較運算子跟邏輯運算子，今天終於進入正題：判斷式。判斷式是 JavaScript 用來控制流程的，當指定的條件成立時，就會執行後續的指令。判斷式的...

Grete Ma ‧ 2019-09-14

1 Like 0 留言 7624 瀏覽

鐵人賽 Modern Web DAY 8

讓 TypeScript 成為你全端開發的 ACE！系列第 8 篇

技術 Day 08. 前線維護・明文型別 X 格式為王 - Literal Types

閱讀本篇文章前，仔細想想看在什麼樣的情況下，你會怎麼決定要選擇使用 TypeScript 的陣列、元組（Tuple）或列舉（Enumerated）呢？如...

Maxwell Alexius ‧ 2019-09-18

2 Like 2 留言 8814 瀏覽

鐵人賽 Modern Web DAY 7

讓 TypeScript 成為你全端開發的 ACE！系列第 7 篇

技術 Day 07. 前線維護・列舉型別 X 主觀列舉 - Enumerated Types

閱讀本篇文章前，仔細想想看陣列跟元組（Tuple）的差別在哪裡？什麼時候用陣列 / 元組比較適合呢？什麼時候可能不用對函式的參數進行積極註記？試舉個範...

Maxwell Alexius ‧ 2019-09-17

2 Like 0 留言 1983 瀏覽

鐵人賽 Modern Web DAY 12

JavaScript 初心者筆記系列第 12 篇

技術 JavaScript 初心者筆記: 判斷式 - 運算子篇

在正式講到判斷式之前，我想要先來簡介一下跟判斷式有關的運算子，畢竟要學習如何用判斷式判斷條件，總要先知道怎麼設條件吧！其實 JavaScript 裡有好幾種類型...

Grete Ma ‧ 2019-09-13

1 Like 0 留言 6237 瀏覽

鐵人賽 Modern Web DAY 9

React.js 從【0】到【1】推坑計畫系列第 9 篇

技術【Day 9】Component Lifecycle

昨天對 class-based component 有了初步的認識，然而除了 state ，在 hooks 出來以前 class component 還有一項...

莫力全 Kyle Mo ‧ 2019-09-13

2 Like 0 留言 8822 瀏覽

鐵人賽 Modern Web DAY 6

讓 TypeScript 成為你全端開發的 ACE！系列第 6 篇

技術 Day 06. 前線維護・陣列與函式 X 陣列與元組 - Array & Functions & Tuples

閱讀本篇文章前，仔細想想看陣列的推論大致上是如何運作呢？什麼時候要積極去對陣列進行型別註記呢？如果還沒理解完畢的話，可以先翻看前一篇文章喔！...

Maxwell Alexius ‧ 2019-09-16

2 Like 1 留言 10320 瀏覽

鐵人賽 Modern Web DAY 5

讓 TypeScript 成為你全端開發的 ACE！系列第 5 篇

技術 Day 05. 前線維護・陣列型別 X 型別陣列 - Array Types

閱讀本篇文章前，仔細想想看定義一個函式，最需要注意的點有哪些？什麼情形必須積極作型別註記呢？函式的輸出部分通常（但不是全部）可以不用作型別註記的原因為...

Maxwell Alexius ‧ 2019-09-15

5 Like 3 留言 12048 瀏覽

鐵人賽 Modern Web DAY 4

讓 TypeScript 成為你全端開發的 ACE！系列第 4 篇

技術 Day 04. 前線維護・函式型別 X 積極註記 - Function Types

閱讀本篇文章前，仔細想想看大概可以解釋普通 JS 物件（也就是 JSON 格式，或筆者所謂的狹義物件）在 TypeScript 裡的推論機制。知道筆者...

Maxwell Alexius ‧ 2019-09-14

7 Like 3 留言 17443 瀏覽

鐵人賽 Modern Web DAY 3

讓 TypeScript 成為你全端開發的 ACE！系列第 3 篇

技術 Day 03. 前線維護・物件型別 X 完整性理論 - Object Types Basics

閱讀本篇文章前，仔細想想看你能不能分辨 TypeScript 型別推論和註記的差別在哪裡呢？試舉出推論的行為到底是什麼？如何運作的？ Nullable...

Maxwell Alexius ‧ 2019-09-13