Step-by-Step Guide to JavaScript

Introduction

JavaScript is the most widely used lightweight, interpreted compiled programming language in the world. It is also known as a web page scripting language. It may be used for both client-side and server-side programming.

How to add it to HTML?

There are two ways to include JavaScript in your HTML file:

Internal JavaScript: We may add JavaScript code to our HTML file directly by inserting it within the <script> element. Depending on the situation, the <script> tag can be inserted inside the <head> or the <body> tags.

External JavaScript File: We may create a .js file and paste the JavaScript code inside. After generating the file, include it in the HTML file's <script src="file name.js"> tag within the <head> tag.

Syntax


<script>
    // JavaScript Code
</script>

Examples

Example 1: This is a simple example of JavaScript code inserted in an HTML file.


<!DOCTYPE html>
<html lang="en">
 
	<head>
	    <title>
	        Basic Example on how to add javascript.
	    </title>
	</head>
	 
	<body>
	 
	    <!-- JavaScript code can be embedded inside
	        head section or body section -->
	    <script>
	        console.log("Welcome to loha.dev Blog");
	    </script>
	</body>
 
</html>

Output: The output will be shown on the console.


Welcome to loha.dev Blog

Example 2: In this example, we'll write a basic function and display the results.


<script>
  
    // Declare a variable and initialize it
    // Global variable declaration
    var Name = "loha.dev";
  
    // Function definition
    function MyFunction() {
  
        // Local variable declaration
        var num = 3;
  
        // Console value of Gloabal variable
        console.log(Name);
  
        // Console value of local variable
        console.log("\n" + num);
    }
      
    // Function call
    MyFunction();
</script>

Output: The output will be shown on the console.


loha.dev
3

What distinguishes JavaScript from HTML?

JavaScript is a sophisticated programming language that enhances the interactivity and dynamic nature of online pages, whereas HTML is a standard markup language that provides the fundamental structure of a website.

Why use Javascript?

Web pages with interactive elements: JavaScript enables user interaction with web pages. JavaScript has virtually no limitations on a web page.

Creating web and mobile applications: Developers may use a number of JavaScript frameworks to create web and mobile apps.

Creating web servers and server applications: In addition to websites and apps, developers can use JavaScript to build basic web servers and Node.js to build backend infrastructure.

Game Development: JavaScript may also be used to create browser games. These can be used by new developers to strengthen their JavaScript abilities.

Is it simple to learn Javascript?

JavaScript is basic and easy to learn in compared to other programming languages such as C++, Ruby, and Python. The difficulty of learning JavaScript is determined mostly by your prior understanding of other programming languages. The first step in learning JavaScript is to understand HTML. Because JavaScript is most usually used as a component of a web page, which can only be learnt via HTML.

What can we built with JS?

JavaScript is a popular programming language. Some domains/products that can be developed with JavaScript are listed below:

Websites: JavaScript allows us to add functionality to our websites. It facilitates user interaction with the website. For example, clicking on buttons, storing information, uploading information to a website, and so on.

Web Servers: Using JavaScript, we can create strong server applications. To be more specific, we create these servers with JavaScript frameworks such as Node.js and Express.js.

Game Development: JavaScript is frequently utilized in the game development business. With the inclusion of HTML5 Canvas, it is now feasible to create incredibly efficient 2D and 3D games with JavaScript.

3D Drawings: Three-dimensional graphics are created using JavaScript and HTML Canvas.

Mobile Apps: These days, mobile applications are the most preferred way of communication. JavaScript is also employed in the development of mobile applications. There are several JavaScript frameworks available for creating Android, iOS, and hybrid apps.

Smartwatch Apps: Pebble, the popular smartwatch maker, has produced Pebble.js, a simple JavaScript framework that allows a developer to construct a JavaScript application for the Pebble range of watches.

Why to learn JS?

JavaScript is the most widely used and hence most beloved programming language on the planet. Aside from that, there are several reasons to study it. Here are a few key items to remember:

Compilers are not required: Because JavaScript is an interpreted language, it does not require any compilers for compilation.

Previously used mainly for client-side applications, JavaScript is now extensively utilized for constructing server-side applications as well, thanks to the evolution of its frameworks, Node.js and Express.js.

As we have seen, JavaScript is frequently utilized in both client and server-side applications, therefore it aids in the development of an end-to-end solution to a given problem.

JavaScript is popular because it can be used almost anywhere. It may be used to create websites, games, and mobile apps, among other things.

Huge community support: JavaScript has a sizable community of users and mentors that like the language and want to see it succeed.

Bonus: JS online playground list.

As an added bonus, here are some javascript code playground listings. They have no ranking. Please let me know in the comments which is the best.

codepen.io

jsfiddle.net

jsbin.com

codesandbox.io

playcode.io

stackblitz.com