Scribd
Upload
5 views14 pages

Web Dev Exam Help

The document provides answers and explanations for various web development topics, including JavaScript, CSS, AngularJS, and Node.js, structured for easy memorization for an exam. It covers concepts like responsive websites, types of CSS, pseudo-classes, AngularJS features, and the Node.js event loop phases. Additionally, it includes code examples and tips for understanding key concepts, aiming to help students score well in their exams.

Uploaded by

SUTARIYA TULASI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views14 pages

Web Dev Exam Help

The document provides answers and explanations for various web development topics, including JavaScript, CSS, AngularJS, and Node.js, structured for easy memorization for an exam. It covers concepts like responsive websites, types of CSS, pseudo-classes, AngularJS features, and the Node.js event loop phases. Additionally, it includes code examples and tips for understanding key concepts, aiming to help students score well in their exams.

Uploaded by

SUTARIYA TULASI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Web Dev Exam Help

today is web dev mid semester exam i give question give ans as give you previous chat like easy to
remember and easy way ans of this with sutable marks and sutabile marks, i provide question paper
of previous year

Sure! Upload the previous year's question paper, and I'll provide answers in an easy-to-remember
format along with suitable marks for each question.

Uploaded image
give ans

Here are the answers to your Advanced Web Programming mid-semester exam questions in an easy-
to-remember format with suitable marks:

Q.1 A: Attempt All Questions


1. JavaScript code to display text with increasing font size (6 Marks)

javascript

let text = document.createElement("p");


text.innerText = "Gujarat Technological University";
text.style.color = "blue";
text.style.fontSize = "10px";
document.body.appendChild(text);

let size = 10;


let interval = setInterval(() => {
if (size >= 50) {
clearInterval(interval);
} else {
size += 2;
text.style.fontSize = size + "px";
}
}, 50);

✅ Concepts Used: DOM Manipulation, `setInterval()`, CSS Styling

2. Demonstrate CSS Pseudo-classes with an example (6 Marks)

✅ Definition:
Pseudo-classes in CSS define special states of an element, like `:hover`, `:focus`, `:first-child`.

✅ Example:
Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 1/14
css

button:hover {
background-color: blue;
color: white;
}
input:focus {
border: 2px solid green;
}

✅ Easy Tip to Remember: `:hover` changes style on mouse over, `:focus` works when an element is
clicked.
OR

2. Why is MongoDB needed? List features of MongoDB. (6 Marks)

✅ Why MongoDB?
It is a NoSQL database, meaning it stores data in JSON-like format (BSON).
Scalable, fast, and flexible.

✅ Features of MongoDB:
1. Schema-less – No fixed structure like SQL.
2. Document-Oriented – Uses JSON-like documents.
3. High Performance – Faster than SQL for large datasets.
4. Horizontal Scalability – Uses Sharding to distribute data.
5. Indexing – Supports powerful indexing.

Q.2 B: Attempt All Questions


3. Design a webpage to display product name and price using AngularJS $http
Service (6 Marks)

✅ HTML + AngularJS Code:


html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="ProductController">
<table border="1">
<tr>
<th>Product Name</th>
<th>Price</th>
</tr>
<tr ng-repeat="product in products">
<td>{{ product.name }}</td>
<td>{{ product.price }}</td>
</tr>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("ProductController", function($scope, $http) {

Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 2/14
$http.get("products.json").then(function(response) {
$scope.products = response.data;
});
});
</script>
</body>
</html>

✅ Easy Tip to Remember: Use `$http.get()` to fetch data and `ng-repeat` to display in table format.

4. Why is AngularJS called a Single Page Application (SPA)? Benefits? (6 Marks)

✅ Why SPA?
In SPA, only one HTML page loads initially, and content updates dynamically without refreshing
the page.
Uses AJAX and AngularJS routing to change views.

✅ Benefits of AngularJS:
1. Faster Performance – Only required data loads, not the whole page.
2. Two-Way Data Binding – UI updates automatically when data changes.
3. Modular Code – Uses components & controllers.
4. REST API Integration – Easily connects with backend APIs.
5. Deep Linking – Allows bookmarking of dynamic views.

OR

4. Discuss various Filters used in AngularJS. (6 Marks)

✅ Common Filters in AngularJS:


1. `currency` – Formats numbers as currency.
2. `uppercase` & `lowercase` – Changes text case.
3. `filter` – Filters array data.
4. `orderBy` – Sorts data in ascending/descending order.
5. `date` – Formats dates.

✅ Example:
html

<p>{{ 1234.5 | currency }}</p> <!-- Output: $1,234.50 -->


<p>{{ "hello" | uppercase }}</p> <!-- Output: HELLO -->

