Q.

1 Attempt any four

1. Justify why Semantic elements are preferred over <div> element in HTML.

Semantic elements are HTML elements that have a meaningful name that describes their
content or function, such as <header>, <article>, <nav>, etc.

● <div> element is a generic container that can be used to group any HTML elements, but
it does not convey any information about its content or purpose.
● Semantic elements are preferred over <div> element in HTML because they:
a. Improve readability of the HTML code for both developers and browsers
b. Enhance accessibility for users who rely on screen readers or other assistive
technologies
c. Boost SEO (Search Engine Optimization) by providing relevant keywords and
structure for search engines to index and rank the web pages
d. Facilitate styling by reducing the need for class or id attributes and enabling the
use of CSS selectors based on semantic elements

2. How does the grid system work in bootstrap? Illustrate with the help of an example.

The grid system in bootstrap is a layout system that allows you to create responsive web pages
that can adapt to different screen sizes and devices

● The grid system is based on 12 columns that can be divided into rows and nested inside
each other
● The grid system uses predefined classes that specify the width, alignment, offset, and
order of the columns for different breakpoints (screen widths)
● For example, the following HTML code creates a three-column layout that spans the
entire width of the screen on extra small devices, half of the screen on small devices,
and one-third of the screen on medium and large devices:

HTML: <div class="container">

<div class="row">
<div class="col-12 col-sm-6 col-md-4">First column</div>
<div class="col-12 col-sm-6 col-md-4">Second column</div>
<div class="col-12 col-md-4">Third column</div>
</div>
</div>
3. Explain JavaScript Variables and their scope with examples.

JavaScript variables are containers that store data values that can be accessed and
manipulated by the program, these variables can be declared using three keywords:
var, let, and const

● The scope of a variable is the region of the code where the variable can be accessed
and used

● The scope of a variable depends on where and how it is declared

a. Global scope: A variable declared outside any function or block is in the global
scope and can be accessed by any part of the code
b. Function scope: A variable declared inside a function using the var keyword is in
the function scope and can only be accessed within that function or by nested
functions
c. Block scope: A variable declared inside a block (a code section enclosed by curly
braces) using the let or const keyword is in the block scope and can only be
accessed within that block or by nested blocks

This code illustrates the differences in scope for variables in JavaScript - global, function, and
block scope.

Javascript : // Global variable

let globalVariable = 'global';
function func() {
// Function variable
let funcVariable = 'func';
// Block variable
if(true) {
let blockVariable = 'block';
console.log(blockVariable); // Output: block
}
}

console.log(globalVariable); // Output: global

console.log(funcVariable); // ReferenceError: funcVariable is not defined
console.log(blockVariable); // ReferenceError: blockVariable is not defined
4. Describe the features of Laravel framework.

Laravel is a PHP framework that provides a set of tools and libraries for building web
applications

Some of the features of Laravel are:

● MVC architecture which follows the Model-View-Controller pattern separating application

logic, data, and presentation layers.
● Eloquent ORM provides an Object-Relational Mapping system enabling interaction with
different databases using PHP objects and methods.
● Blade templating engine offers a powerful and expressive way to embed PHP code and
directives in HTML files.
● Artisan command-line interface allows performing various tasks like generating code,
running migrations, and clearing cache.
● Routing and middleware in Laravel provide a simple and flexible approach to defining
routes and middleware for web applications. It also offers authentication and
authorization through a built-in system for managing user access.
● Laravel Mix offers a tool for compiling and bundling front-end assets such as CSS,
JavaScript, and images.

5. Write short notes on jQuery getters and setters

jQuery getters and setters are methods for accessing and modifying values or attributes of
elements. They set values when provided an argument and retrieve values when no argument
is given. jQuery getters and setters encompass four types of functionalities which involve
manipulating various aspects of elements in the DOM:

● HTML content methods like .html(), .text(), .append(), .prepend(), etc., handle the
alteration of HTML content within selected elements.
● CSS properties methods like .css(), .addClass(), .removeClass(), .toggleClass(), etc.,
manage the modification of CSS properties for targeted elements.
● DOM attributes methods like .attr(), .prop(), .val(), .removeAttr(), etc., facilitate the
manipulation of DOM attributes within selected elements.
● Data attributes methods such as .data(), .removeData(), etc., allow manipulation of data
attributes associated with elements.

JavaScript: // setter: sets the text content of all the <p> elements to "Hello"
$("p").text("Hello");

// getter: returns the text content of the first <p> element

$("p").text(); // "Hello"
Q.2 Solve any Three questions from remaining questions

6. How to add object in array using JavaScript?

To add an object in an array using JavaScript, you can use one of the following methods:

● push(): This method adds one or more elements to the end of an array and returns the
new length of the array. For example:

JavaScript: var fruits = ["apple", "banana", "orange"];

var fruit = {name: "mango", color: "yellow"};
fruits.push(fruit); // fruits is now
["apple", "banana", "orange",{name: "mango", color: "yellow"}]

● unshift(): This method adds one or more elements to the beginning of an array and
returns the new length of the array. For example:

JavaScript: var fruits = ["apple", "banana", "orange"];

var fruit = {name: "mango", color: "yellow"};
fruits.unshift(fruit); // fruits is now
[{name: "mango", color: "yellow"},"apple", "banana", "orange"]

● splice(): This method inserts or deletes elements at a specified index of an array and
returns an array of the deleted elements. To insert an element without deleting any, you
can pass 0 as the second argument. For example:

JavaScript: var fruits = ["apple", "banana", "orange"];

var fruit = {name: "mango", color: "yellow"};
fruits.splice(1, 0, fruit); // fruits is now
["apple", {name: "mango", color: "yellow"}, "banana", "orange"]
7. How to use navigation bar in bootstrap? Explain with the help of an example.

A navigation bar is a header that contains links to navigate through a website or an application.
Bootstrap provides a component called .navbar that allows you to create responsive and
customizable navigation bars.

● Make a `<nav>` element with class `.navbar` and a color scheme class.
● Include a `<div>` with class `.container-fluid` inside the `<nav>` for navigation bar
content.
● Add a `<div>` with class `.navbar-header` to hold the brand/logo using `<a>` with class
`.navbar-brand`.
● Create a `<button>` with class `.navbar-toggler` to toggle navigation links on smaller
screens.
● Inside, add a `<div>` with classes `.collapse` and `.navbar-collapse` to contain
collapsible navigation links.
● Use `<ul>` with class `.navbar-nav` to hold navigation links and create dropdown menus
if needed.

Additionally, for forms or buttons, use `<form>` or `<button>` elements with class `.form-inline`
inside `.navbar-collapse`. Adjust alignment with `.mr-auto` or `.ml-auto`.

HTML: <html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default">

<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div></nav>
</body></html>
8. List down the jQuery utility functions. Explain any 2 with the help of an example.

jQuery utility functions are methods that are defined on the jQuery object ($) and can be used
for various purposes, such as iterating over arrays or objects, checking the type of a value,
extending objects, etc.

Some of the jQuery utility functions are45:

● $.each(): This function iterates over an array or an object and invokes a callback function
for each element or property. The callback function receives the index and the value as
arguments and can return false to stop the iteration. For example:

JavaScript: // iterate over an array

$.each(["red", "green", "blue"], function(i, val) {
console.log("Color " + i + " is " + val);
});

// iterate over an object

$.each({name: "John", age: 25, city: "New York"}, function(key, val) {
console.log("The " + key + " is " + val);
});

● $.extend(): This function merges the properties of two or more objects into the first object
and returns the modified object. If the same property exists in more than one object, the
value from the last object will overwrite the previous ones. To create a new object without
modifying any of the existing objects, you can pass an empty object as the first
argument. For example:

JavaScript: // merge two objects

