Getting Started with JavaScript : A Free Course For Beginners

Whether you're a seasoned programmer looking to enhance your JavaScript skills or a complete beginner with no programming background, this course covers all the basics for you. Furthermore, it will guide you through the process of becoming a proficient JavaScript developer.

Intro to JavaScript: Syntax and Variables

Declaring variables in JavaScript is a fundamental concept. But how do you do it?

In JavaScript, variables are declared using the var, let, or const keyword, followed by the variable name and, optionally, an initial value.

Let name = “jerry”;

This is a basic concept that you will be using quite often, so keep that in mind.

How to Perform Basic Calculations Using JavaScript?

For basic calculations, you'll need to employ arithmetic operations. In JavaScript, you'll use + for addition, - for subtraction, * for multiplication, and / for division.

Here's an example of a simple calculation in JavaScript:

Let x=3;

let y=5;

let result=x + y; // result will be 8

In JavaScript or any programming language, even the slightest mistake can cause a bug. So, using unnecessary capital letters, full stops, commas, or even semicolons can cause functional issues.

How To Create Different Code Blocks Based On A Condition In JavaScript?

Within JavaScript, users can establish logic and conditions. Robust conditional code often involves if-else statements, which developers can use to define various conditions.

Here's a straightforward example demonstrating code blocks based on conditions:

let age=20;

if (age >= 18) {

console.log("You are an adult.");

} else {

console.log("You are a minor.");

}

How to Repeat a Code Block Multiple Times in JavaScript?

In JavaScript, loops are utilized for repetition. If you've included a piece of code or logic that you'll use repeatedly throughout your program, a loop can be incredibly useful. Typically, "iteration" is the term used to describe the repetition of a set of instructions.

Here is a brief example of a loop in JavaScript:

for (let i=0; i < 5; i++) {

console.log(i);

}

What is function in JavaScript?

The function is used for recycling the code. It is a block of code that is fully reusable and can be patched anywhere to perform a specific task. The function is a great way to organize code as it promotes the reusability of code.

Here is an example of a function:

function addNumbers(a, b) {

 return a + b;

}

let sum=addNumbers(3, 4); // sum will be 7

How to Use an Array in JavaScript?

An array is a global object that is used for data storage. To denote the array in JavaScript, you will notice square brackets. Moreover, commas will separate each element within the array of square brackets. 

For reference, here is a simple example of an array

let animals=["lion", "tiger", "dog"];

How to Access and Modify Elements within an Array?

The simplest way to access the array is via loop or index. To modify the array, you can use using direct assignment, splice, push, and pop. The index in a code starts with 0, while splice(), push(), and pop() are denoted with round brackets.

Here is a simple example of accessing and modifying the element within an array:

let animals=["lion", "cat", "leopard"];

console.log(animals[1]); // Output: cat

animal[2] = "cheetah"; // Modifying the third element

console.log(animals); // Output: ["lion", "cat", "cheetah"]

How to Modify the Text of an HTML Element Using JavaScript?

To modify the text, you need to scan through all the elements on the page. You can simply use the Document Object Model (DOM) and then select the HTML element that you want to alter. This will help you update its content easily without wasting time on scanning manually.

Here is an example of text modification of an HTML element:

Hello, world!

let paragraph=document.getElementById("firstParagraph");

paragraph.textContent = "Updated text";

How to Add an Event Listener to a Button in Javascript?

To add an event listener to a button, you need to use the addEventListerner method. To make this possible, you will be using Syntax. element.addEventListener(event, function, useCapture). You can simply type the event and then call the function that you want to add to the event.

Here is a quick overview of how you can do it:

Click me

let button=document.getElementById("myButton");

button.addEventListener("click", function() {

console.log("Button clicked!");

});

How to Store Data in the Browser's Local Storage with JavaScript?

With JavaScript, you will also get the localStoarge object. This helps sort data in the local browser to avoid confusion. A favorable approach is to use the setItem method for data storage. Once you have saved the data, you can retrieve it by using the getItem method.

Keep in mind that once you store the data in local storage, it will continue to exist even after refreshing the page or closing the browser. Localstoarge is a great way to store settings, user presence, or any data form that needs to be used across various sessions.

Here is a quick example to help you understand this:

// Saving data to local storage

localStorage.setItem("username", "Jerry");

// Retrieving data from local storage

let username=localStorage.getItem("username");

console.log(username); // Output: Jerry

What are Promises in JavaScript?

Using promises is a great way to sort asynchronous operations and help with the flow of asynchronous code. Promises help clean the data and improve the readability by providing an easy alternative to old-school callback-based methods.

It is an object that represents the competition or incompletion of any asynchronous operation, as well as its resulting value. It has now become a standard feature in JavaScript. You can easily spot promises in modern applications.

Promises allow the program to chain up several asynchronous operations together. This eventually improves the readability of the code and makes it appear sequential. A good way to commit this is by using .then() method. For this, you will set parameters by using two optional callback functions. Both callback functions are important because they will be used to handle the fulfilled state and rejected state.

Promises have three major states. It can be rejected, pending, or fulfilled. In case of pending promises, the user will see the asynchronous operation as ongoing. Moreover, fulfilled represents successful completion of operations, whereas rejection means there is an error, or the operation has failed.

For the reference, here is a quick example:

const fetchData=new Promise((resolve, reject) => {

 // Simulating an asynchronous operation

setTimeout(() => {

   const data="This is the fetched data";

resolve(data); // Promise fulfilled

 }, 2000);

});

fetchData.then((data) => {

console.log(data); // Output: This is the fetched data

}).catch((error) => {

console.error(error);

});

