【JavaWeb】JavaScript

💛 JavaScript的基本介绍💛
javascript语言的诞生主要是用于完成数据验证,因此它运行在客户端,需要运行浏览器来解析执行javascript代码.

特点:
(1).交互性(信息的动态交互)
(2).安全性(不允许直接访问本地硬盘)
(3).跨平台性(与平台无关)
js是弱类型
弱类型:可变
例如: var i = 12;
i = ‘aba’;
java是强类型
强类型:不可变
例如: int i = 12;

文章目录

1.JavaScript与HTML的结合方式
- 1.1.第一种方式
- 1.2.第二种方式
2.变量
3.关系运算
4.逻辑运算
5.数组
6.函数
7.JS中的自定义对象
- 7.1.Object形式的自定义对象
- 7.2.{}形式的自定义对象
8.js中的事件
9.DOM模型
10.验证用户名是否有效

1.JavaScript与HTML的结合方式

1.1.第一种方式

⭐️在head标签和body标签中,使用script标签来写代码.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
        alert("hello javascript");
    script>
head>
<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12

1.2.第二种方式

⭐️使用script标签引入单独的javascript文件.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript" src = "02h.js">script>
head>
<body>
body>
html>
1
2
3
4
5
6
7
8
9
10

注意:
(1).使用script标签引入外部的js文件来执行,使用script标签定义js代码,但只能使用其中之一.
(2).src属性专门用于引入js文件路径(可以是绝对路径,也可以是相对路径).

2.变量

⭐️变量是可以存放某些值的内存的命名.

javascript的变量类型:
数值类型: number
字符串类型: string
对象类型: object
布尔类型: boolean
函数类型: function

javascript里特殊的值:
undefined: 未定义,所有js变量未赋初始值的时候,默认值都是undefined.
null: 空值.
NAN: 非数值.

js中变量定义的格式:
var 变量名;
var 变量名 = 值;

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
        var i;
        alert(i);//undefined
        i = 12;
        alert(i);//12
        alert(typeof(i));//number
    script>
head>
<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意:typeof()是javascript提供的一种函数,用于返回变量的数据类型.

3.关系运算

❤️等于: ==简单的字面值比较.
❤️全等于: ===除了字面比较外还有数据类型的比较.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
      var a = "12";
      var b = 12;
      alert(a == b)//true
      alert(a === b)//false
    script>
head>
<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.逻辑运算

💙在javascript语言中,所有变量都可以当作一个布尔类型的变量去使用.
💙0,null,“”(空串),undefined都被认为是false.

且运算: &&
第一种情况: 当表达式全为真的时候,取最后一个表达式的值.
第二种情况: 当有一个表达式为假的时候,返回第一个为假的表达式的值.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
      var a = "abc";
      var b = true;
      var c = false;
      var d = null;
     alert(a && b);//true
     alert(b && a);//abc
     alert(a && c);//false
     alert(a && d);//null
    script>
head>
<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

或运算: ||
第一种情况: 当表达式全为假的时候,取最后一个表达式的值.
第二种情况: 当有一个表达式为真的时候,返回第一个为真的表达式的值.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
      var a = "abc";
      var b = true;
      var c = false;
      var d = null;
     alert(d || c);//false
     alert(c || d);//null
     alert(a || c);//abc
     alert(a || b);//true
    script>
head>
<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5.数组

js中数组的定义:
第一种情况:var 数组名 = []; —空数组

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
     var arr = [];//空数组
     alert(arr.length);//0
     arr[0] = 12;
     alert(arr[0]);
     alert(arr.length);
     arr[2] = "abc";
     alert(arr.length);
     alert(arr[2]);
     alert(arr[1])//undefined
     for(var i = 0;i < arr.length;i++){
         alert(arr[i]);
     }
    script>
head>
<body>
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

第二种情况:var 数组名 = [1,‘abc’,true]; -----定义的同时赋值

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
     var arr = [1,"abc",true];//空数组
     alert(arr.length);//3
     alert(arr[2]);//true
     alert(arr[9]);//undefined
     arr[0] = 12;
     alert(arr[0]);//12
     for(var i = 0;i < arr.length;i++){
         //alert(arr[i]);
     }
    script>
