JavaScript基础

Posted 2020-12-04 cairui

为什么学习javascript？

JavaScript在网页中占据非常重要的位置，可以实现验证表单、制作特效等功能

1、客户端表单验证

在登录注册时，如果某项信息格式输入错误，或没有输入内容，表单页面将及时给出错误提示，这减轻了服务器端的压力，这是JavaScript最常用的场合

2、页面动态效果

在JavaScript中，可以编写响应鼠标单击等事件代码，创建动态页面特效，从而高效控制页面的内容。例如：层的切换特效、级联菜单特效等，它们可以在有限的页面空间里展现更多的内容，增加客户端的体验，从而使我们懂得网站更加有动感、有魅力、吸引更多的浏览者

 

什么是JavaScript

JavaScript是一种描述性语言，也是一种基于对象（Object）和·事件驱动（Event Driven）的，并具有安全性能的脚本语言，JavaScript应用程序都要下载到浏览器的客户端执行，从而减轻了服务器端的负担

特点：

• JavaScript主要用于在html页面中添加交互行为
• JavaScript是一种脚本语言，语法和Java类似
• JavaScript一般用来编写客户端的脚本
• JavaScript是一种解释性语言，编执行边解释

 

JavaScript的组成

1、ECMAScript标准

ECMAScript是一种开发的、被国际上广为接受的、标准的脚本语言规范。它不与任何具体的浏览器绑定

ECMAScript主要描述了一下内容：

• 语法
• 变量和数据类型
• 运算符
• 逻辑控制语句
• 关键字、保留字
• 对象

ECMAScript是一个描述，规定了脚本语言的所有属性、方法和对象的标准，因此在使用Web客户端编写脚本语言编码时一定要遵循ECMAScript标准

2、浏览器对象模型

浏览器对象模型（Browser Object Model，BOM），提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTM的交互，例如：网上常见的弹出窗口、前进后退等功能都是浏览器对象控制的

3、文档对象模型

文档对象模型（Document Object Model，DOM），是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操作HTML文档，如：网上商城常见的随鼠标移动显示大的图片、弹出小提示等都是文档对象的功能

 

JavaScript的基本结构

通常，JavaScript代码是用<script>标签嵌入HTML文档中的。如果需要将多条JavaScript代码嵌入一个文档中，只需要每条JavaScript代码都封装在<script>标签中即可。浏览器将检查JavaScript语句的语法，如果有任何错误，则会警告框中显示；如果没有错误，则浏览器将编译并执行语句

1、JavaScript的基本结构

<script type="text/Javascript">

JavaScript语句

</script>

其中type是<script>标签得属性，用于指定文本使用的语言类别为text/JavaScript

document.write()用来向页面输出可以包含HTML标签得内容

 

2、JavaScript的执行原理

在JavaScript的执行过程中，浏览器客户端与应用服务器端采用请求/响应模式进行交互，如图所示：

 

处理过程

（1）、浏览器客户端向服务器发送请求：一个用户在浏览器的地址栏中输入要访问的页面

（2）、数据处理：服务器端将某个包含JavaScript的页面进行处理

（3）、发送响应：服务器端将含有JavaScript的HTML文件处理页面发送到浏览器客户端，然后由浏览器客户端从上至下逐条解析HTML标签和JavaScript，并将页面效果呈现给用户

（4）、包含JavaScript的页面只要下载一次即可，这样能减少不必要的网络通信

（5）、JavaScript程序由浏览器客户端执行，而不是有服务器端执行的因此能减轻服务器端的压力

 

在网页中引用JavaScript的方式

嵌入网页时有以下三种方式：

• 内部JavaScript文件
• 使用外部JavaScript文件
• 直接在HTML标签中

1、内部JavaScript文件

直接使用script标签将JavaScript代码加入HTML文档中

2、使用外部JavaScript文件

例如：

 

注意：外部文件不能包含<script>标签，通常将扩展名为.js的文件放到网站目录中单独存放脚本的子目录中，这样便于维护和管理

3、直接在HTML标签中

例如：

 

三种方式的应用场合：

• 内部JavaScript文件适用于JavaScript特效代码量少，仅用于单个页面
• 外部js文件则适用于代码较多，重复应用于多个页面
• 直接在标签中写JavaScript则适用于极少代码，仅用于当前标签，但是这种方式增加了HTML代码

 

变量的声明和赋值

