1. JavaScript
document.dance();

2. Overview
• UIE Podcast - Sharing is caring
Lecture
• Flash update from Web & Gaming Conference
• The HTML <script> tag
• Whatup JS (hello-world.html)
• Selecting Elements with JS
• Basic Event Handler
Lab
Print page link
08 - JavaScript Advanced Web Design http://dabrook.org/

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. How to Add JavaScript
08 - JavaScript Advanced Web Design http://dabrook.org/

5. How to Add JavaScript
1. Inline (boo)
08 - JavaScript Advanced Web Design http://dabrook.org/

6. How to Add JavaScript
1. Inline (boo)
2. Embed (ok)
08 - JavaScript Advanced Web Design http://dabrook.org/

7. How to Add JavaScript
1. Inline (boo)
2. Embed (ok)
3. External (yay)
08 - JavaScript Advanced Web Design http://dabrook.org/

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 ways
08 - JavaScript Advanced Web Design http://dabrook.org/

9. Hello JavaScript
08 - JavaScript Advanced Web Design http://dabrook.org/

10. Hello JavaScript
1. Alert (annoying)
08 - JavaScript Advanced Web Design http://dabrook.org/

11. Hello JavaScript
1. Alert (annoying)
2. document.write() (ok)
08 - JavaScript Advanced Web Design http://dabrook.org/

12. Hello JavaScript
1. Alert (annoying)
2. document.write() (ok)
3. innerHTML (better)
08 - JavaScript Advanced Web Design http://dabrook.org/

13. Mini Lab
• Create a new document: hello-world-js.html
• Practice writing to the screen in different ways
08 - JavaScript Advanced Web Design http://dabrook.org/

14. Selecting HTML Elements
08 - JavaScript Advanced Web Design http://dabrook.org/

15. Selecting HTML Elements
08 - JavaScript Advanced Web Design http://dabrook.org/

16. Selecting HTML Elements
1. Select all elements by type
08 - JavaScript Advanced Web Design http://dabrook.org/

17. Selecting HTML Elements
1. Select all elements by type
2. Select single element by ID
08 - JavaScript Advanced Web Design http://dabrook.org/

18. Basic Event Handler
08 - JavaScript Advanced Web Design http://dabrook.org/

19. Basic Event Handler
1. Add an ID to your link
08 - JavaScript Advanced Web Design http://dabrook.org/

20. Basic Event Handler
1. Add an ID to your link
2. Select the element with JS
08 - JavaScript Advanced Web Design http://dabrook.org/

21. Basic Event Handler
1. Add an ID to your link
2. Select the element with JS
3. Add event handler
08 - JavaScript Advanced Web Design http://dabrook.org/

22. Basic Event Handler
4. Code what you want to happen
NOTE: Make sure JS appears below the HTML
08 - JavaScript Advanced Web Design http://dabrook.org/

23. Overview
• UIE Podcast - Sharing is caring
Lecture
• Flash update from Web & Gaming Conference
• The HTML <script> tag
• Whatup JS (hello-world.html)
• Selecting Elements with JS
• Basic Event Handler
Lab
Print page link
08 - JavaScript Advanced Web Design http://dabrook.org/

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 page
08 - JavaScript Advanced Web Design http://dabrook.org/

25. Homework
Add a print button or link to your resume page. Use
JavaScript to make the page print when the user clicks on the
link.
Upload to:
username.welovewebdesign.com/hw/08/
08 - JavaScript Advanced Web Design http://dabrook.org/