JavaScript Learning Summary of the use of JS skills _javascript Skills

1 What if the browser doesn't support JavaScript?

A. Why does the browser not support? Most browsers have features that disable scripting, such as Chrome.

B. When JS is disabled to ensure that the Web page can still achieve its core functions (critical user requirements)

Example: Open a link in a new window, you can use the BOM's open () method

 function PopUp (winurl) {
   window.open (winurl, "popup", "width=,height=");
 }

The specific JS implementation has the following several scenarios:

Scenario One: Use JavaScript pseudo protocol:

<a href= "Javascript:popup (' http://www.example.com '); return false;" >Example</a>

Scenario Two: Use an inline event handler function:

<a href= "#" onclick= "popUp (' http://www.example.com '); return false;" ></a>

The above two kinds of implementation scheme, when JS is disabled, "open the link in a new window" this demand can not be satisfied. Therefore, can not be used to simply use JS and misuse JS. The following implementation of the scheme for JS reserved for the retreat, that is, the so-called smooth degradation (leaving JS after the forbidden Retreat)

Programme III: Smooth degradation of <a href= "http://www.example.com" onclick= "popUp (This.href;return false;)" >

2 How do I leave the structure and content of a Web page with the actions of a JavaScript script? Why do you have to split?

A. A clear division of labour, each of which is followed by collaboration:

Web page structure, content-made of HTML, style of Web page-done by CSS, Web behavior-by JavaScript

B. Separate JS code is actually very simple, JS code does not require that events must be processed in HTML, you can add an event to an external JS file on an element of an HTML document. For example:

 window.onload = paperlinks
   function paperlinks () {
   var links = document.getelementsbytagname ("a");
     for (var i=; i<links.length;i++) {
     if (Links[i].getattribute = "Popup") {
       Linnks[i].onclick = function () {
   popup (This.getattribute ("href"));
         return false;}}}
  

3 compatibility issues with browsers

New and old to take all, especially to pay attention to the old, that is, backward compatibility. Different browsers for JS support is not the same, such as

document.getelementsbyclassname (classname) IE6 does not support, add a check statement to check compatibility issues : if (! Document.getelementsbyclassname) return false;

4 Performance considerations

Why do you consider the performance of script execution? Performance is always a problem to consider, which involves the smooth loading of the pages you write.

How do I guarantee that the performance of the script is optimal?

A. Less access to the DOM and less use of tags, for example: less loop traversal

 var links = document.getElementsByTagName ("a");
   if (Links.length >) {for
     (var i=; i<links.length; i++) {
     //...
   }
 }

will be better than the following code performance

 if (document.getElementsByTagName ("a"). Length >) {
   var links = document.getelementsbytagname ("a");
   for (var i= i<links.length; i++) {
   //...
   }
 }

B. Merge script (JS code), reduce the number of requests sent when the page is loaded, place <script> tags at the end of the document, before the end of </body>, so that the page can load faster, and does not affect the load of JS.

C. Compress the script, delete the unnecessary spaces and comments in the JS code, and even simplify the variable name. You can prepare two versions of JS: One is a working version, used to modify code and comments, and the other is a compact version for publishing.

JavaScript objects

The above content is this article to introduce JavaScript learning summary of JS use skills, I hope you like.