JavaWeb基础

发布日期: 2022-02-15

Java Web 从入门到退坑 —— 第三章 JavaScript 语言

By -gregPerlinLi-

1. JavaScript 介绍

JavaScript语言诞生主要是为了完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码

JS是Netscape网景公司的产品，最早取名为LiveScript；为了吸引更多的Java程序员，更名为JavaScript。

注意⚠️：JS是弱类型，Java是强类型；

弱类型就是类型可变，强类型就是在定义变量的时候，类型已确定，且不可变。

示例：

Java：

int i = 12;   //定义整形，且后面不可变

JavaScript

var i;                //定义变量
i = 12；             //数值类型
i = "abc";        //字符串类型

特点：

1. 交互性（它可以做的就是信息的动态交互）

2. 安全性（不允许直接访问本地硬盘）

3. 跨平台性（只要是可以解析JS的浏览器都可以执行，和平台无关）

2. JavaScript 和 HTML 代码的结合方式

2.1. 第一种方式

只要在<head>标签或者是<body>标签中，使用<script>标签来书写JavaScript代码

格式如下：

<script type="text/javascript">
        alert("Hello JavaScript!");
</script>

2.2. 第二种方式

使用<script>标签引入单独的JavaScript代码文件

使用如下HTML标签导入JavaScript 代码文件

<script type="text/javascript" src="./JavaScript.js"></script>

src属性专门用来引入JS文件路径（可以是相对，也可以是绝对）

注意⚠️：<script>标签可以用来定义JS代码，也可以用来引入JS文件；但是，两个功能只能二选一使用，不能同时使用两个功能

3. 变量

变量是可以存放某些值的内存的命名。

JavaScript 的变量类型：

数值类型： number 包括 int short long float double

字符串类型： string

对象类型： object

布尔类型： boolean

函数类型： function

JavaScript 里面的特殊的值：

undefined 未定义，所有JS变量未赋予初始值时候，默认值都是undefined。

null 空值

NaN 全称为Not a number，即非数字非数值。

JS 中定义变量的格式：

var name;
var name = value;

4. 运算

4.1. 关系运算

常用的关系运算符和JAVA的基本一致

等于： == 等于是简单的字面值的比较

全等于： === 全等于除了做字面的比较之外，还要做类型的比较

4.2. 逻辑运算

且运算： &&

或运算： ||

取反运算： !

在 JavaScript 语言中，所有的变量，都可以作为一个boolean类型的变量去使用。

注意⚠️：0, null, undefined, ""(空串) 都会认为是false

&& 且运算

有两种情况：

1. 当表达式全为真的时候，返回最后一个表达式的值。

2. 当表达式中，有一个为假的时候，返回第一个为假的表达式的值。

|| 或运算

有两种情况：

1. 当表达式全为假时，返回最后一个表达式的值。

2. 只要有一个表达式的值为真，就会返回第一个为真的值。

并且 && 与运算和 || 或运算有短路，也就是说，当这个 && 或 || 运算有结果了之后，后面的表达式不再执行

5.数组（重点）

JS中，数组的定义格式；

var arrayName = [];                                        // 空数组
var arrayName = [1, 'abc', true];            // 定义数组同时赋值元素

JavaScript中的数组，只要通过数值下标赋值，那么最大的下标值，就会自动的给数组作扩容操作

数组的遍历

var arr = [];                                                    // 定义一个空数组
arr[0] = 12;                                                    // 数组赋值
arr[1] = 'abc';
arr[2] = true;

for ( var i = 0; i < arr.length; i++ ) &#123;
  alert(arr[i]);                                            // 遍历数组
&#125;

6. 函数（重点）

6.1. 函数的两种定义方式

第一种：可以使用function关键字来定义函数。

使用格式如下

function funName(Formal_parameter_list) &#123;
  function body;
&#125;

注意⚠️：函数调用后才会被执行！

在Javascript语言中定义带有返回值的函数，只需在function内直接使用return语句返回即可

