JavaScript
语法
JavaScript主要有两个功能：1、实现客户端表单验证。2、实现页面交互特效。
javascript主要由三部分组成：1、ECMAScript，是javascript的核心。2、DOM-Document Object Model（文档对象模型）。3、BOM-BrowserObject Model(浏览器对象模型)。
javascript的特点：
javascript被设计用来向HTML页面添加交互行为。
javascript是一种脚本语言。
javasrcipt一般用于编写客户端脚本。
javascript是一种解释行语言。
javascript的基本结构：
<script type=”text/javascript”>
<!—javascript语句;--!>
</script>
javascript外部文件为：
作为标签事件：
javascript是一种弱类型语言，可以不声明变量就直接使用。
声明变量的语法var 变量名。
javascript中的数据类型：undefined，未定义。null，空。string，字符串类型。boolean，布尔类型。number，数值类型。
javascript注释：
单行注释//
多行注释/*……*/
javascript支持选择结构和循环结构
使用方法
javascript中的函数：1、转换函数：parseInt()，转换为整数。parseFloat()，转换为浮点型。2、isNaN()判断非数字（is not a number）。3、计算表达式的值。3、接受用户输入内容：prompt();
类型转换函数
function 函数名（参数1，参数2，……）{ 调用函数的方法：
……//语句 1、事件名=”函数名（传递的参数值）”;
return返回值; 2、函数名（传递的参数值）;
}
自定义无参函数
var sumFun = function(num1,num2){
//代码
Return(num1+num2) 调用匿名函数的方法：
BOM模型中window对象常用的属性包括：1、history，有关客户访问过的URL的信息。2、location，有关当前URL的信息。3、screen，有关客户端的屏幕和显示性能的信息。注意：1、属性的使用方法是，window.属性名="某个属性值"。2、因为window是根对象，所以window可以省略，直接写出属性名="某个属性值"。3、window对象的这些属性也是一些对象，这些对象也包括一套属性和方法。
window对象常用的方法：1、prompt()方法，用于接收用户输入的信息。2、alert()方法，他表示弹出一个警告对话框。3、confirm()方法，他表示弹出确认消息框。4、close()方法，他表示关闭某个浏览器的窗口。4、open()方法，他表示打开一个新的窗口。5、setTimeout()方法，表示隔一段时间调用某个函数。6、setInterval()方法，表示设置某个时间间隔，反复调用某个执行函数。
window对象的open方法语法：window.open("弹出窗口的url","窗口名称","窗口特征")
location对象的常用方法和属性：1、href()，设置或返回url。2、reload()方法，表示重新加载，即类似浏览器中的刷新按钮。3、replace()方法，用新的url地址替代原来的url地址。
Date对象的方法：getFullYear(),获取年份。getMonth(),获取月份(0-11)。getDate(),获取号数(1-31)。getHours()，获取小时数(0-23)。getMinutes()，获取分钟数（0-59）。getSeconds()，获取秒数（0-59）。getDay()，获取星期几（0-6）。
定时器函数的用法：1、setTimeout():表示等待某段时间后调用某个函数,（语法：setTimeout("调用的函数名称",等待时间(毫秒)),清除：clearTimeout().2、setInterval()，他表示每隔一段时间反复调用某个函数（多次），语法：setInterval("调用的函数名称"，间隔时间)，清除：clearInterval()。
Dom的组成：1、Core Dom,定义了一套标准的针对任何结构化文档的对象。2、XML DOM，定义了一套标准的针对XML文档的对象。3、HTML DOM，定义了一套标准的针对HTML文档的对象。
访问节点的方法有两种：1、使用getElement系列方式访问节点。2、使用层次关系访问节点（parentNode表示访问父节点，firstChild表示访问第一个字节点，lastChild表示访问最后一个字节点）。
操作节点属性值：1、Core DOM的标准方法（getAttribute("属性名")，获取属性值、setAttribute("属性名","属性值")，设置属性值），2、针对HTML文档的特殊方法（对象名.属性）。
创建元素节点的方法：1、createElement(tagName),表示创建一个元素节点。2、appendChild(nodeName),表示在末尾添加节点。2、insertBefore(newNode,oldNode)，表示在某个元素前插入节点。2、cloneNode(deep),表示克隆节点。
删除节点：removeChild(node)
表格包含的HTML DOM对象：表格Table, 单元格:TableCell,单元格集合：cells[],行：TableRow，行集合：rows[]。
rows[]常用的方法：1、insertRow(index):增加行。2、deleteRow(index):删除行。
TableRow对象的常用属性：1、cells[]，所以单元格形成的数组。2、rowIndex:返回该行在表中的位置。常用方法：insertCell(index)表示在一行中的指定位置插入一个单元格，deleteCell(index)表示删除行中的指定单元格。
TableCell对象的属性：1、cellIndex，返回单元格的位置。2、innerHTML，设置或返回单元格的HTML。3、className，设置或返回元素的class属性。
javascript中创建数组的语法：var 数组名 = new Array(size);
使用for…in循环读取数组中的元素，例如：
Var fruit = new Array(“apple”,”orange”,”peach”,”banana”)；
for(var x in fruit){
document.write(fruit[x]+”<br/>”
}
Array对象的常用属性：length，设置或返回数组中元素的长度。常用的方法：1、join("参数")，将数组拼接成字符串，参数是我们用了连接成字符串的一个分隔符。2、sort(),将数组排序。
Select对象常用属性：options[]，返回一个数组，表示select对象它里面的所有option选项。selectedIndex：被选中选项的索引号。length：选项的总数。Select对象常用的方法：add(Option对象，添加位置）：增加选项。事件：onchange ：当改变选项是触发。
onmouseout：表示鼠标不在上面时。
设置元素的隐藏和显示的方法有：style对象的display属性，值为block表示显示，值为none表示隐藏。style对象的visibility属性，值为visible是表示显示，值为hidden是表示隐藏。两者的区别：使用display后，元素的位置为空，反之位置保留。
制作对联广告：对广告单独设置一个div,设置它的style对象的position对象为absolute，要对其位置进行修改则使用style属性的left和top属性修改。如果进行修改必须要在行内样式进行修改。如果使用外部样式，对于IE浏览器使用currentStyle对象获取或设置元素的坐标。对于其他浏览器则使用getComputedStyle()方法（document.defaultView.getComputedStyle(div对象，null)）。
获取鼠标滚动的距离：scrollTop,表示纵向距离。scrollLeft，表示横向距离。
JavaScript主要有两个功能：1、实现客户端表单验证。2、实现页面交互特效。
javascript主要由三部分组成：1、ECMAScript，是javascript的核心。2、DOM-Document Object Model（文档对象模型）。3、BOM-BrowserObject Model(浏览器对象模型)。
javascript的特点：
javascript被设计用来向HTML页面添加交互行为。
javascript是一种脚本语言。
javasrcipt一般用于编写客户端脚本。
javascript是一种解释行语言。
javascript的基本结构：
<script type=”text/javascript”>
<!—javascript语句;--!>
</script>
例如：
<!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=utf-8" />
<title>Hello World.</title>
<script type="text/javascript">
document.write("Hello World!");
</script>
</head>
<body>
</body>
</html>引入javascript方式三种：1、直接使用<script>标签。2、使用外部js文件。3、直接作为某个标签的事件代码，例如:
<input type="button" value="作为标签的事件代码"οnclick="doucment.write('hello')"/>javascript外部文件为：
<span style="font-size:18px;">// JavaScript Document
document.write("Hello World!");</span><span style="font-size:18px;"><!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=utf-8" />
<title>Hello World.</title>
<script type="text/javascript" src="js/function.js"></script>
</head>
<body>
</body>
</html></span>作为标签事件：
<span style="font-size:18px;"><!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=utf-8" />
<title>作为标签的事件代码</title>
</head>
<body>
<input type="button" value="作为标签的事件代码" οnclick="document.write('Hello World');" />
</body>
</html></span>javascript是一种弱类型语言，可以不声明变量就直接使用。
声明变量的语法var 变量名。
javascript中的数据类型：undefined，未定义。null，空。string，字符串类型。boolean，布尔类型。number，数值类型。
javascript注释：
单行注释//
多行注释/*……*/
javascript支持选择结构和循环结构
<span style="font-size:18px;">// JavaScript Document
var today = new Date();
var weekday = today.getDay();
document.write("今天星期" + weekday);
switch(weekday) {
case 5:
document.write(" finally Day!");
break;
case 6:
document.write(" super Day!");
break;
case 0:
document.write(" sleepy Day!");
break;
default:
document.write(" I'm looking forward to this weeked.");
break;
}</span>使用方法
<span style="font-size:18px;"><!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=utf-8" />
<title>根据星期显示问候语</title>
<script type="text/javascript" src="js/week.js"></script>
</head>
<body>
</body>
</html>
循环结构
// JavaScript Document
var i=0;
document.write("0－20之间的整数（除去3的倍数）有：<br/>");
for(i=0;i<=20;i++)
{
if(i%3==0) //i是3的倍数
{
continue;
}
else
{
document.write(i+"<br/>");
}
}</span><span style="font-size:18px;"><!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=utf-8" />
<title>根据星期几显示问候语</title>
<script src="js/number.js" ></script>
</head>
<body>
</body>
</html></span>javascript中的函数：1、转换函数：parseInt()，转换为整数。parseFloat()，转换为浮点型。2、isNaN()判断非数字（is not a number）。3、计算表达式的值。3、接受用户输入内容：prompt();
类型转换函数
<span style="font-size:18px;"><!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>
</head>
<body>
<script type="text/javascript">
var op1=prompt("请输入第一个数：","")
var op2=prompt("请输入第二个数：","")
var p1=parseInt(op1);
var p2=parseInt(op2);
var result=p1+p2;
document.write(p1+"+"+p2+"="+result);
</script>
</body>
</html></span><span style="font-size:18px;">var number1 = prompt("请输入第一个数字");
var op = prompt("请输入操作运算符");
var number2 = prompt("请输入第二个数字");
if(isNaN(number1) || isNaN(number2)) {
document.write("输入有误！有个数不是数字。");
} else {
if(op != "+" && op != "-" && op != "*" && op != "/") {
document.write("输入有误！操作运算符输入不正确。");
} else {
document.write("运算结果：" + eval(number1 + op + number2));
}
}</span>function 函数名（参数1，参数2，……）{ 调用函数的方法：
……//语句 1、事件名=”函数名（传递的参数值）”;
return返回值; 2、函数名（传递的参数值）;
}
自定义无参函数
<span style="font-size:18px;">function showHello(){
for(var i=0;i<5;i++){
document.write("<h2>Hello World</h2>");
}
}</span><span style="font-size:18px;">function showHello(count){
for(var i=0;i<count;i++){
document.write("<h2>Hello World</h2>");
}
}</span><span style="font-size:18px;"><!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>使用有参函数显示HelloWorld</title>
<script src="js/fun.js"></script>
</head>
<body>
<input name="btn" type="button" value="请输入显示HelloWorld的次数" οnclick="showHello(prompt('请输入显示HelloWorld的次数：',''))"/>
</body>
</html></span>var sumFun = function(num1,num2){
//代码
Return(num1+num2) 调用匿名函数的方法：
}; 直接调用变量名。
BOM模型中window对象常用的属性包括：1、history，有关客户访问过的URL的信息。2、location，有关当前URL的信息。3、screen，有关客户端的屏幕和显示性能的信息。注意：1、属性的使用方法是，window.属性名="某个属性值"。2、因为window是根对象，所以window可以省略，直接写出属性名="某个属性值"。3、window对象的这些属性也是一些对象，这些对象也包括一套属性和方法。
window对象常用的方法：1、prompt()方法，用于接收用户输入的信息。2、alert()方法，他表示弹出一个警告对话框。3、confirm()方法，他表示弹出确认消息框。4、close()方法，他表示关闭某个浏览器的窗口。4、open()方法，他表示打开一个新的窗口。5、setTimeout()方法，表示隔一段时间调用某个函数。6、setInterval()方法，表示设置某个时间间隔，反复调用某个执行函数。
window对象的open方法语法：window.open("弹出窗口的url","窗口名称","窗口特征")
这些参数中窗口名称一般省略为空，窗口特征包括：1、窗口的大小尺寸height和width。2、打开窗口时的初始位置坐标这里由left和top表示。3、是否带有工具栏地址栏等，包括工具栏toolbar、滚动条scrollbar、地址栏location、菜单栏menubar和标题栏titlebar，如果希望现实则设置对应项的值为1或yes、不显示则设置为0或no。4、是否允许改变大小resizable。
<!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">
function openNewWindow()
{
window.open("adv.html", "广告窗口", "toolbar=0, scrollbars=0, location=0, status=0, menubar=0, resizable=1, width=780, height=240");
/*
width：弹出窗口的宽度
height：弹出窗口的高度
top：弹出窗口离屏幕顶部距离
left：弹出窗口离屏幕左边距离
*/
}
</script>
</head>
<body>
<input type="button" value="打开一个新窗口" οnclick="openNewWindow()"/>
</body>
</html>
<!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>
<style type="text/css">
body{margin:0;}
</style>
</head>
<body>
<img src="images/indextop.gif" width="780" height="238" />
</body>
</html>location对象的常用方法和属性：1、href()，设置或返回url。2、reload()方法，表示重新加载，即类似浏览器中的刷新按钮。3、replace()方法，用新的url地址替代原来的url地址。
Document对象的常用属性：1、referrer：返回载入当前文档的URL。2、URL：返回当前文档的URL。
常用的方法：1、getElementById()，返回对拥有指定id的第一个对象的引用。2、getElementsByName()，返回带有指定名称的对象的集合。3、getElementsByTagName()，返回带有指定标签名的对象的集合。4、write()，向文档写文本，HTML表达式或javascript代码。
<!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>使用DOM改变链接</title>
<script type="text/javascript">
function changeLink(){
document.getElementById("node").innerHTML="<h1>搜狐</h1>";
document.getElementById("node").href="http://wwww.sohu.com";
}
</script>
</head>
<body>
<a href="http://wwww.sina.com.cn" id="node"><h1>新浪</h1></a>
<input name="btn" type="button" value="使用DOM改变链接" οnclick="changeLink();" />
</body>
</html>Date对象的方法：getFullYear(),获取年份。getMonth(),获取月份(0-11)。getDate(),获取号数(1-31)。getHours()，获取小时数(0-23)。getMinutes()，获取分钟数（0-59）。getSeconds()，获取秒数（0-59）。getDay()，获取星期几（0-6）。
定时器函数的用法：1、setTimeout():表示等待某段时间后调用某个函数,（语法：setTimeout("调用的函数名称",等待时间(毫秒)),清除：clearTimeout().2、setInterval()，他表示每隔一段时间反复调用某个函数（多次），语法：setInterval("调用的函数名称"，间隔时间)，清除：clearInterval()。
Dom的组成：1、Core Dom,定义了一套标准的针对任何结构化文档的对象。2、XML DOM，定义了一套标准的针对XML文档的对象。3、HTML DOM，定义了一套标准的针对HTML文档的对象。
访问节点的方法有两种：1、使用getElement系列方式访问节点。2、使用层次关系访问节点（parentNode表示访问父节点，firstChild表示访问第一个字节点，lastChild表示访问最后一个字节点）。
操作节点属性值：1、Core DOM的标准方法（getAttribute("属性名")，获取属性值、setAttribute("属性名","属性值")，设置属性值），2、针对HTML文档的特殊方法（对象名.属性）。
创建元素节点的方法：1、createElement(tagName),表示创建一个元素节点。2、appendChild(nodeName),表示在末尾添加节点。2、insertBefore(newNode,oldNode)，表示在某个元素前插入节点。2、cloneNode(deep),表示克隆节点。
删除节点：removeChild(node)
表格包含的HTML DOM对象：表格Table, 单元格:TableCell,单元格集合：cells[],行：TableRow，行集合：rows[]。
rows[]常用的方法：1、insertRow(index):增加行。2、deleteRow(index):删除行。
TableRow对象的常用属性：1、cells[]，所以单元格形成的数组。2、rowIndex:返回该行在表中的位置。常用方法：insertCell(index)表示在一行中的指定位置插入一个单元格，deleteCell(index)表示删除行中的指定单元格。
TableCell对象的属性：1、cellIndex，返回单元格的位置。2、innerHTML，设置或返回单元格的HTML。3、className，设置或返回元素的class属性。
将文本框内容设置为可写的内容使用readOnly属性。
动态添加表格
<!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>
<style type="text/css">
td{ font-size:13px;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;
}
</style>
<script type="text/javascript">
<!--
//建立一个函数build_row()用于建立新的一行
var row_index=0;
function build_row(){
row_index++;
var new_row=Table1.insertRow(Table1.rows.length);
new_row.setAttribute("id", "row"+row_index);
var new_col=new_row.insertCell(0);
new_col.innerHTML="攀高搓捶背靠垫按摩器（蓝色 ）";
new_col.style.height="30";
new_col.style.textAlign="center";
var new_col=new_row.insertCell(1);
new_col.innerHTML="3";
new_col.style.textAlign="center";
var new_col=new_row.insertCell(2);
new_col.innerHTML="￥450.50";
new_col.style.textAlign="center";
var new_col=new_row.insertCell(3);
new_col.innerHTML="<input type='button' value='删除' name='del"+row_index+"' οnclick=\"delete_row('row"+row_index+ "')\"> <input type='button' value='编辑' name='edit"+row_index+"' οnclick=\"edits_row('row"+row_index+ "')\">";
new_col.style.textAlign="center";
}
//建立一个函数delete_row用于删除一行
function delete_row(rname)
{
if(!Table1)
{
return ;
}
var i;
i=Table1.rows(rname).rowIndex;
// alert(i);
Table1.deleteRow(i);
}
function edits_row(num)
{
var i;
i=Table1.rows(num).rowIndex;
Table1.rows(i).cells(0).innerHTML="<input type='text' name='names' value='攀高搓捶背靠垫按摩器（蓝色 ）' style='width:200px;'/> ";
Table1.rows(i).cells(1).innerHTML="<input type='text' name='nums' value='3' style='width:30px;'/> ";
Table1.rows(i).cells(2).innerHTML="<input type='text' name='price' value='￥450.50' style='width:70px;'/> ";
}
build_row();
-->
</script>
</head>
<body>
<table width="600" cellspacing="0" cellpadding="0" style="border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-bottom:1px solid #cccccc;">
<tr>
<td style=" text-align:center; font-size:16px; font-weight:bold;height:35px;">我的购物车</td>
</tr>
<tr><td style="border:0;">
<table width="100%" cellspacing="0" cellpadding="0" id="Table1">
<tr>
<td style=" text-align:center; font-weight:bold; height:35px;">商品名称</td>
<td style="width:90px; text-align:center; font-weight:bold;"> 数量（个）</td>
<td style="width:90px; text-align:center; font-weight:bold;">价格（元）</td>
<td style="text-align:center;width:180px; font-weight:bold;">操作</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style=" text-align:center; height:30px;border-bottom:0;"><input name="add" type="button" value="添加一行" οnclick="build_row()"/> <input name="sub" type="button" value="提交定单" /></td>
</tr>
</table>
</body>
</html>
javascript中创建数组的语法：var 数组名 = new Array(size);
使用for…in循环读取数组中的元素，例如：
Var fruit = new Array(“apple”,”orange”,”peach”,”banana”)；
for(var x in fruit){
document.write(fruit[x]+”<br/>”
}
Array对象的常用属性：length，设置或返回数组中元素的长度。常用的方法：1、join("参数")，将数组拼接成字符串，参数是我们用了连接成字符串的一个分隔符。2、sort(),将数组排序。
Select对象常用属性：options[]，返回一个数组，表示select对象它里面的所有option选项。selectedIndex：被选中选项的索引号。length：选项的总数。Select对象常用的方法：add(Option对象，添加位置）：增加选项。事件：onchange ：当改变选项是触发。
onmouseout：表示鼠标不在上面时。
设置元素的隐藏和显示的方法有：style对象的display属性，值为block表示显示，值为none表示隐藏。style对象的visibility属性，值为visible是表示显示，值为hidden是表示隐藏。两者的区别：使用display后，元素的位置为空，反之位置保留。
制作对联广告：对广告单独设置一个div,设置它的style对象的position对象为absolute，要对其位置进行修改则使用style属性的left和top属性修改。如果进行修改必须要在行内样式进行修改。如果使用外部样式，对于IE浏览器使用currentStyle对象获取或设置元素的坐标。对于其他浏览器则使用getComputedStyle()方法（document.defaultView.getComputedStyle(div对象，null)）。
获取鼠标滚动的距离：scrollTop,表示纵向距离。scrollLeft，表示横向距离。
鼠标滚动事件，onscroll，表示滚动鼠标时触发的一个事件。var obj = document.documentElement；
380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
