Web Final

UNIT-1
1)Details about web browser(not sure about the answer)
Ans- Web Browser is an application software that allows us to view and explore information on
the web. User can request for any web page by just entering a URL into address bar. Web browser
can show text, audio, video, animation and more. It is the responsibility of a web browser to
interpret text and commands contained in the web page.Earlier the web browsers were text-based
while now a days graphical-based or voice-based web browsers are also available
Architecture:
There are a lot of web browser available in the market. All of them interpret and display
information on the screen however their capabilities and structure varies depending upon
implementation. But the most basic component that all web browser must exhibit are listed below:
1. Controller/Dispatcher- works as a control unit in CPU. It takes input from the keyboard or
mouse, interpret it and make other services to work on the basis of input it receives.
2. Interpreter- receives the information from the controller and execute the instruction line by
line. Some interpreter are mandatory while some are optional For example, HTML interpreter
program is mandatory and java interpreter is optional.
3. Client Programs- describes the specific protocol that will be used to access a particular service.
Following are the client programs tat are commonly used:
 HTTP
 SMTP
 FTP
 NNTP
 POP
There are four leading web browsers – Internet Explorer, Google Chrome, Mozilla Firefox and
Safari, but there are many others browsers available.
Internet Explorer-Internet Explorer (IE) is a product from software giant Microsoft. This is the
most commonly used browser in the universe. This was introduced in 1995 along with Windows 95
launch and it has passed Netscape popularity in 1998.
Google Chrome-This web browser is developed by Google and its beta version was first released on
September 2, 2008 for Microsoft Windows. Today, chrome is known to be one of the most popular
web browser with its global share of more than 50%.
Mozilla Firefox-Firefox is a new browser derived from Mozilla. It was released in 2004 and has
grown to be the second most popular browser on the Internet.
Safari-Safari is a web browser developed by Apple Inc. and included in Mac OS X. It was first
released as a public beta in January 2003. Safari has very good support for latest technologies like
XHTML, CSS2 etc.
2)Font properties with example

Ans-
Description Example
Property
Font This property is used as <p style = “font: italic
shorthand to specify a small-caps bold 15px
number of other font georgia;"ok>
properties.
Font family <style type="text/css">

This property is used to
p{
change the face of a font.
font-family: "Times New
Roman", Times, serif;
}
p{
font-family: Arial,
Helvetica, sans-serif;
}
</style>
Font color <style type="text/css">
h4 {
specify the color of text
color: red;
}
h5 {
color: #9000A1;
}
h6 {
color: rgb(0, 220, 98);
}
</style>
Font size <style type="text/css">
p{
increase or decrease the
font-size: 120%;
size of a font
}
p{
font-size: 10px;
}
p{
font-size: large;
}
</style>
Font style This property is used to <style type=”text/css”>
make a font italic or p.normal {
oblique. font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
Font variant This property is used to <style type=”text/css”>
create a small-caps effect. p.small {
font-variant: small-caps;
}
</style>
Font weight This property is used to <style type=”text/css”>
increase or decrease how p.normal {
bold or light a font font-weight: normal;
appears. }
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
3)Table tags and explain examples(not sure about the answer)

Ans-
Tag Description Example
<html>
<table> Defines a table <body>
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>
<html>
<th> Defines a header cell in a <body>
table <table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</table>
</body>
</html>
<html>
<tr> Defines a row in a table <body>
<table>
<tr>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
</table>
</body>
</html>
<html>
<td> Defines a cell in a table <body>
<table>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
</body>
</html>
table>
<caption> Defines a table caption <caption>Monthly
savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<html>
<border> the addition of the border <head>
to the HTML Table. <style>
table,th,td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</table>
</body>
</html>
<html>
<table Cell padding specifies the <head>
padding> space between the cell <style>
content and its borders. th,td {
padding: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</table>
</body>
</html>
<html>
text-align: text-align property where <head>
the text is aligned <style>
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<html>
Border- Border spacing specifies
spacing: the space between the <head>
cells. <style>
table {
border-spacing: 5px;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
Background color can be added as a <html>
color background in an HTML <head>
table using the <style>
“background-color” table#t01 {
option. width: 100%;
background-color: #f2f2d1;}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</table>
</body>
</html>
<html>
rowspan To make a cell span more <head>
than one row, we must use </head>
the rowspan attribute. <body>
<tr>
<th>Name</th>
<th rowspan="2">Telephone</th>
</tr>
<tr>
<td>Vikas Rawat</td>
<td>9125577854</td>
<td>8565557785</td>
</tr>
</table>
</body>
</html>
<html>
colspan To make a cell span more <head>
than one column, we must </head>
use the colspan attribute. <body>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Vikas Rawat</td>
<td>9125577854</td>
<td>8565557785</td>
</tr>
</table>
</body>
</html>
4)CSS box module and fig

Ans- All HTML elements can be considered as boxes. In CSS, the term "box model" is used
when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of:
margins, borders, padding, and the actual content. The image below illustrates the box model:
Explanation of the different parts:

Content – The content of the box, where text and images appear
Padding – Clears an area around the content. The padding is transparent
Border – A border that goes around the padding and content
Margin – Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space between elements.
5)Different level of style sheet
Ans- The 3 different level of style sheet are:-
 Inline CSS-Inline CSS contains the CSS property in the body section attached with element
is known as inline CSS. This kind of style is specified within an HTML tag using the style
attribute
Example:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
 Internal/ Embedded CSS-This can be used when a single HTML document must be styled
uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is
embedded within the HTML file.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
 External CSS-External CSS contains separate CSS file which contains only style property
with the help of tag attributes (For example class, id, heading, … etc). CSS property written
in a separate file with .css extension and should be linked to the HTML document using link
tag. This means that for each element, style can be set only once and that will be applied
across web pages.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
6)Web Server and Internet(not sure about the answer)
Ans- Web Server

