JavaScript（一）-- 基础
2016-03-21 23:30
381 查看
JavaScript一款网路脚本语言，具有很多的用途，用来改进设计网页、验证表单、检测浏览器、创建cookies等。
JavaScript是什么？
1.被用来向HTML页面添加交互行为
2.是一种脚本语言，即轻量级的编程语言
3.通常被嵌入到HTML页面中
4.是一种解释型语言，代码不进行预编译
JavaScript有哪些功能？
1.为HTML页面提供了一种编程工具
2.可以将动态的文本放入的HTML页面中
3.可以对事件做出响应
4.可以读写HTML元素
5.可以被用来验证数据，例如使用正则表达式检测字符串、验证用户提交是否为空字符串
6.可以检测浏览器，并根据检测到的浏览器载入相应的页面
7.创建cookies，存储和取出位于访问者计算机中的信息
JavaScript真正的名称为ECMAScript，JavaScript语句是给浏览器执行的命令，告诉浏览器要执行的操作。
实际上，JavaScript代码段一般放在HTML的body或者head元素中。
区别就是HTML页面被浏览器加载的时候 ，按顺序加载JavaScript代码，加载并不代表执行，JavaScript的函数就是先加载，在事件触发调用时执行。
先加载head中的JavaScript代码，后加载body中的代码
一般对于事件触发的JavaScript响应函数，都写在head中，在Html页面加载时就把这些JavaScript函数加载，在后期body中可调用这些函数。
JavaScript的注释使用”//“对单行注释，使用/*注释段*/对多行进行注释。
可以在声明时或者声明之后对变量赋值，为变量赋值文本值时，要使用"abcd"引起。
注意:
1.可以向未声明的变量赋值，该变量会自动声明
注意：
1.加号+，可以把字符串连接起来
===全等运算符：比较变量的值和类型，两者不但值相等，类型也一样，才返回true
1.警告框
警告框经常用于确保用户得到某些信息，当警告框出现后，用户需要点击确定按钮才能继续操作
语法：使用alert(警告内容)语句，警告内容如果是字符串，需用使用"内容"引起，警告内容为数值时，可以直接填写。
使用户验证确认或者得到某些信息。根据用户的选择，返回true或fasle
语法：confirm(确认内容)
用于向用户提示，输入某个值，点击确认或取消按钮才能继续操作。
语法：prompt("提示语","默认值")
可以指定默认值，也可以不指定，指定时对话框中显示默认值。
第一个参数为提示语，用于提示用户的话语输出。
如果用户点击取消，返回null；
如果用户点击确定，返回为用户输入的值，如果用户输入为空，那么返回为空字符串，而不是null。
函数的定义：
function fun_name(x1, x2, x3){
Js代码...
}
注意，参数无需使用var声明，也不能使用var声明，否则出错
定义好函数后，在事件页面事件触发时指定响应函数onclick="fun_name()";
可以定义多个参数的函数，也可以定义无参函数，还可以使用return语句指定函数返回值。
1.传参调用函数
使用方法：
var arr=new Array();
for(var x in arr){
arr[x];
}
注意x为数组的下标值，而不是数组的元素
HTML页面中的每一个元素都可以产生某些触发Js函数的事件，事件通常与函数结合使用，当事件触发时执行函数。
一些事件举例：鼠标点击、页面或图像载入、鼠标悬浮于页面的某个热点之上、键盘按键等
onload onUnload
onload事件发生在用户进入页面时，也就是浏览器加载页面时，该事件通常被用于检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。
onUnload事件发生在用户离开页面时。
这两个事件也通常用于处理cookies
HTML页面中body元素有onload和onUnload事件
其他事件的使用后边学习。
使用方法
try{
检测代码；
}catch(err){
处理代码；
}
其中err可以写为别的名称，同样适用。
使用方法：throw exception;
exception可以是字符串、数值，或者对象
同java语言一样，对象含有属性和方法。
属性：是与对象有关的值
方法：是对象可以完成的行为
JS中有字符串的String对象，数组的Array对象，日期的Date对象，布尔型Boolean对象等。
String对象用例：String对象的length属性和toUpperCase()方法
创建String对象时使用：new String(参数) 以参数，创建字符串对象返回。也可以不使用String字眼，直接使用双引号的字符串。
也可以不使用new ，直接String(参数)，直接把参数转化为字符串对象（不是很熟悉该方法的使用，待后续学习）
注意，JS的字符串是不可变的，String定义的方法都不能改变字符串的内容，像toUpperCase()等方法返回的是新的字符串。
字符串对象可以使用 for in 遍历。
String对象的属性主要有三个：constructor（对象构造函数的引用）,length（字符串的长度）,prototype（允许向对象添加属性和方法）。
prototype比较重要，length经常使用。
String对象还有大量的方法，常用的有：
indexOf()检索字符串
concat()连接字符串
link()将字符串显示为链接
replace()替换与正则表达式匹配的值
toUpperCase()、toLowerCase()字符串大小写转换
后续用到的继续学习。
Date对象只有constructor和prototype属性，有很多关于时间操作的方法
getDate()获取一个月中的某一天；
getMonth()获取月份数，从0到11；
getFullYear()获取四位数的年份；
getHours()、getMinutes()、getSeconds()、getMilliSeconds()获取时(0~23)、分、秒(0~59)、毫秒(0~999)，另外这些方法还有对应的set系列的方法
new Array();
new Array(size);创建对象时，指定数组的大小，后期可以扩展
new Array(e0,e1,e2...);通过指定数组元素创建数组
数组Array对象的属性有：constructor ,length, prototype ,还有 index, input（对这两个属性的用处未知中。。。）
常用的方法有：
concat()连接两个数组
join()将数组的所有元素组成字符串
sort()对数组元素进行排序，使用此方法后，数组内部的元素就重新进行了排序
reverse()颠倒数组中元素的顺序
pop()删除并返回数组的最后一个元素
shift()删除并返回数组的第一个元素
push()向数组的末尾添加一个元素或多个元素，并返回新的长度
创建对象时，如果为无参数或者参数为0，-0，false，null，空字符串""，NaN，对象都是为false
参数为字符串或者其他数值，对象为true
Math有8中属性，自然对数的底数E，圆周率PI，ln2，以及其他的算数中经常用到的常量
abs(x)绝对值
min(x,y)和max(x,y)大小值
pow(x,y) x的y次幂
exp(x) e的x次指数
random() 返回0-1的随机值
floor(x), ceil(x), round(x) 不同的舍入方法，都是返回整数
log(x) 求自然对数
sqrt(x) 求开根号
sin(x), cos(x), asin(x), acos(x)等
new RegExp("ee") 指定检索模式，一个字符串或者正则表达式。
RegExp有三个方法，test("string"), exec("string"), compile("str");
test方法是依据检索模式对参数字符串进行匹配，有则返回true，否则返回false
exec方法也是依据检索模式对参数字符串进行匹配，有则返回匹配的字符串，否则返回null
compile是对检索模式进行修改，重新指定检索模式，也可以添加第二个参数
可以创建RegExp对象的时候指定第二个参数，相当于对属性进行操作
另外，String对象的支持正则表达式的方法有：
search()检索与正则表达式相匹配的值,
match()找到一个或多个正则表达式的匹配,
replace()替换与正则表达式相匹配的子串,
split()将字符表达式分割成字符数组
浏览器对象模型BOM(Browser Object Model)的对象为Window，代表浏览器窗口。
Window对象常用的属性：
Navigator ：包含客户端浏览器的信息
Screen：包含客户端显示屏的信息
History：浏览器窗口访问过的URL信息
Location：包含当前URL的信息
Document：代表Html DOM (Docunmet Object Model)
通过这些属性可以获取到关于浏览器窗口的更多信息，其中通过Document对象可以对Html页面进行操作，也就是Js的DOM编程。
Js在运行中其实就在一个Window 对象的作用域下运行，对Window的属性的使用不需要window.document（也正确），而是直接可以使用document对象。
同理，警告框alert()，确认框confirm()，提示框prompt()，都是Window对象的方法，可以在Js中直接使用。
Navigator对象有多个属性，其中appName保存浏览器的类型，和appVersion存有浏览器的版本信息
使用Navigator对象获取浏览器信息：
在BOM对象中的Document对象，就是代表HTML DOM的对象，通过此对象可以实现对HTML页面的处理，即JS DOM 编程。
通过DOM，可以访问HTML页面所有的元素，以及元素的文本和属性。可以对元素节点进行修改，删除，和插入新的元素节点。
HTML DOM 独立于平台和编程语言，js ，java都可对其操作。
详情见
Js DOM编程
用户下一次访问同一网站时，通过提取客户端浏览器中的Cookies，可以针对用户推出合适的网页。
与其相对的是Session机制，Session是一种服务器端保持的方案，客户端通过发送一个标识，服务器端通过标识提取对应的Session查看。这个标识
也有可能通过Cookie机制进行存储，也可以通过其他方式。
Js代码可以提取客户端浏览器中的Cookie对象，在Js中对应的是Document对象的cookie属性。
即通过document.cookie就可以对浏览器中的Cookie进行操作。
具体代码在实现时，不知为什么，js一直提取不出。
a、是否已经填写了必填项目
b、邮件地址是否合法
c、是否输入合法的日期
d、是否在数据域中输入了文本？
验证是否在填写了必填项目：
Email格式的验证：
主要在html中的map标签和area标签，结合js完成操作
使用window对象的setTimeout("Js代码"，毫秒时间)，在指定时间之后，执行指定的Js代码，该方法会返回一个变量，利用返回的变量和clearTimeout(变量)可以停止计时事件
点击按钮，5秒后显示警告框
JavaScript是什么？
1.被用来向HTML页面添加交互行为
2.是一种脚本语言，即轻量级的编程语言
3.通常被嵌入到HTML页面中
4.是一种解释型语言，代码不进行预编译
JavaScript有哪些功能？
1.为HTML页面提供了一种编程工具
2.可以将动态的文本放入的HTML页面中
3.可以对事件做出响应
4.可以读写HTML元素
5.可以被用来验证数据，例如使用正则表达式检测字符串、验证用户提交是否为空字符串
6.可以检测浏览器，并根据检测到的浏览器载入相应的页面
7.创建cookies，存储和取出位于访问者计算机中的信息
JavaScript真正的名称为ECMAScript，JavaScript语句是给浏览器执行的命令，告诉浏览器要执行的操作。
1、JavaScript的编写
JavaScript的代码放在<script type="text/javascript">代码片段</script>中，原则上可以嵌入到HTML页面的任何地方，即便是在HTML元素内。实际上，JavaScript代码段一般放在HTML的body或者head元素中。
区别就是HTML页面被浏览器加载的时候 ，按顺序加载JavaScript代码，加载并不代表执行，JavaScript的函数就是先加载，在事件触发调用时执行。
先加载head中的JavaScript代码，后加载body中的代码
一般对于事件触发的JavaScript响应函数，都写在head中，在Html页面加载时就把这些JavaScript函数加载，在后期body中可调用这些函数。
JavaScript的注释使用”//“对单行注释，使用/*注释段*/对多行进行注释。
2、变量
JavaScript使用var语句来声明变量，对大小写敏感，var y;和var Y是不同的变量可以在声明时或者声明之后对变量赋值，为变量赋值文本值时，要使用"abcd"引起。
注意:
1.可以向未声明的变量赋值，该变量会自动声明
<script type="text/javascript"> x=6; alert(x);//6 </script>2.对于声明了的变量再次声明，该变量也不会丢失原始值
<script type="text/javascript"> var x=6; x=x+7; var x; alert(x);//13 </script>
3、运算
JavaScript也定义了变量之间的运算操作：加减乘除+-*/，求余%，累加++，累减--，赋值=，还有赋值运算符与其他运算符的结合。注意：
1.加号+，可以把字符串连接起来
<script type="text/javascript"> var x="abcd"; var y="ef"; alert(x+y);//abcdef </script>2.加号把数字和字符串相加，结果为字符串
<script type="text/javascript"> var x=23; var y="ef"; alert(x+y);//23ef </script>
4、比较和逻辑运算符
JavaScript的比较运算符和逻辑运算符都基本和java语言一样，只有个别注意全等运算符===与等于==的区别。===全等运算符：比较变量的值和类型，两者不但值相等，类型也一样，才返回true
<script type="text/javascript"> var x=23; var y="23"; alert(x===y);//fasle var z=23; alert(x===z);//true </script>==等于运算符：只比较值是否相等，不比较类型
<script type="text/javascript"> var x=23; var y="23"; alert(x==y);//true </script>
5、消息框
消息框主要是增强界面与用户的交互能力，根据用户的选择返回相应的值。1.警告框
警告框经常用于确保用户得到某些信息，当警告框出现后，用户需要点击确定按钮才能继续操作
语法：使用alert(警告内容)语句，警告内容如果是字符串，需用使用"内容"引起，警告内容为数值时，可以直接填写。
<script type="text/javascript">
alert("abcd");
alert(22);
</script>2.确认框使用户验证确认或者得到某些信息。根据用户的选择，返回true或fasle
语法：confirm(确认内容)
<script type="text/javascript">
var f = confirm("您确定继续执行吗？");//根据用户选择返回true或false
alert(f);//true或false
</script>3.提示框用于向用户提示，输入某个值，点击确认或取消按钮才能继续操作。
语法：prompt("提示语","默认值")
可以指定默认值，也可以不指定，指定时对话框中显示默认值。
第一个参数为提示语，用于提示用户的话语输出。
如果用户点击取消，返回null；
如果用户点击确定，返回为用户输入的值，如果用户输入为空，那么返回为空字符串，而不是null。
<script type="text/javascript">
var p = prompt("请输入姓名：","aaa");
alert(p);
</script>6、函数
JavaScript函数的目的是为了JS代码在页面加载时不被执行，通过事件触发或者函数调用执行代码块函数的定义：
function fun_name(x1, x2, x3){
Js代码...
}
注意，参数无需使用var声明，也不能使用var声明，否则出错
定义好函数后，在事件页面事件触发时指定响应函数onclick="fun_name()";
可以定义多个参数的函数，也可以定义无参函数，还可以使用return语句指定函数返回值。
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
function showHello(){
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="showHello()">调用函数</button>
</body>
</html>函数中的变量为局部变量，函数外定义的变量生存周期从声明开始到页面关闭结束，可以被所有函数访问。1.传参调用函数
<script type="text/javascript">
function showHello(x){
alert(x);
}
</script>
</head>
<body>
<button onclick="showHello('您好！')">调用函数</button>
</body>2.有返回值的函数<script type="text/javascript">
function showHello(){
return "您好!!!"
}
</script>
</head>
<body>
<button onclick="alert(showHello())">调用函数</button>
</body>7、for in 声明
for in声明是为了对数组进行遍历操作，或者遍历对象的属性（后续学习）使用方法：
var arr=new Array();
for(var x in arr){
arr[x];
}
注意x为数组的下标值，而不是数组的元素
<script type="text/javascript">
// var x;//两种x的声明方法都可以
var mycars = new Array();
mycars[0]="Saab";
mycars[1]="Volvo";
mycars[2]="BMW";
//使用for in 语句遍历数组
for(var x in mycars){
//注意x为数组的下标值，不是数组元素
document.write(mycars[x]+"<br/>");
}
</script>8、事件
事件是JS可以侦测到的行为，增加界面的交互能力，使我们有能力创建动态页面。HTML页面中的每一个元素都可以产生某些触发Js函数的事件，事件通常与函数结合使用，当事件触发时执行函数。
一些事件举例：鼠标点击、页面或图像载入、鼠标悬浮于页面的某个热点之上、键盘按键等
onload onUnload
onload事件发生在用户进入页面时，也就是浏览器加载页面时，该事件通常被用于检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。
onUnload事件发生在用户离开页面时。
这两个事件也通常用于处理cookies
HTML页面中body元素有onload和onUnload事件
<body onunload="" onload="">注意代码中，事件属性全部使用小写。
其他事件的使用后边学习。
9、try-catch语句
同java语言一样，try-catch语句是为了应对编程中出现的错误。try-catch语句可以在函数中使用，也可以不在函数中使用，一般经常使用在函数中。使用方法
try{
检测代码；
}catch(err){
处理代码；
}
其中err可以写为别的名称，同样适用。
<script type="text/javascript">
function show(){
try{
allert("aaa");
}catch(err1){
alert("此页面出现错误："+err1)
}
}
</script>10、throw
用于程序开发者主动创建异常并抛出，可以结合try-catch语句，以达到控制程序流并产生精确错误消息的目的。使用方法：throw exception;
exception可以是字符串、数值，或者对象
<script type="text/javascript">
var x=prompt("请输入一个整数值：");
function message()
{
try{
if(x>=0)
throw 1;
if(x<0)
throw -1;
}catch(err){
if(err==1){
alert("err==1");
}
else{
alert("err==-1");
}
}
}
</script>11、对象简介
JavaScript是面向对象的编程语言OOP(Object Oriented Programming)，可以自己定义对象和变量类型。同java语言一样，对象含有属性和方法。
属性：是与对象有关的值
方法：是对象可以完成的行为
JS中有字符串的String对象，数组的Array对象，日期的Date对象，布尔型Boolean对象等。
String对象用例：String对象的length属性和toUpperCase()方法
<script type="text/javascript">
var x="hello world!";
//String对象的length属性
document.write(x.length);//12
//String对象的toUpperCase()方法
document.write("<br/>"+x.toUpperCase());//HELLO WORLD!
</script>12、字符串String
String对象用于处理字符串，双引号的"abcd"就是一个String对象。使用方法见上节。创建String对象时使用：new String(参数) 以参数，创建字符串对象返回。也可以不使用String字眼，直接使用双引号的字符串。
<script type="text/javascript">
//var x=new String(222);//OK，可以使用数值作为参数
//var x=new String(abc);//错误,必须使用双引号
var x=new String("hello world!!!")
//String对象的length属性
document.write(x.length);//14
//String对象的toUpperCase()方法
document.write("<br/>"+x.toUpperCase());//HELLO WORLD!!!
</script>注意，new String(参数)的参数指定，可以为数值，字符必须有双引号，否则出错。也可以不使用new ，直接String(参数)，直接把参数转化为字符串对象（不是很熟悉该方法的使用，待后续学习）
注意，JS的字符串是不可变的，String定义的方法都不能改变字符串的内容，像toUpperCase()等方法返回的是新的字符串。
字符串对象可以使用 for in 遍历。
String对象的属性主要有三个：constructor（对象构造函数的引用）,length（字符串的长度）,prototype（允许向对象添加属性和方法）。
prototype比较重要，length经常使用。
String对象还有大量的方法，常用的有：
indexOf()检索字符串
concat()连接字符串
link()将字符串显示为链接
replace()替换与正则表达式匹配的值
toUpperCase()、toLowerCase()字符串大小写转换
后续用到的继续学习。
13、日期Date
Date对象实现对日期的操作，使用方法new Date();返回Date对象。Date对象只有constructor和prototype属性，有很多关于时间操作的方法
<script type="text/javascript">
//1.返回当前的日期的时间 new Date() 或直接Date()
document.write(new Date());//Wed Mar 23 2016 13:13:29 GMT+0800 (中国标准时间)
//这种Date()返回的不是Date对象，应该是个字符串，因为不具备Date对象的方法
document.write("<br/>"+Date());//Wed Mar 23 2016 13:14:07 GMT+0800 (中国标准时间)
//2.返回从1970.1.1日起至今的毫秒数，使用getTime()方法
document.write("<br/>"+new Date().getTime());//1458710189641
//3.设置具体的日期setFullYear(年，月-1，日),注意月份是从0开始的（实际为1月份）
var date = new Date();
date.setFullYear(2106,2,22);
document.write("<br/>"+date);//Mon Mar 22 2106 13:20:22 GMT+0800 (中国标准时间)
//4.将时间以UTC格式显示toUTCString()
document.write("<br/>"+new Date().toUTCString());//Wed, 23 Mar 2016 05:23:07 GMT
//5.getDay()显示星期几，显示结果为数值，0位星期日，1为星期一
document.write("<br/>"+new Date().getDay());//3
</script>另外还有一些常用的方法：getDate()获取一个月中的某一天；
getMonth()获取月份数，从0到11；
getFullYear()获取四位数的年份；
getHours()、getMinutes()、getSeconds()、getMilliSeconds()获取时(0~23)、分、秒(0~59)、毫秒(0~999)，另外这些方法还有对应的set系列的方法
14、数组Array
创建数组：三种方法new Array();
new Array(size);创建对象时，指定数组的大小，后期可以扩展
new Array(e0,e1,e2...);通过指定数组元素创建数组
数组Array对象的属性有：constructor ,length, prototype ,还有 index, input（对这两个属性的用处未知中。。。）
常用的方法有：
concat()连接两个数组
join()将数组的所有元素组成字符串
sort()对数组元素进行排序，使用此方法后，数组内部的元素就重新进行了排序
reverse()颠倒数组中元素的顺序
pop()删除并返回数组的最后一个元素
shift()删除并返回数组的第一个元素
push()向数组的末尾添加一个元素或多个元素，并返回新的长度
<script type="text/javascript">
//创建数组对象new Array(); 指定大小创建数组new Array(size);new Array("aa","bb","cc")
var arr = new Array();
arr[0]="AA";
arr[1]="BB";
arr[2]="CC";
showArr(arr);
document.write("<br/>");
//注意限定数组大小的形式创建数组后，可以扩展
var arr2 = new Array(2);
arr2[0]=1;
arr2[1]=11;
arr2[3]=111;
showArr(arr2);
document.write("<br/>");
/*显示：
1
11
111
*/
var arr3 = new Array("aa","bb","cc");
showArr(arr3);
showArr(arr2.concat(arr3));//不同类型的数组也可以组成新的数组
function showArr(arr){
for(var x in arr){
document.write(arr[x]+"<br/>")
}
}
</script>15、逻辑Boolean
用于检查逻辑对象是true还是false，其实就是布尔型的封装类。创建对象时，如果为无参数或者参数为0，-0，false，null，空字符串""，NaN，对象都是为false
参数为字符串或者其他数值，对象为true
<script type="text/javascript">
//以下输出全部为false
document.write("无参数："+new Boolean()+"<br/>");
document.write("参数为0："+new Boolean(0)+"<br/>");
document.write("参数为-0："+new Boolean(-0)+"<br/>");
document.write("参数为null："+new Boolean(null)+"<br/>");
document.write("参数为false："+new Boolean(false)+"<br/>");
document.write("参数为空字符串\"\"："+new Boolean("")+"<br/>");
document.write("参数为NaN："+new Boolean(NaN)+"<br/>");
document.write("参数为空字符串\"\"："+new Boolean("")+"<br/>");
//以下输出为true
document.write("参数为空字符串\"false\"："+new Boolean("false")+"<br/>");
document.write("参数为1："+new Boolean(1)+"<br/>");
</script>16、算数Math
Math不能创建对象，直接使用其属性和方法，进行算数任务。Math有8中属性，自然对数的底数E，圆周率PI，ln2，以及其他的算数中经常用到的常量
<script type="text/javascript">
document.write("e:"+Math.E+"<br/>");
document.write("PI:"+Math.PI+"<br/>");
document.write("ln2:"+Math.LN2+"<br/>");
document.write("ln10:"+Math.LN10+"<br/>");
document.write("log2e:"+Math.LOG2E+"<br/>");
document.write("log10e:"+Math.LOG10E+"<br/>");
document.write("sqrt2:"+Math.SQRT2+"<br/>");
document.write("根号2的倒数 sqrt1_2:"+Math.SQRT1_2+"<br/>");
</script>
</head>Math的方法有很多：abs(x)绝对值
min(x,y)和max(x,y)大小值
pow(x,y) x的y次幂
exp(x) e的x次指数
random() 返回0-1的随机值
floor(x), ceil(x), round(x) 不同的舍入方法，都是返回整数
log(x) 求自然对数
sqrt(x) 求开根号
sin(x), cos(x), asin(x), acos(x)等
<script type="text/javascript">
document.write("ceil(13.6):"+Math.ceil(13.6)+"<br/>");//14
document.write("floor(13.6):"+Math.floor(13.6)+"<br/>");//13
document.write("round(13.5):"+Math.round(13.5)+"<br/>");//14
</script>17、RegExp对象
RegExp对象用于对正则表达式的封装，在对字符串的检索中使用。new RegExp("ee") 指定检索模式，一个字符串或者正则表达式。
RegExp有三个方法，test("string"), exec("string"), compile("str");
test方法是依据检索模式对参数字符串进行匹配，有则返回true，否则返回false
exec方法也是依据检索模式对参数字符串进行匹配，有则返回匹配的字符串，否则返回null
compile是对检索模式进行修改，重新指定检索模式，也可以添加第二个参数
<script type="text/javascript">
//创建RegExp对象，指定检索模式，可以是一个字符串，也可以是正则表达式
var reg = new RegExp("ee");
//RegExp有三个方法：test(), exec(), compile()
//test(字符串)方法匹配参数字符串中是否有符合检索模式的，有返回true，否则false
document.write(reg.test("aadees"));//true
//exec(字符串)也是用于判断参数字符串中是否有符合检索模式的，有返回符合的字符串，否返回null
document.write(reg.exec("adsswee"));//ee
//compile("检索模式")，compile()方法是用来改变前边指定的检索模式的，可以添加或删除第二个参数
reg.compile("aa");
document.write(reg.test("aabdc"));//true
</script>RegExp的属性有：global（RegExp对象是否具有标志"g"），ignoreCase（RegExp对象是否具有标志"i"），lastIndex，multiline，source 具体使用待学习可以创建RegExp对象的时候指定第二个参数，相当于对属性进行操作
另外，String对象的支持正则表达式的方法有：
search()检索与正则表达式相匹配的值,
match()找到一个或多个正则表达式的匹配,
replace()替换与正则表达式相匹配的子串,
split()将字符表达式分割成字符数组
18、浏览器对象模型BOM
除了js的String、Array、Boolean、RegExp等基本内置对象外，JS还可以结合浏览器对象模型，调用浏览器对象。浏览器对象模型BOM(Browser Object Model)的对象为Window，代表浏览器窗口。
Window对象常用的属性：
Navigator ：包含客户端浏览器的信息
Screen：包含客户端显示屏的信息
History：浏览器窗口访问过的URL信息
Location：包含当前URL的信息
Document：代表Html DOM (Docunmet Object Model)
通过这些属性可以获取到关于浏览器窗口的更多信息，其中通过Document对象可以对Html页面进行操作，也就是Js的DOM编程。
Js在运行中其实就在一个Window 对象的作用域下运行，对Window的属性的使用不需要window.document（也正确），而是直接可以使用document对象。
同理，警告框alert()，确认框confirm()，提示框prompt()，都是Window对象的方法，可以在Js中直接使用。
Navigator对象有多个属性，其中appName保存浏览器的类型，和appVersion存有浏览器的版本信息
使用Navigator对象获取浏览器信息：
<script type="text/javascript">
var bName = navigator.appName;
var bVersion = navigator.appVersion;
document.write("Browser name:"+bName+"<br/>");//Browser name:Netscape
document.write("appVersion :"+bVersion);
//appVersion :5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E; GWX:QUALIFIED; rv:11.0) like Gecko
document.write("version :"+parseFloat(bVersion));
//version :5 parseFloat为js的全局函数
</script>不知道为什么在360浏览器和IE上浏览器的名字都是一样的Netscape19、HTML DOM
HTML DOM ：Document Object Model for HTML 定义了一套用于代表HTML元素的对象，以及访问和处理的方法在BOM对象中的Document对象，就是代表HTML DOM的对象，通过此对象可以实现对HTML页面的处理，即JS DOM 编程。
通过DOM，可以访问HTML页面所有的元素，以及元素的文本和属性。可以对元素节点进行修改，删除，和插入新的元素节点。
HTML DOM 独立于平台和编程语言，js ，java都可对其操作。
详情见
Js DOM编程
20、Cookies
Cookie表示计算机浏览器中存储的一个对象,用于存储客户访问网页时，所记录的一些选择或信息。是一种客户端保持的方案。用户下一次访问同一网站时，通过提取客户端浏览器中的Cookies，可以针对用户推出合适的网页。
与其相对的是Session机制，Session是一种服务器端保持的方案，客户端通过发送一个标识，服务器端通过标识提取对应的Session查看。这个标识
也有可能通过Cookie机制进行存储，也可以通过其他方式。
Js代码可以提取客户端浏览器中的Cookie对象，在Js中对应的是Document对象的cookie属性。
即通过document.cookie就可以对浏览器中的Cookie进行操作。
具体代码在实现时，不知为什么，js一直提取不出。
21、Js的常用功能
应该说后续的验证、动画、图像地图、计时等都是Js常见的应用了。1.验证
在数据被提交给服务器前，对HTML中的表单数据进行验证，一般验证有：a、是否已经填写了必填项目
b、邮件地址是否合法
c、是否输入合法的日期
d、是否在数据域中输入了文本？
验证是否在填写了必填项目：
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
function validate_required(field, allerttxt){
//with(对象)的使用：为了在代码块对对象的属性进行操作更加方便，直接使用，不需要加 对象.属性
with(field){
if(value == null || value ==""){
alert(allerttxt);return false;
}else{
return true;
}
}
}
function validate_form(thisform){
with(thisform){
if(validate_required(email, "Email must be filled!")==false){
//focus是控制页面的焦点，这里是把焦点定位在email地方，你会看到一个框
email.focus();
return false;
}
}
}
</script>
</head>
<body>
<!-- 事件中return的用法，return起到的是对事件的控制，return false是取消事件的默认行为。
return function()目的是根据函数的返回值，决定事件的行为。
如果函数返回false，那么事件的默认行为就不执行。
表单中的onsubmit事件是向submitpage.htm页面提交数据，默认行为是提交，
但是如果onsubmit="return false"，默认就不提交。
如果这里是没有return，那么事件的默认行为必须执行，不管函数的返回为true或者false
-->
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post" >
Email:<input type="text" name="email" size="30"/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>Email格式的验证：
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
//Email格式的验证
function validate_email(field,allertxt){
with(field){
apos = value.indexOf("@");
bpos = value.indexOf(".");
if(apos<1 ||bpos-apos<2){
alert(allertxt);
return false;
}else{
return true;
}
}
}
function validate_form(thisform){
with(thisform){
if(validate_email(email, "Not a valid email address!")==false){
//focus是控制页面的焦点，这里是把焦点定位在email地方，你会看到一个框
email.focus();
return false;
}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post" >
Email:<input type="text" name="email" size="30"/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>2.动画
Js可以用来产生动态的图像，利用两个事件来驱动两个相应的函数，来切换两张图片形成动画效果。<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
function mouseover(){
document.b1.src="2.png";
}
function mouseout(){
document.b1.src="2.jpg";
}
</script>
</head>
<body>
<a href="www.baidu.com"><img name="b1" alt="study!" onmouseover="mouseover()" onmouseout="mouseout()" src="2.jpg"/></a>
</body>
</html>3、地图
地图主要就是解决，在鼠标放置在不同的地方时，可以根据放置位置的不同，做出不同的操作，或者显示不同的内容。主要在html中的map标签和area标签，结合js完成操作
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
function writeText(txt){
document.getElementById("desc").innerHTML=txt;
}
</script>
</head>
<body>
<img src="eg_planets.jpg" alt="Plants" usemap="#planetmap">
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14"
onMouseOver="writeText('直到 20 世纪 60年代，金星一直被认为是地球的孪生姐妹，因为金星是离我们最近的行星，同时还由于两者拥有很多共同的特征。')"
href ="../example/html/venus.html" target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10"
onMouseOver="writeText('从地球上是很难研究水星的，这是由于它和太阳的距离总是很近。')"
href ="../example/html/mercur.html" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260"
onMouseOver="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。')"
href ="../example/html/sun.html" target ="_blank" alt="Sun" />
</map>
<!--预备一个文字框，在函数调用时显示文字在此-->
<p id="desc"></p>
</body>
</html>4、计时
在一个设定的时间段之后执行代码，而不是调用函数之后就立刻执行，成为计时事件，使用window对象的setTimeout("Js代码"，毫秒时间)，在指定时间之后，执行指定的Js代码，该方法会返回一个变量，利用返回的变量和clearTimeout(变量)可以停止计时事件
点击按钮，5秒后显示警告框
<script type="text/javascript">
function timealert(){
var t = setTimeout("alert('5s')",5000);
}
</script>
</head>
<body>
<button onclick="timealert()">Click me</button>
<p>点击按钮，5秒后显示警告框</p>
</body>计时器，可以点击开始与停止<script type="text/javascript">
var c=0;
var t;
function timeCount(){
c=c+1;
document.getElementById("text").value=c+"s";
setTimeout("timeCount()",1000);
}
</script>
</head>
<body>
<input type="button" onclick="timeCount()" value="点击开始">
<input typr="text" id="text"/>
<input type="button" onclick="timeCount()" value="点击结束">
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Gson详细使用，此Gson非彼Json，你值得拥有~
- ExtJs布局之tabPanel
- [json]Json 入门
- JavaScript 中文字符占两个字节处理方法
- Ajax 上传文件返回JSON字符串FireFox解析出来后带有<pre>标签解决办法
- JavaScript Phishing
- Servlet和jsp小应用
- 关于MVC中利用Javascript跳转页面的问题的备忘
- ExtJs布局之viewport
- 《JAVASCRIPT:THE COMPLETE REFERENCE》读书笔记 数据类型与变量
- 解决项目开发过程中JS 缓存问题
- js focus输入焦点和判断邮件地址是否有@
- 7.5 Javascript:表单验证-正则补充
- ExtJs布局之BOX
- Spiral Matrix
- ExtJs布局之border
- JSP
- ExtJs布局之table
- javascript注入
- 同时使用jsp与thymeleaf