JavaScript

1、JavaScript 介绍

在这里插入图片描述
在这里插入图片描述

2、JavaScript与Html结合的第一种方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js01</title>

    <script type="text/javascript">
        //alert是JavaScript语言提供的一个警告框函数
        //它可以接收任意类型的参数,这个参数就是警告框的提示信息
        alert("hello,javascript!")
    </script>
</head>
<body>

</body>
</html>

3、JavaScript与Html结合的第二种方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js02</title>
<!--
    src 属性专门用来引入js文件路径(可以是相对路径,也可以是绝对路径)

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

</body>
</html>

1.js:

alert("hello,JavaScript!")

4、变量

什么是变量?变量是可以存放某些值得内存和命名

JavaScript的变量类型:

  • 数值类型: number
  • 字符串类型: string
  • 对象类型: object
  • 布尔类型: boolean
  • 函数类型: function

JavaScript里的特殊的值:

  • undefined 未定义,所有js变量未赋于初始值时,默认值都是undefined
  • null 空值
  • NAN 全程是:Not a Number 非数字、非数值

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

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

    <script type="text/javascript">

        var i;

        i = 12;
        //typeof是JavaScript语言提供的一个函数
        // alert(typeof(i) );//number

        i = "abc"
        // alert(typeof(i));//String

        var a = 12;
        var b = "abc"

        alert(a*b);//NaN是非数字,非数值
    </script>

</head>
<body>

</body>
</html>

5、关系(比较)运算

等于: == 等于是简单的做字面值比较
全等于: === 除了做字面值比较之外。还会比较两个变量的数据类型

6、逻辑运算

且运算:&&
或运算:||
取反运算:!

在JavaScript语言中,所以的变量,都可以做为一个boolean类型的变量去使用

0、null、undefined、“”(空串)都认为是 flase;

/* &&运算
有两种情况:
第一种,当表达式全为真的时候。返回最后一个表达式的值
第二种情况:当表达式中,有一个为假的时候,返回第一个格为假的表达式的值

*/

    /*  ||或运算
    第一种情况:当表达式全为假时。返回最后一个表达式的值
    第二种情况:只有一个表达式为真,就会返回第一个为真的表达式的值

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

        /*  &&运算
        有两种情况:
        第一种,当表达式全为真的时候。返回最后一个表达式的值
        第二种情况:当表达式中,有一个为假的时候,返回第一个格为假的表达式的值

        */

        var a = "abc";
        var b = null;
        var c = 12;
        var d = 0;

        // alert(a&&b);//null
        // alert(c&&a);//abc
        // alert(a&&c);//12
        // alert(a&&d);//0

        /*  ||或运算
        第一种情况:当表达式全为假时。返回最后一个表达式的值
        第二种情况:只有一个表达式为真,就会返回第一个为真的表达式的值

        */

        // alert(b||d);//0
        // alert(a||b||d);//abc
        alert(b||c);//12


    </script>
</head>
<body>

</body>
</html>

7、数组定义方式

格式:
var 数组名 = []; //空数组
var 数组名 = [1,‘abc’,true]; //定义数组同时赋值元素

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

8、函数

8.1、函数的第一种定义方式

用function 关键字来定义函数

使用的格式如下:
function 函数名(形参列表){
函数体
}
在 JavaScrript 语言中,如何定义带有返回值的函数?
只需要在函数体内直接使用return语句返回值即可!

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

    <script type="text/javascript">
        //定义一个无参函数
        function fun1() {
            alert("无参函数fun()被调用了");
        }

        //函数调用才会被执行
        // fun1();

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

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

        alert(sum(50,100));

    </script>

</head>
<body>

</body>
</html>

8.2、函数的第二种定义方式

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

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

    <script type="text/javascript">

        var fun1 = function () {
            alert("无参函数fun1()被调用了");
        }

        // fun1();

        var fun2 = function (a,b) {
            alert("有参函数fun2()被调用了,a=" + a +",b=" +b)
        }
        // fun2(1,2);
        
        var sum = function (num1,num2) {
            var rs = num1 + num2;
            return rs;
        }

        alert(sum(20,30));

    </script>

</head>
<body>

</body>
</html>

8.3、函数的 arguments 隐形函数(在作用在function函数内)

在这里插入图片描述

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

    <script type="text/javascript">

        var fun1 = function (a) {

            alert(arguments[0]);
            alert(arguments[1]);
            alert(arguments[2]);

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

            alert("无参函数fun1()被调用了");
        }

         // fun1(1,"aa",true);

        function sum(num1,num2){
            var rs = 0;
            for (var i = 0; i <arguments.length ; i++) {
                if (typeof(arguments[i]) == "number" ){
                    rs += arguments[i];
                }
            }
            return rs
        }
        alert(sum(1,2,3,"abc",4,5,6,7,8));


    </script>
