2nd Internal Schema

Subject: WEB TECHNOLOGIES Subject Code: MMC105

Date: 26-03-2025 Duration: 1Hr: 30Min Max. Marks:40

Answer any two full questions:-

Question Bloom’s
Questions Marks CO’s
Number Level
a) What is JavaScript, and what are its main uses in web 10 L1 CO3
1 development?
Ans: JavaScript is a versatile programming language
extensively used in web development. It empowers
interactive features like form validation, dynamic content
updates, and user interface enhancements. Furthermore,
it's employed in server-side scripting, mobile app
development, game development, and even desktop
application development through frameworks like
Electron.

Uses-of-JavaScript-copy
Uses of JavaScript
Let's discuss the uses of JavaScript:

Table of Content

Web Development
Web Applications
Front-End Development
Server Applications
Back-End Development
Web Servers
Games
Art
Smartwatch Apps
Mobile Apps
Data Visualization
API Development
Web Development
Web development encompasses the creation of websites
and web applications. It involves front-end development
for user interfaces and back-end development for server-
side functionality. HTML, CSS, and JavaScript are
fundamental languages, while frameworks and tools
enhance efficiency and interactivity.
Web Applications
Web applications are software programs accessible via
web browsers. They provide various services and
functionalities, including online shopping, social media,
and productivity tools. They rely on technologies like
HTML, CSS, and JavaScript for user interaction and data
processing.

Front-End Development
JavaScript is essential for front-end web development. It
enables the creation of interactive user interfaces, form
validation, and the manipulation of the Document Object
Model (DOM) to update the content and structure of web
pages dynamically.

Server Applications
Server applications in JavaScript, using platforms like
Node.js, leverage its event-driven, non-blocking
architecture. They manage network requests, perform data
processing, and enable real-time communication, making
JavaScript a versatile choice for building scalable and
efficient server-side solutions.

Back-End Development
JavaScript is primarily a client-side language, it can also
be used for server-side development using platforms like
Node.js. Node.js allows developers to build scalable and
high-performance server applications using JavaScript,
making it possible to use the same language for both
front-end and back-end development.

Web Servers
Web servers in JavaScript, often implemented using
Node.js, handle incoming HTTP requests, process data,
and generate responses for websites and applications.
JavaScript's non-blocking I/O and event-driven nature
enable high-performance, scalable web servers.

Games
JavaScript is used to create web-based games, from
simple puzzles to complex 3D adventures. Libraries like
Phaser and Three.js facilitate game development, making
it accessible and interactive for users in web browsers.

Art
JavaScript is used in digital art creation and generative
art. Artists use code to create interactive, visual, and
dynamic pieces, leveraging libraries like p5.js and
Three.js to manipulate graphics, animations, and user
 interactions.

Smartwatch Apps
JavaScript is used in smartwatch app development,
particularly for platforms like Fitbit and Garmin.
Developers utilize JavaScript to create custom watch
faces, widgets, and interactive applications, enhancing the
functionality and user experience of smartwatches.

Mobile Apps
JavaScript is employed in mobile app development
through frameworks like React Native and Apache
Cordova. It enables cross-platform app creation for iOS
and Android, using a single codebase, making it efficient
for building mobile applications.

Data Visualization
Data Visualization involves presenting data in graphical
or pictorial formats to make complex datasets easier to
understand, analyze, and interpret, aiding in identifying
patterns, trends, and insights.

API Development
API Development involves designing, building, and
maintaining Application Programming Interfaces (APIs)
that enable communication between different software
applications or services. APIs define the methods and
protocols for data exchange, allowing seamless
integration and interaction between systems.

b) Explain the controls statements in JavaScript with an 10 L2 CO3

example.
Ans: JavaScript control statement is used to control the
execution of a program based on a specific condition. If
the condition meets then a particular block of action will
be executed otherwise it will execute another block of
action that satisfies that particular condition.
Types of Control Statements in JavaScript
 Conditional Statement: These statements are used
for decision-making, a decision
 n is made by the conditional statement based on an
expression that is passed. Either YES or NO.
 Iterative Statement: This is a statement that iterates
