:pushpin:單位 css提供不同的單位表大長度、大小，其中包含絕對單位及相對單位 絕對單位：尺寸固定 ex:px 相對單位：相對另一長度屬性值所計算出來的 ex:%、em、rem px 直觀簡單，但在RWD時需對每個此吋都重新調整，維護程式碼相當費力 p{

join 將陣列元素連接、合併成一個字串，並回傳此字串。 join() item加上逗號 join('') item直接合併 join(' ') item 加上指定內容合併 const dogs = ['芒狗', '奇異狗', '蘋狗']; console.log(dogs.join());

學習資源:展開運算子(...) | MDN codepen ES6陣列展開運算子 MDN說明：展開運算子(...) 允許可迭代的陣列或字串展開成０到多個參數(如果是 function 的話)或是０到多個元素(如果是 array 或字組的話)，或如果是物件的話則展開成０到多個 key-value pair。 展開運算子的 ... 後面必定是接一個陣列或物件 把一個陣列展開為個別值...array也常用於Object 不會更改到原陣列

:pushpin:網格基礎 格線容器 Grid Container 建立網格格式化上下文 管理其直接子元素的間距、大小和對齊 .grid { max-width: 800px; display: grid; } 格線軌道 Grid Track

:pushpin:useState 存儲狀態，並隨時更新 在應用程式中需要隨著時間改變的資訊，例如：使用者的輸入、點擊次數、當前選擇的選項等等。狀態必須在應用程式中被管理，並且隨著時間改變。 管理輸入框的內容：輸入文字時，管理輸入框的內容。 管理點擊次數：點擊按鈕時，管理點擊次數。 管理當前選擇的選項：多選框或單選框中選擇選項時，管理當前選擇的選項。 管理分頁：在分頁組件中翻頁時，管理當前頁數。 管理模型數據：載入從服務器端獲取的數據時，你可以使用 useState 管理這些數據。

【Day1】什麼是JavaScript 【Day2】變數與資料型別基本介紹 【Day3】var、let、const宣告變數 【Day4】數字number、註解 【Day5】字串string、轉義字符 【Day6】布林、null、undefined 【Day7】算術運算子、比較運算子 【Day8】賦值運算子、邏輯運算子 【Day9】流程敘述-流程圖、if、else、else if 【Day10】流程敘述-switch、三元(條件)運算

!(https://i.imgur.com/YUHUr3q.jpg) :pushpin:建立React環境 Step.1 載入React資源, Babel Both React and ReactDOM are available over a CDN. React本身的函式庫 & ReactDOM <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> Quickly Try JSX

過去的筆記也有提到一部份 2022鐵人賽 | 陣列array const grades = [ [80, 90, 100, 95], [75, 95, 85, 100], [60, 80, 77, 90] ] 當要取其中的值時會使用grades[0][1] 範例一

CSS Reset CSS Tools: Reset CSS reset將所有瀏覽器的自帶樣式重製，因為每個瀏覽器的預設樣式皆不同，保持在不同瀏覽器使用時的一致性而使用Reset。 <link rel="stylesheet" href="css/reset.css"> CSS noemalize Normalize.css normalize保留預設的樣式，不進行太多的重製，例如在h1,h2,h3,h4,h5,h6皆有保留不用再重新賦予 <link rel="stylesheet" href="css/nomalize.css">

學習資源： 圖解：CSS Flex 屬性一點也不難 | 卡斯伯 CSS Flexbox Layout | Treehouse Flex 排版技巧介紹 | 六角 A Complete Guide to Flexbox Flex分為內外容器，能夠讓頁面輕鬆地做出RWD的效果，更有彈性的控制佈局 :::warning

學習資源： MDN CSS CSS Basic 【css】2小時初學者教學 CSS 階層樣式表，非標準程式語言，也不是標記語言, 而是一種風格頁面語言（style sheet language），能夠讓HTML上的元素套上不同的樣式 :pushpin:HTML中加入樣式 inline <header style="background-color:orange;">

教學資源： position|MDN :pushpin:dispaly顯示屬性 利用這些顯示的屬性可以覆蓋預設值進行排版，自由的設定元素顯示的類型，ex:縮放頁面時nav的display方式 常見區塊元素標籤：div、ul li、p、h1 常見行內元素標籤：span、a、input、img display: none;

教學資源： CSS Layout CSS Box Model |W3 Schools 可以將HTML中的每個元素視為一個矩形的方塊，下方程式H1可視為一個方盒被包覆在div的方盒中 <div> <h1>標題</h1> </div> 打開頁面檢查中的樣式可以看到類似於下圖說明方盒的長寬、內外距、框線

今天是第30天來分享我這個轉職路上的前端小白學習JS的資源~ 學習資源 學習心態 完賽心得 學習資源 如果還不確定自己是否喜歡前端，當然就是從一些免費的資源開始看起，這邊提供一些我學習JS基礎時的資源 MDN：JavaScript 初探

打開求職網站，搜尋前端職缺時，除了前端三大元素：HTML、CSS、JavaScript外，也經常看到框架：Angular、React、Vue，那我們知道HTML為標籤語言、CSS為樣式表、JavaScript為程式語言，那框架又是什麼呢？ 本篇介紹： 框架為何 Vue.js、React.js、Angular.js React.js的特色、優勢 先來談談框架(Software Framework) MDN前端框架簡介中提到：框架是個針對軟體構建，提供完整解決方案的函式庫

以上27天的文章簡單帶大家了解JavaScript的冰山一角，也因為主題是興趣初探，因此內容不會有需深入理解的：callback、closure、this……。基本的部分結束，接下來兩篇會做簡單的介紹Node.js與React是什麼？與JavaScript又有什麼關係呢？ Node.js是什麼 套件管理工具 npm 總結 Node.js官方首頁第一句話為 “Node.js is a JavaScript runtime built on the V8 JavaScript engine.”

上一篇有說明可以透過事件了解當下的元素內容，而本篇要介紹的target與nodeName就是兩個常用的物件事件可搭配使用 本篇介紹內容： node.Name取得屬性 e.target了解目前所在元素位置 node.Name取得屬性 瞭解目前 DOM 的 HTML 位置，依據節點類型返回名稱

上一篇介紹捕獲與冒泡時，有使用addEventListener來對事件進行監聽綁定，而本篇除了會介紹addEventListener外，也會提到同樣是綁定事件的方式：事件處理器on-event。 本篇內容包含： 事件處理器 事件監聽器 建立事件、移除事件 事件處理器 在HTML中若要對某個元素綁定事件觸發，可以使用on+事件名的屬性來註冊事件，button+onclick就是常見的例子：

在瀏覽網頁時使用者可以觸發許多事件，JavaScript 可以對這些事件做出反應，例如：滑鼠點擊、按鍵盤按鍵、滾動滾輪……等。DOM Event 可以用 JavaScript 來監聽 (listen) 和處理 (event handling) 這些事件。 本篇介紹內容： 事件冒泡 事件捕獲 事件流程 事件流程指的是網頁元素接受事件的先後順序，當我們點擊一個文字時，同時也是點擊網頁中的部分區塊，也是點擊整個網頁，這就是DOM 事件傳遞機制：「捕獲與冒泡」

上一篇大致說明了DOM的節點關係，而本篇補充一些DOM常見的API： textContent innerHTML setAttribute querySelectorAll textContent 寫入文字內容 textContent：取得節點中的文字內容修改，不更改其CSS屬性僅針對內容