学习JS第一周（2023-4-23~4-30）_js教程笔记2023-CSDN博客

本文链接：https://blog.csdn.net/weixin_75004747/article/details/130415300

23/4/24~30

1.编程语言

1.1编程

编程：让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程
计算机程序：就是计算机（任何能够执行代码的设备）所执行的一系列的指令集合

1.2计算机语言

计算机语言：指人与计算机之间通讯的语言，是人机之间传递信息的媒介
总的来说分成机器语言、汇编语言和高级语言三大类
实际上计算机最终所执行的都是机器语言（由0和1组成的二进制数），二进制数是计算机语言的基础

1.3编程语言

编程语言：用来控制计算机的一系列指令，有固定的格式和词汇
如今通用的编程语言有两种形式：汇编语言和高级语言

汇编语言：直接对硬件操作，指令采用英文缩写的标识符
高级语言：主要是相对于低级语言而言，并不是特指某种具体的语言，而是包括了很多编程语言，例如c语言，c++，Java,Python,JavaScript等

1.4翻译器

翻译器可以将编写的源代码转换成机器语言，也被称为二进制化

1.5编程语言和标记语言的区别

编程语言：有很强的逻辑和行为能力。可看到具有逻辑性和行为能力的指令，这是主动的。
标记语言（HTML）：不用于向计算机发出指令，常用于格式化和链接，标记语言是被动的。

2.计算机

2.1计算机组成

计算机组成

2.2数据存储

计算机内部使用二进制0和1来表示数据
所有数据，包括文件、图片等最终都是以二进制的形式存放在硬盘中
所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中

2.3数据存储单位

bit<Byte<kb<GB<TB<…

位（bit）:1bit可以保存一个0或者1（最小的存储单位）
字节（Byte）:1B=8b
千字节(KB):1KB=1024B
兆字节(MB):1MB=1024KB
吉字节(GB):1GB=1024MB
太字节（TB）：1TB=1024GB
…

2.4程序运行

1.打开某个程序时，先从硬盘中把程序的代码加载到内存中
2.CPU执行内存中的代码

3.初识JavaScript

3.1JavaScript是什么

JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（不需要编译，运行过程中由js解释器逐行来进行解释并执行）

3.2JavaScript的作用

表单动态校验（密码强度检测）JS产生最初的目的
网页特效
服务端开发（Nodel.js）
桌面程序（Electron）
APP（Cordova）
硬件控制-物联网（Ruff）
游戏开发（cocos2d-js）

3.3HTML/CSS/JS的关系

HTML/CSS 标记语言——描述类语言

HTML决定网页结构和内容，相当于人的身体
CSS决定网页呈现给用户的模样，相当于给人穿衣服、化妆

JS脚本语言——编程类语言

实现业务逻辑和页面控制，相当于人的各种动作

3.4浏览器执行JS

浏览器分成两部分：渲染引擎和JS引擎

渲染引擎：用来解析HTML和CSS，俗称内核
JS引擎：用来读取网页中的JavaScript代码，对其处理后运行
浏览器本身并不会执行JS代码，而是通过内置的JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转化成机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

3.5JS的组成

JS组成

ECMScript:由ECMA国际进行标准化的一门编程语言，规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准
DOM—文档对象模型：是W3C组织推荐的处理可拓展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
BOM—浏览器对象模型：提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口、控制浏览器跳转、获取分辨频率等。

3.6JS注释

<script> //1.单行注释 ctrl+/ /*2.多行注释默认快捷键 shift+alt+a vscode中修改多行注释的快捷键：ctrl+shift+/ */ </script>

3.7JS输入输出语句

JS的输入输出

<script> //prompt：输入框 prompt('请输入您的年龄'); //alert:弹出警示框，输出的，展示给用户的 alert（‘计算的结果是’); //console:控制台输出，给程序员测试用的,按F12 console.log('我是程序员能看到的'); </script>

4.变量

4.1什么是变量

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

4.2使用变量

