[MTR04] W2 D1 JavaScript 基礎


Posted by Christy on 2020-06-17

今天學習:看影片: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. 手機的流程也是一樣的,但通常前端是在說網頁

做 W1 自我檢測

不知道為什麼我無法打出 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 說:「你就打開門,去賞他們兩巴掌,他們才知道誰是老大。」我真的快被他笑死,這小孩怎麼這麼民視啊,到底隔離在家除了看漫畫以外都幹了些什麼呢...
一直催眠自己,下個月就要搬家了,一切都會好的,看看戶頭再看看宜家的網頁,要買床跟床架也不是一件容易的事,感覺很麻煩,我一直在拖延...我要努力撐下去。










Related Posts

【譯】Tokio 內部機制:從頭理解 Rust 非同步 I/O 框架

【譯】Tokio 內部機制:從頭理解 Rust 非同步 I/O 框架

MTR04_0624

MTR04_0624

每日心得筆記 2020-06-30(二)

每日心得筆記 2020-06-30(二)


Comments