JavaScript Day 1: Introduction & Basics

Niotechone Marketing Team
December 3, 2025
11:00 am

Introduction:

Welcome to your initial day practicing JavaScript! This is the part where you start your programming trip. In today’s lesson, we’re going to cover precisely what JavaScript is, as well as how JavaScript enhances web pages to make them more interactive and dynamic.

JavaScript is like the “magic” that you can apply to a website. It’s what makes buttons on a website do something, it causes content to change, and allows a page to respond to a user’s action. Learning JavaScript is extremely important because it’s the programming language of the web and is used in over 97% of all websites! At the end of this lesson you’ll be able to create web pages that interact with a user, change content based on events on a page, and even do basic calculations.

Step-by-Step Tutorial

Step 1: Setting Up Your First HTML Page with JavaScript

Let’s create a simple HTML structure that we can use to practice some JavaScript:

🌐

<title>JavaScript Day 1</title>


    <h3>JavaScript Can Change HTML Content</h3>
    
    <p id="demo">JavaScript content display here!!</p>
    <button>
        Click Me
    </button>

What this code does:

Creates a very basic webpage with a heading and a paragraph.
Includes a button that when clicked will change the text of your paragraph.
Links to an external JavaScript file (Index.js).

Why we add this code to our structure:

The id=”demo” gives the paragraph a unique id so we can easily tell JavaScript to get it.
onclick is an event triggered when the button is clicked.
An external JavaScript file creates a clean and organized approach for writing your code, and it’s often possible to re-use these files.

Pro Tip: Always place JavaScript files at the end of the body.

Step 2: Your First JavaScript Code - Variables and Math

Now let’s take a look at the JavaScript file that controls everything:

📄

// Display a decimal number
document.getElementById('demo2').innerHTML = 10.20;

// Working with variables and math
let x, y, z;
x = 3;
y = 3;
z = x + y;
document.getElementById("sum").innerHTML = "The value of z is " + z + ".";

What this code does:

First line shows the number 10.20 in an HTML element with the id “demo2”
Creates 3 variables (x, y, z) with let
Stores a value in x and y, and calculates the total
Displays the total in an HTML element with an id of “sum”

Why we use variables:

Variables are like containers for holding information
let is a modern way to declare a variable in JavaScript
Using variables, makes the code flexible and reusable

Common Mistake: Forgetting the semicolon at the end of statements. While JavaScript is forgiving, it’s good practice to include them.

Step 3: Creating Your First JavaScript Function

Functions are reusable blocks of code. Here’s how to create one:

📄

function myFunction() {
    document.getElementById("demo3").innerHTML = "Paragraph changed using JavaScript function!";
}

What this code does:

Defines a function called myFunction
When this function is called, it finds an element with the id of demo3 and changes the content
The function can be reused as needed

Why we use functions:

Functions break apart code into logical blocks
Functions create reuse – write once, use many times
Easier to debug and maintain

Note: Functions do not run automatically, they need to be called with a button click or some other way!

Step 4: Interactive Examples - Making Web Pages Alive

Let’s create some interactive things:

🌐

<h4>Light Bulb Example</h4>
<button>
    Turn Bulb On
</button>
<img id="image" src="../pic_bulboff.gif" style="width:100px">
<button>
    Turn Bulb Off
</button>

What this code does:

Creates an interactive light bulb that looks like it turns on and off
The buttons change the image source between the bulb on or off state.
This demonstrates how JavaScript can change the attributes of an element.

Why is this important:

It demonstrates how JavaScript is used for real-world interactive applications.
It teaches you how to change HTML attributes using JavaScript.
It builds your understanding of event handling in JavaScript.

Step 5: Different Ways to Output Data

JavaScript provides multiple ways to display information:

🌐

<!-- Method 1: Changing HTML content -->
<button>
    Change Content
</button>

<!-- Method 2: Using document.write() -->
<button>
    Sum using document.write()
</button>

<!-- Method 3: Console logging -->
<button>
    Log to Console
</button>

<!-- Method 4: Window printing -->
<button>
    Print
</button>

What these methods do:

innerHTML – Modifies the content of an HTML element
document.write() – Writes right on the HTML document (careful with this!)
console.log() – Prints to the browser developer tools (useful for debugging!)
window.print() – Opens the print dialogue

Pro Tip: Use console.log() often for debugging – it’s your best friend when things go wrong!

Code Explanation Sections

Understanding JavaScript Statements

📄

let x, y, z;
x = 3;
y = 3;
z = x + y;

How this works:

Each line is a JavaScript “statement” – a command for the computer
The statements execute one at a time in order, from the top down
First, we declare variables, then we give them values
JavaScript will use the + as both an addition operator and a string concatenation operator

Why the order matters: JavaScript reads code in order and will not allow a variable to be referenced prior to it being declared.

Event Handling with onclick

📄

<button>
    Click Me
</button>

How this connects:

onclick is the “event handler”, it listens for the user actions
Once the button is clicked, the code in the quotes runs.
getElementById() finds the specific HTML element
innerHTML changes the content of the HTML element

Why are events still powerful? An event can do things like change a web page when a user clicks, hovers, or even types!

CSS Manipulation with JavaScript

📄

<p id="fontsize">JavaScript changes the font size</p>
<button>
    Make Big Font
</button>

How it works:

JavaScript is able to access and change CSS styles.
The style property allows you to change any CSS property.
FontSize corresponds to the css font-size property.
All of this happens dynamically without having to refresh the page.

Why it matters: specifically, it shows how JavaScript can be used to create dynamic visual effects and responsive interfaces.

Tables of Key Concepts

1. Components / Keywords Used

Name	Description
document.getElementById()	Finds and selects an HTML element by its ID
innerHTML	Gets or sets the HTML content inside an element
let	Declares a variable that can be reassigned
function	Defines a reusable block of code
onclick	Event that occurs when an element is clicked
console.log()	Outputs information to the browser console

2. Key Properties / Parameters / Features

Name	Description
src	HTML attribute that specifies the source of an image
style	JavaScript property that controls CSS styles
display	CSS property that controls element visibility
document.write()	Method that writes directly to HTML document
window.print()	Opens the browser’s print dialog
Variables	Containers that store data values

What You Learned (Summary)

The first day of your training introduces you to the essential aspects of JavaScript, which provides dynamic and interactive elements to web pages. In this day’s training, you will gain a basic understanding of JavaScript, including how JavaScript operates in the browser and how JavaScript has become an integral part of contemporary web development. Among the topics covered in this lesson are: variables, data types, operators, comments, and a simple JS program structure. You will also learn how to connect JavaScript with HTML by creating three different types of scripts: internal, external, and inline scripts.

Useful References

Source code:
https://github.com/niotechoneSoftware/dotnet-developer-roadmap/tree/main/Interactive-JS-Tutorials/Day%201%20-%20JS%20-%20Introduction%20%26%20Basics

Output:

Let's Work Together

Software Development Services

+91 9925 66 8383

Related Tags

Frequently Asked Questions FAQs

What is JavaScript?

JavaScript is a programming language used to add interactivity, dynamic behavior, and logic to websites.

Why do we need JavaScript in web development?

It enables features like form validation, animations, sliders, dropdowns, dynamic content updates, API calls, and much more—making websites interactive.

How does JavaScript run in the browser?

Browsers have built-in JavaScript engines (like Chrome’s V8) that read and execute JS code.

Registration Form: Allows new users to create an account by providing their name, email, and password.

Both Forms typically have similar input fields but serve different purposes.

What are variables in JavaScript?

Variables store data values that can be reused or modified. JavaScript uses var, let, and const to declare variables.

What are JavaScript data types?

JS has primitive data types like string, number, boolean, null, undefined, bigint, symbol, and non-primitive types like objects and arrays.

Our Story

Company

Services

Trusted By

Trusted By

Expertise

Trusted By

Trusted By

Let's Discuss - Requirements

Let's Discuss - Requirements

Let's Discuss - Requirements

Technologies

Let’s Discuss – Requirements

Let’s Discuss – Requirements

Let’s Discuss – Requirements