变量在使用时分为两步：声明变量和赋值

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

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

2.赋值
age=10;//给age这个变量赋值为10

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

3.输出结果
console.log(age);或者alert('age');//输出结果

4.变量的初始化（声明变量并赋值）
var age=18;//声明变量同时赋值为18

5.变量的使用
vary myname=prompt('请输入您的名字')；//1.用户输入姓名，存储到一个myname的变量里面 alert(myname);//2.输出这个用户名

4.3变量语法扩展

1.更新变量
一个变量被重新赋值后，它原有的值会被覆盖，变量值将以最后一次赋的值为准
2.同时声明多个变量
var age=18, address='abc村'， name='mn';

多个变量名之间使用英文逗号隔开
3.声明变量的特殊情况
只声明不赋值：undefined(未定义的)
不声明不赋值：报错
不声明直接赋值：可以使用
最好是声明并且赋值

4.4变量命名规范

由字母（A-Z,a-z）、数字（0~9）、下划线（_）、美元符号（$）组成
**严格区分大小写。**var app 和 var App是两个变量
不能以数字开头。
不能是关键字、保留字。例如：var、for、while、(尽量不使用name作为变量名)
变量名必须有意义
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

4.5例题（交换两个变量的值，利用临时变量作为中间储藏）

<script> var temp;//声明了一个临时变量为空 var apple1='青苹果'; var apple2='红苹果'; temp=apple1;//把右边给左边 apple1=apple2; apple2=temp; console.log(apple1); console.log(apple2); </script>

5.数据类型

5.1数据类型简介（数据的类别型号）

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

在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。
JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型：
var x=6;//x为数字 var x="Bill";//x为字符串
2.简单数据类型

(1)数字型Number
JavaScript数字类型既可以用来保存整数值，也可以保存小数（浮点数）。
var age = 21; //整数 var Age = 21.3747;//小数
数字型进制：二进制、八进制(数字前面加0)、十进制、十六进制（数字前面加0x）
//1.八进制 0~7 程序里面数字前面加0，表示八进制 var num1=010; console.log(num1);// 010八进制转换为十进制为8 //2.十六进制 0~9、a~f前面加0x表示十六进制 var num2=0x9; console.log(num2);//0x9十六进制转换为9
数字型范围（JS中数值的最大值和最小值）
alert (Number.MAX_VALUE);//1.7976313... alert(Number.MIN_VALUE);//5e-324
数字型三个特殊值
alert(Infinity); //Infinity代表无穷大，大于任何数值 alert(-Infinity); //-Infinity代表无穷小，小于任何数值 alert(NaN); //NaN（Not a number）,代表一个非数值
**isNAN()**这个方法用来判断非数字，并且返回一个值，如果是数字返回的是false如果不是数字返回的是true
console.log(isNaN(12));//false console.log(isNaN('pink老师'))；//true
(2)字符串型String
字符串型可以是引号中的任意文本，其语法为双引号“ ”和单引号’ '
字符串引号嵌套：用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单、外单内双）
字符串转义符：（转义符都是用\开头，但是这些转义字符要写到引号里面）
字符串长度：字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度
1.检测获取字符串的长度length
var str='my name is andy'; console.log(str.length)//15(包括空格)
2.字符串的拼接 + 只要有字符串和其他类型像拼接，最终的结果是字符串类型、数值相加，字符相连
console.log('沙漠'+'骆驼')；//沙漠骆驼 console.log('pink老师'+18)；//pink老师18 console,log('100'+'100');//100100 console.log('12'+12);//1212
3.字符串拼接加强：变量(不能添加引号)和字符串相连
var age=18; console.log('pink老师'+age+'岁')；
(3)布尔型Boolean
布尔类型有两个值：true和false，其中true（1）表示真（对），而false（0）表示假（错）
布尔型和数字型相加的时候，true的值为1，false的值为0
console.log(true+1);//2 console.log(true+1);//1
(4)Undefined 和 Null
如果一个变量声明未赋值，就是Undefined未定义数据类型
var variable = undefined;
console.log(variable + ‘pink’);//undefinedpink undefined和字符串相加，最后的结果仍是字符串
console.log(variable + 1);//NaN undefined和数字相加，最后的结果是NAN
null 空值
var space = null;
console.log(space + ‘pink’);//nullpink null和字符串相加，最后的结果仍是字符串
console.log(space + 1);//1
3.获取变量数据类型
（1）获取检测变量的数据类型（typeof）
var num = 10;
console.log(typeof num);//number
var timer = null;
console.log(typeof timer);//object
var age = prompt(‘请输入您的年龄’)；
console.log(typeof age);//string
console中显示黑色为字符串型，深蓝色为数字型，浅蓝色为布尔型，undefined和null为灰色
（2）字面量：是在源代码中一个固定值的表示法，通俗来讲，就是字面量表示如何表达这个值
数字字面量：8 9 10
字符串字面量：‘hello’、”world“
布尔字面量：true、false
4.数据类型转换
（1）什么是数据类型转换
使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一张数据类型
转换为字符串类型

//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(nim + ' ');
转换为数字型（前两个为主）

var age = prompt('请输入您的年龄')； //1.parseInt(变量) 可以把字符型的转化为数字型，得到的是**整数（只取整数，无进制）** console.log(parseInt(age)); console.log(parseInt('3.14'));//得到3 console.log(parseInt('120px'));//得到120,会去掉px这个单位 //2.parseFloat(变量) 可以把字符型的转换为数字型，得到的是**小数（浮点数）** console.log(parseFloat('3.14'));//得到3.14 //3.利用Number(变量) var str ='123'; console.log(Number(str));//得到123 //4.利用了算数运算-（减号）、*(乘号)、/（除号）隐式转换 console.log('12'-0);//12 console.log('123' - '120');//3
转换为布尔型
代表空、否定的值会被转换为false，如’(空字符串)’、0、NaN、null、undefined
其余值都会被转换为true
console.log(Boolean(’’));//false

6.拓展阅读

6.1解释型语言和编译型语言

翻译器翻译的方式有两种：一个是编译、另外一个是解释。两种方式之间的区别在于翻译的时间点不同
编译器是在代码执行之前进行编译，生成中间代码文件
解释器是在运行时进行及时解释，并立即执行（当编译器以解释方式运行的时候，也称为解释器）
执行过程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uIP6mczY-1682600993082)(D:\前端学习笔记\执行过程.bmp)]

6.2标识符、关键字、保留字

标识符：就是指开发人员为变量、属性、函数、参数取的名字（标识符不能是关键字或保留字）
关键字：是指JS本身已经使用了的字，不能再用它们充当变量名、方法名
保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名

7.运算符

运算符（opeator)也被称为操作符，是用于实现赋值、比较和执行算术运算等功能的符号
JavaScript中常用的运算符有：算数运算符、递增和递减运算符、比较运算符、逻辑运算符、赋值运算符

7.1算数运算符

算数运算使用的符号，用于执行两个变量或值的算术运算
浮点数算术运算里面会有问题（精度缺失）
console.log(0.1+0.2);//0.3000000000004
不能直接拿浮点数来进行相比较
var num=0.1+0.2; console.log(num==0.3);//false
一个数能够被整除：用%取余运算符，一个数余数是0就说明这个数能被整除
算数运算符优先级，先乘除后加减，有括号先算括号
表达式和返回值：表达式是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合（2=1+1先进行右边的计算，再将其赋值给左边），表达式最终都会有一个结果，返回给我们，称其为返回值

7.2递增和递减运算符

如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（–）运算符来完成，必须和变量配合使用
num=num+1;//++num
在JS中递增（++）和递减（–）放在变量前面时，称为前置递增（递减）运算符；放在变量后面时，称为后置递增（递减）运算符
（1）前置递增运算符 ++写在变量的前面,先自加1，后返回值
var age = 10; console.log(++age + 10) ;//21
（2）后置递增运算符 ++写在变量后面,先返回原值，后自加1
var age = 10; console.log(age++ + 10) ;//20

