JavaScript | 前端三件套之JavaScript

目录

1、简介

2、JavaScript引入方式

2.1、内部脚本

2.2、外部脚本

3、基础语法

3.1、书写语法

3.2、输出语句

3.2.1、window.alert()

3.2.2、document.write()

3.2.3、console.log()

3.3、变量

3.3.1、ECMAScript

3.4、数据类型

3.5、运算符

3.5.1、==和===

3.5.2、类型转换

3.6、流程控制语句

3.7、函数

3.7.1、定义格式

3.7.2、函数调用

4、常用对象

4.1、基本对象

4.1.1、Arrary对象

4.1.2、String对象

4.1.3、自定义对象

4.2、BOM

4.2.1、Window对象

4.2.2、history对象

4.2.3、Location对象

4.3、DOM

4.3.1、DOM相关概念：

4.3.2、获取 Element对象

5、事件监听

5.1、事件绑定

5.2、常见事件

6、⭐RegExp正则对象

6.1、正则对象的使用

---

1、简介

JavaScript是一种客户端脚本语言，用于在Web浏览器中动态地操纵HTML内容和样式。

它是与HTML和CSS配合使用的，并允许在页面加载完成后执行动态操作，如创建交互式表单、弹出消息框、执行动画效果等。

JavaScript的基本语法和C语言类似，具有变量、数据类型、控制结构、函数等基本功能。此外，它还提供了多种内置对象，如Math、Date、Array等，以及执行常见任务的方法。

JavaScript代码可以内嵌在HTML页面中，或在外部文件中引用。

在HTML中，JavaScript代码通常位于head部分或body部分的script标签中。

JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。

2、JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。

JavaScript引入方式有两种：

内部脚本：将 JS代码定义在HTML页面中

外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

2.1、内部脚本

在 HTML 中，JavaScript 代码必须位于 标签之间，代码如下：

效果如下：

提示： 在 HTML 文档中可以在任意地方，放置任意数量的标签。

一般把脚本置于元素的底部，可改善显示速度

因为浏览器在加载页面的时候会从上往下进行加载并解析。

我们应该让用户看到页面内容，然后再展示动态的效果。

2.2、外部脚本

demo.js 文件内容如下：alert("hello js");

在页面中引入外部的js文件

在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径

注意：

外部脚本不能包含

效果：

3.2.2、document.write()

效果：

3.2.3、console.log()

效果：

3.3、变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。

格式：var 变量名 = 数据值;

JavaScript 是一门弱类型语言，变量可以存放不同类型的值；如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数。

        var test = 20;

        test = "张三";

js 中的变量名命名也有如下规则，和java语言基本都相同

        组成字符可以是任何字母、数字、下划线或美元符号

        数字不能开头

        建议使用驼峰命名

JavaScript 中 var 关键字有点特殊，有以下地方和其他语言不一样：

①作用域：全局变量

{ 
  var age = 20; 
} 
alert(age); // 在代码块中定义的age 变量，在代码块外边还可以使用

②变量可以重复定义

{
	var age = 20;
	var age = 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉
}
alert(age); //打印的结果是 30

针对如上的问题，ECMAScript 6 新增了 let 关键字来定义变量。它的用法类似于 var ，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明，如：

{
    let age = 20;
}
alert(age);

同时，ECMAScript 6 新增了 const关键字，用来声明一个只读的常量。

一旦声明，常量的值就不能改变

可以看到，重新赋值的时候报错了

3.3.1、ECMAScript

ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。

这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展

3.4、数据类型

JavaScript 中提供了两类数据类型：原始类型 和 引用类型。

使用 typeof 运算符可以获取数据类型

alert(typeof age); 以弹框的形式将 age 变量的数据类型输出

原始数据类型：

①number：数字（整数、小数、NaN(Not a Number)）

NaN是一个特殊的number类型的值

②string：字符、字符串，单双引皆可

在 js 中 双引号和单引号都表示字符串类型的数据

③boolean：布尔。true，false

④null：对象为空

var obj = null;

alert(typeof obj);//结果是 object

为什么null是object，官方解释：

⑤undefined：当声明的变量未初始化时，该变量的默认值是 undefined

3.5、运算符

JavaScript 提供了如下的运算符：(大部分和 Java语言 都是一样的，不同的是 JS 关系运算符中的 == 和 ===)

一元运算符：++，--

算术运算符：+，-，*，/，%

赋值运算符：=，+=，-=…

关系运算符：>，<，>=，<=，!=，==，===…

逻辑运算符：&&，||，!

三元运算符：条件表达式 ? true_value : false_value

3.5.1、==和===

==：

1. 判断类型是否一样，如果不一样，则进行类型转换

2. 再去比较其值

===(js 中的全等于)：

1. 判断类型是否一样，如果不一样，直接返回false

2. 再去比较其值

代码：

var age1 = 20;

var age2 = "20";

alert(age1 == age2);// true

alert(age1 === age2);// false

3.5.2、类型转换

在 == 运算符中，发现会进行类型转换。

JavaScript 中的类型转换：

①其他类型转为number

②其他类型转为boolean

3.5.2.1、其他类型转为number

string 转换为 number 类型：

①按照字符串的字面值，转为数字。

②如果字面值不是数字，则转为NaN

将 string 转换为 number 有两种方式：

①使用 + 正号运算符：

var str = +"20";

alert(str + 1) //21

②使用 parseInt() 函数(方法)：

var str = "20";

alert(parseInt(str) + 1);

建议使用 parseInt() 函数进行转换

boolean 转换为 number 类型：true 转为1，false转为0

var flag = +false;

alert(flag); // 0

3.5.2.2、其他类型转为boolean

①number 类型转换为boolean：

0和NaN转为false

其他的数字转为true

②string 类型转换为boolean

空字符串转为false

其他的字符串转为true

③null类型转换为boolean：false

④undefined 转换为boolean：false

3.6、流程控制语句

JavaScript 中提供了和 Java 一样的流程控制语句，如下

if

switch

for

while

dowhile

3.7、函数

函数（就是Java中的方法）是被设计为执行特定任务的代码块；

JavaScript 函数通过 function 关键词进行定义。

3.7.1、定义格式

函数定义格式有两种：

方式一：

方式二：

3.7.2、函数调用

4、常用对象

JavaScript 提供了很多对象供使用者来使用。

这些对象总共分类三类：

基本对象

BOM对象(Browser Object Model)

DOM对象(Document Object Model)

4.1、基本对象

4.1.1、Arrary对象

JavaScript Array对象用于定义数组。

数组的定义格式有两种：

方式一：var 变量名 = new Array(元素列表);

方式二：var 变量名 = [元素列表];

注意：Java中的数组静态初始化用的是{}定义，而JavaScript中使用的是[]定义

元素访问：

访问数组中的元素和 Java 语言的一样，格式如下：arr[索引] = 值;

4.1.1.1、特点

JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。

例如如下代码：

显示效果：

可以看到，因为可以任意边长，即直接赋值第十位的数据，但是前面并没有数据，所以前面的数据会自动转换为空值。

4.1.1.2、属性

Array 对象提供了很多属性，如下图是官方文档截取的

有了length属性，就可以动态获取数组的长度。

4.1.1.3、方法

Array 对象同样也提供了很多方法，如下图是官方文档截取的

下面着重说一下push函数和splice函数：

push 函数：给数组添加元素，也就是在数组的末尾添加元素。参数表示要添加的元素

splice 函数：删除元素

参数1：索引。表示从哪个索引位置删除

参数2：个数。表示删除几个元素

4.1.2、String对象

属性：String对象提供了很多属性，比如一个是length属性，该属性是用于动态的获取字符串的长度。

函数：String对象提供了很多函数(方法)，下面介绍两个：

charAt()	返回在指定位置的字符
IndexOf()	检索字符串

String对象还有一个函数 trim() ，所有的浏览器都支持；

它是用来去掉字符串两端的空格

用户在输入用户名和密码时，可能会习惯的输入一些空格，这样在后端程序中判断用户名和密码是否正确，结果肯定是失败。所以一般都会对用户输入的字符串数据进行去除前后空格的操作

4.1.3、自定义对象

在 JavaScript 中自定义对象比较简单，下面是自定义对象的格式：

调用属性的格式：对象名.属性名

调用函数的格式：对象名.函数名()

可以看出，JavaScript自定义对象的语法规则较为随意

4.2、BOM

BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。

我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。

BOM 中包含了如下对象：

Window：浏览器窗口对象

Navigator：浏览器对象

Screen：屏幕对象

History：历史记录对象

Location：地址栏对象

下图是 BOM 中的各个对象和浏览器的各个组成部分的对应关系

BOM 中的 Navigator 对象和 Screen 对象基本不会使用，所以笔记只对 Window 、 History 、 Location 对象进行讲解。

4.2.1、Window对象

获取Window对象：

该对象不需要创建直接使用 window ，其中 window. 可以省略。比如之前使用的 alert() 函数，其实就是 window 对

象的函数，在调用是可以写成如下两种

①显示调用：window.alert("abc");

②隐式调用：alert("abc")

Window对象属性：

window 对象提供了用于获取其他 BOM 组成对象的属性

history	对history对象的只读引用
location	用于窗口或框架的location对象
Navigator	对Navigator对象的只读引用
Screen	对Screen对象的只读引用

Window对象函数：

window对象提供了很多函数，下面列举比较常用的：

alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval()	按照指定的周期(以毫秒计)来调用函数或计算表达式
setTimeout()	在指定的毫秒数后调用函数或计算表达式

setInterval(function,毫秒值) : 在一定的时间间隔后执行一个function，循环执行

setTimeout(function,毫秒值) : 在一定的时间间隔后执行一个function，只执行一次

代码演示：

4.2.2、history对象

History 对象是 JavaScript 对历史记录进行封装的对象。

History 对象的获取：使用 window.history获取，其中window. 可以省略

History 对象的函数：

back()->加载history列表中的前一个URL

forward()->加载history列表的下一个URL

4.2.3、Location对象

Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。

Location对象的获取：使用 window.location获取，其中window. 可以省略

Location对象属性：

Location对象提供了很多属性。以后常用的只有一个属性href

href：设置或返回完整的URL

4.3、DOM

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM在学习 XML 就接触过，只不过 XML 文档中的标签需要自己写代码解析，而 HTML 文档是浏览器解析。

封装的对象分为

Document：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

左边是 HTML 文档内容，右边是 DOM 树

作用： JavaScript 通过 DOM， 就能够对 HTML进行操作了:

改变 HTML 元素的内容

改变 HTML 元素的样式（CSS）

对 HTML DOM 事件作出反应

添加和删除 HTML 元素

4.3.1、DOM相关概念：

DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。

该标准被分为 3 个不同的部分：

1. 核心 DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准

2. XML DOM： 针对 XML 文档的标准模型

3. HTML DOM： 针对 HTML 文档的标准模型

该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象

例如： 标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。

例如： 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是

Element 对象。

4.3.2、获取 Element对象

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。

Document 对象中提供了以下获取 Element 元素对象的函数：

getElementById() ：根据id属性值获取，返回单个Element对象

getElementsByTagName() ：根据标签名称获取，返回Element对象数组

getElementsByName() ：根据name属性值获取，返回Element对象数组

getElementsByClassName() ：根据class属性值获取，返回Element对象数组

5、事件监听

HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的 按钮被点击 、 鼠标移动到元素之上 、 按下键盘按键 等都是事件。

事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码。

再比如输入框，当我们输入了用户名，光标离开输入框，就需要通过 js 代码对输入的内容进行校验，没通过校验就在输入框后提示 用户名格式有误!

5.1、事件绑定

JavaScript 提供了两种事件绑定方式：

方式一：通过 HTML标签中的事件属性进行绑定

如下面代码，有一个按钮元素，我们是在该标签上定义事件属性 ，在事件属性中绑定函数。 onclick 就是单击事件的事件属性。 οnclick='on()' 表示该点击事件绑定了一个名为 on() 的函数

下面是点击事件绑定的 on()函数：

方式二：通过 DOM 元素属性绑定

如下面代码是按钮标签，在该标签上我们并没有使用事件属性 ，绑定事件的操作需要在 js 代码中实现

下面 js 代码是获取了 id='btn' 的元素对象，然后将 onclick 作为该对象的属性，并且绑定匿名函数。该函数是在事件触发后自动执行：

5.2、常见事件

事件属性名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时出发该事件
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

6、⭐RegExp正则对象

RegExp 是正则对象。正则对象是判断指定字符串是否符合规则。

6.1、正则对象的使用

正则对象有两种创建方式：

①直接量方式：注意不要加引号。var reg = /正则表达式/;

②创建 RegExp对象。var reg = new RegExp("正则表达式");

函数->test(str) ：判断指定字符串是否符合规则，返回 true或 false

正则表达式常用的规则如下：

^：表示开始

$：表示结束

[ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符

. ：代表任意单个字符，除了换行和行结束符

\w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]

\d：代表数字字符： 相当于 [0-9]

量词：

+：至少一个

*：零个或多个

？：零个或一个

{x}：x个

{m,}：至少m个

{m,n}：至少m个，最多n个