Web 第十一週社課臺中一中電研社 - HackMD

<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/pic_htmltree.gif) 來源\:https://www.w3schools.com/js/js_htmldom.asp ---- ### Document 這份文件 ---- ### Element 每一個Tag ---- ### Text 被Element包起來的文字 ---- ### Attribute Tag內的相關屬性   --- ## 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 ``` ----  ### createElement() 新增一個指定種類的Element  ---- ### 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   ### addEventListener() 在於在js監聽事件 ```html= addEventListener('事件名稱',執行的函式); ```  ---- ### 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. 就有一個大家都可以看的網址了!!!