JS学习归纳1

SPIRIT_SYF

于 2024-04-13 15:31:35 发布

阅读量948

点赞数 26

文章标签：学习前端 javascript 开发语言

本文链接：https://blog.csdn.net/SPIRITE_SYF/article/details/137693745

版权

在学习了HTML和CSS以后我们就可以去构建一个网页的框架，但是这个框架太过生硬，我们希望可以对这个框架做一个优化，这个时候就需要我们去学习JS。

JS语言同其他的编程语言基本一致，所以如果有其它语言的学习基础，这部分内容理解起来应该比较流畅。

在此之前我们先学习一些输入输出的基本使用，为了方便我们学习过程中的测试。

1、alert（变量）弹出警示框，显示变量的内容

2、console.log(变量) ; 在监控台显示内容，给程序员看

3、prompt('提示语')；用户输入。

然后再明白，JS的使用和CSS很像，书写的位置可以是1、行内 2、内嵌 3、外部书写再引用，但是这里需要重新写一个标签<script src="路径"></script>, 这里面不可以写内容

现在我们开始JS的学习！

一、变量

本质：变量是程序在内存中申请的一块用来存放数据的空间。变量是用于存放数据的容器。我们通过变量名获取数据，数据可以修改。

1.1 变量的声明 var（variable）

var 变量名；

变量名的规范：

1、由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成。

2、严格区分大小写。var app; 和 var App; 是两个变量。

3、不能以数字开头。 18age 是错误的。

4、不能是关键字、保留字。例如：var、for、while。

5、变量名必须有意义。 MMD BBD nl → age。

6、遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName

1.2 变量的赋值

变量名 = 值；就是把某个值给这个变量。

1.3 变量初始化

其实就是同时声明又赋值。

var 变量名 = 值；例如： var user_name='haa';

其实，除此之外我们还可以同时对多个内容进行初始化：

var 变量名1 变量1的值，变量名2 变量2的值，变量名3 变量3的值；

1.4 变量的使用注意事项

1、避免不声明，这样格式更统一，而且更规范避免不必要的BUG。

2、不声明，而且不赋值直接使用是会报错的。

3、对同一个值多次赋值，保存的是最后一次的内容。

1.5 简单的输入输出的使用案例


<!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>
    <script>
        // 1. 用户输入姓名  存储到一个 user_name的变量里面
        var user_name = prompt('请输入您的名字');
        // 2. 输出这个用户名
        alert(user_name);
    </script>
</head>

<body>

</body>

</html>

1.6 值交换案例

<!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>
    <script>
        // 1. 我们需要一个临时变量帮我们
        // 2. 把apple1 给我们的临时变量 temp 
        // 3. 把apple2 里面的苹果给 apple1 
        // 4. 把临时变量里面的值 给 apple2 
        var temp; // 声明了一个临时变量为空
        var apple1 = '青苹果';
        var apple2 = '红苹果';
        temp = apple1; // 把右边给左边
        apple1 = apple2;
        apple2 = temp;
        console.log(apple1);
        console.log(apple2);
    </script>
</head>

<body>

</body>

</html>

1.7 如何理解变量

1、因为我们一些数据需要保存，我们选择使用变量来存储。

2、变量就是一个容器，用来存放数据的。方便我们以后使用里面的数据。

3、变量是内存里的一块空间，用来存储数据。

二、数据类型

2.1 如何理解数据类型

为什么我们要设置数据类型。因为在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。变量是用来存储值的所在处，它们有名字和数据类型。

和其他语言不同的是，JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

JS只用 var 声明，无法直接确定变量类型。我们是通过变量的值确定变量的数据类型的。

2.2 数据类型的举例

var num=1；这个是数字型；

var user_name=‘狗蛋’；这个是字符串型；

注意：变量可以被覆盖，所以变量的数据类型会变化！！！这个和其他语言不一样。

2.2.1 数据类型分为两大类

