|
Some Useful JavaScript Tricks
|
By Mitchell Harper
[Hits: 15625]
|
|
JavaScript can be one of the most useful additions to any webpage. It comes bundled with Microsoft Internet Explorer andNetscape Navigator and it allows us to perform fieldvalidations, mouse-overs images, open popup windows, and a slewof other things.
In this article I will show you how to:
- Display the browser name and version number - Change the textin the status bar of the browser - Use an input box to get textfrom the user - Use a message box to display text to the user -Change the title of the browser window
Before that, however, we need to know how to setup our web pageso that it can run the JavaScript. JavaScript code is insertedbetween opening and closing script tags: ,like this:
These script tags can be placed anywhere on the page, howeverit's common practice to place them between the and tags. A basic HTML page that contains some JavaScriptlooks like this:
My Test Page < itle> <scriptlanguage="JavaScript"><br><br> function testfunc() { var x = 1; }<br><br></script> </head> <body> <h1>Hello</h1> </body> </html><br><br>For the examples in this article, you should use the basicdocument format I have just shown you, inserting the JavaScriptcode between the <script> and </script> tags. When you load thepage in your browser, the JavaScript code will be executedautomatically.<br><br>----------------------------------------------- Displaying thebrowsers name and version number-----------------------------------------------<br><br>The "navigator" object in JavaScript contains the details of theusers browser, including its name and version number. We candisplay them in our browser using the document.write function:<br><br> document.write("Your browser is: " + navigator.appName);document.write(" Its version is: " + navigator.appVersion);<br><br>I run Windows 2000 and Internet Explorer version 6, so theoutput from the code above looks like this in my browser window:<br><br> Your browser is: Microsoft Internet Explorer Its version is:4.0 (compatible; MSIE 6.0b; Windows NT 5.0)<br><br>----------------------------------------------- Changing thetext in the status bar of the browser-----------------------------------------------<br><br>To change the text in the status bar of a browser window, wejust change the "status" member of the "window" object, whichrepresents our entire browser window:<br><br> window.status = "This is some text";<br><br>----------------------------------------------- Using an inputbox to get text from the user-----------------------------------------------<br><br>Just like in traditional windows applications, we can use aninput box to get some text input from the user. The "prompt"function is all we need:<br><br> var name = prompt("What is your name?"); document.write("Hello" + name);<br><br>The prompt function accepts just one argument (the title of theinput box), and returns the value entered into the text box. Inthe example above, we get the users name and store it in the"name" variable. We then use the "document.write" function tooutput their name into the browser window.<br><br>----------------------------------------------- Using a messagebox to display text to the user-----------------------------------------------<br><br>We can display a message box containing an OK button. These aregreat when you want to let the user know what is happeningduring their time on a particular page. We can use a message boxto display the "name" variable from our previous example:<br><br> var name = prompt("What is your name?"); alert("Your name is: "+ name);<br><br>The "alert" function takes one argument, which is the text todisplay inside of the message box.<br><br>----------------------------------------------- Changing thetitle of the browser window-----------------------------------------------<br><br>To change the title of our web browser's window, we simplymodify the "document.title" variable, like this:<br><br> document.title = "My new title";<br><br>One bad thing about the "document.title" variable is that we canonly manipulate it in Microsoft Internet Explorer. Netscape'simplementation of JavaScript doesn't allow us to modify it.<br><br>----------------------------------------------- In Closing-----------------------------------------------<br><br>As you can see from the examples in this article, JavaScript isa powerful scripting language that we can use to enhance ourvisitors experience with our site. You shouldn't use JavaScripttoo much, however, because in some cases it can annoy yourvisitors and send them packing before your site even loads!<br>
<script src="/plus/count.php?aid=105292&mid=0" language="javascript"></script>
<center></center>
</td>
<td style="vertical-align:top">
<script type="text/javascript"><!--
google_ad_client = "pub-9203237434407766";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_type = "text_image";
//2007-07-10: txu_articles_bottom
google_ad_channel = "9900206766";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</td>
<td width="224" align="right" valign="top">
<table width="98%" border="0" cellpadding="0" cellspacing="0" class="tbspan">
<tr>
<td class="guidet">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="gtb">
<tr>
<td height="29" background="/templets/img/31bg3.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="32%" align="right"><img src="/templets/img/i.gif" width="10" height="13"></td>
<td width="2%"> </td>
<td width="66%" class="guidetitle"><strong>Top Articles</strong></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="50" valign="top" class="guideb">
*<a href="/javascript/using-external-javascript-files-aid105294.htm">Using External JavaScript File</a><br/>
*<a href="/javascript/simplified-form-to-mail-unlimitted-input-aid105278.htm">Simplified form to mail: Unlim</a><br/>
*<a href="/javascript/capturing-video-and-audio-streams-how-to-aid105276.htm">Capturing Video And Audio Stre</a><br/>
*<a href="/javascript/building-html-codes-automatically-just-copy-paste-your-content-aid105283.htm">Building HTML codes automatica</a><br/>
*<a href="/javascript/how-to-handle-web-surfers-who-disabled-javascript-aid105277.htm">How to handle web surfers, who</a><br/>
*<a href="/javascript/instant-plug-in-scripts-that-help-you-profit--special-offer-expiry-date-with-aid105287.htm">Instant plug-in scripts that h</a><br/>
*<a href="/javascript/anti-right-click-pop-up-pop-up-will-appear-if-visitors-right-clicks-his-mouse-aid105280.htm">Anti right-click pop up : pop </a><br/>
*<a href="/javascript/validating-numerical-input-with-javascript-aid105286.htm">Validating Numerical Input wit</a><br/>
*<a href="/javascript/new-customizable-javascript-menu-for-web-applications-aid105275.htm">New Customizable JavaScript Me</a><br/>
*<a href="/javascript/ask-mr-d-javascript-aid105290.htm">Ask Mr. D - JavaScript</a><br/>
*<a href="/javascript/inexpensive-area-rugs-give-your-home-the-facelift-it-needs-aid105273.htm">Inexpensive Area Rugs Give You</a><br/>
*<a href="/javascript/spice-up-your-web-site-with-javascript-aid105297.htm">Spice Up Your Web Site with Ja</a><br/>
</td>
</tr>
</table>
<table width="98%" border="0" cellpadding="0" cellspacing="0" class="tbspan">
<tr>
<td class="guidet">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="gtb">
<tr>
<td height="29" background="/templets/img/31bg3.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="32%" align="right"><img src="/templets/img/i.gif" width="10" height="13"></td>
<td width="2%"> </td>
<td width="66%" class="guidetitle"><strong>Related Articles</strong></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="50" valign="top" class="guideb">
*<a href="/javascript/grow-your-subscribers-exponentially-with-these-javascript-e-mail-capture-boxes--aid105291.htm">Grow Your Subscribers Exponent</a><br/>
*<a href="/javascript/validating-form-input-in-javascript-aid105293.htm">Validating Form Input in JavaS</a><br/>
*<a href="/javascript/ask-mr-d-javascript-aid105290.htm">Ask Mr. D - JavaScript</a><br/>
*<a href="/javascript/using-external-javascript-files-aid105294.htm">Using External JavaScript File</a><br/>
*<a href="/javascript/javascript-browser-detection-and-page-redirection-aid105289.htm">Javascript; Browser Detection </a><br/>
*<a href="/javascript/guide-to-creating-simple-chromeless-popup-windows--aid105295.htm">Guide to creating simple chrom</a><br/>
*<a href="/javascript/javascript-basics-01-aid105288.htm">Javascript Basics 01</a><br/>
*<a href="/javascript/dirty-web-promotion-tricks-1-legitimate-and-malicious-javascripts-aid105296.htm">Dirty Web Promotion Tricks #1 </a><br/>
*<a href="/javascript/instant-plug-in-scripts-that-help-you-profit--special-offer-expiry-date-with-aid105287.htm">Instant plug-in scripts that h</a><br/>
*<a href="/javascript/spice-up-your-web-site-with-javascript-aid105297.htm">Spice Up Your Web Site with Ja</a><br/>
*<a href="/javascript/validating-numerical-input-with-javascript-aid105286.htm">Validating Numerical Input wit</a><br/>
*<a href="/javascript/make-your-website-scream-with-excitement-with-java--aid105298.htm">Make your website scream with </a><br/>
</td>
</tr>
</table></td>
</tr>
</table>
<div>
<br/><br/>
<b>Prev:</b> <a href='/javascript/grow-your-subscribers-exponentially-with-these-javascript-e-mail-capture-boxes--aid105291.htm'>Grow Your Subscribers Exponentially With These Javascript E-mail
Capture Boxes!</a> <b>Next: </b><a href='/javascript/validating-form-input-in-javascript-aid105293.htm'>Validating Form Input in JavaScript</a>
<br/><br/>
<script type="text/javascript"><!--
google_ad_client = "pub-9203237434407766";
google_ad_width = 728;
google_ad_height = 15;
google_ad_format = "728x15_0ads_al_s";
//2007-07-10: txu-articles_nav_bottom
google_ad_channel = "9256344755";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<br/><br/>
</div>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0" class="tbspan" style="margin-top:3px">
<tr>
<td height="51" background="/templets/img/31bg5.gif" valign="top"><img src='/templets/img/31c5.gif' width='4' height='49'></td>
<td background="/templets/img/31bg5.gif" align="center">
<a href='/'>Home</a>
| <a href="/plus/sitemap.html">Site Map</a>
| <a href='#' onClick="javascript:window.external.AddFavorite('http://localhost','T-XU Articles');">Bookmark this site</a>
| <a href="/plus/rssmap.html">T-XU RSS</a>
<hr style="height: 1px"/>
Copyright 2007 <a href='http://www.t-xu.com' target='_blank'>T-XU.com</a> - All Rights Reserved Worldwide.
</td>
<td background="/templets/img/31bg5.gif" align="right" valign="top"><img src='/templets/img/31c6.gif' width='4' height='49'></td>
</tr>
</table>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0" class="tbspan">
<tr><td height="6"></td></tr>
</table>
</center>
</body>
</html>
| | |
