JavaScript Full Course 2025

Home
Next

What is JavaScript?

JavaScript (JS) is the most powerful scripting language for web development. It’s also a dynamic, high-level, and interpreted language similar to other languages.

  • Dynamic: JavaScript can change things on the page without reloading, like showing a pop-up message and boxes or updating a score in a game.
  • High-level: It is called high-level for its simplicity. It is easier for humans to read and write without facing problems with low-level technical details.
  • Interpreted: You don’t need to compile this language; browsers understand and run this language directly.

This language is used to create dynamic web structure along with HTML and CSS.

  • HTML builds the webpage structure, like the headings, paragraphs, buttons, etc.
  • CSS styles that page, for example, add colors, fonts, layout, etc.
  • JavaScript makes that page dynamic, such as making buttons clickable, forms interactive, animation work, and live content updates.

JavaScript is important because, without JavaScript, websites would be static and boring; you wouldn’t be able to click a button to see more info, fill out forms with instant feedback, and view sliders, menus, or games in the browser.

This powerful language is primarily used for client-side development means it runs in the user’s browser, but we can also use it for server-side development with Node.js platform.

Features of JavaScript

Versatility: JavaScript can be used for both client-side (front-end) and server-side (back-end) development.

Interactivity: With JavaScript, developers can create interactive web pages by responding to user inputs like clicks, key presses or mouse movements.

Dynamic Content: JavaScript creates the dynamic and real-time content without reloading the whole page. For example, displaying live notifications, updating prices or adding comments dynamically.

Asynchronous Programming: JavaScript supports asynchronous operations, which means it can execute code without blocking the rest of the operations. This feature is especially important for loading resources like images and data without interrupting the user experience.

Object-Oriented-Programming: JavaScript supports object-oriented programming that allows developers to create objects, define their properties and organize code into reusable modules.

JavaScript Syntax

JavaScript syntax represents a JS code structure. Here’s an example of JS syntax:

let message = "Hi Learners!";
console.log(message);

In this code, we have created a variable “message” and assigned the string “Hi Learners!” and then displayed it in the browser’s console. Because if you want to show this message on a webpage, you have to write HTML along with this.

  • JavaScript Variables: Variables are used to store data values. We can declare variables using var, let or const in JavaScript.
  • Functions: Functions allow you to group a block of code that performs a specific task. Functions can accept input values, known as parameters and return a result.

Simple Example of a function:

function fun(name) {
  return "Hello, " + name;
}

console.log(fun("Hema"));

Here, we created a “fun” function with a parameter. This function takes a name as input and returns a greeting message.

How to Run JavaScript?

We can run JavaScript code in any browser, like Chrome, Firefox, or Edge. There are 3 main ways to run it:

a) Inline JavaScript (Inside HTML File)

You can write JavaScript directly inside an HTML page using the <script> tag. For example:

<html>
  <head>
    <title>JavaScript Example</title>
  </head>
  <body>
    <script>
      alert("Welcome to JavaScript!");
    </script>
  </body>
</html>

See this code, we have directly added JS in HTML. This code will show a pop-up alert when the page is loaded.

b) External JavaScript File (Linked to HTML)

We can write JS code into a separate file, like script.js and then link that file to the main HTML file.

Let’s see the example how to use this method:

Create script.js file in VS code or any other relatable software:

alert("Hello from external file!");

HTML file code:

<html>
  <head>
    <title>JavaScript Example</title>
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

You can see, we have linked our JS file to the HTML file. This method keeps our code clean and organized.

c) Using the Browser Console

All browsers have Developer Tools where you can test JavaScript instantly. Below we provided

=> Press F12 or Right-click → Inspect → Console

=> Then type JavaScript code like:

console.log("Hello from console!");

It will show the result in the console directly, great for testing.

Example of JavaScript Button

Let’s create a simple button code using JavaScript.

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Button Example</title>
  </head>
  <body>
    <button onclick="ColorPick()">Click Me!</button>

    <script>
      function ColorPick() {
        document.querySelector('button').style.backgroundColor = 'Pink';
      }
    </script>
  </body>
</html>

In this example, when the button is clicked, the JavaScript function ColorPick() changes the button’s background color to pink.

Home
Next