head>
<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注意:js中的数组,只要我们通过数组下标赋值,那么最大的下标值就会自动的给数组做扩容操作.

6.函数

6.1.函数的第一种定义方式

使用function关键字来定义函数.
格式:
function 函数名(形参列表){
函数体
}

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
        //无参
    function fun(){
        alert("123456");
    }
    fun();
       //有参
    function fun2(a,b){
        alert(a + b);
    }
    fun2(12,"abc");
    //有返回值
        function sum(num1,num2){
            var r = num1 + num2;
            return r;
        }
        alert(sum(100,50));
    script>
head>
<body>
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

6.2.函数的第二种定义方式

格式: var 函数名 = function(形参列表){
函数体
}

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
        //无参
        var fun = function(){
        alert("123456");
    }
    fun();
       //有参
   var fun2 = function(a,b){
        alert(a + b);
    }
    fun2(12,"abc");
    //有返回值
       var sum = function(num1,num2){
            var r = num1 + num2;
            return r;
        }
        alert(sum(100,50));
    script>
head>
<body>
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

注意:js中不允许重载,否则会覆盖上面的定义.

6.3.函数的arguments隐形参数(只在function函数内)

说明:
(1).就是在function函数中不需要定义,但却可以直接用来接收所有参数的变量,就是隐形参数.
(2).js中的隐形参数,操作类似数组.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
       function fun(a){
           alert(arguments.length);//2
           alert(arguments[0]);//1
           for(var i = 0;i < arguments.length;i++){
               alert(arguments[i]);
           }
       }
       fun(1,2);
      function sum(num1,num2){
          var r = 0;
          for(var i = 0;i < arguments.length;i++){
              if(typeof(arguments[i]) == "number") {
                  r += arguments[i];
              }
          }
          return r;
      }
      alert(sum(1,2,3,4,5,6));
    script>
head>
<body>
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

7.JS中的自定义对象

7.1.Object形式的自定义对象

对象的定义:var 变量名 = new Object();
定义一个属性:变量名.属性名 = 值;
定义一个函数:变量名.函数名 = function(){}
对象的访问:变量名.属性名/函数名().

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
      var obj = new Object();
      obj.name = "靓仔";
      obj.age = 18;
      obj.fun = function(){
          alert(this.name + this.age);
      }
      obj.fun();
    script>
head>
<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

对象的定义:var 变量名 = {};
属性和函数的定义: var 变量名 = {
属性名 : 值,
属性名 : 值,
函数名 : function(){}
};
对象的访问:变量名.属性名/函数名();

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
        //对象的定义,属性的定义,函数的定义
    var obj = {
      name : "靓仔",
      age : 18,
      fun : function(){
          alert(this.name + this.age);
      }
    };
    //对象的访问
    alert(obj.name);
    obj.fun();
    script>
head>
<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

8.js中的事件

(1).事件:电脑输入设备与页面进行交互的响应.
(2).事件的注册:静态事件注册和动态事件注册.
静态注册事件:通过html标签的事件属性直接赋予事件响应后的代码的这种方式.
动态注册事件:通过js代码得到标签的dom对象,然后通过dom对象.事件名 = function(){},这种形式赋予事件响应后的代码.
(3).常用的事件:
onload 加载完成事件:页面加载完成之后,常用于做页面js代码初始化操作.

静态注册:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
        function onloadfun(){
           alert("静态注册");
        }
    script>
head>
<body onload = "onloadfun();">
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

动态注册:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
        window.onload = function(){
            alert("动态注册");
        }
    script>
head>
<body >
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

静态注册:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
        function onclickfun(){
            alert("静态注册");
        }
    script>
head>
<body>
<button onclick = "onclickfun();">按钮1button>
<button> 按钮2 button>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

动态注册:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
       window.onclick = function (){
           var obj = document.getElementById("dh");
           obj.onclick = function(){
               alert("动态注册");
           }
       }
    script>
head>
<body>
<button onclick = "onclickfun();">按钮1button>
<button id = "dh"> 按钮2 button>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

静态注册:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
      function onblurfun(){
          console.log("静态注册");
      }
    script>
