基本上许多动态的功能需要借助于服务器与浏览器的交互才能实现,因此在学习JS/VB或FLASH的AS之前最好了解一下HTTP协议。
下面来谈谈JS,它是一个客户端的脚本语言,可以包含在HTML文件中,当下载到用户浏览器时,浏览器会调用其中的脚本,完成众多的功能。在这里可以找到关于JS的快速入门:http://www.w3school.com.cn/js/index.asp/
为了学习JS,我们先来搭建一个良好的开发平台,像Chrome和Firefox本身都带了相应的编译器和编辑器,不需要特别IDE,不过初学者由于对代码陌生,建议使用一些自动完成的编辑器更好的帮助理解和快速的入门写代码。这里推荐使用http://www.aptana.com 出的aptana studio,它具备html,css,js的混合着色功能和代码自动补全,并支持像JQuery等一些类库。可以直接下载软件,不过其支持eclipse的插件,因此只需要把http://download.aptana.com/tools/studio/plugin/install/studio地址放到Eclipse的安装新软件的URL里,eclipse就可以自动的安装相应的插件,这样就可以简单的打造一个完美在的IDE。
JS的语法格式与通用的C/JAVA没有什么差别,只是JS是一种动态的语言,变量不需要声明就可以使用,应该说其与Python更像。此外,关于变量的生存期,对于函数中定义的局部变量是在函数执行完就销毁了,而在函数外定义的全局变量,则在页面关闭时才销毁。
有差别的地方
函数定义:function fun(arg1,...) {}
JS的基本对象有:String,Date,Array,Boolean,math,regExp
JS最重要的是需要操作HTML的DOM对象,通过 JavaScript,可以重构整个 HTML 文档。可以添加、移除、改变或重排页面上的项目。下面要详细介绍DOM。
DOM 被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3):
Core DOM 定义了一套标准的针对任何结构化文档的对象
XML DOM 定义了一套标准的针对 XML 文档的对象
HTML DOM 定义了一套标准的针对 HTML 文档的对象。
根据 DOM,HTML 文档中的每个成分都是一个节点。DOM 是这样规定的:
- 整个文档是一个文档节点
- 每个 HTML 标签是一个元素节点
- 包含在 HTML 元素中的文本是文本节点
- 每一个 HTML 属性是一个属性节点
- 注释属于注释节点
如果你做过XML的DOM,应该对这个结构不陌生。通过DOM,JS可以访问文档中的所有节点。
- nodeName(节点名称)
- nodeValue(节点值)
- nodeType(节点类型)
- 元素节点的 nodeName 是标签名称
- 属性节点的 nodeName 是属性名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
注释: nodeName 所包含的 XML 元素的标签名称永远是大写的
结点值
对于文本节点,nodeValue 属性包含文本。
对于属性节点,nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
结点类型
nodeType 属性可返回节点的类型。最重要的节点类型是:
元素类型 | 节点类型 |
---|---|
元素 | 1 |
属性 | 2 |
文本 | 3 |
注释 | 8 |
文档 | 9 |
这些元素可以通过getElementbyId()或getElementbyTag()来获取。
在介绍完这些基本概念之后,就是具体的各种HTML元素所映射的对象,每种对象都有自己的方法和属性,我们不在这里罗列所有条目,下面的链接可以查找到所有的相关细节。http://www.w3school.com.cn/htmldom/htmldom_reference.asp
Browser 对象参考手册
点击以下链接,可以获得以下对象的更多信息,包括它们的集合、属性、方法以及事件。其中包含大量实例!
对象 | 描述 |
---|---|
Window | JavaScript 层级中的顶层对象,表示浏览器窗口。 |
Navigator | 包含客户端浏览器的信息。 |
Screen | 包含客户端显示屏的信息。 |
History | 包含了浏览器窗口访问过的 URL。 |
Location | 包含了当前 URL 的信息。 |
HTML DOM 对象参考手册
请点击下面的链接,学习更多有关对象及其集合、属性、方法和事件的知识。其中包含大量实例!
对象 | 描述 |
---|---|
Document | 代表整个 HTML 文档,可被用来访问页面中的所有元素 |
Anchor | 代表 <a> 元素 |
Area | 代表图像映射中的 <area> 元素 |
Base | 代表 <base> 元素 |
Body | 代表 <body> 元素 |
Button | 代表 <button> 元素 |
Event | 代表某个事件的状态 |
Form | 代表 <form> 元素 |
Frame | 代表 <frame> 元素 |
Frameset | 代表 <frameset> 元素 |
Iframe | 代表 <iframe> 元素 |
Image | 代表 <img> 元素 |
Input button | 代表 HTML 表单中的一个按钮 |
Input checkbox | 代表 HTML 表单中的复选框 |
Input file | 代表 HTML 表单中的文件上传 |
Input hidden | 代表 HTML 表单中的隐藏域 |
Input password | 代表 HTML 表单中的密码域 |
Input radio | 代表 HTML 表单中的单选按钮 |
Input reset | 代表 HTML 表单中的重置按钮 |
Input submit | 代表 HTML 表单中的确认按钮 |
Input text | 代表 HTML 表单中的文本输入域(文本框) |
Link | 代表 <link> 元素 |
Meta | 代表 <meta> 元素 |
Object | 代表 <Object> 元素 |
Option | 代表 <option> 元素 |
Select | 代表 HTML 表单中的选择列表 |
Style | 代表单独的样式声明 |
Table | 代表 <table> 元素 |
TableData | 代表 <td> 元素 |
TableRow | 代表 <tr> 元素 |
Textarea | 代表 <textarea> 元素 |