iT邦幫忙

前端相關文章
共有 304 則文章
鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 19
JavaScript 初心者筆記 系列 第 19

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

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

鐵人賽 Modern Web DAY 18
JavaScript 初心者筆記 系列 第 18

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 17
JavaScript 初心者筆記 系列 第 17

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

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

鐵人賽 Modern Web DAY 2
~網頁入門~ 系列 第 2

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

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

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 16
JavaScript 初心者筆記 系列 第 16

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

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

鐵人賽 自我挑戰組 DAY 1
從門外漢到前端新手 系列 第 1

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 12

技術 【Day 12】Styled-component

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

鐵人賽 Modern Web DAY 15
JavaScript 初心者筆記 系列 第 15

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

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

鐵人賽 Modern Web DAY 14
JavaScript 初心者筆記 系列 第 14

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 13
JavaScript 初心者筆記 系列 第 13

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

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

鐵人賽 Modern Web DAY 4

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

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

鐵人賽 Modern Web DAY 12
JavaScript 初心者筆記 系列 第 12

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

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 9

技術 【Day 9】Component Lifecycle

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

鐵人賽 Modern Web DAY 2

技術 Day 02. 前線維護・型別推論 X 註記 - Type Inference & Annotation

《前線維護》篇章概要 第一次看到 TypeScript 的人,最先看到就是型別註記(以下會把程式碼有註記的部分用 ~ 顯示出來)—— 英文稱為 Type An...

鐵人賽 Modern Web DAY 8

技術 【Day 8】Class component && Functional component

今天與明天會來短暫介紹一下 class-based 的 component,今天將講解 class component 的基礎,也比較一下與 functiona...

鐵人賽 Modern Web DAY 11
JavaScript 初心者筆記 系列 第 11

技術 JavaScript 初心者筆記: this 關鍵字

關於 this 有許多大神有相當詳盡的解說,例如 Kuro 大的優質好文,不過身為一個初心者,先對 this 有個粗淺的認識再延伸閱讀,我想會比較適合。 關鍵...

鐵人賽 Modern Web DAY 1

達標好文 技術 Day 01. 遠征 TypeScript・行前準備

通常聽到一門新的技術,第一句話會問的就是... 為何我要使用這門技術呢? 貼心小提醒:如果單純想了解 TS 是什麼,以及優勢與缺點,可以跳過前文喔!...

鐵人賽 Modern Web DAY 10
JavaScript 初心者筆記 系列 第 10

技術 JavaScript 初心者筆記: JS 內建物件 - 全域物件篇

在真實世界中,我們可以很直觀地辨別各個不同的實體物品及其代表的意義,但在程式的世界中,「物品」是用一系列的資料去組合而成的物件模型。 目前為止我們學到了 Jav...

鐵人賽 Modern Web DAY 9
JavaScript 初心者筆記 系列 第 9

技術 JavaScript 初心者筆記: 物件簡介

物件的意義 物件就是將各種變數與函式整理成一個懶人包,不過在物件中,變數稱為「特性」,特性可以告訴我們有關物件的特徵;而函式稱為「方法」,方法代表物件所連結的相...

鐵人賽 Modern Web DAY 8
JavaScript 初心者筆記 系列 第 8

技術 JavaScript 初心者筆記: 陣列簡介

還記得前面我們學到的變數嗎?當時我們反覆了解到變數是幫助我們記住資訊,但如果我們在寫程式時需要儲存一系列具有關聯性的值時,除了用變數一個一個宣告以外,難道沒有更...

鐵人賽 Modern Web DAY 7
JavaScript 初心者筆記 系列 第 7

技術 JavaScript 初心者筆記: 函式實際運作 - 回傳值與函式間互相傳遞

今天要分享的內容跟前面的觀念文比起來,程式碼比較多,畢竟標題是函式實際運作嘛。 回傳(return)的意義 函式可以透過 return 回傳函式運算完的結果,...

鐵人賽 Modern Web DAY 6
JavaScript 初心者筆記 系列 第 6

技術 JavaScript 初心者筆記: 函式實際操作 - 參數與數學運算

上一次學到一些關於函式的基本觀念,這一次則是要來了解如何用函式進行較複雜的運算。首先要從參數開始說起。 函式代入參數 有時候函式需要一些特定資訊才能完成它的工...

鐵人賽 Modern Web DAY 5
JavaScript 初心者筆記 系列 第 5

技術 JavaScript 初心者筆記: 函式基本觀念

在之前的文章中,我們反覆認知到變數就是將我們需要用到的資料儲存起來;而我們接下來要認識的函式,則是幫助我們預先將某項工作所需要的執行步驟先儲存起來,當有需要時就...

鐵人賽 Modern Web DAY 1

技術 【Day 1】前情提要 && 教學大綱

大家好! 我是老莫,今天是 30 天中的第 1 天,主要是講一下未來 29 天的內容規劃: 關於分享主題 相信大家也是看了主題 "React從0到1&...