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/
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/
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/