JavaScript是一种弱类型语言，没有明确的数据类型，也就是说在声明变量时，不需要指定变量的类型，变量的类型由赋给变量的值决定

语法：var 合法的变量名；

变量命名规则：可以由数字、字母、下划线和”$“符号组成，但首字母不能是数字，并且不能使用关键字命名；可以在声明变量时赋值，大小写不同的变量名表示不同的变量

规范：

• 千万要注意JavaScript区分大小写，特别是变量的命名、语句关键字等，这种错误有时很难查找
• 变量可以不经过声明直接使用，但这种方法很容易出错，也很难查找排错，因此不推荐使用，在使用变量之前，请先声明后使用

 

数据类型

常用的基本数据类型：

• undefined（未定义类型）
• null（空类型）
• number（数值类型）
• String（字符串类型）
• boolean（布尔类型）

1、typeof

用来判断一个值或变量究竟属于那种数据类型

语法：typeof（变量赋值）

返回结果：

• undefined：如果变量是undefined类型的，则返回undefined类型的结果
• number：如果变量时number类型的，则返回number类型的结果
• String：如果变量是String类型的，则返回String类型结果
• boolean：如果变量是boolean类型的，则返回boolean类型的结果
• object：如果变量是null类型的，或者变量是一种引用类型，如对象、函数、数组，则返回object类型的结果

2、undefined类型

undefined类型只有一个值，即undefined。当声明的变量未初始化时，该变量的默认值是undefined

 

3、null类型

只有一个值的类型是null，是个表示“什么都没有”的占位符，可以用来检测某个变量是否被赋值

4、number类型

既可以表示32位的整数，又可以表示64位的浮点数，整数也可以表示为八进制或十六进制，八进制首数组必须是0，后面的数组任意（0~7），十六进制首字母必须是0，后面任意（0~9和A~F），NaN（Not a Number）表表示非数

5、String类型

在JavaScript中，字符串是一组被引号（单引号或双引号）括起来的文本，不对字符或字符串加以区别

JavaScript语言中的String也是一种对象，length表示字符串的长度（包括空格）

语法：字符串对象.length;

使用字符串对象的语法：字符串对象.方法名（）；

 

 

toLowerCase()	把字符串转化为小写
toUpperCase()	把字符串转化为大写

6、boolean类型

称为：布尔类型数据或逻辑型数据，只有两个值：True和False

 

数组

JavaScript中的数组也是具有相同数据类型的一个或多个值的集合。数组用一个名称存储一系列的值，用下标区分数组中的每个值，数组下标从0开始

1、创建数组

语法：var 数组名称=new Array(size)；

其中，new是用来创建数组的关键字，Array表示数组的关键字，而size表示数组中可存放的元素总数

2、为数组元素赋值

语法：var fruit new Array("apple"，"orange"，"peach"，“banana”);

或者：var fruit =[“apple”，“orange”，“peach”，“banana”]；

3、访问数组元素

可以通过数字的名称和数组下标直接访问数组的元素，访问数组的表示形式：数组名[下标]；

4、数组的常用属性和方法

 

join的使用方法：join（分隔符）；

 

运算符号

 

==表示等于，===表示恒等于，！==表示不恒等于，都是用于比较，但是==用于一般比较，===用于严格比较，==在比较时可以转换数据类型，===严格比较，只要数据类型不匹配就返回false

 

逻辑控制语句

1、条件语句

（1）、if结构

语法：if（表达式）{

//JavaScript语句1；

}else{

//JavaScript语句2；

}

（2）、switch语句

语法：switch（表达式）{

case 值1：

//JavaScript语句1；

break；

case 值2：

//JavaScript语句2；

break；

case 值3：

//JavaScript语句3；

break；

default ：

//JavaScript语句n；

break;

}

2、循环结构

（1）、for循环语句

语法：for（初始化；条件；增减量）{

//JavaScript语句；

}

（2）、while循环语句

语法：while（条件）{

//JavaScript语句；

}

（3）、do-while循环语句

语法：do{

//JavaScript语句；

}while（条件）；

（4）、for-in循环语句

语法：for（变量 in 对象）{

//JavaScript语句；

}

（5）、中断循环

• break：可以立即退出整个循环
• continue：只是退出当前的循环，根据判断条件决定是否进行下一次循环

注释

单行注释：//

多行注释：/*.......*/

 

关键字和保留字

