JavaScript Essential Training

Description

In this course, you will learn :

• What is JavaScript?
• Working with data
• Using functions and objects
• Working with JavaScript and the DOM
• Changing DOM elements
• Handling events
• Working with loops
• Making images responsive using markup
• Troubleshooting code
• Validating functionality
• Minifying JavaScript

Syllabus :

1. JavaScript: An Introduction

• What is JavaScript?
• How does JavaScript relate to Java?
• Navigating the JavaScript landscape

 

2. The Basics

• Tools for JavaScript development
• Introducing the browser console
• Add inline JavaScript to a HTML document
• Add JavaScript in an external file
• How to write JavaScript: A crash course

 

3. Working with data

• Variables: The catch-all containers of JavaScript
• Data types in JavaScript
• Arithmetic operators and math
• Working with strings and numbers
• Conditional statements and logic
• Advanced conditions and logic
• Arrays
• Properties and methods in arrays

 

4. Functions and Objects

• Functions in JavaScript
• Build a basic function
• Add arguments to the function
• Return values from a function
• Anonymous functions
• Immediately invoked functional expressions
• Variable scope
• ES2015: let and const
• Make sense of objects
• Object constructors
• Sidebar: Dot and bracket notation
• Closures

 

5. JavaScript and the DOM, Part 1: Changing DOM Elements

• DOM: The document object model
• Target elements in the DOM with querySelector methods
• Access and change elements
• Access and change classes
• Access and change attributes
• Add DOM elements
• Apply inline CSS to an element

 

6. Project: Create an Analog Clock

• Create an analog clock: Project breakdown
• Use CSS to move clock hands
• Use JavaScript to move clock hands
• Get the current hour, minute, and second with the Date() object
• Show the current time using fancy math
• Make the clock move forward second by second
• Solve the pesky "return to zero" problem

 

7. JavaScript and the DOM, Part 2: Events

• What are DOM events?
• Some typical DOM events
• Trigger functions with event handlers
• Add and use event listeners
• Pass arguments via event listeners

 

8. Project: Typing Speed Tester

• Rundown of HTML markup
• Use event listeners to detect typing
• Build a count-up timer
• Build a helper function for leading zeros
• Detect spelling errors by matching strings
• Stop the timer when the test is done
• Add a reset button

 

9. Loops

• Loops
• Looping through arrays
• Break and continue loops

 

10. Project: Automated Responsive Images Markup

• Project breakdown
• Rundown of project setup
• Loop through all images in the document
• Create function to generate srcset value
• Create object containing different sizes values
• Update img markup with srcset and sizes attributes

 

11. Troubleshooting, Validating, and Minifying JavaScript

• JavaScript validation and troubleshooting
• Troubleshooting JavaScript
• Send troubleshooting info to the console
• Step through your JavaScript with browser tools
• Online script linting
• Automate script linting
• Online script minification
• Automate script minification

 

12. Bonus Chapter: Ask the Instructor

• What are arrow functions?
• What do I learn first? JavaScript? TypeScript?
• How do I write strings in ES2015?
• What does the % symbol do?
• Why use the querySelector() and querySelectorAll() methods?

Show more