var obj1 = {name: "John", age: 25};
var obj2 = {city: "New York", country: "USA"};
var obj3 = $.extend(obj1, obj2); // obj3 is the same as obj1
console.log(obj3); // {name: "John", age: 25, city: "New York", country: "USA"}

// create a new object

var obj4 = $.extend({}, obj1, obj2); // obj4 is a new object
console.log(obj4); // {name: "John", age: 25, city: "New York", country: "USA"}
9. Explain DOM objects in JavaScript.

DOM stands for Document Object Model, which is a standard interface for representing and
manipulating HTML, XML, and SVG documents.

● DOM objects are the nodes or elements that make up the tree-like structure of a
document.
● Each DOM object has a set of properties and methods that can be accessed and
modified by JavaScript.

For example, the following HTML code creates a simple document with a heading and a
paragraph:

HTML:<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="title">Hello, World!</h1>
<p id="content">This is a DOM example.</p>
</body>
</html>

● To access and manipulate the DOM objects, we can use the document object, which
represents the entire document and provides various methods and properties.
For example:

JavaScript: // get the element with id="title"

var title = document.getElementById("title");

// change the text content of the element

title.textContent = "Welcome to DOM";

// get the element with id="content"

var content = document.getElementById("content");

// change the style of the element

content.style.color = "red";
10. Differentiate between JavaScript and Angular JS.

JavaScript is a programming language that can be used to create dynamic and interactive web
pages and applications. It can run on both the client-side and the server-side, depending on the
environment.
● Versatile language: used for web development, game development, mobile apps, etc.
● Compatible with HTML, CSS, and various frameworks/libraries.
● Lacks built-in MVC support, but achievable via different libraries/frameworks.
● Doesn't natively support data binding but achievable with various libraries.
● Lacks native dependency injection support, but achievable with different libraries.

Javascript: function addNumbers(a, b)

{ return a + b;}
let result = addNumbers(5, 3);
console.log(result); // Output will be 8

Angular JS is a framework that is based on JavaScript and is designed to create single-page

applications (SPAs) that are dynamic and responsive. It follows the MVC
(Model-View-Controller) pattern and provides features such as data binding, directives, filters,
services, etc.
● Web development-focused framework, especially for SPAs.
● Utilizes HTML as a template language, extends syntax with custom attributes.
● Follows MVC pattern, offers structured code organization.
● Employs two-way data binding for automatic model-to-view updates.
● Implements dependency injection for automatic component dependency provision.

Angular JS: <html ng-app="addApp">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="AddController">
<input type="number" ng-model="num1" />
<input type="number" ng-model="num2" />
<button ng-click="add()">Add</button>
<p>Result: {{result}}</p>
</div>
<script>
var app = angular.module('addApp', []);
app.controller('AddController', function($scope) {
$scope.add = function() { $scope.result = $scope.num1 + $scope.num2; };
});</script>
</body>
</html>
11. Explain MVC architecture with the help of an example. List the advantages and
disadvantages.

MVC stands for Model-View-Controller, which is a design pattern that separates an application
into three main components: Model, View, and Controller. Each component has a specific role
and responsibility in the application.

● The Model component manages data, validates it, and performs operations without
direct user interaction, communicating with the Controller.

● The View component displays data, receives user input, and generates output without
containing business logic, communicating with the Controller.

● The Controller component mediates between the Model and View, handling user
requests, invoking Model methods, passing data to the View, controlling application flow
and behavior.

MVC architecture advantages include:

● Clear separation of concerns by organizing code into reusable and modular components
for better code management.
● Enhanced maintainability and testability as each component can be independently
tested and modified, simplifying maintenance.
● Improved scalability and performance by distributing components across servers or
machines, optimizing resource use.
● Support for multiple views allowing different user interfaces for various devices,
enhancing user experience.

MVC architecture also has its drawbacks:

● Increased complexity and learning curve for developers understanding component roles
and interactions.
● Potential code overhead and duplication with data transfer between components, raising
codebase complexity.
● Challenges implementing non-MVC features make integrating complex user interactions
difficult, limiting system flexibility.