PPK on javascript-background

Javascript

JavaScript exists for Web pages and is embedded in an environment where both HTML and CSS are used, and there is no shortage of availability and accessibility in this environment. All in all, the script must be useful to the site, and the site will continue to work if JavaScript fails or does not exist at all. The Compatible standard CSS revolution has changed web development, and JavaScript programming has been greatly influenced by this movement.

CSS Revolution

In 1998, when Netscape and IE4 were unable to reach any agreement, some Siane Web developers formed Web Standards Project(Web Standard Engineering, WASP), To solve some of the absurd private elements of JavaScript, and to promote the use of CSS to define the appearance of the site. Their important mission is to "follow standards", not only for browser vendors, but also for web developers.

Initially, Wasp and his supporters focused on CSS. The reason, CSS is a relatively new technology, has not been a mess of things pollution, more easily become a turning point in history, JavaScript is not so lucky, then the JavaScript, whether it is programming, or people to its ideas, are completely free of obstacles. This is why some standard proponents create the idea that JavaScript is the obstacle, both past and present. In fact, JavaScript and accessibility can coexist harmoniously as long as you are a little cautious.

Unobtrusive script programming

In the 2002, Stuart Langridge created unobtrusive scripting (unobtrusive scripting, Stuart Langridge's original text ), which was the first important attempt--based on CSS, The new theory of standard compatibility embeds JavaScript.

The unobtrusive script should have all the features:

• Usability, for example, gives the site a clear usability benefit;
• accessibility, for example, if JavaScript fails, the page should remain readable and understandable, despite the inevitable loss of certain usability;
• Easy to implement, a classic case where a web developer simply introduces the script and adds a JavaScript call Hook (Hook), and the script works;
• Separate, belonging to its own .js files rather than scattered across the HTML corners.

Theoretically, the first one has been since the day the JavaScript was born, but it is often overlooked by programmers in their zeal to show off their javascript abilities. It doesn't matter how cool it is if it's not available.

The other three articles are new. It is generally thought that the barrier-free and JavaScript are mutually exclusive. Easy implementations require JavaScript hooks, and the advent of the DOM of the consortium makes it possible. Separation, is to steal division in the CSS Revolution. If you need to detach HTML and CSS, logically, you should also separate JavaScript from them.

Three levels

The Web page contains three levels (yes, they all need to be separated):

1. HTML structure
2. CSS Performance
3. JavaScript behavior

The HTML structure layer is the most important foundation of a Web page. The HTML tag gives the content meaning. The CSS presentation layer defines how your HTML should be displayed. The JavaScript behavior layer adds interactivity to the page.

In any case, a Web page must have an HTML structure layer. No HTML, no Web page. CSS and JavaScript are optional, old, nameless, and rare browsers may not support CSS and/or JavaScript, in which case either or both of these layers do not work. The consequences are obvious, and any web site should be able to "survive" in the absence of a behavioral layer (or performance layer, but less so). In other words, a Web site cannot be completely dependent on JavaScript, but make sure that JavaScript doesn't work even if it doesn't.

Separation of the relationship between

In general, it is best to manage each layer separately. Most basic, to ensure that:

• HTML is structural, not too complex, without CSS and JavaScript to keep semantics.
• The CSS presentation layer and JavaScript presentation layer belong to the individual .css and .js file respectively.

Separation is easier to maintain. You can easily connect separate files to the entire station's web page, for example, you need to change the font from 12px to 0.8em, you just open the CSS file to edit it, so that the changes in the page immediately effective. Apart from this, the separation allows you to change the HTML structure layer or JavaScript behavior layer without modifying the entire CSS presentation layer to make the Web site a new dress.

Separation of performance and structure

The basic idea of performance and structure separation is to ensure that the HTML definition structure, only the structure, all the performance is defined into the separate CSS file. No longer allow font labels or expressive forms! There seems to be little room in a JavaScript book to explore the separation of CSS from HTML. So let's talk about how this separation affects the way we write JavaScript code.

CSS Changes

JavaScript allows you to modify CSS, for example, you can define a connection as red in CSS and then use JavaScript to control CSS and then define it as green. Sometimes this is useful, and the change in style will enable the user to notice the elements of the HTML that are changing, such as error messages. CSS changes can be very difficult if the CSS presentation layer is not properly detached. Changing the elements className is usually the best way to change the CSS. As an example, if the form validator discovers a user input error, change the class of the form field:

// obj is the form fieldobj.className += ' errorMessage';// in CSSinput.errorMessage {    border: 1px solid #cc0000;}

This works only if you isolate the performance and structure correctly. Class errorMessage must be defined in CSS to implement style changes, and conversely, it is only possible (or feasible) to start with the right CSS presentation layer.

Modifying the structure or performance

JavaScript actually allows you to change the performance of your site and also allows you to change HTML documents. The user doesn't care what we change. But it's still different. Changing a form that responds to a user's behavior should be a modification of the structure rather than an expression. The related table cells should not be visually hidden, but should be removed from the document structure. When a form is submitted, the browser creates a name/value pair for all form elements and sends it to the server. If you simply hide them in CSS, these fields are still part of the form, although they may not be what the server needs. This is just a theoretical thing, you can disagree with me.

Separation behavior and structure

Separation behavior and structure is easy to understand: Do not write any JavaScript code into an HTML page. Take these two steps:

• Define all JavaScript functions in a separate .js file so that the HTML page you want is connected to it.
• Delete all event-handling handles (note: Those within the line onmouseover ) and fall into the same .js file.

Detach a function from a file

JavaScript code belongs .js to a file, not an HTML file.

So this is wrong:

<script type="text/javascript"> function doAllKindsOfNiftyThings() {     // JavaScript code } </script> 

This is the right thing to do:

To delete an event-handling handle

The second step is to move the JavaScript function calls in all HTML to the separate .js . In fact, the JavaScript code within 99% of HTML is an inline event handle.

Below, the handle is inside HTML, but should not belong to HTML:

<a href="home.html"  >Home</a>

Should be defined in a separate .js file:

<a href="home.html">Home</a>// in separate .js filevar nav = document.getElementById('navigation');var navLinks = nav.getElementsByTagName('a');for (var i=0;i<navLinks.length;i++){    navLinks[i].onmouseover = [code];    navLinks[i].onmouseout = [code];}

The script processes id="navigation" the elements and processes all the connections therein, and then assigns the connection event handling handle.

javascript:Pseudo protocol

In some cases you will see pseudo protocols like the following javascript: :

<a href="javascript:doAllKindsOfNiftyThings()">Do Nifty!</a>

The implication of this complex dirty code is an onclick event handle: When the user clicks on the connection, what we need is a call doAllKindsOfNiftyThings() function. So you should remove the call from the connection javascript: and replace it with an event handle in a separate .js file onclick :

<a href="somepage.html" id="nifty">Do Nifty!</a>// in separate .js filedocument.getElementById('nifty').onclick = doAllKindsOfNiftyThings;

Therefore, for href the, should include a complete URL for users without script to be able to access, otherwise the entire connection is generated by JavaScript, no barrier-free.

[1] [2] Next page