javascript学习总结

Javascrip基础与实践教程 (电子工业出版社)

一、 javascrip语言概述

1. ECMAScript是许多软件厂商对JavaScript的统一标准;

2. 服务器端和客户端JavaScript共享相同的核心语言。但也有些不同,如客户端封装了额外的特性,只与在浏览器中运行JavaScript有关的预定义对象。服务器端JavaScript则封装了只与在服务器上运行JavaScript有关的预定义对象和函数; 3.

二、 Javascrip程序设计基础

1. 注释: html的为<!-- ? ;javascript为“//”和“/* */”

2. 数据类型:基本数据类型(数值型、字符串型和布尔型、空值null、未定义undefined)和引用数据类型(数组、函数、对象等);

3. null一般对对象;undefined:(1)使用了一个未声明的变量(2)已经声明但还没有赋值的变量(3)使用了并不存在的对象属性时;

4. 类别转换:(1)基本数据类型转换 String()、Number()、Boolean();(2)提取整数parseInt(numString,[radix]);(3)提取浮点数的parseFloat(numString)方法;(4)计算表达式eval(codeString);

5. 流程控制:for….in语句;with(对象){ 语句组}语句;

6.

7.

8.

三、 面向对象的Javascrip

目前对象编程分为面向对象(全部对象封装、继承、多态)和基于对象(以部分对象的特性使用对象);

JavaScript是基于对象的;

JavaScript对象的属性和方法可以灵活的添加即创建完对象以后,可以添加和删除对象的属性和方法;

1. 创建对象(1)使用new运算符和构造函数内置Oject(),Array(),Date()

1

Var car = new Object();

Car.color = “white”;

2. 通过对象直接量创建对象

Var myobject={属性名1:属性值1,属性名n:属性值n};

3. 通过函数(构造函数)创建对象

4. 原型对象(prototype)即对象的静态的

5. 一个原型对象能够被多个对象实例继承,分为读写两种方式(1)、对于读:在读对象o

的属性P时,JavaScript首先检查对象0是否具有一个名为P的属性,如果o没有这个属性,JavaScript就会去再检查O的原型对象是否具有这个属性时,就用这个继承机制使用原型的属性值,但是如果该对象拥有与原型对象重名的属性时,就不再继承原型对象的属性,而是使用自己定义的属性;(2)对于写:JavaScript并不使用原型对象,因此,属性的继承只发生在读属性值时,而在写属性值时不会发生;

6.

7.

8.

9.

10.

11.

四、 JavaScript

五、 JavaScript

JavaScript

六、 Css样式

1. 样式定义的格式

Selector {proterty1:value;property2:value2;…..}

Selector为选择器,后面的为选择器的属性和值;

选择器的分类:

? HTML标记(如段落标记p)

p{padding:0;margin:0 0 1.5em 0;}

? 类选择器(如类.clearH)

.clearH{zoom:1;}

? ID选择器(如#header)

#header{width:980px;height:89px;auto;background:url(../images/bg_header.gif) no-repeat 0 0;}

? 组合选择器:多个选择器定义同一个样式,用逗号分隔。(如HTML标记

dl,dd,dt,ul,ol,li的样式相同)

2

dl,dd,dt,ul,ol,li{padding:0;margin:0;list-style:none;}

? 伪(虚)类选择器:一个HTML元素的不同状态和其包括的内容定义的一个方法,

最好的顺序:Link,visited,hover,active

a:hover{color:#b40000;text-decoration:underline;}

a:visited{ color: #666; text-decoration: none; }

? 样式中嵌入样式:一种选择器中包括另一种选择器(分隔符为空格)

(1)#header 空格 .login 空格 input{border:1px solid #c3c3c3;margin-left: 2px;} ID=header里面的login类里面的input标记,才能应用此样式;

(2)Table.tab_1 空格 td#right { text-align: right; }

table标记并且类为tab_1,里面的td并且使用ID=right,才能应用此样式;

#footer table td a:hover,#footer table td a:active{color:#509ed0;padding:0 3px;text-decoration:underline;}

注:选择器中包括“空格”则表示父子关系(即包含关系)

2. 使用样式的优先级(由高到低)

? 内嵌样式表(在HTML标记里面)

? 嵌入样式表(在HTML的<head></head>里面直接定义样式)

? 外部样式表(在HTML的<head></head>里面利用<link>引入外部样式文件) ? 浏览器默认样式

七、 JavaScript安全手册

1、获取对象元素的方法

NN3+和IE4+支持的方法

(1)document.元素名称(name).属性

如:document.imageName.src

(2) document.元素s[index].属性

如:document.images[0].src

(3)document.元素s[imgeName].src

如:document.images[imageName].src

W3C DOM中访问对象的方法:

(1) document.getElementById(imageId).src;

document.getElementByName(imageName).src;

document.getElementsByTagName( "input ");//获得指定标记的对象

在IE4+中

(2) document.all.元素名.属性

如:document.all.imageName.src;

document.all[“(imageName)”].src;

3

2、第九章

anchor 对象和link对象都对应<a name="linkName" ></a>标记

获得方法

var iAnchor=document.anchors;

var MyLink=document.links;

3、第十章 Image、area和map对象

<img name="MyImg" src="target.jpg" border=1></img>

图片区域映射用area对象和map对象,前者为目标图片中的特定区域,在该区域响应用户特定操作;而后者为area对象元素的容器;标记一组area对象元素。Area对应超链的所有属性;

<img src ="planets.gif" width ="290" height ="252" alt="Planets" usemap ="#planetmap"/> <map id ="planetmap" name="planetmap">

<area shape ="rect" coords ="0,0,164,252" href ="sun.html" target ="_blank" alt="Sun" /> <area shape ="circle" coords ="180,116,6" href ="mercur.html" target ="_blank" alt="Mercury" /> <area shape ="circle" coords ="248,116,16" href ="venus.html" target ="_blank" alt="Venus" /> </map>

Img元素用usemap属性来与map元素建立联系;

4、第十一章 style和styleSheet对象

样式表导入方法

(1) 直接通过<style>标记对包含并嵌入到目标文档中。

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>Sample Page!</title>

<style type="text/css">

body { background: white}

a:link { color: purple}

a:visited { color: black}

a:hover { color: red}

</style>

</head>

(2) 通过@import选择符

<style type="text/css">

@import url(MyStyle.css);

</style>

(3) 使用link关键字链接外部样式表

<link href="/images/style.css" rel="stylesheet" type="text/css" />

REL:定义链接的样式表文件和当前文档之间的关系。

TYPE:在服务器端将该样式表文件通过Content_type内容格式返回给客户端;

用DOM对象的styleSheets对象数组访问html中的style元素里的内容;style对象提供更多的属性和方法用于设置指定HTML元素的样式;

文档中的某元素(如<link>、@import选择符等)将样式表引入该文档后,将创建与之对应的styleSheet对象,而整个文档的所有styleSheet对象构成styleSheets对象数组; <style>标记中的每个定义为一个规则

4

即rule对象且rules对象数组为rule对象的容器(IE4);

即cssRule对象且cssRules对象数组为rule对象的容器(W3C DOM和NN6规范);

5、第十二章 定位对象(div和span标记)和嵌入对象(applet\embed\object等元素对象)

定位对象:

HTML引入div对象时,均通过style关键字引入部分(或全部)属性;

Div和span采用层的方式占用文档对应位置的一块区域;其中的区别为span对象默认的显示模式为inline即在同一行显示;

嵌入对象:

<applet>元素:对应Java Applet小程序

<embed>元素:W3C规范用<object>元素替代,引入声音、视频和插件程序的自定义MIME类型;

6、第十三章 HTML元素对象

表单数据传送的方式:

(1) 完全引用

"ALL Explorer ";

“document.MyFormB.name :"+document.MyFormB.name+"\n";

"document.forms[1].name :"+document.forms[1].name+"\n";

" document.forms[''MyFormB''].name :"+document.forms["MyFormB"].name+"\n\n";

"IE4+ :\n";

"document.all.MyFormB.name :"+document.all.MyFormB.name+"\n\n";

"W3C :\n";

" document.getElementById(''MyFormB'').name : +document.getElementById("MyFormB").name+"\n";

(1) 使用this.form最为参数传递

Onchange = “CheckDate(this.form)”

Function CheckDate(tagetForm)

{

Var myvalue = tagetForm.MyText.value;

}

(2) 直接传递值得方式

Onchange = “CheckDate(this)”

或者Onchange = “CheckDate(this.value)”

This:表示当前的对象;

7、第十九章 javascript与插件通信

Javascrip-〉flash插件

5

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

CODEBASE="/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"

WIDTH="400" HEIGHT="180" ID="myFlash">

<PARAM NAME=movie VALUE="MyFlash.swf">

<PARAM NAME=quality VALUE=high>

<PARAM NAME=bgcolor VALUE=#c0c0c0>

<EMBED SRC="MyFlash.swf" quality=high bgcolor=#c0c0c0 WIDTH="400" HEIGHT="180" NAME="myFlash" swLiveConnect="true" TYPE="application/x-shockwaveflash"

PLUGINSPAGE="/go/getflashplayer">

</EMBED>

</OBJECT>

Flash -> javascript

通过两个函数

(1) getURL(“”,”_bank”);//弹出新窗体

或者

on(release)

{

GetURL(“javascript:AlertMyFunction(\”jhx\”)”);//调用javascript的函数AlertMyFunction(name)

}

或者

on(release)

{

GetURL(“javascript:alert(\”Welcom jhx \”)”);

}

(3)首先触发flash内部的fsCommand()函数时就会调用javascript脚本定义的函数flashID_DoFSCommand()该函数包含目标Flash动画的HTML文档内,其中flashID为嵌入动画的embed元素的name 属性或者object对象的id属性;

-- 常规选项 --

-? 显示此帮助文本。

-W 向导模式。(如果未指定其他参数,则默认为此模式。)

-- SQL 连接选项 --

-S <server> 要使用的 SQL Server 实例(SQL Server 7.0 及更高版本)。

-U <login id> 用于进行身份验证的 SQL Server 用户名;需要 -P 选项。

-P <password> 进行身份验证时使用的 SQL Server 密码;需要 -U 选项。

-E 使用当前 Windows 凭据进行身份验证。

-C <connection string>

连接字符串。不指定用户名、密码和服务器名称,而是指定 SQL Server

6

连接字符串。该字符串不得包含数据库名称,除非另行指定。 -sqlexportonly <filename>

生成用于添加或移除指定的功能、但不执行实际操作的 SQL 脚本文件

。可与以下选项一起使用: -A、-R、-ssadd 和 -ssremove。

-- 应用程序服务选项 --

-A all|m|r|p|c|w 添加对某个功能的支持。可同时指定多个值。例如:

-A mp

-A m -A p

all: 所有功能

m: 成员资格

r: 角色管理器

p: 配置文件

c: 个性化设置

w: SQL Web 事件提供程序

-R all|m|r|p|c|w 移除对一个功能的支持。可同时指定多个值。例如:

-R mp

-R m -R

all : 所有功能以及由这些功能共享的所有公共表和存储过程 m: 成员资格

r: 角色管理器

p: 配置文件

c: 个性化设置

w: SQL Web 事件提供程序

-d <database> 用于应用程序服务的数据库名称。如果未指定任何数据库名称,则使用 默认数据库“aspnetdb”。

-Q 安静模式;移除功能时不显示确认对话框。

-- SQL 缓存依赖项选项(用于 SQL 7.0 和 2000) --

-d <database> 用于 SQL 7.0 和 SQL 2000 中的 SQL 缓存依赖项的数据库名称。也可 以改为选择使用带有 -C

选项的连接字符串指定该数据库。(必需)

-ed 为 SQL 缓存依赖项启用数据库。

-dd 为 SQL 缓存依赖项禁用数据库。

-et 为 SQL 缓存依赖项启用表。需要 -t 选项。

-dt 为 SQL 缓存依赖项禁用表。需要 -t 选项。

-t <table> 要为 SQL 缓存依赖项启用或禁用的表的名称。需要 -et 或 -dt 选项 。

-lt 列出为 SQL 缓存依赖项启用的所有表。

-- 会话状态选项 --

-ssadd 添加对 SQLServer 模式会话状态的支持。

-ssremove 移除对 SQLServer 模式会话状态的支持。

-sstype t|p|c 会话状态支持的类型:

t:

临时。会话状态数据存储在“tempdb”数据库中。用于管理会话的存储 过程安装在“ASPState”数据库中。如果重新启动

7

SQL,则不保持数据。(默认)

p: 保持。会话状态数据和存储过程都存储在“ASPState”数据库中。 c: 自定义。会话状态数据和存储过程都存储在自定义数据库中。必须 指定该数据库的名称。

-d <database> -sstype 为“c”时使用的自定义数据库的名称。

八、 实际使用总结

1、常用对象 Document对象属性

代码 1. document.title //设置文档标题等价于HTML的<title>标签

2. document.bgColor //设置页面背景色

3. document.fgColor //设置前景色(文本颜色)

4. document.linkColor //未点击过的链接颜色

5. document.alinkColor //激活链接(焦点在此链接上)的颜色 6. document.vlinkColor //已点击过的链接颜色

7. document.URL //设置URL属性从而在同一窗口打开另一网页

8. document.fileCreatedDate //文件建立日期,只读属性

9. document.fileModifiedDate //文件修改日期,只读属性

10. document.fileSize //文件大小,只读属性

11. document.cookie //设置和读出cookie

12. document.charset //设置字符集 简体中文:gb2312

Document对象方法

代码

1.

2.

3.

4.

5. document.write() //动态向页面写入内容 document.createElement(Tag) //创建一个html标签对象 document.getElementById(ID) //获得指定ID值的对象 document.getElementsByName(Name) //获得指定Name值的对象 document.getElementsByTagName( "input ");//获得指定标记的对象

8

images集合(页面中的图象)

a)通过集合引用

代码 1.

2.

3.

4. document.images //对应页面上的<img>标签 document.images.length //对应页面上<img>标签的个数 document.images[0] //第1个<img>标签 document.images[i] //第i-1个<img>标签

b)通过nane属性直接引用

代码

1. <img name="oImage">

2. document.images.oImage //document.images.name属性 c)引用图片的src属性

代码

1. document.images.oImage.src //document.images.name属性.src d)创建一个图象

代码

1. var oImage

2. oImage = new Image()

3. document.images.oImage.src="/1.jpg"

同时在页面上建立一个<img>标签与之对应就可以显示

代码 1.

2.

3.

4. 5.

6.

7.

8. <html> <img name=oImage> <script language="javascript"> var oImage oImage = new Image() document.images.oImage.src="/1.jpg" </script> </html>

forms集合(页面中的表单)

a)通过集合引用