关键字标识了ECMAScript语句耳朵开头和结尾，关键字是保留的，不能做变量名或函数名

JavaScript的关键字

关键字	关键字	关键字	关键字	关键字
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

保留字在某种意义上是为将来的关键字而保留的单词，因此保留字不能被用作变量名或函数名

JavaScript的保留字

保留字	保留字	保留字	保留字	保留字
abstract	boolean	byte	char	class
const	debugger	double	enum	export
extends	final	interface	goto	implements
import	int	protected	long	native
package	private	synchronized	public	short
static	super	float	throws	transient
volatile

 

常用的输入/输出

1、警告（alert）

alert（）方法会创建一个特殊的小对话框，该对话框带有一串字符和一个“确定”按钮

语法：alert（“提示信息”）；

警告对话框是当前运行的网页弹出的，在对该对话框做出处理前，当前网页将不可用，后面的代码也不会被执行，只有对警告对话框进行处理后（单击“确定”按钮或直接关闭），当前网页才会继续显示后面的内容

2、提示（prompt）

prompt（）方法会弹出一个提示对话框，等待用户输入一行数据

语法：prompt（“提示信息”，“输入框的默认信息”）；

prompt（）方法的第一个参数值显示在对话框上，通常是一些提示信息；第二个参数出现在用户输入的文本框，且被选中，作为默认值使用。如果省略第二个参数，则提示对话框的输入文本框中会出现“underfined”，可以将第二个参数的值设置为空置字符串

 

语法约定

1、大小写区分

JavaScript的关键字永远是小写的

内置对象，如Math和Date是以大写字符开头的

对象的名称通常是小写

2、变量、对象和函数的名称

与Java的命名规范类似，当声明使用变量、对象或函数时，名称可以包括大写字母、小写字母、数字、下划线和美元符号（$），但必须以字母、下划线或美元符号（$）开头

3、分号

JavaScript允许开发者自行决定是否以分号结束一行代码，如果没有分号，JavaScript就将行代码的结尾看作该语句的结尾

 

Chrome开发人员工具

1、语法错误的排除

chrome的开发工具常用八个大模块，主要功能如下：

• Elements：用于查看和编辑当前页面中的HTML和CSS元素
• Console：用于显示脚本中所输出的调试信息，或运行测试脚本等
• Sources：用于查看和调试当前页面所加载的脚本的源文件
• NetWork：用于查看HTTP请求的详细信息，如请求头、响应头及返回内容等
• TimeLine：用于查看脚本执行时间、页面元素渲染时间等信息
• Profiles：用于查看CPU执行时间与内存占用等信息
• Resource：用于查看当前页面所请求的资源文件，如HTML、CSS样式文件等
• Audits：用于优化前段页面，加速网页加载速度等

2、逻辑错误的排除

（1）、确定断点得到位置

（2）、单步调试

（3）、修改错误

 

常用系统函数

1、parseInt（）

parseInt()函数课解析一个字符串，并返回一个整数

语法：parseInt（“字符串”）；

 

2、parseFloat()

parseFloat()函数可解析一个字符串，并返回一个浮点数

语法：parseFloat(“字符串”)；

parseFloat()函数与parseInt（）函数的处理方式相似，从位置0开始查看每一个字符，直到找到一个非有效的字符为止，然后把该字符的字符串转换为浮点数

3、isNaN（）

isNaN（）函数用于检查其参数是否是非数字

语法：isNaN（x）；

如果x是特殊的非数字值，则返回是true，否则返回false；

 

自定义函数

1、定义函数

 

• function是定义函数的关键字，必须有
• 参数1、参数2等是函数的参数，本身没有类型的检查和限定，函数中的参数是可选的，分为有参函数和无参函数
• “{”和“}”定义了函数的开始和结束
• return语句用来规定函数返回的值

2、调用函数

要执行一个函数，必须先调用这个函数，当调用这个函数时，必须指定函数名及其后面的参数。函数的调用一般和元素的事件结合使用

语法：事件名=“函数名（）”；

 

变量的作用域

JavaScript根据作用范围不同分为局部变量和全局变量

局部变量是在函数内声明的变量，，只有在该函数中且位于该变量之后的代码中可以使用这个变量，如果在之后的其他函数中声明了与这个局部变量同名的变量，则后声明与这个局部变量毫无关系

全局变量是在所有函数在外的脚本中声明的变量，作用范围是该变量定义后的所有语句，包括其后定义的函数中的代码