JavaScript/jQuery Training

• Fundamentals of JavaScript Code

In this lesson, you will learn some foundational concepts and syntax such as variables, strings, and numbers. These are core concepts used throughout even the most complicated scripts.

• JavaScript methods (such as alerts)
• Variables
• The importance of quotes
• Numbers vs. strings
• Concatenation

• Reusing Code with Functions

A function is a group of reusable code that performs a specific task (or tasks) at a desired time. In this exercise, you will learn how to write a custom function.

• Defining functions
• Calling functions
• Defining parameters & passing arguments

• Targeting HTML Elements

In this exercise, we will take a look at what JavaScript is doing in the background. We will use Chrome's DevTools to reveal the structure of an HTML document, select individual HTML elements and edit them.

• Selecting & Working with HTML Elements
• Getting & Setting Input Values
• Hiding & showing elements with JavaScript

• If Statements: Clearing Form Fields

There are times when you only want your JavaScript code to be executed if certain criteria have been met. In this exercise, you will use an IF statement to detect whether a form field contains text and then respond with a hint if necessary.

• Testing code in the JavaScript Console
• Getting & setting properties
• Using if statements
• Reshowing text hints in empty form fields

• Simple Accordion with JavaScript

Accordions let you condense a lot of information into a small space by hiding some of it. In this exercise, you are going to build a simple accordion to hide and show different elements.

• Targeting elements by ID
• Hiding & showing elements with JavaScript

• Sharing JavaScript Across Pages

In this exercise, we will learn how to externalize JavaScript so it can be shared between pages.

• Externalizing JavaScript
• Linking to the JavaScript File

• Introduction to Arrays & the Math Object

In this exercise, we will learn about arrays and how to create them. You will also learn about Math objects and how to use them in conjunction with arrays to display the values we want.

• Creating an Array of testimonials
• Editing an Array
• The Math Object
• Using the Math Object to Pick Random Testimonials

• Postcard Generator

In this exercise, you will build a postcard generator. The user will choose from a list of U.S. states and the page will dynamically generate a postcard for that state.

• Getting Input From the Menu
• Unobtrusive JavaScript

• Introduction to JavaScript Objects & the DOM

In this exercise you will learn the basics about JavaScript objects. You will create your own object and learn how to access objects inside an HTML document to see how you can manipulate them.

• Intro to objects
• The global object
• Breaking open & manipulating objects

• Dynamically Changing Content with Custom Objects

In this exercise, you will use JavaScript objects to dynamically update content without having to reload the page. In other words, when a user makes a selection, the information on the page will update without the page having to reload.

• Checking the functionality of the select menu
• Getting the chosen value
• Dynamically changing the state name value
• Dynamically changing the rest of the values

• Introduction to For Loops

One of the things that programming is really good for is repeating the same (or similar) actions very quickly. In this exercise, we will look at one way to do this by using a for loop.

• Creating a for loop
• Using the for loop to set dropdown menus
• Clearing the To menu
• Optional bonus: refining the menu selection experience