[MTR04] W2 D1 JavaScript 基礎

今天學習：看影片：MTR04 第一週、MTR04 第二週看到「我們不一樣：位元運算」第一個影片結束

看影片：MTR04 第一週（06/12 ~ 06/21）

很重要的基礎：檔案格式

因為人理解的檔案格式跟電腦不同，所以需要程式語言來跟電腦溝通。

網頁前後端整體架構說明

在網頁搜尋的時候，背後是如何運作的？

1. 瀏覽器發出 request 到 server
2. server 去問 資料庫
3. 資料庫回傳訊息給 server
4. server 再回傳給瀏覽器
5. 瀏覽器再顯示你的搜尋

嚴格說起來，實際上是這樣：

1. 電腦硬體 -> 作業系統 -> 瀏覽器
2. 瀏覽器透過作業系統，作業系統透過硬體送出 request
3. 中間經過了一堆網路伺服器 （台灣 -> 美國 -> google）

前後端：

1. 前端包含：HTML, CSS, JavaScript
2. 後端包含：DNS 伺服器
3. nslookup 後接網址：可以顯示 IP 位置
4. request 是一個 http 格式的封包，第四週網路概念會講到細節
5. 前八週的前端基礎學完應該就沒問題了
6. 第九週開始會講後端，大概十五週上完後端也沒問題了
7. 接著兩邊再互通起來
8. 手機的流程也是一樣的，但通常前端是在說網頁

做 Ｗ1 自我檢測

不知道為什麼我無法打出 checkbox - [ ]，看來要研究一下

Y P1 你說得出程式如何執行
Y P1 你理解寫程式的本質只是一行行的指令
Y P1 你了解前端與後端的區別
Y P1 你能說出從發出一個 request 到接收 response 中間發生的事
Y P1 你了解不同載具的差異在哪（Desktop、Mobile、Web）：
Responsive Web Design 什麼是響應式網頁設計
Y P1 你了解基本的 command line 指令
Y P1 你知道 Git 在做什麼，以及為何我們需要 Git
Y P1 你知道 add、commit、push、pull 等基本 Git 指令
Y P1 你知道怎麼使用 branch 並送出 Pull Request
Y P2 你熟悉 Git Workflow（其實就是交作業的流程）

看影片：MTR04 第二週（06/22 ~ 06/28）

課程簡介

為什麼要學 JavaScript?

• 早期 JS 可以寫在瀏覽器上，無法脫離瀏覽器之外執行
• node.js 這個執行環境出現以後，JS 就可以在電腦上執行了
• console.log 在瀏覽器跟 node.js 兩邊都有提供

快速 JavaScript 基礎簡介

• 在程式語言裡面，等號是賦值的意思
• var 變數，可以給任意數字
• if else，不是 A 就是 B
  • 條件是小括號
  • 也可以寫 if, else if, else
• 變數可以用中括號包起來 [ ]，就變成一個陣列 array，可以放很多同類型的元素

var scores = [80, 60, 20, 50, 70]
console.log(scores = [0]) -> 代表取第零個元素，也就是 80
console.log(scores.length) -> 來看總共有幾個元素

• 當我們要做很多次重複的事時，就可以用迴圈 loop

for (var i=0 ; i<=4; i++){
console.log(i)
}
第一個 i=0: 初始條件
第二個 i<=4: 終止條件
第三個 i++: 每一圈要做的事

• function 函式，裡面可以放一個參數
• 好神奇啊，看到這裡把有東西都串起來了！
• 容易搞混的地方：
  console.log 輸出，把值印出來；return 回傳執行完以後的結果，並且結束運作

作業介紹

• 要分清楚印出跟回傳
• 跑過程式沒問題才可以上傳作業

看影片：JS101

連小學生都會的基本運算

算數運算：加減乘除以及取餘數

• 在 terminal 裡面打 node，就可以在裡面寫 JS 了
• control +c 可以離開
• 加減乘除的運算符號都一樣
• 取餘數用 %

邏輯運算：and、or 與 not

|| or: 只要有一邊為真，即為真
&& and: 兩邊為真才為真；其餘為假 (是兩個 &，是兩個！)
! not: !false = true !true = false

邏輯運算的小撇步：|| 與 && 的短路性質

• ||: 第一個碰到為 true 的，就會回傳那個值

  • 2 || 20:回傳 2
  • false || 20:回傳 20
  • 0、空字串、false 都為假的值

• &&: 找到最後一個為假的值，若無，則回傳最後一個值

  • 3 && 10: 回傳 10
  • true && false: 回傳 false
  • false && 3: 回傳 false；第一個已為假，後面就不用看了

我們不一樣：位元運算

左左右右：位移運算子

• 這跟二進位有關

10 << 1 -> 10 往左移一位（像是乘以二的概念）
20      -> 就變成 20

1024 >> 1 （像是除以二的概念）
512

• 不能被整除的數，不會顯示餘數

9 >> 1
4

• 用位元運算法，會比 * or / 效能要來得快

看到下一個影片就沒辦法專心了，決定今天早點睡。

今天上課真的超鬧的啊，早上終於把所有欠的作業做完了，然後跟同學在群組裡面聊一堆幹話，Jin 說我很 geeky 因為我都講帶有技術字眼的幹話，忽然覺得自己好像阿宅。
上課到一半室友開始在門外吵架，聽不到老師 demo，同學打視訊給我我也只能掛斷電話，後來 Luis 說：「你就打開門，去賞他們兩巴掌，他們才知道誰是老大。」我真的快被他笑死，這小孩怎麼這麼民視啊，到底隔離在家除了看漫畫以外都幹了些什麼呢...
一直催眠自己，下個月就要搬家了，一切都會好的，看看戶頭再看看宜家的網頁，要買床跟床架也不是一件容易的事，感覺很麻煩，我一直在拖延...我要努力撐下去。