《事半功倍系列 javascript》代码

事半功倍系列之javascript  
   
第一章javascript简介    
1.在地址栏输入javascript语句    
Javascript:Document.write("显示文字")    
2.将javascript嵌入 HTML文档    
<script language=javascript>
document.bgColor="blue";
</script>  
  
第二章 使用变量和数组    
1.声明变量    
<script language=javascripe>    
Var answer1,answer2,answer3,answer4;    
answer1=9;    
answer2=2.5;    
answer3="Milkey May";    
answer4=true;    
</script>    
2.使用整数    
<script language=javascript>    
var decimalNum,hexadecimalNum,octalNum;    
decimalNum=24;    
hexadecimalNum=0×24;    
octalNum=024;    
document.write("显示十进制数："+ decimalNum+"<br>");    
document.write("显示十六进制数："+ hexadecimalNum +"<br>");    
document.write("显示八进制数："+ octalNum +"<br>");
</script>    
3.使用浮点数    
<script language=javascript>    
var num1,num2,num3,num4;    
num1=1234567890000.0;    
num2=5.14e23;    
num3=0.0000123456;    
num4=6.0254e3-4;    
document.write("浮点数1："+num1+"<br>");    
document.write("浮点数2："+num2+"<br>");    
document.write("浮点数3："+num3+"<br>");    
document.write("浮点数4："+num4+"<br>");    
</script>    
4.使用布尔值    
<script language=javascript>    
var answer1,answer2;
answer1=true;    
answer2=false;    
document.write("显示布尔1："+answer1+"<br>");   
document.write("显示布尔2："+answer2+"<br>");    
</script>    
5.使用字符串    
<script language=javascript>    
var str1,str2;    
str1="fdsgdg dsfdsf china";    
str2="武汉市广播电视大学";   
document.write("显示字符串1："+str1+"<br>");    
document.write("显示字符串2："+str2+"<br>");    
</script>    
6.确定变量类型    
<script>    
var answer1,answer2,answer3,answer4;    
answer1=9;    
answer2=2.5;    
answer3="milky may";    
answer4=true;    
document.write("变量1的类型是："+typeof answer1 +"<br>");    
document.write("变量2的类型是："+typeof answer2 +"<br>");    
document.write("变量3的类型是："+typeof answer3 +"<br>");    
document.write("变量4的类型是："+typeof answer4 +"<br>");    
</script>    
7.将字符串转换成数字    
<script>    
var str1="31 days in january";    
var int1=parseInt(str1);    
document.write("str1的数据类型是 ："+typeof str1+"<br>");    
document.write("int1的数据类型是 ："+typeof int1+"<br>");    
</script>    
8.将数字转换成字符串    
<script>    
var int1=256;    
var str1=""+int1;    
document.write("str1的数据类型是 ："+typeof str1+"<br>");    
document.write("int1的数据类型是 ："+typeof int1+"<br>");    
</script>    
9.声明数组    
<script>    
array=new Array(5);    
array[0]=1;    
array[1]=3;    
array[2]=5;    
array[3]=7;    
array[4]=11;    
document.write("数组是："+array[0]+" "+array[1]+" "+array[2]+" "+array[3]+" "+array[4]);    
</script>    
10.确定数组元素的个数    
<script>    
array=new Array(5);    
array[0]=1;    
array[1]=3;    
array[2]=5;    
array[3]=7;    
array[4]=11;   
document.write("数组是："+array[0]+" "+array[1]+" "+array[2]+" "+array[3]+" "+array[4]+"<br>");    
document.write("数组的元素个数是"+array.length);    
</script>    
11.将数组转换为字符串    
<script>    
array=new Array();    
array[0]="dark";    
array[1]="apple";    
array[2]="nebula";    
array[3]="water";   
str1=array.join();    
str2=array.join(" ");    
document.write(str1+"<br>");    
document.write(str2);    
</script>    
12.对数组排序    
<script>    
array=new Array();    
array[0]="dark";    
array[1]="apple";    
array[2]="nebula";    
array[3]="water";    
str1=array.sort();    
document.write(str1+"<br>");    
</script>  
  
