JavaScript for Web Designers

JavaScript for Web Designers

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 2h 46m | 526 MB

Web designers can improve their skill sets and job prospects by getting comfortable with JavaScript. It’s the only scripting language for client-side programming—for doing things that would be impossible with HTML and CSS alone—and is increasingly popular for server-side programming, too. Learn some basic, real-world uses for JavaScript in this course with Joe Chellman. Find out how to write JavaScript in the browser and in a code editor, and then put it straight to use in a store checkout page: manipulating forms and form fields, reading data, checking input for errors, and displaying the results of shipping calculations. Plus, learn how to use JavaScript time and date functions to create features like clocks, and add interactive content through APIs like Bing Maps.

Topics include:

  • What is JavaScript?
  • Writing and debugging JavaScript
  • Interacting with the DOM
  • Working with forms with JavaScript
  • Using JavaScript to track dates and times
  • Creating maps with the free Bing Maps API
  • Fetching data from a third-party API
Table of Contents

1 Web designers need JavaScript
2 What you should know
3 Using the exercise files
4 Challenges
5 Compatibility notes
6 What is JavaScript
7 Live examples
8 Where you don’t use JavaScript
9 JavaScript’s power can be dangerous
10 Your friend the text editor
11 Browsers and tools
12 Tools in action
13 Getting help
14 Jargon
15 Jargon The DOM
16 Vanilla JavaScript versus frameworks
17 Working with user info
18 Text fields and select boxes
19 Radio buttons and checkboxes
20 Changing submission with events
21 Starting to validate input
22 Disabling and enabling fields
23 The basics of sanitizing user input
24 Get and set with innerHTML
25 Challenge Add and use more fields
26 Solution Add and use more fields
27 Use JavaScript to tell time
28 Get pieces of time
29 Use timers to update the page
30 Polish the clock
31 Challenge Add the date
32 Solution Add the date
33 Filling in gaps with Moment.js
34 What is an API
35 Create a map
36 Change the center point
37 Change the type and zoom level
38 Add a marker
39 Add a popup to the marker
40 Challenge Modify the map
41 Solution Modify the map
42 Introducing Ziptastic
43 Fetching data from a third party API
44 Better UX for the checkout page
45 Next step More about JavaScript