---
# System prepended metadata

title: 10/05 JS 入門
tags: [2021/10/05, JS, 進度筆記, 前端心得]

---

# 10/05 JS 入門   
###### tags: `JS` `2021/10/05` `進度筆記` `前端心得`  
---

講師: 佘昌霖   

---

# JavaScript 這回事~   

- 相對 html(不是程式語言, 是文本), 相對嚴謹, 輸入錯了就馬上報錯   
- 80% 的 not print 或是錯誤都是來自錯字XD   
- 編譯 VS 直譯語言   
> 把 code 轉換成機械語言讓電腦讀   
> 編譯: 先把所有語言打包然後轉換成機械語言讓電腦讀, 只有第一次比較花時間, 之後就跑很快   
> 直譯: 做一行轉譯一行讓電腦讀, 缺點是耗資源, 但讓人比較好讀, 例如 JS   

# 參考資料   
[編譯語言 VS 直譯語言. 程式語言發展至今種類玲琅滿目，除了語言本身語法的不同之外，程式語言本身的特性也會… | by Po-Ching Liu | Medium](https://totoroliu.medium.com/%E7%B7%A8%E8%AD%AF%E8%AA%9E%E8%A8%80-vs-%E7%9B%B4%E8%AD%AF%E8%AA%9E%E8%A8%80-5f34e6bae051)   

[【JS課程筆記】-直譯式語言 vs 編譯式語言 - IvyCodeFive - Medium](https://medium.com/ivycodefive/js%E8%AA%B2%E7%A8%8B%E7%AD%86%E8%A8%98-%E7%9B%B4%E8%AD%AF%E5%BC%8F%E8%AA%9E%E8%A8%80-vs-%E7%B7%A8%E8%AD%AF%E5%BC%8F%E8%AA%9E%E8%A8%80-ab584edaa762)   
[第1天：一文搞懂直譯與編譯語言的差異 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10214510)   

----

# JS 前世今身  

Netscape 的[Netscape Navigator](https://zh.wikipedia.org/wiki/Netscape_Navigator), 
曾經是瀏覽器霸主, 但倒惹   

- JS 曾經叫做 **LiveScript**   

- JS 好處是瀏覽器(環境)有內建  

- 課外 - 跨國銀行常用 Oracle 的 ERP 系統, 最近開始有銀行自行建置 php   

---

# 網頁中的 JS  
![](https://i.imgur.com/6tgrJUU.png)   
> 如果 JS 寫在 head 位置   
> 因為網頁還沒長出來, 就會爆掉  
> 如果丟在 head 都常是引入   
> 如果 JS 要寫在 head 會加個 defer 延後載入  
![](https://i.imgur.com/Uv8bgpw.png)   
> 讓 JS script 放在 body 內   

---

# 寫 JS 的注意重點   
- 三個重點:  
```
1. 誰 Who ?
2. 甚麼時候 When ?
3. 做甚麼事情 Do what ?
```
- GIGO(Garbage In Garbage Out), 垃圾進, 垃圾出   
> 程式給你垃圾的時候, 是因為你給他錯誤的東西(值), 他就給你甚麼(給錯誤的答案)   
> 如果做好上面三件事情, 程式可以正確執行   

---

# 今天 CSS 能做的事情越來越多了  
- 那甚麼狀況要用到 JS?   
- CSS 通常只拿來控制同層或是下層的東西  - 能用 CSS 的可以不用 JS 做(執行效率問題)  
- 如果今天是不同層的時候, (以後可能有 CSS 找不同層的), 就會用到 JS  
![](https://i.imgur.com/f9yVuhp.png)   

---

**如果讓滑鼠點擊 B 方塊的時候, C 方塊要變色要怎辦?**   
> 雖然 CSS 也辦得到(如果相同層, 父子層)  
---

# 先從流程圖開始   

> 滑鼠移動到 B 的時候要怎麼變色?  
![](https://i.imgur.com/ykBj0K6.png)  

> 這時候"誰"有兩個角色   
- 因此, 在 JS 中要取得 HTML 元素, 可以用以下指令:   
```
拿 querySelector 去使用 CSS Selector 去抓 html 元素  
document.querySelector('#b')
```
- 在 JS 當中, 要確認程式是否正確執行, 會使用 `console.log` 去印(輸)出目前結果或狀態, 來方便除錯與撰寫   
```
console.log('Hello world!')
```
會在瀏覽器中的 Console 出現!  
![](https://i.imgur.com/Mmtcqug.png)   

- 自己 try  
![](https://i.imgur.com/ZUOq8hG.png)  
> If use print, will proceed printer.  
![](https://i.imgur.com/uT8GvRC.png)   

```
<script language="javascript">  
  if (!window.console) console = {log: function() {}};     
</script>

If window.console doesn't exist,  change the log(method) into empty → will not produce an error.

```
---

# JS 資料型態(別)  

- 程式碼中資料的傳遞必須經由變數  
> 資料有不同的種類   

---

## 字串 (Strings)  
- 一段文字, 在程式中會以單引號或是雙引號包覆   
- 常用單引號來寫  
- JS 每行的分號, 寫的時候可以統一一下, 要嘛都沒有, 要嘛都寫出 ```;``` 分號來  

> 例如   
```
'這是一個字串'
"123456"
```

---

# 數字 (Number)  
- 數字或是數字類型的值, 在程式中會直接寫出  
```
45
3.1415926
123456
```

- 雖然兩者輸出結果相同, 但資料型態卻有可能不同  
- 現在瀏覽器很貼心, log 出來的結果會根據資料型態不同給不同文字 color(不一定)  
- 例如:   
```
console.log(123456)
console.log('123456')  
```
- 為了方便辨別型態, js 有提供一個涵式(function) 去辨識資料的型態: `typeof`  
```
console.log(typeof 123456)
console.log(typeof '123456')  
```

---

# 布林值 (boolean)  
- 只記錄 True 或 false(正確與否), 通常只會使用在儲存判斷條件的狀況  
![Uploading file..._l37vjsloc]()   

- true ↓  
![](https://i.imgur.com/a6ekDp4.png)   
- 印出 ↓  
![](https://i.imgur.com/KjRbZrS.png)  

---

# null 或 undefined  
> null 與 undefined, 通常會用到沒有宣告或者沒者給值的狀況時  

---

# JS 的宣告方式   
# 除了資料型態, 這也是 JS 的特性   
```
var a 
console.log(a);
不同於 C, Java 等編譯語言, JS 宣告可以不用在開始的時候決定 資料型態, 而是根據收到的值去變化資料型態
```
- 辣個自由的 JS, 你可以給他甚麼他就是甚麼(適用於全域變數 var)

![](https://i.imgur.com/NrikYRg.png)   

![](https://i.imgur.com/fUTVN4j.png)   

![](https://i.imgur.com/mpJrYx1.png)   

![](https://i.imgur.com/EwhcytU.png)   

> JS 沒有強制預設值, 使用變數的時候會儲存在記憶體內, 你要用的時候再拿出來  
> 這也是為什麼 JS 適合拿來做基礎語言, 沒有那麼強制要求  


- JS 會試著轉換成應有的資料型態(以前面的值為準)   
- 例如:    
```
console.log(111 + '111') → 111111
數字+字串的時候會先嘗試把數字轉換成字串
console.log(111 + true) → 112 
因為 boolean 的 true false 如果轉成數字型態會變成 1 跟 0
```



---

# 參考資料  
[JavaScript 的資料型別與資料結構 - JavaScript | MDN (mozilla.org)](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Data_structures)  

[JavaScript 基本解說，變數型別，宣告 - Node.js day 6 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10103397)   

[Neutrino's Blog: 30 天 Javascript 從入門到進階：變數、資料型態以及算術運算式 (tigercosmos.xyz)](https://tigercosmos.xyz/post/2018/11/master_js/variables/)   

[重新認識 JavaScript: Day 03 變數與資料型別 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10190873)   

[\[鐵人賽\] JS 基本解說，變數型別，宣告 - Node.js Day 6 (caesarchi.com)](https://blog.caesarchi.com/2012/10/js-nodejs-day-6.html)  

[JavaScript教學 - 資料型態(Data Type) - 上 @ 小殘的程式光廊 :: 痞客邦 :: (pixnet.net)](https://emn178.pixnet.net/blog/post/94150562)



---

# 運算元與運算子   

- 這是甚麼?  
![](https://i.imgur.com/hifTnO5.png)  
> 輸出結果是 banana, 至於為什麼 ↓  

```
console.log(true/false)
運算元 → true false
運算子 → +
```
- 運算元跟運算子, 但在程式中見到的 `=` 並不是數學上的 `=`   
> 程式中的 `=` 代表賦值的意思, 運作方式是將右邊的結果(值), 賦於給左邊的變數  
```
右邊丟到左邊的意思
```

- 除此之外 == 代表判斷, ===  代表嚴僅的判斷   

== 於是來談談 為什麼是 banana ==  
- 首先, `toLowerCase()`   
```
console.log(('b' + 'a' + + 'a' +'a'));
```
在 JS 中, + 可以是字串運算子, 也可以是算數運算子, JS 會藉由左右兩個運算去決定要怎麼使用 / 使用哪一種   

```
前面的 'b' + 'a' 自然變成了 'ba' + (+ 'a') + 'a'
```

- 'a' 是算術運算子的寫法(一元運算子), 根據 JS 的特性, JS 會嘗試將 'a' 轉換成數字  
-  But, 就是這個 but, 因為字串無法成功轉換成數字(也沒有涵式幫忙, 且因為 'a' 是文字)  
> 所以會嘗試輸出 NaN(Not a Number) 的值  

```
'b' + 'a' + NaN + 'a'

→ baNaNa 
於是加上轉換小寫就成了 banana 
```

![](https://i.imgur.com/AT7TbBL.png)   


# 參考資料  
[NaN - JavaScript | MDN (mozilla.org)](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/NaN)  
[運算式與運算子 \- JavaScript | MDN (mozilla.org)](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_operators)   
[\[Day14\] 運算式與運算子 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10274291#:~:text=%E9%81%8B%E7%AE%97%E5%BC%8F%E5%85%B6%E5%AF%A6%E6%98%AF%E4%B8%80%E5%80%8B%E7%B0%A1%E5%96%AE%E7%9A%84%E5%87%BD%E5%BC%8F%EF%BC%8C%E5%AE%83%E6%98%AF%E7%94%B1%20%E9%81%8B%E7%AE%97%E5%AD%90%20%28Operator%29,%E8%88%87%20%E9%81%8B%E7%AE%97%E5%85%83%20%28Operant%29%20%E7%B5%84%E5%90%88%E8%80%8C%E6%88%90%EF%BC%8C%E9%80%8F%E9%81%8E%E7%AC%A6%E8%99%9F%E6%88%96%E5%96%AE%E8%A9%9E%E4%BE%86%E9%81%8B%E7%AE%97%E4%BB%96%E5%89%8D%E5%BE%8C%E7%9A%84%E6%95%B8%E5%80%BC%EF%BC%8C%E4%B8%A6%E5%9B%9E%E5%82%B3%E4%B8%80%E5%80%8B%E7%B5%90%E6%9E%9C%E3%80%82)   

[2-2 運算式與運算子 (nfu.edu.tw)](http://cslo.nfu.edu.tw/FlashGame/ActionScript/ch02/ch02_02.htm)  

---
---
----

# 前端語言, Tier 表  
- 難度分級
![](https://i.imgur.com/SURjrYE.png)  

----

# 課外 - code 編寫   
[可不可以不要寫糙 code :: 2019 iT 邦幫忙鐵人賽 (ithome.com.tw)](https://ithelp.ithome.com.tw/users/20107637/ironman/1927)   

