Dom

Every web page is a document object.

Tags/elements are referred to as nodes, they all have an ID name. A block of text can also be considered a node.

Date Objects

Do you ever shut up!

<script>
       function saySomething() {
document.write("Blah ");
       }
       setInterval("saySomething()",              500);//1000 mm = 1 sec


        function printTime() {
var now = new Date();// Date is a pre-built object
//This gets the current date/time and stores it in the now variable
var month = now.getMonth();//method to get hour from date object
var day = now.getDate();
var year = now.getFullYear();

var hour = now.getHours();//method to get hour from date object
var minute = now.getMinutes();
var sec = now.getSeconds();
document.write(month + "/" + day + "/" + year + "--" + hour + ":" + minute + ":" + sec + "<br>");
}

setInterval("printTime()", 1000);
</script>

Math

Some Properties of the Math Object

<script>
document.write("Euler's constant - " + Math.E + "<br>Mmmm Pi - " + Math.PI + "<br>"); 
</script>

"Hey there you little sqrt."

<script>
var n = prompt("Enter a Number", "");
var answer = Math.sqrt(n);
alert("The square root of " + n + " is " + answer);
</script>

Dynamic Loop Condition

<script>
var favoriteAnimals = new Array("Brown Chicken", "Brown cow", "Green Tortoise", "White Rabbit", "Pink Panther");
favoriteAnimals.sort();

for (i = 0; i < favoriteAnimals.length; i ++) {
document.write(favoriteAnimals[i] + "<br>");
}

</script>

Now if the number of the items in the favoriteAnimals Array changes  so will the conditional of the forloop.

User Defined Variables

♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦

You have such 

a beautiful 

Movie Star Name

<script>
var middleName = prompt("Movie Star Name:", "What is your middle name");
var streetName = prompt("Movie Star Name:", "What street do you live on");
//you probably want a vacant text-field, in which case you can use an empty set of quotes
document.write("Your movie star name is " + middleName + " " + streetName + "!");
</script>
♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦♦

Use the Array index as the counter to let 

the user add items to the Array

<script>
var userDefinedArray = new Array(10);
for (i = 1; i <= 10; i++) {
userDefinedArray[i] = prompt("What is your number " + i + " favorite animal", "");
}
document.write("Your ten most favorite animals are" + userDefinedArray.join(", "));
</script>

Array Methods

Concatenate Arrays

                                                                             
<script>
var design = new Array("Typograhpy", "Photoshop", "Illustator");
var development = new Array("HTML5", "CSS3", "PHP", "MySQL", "JavaScript");
var programming = new Array(".NET", "MS SQL", "Java");

var courses = design.concat(development, programming);


document.write(courses[10]);

</script>

Join and Pop

<script>
var design = new Array("Typograhpy",           "Photoshop", "Illustator");
var development = new Array("HTML5", "CSS3", "PHP", "MySQL", "JavaScript");
var programming = new Array(".NET", "MS SQL", "Java", "undefined");
        //3 arrays
programming.pop();//This will remove the last index from the 3rd Array 
document.write(programming[4] + "<br>");//I am undefined
//Now add both the 2nd and 3rd Arrays to the 1st Array and store in a new Array
var courses = design.concat(development, programming);

//////////////////////////////////////////////////////////////////////////////////////////////////////
var join1 = courses.join(", ");//join, and add comma - space between indices
document.write(join1 + "<br>");
        //////////////////////////////////////////////////////////////////////////////////////////////////////

</script>

Instead of writing these last two lines, you can simply write:
         //////////////////////////////////////////////////////////
         document.write(courses.join(", "));
         //////////////////////////////////////////////////////////

This next method should be called shove, because it shoves new elements into your Array:
        courses.push("Flash", "jQuery");

List alphabetically:
     courses.sort();

Reverse it first, then join echo:
        courses.reverse();

document.write(courses.join(", "));

Arrays

<script>

var beatles = new Array("johny", "george", "ringo", "paul", "paul2");

document.write(beatles[3] + " is dead");//access the array index

</script>

##############################################################

<script>

var beatles = new Array(3);

beatles[0] = "john";

beatles[1] = "george";

beatles[2] = "ringo";

beatles[3] = "paul";

beatles[4] = "paul2";

document.write(beatles[3] + " is dead");

</script>

//You can't always enter all your information into your array as soon as you create it, and you might not know how many items the array will include,

<script>

var myClasses = new Array();

 myClasses[0] = "Web 110: A+";

myClasses[1] = "Web 120: A+";

myClasses[2] = "ITC 280: A+";

myClasses[3] = "Web 150: A+";

myClasses[4] = "Math 85: F-";

myClasses[5] = "Phil 106: A-";