第二种：

使用格式如下

var funName = function(Formal_parameter_list) &#123; 
  function body;
&#125;

注意⚠️：在Java中函数允许重载，但是在JS中函数的重载会直接覆盖掉上一次的定义

6.2. 函数的 `arguments` 隐形参数（只在 `function` 函数内）

在function函数中不需要定义，但却可以直接用来获取所有参数的变量叫做隐形参数。

隐形参数特别像Java基础的可变长参数：

public void funName(Object...args) &#123;
  function body;
&#125;

可变长参数其实就是一个数组，而JS中的隐形参数和Java中的可变长参数一样，操作类似。

示例：

function sumFunc(num1, num2) &#123;
        var sum = 0;
        for (var i = 0; i < arguments.length; i++ ) &#123;
            if ( typeof(arguments[i]) == "number" ) &#123;
                sum = sum + arguments[i];
        &#125;
        &#125;
        return sum;
&#125;

alert("Sum is: " + sumFunc(12, 13, 45, "abc", 33, 43, 12));

7. JavaScript 中的自定义对象（拓展内容）

7.1. `Object`形式的自定义对象

对象的定义：

var varName = new Object();                // 对象示例（空对象）
varName.propName = value;                    // 定义一个属性
varName.funcName = function() &#123;&#125;    // 定义一个函数

对象的访问：

varName.propName;
varName.funcName();

7.2. `{}`花括号形式的自定义对象

对象的定义：

var varName = &#123;                                        // 对象示例（空对象）
      propName: value,                            // 定义一个属性
      propName: value,                            // 注意：每一组属性/函数之间用逗号","隔开，最后一个不用加
      funcName: function() &#123;&#125;
&#125;;

8. JavaScript 中的事件

8.1. 什么是事件

事件是电脑输入设备与页面进行交互的响应，称之为事件。

8.2. 常用的事件

onload 加载完成事件：页面加载完成之后，常用于页面JS代码初始化操作。

onclick 单击事件：常用于按钮的点击响应操作。

onblur 失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法。

onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作。

onsubmit 表单提交事件：常用于表单提交前，验证所有表单是否合法。

8.3. 事件的注册（绑定）

事件的注册（绑定）就是告诉浏览器，当事件响应后要执行哪些操作代码。

事件的注册（绑定）又分为静态注册和动态注册两种：

静态注册事件：通过HTML标签的事件属性直接赋予事件响应后的代码

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Static register</title>
    <script type="text/javascript">
        // The method of onload event
        function onloadFunc() &#123;
            alert("Static register onload event!");
        &#125;
    </script>
</head>
<!-- static register onload events
    Onload event is the event triggered automatically after the browser parses the page
-->
<body onload="onloadFunc()">
        Example
</body>
</html>

动态注册事件：是指先通过JS代码得到标签的dom Object，然后再通过dom Object.eventName = function() {}这种形式赋予事件响应后的代码

动态注册基本步骤：

1. 获取标签对象。

2. tagObject.eventName = function() {}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Onclick event</title>
    <script type="text/javascript">
        // dynamic register
        window.onload = function () &#123;
            // 1. get the tag object
            /*
            * document is an object provided by JavaScript,
            * it represents all contents in the page
            * getElementById: Obtain the tag object through ID property
            * */
            var btnObj = document.getElementById("btn01");
            // alert(btnObj); // [object HTMLButtonElement]
            // 2. use tagObject.eventName = function() &#123;&#125;
            btnObj.onclick = function () &#123;
                alert("Dynamic register onload event!");
            &#125;
        &#125;
    </script>
</head>
<body>
    <!-- dynamic register onclick event -->
    <button id="btn01">Button 2</button>
</body>
</html>

8.4. `onload` 加载完成事件

示例代码（动态加载）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic register</title>
    <script type="text/javascript">
        // dynamic register onload event
          // Onload event is the event triggered automatically after the browser parses the page
        window.onload = function () &#123;
            alert("Dynamic register onload event!");
        &#125;
    </script>
