The University of Lahore

Department of Computer Science & IT

MidTerm Examination
Fall-2024
Course Title: Web Engineering Course Code: CS02310 Credit Hours: 3+1
Course Instructors: Abdul Ghaffar Program Name: BSCS

Time Allowed: 90 Minutes Maximum Marks: 25

Date: 30-11-2024 Course Mentor: Abdul Ghaffar
Student’s Name: Signature:
Reg. No: Section: A | B

Important Instructions / Guidelines:.

• Solve subjective part on the answer sheet provided separately.
• Your paper will be marked as ZERO, if involved in any kind of cheating.

Question # 1: Short Answer/Questions ( 2 + 2 + 2 + 2 + 2 ) Marks

1. What is the difference, if you use <button type="submit"> or <input type="submit">

for <form> tag.
Answer:- Both elements trigger the form's action defined in the action attribute when clicked.
This <button> element with the type="submit" contain both text and HTML content (like
images or icons).
<button type="submit"><img src="icon.png" alt="submit"></button>
This <input> element with the type="submit" attribute only allows text to be displayed and
does not support any HTML content inside it.
<input type="submit" value="Submit Form">

2. Define the difference between Absolute vs Relative CSS position property.

position:absolute
The element is positioned relative to the nearest positioned ancestor (an ancestor element
with a position value other than static, i.e., relative, absolute, or fixed, sticky). If there is no
positioned ancestor, it will be placed relative to the viewport. For position, it use top, right,
bottom, left properties which are used to move the element away from its positioned ancestor.
For example, setting top: 10px; left: 20px; will position the element 10px from the top and 20px
from the left of its nearest positioned ancestor.
position:relative
The element is positioned relative to its normal position in the document flow. The positioning
offsets (top, right, bottom, left) move the element from its original position without affecting
other elements' layout.

Page 1 of 5
 3. React enforces a uni-directional data flow. How, please explain.
In React, unidirectional data flow means that data within a React application flows in one
direction: from parent components (via props) down to child components. Props are immutable
in the child component, meaning the child component cannot modify the data it receives from
the parent. If child component want to modify data it can pass the value to state variable or can
inform the parent through callback function to update the value.
When a child component needs to communicate changes to its parent (for example, user
input), it uses callback functions. These functions are passed down from the parent as props
and allow the child to inform the parent about state changes.
The parent then updates its own state based on the child’s actions, which results in the updated
data being passed down to the child component again.

4. React uses a technique called virtual DOM to improve performance when

updating the user interface through real DOM. How, write arguments to support
your answer.
React uses the Virtual DOM as a technique to improve the performance of updating the user interface
(UI) compared to directly manipulating the Real DOM.
➔ In Real DOM manipulation, Every time a change occurs (e.g., adding/removing elements), the
entire UI tree must be updated, which is costly in terms of performance.
➔ When the state of an object changes, React first updates the Virtual DOM. Then, it compares the
previous Virtual DOM with the new one (known as reconciliation). The diffing algorithm detects
what has changed and ensures that only those changes are applied to the Real DOM.
➔ Instead of updating the Real DOM with each small change, React collects changes and applies
them all at once through batch processing.
Example:- Consider a scenario where a user clicks a button that triggers a change in state (e.g.,
a counter increment). Here’s what happens:
1. React updates the Virtual DOM with the new state (counter value).
2. React compares the previous Virtual DOM with the new one using its diffing algorithm.
3. It calculates the minimal set of changes required (in this case, just the updated number
in the counter).
4. Only that part of the Real DOM is updated, not the entire page.
This is much more efficient than directly changing the Real DOM every time the state changes.

5. In JavaScript, Set, Array and Map are data types. Write the difference between
them.
Array:- JavaScript array is an object that represents a collection of similar type of elements. It is
a collection of multiple items under a single variable name.
Map:- Map is a collection of elements where each element is stored as a Key, value pair. Map
object can hold objects, functions and primitive values as either key or value. Map always use
the concept of key-value pair.
Set:- A JavaScript Set is a collection of unique values as compared to arrays. You can store any
type of data like Primitive values (number, string, boolean), objects, or functions.
Page 2 of 5
Question # 2: Descriptive (5) Marks
Design this App in class component and write code
for two files - calculator.js, and calculator.css

1. The user can input two numeric values.

2. The plus button (+) should add these two values,
when clicked.
3. The result of the addition should be displayed below
the button after it is clicked.

Question # 3: Write the Code: ( 2+2+3+3 Marks)

Write the JavaScript code for the following problems; do not use conventional way (C or C++) to
solve the problem. Please use JavaScript method, if possible, to solve the problem.

1. Given an integer array nums sorted in non-decreasing order, remove the duplicates in-
place such that each unique element appears only once. The relative order of the
elements should be kept the same. Then return the number of unique elements in
nums.
Example:-
Input: nums = [1,1,2]
Output: nums = [1,2]
Solution
let nums = [1,1,2];
let set = new Set(nums);
set.forEach(element => {
console.log(element);
});
Or
let setArray = [...set];
console.log(setArray)
//Output:

Page 3 of 5
 2. Merge the two lists into one sorted list. The list should be made by splicing together the
nodes of the first two lists.
Example:-
Input: list1 = [1,2,4], list2 = [1,3,4]
Output: [1,1,2,3,4,4]
Solution
let arr1 = [1,2,3,4,5]
let arr2 = [2,4,5,6,7,8,9]
let sortArray = [...arr1, ...arr2];
console.log(sortArray.sort());
//Output: [1, 2, 2, 3, 4, 4, 5, 5, 6, 7, 8, 9]
]

Or
arr1.splice(arr1.length, 0, …arr2);
or
let combineArrays = arr1.concat(arr2) //concat does not update, it return
//new array with combining both arrays.

3. Given two strings needle and haystack, return the index of the first occurrence of needle
in haystack, or -1 if needle is not part of haystack.
Example:-
Input: str1 = "sadbutsad", str2 = "but"
Output: 3
Solution
let str = 'sadbutsad';
let substring = 'but';
let index = str.indexOf(substring);
console.log(index);
// Output: 3

4. Take an array of integers nums sorted in non-decreasing order, find the starting and
ending position of a given target value.
If target is not found in the array, return [-1, -1].
Example 1:
Input: nums = [5,7,7,8,8,10], target = 8
Output: [3,4]
Solution-1
let arr = [5, 7, 7, 8, 8, 10];
// Finding the first occurrence of 8
let firstIndex = arr.indexOf(8);
console.log("First occurrence of 8:", firstIndex); // Output: 3
// Finding the last occurrence of 8
let lastIndex = arr.lastIndexOf(8);

Page 4 of 5
console.log("Last occurrence of 8:", lastIndex); // Output: 4

Second Solution
let arr1 = [1,2,8,3,4,8,2,3,8,9]
let val = 8
let indexArray = [];
let index = 0;
arr1.forEach(element => {
if(element === val){
indexArray.push(index);
}
index++;
});
console.log(indexArray);

Page 5 of 5