Maison >interface Web >js tutoriel >分享我学习js的过程 作者aircy javascript学习教程
分享我学习js的过程 作者aircy javascript学习教程
- PHP中文网original
- 2016-05-16 19:19:441154parcourir
前言：
接触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对象检测浏览器如下信息:
")
document.write("浏览器的名称:"+navigator.appName+"
");
document.write("浏览器的版本号:"+navigator.appVersion+"
");
document.write("运行平台:"+navigator.platform+"
");
document.write("是否支持cookie:"+navigator.cookieEnabled+"
");
document.write("测试利用screen对象获得浏览器窗口分辩率的大小:
");
document.write("窗口高度:"+screen.height+"
");
document.write("窗口宽度:"+screen.width+"
");
document.write("颜色深度:"+screen.colorDepth+"
");
}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>实例二、
本实例主要介绍了event对象和事件的简单应用。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>mouse</title>
<script language="javascript">
function catchEvent()
{
var eventSrcID = event.srcElement.id;
var eventtype = event.type;
alert(eventSrcID+"捕获到了"+eventtype+"事件");
}
function GetPosition()
{
var posX = event.clientX;
var posY = event.clientY;
window.status = "鼠标的位置是("+posX+","+posY+")";
}
function GetKey()
{
textfield.value=event.keyCode+","+String.fromCharCode(event.keyCode);
}
</script>
</head>
<body onMouseMove="GetPosition();" >
鼠标在文本框中按下:<input type="text" name="textfield" onMouseDown="alert('鼠标在文本框中按下')">
键盘按下:<input type="text" name="textfield" onKeyDown="alert('键盘按下');">
event对象:
<input type="text" name="textfield" id="text" onClick="catchEvent();">
<input type="submit" name="Submit" value="提交" id="button" onClick="catchEvent();">
</body>
</html>实例三、
本实例主要介绍了数组和其slice()方法的使用
<!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="">
</HEAD>
<BODY>
数组和其slice()方法的使用
<SCRIPT LANGUAGE="JavaScript">
<!--
var firstArray = new Array();
firstArray[0]="0";
firstArray[1]="1";
firstArray[2]="2";
firstArray[3]="3";
firstArray[4]="4";
for(var i=0 ; i<firstArray.length;i++){
document.write("firstArray["+i+"]="+i+"
");
}
var firstArray = firstArray.slice(0,3);
document.write(firstArray);
//-->
</SCRIPT>
</BODY>
</HTML>实例四、
本实例主要介绍了对象和构造方法的使用
<!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="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var myobject = new Object();//创建一个空对象
myobject[0]="0";//给对象放值
myobject[1]="1";
document.write("对象的使用"+myobject[0]);
function Person(name,age)//构造方法
{
this.name=name;
this.age=age;
this.sayHello=function()
{
alert("我的名字是"+this.name+",我的年龄是"+this.age);
}
}
//-->
</SCRIPT>
<body>
构造方法的使用
<script language="javascript">
var person1 = new Person("","21");
person1.sayHello();
</script>
</body>
</HTML>实例五（4.1）、
本实例主要介绍了Document对象的使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<IMG SRC="C:/Documents and Settings/Administrator/桌面/13608.gif" WIDTH="170" HEIGHT="1" BORDER="0" ALT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("文件地址:"+document.location+"
")
document.write("文件标题:"+document.title+"
");
document.write("图片路径:"+document.images[0].src+"
");
document.write("文本颜色:"+document.fgColor+"
");
document.write("背景颜色:"+document.bgColor+"
");
//-->
</SCRIPT>
</BODY>
</HTML>实例六（4.2）、
本实例主要介绍了Document对象读取表单元素的使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function firstSubmit(){
alert(document.form1.a01.value);//将表单名为a01的值显示出来
}
function copyFirstSubmit(){
alert(document.form1.a01.value);
document.form1.a02.value=document.form1.a01.value;//将表单名为a01的值给a02，取a01的值也可以使用、、、//document.form1.elements[0].value
}
//-->
</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">
<!--
var first = document.firstForm.name;
var second = document.secondForm.name;
//alert("第一个表单的名字："+first);//读取表单元素，将注释去点即可
//alert("第二个表单的名字："+second);
//alert("第二个表单的按钮的name是："+document.secondForm.elements[1].name);
//alert("第二个表单文本域的值："+document.secondForm.elements[0].value);
//alert("第一个文本域："+document.firstForm.firstText.value);
//-->
</SCRIPT>
<FORM name="form1" METHOD=POST ACTION="">
a01<INPUT TYPE="text" NAME="a01"/><INPUT TYPE="button" name="01s" value="提交" onclick="firstSubmit()"/>
a02<INPUT TYPE="text" NAME="a02"/><INPUT TYPE="button" name="02s" value="提交" onclick="copyFirstSubmit()"/>×在a01中输入值后再提交
</FORM>
</BODY>
</HTML>实例七（4.3）、
本实例主要介绍了Document对象读取表单元素的使用，一个注册验证代码
<html>
<head>
<title>用户注册</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.STYLE1 {color: #FFFFFF}
-->
</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>实例八（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">
<!--
function sel_coun(){
var country = document.form1.country.length; //得到radio个数
for(var i=0;i<country;i++){
if(form1.country[i].checked){
alert(form1.country[i].value);
break;
}else{
continue;
}
}
}
function sel_love(){
var country = document.form1.love.length; //得到checkbox个数
var love =""; //new Array();
for(var i=0;i<country;i++){
if(form1.love[i].checked){
love+=form1.love[i].value+"、";
}
}
love = love.substring(0,love.lastIndexOf("、"));
alert("你的爱好有:"+love)
}
//-->
</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();"/>
复选应用
<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();"/>
</FORM>
</BODY>
</HTML>实例九（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>
<a href="http://www.google.com" name="google" target="_blank">Google也可以</a>
<script language="javascript">
document.write("第一个连接的信息:
");
document.write("<b>href:</b>"+document.links[0].href+"
");
document.write("<b>pathname:</b>"+document.links[0].pathname+"
");
document.write("<b>port:</b>"+document.links[0].port+"
");
document.write("<b>protocol:</b>"+document.links[0].protocol+"
");
document.write("<b>target:</b>"+document.links[0].target+"
");
document.write("
");
document.write("第二个连接的信息:
");
document.write("<b>href:</b>"+document.links[1].href+"
");
document.write("<b>pathname:</b>"+document.links[1].pathname+"
");
document.write("<b>port:</b>"+document.links[1].port+"
");
document.write("<b>protocol:</b>"+document.links[1].protocol+"
");
document.write("<b>target:</b>"+document.links[1].target+"
");
</script>
</form>
</div>
</body>
</html>实例十（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">
<a href="javascript:GetNext()">下一幅</a>
<a href="javascript:GetPrev()">上一幅</a>
</body>
</html>实例十一（6）、
本实例主要介绍了鼠标动作的使用，这个例子太简单了，可以多找点别点资料看看！
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>改变文字样式</title>
<style type="text/css">
.red{ color:red;
font-style:italic;
font-size:32;
}
.blue{color:blue;
font-size:36;
}
.black{color:black;
}
</style>
<script language="javascript">
function color(e)
{
switch(e.srcElement.id){ //获得标记的id
case "first":
document.getElementById("first").className="red"; //修改文字的样式
break;
case "second":
document.getElementById("second").className="blue";
break;
}
}
function clearText(e)
{
switch(e.srcElement.id){
case "first":
document.getElementById("first").className="black";
break;
case "second":
document.getElementById("second").className="black";
break;
}
}
</script>
</head>
<body>
<div id="first" onMouseOver="color(event);" onMouseOut="clearText(event);">我是新手，摸一下</div>
<div id="second" onMouseOver="color(event);" onMouseOut="clearText(event);">老油条了</div>
</body>
</html>实例十二、
本实例主要介绍了js访问XML节点的应用，读节点最基本的有2中方法，我分2个实例发上来，方便学习。
<html>
<head>
<title>访问XML文档</title>
<script language="javascript">
function GetInfo()
{
var document_xml = new ActiveXObject("Microsoft.XMLDOM");
document_xml.load("info.xml"); //加载info.xml
var RootNode = document_xml.documentElement; //获得info.xml文档的根节点
var FirstNode = RootNode.firstChild; //获得根标记的第一个子节点
var SecondNode = RootNode.lastChild; //获得根标记的最后一个子节点
var nameNode = FirstNode.firstChild;
var ageNode = nameNode.nextSibling; //获得nameNode节点的下一个兄弟结点
var sexNode = FirstNode.lastChild;
var str = "名称是:"+nameNode.firstChild.nodeValue+
"\n年龄是:"+ageNode.firstChild.nodeValue+
"\n性别是:"+sexNode.firstChild.nodeValue+
"\n描述是:"+SecondNode.firstChild.nodeValue;
alert(str);
}
</script>
</head>
<body>
<input type="button" name="Submit" value="按钮" onClick="GetInfo()">
</body>
</html>因为不能发附件，所有2个文件分别帖上来了，测试的时候分别保存即可。下面的是XML文件。说了一句废话，相信不会有人认为这个也是html！：）
<?xml version="1.0" encoding="gb2312"?>
<Info>
<basic country="china">
<name num="3">霍元甲</name>
<age>42</age>
<sex>男</sex>
</basic>
<description>精武门的创始人</description>
</Info>实例十三、
本实例主要介绍了js访问XML节点的应用，读节点的又一种方法，我上面发了一个，xml跟上面的一样就不重复了。
<html>
<head>
<title>按名称访问XML文档中的元素</title>
<script language="javascript">
function GetInfo()
{
var document_xml = new ActiveXObject("Microsoft.XMLDOM");
document_xml.load("info.xml");
var nameNode = document_xml.getElementsByTagName("name"); //获得文档中所有<name>标记
var ageNode = document_xml.getElementsByTagName("age"); //获得文档中所有<age>标记
var sexNode = document_xml.getElementsByTagName("sex"); //获得文档中所有<sex>标记
var desNode = document_xml.getElementsByTagName("description");//获得文档中所有<description标记>
var str = "名称是:"+nameNode(0).firstChild.nodeValue+
"\n年龄是:"+ageNode(0).firstChild.nodeValue+
"\n性别是:"+sexNode(0).firstChild.nodeValue+
"\n描述是:"+desNode(0).firstChild.nodeValue; //将这些标记的文本内容添加进变量str中
alert(str);
}
</script>
</head>
<body>
点下我看看》》》<input type="button" name="Submit" value="按钮" onClick="GetInfo()">
</body>
</html>Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：How to Auto Include a Javascript File_javascript技巧Article suivant：使用JS操作页面表格，元素的一些技巧_基础知识
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript