HTML

概述

  • 什么是 HTML

    HTML：Hyper Text Markup Language（超文本标记语言）

    超文本：流媒体、图片、视频…

    由大量的标签组成，每个标签都有开始标签和结束标签

    1
    2
    3
    4
    5
    <标签>
    <标签>
        <标签 属性名="属性值"></标签>
    </标签>
    </标签>

  • 开发：文本编辑器或开发工具，文件扩展名为 .html 或 .htm

  • 运行方式：浏览器打开 HTML 文件

  • 规范制定方：W3C（世界万维网联盟）

基本结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--
    1.这是 HTML 的注释
    2.HTML 不区分大小写，语法不严格
-->
<!--声明 HTML 5 语法，去掉就表示 HTML 4 语法-->
<!doctype html>
<!--根-->
<html>
<!--网页头部-->
<head>
    <title>网页标题</title>
</head>
<!--网页主体内容-->
<body>
    Hello,World!
</body>
</html>

第一个 HTML（理解原理）

在概述中，我们提到了 HTML 的运行方式为浏览器打开

下述为完整的过程：（记事本方式，也可以用开发工具，更加方便）

  1. 首先创建一个 .html 文件，用记事本打开，内容如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!doctype html>
    <html>
    <head>
        <title>标题</title>
    </head>
    <body>
        Hello,World!
    </body>
    </html>

  2. 保存并关闭，用浏览器打开 .html 文件，这样就完成了最简单的开发

基本标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
    <title>HTML 基本标签</title>
</head>
<body>
    <p>段落标签</p>

    <!--标题-->
    <h1>一级标题</h1>
    ...
    <h6>六级标题</h6>

    <!--换行（单标签）-->
    换<br/>行

    <!--水平线（单标签）-->
    <hr/>
    
    <!--预留格式-->
    <pre>for (int i = 0; ;) {
        ...
    }
    </pre>
    
    <strong>加粗</strong>  <b>另一种加粗</b>
    <em>倾斜</em>  <i>另一种倾斜</i>
    <del>删除字</del>
    <ins>插入字</ins>
    10<sup>2</sup>
    10<sub>m</sub>
    
    <!--字体标签-->
    <font color="red">字体标签</font>
</body>
</html>

实体符号

HTML 代码中需要用以下三种实体符号，表示小于号、大于号和空格：

  • 小于号 &lt;
  • 大于号 &gt;
  • 空格 &nbsp;

表格

  • 表格 <table></table>

  • 一行 <tr></tr>

  • 表头单元格 <th></th>

  • 一个单元格 <td></td>

例如，下边是一个 3行2列 的表格：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--
    align="center" 表格居中
    border="1px" 设置表格的边框为1像素宽度
    width="300px" 设置表格宽度为300像素
    height="20%" 设置表格高度为窗口高度的20%
-->
<table align="center" border="1px" width="300px" height="20%">
    <!--align 对齐方式-->
    <tr align="center">
        <!--th 比 td 多的是居中和加粗-->
        <th>1</th>
        <td align="center">2</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>x</td>
        <td>y</td>
    </tr>
</table>

合并单元格

  • rowspan：合并行

    例如：合并 b 和 y

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!--注意：rowspan 合并行时，要删掉下边的单元格-->
    <table border="1px" width="300px" height="20%">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>a</td>
            <td rowspan="2">b</td>
        </tr>
        <tr>
            <td>x</td>
            <!--<td>y</td>-->
        </tr>
    </table>

  • colspan：合并列

    例如：合并 1 和 2

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!--colspan 合并列时，对删除的列没有要求，因为两列都在同一行-->
    <table border="1px" width="300px" height="20%">
        <tr>
            <td colspan="2">1</td>
            <!--<td>2</td>-->
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>x</td>
            <td>y</td>
        </tr>
    </table>

表格结构标签

在 table 中不是必须的，这样写方便后期 JS 代码

  • 头 <thead></thead>
  • 体 <tbody></tbody>
  • 脚 <tfoot></tfoot>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table border="1px" width="300px" height="20%">
    <thead>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </thead>
    <tbody>
    	<tr>
            <td>a</td>
            <td>b</td>
    	</tr>
    </tbody>
    <tfoot>
        <tr>
            <td>x</td>
            <td>y</td>
        </tr>
    </tfoot>
</table>

图片

<img src="图像路径" />

