iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

網頁技術探索:30天的前端學習 系列

這次挑戰會在 30 天內,分別學習三個前端基礎語言。
首先是 HTML,負責網頁的骨架和內容,像是文字、圖片、段落怎麼排版。
接著是 CSS,讓網頁變漂亮,透過顏色、字體、版面設計,做出更好的使用體驗。
最後是 JavaScript,讓網頁有互動性,像是按鈕點擊、表單檢查,以及一些常用的功能。
這 30 天的探索,希望能打下前端的基礎,也累積出一個完整的小專案。

鐵人鍊成 | 共 30 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文 團隊nutc imac T1
DAY 21

Day21 JS function 的語法作用域 Lexical Scope、執行緒與同步、非同步

JavaScript 是使用語法作用域的程式語言 下方有一個具名函式為 peopleName,裡面有一個變數並賦予其值,確認結果下一個 console.log(...

2025-10-05 ‧ 由 c8763 分享
DAY 22

DAY22 js全域變數與區域變數

變數簡單分成兩種,一種在函式內、一種在函式外,聽起來簡單,但卻有很大的不同 區域變數 簡單來說就是在函式內的變數,函式是這樣寫的: function fName...

2025-10-06 ‧ 由 c8763 分享
DAY 23

DAY23 JS 陳述式與表達式、函式function搭配return

陳述式 Statement JS 的語句類型,用於命令執行指定的一系列操作,最大的特徵則是不會回傳結果。 例如: block 變數宣告 var, let, c...

2025-10-07 ‧ 由 c8763 分享
DAY 24

DAY24 function 函式 Hoisting 提升觀念跟函式 function應用

瀏覽器在讀取程式碼基本上都是從上到下讀取,在變數的寫法,會是這樣的結果。 console.log(a); //undefind var a = 1; conso...

2025-10-08 ‧ 由 c8763 分享
DAY 25

DAY25 JS Array 陣列跟Object 物件的基本認識

今天進入下一個部分。陣列 (Array) 與物件 (Object) Array 陣列 陣列內可以是原始的資料類型、其他陣列、函式等等。 要注意的是,陣列是個有順...

2025-10-09 ‧ 由 c8763 分享
DAY 26

DAY26 Object & Array 物件與陣列的綜合應用

物件 + 函式 物件內建立函式,可以透過函式的功能來做運算,讓物件成為一系列的內容,會相當好用。以一個家庭為例,程式碼如下: var home = { da...

2025-10-10 ‧ 由 c8763 分享
DAY 27

DAY27 控制判斷(運算子) =

運算子 比較運算子 == 用來比較 a 與 b 是否為正確或不正確,例如:設定兩個變數比較他們的關係。會發現有兩個地方不同, = 跟 ==, = 的用法是給予變...

2025-10-11 ‧ 由 c8763 分享
DAY 28

DAY28 JS 控制判斷

if 光看英文單字,if 有如果的意思,在程式碼也是直接使用字面上的感覺。if 的程式碼如下: var name = value; if (name == v...

2025-10-12 ‧ 由 c8763 分享
DAY 29

DAY29 JS for迴圈及其應用(array 及 if)

for 迴圈的寫法 基本寫法: for (var i = 0; i < array.length; i++) { //使用 for 迴圈 (初始狀態;...

2025-10-13 ‧ 由 c8763 分享
DAY 30

DAY30 JS for 迴圈,i++、加總、break 的使用

i++ for 迴圈內有一個所產生的值,會用 i++ 登打, for (var = 0; i < array.length; i++) { ... }...

2025-10-14 ‧ 由 c8763 分享