The main activity of JavaScript is to give command to the browser. It gives the required instruction of what to do. Now consider the below command:
It is a good practice to add a semicolon at the end of each executable statement of JavaScript statements. The semicolon is optional (according to the JavaScript standard). But if you have a requirement to write multiple statements on one line then Semicolon(;) is badly required. The document.write() is a method of JavaScirpt. This simply prints the specified text to the page as like above Practice-1.
Explanation:
Practice-2 is the most import for understanding the nature of JavaScript. This example illustrate that JavaScript can manipulate the HTML tag. It means that we can see the change of the value for any formatted HTML tag on runtime. In the Line three (3) of this example, <h1> is a HTML tag which display “My First Work”. After that <p> tag has used in the Line four (4). Generally, <p> is used to mentioning the paragraph. Here we used, id=”demo” to give a name for this paragraph. It is required to change the value of that Paragraph in JavaScript. As like the Practice-1 example, it is natural to print/show “This is a JavaScript paragraph.” to the browser. But in this example, browser will display “Fri Feb 10 2012 15:12:29 GMT+0600 (Central Asia Standard Time)”. The reason behind is getElementById(). It’s also called DOM method.
What is getElementById() ?
It’s a method of JavaScript. We can access any specific element inside the HTML page by using the method getElementById(). For accessing any element/tag in order to refer to it must have its some unique identity. Therefore we can uniquely identify that specific element in that page.
<p id="demo">This is a JavaScript paragraph.</p>
The above line of code creates a paragraph element and uniquely identifies it with its own identity "demo" value which is declared here as id="demo". Each id on the page must be uniquely identified. If we have marked all of the elements within the HTML page then we can easily access it from JavaScript. As like below:
document.getElementById("demo").innerHTML=Date();
What is innerHTML?
The innerHTML property can be used to modify the HTML document on the fly. When we uses the innerHTML, the content of HTML page changes without refreshing the page. This can make your website feel quicker and more responsive to user input. The innerHTML property is used along with getElementById within your JavaScript code to refer to an HTML element and change its contents.
What is DOM Method?
DOM, which stands for Document Object Model, is the hierarchy that you can use to access and manipulate HTML objects from within your JavaScript. The innerHTML property is not actually part of the official DOM specification. Despite this, it is supported in all major browsers, and has had widespread use across the web for many years. In this blogspot(e-book), you will get more examples of DOM ( DOM nodes and tree , DOM tables , DOM CSS , DOM Style Sheets, DOM events, DOM objects and methods) later on.
Practice 3 : An External JavaScript code
HTML & JavaScript Code (external.html):
<html>
<head>
<script src="arif.js"> </script>
</head>
<body>
<input type="button" onclick="popup()" value="Click Me Soon!">
</body>
</html>
The File arif.js Contents:
function popup()
{
alert("Hello Friend")
}
Your page will be looked like below:
Your output will be shown as follows:
Explanation:
In order to practice the above example Practice-3, two files must be needed. First one is “external.html” and the second one is “arif.js”. Importing an external file is relatively complex. First, the file you are importing must be filled with JavaScript code. Second, the file must have the file extension ".js". Finally, you must know/write the location of the file to access it. The file "arif.js" contains a one line “Hello Friend” alert function. The alert function in JavaScript is looks like Message-Box of other programming languages.
The external.html files include the JavaScript block inside the <head> tag as like below:
<head>
<script src="arif.js"> </script>
</head>
It is because we have already created a Script File externally, which will be used by this HTML/ASP/PHP document on demand. The file “external.html” contains a button “Click Me Soon”. Its implemented as like below:
<input type="button" onclick="popup()" value="Click Me Soon!">
If we examine now the above line of source code then it is clear to identify the below points:
- Input is a HTML tag
- The type of the tag is Button
- It is a button so its have a Click Event
- In the onclick event we mentioned “popup()”
- The name of the Button is “Click Me Soon!”. It means the caption of the Button.
Tips:
- Use external JavaScript files when you want to use the same script on many pages, but don't want to have to rewrite the code on every page.
- Use external JavaScript files for including both types of scripts: the type that you place in the head (functions) and the type you place in the body (scripts you want to run when the page loads).
- Be sure that your JavaScript files (.js) do not include the <script> tag. They should only contain HTML commenting and JavaScript code, nothing more.
What is popup() in JavaScript ?
JavaScript has three kinds of popup boxes: Alert box, Confirm box, and Prompt box. An alert box is often used if you want to make sure information comes through to the user.
When an alert box pops up, the user will have to click "OK" to proceed. As like :
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
A prompt box is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
[We have some exercises at next day in this ebook about popup() in JavaScript]
