2020年10月27日

【程式學習】哈佛CS50x學習筆記_Week8-1：HTML、CSS、JavaScript

that wanaka tree
響應式網頁設計的確是不簡單的問題

 

*本文是CS50x的中文學習筆記，是原課程的筆記補充，建議先上完課，看完原課程筆記，再閱讀本文。
哈囉，文組們，我們終於到最後一週啦。這一週主要是分流，你可以選擇網站開發、手機應用程式，或是遊戲。我本身對於網站開發比較有興趣，因為網站的應用面很廣，不管是用Windows系統、macOS系統、Linux系統、Android系統、iOS系統，都會使用到網站。本週課程內容不多，教授David回顧了之前的學習，然後談了資訊安全的重要性，但是講得不深，跳過也沒差，主軸還是放在分流後的教學影片。如果你也是選擇網站開發的話，就跟著我一起動手做吧。
網站開發工程師分為前端及後端兩大領域，在較有規模的大公司，前端領域的工作可能又分UI/UX設計師，以及專精於JavaScript的前端工程師。UI設計師負責使用者介面，主要是視覺上的工作；UX設計師負責使用者經驗之設計，安排網站上的內容規劃；至於前端工程師則是負責網站上所有動態及互動效果。
UI/UX設計師專精的領域除了Illustrator、Photoshop等繪圖軟體，HTML、CSS也是必學的項目。然而，如果你的目標是擔任前端工程師，除了要學JavaScript以及前端框架，HTML、CSS也是必學的哦（畢竟公司不一定會聘專任的UI/UX設計師）。
假設目標是後端工程師，自然就是要學習後端常用的程式語言、網站應用框架、及資料庫，不過我們已經在第6週、第7週分別學了Python、SQL，接著就只剩下網站應用框架。所以要學的項目也不至於太多。
因此，在網站開發課程裡，總共有底下項目需要學習：
  1. HTML、CSS、Bootsrap、JavaScript（HTML DOM）、第一份作業
  2. Flask、資料庫、第二份作業
在第8週的學習筆記，我將會依照上述分成2篇文章。在第一份作業裡，你必須需要學會最基本的HTML、CSS、JavaScript。如果你跟著課程上到現在，已經學會了C語言，那麼你就已經會JavaScript的核心概念了，只差一些特別用法以及常用函數要記住。
至於HTML、CSS的學習重點是什麼，我認為可以把響應式網頁設計（Responsive web design）的設計理念及基礎原理搞清楚。因為網頁設計者必須考慮到使用者可能用各種平台，如電腦、平版、手機來瀏覽你的網頁，他們甚至使用的瀏覽器也不同。網頁設計者得設法讓網頁能夠在不同平台、瀏覽器上都能夠正常顯示，初學者先搞懂怎麼使用Bootstrap就好了。至於要如何寫出更符合HTML5風格的網頁，或者要怎麼使用CSS讓網頁更加美觀，反而是相對枝微末節的事，有興趣的話可以再繼續專研。
另外你可能注意到，我並沒有談到HTTP、TCP/IP、DNS等，而這些在助教的影片裡都有提及。我個人是認為以作業為主軸，把核心概念先學起來。基礎知識部分可以回頭慢慢補齊。

前置工作

1. 下載Visual Studio Code程式碼編輯器
如果你在第6週學習Python時，下載了Anaconda，裡頭就包含了VS Code。這是微軟開發的編輯器，個人是覺得用起來挺順手的，重點是免費。
2. 下載不同的瀏覽器
目前最常用的瀏覽器有 Firefox、Chrome、Opera、Safari、Internet Explorer 與 Micrososft Edge。為什麼要有不同的瀏覽器呢，因為你的網頁在不同的瀏覽器上，可能會長得不一樣。些許差別沒關係，就怕跑版。
當然啦，如果只是要先把作業交出去，可以先下載 Chrome就好了。Chrome上有一個外掛叫Responsive Web Design Tester，建議裝上去，這個外掛可以另開新網頁模擬不同平台的網頁畫面。例如你原本在桌上型電腦上看得好好的，可能用手機閱覽，版面就不太對了。
3. 版本控制系統
這次作業用不到，但是強烈建議要學起來。版本控制系統，類似Google雲端硬碟，可以讓團隊共同編輯程式碼， Git 是最常見的版本控制工具，GitHub則是最常用的程式碼分享服務。