Web server is a program which processes the network requests of the users and serves them with
files that create web pages. This exchange takes place using Hypertext Transfer Protocol (HTTP).
Basically, web servers are computers used to store HTTP files which makes a website and when a
client requests a certain website, it delivers the requested website to the client. For example, you
want to open Facebook on your laptop and enter the URL in the search bar of google. Now, the
laptop will send an HTTP request to view the facebook webpage to another computer known as
the webserver. This computer (webserver) contains all the files (usually in HTTP format) which
make up the website like text, images, gif files, etc. After processing the request, the webserver
will send the requested website-related files to your computer and then you can reach the
website.
Different websites can be stored on the same or different web servers but that doesn’t affect the
actual website that you are seeing in your computer. The web server can be any software or
hardware but is usually a software running on a computer. One web server can handle multiple
users at any given time which is a necessity otherwise there had to be a web server for each user
and considering the current world population, is nearly close to impossible. A web server is never
disconnected from the internet because if it was, then it won’t be able to receive any requests,
and therefore cannot process them.
Internet
The Internet is a vast network that connects computers all over the world. Through the Internet,
people can share information and communicate from anywhere with an Internet connection.
Basic services provided by the internet
 Electronic mail
 File Transfer protocol
 Telnet
 Usenet news
 HTTP-Hyper text Transfer protocol
 Transmission control protocol(TCP)
Uses of internet
 Entertainment
 Education
 Social networking
 Cashless transactions
 Online business (E-commerce)
7)Selector and types of selector
Ans- Selector is a pattern of elements and other terms that tell the browser which HTML elements
should be selected to have the CSS property values inside the rule applied to them.
Types of selector
 Element selector- The element selector selects HTML elements based on the element name
(or tag) for example p, h1, div, span, etc.
Example:
p{
Text-align: center;
Color: red;
}
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
Text-align: center;
Color: blue;
}
</style>
</head>
<body>
<p id=”para1”>Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
 Class Selector-The class selector selects HTML elements with a specific class attribute.
In the example below, all HTML elements with class=”center” will be red and center-
aligned:
Example:
Center {
Text-align: center;
Color: red;
}
<!DOCTYPE html>
<html>
<head>
<style>
.center {
Text-align: center; color: red;
}
</style>
</head>
<body>
<h1 class=”center”>Red and center-aligned heading</h1>
<p class=”center”>Red and center-aligned paragraph.</p>
</body>
</html>
You can also specify that only specific HTML elements should be affected by a class.
In the example below, only <p> elements with class=”center” will be center- aligned:
Example:
p.center
{
Text-align: center;
Color: red;
}
<!DOCTYPE html>
<html>
<head>
<style> p.center {
Text-align: center;
Color: red;
}
</style>
</head>
<body>
<h1 class=”center”>This heading will not be affected</h1>

<p class=”center”>This paragraph will be red and center- aligned.</p>
</body>
</html>
 Id selector-The id selector uses the id attribute of an HTML element to select a specific
element.
The id of an element should be unique within a page, so the id selector is used to select one
unique element
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
The style rule below will be applied to the HTML element with id="para1":
All the elements having that id will be formatted according to the defined rule.
Example:
#para1
{
Text-align: center;
Color: red;
}
<!DOCTYPE html>
<html>
<head>
<style> #para1 {
Text-align: center;
Color: red;
}
</style>
</head>
<body>
<p id=”para1”>Hello World!</p>

<p>This paragraph is not affected by the style.</p>
</body>
</html>
 Grouping selector-The grouping selector selects all the HTML elements with the same style
definitions
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
Example:
h1 {
Text-align: center;
Color: red;
}
h2 {
Text-align: center;
Color: red;
}
p{
Text-align: center;
Color: red;
}
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
h1, h2, p {
Text-align: center;
Color: red;
}
<!DOCTYPE html>
<html>
<head>
<style> p.center {
Text-align: center; color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class=”center”>This heading will not be affected</h1>

<p class=”center”>This paragraph will be red and center- aligned.</p>
<p class=”center large”>This paragraph will be red, center- aligned, and in a large
Font-size.</p>
</body>
</html>
8) What is html and define

Ans- HTML stands for Hyper Text Markup Language, which is the most widely used language on
Web to develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was
the first standard HTML specification which was published in 1995.
 HTML 4.01 was a major version of HTML and it was published in late 1999.
 Though HTML 4.01 version is widely used but currently we are having HTML-5 version
which is an extension to HTML 4.01, and this version was published in 2012.
HTML stands for Hypertext Markup Language, and it is the most widely used language to write
Web Pages.
 Hypertext refers to the way in which Web pages (HTML documents) are linked together.
Thus, the link available on a webpage is called Hypertext.
 As its name suggests, HTML is a Markup Language which means you use HTML to simply
"mark-up" a text document with tags that will tell a Web browser on how to structure it to
display
HTML is a MUST for students as well as working professionals to become a great Software
Engineer specially when they are working in Web Development Domain. Here some of the key
advantages of learning HTML:
1. Create Web site - You can create a website or customize an existing web template if
you know HTML well.
2. Become a web designer - If you want to start a carrier as a professional web designer,
HTML and CSS designing is a must skill.
3. Learn other languages - Once you understands the basic of HTML then other related
technologies like javascript, php, or angular are become easier to understand.
9)Applications of html
Ans- HTML is one of the most widely used language over the web. here going to list few of them
 Web pages development - HTML is used to create pages which are rendered over the
web. Almost every page of web is having html tags in it to render its details in browser.
 Internet Navigation - HTML provides tags which are used to navigate from one page to
another and is heavily used in internet navigation.
 Responsive UI - HTML pages now-a-days works well on all platform, mobile, tabs,
desktop or laptops owing to responsive design strategy.
 Offline support- HTML pages once loaded can be made available offline on the machine
without any need of internet.
 Game development- HTML5 has native support for rich experience and is now useful in
