JavaScript 简介

JavaScript 是一门客户端脚本语言，运行在客户端浏览器中的。每一个浏览器都有 JavaScript 的解析引擎
注：脚本语言不需要编译，直接就可以被浏览器解析执行了。

JavaScript 可以用来增强用户和 html 页面的交互过程，可以来控制 html 元素，让页面有一些动态的效果，增强用户的体验。

JavaScript 发展史

1.1992年， Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为：C-- ， 后来更名为：ScriptEase
2.1995年，Netscape(网景)公司，也开发了一门客户端脚本语言： LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
3.1996年， 微软抄袭JavaScript开发出JScript语言
4.1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准： ECMAScript，就是统一了所有客户端脚本语言的编码方式。

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

ECMAScript

基本语法

与 HTML 结合方式

1.内部 JS
定义 <script> 标签，标签体内容就是 JS 代码

2.外部 JS
定义 <script> 标签，通过 src 属性引入外部的 JS 文件

注意：
1.<script> 标签可以定义在 HTML 页面的任意地方，但是定义的位置会影响执行的顺序。
2.<script> 标签可以定义多个

数据类型

1.基本数据类型
也叫原始数据类型。

1.1.number 数字
整数、小数、NaN

NaN，not a number，一个不是数字的数字类型。
NaN 和任何数运算得到的还是 NaN。

1.2.string 字符串
单引号和双引号都可以，“abc”，“a”，‘a’

1.3.boolean
true or false

1.4.null
一个对象为空的占位符

1.5.undefined 未定义
如果一个变量没有给初始化值，则被默认赋值为 undefined

2.引用数据类型
对象

类型转换

非 number 转成 number

正号与负号会自动类型转换，即将非 number 的字面值自动转换成 number 类型的数值。

1.string ➜ number
按字面值转换，如果字面值不是数字，则转成 NaN。
例如：

var a = +"123"; // 正号（+）会让后面的字符串“123”自动转换成number类型，因为“123”的字面量是数字，所以会得到数字类型的值123var b = +"abc"; // 字符串“abc”不是数字，所以会转成 NaN

2.boolean ➜ number
true 转成 1，false 转成 0。

var f1 = +true; // 1
var f2 = +false; // 0

非 boolean 转成 boolean

1.number ➜ boolean
number：0或NaN转成false，其它转成true。

例如：

var num = 2;
document.write(!num); // 数字2转成true，那么!true就是false

2.string ➜ boolean
空字符串转成 false，其它非空字符串转成 true。

3.null 和 undefined
转成 false

4.对象 ➜ boolean
所有对象都是 true。

特殊语法

1.语句以 ; 结尾，如果一行只有一条语句则 ; 可以省略(不建议)

2.变量的定义使用 var 关键字，也可以不使用
用：定义的变量是 局部变量
不用：定义的变量是全局变量(不建议)

变量

变量：一小块存储数据的内存空间

Java语言是强类型语言，而JavaScript是弱类型语言。

强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据。

弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

语法：

var 变量名 = 初始化值;

运算符

双等号（==）

字符串的比较，是按字符的 askii 码，按位逐一比较，直到得出大小为止。

全等号（===）

全等号（===）在比较之前会先判断类型，如果类型不同直接返回 false。

document.write("123" == 123); // 字符串“123”先转换成number类型的123，结果返回true
document.write("123" === 123); // 全等号要求类型和数值都相同才会返回true，而这里类型不同则返回false

流程控制语句

switch…case

switch(被检测量){case 常量1:
语句1;
break;
case 常量2:
语句2;
break;
...
deault:
语句N;
break;
}

1.在 Java 中，被检测量允许的数据类型：byte、short、int、char、枚举(1.5)、String(1.7)

2.在 JS 中，被检测量允许任何的原始数据类型。

while

var sum = 0;
var num = 1;
while (num <= 100) {sum += num;num++;
}

for 循环

var sum = 0;
for (var i = 1; i <= 100; i++) {sum += i;
}
alert(sum);

对象

Function

JS 中的函数，其实就是一个对象，称为函数对象，用来描述函数的对象。

创建函数

创建方式一（构造器）：

var 变量名称（即函数名称） = new Function(参数列表,方法体);

例如：

// 创建函数对象
var fun1 = new Function("a","b","alert(a);");
// 调用函数
fun1(3,4);

创建方式二（声明定义）：

function 函数名称(参数列表) {方法体
}

例如：

// 定义函数
function fun2(a,b) {alert(a + b);
}
// 调用函数
fun2(3,4);

