JavaScript基础笔记
计算机基础
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PcwR7M7t-1669642870428)(1667096270239.png)]
1.计算机内部使用二进制0和1来表示数据.
2．所有数据，包括文件、图片等最终都是以二进制数据（0和1)的形式存放在硬盘中的.
3．所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件，其实就是把程序文性复制到硬盘中。
4、硬盘、内存都是保存的二进制数据。
注意∶之所以要内存的一个重要原因，是因为cpu运行太快了，如果只从硬盘中读数据，会浪费cpu性能，所以，才使用存取速度更快的内存来保存运行时的数据。(内存是电，硬盘是机械)
编程语言
编程∶就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程
计算机程序∶就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。
从事编程的人员，就是程序员。
注意∶上面所定义的计算机指的是任何能够执行代码的设备，可能是智能手机、ATM机、服务器等。
计算机语言指用于人与计算机之问通讯的语言，它是人与计算机之问传递信息的媒介.
计算机语言的种类非常的多，总的来说可以分成机器语言，汇编语言和高级语言三大类.
实际上计算机最终所执行的都是机器语言，它是由“0”和“1”组成的二进法数，二进制是计算机语言的基础。
可以通过类似于人类语言的”语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言(ProgrammingLanguage ) .
编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇(不同编程语言的格式和词汇不一样），必须遵守，
如今通用的编程语言有两种形式:汇编语言和高级语言.
汇编语言和机器语言实质是相同的，都是直接对硬件损作，只不过指令采用了英文缩写的标识符，容易识别和记忆.
高级语言主要是相对于低极语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等.
编程语言、标记语言 区别
编程语言有很强的逻辑和行为能力。在编程语言里你会看到很多if else 、 for 、while等具有逻辑性和行为能力的指令，这是主动的.
标记语言( html )不用于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的,他是被动的。
断点调试
断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下.
断点调试可以帮我们观察程序的运行过程
浏览牺中按F12–> sources -->找到需要调试的文件–>在程序的某一行设置断点Watch:监视，通过watch可以监视变量的值的变化，非常的常用。
F11:程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。
javaScript初识
1、js简介
布兰登·艾奇在1995年利用10天完成JavaScript设计.
JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言(Script是脚本的意思)
脚本语言:不需要编译，运行过程中由js解释器( js引擘）逐行来进行解程并执行
现在也可以基于Node.js技术进行服务器端编程
**JavaScript的作用：**表单动态校验(密码强度检测)(JS产生最初的目的)、网页特效、服务端开发(Node.,js)、桌面程序(Electron)App(Cordova)、控制硬件-物联网(Ruff)、游戏开发(cocos2d-js)
浏览器执行JS简介
浏览器分成两部分：渲染引擎、js引擎
渲染引擎∶用来解析HTMML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
**JS引擎:**也称为JS解程器。用来读取网页中的JavaScriptt码，对其处理后运行，比如chrome浏览器的V8
浏资器本身并不会执行IS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码，jS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行.
2、js组成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DE7qJxOz-1669642870431)(1667112561995.png)]
（1）ECMAScript
ECMAScript是由ECMA国际（原欧浙洲计算机制造商协会）进行标准化的一门编语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或 Script，但实际上后两者是ECMAScript语言的实现和扩展。ECMAScript规定了IS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
（2）DOM—文档对象模型
文档对象模型.( Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口.通过 DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等).
（3）BOM—浏览器对象模型
BOM(Browser Object Model，简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨都等.
3、js书写位置
<script>
alert('内嵌式js');
script>
<script src="my.js">script>
head>
<body>
body>
4、注释
//单行注释 ctrl+/
/* * 多行注释
* ctrl+shift+/
* */
5、标识符、关键字、保留字
**标识符：**就是指开发人员为变量、属性、经数、参数取的名字。标识符不能是关健字或保留字。
关键字∶是指S本身已经使用了的字，不能再用它们充当变量名、方法名。
包括： 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等.
保留字∶实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名.
包括： boolean、byte、char、class、const、debugger、double、enum、export、extends、fima1、float、goto、implenments、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、 throws、transient、volatile等.
6、js输入输出语句
为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下:
| 方法 | 说明 | 归属 |
|---|---|---|
| alert（msg） | 浏览器弹出警示框 | 浏览器 |
| console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
| prompt(info) | 浏览器弹出输入框，用户可以输入 | 浏览器 |
<script>
//这是一个输入框
prompt('请输入您的年龄');
// alert弹出警示框 输出的 展示给用户的
alert('计算的结果是');
//console.log()控制台输出 给程序员测试用的
console.log('我是程序员测试能看到的');
script>
7、命名规范
**标识符：**变量、函数的命名必须要有意义、变量的名称一般用名词、函数的名称一般用动词
**操作符：**操作符的左右两侧各保留一个空格
**单行注释：**单行注释前面注意有个空格
变量（用于存放数据的容器）
变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改。
本质：变量是程序在内存中申请的一块用来存放数据的空问。
1、变量的使用（声明、赋值）
（1）声明变量
var是一个JS关键字，用来声明变量( variable变量的意思)，使用该关键字声明变量后，计算机会自动为变量分配内存空问，不需要程序员管
age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
（2）赋值
<script>
//1、声明一个变量
var age;
//2、赋值 给age赋值
age = 18;
//3、输出结果
console.log(age);
//变量的初始化 声明变量的同时之间赋值
var myname = '李娟妮';
console.log(myname);
script>
（3）变量的语法扩展
<script>
//1、更新变量
var myname = '李娟妮'
console.log(myname)
//一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次的值为准。
myname = '李明'
console.log(myname)
//2、声明多个变量
// var address = '火影村';
// var age = 30;
// var email = '[email protected]';
// var gz = 2000;
//同时声朗多个变量时，只需要写一个var，多个变量名之问使用英文逗号隔开。
var age = 18,
address = '火影村',
gz = 18;
//3、声明变量的特殊情况
//（1）只声明，不赋值，程序也不知道里面存的是什么，所以结果是undefined 未定义的
var sex;
console.log(sex); //undefined
//(2) 不声明 不赋值，直接输出变量 会报错,报错的不会再往下执行
// console.log(tel); //报错
//（3）不声明 直接赋值使用 可以使用，但不提倡
qq = 2227638;
console.log(qq);
script>
（4）变量的命名规范
由**字母(A-Za-z)、数字(0-9)、下划效划( -）、美元符号($)**组成，如: usrAge, num01,_name严格区分大小写。var app;和var App;是两个变量
不能以数字开头。18age是错误的
不能是关键字、保留字。例如: var、for、while
变量名必须有意义。
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
数据类型
1、简介
**原因：**在计算机中，不同的数据所需占用的存猪空问是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空问，于是定义了不同的数据类型。
2、变量的数据类型
变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
JavaScript是一种弱类型成者说动态语言。这意味着不用提前声明变量的奥型，**在程序运行过程中，类型会被自动确定。**给变量赋值之后，根据=右边的值才能确定数据类型。变量的数据类型可以变化。
3、分类
简单数据类型( Number, string,Boolean, Undefined,Null ) 又叫做值类型
值类型∶简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
复杂数据类型( object)，又叫做引用类型
引用类型∶复杂数据类型，在存储时变量中存储的仅仅是地址(引用)，因此叫做引用数据类型
通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等
<script>
// 简单数据类型 null 返回的是一个空的对象 object
var timer = null;
console.log(typeof timer);
// 如果有个变量我们以后打算存储为对象，暂时没想好放啥， 这个时候就给 null
// 1. 简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值
// 2. 复杂数据类型 首先在栈里面存放地址 十六进制表示 然后这个地址指向堆里面的数据
script>
（1）简单数据类型
| 简单数据类型 | 说明 | 默认值 |
|---|---|---|
| number | 数字型，包含整型值和浮点型值，如21,0.21 | 0 |
| boolean | 布尔值类型，如true、false，等价于1、0 | false |
| string | 字符串类型，如‘张三’ 字符串都要带引号‘’ | “” |
| undefined | var a；声明了变量a但没赋值，此时a=undefined | undefined |
| null | var a = null，声明了变量为控制 | null |
1）数字型Number
<script>
var num = 10;//数字型
var pi = 3.14;//数字型
//1、八进制 数字前面加0 表示八进制
var num1 = 010; //八进制转10进制 就是8
console.log(num1)
var num2 = 012;
console.log(num2)
//2、十六进制 数字前面加0x 表示十六进制
var num3 = 0x9;
console.log(num3)
var num4 = 0xa;
console.log(num4)
//3、数字中的最大、最小值
console.log(Number.MAX_VALUE)
console.log(Number.MIN_VALUE)
//4、无穷大infinity、无穷小-infinity
console.log(Number.MAX_VALUE * 2)//输出结果为infinity，意为无穷大
console.log(-Number.MAX_VALUE * 2)//输出结果为-infinity，意为无穷小
//5、NaN 非数字
console.log('李明' - 100);//NaN
script>
2）字符串型String
**转义符（都是\开头）**要写在引号里面
| 转义符 | 说明 |
|---|---|
| \n | 换行符 |
| \\ | 斜杠\ |
| ’ | ‘单引号 |
| " | “双引号 |
| \t | tab缩进 |
| \b | 空格 |
<script>
//字符串需要加引号，单引号，双引号都行，最好单引号
var str = '我是李明'
//嵌套 外单内双 或 外双内单 都可以
var qt = '我是"一"个人'
var qt1 = "我是'一'\n个人"
console.log(qt)
console.log(qt1)
script>
字符串长度
字符串是由若干字符组成的，这些字符的数量就是字符的长度。通过字符串的length属性可以获取整个字符串的长度。
字符串拼接
多个字符串之间可以使用＋进行拼接，其拼接方式为字符串＋任何类型=拼接之后的新字符串拼接前会把与字符串相加Q的任何类型转成字符串，再拼接成一个新的字符串
<script>
// 字符串长度
// 1、检测获取字符串长度length
var str2 = 'my name is andy';
console.log(str2.length)//15
//字符串拼接 + 数字相加、字符相连
console.log('沙漠' + '骆驼')
console.log('pink老师'+18)//pink老师18
console.log('pink'+true)//pinktrue
//数字型相加得24
console.log(12 + 12)//数字24
console.log('12'+12)//字符串1212
//字符串加强
console.log('pink老师' + 18 + '岁')
var age = 18;
//变量不要写到字符串里面，是通过和字符串相连的方式实现的
console.log('pink老师' + age + '岁')
script>
3）布尔型Boolean
<script>
var flag = true;
var flag1 = false;
console.log(flag + 1)//true参与加法运算当1来看
console.log(flag1 + 1)//false参与加法运算当0来看
script>
4）Undefined、Null
<script>
// 声明变量未赋值---undefined未定义数据类型
var str;
console.log(str)
var variable = undefined;
console.log(variable)
console.log(variable + 'pink')//undefinedpink
console.log(variable + true)//NaN
console.log(variable + 1)//NaN
//null 空值
var space = null;
console.log(space + 'pink')//nullpink
console.log(space + false)//0
console.log(space + 1)//1
script>
（2）传参
<script>
// 简单数据类型传参
//函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，
// 其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量,
function fn(a) {
a++;
console.log(a); //11
}
var x = 10;
fn(x);
console.log(x); //10
script>
<script>
// 复杂数据类型传参
/*函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里
保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。*/
function Person(name) {
this.name = name;
}
function f1(x) {
// x = p
console.log(x.name); // 2. 这个输出什么 ? 刘德华
x.name = "张学友";
console.log(x.name); // 3. 这个输出什么 ? 张学友
}
var p = new Person("刘德华");
console.log(p.name); // 1. 这个输出什么 ? 刘德华
f1(p);
console.log(p.name); // 4. 这个输出什么 ? 张学友
script>
4、获取变量数据类型（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;
console.log(typeof vari)//undefined
var timer = null;
console.log(typeof timer)//object
//prompt取过来的值是字符型
var age = prompt('请输入年龄');
console.log(age)
console.log(typeof age)//string
script>
字面量
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值
数字字面量：8,9，10
字符串字面量："黑马程序员“ 、"大前端”
布尔字面量： true , false
5、数据类型转换
使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能查接简单的进行加法运算，而需要转换变量的效据类型。通俗地说，就是把一种数据类型的变量转换成另外一种数据类型,
（1）转换为字符串
| 方式 | 说明 |
|---|---|
| toString（） | 转成字符串 |
| String强制转换 | 转成字符串 |
| 加号拼接字符串 | 和字符串拼接的结果都是字符串 |
（2）转换为数字型（重点）
| 方式 | 说明 |
|---|---|
| parseInt（string）函数 | 将string类型转换成整数数值型 |
| parseFloat（string）函数 | 将string类型转换成浮点数数值型 |
| Number（）强制转换函数 | 将string类型转换成数值型 |
| js隐式转换- * / | 利用算术运算隐式转换为数值型 |
<script>
// var age = prompt('请输年龄')
// console.log(age)
// 1、parseInt(变量) 可以把字符型转换为数字型 得到的是整数
// console.log(parseInt(age))
console.log(parseInt(3.14))//3 整数
console.log(parseInt(3.98))//3 整数 不进位
console.log(parseInt('120px'))//120 会去掉单位
console.log(parseInt('rem120px'))//NaN
console.log(parseInt('rempx'))//NaN
console.log(parseInt('true'))//NaN
// 2、parseFloat(变量) 可以把字符型转换为数字型 是小数 浮点数
console.log(parseFloat(3.14))//3.14 小数
console.log(parseFloat('120px'))//120 会去掉单位
console.log(parseFloat('rem120px'))//NaN
//3、利用Number（变量） 强制转换
var str = '123';
console.log(Number(str))//123 数字型
console.log(Number('123'))//123 数字型
//4、利用算术运算 - * / 隐式转换
console.log('12' - 0)//12 数字型
console.log('123' - '83')//40 数字型
console.log('123' * 1)//123 数字型
console.log('123' / 1)//123 数字型
script>
（3）转换为布尔型
| 方式 | 说明 |
|---|---|
| Boolean（）函数 | 其他类型转换为布尔型 |
代表空、否定的值会被转换为false ,如""、0、NaN、 null、undefined
其余值都会被转换为true
<script>
//代表空、否定的值会被转换为false ,如""、0、NaN、 null、undefined
console.log(Boolean(''))//false
console.log(Boolean(0))//false
console.log(Boolean(NaN))//false
console.log(Boolean(null))//false
console.log(Boolean(undefined))//false
//其余值都会被转换为true
console.log(Boolean(112))//true
console.log(Boolean('112'))//true
console.log(Boolean('老师'))//true
script>
运算符
运算符( operator ) 也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号.
1、算术运算符
概念:算术运算使用的符号，用于执行两个变量或值的算术运算。
| 运算符 | 描述 |
|---|---|
| + | 加 |
| - | 减 |
| * | 乘 |
| / | 除 |
| % | 取余数（取模）例： 9%2=1 |
<script>
<!-- 算数运算-->
//算术运算符优先级的，先乘除，后加减，有小括号先算小括号里面的
console.log(1 + 1)//2
console.log(1 - 1)//0
console.log(1 * 1)//1
console.log(78 / 5)//15.6
console.log(1+2*3)//7 先乘除后加减
//1、取余数% 可以用来判断一个数能被整除
//它的余数是0求说明这个数能被整除，这就是%取余运算符的主要用途
console.log(78 % 5)//3
console.log(3 % 5)//3
// 2、浮点数在算术运算里面会有问题
// 浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数。
console.log(0.1 + 0.2)//0.30000000000000004
console.log(0.07 * 100)//7.000000000000001
//3、我们不能直接拿着浮点数来进行相比较是否相等
var num = 0.1 + 0.2;
console.log(num == 0.3)//false
script>
表达式和返回值
<script>
//是由数字、运算符、变量等组成的式子我们称为表达式 1+1
console.log(1 + 1)//2就是返回值
//在程序里面 2=1+1 把右边的表达式计算完毕 把返回值给左边
var num = 1 + 1
script>
2、递增递减运算符
如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减(–)运算符来完成.
在JavaScript中，递增（++)和递减(-- )既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减)运算符，放在变量后面时，我们可以称为后霣递增（递减）运算符。
<script>
<!-- 前置递增运算符-->
//1、想要一个变量自己加1 下面的方法比较麻烦
var num = 1;
num = num + 1
console.log(num)//2
//2、前置递增运算符 ++写在变量前面
var age = 10
++age;//类似于age=age+1
console.log(age)//11
//3、前置递增运算符 先自加，后返回值
var p = 10
console.log(++p + 10)//21
//后置递增运算符
var num1 = 10;
num1++;//num=num+1
console.log(num1)//11
//1、前置自增和后置自增如果单独使用，效果是一样的
//2、后置自增：先返回原值，再自增
var age1 = 10;
console.log(age1++ + 10)//20
console.log(age1)//11
script>
3、比较运算符
概念∶比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值==( true / false )==f作为比较运算的结果.
| 运算符名称 | 说明 |
|---|---|
| > | 大于号 |
| < | 小于号 |
| >= | 大于等于 |
| <= | 小于等于 |
| == | 判等号（会转型） |
| != | 不等号 |
| === / != = | 全等，要求值和数据类型都一致 |
<script>
console.log(3 >= 5)//false
console.log(2 <= 4)//true
//等于：==只要求值相等， 默认转换数据类型，会把字符串型的数据转换为数字型
console.log(3 == 5)//false
console.log('pink' == 'green')//false
console.log(18 == 18)