</head>
<body>
        Example
</body>
</html>

8.5. `onclick` 单击事件

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Onclick event</title>
    <script type="text/javascript">
        // static register
        function onclickFunc() &#123;
            alert("Static register onload event!");
        &#125;

        // dynamic register
        window.onload = function () &#123;
            // 1. get the tag object
            /*
            * document is an object provided by JavaScript,
            * it represents all contents in the page
            * getElementById: Obtain the tag object through ID property
            * */
            var btnObj = document.getElementById("btn02");
            // alert(btnObj); // [object HTMLButtonElement]
            // 2. use tagObject.eventName = function() &#123;&#125;;
            btnObj.onclick = function () &#123;
                alert("Dynamic register onload event!");
            &#125;
        &#125;
    </script>
</head>
<body>
    <!-- static register onclick event -->
    <button onclick="onclickFunc();" id="btn01">Button 1</button>
    <!-- dynamic register onclick event -->
    <button id="btn02">Button 2</button>
</body>
</html>

8.6. `onblur` 失去焦点事件

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onblur event</title>
    <script type="text/javascript">
        // static register onblur event
        function onblurFunc() &#123;
            /*
            * console is console object which provided by JavaScript,
            * designed to print output to the browser's console，
            * for test use
            * log is a method to print
            * similar to System.out.println() in Java
            * */
            console.log("Static register onblur event");
        &#125;

        // dynamic register onblur event
        window.onload = function () &#123;
            // 1. get the tag object
            var passwordObj = document.getElementById("password")
            // alert(passwordObj); //[object HTMLInputElement]
            // 2. use tagObject.eventName = function() &#123;&#125;;
            passwordObj.onblur = function () &#123;
                console.log("Dynamic register onblur event");
            &#125;
        &#125;
    </script>
</head>
<body>
        <label>
            User name:
            <input type="text" onblur="onblurFunc();" id="userName"/><br/>
            Password:
            <input type="password" id="password"/><br/>
        </label>
</body>
</html>

8.7. 内容发生改变事件

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Onchange event</title>
    <script type="text/javascript">
        function onchangeFunc() &#123;
            alert("The user is changed");
        &#125;

        window.onload = function () &#123;
            // 1. get the tag object
            var genderObj = document.getElementById("gender");
            // alert(genderObj); //[object HTMLSelectElement]
            // 2. use tagObject.eventName = function() &#123;&#125;;
            genderObj.onchange = function () &#123;
                alert("The gender is changed");
            &#125;
        &#125;
    </script>
</head>
<body>
    <label>
        Please select a user:
        <!-- static register onchange event -->
        <select onchange="onchangeFunc();">
            <option selected="selected" id="user">Please select a user</option>
            <option>Xiao Ming</option>
            <option>Xiao Hong</option>
            <option>Xiao Jun</option>
            <option>Xiao Qing</option>
            <option>Xiao Qiang</option>
        </select>
        <br/>
        Please select a gender:
        <!-- dynamic register onchange event -->
        <select id="gender">
            <option selected="selected">Please select a gender</option>
            <option>Male</option>
            <option>Female</option>
            <option>Private</option>
        </select>
    </label>
</body>
</html>

8.8. `onsubmit` 表单提交事件

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Onsubmit event</title>
    <script type="text/javascript">
        // static register onsubmit event
        function onsubmitFunc() &#123;
            // verify that all form items are legal, block the form submission if there is one illegal place
            alert("Static register onsubmit event, and there is an illegal place");
            // return false can block the submission of the form
            return false;
        &#125;

        // dynamic register onsubmit event
        window.onload = function () &#123;
            // 1. get the tag object
            var formObj = document.getElementById("form2");
            // alert(formObj); //[object HTMLFormElement]
            // 2. use tagObject.eventName = function() &#123;&#125;;
            formObj.onsubmit = function () &#123;
                // verify that all form items are legal, block the form submission if there is one illegal place
                alert("Dynamic register onsubmit event, and there is no illegal place");
                // return false can block the submission of the form
                return true;
            &#125;
        &#125;
    </script>
