Learn JavaScript

Course Progress

Getting Started

1. What is JavaScript?

Let's make sure we're both on the same page! In this lesson we go over some definitions of terms and concepts that will be used in the course. We start with what programming entails, look at JavaScript and also go over other frontend technologies such as HTML and CSS.

2. Setting up Your Development Environment

For any task at hand, it helps to have the right tools for it. While you can code in a simple text editor, it is best to use an editor that is more suited for writing code. We use Sublime Text 3 in the course, but you can use any editor you prefer like Visual Studio Code, Atom, WebStorm, etc. We also recommend you install the Google Chrome Browser.

Week 1: JavaScript Basics

1. The 10 Concepts That are The Same In Every Programming Language

There are 10 concepts in JavaScript that are the same in nearly every programming language. In this lesson, we’ll go through some of them namely: Events, Comments, Print, Variables, Data Types, Conditionals, Functions, Arrays, Concatenation and Debugging. In the lesson, you'll get a preview of the first application you are going to build as you learn these concepts. Exciting times ahead!

2. JavaScript Events

JavaScript in the browser uses an event-driven programming model. An event is a signal that something has happened. Examples of events are the page completing loading, a user clicking on a button, hovering on an element, typing into an input box, submitting a form, etc. JavaScript enables you to respond to events using Event Handlers. You can attach an event handler to the HTML element for which you want to respond to when a specific event occurs.

3. Comments in JavaScript

In computer programming, comments are annotations in the source code of a computer program that are added with the purpose of making the source code easier for humans to understand, and are generally ignored by compilers and interpreters. You should add useful comments to your code to explain what the code does to make it easier for another programmer (or your future self) to go through the code and understand what it's doing and how it works.

4. Print

