一阶段P1~P96（PJavaScript基础语法-dom-bom-js-es6新语法-jQuery- 数据可视化echarts 黑马pink老师前端入门基础视频教程（持续更新）_javascript基础语法-dom-bom-js-es6新语法-jquery pdf-CSDN博客

本文链接：https://blog.csdn.net/qq_31645143/article/details/117458843

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

JavaScript笔记

计算机编程基础

计算机编程基础

$\color{red}{1. 变量}$

 变量概述
变量的使用
变量语法扩展
变量命名规范
交换变量案例

1. 变量概述

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

1.2 变量在内存中的存储
本质：变量是程序在内存中申请的一块用来存放数据的空间。类似我们酒店的房间，一个房间就可以看做是一个变量。

2. 变量的使用

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

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

2.赋值

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

3.变量的初始化

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

1.4 变量语法扩展
1.更新变量
一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

<script>
        // 1. 更新变量
        var myname = 'pink老师';
        console.log(myname);
        myname = '迪丽热巴';
        console.log(myname);
    </script>

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

 // 2. 声明多个变量
        // var age = 18;
        // var address = "火影村";
        // var gz = 2000;
        var age = 18,
            address = "火影村",
            gz = 2000;

3.声明变量特殊情况

情况	说明	结果
var age ;	console.log (age); 只声明不赋值	undefined
console.log(age)	不声明不赋值直接使用	报错
age = 10; console.log (age);	不声明只赋值	10

1.5变量命名规范

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
推荐翻译网站：有道爱词霸
以下哪些是合法的变量名？

第一组：1,3 正确
第二组： 1，2, 3 正确（只有 $ 和 _ 符号可以）
第三组： 1,3 正确

$\color{orange}{案例：课堂练习}$
要求：交换两个变量的值 ( 实现思路：使用一个临时变量用来做中间存储 )

 <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>

1.5 小结

为什么需要变量？	因为我们一些数据需要保存，所以需要变量
变量是什么？	变量就是一个容器，用来存放数据的。方便我们以后使用里面的数据
变量的本质是什么?	变量是内存里的一块空间，用来存储数据。
变量怎么使用的？	1、我们使用变量的时候，一定要声明变量，然后赋值 2、声明变量本质是去内存申请空间。
什么是变量的初始化？	声明变量并赋值我们称之为变量的初始化
变量命名规范有哪些？	变量名尽量要规范，见名知意——驼峰命名法区分哪些变量名不合法
交换2个变量值的思路？	学会交换2个变量

$\color{red}{\large{数据类型}}$

 数据类型简介
简单数据类型
获取变量数据类型
数据类型转换

1. 数据类型简介

1.1为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。

1.2变量的数据类型

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

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

1.3数据类型的分类

JS 把数据类型分为两类：
简单数据类型（Number,String,Boolean,Undefined,Null）
复杂数据类型（object)

2. 简单数据类型

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

JavaScript 中的简单数据类型及其说明如下：

2.2数字型 Number

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

1.数字型进制
最常见的进制有二进制、八进制、十进制、十六进制。

现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加 0x

 <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);
        // 2.十六进制  0 ~ 9  a ~ f   #ffffff   数字的前面加 0x  表示十六进制
        var num3 = 0x9;
        console.log(num3); // 9
        var num4 = 0xa;
        console.log(num4); // 10
    </script>

2.数字型范围

JavaScript中数值的最大和最小值

最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
最小值：Number.MIN_VALUE，这个值为：5e-32

<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);
        // 2.十六进制  0 ~ 9  a ~ f   #ffffff   数字的前面加 0x  表示十六进制
        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);
    </script>

3.数字型三个特殊值

Infinity ，代表无穷大，大于任何数值
-Infinity ，代表无穷小，小于任何数值
NaN ，Not a number，代表一个非数值

<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);
        // 2.十六进制  0 ~ 9  a ~ f   #ffffff   数字的前面加 0x  表示十六进制
        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>

4.isNaN()

用来判断一个变量是否为非数字的类型，返回 true 或者 false

   <script>
        // isNaN()  这个方法用来判断非数字 并且返回一个值 如果是数字返回
的是false 不是数字返回的是 true
        console.log(isNaN(12)); // false
        console.log(isNaN('pink老师')); // true
    </script>

2.3字符串型 String

字符串型可以是引号中的任意文本，其语法为双引号 “” 和单引号’’
因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。
1.字符串引号嵌套
JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)

2.字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。转义符都是 \ 开头的，常用的转义符及其说明如下：

转义符	解释说明
\n	换行符，n 是 newline 的意思
\ \	斜杠 \
’	’ 单引号
"	”双引号
\t	tab 缩进
\b	空格，b 是 blank 的意思