</head>
<body>
    <!-- return is to block the submission of the illegal form -->
    <form action="http://loaclhost:8080" method="get" onsubmit="return onsubmitFunc();" id="form1">
        <input type="submit" value="Static register" />
    </form>

    <form action="http://loaclhost:8080" id="form2">
        <input type="submit" value="Dynamic register" />
    </form>
</body>
</html>

9. `DOM` 模型（重点）

9.1. 什么是 `DOM` 模型

DOM 全称是 Document Object Model 文档对象模型

就是把文档中的标签，属性，文本，转换成对象来管理。

9.2. `Document`对象（重点）

示例代码

<html>
      <head>
          <title>My title</title>
      </head>
  
      <body>
          <a href="http://localhost:8080">My link</a>
          <h1>
              My header
          </h1>
      </body>
</html>

document文档树的内存结构

graph TD
文档---根元素:html
根元素:html---元素:head
根元素:html---元素:body
元素:head---元素:title
元素:body---元素:a
元素:a--->属性:href
元素:body---元素:hl
元素:title---文本:MyHtml.html
元素:a---文本:MyLink
元素:hl---文本:MyTitle

Document 对象理解

1. Document 它管理了所有的HTML文档内容。

2. Document 它是一种树结构的文档，有层级关系。

3. 它使得所有的标签对象化。

4. 我们可以通过 document 访问所有对象的标签。

什么是对象化

举例：有一个人的年龄：18岁，性别：男，名字：李华

如何将这个人的信息对象化?

class Person&#123;
      private int age;
      private String gender;
      private String name;
&#125;

那HTML标签如何对象化？

<body>
      <div id="div01">div01</div>
</body>

模拟对象化，相当于：

class Dom&#123;
      private String id;                        // id属性
      private String tagName;                // 表示标签名
      private Dom parentName;                // 父对象
      private List<Dom> children;        // 子对象
      private String innerHTML;            // 起始标签和结束标签中间的内容
&#125;

9.3. `Document` 对象中的方法介绍

document.getElementById(elementId);

通过标签的 id 属性查找标签的 dom 对象，elementId 是标签的 id 属性值

document.getElementByName(elementName);

通过标签的 name 属性查找标签的 dom 对象，elementName 是标签的 name 属性值

document.getElementByTagName(tagName);

通过标签名查找标签的 dom 对象 tagName 是标签名

document.createElement(tagName);

方法，通过给定的标签名，创建一个对象，tagName 是要创建的标签名

注意⚠️：

document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询

如果没有 id 属性，则优先使用 getElementByName 方法进行查询

如果 id 属性和 name 都没有，最后再用 getElementByTagName 方法进行查询

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

9.4. 正则表达式（`RegExp`）对象（选学）

RegExp 对象用于规定在文本中检索的内容

具体教程可点击此

9.4.1. 什么是 `RegExp`

RegExp 是正则表达式的缩写，正则表达式是描述字符模式的对象。

正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

当你在检索文本是，可以使用一种模式来描述要检索的内容，RegExp 就是这种表达式。

简单的模式可以是一个单独的字符，而更复杂的模式则是包括了更多的字符，并可用于解析、格式检查、替换等等。

你可以规定字符串中的检索位置，以及要检索的字符类型，等等。

9.4.2. 定义`RegExp`

RegExp 对象用于储存检索模式。

通过 new 关键词来定义 RegExp 对象，以下代码定义了名为 patt1 的 RegExp 对象，其模式是 "e":

var patt1 = new RegExp("e");

当你使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。

9.4.3. `RegExp` 语法

var patt=new RegExp(pattern,modifiers);

或者更简单的方式:

var patt=/pattern/modifiers;

pattern（模式）描述了表达式的模式

modifiers（修饰符）用于指定全局匹配、区分大小写的匹配和多行匹配