</head>
<body>

</body>
</html>

9、JS中的自定义对象

9.1、Object 形式的自定义对象

对象的定义:
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();
        obj.name = "华仔";
        obj.age = 18;

        obj.fun = function () {
            alert("姓名:"+this.name +",年龄:" + this.age);
        }

        alert(obj.fun());

    </script>

</head>
<body>

</body>
</html>

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

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

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

        var obj = {

            name: "abc",
            age: 18,
            fun: function () {
                alert("name:" + this.name + ",age:" + this.age);
            }

        };

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

</body>
</html>

10、js中的事件

什么是事件?事件是电脑输入设备与页面进行交互的响应。我们称之为事件

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

事件的注册又分为静态注册和动态注册两种:
在这里插入图片描述

10.1、onload事件

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

    <script type="text/javascript">
        function onloadfun(){
            alert("静态注册onload事件,所以代码");
        }

        window.onload = function () {
            alert("动态注册的onload事件");
        }
    </script>
</head>
<!--静态注册onload事件
        onload事件是浏览器解析完页面之后就会自动触发的事件
        <body οnlοad="onloadfun();">
        -->
<body>

</body>
</html>

10.2、onclick事件

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

    <script type="text/javascript">
        //静态注册onclick事件
        function onclickfun() {
            alert("静态注册onclick事件");
        }

        //动态注册onclick事件
        window.onload = function () {
            //1 获取标签对象
            /*
            * document 是JavaScript语言提供的一个对象(文档)
            * get       获取
            * Element   元素
            * By        通过。。    由。。经。。
            * Id        id属性
            * */
            var btnobj = document.getElementById("btn1");

            //通过标签对象.事件名 = function(){}
            btnobj.onclick = function () {
                alert("动态注册onclick事件");
            }
        }




    </script>
</head>
<body>

    <button onclick="onclickfun();">按钮1</button>
    <button id="btn1">按钮2</button>

</body>
</html>

10.3、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("静态注册失去焦点事件");
        }

        //动态注册失去焦点事件
        window.onload = function () {
            //1.获取标签对象
            var passwordobj = document.getElementById("password");

            //2.通过标签对象.事件名 = function(){}
            passwordobj.onblur = function () {
                console.log("动态注册失去焦点事件");
            }
        }

    </script>

</head>
<body>

    用户名:<input type="text" onblur="onblurfun();" /><br/>
    密码:<input  id="password" type="text" />


</body>
</html>

10.4、onchange事件

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

    <script type="text/javascript">
        //静态注册onchange事件
        function onchangefun() {
            alert("女神已经改变了");
        }

        //动态注册onchange事件
        window.onload = function () {
            //1.获取标签对象
            var sel01obj = document.getElementById("sel01");
            //2.标签对象.事件名 = function(){}
            sel01obj.onchange = function () {
                alert("动态注册onchange事件");
            }
        }
    </script>
</head>
<body>
    请选择你的女神:
        <select onchange="onchangefun();">
            <option>--女神--</option>
            <option>--女神1--</option>
            <option>--女神2--</option>
            <option>--女神3--</option>
        </select>
    请选择你的男神:
    <select id="sel01" onchange="onchangefun();">
        <option>--男神--</option>
        <option>--男神1--</option>
        <option>--男神2--</option>
        <option>--男神3--</option>
    </select>
</body>
</html>

10.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 () {
            //1.获取标签对象
            var form01obj = document.getElementById("form01");
            //2.通过标签对象.事件名 = function(){}
            form01obj.onsubmit = function () {
                alert("动态注册表单事件,--表单不合法--");

                return false;
            }
        }
    </script>
</head>
<body>
<!--return false 可以阻止 表单提交-->
<form  action="https://www.baidu.com/" method="get" onsubmit="return onsubmitfun();" >
    <input type="submit" value="静态注册"  / >
</form>
<form id="form01" action="https://www.baidu.com/"   >
    <input type="submit" value="动态注册" >
</form>

</body>
</html>

11、DOM 模型

在这里插入图片描述

11.1、Document对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

11.2、Document 对象中的方法介绍

在这里插入图片描述
在这里插入图片描述

