JavaScript for Web Designers

Introduction

• Web designers need JavaScript
• What you should know
• Using the exercise files
• Challenges
• Compatibility notes

1. JavaScript in Use

• What is JavaScript?
• Live examples
• Where you don't use JavaScript
• JavaScript's power can be dangerous

2. Writing and Debugging

• Your friend the text editor
• Browsers and tools
• Tools in action
• Getting help
• Jargon
• Jargon: The DOM
• Vanilla JavaScript versus frameworks

3. Working with Forms

• Working with user info
• Text fields and select boxes
• Radio buttons and checkboxes
• Changing submission with events
• Starting to validate input
• Disabling and enabling fields
• The basics of sanitizing user input
• Get and set with innerHTML
• Challenge: Add and use more fields
• Solution: Add and use more fields

4. A Matter of Time

• Use JavaScript to tell time
• Get pieces of time
• Use timers to update the page
• Polish the clock
• Challenge: Add the date
• Solution: Add the date
• Filling in gaps with Moment.js

5. Consuming a Third-Party API

• What is an API?
• Create a map
• Change the center point
• Change the type and zoom level
• Add a marker
• Add a popup to the marker
• Challenge: Modify the map
• Solution: Modify the map

6. Better User Experience with an API

• Introducing Ziptastic
• Fetching data from a third party API
• Better UX for the checkout page

Conclusion

• Next step: More about JavaScript