Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to Javascript - College Lecture

1,949 views

Published on

Published in: Technology
  • Be the first to comment

Introduction to Javascript - College Lecture

  1. 1. JavaScriptdocument.dance();
  2. 2. Overview• UIE Podcast - Sharing is caringLecture• Flash update from Web & Gaming Conference• The HTML <script> tag• Whatup JS (hello-world.html)• Selecting Elements with JS• Basic Event HandlerLabPrint page link08 - JavaScript Advanced Web Design http://dabrook.org/
  3. 3. What Up Flash?• You’re welcome HTML5• Flash is the new HTML6• Hi quality video• Advanced 3D animation• Data visualization• HTML5 App!!!08 - JavaScript Advanced Web Design http://dabrook.org/
  4. 4. How to Add JavaScript08 - JavaScript Advanced Web Design http://dabrook.org/
  5. 5. How to Add JavaScript 1. Inline (boo)08 - JavaScript Advanced Web Design http://dabrook.org/
  6. 6. How to Add JavaScript 1. Inline (boo) 2. Embed (ok)08 - JavaScript Advanced Web Design http://dabrook.org/
  7. 7. How to Add JavaScript 1. Inline (boo) 2. Embed (ok) 3. External (yay)08 - JavaScript Advanced Web Design http://dabrook.org/
  8. 8. Mini Lab • Create a new document: how-to-add-js.html • Add the basic structure of an HTML page • Practice adding an alert message three ways08 - JavaScript Advanced Web Design http://dabrook.org/
  9. 9. Hello JavaScript08 - JavaScript Advanced Web Design http://dabrook.org/
  10. 10. Hello JavaScript 1. Alert (annoying)08 - JavaScript Advanced Web Design http://dabrook.org/
  11. 11. Hello JavaScript 1. Alert (annoying) 2. document.write() (ok)08 - JavaScript Advanced Web Design http://dabrook.org/
  12. 12. Hello JavaScript 1. Alert (annoying) 2. document.write() (ok) 3. innerHTML (better)08 - JavaScript Advanced Web Design http://dabrook.org/
  13. 13. Mini Lab • Create a new document: hello-world-js.html • Practice writing to the screen in different ways08 - JavaScript Advanced Web Design http://dabrook.org/
  14. 14. Selecting HTML Elements08 - JavaScript Advanced Web Design http://dabrook.org/
  15. 15. Selecting HTML Elements08 - JavaScript Advanced Web Design http://dabrook.org/
  16. 16. Selecting HTML Elements 1. Select all elements by type08 - JavaScript Advanced Web Design http://dabrook.org/
  17. 17. Selecting HTML Elements 1. Select all elements by type 2. Select single element by ID08 - JavaScript Advanced Web Design http://dabrook.org/
  18. 18. Basic Event Handler08 - JavaScript Advanced Web Design http://dabrook.org/
  19. 19. Basic Event Handler 1. Add an ID to your link08 - JavaScript Advanced Web Design http://dabrook.org/
  20. 20. Basic Event Handler 1. Add an ID to your link 2. Select the element with JS08 - JavaScript Advanced Web Design http://dabrook.org/
  21. 21. Basic Event Handler 1. Add an ID to your link 2. Select the element with JS 3. Add event handler08 - JavaScript Advanced Web Design http://dabrook.org/
  22. 22. Basic Event Handler 4. Code what you want to happen NOTE: Make sure JS appears below the HTML08 - JavaScript Advanced Web Design http://dabrook.org/
  23. 23. Overview• UIE Podcast - Sharing is caringLecture• Flash update from Web & Gaming Conference• The HTML <script> tag• Whatup JS (hello-world.html)• Selecting Elements with JS• Basic Event HandlerLabPrint page link08 - JavaScript Advanced Web Design http://dabrook.org/
  24. 24. Lab • Create a new document: print-js.html • Add HTML and CSS for a basic page with a print stylesheet • Use your JS skills to have the document print when you click on a print link HINT: JavaScript function to print the current page08 - JavaScript Advanced Web Design http://dabrook.org/
  25. 25. HomeworkAdd a print button or link to your resume page. UseJavaScript to make the page print when the user clicks on thelink.Upload to:username.welovewebdesign.com/hw/08/08 - JavaScript Advanced Web Design http://dabrook.org/

×