//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 //--------------------------------------------------------------------- var fruit = ('apple'); switch(fruit){ case "banana": alert('I hate bananas') break; case "apple": alert('I love apples'); break; case "orange": alert('Oranges are ok'); break; default: alert('I love all other fruits') break; }; //--------------------------------------------------------------------- //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; document.write(x); //this will output 15 //you can add many numbers together var x = 10; var y = x+22+33+66+88+99; document.write(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 NOTES //PROGRAMMING FUNDAMENTALS //Variables //Arrays //Loops //Conditionals //Comparisons and Operators //Objects //Functions //Program Flow //Data Types //Prototypes //Events //DATA TYPES //Numbers //String //Array //Object

11/07 Notes