属性 属性值 说明
src 图片路径 必须属性
width 像素 设置图像的宽度，只设置宽度时，高度等比例缩放
height 像素 设置图像的高度
title 文本 鼠标悬停时显示的信息
alt 文本 图片无法加载时的提示信息
border 像素 设置图片边框粗细

超链接

超链接的作用：

通过超链接，可以从浏览器向服务器发送请求

  • 浏览器向服务器发送请求（请求，request）
  • 服务器向浏览器发送数据（响应，response）

B / S 结构的系统，每个请求都对应一个响应

1
2
3
4
5
<!--
    href 是必须属性，用于指定链接目标的url地址
    target 用于指定链接页面的打开方式（_self 为默认值:当前窗口打开页面，_blank 在新窗口打开页面）
-->
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

列表

无序列表

1
2
3
4
5
6
7
8
9
<ul>
    <li>列表项1</li>
        <!--可以嵌套-->
        <ul>
            <li></li>
        </ul>
    <li>列表项2</li>
    ...
</ul>

有序列表

1
2
3
4
5
6
7
8
9
<ol>
    <li>列表项1</li>
        <!--可以嵌套-->
        <ol>
            <li></li>
        </ol>
    <li>列表项2</li>
    ...
</ol>

表单

表单用来收集用户的信息，最终将数据提交给服务器

格式：

  • action?name=value&name=value&…

    以上格式是 HTTP 协议规定的，必须以这种格式提交给服务器

表单域：

  • <form action="指定数据提交的地方" method="提交信息是否显示在地址栏(get / post)"></form>

表单元素（表单控件）：

  • <input type="属性值"/>

    属性值 说明
    button 普通按钮，不能提交表单
    submit 提交按钮，把表单数据提交到服务器
    reset 重置按钮，清空表单数据
    password 密码框
    radio 单选框，相同 name 可以实现多选一
    checkbox 复选框
    text 单行的输入框
    file 文件上传专用
    hidden 隐藏域，浏览器上不显示，但是设置 name 后会提交到服务器

    input 其他属性

    属性 属性值 说明
    name 用户自定义 input 元素的名字，有 name 数据才能提交
    value 用户自定义 按钮上显示的文本
    checked checked 首次加载时就被选中
    readonly readonly 只读，但是可以上传到服务器
    disabled disabled 只读，不能上传到服务器
    maxlength 整数 设置文本框可输入的字符数量

  • 下拉选项：<select></select>

    1
    2
    3
    4
    5
    6
    <select>
        <!--selected 表示默认选项-->
        <option>选项1</option>
        <option selected>选项2</option>
        ...
    </select>

  • 文本域：<textarea></textarea>

    文本域没有 value 属性

例：用户注册表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户注册表单</title>
</head>
<body>
    <!-- 
        用户名、密码、确认密码、性别、兴趣爱好
    -->
    <form action="http://localhost:8080/test" method="post">
        <input type="hidden" name="userid" value="111" />
        用户名
        <input type="text" name="username"/>
        <br />
        密码
        <input type="password" name="userpwd" />
        <br />
        确认密码
        <input type="password" />
        <br />
        性别
        <input type="radio" name="gender" />男
        <input type="radio" name="gender" />女
        <br />
        兴趣爱好
        <input type="checkbox" name="interest" value="sing" checked/>唱
        <input type="checkbox" name="interest" value="jump" />跳
        <input type="checkbox" name="interest" value="rap" />rap
        <input type="checkbox" name="interest" value="basketball" />篮球
        <br />
        学历
        <select name="grade">
        	<option value="zk">专科</option>
        	<option value="bk" selected>本科</option>
        	<option value="ss">硕士</option>
        </select>
        <br />
        简介
        <textarea name="introduce" id="" cols="20" rows="5"></textarea>
        <br />
        <input type="submit" value="注册" />
        <input type="reset" value="清空" />
    </form>
</body>
</html>

id 属性

在 HTML 文档中，任何元素（节点）都有 id 属性，id 属性是节点的唯一标识，所以同一 HTML 文档中 id 值不能重复

表单提交数据时，只和 name 有关，和 id 无关

  • id 作用：
    • JS 可以对 HTML 文档中任何节点进行增删改操作
    • id 让我们获取节点更方便

DOM(Document) 树：HTML 文档是树状结构，每个节点都有唯一的 id

