search

Home >Web Front-end >JS Tutorial >Share my process of learning js author aircy javascript learning tutorial

Share my process of learning js author aircy javascript learning tutorial

PHP中文网
PHP中文网Original
2016-05-16 19:19:441151browse

Foreword:
Since I came into contact with JS, I have never thoroughly studied a js book; starting from today, I will start from scratch, organize and share the js code in my learning process.
The code released in the future does not mean that all of it is original. On the contrary, many parts will come from the Internet, and of course it will not be less than that of Wuyou Script. I hope that after reading this, everyone will not
Reprimanding in the forum is “indecent” after all! I post it here purely to share it with friends who have been like me or are currently studying on the front lines; at the same time, I
I also hope to get more support from people here. If your friends have any suggestions and opinions, please leave a message. Let’s discuss together! thanks!

Example 1.
This example mainly introduces simple applications of navigator, cookie, screen, location objects, function calls, and prompt, alert, and confirm interactions. 

<!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=&#39;http://www.baidu.com&#39;;">点击我</a> 
 </BODY> 
</HTML>

Example 2.
This example mainly introduces the simple application of event objects and events. 

<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(&#39;鼠标在文本框中按下&#39;)">
 
键盘按下:<input type="text" name="textfield" onKeyDown="alert(&#39;键盘按下&#39;);">
 
event对象:
 
<input type="text" name="textfield" id="text" onClick="catchEvent();">
 
<input type="submit" name="Submit" value="提交" id="button" onClick="catchEvent();">
 
</body> 
</html>

Example 3.
This example mainly introduces the use of arrays and its slice() method 

<!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>

Example 4.
This example mainly introduces objects and the use of construction methods 

<!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>

Example 5 (4.1),
This example mainly introduces the use of Document objects 

<!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>

Example 6 (4.2),
This example mainly introduces the use of Document object to read form elements 

<!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>

Example 7 (4.3),
This example mainly introduces the use of Document object to read form elements, a registration verification code

<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>

Example 8 (4.4),
This example mainly introduces the use of Document objects to read form elements (the use of radio buttons and check buttons) 

<!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>

Example 9 (4.5),
This example mainly introduces the use of Document objects to read form elements (use of drop-down menus and link attributes) 

<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>

Example 10 (5),
This The example mainly introduces the use of image attributes, simulating Baidu image display 

<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>

Example 11 (6),
This example mainly introduces the use of mouse actions. This example is too simple and can be more Find some other information to look at! 

<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>

Example 12.
This example mainly introduces the application of js to access XML nodes. There are two basic methods for reading nodes. I will post them in two examples to facilitate learning. 

<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>

Because attachments cannot be sent, all 2 files are posted separately and can be saved separately during testing. Below is the XML file. I said nonsense, I believe no one will think that this is also html! :) 

<?xml version="1.0" encoding="gb2312"?> 
<Info> 
    <basic country="china"> 
        <name num="3">霍元甲</name> 
        <age>42</age> 
        <sex>男</sex> 
    </basic> 
    <description>精武门的创始人</description> 
</Info>

Example 13.
This example mainly introduces the application of js to access XML nodes. It is another way to read nodes. I posted one above. The xml is the same as above. Not repeated. 

<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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to Auto Include a Javascript File_javascript技巧Next article：How to Auto Include a Javascript File_javascript技巧

Related articles

See more