Javascript Learning Guide (version 2nd) Notes (I) script, data types and variables, operators and statements

Source: Internet
Author: User

1. Defer attribute of script
2. Add a script for the body
3. CDATA section
4. null and undefined Variables
5. Reduce JavascriptCode


1. Defer attribute of script

If the defer attribute is set to "Defer", the script does not generate any document content, so the browser can process the remaining part of the page in advance, process the script only when the page processing is complete and the display is ready. The defer attribute can speed up page loading, especially those that reference a large amount of JavaScript code or a large amount of JavaScriptProgramLibrary page.

< Script Type = " Text/JavaScript " Defer = " Defer " >  
NO content being generated
</ Script >  



2. Add a script for the body

As we have said before, because centralized management of script elements is conducive to the maintainability of web pages, script elements are usually added to head elements on Web pages. However, the reason for adding scripts to the body element is often due to performance considerations.

Because there are limits on the resources that the browser loads concurrently from the same domain name, when adding the script to the head element, the first load is the script, and the second is the remaining part of the document. In addition, the browser may delay the display of the remaining part of the page, because the script may call the document. Write method to modify the Document Object. If a Javascript file is large, images and other important information on the webpage will be displayed with delay, which is far more important than maintainability.

Even using the defer attribute in the script element cannot completely solve this problem, especially the restrictions on concurrent resource access and page display.
 
In the high performance web sites (Chinese translation version of the high performance website construction guide, the author recommends that the script elements be placed at the end of the document, so that other parts of the web page can be preferentially loaded. Developers of most complex websites prefer this method. The negative impact of this method is that the script is not easy to search, and the web page has poor maintainability.
 
So what is the best way? I found that most websites do not reference a large JavaScript library. They put scripts in the head element while ensuring good performance, and also ensure the maintainability of webpages. However, if you really need to use a large JavaScript library, you can consider placing the script at the end of the page.

Regardless of the method used, ensure that the script location is consistent, either put all in the head element, or all at the end and end of the Body element.


3. CDATA section
 

< Script Type = " Text/JavaScript " >
// <! [CDATA [

Function Hello (){
VaR MSG =   " Hello, <em> world! </Em> " ;
Document. open ();
Document. Write (MSG );
Document. Close ();
}

//]>
</Script> 


The CDATA section is used because the XHTML processor identifies all the start and end labels when interpreting the markup language.
 
Javascript referenced by the src attribute of the script element in a page file is compatible with the XHTML standard and does not require CDATA. For embedded Javascript code, use the CDATA section, especially the Code contained in the body element. For most browsers, you also need to use the Javascript annotator (//) to hide the CDATA section, as shown in example 1.3. Otherwise, a javascript error may occur.
 
Of course, the best way to keep the page clean is to completely remove the JavaScript code from the page, instead of using the link Javascript file.

In most examples of this book, JavaScript code is directly embedded in the page, which can improve the readability and ease of check of the Code. However, Mozilla recommends removing all embedded Javascript code from the page and placing it in an independent Javascript file. Using an independent Javascript file can avoid problems such as verification and text interpretation errors, without worrying about processing pages in HTML or XHTML mode.

Prompt
Using JavaScript files can also improve the loading efficiency of web pages, because the browser caches the files when they are loaded for the first time and obtains the files from the cache when the same files are referenced.



4. null and undefined Variables

A null variable is a defined variable with a null value. The following is an example of a null variable:
VaR nullstring = NULL;

If the variable has been declared but has not been initialized, It is the undefined variable:
VaR undefstring;

If a variable is declared and an initial value is assigned, the variable is not null or undefined:
VaR svalue = "";

When you use a javascript library or in some complex code, some variables may not be initialized. If you try to use such variables in an expression, this may lead to unexpected results, which usually lead to JavaScript errors. If you are not sure about the state of the variable, you can test the variable in the conditional expression, for example:
If (svalue)... // If the variable is null or undefined, true is returned; otherwise, false is returned.

In Chapter 3rd, we will introduce the Condition Statement in detail. Now you only need to know whether the expression will determine whether the variable svalue has been declared and initialized. If it has been declared and initialized, the value of the expression is true, otherwise, the expression value is false.

If (Unknownvariable) // False: the variable is not declared or assigned a value.
If (Undefinedstring) // False: the variable is not assigned a value.
If (Nullstring) // False: The variable has been declared and assigned a value, but the assigned value is null.
If (Svalue) // True: The variable has been declared and assigned values (including null strings) using the null keyword to determine whether the value is null:


If (svalue = NULL)
In JavaScript, even if the variable has been declared, as long as it has not been initialized, It is the undefined variable. If the variable has been declared and initialized, the variable is not null or undefined. However, in this example, it is a global variable. As described in the previous chapter, variables that are not declared with the VaR keyword may cause various problems.


5. Reduce JavaScript code

spaces can improve code readability, but it also increases the file size. In general, this does not affect, because most JavaScript files are very small. However, for some large Ajax applications or complex JavaScript libraries, too many JavaScript files will affect the loading speed of JavaScript.
to compress JavaScript files as much as possible, you can choose some free tools, such as dean Edward's packer (http://dean.edwards.name/packer/), which can compress JavaScript code online. Or use the tools listed in the "Minify" entry (http://en.wikipedia.org/wiki/Minify) in Wikipedia that can be used on the desktop or on the server.
another type of tool is used to protect the copyright of JavaScript code. These tools not only compress JavaScript code, but also encrypt the Code, making the code hard to read.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.