is a child of <head> //<h1>, <a>, and <p> are all children of <body> //this means that <title> and <h1> are siblings //understanding these concepts are important //in being able to manipulate elements using javascript //--------------------------------------------------------------------- //the document object //the document object is predefined within javascript //much like the math object and the date object, the document //object is a tool to access all elements of a webpage //in other words, the document object is the owner or root of all objects //within your webpage //so if you want to access any element in your webpage, you are always //going to start with the document object //syntax for using the document object // document.body.innerHTML = 'some text' //the above will override all content in the body and replace it with //'some text' //--------------------------------------------------------------------- //selecting elements //all HTML elemtns are objects, and as we know, //every object has properties and methods //3 most common methods for selecting elements in HTML /*finds element by id document.getElementById(id);*/ //finds elements by class name //doing this will find all elements with a class name and then //return them as an array if multiple elements fall within //the selected class /*document.getElementsByClassName(name);*/ //finds elements by tag name //same thing, all elements will be returned as an array //if multiple elements contain the same tag /*documents.getelementsByTagName(name);*/ //--------------------------------------------------------------------- //every element in the DOM has a set of properties and methods that //provide us with information abour their relationship within the DOM /* element.childNodes returns an array of an elements child nodes element.firstChild returns the first child node of an element element.lastChild returns the last child node of an element element.hasChildNodes returns true if an element has an child nodes, false if not element.nextSibling returns the next node at the same tree level element.previousSibling returns the previous node at the same tree level element.parentNode returns the parent node of an element */ //--------------------------------------------------------------------- //innerHTML property is used to change text within an HTML element //--------------------------------------------------------------------- //changing attributes - written in HTML DOC //the syntax //<img id="myimg" src="orange.png" alt="" /> //<script> //var el = document.getElementById("myimg"); //el.src = "apple.png"; //</script> //--------------------------------------------------------------------- //changing the style of HTML elements using javascript //found in HTML DOC // <div id="demo" style="width:200px">some text</div> //<script> // var x = document.getElementById("demo"); // x.style.color = "6600FF"; // x.style.width = "100px"; //</script> //when accessing CSS properties, you cannot use the '-' character //instead we type everything in camel case instead //example background-color becomes backgroundColor //--------------------------------------------------------------------- //adding and removing elements //use the following methods to create new nodes //element.cloneNode() clones an element and returns the resulting node //document.createElement(element) creates a new element node //document.createTextNode(text) creates a new text node //here is an example var node = document.createTextNode('some new text'); //this creates the node, but it does not appear in the document //until it is attached to an existing element with one of the //following methods //element.appendChild(newNode) - this adds a new child node to an element //element.insertBefore(node1, node2) inserts node1 as a child before node2 //example found in HTML line 100 //--------------------------------------------------------------------- //removing elements //to remove an HTML elements, you must select the parent of the element //and use the removeChild(node) method //Example found in line of HTML 119 //--------------------------------------------------------------------- //replacing elements //to replace an HTML element. the element.replaceChild(newNode, oldNode) //method is used //example found in line 134 of HTML //--------------------------------------------------------------------- //creating animation //found in line 154 of HTML //--------------------------------------------------------------------- //javascript events //EVENTS CAN BE ADDED DIRECTLY INTO HTML ELEMENTS //EXAMPLE //<p onclick='someFunc()'> some text </p> //types of events //onclick - occurs when a user clicks on a element //onload - occurs when an object has loaded //onunload - occurs once a page has unloaded (for<body>) //onchange - occurs when the content of a form element, the selection //of the checked state have changed //onmouseover - occurs when the pointer is moved onto an element or onto //one of its children //onmouseout - occurs when the user moves the mouse pointer //out of an element, or out of one of its children //onmousedown - occurs when the user presses the mouse button //over an element //onmouseup - occurs when a user releases a mouse button over an element //onblur - occurs when an element loses focus //onfocus - occurs when an element gets focus //--------------------------------------------------------------------- //JAVASCRIPT NOTES //PROGRAMMING FUNDAMENTALS //Variables //Arrays //Loops //Conditionals //Comparisons and Operators //Objects //Functions //Program Flow //Data Types //Prototypes //Events //DATA TYPES //Numbers //String //Array //Object </article></body></html>