7.3比较运算符

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果。
等于默认转换数据类型，会把字符串型的数据转换成数字型
console.log(18==18);//true console.log(18=='18')//true
全等于要求两侧的值和数据类型完全一致
console.log(18===18);//true console.log(18==='18');//false

7.4逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。多用于多个条件的判断

（1）逻辑与&& 两侧为真才为真，只要一侧为假即为假
（2）逻辑或|| 两侧都为假才为假，只要一侧为真即为真
（3）逻辑非！
（4）短路运算（逻辑中断）：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值；
var num =0; console.log(123||num++); console.log(num);//0(num++不进行运算)
逻辑与&&短路运算（表达式1&&表达式2）：如果表达式1的值为真，则返回表达式2；如果表达式1的值为假，则返回表达式1
代表空、否定的值为假，如’(空字符串)’、0、NaN、null、undefined
逻辑或||短路运算（表达式1||表达式2）：如果表达式1的值为真，则返回表达式1；如果表达式1的值为假，则返回表达式2

7.4赋值运算符

用来把数据赋值给变量的运算符

num += 2;//num = num + 2;

7.5运算符优先级

运算符优先级

8.流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
流程控制主要有三种结构：顺序结构、分支结构和循环结构

8.1顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，**程序会按照代码的先后顺序，依次执行，**程序中大多数的代码都是这样执行的

8.2分支流程控制

分支结构：由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果
（1）if语句
- 语法结构
  if(条件表达式){ //执行语句 }
- 执行思路：如果if里面的条件表达式结果为真true则执行大括号里面的执行语句；如果if里面的条件表达式结果为假，则不执行大括号里面的语句，则执行if语句后面的代码
- 执行流程
  
  （2）if else双分支语句
- 语法结构
  if(条件表达式){ //（如果）条件成立执行的代码【语句1】 }else{ //（否则）执行的代码【语句2】 }
- 执行思路：如果if里面的条件表达式结果为真true则执行语句1，否则执行语句2
- if里面的语句1和else里面的语句2最终只能有一个语句执行
- else后面直接跟大括号
- 执行流程
  
  （3）if else if多分支语句
- 语法结构
  if (条件表达式1){ //语句1； }else if (条件表达式2){ //语句2； } else if (条件表达式3){ //语句3； }else { //最后的语句； }
- 执行思路：如果条件表达式1满足就执行语句1执行完毕后，退出整个if分支语句；如果条件表达式1不满足，则判断条件表达式2，满足的话执行语句2以此类推
- 注意点1：多分支语句还是多选一，最后只能有一个语句执行
- 注意点2：else if里面的条件理论上是可以任意多个的
- 注意点3：else if中间有个空格
- 执行流程

8.3三元表达式

由三元运算符组成的式子称为三元表达式
语法结构
条件表达式？表达式1 ：表达式2
执行思路：如果条件表达式结果为真，则返回表达式1的值；如果条件表达式结果为假，则返回表达式2的值
var num =10; var result = num>5 ? '是的' ：'不是的'；//表达式是有返回值的，将三元表达式结果赋值给result console.log(result);

8.4分支流程控制switch语句

switch语句也是多分支语句，用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用switch
语法结构：switch是转换、开关的意思；case是小例子或者选项的意思
switch(表达式){ case value1：执行语句1； break； case value2：执行语句2； break； ... default: 执行最后的语句； }
执行思路：利用表达式的值和case后面的选项值相匹配，如果匹配上，就执行该case里面的语句；如果都没有匹配上，那么执行default里面的语句
注意点1：表达式中经常用变量
注意点2：变量的值和case里面的值相匹配的时候必须是全等，必须是值和数据类型一致才行
注意点3：如果当前的case里面没有break,则不会退出switch,则是继续执行下一个case