Introduction to Javascript
You address javascript with the <script> tag.
//this is a comment
This is a comment. Comments are used to help guide someone through a script or code. The above is a one line comment. For comments that are more than one line use this /*Multiple line comment*/.
Variables - Variables are used to store data. This is very useful in javascript.
var myVariable = 5;
Let's take a look at this. var declares the variable. myVariable is the name of the newly declared variable. Next you will notice the = sign. This states that myVariable equals some value. Here, 5 is the value of my variable. The names of your variables can be anything (hello, myVariable, abc123, derfleurer, etc.). The same is true for their values. Another important thing to note is that variables are case sensitive.
var myVariable2 = "hello";
This is called a string. Keep in mind, the value of our previous variable (5) had no quotations around it. The difference is that the value of myVariable is identified as a number. If we had put quotations around it, it wouldn't have been identified by the browser as a number. To make it simple, strings are like sentences. How they're written is how they're displayed. Another thing about strings, never put a code such as prompt("",""); inside one. They cannot have quotations. If they did, then the value would be the code itself. If you wish to use a prompt, alert, etc. code as a value for a variable, DO NOT use quotations. Do as we did for myVariable.
You write variables just like text in JS. With one exception.
document.write("hello");
Here we see a basic code telling the browser to write hello in the page document. Now, as I said before, variables are used to store data. The exception to writing variables is that they will not have quotations around them. As you see below.
document.write(myVariable);
This will write the "value" of my variable onto the page. Get it? Now, onto alerts.
alert("hello");
This says to open an alert box when the page loads. In this case, the alert says hello. You can use variables here as well...heck, you'll use 'em almost everywhere (like I said, they're very useful). Next we'll take a look at prompts.
prompt("what's your name?","mike");
This calls a prompt. A prompt will have 2 parts. A question or request and an input value. The first set of quotations is the request. The second is the input value (either can be left blank). This particular one calls a prompt to the page that's asks you what your name is. The pre-set value is mike.
Arrays
Arrays are another very useful bit of javascript. They can be used to hold multiple values.
var myArray=newArray("my","what","a","lovely","day");
Ok, this declares a variable named myArray. The important part is newArray(). This states to create an array. Inside the parenthesis you will put your values.
How to write arrays
document.write(myArray[0]);
Ok, so you've declared your array...but how do you write it? Look at the above. We will be using the same variable as we did in our previous example. This states to write the the first value of our array. Javascript counts off from 0. So our first value will be #0. myArray[0] will write myArray's first value...which is my.
Now that you have all that down, let's cover if-then statements.
Javascript if-then statements
var question=prompt('2+2=','4');
var answer='4';
if (question==answer){
alert("Correct!");
}
Alright, let's take a look at this. First off we declared some variables (question and answer). Then we created our if-then statement. if(question==answer){}. This statement says that if the value of question equals (==) the value of answer, execute the javascript in the curly brackets {}. What is the value of question? Well, it's not the prompt. If that were the case the value would be in quotations. The value of question is what the user inputs in the second set of quotations '4'. There are many ways to write if-then statements. You don't need to use strings or even variables. Look below, this is going to have the same outcome as our above statement.
var question=prompt('2+2=','4');
if(question == "4"){
alert("Correct!");
}
The next won't be the same. You won't get the users input but the outcome will return true (like it would in the above codes if the user gave the correct answer).
if(2+2==4){
alert("Correct!");
}
Now that you know how if-then statements work, it's time to write an if-then else.
var question=prompt("What's the password?","yokijo");
var answer="yokijo";
if(question==answer){
alert('That's right!');
}else{
alert('Better luck next time');
}
The above says that if the value of question equals the value of answer, execute the javascript in the {} brackets that follow. The new part here is else. In this case it says that if question does not equal answer, execute the javascript in the {} brackets that follow. So, if you gave the input yokijo you would recieve a message saying That's Right! and if you didn't you would recieve a message saying Better luck next time.
The Beauty of for loops
for loops are used to count through things in javascript. Study the example below and we'll get started.
for(var i=0; i<5; i++){
document.write(i);
}
Above you will see our for loop for(){}. Inside we have declared a variable. I don't know why it must be declared inside the loop...I don't think there's as reason...it just does. The value of our variable is 0. The next two parts say that if the value of i is less than 5, increase i by one. We then wrote the variable in the brackets signaling to execute it only if the statement in the for loop is true.
I'm sure your wondering, "well is there a way to loop arrays?"
var myArray=newArray('1','2','3');
for(var n=0; n<myArray.length; n++){
document.write(myArray[n]);
}
Yes. As you see above, the array is being looped. What's new here is .length and myArray[n]. The .length is attached to the array myArray.length. It is now addressed as thelength/number of values in the array. So, the above is just saying n=0, n is less than the length of values in myArray, increase n by 1. myArray[n] simply addresses the array looped with n.
Lesson Summary
So, we've covered the basics of
* how to declare javascript
* how to write comments
* how to write variables
* how to write strings
* how to write prompts & alerts
* how to write arrays
* how to write if-then statements
* how to write for loops
There is much more. But you may have to wait for my next tut.
Homework
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!.
Your on your way. The next few examples are for you to play around with and break down. If there's something you don't understand, look back in the tutorial. If your still lost, p.m. me for support.
This first one is a bit tricky. I haven't gone over some of what you will see within it. So as I said above, you'll have to expirament. I will go into detail in the next tutorial.
<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[]);
}else{
document.write(myArray[]);
}
</script>