Beginning JavaScript: From Zero to First Program | AI/ML with Champak Roy, Varanasi

Lesson Goal

By the end of this lesson, students should be able to write simple JavaScript code, connect it with an HTML page, and understand basic values, variables, strings, and arithmetic.

In this lesson, we will learn:

What JavaScript is
Where JavaScript runs
How JavaScript is added to an HTML page
Variables using let and const
Output using console.log()
Basic arithmetic
Strings and template literals
A first small student marks program

1. What is JavaScript?

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

HTML gives the page structure.

CSS gives the page design.

JavaScript gives the page behavior.

Example

This button exists because of HTML:

<button>Click Me</button>

This button looks better because of CSS:

button {
  background: orange;
}

This button can respond because of JavaScript:

alert("Button clicked");

Try It

Click the button to see JavaScript behavior.

2. Where does JavaScript run?

In the browser

JavaScript runs in browsers such as Chrome, Firefox, Edge, and Safari. Browser JavaScript is used for websites and web applications.

On the server

JavaScript can also run outside the browser using Node.js. Node.js is useful for backend programming, application programming interfaces, servers, tools, and full-stack applications.

For this first lesson, we will begin with browser JavaScript.

3. How to write JavaScript in HTML

Method 1: Inside the HTML page

<!doctype html>
<html>
<head>
  <title>Beginning JavaScript</title>
</head>
<body>

  <h1>Hello JavaScript</h1>

  <script>
    console.log("JavaScript has started");
  </script>

</body>
</html>

The JavaScript code is written inside the <script> tag.

Method 2: External JavaScript file

Create two files:

index.html
script.js

index.html

<!doctype html>
<html>
<head>
  <title>External JavaScript</title>
</head>
<body>

  <h1>External JavaScript File</h1>

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

script.js

console.log("This code is coming from script.js");

External JavaScript files are better for real projects because the HTML and JavaScript remain separate and easier to maintain.

4. First JavaScript Output

Using console.log()

console.log("Hello JavaScript");

This prints output in the browser console.

To open the console: right click on the page, click Inspect, and open the Console tab.

Using alert()

alert("Welcome to JavaScript");

This shows a popup message.

Writing into the page

<p id="message"></p>

<script>
  document.getElementById("message").innerText = "Hello from JavaScript";
</script>

Live Page Output

This text will be changed by JavaScript.

5. Variables

A variable stores a value.

let name = "Champak";
let age = 25;

console.log(name);
console.log(age);

Output:

Champak 25

Common ways to create variables

let city = "Varanasi";
const country = "India";
var oldStyle = "This is older JavaScript";

Keyword	Use
`let`	Use when the value may change.
`const`	Use when the value should not be reassigned.
`var`	Older JavaScript style. Avoid it in the beginning.

Changing variable values

let marks = 80;

console.log(marks);

marks = 90;

console.log(marks);

Output:

80 90

But this is not allowed:

const pi = 3.14;

pi = 3.14159;

This gives an error because const values cannot be reassigned.

6. Numbers and Arithmetic

JavaScript can do calculations.

let a = 10;
let b = 5;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);

Output:

15 5 50 2

Arithmetic operators

Operator	Meaning	Example
`+`	Addition	`10 + 5`
`-`	Subtraction	`10 - 5`
`*`	Multiplication	`10 * 5`
`/`	Division	`10 / 5`
`%`	Remainder	`10 % 3`

let remainder = 10 % 3;

console.log(remainder);

Output:

Try Addition

First number Second number

Result will appear here.

7. Strings

A string is text.

let firstName = "Champak";
let lastName = "Roy";

console.log(firstName);
console.log(lastName);

Joining strings

let firstName = "Champak";
let lastName = "Roy";

let fullName = firstName + " " + lastName;

console.log(fullName);

Output:

Champak Roy

Template literals

Template literals are a modern way to place variables inside text.

let name = "Champak";
let subject = "JavaScript";

let message = `Hello ${name}, welcome to ${subject}`;

console.log(message);

Output:

Hello Champak, welcome to JavaScript

Try a Greeting

Student name Subject

Greeting will appear here.

8. First Small Program

Let us calculate total marks and percentage.

let math = 80;
let science = 75;
let english = 85;

let total = math + science + english;
let percentage = total / 3;

console.log("Total marks:", total);
console.log("Percentage:", percentage);

Output:

Total marks: 240 Percentage: 80

Full HTML Page Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Beginning JavaScript Lesson</title>
</head>
<body>

  <h1>Beginning JavaScript</h1>
  <p id="result"></p>

  <script>
    let math = 80;
    let science = 75;
    let english = 85;

    let total = math + science + english;
    let percentage = total / 3;

    console.log("Total marks:", total);
    console.log("Percentage:", percentage);

    document.getElementById("result").innerText =
      `Total marks: ${total}, Percentage: ${percentage}`;
  </script>

</body>
</html>

Student Marks Calculator

Math marks Science marks English marks

Total and percentage will appear here.

9. Practice Questions

Question 1

Create variables for your name, city, and subject. Print them using console.log().

let name = "Amit";
let city = "Varanasi";
let subject = "JavaScript";

console.log(name);
console.log(city);
console.log(subject);

Question 2

Create two numbers and print their sum.

let a = 15;
let b = 20;

let sum = a + b;

console.log(sum);

Question 3

Calculate the area of a rectangle.

let length = 10;
let breadth = 5;

let area = length * breadth;

console.log("Area:", area);

Question 4

Calculate simple interest.

let principal = 1000;
let rate = 5;
let time = 2;

let simpleInterest = principal * rate * time / 100;

console.log("Simple Interest:", simpleInterest);

10. Mini Assignment

Create a JavaScript program for a student report.

It should store:

Student name
Marks in 3 subjects
Total marks
Percentage

Starter code

let studentName = "Ravi";

let subject1 = 70;
let subject2 = 80;
let subject3 = 90;

let total = subject1 + subject2 + subject3;
let percentage = total / 3;

console.log("Student Name:", studentName);
console.log("Total Marks:", total);
console.log("Percentage:", percentage);

Summary

JavaScript is used to make web pages interactive.

In this first lesson, we learned:

<script> tag
console.log()
alert()
document.getElementById()
let
const
Numbers
Strings
Arithmetic
Template literals

The most important habit now is simple: write small code, run it, see the output, change it, and run it again.