Useful Tips

Javascript output

Client-side JavaScript code can be embedded in HTML documents in four ways:

inline scripts between a pair of tags,

from the external file specified by the src attribute of the tag:

In the XHTML markup language, the contents of the tag

The following example demonstrates the contents of an HTML file that includes a simple JavaScript program. The actions of the program are described in the comments, however, I note that the main purpose of this example is to demonstrate how JavaScript code is embedded in HTML files along with everything else, in this case, with CSS styles:

JavaScript Display Options

JavaScript data can be displayed in various ways:

  • innerHTML - using, write inside an HTML element.
  • document.write () - using, write inside an HTML element.
  • window.alert () - using, record inside the notification window.
  • console.log () - using, record inside the browser console.

Scripts in external files

The JavaScript code file usually has the extension .js and contains JavaScript code in a “pure form” without tags. Please note that the closing tag is required even when the src attribute is specified and there is no JavaScript code between the tags. In such cases, you can use the only tag in the XHTML markup; there will be some text that is not whitespace or comments in JavaScript.

Using a tag with the src attribute has several advantages:

HTML files are easier because large blocks of JavaScript code can be removed from them, which helps to separate content from behavior.

A JavaScript function or other JavaScript code used by several HTML files can be stored in one file and read if necessary. This reduces the amount of disk space used and greatly facilitates the support of program code, as There is no need to edit each HTML file when changing the code.

If a JavaScript script is used by several pages at once, it will be loaded by the browser only once, when it is used for the first time, subsequent pages will retrieve it from the browser cache.

The src attribute takes an arbitrary URL as a value, so a JavaScript program or a web page from one web server can use the code (for example, from a subroutine library) provided by other web servers. Many online advertisers use this fact.

The ability to download scripts from other sites further increases the benefits of caching: Google promotes the use of standard, well-known URLs for commonly used client libraries, which allows browsers to cache the only copy shared by many sites on the Web. Linking JavaScript scripts to Google’s servers can significantly reduce the launch time of web pages, since the library will probably already be stored in the user's browser cache, but you must trust third-party program code, which may be critical for your site. For more information, contact: code.google.com/apis/ajaxlibs/.

The ability to download scripts from third-party servers other than those where documents using these scripts are located entails an important security implication. Generic policies prevent JavaScript from interacting in a document from one domain with content from another domain. However, it should be noted that the source of the script itself does not matter, the source of the document into which the script is embedded matters.

Thus, a policy of common origin is not applicable in this case: JavaScript code can interact with documents into which it is embedded, even if this code is obtained from a different source than the document itself. By including a script in your web page using the src attribute, you give the script author (or the webmaster of the domain from where the script is downloaded) full control over your web page.

HTML event handlers

Javascript located in tag

JavaScript code can register event handlers by assigning functions to properties of Element objects (such as onclick or onmouseover) representing HTML elements in a document.

Event handler properties, such as onclick, reflect HTML attributes with the same names, which allows you to define event handlers by placing JavaScript code in HTML attributes. For example:

Pay attention to the onClick attribute. The JavaScript code that is the value of this attribute will be executed whenever the user clicks on the button.

Attributes for event handlers included in HTML markup can contain one or more JavaScript instructions, separated by semicolons. These instructions will be transformed by the interpreter into the body of the function, which in turn will become the value of the corresponding property of the event handler.

However, usually the HTML attributes of event handlers include simple assignment statements or simple calls to functions declared elsewhere. This allows you to keep most of the JavaScript code inside scripts and limits the degree of interpenetration of JavaScript and HTML code. In practice, many web developers consider using the HTML attributes of event handlers a bad style and prefer to separate content from behavior.

Javascript in url

Another way for client-side JavaScript to execute is to include this code in the URL following the javascript pseudo-protocol specifier:. This special type of protocol means that the body of the URL is arbitrary JavaScript code that must be executed by the JavaScript interpreter. It is interpreted as a single line, and therefore instructions in it should be separated from each other by semicolons, and for comments you should use combinations of characters / * * /, not //.

The “resource” that is identified by the javascript: URL is the value returned by this program code converted to a string. If the program code returns undefined, the resource is considered to have no content.

Some browsers (such as Firefox) execute program code in the URL and use the return value as the content of the new displayed document. Just like when clicking on the http: link, the browser erases the current document and displays the new content. The value returned by the example above does not contain HTML tags, but if they were, the browser could display them just like any other HTML document loaded into the browser.

Other browsers (such as Chrome and Safari) do not allow URLs, as in the example above, to overwrite the contents of the document - they simply ignore the return value. However, they do support URLs of the form:

When such a URL loads, the browser executes the JavaScript code, but since it has no return value (the alert () method returns undefined), browsers such as Firefox do not overwrite the currently displayed document. (In this case, the javascript: URL serves the same purpose as the onclick event handler. The link above would be better expressed as the onclick event handler of the element - the element as a whole should only be used for hyperlinks that load new documents.)

If you need to ensure that the javascript: URL does not overwrite the document, you can use the void operator to force the return of undefined:

Without the void operator in this URL, the value returned by the Window.open () method would be converted to a string and (in some browsers) the current document would be overwritten with a new document.

Like the HTML attributes of event handlers, javascript: URLs are a relic of the Web’s early development and should not be used in modern HTML pages. Javascript URLs: can serve a useful service if used outside the context of HTML documents. If you need to test the operation of a small piece of JavaScript code, you can enter the javascript URL directly into the address bar of the browser. Another legal use of javascript URLs is to bookmark browsers.