JavaScript methods and techniques

This log introducing JavaScript is what I saw on Clang. The author's introduction is quite comprehensive, so I can reprint it and let interested friends take a look. Haha~~~

Sometimes you are proficient in a language, but you will find that you are actually dealing with other languages ​​all day long. Maybe you think these are insignificant and will not affect your development progress, but it is precisely these things you don’t pay attention to will waste your time. I always thought that I was proficient in JavaScript a few years ago. Until now, I feel that JavaScript is much more and more complicated and powerful than I imagined. I began to worship it, just like worshiping all OOP languages~
Taking advantage of the holidays, organize the methods and techniques related to JavaScript, so that everyone who is worried about JavaScript understands that JavaScript is just like that! And I hope JavaScript can also become your friend, so that you can suddenly become enlightened and apply it better in the project~

Suitable for reading range: People who know nothing about JavaScript ~ are only one step away from mastery
Basics: HTML


JavaScript is just like this 1: Basics

1. Create a script block

1: <script language=”JavaScript”>
2: JavaScript code goes here
3: </script> 



2 Hide script code

1: <script language=”JavaScript”>
2: <!--
3: (“Hello”);
4: // -->
5: </script> 


Related code will not be executed in browsers that do not support JavaScript

3. Display when the browser does not support it

1: <noscript>
2: Hello to the non-JavaScript browser.
3: </noscript> 



4 Link external script files

1: <script language=”JavaScript” src="/it//”"”></script> 


5 Comment scripts

1: // This is a comment
2: (“Hello”); // This is a comment
3: /*
4: All of this
5: is a comment
6: */ 



6 Output to the browser

1: (“<strong>Hello</strong>”); 



7 Define 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 = (“there”);
5: (therePlace);
6: // -->
7: </script> 



10 String replacement

1: (“Monday”,”Friday”); 


11 Format string

1: <script language=”JavaScript”>
2: <!--
3: var myVariable = “Hello there”;
4: (() + “<br>”);
5: (() + “<br>”);
6: (() + “<br>”);
7: (() + “<br>”);
8: ((“red”) + “<br>”);
9: ((“18pt”) + “<br>”);
10: (() + “<br>”);
11: (() + “<br>”);
12: (() + “<br>”);
13: (() + “<br>”);
14: (() + “<br>”);
15: (() + “<br>”);
16: (() + “<br>”);
17: 
18: var firstString = “My String”;
19: var finalString = ().toLowerCase().fontcolor(“red”);
20: // -->
21: </script> 



12 Create an array

1: <script language=”JavaScript”>
2: <!--
3: var myArray = new Array(5);
4: myArray[0] = “First 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(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);
10: // -->
11: </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: (());
10: // -->
11: </script> 



14 Split string

1: <script language=”JavaScript”>
2: <!--
3: var myVariable = “a,b,c,d”;
4: var stringArray = (“,”);
5: (stringArray[0]);
6: (stringArray[1]);
7: (stringArray[2]);
8: (stringArray[3]);
9: // -->
10: </script> 



15 Pop-up warning message

1: <script language=”JavaScript”>
2: <!--
3: (“Hello”);
4: // -->
5: </script> 



16 The confirmation box pops up

1: <script language=”JavaScript”>
2: <!--
3: var result = (“Click OK to continue”);
4: // -->
5: </script> 



17 Defining a function

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 functions

1: <a href=”#” onClick=”functionName()”>Link text</a>
2: <a href="/”javascript:functionName"()”>Link text</a> 



19 Execute the function after the page loads

1: <body onLoad=”functionName();”>
2: Body of the page
3: </body> 


20 Conditional judgment

1: <script>
2: <!--
3: var userChoice = (“Choose OK or Cancel”);
4: var result = (userChoice == true) ? “OK” : “Cancel”;
5: (result);
6: // -->
7: </script> 



21 Specify the number of times to cycle

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 < ; i++) { 
8: (myArray[i] + “<br>”);
9: }
10: // -->
11: </script> 



22 Set future execution

