Lesson Plans
Lesson 1 - declaring javascript, writing text, writing comments
Lesson 2 - using variables
Lesson 3 - using alerts and prompts
Lesson 4 - combining
Lesson 5 - Review
Lesson 6 - Arrays
Lesson 7 - if-then statements
Lesson 8 - if-then else
Lesson 9 - for looping
Lesson 10 - Homework



* Lesson 1

How do I address javascript?
* You use the <script></script> tags. Inside them you will put the js to be executed. The correct way to write it is <script type="text/javascript"> but js is the default scripting language for all browsers so <script> works fine.

How do I write text?[/color][/i]
* You would first write your tags. Then you would write
document.write("hello"); Example below.

<script>
document.write("hello");
</script>

So, what the heck is this saying? document tells the browser to look at the document of the window and write says to write the text in the parenthesis. Together they say, look at the document and write hello into it. ; says to end it. It stops the code there so it doesn't combine with the ones that follow. You will see why hello(our text) needed quotations later.

Writing comments

<script>
document.write("how ya doin?"); //text you want displayed
</script>

Something new. //text. This is a comment. It doesn't show up in the code, it is used to to guide people through your script so they know what each part means. If your comment is going to be more than 1 line long then use this instead
/*My Comment*/

So far we've covered how to address javascript, how to use it to write text, and how to create comments. These a necessities. Next we will go over variables.



* Lesson 2

What are variables?

Variables are used to store data in javascript.

<script>
var myVariable="hello";
</script>

What's that mean? var declares a variable. myVariable is the newly declared variable's name. The = sign says that myVariable equals some value. Here, the value of myVariable is hello. The names and values of your variables can be anything. Keep in mind that variable names are case-sensitive and cannot contain spaces. Now we'll get into why it must have quotations.

<script>
var myVariable2=15;
</script>

Notice something different? There are no quotations around our value. Anything in quotations is called a string. Strings are like sentences and they are displayed as they are written.

<script>
var myVariable="Have you read \"A Tale of Two Cities\"?";
</script>

