Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
65
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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.'); }

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?