Week 7   html css js
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Week 7 html css js

on

  • 175 views

 

Statistics

Views

Total Views
175
Views on SlideShare
175
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Like microwave example - button
  • var username = document.getElementById('username').value; if(username.length > 5) { alert('Registered!'); } else { alert('Please supply a username longer than 5 characters.'); }

Week 7 html css js Presentation Transcript

  • 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 1 var 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 1 var doughnuts= *‘Boston Creme’, ‘Glazed’, ‘Old Fashioned’ + 0 1 2• How to access the value “Boston Creme” doughnuts[0]
  • 10. Speaking in CodeRecap: 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 CodeThings 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 CodeRecap: 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 CodeRecap: Nesting Loops and “IF” Statementsfor(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 CodeReminder: 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 CodeReminder: 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 CodeReminder: 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, Im a paragraph</p>• 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 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 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 all var 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 to manipulate web pages MUCH easier• Python/Ruby – “Backend” languages – So, what does code on the server side look like?