两日大纲
● JavaScript基本语法
● JavaScript函数
● JavaScript基于对象编程
● JavaScript BOM对象编程
● JavaScript DOM对象编程
● JavaScript JSON格式简介
*************************************************************************************************
1. JavaScript简介
1.1 JavaScript是什么
JavaScript是由Netscape公司开发并随Navigator导航者一起发布的、介于Java与HTML之间、基于对象事件驱动的编程语言,正日益受到全球的关注。因它的开发环境简单,不需要Java编译器,而是直接运行在Web浏览器中,而因倍受Web设计者的所爱 。
1.2 JavaScript的作用
作用:
1、对html中的标签实现动态的控制。
2、验证表单中的内容。
1.3 JavaScript与Java区别
JS是Netscape公司的产品,前身是LiveScript;
Java是Sun公司的产品,现在是Oracle公司的产品。
JS只需解释就可以执行不需要编译。 由浏览器去解释。
Java需要先编译成字节码文件,再执行。
JS 是弱类型。
Java 是强类型。
int a = 10;
表示a只能存储int类型的数据。
JavaScript和java是两种不同的语言。但是有相似的地方。比较学习。
1.4 JavaScript特点
1、脚本编写语言(解释型语言都叫脚本语言)
2、基于对象的语言(面向对象的概念混淆不清,类、对象、方法(函数)、属性全部很模糊)
3、简单性(方法的调用)
4、安全性(每种语言都会说自己很安全)
5、动态性(处处都是反射,代码中控制代码)
6、跨平台性(在浏览器上运行)
*************************************************************************************************
2. JavaScript快速入门
2.1 编写第一个JavaScript程序
通常在<head></head>中书写:
<!-- 编写第一个JavaScript程序 -->
<script type="text/javascript">
//这里写js代码
alert("HelloWorld");
</script>
注意:
1、JavaScript 代码 必需写在 <script type="text/javascript"> </script> 标签内部。
2、此标签可以编写在html页面代码中的任何地方。html代码是由上至下,顺序执行。
3、通常我们会将此标签写在<head></head>,做到html代码和js代码相分离。
*************************************************************************************************
2.2 外部JS文件引用编写方式
1、新建js文件,文件的扩展名是.js
2、在js文件中编写
//切记:直接写js代码,不要写<script>标签
alert("HelloWorld--这是外部的js文件中的js程序");
3、在html页面上引入该文件
在<head></head>中写入:
<!-- 引入js文件 -->
<script type="text/javascript" src='/images/loading.gif' data-original="js/mao.js" ></script>
注意:
a、在html文档中,通过script标签的src属性引入外部的js文件。
b、外部引入功能的<script>标签中,不可以写JS代码。
c、如果要写JS代码,另外重新写一对<script>标签,然后在里面写。
引入JS文件和JS执行并存的代码:
<!-- 引入js文件 -->
<script type="text/javascript" src='/images/loading.gif' data-original="js/mao.js" ></script>
<script type="text/javascript">
alert("HelloWorld--可以和js文件中方法并存");
alert("haha");
</script>
*************************************************************************************************
3. JavaScript基本语法
3.1 数据类型与变量
3.1.1 回顾java的数据类型:
整数:int short long
小数:float double
字符:char
布尔:boolean
字节:byte
字符串:String
3.1.2 JavaScript的数据类型
数值(整数和实数) 不区分整数和小数。
字符串型(用""号或''括起来的字符或数值) 包含了字符串和字符。
布尔型(使True或False表示)
空值 null 表示值为空
3.1.3 回顾java定义变量
数据类型 变量名;
数据类型 变量名 = 初始值;
3.1.4 JavaScript定义变量
var 变量名=初始值;
var 变量名;
js中定义的变量,在没有赋值之前,这些空间中是没有数据类型的。
一旦赋值以后,js通过值来主动帮我们判断该变量应该是什么类型。
通过typeof可以知道js变量的类型。
代码:
<script type="text/javascript">
//定义变量
var a = 10;
var b = 20.5;
var c = "abc";
//判断变量是什么类型
alert(typeof(a));
alert(typeof(b));
alert(typeof(c));
</script>
1、建议大家一定要使用var 关键字去定义一个变量。
2、建议大家定义一个变量,最好就存放一种数据类型数据。
*************************************************************************************************
3.2 运算符
3.2.1 算数运算符
JavaScript中的算术运算符有单目运算符和双目运算符。
双目运算符:
+(加) 、-(减)、 *(乘)、 /(除)、 %(取模)
单目运算符:
++(递加1)、--(递减1)。
注意:
1、基本的算术运算和java一样。
2、整数除不尽,会自动转成小数,反正在js中都是number。
3、字符串在加上一个整数的时候会进行拼接,最终转成一个字符串。
4、如果字符串用于其它运算(非加法)的话,返回NaN(not a number)。
代码:
<script type="text/javascript">
//1、基本的算术运算和java一样。
var a = 6;
var b = 20;
var c = a+b;
//alert(c);
//2、整数除不尽,会自动转成小数,反正在js中都是number。
var d = b/a;
//alert(d);
//3、字符串在加上一个整数的时候会进行拼接,最终转成一个字符串。
var e = "abc";
var f = e + a + b;
//alert(f);
//4、如果字符串用于其它运算(非加法)的话,返回NaN(not a number)。
var g = e - a;
alert(g);
</script>
*************************************************************************************************
3.2.2 赋值运算符
java赋值运算符号: = ,+= -= *= /= %=
js 赋值运算符:= ,+= -= *= /= %=
举例:
a += b ; 等价于 a = a+b;
a -= b ; 等价于 a = a-b;
a *= b ; 等价于 a = a*b;
a /= b ; 等价于 a = a/b;
a %= b ; 等价于 a = a%b;
整数除不尽,会自动转成小数,反正在js中都是number。
如果保留N位小数
语法:
变量名.toFixed(N)
代码:
<script type="text/javascript">
//整数除不尽,会自动转成小数,反正在js中都是number。
var a = 20;
var b = 6;
a/=b;//a = a/b;
//如果保留N位小数
a=a.toFixed(2);
alert(a);
</script>
*************************************************************************************************
3.2.3 关系运算符
比较运算符它的基本操作过程是,首先对它的操作数进行比较,然后再返回一个true或False值。
js有8个比较运算符:
<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)。
注意:
1、== 只判断里面的值是否相同
2、=== (表示全等:要求数值相同的同时,类型也要相同)
代码:
<script type="text/javascript">
//1、== 只判断里面的值是否相同
var a = "100";
var b = 100;
//alert(a==b);
//2、=== (表示全等:要求数值相同的同时,类型也要相同)
alert(a===b);
</script>
*************************************************************************************************
3.2.4 逻辑运算符
&&(与)、 ||(或)、 !(非)
与Java一样,会出现逻辑短路(当左边的表达配合逻辑运算符已经能够确定出来结果,右边的表达式为了节省效率就不执行了)
注意:
返回结果与java(要求两边是逻辑值)有不同。
&& :当左边真,返回右侧表达式的值。
当左边假,返回左侧表达式的值,右侧不执行 (短路)
|| :当左边真,返回表达式左边的值,右侧不执行 (短路)
当左边假,返回表达式右侧的值。
切记:
在js中非0非空非错就是真, 0、null、""、''、undefined NaN 都是假
所以js逻辑运算符不再返回true false这样的布尔值,而是具体值
代码:
<script type="text/javascript">
//&& 当左边真,返回右侧表达式的值。
//alert(true&&100);
//&&当左边假,返回左侧表达式的值,右侧不执行 (短路)
//alert(false&&true);
//alert(0&&true);
var a = 10;
alert(null&&++a);//逻辑短路,前面的值能够确定与运算的结果,右边就不运算了
alert(a);
</script>
*************************************************************************************************
3.2.5 位运算符
JavaScript中的位运算符:
- & 与:二进制比较,两个都是1返回1,否则是0;
- | 或:二进制比较:一个是1返回1,否则是0;
- ^ 异或:两个都相同返回0,否则1;
- ~ 取反: 1取0,0取1;
- >> 右移:高位补符号位" 这里右移一位表示除2
- << 左移:左移一位表示乘2,二位就表示4,就是2的n次方
- >>> 无符号右移,高位补0"; 与>>类似
注:用的不多,通常都是有java处理完然后返回给页面
1、如下:
a=5;
b=4;
计算a | b
把a,b转换成二进制
a 0101
b 0100
----------
0101 = 5
代码:
<script type="text/javascript">
//计算a | b
var a = 5;
var b = 4;
//位或运算
var c = a|b;// 101
// 100
// 101
alert(c);
</script>
2、面试题:最高效率的计算 2*2*2*2
代码:
<script type="text/javascript">
//2、面试题:最高效率的计算 2*2*2*2
alert(2<<3);
</script>
*************************************************************************************************
3.2.6 三元运算符
JavaScript中的三元运算符:表达式1 ? 表达式2 : 表达式3;
如果表达式1是真,返回表达式2的结果。
如果表达式1是假:返回表达式3的结果。
表达式1的结果可以不是布尔型,0、null、""、''、undefined NaN 都是假
需求:求ab中最大的数
代码:
<script type="text/javascript">
//需求:求ab中最大的数
var a = 10;
var b = 20;
var c = a>b?a:b;
//alert(c);
var d = a?a:b;
alert(d);
</script>
注意:表达式1的结果可以不是布尔型
*************************************************************************************************
3.3 条件分支语句
3.3.1 if和else
if(判断条件){条件成立的时候执行的代码}
if(判断条件){条件成立的时候执行的代码}else{执行的代码}
if(判断条件){条件成立的时候执行的代码}else if{执行的代码} ......
if中的条件可以不是布尔类型, 0、null、""、''、undefined NaN 都是假。
需求: 判断一个数,是奇数还是偶数。
代码:
<script type="text/javascript">
//需求: 判断一个数,是奇数还是偶数。
var a = 10
if(a%2)
{
alert('奇数');
}
else
{
alert('偶数');
}
</script>
*************************************************************************************************
3.3.2 switch和case
js中的switch
switch(表达式){
case 常量:
语句;
break;
case 常量:
语句;
break;
case 常量:
语句;
break;
default:
语句;
}
提示:可以先对分数进行取整parseInt,然后在作为switch判断的条件
代码:
<script type="text/javascript">
//划分学生成绩
var score = 45;
//取整后的成绩
var scoreInt = parseInt(score / 10);
//alert(scoreInt);
switch (scoreInt) {
case 10:
case 9:
alert("a");
break;
case 8:
alert("b");
break;
case 7:
alert("c");
break;
case 6:
alert("d");
break;
default:
alert("e");
break;
}
</script>
*************************************************************************************************
3.4 循环语句
3.4.1 while
while(循环条件){
循环体;
}
需求: 计算1~10的和
代码:
<script type="text/javascript">
//需求: 计算1~10的和
var sum = 0;
var num = 1;
while(true)
{
sum = sum + num;
num++;
if(num>10)
{
break;
}
}
alert(sum);
</script>
*************************************************************************************************
3.4.2 do while
循环体会首先执行一次,然后再判断。
do{
循环体
}while(循环条件)
需求: 计算1~10的和
代码:
<script type="text/javascript">
//需求: 计算1~10的和
var sum = 0;
var num = 1;
do
{
sum = sum +num;
num++;
}while(num<=10);
alert(sum);
</script>
*************************************************************************************************
3.4.3 for
for(表达式1;表达式2;表达式3){
循环体;
}
表达式1:循环变量的初始---可以省略;
表达式2:循环条件---一定不能省略,否则.....
表达式3:循环变量的迭代;
while do while for 循环条件可以不是布尔类型。
0 null undefined......表示 false
其他表示true
需求: 统计1~100 之间 5,6的公倍数 (同时可以被5整除并且可以被6整除)
代码:
<script type="text/javascript">
//需求: 统计1~100 之间 5,6的公倍数 (同时可以被5整除并且可以被6整除)
for ( var i = 1; i <= 100; i++) {
if(i%5==0&&i%6==0)
{
//alert(i);
//使用浏览器控制台打印数据
console.log(i);
}
}
</script>
按f12 调出浏览器控制台
console.log(int); //在浏览器控制台进行打印
*************************************************************************************************
3.4.4 break continue
break; 表示结束该循环。
continue; 表示结束本次循环,继续循环下一次。
需求: 浏览器控制台打印1~10 ,遇到5时不打印
代码:
<script type="text/javascript">
//需求: 浏览器控制台打印1~10 ,遇到5时不打印
for ( var i = 1; i <=10; i++) {
if(5==i)
{
continue;
}
console.log(i);
}
</script>
*************************************************************************************************
3.4.5 循环嵌套
for(){ --A
for() B
}
一个循环内的循环体可以包含其他循环;
循环的执行顺序:
先外层循环执行一次。内层循环(整体循环一次)。 在外层在执行一次在执行内层循环。
需求: 嵌套循环:99乘法表
代码:
<script type="text/javascript">
//需求: 嵌套循环:99乘法表
for ( var i = 1; i < 10; i++) {
//利用字符串达到换行的效果
var s = "";
for ( var j = 1; j <= i; j++) {
s = s + " "+ (j+"*"+i+"="+i*j);
}
console.log(s);
}
</script>
需求:在页面上显示出来 99乘法表
document.write("字符串"); //在页面上显示指定字符串
代码:
<script type="text/javascript">
//需求:在页面上显示出来 99乘法表
for ( var i = 1; i < 10; i++) {
for ( var j = 1; j <= i; j++) {
//页面上打印
document.writeln(j + "*" + i + "=" + i * j);
document.writeln(" ");
}
//页面上打印换行标签---页面上能够换行
document.writeln("<br/>");
}
</script>
*************************************************************************************************
3.5 数组
回顾java中数组的定义方式:
数据类型[] 变量名 = new 数据类型[长度];
数据类型[] 变量名 = {初始值};
int[] arr = new int[5];
3.5.1 js数组第一种定义方式
var 数组名 = [初始值,初始值,初始值];
在js中中括号表示一个数组。多个初始值之间使用逗号分割。
注意:
1、通过角标可以得到数组中,某个位置的值。
2、通过数组的length属性得到数组的长度。(可以通过该属性遍历数组)
3、数组不固定类型。可以存放任何类型的数据。
4、数组的长度是可变的。
需求:
1、使用[]方式定义数组
2、改变数组中的某个元素
3、遍历该数组,并在页面上显示
代码:
<script type="text/javascript">
//1、使用[]方式定义数组
var arr = [10,20.5,"abc"];
//2、改变数组中的某个元素
arr[1] = "maoyun";
//3、遍历该数组,并在页面上显示
for ( var i = 0; i < arr.length; i++) {
document.write(arr[i]+" ");
}
</script>
*************************************************************************************************
3.5.2 js数组第二种定义方式
var 数组名 = new Array(长度);
var 数组名 = new Array(初始值);
Array 表示的是一个数组对象。
注意:
1、如果Array(),不接受参数,表示定义一个长度为0的数组。
2、如果Array只接受一个参数,并且这个参数是整数,那么表示定义一个长度为这个参数的数组。
3、如果只接受一个参数,并且是数值类型的非整数,此时报错。
4、如果接受一个参数,并且这个参数是非数值类型的,那么这个参数是数组的初始值。
5、如果接受多个参数,那么这些参数就是数组的初始值。
代码:
<script type="text/javascript">
//var 数组名 = new Array(长度);
//var arr = new Array(5);
//var 数组名 = new Array(初始值);
//var arr2 = new Array("abc");
//var arr3 = new Array(5,6);
var arr = new Array(10,20.5,"abc");
for ( var i = 0; i < arr.length; i++) {
document.write(arr[i]+" ");
}
</script>
*************************************************************************************************
3.5.3 数组中的函数介绍
需求: 定义一个数组,演示 数组名.join("连接符") 这个方法,并显示在页面上
代码:
<script type="text/javascript">
//需求: 定义一个数组,演示 数组名.join("连接符") 这个方法,并显示在页面上
var arr = new Array(10,50.5,"abc");
//通过"<br/>"将数组中的元素都连接起来并返回給一个字符串
var s = arr.join("<br/>");
document.write(s);
</script>
*************************************************************************************************
4. JavaScript 函数
回顾Java中函数的定义:
修饰符 返回类型 方法名(数据类型 变量名, 多个){
方法体;
}
4.1 定义方式
4.1.1 JS函数的第一种定义方式
function 函数名(参数列表){
函数体;
}
函数的细节:
1、函数必须在调用之后才会执行,参数列表不需要类型。
2、如果函数有返回值,在函数体中直接使用return 返回的数据 即可,JS中的函数没有返回值类型这个限制。
3、如果函数要接收参数,这时直接写变量名,不能有var关键字。
4、在JS中函数没有重载的概念,如果在js中出现了多个同名的函数后面会把前面的函数覆盖掉,即使参数不一样。
5、在JS中如果函数需要接受参数,但是没有传递,这时变量全部是undefined
6、JS中函数不管接不接收参数,我们调用的时候,都可以给其传递参数。
7、在JS中的函数中有一个内置的数组(arguments)参数接收传递的所有数据,使用arguments,这个参数其实它本身是一个数组对象。
注意:后期如果使用JS中的函数,需要接受参数,就在函数上定义变量,如果不需要就不定义,很少使用arguments数组操作。
需求:
1、求两个数的和
2、求三个数的和,使用(arguments)参数,注意同名函数会被覆盖。
代码:
<script type="text/javascript">
//1、求两个数的和
function sum(a,b)
{
return a+b;
}
//alert(sum(3,5));
//2、求三个数的和,使用(arguments)参数,注意同名函数会被覆盖。
function sum1()
{
var total = 0;
//(arguments)参数接收传递的所有数据 是一个数组
for ( var i = 0; i < arguments.length; i++) {
total = total +arguments[i];
}
return total;
}
alert(sum1(5,6,7));
</script>
*************************************************************************************************
4.1.2 JS函数的第二种定义方式(了解)
写法:var 函数名 = new Function("参数列表","函数体");
第一个参数代表 参数列表
第二个参数代表 函数体。
参数列表和函数体都是字符串的方式去定义的。
<script type="text/javascript">
//函数列表和参数体都是字符串的方式去定义的。
var sum = new Function("a,b","return a+b;");
document.write(sum(3,5));
</script>
书写函数过于复杂,可读性不高,所以开发很少使用。
*************************************************************************************************
4.1.3 JS函数的第三种定义方式
写法:var 函数名 = function(参数列表){
函数体;
};
需求: 求两个数的和
代码:
<script type="text/javascript">
//写法:var 函数名 = function(参数列表){函数体}
//需求: 求两个数的和
var sum = function(a,b)
{
return a+b;
};
alert(sum(7,8));
</script>
*************************************************************************************************
4.2 调用方式
4.2.1 普通调用
通过直接书写函数名称,传递相应参数进行调用。
4.2.2 超链接调用函数
语法:
<a href="javascript:函数名称;">链接文字</a>
需求:使用超链接调用函数,求两个数的和
<head>中的代码
<script type="text/javascript">
function sum(a,b)
{
alert(a+b);
}
</script>
body中的代码:
<!-- <a href="javascript:函数名称;">链接文字</a> -->
<a href="javascript:sum(3,5);">计算3+5</a>
*************************************************************************************************
4.2.3 事件属性调用函数
所有可见的HTML标签都会相应的事件属性,比如鼠标单击事件,双击事件,聚焦,失焦事件......等。
事件属性名字都是以on开头,
HTML 4.0 事件
事件 | 当...时发生 |
onabort | 用户终止页面加载。 |
onblur | 用户离开对象。(失去焦点) |
onchange | 用户改变对象的值。 |
onclick | 用户点击对象。 |
ondblclick | 用户双击对象。 |
onfocus | 用户激活对象。(获得焦点) |
onkeydown | 按下键盘。 |
onkeypress | 按压键盘。 |
onkeyup | 松开键盘。 |
onload | 页面完成加载。 注释:在 Netscape 中,当页面加载时会发生该事件。 |
onmousedown | 用户按鼠标按钮。 |
onmousemove | 鼠标指针在对象上移动。 |
onmouseover | 鼠标指针移动到对象上。 |
onmouseout | 鼠标指针移出对象。 |
onmouseup | 用户释放鼠标按钮。 |
onreset | 用户重置表单。 |
onselect | 用户选取页面上的内容。 |
onsubmit | 用户提交表单。 |
onunload | 用户关闭页面。 |
语法:
<标签名 事件属性名="函数名(参数);" />
需求:分别使用超链接和按钮的onclick事件调用求两个数之和的函数。
head中代码:
<script type="text/javascript">
function sum(a, b) {
alert(a + b);
}
</script>
body中的代码:
<!-- 需求:分别使用超链接和按钮的onclick事件调用求两个数之和的函数。 -->
<input onclick="sum(3,5);" type="button" value="计算3+5" />
<a href="#" onclick="sum(3,5);">计算3+5</a>
*************************************************************************************************
4.3 全局函数
常用的全局函数:
Number()、parseInt()、parseFloat()
将数字字符串转换为数字
如果转换失败,则返回"NaN"
代码:
//将数字字符串转换为数字
var a = "100";
var b = Number(a);
alert(b+1);
isNaN()
判断是否 不是数字
不是数字:永远不能成为数字。
判断是否不是数字(此方**将可能成为数字的字符串也算数字)
代码:
//判断是否 不是数字
//判断是否不是数字(此方**将可能成为数字的字符串也算数字)
alert(isNaN("90"));
alert(isNaN("abc"));
eval(字符串)
把字符串当作JavaScript代码来执行,并返回结果
eval("alert(2+3);")
代码:
//eval(字符串)
//把字符串当作JavaScript代码来执行,并返回结果
eval("alert(2+3);");
*************************************************************************************************
5. JavaScript 基于对象编程
5.1 全局对象
5.1.1 String 对象
String 对象
String 对象用于处理文本(字符串)。
创建 String 对象的语法:
new String(s);
String(s);
参数
参数 s 是要存储在 String 对象中或转换成原始字符串的值。
String 对象常用属性
String 对象常用方法
方法 | 描述 |
charAt() | 返回在指定位置的字符。 |
concat() | 连接字符串。 |
fontcolor() | 使用指定的颜色来显示字符串。 |
fontsize() | 使用指定的尺寸来显示字符串。 |
indexOf() | 检索字符串。 |
lastIndexOf() | 从后向前搜索字符串。 |
localeCompare() | 用本地特定的顺序来比较两个字符串。 |
match() | 找到一个或多个正则表达式的匹配。 |
replace() | 替换与正则表达式匹配的子串。 |
search() | 检索与正则表达式相匹配的值。 |
split() | 把字符串分割为字符串数组。 |
substring() | 提取字符串中两个指定的索引号之间的字符。 |
toLowerCase() | 把字符串转换为小写。 |
toUpperCase() | 把字符串转换为大写。 |
toString() | 返回字符串。 |
valueOf() | 返回某个字符串对象的原始值。 |
需求: 通过js代码String 对象的常用方法让字符串(abc)分别,变红、变大、变大又变红。
代码:
<script type="text/javascript">
var s = "abc";
//alert(s.length);//得出字符串的长度
//需求: 通过js代码String 对象的常用方法让字符串(abc)分别,变红、变大、变大又变红。
document.write(s.fontcolor("red")); //变红
document.write(s.fontsize(7));//变大
document.write(s.fontsize(7).fontcolor("red"));//变大又变红
</script>
*************************************************************************************************
5.1.2 Date对象
Date 对象
Date 对象用于处理日期和时间。
创建 Date 对象的语法:
var myDate=new Date()
注释:Date 对象会自动把当前日期和时间保存为其初始值。
Date 对象常用方法
方法 | 描述 |
Date() | 返回当日的日期和时间。 |
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
parse() | 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。 |
setDate() | 设置 Date 对象中月的某一天 (1 ~ 31)。 |
setMonth() | 设置 Date 对象中月份 (0 ~ 11)。 |
setFullYear() | 设置 Date 对象中的年份(四位数字)。 |
setHours() | 设置 Date 对象中的小时 (0 ~ 23)。 |
setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59)。 |
setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59)。 |
setMilliseconds() | 设置 Date 对象中的毫秒 (0 ~ 999)。 |
setTime() | 以毫秒设置 Date 对象。 |
toString() | 把 Date 对象转换为字符串。 |
toTimeString() | 把 Date 对象的时间部分转换为字符串。 |
toDateString() | 把 Date 对象的日期部分转换为字符串。 |
toLocaleString() | 根据本地时间格式,把 Date 对象转换为字符串。 |
toLocaleTimeString() | 根据本地时间格式,把 Date 对象的时间部分转换为字符串。 |
toLocaleDateString() | 根据本地时间格式,把 Date 对象的日期部分转换为字符串。 |
valueOf() | 返回 Date 对象的原始值。 |
需求:
1、定义日期对象,返回的是当前日期(国际格式)
2、根据本地时间格式,把 Date 对象转换为字符串
3、根据本地时间格式,把 Date 对象的时间部分转换为字符串
4、根据本地时间格式,把 Date 对象的日期部分转换为字符串
代码:
<script type="text/javascript">
//1、定义日期对象,返回的是当前日期(国际格式)
var myDate = new Date();
document.write(myDate);
document.write("<br/>");
//2、根据本地时间格式,把 Date 对象转换为字符串
document.write(myDate.toLocaleString());
document.write("<br/>");
//3、根据本地时间格式,把 Date 对象的时间部分转换为字符串
document.write(myDate.toLocaleTimeString());
document.write("<br/>");
//4、根据本地时间格式,把 Date 对象的日期部分转换为字符串
document.write(myDate.toLocaleDateString());
document.write("<br/>");
</script>
*************************************************************************************************
5.1.3 Math对象
Math 对象
Math 对象用于执行数学任务。
使用 Math 的属性和方法的语法:
var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);
注意:Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。你无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。
Math 对象属性
属性 | 描述 |
E | 返回算术常量 e,即自然对数的底数(约等于2.718)。 |
LN2 | 返回 2 的自然对数(约等于0.693)。 |
LN10 | 返回 10 的自然对数(约等于2.302)。 |
LOG2E | 返回以 2 为底的 e 的对数(约等于 1.414)。 |
LOG10E | 返回以 10 为底的 e 的对数(约等于0.434)。 |
PI | 返回圆周率(约等于3.14159)。 |
SQRT1_2 | 返回返回 2 的平方根的倒数(约等于 0.707)。 |
SQRT2 | 返回 2 的平方根(约等于 1.414)。 |
Math 对象方法
方法 | 描述 |
abs(x) | 返回数的绝对值。 |
acos(x) | 返回数的反余弦值。 |
asin(x) | 返回数的反正弦值。 |
atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。 |
ceil(x) | 对数进行上舍入。 |
cos(x) | 返回数的余弦。 |
exp(x) | 返回 e 的指数。 |
floor(x) | 对数进行下舍入。 |
log(x) | 返回数的自然对数(底为e)。 |
max(x,y) | 返回 x 和 y 中的最高值。 |
min(x,y) | 返回 x 和 y 中的最低值。 |
pow(x,y) | 返回 x 的 y 次幂。 |
random() | 返回 0 ~ 1 之间的随机数。 |
round(x) | 把数四舍五入为最接近的整数。 |
sin(x) | 返回数的正弦。 |
sqrt(x) | 返回数的平方根。 |
tan(x) | 返回角的正切。 |
toSource() | 返回该对象的源代码。 |
valueOf() | 返回 Math 对象的原始值。 |
Math对象及方法和Java中的基本一致
需求:输出2到7之间的随机数(包括2和7)
代码:
<script type="text/javascript">
//需求:输出2到7之间的随机数(包括2和7)
for ( var i = 0; i < 100; i++) {
var num = Math.random();
document.write(parseInt(num*(7-2+1))+2);
}
</script>
*************************************************************************************************
5.1.4 RegExp 对象
RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具。
正则表达式的书写规则和Java也一致
. 当前可以是任意字符
? 表示零次或一次
* 表示零次或多次
+ 表示一次或多次
() 对某个存在的正则进行分组 组的使用 \组号 $组号
{} 当前的规则可以出现的次数
{m} 正好 m次 {m,} 最少m次 {m,n} 最少m次 最多n
[] 当前位置上可以是中括号中某个字符
[abc] [^abc]
\\d 当前位置上可以数字
\\w 当前位置上可以是字母 数字 下划线
\b 单词边界
^ 行开始
$ 行结尾
需求: 验证表单中文本框里面用户输入的手机号码是否正确
常用的手机的正则表达式:^1[34578]\\d{9}$
head中的代码:
<script type="text/javascript">
//需求: 验证表单中文本框里面用户输入的手机号码是否正确
function checkTel() {
//获得文本框中的值
var tel = document.getElementById("tel");//根据id获得页面上文本框对象
var vTel = tel.value;//获得文本框中的值
//alert(vTel);
//验证手机号码格式
var reg = new RegExp("^1[34578]\\d{9}$");
if (reg.test(vTel)) {
alert("格式正确");
} else {
alert("格式不正确");
}
}
</script>
body中的代码:
<form action="">
<input id="tel" type="text" /> <input onclick="checkTel();"
type="button" value="验证手机号码格式" />
</form>
*************************************************************************************************
5.2 自定义类和对象(了解)
5.2.1 通过函数方式创建类
在JavaScript中, 当你定义了一个新的函数, 你实际上声明了一个新的类, 而这个函数本身就相当于类的构造函数。
任何创建js函数的方式其实都是在创建自定义类。
简单的类:
只有属性,外部赋值
<script type="text/javascript">
//简单的类,建议使用第三种函数定义方式来定义它,来区别函数的定义
var Person=function()
{
var username;
var age;
}
var p = new Person();
p.username = "haha";
alert(p.username);
</script>
复杂的类:
带构造参数,带方法的类
<script type="text/javascript">
//带构造参数,带方法的类
var Person=function(username,age)
{
//属性定义可以省略不写
var username;
var age;
//因为该类本身就是构造函数,所以直接再这里将参数的值放入"成员变量"中。
this.username = username;
this.age = age;
//函数定义格式,this.方法名=function(){}
this.setUsername=function(username)
{
this.username = username;
}
this.getUsername=function()
{
return this.username;
}
}
var p1 = new Person("大乔",20);
alert(p1.getUsername());
var p2 = new Person();
p2.setUsername("小乔");
alert(p2.getUsername());
</script>
*************************************************************************************************
5.2.2 直接定义初始完毕的对象
格式:
在js中,{}表示一个对象。
var对象名={
属性名1:属性值,属性名2:属性值,......
函数名1:function(形参......){函数体1},
函数名2:function(形参......){函数体2},......
}
属性的写法:
属性:值
多个属性需要使用逗号分开,
对象中的函数的定义方式:函数名:function(){函数体}
多个函数需要使用逗号分割,
并且函数和属性也需要使用逗号分开。
最后一个函数或者属性,不需要书写逗号
注意:对象在使用的时候,不需要new,直接赋值给其他变量,或者直接使用
<script type="text/javascript">
//定义对象
var person = {
username:"张三丰",
age:100,
fight:function(){
alert(this.username+"用太极拳打你");
}
};
//不要new对象,直接调用属性和方法
person.username="张三丰二代";
person.fight();
</script>
*************************************************************************************************
5.2.3 直接定义未初始化的对象
var对象名=new Object();
对象名.属性名1=属性值1;
对象名.函数名1=function(形参......){函数体1};
<script type="text/javascript">
//定义对象
var person = new Object();
person.username = "张三丰";
person.age = 100;
person.fight=function(){
alert(this.age+"岁的"+this.username+"用太极拳打你");
}
//不要new对象,直接调用属性和方法
person.username="张三丰二代";
person.fight();
</script>
*************************************************************************************************
5.2.4 原型模式扩展方法
可以为全局对象 添加新的方法。
对象.prototype.方法名=function(参数){
语句;
}
prototype属性:返回对象类型原型的引用。
给String全局对象添加新的方法:
<script type="text/javascript">
//给所有String添加了一个名为mao的方法
String.prototype.mao=function()
{
alert(this+"mao");
}
var a = "abc";
a.mao();
</script>
常用的String自定义扩展方法:
<script type="text/javascript">
//返回字符的长度,一个中文算2个
String.prototype.ChineseLength = function() {
return this.replace(/[^x00-xff]/g, "**").length;
}
// 判断字符串是否以指定的字符串结束
String.prototype.EndsWith = function(str) {
return this.substr(this.length - str.length) == str;
}
// 去掉字符左端的的空白字符
String.prototype.LeftTrim = function() {
return this.replace(/(^[s]*)/g, "");
}
// 去掉字符右端的空白字符
String.prototype.RightTrim = function() {
return this.replace(/([s]*$)/g, "");
}
// 判断字符串是否以指定的字符串开始
String.prototype.StartsWith = function(str) {
return this.substr(0, str.length) == str;
}
// 去掉字符两端的空白字符
String.prototype.Trim = function() {
return this.replace(/(^s*)|(s*$)/g, "");
}
</script>
*************************************************************************************************
6. BOM对象编程
BOM : browser object model 浏览器对象模型
js为了js可以和浏览器进行一定的交互的能力,而去设计一个bom的模型,就是一些对象。
BOM对象都是关于浏览器的本身,而非浏览器里面页面上的元素内容。
利用BOM对象,我们可以使用js去操作浏览器的某些功能。
6.1 Window对象
6.1.1 Window对象介绍
所有浏览器都支持 window 对象。它表示浏览器窗口。
window是js中的顶层对象。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:
window.document.write("HelloWorld");
注意:window 对象使用的时候可以省略不写。与此相同:
document.write("HelloWorld");
Window 对象方法
方法 | 描述 |
alert() | 显示带有一段消息和一个确认按钮的警告框。 |
blur() | 把键盘焦点从顶层窗口移开。 |
clearInterval() | 取消由 setInterval() 设置的 timeout。 |
clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
close() | 关闭浏览器窗口。 |
confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
createPopup() | 创建一个 pop-up 窗口。 |
focus() | 把键盘焦点给予一个窗口。 |
moveBy() | 可相对窗口的当前坐标把它移动指定的像素。 |
moveTo() | 把窗口的左上角移动到一个指定的坐标。 |
open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
print() | 打印当前窗口的内容。 |
prompt() | 显示可提示用户输入的对话框。 |
resizeBy() | 按照指定的像素调整窗口的大小。 |
resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
scrollBy() | 按照指定的像素值来滚动内容。 |
scrollTo() | 把内容滚动到指定的坐标。 |
setInterval() | 按照指定的周期(以毫秒计)来调用函数或计算表达式。 |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
*************************************************************************************************
6.1.2 打开关闭窗口
close() | 关闭浏览器窗口。 |
open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
head中的代码:
<script type="text/javascript">
//关闭窗口
function closeWindow()
{
window.close();
}
//打开窗口
function openWindow()
{
window.open("6.1.2.打开关闭窗口.html");
}
</script>
body中的代码:
<input type="button" value="关闭窗口" onclick="closeWindow();" />
<input type="button" value="打开窗口" onclick="openWindow();" />
注意:不是window.open所打开的窗口,不能关闭
*************************************************************************************************
6.1.3 对话框
alert() | 显示带有一段消息和一个确认按钮的警告框。 |
confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
prompt() | 显示可提示用户输入的对话框。 |
head中代码:
<script type="text/javascript">
function myConfirm()
{
//显示带有一段消息以及确认按钮和取消按钮的对话框。返回布尔值表示用户的选择
var b = window.confirm("确定要删除吗?");
alert(b);
}
function myPrompt()
{
//显示可提示用户输入的对话框。(标题,默认文字),返回用户输入的内容
var s = window.prompt("请输入内容","我很温柔");
alert(s);
}
</script>
body中的代码:
<input type="button" onclick="window.alert('你好');" value="警告框" />
<input type="button" onclick="myConfirm();" value="确认框" />
<input type="button" onclick="myPrompt();" value="对话框" />
*************************************************************************************************
6.1.4 计时器
通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
clearInterval() | 取消由 setInterval() 设置的 timeout。 |
clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
setInterval() | 按照指定的周期(以毫秒计)来调用函数或计算表达式。 |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码。
需求: 在页面上显示当前时间,并由 开始、停止 按钮来控制时间的显示。
head中的代码:
<script type="text/javascript">
//需求: 在页面上显示当前时间,并由 开始、停止 按钮来控制时间的显示。
//页面加载后执行
window.onload = function(){
show();
}
//显示时间
function show()
{
//根据id获得div对象
var divTime = document.getElementById("divTime");
//修改div里面的内容为当前时间
divTime.innerHTML = new Date();
}
var timeFun;
//开始显示时间
function start()
{
//反复调用函数show,间隔时间1000毫秒
timeFun = window.setInterval(show,1000);
}
//停止显示时间
function stop()
{
//停止反复调用,参数为反复调用函数的引用(返回值)
window.clearInterval(timeFun);
}
</script>
body中的代码:
当前时间:<div id="divTime"></div>
<input type="button" value="开始" onclick="start();"/>
<input type="button" value="停止" onclick="stop();" />
*************************************************************************************************
6.2 History对象
History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
History 对象属性
属性 | 描述 |
length | 返回浏览器历史列表中的 URL 数量。 |
History 对象方法
方法 | 描述 |
back() | 加载 history 列表中的前一个 URL。 |
forward() | 加载 history 列表中的下一个 URL。 |
go() | 加载 history 列表中的某个具体页面。 |
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
下面一行代码执行的操作与单击两次后退按钮执行的操作一样:
history.go(-2) - go里面参数为负数,表示后退几次,正数表示前进几次
1.html:
<body>
<input type="button" value="前进" onclick="history.forward();"/>
<input type="button" value="后退" onclick="history.back();" />
<a href="2.html">2.html</a>
</body>
2.html:
<body>
<input type="button" value="前进" onclick="history.forward();"/>
<input type="button" value="后退" onclick="history.back();" />
</body>
*************************************************************************************************
6.3 Location对象
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 (80 或 443)
- location.protocol 返回所使用的 web 协议(http:// 或 https://)
<script type="text/javascript">
function _go(){
//跳转到该页面
location.href='a.html';
//location='a.html'; //简写
}
</script>
<body>
<input type="button" value="转到其它页面" onclick="_go();" />
</body>
*************************************************************************************************
7. DOM对象编程
DOM对象:Document Object Model 文档对象模型
HTML DOM 树
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
7.1 document对象
Document 对象常用方法
方法 | 描述 |
getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
getElementsByName() | 返回带有指定名称的对象集合。 |
getElementsByTagName() | 返回带有指定标签名的对象集合。 |
write() | 向文档写 HTML 表达式 或 JavaScript 代码。 |
writeln() | 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。 |
需求:
1、根据id查找指定id的div元素,并显示div里面的内容。
2、根据标签名查找所有div元素,并显示div里面的内容。
3、根据name查找文本框元素,并显示文本框里面的值。
head中的代码:
<script type="text/javascript">
//点击按钮开始执行
var myClick = function() {
//1、根据id查找指定id的div元素,并显示div里面的内容。
//获得div的dom对象
var div1 = document.getElementById("div1");
//innerHTML表示元素里面的内容
//alert(div1.innerHTML);
//2、根据标签名查找所有div元素,并显示div里面的内容。
var divs = document.getElementsByTagName("div");
//遍历div集合
for ( var i = 0; i < divs.length; i++) {
//alert(divs[i].innerHTML);
}
//3、根据name查找文本框元素,并显示文本框里面的值。
var txts = document.getElementsByName("username");
//从name查找返回的集合中打印出第一个文本框元素的值
alert(txts[0].value);
}
</script>
body中的代码:
<div id="div1">你好啊111</div>
<div id="div2">你好啊222</div>
<input name="username" type="text" value="" />
<input type="button" value="点我" onclick="myClick();" />
注意:
显示或设置div、span等元素的里面的内容通常是innerHTML
显示或设置表单元素中的值是value
*************************************************************************************************
7.2 Element对象
7.2.1 Element对象介绍
在 HTML DOM (文档对象模型)中,每个部分都是节点:
- 文档本身是文档节点
- 所有 HTML 元素是元素节点
- 所有 HTML 属性是属性节点
- HTML 元素内的文本是文本节点
- 注释是注释节点
在 HTML DOM 中,Element对象表示 HTML 元素。
Element对象 是一个抽象的概念,代码中并不存在element这个对象,只有具体html页面上某个元素的对象。
常用属性和方法:
下面的属性和方法可用于所有 HTML 元素上:
属性 / 方法 | 描述 |
element.appendChild() | 向元素添加新的子节点,作为最后一个子节点。 |
element.childNodes | 返回元素子节点的 NodeList。 |
element.className | 设置或返回元素的 class 属性。 |
element.cloneNode() | 克隆元素。 |
element.firstChild | 返回元素的首个子元素。 |
element.getAttribute() | 返回元素节点的指定属性值。 |
element.getElementsByTagName() | 返回拥有指定标签名的所有子元素的集合。 |
element.hasChildNodes() | 如果元素拥有子节点,则返回 true,否则 false。 |
element.id | 设置或返回元素的 id。 |
element.innerHTML | 设置或返回元素的内容。 |
element.insertBefore() | 在指定的已有的子节点之前插入新节点。 |
element.lastChild | 返回元素的最后一个子元素。 |
element.nodeName | 返回元素的名称。 |
element.nodeType | 返回元素的节点类型。 |
element.parentNode | 返回元素的父节点。 |
element.previousSibling | 返回位于相同节点树层级的前一个元素。 |
element.removeAttribute() | 从元素中移除指定属性。 |
element.removeAttributeNode() | 移除指定的属性节点,并返回被移除的节点。 |
element.removeChild() | 从元素中移除子节点。 |
element.replaceChild() | 替换元素中的子节点。 |
element.setAttribute() | 把指定属性设置或更改为指定值。 |
element.style | 设置或返回元素的 style 属性。 |
element.value | 设置或返回元素值。 |
*************************************************************************************************
7.2.2 元素绑定事件
1、通过HTML标签属性绑定事件
语法:
<标签名 事件属性名="函数名(参数);" />
需求:两数求和功能。
head中的代码:
<script type="text/javascript">
//需求:两数求和功能。
function sum(a,b)
{
return a+b;
}
</script>
body中的代码:
<!-- 通过HTML标签属性绑定事件 -->
<input type="button" value="点我" onclick="alert(sum(5,7));"/>
2、通过JS代码绑定事件
语法:
对象.事件名 = function(){}
首先要获取到js中对应的对象,才可以去绑定事件。
需求:两数求和功能。
head中的代码:
<script type="text/javascript">
//页面加载后执行
window.onload = function() {
//获得该元素的dom对象
var btn2 = document.getElementById("btn2");
//给指定元素绑定事件
btn2.onclick = function() {
alert(sum(8, 9));
}
}
</script>
html中的代码:
<!-- 通过JS代码绑定事件 -->
<input id="btn2" type="button" value="点我2" />
*************************************************************************************************
7.2.3 元素取值和赋值
element.innerHTML | 设置或返回元素的内容。(多用于DIV,SPAN等标签) |
element.value | 设置或返回元素值。(多用于表单元素) |
表单验证练习:
常用的正则表达式:
定义一个正则 6-16为英文字母和数字
^[0-9a-zA-Z]{6,16}$
电子邮件常用正则表达式:
^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$
<script type="text/javascript">
//页面加载完成后执行
window.onload = function()
{
//验证成功标识,默认都为false
var usernameOk=false;
var passwordOk=false;
var password2Ok=false;
var emailOk=false;
//获得各个表单元素对象
var username = document.getElementById("username");
var password = document.getElementById("password");
var password2 = document.getElementById("password2");
var email = document.getElementById("email");
//用户名失去焦点时开始认证
username.onblur=function(){
//获得用户名的值
var usernameValue = username.value;
//进行验证
//定义一个正则 4-12为英文字母
var regExp = new RegExp("^[a-zA-Z]{4,12}$");
if(regExp.test(usernameValue))
{
//用户名验证成功
document.getElementById("usernameMsg").innerHTML="<font color='green'>√</font>";
usernameOk = true;
}
else
{
//用户名验证失败
document.getElementById("usernameMsg").innerHTML="<font color='red'>用户名4-12位,只能是字母</font>";
usernameOk = false;
}
};
//密码失去焦点时候认证
password.onblur=function(){
//获得密码的值
var passwordValue = password.value;
//进行验证
//定义一个正则 6-16为英文字母和数字
var regExp = new RegExp("^[0-9a-zA-Z]{6,16}$");
if(regExp.test(passwordValue))
{
//密码验证成功
document.getElementById("passwordMsg").innerHTML="<font color='green'>√</font>";
passwordOk = true;
}
else
{
//密码验证失败
document.getElementById("passwordMsg").innerHTML="<font color='red'>密码6-16位,字母或数字</font>";
passwordOk = false;
}
};
//确认密码失去焦点时候认证
password2.onblur=function()
{
//获得密码的值
var passwordValue = password.value;
//获得确认密码的值
var password2Value = password2.value;
if(passwordValue==password2Value)
{
//确认密码验证成功
document.getElementById("password2Msg").innerHTML="<font color='green'>√</font>";
password2Ok = true;
}
else
{
//确认密码验证失败
document.getElementById("password2Msg").innerHTML="<font color='red'>确认密码要和密码一样</font>";
password2Ok = false;
}
}
//电子邮件失去焦点时开始认证
email.onblur=function(){
//获得电子邮件的值
var emailValue = email.value;
//进行验证
//邮箱验证,网上找到的正则
var regExp = new RegExp("^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$");
if(regExp.test(emailValue))
{
//邮箱验证成功
document.getElementById("emailMsg").innerHTML="<font color='green'>√</font>";
emailOk = true;
}
else
{
//邮箱验证失败
document.getElementById("emailMsg").innerHTML="<font color='red'>标准电子邮件格式(xxx@abc.com)</font>";
emailOk = false;
}
};
//注册按钮点击事件
document.getElementById("btn").onclick=function(){
//判断全部验证是否通过
if(usernameOk&&passwordOk&&password2Ok&&emailOk){
//获得表单对象
var registerForm = document.getElementById("registerForm");
//提交表单
registerForm.submit();
}
}
}
</script>
<body>
<form id="registerForm" action="xxx">
 用户名:<input id="username" type="text"/>
 <span id="usernameMsg">用户名4-12位,只能是字母</span><br />
<br />  密 码:<input id="password" type="password" />
 <span id="passwordMsg">密码6-16位,字母或数字</span><br />
<br /> 确认密码:<input id="password2" type="password" />
 <span id="password2Msg">确认密码要和密码一样</span><br />
<br /> 电子邮件:<input id="email" type="text" /> 
<span id="emailMsg">标准电子邮件格式(xxx@abc.com)</span><br />
<br /> <input id="btn" type="button" value="注册" />
</form>
</body>
*************************************************************************************************
7.2.4 元素属性操作
element.getAttribute() | 返回元素节点的指定属性值。 |
element.setAttribute() | 把指定属性设置或更改为指定值。 |
注意:element.checked = true/false; 专门适用于单复选按钮
全选全不选练习:
<script type="text/javascript">
//页面加载后执行
window.onload = function(){
//全选全不选 单选按钮点击事件
//获得全选全不选按钮
var allAndAllNo = document.getElementById("allAndAllNo");
allAndAllNo.onclick=function(){
//alert(allAndAllNo.checked);//全选全不选单选按钮的值
//获得全部爱好选项
var hobbys = document.getElementsByName("hobby");
for ( var i = 0; i < hobbys.length; i++) {
//让每一个单选按钮变为 全选全不选单选按钮的值
hobbys[i].checked = allAndAllNo.checked;
}
}
//全选按钮点击事件
document.getElementById("checkAll").onclick=function(){
//获得全部爱好选项
var hobbys = document.getElementsByName("hobby");
for ( var i = 0; i < hobbys.length; i++) {
//让每一个单选按钮变为选中
hobbys[i].checked = true;
}
}
//全不选按钮点击事件
document.getElementById("checkAllNo").onclick=function(){
//获得全部爱好选项
var hobbys = document.getElementsByName("hobby");
for ( var i = 0; i < hobbys.length; i++) {
//让每一个单选按钮变为选中
hobbys[i].checked = false;
}
}
//反选
document.getElementById("checkReversal").onclick=function(){
//获得全部爱好选项
var hobbys = document.getElementsByName("hobby");
for ( var i = 0; i < hobbys.length; i++) {
//让每一个单选按钮变为与之前的状态相反
hobbys[i].checked = !hobbys[i].checked;
}
}
}
</script>
<body>
爱好
<br />
<input type="checkbox" id="allAndAllNo" />全选/全不选
<br />
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="游泳" />游泳
<input type="checkbox" name="hobby" value="唱歌" />唱歌
<br>
<input type="button" id="checkAll" value="全选" />
<input type="button" id="checkAllNo" value="全不选" />
<input type="button" id="checkReversal" value="反选" />
</body>
*************************************************************************************************
7.2.5 元素样式操作
element.style | 设置或返回元素的 style 属性。 |
element.className | 设置或返回元素的 class 属性。 |
DIV显示隐藏练习:
<script type="text/javascript">
//页面加载后执行
window.onload = function(){
//获得按钮对象
var btn = document.getElementById("btn");
//给该按钮对象绑定单击事件
btn.onclick=function(){
//获得div对象
var div1 = document.getElementById("div1");
if(btn.value=="隐藏")
{
//设置div的样式为隐藏
div1.style.display="none";
//按钮的value值改为"显示"
btn.value = "显示";
}
else if(btn.value=="显示")
{
//设置div的样式为显示
div1.style.display="";
//按钮的value值改为"隐藏"
btn.value = "隐藏";
}
}
}
</script>
<body>
<input id="btn" type="button" value="隐藏" />
<br /><br />
<div id="div1" style="background-color: red;width: 300px;height: 300px;"></div>
</body>
注意:div1.style.display="none" 或者 ""; 可以控制div是否隐藏、显示。
*************************************************************************************************
7.2.6 元素节点操作
document.createElement() | 创建一个新节点。暂时存放在内存中,不显示在页面上 |
element.appendChild() | 向元素添加新的子节点,作为最后一个子节点。 |
element.removeChild() | 从元素中移除子节点。 |
综合练习中会使用到
*************************************************************************************************
8. JSON格式简介
JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性,更易理解
JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
具体格式:
{
"employees":
[
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]
}
{} 代表一个对象
[] 代表一个数组
对象属性定义使用key:value 格式
*************************************************************************************************
9. 综合练习
9.1 省市二级联动
9.1.1 准备工作
1、编写HTML代码
<body>
<select id="province" name="province" >
<option value="none">--请选择省--</option>
</select>
<select id="city" name="city">
<option value="none">--请选择市--</option>
</select>
</body>
2、载入素材数据cities.js 文件
<!-- 导入cities.js -->
<script type="text/javascript" src='/images/loading.gif' data-original="js/cities.js"></script>
3、测试读取json数据
<script type="text/javascript">
//页面加载后执行
window.onload=function(){
//测试取得cities.js中的json格式的数据
alert(china[0].p_name);
}
</script>
*************************************************************************************************
9.1.2 初始化省的数据
<script type="text/javascript">
//页面加载后执行
window.onload=function(){
//china[0].p_name
//初始化省的数据
//获得省的select对象
var province = document.getElementById("province")
//遍历出省的信息
for ( var i = 0; i < china.length; i++) {
//创建一个option
var option =document.createElement("option"); //<option></option>
//把省的名字,添加到option中
option.innerHTML = china[i].p_name;//<option>辽宁省</option>
//把省的id标识添加到option中
option.value = china[i].p_id;//<option value="ln">辽宁省</option>
//把新创建的option标签,添加到 id=province select中
province.appendChild(option);
}
}
</script>
*************************************************************************************************
9.1.3 当省改变时改变市的数据
<script type="text/javascript">
//页面加载后执行
window.onload=function(){
//china[0].p_name
//初始化省的数据
//获得省的select对象
var province = document.getElementById("province")
//获得市的select对象
var city = document.getElementById("city")
//遍历出省的信息
for ( var i = 0; i < china.length; i++) {
//创建一个option
var option =document.createElement("option"); //<option></option>
//把省的名字,添加到option中
option.innerHTML = china[i].p_name;//<option>辽宁省</option>
//把省的id标识添加到option中
option.value = china[i].p_id;//<option value="ln">辽宁省</option>
//把新创建的option标签,添加到 id=province select中
province.appendChild(option);
}
//当省发生改变时
province.onchange=function(){
//获得省的id
//alert(province.value);
//清空市的数据
city.innerHTML = "<option value='none'>--请选择市--</option>";
//遍历china得到每个省的信息
for ( var i = 0; i < china.length; i++) {
//如果省的id正好等于文件中省的id,那么开始动手
if(province.value==china[i].p_id){
//获得该省下面的市的信息
for ( var j = 0; j < china[i].cities.length; j++) {
//创建一个option
var option =document.createElement("option"); //<option></option>
//把市的名字,添加到option中
option.innerHTML = china[i].cities[j].c_name;
//把市的id标识添加到option中
option.value = china[i].cities[j].c_id;
//把新创建的option标签,添加到 id=city select中
city.appendChild(option);
}
}
}
}
}
</script>
*************************************************************************************************
10. 总结
原标题:Javaweb 第2天 JavaScript课程
关键词:JavaScript