Array 陣列 在前面介紹變數型態時我們有提到陣列，陣列是一個有順序性的序列，可以儲存多個值，格式為 [值1, 值2, 值3]，每個值照順序都會有對應的索引，...
break 和 continue break break (中斷)，是用來控制迴圈或 switch 的控制語法，會中斷並跳出整個迴圈或 switch 區塊。在迴...
雙重迴圈 雙重迴圈，又被稱為「巢狀迴圈」意思是兩個 for 迴圈嵌套在一起，成為一個 for 迴圈中又有另一個 for 迴圈的架構。 for (外層初始化變數;...
for 和 while 其實 for 和 while 最大的差異在於「是否知道要跑幾次」，在寫 for 迴圈時，我們必須在一開始就設定好條件和變數變化；而 wh...
迴圈 迴圈 (Loop)，是指在符合條件下重複執行某區塊內的程式直到條件結束 (為 true)主要分為 while、do while 和 for 三種類型，下面...
switch 語句 當條件式選項很多時使用 if-else 會很繁雜，這時候就可以考慮使用 switch 語句。在 switch 中，括號內的表達式會依次和 c...
if-else 在 if-else 條件判斷中，又依結構分為 if、if-else、和 if-elseif-else。 if 語句 if 語句在執行中，會先對括...
流程控制 一般而言，JavaScript 的程式會照順序由上至下一行一行執行，不過當我們在某條件下不想執行某段程式，或需要重複執行某段程式時，就需要進行流程控制...
運算子 三元運算子 三元運算子又稱為條件運算子，語法為 條件 ? 語句1 : 語句2，意即在條件為 true 時會執行語句1，false 則執行語句2，下面讓我...
運算子 指定運算子 指定運算子通常用來指定一個值給變數 ( 賦值 )，最基本的就是我們常用到的運算符 =，會將符號右邊的值賦予到左邊的變數中。 運算子 意...
陳述式 (Statement) 和運算式 (Expression) JavaScript 中的語法主要可以分為兩大類，陳述式 (Statement) 和表達式...
型態轉換 雖然 JavaScript 在我們指定變數時會自動匹配一個正確的型態，但有時在開發中我們會需要另外轉換型態以便進行運算或判斷，以下就來介紹幾種強制轉換...
資料型態 在前一天我們已經了解到變數的概念，而資料型態指的是變數中存放的是哪一種類型的資料，例如數字、文字 ( 字串 ) 等，而在 JavaScript 中，資...
變數 變數是什麼 在 JavaScript 中，我們會需要暫時儲存資料以便之後提供給前端的元素使用或進行邏輯運算，這時候就會需要用變數來存放這些 data。簡而...
JavaScript 是什麼？ 在「快速入門前端」這個系列中，我們已經介紹過組成網頁的 Structure (HTML) 和 Presentation (CSS...
Flex Box flex box，又稱彈性盒子，是一種為了讓網頁適應不同尺寸的設備所衍伸出來的 display 方式。在 flex 出現之前，我們大多利用元素...
Animation 動畫 前面我們講完了 transition，這邊來講一個進階的概念 —— Animation (動畫)，在前面轉場效果中，主要是設定因事件觸...
3D Transform 上一篇我們講完了 2D Transform，今天我們就來介紹 3D 的部分，其實 3D 只是加入 Z 軸，有了立體和透視的概念。在 3...
文字空白及溢出樣式 White Space 屬性名：white-space (指定如何處理文字中的空白)屬性值：normal (預設)、pre (格式與文本完全...
陰影 Shadow 盒子元素陰影 Box Shadow 屬性名：box-shadow屬性值：複合屬性，屬性值分別有 offset-x (水平偏移)、offset...
z-index 是什麼 在一般 normal flow (佈局流) 中，元素幾乎都會按照順序依依排列，但元素經過定位後有可能會發生重疊，這時候就需要靠 z-in...
Position 定位 Position (定位) 是指元素在頁面上的位置。在一般情況下，我們寫好的元素會由左至右、由上至下依序在瀏覽器中排列，不過當網頁變的愈...
Float 浮動 Float 在設計之初是用來呈現文繞圖的效果，可以將元素指定為靠左或靠右浮動，在 CSS 中，所有的元素都可以加入 float 屬性。 範例：...
Overflow 溢出 CSS 的 overflow 屬性通常用於指定元素內容超過該元素範圍大小時的呈現方式，例如文字內容超過其父元素的寬度、圖片超過預設區域的...
Box Model Box Model 其實就是把元素比喻為我們很常見的盒子，如下圖我們可以看到主要分為四個部分：盒子中的內容物 (電腦)、電腦與盒子間的空隙...
HTML 元素的顯示方式 在之前學習 HTML 的內容中，我們會發現每個元素預設的特定都不太一樣，有些會獨佔一整行的空間，例如 <p>、<di...
背景 我們之前介紹 CSS 顏色時有說過 background-color 可以指定元素的背景顏色，但其實在背景中除了顏色外我們還能做更多變化，下面就讓我們花點...
border 邊框 border，指的是邊框，擁有三個必要屬性 border-width、border-color、border-style，分別指定邊框的寬度...
文字段落樣式 文字間距 文本間距分為兩種，字元間距和單字間距。 字元間距：調整每個字元間的距離 單字間距：調整每個單字間的距離，以是否空格區別單字，所以中文無...
字體 font 系列 屬性 說明 語法 font-size 設定文字大小 font-size: 20px; font-weight 設定文字粗...
iThome鐵人賽
看影片追技術