head>
<body>
用户名:<input type="text" onblur="onblurfun();"><br/>
密码:<input type="text"><br/>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

动态注册:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
      window.onload = function(){
          var obj = document.getElementById("password");
          obj.onblur = function(){
              console.log("动态注册");
          }
      }
    script>
head>
<body>
用户名:<input type="text" onblur="onblurfun();"><br/>
密码:<input type="text" id = "password"><br/>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意:
(1)console是控制台对象,经常用来向浏览器的控制器打印输出.
(2)log()是打印的方法.

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

静态注册:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
     function onchangefun(){
         alert("静态注册");
     }
    script>
head>
<body>
<select onchange = "onchangefun();">
    <option>--红红--option>
    <option>黄黄option>
    <option>兰兰option>
select>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

动态注册:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
   window.onload = function(){
       var obj = document.getElementById("color");
       obj.onchange = function(){
           alert("动态注册");
       }
   }
    script>
head>
<body>
<select id = "color">
    <option>--红红--option>
    <option>黄黄option>
    <option>兰兰option>
select>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

onsubmit表单提交事件:常用于表单提交前,验证所有表单项是否合法.

静态注册:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
           function onsubmitfun(){
               alert("不合法");
               return false;
           }
    script>
head>
<body>
      <form action="http://localhost:8080" method="get" onsubmit="return onsubmitfun();">
           <input type="submit" value="静态注册"/>
      form>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

动态注册:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
          window.onload = function(){
              var obj = document.getElementById("form01");
              obj.onsubmit = function(){
                  alert("不合法");
                  return false;
              }
          }
    script>
head>
<body>
      <form action = "http://localhost:8080" id="form01">
           <input type="submit" 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

9.DOM模型

DOM全称:文档对象模型
在这里插入图片描述
Document对象的理解:
第一点:它管理了所有的HTML文档内容.
第二点:是一种树结构的文档.
第三点:它让我们把所有的标签都对象化.
第四点:通过document可以访问所有的标签对象.

10.验证用户名是否有效

验证规则:必须有字母,数字,下划线组成,并且长度是5到12.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
         function onclickfun(){
             var obj = document.getElementById("un");
             var unt = obj.value;
             var patt = /^\w{5,12}$/;
             if(patt.test(unt)){
                 alert("用户名合法");
             }else{
                 alert("用户名不合法");
             }
         }
    script>
head>
<body>
       用户名:<input type="text" id="un" value="wz">
       <button onclick="onclickfun()">校验button>
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

注意:test()方法用于测试某个字符串,是否符合规则,符合就返回true,不符合就返回false.

正则表达式对象：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
           //表示字符串中,是否包含字母e
           var patt = new RegExp("e");
           var patt = /e/;
           //表示字符串中,是否包含字母a,b,c
           var patt = /[abc]/;
           //表示字符串中,是否包含小写字母
           var patt = /[a-z]/;
           //表示字符串中,是否包含大写字母
           var patt = /[A-Z]/;
           //表示字符串中,是否包含任意数字
           var patt = /[0-9]/;
           //表示字符串中,是否包含字母,数字,下划线
           var patt = /\w/;
           //表示字符串中,是否包含至少一个a
           var patt = /a+/;
           //表示字符串中,是否包含0个或多个a
           var patt = /a*/;
           //表示字符串中,是否包含1个或0个a
           var patt = /a?/;
           //表示字符串中,是否包含连续三个a
           var patt = /a{3}/;
           //表示字符串中,是否包含至少三个连续的a,至多五个连续的a
           var patt = /a{3,5}/;
           //表示字符串中,是否包含至少三个连续的a,至多n个连续的a
           var patt = /a{3,}/;
           //表示以a开头
           var patt = /^a/;
           //表示以a结尾
           var patt = /a$/;
           //从头到尾完全匹配
           var patt = /^a{3,5}$/;
           var patt = /\w{5,12}/;
           var str = "aaa";
           alert(patt.test(str));
    script>
head>
<body>
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

