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
javascript学习总结1JavaScript中的对象分为3种1JavaScript的内置对象常用的有DateArrayStr…
脚本语言:1、介于html与java,php之间的语言,能力比java,php弱,比html强,单独使用起不了大作用,需要配合其他…
一JavaScriptJavaScript被设计用来向HTML页面添加交互行为JavaScript是一种脚本语言脚本语言是一种轻量…
JavaScript学习总结1234567JavaScript概述3数据类型3数字3字符串3布尔类型4函数4对象4a创建JavaS…
Netscape公司为了扩展其浏览器的功能开发了一种名为LiveScript的脚本语言Sun公司联合宣布把其更名为Javascri…
1、JavaScript变量可以使用var事先进行声明,也可以用赋值语句隐藏声明。对于一个变量,它存在指的是它拥有值。检查一个变量…
JavaScript总结PreviousPageNextPage现在您已经学习了JavaScript,接下来该学习什么呢?Java…
Document对象内容集合document文挡对象-JavaScript脚本语言描述——————————————————————…
一javascript的组成Javascript是一门轻量级的脚本编程语言由ECMAScriptDOMBOM这三部分组成1ECMA…
Javascript之jQuery学习总结三个学期来我小组按照自己的分工各自展开了自己的学习与实践而作为小组成员之一我主要负责网页…
脚本语言:1、介于html与java,php之间的语言,能力比java,php弱,比html强,单独使用起不了大作用,需要配合其他…