Scripting LanguageUnit 25 min read

JavaScript Fundamentals: Syntax, Events, Functions & DOM

Unit 2 of Scripting Language covers JavaScript’s core syntax, event handling, functions (regular and arrow), DOM manipulation, and practical applications with real-world examples like form validation and dynamic content updates.

Padhai · Based on the official syllabus and past papers
Updated 28 Sept 2026

Core Concepts of JavaScript

1. What is JavaScript?

JavaScript (JS) is a client-side scripting language used to add interactivity to web pages. It runs in the browser and works alongside HTML/CSS.

Key Features of JavaScript

mindmap
  root((JavaScript Features))
    DynamicTyping["Dynamic Typing (no type declaration)"]
    Prototypal["Prototypal Inheritance (not class-based)"]
    EventDriven["Event-Driven (handles user actions)"]
    Lightweight["Lightweight (runs in browser)"]
    CrossPlatform["Cross-platform (works everywhere)"]
    Asynchronous["Asynchronous (supports callbacks, promises, async/await)"]

Why is JS important?

Makes websites interactive (e.g., buttons, animations).
Used for form validation (e.g., checking email format).
Powers single-page apps (SPAs) like Facebook, Gmail.

2. JavaScript Syntax Basics

Variables & Data Types

JavaScript uses dynamic typing (no need to declare types).

let name = "John";       // String
let age = 25;            // Number
let isStudent = true;    // Boolean
let skills = ["HTML", "CSS", "JS"]; // Array
let person = {           // Object
  name: "Alice",
  age: 22
};

Operators

Operator	Example	Description
Arithmetic	`5 + 3`	`+` `-` `*` `/` `%`
Assignment	`x = 10`	`=` `+=` `-=`
Comparison	`x > 5`	`==` `===` `!=` `!==`
Logical	`x && y`	`&&` `

Example: Basic Arithmetic

let num1 = 10, num2 = 5;
let sum = num1 + num2;       // 15
let product = num1 * num2;   // 50

3. Event Handling in JavaScript

Events allow JS to respond to user actions (clicks, keypresses, etc.).

Common Events

Event Type	Example	Description
Mouse	`onclick`	Triggered on click
Form	`onsubmit`	Triggered on form submission
Keyboard	`onkeydown`	Triggered on key press
Window	`onload`	Runs when page loads

Equivalent JS:

document.getElementById("myButton").addEventListener("click", function() {
  alert("Button Clicked!");
});

4. Functions in JavaScript

Functions are reusable blocks of code.

Types of Functions

Regular Function

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Alice")); // "Hello, Alice!"

Arrow Function (ES6)

const greet = (name) => `Hello, ${name}!`;
console.log(greet("Bob")); // "Hello, Bob!"

Immediately Invoked Function (IIFE)

(function() {
  console.log("Runs immediately!");
})();

Comparison Table

Feature	Regular Function	Arrow Function
Syntax	`function() {}`	`() => {}`
`this`	Own `this`	Inherits `this`
Use Case	General	Short callbacks
Method	Example	Description
--------	---------	-------------
`getElementById`	`document.getElementById("demo")`	Gets an element
`addEventListener`	`button.addEventListener("click", func)`	Adds an event
`innerHTML`	`element.innerHTML = "<b>New Text</b>"`	Changes content

DOM tree structure** How JS interacts with HTML elements (Image: Lubaochuan, CC BY-SA 4.0, via Wikimedia Commons)

In the Real World

eSewa (Nepal)
- Uses JS for real-time form validation (e.g., checking if a mobile number is valid before submission).
- Arrow functions help in handling API responses for payment processing.
Khalti (Digital Payments)
- Event listeners trigger when a user clicks "Pay Now" to redirect to the payment gateway.
- DOM manipulation updates the order status dynamically.
Daraz (E-commerce)
- Asynchronous JS fetches product details without page reload.
- Arrow functions in cart calculations (e.g., total = price * quantity).

Exam Tip

Always include <script> tags in HTML (either inline, external, or in <head>/<body>).
Event handling is a common question—practice onclick, onload, and onsubmit.
Functions (regular vs. arrow) and DOM methods (getElementById, innerHTML) are high-weightage topics.
Trace code step-by-step in exams (e.g., how let vs. var behaves in loops).

Final Note: JavaScript is the backbone of interactive web pages. Master events, functions, and DOM to ace this unit! 🚀

Based on the TU BCA syllabus for Scripting Language (CACS254), unit 2.

Discussion

Loading…