文章目录
JavaScript简介
JavaScript是一款纯正的Web编程语言，让你能够给网页添加行为。有了JavaScript，你就能够与用户互动，响应有趣的事件，从网上收集数据并将其用于网页中，在网页中绘制图形等。网页不再是枯燥、乏味、静态的——只是一动不动地躺在那里。
• 基于对象
• javaScript中内置了许多对象供我们使用【String、Date、Array】等等
• javaScript也允许我们自己自定义对象
• 事件驱动
• 当用户触发执行某些动作的时候【鼠标单机、鼠标移动】，javaScript提供了监听这些事件的机制。当用户触发的时候，就执行我们自己写的代码。
• 解释性语言
• javaScript代码是由浏览器解析的，并不需要编译。
• 基于浏览器的动态交互技术
• 既然javaScript是由浏览器解析的，那么它肯定要基于浏览器。 javaScript让网页变得更加“灵活""
• 弱类型
• 像java、c++等编译型语言，要先定义变量，后使用。javaScript能够直接使用，不需要先定义
JavaScript变量
JavaScript变量可分为三种类型：
• 基本类型【number、string、boolean】
• javaScript是弱类型语言，在运行的时候才知道具体的类型是什么。所有类型都用var来修饰。
• 特殊类型【null、undefined】
• 当定义了变量，没有任何赋值的时候，该变量就是undefined类型
复合类型【数组、对象、函数】
下图列举了一些基本类型：
但如何给变量命名呢？随便命名都行吗？ 不是这样的，但变量命名规则非常简单：只要遵循下面两条规则，指定的变量名就是合法的。
1.以字母、下划线或美元符号打头。
2.然后使用任意数量的字母、数字、下划线或美元符号。
3.不能使用关键字给变量命名。
js中const、var、let之间区别
1.const定义的变量不可以修改，而且必须初始化。
2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。
3.let是块级作用域，函数内部使用let定义后，对函数外部无影响。
JavaScript与用户交流的方式
JavaScript与用户交流的方式一下几种
• 创建提醒框
你只需调用函数alert并指定一个包含提醒消息的字符串，浏览器就会在一个漂亮的对话框中显示这条消息。必须承认，由于alert易于使用，我们一直在滥用它；实际上，仅当你要停止一切并提醒用户时，才应使用它。
• 直接写入文档
将网页视为一个文档（浏览器就是这么认为的）。你随时都可使用函数document.write将任何HTML和内容写入网页，这虽然很常见，但通常被认为是一种糟糕的做法。
• 使用控制台
所有JavaScript环境都包含控制台，可将代码中的消息写入其中。要将消息写入控制台日志，可使用函数console.log，并传入要写入的字符串。可将console.log视为杰出的故障排除工具，但用户通常看不到控制台日志，因此这并非与用户交流的有效方式。
• 直接操作文档
这是最佳的方式，你应尽量使用这种方式来与网页和用户交互。使用JavaScript可以访问网页，读取和修改其内容，甚至修改其结构和样式！这些都是利用浏览器的文档对象模型实现的。然而，要使用文档对象模型，你必须知道网页的结构，并熟悉用来读写网页的编程接口。
掌握了吗？看看你会下面的搭配题吗？
JavaScript代码加入网页
如何将JavaScript代码加入网页（细数各种方式）
1. 可将代码嵌入head元素中。在网页中添加代码时，最常见的方式是在head元素中添加一个script元素。这让你的代码更容易找到，好像也是放置代码的合理位置，但这并非总是最佳方式。
2. 也可以将代码内嵌在网页的body元素中。为此，可将JavaScript代码放在script元素中，并将script元素放到网页的body元素中（通常是最后）。
3. 还可将代码放在独立的文件中，并在head中链接该文件。这与链接到CSS文件类似，唯一的差别是，你使用script标签的src特性来指定JavaScript文件的URL。
4. 最后，可在网页的body元素中链接到外部文件。这是鱼和熊掌兼得的最佳方式，既有一个可用于任何网页且易于维护的JavaScript文件，又在网页末尾引用它，这样它将在网页加载完毕后再加载。真不错。
如下图所示：（对应各种方式编号）
当html中通过script标签的src加入了js代码之后，此时启动浏览器查看html页面，若页面显示空白则有可能是以下情况造成的。
当JS插在HTML文档中起作用，而从外部引用就不起作用时有以下几种解决方法。
因为浏览器渲染默认是从上往下顺序进行的，先将JS渲染，然后渲染HTML，由此，可以推知，将JS在HTML后引入可以解决，或者在JS中写上window.οnlοad=function(){}将JS代码放在里面。
JavaScript函数
JavaScript函数让你能够给一系列代码指定名称，以便
需要时反复使用它们。
假设你要编写一些反复“发出叫声”的代码：在小狗较大时发出较大的
叫声（显示大写的WOOF WOOF），而小狗较小时发出较小的叫声（显
示小写的woof woof）。之后需要在代码中多次使用这种发出叫声的功能。
下面来编写一个可反复使用的bark函数。
现在需要给这个函数编写代码，用来检查小狗的体重，并输出相应的叫声。
接下来使用上面的这个函数。
知道如何定义和调用函数后，咱们来透彻地解释相关的语法。下面全面地
剖析了函数的各个组成部分：
JavaScript全局变量与局部变量
如果变量是在函数外声明的，它就是全局变量；如果变量是在函数中声明的，它就是局部变量。
变量的生命周期
全局变量的寿命与网页一样长。 全局变量在JavaScript代码加载到网页之后降生，并在网页消失后死去。重新加载网页时，将销毁并重新
创建所有的全局变量。
局部变量通常在函数结束时消失。 局部变量是在函数被调用后创建的，并一直活到函数返回（无论函数是否返回值）。然而，在局部变量的
大限到来前，可从函数返回它们的值。
千万别忘了声明局部变量
如果你使用未声明的变量，它就会是全局的。这意味着即便你首次使用一个变量时是在函数内部（因为你想将其作为局部变量），这个变量也将是全局的，在函数外面也可用（这可能带来麻烦）。因此，对于局部变量，
千万别忘了声明它们！
JavaScript数组
如何使用JavaScript表示多个值
你知道如何使用JavaScript来表示单个值，如字符串、数字和布尔值，但如何表示多个值（如10个配方的泡泡因子得分）呢？使用JavaScript数组。数组是一种可存储很多值的JavaScript数据类型。
可将所有这些值视为一个整体，也可在需要时访问其中的各个值，如下所示。
确定数组的长度
迭代数组
- 声明数组
- 声明变量：使用这个变量来存储要输出的字符串
- 声明变量：用于存储当前索引的变量。
- 进行循环
使用for迭代数组
使用for in 迭代数组
var a = ['a', 'b', 'c'];
for(var index in a) {
alert(index);
}
使用for in 迭代对象
//对象json上，包含了两个对象a和b属性
var json = {a:{num:1},b:{num:2}};
for(var name in json){
alert(name);
}
使用for in 迭代对象的属性
使用for in迭代对象数组中对象的属性及其属性值
给数组添加新元素
JavaScript对象
JavaScript对象不过是一系列属性（property）而已。就拿汽车来说吧，它有如下属性。
创建对象
如何访问对象的属性
如何添加新属性
如何为对象添加行为
对象是活动的，能够做事情。小狗不会一直静静地坐着，它们还会叫、跑、玩接球游戏。小狗对象也如此！同理，我们可以开车、停车、倒车和刹车。
调用对象中的行为
this关键字的使用
若不是用this关键字，JavaScript不知道started是哪个对象的属性。
JavaScript中的DOM
JavaScript如何与网页交互？
JavaScript和HTML是两样不同的东西：HTML是标记，而JavaScript是代码。它们如何交互呢？这是通过网页的表示，即文档对象模型（DOM）实现的。
DOM的结构图
HTML中的元素P
方法document.getElementById根据id从DOM获取一个元素要修改元素的内容，可修改其属性innerHTML的值。
要设置元素的特性值，可使用方法setAttribute
要获取元素的特性值，可使用方法getAttribute
JavaScript异步编码：处理事件
事件是什么？
你现在肯定知道，浏览器不会在获取并显示页面后就甩手不管了。在幕后，有很多事情在不断发生：用户单击按钮、鼠标位置发生变化、通过网络收到数据、窗口大小发生变化、定时器到期、浏览器位置发生变化等。这些都会触发事件。
事件处理程序是什么？
我们编写处理程序来处理事件。处理程序通常是一小段代码，知道事件发生时该如何做。从代码的角度说，处理程序就是一个函数。事件发生时，其处理程序函数将被调用。（你也许会听到开发人员称其为回调函数或监听器，而非处理程序）
如何创建事件处理程序？
1.首先，需要编写一个处理网页加载事件的函数。在这里，这个函数将在网页加载完毕时显示 “I’m alive!”。
2.处理程序编写好后，需要建立关联，让浏览器知道有这么一个函数，应在加载事件发生时调用它。为此，我们这样使用window对象的属性onload：
3.测试事件处理程序
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> I'm alive! </title>
<script>
window.onload = pageLoadedHandler;
function pageLoadedHandler() {
alert("I'm alive!");
}
</script>
</head>
<body>
</body>
</html>
结果如下图：
事件群英谱
