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')"/>
使用外部js文件
javascript外部文件为:
<span style="font-size:18px;">// JavaScript Document
document.write("Hello World!");</span>
在HTML中使用方法
<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>
history对象的常用功能:1、back()方法,表示返回上一页。2、forward()方法,表示前进一页。3、go()方法,表示跳转到制定页(go后面的参数,传入一个数字表示前进的相对位置,这个位置可以是负数。)。
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对象的语法:1、带参数的,var 日期实例 = new Date(参数);例如 var tdate = new Date("July 15,2009, 16:34:28");他表示我们创建了一个2009年七月15号16点34分28秒的日期实例。2、不带参数,var today = new Date();这说明返回了当前的系统时间。
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;