ECMAScript(核心):规定了JS的语法和基本对象
DOM文档对象模型:处理网页内容的方法和接口,D是指标记型文档HTML
BOM浏览器对象模型:与浏览器交互的方法和接口
1)内部脚本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>运行JavaScript程序</title>
</head>
<body>
<!--使用JavaScript:前缀构建执行JavaScript代码的URL-->
<a href="javascript:alert('手动运行JavaScript!');">手动运行</a>
<!--使用<script>....</script>来包含JavaScript代码-->
<script type="text/javascript">
alert("自动运行JavaScript!");
</script>
</body>
</html>
2)导入JavaScript文件
<script src="test.js" type="text/javascript"></script>
注意:外部引用时script标签内不能有script代码,即使写了也不会执行。
1)变量的声明
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>变量的声明</title>
</head>
<body>
<script type="text/javascript">
// 隐式声明
a = "我是Lemon";
alert(a);
// 显式声明
var b = "我是Tom";
console.log(b);
</script>
</body>
</html>
2)变量的命名规则
在声明JavaScript变量时,需要遵循以下命名规范:
必须以字母或下划线开头,中间可以是数字、字符或下划线
变量名不能包含空格等符号
不能使用JavaScript关键字作为变量名,如:function、this、class
JavaScript严格区分大小写。
3)基本数据类型
类似于java中的基本数据类型
string 字符串类型:” ”和’ ’都是字符串。 JavaScript中没有单个字符
boolean 布尔类型:固定值为true和false
number 数字类型:任意数字
null 空,一个占位符。
undefined 未定义类型,该类型只有一个固定值,即undefined,表示变量声明却未定义具体的值。
注:
A.因为undefined是从null中派生出来的,所以undefined==null。JavaScript区别于java,是弱类型语言,变量的使用不用严格遵循规范,所以一个变量声明好之后,是可以赋予任意类型的值。
B.ECMAScript实现之初的一个bug,null属于基本数据类型,typeof(null)--object。
4)引用数据类型
引用类型通常叫做类(class),但在JavaScript中,因为不存在编译过程,所以没有类的概念,所处理的引用数据类型都是对象。
标准创建方式:
var str = new String(); //和java相同
var str = new String; //js独有的方式
5)类型转换
JavaScript支持类型自动转换,且功能非常强大,看下面的代码案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类型转换</title>
</head>
<body>
<script type="text/javascript">
var a = "3.145";
var b = 2;
alert((a - b) + "\n" + (a + b));
</script>
</body>
</html>
输出的结果是:
1.145
3.1452
分析:
6)类型转换的常用方法(强制类型转换)
代码案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>强制类型转换</title>
</head>
<body>
<script type="text/javascript">
var a = "3.145";
var b = 2;
var c = parseInt(a);
var d = parseFloat(a);
var e = a + b;
var f = c + b;
var g = d + b;
console.log(e + "-----" + f + "-----" + g);
console.log(typeof(toString(b)));
</script>
</body>
</html>
运行结果:
3.1452-----5-----5.145
string
尤其要注意以下的这种情况:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>强制类型转换</title>
</head>
<body>
<script type="text/javascript">
var a = "3.145a25";
console.log(parseFloat(a));
</script>
</body>
</html>
运行结果:
3.145
分析:数值字符串中出现非数值的字符的时候,强制类型转换只会转换这个非数值字符的前面的数值字符,后面的自动忽略。
7)全局变量和局部变量
代码案例一:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全局变量和局部变量</title>
</head>
<body>
<script type="text/javascript">
// 定义全局变量
var test = "全局变量";
// 定义方法
function fun() {
// 定义局部变量,这个变量会在方法中覆盖掉全局变量
// 而出了方法,就不起作用了
var test1 = "局部变量";
console.log(test);
}
fun();
console.log(test);
</script>
</body>
</html>
运行结果:
局部变量
全局变量
代码案例二:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全局变量和局部变量</title>
</head>
<body>
<script type="text/javascript">
function test(obj) {
// 定义一个局部变量,这个局部变量的作用范围是整个函数
var i = 0;
if (typeof obj == "object") {
// 定义一个变量j,不同于Java,这个j的作用范围是这个函数,而不仅仅是if代码块内
var j = 5;
// 定义一个变量k,k的作用范围也是整个函数
for (var k = 0; k < 5; k++) {
document.write(k);
}
}
// 已经出了if代码块
document.write("<br />" + i + j + k);
}
// 调用函数
test(document);
</script>
</body>
</html>
运行结果:
01234
055
代码案例三:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用var和不使用var定义变量的区别</title>
</head>
<body>
<script type="text/javascript">
var scope = "全局变量";
function fun() {
// 全局变量被局部变量覆盖
// 但是此时的scope尚未被赋值,所以输出undefined
document.writeln(scope + "<br />");
// 定义局部变量,作用范围为整个函数
var scope = "局部变量";
document.writeln(scope + "<br />");
}
fun();
</script>
</body>
</html>
运行结果:
undefined
局部变量
分析:
全局变量被局部变量覆盖,但是此时的scope尚未被赋值,所以输出undefined。因为用了var就是强制定义了一个新变量,并覆盖了全局变量,但是代码是从上到下依次执行,所以输出结果是:undefined。把局部变量的var取消掉,就可以输出正确结果。
代码案例四:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用var和不使用var定义变量的区别</title>
</head>
<body>
<script type="text/javascript">
var scope = "全局变量";
function fun() {
// 依旧使用的是全局变量
document.writeln(scope + "<br />");
// 定义局部变量,但实际上是对全局变量的重新赋值
scope = "局部变量";
document.writeln(scope + "<br />");
}
fun();
</script>
</body>
</html>
运行结果:
全局变量
局部变量
代码案例五:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全局变量和局部变量</title>
<script type="text/javascript">
var x = 1314;
</script>
</head>
<body>
<!--这个按钮,重新定义了局部变量,所以输出局部变量-->
<input type="button" value="局部变量" onclick="var x = 520; alert(x);" /><br />
<!--这个按钮没有重新定义变量,所以输出全局变量-->
<input type="button" value="全局变量" onclick="alert(x);" />
</body>
</html>
4.基本数据类型
各种类型的相关计算和Java十分相似。可以结合Java中的基本数据类型加以比较。
1)正则对象的创建方法
注意事项:
/^表达式$/ 只要有无法成立正则的字符存在,即为false。
全部符合为true
(检查严格,眼睛不揉沙子)
适用于表单校验
/表达式/ 只要有成立正则的字符存在,即为true。
全部不符合为false
(检查不严格,懒人思想)
适用于字符串查找、替换
2)test()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则对象</title>
<script type="text/javascript">
// 正则表达式对象创建方式,这种创建方式要注意把通配符的反斜杠转义掉
var regex1 = new RegExp("\\w+@\\w+\\.\\w+");
// 直接量的创建方式,开发中常用的是这样的方式,用于表单的校验
var regex2 = /^\w+@\w+\.\w+$/;
// 模糊匹配,只要部分符合,就返回true
var regex3 = /\w+@\w+\.\w+/;
console.log(regex1.test("223344@163.com"));
console.log(regex2.test("223344@163.com"));
console.log(regex3.test("!223344@163.com"));
</script>
</head>
<body>
</body>
</html>
运行结果:
true
true
true
3)结合字符串的replace()方法实现trim()方法
由于JavaScript的字符串没有trim()方法,而字符串的replace()方法也可以使用正则表达式,所以可以结合字符串的replace()方法实现trim()方法。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则表达式和replace()方法实现trim()方法</title>
</head>
<body>
<script type="text/javascript">
function trim (str) {
// g表示尽可能多的匹配
return str.replace(/(^\s*)|(\s*$)/g, "");
}
console.log(trim(" Hello,JavaScript "));
</script>
</body>
</html>
6.复合类型
JavaScript中的复合类型大致上有如下三种:
1)数组对象
A.JavaScript数组的特点:
JS数组可以看做 Java中的ArrayList 集合。
数组中的每一个成员没有类型限制,及可以存放任意类型
数组的长度可以自动修改
B.JavaScript数组的四种创建方式:
var arr = [1,2,3,”a”,true]; // 常用的JS数组, 长度5
var arr = new Array(); // 创建一个数组对象,数组长度默认为0
var arr = new Array(4); // 数组长度是4,相当于开辟了长度为4的空间,每个元素是undefined。(仅在显示数组时进行处理,undefined为了方便显示变成了空字符串形式,其值本质仍然是undefined)
var arr = new Array(“a”,”b”,true); //创建了一个数组,长度3,数组元素是”a”,”b”,true
代码案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组的四种创建方式</title>
<script type="text/javascript">
// JavaScript中的数组和Java中的数组不一样,其实它更类似于Java中的集合,
// JavaScript中的数组的长度是可以变化的,还可以放置任意类型的数据
// 第一种数组的创建方式,常用的创建方式
var arr1 = [1, 2, 3, "我是Lemon"];
// 第二种数组的创建方式,创建一个数组对象,数组长度默认为0
var arr2 = new Array();
// 第三种数组的创建方式,创建一个长度为4的数组
var arr3 = new Array(4);
// 第四种数组的创建方式
var arr4 = new Array(1, 2, 3, "我是Lemon");
for (e in arr1) {
console.log(arr1[e]);
}
</script>
</head>
<body>
</body>
</html>
C.JS数组的常用属性/方法
属性/方法 | 说明 |
---|---|
length | 设置或者返回数组中的元素数目 |
join() | 把数组中的所有元素放入到字符串中,按照指定的字符串分隔 |
pop() | 删除最后一个元素并返回 |
push() | 向数组的末尾添加一个或者更多个元素,并返回数组的长度 |
reverse() | 颠倒数组中元素的顺序 |
代码案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组的常用方法和属性</title>
</head>
<body>
<script type="text/javascript">
// 创建一个数组对象
var arr = [1, 2, 3, 4, "我是Lemon"];
// length属性
console.log("数组arr的长度为:" + arr.length);
// 可以设置arr的长度,当长度大于本身长度时候,多余的部分用undefined填充,但是实际内容也是空的
arr.length = 8;
console.log("数组arr的最后一位元素为:" + arr[7]);
// join()方法,把数组中的所有元素放入到字符串中,按照指定的字符串分隔
console.log(arr.join(","));
// pop()方法,删除最后一个元素并返回
console.log("被删除的元素是:" + arr.pop());
console.log("数组arr的长度为:" + arr.length);
// push()方法,向数组的末尾添加一个或者更多个元素,并返回数组的长度
arr.push("CSDN");
console.log(arr);
arr.push("地点", "北京中关村");
console.log(arr);
// reverse()方法,颠倒数组中元素的顺序
console.log(arr.reverse());
</script>
</body>
</html>
运行结果:
数组arr的长度为:5
数组arr的最后一位元素为:undefined
1,2,3,4,我是Lemon,,,
被删除的元素是:undefined
数组arr的长度为:7
1,2,3,4,我是Lemon,,,CSDN
1,2,3,4,我是Lemon,,,CSDN,地点,北京中关村
北京中关村,地点,CSDN,,,我是Lemon,4,3,2,1
D.数组的特点
2)全局函数
A.eval()函数:计算JavaScript字符串,并把它当做脚本代码来执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>eval()函数</title>
</head>
<body>
<script type="text/javascript">
var str = window.prompt("请输入一段JavaScript可执行的算术代码:");
window.alert("您输入的代码执行结果是:" + eval(str));
</script>
</body>
</html>
B.URI/URL编码和解码
URL/URI编码:中文及特殊符号转换成 %16进制
作用:保证数据传递的完整性。
属性/方法 | 说明 |
---|---|
encodeURI() | 将字符串编码成URI |
decodeURI() | 将编码好的URI解码成原本的字符串 |
代码案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>URI的编码和解码</title>
</head>
<body>
<script type="text/javascript">
var uri1 = "http://127.0.0.1:8020/Day03_Course/20URI%E7%9A%84%E7%BC%96"
+ "%E7%A0%81%E5%92%8C%E8%A7%A3%E7%A0%81.html";
console.log("解码的结果是:" + decodeURI(uri1));
var uri2 = "http://127.0.0.1:8020/Day03_Course/20URI的编码和解码.html";
console.log("编码的结果是:" + encodeURI(uri2));
</script>
</body>
</html>
运行结果是:
解码的结果是:http://127.0.0.1:8020/Day03_Course/20URI的编码和解码.html
编码的结果是:http://127.0.0.1:8020/Day03_Course/20URI%E7%9A%84%E7%BC%96%E7%
A0%81%E5%92%8C%E8%A7%A3%E7%A0%81.html
3)自定义函数
如果一段代码需要被重复编写使用,那么我们为了方便统一编写使用,可以将其封装进一个函数(方法)中。作用:增强代码的复用性。
自定义函数的三种方式:
A.定义命名函数
定义格式:
function 函数名 (参数列表) {
// 函数体
}
说明:
代码案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义函数</title>
</head>
<body>
<script type="text/javascript">
function printSeason (month) {
switch (month) {
case "12":
case "1":
case "2":
window.alert(month + "月是冬季");
break;
case "3":
case "4":
case "5":
window.alert(month + "月是春季");
break;
case "6":
case "7":
case "8":
window.alert(month + "月是夏季");
break;
case "9":
case "10":
case "11":
window.alert(month + "月是秋季");
break;
default:
window.alert("您输入的月份有误,请重新输入!");
break;
}
}
var month = window.prompt("请输入月份(1-12):");
printSeason(month);
</script>
</body>
</html>
函数使用的注意事项:
B.定义匿名函数
定义格式:
var fun = function (参数列表) {
// 函数体
};
说明:
代码案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>匿名函数</title>
</head>
<body>
<script type="text/javascript">
// 实际开发中建议使用这种定义方式
var result = function (str) {
return str.toUpperCase();
};
var str = window.prompt("请输入一段英文字符串:");
window.alert("您输入的字符串转换后的结果是:" + result(str));
</script>
</body>
</html>
C.使用Function类匿名函数(了解)
JavaScript提供了Function类,该类可以用来定义函数,该类的构造器可以接收一系列字符串作为参数,其中最后一个字符串参数是函数的执行体。
代码案例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Function类定义函数</title>
</head>
<body>
<script type="text/javascript">
// 该函数的定义方式所有的参数都是字符串,且最后一个字符串是函数体
var printInfo = new Function("name", "age",
"window.alert('您输入的姓名是:' + name + ',年龄是:' + age)"
);
printInfo("Tom", "23");
</script>
</body>
</html>
D.递归函数
代码案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>递归函数</title>
</head>
<body>
<script type="text/javascript">
// 定义递归函数实现5的阶乘
var diGui = function (num) {
if (num == 0) return 1;
if (num == 1) return 1;
return num * diGui(num - 1);
};
var num = parseInt(window.prompt("请输入一个整数:"));
// 这里使用isNaN来判断num是否是NaN,因为NaN也是number类型
// 且NaN不和任何类型的数据相等,只能使用isNaN()方法来判断是否是NaN
if (typeof(num) == "number" && !isNaN(num)) {
if (num >= 0) {
window.alert(num + "的阶乘是:" + diGui(num));
} else {
window.alert("您输入的数字小于0,会导致内存溢出!");
}
} else {
window.alert("您输入的数字有误,请重新输入!");
}
</script>
</body>
</html>
重点说明:
3)自定义对象
对象是一系列命名变量、函数的集合。其中命名变量既可以是基本数据类型,也可以是复合数据类型,对象中命名变量称为属性,而对象中的函数称为方法,对象访问属性和方法可以通过链式编程"."来实现。自定义对象的两种常见方法:
A.使用new关键字调用构造器创建对象
使用new关键字调用构造器创建对象,这是最接近面向对象语言的创建对象的方式,这种创建方式总是可以返回一个对象。代码案例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>new关键字创建对象</title>
</head>
<body>
<script type="text/javascript">
// 定义一个函数,也就是定义了一个Person类
function Person (name, age) {
this.name = name;
this.age = age;
this.printInfo = function () {
console.log("姓名:" + this.name + ",年龄:" + this.age);
}
}
// 第一种创建对象的方法:无参创建
var p1 = new Person();
// 第二种创建对象的方法:带参创建
var p2 = new Person("张三", 19);
// 调用方法
p1.printInfo();
p2.printInfo();
// 添加属性
p1.school = "地大";
console.log("毕业院校:" + p1.school);
// 仅仅是添加了对象p1的school属性,p2没有添加
console.log("毕业院校:" + p2.school);
</script>
</body>
</html>
运行结果:
姓名:undefined,年龄:undefined
姓名:张三,年龄:19
毕业院校:地大
毕业院校:undefined
B.使用Object直接创建对象
JavaScript对象都是Object类的实例对象,因此可以使用如下方式创建,然后动态地添加方法和属性:
var myObj = new Object();
方法案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用Object直接创建对象</title>
</head>
<body>
<script type="text/javascript">
// 直接创建对象
var myObj = new Object();
// 添加属性
myObj.name = "张三";
myObj.age = 19;
myObj.school = "地大";
// 添加方法
myObj.printInfo = function () {
window.alert("姓名:" + this.name + ",年龄:" + this.age + ",毕业院校:" + this.school);
};
// 调用方法
myObj.printInfo();
// 遍历对象的全部属性或者方法
// m在数组中是索引,在这里是键
for (var m in myObj) {
console.log(myObj[m]);
}
</script>
</body>
</html>
运行结果:
张三
19
地大
function () {
window.alert("姓名:" + this.name + ",年龄:" + this.age + ",毕业院校:" + this.school);
}
C.使用JSON语法创建对象
使用JSON语法创建对象的优点:
代码案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用JSON语法创建对象</title>
</head>
<body>
<script type="text/javascript">
var person = {
name : "张三",
age : 19,
school : "中国地质大学",
printInfo : function () {
window.alert("姓名:" + this.name + ",年纪:"
+ this.age + ",毕业院校:" + this.school);
}
};
person.printInfo();
</script>
</body>
</html>
代码案例1:函数不仅可以调用,还是一个对象,是Function和Object的实例,window对象的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数专项研究1</title>
</head>
<body>
<script type="text/javascript">
// 定义一个匿名函数
var hello = function (name) {
return name + ",您好!";
};
// 判断hello方法是何种类型
console.log(hello instanceof Object);
console.log(hello instanceof Function);
// 当定义一个方法的时候,通常会把方法附加给window对象
console.log(window.hello("张三"));
</script>
</body>
</html>
代码案例2:定义函数的时候,如果没有明确把这个函数附加到哪个对象上,那么它就会被附加到window对象上。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数专项研究2</title>
</head>
<body>
<script type="text/javascript">
// 直接定义一个函数,没有指定该函数属于哪个对象,那么默认为window
var hello = function (name) {
return name + ",您好!"
};
// 以window对象作为调用者
console.log(window.hello("李四"));
// 定义一个对象
var p = {
// 定义一个方法,这个方法属于对象p
walk : function () {
console.log("慢慢走....")
}
};
// 以p对象作为调用者
p.walk();
</script>
</body>
</html>
代码案例3:函数的实例属性、类属性、局部变量的区别
实例属性:只有在对象中才存在,创建对象以后,才有这个属性,且不同对象之间的属性可以不一样。
类属性:类属性是类的属性,只有通过类名来调用,无法通过对象来调用,对象调用的时候就会出现undefined。
局部变量:在函数内可用,出了函数就不可用。
下面通过一个案例来区别函数的实例属性、类属性、局部变量:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实例属性、类属性和局部变量之间的区别</title>
</head>
<body>
<script type="text/javascript">
// 定义一个函数
function Person(national, name, age) {
// 类属性
Person.national = national;
// 实例属性
this.name = name;
this.age = age;
// 局部变量
var arg = 0;
}
// 创建第一个对象p1
var p1 = new Person("China", "Tom", 29);
// 因为national是类属性,对象p1并没有这个属性,所以打印的结果国籍是undefined
console.log("姓名:" + p1.name + " ,年龄:" + p1.age + " ,国籍:" + p1.national);
console.log("姓名:" + p1.name + " ,年龄:" + p1.age + " ,国籍:" + Person.national);
// 输出arg,因为arg是局部变量,出了方法就不能使用,所以输出为undefined
console.log(p1.arg);
// 创建第二个对象p2
var p2 = new Person("Janpan", "Lemon", 32);
// 重新创建一个对象以后,按照类属性进行打印
console.log("姓名:" + p2.name + " ,年龄:" + p2.age + " ,国籍:" + Person.national);
// 重新打印对象p1对象,发现p1的国籍变成了和p2的一致,这是因为类属性改变后,所有的
// 该类属性都会变化,但是作为对象的属性,对象创建完成以后就不会再变了
console.log("姓名:" + p1.name + " ,年龄:" + p1.age + " ,国籍:" + Person.national);
// 动态地为p1对象添加属性,p2不会享有
p1.score = 98;
console.log(p2.score);
// 动态地为类添加属性,则整个类都有了该属性,但是对象还是不会有
Person.grade = 1;
console.log(Person.grade);
console.log(p1.grade);
</script>
</body>
</html>
分析结果:
BOM对象包括:Window、Navigator、Screen、History、Location。这里着重讲解Window、Navigator以及History对象。
1)window对象的基本概述
window对象是整个JavaScript脚本运行的顶层对象,当定义一个全局变量的时候,它就是window对象的属性,当定义一个方法的时候,它就是window对象的方法。
代码案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全局变量和全局方法与window对象之间的关系</title>
</head>
<body>
<script type="text/javascript">
// 定义一个全局变量
var arg = 10;
// 定义一个全局方法
var fun = function () {
console.log("我是全局方法");
};
// 判断全局变量与全局方法是否是window对象的属性和方法,返回结果都是true
console.log("arg是window对象的属性吗:" + (arg === window.arg));
console.log("fun是window对象的方法吗:" + (fun === window.fun));
</script>
</body>
</html>
2)window对象的常用方法
代码案例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window对象的alert()方法</title>
</head>
<body>
<script type="text/javascript">
var name = prompt("请输入您的姓名:");
var flag = confirm("您的姓名是:" + name + " 吗?");
alert("用户的回答是:" + (flag ? "是" : "不是"));
</script>
</body>
</html>
代码案例2:定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器的应用</title>
</head>
<body>
<p id="tm"></p>
<script type="text/javascript">
// 定义一个定时变量
var timer;
// 保存页面开始执行的时间
var cur = new Date().getTime();
var setTime = function () {
// 设置指定标签的内容体
document.getElementById("tm").innerHTML = new Date().toString();
if (new Date().getTime() - cur >= 60 * 1000) {
clearInterval(timer);
}
};
timer = setInterval("setTime()", 1000);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器的应用</title>
</head>
<body>
<p id="tm"></p>
<script type="text/javascript">
var timer;
var cur = new Date().getTime();
var setTime = function () {
document.getElementById("tm").innerHTML = new Date().toLocaleString();
if (new Date().getTime() - cur <= 60 * 1000) {
window.setTimeout("setTime()", 1000);
}
};
setTime();
</script>
</body>
</html>
window对象还包含一个location属性,该属性可用于访问该窗口所装载的文档地址URL。window.location返回的是Location的实例对象,它有一个href属性可以用来跳转页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>location对象的href属性</title>
</head>
<body>
<input type="button" value="跳转按钮" onclick="zhiling()"/>
<script type="text/javascript">
var tz = function () {
location.href = "http://127.0.0.1:8020/Day02_Course/"
+ "34%e4%ba%8c%e7%bb%b4%e7%a0%81%e5%90%8d%e7%89%87.html"
};
var zhiling = function () {
alert("5秒后将跳转到指定页面!");
setTimeout("tz()", 5000);
};
</script>
</body>
</html>
在JavaScript中,我们可以通过DOM对象的4种方式获取对应的元素对象:
代码案例1:getElementById()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>根据ID来获取元素对象</title>
</head>
<body>
<p id="text">我是P标签的文本</p>
<textarea id="textarea">我是文本域textarea的文本</textarea>
<input type="button" value="点击访问" onclick="accessById()"/>
<script type="text/javascript">
var accessById = function () {
alert(document.getElementById("text").innerHTML + "\n" +
document.getElementById("textarea").value);
};
</script>
</body>
</html>
注意:表单元素的可见内容的获取都是通过它的value属性来获取的。
代码案例2:通过节点关系来访问HTML元素(建议使用Element而不是Node)
<ol id="books">
<li id="java">疯狂java讲义</li>
<li id="ssh">轻量级Java EE企业应用实战</li>
<li id="ajax" class="selected">疯狂Ajax讲义</li>
<li id="xml">疯狂XML讲义</li>
<li id="ejb">经典Java EE企业应用实战</li>
<li id="andriod">疯狂Andriod讲义</li>
</ol>
<hr />
<input type="button" value="获取父节点" onclick="change(currentElement.parentElement)"/><br />
<input type="button" value="获取第一个节点" onclick="change(currentElement.parentElement.firstElementChild)"/><br />
<input type="button" value="获取上一个节点" onclick="change(currentElement.previousElementSibling)"/><br />
<input type="button" value="获取下一个节点" onclick="change(currentElement.nextElementSibling)"/><br />
<input type="button" value="获取下下一个节点" onclick="change(currentElement.nextElementSibling.nextElementSibling)"/><br />
<input type="button" value="获取最后一个节点" onclick="change(currentElement.parentElement.lastElementChild)"/><br />
<script type="text/javascript">
var currentElement = document.getElementById("ajax");
var change = function (target) {
alert(target.innerHTML);
};
</script>
这里仅仅根据一个例子来实现访问:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>访问表单控件</title>
</head>
<body>
<form id="form" action="#" method="post">
<input type="text" name="username" /><br />
<input type="password" name="password" /><br />
<select name="color">
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
</select>
<hr />
<input type="button" value="第一个" onclick="alert(document.getElementById('form').elements[0].name)" /><br />
<input type="button" value="第二个" onclick="alert(document.getElementById('form').elements['password'].name)" /><br />
<input type="button" value="第三个" onclick="alert(document.getElementById('form').color.lastElementChild.innerHTML)" /><br />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>访问列表框和下拉菜单</title>
</head>
<body>
<select id="mySelect" name="mySelect" size="6">
<option id="java">疯狂java讲义</option>
<option id="ssh">轻量级Java EE企业应用实战</option>
<option id="ajax" selected="selected">疯狂Ajax讲义</option>
<option id="xml">疯狂XML讲义</option>
<option id="ejb">经典Java EE企业应用实战</option>
<option id="andriod">疯狂Andriod讲义<option>
</select><br />
<hr />
<input type="button" value="第一个" onclick="alert(document.getElementById('mySelect').options[0].innerHTML)" /><br />
<input type="button" value="第二个" onclick="alert(document.getElementById('mySelect').firstElementChild.nextElementSibling.innerHTML)" /><br />
<input type="button" value="第三个" onclick="alert(document.getElementById('ajax').index)" /><br />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>访问表格对象</title>
</head>
<body>
<table id="table" border="1px">
<caption>疯狂讲义体系</caption>
<tr id="tr1">
<td>疯狂Java讲义</td>
<td>轻量级JavaEE企业应用实战</td>
</tr>
<tr id="tr2">
<td>疯狂Ajax讲义</td>
<td>经典JavaEE企业应用实战</td>
</tr>
<tr id="tr3">
<td>疯狂XML讲义</td>
<td>疯狂Android讲义</td>
</tr>
</table>
<hr />
<input type="button" value="第一个" onclick="alert(document.getElementById('table').caption.innerHTML)"/><br />
<input type="button" value="第二个" onclick="alert(document.getElementById('table').rows[0].cells[0].innerHTML)"/><br />
<input type="button" value="第三个" onclick="alert(document.getElementById('table').rows[2].cells[1].innerHTML)"/><br />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态修改表格内容</title>
</head>
<body>
改变第<input type="text" id="rowNum" size="2"/>行,
第<input type="text" id="colNum" size="2"/>列的值为:
<input type="text" id="content" size="16"/>
<input type="button" value="确定修改" onclick="change()" />
<hr />
<table id="table" border="1px">
<caption>疯狂讲义体系</caption>
<tr id="tr1">
<td>疯狂Java讲义</td>
<td>轻量级JavaEE企业应用实战</td>
</tr>
<tr id="tr2">
<td>疯狂Ajax讲义</td>
<td>经典JavaEE企业应用实战</td>
</tr>
<tr id="tr3">
<td>疯狂XML讲义</td>
<td>疯狂Android讲义</td>
</tr>
</table>
<script type="text/javascript">
var change = function () {
var rowText = document.getElementById("rowNum").value;
var colText = document.getElementById("colNum").value;
var contentText = document.getElementById("content").value;
var tableElement = document.getElementById("table");
if (rowText == "") {
alert("您要修改的行数为空,请输入行数!");
return false;
} else if (colText == "") {
alert("您要修改的列数为空,请输入列数!");
return false;
} else if (contentText == "") {
alert("您要修改的内容为空,请输入内容!");
return false;
}
if (isNaN(parseInt(rowText))) {
alert("您输入的行数不是整数,请重新输入!");
return false;
} else if (isNaN(parseInt(colText))) {
alert("您输入的列数不是整数,请重新输入!");
return false;
}
if (parseInt(rowText) > tableElement.rows.length ||
parseInt(colText) > tableElement.rows.item(0).cells.length) {
alert("您要修改的单元格不在本表格内,请重新输入!");
return false;
}
// 修改内容
tableElement.rows.item(parseInt(rowText) - 1).cells.item(parseInt(colText) - 1).innerHTML = contentText;
alert("恭喜您修改成功!");
}
</script>
</body>
</html>
1)创建节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建节点</title>
</head>
<body>
<script type="text/javascript">
var div = document.createElement("div");
alert(div);
</script>
</body>
</html>
2)复制节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复制节点</title>
</head>
<body>
<ul id="d">
<li>疯狂Java讲义</li>
</ul>
<script type="text/javascript">
// 获取要复制的元素对象
var ul = document.getElementById("d");
// 复制它的第一个子元素对象,false表示不复制当前节点的后代节点
var java = ul.firstElementChild.cloneNode(false);
// 修改节点内容,并添加到页面中
java.innerHTML = "疯狂Ajax讲义";
ul.appendChild(java);
</script>
</body>
</html>
3)为列表框,下拉菜单添加选项
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>为下拉框列表框菜单添加选项</title>
</head>
<body id="test">
<script type="text/javascript">
// 创建select的对象
var s = document.createElement("select");
// 添加第一个选项
s.innerHTML = "<option>新增选项1</option>";
// 循环添加9个选项
for (var i = 0; i < 9; i++) {
var op = document.createElement("option");
op.innerHTML = "新增选项" + (i + 2);
s.add(op);
}
// 把select对象添加到body中
var bodyElement = document.getElementById("test");
bodyElement.appendChild(s);
</script>
</body>
</html>
4)动态添加表格内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态添加表格内容</title>
</head>
<body id="creatTable">
<script type="text/javascript">
var tableElement = document.createElement("table");
tableElement.border = "1px";
tableElement.createCaption().innerHTML = "新增表格";
for (var i = 0; i < 6; i++) {
var trElement = tableElement.insertRow(i);
for (var j = 0; j < 6; j++) {
var tdElement = trElement.insertCell(j);
tdElement.innerHTML = "新增表格第" + (i + 1) + "行第" + (j + 1) + "列";
}
}
document.getElementById("creatTable").appendChild(tableElement);
</script>
</body>
</html>
1)删除节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>删除节点</title>
</head>
<body id="test">
<input id="add" type="button" value="增加" disabled="disabled" onclick="add()" />
<input id="del" type="button" value="删除" onclick="del()" />
<hr />
<div id="testObj">被测试的对象</div>
<script type="text/javascript">
// 获取body对象
var bodyElement = document.getElementById("test");
// 获取被测试的对象
var testObjElement = document.getElementById("testObj");
// 创建add方法
function add() {
// 由于网页已经加载完毕,所以一开始是有testObjElement对象的,不管运行什么方法,
// testObjElement都是存在在内存中的
bodyElement.appendChild(testObjElement);
document.getElementById("add").disabled="disabled";
document.getElementById("del").disabled="";
}
function del() {
// 由于网页已经加载完毕,所以一开始是有testObjElement对象的,不管运行什么方法,
// testObjElement都是存在在内存中的
bodyElement.removeChild(testObjElement);
document.getElementById("add").disabled="";
document.getElementById("del").disabled="disabled";
}
</script>
</body>
</html>
2)删除列表框、下拉菜单的选项
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="opValue" type="text" />
<input type="button" value="增加" onclick="add()"/>
<input type="button" value="删除" onclick="del()"/>
<hr />
<select id="show" size="8" style="width: 120px;"></select>
<script type="text/javascript">
var add = function () {
// 以文本框的值来创建option对象
var op = new Option(document.getElementById("opValue").value);
// 以select的id作为唯一标识来添加元素
// 下面的语句可以换成document.getElementById("show").appendChild(op);
show.options[show.options.length] = op;
};
var del = function () {
// 判断列表框子元素个数
if (show.options.length == 0) {
alert("没有选项可以删除了!")
} else {
// 删除元素
// 可以使用document.getElementById("show").remove(0);
// 可以使用show.options.remove(0);
// 可以使用show.options[show.options.length - 1] = null;
show.remove(show.options.length - 1);
}
};
</script>
</body>
</html>
3)删除表格的行和单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>删除表格的行或者单元格</title>
</head>
<body id="body">
<input type="button" value="删除最后一行" onclick="delLastRow()" />
<input type="button" value="删除最后一个单元格" onclick="delLastCell()" />
<hr />
<table id="table" border="1px solid">
<tr id="tr1">
<td>疯狂Java讲义</td>
<td>轻量级JavaEE企业级应用</td>
</tr>
<tr id="tr2">
<td>疯狂Java讲义</td>
<td>轻量级JavaEE企业级应用</td>
</tr>
<tr id="tr3">
<td>疯狂Java讲义</td>
<td>轻量级JavaEE企业级应用</td>
</tr>
<tr id="tr4">
<td>疯狂Java讲义</td>
<td>轻量级JavaEE企业级应用</td>
</tr>
</table>
<script type="text/javascript">
// 获取表格的对象
var tableElement = document.getElementById("table");
// 定义删除最后一行的方法
var delLastRow = function () {
if (tableElement.rows.length > 0) {
// 删除行
tableElement.deleteRow(tableElement.rows.length - 1);
} else {
alert("已经没有表格的行可以删除了!")
}
};
// 定义删除最后一个单元格的方法
var delLastCell = function () {
if (tableElement.rows.length > 0) {
// 获取最后一行
var lastRow = tableElement.rows.item(tableElement.rows.length - 1);
// 删除最后一个单元个
if (lastRow.cells.length > 0) {
lastRow.deleteCell(lastRow.cells.length - 1);
} else {
delLastRow();
}
} else {
alert("已经没有表格的行可以删除了");
}
};
</script>
</body>
</html>
1)绑定HTML元素属性
代码案例:表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据校验表单</title>
</head>
<body>
<div>
<h2>数据校验表单</h2>
<form method="get" id="register" name="register" action="#" onsubmit="return checkForm()" >
用户名:<input type="text" name="username" id="username"/><br /><br />
密 码:<input type="password" name="password" id="password"/><br /><br />
电 邮:<input type="text" name="email" id="email"/><br /><br />
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
// 为字符串增加一个trim()方法
String.prototype.trim = function () {
var regex = /\s*/;
return this.replace(regex, "");
};
// 检查用户名
var checkUserName = function () {
// 获取用户名对象
var usernameElement = document.getElementById("username");
var username = usernameElement.value.trim();
// 检查是否为空
if (username == "" || username == null) {
alert("用户名为空,请输入用户名!");
return false;
}
// 检查是否符合用户名要求
var usernameRegex = /^[a-zA-Z]+\w*/;
if (!usernameRegex.test(username)) {
alert("用户名只能由字母、数字和下划线组成,且只能以字母开头!");
return false;
}
return true;
};
// 检查密码
var checkPassWord = function () {
// 获取密码对象
var passwordElement = document.getElementById("password");
var password = passwordElement.value.trim();
// 检查是否为空
if (password == "" || password == null) {
alert("密码为空,请输入密码!");
return false;
}
return true;
};
// 检查邮箱
var checkEmail = function () {
// 获取邮箱对象
var emailElement = document.getElementById("email");
var email = emailElement.value.trim();
// 判断邮箱是否为空
if (email == "" || email == null) {
alert("邮箱不能为空,请输入邮箱!");
return false;
}
// 检查邮箱是否符合邮箱格式
var emailRegex = /^\w+@[a-zA-Z0-9]+\.[a-zA-Z]+/;
if (!emailRegex.test(email)) {
alert("您输入的邮箱格式不符合要求,请重新输入!");
return false;
}
return true;
};
// 组合方法
var checkForm = function () {
return checkUserName() && checkPassWord() && checkEmail();
};
</script>
</div>
</body>
</html>
2)绑定DOM对象属性
代码案例:表单校验
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据校验表单</title>
</head>
<body>
<div>
<h2>数据校验表单</h2>
<form method="get" id="register" name="register" action="#" >
用户名:<input type="text" name="username" id="username"/><br /><br />
密 码:<input type="password" name="password" id="password"/><br /><br />
电 邮:<input type="text" name="email" id="email"/><br /><br />
<input type="submit" value="提交" />
</form>
<script type="text/javascript" src="js/JavaScript52.js" ></script>
</div>
</body>
</html>
JavaScript代码:
// 为字符串增加一个trim()方法
String.prototype.trim = function () {
var regex = /\s*/;
return this.replace(regex, "");
};
// 检查用户名
var checkUserName = function () {
// 获取用户名对象
var usernameElement = document.getElementById("username");
var username = usernameElement.value.trim();
// 检查是否为空
if (username == "" || username == null) {
alert("用户名为空,请输入用户名!");
return false;
}
// 检查是否符合用户名要求
var usernameRegex = /^[a-zA-Z]+\w*/;
if (!usernameRegex.test(username)) {
alert("用户名只能由字母、数字和下划线组成,且只能以字母开头!");
return false;
}
return true;
};
// 检查密码
var checkPassWord = function () {
// 获取密码对象
var passwordElement = document.getElementById("password");
var password = passwordElement.value.trim();
// 检查是否为空
if (password == "" || password == null) {
alert("密码为空,请输入密码!");
return false;
}
return true;
};
// 检查邮箱
var checkEmail = function () {
// 获取邮箱对象
var emailElement = document.getElementById("email");
var email = emailElement.value.trim();
// 判断邮箱是否为空
if (email == "" || email == null) {
alert("邮箱不能为空,请输入邮箱!");
return false;
}
// 检查邮箱是否符合邮箱格式
var emailRegex = /^\w+@[a-zA-Z0-9]+\.[a-zA-Z]+/;
if (!emailRegex.test(email)) {
alert("您输入的邮箱格式不符合要求,请重新输入!");
return false;
}
return true;
};
// 组合方法
var checkForm = function () {
return checkUserName() && checkPassWord() && checkEmail();
};
// 绑定DOM元素对象,后面的只是函数的引用,因此千万不能加上括号
document.getElementById("register").onsubmit = checkForm;
代码案例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数与this关键字1</title>
</head>
<body>
<input id="bn" type="button" value="在此按钮上使用this关键字" onclick="alert('在HTML的onclick属性上使用this关键字,' +
'它是指向该标签吗?\n答案是:' + (document.getElementById('bn') == this))"/>
<script type="text/javascript">
alert("独立的JavaScript代码的this指向window对象吗?\n答案是:" + (window == this));
</script>
</body>
</html>
代码案例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数与this关键字2</title>
</head>
<body>
<!--这里的this指向按钮1的对象-->
<input id="btn1" type="button" value="按钮1" onclick="alert(this.value)" />
<input id="btn2" type="button" value="按钮2" />
<input id="btn3" type="button" value="按钮3" />
<script type="text/javascript">
function test1 () {
alert(this.value);
}
// 将test1函数设置为按钮2的事件处理函数
// 这个this指向按钮1对象
document.getElementById("btn2").onclick = test1;
// 使用JSON格式定义一个p对象
var p = {
value : "p对象",
info : function () {
alert(this.value);
}
};
// 将p对象的info方法设置为按钮3的事件处理函数
// 这样的this也是按钮2对象
document.getElementById("btn3").onclick = p.info;
// 如果要将this指代p对象,需要将p来调用info()方法
/*document.getElementById("btn3").onclick = function () {
p.info();
};*/
</script>
</body>
</html>