第三章 创建表达式    
1.使用算术运算符    
<script>    
var1=12;    
var2=10;    
varadd=var1+var2;    
varsub=var1-var2;    
varmult=var1*var2;    
vardiv=var1/var2;    
varmod=var1%var2;   
document.write("数据1是："+var1+"<br>");    
document.write("数据2是："+var2+"<br>");    
document.write("数据相加是："+varadd+"<br>");    
document.write("数据相减是："+varsub+"<br>");    
document.write("数据相乘是："+varmult+"<br>");    
document.write("数据相除是："+vardiv+"<br>");    
document.write("数据相除取余数是："+varmod+"<br>");    
</script>    
2.递增变量和递减变量    
<script>    
days=1;    
document.write("输出变量"+days+"<br>");    
days++;    
document.write("递增后变量变为："+days);    
</script>    
3.创建比较表达式    
<script>    
daysofmonth=28;    
if(daysofmonth==28);    
month="february";    
document.write("days of month:"+daysofmonth+"<br>");    
document.write("month:"+month);    
</script>    
4.创建逻辑表达式    
<script>    
dayofmonth=28;    
if(dayofmonth==28 || dayofmonth==29);    
month="february";
document.write("days of month:"+dayofmonth+"<br>");    
document.write("month:"+month);    
</script>    
5.使用条件运算符    
<script language="javascript">    
stomach="hungry";    
time="5:00";    
(stomach=="hungry"&&time=="5:00") ? eat = "dinner":eat="a snack";    
document.write("输出结果"+eat);    
</script>    
6.识别数字    
<script>    
var1=24;    
(isNaN(var1))?document.write("变量var1"+var1+"不是数字"):Document.write("变量var1"+var1+"是数字");    
</script>  
  
第四章 控制程序流程    
1.使用IF –Else语句    
<script>    
month="december";    
date=25;
if(month=="december" && date==25)   
document.write("今天是圣诞节,商店关门");    
else    
document.write("欢迎,您来商店购物");    
</script>    
2.使用for 循环    
<script>    
for(count=1;count<=10;count++)    
document.write("输出第"+count+"句"+"<br>");    
</script>    
3.使用while循环    
<script>    
count=1;
while(count<=15)
{    
document.write("输出第"+count+"句" +"<br>");    
count++;
}    
</script>    
4.中断循环    
<script>    
count=1;    
while(count<=15)
{    
count++;
if(count==8)    
break;    
document.write("输出第"+count+"句"+"<br>");
}    
</script>    
5.继续循环    
<script>    
count=1    
while(count<=15)
{    
count++;    
if(count==8)    
continue;    
document.write("输出第"+count+"句"+"<br>");
}    
</script>    
6.使用javascript定时器    
<script>    
function rabbit(){
document.write("输出语句");
}    
</script>    
<body οnlοad=window.setTimeout(rabbit(),5000)>    
7.设置定期间隔    
<script>    
window.setInterval("document.form1.text2.value=document.form1.text1.value",3000);    
</script>    
<form name=form1>    
<input type=text name=text1><br>    
<input type=text name=text2><br>    
</form>    
8.清除超时和间隔    
<script>    
stop=window.setInterval("document.form1.text2.value=document.form1.text1.value",300);
</script>    
<form name=form1>    
<input type=text name=text1><br>    
<input type=text name=text2><br>    
<input type=button name=button1 value=" 清除超时和间隔" οnclick=clearInterval(stop)>    
</form>   

