owned this note   changed 3 years ago  
Published Linked with GitHub

Web 第十一週社課

張皓凱、林德恩 Apr 15,2022

tags: Web Javascript 前端 tcirc39th 社課 臺中一中電研社

電研社

社網:tcirc.tw
online judge:judge.tcirc.tw
IG:TCIRC_39th

本次社課實作

社課範例網站

  1. 到這裡 -> 右邊的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)

基本用法

javascript的各種語法與C++極為相似，故以下只會簡單帶過一些基本語法，其他若有需要使用自己google。

在HTML中使用





<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

彈出彈出式視窗，括號內放要顯示的訊息
如:

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

就是if else，跟C++很像








if(判斷式){
    code;
}else if(判斷式){
    code;
}else{
    code;
}

判斷式

又跟C++一樣，有>、<、>=、<=、==、!=、===、!==，一樣可以用&&、||串接。

`==` v.s. `===`

== ===
名稱 寬鬆比較 嚴格比較
"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
-----------*/

while

又又跟C++很像，直接看程式碼











let a = 5;
let arr = [];
while (a >= 0) {
    arr.push(a);
    a--;
}
console.log(arr);
/*output----------
[5, 4, 3, 2, 1, 0]
----------------*/

for

又又又跟C++很像，一樣直接看程式碼









let arr = [];
for (let a = 0; a < 5; a++) {
    arr.push(a);
}
console.log(arr);
/*output-------
[0, 1, 2, 3, 4]
-------------*/

function

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;
}

物件（object）

在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}
--------------*/

DOM(Document Object Model)

把所有HTML的文字、Tag等所有東西定義成物件


來源: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的代碼

nodeName

會回傳node的名稱如#text、#comment、BODY…

nodeValue

會回傳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

createElement()

新增一個指定種類的Element

createTextNode()

製造一個文字節點

appendChild()

在指定的節點下新增一個子節點

insertBefore()

在某個元素前插入一項物件

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

DOM event定義了很多事件讓js可以監聽和處理
如果在HTML的Tag內使用前面要加上on

addEventListener()

在於在js監聽事件

addEventListener('事件名稱',執行的函式);

click

偵測左鍵按下並彈起

dblclick

偵測滑鼠快速連點兩下

mousedown

偵測左鍵按下

mouseup

偵測左鍵彈起

mouseover

偵測游標置於區塊上方

mouseout

偵測游標離開區塊上方

load

當載入網頁時會觸發

unload

離開或重整網頁時會觸發
















<!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>

參考資料

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) 更好，容錯性強等。
（資料來源：建興儲存科技）

具體要怎麼操作呢？直接看別人寫的文章（別人寫的比較好

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
）
Frank's 資訊科技潮流站

聽起來好麻煩還要花錢，有沒有其他更簡單便宜的方法？

A2：github

完全免費而且只需要按幾個按鈕就好了

詳細作法：

  1. 創一個github帳號
  2. 點自己主頁的repository
  3. new -> 把該填的填一填
  4. 點進剛剛的repository -> add file把檔案加進去（也可以用git）
  5. settings -> pages -> 把東西設定一下就好了
  6. 就有一個大家都可以看的網址了!!!
Select a repo