Software Engineer & Educator
JavaScript: From First Steps to Professional
14 hours, 19 minutes
CC
Course Description
Take your first steps into the wide world of JavaScript and walk away with the core skills needed to become a professional JavaScript programmer! Through a series of hands-on projects, you’ll learn the building blocks to write dynamic websites. Modify web pages on the fly, write reusable code with functions, react to user events, make decisions with conditionals, and fetch data from APIs! Everything you need to continue your journey to become effective at JavaScript.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseWhat They're Saying
Just finished a 14 hrs course! JavaScript: From First Steps to Professional by Anjana Vakil on Frontend Masters. The course was a perfect refresher to my JS knowledge. I learned some new staff about js like await/async, fetch, promises and modules. Built a funny project that fetch dog.ceo API 😁.
Anjana is an amazing character and her way of teaching is very entertaining made this lengthy course enjoyable and easy to finish.
Ahmad ash-Sharkawi
ash-sharkawi
Anjana Vakil's course on Frontend Masters, JavaScript: From First Steps to Professional, was the exact JS refresher I needed. Thoroughly enjoyed her teaching style, GIFs and jokes. 😂
Esther 🥑
_estheradebayo
I just completed "JavaScript: From First Steps to Professional" by Anjana Vakil on Frontend Masters! Such an amazing course, thank you so much.
Ahmed Hlilioune 🇲🇦
a7lilion3
Course Details
Published: November 15, 2022
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 28 minutes
Anjana Vakil introduces the course by providing some personal background and answering a student's questions regarding how Anjana discovered JavaScript and why they like it.
Anjana provides an overview of the material covered in the course, including the DOM, data types, arrays, objects, functions, events, branches, loops, fetching data, and real-world JavaScript. A student's question regarding how much time will be spent writing code is also covered in this segment.
Anjana discusses what JavaScript is and what it can do some examples include the language of the web, a programming language, and something that lets people modify and add functionality to a website.
Anjana discusses the relationship between HTML, CSS, and JavaScript and the places JavaScript can be written. The browser's JavaScript console, local text files in editors, and online playgrounds are some examples discussed. A brief demonstration of using the console is also provided in this segment.
DOM
Section Duration: 1 hour, 12 minutes
Anjana walks through what an HTML document looks like by drawing out a tree of HTML elements and briefly discussing the elements contained in the provided example.
Anjana demonstrates how to use the web browser's inspect tool to find specific HTML elements and their contents on a webpage. Discussions regarding using various selector syntaxes, including querySelector, getElementsByTagName, and querySelectorAll to query for particular details, are also covered in this segment.
Anjana discusses getting the number of matching elements using the .length selector and the text contained in an element using .textContent Student questions regarding the difference between an HTML collection and a node list and why it is .length and not .count are also covered in this segment.
Anjana walks through an exercise using console commands to find all the p elements, the text "X," the number of squares on the board, and the text "A game you know."
Anjana demonstrates using JavaScript commands in the web browser console to edit the HTML and CSS of a web page. The changes made with console commands will revert to the original page view when the page refreshes.
Anjana walks through an exercise of using the console to edit the webpage HTML. This exercise includes changing the player names, swapping the player symbols, and changing the subtitle to "A game you know and love."
Values & Data Types
Section Duration: 57 minutes
Anjana demonstrates the different values and data types used in JavaScript, including how to tell the type difference between "24" and 24. Primitive data types include string, number, boolean, undefined, null, bigint, and symbol.
Anjana provides an exercise to practice determining the value type in JavaScript. A demonstration of using typeof to check value types is also covered in this segment.
Anjana discusses the data type string, what strings are composed of, how to determine the length of a string, and demonstrates how characters are organized in a string.
Anjana demonstrates searching for the first occurrence of a specified string, substring, or character using the indexOf method. Also covered in this segment are includes, startsWith, toLowerCase, and how to combine two strings.
Anjana provides an exercise to practice inserting strings, searching for the first occurrence of a character, searching for the existence of a string in a document, and manipulating the case of strings.
Operators
Section Duration: 27 minutes
Anjana discusses the various operators and the different effects they can have on values in JavaScript. In JavaScript, Arithmetic operators respect the order of operations and can be grouped using parentheses.
Anjana provides an exercise to practice using arithmetic operators, including, addition, subtraction, multiplication, and division.
Anjana demonstrates JavaScript returning a boolean when running comparison operators and discusses the differences between the triple equals === and double equals == equality operators. A brief exercise using equality operators is also provided in this segment.
Expressions
Section Duration: 1 hour, 9 minutes
Anjana discusses what expressions are and where they can be used in JavaScript. An expression is a valid set of literals, variables, and operators that resolve to a single value.
Anjana demonstrates JavaScript's ability to remember values by declaring and assigning them as variables. A student's question regarding why `let bankruptcy` evaluates to undefined and not null is also covered in this segment.
Anjana briefly discusses the difference between the const and let keywords, how to utilize a variable, and demonstrates various naming conventions for variables.
Anjana provides an exercise to practice declaring and assigning variables and discusses a student's question regarding the difference between the let, const, and var keywords. Students are instructed to declare and assign variables to remember their name, the combined age of their parents, and the #board element on the Tic Tac Toe page.
Anjana discusses a brief overview of what a variable is and provides a suggestion for a mental picture to associate with a JavaScript variable.
Anjana provides a set of code examples and walks through how JavaScript evaluates each of these examples when they are run.
Anjana discusses the differences between statements and expressions and provides a brief overview of the material covered. An expression asks JavaScript for a value, while a statement tells JavaScript to do something.
Arrays
Section Duration: 1 hour, 2 minutes
Anjana demonstrates how items are arranged in an array, the array index, finding the .length of an array, and how to check if an array contains a specific value. Replacing, removing, and appending array items are also demonstrated in this segment.
Anjana demonstrates some practical array methods, including sort, join, and concat. A demonstration of the push method is also provided in this segment.
Anjana discusses mutable and immutable data and demonstrates actions that mutate and do not mutate data. Some actions "mutate" an array while others do not mutate the original array but instead create a new copy.
Anjana provides some exercises to practice determining which actions will and will not mutate data.
Anjana demonstrates the interactions between an immutable variable with a mutable value. Using immutable data and variables is best to avoid errors caused by unintentional data mutations.
Anjana discusses student questions regarding what happens when declared variables point towards arrays and if arrays should be declared using const or let.
Objects
Section Duration: 58 minutes
Anjana introduces JavaScript objects and demonstrates how to access the values of an object's properties. A student's question regarding if there can be multiple properties or values on a single line is also covered in this segment.
Anjana walks through a whiteboard visualization of what happens when creating and accessing information in a JavaScript object. A student's question regarding if an array that acts like an object can be created is also covered in this segment.
Anjana provides an exercise to practice creating objects and adding properties. A student's question regarding creating sub-objects within objects is also covered in this segment.
Anjana discusses properties on objects that point to functions, also known as methods, and briefly discusses the .this method. Nested objects and objects in arrays and objects are also demonstrated in this segment.
Anjana provides an exercise to practice retrieving data from objects. Students are instructed to retrieve "Girl Power", the object representing Ginger Spice, "Spiceworld", and "Victoria" from the spiceGirls object.
Anjana demonstrates predefined objects in JavaScript, including document, console, Math, and String. A brief review of some of the methods that can be performed on these built-in objects is also provided in this segment.
Anjana walks through playing a tic tac toe game using the material covered thus far. Creating a players array that contains objects for each player with the player's name, symbol (X or O), and score (0 initially), displaying each player's name in the appropriate element on the page, and playing the game by placing symbols on the board are all covered in this segment.
Quiz Project
Section Duration: 34 minutes
Anjana walks through a brief JavaScript pop quiz overviewing the material covered thus far. A discussion regarding the contents of the quiz project, script tags, and code comments are also covered in this segment.
Anjana provides a DOM exercise to review JavaScript skills covered so far in the course. Students are instructed to declare statement, optionButtons, and explanation variables, create a facts object, and to use the statement element to display that fact.
Anjana walks through the second TODO task of the DOM exercise, declaring and assigning a variable called fact. The fact variable is a constant object containing the properties fact, answer, and explanation.
Anjana live codes the third TODO task of the DOM exercise, setting the text of the statement element to the fact statement.
Quiz Project Functions
Section Duration: 1 hour, 41 minutes
Anjana discusses declaring and calling functions, the difference between function parameters and arguments, and what happens when a function receives an incorrect argument. A function's parameters are the expected inputs, while the arguments are the actual values the function is called with.
Anjana demonstrates specifying the output value of a function in a return statement and what happens when there is no return. A student's question regarding if a return statement functions similarly to console.log is also covered in this segment.
Anjana provides an exercise to practice declaring functions and walks through the solution to each function. Students are instructed to declare three functions: multiply, given two numbers, return their product; yell, given a lowercase string, log it in all caps to the console; and longerThan, given two arrays, return whether the first is longer than the second.
Anjana discusses creating unnamed functions using the arrow syntax to declare the function. More complicated arrow functions can be made by utilizing curly braces to define a function body, but a return statement is still required.
Anjana provides an exercise to practice writing arrow functions by refactoring the previously written functions in the creating functions exercise as arrow functions.
Anjana provides an exercise to practice declaring functions in the JavaScript quiz project. Students are instructed to declare functions that disable or enable a button and declare an isCorrect(guess) function that compares the given string to the previously created fact's answer string.
Anjana walks through the solution to TODO number four of declaring functions that disable or enable a button.
Anjana walks through the solution to TODO number five of declaring an isCorrect(guess) function that compares the given argument string to the previously defined fact's answer string.
Anjana answers a student's question regarding how fact.answer works since it compares a string to a boolean and demonstrates how to convert a non-string value into a string using toString.
Anjana discusses the meaning of scope in JavaScript, when the scope of a function is determined, and how to determine which variables can be accessed in a given scope. Within each scope, variables declared on the broader scope can be accessed, but variables declared in a narrower scope cannot be accessed.
Anjana demonstrates the ability to allow variables from a narrower scope to be accessed in a broader scope using the let keyword. A student's question regarding how the scope changed when strings are immutable is also covered in this segment.
Anjana discusses the differences between the var and let keywords. The var statement declares a function-scoped or globally-scoped variable while the let declaration declares a block-scoped local variable.
Events & Handlers
Section Duration: 26 minutes
Anjana provides a brief overview of the quiz project and discusses detecting events on the DOM with the method .addEventListener. The event listener method takes in two parameters, the name of the event being listened for and a handler function to run when that event is detected.
Anjana demonstrates the properties contained within the event object and how they are used to describe the event that occurred. Events are fired to notify code of "interesting changes" that may affect code execution.
Anjana provides an exercise to practice adding event listeners in the console and walks through the solutions. The events click, mouseover, and mouseout are demonstrated in this segment.
Conditionals
Section Duration: 1 hour, 10 minutes
Anjana demonstrates using if and else statements to execute code only under the specified conditions. The if statement executes a statement if a specified condition is truthy; if it evaluates to falsy, the else clause will instead be executed.
Anjana provides an exercise to practice writing conditional statements and walks through the solutions. Students are instructed to write a conditional that logs whether first name or last name is longer, a function isEmpty(array) that returns whether a given array is empty or not, and a conditional that returns whether an empty array is truthy or falsy.
Anjana demonstrates using the logical operators and, or, and not to expand the flexibility of boolean conditional statements. A demonstration of using ternary operators to quickly write boolean conditionals is also provided in this segment.
Anjana demonstrates how to iterate over a function multiple times while only running a single statement using loops. The += and ++ increment operators and the for and for of loops are covered in this segment.
Anjana walks through TODO six of the quiz project. Students are instructed to create a for loop to attach an event handler and add the statement text to the appropriate div on the page.
Anjana walks through TODO seven of the quiz project, where students are instructed to create another for loop that disables all of the buttons when one is clicked.
Anjana walks through TODO eight of the quiz project, where students are instructed to retrieve the guessed value from the clicked button, compare the guess to the answer, and apply the correct or incorrect class accordingly.
Map & Filter
Section Duration: 24 minutes
Anjana demonstrates using the filter method to process an array for specified data and the map method to call a function on each item and create a new array.
Anjana live codes an exercise to practice mapping and filtering through an array. This example creates new arrays, including a new "name" array and an array for just nicknames that end in y.
Anjana demonstrates inserting all of the items from one array into another using the spread operator. Instead of looping over an array for each item, the spread operator can also be used.
Doggos Quiz Game
Section Duration: 50 minutes
Anjana discusses the next project for this course, a guess the dog breed quiz. Setup instructions are also provided in this segment.
Anjana demonstrates using while loops to run a section of code repeatedly until a defined condition is true. The while loop can be dangerous; if the given condition is always true, a never-ending loop is created that will break the browser.
Anjana provides an exercise to practice creating while loops by completing TODO number one for the doggo quiz. Students are instructed to use a while loop and the getRandomElement function to create an array with several choices, including the correct answer.
Anjana walks through the solution to the doggo quiz while exercise. Implementing both the random item and shuffle utility functions are covered in this segment.
Anjana inserts the correct function argument and demonstrates the resulting code from the doggo quiz while exercise.
Anjana discusses creating an asynchronous function by setting a task to a to-do list by running it in a setTimeout function. Asynchronous refers to code that allows a program to have a task be performed alongside the original task (or tasks) without stopping to wait for the task to complete.
Data Fetching & Promises
Section Duration: 29 minutes
Anjana discusses using the fetch function to load data from an API endpoint on the internet. If the request is successful, the API will respond with data contained in a JSON object.
Anjana discusses the states of a promise, including pending, fulfilled, and rejected. A student's question regarding if promises are only seen with API called is also covered in this segment.
Anjana demonstrates using the await operator to wait for a Promise and obtain its resulting value. If the await operator is not used, JavaScript will return the promise object without the value of the promise.
Destructuring Data
Section Duration: 40 minutes
Anjana discusses destructuring as a method to declare multiple variables at once by retrieving the values from the parent object. Altering the destructuring syntax to use square brackets allows the destructuring of arrays.
Students are instructed to follow TODO number two of the doggo quiz project and complete the getBreedFromURL function with destructuring and the .string() method.
Anjana walks through the solution to returning the unformatted breed name from the given URL.
Anjana walks through the solution to appropriately formatting the returned breed name using the .split() method. Brief demonstrations of the .reverse() and .trim() methods are also provided in this segment.
Async
Section Duration: 33 minutes
Anjana demonstrates combining async fetching and parsing the resulting code into a single function to create an async function. The async function also needs to be awaited to retrieve the contents of the returned promise.
Anjana walks through the solution to the doggo fetch project TODO number three of filling in the async function body. Students' questions regarding the use of await before the async function and if it would be better for JavaScript to be multi-threaded are also covered in this segment.
Students are instructed to complete TODO number four of the doggo fetch project. Create a button element for each choice in the choicesArray, attach a click event listener with the buttonHandler function, and append the button as a child of the options element.
Anjana walks through the solution to the adding choice buttons exercise.
Anjana provides an exercise to practice asynchronously calling functions and using the returned imageUrl, correctAnswer, and choices data to render the completed quiz page. This exercise completes the TODO number 5 for the doggo fetch project.
Modules
Section Duration: 1 hour, 1 minute
Anjana discusses a concept commonly used in real-life JavaScript code of splitting large codebases into multiple smaller files using modules. The differences between JavaScript and module JavaScript, including await, scope, import, and export, are also covered in this segment.
Anjana answers student questions regarding if only utility functions are imported, importing modules on the internet compared to locally, and recommendations for where to start breaking a webpage into modules. Resources to look into after this course are also provided in this segment.
Anjana discusses methods to go about debugging and how to provide more information on bugs and errors using console.log, .warn(), .error(), and the console's debugger.
Anjana demonstrates using the browser's built-in debugger, including showing multiple ways of setting breakpoints to assist in finding errors.
Anjana demonstrates error handling using try catch blocks to be aware of potential errors and then manage them if they occur.
Anjana provides a brief overview of the material covered in this course and recommendations for next steps.
Wrapping Up
Section Duration: 10 minutes
Anjana wraps up the course by answering student questions regarding how to think about programming paradigms in JavaScript and if companies are more often using pure JavaScript or JavaScript with a framework such as React.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops