|
|
|
|
|
|
|
Author Rank :
|
|
|
Page Views :
|
1349
|
|
Downloads :
|
0
|
|
Rating :
|
Rate it
|
|
Level :
|
Beginner
|
|
|
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-
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- Client Side State Saving: user's browser as directed by server to do do it.
Cookies on client computer help to do all.
- Server Side State Saving: sever directly saves the state, it is very
limited.
HAVE A HAPPY CODING!
|
|
Comment Request!
Thank you for reading this post. Please post your feedback, question, or comments about this post
Here.
|
|
|
|
|
Login
to add your contents and source code to this article
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
C# Consulting is founded in 2002 by the founders of C# Corner. Unlike a traditional
consulting company, our consultants are well-known experts in .NET and many of them
are MVPs, authors, and trainers. We specialize in Microsoft .NET development and
utilize Agile Development and Extreme Programming practices to provide fast pace
quick turnaround results. Our software development model is a mix of Agile Development,
traditional SDLC, and Waterfall models.
|
|
Click here to learn more about C# Consulting. |
|
|
|
|
|
|
|
Introducing MaxV - one click. infinite control. Hyper-V Hosting from MaximumASP.
Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon.
Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees.
As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
|
Dynamic PDF
ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications.
|
Nevron Chart for .NET 2010.1 Now Available
The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
|
ASP.NET 4 Hosting
Get 2 Months Free of ASP.NET Hosting for Only $4.95/month! Receive FREE MS SQL and MySQL Databases Including ASP.NET 4/3.5, MVC 3.0, Silverlight 4, Windows 2008/IIS 7.0 Plus FREE IIS 7 Modules. Host UNLIMITED ASP.NET Web Sites – Click Here!
|
|
|
|
|
|
|
|
|
|
|
|
|