//https://www.youtube.com/watch?v=vEROU2XtPR8&feature=youtu.be&t=1947%22 //THIS SECTION RELATES TO THIS VIDEO //--------------------------------------------------------------------- //The Alert function. Use to test if .js and HTML are linked. console.log('Start video at 41:55'); //Alert() with a capital "A" does not work. //--------------------------------------------------------------------- //VARIABLES /*Variables can contain letters, numbers, underscores, and dollar signs*/ //Variables should begin with a letter //Can be started with an underscore/dollar sign for diff reasons //--------------------------------------------------------------------- //Establish 2 variables as numbers and add them within an alert. var number1 = 35; var number2 = 40; console.log(number1 + number2); //If we put quoets around the numbers they becomes strings. var number1 = '35'; var number2 = '40'; console.log(number1 + number2); //You can also add strings and variables. var number1 = '35'; var number2 = '40'; console.log('my favorite number is ' + number2); //Javascript is case sensitive as seen below var test = 'This is a test'; var Test = 'This is another test'; console.log(test); console.log(Test); //--------------------------------------------------------------------- //Below I declare these variables without a value. //This is okay, I can define the value later. //Until I declare the value, the variables value is undefined //Camel Case var myFavoriteNumber; //Partial Case var MyFavoriteNumber; //Underscore Style var my_favorite_number; //Here I am adding value to the above variables myFavoriteNumber = 5; MyFavoriteNumber = 5; my_favorite_number = 5; console.log(myFavoriteNumber + MyFavoriteNumber + my_favorite_number); //--------------------------------------------------------------------- //ARRAYS //Arrays are used to store multiple values in a single variable. //This is an initialized array. var colors = [] //This is an array with 3 different values or colors. var colors = ['red', 'blue', 'orange'] //This alert will add all the colors as a string. console.log(colors); //Access the first value of an array console.log(colors[0]); //Access the second value of an array console.log(colors[1]); //Access the third value of an array console.log(colors[2]); //--------------------------------------------------------------------- //Arrays are zero based with zero being the first value. //--------------------------------------------------------------------- //This is how we add values to an existing array. colors[3] = 'green'; console.log(colors); console.log(colors[3]); //Here is a more effective way to add values to an array. colors.push('purple') console.log(colors); console.log(colors[4]); //--------------------------------------------------------------------- //Here is an array with numbers. //Notice how you can put a string in an array of numbers. var numbers = [5,77,6,'Seven', 1, 55]; //We can add different values from the array. console.log(numbers[0] + numbers[2]); //Accessing the string. console.log(numbers[3]); //--------------------------------------------------------------------- //How to tell how many values your array has. console.log(numbers.length); //How to see your values in numbered/alphabetical order. console.log(numbers.sort()); //How to display your values in a reversed order. console.log(numbers.reverse()); //--------------------------------------------------------------------- //Console log, press f12 in chrome to access console.log('HELLO'); //--------------------------------------------------------------------- //for Loops //Below this loop sets variable i = 0 //Then it tells the loop to run until as long as i < 10 //Then it says add 1 to i as far as it can until i < 10 or = to 9 //See the console log for display for(var i = 0; i < 10; i++){ console.log(i); } //This log is to break up the data. console.log('Breakpoint'); //This next log will include the number 10 in the loop for(var i = 0; i <= 10; i++){ console.log(i); }; //Here we include a string in the loop. for(var i = 0; i <= 10; i++){ console.log("I love the number " + i); }; //--------------------------------------------------------------------- //While loop //Establish the variable. var i = 0; //The while loop while(i < 10){ console.log(i); i++ }; //--------------------------------------------------------------------- //For each loops are used for arrays var numbers =[33,54,76,34,2,6]; //For each loop //This loop will cycle through all of the values in the array numbers.forEach(function(number){ console.log(number); }); //--------------------------------------------------------------------- //You still can use for loops for arrays as well. for(var i = 0; i < numbers.length; i++){ console.log(numbers[i]); }; //--------------------------------------------------------------------- //I can tell the numbers to be output in reverse too. numbers.reverse(); //Then run the for each loop again. numbers.forEach(function(number){ console.log(number); }); //--------------------------------------------------------------------- //CONDTIONALS //--------------------------------------------------------------------- //if statments if(1 == 1){ console.log('This is true') }; //--------------------------------------------------------------------- // "=" is an assisgnment operator // "==" means equal to // "===" means equal to in value and data type // "!=" means not equal to // "&&" means and // "||" means or //--------------------------------------------------------------------- //The condition below is not true so it will not be logged. if(1 == 2){ console.log('This is true') }; //--------------------------------------------------------------------- //Here is an example with variables where they are not equal var var1 = 3; var var2 = 4; if(var1 != var2){ console.log('Var1 is not equal to Var2') }; //--------------------------------------------------------------------- //Here is an example declaring what to do if the variables are not true if(var1 == var2){ console.log('These variables are equal') } else { console.log('These variables are not equal') }; //--------------------------------------------------------------------- //Here you can see we use more than 1 condition using && or 'and' var var1 = 3; var var2 = 3; if(var1 == var2 && var1 == 3){ console.log('This is true var1 is equal to var2 and 3') } else { console.log('This is flase') }; //--------------------------------------------------------------------- //Here you can see we use more than 1 condition using || or 'or' var var1 = 3; var var2 = 7; if(var1 == var2 || var1 == 3){ console.log('This is true var1 is equal to var2 or equal to 3') } else { console.log('This is flase') }; //--------------------------------------------------------------------- //Switch Statements //Switching the var will change the output as seen below //Change apples to bananas and you will get a different display //If the var is undefined or not listed below default will run //--------------------------------------------------------------------- //because fruit is not define, the code will display the default log var fruit; switch(fruit){ case 'banana': console.log('I love bananas'); break; case 'apple': console.log('I love apples'); break; case 'orange': console.log('I love oranges'); break; default: console.log('Please pick a fruit'); }; //--------------------------------------------------------------------- //OBJECTS //--------------------------------------------------------------------- //Object Literal //Here we create an object called person var person = { firstName: 'Brad', lastName: 'Traversy', age: 34, children: ['Brianna', "Nicholas"], //We can also add another object to the object address: { street: '555 something street', city: 'Boston', state: 'MA' } }; //Here we console.log the persons age using a '.' console.log(person.age); //Here we access one of Brad's children console.log(person.children[0]); //Here we access the entire obeject embedded within our object console.log(person.address); //Here we access a specific part of the object console.log(person.address.state); //--------------------------------------------------------------------- //--------------------------------------------------------------------- //--------------------------------------------------------------------- //--------------------------------------------------------------------- //--------------------------------------------------------------------- //--------------------------------------------------------------------- //--------------------------------------------------------------------- //--------------------------------------------------------------------- //--------------------------------------------------------------------- //--------------------------------------------------------------------- //--------------------------------------------------------------------- //THIS SECTION RELATES TO SOLO LEARN //math operations var x = 10 + 5; console.log(x); //this will output 15 //you can add many numbers together var x = 10; var y = x+22+33+66+88+99; console.log(y); //this will output 318 //you can also multiply, divide, and subtract //--------------------------------------------------------------------- // multiply * // divide / //subtract - // addition + // modulus (%) this operation return the remainder after dividing //--------------------------------------------------------------------- var x = 26%6; var y = ' because 26/6=4 with 2 left over'; console.log(x + y); //--------------------------------------------------------------------- //Increment & Decrement var a = 0; var b = 10; var a = ++b; console.log(a); console.log(b); //--------------------------------------------------------------------- //so this is a hard concept for me to understand but here we go //maybe i should look up an article //watching this video https://www.youtube.com/watch?v=d4W6-mphL7c //so its all about putting the ++ before or after your value //and how that changes the result //the increments operator adds one to its operand //and returns a value //x++ or ++x //the operator is the (++) //the operand is the variable //--------------------------------------------------------------------- //okay so here is something i learned var x = 5; console.log(x++ + ' | the (++) operator after the var doesnt affect the value until checked later'); console.log(x + ' | this equals 6 becuase the (++) value was applied in the earlier operation, incrementing this result by 1') //so we declare a variable, and if we us the ++ operator after the value //it affects the var in every operation moving forward //here is an example where we put the operator before the variable var y = 5; console.log(++y + ' | putting the ++ operator before the var immediatly affects its value') console.log(y + ' | even if we log the var again, the value still remains 6') console.log(++y + ' | here we do the same operation again, making the result 7') //--------------------------------------------------------------------- //Decrements work the exact same way, except they are used to subtract 1 //--y will affect the value immediatly //y-- will affect the value moving forward var y = 5; console.log(y--) console.log(y) //Here the value of y decreases upon the 2ns console.log var y = 5; console.log(--y); //Here we see that y is changed to 4 immediatly //--------------------------------------------------------------------- //asignment operators //here i will list examples of all types of assisngment operators //--------------------------------------------------------------------- //x=y //this example we assign x the value of y var x = 10; var y = 20; console.log(x=y +' | here x is asisgned the value of y making the result 20 even though x was originally 10'); //--------------------------------------------------------------------- //x+=y //so in this result doing x+=y added both the value of x and y var x = 10; var y = 20; console.log((x+=y)+' | x+=y just added the value of x and y resulting in 30' ); //--------------------------------------------------------------------- //x-=y //in thie result x-=y subtracts y from x var x = 100 var y = 50 console.log((x-=y)+' | this results in 50 because x-=y is the same as x-y'); //--------------------------------------------------------------------- //x*=y //in this result x*=y is the same as x*y var x = 10; var y = 10; console.log((x*=y) + ' | this results in 100 because x*=y is the same as x*y'); //--------------------------------------------------------------------- //x/=y //in this results x/=y is the same as x/y var x = 100 var y = 10 console.log((x/=y) + ' | this results in 10 because x/=y is the same as x/y') //--------------------------------------------------------------------- //x&=y //in this result x%=y is the same as x % y var x = 32 var y = 3 console.log((x%=y) + ' | this results in 2 because x%=y is the same as x%y') //--------------------------------------------------------------------- //comparison operators //these type of operators return true or false //the equal to (==) operator checks whether or not the values are equal var x = 10; var y = 12; //this log will return false because x is not equal to y console.log(x==y) //--------------------------------------------------------------------- //here i will list all types of comparison operators //--------------------------------------------------------------------- // === identical operator //checks to see if variables are identical and of the same data type var x = 1; var y = '1'; //this will return false because they are not the same data type console.log(x===y); var x = 1; var y = 1; //this will return true because they are the same value and data type console.log(x===y); //--------------------------------------------------------------------- // != not equal to var x = 1; var y = 1; //will result in false because the values are equal console.log(x != y); //--------------------------------------------------------------------- // !== not identical var x = 1; var y = '1'; //will result in true because they are equal but not identical console.log(x!==y); //--------------------------------------------------------------------- // > greater than var x = 100; var y = 120; //will result in false because x is not greater than y console.log(x>y); //--------------------------------------------------------------------- // >= greater than or equal to var x = 1; var y = 1; //will be true because x is greater than or equal to y console.log(x>=y); //--------------------------------------------------------------------- // < less than var x = 1; var y = 0; //will be true because y is less than x console.log(y2) && (10<15)); //--------------------------------------------------------------------- //conditional operator //here we change the value of a variable based on a conditon var age=18; var bob = (age >= 21)?'can drink': 'cant drink'; //here we will get the result cant drink because bob is 18 console.log(bob); //lets make him 21 var age =21; var bob = (age >= 21)?'can drink': 'cant drink'; //now he can drink console.log(bob); //--------------------------------------------------------------------- //if statements var x=100; var y=200; if(xy){ console.log('100 is greater than 200 huh') } else{ console.log('100 is not greater than 200 so ill do this instead'); } //the else operation will be performed if the statement is not true //allows us to determin what happens if our operation is not true //--------------------------------------------------------------------- //the else if statement //this allows us to add multiple conditions to an operation //you can write more than 1 else if statement //you are not limited to just one var x = 1000; var y = 2000; var z = 1500; if(x>y){console.log('BOOOOOM')} else if (x == 1000){console.log('you got it phillip')} else{console.log('you didnt get it phillip');} //--------------------------------------------------------------------- //the switch statement is used to replace multiple if statements //can have has many cases as you need //the below statement will output tuesday var day=2; switch (day){ case 1: console.log('monday') break; case 2: console.log('tuesday') break; case 3: console.log('wednesday') break case 4: console.log('thursday') break; default: console.log('anotherDay'); } //switch statements ususally include a case for each possible outcome //default will run if there is no case that matches //the default section and be omitted if there is not need to handle //a case when no match can be found //--------------------------------------------------------------------- //Loops //loops execute a block of code a number of times //3 types of loops //for loops //while loops //do while loops //for loop //this loop contains 3 statements //the first statement can be omitted if your variable has already //been defined //the second statement can be omitted as well, but if you do //you have to provide a break; otherwise the loop will run forever for(i=1; i<=5; i++){ console.log(i + ' the for loop'); } //so this loop is saying that i = 1 //if i is less than 5, then the loop will increment by 1 until //the condition is no longer met //in this case until i is <=5 //the last number in the loop will be 5 //here is another exmaple of how you could do a for loop differently //IF YOU DO OMIT A STATEMENT, YOU MUST STILL PROVIDE A SEMICOLON var i = 0; for(;i<10;){ console.log(i + ' different way to write for loop'); i++; } //--------------------------------------------------------------------- //the while loop //this type of loop will repeat through a block of code //so long as the condition remains true //the syntax /* while (condition) { code block } */ //here is an exmaple of the while loop var i = 0; while(i<10){ console.log(i + ' the while loop'); i++; } //--------------------------------------------------------------------- //the do while loop //this loop is like the while loop, expect it will run the targeted block //of code once, and then check the condition, and then run the loop /* Syntax for the do while loop do { code block } while (condition); */ //the do while loop var i = 20; do{ console.log(i + ' the do while loop'); i++; } while (i<=25); //the do while loop will run atleast one cycle, even if the condition is false //--------------------------------------------------------------------- //using the break statement //the break statement jumps out of a loop and will continue to run code //after the loop //example for (i=0; i<10; i++){ if(i===5){ break; } console.log(i + ' this is an example of using the break statement'); } //--------------------------------------------------------------------- //the continue statement //this statmenet breaks only one iteration of a loop and continues //the loop after that iteration //example of using the continue statement //in this loop, value 5 will be skipped for(i=0; i<=10; i++){ if(i==5){ continue; } console.log(i + ' this is an exmaple of the continue statement'); } //be careful writing condition, they can cause the loop to run forever //same thing if you forget to increase the variable //--------------------------------------------------------------------- //javascript functions //--------------------------------------------------------------------- //user defined functions //a function is a block of code designed to perform a particular task. //code reuse: is where you can define the code once and use it many times //--------------------------------------------------------------------- /* the syntax */ /* function name(){ code to be executed } */ //--------------------------------------------------------------------- /* Function names can contain letters, digites, underscores, and dollar signs (same rules as variables) */ /* to execute a function you need to call it. we call functions by name. */ //once a function is defined, javascript allows you to call it //as many times as you want. //example of a function function myfunction(){ console.log('you wrote a function'); } //here we call on the function 3 different times myfunction(); myfunction(); myfunction(); //--------------------------------------------------------------------- //functions can take parameters //parameters are names //parameters are the names listed in the functions definition //be sure to seperate names by commas //syntax /* functionName(param1, param2, param3) { // some code } */ //--------------------------------------------------------------------- //after defining parameters, you can use them in your functions function sayHello(name){ console.log('Hi,' + name); } sayHello('David'); //function arguments are the real values passed to (and recieved by) //the function //here is an example with many parameters function fruitLove(type){ console.log(type); } fruitLove('Bananas'); fruitLove('Apples') fruitLove('Limes') //if the code fails, make sure your name is long enough //you can also use multiple parameters within a function by //seperating them with a comma function sayHello(name, age){ console.log(name + ' is ' + age + ' years old.'); } sayHello('phil', 25); sayHello('katie', 25); sayHello('melody', 3); //function parameters are listed in the function definition //if you pass more arguments than are defines, they will be assigned //to an array called arguments //if a function is called with missing arguments (fewer than declared) //then the missing values are set as undefined, which indicates //a variable has not been assigned a value //--------------------------------------------------------------------- //function return statement //a function can have a return statement //it is used to return the value of a function //useful for calculations //when javascript reaches a return statement, the function stops executing //exmaple //here is the function function myFunction(a,b){ return a * b; } //we assign a var the function name //we replace a and b with real values //we console log to see the calculation var x = myFunction(5,6); console.log(x); //this displays 30 var x = myFunction(100,10); console.log(x); //this displays 1000 //so we can run multiple calculations with functions we set up //here is another example function addNumbers(a, b){ var c=a+b; return c; } console.log(addNumbers(40,2)) //--------------------------------------------------------------------- //alert box trick //write '/n' to line break in an alert box //--------------------------------------------------------------------- //the prompt box //has the user input a value upon entering a webpage //example /* var user=prompt('please enter your name'); alert(user); */ //--------------------------------------------------------------------- //confirm box //used when we need the user to verify or accept something //exmaple /* var result = confirm('Do you really want to leave this pagE?'); if(result == true){ alert('Thanks for visiting'); } else{ alert('Thanks for staying with us'); } */ //--------------------------------------------------------------------- //javascript objects //objects are variables //objects contain many values //think of objects as a list of values //name:value pairs //names and values are seperated by a colon //exmaple /* var person = { name:'John', age:31, favColor:'green', height:188 } */ //--------------------------------------------------------------------- //javescript objects are containers for named values console.log(person) //accessing values //first we need an object var Melody = { name:'Melody', age:3, favoriteMovie:'Frozen', height:'2foot', favColor:'blue', bday:'October 20th, 2015', timeOfBirth:'9:30PM' } console.log(Melody) //accessing values of an object var x = Melody.age; var y = Melody.height; console.log(x); console.log(y); console.log(Melody.bday); //objects are a core concept in Javascript //you can check the length of a string using the code below //this outputs 6 because the name Melody has 6 characters console.log(Melody.name.length + ' | Melody has 6 characters'); //--------------------------------------------------------------------- //obejct methods //an object method is a property that contains a function definition //here is the syntax //objectNmae.methodName() //methods are functions that are stored as object properties // (OBJECT) . (PROPERTY) // HAIR.COLOR // FACE.STRUCTURE // HEAD.SHAPE //--------------------------------------------------------------------- //object constructor function function Person(name, age, color){ this.name = name; this.age = age; this.color = color; } //here we create new objects based above the function above var p1 = new Person('John', 42, 'green'); var p2 = new Person ('Katie', 25, 'pink'); //this out puts katie becuase that is the name listed under var p2 console.log(p2.name); //--------------------------------------------------------------------- //here is an example of a method //basically a methods are inserted into the constuctor function //here is an exmaple where we us a method to change the name of an object function Person(name, age){ this.name=name; this.age=age; this.changeName = function (name){ this.name=name; } } var name1 = new Person('David', 21); console.log(name1.name + ' | this is name 1, prior to changeName'); name1.changeName('John'); console.log(name1.name + ' | this is name 1 again, but displaying a different name'); //--------------------------------------------------------------------- //here we place a method outside of the object constructor function //THIS SECTION WAS REALLY CONFUSING //I DO NOT UNDERSTAND THE CODE BELOW function Parson(name, age){ this.name=name; this.age=age; this.yearOfBirth=bornYear; } function bornYear(){ return 2016 - this.age; } var pear = new Parson('Phillip', 25); console.log(pear.yearOfBirth); //need help to understand //--------------------------------------------------------------------- //--------------------------------------------------------------------- //--------------------------------------------------------------------- //--------------------------------------------------------------------- //--------------------------------------------------------------------- //--------------------------------------------------------------------- //had to watch a video to understand //--------------------------------------------------------------------- //inserting a method into an object //ok here is the idea //first create an object var Person = { firstName: 'Daniel', lastName: 'Nielsen', age: 25, hairColor: 'Brown', //this is the method being inserted //this function does the same thing as below //its just easier to access fullName: function ( ){ console.log(this.firstName + ' ' + this.lastName); } }; //now we call on the method //the below outputs the function, which output Daniel Nielsen Person.fullName(); //normally if we wanted to access the first and last name we might say //console.log(Person.firstName+ ' ' +Person.lastName); //outputs Daniel Nielsen //the above is a lot of code to write //here is a different way to get the same outcome //we are going to create a method inside the var Person //now we only have to create the method once //check above to see the method //--------------------------------------------------------------------- //okay i watched another video to show me how to insert methods //into object constructors //here is our contructor function peopleMaker(firstName, lastName, age, height){ this.firstName = firstName; this.lastName = lastName; this.age = age; this.height = height; //now we insert the method, which is just a function this.changeName = changeName; function changeName(name){ //when this function is called upon //firstName becomes equal to name within the changeName function this.firstName = name; } } //so now lets create a new person with our constructor var mySelf = new peopleMaker('Phillip', 'England', 25, 180); //now lets test our person to see if its running console.log(mySelf.firstName); console.log(mySelf.lastName); console.log(mySelf.height); console.log(mySelf.age); //now lets call on our method mySelf.changeName('Bart') //now lets check our objects firstName to see if it changed console.log(mySelf.firstName); //the above output Bart so it changed the name of the object mySelf //--------------------------------------------------------------------- //core objects //arrays store multiple values in a single var var course1='HTML'; var course2=' CSS'; var course3=' JS'; console.log(course1+course2+course3); //or we can write the same thing var courses = new Array('HTML', 'CSS', 'JS'); console.log(courses); //or we can access certain parts of the array //this outputs HTML because it is the 1st property in the array console.log(courses[0]) //array indexs are 0 based //the first value is not 1, but 0 instead //if you try to access a value the has not be defined //the system will output 'undefied' //here is another way to write an array //first we esxtablish the array //but we also tell how many values it will contain //this is basically an example of an array constructor //because many different arrays can be derived from this model //and new values can be constructed easily var courses = new Array(3); //then we add the content to the array after establishment courses[0] = 'got '; courses[1] = 'it '; courses[2] = 'right '; console.log(courses[0]+courses[1]+courses[2]); //we can add new courses at anytime courses[3]='C++'; console.log(courses[3]); //an array is a special type of object //objects are accessed by name 'objectName.property' //arrays are accessed by numbers //course[1] vs Courses.class1 //to check the length of an array do the folowwing property //courseName.length //this will output the total number of values within the array //example console.log(courses.length); //this outputs 4 because we have 4 courses in our courses array //if the array were empty the output would be zero //okay so how do we combine existing arrays into a single new array? //first lets create 2 different arrays var people = ['bob','scott','paul','tim']; var places = ['oklahoma','tenessee','flordia','jail']; //ok lets display content console.log(people); console.log(places); console.log('the two arrays above are seperate') //now lets combine them into one array var peoplePlaces = people.concat(places); console.log(peoplePlaces); console.log('now they are one array due to the concat method') //now adding content to the arrays will affect the concated array as well //--------------------------------------------------------------------- //here is an example of an associative array //this is where we give each element in the array a defining name //instead of relying on a index number //this will result in an object and not an authentic array //here is they syntax var person = []; //brackets to establish we are working with an array person['name']='John' person['age']=30; console.log(person['age']) //now we can call the array by name, not by number //outputs 30 //use objects when you want the index to be a string //use arrays when you want the index to be numbers //javascript does not support named array values //--------------------------------------------------------------------- //the math object is an already existing object in javascript //it is really a tool you can use as a shortcut //instead of programming your own math functions //this object has them prestored //the math object /* 1. E = euler's constant 2. LN2 = natural log of the value 2 3. LN10 = natural log of the value 10 4. LOG2E = the base 2 log of eulers constant 5. LOG10E = the bas 10 log of eulers constant 6. PI = returns the constant pi */ //math object methods used for calculations /* 1. abs(x) = returns the absolute value of x 2. acos(x) = returns the arccosine of x, in radians 3. asin(x) = returns the arcsine of x, in radians 4. atan(x) = returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians 5. atan2(y,x) = returns the arctangent of the quotient of its arguments 6. ceil(x) = returns x, rounded up to nearest integer 7. cos(x) = returns the cosine of x (x is in radians) 8. exp(x) = returns the value of E to the power of x 9. floor(x) = returns x, rounded down to the nearest integer 10. log(x) = returns the natural logarithm (base E) of x 11. max(x,y,z) = returns the number with the highest value 12. min(x,y,z) = returns the number with the lowest value 13. pow(x,y) = returns the value of x to the power of y 14. random() = returns a random number between 0 and 1 15. round(x) = rounds x to the nearest integer 16. sin(x) = returns the sine of x (in radians) 17. sqrt(x) = returns the square root of x 18. tan(x) = returns the tangent of an angle */ //you do not need to build the math constructor //there is no need to create a math object first //this idea is built into javascript console.log(Math.PI + ' this is the math object displaying PI'); //--------------------------------------------------------------------- //randomly generated number //here is an example of a randomly generated number between 1 and 10 //everytime this is loaded a random number between 1 and 10 will be logged console.log(Math.ceil(Math.random()*10) + " | a random number"); //--------------------------------------------------------------------- //a program that displays the square root of a given number /* //here we will create a program that will ask the user to input a number //and then it will display the square root of the number var n = prompt('Enter a number', ''); var answer = Math.sqrt(n); alert('The square root of ' + n + ' is ' +answer); */ //math is a handy object and can save you a lot of time //--------------------------------------------------------------------- //the data object //the setIntercal function can be very powerful for animation //setInterval //the setInterval method calls a function of evaluates an expression in intervals //these intervals are defined in milliseconds //here is an exmaple /* function myAlert(){ alert('Fuck You!'); } setInterval(myAlert, 10000); */ //do not include () when passing a function into //the setInterval method //the date obeject //this object allows us to work with the date and time //it looks like this Date() //a date consists of a year, a month, a day, an hour, a minute, a seconds //and a milliscond //example var d = new Date(); console.log(d + ' | todays date'); //we can also access specific dates in different ways //javascript is tracking milliseconds since jan 1st of 1970 //the below will output jan 2nd of 1970 //this is because jan 2nd 1970 is 125000000 milliseconds after jan 1st 1970 var e = new Date(125000000); console.log(e); //we can also display the date as a string //example var e = new Date('July 20, 1993 00:00:00'); console.log(e + ' | my bday'); //then we can also display in the following format //year, month, day, hours, minutes, seconds, milliseconds //exmaple, here is my bday in that format var e = new Date( 93, //year 6,//month (jan = 0, dec = 11) 20,//day 0,//hours 0,//minutes 0,//seconds 0//milliseconds ); console.log(e + ' | still my bday'); //date methods //1.getFullYear() //2.getMonth() //3.getDate() //4.getDay() //5.getHours() //6.getMinutes() //7.getSeconds() //8.getMilliseconds() //example var d = new Date(); //this line pulls the current hour var hours = d.getHours(); //this line dispays the current hour console.log(hours); /* //here we create a program that prints the current time to the browser function printTime(){ var d = new Date(); var hours = d.getHours(); var mins = d.getMinutes(); var secs = d.getSeconds(); document.body.innerHTML = hours+':'+mins+':'+secs; } setInterval(printTime, 1000); */ //above we used the innerHTML property //in the case above we were writing over the content of our body //every seconds //--------------------------------------------------------------------- //DOM and events //DOM = Document Object Model //javascript can be used to manipulate the DOM of a page //you can add, modify, or delete elements of a page on the fly //--------------------------------------------------------------------- //every element in an HTML document have parents and children //for example //the tag has 2 children ( and ), but no parent, as //the tag is not derived from another tag //this makes the and the tag siblinings, because both //the and the tag are derived from the tag // is a child of <head> //<h1>, <a>, and <p> are all children of <body> //this means that <title> and <h1> are siblings //understanding these concepts are important //in being able to manipulate elements using javascript //--------------------------------------------------------------------- //the document object //the document object is predefined within javascript //much like the math object and the date object, the document //object is a tool to access all elements of a webpage //in other words, the document object is the owner or root of all objects //within your webpage //so if you want to access any element in your webpage, you are always //going to start with the document object //syntax for using the document object // document.body.innerHTML = 'some text' //the above will override all content in the body and replace it with //'some text' //--------------------------------------------------------------------- //selecting elements //all HTML elemtns are objects, and as we know, //every object has properties and methods //3 most common methods for selecting elements in HTML /*finds element by id document.getElementById(id);*/ //finds elements by class name //doing this will find all elements with a class name and then //return them as an array if multiple elements fall within //the selected class /*document.getElementsByClassName(name);*/ //finds elements by tag name //same thing, all elements will be returned as an array //if multiple elements contain the same tag /*documents.getelementsByTagName(name);*/ //--------------------------------------------------------------------- //every element in the DOM has a set of properties and methods that //provide us with information abour their relationship within the DOM /* element.childNodes returns an array of an elements child nodes element.firstChild returns the first child node of an element element.lastChild returns the last child node of an element element.hasChildNodes returns true if an element has an child nodes, false if not element.nextSibling returns the next node at the same tree level element.previousSibling returns the previous node at the same tree level element.parentNode returns the parent node of an element */ //--------------------------------------------------------------------- //innerHTML property is used to change text within an HTML element //--------------------------------------------------------------------- //changing attributes - written in HTML DOC //the syntax //<img id="myimg" src="orange.png" alt="" /> //<script> //var el = document.getElementById("myimg"); //el.src = "apple.png"; //</script> //--------------------------------------------------------------------- //changing the style of HTML elements using javascript //found in HTML DOC // <div id="demo" style="width:200px">some text</div> //<script> // var x = document.getElementById("demo"); // x.style.color = "6600FF"; // x.style.width = "100px"; //</script> //when accessing CSS properties, you cannot use the '-' character //instead we type everything in camel case instead //example background-color becomes backgroundColor //--------------------------------------------------------------------- //adding and removing elements //use the following methods to create new nodes //element.cloneNode() clones an element and returns the resulting node //document.createElement(element) creates a new element node //document.createTextNode(text) creates a new text node //here is an example var node = document.createTextNode('some new text'); //this creates the node, but it does not appear in the document //until it is attached to an existing element with one of the //following methods //element.appendChild(newNode) - this adds a new child node to an element //element.insertBefore(node1, node2) inserts node1 as a child before node2 //example found in HTML line 100 //--------------------------------------------------------------------- //removing elements //to remove an HTML elements, you must select the parent of the element //and use the removeChild(node) method //Example found in line of HTML 119 //--------------------------------------------------------------------- //replacing elements //to replace an HTML element. the element.replaceChild(newNode, oldNode) //method is used //example found in line 134 of HTML //--------------------------------------------------------------------- //creating animation //found in line 154 of HTML //--------------------------------------------------------------------- //javascript events //EVENTS CAN BE ADDED DIRECTLY INTO HTML ELEMENTS //EXAMPLE //<p onclick='someFunc()'> some text </p> //types of events //onclick - occurs when a user clicks on a element //onload - occurs when an object has loaded //onunload - occurs once a page has unloaded (for<body>) //onchange - occurs when the content of a form element, the selection //of the checked state have changed //onmouseover - occurs when the pointer is moved onto an element or onto //one of its children //onmouseout - occurs when the user moves the mouse pointer //out of an element, or out of one of its children //onmousedown - occurs when the user presses the mouse button //over an element //onmouseup - occurs when a user releases a mouse button over an element //onblur - occurs when an element loses focus //onfocus - occurs when an element gets focus //--------------------------------------------------------------------- //JAVASCRIPT NOTES //PROGRAMMING FUNDAMENTALS //Variables //Arrays //Loops //Conditionals //Comparisons and Operators //Objects //Functions //Program Flow //Data Types //Prototypes //Events //DATA TYPES //Numbers //String //Array //Object </article></body></html>

notes 11/12 again