JavaScript基础学习

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

一、变量
1. 变量概述
- 1.1 什么是变量
- 1.2 变量在内存中的存储
2. 变量的使用
- 2.1 声明变量
- 2.2 赋值
- 2.3 变量的初始化
- 2.4 案例一
- 2.5 案例二
3. 变量语法扩展
- 3.1 更新变量
- 3.2 同时声明多个变量
- 3.3 声明变量特殊情况
4. 变量命名规范
5. 案例 —— 交换两个变量值
6. 小结
二、数据类型
1. 数据类型简介
- 1.1 为什么需要数据类型
- 1.2 变量的数据类型
- 1.3 数据类型的分类
2. 简单数据类型
- 2.1 简单数据类型（基本数据类型）
- 2.2 数字型 ==Number==
- - 2.2.1 数字型进制
  - 2.2.2 数字型范围
  - 2.2.3 数字型三个特殊值
  - 2.2.4 isNaN()
- 2.3 字符串型 ==String==
- - 2.3.1 字符串引号嵌套
  - 2.3.2 字符串转义符
  - 2.3.3 案例：弹出网页警示框
  - 2.3.4 字符串长度
  - 2.3.5 字符串拼接
  - 2.3.6 字符串拼接加强
  - 2.3.7 案例：显示年龄
- 2.4 布尔型 ==Boolean==
- 2.5 Undefined（未定义数据类型）和 Null（空值）
3. 获取变量数据类型
- 3.1 获取检测变量的数据类型
- 3.2 字面量
4. 数据类型的转换
- 4.1 什么是数据类型的转换
- 4.2 转换为字符串
- 4.3 转换为数字型（重点）
- 4.4 案例1：计算年龄
- 4.5 案例2：简单加法器
- 4.6 转换为布尔型
三、拓展阅读
1. 解释型语言和编译型语言
2. 标识符、关键字、保留字
- 2.1 标识符
- 2.2 关键字
- 2.3 保留字
课后作业

一、变量

1. 变量概述

1.1 什么是变量

白话：变量就是一个装东西的盒子。
通俗：变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。

1.2 变量在内存中的存储

本质：变量是程序在内存中申请的一块用来存放数据的空间。
类似酒店房间，一个房间就可以看做一个变量。请添加图片描述

2. 变量的使用

变量在使用时分为两步：1. 声明变量 2. 赋值

2.1 声明变量

// 声明变量
var age; // 声明一个名称为age的变量

var 是一个JS关键字，用来声明变量（variable变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

2.2 赋值

age = 10； // 给age这个变量赋值为10

= 用来把右边的值赋给左边的变量空间中此处代表赋值的意思
变量值是程序员保存到变量空间里的值

2.3 变量的初始化

var age = 18; // 声明变量同时赋值为18

声明一个变量并赋值，我们称之为变量的初始化。

<!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>变量</title>
    <script>
        // 1. 声明了一个age的变量
        var age;
        // 2. 赋值 把值存入在这个变量中
        age = 18;
        // 3. 输出结果
        console.log(age);
        // 4. 变量的初始化
        var myname = 'pink老师';
        console.log(myname);
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

2.4 案例一

请添加图片描述

<!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>变量案例</title>
    <script>
        var myname = '旗木卡卡西';
        var address = '火影村';
        var age = 30;
        var email = 'kakaxi@itcast.cn';
        var salary = 2000;
        console.log(myname);
        console.log(address);
        console.log(age);
        console.log(email);
        console.log(salary); 
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

2.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>变量案例弹出用户名</title>
    <script>
        // 1. 用户输入姓名
        var myname = prompt('请输入您的名字');
        // 2. 输出这个用户名
        alert(myname);
    </script>
</head>

<body>

</body>

</html>

请添加图片描述

3. 变量语法扩展

3.1 更新变量

一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

3.2 同时声明多个变量

同时声明多个变量时，只需要写一个var，多个变量名之间使用 英文逗号 隔开。

