---
# System prepended metadata

title: '[JavaScript] 基礎'
tags: [JavaScript]

---

# [JavaScript] 基礎
###### tags: `JavaScript`

### 命名

- **內建物件(class)** `PascalCase`
- **屬性、方法** `camelCase`
- **常數** 全部大寫 `Math.PI`
- **事件** 全部小寫 `click` `readystatechange`

---

### 運算子

- `+`(加)
- `-`(減)
- `*`乘
- `/`(除)
- `**`(次方)
- `?:`三元運算子

---

### 資料型態

| 資料型態 | 說明 |
| -------- | -------- |
| undefined | 未被賦值/預設值 |
| null | 未知的值/空值 |
| boolean | 布林值 |
| number | 數字 |
| string | 字串 |

字串值須用引號包裝，下列範例又稱字串模板
```javascript
//雙引號
var name = "winnie";
//單引號
var number = '123';
//反引號,可不用+號串起字串和變數,但變數需用${}包裹,${}內可單放變數、表達式
var str = `我的名字是${name}，編號${number}`
```
> **如何分辨資料的型態:** `typeof`

---

### 物件、內建物件(class)

- **何謂物件?**
    - 自己宣告的變數
    - 物件的屬性
    - 所有的HTML標籤
    - 事件
- **物件的屬性(名詞 | 形容詞)和方法(動詞)**
    ? addEventListener()
    ? parseInt()
    ? innerHTML = 屬性值
- **常用內建物件**
    - Number(double)
    - String
    - Boolean
    - Array (同一個陣列可放入各種型態)
    - Date
    - Math
    - RegExp (正規表示法)
    - Object (無法辨認的型態都當作object)
    - 還有很多，以上是常使用的

- **建構子**
    ```javascript
    class Person{
        //一個class只能有一個constructor,必須用constructor命名
        //constructor內的屬性不須宣告型態
        //constructor(屬性1,屬性2,.......){ }
        constructor( name, age, weight){
            this.name = name;
            this.age = age;
            this.weight = weight;
        }

        //function
        displayName(){
            console.log(this.name);
        }
        displayAge(){
            console.log(this.age);
        }
        displayWeight(){
            console.log(this.weight);
        }	
    }
    ```
---
### 繼承
```javascript
class Programmer extends Person{
	constructor( name,age, weight, language, **hours**){
		super(name,age,weight); //
		this.language = language**;
		this.hours = hours;**
	}

	displayLanguage(){
		console.log(this.language);
	}
}
```

```javascript
//選擇第一個
document.querySelector('#box p')
document.querySelectorAll('#box p')
```





    


    