div 和 span

div 和 span 是什么？有什么用？

  • div 和 span 都可以称为“图层”
  • 作用是保证页面可以灵活布局
  • 图层就是一个一个的盒子

最早的网页采用 table 布局，现在 div 布局使用最多，灵活布局

div 独占一行，span 不会

1
2
<div></div>
<span></span>

CSS

概述

什么是 CSS

  • CSS：Cascading Style Sheet（层叠样式表）

CSS 的作用

  • CSS 用来修饰 HTML 页面，设置 HTML 页面中的某些元素

HTML 是主体，CSS 依赖 HTML，新建的文件仍然是 .html 文件

使用方式

  1. 内联定义

    在标签内部使用 style 属性设置元素的 CSS 样式

    语法格式：<标签 style="样式名:样式值; 样式名:样式值; ..."></标签>

  2. 样式块

    在 head 标签中，使用 style 块

    语法格式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <head>
        <style type="text/css">
            选择器 {
                样式名:样式值;
                样式名:样式值;
                ...
            }
        </style>
    </head>

  3. 链入外部样式表文件（最常用的方式）

    将样式写入 .css 文件中，在需要的网页引入 css 文件，方便维护

    语法格式：<link type="text/css" rel="stylesheet" href="css文件的路径" />

选择器

  1. id 选择器

    语法格式

    1
    2
    3
    4
    5
    #id {
        样式名:样式值;
        样式名:样式值;
        ...
    }

  2. 标签选择器

    语法格式

    1
    2
    3
    4
    5
    标签名 {
        样式名:样式值;
        样式名:样式值;
        ...
    }

  3. 类选择器

    语法格式：注意 . 不能丢

    对应的标签设置 class 属性

    1
    2
    3
    4
    5
    .类名 {
        样式名:样式值;
        样式名:样式值;
        ...
    }

边框

1
2
3
4
5
6
7
8
9
10
11
选择器 {
    border: 1px solid red;
}

/* 等价于 */

选择器 {
    border-width: 1px;
    border-style: solid;
    border-color: red;
}

隐藏

1
2
3
选择器 {
    display: none;
}

字体

1
2
3
4
选择器 {
    font-size: 12px;
    color: red;
}

文本装饰

1
2
3
选择器 {
    text-decoration: none; /* 无装饰，例如可以取消超链接的下划线 */
}

鼠标悬停效果

1
2
3
选择器 {
    cursor: pointer; /* pointer 是小手，hand 也是，但是 hand 存在浏览器兼容问题 */
}

列表样式

1
2
3
选择器 {
    list-style-type: none; /* 去掉列表前的符号 */
}

定位

1
2
3
4
5
6
7
8
选择器 {
    position: absolute; /* 绝对定位 */
    /* 距离上下左右都是 10px */
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
}

JavaScript

概述

什么是 JavaScript

  • JavaScript 是运行在浏览器上的脚本语言，简称 JS
  • 由网景公司（NetScape）的布兰登艾奇开发，最初叫作 LiveScript，与 Sun 公司合作后，改名为 JavaScript
  • JS 与 Java 没有任何关系，只是语法上有些类似

JS 的作用

  • JS 可以使页面动态化，更具交互性

JS 与 JSP 的区别

  • JS：JavaScript（运行在浏览器上）
  • JSP：JavaServer Pages（隶属于 Java 语言，运行在 JVM 上）

JS 三部分

  1. ECMAScript：JS 的核心语法（ES 规范 / ECMA -262标准）

  2. DOM：Document Object Model（文档对象模型），HTML 文档被看作一颗 DOM 树

  3. BOM：Browser Object Model（浏览器对象模型）

    关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、地址栏等，都是 BOM 编程

DOM 和 BOM 的关系

  • BOM 包括 DOM
  • BOM 的顶级对象：window
  • DOM 的顶级对象：document

ECMAScript

HTML 中嵌入 JS 代码

JS 是一门事件驱动型的编程语言，依靠事件驱动，然后执行对应的程序

