JavaScript Complete Course

Chapter 1: Introduction to JavaScript

JavaScript Chapter 1: Introduction to JavaScript

1. What is JavaScript?

JavaScript is a programming language used to make web pages interactive and dynamic.

HTML is used to create the structure of a web page, CSS is used to design the page, and JavaScript is used to add behavior, logic, and interactivity.

For example, JavaScript can be used to:

Display messages when a button is clicked.

Validate forms.

Change web page content dynamically.

Perform calculations.

Create image sliders.

Build quizzes and games.

Create interactive web applications.

Simple Example

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

The above code displays the following message in the browser's Developer Console:

Hello, JavaScript!

2. Why Do We Need JavaScript?

HTML and CSS can create a beautiful web page, but JavaScript is needed when we want the page to respond to user actions and perform programming tasks.

JavaScript can be used for:

User Interaction

JavaScript can respond to actions such as button clicks, mouse movements, and keyboard input.

Form Validation

JavaScript can check whether the information entered into a form is correct.

Dynamic Content

JavaScript can change the content of a web page without requiring the entire page to be reloaded.

Calculations

JavaScript can perform mathematical calculations.

Web Applications

JavaScript can be used to build interactive web applications such as dashboards, quizzes, calculators, and online tools.

3. HTML, CSS, and JavaScript

HTML, CSS, and JavaScript are the three major technologies commonly used to create interactive web pages.

Technology	Main Purpose
HTML	Creates the structure of a web page
CSS	Controls the design and appearance
JavaScript	Adds behavior, logic, and interactivity

Simple Example

Think of a web page like a house:

HTML = Structure of the house

CSS = Paint, decoration, and appearance

JavaScript = Functionality and behavior

Together, HTML, CSS, and JavaScript can create complete interactive web pages.

4. Important Features of JavaScript

JavaScript has many useful features.

1. Easy to Learn

JavaScript has a relatively simple syntax and is suitable for beginners.

2. Runs in Web Browsers

JavaScript can run directly inside modern web browsers.

3. Creates Interactive Web Pages

JavaScript allows websites to respond to user actions.

4. Dynamic

JavaScript can change data and page content while a web page is running.

5. Cross-Platform

JavaScript can run on different operating systems and modern browsers.

6. Widely Used

JavaScript is widely used for frontend development and can also be used for backend development with technologies such as Node.js.

5. Where is JavaScript Used?

JavaScript is used in many areas of software development.

Websites

JavaScript is used to create interactive websites.

Web Applications

It can be used to build dashboards, online tools, educational applications, and other web applications.

Games

JavaScript can be used to create browser-based games.

Server-Side Development

JavaScript can also run on servers using platforms such as Node.js.

Mobile Applications

JavaScript-based technologies can be used to develop mobile applications.

6. How to Add JavaScript to HTML

JavaScript can commonly be added to an HTML page in three ways:

Inline JavaScript

Internal JavaScript

External JavaScript

6.1 Inline JavaScript

Inline JavaScript is written directly inside an HTML element's attribute.

Example

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

When the user clicks the button, an alert message will appear.

Note

Inline JavaScript is useful for simple examples, but separating JavaScript from HTML is generally better for larger projects.

6.2 Internal JavaScript

Internal JavaScript is written inside a <script> element within the HTML file.

Example

<!DOCTYPE html> <html> <head> <title>JavaScript Example</title> </head> <body> <h1>My First JavaScript Program</h1> <script> console.log("Hello JavaScript!"); </script> </body> </html>

Here, the JavaScript code is written directly inside the HTML document.

6.3 External JavaScript

In external JavaScript, the JavaScript code is stored in a separate .js file.

For example:

index.html script.js

script.js

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

index.html

<!DOCTYPE html> <html> <head> <title>External JavaScript</title> </head> <body> <h1>JavaScript Tutorial</h1> <script src="script.js"></script> </body> </html>

Advantages of External JavaScript

Keeps HTML and JavaScript separate.

Makes code easier to maintain.

Allows the same JavaScript file to be used on multiple pages.

Makes large projects more organized.

7. The <script> Element

The <script> element is used to include JavaScript in an HTML document.

Internal JavaScript

External JavaScript

The src attribute specifies the location of the external JavaScript file.

8. Your First JavaScript Program

Let's create a simple JavaScript program.

<!DOCTYPE html> <html> <head> <title>My First JavaScript</title> </head> <body> <h1>Welcome to JavaScript</h1> <script> console.log("My First JavaScript Program"); </script> </body> </html>

After opening the page in a browser, open the Developer Console to see:

My First JavaScript Program

9. What is console.log()?

console.log() is used to display information in the browser's Developer Console.

Example

console.log("Hello World");

Output:

Hello World

You can also display multiple values:

console.log("Name:", "Rahul"); console.log("Age:", 20);

Output:

Name: Rahul Age: 20

console.log() is especially useful for testing and debugging JavaScript programs.

10. Browser Developer Console

The browser's Developer Console allows developers to view messages and test JavaScript code.

A common way to open Developer Tools is:

Right Click → Inspect → Console

You can also execute JavaScript directly in the Console.

Example

2 + 3

Result:

This makes the Console a useful tool for learning and testing JavaScript.

11. JavaScript Statements

A JavaScript program consists of statements.

Example

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

The above program contains two statements:

let name = "Amit";

and:

console.log(name);

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

Example

let age = 20; console.log(age);

