---
# System prepended metadata

title: 前端JS (1) DOM
tags: [js, frontend]

---

---
title: '前端JS (1) DOM'
disqus: hackmd
---
###### tags: `frontend` `js`
前端JS (1) DOM
===

[TOC]

## 學習JS的順序

1. 基礎語法熟悉之後，以操作array還有json為最重要的事情
2. 操作DOM
3. 傳送資料，接收資料


## 思考邏輯

其實分成三個步驟

1. 取得ID
2. 定義事件函數
3. 寫監聽




## 程式碼部分

```htmlembedded=
<!-- 設置一個按鈕 -->
<input type='button' id='btn' value='按我'>
```

### 第一種寫法

```javascript=
// 1. 取得 DOM
var btn = document.querySelector('#btn')

// 2. 你ㄉ按鈕.事件監聽 ('事件觸發方式',要執行的函式)
btn.addEventListener('click',function(){
	alert('恭喜您是第9999位幸運兒！')
});
```
### 第二種寫法
```javascript=
/* 用一樣的 HTML */
var btn = document.querySelector('#btn')

// 寫函式
function lucky(){
	alert('恭喜您是第9999位幸運兒！')
}

// 寫監聽
btn.addEventListener('click',lucky)
```


## Creating a FormData object from scratch

```javascript=
var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456"

// HTML file input, chosen by user
formData.append("userfile", fileInputElement.files[0]);

// JavaScript file-like object
var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

```



## 參考資料

[BMI計算機](https://ithelp.ithome.com.tw/articles/10245299)

[非常好用的AXIOS](https://ithelp.ithome.com.tw/articles/10253259)


