JavaScript Basics

In this tutorial, we will learn the basics of JavaScript. We will also learn about JavaScript, its features, advantages and limitations, JavaScript Syntax, how to add JavaScript to HTML, and how to run JavaScript.

Introduction to JavaScript

JavaScript is a programming language used to make web pages interactive and dynamic. It works with HTML and CSS to add functionality to a website.

JavaScript can be used to perform different tasks on a web page, such as changing content, responding to button clicks, validating forms, creating animations, and handling user actions.

JavaScript is mainly used for web development, but it can also be used for server-side development, desktop applications, mobile applications, and game development.

Example

console.log("Hello, JavaScript!");

In the above example, console.log() is used to display the message in the browser’s console.

JavaScript is different from Java. They are two separate programming languages.

Features of JavaScript

JavaScript has many features that make it useful for web development.

• Easy to learn and use.
• Lightweight programming language.
• Used to create interactive web pages.
• Supports object-oriented programming.
• Supports functional programming.
• It is a dynamically typed language.
• JavaScript can run directly in web browsers.
• It supports event-based programming.
• It supports asynchronous programming.
• JavaScript can be used for both frontend and backend development.
• It works with HTML and CSS.
• It is supported by all modern web browsers.

Advantages and Limitations of JavaScript

JavaScript provides many benefits for web development, but it also has some limitations.

Advantages of JavaScript

• JavaScript is easy to learn for beginners.
• It runs directly in modern web browsers.
• It can make web pages interactive.
• It provides fast execution for many browser-based tasks.
• It can be used for both frontend and backend development.
• It has a large number of libraries and frameworks.
• It is free and widely supported.
• JavaScript can be used to build different types of applications.

Limitations of JavaScript

• JavaScript code running in the browser can be affected by browser settings.
• Different browsers may sometimes handle features differently.
• JavaScript code can be viewed by users when it is sent to the browser.
• It is not suitable for every type of application.
• Large JavaScript applications can become difficult to maintain without proper structure.
• Client-side JavaScript depends on the user’s browser environment.

JavaScript Syntax

JavaScript Syntax refers to the rules used to write JavaScript code. These rules define how statements, variables, functions, operators, and other parts of a JavaScript program are written.

A JavaScript program can contain one or more statements.

Example

let name = "John";
console.log(name);

In the above example:

• let is used to declare a variable.
• name is the variable name.
• "John" is the value assigned to the variable.
• console.log() displays the value in the console.

JavaScript Statements

A statement is an instruction given to JavaScript to perform a particular task.

let x = 10;
let y = 20;
let sum = x + y;

console.log(sum);

JavaScript statements are commonly written on separate lines to make the code easier to read.

Semicolon in JavaScript

A semicolon ; can be used to indicate the end of a statement.

let x = 10;
let y = 20;

JavaScript can automatically insert semicolons in many situations, but using semicolons consistently can make code easier to understand.

JavaScript Comments

Comments are used to add notes in JavaScript code. Comments are ignored when the program is executed.

Single-Line Comment

A single-line comment starts with //.

// This is a JavaScript comment
let x = 10;

Multi-Line Comment

A multi-line comment starts with /* and ends with */.

/*
This is a
multi-line comment
*/

let x = 10;

How to Add JavaScript to HTML

JavaScript can be added to an HTML page in different ways. The three common methods are:

• Inline JavaScript
• Internal JavaScript
• External JavaScript

1. Inline JavaScript

In inline JavaScript, the code is written directly inside an HTML element.

<button onclick="alert('Hello JavaScript!')">Click Me</button>

Here, JavaScript is written inside the onclick attribute of the HTML button.

2. Internal JavaScript

In internal JavaScript, the code is written inside the <script> tag in the HTML document.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>

    <h1>Hello JavaScript</h1>

    <script>
        console.log("Hello, JavaScript!");
    </script>

</body>
</html>

The <script> tag is used to write JavaScript code inside an HTML document.

3. External JavaScript

In external JavaScript, the JavaScript code is written in a separate .js file and connected to the HTML file.

For example, create a file named:

script.js

Write JavaScript code in the file:

console.log("Hello, JavaScript!");

Then connect the JavaScript file to HTML using the <script> tag:

<script src="script.js"></script>

External JavaScript is useful when a website contains a large amount of JavaScript code or when the same JavaScript file needs to be used on multiple HTML pages.

How to Run JavaScript

There are different ways to run JavaScript. The easiest method for beginners is to use a web browser.

Run JavaScript in a Browser

Create an HTML file and add JavaScript inside the <script> tag.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>

    <h1>My First JavaScript Program</h1>

    <script>
        console.log("Hello, JavaScript!");
    </script>

</body>
</html>

Save the file with the .html extension, for example:

index.html

Open the HTML file in a web browser.

The JavaScript code will run when the page is loaded.

View the JavaScript Output

To see the output of console.log(), open the browser’s Developer Tools and go to the Console tab.

For example:

console.log("Hello, World!");

The output will be displayed in the browser console.

Run JavaScript Using the Browser Console

You can also write and run JavaScript directly in the browser console.

For example:

2 + 3

The browser will display:

5

This is a simple way to test JavaScript code without creating an HTML file.

JavaScript Basics – Important Points

• JavaScript is mainly used to create interactive and dynamic web pages.
• JavaScript works together with HTML and CSS in web development.
• JavaScript code can be added using inline, internal, or external JavaScript.
• JavaScript uses specific syntax and rules to write programs.
• JavaScript can be run directly in modern web browsers.
• The browser console can be used to test JavaScript code.
• JavaScript files normally use the .js extension.

Frequently Asked Questions (FAQs)

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Nidhi Srivastav