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

[TOC]

## 學習JS的順序

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

## 思考邏輯

其實分成三個步驟

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

## 程式碼部分

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

### 第一種寫法

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

// 2. 你ㄉ按鈕.事件監聽 ('事件觸發方式',要執行的函式)
btn.addEventListener('click',function(){
	alert('恭喜您是第9999位幸運兒！')
});

### 第二種寫法

/* 用一樣的 HTML */
var btn = document.querySelector('#btn')

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

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

## Creating a FormData object from scratch

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)