<script>
        // 'pink'  'pink老师'   '12'   'true'
        var str = "我是一个'高富帅'的程序员";
        console.log(str);
        // 字符串转义字符  都是用 \ 开头   但是这些转义字符写到引号里面
        var str1 = "我是一个'高富帅'的\n程序员";
        console.log(str1);
    </script>

$\color{orange}{案例：弹出网页警示框}$

酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景。我审视四周，这里，是我的舞台，我就是天地间的王者。这一刻，我豪气冲天，终于大喊一声：“收破烂啦～”

  <script>
        alert('酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景。\n我审
视四周，这里，是我的舞台，我就是天地间的王者。\n这一刻，我豪气冲天，终于大喊一声：
"收破烂啦～"')
  </script>

3.字符串长度

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

<script>
        // 1. 检测获取字符串的长度  length
        var str = 'my name is andy';
        console.log(str.length);  // 15
    </script>

4.字符串拼接

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

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

<script>
        // 1. 检测获取字符串的长度  length
        var str = 'my name is andy';
        console.log(str.length); // 15
        // 2. 字符串的拼接 +  只要有字符串和其他类型相拼接 最终的结果是字符串类型
        console.log('沙漠' + '骆驼'); //  字符串的 '沙漠骆驼'
        console.log('pink老师' + 18); //  字符串的 'pink老师18'
        console.log('pink' + true); //  字符串的 'pink老师true'
        console.log(pink + 'true'); //  报错
        console.log(12 + 12); // 24
        console.log('12' + 12); // 1212
    </script>

5.字符串拼接加强

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

$\color{orange}{案例：显示年龄}$
弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示“您今年 xx 岁啦”（xx 表示刚才输入的年龄）

这是利用 JS 编写的一个非常简单的交互效果程序。
交互编程的三个基本要素：
1.你喜欢我吗？→ 这是用户输入
2.女孩想了想 → 这是程序内部处理
3.最后给了你一巴掌 → 这是输出结果
那么在程序中要如何实现呢？
① 弹出一个输入框（prompt)，让用户输入年龄（用户输入）
② 把用户输入的值用变量保存起来,把刚才输入的年龄与所要输出的字符串拼接（程序内部处理）
③ 使用alert语句弹出警示框（输出结果）

<script>
        // 弹出一个输入框（prompt)，让用户输入年龄（用户输入）
        // 把用户输入的值用变量保存起来,把刚才输入的年龄与所要输出的字符串拼接 （程序内部处理）
        // 使用alert语句弹出警示框（输出结果）
        var age = prompt('请输入您的年龄:');
        var str = '您今年已经 ' + age + '岁啦';
        alert(str);
    </script>

2.5布尔型 Boolean

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

<script>
        var flag = true;  // flag 布尔型
        var flag1 = false;  // flag 布尔型
        console.log(flag + 1);  //  true 参与加法运算相当于1  该输出2 
        console.log(flag1 + 1);  //  false 参与加法运算相当于0  该输出1
    </script>

2.6Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

<script>
        var flag = true;  // flag 布尔型
        var flag1 = false;  // flag 布尔型
        console.log(flag + 1);  //  true 参与加法运算相当于1  该输出2 
        console.log(flag1 + 1);  //  false 参与加法运算相当于0  该输出1
        // 如果一个变量声明未赋值，就是 undefined 未定义数据类型
        var str;
        console.log(str);  // undefined
        var variable = undefined;
        console.log(variable + 'pink');  // undefinedpink
        console.log(variable + 1);  // NaN
        // null 空值
        var space = null;
        console.log(space);  // null
        console.log(space + 'pink');  // nullpink
        console.log(space + 1);  // 1
    </script>

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

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

不同类型的返回值

<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;  // undefined
        console.log(typeof vari);  // undefined
        var timer = null;  // object
        console.log(typeof timer);
        // prompt 取过来的值是 字符型
        var age = prompt('请输入您的年龄');
        console.log(age);
        console.log(typeof age);
    </script>

3.2字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
数字字面量：8, 9, 10
字符串字面量：‘黑马程序员’, “大前端”
布尔字面量：true，false

4. 数据类型转换

4.1什么是数据类型转换

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

4.2转换为字符串

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

<script>
        // 1. 把数字型转换为字符串型   变量.toString()
        var num = 10;
        var str = num.toString(); 
        console.log(str);
        console.log(typeof str);
        // 2. 我们利用 string(变量)
        console.log(String(num));
        // 3. 利用 + 拼接字符串的方法实现转换效果
        console.log(num + '');  // '10'
        console.log('' + num);  // '10'
    </script>