代码

9

1.

2.

3.

4.

5.

6. document.forms //对应页面上的<form>标签 document.forms.length //对应页面上<form>标签的个数 document.forms[0] //第1个<form>标签 document.forms[i] //第i-1个<form>标签 document.forms[i].length //第i-1个<form>中的控件数 document.forms[i].elements[j] //第i-1个<form>中第j-1个控件 b)通过标签name属性直接引用

代码

1. <form name="Myform"><input name="myctrl"></form>

2. document.Myform.myctrl //document.表单名.控件名 代码 1. <html>

2. <!--Text控件相关Script-->

3.

4.

5.

6.

7.

8. <form name="Myform"> <input type="text" name="oText"> <input type="password" name="oPswd"> <form> <script language="javascript"> //获取文本密码框的值

9. document.write(document.Myform.oText.value)

10. document.write(document.Myform.oPswd.value)

11. </script>

12. </html>

代码 1. <html>

2. <!--Select控件相关Script-->

3. <form name="Myform">

4. <select name="oSelect">

5. <option value="1">1</option>

6. <option value="2">2</option>

7. <option value="3">3</option>

8. </select>

9. </form>

10. <script language="javascript">

11. //遍历select控件的option项

12. var length

13. length=document.Myform.oSelect.length

14. for(i=0;i<length;i++)