gaming development arena as well.
10)List properties with example(not sure about the answer)
Ans- In HTML, there are two main types of lists:
 unordered lists (<ul>) - the list items are marked with bullets
 ordered lists (<ol>) - the list items are marked with numbers or letters
The CSS list properties allow you to:
 Set different list item markers for ordered lists

 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items
1. The list-style-type property specifies the type of list item marker.

Example: ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
2. The list-style-image property specifies an image as the list item marker:
Example
ul {
list-style-image: url('sqpurple.gif');
}
3. The list-style-position property specifies the position of the list-item markers (bullet
points).
Example:
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
4. e can also style lists with colors, to make them look a little more interesting.Anything added
to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will
affect the individual list items:
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
UNIT-2
1)messages boxes JavaScript with example
1. Alert Box-Use the alert() function to display a message to the user that requires their attention.
This alert box will have the OK button to close the alert box. The alert() function takes a
paramter of any type e.g., string, number, boolean etc.So, no need to convert a non-string type
to a string type.
Example:
alert("This is an alert message box."); // display string message
alert('This is a numer: ' + 100); // display result of a concatenation
alert(100); // display number
alert(Date()); // display current date
2. Confirm Box-Sometimes you need to take the user's confirmation to proceed. For example, you
want to take the user's confirmation before saving updated data or deleting existing data.In this
scenario, use the built-in function confirm().The confirm() function displays a popup message
to the user with two buttons, OK and Cancel. The confirm() function returns true if a user has
clicked on the OK button or returns false if clicked on the Cancel button.
Example: confirm("Are you OK?");
3. Prompt Box-Sometimes you may need to take the user's input to do further actions.
The prompt() function takes two string parameters. The first parameter is the message to be
displayed, and the second parameter is the default value which will be in input text when the
message is displayed.
Syntax prompt([string message], [string defaultValue]);
For example: you want to calculate EMI based on the user's preferred tenure of the loan.For
this kind of scenario, use the built-in function prompt().
2)lab program text box total count
<!DOCTYPE html>
<html>
<head><title>student form</title>
<script type="text/javascript">
function count()
{
alert("The no of controls used in this form = "+document.student.length);
}
</script>
</head>
<body>
<form name="student">
<table align="center">
<tr><th colspan="2">STUDENT DETAILS </th></tr>
<tr>
<td>SRN NO</td>
<td><input type="text" name="srn" maxlength="8"
autofocus="autofocus" /></td>
</tr>
<tr>
<td>STUDENT NAME</td>
<td><input type="text" name="sname" maxlength="50"/></td>
</tr>
<tr>
<td>SELECT COURSE</td>
<td>
<select name="course">
<option value="">SELECT</option>
<option value="BCA">BCA</option>
<option value="BCOM">BCOM</option>
<option value="BBA">BBA</option>
<option value="MCA">MCA</option>
<option value="MCA">B.Sc(M&A)</option>
</select>
</td>
</tr>
<tr>
<td>Citizen of India..?</td>
<td>
<input type="radio" name="ctype" value="Yes" />YES
<input type="radio" name="ctype" value="No" />No
</td>
</tr>
<tr>
<td>Programming Languages Known</td>
<td>
<input type="checkbox" name="lang1" value="C" />C
<input type="checkbox" name="lang2" value="VB" />VB
<input type="checkbox" name="lang3" value="JAVA" />JAVA
<input type="checkbox" name="lang4" value="WP" />WP
</td>
</tr>
<tr>
<td>Address</td>
<td><textarea name="address" rows="5" cols="25"></textarea></td>
</tr>
<tr>
<td>E-Mail Id</td>
<td><input type="email" name="email"/></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="date" name="dob"/></td>
</tr>
<tr>
<td><input type="submit" value="COUNT" onclick="count()"/></td>
<td><input type="reset" value="CLEAR"/></td>
</tr>
</table>
</form>
</body>
</html>
3)define JavaScript features of JavaScript
Javascript is a scripting language,which we will be calling it as lightweight programming

language or loosely programming language i.e interrupted by the browser engine when the web
page is loaded.
Features of javascript:
1. Generating HTML code-JavaScript has very handy features to dynamically generate HTML
content for the web. It allows us to add text, links, images, tables, etc after an event
occurrence (eg – mouse click).
2. Make your webpage more responsive-Responsive web design (RWD) is a web development
approach that creates dynamic changes to the appearance of a website, depending on the
screen size and orientation of the device being used to view it.Javascript
3. Javascript is executed on the client side-it supplies objects to control a browser and its
Document Object Model (DOM). Like if client-side extensions allow an application to
place elements on an HTML form and respond to user events such as mouse
clicks, form input, and page navigation.
4. Create cookies-In JavaScript, we can create, read, update and delete a cookie by
using document.cookie property.
5. To validate a webform data-Validation of User’s Input is most commonly known as form
validation, it allows users to interact with client through filling forms through web pages.
The details in the form need to be correctly filled where form validation helps the client to
validate the details entered by the user.
6. Giving the user more control over the browser-JavaScript provides greater control to the
browser rather than being completely dependent on the web servers. JavaScript provides
various browsers with additional functionalities that help reduce server load and network
traffic.
4)how to create a date object explain any 4 methods of JS date object with
example
The JavaScript date object can be used to get year, month and day. You can display a timer on
the webpage by the help of JavaScript date object.
You can use different Date constructors to create date object. It provides methods to get and set
day, month, year, hour, minute and seconds.
You can use 4 variant of Date constructor to create date object.
1. Date()
2. Date(milliseconds)
3. Date(dateString)
4. Date(year, month, day, hours, minutes, seconds, milliseconds)
Methods to create date object.

