JavaScript 基础语法
讲法声明 - 很重要，请先查看
关于JavaScript的讲法，我们采取的方式与HTML&CSS类似，先在课程中带大家，以“实现页面小功能”为目的，一步一步的进行实现，并在期间讲解相关知识点，在其中一些相关的“细节”知识点我们暂时先忽略掉，先完成主干的学习。在一个小阶段的主干知识学习完成之后，我们再回头详细分析“细节”。这样更有利于大家的吸收和理解，不容易陷入到一些不必要的问题当中。
本文内容概要：
1 回顾JavaScript的基本组成
2 JavaScript引入方式
3 JavaScript基本调试
4 JavaScript常见调试方法
5 变量（标识符）
6 JavaScript基本数据类型
7 课程小结
8 课后练习
1 回顾JavaScript的基本组成
JavaScript = ECMAScript + DOM + BOM；今天我们要讲解的就是ECMAScript中的部分基础语法。
之前学堂的小编-利利给大家分享了如何才能把JavaScript学好的文章，该文章内容涉及了JavaScript的基本知识以及JavaScript学习方法。如果想了解具体的JavaScript基础知识，可以回复“学JS”到“HTML5学堂”公众号。
2 JS引入方式
JS被称为行为代码，我们希望在HTML（结构代码）当中书写行为代码，必然不能够直接书写，需要采用几种不同的方式，将JS代码“引”到HTML文件中。
JavaScript有标签内联、内部书写、外部引入这三种引入方式，接下来我们具体来学习一下如何使用这三种引入方式。
2.1 标签内联
既然是标签内书写，肯定是在HTML标签上书写JavaScript了，具体来看下面的代码实例
代码实例：
<div class="btn" onclick="alert('利利、堡堡');">HTML5学堂创始人~</div>代码分析：
鼠标点击div标签的时候，会出现弹窗并且里面显示的内容是“利利、堡堡”；
可以把标签里的onclick进行拆开理解，on是“在什么上”的意思，click是点击的意思，结合起来的意思是在标签上进行点击；onclick中引号的内容就是JavaScript代码；整个代码结合起来意思是在标签上进行点击的时候，会运行onclick中的JavaScript代码；（不单单只有onclick还有onmousedown等，这边只是帮助大家理解标签内联书写，以后会进行详细介绍）
缺点：这种引入方式的代码可阅读性差，冗余度高，不利于后期维护，因此实际项目开发中基本上用不到。
2.2 内部书写
内部书写的意思是JavaScript代码书写在网页中（不是标签里面哦），可以任意放置在页面的某个位置当中。通常来说，JavaScript代码要放置在页面头部或者HTML标签后面(</body>标签之前)，具体需要根据页面功能需求而定。
代码实例：
<script type="text/javascript">
// 这边书写JavaScript代码
</script>代码分析：
在页面中书写JS代码时，需要用到script标签，JS代码书写在script标签之间；用type属性来识别script标签之间的内容，我们想在script标签里面书写JS，需设置type属性值为text/javascript。
优点：
速度快，没有服务器请求压力；相对于外部引入单页代码量少；
缺点：
不易改版与维护；代码较乱不易前后台沟通；
2.3 外部引入
外部引入就是把JavaScript代码放入到文件当中，通过script标签把文件引入到网页当中；
代码实例：
<script type="text/javascript" src="js/h5course.js" charset="utf-8"></script>代码分析：
1 script标签的src属性填写的值是外部JS文件的URL路径；charset属性声明外部JS文件中使用的字符集编码，在项目开发中，charset属性可以省略掉，如果你想要更规范、严格一点，就不要省略了，特别是面试的时候哦！
2 外部引入的script标签之间不允许有其它内容。
3 JavaScript文件位置很重要，网页自上而下进行代码的执行，如果将JavaScript放置在head当中，又希望不发生错误，则需要使用到window.onload事件（后面的文章当中会讲解到事件相关的知识）或者将JavaScript文件放置在所有标签之后，能够保证加载完成html结构之后再执行JavaScript内容。
4 引入的JS文件当中，不要出现<script></script>。
优点：
一个JS文件可控制多个页面；易改版、便于维护；减少代码量、代码简洁规范易于分工协作；有效利用缓存机制；
缺点：
相对于单页有垃圾代码；外部引入中的href属性会给服务器造成请求的压力。
2.4 综合实例
请注意其中script的存在位置（包含两个外部引入一个内部书写）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂 - H5course</title>
<script src="../js/common.js"></script>
</head>
<body>
<div class="wrap"></div>
<script>
console.log('HTML5学堂 demo');
</script>
<script src="../js/zepto.js"></script>
</body>
</html>3 JavaScript基本调试
新手在书写JavaScript时，时常会出现一些JS中的问题，因此了解这些问题以及掌握如何调试，如何找到自己的JS错误所在，使我们首先要了解的。
3.1 调试工具
我们可以使用谷歌、火狐等各个主流浏览器的控制台。最推荐谷歌浏览器。按下F12键即可开启控制台（关闭的话就是再按下一次F12键），在控制台中有Console一项，该项当中即为JS的调试位置。
3.2 新手常见错误
Unexpected token ILLEGAL 表示：基本语法错误
err_File_not_found 表示：文件路径错误
4 常见调试方法
当页面出现了问题，如何定位错误呢？在此介绍三种方法：。
4.1 调试方法 - 注释法
单行注释：单行注释使用双// ，双斜杠与注释内容之间有空格（书写规范）
多行注释：/* 多行注释 */
注释使用范围：
针对文件/函数的功能以及用法进行描述的时候，使用多行（块）注释（Sublime快捷键：Ctrl+shift+/）,其他情况下均使用单行注释（Sublime快捷键：Ctrl+/）；需要说明一下注释调试，在利用注释调试代码的时候，如果需要注释大量的代码推荐使用块注释，否则推荐使用单行注释，最终还得视情况而定；
代码实例：
<script type="text/javascript">
// 声明变量
var html5 = 'HTML5学堂';
/*
* [sum 实现两数求和]
* @param {数字} a [第一个数]
* @param {数字} b [第二个数]
* @return {数字} [求和的返回值]
* @demo sum(100, 200)
* @date 2016.04.26
* @author 刘国利、陈能堡
*/
function sum(a, b) {
return a + b;
}
</script>HTML5学堂小编-堡堡特别提醒：不管是平常练习，还是项目开发，注释不仅仅能体现出你的代码规范，而且还能提高代码的可读性哦~
4.2 调试方法 - 浏览器命令-弹窗
想了解JS代码中的运行结果，可以通过弹窗的方式把信息给显示出来。具体来看看下面的三种弹窗：
警告弹窗：alert（）
对话弹框：prompt（）
确认弹窗：confirm（）
代码实例：
<script type="text/javascript">
/*
* [sum 实现两数求和]
* @param {数字} a [第一个数]
* @param {数字} b [第二个数]
* @return {数字} [求和的返回值]
* @demo sum(100, 200)
* @date 2016.04.26
* @author 刘国利、陈能堡
*/
function sum(a, b) {
return a + b;
}
// 利用弹窗输出求和的结果
alert(sum(10, 20));
// 确认弹窗
confirm("确认");
// 对话弹窗
prompt("梦幻雪冰", "陈能堡");
</script>输出结果：
Tips：弹窗在不同的浏览器当中显示出来的样式都不相同哦；利用弹窗调试JS代码不是很推荐，主要在于一旦程序出现错误，有可能会产生“无尽”的弹窗。另外，当需要多次查看一个变量的数值时，大量的弹窗也会影响我们的调试速度。
4.3 调试方法 - 文档方法
文档命令：document.write("在文档中打印信息"); document.writeln("在文档中打印信息");
write与writeln的区别：write（）与writeln（）方法类似，只是writeln每个表达式之后多写一个换行符(\n)
4.4 调试命令 - 控制台命令
console.log('此处填写控制台命令'); 最为常用的调试命令，IE8+支持
console.time(name);与console.timeEnd(name); 用于测算两句代码之间的内容运行时间，两个方法中的“name”需要保持一致，采用字符串格式
代码实例：
<script type="text/javascript">
// 文档输出命令——>查看页面内容
document.write("HTML5高级讲师<br>");
document.write("陈能堡");
// 控制台输出命令——>按F12键，查看浏览器控制台
console.log('HTML5主管');
console.log('刘国利');
</script>代码分析：
上面介绍的这两种调试，都能够方便的输出JS运行时的一些信息，但是，文档命令是直接在页面中输出信息，换句话说它会直接影响到页面的内容（如果页面有内容的话就会被替换掉了），所以这种调试方式我们也是不推荐大家使用；控制台命令是不是感觉非常方便了，调试起来比弹窗舒服多了，而且也不会影响到页面里面的内容，这种调试(控制台命令)是小编极力推荐的一种调试方法!
5 变量（标识符）
5.1 什么是变量，什么是常量？
50x+y=99这个数学表达式当中，哪些是变量，哪些是常量呢？50和99是常量（固定数值），x和y是变量。那么JavaScript如何声明一个变量呢？接着往下看吧~
5.2 如何声明变量
JavaScript中定义变量需要用到var操作符(JS声明变量的命令，告诉系统 ——> 要声明变量了)；
var 变量名;
var 变量名 = 值;
代码实例：
<script type="text/javascript">
// 声明变量
var blog = 'HTML5学堂网';
</script>Tips：JavaScript语言与其它语言不太一样，声明变量的时候不需要明确变量的数据类型，因为JavaScript的变量为弱变量，可以用来保存任何类型的数据。
5.3 如何理解变量与函数
通过var或function定义的变量或函数，均可以理解为一个对象的属性或方法（通常把变量理解为属性，把函数理解为方法）
调用的方法1：对象.属性; 对象.方法;
调用的方法2：对象['属性名'];
在全局环境中定义的所有变量和方法，均隶属于window
5.4 什么是标识符
在书写JavaScript的时候，需要声明一定的变量，那么如何给变量起名字呢，就涉及到了标识符内容。
标识符，指的是变量、函数、属性的名字，或者函数的参数。目前需知晓“变量属于标识符”。
名字不能乱起，是需要有一定的规则的：
5.5 标识符命名规范
标识符的命名规范
1 由数字、字母、美元符$、下划线组成，不能以数字开头；
例如h5course（合法），5course（不合法）
2 区分大小写；
例如：H5course与h5course是有区别的
3 不能含有空格；
例如：h5 course（不合法）
4 不能用关键字和保留字命名；
例如：break、width、for等
标识符的命名推荐
1 小驼峰命名法（小驼峰，多个英文单词组成一个标识符号名称时，除了首个单词之外，所有单词首字母大写）；
2 对于属性 要求名词开头
3 对于方法 要求动词开头
4 常量全部大写，多个单词之间使用下划线分隔；例如：MAX_VALUE = 100；
5 构造函数，大驼峰（所有单词首字母大写）
另外，标识符要有一定的“语义性”，方便代码的书写与阅读
6 JavaScript基本数据类型
Undefined 值未定义（声明了变量，但没有给变量赋值）
Null 空对象
String 字符串（引号里面的就是字符串，JS中单引号和双引号的字符串都是一样，如：var str = "HTML5学堂";与var str = 'HTML5学堂';等价）;
Number 数字（var age = 20;）
Boolean 布尔值（只有两个值，真/true和假/false）
Obect 对象（在JavaScript使用{ }表示对象）
7 课程小结
掌握调试的目的是为了能够自我检查错误，JS的引入方法让我们能够在HTML代码中书写JavaScript代码。var是JS中“万能”的声明符，我们需要有变量，才能够进行一系列操作，但是名字不能随便起。在JavaScript中数据有六种不同类型~另外，对象.方法，对象.属性这个部分的知识很重要哦~！
8 课后练习
1 书写出外部引入JS文件的代码
2 完成下面图中的效果（弹窗内容换行）
3 对于变量的合法命名是哪几项？
A、var abc0; B、var a b c; C、var ABC; D、var a_b_c_; E、var 0abc;
4 变量与数据类型
声明一个变量，值为一个字符串：“HTML5学堂”
声明一个变量，不赋值，那么它的值是什么？
5 以下哪个单词不属于JavaScript保留字
A、with B、parent C、class D、void