创建方式三（匿名函数）：

var 变量名称（即函数名称） = function(形式参数列表) {方法体
}

例如：

// 定义函数
var fun1 = function (a, b) {alert(a + b);
};
// 调用函数
fun1(3, 4);

JS 函数奇葩的特点

1.JS 函数的声明定义，不需要声明参数的数据类型，也不需要声明返回值类型

2.无论哪种方式创建的函数，其实都是在创建函数对象

3.声明定义函数时，允许函数名和参数列表完全相同，JS会覆盖前面的函数，使用最新定义的函数

4.JS函数的调用其实和函数的参数无关，只和函数名称有关。函数声明了参数，在实际调用时，你可以不传任何参数，传参时实参的个数可以少于形参的个数，也可以多于形参的个数

例如：

// 声明定义函数 fun1
var fun1 = function (a, b) {alert(a + b);
}// 声明定义相同名称的函数
var fun1 = function (a, b) {alert(a - b);
}
// 调用函数 fun1
fun1(3, 4); // 结果是 -1

5.JS 函数中有一个内置的隐藏对象，是一个名称为 arguments 的数组，封装了所有的实参，作用类似 Java 中的可变参数

例如：

/*** 声明定义一个可以计算任意个整数的总和的函数*/
function fun2() {var sum = 0;for (let i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;
}// 调用函数
var sum = fun2(1, 3, 4);
alert(sum);

Array

数组对象

创建数组

创建方式一：

var arr = new Array(元素列表);

创建方式二：

var arr = new Array(默认长度);

创建方式三：

var arr = [元素列表];

示例代码：

var array = new Array(1,2,3);
var array1 = new Array(5);
var array2 = [1,2,3];

特点

1.数组元素可以任意数据类型，且数组元素的数据类型可以不一致

var array3 = [1, "abc", true, undefined];

2.数组长度可变

RegExp

创建正则对象

创建方式一：

var reg = new RegExp("正则表达式");

创建方式二：

var reg = /正则表达式/;

示例代码：

// 匹配6个到12个的单词字符，并且匹配整个字符串
// 创建正则表达式对象方式一
var reg1 = new RegExp("^\\w{6,12}$");
// 创建正则表达式对象方式二
var reg2 = /^\w{6,12}$/;
var userName = "liaowenng";
var flag = reg2.test(userName);
document.write(flag); // true

正则表达式可以添加修饰符，例如：

var reg = /[0-9]+/g;

g 表示全字符串扫描；i 表示不区分大小写。

Global

全局函数：
1.decodeURI()
解码 URI。

2.decodeURIComponent()
解码 URI 组件。

3.encodeURI()
对 URI 进行编码。

4.encodeURIComponent()
对 URI 组件进行编码。

5.escape()
在 1.5 版中已弃用。请使用 encodeURI() 或 encodeURIComponent() 代替。

6.eval()
评估字符串并像脚本代码一样执行它。

7.isFinite()
确定值是否是有限的合法数。

8.isNaN()
确定值是否是非法数字。

9.Number()
将对象的值转换为数字。

10.parseFloat()
解析字符串并返回浮点数。

11.parseInt()
解析字符串并返回整数。

12.String()
将对象的值转换为字符串。

点击查看详情。

DOM

DOM 是 Document Object Model 的首字母缩写，译为文档对象模型。将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行 CRUD 的动态操作，即控制 HTML 文档的内容。

如下代码所示，获取一个元素对象，然后设置元素的内容：

// 获取元素对象
var element = document.getElementById("ID值");
// 设置元素对象的属性值
element.innerHTML = "Hello World!";

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

1.核心 DOM，针对任何结构化文档的标准模型

Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
Node：节点对象，其他5个的父对象

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

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

核心 DOM

Document 文档对象

Document 对象是 DOM 对象，也是节点对象，叫文档节点对象。不是元素对象。

获取文档对象：

window.document
document

获取元素对象：
document.getElementById()：根据 id 属性值获取元素对象
document.getElementByTagName()：根据元素名称获取元素对象，返回值是一个数组
document.getElementByClassName()：根据 Class 属性值获取元素对象，返回值是一个数组
document.getElementByName()：根据 name 属性值获取元素对象，返回值是一个数组

创建其它 DOM 对象：
createAttribute(name)
createComment()
createElement()
createTextNode()

Element 元素对象

在 HTML DOM 中，Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

元素也可以拥有属性。属性是属性节点。

Text 文本对象

创建文本节点对象：

document.createTextNode();

Node 节点对象

所有 DOM 对象都可以认为是一个节点。Node 相当于是 Element 的父类。所以 Node 定义的方法 Element 对象都可以使用。

在 HTML DOM （文档对象模型）中，每个部分都是节点：

1.文档本身是文档节点
2.所有 HTML 元素是元素节点
3.所有 HTML 属性是属性节点
4.HTML 元素内的文本是文本节点
5.注释是注释节点

Node 节点共有的方法

增删改查 DOM 树：
appendChild()：向节点的子节点列表的结尾添加新的子节点
removeChild()：删除并返回当前节点的指定子节点
replaceChild()：用新节点替换一个子节点

事件

某些组件被执行了某些操作后，触发某些代码的执行。

事件：某些操作，例如，单击、双击、键盘按下、鼠标移动等

事件源：发生事件的组件，例如，按钮、文本输入框等

监听器：事件处理程序，例如，一个函数、一段代码等

注册监听器：将事件源、事件、监听器绑定在一起。当某个事件源发生了某个事件，则会触发执行对应的监听器。

点击查看更多关于事件的内容。
点击查看更多关于事件的内容。

事件的概念

HTML 事件是发生在 HTML 元素上的“事情”。HTML 事件可以是浏览器或用户做的某些事情。

HTML DOM 事件允许 JavaScript 在 HTML 文档中的元素上注册不同的事件处理程序。

通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。

JavaScript 允许在事件被侦测到时执行代码。

当在 HTML 页面中的元素发生事件时，JavaScript 能够“应对”这些事件。

关于事件对象的概念

当 HTML 中发生事件时，该事件属于某个事件对象，例如，鼠标单击事件属于 MouseEvent 对象。

所有事件对象均基于 Event 对象，并继承其所有属性和方法。也就是说 Event 所有事件对象的父对象。

特别强调下，这里说的 Event 对象，有点类似于 Java 中类的概念。鼠标单击事件相当于一个具体的事件实例，属于 MouseEvent 这个类，其实 MouseEvent 类有很多事件实例，例如：onmousedown、onmouseenter、onmouseleave 等，在 w3school 中称之为事件类型。

区别在于，发生了某个事件，会产生事件所属的事件对象，例如，发生了 click 事件，会产生 MouseEvent 对象，发生 mousedown 事件，也会产生 MouseEvent 对象，但是这两种事件所产生的 MouseEvent 对象不是同一个，因为读取事件对象的属性 type 获得的值不同。说明发生了 click 事件，会产生一个属于 MouseEvent 类型的对象，这个对象就是 MouseEvent 的实例，按理应该叫 click 事件对象，只是属于 MouseEvent 类型而已。

常用的事件

1.点击事件
1.1.onclick 单击事件
1.2.ondblclick 双击事件

2.焦点事件
2.1.onblur 失去焦点事件。一般用于表单校验
2.2.onfocus 获得焦点事件

3.加载事件
3.1.onload 在对象已加载时，发生此事件

页面加载完后，再执行 JS 代码。

例如，页面全部加载完后，再给元素注册事件监听器：

 // 页面加载完之后，再给元素注册事件监听器
window.onload = function () {var div1 = document.getElementById("div1");// 注册事件监听器div1.onclick = function () {// 设置元素的class属性值div1.className = "d1";};
};

4.鼠标事件
4.1.mousedown 当用户在元素上按下鼠标按钮时，发生此事件。
4.2.mouseenter 当指针移动到元素上时，发生此事件。
4.3.mouseleave 当指针从元素上移出时，发生此事件。
4.4.mousemove 当指针在元素上方移动时，发生此事件。
4.5.mouseout 当用户将鼠标指针移出元素时，发生此事件。
4.6.mouseover 当指针移动到元素时，发生此事件。
4.7.mouseup 当用户在元素上释放鼠标按钮时，发生此事件。
4.8.mousewheel 不推荐使用。请改用 wheel 事件。

5.键盘事件
5.1.keydown 当用户正在按下键时，发生此事件。
5.2.keypress 某个键盘按键被按下并松开，发生此事件
5.3.keyup 当用户松开键时，发生此事件。

6.选中和改变
6.1.change 当form元素的内容、选择的内容或选中的状态发生改变时，发生此事件
6.2.select 用户选择文本后（对于<input>和<textarea>）发生此事件

7.表单事件
7.1.submit 提交按钮被点击时，发生此事件。在提交表单时发生此事件。

特别注意，事件源不是提交按钮，而是表单元素 <from>。也就是说提交按钮被点击时，表单元素 <form> 发生了 submit 事件，所以应该是在表单元素上注册提交事件监听器。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script !src="">function checkForm() {// 返回true才会真正提交表单项的数据；返回false则不会提交return true;}</script>
</head>
<body>
<!--
JS 引擎会将属性 onsubmit的装入到一个内部的函数体中：
function () {return checkForm();
}
所以必须加上return，那么内部函数才能返回true或false。否则没有返回值，则会提交表单。注意：onsubmit属性没有值或者值为true，会提交表单数据
-->
<form action="https://www.baidu.com" onsubmit="return checkForm();">姓名：<input name="username" type="text">年龄：<input name="age" type="text"><input type="submit" value="提交"></form>
</body>
</html>

7.2.reset 重置按钮被点击，发生此事件。重置表单时发生此事件。

绑定事件（注册事件处理程序）

方式一：
直接在 HTML 标签上指定事件属性，属性值就是 JS 代码。
缺点：HTML 标签与事件属性、JS 代码耦合，不利于维护。

方式二：
通过 JS 获取元素对象，再对元素对象中事件属性赋值。
注意：JS 代码的执行必须在 HTML 标签加载后执行。所以 JS 代码需要写在 HTML 文档的最后面比较稳妥。

演示代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>DOM的演示代码</title>
</head>
<body>
<img id="tx1" src="data:image/tx01.jpeg" alt="头像">
<!-- 绑定事件方式一-->
<img id="tx2" src="data:image/tx01.jpeg" alt="头像" onclick="this.src = 'image/tx02.jpeg';">
<script>// 绑定事件方式二// 1.先定义函数function fun() {tx1.src = "image/tx02.jpeg";}// 2.获取图像元素对象var tx1 = document.getElementById("tx1");// 3.注册点击事件处理程序tx1.onclick = fun;// 只能指定函数对象</script>
</body>
</html>

HTML DOM

1.innerHTML 属性。

例如，给 id 值为 div1 的 div 元素内部添加一个输入框：

var div1 = document.getElementById("div1");
div1.onclick = function () {div1.innerHTML = "<input type='text'>";
};

2.样式控制

2.1.使用元素对象的 style 属性来控制样式。

例如，将 id 值为 div1 的 div 元素的边框设置为 2px solid red：

var div1 = document.getElementById("div1");
div1.onclick = function () {div1.style.border = "2px solid blue";
};

2.2.先通过类选择器设置好样式，然后通过元素对象的 className 属性设置 class 属性的值，从而达到元素样式的控制。

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*先通过类选择器设置好样式*/.d1 {border: 1px solid red;width: 200px;height: 200px;}</style>
</head>
<body>
<div id="div1">div
</div>
<script !src="">var div1 = document.getElementById("div1");div1.onclick = function () {// 设置元素的class属性值div1.className = "d1";};</script>
</body>
</html>

BOM

BOM 是 Browse Object Model 的首字母缩写，译为浏览器对象模型。
将浏览器各个组件封装成对象。

Navigator

浏览器对象。

Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。

虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象。

Navigator 对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。

Window 窗口对象

特点：
1.Window 对象不需要创建可以直接使用 window 引用：window.方法名();。

2.对象名称 window 可以省略，即 window 引用可以省略。

方法：
1.与弹出框有关的方法:
1.1.alert() 显示带有一段消息和一个确认按钮的警告框。
1.2.confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
1.2.1.如果用户点击确定按钮，则方法返回 true
1.2.2.如果用户点击取消按钮，则方法返回 false
1.3.prompt() 显示可提示用 户输入的对话框。
1.3.3.返回值：获取用户输入的值

2.与打开关闭有关的方法：
2.1.close() 关闭浏览器窗口。
谁调用我，我关谁

2.2.open() 打开一个新的浏览器窗口
返回新的Window对象

3.与定时器有关的方法
3.1.setTimeout() 定时任务
在指定的毫秒数后调用函数或计算表达式。
返回值是一个唯一的 ID 值。

示例代码：

// var t1 = setTimeout("fun();", 2000);
var t2 = setTimeout(fun, 2000);
function fun() {alert("boom~~");
}

3.2.clearTimeout() 取消任务
取消由 setTimeout() 方法设置的timeout。

示例代码：

var t2 = setTimeout(fun, 2000);
function fun() {alert("boom~~");
}
// 取消定时任务
clearTimeout(t2);

4.4.setInterval() 周期任务
按照指定的周期(以毫秒计)来调用函数或计算表达式。
返回值是一个唯一的 ID 值。

4.5.clearInterval() 取消周期任务
取消由 setInterval() 设置的 timeout。

Screen

显示器屏幕对象

History

历史记录对象

Location

地址栏对象。

1.获取 Location 对象

1.1.window.location
1.2.location

2.方法
2.1.reload() 重新加载当前文档

点击查看详情

JavaScript/JS的学习相关推荐

1. JavaScript 的进阶学习 （Node.js）_01

   Node的学习 Node.js 是一个基于 Google 所开发的浏览器 Chrome V8 引擎的 JavaScript 运行环境. 属于 服务端的 JavaScript . 2019.03.01 ...

2. 什么是js为什么学习 JavaScript?

   什么是js为什么学习 JavaScript? JavaScript 缩写.一种计算机脚本语言,主要在web浏览器(客户端)解释执行,由网景公司开发. 请注意,网景公司的 JavaScript 和微软公 ...

3. 7 种 Javascript 常用设计模式学习笔记

   7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式 本文的 ...

4. JavaScript 权威指南-学习笔记（一）

   本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! JavaScript 权威指南-学习笔记 ...

5. js/jquery学习笔记

   javascript简介 JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言. 不同于服务器端脚本语言,例如PHP与ASP,JavaScript是客户端脚本语言,也就是说Ja ...

6. javascript高程3 学习笔记(二)

   ECMAScript function的理解 ECMAScript 函数与其他语言函数最大的不同在于,其不介意传入多少参数以及参数的类型 比如函数的形参有两个,但是调用函数传入的参数可以写一个,三个或 ...

7. 前端开发JS的学习之AngularJS库

   这两年做前端开发,对JS的学习还在不断,JS的发展还是很快的.下面来看看一个AngularJS库. 服务是AngularJS中非常重要的一个概念,虽然我们有了控制器,但考虑到其生命实在脆弱,我们需要用 ...

8. Javascript 随机数函数 学习之一：产生服从均匀分布随机数

   大家都知道Math.random是 javascript 中返回伪随机数的函数,但查看 MDN, The Math.random() function returns a floating-point ...

9. asp.net 用户注册怎么判断用户名是否重复 ajax,AJAX_asp.net结合Ajax验证用户名是否存在的代码，1， 使用JavaScript js文件，验证 - phpStudy...

   asp.net结合Ajax验证用户名是否存在的代码 1, 使用JavaScript js文件,验证用户名是否存在 复制代码 代码如下: var ajax = function(option) { va ...

最新文章

1. Javascript中undefined,NaN等特殊比较
2. Spring《五》集合的注入方式
3. linux回到初始的命令,Linux基础总结简单常用命令
4. 操作系统原理第四章：线程
5. 构建可扩展的有状态服务
6. mac下mysql忘记root密码的解决办法
7. WIN32_FIND_DATA
8. 2017百度之星初赛：A-1006. 度度熊的01世界（DFS）
9. 怎么让你开发的安卓软件适应更多尺寸的设备
10. js中this指向学习总结
11. 《程序员》杂志 · 2017 精华本
12. 浅谈CURD系统和CRQS系统
13. K8S学习笔记之将Google的gcr.io、k8s.gcr.io 换为国内镜像
14. TiCDC系列分享-01-简述产生背景及使用概况
15. Android-蓝牙的网络共享与连接分析
16. ImportError: No module named urlgrabber.grabber
17. 华为ensp模拟器 给路由器配置DHCP
18. 你想要的宏基因组-微生物组知识全在这(1906)
19. 使用GeoServer发布WMS动态地图服务，使用openlayers访问wms服务浏览地图数据
20. mac隐藏桌面图标快捷键_如何在Mac OS X桌面上隐藏图标

热门文章

1. 海域动态监视监测管理系统_监视和管理备份系统
2. 使用Spring WebFlux构建反应性REST API –第1部分
3. java ee的小程序_Java EE 8 –为更多设备提供更多应用程序
4. gdb 扩展 默认参数_默认方法一种扩展旧代码的方法
5. Java equals（）和hashCode（）
6. jaxb 映射 空字段_推土机：将JAXB对象映射到业务/域对象
7. Spring依赖注入–字段vs设置器vs构造函数注入
8. Apache Ignite，Hazelcast，Cassandra和Tarantool之间的主要区别
9. Spring Boot – spring.config.name –案例研究
10. 分析java 线程占用内存_Java线程：保留的内存分析