JavaScript methods and Techniques Encyclopedia

JavaScript methods and Techniques Encyclopedia _ Basics

Last Update:2017-01-18 Source: Internet

Author: User

Tags time and date

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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: 

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= "http://img.sxsky.net/it//" "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: 

7: </script>

10 String Replacement

1:thisvar.replace ("Monday", "Friday");

11 Formatting strings

1: <script language= "JavaScript" >

2: 

</script>

12 Creating an array

1: <script language= "JavaScript" >

2: 

One: </script>

13 Array Sorting

1: <script language= "JavaScript" >

2: 

One: </script>

14 Split string

1: <script language= "JavaScript" >

2: 

: </script>

15 Pop-up warning message

1: <script language= "JavaScript" >

2: 

5: </script>

16 Pop-up Confirmation box

1: <script language= "JavaScript" >

2: 

5: </script>

17 Defining functions

1: <script language= "JavaScript" >

2: 

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: 

7: </script>

21 specified number of cycles

1: <script>

2: 

One: </script>

22 Setting Future execution

1: <script>

2: 

8: </script>

23 Timed execution function

1: <script>

2: 

9: </script>

24 Cancel timed execution

1: <script>

2: 

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

2: <head>

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: </head>

8: <body onload= ' placeholder.close () ' >

9: <p>this is the main page</p>

: </body>

One: </html>

That's what JavaScript is about. 3: Images

36 Reading Image Properties

1: <img src= "yun_qi_img/transmission ripples mage1.jpg" "Name=" MyImage ">

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: <img src= "yun_qi_img/transmission ripples mage1.jpg" "Name=" MyImage "width=100 height=100

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 (' <img src= ' + imagelist[imagechoice] + ' > ');

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

: <img src= "yun_qi_img/transmission ripples mage1.jpg" "Width=100 name=" MyImage1 "border=0>

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

: </head>

£ <body onload= "slideshow (0)" >

: <img src= "yun_qi_img/transmission ripples mage1.jpg" "Width=100 name=" Slideshow ">

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] + '" ><img src= "' + Imagelist[imagechoice] + '" &GT;&LT;/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= ' # ' onclick= ' Window.alert (document.myForm.myText.value); ' >check Text field</a>

45 Dynamically copying text box contents

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= "Document.myForm.copyText.value =

6:document.myform.mytext.value; " >copy Text field</a>

46 Detecting changes in text boxes

1: <form name= "MyForm" >

2:enter some text: <input type= "text" name= "MyText" onchange= "alert (this.value);" >

3: </form>

47 Access to selected Select

1: <form name= "MyForm" >

2: <select name= "Myselect" >

3: <option value= "The 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 (document.myForm.mySelect.value); ' >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= "yun_qi_img/transmission 漧 ogin.gif" "value=" Login ">

5: </form>

6:

53 Encryption of form data

1: <script language= ' JavaScript ' >

2: 

: </SCRIPT>

<form name= ' myForm ' onsubmit= ' encryptform (this); Window.alert (this.myField.value); ' >

19:enter Some Text: <input type=text name=myfield><input type=submit>

</form>

That's what JavaScript is about. 5: windows and Frames

54 Change Browser status bar text hint

1: <script language= "JavaScript" >

2:window.status = "A new status message";

3: </script>

55 Pop-up confirmation Prompt box

1: <script language= "JavaScript" >

2:var Userchoice = window.confirm ("Click OK or Cancel");

3:if (Userchoice) {

4:document.write ("You chose OK");

5:} else {

6:document.write ("You chose Cancel");

7:}

8: </script>

56 Prompt input

1: <script language= "JavaScript" >

2:var userName = window.prompt ("Please enter Your name" and "Enter Your name here");

3:document.write ("Your Name is" + userName);

4: </script>

57 Open a new window

1://Open a new browser window called Mynewwindow

2: <script language= "JavaScript" >

3:window.open ("http://www.liu21st.com/", "Mynewwindow");

4: </script>

58 set the size of the new window

1: <script language= "JavaScript" >

2:window.open ("http://www.liu21st.com/", "Mynewwindow", ' height=300,width=300 ');

3: </script>

59 Set the location of the new window

1: <script language= "JavaScript" >

2:window.open ("http://www.liu21st.com/", "Mynewwindow", ' height=300,width=300,left=200,screenx=200,top=100, Screeny=100 ');

3: </script>

60 show toolbars and scroll bars

1: <script language= "JavaScript" >

2:window.open ("http:

61 whether the new window size can be scaled

1: <script language= "JavaScript" >

2:window.open (' http://www.liu21st.com/', ' Mynewwindow ', ' Resizable=yes ');</script>

62 load a new document into the current window

1: <a href= ' # ' onclick= ' document.location = ' 125a.html '; ' >open New document</a>

63 Set the scrolling position of the page

1: <script language= "JavaScript" >

2:if (document.all) {//If it is IE browser, use scrolltop property

3:document.body.scrolltop = 200;

4:} else {///if it is Netscape browser use the pageYOffset property

5:window.pageyoffset = 200;

6:}</script>

64 Open full-screen window in IE

1: <a href= ' # ' onclick= ' window.open (' http://www.juxta.com/', ' newwindow ', ' Fullscreen=yes '); " >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= "http://img.sxsky.net/it//" "135a.html" ">

3: <frame name= "frame2" src= "http://img.sxsky.net/it//" "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= "http://img.sxsky.net/it//" "138a.html" ">

6: <frame name= "frame2" src= "http://img.sxsky.net/it//" "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= "http://img.sxsky.net/it//" "140code.html" ">

3: <frame name= "frame1" src= "http://img.sxsky.net/it//" "140a.html" ">

4: <frame name= "frame2" src= "http://img.sxsky.net/it//" "140b.html" ">

5: </frameset>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More