張皓凱、林德恩 Apr 15,2022
Web
Javascript
前端
tcirc39th
社課
臺中一中電研社
社網:tcirc.tw
online judge:judge.tcirc.tw
IG:TCIRC_39th
JavaScript (簡稱 js) 是具有一級函數 (First-class functions) 的輕量級、直譯式或即時編譯(JIT-compiled)的程式語言。它因為用作網頁的腳本語言而大為知名,但也用於許多非瀏覽器的環境,像是 node.js、Apache CouchDB。JavaScript 是一個基於原型的 (Prototype-based (en-US))、多範型的、動態語言,支援物件導向、指令式以及宣告式 (如函數式程式設計) 風格。
(資料取自:mdn web docs)
javascript的各種語法與C++極為相似,故以下只會簡單帶過一些基本語法,其他若有需要使用自己google。
<script src="/path/to/.js/file"></script> <script> your js code </script>
//this is the java script comment /* comment mutiple lines * comment * commrnt */
用console.log()
或者alert()
兩者輸出的方式不一樣,前者會在console,後者會在視窗上。
console.log(4); /*output 4 ------*/
彈出彈出式視窗,括號內放要顯示的訊息
如:
alert("Hi!");
js的變數有七種型態:布林(Boolean)、空(null)、未定義(undefined)、數字(number)、字串(string)、符號(symbol)和物件(object),可以透過typeof()
函式來查看。
在宣告時不須指定資料型態,而是透過var
、let
、const
來宣告。
var
:宣告可隨意更改其內容的變數let
:宣告可隨意更改其內容的區域變數const
:宣告一個只可讀取的不可變常數盡量用let
跟const
就好,除非有特殊需求,var
的變數較容易runtime error且有較多資安漏洞。
//記得加分號 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當中的變數型態是動態的,所以可以給相同變數不通型態的值,且變數型態會自動改變不會出錯
let a = 10; console.log(typeof(a)); a = "\"I'm a string\""; console.log(typeof(a)); /*output number string ------*/
基本上跟C++或python都一樣,簡單帶過。
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
從前後刪除及加入元素,陣列大小也會自動改變。
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,跟C++很像
if(判斷式){ code; }else if(判斷式){ code; }else{ code; }
又跟C++一樣,有>
、<
、>=
、<=
、==
、!=
、===
、!==
,一樣可以用&&
、||
串接。
== |
=== |
|
---|---|---|
名稱 | 寬鬆比較 | 嚴格比較 |
"0", 0 | true | false |
true, 1 | true | false |
0, -0 | true | true |
"aa" "ab" | false | false |
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 -----------*/
又又跟C++很像,直接看程式碼
let a = 5; let arr = []; while (a >= 0) { arr.push(a); a--; } console.log(arr); /*output---------- [5, 4, 3, 2, 1, 0] ----------------*/
又又又跟C++很像,一樣直接看程式碼
let arr = []; for (let a = 0; a < 5; a++) { arr.push(a); } console.log(arr); /*output------- [0, 1, 2, 3, 4] -------------*/
js中的函式用function
宣告
function name(intput1, input2...){ code; return; }
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再看範例。
let a = function(input1, input2...){ code; return; } let a = (input1, input2) => { code; return; }
在JavaScript裡,"物件"是一個擁有自己的屬性、型別、獨立的實體。這裡我們以杯子舉例:我們可以從顏色、設計、重量、材質等方面來描述他的屬性。同樣的,我們也可以用各種屬性來描述JavaScript中某個物體的特性。
(資料來源:mdn web docs)
let 物件名稱 = { property1: value, property2: value, property3: value, }; console.log(物件名稱.property1);
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 --------------*/
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} --------------*/
這份文件
每一個Tag
被Element包起來的文字
Tag內的相關屬性
所有物件都在此物件底下如:window.document
、window.alert
…
代表的就是這份HTML檔
在當前檔案覆蓋文字
彈出一個輸入用於輸入的彈出式視窗
如:
prompt("?");
也可用變數接收
如:
let a=prompt();
alert(a);
在HTML Tag上加上ID來進行標記
取得此ID的Tag,可以將此視為該物件
更改含此id的Tag,有資安漏洞
只更改內部內容,不含此Tag,有資安漏洞
只更改內部文字,不更改Tags
不只可以選擇id也可選擇class,不過注意要用CSS的選擇方式
如:
class a 要用 document.querySelector(".a");
id b 藥用document.querySelector("#b");
目標物的父節點
可以計算有幾個標籤子節點
內部的所有東西包含Tag、文字、註解都是物件,多行文字只要中間沒被其他東西截斷都是同一個物件
由上而下一樣從0開始算
目標物的第一個([0])子節點
目標物的第一個標籤子節點
目標物的最後一個([n-1])子節點
目標物的最後一個標籤子節點
前一個兄弟節點
前一個標籤兄弟節點
後一個兄弟節點
後一個標籤兄弟節點
會回傳Type的代碼
會回傳node的名稱如#text
、#comment
、BODY
…
會回傳node的值
詳細
<!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
新增一個指定種類的Element
製造一個文字節點
在指定的節點下新增一個子節點
在某個元素前插入一項物件
insertBefore(要插入的物件,要插入的位置)
範例:
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定義了很多事件讓js可以監聽和處理
如果在HTML的Tag內使用前面要加上on
在於在js監聽事件
addEventListener('事件名稱',執行的函式);
偵測左鍵按下並彈起
偵測滑鼠快速連點兩下
偵測左鍵按下
偵測左鍵彈起
偵測游標置於區塊上方
偵測游標離開區塊上方
當載入網頁時會觸發
離開或重整網頁時會觸發
<!DOCTYPE html> <html> <head> </head> <body> <div id="d" onclick="a()"> 123456 </div> <script> function a(){ document.getElementById("d").textContent="abcdefg"; } </script> </body> </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>
Server伺服器是功能強大的電腦以網路作為媒介,能夠向內部網路或網際網路上的用戶 (Client) 提供特定服務的硬體和軟體的整合。因為伺服器是要讓許多人連線使用的,所以伺服器和個人電腦最大的差別是穩定性 (Stability) 和可靠度 (Reliability) 更好,容錯性強等。
(資料來源:建興儲存科技)
具體要怎麼操作呢?直接看別人寫的文章(別人寫的比較好)
Frank's 資訊科技潮流站
聽起來好麻煩還要花錢,有沒有其他更簡單便宜的方法?
完全免費而且只需要按幾個按鈕就好了
詳細作法: