3.JavaScript

已于 2022-03-07 13:25:40 修改
阅读量434 收藏
点赞数
分类专栏： Javaweb 文章标签： java html html5
于 2022-03-07 12:58:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47700419/article/details/123289587
版权

JavaScript

1.介绍

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

特点

  • 交互性：信息的动态交互
  • 安全性：不允许直接访问本地硬盘
  • 跨平台性：只要是可以解释JS的浏览器都可以执行，和平台无关

2.Javascrip与HTML的结合使用

方式一：

只需要在head的标签中，或body标签中，使用script标签来书写JavaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //alert是JavaScript语言提供的一个警告框函数
        //他可以接收任意类型的参数，这个参数就是警告框提示的信息
        alert("你好，iu");
    </script>
</head>
<body>

</body>
</html>

方式二：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    现在需要使用script引入外部js文件来执行
    src属性专门用来引用js文件路径
    
    script标签可以用来定义JS代码，也可以用来引入JS文件
    但是二者不能同时使用，必须重写一个script标签
    -->
    <script type="text/javascript"  src="demo02--1.js"></script>
    
    <script type="text/javascript">
        alert("金智秀");
    </script>
</head>
<body>

</body>
</html>

3.变量

3.1变量类型

  • 数值类型 number（short,int,float,double·····）
  • 字符串类型 string
  • 对象类型 object
  • 布尔类型 boolean
  • 函数类型 function

3.2特殊的值

  • undefined    未定义，所有JS变量为赋予初始值的时候，默认值都是undefined
  • null              空值
  • NAN            全称：Not a number 非数值，非数字

3.3定义变量格式

  • var 变量名;
  • var 变量名 = 值；

3.4举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    var i;
    alert(i);//undefined
    i = 12;
    alert(i);//12
    //typeof()是JS语言提供的一个函数
    //它可以返回变量的数据类型
    alert(typeof(i));//number
    var i = "jjj";
    alert(typeof(i));//string
    var a = 11;
    var b = "azc";
    alert(a * b);//NaN

  </script>
</head>
<body>

</body>
</html>

3.5比较运算

  • 等于： == （只比较简单的字面值）
  • 全等于： === （除了比较简单的字面值，还会比较数据类型）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
       var a = 12;
       var b = "12";
       alert(a == b);//true
       alert(a === b);//false

    </script>
</head>
<body>

</body>
</html>

3.6逻辑运算

  • 且运算 &&
  • 或运算 ||
  • 取反运算 ！

在JS语言中，所有的变量都可以作为一个boolean类型的变量去使用
0 null undefined “”(空字符串)都认为是false

且运算 &&

①当表达式全为真时，返回最后一个表达式的值
②当表达式中，有一个为假时。返回第一个为假的表达式的值

或运算 ||

①当表达式全为假时，返回最后一个表达式的值
②当表达式中，有一个为真时。返回第一个为真的表达式的值

且运算 和 或运算 有短路的情况
当且运算 或 或运算有了结果之后。后面的表达式不再执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a = null;
        if (a){
            alert("a 可以为true")
        }else{
            alert("a 可以为false")
        }
        var b = "";//一个空格也没有
        if (b){
            alert("b  可以为true")
        }else{
            alert("b  可以为false")
        }

        var c = true;
        var d = false;
        var e = true;
        alert(c && e);//true
        alert(d && e)//false

        alert(a || e);//true
        alert(d || a)//null



    </script>
</head>
<body>

</body>
</html>

4.数组

  • var 数组名 = []; //空数组
  • var 数组名 = [1,“abc”,true]

JS语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动给数组做扩容操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var arr =[];//定义一个空数组
        alert(arr.length);//0

        arr[1]="abc";
        arr[2]=12;
        alert(arr[2]);//12
        alert(arr.length);//3
        //遍历
        for (var i = 0; i < arr.length; i++){
            alert(arr[i]);
        }

    </script>
</head>
<body>

</body>
</html>

5.函数

方式一：
格式：

