js 学习

JavaScript语言

来历

1995年，布兰登.艾奇 10天。和Java原始Sun公司合作正式命名为JavaScript

是什么？

1. 是一种运行在客户端的脚本语言
2. 脚本语言：不需要编译，只需要js解释器(js引擎)逐行来进行解释并执行
3. js也可以基于Node.js技术进行服务器端编程

能力

1. 网页动态功能设计(网页特效，表单验证-js最初的目的)
2. 服务器端开发
3. 桌面程序
4. App
5. 控制硬件物联网
6. 游戏开发
7. …

JS的组成

JS基础语法

ECMAScript-是由ECMA国际(欧洲计算机制造商会)进行标准化的一门编程语言，这种语言在万维网上应用广泛。

DOM

文档对象模型，是由W3C组织推荐的一种处理可扩展标记语言的标准编程接口，使用js操作另外的一门标记语言(html)

BOM

浏览器对象模型，它提供了独立于内容的，可以与浏览器窗口进行互动的对象结构

JS的使用

三种书写方式

方式	优点	缺点
行内	书写方便、优先级高	可用范围小、可读性差
内嵌	可以在Script标签中直接书写	没有实现完全的语言分离
外联	完全实现语言分离、适合于大项目	造成文件增加

JS的注释

1. 单行注释 // 添加取消单行注释使用 Ctrl+/
2. 多行注释 /* 内容 */ Ctrl+Shift+A Ctrl+Shift+/ Shift+Alt+A

JS的弹窗

1. alert-弹出一个警告框，只有确定按钮
2. confirm-弹出一个确认框，有确定和取消按钮
3. prompt-弹出一个接收数据框，有输入框和确定按钮

JS的控制台输出

使用console.log()，将内容输出到浏览器控制台里面

JS的基础语法

变量

什么是变量

内存中开辟一个临时空间，装载临时数据，这个空间中的数据可以修改

使用步骤

声明变量–变量的赋值–使用

var是js中的一个关键字，主要是用来声明变量的

JS语言中的变量的数据类型取决于赋值，这个变量的数据类型不一定是一成不变的，每一步的数据类型都取决于这一步它所装的数值的数据类型

声明变量的注意问题

变量命名规范

1. 使用两种命名规范，驼峰命名法(命名中首单词全部小写，之后单词首字母大写)、帕斯卡命名法(命名中的所有单词首字母大写)
2. 驼峰命名法适用于：变量、方法，帕斯卡命名法适用于：对象命名
3. 变量名称不能是关键字
4. 变量名称必须以字母，下划线开头，之后可以跟数字，尽量不要使用特殊符号
5. 命名变量，务必要保证变量名称有意义

数据类型

为什么需要数据类型

在计算机中，不同的数据所需要占据的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，因此定义了不同的数据类型。数据类型能够代表数据的特征和属性

注意：JS中的数据类型，是js代码在运行时，由js引擎根据=后面的数据值的数据类型来明确的

数据类型分类

简单数据类型：Number，String，Boolean，Undefined，Null

复杂数据类型：object

简单数据类型

简单数据类型	说明
Number	数字类型，包含整数值和小数值
String	字符串类型，js中字符串单引号双引号都可以
Boolean	布尔类型，表示对错的类型，true/false，本质是1/0
Undefined	声明变量未提供值
Null	声明变量，变量的值为Null

1. Number，数字类型可以给整数，可以给小数，同时也可以给二进制、八进制、十进制、十六进制的数据

2. 数字类型三个特殊值

   1. Infinity：代表无穷大，大于任何数值
   2. -Infinity：代表无穷小，小于任何数值
   3. NaN：Not a Number，代表一个非数值

3. isNaN：函数用来判断一个数值是否为非数字，返回false即为是数字，返回true即为是非数字

4. String：字符串的引号中可以写任何文本，因为Html标签中的属性后面使用双引号给值，因此当写行内JS时，如果遇到字符串则变得非常麻烦需要使用双引号和单引号之间实现嵌套

5. 转义字符

   在字符串中有一些特殊的字符，例如在双引号中需要再嵌套双引号。这时候就需要用到转义字符。

   js中转义字符以\开头，一般情况下字符串中遇到\，引擎就会默认将\和后面的一个或者若干个字符进行组合当做转义字符执行，并不一定是标准的转义字符，如果不是标准的转义字符，会将\处理掉

   转义字符	说明
   \n	换行
   \\	斜杠\
   \’	单引号’
   \"	双引号"
   \t	TAB缩进

6. 字符串长度，双引号中的每一个独立的内容叫做一个字符，字符串的长度是指这个字符串中的字符个数，字符串变量的属性length可以直接拿到字符串的长度，转义字符\和后面字符合为一个字符计算

7. 字符串连接，多个字符串之间可以使用+连接起来，加号左右两边只要有一个数据是字符串那么都是进行字符串连接的作用

