Advanced webcoding: Javascript – Part 2: Variables


As promised to aaaaaaallllll my wonderful readers our there. A few practical examples on how to implement javascript.
I already explain in my previous post that you can put your javascript in either the HEAD or the BODY tag. Personally I prefer to put in on top of the HTML page in the HEAD tag.

The syntax to start a javascript is rather similar to starting to write CSS. Let me show you.
As usual I made a basic HTML script which looks as such:

Now the code to initialize a javascript is:

<script type=”text/JavaScript”>

Again the SCRIPT tag followed by the type of code you will be typing.
Within this tag you can start writing javascript code.

Let me start my initializing a variable. For those of you who are not familiar with variables, this means I will create an object with…a…variable…value… well… I guess you could have figured that one out yourself.
I will create the variable X:

Each statement should be ended with ; (there are some exceptions). Now I initialized the variable X with the value This is a tutorial.
If you run this script, nothing will physically happen. Since you don’t do anything with the variable. So let’s print the value of the variable to the screen…

The result of this code looks like this:

Huh?! It doesn’t work? Why not? The answer to that is very simple… Look at the initialization of my variable… The name of the variable is X … However the variable I want to print is x… And since javascript is case-sensitive, this code will raise an exception. Saying that this particular variable doesn’t exist. Change the lower-case x to capital X and run the code again.

It’s needless to say that you should be very consistent when you start writing javascript. The slightest typo can screw your entire script.

What you will normally do in javascript is write functions which you can use later on in your HTML page. A function is a set of commands which need to be executed when you call on this function.
Let’s pick it up a notch… Let’s write a script which will print the value of a variable in an alert box. The value of the variable should be set from an HTML form.

Sounds hard? Well, it’s quite okay. This is the code I came up with:

That isn’t so hard now is it? Let me quickly explain. The javascript itself looks as followed:

<SCRIPT TYPE=”TEXT/JAVASCRIPT”>
function getValue(form)
{
var name = form.inputbox.value;
alert(“Welcome “+name);
}
</SCRIPT>

So I created a function with the name getValue and this function requires a parameter. In this case it expects a form as parameter.
Next I initialize the variable name and I assign the value form.inputbox.value. You’ll notice this name inputbox in my form as well. Because this is the value I want to pass from my HTML form.
The piece of HTML code which passes this value is:
<INPUT TYPE=”text” NAME=”inputbox“>
This just creates an inputbox with the name… inputbox… o_O

Alright.. If we now look at the form itself:

<FORM name=”TestForm”>
<INPUT TYPE=”text” NAME=”inputbox“>
<INPUT TYPE=”button” NAME=”button” Value=”Push the Button!” onClick=”getValue(this.form)”>
</FORM>

This form has 2 objects, an inputbox and a button. The inputbox, as explained earlier, has the name inputbox (and this name will be used in the javascript).
The button has the name button and shows the value “Push the Button!”. One of the options is onClick… This defines what should happen once the button is clicked. In this case it should trigger the function getValue with the parameter THIS.FORM (which virtually just means: use this form).

The result of the page will look like this:

If I fill out my name and push the button. This happens:

See.. it was not all that hard :’)..

Please drop me a comment if something is not clear or if you have a question (or multiple questions :’)).

Advertisements

3 thoughts on “Advanced webcoding: Javascript – Part 2: Variables

  1. Pingback: Advanced webcoding: Javascript – Part 1 « Tech-o-rama

  2. Pingback: Advanced webcoding: Javascript – Part 3: Alerts « Tech-o-rama

  3. Pingback: Advanced webcoding: Javascript – Part 2: Variables | All kinds of ….solutions

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: