Ppk on JavaScript-Chapter 2-Background

Unobtrusive Scripting)

A non-invasive script should include all the following features:

1. It should be available. That is, it brings clear availability benefits to the website.

2. It should be accessible. That is to say, if Javascript becomes invalid, the web page should still be readable and understandable, and some availability will be lost in a timely and unavoidable manner.

3. It should be easy to implement. Typical scenario: Web developers only need to introduce the script itself and a javascript hook in the page, and then the script can run.

4. It should be separated. It only exists in its own. js file, rather than scattered in every corner of HTML.

 

Three Layers

A web page consists of the following three layers:

1. html Layer 2, CSS Layer 3, and JavaScript behavior Layer

 

Separation of concerns

Set the clientCodeIt is divided into three layers and introduces another topic, which is a few points of interest. Generally, it is better to manage three layers separately. The most basic requirement is to ensure the following:

1. html is structured and should not be too complex. It makes sense without CSS or JavaScript.

2's CSS performance Layer and javascript's behavior layer are separately stored in the. CSS file and. js file.

Separation of focus is easy to maintain. In addition, separation allows you to change the overall CSS presentation layer, giving your website a brand new design, without rewriting the HTML structure or Javascript behavior layer.

 

Three separation: performance and structure separation

The basic idea of separating the presentation layer from the structural layer is to ensure that the structure (and its definition structure) is defined by HTML, and all the representations are defined in another separate CSS file.

CSS modification: javascript allows modification of CSS. The best way to modify CSS in real time is to change the classname of an element.

Structure Change or representation: There are two ways to hide form fields

1. Use CSS to make them invisible (display: None)-Presentation Layer

2. remove them from the document structure. -- Structural layer

However, when submitting a form, the browser creates a name/value pair for all form fields and then sends them to the server. If we hide unnecessary forms through CSS, these form fields are still part of the form, but they are hidden. Therefore, they are also sent to the server, even if they are useless.

Relatively, if the form fields are completely removed from the document structure, they will not be sent to the server, even if they are useless.

Recommendation: it is best to remove form fields directly, instead of hiding them.

 

Three separation: separation of behavior and Structure

Separation of behavior and structure is easier to understand: Do not write any JavaScript code into your HTML page. Two steps are required:

1. Place all JavaScript functions in an independent. js file and link them to all HTML pages that require it.

2. Remove all event processing from HTMLProgramAnd put them in the same. js file.

 

<AHref= "Somepage.html"ID= "Nifty">Do it!</A>// Document. getelementbyid ('nifty '). onclick = doallkindofnitythings;
 

 

 Three separation: separation of behavior and performance

In fact, there is a gray area where CSS and JavaScript overlap, and a certain effect cannot be cleared as a manifestation or behavior.

Therefore, JavaScript is the most effective method to create "similar but not identical" effects, such as Mouseover. When you must select between CSS and JavaScript, remember this.

 

Accessible rules

1. Well-organized HTML (hard-coded links must have href)

2. generate content meaningful to the script user

A. trigger the link of the advanced script (if href is not feasible for the link, JavaScript will be used to generate the link for a long time, as shown in the following code :)

 

VaRLink = Document. createelement (""); Link. href= "#"; Link. onclick=Starupajaxstuff;VaRLinktext = Document. createtextnode ('commmence coolness'); Link. appendchild (linktext); document. Body. appendchild (Link );FunctionStarupajaxstuff () {alert ("OK");}
 

 

B. use JavaScript to hide the content (it is dangerous to hide the content. Without JavaScript, the content will never be visible, and the page will not be accessible)

C. redirect users

Sometimes, the best way to solve the problem of accessibility is to create a script version and a script-free version for your website at the same time. I don't like this solution. Try to avoid it.

MingIt is still valuable.

If you use this method, you should follow the following two rules:

First, the portal page of your website should be a script-free page. In this way, all browsers, even those that only support htmlBrowserYou can get a usable page. In this way, all

Even browsers that only support HTML can get a usable page.

Second, when the browser reaches this script-free page, start a script to check whether it supports your advanced script. If yes, use Replace () to the script page.

Note that location. href creates a new record in the browser's history record. If the user reaches the page without a script, the user is redirected to the page with a script. However, once she

After clickingThe return button will be sent back to the page without a script, and the above script will be started immediately and sent back to the page with a script. In fact, the function of the back button is damaged.

Therefore, using the location. Replace () method will load a new page, but it will overwrite the historical records of the old page in the browser. At this time, the back button will continue to work normally.