JavaScript: The First Steps
JavaScript is one of the most popular and versatile programming languages when working on the web. It makes for a great first language to learn as you can get started with any web browser and its built-in devtools.
This beginner-focused series will take you through the fundamentals of JavaScript and give you a solid understanding of how the language works. Once the fundamentals are under your belt, you should be comfortable writing JavaScript in your own applications or continue your JavaScript journey by learning new frameworks or technologies that are built on top of it.
Progress
Series Info
- Episodes
- 30
- Run Time
- 6h 28m
- Difficulty
- Beginner
- Last Updated
- Sep 8, 2023
- Version
- Latest
Series Episodes
- Fundamentals (17)
Hello, JavaScript
This lesson will provide a fun introduction to running JavaScript in your browser devtools console. We'll review some examples of selecting elements in the DOM and manipulating them with JavaScript. We then identify some interactive components on the Laracasts home page that require the use of JavaScript to run correctly.Variables and Assignment
Let's begin by reviewing the most basic building block: variables. We'll discuss different ways to declare variables and which characters are valid. To finish off, we'll review the different casing styles used in JavaScript.JavaScript Types
Data types in JavaScript describe the different values or data you can use in your variables. They are classified into primitive types and reference types. In this video, we'll review all of the types as well as a brief example of how to use them.Use a Code Editor and Execute Scripts
In this episode, we'll begin working in a code editor and will take a look at how to execute JavaScript from within an HTML file. We'll then explore the difference between inline scripts and external scripts and make use of an extension that automatically refreshes the browser every time we make a code change.JavaScript Types - Strings
Let's take a deeper look at the different types in JavaScript, beginning with strings. Strings represent any sort of text you need in your applications. We'll review the different ways to declare a string and some of the operations you can perform on them.JavaScript Types - Numbers and BigInts
Next up, let's take a look at how you can work with Numbers in JavaScript. We'll review some basic math operations you can perform on them, as well as special numbers that you might encounter. We'll also take a look at the BigInt type, which is a newer JavaScript type that is appropriate for particularly large numbers.JavaScript Types - Booleans
In this lesson, we learn about the Boolean type in JavaScript, which can be either true or false and is used in conditionals and loops. We also learn how to make Boolean variables and use comparisons that result in a Boolean value.JavaScript Types - Arrays
In this lesson, we learn about arrays, which are collections of data and are now considered reference types instead of primitive types. The instructor provides examples of defining arrays using array literals and explains that arrays can contain any type of data.JavaScript Types - Objects
In this video, we'll cover the basics of using objects in JavaScript. Objects are a collection of properties that have a key and a value, and we can define them using curly brace syntax to create an object literal. We'll use a person example to demonstrate how to define keys and values.JavaScript Functions: Built-in and Custom
In this lesson, we will cover functions in JavaScript, including built-in functions and how to define our own custom functions. The transcript provides examples of using built-in functions for strings and math, and mentions that we will also learn about parameters and arguments.Alternate Ways to Define JavaScript Functions
In this lesson, we explore some alternative ways to define functions in JavaScript. We cover function expressions, arrow functions, and callback functions. We also discuss the concept of anonymous functions and provide examples of each type of function. These different ways of defining functions offer flexibility and can be used in various scenarios when writing JavaScript code.If Statements
In this lesson, we will discussifstatements, which are also known as conditionals. They allow you to execute a block of code based on a condition that evaluates to eithertrueorfalse.Use Switch Statements for Multiple Conditions
In this lesson, we learn aboutswitchstatements as an alternative toifstatements for handling multiple conditions. We'll see examples of handling different cases based on the value of a variable. The lesson also covers the use of thebreakstatement to stop the execution of code within a case.Loops and Iteration
In this lesson, we will discuss the various types of loops in JavaScript (there are quite a few). I will explain the syntax and provide examples of how to use each variation.Understanding Scope
In this lesson, we explore the concept of scope in JavaScript. We learn about three different types: global scope, function scope, and block scope. We also discover the differences betweenvarandletvariables in terms of their scope.Pass by Value or Pass by Reference
"In this lesson, we explore the main difference between primitive types and reference types in JavaScript. Primitive types are passed by value, while reference types are passed by reference. Understanding this distinction is crucial to avoiding unexpected bugs in your code."Strengthen Your JavaScript Skills With These Exercises
"In this lesson, we will put our new skills to test by working through a series of exercises. We will cover topics such as converting minutes to seconds, ensuring a question mark at the end of a string, finding the maximum number in an array, converting a string to a different case, removing spaces from a string, and summing positive numbers within an array."
- Working with the DOM (5)
DOM Manipulation
In this lesson, we will learn about the document object model (DOM) and how it represents the HTML structure of a webpage. We will explore how JavaScript can manipulate elements in the DOM, such as adding or removing elements, changing styles, and selecting specific elements using query selectors. Understanding the DOM will allow us to create interactive and dynamic web pages.Selecting DOM Elements
In this lesson, the instructor explains how to select DOM elements using JavaScript. They cover the methods document.querySelector and document.querySelectorAll, which allow you to select elements using CSS selectors. They also mention older methods like getElementById and getElementsByClassName, but recommend using querySelector and querySelectorAll for their versatility. The instructor demonstrates how to select elements and perform operations on them, such as changing styles and accessing values.Manipulating DOM Elements: Properties and Methods
In this lesson, we learn how to manipulate DOM elements using properties and methods. We explore reading and updating text content, working with inline styles, adding and removing classes, reading and updating attributes, and working with form elements. We also learn about the difference between nodes and elements and where to find a comprehensive list of properties and methods for both. In the next lesson, we will explore more properties and methods for traversing the DOM.DOM Traversal
In this lesson, we learn about traversing the DOM using various properties and methods. These allow us to select elements relative to our current position in the DOM, whether it's downwards, sideways, or upwards.Creating DOM Elements
Another common task you need to perform when working with the DOM is creating elements and inserting them into the DOM. There are a handful of useful methods and properties we can make use of, so let's have a look.
- Events (2)
Events and Event Listeners
Events are emitted by your elements whenever something notable happens; for example, when a button is clicked or when a form is submitted. Event listeners allow you to listen for events and run a function whenever they happen. Let's take a look.Event Bubbling, Capturing and Delegation
Diving a bit deeper, let's reviewing eventing in JavaScript. Understanding these next concepts is vital for preventing bugs and writing more efficient code.
- Exercises and Examples (4)
Simple DOM Exercises
Let's work on some exercises to practice everything we've learned about the DOM and events. Practical exercises like these are fun to work on and really help in understanding usage of JavaScript in the real world.Todo App Exercise
The Todo App is a standard for learning a new language or framework because it shows you how to perform common tasks like adding, removing and updating DOM elements. Let's implement our own version with everything we've learned so far.Refactor Todo App
When working with vanilla JavaScript, there isn't really anything dictating how to organize and structure your code. If you're not careful, things can quickly become messy. Let's take a look at one possible refactor we can do that makes use of an object literal to give structure and organization to our code.Using External Libraries
Often, you will need to pull in an external package or library in order to accomplish a particular task. One of the best parts of JavaScript is its vast ecosystem of thousands of libraries you can make use of. Let's take a look at a few examples in this episode.
- Wrapping Up (2)
Additional Topics
Let's take a few moments to briefly discuss some quick examples of topics we didn't cover in detail within this series.Goodbye and Additional Resources
That's a wrap on this series! Before I go, let me provide you with some additional resources for you to continue your JavaScript journey. Thanks for coming along!
