網站製作學習誌

記錄學習製作網站的一切

[分享] JavaScript 知識等級

你認為你的 JavaScript 知識等級到哪裡了呢？

剛剛看到這篇 Levels of JavaScript Knowledge 時覺得非常有趣，以下我自己把它加上一些個人的見解。

註：以下程式取自 Levels of JavaScript Knowledge 。

等級一：會使用內建的函式，如 alert 。例如：

1

alert("Hello World");

等級二：會使用自訂的 function 。 

1
2
3
4
5

var WORLD = "World";
function hello(who) {
alert("Hello " + who);
};
hello(WORLD);

等級三：會在 HTML 標籤內使用 onxxxx 事件來呼叫 JavaScript。 

1

<button onclick="hello(WORLD)">Say Hello</button>

等級四：會使用微軟自訂的 document.all 來撰寫 DHTML 。 

1

<button id="hello">Say Hello</button>
1
2
3
4

var button = document.all.hello;
button.onclick = function() {
hello(WORLD);
};

等級五：會使用標準的 DOM 加上事件 (Event) 來撰寫 DHTML 。

1
2
3
4

var button = document.getElementById("hello");
button.addEventListener("click", function(event) {
hello(WORLD);
}, false);

等級六：回歸到 Object Base 的 JavaScript 的設計方式。

1
2
3
4
5
6
7
8
9
10
11

var Hello = new Binding({
greet: function(who) {
alert("Hello " + who);
},
onclick: function() {
this.greet(Hello.WORLD)
}
}, {
WORLD: "World"
});
document.bind("#hello", Hello);

當然不是說使用等級低的技巧就是落伍，它們可是你學習 JavaScript 的必經過程。

Comments