Javascript、HTML、CSS我來了！[Alpha Camp學期一] 新新手入門
除了上課平台、共學社群的基本使用介紹，初步講解了程式語言基礎觀念，對於我這種隔行如隔山的人來說是個還不錯的opening！
這一週迅速地進入了基礎的Javascript基礎語法和觀念，使用Repl.it網路平台開始練習寫code(不用煩惱軟體安裝問題真好😂)，也馬上開始有作業和小測驗了。課程安排得還不錯，從很簡單的變數運算子到稍有挑戰if/else條件式、for/while迴圈，再到建立運算思維的虛擬碼、流程圖、Debugging，循序漸進地讓新手(就是我)建立寫程式思維邏輯的習慣。在相應的單元還有一些其他網站的參考資料連結，對我來說當下看不懂可是學習完回過頭才發現很不錯，基本觀念的介紹釐清換其他表達方式有時讓不知道我們不知道什麼的新手加強了解了一點。
這週的收穫除了終於踏入門的松一口氣和真的寫出會跑出結果的程式碼(雖然真的很基礎)的成就感，對我來說額外的收穫是收斂我跳躍的思考和表達方式(我必須說，辛苦了在我人生中嘗試要跟我溝通的人們😅，在此由衷的表達我的抱歉和感謝！)。還好這個上課平台可以看到其他同學交的作業，我才驚覺助教打開我作業的瞬間是會有多傻眼😂，其實我花了十二萬分努力先寫完可以跑出結果的程式碼再回頭修改加註解讓助教好讀一點。(對不起，我的虛擬碼和流程圖是寫完程式碼才回頭畫的，腦迴路方向不一樣還在努力中😅)
第二週-Javascript小挑戰和初步認識HTML、CSS
Javascript印象最深的作業是猜數字遊戲要在10局內猜出答案。喔吼我的暴力解是：第十局不管猜謎者說什麼數字，主持人都告訴她答對了，直接改了標準答案。(厲害吧😂)
改進後決定讓兩個參賽者參賽，一個用亂數猜、另一個用中位數猜謎，看誰會贏。
// 宣告變數
// 選號範圍 a <= 答案 <= b
let a = 1
let b = 100
let answer = Math.floor(Math.random() * (b - a + 1)) + a // 標準答案
// 假設有2位玩家參與遊戲
let guess_1 = 0 // 電腦1號玩家, 用亂數策略
let guess_2 = 0 // 電腦2號玩家, 用中間數策略
let count = 1 // 局數
console.log(`手卡標準答案是：${answer}`)
// 設定迴圈：只要有玩家猜中就跳出迴圈
while (guess_1 !== answer && guess_2 !== answer) {
guess_1 = Math.floor(Math.random() * (b - a + 1)) + a //指定電腦選號落在大於等於a小於等於b之間的亂數
if (count <= 10){ // 在 10 局內，讓2位電腦玩家用各自策略輪流猜數字
console.log(`第${count}局！`)
if (guess_1 > answer) { //玩家1號先猜
console.log(`玩家1號猜的數字${guess_1}太大了！`)
b = guess_1 - 1
console.log(`答案落在${a}和${b}之間。`)
} else if (guess_1 < answer) {
console.log(`玩家1號猜的數字${guess_1}太小了！`)
a = guess_1 + 1
console.log(`答案落在${a}和${b}之間。`)
} else {
console.log(`玩家1號猜的數字${guess_1}和標準答案${answer}一致。玩家1號獲勝！`)
}
if (guess_1 === answer) {
console.log('很遺憾，玩家2號您運氣不好，玩家1號先一步猜出答案。')
} else {
guess_2 = Math.floor((a + b) / 2) // 用中間數猜, 沒中就可刪掉一半可能性
if (guess_2 > answer) { //換2號玩家猜
console.log(`玩家2號猜的數字${guess_2}太大了！`)
b = guess_2 - 1
console.log(`答案落在${a}和${b}之間。`)
} else if (guess_2 < answer) {
console.log(`玩家2號猜的數字${guess_2}太小了！`)
a = guess_2 + 1
console.log(`答案落在${a}和${b}之間。`)
} else {
console.log(`玩家2號猜的數字${guess_2}和標準答案${answer}一致。玩家2號獲勝！`)
}
}
} else { // 第10局還沒猜中就不忍了，直接公布答案
console.log(`第${count}局，很遺憾您兩位都沒猜中！標準答案是${answer}。給2位安慰獎！`)
}
count ++
}初步認識Javascript就在這歡樂的猜謎中度過，接下來就開始HTML、CSS了。
HTML、CSS使用 CodePen.io 網路平台，一樣免除了新手卡關在軟體安裝的挫折裡，直接上手開始寫語法。介紹了DevTool開發者工具，突然間平時開的各個網站跟程式碼在我的腦海中連上線了，我到處開著看真實網頁語法有多複雜、有多少我要追趕學習的！
這週從最基礎的HTML語法、CSS語法及加強Box Model觀念到User Story及認識wireframe，開始帶我們進入視覺介面的真實世界。這週小作業是練習DevTool開發者工具修改網頁內容(我超ㄔㄨㄚˋ的，直到課程裡再三保證我們不會駭客進網頁後台真的改到網站的原始設定😂)和User Story的練習。最後讓我們思考一下這兩週學到JS和介面的特性，目前為止偏向喜歡哪個和為什麼，畫下了第二週的句點。
第三週-靜態網頁實作
上週是初步介紹和修改別人做好的網頁，而這週就是從頭到尾實作出靜態網頁了！HTML目前階段很簡單，而CSS要達到自己預想的效果非常有挑戰(當完成後回過頭發現主要是因為自己的觀念不夠清楚)但也很容易讓人上癮(改著改著不小心天就亮了😱)。
這週除了學到基礎的語法觀念、從wireframe到網頁外，也學到了從Google找資源的習慣。因著叛逆如我在照著課程一步一步完成和標準範例一模一樣的頁面後，忍不住就想要有其他效果的樣式，一份簡單的履歷作業我花了三天(幾乎不眠不休)不斷找資料、調整語法後終於完成我要的頁面(!轉圈圈灑花!)，成就感之大的！尤其和學期二的學長交流發現有些語法在學期2-1才開始教我居然就用出來了，太神奇了！
這週課程在最後的回顧與展望及技術重點期末考中畫下句點。
推薦的資源和網站
Font Awesome ：Icon圖示
Google Fonts ：取得第三方字體
Box Shadow ：簡易Box Shadow調整示意，可以直接複製程式碼使用
Web前端之家 ：簡易CSS三角形生成器，可以直接複製程式碼使用
W3Schools ：各種語法解釋和範例
freeCodeCamp ：基礎語法練習
Flexbox Froggy：練習CSS的flexbox好玩青蛙小遊戲
留言
張貼留言