JavaScript for Web Designers

HTML and CSS can't do everything. Learn how to write JavaScript code to work with features like web forms, clocks, and interactive maps on your websites.

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

• Partial geocoding with Bing Maps
• Start building page interactivity
• Mocking up an API request
• Making a real API request with Bing Maps Locations API

Conclusion

• Next steps: More about JavaScript