How To Write JavaScript
If you have ever used
CSS before, you will find the whole part about including
JavaScript will be a lot simpler to grasp. Here are Tizag's three important steps you should always follow when creating or using someone else's
JavaScript code:
- Use the script tag to tell the browser you are using JavaScript.
- Write or download some JavaScript
- Test the script!
There are so many different things that can go wrong with a script, be it human error, browser compatibility issues, or operating system differences. So, when using
JavaScript, be sure that you test your script out on a wide variety of systems and most importantly, on different web browsers.
Your First JavaScript Script
To follow
the classic examples of many
programming tutorials, let's use
JavaScript to
print out "Hello World" to the browser. I know this isn't very interesting, but it will be a good way to explain all the overhead required to do something in
JavaScript.
HTML & JavaScript Code:
<html>
<body>
<script type="text/JavaScript">
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>Display:
Hello World!
Our first step was to tell the browser we were using a script with the <script> tag. Next we set the type of script equal to "text/
JavaScript". You may notice that doing this is similar to the way you specify
CSS, which is "text/
css".
Next, we added an optional
HTML comment that surrounds our
JavaScript code. If a browser does not support
JavaScript, it will not display our code in plain text to the user! The comment was ended with a "//-->" because "//" signifies a comment in
JavaScript. We add that to prevent a browser from reading the end of the
HTML comment in as a piece of
JavaScript code.
JavaScript document.write
The final step of our script was to use a function called
document.write, which writes a string into our
HTML document.
document.write can be used to write text,
HTML, or a little of both. We passed
the famous string of text to the function to spell out "Hello World!" which it printed to the screen.
Do not worry if you don't completely understand how
document.write works, as we will be discussing functions in a later lesson.
Syntax
Looking at our
JavaScript code above, notice that there is no semicolon at the end of the statement "document.write(Hello World!)". Why?
JavaScript does not require that you use semicolons to signify the end of each statement.
If you are an experienced programmer and prefer to use semicolons, feel free to do so.
JavaScript will not malfunction from ending semicolons. The
only time it is necessary to use a semicolon is when you choose to smash two statements onto one line(i.e. two
document.write statements on one line).
Variables
Do You Remember Algebra From School?
Do you remember algebra from school? x=5, y=6, z=x+y
Do you remember that a letter (like x) could be used to hold a value (like 5), and that you could use the
information above to
calculate the value of z to be 11?
These letters are called
variables, and variables can be used to hold values (x=5) or expressions (z=x+y).
JavaScript Variables
As with algebra,
JavaScript variables are used to hold values or expressions.
A variable can have a short name, like x, or a more descriptive name, like carname.
Rules for
JavaScript variable names:
- Variable names are case sensitive (y and Y are two different variables)
- Variable names must begin with a letter or the underscore character
Note: Because
JavaScript is case-sensitive, variable names are case-sensitive.
Example
A variable's value can change during the execution of a script. You can refer to a variable by its name to display or change its value.
This example will show you how
Declaring (Creating) JavaScript Variables
Creating variables in
JavaScript is most often referred to as "declaring" variables.
You can declare
JavaScript variables with the
var statement:
After the declaration shown above, the variables are empty (they have no values yet).
However, you can also assign values to the variables when you declare them:
var x=5;
var carname="Volvo"; |
After the execution of the statements above, the variable
x will hold the value
5, and
carname will hold the value
Volvo.
Note: When you assign a text value to a variable, use quotes around the value.
Assigning Values to Undeclared JavaScript Variables
If you assign values to variables that have not yet been declared, the variables will automatically be declared.
These statements:
have the same effect as:
var x=5;
var carname="Volvo"; |
Redeclaring JavaScript Variables
If you redeclare a
JavaScript variable, it will not lose its original value.
After the execution of the statements above, the variable x will still have the value of 5. The value of x is not reset (or cleared) when you redeclare it.
JavaScript Arithmetic
As with algebra, you can do arithmetic operations with
JavaScript variables:
0
comments
What You Should Already Know
