Java教程

JavaScript

本文主要是介绍JavaScript,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

 

/*
时间:2021/12/07
功能:CSS
目录: 
    一: 引入
    二: 数据类型
    三: 函数
    四: 作用域
    五: 条件语句
    六: 获取标签元素
    七: 获取标签属性和设置
    八: 数组
    九: 定时器
*/

 

一: 引入

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

    <!-- 内嵌式 -->
    <script>
        alert("内嵌式_Js")
    </script>

    <!-- 外链式 -->
    <script src="js/main.js"></script>
    <script>
        fnShow();
    </script>

</head>
<body>
    <!-- 行内式 -->
    <input type="button" value="按钮" onclick="alert('行内式_Js')"
</body>
</html>

 

alert("外链式_Js")

function fnShow(){
    alert("OK")
}

1 : 文件 main.js


二: 数据类型

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

    <script>   
        //  注释: ctrl + /
        var iNum1 = 1;      // 定义类型 - 数字
        var fNum2 = 1.1;    // 定义类型 - 数字
        var sName = "张三"; // 定义类型 - 字符串
        var bIsOK = true;   // 定义类型 - 布尔
        var unData;         // 定义类型 - 未初始化
        var oData = null;   // 定义类型 - 空对象

        console.log(typeof(iNum1))
        console.log(typeof(fNum2))
        console.log(typeof(sName))
        console.log(typeof(bIsOK))
        console.log(typeof(unData))
        console.log(typeof(oData))

        var oPerson = {
            name : "王五",
            age : "20"
        }
        alert(oPerson.name)
        console.log(oPerson.name, oPerson.age)

    </script>
</head>
<body>
    <!--  -->
</body>
</html>

 


三: 函数

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

    <script>
        function fnShow(){
            alert("无参 无返回值 函数")
        };
        fnShow()

        function fnSum(iNum1, iNum2){
            var iResult = iNum1 + iNum2;
            return iResult
        }
        var iNum = fnSum(2, 4);
        alert(iNum);

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

 


四: 作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script>
        function fnShow(){
            var iNum = 1;   // 局部变量;
            alert("fnShow(): " + iNum)
        }

        fnShow();
        // alert(iNum);   // Uncaught ReferenceError: iNum is not defined

        var iNum1 = 1;  // 全局变量;
        function fnModify(){
            alert("fnModify(): " + iNum1);
            iNum1 = 3;
            iNum1++;
            ++iNum1;
            alert("fnModify(): " + iNum1);
        }
        fnModify();

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

 


五: 条件语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var iNum1 = 3;
        var sString = "3";
        if(iNum1 == sString){
            var sResult = "iNum1和sString, 数据都一样"
            alert(sResult)
        }else{
            var sResult = "iNum1和sString, 数据都不一样"
            alert(sResult)
        }

        if(iNum1 === sString){
            var sResult = "iNum1和sString, 类型和数据都一样"
            alert(sResult)
        }else{
            var sResult = "iNum1和sString, 类型和数据至少有一个不一样"
            alert(sResult)          
        }

        // 拼接: 字符串 + 数字; 底层把数字类型转成字符串, 这种操作隐式类型转换
        var sResult =  iNum1 + sString
        alert(typeof(sResult))
    </script>
</head>
<body>
    
</body>
</html>

 


六: 获取标签元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 完全写法
        // function fnLoad(){
        //     var oP = document.getElementById("p1");
        //     console.log("fnLoad", oP);
        //     alert(oP)
        // };
        // window.onload = fnLoad;

        // 等待加载完成: 页面标签 + 数据
        window.onload = function(){
            var oP = document.getElementById("p1");
            console.log("function()", oP);
            alert(oP);
        };

    </script>
</head>
<body>
    <p id="p1"> 段落标签</p>
</body>
</html>

 


七: 获取标签属性和设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn1"); // 获取id
            console.log(oBtn.type, oBtn.value);
            
            oBtn.name = "username";              // 设置属性 : name
            oBtn.style.background = "green";     // 设置属性 : 样式
            oBtn.className = "benstyle";         // 设置属性 : class
            oBtn.style.fontSize = "30px";        // 设置属性 : 字体大小

            var oDiv = document.getElementById("div1")
            console.log(oDiv.innerHTML)
            oDiv.innerHTML = "<a href='http://www.baidu.com'>百度</a>"  //  设置标签内容
        }
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn1">
    <div id = "div1">
            Don't Sleep
    </div>
</body>
</html>

 


八: 数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 定义数组
        var aArray1 = new Array(1, 2, 3);
        var aArray2 = [3, 7, 9];
        console.log(aArray1);   // 打印元素
        console.log(aArray2);   // 打印元素

        var aArray3 = [[1, 4, 2], [9, 0, 2]];
        console.log(aArray3, aArray3[0, 3]);    // 打印元素
        
        var aArray4 = [2, 3, 7];
        console.log(aArray4)
        console.log("aArray4.length", aArray4.length);    // 元素个数

        aArray4[1] = 26;    // 修改元素
        console.log(aArray4);

        aArray4.push("hi"); // 添加元素
        console.log(aArray4); 

        aArray4.splice(2, 2);   // 添加元素: 参数1-开始下标; 参数2-删除个数;
        console.log(aArray4);

        aArray4.splice(1, 0, "苹果", 66) // 添加元素:参数1-开始下标; 参数2-删除个数;  参数3-添加内容;
        console.log(aArray4)
    </script>
</head>
<body>
    
</body>
</html>

 


九: 定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 定时器 : 调用一次
        // 参数: 1 - 执行函数; 2 - 时间间隔; 3 - 传参
        var tid = setTimeout(fnShow, 2000, "张三", 20)       
        function fnShow(name, age){
            alert("ok" + name + age)
            alert(tid)
            clearTimeout(tid)    // 销毁定时器
        }

        // 定时器 : 间隔时间
        var tidStop = setInterval(fnShowInfo, 3500, "李四", 22);
        function fnShowInfo(name, age){
            alert("ok" + name + age)
        }
        function fnStop(){
            alert(tidStop)
            clearInterval(tidStop); // 销毁定时器
        }

    </script>
</head>
<body>
    <input type="button" value="停止" onclick="fnStop()">
</body>
</html>

 

这篇关于JavaScript的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!