JavaScript Full Course | Learn JavaScript In 4 Hours | JavaScript Tutorial For Beginners|Simplilearn

Introduction to JavaScript

This section introduces JavaScript, its purpose and popularity.

• JavaScript is a powerful client-side scripting language used for enhancing user interaction with web pages.

• It is lightweight, object-oriented, open-source and cross-platform compatible.

• JavaScript has a large community support and is used in various fields such as web development, mobile application development and game development.

Topics Covered in the Tutorial

This section provides an overview of the topics covered in the tutorial.

• The tutorial covers fundamental topics of JavaScript including arrays, loops, objects, functions, closure promises and async await.

• Other topics include this keyword form validation regular expressions email validation and javascript dom tutorial.

• Lastly, it covers the javascript learning path and how to become a full stack developer.

What's In It For You?

This section explains what learners can expect from this tutorial.

• Learners will understand what JavaScript is and why it is so popular these days.

• They will learn how to write their first program in Javascript which will print "Hello World" on the browser window.

Understanding JavaScript

This section explains what Javascript actually is.

• Javascript is a dynamic computer programming language that is lightweight and object-oriented.

• It allows client-side script to interact with users making dynamic pages possible.

Why Learn JavaScript?

This section explains why learning Javascript can be beneficial for learners.

• Being the most popular language in the world, Javascript has a huge fan base with great career opportunities for developers.

• It benefits from large community support and can be used in various industrial fields such as web development, mobile application development and game development.

Writing Your First JavaScript Program

This section explains how to write a simple "Hello World" program in Javascript.

• To execute a simple "Hello World" program, learners need a text editor such as VS Code.

• The program requires adding the Javascript code to the HTML code and then printing out the words "Hello World" on the browser window.

• Learners can add the HTML boilerplate in this file and insert the script tag to insert Javascript into an HTML page.

• They can call a Javascript function that is document.write which writes the string to our HTML page.

Conclusion

This section concludes the tutorial.

• The tutorial covers fundamental topics of JavaScript including arrays, loops, objects, functions, closure promises and async await.

• It also covers other topics such as this keyword form validation regular expressions email validation and javascript dom tutorial.

• Lastly, it covers the javascript learning path and how to become a full stack developer.

Introduction to Arrays

In this section, we will learn about arrays in JavaScript, their purpose and how they are used.

What is an Array?

• An array object allows you to store multiple values in a single variable.

• It stores a fixed size sequential collection of elements of the same type.

• An array is used to store a collection of data and it uses only integers as element indices.

Array Operations

• Various operations can be performed on an array in JavaScript.

• To create an array, first create a folder and then create a file within that folder using Visual Studio Code editor.

• Use the keyword let to indicate that the array can be changed throughout the program.

• Display the created array using document.getElementById().innerHTML property.

Accessing Array Elements

• Create another variable and assign it with an element from the previously created array using its index number.

• Display this variable using document.getElementById().innerHTML property.

The Length Property

• Use the length property to retrieve the length of an array.

• Assign it to a variable and display it using document.getElementById().innerHTML property.

Array Operations

In this section, the speaker explains how to perform array operations in JavaScript.

Retrieving an Element from an Array

• To retrieve an element from an array, use the index of the element.

• Use array.length - 1 to get the last element of an array.

• Use console.log() to display the retrieved element and save it in a variable if needed.

Looping Over an Array Item

• Use .forEach() method to loop over each item in an array.

• The .forEach() method takes three parameters: item, index, and array.

• Use arrow function syntax with .forEach() method to display each item and its index using console.log().

• Open developer options by clicking F12 on your web page to view console output.

Array Methods

Converting Array into String using toString()

• Use .toString() method to convert an array into a string.

• Replace the original array with a string representation of that array using .toString().

• Display the new string representation of the array using console.log().

Removing Elements from Arrays Using pop() and shift()

Removing Last Element Using pop()

• Use .pop() method to remove the last element from an array.

• Save removed element in a variable if needed.

• Display removed element on web page or console using console.log().

Removing First Element Using shift()

• Use .shift() method to remove first element from an array.

• All elements' indexes are reduced by one after removing first element.

• Display removed first element on web page or console using console.log().

Adding Elements to Arrays Using push()

Adding Element at End of Array Using push()

• Use .push() method to add new elements at end of arrays.

• Add new element as an argument to .push() method.

• Display updated array on web page or console using console.log().

Array Methods

In this section, the instructor explains various array methods such as unshift, concat, sort and reverse.

Unshift Method

• The unshift method is used to add an element to the beginning of an array.

• It increases the array index by one.

Concat Method

• The concat method is used to merge two different arrays into a single array.

• A new array is created after concatenation.

• The original arrays remain unchanged.

Sort Method

• The sort method sorts the entire array in ascending order.

• It does not create a new array but modifies the original one.

Reverse Method

• The reverse method reverses the elements in an array.

• It sorts them in descending order.

Map, Reduce and Filter Methods

In this section, the instructor explains map, reduce and filter methods for arrays.

Map Method

• The map method creates a new array from an existing one by applying a function to each element of the first array.

• It does not change the original array.

Filter Method

• The filter method applies a conditional statement against each element in an array.

• If it returns true, that element gets pushed onto the output array.

• If it returns false, that element does not get pushed.

Defining and Using Functions

In this section, the speaker defines a function and demonstrates how to use it.

Creating a Function

• The comp function is defined with the parameter value.

• The sum function is defined with parameters total and value.

Using a Function

• The comp function is used to filter an array based on whether each element is greater than 4.

• The reduce method is used to add all elements of an array together using the sum function.

Introduction to Loops

In this section, the speaker introduces loops and explains the difference between entry control loops and exit control loops.

Types of Loops

• Entry control loops check the test condition before executing code, while exit control loops check after executing code.

• A for loop executes a piece of code as long as a certain condition is met.

For Loop Example

• An example for loop in JavaScript is demonstrated in VS Code.

• A variable x is declared, followed by a for loop that iterates from 0 to 9.

JavaScript Loops

In this section, the speaker explains the concept of loops in JavaScript and demonstrates how to use for and while loops.

For Loop

• A loop that executes as long as the condition is met.

• The counter variable is incremented by 1.

• Inside the loop, the value of x is printed.

While Loop

• Similar logic to a for loop.

• The variable whose value keeps changing comes first, followed by the ending condition which is the maximum value a variable can reach.

• The code inside braces is executed if the condition holds true.

Do While Loop

• Code is executed first before checking the condition.

• An exit control loop where code gets executed at least once.

Breaking Out of a Loop

• "Break" keyword used to break out of a loop.

• Example code prints values between 1 to 10 and breaks out at value 5.

Loops and Objects in JavaScript

In this section, we will learn about loops and objects in JavaScript. We will start by understanding how to use for loops and how to skip a loop cycle. Then, we will move on to learning about JavaScript objects, including what they are, how to create them using different methods, their properties, methods, and accessors.

For Loops

• A for loop is used to execute a block of code repeatedly.

• To increment the value of x within the loop, we can use "x++".

• To display the value of x on the console within the loop and break out of it if x equals 5, we can use "console.log(x)" and "break".

Skipping a Loop Cycle

• We can skip a particular loop cycle using the keyword "continue".

• To skip displaying 3 in our for loop that displays values from 1 to 10, we can use "if (i === 3) continue; ".

JavaScript Objects

• A JavaScript object is like a real-world entity having state and behavior.

• There are three ways of creating a JavaScript object: using object literals, constructor functions or classes.

• Properties define an object's characteristics while methods define its behaviors.

• Accessors are used to get or set the values of an object's properties.

Creating a JavaScript Object Using Object Literals

• We can create an object using object literals by defining its properties inside curly braces "".

• We can access the properties of an object using dot notation or bracket notation.

Overall, this section covers the basics of loops and objects in JavaScript. It is important to practice these concepts to gain a better understanding of how they work.

Creating JavaScript Objects

In this section, the speaker explains three different ways to create a JavaScript object and how to define its properties.

Object Literals