两种常见的验证提示效果:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
        function onclickfun(){
            var obj = document.getElementById("un");
            var unt = obj.value;
            var patt = /^\w{5,12}$/;
            var objs = document.getElementById("uns");
            if(patt.test(unt)){
            objs.innerHTML = "";
            }else{
                objs.innerHTML = "";
            }
        }
    script>
head>
<body>
用户名:<input type="text" id="un" value="wz"/>
<span style="color:#ff0000;" id="uns">span>
<button onclick="onclickfun()">校验button>
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

前面已经介绍了getElementById(),接下来我们还要学习以下两种方法:
(1).getElementByName()

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
        function checkAll(){
            var obj = document.getElementsByName("hobby");
            for(var i = 0;i < obj.length;i++){
                obj[i].checked = true;
            }
        }
        function checkNo(){
            var obj = document.getElementsByName("hobby");
            for(var i = 0;i < obj.length;i++){
                obj[i].checked = false;
            }
        }
        function checkReverse(){
            var obj = document.getElementsByName("hobby");
            for(var i = 0;i < obj.length;i++){
                obj[i].checked = !obj[i].checked;
            }
        }
    script>
head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp" checked="checked">c++
<input type="checkbox" name="hobby" value="cppp" checked="checked">java
<input type="checkbox" name="hobby" value="cp" checked="checked">python
<br/>
<button onclick="checkAll();">全选button>
<button onclick="checkNo();">全不选button>
<button onclick="checkReverse();">反选button>
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

注意:
(1).document.getElementsByName(“hobby”);是根据指定的name属性返回多个标签对象集合.
(2).这个集合的操作和数组一样.
(3).集合中每个元素都是DOM对象.
(4).集合中的元素顺序是它们在html页面中从上到下的顺序.
(5).checked表示选中状态,如果选中就是true,否则就是false.
(6).checked这个属性可读可写.

(2).getElementByTagName()

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
        function checkAll(){
            var obj = document.getElementsByTagName("input");
            for(var i = 0;i < obj.length;i++){
                obj[i].checked = true;
            }
        }
        function checkNo(){
            var obj = document.getElementsByTagName("input");
            for(var i = 0;i < obj.length;i++){
                obj[i].checked = false;
            }
        }
        function checkReverse(){
            var obj = document.getElementsByTagName("input");
            for(var i = 0;i < obj.length;i++){
                obj[i].checked = !obj[i].checked;
            }
        }
    script>
head>
<body>
兴趣爱好:
<input type="checkbox" value="cpp" checked="checked">c++
<input type="checkbox" value="cppp" checked="checked">java
<input type="checkbox" value="cp" checked="checked">python
<br/>
<button onclick="checkAll();">全选button>
<button onclick="checkNo();">全不选button>
<button onclick="checkReverse();">反选button>
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

注意:getElementById(),getElementByTagName(),getElementByName(),一定要在页面加载完成之后执行,才能查询到标签对象.
所谓页面加载完成也就是,浏览器获得所有信息.
💜💜💜
我们再学习最后一个方法:createElement(tagname),通过给定的标签名,创建一个标签对象.
在写代码之前我们需要知道以下内容:
(1).节点就是标签对象.
(2).
getElementByTagName()
获取当前节点的指定标签名孩子节点.
appendChild(oChildNode)
可以添加一个子节点.

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type = "text/javascript">
       window.onload =function(){
           var obj = document.createElement("div");
           //obj.innerHTML = "我爱你";//标签的内容,但只在内存,不能显现出来.
           //也可以,像下面这句话一样.
           var tobj = document.createTextNode("我爱你");//创建文本节点对象.
           //然后添加到div标签内.
           obj.appendChild(tobj);
           //最后将div标签加到body标签内.
           document.body.appendChild(obj);
       }
    script>
head>
<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

相关阅读:
ElasticSearch异常情况监控处理
 mysql大事务导致主从延时处理
 Jetson nano 环境配置
 Redis（02）| 数据结构-SDS
java垃圾回收-三色标记法
 Android Studio运行kotlin项目，一直Read timed out
SpringBoot操作Mongodb
基于Antd Table自定义通用columns列筛选配置
 虚拟机安装Ubuntu太慢解决办法
 Linux 日期、时区
原文地址：https://blog.csdn.net/qq_53798578/article/details/126501451