Course Content
  • 1. Installing VS Code, Extensions & Setup | JavaScript Tutorial In Hindi #1
    Free YouTube Video
  • 2. Console Logs, Errors, Warnings & More | JavaScript Tutorial In Hindi #2
    Free YouTube Video
  • 3. Variables: let, const & var in JavaScript | JavaScript Tutorial In Hindi #3
    Free YouTube Video
  • 4. Data Types in JavaScript (Primitive & Reference Types) | JavaScript Tutorial In Hindi #4
    Free YouTube Video
  • 5. JavaScript Type Conversion & Coercion | JavaScript Tutorial In Hindi #5
    Free YouTube Video
  • 6. Strings: Properties, Methods & Template Literals in JavaScript | JavaScript Tutorial In Hindi #6
    Free YouTube Video
  • 7. Arrays and Objects In JavaScript | JavaScript Tutorial In Hindi #7
    Free YouTube Video
  • 8. If Else Conditionals & Switches in JavaScript | JavaScript Tutorial In Hindi #8
    Free YouTube Video
  • 9. For, While & Do while Loops in JavaScript | JavaScript Tutorial In Hindi #9
    Free YouTube Video
  • 10. Functions in JavaScript | JavaScript Tutorial In Hindi #10
    Free YouTube Video
  • 11. Manipulating Websites Using JS Window Object | JavaScript Tutorial In Hindi #11
    Free YouTube Video
  • 12. Understanding DOM & Creating a Website Layout | JavaScript Tutorial In Hindi #12
    Free YouTube Video
  • 13. WebPage Crawler In JavaScript - Exercise 1 | JavaScript Tutorial In Hindi #13
    Free YouTube Video
  • 14. HTML Element Selectors In JavaScript | JavaScript Tutorial In Hindi #14
    Free YouTube Video
  • 15. Children, Parent & Traversing the DOM | JavaScript Tutorial In Hindi #15
    Free YouTube Video
  • 16. Creating, Removing & Replacing Elements | JavaScript Tutorial In Hindi #16
    Free YouTube Video
  • 17. Events & Event Object In JavaScript | JavaScript Tutorial In Hindi #17
    Free YouTube Video
  • 18. More on JavaScript Events | JavaScript Tutorial In Hindi #18
    Free YouTube Video
  • 19. Smart Page Crawler In JS Exercise1: Solution | JavaScript Tutorial In Hindi #19
    Free YouTube Video
  • 20. Local & Session storage in JavaScript | JavaScript Tutorial In Hindi #20
    Free YouTube Video
  • 21. Creating Editable Div Using JavaScript: Exercise 2 | JavaScript Tutorial In Hindi #21
    Free YouTube Video
  • 22. Project 1: Build a Notes Taking Website Using Pure JavaScript | JavaScript Tutorial In Hindi #22
    Free YouTube Video
  • 23. Math Object In JavaScript | JavaScript Tutorial In Hindi #23
    Free YouTube Video
  • 24. Date Object: Date & Time In JavaScript | JavaScript Tutorial In Hindi #24
    Free YouTube Video
  • 25. Creating an Editable Div Exercise 2: Solution | JavaScript Tutorial In Hindi #25
    Free YouTube Video
  • 26. Improving Magic Notes Website Exercise 3 | JavaScript Tutorial In Hindi #26
    Free YouTube Video
  • 27. Object Literals, Constructors and Object Oriented JavaScript | JavaScript Tutorial In Hindi #27
    Free YouTube Video
  • 28. Object Prototype In javascript | JavaScript Tutorial In Hindi #28
    Free YouTube Video
  • 29. Notes App with Title - Exercise 3: Solution | JavaScript Tutorial In Hindi #29
    Free YouTube Video
  • 30. Prototype Inheritance In JavaScript | JavaScript Tutorial In Hindi #30
    Free YouTube Video
  • 31. ES6 Classes and Inheritance | JavaScript Tutorial In Hindi #31
    Free YouTube Video
  • 32. Implementing a library class - Exercise 4 | JavaScript Tutorial In Hindi #32
    Free YouTube Video
  • 33. Project 2: Building a College Library Website | JavaScript Tutorial In Hindi #33
    Free YouTube Video
  • 34. What is Asynchronous Programming? | JavaScript Tutorial In Hindi #34
    Free YouTube Video
  • 35. Ajax tutorial in hindi | JavaScript Tutorial In Hindi #35
    Free YouTube Video
  • 36. Library Class Implementation Exercise 4: Solution | JavaScript Tutorial In Hindi #36
    Free YouTube Video
  • 37. Callback functions in javascript | JavaScript Tutorial In Hindi #37
    Free YouTube Video
  • 38. Using a Dictionary API Exercise 5 | JavaScript Tutorial In Hindi #38
    Free YouTube Video
  • 39. Promises Basics, Promise.then() & Promise.catch() | JavaScript Tutorial In Hindi #39
    Free YouTube Video
  • 40. Project 3: Creating a News Website | JavaScript Tutorial In Hindi #40
    Free YouTube Video
  • 41. Arrow functions in Javascript | JavaScript Tutorial In Hindi #41
    Free YouTube Video
  • 42. Using JavaScript Objects Exercise 5: Solution | JavaScript Tutorial In Hindi #45
    Free YouTube Video
  • 43. JavaScript Regular Expressions - Basic Functions | JavaScript Tutorial In Hindi #46
    Free YouTube Video
  • 44. Regular Expressions - Metacharacters in JavaScript | JavaScript Tutorial In Hindi #47
    Free YouTube Video
  • 45. Regular Expressions - Character sets | JavaScript Tutorial In Hindi #48
    Free YouTube Video
  • 46. Shorthand character classes (Regular Expressions) | JavaScript Tutorial In Hindi #49
    Free YouTube Video
  • 47. Project 4: Form Validation using Regular Expressions | JavaScript Tutorial In Hindi #50
    Free YouTube Video
  • 48. Iterators in JavaScript | JavaScript Tutorial In Hindi #51
    Free YouTube Video
  • 49. Creating an Alarm App: Exercise 6 | JavaScript Tutorial In Hindi #52
    Free YouTube Video
  • 50. Generators in Javascript | JavaScript Tutorial In Hindi #53
    Free YouTube Video
  • 51. Alarm Clock In JavaScript Exercise 6: Solution | JavaScript Tutorial In Hindi #54
    Free YouTube Video
  • 52. Project 5: Creating a CV Screener In JavaScript | JavaScript Tutorial In Hindi #55
    Free YouTube Video
  • 53. For.. of Loop vs For.. in Loop (When to use which?) | JavaScript Tutorial In Hindi #56
    Free YouTube Video
  • 54. JavaScript Symbols | JavaScript Tutorial In Hindi #59
    Free YouTube Video
  • 55. Project 6: PostMan Clone - Creating a Get/Post Request Website | JavaScript Tutorial In Hindi #63
    Free YouTube Video
  • 56. Drag & Drop Elements with JavaScript and HTML | JavaScript Tutorial In Hindi #64
    Free YouTube Video
  • 57. Project 7: Creating a Calculator using HTML, CSS & JS | JavaScript Tutorial In Hindi #65
    Free YouTube Video
  • 58. Fetch api in Javascript | JavaScript Tutorial In Hindi #42
    Free YouTube Video
  • 59. Async/Await in Javascript | JavaScript Tutorial In Hindi #43
    Free YouTube Video
  • 60. Error Handling & Try Catch in Javascript | JavaScript Tutorial In Hindi #44
    Free YouTube Video
  • 61. JavaScript Maps | JavaScript Tutorial In Hindi #57
    Free YouTube Video
  • 62. JavaScript Sets | JavaScript Tutorial In Hindi #58
    Free YouTube Video
  • 63. JavaScript Destructuring | JavaScript Tutorial In Hindi #60
    Free YouTube Video
  • 64. JavaScript Wall Clock: Exercise 6 | JavaScript Tutorial In Hindi #61
    Free YouTube Video
  • 65. Creating a Clock: Exercise 6 Solution | JavaScript Tutorial In Hindi #62
    Free YouTube Video
  • 66. JavaScript Tutorial In Hindi
    Free YouTube Video

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

