JavaScript基础知识点

1、JavaScript概述

1.1、JavaScript是什么？有什么用？

HTML：就是用来写网页的。人的身体

CSS：就是用来美化页面的。人的衣服

JavaScript：前端大脑、灵魂。 人的大脑、灵魂

JavaScript是WEB上最强大的脚本语言。

脚本语言：无法独立执行。必须嵌入到其它语言中，结合使用。直接被浏览器解析执行。

Java编程语言：独立写程序、独立运行。先编译后执行

作用：控制页面特效展示。

例如：

• JS可以对HTML元素进行动态控制

• JS可以对表单项进行校验

• JS可以控制CSS的样式

1.2、JavaScript入门案例

1.3、JavaScript的语言特征及编程注意事项

特征：

• JavaScript无需编译，直接被浏览器解释并执行

• JavaScript无法单独运行，必须嵌入到HTML代码中运行

• JavaScript的执行过程由上到下依次执行

注意：

• JavaScript没有访问系统文件的权限（安全）

• 由于JavaScript无需编译，是由上到下依次解释执行，所以在保持可读性的情况下，允许使用链式编程

• JavaScript和java没有任何直接关系

1.4、JavaScript的组成

JavaScript包括：ECMAScript 、 DOM 、 BOM

• ECMAScript（核心）：规定了JS的语法和基本对象。

• DOM 文档对象模型：处理页面内容的方法

  标记型文档。HTML

• BOM 浏览器对象模型：与浏览器交互的方法和接口

1.4.1、内部脚本

在当前页面内部写script标签，内部即可书写JavaScript代码

格式：

<script type="text/javascript"> JavaScript的代码 </script>

注：script标签理论上可以书写在HTML文件的任意位置

1.4.2、外部引入

在HTML文档中，通过<script src="">标签引入.js文件

格式：

<script type="text/javascript" src="javascript文件路径"></script>

示例一：

<script type="text/javascript" src="01demo1.js"></script>

注：外部引用时script标签内不能有script代码，即使写了也不会执行。

示例二：

<script type="text/javascript" src="01demo1.js"> //这部分代码不会被执行，因为被引入的demo.js代码覆盖 </script>

1.4.3、script标签规范化的放置位置（了解）

开发规范规定，script标签的放置位置为：

body结束标签前。

如图所示：

​

你好

​

优点：

保证HTML展示内容优先加载，最后加载脚本。增强用户体验性

2、JavaScript语法及规则

2.1、注释

• 单行注释：

  //

  Hbuider中快捷键为：ctrl+/

• 多行注释：

  /**/

  Hbuider中快捷键为：ctrl+shift+/

2.2、变量

2.2.1、变量简述

变量：表示内存中的一块空间，用于存储数据，且数据是可变的。

变量的声明：

var 变量名； //变量赋予默认值，默认值为undefined （未定义的）

变量的声明和赋值：

var 变量名=值； //变量富裕对应的值

在声明JavaScript变量时，需要遵循以下命名规范：

• 必须以字母或下划线开头，中间可以是数字、字符或者下划线

• 变量名不能包含空格等符号

• 不能使用JavaScript关键字作为变量名，如：function

• JavaScript严格区分大小写。

2.2.2、基本数据类型

类似于java中的基本数据类型

string 字符串类型。 “”和‘’都是字符串。JavaScript中没有单个字符

• boolean 布尔类型。 固定值为true和false

• number 数字类型。任意数字

• null 空，一个占位符

• undefined 未定义类型，该类型只有一个固定值，即undefined，表示变量声明却未定义具体的值。

注：因为undefined是从null中派生出来的，所以undefined==null

JavaScript区别于Java，是弱类型语言，变量的使用不用严格遵循规范，所以一个变量声明好之后，是可以赋予任意类型的值。

通过typeof运算符可以分辨变量值属于哪种基本类型数据类型

对变量或值调用，typeof运算符将返回下列值之一

• undefined 如果变量是undefined类型的

• boolean 如果变量是 boolean类型的

• number 如果变量是 number类型的

• string 如果变量是string类型的

• object 如果变量是一种引用类型或Null类型的

ECMAScript实现之初的一个bug，null属于基本的数据类型，typeof（null）→ obj

2.2.3、引用数据类型

引用类型通常叫做类class，但在javaScript中，因为不存在编译过程，所以没有类的概念，所以处理的引用数据类型都是对象。

标准创建方式：

• var str=new String();//和Java相同

• var str = new String;//js独有的方式

2.3运算符

JavaScript运算符与Java运算符基本一致。

这里我们来寻找不同点进行学习

2.3.1比较运算符

运算符	描述	例子
==	等于	x==8为false
===	全等（值和类型）	x===5为true；x===‘5’为false
！=	不等于	x!=8为true
>	大于	x>8为false
<	小于	x<8为true
>=	大于等于	x>=8为false
<=	小于等于	x<=8为true

== 逻辑等。 仅仅对比 值

=== 全等。 对比值并且对比类型。

如果值和类型都相同，则为true：值和类型有一个不同，则为false

2.3.2、逻辑运算符

运算符	描述	例子
&&	and	(x<10&&y>1)为true
||	or	（x==5||y==5)为false
!	not	!(x==y)为true

注：JavaScript逻辑运算符没有& |

2.4、正则对象

2.4.1、RegExp对象的创建方式

• var reg=new RegExp("表达式"); （开发中基本不用）

• var reg= /^表达式$/; 直接量 （开发中常用）

直接量中存在边界，即^代表开始，$代表结束

直接量方式的正则是对象，不是字符串，别用引号

2.4.2、test方法

正则对象.test（string） 用来校验字符串是否匹配正则。

全部字符匹配返回true 有字符不匹配返回false

2.4.3、正则对象使用注意事项

/^表达式$/ 只要有无法成立正则的字符存在，即为false

全部符合为true

（检查严格，眼睛不揉沙子)

适用于表单校验

/表达式/ 只要有成立正则的字符存在，即为true

全部不符合为false

(检查不严格，懒人思想)

适用于字符串查找、替换

2.5、JS数组对象

2.5.1、JS数组的特性

JS数组可以看做Java中的ArrayList集合。

• 数组中的每一个成员没有类型限制，及可以存放任意类型

• 数组的长度可以自动修改

2.5.2、JS数组的四种创建方式

1.var arr=[1,2,3,"a",true];//常用的JS数组。长度5

2.var arr= newArray();创建一个数组对象，数组长度默认为0

3.var arr=new Array(4);

数组长度是4，相当于开辟了长度为4的空间，每个元素是undefined。(仅在显示数组时进行处理,undefined为了方便显示变成了空字符串形式，其值本质仍然是undefined)

4.var arr=new Array("a","b",true); //创建一个数组，长度3， 数组元素是“a”，“b”，true

2.5.3、JS数组的常用属性/方法

length 设置或返回数组中元素的数目

join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

pop() 删除并返回数组的最后一个元素

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

reverse() 颠倒数组中元素的顺序。

物理翻转：就是把元素下标进行互换