1. What is JavaScript?
Ans JavaScript is a high-level, interpreted scripting language used to make web pages
interactive. It runs on the client-side within the browser.
2. What is the difference between var, let, and const?
Ans var has function scope, let and const have block scope. const is used for constants that
cannot be reassigned.
3. What are arrays in JavaScript?
Ans Arrays are data structures that hold multiple values in a single variable, indexed from 0.
4. Define conditional statements in JavaScript.
Ans Conditional statements like if, else if, and switch allow you to execute different code based
on different conditions.
5. What is an event in JavaScript?
Ans An event is an action that occurs in the browser, such as clicking a button, which JavaScript
can respond to using event listeners.
6. What is CSS?
Ans CSS (Cascading Style Sheets) is used to style and layout HTML elements on a web page.
7. What are inline, internal, and external CSS?
Ans Inline CSS is written in the HTML element using the style attribute.
Internal CSS is written inside a <style> tag in the <head>.
External CSS is linked through a .css file.
8. What is the use of DIV and SPAN in HTML?
Ans DIV is a block-level container, and SPAN is an inline container used to group elements for
styling.
9. What is dynamic positioning in CSS?
Ans Dynamic positioning refers to positioning elements using CSS properties like position:
absolute, relative, fixed, or sticky.
10. What are DHTML events?
Ans DHTML events are events (like onclick, onmouseover, etc.) used to dynamically modify web
content using JavaScript and HTML.
Q1. Explain the data types, variables, and operators in JavaScript.
Ans JavaScript supports several data types categorized into:
Primitive types: String, Number, Boolean, Null, Undefined, Symbol, BigInt.
Non-primitive types: Objects and Arrays.
Variables in JavaScript are containers for storing data. You can declare them using:
var: Function-scoped and can be re-declared.
let: Block-scoped and cannot be re-declared in the same block.
const: Block-scoped and immutable (value cannot be changed after declaration).
Example:
let name = "Aaqib";const age = 21;
Operators:
Arithmetic: +, -, *, /, %
Assignment: =, +=, -=, etc.
Comparison: ==, ===, !=, <, >, <=, >=
Logical: &&, ||, !
JavaScript uses loosely typed variables, which means the same variable can hold values of
different types.
Q2. Write and explain a JavaScript program to display the current date and time.
Ans JavaScript provides the Date object to work with dates and times. Here is a simple
program:
let today = new Date();
let date = [Link]();
let time = [Link]();
[Link]("Current Date: " + date);
[Link]("Current Time: " + time);
Explanation:
new Date() creates a new date object with the current date and time.
toDateString() converts it to a readable date format.
toLocaleTimeString() converts it to a readable time format based on local settings.
Output:
Current Date: Mon Jul 14 2025
Current Time: [Link] AM
Q3. What is CSS? Explain types, properties, and how they are applied.
Ans CSS is a style sheet language used to control the presentation of HTML elements.
Types of CSS:
1. Inline CSS – Applied within the HTML tag.
2. Internal CSS – Applied within the <style> tag in the <head>.
3. External CSS – Stored in a .css file and linked using <link>.
Example:
<!-- Inline -->
<p style="color: red;">This is red text</p>
<!-- Internal -->
<style>
p { font-size: 20px; }
</style>
<!-- External -->
<link rel="stylesheet" href="[Link]">
CSS Properties:
Font Properties: font-size, font-family, font-weight
Color & Background: color, background-color
Text: text-align, text-decoration
Box: margin, padding, border, width, height
Positioning: position: static | relative | absolute | fixed | sticky
Display: display: block | inline | flex | none
CSS helps in separating structure (HTML) from style (CSS), making pages cleaner and easier to
manage.
Q4. Explain looping statements and give examples of while, for, and do-while in JavaScript.
Ans Looping statements allow you to repeat a block of code until a condition is met.
1. For Loop:
for(let i = 0; i < 5; i++) {
[Link](i);
}
Used when the number of iterations is known.
2. While Loop:
let i = 0;
while(i < 5) {
[Link](i);
i++;
}
Used when the condition is checked before executing the block.
3. Do-While Loop:
let i = 0;
do {
[Link](i);
i++;
} while(i < 5);
Executes the block at least once before checking the condition.
These loops are useful in iterating over arrays, DOM elements, or performing repetitive tasks.
Q5. Describe the purpose and application of DHTML and its events.
Ans DHTML (Dynamic HTML) combines HTML, CSS, JavaScript, and DOM to create interactive
and animated web pages without reloading them.
Core Technologies:
HTML: For structure.
CSS: For styling.
JavaScript: For interactivity.
DOM: For accessing and modifying elements.
DHTML Events:
onclick: Triggered when an element is clicked.
onmouseover: Triggered when the mouse is moved over an element.
onmouseout: When the mouse moves out.
onkeydown, onkeyup: When keys are pressed.
Example:
<button onclick="changeText()">Click Me</button>
<p id="demo">Hello</p>
<script>
function changeText() {
[Link]("demo").innerHTML = "You clicked the button!";
}
</script>
Use Cases: Image sliders, dynamic menus, pop-up boxes, and real-time content updates.
11. What is the purpose of the switch statement in JavaScript?
Ans The switch statement is used to perform different actions based on different conditions. It
evaluates an expression and matches it against multiple case values.
12. What is a function in JavaScript?
Ans A function is a reusable block of code that performs a specific task. It can take parameters
and return values.
13. What is an associative array in JavaScript?
Ans Associative arrays use named keys instead of numeric indexes. In JavaScript, objects are
used as associative arrays.
14. What is typeof operator used for?
Ans typeof is used to determine the data type of a variable or value.
15. What is DOM in JavaScript?
Ans DOM (Document Object Model) represents the structure of an HTML document, allowing
JavaScript to access and manipulate elements.
16. What is the difference between id and class in CSS?
Ans id is unique and used for a single element (#idName), while class can be used for multiple
elements (.className).
17. What are pseudo-classes in CSS?
Ans Pseudo-classes define a special state of an element (e.g., :hover, :first-child).
18. What is the Box Model in CSS?
Ans The CSS Box Model includes content, padding, border, and margin, which determine how
elements are spaced and sized.
19. What is layering in CSS?
Ans Layering is handled using the z-index property, which controls the stacking order of
elements.
20. What are CSS units?
Ans CSS units are used to define length. Examples include absolute units (px, cm) and relative
units (%, em, rem).
Q6. Explain JavaScript Conditional Statements with examples.
Ans JavaScript conditional statements control the flow of the program based on certain
conditions. The main types are:
1. if Statement
Executes a block of code if a condition is true.
let age = 20;
if (age >= 18) {
[Link]("You are eligible to vote.");
}
2. if-else Statement
Executes one block if true, another if false.
let age = 16;
if (age >= 18) {
[Link]("Adult");
} else {
[Link]("Minor");
}
3. if-else if-else Ladder
Used for multiple conditions.
let score = 85;
if (score >= 90) {
[Link]("Grade A");
} else if (score >= 80) {
[Link]("Grade B");
} else {
[Link]("Grade C");
}
4. switch Statement
A better alternative to many if-else blocks when checking one variable against many values.
let day = 3;
switch(day) {
case 1: [Link]("Monday"); break;
case 2: [Link]("Tuesday"); break;
case 3: [Link]("Wednesday"); break;
default: [Link]("Invalid Day");
}
These statements help manage logical flow in a program efficiently.
Q7. Write a JavaScript program to check whether an input is an array or not. Explain it.
Ans function checkArray(input) {
if ([Link](input)) {
[Link]("It is an array.");
} else {
[Link]("It is not an array.");
}
}
checkArray([1, 2, 3]); // Output: It is an array.
checkArray("hello"); // Output: It is not an array.
Explanation:
[Link]() is a built-in method that returns true if the input is an array, otherwise false.
This is useful for input validation in programs where array data types are required.
Q9. Describe how to implement blinking text using JavaScript.
Ans To create a blinking effect, JavaScript can repeatedly show and hide an HTML element
using setInterval().
Example:
<p id="blink">This text will blink</p>
<script>
let blink = [Link]("blink");
setInterval(() => {
[Link] = ([Link] == 'hidden') ? 'visible' : 'hidden';
}, 500); // 500ms = half a second
</script>
Explanation:
setInterval() repeatedly executes a function after a delay.
[Link] toggles between visible and hidden.
This creates a blinking effect every 0.5 seconds.
21. What is an alert box in JavaScript?
Ans An alert box is a pop-up message used to display information to the user. It pauses script
execution until the user closes the box.
Example: alert("Hello, World!");
22. What is the difference between == and === in JavaScript?
Ans == checks for equality with type coercion, while === checks for both value and type without
coercion.
Example: 5 == '5' is true, but 5 === '5' is false.
23. What is the use of prompt() in JavaScript?
Ans The prompt() function is used to take input from the user through a dialog box.
Example: let name = prompt("Enter your name:");
24. What is [Link]()?
Ans It is a DOM method used to access an HTML element by its id attribute.
Example: [Link]("demo").innerHTML = "Hello";
25. What is an object in JavaScript?
Ans An object is a collection of key-value pairs used to store and manipulate related data.
Example:let person = { name: "John", age: 25 };
26. What is the use of setInterval() in JavaScript?
Ans It repeatedly calls a function after a specified number of milliseconds.
Example: setInterval(myFunction, 1000);
27. How can you check if a number is even or odd in JavaScript?
Ans Use the modulus operator (%) to check the remainder when divided by 2.
if (num % 2 === 0) [Link]("Even");
else [Link]("Odd");
28. What is NaN in JavaScript?
Ans NaN stands for "Not a Number." It represents a value that is not a legal number.
Example: parseInt("abc") returns NaN.
29. What is a function parameter and argument?
Ans A parameter is a variable in the function definition. An argument is the actual value passed
when calling the function.
function greet(name) { // 'name' is parameter
alert("Hi " + name);
}
greet("Ali"); // 'Ali' is argument
30. What is event handling in JavaScript?
Ans Event handling is the process of executing code when a specific event occurs, such as
onclick, onmouseover, etc.
Example
<button onclick="alert('Clicked')">Click Me</button>
31. What is the difference between visibility: hidden and display: none?
Ans visibility: hidden hides the element but it still takes up space.
display: none hides the element and removes it from the layout flow.
32. What is z-index in CSS?
Ans z-index specifies the stack order of elements. A higher z-index means the element appears
on top.
33. What are embedded style sheets in CSS?
Ans Embedded or internal styles are defined within a <style> tag in the HTML document's
<head> section.
34. What is the position property in CSS?
Ans It specifies the type of positioning method for an element: static, relative, absolute, fixed, or
sticky.
35. What is the use of the float property in CSS?
Ans It is used to place an element to the left or right of its container, allowing text or other
elements to wrap around it.
36. What are pseudo-elements in CSS?
Ans Pseudo-elements allow you to style specific parts of an element, such as ::first-line or
::before.
37. What is the default position of an HTML element in CSS?
Ans The default position is static, which means elements follow the normal flow of the
document.
38. What is the overflow property in CSS?
Ans It controls what happens when content overflows the container. Values include visible,
hidden, scroll, and auto.
39. What is the purpose of class in HTML and CSS?
Ans A class groups multiple elements together for common styling using a selector with a dot (.).
Example: .myClass { color: blue; }
40. What are div and span used for in web development?
Ans div is a block-level container for grouping elements. span is an inline container used for
styling part of a text or element.
i. Define JavaScript Objects.
Ans JavaScript objects are collections of key-value pairs used to store and manipulate related
data and functionalities.
ii. Define a Variable.
Ans A variable is a named storage location used to hold data that can be changed during
program execution.
iii. Define DHTML.
Ans DHTML (Dynamic HTML) is a combination of HTML, CSS, JavaScript, and DOM used to
create interactive web pages.
iv. Define a Data Type.
Ans A data type defines the kind of value a variable can hold, like string, number, boolean, or
object.
v. What is a Loop?
Ans A loop is a control structure that repeats a block of code while a specified condition is true.
vi. Define an Array.
Ans An array is a data structure that stores multiple values in a single variable using numeric
indexes.
vii. What is HTML?
Ans HTML (HyperText Markup Language) is the standard language used to create the structure
of web pages.
viii. What are DHTML Events?
Ans DHTML events are browser actions (like click, hover) that trigger JavaScript functions
dynamically on a webpage.
Q2. Define different data types in JavaScript.
Ans JavaScript supports both primitive and non-primitive (reference) data types.
Primitive Data Types:
1. Number: Includes integers and floating-point numbers.
Example: let a = 10;
2. String: Text enclosed in single, double, or backticks.
Example: let name = "Ali";
3. Boolean: Represents true or false.
Example: let isActive = true;
4. Undefined: A variable declared but not assigned a value.
Example: let x;
5. Null: Represents no value or empty object reference.
Example: let y = null;
6. Symbol: Introduced in ES6, used for unique object keys.
7. BigInt: For very large integers beyond safe number range.
Non-Primitive Types:
Object: Used to store collections of data.
Array: Special type of object for ordered [Link] is a loosely typed language,
allowing dynamic assignment of different data types.
Q2 Explain Event Handling in JavaScript.
Ans Event Handling in JavaScript refers to writing code that responds to user actions or browser
events such as clicks, mouseovers, keypresses, etc.
JavaScript uses event listeners to handle events.
Example:
<button onclick="showMessage()">Click Me</button>
<script>
function showMessage() {
alert("Button Clicked!");
}
</script>
Common Event Types:
onclick – triggered on mouse click
onmouseover – triggered when mouse hovers
onkeydown – triggered when key is pressed
onload – triggered when page finishes loading
Methods:
addEventListener(): Attaches an event handler to an element.
[Link]("btn").addEventListener("click", showMessage);
Event handling is essential for creating interactive and dynamic web applications.
Q3. Explain JavaScript objects in detail.
Ans In JavaScript, an object is a collection of properties where each property is a key-value pair.
It helps in storing structured data and methods.
Syntax:
let student = {
name: "Aaqib",
age: 21,
course: "BCA",
greet: function() {
return "Hello " + [Link];
}
};
Accessing Properties:
Dot notation: [Link]
Bracket notation: student["course"]
Adding/Updating Properties:
[Link] = 23; // adds new property
[Link] = 22; // updates existing property
Objects can also contain arrays, functions, and even nested objects. They are used widely in
DOM manipulation, API responses, and data modeling.
Q3 Explain Associative Arrays in JavaScript.
Ans JavaScript doesn’t support true associative arrays like some other languages, but objects
can act as associative arrays.
Example:
let student = {
"name": "Ali",
"age": 20,
"roll": 101
};
[Link](student["name"]); // Output: Ali
Keys are strings, and values can be of any data type.
Use cases include:
Storing structured data
Accessing values dynamically using variable keys
Associative arrays (i.e., JavaScript objects) are flexible and widely used to represent JSON data
and key-value mapping.
Q4. What are the different types of style sheets in CSS?
Ans CSS offers three main ways to apply styles:
1. Inline CSS: Applied directly in the HTML tag.
<p style="color: red;">Hello</p>
2. Internal CSS: Defined in the <style> tag inside <head>.
<style>
p { font-size: 16px; }
</style>
External CSS: Stored in a separate .css file and linked to HTML.
<link rel="stylesheet" href="[Link]">
Comparison:
Inline has highest priority but is hard to maintain.
Internal is suitable for single-page designs.
External is best for large projects with multiple pages.
Each method is used based on project requirements and scope.
Q3 Explain Font and Color properties of Style Sheets.
Ans CSS provides various properties for fonts and colors:
Font Properties:
font-family: Defines the typeface (e.g., Arial, Times New Roman)
font-size: Specifies size (e.g., 16px, 1.5em)
font-style: Italic or normal (italic, normal)
font-weight: Boldness (normal, bold, 100–900)
Example:
p{
font-family: Arial;
font-size: 18px;
font-style: italic;
font-weight: bold;
}
Color Properties:
color: Text color
Example: color: blue;
background-color: Background color
Example: background-color: yellow;
Colors can be applied using:
Named colors (red, blue)
Hex codes (#ff0000)
RGB (rgb(255,0,0))
These properties improve visual appearance and readability.
Q5. Explain the different operators in JavaScript.
Ans JavaScript includes several categories of operators:
1. Arithmetic Operators: +, -, *, /, %, ++, --
2. Assignment Operators:=, +=, -=, *=, /=
3. Comparison Operators:==, ===, !=, !==, >, <, >=, <=
4. Logical Operators:&& (AND), || (OR), ! (NOT)
5. String Operators:+ for concatenation
Example: "Hello" + " World"
6. Type Operator:typeof – Returns the type of a variable
Example: typeof 42 returns "number"
These operators are essential for performing computations, comparisons, and logic in
programs.
Q5 Explain different conditional statements in JavaScript.
Ans Conditional statements control program flow based on conditions.
1. if statement:
if (age >= 18) {
[Link]("Adult");
}
2. if-else:
if (marks >= 50) {
[Link]("Pass");
} else {
[Link]("Fail");
}
3. else-if ladder:
if (marks >= 90) {
grade = "A";
} else if (marks >= 75) {
grade = "B";
} else {
grade = "C";
}
4. switch statement:
switch(day) {
case 1: [Link]("Monday"); break;
case 2: [Link]("Tuesday"); break;
default: [Link]("Invalid day");
}
These statements help make decisions and improve the logic structure.
Q6. Explain different looping statements in JavaScript.
Ans JavaScript supports several loops for repeating tasks.
1. for Loop:
Used when the number of iterations is known.
for (let i = 1; i <= 5; i++) {
[Link](i);
}
2. while Loop:
Used when condition is checked before execution.
let i = 1;
while (i <= 5) {
[Link](i);
i++;
}
3. do-while Loop:
Runs at least once even if condition is false.
let i = 1;
do {
[Link](i);
i++;
} while (i <= 5);
4. for...in Loop:
Used to loop through object keys.
let person = {name: "Aaqib", age: 21};
for (let key in person) {
[Link](key + ": " + person[key]);
}
5. for...of Loop:
Used to loop through iterable items like arrays.
let colors = ["Red", "Green"];
for (let color of colors) {
[Link](color);
}
Loops help in automation, repetition, and dynamic handling of data.
Q7. Explain arrays in JavaScript and write a JavaScript to sort array items.
Ans An array in JavaScript is a collection of ordered values.
Syntax:
let fruits = ["Banana", "Apple", "Cherry"];
[Link](fruits[0]); // Output: Banana
Arrays can store strings, numbers, objects, even other arrays.
Common Methods:
push(), pop() – Add/remove elements
sort() – Sorts array
length – Returns number of elements
Example: Sorting Numbers
let numbers = [9, 2, 5, 1];
[Link](function(a, b) {
return a - b;
});
[Link](numbers); // Output: [1, 2, 5, 9]
Sort Strings Alphabetically:
let fruits = ["Banana", "Apple", "Mango"];
[Link]();
[Link](fruits); // ["Apple", "Banana", "Mango"]
Arrays are essential for managing collections of data in lists, tables, or APIs.
Q8. Explain different JavaScript objects in detail.
Ans JavaScript objects are key-value collections. Values can be primitives or other
objects/functions.
Object Creation:
let car = {
brand: "Toyota",
model: "Camry",
year: 2023,
start: function() {
return "Car started";
}
};
Accessing:
Dot: [Link]
Bracket: car["model"]
Modifying:
[Link] = 2024;
[Link] = "Black";
Nested Object:
let student = {
name: "Ali",
marks: {
math: 90,
science: 85
}
};
Objects represent real-world entities and are core to object-oriented JavaScript.
Q9. Write CSS for Fonts, Background, Color, and Text.
Ans CSS controls the style and appearance of web content.
Example CSS:
body {
background-color: #f0f0f0;
color: #333;
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
color: blue;
text-align: center;
text-transform: uppercase;
}
p{
font-style: italic;
text-decoration: underline;
}
Properties Used:
font-family: Sets the typeface
font-size: Sets size
color: Text color
background-color: Page color
text-align: Aligns text
text-transform: Uppercase/lowercase
text-decoration: Underline/strike
These styles enhance readability, accessibility, and user experience.
