1. Speaking in CodeHTML + CSS + JavaScriptHow it all worksBrian LeeProfessor Liel Leibovitz

2. Speaking in CodeLogistics Today will be mostly recap Please feel free to ask questions at anytime 3. Speaking in CodeRecap: Loops Execute same line(s) of code over and over Fundamental concept in programming Can be trickier with JavaScript 4. Speaking in CodeRecap: For Loops Basic Syntax for(var i = 0; i < 10; i++) {console.log(i); } Initialization: define variable useful to loop Conditional: keep looping while this is true is i currently less than 10? Increment: executed at the end of the loop 5. Speaking in CodeRecap: Loop Mechanics for(var i = 0; i < 10; i++) {console.log(i); }1. Initialization2. Check Conditional: Stop loop if false3. Run Code4. Run Increment: i++i=i+15. Step 2 6. Speaking in CodeRecap: Infinite Loops Loops with no exit strategy 7. Speaking in CodeRecap: Arrays Collection of items Like a box (even looks like it) [] Each item has a designated spot var doughnuts= [ , , , ] 8. Speaking in CodeRecap: Arrays Accessing Elements Elements: items in arrays Index: location of element in array Starts from 0 not 1var doughnuts= *Boston Creme, Glazed, Old Fashioned + How to access the value Boston Creme 9. Speaking in CodeRecap: Arrays Accessing Elements Elements: items in arrays Index: location of element in array Starts from 0 not 1var doughnuts= *Boston Creme, Glazed, Old Fashioned +0 12 How to access the value Boston Cremedoughnuts[0] 10. Speaking in CodeRecap: Loops and Arrays Use loops to write less codevar doughnuts = *Boston Creme, Glazed, Old Fashioned ]for(var i = 0; i < doughnuts.length; i++) { console.log(This box has + doughnuts*i])}>> This box has Boston Crme>> This box has Glazed>> This box has Old Fashioned 11. Speaking in CodeThings we know about JavaScript Step by step instructions HTML: defines content CSS: defines style Tricky syntax (dont forget ; or { ) } Variables if statements Functions Loops 12. Speaking in CodeRecap: Nesting Loops and IF Statementsvar temperature = 50;if(temperature > 60) { console.log(Wow! Its hot here!);} else { console.log(It should be warmer);}var gasPrice = 1.79;for(var year = 2000; year runs a sequence of code ie.) functions Using the onclick handler

Click me, Im a paragraph

someFunction is defined in somewhere in the .js file 17. Speaking in CodeReminder: JavaScript Commands So what else can we do with JS? document.getElementById(my-paragraph).innerHTML = Nerd Alert!; Find the element with the idmy-paragraph and set theHTML within it to Nerd Alert! Scroll right 0px and down 100px window.scrollBy(0, 100); 18. Speaking in CodeIf Statements on the Web Checking if a username is long enough var username = document.getElementById(username).value; if(username.length > 5) {alert(Registered!); } else {alert(Please supply a username longer than 5 characters.); } 19. Speaking in CodeFor Loops on the Web Facebook select allvar elms = document.getElementsByName("checkableitems[]");for(i = 0; i < elms.length; i++) { if (elms[i].type === "checkbox) , elms[i].click(); }} 20. Speaking in CodePut Your Knowledge to the Test!http://bit.ly/jshtmlcss 21. Speaking in CodeNext Week! Your choice: jQuery, Python, or Ruby! jQuery JavaScript library that gives you ability tomanipulate web pages MUCH easier Python/Ruby Backend languages So, what does code on the server side look like?