开始分享我学习js的过程 - JavaScript & VBScript & DHTML 脚本技术讨论版 - 无忧脚本 -//体验编写HTML代码的乐趣

aircy

爬虫

UID 54280
精华 1
积分 162
帖子 69
威望 78
阅读权限 20
注册 2006-7-12
来自湖南
状态离线

#1

大中小

使用道具

发表于 2007-1-30 09:40 资料个人空间主页短消息加为好友

开始分享我学习js的过程

前言：
接触JS以来，一直没有好好学完过一本js的书；从今天开始，我将从新开始学习、整理并分享我学习过程中的js代码。
今后发布的代码中并不代表全属于原创，相反很多部分都会源于互联网，当然也不会少于无忧脚本的。希望大家看了之后不要
在论坛训斥，毕竟“面斥不雅”！在这里发布出来，纯粹是为了共享给哪些曾经和我一样，或者正在学习前线的朋友们；同时我
也希望在这里得到更多人的支持，如果朋友有什么建议和意见，请多多跟帖。共同探讨！thanks！

实例一、
本实例主要介绍了navigator、cookie、screen、location对象、函数调用以及prompt、alert、confirm交互的简单应用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD>  <TITLE> New Document </TITLE>  <script language="javaScript">  if(confirm("真的要看吗？")==true){  var password;  password = prompt("密码520:","请输入密码吧！");  if(password=="520"){  alert("恭喜你了，进去吧！");  document.write("测试利用navigator对象检测浏览器如下信息:<br/>")  document.write("浏览器的名称:"+navigator.appName+"<br/>");  document.write("浏览器的版本号:"+navigator.appVersion+"<br/>");  document.write("运行平台:"+navigator.platform+"<br/>");  document.write("是否支持cookie:"+navigator.cookieEnabled+"<br/><br/>");  document.write("测试利用screen对象获得浏览器窗口分辩率的大小:<br/>");  document.write("窗口高度:"+screen.height+"<br/>");  document.write("窗口宽度:"+screen.width+"<br/>");  document.write("颜色深度:"+screen.colorDepth+"<br/>");  }else{	 message();  }  }  function  loadingMessage(param){    alert("不好意思哦！"+param+"密码不对哦！再来吧！");	return false;	}  function message(){ loadingMessage("哈啰")  } </script>  </HEAD> <BODY>  <a href="#" onclick="window.location='http://www.baidu.com';">点击我</a> </BODY></HTML>

提示：您可以先修改部分代码再运行

aircy

爬虫

UID 54280
精华 1
积分 162
帖子 69
威望 78
阅读权限 20
注册 2006-7-12
来自湖南
状态离线

#2

大中小

使用道具

发表于 2007-1-30 10:23 资料个人空间主页短消息加为好友

开始分享我学习js的过程2

实例二、
本实例主要介绍了event对象和事件的简单应用。

提示：您可以先修改部分代码再运行

[[i] 本帖最后由 aircy 于 2007-1-30 10:24 编辑 [/i]]

aircy

爬虫

UID 54280
精华 1
积分 162
帖子 69
威望 78
阅读权限 20
注册 2006-7-12
来自湖南
状态离线

#3

大中小

使用道具

发表于 2007-1-30 11:06 资料个人空间主页短消息加为好友

开始分享我学习js的过程3

实例三、
本实例主要介绍了数组和其slice()方法的使用

提示：您可以先修改部分代码再运行

aircy

爬虫

UID 54280
精华 1
积分 162
帖子 69
威望 78
阅读权限 20
注册 2006-7-12
来自湖南
状态离线

#4

大中小

使用道具

发表于 2007-1-30 11:25 资料个人空间主页短消息加为好友

开始分享我学习js的过程4

实例四、
本实例主要介绍了对象和构造方法的使用

提示：您可以先修改部分代码再运行

aircy

爬虫

UID 54280
精华 1
积分 162
帖子 69
威望 78
阅读权限 20
注册 2006-7-12
来自湖南
状态离线

#5

大中小

使用道具

发表于 2007-1-30 13:12 资料个人空间主页短消息加为好友

