# 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
> 如果 JS 寫在 head 位置
> 因為網頁還沒長出來, 就會爆掉
> 如果丟在 head 都常是引入
> 如果 JS 要寫在 head 會加個 defer 延後載入
> 讓 JS script 放在 body 內
---
# 寫 JS 的注意重點
- 三個重點:
```
1. 誰 Who ?
2. 甚麼時候 When ?
3. 做甚麼事情 Do what ?
```
- GIGO(Garbage In Garbage Out), 垃圾進, 垃圾出
> 程式給你垃圾的時候, 是因為你給他錯誤的東西(值), 他就給你甚麼(給錯誤的答案)
> 如果做好上面三件事情, 程式可以正確執行
---
# 今天 CSS 能做的事情越來越多了
- 那甚麼狀況要用到 JS?
- CSS 通常只拿來控制同層或是下層的東西 - 能用 CSS 的可以不用 JS 做(執行效率問題)
- 如果今天是不同層的時候, (以後可能有 CSS 找不同層的), 就會用到 JS
---
**如果讓滑鼠點擊 B 方塊的時候, C 方塊要變色要怎辦?**
> 雖然 CSS 也辦得到(如果相同層, 父子層)
---
# 先從流程圖開始
> 滑鼠移動到 B 的時候要怎麼變色?
> 這時候"誰"有兩個角色
- 因此, 在 JS 中要取得 HTML 元素, 可以用以下指令:
```
拿 querySelector 去使用 CSS Selector 去抓 html 元素
document.querySelector('#b')
```
- 在 JS 當中, 要確認程式是否正確執行, 會使用 `console.log` 去印(輸)出目前結果或狀態, 來方便除錯與撰寫
```
console.log('Hello world!')
```
會在瀏覽器中的 Console 出現!
- 自己 try
> If use print, will proceed printer.
```
<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 ↓
- 印出 ↓
---
# null 或 undefined
> null 與 undefined, 通常會用到沒有宣告或者沒者給值的狀況時
---
# JS 的宣告方式
# 除了資料型態, 這也是 JS 的特性
```
var a
console.log(a);
不同於 C, Java 等編譯語言, JS 宣告可以不用在開始的時候決定 資料型態, 而是根據收到的值去變化資料型態
```
- 辣個自由的 JS, 你可以給他甚麼他就是甚麼(適用於全域變數 var)
> 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)
---
# 運算元與運算子
- 這是甚麼?
> 輸出結果是 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
```
# 參考資料
[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 表
- 難度分級
----
# 課外 - code 編寫
[可不可以不要寫糙 code :: 2019 iT 邦幫忙鐵人賽 (ithome.com.tw)](https://ithelp.ithome.com.tw/users/20107637/ironman/1927)
Sign in with Wallet
Connect another wallet