Search within TutorialsPark

Javascript How to?

Answers to various how to's of javascript.

What is a Browser?

1. A browser is a program or a software that interprets the markups and scripts of a webpage and displays it to the user. Eg: Google chrome, Internet Explorer, Firefox etc.

2. When a webpage is loaded, it is parsed from top to bottom using an interpreter which then renders content as per the markup and CSS and executes the scripts.

Javascript Implementations

1. Javascript implements the specification of ECMAScript specification ECMA-262, but it is much more than that. Javascript consists of three distinct parts

The ECMAScript : The specification specified by ECMA-262, it prepares the base upon which more robust scripting language can be created

The Document Object Model(DOM) : The DOM creates a map of the webpage as a hierarchy of nodes, with each HTML element as a Node containing different kind of Data. Script is used to target the specific node and then manipulate it.

The Browser Object Model(BOM) : The BOM is used to control the browser windows and frames, it enables the developer to pop-up new windows, close, resize and move browser windows.Get detailed information about the browser using the navigator object etc.

Note: These concepts will be explained in great detail with examples in later chapters.

How to add/insert Javascript on Webpages?

1. Javascript can be added to any webpages using any of the two methods.

Inline Javascript

External Javascript

Javascript: The <script> Element

1. Javascript can be inserted on any HTML page using the <script> element. Here, the <script> tag denotes the beginning and the </script> tag denotes the end Javascript

2. As soon as the <script> element is encountered in the webpages the javascript interpreter takes over and parses the script from top to bottom

3. The element <script> can be used in two ways, either embed the Javascript directly into the webpage or link to a javascript external file..

Inline Javascript

1. To insert javascript inline within a HTML webpage, simply declare the scripts within the <script> and </script> tags.

2.Care must be taken to see that the string </script> must not appear in the code, or else it results in an error as browser assumes it as the closing tag.

Example: Javascript - inline method

Give it a TRY! » Note: The bowser's interpreter parses the page from top to bottom.

Javascript External Files

1.Another and more efficient method to insert javascript to webpages is by using the <script> element to include Javascript files from an external location.

2. This is done by specifying the URL of the external Javascript files using the attribute src within the <script> element.

Example: Javascript - external Files

Give it a TRY! » Note: The external javascript files has an extension of .js , eg : myjavascript.js

Where to place the javascript code in the webpage?

1. Traditionally, most webpages have the <script> element placed within the <head> element, as it is easy to keep all CSS and Javascript files in the same area.

2. The problem with this approach is that the resources must be downloaded , parsed and interpreted before the page is being rendered(displayed) in the browser. If the size of code is large then there is noticeable delay in rendering of the page.

3. Hence modern developers include all references in the <body> element after the main content, thus page is displayed completely first while the resources are downloaded, parsed and interpreted in the background alongside.

Example: CSS Display - inline-block

Give it a TRY! » Note: The element is displayed as an inline element, but margin and padding can be applied (possible only for block-level elements.)

Deffered Javascript

.1 The <script> element's attribute defer is used to indicate to the browser that the script must be downloaded immediately by the execution of the script is delayed.

.2 The script is executed after the entire page is parsed, i.e after the browser gets the closing </html> tag. The purpose is to denote that the structure of the webpage won't be affected by the script.

Example: CSS Display - none

Give it a TRY! » Note: The attribute defer is supported only for external Javascript files and not inline Javascript.

Asynchronous Javascript

1. The <script> element's attribute async is similar to defer, that is it delays the execution of the scripts till closing </html> tag is parsed while beginning to download the files as soon as the page is loaded.

2. The only difference with attribute defer is that, the order of execution of scripts is not as specified.

Example: Javascript Attribute - async

Give it a TRY! » Note: The attribute defer is supported only for external Javascript files and not inline Javascript.