Javascript| Tips
This is a blog about JavaScript, which I saw on the clang. The author introduced quite comprehensive, so reprinted to let interested friends to see. Oh ~ ~ ~ ~
There are times when you are proficient in a language, but it turns out that you're dealing with other languages all day, and maybe you think it's trivial and won't affect your development, but it's the things that you don't value that will waste you a lot of time, and I always thought I was proficient in JavaScript a few years ago, until now , I grew to think that JavaScript was far more complex and powerful than I had imagined, and I started worshipping it like all OOP languages.
Take advantage of the festive space, put the methods and techniques of JavaScript together, and let everyone who is bothered by JavaScript understand that JavaScript is so! And hope that JavaScript can also become your friend, let you suddenly enlightened, in the project better application ~
Fit to read: Know nothing about JavaScript ~ one step away from mastery
Basics: HTML
That's what JavaScript is about. 1: basic knowledge
1 Creating script blocks
1: <script language= "JavaScript" >
2:javascript Code goes here
3: </script>
2 Hide Script code
1: <script language= "JavaScript" >
2: <!--
3:document.write ("Hello");
4://-->
5: </script>
Do not execute related code in browsers that do not support JavaScript
3 when the browser does not support the display
1: <noscript>
2:hello to the Non-javascript browser.
3: </noscript>
4 Linking external script files
1: <script language= "JavaScript" src= "/" Filename.js "></script>
5 Annotation Scripts
1://This is a comment
2:document.write ("Hello"); This is a comment
3:/*
4:all of this
5:is a Comment
6: */
6 Output to Browser
1:document.write ("<strong>Hello</strong>");
7 Defining variables
1:var myvariable = "some value";
8 String Addition
1:var myString = "String1" + "String2";
9 String Search
1: <script language= "JavaScript" >
2: <!--
3:var myvariable = "Hello There";
4:var thereplace = Myvariable.search ("there");
5:document.write (Thereplace);
6://-->
7: </script>
10 String Replacement
1:thisvar.replace ("Monday", "Friday");
11 Formatting strings
1: <script language= "JavaScript" >
2: <!--
3:var myvariable = "Hello There";
4:document.write (Myvariable.big () + "<br>");
5:document.write (Myvariable.blink () + "<br>");
6:document.write (Myvariable.bold () + "<br>");
7:document.write (myvariable.fixed () + "<br>");
8:document.write (Myvariable.fontcolor ("red") + "<br>");
9:document.write (Myvariable.fontsize ("18pt") + "<br>");
10:document.write (Myvariable.italics () + "<br>");
11:document.write (Myvariable.small () + "<br>");
12:document.write (Myvariable.strike () + "<br>");
13:document.write (Myvariable.sub () + "<br>");
14:document.write (Myvariable.sup () + "<br>");
15:document.write (Myvariable.tolowercase () + "<br>");
16:document.write (Myvariable.touppercase () + "<br>");
17:
18:var firststring = "My String";
19:var finalstring = Firststring.bold (). toLowerCase (). FontColor ("Red");
://-->
</script>
12 Creating an array
1: <script language= "JavaScript" >
2: <!--
3:var myarray = new Array (5);
4:myarray[0] = "Entry";
5:MYARRAY[1] = "Second Entry";
6:MYARRAY[2] = "Third Entry";
7:MYARRAY[3] = "Fourth Entry";
8:myarray[4] = "Fifth Entry";
9:var Anotherarray = new Array ("Entry", "Second Entry", "Third Entry", "Fourth Entry", "fifth Entry");
Ten://-->
One: </script>
13 Array Sorting
1: <script language= "JavaScript" >
2: <!--
3:var myarray = new Array (5);
4:myarray[0] = "Z";
5:MYARRAY[1] = "C";
6:MYARRAY[2] = "D";
7:MYARRAY[3] = "a";
8:MYARRAY[4] = "Q";
9:document.write (Myarray.sort ());
Ten://-->
One: </script>
14 Split string
1: <script language= "JavaScript" >
2: <!--
3:var myvariable = "A,b,c,d";
4:var Stringarray = Myvariable.split (",");
5:document.write (Stringarray[0]);
6:document.write (stringarray[1]);
7:document.write (stringarray[2]);
8:document.write (Stringarray[3]);
9://-->
: </script>
15 Pop-up warning message
1: <script language= "JavaScript" >
2: <!--
3:window.alert ("Hello");
4://-->
5: </script>
16 Pop-up Confirmation box
1: <script language= "JavaScript" >
2: <!--
3:var result = Window.confirm ("Click OK to continue");
4://-->
5: </script>
17 Defining functions
1: <script language= "JavaScript" >
2: <!--
3:function Multiple (number1,number2) {
4:var result = Number1 * NUMBER2;
5:return result;
6:}
7://-->
8: </script>
18 Calling JS function
1: <a href= "#" onclick= "functionname ()" >link text</a>
2: <a href= "/" Javascript:functionname "()" >link text</a>
19 Execute function after page load completes
1: <body onload= "functionname" (); >
2:body of the page
3: </body>
20 Piece Judgment
1: <script>
2: <!--
3:var Userchoice = window.confirm ("Choose OK or Cancel");
4:var result = (Userchoice = = True)? "OK": "Cancel";
5:document.write (result);
6://-->
7: </script>
21 specified number of cycles
1: <script>
2: <!--
3:var myarray = new Array (3);
4:myarray[0] = "Item 0";
5:MYARRAY[1] = "Item 1";
6:MYARRAY[2] = "Item 2";
7:for (i = 0; i < myarray.length; i++) {
8:document.write (Myarray[i] + "<br>");
9:}
Ten://-->
One: </script>
22 Setting Future execution
1: <script>
2: <!--
3:function Hello () {
4:window.alert ("Hello");
5:}
6:window.settimeout ("Hello ()", 5000);
7://-->
8: </script>
23 Timed execution function
1: <script>
2: <!--
3:function Hello () {
4:window.alert ("Hello");
5:window.settimeout ("Hello ()", 5000);
6:}
7:window.settimeout ("Hello ()", 5000);
8://-->
9: </script>
24 Cancel timed execution
1: <script>
2: <!--
3:function Hello () {
4:window.alert ("Hello");
5:}
6:var mytimeout = window.settimeout ("Hello ()", 5000);
7:window.cleartimeout (mytimeout);
8://-->
9: </script>
25 Executing functions on page Uninstall
1: <body onunload= "functionname" (); >
2:body of the page
3: </body>
That's what JavaScript is about. 2: Browser output
26 Accessing the Document object
1: <script language= "JavaScript" >
2:var Myurl = document. URL;
3:window.alert (Myurl);
4: </script>
27 Dynamic Output HTML
1: <script language= "JavaScript" >
2:document.write ("<p>here ' s Some information about this document:</p>");
3:document.write ("<ul>");
4:document.write ("<li>referring Document:" + document.referrer + "</li>");
5:document.write ("<li>domain:" + document.domain + "</li>");
6:document.write ("<li>url:" + document.) URL + "</li>");
7:document.write ("</ul>");
8: </script>
28 Output Line Wrapping
1:document.writeln ("<strong>a</strong>");
2:document.writeln ("B");
29 Output Date
1: <script language= "JavaScript" >
2:var thisdate = new Date ();
3:document.write (Thisdate.tostring ());
4: </script>
30 time zone for the specified date
1: <script language= "JavaScript" >
2:var Myoffset =-2;
3:var currentdate = new Date ();
4:var Useroffset = Currentdate.gettimezoneoffset ()/60;
5:var timezonedifference = Useroffset-myoffset;
6:currentdate.sethours (currentdate.gethours () + timezonedifference);
7:document.write ("The time and date in the", Europe is: "+ currentdate.tolocalestring ());
8: </script>
31 Set Date output format
1: <script language= "JavaScript" >
2:var thisdate = new Date ();
3:var thistimestring = thisdate.gethours () + ":" + thisdate.getminutes ();
4:var thisdatestring = thisdate.getfullyear () + "/" + thisdate.getmonth () + "/" + thisdate.getdate ();
5:document.write (thistimestring + "on" + thisdatestring);
6: </script>
32 Reading URL Parameters
1: <script language= "JavaScript" >
2:var urlparts = document. Url.split ("?");
3:var parameterparts = Urlparts[1].split ("&");
4:for (i = 0; i < parameterparts.length; i++) {
5:var pairparts = parameterparts[i].split ("=");
6:var pairname = pairparts[0];
7:var pairvalue = pairparts[1];
8:document.write (Pairname + ":" +pairvalue);
9:}
: </script>
Do you still think HTML is stateless?
33 Open a new Document object
1: <script language= "JavaScript" >
2:function NewDocument () {
3:document.open ();
4:document.write ("<p>this is a New document.</p>");
5:document.close ();
6:}
7: </script>
34 Page Jump
1: <script language= "JavaScript" >
2:window.location = "http://www.liu21st.com/";
3: </script>
35 Add Page Load Progress window
1: 2: 3: <script language= ' JavaScript ' >
4:var placeholder = window.open (' holder.html ', ' placeholder ', ' width=200,height=200 ');
5: </script>
6: <title>the Main page</title>
7: 8: <body >
9: <p>this is the main page</p>
: </body>
One:
That's what JavaScript is about. 3: Images
36 Reading Image Properties
1:
2: <a href= "#" onclick= "Window.alert (document.myImage.width)" >Width</a>
3:
37 Dynamically loading images
1: <script language= "JavaScript" >
2:myimage = new Image;
3:MYIMAGE.SRC = "Tellers1.jpg";
4: </script>
38 Simple Image Replacement
1: <script language= "JavaScript" >
2:rollimage = new Image;
3:ROLLIMAGE.SRC = "Rollimage1.jpg";
4:defaultimage = new Image;
5:DEFAULTIMAGE.SRC = "Image1.jpg";
6: </script>
7: <a href= "/" Myurl "" onmouseover= "document.myImage.src = rollimage.src;"
8:onmouseout= "document.myImage.src = defaultimage.src;" >
9:
39 Random Display Image
1: <script language= "JavaScript" >
2:var imageList = new Array;
3:imagelist[0] = "image1.jpg";
4:IMAGELIST[1] = "image2.jpg";
5:IMAGELIST[2] = "image3.jpg";
6:IMAGELIST[3] = "image4.jpg";
7:var Imagechoice = Math.floor (Math.random () * imagelist.length);
8:document.write (' ');
9: </script>
40 function implementation of image replacement
1: <script language= "JavaScript" >
2:var Source = 0;
3:var replacement = 1;
4:function Createrollover (originalimage,replacementimage) {
5:var Imagearray = new Array;
6:imagearray[source] = new Image;
7:IMAGEARRAY[SOURCE].SRC = Originalimage;
8:imagearray[replacement] = new Image;
9:IMAGEARRAY[REPLACEMENT].SRC = Replacementimage;
10:return Imagearray;
11:}
12:var rollImage1 = Createrollover ("image1.jpg", "rollimage1.jpg");
</script>
<a href= "#" onmouseover= "document.myImage1.src = rollimage1[replacement].src;"
15:onmouseout= "document.myImage1.src = rollimage1[source].src;" >
: : </a>
41 Creating slides
1: <script language= "JavaScript" >
2:var imageList = new Array;
3:imagelist[0] = new Image;
4:IMAGELIST[0].SRC = "Image1.jpg";
5:IMAGELIST[1] = new Image;
6:IMAGELIST[1].SRC = "Image2.jpg";
7:IMAGELIST[2] = new Image;
8:IMAGELIST[2].SRC = "Image3.jpg";
9:IMAGELIST[3] = new Image;
10:IMAGELIST[3].SRC = "Image4.jpg";
11:function Slideshow (imagenumber) {
12:DOCUMENT.SLIDESHOW.SRC = IMAGELIST[IMAGENUMBER].SRC;
13:imagenumber + 1;
14:if (Imagenumber < imagelist.length) {
15:window.settimeout ("slideshow (" + Imagenumber + ")", 3000);
16:}
17:}
: </script>
: £ <body onload= "slideshow (0)" >
:
42 Random Advertising Pictures
1: <script language= "JavaScript" >
2:var imageList = new Array;
3:imagelist[0] = "image1.jpg";
4:IMAGELIST[1] = "image2.jpg";
5:IMAGELIST[2] = "image3.jpg";
6:IMAGELIST[3] = "image4.jpg";
7:var urllist = new Array;
8:urllist[0] = "http://some.host/";
9:URLLIST[1] = "http://another.host/";
10:URLLIST[2] = "http://somewhere.else/";
11:URLLIST[3] = "http://right.here/";
12:var Imagechoice = Math.floor (Math.random () * imagelist.length);
13:document.write (' <a href= "' + Urllist[imagechoice] + '" ></A&G t; ');
: </script>
That's what JavaScript is about. 4: Form
or continue to write the first JS on this series of things ~
43 Form Forms
1: <form method= "POST" action= "target.html" name= "Thisform" >
2: <input type= "text" name= "MyText" >
3: <select name= "Myselect" >
4: <option value= "1" >first choice</option>
5: <option value= "2" >second choice</option>
6: </select>
7: <br>
8: <input type= "Submit" value= "Submit Me" >
9: </form>
44 Accessing the contents of a text box in a form
1: <form name= "MyForm" >
2: <input type= "text" name= "MyText" >
3: </form>
4: <a href= ' # ' >check Selection list</a>
48 Dynamic Add Select item
1: <form name= "MyForm" >
2: <select name= "Myselect" >
3: <option value= "The Choice" >1</option>
4: <option value= "Second Choice" >2</option>
5: </select>
6: </form>
7: <script language= "JavaScript" >
8:document.myform.myselect.length++;
9:document.myform.myselect.options[document.myform.myselect.length-1].text = "3";
10:document.myform.myselect.options[document.myform.myselect.length-1].value = "Third Choice";
One: </script>
49 Validating form Fields
1: <script language= "JavaScript" >
2:function CheckField (field) {
3:if (Field.value = = "") {
4:window.alert ("You must enter a value in the field");
5:field.focus ();
6:}
7:}
8: </script>
9: <form name= "MyForm" action= "target.html" >
10:text Field: <input type= "Text" name= "MyField" onblur= "CheckField" (This) >
One: <br><input type= "Submit" >
</form>
50 Validating Select items
1:function Checklist (selection) {
2:if (Selection.length = = 0) {
3:window.alert ("You must make a selection from the list.");
4:return false;
5:}
6:return true;
7:}
51 dynamically changing the action of a form
1: <form name= "MyForm" action= "login.html" >
2:username: <input type= "text" name= "Username" ><br>
3:password: <input type= "Password" name= "Password" ><br>
4: <input type= "button" value= "Login" onclick= "This.form.submit ();" >
5: <input type= "button" value= "Register" onclick= "this.form.action = ' register.html '; This.form.submit (); " >
6: <input type= "button" "value=" Retrieve Password "onclick=" this.form.action = ' password.html '; This.form.submit (); " >
7: </form>
52 Using image buttons
1: <form name= "MyForm" action= "login.html" >
2:username: <input type= "text" name= "Username" ><br>
3:password: <input type= "Password" name= "Password" ><br>
4: <input type= "image" Src= "http://www.webjx.com/" Login.gif "" value= "Login" >
5: </form>
6:
53 Encryption of form data
1: <script language= ' JavaScript ' >
2: <!--
3:function Encrypt (item) {
4:var newitem = ';
5:for (i=0 i < item.length; i++) {
6:newitem + + = item.charcodeat (i) + '. ';
7:}
8:return NewItem;
9:}
10:function Encryptform (myForm) {
11:for (i=0 i < myForm.elements.length; i++) {
12:myform.elements[i].value = Encrypt (Myform.elements[i].value);
13:}
14:}
15:
://-->
: </SCRIPT>
: <form name= ' myForm '); >open a Full-screen window</a>
65 actions for new windows and parent windows
1: <script language= "JavaScript" >
2://define New window
3:var NewWindow = window.open ("128a.html", "NewWindow");
4:newwindow.close (); Close a new open window in a parent window
5: </script>
6: Close the parent window in a new window
7:window.opener.close ()
66 writing to the new window
1: <script language= "JavaScript" >
2:var NewWindow = window.open ("", "NewWindow");
3:newwindow.document.open ();
4:newwindow.document.write ("This is a new window");
5:newwindow.document.close ();
6: </script>
67 load page to frames page
1: <frameset cols= "50%,*" >
2: <frame name= "frame1" src= "/" 135a.html "" >
3: <frame name= "frame2" src= "/" About:blank "" >
4: </frameset>
5: Load the page in the frame2 in frame1
6:parent.frame2.document.location = "135b.html";
68 Sharing scripts between frames pages
If there is a script in the HTML file in the FRAME1
1:function DoAlert () {
2:window.alert ("Frame 1 is loaded");
3:}
So you can call this method in Frame2
1: <body onload= "Parent.frame1.doAlert" (); >
2:this is frame 2.
3: </body>
69 Data public
You can define data items in a frames page so that the data can be shared by pages in multiple frames
1: <script language= "JavaScript" >
2:var persistentvariable = "This is a persistent value";
3: </script>
4: <frameset cols= "50%,*" >
5: <frame name= "frame1" src= "/" 138a.html "" >
6: <frame name= "frame2" src= "/" 138b.html "" >
7: </frameset>
This allows variables to be used in both frame1 and frame2 persistentvariable
70 Framework code Base
Based on some of the above ideas, we can use a hidden frame page as a code base for the entire frameset
1: <frameset cols= "0,50%,*" >
2: <frame name= "Codeframe" src= "/" 140code.html "" >
3: <frame name= "frame1" src= "/" 140a.html "" >
4: <frame name= "frame2" src= "/" 140b.html "" >
5: </frameset>