JavaScript对象及相关函数
- String对象
- Date对象
- Math对象
浏览器对象和元素（DOM模型）
其它常用函数
- parseInt()函数
- parseFloat函数
JavaScript对象
- 一、字符串对象——String对象
利用String对象提供的函数来处理字符串：
- charAt(idx)：返回指定位置处的字符
- indexOf(Chr)：返回指定子字符串的位置，从左到右。找不到返回-1
- lastIndexOf(chr)：返回指定子字符串的位置，从右到左。找不到返回-1
- substring(m,n)：返回给定字符串中从m位置开始，到n位置结束的子串，如果参数n省略，则意味着取到字符串末尾。
- toLowerCase()：将字符串中的字符全部转化成小写。
- toUpperCase()：将字符串中的字符全部转化成大写。
字符串对象
- 属性：length
跟java语言不太一样，java语言要获得一个字符串的长度要用length()方法，在js里要想获取一个字符串的长度用length属性
- 方法：
1、字体控制：big() 、link() 、bold() 等
big() 调一次字体增大一号，link()加链接的意思（类似超链接），bold() 加粗
2、字符串：toLowCase()、toUpperCase()、indexOf(char,fromIndex)、substring(start,end)
eval()函数
- eval()函数可以把一个字符串当作一个JavaScript表达式一样去执行它
- 不使用eval：alert ("3"+"2"); --〉32
- 使用eval的上下文环境：alert (eval("3") + eval("2")); --〉5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script>
var a = "10";
//var a = 10;
alert("3"+"2"); // 32
alert(eval("3") + eval("2")); //5
alert(eval("a") + eval(2)); //102 //eval("a") ""是eval()里面的一个运算符，写完以后它会把a当做一个表达式来用，去取出a的值，取出10后，变为eval("10"),则eval("10")+eval(2)结果为102
alert(a + 2); //102
alert(eval(a) + eval(2)); //12 //eval(a)中a的外面没有出现"",把a当做一个表达式来用，取出的值为10,eval(10) + eval(2)结果为12
alert(eval("\"a\"") + eval(2)); //a2 //eval("\"a\"")最外层的""为eval的运算符,则eval("")里面是字符串"a",与eval("a")不同
alert("a" + 2); //a2
alert(eval("2+3")); //5
alert(2 + "a"); //2a
alert(2 + 3 + "a"); //5a
</script>
<script>
var fun1 = function (){
alert("function()函数测试－第1种写法。。。");
}
function fun2(){
alert("function()函数测试－第2种写法。。。");
}
</script>
<input type="button" value="eval函数测试－第1种写法" onclick="eval(fun1());"/>
<input type="button" value="eval函数测试－第2种写法" onclick='eval("fun2()");'/>
</BODY>
</HTML>
具有转换功能
- 二、时间对象——Date对象
参数详解：
- month：用英文表示的月份名称。
- mth：用证书表示的月份，从0-11。
- dd：表示一个月中的第几天，从1-31。
- yyyy：四位数表示的年份。
- hh：小时数，从0-23。
- mm：分钟数。
- ss：秒数，从0-59。
- ms：毫秒数。
日期及时间函数
- getYear(): 返回年数； setYear(): 设置年数
- getFullYear()：返回YYYY格式
- getMonth(): 返回月数； setMonth():设置月数
- getDate(): 返回日数； setDate():设置日数
- getDay(): 返回星期几； setDay():设置星期数
- getHours():返回小时数； setHours():设置小时数
- getMinutes():返回分钟数； setMintes():设置分钟数
- getSeconds():返回秒数； setSeconds():设置秒数
- getTime() : 返回毫秒数； setTime() :设置毫秒数
objDate.getMonth()：返回用整数表示的月份，用于表示1-12月，但从0开始表示，0：表示1月份，以此类推，11：表示12月。
实用方法：setTimeout、setInterval、clearTimeout
- setTimeout(代码或函数名,时间)：超过指定的时间只执行一次代码或函数
例：var a = window.setTimeout("alert('Hello, world')", 2000);
说明：过2秒钟只执行一次alert('Hello, world')代码
- setInterval (代码或函数名,时间)
例：var b = window.setInterval("alert('Hello, world')", 2000);
说明：每隔2秒钟执行一次alert('Hello, world')代码
注：以上两个方法中的时间单位均为：毫秒。
setTimeout、setInterval一执行会创建一个自动执行的时间对象，并把对象返回，可用变量来接收（a,b）
- clearTimeout
例：clearTimeout(b);
说明：clearTimeout方法是撤消setInterval动作的，其中，变量b代表了window.setInterval("alert('Hello, world')", 2000)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script language=javascript>
//过2秒钟只执行一次alert('Hello, world')代码
//var a = window.setTimeout("alert('Hello, world')", 2000);
//每2秒够执行一次alert('Hello, world')代码
var a = window.setInterval("alert('Hello, world')", 2000);
</script>
<BODY>
<!--
clearTimeout方法是撤消setInterval动作的，其中变量a代表了window.setInterval("alert('Hello, world')", 2000)
-->
<input type=button value="停止" onclick="clearTimeout(a);">
</BODY>
</HTML>
实用示例：使用JavaScript实现日期时间的动态显示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<table width="562" height="52" border="1" align="center">
<tr>
<td width="171" height="46" align="right">当前时间：</td>
<td id="timeValue" width="375" style="padding-left:10px"></td>
</tr>
</table>
</BODY>
<script language=javascript>
function view(tdId){//js方法尽量写成活的
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
if(month <10){
month = "0"+month;
}
if(day <10){
day = "0"+day ;
}
if(hour <10){
hour = "0"+hour ;
}
if(minute <10){
minute= "0"+minute ;
}
if(second <10){
second = "0"+second ;
}
var newTime = year +"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
var tobj = document.getElementById(tdId);
tobj.innerHTML ="<b>" +newTime+"</b>"; //innerHTML表示td中间的内容
}
window.setInterval("view('timeValue')",1000);
</script>
</HTML>
递归：自己调用自己
切记：要操作的html元素，在操作之前一定要先加载到浏览器内，以便将来能找到这个元素
- 三、数学对象——Math对象
Math对象常用方法：
- abs()：绝对值
- sin() 、 cos()：正弦余弦值
- asin() 、 acos()：反正弦反余弦
- tan() 、atan()：正切反正切
- round()：四舍五入
- sqrt()：平方根
- pow(x,y)：x的y次方
JavaScript常用函数
这些函数不从属于任何的对象
在JavaScript的任何地方都可以直接使用这些函数：
- parseInt()函数
- parseFloat函数
- setTimeout()、setInterval () 、clearTimeout ()函数
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script>
var i = "1234";
var j = "45aa90";
var k = "35.67";
var z = "25.5aabb67.8";
var str = "abc";
document.write("1234转换成整数后为：" + parseInt(i) + "<br>");//1234转换成整数后为：1234
document.write("45aa90转换成整数后为：" + parseInt(j) + "<br>");//45aa90转换成整数后为：45
document.write("35.67转换成浮点数后为：" + parseFloat(k) + "<br>");//35.67转换成浮点数后为：35.67
document.write("25.5aabb67.8转换成浮点数后为：" + parseFloat(z) + "<br>");//25.5aabb67.8转换成浮点数后为：25.5
document.write("abc转换成数字后为：" + parseFloat(str) + "<br>");//abc转换成数字后为：NaN
</script>
</BODY>
</HTML>
parseInt和parseFloat函数
- parseInt函数功能：试图从一个字符串中提取出一个整数。
- parseInt函数也可以附加一个整数n，可以返回n进制的一个整数。可以利用这个函数从字符串中提取二进制、八进制和十六进制的整数。
- 如果在字符串中除了数字、符号、小数点和指数符号以外的字符，parseInt就停止转换，返回已有的结果。
- 如果第一个字符不是数字就不可以转换，parseInt就返回”NaN”值，指示字符串中不存在数字。
- parseFloat函数和parseInt函数相似，只不过它转换的是浮点数。
- isNaN()：判断变量是否是数值型，如果不是，则返回true；如果是则返回false
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function check(num,oEvent){
var f = document.getElementById("form1");
if(oEvent.keyCode == 13){
if(isNaN(num)){//如果输入的不是数字，则该条件成立
alert("NaN");
}else{
alert(num);
/*
* 判断为输入的数字后，提交表单，此时不会再触发表单的onsubmit事件，因为这次提交动作是调用表单对象自己的submit()方法实现的，而不是使用“提交按钮”或“图片 按钮”进行提交的，即：只能使用“提交按钮”或“图片按钮”进行提交时才会触发onsubmit事件。
* 因为onsubmit事件中写的代码是：return false表示不提交表单，如果这里不通过调用表单对象自己的submit()方法，则表单不会进行提交
*/
f.submit();
}
}
}
</script>
<BODY>
<form id="form1" action="www.baidu.com" onsubmit="return false;"><!--按回车键相当于单击submit按钮一样会提交表单-->
<input type="text" name="page" value="" onKeyPress="check(this.value,event)"/>
</form>
</BODY>
</HTML>
浏览器对象的层次结构
浏览器就是window，由以下四类组成
- 显示网页的区域就是document
- 历史列表history
- 地址栏location，给location赋值则会跳到指定的网页上去
- 导航栏Navigator
其中document还包含有链接links，锚点anchors，图片images、表单forms等,且这些均为数组对象，不常用
<html>
<head></head>
<body>
<script>
function gotoUrl(){
var aObj = document.getElementById("local");
aObj.click();//用js实现点击超链接
}
</script>
<a id="local" href="www.baidu.com">XXX</a><input type="button" value="Go" onclick="gotoUrl();"/>
</body>
</html>窗口中的对象和元素(BOM)
- window
- 打开新窗口（window.open()）；这个窗口不是模式窗口，alert是模式窗口
- 关闭窗口（window.close()）
- location ：获取或设置现有文档的URL
- history ：先前访问过的URL的历史列表；常用方法：back()，go(number)
- document ：当前的文档对象
- document.write()：向客户端浏览器输出内容
- document.formName：可以用这个方法得到表单名称
浏览器对象（BOM）——document
document：处理页面文档（即当前的文档对象）。例如，向页面写入信息、创建新的节点、获取表单信息等功能，都可以使用document对象来完成，它表示页面文档本身。
document对象的常见属性
- anchors:返回文档中所有的书签标记组成的数组。
- cookie:返回或设置cookie。
- domain:返回或者设置文档的默认域名。
- embeds:返回文档中所有嵌入对象组成的数组。
- forms:返回文档中所有表单组成的数组。
- images:返回文档中所有图像组成的数组。
- lastModified:返回文档最后一次的修改日期。
- links：返回文档中所有链接的集合。
这些属性用的很少，不怎么应用
DOM模型
所谓DOM是指文档对象模型，document，树状模型
outerHTML、innerHTML、innerTEXT属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script>
function demo(){
var tdObj = document.getElementById("content");
//tdObj.innerHTML = "使用td的innerHTML属性将td单元格中的内容动态替换了";
var username = document.getElementById("username").value;
var reg = /^\w{3,}$/;
if(!reg.test(username)){
tdObj.innerHTML = "<font color='red'><b>用户名至少是3位！</b></font>";
}else{
tdObj.innerHTML = " ";
}
}
</script>
<body>
<table width="658" height="95" border="1" align="center">
<tr>
<td colspan="3" align="center">innerHTML属性示例</td>
</tr>
<tr>
<td width="198" align="center" valign="middle">用户名：</td>
<td width="243" style="padding-left:10px;">
<input type="text" id="username" name="username" />
</td>
<td id="content" width="244" style="padding-left:10px;"> </td>
</tr>
<tr>
<td colspan="3" align="center"><input type="button" value="innerHTML属性测试" onclick="demo();"/></td>
</tr>
</table>
</body>
</html>
浏览器对象——window
window对象是浏览器对象中其他大部分对象的共同的祖先，所以一般在JavaScript程序中可以省略window对象
常用的window对象的方法
- open(URL,windowName,parameterList)：创建一个新的浏览器窗口，载入一个指定的URL地址
open()方法参数说明：
1、第一个参数：URL；（你显示资源的地址）
2、第二个参数：新窗口的名字；（在什么位置显示）
window.open(“http://www.baidu.com”,”topFrame”);
这行代码的行为相当于用户点击一个链接，该链接的href为：http://www.baidu.com，target为“topFrame”。
专用的框架名：_self、_parent、_top、_blank也是有效的，即第二个参数也可以是专用的框架名。
3、第三个参数：特性字符串（新打开窗口的外观）
| 设置 | 取值 | 说明 |
| left | Number | 说明新创建的窗口的左坐标，不能为负数 |
| top | Number | 说明新创建的窗口的上坐标，不能为负数 |
| height | Number | 说明新创建的窗口的高度，该数字不能小于100 |
| width | Number | 说明新创建的窗口的宽度，该数字不能小于100 |
| resizable | yes,no | 判断新窗口是否能通过拖动边线调整大小，默认值为no |
| scrollable | yes,no | 判断当新窗口显示不下内容时是否允许滚动，默认值为no |
| toolbar | yes,no | 判断新窗口是否显示工具栏，默认值为no |
| status | yes,no | 判断新窗口是否显示状态栏，默认值为no |
| location | yes,no | 判断新窗口是否显示（Web）地址栏，默认值是no |
特性字符串是用逗号分隔的设置列表。特性字符串是用逗号分隔的，因此在逗号或等号前后不能有空格。
window.open(”http://www.baidu.com”,”_blank”,”height=150,width=300,top=10,left=10,resizable=yes”);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script>
function openNewWidnow(){
window.open("06_1.html","","height=150,width=300,top=400,left=600,resizable=yes");//第二个参数默认值为_blank，新打开一个窗口
//window.open("06_1.html","_blank","height=150,width=300,top=10,left=10,resizable=no");
}
</script>
<input type="button" value="打开窗口" onclick="openNewWidnow();"/>
</BODY>
</HTML>
- close()：关闭一个浏览器窗口
- alert()：弹出一个消息框
JavaScript中的对话框
- 警告框(alert)：出现一个提示信息
- 询问框(prompt)：返回输入的值 ；prompt(“提示信息”,”默认值”)
var info = window.prompt(“提示信息”,”默认值”);- 确认框(confirm)：根据不同的选择，返回true/false
<script>
function del(){
var cv = confirm("您确认删除该记录吗？");
if(cv == true){
alert("您已经删除了该条记录！");
}else{
}
}
</script>处理地址栏信息—location
location对象是window对象的一个子对象，通过它可以获取或设置浏览器的当前地址。
location对象最常见的功能就是改变浏览器当前浏览的页面，
例如：
window.location=“http://www.baidu.com”;location对象的属性
- protocol:表示浏览器和服务器间通信所使用的协议，如“http:”。
- hostname:表示服务器的主机地址，通常是一个域名或者ip地址,如www.baidu.com 。
- port:表示浏览器和服务器间通信所使用的服务器端口（默认为80，也是Web服务器常用的端口）。
- host:表示主机名加端口号，等价于:hostname+port。
- pathname:表示文档的路径信息，例如“/ajax/3.2.html”。
- hash:表示书签名，即从#号开始到书签结束的部分，例如“#chapter1”。
- search:表示查询字符串，即从问号(?)开始到查询参数结束的部分,例如“?sort=book&id=221”。
- href:表示整个URL地址。
location对象提供了两个方法来对页面载入进行控制，分别是reload方法和replace方法。
- reload(source)方法
reload方法可以重新载入页面(纯粹的刷新)，它接收一个布尔型的参数source，表示页面载入的来源。当source为默认值false时，表示从缓存中载入页面；当为true时表示强制从服务器重新载入页面，通过这个方法很容易实现页面刷新的功能。
- replace(URL)方法
replace方法用来控制新记录插入浏览器访问历史列表中的方式（替换）。
语法为：location.replace(URL)
这个调用实际上和改变location属性的效果相同，表示将用户导航至URL所指向的页面。然而，当前页面却不会被记录到浏览器历史列表中，而是由新页面代替。
建议跳转还是使用window.location
浏览器对象——history
history对象同样是window对象的一个子对象，它对应于浏览器的历史记录功能。
history也提供了3个方法：back()、forward()、go()。这些方法用来控制浏览器的前进和后退功能。
【注意】
history.go()方法，当参数为正时（且只能为1），相当于前进功能；当参数为负时（且只能为-1），相当于后退功能；当参数为0时，表示刷新当前页面。
679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
