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