getDate()-It returns the integer value between 1 and 31 that represents the day for the
specified date on the basis of local time.
getDay()-It returns the integer value between 0 and 6 that represents the day of the week on
the basis of local time.
getFullYears()-It returns the integer value that represents the year on the basis of local time.
getHours()-It returns the integer value between 0 and 23 that represents the hours on the
basis of local time.
JavaScript Date Example

<html>
<body>
Current Date and Time: <span id="txt"></span>
<script>
var today=new Date();
document.getElementById('txt').innerHTML=today;
</script>
</body>
</html>
5)types of JS errors with example
There are 3 types of errors :
1. Syntax Error: When a user makes a mistake in the pre-defined syntax of a programming
language, a syntax error may appear.
Example :
<head>
<script>
do.while ('condition')
</script>
</head>
2. Runtime Error: When an error occurs during the execution of the program, such an error is
known as Runtime error. The codes which create runtime errors are known as Exceptions.
Thus, exception handlers are used for handling runtime errors.
Syntax :
<script type = "text/javascript">

</script>
3. Logical Error: An error which occurs when there is any logical mistake in the program that
may not produce the desired output, and may terminate abnormally. Such an error is known as
Logical error.
Logic errors can be the most difficult type of errors to track down. These errors are not the
result of a syntax or runtime error. Instead, they occur when you make a mistake in the logic
that drives your script and you do not get the result you expected.
You cannot catch those errors, because it depends on your code requirement type of logic
you want to put in your program.
6)explain looping statements JS with an example
Different types of loops
1. for - loops through a block of code a number of times.

Syntax:
for (statement 1; statement 2; statement 3) {
// code block to be executed
}
Statement 1 is executed (one time) before the execution of the code block.Statement 2 defines
the condition for executing the code block.Statement 3 is executed (every time) after the code
block has been executed.
Example :
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Output : The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
2. while - loops through a block of code while a specified condition is true.
Syntax
while (condition) {
}
Example :
while (i < 10) {
text += "The number is " + i;
i++;
}
Output :
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
3. do/while - also loops through a block of code while a specified condition is true.
Syntax
do {
}
while (condition);
Example
do {
text += "The number is " + i;
i++;
}
while (i < 10);
Output :
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
7)difference java/JavaScript
Java JavaScript
Java is a strongly typed language and

variables must be declared first to use in the
program. In Java, the type of a variable is JavaScript is a loosely typed language and
checked at compile-time. has a more relaxed syntax and rules.
Java is an object-oriented programming JavaScript is an object-based scripting

language. language.
JavaScript code used to run only in the

Java applications can run in any virtual browser, but now it can run on the server via
machine(JVM) or browser. Node.js.
Objects of Java are class-based even we can’t

make any program in java without creating a
class. JavaScript Objects are prototype-based.
Java program has the file extension “.Java” JavaScript file has the file extension “.js” and
and translates source code into bytecodes it is interpreted but not compiled, every
which are executed by JVM(Java Virtual browser has the Javascript interpreter to
Machine). execute JS code.if compile time
contained within a web page and integrates

Java is a Standalone language. with its HTML content.
Java has a thread-based approach to Javascript has an event-based approach to

concurrency. concurrency.
Java supports multithreading. Javascript doesn’t support multi-threading.
Javascript is used for the frontend and

Java is mainly used for backend backend both.
Java uses more memory Javascript uses less memory.
Java requires a Java Development Kit(JDK) Javascript requires any text editor or browser
Java JavaScript
to run the code console to run the code
8)lab uppercase program
<html>
<head>
function upper()
{
var upper = document.form1.string.value.toUpperCase();
document.form1.string.value = upper;
}
</script>
</head>
<body>
<form name = "form1">
<table>
<tr>
<td>Enter String</td>
<td><input type = "text" name = "string" /></td>
</tr>
<tr>
<td><input type = "button" value = "upper" onclick = "upper()"></td>
</tr>
</table>
</form>
</body>
</html>
9)define function explain the return statement with an example using function
A JavaScript function is a block of code designed to perform a particular task.A JavaScript function
is executed when "something" invokes it (calls it).When JavaScript reaches a return statement, the
function will stop executing.If the function was invoked from a statement, JavaScript will "return"
to execute the code after the invoking statement.Functions often compute a return value. The
return value is "returned" back to the "caller":
Syntax
function name(parameter1, parameter2, parameter3) {
// code to be executed
}
Example
function myFunction(p1, p2) {
return p1 * p2; // The function returns the product of p1 and p2
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
Output : 12
10)write a short note on document object module(not sure about the answer)
The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that
allows programs and scripts to dynamically access and update the content, structure, and style of a
document."
The W3C DOM standard is separated into 3 different parts:
 Core DOM - standard model for all document types

 XML DOM - standard model for XML documents
 HTML DOM - standard model for HTML documents
The HTML DOM is a standard object model and programming interface for HTML. It defines:
 The HTML elements as objects

 The properties of all HTML elements
 The methods to access all HTML elements
 The events for all HTML elements
In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML
elements.
11)define an array object explain difference ways of creating an array object in JS

with an example
JavaScript array is an object that represents a collection of similar type of elements.

There are 3 ways to construct array in JavaScript
1. By array literal
The syntax of creating array using array literal is given below:
var arrayname=[value1,value2.....valueN];
As you can see, values are contained inside [ ] and separated by , (comma).
<html>
<body>
<script>
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++)
{
document.write(emp[i] + "<br/>");
}
</script>
</body>
</html>
2. By creating instance of Array directly (using new keyword)- The syntax of creating array
directly is given below:
var arrayname=new Array();
Here, new keyword is used to create instance of array.
<html>
<body>
<script>
var i;
var emp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
emp[2] = "John";
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
</body>
</html>
3. By using an Array constructor (using new keyword)

Here, you need to create instance of array by passing arguments in constructor so that we
don't have to provide value explicitly.
<html>
<body>
<script>
var emp=new Array("Jai","Vijay","Smith");
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
</body>
</html>
12)what are the datatypes supported by the JS(not sure about the answer)
Data
Description Example
Types
String represents textual data 'hello', "hello world!" etc
an integer or a floating-
Number 3, 3.234, 3e-2 etc.
point number
an integer with arbitrary 900719925124740999n ,

