Now Let's Start With JavaScript
We all know about JavaScript:
- Object-based scripted language
- A lightweight programming language with less complexity
- Most commonly used language to add dynamism and interactivity
- Client and server-side object-based scripted Language
And many more things.
Formally JavaScript was known as LiveScript and developed by Netscape and Sun Microsystem. It is also known as ECMAScript since it was standardized by the "European Computer Manufacture's Association".
Now let's talk about the key features of JavaScript:
- Dynamic Text: This means that the type of variable is defined according to the value stored in it. For example: after declaring a variable x, we can assign it a number or string value. This is known as dynamic typing. JavaScript is an object-based scripting language, that provides some built-in objects, such a String, Math and Data objects.
- Functional: It implies that JavaScript does not support "classes". Instead of using classes, objects are created from the constructor function. Each constructor function represents a unique object type.
- Prototype-based: Implies that JavaScript is a prototype-based language. This means that JavaScript uses a prototype instead of classes for inheritance. In JavaScript, each constructor function is associated with a prototype object. There are several built-in objects that represent constructor functions such as:
- Array()
- Boolean()
- Data()
- Error()
- Math()
- Number()
- Number()
- Object()
- RegExp()
- String()
- Imperative and structured: Implies that JavaScript supports all the syntaxes of the structured programming language "C", such as "if" statement, "for" and "switch" statements. The only difference between C and JavaScript is that in JavaScript a semicolon is not necessary to terminate the statement whereas in C the semicolon is necessary to terminate the statement.
- Platform Independent: Implies that JavaScript supports platform-independency, in other words portability. We can write our JavaScript application and run it on any platform or any browser without affecting the output of the script.
JavaScript in HTML Documents
The <SCRIPT> Element allows the use of JavaScript in HTML Documents in one of three ways as in the following:
- JavaScript in HEAD Element
- JavaScript in BODY Element
- As an External Script File
JavaScript in the HEAD Element: We can use JavaScript in the HEAD section by the given method. The script placed inside the HEAD element runs when you perform some action, such as click a link or the submit button.
Code Syntax
- <HEAD>
- <SCRIPT type="text/javascript">
- Script code here
- </SCRIPT>
- </HEAD>
Example
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>JavaScript in HEAD Element</title>
- <h1>
- Adding script in the HEAD Element</h1>
- <script type="text/javascript">
- document.write("Welcome to the World of JavaScript
- <BR/>");
- document.write("In this example we have used the
- JavaScript in the HEAD element.");
- </script>
- </head>
- </html>
Output
JavaScript in BODY Element: We can use JavaScript in the BODY section by the given method. The script placed inside the BODY element runs when a web page starts loading in a web browser.
Code Syntax
- <BODY>
- <SCRIPT type="text/javascript">
- Script code here
- </SCRIPT>
- </BODY>
Example
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>JavaScript in BODY Elementt</title>
- </head>
- <body>
- <h1>
- Adding JavaScript in Body Element</h1>
- <script type="text/javascript">
- document.write("Welcome to the World of JavaScript
- <BR/>");
- document.write("In this example we have used the
- JavaScript in the BODY element.");
- </script>
- </body>
- </html>
Output
JavaScript as an External Script File
When JavaScript code in an HTML file is very lengthy, it affects the readability of the HTML file. In addition, at times we may need to use the same JavaScript code in several Web pages. In such cases, we can store the JavaScript code in an external file and save that file using the ".js" extension. Next we need to link the external file with the HTML document using the "src" attribute of the SCRIPT element to access the script file.
Code Syntax
- <HEAD>
- <SCRIPT src="URL of the External .js file>
- Script code here
- </SCRIPT>
- </HEAD>
Example
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>JavaScript as an EXTERNAL Script File</title>
- </head>
- <body>
- <h2>
- The sum of First Four Number is:</h2>
- <h2>
- <script src="MyScript.js"></H2>
- </script>
- </body>
- </html>
- External JavaScript : var i, count=0; for(i=0;i<5;i++) { count=count+i; }
- document.write(count);