function 函数名(形参列表){
    
     函数体

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function fun(){
            alert("被调用！");
        }
        //函数调用才会执行
        fun();

        function fun1(a,b){
            alert("a = " + a + ",b = " + b);
        }
        fun1(1,9);

        //定义带有返回值的函数
        function sun(num1,num2){
            var v = num1 + num2;
            return v;
        }
        alert(sun(15,25));

    </script>

    
</head>
<body>

</body>
</html>

方式二：
格式：

var 函数名 = function(形参列表){

    函数体

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var fun = function () {
            alert("被调用！");
        }
        fun();

        var fun1 = function (a,b) {
            alert(a+b);
        }
        fun1(5,8);


        var fun2 = function (a,b) {
            return a+b;
        }
        alert(fun2(1,9));

    </script>
</head>
<body>

</body>
</html>

JS中函数的重载会直接覆盖掉上一次的定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    function fun(){
      alert("李知恩");
    }
    var fun = function(a,b){
      alert("iu，真好看!");
    }
    fun();//iu，真好看!

  </script>
</head>
<body>

</body>
</html>

函数的arguments隐形参数(只在function函数内)
隐形参数特别像Java基础的可变长参数一样是个数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function fun() {
            alert(arguments.length);
            alert(arguments[0]);
            alert(arguments[1]);
            alert(arguments[2]);

            alert("被调用！")

        }

        fun(1, "abc", true);

        //应用：编写一个函数，要求计算所有参数相加的和并返回
        function sum(num1, num2) {
            var v = 0;
            for (var i = 0; i < arguments.length; i++) {

                v += arguments[i];

            }
            return v;
        }

        alert(sum(4, 7, 8, 5, 4));//28
        alert(sum(4, 7, "abc", 5, 4));//11abc54

        //应用：编写一个函数，要求计算所有参数相加的和并返回
        function sum1(num1, num2) {
            var v = 0;
            for (var i = 0; i < arguments.length; i++) {
                if (typeof (arguments[i]) === "number"){
                    v += arguments[i];
                }
            }
            return v;
        }

        alert(sum1(4, 7, 8, 5, 4));//28
        alert(sum1(4, 7, "abc", 5, 4));//20
    </script>
</head>
<body>

</body>
</html>

6.JS中的自定义对象

6.1Object形式的自定义对象

  • 对象的定义
    var 变量名 = new Object();         对象实例(空对象)
    变量名.属性 = 值；                     定义一个属性
    变量名.函数 = function(){}           定义一个函数
  • 对象的访问
    变量名.属性/函数名()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    var obj = new Object();
    alert(typeof(obj));

    obj.name = "金智秀";
    obj.age = 18;
    obj.fun = function(){
        alert("姓名：" + this.name + "，年龄：" + this.age);
    }

    alert(obj.name);
    obj.fun();
    </script>
</head>
<body>

</body>
</html>

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

  • 定义
    var 变量名 = {
    属性:值
    }
    var 变量名 = {
    属性:值,
    属性:值
    }
    var 变量名 = {
    属性:值,
    属性:值,
    函数名:function(){}
    }
  • 访问
    变量名.属性/函数名()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    var obj ={
        name:"金智秀",
        age:18,
        fun:function(){
            alert("姓名：" + this.name + ",年龄：" + this.age)
        }
    }
    alert(obj.name);
    alert(obj.age);
    obj.fun();

    </script>
</head>
<body>

</body>
</html>

7.JS中的事件

7.1介绍

事件是电脑输入设备与页面进行交互的响应

常用事件：

①onload加载完成事件        页面加载完成后，常用于做页面js代码初始化操作
②onclick单击事件           按钮的点击响应操作
③onblur失去焦点事件        输入框失去焦点后验证其输入内容是否合法
④onchange内容发生改变事件  下拉列表和输入框内容发生改变后操作
⑤onsubmit表单提交事件      表单提交前，验证所有表单项是否合法

7.2事件的注册

什么是事件的注册
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册

  • 静态注册事件

    • 通过html标签的事件属性直接赋于事件响应后代码

  • 动态注册事件

    • 指先通过JS代码得到标签的dom对象，然后在dom 对象.事件名 = function(){}这种形式赋于事件响应后代码通过
    • 基本步骤:
      1.获取标签对象
      2.标签对象.事件名 = function(){}

7.3常用事件练习

1.onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //onload事件的方法
        function onloadFun() {
            onload = alert("静态注册onload事件");
        }
        
    </script>
</head>
<!--静态注册onload事件
    onload是浏览器解析完页面之后就会自动触发的事件
    方式一：
    <body οnlοad=alert("静态注册onload事件")>
    方式二：
    <body οnlοad="onloadFun();"
-->
<body onload="onloadFun();">

<p>金智秀</p>

<p>rose</p>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //onload事件动态注册，固定写法
        window.onload = function(){
         alert("onload事件动态注册");
        }

    </script>
</head>
<body>
<p>金智秀</p>

<p>rose</p>
</body>
</html>

2.onclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            alert("静态注册！");
        }
        //动态注册
        window.onload = function () {
            //1.获取标签对象
            var btnobj = document.getElementById("btn2")
            //2.通过标签对象.事件名 = function(){}
            btnobj.onclick = function () {
                alert("动态注册！");
            }

        }
    </script>


</head>
<body>
<!--静态注册-->
<button onclick="onclickFun();">按钮1</button>
<button id="btn2">按钮2</button>
<button>按钮</button>
<button>按钮4</button>
</body>
</html>

3.onblur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onblurFun() {
            alert("静态注册失去焦点！");
        }

        //动态注册
        window.onload = function () {
            //1.获取标签对象
            var pw = document.getElementById("password")
            //2.通过标签对象.事件名 = function(){}
            pw.onblur = function () {
                alert("动态注册失去焦点！");
            }

        }
    </script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"> <br/>
密码:<input type="text" id="password"> <br/>
<button>登录</button>
<button>注册</button>
</body>
</html>

4.onchange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun() {
            alert("你的女神改变了！");
        }

        window.onload = function () {
            // 1.获取标签对象
            var v = document.getElementById("name");
            //  2.
            v.onchange = function () {
                alert("你的男神改变了！");
            }
        }
    </script>
</head>
<body>
请选择你心中的女神：
<select onchange="onchangeFun();">
    <option>林允儿</option>
    <option>金智秀</option>
    <option>iu</option>
    <option>裴秀智</option>
</select>
<br>

请选择你心中的男神：
<select id="name">
    <option>尊龙</option>
    <option>胡歌</option>
    <option>归海一刀</option>
    <option>段天涯</option>

</select>
</body>
</html>

5.onsubmit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onsubmitFun() {
            alert("静态    发现不合法");
            return false;
        }

        window.onload = function () {
            var v = document.getElementById("sub")
            v.onsubmit = function () {
                alert("动态   发现不合法！")

                return false;
            }

        }

    </script>
</head>
<body>
<!--return false   可以阻止，表单提交-->
<form action="https://localhost:8080" method="get" onsubmit="return onsubmitFun();">
    <input type="subit" value="静态注册"/>
</form>

<form action="https://localhost:8080" method="get" id="sub">
    <input type="subit" value="动态注册"/>
</form>


</body>
</html>

8.DOM模型

DOM 全称：Document Object Model 文档对象模型
理解：就是把文档的标签，属性，文本，转换成为对象管理

8.1Document对象

在这里插入图片描述
理解：

1.Document他管理了所有的HTML文档内容
2.Document它是一种树结构的文档。有层级关系
3.它让我们把所有的标签对象化
4.我们可以通过document访问所有的标签对象

在这里插入图片描述

8.2Document常用方法

1.getElementById()

返回对拥有指定id的第一个对象的引用

练习：验证用户名是否有效

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    /*
      需求：当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法
      验证规则：必须由字母，数字，下划线组成。并且长度5~12

     */
    function onclickFun() {
      //1.当我们操作一个标签时，一定要先获取这个标签对象
      var usernameObject = document.getElementById("username");
      //获取标签对象的值
      var usernameText = usernameObject.value;
      //验证字符串，是否符合规则，使用正则表达式、
      var patt = /^\w{5,12}$/;
      var usernameSpanObject = document.getElementById("usernameSpan");
      /*
      test()方法：检测形参字符串是否符合我的规则。
      符合就返回true,不符合就返回false
      */
      if (patt.test(usernameText)) {
        usernameSpanObject.innerHTML = "用户名正确";
      } else {
        usernameSpanObject.innerHTML = "用户名不正确";
      }

    }
  </script>


</head>
<body>

用户名：<input type="text" id="username"/>
     <span id="usernameSpan" style="color: red"></span><br>
     <button onclick="onclickFun()">验证</button>

</body>
</html>

2.getElementsByName()

返回带有指定名称的对象集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function clickAll() {
            //hobbies是返回多个标签对象的集合
            //这个集合和数组一样
            var hobbies = document.getElementsByName("hobby");

            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = true;
            }
        }

        function clickNo() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = false;
            }
        }

        function clickReverse() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                if (hobbies[i].checked) {

                    hobbies[i].checked = false;
                }else{
                    hobbies[i].checked = true;
                }
            }

        }


    </script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="金智秀" checked>金智秀
