This document discusses a recap of key JavaScript concepts including loops, arrays, nesting, and applying JavaScript to web pages. It covers for loops and their syntax and mechanics, infinite loops, arrays and accessing elements, nesting loops and if statements, and examples of using JavaScript commands and if/for statements on web pages by getting and setting element values and properties. The document concludes by suggesting jQuery, Python, or Ruby as potential next topics.

1. Speaking in Code
HTML + CSS + JavaScript
How it all works
Brian Lee
Professor Liel Leibovitz

2. Speaking in Code
Logistics
• Today will be mostly recap
• Please feel free to ask questions at anytime

3. Speaking in Code
Recap: Loops
• Execute same line(s) of code over and over
• Fundamental concept in programming
• Can be trickier with JavaScript

4. Speaking in Code
Recap: 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 Code
Recap: Loop Mechanics
for(var i = 0; i < 10; i++) {
console.log(i);
}
1. Initialization
2. Check Conditional: Stop loop if false
3. Run Code
4. Run Increment: i++ i=i+1
5. Step 2

6. Speaking in Code
Recap: Infinite Loops
• Loops with no exit strategy

7. Speaking in Code
Recap: Arrays
• Collection of items
• Like a box (even looks like it)
[]
• Each item has a designated spot
var doughnuts= [ , , , ]

8. Speaking in Code
Recap: Arrays – Accessing Elements
• Elements: items in arrays
• Index: location of element in array
– Starts from 0 not 1
var doughnuts= *‘Boston Creme’, ‘Glazed’, ‘Old Fashioned’ +
• How to access the value “Boston Creme”

9. Speaking in Code
Recap: Arrays – Accessing Elements
• Elements: items in arrays
• Index: location of element in array
– Starts from 0 not 1
var doughnuts= *‘Boston Creme’, ‘Glazed’, ‘Old Fashioned’ +
0 1 2
• How to access the value “Boston Creme”
doughnuts[0]

10. Speaking in Code
Recap: Loops and Arrays
• Use loops to write less code
var 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 Crème”
>> “This box has Glazed”
>> “This box has Old Fashioned”

11. Speaking in Code
Things we know about JavaScript
• Step by step instructions
– HTML: defines content
– CSS: defines style
• Tricky syntax (don’t forget ; or { )
}
• Variables
• if statements
• Functions
• Loops

12. Speaking in Code
Recap: Nesting Loops and “IF” Statements
var temperature = 50;
if(temperature > 60) {
console.log(“Wow! It’s hot here!”);
} else {
console.log(“It should be warmer”);
}
var gasPrice = 1.79;
for(var year = 2000; year <= 2013; year++){
gasPrice = gasPrice + 1.15;
}
console.log(“Wow the gas price is $“ + gasPrice + “ already?!”)

13. Speaking in Code
Recap: Nesting Loops and “IF” Statements
for(var age = 0; age < 25; age++) {
if(age < 21) {
console.log("I am " + age + " years old and sad");
} else {
console.log("I am " + age + " years old and suddenly happy");
}
}

14. Speaking in Code
Reminder: So Why JavaScript?
• Gives instructions to the web page
– Notice you can write JavaScript in the browser console?
• Real world application
– Facebook: create your own “buttons” through code
• So many uses
– Add/remove content dynamically
– Change styles
– React to user interaction

15. Speaking in Code
Reminder: Adding JavaScript
• Add JS to a page with the <script> tag
<script type="text/javascript" src="script.js"></script>
• Just another file
– .js

16. Speaking in Code
Reminder: Adding JavaScript
• Trigger functions based on user interaction
– Clicking buttons -> runs a sequence of code ie.) functions
• Using the onclick handler
<p onclick="someFunction()">Click me, I'm a paragraph</p>
• someFunction is defined in somewhere in the .js file

17. Speaking in Code
Reminder: JavaScript Commands
• So what else can we do with JS?
document.getElementById('my-paragraph').innerHTML = ’Nerd Alert!';
• Find the element with the id my-paragraph and set the
HTML within it to “Nerd Alert!”
• Scroll right 0px and down 100px
window.scrollBy(0, 100);

18. Speaking in Code
If 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 Code
For Loops on the Web
• Facebook select all
var elms = document.getElementsByName("checkableitems[]");
for(i = 0; i < elms.length; i++) {
if (elms[i].type === "checkbox”) ,
elms[i].click();
}
}

20. Speaking in Code
Put Your Knowledge to the Test!
http://bit.ly/jshtmlcss

21. Speaking in Code
Next Week!
• Your choice:
– jQuery, Python, or Ruby!
• jQuery – JavaScript library that gives you ability to
manipulate web pages MUCH easier
• Python/Ruby – “Backend” languages
– So, what does code on the server side look like?