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?