JS-学习-CSDN博客

本文链接：https://blog.csdn.net/weixin_59269336/article/details/124171530

一、为什么学习JS？

- 页面内容处理

- 数据的校验

- 页面动画的处理

- 通过代码控制浏览器的一些DOM行为

二、JS的特点

- 运行在浏览器上的脚本语言

- 脚本语言，比较简单的程序，不需要编译就可以运行

- 基于对象的语言，没有“继承”的特点

- 事件驱动

- 简单性

- 不能访问本地硬板，不能将数据存储到服务器

- JS本身依赖于浏览器，跨平台性比较强

JS和Python的区别：

- 基于对象和面向对象

- 运行位置不同， Python运行于服务器端， JS运行于客户端的小规模语言

HTML:骨架

CSS:衣服

JS:可以互动

三、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>
        // 内嵌式引入
        // 定义一个方法
        function fun(){
            alert("你好");
        }
        // 
    </script>
</head>
<body>
    <input type="button" value="点我呀" onclick="fun()">
</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>
    <!-- 链接式引入
        1. 提高代码利用率
        2. 降低代码维护难度

        - 一个页面可以引入多个不同js文件
        - 一个页面上可以有多对script标签， 位置也并不是一定要放在header标签里面
        - script标签如果用于引用外部文件就不能再在里面嵌入js代码
    -->
    <script src="./JS/myjs1.js"></script>
    <script src="./JS/myjs2.js"></script>
    <!-- <script src="URL网络路径"></script> -->
    <script>
        function fun3(){
            alert("内嵌式")
        }
    </script>
</head>
<body>
    <input type="button" value="点我呀" onclick="fun1()">
    <input type="button" value="点我呀" onclick="fun2()">
    <input type="button" value="内嵌式" onclick="fun3()">
</body>
</html>

外链式引入可以分为两个，一个是引入本地文件，另一个是引入网络文件，引入本地文件的时候一定要注意路径问题。

四、JS中的流程控制

- 顺序结构

- 分支结构if switch for

- 循环结构while do_while for

<!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 i = 10;
        //  if(i == 12 || i == 1 || i == 2){
        //     alert("大约在冬季！");
        //  }else if(i >= 3 && i <= 5){
        //     alert("春季");
        //  }else if(i >= 6 && i <= 8){
        //     alert("夏天到了")
        //  }else if(i >= 9 && i <= 11){
        //     alert("秋天到了")
        //  }else{
        //      alert("月份有误！")
        //  }
        var i = 7;
        if(i == 1 || i ==12 || i == 2){
            alert("冬天！");
        }else if(i >= 3 && i <= 5){
            alert("春季");
        }else if(i >= 6 && i <= 8){
            alert("夏季")
        }else if(i >= 9 && i <= 11){
            alert("秋季！")
        }else{
            alert("月份有误！")
        }
        switch(i){
            case 3:
            case 4:
            case 5:
                alert("春天");
                break;
            case 6:
            case 7:
            case 8:
                alert("夏天");
                break;
            case 9:
            case 10:
            case 11:
                alert("秋天");
                break;
            case 12:
            case 1:
            case 2:
                alert("冬天");
                break;
            default:
                alert("您输入的月份有误！");
        }
     </script>
</head>
<body>
</body>
</html>

注意：

在使用switch--case的时候一定要加上break

<!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 i = 1;
        while(i <= 10){
            alert(i);
            i++;
        }

        var sum = 0;
        var j = 0;
        do{
            sum += j
            j++;
        }while(j <= 10);
        alert(sum)

        var sum2 = 0;
        for(var z = 1; z <= 10; z++){
            sum2 += z;
        }
        alert(sum2);
    </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>
        for(var i = 1; i <= 9; i++){
            for(var j = 1; j <= i; j++){
                document.write(i + "*" + j + "=" + i*j)
                document.write("\t&nbsp;&nbsp;&nbsp;");
            }
            document.write("<br/>");
        }
    </script>
</head>
<body>
    
</body>
</html>

五、 JS中函数的声明

定义函数的三种方法：

第一种方法：

function 函数名(){

}

第二种方法：

var 函数名 = function(){

}

第三种方法：

var 函数名 = new Function("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>
        function func1(){
            alert("Hello World!");
        }
        var func2 = function(){
            alert("你好！");
        }
        var func3 = new Function("alert('你非常好！');");

        func1();
        func2();
        func3();
    </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 func1(a, b, c){
            alert("a："+a);
            alert("b："+b);
            alert("c："+c);
        }
        func1(10, '20', false);
        func1(1, 2);
        func1(1, 2, 3, 4, 5);

        function func2(a, b){
            return a * b;
        }
        alert(func2(1, 2))

        function func3(a, b){
            return a + b;
        }
        function func4(a){
            return a(1, 2);
        }
        alert(func4(func3));
    </script>
</head>
<body>
    
</body>
</html>