JavaScript
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript 。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES2015。
JavaScript是一种弱类型语言,具有以下几种特点:
- 交互性(可以进行信息的动态交互)
- 安全性(不允许直接访问本地磁盘)
- 跨平台性(只要是可以解释js的浏览器都可以执行,和平台无关)
使用JavaScript可以通过以下两种方式:
- 外部脚本
- <head>或<body>中引入
把脚本置于 <body> 元素的底部,可改善显示速度,因为脚本编译会拖慢显示。
外部脚本很实用,如果相同的脚本被用于许多不同的网页。
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本,请在<script> 标签的 src (source) 属性中设置脚本的名称:
<script src="myScript.js"></script>
严格检查模式
前提:IDEA需要设置支持ES6语法
“use strict”; 严格检查模式,预防JavaScript的随意性而导致的一些问题
必须写在JavaScript的第一行
局部变量建议使用 let 来定义
变量
JavaScript的变量类型可以大致分为以下几种:
- 数值类型:number
- 字符串类型:string
- 对象类型:object
- 布尔类型:boolean
- 函数类型:function
JavaScript变量中的特殊值:
- undefined:未定义(所有js变量在未赋予初始值时,默认值都是undefined)
- null:空
- NAN:非数字(非数值)
我们可以通过JavaScript提供的typeof()函数(返回变量值的类型)来确认变量的数值类型!
运算
关系运算
关系运算需要注意的是在JavaScript中,等号和双等号的含义有所不同,等于()相当于做数值字面的比较,全等于(=)表示除了数值字面来说,还会比较两个变量的数据类型!
逻辑运算
与运算:&&
- 当表达式全为真的时候,返回最后一个表达式的值
- 当表达式中,有一个为假的时候,返回第一个为假的表达式的值
var a = "abc"; // true
var b = true;
var c = false;
alert(a && b); // true
alert(b && a); // abc
alert(a && c); // false
或运算:||
- 当表达式全为假的时候,返回最后一个表达式的值
- 当表达式中,有一个为真的时候,返回第一个为真的表达式的值
var a = "abc"; // true
var c = false;
var d = null; // false
alert(a || c); // abc
alert(c || d); // null
**注意:**与运算和或运算有短路(指的是&&运算或||运算有结果之后,后边的表达式不再执行)
取反运算:!
**注意:**在JavaScript中,所有的变量,都可以作为一个boolean类型的变量去使用,例如:0、null、undefined、“”(空串)都认为是false!
数组
代码实例:
var cars = ["Saab", "Volvo", "BMW"];
下面的例子也会创建数组,并为其赋值:
var cars = new Array("Saab", "Volvo", "BMW");
以上两个例子效果完全一样。无需使用 new Array()。 出于简洁、可读性和执行速度的考虑,请使用第一种方法(数组文本方法)。
值得一提的是,JavaScript语言中的数组,规定了只要我们使用下标方式给数组元素赋值,而下标超过了数组长度,则会对数组进行自动扩容!
var array = [];
array[0] = 12;
array[2] = "expand";
alert(array.length); // 3
我们也可以通过for循环来输出数组内的元素
for (var i = 0; i < array.length; i++) {
alert(array[i]);
}
注意:在js中,变量并不能用int关键字来描述,需要使用var关键字
函数
JavaScript 函数是被设计为执行特定任务的代码块,在 JavaScript 函数中声明的变量,会成为函数的局部变量。
局部变量只能在函数内访问。
JavaScript 函数会在某代码调用它时被执行:
function myFunction(p1, p2) {
return p1 * p2; // 该函数返回 p1 和 p2 的乘积
}
myfunction();
JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。
圆括号可包括由逗号分隔的参数:
function name(参数 1, 参数 2, 参数 3) {
代码块;
}
函数参数(Function parameters)是在函数定义中所列的名称。
函数参数(Function arguments)是当调用函数时由函数接收的真实的值。
在函数中,参数是局部变量。
在其他编程语言中,函数近似程序(Procedure)或子程序(Subroutine)。
函数调用
函数中的代码将在其他代码调用该函数时执行:
- 当事件发生时(当用户点击按钮时)
- 当 JavaScript 代码调用时
- 自动的(自调用)
函数返回
当 JavaScript 到达 return 语句,函数将停止执行。
如果函数被某条语句调用,JavaScript 将在调用语句之后“返回”执行代码。
函数通常会计算出返回值。这个返回值会返回给调用者:
var x = myFunction(7, 8); // 调用函数,返回值被赋值给 x
function myFunction(a, b) {
return a * b; // 函数返回 a 和 b 的乘积
}
x 的结果将是:56
注意:不使用 () 访问函数将返回函数声明而不是函数结果:
<p id="demo"></p>
<script>
function accumulate(num1, num2) {
return num1 + num2;
}
document.getElementById("demo").innerHTML = accumulate;
</script>
返回的结果为:function accumulate(num1, num2) { return num1 + num2; }
注意:Java中函数允许被重载,但是在JavaScript中不允许函数的重载!重载函数会覆盖掉原来的函数定义!
function fun(a, b) {
var c = a + b;
return c;
}
function fun() {
return "无参函数";
}
alert(fun());
返回的结果为:无参函数
隐形参数(arguments)
在function函数中不需要定义,但是却可以直接用来获取所有参数的变量,我们管它叫做隐形函数,类似于Java中的可变长参数。
function arr() {
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i]);
}
}
arr(1, 2, 3, 4, 5);
即使我们在arr()函数中定义一个参数a,最后将a返回,执行该函数也能正常返回a=1!
JS中的自定义对象
Object形式的自定义对象
对象的定义
var 变量名 = new Object();
var obj = new Object(); // 对象实例(空对象)
变量名.属性名 = 值
obj.name = "张三"; // 定义一个属性
obj.age = 18;
变量名.函数名 = function(){}
obj.method = function () { // 定义一个函数
alert("姓名:" + this.name + ",年龄:" + this.age);
}
对象的访问
变量名.属性/函数名();
obj.method();
花括号形式的自定义对象
var 变量名 = {
属性名:值.
属性名:值,
函数名:function() {}
};
var a = {
name:"张三",
age:18,
metion:function() {
alert("姓名:" + this.name + ",年龄:" + this.age);
}
}
a.metion();
事件
什么是事件?事件是电脑输入设备与页面进行交互的响应,我们称之为事件!
常用的事件有以下几类:
- onload(加载完事件)
- 常用于做页面js代码的初始化操作
- onclick(单击事件)
- 常用于按钮的点击响应此操作
- onblur(失去焦点事件)
- 常用于输入框失去焦点后验证其输入内容是否合法的操作
- onchange(内容发生改变事件)
- 常用于下拉列表和输入框内容发生改变后的操作
- onsubmit(表单提交事件)
- 常用于表单提交前,验证所有表单是否合法的操作
事件的注册
什么是事件的注册(事件的绑定),简单来说就是告诉浏览器,事件执行之后需要执行哪些代码,这些就叫做事件注册!事件的注册又分为静态注册和动态注册两种!
**静态注册:**通过html标签的事件属性直接赋予事件响应后的代码,这种方式就叫做静态注册
**动态注册:**先通过js代码得到标签的dom对象,然后再通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码,叫做动态注册
onload加载完毕事件
onload事件是指浏览器解析页面完毕之后自动触发的事件!
<script>
function method() {
alert("加载完毕事件");
}
</script>
<body onload="method()">
</body>
onclick单击响应事件
以下代码实例中,展示了onclick事件的使用,其中,document是JavaScript语言中提供的一个对象(文档),通过获取id属性的元素来获取标签对象,Date函数是一个获取当前主机所显示时间的函数!
<script>
function data() {
document.getElementById("date").innerHTML = Date();
}
</script>
<button onclick="data()">时间是?</button>
<p id="date"></p>
onblur失去焦点事件
<script>
function method() {
console.log("静态注册onblur事件");
}
window.onload = function() {
// 1. 获取标签对象
var method = document.getElementById("gif");
// 2. 通过标签对象.事件名=function(){}执行
method.onblur = function () {
console.log("动态注册onblur事件")
}
}
</script>
<p>账号:<input id="demo" type="text" onblur="method()"></p>
<p>密码:<input id="gif" type="text"></p>
onchange内容发生改变事件
<script>
window.onload = function () {
var method = document.getElementById("demo");
method.onchange = function() {
alert("已选择国籍!");
}
}
</script>
<select id="demo">
<option value="">--请选择国籍--</option>
<option value="">中国</option>
<option value="">巴基斯坦</option>
<option value="">俄罗斯</option>
</select>
onsubmit表单提交事件
<script>
window.onload = function () {
var method = document.getElementById("demo");
method.onsubmit = function () {
alert("通过!");
return true;
}
}
</script>
<form action="http://losthost:8080" id="demo" method="get">
用户名:<input id="username" type="text" name="name">
<input type="submit" value="动态注册">
</form>
DOM模型
DOM是JavaScript操作网页的接口,全称叫文档对象模型(Document Object Model)。它的作用是将网页转化为一个Javascript对象,从而用JavaScript脚本进行各种操作(比如增删元素等)。
DOM的最小组成单位就是节点(node)。DOM树就是由不同类型的节点组成。每个节点可以看成是DOM树上的叶子。
在DOM中,节点的类型一共有7种
- Document:整个文档树的顶层节点;
- DocumentType:dotype标签比如:<!DOCTYPE html>
- Element:网页的各种HTML标签比如:<body> <h> <a> <div>
- Attribute:网页元素的属性比如:id=”id” class=”class” type=”text”
- Text:标签之间或标签包含的文本
- Comment:注释
- DocumentFragment:文档片段
Document对象的理解:
- Document它管理了所有的HTML文档内容
- Document它是一种树结构的文档,有层级关系
- 将所有的标签都进行了对象化
- 我们可以通过Document访问所有的标签对象
模拟对象化
假设现有一段HTML代码如下:
<body>
<div id="div01">div01</div>
</body>
对上述代码进行对象化,也就是将每个部分都看做为一个对象,类似于Java中的Class类的属性~
Class Dom{
private String id;
private String tagName;
private Dom parentNode;
private List<dom> childrem;
private Sting next;
}
Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
**提示:**Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
Document对象集合
集合 | 描述 |
---|---|
[all] | 提供对文档中所有 HTML 元素的访问。 |
[anchors] | 返回对文档中所有 Anchor 对象的引用。 |
applets | 返回对文档中所有 Applet 对象的引用。 |
[forms] | 返回对文档中所有 Form 对象引用。 |
[images] | 返回对文档中所有 Image 对象引用。 |
[links] | 返回对文档中所有 Area 和 Link 对象引用。 |
Document对象属性
属性 | 描述 |
---|---|
body | 提供对 元素的直接访问。对于定义了框架集的文档,该属性引用最外层的 。 |
cookie | 设置或返回与当前文档有关的所有 cookie。 |
domain | 返回当前文档的域名。 |
lastModified | 返回文档被最后修改的日期和时间。 |
referrer | 返回载入当前文档的文档的 URL。 |
title | 返回当前文档的标题。 |
URL | 返回当前文档的 URL。 |
Document对象方法
方法 | 描述 |
---|---|
close() | 关闭用 document.open() 方法打开的输出流,并显示选定的数据。 |
getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
getElementsByName() | 返回带有指定名称的对象集合。 |
getElementsByTagName() | 返回带有指定标签名的对象集合。 |
open() | 打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
write() | 向文档写 HTML 表达式 或 JavaScript 代码。 |
writeln() | 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。 |
Document 对象描述
HTMLDocument 接口对 DOM Document 接口进行了扩展,定义 HTML 专用的属性和方法。
很多属性和方法都是 HTMLCollection 对象(实际上是可以用数组或名称索引的只读数组),其中保存了对锚、表单、链接以及其他可脚本元素的引用。
这些集合属性都源自于 0 级 DOM。它们已经被 Document.getElementsByTagName() 所取代,但是仍然常常使用,因为他们很方便。
write() 方法值得注意,在文档载入和解析的时候,它允许一个脚本向文档中插入动态生成的内。
**注意:**在 1 级 DOM 中,HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。在 2 级 DOM 中,该方法已经被转移到了 Document 接口,它现在由 HTMLDocument 继承而不是由它定义了。
getElementByName()实现复选框的全选、反选、全不选
以下代码实例也可以使用getElementByTagName()方法来实现,只不过,getElementByTagName()需要选中的是input标签,getElementByName()选中的是input标签中的name属性!同样,也可以使用getElementById()方法来实现,该方法需要选中input标签中的id属性。
document属性提供的三个查询方法具有使用的优先顺序,一般来说,标签如果有id属性,就优先使用getElementById()方法,然后再考虑getElementByName()方法,最后再考虑getElementByTagName()方法,优先顺序按照查询范围的大小进行排序!
且以上三种方法,一定要在页面加载完成之后执行,才能查询到标签对象!因为HTML代码是从上到下执行的,所以一般在写代码的时候,会把script标签放在最下面!
<body>
<script>
// 全选
// document.getElementsByName()是根据name属性查询并返回多个标签对象的集合
function checkAll() {
let elementsByName = document.getElementsByName("hobby");
for (let i = 0; i < elementsByName.length; i++) {
// checked属性表示复选框的选中状态,若为true,则为选中
elementsByName[i].checked = true;
}
}
// 反选
function checkReverse() {
let elementsByName = document.getElementsByName("hobby");
for (let i = 0; i < elementsByName.length; i++) {
elementsByName[i].checked = ! elementsByName[i].checked;
}
}
// 全不选
function checkNo() {
let elementsByName = document.getElementsByName("hobby");
for (let i = 0; i < elementsByName.length; i++) {
elementsByName[i].checked = false;
}
}
</script>
<p>兴趣爱好</p>
<p>
<input type="checkbox" name="hobby">Java
<input type="checkbox" name="hobby">C++
<input type="checkbox" name="hobby">/JavaScript
</p>
<button onclick="checkAll()">全选</button>
<button onclick="checkReverse()">反选</button>
<button onclick="checkNo()">全不选</button>
</body>
正则表达式
正则表达式是构成**搜索模式(search pattern)**的字符序列。
当您搜索文本中的数据时,您可使用搜索模式来描述您搜索的内容。
正则表达式可以是单字符,或者更复杂的模式。
正则表达式可用于执行所有类型的文本搜索和文本替换操作。
JavaScript中的正则表达式语法:
/pattern/modifiers;
代码实例:
<script>
var patt = /\w/;
var str = "161ad9f1a";
alert(patt.test(str));
</script>
/\w/i 是一个正则表达式,其中,\w 是模式(pattern)(在搜索中使用),i 是修饰符(把搜索修改为大小写不敏感)。
正则表达式修饰符
修饰符可用于大小写不敏感的更全局的搜素:
修饰符 | 描述 |
---|---|
i | 执行对大小写不敏感的匹配。 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m | 执行多行匹配。 |
正则表达式模式
括号用于查找一定范围的字符串:
表达式 | 描述 |
---|---|
[abc] | 查找字符串是否包含a或b或c |
[a-z] | 查找字符串是否包含小写字母 |
[A-Z] | 查找字符串是否包含大写字母 |
[^abc] | 查找 |
[0-9] | 查找字符串是否包含数字0-9 |
元字符
元字符(Metacharacter)是拥有特殊含义的字符:
元字符 | 描述 |
---|---|
\w | 查找字符串是否包含字母、数字与下划线 |
\W | 查找字符串是否不包含字母、数字与下划线 |
\d | 查找数字 |
\D | 查找非数字 |
\s | 查找空白字符 |
\S | 查找费空白字符 |
量词
量词表示是否包含指定条件的字符:
量词 | 描述 |
---|---|
n+ | 匹配任何包含至少一个 n 的字符串 |
n* | 匹配任何包含零个或多个 n 的字符串 |
n? | 匹配任何包含零个或一个 n 的字符串 |
n{3,5} | 匹配任何包含至少3个n至多5个n的字符串 |
^n | 匹配任何以n开头的字符串 |
n¥ | 匹配任何以n结尾的字符串 |
注意:假设此时有一个字符串var=“abcaaaac”,而正则表达式var patt = /a{2,4}/,虽然要求最多只能由4个a,但是在遍历的时候,字符串遍历到第二个a时,已经满足了最少2个a的条件,就会立刻返回,所以会返回true,如果需要从头到尾遍历字符串,则需要以下表达式:
var patt = /\^a{2,4}$/
验证用户名是否合法
要求:点击按钮之后,可以判断用户名输入是否合法,合法返回通过,不合法返回不通过,用户名必须包含字母、数字或下划线,并且长度在5-12之间,匹配规则需要使用正则表达式!
<body>
<script>
// 验证规则:字符串必须包含字母、数字或下划线,并且长度在5-12之间
function methon() {
var username = document.getElementById("username");
var innerText = username.value;
var patt = /^\w{5,12}$/;
if (patt.test(innerText)) {
alert("通过!");
} else {
alert("不通过!");
}
}
</script>
用户名:<input type="text" id="username" value="">
<button id="button" onclick="methon()">验证</button>
</body>
两种常见的验证提示效果
常见的验证提示效果分为以下两种,一是验证之后显示“用户名不合法”的文本,另一种是进行验证之后显示“√”或者“x”的小图标,但无论那种,我们都需要包含提示效果内容的标签,并且需要对标签内容进行修改!
第一种:文本提示
<script>
function method() {
var username = document.getElementById("username");
var innerText = username.value;
var span = document.getElementById("testSpan");
var patt = /^\w{5,12}$/;
if (patt.test(innerText)) {
span.innerHTML = "用户名合法!"
} else {
span.innerHTML = "用户名不合法!"
}
}
</script>
用户名:<input type="text" id="username" value="">
<span id="testSpan"></span>
<button onclick="method()">验证</button>
</body>
第二种:图片提示
<body>
<script>
function method() {
var username = document.getElementById("username");
var innerText = username.value;
var span = document.getElementById("testSpan");
var patt = /^\w{5,12}$/;
if (patt.test(innerText)) {
span.innerHTML = "<img src=\"#\" alt=\"\" id=\"img\"
+ "width=\"18\"m height=\"18\" align=\"middle\">";
} else {
span.innerHTML = "<img src=\"#\" alt=\"\" id=\"img\"
+ "width=\"18\"m height=\"18\" align=\"middle\">";
}
}
</script>
用户名:<input type="text" id="username" value="">
<span id="testSpan"></span>
<button onclick="method()">验证</button>
</body>