javascript学习总结
1.JavaScript中的对象
分为3种。
(1)JavaScript的内置对象
常用的有Date,Array,String,Math,对象,这些都是经常会用到的,一定要掌握好。
(2)文档对象模型(Document Object Model,DOM)
这个对象表示了当前浏览器的多个组件和当前的HTML文档。DOM我认为是JS中最重要的一个对象,通过他可以获得任何一个HTML元素,1.通过document.form1.name得到,这种是浏览器支持的dom对象,不属于js,2.咱们经常用的是document.getElementById("name"),这种是w3c组织制定的一级DOM对象标准。
(3)自定义对象
我总认为js的自定义对象没必要用,如果你是按照面向对象的编程思想,那么应该用Java,而不是用js的对象。
2.DOM对象,history以及location
为了操控浏览器和文档,js使用分层的父对象和子对象,这就是DOM。这些对象的组织类似一个树形结构,并表示一个Web文档的所有内容组件。
Window是所有对象的父对象
document对象几种常用方法
document.URL:指明了文档的URL地址。不可改变,如果需要给用户不同的地址应该用window.location对象
document.write:列出了当前页面的标题
document.referrer:用户所浏览的上一个页面的URL地址。
document.lastModified:文档最后修改日期
document.cookie 允许读取和设置一个文档的cookie
history对象的几种常用方法
history.length();保存了历史列表的长度
history.go();打开历史列表中一个网址,要指定一个正数或者负数。
history.back();历史列表中的前一个网址,相当于后退按钮。
historay.forward();历史列表中的后一个网址,相当于后退按钮。
location对象的几种常用方法
location.protocol:网址的协议部分---http
location.hostname:网址的主机名---www.aaa.com
location.port:网址的端口号---80
location.pathname:网址的文件名部分---tese.do
location.search:网址的查询部分---lines=1
location.hash:网址中使用的anchor名---#anchor
location对象的两个方法
location.reload() 刷新当前文档,浏览器中的刷新按钮。
location.replace()替换一个新的位置
3.JavaScript中的变量名称,表达式,运算符,数据类型
变量名称,表达式,运算符,和Java中差别不大,就不多加叙述了
数据类型
1.数字:整数,浮点数
2.布尔值:真,假。
3.字符型:字符串对象
4.空值,null。
parseInt()----将一个字符串转换为整数值。
parseFloat----将一个字符串转换为浮点小数
字符串中有一些常用的方法,如subString,charAt等,与Java中的很像,就不叙述了
4.JavaScript中的函数
函数定义的最佳位置是文档中的
部分,因为部分语句会首先执行。
函数中可以带有参数列表,但是参数都没有类型,也不需要在定义函数的时候声明返回值,想有返回值的话,直接return即可,和Java不同。
如:
Js代码
1. function greet(who){
2. alert(“Gadsden” + who);
3. return “asdasd”;
4. }
5.JavaScript中的对象
他和Java中的对象很相似,之前我曾说不需要用到他,用Java的就够了,昨天看了一个人的文章,说你要想用好一门语言,就要尊重这门语言,就像现在的JavaScript,如果简单的把他当做一门脚本语言,那可能只能停留在入门和初级阶段。
如何扩展内置对象
使用prototype关键字,可以向现有对象中添加属性和方法。
例如:
Js代码
1.
这样就为String对象又新增添了一个方法,heading,并指明每次调用heading的时候,他都会去调用addHead方法。
6.JavaScript中的Data Math等内置对象
他们与Java中的又是很相似,不多介绍了,有一个关键字需要说说,就是with。
with关键字制定一个对象,后面跟着括在大括号中的一大块语句。对于块语句中的每一条语句,没有指定对象的属性都将被假定为该对象的属性。
如:
Js代码
1.
注:这里不用在定义a的时候带有类型信息,如String a = “niechao”;这样会报错,如果非要加上,也只能是var a = “niechao”;
7.JavaScript中使用第三方程序库
每个程序库都有自己的名字,一般的名字是xxx.js,包含到你要用的jsp页面里就行了。
<
Js代码
1. script type="text/javascript" language="JavaScript" src="prototype.js">
现在流行的有几种,比如:ext,jquery,dojo等,老一辈的也有prototype这些。选一种合适自己的就行了,自己用着顺手的,可以满足项目需要的,我暂时选的而是jquery。
8.JavaScript中 的事件相应
不必使用标签来定义事件处理函数
可以不在HTML中指定时间处理函数,而是使用JavaScript把一个函数指定为事件处理函数
1.首先找到元素的对象,使用obj = document.getElementById("aa")
2.定义一个函数,把该函数指定为事件处理函数,
Js代码
1. function mousealert(){
2. alert("");
3. }
4. bj.onclick = mousealert;
JavaScript中由属性,方法,事件组成对象,许多常用的事件处理函数都是document对象中的属性。
9.JavaScript中使用event对象
要是用event对象,可以把他传递给事件处理程序函数。
Js代码
1.
2. function getKey(e){
火狐和IE,对event的处理方式不同,火狐是直接自动传递的,IE是将最近发生的事件存放在window.event对象中。
所以很多函数的开头,一般都是
Js代码
1. function getKey(e){
2. if(!e) e=window.event;
3. }
它检查了是否已经定义了e,若未定义,它将获取window.event对象,并将其存入e,这样确保任何一个浏览器中都会得到一个有效的event对象。
以下是IE4.0及更高版本的一些常用event对象属性
1.event.button:按下的鼠标键。对于鼠标左键,属性值为1,对于鼠标右键,属性值为2
2.event.clientX:事件发生位置的x轴坐标(列,以像素为单位)
3.event.clientY:事件发生位置的y轴坐标(行,以像素为单位)
4.event.altkey:该标志表示事件发生时是否按下Alt键
5.event.ctrlkey:该标志表示事件发生时是否按下Ctrl键
6.event.shiftkey:该标志表示事件发生时是否按下Shift键
7.event.keyCode:所按键的键码(用Unicode表示)
8.event.srcElement:元素出现的对象
以下是Netscape4.0及更高版本的一些常用event对象属性
1.event.modifiers:表示事件发生时按下了哪一个修饰键(Shift,Ctrl,Alt)。该属性是一个整数,表示不同键的2进制的组合
2.event.pageX:事件在网页中x轴坐标
3.event.pageY:事件在网页中y轴坐标
4.event.which:键盘事件键码,或者鼠标事件按下的键
5.event.button:按下的鼠标按键,其原理与IE一样,只是左键的属性值为0,右键为2
6.event.target:元素出现的对象
10.JavaScript中使用鼠标事件
鼠标事件中的几个函数(他们都属于document对象)
1.onMouseOver:鼠标指针移动到链接上时被调用
2.onMouseOut:鼠标移出对象边缘时被调用
3.onMouseMove:只要鼠标移动,就会触发(浏览器在,默认情况下不支持,需要使用事件捕捉技术)
4.onClick:鼠标按键何时被单击,如果onClick事件处理程序返回false,则链接不会被打开(如果对象是一个链接)
Js代码
1. Click here
5.onDblClick: 鼠标按键何时被双击
6.onMouseDown:按鼠标按键时
7.onMouseUp:松开鼠标按键时
注意:单击鼠标左键,会发生3个事件,onMouseDown,onMouseUp,onClick。
观察鼠标点击超链接时,触发的对象:
Html代码
1.
2.
Simple jsp page 3.
4.
5.
8.
9.
10.
Js代码
1. function mousestatus(e){
2. if(!e) e=window.event;
3. btn = e.button;
4. whichone = (btn<2)?"left":"right";
5. message=e.type+":"+whichone+"\\n";
6. document.form1.info.value+=message;
7. }
8. obj = document.getElementById("testlink");
9. obj.onmousedown = mousestatus;
10. obj.onmouseup = mousestatus;
11. obj.onclick = mousestatus;
12. obj.ondblclick = mousestatus;
11.JavaScript中使用键盘事件
可以通过event知道用户按下的是哪个键,它会在事件发生时被传递到事件处理函数,其中Firefox中存在event.which中,而IE存在event.keyCode中
如果想处理实际的字符而非键码,可以使用函数转换
如:Key = String.fromCharCode(event.which);
因为两种浏览器支持的不同,所以要写成通用的,可以这样写:
Js代码
1. function DisplayKey(e){
2. if(e.keyCode) keycode =e. keyCode;
3. else keycode = e.which;
4. chacater = String.fromCharCode(keycode);
5. k = document.getElementById(“keys”);
6. k.innerHTML += chacater;
7. }
初次看到innerHTML就是在这里,以前做网站的时候,也用过,但是不知道这是什 么意思,现在自己学习,终于又碰上了,innerHTML代表某dom对象中HTML元素从 开始标签 直到 结束标签中的HTML文档。程序中的keys就是dom文档的id,在JSP中, 有类似这样一段代码:
Html代码
1.
innerHTML就代表p元素所要显示的HTML文档的内容
12.JavaScript中的onLoad和onUnload
当前页面(包括所有图像)完成从服务器上的加载时,就会发生onLoad
由于onLoad事件发生在HTML文档加载和显示完毕之后,所以不能在onLoad事件处理程序中使用document.write或document.open,否则会覆盖当前文档。
下面是一个一放到超链接,就显示名字的小例子
HTML代码如下
Html代码
1.
6.
7.
Js代码
1. linkdesc.js
2. function cleardesc() {
3. d = document.getElementById("description");
4. d.innerHTML = "";
5. }
6. function hover(e) {
7. if (!e) var e = window.event;
8. // which link was the mouse over?
9. whichlink = (e.target) ? e.target.id : e.srcElement.id;
10. // choose the appropriate description
11. if (whichlink=="order") desc = "Order a product";
12. else if (whichlink=="email") desc = "Send us a message";
13. else if (whichlink=="complain") desc = "Insult us, our products, or our families";
14. // display the description in the H2
15. d = document.getElementById("description");
16. d.innerHTML = desc;
17. }
18.
19. orderlink = document.getElementById("order");
20. orderlink.onmouseover=hover;
21. orderlink.onmouseout=cleardesc;
22. emaillink = document.getElementById("email");
23. emaillink.onmouseover=hover;
24. emaillink.onmouseout=cleardesc;
25. complainlink = document.getElementById("complain");
26. complainlink.onmouseover=hover;
27. complainlink.onmouseout=cleardesc;
其中e.target代表元素所对应的对象,e.target.id代表对象的DOM对象的id.
如果同时定义了onKeyDown和onKeyPress事件处理函数,则先调用onKeyDown,如果返回true,则再调用onKeyPress
13.JavaScript中的window对象
Window对象的属性
closed 窗口是否关闭
defaultStatus 窗口状态栏的默认文本
document Document对象
history History对象
length Window对象的frame个数
location Location对象
name Window对象的名称
opener 打开当前Window的窗口的引用
parent 父窗口
self 返回当前窗口的引用
status 窗口状态栏文本
top 最顶层窗口
Window对象的方法
alert([Message]) 显示带有警告信息Message的窗口,并有“确定”按钮
blur() 移除本窗口的焦点
clearInterval(iIntervalID) 取消先前用setInterval方法开始的标识为iIntervalID的间隔事件
clearTimeout(iTimeoutID) 取消先前用setTimeout方法开始的标识为iTimeoutID的超时事件
close() 关闭当前窗口
confirm([message]) 显示带有确认信息message的窗口,有“确定”和“取消”按钮
createPopup() 创建弹出窗口,返回该窗口对象的引用
focus() 使本窗口获得焦点
moveBy(x,y) 将窗口的位置移动到指定的x和y偏移值
moveTo(x,y) 将窗口左上角的屏幕位置移动到指定的x和y位置
open() 打开新窗口,显示指定的页面
print() 打印与窗口关联的文档
prompt([message][,defaultValue]) 显示提示对话框,带有提示消息message和默认值defaultValue的输入框,返回用户输入的字符串
resizeBy(x,y) 更改窗口的当前位置缩放指定的x和y偏移量
resizeTo(x,y) 将窗口的大小更改为指定的宽度值x和高度值y
scrollBy(x,y) 将窗口滚动x和y偏移量
scrollTo(x,y) 将窗口滚动到指定的x和y偏移量
setInterval(code,ms[,language]) 每经过ms毫秒后执行代码code,language指定语言属性。返回整形标识,以便clearInterval方法取消该定时器
setTimeout(code,ms[,language]) 经过ms毫秒后执行代码code,language指定语言属性。返回整形标识,以便clearTimeout方法取消该定时器
14.JavaScript中利用表单获取数据
Javascript form对象
name 返回表单的名称,也就是