这里以 click 事件为例，下文有 [事件的介绍](## 事件)

  1. 第一种方式：作为标签属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!doctype html>
    <html>
    <head>
        <title>JS 嵌入 HTML 第一种方式</title>
    </head>
    <body>
        <!--
          1.onclick="JS 代码" 执行原理：
            页面打开时，JS 代码注册到 click 事件上，发生事件后，JS 代码被浏览器自动调用

          2.JS 弹窗：使用 JS 内置对象 window 调用 alert 函数，window.alert("弹窗消息")，window. 可以省略不写
        -->
        <input type="button" value="我是按钮" onclick="window.alert('hello js');" />       
        <input type="button" value="我是按钮" onclick="alert('hello js');" />        
        <input type="button" value="我是按钮3" onclick="alert('aaa'); alert('bbb'); alert('ccc');" />   
    </body>
    </html>

  2. 第二种方式：脚本块

    脚本块出现的次数和位置没有要求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>JS 嵌入 HTML 第二种方式</title>
    </head>
    <body>
        <!-- 第二种方式：脚本块 -->
        <script type="text/javascript">
          // 脚本块中的 JS 代码，会在打开页面时执行，遵循自上而下的顺序逐行执行
          // alter 函数会阻塞页面加载
          window.alert("Hello World");
        </script>
    </body>
    </html>

  3. 第三种方式：引入外部文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>JS 嵌入 HTML 第三种方式：引入外部文件</title>
    </head>
    <body>
        <script type="text/javascript" src="test.js"></script>
    </body>
    </html>

    根目录下 js 文件

    1
    window.alert("hello js!!");

变量、函数

声明和赋值

JS 是一种弱类型语言，没有编译阶段，一个变量可以随意赋值

  • 声明方式

    var 变量名;

  • 赋值

    变量名 = 值;

函数

由于 JS 为弱类型语言，函数不能重载，后声明的函数会覆盖之前的同名函数

语法格式：

1
2
3
4
5
6
7
8
9
//第一种方式
function 函数名(形参列表) {
    函数体;
}

//第二种方式
函数名 = function(形参列表) {
    函数体;
}

全局变量和局部变量

全局变量

  • 在函数体之外声明的变量
  • 生命周期：浏览器打开时声明，关闭时销毁

局部变量

  • 在函数体当中声明的变量，包括函数的形参
  • 生命周期：函数开始执行时，局部变量的内存空间开辟，函数执行结束后，内存空间释放

注意：

  1. 全局变量会一直耗费浏览器内存空间，尽量使用局部变量
  2. 当变量声明时没有使用 var 关键字，那么该变量为全局变量

数据类型

JS 中数据类型有原始类型和引用类型

  • 原始类型
    • Undefined
    • Number
    • String
    • Boolean
    • Null
  • 引用类型：Object 以及 Object 子类

typeof 运算符

typeof 可以在程序运行时动态获取变量的数据类型

  • 语法格式：typeof 变量名
  • 运算结果：”undefined”、”number”、”string”、”boolean”、”object”、”function”

在 JS 中比较字符串使用 ==

  • == 判断值

  • === 判断值和数据类型

Object

类的定义与函数定义格式一样

例如：定义一个学生类

1
2
3
4
5
function Student(sname, gender) {
    //属性
    this.sname = sname;
    this.gender = gender;
}

调用属性：

类.属性 或 类["属性"]

Object 类中有 prototype 属性，可以使用该属性动态扩展类

例如：添加一个 getUsername 方法

1
2
3
Object.prototype.getUsername = function() {
    return this.username;
}

事件

每个事件都对应一个事件句柄，事件句柄 = 事件前添加 on（onXXX ）

  • 比如 click 事件对应 onclick
  • 事件句柄以属性的形式存在

常用事件

  • 焦点
    • blur 失去焦点
    • focus 获得焦点
  • 鼠标点击
    • click 鼠标单击
    • dbclick 鼠标双击
  • 键盘
    • keydown 键盘按下
    • keyup 键盘弹起
  • 鼠标
    • mouseover 鼠标经过
    • mousemove 鼠标移动
    • mouseout 鼠标离开
    • mouseup 鼠标弹起
  • 表单
    • reset 重置
    • submit 提交
  • change 下拉列表选项改变，或文本框内容改变
  • select 文本被选定
  • load 页面加载完毕

注册事件的两种方式：

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 第一种方式，html 标签中 -->
<标签 onXXX="回调函数()"></标签>


<!-- 第二种方式，纯 js -->
<script type="text/javascript">
    //1.获取对象
    //document 为内置对象，代表整个 html 页面
    var obj = document.getElementById("对应的 id");
    //2.给对象的 事件句柄 属性赋值
    obj.事件句柄 = 回调函数; //这里的函数不加小括号
</script>

捕捉回车键

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS 捕捉回车键</title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function() {
            var username = document.getElementById("mytext");
            username.onkeydown = function(event) {
                if (event.keyCode == 13) {
                    alert("正在验证...");
                }
            }
        }
    </script>
    <input type="text" id="mytext">
</body>
</html>

void 运算符

语法：void(表达式)

运算原理：执行表达式，但不返回任何结果

javascript:void(0)，javascript: 作用是告诉浏览器后面是一段 JS 代码

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>void 运算符</title>
</head>
<body>
    <!--既保留超链接样式，同时用户点击超链接时执行一段 JS 代码，页面不跳转-->
    <a href="javascript:void(0)" onclick="window.alert('test code')">test</a>
</body>
</html>

控制语句

JS 中控制语句大部分和 Java 中相同，多了 for…in 和 with（了解即可）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//for...in
//1.遍历数组
var arr = [false, true, 1, 2, "abc", 3.14];
for (var i in arr) {
    alter(arr[i]);
}
//2.遍历对象属性
User = function(username, password) {
    this.username = username;
    this.password = password;
}
var u = new User("tom", 123);
for (var property in u) {
    alert(u[property]);
}

let 和 const 关键字

详细参考：菜鸟文档

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。

DOM

获取文本框 value

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOM编程-获取文本框的value</title>
    <script type="text/javascript">
        window.onload = function() {
        var btnElt = document.getElementById("btn");
        btnElt.onclick = function() {
            alert(document.getElementById("username").value);
        }
    }
    </script>
</head>
<body>
    <input type="text" id="username">
    <input type="button" value="获取文本框 value" id="btn">
</body>
</html>

innerHTML 和 innerText 操作div和span

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOM编程-innerHTML和innerText操作div和span</title>
    <style type="text/css">
        #div {
            background-color: aquamarine;
            width: 300px;
            height: 300px;
            border: 1px black solid;
            position: absolute;
            top: 100px;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        window.onload = function() {
            var btnElt = document.getElementById("btn");
            btnElt.onclick = function() {
                var divElt = document.getElementById("div");
                // divElt.innerHTML = "<font color='red'>innerHTML</font>";
                divElt.innerText = "<font color='red'>innerText</font>";
            }
        }
    </script>  
    <input type="button" value="设置 div 中的内容" id="btn">  
    <div id="div"></div>
</body>
</html>

正则表达式

正则表达式，Regular Expression，主要用于字符串格式匹配

常见的正则表达式符号

元字符

符号 匹配的字符
. 除换行以外的任意字符
\w 字母、数字、下划线或汉字
\s 任意空白符
\d 数字
\b 单词的开始或结束
^ 字符串的开始
$ 字符串的结束
\W 不是字母、数字、下划线或汉字
\S 不是空白符
\D 非数字
\B 不是单词开头或结束

限定符

符号 重复的次数
* >=0
+ >=1
? 0或1
{n} n
{n,} >=n
{n,m} n<=次数<=m

字符类

字符 含义
[1-9] 1到9的任意一个数字（次数是1次）
[A-Za-z0-9] A-Z、a-z、0-9中的任意1个字符
[A-Za-z0-9-] A-Z、a-z、0-9、- 中的任意1个字符
[^x] 除 x 以外的任意字符
[^aeiou] 除 aeiou 这几个字母以外的任意字符

一些简单的正则表达式

  • QQ 号：^[1-9][0-9]{4,}$
  • Email：^\w+([-+.]\w)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

创建正则表达式对象

1
2
3
4
5
6
7
8
9
10
11
12
//第一种创建方式
var regExp = /正则表达式/flags;

//第二种创建方式-内置支持类 RegExp
var regExp = new RegExp("正则表达式","flags");

/*
flags
  g:全局匹配
  i:忽略大小写匹配
  m:多行匹配（前边是正则表达式时，不能使用 m）
*/

正则表达式对象的 test() 方法

正则表达式对象.test(用户填写的字符串)

返回 true 或 false，表示字符串格式匹配成功或失败

正则检验邮箱

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则表达式匹配邮箱地址</title>
    <script type="text/javascript">
        window.onload = function() {
            //给按钮绑定 click
            document.getElementById("btn").onclick = function() {
                var email = document.getElementById("email").value;
                var emailRegExp = /^\w+([-+.]\w)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                var ok = emailRegExp.test(email);
                if (!ok) {
                    document.getElementById("emailError").innerText = "邮箱地址不合法";
                }
            }
            //给文本框绑定 focus
            document.getElementById("email").onfocus = function() {
                document.getElementById("emailError").innerText = "";
            }
        }
    </script>
</head>
<body>
    <input type="text" id="email">
    <span id="emailError" style="color: red; font-size: 12px;"></span>
    <br>
    <input type="button" value="检验邮箱格式" id="btn">
</body>
</html>

综合案例：表单验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单验证</title>
    <style type="text/css">
        span {
            color: gray;
            font-size: 12px;
        }
    </style>
    <script type="text/javascript">
        /*
            (1)用户名不能为空
            (2)用户名必须为6-14位
            (3)用户名只能由数字和字母组成
            (4)密码和确认密码一致，邮箱地址合法
            (5)统一失去焦点验证
            (6)错误提示信息在span标签中提示，并且要求字体12号，红色
            (7)文本框再次获得焦点后，清空错误提示信息，文本框中数据不合法时，清空文本框
            (8)最终表单中所有项均合法方可提交
        */
        window.onload = function() {
            //用户名
            var usernameElt = document.getElementById("username");
            var usernameInfo = document.getElementById("usernameInfo");
            //click
            usernameElt.onclick = function() {
                usernameInfo.innerText = "请输入6-14位（数字和字母）";
            }
            //blur
            usernameElt.onblur = function() {
                var username = usernameElt.value;
                var usernameRegExp = /^[A-Za-z0-9]{6,14}$/;
                var checkUsername = usernameRegExp.test(username);
                if (checkUsername) {
                    usernameInfo.innerText = "";
                } else {
                    usernameInfo.innerHTML = "<font color='red'>用户名不合法!</font>";
                }
            }
            //focus
            usernameElt.onfocus = function() {
                if (usernameInfo.innerText != "") {
                    usernameElt.value = "";
                }
            }
            //密码
            var pwdElt = document.getElementById("password");
            var pwdInfo = document.getElementById("pwdInfo");
            //click
            pwdElt.onclick = function() {
                pwdInfo.innerText = "只能由字母、数字和下划线组成";
            }
            //blur
            pwdElt.onblur = function() {
                pwdInfo.innerText = "";
                var pwd = pwdElt.value;
                var pwdRegExp = /^[A-Za-z0-9_]+$/;
                var checkPwd = pwdRegExp.test(pwd);
                if (checkPwd) {
                    pwdInfo.innerText = "";
                } else {
                    pwdInfo.innerHTML = "<font color='red'>密码不合法!</font>";
                }
            }
            //focus
            pwdElt.onfocus = function() {
                if (pwdInfo.innerText != "") {
                    pwdElt.value = "";
                }
            }
            //确认密码
            var pwd2Elt = document.getElementById("password2");
            var pwdInfo2 = document.getElementById("pwdInfo2");
            //click
            pwd2Elt.onclick = function() {
                pwdInfo2.innerText = "输入与上方相同的密码";
            }
            //blur
            pwd2Elt.onblur = function() {
                var pwd = pwdElt.value;
                var pwd2 = pwd2Elt.value;
                if (pwd === pwd2) {
                    pwdInfo2.innerText = "";
                } else {
                    pwdInfo2.innerHTML = "<font color='red'>密码不一致!</font>";
                }
            }
            //focus
            pwd2Elt.onfocus = function() {
                if (pwdInfo2.innerText != "") {
                    pwd2Elt.value = "";
                }
            }
            //邮箱
            var emailElt = document.getElementById("email");
            var emialInfo = document.getElementById("emailInfo");
            //blur
            emailElt.onblur = function() {
                var email = emailElt.value;
                var emailRegExp = /^\w+([-+.]\w)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                var checkEmail = emailRegExp.test(email);
                if (checkEmail) {
                    emialInfo.innerText = "";
                } else {
                    emialInfo.innerHTML = "<font color='red'>请输入正确的邮箱!</font>"
                }
            }
            //focus
            emailElt.onfocus = function() {
                if (emialInfo.innerText != "") {
                    emailElt.value = "";
                }
            }  
            //提交按钮绑定 click
            var submitElt = document.getElementById("submitBtn");
            submitElt.onclick = function() {
                //自动触发事件
                usernameElt.focus();
                usernameElt.blur();
                pwdElt.focus();
                pwdElt.blur();
                pwd2Elt.focus();
                emailElt.focus();
                emailElt.blur();  
                //所有项均合法时提交表单
                if (usernameInfo.innerText == "" && pwdInfo.innerText == "" && pwdInfo2.innerText == "" && emialInfo.innerText == "") {
                //获取表单对象
                var userFormElt = document.getElementById("userForm");
                //在这里设置 action
                userFormElt.action = "http://localhost:8080/a";
                //提交表单
                userFormElt.submit();
                }
            }
        }
    </script>
</head>
<body>
    <form id="userForm" method="get">
        用户名<input type="text" name="username" id="username">
        <span id="usernameInfo"></span>
        <br>
        密码<input type="password" name="password" id="password">
        <span id="pwdInfo"></span>
        <br>
        确认密码<input type="password" id="password2">
        <span id="pwdInfo2"></span>
        <br>
        邮箱<input type="text" name="email" id="email">
        <span id="emailInfo"></span>
        <br>
        <input type="button" value="注册" id="submitBtn">
        <input type="reset" value="重置">
    </form>
</body>
</html>

复选框全选与取消全选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>复选框全选与取消全选</title>
    <script type="text/javascript">
        window.onload = function() {
            var checksElt = document.getElementById("firstChk");
            //根据name获取元素
            var hobbies = document.getElementsByName("hobby");
            var nums = hobbies.length;
            //为全选按钮绑定 click 事件，如果点击则遍历所有
            checksElt.onclick = function() {
                for (var i = 0; i < nums; i++) {
                    hobbies[i].checked = checksElt.checked;
                }
            }
            /*
              如果复选框全选中，那么全选自动选上
              遍历hobbies，为每个复选框绑定click
            */
            for (var i = 0; i < nums; i++) {  
                hobbies[i].onclick = function() {
                    var count = 0;
                    for (var i = 0; i < nums; i++) {
                        if (hobbies[i].checked) {
                            count++;
                        }
                    }
                    checksElt.checked = (count == nums);
                }
            }
        }
    </script>
</head>
<body>
    <input type="checkbox" id="firstChk">全选<br>
    <input type="checkbox" name="hobby" id="sing">唱<br>
    <input type="checkbox" name="hobby" id="jump">跳<br>
    <input type="checkbox" name="hobby" id="rap">rap<br>
    <input type="checkbox" name="hobby" id="basketball">篮球<br>
</body>
</html>

获取下拉列表的value

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>获取下拉列表的value</title>
</head>
<body>
    <select id="hobbies" onchange="alert(this.value)">
        <option>---请选择你的爱好---</option>
        <option value="sing">唱</option>
        <option value="jump">跳</option>
        <option value="rap">rap</option>
        <option value="basketball">篮球</option>
    </select>
</body>
</html>

显示系统时间

JS 中内置支持类：Date，可以用来获取时间和日期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>显示系统时间</title>
</head>
<body>
    <script type="text/javascript">
        function displayTime() {
            var time = new Date();
            var strTime = time.toLocaleString();
            document.getElementById("time").innerText = strTime;
        }
        
        function start() {
            s = window.setInterval("displayTime()", 1000);
        }
        
        function stop() {
            window.clearInterval(s);
        }
    </script>
    <input type="button" value="显示系统时间" onclick="start()">
    <input type="button" value="停止系统时间" onclick="stop()">
    <br>
    <div id="time"></div>
</body>
</html>

BOM

BOM 编程中，window 是顶级对象，代表浏览器窗口

window 常用方法：

方法 说明
open() 打开新页面
close() 关闭页面
alert() 弹窗
confirm() 确认
history.back() 或 history.go(-1) 后退
history.go(1) 前进

设置地址栏上的 url

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>设置地址栏上的url</title>
</head>
<body>
    <script type="text/javascript">
        function goGitHub() {
            //href 可以省略
            window.location.href = "https://www.github.com";
        }
    </script>
    <input type="button" value="点击前往 GitHub" onclick="goGitHub()">
</body>
</html>

非顶级窗口设置为顶级窗口

js代码：

1
2
3
if(window.top != window.self) {
    window.top.location = window.self.location;
}

完整代码：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>非顶级窗口设置为顶级窗口</title>
</head>
<body>
    <!--iframe 内联框架，可以将一个 HTML 页面嵌入到当前页面-->
    <iframe src="03.html" height="500px" width="500px"></iframe>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我是子窗口</title>
</head>
<body>
    <script type="text/javascript">
        function setTop() {
            if (window.top != window.self) {
              window.top.location = window.self.location;
            }
        }
    </script>
    <input type="button" value="将非窗口设置为顶级窗口" onclick="setTop()">
</body>
</html>

总结：B->S发送请求的几种方法

  • 表单 form 的提交
  • 超链接
  • document.location
  • window.location
  • window.open(“url”)
  • 浏览器地址栏输入 url，回车

JSON 对象

JavaScript Object Notation，JavaScript 对象标记，简称 JSON

JSON 是一种标准轻量级的数据交换格式，特点：体积小，易解析

实际开发中使用最多的两种数据交换格式：

  • JSON
  • XML（体积大，难解析，但是语法严谨，适合银行等系统）

语法格式

1
2
3
4
5
6
var jsonObj = {
    "属性名": "属性值",
    "属性名": "属性值",
    "属性名": "属性值",
    ......
};

创建对象和访问属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSON 对象</title>
</head>
<body>
    <script type="text/javascript">
        //创建 JSON 对象
        var student = {
            "sno": "001",
            "sname": "tom",
            "ssex": "man"
        };
        //访问 JSON 对象属性
        alert(student.sno + "," + student.sname + "," + student.ssex);
        //和之前对比
        Student = function(sno, sname, ssex) {
            this.sno = sno;
            this.sname = sname;
            this.ssex = ssex;
        }
        var student2 = new Student("002", "mike", "man");
        alert(student2.sno + "," + student2.sname + "," + student2.ssex);
    </script>
</body>
</html>

复杂一些的 JSON 对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>复杂一些的 JSON 对象</title>
    </head>
    <body>
        <script type="text/javascript">
            var student = {
                "name": "tom",
                "address": {
                    "city": "北京",
                    "street": "朝阳区"
                },
                "hobby": ["sing", "jump", "rap", "basketball"]
            };  
            alert(student.name + "居住在" + student.address.city);
        </script>
    </body>
</html>

练习：自行设计 JSON 格式，可以描述整个班级每个同学的信息，以及总人数

1
2
3
4
5
6
7
8
9
10
11
var jsonData = {
    "total": 2,
    "students": {
        "name": "tom",
        "gender": man
    },
    {
        "teacher": "jack",
        "gender": man
    }
};

eval 函数

eval 函数作用：将字符串作为一段 JS 代码解释并执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>eval 函数</title>
</head>
<body>
    <script type="text/javascript">
        var fromJava = "{\"name\": \"tom\", \"sex\": \"man\"}";
        window.eval("var jsonObj = " + fromJava);
        alert(jsonObj.name + "," + jsonObj.sex);
        alert(jsonObj["name"] + "," + jsonObj["sex"]);
    </script>
</body>
</html>

设置 table 的 tbody

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>设置 table 的 tbody</title>
    <script type="text/javascript">
        var data = {
            "total": 2,
            "students": [
                {"sno": 001, "sname": "tom", "sex": "man"},
                {"sno": 002, "sname": "jack", "sex": "man"}
            ]
        };  
        window.onload = function() {
            var displayElt = document.getElementById("displayBtn");
            displayElt.onclick = function() {
                var students = data.students;
                var html = "";
                for (var i = 0; i < students.length; i++) {
                    var student = students[i];
                    html += "<tr>";
                    html += "<td>" + student.sno + "</td>";
                    html += "<td>" + student.sname + "</td>";
                    html += "<td>" + student.sex + "</td>";
                    html += "</tr>";
                }
                document.getElementById("stubody").innerHTML = html;
                document.getElementById("count").innerHTML = data.total;
            }
        }
    </script>
</head>
<body>
    <input type="button" value="显示学生信息" id="displayBtn">
    <br>
    <br>
    <table border="1px">
        <tr>
            <th colspan="3">学生信息表</th>
        </tr>
        <tr>
            <td>学生编号</td>
            <td>学生姓名</td>
            <td>学生性别</td>
        </tr>
        <tbody id="stubody">
        </tbody>
    </table>
    共<span id="count">0</span>条记录
</body>
</html>