Introduction to Javascript - College Lecture

1,712
-1

Published on

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

No Downloads
Views
Total Views
1,712
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

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

    ×