3.3 声明变量特殊情况

请添加图片描述
Tip: 程序报错之后，后面的代码将不会执行。

4. 变量命名规范

请添加图片描述
Tip: name虽然不是关键字、保留字，但是一般在一些浏览器中有特殊的含义，所以变量名最好不用这个单词。

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>交换两个变量值</title>
    <script>
        // js 是编程语言具有很强的逻辑性在里面；实现这个要求的思路 先怎么做后怎么做
        // 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>

在这里插入图片描述

6. 小结

请添加图片描述

二、数据类型

1. 数据类型简介

1.1 为什么需要数据类型

在计算机中，不同的数据所需要占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

1.2 变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。 这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10; // 这是一个数字型
var areYouOk = ‘是的’; //这是一个字符串

在代码运行时，变量的数据类型是由JS引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕之后，变量就确定了数据类型。
JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var x = 6; // x为数字
var x = ‘Bill’; //x为字符串

1.3 数据类型的分类

JS把数据类型分为两类：

简单数据类型（Number, String, Boolean, Undefined, Null）
复杂数据类型（Object）

2. 简单数据类型

2.1 简单数据类型（基本数据类型）

JavaScript中的简单数据类型及其说明如下：
请添加图片描述

2.2 数字型 Number

JavaScript数字类型既可以用来保存整数值，也可以保存小数（浮点数）。

var age = 21; // 整数
var Age = 21.3747 // 小数

2.2.1 数字型进制

最常见的进制有二进制、八进制、十进制、十六进制。
请添加图片描述

2.2.2 数字型范围

JavaScript中数值的最大和最小值

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324

2.2.3 数字型三个特殊值

请添加图片描述

<!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>数字型Number</title>
    <script>
        var num = 10; // num 数字型
        var PI = 3.14; // PI 数字型
        // 1. 八进制 0 ~ 7 我们程序里面数字前面加0 表示八进制
        var num1 = 010;
        console.log(num1); // 010 八进制转换为 10进制 就是 8
        var num2 = 012;
        console.log(num2); // 输出 10
        // 2. 十六进制 0 ~ 9 a ~ f 
        var num3 = 0x9;
        console.log(num3); // 输出 9
        var num4 = 0xa;
        console.log(num4); // 输出 10
        // 3. 数字型的最大值
        console.log(Number.MAX_VALUE);
        // 4. 数字型的最小值
        console.log(Number.MIN_VALUE);
        // 5. 无穷大
        console.log(Number.MAX_VALUE * 2); // Infinity 无穷大
        // 6. 无穷小
        console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷小
        // 7. 非数字
        console.log('pink老师' - 100); //NaN 非数字
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

2.2.4 isNaN()

用来判断一个变量是否为非数字的类型，返回true或者false
请添加图片描述

var userAge = 21;
console.log(isNaN(userAge)); // false， 21不是非数字
var userName = ‘andy’;
console.log(isNaN(userName)); // true， 'andy’是非数字

2.3 字符串型 String

字符串可以是引号中的任意文本，其语法为双引号" "和单引号’ ’
请添加图片描述
因为HTML标签里面的属性使用的是双引号，JS这里我们更推荐使用单引号。

2.3.1 字符串引号嵌套

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号（外单内双，外双内单）
请添加图片描述

2.3.2 字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。
转义符都是 \ 开头的，常用的转义符及其说明如下：
请添加图片描述
Tip：转义符必须放在引号里面

2.3.3 案例：弹出网页警示框

请添加图片描述

<!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>弹出网页警示框</title>
    <script>
        alert('酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景。我审视四周，这里，是我的舞台，我就是天地间的王者。\n这一刻，我豪气冲天，终于大喊一声：“收破烂啦~”');
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

2.3.4 字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。

var strMsg = ‘我是帅气多金的程序媛！’;
alert(strMsg.length); // 显示 11
var str = ‘my name is andy’;
console.log(str.length); // 输出15

