JavaScript in the Web browser (i)

1. Advantages of Introducing JS scripts externally :

1) You can delete chunks of Js code from the HTML file, which helps to keep the content and behavior separate, thus simplifying the HTML file.

2) If multiple Web pages are common with the same JavaScript code, the src attribute allows you to manage only one copy of the code without having to edit each when the code changes HTML file

3) If a JavaScript code file is shared by multiple pages, you only need to download it once, by using its first page-the subsequent page can retrieve it from the browser cache

4) since the value of the SRC attribute can make arbitrary URLs, so JavaScript programs from a Web server or web The page can use code that is output by another WEB server.

5) The ability to load scripts from other websites allows us to make better use of the cache. Google is promoting a standard, well-remembered URL for a common client class library that allows thebrowser to buffer only one copy, and any site on the network can be used. Linking JavaScript code to a Google server can reduce the startup time of WEB pages because they may already exist in the user's browser cache, but you must trust the code services provided by the third party, This is critical for your site.

JavaScript in 2.url:

     in url, javascript code-to-client way . this particular type of protocol specifies the Url content is any string . Javascript interpreter run javascript code . Span style= "font-family: ' The song Body '; It is treated as a separate line of code for , This means that the statements must be separated by semicolons , and // note must be used /**/ note instead. javascript: url identifiable "Resources" Is the return value that is converted into a string execution code. If the code returns Undefined

    javascript: URL <a> Tag href <form> Action window.open () method parameters. The javascripturl can be this: <a href= "Javascript:alert (New Date (). toLocaleTimeString ()); "> Check the time without overwriting the entire document </a>

     when the browser loads this type of Url code, but because there is no return value ( alert () returns Undefined Firefox The browser does not replace the current document. (In this case, the javascript: url and Onclick The event handler is the same as the purpose. The above link is through the <button> element ' onclick Handlers are better represented, because <a> elements should usually be left as hyperlinks for loading new documents. - If you want to make sure javascript: url< Span style= "font-family: ' The song Body '; > does not overwrite the current document, you can use the void ' operator to force a function call or to give an expression a undefined

<a href= "javascript:void window.open (' About:blank ');" > Open a Window </a>

if there is no void operator in this URL, the value returned by the call to the window.open () method (in some browsers) is converted to a string and displayed, And when the document is overwritten with the document that contains the string:

[Object Windwo]

     and Html Yes web early relics , it should usually be avoided in modern html: url in Html code, then you can enter Javascript: Url

3. Bookmarks: in in a Web browser, "Bookmarks" is a saved URL. If the bookmark is a javascript:URL, then a small piece of script is saved, called bookmarklet. bookmarklet is a small program that can be easily launched from a browser's menu or toolbar. The code in bookmarklet executes just like a script on a page, and can be launched from a browser's menu or toolbar. The code in bookmarklet executes just like a script on a page, querying and setting the content, rendering, and behavior of the document. As long as the bookmark does not return a value, it can manipulate any document currently displayed without replacing the document with new content.

Consider the following JavaScript in the <a> tag :URL. Clicking Connect opens a simple javascript expression evaluator that allows you to evaluate expressions and execute statements in a page environment:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/4D/7C/wKiom1RR-TaS_b8fAADpizYm6sw060.jpg "title=" 1.png " alt= "Wkiom1rr-tas_b8faadpizym6sw060.jpg"/>

Note that even if the javascript URL is written in multiple lines,the HTML parser treats it as a separate line, and the line // comment is not valid. Also, remember that the code is part of the HTML attribute of single quotation marks, so the code cannot contain any single quotation marks.

in development, it is useful to hardcode such a link in a page, and to save it as a bookmark that can be run on any page. In general, bookmark the hyperlink's address in the browser to do so, right-clickon the link to select the option similar to "Bookmark link" , or drag to link to the Bookmarks toolbar.

4. If the Web page contains an embedded form (usually using the <iframe> Element), the Javascript code in the embedded document and the JavaScript code will have different global objects, which can be used as a separate JavaScript program. However, keep in mind that there is no strict definition of the scope of the Javascript program. If the outside and inside documents are from the same server, then the code for the two documents can be interacted with, and if you want, you can think of them as two interacting parts of a program.

Javascript in 5.bookmarklet:URLs exist outside the document and can be imagined as a user extension or as a modification to other programs. When a user executes a bookmarklet , the Javascript code in the bookmark can access the contents of the global objects and documents and manipulate them.

There are two stages in the execution of a 6.javascript program. In the first phase, the contents of the document are loaded and the code in the <script> element is executed (including inline scripts and external scripts). Scripts are usually executed in the order in which they appear in the document. Typically, all Javascript code in the script is executed from top to bottom, in the order in which it appears in conditions, loops, and other control statements.

when the document is loaded and all script execution is complete, Javascript executes into its second phase. This phase is asynchronous and event-driven. In the event-driven phase,the Web browser invokes an event handler function (defined by the HTML event handler specified by the script executed in the first stage , or the previous event handler) to respond to an asynchronous occurrence. The call event handler is typically in response to user input (such as a mouse click, the keyboard is pressed). However, it can also be triggered by network activity, run time, or errors in Javascript code. Javascript embedded in Web pages :URLs can also be treated as an event handler, because they are not effective until they are activated by clicking a link or submitting a form.

     load< Span style= "font-family: ' The song Body '; > event, which indicates that the document is fully loaded and can be manipulated. javascript onload Onload event triggered. It is this onload javascript The program loading phase is relatively short, usually only lasts 1-2 seconds , once the document is loaded, the event-driven phase will continue as long as the web browser displays the document. Because this phase is asynchronous and event-driven, there may be long periods of inactivity. There is no javascript is executed. Interrupted by an activity triggered by a user or network event.

Core Both JavaScript and client-side JavaScript have a single-threaded execution model. Scripts and event handlers (anyway) can only execute one at a time, without concurrency. This preserves the simplicity of Javascript programming.

7. When the HTML parser encounters the <script> element, it defaults to executing the script before resuming parsing and rendering of the document. This is not a problem for inline scripting, but if the pin source code is an external file specified by the SRC attribute, this means that the part of the document that follows the script does not appear in the browser until the script is downloaded and executed. (The text content of the document has been loaded but not parsed into the DOM tree by the browser engine, and the generation of the Dom tree is affected by JavaScript code,JavaScript The code will "block" the rendering of the page UI.

8. The execution of the script is only synchronized and blocked by default. <script> tags can have defer and async attributes, which (in support of their browsers) can change the way scripts are executed. These are Boolean properties, no values, just need to appear in the <script> tab. HTML5 says these properties are only valid when used in conjunction with the SRC attribute, but some browsers also support deferred inline scripting.

<script defersrc= "Deferred.js" ></script>

<script Async src= "Async.js" ></script>

Both the defer and async Properties, like the script that tells the browser to come in, do not use document.write () and do not generate document content, so the browser can continue to parse and render the document when it downloads the script. the defer property causes the browser to defer script execution until the document is loaded and parsed, and can be manipulated. the Async property allows the browser to execute the script as quickly as possible without blocking the parsing of the document while the script is being downloaded. If the <script> tag has two properties at the same time, browsers that support both will follow the async property and Ignore the defer property. Note that deferred scripts are executed in the order in which they appear in the document. Asynchronous scripts execute after they are loaded, which means they may execute in an unordered order.

9. By convention, the name of the event handler's property begins with "on", followed by the name of the time. Also note that there is no function call in any of the above code: just assign the function itself to these properties. The browser executes the call when the event occurs. Using time for one-step programming often involves nesting functions, as well as defining functions in functions.

This article is from "Tiger Brother's Blog" blog, please be sure to keep this source http://7613577.blog.51cto.com/7603577/1569759

JavaScript in the Web browser (i)