repeatedly until a condition is met. Simply said, if we
have an expression, the statement will keep repeating
itself until and unless it is satisfied.
There are several methods that can be used to perform
control statements in JavaScript:
Table of Content
 If Statement
 Using If-Else Statement
 Using Switch Statement
 Using the Ternary Operator (Conditional Operator)
 Using For loop
Approach 1: If Statement
In this approach, we are using an if statement to check a
specific condition, the code block gets executed when the
given condition is satisfied.
Syntax:
if ( condition_is_given_here ) {
// If the condition is met,
//the code will get executed.
}
Example: In this example, we are using an if statement to
check our given condition.
 Javascript

const num = 5;

if (num > 0) {
console.log("The number is positive.");
};

Output
The number is positive.
Approach 2: Using If-Else Statement
The if-else statement will perform some action for a
specific condition. If the condition meets then a particular
code of action will be executed otherwise it will execute
another code of action that satisfies that particular
condition.
Syntax:
if (condition1) {
// Executes when condition1 is true
if (condition2) {
// Executes when condition2 is true
}
}
Example: In this example, we are using the if..else
statement to verify whether the given number is positive
or negative.
 Javascript

let num = -10;

if (num > 0)
console.log("The number is positive.");
else
console.log("The number is negative");
 Output
The number is negative

OR
a) Explain the concept of arrays in JavaScript. How do 10 L2 CO3
2 you access elements in an array?
Ans: In JavaScript, an array is an ordered list of values.
Each value is called an element, and each element has a
numeric position in the array, known as its index. Arrays
in JavaScript are zero-indexed, meaning the first element
is at index 0, the second at index 1, and so on.

Array in JavaScript
1. Create Array using Literal
Creating an array using array literal involves using square
brackets [] to define and initialize the array.
// Creating an Empty Array
let a = [];
console.log(a);

// Creating an Array and Initializing with Values

let b = [10, 20, 30];
console.log(b);

Output
[]
[ 10, 20, 30 ]
2. Create using new Keyword (Constructor)
The “Array Constructor” refers to a method of creating
arrays by invoking the Array constructor function.
// Creating and Initializing an array with values
let a = new Array(10, 20, 30);

console.log(a);

Output
[ 10, 20, 30 ]
Note: Both the above methods do exactly the same. Use
the array literal method for efficiency, readability, and
speed.
Recommended Links
 Insert Elements in a JS array
 Delete Elements from a JS Array
 Interesting Facts about JavaScript Arrays
 JavaScript Array Reference
 JavaScript Array Examples
 Cheat Sheet-A Basic guide to JavaScript.
Basic Operations on JavaScript Arrays
1. Accessing Elements of an Array
Any element in the array can be accessed using the index
number. The index in the arrays starts with 0.
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"];

// Accessing Array Elements

console.log(a[0]);
console.log(a[1]);

Output
HTML
CSS
2. Accessing the First Element of an Array
The array indexing starts from 0, so we can access first
element of array using the index number.
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"];

// Accessing First Array Elements

let fst = a[0];

console.log("First Item: ", fst);

Output
First Item: HTML
3. Accessing the Last Element of an Array
We can access the last array element using [array.length –
1] index number.
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"];

// Accessing Last Array Elements

let lst = a[a.length - 1];

console.log("First Item: ", lst);

Output
First Item: JS
4. Modifying the Array Elements
Elements in an array can be modified by assigning a new
value to their corresponding index.
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"];
console.log(a);

a[1]= "Bootstrap";
console.log(a);

Output
[ 'HTML', 'CSS', 'JS' ]
[ 'HTML', 'Bootstrap', 'JS' ]
5. Adding Elements to the Array
Elements can be added to the array using methods
like push() and unshift().
 The push() method add the element to the end of the
array.
 The unshift() method add the element to the starting
of the array.
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"];

// Add Element to the end of Array

a.push("Node.js");

// Add Element to the beginning

a.unshift("Web Development");

console.log(a);

Output
[ 'Web Development', 'HTML', 'CSS', 'JS', 'Node.js' ]
6. Removing Elements from an Array
To remove the elements from an array we have different
methods like pop(), shift(), or splice().
 The pop() method removes an element from the last
index of the array.
 The shift() method removes the element from the first
index of the array.
 The splice() method removes or replaces the element