2.3.5 字符串拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

+ 号总结口诀：数值相加，字符相连

2.3.6 字符串拼接加强

请添加图片描述

我们经常将字符串和变量进行拼接，因为变量可以很方便地修改里面的值
变量是不能添加引号的，因为加引号的变量会变成字符串
如果变量两边都有字符串拼接，口诀“引引加加”，删掉数字，变量写在中间

2.3.7 案例：显示年龄

弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示“您今年xx岁啦”（xx表示刚才输入的年龄）
这是利用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>案例：显示年龄</title>
    <script>
        var age = prompt('请输入您的年龄');
        var str = '您今年' + age + '岁啦';
        alert(str);
    </script>
</head>

<body>

</body>

</html>

请添加图片描述

2.4 布尔型 Boolean

布尔类型有两个值：true 和 false，其中true表示真（对），而false表示假（错）。
布尔型和数字型相加的时候，true的值为1，false的值为0。

console.log(true + 1); // 2
console.log(false + 1); // 1

2.5 Undefined（未定义数据类型）和 Null（空值）

一个声明后没有被赋值的变量会有一个默认值undefined（如果进行相连或者相加时，注意结果）
请添加图片描述
一个声明变量给null值，里面存的值为空（学习对象时，我们继续研究null）

3. 获取变量数据类型

3.1 获取检测变量的数据类型

typeof 可用来获取检测变量的数据类型

<!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>获取变量的数据类型</title>
    <script>
        var num = 10;
        console.log(typeof num); //number
        var str = 'pink';
        console.log(typeof str); //string
        var flag = true;
        console.log(typeof flag); //boolean
        var vari = undefined;
        console.log(typeof vari); //undefined
        var timer = null;
        console.log(typeof timer); //object
        // prompt 取过来的值是 字符型string
        var age = prompt('请输入您的年龄');
        console.log(age);
        console.log(typeof age);
    </script>
</head>

<body>

</body>

</html>

请添加图片描述
Tip： 我们还可以通过chrome这个浏览器控制台输出的颜色来判断数据类型。黑色是字符型、蓝紫色是数字型、深蓝色是布尔型、灰色是undefined或null型

3.2 字面量

我们一眼看上去就知道它是什么样的值就叫做字面量。
请添加图片描述

4. 数据类型的转换

4.1 什么是数据类型的转换

使用表单、prompt获取过来的数据默认是字符串类型 的。此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗的说，就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现3种方式的转换：

转换为字符串类型
转换为数字类型
转换为布尔型

4.2 转换为字符串

请添加图片描述

toString()和String()使用方式不一样。
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。、

<!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>转换为字符型</title>
    <script>
        // 1. 把数字型转换为字符串型 变量.toSring()
        var num = 10;
        var str = num.toString();
        console.log(str);
        console.log(typeof str);
        console.log(typeof num);
        // 2. 利用 String(变量)
        console.log(String(num));
        // 3. 利用 + 拼接字符串的方法实现转换效果 隐式转换
        console.log(num + '');
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

4.3 转换为数字型（重点）

请添加图片描述

注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
隐式转换是我们在进行算数运算的时候，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>转换为数字型</title>
    <script>
        var age = prompt('请输入您的年龄');
        console.log(age); //得到的是字符串型的值
        // 1. parseInt(变量) 可以把 字符串型的转换为数字型 得到的是整数
        console.log(parseInt(age)); //字符串型的转换为数字型
        console.log(parseInt('3.14')); // 3 取整
        console.log(parseInt('3.14')); // 3 取整
        console.log(parseInt('120px')); // 120 会去掉这个px单位
        console.log(parseInt('rem120px')); // NaN非数字型
        // 2. parseFloat(变量) 可以把 字符串型的转换为数字型 得到的是小数 浮点数
        console.log(parseFloat('3.14')); // 3.14
        console.log(parseFloat('120px')); // 120 会去掉这个px单位
        console.log(parseInt('rem120px')); // NaN
        // 3. 利用 Number(变量)
        var str = '123';
        console.log(Number(str));
        // 4. 利用了算术运算 - * / 隐式转换
        console.log('12' - 0); // 数字型的12
        console.log('123' - '120'); // 3
        console.log('123' * 1); // 数字型的123
    </script>
