動手玩TypeScript-2

動手玩TypeScript 系列文章:

第1節我們完成了一個 “鳥類別 Bird class”
接下來我們讓鳥產生後代(繼承)

TS無法做多重繼承(multiple inheritance),因此情況可以單純一點
我們可以把繼承視為 “無性生殖” 的概念
生下來的類別 (子類別,sub-class) 擁有和父類別 (parent-class) 一模一樣的特質

現在我們來生一隻 “鴨”
在原本的 test_bird.ts 中,我們再加上一個class

 

class Duck extends Bird {
    constructor(name: string, age: number) {
        super(name, age);
    }

    //override 舊的Method
    getInfo(): string {
        return "This duck's name is " + this._name + " and age is " + this._age.toString();
    }

    //新的Method
    swim() {
        document.write(this._name + " is swimming");
    }
}

Duck的重點如下:
1. 第一行的 extends 表示 Duck 繼承自 Bird
 從這裡開始,Duck就用有了 Bird的
  name: string
  age: number
  getInfo()
  sing()

2. Constructor中,super()表示執行和父類別一樣的Constructor內容
 如果沒寫,不會自動執行哦
3. getInfo() 被我們重寫了一次,內容有點不一樣
 在子類別中重寫一次Method,這個動作叫做 Override
 在TS中,Override動作是不加修飾詞的
4. 最後我們定義了新一個的Method叫做游泳:swim()

那麼,Duck類別可以做到什麼事呢?
我們繼續來研究一下…
開啟 test_bird.html 咱們再加上幾行JS
來產生一隻叫做 “Green” 的、1歲的綠頭鴨

var duck = new Duck("Green", 1);

document.write(duck.getInfo() + "<br>");
duck.swim();

結果如下:

在Green的部分
我們可以看到

  • getInfo() 的確被覆寫掉了
  • Green有新的能力: swim()
  • 這裡雖然沒有要 Green 做 sing() ,但牠其實辦得到哦

綠頭鴨

至此我們來總結一下:

  1. TypeScript只允許單一繼承(single inheritance),繼承後的子類別(sub-class) 擁有和父類別 (parent-class) 一模一樣的特質
  2. 子類別可以覆寫父類別的Methods;亦可再新增自己的Methods
  3. TypeScript中直接使用 constructor() 作為建構子;若要執行與父類別相同的建構子動作,記得加上 super() 哦

微軟70-480 Programming in HTML5 with JavaScript and CSS3 檢定考試心得

此檢定是 MCSA: Web Applications 證照的第一個考試,總共有 “3選2” 個考試
(考過70-480、再考過70-486就可以拿到MCSA)
雖然是第一個考試,但請別小看它,它比丙級技術士難考多了
按照經驗,丙級技術士有題庫可看,而且,實際考試題目都在題庫內找得到
所以就算真的看不懂,用力背起來也是可以考過丙級技術士的

但微軟的就沒那麼容易,您必須對這個領域有相當程度的理解
且必須有實作的經驗、再加上認真看書背誦才可能過關

先來說說這個檢定考試涵蓋的範圍:
顧名思義就是有HTML5、JavaScript和CSS3
重點在於 “HTML5” 這個關鍵字
由於HTML5實際上不只涵蓋HTML,其實還包含了CSS3技術以及許多API
而這些API都要透過JavaScript來實現
根據自己和大家的經驗,有JavaScript的題目至少有一半以上
所以,如果您沒有寫程式的經驗,最好先上JavaScript初中階的課程再報考
jQuery基本操作(選擇器、CSS)、AJAX相關操作會考
另外,ES5 與 ES6 的題目也有出現,請留意

再來說說考卷的內容

閱讀全文 微軟70-480 Programming in HTML5 with JavaScript and CSS3 檢定考試心得

動手玩TypeScript-1

動手玩TypeScript 系列文章:

閱讀本文前須備知識:物件導向概念;若有撰寫C#或Java經驗更佳

老實說,筆者第一次看到 “TypeScript” 這個名詞感覺有點奶油
無論是唸起來還是看起來,都有一點不知為何怪怪的感覺 XD
直到稍微深入了解後,才知道原來這名詞有他的用意

在動手玩TypeScript之前,我們得先聊聊什麼是 AltJS
AltJS這個名詞也很妙,我在書上看到它,但在網路上卻沒有什麼參考資料可找
(猜測可能日本朋友比較有在用,如有錯誤還請指正…)
AltJS的概念是:可替代JS的語言 (Alternative JavaScript)

目前流行的語言大多是基於類別的(Class based)語言
然而JavaScript是基於原形的(Prototype based)
這個特性使得它較不容易撰寫大型的程式
(因為要變大,通常就得寫class,而JS的class並不好寫…)
但JS的強大,不應因為這樣而被掩蓋 (實際上也無法被掩蓋…)
因此有一些人開發出了新的語言,再透過編譯,將它編譯成JavaScript
這樣的語言就是AltJS

閱讀全文 動手玩TypeScript-1

Google Chrome開發人員工具使用經驗談-1

正在學習、進行網頁開發的朋友,無論是網頁設計師還是工程師,都難免有時會遇到一些問題
譬如:

  • 版面調整費時 (動CSS要一直存檔+重讀網頁,好累)
  • CSS設定不知為何無效 (懷疑遇到CSS權重問題,卻不知從何查起)
  • 不知為何網頁載入慢 (可能圖檔太大、網站主機太慢、程式效率不好…)
  • JavaScript、AJAX、Cookies除錯困難

這些看似很小的問題,常常要多耗掉半天時間,真囧

幸好,各大瀏覽器現在都有內建了開發人員工具
可以讓我們少長一點白頭髮…

 

Google Chrome開發人員工具 (按F12鍵開啟)

閱讀全文 Google Chrome開發人員工具使用經驗談-1