8. 布尔类型：本质是Number1和0，如果将Boolean类型和数字之间进行运算则就是数学运算

9. undefined和Null，一个声明后没有给赋值的变量默认值是undefined，如果是undefined在进行相连或相加时要注意

   字符串+undefined=字符串undefined

   数字+undefined=NaN

   一个声明变量并赋值Null。如果进行对Null相连或相加时要注意：

   字符串+Null=字符串Null

   数字+Null=数字

获取数据类型

检测数据类型使用typeof函数进行检测

数据类型转换

常用的数据类型转换有三个

1. 转换为字符串类型
2. 转换为数字类型
3. 转换为布尔类型

转字符串类型

1. toString()，将数据直接转为字符串类型，括号中可以填写一些转换的条件
2. String()，可以使用String函数直接转换为字符串类型
3. 使用加号拼接字符串方式进行转换(隐式转换)

转换数字类型

1. parseInt()，将字符串类型转成整数数值，如果字符串并不是纯数字，只要是数字开头则会将开头的数字部分转换出来
2. parseFloat()，将字符串类型转成浮点型数，如果字符串不是纯数字，只要是数字开头则会将开头的数字部分转换出来
3. Number()强制转换函数，将String类型转为数值类型
4. js隐式转换(- , * , /)

转换为布尔类型

Boolean()函数，对于0，NaN，Null，undefined，“”转换结果都是false，其余转换结果皆为true

运算符-

什么是运算符

也叫作操作符，主要是用于进行赋值、计算、比较等功能的一类符号

分类

1. 算术运算符
2. 比较运算符
3. 逻辑运算符
4. 递增递减运算符
5. 赋值运算符
6. 三元（三目）运算符

算术运算符

算术运算符主要是使用符号进行实现数学运算的功能

运算符	说明	实例
+	加	2+5=7
-	减	2-5=-3
*	乘	2*5=10
/	除	2/5=0.4
%	取余(取模)	2%5=2

浮点数的精度问题

浮点的精度一般最高精度到17位小数，进行计算时浮点型数据的精度远远不如整数类型的数据

注意：在判断两个数是否相等时，千万不要用浮点型进行比较

比较运算符

比较运算符主要是针对于两个数据进行比较时所使用的运算符，比较的结果返回一个布尔值true/false作为比较运算的结果

运算符	说明	比较	结果
>	大于号	1>2	false
<	小于号	1<2	true
>=	大于等于	2>=2	true
<=	小于等于	1<=2	true
==	比较相等	3==3	true
!=	不等于	3!=3	false
===	全等判断，要求值和类型都一样	3===“3”	false
!==	值或者类型有一方不相同结果都为true	“2”!==“3”	true

=、 = = 、===

=：赋值符号，将右边的值赋给左边

==：比较判断符号，比较左右两边的数据是否相等(有一个隐式转换关系)

===：判断等号两边的数据是否相等并且数据类型是否也相同

逻辑运算符

用来进行对布尔值运算的运算符，其最终结果依然是布尔值

运算符	说明	实例	结果
&&	并且，and，与	true&&true	true
||	或者，or ，或	true||false	true
!	非，not	!false	true

短路运算(逻辑中断)，多个表达式进行逻辑运算，前面的表达式很有可能影响到后面表达式的一个运行结果

var num1=10;
var num2=10;
console.log(num1++>10&&++num2>10);
// 结果是false。逻辑与运算，只要前面的运算符为false则后面的直接不需要判断，结果肯定为false
console.log(num1)  //11
console.log(num2)  //10

递增递减运算符

反复给数字进行添加1或者减去1，可以使用递增递减运算符来完成

运算符	说明	案例	结果
++	递增加1	a=0; a++;	1
–	递减减1	a=0;a–;	-1

前置和后置

var num1=10;
var num2=10;
console.log(num1++); //后置自加，先使用值，再完成自加 10
console.log(++num2); //前置自加，先完成自加，再使用值 11

赋值运算符

用来将计算好的数据再次赋值给变量的运算符

运算符	说明	实例
=	直接赋值	var a=10;
+= ,-=	加上或减去之后赋值	var a=10; a+=5; a结果是15
*=，/=,%=	乘、除、取余后赋值	var a=5; a%=2; a结果是1

三元运算符

表达式?表达式1：表达式2；

执行思路：如果表达式的结果为true则返回表达式1的值，如果表达式的结果为false则返回表达式2的值

运算符的优先级

1. 小括号 ()
2. 一元运算符 ++,–,!
3. 算术运算符 先*/%,后±
4. 关系运算符 >,<,>=,<=
5. 比较相等运算符 == ；！==
6. 逻辑运算符 先 && 后||
7. 赋值运算符 =
8. 逗号运算符 ，

表达式和返回值

表达式

是由数字、运算符、变量等求得数值的有意义的排列组合

返回值

表达式最终都会有一个结果，这个结果最终会返回给使用者，这种形式叫返回值