# 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; 箭頭函數(=>)