---
# System prepended metadata

title: JavaScript 涵式 function
tags: [JavaScript]

---

# JavaScript 涵式 function
###### tags: `JavaScript`

### 語法格式
:::info
```javascript=
<script>
    function information(){   //information為自訂名稱
    alert("歡迎");  //執行內容
    }
    information();  //印出的內容
</script>
```
:::


---
### 定義函數的參數
```javascript=
<script>
    function showName(myName){
        document.write("歡迎光臨，我是" + myName + "。<br>");
    }
    showName();  //只寫這樣會undefined
    showName("Tina");  //定義myName為Tina
</script>   
```


---
### 回傳值 return
```javascript=
<script>
    function convertDF(dc){
        return dc * 1.8 +32;
    }
    var dc = prompt("請輸入攝氏溫度","25");
    document.write("華氏溫度為：" + convertDF(dc));
</script>       
```



>顯示如下:
>![](https://i.imgur.com/o6ygKSO.png)
>網頁結果↓
>![](https://i.imgur.com/IbR4ahC.png)



---
### 一維陣列
```javascript=
<script>
    var student =["David","Tina","Rosa"];
        document.write("<table border='1'><tr><td>編號</td><td>姓名</td></tr>");
    for (var a = 0; a < student.length; a++){
        document.write("<tr><td>" + (a+1) + "</td><td>" +student[a]+ "</td></tr>");
    }
    document.write("</table>");
</script>
```
顯示如下:
![](https://i.imgur.com/dtzjtsf.png)


---
##  for/in迴圈
![](https://i.imgur.com/digAwrp.png)


:::info
如果想知道目前這個陣列中到底有多少元素，可以使用 .length 屬性來取得
EX
student.length
![](https://i.imgur.com/tMJqqwj.png)

:::

---
### 多維陣列
表示法1
![](https://i.imgur.com/KGttpin.png)
表示法2
![](https://i.imgur.com/X91T5ls.png)

練習:
```javascript=
<script>
	var student = new Array();
	student[0] = ["David","95","80"];
	student[1] = ["Tina","82","85"];
	student[2] = ["Rose","90","92"];
	document.write("<table border='1'><tr><td>姓名</td><td>國文</td><td>英文</td></tr>");
	for(var i = 0; i<student.length; i++){
		document.write("<tr>");
		for(var j = 0; j<student[i].length; j++){
			document.write("<td>" + student[i][j] + "</td>");
		}
		document.write("</tr>");
	}
	document.write("</table>");
</script>

```
顯示如下:
![](https://i.imgur.com/CpxGs6A.png)


---
## 物件
:::warning
* .後面是屬性
* .後面有()是方法
:::
![](https://i.imgur.com/BU5FOch.png)

### 自訂物件
![](https://i.imgur.com/EetM9Gs.png)

### 取得物件
:::success
* person.name;
* person["name"];
:::



練習自訂物件:
```javascript=
<script>
	function Person(name,age,weight,height){
		this.name = name;
		this.age = age;
		this.weight = weight;
		this.height = height;
		this.sayHello = function(){
			return "您好，我是"+name+"，今年"+age+"歲，身高"+height+"公分，體重"+weight+"公斤。";
		}
	};
	person1 = new Person("David",25,75,180);
	person2 = new Person("Ken",20,65,175);
	document.write(person1.sayHello()+"<br>"+person2.sayHello());
</script>
```


---
## 元素節點
### 利用JavaScript存取元素節點
#### getElementById() 的使用：
* 
     在HTML 網頁中，設定id 屬性是為 HTML 標籤的設定唯一識別碼。也就是如果在HTML 標籤中設定了id 屬性，其他的元素就不能使用相同的名稱來當作id。JavaScript 提供了getElementById() 這個方法來找到指定id 屬性的元素，語法如下：
==document.getElementById("id名稱")==
:::warning
|小訣竅        | 作用         |
|---------- |----------------|
|.innerHTML |抓取HTML文字的屬性|
|\n         |換行            |
|.href      |抓取網址        |
|.length    |抓取變數數量    |
:::

練習getElementById():
```javascript=
<body>
<a href="https://www.website.com" id="website">我的網站</a>
<script>
	var findURL = document.getElementById("website");
	alert(findURL.innerHTML + "的網址是 \n" +findURL.href);
</script>
</body>
```
顯示如下:
![](https://i.imgur.com/BnRhkyS.png)
網站顯示↓
![](https://i.imgur.com/hM5t1s3.png)



---
#### getElementByTagName()的使用：
使用 getElementByTagName() 方法可以在 HTML 網頁中取回指定的標籤名稱，因為網頁上相同的標籤可能不只一個，所以回傳的值是一個陣列，它的語法如下：
==document.getElementByTagName("tag名稱")==


練習getElementByTagName():
```javascript=
<body>
	<img src="gif (1).gif" alt="氣炸">
	<img src="gif (2).gif" alt="搖搖雪花">
<script>
	var findImg = document.getElementsByTagName("img");
	var msg = "";
	for(var i = 0; i < findImg.length; i++){
	    msg += "第" + (i+1) + "張圖為：" + findImg[i].alt + "\n";
	}
	alert(msg);
</script>
</body>
```
顯示如下:
![](https://i.imgur.com/TRt8IrA.png)
網站顯示↓
![](https://i.imgur.com/rvrGGRm.png)








---
<style>
h2 {
    color: #2383F8;
}
h3 {
    color: #1AA340;
}
h4 {
    color: white;
    background-color: #2383F8;
    padding:8px;
}
</style>