正法寶藏JavaScript第三堂課(html之初次成就)

發表於 更新於 分類於 ，

其實早在昨天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。

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