JavaScript基本入门教程
JavaScript基本入门
一、JavaScript语法详解
1.JavaScript的组成
2.JavaScript的引入方式
- 使用JavaScript:前缀构建执行JavaScript代码的URL(适合执行语句只有一行)
- 使用<script>....</script>来包含JavaScript代码
<!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>
<script src="test.js" type="text/javascript"></script>
3.数据类型和变量
- 隐式声明
- 显式声明(推荐使用)
<!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>
undefined 未定义类型,该类型只有一个固定值,即undefined,表示变量声明却未定义具体的值。
<!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
- 对于减号运算符,因为字符串不支持减法运算,所以自动将字符串转换成数值
- 对于加号运算符,因为字符串可以用加号作为连接运算符,所以自动将数值转换为字符串
- 其他类型的数据之间的转换可以自行实验,很简单
- toString():将布尔类型值、数值等转换成字符串
- parseInt():将字符串、布尔值等转换成整数(不进行四舍五入,直接取整)
- parseFloat():将字符串、布尔值等转换成浮点数
<!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
- 全局变量:可以在JavaScript所有脚本代码中使用。
- 局部变量:只能在方法中起作用,出了方法,就不起作用了,但是,有一点必须注意,那就是在方法中没有代码块的概念,也就是说,在方法的代码块中定义的局部变量,在整个方法中都是可以使用的,不限于在代码块中。
- 定义变量时使用var和不使用var的区别:如果使用var定义变量,那么程序会强制定义一个新的变量。如果没有使用var定义变量,系统会优先在当前上下文中搜索是否存在这个变量,如果有,则对这个变量重新赋值,否则重新定义一个新的变量。
- 事件中的全局变量和局部变量:请看代码案例五。
<!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
局部变量
<!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.基本数据类型
- 数值类型:包含整数和浮点数
- 布尔类型:只有true和false
- 字符串类型:用引号括起来的数据,可以是单引号或者是双引号
- undefined类型:专门用来确定已经创建的变量,但是没有赋值的变量
- null类型:表明某个变量的值为空
5.正则对象
- var reg = new RegExp("表达式"); (开发中基本不用)
- var reg = /^表达式$/; 直接量(开发中常用)
- var reg = /表达式/;
<!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
<!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.复合类型
- Object:对象
- Array:数组
- Function:函数
<!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>
属性/方法 | 说明 |
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
- JavaScript的数组长度可边,数组的长度是数组最大索引+1
- 同一个数组的元素可以互相不同
- 访问数组元素时不会产生数组越界,访问未赋值的数组元素的时候,该元素的值为undefined
<!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>
属性/方法 | 说明 |
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
- 定义命名函数
- 定义匿名函数
- 使用Function类匿名函数(了解)
- 递归函数
function 函数名 (参数列表) {
// 函数体
}
- JavaScript函数定义必须用小写的function;
- JavaScript函数无需定义返回值类型,直接在function后面书写 方法名;
- 参数的定义无需使用var关键字,否则报错;
- JavaScript函数体中,return可以不写,也可以return 具体值,或者仅仅写return;
<!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>
- JavaScript函数调用执行完毕一定有返回值,值及类型根据return决定,如果未return具体值,返回值为undefined;
- JavaScript函数若同名,则不存在方法重载,只有方法相互覆盖,最后定义的函数覆盖之前的定义;
- 因为JavaScript不存在函数重载,所以JavaScript仅根据方法名来调用函数,即使实参与函数的形参不匹配,也不会影响正常调用;
- 如果形参未赋值,就使用默认值undefined
- 在同一个<script>...</script>标签中允许先调用函数,再定义函数,但是在不同的<script>...</script>标签中,只能调用前面的<script>...</script>标签中的函数,不允许调用后面的<script>...</script>标签中的函数。
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>
<!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>
<!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>
- 这里使用isNaN来判断num是否是NaN,因为NaN也是number类型
- 且NaN不和任何类型的数据相等,只能使用isNaN()方法来判断是否是NaN
- 使用new关键字调用构造器创建对象
- 使用Object直接创建对象
- 使用JSON语法创建对象
<!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
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);
}
- 避免书写函数
- 避免书写new
- 使用键值对的形式创建属性和方法
<!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>
7.函数专项
- 函数:就像Java的方法一样,这个函数可以被调用
- 对象:定义一个函数的时候,系统也会自动创建一个对象,该对象是Function的实例
- 方法:定义一个函数的时候,该函数通常都会被附加给某个对象,作为该对象的方法
- 类:定义函数的同时,也会得到一个与函数同名的类
<!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>
<!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>
<!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>
- 创建第一个对象p1,因为national是类属性,对象p1并没有这个属性,所以p1.national打印的结果国籍是undefined
- 输出arg,因为arg是局部变量,出了方法就不能使用,所以输出为undefined
- 创建第二个对象p2,重新创建一个对象以后,按照类属性进行打印,重新打印对象p1对象,发现p1的国籍变成了和p2的一致,这是因为类属性改变后,所有的该类属性都会变化,但是作为对象的属性,对象创建完成以后就不会再变了
- 动态地为某个对象添加属性,或者方法,它们只属于这个对象,其他的对象则不会享受这样的属性和方法,而动态地添加类属性,则会改变类的属性。
二、BOM对象
1.BOM对象的基本概念
- BOM(Browser Object Model)浏览器对象模型
- 浏览器:IE、火狐、谷歌等
- 作用:用来执行浏览器的相关操作。(例如:浏览器的地址、弹出消息等)
- 一般情况下,window代表了BOM对象。
- window对象是JavaScript的内置对象,使用window对象调用方法时可以省略window不写。
2.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>
- alert():警告框,用来弹出警告消息
- confirm():确认框,用于告知用户信息并收集用户的选择
- prompt():输入对话框,用来收集用户的输入
- 定时器:setInterval()、clearInterval()和setTimeout()、clearTimeout()
<!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>
- setInterval(“code”, interval)、clearInterval(timer):设置、删除定时器。setInterval设置每隔interval毫秒执行一次code
<!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>
- setTimeout(“code”, interval)、clearTimeout(timer):设置、删除单次定时器。setTimeout设置在interval毫秒后执行一次code
<!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>
3.location对象
<!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>
三、DOM对象
1.DOM对象的概述
- DOM(Document Object Model) 文档对象模型
- 文档:标记型文档(HTML等)
- DOM是将标记型文档中所有内容(标签、文本、属性)都封装成对象,通过操作对象的属性或者方法,来达到操作或者改变HTML展示效果的目的。
2.获取元素对象的四种方法
- getElementById(); ---通过元素ID获取对应元素对象,可以通过ID获取对应的元素对象,如果找不到,返回null
- getElementsByName(); ---通过元素的name属性获取符合要求的所有元素
- getElementsByTagName(); ---通过元素的元素名属性获取符合要求的所有元素
- getElementsByClassName(); ---通过元素的class属性获取符合要求的所有元素,可以获取到元素节点对象 数组;如果找不到,返回 空数组
<!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>
<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>
3.访问表单控件
<!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>
4.访问列表框、下拉菜单的选项
<!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>
5.访问表格子元素
<!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>
6.修改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>
7.增加HTML元素
<!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>
<!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>
<!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>
<!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>
8.删除HTML元素
<!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>
<!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>
<!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.两种绑定事件的基本方法
<!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>
<!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>
// 为字符串增加一个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;
2.事件处理函数中的this关键字
- JavaScript脚本通常处于window对象下运行,如果JavaScript脚本中使用this关键字,通常引用到window对象本身。
- 如果在HTML元素的onclick属性指定JavaScript脚本,如果在这些脚本使用了this关键字,那么该关键字指向HTML元素本身。
<!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>
<!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>
JavaScript基本入门教程相关推荐
- JavaScript新手入门教程大全~~~
JavaScript新手入门教程大全~~~ 一. js教程介绍:JavaScript是一种运行在浏览器中的解释型的编程语言. 那么问题来了,为什么我们要学JavaScript?因为你没有选择.在Web ...
- 《2020版JavaScript基础入门教程全集》,助你一臂之力!
当下,随着5G商用正在有序推进,很多传统的前端工程师并不能满足时下企业用人需求了,越来越多的开发模式以及前端框架不断的涌现出来,这也就要求程序员需要不断去自我增值. 前端要学习的东西很多,对于自学的小 ...
- 百度地图JavaScript开发入门教程
自从openGPS.cn小编在2011年的一个WEB项目中用到了百度地图做售楼数量分布显示功能之后,就一发不可收拾,在位置服务的领域一路走了5年之久.今天难得时间充裕,给WEB开发者分享一点自己的经验 ...
- JavaScript 快速入门教程
文章目录 1.JavaScript 简介 2.JavaScript 用法 2.1.在 `<head>` 或者 `<body>` 的 JavaScript 2.2.外部的 Jav ...
- 0基础js新手JavaScript学习入门教程
1 下载所需工具 chrome,谷歌开发的一款浏览器. vscode,微软开发的一款写代码的工具. JavaScript代码需要浏览器来运行,用来控制网页的各种行为. 浏览器地址栏访问的是网页,因此J ...
- JavaScript基础入门教程
目录 1.JavaScript介绍 什么是JavaScript? JavaScript的作用 JavaScript的组成 JavaScript的书写位置 JavaScript的输入输出语法 2.变量 ...
- 入门前端-《JavaScript 语言入门教程-实例对象和New对象》
new 命令的原理 使用new命令时,它后面的函数依次执行下面的步骤. 创建一个空对象,作为将要返回的对象实例. 将这个空对象的原型,指向构造函数的prototype属性. 将这个空对象赋值给函数内部 ...
- 正则表达式入门教程经典Javascript正则表达式(share)
前言 例子: ^.+@.+\\..+$ 这样的代码曾经多次把我自己给吓退过.可能很多人也是被这样的代码给吓跑的吧.继续阅读本文将让你也可以自由应用这样的代码. 正文 教程:正则表达式30分钟入门教程 ...
- 【前端实例代码】Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~
b站视频演示效果: [前端实例代码]Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码: <!DOCTYP ...
最新文章
- 模板 - C++ STL
- pip 安装报错,is not a supported wheel on this platform
- 22桥接模式(Bridge Pattern)
- 【Java】I/O阻塞下的守护线程与程序计数
- C++:究竟还有没有未来?
- bootstrap-multiselect加载本地数据
- android和java中常见 Exception
- .net winform panel 不刷新_winform项目——仿QQ即时通讯程序04:登录界面补充
- 专访尹毅(法师Seay):少年成名,野路子的奇妙逆袭 - FreeBuf.COM | 关注黑客与极客...
- 【JSP】div自适应大小
- python 双色球 大乐透 5注随机选号
- 【机器学习】TensorFlow共享GPU资源
- matlab飞思卡尔工具包,IMX6开发板飞思卡尔系统烧写工具MFGTool2工具详解-迅为电子...
- gif动图怎么制作?gif在线制作方法,一键制作超简单
- 程序员如何创建自己的网站
- 【UE4 制作自己的载具】1-使用3dsmax制作载具
- htm盒子模型与定位
- 极限思想在计算机中的应用,数学极限思想的应用论文(共2篇)
- 【软件测试】软件测试分类
- m-audio keystation 88/61 midi键盘的走带控制器在cubase里面怎么用