Course Content

Installing VS Code, Extensions & Setup | JavaScript Tutorial In Hindi #1

Welcome to the beginner's JavaScript course! The objective of this tutorial is to gain familiarity with what JavaScript is, what it can do, and how it fits into a website.

What is JavaScript?

JavaScript, which is abbreviated as JS, is a programming language that conforms to the ECMAScript specification. It was initially created to make web pages alive. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. Using JavaScript, we can change and update both HTML and CSS. JavaScript has no link with Java programming language. It is a fully independent language with its specification.

What is the difference between the Client-side and Server Side?

Client-side and server-side in the term of web development, describes where application code runs. Web developers will also refer to this distinction as the frontend vs. the backend. In web development, the client-side refers to everything in a web application displayed on the client (end-user device). The browser interprets HTML and CSS on the client-side. Whereas, the server-side is where all the request coming from client-side is handled. The working which is performing on the server-side is not visible to the end-user. The Server-side has the business logic for dynamic webpages.

Which IDE will we use for JavaScript?

There are many IDE available for JavaScript like sublime text, Atom, or VS Studio. IDE (stands for Integrated Development Environment) is a software application that combines all of the software developer's features and tools. An IDE normally consists of a source code editor, debugger, and build automation tools. It is very important to have a good IDE for software development.

For this series, we will use the VS Code. Visual Studio Code is a free and powerful source-code editor that runs on the desktop. It is made by Microsoft for Windows, Linux, and macOS. Features include support for debugging, syntax highlighting, embedded Git, snippets, and intelligent code completion. It is written in ElectronJS technology. Following is the guide to install the VS Code.

Installing VS Code, Extensions & Setup:-

Let us start the installation process. First, we are going to see the installation of VS Code. For that, search "VS Code download" on google or directly visit the URL given below:

https://code.visualstudio.com/download

 

Figure1: Virtual Studio Download

Click on the download option. After the download is completed, open the setup and run it by saving the VS Code in the default location without changing any settings at all. Just click the next button until the "Select Additional Task" dialog box appears. Check to mark the following options.

 

Figure 2: Addition Task dialog box

Then click next and install the setup. Now the VS Code is downloaded on the system. Click on the VS Code icon. To open the folder, click on the "Open Folder" option on the left side of the screen or right-click on the folder and select the option "Open with Code." 

 

Figure 3: Open folder with VS Code

Now let us install the extensions that we need for JavaScript coding.

Installing Extensions:-

Click on the extension icon on the left of the screen or click Ctrl+Shift+X. After clicking on the extension option, write the name of the extension, and download it.

For this series, we will download "Live Server." It will Launch a local development Server with a live reload feature for static & dynamic pages.

 

Figure4: Live Server 

To stop the live server, click on Port at the bottom of the screen. It will dispose and then close the live server.

Another extension we have to download is "JavaScript es6 code snippet". VS Code comes with many built-in code snippets. The JavaScript ES6 code snippets extension adds snippets for ES6 (ECMAScript 6) syntax.

 

Figure5: JavaScript ES6 Code Snippets. 

Emmet in Visual Studio Code:- 

Emmet snippets and expansion is built right into Visual Studio Code; no extension is required. Emmet 2.0 has support for the majority of the Emmet Actions, including expanding Emmet abbreviations and snippets. When we start typing an Emmet abbreviation, we will see the abbreviation displayed in the suggestion list.