JavaScript基础（二）——基础语法与函数基础

pro1822

已于 2022-04-14 16:03:48 修改

阅读量299

点赞数

分类专栏： JavaScript基础文章标签： javascript

于 2022-04-07 01:28:54 首次发布

本文链接：https://blog.csdn.net/qq_41523175/article/details/123998065

版权

JavaScript基础专栏收录该内容

14 篇文章 4 订阅

订阅专栏

一、变量与数据类型

1、结尾的分号可加可不加。

2、变量名可以由数字、字母、下划线、$组成，但是不能以数字开头。

3、六种数据类型：

数值（Number）：1，2，3...

字符串（String）：“hello world”

布尔（Boolean）：true、false

未定义（Undefined）：undefined

空（Null）：null

对象（Object）：{}

二、表达式与运算符

1、比较运算符

20 == “20” ： true（不比较数据类型，内部会自动进行类型转换）

20 === “20” ： false（比较数据类型，并且比较值）

20 != "20" ： false

20 !== "20" ： true

三、条件语句

1、switch语句

    <script>
        switch (op) {
            case "+":
                console.log(num1 + num2);
                break;
            case "-":
                console.log(num1 - num2);
                break;
            case "*":
                console.log(num1 * num2);
                break;
            case "/":
                console.log(num1 / num2);
                break;
            default:
                console.log("请输入正确的操作符");
        }
    </script>

2、三目运算符

    <script>
        num1 > num2 ? console.log("num1大于num2") : console.log("num1小于或等于num2");
    </script>

分析：

ｎｕｍ１＞ｎｕｍ２吗？

是的话，执行前半句，不是的话，执行后半句。

四、函数

1、函数的声明与调用

<!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>Demo02</title>
</head>

<body>
    <script>
        function fun() {
            console.log("hello world");
        }

        fun();
    </script>
</body>

</html>

效果如下：

分析：

先声明函数fun()，然后再调用函数fun()。

2、函数的传参

<!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>Demo02</title>
</head>

<body>
    <script>
        function fun(x, y) {
            var result = x * x + y * y;
            console.log(result);
        }

        fun(3, 4);
    </script>
</body>

</html>

效果如下：

分析：

fun(3,4)，就是将3作为x的值，4作为y的值，然后进入函数计算。

代入，得：result = 3 * 3 + 4 * 4 = 25;

3、函数的返回值（return）

<!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>Demo02</title>
</head>

<body>
    <script>
        function fun(x, y) {
            var result = x * x + y * y;
            return result;
        }

        console.log(fun(3, 4));
    </script>
</body>

</html>

效果如下：

分析：

函数的返回值的意思就是：当程序员调用函数时，这个函数就相当于一个表达式，它有它的返回值，返回值即为return后面的值。

4、示意图

5、案例——判断用户登录

<!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>Demo02</title>
</head>

<body>
    <script>
        function judge(username, password) {
            if (username === "admin" && password === "123456") {
                console.log("登陆成功！");
            } else {
                console.log("登陆失败");
            }
        }

        judge("xiaoming", "123456");
        judge("admin", "123");
        judge("admin", "123456");
    </script>
</body>

</html>

效果如下：