Introduction to JavaScript

Course Length: 4 days

Course Overview

 If you need to learn JavaScript to build upon your HTML skills or as a first step to learning a JavaScript framework such as Angular or React, then this is the right JavaScript course for you. You will learn all the basic constructs of JavaScript, how to use JavaScript to access and change page elements and their properties, and how to test and debug JavaScript using Google Chrome. 

Course Outline

JavaScript Basics

• The Name "JavaScript".
• What is ECMAScript?.
• The HTML DOM.
• JavaScript Syntax.
• Basic Rules.
• Accessing Elements.
• Dot Notation.
• Square Bracket Notation.
• Where Is JavaScript Code Written?
• JavaScript Objects, Methods and Properties.
• Methods
• Properties.
• Exercise 1: Alerts, Writing, & Changing Background Color.

Variables, Arrays and Operators

• JavaScript Variables.
• A Loosely Typed Language.
• Google Chrome DevTools.
• Variable Naming.
• Storing User-Entered Data.
• Exercise 2: Using Variables.
• Constants
• Arrays.
• Exercise 3: Working with Arrays.
• Associative Arrays.
• Array Properties and Methods.
• Playing with Array Methods.
• JavaScript Operators.
• The Modulus Operator.
• Playing with Operators.
• The Default Operator.
• Exercise 4: Working with Operators.

JavaScript Functions

• Global Objects and Functions.
• parseFloat(object)
• parseInt(object)
• isNaN(object)
• Exercise 5: Working with Global Functions.
• User-defined Functions.
• Function Syntax.
• Passing Values to Functions.
• Exercise 6: Writing a JavaScript Function.
• Returning Values from Functions.

Built-In JavaScript Objects

• String
• Math
• Date
• Helper Functions.
• Exercise 7: Returning the Day of the Week as a String.

Conditionals and Loops

• Conditionals
• if - else if - else Conditions.
• Short-circuiting
• Switch / Case.
• Ternary Operator.
• Truthy and Falsy.
• Exercise 8: Conditional Processing.
• Loops
• while Loop Syntax.
• do...while Loop Syntax.
• for Loop Syntax.
• for...of Loop Syntax.
• for...in Loop Syntax.
• break and continue.
• Exercise 9: Working with Loops.
• Array: forEach().

Event Handlers and Listeners

• On-event Handlers.
• The getElementById() Method.
• Exercise 10: Using On-event Handlers.
• The addEventListener() Method.
• Capturing Key Events.
• Exercise 11: Adding Event Listeners.
• Benefits of Event Listeners.
• Timers
• Exercise 12: Typing Test.

The HTML Document Object Model

• CSS Selectors.
• Type Selectors.
• Descendant Selectors
• Child Selectors.
• Class Selectors.
• ID Selectors.
• Attribute Selectors.
• The innerHTML Property.
• Nodes, NodeLists, and HTMLCollections.
• Accessing Element Nodes.
• getElementById()
• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll() and querySelector().
• Exercise 13: Accessing Elements.
• Dot Notation and Square Bracket Notation.
• Collections of Elements.
• window is Implicit.
• Accessing Elements Hierarchically.
• Exercise 14: Working with Hierarchical Elements.
• Accessing Attributes.
• Creating New Nodes.
• Focusing on a Field.
• Shopping List Application.
• Exercise 15: Logging.
• Exercise 16: Adding EventListeners
• Exercise 17: Adding Items to the List.
• Exercise 18: Dynamically Adding Remove Buttons to the List Items.
• Exercise 19: Removing List Items.
• Exercise 20: Preventing Duplicates and Zero-length Product Names.
• Manipulating Tables.

CSS Object Model

• Changing CSS with JavaScript.
• The style Property vs. getComputedStyle().
• Hiding and Showing Elements.
• Checking and Changing Other Style Properties.
• Increasing and Decreasing Measurements.
• Making changeFontSize() More Flexible.
• Custom data Attributes.
• Gotcha with fontWeight.
• Font Awesome.
• Finding and Using Icons.
• classList Property.
• Exercise 21: Showing and Hiding Elements.

Errors and Exceptions

• Runtime Errors.
• Completely Unhandled Errors.
• Globally Handled Errors.
• Structured Error Handling.
• Throwing custom errors.
• Exercise 22: Try/Catch.