BigInt
precision 1n etc.
Any of two values: true or

Boolean true and false
false
a data type whose variable is

undefined let a;
not initialized
null denotes a null value let a = null;
data type whose instances

Symbol let value = Symbol('hello');
are unique and immutable
key-value pairs of collection

Object let student = { };
of data
13)lab to find factorial of given number

<html>
<body>
var n = parseInt(window.prompt("Enter the Number:"));
var result = fact(n);
window.alert("Factorial of the given number " + result);
function fact(n)
{
if(n == 0)
return 1;
else
return (n*fact(n-1));
}
</script>
</body>
</html>
14)explain various conditional statement available in JS
1) If Statement
If statements are logical blocks used within programming.
Syntax
if (condition) {
// block of code to be executed if the condition is true
}
Example:
if (hour < 18) {
greeting = "Good day";
}
Output : Good day
2) If-else Statement
The else statement to specify a block of code to be executed if the condition is false.
Syntax
if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}
Example
if (hour < 18) {
} else {
greeting = "Good evening";
}
Output : Good day
3) If else-if Statement
The else if statement to specify a new condition if the first condition is false.
Syntax
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
Example
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
} else {
greeting = "Good evening";
}
Output : Good morning
4) Switch Case
The switch statement to select one of many code blocks to be executed.
Syntax
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
Example
switch (new Date().getDay()) {
case 6:
text = "Today is Saturday";
break;
case 0:
text = "Today is Sunday";
break;
default:
text = "Looking forward to the Weekend";
}
Output : Today is Saturday
UNIT-3
1)short note on bootstrap
It is an open-source and free CSS framework, which helps in directing a responsive device-
friendly mobile-first front-end web page development tool. Bootstrap includes the CSS
(Cascading Style Sheets), and an optional JavaScript supported design template (plug-ins) that
deals with typography, implementation of buttons, forms, and various other components user
interface
Benefits
 It produces less cross-browser bugs.

 It is a consistent framework supported by all the browsers plus CSS based compatibility
fixes.
 It is a lightweight and hence widely used framework for creating responsive sites.
 Looks, structure, and styles can be customized as per requirement.
 A simple and effective grid system.
Applications of Bootstrap
 Scaffolding – Bootstrap provides a basic structure with Grid System, link styles, and
background. This is is covered in detail in the section Bootstrap Basic Structure
 CSS – Bootstrap comes with the feature of global CSS settings, fundamental HTML
elements styled and enhanced with extensible classes, and an advanced grid system. This is
covered in detail in the section Bootstrap with CSS.
 Components – Bootstrap contains over a dozen reusable components built to provide
iconography, dropdowns, navigation, alerts, pop-overs, and much more. This is covered in
detail in the section Layout Components.
 JavaScript Plugins – Bootstrap contains over a dozen custom jQuery plugins. You can easily
include them all, or one by one. This is covered in details in the section Bootstrap Plugins.
 Customize – You can customize Bootstrap’s components, LESS variables, and jQuery
plugins to get your very own version.
2)responsive table on bootstrap
By wrapping any .table in .table-responsive class, you will make the table scroll horizontally up to
small devices (under 768px). When viewing on anything larger than 768px wide, you will not see
any difference in these tables.
Example:
<div class = “table-responsive”>
<table class = “table”>
<caption>Responsive Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr>
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr>
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr>
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>
</div>
3)different types of class methods used in table with the help of bootstrap example
Don’t know the answer
4)bootstrap tags mark(),dl(),kbd()

1. <mark>-The <mark> tag defines text that should be marked or highlighted
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Highlight Text</h1>
<p>Use the mark element to <mark>highlight</mark> text.</p>
</div>
</body>
</html>
2. <dl>-Bootstrap will style the HTML <dl> element in the following way:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Description Lists</h1>
<p>The dl element indicates a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
</body>
</html>
3. <kbd>-Bootstrap will style the HTML <kbd> element in the following way:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Keyboard Inputs</h1>
<p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>
</body>
</html>
5)basic structure of bootstrap grid
The following is a basic structure of a Bootstrap grid:
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
</div>
<div class="row">
...
</div>
</div>
So, to create the layout you want, create a container (<div class="container">). Next, create a row
(<div class="row">). Then, add the desired number of columns (tags with appropriate .col-*-
* classes). Note that numbers in .col-*-* should always add up to 12 for each row.
6)define bootstrap components explain types of bootstrap components with an

example syntax
1) Glyphicons – These are the font formatted icons that are available in Bootstrap. They are
about 200 in number. These glyphicons can be found at https://glyphicons.com. There are
glyphicons to denote almost all actions like zoom, edit, warning, file, delete, etc., and they are
defined in an individual class. So, you need to use the base class and individual class, ideally in a
span element and use these glyphicons.
Syntax:
<p><span class = “glyphicons glyphicon-pencil”></span></p>
2) Dropdowns – These are the toggle-based menus that list a list of links. You need to use
the .dropdown class as the element’s class have the list items under it with the class .dropdown-
menu.
Syntax:
<div class= “dropdown”></div>
3) Button groups – With this Bootstrap component, you can group a set of buttons together in a
series adjacent to each other.
Define division elements with .btn-group class and nest those elements with a button with .btn
class.
Syntax:
<div class=“btn-group”><button class= “btn”>Correct</button></div>

