Ok, welcome to the last lesson in the tutorial. Here we'll talk about arrays - in case you've done python before - arrays are essentially lists and dictionaries packed into one package.
First we'll show how to use arrays as list.
blah = new Array() blah[1] = "a" blah[2] = "b"
That's pretty much it - the first item in the list is "a", the second is "b". Now - one big advantage of list is that they can shorten long variable names, which is helpful when you have to repeat variables.
<script type="text/javascript">
function opt4(){
blah = new Array()
blah[1] = document.getElementById('optionform').na.value
blah[2] = document.getElementById('optionform').age.value
document.getElementById('optionform').final1.value=blah[1]+" is "+blah[2]+" years old"
blah[3] = eval(blah[2]*365)
document.getElementById('optionform').final2.value=blah[1]+" is older than "+blah[3]+" days and younger than " +eval(blah[3]+365)+" days old"
blah[4] = eval(blah[2]*12)
document.getElementById('optionform').final3.value=blah[1]+" is about "+blah[4]+" months old"
}
</script>
<form id="optionform" action="text/javascript"> <table> <tr> <td>Name</td><td><input name="na" type="text"/></td> </tr> <tr> <td>Age</td><td><input name="age" type="text"/></td> </tr> <tr> <td colspan="2"><input type="button" onclick="opt4()" value="Submit"/></td> </tr> <tr> <td colspan="2"><input name="final1" type="text"/></td> </tr> <tr> <td colspan="2"><input name="final2" type="text"/></td> </tr> <tr> <td colspan="2"><input name="final3" type="text"/></td> </tr> </table> </form>
Start tag for javascript
Starts function opt1()
This explains that we are naming blah as a new array
This assigns whatever is in the input field named na to the first spot in the list
This assigns whatever is in the input field named age to the second spot in the list
This puts the string "{content of blah[1]} is {content of blah[2]} years old}" in the text field "finall".
This assigns whatever blah[2]*365 is to blah[3].
The rest of it is pretty self explanatory, really it just repeats from there.
Arrays can also be used as dictionaries. For the final code in the tutorial, we will allow you to enter a letter and see which half of the alphabet it is in.
function alphy(){
anything = prompt("letter?");
dictlet = new Array();
var alphabet = "abcdefghijklmnopqrstuvwxyz";
for (y = 0;y <= 12;y++){
dictlet[alphabet.charAt(y)] = "1st half";
}
for (y = 13; y <= 25;y++){
dictlet[alphabet.charAt(y)] = "2nd half";
}
alert(dictlet[anything]);
}
<form id="tada" action="text/javascript"> <div> <input type="button" value="Test It Out" onclick="alphy()"/> </div> </form>
Opens the function definition.
Gets a user input and stores that input as a variable called anything
Starts a new array called dictlet
Creates a variable called alphabet - and in it is a string that contains all the letters of the alphabet
Creates a variable y and sets its value to zero, and says while y is less than twelve, do this (and each time you do this, add one to y)
Ok - here's where it get complicated, first thing you should know is "charAt" is a property of strings. If I had a string "hi", the charAt(0) would be "h" (remember that everything starts at 0 - not 1). So this essentially says (along with the line above) - for the first 13 characters of the string, put them each individually in a dictionary, and make their definition "1st half".
Ends the for loop
Starts another for loop - though this time it creates a variable y (you can re-create variables like that) and sets its value to thirteen, and says while y is less than 25, do this (and each time you do this, add one to y)
Ok this says the same thing as before - except it takes the second half of the string, alphabet, and puts it in the dictionary, and assigns them the definition "2nd half".
Ends the for loop
Remember the user input anything? well this returns the value. Ok, so anything is a letter remember? And we already put all the letters into the dictionary. So now we're calling for the value from that dictionary, and we're saying show it in an alert box
Ends the function
Now Create a Mad Lib that requires two nouns, one color and one verb. If the nouns are called noun1 and noun2, the outcome should be "The color noun1 verb to the noun2".
Congratulations, you have finished Lesson 6;