Objective:
Contact with JS since, has not been a good study of a JS book; From today onwards, I will start to learn, organize and share My learning process JS code.
In the future published code does not mean that all belong to the original, but many parts will originate from the Internet, of course, will not be less than worry-free script. I hope you'll see.
In the forum reprimand, after all, "The face is not elegant"! Posted here, purely to share with friends who have been with me or who are learning the front lines, and I
Also hope to get more support here, if friends have any suggestions and comments, please a lot of threads. Discuss together! thanks!
Instance one,
This example mainly introduces the simple application of Navigator, cookie, screen, location object, function call and prompt, alert, confirm interaction.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <TITLE> New Document </TITLE> <script language= "JavaScript" > If confirm ("Really want to see it?") ") ==true) {var password; Password = prompt ("Password 520:", please enter the password!) "); if (password== "520") {alert ("Congratulations, go in!") "); document.write ("Test uses navigator object to detect browser following information:") document.write ("Browser name:" +navigator.appname+ "); document.write ("Browser version number:" +navigator.appversion+ "); document.write ("Running platform:" "+navigator.platform+"); document.write ("Whether cookies are supported:" +navigator.cookieenabled+ "); document.write ("Test uses screen object to obtain browser window resolution size:"); document.write (Window Height: "+screen.height+"); document.write (Window width: "+screen.width+"); document.write ("Color depth:" "+screen.colordepth+"); }else{message (); } function Loadingmessage (param) {alert ("Sorry!") "+param+" Password wrong Oh! Come again! "); return false; Function message () {loadingmessage ("Hello")} </script> </pead> <BODY> click Me </BODY> </HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Example Two,
This example mainly introduces the simple application of event objects and events.
<ptml> <pead> <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+ "captured" +eventtype+ "event"); function GetPosition () {var posx = Event.clientx; var posy = Event.clienty; Window.status = "Mouse position is (" +posx+ "," +posy+ ")"; function Getkey () {textfield.value=event.keycode+ "," +string.fromcharcode (Event.keycode); } </script> </pead> <body onmousemove= "GetPosition ()" > Mouse in text box press: <input type= "text" Name= "TEXTF Ield "onmousedown=" alert (' Mouse in text box ') ' > keyboard pressed: <input type= "text" name= "TextField" onkeydown= "alert (' keyboard pressed ');" > Event object: <input type= "text" name= "TextField" id= "text" onclick= "catchevent ();" > <input type= "Submit" name= "Submit" value= "submitted" id= "button" onclick= "catchevent (); > </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Example Three,
This example mainly introduces the use of array and its slice () method.
<textarea id="runcode20384"><! 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 N Ame= "Keywords" content= "" > <meta name= "Description" content= "" > </HEAD> <BODY> Array and its slice () side The method uses <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></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Example Four,
This example mainly introduces the use of object and construction method.
<textarea id="runcode59905"><! 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 N Ame= "Keywords" content= "" > <meta name= "Description" content= "" > </HEAD> <script language= "Javasc Ript "> <!--var myobject = new Object ();//Create an empty object myobject[0]=" 0 "; give the object a value of myobject[1]=" 1 "; document.write ("Use of Object" +myobject[0]); function person (name,age)//construction method {This.name=name; This.age=age; This.sayhello=function () {alert ("My name is" +this.name+ ", my Age is" +this.age "); The use of//--> </SCRIPT> <body> construction methods <script language= "JavaScript" > var person1 = new Perso N ("", "21"); Person1.sayhello (); </script> </body> </HTML></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Instance Five (4.1),
This example mainly introduces the use of document object.
<textarea id="runcode41342"><! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <script language=" JavaScript "> <!-- document.write ("File Address:" +document.location+ ") document.write (" file title: "+document.title+"); document.write ("Picture path:" +document.images[0].src+ "); document.write ("Text color:" +document.fgcolor+ "); document.write ("Background color:" "+document.bgcolor+"); --> </SCRIPT> </BODY> </HTML></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Example six (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)//Displays the table Single-name as A01 value} function Copyfirstsubmit () {alert (document.form1.a01.value); document.form1.a02.value=document.form1.a01.value;//the table Single-name as a A01 value to A02, the A01 value can also be used 、、、//document.form1.elements[0]. Value}//--> </SCRIPT> </HEAD> <BODY> <form name= "Firstform" Method=post acti On= "" > <input type= "text" name= "Firsttext" value= "Hello" > </FORM> <form name= "Secondform" ME Thod=post action= "" > <input type= "text" name= "Secondtext" value= "Hello" > <input type= "Submit" name= "heh" E "value=" haha > </FORM> <script language= "JavaScript" > <!--var-i = Document.firstForm.na Me var second = Document.secondform. Name; Alert ("First name of the form:" +first);//Read the form element to point the comment//alert ("the second form's name:" +second); Alert ("The name of the button for the second form is:" +document.secondform.elements[1].name); Alert ("Value of the second form text field:" +document.secondform.elements[0].value); Alert ("First text field:" +document.firstform.firsttext.value); --> </SCRIPT> <form name= "Form1" Method=post action= "" > A01<input type= "text" name= "A01"/>&L T;input type= "button" Name= "01s" value= "Submit" onclick= "Firstsubmit ()"/> a02<input type= "text" name= "A02"/>< ; Input type= "button" Name= "02s" value= "Submit" onclick= "Copyfirstsubmit ()"/>x Enter a value in A01 before submitting </FORM> </BODY> </HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Example seven (4.3),
This example mainly introduces the use of document object reading form elements, a registration verification code
<ptml> <pead> <title> User registration </title> <meta http-equiv= "Content-type" content= "text/htm L 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 ("User name cannot be empty!"); return false; else if (regform.userpassword.value== "") {alert ("Password cannot be empty!"); return false; else if (regform.userpassword.value!=regform.reuserpassword.value) {alert ("Two input passwords are inconsistent!"); return false; return true; Regform.submit (); Do not use form submit} </SCRIPT> </pead> <body> <form id= "register" name= "RegForm" method= " Post "action=" > <table width= "border=" 0 "align=" center "cellpadding=" 0 "cellspacing=" 1 "bgcolor=" #0099FF "> <tr> <TD align= "center" valign= "Middle" bgcolor= "#FFFFFF" > User registration </td> </tr> <tr> <TD align= "center" valign= "Middle" bgcolor= "#FFFFFF" > User account: <input name= "usernumber" text "type=" id= Mber "size=" ></td> </tr> <tr> <td align= "center" valign= "Middle" bgcolor= "#FFF FFF "> User password: <input name=" UserPassword "type=" text "id=" UserPassword "size=" "></td> </tr> <tr> <td align= "center" valign= "Middle" bgcolor= "#FFFFFF" > Confirm password: <input name= "Reuserpass Word "type=" text "id=" Reuserpassword "size=" ></td> </tr> <tr> <td align= "Cente R "valign=" Middle "bgcolor=" #FFFFFF > E-mail: <input name= "Email" type= "text" id= "email" size= "></td>" ; </tr><tr> <td align= "center" valign= "Middle" bgcolor= "#FFFFFF" ><input type= "button" Name= "Submit" value= " Submit "onclick=" Form_submit () "></td> </tr> </table> </FORM> </body> </ptml& Gt
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Current 1/3 page
123 Next read the full text
