Wednesday, April 28, 2010

Starting out with javascript

Well, let's start with Javascript programming!!

In this example we will learn how to declare variables and how to use some simple built-in functions.

For programming in Javascript I'm using xcode too, since it supports syntax highlighting and code completion. You can use any text editor you want and get the same results.


Let's start by creating a new file. Select and empty file and click next.


Now, choose a name for your new file. This file has to have a .html extension.
I name my file example.html.


After this, a new empty window will appear. This is where you will write your html and javascript code.

Write this code on that window:


To declare a variable in javascript we use the word var followed by the variable name. So in " var testVariable1; " we are declaring a variable named "testVariable1".  This, however, is not completely necessary. You could declare a variable just by doing something like " testVariable1 = "Hello World" ". The use of var is recommended, though, because it helps to ensure that your code will be readable.

As you can see, no type is specified for this variable. This is because javascript is a loosely typed language. This means that there is no data type assigned until the variable gets a value.

The " alert(testVariable1); " line is used to display a message box that will display the value that we assigned to testVariable1.

One more thing you should probably know is that the use of a semicolon after every line is not necessary. I recommend that you use it since it gives some style to your code ;)

Now to test this you just need to save your file and double-click it's icon.

A web browser window will open and a message box will be displayed.

Good job! This means your application worked correctly.

Now we will add some different values to testVariable1 and see how the data type changes.
Go back to the code and write this:



The first thing you should notice is that instead of using the alert function that we used in the beginning of this example we are now using the document.write function. The document.write function writes directly to the page instead of opening a message box.

Now, let's take a look at the full document.write statement.

document.write(testVariable1 + " " + typeof(testVariable1)+" <br/>");

The first part after the document.write function is used to display the value of testVariable1.

After that we have ' + " " + '. This is used to write a blank space after the value of testVariable1.

Next, we call the typeof function. This function is used to return the data type of a variable.

To end the statement we have ' +" <br/> " '. This is an html tag and it is used to insert a new line.


All the " testVariable1 = " statements are used to change the value and data type of the testVariable1 variable.

Save your file and open it up in a browser window. The result should look something like this:

As you can see, since we hadn't assigned any value to testVariable1 the first time we wrote it to the page,  it's value appears as undefined. In javascript the data type for an undefined value is also undefined, so the typeof function also printed undefined.

The value "Hello World" was assigned the second time we printed the variable, so the data type changed to string.

The third time the numerical value 32 was assigned, so the data type changed to number.

The fourth time we assigned true to the variable, this time the data type changed to boolean.

The last time we assigned null and the data type changed to object.

It's important to notice that if we use quotation marks when assigning a value to a variable, the data type will always be string.


No comments:

Post a Comment