注意⚠️：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。比如，以下是等价的：

var re = new RegExp("\\w+");
var re = /\w+/;

9.4.4. 修饰符

修饰符用于执行区分大小写和全局匹配:

修饰符	描述
`i`	执行对大小写不敏感的匹配。
`g`	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
`m`	执行多行匹配。

9.4.5. 方括号

方括号用于查找某个范围内的字符：

表达式	描述
`abc`	查找方括号之间的任何字符。
`^abc`	查找任何不在方括号之间的字符。
`[0-9]`	查找任何从 0 至 9 的数字。
`[a-z]`	查找任何从小写 a 到小写 z 的字符。
`[A-Z]`	查找任何从大写 A 到大写 Z 的字符。
`[A-z]`	查找任何从大写 A 到小写 z 的字符。
`[adgk]`	查找给定集合内的任何字符。
`[^adgk]`	查找给定集合外的任何字符。
`(red	blue

9.4.6. 元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
`.`	查找单个字符，除了换行和行结束符。
`\w`	查找数字、字母及下划线（单词字符）。
`\W`	查找非单词字符。
`\d`	查找数字。
`\D`	查找非数字字符。
`\s`	查找空白字符。
`\S`	查找非空白字符。
`\b`	匹配单词边界。
`\B`	匹配非单词边界。
`\0`	查找 `NULL` 字符。
`\n`	查找换行符。
`\f`	查找换页符。
`\r`	查找回车符。
`\t`	查找制表符。
`\v`	查找垂直制表符。
`\xxx`	查找以八进制数 `xxx` 规定的字符。
`\xdd`	查找以十六进制数 `dd` 规定的字符。
`\uxxxx`	查找以十六进制数 `xxxx` 规定的 `Unicode` 字符。

9.4.7. 量词

量词	描述
`n+`	匹配任何包含至少一个 `n` 的字符串。例如，`/a+/` 匹配 `"candy"` 中的 `"a"`，`"caaaaaaandy"` 中所有的 `"a"`。
`n*`	匹配任何包含零个或多个 `n` 的字符串。例如，`/bo*/` 匹配 `"A ghost booooed"` 中的 `"boooo"`，`"A bird warbled"` 中的 `"b"`，但是不匹配 `"A goat grunted"`。
`n?`	匹配任何包含零个或一个 `n` 的字符串。例如，`/e?le?/` 匹配 `"angel"` 中的 `"el"`，`"angle"` 中的 `"le"`。
`n{X}`	匹配包含 `X` 个 `n` 的序列的字符串。例如，`/a{2}/` 不匹配 `"candy,"` 中的 `"a"`，但是匹配 `"caandy,"` 中的两个 `"a"`，且匹配 `"caaandy."` 中的前两个 `"a"`。
`n{X,}`	`X` 是一个正整数。前面的模式 `n` 连续出现至少 `X` 次时匹配。例如，`/a{2,}/` 不匹配 `"candy"` 中的 `"a"`，但是匹配 `"caandy"` 和 `"caaaaaaandy."` 中所有的 `"a"`。
`n{X,Y}`	`X` 和 `Y` 为正整数。前面的模式 `n` 连续出现至少 `X` 次，至多 `Y` 次时匹配。例如，`/a{1,3}/` 不匹配 `"cndy"`，匹配 `"candy,"` 中的 `"a"`，`"caandy,"` 中的两个 `"a"`，匹配 `"caaaaaaandy"` 中的前面三个 `"a”`。注意⚠️，当匹配 `"caaaaaaandy"` 时，即使原始字符串拥有更多的 `"a"`，匹配项也是 `"aaa"`。
`n$`	匹配任何结尾为 `n` 的字符串。
`^n`	匹配任何开头为 `n` 的字符串。
`?=n`	匹配任何其后紧接指定字符串 `n` 的字符串。
`?!n`	匹配任何其后没有紧接指定字符串 `n` 的字符串。

9.4.8. `RegExp` 对象方法