<div class=“btn-group”><button class= “btn”>Wrong</button></div>
4) Button dropdowns – This component is used to employ a button element to trigger a dropdown.
Syntax:
<button class = “btn-default dropdown-toggle”><!—Write the dropdown component here
--></button>
5) Input groups – This extends the form-control class and adds text or buttons at either side of an
input field of an input element. You need to use a .input-group class with a .input-group-addon
class in order to use these input groups.
Syntax:
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-
addon1">
</div>
6) Navbar – These components serve as the navigation headers for your website. They are
collapsed to be expanded vertically with a toggling hamburger menu in the devices of smaller
screen sizes and become horizontal as the screen width increases.
Syntax:
<nav class = “navbar”><!—Code your navigation DOM elements --></nav>
7) Jumbotron – This is a bootstrap component that can extend over the full screen (or viewport) to
show some key content.
Syntax:
<div class = “jumbotron”><!—Write your content within DOM elements here --></div>
8) Alerts – This is a Bootstrap component with a jQuery plugin that provides contextual feedback
messages depending upon the user action. This is basically used to display alert messages.
Syntax:
<div class="alert alert-success" role="alert">...</div>
9) Progress bars – This component is used to provide the visuals on the feedback on the progress
of work or action with a progress bar.
Synatx:
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-
valuemax="100" style="width: 60%;">
10) Badges – This is a component to highlight something like unread items by adding the
class .badge to the DOM element, preferably a span.
Syntax:
<button class="btn btn-primary" type="button">
Messages <span class="badge">3</span>
</button>
11) Pagination – This component gives your site multi-page pagination so that the content can be
split into multiple pages and navigated at ease. Usually, the DOM element for unordered lists is
defined with this class .pagination.
Syntax:
<ul class = “pagination”><!—List elements goes here --></ul>
7)define bootstrap form and types of bootstrap form with an example
Form controls automatically receive some global styling with Bootstrap:
All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.
Form Layout
Bootstrap provides you with following types of form layouts −
 Vertical (default) form

 In-line form
 Horizontal form
Vertical or Basic Form
The basic form structure comes with Bootstrap; individual form controls automatically receive
some global styling. To create a basic form do the following −
 Add a role form to the parent <form> element.
 Wrap labels and controls in a <div> with class .form-group. This is needed for optimum
spacing.
 Add a class of .form-control to all textual <input>, <textarea>, and <select> elements.
<form role = "form">
<div class = "form-group">

<label for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
</div>

<label for = "inputfile">File input</label>
<input type = "file" id = "inputfile">
<p class = "help-block">Example block-level help text here.</p>
</div>
<div class = "checkbox">

<label><input type = "checkbox"> Check me out</label>
</div>
<button type = "submit" class = "btn btn-default">Submit</button>

</form>
Inline Form
To create a form where all of the elements are inline, left aligned and labels are alongside, add the
class .form-inline to the <form> tag.
Live Demo
<form class = "form-inline" role = "form">

<label class = "sr-only" for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
</div>

<label class = "sr-only" for = "inputfile">File input</label>
<input type = "file" id = "inputfile">
</div>
<label><input type = "checkbox"> Check me out</label>
</div>
<button type = "submit" class = "btn btn-default">Submit</button>

</form>
 By default inputs, selects, and textareas have 100% width in Bootstrap. You need to set a
width on the form controls when using inline form.
 Using the class .sr-only you can hide the labels of the inline forms.
Horizontal Form
Horizontal forms stands apart from the others not only in the amount of markup, but also in the
presentation of the form. To create a form that uses the horizontal layout, do the following −
 Add a class of .form-horizontal to the parent <form> element.
 Wrap labels and controls in a <div> with class .form-group.
 Add a class of .control-label to the labels.
Live Demo
<form class = "form-horizontal" role = "form">

<label for = "firstname" class = "col-sm-2 control-label">First Name</label>
<div class = "col-sm-10">

<input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First
Name">
</div>
</div>

<label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
<div class = "col-sm-10">

<input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
</div>
</div>

<div class = "col-sm-offset-2 col-sm-10">
<label><input type = "checkbox"> Remember me</label>
</div>
</div>
</div>

<div class = "col-sm-offset-2 col-sm-10">
<button type = "submit" class = "btn btn-default">Sign in</button>
</div>
</div>
</form>
8)explain the components of dropdown menu using bootstrap

Dropdown menus are toggleable, contextual menus for displaying links in a list format. This can
be made interactive with the dropdown JavaScript plugin.
To use dropdown, just wrap the dropdown menu within the class .dropdown.The following
example demonstrates a basic dropdown menu −
<div class = "dropdown">
<button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle =

"dropdown">
Topics
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">

<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>

<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>

<a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>
<li role = "presentation" class = "divider"></li>

<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
</li>
</ul>
</div>
Options
Alignment
Align the dropdown menu to right by adding the class .pull-right to .dropdown-menu. The
following example demonstrates this −

"dropdown">
Topics
</button>
<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu1">

</li>

</li>

</a>
</li>

</li>
</ul>
</div>
Headers
You can add a header to label sections of actions in any dropdown menu by using the
class dropdown-header. The following example demonstrates this −

"dropdown">
Topics
</button>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">

<li role = "presentation" class = "dropdown-header">Dropdown header</li>
<li role = "presentation" >

</li>

</li>

</a>
</li>

<li role = "presentation" class = "dropdown-header">Dropdown header</li>

</li>
</ul>
</div>
9)types of the bootstrap list with example
Adding Badges to List Group

We can add the badges component to any list group item and it will automatically be positioned
on the right. Just add <span class = "badge"> within the <li> element. The following example
demonstrates this −
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">

<span class = "badge">New</span>
24*7 support
</li>
<li class = "list-group-item">Renewal cost per year</li>
<li class = "list-group-item">

<span class = "badge">New</span>
Disocunt Offer
</li>
</ul>
Linking List Group Items
By using the anchor tags instead of list items, we can link the list groups. We need to use <div>
instead of <ul> element. The following example demonstrates this −
<a href = "#" class = "list-group-item active">
Free Domain Name Registration
</a>
<a href = "#" class = "list-group-item">24*7 support</a>