• An object can be created using an object literal.

• To display the message, use document.getElementById and pass the ID as demo.

• The message can be displayed by concatenating strings with variables.

Using the New Keyword

• Another way to create an object is by using the new keyword.

• Define properties of the object using dot notation.

• Display the message in a similar way as before.

Object Constructor

• A function can be used as an object constructor to create and define a JavaScript object.

• Use this keyword inside the function to define properties of the object.

• Pass parameters while creating an instance of an object.

Object Properties

In this section, the speaker explains how to add, update or delete properties of a JavaScript object.

Updating Properties

• Properties of an existing object can be updated by assigning new values directly using dot notation.

Assigning Property Values to Variables

• Property values can also be assigned to variables for easier manipulation and display.

Directly Assigning Properties to Variables

In this section, the instructor demonstrates how to directly assign properties to variables in JavaScript objects.

Directly Assigning Properties to Variables

• We can use x = h to directly assign a property to a variable.

• This is another way of accessing object properties.

• The assigned property can be updated or deleted unless it is read-only.

Object Methods in JavaScript

In this section, the instructor explains what object methods are and how they work in JavaScript.

Object Methods

• A JavaScript method is an action that can be performed on an object.

• An example of an object method is demonstrated using a demo code.

• A new HTML file called "objects_methods" is created for the demo.

• A function named "sayHi" is created as an object method that displays a message using alert().

• The previously created method is added as a new property called "message" using user.message = sayHi.

• The message property value can be displayed by clicking on a button with the ID "clickMe".

Getters and Setters for Object Accessors

In this section, the instructor explains what getters and setters are and how they work in JavaScript.

Getters and Setters for Object Accessors

• Getters allow getting the value of a property in a JavaScript object while setters allow setting the value of a property of a JavaScript object.

• An example of getters and setters usage is demonstrated using another demo code.

• A new HTML file called "object_accessors" is created for the demo.

• A new object named "car" with two properties ("model" and "color") is created.

• Getters and setters are used to access and modify the values of these properties.

Accessing Properties with Getters and Setters

In this section, we learn how to access properties using getters and setters in JavaScript.

Using Getters to Access Properties

• Use the get keyword to access properties.

• Example: get fuel() return this.fuelType;

• Display the value using document.getElementById("demo").innerHTML = car.fuel;

Using Setters to Assign Values to Properties

• Use the set keyword to assign values to properties.

• Example: set fuel(fuelType) this.fuelType = fuelType;

• Assign a value using car.fuel = "petrol";

• Display the updated value using document.getElementById("demo").innerHTML = car.fuel;

Introduction to JavaScript Functions

In this section, we learn about JavaScript functions and their syntax.

What are JavaScript Functions?

• A group of reusable code that can be called from anywhere in your program.

• Syntax:

function functionName(parameterList)

// function body

Creating a Simple Function

• Create a function that returns the square of a number.

• Example:

function myFunction(value)

document.getElementById("demo").innerHTML = value * value;

• Call the function using myFunction(5);

Functions in JavaScript

In this section, we learn about functions in JavaScript and their different types.

Function Expressions

• A function expression is a function that is assigned to a variable.

• To execute the function, we call the variable with parentheses.

• We can also assign the variable to another variable and call it instead.

Function Constructor

• Functions can also be defined using a built-in JavaScript function called "Function".

• The syntax for creating a function constructor involves using the keyword "new" followed by the "Function" keyword and passing parameters.

• We can then call the function like any other function.

Self-invoking Functions

• Self-invoking functions are functions that are invoked automatically without being called.

• They are enclosed within parentheses to indicate that they are self-invoking.

Functions as Values

• In JavaScript, functions can be treated as values.

• We can define a function separately and then assign it to a variable or pass it as an argument to another function.

Functions in JavaScript

In this section, the speaker explains how to use functions as values and objects in JavaScript. They also introduce arrow functions.

Using Functions as Values

• The product function returns the product of two numbers.

• The value returned by a function can be used as a variable.

• A function can be defined to return a value that is multiplied by another value.

Functions as Objects