方法	描述
`test()`	检索字符串中指定的值，返回 `true` 或 `false`。
`exec()`	检索字符串中指定的值，返回找到的值，并确定其位置。
`compile()`	在 1.5 版本中已废弃，编译正则表达式。
`toString()`	返回正则表达式的字符串。

9.4.9. `test()` 的用法

test() 方法检索字符串的指定值，返回值是 true 或 false。

举例

var patt1 = new RegExp("e");
document.write(patt1.test("The best things in life are free"));

由于该字符串中存在字母 "e"，以上代码的输出内容将是：

true

9.4.10. `exec()` 的用法

exec() 方法检索字符串中的指定值，返回值是被找到的值，如果没有发现匹配，则返回 null。

举例1:

var patt1 = new RegExp("e");
document.write(patt1.exec("The best things in life are free"));

由于该字符串中存在字母 "e"，以上代码的输出内容将是：

举例2:

你可以向 RegExp 对象添加第二个参数，以设定检索。例如：如果需要找到某个字符的所有存在，则可以使用 "g" 参数

在使用 "g" 参数时，exec() 的工作原理如下

1. 找到第一个 e，并储存其位置

2. 如果再次运行 exec()，则从储存的位置开始检索，并找到下一个 "e"，并储存其位置

var patt1 = new RegExp("e", "g");
do &#123;
      result = patt1.exec("The best things in life are free");
      document.write(result);
&#125; while( result != null );

由于该字符串中有6个字母 "e"，以上代码的输出内容将是：

eeeeeenull

9.4.11. `compile()` 的用法

compile() 方法用于改变 RegExp。

compile() 既可以改变检索模式，也可以添加或删除第二个参数。

举例：

var patt1 = new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));

由于该字符串中有 "e" 而没有 "d"，以上代码的输出内容将是：

truefalse

9.4.12. `toString()` 的用法

返回正则表达式的字符串值：

举例：

var patt = new RegExp("RUNOOB", "g");
var res = patt.toString();

以上代码的输出内容将是：

/RUNOOB/g

9.4.13. `RegExp` 对象属性

属性	描述
`constructor`	返回一个函数，该函数是一个创建 `RegExp` 对象的原型。
`global`	判断是否设置了 `"g"` 修饰符
`ignoreCase`	判断是否设置了 `"i"` 修饰符
`lastIndex`	用于规定下次匹配的起始位置
`multiline`	判断是否设置了 `"m"` 修饰符
`source`	返回正则表达式的匹配模式

9.5. 各种 `document` 对象方法的示例代码

getElementById 方法示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Get elements</title>
    <style type="text/css">
        body &#123;
            font-family: "PingFang SC", Arial, sans-serif;
            font-size: 25px;
        &#125;
        .warming &#123;
            font-family: "PingFang SC", Arial, sans-serif;
            font-size: 25px;
            /*color: red;*/
        &#125;
    </style>
    <script type="text/javascript">
        /*
        * Requirement:  When the user clicks the verify button, it is necessary to obtain
        *               the content in the input box and verify whether it is legal
        * Verify rule:  It must be composed of letters, numbers, underscores, and the length is 5～12 digits
        * */
        function onBlurFunc() &#123;
            // 1. When we want to operate a label, we must obtain the object of the label
            var userNameObj = document.getElementById("userName");
            // [object HTMLInputElement]    it's dom object
            // alert(userNameObj.value);
            var userNameText = userNameObj.value;
            // Verify that the string meets certain rules，and the regular expressions techniques are required
            var patt = /^\w&#123;5,12&#125;$/;
            /*
            * test method is use to test whether a string matches the rule
            * match returns true, otherwise returns false
            * */
            var warmObj = document.getElementById("userWarm");
            if ( patt.test(userNameText)) &#123;
                // alert("The user name is legal!");
                // warmObj.innerHTML = "The user name is legal!"
                // warmObj.style.color = "green";
                warmObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\"/>"
            &#125; else &#123;
                // alert("The user name is illegal!");
                // the property innerHTML is readable and writable
                // warmObj.innerHTML = "The user name is illegal!"
                // warmObj.style.color = "red";
                warmObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\"/>"
            &#125;
        &#125;
    </script>