数据类型
 数据类型简介
简单数据类型
获取变量数据类型
数据类型转换

1.1为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。
1.2变量的数据类型
变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
在代码运行时，变量的数据类型是由 JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：
1.3数据类型的分类
JS 把数据类型分为两类：
简单数据类型（Number,String,Boolean,Undefined,Null）
复杂数据类型（object)

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

JavaScript 中的简单数据类型及其说明如下：

2.2数字型 Number

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

2.2 数字型 Number
1.数字型进制
最常见的进制有二进制、八进制、十进制、十六进制。

现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加 0x

2.2 数字型 Number
2.数字型范围
JavaScript中数值的最大和最小值

最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
最小值：Number.MIN_VALUE，这个值为：5e-32

2.2 数字型 Number
3.数字型三个特殊值

Infinity ，代表无穷大，大于任何数值
-Infinity ，代表无穷小，小于任何数值
NaN ，Not a number，代表一个非数值

2.2数字型 Number
4.isNaN()

用来判断一个变量是否为非数字的类型，返回 true 或者 false

2.3字符串型 String

字符串型可以是引号中的任意文本，其语法为双引号 “” 和单引号’’

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

2.3 字符串型 String
1.字符串引号嵌套

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)

2.3 字符串型 String
2.字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。转义符都是 \ 开头的，常用的转义符及其说明如下：

转义符解释说明
\n 换行符，n 是 newline 的意思
\ \ 斜杠
’ ’ 单引号
" ”双引号
\t tab 缩进
\b 空格，b 是 blank 的意思

案例：弹出网页警示框

酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景。我审视四周，这里，是我的舞台，我就是天地间的王者。这一刻，我豪气冲天，终于大喊一声：“收破烂啦～”

2.3 字符串型 String
3.字符串长度

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

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

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

2.4字符串型 String
5.字符串拼接加强

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

案例：显示年龄

弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示“您今年 xx 岁啦”（xx 表示刚才输入的年龄）

案例分析

这是利用 JS 编写的一个非常简单的交互效果程序。

你喜欢我吗

案例分析

交互编程的三个基本要素：
1.你喜欢我吗？→ 这是用户输入
2.女孩想了想 → 这是程序内部处理
3.最后给了你一巴掌 → 这是输出结果

那么在程序中要如何实现呢？
① 弹出一个输入框（prompt)，让用户输入年龄（用户输入）
② 把用户输入的值用变量保存起来,把刚才输入的年龄与所要输出的字符串拼接（程序内部处理）
③ 使用alert语句弹出警示框（输出结果）

案例代码

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

2.6Undefined 和 Null
一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

目  数据类型简介
简单数据类型
获取变量数据类型
数据类型转换

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

不同类型的返回值

3.2字面量
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
数字字面量：8, 9, 10
字符串字面量：‘黑马程序员’, “大前端”
布尔字面量：true，false

目  数据类型简介
简单数据类型
获取变量数据类型
数据类型转换

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

4.2转换为字符串

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

4.3转换为数字型（重点）

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

<script>
        // 1. 把数字型转换为字符串型   变量.toString()
        var num = 10;
        var str = num.toString(); 
        console.log(str);
        console.log(typeof str);
        // 2. 我们利用 string(变量)
        console.log(String(num));
        // 3. 利用 + 拼接字符串的方法实现转换效果
        console.log(num + '');  // '10'
        console.log('' + num);  // '10'
    </script>

案例 1：计算年龄

此案例要求在页面中弹出一个输入框，我们输入出生年份后，能计算出我们的年龄。

案例分析

① 弹出一个输入框（prompt)，让用户输入出生年份（用户输入）
② 把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄（程序内部处理）
③ 弹出警示框（alert) ，把计算的结果输出（输出结果）

案例代码

<script>
        // 弹出一个输入框（prompt)，让用户输入出生年份

一阶段P1~P96（PJavaScript基础语法-dom-bom-js-es6新语法-jQuery- 数据可视化echarts 黑马pink老师前端入门基础视频教程（持续更新）

JavaScript笔记

计算机编程基础

1. 变 量 \color{red}{1. 变量} 1.变量

1. 变量概述

2. 变量的使用

3.变量的初始化

1. 数据类型简介

1.1为什么需要数据类型

1.2变量的数据类型

1.3数据类型的分类

2. 简单数据类型

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

2.2数字型 Number

2.3字符串型 String

2.字符串转义符

2.5布尔型 Boolean

2.6Undefined 和 Null

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

3.2字面量

4. 数据类型转换

4.1什么是数据类型转换

4.2转换为字符串

$\color{red}{1. 变量}$