1.
Hello World Program
javascript
console.log("Hello, World!");
2. Simple Calculator
let num1 = 10;
let num2 = 5;
console.log("Sum:", num1 + num2);
console.log("Difference:", num1 - num2);
console.log("Product:", num1 * num2);
console.log("Quotient:", num1 / num2);
3. Check Even or Odd
javascript
let number = 7;
if (number % 2 === 0) {
console.log(number + " is even");
} else {
console.log(number + " is odd");
}
4. Factorial of a Number
function factorial(n) {
let result = 1;
for (let i = 1; i <= n; i++) {
result *= i;
}
return result;
}
console.log(factorial(5));
To Give in the first practical class.(Gave it to BCA(A) on 15th/05/2025)
5. Find Largest Number in an Array
let numbers = [10, 25, 5, 70, 100];
6. console.log("Largest number:", Math.max(...numbers));
7. Check if a String is a Palindrome
function isPalindrome(str) {
let reversed = str.split('').reverse().join('');
return str === reversed;
}
console.log(isPalindrome("madam")); // true
console.log(isPalindrome("hello")); // false
8. Fibonacci Series up to N Terms
function fibonacci(n) {
let a = 0, b = 1, next;
for (let i = 1; i <= n; i++) {
console.log(a);
next = a + b;
a = b;
b = next;
}
}
fibonacci(5);
9. Simple Object and Accessing Properties
javascript
CopyEdit
let student = {
name: "Sanskriti",
class: 10,
board: "ICSE"
};
console.log(student.name);
console.log(student.class);
10. Using Functions to Add Two Numbers
function add(a, b) {
return a + b;
}
console.log(add(10, 20));
11. Using Promises (Basic)
let promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("Promise resolved successfully!");
} else {
reject("Promise failed.");
}
});
promise.then(message => console.log(message)).catch(error => console.log(error));
In JavaScript, variables can be declared using var, let, or const, each serving different
purposes:
var: Function-scoped and can be redeclared and updated. It's considered
outdated due to its scoping issues.
let: Block-scoped and can be updated but not redeclared within the same scope.
const: Block-scoped and cannot be updated or redeclared. It must be initialized
during declaration.
Here's how we can declare variables:
Examples:
var x = 10;
let y = 20;
const z = 30;
To display (or "echo") the value of a JavaScript variable, we can use several methods:
1. Using alert(): Displays a popup box with the variable's value.
let message = "Hello, World!";
alert(message);
2. Using console.log(): Outputs the variable's value to the browser's console, useful for
debugging.
let count = 5;
console.log(count);
3. Using document.getElementById().innerHTML: Displays the variable's value within
an HTML element.
<p id="demo"></p>
<script>
let name = "Alice";
document.getElementById("demo").innerHTML = name;
</script>
4. Using document.write(): Writes the variable's value directly to the HTML document.
Note that this method is generally discouraged as it can overwrite the entire
document if used after the page has loaded.
When we use document.getElementById("id"), it returns an HTML element object, and
you can use many properties and methods on that object — not just innerText.
getElementById itself has only one function: to retrieve a DOM element by its id.
🔹 But once wef get the element, you can use many functions and properties on that
element (like .innerText, .value, .style, etc.).
Property/Method Description Example
.innerText Gets/sets the visible text el.innerText = "Hello"
.textContent Gets/sets all text (even hidden) el.textContent = "Text"
.innerHTML Gets/sets the HTML inside the element el.innerHTML = "<b>Bold</b>"
Gets/sets the HTML including the element
.outerHTML el.outerHTML
itself
🔸 2. Form-related Properties
(Used for form controls like <input>, <textarea>, <select>)
Property Description Example
.value Gets/sets the value of input fields el.value = "John"
.checked For checkboxes/radios: true or false el.checked = true
.selectedIndex Index of selected option in a <select> el.selectedIndex = 1
🔸 3. Styling
Property Description Example
.style Access or modify inline styles el.style.color = "blue"
.className Get/set the class as a string el.className = "highlight"
.classList Add/remove/toggle CSS classes el.classList.add("active")
🔸 4. Visibility & Display
Property Description Example
.hidden Hides the element if true el.hidden = true
.style.display Control layout visibility el.style.display = "none"
🔸 5. Attributes
Method Description Example
.getAttribute("attr") Get attribute value el.getAttribute("href")
.setAttribute("attr", value) Set attribute el.setAttribute("src", "img.png")
.removeAttribute("attr") Remove an attribute el.removeAttribute("disabled")
🔸 6. Event Handling
Method Description Example
Assign event
.onclick, .onchange, etc. el.onclick = myFunction;
handler
.addEventListener("event", Better way to el.addEventListener("click", () =>
handler) handle events alert("Clicked"))
Examples:
🔹 1. Content Properties
document.getElementById("demo").innerText = "Visible text updated!";
document.getElementById("demo").textContent = "Text including hidden parts.";
document.getElementById("demo").innerHTML = "<b>Bold Text</b>";
document.getElementById("demo").outerHTML = "<div id='demo'>Replaced
element</div>";
🔹 2. Form-related Properties
document.getElementById("username").value = "JohnDoe";
document.getElementById("subscribe").checked = true;
document.getElementById("countrySelect").selectedIndex = 2;
🔹 3. Styling
document.getElementById("title").style.color = "blue";
document.getElementById("title").className = "header large-text";
document.getElementById("title").classList.add("highlight");
🔹 4. Visibility & Display
document.getElementById("msgBox").hidden = true;
document.getElementById("msgBox").style.display = "none";
🔹 5. Attributes
let href = document.getElementById("link").getAttribute("href");
document.getElementById("img").setAttribute("src", "new-image.jpg");
document.getElementById("btn").removeAttribute("disabled");
🔹 6. Event Handling
document.getElementById("btn").onclick = () => alert("Button clicked!");
document.getElementById("btn").addEventListener("click", () => alert("Clicked with
listener!"));
