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:

all commands go here

</script>

EXAMPLE 1

Here is an example of a full HTML document with a simple javascript that displays the words “Hello World” in it:

<html>

<body>

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>

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.

VARIABLES

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:

Declare the variable (Tell the computer you are creating a variable.)
Initialize the variable (Give the variable a value.)
Use the variable.

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>

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:

EXAMPLE 4

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>

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.