<a href = "#" class = "list-group-item">Free Window Space hosting</a>
<a href = "#" class = "list-group-item">Number of Images</a>
<a href = "#" class = "list-group-item">Renewal cost per year</a>
Add Custom Content to List Group
We can add any HTML content to the above linked list groups. The following example
demonstrates this −
<div class = "list-group">
<h4 class = "list-group-item-heading">
Starter Website Package
</h4>
</a>
<a href = "#" class = "list-group-item">

</h4>
<p class = "list-group-item-text">

You will get a free domain registration with website pages.
</p>
</a>

24*7 support
</h4>

We provide 24*7 support.
</p>
</a>
</div>
<div class = "list-group">

Business Website Package
</h4>
</a>
<a href = "#" class="list-group-item">

</h4>

You will get a free domain registration with website pages.
</p>
</a>

<h4 class = "list-group-item-heading">24*7 support</h4>
<p class = "list-group-item-text">We provide 24*7 support.</p>
</a>
</div>
10)explain .table'border and .table'hover
Bordered Table
By adding the .table-bordered class, you will get borders surrounding every element and rounded
corners around the entire table as seen in the following example −
<table class = "table table-bordered">
<caption>Bordered Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
Hover Table
By adding the .table-hover class, a light gray background will be added to rows while the cursor
hovers over them, as seen in the following example −
<table class = "table table-hover">
<caption>Hover Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
UNIT-4
1. shot note on angular js controllers
AngularJS application mainly relies on controllers to control the flow of data in the application. A
controller is defined using ng-controller directive. A controller is a JavaScript object that contains
attributes/properties, and functions. Each controller accepts $scope as a parameter, which refers
to the application/module that the controller needs to handle
<script>
function studentController($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar"
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
}
</script>
2)define angular js
AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA)
projects. It extends HTML DOM with additional attributes and makes it more responsive to user
actions. AngularJS is open source, completely free, and used by thousands of developers around
the world
3)features of angular js &explain
The core features of AngularJS are as follows −
Data-binding − It is the automatic synchronization of data between model and view components.
Scope − These are objects that refer to the model. They act as a glue between controller and view.
Controller − These are JavaScript functions bound to a particular scope.
Services − AngularJS comes with several built-in services such as $http to make a
XMLHttpRequests. These are singleton objects which are instantiated only once in app.
Filters − These select a subset of items from an array and returns a new array.
Directives − Directives are markers on DOM elements such as elements, attributes, css, and more.
These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has
built-in directives such as ngBind, ngModel, etc.
Templates − These are the rendered view with information from the controller and model. These
can be a single file (such as index.html) or multiple views in one page using partials.
Routing − It is concept of switching views.
04.with a neat diagram explain life cycle of angular js
Life cycle, which has three phases: bootstrap, compilation, and runtime. Understanding the life
cycle of an AngularJS application makes it easier to understand how to design and implement your
code.
The three phases of the life cycle of an AngularJS application happen each time a web page is
loaded in the browser.
The Bootstrap Phase
The first phase of the AngularJS life cycle is the bootstrap phase, which occurs when the AngularJS
JavaScript library is downloaded to the browser. AngularJS initializes its own necessary
components and then initializes your module, which the ng-app directive points to. The module is
loaded, and any dependencies are injected into your module and made available to code within the
module.
The Compilation Phase
The second phase of the AngularJS life cycle is the HTML compilation stage. Initially when a web
page is loaded, a static form of the DOM is loaded in the browser. During the compilation phase,
the static DOM is replaced with a dynamic DOM that represents the AngularJS view.
This phase involves two parts: traversing the static DOM and collecting all the directives and then
linking the directives to the appropriate JavaScript functionality in the AngularJS built-in library
or custom directive code. The directives are combined with a scope to produce the dynamic or live
view.
The Runtime Data Binding Phase
The final phase of the AngularJS application is the runtime phase, which exists until the user
reloads or navigates away from a web page. At that point, any changes in the scope are reflected in
the view, and any changes in the view are directly updated in the scope, making the scope the
single source of data for the view.
AngularJS behaves differently from traditional methods of binding data. Traditional methods
combine a template with data received from the engine and then manipulate the DOM each time
the data changes. AngularJS compiles the DOM only once and then links the compiled template as
necessary, making it much more efficient than traditional methods.
05.discuss different ways use to bind the data in angular js with an example
Data Binding in AngularJS.
AngularJS follows Two-Way data binding model.
 One-Way Data Binding
 Two-Way Data Binding – Angular JS
One-Way Data Binding
 The one-way data binding is an approach where a value is taken from the data model and
inserted into an HTML element.
 There is no way to update model from view.
 It is used in classical template systems. These systems bind data in only one direction.
5)how to create a module in angular js explain with an exampleTwo-Way Data

Biniding
 Data-binding in Angular apps is the automatic synchronization of data between the model
and view components.
 Data binding lets user treat the model as the single-source-of-truth in user application.
 The view component is a projection of the model at all times.
 If the model is changed, the view reflects the change and vice versa.
06.explain mvc architecture with a neat diagram

