本篇程式碼github websocketPrictice 1.使用express generator建立資料 請參考express generator 建立完成之後 在public資料夾創建websocket.html 在routes資料夾創建websocket.js

基礎環境變數使用 1.使用dotenv這個套件 2.在app.js中引用如下 require("dotenv").config({ path: ".env." }); 3.然後在目錄下創建.env檔案 image 在內部輸入

網頁上架前準備 0.準備好佈署的網頁 佈署流程 1.購買網域 這裡是到godaddy買，可以先只買http的網頁，有其公司的服務可以讓網域為https。 2.託管網域 因為godaddy網域的https要另外付費所以將網域託管到其他有提供免費服務公司 這裡使用CloudFare的服務

目的 可以驗證使用者輸入的客戶單號有沒有重複，有重複的話就跳出警告訊息。 如下圖 步驟 1.當input輸入文字後的0.8秒才會發送request。 2.當response為true的時後代表重複，則觸發element plus的validation，沒回傳則不觸發。 地雷點

ref 具有響應式的資料儲存方式會回傳promise物件，ref()可以存入任何型別的資料。 但是讀取與寫入的時候需要.value。例如 const myName = ref('Jack') console.log(myName.value) // 'Jack' myName.value = 'Jay' console.log(myName.value) // 'Jay' reactive 具有響應式的資料儲存方式，reactive()內只能放入物件或陣列，如果放入這兩個以外的資料形式則會報錯。

{%hackmd BJrTq20hE %} JavaScript 變數 變數：布林、undefined、null 字串型別 數字型別與賦值運算子 比較運算子與邏輯運算子 while迴圈

{%hackmd BJrTq20hE %} 定義要傳入的參數 如果傳入的參數是純值 以下的函式代表action這個函式只能傳入string與number function action(a: string, b: number){ return a + b }

{%hackmd BJrTq20hE %} 現在主要建議使用ES6modules，commonJS目前就是了解就可以 commonJS 一個module只能export一個東西 是動態的，有需要的時候再引入。 單筆資料的模組化 模組

{%hackmd BJrTq20hE %} type 什麼是Type，簡單的來說就是自己定義資料的型別 以下的範例代表personalData這個變數內容可以是字串或數字或布林 let personalData: string | number | boolean = "Jack"; 但如果相同union的變數一多，會變得很不好維護。

{%hackmd BJrTq20hE %} 比較運算子 <小於 >大於 <=小於等於 >=大於等於 ==等於 !=不等於 目的在比較運算原並回傳結果 console.log(5>1)//true console.log("hi"=="bye")//false

{%hackmd BJrTq20hE %} 什麼是泛型 泛型在函式裡可以讓函式在使用的時候再決定參數、回傳的資料類型。 函式參數的泛型 function hello<T>(data:T){ console.log(data) }

{%hackmd BJrTq20hE %} 什麼是Class 簡單的來說class是一種函式與資料的撰寫方式，不過class不會直接使用而是做為藍圖。 範例如下 constructor代表先做一些什麼事情。 class add { constructor(number) {

{%hackmd BJrTq20hE %} 什麼是TypeScript，TS是用來解決JavaScript弱形別所產生的問題，那就是程式要執行之後才能知道哪邊的資料是因為型別不對而報錯，TS可以在程式執行前檢查可能出錯的地方。 安裝TypeScript 1.先安裝node.js(建議可以使用nvm) 2.輸入node -v 可以查訊版本 3.打開命令題是字元 4.輸入以下安裝

{%hackmd BJrTq20hE %} TypeScript會自動推斷該變數的型別，在一般的情況之下不用特別定義他的型別 例如: let name = "John"; name = 123; 會如下圖所示，判斷name 要為string所以name被賦值為number時有警報

{%hackmd BJrTq20hE %} 第一行的Hello World Console.WriteLine()是把()內容以整行顯示在終端機中。 Console.WriteLine("Hello World") //Hello World 此外還有Console.Write(),與Console.WriteLine()不一樣的是他不會自動換行

{%hackmd BJrTq20hE %} 1.安裝CKeditor套件 在終端機輸入"npm install --save @ckeditor/ckeditor5-build-classic" 2.在想要使用的component載入CKeditor 以下範例在component的script import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

{%hackmd BJrTq20hE %} axios是一個套件可以用來簡化XMLHttpRequest的一個套件 以下是XMLHttpRequest取的資料的範例 let xhr = new XMLHttpRequest() xhr.open('get','[取得資料的網址](https://hexschool.github.io/ajaxHomework/data.json)',true) xhr.sned(null) xhr.onload = functoin(){

{%hackmd BJrTq20hE %} 1.this的指向 1.this的指向與如何調用this有關 範例1. var a = '全域'; //不使用let、const 是因為用let、const所宣告的變數不會存在window內，使用的話會出現undifined function fn(){

{%hackmd BJrTq20hE %} 簡單的來說在JacaScript中的邏輯比較子不是嚴謹模式的時候，JacaScript會貼心 (欠揍) 的幫你轉換成同的的型別再進行比較。 例如 console.log('1'==1);//true console.log(''==false);//true console.log([]==false);//true console.log('0'==0);//true console.log('0'==false);//true

{%hackmd BJrTq20hE %} 宣告字串 let a = 'hello'; 變數類型 變數名稱 賦值 值 值用單引號或雙引號，不可以混用 例如：