Week 7 html css js

319 views
205 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
319
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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

    1. 1. Speaking in CodeHTML + CSS + JavaScriptHow it all worksBrian LeeProfessor Liel Leibovitz
    2. 2. Speaking in CodeLogistics• Today will be mostly recap• Please feel free to ask questions at anytime
    3. 3. Speaking in CodeRecap: Loops• Execute same line(s) of code over and over• Fundamental concept in programming• Can be trickier with JavaScript
    4. 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. 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. 6. Speaking in CodeRecap: Infinite Loops• Loops with no exit strategy
    7. 7. Speaking in CodeRecap: Arrays• Collection of items• Like a box (even looks like it) []• Each item has a designated spot var doughnuts= [ , , , ]
    8. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. Speaking in CodePut Your Knowledge to the Test!http://bit.ly/jshtmlcss
    21. 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?

    ×