Welcome to the beginner's JavaScript course! The objective of this tutorial is for you 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, 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 own 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 (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 Code. 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-in 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 after 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 press 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.

 

Figure 6: Emmet Abbreviation

Enable Mouse Wheel zoom in VS Code:-

To enable the zoom in/out features for text, click on the gear icon, and then click on settings. VS Code has two types of setting: User and Workspace setting. User settings will apply everywhere where we go, whereas the workspace setting is applied only to the specific folder. One way to apply the settings is to Open User Settings and edit settings.json. Add "editor.mousewheelzoom": true and then save it. Another way is to search the mouse wheel and checkmark the option. We can use the mouse wheel to zoom in or zoom out of only text in the text box.

 

Figure 7: Mouse wheel

Enable Word Wrap:-

To enable the word wrap, follow the same instruction as mentioned for the mouse wheel and search for word wrap, and set the word wrap option to "on."

 

Figure 8: Word wrap

When we set the word wrap option to on, the JSON file will edit, and then we can use this file on any system to apply the same settings.

 

Figure 9: JSON file

No Source Code Associated With This Video

You need to be logged in to post a comment!

Comments

sidhu123 Jun 12, 2021
Sidhu from karnataka
ayush_16 Jun 11, 2021
Ayush Kumar Dubey from Bihar
Kaushlendr May 25, 2021
Kaushlendra Tiwari from Delhi NCR
pavan1234 Feb 18, 2021
I am Pavan from Andra pradesh
bika Jan 25, 2021
how much javascript is covered in here?

Resources

No resource files associated with this project

Course Announcements

Any Course related announcements will be posted here