from the array.
// Creating an Array and Initializing with Values
let a = ["HTML", "CSS", "JS"];
console.log("Original Array: " + a);

// Removes and returns the last element

let lst = a.pop();
console.log("After Removing the last: " + a);

// Removes and returns the first element

let fst = a.shift();
console.log("After Removing the First: " + a);

// Removes 2 elements starting from index 1

a.splice(1, 2);
console.log("After Removing 2 elements starting from
index 1: " + a);

Output
Original Array: HTML,CSS,JS
After Removing the last: HTML,CSS
After Removing the First: CSS
 After Removing 2 elements starting from index 1: CSS

b) Explain the concept of functions in JavaScript. How 10 L2 CO3

do you define and call a function?
Ans: Functions in JavaScript are reusable blocks of code
designed to perform specific tasks. They allow you to
organize, reuse, and modularize code. It can take inputs,
perform actions, and return outputs.
function sum(x, y) {
return x + y;
}
console.log(sum(6, 9));

Output
15
Function Syntax and Working
A function definition is sometimes also termed a function
declaration or function statement. Below are the rules for
creating a function in JavaScript:
 Begin with the keyword function followed by,
 A user-defined function name (In the above example,
the name is sum)
 A list of parameters enclosed within parentheses and
separated by commas (In the above example,
parameters are x and y)
 A list of statements composing the body of the
function enclosed within curly braces {} (In the above
example, the statement is “return x + y”).
Return Statement
In some situations, we want to return some values from a
function after performing some operations. In such cases,
we make use of the return. This is an optional statement.
In the above function, “sum()” returns the sum of two as a
result.
Function Parameters
Parameters are input passed to a function. In the above
example, sum() takes two parameters, x and y.
Calling Functions
After defining a function, the next step is to call them to
make use of the function. We can call a function by using
the function name separated by the value of parameters
enclosed between the parenthesis.
// Function Definition
function welcomeMsg(name) {
return ("Hello " + name + " welcome to
GeeksforGeeks");
}

let nameVal = "User";

 // calling the function
console.log(welcomeMsg(nameVal));

Output
Hello User welcome to GeeksforGeeks
Why Functions?
 Functions can be used multiple times, reducing
redundancy.
 Break down complex problems into manageable
pieces.
 Manage complexity by hiding implementation details.
 Can call themselves to solve problems recursively.

a) Explain the DOM (Document Object Model) in 10 L1 CO4

3 JavaScript. What are the properties of the DOM?
Ans: Introduction to the DOM
The Document Object Model (DOM) is the data
representation of the objects that comprise the structure and
content of a document on the web. This guide will introduce
the DOM, look at how the DOM represents
an HTML document in memory and how to use APIs to create
web content and applications.
What is the DOM?
The Document Object Model (DOM) is a programming
interface for web documents. It represents the page so that
programs can change the document structure, style, and
content. The DOM represents the document as nodes and
objects; that way, programming languages can interact with
the page.
A web page is a document that can be either displayed in the
browser window or as the HTML source. In both cases, it is
the same document but the Document Object Model (DOM)
representation allows it to be manipulated. As an object-
oriented representation of the web page, it can be modified
with a scripting language such as JavaScript.
For example, the DOM specifies that
the querySelectorAll method in this code snippet must return
a list of all the <p> elements in the document:
jsCopy to Clipboard
const paragraphs = document.querySelectorAll("p");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);
All of the properties, methods, and events available for
manipulating and creating web pages are organized into
objects. For example, the document object that represents the
document itself, any table objects that implement
the HTMLTableElement DOM interface for accessing HTML
tables, and so forth, are all objects.
The DOM is built using multiple APIs that work together. The
core DOM defines the entities describing any document and
the objects within it. This is expanded upon as needed by
other APIs that add new features and capabilities to the DOM.
 For example, the HTML DOM API adds support for
representing HTML documents to the core DOM, and the
SVG API adds support for representing SVG documents.

b) What is Angular JS? Explain the following Angular JS 10 L2 CO4

directives:
(i) ng_app (ii) ng_model (iii) ng_bind
Ans: AngularJS is a JavaScript-based framework for
building single-page applications, and directives
are markers on HTML elements that tell AngularJS to
attach a specific behavior or functionality to that
element. Here's a breakdown of the directives you've
asked about:
1. ng-app:
 Functionality: This directive designates the root
