Bootstrap

javascript 复习总结

javascript和html代码结合的方式

1.使用script标签来写javascript代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // alert是JavaScript语言提供的一个警告框函数。
        alert("hello javaScript!");
    </script>
</head>
<body>
</body>
</html>

2.标签引入

/1.js

alert("hello javaScript!");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
       <!--
        现在需要使用script引入外部的js文件来执行
            src 属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）

        script标签可以用来定义js代码，也可以用来引入js文件
        但是，两个功能二选一使用。不能同时使用两个功能
    -->
    <script type="text/javascript" src="1.js"></script>
</head>
<body>
</body>
</html>

变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var i = 12;
        // typeof()取变量的数据类型返回
        alert( typeof(i) ); // number

        var j = "abc";
        alert( typeof(j) ); // String

        var a = 12;
        var b = "abc";
        alert( a * b ); // NaN是非数字，非数值
    </script>
</head>
<body>
</body>
</html>

运算

关系运算

== 等于：字面上的比较

=== 全等于：除了字面上的比较，还比较数据类型

<!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>

逻辑运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
   /*     在JavaScript语言中，所有的变量，都可以做为一个boolean类型的变量去使用。
        0 、null、 undefined、””(空串) 都认为是 false；*/

        // var a = 0;
        // if (a) {
        //     alert("零为真");
        // } else {
        //     alert("零为假");
        // }

        // var b = null;
        // if (b) {
        //     alert("null为真");
        // } else {
        //     alert("null为假");
        // }

        // var c = undefined;
        // if (c) {
        //     alert("undefined为真");
        // } else {
        //     alert("undefined为假");
        // }

        // var d = "";
        // if (d) {
        //     alert("空串为真");
        // } else {
        //     alert("空串为假");
        // }

        //以上结果都为假
        
/*         && 且运算。
		有两种情况：
		第一种：当表达式全为真的时候。返回最后一个表达式的值。
		第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值*/

        var a = "abc";
        var b = true;
        var d = false;
        var c = null;

        // alert( a && b );//true
        // alert( b && a );//true
        // alert( a && d ); // false
        // alert( a && c ); // null

 /*      || 或运算
       第一种情况：当表达式全为假时，返回最后一个表达式的值
       第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值*/
        // alert( d || c ); // null
        // alert( c|| d ); //false

        // alert( a || c ); //abc
        // alert( b || c ); //true

    </script>
</head>
<body>

</body>
</html>

数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        var arr = []; // 定义一个空数组
        // alert( arr.length ); // 0

        arr[0] = 12;
        // alert( arr[0] );//12
        // alert( arr.length ); // 1

        // javaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
        arr[2] = "abc";
        alert(arr.length); //3

        // alert(arr[1]);// undefined
        // 数组的遍历
        for (var i = 0; i < arr.length; i++){
            alert(arr[i]);
        }

    </script>
</head>
<body>
</body>
</html>

函数的定义

1.用function 关键字来定义函数

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

        function fun2(a ,b) {
            alert("有参函数fun2()被调用了 a=>" + a + ",b=>"+b);
        }

        // fun2(12,"abc");

        // 定义带有返回值的函数
        function sum(num1,num2) {
            var result = num1 + num2;
            return result;
        }

        alert( sum(100,50) );

    </script>
</head>
<body>

</body>
</html>

2.第二种定义方式

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 fun2 = function (a,b) {
            alert("有参函数a=" + a + ",b=" + b);
        }
        // fun2(1,2);

        var fun3 = function (num1,num2) {
            return num1 + num2;
        }

        alert( fun3(100,200) );
    </script>

</head>
<body>

</body>
</html>

函数重载

Java中函数允许重载，JavaScript直接覆盖，不允许重载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">


        function fun(a,b) {
            alert("有参函数fun(a,b)");
        }

        function fun() {
            alert("无参函数fun()");
        }

        fun(1,"ad");
//运行结果为：无参函数fun()
    </script>
</head>
<body>

</body>
</html>

函数的arguments隐形参数（只在function函数内）：就是不需要定义，却可以直接获取所有参数的变量

function fun() {
            alert("无参函数fun()");
        }
	    
        fun(1,"ad");
//运行结果为：无参函数fun()

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

            alert("a = " + a);

            for (var i = 0; i < arguments.length; i++){
                alert( arguments[i] );
            }

            alert("无参函数fun()");
        }
        // fun(1,"ad",true);

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

        alert( sum(1,2,3,4,"abc",5,6,7,8,9) );


    </script>
</head>
<body>

</body>
</html>

对象

