Successfully reported this slideshow.
JavaScript and CSS inHTML5 Web Development   HTML5 Multimedia Developer’s Guide             Chapter Two
Where does HTML fit in? HTML is basic web page language   Does nothing much more than lay out   items on the page   No pow...
What does JavaScript do?   JavaScript adds the punch     Can move an item on the page     Can perform sophisticated     ca...
How about CSS?Like HTML, CSS does not bringprocessing powerInstead, it makes the page look howeveryou might imagine it sho...
How does JavaScript run?When page is served, activity is “First come,first served”   Browser renders top-to-bottom, left-t...
Controlling when JS runsTwo ways to control when JavaScript coderuns:  Place the JavaScript in a function, and  then call ...
Code Listing 2-2We’re going to type in this code, and thentest it
Results of 2-2Why doesn’t “This is the content of div 1”appear blue and bold?How could we fix this?
Code Listing 2-3We’re going to type this code, and then testit
Results of 2-3See the difference?Why was it different?
Loops & Conditional TestsLooping allows us to repeat sections of codeConditional Tests allow us to interact withactivities...
For LoopsA for loop repeats code as long as a specificcondition existsfor (i=0; i<=10; i++) {    document.write(i + ‘<br>’...
Switch StatementsA Switch statement tests an expression that hasspecific values. Code is executed depending onwhich value ...
Code Listing 2-4We’ll type this code and see what it does
External JavaScriptSo far, we’ve put all our JavaScript inside our webpage using <script> tagsYou can also put your JavaSc...
Upcoming SlideShare
Loading in …5
×

INFO 3775 Chapter 2 Part 1

264 views

Published on

  • Be the first to comment

  • Be the first to like this

INFO 3775 Chapter 2 Part 1

  1. 1. JavaScript and CSS inHTML5 Web Development HTML5 Multimedia Developer’s Guide Chapter Two
  2. 2. Where does HTML fit in? HTML is basic web page language Does nothing much more than lay out items on the page No power to crunch numbers, process data, etc. Just structures the page
  3. 3. What does JavaScript do? JavaScript adds the punch Can move an item on the page Can perform sophisticated calculations Through conditional statements, can make decisions and branch out to specific code
  4. 4. How about CSS?Like HTML, CSS does not bringprocessing powerInstead, it makes the page look howeveryou might imagine it shouldCSS3 is latest standard However, cross-browser support is still developing, so you have to test in different browsers
  5. 5. How does JavaScript run?When page is served, activity is “First come,first served” Browser renders top-to-bottom, left-to- rightWhen JS is in-line, it is run as the browserencounters it. (This could be good or bad)
  6. 6. Controlling when JS runsTwo ways to control when JavaScript coderuns: Place the JavaScript in a function, and then call that function Place the JavaScript in your HTML precisely where you want it to run
  7. 7. Code Listing 2-2We’re going to type in this code, and thentest it
  8. 8. Results of 2-2Why doesn’t “This is the content of div 1”appear blue and bold?How could we fix this?
  9. 9. Code Listing 2-3We’re going to type this code, and then testit
  10. 10. Results of 2-3See the difference?Why was it different?
  11. 11. Loops & Conditional TestsLooping allows us to repeat sections of codeConditional Tests allow us to interact withactivities in the browser, and choose specificcode to run
  12. 12. For LoopsA for loop repeats code as long as a specificcondition existsfor (i=0; i<=10; i++) { document.write(i + ‘<br>’); }
  13. 13. Switch StatementsA Switch statement tests an expression that hasspecific values. Code is executed depending onwhich value is returned.var d= new Date();switch (d.getDay().toString()) { case “0”: document.write(‘<br><br>Today is Sunday’); break;
  14. 14. Code Listing 2-4We’ll type this code and see what it does
  15. 15. External JavaScriptSo far, we’ve put all our JavaScript inside our webpage using <script> tagsYou can also put your JavaScript in an external file,and link to it from the web page This is useful if the same JavaScript file is used by more than 1 web page<script src=”js/common.js”></script>

×