正法寶藏JavaScript第四&五堂課(辛苦追趕中)

明天就要邁入第六堂課了,強度真的是開始有點負荷不了了,稍微分享一下這兩堂課的東西吧(其實我真的很不熟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程式碼輸入:

#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。

comments powered by Disqus