JavaScript入门

JavaScript入门

浏览器对象

window对象

window对象方法：



confirm消息对话框

语法为

confirm(str);

，点击”确定”按钮，返回

true

，点击”取消”按钮时，返回

false

。

prompt 消息对话框

语法为

prompt(str1, str2);

str1: 要显示在消息对话框中的文本，不可修改

str2：文本框中的内容，可以修改

返回值：

点击确定按钮，文本框中的内容将作为函数返回值

点击取消按钮，将返回null

open打开新窗口

语法为

window.open([URL], [窗口名称], [参数字符串])

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档

窗口名称：可选参数，被打开窗口的名称。

该名称由字母、数字和下划线字符组成。

“_top”、”_blank”、”_selft”具有特殊意义的名称。

_blank：在新窗口显示目标网页

_self：在当前窗口显示目标网页

_top：框架网页中在上部窗口中显示目标网页

相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。

name 不能包含有空格。

参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

参数表为：



例子

window.open('http://www.imooc.com','_blank','top=100,left=100,width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=no')

关闭窗口

用法

<script type="text/javascript">
var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中
mywin.close();
</script>

JavaScript计时器

计时器方法

history对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

语法：

window.history.[属性|方法]

对象属性：

length

- 返回浏览器历史列表中的URL数量

对象方法：

back()

- 加载history列表中起一个URL

forward()

- 加载history列表中的下一个URL

go()

- 加载history列表中的某个具体的页面

back()

相当于

go(-1)

,代码如下:

window.history.go(-1);

forward()

相当于

go(1),

代码如下:

window.history.go(1);

location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。

语法：

location.[属性|方法]

对象属性：



location对象属性图示：



对象方法：

Navigator对象

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

对象属性：

<script type="text/javascript">
var browser=navigator.appName;
var b_version=navigator.appVersion;
document.write("Browser name"+browser);
document.write("<br>");
document.write("Browser version"+b_version);
</script>

navigator.userAgent

返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)

几种浏览的user_agent.，像360的兼容模式用的是IE、极速模式用的是chrom的内核。

function validB(){
var u_agent =  navigator.userAgent    ;
var B_name="不是想用的主流浏览器!";
if(u_agent.indexOf("Firefox")>-1){
B_name="Firefox";
}else if(u_agent.indexOf("Chrome")>-1){
B_name="Chrome";
}else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){
B_name="IE(8-10)";
}
}

screen对象

screen对象用于获取用户的屏幕信息。

语法：

window.screen.属性

对象属性：

内置对象

Date日期对象

Date对象中处理时间和日期的常用方法：

getDay()

返回星期，返回的是0-6的数字，0 表示星期天

get/setTime()

返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。

<script type="text/javascript">
var mydate=new Date();
document.write("当前时间："+mydate+"<br>");
mydate.setTime( mydate.getTime()  + 2* 60 * 60 * 1000);
document.write("推迟二小时时间：" + mydate);
</script>

String 字符串对象

常用方法：

charAt()

方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。

indexOf()

方法可返回某个指定的字符串值在字符串中首次出现的位置。

语法为：

stringObject.indexOf(substring, startpos)

参数说明：

substring

：必需。指定需检索的字符串值

startpos

：可选。规定在字符串中开始检索的位置。它的合法取值是0 到

stringObject.length - 1

。如果省略该参数，则将从字符串的首字符开始检索。

返回值：如果要检索的字符串没有出现，则该方法返回-1。

split()

方法将字符串分割为字符串数组，并返回此数组。

语法：

stringObject.split(separator,limit)

参数说明：

limit：可选。表示分割的次数。返回的子串不会多于这个参数指定的数组。

将字符串分割为字符

mystr.split("")

substring()

方法用于提取字符串中介于两个指定下标之间的字符。

stringObject.substring(starPos,stopPos)

stopPos：可选。一个非负的整数，结束位置，如果省略该参数，则返回的子串会一直到字符串对象的结尾

substr()

方法从字符串中提取从

startPos

位置开始的指定数目的字符串。

stringObject.substr(startPos,length)

startPos - 如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。

Math对象

Math对象属性



Math对象方法

Array数组对象

数组方法



数组排序sort()

sort()

方法使数组中的元素按照一定的顺序排列。

语法：

arrayObject.sort(方法函数)

参数说明：

如果不指定<方法函数>，则按unicode码顺序排列。

如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。

注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。

若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。

若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。

<script type="text/javascript">
function sortNum(a,b) {
return a - b;
//升序，如降序，把“a - b”该成“b - a”
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr + "<br>");
document.write(myarr.sort(sortNum));
</script>

事件

主要事件表：

DOM

浏览器窗口可视区域大小

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:

一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 浏览器窗口的内部高度

• window.innerWidth - 浏览器窗口的内部宽度

二、对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。

• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。

或者

Document对象的body属性对应HTML文档的标签

• document.body.clientHeight

• document.body.clientWidth

在不同浏览器都实用的 JavaScript 方案：

var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;

网页尺寸scrollHeight

scrollHeight和scrollWidth，获取网页内容高度和宽度。

一、针对IE、Opera:

scrollHeight 是网页内容实际高度，可以小于 clientHeight。

二、针对NS、FF:

scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

三、浏览器兼容性

var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;

注意:区分大小写

scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

网页尺寸offsetHeight

offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

一、值

offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;

网页卷去的距离与偏移量

scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。

offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。

offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。

注意:

区分大小写

offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。