第五章 使用函数    
1.声明函数    
<script>    
function quote()
{ 
document.write("输出语句");    
}    
</script>    
2.调用函数    
<script>    
function quote()    
{ 
document.write("输出语句");
}    
quote()    
</script>    
3.了解全局变量和局部变量    
任何不用 var关键字声明的变量都是全局变量,任何在函数外声明的变量都是全局变量    
4.将参数传送给函数    
<script>    
function f(item)    
{
document.write("输出参数"+item+"<br>");
}    
f("fgdfgd");
f("参数二");
</script>    
5.从函数返回值    
<script>    
function average(var1,var2,var3)    
{
ave=(var1+var2+var3)/3;    
document.write("输出结果");    
return ave;    
}    
document.write(average(34,56,78);   
</script>    
6.通过HTML链接调用函数    
<script>    
function quote()
{    
document.write(" 输出字符串");
}    
</script>    
<a href=javascript:quote()>通过HTML链接调用函数</a>    
<a href=javascript:Document.write("输出字符")> 通过HTML链接调用函数,直接写javascript语句</a>  
  
第六章 处理事件    
1.检查鼠标单击    
<form name=form1>    
<input type=button name=button1 value=hello οnclick=document.form1.button1.value='there'>    
</form>    
2.检测双击    
<form name=form1>    
<input type=button name=button1 value=hello οnclick=document.form1.button1.value='你单击了按钮' οndblclick=document.form1.button1.value='你双击了该按钮'>    
</form>    
3.创建悬停按钮    
<img src=go.gif οnmοuseοver=document.images[0].src='go2.gif' οnmοuseοut= document.images[0].src='go.gif'>    
4.检测按键    
<form name=form1>    
<input type=text name=text1 value=hello οnkeypress="if(window.event.keyCode=='100') document.form1.text1.value='你按了d键'">    
</form>    
5.设置焦点    
<form name=form1>    
<input type=text name=text1 value=hello    
onfous=document.form1.text1.value='该文本框获得焦点'    
οnblur=document.form1.text1.value='该文本框失去焦点'>    
</form>    
6.检测下拉菜单选择    
<form name=form1>    
<select name=select1 size=4    
onChange=document.form1.text1.value=document.form1.select1.value>    
<option value="北京">北京</option>    
<option value="上海">上海</option>    
<option value="武汉">武汉</option>    
<option value="天津">天津</option>    
<option value="大连">大连</option>    
</select>    
<input tppe=text name=text1 value=hello>    
</form>    
7.创建网页加载和卸载信息    
<body οnlοad=document.form1.text1.value='页面加载完毕' οnunlοad=alert('再见,欢迎再来')>    
<form name=form1>    
<input type=text name=text1 value="页面正在加载 ……">    
</form>   
 
第七章 使用对象    
1.理解对象\属性和方法    
<body bgcolor="green">    
<script>    
document.write("页面背景颜色是:"+document.bgColor);
document.write("页面前景颜色是:"+document.fgColor);
</script>    
2.使用网页元素对象    
<script>    
</script>    
<form name=form1>    
<textarea name=ta1>dfgfdgfdhfdhdfdfgdf</textarea>    
<input type=button value="选择文本" οnclick=document.form1.ta1.select()>    
<input type=button value="显示文" οnclick=document.write(document.form1.ta1.value)>    
</form>    
3.使用子对象    
<form name=form1>    
<input type=text name=text1 value=hello>    
</form>    
<script>    
document.form1.text1.value="gdfgfd";
</script>    
<form name=form1>    
<input type=radio name=radio1>男    
<input type=radio name=radio2>女    
</script>    
<script>    
document.form1.radio1.checked=true;    
</script>    
4.使用预定义对象    
<script>    
str1="dgdfgdfgdfhf固定法固定法功夫攻打法";    
document.write(str1+"<br>");    
str2=str1.substr(5);    
document.write(str2+"<br>");    
document.write("输出圆的面积:"+Math.PI*Math.pow(5.0,2));    
</script>    
5.创建新对象    
<script>    
today=new Date();    
document.write("今天是"+(today.getMonth()+1)+"月"+today.getDate()+"日"+"<br>");    
document.write("现在是:"+today.toLocaleString());    
</script>    
6.引用当前对象    
<form name=form1>    
<input type=text name=text1 value="dgdgdfgfd" οnclick=this.select()>    
7.查看对象属性    
<script>    
for(prop in window)    
{
document.write("window."+prop+"="+window[prop]+"<br>");
}    
for(prop2 in location)    
{
document.write("location."+prop2+"="+location[prop]+"<br>");
}    
</script>    
8.使用Array对象    
<script>    
array=new Array(10);
array[0]="bark";    
array[1]="apple";    
array[2]="nebula";    
array[3]="cookie";    
array[4]="technology";    
document.write("数组元素个数是"+array.Length+"<br>");    
document.write("用 join将数组合并"+array.join(" ")+"<br>");    
document.write(" 数组排序"+array.sort());    
</script>    
9.使用 image 对象    
<img src=**.gif alt="图片提示…." border=10>    
<script>    
document.write("图片提示是:"+document.images[0].alt+"<br>");    
document.write("图片边框大小是:"+document.images[0].broder);    
</script>    
10.预加载图像    
<script>    
freddy=new Image();    
freddy.src=freddy.gif;    
</script>    
<body οnlοad=document.images[0].src=freddy.src>    
<img src="blank.gif">    
</body>    
11.改变图像    
<img src=freddy.gif><br>    
<form name=form1>    
<input type=button name=button1 value="改变图像" onclickd=document.images[0].src=dudjp.gif>    
</form>    
12.使用link和anchor对象    
<a name=anchor1>锚点1<br>    
<a href=http://www.microsoft.com>Microsoft</a><br>    
<a href=http://www.sohu.com>sohu</a><br>    
<a href=http://www.sina.com.cn>sina</a><br>    
<script>    
document.write("本页面共有"+document.links.length+"链接"+"<br>");    
document.write("本页面共有"+document.anchors.length+"锚点"+"<br>");    
document.write("第一个链接协议是"+document.links[0].protocol+"<br>");
document.write("第一个链接路径是"+document.links[0].pathnamel+"<br>");    
document.write("第一个链接href是"+document.links[0].hrefl+"<br>");    
</script>    
13.改变链接    
<a href =http://www.microsoft.com>link</a>    
<form name=form1>    
<input type=button name=button1 value="改变链接" οnclick=document.links[0].href='http://www.sohu.com'>    
</form>    
14.使用history对象    
<form name=form1>    
<input type=button name=button1 value="向后返回2页" οnclick=window.history.go(-2)>    
</form>  
  
第八章 使用窗口    
1.在浏览器的状态栏上显示文本    
<body οnlοad=window.status="欢迎光临我的站点">    
<a href=http://www.sohu.com>sohu</a>    
</body>    
2.改变背景色    
<script>    
document.bgColor="orange";    
</script>    
3.列举背景颜色    
<body bgColor =green>    
<script>    
document.write("当前背景色是:"+document.bgColor);    
</script>    
</body>    
4.改变文本和链接颜色    
<script>    
document.bgColor="orange";    
document.fgColor="blue";    
document.linkColor="red";    
</script>    
<h2>看看这段文本颜色</h2>    
<a href=http://www.sohu.com>sohu</a>    
</body>    
5.改变文档标题    
<script>    
name="Mouse";    
document.title="welcome to "+name+"'s House";    
document.write(document.title);    
</script>    
6.显示修改日期    
<script>    
document.write("本页面最后修改时间是"+document.lastModified);    
</script>    
7.查看当前文档的URL    
<script>    
document.write("本页面的URL:"+document.URL);    
</script>    
8.查看引用页    
<script>    
document.write("本页面的引用页是"+document.referrer);    
</script>    
9.打开新的浏览器窗口    
<script>    
window.open("*.htm","title","width=200,height=400,resizable=yes");    
</script>    
10.关闭远程窗口    
close.html:    
<script>    
document.write("正文");    
</script>    
<form name=form1>    
<input type=button name=button1va, , , lue="关闭" οnclick=window.close()>    
</form>    
open.html    
<script>    
window.open("close.html","romote","width=200,height=400,resizable=yes");    
</script>    
11.打印窗口    
<script>    
document.write("正文");    
</script>    
<form name=form1>    
<input type=button value=打印 οnclick=window.print()>    
</form>    
12.移动窗口    
<form name=form1>    
水平方向<input type=text name=x value=20>    
垂直方向<input type=text name=y value=50>    
<input type=button value="移动窗口到…"οnclick=window.moveTo(document.form1.x.value,document.form1.y.value)>    
</form>    
<form name=form1>    
水平方向<input type=text name=x value=20>    
垂直方向<input type=text name=y value=50>    
<input type=button value="移动窗口" οnclick=window.moveBy(document.form1.x.value,document.form1.y.value)>    
</form>    
13.改变窗口大小    
<form name=form1>    
水平方向<input type=text name=x value=200>    
垂直方向<input type=text name=y value=500>    
<input type=button value="改变窗口大小到….."οnclick=window.resizeTo(document.form1.x.value,document.form1.y.value)>    
</form>    
<form name=form1>
水平方向<input type=text name=x value=200>    
垂直方向<input type=text name=y value=500>    
<input type=button value="改变窗口大小"οnclick=window.resizeBy(document.form1.x.value,document.form1.y.value)>    
</form>    
14.用警告对话框通知用户    
<script>    
window.alert("welcome");    
</script>    
15.用提示对话框接受输入    
<script>    
name=window.prompt("输入姓名","姓名");    
document.write(" 欢迎您:"+name+"来到这里");    
</script>    
16.用确认对话框使用户做出决定    
<script>    
like=window.confirm("你觉得好吗?");    
if(like==true)    
document.write("谢谢你的夸奖");    
else    
document.write("希望得到你的夸奖");    
</script>  
  
第九章 使用字符串    
1.使用字符串对象    
<script>    
mystring="gdgdfgfddddaaaaaaaaaaaabbbbbbbbbbbbbbbbbvbhg.<br>";    
document.write(mystring);    
document.write(mystring.bold());    
document.write(mystring.toUpperCase());    
</script>    
2.使用子字符串    
<script>    
str1="fdsf 1111 gfdgfd dfdsf cccc dddd.<br>";    
document.write(str1);    
document.write(str1.substring(0,13)+"<br>");    
document.write(str1.substr (20,11)+"<br>");    
</script>    
3.连接字符串    
<script>    
str1="may you find";    
str2="peace,happiness and prosperity.<br>";    
document.write(str1+"<br>");    
document.write(str2);    
document.write(str1.concat(str2));    
document.write(str1+=str2);    
</script>