---
# System prepended metadata

title: Javascript
tags: [Visual Studio Code, 網頁青少年組教材, 環境設定與工具安裝, Xampp]

---

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

```