At some point, you are going to have to write code that displays some output to the user. In JavaScript, you can write to the DOM (Document Object Model—we'll cover the DOM later, but basically, what's written to the DOM determines what's shown in the browser) using the document.write() function.

5. Variables

In programming, a variable is a storage location paired with an associated symbolic name, used to store information to be referenced and manipulated in a computer program. You can think of variables as containers that hold information. Their sole purpose is to label and store data in memory, which can then be used throughout your program.

6. Concatenation

Concatenation (or concat for short) is a way of combining the text of two strings together into a variable. Watch the example in this video—as it's much easier to understand when you see it in action.

7. Datatypes

In JavaScript, there are two different kinds of data: primitives, and objects. There are seven primitive data types: Boolean, Number, String, Null, Undefined, Symbol and bigint (newly introduced). In this lesson, we'll focus on two of these, i.e. Strings and Numbers.

8. Functions

In programming, a function is a named section of a program that performs a specific task. A function groups together one or more program statements that perform some operation(s) and optionally return a value.

9. Conditionals

Often a computer program must make choices on which way to proceed. Conditional statements are features of a programming language which perform different computations or actions depending on whether a specified boolean condition evaluates to true or false.

10. Arrays

An array is a data structure used to store multiple values in a single variable. In some programming languages, arrays can only hold values of the same type, but not in JavaScript. In JavaScript, you can have values of different types in the same array.

11. JavaScript Debugging

One thing you can be sure of when coding: you will encounter bugs. Let's learn how to deal with them. In this lesson, we look at various tools available to help us in debugging our code. You will learn how to log out messages to your browser's console and how to use the Developer Tools available in your browser to inspect and identify issues in your code.

12. Steal this code: Happy Hour App

In this lesson, you'll download a completed JavaScript application, and then we'll learn together by breaking it! Yep, sometimes hacking around a completed app is the best way to learn. You'll be challenged to complete some tasks on your own to test what you've learned so far.

13. Your Assignment!

Time to do some work, everyone.

Week 2: DOM Manipulation

1. Goals for Week 2

Let's look at what we're doing this week. This week, we'll learn how to manipulate the DOM (don't worry, you'll soon find out what that is). We'll learn this while working on a GIF search engine. By the end of the week, you'll be well acquainted with these terms: innerHTML, querySelector, getElementById, addEventListener, DOM manipulation, keyCode, AJAX, JSON.parse, forEach, API documentation.

2. What is the DOM? Just watch along!

DOM stands for Document Object Model. The DOM is (more or less) what we call the HTML once it all loads in your web page. It is the data representation of the objects that comprise the structure and content of a document on the web. Watch the video to see it in action.

3. querySelector()

querySelector lets us grab HTML elements from the DOM. It returns the first Element within the document that matches the specified selector or group of selectors. If no matches are found, null is returned. querySelector() only returns the first element that matches the specified selectors. If you want to get all matches, use the querySelectorAll() method instead.

4. addEventListener()

The addEventListener() method attaches an event handler to a specified element. It can be used to listen for when a user clicks on an element, when a user is typing, when the page fully loads, and much, much, more.

5. querySelector() Can Grab Classes Too!

Let's keep grabbing things with the querySelector(). We had previously used querySelector with an element selector. In this lesson, we'll use a class selector instead.

6. getElementById() and getElementsByClassName()

getElementById() and getElementsByClassName() are similar to our friend querySelector(). getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique in a page, they are a useful way to quickly get access to a specific element. An ID should be unique within a page, however, if a page has more than one element with the specified ID, then getElementById() returns the first element that matches. If no elements with the specified ID exist, it returns null.

7. Create a Function Called Sum That Adds Two Numbers

Time to put your knowledge to the test. The lesson starts off with a challenge for you. Try to solve it yourself before continuing with the video which walks you through a solution.

8. Create a Function Called howManyLetters

You'll be given another challenge. Again, try to work through it on your own before watching the solution.

9. For Loops in JavaScript

Loops offer a quick and easy way to do something repeatedly until a certain condition is met. They can be used to execute a block of code a number of times.

10. Using setTimeout() to Animate

The setTimeout() method sets a timer which executes a function or specified piece of code once the timer expires. Watch on as we use it to animate the appearance of cats on the page.

11. Collect Underpants

Collect underpants, ?, Profit

12. Building a GIF Search Engine!

We finally get started on our GIF Search Engine. You'll download a template project and start building from there. The first task is to grab the user's input from the HTML Search Bar. Let's jump right in!

13. Understanding Scope

Variables are not visible outside the scope in which they are declared. JavaScript has function scope which means, variables declared inside of our functions are not accessible outside of the functions. Not without some fancy moves. Watch this video to learn more about scope in JavaScript.

14. Which keys is the user pressing? Let's listen in.

Using the which event property we can tell if the user pressed the keys down. Actually, we can even "listen" to see what specific keys they are typing. Let's make the NSA proud! This is 'merica goddammit and I'll listen in if I want to!

15. Giphy API & AJAX

In your coding journey, a common task that you'll perform with your code is accessing APIs (Application Programming Interface). APIs provide a way for two applications to communicate with each other. You will most often use APIs to access some data or to integrate an application with your own. Our GIF search engine will be powered by the Giphy API. In this lesson, you'll learn how to make AJAX requests to an API and get data back from it. Ajax, short for Asynchronous JavaScript and XML, refers to a set of web development techniques used widely in client-side programming (e.g. JavaScript) that enable data to be sent and received to and from a database/server.

16. JSON.parse()

A common use of JSON (JavaScript Object Notation) is to exchange data to/from a web server. When receiving data from a web server, the data is always a string. Before we can use the data, we parse it with JSON.parse() which turns the JSON data into something JavaScript can read (it turn it into a JavaScript object). Which allows us to access the data!

17. forEach() Loops Through Our GIFs

We use forEach() to loop through the images that we are getting from the API and then add each image to the DOM. When we are done, you'll have a grid of GIFs on your page after a successful search request.

18. Homework for Week 2!

It's that time of the week again!

19. Get Your Certificate

In order to earn your One Month HTML Certification you must complete all the homework assignments and submit them for grading.

Bonus

1. Push, Pop, Shift and Reverse Arrays

In this lesson, we look at more Array methods (push, pop, shift and reverse) that we can use to search and play with our data. The push() method adds new items to the end of an array and returns the new length. The pop() method removes the last element from an array and returns that element. The shift() method removes the first element from an array and returns that removed element. The reverse() method reverses an array in place.

2. The Map Method

Let's review forEach and compare it to Map. These are both great tools for looping through data. forEach() executes a provided function once for each array element while map() creates a new array with the results of calling a provided function on every element in the calling array. They both do almost the same thing, but the major difference is that forEach() affects and changes our original Array, whereas map() returns an entirely new Array—thus leaving the original array unchanged.

3. Sublime Text Editor

We use Sublime Text to code JavaScript. Here's more about it. Of course, if you have a preference for another code editor (like Visual Studio Code, Atom, WebStorm, etc.), feel free to use it instead.

4. Party Tip: HTML

Knowing more about HTML makes JavaScript a party. Watch on for a quick intro to HTML.

5. Party Tip: CSS

Knowing more about CSS makes JavaScript a party. Watch on for a quick intro to styling your webpage with CSS.

6. Party Tip: JavaScript

JavaScript can be a party. You just have to know how best to use it. Watch on as we add some interactivity to our page using JavaScript.

7. Party Tip: Images

Adding images is quick and easy. Watch on as we make our Party Tips page more interesting by adding some images to it.

8. Juli's Giphy Search Engine Reviewed

Welcome to this code review and refactoring session. We'll go through a student's project, answer some questions she had, review the code and improve it a bit. In the video, we touch on the URL query string, clean up the code, and hook up the click event to the API.

9. How to Get a Website Live on Github Pages

In this video, I'll show you how to get my Cookie Monster website (from One Month's Learn HTML) live on Github Pages. After that, you should be able to follow this same steps for getting any of your JavaScript projects live as well.

10. Happy Hour Explained

Here, we go through a solution to the Happy Hour Challenge.

Download Completed Projects

1. Download Completed Projects

Take a peek at the final Learn JavaScript code. This is all the code (mostly JavaScript, HTML & CSS) behind the project you're building. If you get stuck at any point in this course? Take a look at my code and compare your work to mine.