5. Describe Phases of the Node.js Event Loop. (6 Marks)

✅ Event Loop Phases:


1. Timers Phase – Executes `setTimeout()` and `setInterval()`.
2. I/O Callbacks Phase – Executes pending I/O callbacks (excluding timers).
3. Idle, Prepare Phase – Internal operations (not used often).
4. Poll Phase – Retrieves new I/O events and executes callbacks.

Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 3/14
5. Check Phase – Executes `setImmediate()` callbacks.
6. Close Callbacks Phase – Handles `close` events like `socket.on("close")`.

✅ Easy Tip to Remember: "T-I-P-P-C-C" (Timers, I/O, Poll, Prepare, Check, Close).
OR

5. Create a Node.js program for file operations (read, write, delete). (6 Marks)

✅ Code Example:
javascript

const fs = require('fs');

// Write to file
fs.writeFileSync("example.txt", "Hello, Node.js!");

// Read file
const data = fs.readFileSync("example.txt", "utf8");
console.log("File Content:", data);

// Delete file
fs.unlinkSync("example.txt");
console.log("File deleted!");

✅ Concepts Used: `fs.writeFileSync()`, `fs.readFileSync()`, `fs.unlinkSync()`.

These answers are structured for easy memorization and scoring well in the exam. Let me know if you
need any modifications! 🚀🔥

this is another previous paper give ans

Here are the easy-to-remember answers for your Advanced Web Programming exam (March 2024
paper) with suitable marks:

Q.1 A: Explain the use of the following input field states. (3


Marks)

Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 4/14
✅ AngularJS input field states:
1. $untouched – The field has not been clicked yet.
2. $touched – The field has been clicked at least once.
3. $pristine – The field has not been modified (remains in original state).
4. $dirty – The field has been modified by the user.

✅ Example in AngularJS:
html

<input type="text" ng-model="name" ng-class="{'dirty': myForm.name.$dirty}" name="name">

Q.1 B: Explain an Event Loop in Node.js. (4 Marks)


✅ Event Loop in Node.js manages asynchronous operations.
✅ Phases of Event Loop:
1. Timers Phase – Executes `setTimeout()` & `setInterval()`.
2. I/O Callbacks Phase – Executes pending I/O operations.
3. Idle, Prepare Phase – Internal processes.
4. Poll Phase – Handles I/O events.
5. Check Phase – Executes `setImmediate()` callbacks.
6. Close Callbacks Phase – Handles closed connections.

✅ Easy Tip to Remember: "T-I-P-P-C-C" (Timers, I/O, Poll, Prepare, Check, Close).
OR

Q.1 B: Create an example demonstrating AngularJS Routing. (4


Marks)
✅ AngularJS Routing allows switching between views without reloading the page.
✅ Example:
1. Include `angular-route.js`
2. Define Routes in AngularJS

html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></scrip
</head>
<body>
<a href="#!home">Home</a> | <a href="#!about">About</a>
<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/home", { template: "<h2>Welcome Home</h2>" })

Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 5/14
.when("/about", { template: "<h2>About Us</h2>" });
});
</script>
</body>
</html>

✅ Easy Tip to Remember: Use `ng-view` + `$routeProvider` for routing.

Q.2 A: Describe types and advantages of CSS. (3 Marks)


✅ Types of CSS:
1. Inline CSS – Written inside the tag.

html

<h1 style="color: red;">Hello</h1>

2. Internal CSS – Written inside `<style>` in the `<head>`.

html

<style> h1 { color: blue; } </style>

3. External CSS – Written in a separate `.css` file.

css

h1 { color: green; }

✅ Advantages of CSS:
1. Faster Page Speed – CSS reduces HTML code size.
2. Easy Maintenance – Change styles in one place.
3. Improves UX – Enhances website design.
4. Responsive Design – Adapts to screen sizes.

Q.2 B: JavaScript to check if a number is Prime. (4 Marks)


✅ JavaScript Code:
javascript

function isPrime(num) {
if (num <= 1) return false;
for (let i = 2; i < num; i++) {
if (num % i === 0) return false;
}
return true;
}

let number = prompt("Enter a number:");


alert(isPrime(number) ? "Prime Number" : "Not a Prime Number");

Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 6/14
✅ Easy Tip to Remember: Prime numbers are only divisible by 1 and themselves.
OR

Q.2 B: Define MongoDB and Write Update & Delete Commands. (4


Marks)
✅ MongoDB Definition:
NoSQL database that stores data in JSON-like format (BSON).
Flexible schema, scalable, and high-performance.

✅ MongoDB Update Command:


javascript