MVC Architecture
Model View Controller or MVC as it is popularly called, is a software design pattern for developing
web applications. A Model View Controller pattern is made up of the following three parts –
Model − It is the lowest level of the pattern responsible for maintaining data.
The model is responsible for managing application data. It responds to the request from view and
to the instructions from controller to update itself.
View − It is responsible for displaying all or a portion of the data to the user.
A presentation of data in a particular format, triggered by the controller's decision to present the
data. They are script-based template systems such as JSP, ASP, PHP and very easy to integrate
with AJAX technology.
Controller − It is a software Code that controls the interactions between the Model and View.
The controller responds to user input and performs interactions on the data model objects. The
controller receives input, validates it, and then performs business operations that modify the state
of the data model.
07.explain any 3 angular js directives with an example (explain ng'app directive with
example this question's answer is also given here itself)
The AngularJS framework can be divided into three major parts −

ng-app − This directive defines and links an AngularJS application to HTML. The ng-app
directive defines the root element of an AngularJS application and starts an AngularJS
Application. The ng-app directive will auto-bootstrap (automatically initialize) the application
when a web page is loaded. It is also used to load various AngularJS modules in AngularJS
Application.
Ex:
<div ng-app = "">
...
</div>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
ng-model − This directive binds the values of AngularJS application data to HTML input controls.
ngModel is a directive which binds input, select and textarea, and stores the required user value in
a variable and we can use that variable whenever we require that value. It also is used during
validations in a form. We can use ngModel with: input. text.
Ex:
<div ng-app = "">
...
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>
ng-repeat − This directive repeats HTML elements for each item in a collection.
Ex: <div ng-app = "">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
08.how to create a module in angular js explain with an example(not sure about the
answer)
AngularJS supports modular approach. Modules are used to separate logic such as services,
controllers, application etc. from the code and maintain the code clean. We define modules in
separate js files and name them as per the module.js file. In the following example, we are going to
create two modules −
 Application Module − used to initialize an application with controller(s).
 Controller Module − used to define the controller.
Application Module
Here is a file named mainApp.js that contains the following code −
var mainApp = angular.module("mainApp", []);
Here, we declare an application mainApp module using angular.module function and pass an
empty array to it. This array generally contains dependent modules.
Controller Module
studentController.js
mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65},
{name:'English',marks:75},
{name:'Hindi',marks:67}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
Here, we declare a controller studentController module using mainApp.controller function.
09.what is angular expression and difference between angular expression
&JavaScript expression
AngularJS - Expressions
Expressions are used to bind application data to HTML. Expressions are written inside double
curly braces such as in {{ expression}}. Expressions behave similar to ngbind directives. AngularJS
expressions are pure JavaScript expressions and output the data where they are used.
Using numbers
<p>Expense on Books : {{cost * quantity}} Rs</p>
Using Strings
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
Using Object
<p>Roll No: {{student.rollno}}</p>
Using Array
<p>Marks(Math): {{marks[3]}}</p>
Difference between angular expression and javascript expression
 Angular expression
 Angular expressions are evaluated against a scopeobject.
 In angular expression evaluation is forgiving to undefined and null.
 Control flow statements cannot be used in angularjs expressions,i.e,loop,conditional or
exception
 Angular Expressions do not allow function declaration,not even inside ng-init directive.
 In an Angular expression Bitwise, , or void operators cannot be used
JavaScript expressions
 JavaScript expressions are evaluated against the global window.
 JavaScript expression try to evaluate undefined properties generates ReferenceError or
TypeError.
 Control flow statements can be used in JavaScript expressions
 function declaration is allowed in JavaScript expressions
 You can use Bitwise, , or void operators in an JavaScript expression.
10.define dependency injection in angular js an explain different components in
angular js(not sure about the answer)
Dependency Injection is a software design in which components are given their dependencies
instead of hard coding them within the component. It relieves a component from locating the
dependency and makes dependencies configurable. It also helps in making components
reusable, maintainable and testable.
AngularJS provides a supreme Dependency Injection mechanism. It provides following core
components which can be injected into each other as dependencies.
 Value
 Factory
 Service
 Provider
 Constant

Web Final

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Final

Uploaded by

Copyright:

Available Formats

UNIT-1

1)Details about web browser(not sure about the answer)

2)Font properties with example

Font family <style type="text/css">

3)Table tags and explain examples(not sure about the answer)

Tag Description Example

4)CSS box module and fig

Explanation of the different parts:

6)Web Server and Internet(not sure about the answer)

Ans- Web Server

<h1 class=”center”>This heading will not be affected</h1>

<p id=”para1”>Hello World!</p>

<h1 class=”center”>This heading will not be affected</h1>

8) What is html and define

Ans- In HTML, there are two main types of lists:

 Set different list item markers for ordered lists

1. The list-style-type property specifies the type of list item marker.

3)define JavaScript features of JavaScript

Javascript is a scripting language,which we will be calling it as lightweight programming

Methods to create date object.

JavaScript Date Example

There are 3 types of errors :

Different types of loops

1. for - loops through a block of code a number of times.

Java is a strongly typed language and

Java is an object-oriented programming JavaScript is an object-based scripting

JavaScript code used to run only in the

Objects of Java are class-based even we can’t

contained within a web page and integrates

Java has a thread-based approach to Javascript has an event-based approach to

Java supports multithreading. Javascript doesn’t support multi-threading.

Javascript is used for the frontend and

Java uses more memory Javascript uses less memory.

to run the code console to run the code

8)lab uppercase program

The DOM is a W3C (World Wide Web Consortium) standard.

The W3C DOM standard is separated into 3 different parts:

 Core DOM - standard model for all document types

 The HTML elements as objects

11)define an array object explain difference ways of creating an array object in JS

JavaScript array is an object that represents a collection of similar type of elements.

3. By using an Array constructor (using new keyword)

String represents textual data 'hello', "hello world!" etc

an integer with arbitrary 900719925124740999n ,

Any of two values: true or

a data type whose variable is

null denotes a null value let a = null;

data type whose instances

key-value pairs of collection

13)lab to find factorial of given number

14)explain various conditional statement available in JS

If statements are logical blocks used within programming.

 It produces less cross-browser bugs.

Don’t know the answer

4)bootstrap tags mark(),dl(),kbd()

5)basic structure of bootstrap grid

The following is a basic structure of a Bootstrap grid:

6)define bootstrap components explain types of bootstrap components with an

<p><span class = “glyphicons glyphicon-pencil”></span></p>

<div class=“btn-group”><button class= “btn”>Correct</button></div>

7)define bootstrap form and types of bootstrap form with an example

Form controls automatically receive some global styling with Bootstrap:

 Vertical (default) form