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
<HTML></HTML> tags. Since JavaScript is contained inside an HTML
document, it needs to be set apart with the <SCRIPT></SCRIPT> tags.
<html> <head> <title> TITLE< itle>
<script language="JavaScript"><!-- Comment from older browsers
YOUR SCRIPT HERE
// end commenting out --> </script> </head> <body>
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.
Comment, Comment, Comment
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:
// single line comments
/* multi-line comments */
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.
Defining Variables
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:
Numeric: var x = 0; String: var y = "hello"; Variables: var z = x + y; Object:
var myImage = new Image();
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.
Ex: var x = hello ** wrong
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.
Ex: var y = "1"; var z = "2"; var a = y + z;
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.
Making a Statement
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.
Alert! Alert!
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.
Examples of alerts
alert("this is a string"); creates an alert that will contain the text"this is
a string"
alert(x) creates an alert that will contain the value defined in variable x
(make sure that variable x is defined before calling it)
alert("the number is " + x); -creates an alert that will combine text and the
value in x.
It Can Do Math Too?
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:
addition + subtraction - multiplication * division / greater than > less
than < greater than or equal >= less than or equal <=
What "If" Statements
"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:
equals == not equal !=
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.
<script language="JavaScript"> <!-commenting from old browsers var x =
6; var y = 3;
// if statement for first alert if ( x == 6 ) { alert("x is equal to 6"); }
else { alert("x is not equal to 6"); }
// defining variable for second alert var z = x + y; alert(z); // end
commenting-- ></script>
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.
________________________________________ 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.
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: violation@i-netovation.com.
The names of actual companies and products mentioned herein may be the
trademarks of their respective owners.
About the Author
(C) Copyright 2002. Lisa Spurlin
|