db.employees.updateOne({ name: "John" }, { $set: { salary: 60000 } });

✅ MongoDB Delete Command:


javascript

db.employees.deleteOne({ name: "John" });

✅ Easy Tip to Remember:


`$set` is used to update values.
`deleteOne()` removes one record.

Q.2 C: What is Node.js? Explain its Features. (6 Marks)


✅ Definition:
Node.js is a JavaScript runtime that runs on the V8 engine.
Uses event-driven, non-blocking I/O model for high performance.

✅ Features:
1. Asynchronous & Event-Driven – Handles multiple requests at once.
2. Single Programming Language – JavaScript for both frontend & backend.
3. Scalable – Lightweight & efficient.
4. Uses NPM (Node Package Manager) – Access to thousands of libraries.
5. Fast Execution – Powered by Google's V8 engine.

OR

Q.2 C: Create an AngularJS Employee Search Application. (6


Marks)
✅ AngularJS Code:
Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 7/14
html

<!DOCTYPE html>
<html lang="en" ng-app="employeeApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="EmployeeController">
<h2>Employee List</h2>
<input type="text" ng-model="search" placeholder="Search Employee">
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr ng-repeat="emp in employees | filter:search">
<td>{{ emp.name }}</td>
<td>{{ emp.salary }}</td>
</tr>
</table>

<script>
var app = angular.module("employeeApp", []);
app.controller("EmployeeController", function($scope) {
$scope.employees = [
{ name: "John", salary: 50000 },
{ name: "Jane", salary: 60000 },
{ name: "Smith", salary: 45000 }
];
});
</script>
</body>
</html>

✅ Concepts Used: `ng-repeat`, `ng-model`, `filter` for searching.

Final Summary:

📌 Node.js Event Loop → T-I-P-P-C-C


📌 CSS Types → Inline, Internal, External
📌 MongoDB → JSON-based, for update, for delete
📌 AngularJS Routing →
`$set` `deleteOne()`
,
📌 Prime Number Check → Loop from 2 to n-1
`ng-view` `$routeProvider`

This is easy to revise and score well in your exam! Let me know if you need further explanations. 🚀🔥

and this is some topic give info releted them : What is responsive web site, types of css,what is
pseudo class in css, angular js feature, advantages, mvc in angular, routing, data binding, services,
form handling and validation,what is single page application (SPA) , what is node js, advantage of
node, feature of node, event loop in node and it's phases, why need mongodb, CRUD operation in
mongodb

Here’s a concise and easy-to-remember explanation of each topic for your Advanced Web
Programming exam preparation:

📌 What is a Responsive Website?


Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 8/14
A responsive website adjusts its layout automatically based on the screen size. It ensures the website
looks good on mobile, tablet, and desktop devices.

✅ Key Techniques:
Fluid Grid – Uses percentages instead of fixed pixels.
Flexible Images – Images resize based on the screen.
Media Queries – Applies CSS rules based on device width.
Mobile-First Design – Designed for small screens first, then larger screens.

✅ Example of Media Query:


css

@media (max-width: 600px) {


body {
background-color: lightblue;
}
}

📌 Types of CSS
1. Inline CSS – Defined inside the HTML tag.

html

<h1 style="color: red;">Hello</h1>

2. Internal CSS – Written inside the `<style>` tag in the `<head>`.

html

<style> h1 { color: blue; } </style>

3. External CSS – Stored in a separate `.css` file.

css

h1 { color: green; }

📌 What is a Pseudo-Class in CSS?


A pseudo-class applies styles to an element based on its state (hover, focus, first-child, etc.).
✅ Examples:
css

a:hover { color: red; } /* When hovered, link turns red */


input:focus { border: 2px solid blue; } /* Input field gets blue border on focus */
p:first-child { font-weight: bold; } /* First paragraph is bold */

Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 9/14
📌 AngularJS Features
✅ Key Features of AngularJS:
1. MVC Architecture – Follows Model-View-Controller pattern.
2. Two-Way Data Binding – Auto-updates UI when data changes.
3. Dependency Injection (DI) – Manages dependencies automatically.
4. Directives – Custom HTML elements like `ng-model`, `ng-repeat`.
5. Routing – Switch between views without reloading.
6. Filters – Modify data in UI (`uppercase`, `currency`, `date`).
7. Services – Used for reusable business logic (`$http`, `$scope`).

📌 Advantages of AngularJS
1. Easy to Use – Uses HTML + JavaScript for development.
2. Reduces Code – Uses directives and two-way data binding.
3. Fast Development – Less manual DOM manipulation.
4. Good for SPAs – Supports Single Page Applications.
5. Supports Testing – Unit testing is easy with AngularJS.

