JS Introduction

Today, I am creating this JavaScript tutorial to provide you with a resource that will help you learn JavaScript. Also, you can use this tutorial as a reference later to lookup various concepts and code.

My name is Maxon and I am an UI/UX Designer. I want to start this tutorial by why we need JavaScript at the first place. 

Imagine a website as a house. HTML is like the bricks and walls that give it structure. CSS is like the paint and decorations that make it look nice. But without JavaScript, the house won't have any lights or running water—nothing would work or move.

JavaScript is what makes a website interactive. It's like adding electricity to the house. It lets you click buttons to open doors, turn on lights, or even play music. So, without JavaScript, a website would be like a house where nothing really happens—you could look at it. 

The video below shows a modal which is created using JavaScript

JavaScript is used for frontend programming but it is also used for backend programming using Node.js. Lets take a step back and understand all these concepts one by one

What is Programming?

It is a way to talk to computers. A language like Hindi, English, or Bengali can be used to talk to a human but for computers, we need straightforward instructions.

Programming is the act of constructing a program, a set of precise instructions telling a computer what to do.

Programming is the process of designing, writing, testing, debugging, and maintaining the source code of computer programs. It involves the use of programming languages and various tools to create software programs that can be run on a computer or other devices.

What is ECMAScript?

ECMAScript is a standard on which JavaScript is based!

It was created to ensure that different documents on JavaScript are talking about the same language.

ECMAScript Versions: 

Beginning in 1997, JavaScript has evolved into many versions.

• ECMAScript1 or ES1 was first released in 1997. 
• ECMAScript 2015 also known as ES6 was released in 2015 and a major revision to JavaScript was made.
• The latest version of JavaScript will be ECMaScript2022 (ES13) in 2022.

What is JavaScript?

• JavaScript is a lightweight, OOP language.
• It is a scripting language for web pages.
• It is used to add interactivity and dynamic effects to web pages.
• “.js” is the extension.
• Nowadays used in server-side development.
• JS Frontend Frameworks: React, Angular, Vue.
• JS Backend Frameworks: Express, Node.

In this tutorial, we will learn JavaScript in depth

 

JS Execution

Do we need to install Javascript?

The answer is NO. 

JavaScript is present everywhere in browsers, on your phone, etc.

 

How to execute JavaScript?

JavaScript can be executed right inside one’s browser. You can open the JS console and start writing JS there.

Another way to execute JS is a runtime like Node.js which can be installed and used to run JavaScript code.

Yet another way to execute JavaScript is by inserting it inside the <script> tag of an HTML document.

What is JavaScript?

JavaScript is a programming language that is commonly used in web development. It is a client-side language, which means that it is executed by the user's web browser rather than the web server. This allows JavaScript to interact with the user and create dynamic, interactive web pages.

JavaScript is often used in combination with HTML and CSS to create web pages that are more interactive and engaging. It can be used to create all sorts of effects, such as drop-down menus, image sliders, and pop-up windows.

Getting Started with JavaScript

To start using JavaScript, you'll need a text editor and a web browser. There are many text editors available, such as Sublime Text, Atom, and Visual Studio Code, which are all popular choices among developers.

Once you have a text editor set up, you can start writing JavaScript code. To do this, you'll need to create a new file with a .js extension and then type your code into the file. You can then save the file and open it in your web browser to see the results.

 

Node.js Installation

Node.js Installation

Node.js is an open-source, cross-platform JavaScript runtime environment that executes JavaScript code outside of a web browser. It is commonly used for building server-side applications, command-line tools, and other types of scalable network programs.

To install Node.js, you can follow these steps:

1. Download the installer: Go to the official Node.js website (https://nodejs.org/) and click the "Download" button to download the latest version of the Node.js installer.

2. Run the installer: Double-click the downloaded installer file to start the installation process. Follow the prompts to complete the installation.

3. Verify the installation: To verify that Node.js has been installed successfully, open a terminal or command prompt and type the following command:

Run the following command:

node -v

This should output the version number of Node.js that you have installed.

That's it! You should now have Node.js installed on your system and be able to run JavaScript code using the "node" command.

I hope this helps. Let me know if you have any questions.

Script using Node.js

To run JavaScript with Visual Studio Code (VS Code), you will need to follow these steps:

1. Install VS Code: If you don't already have it, you can download and install VS Code from the official website (https://code.visualstudio.com/).

2. Create a new JavaScript file: Open VS Code and create a new file with a .js extension. You can do this by going to File > New File or by using the shortcut Ctrl + N.

3. Write your JavaScript code: Type your JavaScript code into the file and save it.

4. Open the Command Palette: You can open the Command Palette by pressing Ctrl + Shift + P or by going to View > Command Palette.

5. Run the JavaScript file: In the Command Palette, type "Run JavaScript" and select "Run JavaScript file in the terminal" from the list of options. This will open a terminal window and run your JavaScript file.

6. View the output: The output of your JavaScript code will be displayed in the terminal window.

Alternatively, you can also run JavaScript code directly in the terminal by using a command-line interpreter such as Node.js. To do this, you will need to install Node.js and then run your JavaScript file using the "node" command, followed by the name of the file. 

For example:

 

node myfile.js

Variables in Js

 

What are Variables?

In JavaScript, variables are used to store data. They are an essential part of any programming language, as they allow you to store, retrieve, and manipulate data in your programs.

There are a few different ways to declare variables in JavaScript, each with its own syntax and rules. In this blog post, we'll take a look at the different types of variables available in JavaScript and how to use them.

Declaring Variables

To declare a variable in JavaScript, you use the "var" keyword followed by the name of the variable. 

For example: 

var x;

This declares a variable called "x" but does not assign any value to it. You can also assign a value to a variable when you declare it, like this:

var x = 10;

In JavaScript, you can also use the "let" and "const" keywords to declare variables. The "let" keyword is used to declare a variable that can be reassigned later, while the "const" keyword is used to declare a variable that cannot be reassigned. For example:

let y = 20;
const z = 30;

In this example, "y" is a variable that can be reassigned, while "z" is a constant that cannot be reassigned.

Data Types

In JavaScript, there are several data types that you can use to store different types of data. Some common data types include:

• Numbers (e.g. 10, 3.14)
• Strings (e.g. "hello", 'world')
• Booleans (e.g. true, false)
• Arrays (e.g. [1, 2, 3])
• Objects (e.g. { name: "John", age: 30 })