---
# System prepended metadata

title: 六角JS課程DAY01

---

# 六角JS課程DAY01

1. 控制瀏覽器網頁內容(針對標籤、CSS做動態..等等)
2. 跟外部伺服器要資料、或更新資料

## 變數

變數名稱 都會有一個值
EX: father 93379393

建立一個變數正確寫法:
```javascript=
var fatherold = 40;
var wifeold = 18;
```
他可以賦予幾種基本型別(Primitive)或物件型別(Object)的值，像是數字(number)、字串(string)、boolean、undefined、null、symbol

*如果今天想在專案上觀看你設定的變數有沒有成功，CHROME有內建一個CONSOLE可以使用，點選網頁右鍵檢查->console打變數名稱。

## DOM(Doucument Object Model)

文件物件模型

如何使用JS選取CLASS? 使用`document.querySelector`
```javascript=
document.querySelector(".header").textContent = "ㄏ";
//選取該網頁文件找到裡面的.header，新增文字，賦予它叫做"ㄏ"
```
如果不給他等於的值，他是直接取出裡面文字變數的內容。

動態新增一個class
```javascript=
document.querySelector(".header").classList.add('active');
//選取該網頁文件找到裡面的.header，新增文字，賦予它叫做"ㄏ"
document.querySelector(".header").setAttribute("style","color:red");
//動態增加一個style為color等於red
document.querySelector(".header").innerHTML="<H1>1212</H1>"
//賦予一個值，如果要取出一個值，寫innerHTML即可
```
可以使用var = element(變數名稱) 指向 dom，這樣之後就不用每一次都寫這麼長，換句話說變數可以存放DOM變成一個記憶體空間
```javascript=
var element = document.querySelector(".header")
//選取該網頁文件找到裡面的.header，新增文字，賦予它叫做"ㄏ"
```

## 函式(function)

寫function且可以在後面新增函式名稱

```javascript=
function sum(num1,num2) {
return num1 + num2;
}
```
