|
Javascript Basics 01
|
By Lisa Spurlin
[Hits: 12113]
|
|
JavaScript adds simple or sophisticated interactivity to a Website, enhancing the user's experience. Like any programminglanguage, you need to understand the building blocks before youcan start programming.
Start at the Beginning
Browsers know to interpret Web pages as HTML because of the tags. Since JavaScript is contained inside an HTMLdocument, it needs to be set apart with the tags.
TITLE< itle><br><br><script language="JavaScript"><!-- Comment from older browsers<br><br>YOUR SCRIPT HERE<br><br>// end commenting out --> </script> </head> <body><br><br>Don't forget that last </script> tag! Abrowser will try andinterpret the whole HTML page as JavaScript, until it comes tothat closing tag. Without it, the page will generate unsightlyerrors and not load properly.<br><br>Comment, Comment, Comment<br><br>Commenting code allows you, or someone else looking at it, tounderstand what's occuring in the code. Commenting can be donein both single and multi-line variations:<br><br>// single line comments<br><br>/* multi-line comments */<br><br>But what about the HTML comment <!-- --> inside the script tags.That exists so older browsers that don't understand JavaScriptwon't try and interpret it. Otherwise, the code will render thepage as HTML, resulting in the page displaying incorrectly.<br><br>Defining Variables<br><br>JavaScript, like all programming languages, uses variables tostore information. These variables can store numbers, strings,variables that have been previously defined, and objects. Forexample:<br><br>Numeric: var x = 0; String: var y = "hello"; Variables: var z =x + y; Object: var myImage = new Image(); <br><br>Strings MUST contain "" around the word or phrase. Otherwise theJavaScript will interpret it as a number. Numbers and previouslydefined variables, likewise, should not have "" unless you wantthat number to be treated as a string.<br><br>Ex: var x = hello ** wrong<br><br>Variables that store numbers and strings can be combined in anew variable. However, if anything is combined with a string, itis automatically be treated as a string. <br><br>Ex: var y = "1"; var z = "2"; var a = y + z;<br><br>The variable "a" in this instance is "12" not 3, since the twostrings were combined together as text, not added like numbers.This would be true even if y = 1.<br><br>Making a Statement<br><br>Notice the semi-colons (;) at the end of each line of code? Thesemi-colon denotes the end of that particular statement. WhileJavaScript can sometimes be forgiving if you don't include thesemi-colon at the end of each statement, it's good practice toremember to do so. Otherwise, you might not remember to put itthere when you really need it.<br><br>Alert! Alert!<br><br>Alerts are one of the greatest functions in JavaScript. They notonly pass information on to visitors, but help you when you'retrying to hunt down a bug in your code. <br><br>Examples of alerts<br><br>alert("this is a string"); creates an alert that will containthe text"this is a string" <br><br>alert(x) creates an alert that will contain the value defined invariable x (make sure that variable x is defined before callingit)<br><br>alert("the number is " + x); -creates an alert that will combinetext and the value in x.<br><br>It Can Do Math Too?<br><br>JavaScript wouldn't be much of a programming language if itcouldn't do simple math. While there are dozens of complex,built-in math functions, here are the basic symbols you'll needto know:<br><br>addition + subtraction - multiplication * division / greaterthan > less than < greater than or equal >= less than or equal<= <br><br>What "If" Statements<br><br>"If" statements are often used to compare values. If thestatement is true, a set of instructions enclosed in {}executes. Comparisons like this are done using the followingsymbols:<br><br>equals == not equal != <br><br>In the example below, you can see how an "if" statement is usedto determine text that displays in an alert window. Copy andpaste the following script into an HTML page to see it at work.<br><br><script language="JavaScript"> <!-commenting from old browsersvar x = 6; var y = 3;<br><br>// if statement for first alert if ( x == 6 ) { alert("x isequal to 6"); } else { alert("x is not equal to 6"); }<br><br>// defining variable for second alert var z = x + y; alert(z);// end commenting-- ></script><br><br>Notice how the instructions for each statement (both the "if"and "else") are enclosed in {}(curly brackets). All curlybrackets must have a beginning and ending, just like HTML tags.If a curly bracket is missing the JavaScript will return anerror, so be sure to proof your code. <br><br>________________________________________ This document isprovided for informational purposes only, and i-Netovation.commakes no warranties, either expressed or implied, in thisdocument. Information in this document is subject to changewithout notice. The entire risk of the use or the results of theuse of this document remains with the user. The examplecompanies, organizations, products, people, and events depictedherein are fictitious. No association with any real company,organization, product, person, or event is intended or should beinferred. Complying with all applicable copyright laws is theresponsibility of the user. Without limiting the rights undercopyright, no part of this document may be reproduced, stored inor introduced into a retrieval system, or transmitted in anyform or by any means (electronic, mechanical, photocopying,recording, or otherwise), or for any purpose, wit hout theexpress written permission of i-Netovation.com.<br><br>If you believe that any of these documents, related materials orany other i-Netovation.com content materials are beingreproduced or transmitted without permission, please contact:violation@i-netovation.com.<br><br>The names of actual companies and products mentioned herein maybe the trademarks of their respective owners. <br>
<script src="/plus/count.php?aid=105288&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/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/javascript-browser-detection-and-page-redirection-aid105289.htm">Javascript; Browser Detection </a><br/>
*<a href="/javascript/validating-numerical-input-with-javascript-aid105286.htm">Validating Numerical Input wit</a><br/>
*<a href="/javascript/ask-mr-d-javascript-aid105290.htm">Ask Mr. D - JavaScript</a><br/>
*<a href="/javascript/how-to-test-for-the-javascript-dom--aid105285.htm">How to test for the Javascript</a><br/>
*<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/javascript-password-protection-aid105284.htm">Javascript Password Protection</a><br/>
*<a href="/javascript/some-useful-javascript-tricks-aid105292.htm">Some Useful JavaScript Tricks</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/validating-form-input-in-javascript-aid105293.htm">Validating Form Input in JavaS</a><br/>
*<a href="/javascript/password-protected-document-protect-your-web-page-with-specific-password-for-e-aid105282.htm">Password protected document : </a><br/>
*<a href="/javascript/using-external-javascript-files-aid105294.htm">Using External JavaScript File</a><br/>
</td>
</tr>
</table></td>
</tr>
</table>
<div>
<br/><br/>
<b>Prev:</b> <a href='/javascript/instant-plug-in-scripts-that-help-you-profit--special-offer-expiry-date-with-aid105287.htm'>Instant plug-in scripts that help you profit... "Special offer
expiry date with</a> <b>Next: </b><a href='/javascript/javascript-browser-detection-and-page-redirection-aid105289.htm'>Javascript; Browser Detection and Page Redirection</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>
| | |