element of an AngularJS application, telling
AngularJS to start processing the application from
that element.
 Example: <div ng-app="myApp"> ... </div>
 Note: You can only have one ng-app directive in your
HTML document.
2. ng-model:
 Functionality: This directive binds the value of
HTML controls (like <input>, <select>,
or <textarea>) to application data, enabling two-way
data binding.
 Example: <input type="text" ng-
model="myVariable">
 Explanation: When the user types in the input field,
the myVariable in the AngularJS scope is
automatically updated, and vice-versa.
3. ng-bind:
 Functionality: This directive binds the text content of
an HTML element to a variable or expression in the
AngularJS scope.
 Example: <p ng-bind="myVariable"></p>
 Explanation: The text content of the <p> element
will display the value of myVariable, and it will
update automatically when myVariable changes.

OR
a) Write an Angular JS program to use expressions. 10 L1 CO4
4 Ans: AngularJS Expressions
In AngularJS, expressions are used to bind application
data to HTML. AngularJS resolves the expression, and
return the result exactly where the expression is written.
Expressions are written inside double braces
{{expression}}.They can also be written inside a
directive:
PauseNext
 Mute
Current Time 0:19
/
Duration 7:01
Loaded: 16.13%
Fullscreen
1. ng-bind="expression".
AnularJS expressions are very similar to JavaScript
expressions. They can contain literals, operators, and
variables. For example:
1. {{ 5 + 5 }} or {{ firstName + " " + lastName }}
AngularJS Expressions Example
1. <!DOCTYPE html>
2. <html>
3. <script src="http://ajax.googleapis.com/ajax/libs/
angularjs/1.4.8/angular.min.js"></script>
4. <body>
5. <div ng-app>
6. <p>A simple expression example: {{ 5 + 5 }}</p>
7. </div>
8. </body>
9. </html>
Note: If you remove the directive "ng-app", HTML will
display the expression without solving it.
See this example:
1. <!DOCTYPE html>
2. <html>
3. <script src="http://ajax.googleapis.com/ajax/libs/
angularjs/1.4.8/angular.min.js"></script>
4. <body>
5. <p>If you remove the directive "ng-app", HTML will
display the expression without solving it.</p>
6. <div>
7. <p>A simple expression example: {{ 5 + 5 }}</p>
8. </div>
9. </body>
10. </html>

b) Briefly discuss the use of filter in Angular JS with an 10 L2 CO4

example.
Ans: The “filter” Filter in AngularJS is used to filter the
array and object elements and return the filtered items. In
other words, this filter selects a subset (a smaller array
containing elements that meet the filter criteria) of an
array from the original array.
Syntax:
{{arrayexpression | filter: expression : comparator :
anyPropertyKey}}
Parameter Values:
 arrayexpression: The source array on which the
 filter will be applied.
 expression: It is used to select the items from the
array after the filter conditions are met. It can be of
String type, Function type, or Object type.
 comparator: It is used to determine the value by
comparing the expected value from the filter
expression, and the actual value from the object array.
 anyPropertyKey: It is an optional parameter having
the special property that is used to match the value
against the given property. It is of String type & its
default value is $.
Example 1: This example describes the AngularJS filter
Filter by filtering & rendering the name only having the
character “e” in the name.
 HTML

<!DOCTYPE html>
<html>

<head>
<title>AngularJS filter Filter</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js
</script>
</head>

<body>
<div ng-app="myApp"
ng-controller="namesCtrl">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>AngularJS filter Filter</h3>
<ol>
<strong>
<li ng-repeat="x in names | filter : 'e'">
{{ x }}
</li>
</strong>
</ol>
</div>
<script>
angular.module('myApp', [])
.controller('namesCtrl', function($scope) {
$scope.names = [
'Jani', 'Carl', 'Margareth',
'Hege Mathew', 'Joey Tribiani',
'Gustav', 'Birgit', 'Mary', 'Kai'
];
 });
</script>
<p>
This example displays the names containing the
character "e"(filter)
</p>
</body>
</html>

Output: