JavaScript is universal on the world wide web, JavaScript is used to make web pages more interactive to react to viewer’s actions and to give web pages some special visual effects.
To begin learning JavaScript you need to have basic knowledge of HTML tags or elements and their attributes. For JavaScript to reference any HTML element an id attribute is needed. The id attribute uniquely identifies the HTML element.
The JavaScript is also written in text editors and executed in web browsers same way like HTML or CSS. Some older version of web browsers may have trouble executing javascript.
Javascript is a scripting language and not the same as java, which is a programming language. Java must be compiled before a program can be executed. But javascript is similar to syntax used in Java or any other high level programming language. Javascript doesn’t required to be compiled, javascript is interpreted on the fly, the error handling is up to the web browser.
Javascript is a prototype based, client side scripting language. What this means is that Javascript is an object based programming language that used objects. However, objects are not class based instead objects inherit from other objects through prototype property.
Client Side means javascript runs on the client machine that the user is using which is a web browser, rather than on the web server hosting the web page. The client side language runs directly in the web browser and doesn’t send or retrieve information from the web server. The client side language cannot update files on the web server.
The javascript is generally used for tasks that deals with the content of the web document and allows information to be validated before being sent to the web server for example Javascript can be used to validate the information entered in a form before being send to the web server. If the information is valid, then it is sent to the web server, else message can be displayed for correctness of the information.
The javascript code is added into an HTML document directly or by using external script file. The <script> </script> tag is used to add javascript to an HTML document. The statements within the <script> </script> tag is javascript code. These <script> tags tell the browser to run script and interpret javascript commands.
Figure 1
The <script> tags can be placed either in head or body section of an HTML document. The <script> tags are used to tell the browser where code for scripting language begin and end in an HTML document. The default scripting language for almost all web browsers is Javascript.
The <script> tag has attributes such as:
type – used to explicitly identify JavaScript as the scripting language
language – this attribute is deprecated
src – used to call external JavaScript file
defer – used to specify external JavaScript file should be loaded
async – if used web page can continue to load without waiting for script to load.
To explicitly identify JavaScript as the scripting language the type attribute is used for example:
<script type=”text/javascript” >
The JavaScript code can be written within <script> tags inside HTML document or the code can be written as an external file with .js extension. The external JavaScript file must not contain anything except JavaScript Code. To use external javaScript file src attribute is used for example
<script type=”text/javascript” src=”myscript.js” ></script>
The advantage of using external javascript files is that the javascript code can be separated from the HTML code. It can also help in adding same javascript code to multiple HTML file instead of multiple pages have same javascript code. Using external Javascript file can also help in faster loading of subsequent HTML pages since the browser will cache the external javascript file the first time it is loaded.
The defer and async attributes are used only when the external javascript files is referenced through src attribute. These attributes allows us to specify when an external script should be loaded. The defer attribute specifies that an external javascript file should be loaded but the execution starts only after HTML document is completed loaded. For example:
<script type=”text/javascript” src=”myscript.js” defer></script>
When the async attribute is specified the HTML document can continue to load without waiting for the script to load and the script will execute before the document completes loading. For example:
<script type=”text/javascript” src=”myscript.js” async></script>
The <script> tag can be added anywhere in the HTML document. When the script is added directly in HTML document without using an external file, it is better to declare variables and functions in the head section. This ensures that the variables and functions are available when the script calls are made. The modern technique now a days used is to write javascript code in an external file, thus separating the HTML code from the scripting code and then use <script> tag to reference external javascript code and place the <script> tag just before the closing body tag.
<noscript> tag
The <noscript> tag can be used when the JavaScript is turned off in the web browser or web browsers without javascript. The <noscript> tag can be placed anywhere in the HTML document. For example:
<script type=”text/javascript”>
document.write(“This is sample JS”);
</script>
<noscript>
This is sample JS
</noscript>
Writing the first JavaScript code
To start with we will write a simple javascript code to display “This is sample Javascript program” text on the web browser.
<script type=”text/javascript”>
document.write(“This is sample Javascript program”);
</script>
The above javascript code starts with <script> tag and closes with </script> tag. The type attribute in <script> tag specifies that the scripting is javascript. This script contains only one statement. Every statement in javascript terminates with a semi colon as the case with other high level programming languages. The document is a predefined object in javascript. The functions in javascript have parentheses. Therefore, write is a function present in document object. This write function take argument as string. Hence the text “This is sample JavaScript program” is provided in double quotes.
Now let us include this script in HTML document. The code below demonstrates inserting JavaScript code within HTML document.
Code 1.html
Output
Writing the first JavaScript code using External JavaScript Files
Let us try to achieve the same result by writing the javascript in external file and including it in HTML document.
Code 2. Html
Code myscript.js
Output
JavaScript Comments
Comments are integral part of documentation for any computer language. The Javascript provides single line and multiple line comments. The single line comments can be placed using // and multiple line comments can be added using /* …… */. The web browser ignores comments while executing the Javascript code.
Code 3.html
Output