JavaScript
一、计算机编程基础
(一)编程语言：
计算机语言的种类非常多，总的来说它可以分为机器语言，汇编语言和高级语言三大类。
实际上计算机最终所执行的都是机器语言，它是二进制数，二进制数是计算机语言的基础
编程语言有很强的逻辑和行为能力。在编程语言里，你会看到很多if else、for、while等具有逻辑性和行为能力的指令，这是主动的。
标记语言（html）不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的，他是被动的。
(二)计算机基础：
- 计算机的组成：
- 数据存储：
1.计算机内部使用二进制0和1来表示数据
2.所有的数据最终都是以二进制数据（0和1）和形式存放在硬盘中的。
3.所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件，其实就是把程序文件复制到硬盘中。
4.硬盘和内存都是保存的二进制数据。
- 数据存储单位
- 程序运行
二 、初识Javascript
1.初识Javascript
1.1 js的历史
略
1.2 js是什么
- JS是运行在客户端的脚本语言
1.3 js的作用
略
1.4 HTML/CSS/JS的关系
- HTML/CSS标记语言——描述类语言
HTML决定网页结构和内容（决定看到什么），相当于人的身体
CSS决定网页呈现给用户的模样（决定好不好看），相当于给人穿衣服，化妆。
- JS脚本语言——编程类语言
实现业务逻辑和页面控制（决定功能），相当于人的各种动作。
1.4 JS的组成
ECMAScript:规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准
DOM：页面文档对象模型
BOM：浏览器对象模型
1.5 js初体验
三种书写位置：行内、内嵌、外部
（1）行内式JS
（2）内嵌JS
2.Javascript注释
<!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>
//1.单行注释 ctrl+/
/* 2.多行注释 shift+alt+a
2.多行注释 */
</script>
</head>
<body>
</body>
</html>
3.JavaScript输入输出语句
常用的语句如下:
| 方法 | 说明 | 归属 |
|---|---|---|
| alert(msg) | 浏览器弹出警示框 | 浏览器 |
| console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
| prompt(into) | 浏览器弹出输入框，用户可以输入 | 浏览器 |
<!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>
// 这是一个输入框
prompt('请输入您的年龄');
// alert 弹出警示框 输出的 展示给用户的
alert('计算的结果是');
// console 控制台输出 给程序员测试用的
console.log('我是程序员能看到的')
</script>
</head>
<body>
</body>
</html>
三.变量
1.变量的概述
1.1什么是变量？
变量是用于存储数据的容器。我们通过变量名获取数据，甚至可以数据修改。
本质是程序在内存中申请的一块用来存放数据的空间。
2.变量的使用
变量在使用时分两步：
（1）声明变量
var 变量名；
（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>Document</title>
<script>
// 1.用户输入姓名 存储到一个myname的变量里面
var myname=prompt('请输入你的名字');
// 2.输出这个用户名
alert(myname);
</script>
</head>
<body>
</body>
</html>
3.变量语法扩展
1.更新变量
一个值被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
2.同时声明多个变量
同时声明多个变量时，只需要写一个var,多个变量名之间使用英文逗号隔开。
3.声明变量的特殊情况
| 情况 | 说明 | 结果 |
|---|---|---|
| var age;console.log(age) | 只声明 不赋值 | undefined |
| console.log(age) | 不声明 不赋值 直接使用 | 报错 |
| age=10;console.log(age) | 不声明，只赋值 | 10 |
<!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>
// 1.更新变量
var myname='pink';
console.log(myname)
myname='迪丽热巴'
console.log(myname)
// 2.声明多个变量
var age=18;
var address='火影村';
var gz=2000;
var age=18,
address='火影村'
gz=2000;
// 3.声明变量的特殊情况
// 3.1只声明不赋值，结果是？undefined
var sex;
console.log(sex);
// 3.2不声明，不赋值某个变量会报错
// console.log(tel)
// 3.3 不声明直接赋值使用（不提倡）
qq=110
console.log(qq)
</script>
</head>
<body>
</body>
</html>
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>Document</title>
<script>
var app=10;
var App=100;
console.log(app);
console.log(App);
// var 18age;
// var var
// 尽量不要使用name作为变量名
// console.log(tel);
console.log(name);
</script>
</head>
<body>
</body>
</html>
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>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>
<body>
</body>
</html>
四.数据类型
1.数据类型简介
1.1为什么需要数据类型
在计算机中，不同的数据所需占用的存储空间不同，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
简单来说，数据类型就是数据的类别型号。
1.2变量的数据类型
数据的不同类型决定了如何将代表这些值的位存储到计算机的内存中。JS是一种弱类型或者说动态语言，这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕后，变量就确定了数据类型。
JS拥有动态类型，同时也意味着相同的变量可用作不同的类型。
1.3数据类型的分类
- 简单数据类型：Number，String，Boolean,Underfind,Null
- 复杂数据类型（object）
2.简单数据类型
2.1简单数据类型（基本数据类型）![image-20221202210156606]()
2.2数字型
(1）数字型进制
常见的进制类型有二进制、八进制、十进制、十六进制
在JS中八进制前面加0，十六进制前面加0x
(2)数字范围
JS中数值的最大值和最小值
最大值： console.log(Number.MAX_VALUE)， 1.7976931348623157e+308
最小值 console.log(Number.MIN_VALUE) 5e-324
(3)数字型三个特殊值
- Infinity，代表无穷大，大于任何数值
- -Infinity，代表无穷小，小于任何数值
- NaNcy，Not a number，代表一个非数值
<!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 num=10;//num 数字型
var PI=3.14;//PI 数字型
var num=10;//unm数字型
var PI=3.14;//PI数字型
//1.八进制 0~7 程序里面数字前面加0 表示八进制
var num1=010;
console.log(num1);//010 八进制 转换为10进制就是8
//2.十六进制 0~9 a~f 数字的前面加0x表示十六进制
var num2=0x9;
console.log(num2);
//3.数字型的最大值
console.log(Number.MAX_VALUE);
//4.数字型的最小值
console.log(Number.MIN_VALUE);
//5.无穷大
console.log(Number.MAX_VALUE*2);//无穷大
//6.无穷小
console.log(-Number.MAX_VALUE*2);//无穷小
//7.非数字
console.log('pink'-100);//NaN
</script>
</head>
<body>
</body>
</html>
(4)isNaN
用来判断一个变量是否为非数字类型，返回true或者false
<!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>
//isNaN()这个方法用来判断非数字 并且返回一个值，如果是数字返回的是 false 如果不是数字返回的是true
console.log(isNaN(12));//false
console.log(isNaN('pink'));//true
</script>
</head>
<body>
</body>
</html>
2.3字符串型 string
字符串型可以是引号中的任意文本，其语法为双引号“ ”和单引号‘ ’
因为HTML标签里面的标签使用的是双引号，JS这里我们更推荐用单引号。
（1）字符串引号嵌套：
JS可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）
（2）字符串转义符
转义字符都是\开头的，写在引号里面，常用的转义字符极其说明如下：
| 转义符 | 解释说明 |
|---|---|
| \n | 换行符，n是newline的意思 |
| \ \ | 斜杆\ |
| \ ' | ’ 单引号 |
| \ " | “双引号 |
| \t | tab 缩进 |
| \b | 空格，b是blank的意思 |
<!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>
//字符串：'pink' 'pink老师' '12' 'true'
// var str='我是一个'高富帅'的程序员'
var str='我是一个"高富帅"的程序员'
console.log(str)
// 字符串转义字符 都是用\开头，这些转义字符写在引号里面
var str1="我是一个'高富帅'的\n程序员"
console.log(str1)
</script>
</head>
<body>
</body>
</html>
案例：弹出网页警示框
（3)字符串长度
通过字符串的lenth属性可以获取整个字符
（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>Document</title> <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);//pinktrueS console.log(12+12);//24 console.log('12'+12);//1212 </script> </head> <body> </body> </html>（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>Document</title> <script> console.log('pink老师'+18);//pink老师18 console.log('pink老师'+18+'岁'); var age =19; console.log('pink老师age岁'); // 变量不要写到字符串里面，是通过与字符串相连的方式实现的。 console.log('pink老师'+age+'岁'); </script> </head> <body> </body> </html>案例：显示年龄
2.4布尔型 Boolean
布尔类型有两个值：true和false,其中true表示真（对），false表示假（错）
布尔型和数字型相加时，true的值为1，false的值为0
<!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 flag=true; var flag1= false; console.log(flag+1);//true 参与加法运算当1来看 console.log(flag1+1);//false 参与加法运算当0来看 </script> </head> <body> </body> </html>2.5 Undefined和Null
一个声明后没有被赋值的变量会有一个默认值undefined（未定义数据类型）（如果进行相连或相加时，注意结果）
一个声明变量给null值，里面存的值为空（学习对象时，我们继续研究null）
<!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 flag=true;
var flag1= false;
console.log(flag+1);//true 参与加法运算当1来看
console.log(flag1+1);//false 参与加法运算当0来看
var str;
console.log(str);
var variable=undefined;
console.log(variable + 'pink');//undefinedpink
console.log(variable+1);//NaN undefined和数字相加 最后的结果是NaN
//null空值
var spase=null;
console.log(spase+'pink');//nullpink
console.log(spase+1);//1
</script>
</head>
<body>
</body>
</html>
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>Document</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 取过来的值是字符型的
var age=prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);
</script>
</head>
<body>
</body>
</html>
3.2 字面量
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值
- 数字字面量：8，9，10
- 字符串字面量：'程序员'，"大前端"
- 布尔字面量:true,false
<!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>
console.log(18);
console.log('18');
console.log(true);
console.log(undefined);
console.log(null);
</script>
</head>
<body>
</body>
</html>
4.数据类型转换
4.1什么是数据类型的转换
使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行假发运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。
我们通常会实现3种方式的转换：
- 转换为字符串类型
- 转换为数字型
- 转换为布尔型
4.2转换为字符串类型
| 方式 | 说明 | 案例 |
|---|---|---|
| toString | 转成字符串 | var num=1;alert(num.toString); |
| String()强制转换 | 转成字符串 | var num=1;alert(String(num)); |
| 加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num=1;alert(num+"我是字符串") |
<!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>
//1.把数字型转换为字符串型 变量。同String
var num=10;
var str =num.toString();
console.log(str);
console.log(typeof str);
// 利用String（）
console.log(String (num));
// 3.利用+拼接字符串的方式实现转换效果，隐式转换
console.log(num+'');
</script>
</head>
<body>
</body>
</html>
4.3转换为数字型（重点）
| 方式 | 说明 | 案例 |
|---|---|---|
| pardelnt(string）函数 | 将string类型转换成整数数值型 | parselnt(‘78’) |
| parseFloat（string)函数 | 将string类型转换成浮点数数值型 | pardaFloat('78.21') |
| Number（）强制转换函数 | 将string类型转换为数值型 | Number('12') |
| js隐式转换（- * /） | 利用算数运算隐式转换为数值型 | '12'-0 |
注意parselent和parsefloat单词的大小写
隐式转换是我们在进行算术运算的时候，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>
// var age=prompt('请输入您的年龄');
// console.log(parseInt(age));
//1.parseInt(变量)可以把字符型的转换为数字型 得到的是整数
console.log(parseInt('3.14'));//3.取整
console.log(parseInt('120px'));//120会去掉这个px单位
console.log(parseInt('rem120'));//NaN
//2.parseFloat(变量)可以把字符型的转化为数字型的 得到是小数 浮点数
console.log(parseFloat('3.14'));//3.14
console.log(parseFloat('120px'));//120去掉这个px单位
console.log(parseFloat('rem120px'));//NaN
//3.利用Number(变量)
var str='123';
console.log(Number(str));
console.log(Number('12'));
console.log('12'-0);
console.log('123'-'120');
</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>
var year=prompt('请输入出生年份');
var age=2022-year;//year 取过来的是字符串型，这里用的减法，有隐式转换
alert('您今年已经'+age+'岁了');
</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>
var num1=prompt('请输入第一个值');
var num2=prompt('请输入第二个值');
var result=parseFloat(num1)+parseFloat(num2);
alert('您的结果是：'+result)
</script>
</head>
<body>
</body>
</html>
4.4转换为布尔型
| 方式 | 说明 | 案例 |
|---|---|---|
| Boolean()函数 | 其他类型转成布尔值 | Boolean（true） |
代表空、否定的值会被转换成false,如“、0、NaN、null、undefined
其余的值都会被转换为true
<!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>
console.log(Boolean(''));
console.log(Boolean(0));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(undefined));//false
console.log('-------------------------------------');
console.log(Boolean('123'));
console.log(Boolean('你好吗'));
console.log(Boolean('我很好'));
</script>
</head>
<body>
</body>
</html>