• A JavaScript function is a special type of object called a "function object."

• A function includes a string that holds the actual code, which is the body of the function.

• The syntax for creating a new function object involves using the new keyword and passing in parameters and the body of the function.

• An alert message can be used to call the newly created function.

Arrow Functions

• Arrow functions are more compact and precise than regular functions.

• Arrow functions cannot be used as methods or constructors.

• When using arrow functions, it's recommended to use const.

• The syntax for an arrow function involves providing its name with an equal sign followed by an argument list and then defining its expression using an arrow icon.

Arrow Functions and Generator Functions

In this section, the speaker discusses arrow functions and generator functions in JavaScript.

Arrow Functions

• Arrow functions are a shorthand way of writing function expressions.

• They have a shorter syntax compared to regular functions.

• They do not have their own "this" value. Instead, they use the "this" value of the enclosing lexical context.

Generator Functions

• A generator function can return multiple values on demand using an asterisk to indicate that it is a generator function.

• The main method of a generator function is the next method which runs execution until the nearest yield statement and pauses execution while returning yielded values to outer code.

• The result of the next method is always an object with two properties: value (the yielded value) and done (true if finished or false otherwise).

Predefined Functions

In this section, the speaker discusses predefined functions in JavaScript.

Eval Function

• Eval evaluates a string expression and returns its value. It takes an expression as its argument within eval(). If the result is not a string, it's returned as-is; if it's a string, it's evaluated as JavaScript code.

ParseInt Function

• ParseInt converts strings to integers with optional radix parameter for specifying base number system (e.g., binary, decimal, hexadecimal).

PassFloat Function

• PassFloat converts strings to floating-point numbers with optional radix parameter for specifying base number system (e.g., binary, decimal, hexadecimal).

Escape and Unescape Functions

• Escape encodes a string by replacing certain characters with escape sequences.

• Unescape decodes an escaped string back to its original form.

JavaScript Built-in Functions

In this section, the instructor explains three built-in functions in JavaScript: eval(), parseInt(), and parseFloat().

Eval()

• eval() function evaluates an expression and returns a value.

• It can execute any code passed to it as a string.

• It is not recommended to use eval() due to security risks.

ParseInt() and ParseFloat()

• parseInt() function parses a string argument and returns an integer of the specified radix or base.

• The syntax includes the keyword parse and the string within parentheses.

• parseFloat() function passes a string argument and returns a floating-point number.

• The syntax has the keyword parseFloat along with the string within parentheses.

Understanding Closures in JavaScript

In this section, the instructor explains closures in JavaScript.

Variable Scope

• JavaScript defines two scopes: global scope and local scope.

• Global variables are declared outside of functions, while local variables are declared within functions.

• Local variables can only be accessed within their respective functions.

Closures

• Closures allow inner functions to access outer function's variables.

• A closure has three scope chains: its own, outer function's, and global variables.

• References to these variables are stored in a stack called the scope chain.

JavaScript Functions

In this section, the speaker explains how to call a function and store its return value in a variable. They also introduce the concept of closures.

Calling Functions

• To call a function, assign its return value to a variable using the syntax variable = functionName().

• The returned value can then be used later in the code.

Closures

• A closure is when an inner function has access to variables from its outer function and global scope.

• This allows for more flexible and powerful functions.

JavaScript Promises

In this section, the speaker introduces promises as a way to handle asynchronous programming in JavaScript.

Why Promises?

• JavaScript is single-threaded, meaning that processes execute one at a time. If one process relies on another's result, it must wait until that process completes before continuing. This can be time-consuming and restrictive.

• Asynchronous programming allows multiple processes to happen simultaneously, making better use of system resources.

What are Promises?

• A promise is an object that represents an asynchronous action that may complete at some point in the future and produce a value.

• Promises have three states - pending (not yet completed), fulfilled (completed with a particular value), or rejected (an error occurred during operation).

• Once settled (fulfilled or rejected), promises cannot change their state.

Using Promises

• Use promise.then() to attach a callback when the promise has been resolved.

• Use promise.catch() to attach a callback when the promise has been rejected.