1: <script>
2: <!--
3: function hello() { 
4: (“Hello”);
5: }
6: (“hello()”,5000);
7: // -->
8: </script> 



23 Timed execution function

1: <script>
2: <!--
3: function hello() { 
4: (“Hello”);
5: (“hello()”,5000);
6: }
7: (“hello()”,5000);
8: // -->
9: </script> 



24 Cancel the timing execution

1: <script>
2: <!--
3: function hello() { 
4: (“Hello”);
5: }
6: var myTimeout = (“hello()”,5000);
7: (myTimeout);
8: // -->
9: </script> 



25 Execute functions when page uninstallation

1: <body onUnload=”functionName();”>
2: Body of the page
3: </body> 

JavaScript is just like that 2: Browser output


26 Access document object

1: <script language=”JavaScript”>
2: var myURL = ;
3: (myURL);
4: </script> 



27 Dynamic output HTML

1: <script language=”JavaScript”>
2: (“<p>Here's some information about this document:</p>”);
3: (“<ul>”);
4: (“<li>Referring Document: “ +  + “</li>”);
5: (“<li>Domain: “ +  + “</li>”);
6: (“<li>URL: “ +  + “</li>”);
7: (“</ul>”);
8: </script> 


28 Output line break

1: (“<strong>a</strong>”);
2: (“b”); 



29 Output date

1: <script language=”JavaScript”>
2: var thisDate = new Date();
3: (());
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 = ()/60;
5: var timeZoneDifference = userOffset - myOffset;
6: (() + timeZoneDifference);
7: (“The time and date in Central Europe is: “ + ());
8: </script> 


31 Set date output format

1: <script language=”JavaScript”>
2: var thisDate = new Date();
3: var thisTimeString = () + “:” + ();
4: var thisDateString = () + “/” + () + “/” + ();
5: (thisTimeString + “ on “ + thisDateString);
6: </script> 


32 Read URL parameters

1: <script language=”JavaScript”>
2: var urlParts = (“?”);
3: var parameterParts = urlParts[1].split(“&”);
4: for (i = 0; i < ; i++) { 
5: var pairParts = parameterParts[i].split(“=”);
6: var pairName = pairParts[0];
7: var pairValue = pairParts[1];
8: (pairName + “ ：“ +pairValue );
9: }
10: </script> 

Do you think HTML is stateless?

33 Open a new document object

1: <script language=”JavaScript”>
2: function newDocument() { 
3: ();
4: (“<p>This is a New Document.</p>”);
5: ();
6: }
7: </script> 



34 page jump

1: <script language=”JavaScript”>
2:  = “http:///”;
3: </script> 



35 Add web page loading progress window

1: <html>
2: <head>
3: <script language='javaScript'>
4: var placeHolder = ('','placeholder','width=200,height=200');
5: </script>
6: <title>The Main Page</title>
7: </head>
8: <body onLoad='()'>
9: <p>This is the main page</p>
10: </body>
11: </html> 



JavaScript is just like this 3: Image



36 Read image properties

1: <img src="/it//”"” name=”myImage”>
2: <a href=”# ” onClick=”()”>Width</a>
3: 


37 Dynamically loading images

1: <script language=”JavaScript”>
2: myImage = new Image;
3:  = “”;
4: </script> 


38 Simple image replacement

1: <script language=”JavaScript”>
2: rollImage = new Image;
3:  = “”;
4: defaultImage = new Image;
5:  = “”;
6: </script>
7: <a href="/”myUrl"” onMouseOver=” = ;”
8: onMouseOut=” = ;”>
9: <img src="/it//”"” name=”myImage” width=100 height=100 border=0> 


39 Random display of images

1: <script language=”JavaScript”>
2: var imageList = new Array;
3: imageList[0] = “”;
4: imageList[1] = “”;
5: imageList[2] = “”;
6: imageList[3] = “”;
7: var imageChoice = (() * );
8: (‘<img src=”' + imageList[imageChoice] + ‘“>');
9: </script> 


40 Function-implemented 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(“”,””);
13: </script>
14: <a href=”#” onMouseOver=”document. = rollImage1[replacement].src;”
15: onMouseOut=”document. = rollImage1[source].src;”>
16: <img src="/it//”"” width=100 name=”myImage1” border=0>
17: </a> 


41 Create a slide

1: <script language=”JavaScript”>
2: var imageList = new Array;
3: imageList[0] = new Image;
4: imageList[0].src = “”;
5: imageList[1] = new Image;
6: imageList[1].src = “”;
7: imageList[2] = new Image;
8: imageList[2].src = “”;
9: imageList[3] = new Image;
10: imageList[3].src = “”;
11: function slideShow(imageNumber) { 
12:  = imageList[imageNumber].src;
13: imageNumber += 1;
14: if (imageNumber < ) { 
15: (“slideShow(“ + imageNumber + “)”,3000);
16: }
17: }
18: </script>
19: </head>
20: <body onLoad=”slideShow(0)”>
21: <img src="/it//”"” width=100 name=”slideShow”> 


42 Random Advertising Pictures

1: <script language=”JavaScript”>
2: var imageList = new Array;
3: imageList[0] = “”;
4: imageList[1] = “”;
5: imageList[2] = “”;
6: imageList[3] = “”;
7: var urlList = new Array;
8: urlList[0] = “/”;
9: urlList[1] = “/”;
10: urlList[2] = “/”;
11: urlList[3] = “/”;
12: var imageChoice = (() * );
13: (‘<a href=”' + urlList[imageChoice] + ‘“><img src=”' + imageList[imageChoice] + ‘“></a>');
14: </script> 

JavaScript is just like this 4: Forms


Let's continue to write JS first. That's it.
43 Form composition

1: <form method=”post” action=”” 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 Access the text box content in the form

1: <form name=”myForm”>
2: <input type=”text” name=”myText”>
3: </form>
4: <a href='#' onClick='();'>Check Text Field</a> 


45 Dynamically copy text box content

1: <form name=”myForm”>
2: Enter some Text: <input type=”text” name=”myText”><br>
3: Copy Text: <input type=”text” name=”copyText”>
4: </form>
5: <a href=”#” onClick=” =
6: ;”>Copy Text Field</a> 


46 Detect changes in text boxes

1: <form name=”myForm”>
2: Enter some Text: <input type=”text” name=”myText” onChange=”alert();”>
3: </form> 


47 Access the selected Select

1: <form name=”myForm”>
2: <select name=”mySelect”>
3: <option value=”First Choice”>1</option>
4: <option value=”Second Choice”>2</option>
5: <option value=”Third Choice”>3</option>
6: </select>
7: </form>
8: <a href='#' onClick='alert();'>Check Selection List</a> 


48 Dynamically add Select item

1: <form name=”myForm”>
2: <select name=”mySelect”>
3: <option value=”First Choice”>1</option>
4: <option value=”Second Choice”>2</option>
5: </select>
6: </form>
7: <script language=”JavaScript”>
8: ++;
9: [ - 1].text = “3”;
10: [ - 1].value = “Third Choice”;
11: </script> 


49 Verification Form Fields

1: <script language=”JavaScript”>
2: function checkField(field) { 
3: if ( == “”) { 
4: (“You must enter a value in the field”);
5: ();
6: }
7: }
8: </script>
9: <form name=”myForm” action=””>
10: Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”>
11: <br><input type=”submit”>
12: </form> 


50 Verify the Select item

1: function checkList(selection) { 
2: if ( == 0) { 
3: (“You must make a selection from the list.”);
4: return false;
5: }
6: return true;
7: } 


51 The action of dynamically changing the form

1: <form name=”myForm” action=””>
2: Username: <input type=”text” name=”username”><br>
3: Password: <input type=”password” name=”password”><br>
4: <input type=”button” value=”Login” onClick=”();”>
5: <input type=”button” value=”Register” onClick=” = ‘'; ();”>
6: <input type=”button” value=”Retrieve Password” onClick=” = ‘'; ();”>
7: </form> 


52 Use the image button

1: <form name=”myForm” action=””>
2: Username: <input type=”text” name=”username”><br>
3: Password: <input type=”password”name=”password”><br>
4: <input type=”image” src="/it//”"” 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 < ; i++) { 
6: newItem += (i) + '.';
7: }
8: return newItem;
9: }
10: function encryptForm(myForm) { 
11: for (i=0; i < ; i++) { 
12: [i].value = encrypt([i].value);
13: }
14: }
15: 
16: //-->
17: </SCRIPT>
18: <form name='myForm' onSubmit='encryptForm(this); ();'>
19: Enter Some Text: <input type=text name=myField><input type=submit>
20: </form> 




