<style> .blue{ color:#4A919E } </style> <h1 style="color: #4A919E">Web 第十一週社課</h1> >[name= 張皓凱、林德恩][time= Apr 15,2022 ] ###### tags: `Web` `Javascript` `前端` `tcirc39th` `社課` `臺中一中電研社` [TOC] --- ## <div class="blue">電研社</div> 社網:[tcirc.tw](https://tcirc.tw) online judge:[judge.tcirc.tw](https://judge.tcirc.tw) IG:[TCIRC_39th](https://www.instagram.com/tcirc_39th) --- ## 本次社課實作 [社課範例網站](https://unichk.github.io/tcircWebClass/login.html) 1. 到[這裡](https://github.com/unichk/tcircWebClass) -> 右邊的Releases -> 2022/4/15 -> Source code (zip) 2. vscode -> 右邊的extention -> 下載live sever、Auto Close Tag、Auto Rename Tag 3. 另開一個空的資料夾並新增各一個`.html`, `.css`, `.js`檔。 --- # Javascript --- ## 簡介 > JavaScript (簡稱 js) 是具有一級函數 (First-class functions) 的輕量級、直譯式或即時編譯（JIT-compiled）的程式語言。它因為用作網頁的腳本語言而大為知名，但也用於許多非瀏覽器的環境，像是 node.js、Apache CouchDB。JavaScript 是一個基於原型的 (Prototype-based (en-US))、多範型的、動態語言，支援物件導向、指令式以及宣告式 (如函數式程式設計) 風格。 (資料取自：[mdn web docs](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript)) --- ## 基本用法 javascript的各種語法與C++極為相似，故以下只會簡單帶過一些基本語法，其他若有需要使用自己google。 --- ### 在HTML中使用 ```html= <script src="/path/to/.js/file"></script> <script> your js code </script> ``` --- ### 註解 ```javascript= //this is the java script comment /* comment mutiple lines * comment * commrnt */ ``` --- ### 輸出 用`console.log()`或者`alert()`兩者輸出的方式不一樣，前者會在console，後者會在視窗上。 ```javascript= console.log(4); /*output 4 ------*/ ``` ---- #### alert 彈出彈出式視窗，括號內放要顯示的訊息 如: ```javascript= alert("Hi!"); ``` --- ### 變數 js的變數有七種型態：布林（Boolean）、空（null）、未定義（undefined）、數字（number）、字串（string）、符號（symbol）和物件（object），可以透過`typeof()`函式來查看。 ---- #### 宣告 在宣告時不須指定資料型態，而是透過`var`、`let`、`const`來宣告。 * `var`：宣告可隨意更改其內容的變數 * `let`：宣告可隨意更改其內容的區域變數 * `const`：宣告一個只可讀取的不可變常數 盡量用`let`跟`const`就好，除非有特殊需求，`var`的變數較容易runtime error且有較多資安漏洞。 ---- ```javascript= //記得加分號 var a = true;//boolean a = false; let b = "Hello";//string const pi = 3.14;//number let c;//undefine let d = null//null->實際上是object（js的bug） let e = NULL//error ``` ---- #### 動態型態 js當中的變數型態是動態的，所以可以給相同變數不通型態的值，且變數型態會自動改變不會出錯 ```javascript= let　a = 10; console.log(typeof(a)); a = "\"I'm a string\""; console.log(typeof(a)); /*output number string ------*/ ``` ---- #### 運算 基本上跟C++或python都一樣，簡單帶過。 ```javascript= let a = 10; let b = 3.0; console.log(a+b, a-b, a*b, a/b, a%b); let s1 = "string1"; let s2 = 'string2'; let s3 = `string3`; console.log(s1+s2+s3); /*------output-------------- 13 7 30 3.3333333333333335 1 string1string2string3 --------------------------*/ ``` <!-- ### 運算子 #### === #### !== #### >>> --> ---- #### 陣列 就是陣列，但因為js是動態型態所以陣列裡可以放不同資料型態的變數。可以透過`push()`、`pop()`、`shift`、`unshift`從前後刪除及加入元素，陣列大小也會自動改變。 ```javascript= let arr = [20, [true, false], "Hello"]; console.log(arr, arr[1][0]); arr[1] = null; console.log(arr); arr.push("push"); console.log(arr); arr.pop(); console.log(arr); arr.unshift("shift"); console.log(arr); arr.shift(); console.log(arr); /*------output------------- [20, true, 'Hello'] true [20, null, 'Hello'] [20, null, 'Hello', 'push'] [20, null, 'Hello'] ['shift', 20, null, 'Hello'] [20, null, 'Hello'] -------------------------*/ ``` --- ### if else 就是if else，跟C++很像 ```javascript= if(判斷式){ code; }else if(判斷式){ code; }else{ code; } ``` ---- #### 判斷式 又跟C++一樣，有`>`、`<`、`>=`、`<=`、`==`、`!=`、`===`、`!==`，一樣可以用`&&`、`||`串接。 ---- <h4 style="color:red">`==` v.s. `===`</h4> | | `==` | `===` | | ------- |:--------:|:--------:| | 名稱 | 寬鬆比較 | 嚴格比較 | | "0", 0 | true | false | | true, 1 | true | false | | 0, -0 | true | true | | "aa" "ab" | false | false | ---- ```javascript= let a = "10"; if (a == 10) { console.log("a is 10") if (a === 10) { console.log("a is a number"); } else if (a === "10") { console.log("a is a string"); } } /*output----- a is 10 a is a string -----------*/ ``` --- ### while 又又跟C++很像，直接看程式碼 ```javascript= let a = 5; let arr = []; while (a >= 0) { arr.push(a); a--; } console.log(arr); /*output---------- [5, 4, 3, 2, 1, 0] ----------------*/ ``` ---- ### for 又又又跟C++很像，一樣直接看程式碼 ```javascript= let arr = []; for (let a = 0; a < 5; a++) { arr.push(a); } console.log(arr); /*output------- [0, 1, 2, 3, 4] -------------*/ ``` --- ### function js中的函式用`function`宣告 ```javascript= function name(intput1, input2...){ code; return; } ``` ---- ```javascript= function add(a, b) { const c = 16; console.log(a + b + c); return a + b; } console.log(add(5, 7)); /*output-- 28 12 --------*/ ``` ---- #### 匿名函式 匿名函式（Anonymous Function）是指無需定義函式名的函式，在js可使用`=>`簡化，常見用於當參數且不需要再使用第二次的函式，後面DOM再看範例。 ```javascript= let a = function(input1, input2...){ code; return; } let a = (input1, input2) => { code; return; } ``` --- ### 物件（object） > 在JavaScript裡，"物件"是一個擁有自己的屬性、型別、獨立的實體。這裡我們以杯子舉例：我們可以從顏色、設計、重量、材質等方面來描述他的屬性。同樣的，我們也可以用各種屬性來描述JavaScript中某個物體的特性。 （資料來源：[mdn web docs](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Working_with_Objects)） ---- #### 宣告及使用 ```javascript= let 物件名稱 = { property1: value, property2: value, property3: value, }; console.log(物件名稱.property1); ``` ```javascript= let person = { name: 'Alice', height: 180, weight: 50, printName: function () { console.log(`My name is ${this.name}`) } } console.log(person.name, person['height']); person.printName(); /*output-------- Alice 180 My name is Alice --------------*/ ``` ---- ```javascript= let person = new Object(); let property = "weight"; person.name = "Alice"; person['height'] = 180 person[property] = 50; console.log(person); /*output-------- {name: 'Alice', height: 180, weight: 50} --------------*/ ``` --- ## DOM(Document Object Model) 把所有HTML的文字、Tag等所有東西定義成物件  來源\:https://www.w3schools.com/js/js_htmldom.asp ---- ### Document 這份文件 ---- ### Element 每一個Tag ---- ### Text 被Element包起來的文字 ---- ### Attribute Tag內的相關屬性 <!-- ```html= <!DOCTYPE html> <html> <head> </head> <body id="a"> <p> 123 </p> ABC <p> 456 </p> abc qwe <script> let w=document.getElementById("a").childNodes[0].textContent; alert(w); </script> </body> </html> ``` --> <!--要如何說明node0是TAB--> --- ## window 所有物件都在此物件底下如:`window.document`、`window.alert`... ---- ## document 代表的就是這份HTML檔 ---- ### document.write 在當前檔案覆蓋文字 --- ## prompt 彈出一個輸入用於輸入的彈出式視窗 如: ``` prompt("?"); ``` 也可用變數接收 如: ``` let a=prompt(); alert(a); ``` --- ## ID 在HTML Tag上加上ID來進行標記 ---- ### document.getElementById() 取得此ID的Tag，可以將此視為該物件<!--???--> ---- #### .outerHTML 更改含此id的Tag，有資安漏洞 ---- #### .innerHTML 只更改內部內容，不含此Tag，有資安漏洞 ---- #### .textContent 只更改內部文字，不更改Tags ---- ### document.querySelector() 不只可以選擇id也可選擇class，不過注意要用CSS的選擇方式 如: ``` class a 要用 document.querySelector(".a"); id b 藥用document.querySelector("#b"); ``` --- ## Node ---- ### parentNode 目標物的父節點 ---- ### childElementCount 可以計算有幾個標籤子節點 ---- ### childNodes\[] 內部的所有東西包含Tag、文字、註解都是物件，多行文字只要中間沒被其他東西截斷都是同一個物件 由上而下一樣從0開始算 ---- ### firstChild 目標物的第一個([0])子節點 ---- ### firstElementChild 目標物的第一個標籤子節點 ---- ### lastChild 目標物的最後一個([n-1])子節點 ---- ### lastElementChild 目標物的最後一個標籤子節點 ---- ### previousSibling 前一個兄弟節點 ---- ### previousElementSibling 前一個標籤兄弟節點 ---- ### nextSibling 後一個兄弟節點 ---- ### nextElementSibling 後一個標籤兄弟節點 ---- ### nodeType 會回傳Type的[代碼](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType) ---- ### nodeName 會回傳node的名稱如`#text`、`#comment`、`BODY`... ---- ### nodeValue 會回傳node的值 [詳細](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue) ---- ```html= <!DOCTYPE html> <html> <head> </head> <body id="a"> 987 <div> 456 </div> <div id="b"> 321 <p id="c"> 123123 </p> </div> <script> let k=document.getElementById("b").parentNode.nodeName; let w=document.getElementById("a").childNodes[0].nodeValue; console.log(k+"\n"+w); </script> </body> </html> ``` ---- 結果: ``` BODY 987 ``` ---- <!-- 範例: ```html= <p id="a">123123</p> <script> document.getElementById("a").outerHTML="<a href=\"https://tcirc.tw\">123123</a>"; </script> ``` --> ### createElement() 新增一個指定種類的Element <!-- https://developer.mozilla.org/zh-TW/docs/Web/API/Document/createElement --> ---- ### createTextNode() 製造一個文字節點 ---- ### appendChild() 在指定的節點下新增一個子節點 ---- ### insertBefore() 在某個元素前插入一項物件 ```javascript= insertBefore(要插入的物件,要插入的位置) ``` ---- 範例: ```javascript= let new = document.createElement("div"); let text = document.createTextNode("Hi!"); new.appendChild(text); let paragrath = document.getElementById("a"); document.body.insertBefore(new, paragrath); ``` --- ## DOM event DOM event定義了很多事件讓js可以監聽和處理 如果在HTML的Tag內使用前面要加上on <!-- ### 事件流程(Event Flow) 在一些情況下，會有一個物件包含在另一個的情況，這時就會有執行順序的問題，而一般來說，會先執行事件捕獲再執行冒泡 #### 事件冒泡(Event Bubbling) 由下層往上層觸發 #### 事件捕獲(Event Capturing) 由上層往下層觸發 --> <!-- https://ithelp.ithome.com.tw/articles/10267903 --> ### addEventListener() 在於在js監聽事件 ```html= addEventListener('事件名稱',執行的函式); ``` <!-- https://ithelp.ithome.com.tw/articles/10191970 --> ---- ### click 偵測左鍵按下並彈起 ---- ### dblclick 偵測滑鼠快速連點兩下 ---- ### mousedown 偵測左鍵**按下** ---- ### mouseup 偵測左鍵**彈起** ---- ### mouseover 偵測游標置於區塊上方 ---- ### mouseout 偵測游標離開區塊上方 ---- ### load 當載入網頁時會觸發 ---- ### unload 離開或重整網頁時會觸發 ---- ```html= <!DOCTYPE html> <html> <head> </head> <body> <div id="d" onclick="a()"> 123456 </div> <script> function a(){ document.getElementById("d").textContent="abcdefg"; } </script> </body> </html> ``` 或 ---- ```html= <!DOCTYPE html> <html> <head> </head> <body> <div id="d"> 123456 </div> <script> document.getElementById("d").addEventListener('click', ()=>{ document.getElementById("d").innerHTML = "abcdefg"; }) </script> </body> </html> ``` --- ## 參考資料 https://ithelp.ithome.com.tw/articles/10191970 https://developer.mozilla.org/en-US/docs/Web/API/Node https://www.w3schools.com/jsref/ --- # Q：如何公開自己的網頁 ---- ## A1:架設自己的伺服器 > Server伺服器是功能強大的電腦以網路作為媒介，能夠向內部網路或網際網路上的用戶 (Client) 提供特定服務的硬體和軟體的整合。因為伺服器是要讓許多人連線使用的，所以伺服器和個人電腦最大的差別是穩定性 (Stability) 和可靠度 (Reliability) 更好，容錯性強等。 （資料來源：[建興儲存科技](https://www.ssstc.com/tw/ipc-ssd-application/networking-server)） ---- 具體要怎麼操作呢？直接看別人寫的文章（別人寫的比較好:cry:） [Frank's 資訊科技潮流站](https://finalfrank.pixnet.net/blog/post/20082921) ---- 聽起來好麻煩還要花錢，有沒有其他更簡單便宜的方法？ ---- ## A2：github 完全免費而且只需要按幾個按鈕就好了 ---- 詳細作法： 1. 創一個github帳號 2. 點自己主頁的repository 3. new -> 把該填的填一填 4. 點進剛剛的repository -> add file把檔案加進去（也可以用git） 6. settings -> pages -> 把東西設定一下就好了 7. 就有一個大家都可以看的網址了!!! <!-- select option --> <!-- ## Math --> <!-- https://ithelp.ithome.com.tw/articles/10202689 -->