FetchData promise in the above example is an asynchronous operation. Once operational is successful, it will call the resolve() function, and promises will be fulfilled with proper data. After resolving (), the programmer can use the .then() method to handle fulfilled promises. This will eventually log the data to the console.

Promises help in chaining various asynchronous operations. This is done by getting back to the new promise within .then() method. The process might seem a little challenging, but it can help the programmer perform step-by-step operations. Eventually, this enables you to handle all the dependent asynchronous tasks as well.

One of the leading reasons programmers use promises is to make their code appear cleaner, improve readability, and make asynchronous code easy to handle. Eventually, when there is an error, it can be spotted and resolved easily. Moreover, it enables the smooth flow of execution.

How Asynchronous in JavaScript Work?

Within JavaScript, promises and callbacks are used to handle asynchronous tasks. You will get to use this to make API requests and work on time-consuming operations. Promises are used to handle asynchronous code. It helps make the code appear simpler and readable without complicating things.

For the reference, here is a simple example of Asynchronous in JavaScript:

function fetchData() {

 return new Promise((resolve, reject) => {

   // Simulating an asynchronous task

setTimeout(() => {

     let data="This is the fetched data";

resolve(data);

   }, 2000);

 });

}

fetchData()

.then((data) => {

console.log(data); // Output: This is the fetched data

 })

.catch((error) => {

console.error(error);

  });

As mentioned earlier, committing to an asynchronous operation promises to help chain all the .then() and .catch() methods together. This also helps in sorting out any errors that might happen while handling asynchronous operations.

Async vs. Await In JavaScript?

Small features like async and await are used to make handling asynchronous code easier and organize the code better. Both async and await were first introduced in ECMAScript 2017 (ES8). Since their introduction, they have gained popularity as simple elements that can make code writing less complex, cleaner, and simpler to read.

It is important to remember that both these features work together, helping to make the code appear more synchronous and sequential.

Although async vs. await are used together, they serve different purposes. Here is everything that you need to know about them.

async

await

1. It is used for declaring an asynchronous function.
2. It helps in writing asynchronous code with a more synchronous style.
3. The async function returns to promise, and the programmer can use await to put the execution on hiatus.
4. Using await will offer promise enough time to resolve or reject before continuing.

1. It is only used inside an async function.
2. Await helps in pausing the execution so the promise can reach the fulfillment or rejection phase.
3. Once a promise is resolved, it restarts the execution of the function.
4. Finally, the promise assigns value to the variable following the await keyword.

With a combination of async and await, you can write asynchronous code that works just like synchronous code. Eventually, you will have a code that is easy to understand and maintain. You can also avoid using promise changing and nested callback functions by utilizing async and await.

Here is an example of async and await:

function fetchData() {

 return new Promise((resolve, reject) => {

setTimeout(() => {

resolve("Data fetched successfully");

   }, 2000);

 });

}

async function getData() {

 try {

   const data=await fetchData();

console.log(data); // Output: Data fetched successfully

 } catch (error) {

console.error(error);

 }

}

getData();

Within the above-mentioned example, you will notice the getData function mentions the async function. Within the same function, you can use the await keyword that will put the execution on hiatus.

This will further trigger the fetchData promise to conclude. After promise fulfillment, the data variable receives the resolved value. Now the data will work just like a synchronous operation.

When you use async and await, the syntax and structure of asynchronous code are simple. This further enhances the code's readability, allowing the programmer to write cleaner code.

One of the most important reasons most programmers use async and await is because it promotes a sequential and linear coding style without disrupting the non-block nature of asynchronous operations.

What Are Anonymous Functions?

As the name indicates, Anonymous Functions don’t have a name. Within JavaScript, this function mainly refers to functional expression. Contrary to anonymous functions, you will also notice named functions that are defined with function keywords followed by a name.

You can easily distinguish a named function from an anonymous function with the help of a name at the end.

Here is what an anonymous function looks like:

const greeting=function() {

console.log("Hello, world!");

};

greeting(); // Output: Hello, world!

Within the above-mentioned example, you will notice the anonymous function and its assigned variable greeting. Since the function does not have a name after the function keyword, this will be an anonymous function.

To tag the anonymous function, you then need to use parentheses () just like any other function. After tagging, this will trigger and print "Hello, world!" to the console.

The biggest reason for using an anonymous function is passing a function for an argument to any other function. It can also help in defining the function inline when there is no specific name.

Here is a way to use it:

setTimeout(function() {

console.log("Delayed execution!");

}, 2000);

The above-mentioned example uses an anonymous function for the first argument and then passes it to the setTimeout function. There is generally a 2000 milliseconds (2 seconds) break in the execution of the anonymous function.

You can also use anonymous functions to pass as arguments from other functions, assign to a variable, or just to return value. It offers flexibility and helps in defining the functions on the fly while staying anonymous.

In some cases, using an anonymous function is inevitable and can make things easier. However, keep in mind that using an anonymous function will affect the code's readability. Eventually, when there is an error, it will also be difficult to resolve. This is the reason most experts prefer using the named function.

What are APIs and their usage in JavaScript?

Application Programming Interfaces (APIs) allow seamless communication between different software applications. Within JavaScript, APIs are leveraged to recover data from outside services. APIs are also used within web applications for internal communication.

Here is an example of API using the fetch function:

fetch("https://api.example.com/data")

.then((response) => response.json())

.then((data) => {

console.log(data); // Output: The data received from the API

 })

.catch((error) => {

console.error(error);

 });

The above-mentioned example is asking for a GET request from API with the help of a fetch function. With the use of API requests, you can easily retrieve data i.e. product information, user ID, or any other information from your web page.