JavaScript is just like this 5: Window and Frame


54 Text prompts for changing the browser status bar

1: <script language=”JavaScript”>
2:  = “A new status message”;
3: </script> 


55 The confirmation prompt box pops up

1: <script language=”JavaScript”>
2: var userChoice = (“Click OK or Cancel”);
3: if (userChoice) { 
4: (“You chose OK”);
5: } else { 
6: (“You chose Cancel”);
7: }
8: </script> 


56 Prompt input

1: <script language=”JavaScript”>
2: var userName = (“Please Enter Your Name”,”Enter Your Name Here”);
3: (“Your Name is “ + userName);
4: </script> 


57 Open a new window

1://Open a new browser window with the name myNewWindow
2: <script language=”JavaScript”>
3: (“http:///”,”myNewWindow”);
4: </script> 


58 Set the size of the new window

1: <script language=”JavaScript”>
2: (“http:///”,”myNewWindow”,'height=300,width=300');
3: </script> 


59 Set the location of a new window

1: <script language=”JavaScript”>
2: (“http:///”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
3: </script> 


60 Whether to display the toolbar and scrollbar

1: <script language=”JavaScript”>
2: (“http: 


61 Is it possible to scale the size of a new window

1: <script language=”JavaScript”>
2: ('http:///' , 'myNewWindow', 'resizable=yes' );</script> 


62 Load a new document to the current window

1: <a href='#' onClick=' = '';' >Open New Document</a> 


63 Set the scrolling position of the page

1: <script language=”JavaScript”>
2: if () { //If it is an IE browser, use the scrollTop property
3:  = 200;
4: } else { //If it is a NetScape browser, use the pageYOffset property
5:  = 200;
6: }</script> 


64 Open a full screen window in IE

1: <a href='#' onClick=”('/','newWindow','fullScreen=yes');”>Open a full-screen window</a> 


65 Operations of new window and parent window

1: <script language=”JavaScript”>
2://Define a new window
3: var newWindow = (“”,”newWindow”);
4:();//Close the open new window in the parent window
5: </script>
6: Close the parent window in a new window
7: () 


66 Write content in a new window

1: <script language=”JavaScript”>
2: var newWindow = (“”,”newWindow”);
3: ();
4: (“This is a new window”);
5: ();
6: </script> 


67 Loading the page to the frame page

1: <frameset cols=”50%,*”>
2: <frame name=”frame1” src="/it//”"”>
3: <frame name=”frame2” src="/it//”about:blank"”>
4: </frameset>
5: Loading the page in frame2 in frame1
6: parent. = “”; 


68 Share scripts between frame pages
If there is a script in the html file in frame1

1: function doAlert() { 
2: (“Frame 1 is loaded”);
3: } 

Then this method can be called in frame2

1: <body onLoad=”parent.();”>
2: This is frame 2.
3: </body> 


69 Data Public
Data items can be defined on the frame 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="/it//”"”>
6: <frame name=”frame2” src="/it//”"”>
7: </frameset> 


In this way, the variable persistentVariable can be used in frame1 and frame2.
70 Framework Code Library
Based on some of the above ideas, we can use a hidden framework page as the code library for the entire framework set

1: <frameset cols=”0,50%,*”>
2: <frame name=”codeFrame” src="/it//”"”>
3: <frame name=”frame1” src="/it//”"”>
4: <frame name=”frame2” src="/it//”"”>
5: </frameset>