1. Define Bootstrap.
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-
end web development. It includes HTML and CSS based design templates for typography,
forms, buttons, navigation, and other interface components, as well as optional JavaScript
extensions. Unlike many other frameworks, Bootstrap is not a complete solution, but rather a
toolkit that can be used to build custom designs. It is the most popular CSS framework in use
today, and is used by millions of websites around the world.
2. State Bootstrap columns.
Bootstrap columns are used to create grid layouts. The grid system is a way to divide the
viewport into equal-width columns, which can then be used to place content. Bootstrap uses a
12-column grid system, meaning that there are 12 columns available per row.
To create a column, you simply add the .col-* class to your element, where * is the number of
columns you want the element to occupy. For example, to create a column that occupies half
the width of the viewport, you would add the .col-6 class to your element.
You can also use the .col-* class to create columns that are different widths on different devices.
For example, you could create a column that occupies half the width of the viewport on large
devices, but the full width of the viewport on small devices. To do this, you would add the .col-lg-
6 .col-sm-12 classes to your element.
3. State Labels and Badges.
Bootstrap labels and badges are used to highlight or identify text. Labels are small, inline pieces
of text that are typically used to provide additional information about a piece of content. Badges
are similar to labels, but they are typically used to display a number or status.
To create a label, you simply add the .badge class to your element. To create a badge, you
simply add the .label class to your element.
You can also use the .badge-primary, .badge-secondary, .badge-success, .badge-
danger, .badge-warning, and .badge-info classes to change the color of your label or badge.
4. Define bootstrap Forms.
Bootstrap forms are used to create HTML forms. Bootstrap provides a variety of form
components, such as input fields, select fields, checkboxes, and radios. Bootstrap also provides
a variety of form validation features.
To create a Bootstrap form, you simply add the .form-group class to your element. Then, you
can add the appropriate Bootstrap form components to your element.
5. List the Main Components Of BootStrap.
The main components of Bootstrap are:
Grid system: The grid system is used to create responsive layouts.
Typography: Bootstrap provides a variety of typography options, such as headings, paragraphs,
and lists.
Forms: Bootstrap provides a variety of form components, such as input fields, select fields,
checkboxes, and radios.
Buttons: Bootstrap provides a variety of button styles, such as primary, secondary, and success.
Navigation: Bootstrap provides a variety of navigation components, such as navbars, tabs, and
pills.
Modals: Bootstrap provides a modal component that can be used to create dialog boxes and
lightboxes.
Alerts: Bootstrap provides a variety of alert components, such as success, danger, and warning
alerts.
Tables: Bootstrap provides a responsive table component.
6. Describe Bootstrap Containers.
Bootstrap containers are used to center content on a page and provide a consistent width for
your content across all devices.
To create a container, you simply add the .container class to your element.
Bootstrap also provides a .container-fluid class, which is similar to the .container class, but it will
expand to fill the full width of the viewport.
7. Define Bootstrap Cards.
Bootstrap cards are used to display content in a visually appealing way. Cards are typically
used to display information such as product descriptions, blog posts, or team members.
To create a card, you simply add the .card class to your element. Then, you can add the content
for your card to the element.
Bootstrap also provides a variety of card components, such as card headers, card bodies, and
card footers.
8. Compare container and container-fluid in Bootstrap.
The main difference between .container and .container-fluid is that .container has a fixed width,
while .container-fluid expands to fill the full width of the viewport.
.container is typically used on larger screens, such as laptops and desktops. .container-fluid is
typically used on smaller screens, such as smartphones and tablets.
9. Predict the advantages of MediaQuery in bootstrap.
Media queries allow you to specify different CSS styles for different devices and screen sizes.
This is important for creating responsive websites that look good on all devices.
Bootstrap uses media queries to make its components responsive. For example, the Bootstrap
grid system uses media queries to adjust the number of columns in a row based on the screen
size.
Here are some of the advantages of using media queries in Bootstrap:
Responsive designs: Media queries allow you to create responsive designs that look good on all
devices.
Improved user experience: Media queries can improve the user experience by making your
website easier to use on different devices.
Increased traffic: Media queries can help you increase traffic to your website by making it more
accessible to users on different devices.
10. Discuss offset columns in Bootstrap.
Offset columns are used to create margins between columns. This can be useful for creating
layouts with more spacing between columns.
To create an offset column, you simply add the .col-offset-* class to your element, where * is the
number of columns you want to offset. For example, to create a column that is offset by two
columns, you would add the .col-offset-2 class to your element.
Here is an example of how to use offset columns:
HTML
<div class="row">
<div class="col-md-4 col-offset-md-2">
Content
</div>
</div>
In this example, the column will be offset by two columns on medium and large devices.
11. Describe column ordering in Bootstrap.
Bootstrap allows you to order columns in a row in any order you want. This can be useful for
creating complex layouts.
To order columns in a row, you simply add the .col-order-* class to your element, where * is the
order of the column in the row. For example, to order a column to be first in the row, you would
add the .col-order-1 class to your element.
Here is an example of how to order columns in a row:
HTML
<div class="row">
<div class="col-md-4 col-order-2">
Content
</div>
<div class="col-md-4 col-order-1">
Content
</div>
</div>
In this example, the second column will be displayed before the first column on medium and
large devices.
12. Compare Progress Bar and Navigation Bar.
A progress bar is a component that is used to show the progress of a task. A navigation bar is a
component that is used to provide navigation for a website or web application.
Progress bars are typically used to show the progress of a task, such as uploading a file or
downloading a software update. Navigation bars are typically used to provide links to different
pages on a website or web application.
13. Discuss Alerts in Bootstrap.
Bootstrap alerts are used to display messages to users. Alerts can be used to display success
messages, error messages, or warning messages.
To create an alert, you simply add the .alert class to your element. You can also add the .alert-
success, .alert-danger, or .alert-warning classes to your element to change the color of the alert.
Here is an example of how to create an alert:
HTML
<div class="alert alert-success">
Success message!
14. Discuss about usage of tables.
Tables are used to organize data in rows and columns. They are a very common way to display
data on websites and web applications.
Tables can be used to display a variety of data, such as:
Product catalogs
Customer lists
Order information
Blog posts
Social media posts
Financial data
Tables can be used to make data more readable and easier to understand. They can also be
used to make data more visually appealing.
15. Show the navigation elements in bootstrap.
Bootstrap provides a variety of navigation elements, such as:
Navbars: Navbars are used to provide horizontal navigation across the top of a page.
Tabs: Tabs are used to provide navigation between different sections of a page.
Pills: Pills are similar to tabs, but they are typically used to provide navigation between different
states of a page, such as different views of a product or different steps in a process.
Pagination: Pagination is used to divide large data sets into smaller pages.
Breadcrumbs: Breadcrumbs are used to show the user's current location on a website or web
application.
16. Show the steps for creating basic or vertical forms.
To create a basic form in Bootstrap, you simply follow these steps:
Add the .form-group class to your element.
Add the appropriate input fields, select fields, checkboxes, and radios to your element.
Add a submit button to your element.
To create a vertical form in Bootstrap, you simply follow these steps:
Add the .form-horizontal class to your element.
Add the appropriate input fields, select fields, checkboxes, and radios to your element.
Add a submit button to your element.
14. Discuss about usage of tables.
Tables are used to organize data in rows and columns. They are a very common way to display
data on websites and web applications.
Tables can be used to display a variety of data, such as:
Product catalogs
Customer lists
Order information
Blog posts
Social media posts
Financial data
Tables can be used to make data more readable and easier to understand. They can also be
used to make data more visually appealing.
15. Show the navigation elements in bootstrap.
Bootstrap provides a variety of navigation elements, such as:
Navbars: Navbars are used to provide horizontal navigation across the top of a page.
Tabs: Tabs are used to provide navigation between different sections of a page.
Pills: Pills are similar to tabs, but they are typically used to provide navigation between different
states of a page, such as different views of a product or different steps in a process.
Pagination: Pagination is used to divide large data sets into smaller pages.
Breadcrumbs: Breadcrumbs are used to show the user's current location on a website or web
application.
16. Show the steps for creating basic or vertical forms.
To create a basic form in Bootstrap, you simply follow these steps:
Add the .form-group class to your element.
Add the appropriate input fields, select fields, checkboxes, and radios to your element.
Add a submit button to your element.
To create a vertical form in Bootstrap, you simply follow these steps:
Add the .form-horizontal class to your element.
Add the appropriate input fields, select fields, checkboxes, and radios to your element.
Add a submit button to your element.
17. Construct a code to create inventory table in HTML.
HTML
<table>
<thead>
<tr>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>10</td>
<td>$1.00</td>
</tr>
<tr>
<td>Banana</td>
<td>20</td>
<td>$0.50</td>
</tr>
<tr>
<td>Orange</td>
<td>30</td>
<td>$0.75</td>
</tr>
</tbody>
</table>
18. Construct a code to change the backgroundcolor in CSS.
CSS
body {
background-color: red;
}
This code will change the background color of the body of the page to red.
19. Illustrate a code to create a Danger Button in Bootstrap.
HTML
<button type="button" class="btn btn-danger">Danger Button</button>
This code will create a danger button with the text "Danger Button".
20. Show the Process for Creating an alert in BootStrap.
To create an alert in Bootstrap, you simply follow these steps:
Add the .alert class to your element.
Add the .alert-success, .alert-danger, or .alert-warning classes to your element to change the
color of the alert.
Add the text for your alert to your element.
Here is an example of how to create an alert:
HTML
<div class="alert alert-success">
Success message!
</div>
UNIT - 2
1. Define Ajax.
Ajax stands for Asynchronous JavaScript and XML. It is a set of web development techniques
that use various web technologies on the client-side to create asynchronous web applications.
With Ajax, web applications can send and retrieve data from a server asynchronously without
interfering with the display and behaviour of the existing page.
2. Define Events.
Events are actions that happen in a browser window, such as a mouse click, a keyboard press,
or the loading of a page. jQuery provides a variety of event handlers that allow you to respond
to these events.
3. List various Events available in jQuery.
Here is a list of some of the most common events available in jQuery:
click
mouseover
mouseout
mousemove
mousedown
mouseup
4. List various content manipulation methods available in jQuery.
jQuery provides a variety of content manipulation methods that allow you to add, remove, and
modify the content of a web page. Here is a list of some of the most common content
manipulation methods available in jQuery:
$.html()
$.text()
$.append()
$.prepend()
$.after()
$.before()
$.remove()
$.empty()
5. Name the parameters used for jQuery Ajax method.
The jQuery Ajax method takes a variety of parameters, but the most important ones are:
url: The URL of the server script that will be used to process the request.
type: The HTTP method to use for the request. The most common methods are GET and
POST.
data: The data to be sent to the server.
success: A callback function that will be executed if the request is successful.
error: A callback function that will be executed if the request fails.
6. State the purpose of jQuery .class selector.
The jQuery .class selector is used to select all elements that have the specified class. For
example, the following code will select all elements that have the class "my-class":
JavaScript
$(".my-class");
7. List the advantages of Ajax.
Ajax has a number of advantages, including:
Asynchronous requests: Ajax allows web applications to send and receive data from a server
asynchronously, without interfering with the display and behaviour of the existing page. This can
make web applications more responsive and interactive.
Reduced page loads: Ajax can reduce page loads by only retrieving the data that is needed,
rather than reloading the entire page. This can make web applications faster and more efficient.
Improved user experience: Ajax can improve the user experience by making web applications
more responsive and interactive. For example, Ajax can be used to create real-time chat
applications or to update web pages without reloading the page.
8. Explain the features of JQuery.
jQuery is a JavaScript library that simplifies the process of manipulating HTML, CSS, and
JavaScript. jQuery provides a number of features, including:
A simple and easy-to-use syntax
A wide range of selectors for selecting elements on a web page
A variety of methods for manipulating the content of a web page
A number of event handlers for responding to user actions
A number of effects for animating elements on a web page
9. Discuss examples for events in Jquery.
Here are a few examples of how to use events in jQuery:
JavaScript
// Add a click event handler to the button with the ID "my-button"
$("#my-button").click(function() {
// Do something when the button is clicked
});
// Add a mouseover event handler to the element with the class "my-class"
$(".my-class").mouseover(function() {
// Do something when the mouse hovers over the element
});
// Add a keydown event handler to the document object
$(document).keydown(function(event) {
// Do something when the user presses a key
});
10. Identify the various selectors available in Jquery.
jQuery provides a variety of selectors for selecting elements on a web page. Here is a list of
some of the most common selectors:
ID selector: #my-id
Class selector: .my-class
Element selector: div, p, h1
11. Differentiate .filter() and .not() filtering methods in jQuery.
The .filter() method is used to filter out elements from a jQuery object that do not match the
specified selector. The .not() method is used to filter out elements from a jQuery object that
match the specified selector.
Here is an example of how to use the .filter() method:
JavaScript
// Select all elements with the class "my-class"
var elements = $(".my-class");
// Filter out all elements that do not have the class "my-subclass"
var filteredElements = [Link](".my-subclass");
Use code with caution. Learn more
Here is an example of how to use the .not() method:
JavaScript
// Select all elements with the class "my-class"
var elements = $(".my-class");
// Filter out all elements that have the class "my-subclass"
var filteredElements = [Link](".my-subclass");
12. Identify the ways to include jQuery in a webpage.
There are two ways to include jQuery in a webpage:
Use a CDN: You can use a CDN (content delivery network) to include jQuery in your webpage.
A CDN is a network of servers that deliver content to users based on their geographic location.
This can make your webpage load faster, as the jQuery library will be loaded from a server that
is close to the user.
To include jQuery using a CDN, simply add the following script tag to the <head> section of your
HTML document:
HTML
<script src="[Link]
Use code with caution. Learn more
Download the jQuery library: You can download the jQuery library from the jQuery website and
include it in your webpage.
To include jQuery by downloading the library, simply add the following script tag to the <head>
section of your HTML document:
HTML
<script src="[Link]"></script>
13. Describe the use of dblclick().
The dblclick() method is used to bind a function to be executed when the element is double-
clicked.
Here is an example of how to use the dblclick() method:
JavaScript
// Add a double-click event handler to the element with the ID "my-element"
$("#my-element").dblclick(function() {
// Do something when the element is double-clicked
});
14. Identify the purpose of using jQuery load() Method.
The load() method is used to load the contents of a file into the specified element. The file can
be a HTML document, a CSS file, or a JavaScript file.
Here is an example of how to use the load() method to load the contents of a HTML document
into the element with the ID "my-element":
JavaScript
$("#my-element").load("[Link]");
Use code with caution. Learn more
15. Compare HTTP Request GET and POST methods.
The HTTP GET method is used to retrieve data from a server. The HTTP POST method is used
to send data to a server.
The main difference between the GET and POST methods is that the GET method sends the
data in the query string of the URL, while the POST method sends the data in the body of the
request.
16. Construct Jquery program to implement .css() in jQuery.
The .css() method is used to set or get CSS properties for the selected element(s).
Here is an example of how to use the .css() method to set the background color of the element
with the ID "my-element" to red:
JavaScript
$("#my-element").css("background-color", "red");
17. Discover a Jquery program to display list of items in table.
Here is a Jquery program to display a list of items in a table:
JavaScript
// Create a table
var table = $("<table>");
// Add a header row to the table
[Link]("<tr><th>Item</th><th>Quantity</th></tr>");
// Add a row to the table for each item in the list
for (var i = 0; i < [Link]; i++) {
var item = items[i];
var row = $("<tr><td>" + [Link] + "</td><td>" + [Link] + "</td></tr>");
[Link](row);
}
// Append the table to the body of the document
$([Link]).append(table);
18. Show the working mechanism of Ajax.
Ajax works by making asynchronous requests to the server. This means that the browser can
send a request to the server without having to reload the entire page. This allows web
applications to be more responsive and interactive.
Here is a simplified overview of how Ajax works:
The user performs an action on the web page, such as clicking a button.
The browser sends an asynchronous request to the server.
The server processes the request and returns a response.
The browser updates the web page with the response from the server.
This process is very fast, and it allows web applications to feel more like native applications.
Here is an example of how Ajax can be used to update a list of items on a web page without
reloading the entire page:
JavaScript
// Get a list of items from the server
$.ajax({
url: "/items",
type: "GET",
success: function(response) {
// Update the list of items on the web page with the response from the server
$("#items").html(response);
}
});
This code will send an asynchronous request to the server to get a list of items. The server will
process the request and return a list of items in JSON format. The browser will then update the
list of items on the web page with the response from the server.
19. Demonstrate click event in Jquery.
To demonstrate a click event in jQuery, you can use the following code:
JavaScript
// Add a click event handler to the button with the ID "my-button"
$("#my-button").click(function() {
// Do something when the button is clicked
alert("The button was clicked!");
});
This code will add a click event handler to the button with the ID "my-button". When the button is
clicked, the alert() function will be called.
20. Construct Objects with an example.
To construct an object in JavaScript, you can use the following syntax:
JavaScript
var object = {
key1: value1,
key2: value2,
// ...
};
For example, the following code creates an object that represents a person:
JavaScript
var person = {
name: "John Doe",
age: 30,
occupation: "Software Engineer"
};
You can then access the properties of the object using the dot notation:
JavaScript
[Link]([Link]); // John Doe
[Link]([Link]); // 30
[Link]([Link]); // Software Engineer
Use code with caution. Learn more
You can also set the properties of the object using the dot notation:
JavaScript
[Link] = "Jane Doe";
[Link] = 35;
[Link] = "Web Developer";
Objects are a powerful way to organize data in JavaScript. They can be used to represent a
variety of things, such as people, products, and orders.
UNIT - 3
1. List some advantages of ReactJs.
Component-based architecture: React uses a component-based architecture, which makes it
easy to create and maintain complex user interfaces.
Declarative programming: React uses a declarative programming style, which makes it easy to
express what you want the UI to look like, without having to worry about how to get there.
Virtual DOM: React uses a virtual DOM, which makes it very efficient at updating the real DOM.
One-way data flow: React uses a one-way data flow, which makes it easy to debug and reason
about your code.
Large community and ecosystem: React has a large and active community, and there are many
libraries and tools available to help you build React applications.
2. Define Rendered Element.
A rendered element is the output of a React component. It can be a DOM element, a React
component, or a fragment.
When a React component is rendered, it returns a rendered element. The rendered element is
then used to update the real DOM.
Rendered elements can be nested. For example, a rendered element can be a DOM element
that contains other rendered elements.
3. List the types of React Components.
There are two types of React components: functional components and class components.
Functional components: Functional components are simply JavaScript functions that return a
React element.
Class components: Class components are JavaScript classes that extend the [Link]
class.
4. Define React DOM.
React DOM is a library for rendering React components to the DOM.
It provides a number of APIs for interacting with the DOM, such as:
[Link](),[Link](),[Link](),Reac
[Link]()
React DOM is an essential part of any React application. It provides the glue that connects
React components to the DOM.
5. Discuss the syntax for creating an component in React.
To create a component in React, you can use the following syntax:
JavaScript
// Functional component
function MyComponent() {
return <div>Hello, world!</div>;
}
// Class component
class MyComponent extends [Link] {
render() {
return <div>Hello, world!</div>;
}
}
Once you have created a component, you can render it to the DOM using the React DOM API:
JavaScript
// Render the component to the element with the ID "root"
[Link](<MyComponent />, [Link]('root'));
6. Describe the procedure to convert a functional component into class.
To convert a functional component into a class component, you can follow these steps:
Create a new JavaScript class that extends the [Link] class.
Move the code from the functional component to the render() method of the class component.
Remove the functional component.
7. Compare Reactjs with javascript.
React is a JavaScript library for building user interfaces. It is not a programming language, but it
uses JavaScript to create components.
React offers a number of advantages over pure JavaScript, such as:
Component-based architecture: React uses a component-based architecture, which makes it
easy to create and maintain complex user interfaces.
Declarative programming: React uses a declarative programming style, which makes it easy to
express what you want the UI to look like, without having to worry about how to get there.
Virtual DOM: React uses a virtual DOM, which makes it very efficient at updating the real DOM.
One-way data flow: React uses a one-way data flow, which makes it easy to debug and reason
about your code.
8. Show the uses of render() method.
The render() method is used to return a React element that will be rendered to the DOM. The
render() method can be used to render:
DOM elements
React components
Fragments
9. Choose the purpose of using Function Component in react.
Function components are used to create simple React components that do not need to maintain
state. Function components are typically faster and easier to write than class components.
10. Construct a component in Reactjs to display greeting message.
The following code shows a simple React component that displays a greeting message:
JavaScript
function Greeting() {
return <div>Hello, world!</div>;
}
[Link](<Greeting />, [Link]('root'));
Use code with caution. Learn more
This code will render the following HTML to the DOM:
HTML
<div>Hello, world!</div>