LESSON 01 – INTRO TO
JAVASCRIPT
PROGRAMMING LANGUAGES
Programming languages are
used to create software. In fact, all
software including games, applications and operating systems are developed
using a programming language. The most
popular programming languages are C, C++, Java and Visual Basic.
Javascript is a programming
language that is used specifically with web pages. It is considered by most to be the best language to use on
websites. Other languages include VBScript,
ASP and PHP.
PROGRAMS OR SCRIPTS
Programs, usually called
scripts when it comes to Javascript, are a list of commands that the computer
(or browser in this case) executes. Of
course, to write a program, you must know the syntax of the language – that is
to say that you must know the different commands and how to use them.
Here is an example of a
program using English wording:
Let x = 5.
Let y = 10.
Let z = x + y.
Display z on the screen.
One would expect this
program to show 15 on the screen.
NOTEPAD++
(WORTH THE TIME IT TAKES TO INSTALL)
No special software is
needed. You can code it using Notepad
and your browser already understands how to work with javascript. So, you’re already ready to go.
However, there are programs
out there that can make your life a little easier. Mr. Campeau suggests that students use Notepad++ to colour-code
parts of your programs. This will make
it easier to spot small errors.
WHERE TO
PROGRAM
Javascripts can be placed
directly inside the HTML document. They
can also be placed in an external javascript file.
For now, we will focus on
programming directly inside HTML documents.
When programming inside
documents, the scripts can be placed in the <head> section or the
<body> section. We will see the
difference a little later.
OUR FIRST
SCRIPT
For now, we will place our
script inside the body section. All
scripts must appear inside the <script> tags. The opening script tag must also have an attribute. Here is an example:
<script
type="text/javascript">
all commands go here
</script>
Here is an example of a full
HTML document with a simple javascript that displays the words “Hello World” in
it:
<html>
<body>
<script
type="text/javascript">
document.write("Hello
World!");
</script>
</body>
</html>
Click here to see what it looks like.
EXAMPLE 2
The code below now has two
statements. One statement actually
contains HTML tags in it.
<html>
<body>
<script
type="text/javascript">
document.write("This
is normal text.");
document.write("<h1>This
is a header.</h1>");
</script>
</body>
</html>
Click here to see what it looks like.
OUR FIRST
COMMAND
The first command we are
using is
document.write("message");
You probably already suspect
that any text that appears between the quotes will appear inside the HTML
document. This includes html tags.
COMPUTERS ARE
FUSSY
It is important that you
write your commands/statements exactly as they appear in the examples. You need the brackets, you need the quotes,
you need the semi-colon. In fact, you
also need to make sure that you keep the same capitalization.
It is often necessary to
store data in order to do calculations.
To do this, we use what are called variables. We can give a variable any name that starts with a letter. However, you should choose a name that makes
sense!
There are three steps to
using variables:
Here is an example of this:
var x; //Declaring
a variable called x.
x = 4; //Give
x the value 4.
document.write(x); //Displaying
the value of x on the screen.
EXAMPLE 3
In this example, we declare
and initialize a variable called num at the same time. Then we output it to screen. Notice there are no quotes around the
variable name when we output it.
<html>
<body>
<script
type="text/javascript">
var
num = 24;
document.write(num);
</script>
</body>
</html>
Click here to see this page.
ARITHMETIC
We can do basic arithmetic
with variables as well. See the example
below:
In this script, we declare
and initialize two variables x and y.
We then declare other variables and add, subtract, multiply and divide x
and y to get new values. Note that we
insert <br> so that the answers appear on different lines.
<html>
<body>
<script
type="text/javascript">
var
x = 3;
var
y = 4;
var
sum = x + y;
var
sub = x - y;
var
prod = x * y; //notice
that we use the asterisks for multiplication
var
divi = x / y;
document.write(sum);
document.write("<br>");
document.write(sub);
document.write("<br>");
document.write(prod);
document.write("<br>");
document.write(divi);
</script>
</body>
</html>
WEIRD
ARITHMETIC
Many people that are new to
programming have difficulties with a statement like this:
x = x + 1;
The statement simply means
that the value of x will go up by one.
It is important to realize that the computer does the mathematical
expression on the right of the equal and then stores that answer in the
variable that is on the left.