JavaScript event binding (when javascript is not supported) _ JavaScript skills

After reading the BestPractices chapter of JavaScriptDOM programming art, we know that we have many things to consider when creating a webpage. For example, we use JavaScript to enhance our webpage, but we need to consider that, if your browser does not support JavaScript, or the user disable JavaScript, can our webpage be displayed normally? For example,

The Code is as follows:

The popUp function is customized. A new window is opened to restrict the webpage in the URL. However, if the client does not support this function, the webpage will not work properly. Therefore, the following code is more suitable for our use.

The Code is as follows:

The author uses CSS as an example. In the process of using CSS, we found that apart from In addition to loading the CSS file, we did not add any css-related code to the content of our webpage. In this way, the structure and style can be well separated, that is, our css Code does not intrude into our main code. In this way, even if the client does not know css, but the main content customers can still see, our content structure can also be displayed in the customer. Therefore, JavaScript is equivalent to the behavior layer, and css is equivalent to the presentation layer. JavaScript can also be as non-invasive as CSS. The following is an example in the book.

The Code is as follows:

The code above can ensure that the client can still work normally without supporting JavaScript, but the event handler such as onclick appears in the code above. So now we use methods like CSS to complete the functions we need. As follows:

The Code is as follows:

In this way, when the page is loaded, execute window. onload to check which classes are used and then use the popUp method in a unified manner. The following code

The Code is as follows:

Var links = document. getElementsByTagName ("");
For (var I = 0; I If (links [I]. getAttribute ("class") = "popup "){
Links [I]. onclick = function (){
PopUp (this. getAttribute ("href"); // Attention use this in this place. Because this is equals onClick = "popUp (this. href )"
// So we cann' t use links [I].
Return false;
}
}
}

In this way, we can intrude less into our html code.

Finally, the author tells us that we need to achieve backward compatibility and minimize JavaScript. Backward compatibility. We can use if (document. getElementById) to test this method. JavaScript code is minimized mainly to reduce JavaScript, which can accelerate webpage loading.

Below I encountered a problem I don't understand while reading a book. I hope the prawns can help solve it.

Where should script be stored? In the art of JavaScript DOM programming, we can put script inPreviously, do not placeTo speed up page loading. Not very understandable.

Original article:

The placement of your scripts in the markup also plays a big part in initial load times. Traditionally,
We were told to always place scripts inPortion of the document, but there's a problem
That. Scripts inBlock the browser's ability to download additional files (such as images or
Other scripts) in parallel. In general, the HTTP specification suggests that browsers download no more
Than two items at the same time per hostname. While a script is downloading, however, the browser
Won't start any other downloads, even on different hostnames, so everything must wait until the script
Has finished.
If you're following the progressive enhancement and unobtrusive methodologies discussed earlier
In the chapter, then moving your script tags shouldn't be an issue. You can make your pages load
Faster simply by including all your script tags at the end of the document, directly before

Tag. When the scripts load, your window load events will still apply your changes to the document.