在谈及javascript的基本语法的时候我们看到的只是我们拿javascript编写脚本时的语法,那么现在我们来看看javascript在实际操作时的一些应用,这里不会谈到javascript的特效示例,只会谈到基本和核心。
在html中嵌入javascript脚本,需要使用<script></script标签>,标签的放置位置在<head>标签内,这样在显示页面主体后代码就能完全被装载进浏览器以便使用,在以前,我们需要加上language="javascript"属性,如果省略了language属性,浏览器会使用最新版本的javascript。在XHTML之后,language属性不在使用,而改用type属性,后面跟上mime类型,就是text/javascript,完整的就是<script type="text/javascript">...</script>这是在内部嵌入html文件嵌入javascript的方法,但是如果要嵌入外部文件,只需要加上src属性,比如src="JS文件路径"。如果在一个<script>标签中既有javascript代码又有文件链接,则文件链接优先。外部链接的JS文件没有太多约束,文件的扩展名为.js。文件里面可以写函数,比如function.
一般来说,更提倡使用外部文件
1,外部文件更利于维护
2,如果多个页面都使用一个外部文件,则外部文件只需要缓存一次,性能更佳
3,外部文件更能隐藏JS代码,不容易被查看
还有一个问题,html是由上往下解析,如果在使用一个函数之前未定义这个函数,或者在使用之后定义,则会引发错误。
<noscript></noscript>标签用来表示当浏览器不支持javascript时应显示的内容,标签内可以是任何html代码,script标签除外。
我们还有个问题要注意,比如我们编写脚本的时候要使用<或者>符号来比较两个数,但是如果我们这样用了就会出问题,因为<跟>会被浏览器解释为标签。那怎么解决呢
1,外部文件
2,CDATA段,就是XML的处理方式,CDATA表示不应被解析为标签的文本。代码如下
<script type="text/javascript">
<![CDATA[
function Cdata() {
var a = 1, b = 2;
if (a < b) {
alert("a小于b");
} else {
alert("a大于b");
}
} ]] </script>
我在IE9里测试可以不用加,实际上加了出错,因为我只有IE9,所以在别的浏览器里读者可以自己尝试,IE6或者别的浏览器可能会出问题。
BOM即浏览器,BOM由一系列相关的对象组成,下面有一幅图,展示了BOM的体系结构
Window对象是整个BOM的核心
Window对象表示整个浏览器窗口,但不必表示里面包含的内容。如果页面使用框架,则每个框架都它自己的window对象表示。存放在frames集合中,可以用索引寻找他们。比如frames[0],或者使用框架名称frames["topframe"].
我们在这里有几种访问方法
1,window.frames[0]
2,top.frames[0] //top表示最外层框架,也就是window
3,frames[0] //由于 window是整个BOM的核心,所以在调用window的任何对象,属性,函数时,window都可以省略,这是一种特权。
现在开始解释window的一些对象和属性。
1, parent。顾名思义,parent就是框架的承载 window。
2,self 指向本window
3,moveBy(dx,dy) //把浏览器窗口相对当前位置水平移动dx个像素,垂直移动dy个像素,dx为负数,窗口向左移动,dy为负数,窗口向上移动
4,moveTo(x,y) //把浏览器的左上角移动到屏幕的(x,y)处,可以为负数,这样窗口的某些部分会不可见
5,resizeBy(dw,dh) //相对浏览器的当前窗口大小,宽度调整dx个像素,高度调整dy个像素。为负数则减小对象的dx,dy
6,resiezeTo(x,y) //把窗口调整为x,高度调整为y。不能为负数
7,window.screenLeft和window.screenTop来判断窗口的位置。(IE)
8,document.body.offsetWidth和document.body.offsetHeight用来获取窗口的可视化大小(IE)
Mozilla提供的方法,Window.screenX和Window.screenY用来判断窗口的位置,window.innerWidth和window.innerHeight判断可视化的大小,window,outerWidth和 window.outerHeight判断窗口的自身的大小。
opera同Mozilla一样。
需要着重介绍的一个方法是window.open()方法,这个方法打开一个新窗口,它包含4个参数
window.open("窗口的url","窗口名称","特性字符串","是否利用新页替换当前"),下面来解释每一个参数
参数1,即要打开的新窗口的url
参数2,如果参数2为一个框架的名称,则窗口会载入到框架中,如果框架名无效,则打开新的窗口
参数3,新打开的窗口的一系列属性
left //新窗口的左坐标,不能为负
top //新窗口的上坐标,不能为负
height // 新窗口高度
width // 新窗口宽度
resizeable //是否能调整大小
scrollable //是否允许滚动
toolbar //是否显示工具栏
statas //是否显示状态栏
lacation //判断新窗口是否显示地址栏
参数4,是否覆盖打开的页面。
示例代码:
window.open("http://www.baidu.com","Edrick","left=0,top=0,height=300,width=300,resizeable=no,scrollable=no,toolbar=no,status=no,location=no",false);
实际上,window.open()方法返回对打开的window对象,我们可以操作这个返回的window对象,比如
var newWindow=window.open("http://www.baidu.com","Edrick","left=0,top=0,height=300,width=300,resizeable=no,scrollable=no,toolbar=no,status=no,location=no",false);
newWindow.moveTo(300,300);
newWindow.resizeTo(300,300);
newWindow.close();
window.close()是关闭本窗口
window.opener属性表示的是对打开它的窗口的引用,一般新窗口的最外层window才有opener属性。
系统对话框
系统对话框就是向用户弹出消息,一共有3种
alert()是最简单的也是最基本的,显示指定文本。alert("hello world");
confirm()指示用户是否完成指定的操作,对话框有两个button,一个是OK,一个是cancel
if (confirm("are you sure?")) {
alert("you check the ok button ");
} else {
alert("you check the cancel button");
}
最后一个对话框是prompt(),提示用户输入信息,然户得到信息。
function promptWindow() {
var result = prompt("What's you name?", "");
alert(typeof result);
if (result != null) {
alert("welcome:"+result);
}
}
result的类型为string.以上的3种对话框都属于window对象的方法,它们都是模态对话框,就是用户如果不操作对话框,就不能操作window.以控制用户的行为。
状态栏
状态栏是底部边界内的区域,用于向用户显示信息,状态栏告诉用户何时载入页面,何时完成页面的载入
window.status //使状态栏的文本暂时改变
window.defaultStatus //一直改变状态栏的文本
function FDefaultStatus() {
window.defaultStatus = "www.Edrick.com";
}
function FStatus() {
window.status = "goes to www.baidu.com";
}
下面介绍的是javascript里面比较有用的两个函数,一个是时间暂停,就是在指定的时间内暂停代码
setTimeout(),它包含两个参数,一个是要执行的脚本,一个是暂停的时间
function FSetTimeOut() {
setTimeout("alert('hello')", 2000);
setTimeout(function () { alert("hello"); }, 3000)
setTimeout(SayHello,4000);
}
以上3种写法都行,但是还是比较倾向于最后一种写法
setTimeout会返回一个数字暂停ID,我们可以利用这个ID做一些操作,比如取消暂停
function FSetTimeOut() {
var numberID = setTimeout(SayHello, 4000);
clearTimeout(numberID);
}
setInterval()跟setTimeout()执行的功能差不多,只不过setInterval()是重复的执行一段代码,参数跟setTimeout()一样,它也会创建时间ID,用于我们操作
function FSetInterval() {
setInterval(SayHello,2000);
}
我们也可以取消
function FSetInterval() {
var numberID = setInterval(SayHello, 2000);
clearInterval(numberID);
}
历史
历史就是浏览器窗口的历史,我们可以访问上一页,下一页
window.history.go(-1)表示上一页
window.history.go(1)表示下一页
也可以使用history.back()上一页,和history.forward()下一页。
history.length表示历史中的页数
document对象
document对象既属于与BOM又属于DOM。在BOM中,document由一系列的集合构成,这些集合可以访问文档的各个部分,并提供页面的自身信息
document对象的一些通用属性(由于BOM没有指导实现的标准,各个浏览器都不一样,所以这里说都是最通用的)
alinkColor //激活的链接颜色
bgColor //页面的背景色
fgColor //页面的文本颜色
lastModified //最后修改页面的日期,是字符串
linkColor //链接的颜色
referrer //浏览器历史中后退一个页面的url
title //<title></title>标签中显示的文本
url //当前载入页面的url
vlinkColor //访问过的页面的颜色
document对象的集合
anchors //页面中所有锚的集合
applets //页面中所有applet的集合
embeds //页面中所有嵌入式对象的集合
forms //页面中所有表单的集合
images //页面中所有图像的集合
links //页面中所有链接的集合
可以只用索引或名称访问集合,如document.Images["image_name"].src
document对象还有几个方法,最常用的方法之一是write()或兄弟方法writeln()
他们都是接受一个参数,唯一的区别是writeln()会在末尾加一个换行符
要插入内容属性必须在完全载入页面前调用write()和writeln()方法,如果任何一个方法是在页面后调用的,它讲抹去页面的内容,显示指定的内容。
与 write()和writeln()紧密相关的方法是open()和close(),open()用于打开文档用于编写内容,close()关闭打开的文档
Location对象,BOM中最有用的一个对象
hash() //如果该url包含#,则该方法返回#之后的内容
host // 服务器的名字
hostname //等于host,但是通常会省略www
href //当前载入页面的完整url
pathname //url主机名后的部分
port //url的端口
protocol //url使用的协议
search //执行get请求的url ?号后的部分,查询字符串
assign() //导航到新页面,跟href一样,他们都会在历史中记录
replace() //导航到新页,但是于href跟assign()不同,它不会在历史中记录
reload() //重载当前页面,有一个参数,true表示从服务器重新载入,false表示从缓存载入
toString() //显示当前的url
Screen对象
availHeight //窗口可以使用的屏幕高度(像素计)
availWidth //窗口可以使用的屏幕宽度(像素计)
Width //屏幕的宽度
Height //屏幕的高度
colorDepth //用户表示颜色的位数,大多数采用32位
如果要确定新窗口的大小,可以使用availHeight和availWidth
window.moveTo(0,0);
window.resize(screen.availWidth,screen.availHeight);
浏览器中的javascript差不多就介绍完了,下一篇介绍 javascript中的事件