Javascript Complete Guide With Practical Javascript Projects

In this video we are going to dive Javascript codes.

In this video we are going to write our first codes.

Let’s talk about what is Javascript. In this video we are going to learn some theoretical stuff.

Let’s learn how to link our Javascript file to HTML file.

Let’s learn about values and variables in Javascript language.

In this video we are going to learn about data types. Numbers, booleans etc.

In this video we are going to take a look at the three different ways of declaring variables in JavaScript.

In this video we are going to learn some more JavaScript fundamentals. Let's learn about some basic operators.

In this video we are going to talk about the precedence of different operators.

In this video we are going to talk about strings and template literals. Strings are a very important part of programming. And so let's now learn about an easy way to build strings, using something called template literals.

In this video let's now make coding even more fun and actually take decisions with our code to make it look a lot more real.

In this video, we need to go back to value types. So types are one of the fundamental aspects in programming. And converting between types is something that we do in every programming language.

We talked about type conversion and coercion to numbers and to strings. But we didn't learn booleans yet. That's because we need to learn the concept of truthy and falsy values first. And so, that's what we're gonna do now.

We have only used comparison operators to take decisions with if else statements. But let's suppose we want to check if two values are actually equal, instead of one being greater or less than the other. And for that we have different equality operators.

When we learn about if-else statements, comparison and equality operators and boolean values. We also need to learn about logic. And in particular about boolean logic. So let's do that in this video.

Logical operators are really important in Javascript language to make decisions. Now let’s talk about that.

In this video let's learn about the switch statement, which is an alternative way of writing a complicated if/else statement, when all we want to do is to compare one value to multiple different options.

Now that we're getting more comfortable with JavaScript, it's time to learn about a more theoretical concept. And that's the difference between statements and expressions.

We already saw two ways of writing conditionals. The regular if/else statement and the switch statement. But there is another one. And that is the ternary operator.

Now before continuing to learn JavaScript, in this new section, we should first activate a special mode in JavaScript, called Strict Mode.

The fundamental building block of real world JavaScript applications are functions. They are one of the most essential concepts in the language. And so let's study functions over the next couple of videos.

In JavaScript, there are different ways of writing functions. And each type of function works in a slightly different way. Now let’s learn about declarations and expressions.

So we learned about function declarations and expressions in the last video. But there is actually a third type of function that was added to JavaScript in ES6. And that's the arrow function.

Let's now take functions even one step further and call one function from inside another function. And this is something that we do all the time in JavaScript.

To finish this part about functions, let's review everything important that we learned so far. In order to make sure that you really understand functions before we move on to other topics.

Data structures are the most important topic in Javascript. Let's now talk about our first data structure. And that's gonna be Arrays.

JavaScript has some built in functions that we can basically apply directly on arrays. And these are called methods. And we can think of methods as array operations basically. So let's now learn some useful array methods.

After arrays, it's now time to learn about another data structure in JavaScript, which is objects.

In this video, we are going to learn how to retrieve data from objects. And also how to change data in objects, using both the dot and the bracket notation.

In this video let's keep exploring objects. And this lecture will bring us to object methods.

When we talked about the if else statement, I mentioned that it's a control structure. And also, there are more control structures. One of the other control structures are loops. And loops are our final big topic in this section.

Let's now explore some more features of the for loop and also create a somewhat more useful example.

In this video, we're gonna do two interesting things. First, we will loop over an array backwards, and then second we will also create a loop inside another loop.

So we learned all about the for loop and even created a loop inside a loop. But there is another type of loop in JavaScript and that's the while loop. So let's explore that one now.

Welcome to the first project that we're gonna build in this course. And let's get started right away.

So in this section, we're going to make JavaScript interact with a webpage for the very first time. And the technical term for that is doing DOM Manipulation. Let's learn what the DOM actually is and how it works.

Now that we have a better understanding of what DOM and DOM manipulation. Let's now actually select and manipulate some more elements.

I Let's now make our application actually do something when we click on the button. So this is going to be the first time that our code reacts to something that happens in the DOM. For that, we will use event listener.

Let's now continue building our game and actually implement the game logic itself. First, we will implement compare logic.

In the last video, we implemented the compare logic. We compare input value to hidden number. And due to the comparison, we printed a status message. Now, let's move on to the next step. Which is to work with a score here.

The DOM actually also includes CSS styles. And so with DOM manipulation, we can also change styles. So let's try that out now

Let's now implement the functionality of reset the application.

So let's now implement the last missing functionality in our game, which is the highscores.

To finish this project, let's now learn about the refactoring in order to get rid of some of our duplicate code.

Now we're going to do a nice project again. The name of our project is rock paper scissors.

In the previous video, we talked about the details about the application we will do. Now let's get to work. Let's define the elements we will use.

We defined the DOM elements that we will use in the previous video as variables. Now let's start creating the logic of our game. First of all, let's make computer and player choose.

In the last video, we created the computer's move randomly and we made our own move by clicking the rock paper and scissors buttons. Let's continue now.

In the previous video, we created our play game and display messages functions. When we clicked on the rock paper and scissors buttons, we displayed the messages on the screen according to the selections. Now we can start coding the actual logic of our game. Let’s compare choices and get result.