1、简单数据类型（Number,String,Boolean,Undefined,Null）

Number数字型：

1、包括整数、浮点数。

2、制有二进制、八进制、十进制、十六进制。在JS中八进制前面加0，十六进制前面加 0x。

3、数字型又范围：

最大值：Number.MAX_VALUE，这个值为：1.7976931348623157e+308

最小值：Number.MIN_VALUE，这个值为：5e-32

4、数字型三个特殊值

Infinity ，代表无穷大，大于任何数值。当计算结果超过了最大值显示。

-Infinity ，代表无穷小，小于任何数值。当计算结果超过了最小值显示。

NaN ，Not a number，代表一个非数值。但计算结果不是一个数字的时候。

5、判断非数字：

isNaN（）返回ture则是非数字，返回false则是数字。

String字符串型：

1、其语法为双引号 "" 和单引号''。因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

2、JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双），但是必须成对出现。

3、转移符号 \ ，用到的时候去查就好。换行\n常用。还有可以使用\',\" 来表示单引号和双引号。

4、变量名.length ：获取字符串长度。比如我的字符串叫做myString，可以使用myString.length 获取字符串长度

5、字符串的拼接：使用+连接，字符串+任何类型=新的字符串。

这里穿插一个有关字符串拼接使用的案例：


<!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>
    <script>
        var age = prompt('请输入您的年龄');
        var str = '您今年已经' + age + '岁了';
        alert(str);
    </script>
</head>

<body>

</body>

</html>

Boolean 布尔型：

1、只有真假。参与数值运算的时候真=1，假=0.

Undefined当声明了变量，但是没有赋值的时候，这个变量的就是不定的。

Null可以直接 var a = Null ；表示a是空的。

2、复杂数据类型（object)

这部分在后面学习。

2.3 如何获取某个变量的数据类型

使用 typeof 变量名，获取变量的类型。

通过测试发现输入prompt获取的值会自动变成字符串型。

还发现在控制台中字符串是黑色的，数值、布尔是蓝色的，Undefined和Null是灰色的。

2.4 数据类型的转换

通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。通常进行如下几个操作：

1、转换为字符串类型。

2、转换为数字型。

3、转换为布尔型。

2.4.1 转换为字符串类型

三种转换方法：

1、变量名.toString()

2、String（变量名）

3、加号拼接字符变量名+”空字符串“。这个也叫做隐式转换

2.4.2 转换为数字型

四种转换方法：

1、转换为整数：parseInt（‘66’）注意：如果是小数，直接舍去小数点。

2、转换为浮点数：parseFloat（‘66.78’）

3、转换为数值型：Number（‘88.88’）

4、使用运算符号（- * /）隐式转化为数值型：'88.88'-0

注意：1、注意 parseInt 和 parseFloat 单词的大小写，这2个是重点。2、隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型。

这里针对prompt（）自动转换为字符串，我们给出一个转换为数值的案例;

<!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>
    <script>
       
        var year = prompt('请您输入您的出生年份');
        var age = 2024 - year; // year 取过来的是字符串型  但是这里用的减法 有隐式转换
        alert('您今年已经' + age + '岁了');
    </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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var num1 = prompt('请您输入第一个值：');
        var num2 = prompt('请您输入第二个值：');
        var result = parseFloat(num1) + parseFloat(num2);
        alert('您的结果是:' + result);
    </script>
</head>

<body>

</body>

</html>

2.4.3 转换为布尔型

这个很简单，只需要：Boolean（变量名）；

注意：代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined！！！

<!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>
    <script>
        console.log(Boolean('')); // false
        console.log(Boolean(0)); // false
        console.log(Boolean(NaN)); // false
        console.log(Boolean(null)); // false
        console.log(Boolean(undefined)); // false
        console.log('------------------------------');
        console.log(Boolean('123'));
        console.log(Boolean('哈'));
        console.log(Boolean('布尔转换'));
    </script>
</head>

<body>

</body>

</html>