一、JavaScript 简介
一个完整的JavaScript实现应该由ECMAScript（核心）、DOM（文档对象模型）、BOM（浏览器对象模型）三个不同的部分组成；ECMAScript提供核心语言；DOM（Document Object Model）把整个页面映射为一个多层节点结构，是针对XML但经过扩展用于HTML的应用程序编程接口（API），借助DOM提供的API，开发人员可以轻松自如地删除、添加、替换或修改任何节点；BOM处理浏览器窗口和框架，开发人员使用BOM可以控制浏览器显示的页面以外的部分。
二、如何在HTML中使用JavaScript
1.使用<script>元素
（1）HTML内嵌javascript代码
<script type="text/javascript">
/*javascript代码*/
</script>
（2）引入外部javascript代码（例如引入一个外部example.js）
<script type="text/javascript" src="example.js"></script>
（3）<script>应该放在哪里
<html>
<head>
<title></title>
<script type="text/javascript" src="example.js"><script>
</head>
<body>
<!--页面内容-->
</body>
</html>
<html>
<head>
<title></title>
</head>
<body>
<!--页面内容-->
<script type="text/javascript"></script>
</body>
</html>
（4）延迟脚本（在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行）
<html>
<head>
<title></title>
<script type="text/javascript" defer="defer" src="example1.js"><script>
<script type="text/javascript" defer="defer" src="example2.js"><script>
<!--defer只适用于外部脚本文件-->
</head>
<body>
<!--页面内容-->
</body>
</html>
（5）异步脚本（在<script>元素中设置async属性，async只适用于外部脚本文件，并告诉浏览器立即下载文件且并不保证按照指定它们的先后顺序执行）
<html>
<head>
<title></title>
<script type="text/javascript" async src="example1.js"><script>
<script type="text/javascript" async src="example2.js"><script>
<!--defer只适用于外部脚本文件-->
</head>
<body>
<!--页面内容-->
</body>
</html>
三、基本概念
ECMAScript的语法大量借鉴了C语言等高级语言的语法；并且ECMAScript的一切（变量、函数名和操作符）都区分大小写；
1.语法
（1）标识符（是指变量、函数、属性的名字，或者函数的参数）
- 第一个字符必须是一个字母、下划线（_）或美元符号（$）；
- 其他字符可以是字母、数字、下划线、美元符号；
（2）注释
//单行注释
/*
多行注释
*/
（3）严格模式（在严格模式下，ECMAScript3中一些不确定的行为将得到处理，而且对某些不安全的操作会抛出错误）
//要在整个脚本中启用严格模式，可以在顶部添加如下代码
"use strict";
//指定函数在严格模式下执行
function example（）{
"use strict";
}
2.变量（全局变量、局部变量）
- 局部变量（用var定义的变量将成为定义该变量的作用域中的局部变量，在函数退出后这个变量就会被销毁）
function test(){
var message = "hi"; //局部变量
}
test();
alert(message); //变量未声明错误
- 全局变量
function test(){
message = "hi"; //全局变量
}
test();
alert(message); //"hi"
- 一条语句定义多个变量
var name="JavaScript",
brithday=1995,
die_out=false;
- 在严格模式下，不能定义名为eval或arguments的变量，否则会导致语法错误；
3.数据类型（Number类型）
（1）NaN（非数值（Not a Number））
//判断是不是数值
alert(isNaN(NaN)); //true
alert(isNaN(10)); //false（10是一个数值）
alert(isNaN("10")); //false（可以被转换成数值 10）
alert(isNaN("blue")); //true（不能转换成数值）
alert(isNaN(true)); //false（可以被转换成数值 1）
（2）数值转换
- 有三个函数可以把非数值转换为数值：Number()、parseInt()和parseFloat()；Number()可以用于任何数据类型的转换，而另两个函数则专门用于把字符串转换成数值；
- Number()函数转换规则：
1.如果是Boolean值，true和false将分别被转换成1和0；
2.如果是数字值，只是简单的传入和返回；
3.如果是null值，返回0；
4.如果是undefined，返回NaN；
5.如果是字符串，遵循（仅含数字转换为数字；浮点数转换成浮点数；十六进制转换成等大小十进制；字符串空，转换为0；其他转换为NaN）；
6.如果是对象，则调用对象的valueOf()方法，然后依照前面的规则转换返回的值。如果转换的结果是NaN，则调用对象toString()方法，然后再次依照前面的规则转换返回的字符串的值； - parseInt()：第一个字符不是数字或负号，返回NaN
var num1 = parseInt("1234blue"); // 1234
var num2 = parseInt(""); // NaN
var num3 = parseInt("0xA"); // 10（十六进制数）
var num4 = parseInt(22.5); // 22
var num5 = parseInt("070"); // 56（八进制数）
var num6 = parseInt("70"); // 70（十进制数）
var num7 = parseInt("0xf"); // 15（十六进制数）
//指定基数会影响到输出的结果：
var num1 = parseInt("10", 2); //2 （按二进制解析）
var num2 = parseInt("10", 8); //8 （按八进制解析）
var num3 = parseInt("10", 10); //10 （按十进制解析）
var num4 = parseInt("10", 16); //16 （按十六进制解析）
- parseFloat()：
var num1 = parseFloat("1234blue"); //1234 （整数）
var num2 = parseFloat("0xA"); //0
var num3 = parseFloat("22.5"); //22.5
var num4 = parseFloat("22.34.5"); //22.34 <-----特别的地方
var num5 = parseFloat("0908.5"); //908.5
var num6 = parseFloat("3.125e7"); //31250000
4.数据类型（String类型）
- 转换为字符串 toString()
var num = 10;
alert(num.toString()); // "10"
alert(num.toString(2)); // "1010" ，转二进制
alert(num.toString(8)); // "12" ，转八进制
alert(num.toString(10)); // "10" ，转十进制
alert(num.toString(16)); // "a" ，转十六进制
- 如果值为null则返回"null"，值为undefined则返回"undefined";null 和 undefined 没有 toString()方法；
5.数据类型（Object类型）
6.位操作符
（1）按位非（NOT，符号：~），返回数值的反码；
（5）左移（<<）
（6）右移（>>）
7.条件操作符
var max = (num1 > num2) ? num1 : num2;
8.语句
（1）if
if (i > 25)
alert("Greater than 25."); // 单行语句
else {
alert("Less than or equal to 25."); // 代码块中的语句
}
/****************************************************/
if (i > 25) {
alert("Greater than 25.");
} else if (i < 0) {
alert("Less than 0.");
} else {
alert("Between 0 and 25, inclusive.");
}
（2）do-while
var i = 0;
do {
i += 2;
} while (i < 10);
alert(i);
（3）while
var i = 0;
while (i < 10) {
i += 2;
}
（4）for
var count = 10;
for (var i = 0; i < count; i++){
alert(i);
}
（5）for-in
for (var propName in window) {
document.write(propName);
}
（6）switch
switch (i) {
case 25:
alert("25");
break;
case 35:
alert("35");
break;
case 45:
alert("45");
break;
default:
alert("Other");
}
（7）label语句
- 使用label语句可以在代码中添加标签，以便将来使用；
- 语法：label: statement
- 示例：
start: for (var i=0; i < count; i++) {
alert(i);
}
（8）with语句
- with语句的作用是将代码的作用域设置到一个特定的对象中；
- 语法：with (expression) statement;
- 示例：
with(location){
var qs = search.substring(1);
var hostName = hostname;
var url = href;
}
- 使用with语句关联了location对象，这意味着在with语句的代码块内部，每个变量首先会被认为是一个局部变量，而如果在局部变量环境中找不到该变量的定义，就会查询location对象中是否有同名的属性，如果发现了同名属性，则以location对象的属性作为变量的值；
- 在严格模式下，不允许使用with语句，会报错；
- 由于大量使用with语句会导致性能下降，同时也会给代码调试造成困难，因此在开发大型应用程序时，不建议使用with语句。
9.理解参数
- ECMAScript中的参数在内部是用一个数组来表示的，函数接收到的始终是这个数组，而不关心数组中包含了哪些参数。
function howManyArgs() {
alert(arguments.length);
}
howManyArgs("string", 45); //2
howManyArgs(); //0
howManyArgs(12); //1
function doAdd() {
if(arguments.length == 1) {
alert(arguments[0] + 10);
} else if (arguments.length == 2) {
alert(arguments[0] + arguments[1]);
}
}
doAdd(10); //20
doAdd(30, 20); //50
参考文献：JS高级程序设计-第3版
warning ：未经授权，不得转载
有问题的小伙伴请在下方留言，喜欢就点个赞吧；关注我，带你一起写bug
CSDN：带只拖鞋去流浪
知乎：叄贰壹