In our previous video, we determined the winner of the game and showed it on the page. Now we will update the score and build the game over functionality.

In the previous video, we completed all the functions of our game except the reset function. In this video, let's quickly create the reset function and finalize the project.

As an introduction to this theory section, I want to start with a very cool and very high-level overview about the JavaScript language.

We talked about the JavaScript engine in the last video. But what is that engine actually? And what is a JavaScript runtime? Also, how is JavaScript code translated to a machine code? So that's just some of the topics that we talked about in the last video. And so now let's find out how they work in this video.

In this video, let's answer the question. How is JavaScript code executed? We already know that it happens in a call stack in the engine, but let's dig a bit deeper now.

In this lecture, let's answer the question. How is JavaScript code executed? We already know that it happens in a call stack in the engine, but let's dig a bit deeper now.

In this video we need to talk about is a very misunderstood concept in JavaScript and that is hoisting.

The this keyword, is an extremely important concept to understand in JavaScript. And many beginners find it especially difficult. But don't worry, It's actually not that hard if you know exactly how the this keyword works.

Let's now see the rules of how the this keyword is defined in action.

Let's start this video by learning about array destructuring.

We talked about these destructuring arrays, but we can also destructure objects. So let's do that now.

Let's now talk about the amazing spread operator. We can use the spread operator to basically expand an array into all its elements. Basically unpacking all the array elements at one.

Let's now talk about the rest operator. And the rest operator looks exactly like the spread operator. So it has the same syntax with the three dots, but it actually does the opposite of the spread operator.

Let's talk about the AND operator and the OR operator. And how we can use them for something called short circuiting.

In this video we will learn how to work with strings. And so we're gonna be taking a look at a couple of useful string methods.

Let's continue with some simple string methods. And first ones are for changing the case of string.

Let's start by learning about one of the most powerful string methods, which is split.

Let's begin this video by introducing a couple of simple and easy-to-understand array methods. These methods: slice, splice, reverse and concat.

In JavaScript, the "forEach" method is a powerful tool that allows developers to iterate over elements in an array and perform operations on each element individually. This video aims to provide an in-depth understanding of the "forEach" method and its practical applications.

One such essential method is the map function. The map function allows developers to transform and manipulate array elements effortlessly, providing a concise and elegant solution. In this video, we will explore the map function in JavaScript and various practical examples to demonstrate its utility.

In this video, we are going to learn about filter method. Filter function, which allows developers to easily extract elements from an array based on specific criteria. With its concise syntax and powerful capabilities, the filter function simplifies array manipulation tasks, making code more readable and efficient. In this video, we will explore the filter function in JavaScript in depth, purpose, and various examples to demonstrate its practical usage.

Reduce method which allows developers to transform and aggregate arrays into a single value. In this video, we will explore the `reduce` method and delve into its various applications. By the end, you will have a solid understanding of how to leverage the `reduce` method to simplify your code and enhance your JavaScript programming skills.

One such method is the "find" method, which allows developers to search through an array and locate the first element that satisfies a given condition. The "find" method is particularly handy when dealing with complex data structures and is widely used in modern JavaScript applications. In this video, we will explore the "find" method in detail, understand its syntax and functionality, and provide basic code examples to demonstrate its practical usage.

JavaScript provides several built-in methods to perform various operations on arrays, including the popular `flat` and `flatMap` methods. These methods are particularly useful when dealing with nested arrays or when you need to transform and flatten arrays in a concise and efficient manner. In this video, we will explore these methods in detail, along with basic code examples to illustrate their usage.

In the world of programming, sorting arrays is a fundamental task that developers encounter frequently. Whether you're organizing data, implementing search algorithms, or optimizing performance, having a solid understanding of array sorting techniques is crucial.

Let's start this section by understanding what asynchronous JavaScript actually is, and also learn about the most popular use cases of asynchronous JavaScript, which is basically to make so-called Ajax calls to APIs.

Now that we know about AJAX and API's, let's actually make our first API call.

In this video, let's create a sequence of AJAX calls, so that the second one runs only after the first one has finished.

In this video, let's learn about a modern JavaScript feature called promises, so that we can escape callback hell.

In this video, we will learn how to consume a promise. And in this case, we will consume the promise that was returned by the fetch function.

Let's now learn how to chain promises in order to also show the border countries of the initial country that we give to the function.

Until now, we have always assumed that everything went well with our AJAX calls, so we never handled any errors. However, an important part of web development is to actually handle the errors. Because it's very common that errors happen in web applications. And in this video, let's talk about how to handle errors in promises.

In this video, we're gonna fix the request 404 error that we saw happening in the last video.

JavaScript is the number one programming language for internet applications.

Here's how a JavaScript code works, not just how it works. Because in today's JavaScript world, besides writing a code, you need to know how to debug this topic and be able to read every written JavaScript code.

JavaScript is a text-based computer programming language used to make dynamic web pages. A must-learn for aspiring web developers or programmers, JavaScript can be used for features like image carousels, displaying countdowns and timers, and playing media on a webpage. With JavaScript online classes, you can learn to build interactive web applications, choose the best framework, and work with other programming languages like HTML and CSS.