[筆記] Alpha Camp 第一學期 暖身

章節連結

Alpha Camp 是個新興的線上線下整合的課程平台。和其他的網路平台課程如 Udemy, Hahow 相比,在這個 Camp 學習程式設計的最大差別在於:真人助教的一對一客製化回應,學生也可以觀看其他同學的作品,進而提昇自己的功力。
alpha camp logo


課程目的

了解網路開發的基本,學習編寫簡單的電腦程式和網頁。(摘錄自其課程平台 Lighthouse)

第一週 Week 1

線框稿(wireframe)的目的在於能夠傳達網頁內容的層次與結構,讓工程師快速了解使用者的需求,並避免實際開發與想像有期待落差。Wireframe 要能完整呈現網頁結構、功能,以及內容元素的相對位置與大小等。
Wireframe 的重要性不在於精細程度,手繪也可。只要能幫助工程師有效的溝通、快速達成共識即可。
線框稿繪製工具:Balsamiq、Draw.iO、Adobe Xd、Sketch…等

第二週 Week 2

這一週主要了解網頁如何和使用者互動,HTML 掌管內容純文字、CSS掌管排版及呈現樣式、JavaScript 掌管使用者互動。在排版上學著上 https://www.w3schools.com/ 來查找相關資料。不過對於 float, inline-block 的使用上還需要一點時間熟悉。
[CSS]
1.要避免多餘的程式碼,像是透明邊框 = 不用邊框。
2.選擇器的使用,如 .city (id); #menu (class)。
3.適當的使用註解 /* */ 及空行,來幫助他人閱讀及日後修改。
4.main本身的預設底色為白色。
5.水平排版會運用到 float 屬性,不過一旦浮起後,背景有機會因高度變為0而消失。故你需要指定所在區域<div>的高度值,或是 .clearfix{clear:both}; 來確保背景色會正常出現。
6.圖片本身若下 width:100%,拉動時會隨網頁大小而變化。

第三週 Week 3

試著寫出一個程式。在課程中使用 Ruby,比起曾經沾過醬油的 C++、php 之類的,使用上來更接近真實語言的英文。流程控制和邏輯算是滿有趣的地方,多次測試後會發現不少盲點和可以加強的地方。對於迭代器和陣列比較不熟,在課後需要再找東西來練習。
1.整數(integer)、字串(string)、浮點數(float)、布林值(boolean)、無值(nil)
整數:-1,0,1 ;字串:abc;浮點數:1.0, 2.35, 3.14;布林值:true, false
2.運用 Repl.it 這雲端開發工具,讓你用瀏覽器來編寫程式
3.Array & Hash:可見此整理
4.prints 不換行印出;puts 換行印出
5.迴圈(for, while, until)、迭代(iterator, unless, each)、流程控制(if-elsif-else-end)
6.語法錯誤和邏輯錯誤
syntax error:輸入錯誤、少一個等號…等
logic error:不如預期的結果、算數錯誤…等

第四週 Week 4

最後一週學習運算思維來將現實當中的問題,轉化成邏輯和流程控制來解決。在預防使用者輸入錯誤上,初次接觸了正規表示法。這並不是件容易的事,其代碼比較接近計算器以”位元”為出發點的設計。

1. Regular Expressions (正規表示法) = 用來判斷使用者的輸入正確性
用 // 將條件輸入其中,簡易整理可見此
此外,一定範圍內的數字不能以如 [0-99] 表示,而要以一個個字元來表示如 [0-9][0-9] (代表0~99)
2.各式轉換,如字串要轉換成數字,請記得給一個新變數來裝
3.若你要重複使用某條件,for end; while end…等,別忘記於適當的地方加 break

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:334