---
# System prepended metadata

title: 1/12 JavaScript 上課內容
tags: [JavaScript]

---

# 1/12 JavaScript 上課內容
###### tags: `JavaScript`
陳銀革
YinhuaQ999@gamil.com
YinhuaQqqq@gamil.com
# 安裝
preview server
![](https://i.imgur.com/ghTnn6B.png)
# 4 Web運作原理
Client(客戶)透過html->Web Server(網站)->DB
電腦與電腦溝通語言(Protocol(協定))
Markup Language(標籤或標記)
tag 標籤
attribute=屬性
value 值
css語法 
```<tag attribute="value" attribute="value"..>conteut</tag>```
..=顯示資料
成對標籤
```<input type="text" value="123">```單一標籤
表單 輸入資料
js語法
style=樣式      
```<h1 style="color:red" onclick="window.alert('Hello');"></h1>```=成對標籤
標籤分兩種Block(區塊(一整列))```<div>div</div>```
        inline(行內(塊))```<span>span</span>```
# 5 Chrome開發工具
Network:看順序
Element:檢視網頁元素
Console:紅色看錯誤 黃色警告
Source:該頁面的資源
Application:查看頁面暫存資料
# 9~14 以物件為基礎的程式語言
物件會有屬性.方法.事件
舉例物件:人
property=屬性 (眼睛2 手2 頭皮=黃)
method=方法(本身只有動作 走.看.聽.跑)
同學<-(拍=事件)->我
```
標籤分 (開始標籤<xx> 結束標籤</xx>)
(<br>換行 <br></br>=><br/>(單一標籤))
```
js用法
object.property
object.method()
chain=>object.method().property...
JavaScript三大部分:
ECMAScript(大綱)
https://www.ecma-international.org/publications/standards/Ecma-262.htm
Browser Object Model(BOM)(瀏覽器物件模型)
Document Object Model(DOM)(文件物件模型)
https://dom.spec.whatwg.org/
# 15 JavaScript的好處
執行過程當中改變(動態更新網頁部分內容)
# 17 JavaScript的格式
ctrl+/整條註解
# 18 JavaScript的輸出與網站
https://www.w3schools.com/jsref/default.asp
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript
write() HTML expressions
window.alert()提示
console.log()F12 Console顯示字串
# 19 JavaScript輸出
getElementById()取id標籤
getElement取得元素
透過property=屬性設定元素內容
# 20 除錯(debug)
![](https://i.imgur.com/nF1FANY.png)
# JavaScript字面值(literal)
literal=也可叫常數
0b1010(2進制)
0o12(8進制)
0x4e00(16進制)
console.log(0b1010)(10進制)
"" '' ‵‵ =字串
{}物件字面
[]陣列字面
# 23 JavaScript變數
var identifier[=value] (變數)
藍色是數字 黑色是字串
![](https://i.imgur.com/BrfCSqq.png)
Global window看中斷點 Scope(範圍)
![](https://i.imgur.com/6s68xu3.png)
# 24 識別字的規則
第一個字母應為大小寫英文字母或下底線_或$
# 26 let和const(ES6)
var(ES5)改為let
區塊範圍{}
const=常數(不會再指派)
const identifier=value
const語法:宣告時必須給值，之後不可重複指派
         區塊範圍，不能重複宣告 (不會在變動)
# 28 跳脫字元
Unicode=萬國碼(全世界語言)
# 29 JavaScript資料型別
true=1
false=空字串 0
# 31 資料型別轉換
parseint()字串轉換整數
parseFloat()字串轉換浮點數
運算子只要兩邊有一個字串，會自動轉換字串
.toString()是一個方法
# 33 JavaScript的運算子
5=3+2
5=二次運算式,3運算元1,+運算子,2運算元2
# 36 邏輯運算子
&&(and) ||(or) !NOT
三元運算子（判斷式）?（真時回傳值）:（假時回傳值）
# 37 流程控制
![](https://i.imgur.com/I6ZiMUD.png)
for(固定)
while(不確定)
switch(單一值)
# 51.52 函數功能&宣告
(函數)function
獨立的程式碼 可避免重複
可將程式模組化，易讀或修改
語法:function開頭 函數名稱(參數1,參數2...parameters)
functuion名稱+()=呼叫
匿名函數 function literal(函數字面值)
let a=1;
箭頭函數(=>)

