Javascript和java的不同之处:
1 javascript是Netscape公司语言,基于对象和事件驱动,java是sun公司,现在是Orcacle公司
2 js是基于对象,java是面向对象
3 js是由浏览器解释并执行,java是由jvm解释并执行
4 js是弱类型的语言,java是强类型
5 js是非严谨的,java是严谨的,javascript运行在客户端
javascript基本语法:
1、 变量
i. 通过var关键字定义变量,该变量可以赋予不同类型的常量
ii. var x=3;
iii. x=”abc”;
iv. 特殊的常量-àundefined
2、 语句
i. If、switch、while、do、while、for
ii. 使用逻辑运算符进行布尔表达式连接的时候,需要是短路与和短路或&&、||
iii. 因为在js中,非0即为true,0为false,非null为true,null为false
iv. Js特有的语句:
v. with(对象){}:可以确定对象所使用的范围,在范围内,可以直接使用指定对象的属性和行为,而不需要用对象 . 的形式调用。简化了对象的操作;
vi. for(变量 in 对象):可以对对象的属性及行为进行遍历;
3、 数组
对于js的数组特点在于:该数组的长度是可变的,相对与java中的集合;
该数组中可以存放的元素类型是可以不同的
定义格式:
Var arr=[3,true,”abc”];
Var arr=new Array( );
Var arr=[[3,1,9],[3,4]];
操作形式和java一样,都是通过for进行遍历,同时也使用了指针思想
4、 函数:通过function关键字定义函数
DOM:document object model----à文档对象模型
Dom三层模型:
Dom1:将html文档封装成对象
Dom2:将xml文档封装成对象
Dom3:将xml文档封装成对象
Dhtml:动态html
Html:将数据进行封装
Dom:将标签封装成对象
Css:负责标签中数据的样式
Javascript:将三个进行融合,通过程序设计方式来完成动态效果的操作;
xmlHttpRequest----àAJAX
dom其实就是将一些标记型的文档以及文档中的内容当成对象,因为可以在对象中定义其属性和行为,可以方便操作这些对象;
html、xhtml、xml:这些都是标记型文档;
DHTML:是多个技术的综合体,叫做动态的html;
标签之间存在着层次关系:
Html
|--head
|--title
|--base
|--link
|--meta
|--style
|--script
|--body
|--div
|--form
|--input
|--select
|--span
|--a
|--table
|--tbody
|--tr
|--td
|--th
|--dl
|--dt
|--dd
通过这个标签层次,可以形象的看做是一个树形结构,加载进内存的是一棵DOM树,这些标签以及标签的数据都是这棵树上的节点;
DOM对已标记型文档的解析有一个弊端就是文档过大,相对消耗资源;对于大型文档可以使用SAX方式解析;
节点之间的关系:父节点、子节点、兄弟节点(上一个兄弟节点--previousSibling、下一个兄弟节点--nextSibling)
获取可以通过节点的层次关系完成,也可以通过document对象完成
getElementById:通过id属性值获取对应的节点对象,如果有多个id值相同,获取到的是第一个id所属对象;
getElementsByName:通过标签的name属性值获取对象,返回的是一堆对象,其实是一个对象数组;
getElementByTagname:
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
var str="";
function listNode(node,level)
{
printInfo(node,level);
level++;
var nodes=node.childNodes;
for(var x=0;x<nodes.length;x++)
{
if(nodes[x].hasChildNodes())
listNode(nodes[x],level);
else
printInfo(nodes[x],level);
}
}
function printInfo(node,level)
{
str+=getSpace(level)+"name:"+node.nodeName+"..type:"+node.nodeType+"..value:"+node.nodeValue+"<br/>"
document.write(str);
}
function getSpace(level)
{
var s="";
for(var x=0;x<level;x++)
{
s+="|--";
}
return s;
}
function getNodes()
{
listNode(document,0);
}
</script>
</head>
<body>
<input type="button"value="演示" οnclick="getNodes()"/>
<div id="divid">
滚滚长江东逝水
</div>
<table>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
</table>
<a href="http://www.sina.com">新浪</a>
<span>石板区域</span>
</body>
</html>