</head>
<body>
    <label>
        User name: <input type="text" id="userName" onblur="onBlurFunc()"/>
        <span class="warming" id="userWarm">

        </span>
    </label>
</body>
</html>

getElementByName 方法示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Get elements</title>
    <style type="text/css">
        body &#123;
            font-family: "PingFang SC", Arial, sans-serif;
            font-size: 20px;
        &#125;
    </style>
    <script type="text/javascript">
        // select all
        function checkAll() &#123;
            // let all the check boxes be selected
            /*
            * document.getElementsByName(); is a query that returns multiple sets of label objects according to the specified name property
            * and this collection operates like an array
            * each element in the collection is a DOM object
            * and the order of the elements in this collection is the order from top to bottom in the HTML page
            * */
            var hobbies = document.getElementsByName("hobby");   // hobbies: [object NodeList]

            // the checked indicates the selected state of the check box. If it is selected, it is true; otherwise, it is false, and it's readable and writable
            for ( var i = 0; i < hobbies.length; i++ ) &#123;
                hobbies[i].checked = true;
            &#125;
        &#125;

        // deselect all
        function checkNo() &#123;
            var hobbies = document.getElementsByName("hobby");

            for ( var i = 0; i < hobbies.length; i++ ) &#123;
                hobbies[i].checked = false;
            &#125;
        &#125;

        // reverse select
        function checkReverse() &#123;
            var hobbies = document.getElementsByName("hobby");

            for ( var i = 0; i < hobbies.length; i++ ) &#123;
                hobbies[i].checked = hobbies[i].checked;
            &#125;
        &#125;
    </script>
</head>
<body>
    <label>
        Hobby:
        <input type="checkbox" name="hobby" value="c&cpp" />C/C++
        <input type="checkbox" name="hobby" value="java" />Java
        <input type="checkbox" name="hobby" value="py" />Python
        <input type="checkbox" name="hobby" value="js" />JavaScript
        <input type="checkbox" name="hobby" value="rugby" />Rugby
        <input type="checkbox" name="hobby" value="php" />PHP
        <input type="checkbox" name="hobby" value="swift" />Swift
    </label>
    <br/>
    <button onclick="checkAll()">Select all</button>
    <button onclick="checkNo()">Deselect all</button>
    <button onclick="checkReverse()">Reverse select</button>
</body>
</html>

getElementByTagName 方法示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Get elements</title>
    <style type="text/css">
        body &#123;
            font-family: "PingFang SC", Arial, sans-serif;
            font-size: 20px;
        &#125;
    </style>
    <script type="text/javascript">
        // select all
        function checkAll() &#123;
            /*
            * document.getElementsByTagName(); is query by the specified tag name and return the collection
            * and this collection operates like an array
            * each element in the collection is a DOM object
            * and the order of the elements in this collection is the order from top to bottom in the HTML page
            * */
            var inputs = document.getElementsByTagName("input");    // [object HTMLCollection]

            for ( var i = 0; i < inputs.length; i++ ) &#123;
                inputs[i].checked = true;
            &#125;
        &#125;
        
    </script>
</head>
<body>
    <label>
        Hobby:
        <input type="checkbox" value="c&cpp" />C/C++
        <input type="checkbox" value="java" />Java
        <input type="checkbox" value="py" />Python
        <input type="checkbox" value="js" />JavaScript
        <input type="checkbox" value="rugby" />Rugby
        <input type="checkbox" value="php" />PHP
        <input type="checkbox" value="swift" />Swift
    </label>
    <br/>
    <button onclick="checkAll()">Select all</button>
</body>
</html>

9.6. 节点的常用属性和方法

简单来说，节点就是标签对象

方法：

