Javascript/HTML #2

This is a continuation of my initial tutorial on an introduction to javascript. If you need to read that still, please refer to this link: Javascript Tutorial Part 1

In this lesson, we are going to learn about prompts, variables and if/then statements. Prompts are basically popups with the option to write text in them. If/then statements are basically saying this: If X(condition) is true, then X(action or result) occurs. Variables are conditions that both run off of.

Start off with the basics as learned in the first tutorial:

Code:

<HTML> <title>Javascript Tutorial Part II</title> <head></head> <script language="Javascript">

Side Note: In the first tutorial, we did a scrolling marquee head, but it wasn't necassary to have a head at all in this, so I just started and ended it.

Let's combine last tutorials with this one. We are going to use a variable in a prompt. Variables are started off like so:

Code:

var [nameofvarialbe] =

The name of the variable cannot have spaces, so if you need to have spaces, just use this symbol: _. If you notice in that example, there is a space between the end of the variable, and the equal sign, THIS IS REQUIRED.
Now, let's actually make a variable. I will be using a combination of both alerts, and prompts. To tell it what to do, we have to tell it that it is doing a prompt function. This is done like this:

Code:

var name = prompt(

Now, in quotations, tell it what you want it to say, just like in alerts. There is a difference though, that I will explain after this example:

Code:

var name = prompt("What is your name?" , "");

You are all probably wondering what the comma and the extra sets of quotes do right? Well, the prompt will show a question, and a spot to show the answer. The comma separates the two, and the second quotes are what the answer box will display until clicked, and it dissapears so you can write in there. So, if you were to type this:

Code:

var name = prompt("What is your name? Is it Fred?" , "Type yes or no.");

Then after the prompt asks the question, it will have in highlighted text: Type yes or no. Once clicked, however, this will vanish so you can write in it. Now, we are goining to combine in an alert that is dependant on the name prompt.

Type out an alert command like so:

Code:

alert("Your name is " + name + "? That's odd.");

The + name + part is telling the program to insert the result of the variable, which we have named: name. Notice the spaces AFTER the "Your name is ", this is because otherwise, the program would clump it togehter, and when it displayed the alert, you would have gotten:
Your name isChaosDealer73? That's odd.

Now end the script with the

Code:

</script>

and test it out.
Full code:

Code:

<HTML> <title>Javascript Tutorial Part II</title> <head></head> <script language="Javascript"> var name = prompt("What is your name?" , ""); alert("Your name is " + name + "? That's odd."); </script>

Side Note: If EVER using a prompt, if you press 'Cancel' your variable will always be replaced with null. So it would display:
Your name is null? That's odd.

Now for the If/Then statements. You are going to have to pay attention to this.

Start out with a clean template:

Code:

<HTML> <title>Javascript Tutorial Part II, Learning If/Then statements</title> <head></head> <script language="Javascript">

Now, we are going to make a variable. For this example, it is going to be the variable: globex_love.

Code:

var globex_love = prompt("Do you love Globex Designs?" , "Type yes or no.");

In this, we are going to be using the display line of the prompt box, that is why the "Type yes or no." is included. Now, let's tell the program what it needs to do....

Code:

var globex_love = prompt("Do you love Globex Designs?" , "Type yes or no."); if(globex_love=="yes") { alert("That's great, me too!"); }

The if part, is starting the if/then variables. The { and } signify the start and end of the then part. Notice in the parentheses:
(globex_love=="yes")
The variable name is included first, and the two equal signs is saying: "If this variable is..." and in quotations, is the answer it is looking for, the yes. In between the { and the } is saying that if the above variable is equal to the answer it is looking for, do this. In this case, we are using an alert, so if you say you love Globex Designs, then you get an alert that says: That's great, me too. Let's add some more stuff to it.

Code:

var globex_love = prompt("Do you love Globex Designs?" , "Type yes or no."); if(globex_love=="yes") { alert("That's great, me too!"); } else { alert("You think what about Globex Designs?"); }

The else statement is saying that if there is any otherthing put into that box besides the yes, then it will display that message. Now, we are going to add an else if statement. This allows for more than one answer to be put in with multiple results. Here is an example:

Code:

var globex_love = prompt("Do you love Globex Designs?" , "Type yes or no."); if(globex_love=="yes") { alert("That's great, me too!"); } else { alert("You think what about Globex Designs?"); } else if(globex_love=="no") { alert("How could you not love it? It is soo cool!"); }

This is saying that if someone types in "no" that they will recieve a popup asking why they don't like it. End the script now with the:

Code:

</script>

Side Note: Not all if/then and else statemens must be alerts, if you wanted it to say other things, like another prompt depending on the answer, just put that in intstead, as said in the first tutorial, alerts are the easiest things in javasript.
This is the full code used in this section of this tutorial:

Code:

<HTML> <title>Javascript Tutorial Part II, Learning If/Then statements</title> <head></head> <script language="Javascript"> var globex_love = prompt("Do you love Globex Designs?" , "Type yes or no."); if(globex_love=="yes") { alert("That's great, me too!"); } else { alert("You think what about Globex Designs?"); } else if(globex_love=="no") { alert("How could you not love it? It is soo cool!"); } </script>