//Arrays are objects and have Properties and Methods.

 document.write(myClasses.length);

</script>

An Associative Array uses strings instead of numbers as an index

<script>
var weather = new Array();
weather["seattle"] = "party cloudy";
weather["portland"] = "chance of rain";
weather["los angeles"] = "Who Cares";

document.write("The weather will be " + weather["portland"] + " today in Portland.");
</script>

Whatever

OoPs

!!!!Make your own data types!!!!

Good times creating objects!

var jose = "My length is 15"; //I am already an object and I already have built in methods and properties
document.write(jose.length);
/*document actually refers to the document window in your browser and is a built in object. In this instance it is using the method write.*/

When creating an object it is considered good times put your constructor function in the  head of the markup, 

       <head>
<script>
function person(name, number) {
//this means we are working with the current object
this.name = name;
this.number = number;
}

//instantiation
var jose = new person("Jose", "1-800-JOSE");
var mario = new person("Super Mario", 1112223333);
</script>
</head>
<body>
<script>
document.write(mario.name);
</script>
</body>

Object Initializers are faster than Constructors

<head>
<script>
jose = {name:"Jose Mayorquin", city: "Seattle"};
mario = {name:"Super Mario", city:"Super Mario World"};
</script>
</head>
<body>
<script>
document.write(jose.name + " lives in " + jose.city + ", but wishes he lived in " + mario.city);
</script>
</body>/*However, you should only use these when you are making one or two objects. If you plan on instantiating massive objects you should use a constructor.*/
_______________________________________________________________
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
So far we have only had object properties but now I will add a method.

<head>
<script>
function person(name, score) {
/*this means we are working with the current object*/
this.name = name;
this.score = score;
this.pointsToHighscore = highScore;/*we don't need to add paranthesis tthe end because it will use the existing object properties and bust out a calulation as defined in the objects function*/
}

function highScore() {
var numPoints = 4444455555666666 - this.score;
return numPoints; //we need to return it 
}

//instantiation
var jose = new person("122333", );//I'm no good:( 
var mario = new person("Super Mario", 7777777);
</script>
</head>
<body>
<script>
document.write(jose.pointsToHighscore());
</script>
</body>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////
Arrays are object and therefore have Properties and Methods.

Event Handlers

These will cause an action to occur when the user triggers the event handler.

Event handlers have built in keywords. They don't need to be in <script> tags. Event handler can go in forms: 

<form><input type="button" value="Hit me with your best shot" onClick="alert('You missed');document.write('Im gonna git you Sucka')"</form>

links: okay, these suck because chrome has disabled most of these

<boody onLoad="alert('Hello Dave');">

<a href="http://Google.com";">Some Link</a>
</boody>
|
|
|
|
>
More on this later.

For, Do & While

<script>

x = 1;

while(x < 10) {

document.write(x +" Mississippi<br>");

x++;

}

</script>

While loops and for loops do almost the exact same thing, but a for loop is ideal for a situation where you want your statement to run a set number of times, whereas a while loop can be set to run until it's conditional is satisfied: say for instance, you wanted to keep the a login window enloop until proper credentials were entered.

444444444444444444444444444444444444444444444444444444444444444444444444444444444

444444444444444444444444444444444444444444444444444444444444444444444444444444444

<script>
x = 0;
do {
document.write("do<br>wa<br>ditty<br>ditty<br>dum<br>ditty<br>doo<br>");
x++;
} while (x < 7);
</script>


A for loop will execute once, and check to see if the condition is met before executing again. Then it will continue to execute till the condition is through.

Switch

Switch Statements are better to use if you know that there are going to be a limited number of answers

<script>
var command = "Open Sesame";
switch(command) {
case "Open Sesame":
document.write("You may enter");
break;//kicks you out of this case

case "Abracadabra":
document.write("I'm gonna reach out and grab yah");
break;

default://If none of these come back as true
document.write("That is not the magic word");
}
</script>

Operators

equalsequalsequalsequalsequalsequalsequalsequalsequalsequalsequalsequalsequalsequalsequalsequalsequalsequals

<script>

var one = 100;

var two = 200;

if (two/one==2) {

document.write("Two hundred divided by 100 equals two");

} else {

document.write("What you talkin about Willis")

}

</script>

equalsequalsequalsequalsequalsequalsequalsequalsequalsequalsequalsequalsequalsequalsequalsequalsequalsequalse

Modulus

<script>
var vo = 25 % 7;
document.write(vo);
</script>

Outputs 4, not 3.5714285714285716

%=%=%=%=%=%=%=%=%=%=%=%=%=%=%=%=%=%=%=%=%=%=%=%=%=%=

You will probably never need to use this %=
            But you could if you wanted/had a reason to.

¿