用JavaScript增强Web页面的动态

一、JS（JavaScript） 概述

JavaScript 是一门客户端脚本语言，简称“JS”。由于脚本语言不需要编译，能直接被浏览器执行，所以可以直接运行在客户端浏览器中，且每个浏览器都有 JavaScript 的解析引擎。

JavaScript 可以增强用户和 html 页面的交互过程，并且控制 html 元素，让页面有一些动态，增强用户体验。

二、JavaScript 发展史

1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- （后来更名为：ScriptEase）

1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript。

1996年，微软抄袭JavaScript开发出JScript语言。

1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准： ECMAScript ，就是统一了所有客户端脚本语言的编码方式。

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM + DOM)

三、ECMAScript

3.1 基本语法

3.1.1 与 html 结合方式（2种）

• 内部JS：在 html 文件中定义 <script> ，标签体内容就是js代码。

  <script>
      alert("Hello World");
  </script>
  

• 外部JS：在 html 文件中定义 <script> ，并通过src属性引入外部的js文件。

  <script src="js/a.js"></script>
  

  //外部的js文件：a.js
  alert("Hello World");
  

需要注意的是： <script> 可以定义在 html 页面的任何地方，但是定义的位置会影响执行顺序。 <script> 可以定义多个。

3.1.2 注释

单行注释：

//注释内容

多行注释：

/*注释内容*/

3.1.3 数据类型

3.1.4 变量

变量 是指一小块存储数据的内存空间。

JavaScript 是弱类型语言,在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

语法定义：

var 变量名 = 初始化值;

使用typeof 运算符可以获取变量的类型；注意 null 类型数据用 typeof 运算后得到的是 object 类型。

3.1.5 运算符

• 在 JS 中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换。

  1. 其他类型转 number ：string 转 number ，按照字面值转换，如果字面值不是数字，则转为 NaN（不是数字的数字）。boolean 转 number ，true 转为 1 ，false 转为 0 。
  2. 其他类型转 boolean ：number 类型中，0或NaN为假，其他为真。string 类型中，除了空字符串("")，其他都是 true 。null & undefined 类型数据都是 false 。所有对象都为 true 。

• 比较运算符的比较方式：

  1. 类型相同，直接比较：string 字符串数据，按照字典顺序比较。按位逐一比较，直到得出大小为止。
  2. 类型不同，先进行类型转换，再比较：=== 意为 全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false。

• 三元运算符的语法：表达式 ? 值1:值2; ，判断表达式的值，如果是表达式为 true 则取值1，如果是 false 则取值2。

  // 比如
  var a = 3;
  var b = 4;
  var c = a > b ? 1:0;
  alert(c);//提示0
  

3.1.6 流程控制语句

在 JS 中有五种流程控制语句：

1. if…else…
2. switch
3. while
4. do…while
5. for

其中 switch 语句可以接受任意的原始数据类型：

var a = "abc12";
switch (a){
    case 1:
        alert("number");
        break;
    case "abc":
        alert("string");
        break;
    case true:
        alert("true");
        break;
    case null:
        alert("null");
        break;
    case undefined:
        alert("undefined");
        break;
}

3.1.7 JS 特殊语法

语句以 ; （英文分号）结尾，如果一行只有一条语句则 ; 可以省略 (不建议省略)。

变量的定义使用 var 关键字，也可以不使用。不用 var 定义的变量是全局变量（但不建议这么做）。使用 var 定义的变量是局部变量。

3.2 基本对象

JS 中的基本对象有九种：Function函数(方法)、Array数组、Boolean、Date日期对象、Math数学对象、Number、String、RegExp正则表达式对象 、 Global全局对象 。

四、BOM

BOM 全称：Browser Object Model,浏览器对象模型。它可以将浏览器的各个组成部分封装成对象，且允许 JavaScript 与浏览器对话。

4.1 Window窗口对象

demo代码：打开、关闭窗口

demo代码：循环定时器与自动跳转页面

demo代码：循环定时器与轮播图

4.2 *Navigator浏览器对象

4.3 *Screen显示器屏幕对象

4.4 History历史记录对象

1. 创建(获取)

   window.history 或 history 。

2. 方法

   • back() ：加载 history 列表中的前一个 URL。
   • forward() ：加载 history 列表中的下一个 URL。
   • go(参数) ：加载 history 列表中的某个具体页面。参数为正数时，意为前进几个历史记录；为负数时，意为后退几个历史记录。

3. 属性

   length ，指返回当前窗口历史列表中的 URL 数量。

4.5 Location地址栏对象

1. 创建(获取)

   window.location 或 location 。

2. 方法

   • reload()：重新加载当前文档，即刷新。

3. 属性

   href ，设置或返回完整的 URL。

五、DOM

DOM 全称：Document Object Model 文档对象模型。DOM 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。

这里着重介绍“核心 DOM”中的“Document文档对象、Element元素对象、Node节点对象”和“HTML DOM”。

5.1 核心 DOM

5.2 HTML DOM

1. 标签体的设置和获取：innerHTML

2. 使用html元素对象的属性

3. 控制元素样式

   • 使用元素的 style 属性来设置
   • 提前定义好类选择器的样式，通过元素的 className 属性来设置其 class 属性值。

更多内容请查看：JavaScript HTML DOM

demo代码：使用 DOM 制作动态表格

六、事件

概念：是指某些组件被执行了某些操作后，触发某些代码的执行。

• 事件，指某些操作。如： 单击，双击，键盘按下了，鼠标移动了等。
• 事件源，即组件。如： 按钮 文本输入框等。
• 监听器，即代码。
• 注册监听，是指将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。

常见事件如下：

事件	说明
加载事件	onload一张页面或一幅图像完成加载。
焦点事件	onblur失去焦点 onfocus元素获得焦点
选择和改变	onchange 域的内容被改变。 onselect 文本被选中。
点击事件	onclick单击事件 ondblclick双击事件
表单事件	onsubmit 确认按钮被点击。 onreset 重置按钮被点击。
键盘事件	onkeydown 某个键盘按键被按下。 onkeyup 某个键盘按键被松开。 onkeypress 某个键盘按键被按下并松开。
鼠标事件	onmousedown 鼠标按钮被按下。 onmouseup 鼠标按键被松开。 onmousemove 鼠标被移动。 onmouseover 鼠标移到某元素之上。 onmouseout 鼠标从某元素移开。

更多事件请查看：HTML DOM 事件

代码demo：点击事件和表格中的多选框

代码demo：点击事件失焦事件等和表单验证

七、“封装”定义好的CSS样式、JavaScript插件 和前端框架：Bootstrap

7.1 概念

Bootstrap 是基于 HTML 、CSS 、JavaScript 的一个前端开发的框架，来自 Twitter，是目前很受欢迎的前端框架。（框架：一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码。）

它简洁灵活，使得 Web 开发更加快捷：

• Bootstrap “封装”定义好了许多的 CSS 样式和 JavaScript 插件，我们开发人员可以直接使用这些样式和插件得到丰富的页面效果。
• 可用于开发响应式布局，使同一套页面可以兼容不同分辨率的设备。

7.2 入手Bootstrap ，简单好用不亏本！

Bootstrap 中文网网址：https://www.bootcss.com/

1. 下载zip文件并解压缩：点击网址 https://v3.bootcss.com/getting-started/#download ，选择“用于生产环境的 Bootstrap”下载得到zip文件，解压缩后得到同名文件夹，其下有三个文件夹css、fonts、js。
2. 将上述三个文件夹（css、fonts、js）复制到开发项目目录下，并根据自己的开发情况引入对应资源、给标签添加你需要的class属性。

注：在css/js文件夹中，含有‘min’字符的 .css / .js 文件是删除了回车、制表符的，是一个压缩文件，方便数据传输，但不便于查看和学习。

7.3 基本模板

基本模板：https://v3.bootcss.com/getting-started/#template ，下面是把 Bootstrap 资源放在自己的项目里并引入的基本模板代码：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>最简单的 Bootstrap 页面</title>
        <!-- 引入Bootstrap中的min(压缩)资源：CSS样式 -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
        <script src="js/jquery-3.2.1.min.js"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <h1>你好，世界！</h1>
    </body>
</html>

7.4 其他

1. CSS样式、JS插件

   • 全局 CSS 样式：按钮 、 图片 、表格 、表单

   • 组件：导航条、分页条

   • 插件：轮播图

2. 响应式布局

   • 响应式布局 可以使同一套页面兼容不同分辨率的设备。

   • 如何实现：依赖于栅格系统。（栅格系统 ，将一行平均分成12个格子，可以指定元素占几个格子。）

   • 实现步骤：

     Ⅰ. 定义容器，相当于 <table> 标签。容器分为 .container （两边有留白）和 .container-fluid （每一种设备都是100%宽度，没有留白）。

     Ⅱ. 定义行，相当于 <tr> 标签。 class="row" 。

     Ⅲ. 定义元素。指定该元素在不同设备上所占的格子数目。栅格参数

   • 注意：

     Ⅰ. 一行中如果格子数目超过12，则超出部分自动换行。

     Ⅱ. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。

     Ⅲ. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。