[【 JavaScript 】 6 小時初學者課程 #javascript教學 #javascript入門 #js](https://www.youtube.com/watch?v=LEwi44cWBu8&list=PLpZ8gOBZmTy5p5l55u-Kup74LLH8cJCnB)

# 開場 + 課程介紹
## JavaScript 是什麼？
## 前端開發環境準備(Windows)
點選信任作者，以後不用再點選
Ctrl +或-可以控制字體螢幕大小
!加TAB鍵可自動輸出 html基本格式

console.log 是印出來的意思

為什麼螢幕沒改變?
因為沒有修改html的結構

## 前端開發環境準備(Mac)

## 【 實作 】撰寫第一支程式 - 小費計算機
安裝live server
點選檔案右鍵，出現 Open with Live Server 可即時將變動的程式碼，做即時輸出

parseInt方法
## 瀏覽器是怎麼運作的？
這邊以下，到Chapter 1 變數、值與資料型別，先大概了解就好了

## HTTP 請求方法與 HTTP 動詞

## JavaScript 與 jQuery 的關係

jQuery只是函式庫，用JS也能達到一樣的效果

# Chapter 1 變數、值與資料型別

## 變數、值與資料型別

重要

== 和 ===不一樣

## 浮點數的陷阱

下圖為浮點數陷阱
上圖答案變為0.30000000000004
為什麼呢?
因為浮點數會造成誤差，但不是絕對
## 第二種資料型別「字串 String」

什麼是ES6?
ES6代表ECMAScript 6，也被称为ES2015。它是JavaScript语言的一次重大更新，带来了许多新的语言特性和改进，包括箭头函数、let和const关键字、模板字符串、解构赋值、类和模块等。ES6的引入丰富了JavaScript的功能和语法，使其更加现代化、易于使用和理解。这些功能的引入使得JavaScript更加强大、灵活，并提高了代码的可读性和可维护性。

重要:單引號和雙引號不能混用，混用會出現下列警示

## 第三種資料型態 Boolean 布林值


boolean 值只有兩種，一種是true一種是false
電腦其實是2進位，
0 等於 false
1 等於 true

為什麼很重要?
如下圖可用做判斷是否執行等功能

## 第四、第五種資料型別「null 空值」與 「undefined 未定義」
null 空值
我期待它是個空值，由使用者去指派 b 變數
undefined 未定義(重要它是一個值，型別就是undefined)
等於宣告了變數但是沒有給它值
# Chapter 2 運算元與運算子

## 運算元與運算子

## 比較運算子介紹 大於小於.與等於

## 比較運算子 === 與 == 有什麼不一樣？

重要:要嚴謹的比較，要用三個等於


## 算數運算子 加減乘除

## 算數運算子 餘數與被除數
## 邏輯運算子AND
&& 和的意思會執行到右邊
|| 或的意思會執行左邊開頭
為什麼要用cosole.log?
為什麼 n 會等於 20?
預設值 沒有值的話 他會維持預設值，此為邏輯運算值重點

用 pareseInt轉換數值，嚴謹的就能得到正確的結果了，如下圖

## 邏輯運算子 NOT (!)
## 三元運算子 如果我有1千萬 _ 我就 ： 否則
實際範例:

## 賦值運算子

a = 2;
a 的 5 次方表示如下:
a ** 5;
則出現 32答案

|| 為 or 邏輯運算，若變數無賦值，||= 會變右邊的值

# Chapter 3 控制流程

## 如果你歐趴 就帶你去歐洲玩 (if ,else)
## switch 如果太多如果，用個開關來控制吧！
要記得在條件後加 break，不然程式會繼續往下跑
## 用數綿羊學會 for 迴圈
括號內顯示有順序
## 「第二種迴圈 while 」，用 while 也可以達到相同的效果。
debug 除錯:程式碼遇到問題的時候，怎麼找出問題。
## 「第三種迴圈 do..while」先跑一次，再判斷要不要繼續跑
一定會先跑一次++，與while先判斷後執行不同

## 用 99 乘法表學雙層迴圈

# Chapter 4 函式 Function

## 為什麼我們需要函式 function ?
避免聚集重複DRY => Don't repeat yourself
## 如何定義一個函式？(1) 了解表達式(Expression)與陳述句(Statement)的差異
Statement就是 if else這種判斷式，不會回傳值，就是陳述句，裡面會有一些Expression表達式
Expression 像是 1 + 1 會回傳 2就是表達式

## 如何定義一個函式？(2) 函式陳述式與函式表達式((Function Statement and Expression)
Function Statement就是 ，可之前就呼叫，執行，就是陳述句，裡面會有一些Expression表達式
Function Expression 要另外賦值 宣告後才能使用
## 變數作用的範圍(Scope) 由 function 來界定全域變數與區域變數

## 回呼函數 Callback Function 把函數做為參數傳遞
## 匿名函式
只執行一次的函數，匿名函數
## IIFE 立即函式

## hoisting 變數提升

# Chapter 5 JS中的物件與陣列

## JS 中的物件
記得加括號
## JS 中的陣列

# Chapter 6 進階陣列方法
pop
push
slice切片不包含最後
## 用 map() 方法來把陣列中的資料，改成你想要的樣子
為什麼要用map?

## 如何使用 for 迴圈實作 map()
## 用 forEach() 讓陣列中的元素一個一個出來面對
## Array 陣列的 find() 方法，找到第一筆符合條件的資料
## 為什麼文件上總是寫 Array.prototype

## 用reduce() 加總陣列結果

# Chapter 7 初探 ES6

## let 與 const
常數定義物件內的值，是可以的
## const 注意事項
不能改變的數
const 物件內的值，可以改變
## ES6 解構賦值
let 宣告過的，不能再度宣告
## Iterator 迭代器是什麼？如何使用？

## for in, for of 的區別
## for of 的使用方法
## 樣板字面值與字串字面值
## 展開運算子 Spread Operator
用於物件重複的只顯示一個
## 箭頭函式 Arrow Function

# Chapter 8 瀏覽器中的 JS

## DOM 與樹狀結構(1)

## 在瀏覽器觀察 DOM Tree 與 document 物件
## 什麼是 API ?



## 瀏覽 document 物件 API 文件
mdn
w3school
## BOM 與 window 物件

document = window.document




# Chapter 9 JS 實作練習

## 【 實作練習 】黃綠紅你要哪一個？ (DOM 操作練習)

## 【 實作練習 】碼錶

## 【 實作練習 】剪刀石頭布

## 【 實作練習 】狗狗產生器

## visalt
延伸模組:
formatter