iT邦幫忙

前端相關文章
共有 231 則文章

技術 2020 最新前后端编程学习视频

2020 最新前后端编程学习视频 UmiJS & TypeScript & Ant Design Pro v4 从零开始实战教程(63 个视频...

技術 旅館預約服務練習紀錄-首頁練習

前言 這次找了 The F2E 前端修練時光屋 的稿件,找到了這份稿件(如果您有興趣,可以再找自己喜歡的設計稿來練功)。 其實原本滿逃避面對這件事情,因為對於...

技術 奇妙的一行JS程式碼之完整解析

這段程式是我在網路上無意間看到的,如果你把這段程式碼貼到開發人員工具的 console 會看到像下圖一樣出現一堆框線XDD [].forEach.call($$...

技術 RWD 漢堡選單練習 toggleClass

這次的漢堡選單練習,是要讓選單在手機頁面時加上 JS,讓選單有互動的效果, 所以需要了解一點 jQuery 的運作方式,可以去找一下相關資料,或許可以也可以來...

鐵人賽 Modern Web DAY 30
重新認識 CSS 系列 第 30

技術 重新認識 CSS - 總結 & 系列目錄

前言 「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加...

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

技術 JavaScript 初心者筆記: 實作旅館訂房網站心得 - 第 2 屆 The F2E 第六關

今天就是完賽日了,其實我大可寫一個「後記」就結束這一回合(畢竟有前言了有後記也不奇怪嘛),但是我還是決定要善始善終,所以我今天要分享的是今年參加 The F2E...

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

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

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

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

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

什麼是 AJAX ? AJAX 是 Asynchronous JavaScript and XML(非同步的 JavaScript 與 XML 技術)的縮寫,簡...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

鐵人賽 Modern Web DAY 11

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

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

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

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

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

鐵人賽 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...