开始分享我学习js的过程5

实例五（4.1）、
本实例主要介绍了Document对象的使用

提示：您可以先修改部分代码再运行

[[i] 本帖最后由 aircy 于 2007-1-30 15:01 编辑 [/i]]

aircy

爬虫

UID 54280
精华 1
积分 162
帖子 69
威望 78
阅读权限 20
注册 2006-7-12
来自湖南
状态离线

#6

大中小

使用道具

发表于 2007-1-30 13:56 资料个人空间主页短消息加为好友

开始分享我学习js的过程6

实例六（4.2）、
本实例主要介绍了Document对象读取表单元素的使用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD>  <TITLE> New Document </TITLE>  <SCRIPT LANGUAGE="JavaScript">    </SCRIPT> </HEAD> <BODY>  <FORM name="firstForm" METHOD=POST ACTION="">	<INPUT TYPE="text" NAME="firstText" value="哈啰">  </FORM>    <FORM name="secondForm" METHOD=POST ACTION="">	<INPUT TYPE="text" NAME="secondText" value="哈啰">	<INPUT TYPE="submit" name="hehe" value="哈哈">  </FORM>  <SCRIPT LANGUAGE="JavaScript"></SCRIPT><FORM name="form1" METHOD=POST ACTION="">	a01<INPUT TYPE="text" NAME="a01"/><INPUT TYPE="button" name="01s" value="提交" onclick="firstSubmit()"/><br/>	a02<INPUT TYPE="text" NAME="a02"/><INPUT TYPE="button" name="02s" value="提交" onclick="copyFirstSubmit()"/>×在a01中输入值后再提交</FORM> </BODY></HTML>

提示：您可以先修改部分代码再运行

[[i] 本帖最后由 aircy 于 2007-1-30 15:01 编辑 [/i]]

aircy

爬虫

UID 54280
精华 1
积分 162
帖子 69
威望 78
阅读权限 20
注册 2006-7-12
来自湖南
状态离线

#7

大中小

使用道具

发表于 2007-1-30 15:00 资料个人空间主页短消息加为好友

开始分享我学习js的过程7

实例七（4.3）、
本实例主要介绍了Document对象读取表单元素的使用，一个注册验证代码

<html>  <head>    <title>用户注册</title>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css">  </style>  <SCRIPT type="text/javascript">    function Form_Submit()	{		if(regForm.userNumber.value=="")		{		 alert("用户名不能为空!");		 return false;		}		else if(regForm.userpassWord.value=="")		{		 alert("密码不能为空!");		 return false;		}		else if(regForm.userpassWord.value!=regForm.reuserpassWord.value)		{		alert("两次输入的密码不一致!");		 return false;		}		return true;		//regForm.submit(); //不采用表单提交	}  </SCRIPT>  </head>    <body>  <FORM id="register" name="regForm" method="post" action="">  <table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#0099FF">    <tr>      <td align="center" valign="middle" bgcolor="#FFFFFF">用户注册</td>    </tr>    <tr>      <td align="center" valign="middle" bgcolor="#FFFFFF">用户账号：      <input name="userNumber" type="text" id="usernumber" size="15"></td>    </tr>    <tr>      <td align="center" valign="middle" bgcolor="#FFFFFF">用户密码：      <input name="userPassWord" type="text" id="userpassWord" size="15"></td>    </tr>    <tr>      <td align="center" valign="middle" bgcolor="#FFFFFF">确认密码：      <input name="reuserPassWord" type="text" id="reuserpassWord" size="15"></td>    </tr>    <tr>      <td align="center" valign="middle" bgcolor="#FFFFFF">电子邮箱：      <input name="email" type="text" id="email" size="15"></td>    </tr>    <tr>      <td align="center" valign="middle" bgcolor="#FFFFFF"><input type="button" name="Submit" value="提交" onClick="Form_Submit()"></td>    </tr>  </table> </FORM>  </body></html>

提示：您可以先修改部分代码再运行

[[i] 本帖最后由 aircy 于 2007-1-30 15:02 编辑 [/i]]

aircy

爬虫

UID 54280
精华 1
积分 162
帖子 69
威望 78
阅读权限 20
注册 2006-7-12
来自湖南
状态离线

#8

大中小

使用道具

发表于 2007-1-30 15:04 资料个人空间主页短消息加为好友

开始分享我学习js的过程8

实例八（4.4）、
本实例主要介绍了Document对象读取表单元素的使用（单选按钮、复选按钮的使用）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD>  <TITLE> New Document </TITLE>  <META NAME="Generator" CONTENT="EditPlus">  <META NAME="Author" CONTENT="">  <META NAME="Keywords" CONTENT="">  <META NAME="Description" CONTENT="">  <SCRIPT LANGUAGE="JavaScript">    </SCRIPT> </HEAD> <BODY> <FORM name ="form1" METHOD=POST ACTION=""> 单选应用<INPUT TYPE="radio" NAME="country" value="中国" checked>中国<INPUT TYPE="radio" NAME="country" value="法国">法国<INPUT TYPE="radio" NAME="country" value="美国">美国<INPUT TYPE="button" value="提交" onclick="sel_coun();"/><br/>复选应用<INPUT TYPE="checkbox" NAME="love"  value="打球">打球<INPUT TYPE="checkbox" NAME="love" value="游泳">游泳<INPUT TYPE="checkbox" NAME="love" value="看书">看书<INPUT TYPE="checkbox" NAME="love" value="跳舞">跳舞<INPUT TYPE="button" value="提交" onclick="sel_love();"/><br/> </FORM> </BODY></HTML>

提示：您可以先修改部分代码再运行

aircy

爬虫

UID 54280
精华 1
积分 162
帖子 69
威望 78
阅读权限 20
注册 2006-7-12
来自湖南
状态离线

#9

大中小

使用道具

发表于 2007-1-30 15:12 资料个人空间主页短消息加为好友

开始分享我学习js的过程9

实例九（4.5）、
本实例主要介绍了Document对象读取表单元素的使用（下拉菜单、链接属性的使用）

<html><head><title>下拉菜单</title><script language="javascript">function display(){	if(document.selectForm.team.selectedIndex==0) //判断是否进行了选择	{		alert("您没有做选择!");	}	else	{		var index = document.selectForm.team.selectedIndex; //读出当前选项的下标		alert("您选择的球队是:"+document.selectForm.team.options[index].value);	}}</script></head><body><div align="center">  <form action="" method="post" name="selectForm" id="selectForm">    <table width="70%"  border="0">      <tr>        <td>请选择喜欢的球队:</td>      </tr>      <tr>        <td><select name="team">          <option value="0">--未选择--</option>          <option value="巴塞罗那">巴塞罗那</option>          <option value="AC米兰">AC米兰</option>          <option value="尤文图斯">尤文图斯</option>          <option value="曼彻斯特联">曼彻斯特联</option>          <option value="切尔西">切尔西</option>        </select></td>      </tr>      <tr>        <td><input name="look" type="button" id="look" value="单击查看" onClick="display()"></td>      </tr>    </table><a href="http://www.baidu.com" name="baidu" target="_blank">有问题百度一下</a><br><a href="http://www.google.com" name="google" target="_blank">Google也可以</a><script language="javascript">document.write("第一个连接的信息:<br>");document.write("<b>href:</b>"+document.links[0].href+"<br>");document.write("<b>pathname:</b>"+document.links[0].pathname+"<br>");document.write("<b>port:</b>"+document.links[0].port+"<br>");document.write("<b>protocol:</b>"+document.links[0].protocol+"<br>");document.write("<b>target:</b>"+document.links[0].target+"<br>");document.write("<br><br>");document.write("第二个连接的信息:<br>");document.write("<b>href:</b>"+document.links[1].href+"<br>");document.write("<b>pathname:</b>"+document.links[1].pathname+"<br>");document.write("<b>port:</b>"+document.links[1].port+"<br>");document.write("<b>protocol:</b>"+document.links[1].protocol+"<br>");document.write("<b>target:</b>"+document.links[1].target+"<br>");</script>  </form></div></body></html>

提示：您可以先修改部分代码再运行

aircy

爬虫

UID 54280
精华 1
积分 162
帖子 69
威望 78
阅读权限 20
注册 2006-7-12
来自湖南
状态离线

#10

大中小

使用道具

发表于 2007-1-30 15:23 资料个人空间主页短消息加为好友

开始分享我学习js的过程10

实例十（5）、
本实例主要介绍了图像属性的使用，模拟百度图片显示

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>图像编程</title><script language="javascript">var imageArray = new Array("http://yi-bo.com/Article/UploadFiles/200610/2006101751022184.jpg","http://www.66ylw.com/Article/UploadFiles/200610/2006101751024517.jpg","http://www.ishare.cc/d/247965-3/6519C067DAA1F4B0F5EB44BC0FFD5DA4.JPG"," http://www.dipan8.com/Article/UploadFiles/200610/2006101751015599.jpg","http://www.66ylw.com/Article/UploadFiles/200610/200610175936198.jpg","http://wanmeiad.net/Article/UploadFiles/200610/2006101751024347.jpg");var index = 0;function GetNext(){	index++;	if(index < imageArray.length)  //判断图像的下标是否小于数组的长度	{		document.images["saint"].src=imageArray[index]; //如果小于，那么就显示该下标所指定的图像	}	else	{		index = 0;		document.images["saint"].src=imageArray[index];	//如果不小于，那么就显示第一幅图像，并把index值置为0		}}function GetPrev(){	index--;	if(index >= 0) //判断图像的下标是否大于0	{		document.images["saint"].src=imageArray[index]; //如果大于，那么就显示该下标所指定的图像	}	else	{		index = imageArray.length-1;		document.images["saint"].src=imageArray[index];		//如果不大于，那么就显示最后一幅图像，并把index值置为数组长度减1		}}</script></head><body><img name="saint" src="http://yi-bo.com/Article/UploadFiles/200610/2006101751022184.jpg" width="400" height="300"><br><a href="javascript:GetNext()">下一幅</a><a href="javascript:GetPrev()">上一幅</a></body></html>

提示：您可以先修改部分代码再运行

aircy

爬虫

UID 54280
精华 1
积分 162
帖子 69
威望 78
阅读权限 20
注册 2006-7-12
来自湖南
状态离线

#11

大中小

使用道具

发表于 2007-2-2 19:57 资料个人空间主页短消息加为好友

开始分享我学习js的过程11

实例十一（6）、
本实例主要介绍了鼠标动作的使用，这个例子太简单了，可以多找点别点资料看看！

提示：您可以先修改部分代码再运行

aircy

爬虫

UID 54280
精华 1
积分 162
帖子 69
威望 78
阅读权限 20
注册 2006-7-12
来自湖南
状态离线

#12

大中小

使用道具

发表于 2007-2-2 20:02 资料个人空间主页短消息加为好友

开始分享我学习js的过程12

实例十二、
   本实例主要介绍了js访问XML节点的应用，读节点最基本的有2中方法，我分2个实例发上来，方便学习。

   提示：您可以先修改部分代码再运行

因为不能发附件，所有2个文件分别帖上来了，测试的时候分别保存即可。下面的是XML文件。说了一句废话，相信不会有人认为这个也是html！：）

   提示：您可以先修改部分代码再运行

[[i] 本帖最后由 aircy 于 2007-2-2 20:10 编辑 [/i]]

aircy

爬虫

UID 54280
精华 1
积分 162
帖子 69
威望 78
阅读权限 20
注册 2006-7-12
来自湖南
状态离线

#13

大中小

使用道具

发表于 2007-2-2 20:14 资料个人空间主页短消息加为好友

开始分享我学习js的过程12－1

实例十三、
本实例主要介绍了js访问XML节点的应用，读节点的又一种方法，我上面发了一个，xml跟上面的一样就不重复了。

提示：您可以先修改部分代码再运行

小鱼泡泡

爬虫

UID 56030
精华 0
积分 153
帖子 61
威望 81
阅读权限 20
注册 2006-9-2
状态离线