通过具体的元素节点调用 getElementByTagName() 方法，然后获取当前节点的指定标签名子节点 appendChild(oChildNode) 方法，可以添加一个子节点，oChildNode 是要添加的子节点。

属性：

childNodes 获取当前节点的所有子节点

firstChild 获取当前节点的一个子节点

lastChild 获取当前节点的最后一个子节点

parentNode 获取当前节点的父节点

nextSibling 获取当前节点的下一个节点

previousSibling 获取当前节点的上一个节点

className 用于获取或设置标签的 class 属性值

innerHTML 表示获取或设置起始标签和结束标签中的内容

innerText 表示获取或设置起始标签和结束标签中的文本

gregPerlinLi

http://www.gdutnic.com/2022/02/15/java-web-cong-ru-men-dao-tui-keng-di-san-zhang-javascript-yu-yan/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 gregPerlinLi !

JavaWeb JavaScript

Java Web 从入门到退坑第五章 XML

2022-02-16 JavaWeb基础

Java JavaWeb XML

Java Web 从入门到退坑第二章 CSS

2022-02-15 JavaWeb基础

JavaWeb CSS

Java Web 从入门到退坑 第三章JavaScript语言

Java Web 从入门到退坑 —— 第三章 JavaScript 语言

By -gregPerlinLi-

1. JavaScript 介绍

2. JavaScript 和 HTML 代码的结合方式

2.1. 第一种方式

2.2. 第二种方式

3. 变量

4. 运算

4.1. 关系运算

4.2. 逻辑运算

**5.数组（重点） **

6. 函数（重点）

6.1. 函数的两种定义方式

6.2. 函数的 arguments 隐形参数（只在 function 函数内）

7. JavaScript 中的自定义对象（拓展内容）

7.1. Object形式的自定义对象

7.2. {}花括号形式的自定义对象

8. JavaScript 中的事件

8.1. 什么是事件

8.2. 常用的事件

8.3. 事件的注册（绑定）

8.4. onload 加载完成事件

8.5. onclick 单击事件

8.6. onblur 失去焦点事件

8.7. 内容发生改变事件

8.8. onsubmit 表单提交事件

9. DOM 模型（重点）

9.1. 什么是 DOM 模型

9.2. Document对象（重点）

9.3. Document 对象中的方法介绍

9.4. 正则表达式（RegExp）对象（选学）

9.4.1. 什么是 RegExp

9.4.2. 定义RegExp

9.4.3. RegExp 语法

9.4.4. 修饰符

9.4.5. 方括号

9.4.6. 元字符

9.4.7. 量词

9.4.8. RegExp 对象方法

9.4.9. test() 的用法

9.4.10. exec() 的用法

9.4.11. compile() 的用法

9.4.12. toString() 的用法

9.4.13. RegExp 对象属性

9.5. 各种 document 对象方法的示例代码

9.6. 节点的常用属性和方法

Java Web 从入门到退坑第三章JavaScript语言

5.数组（重点）

6.2. 函数的 `arguments` 隐形参数（只在 `function` 函数内）

7.1. `Object`形式的自定义对象

7.2. `{}`花括号形式的自定义对象

8.4. `onload` 加载完成事件

8.5. `onclick` 单击事件

8.6. `onblur` 失去焦点事件

8.8. `onsubmit` 表单提交事件

9. `DOM` 模型（重点）

9.1. 什么是 `DOM` 模型

9.2. `Document`对象（重点）

9.3. `Document` 对象中的方法介绍

9.4. 正则表达式（`RegExp`）对象（选学）

9.4.1. 什么是 `RegExp`

9.4.2. 定义`RegExp`

9.4.3. `RegExp` 语法

9.4.8. `RegExp` 对象方法

9.4.9. `test()` 的用法

9.4.10. `exec()` 的用法

9.4.11. `compile()` 的用法

9.4.12. `toString()` 的用法

9.4.13. `RegExp` 对象属性

9.5. 各种 `document` 对象方法的示例代码