Computer ScienceUnit 104 min read

JavaScript Basics: Syntax, Variables, Functions, Events & DOM

Unit 10 of Computer Science introduces JavaScript basics for web development, covering syntax, variables, data types, functions, events, and DOM manipulation with clear examples and NEB-style questions.

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

TAKEAWAYS:

JavaScript is a scripting language that makes web pages interactive by running in browsers.
Variables store data (numbers, text, etc.) using let, const, or var keywords.
Functions group reusable code blocks that execute when called.
Events (like clicks) trigger JavaScript code to respond dynamically.
The DOM lets JavaScript modify HTML/CSS elements on a webpage.

What is JavaScript?

JavaScript (JS) is a programming language that runs in web browsers. It makes websites interactive by:

Changing content dynamically (e.g., updating a scoreboard).
Responding to user actions (e.g., button clicks).
Communicating with servers (e.g., fetching data).

Unlike HTML (structure) or CSS (style), JavaScript adds behavior.

Writing JavaScript Code

JS code is written in scripts and can be placed:

Inside an HTML file between <script> tags.
In an external .js file linked via <script src="file.js">.

Example: Basic Script in HTML

<!DOCTYPE html>
<html>
<head>
    <title>My JS Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <script>
        alert("Welcome to JavaScript!"); // Shows a popup
    </script>
</body>
</html>

Variables and Data Types

Variables store data. Use:

let for variables that can change.
const for constants (unchanging values).

Common Data Types:

mindmap
  root((Data Types))
    Number
    String
    Boolean
    Array
    Object

Example: Variable Declaration

let age = 20;          // Number
let name = "Alice";    // String
let isStudent = true;  // Boolean

Operators

Operators perform actions on variables:

Arithmetic: +, -, *, /, %
Comparison: ==, ===, !=, >
Logical: && (AND), || (OR), ! (NOT)

Example: Arithmetic Operations

let x = 10, y = 3;
console.log(x + y);  // 13
console.log(x % y);  // 1 (remainder)

Functions

Functions are reusable blocks of code. Define them with function:

function greet(name) {
    return "Hello, " + name + "!";
}
console.log(greet("Bob")); // "Hello, Bob!"

flowchart TD
    A["Call greet('Bob')"] --> B["Function greet"]
    B --> C["Return 'Hello, Bob!'"]

Events

Events trigger JS code when actions occur (e.g., clicks, keypresses). Use addEventListener() to handle events.

Example: Button Click

<button id="myButton">Click Me</button>
<script>
    document.getElementById("myButton").addEventListener("click", function() {
        alert("Button clicked!");
    });
</script>

Document Object Model (DOM)

The DOM is a tree-like structure representing HTML elements. JS can:

Access elements: document.getElementById("id")
Modify content: element.innerHTML = "New text"
Change styles: element.style.color = "red"

Example: Change Text on Click

<p id="demo">Original text</p>
<button onclick="changeText()">Click to Change</button>
<script>
    function changeText() {
        document.getElementById("demo").innerHTML = "Text changed!";
    }
</script>

Common JS Methods

Method	Description
`toUpperCase()`	Converts string to uppercase.
`slice(start, end)`	Extracts part of a string.
`push(item)`	Adds item to an array.
`sort()`	Sorts an array.

Example: String Methods

let text = "Hello";
console.log(text.toUpperCase()); // "HELLO"
console.log(text.slice(1, 3));   // "el"

NEB-Style Questions

Short Answer

What is the difference between let and const?
Write a JS function to add two numbers.

Programming

Write a script to display "Good Morning" if the time is before 12 PM.

True/False

JavaScript can modify HTML content. (True/False)

Exam Tip

Syntax matters: Use === for strict equality checks.
Practice DOM manipulation: Questions often test changing HTML/CSS via JS.
Event handling: Know addEventListener and inline event attributes (onclick).
Functions: Always declare them before calling them.

JS interacts with HTML/CSS to create dynamic web pages

Based on the NEB +2 Science syllabus for Computer Science (Comp), unit 10.

Discussion

Loading…