DAY✌️OF JAVASCRIPT .JavaScript Variables and the DOM in HTML: A Beginner📚

hari A.G — Fri, 30 May 2025 04:19:38 +0000

JavaScript is the scripting language that brings interactivity to your websites. One of its most powerful features is the ability to manipulate the DOM (Document Object Model)—essentially the structure of your HTML—using variables.

In this blog, we'll break down:

•What variables are in JavaScript

•How they interact with HTML through the DOM

•Examples of how to use them effectively

🧠 What Are JavaScript Variables?

Variables in JavaScript are used to store data that you can use later in your code. Think of them as labeled containers for values like numbers, strings, or even entire HTML elements.

Declaring Variables
You can declare a variable using:
let name = "John"; // Can be reassigned
const age = 30; // Cannot be reassigned
var city = "Paris"; // Old way, less commonly used now

🌿 Introduction to the DOM

The DOM (Document Object Model) is a tree-like structure created by the browser from your HTML. It lets JavaScript read and manipulate elements on the page.

Here’s a simple HTML example:
<!DOCTYPE html>

JS and DOM

Welcome!

Click Me

In this example, JavaScript can access and change the

element using the DOM.

🛠️ Using Variables to Change the DOM

Let’s write the script.js:

function changeTitle() {
let newTitle = "Hello, JavaScript!"; // Variable storing new text
document.getElementById("title").innerText = newTitle;
}
What’s Happening Here?

•newTitle is a variable storing the new message.

•document.getElementById("title") accesses the

element by its ID.

•innerText = newTitle updates the content of the

.

🔄 Dynamically Changing Styles

You can also use variables to change styles:

function changeColor() {
let color = "blue";
document.getElementById("title").style.color = color;
}
This will change the

text color to blue when the function is called.

🚀 Conclusion
JavaScript variables are fundamental building blocks that allow you to interact with HTML in powerful ways through the DOM. Once you understand how variables and the DOM work together, you can make your websites come alive with dynamic behavior.

Next Step: Try building a simple form or interactive quiz using what you’ve learned. It’s a great way to solidify your understanding!

🚀DAY OF JAVASCRIPT 📘 Introduction to JavaScript Data Types and Functions.

hari A.G — Thu, 29 May 2025 04:20:21 +0000

JavaScript is a powerful and flexible programming language used to create interactive websites and web applications. Two of the core concepts every developer must understand are data types and functions. Let’s dive into each of these.

---

JavaScript Data Types
In JavaScript, data types represent different kinds of values. They are mainly divided into two categories:

Primitive Data Types These are the basic building blocks:

Type	Example	Description
`String`	`"Hello"`	Text enclosed in quotes
`Number`	`42`, `3.14`	Integers and floating-point numbers
`Boolean`	`true`, `false`	Logical values
`Null`	`null`	Empty or non-existent value
`Undefined`	`undefined`	Variable declared but not assigned
`Symbol`	`Symbol("id")`	Unique and immutable value
`BigInt`	`1234567890123456789n`	Large integers beyond Number limits

---

Non-Primitive (Reference) Data Types These can hold multiple values or complex structures:

•Object: { name: "John", age: 30 }

•Array: [1, 2, 3]

•Function: function() { ... }

let name = "Alice"; // String
let age = 25; // Number
let isStudent = true; // Boolean
let score = null; // Null
let address; // Undefined
let user = { name: "Bob", city: "NYC" }; // Object

🔧 JavaScript Functions
A function is a block of code designed to perform a particular task.

Declaring a Function

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

console.log(greet("Alice")); // Output: Hello, Alice!

Function Expressions

const add = function (a, b) {
return a + b;
};

console.log(add(2, 3)); // Output: 5

Arrow Functions (ES6+)

const multiply = (x, y) => x * y;

console.log(multiply(4, 5)); // Output: 20

Why Use Functions?
Code reusability

Better organization

Easier to test and debug

📝 Conclusion
Understanding data types and functions is fundamental in JavaScript. Mastering these basics lays the foundation for building dynamic and efficient applications.