1.開發環境搭建
本系列教程的開發工具，我們采用HBuilder。
可以去網上下載最新的版本，然后解壓一下就能直接用了。學習JavaScript，環境搭建是非常簡單的，或者說，只要你有一個瀏覽器，一個記事本就行了，不存在環境搭建的問題。而且，通過運行瀏覽器，立刻就能看到效果，這一點比較Java要方便很多。省去了很多繁雜的操作，如果你正打算轉行從事程序猿這個職業，不妨以JavaScript為切入點，從而發現編程的樂趣。當你深刻理解了JavaScript的思想，其他任何面向對象的語言都是大同小異的。
2.JavaScript初探
2.1 基本概念
一個網頁，一般來說，分為Html，css，還有JavaScript。如果說Html是網頁的骨架，那么css就是它的的外衣。JavaScript則是一個網頁的能源，就是專門負責讓網頁動起來的必不可少的因素。
2.2 基礎核心
作為一門基於對象的語言，JavaScript也和其他任何一門面向對象的語言一樣，有着對象的概念。其實，就我看來，我們很多人在學習的過程中，都情不自禁地把簡單的東西復雜化了，總想着去歸類，最后把PPT做得很漂亮，理論說起來一套一套的。大綱弄得有模有樣，條理清清楚楚，任何教科書，培訓基本都是如此。其實在我看來，沒必要搞得這么復雜，一下子弄這么多，我也記不住啊，難道你就非得拿着一本字典跟我一頁一頁地講嘛？。JavaScript學習，無非都是圍繞着對象和屬性兩個方面來兜圈子罷了。萬變不離其宗。
在Javascript中，能點出來的，或者中括號里面的必然是屬性（方法）。當然，數組不算在列。
對象調用屬性。
對象調用屬性。
對象調用屬性。
整個Javascript其實翻來覆去都在圍繞這個事情做文章。
在今后的學習過程中，我會反復強調這個事情，因為大家的時間都很寶貴，所以我打算把重要的東西反復講，講到你理解為止。一遍不行就說兩遍，兩遍不行說三遍，直到你明白JavaScript其實就是這么回事。
當你能夠卸去對新東西的恐懼之后，然后才會逐漸掌握主動權，從而更加深入地學習它。
我很明白，包括當初的我自己也是如此，因為不懂，所以害怕去學，怕受打擊。
比如Javascript，看了半天看不懂，網上找的資料也不明白是什么意思，買一本教材吧，看得我都快懷疑人生了，心想怎么這么深奧啊。
后來發現，僅僅是因為我的不自信，不敢跨出第一步！
如果你是初學者，請先從編寫很爛的代碼開始，不要害怕被嘲笑，先去做，踏出第一步再說！
然后，你會漸漸發現樂趣的，只要你不斷地總結，不斷地總結，總有一天，你會有一種感覺的。就是一種仿佛什么事情都難不住你的感覺，這並非你自信心膨脹，而是你勇敢踏出了第一步之后，獲得的內功積累。
當你真的去做了之后，你就會發現，沒那么難，而且你會越學越有樂趣。
2.3 小案例 - 制作一個按鈕
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一個html頁面</title>
<style type="text/css">
.btn {
height: 30px;
width: 100px;
background: #0c093e;
color:#fff;
font-family: "微軟雅黑";
border-radius: 5px;
text-align: center;
line-height: 30px;
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -15px;
cursor: pointer;
transition: background 1s ease;
}
.btn:hover{
background: #251f8c;
}
</style>
</head>
<script type="text/javascript">
/*var person = {
name : "zhangsan"
}
person.name = "lisi";
person.name = "wangwu"
alert(person.name);*/
window['onload'] = function(){
//alert(1);
//1. 獲取按鈕的dom元素
var btn = document.getElementsByTagName('div')[0];
btn.onclick = function(){
alert('保存成功！');
}
}
/*window.onload = function(){
alert(2);
}*/
/*
* A 1
* B 2
* C 1,2
* D 報錯
*
* */
</script>
<body>
<div class='btn'>
保存
</div>
</body>
</html>
開發工具包：http://pan.baidu.com/s/1bo6VzbD
視頻地址：http://pan.baidu.com/s/1jHUxLPW