Instagram
youtube
Facebook
Twitter

JavaScript Basics

JavaScript Basics

Now that we’ve discussed the history and use cases, let’s explore some core concepts and features of JavaScript to get you started.

 

Getting Started: Before diving into coding, make sure you have a basic understanding of how to set up a development environment. You'll need a text editor (like Visual Studio Code or Sublime Text) and a web browser (such as Chrome or Firefox) to execute your code.

Creating an HTML File: Your JavaScript code will be embedded within an HTML file, which serves as the structure for your webpage. We'll start by creating a simple HTML file and then add JavaScript to it.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First JavaScript Program</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script src="script.js"></script>
</body>
</html>

 

In this basic HTML structure, the <h1> tag displays a "Hello, World!" message. The <script> tag references an external JavaScript file named script.js where you'll write your first JavaScript code.

Writing  JavaScript Code: Now, create a new file named script.js in the same directory as your HTML file. This file will contain  JavaScript program.

Example:

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

This simple line of code outputs "Hello, World!" to the browser's console, demonstrating how JavaScript can be used to display information.

Understanding the Code:

  • console.log(): This is a function in JavaScript that prints messages to the browser's console, which is useful for testing and debugging.
  • "Hello, World!": This is a string, a sequence of characters enclosed in double quotes.

Running Your Program: To see your program in action, open the HTML file in your web browser. Then, open the browser’s developer tools (usually accessible by pressing F12 or right-clicking and selecting "Inspect"), and navigate to the "Console" tab. You should see "Hello, World!" displayed there.

Exploring Further: Try modifying the message within the console.log() function to print different strings or add more lines of code to see how JavaScript executes them. Experimenting with these simple examples is an excellent way to build confidence as you progress to more complex JavaScript concepts.

Key Concepts Covered:

  • Embedding JavaScript in an HTML file.
  • Writing a basic JavaScript program.
  • Understanding and using the console.log() function.
  • Running JavaScript in a web browser.

1. Syntax Overview

JavaScript syntax is simple and shares similarities with other programming languages like C, Java, and Python. Below are some key elements:

  • Statements: JavaScript code is composed of statements that perform actions. Statements are separated by semicolons (;).

    console.log("Hello, World!"); // Example of a statement

     

  • Variables: JavaScript allows you to store values in variables using var, let, or const.

    let name = "Mradul"; // Using let to declare a variable const 
    age = 30; // Using const to declare a constant value

     

  • Comments: Comments help in explaining code and are ignored by the JavaScript engine.

    // This is a single-line comment /* This is a multi-line comment */