object 形式的自定义对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        // 对象的定义：
        //     var 变量名 = new Object();   // 对象实例（空对象）
        //     变量名.属性名 = 值;		  // 定义一个属性
        //     变量名.函数名 = function(){}  // 定义一个函数
        var obj = new Object();
        obj.name = "华仔";
        obj.age = 18;
        obj.fun = function () {
            alert("姓名：" + this.name + " , 年龄：" + this.age);
        }
        // 对象的访问：
        //     变量名.属性 / 函数名();
        // alert( obj.age );
        obj.fun();

    </script>
</head>
<body>

</body>
</html>

花括号形式的自定义对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 对象的定义：
        // var 变量名 = {			// 空对象
        //     属性名：值,			// 定义一个属性
        //     属性名：值,			// 定义一个属性
        //     函数名：function(){}	// 定义一个函数
        // };
        var obj = {
            name:"国哥",
            age:18,
                fun : function () {
                alert("姓名：" + this.name + " , 年龄：" + this.age);
            }
        };

        // 对象的访问：
        //     变量名.属性 / 函数名();
        alert(obj.name);
        obj.fun();
    </script>
</head>
<body>

</body>
</html>

js中的事件

常用的事件：

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

静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。

动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件 响应后的代码，叫动态注册。

动态注册基本步骤： 1、获取标签对象 2、标签对象.事件名 = fucntion(){}

onload

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

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

onclick

静态注册和动态注册
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
        function onclickFun() { 
            alert("静态注册 onclick 事件"); 
        }
        window.onload = function () {
            var btnObj = document.getElementById("btn01");
            btnObj.onclick = function () { 
                alert("动态注册的 onclick 事件"); 
                } 
            }
</script>
</head>
<body>
    <!--静态注册 onClick 事件-->
    <button onclick="onclickFun();">按钮 1</button>
    <!--动态注册 onClick 事件-->
    <button id="btn01">按钮 2</button>
</body>
</html>

onblur

静态注册和动态注册
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <script type="text/javascript"> // 静态注册失去焦点事件 
    function onblurFun() { // console 是控制台对象，是由 JavaScript 语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用 // log() 是打印的方法 
        console.log("静态注册失去焦点事件"); }
        // 动态注册 onblur 事件 
        window.onload = function () { //1 获取标签对象 
            var passwordObj = document.getElementById("password"); // alert(passwordObj); //2 通过标签对象.事件名 = function(){}; 
            passwordObj.onblur = function () { 
                console.log("动态注册失去焦点事件"); 
                } 
            } 
    </script> 
</head> 
    <body>
     用户名:<input type="text" onblur="onblurFun();"><br/> 
     密码:<input id="password" type="text" ><br/> 
    </body> 
</html>

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 selObj = document.getElementById("sel01"); // alert( selObj ); //2 通过标签对象.事件名 = function(){} 
    selObj.onchange = function () { 
        alert("男神已经改变了"); 
        } 
    } 
    </script> 
    </head> 
    <body> 
        请选择你心中的女神： 
        <!--静态注册 onchange 事件--> 
        <select onchange="onchangeFun();"> 
            <option>--女神--</option> 
            <option>芳芳</option> 
            <option>佳佳</option> 
            <option>娘娘</option> 
        </select> 
        
        请选择你心中的男神： 
        <select id="sel01"> 
            <option>--男神--</option> 
            <option>国哥</option> 
            <option>华仔</option> 
            <option>富城</option> 
        </select> 
    </body> 
</html>

onsubmit

静态提交与动态提交
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <script type="text/javascript" > 
    // 静态注册表单提交事务 
    function onsubmitFun(){ // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交 
        alert("静态注册表单提交事件----发现不合法"); 
        return flase; 
    }
    window.onload = function () { //1 获取标签对象 
        var formObj = document.getElementById("form01"); //2 通过标签对象.事件名 = function(){} 
        formObj.onsubmit = function () { // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交 
            alert("动态注册表单提交事件----发现不合法"); 
            return false; 
            } 
        } 
        </script> 
        </head> 
        <body> <!--return false 可以阻止 表单提交 --> 
            <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> 
</html>

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
vue2+高德地图web端开发（三）
MySQL数据库之多表关联关系（一对一、一对多、多对多）
Linux delay相关函数实现
11. Informer 机制总结
Linux 用户讲解（创建用户、修改用户属性、用户相关命令）
LeetCode 206. 反转链表
一键启动zookeeper、hadoop，spark集群
collect 详细解析 Java 8 Stream API 中的 collect 方法
LOAM: LiDAR Odometry and Mapping In Real Time源码解析(二)
vue3使用MarkDown编辑器并预览以及报错解决办法
;