---
title: Javascript
tags: 網頁青少年組教材,環境設定與工具安裝,Visual Studio Code,Xampp
---
##### [回目錄](https://hackmd.io/@mackliu/rksOi3pyd)
# Javascript 程式語言介紹
javascript 是瀏灠器內建的程式語言，可以在網頁中直接撰寫並應用，主要功能是用來控制網頁上的元件及增加使用者操作的互動性。
## 程式語言基礎
由於javascript是一項程式語言，因此在使用程式語言前要先程式設計有一些了解。
### 變數
用來指派一個特定值或內容的代表，通常會以容易理解的字串來命名，比如使用 `student` 來用代表學生，實際的內容可能是學生的學號或是學生的名稱。
在javascript 中通常用 **let** 來宣告變數
```javascript=
let student='王小明' //在變數中儲存名字
or
let student=110102201 //在變數中儲存學號
```
### 資料型態
變數可以用來暫時存放資料內容，在程式語言中都有規劃一些資料型態，依據資料型態的差異，可以執行的功能和操作方式也不太一樣
* 數值 - 分為整數(-1,0,1,2,3...etc)和浮點數(-1.1,1.1,22.22...etc)
* 字串 - 分為單一字元(a,b,c....etc)及多字元組成的有意義的字串(student,school...etc)
* 陣列 - 陣列為一堆資料集合成的特殊資料，可以使用一個變數名稱來代表整個陣列的內容，比如用`classroom` 來代表一個班級，而一個班級中會多個學生。陣列通常會使用兩個中刮號來表示，每一個陣列元素使用索引值來區別，索引值從0開始：
```javascript=
let classroom=new Array();
classroom=['John','Mary','Eason','Michael','Hellen']
classroom[0] //代表 John
classroom[2] //代表 Eason
```
* 物件 - 物件的內容比陣列更複雜，除了可以存放一般資料外，也可以存放函式，和陣列最大的區別在於物件可以使用字串來代表某一個元素，物件通常使用兩個大刮號來表示。
```javascript=
let classroom={
'班長':'John',
'副班長':'Mary',
'衛生股長':'Eason,
};
classroom.班長 or classroom['班長'] //代表 John
classroom.副班長 or classroom['副班長'] //代表 Eason
```
### 運算子
所有的程式語言都有定義各式的運算子，用來對資料進行處理或比較，常見的基礎運算子有幾種
* 算術運算子 - 主要是針對數字型態的資料進行數學運算用
* 取餘數 - %
* 四則運算 - + 、 - 、 * 、 /
* 比較運算子 - 通常是用來在判斷式中取得成立或不成立的結果
* 等於 - == 或 ===
* 不等於 - != 或 !==
* 大於 - >
* 小於 - <
* 邏輯運算子 - 通常用來在流程結構中對兩個以上的運算式結果做比較
* 同時成立(AND) - &&
* 任一成立(OR) - ||
* 反向(NOT) - !
* 字串運算子 - 用在於對字串的連結上，只有一個運算子
* 字串連接 - +
### 流程結構
流程結構是程式語言的重要內涵，透過各種流程結構的組合運作，資料的處理才會發生變化，進而簡化純手動的作業，常見的流程結構如下：
1. 二元判斷式
```javascript
if( 條件判斷式 ){
//判斷式為true時執行的內容
}else{
//判斷式為false時執行的內容
}
```
2. 選擇判斷式
```javascript=
switch(判斷項目){
case '項目1':
//符合項目1時要執行的程式內容
break;
case '項目2':
//符合項目1時要執行的程式內容
break;
case '項目3':
//符合項目1時要執行的程式內容
break;
default:
//沒有任何符合項目時要執行的程式內容
}
```
3. 迴圈
```
//for迴圈用在有明確迴圈次數的場合
for(起始值;判斷式;遞增式){
//條件符合判斷式時執行的內容
}
//while迴圈用在沒有明確迴圈次數但有結束條件的場合
while(條件判斷式){
//符合條件判斷式時執行的內容
}
//do...while迴圈用在不論條件是否符合至少會執行一次的場合
do{
//符合條件判斷式時執行的內容
}while(條件判斷式)
//for..in用在陣列或物件的巡訪中
for( i in array){
//對陣列中每一個元素要執行的內容
}
```
## 基本應用
### 取得網頁中的內容
建立網頁內容，其中先放上一些標籤及內容
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
</head>
<body>
<div>1</div>
<div>2</div>
<p>A</p>
<span class="name">陳小明</span>
<article id="post">資通訊技術是未來社會發展的重要基礎</article>
</body>
</html>
```
使用querySelector來取得單一元素
```javascript=
//取得網頁中標籤為div的第一個元素
let d=document.querySelector("div")
//取得網頁中標籤為p的第一個元素
let p=document.querySelector("p")
//取得網頁中 class 為 name 的第一個元素
let name=document.querySelector(".name")
//取得網頁中 id 為 post 的第一個元素
let post=document.querySelector("#post")
```
使用querySelectorAll來取得多個元素，結果會以陣列型式回傳，要注意的是id類的元素在網頁上只能有一個，所以一般不會使用這個方式來取得
```javascript=
//取得網頁中標籤為div的所有元素
let d=document.querySelectorAll("div")
//取得網頁中標籤為p的所有元素
let p=document.querySelectorAll("p")
//取得網頁中 class 為 name 的所有元素
let name=document.querySelectorAll(".name")
```
### 改變元件內容
在取得網頁上的內容後，就可以進一步的對內容做出改變，可以改變的內容常見的兩種：
一. 改變元件內容，指的是標籤所包含的內容，可能是文字或是其它標籤
```javascript=
//取得網頁上標籤為div的第一個元素
let d=document.querySelector("div")
//將div的內容改變為文字'今天天氣很好'
d.innerHTML="今天天氣很好"
or
d.innerTEXT="今天天氣很好"
//取得網頁class 為 name 的第一個元素
let name=document.querySelector(".name")
//將元件的內容文字變更為"張大同"
name.innerHTML='張大同'
```
如果是使用`querySelectorAll()`來取得多個元素的話，可以使用迴圈來逐一更改內容
```javascript=
//取得網頁中標籤為div的所有元素
let d=document.querySelectorAll("div")
/*
* 使用for迴圈來逐一取出個別元素，其中
* 起始值 let i=0; 設定一個變數i從0開始算
* 判斷式 i<d.lenghth 指當i的值比陣列d中的元素要少的時候就執行迴圈的內容
* 遞增值 i=i+1 每次迴圈執行完一次就會把i的值再加1
*/
for(let i=0;i<d.length;i=i+1){
//使用d[i] 來代表每個元素，並改變元素的內容
d[i].innerHTML="第"+i+"個div元素" //使用 + 來連接字串
}
```
二. 改變元素的屬性，常見的是改變CSS樣式內容比如字型、顏色、外觀等等
```javascript=
//取得網頁中標籤為div的第一個元素
let d=document.querySelector("div")
//改變字型大小
d.style.fontSize='32px'
//改變文字顏色
d.style.color="blue"
//改變元素的內距(padding)及邊距(margin)
d.style.padding="10px"
d.style.margin="10px"
//改變元件的外框
d.style.border="2px solid green"
```
## 課堂範例
建立以下的HTML內容
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
```
在網頁的最後加上以下的js程式碼
```javascript=
<script>
let div=document.querySelectorAll("div")
/*使用迴圈對陣列中的每個元件做不同的處理
for(let i=0 ; i < div.length ; i=i+1){
let c=i%3
if(c==0){
div[i].innerHTML='hello world'
}else if(c==1){
div[i].innerHTML='哈囉世界'
}else if(c==2){
div[i].innerHTML='程式設計很好玩'
}
}
*/
for(let i=0 ; i<div.length;i=i+1){
//利用索引值來取得陣列中的各別元件並逐一對各種屬性進行設定
div[i].style.border='1px solid gray'; //設定邊框
div[i].style.padding='5px' //設定內距
div[i].style.margin='5px' //設定邊距
div[i].style.width='200px' //設定寬度
let fs=12+(i*2) //計算字型大小
div[i].style.fontSize=fs+"px" //設定字型大小
//利用索引值來計算每次迴圈的餘數，對所有的div元件以三個為一個循環進行設定
let c=i%3
switch(c){
case 1:
div[i].innerHTML='hello world'
div[i].style.color='red'
break;
case 2:
div[i].innerHTML='哈囉世界'
div[i].style.color='#00FF00'
break;
case 3:
div[i].innerHTML='程式設計很好玩'
div[i].style.color='#0000FF'
break;
}
}
</script>
```
Sign in with Wallet
Connect another wallet