JavaScript learning summary - js usage skills_javascript skills-JS Tutorial-php.cn

1 What if the browser does not support JavaScript?

a. Why does the browser not support it? Most browsers have the function to disable scripts, such as Chrome.

b. When js is disabled, ensure that the web page can still achieve its core functions (key user needs)

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

 function popUp(winURL) {
   window.open(winURL, "popup", "width=,height=");
 }

Copy after login

The specific js implementation has the following solutions:

Option 1: Use javascript pseudo-protocol:

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

Copy after login

Option 2: Use built-in event handling function:

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

Copy after login

For the above two implementation solutions, when js is disabled, the requirement of "opening the link in a new window" cannot be met. Therefore, you cannot abuse js for the sake of simply using js. The following implementation plan reserves a retreat for js, which is the so-called smooth degradation (leave a retreat after js is banned)

Option 3: Smooth degradationhttp://www.example.com" onclick="popUp(this.href;return false;)">

2 How to separate the structure and content of web pages from the actions of JavaScript scripts? Why separate?

a. There is a clear division of labor, everyone does their own thing, and then there is collaboration:

Web page structure and content - done by html, web page style - done by CSS, web page behavior - done by JavaScript

b. Separating the js code is actually very simple. The js code does not require that the event must be processed in html. You can add an event to an element in the html document in an external js file. 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;
       }
     }
    }
  }

Copy after login

3 Browser compatibility issues

Both the old and the new should be compatible, with special attention being paid to the old ones, that is, backward compatibility. Different browsers have different levels of support for js, such as

document.getElementsByClassName(classname) IE6 does not support it. You can check compatibility issues by adding a check statement: if(!document.getElementsByClassName) return false;

4 Performance considerations

Why should we consider the performance of script execution? Performance is always an issue to consider, which involves whether the web page you write can load smoothly.

How to ensure that the performance of script execution is optimal?

a. Access the DOM as little as possible and use less tags, for example: use less loop traversal

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

Copy after login

The performance is better than the code below

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

Copy after login

b. Merge scripts (js code) to reduce the number of requests sent when the page is loaded; place the