JavaScript Document Object and Events
There are lots of Document Objects and Events used in JavaScript. Some of them are listed below:
- document.open()
It tells the browser we are going to send some information to be written to the webpage. It only opens the way to work with document.
- document.write()
It tells the browser to write text in web page.
- document.writeln()
It tells the browser to write text in web page and also add the line feed at the end of the page.
- document.close()
It tells the browser to close the way to write in document. If we forget to close it then, it will work but all the actions will be treated as document action, which should be after the document.close. So, it is very important to start the document using document.open and close the document using document.close.
Example on it
<html>
<head>
<title>TESTING JS</title>
<script language="JavaScript" type="text/javascript">
document.open();
document.write('It has no feed at end.');
document.writeln('It has feed at end.');
document.writeln('<br><br><br>');
document.writeln('<p>This is paragraph text after 4 feeds.</p>');
document.writeln('<form>');
document.writeln('<input type="button" onclick="window.close();" value="Exit">');
document.writeln('</form>');
document.close();
</script>
</head>
<body>
</body>
</html>
Here
is some mouse events listed:
- onmouseover() and onmouseout()
The mouseover and mouseout events are triggered when we point mouse on some text or graphics on/off and it works some action.
- onclick()
The onclick event is triggered when we click on some text or graphics.
- onmousedown() and onmouseup()
A mouse button click consists of two movements. First one is when we pull down the button and second when we release the pulled down button and then it executes.
- onmousemove()
It triggered when we just move on some text or graphics and it gets executed.
Example on it
<html>
<head>
<title>TESTING JS</title>
</head>
<body>
<div onclick="window.close();">
Click me to close
</div>
<div onmouseover="window.close();">
Come here to close
</div>
<div onmousedown="window.close();">
Down mouse to close me
</div>
<div onmousemouve="window.close();">
Move you mouse and get extra line
</div>
</body>
</html>
Using
Functions to process the data in JavaScript
A function contains code that will be executed by an event or by a call to the function. We may call function from anywhere within a page or even from other pages if the function is placed is external JS file which has .js extension. Functions can be defined in both sections of the page head section and body section. Function also returns value for body section of the page to display the result. This example will show you only alert message as we call in MsgBox in VB.
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
</body>
</html>
This example will return value to body
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3));
</script>
</body>
</html>
Using JavaScript to create Pop-ups
We can also use JS to open pop-up windows which has lots of features like
A function contains code that will be executed by an event or by a call to the function. We may call function from anywhere within a page or even from other pages if the function is placed is external JS file which has .js extension. Functions can be defined in both sections of the page head section and body section. Function also returns value for body section of the page to display the result. This example will show you only alert message as we call in MsgBox in VB.
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
</body>
</html>
This example will return value to body
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3));
</script>
</body>
</html>
Using JavaScript to create Pop-ups
We can also use JS to open pop-up windows which has lots of features like
- Height: Specifies height of the pop in pixels
- Width: Specifies width of the pop in pixels
- Menubar: Required menu or not
- Scrollbars: Required scrolling or not
- Status: Required statusbar in footer or not
- Toolbar: Required tools at the top or not
- Directories: Specifies the display of link buttons
- Resizable: Determines whether the window can be resized
or not
- Fullscreen: Determines whether the window is display in
the full screen mode or not
Note: Every browser has some special merits upon all above points.
Example on it
This window has the menu and the status bars:
<html>
<head>
<title>TESTING</title>
</head>
<body>
<a href="javascript:void(0)" onclick="window.open('http://www.google.com', 'welcome','width=300,height=200,menubar=yes,status=yes, location=yes,toolbar=yes,scrollbars=yes')"> Open a new window</a>
<br><br>
<A href="javascript:void(0)" onclick="window.open('http://www.google.com','welcome','width=300,height=200,menubar=yes,status=yes')">Open a new window</A>
<br><br>
<A href="javascript:void(0)" onclick="window.open('http://www.google.com', 'welcome','fullscreen=yes,scrollbars=yes')">Open a full screen window</A>
<br><br>
</body>
</html>
We have
seen in many websites, it loads with many pop-ups and we get angry why they are
opening many times. Actually they had set-up the onload event in body section
of the each page in website. So, when we navigate to another page it opens
again. Let's us see how it is implemented.
<html>
<head>
<title>TESTING</title>
</head>
<body onload="window.open('http://www.google.com','welcome','width=300,height=200,menubar=yes,status=yes')">
</body>
</html>
Saving State using JavaScript
It is one of the most useful features of JavaScript that saves the state of user. Web Servers are stateless; it never saves the information about user's browsing sessions like to remember the history pages, visited addresses. It is very important to save information about a web browsing sessions, as we know saving the state. Assume an example, you are filling online application form and after submit form you are again trying to come back to form page. If the developer sated the expiration of state at the time submit button click, the session get expired. There is lots of example of saving the sessions as
<html>
<head>
<title>TESTING</title>
</head>
<body onload="window.open('http://www.google.com','welcome','width=300,height=200,menubar=yes,status=yes')">
</body>
</html>
Saving State using JavaScript
It is one of the most useful features of JavaScript that saves the state of user. Web Servers are stateless; it never saves the information about user's browsing sessions like to remember the history pages, visited addresses. It is very important to save information about a web browsing sessions, as we know saving the state. Assume an example, you are filling online application form and after submit form you are again trying to come back to form page. If the developer sated the expiration of state at the time submit button click, the session get expired. There is lots of example of saving the sessions as
No comments:
Post a Comment