Topic | Name | Description |
---|---|---|
Course Syllabus | ||
1.1: More on Objects in JavaScript | Review: Using JavaScript Objects | Objects are an essential data type of JavaScript, and learning how to use them is necessary to develop applications. We will start with a quick review of objects from the first course. Try the examples in this article to review creating and manipulating objects, accessing objects using dot [.] notation and bracket notation, and setting and getting object members. You can use the JavaScript Console on your browser DevTools to complete the examples. |
Creating Multiple Objects with Constructors | In the previous examples, you created one object with its properties and methods. How would you create more than one? |
|
1.2: Object-Oriented JavaScript | JavaScript Class-Based Object-Oriented Programming (OOP) | Object-oriented Programming (OOP) is a way to model real-world objects in applications using objects and classes. This article overviews object-oriented programming (OOP) in JavaScript and describes three main concepts: classes and instances, inheritance, and encapsulation. After reading this article, can you explain the difference between "classical OOP" and JavaScript's class-based object-oriented model? |
Introduction to Object Prototypes | All objects in JavaScript have an internal property called the prototype. Prototypes are used in JavaScript to reuse code and combine objects. This section will help you understand how prototype object chains allow objects to inherit features from one another. It will also explain how the prototype property is used to add methods to constructors. |
|
Introduction to Classes in JavaScript | This article presents an overview of classes in JavaScript. A class can be seen as blueprints or templates for creating objects. Classes are a way to bundle the properties and the methods that act on those properties (encapsulation). Constructors are used to initialize the properties of the class when you create a new object. Inheritance is a way to create a class hierarchy and reuse (extend) code. You can also override methods and customize your classes while using inheritance. |
|
Example in Action: JavaScript Object Creation | This video covers JavaScript object creation using functions and provides examples. It also explains how to use the |
|
1.3: Working with Built-In Objects | Introduction to Standard Built-in Objects | This article talks about "global objects" (built-in objects) in that they are objects in the global scope, not the global object itself. About 13 different categories are listed. Many of the objects we have started discussing, and some we will touch on as the course progresses. We will look at the |
What Is the Global Property Infinity? | In JavaScript, the global property |
|
1.4 String, Math, and Date Objects in JavaScript | How to Use Text Processing with Strings | A |
How to Use the Number Object | This article describes |
|
Built-In Mathematical Calculations |
|
|
What Is the Date Object? | This article describes the different methods for obtaining dates in various formats. The |
|
Example in Action: Manipulating String Objects | When working with |
|
Practice: Displaying the Date and Time on a Web Page | This video uses the |
|
2.1: Array Introduction | What Is an Array? | An array is a way to store a collection of multiple items under a single variable name. This section introduces how to create, delete and access array elements. Think about the following as you read the article:
|
Different Ways to Create and Manipulate an Array | In JavaScript, arrays can be created in various ways. This section provides examples of using Array literal notation and constructors with single and multiple parameters. Another way to create an array is by using the |
|
Example in Action: Learn How to Create and Manipulate Arrays | When creating an array in JavaScript, you want to be able to create it easily and then use it to help make your coding less complicated. This video shows how to create and do basic array manipulations with your created array. It is a look ahead to some of the other methods and concepts we will cover in this section. |
|
Practice: Create a Guest List with Arrays | Now you will practice creating a Guest List using JavaScript arrays. We recommend following along with the video on your editor. This exercise does not count toward your grade. It is just for practice! |
|
2.2: Using Array Methods | Iterating through Arrays with forEach | One method to iterate through an array in JavaScript is |
Searching Arrays with indexOf and lastIndexOf | In JavaScript, the |
|
Sorting Arrays with the .sort Method | The |
|
Destructuring Arrays | When an array is "destructured," the contents are unpacked. Think of your closet and shoes; you only want red ones. You would need to search your collection of those shoes, so you would need to "unpack" them. You can think of destructuring arrays in that same type of idea. In this video, you will learn how to do this in JavaScript. |
|
Example in Action: push() and pop() methods | Adding or deleting items from arrays in JavaScript is a common procedure, so we focus on the |
|
Example in Action: Useful Array Methods in JavaScript | You may develop a useful algorithm as you work with arrays in JavaScript. However, before writing your algorithm, it's important to know about the many built-in methods already available in the language. This video guides you through some of the most commonly used methods and provides examples for each one. |
|
Practice: An Array of Grades | In JavaScript, arrays do not need to be declared with the maximum amount of data that will be entered. Instead, you can declare an array and add data as needed. For instance, this example creates an array for grades and allows users to enter values. It also demonstrates how while and for loops can be used to access arrays and manipulate data. We recommend following along with the video on your editor. This exercise does not count toward your grade. It is just for practice! |
|
2.3: Introduction to Maps and Sets | What Is a Set? | Watch this video to learn about Sets. Set objects in JavaScript are a collection of values, much like an array. The difference in using a Set is that sets only store unique values. This property can help solve certain problems without you having to write your code to make an array not have a duplicate. Basic Set operations are important to understand ( |
What Is a Map? | JavaScript objects hold structured data |
|
Example in Action: Working with Sets | In these examples, you will learn how to create and iterate over a Set and some basic Set operations. You should put these examples into your editor, run them, change some things, and try rerunning them. |
|
Practice: Working with Map Objects | Map objects are collections of key-value pairs where each key in the Map can only occur once and is unique within the Map's collection. A Map object is iterated by key-value pairs, meaning that a for...of loop returns a 2-member array of [ |
|
3.1: Comparing Types of Functions | Review: Simple Functions | A function is a block of code that can be reused multiple times as needed. Functions may have zero or more parameters and can return values or not. In JavaScript, functions can be created using various methods, such as a function declaration or function expression. Function Declaration: function panda() { //do something in here |
Review: Function Returning a Value | In JavaScript, a function returns a value by returning the value in the "return" statement to where the function was called. For example: sum = add(a,b) When we call the add(a,b) function and it executes its return statement, that returned value will be stored in the sum variable. |
|
Review: Anonymous Functions | Anonymous refers to not having a name or any means of identification. When using an anonymous function in JavaScript, your function will not be named. For example, |
|
How to Use Function "Constructors" | Functions can be created using a "function" statement or the |
|
3.2: Scope and Closure | What Is Scope? | Scope refers to the variables available to a code segment at a given time. If a variable is out of scope, JavaScript cannot access it. The two types of scope are local and global. Global variables are declared outside of a block and can be accessed globally. Local variables are declared inside a block, and only that block can access them. |
What Is Closure? | A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). Simplified, a function inside another function can access the variables from the outer (parent) function. This is a type of encapsulation in JavaScript. |
|
Example in Action: Function Scope | Scope in JavaScript can be broken into two types: local and global. When you declare a variable inside a function, a function will have its local scope. A global variable will be declared outside of functions and can be used throughout the code segments. When using global variables, you must be careful because there are rules for when your global and local variables have the same name and how the precedence will work. Watch this video for how scope is implemented in JavaScript. |
|
Example in Action: Function Closure | When using closures in JavaScript, you can think of them as a "nested" function. The inner function will have access to the outer function's variables, its own variables, and the global variables. The inner function has access to the outer function's parameters so that they can be quite powerful. After watching this video, can you name the inner function and outer function and describe how they work together? |
|
Practice: Scope, Scope Chain, and Closures | The "scope" and "closures" in JavaScript can sometimes become intricate and confusing. This walk-through will step you through the basics of scope and talk about the scope chain and closures. This even steps into the more advanced concept of scope hoisting. You should try to work along with the video on these examples for a better understanding. This exercise does not count toward your grade. It is just for practice! |
|
3.3: Using the "this" Keyword | What Is "this"? | This video will explore how the |
Using function.call to Call a Function | In JavaScript, there is a way to call a function by using the
|
|
Calling a Function Using function.apply | Another way to invoke functions in JavaScript is using the |
|
Using function.bind to Create New Functions | The The syntax of the
|
|
Examples in Action: Using "this" with Functions | This example demonstrates a function invoked using |
|
Practice: Using function.call and function.apply | In JavaScript, |
|
3.4: Nested, Recursive, and High-Order Functions | What Is a Nested Function? | Nested functions are much like nested loops. They occur when one function is nested inside the other. The inner function is private to the outer function. We discussed closures earlier – binding these variables with a closure allows nested functions to "inherit" the arguments and values of the other function. Understanding what function can access the other's variables is a unique relationship. |
Using Recursive Functions | Recursion is when a function/method calls itself. It can be thought of as another way to loop or iterate. There are three ways in JavaScript that a function can refer to itself (call): 1. The function's name (it just calls its name); 2. arguments.callee; 3. An in-scope variable that refers to the function. |
|
Example in Action: Recursive Functions | A classic recursion assignment is to do the factorial of a number. This video tutorial will show you how to write this program in JavaScript. Ensure your IDE is open and ready to work with this step-by-step guide. |
|
Higher-Order Functions Explained | Higher-order functions are functions that either take another function as an argument or return another function. JavaScript can become very powerful when you understand how to use these functions to help you write more powerful code. You use JavaScript's callback functionality when you pass a function as an argument. |
|
Practice: Making Circles Using Functions | This practice video shows you how to create a program that makes concentric circles using functions in JavaScript. It uses a loop to keep the circles drawing. For a challenge, change the loop into a recursive call once you have it working. This exercise does not count toward your grade. It is just for practice! |
|
4.1: DOM Programming Interfaces | Node Interface | In the DOM, all document parts are organized in a hierarchical tree-like structure consisting of parents and children. These individual parts are called Nodes. The Node interface is an abstract base class, so there is no such thing as a plain Node object. Look at some of the most used properties |
Document Interface | The Document interface is an interface for web documents. It represents a document as a logical tree and has different properties and methods you can access as you build. |
|
Element Interface | Element nodes in HTML documents have properties and methods that help us locate specific elements on a webpage. Using methods such as |
|
HTML Interface | Most interfaces in the HTML DOM API map almost one-to-one to individual HTML elements. This interface allows you to perform various actions on your webpage, such as getting, removing, adding, and changing HTML elements. Many options and methods are available to accomplish these changes, and we will cover some of the most common ones in the next section. |
|
EventTarget Interface | Understanding the EventTarget interface can make coding much easier to comprehend when working with events triggered by user actions. There are various types of events, and knowing how to handle them is essential for understanding JavaScript and its use of this interface. For example, the |
|
4.2: JavaScript and the DOM: Commonly Used Methods | Creating New Elements with document.createElement | The |
Using document.append | The |
|
Using element.append to Add to the Element List | The |
|
Accessing Elements with document.getElementbyId | In JavaScript, the |
|
Accessing Elements by Their Name with document.getElementsbyName | The |
|
Looking for Specific Elements with document.querySelector | The |
|
How Is element.querySelector different than document.querySelector? | The |
|
Example in Action: Modifying a Page Structure | When working with the DOM, you need to be able to create elements, and once you have created them, you should set whatever attributes you are trying to modify. Finally, you attach your element to the DOM. We recommend that you follow the examples in this video using your favorite editor. |
|
Practice: How to Access the DOM | This video covers some of the methods mentioned in this section. The DOM Tree comprises nodes from the elements on the page. If you want to change something, you must know how to "grab" the node and use another method to manipulate the node. Follow along with the video and try some of the examples using your favorite editor. This exercise does not count toward your grade. It is just for practice! |
|
5.1: Introduction to Web Forms | Designing a Simple Form | We will start this section by looking at how to design a simple web form. Forms must be easy to use and have an organized field layout (first and last name), clear actions (submit your application), and error messages (such as "please provide a username"). The article links to (older pages) examples of form design principles, accessibility, and best practices. Feel free also to browse the most recent articles. |
The <form> element | A web page's |
|
The <input> element | The |
|
The <label> element | An |
|
The <select> element | The |
|
Example in Action: How to Structure a Web Form | When building a form, you want to make sure you are using a basic structure that still covers all you need to cover. Building your forms with dedicated form elements and attributes will help ensure your form is usable and accessible. |
|
Practice: Test Your Skills, Form Structure | Now that you have worked through building a web form, you can test your skills and build a structure that has given parameters. You may try this in the given editor, or if you are using some other editor to work on your forms, feel free to use it to test your knowledge. This exercise does not count toward your grade. It is just for practice! |
|
5.2 How to Use Button and Text Elements | Using the <button> Element | Input elements of type |
Using the <text> Element | Elements of type |
|
Example in Action: How To Use Buttons with JavaScript | This video demonstrates how to handle the |
|
5.3: How To Use Checkboxes and Radio Buttons | What Are Radio Buttons? | Radio input elements are typically used in radio groups where only one button can be selected at a time. You can try out the radio button example to see how it works. |
Using Checkboxes to Make Forms More Friendly | Checkboxes default to being checked when they are active. Many web documents have these types of controls. You can change their appearance to make them more rounded and make the labels clear for your users. Checkboxes differ from radio buttons because you can select multiple checkboxes simultaneously. |
|
Example in Action: JavaScript Get Checkbox/Radio Button Values | This video builds some checkboxes that will store car information. It also uses the |
|
5.4: Styling Custom Forms | How to Style the Easy-to-Style Widgets | The easier widgets to style are |
Advanced Form Styling | Some elements, like checkboxes, radio buttons, and |
|
Practice: Styling Basics | Now, you should be able to complete this exercise. You will be styling a basic form. If you have an online tool you prefer to use for this work, you may do so. Otherwise, work in whatever editor is comfortable for you. You should download the starting point for this task before you begin to work on the practice assessment. This exercise does not count toward your grade. It is just for practice! |
|
5.5: Using JavaScript for AutoCompletion | The "name" Attribute | The |
Reasons to Use Autocomplete | The HTML The |
|
Example in Action: Using JavaScript for Autocompletion | Follow along as you create a text box with autocomplete capabilities to make the form more user-friendly and efficient. The video also covers many concepts from previous units, such as accessing elements using the DOM and working with arrays. |
|
5.6: JavaScript and Form Validation | What Is Form Validation? | When you enter data, the browser or server will check that it is in the right format and valid for the application. Validation done in the browser is called client-side form validation; if the server does it, it is called server-side form validation. This section presents built-in client-side form validation. The last example in this section shows you how to validate forms without a built-in API using JavaScript and the DOM. |
Why Is Form Validation Necessary? | When users enter data into a form, it is essential to have validation to ensure that the information entered is correct. With proper validation, you can receive lots of usable data. If someone enters invalid data into your form, you must have checks to inform them of their mistakes. This video demonstrates validating a form with name, phone number, and email fields. As you watch the video, consider how form validation can be used in different applications. |
|
Example in Action: Picking the Right Input Types | This tutorial starts with coding the form and then uses JavaScript to validate the input types and information. It steps you through validating and entering a student ID, email address, and URL. This is a great tutorial to grab the code and work along with the video. |
|
5.7: Final Practice Exercise | Final Practice Exercises | In these final practice exercises, you will use HTML, CSS, DOM, and JavaScript to create forms that can be used with user input on a webpage and then validate the input. Note that these exercises are for practice purposes only. If you need help completing it successfully, download the solution code. |
Course Feedback Survey | Course Feedback Survey |