11.3、getElementById 方法

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

    <script type="text/javascript">
        /*
        * 需求 当用户点击了校验按钮,要获取输出框中的内容,然后验证其是否合法。
        * 验证的规则是:必须由字母、数字、下划线组成,并且长度是5到12位
        * */
        function onclickfun() {
            // 1 当我们要操作一个标签时,一定要先获取这个标签的对象
            var usernameobj = document.getElementById("username");

            var usernameText = usernameobj.value;
            //如何 验证 字符串,符合某个规则,需要使用到正则表达式技术
            var patt = /^\w{5,12}$/;
            /*
            * test()方法用于测试某个字符串,是不是匹配我的规则
            * 匹配就返回true,不匹配就返回false
            * */
            if (patt.test(usernameText)){
                alert("用户名合法");
            }else {
                alert("用户名不合法");
            }
        }
    </script>
</head>
<body>

    用户名:<input type="text" id="username" value="wzg"/>
    <button onclick="onclickfun()">校验</button>
</body>
</html>

11.3 getElementsByName 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <script type="text/javascript">
        //全选
        function checkAll() {
            //让所有复选框都选中
            //document.getElementsByname();是根据 指定的name属性查询返回多个标签对象的集合
            //这个集合的操作和数组一样
            //集合中每个元素都是dom对象
            //这个集合中的元素顺序是他们在html页面从上到下的顺序
            var hobbies = document.getElementsByName("hobby");
            //checked表示复选框的选中状态,如果选中是true,不选中是false
            //checked 这个属性可读,可写
            for (var i = 0; i <hobbies.length ; i++) {
                hobbies[i].checked = true;
            }

        }
        //全不选
        function checkNo() {
            var hobbies = document.getElementsByName("hobby");
            //checked表示复选框的选中状态,如果选中是true,不选中是false
            //checked 这个属性可读,可写
            for (var i = 0; i <hobbies.length ; i++) {
                hobbies[i].checked = false;
            }
        }
        //反选
        function checkReverse() {

            var hobbies = document.getElementsByName("hobby");
            //checked表示复选框的选中状态,如果选中是true,不选中是false
            //checked 这个属性可读,可写
            for (var i = 0; i <hobbies.length ; i++) {
                hobbies[i].checked = !hobbies[i].checked;

                // if (hobbies[i].checked){
                //     hobbies[i].checked = false;
                // }else {
                //     hobbies[i].checked = true;
                // }

            }

        }
        
        
    </script>
</head>
<body>
    你的兴趣爱好是:
    <input type="checkbox" name="hobby" checked="checked">java
    <input type="checkbox" name="hobby">c++
    <input type="checkbox" name="hobby">js
    <br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>

11.3 getElementsByTagName 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <script type="text/javascript">
        //全选
        function checkAll() {
            //document.getElementsByTagName("input");是按照指定标签名进行查询并返回集合
            //这个集合的操作跟数组一样
            //集合中都是dom对象
            //集合中元素顺序 是他们在html页面中从上到下的顺序
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i <inputs.length ; i++) {
                inputs[i].checked = true;
            }

        }
    </script>
</head>
<body>
    你的兴趣爱好是:
    <input type="checkbox"  checked="checked">java
    <input type="checkbox" >c++
    <input type="checkbox" >js
    <br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>

12、正则表达式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

13、两种常见的验证提示效果

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

    <script type="text/javascript">
        /*
        * 需求 当用户点击了校验按钮,要获取输出框中的内容,然后验证其是否合法。
        * 验证的规则是:必须由字母、数字、下划线组成,并且长度是5到12位
        * */
        function onclickfun() {
            // 1 当我们要操作一个标签时,一定要先获取这个标签的对象
            var usernameobj = document.getElementById("username");

            var usernameText = usernameobj.value;
            //如何 验证 字符串,符合某个规则,需要使用到正则表达式技术
            var patt = /^\w{5,12}$/;

            var usernameSpanObj = document.getElementById("usernamespan");
            //innerHTML 表示起始标签和结束标签中的内容
            //innerHTML 这个属性可读,可写
            usernameSpanObj.innerHTML = "可读可写!";

            /*
          * test()方法用于测试某个字符串,是不是匹配我的规则
          * 匹配就返回true,不匹配就返回false
          * */
            if (patt.test(usernameText)){
                // usernameSpanObj.innerText = "用户名合法";
                usernameSpanObj.innerHTML ="<img src=\"7.png\" width=\"18\" height=\"18\" >" ;
            }else {
                usernameSpanObj.innerText = "用户名不合法";
                usernameSpanObj.innerHTML ="<img src=\"8.png\" width=\"18\" height=\"18\" >" ;
            }

        }
    </script>
</head>
<body>

    用户名:<input type="text" id="username" value="wzg"/>
    <span id="usernamespan" style="color: red">

    </span>
    <button onclick="onclickfun()">校验</button>
</body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值