Some Useful JavaScript Tricks
JavaScript can be one of the most useful additions to any web
page. It comes bundled with Microsoft Internet Explorer and
Netscape Navigator and it allows us to perform field validations,
mouse-overs images, open popup windows, and a slew of other
things.
In this article I will show you how to:
- Display the browser name and version number
- Change the text in the status bar of the browser
- Use an input box to get text from 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 page
so that it can run the JavaScript. JavaScript code is inserted
between opening and closing script tags: ,
like this:
These script tags can be placed anywhere on the page, however
it’s common practice to place them between the
and
tags. A basic HTML page that contains some JavaScript looks
like this:
My Test Page < itle><br /><script language="JavaScript"></p>
<p> function testfunc()<br /> {<br /> var x = 1;<br /> }</p>
<p></script><br /></head><br /><body><br /> <br />
<h1>Hello</h1>
<p></body><br /></html></p>
<p>For the examples in this article, you should use the basic<br />document format I have just shown you, inserting the JavaScript<br />code between the <script> and </script> tags. When you load the<br />page in your browser, the JavaScript code will be executed<br />automatically.</p>
<p>———————————————–<br />Displaying the browsers name and version number<br />———————————————–</p>
<p>The “navigator” object in JavaScript contains the details of the<br />users browser, including its name and version number. We can<br />display them in our browser using the document.write function:</p>
<p> document.write(”Your browser is: ” navigator.appName);<br /> document.write(”<br />Its version is: ” navigator.appVersion);</p>
<p>I run Windows 2000 and Internet Explorer version 6, so the output<br />from the code above looks like this in my browser window:</p>
<p> Your browser is: Microsoft Internet Explorer<br /> Its version is: 4.0 (compatible; MSIE 6.0b; Windows NT 5.0)</p>
<p>———————————————–<br />Changing the text in the status bar of the browser<br />———————————————–</p>
<p>To change the text in the status bar of a browser window, we just<br />change the “status” member of the “window” object, which<br />represents our entire browser window:</p>
<p> window.status = “This is some text”;</p>
<p>———————————————–<br />Using an input box to get text from the user<br />———————————————–</p>
<p>Just like in traditional windows applications, we can use an<br />input box to get some text input from the user. The “prompt”<br />function is all we need:</p>
<p> var name = prompt(”What is your name?”);<br /> document.write(”Hello ” name);</p>
<p>The prompt function accepts just one argument (the title of the<br />input box), and returns the value entered into the text box. In<br />the example above, we get the users name and store it in the<br />“name” variable. We then use the “document.write” function to<br />output their name into the browser window.</p>
<p>———————————————–<br />Using a message box to display text to the user<br />———————————————–</p>
<p>We can display a message box containing an OK button. These<br />are great when you want to let the user know what is happening<br />during their time on a particular page. We can use a message box<br />to display the “name” variable from our previous example:</p>
<p> var name = prompt(”What is your name?”);<br /> alert(”Your name is: ” name);</p>
<p>The “alert” function takes one argument, which is the text to<br />display inside of the message box.</p>
<p>———————————————–<br />Changing the title of the browser window<br />———————————————–</p>
<p>To change the title of our web browser’s window, we simply modify<br />the “document.title” variable, like this:</p>
<p> document.title = “My new title”;</p>
<p>One bad thing about the “document.title” variable is that we can<br />only manipulate it in Microsoft Internet Explorer. Netscape’s<br />implementation of JavaScript doesn’t allow us to modify it.</p>
<p>———————————————–<br />In Closing<br />———————————————–</p>
<p>As you can see from the examples in this article, JavaScript is a<br />powerful scripting language that we can use to enhance our<br />visitors experience with our site. You shouldn’t use JavaScript<br />too much, however, because in some cases it can annoy your<br />visitors and send them packing before your site even loads!</p>
<p><u>Authur Information:</u></p>
<p> Mitchell Harper is the founder of http://www.devarticles.com.<br />DevArticles provides its visitors with useful, informative<br />articles on ASP, PHP, and .NET, as well as heaps of tips and<br />tricks that you wont find anywhere else! To see what it’s all<br />about, visit devArticles right now at http://www.devarticles.com</p>
<p class="akst_link"><a href="http://www.freearticleonline.info/?p=872&akst_action=share-this" onclick="akst_share('872', 'http%3A%2F%2Fwww.freearticleonline.info%2F2007%2F09%2Fsome-useful-javascript-tricks%2F', 'Some+Useful+JavaScript+Tricks', '872', '4e52de6a-4885-4db0-87e9-392af94da8e4'); return false;" title="Email, post to del.icio.us, etc." id="akst_link_872" class="akst_share_link" rel="noindex nofollow">ShareThis</a>
</p>
<p align=right></p>
<div style="clear:both;"></div>
<div class="postinfo">
September 24, 2007 | Filed Under <a href="http://www.freearticleonline.info/category/javascript/" title="View all posts in Javascript" rel="category tag">Javascript</a> </div>
<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/">
<rdf:Description rdf:about="http://www.freearticleonline.info/2007/09/some-useful-javascript-tricks/"
dc:identifier="http://www.freearticleonline.info/2007/09/some-useful-javascript-tricks/"
dc:title="Some Useful JavaScript Tricks"
trackback:ping="http://www.freearticleonline.info/2007/09/some-useful-javascript-tricks/trackback/" />
</rdf:RDF> -->
<h3>Comments</h3>
<!-- You can start editing here. -->
<div id="commentblock">
<!-- If comments are open, but there are no comments. -->
<p id="respond"><b>Leave a Reply</b></p>
<p>You must be <a href="http://www.freearticleonline.info/wp-login.php?redirect_to=http://www.freearticleonline.info/2007/09/some-useful-javascript-tricks/">logged in</a> to post a comment.</p></div>
</div>
<!-- begin l_sidebar -->
<div id="l_sidebar">
<ul id="l_sidebarwidgeted">
<li id="Categories">
<h2>Categories</h2>
<ul>
<li class="cat-item cat-item-1"><a href="http://www.freearticleonline.info/category/advertising/" title="View all posts filed under Advertising">Advertising</a>
</li>
<li class="cat-item cat-item-3"><a href="http://www.freearticleonline.info/category/advice/" title="View all posts filed under Advice">Advice</a>
</li>
<li class="cat-item cat-item-4"><a href="http://www.freearticleonline.info/category/affiliate-programs/" title="View all posts filed under Affiliate-programs">Affiliate-programs</a>
</li>
<li class="cat-item cat-item-5"><a href="http://www.freearticleonline.info/category/autos/" title="View all posts filed under Autos">Autos</a>
</li>
<li class="cat-item cat-item-6"><a href="http://www.freearticleonline.info/category/awards/" title="View all posts filed under Awards">Awards</a>
</li>
<li class="cat-item cat-item-7"><a href="http://www.freearticleonline.info/category/business/" title="View all posts filed under Business">Business</a>
</li>
<li class="cat-item cat-item-8"><a href="http://www.freearticleonline.info/category/careers/" title="View all posts filed under Careers">Careers</a>
</li>
<li class="cat-item cat-item-9"><a href="http://www.freearticleonline.info/category/cgi/" title="View all posts filed under Cgi">Cgi</a>
</li>
<li class="cat-item cat-item-10"><a href="http://www.freearticleonline.info/category/communication/" title="View all posts filed under Communication">Communication</a>
</li>
<li class="cat-item cat-item-11"><a href="http://www.freearticleonline.info/category/computers/" title="View all posts filed under Computers">Computers</a>
</li>
<li class="cat-item cat-item-13"><a href="http://www.freearticleonline.info/category/css/" title="View all posts filed under CSS">CSS</a>
</li>
<li class="cat-item cat-item-15"><a href="http://www.freearticleonline.info/category/dhtml/" title="View all posts filed under DHTML">DHTML</a>
</li>
<li class="cat-item cat-item-16"><a href="http://www.freearticleonline.info/category/direct-mail/" title="View all posts filed under Direct-mail">Direct-mail</a>
</li>
<li class="cat-item cat-item-17"><a href="http://www.freearticleonline.info/category/domain-names/" title="View all posts filed under Domain-names">Domain-names</a>
</li>
<li class="cat-item cat-item-18"><a href="http://www.freearticleonline.info/category/ebooks/" title="View all posts filed under Ebooks">Ebooks</a>
</li>
<li class="cat-item cat-item-19"><a href="http://www.freearticleonline.info/category/ecommerce/" title="View all posts filed under Ecommerce">Ecommerce</a>
</li>
<li class="cat-item cat-item-20"><a href="http://www.freearticleonline.info/category/education/" title="View all posts filed under Education">Education</a>
</li>
<li class="cat-item cat-item-21"><a href="http://www.freearticleonline.info/category/email/" title="View all posts filed under Email">Email</a>
</li>
<li class="cat-item cat-item-22"><a href="http://www.freearticleonline.info/category/entertainment/" title="View all posts filed under Entertainment">Entertainment</a>
</li>
<li class="cat-item cat-item-23"><a href="http://www.freearticleonline.info/category/environment/" title="View all posts filed under Environment">Environment</a>
</li>
<li class="cat-item cat-item-24"><a href="http://www.freearticleonline.info/category/family/" title="View all posts filed under Family">Family</a>
</li>
<li class="cat-item cat-item-25"><a href="http://www.freearticleonline.info/category/finance/" title="View all posts filed under Finance">Finance</a>
</li>
<li class="cat-item cat-item-26"><a href="http://www.freearticleonline.info/category/fitness/" title="View all posts filed under Fitness">Fitness</a>
</li>
<li class="cat-item cat-item-27"><a href="http://www.freearticleonline.info/category/food/" title="View all posts filed under Food">Food</a>
</li>
<li class="cat-item cat-item-28"><a href="http://www.freearticleonline.info/category/free/" title="View all posts filed under Free">Free</a>
</li>
<li class="cat-item cat-item-29"><a href="http://www.freearticleonline.info/category/gardening/" title="View all posts filed under Gardening">Gardening</a>
</li>
<li class="cat-item cat-item-30"><a href="http://www.freearticleonline.info/category/government/" title="View all posts filed under Government">Government</a>
</li>
<li class="cat-item cat-item-31"><a href="http://www.freearticleonline.info/category/health/" title="View all posts filed under Health">Health</a>
</li>
<li class="cat-item cat-item-33"><a href="http://www.freearticleonline.info/category/home-business/" title="View all posts filed under Home-Business">Home-Business</a>
</li>
<li class="cat-item cat-item-34"><a href="http://www.freearticleonline.info/category/home-repair/" title="View all posts filed under Home-repair">Home-repair</a>
</li>
<li class="cat-item cat-item-35"><a href="http://www.freearticleonline.info/category/humor/" title="View all posts filed under Humor">Humor</a>
</li>
<li class="cat-item cat-item-36"><a href="http://www.freearticleonline.info/category/internet/" title="View all posts filed under Internet">Internet</a>
</li>
<li class="cat-item cat-item-37"><a href="http://www.freearticleonline.info/category/javascript/" title="View all posts filed under Javascript">Javascript</a>
</li>
<li class="cat-item cat-item-38"><a href="http://www.freearticleonline.info/category/law/" title="View all posts filed under Law">Law</a>
</li>
<li class="cat-item cat-item-41"><a href="http://www.freearticleonline.info/category/marketing/" title="View all posts filed under Marketing">Marketing</a>
</li>
<li class="cat-item cat-item-43"><a href="http://www.freearticleonline.info/category/metaphysical/" title="View all posts filed under Metaphysical">Metaphysical</a>
</li>
<li class="cat-item cat-item-44"><a href="http://www.freearticleonline.info/category/mlm/" title="View all posts filed under MLM">MLM</a>
</li>
<li class="cat-item cat-item-45"><a href="http://www.freearticleonline.info/category/motivational/" title="View all posts filed under Motivational">Motivational</a>
</li>
<li class="cat-item cat-item-46"><a href="http://www.freearticleonline.info/category/multimedia/" title="View all posts filed under Multimedia">Multimedia</a>
</li>
<li class="cat-item cat-item-47"><a href="http://www.freearticleonline.info/category/newsletters/" title="View all posts filed under Newsletters">Newsletters</a>
</li>
<li class="cat-item cat-item-48"><a href="http://www.freearticleonline.info/category/off-line-promotion/" title="View all posts filed under Off-Line Promotion">Off-Line Promotion</a>
</li>
<li class="cat-item cat-item-49"><a href="http://www.freearticleonline.info/category/online-promotion/" title="View all posts filed under Online Promotion">Online Promotion</a>
</li>
<li class="cat-item cat-item-51"><a href="http://www.freearticleonline.info/category/pets/" title="View all posts filed under Pets">Pets</a>
</li>
<li class="cat-item cat-item-52"><a href="http://www.freearticleonline.info/category/politics/" title="View all posts filed under Politics">Politics</a>
</li>
<li class="cat-item cat-item-53"><a href="http://www.freearticleonline.info/category/psychology/" title="View all posts filed under Psychology">Psychology</a>
</li>
<li class="cat-item cat-item-60"><a href="http://www.freearticleonline.info/category/se-positioning/" title="View all posts filed under SE Positioning">SE Positioning</a>
</li>
<li class="cat-item cat-item-61"><a href="http://www.freearticleonline.info/category/se-tactics/" title="View all posts filed under SE Tactics">SE Tactics</a>
</li>
<li class="cat-item cat-item-62"><a href="http://www.freearticleonline.info/category/self-help/" title="View all posts filed under Self Help">Self Help</a>
</li>
<li class="cat-item cat-item-63"><a href="http://www.freearticleonline.info/category/sexuality/" title="View all posts filed under Sexuality">Sexuality</a>
</li>
<li class="cat-item cat-item-64"><a href="http://www.freearticleonline.info/category/site-security/" title="View all posts filed under Site Security">Site Security</a>
</li>
<li class="cat-item cat-item-65"><a href="http://www.freearticleonline.info/category/social-issues/" title="View all posts filed under Social Issues">Social Issues</a>
</li>
<li class="cat-item cat-item-66"><a href="http://www.freearticleonline.info/category/spam/" title="View all posts filed under Spam">Spam</a>
</li>
<li class="cat-item cat-item-67"><a href="http://www.freearticleonline.info/category/sports/" title="View all posts filed under Sports">Sports</a>
</li>
<li class="cat-item cat-item-68"><a href="http://www.freearticleonline.info/category/technology/" title="View all posts filed under Technology">Technology</a>
</li>
<li class="cat-item cat-item-69"><a href="http://www.freearticleonline.info/category/traffic-analysis/" title="View all posts filed under Traffic Analysis">Traffic Analysis</a>
</li>
<li class="cat-item cat-item-70"><a href="http://www.freearticleonline.info/category/travel/" title="View all posts filed under Travel">Travel</a>
</li>
<li class="cat-item cat-item-71"><a href="http://www.freearticleonline.info/category/viral-marketing/" title="View all posts filed under Viral Marketing">Viral Marketing</a>
</li>
<li class="cat-item cat-item-72"><a href="http://www.freearticleonline.info/category/web-design/" title="View all posts filed under Web Design">Web Design</a>
</li>
<li class="cat-item cat-item-73"><a href="http://www.freearticleonline.info/category/web-hosting/" title="View all posts filed under Web Hosting">Web Hosting</a>
</li>
<li class="cat-item cat-item-74"><a href="http://www.freearticleonline.info/category/webmasters/" title="View all posts filed under Webmasters">Webmasters</a>
</li>
<li class="cat-item cat-item-75"><a href="http://www.freearticleonline.info/category/weight-loss/" title="View all posts filed under Weight Loss">Weight Loss</a>
</li>
<li class="cat-item cat-item-76"><a href="http://www.freearticleonline.info/category/wisdom/" title="View all posts filed under Wisdom">Wisdom</a>
</li>
<li class="cat-item cat-item-77"><a href="http://www.freearticleonline.info/category/womens-issues/" title="View all posts filed under Women's Issues">Women's Issues</a>
</li>
<li class="cat-item cat-item-78"><a href="http://www.freearticleonline.info/category/writing/" title="View all posts filed under Writing">Writing</a>
</li>
</ul>
</li>
<li id="Recent">
<h2>Recently Written</h2>
<ul>
<li><a href='http://www.freearticleonline.info/2008/11/10-reasons-to-use-promotional-items/' title='10 Reasons to Use Promotional Items'>10 Reasons to Use Promotional Items</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/what-you%c2%92ll-pay-to-hire-an-atlanta-limo/' title='What you?ll pay to hire an Atlanta limo'>What you?ll pay to hire an Atlanta limo</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/tips-on-choosing-the-right-gas-mileage-devices/' title='Tips On Choosing The Right Gas Mileage Devices'>Tips On Choosing The Right Gas Mileage Devices</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/what-are-conflict-diamonds/' title='What Are Conflict Diamonds'>What Are Conflict Diamonds</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/interesting-ideas-for-families-looking-for-cheap-holiday-breaks/' title='Interesting Ideas For Families looking for cheap Holiday Breaks'>Interesting Ideas For Families looking for cheap Holiday Breaks</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/winning-your-ex-back-how-to-win-back-your-ex-in-5-steps/' title='Winning Your Ex Back - How To Win Back Your Ex In 5 Steps'>Winning Your Ex Back - How To Win Back Your Ex In 5 Steps</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/promotional-gifts-a-trusted-plan-for-bright-business-future/' title='Promotional Gifts - A Trusted Plan for Bright Business Future'>Promotional Gifts - A Trusted Plan for Bright Business Future</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/finding-free-online-business-advertising/' title='Finding Free Online Business Advertising'>Finding Free Online Business Advertising</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/child-approved-uk-family-breaks/' title='Child Approved UK Family Breaks'>Child Approved UK Family Breaks</a></li>
<li><a href='http://www.freearticleonline.info/2008/11/promotional-gifts-%c2%96-a-ladder-to-success/' title='Promotional Gifts ? A Ladder to Success'>Promotional Gifts ? A Ladder to Success</a></li>
</ul>
</li>
</ul>
</div>
<!-- end l_sidebar -->
<!-- begin r_sidebar -->
<div id="r_sidebar">
<ul id="r_sidebarwidgeted">
<li id="Search">
<form method="get" id="search_form" action="http://www.freearticleonline.info/">
<input type="text" class="search_input" value="To search, type and hit enter" name="s" id="s" onfocus="if (this.value == 'To search, type and hit enter') {this.value = '';}" onblur="if (this.value == '') {this.value = 'To search, type and hit enter';}" />
<input type="hidden" id="searchsubmit" value="Search" /></form><br />
</li>
<li id="About">
<h2>About</h2>
<p><a href=/>FREE Articleonline.Info is providing free articles for you, <br><br>Please feel free to read and enjoy the articles. :)</a></p>
</li>
<li id="Archives">
<h2>Archives</h2>
<ul>
<li><a href='http://www.freearticleonline.info/2008/11/' title='November 2008'>November 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/10/' title='October 2008'>October 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/09/' title='September 2008'>September 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/08/' title='August 2008'>August 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/07/' title='July 2008'>July 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/06/' title='June 2008'>June 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/05/' title='May 2008'>May 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/04/' title='April 2008'>April 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/03/' title='March 2008'>March 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/02/' title='February 2008'>February 2008</a></li>
<li><a href='http://www.freearticleonline.info/2008/01/' title='January 2008'>January 2008</a></li>
<li><a href='http://www.freearticleonline.info/2007/12/' title='December 2007'>December 2007</a></li>
<li><a href='http://www.freearticleonline.info/2007/11/' title='November 2007'>November 2007</a></li>
<li><a href='http://www.freearticleonline.info/2007/10/' title='October 2007'>October 2007</a></li>
<li><a href='http://www.freearticleonline.info/2007/09/' title='September 2007'>September 2007</a></li>
</ul>
</li>
<li id="Blogroll">
<h2>Links</h2>
<ul>
<li><a href="http://www.articlesfactory.com/">Articles Factory</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
</li>
</ul>
</div>
<!-- end r_sidebar -->
</div>
<!-- The main column ends -->
<!-- begin footer -->
<div style="clear:both;"></div>
<div id="footer">
<p>Copyright © 2008 <a href="http://www.freearticleonline.info/">Free Article Online</a> <script type="text/javascript">
<!--
var _st_unit_id=12765;
var _st_expr_tm=3600;
//-->
</script>
<script type="text/javascript" src="http://js.tongji.yahoo.com.cn/0/24/477/ystat.js"></script></p>
</div>
<!-- Share This BEGIN -->
<div id="akst_form">
<a href="javascript:void($('akst_form').style.display='none');" class="akst_close">Close</a>
<ul class="tabs">
<li id="akst_tab2" class="selected" onclick="akst_share_tab('2');">E-mail</li>
<li id="akst_tab1" onclick="akst_share_tab('1');">Social Web</li>
</ul>
<div class="clear"></div>
<div id="akst_email">
<form action="http://www.freearticleonline.info/index.php" method="post">
<fieldset>
<legend>E-mail It</legend>
<ul>
<li>
<label for="akst_to">To Addresses (up to 5):</label>
<input type="text" id="akst_to" name="akst_to" value="" class="akst_text" />
</li>
<li>
<label for="akst_name">Your Name:</label>
<input type="text" id="akst_name" name="akst_name" value="" class="akst_text" />
</li>
<li>
<label for="akst_email_field">Your Address:</label>
<input type="text" id="akst_email_field" name="akst_email" value="" class="akst_text" />
</li>
<li>
<input type="submit" name="akst_submit" value="Send It" />
</li>
</ul>
<input type="hidden" name="akst_action" value="send_mail" />
<input type="hidden" name="akst_post_id" id="akst_post_id" value="" />
</fieldset>
</form>
</div>
<div style="display: none;" id="akst_social">
<ul>
<li><a href="#" id="akst_facebook">Facebook</a></li>
<li><a href="#" id="akst_digg">Digg</a></li>
<li><a href="#" id="akst_stumbleupon">StumbleUpon</a></li>
<li><a href="#" id="akst_delicious">del.icio.us</a></li>
<li><a href="#" id="akst_reddit">reddit</a></li>
<li><a href="#" id="akst_blinklist">BlinkList</a></li>
<li><a href="#" id="akst_newsvine">Newsvine</a></li>
<li><a href="#" id="akst_furl">Furl</a></li>
<li><a href="#" id="akst_tailrank">Tailrank</a></li>
<li><a href="#" id="akst_magnolia">Ma.gnolia</a></li>
</ul>
<div class="clear"></div>
</div>
<div id="akst_credit"><a href="http://sharethis.com"><img src="http://r.sharethis.com/powered-by?publisher=4e52de6a-4885-4db0-87e9-392af94da8e4" alt="Powered by ShareThis" /></a></div>
</div>
<!-- Share This END -->
</body>
</html>