JavaScript学习01

2022-07-11 10:42:27

学习视频：https://www.bilibili.com/video/BV1Y7411K7zz?p=43&spm_id_from=pageDriver
1.关系运算符
==表示数值的比较
===表示全等号，不仅比较数值，还会比较类型
2.逻辑运算符
0，null,underfined,""都认为是false
&&运算符
如果表达式全为真，返回最后一个表达式的值
有一个为假时，返回第一个为假的表达式的值
||或运算
全为假时，返回最后一个表达式的值
只要存在为真的表达式，就会返回第一个为真的表达式的值
&&运算和||运算有短路
即某个&&和||运算有结果了之后，后面的表达式不再执行
3.数组

<script type="text/javascript">
       var arr=[]//定义一个空数组
       arr[0] = 1;
       arr[2] = 12;
       arr[3] = "a"
       for (var i = 0; i < arr.length; i++) {
           alert(arr[i])
       }

    </script>

4.函数
方式一：
使用function关键字来定义函数
有参函数定义时不用写参数类型*
有返回值时直接使用return关键字返回值即可
方式二：
var 函数名=function(参数列表）{}
js函数不允许重载
函数的arguments隐形参数（只在function函数内）
在function函数中不需要定义，但却可以直接用来获取所有参数的变量，即为隐形参数。非常像java基础中的可变长参数。操作也类似数组。
5，JS中的自定义对象
(1)Object形式的自定义对象
(2){}花括号形式的自定义对象

<script type="text/javascript">
        var obj = new Object();
        obj.name = "星爷";
        obj.age = 66;
        obj.bea=function () {
            alert("名字是"+this.name+" 年龄是"+this.age);
        }
        obj.bea();
    </script>

JavaScript学习01

<script type="text/javascript">
        var star={
            name:"周润发",
            age:45,
            fun:function () {
                alert("名字是"+this.name+"年龄是"+this.age);
            }
        };
        star.fun()
    </script>

JavaScript学习01
6.js中的事件
事件即电脑输入设备与页面进行交互的响应
JavaScript学习01
事件注册（绑定）
分为静态注册和动态注册。
什么是事件的注册：
告诉浏览器，当事件发生后应该执行哪些操作代码。
静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码，这种方式称为静态注册。
动态注册事件：先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){},这种形式赋予事件响应后的代码，叫动态注册。
动态注册基本步骤：
（1）获取标签对象
（2）标签对象.事件名=function(){}
例如
静态注册onload事件：

<head>
    <meta charset="UTF-8">
    <title>onload页面</title>
    <script>
        function f() {
            alert("静态注册onload事件，执行的所有代码");
        }
    </script>
</head>
<body onl oad="f();">

</body>

JavaScript学习01
动态注册onload事件：

<script type="text/javascript">
        // function f() {
        //     alert("静态注册onload事件，执行的所有代码");
        // }
        window.onload = function () {
            alert("动态注册onload事件，执行的所有代码...");
        }
    </script>

JavaScript学习01
动态注册onclick事件

<head>
    <meta charset="UTF-8">
    <title>onload页面</title>
    <script type="text/javascript">
        // function f() {
        //     alert("静态注册onload事件，执行的所有代码");
        // }
        window.onload = function () {
            var btnobj = document.getElementById("btn01");
            btnobj.onclick = function () {
                alert("动态注册onclick事件，点击执行的代码...");
            }
        }
    </script>
</head>
<body>
    <button id="btn01">按钮一</button>
</body>

点击按钮后弹框
JavaScript学习01
静态注册onclur事件

<head>
    <meta charset="UTF-8">
    <title>注册onblur事件</title>
    <script type="text/javascript">
        function onblurFun() {
            //console是控制台对象，是由javascript语言提供，专门用来向浏览器的控制器打印输出，用于测试使用
            console.log("静态注册失去焦点事件...");
        }
    </script>
</head>
<body>
    用户名：<input type="text" onblur="onblurFun();"><br/>
    密码：<input type="text" onblur="onblurFun();"><br/>
</body>

每次失焦后控制台会打印测试的文字
JavaScript学习01
动态注册失去焦点事件：

<head>
    <meta charset="UTF-8">
    <title>注册onblur事件</title>
    <script type="text/javascript">
        // function onblurFun() {
        //     //console是控制台对象，是由javascript语言提供，专门用来向浏览器的控制器打印输出，用于测试使用
        //     console.log("静态注册失去焦点事件...");
        // }
        window.onload = function () {
            var pwobj = document.getElementById("password");
            pwobj.onblur = function () {
                console.log("动态注册失去焦点事件...")
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" ><br/>
    密码：<input type="text" id="password"><br/>

发现表单非法提交静态，动态事件

<script type="text/javascript">
        function onsubmitFun() {
            alert("静态提交非法...");
            return false;
        }
        window.onload = function () {
            var emObj = document.getElementById("form01");
            emObj.onsubmit = function () {
                alert("动态提交非法...");
                return false;
            }
        }
    </script>
</head>
<body>
    <!--用户名：<input type="text" ><br/>-->
    <!--密码：<input type="text" id="password"><br/>-->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="静态注册"/>
    </form>
    <form action="http://localhost:8080" id="form01">
        <input type="submit" value="动态注册"/>
    </form>
</body>

7.DOM模型
JavaScript学习01

标签对象化，简单说就是使用类记录标签的信息
JavaScript学习01
可以使用getElementsByName根据name来获取对象

<head>
    <meta charset="UTF-8">
    <title>allSelect</title>
    <script type="text/javascript">
        function allselectFun() {
            var elObj = document.getElementsByName("hobby");
            for (var i = 0; i <elObj.length; i++) {
                elObj[i].checked = true;
            }
        }
        function noselectFun() {
            var elObj = document.getElementsByName("hobby");
            for (var i = 0; i <elObj.length; i++) {
                elObj[i].checked = false;
            }
        }
        function reverseselectFun() {
            var elObj = document.getElementsByName("hobby");
            for(var i = 0;i < elObj.length ;i++){
                if(elObj[i].checked){
                    elObj[i].checked =false;
                }else{
                    elObj[i].checked =true;
                }
            }
        }

    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="Cpp">c++
    <input type="checkbox" name="hobby" value="Java">java
    <input type="checkbox" name="hobby" value="Python">python
    <br/>
    <button onclick="allselectFun()">全选</button>
    <button onclick="noselectFun()">全不选</button>
    <button onclick="reverseselectFun()">反选</button>
</body>

如果既没有id属性，也没有name属性，可以通过getElementsByTagName根据标签名来查询并返回集合，集合中同样存放Dom对象，操作与数组一样

appendChild()添加子元素

上一篇：08.基本语法.html


下一篇：01_JavaScript 简介