JavaScript 簡介

--- slideOptions: transition: slide tags: 程式線107上 --- # JavaScript 簡介 [TOC] --- ## 序章 ---- 這次主要是偏概念教學因為 JavaScript 跟 Python 都是一門語言 ---- ### HTML & CSS ---- - HTML - 超文本標記語言 - HyperText Markup Language - CSS - 層疊樣式表 - Cascading Style Sheets - 決定HTML如何顯示 Note: HTML CSS 構圖上色架構設計 ---- **但 HTML CSS** **都不是程式語言** ---- ### JavaScript ---- 三者中，唯一的**程式語言** 一種高階，動態型別，物件導向的直譯語言常用於動態網頁互動，還有更各種框架可以運用不僅僅是可以利用在前端，也能拿來做後端 ---- 三者中，唯一的**程式語言** 一種高階，動態型別，物件導向的直譯語言常用於動態網頁互動，還有更各種框架可以運用 ~~不僅僅是可以利用在前端，也能拿來做後端~~ Note: 不知道什麼是前端後端的話 ---- #### JavaScript 與 Java的關係? Note: 雖然 JavaScript 與 Java 雖然在名字上很像，但本質上是熱狗與狗的差別。就是完全不一樣拉~~~ ---- #### 為什麼要取那麼相近的名字? Note: 有一個說法是當初 LiveScript 在發展時正好是 Java 當紅的時候於是 LiveScript 就改名成 JavaScript ---- #### 如果沒有JavaScript？  Note: 看大家想不想玩玩看，不要就跳過 --- ## 基礎 JavaScript ---- ### 環境建置 ---- 只要使用一般的文字編輯器即可編輯那今天，我們用[Tryit Editor v3.5](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_basic) Note: 就打開 VScode 吧 Demo 開 VS code ---- ### 使用方式 ---- 在 HTML 中引入因 JS 為直譯式程式語言，讀到即會執行 ---- #### 內嵌於 \<head>\</head> ```htmlmixed= <head> <script> alert("Hello World"); </script> </head> ``` ---- #### 內嵌於 \<body>\</body> 之中可以讓 HTML 優先載入 ```htmlmixed= <body> <script> alert("Hello World"); </script> </body> ``` ---- #### 外部引入檔案置於 \<head> 或 \<body> 內 ```htmlmixed= <script src="./main.js"></script> ``` ---- ### 變數 ---- 之前在 Python 基礎曾說過變數就是？ Note: 變數就像是一個箱子你可以用他來裝整數、浮點數、字串在程式語言中變數是一個暫時儲存資料的地方賦值給變數的值都會有對應的資料型態? ---- 型態 ? Note: 然而 JavaScript 是弱型別 Weak type 所以會有自動轉型的情形，一開始不需要指定 ---- 全域變數將使用 var 若你需要固定不變的常數則是使用 const Note: 在 ES6 中為了解決變數污染或誤用情形將 block-scope 的變數使用 let ---- #### 其中變數型別又分為 - Primitive Data Type(原始資料型別)： - String - Number - Boolean（ true 或 false） - undefinded - null - Reference Data Types： - Object Note: 因為著重於介紹，主要把重心放在前者差別在於將物件變數賦值給另外一個變數時是把引用賦值給新變數，所以當新變數更改屬性時會影響到原來物件。 ---- 怎麼宣告？ ```javascript= var a; var b = 10; ``` ---- ### 運算子/運算元 ---- 在程式語言中都需要運算子在 JavaScript 中賦值運算子算數運算子比較運算子邏輯運算子 ---- #### 賦值運算子：使用 = 給定值給變數 ```javascript= // Mark var name = 'Mark'; ``` ---- #### 算數運算子：四則運算 ```javascript= // 4 var sum = 1 + 3; ``` ---- #### 比較運算子：數值比較 ```javascript= var age = 23; // true var canVote = age >= 20; // false var canVote = age < 20; ``` ---- #### 邏輯運算子：邏輯判斷 ```javascript= var a = true; var b = true; // 且，要兩個都 true var result1 = a && b; // 或，只要有一個 true，即為 true var result2 = a || b; ``` ---- ### 判斷 ---- if...else switch 條件判斷 JavaScript都有 Note: 要注意的是在 JavaScript 中的 falsey 值： undefined、null、NaN、0、""（空字串）和 false 以上幾種情況在邏輯判斷時會轉換成 false ---- #### if…else ```javascript= var score = 60; if(score >= 60) { alert("及格！"); } else { alert("不及格！"); } ``` ---- #### switch：當條件很多時可以善用 switch 判斷，記得要在每個 case 後寫 break，不然會全部都執行 ```javascript= var country = 'Taiwan'; switch(country) { case 'Taiwan': alert('hello' + country); break; case 'Japan': alert('hello' + country); break; case 'Korea': alert('hello' + country); break; default: alert('Bye' + country); } ``` ---- ### 迴圈 ---- for while while JavaScript 也都有 ---- #### for： ```javascript= var arr = ['Mark', 'Zuck', 'Jack']; for(var i = 0; i < arr.length; i++) { console.log(arr[i]); } ``` ---- #### while： ```javascript= // 從 1 累加到 10 var num = 1; while(num <= 10) { var sum += num; // sum = sum + num num += 1; } ``` ---- #### do…while： ```javascript= let x = 0; while(x < 10) { console.log(x); x++; } let y = 0; do { console.log(y); y++; } while(i < 10); ``` Note: do while 會至少執行一次 ---- ### 函式（function） ---- - 函數是一種可以讓一段程式區塊重複使用的程式撰寫方式 - 函數可以傳入參數，也有可能沒有。 - 函數使用 return 回傳值，若沒寫則回傳 undefined ---- ```javascript= function sum(x, y) { return x + y; } sum(12, 20); ``` --- ## 在網頁上的 JavaScript ---- ### DOM介紹 ---- 文件物件模型（Document Object Model，DOM）是給 HTML 與 XML 文件使用的一組 API。 ---- 聽不懂？ ---- 簡單的說就是將文件物件化以便提供一套通用存取的方式來處理文件內容。 ---- 還是聽不懂？ ---- DOM 提供 HTML 網頁一種存取的方式可以將 HTML 元素轉換成一棵節點樹每一個標籤和文字內容是為一個節點 Note: 聽不懂也沒關係真的 ---- - 要操作 DOM 元素前要選取要操作哪個 - 根據ID名稱選取 document.getElementById(elementId) - 根據元素名稱選取 document.getElementsByTagName(tagName) - 根據名稱選取 document.getElementsByName(name) - 根據 Class 名稱選取 document.getElementsByClassName(classname) ---- ### 事件處理（event handler） ---- 事件處理是 JavaScript 非常重要的功能用來處理 JavaScript 與 HTML 之間的互動建立動畫效果並和使用者互動 ---- 事件處理簡單說就是當一個事件發生時（網頁載入、按下右鍵等）程式會相對應做出怎樣的處理 ---- 事件處理 = 事件種類 + 事件處理方法 Note: 當使用者按下按鈕時會觸發 click 的事件（事件發生）取得日期（處理事件），這就是一種事件處理機制 ---- 事件種類（Event Type）為一個字串，說明發生了什麼事件例如：click (點擊)、mousemove (滑鼠滑過) ---- 事件處理（Event Handlers）係指處理事件的函數名稱當事件發生時要呼叫哪個函數進行處理 ---- [範例參考](https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst) ```htmlmixed= <!DOCTYPE html> <html> <body> <h2>My First JavaScript</h2> <button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time. </button> <p id="demo"></p> </body> </html> ``` ---- ### 非同步處理（Ajax） ---- 同步 vs. 非同步 Note: 傳統上我們會使用 \<form> 表單和後端程式作互動，然而每次提交表單送出請求給伺服器，伺服器接收並處理傳來的表單，然後送回一個新的網頁。使用 Ajax 應用可以僅向伺服器發送並取回必須的數據，並在客戶端採用JavaScript 處理來自伺服器的回應，不僅減少伺服器負擔也加快反應速度 ---- ![](https://i.imgur.com/Ea8byCI.png) 依序執行等到上一個函數任務執行完才能執行下一個 ---- ![](https://i.imgur.com/CHBPuwi.png) 不會因為上一個函數尚未執行完（EX：回傳結果）就卡住會往下執行下一個任務 --- ## 練習前 ---- [玩玩看](https://yitsewu1998.github.io/js_demo/) ---- ### 可參考資料介紹 [w3school](https://www.w3schools.com/js/default.asp)  ---- ### 輸出方式 [可以參考我](https://www.w3schools.com/js/js_output.asp) ---- [Using innerHTML](https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_dom) [Using document.write()](https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_write) [Using window.alert()](https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_alert) [Using console.log()](https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_console) ---- ### 輸入方式 ---- [Window prompt() Method](https://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt) [HTML DOM Form Object](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_get) [Library](https://www.w3schools.com/jsref/default.asp) --- ## 練習 ---- ### 練習一 ---- #### 試寫出一個按鈕按下後可輸入姓名並顯示於頁面上的網頁 USE：prompt, document.write ---- 無 JavaScript 的模板 ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>JS_DEMO_01</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <input type="button" value="點我" onClick="showname()"> </body> </html> ``` ------ [範例](https://yitsewu1998.github.io/JS_demo01/) ---- ### 練習二 ---- #### 試寫出一個可以將兩個輸入值做加減乘除的網頁並顯示於網頁上 ---- 無 JavaScript 的模板 ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>JS_DEMO_02</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <form name="Calculator"> A：<input type="text" id="A"> <select name="symbol"> 　<option value="+">＋</option> 　<option value="-">-</option> 　<option value="*">*</option> 　<option value="/">/</option> </select> B：<input type="text" id="B"> </form> <br> <input type="button" value="count" onClick="showanswer()"> <br> <br> <h1 id="answer"></h1> </body> </html> ``` ------ [範例](https://yitsewu1998.github.io/JS_demo02/) --- ## 補充 ---- ### jQuery ---- jQuery 是一個快速又簡潔的 JavaScript 程式庫 ---- 簡化了在 HTML 文件裡面尋找 DOM 物件、處理事件製作動畫、和處理 Ajax 互動的過程 ---- #### 元素選擇器 : 不用再像JavaScript一樣要打很多行程式才能找到元素 ---- #### 動態更改CSS樣式 : JavaScript會因為不同瀏覽器而對CSS控制有所不同 JQuery則提供了跨瀏覽器的標準 ---- #### 動態更改元素 : JavaScript變更元素屬性或文字內容要打比較多的Code 而JQuery則是比較簡短 ---- #### 事件回應控制 : JQuery的事件函式比較簡短好記比較不需要考慮瀏覽器相容性問題 ---- #### 函式庫 : JQuery將一些JavaScript 常用的function都做成函式庫只需要呼叫函式就可以直接使用 ---- #### 實現即時更新/通訊的功能 : JQuery可以透過AJAX進行頁面局部及時刷新的動作 ---- #### 學習參考資料 [JQuery](https://jquery.com/) ---- ### Bootstrap ---- #### Bootstrap 是什麼？ ---- [ilearn](https://ilearn2.fcu.edu.tw/) [Web 程式作業](https://yitsewu1998.github.io/bootstrap_demo/) ---- #### 學習參考資料 [Boostrap4](https://bootstrap.hexschool.com/docs/4.1/getting-started/introduction/) ---- ### 框架 ---- - Vue.js - React.js - AngularJS - Angular2（或簡稱 Angular） Note: https://buzzorange.com/techorange/2017/07/31/all-about-javascript-framework/ 還有很多，比如我摸過matter.js ---- ### 後端 ---- - Node.js Note: 基本上教不完也學不完 Google 很重要