MDN及W3SCHOOL

助教的教學影片當然有教HTML、CSS、Bootstrap、JavaScript的基本概念。不過你是無法只看教學影片就有辦法完成作業的，一定要看補充教材，個人建議是看MDN及W3SCHOOL。建議先看MDN，比較有系統一點，說明得也很詳細；W3SCHOOL則是很適合查語法。

網頁呈現的基本概念

網頁呈現的流程：
  1. 在瀏覽器上輸入網址，接收HTML、CSS、JavaScript訊息
  2. 瀏覽器將HTML轉成文件物件模型（DOM, Document Object Model），文件物件模型有著一個樹狀結構，每個標記語言中的元素、屬性，以及文字片段都會是這個樹狀結構裡的節點。

HTML

HTML （HyperText Markup Language），是一種標記語言（markup language），用來告訴瀏覽器資訊如何呈現，目前最新版本是2017年發佈的HTML 5.2。建議大家使用Visual Studio Code，然後在Extensions下載HTML CSS Support套件，在使用上會更加便利。HTML學習時間非常短，認真學習的話，最多不會超過6小時就可以掌握。

CSS及Bootstrap

CSS（Cascading Style Sheets），是用來讓HTML變得更漂亮的樣式表語言，學習CSS可以看W3SCHOOL，CSS非常簡單，尤其如果你使用VS Code編輯，都能夠自動帶入，也不怕打錯字。Bootstrap是前端框架，目的是做響應式網頁設計（核心精神看這裡）。CSS及Bootstrap的學習時間要比較長一點，因為資料量比較龐大，但是一般來說有3個工作天的話，應該就能掌握核心觀念，我建議Bootstrap參考W3SCHOOL教學。

JavaScript