</head>

<body>

</body>

</html>

4.4 案例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>计算年龄案例</title>
    <script>
        var year = prompt('请您输入您的出生年份');
        var age = 2022 - year; // year 取过来的是字符串型 但是这里用的减法 有隐式转换
        alert('您今年已经' + age + '岁啦');
    </script>
</head>

<body>

</body>

</html>

请添加图片描述

4.5 案例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>案例2：简单加法器</title>
    <script>
        var num1 = prompt('请您输入第一个值：');
        var num2 = prompt('请您输入第二个值：');
        var result = parseFloat(num1) + parseFloat(num2);
        alert('相加的结果是：' + result);
    </script>
</head>

<body>

</body>

</html>

请添加图片描述

4.6 转换为布尔型

请添加图片描述

三、拓展阅读

1. 解释型语言和编译型语言

请添加图片描述

2. 标识符、关键字、保留字

2.1 标识符

标识（zhi）符： 就是开发人员为变量、属性、函数、参数取的名字。
标识符不能是关键字或保留字。

2.2 关键字

关键字： 是指JS本身已经使用了的字，不能再用它们充当变量名、方法名。
包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with等。

2.3 保留字

保留字： 实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。
请添加图片描述

课后作业

依次询问并获取用户的姓名、年龄、性别，并打印用户信息

<!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>课后作业</title>
    <script>
        var userName = prompt('请输入您的姓名：');
        var age = prompt('请输入您的年龄：');
        var sex = prompt('请输入您的性别：');
        alert('您的姓名是：' + userName + '\n' + '您的年龄是：' + age + '\n' + '您的性别是：' + sex);
    </script>
</head>

<body>

</body>

</html>

请添加图片描述
Tip：转义符必须放在引号里面

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

JavaScript基础学习

目录

一、变量

1. 变量概述

1.1 什么是变量

1.2 变量在内存中的存储

2. 变量的使用

2.1 声明变量

2.2 赋值

2.3 变量的初始化

2.4 案例一

2.5 案例二

3. 变量语法扩展

3.1 更新变量

3.2 同时声明多个变量

3.3 声明变量特殊情况

4. 变量命名规范

5. 案例 —— 交换两个变量值

6. 小结

二、 数据类型

1. 数据类型简介

1.1 为什么需要数据类型

1.2 变量的数据类型

1.3 数据类型的分类

2. 简单数据类型

2.1 简单数据类型（基本数据类型）

2.2 数字型 Number

2.2.1 数字型进制

2.2.2 数字型范围

2.2.3 数字型三个特殊值

2.2.4 isNaN()

2.3 字符串型 String

2.3.1 字符串引号嵌套

2.3.2 字符串转义符

2.3.3 案例：弹出网页警示框

2.3.4 字符串长度

2.3.5 字符串拼接

2.3.6 字符串拼接加强

2.3.7 案例：显示年龄

2.4 布尔型 Boolean

2.5 Undefined（未定义 数据类型） 和 Null（空值）

3. 获取变量数据类型

3.1 获取检测变量的数据类型

3.2 字面量

4. 数据类型的转换

4.1 什么是数据类型的转换

4.2 转换为字符串

4.3 转换为数字型（重点）

4.4 案例1：计算年龄

4.5 案例2：简单加法器

4.6 转换为布尔型

三、拓展阅读

1. 解释型语言和编译型语言

2. 标识符、关键字、保留字

2.1 标识符

2.2 关键字

2.3 保留字

课后作业

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯

二、数据类型

2.5 Undefined（未定义数据类型）和 Null（空值）