Python 高级：08 JavaScript

最新推荐文章于 2024-08-18 22:49:52 发布

马尔盖云

最新推荐文章于 2024-08-18 22:49:52 发布

阅读量210

点赞数

分类专栏： Python 文章标签： python

本文链接：https://blog.csdn.net/maergaiyun/article/details/112324800

版权

Python 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

一、JavaScript 介绍

1. JavaScript 的定义

Javascript 是运行在浏览器端的脚本语言，是由浏览器解释执行的，简称 JS，它能够让网页和用户有交互功能，增加良好的用户体验效果。
前端开发三大块：
（1）HTML：负责网页结构
（2）CSS：负责网页样式
（3）JavaScript：负责网页行为

2. JavaScript 的使用方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 3、外链式 -->
    <script src="js/main.js"></script>
    <!-- 2、内嵌式 -->
    <script>
        alert("thk2")
    </script>
</head>
<body>
    <!-- 1、行内式 -->
    <input type="button" value="button" onclick="alert('thk1')">
</body>
</html>

二、变量和数据类型

1. 定义变量

JavaScript 是一种弱类型语言，不需要指定变量的类型，JavaScript 的变量类型由它的值来决定，定义变量需要关键字'var'，一条 JavaScript 语句应该以“；”结尾。
定义变量的语法格式：
var 变量名 = 值

2. 数据类型

5种基本数据类型：
（1）number：数字类型；
（2）string：字符串类型；
（3）boolean：布尔类型 true 和 false；
（4）undefined：undefined 类型，变量声明未初始化，值是 undefined；
（5）null：null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为 null，在页面上获取不到对象，返回的值是 null。
1种复合类型：
数组、函数和 JavaScript 对象都属于复合类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //  单行注释
        /*
            多行注释
        */
        // 数字和字符串类型
        var iNum1 = 10;
        var sStr1 = "str1";
        var iNum2 = 11, sStr2 = "str2";
        /*
        alert(iNum1);
        alert(sStr1);
        alert(iNum2);
        alert(sStr2);
        */
        // boolean类型
        var bBt = true;
        console.log(typeof(bBt));
        console.log(bBt);
        // undefined类型
        var uD;
        console.log(typeof(uD));
        console.log(uD);
        // null类型
        var nD = null;
        console.log(nD);
        // 查看null对象的类型返回的是object类型，其实是null类型
        console.log(typeof(nD));
        // 数组对象类型
        var oObj = {
            attr1: "attr1",
            attr2: "attr2"
        };
        alert(typeof(oObj))
        alert(oObj.attr1)
    </script>
</head>
<body>
    
</body>
</html>

3. 变量命名规范

（1）区分大小写；
（2）第一个字符必须是字符、下划线“_”或者“$”符号；
（3）其他字符可以是字母、下划线、美元符号或数字。

4. 匈牙利命名风格

（1）对象 Object，例：oDiv
（2）数组 Array，例：oItems
（3）字符串 String，例：sUserName
（4）整数 Integer，例：iItemCount
（5）布尔值 Boolean，例：bIsComplete
（6）浮点数 Float，例：fPrice
（7）函数 Function，例：fnHandler

三、函数的定义和调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 定义函数(无参数无返回值)
        function show_info(){
            alert("无参数无返回值的函数")
        };

        // 函数调用
        show_info();

        // 定义函数(有参数有返回值)
        function sum(iNum1, iNum2){
            var res = iNum1 + iNum2;
            console.log(res);
            return res;
            alert("return之后的代码不执行！")
        };
        // 如果函数没有返回值，会返回一个undefined
        var iNum = sum(1, 7);
        alert(iNum)
    </script>
</head>
<body>
    
</body>
</html>

四、变量作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 定义全局变量
        var iNum1 = 20;

        // 定义函数
        function info(){
            // 定义局部变量，局部变量只能在函数内部使用，在函数外不能访问和使用
            var iNum2 = 10;
            alert(iNum2);
        };

        function sum(){
            var res = iNum1 + 20;
            alert(res);
            iNum1++;
            iNum1 += 20;
            
        };

        info();
        sum();
        // 外部使用局部变量，报错
        // alert(iNum2);
        alert("finally:" + iNum1)
    </script>
</head>
<body>
    
</body>
</html>

五、条件语句

1. 语法

（1）if 语句：只有当指定条件为 true 时，使用该语句来执行代码；
（2）if……else 语句：当条件为 true 时执行代码，当条件为 false 时执行其它代码；
（3）if……else if……else 语句：使用该语句来判断多条件，执行条件成立的语句；

2. 比较运算符

比较运算符	描述
==	等于
===	全等（值和类型）
!=	不等于
>	大于
<	小于
>=	大于或等于
<=	小于或等于

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var iNum1 =10;
        var iStr = '10';
        // 把字符串和数字进行比较的时候，先把字符串转成数字，然后再进行比较
        // 把字符串转成数字这个操作时自动转换的，也称为自动类型转换
        /*
        if(iNum1 == iStr){
            alert("true");
        }else{
            alert("false");
        };

        if(iNum1 > iStr){
            alert("true");
        }else{
            alert("false");
        };
        */

        // 既判断数据类型，又判断数据大小需要使用“===”
        /*
        if(iNum1 === iStr){
            alert("true");
        }else{
            alert("false");
        };
        */

        /*
        var bIsOk = true;
        if(bIsOk){
            alert("条件是真的")
        }
        */

        // if 结合比较运算符
        var iHeight = 1.7
        if(iHeight < 1.6){
            alert("巨矮");
        }else if(iHeight < 1.7){
            alert("矮");
        }else if(iHeight < 1.8){
            alert("中等");
        }else if(iHeight < 1.9){
            alert("高");
        }else{
            alert("巨高");
        };
    </script>
</head>
<body>
    
</body>
</html>

六、获取标签元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <script>
        // 自定义的函数，设置onload事件，加载成功以后会执行传入的函数
        /*
        function load(){
            alert("执行回调函数");
            var oD = document.getElementById("div");
            alert(oD);
        };
        window.onload = load;
        */

        // 设置匿名函数，让页面加载完成以后执行传入的匿名函数
        window.onload = function(){
            var oD = document.getElementById("div")
            alert(oD)
        }
    </script>
<body>
    <div id="div">

    </div>
</body>
</html>

七、操作标签元素属性

1. 属性的操作

首先获取页面的标签元素，然后可以对页面的标签元素的属性进行操作，属性的操作包括：
● 属性的读取
● 属性的设置
属性名在 js 中的写法：
（1）html 的属性和 js 里面的属性大多数写法一样，但是“class”属性改写成“className”；
（2）“style”属性里面的属性，有横港的改成驼峰式，比如：“font-size”改写成“style.fontSize”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .mya {
            color: yellow;
            font-size: 30px;
        }
        .myb {
            color: blueviolet;
            font-size: 50px;
        }
    </style>

    <script>        
        window.onload = function() {
            // 页面加载完成的时候获取iput标签
            var oInput = document.getElementById('uid');
            var oA = document.getElementById('link1');
            alert(oInput);
            alert(oA);
            //  对象获取成功以后，对属性进行读取
            var name = oInput.name;
            var value = oInput.value;
            var type = oInput.type;
            console.log("name:" + name);
            console.log("value:" + value);
            console.log("type:" + type);
            //  对属性进行设置
            // oA.style.color = 'red';
            // oA.style.fontSize = '30px';
            alert(oA.id);

            //  设置class属性，class = 'mya'
            oA.className = "myb";
        }
    </script>

</head>
<body>
    <input type="text" name="username" id="uid" value="李四">

    <a href="http://www.baidu.com" class="mya" id="link1">百度</a>
</body>
</html>

2. innerHTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    #div1 {width: 200px;height: 200px;border: 1px solid black;}
</style>
</head>

<body>
<input id="txt1" type="text">
<input id="put1" type="button" value="改文字" />
<br/><br/>
<div id="div1"></div>
<script>
    var otxt=document.getElementById('txt1');
    var oput=document.getElementById('put1');
    var odiv=document.getElementById('div1');
    oput.onclick=function()
    {
        odiv.innerHTML=otxt.value;/*innerHTML里面就是正常的HTML，可以放上p、h1等*/
    }
</script>
</body>
</html>

3. 数组及操作方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1. 实例化对象方式创建
        // var oArray = new Array("MAC", "vlan", "ARP", 4095, 288);
        // console.log(oArray)
        // 2. 字面量方式创建
        // var oArray = ["MAC", "vlan", "ARP", 4095, 288];
        // console.log(oArray)

        // 定义多维数组
        // var aList = [["MAC", "vlan", "ARP"], [4095, 288]];
        // alert(aList)
        
        // 获取数组的长度
        var oArray = ["MAC", "vlan", "ARP", 4095, 288];
        // alert("oArray的长度：" + oArray.length);
        
        // 根据下标获取对应的元素
        var value1 = oArray[1];
        // alert("oArray[1]：" + value1);
        // 不支持负数下标
        var value2 = oArray[-1];
        // alert("oArray[-1]：" + value2);
        
        // 根据下标修改指定个数的数据，第一个参数是操作的下标，第二个参数是删除的个数，第三个参数是添加的数据
        // oArray.splice(0, 2, "vrrp");
        // oArray.splice(0, 2, "vrrp", "RIP");
        // alert(oArray);
        
        // 根据下标修改元素
        // oArray.splice(1, 1, "vrrp");
        // alert(oArray);
        
        // 根据下标删除一个元素，第一个参数是操作的下标，第二个参数是删除的个数
        // oArray.splice(2, 1);
        // alert(oArray);
        
        // 根据下标插入指定元素，第一个参数是操作的下标，第二个参数是删除的个数，第三个参数是添加的数据（后面都是添加的数据）
        // oArray.splice(1, 0, "dhcp");
        // oArray.splice(1, 0, "dhcp", "stp");
        
        // 追加一个元素
        // oArray.push(255);
        // alert(oArray);
        
        // 删除最后一个元素
        oArray.pop();
        alert(oArray);
    </script>
</head>
<body>
    
</body>
</html>

八、循环语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 定义一个数据
        // for循环
        var oArray = ["vrrp", "dhcp", "stp"];
        /*
        for(var i = 0; i < oArray.length; i++){
            var value = oArray[i];
            alert(value);
        };
        */

        // while循环
        /*
        var index = 0;
        while(index < oArray.length){
            var value = oArray[index];
            alert(value);
            index++
        };
        */

        // do-while循环
        // 条件不成立do语句会执行一次，条件成立do语句会循环执行，while语句只有条件成立才会执行
        var index = 3;
        do{
            alert("条件不成立也会执行");
            var value = oArray[index];
            alert(value);
            index++;
        }while(index < oArray.length);

    </script>
</head>
<body>

</body>
</html>

九、字符串拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var sStr1 = 'vrrp';
        var sStr2 = 'dhcp';
        var res1 = sStr1 + sStr2;
        // alert(res1);

        var res2 = res1 += 'stp';
        // alert(res2);

        // 字符串和数字类型进行+运算，得到的结果是字符串
        var iNum1 = 10;
        var sStr3 = "rip";
        var res3 = iNum1 + sStr3;
        // alert(res3);

        var sStr4 = '18.8';
        var sStr5 = '28.8';
        var res4 = sStr4 + sStr5;
        // alert(res4);

        // 对字符串类型转换
        // float型
        var res5 = parseFloat(sStr4) + parseFloat(sStr5);
        alert(res5);
        // int型
        var res6 = parseInt(sStr4) + parseInt(sStr5);
        alert(res6);
    </script>
</head>
<body>
    
</body>
</html>

十、定时器

1. 定时器的介绍

定时器是在一段特定的时间后执行某段程序代码。

2. 定时器的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.无参函数
        /*
        function show_info(){
            var oDate = new Date();
            console.log(oDate.toLocaleString());
            clearTimeout(t1);
        };
        */
        // 延时调用一次指定函数
        // 第一个参数是执行的函数名，第二个参数是延时的时间
        // 返回值是定时器的标识符，创建的第几个定时器
        // var t1 = setTimeout(show_info, 1000);
        // alert(t1);

        // 2.有参函数
        /*
        function show_info(info){
            alert(info);
            // 清除定时器
            clearTimeout(t2);
        };
        var t2 = setTimeout(show_info, 1000, "first");
        */

        // 3.循环根据指定事件执行对应的函数
        var count = 1;
        function show_info(){
            var oDate = new Date();
            console.log(oDate.toLocaleString());
            if(count == 20){
                clearInterval(t3);
            };
            count += 1;
        }
        var t3 = setInterval(show_info, 1000);
    </script>
</head>
<body>
    
</body>
</html>