|
|
Javascript Basics 01 |
By:
Lisa Spurlin |
|
|
JavaScript adds simple or sophisticated interactivity to a Web
site, enhancing the user's experience. Like any programming
language, you need to understand the building blocks before you
can start programming.
Start at the Beginning
Browsers know to interpret Web pages as HTML because of the
tags. Since JavaScript is contained inside an HTML
document, 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 and
interpret the whole HTML page as JavaScript, until it comes to
that closing tag. Without it, the page will generate unsightly
errors and not load properly.<br><br>Comment, Comment, Comment<br><br>Commenting code allows you, or someone else looking at it, to
understand what's occuring in the code. Commenting can be done
in 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 JavaScript
won't try and interpret it. Otherwise, the code will render the
page as HTML, resulting in the page displaying incorrectly.<br><br>Defining Variables<br><br>JavaScript, like all programming languages, uses variables to
store information. These variables can store numbers, strings,
variables that have been previously defined, and objects. For
example:<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 the
JavaScript will interpret it as a number. Numbers and previously
defined variables, likewise, should not have "" unless you want
that 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 a
new variable. However, if anything is combined with a string, it
is 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 two
strings 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? The
semi-colon denotes the end of that particular statement. While
JavaScript can sometimes be forgiving if you don't include the
semi-colon at the end of each statement, it's good practice to
remember to do so. Otherwise, you might not remember to put it
there when you really need it.<br><br>Alert! Alert!<br><br>Alerts are one of the greatest functions in JavaScript. They not
only pass information on to visitors, but help you when you're
trying 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 contain
the text"this is a string" <br><br>alert(x) creates an alert that will contain the value defined in
variable x (make sure that variable x is defined before calling
it)<br><br>alert("the number is " + x); -creates an alert that will combine
text and the value in x.<br><br>It Can Do Math Too?<br><br>JavaScript wouldn't be much of a programming language if it
couldn't do simple math. While there are dozens of complex,
built-in math functions, here are the basic symbols you'll need
to know:<br><br>addition + subtraction - multiplication * division / greater
than > 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 the
statement is true, a set of instructions enclosed in {}
executes. Comparisons like this are done using the following
symbols:<br><br>equals == not equal != <br><br>In the example below, you can see how an "if" statement is used
to determine text that displays in an alert window. Copy and
paste the following script into an HTML page to see it at work.<br><br><script language="JavaScript"> <!-commenting from old browsers
var x = 6; var y = 3;<br><br>// if statement for first alert if ( x == 6 ) { alert("x is
equal 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 curly
brackets must have a beginning and ending, just like HTML tags.
If a curly bracket is missing the JavaScript will return an
error, so be sure to proof your code. <br><br>________________________________________ This document is
provided for informational purposes only, and i-Netovation.com
makes no warranties, either expressed or implied, in this
document. Information in this document is subject to change
without notice. The entire risk of the use or the results of the
use of this document remains with the user. The example
companies, organizations, products, people, and events depicted
herein are fictitious. No association with any real company,
organization, product, person, or event is intended or should be
inferred. Complying with all applicable copyright laws is the
responsibility of the user. Without limiting the rights under
copyright, no part of this document may be reproduced, stored in
or introduced into a retrieval system, or transmitted in any
form or by any means (electronic, mechanical, photocopying,
recording, or otherwise), or for any purpose, wit hout the
express written permission of i-Netovation.com.<br><br>If you believe that any of these documents, related materials or
any other i-Netovation.com content materials are being
reproduced or transmitted without permission, please contact:
<a href="mailto:violation@i-netovation.com" style="text-decoration:underline; color:Black;">violation@i-netovation.com</a>.<br><br>The names of actual companies and products mentioned herein may
be the trademarks of their respective owners.
<br><br></td>
</tr>
<tr>
<td class="text" style="padding-left:0; padding-right:10">
Article Source: <a href="http://www.populararticles.com/article5388.html" style="text-decoration:none; color:Black;">http://www.PopularArticles.com/article5388.html</a></td>
</tr>
<tr>
<td style="padding-left:0; padding-right:50"><br>
<script type="text/javascript"><!--
google_ad_client = "pub-3318717353657405";
/* 468x15, created 3/24/08 */
google_ad_slot = "0566861183";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<br><br>
<hr>
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td class="bodylinks">
<strong>Article</strong>: Javascript Basics 01<br>
<strong>Author</strong>: <em>Lisa Spurlin</em><br>
<strong>Total Views</strong>: 29<br>
<strong>Word Count</strong>: 852<br>
<strong>Category:</strong>
<a href="http://www.populararticles.com/" class="linknav">Home</a> /
<a href="http://www.populararticles.com/category6.html" class="linknav">Computers</a> / <a href="http://www.populararticles.com/category7.html" class="linknav">Programming</a> / <a href="http://www.populararticles.com/category99.html" class="linknav">Javascript</a>
</td>
<td width="30%">
<table border="0" cellpadding="0" cellspacing="1">
<tr>
<td width="15%">
<a href="#" onClick="javascript:window.print()" rel="nofollow">
<img border="0" src="http://www.populararticles.com/images/printer.gif" width="16" height="16" align="left"></a></td>
<td width="85%">
<a href="#" onClick="javascript:window.print()" rel="nofollow">
<span style="font-size: 11px">Print This Article</span></a>
</td>
</tr>
<tr>
<td width="30">
<a href="http://www.populararticles.com/index.php?page=comments&id=5388" rel="nofollow">
<img border="0" src="http://www.populararticles.com/images/notepad.gif" width="16" height="16" align="left">
</a>
</td>
<td><span style="font-size: 11px">
<a href="http://www.populararticles.com/index.php?page=comments&id=5388" rel="nofollow">
Post Comment</a>
</span></td>
</tr>
<tr>
<td width="30">
<a href="#" onclick='window.external.AddFavorite(location.href,document.title);'>
<img border="0" src="http://www.populararticles.com/images/folder.gif" width="16" height="16" align="left">
</a></td>
<td>
<a href="#" onclick='window.external.AddFavorite(location.href,document.title);'>
<span style="font-size: 11px">Add To Favorites</span>
</a>
</td>
</tr>
<tr>
<td width="30">
<a href="http://www.populararticles.com/index.php?page=article_email&id=5388" rel="nofollow">
<img border="0" src="http://www.populararticles.com/images/mail.gif" width="16" height="16" align="left">
</a>
</td>
<td>
<a href="http://www.populararticles.com/index.php?page=article_email&id=5388" rel="nofollow">
<span style="font-size: 11px">Email to Friends</span>
</a>
</td>
</tr>
<tr>
<td width="30">
<a href="http://www.populararticles.com/index.php?page=article_republish&id=5388" rel="nofollow">
<img border="0" src="http://www.populararticles.com/images/checkscreen.gif" width="16" height="16" align="left">
</a>
</td>
<td>
<a href="http://www.populararticles.com/index.php?page=article_republish&id=5388" rel="nofollow">
<span style="font-size: 11px">Republish Article</span></a></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"><hr><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top">
<strong>Related Articles</strong><br><br style="line-height: 7px;"><a href="http://www.populararticles.com/article5390.html" class="linknav">Ask Mr. D - JavaScript</a> - <em>Bill Daugherty</em><br><a href="http://www.populararticles.com/article5384.html" class="linknav">Javascript Password Protection</a> - <em>Timur Abdrakhmanov - http://timurkz.buildtolearn.net</em><br><a href="http://www.populararticles.com/article5377.html" class="linknav">How To Handle Web Surfers, Who Disabled JavaScript</a> - <em>Michael Kashirin</em><br><a href="http://www.populararticles.com/article5392.html" class="linknav">Some Useful JavaScript Tricks</a> - <em>Mitchell Harper</em><br><a href="http://www.populararticles.com/article5374.html" class="linknav">Submit Form Conditionally - JavaScript</a> - <em>SiteArticles.com</em><br><a href="http://www.populararticles.com/article42595.html" class="linknav">JavaScript Alert - Every Web Master Running JavaScript Should Know This</a> - <em>David Malia</em><br><a href="http://www.populararticles.com/article5394.html" class="linknav">Using External JavaScript Files</a> - <em>Amrit Hallan</em><br><a href="http://www.populararticles.com/article5393.html" class="linknav">Validating Form Input In JavaScript</a> - <em>Amrit Hallan</em><br><a href="http://www.populararticles.com/article36938.html" class="linknav">How To Handle Web Surfers Who Disabled JavaScript</a> - <em>Michael Kashirin</em><br><a href="http://www.populararticles.com/article5397.html" class="linknav">Spice Up Your Web Site With JavaScript</a> - <em>Shelley Lowery</em></td>
<td> </td>
<td align="right" valign="top">
<script type="text/javascript"><!--
google_ad_client = "pub-3318717353657405";
/* 200x200, created 3/10/08 */
google_ad_slot = "2717238378";
google_ad_width = 200;
google_ad_height = 200;
//-->
</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>
</tr>
</table>
</table>
</td>
</tr>
</table></td>
</tr>
</table><!--End Content-->
<table width="976" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="10"> </td>
</tr>
<tr>
<td height="10" style="background-image:url(http://www.populararticles.com/images/bottomtile.jpg)"> </td>
</tr>
<tr>
<td height="20" align="center" valign="bottom" class="para">
<a href="http://www.populararticles.com/">Home</a> |
<a href="http://www.populararticles.com/categories.php">Categories</a> |
<a href="http://www.populararticles.com/submit.php">Submit</a> |
<a href="http://www.populararticles.com/republish.php" rel="nofollow">Republish</a> |
<a href="http://www.populararticles.com/tools/">Tools</a> |
<a href="http://www.populararticles.com/links.php" rel="nofollow">Links</a> |
<a href="http://www.populararticles.com/credits.php" rel="nofollow">Credits</a> |
<a href="http://www.populararticles.com/contact/" rel="nofollow">Contact</a> |
<a href="http://www.populararticles.com/privacy.php" rel="nofollow">Privacy Statement</a> |
<a href="http://www.populararticles.com/terms.php" rel="nofollow">Terms Of Use</a>
</td>
</tr>
<tr>
<td height="30" align="center" valign="bottom" class="para">Copyright © 2008 InfoServe Media, LLC (DBA PopularArticles.com). All rights reserved.</td>
</tr>
</table></td>
</tr>
</table>
<script type="text/javascript">
<!--
var FCS_Account="8136";
var FCS_Server="http://www.statssheet.com";
var FCS_Page="DetectName";
var FCS_Url="DetectUrl";
var FCS_Offset="0";
var FCS_Interval="24";
var FCS_Cntimg="100";
// -->
</script><script type="text/javascript" src="http://www.statssheet.com/js.php?usr=8136"></script>
</body>
</html>
| | |
Categories 
