# 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>
```
>顯示如下:
>
>網頁結果↓
>
---
### 一維陣列
```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>
```
顯示如下:
---
## for/in迴圈
:::info
如果想知道目前這個陣列中到底有多少元素，可以使用 .length 屬性來取得
EX
student.length
:::
---
### 多維陣列
表示法1
表示法2
練習:
```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>
```
顯示如下:
---
## 物件
:::warning
* .後面是屬性
* .後面有()是方法
:::
### 自訂物件
### 取得物件
:::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>
```
顯示如下:
網站顯示↓
---
#### 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>
```
顯示如下:
網站顯示↓
---
<style>
h2 {
color: #2383F8;
}
h3 {
color: #1AA340;
}
h4 {
color: white;
background-color: #2383F8;
padding:8px;
}
</style>
Sign in with Wallet
Connect another wallet