Sometimes you will use the same quotations inside one another. To prevent an error place a back slash before each quotation that you want to have written. Another important note is that you may use either single (') or double(") quotes in javascript as they are inter-changeable. Example:

<script>
var myVariable='hello';
</script>

How do I write variables?

<script>
var myVariable="hello";
document.write(myVariable);
</script>

Ok...so why isn't myVariable in quotations? Like I said, anything in quotations is a string and strings are displayed as they are written. So, if it were in quotations, it would have written the words myVariable instead of the value of myVariable.

So now we know how to write variables. What's next?



* Lesson 3

<script>
alert("hello");
</script>

What's this do? It creates an alert box that says hello. This is just like our document.write(); You can use variables here as well.

<script>
prompt("What's your name?","derfleurer");
</script>

This creates a prompt. Prompts have 2 parts. There's a request and an input. The first set of quotations is the request and the second is the input. Either can be left blank. Variables can be used here too...they can be used almost anywhere.

<script>
var myPrompt=prompt("What's your name?","Kate");
</script>

If you're using alerts/prompts/etc. in your variables don't put quotations around them. They would be identified as a string and the alert or prompt would not be executed but instead be written.



* Lesson 4

<script>
var myVariable="my name is ";
document.write(myVariable + "joe");
</script>

As you know, variables won't have quotations and strings will. So how would you combine them? Look at the above script. It declares a variable with the value my name is . Below it we write the variable and use + to combine the variable with a string. So, the above will do the same thing as saying:

<script>
document.write("my name is joe");
</script>

Cool, eh? But how can this be useful? Here's an example:

<script>
var myPrompt=prompt("what's your name?","");
document.write("Hello" + myPrompt + ", welcome to Zanmato");
</script>

This declares a variable with a prompt value. We then write Hello plus whatever the user's input in the prompt is plus , welcome to Zanmato. So, if you put your name as Mike in the prompt, you would recieve a message saying Hello Mike, welcome to Zanmato.



* Lesson 5

For this lesson, we'll be reviewing what you've learned thus far.

<script>
var myPrompt=prompt("What's your name?","");
alert("Hello " + myPrompt);
</script>

This should be pretty obvious to you. We have created a variable with a prompt value. The prompt's request is What's your name?. We then created an alert combing Hello with the users input in the prompt. So, if you said your name was Jackie, you would have recieved an alert saying Hello Jackie.



* Lesson 6

What's an Array?

An array is very similar to a variable. It is used to store multiple values.

<script>
var myArray=new Array("value1","value2","value3");
</script>

So, what's this saying? We have created a variable with multiple values thanks to an array. This makes things alot easier when scripting. new Array(); addresses the array. Inside the parenthesis is where we hold the array's values. So, instead of making 3 different variables with 3 different values, we now have only one variable which carries all 3 values.

How do I write the Array?

<script>
var myArray=new Array("value1","value2","value3");
document.write(myArray);
</script>

Since our array is myArray's value, we simply write it like we would any other variable. So, the above would say value1value2value3.

Wait...so how do I write each value separately?

<script>
var myArray=new Array("value1","value2","value3");
document.write(myArray[0]);
</script>

This is the same as our previous example except for [0]. What's this saying? It says to write the first value of myArray which would be value1. Javascript starts counting at zero so value1 would be [0], value2 would be [1], and value3 would be [2].

Another way to create arrays is:

<script>
var myArray=new Array();
myArray[0]="value1";
myArray[1]="value2";
</script>

Don't go any further unless you completely understand Lessons 1 through 6.



* Lesson 7

<script>
var myPrompt=prompt("What's 9x9?","");
if (myPrompt=="81"){
alert("Correct!")}
</script>

Confused? Don't worry, I'll be breaking this down and explaining every bit of the script.

What's new? Almost everything! First i'll explain what this does. This creates a prompt asking what 9 times 9 equals. If you say 81, you will get an alert saying Correct!.

The major focus here is if(){}. That is the soul of our script. It says that if some statement is true, execute the javascript in these brakets {}. Look at the below. We will now begin to break down the script.

<script>
if (some statement is true)
{
do something
}
</script>

Inside the parenthesis () you will put your statement. In our previous example we said if (myPrompt=="81"). This states that if the users input in the prompt equals 81, execute whats in the brackers {}. {}, whatever is in these brackets will be executed if the statement in the parenthesis is true. In our previous example we said alert("Correct!");. So, altogether we said, if the users input in the prompt is 81, execute the alert Correct!. Still a little confused? Let's do some more examples.

<script>
if (5<10)
{
alert("Hello")
}
</script>

Ok, what's our statement say? It says that if 5 is less than 10, execute what's in the brackets {}. Now, if the stement above is true, what will be executed? If our statement 5 is less than 10 is true, we will recieve an alert saying Hello. Ok, a couple more examples and we're ready for the next lesson.

<script>
if (5>10)
{
alert("Hello");
}
</script>

This says that if 5 is more than 10, execute the alert Hello. Well...is 5 more than 10? No, it's not. And since the statement is false, we will not recieve the Hello alert.

<script>
var myPrompt=prompt("What's the password?","");
if (myPrompt=="yokijo")
{
alert("Correct!");
}
</script>

This says that if the users input in the prompt equals yokijo, execute the alert Correct!. Ok...why is yokijo in quotations? It's in quotations because it's a string. If it didn't have quotations, it would have been identified as an undefined variable. So, why didn't the other examples have quotations? if (5>10) let's look at this one. It doesn't have quotations because it involves numbers. If they had quotations, they would be identified as strings and wouldn't have the same properties as numbers.



* Lesson 8

Ok, make sure you understand Lesson 7 before you go into Lesson 8.

<script>
var myPrompt=prompt("What's the password?","");
if (myPrompt=="yokijo")
{
alert("Correct!");
}
else
{
alert("Wrong!");
}
</script>

What's this say? This says that if the user's input in the prompt is yokijo, execute the alert Correct! and if their input is not yokijo, execute the alert Wrong!.

Else? Else says that is the statement is not true execute what's in the brackets {} that follow. Here's what I mean:

<script>
if (some statement is true)
{
do something
}
else
{
do something
}
</script>

Again, else executes what's in the brackets {} if the statement is false.

Remember this?

<script>
if (5>10)
{
alert("Hello");
}
</script>

Let's add else to it.

<script>
if (5>10)
{
alert("Hello1");
}
else
{
alert("Hello2");
}
</script>

So, since five is not more than ten, the statement is false, so the js following else will be executed instead. This means you'll get the alert Hello2.



* Lesson 9

for loops are used to count through things in javascript.

<script>
for (var i=0; i<5; i++)
{
document.write(i);
}
</script>

What's new? This is our for loop for(){}. What goes inside the parenthesis? Just look below:

<script>
for (variable; statement; increment)
{
do something
}
</script>

The first part of the for loop is your variable. In our previous example we declared the variable i and gave it the value 0. The second part is your statement. In the previous example we said i<5. This asks the browser if the value of i is less than 5. If it is, the increment comes into play. It says to increase i by 1 each time. Together they say, Declare the variable i and give it the value 0, if i is less than 5, increase i by one each time it's less than 5.

<script>
for(var i=0; i<10; i++)
{
document.write(i);
}
</script>

This will write 0123456789.

Is there a way to loop arrays?

Yes.

<script>
var myArray=newArray("value1","value2","value3");
for (var i=0; i<myArray.length; i++)
{
document.write(myArray[i]);
}
</script>

What's new here is .length and myArray[i]. By adding .length to myArray we have now created myArray.length which is now addressed by the browser as the number of values in the array. So, for our above example myArray.length holds the value 3. myArray[i] says to loop myArray with i.



* Lesson 10

Congratulations. You've completed the tutorial, you're on your way. I'd like you to try and write some of your own scripts and expirament a bit. Here are some examples for you. I'll break down the first one. Try and explain the others and if you think you got it p.m. me and i'll check it over.

<script>
var myPass=prompt("What's the password?","");
var theAnswer="yokijo";
if(myPass==theAnswer){
alert("Correct!");}
else{
alert("Wrong!")}
</script>

Pretty obvious, right? First we declared some variables. myPass had a prompt value. theAnswer contains the value needed to make the if-then statement true. Neither of these variables do anything or have any meaning without if(){}. The if-then statement says that if the users input in myPass equals the value of theAnswer, execute the alert Correct! and if it doesn't, execute the alert Wrong!.

If there's something you don't understand, look back in the tutorial. If your still lost, p.m. me for support.

<script>
var myPrompt=prompt("What's your name?","");
document.write("Hello " + myPrompt);
</script>

<script>
for(i=0;i<=9;i++){
document.write(i);}
</script>

<script>
var myPrompt=prompt("9x9=","81");
var myArray=new Array("That's right!","I'm disappointed in you.");
if(myPrompt=="81"){
document.write(myArray[0]);}
else{
document.write(myArray[1]);}
</script>