Unit Iii
Unit Iii
UNI
T-III
CLIENT SIDE PROCESSING AND SCRIPTING
Introduction To JavaScript
Variables And Data types
Statements
Operators
Literals
Functions
Objects
Arrays
Regular expressions, Event handling
JavaScript Debuggers
May-11
7. State the types of JavaScript statements with examples.
Dec-13
8. What are object literal in javascript.
Dec-18
9. Write a JavaScript that searches word in sentence and returns the
index of the word.
Dec-19
10. What are global functions in java Script?
11. Give few operators supported by JavaScript.
May-23
12. List the different built – in objects available in JavaScript.
May-23
13. State the purpose of the following special datatypes associated with
JavaScript.
BigInt (ES11+)
May-24
Primitive Wrapper Objects.
14. Write a JavaScript code snippet for Exception handling.
May-24
PART –B
1. Write a Java Script to print “Good Day” using IF-ELSE condition.
May-14
2. List any four methods of date object.
Dec-16
3. How exceptions are handled in JavaScript?
May-17
4. Write a JavaScript that searches a word in sentence and returns the
index of the word.
Dec-19
5. Explain the looping statements supported in JavaScript with
examples. May-23
6. What are exceptions? How exceptions are handled in javascript?
May-23
ANSWERS:
1. What is the benefits of using JavaScript code in an HTML document?
Dec-07
1. Interactivity
Dropdown menus
Image sliders
Dynamic content updates
2. Dynamic Content Updates
Live search suggestions
Real-time notifications
Chat interfaces
2. Expression Statements
Performs a calculation or assignment. These are often part of other
statements.
x = 10 + 5; // Assignment expression
y++; // Increment expression
3. Conditional Statements
Used to make decisions in code.
if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
}
// While loop
let i = 0;
while (i < 3) {
console.log("Hello");
i++;
6. Switch Statement
Used to handle multiple conditions.
let day = "Monday";
switch (day) {
case "Monday":
console.log("Start of the week!");
break;
case "Friday":
console.log("Weekend is near!");
break;
default:
console.log("Midweek day");}
try {
let result = riskyFunction();
} catch (error) {
console.log("Something went wrong:", error);}
8. Return Statement
Used to return a value from a function.
function add(a, b)
{
return a + b;
}
let person = {
name: "Alice",
age: 25,
city: "New York",
greet: function() {
console.log("Hello, " + this.name);
}
};
findWordIndex(sentence, wordToFind);
2. Assignment Operators
= (Assignment): x = 10
+= (Add and assign): x += 5 → same as x = x + 5
-= (Subtract and assign)
*= (Multiply and assign)
/= (Divide and assign)
3. Comparison Operators
== (Equal to): 5 == '5' → true (type coercion)
=== (Strict equal): 5 === '5' → false
!= (Not equal)
!== (Strict not equal)
> (Greater than)
< (Less than)
>= (Greater than or equal to)
<= (Less than or equal to)
4. Logical Operators
&& (Logical AND)
|| (Logical OR)
! (Logical NOT)
5. Bitwise Operators
&, |, ^, ~, <<, >>, >>>
6. Unary Operators
typeof (Returns the type of a variable)
delete (Deletes an object property)
++ (Increment)
-- (Decrement)
7. Ternary Operator
condition?expr1:expr2
Example: let result = (a > b) ? "A" : "B";
12.List the different built – in objects available in JavaScript.
May-23
1. Fundamental Objects
Object
Function
Boolean
Symbol
BigInt
2. Numbers and Dates
Number
Math
Date
3. Text Processing
String
RegExp
4. Indexed Collections
Array
Int8Array, Uint8Array, Uint8ClampedArray
Int16Array, Uint16Array
Int32Array, Uint32Array
Float32Array, Float64Array
5. Keyed Collections
Map
Set
WeakMap
WeakSet
6. Structured Data
ArrayBuffer
SharedArrayBuffer
DataView
JSON
7. Control Abstractions
Promise
Generator
GeneratorFunction
AsyncFunction
8. Reflection and Introspection
Reflect
Proxy
9. Error Objects
Error
SyntaxError
ReferenceError
TypeError
RangeError
URIError
EvalError
JavaScript.
JavaScript has a few special (or primitive) datatypes like:
1. undefined
2. null
3. Symbol
4. BigInt
5. NaN (technically a special value of the Number type)
Boolea
Boolean
n
Sym
Symbol
bol
BigI
BigInt
nt
try {
// Code that may throw an error
let result = riskyOperation();
console.log("Result:", result);
} catch (error) {
// Code to handle the error
console.error("An error occurred:", error.message);
} finally {
// This block always runs (optional)
console.log("Execution completed.");
}
ANSWERS PART –B
1. Write a Java Script to print “Good Day” using IF-ELSE condition.
May-14
<html>
<head>
<script>
Function MyMessage()
{
Var today=new Date();
Var h=today.getHours();
If(h<12)//After 12 O’clock Say Good Bye
//Before 12 O’clock say Good Day
Document.wite(“Good Bye”);
}
</script>
</head>
<body on;oad=”MyMessage()”>
</body>
</html>
Method Meaning
getTime() It returns the number of milliseconds. This
value is the difference between the current time
and the time value from 1st January 1970.
getDate() Returns the current date based on computers
local time.
getDay() Returns the current day. The day number is
from 0 to 6 i.e. from Sunday to Saturday.
getHours() Returns the hour value ranging from 0 to 23,
based on loacal time.
getSeconds() Returns the second value ranging from 0 to 59,
based on local time.
<!DOCTYPE html>
<head>
<script type=”text/javascript>
1. for loop
Output:
javascript
CopyEdit
Number: 0
Number: 1
Number: 2
Number: 3
Number: 4
2. while loop
3. do...while loop
Same as while, but it runs at least once even if the condition is false.
let i = 0;
do {
console.log("Index: " + i);
i++;
} while (i < 5);
4. for...in loop
5. for...of loop
if (i === 3) break;
console.log(i); // prints 0, 1, 2
}
let result = 10 / 0;
console.log(result); // Infinity (not an exception)
Syntax:
try {
} catch (error) {
} finally {
Example:
try {
console.log(result);
} catch (error) {
} finally {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Highlight Words with Regex</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
#output {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
white-space: pre-wrap;
}
</style>
</head>
<body>
<h2>Highlight Words</h2>
<textarea id="textInput" rows="8" cols="50"
placeholder="Type or paste your text
here..."></textarea><br><br>
<button onclick="highlightWords()">Highlight
words</button>
<div id="output"></div>
<script>
function highlightWords() {
const inputText =
document.getElementById("textInput").value;
const outputDiv =
document.getElementById("output");
</body>
</html>
8. Explain about the event handling in JavaScript. List down the various types
of events that are supported by Java script. (7)
May-24
Event handling in JavaScript is a way to execute code in response to
interactions or occurrences (called events) on a web page. Events can be user
actions like clicking, typing, hovering, or system-generated actions like page
loading, media playing, etc.
You use event listeners (also called event handlers) to respond to these events.
document.getElementById("myButton").addEventListener("click",
function() {
alert("Button clicked!");
});
button.onclick = function() {
alert("Hello!");
};
button.addEventListener("click", sayHello);
⌨️ Keyboard Events
Event Description
keydown A key is pressed down
keyup A key is released
keypress A key is pressed (deprecated, use keydown)
📝 Form Events
Event Description
submit Form is submitted
change Value of input, select, or textarea changes
input Value of an <input> or <textarea> is modified
focus Element gains focus
blur Element loses focus
🌐 Window Events
Event Description
load Page finishes loading
resize Window is resized
scroll User scrolls the page
unload Page is unloaded
📦 Miscellaneous Events
Event Description
Contextmenu Right-click on an element
Touchstart Touch starts on a touchscreen
Touchend Touch ends
Dragstart Dragging starts
Drop Item is dropped
12.Describe how event in Javascript move through the DOM tree in two
distinct stages. (6) May-
24
In JavaScript, events move through the DOM tree in a process called
event propagation, which happens in two main stages (actually three, but
usually two are emphasized). Here's how it works:
2. Target Phase
The event reaches the target element — the exact element that was interacted with.
Both capturing and bubbling listeners can run on the target element during this
phase.
🖼️ Visual Flow:
Document
└── <div id="outer">
└── <button id="inner">Click me</button>
If you click the <button>:
1. Capture Phase: document → div#outer → button#inner
2. Target Phase: Event runs on button#inner
3. Bubble Phase: button#inner → div#outer → document
Example Code:
<div id="outer">
<button id="inner">Click Me</button>
</div>
<script>
document.getElementById("outer").addEventListener("click",
() => {
console.log("Outer DIV (bubbling)");
});
document.getElementById("outer").addEventListener("click",
() => {
console.log("Outer DIV (capturing)");
}, true);
document.getElementById("inner").addEventListener("click",
() => {
console.log("Button (target)");
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Good Morning Greeting</title>
</head>
<body>
<script>
// Get the current hour from browser
const currentHour = new Date().getHours();
</body>
</html>
14. Write a Javascript to find and print the largest and smallest values
among 10 elements of an array.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Largest and Smallest Finder</title>
</head>
<body>
<script>
// Define an array of 10 numbers
const numbers = [12, 5, 89, 34, 7, 22, 67, 3, 99, 15];
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Greeting Based on Time</title>
</head>
<body>
<h2>Time-Based Greeting</h2>
<p id="message"></p>
<script>
// Get the current hour using JavaScript's Date object
const currentHour = new Date().getHours();
</body>
</html>
15.Write a Javascript to find and print the largest and smallest values among 10
elements of an array. (8) May-10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Find Largest and Smallest</title>
</head>
<body>
<script>
// Define an array with 10 numbers
const numbers = [23, 5, 88, 42, 16, 77, 9, 34, 1, 60];
}
}
</body>
</html>