最困難的是我到底要寫什麼

其實這個階段也從老師身上學習了不少知識，以我本身來說，這時候我會很想要試試看我是不是能把老師之前出的作業，亦或者是把自己的想法自己做出來，但，最難的是我開如何起頭？我該如何從哪個功能開始繕寫？

這就很像我大學時期學的力學或工數，我們了解也背了許多方法和公式，這些都不難，但難就難在我到底要使用哪些公式？尤其是編程是無限多的使用方法，也沒有所謂的正確解答。

小邏輯分享

老實說這次上課的兩個範例對我來說實在是太艱難了我實在分享不出一個技術上的東西，但我可以分享的是思想上的經驗。

這次老師上課是分享豪華版的電梯和踩地雷，就稍微分享老師教導的邏輯。

當我想做這樣的電梯以我的經驗會完全不知道如何下手，但我們把所有功能不斷地切成最小的細項，並且把大雛形雕出來。
1.電梯按鈕– 當按哪一層樓的數字則顯示板可以顯示該數字。
2.電梯門– 做好簡陋的電梯門與控制板的排版。
3.實作電梯主功能– 當我按了五樓，顯示板並不會直接跳到五樓而是到二>三>四>五樓依序上去。
4.電梯門開關– 到達指定樓層可以把電梯門打開，數秒後關閉。

做到這邊雛形出來了，再來就是逐漸把額外功能和樣板再一一加上去，這時候又可以深刻體會到Github版本控制的好處了，我們可以隨時的掌握好每一個功能的完善，逐一測試和處理，像是我要做一個功能是一次點多個樓層並且可以依序到達各個樓層。

這裡讓我印象深刻的是平日的生活中我們覺得這只是一個功能，但對程式語言來說這是好幾個功能的總和，譬如說逐次依序開門是一個功能，判斷電梯是否往上而只先依序跑完往上的樓層才去跑往下的樓層是一個功能。

程式語言最有趣的地方就在這裡，譬如說我們覺得『走路』是一個功能，但對電腦程式語言來說我們必須把他分成右腳抬起>膝蓋彎曲>右腳往前>膝蓋伸直>右腳踏穩後再執行左腳，上述就分成了四，五個功能以上。

『如何把功能切成細項我覺得是學習編成超級重要的一環』

這讓我想起日本戰國時代宮本武藏的故事，他是一位單打獨鬥從來沒有輸過的一名浪人，但有一次有五十個人追殺他要怎麼打贏呢？宮本武藏很聰明的進入一條一次只能一個人通過的狹路上，發揮他的本領把敵人一一擊破。

寫編程的時候我們覺得很多日常生活中的東西只是『一個功能』，但對電腦程式來說他可能是好幾十個小功能的總和，對於新手來說我們單挑一個小功能都有可能慘敗了那如何要應付十個功能的轟炸呢？

今天也是花了大半的時間解開第七堂課剩餘的題目，live show真的很好看啊！XD

隨著前端博大精深，在很多時候我們不想要自己重新製造一個功能或框架，這時候去copy別人已經做好的東西是很有效率的，加上能分享給大家的開放code通常也是給各位玩家千錘百鍊過的東西，絕對是很容易超越一個人的經驗。

Node.js

可以參考這篇Node.js與JS的差異介紹，但是是全英文的敘述的哦！

老師給了我們下列幾項重點：

1. Node.js沒有window，只有global
2. Node.js沒有dom API
3. Node.js可以處理file system
4. 兩者都是單執行緒
5. Node.js比較focus在input output
6. 可以在前後端共用code ( universal )
7. Node.js可以直接使用require方法

之後應該還有滿滿三堂關於Node.js的課，到時候再分享更多囉！

npm

老師介紹npm簡單示範一個demo的時候我覺得就很像是JavaScript界的github，把它變成一個專案管理的形式。

網路上有很多npm的指令教學這邊就不再多敘述囉，目前我是還沒有體驗過他的魅力，在自認為JS還不到家之前我怕研究下去會死得很慘XDD，這邊沒辦法分享太多，就當是記錄一下自己上課的日記囉！

上次贏了之後這次來比較有多一點信心給老師催殘了，這次難得僅有的五位學生全部到齊了！再來就是腦力激盪的一個下午。

前兩個小時之前老師是先講一半上個禮拜題目的解答，其實都沒有一定的解法，但我想學到更多的是老師的code觀念，達人的live show真的是可遇不可求的東西呀！難怪各行的專業都會有觀眾花錢去看。

在介紹這堂課之前想分享一下超級門外漢學程式的感覺，即使我上次幸運贏得比賽，但只要是新的東西其實真的是不太分難度的XD，總之就是要趕快吞下去在慢慢吸收囉，一開始真的很難細細地去品嚐coding的甜美呀！

float problem

一開始老師先稍微提到JavaScript是很古老的語言，所以在程式上會有些小缺陷，像是單純的打出一行console.log(0.1+0.2)其實出來的不會是很剛好的整數0.3而是0.30000000000000004，這就是所謂的 float problem ，這種問題就要多打一行code去取整數來維持穩定性了。

switch最佳選擇器

switch 在選擇許多選項中的一個時是非常好用的，我們不用再打上許多if的判斷式，這有點像是給十位人士發號碼牌的概念，叫到哪一個號碼那個人就可以開始行動。

廢話不多說，直接下一個簡單的JavaScript例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