在第八週第1份作業裡，對於JavaScript要求的學習量很少很少，初學者可以先把重點放在HTML DOM部分。你可以先看W3SCHOOL的簡介，還有這裡對於HTML DOM的介紹。
在網頁上使用JavaScript，相關程式碼可能會長得像是下面這樣，只要先記得document這個字就好了：
document.addEventListener("DOMContentLoaded", function() { // to do });
最後，雖然我建議你學VS Code，但是如果你一時覺得不太習慣，也沒關係，你可以先使用CodePen，在CodePen可以讓實驗HTML、CSS、JavaScript的功能，作用就像是cs50沙盒。這裡是我按照MDN的教程內容，練習的JavaScript小遊戲，放在CodePen上，各位可以參考看看。

作業

第1份作業的重點是：
  1. 必須至少要有4頁不同的html，其中一頁是index.html
  2. 每頁要互相連結在一起
  3. 使用至少10個HTML tags，除了<html>、<head>、<body>、<title>以外
  4. 某一些tag (例如 <p>)要多使用幾次。
  5. 使用Bootstrap前端框架
  6. 至少要有一個CSS檔叫styles.css，裡頭至少有5個選擇器，至少5個不同的CSS樣式
  7. 使用至少1個以上的JavaScript語法
  8. 必須具有響應式網頁設計（Responsive Web Design）
我除了繳交作業以外，也把作業放在Github上，卡關的同學可以上去看看。
Happy Coding!!!





作者： at 沒有留言:

【程式學習】哈佛CS50x學習筆記_Week7：SQL

that wanaka tree
一如往常我又找了笑話或meme圖，但是這個實在太宅，不是每個人都懂

 *本文是CS50x的中文學習筆記，是原課程的筆記補充，建議先上完課，看完原課程筆記，再閱讀本文。

自學程式時，由於知識過於龐大，必須要盡可能地切割成一段一段的知識，以學習SQL為例，我推薦初學者使用互動式網站學習，不用買書，也不用看影片，直接在網站上操作語法，你不需要自己安裝SQL。因為你安裝時，會發現一堆問題，光是處理這些問題你就焦頭爛額。
但是自學者也得有心理準備，這樣的學習方式，缺乏膠水知識，也就是台語說的「鋩角」。比如說我以前學了SQL，雖然有一陣子沒練習，但是也都能看得懂，最多要用查一下就好。可是因為我是在Codecademy線上學習的，我沒有試過在自己的電腦上架設，所以我連如何使用db browser，怎麼建立表格都不會。因為這些教學網站都幫你準備地好好的。
然而這是自學者必定歷經的過程，也只能見招拆招，一一克服。
免費的互動式SQL學習網站，我推薦SQLBolt，只需要4小時，至多8小時就能把基本語法全部學完。為了這次的CS50x課程，我又再看了一次。W3schools的據說也不錯，不過我沒用過，多半都是用來查語法。Fooish程式技術 用來查語法也很不錯，而且還是繁體中文，是站長咀嚼過知識才寫出來，不是糟糕的機器翻譯。有時候如果我看不懂英文介紹，就會來翻一下Fooish。
此外，推薦使用db browser來操作SQL，一切會變得很簡單，按這裡下載。

如何在電腦上使用SQLite

當你在寫本週作業時，會被要求使用：
from cs50 import SQL
不過最後你還是得在自己的電腦上運行SQL，所以還是試著安裝SQLite吧。
SQLite屬於輕量級的資料庫，如果你在上週的課程安裝了Python，你的電腦就有SQLite。Python2.5版本以後已內建SQLite資料庫，你不需要特別安裝。如果你還沒在電腦上安裝Python，建議你直接裝Anaconda，然後用裡頭的Visual Studio Code或者jupyter來寫Python，比較不用花太多心力。
當你在自己的電腦，要使用Python連結SQLite時，首先要import函式庫。
import sqlite3
第一步驟先開啟一個資料庫。
# 如果test.db不存在，就會創一個新的 db = sqlite3.connect('test.db')
或者也可以在記憶體中建立。
db = sqlite3.connect(":memory:")
建立表格。
db.execute('''CREATE TABLE IF NOT EXISTS your_table ( id INTEGER PRIMARY KEY, name TEXT UNIQUE, age INTEGER)''')
在表格裡插入新資料。
# 注意.execute()裡面只能丟入兩個參數 user = (1, "Kai", 30) db.execute("INSERT INTO your_table VALUES (?,?,?)", user)
搜尋表格裡的值。
# 這裡印出的值，型態是元組tuple for row in db.execute('''SELECT * FROM your_table WHERE age > ?''', (age, )): 　　print(row)
存檔並且關閉資料庫。
db.commit() db.close()
綜合上述，整個資料庫操作分別為
  1. 呼叫 sqlite3.connect() 連接資料庫
  2. 呼叫 conn..execute() 執行 CRUD 操作
  3. 呼叫conn.commit() 存檔
  4. 呼叫 conn.close() 關閉資料庫

作業

底下為作業，一個是使用IMDb電影資料庫的資料練習SQL，一個是霍格華茲魔法與巫術學院的學生名單整理。注意在學生名單這裡那份作業，由於是在CS50的IDE操作，有cs50函式庫加持，所以有部分語法會與上述不同。
1. IMDb電影資料庫

cs50x_week7.sql

2. 霍格華茲魔法與巫術學院的學生名單
import.py

cs50x_week7_1.py

roster.py

cs50x_week7_2.py

Happy coding!



作者： at 沒有留言:

【程式學習】哈佛CS50x學習筆記_Week6：大蟒蛇

 that wanaka tree

*本文是CS50x的中文學習筆記，是原課程的筆記補充，建議先上完課，看完原課程筆記，再閱讀本文。
我的第一個學會的語言是Python，經過10週左右的C語言磨練，終於又回到了母語。
如果你的第一個語言也是Python，現在也在上CS50X課程，可能會發現學習C語言有助於幫助你釐清觀念。因為C語言屬於比較接近底層的語言，它不像是Python，不用放入套件就有許多內建功能。例如在C語言，沒有字串的資料型態，要弄成字串，就是得改成字元陣列。所以Python其實在背後幫你做了很多事情。
Python的另一個優點是可讀性，就像上面的哏圖，少了括號、分號等，使得寫Python就像是寫英文一樣。寫程式不是只是讓程式執行就好，程式語言故名思義，就是一種語言，程式語言除了要跟電腦交流，還得跟人交流。所以寫程式時，必須要注意可讀性，不要讓讀者覺得難以理解。
這樣說來，初學者學Python就好，何必學這麼多語言呢？Python可讀性佳，內建功能又多。然而Python的方便是需要代價的，相對於C語言來說，Python的執行速度會比較慢，寫小程式可能沒感覺，但是如果是動輒有數十萬筆的資料，兩者相差的時間就很巨大。當然，在C語言裡，很多功能都必須自己手刻，開發時間較長。使用Python，則可以大幅縮短開發時間。基本上兩者各有好壞，不能偏廢，程式設計師必須視其需求，選擇不同的語言來開發。例如C語言會比較偏向底層，如作業系統、韌體，Python則大量被應用在資料分析、機器學習、網站開發。
不過，初學者要學習什麼語言都是其次，基本上也很少有軟體工程師只會一種語言。重點是要學會基本觀念，如變數、迴圈、計數器、遞迴、記憶體、資料結構、演算法等，這些都會了之後，要學其他語言就很快。因此很推薦大家來學CS50，透過CS50X前5堂的C語言課程，上述的原理都能夠基本掌握。事實上，David也只用一堂課的時間介紹Python，如果過去學習C語言很紮實，很快就能理解Python。
C語言與Python的差異
你可能聽說過Python是直譯式的語言，執行時不需要先編譯，直譯是什麼意思呢？這裡不抄一些教科書回答，直接看程式如何運行。你可以直接使用CS50沙盒，新開一個檔名為 file.py，輸入 print("hello, world")。接著在終端機輸入 python file.py，就可以執行檔案。我更推薦你下載jupyter（點此連結外部網站看安裝教學），在畫面上輸入後，然後按ctrl + enter。
之前在寫C語言時，我們必需要先在終端機輸入 make file.c 來編譯，再輸入 ./file.c來執行。使用Python來開發，除Bug變簡單了，你可以只寫一段Python程式碼，先跑看看有沒有出錯，不用編譯，實在是新手福音。 你也會發現 main()消失了，不需要在寫一個 int main(void)，然後用花括號把主程式包起來。
that wanaka tree

你可能也會發現Python不用再 #include套件，但是其實是Python有內建很多功能，Python仍有很多套件可以使用。只不過在Python，我們是用 import。
that wanaka tree

在Python裡不需要宣告資料型態，你可以直接輸入 a=1，而不是 int a=1;，Python會知道你想存入整數。不過這裡就會產生陷阱，有些時候你透過函式得出的整數，只是看起來是整數，當你想對整數作計算，會發現沒辦法。很有可能是那個不是整數型別，其實是字串型別。你可以先用 type() 檢查是整數還是字串，然後用 int() 將看似整數的字串，轉為整數。這個例子在本次的作業會出現。
在Python裡，常用的資料型別有整數（int）、浮點數（float）、字串（string）、元組（tuple）、列表（list）、字典（dictionary）、布林（bool），其實跟C語言的資料型別可以融會貫通，這裡不多做介紹，可以直接看網路針對Python的教學。如果英文程度夠好，可以看w3Schools.com，想看中文的話，可以看中國大陸的菜鳥教程。
底下我會介紹本次的作業，一共5份。前4份作業都是之前用C語言寫過的，只是改成Python版本。另外在Python是很注意縮排的，縮排出錯就無法執行，可是我把程式碼貼到Gist之後，有時候會有縮排跑掉的情況。所以如果你要複製程式到你的電腦執行時，得注意一下。
作業
hello.py(pset1)

cs50x_week6_1.py

mario.py(pset1-進階版)

cs50x_week6_2.py

credit.py(pset1-進階版)

cs50x_week6_3.py

readability.py(pset2)

cs50x_week6_4.py

dna.py

cs50x_week6_5.py

雖然學會了C語言後，要學Python非常容易，但是還是得花些時間，請繼續努力！
Happy coding!



作者： at 沒有留言:
訂閱： 文章 (Atom)