Modern JavaScript can automatically determine the end of many statements, but beginners should still learn to write clear and properly separated statements.

12. JavaScript Comments

Comments are used to explain code.

Comments are not executed by JavaScript.

Single-Line Comments

Use // for a single-line comment.

// This is a comment console.log("Hello");

Multi-Line Comments

Use /* */ for multiple lines.

/* This is a multi-line comment */ console.log("Hello");

Comments make code easier to understand and maintain.

13. JavaScript is Case-Sensitive

JavaScript is a case-sensitive programming language.

For example:

let name = "Amit";

and:

let Name = "Rahul";

are different variables.

Similarly:

console.log("Hello");

is correct, while:

Console.Log("Hello");

is not correct.

Therefore, always pay attention to uppercase and lowercase letters.

14. JavaScript Output Methods

There are several ways to display output using JavaScript.

console.log()

Displays information in the Developer Console.

console.log("Hello");

alert()

Displays a popup message.

alert("Welcome!");

document.write()

Writes content directly to the document.

document.write("Hello JavaScript");

Note: document.write() is mainly useful for simple demonstrations and learning. Modern applications generally use DOM methods to update page content.

15. JavaScript Example: Button Click

JavaScript can respond to user actions such as button clicks.

<!DOCTYPE html> <html> <head> <title>Button Example</title> </head> <body> <button onclick="showMessage()">Click Me</button> <script> function showMessage() { alert("Welcome to JavaScript!"); } </script> </body> </html>

How It Works

A button is created using HTML.

The onclick event runs when the button is clicked.

The showMessage() function is called.

The function displays an alert message.

16. JavaScript Example: Simple Calculation

JavaScript can perform mathematical calculations.

let a = 10; let b = 20; let sum = a + b; console.log(sum);

Output:

Subtraction

let result = 20 - 10; console.log(result);

Multiplication

let result = 10 * 5; console.log(result);

Division

let result = 20 / 5; console.log(result);

17. JavaScript Example: Greeting

JavaScript can combine text and variables.

let name = "Rahul"; console.log("Hello " + name);

Output:

Hello Rahul

The + operator can be used to join strings.

18. Basic Structure of a JavaScript Program

A simple JavaScript program may look like this:

// Variable let name = "Amit"; // Calculation let age = 20; // Output console.log(name); console.log(age);

As you continue learning JavaScript, you will study concepts such as:

Variables

Data Types

Operators

Conditional Statements

Loops

Functions

Arrays

Objects

DOM

Events

Forms

Modern JavaScript

19. Practice Example

Let's create a complete HTML and JavaScript example.

<!DOCTYPE html> <html> <head> <title>JavaScript Practice</title> </head> <body> <h1>JavaScript Practice</h1> <button onclick="greetUser()">Click Here</button> <script> function greetUser() { let name = "Student"; alert("Hello " + name + "!"); } </script> </body> </html>

Program Explanation

A heading is created using HTML.

A button is created.

When the button is clicked, greetUser() is called.

The function creates a name variable.

alert() displays a greeting message.

20. Chapter Summary

In this chapter, we learned the basic concepts of JavaScript.

Important Points

JavaScript is a programming language.

JavaScript makes web pages interactive and dynamic.

HTML provides the structure of a web page.

CSS controls the design and appearance.

JavaScript provides behavior and logic.

JavaScript can be added to HTML using Inline, Internal, or External JavaScript.

The <script> element is used to include JavaScript in HTML.

console.log() displays output in the Developer Console.

alert() displays a popup message.

JavaScript is case-sensitive.

Comments are used to explain code.

JavaScript files normally use the .js extension.

21. Practice Questions

Q1. What is JavaScript?

Answer: JavaScript is a programming language used to make web pages interactive and dynamic.

Q2. What is the main purpose of HTML?

Answer: HTML is used to create the structure of a web page.

Q3. What is the main purpose of CSS?

Answer: CSS is used to control the design and appearance of a web page.

Q4. What are the three common ways to add JavaScript to HTML?

Answer: Inline JavaScript, Internal JavaScript, and External JavaScript.

Q5. Which HTML element is used to add JavaScript?

Answer: The <script> element.

Q6. What is the purpose of console.log()?

Answer: It is used to display information in the browser's Developer Console.

Q7. How do you write a single-line comment in JavaScript?

Answer:

// This is a comment

Q8. How do you write a multi-line comment?

Answer:

/* This is a multi-line comment */

Q9. Is JavaScript case-sensitive?

Answer: Yes, JavaScript is case-sensitive.

Q10. What is the extension of a JavaScript file?

Answer: .js

22. Try It Yourself

Task 1

Write a JavaScript program that displays:

Welcome to JavaScript

in the Developer Console.

Task 2

Create two numbers and display their sum in the Console.

Task 3

Create a button that displays:

Hello Student!

when clicked.

Task 4

Create an external script.js file and connect it to an HTML page.

Task 5

Write a JavaScript program using both single-line and multi-line comments.

23. Chapter 1 Quick Revision

Concept	Example
JavaScript	Programming Language
Script Element	<script>
External File	script.js
Console Output	console.log()
Popup Message	alert()
Single-Line Comment	//
Multi-Line Comment	/* */
JavaScript File	.js

What's Next?

Chapter 2: JavaScript Variables and Data Types

In the next chapter, we will learn about variables, let, const, var, strings, numbers, booleans, null, undefined, and JavaScript data types with practical examples and exercises.