<input type="checkbox" name="hobby" value="林允儿">林允儿
<input type="checkbox" name="hobby" value="iu">iu
<br>
<button onclick="clickAll()">全选</button>
<button onclick="clickNo()">全不选</button>
<button onclick="clickReverse()">反选</button>
</body>
</html>

3.getElementsByTagName()

返回带有指定标签名的对象集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function clickAll() {
            //hobbies是返回多个标签对象的集合
            //这个集合和数组一样
            var hobbies = document.getElementsByTagName("input");

            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = true;
            }
        }

        function clickNo() {
            var hobbies = document.getElementsByTagName("input");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = false;
            }
        }

        function clickReverse() {
            var hobbies = document.getElementsByTagName("input");
            for (var i = 0; i < hobbies.length; i++) {
                if (hobbies[i].checked) {

                    hobbies[i].checked = false;
                } else {
                    hobbies[i].checked = true;
                }
            }

        }


    </script>
</head>
<body>
兴趣爱好:
<input type="checkbox" value="金智秀" checked>金智秀
<input type="checkbox" value="林允儿">林允儿
<input type="checkbox" value="iu">iu
<br>
<button onclick="clickAll()">全选</button>
<button onclick="clickNo()">全不选</button>
<button onclick="clickReverse()">反选</button>
</body>
</html>

三种方法的使用注意事项
优先级

getElementById > getElementsByname > getElementsTagname

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

节点：就是标签对象

反方向的小黑子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值