📌 MVC in AngularJS
MVC (Model-View-Controller) is a design pattern:

Model (M) – Manages data (`$scope` in AngularJS).


View (V) – HTML UI.
Controller (C) – Handles logic using JavaScript.

✅ Example:
javascript

var app = angular.module("myApp", []);


app.controller("myCtrl", function($scope) {
$scope.name = "John";
});

html

<div ng-app="myApp" ng-controller="myCtrl">


<p>{{ name }}</p> <!-- View updates when model changes -->
</div>

📌 Routing in AngularJS
Routing helps navigate between multiple views without reloading the page.

✅ Example using `$routeProvider`:

Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 10/14
javascript

var app = angular.module("myApp", ["ngRoute"]);


app.config(function($routeProvider) {
$routeProvider
.when("/home", { template: "<h2>Home Page</h2>" })
.when("/about", { template: "<h2>About Us</h2>" });
});

html

<a href="#!home">Home</a> | <a href="#!about">About</a>


<div ng-view></div>

📌 Data Binding in AngularJS


Data binding connects UI and logic.
✅ Two Types of Data Binding:
1. One-Way Binding: Data flows in one direction (`{{ data }}`).
2. Two-Way Binding: UI updates automatically (`ng-model`).

✅ Example:
html

<input type="text" ng-model="name">


<p>Hello, {{ name }}</p> <!-- Auto-updates as user types -->

📌 Services in AngularJS
Services are reusable functions that provide logic to controllers.

✅ Example of `$http` Service for API Calls:

javascript

app.controller("myCtrl", function($scope, $http) {


$http.get("data.json").then(function(response) {
$scope.products = response.data;
});
});

📌 Form Handling & Validation in AngularJS


✅ Example:
html

<form name="myForm">
<input type="text" ng-model="name" required>

Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 11/14
<span ng-show="myForm.name.$error.required">Name is required!</span>
</form>

📌 What is a Single Page Application (SPA)?


A Single Page Application (SPA) loads content without refreshing the page.
✅ Examples: Gmail, Facebook, Twitter.
✅ Benefits: Faster load time, smooth user experience.
✅ Uses: Angular, React, Vue.js.
📌 What is Node.js?
✅ Node.js is a runtime environment that allows JavaScript to run on the server-side.
✅ Uses the V8 engine for fast execution.
✅ Example:
javascript

const http = require("http");


http.createServer((req, res) => {
res.write("Hello, Node.js!");
res.end();
}).listen(3000);

📌 Advantages of Node.js
1. Fast Performance – Uses Google’s V8 engine.
2. Non-blocking I/O – Handles multiple requests at once.
3. Single Language – JavaScript for both frontend & backend.
4. Scalability – Handles thousands of requests easily.
5. Huge Ecosystem – Uses NPM for third-party libraries.

📌 Features of Node.js
✅ Key Features:
Event-Driven – Uses callbacks.
Asynchronous – No waiting, executes in the background.
Single-Threaded – Handles multiple requests efficiently.
NPM – Largest package manager.

📌 Event Loop in Node.js & Its Phases


The Event Loop processes multiple requests without blocking the thread.
✅ Phases:
Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 12/14
1. Timers – Executes `setTimeout()` and `setInterval()`.
2. I/O Callbacks – Executes async I/O operations.
3. Idle, Prepare – Internal processes.
4. Poll – Handles I/O events (file read, network calls).
5. Check – Executes `setImmediate()`.
6. Close Callbacks – Executes `close()` events (e.g., socket close).

✅ Easy Tip to Remember: "T-I-P-P-C-C" (Timers, I/O, Poll, Prepare, Check, Close).
📌 Why Do We Need MongoDB?
1. NoSQL Database – Stores data in JSON format.
2. Flexible Schema – No need for fixed tables like SQL.
3. Scalable – Handles large amounts of data easily.
4. High Performance – Faster than relational databases.

✅ Example Data:
json

{ "name": "Alice", "age": 25, "city": "New York" }

📌 CRUD Operations in MongoDB


✅ Create (Insert):
javascript

db.users.insertOne({ name: "John", age: 30 });

✅ Read (Find):
javascript

db.users.find();

✅ Update:
javascript

db.users.updateOne({ name: "John" }, { $set: { age: 31 } });

✅ Delete:
javascript

db.users.deleteOne({ name: "John" });

This quick revision guide covers everything you need for your exam preparation. Let me know if you
🚀🔥
need further clarifications!
Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 13/14
ChatGPT can make mistakes. Check important info.

Printed using ChatGPT to PDF, powered by PDFCrowd HTML to PDF API. 14/14

You might also like