JavaScript学习（二）

最新推荐文章于 2024-05-06 15:03:18 发布

宋建国

最新推荐文章于 2024-05-06 15:03:18 发布

阅读量150

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/hot7732788/article/details/104742221

版权

前端技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript函数

1.函数的定义与调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //函数定义
        function fnMyalert(){
            alert("hello-world")
        }
        //函数执行
        function fnChange(){
            var oDiv = document.getElementById("div1");//获取div1的引用
            oDiv.style.color = "red";//改变文字的颜色
            oDiv.style.fontSize = "30px";//改变文字的大小
        }

    </script>

    
</head>
<body>
    <div id = "div1" onclick="fnMyalert()">这是一个div元素</div>
    <input type="button" name="" value="改变div" onclick="fnChange()">
</body>
</html>

2.提取行间事件-通过代码的形式控制html的一些操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function(){

            //获取按钮
            var oBtn = document.getElementById("btn01");
            //将事件属性和一个函数关联,函数不能写小括号，写了会马上执行
            oBtn.onclick = fnChange;

            //定义操作
            function fnChange(){
                var oDiv = document.getElementById("div1");//获取div1的引用
                oDiv.style.color = "red";//改变文字的颜色
                oDiv.style.fontSize = "30px";//改变文字的大小
            }
            
        }
    </script>

</head>
<body>
    <div id = "div1" >这是一个div元素</div>
    <input type="button" name="" value="改变div" id="btn01">
</body>
</html>

3.匿名函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function(){

            //获取按钮
            var oBtn = document.getElementById("btn01");

            //定义匿名函数
            oBtn.onclick = function fnChange(){
                var oDiv = document.getElementById("div1");//获取div1的引用
                oDiv.style.color = "red";//改变文字的颜色
                oDiv.style.fontSize = "30px";//改变文字的大小
            };

        }
    </script>

</head>
<body>
    <div id = "div1" >这是一个div元素</div>
    <input type="button" name="" value="改变div" id="btn01">
</body>
</html>

4.变量与函数的预解析（后面定义函数，前面调用）

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

        //预解析会把变量的声明提前弹出undefined
        alert(iNum);
        //预解析会让函数的声明和定义提前，可以正常使用
        myAlert();
        //使用一个未声明未定义的变量，在弹出undefined的同时程序就崩了
        // alert(iNum02);

        var iNum = 12;

        function myAlert() {
            alert("hello world");
        }


    </script>

</head>
<body>

</body>
</html>

5.函数传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            function fnMyalert(tmp){
            alert(tmp);
            }

            fnMyalert("hellow");

            function fnChangestyle(mystyle,value){
                var oDiv = document.getElementById("div1");
                oDiv.style[mystyle] = value;
            }

            fnChangestyle("color","red");
            fnChangestyle("fontSize","40px");

        }
    </script>

</head>
<body>
    <div id="div1">这是一个div元素</div>
</body>
</html>

6.函数返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
          function fnAdd(num1, num2) {
              var sum = num1 + num2;
              return sum;
          }

          var sum = fnAdd(2,5);
          alert(sum)

        }
    </script>

</head>
<body>
    <div id="div1">这是一个div元素</div>
</body>
</html>

分支语句

1.加法运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var oInput01 = document.getElementById("input1");
            var oInput02 = document.getElementById("input2");
            var oBtn01 = document.getElementById("btn1");

            oBtn01.onclick = function () {
                var iNum1 = oInput01.value;
                var iNum2 = oInput02.value;
                var sum = parseInt(iNum1) + parseInt(iNum2);
                alert(sum);
            }
        }
    </script>

</head>
<body>
    <input type="text" name="" id="input1"> +
    <input type="text" name="" id="input2">

    <input type="button" name="" value="相加" id="btn1">
</body>
</html>

2.求余-赋值运算符，条件运算符

在这里插入图片描述

==带有类型装换
===不带有类型转换，首先比较两边数据的类型，在比对两边的内容

3.条件语句

在这里插入图片描述

数组和循环语句

1.数组及操作方法

两种创建数组的方法
在这里插入图片描述
常用数组方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            //通过类的实例化来创建数组，知道这种方法就行，一般不用，这种方法性能不高。
            var aList01 = new Array(1,2,3);
            //通过直接量的方式创建数组
            var aList02 = [1,2,3];
            //弹出数组长度
            alert(aList02.length);
            //取第一个数组成员
            alert(aList02[0]);
            //添加一个成员
            aList02.push(4);
            //弹出一个成员，尾部
            aList02.pop();
            //对应的就是shift和unshift
            //从数组前面增加成员
            aList02.unshift(5);
            aList02.shift();
            //翻转
            aList02.reverse();
            //返回第一次出现的索引值
            aList02.indexOf(1)

        }
    </script>

</head>
<body>

</body>
</html>