10

15. document.write(document.Myform.oSelect[i].value)

16. </script>

17. <script language="javascript">

18. //遍历option项并且判断某个option是否被选中

19. for(i=0;i<document.Myform.oSelect.length;i++){

20. if(document.Myform.oSelect[i].selected!=true)

21. document.write(document.Myform.oSelect[i].value)

22. else

23. document.write("<font color=red>"+document.Myform.oSelect[i].value+"</fo

nt>")

24. }

25. </script>

26. <script language="javascript">

27. //根据SelectedIndex打印出选中的option

28. //(0到document.Myform.oSelect.length-1)

29. i=document.Myform.oSelect.selectedIndex

30. document.write(document.Myform.oSelect[i].value)

31. </script>

32. <script language="javascript">

33. //动态增加select控件的option项

34. var oOption = document.createElement("OPTION");

35. oOption.text="4";

36. oOption.value="4";

37. document.Myform.oSelect.add(oOption);

38. </script>

39. <html>

代码

1. <Div id="oDiv">Text</Div>

2. document.all.oDiv //引用图层oDiv

3. document.all.oDiv.style

4. document.all.oDiv.style.display="" //图层设置为可视

5. document.all.oDiv.style.display="none" //图层设置为隐藏

/*document.all表示document中所有对象的集合

只有ie支持此属性,因此也用来判断浏览器的种类*/

2、

11

相关推荐