(function () {                         //養成閉包好習慣，讓程式內的東西由上往下一定執行
   var ATCTION_SLEEP = 0;              //宣告變數，這裡值得一提的是普遍JS淺規則中如果變數全部大寫就是希望
   var ATCTION_WLAK = 1;               //所有維護者都不要去隨意的改變這項變數和它的元素
   var ATCTION_TALK = 2;

   var bot {                           //創造物件
     action: 1
   }

   var human {
     action: 2
   }

   act(bot.action);                    //執行function act且帶入的第一個參數是剛剛物件bot中的action值
   act(human.action);

   function act (action) {             //在這裡action的值被act(bot.action)代入為1
     switch (action) {
       case ATCTION_SLEEP:             //第一個case，在一開始有宣告var ATCTION_SLEEP = 0;故不成立
         console.log("I'm sleep")
         break;                        //記得每個case一定要break停止掉，不然就會一直執行！！
       case ATCTION_WLAK:              //第二個case，在一開始有宣告var ATCTION_WLAK = 1;
         console.log("I'm walking")
         break;
       case ATCTION_TALK
         console.log("I'm talking")
         break;
       default:                        //在上述都沒找到相符項目則執行這行default，不用加break
         console.log("There is nothing I can do")
})();
                                       //再來act(human.action);也會跑一次function act流程，成果
                                       //都可以在檢查程式碼的console裡看到

try&catch基本除錯好用迴圈之一

當我們做好一個function，卻有很多參數想測試時可以嘗試用這個方法一次搞定！

馬上來進入小小例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function doubleIt(num) {                         //創造簡單的function
  if (isNaN(num)) {                             //小技巧！如果帶入的參數不是數字則isNaN會成立所以執行if
    throw num ;
  }
  return num * num;
}

var nums = [2, 3, 'abc'];                        //宣告陣列等一下可以把裡面的參數一次帶入

var res = nums.map(function(num) {               //宣告一個變數把主角try&catch的結果放入裡面，
  try {                                          //nums使用map這個方法把陣列的值一個一個帶進去
    return doubleIt(num);                        //，當try試著執行function doubleIt(num)如
  }                                              //成功則return結果回去，如果失敗則執行catch的
  catch(err) {                                   //東西，把結果歸0後return回去。
    return 0;
  }
});

console.log('res', res);                         //上面都是在電腦中進行，我們必須把結果呼叫給我
                                                 //閱讀。

.bind()移花接木

.bind() 大多數是跟 this. 一起用的，我們大部分會希望一個function能不斷的重複使用，那他是移花接木什麼呢？看一下下面簡單的範例吧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function Human() {                             //創造一個Human類別
  this.name = 'human';                         //每次叫出Human這個function則這次的this.name變數
}                                              //都是獨立的，在Human類別裡的東西稱為屬性
Human.prototype.speak = function() {           //創造一個Human類別的方法
  console.log(this.name + ' is speaking');
}
function Bot() {
  this.name = 'bot';
}
Bot.prototype.speak = function() {
  console.log(this.name + ' is s p e aking....');
}
var human = new Human();                       //呼叫類別Human
var bot = new Bot();
human.speak();                                 //human is speaking
human.speak.bind(bot)();                       //bot is speaking，此時類別Human屬性全數使用bot

.call()移花接木二式

.call() 其實跟 .bind() 有異曲同工之處，簡單的直接看範例吧！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

 (function() {

  function Human() {
    this.name = 'human';
  }
  function Bot() {
    this.name = 'bot';
  }

  function showMessage(message) {
    console.log(this.name + ': ' + message);
  }

  var human = new Human();
  var bot = new Bot();

  showMessage.call(human, 'hello ! I am human !');  //human: hello ! I am human !
  showMessage.call(bot, 'hello ! I am bot !');      //bot: hello ! I am bot !
                                                    //我們看function showMessage只有一個參數
                                                    //但這邊使用.call去呼叫Human的this.name
})();

這堂課這些方法都是在物件導向中蠻常使用的方法，但是經驗和使用時機就真的要很多的經驗累積囉！

在上課的時候老師時常使用console.log()這個語法一直不斷去檢測許多東西，我一開始其實蠻不喜歡用也不知道怎麼用的，很大的原因之一是他使用起來有點自由，什麼東西都能查，也可以隨時使用，然而雖然在網路上也可以查到的他能做些什麼事情，但我想要的資訊是當我需要使用它時我該怎麼使用，那接下來我就針對遇到的一些問題稍微解釋一下我遇到的問題也順便為自己做筆記。

使用console.log()來查詢物件裡的東西

1
2
3
4
5

var fruit = [
    {apple},
    {banana},
    {watermelom}
    ]

這時候只要輸入 console.log(fruit); 就能列出fruit裡的東西，記得是要在檢查原始碼的console那邊看，除非你想多打一行把它印在html裡面，不過既然只是做查看和測試的動作應該是不需要這麼麻煩。

好，那這篇重頭戲是今天如果你要設計一個按鈕之類的要啟動一個function要如何知道有沒有成功？例如：
在html製作一個簡單的按鈕

1

<button onclick="catchNumber()" value="5">5</button>

在JavaScript製作簡單的function

1
2
3

function catchNumber () {
  console.log("123");
}

這時候打開網頁點選按鈕，打開檢查原始碼的console那裡有印出123就代表你做的按鈕是有成功啟動function的哦！
我當初很納悶，測試東西的方法百百種，為何一定要用console.log()去搞？我在function做一個alert(“123”)也行呀！

console.log()可以查變數的底層屬性！

現在我們再做另一個有趣的小測試，今天有三個按鈕分別是5,10,15，他們要帶入同一個function，那我們怎麼知道有沒有成功帶入function，帶入function的變數是多少呢？

我們做一個新的html

1
2
3
4
5

<div id="numberButton">
  <button value="5">5</button>
  <button value="10">10</button>
  <button value="15">15</button>
</div>

還有一個新的JavaScript

1
2
3
4
5
6
7
8
9
10

(function() {
  var numberButton = document.getElementById("numberButton");
  numberButton.addEventListener("click", catchNumber, false);

  function catchNumber(event) {
    console.log(event);
    event = event.target.value;
    console.log(event);
  }
})();

這裡要善用 .getElementById 和 .addEventListener 的話要放在『閉包』形式的 (function(){})(); 裡唷！不然 .addEventListener 找不到 numberButton 的值。

我在 function catchNumber() 裡面放了兩個 console.log(event); ，因為JavaScript的程式特性是順序著從頭執行到尾巴，這樣我們可以看到變數event的變化。

這時候打開檢查程式碼到console裡，點選剛剛在html做出來的隨便一個數字按鈕，第一個console.log出來的event有包含許多元素，展開來後又可以在target:button裡的value找到我們按鈕給變數event的元素。

再來我們單獨把value值取出來所以我打了 event = event.target.value; 這行，這時候第二個 console.log(event); 就只會印出按鈕的value值囉！

善用這些基礎的技巧，我們可以在單做一個功能的途中不斷的測試哪個環節有沒有出錯，不然等一次做好一個功能但是卻跑不出來，JavaScript並不會很仔細的敘述是哪個東西帶錯或出錯囉！

新莊早上的天氣有點陰暗，吃完早餐看完醫生後果不起所然的下著暴雨，研究著第六堂課第二個作業的我心想著離出門吃飯和上課還有一個小時多，希望在這之內雨下得完，還好出門雨是停了，不過到板橋的時候竟然是要人命的烈陽，不過卻也比照了最近學習的心境歷程。

八個小考題

今天又是只出席了四個人，總是無法滿人數的感覺呀，不過這也不影響上課的氣氛，由於上堂課結束後大家的程度實在跟不太上，所以老師這次的課程是出八個小題目，可以挑自認簡單的題目作答，基本上只要達到要求就算過關給一分，老師帶了三本關於程式的原文書，第一名的可以帶走兩本，而第二名就是拿走最後的一本。

說明結束了之後就開始作答，作答的時間就是一整堂上課的時間，從下午兩點半到晚上六點，基於上個禮拜的大挫折和Nic的洗禮後我蠻享受這種可以一直打code的感覺，感覺就好像是玩RPG，反正就是想辦法達到目的就對了，至於比賽什麼的其實對我來說不重要，其實有一部分是因為我覺得我也贏不了那些比我接觸程式的經驗還多很多的吧人XD，那就來分享我有做出哪些題目吧！

第一題：到 http://regexr.com/3e5ff 把meta裡有og:的程式碼一整行都hightlight

打開後我還蠻傻眼的我根本不知道要做什麼東西，之前除了看過老師稍微示範之外完全沒有用過這個網站，還有一個游標似乎在對我挑釁一樣閃爍的頻率是乎就是要單挑時挑動手指的頻率XD，好啦其實也沒這麼誇張，不過這題做出來我覺得我有佔運氣成分。

一開始在可以輸入的地方亂輸入一些字串稍微了解這個網站在幹麻，然後就點點旁邊的功能和範例，結果不小心發現原來旁邊有個global功能可以點選，點選之後就會把所有剛剛輸入的字串全部圈選起來，我以為大家都知道其實也沒有多想就開始直接在google上下一堆關鍵字找解答。

還不太會下關鍵字的時候真的是會找到五花八門的答案，甚至還會找錯功能，到後面雖然沒有一個答案是對的但是有些至少都可以做出一半我想要的效果，然後就開始像玩魔術方塊般的把解法排列組合湊出各種答案，結果真的被我湊出來了XDDDD，但我當下是沒有馬上跟老師說，因為要得分的話做出來後要給他檢查才算分，我當下只想享受這個過程，所以就默默享受這個喜悅然後去做下一題。

第二題：製作利息表單

1
2
3
4
5
6

表單要可以:
1. 輸入本金金額、存放月數、月利率(%)
2. 選擇單利或複利
3. 能算出正確的利息
單利利息 = 本金 * 月利率 * 存放月數
複利利息 = 本金 * (1 + 月利率) ^ 存放月數 - 本金

這題的過程也蠻有趣的，首先我在全域宣告三個變數，但不知道為什麼怎麼樣都進不了function裡面，害我的利息就算存了一百萬利率100%我的利息還是零元，後來不爽我直接把變數複製進去每個funcition裡面，秉持著兵不厭詐這是戰爭的精神，不管程式碼在怎麼髒我就是要把它寫出來，終於我的存款開始有了利息。

再來單利的公式很簡單，稍微照著打利息都算正常，但是複利那個次方的符號^好像就不能直接打上去了，因為我直接照著打上去的時候我本金存的越多利息竟然越少，到後面竟然還是負的啊！！！不小心就創造了一間黑道銀行，我問老師的時候老師還撲疵笑了一聲再叫我多研究XD，後來多宣告了一個變數裝Math.pow就有正常的利息了。

在做這題的途中還有同學在問第一題的事情，老師才提示說要去勾global的選項，我心想該不會是我進度超前吧？就想說先拿第一題給老師看看，幸運的先搶下一題，不過我還是想就不要想太多繼續做就對了，之後另一個同學有做出第三題，反正沒差我做完這題之後一樣默默享受喜悅去做下一題XD。

第六題：寫一個方法產生重複字元字串 ( 實作禁止用任何 loop )

老師提示的程式碼如下：

1
2
3
4
5
6
7
8

(function() {
  function repeatMyStr() {
    // your implementation
  }

  console.log(repeatMyStr('@', 3));
  console.log(repeatMyStr('#', 10));
})();

左完前兩題之後我就先把所有題目看過一遍，這題應該算是比較簡單的就先挑來做。

其實這題蠻簡單的，我自己自幹完之後老師說他的原始檔案裡面有題目方向要照著題目大方向做，我才恍然大悟原來每一題老師其實都有原始檔直接去改就好，不過還好剛剛做的都沒有額外提示除了這題，除了第一題以外這題算是最輕鬆的，算是迅速的又拿下了一題，不過說迅速其實也花了半小時啦XD。

第三題：猜拳

提示：設計一個和電腦猜拳的遊戲 ( random, if )

會挑這題是因為有同學做出來了就想說應該是相對簡單，禮拜天跟Nic一起學的RandomNumber就超級派上用場了，我的想法是先隨機產生數字1,2,3，如果是1代表剪刀，2代表石頭，3代表麻布，先很輕鬆的寫出了電腦隨機出拳，但….我要怎麼比對呀？？

這裡我真的卡蠻久的想了很久因為我做了剪刀，石頭，麻布三個按鈕代表玩家出的拳，三個拳也都會啟動同一個function讓電腦也隨機出拳顯示在網站上，但難道要我們使用者自己去判斷輸贏嗎XD？到底要怎麼讓程式碼幫我們判斷呢？想了大概數十分鐘，沒辦法了，繼續使用兵不厭詐這是戰爭直接做了總共三個function和九個if去過濾每個可能發生的結局XDDD，雖然美中不足的是我選擇出拳之後會先alert這局的輸贏結果才會顯示電腦出什麼拳，不過老師還是算我過關了！

第八題：這是一個 JS 主宰的世界

提示：寫一個網頁, 能在沒有 JavaScript 時秀出 “你的瀏覽器不支援 JavaScript” 字樣

在做這題之前其實剩半小時了，我受不了就跑去抽煙順便分享一下心情給Nic，抽完菸上去後逛逛剩下的題目另外有兩題需要用到計時的功能想說一定要研究很久就先跳過，另一題是要做鋼琴鍵一看到就知道爆難的XD，最後就挑看起來最簡單的第八題來做做。

其實這題事後才知道一行code的就可以解決的，但是關鍵字不好下，我找了好多五花八門的解答，大多數都是解決不支援所以使用程式碼做優雅降級的動作，突然只是單純地顯示不支援JavaScript反而不知道要怎麼下關鍵字XD。

其實我途中好像有找到答案，就只有一行noscript的程式碼打在html上面而已，但是當我複製貼上的時候我不知道怎麼測試啊XDD，我不知道要怎麼關閉JavaScript來測試這個功能，後來又去找了其他方法跟得分擦肩而過，因為過不久時間就到啦！

初次勝利

老師插上投影機，畫面是紀錄我們有誰做出了哪幾題，我看我的格子有一半做出來，真的是蠻不敢相信的，後來漸漸藏不住小小的笑容，我從前幾天的超級大貧頸和挫折中到現在竟然是冠軍，從傻在電腦前一行code到現在可以自己做出骯髒小功能，老師還說其實第二名是那位同學他不意外，但我是第一名還蠻驚訝的，問我之前是不是在裝傻哈哈，聽到這邊會說不開心真的是騙人的XD，挑完書之後老師竟然還說要請冠軍和亞軍吃飯，今天的賺頭真的是不小啊！

回到家真的有久違的踏實感，畢竟我現在是待業身份而且上個禮拜寫程式還這麼低潮，其實真的是蠻慌張的，這次讓我覺得在學習上面除了找對方法之外真的很需要靠成就感去堆出成效，我很難想像假如今天沒有經過Nic的Live show洗禮而沒做出個兩三題的話回家後我會帶著什麼樣的心情去打開我的筆電，再來我覺得現在學習對我來說是一個很特別的探索旅途，脫離了學校填鴨式教育，要自己花時間去收尋和研究答案和做出成品的歷程收穫絕對不只是分數和獎品那些而已，後面知識和智慧的質量絕對是超乎想像的大。

隨著上課的東西越來越多，所有的挫折感排山倒海的衝向我的情緒，漸漸開始上課前都會有莫名的緊張感，翻開筆電有點排斥開啟iTerm繼續打code，有時候在想是不是自己的問題，但我想這也許是非本科系的必經之路吧！來分享這兩天的心得吧。

正法寶藏Java第六堂課之三次元運算子

第六堂課依然是四個人，不過這次出席的是另一個比較可愛的女同學，但課堂結束後才知道原來他是大魔王XD，一開始介紹的是三元次運算子『？』，以運算子來看其實就是『or』的意思，那以迴圈來看的話他就是一個完整的if和else的組合迴圈。

簡單的語法如下：
Variable = event ? true : false;
使用的例子如下：
leader = vote ? president : king;
在這裡事件是vote(投票)，問號代表使用三次元運算子，以：左邊是ture(真)右邊為false(假)，搭配使用例子如果vote為真則變數leader帶入true的值president(總統)，反之為假的話則帶入false的值king(國王)。

雖然這是很精簡的寫法可以代替掉使用if和else迴圈的寫法但相對的彈性就相當的小，如果還想多做別的事情或者是去維護它就會相對的很麻煩了，除非很篤定往後不太會在變動了，不然這算是比較show skill的寫法吧！(因為對我來說很困難XD”)

for & while迴圈

for的遊戲規則為 for (初始執行 ;終止條件 ;每次執行)，下面直接用最基本的範例解釋：

1
2
3
4
5

var daysToWork = 22;

for (var i = 0; i < daysToWork; i++) {
  console.log('i = %s', i);
}

首先初始執行讓迴圈有個控制變數『i=0』，再來終止條件是『i < 22(剛剛宣告daysToWork = 22)』，反過來也可以說是開始條件i < 22就開始作動，後面『i++』就是每執行一次for迴圈i就會+1，如此一來這個迴圈從i=0直行到i=21總共會執行22次這個迴圈，成功的話可以對顯示地方右鍵檢查原始碼去檢查console.log是否動了22次。

那while的遊戲規則為while(執行條件)，其實跟if有點像，一樣帶個小例子：

1
2
3
4
5

var i = 0;

while(i < 10) {
 console.log('i = %s', i++);
}

在這裡也看到跟for一樣，不過是在外面先宣告好變數i=0，條件i < 10開始執行迴圈，而迴圈使用console.log讓i每次執行完都會+1直到達不到執行條件i < 10。

在迴圈最最最重要的一點是要小心做到無限迴圈，譬如說今天while迴圈裡面console.log沒有打上i++，那麼『i 永遠會 < 10』，這時候通常就得強制關掉作業程式了，如果剛剛都沒保存的話真的是會欲哭無淚啊！

所以在做每個迴圈的時候除了特別小心，最好是先運作簡單的東西看看有沒有問題，不要急著一次做運算量很大的東西，當然最好是迴圈前迴圈後都做好保存的好習慣，不要被自己做出來攻擊力無限的黑暗大法師搞垮了XD。

撞牆的無限迴圈

其實這篇文章本來要難產的，因為上完課之後我什麼東西都做不太出來，即使把出的作業拆到一個最小最簡單的功能也一直出錯，真的分享不出什麼心得，直到下午跟Nic在咖啡廳互相討論我其中一個作業，我們一樣把功能拆成好幾個小的，一一做上去再湊起來，畢竟Nic的專精不在JavaScript上面，所以在討論的過程中我很能跟上他的速度和思維，『重點是我也親自做了這些步驟』，不然正法寶藏的老師真的太強了啊！啪拉啪拉突然就把一棟房子蓋好了，而且還是很華麗的那種XD，這邊也分享一下作業心得。

作業：
寫出一個可以出隨機數學題目的表單，並且讓使用者可以作答且顯示答對或答錯。

在這裡我一開始想做的功能就是如何出現數學題目，於是我和Nic研究出使用下列function:

1
2
3

function getRandomArbitrary(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

使用的方法就是call getRandomArbitrary()這個function之外在括號裡給他兩個數字，那今天我們需要產生兩個隨機的數字要怎麼辦？

那就是定義兩個變數並且個別執行getRandomArbitrary()一次，於是在全域直接宣告兩個變數

1
2

var number1 = getRandomArbitrary(0, 100);
var number2 = getRandomArbitrary(0, 100);

這邊Nic也給我一個很重要的觀念，今天用一個function做好了一個功能以後就是放在身邊，需要的時候才再去call他就好，所以其他功能就再做其他function，坐到後面需要哪些function再去把他們叫出來就好，不然一個function要做很多事情會很麻煩而且很容易出錯。

再來我要把題目印出來再宣告如下

1
2

var question = document.getElementById("question");
question.innerHTML = number1 + "+" + number2;

把值插入id=”question”的div的html值裡

題目做出來了回答地方就比較簡單一些，首先在html裡做兩個表格：

1
2
3
4

<form>
    <input type="text" id="answer">
    <input type="button" value="SUBMIT" onclick="exam()">
</form>

先做一個function在背後檢查答案是多少：

1
2
3
4

function calculate(number1, number2) {
  answer = number1+number2;
  return answer;
}

再來再做一個function檢驗提交的值是不是跟背地裡算出的答案相符，程式碼如下：

1
2
3
4
5
6
7
8
9

function exam () {
  var exam = document.getElementsByTagName("input")[0].value;
  answer = calculate(number1, number2)
    if (exam == answer)
      alert("yes");
    else
      alert("No");
  end
}

再來登呢～作業就完成啦！

這邊程式的過程算是打給自己看的，不然其他人一定不知道我在幹麻XD，但我想表達的是第六堂課上完兩天後這是我第一次獲得巨大的成就感，很多觀念也會在成就感中吸收得很快，所以在面對越大的挫折感中不如想辦法去把功能拆成一塊塊不斷累積小小的成就感，並且設下停損點，當無法再累積任何成就感的時候就趕快想辦法對外求救吧，不然成就感無法累積的時候挫折感是會成長的，這樣一來一往會很快速的消磨完耐心和熱情，就像我這兩天一樣！

明天就要邁入第六堂課了，強度真的是開始有點負荷不了了，稍微分享一下這兩堂課的東西吧(其實我真的很不熟XD)！

神奇的畫筆–CSS

第四堂課主要教學CSS排版，這對於前端人員來講就像是畫家的畫筆一樣能做出大部分想要呈現給使用者的介面。

在這裡就不贅述CSS可以做到什麼樣的事情，就介紹他一些最基本的遊戲規則就好，不然的話可能要去世貿借一個場地開一個CSS展了。

相信大家在做html的網站檔案時一定都會在head內部打上<link href="css.css" rel="stylesheet"> 這行程式碼吧，rel＝”stylesheet”代表說要讀取的檔案類型，href=”css.css”則代表要讀取的檔案名稱(css.css)。

為什麼我們可以直接在html的檔案裡面直接打我們要的樣式還需要多打一個css的檔案再套入呢？很簡單也很重要的原因之一，一個網整的網站如果所有功能和樣式都塞進一個html的檔案裡面的話程式碼的行數是以萬計算的，今天如果哪個按鈕或哪個顏色跟預期的不符合，是不是每次都要從數萬行的程式碼裡面找出來呢？我們可是工程師而不是大家來找碴小遊戲的高手啊XD。

基本上我們所有的程式碼除了文字敘述都是在<和>裡面的，很簡單的一個例子：
<div id="title" class="style"><h1>Helloworld</h1></div>
而css的程式碼都是讀取<和>內的程式碼然後套用進去。

例如尋找對應的id把紅色文字的樣式套用進去則css程式碼輸入：

1
2
3

#title {
  color: red;
}

輸出的樣式就會紅色字樣的Helloworld，在這裡養成css良好的排版，{後換行再輸入樣式，並且每個樣子單獨一行，最後結束時換行輸入}，這樣即使有十幾個樣式依然能讓維護者一目了然之外，在github上面比較檔案時也能更清楚檔案到底修改了哪個樣式。

以上就是css最基本的使用規則，使用的方法還有太多種了，如果有基本英文閱讀能力的話可以參考最詳細的MDN網站(https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started)，不然靠別人翻譯的話其實每個人的解讀方式不一定是最正確和完整的囉！我基本上搭配著谷歌翻譯還都算看得懂啦，相信大家也行的！

正式邁入JavaScript

這次這堂課也是老班底3+1的人數而已，一個語言要從空白學起真的是很有困難度啊XD，一開始上課先簡單的介紹JavaScript可以做什麼而且跟Java是完全不同領域的東西，JS算是前端的而Java就屬於比較後端，那到底JS能做些什麼呢？

其實跟CSS一樣能做的事情太多了，不過JS可能要兩個世貿展來展覽吧，但簡單的來說如果網頁在跟你互動那大多都可以使用JS寫出來，什麼是互動？就像滑鼠游標指到按鈕時按鈕會發亮提醒你他可以點擊，或者是點選一個圖片他會切換出來或者是慢慢地顯示出來等等，他可以依照你現在要做的事情做一些變化引導你，使得網站更有直覺式的呈現，這些JS大部分都能做到。

課堂尾聲要試著做出一個簡單的線上計算機，不過就是很常在用的小算盤嗎？但其實真的好難啊啊啊啊！！！真的是會突然不知所措，我下一步到底要幹什麼，要使用什麼語法工具，後來我真的覺得如果什麼都不懂的話，就直接去找作品並看他的程式碼吧，依樣畫葫蘆的過成功一定會有些身體記憶的，最後老師也是有現身示範出簡易的計算機出來，我只能說我要花超多時間去研究了！

接連下來的幾堂課全部都會跟JavaScript有關聯，等我有多點學習心得再拿出來跟大家分享好了XD。

其實早在昨天8/23就上課啦，但那時還不是這麼想打文章的感覺。

中午一樣吃著餛飩乾麵，依然在大太陽底下尋找停車位，每次這時候真的是覺得台灣好壅擠呀！搭著老舊的電梯，這次木造的地板上以學生的身份踏入我是最早到的。

這次來的人只有三個，設計女孩請假了而另外兩個一男一女似乎是放棄了吧，看來這趟入門程式旅程的老班底漸漸的浮出了。這次的上課主題主要是HTML的基礎，雖然老師上課前說這堂課的硬度不會比前兩堂課還強，但其實對門外漢的我來講他就是新的東西，而新的東西感覺上是沒有分強度的，就是得趕快理解吸收吧！

首先是先介紹Tim Burners-Lee這號人物，他就是發明WWW(World Wide Web全球資訊網)的人，現在我們可以這麼方便的使用的網頁源頭就是這位先生啦！對他或WWW有更多想了解的維基百科有很多資訊。有時候真的覺得發明家真的大多不太有名，讓發明的東西可以發揚光大到我們的日常生活中或許才是英雄，我想Apple的賈伯斯(Jobs)就是很好的例子。

再來稍微講解HTML檔案的結構，最最最基本的結構如下：

1
2
3
4
5
6
7
8
9

<!doctype html>   //目前有太多的HTML版本，有些功能解讀上是不一樣的，這行代表你要指定使用哪本字典去閱讀這個檔案
<html>            //此為使用html語法的開始
  <head>          //這裡可以做主要設定，網址，網頁標題，主要樣式，語言設定等等都在這邊下好
    <title>       //設定網頁標籤，在主要設定中title是不能少的
    </title>
  </head>
  <body>          //程式的主體，網頁想呈現給使用者的內容功能等等就歸類在這
  </body>
</html>

其實這裡就是在講遊戲規則，也沒有什麼要特別理解的，總之一定要一直遵守的規則用著用著就會背起來了吧！

再來是解釋什麼叫inline tag，其實就是對這行程式量身定做的做法，這樣對維護者來說會非常的難維護。
今天一個正常的網頁想必是有很多的程式碼，但也許我要新增一個功能需要把整個網頁重新排版，要一行一行的程式碼改幾乎是不可能的事情！一個乾淨的檔案應該是區域分明，並且可以在這個區域下一個樣式就能套用在所有的程式碼上面。

1
2
3
4
5
6
7
8
9

簡單的範例乾淨版：

<div>            //此時我在這個區塊的標籤(<div>)
第一行程式碼       //輸入樣式即可套用全部
第二行
.
.
第一百行程式碼
</div>

1
2
3
4
5
6
7
8
9
10
11
12

簡單的範例inline tag版：

<div>             //比起左邊乾淨版我在區塊的標籤
第一行程式碼        //輸入樣式後我還要特地去改特製
第二行特製程式碼    //的程式碼，改不是問題但如果像
第三行程式碼        //這個範例一樣要從一百行程式碼
第四行程式碼        //挑出要改的絕對是很大的工程而
第五行特製程式碼    //且很容易出錯
.
.
第一百行程式碼
<div>

HTML的基礎大概這兩大點我覺得很重要，其他的就不多提，再來的課程是介紹網址的結構，還有介紹一些chrome好用的開發工具，在打code的過程中隨時隨地的檢測是很重要的，不要一股腦子的一次打完一個功能，測試每一行code才可以迅速找出問題。

課堂最後要做一個沒有樣式最簡單的網頁，其實突然要打起code來我還真的有點不知所措，先前大多都是在教指令和操作，在整個過程中其實很多指令前兩堂課都有提到但我真的是忘記了蠻挫折的，但挫折也倒不是壞事，畢竟這真的可以非常迅速的對這幾個指令加深印象，不然在家很沒有目的性的空練習，把所有指令RUN個兩三遍還是很容易就忘記。

後面因為時間關係我還沒做完老師就來示範剛剛他出的題目，這讓我感觸蠻深的，雖然是最簡單的一些code，但老師做起來是很有規則性的建立，就好像在蓋房子一樣，先打地基，再來做鷹架，架鋼筋灌水泥最後完成一個藍圖中的房子，這樣的效率比起我埋頭苦幹還實用的多了！

老師示範完後另外兩位同學過不久完成後就撤了，而我在老師和助教的指點下也是吸收了不少觀念和指令，雖然是硬著頭皮做完但成功的達成老師的要求還是小有成就感，這種成就感變成了下一個小動力讓我回家做了另一個小網頁出來玩XD。

http://demo.dharma-treasure.org/~guest3/Inuyasha.html#top
這個就是回家做很粗糙的玩具，現在會的東西還太少了以後有更多工作應該還會再做更有趣的XD。

後來我想想，很多人都一直想找到自己的興趣，自己的方向，但有時候可以換個方式探索自己，『什麼事情讓你有成就感』，我覺得這是一個力量很強大的循環，像這次我因為課堂上獲得的成就感而讓我有動力去做更多這方面的事情，然後又獲得更多一點的成就感再去推動下一個玩具，我想這樣慢慢循環下去就會發展成熱情，發展成興趣，我們這麼愛玩電動也許就是最實在的例子之一。

隨著奧運的運動項目一直比賽下去，那我們的課程也當然不能停，雖然知道騎到上課地點不遠，一點出門吃個午餐在騎過去還綽綽有餘，但不知道為什麼就是會一直有點緊張，點的菜怎麼還不送上來，結果騎到那邊還是有十五分鐘以上的空閒時間XD，或許是太重視課程了。

今天上課的同學總共依然是五位，不同的是一位女同學換了另一位陌生男性的面孔，但也不影響上課的行程，今天上課的主題是每個開發者最熱門的平台之一—『Github』！

為什麼Github會這麼的熱門，因為今天開發者(Developer)可以隨意寫想寫的功能，甚至只是一張夢想藍圖即可放在Github上面把自己的想法和code給大家觀賞，但最棒的是，每個人都能幫你提議code要怎麼修正，新增，要知道在這途中你可以跟全世界的工程師做交流，甚至是頂尖的工程師！

要知道在一般人的思想中是很難突然的突破自己的思考框框的，每個人都有自己習慣的一套邏輯，用這個邏輯就會一直產出比較相似的經驗，而麻煩的是今天要創作一個新穎的功能，用著自己的邏輯下去做是會產生很多盲點的，再者，人的大腦有限而語言的用法和code的排列組合似乎是無上限的，每個人都有自己比較擅長的領域，如果可以讓擅長不同領域的人合作不只力量很強大，也能迅速的擴展自己的思考框框，曾經聽有人說過『創新之一就是能把兩個不同的技術完美的融合』。

雖然上面講的這麼神，但其實對我這種剛入門的人來說最實用的功能還是版本控制吧XD，何謂版本控制，我用我小時候玩電動的相似經驗舉例一下，今天玩一個RPG破主線任務的時候NPC給我三個選項，都會帶入不同的結局拿到相應的寶物，那我當然想要拿我想要的寶物但是怕又選錯選項，這時候在選擇三個選項之前我先做一個存擋，之後隨便選一個選項如果並不是我想要的就可以在讀取之前的那個存擋點。

今天Github也能做到這樣的事情！每個人只要codding一個段落了確保沒問題是自己想要的了都可以設下一個存檔點，而之後再接下去做另一個功能的時候發現自己把code改爛了，改髒了，功能和結果不是自己想要的只要下個指令就能還原到當初的存檔點，上述都只是Github其中的基本功能，Github也是一門蠻大的學問，所以分享一下本機端和Github的關係就好XD。

創造好Githun的帳號後就可以建立新的專案(Project)，專案裡創造的所有東西統稱為repository，現在我們要把本機端(local)與稱呼為遠端的Github(remote)做連結，可以照著github給的提示欄裡(create a new repository on the command line)的指令照著下就好，如下(記得下指令之前Terminal的路徑要在自己要上傳的資料夾裡面唷！)：

1
2
3
4
5
6
7
8

echo "# demo" >> README.md   // 在資料夾新增一個內文有# demo的README.md檔案
git init                     // 創造一個隱藏的git檔案讓Github鎖定這個資料夾
git add README.md            // 指定要觀察哪些檔案(這邊為README.md)
git commit -m "first commit" // 這個就是創造存檔點！！雙引號裡面為設定存檔點的名稱
git remote add origin https:github.com/username/demo.git // 指定本機端與遠端連接的專案網址
(P.S:要注意這裡的origin算是讓程式讀得懂的專案名稱，很多時候我們人看的懂的名稱跟程式看的懂得名稱是完全不一樣的！)
git push -u origin master    // 把剛剛存檔完的進度上傳到Github上
(P.S:程式在這裡的解讀為上傳檔案到專案origin的版本master上，master為主線。)

之後不論修改後什麼都不能直接git push唷！一定要遵守遊戲規則，那新手先照著打下面三個步驟即可：

1
2
3

1.git add .
2.git commit -m "name"
3.git push

其實這就是本機端和Guthub相處的基本關係囉！真的是還好跟著Nic做練習的時候有摸過Github，所以還吸收的蠻快的。

今天這堂課在最後做練習的時候也意外的發現兩件事情，我們五位同學中有一位男性似乎是資訊系的，他在前一堂課的時候很多指令在學校似乎都有接觸過，在理解方面真的是比其他同學快速許多，但今天卻是我比其他同學稍快地達到老師的要求，甚至是那位資訊系畢業的同學，因為他似乎沒有玩過Github這個平台，其實很多事情只是有沒有接觸過而已，我還蠻認同我大學同學跟我分享的一句話：『你的時間花在哪，你的成就就會在哪。』今天雖然我不是資訊系畢業的，但我有花時間在Github上面，哪怕只是一點點的時間，出來的成果就是不一樣，當然把時間花在對的地方的“方法”也是非常重要的。

第二件事情就是今天的同學中唯一的女性同學似乎是設計系的吧？嬌小的身軀在做成功之後整個人彈起來手揮向天空開心的說『成功了！！』還真的是蠻可愛的哈哈，果然認真的人都很有魅力啊！

回想當初在學騎腳踏車是沒有說明書的，就是在路上直接騎阿騎，當可以平穩的騎上一百公尺不間斷，其實途中也學會了在十字路口減速觀看車況，也學會了避開地上的坑洞。

在八月十五號最後一題回家作業是要“修改”資料夾裡面所有有“關鍵字”檔案裡的關鍵字並進行“備份”，起初我想就是簡單的第三題題目延伸，因為第三題是尋找資料夾裡有關鍵字的檔案，這點用grep -lir "keyword" ＊就可以輕鬆辦到，但沒有想到竟然是開啟了一段漫長的土法煉鋼之旅，就來分享幾個我比較印相深刻的重點吧。

一開始一如往常在我的書桌掀開了筆電，參考了第三題的題目後馬上聯想到當初卡很久的|用法，是否用第三題答案的grep 後面接 | sed -i.bac 's/oldword/newword/' * 就可以得到答案，但沒想到顯示了 grep: seduv1ThC: Permission denied ，後面的sed還只執行了對所有檔案備份，關鍵字也沒有修改掉，最後就摸摸鼻子把資料夾刪除在clone老師的教材一次。

自己再試了幾次之後開始去網路上找每個指令用法的資料，以我的邏輯來想一定是要用指令把需要修改的檔案抓出來再叫sed去改，所以我把上課有學到的指令find,grep,cat等擁有收尋或閱讀的指令用法都找了一遍，當然主角sed也不放過，就這樣邊試邊查～邊查邊試(偶爾去陽台抽根煙放空一下XD)之下慢慢的越來越會使用這些指令，甚至還挖掘出其他指令。

在不斷的錯誤當中我發現每個檢測的動作都很重要，每次不論是測試一個新指令或是重新clone老師的教材我的ls和grep去抓檔案的關鍵字有沒有改掉都沒有省過，雖然我努力培養自己解決和自學的能力，但是也是不能浪費太多時間硬ㄍㄧㄥ太久啊！所以我各別對老師和老友Nic投出求救訊號XD。

他們兩個人不約而同地讓我學到下關鍵字的重要，老師是直接下sed replace multiple files去網站收尋，而Nic聽完我的題目之後簡單地說我就是要做“收尋”並且“修改”這兩件事情，他們提供的網站資料真的比我在網路上直接打一串『sed修改並備份檔案』這種超陽春的關鍵字收尋到的資料準確多了XD。

隨著每次都clone真的很麻煩，我乾脆就在本機自己創一個資料夾和幾個簡單的檔案做研究，後來老師又有提供 git add . 和 git checkout 的方法，雖然我不太清楚這些指令是發生了什麼事情和代表什麼，上網查感覺checkout好像也不是專門拿來復原的指令，但沒關係至少我是用的蠻開心也頗實用的XD，總之有了這個方法我的實驗速度又變更快了，花了數把個小時grep等等的指令我真的打了不下幾百次啊！

最後雖然還是沒有做出答案來，但其實中間的收穫也是蠻多的，莫名其妙學了一些零零散散的東西，當然也有很實用的觀念，在我洗澡的時候想想我在做這題的當中真的很像是在學騎腳踏車，Just do it這個學習模式真的可以很快的學習這個領域的很多事情，但是挫折感之大要怎麼調適也是一門學問啦！