Booking options
£41.99
£41.99
On-Demand course
15 hours 35 minutes
All levels
This course extensively illustrates how to become a skilled JavaScript developer. Working from the fundamentals, you will learn what JavaScript is, what it can do, and why to use it. A range of topics is covered clearly and structured while building practical projects along the way, including real-world examples and mini-challenges.
JavaScript is a core technology programming language of the World Wide Web with HTML and CSS. Almost all websites use JavaScript as a webpage client, often with third-party libraries. JavaScript is a multi-paradigm that supports event-driven, functional, and imperative coding with APIs to work with text, dates, regular expressions, data structures, and the Document Object Model (DOM). This course begins with a foundation in JavaScript, covering arrays, functions, objects, events, DOM, web APIs, loops, math, date and timers, and canvas drawing. Create a video player with customized controls and a fun shape-drop game. Explore trickier concepts such as async JavaScript, scope, hoisting, and closures, before finishing two projects. Finally, you will build a small app called 'Leaving so Soon' to woo visitors with an offer when trying to leave the website and a fully functional JavaScript image carousel. By the end of the course, you will understand the concepts of JavaScript programming and advanced concepts like Async JavaScript, scope, hoisting, and closure. You can apply the concepts in project samples from a real-world scenario to understand JavaScript programming. You will be able to create apps and games using JavaScript programming. All resources are available at: https://github.com/PacktPublishing/Modern-JavaScript-For-Beginners
Learn the basics of arrays, functions, objects, events, and the DOM
Understand the concepts of using loops and conditional statements
Know about objects, math, date, timers, and drawing on canvas
Explore complex Async JavaScript, scope, hoisting, and closure
Build a working video player with fully customized controls
Create an app called 'Leaving so soon' to woo visitors with an offer
This beginner-focused course targets AI developers, web content developers, and front-end interface developers working on other platforms wanting to learn JavaScript programming. The course is aimed at those new to JavaScript or having little knowledge about JavaScript and looking for an extensive course to advance to the intermediate/advanced levels. To optimize the course, you do not require any knowledge of JavaScript; however, prior knowledge of HTML and CSS is desirable.
The course is delivered through high-quality videos and onscreen lessons that are interactive and explanatory. The course covers extensive topics related to JavaScript for beginners and intermediate to complex issues.
Learn JavaScript programming fundamentals and understand the concepts comprehensively * Structured video lectures with projects, including real examples and mini-challenges * Learn about Async JavaScript, scope, hoisting, closure, and build apps and games with JavaScript
https://github.com/PacktPublishing/Modern-JavaScript-For-Beginners
Chris Dixon is a self-employed web developer teaching others through training courses. Chris offers freelance web development and training workshops on various topics, including HTML, CSS, JavaScript, Vue.js, NUXT.js, WordPress (custom theme development), Mongo/Mongoose, PostgreSQL, Express, Firebase, and Supabase. Chris is also involved in building Shopify ecommerce solutions, including custom apps and theme development. Chris has vast experience in GraphQL, Keystone CMS, and many other front-end/full-stack skills. He is additionally a regular Shopify user in creating and managing online stores and editing/creating custom liquid templates.
1. Introductions
This section outlines the course content in general, explains the course benefits, and briefly overviews what you will learn from the course.
1. Introduction A brief outline of the course content and what you will learn from this course. |
2. Let's See What JavaScript Can Do In this video, you will learn about the capabilities of JavaScript and why we need to use it as a programming language. |
3. Download Starter Files The author demonstrates how to download and set up the starter files to help complete the course with projects and samples. |
2. JavaScript Basics
This section briefly introduces JavaScript programming with Async, datatypes, strings, variables, and operators.
1. Where to Add JavaScript This video demonstrates the setup of JavaScript before we begin working on the course and outlays the capabilities of JavaScript in brief. |
2. Async and Defer In this video, we will briefly look at programming with Async and defer. |
3. Working with Strings Here, we will understand the concept of working with strings and manipulating variables. |
4. Storing Data with Variables In this lesson, we will look at storing data with variables. |
5. Mixing Strings with Variables After working with strings, you will learn about storing strings and data into containers called variables. |
6. Datatypes: Numbers This video introduces the different kinds of datatypes and focuses on the number datatypes. |
7. Datatypes: Boolean, Null, and Undefined In this lecture, we will explore the primitive values of JavaScript; namely, Boolean, the null value, and the undefined values. |
8. Comments: Semicolons and ASI Here, we will understand how to place comments in JavaScript, how the codes are executed from top to bottom, and the various separators and code executors. |
9. Operators: Assignment and Comparison In this lesson, you will learn how to use operators =, +=, *=, and /= assigned to constants to derive new values. |
10. Operators: Logical and Arithmetic This video will teach us to apply arithmetic and logical operators such as 6, -, /, *, + +, - -, and %. |
11. Introduction to Arrays and Object Types Here, we will explore the different kinds of object types and also get introduced to the concept of arrays. |
12. Introduction to Objects We will look at an object in detail, what values it can contain, and the size of an object in terms of values. You will also learn to create an object. |
13. Introduction to Functions A task or a set of tasks grouped together is called a function. We will create our functions and understand how they work. |
3. Arrays in More Depth
In this section, we will delve deeper into arrays. We will understand arrays and how the values or variables inside an array can be accessed using indexing.
1. The Array Constructor We will create an array, assign random values in a list inside the array, and access them using the index code. |
2. Introduction to Properties, Methods, and the Prototype Here, we will look at the properties of an array; we will create multiple kinds of arrays and understand the different methods to access data in an array. |
3. Modifying Arrays We will look at the different characteristics of an array, such as array form, iteration, and loop. We will modify the arrays created to share additional features or set rules. |
4. Returning New Values In the previous video, you learned about modifying arrays; here, you will learn about creating different values in the arrays while keeping the original array intact. |
5. Iteration Methods We will look at methods that will loop over the items of an array and then run functions for each. |
6. Reducers Here, you will learn techniques to reduce an array to one single value using the reduce method. |
7. Map and forEach We will look at two more array methods, Map and forEach, which are iterations that loop over each array item and call back functions. |
8. Array Destructing In this video, we will look at destructing arrays and storing their values into variables. |
9. Operators: Unique Values with Set You will learn about creating a set that stores both primitive and object-type data of an array. |
10. Two-Dimensional Arrays We will create two-dimensional arrays and learn to populate and manipulate the data/values in these two-dimensional arrays. |
4. Functions
This section discusses objects and how various functions can be applied to alter the behavior of the objects. You will learn about built-in functions, arrow functions, and default parameter values.
1. The Global Object and Built-In Functions Here, we look at the flexibility of JavaScript with built-in functions and create our functions or access the built-in ones provided with the language. |
2. Function Expressions You will learn about the slightly modified way of writing functions: function expressions. |
3. Immediately Invoked Function Expressions After learning how to create an expression, we will look at how to invoke an expression immediately. |
4. Anonymous or Named Here, we will look at the benefits of using an anonymous or nameless function or expression versus a named function. |
5. A Function or Method We understand the fundamental difference between a method and a function and the benefits of using either. |
6. Arrow Functions Learn about the shorter way to write functions, called the arrow functions that were added to the functions, and understand the difference from regular functions. |
7. Default Parameter Values and Using Rest This video focuses on all the functional parameters, which are value placeholders. |
5. Events and the DOM
In this section, we discuss events and the document object model. You will learn about elements, adding, cloning, and deleting elements.
1. What Is the DOM? This video explains the document object model concept and how to use it in our code. |
2. Selecting Elements We understand an element, the types of elements in the DOM, and how to use the elements in the DOM interface. |
3. Changing Values and Attributes After learning about elements, you will learn how to change an element's values and attributes. |
4. Changing an Element's CSS We will look at changing the styles of the elements or their attributes. |
5. Creating New Elements Instead of using the built-in elements, we will look at creating our elements. |
6. Adding Elements to the Page This is a continuation of the previous video, where you learned how to create elements; now, we will look at adding the elements we made to the page. |
7. Cloning and Removing Elements You will learn to clone and delete elements that we created. |
8. Mini Challenge: Create a New Section We will work on a mini challenge to create a new section. |
9. Looping with DOM Elements After adding sections to our objects, we will look at learning to use a loop to reduce the code for manipulating the objects. |
10. Introduction to Events From this video, we will focus more on events, what they are, and how they are created and used in our code. |
11. Listening to Events We will look at how to listen to the events after understanding what events are and how to create them. |
12. Listening to Multiple Events and Event Data In the previous video, we listened to one event or element; here, we will look at multiple events. |
13. Event Propagation We will add an event listener to our project called Event Propagation. |
14. Running Events Once In this video, we will look at running an event a single time. |
15. Preventing Default Behavior and the Passive Option After triggering an event in the browser, you will learn how to prevent the default behavior and the passive option. |
16. Removing Event Listeners You will learn how to add the "once" option to our listeners and how to remove event listeners manually. |
17. HTML Collection or NodeList? You will learn the fundamental difference between an HTMP collection and a NodeList. |
18. Mini Challenge: Create a Dark Mode button We will work on a mini-challenge, "Create a dark mode button". |
6. Time to Practice
This is a practice section where we will create our video player project and the shape-drop game.
1. Video Player Project: Creating the UI In this video, you will learn to create our video player and create the user interface. |
2. Events, Properties, and Methods Here, we will look at the properties and methods used to create the events of our video player UI. |
3. Shape-Drop Game - Creating the UI We will create a fun game called the shape-drop game, and you will learn to make the user interface for the game. |
4. Shape-Drop Game - Drag and Drop Events You will learn to create drag-and-drop events and make the elements draggable. |
5. Shape-Drop Game - Handling the Score and End of Game With this video, let's learn how to prepare and handle the scoring system and game end. |
7. Loops and Conditionals
This section discusses loops, the different kinds of loops, the if/else statements, conditional statements, the while loop, the switch statement, and more.
1. For Loops In this video, you will learn about the different types of loops and focus on the "for" loop and look at a basic for loop. |
2. For-in and For-of Loops You will learn about two more types of loops, the "for-in" loop and the "for-of" loop, and understand the critical differences. |
3. While Loops Here, we will look at a similar loop called the while loop, a conditional loop based on a statement, and understand the fundamental similarities between the "if" statements and the "for" loop. |
4. if/else Statements In this lesson, you will learn about a conditional statement called the if/else statement. |
5. else/if Statements After learning about the if/else statement, we will look at the else/if conditional statement. |
6. The Switch Statement earn the Switch statement, which provides as many outcomes as possible based on a single conditional statement. |
7. The Conditional Operator (Ternary) Here, you will learn about the single-line operative called the ternary or conditional operator. |
8. Type Coercion and Conversion We will discuss object type coercion and conversion to other datatypes. |
9. Truthy and Falsey Here, we will look at how JavaScript does actions using true or false statements. |
10. Optional Chaining. In this lesson, we will look at gaining access to certain kinds of promises and objects nested inside objects. |
8. Objects in More Depth
This section focuses primarily on objects in detail, the kinds of objects, properties of objects, functions, looping with objects, dynamic, primitive, and reference types. You will also learn to compare objects.
1. Creating and Modifying New Objects You will learn about objects, their properties, and how to create and modify them. |
2. Object Constructor Functions Let's look into an object constructor function and how to create new objects with two different methods of creating variables. |
3. Object Prototypes In this lecture, we will see object prototypes in detail and in action with our project. |
4. Inheriting Object Properties Let's learn about inheriting properties of parent objects into newly created objects. |
5. Copying Object Properties Here, you will learn how to copy the object properties from one promise to another. |
6. CSS Style Objects Let's see how to add CSS styling to the elements we created in the DOM in the earlier lesson. |
7. Looping with Objects You will learn how to loop objects to use variables used repeatedly in the projects to avoid rewriting long codes. |
8. Dynamic Objects In this lesson, we will understand what dynamic objects are, how to create them, and how to use them to manipulate data types and variables. |
9. Primitive and Reference Types We will look at the primitive datatypes such as strings, Booleans, symbols, bigint, undefined, number, and null. |
10. Comparing Objects We will now compare and understand the behavior of objects. |
9. Speedy Chef Project
In this section, we will test what we have learned in a project called the Speedy Chef Project and place features based on what we have learned.
1. Speedy Chef Project Introduction We will begin to work on the Speedy Chef project using all the features learned so far. |
2. Listing Orders In this lesson, we will look at the listing and display all orders through the main browser after looping all the variables. |
3. Listing Orders Refractor You will learn about restructuring our code for the listing order to work correctly. |
4. Element Helper Function Let's learn how to save on much code and look at ways to outsource our functions to reusable functions. |
5. Selecting the Current Order You will learn how to create a new order and select the present orders on the Speedy Chef project. |
6. Set the Current Pizza Here, we will set the current pizza with all the options to create it. |
7. Split and Join Methods Here, you will learn how to split and join methods to divide or amalgamate an order based on preference. |
8. Adding Pizzas to the Oven The video takes us through creating the pizzas with various options and moving them from the kitchen area of the app to the oven part. |
9. Starting and Ending the Game You will learn to create functions that will start and end the game and clean up the interface to show the elements correctly. |
10. Math, Date, and Timers
This section continues with the Speedy Chef project, and we will look at how to use operators, dates, and timers.
1. Introduction to JavaScript Math In this video, we will discuss passing an array rather than the actual value inside an object, using math to compare objects. |
2. Generating New Pizzas and Orders with Math In this video, you will learn to generate new pizzas and orders in the Speedy Chef project. |
3. setInterval() After learning how to place orders randomly, you will learn to set intervals at which the functions would operate.Video 10.4: SetTimeout() |
4. SetTimeout() We will look at another function that triangulates between each call: the setTimeout() function. |
5. Clearing Timers The setInterval and setTimeout functions have clearInterval and clearTimeout functions, and you will learn how to clear the timers for both functions when we do not need them. |
6. Introduction to JavaScript Date You will learn about the built-in objects in JavaScript that can help us introduce dates, called the date function. |
7. Setting the Cooking Time with Date We will set up the cooking time of the pizzas in the Speedy Chef game with the JavaScript date function. |
11. Drawing with JavaScript
This section covers the basics of the canvas, and in the rest of the section, we will draw the pizzas for the Speedy Chef project.
1. Introduction to the Canvas and Coordinates This video covers the canvas basics and how to draw the pizzas for the Speedy Chef project. |
2. Setting Up the ingredients In this video, we will look at populating the ingredients array and drawing the ingredients on the canvas. |
3. Drawing Circular Ingredients Here, we will use the Switch statement and handle which ingredients have been switched in the Speedy Chef project. |
4. Drawing Multiple Pieces You will learn to use arrays to define the multiple pieces of the ingredients on the pizza (the canvas drawing). |
5. Clearing the Canvas In this lesson, you will learn how to clear the canvas and be able to draw the next object on the canvas. |
12. Finishing Touches
This section completes the Speedy Chef project, all the multiple things we need to check, and all the tests to be completed before finishing.
1. Wasting Pizzas In this video, we will look at all the checks we need to complete in the Speedy Chef project before adding the pizzas to the oven, and if the pizza is wrong, it will be wasted. |
2. Checking Steps This lecture demonstrates how to take steps to correct the waste pizzas in the previous video by adding the right ingredients to the pizzas in the Speedy Chef project. |
3. Completing Orders Once the correct ingredients are checked, you will learn how to complete an order and move on to the following order. |
4. Removing Orders from the Array Here, we will remove the completed orders from the list to allow new orders to be placed. |
5. Updating the UI and Stats We will look at creating a stats section at the end of the Speedy Chef project and how to update the user interface. |
13. Scope Hoisting Closures
In this section, we will understand the scope and the function of a scope and what variables hold in them.
1. Introduction to Scope This lecture introduces the concept of a scope, how it behaves differently from a group, and what has access to the variables in a group. |
2. Nesting Scope Here, you will learn about nesting statements inside other scopes and how access is passed down to each level. |
3. Block and Function Scope We will look at how functions behave differently to a block and learn about the function scope. |
4. Hoisting This is a revisit of the brief hoisting lecture from earlier. You will learn to set functions in two or more different styles and function expressions. |
5. Temporal Dead Zone The temporal dead zone is a difficult concept that is explained in detail. |
6. Closures Here, we compare standalone and nested functions, and you will learn to create a simple function to demonstrate the effect of closure. |
14. Async JavaScript
In this section, we focus on asynchronous JavaScript.
1. A Little Bit of Background In this lesson, we discuss callbacks, synchronous and asynchronous. This video explains these terms and what exactly each term does. |
2. Callbacks This video introduces us to callback functions, a function that is the next step after a function has been completed. |
3. Promises You will learn how a promise handles the outcome of a function, irrespective of the time taken to complete the function. |
4. The Promise Constructor In this lecture, you will learn how to create or construct the promise to handle exceptions for the functions. |
5. Handling Multiple Promises We will understand how multiple functions running simultaneously are handled by the API such that it waits for one to complete before moving to the next. |
6. Async/Await We will briefly look into the asynchronous code, basically promises that run behind the scenes and are easier to read for developers. |
7. Handling Multiple Awaits We will look at the multiple await responses defined with promises that run in a particular sequence in the function. |
8. Error Handling This video is going to demonstrate ways to handle the errors in the promises code. |
15. More Practice
This section demonstrates how to create the 'leaving so soon' project and the image carousel using the methods learned from the previous sections.
1. Leaving So Soon Project This is the first project of the final section, which is an exit-intent popup to grab user attention. |
2. Image Carousel: Setting the Images In the next project, we will build an image carousel, which will combine all the skills learned through the course. |
3. Image Carousel: Creating the Arrows You will learn to make improvements to the image carousel in this video. We will also display the left and right arrows to move images. |
4. Image Carousel: Reordering the Images We will create new arrays by rearranging the order of all the images in the carousel using the left and right arrows that we created in the previous lesson. |