IP 2nd Test PDF

1. Differentiate internet and intranet.
The Internet provides unlimited information which can be viewed by everyone

whereas, in Intranet, data circulates within the organization. The Internet provides
access to everyone. ... An intranet is a private network that belongs to a firm or an
institution.
2. Why we use XHTML?

As a markup language, XHTML 1.0 is very suitable for most purposes on the Web. Being
fairly flexible, it provides a way to separate content from presentation and allows
authors to include multimedia objects in their Web documents — XHTML 1.0 fits the
needs of most Web authors.
3. List any two Rich Internet Applications.

• MVC (Model View Controller)
• Angular JS.
• ASP.Net.
• Bootstrap, CSS.
• Microsoft Silverlight.
• Macromedia flex/flash.
• SQL Server.
• SSRS.
4. How exceptions are handled in JavaScript?

When a JavaScript statement generates an error, it is said to throw an exception. Instead
of proceeding to the next statement, the JavaScript interpreter checks for exception
handling code. If there is no exception handler, then the program returns from whatever
function threw the exception.
5. Define JDBC.
JDBC stands for Java Database Connectivity. It is a free open source application
programming interface for Java which enables the application to access the database. It
enables the developers to create queries, update data to the relational database using a
Structured Query Language (SQL).
6. What are Servlets?

A servlet is a Java programming language class used to extend the capabilities of servers
that host applications accessed by means of a request-response programming model.
Although servlets can respond to any type of request, they are commonly used to extend
the applications hosted by web servers.
7. What is the use of XMLHttpRequest Object?

XMLHttpRequest (XHR) is an API that can be used by JavaScript, JScript, VBScript, and
other web browser scripting languages to transfer and manipulate XML data to and
from a webserver using HTTP, establishing an independent connection channel
between a webpage's Client-Side and Server-Side.
8. What is XSL?
XSL is a language for expressing stylesheets. It consists of two parts: a language for
transforming XML documents, and. an XML vocabulary for specifying formatting
semantics
9. Describe AJAX Control Extender Toolkit.

AJAX Control Toolkit is a set of extenders that are used to extend the functionalities of
the ASP.NET controls. The extenders use a block of JavaScript code to add new and
enhanced capabilities to the ASP.NET controls. AJAX Control Toolkit is a free download
available on the Microsoft site.
10. State the significance of WSDL document.

Significance of WSDL. WSDL stands for web service description language, wsdl is the
description of your webservice, it specifies how xml elements are, and the processing of
it should be at one application level is used by xml documents to communicate with
other xml document at other application
PART – B
11. Write a HTML code for creating a feedback from as shown below. Include
comments in code to highlight the markup elements and their purpose. The
HTML form should use POST for submitting the form to a program
ProcessContactForm.php
<html>
<head><title>Feedback Form</title></head>
<body>
<div class="imagebg"></div>
<div class="row " style="margin-top: 50px">
<div class="col-md-6 col-md-offset-3 form-container">
<h2>Feedback</h2>
<p>
Please provide your feedback below:
</p>
<form role="form" method="post" id="reused_form" action =”
ProcessContactForm.php“ >
<div class="row">
<div class="col-sm-12 form-group">
<label>How do you rate your overall experience?</label>
<p>
<label class="radio-inline">
<input type="radio" name="experience" id="radio_experience" value="bad" >
Bad
</label>
<input type="radio" name="experience" id="radio_experience"
value="average" >
Average
</label>
<input type="radio" name="experience" id="radio_experience" value="good"
>
Good
</label>
</p>
</div>
</div>
<div class="row">
<label for="comments">
Comments:</label>
<textarea class="form-control" type="textarea" name="comments"
id="comments" placeholder="Your Comments" maxlength="6000"
rows="7"></textarea>
</div>
</div>
<div class="row">
<label for="name">
Your Name:</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<label for="email">
Email:</label>
<input type="email" class="form-control" id="email" name="email"
required>
</div>
</div>
<div class="row">
<button type="submit" class="btn btn-lg btn-warning btn-block" >Post
</button>
</div>
</div>
</form>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h3>Posted your feedback successfully!</h3>
</div>
<div id="error_message"
style="width:100%; height:100%; display:none; ">
<h3>Error</h3>
Sorry there was an error sending your form.
</div>
</div>
</div>
</body></html>
12. (i)Write a HTML program to display no of 5 student details in table
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table border="1px">
<tr>
<td rowspan="2">Roll_No.</td>
<td rowspan="2">Name</td>
<td colspan="3"align="center">Marks</td>
</tr>
<tr>
<td>first term</td>
<td>second term</td>
<td>third term</td>
</tr>
<tr>
<td>1.</td>
<td>Arpit kumar</td>
<td>140</td>
<td>160</td>
<td>175</td>
</tr>
<tr>
<td>2.</td>
<td>Nilima Kapoor</td>
<td>190</td>
<td>180</td>
<td>116</td>
</tr>
<tr>
<td>3.</td>
<td>Prerna Sharma</td>
<td>130</td>
<td>115</td>
<td>175</td>
</tr>
</table>
</body>
</html>
(ii) Explain the three ways of inserting a CSS to a document in detail.
There are three ways of inserting a style sheet: external, internal, and inline. The
browser will read the style definitions from the file myexternalstyle. css, and
apply the formatting to the pages linked to it accordingly. An internal style sheet
should be used when a single document has a unique style.
Inserting a Style Sheet
When a browser reads a style sheet, it will format the document according to
that style sheet. There are three ways of inserting a style sheet: external, internal,
and inline.
External Style Sheet
Typically, an external style sheet is used when the same style is applied to
multiple pages. In order to change the style for all these pages, you only need to
change the CSS syntax in the external style sheet. To link to the style sheet, each
page should contain the <link> tag included in the <head> section of the Web
page. For example:
<head>
<link rel="stylesheet" type="text/css" href="myexternalstyle.css" />
</head>
The browser will read the style definitions from the file myexternalstyle.css, and
apply the formatting to the pages linked to it accordingly.
An external style sheet can be edited in any text editor. The file needs to contain
CSS definitions only. HTML tags should not be included in the style sheet. Once
you have created the style sheet with your definitions, save the file with the .css
extension. Below is an example of the syntax contained in an external style sheet:
hr {color: red}
p {margin-left: 10px}body {background-color: yellow)}
Internal Style Sheet
An internal style sheet should be used when a single document has a unique
style. Internal styles will be defined in the <head> section of the page by using
the <style> tag.
<head>
<style type="text/css">
hr {color: red}
p {margin-left: 10px}
body {background-color:yellow)}
</style></head>
The browser will now read the style definitions and display the contents of the
Web pages, based on the formatting options listed in the style sheet.
Inline Styles
This method should be used when a style is to be applied to a single occurrence

of an element in the Web page. To use inline styles, you use the style attribute
within the tag. The style attribute can contain any CSS property. The example
below shows the syntax to change the color and the left margin of a paragraph:
<p style="color: red; margin-left: 10px">This paragraph is formatted using inline

styles</p>
PART – C:
13. Use CSS and JavaScript to create a program that allows you to drag and
drop multiple images (including one with mouse) as thumbnails. When the
user clicks the image with mouse, it should follow the cursor until the
mouse button is released. When the other images are clicked, the larger
version should grow from top-left corner of the main image area till it
reaches its full size. Allow the user to select the page’s background color
and whether the page should use serif and sans serif fonts. Then change the
body element’s style attribute accordingly.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
user-scalable=no" />
<title>Drag/Drop/Bounce</title>
<style>
#container {
width: 100%;
height: 400px;
background-color: #333;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 7px;
touch-action: none;
}
#item {
width: 100px;
height: 100px;
background-color: rgb(245, 230, 99);
border: 10px solid rgba(136, 136, 136, .5);
border-radius: 50%;
touch-action: none;
user-select: none;
}
#item:active {
background-color: rgba(168, 218, 220, 1.00);
}
#item:hover {
cursor: pointer;
border-width: 20px;
}
</style>
</head>
<body>
<div id="outerContainer">
<div id="container">
<div id="item">
</div>
</div>
</div>
<script>
var dragItem = document.querySelector("#item");
var container = document.querySelector("#container");
var active = false;

var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
container.addEventListener("touchstart", dragStart, false);

container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
container.addEventListener("mousedown", dragStart, false);

container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
function dragStart(e) {
if (e.type === "touchstart") {
initialX = e.touches[0].clientX - xOffset;
initialY = e.touches[0].clientY - yOffset;
} else {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
}
if (e.target === dragItem) {

active = true;
}
}
function dragEnd(e) {
initialX = currentX;
initialY = currentY;
active = false;
}
function drag(e) {
if (active) {
e.preventDefault();
if (e.type === "touchmove") {

currentX = e.touches[0].clientX - initialX;
currentY = e.touches[0].clientY - initialY;
} else {
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
}
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, dragItem);

}
}
function setTranslate(xPos, yPos, el) {

el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
</script>
</body>
</html>
If you take all of this and paste it into a HTML document, you will see your own version
of this example working on your computer. Anyway, take a few moments to glance
through everything you see. The HTML and CSS should look simple. They just help us
define the draggable element and the container it lives in. The JavaScript inside
the script tag is where the excitement is at, so let's go through it more carefully.
Variable Declaration
At the very top, we declare some variables that we'll be using all over the place:
var dragItem = document.querySelector("#item");
var container = document.querySelector("#container");
var active = false;

var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
The dragItem and container variables store a reference to their respective DOM
elements. The remaining variables seem a bit mysterious. Don't worry too much about
what they do right now. We'll cover them as they get used.
Listening for Events
Next up is our event-related code for dealing with the various states of our drag gesture:

The first batch of event listeners deal with touch, and the second batch of event listeners
deal with the mouse. The pairing between the touch and mouse events is as
follows: touchstart to mousedown, touchend to mouseup,
and touchmove to mousemove. Becaues these pairs of events are similar, we have
them assigned to the same event handler. The dragStart, dragEnd, and drag event
handlers will be responsible for dragging our element around across the mouse and
touch scenarios.
Now, you may have always heard that touch events and mouse events are very similar
and you don't have to explicitly listen to each of them separately like we are doing here.
For 90% of the time, that is correct. You can just fake touch behavior by listening to the
mouse only. The remaining 10% is reserved for more advanced cases like our drag
operation. The properties you can use diverge, so we can't reuse the same code across
mouse and touch. You can see this when we look at our first event handler,
the dragStart function.
Initializing the Drag
The dragStart function is the gateway to making our drag gesture actually work, and it
looks as follows:
function dragStart(e) {
if (e.type === "touchstart") {
initialX = e.touches[0].clientX - xOffset;
initialY = e.touches[0].clientY - yOffset;
} else {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
}

active = true;
}
}
This event handling function is called when the mousedown/touchstart events are
overheard. The first thing we do is set the initial position of our pointer
(initialX and initialY), and we do so by detecting whether the event is touch-based or
not. If the event is a touch-based event (by checking for touchstart), the way we get the
position is by accessing the clientX and clientY properties via our event
argument's touches[0] object. For the mouse-based event, our path is a little different.
We can get the initial position by accessing the clientX and clientY properties directly on
our event argument object. It would be great to have a unified way for being able to do
all of this, but alas, there isn't...yet!
One more thing to call out about the position. Calculating it involves both the current
position along with subtracting the values for xOffset and yOffset.
Both xOffset and yOffset are initially set to 0, but that won't be the case with subsequent
drag operations. We'll look more into how all of the positioning logc works in a few
moments.
The last thing we do is check if the element we are clicking on is the element we would
like to drag:
active = true;
}
Why are we doing this? If you go back to our event listener code, notice that we are
listening for our various mouse and touch events on the container and not the element
we are dragging:

There are several reasons for doing this. The main reason is that when you are dragging
your element really quickly, your pointer will leave the hit area of the element you are
dragging. When that happens, your drag will abruptly stop. That is really awkward. We
can avoid that by listening for the events on the dragged element's container instead. No
matter how quickly you are dragging your element around, you will almost always be
within the confines of the container. This ensures your events still fire and your dragged
element gets a chance to catch up to where your pointer is.
Wrapping up this block of code, once we identify this event as being associated with our
dragged element, we set the active variable to true:
active = true;
}
Phew. Who knew that three lines of code would require so much additional
explanation?
Dragging
When the mousemove or touchmove events get fired, the drag function is called:
function drag(e) {
if (active) {
e.preventDefault();
if (e.type === "touchmove") {

currentX = e.touches[0].clientX - initialX;
currentY = e.touches[0].clientY - initialY;
} else {
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
}
xOffset = currentX;
yOffset = currentY;

}
}
The first thing we do is check whether the drag is active by checking the value of
the active variable we set in the dragStart function. After that, it is smooth sailing. We
set the value of currentX and currentY to the result of the current pointer position with
an adjustment from initialX and initialY that we set earlier. Remember
the xOffset and yOffset variables we saw earlier? They now get set to the current
position. This allows future drag operations to pick up from where the current position
left off.
The last thing this function does is set the new position for our dragged element:
This is set by the setTranslate function which looks as follows:
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
This function is just a shortcut for setting the translate3d transform, and all we provide
is the element whose position we want to set and the horizontal/vertical positions to
set the translation to. You can learn more about why translate3d is probably one of the
best ways we have for performantly setting the position in this article.
About Setting the Dragged Element Position
By now, we have seen a lot of hand waving around how the dragged element's position
gets set. We have the setTranslate function and the
variables initialX, initialY, xOffset, yOffset, clientX, clientY, and the weird ways they all
get used. Setting the position of something can't be that hard, right? Well, that is
generally the case but when you throw in both mouse and touch, browser quirks,
rounding shenanigans, and more, you end up with something slightly more complicated
like what we have here. The main thing to note is that clientX and clientY return the
absolute position of the pointer inside the container element. The offset variables
account for where your pointer is relative to the dragged element's position. This is
done to ensure we drag from the correct location even if you click/tap on the edge of
our element. We don't want an unnatural snap to the position of our pointer when we
initiate the drag.
Ending the Drag

The last part of our code is the event handler that gets called when
the mouseup and touchend events fire, signifying the end of the drag:
function dragEnd(e) {
initialX = currentX;
initialY = currentY;
active = false;
}
We set our initial position for the next drag operation to be the current position. Since
our drag is now complete, we set the active variable to false.

IP 2nd Test PDF

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

IP 2nd Test PDF

Încărcat de

Drepturi de autor:

Formate disponibile

1. Differentiate internet and intranet.

The Internet provides unlimited information which can be viewed by everyone

2. Why we use XHTML?

3. List any two Rich Internet Applications.

4. How exceptions are handled in JavaScript?

6. What are Servlets?

7. What is the use of XMLHttpRequest Object?

9. Describe AJAX Control Extender Toolkit.

10. State the significance of WSDL document.

12. (i)Write a HTML program to display no of 5 student details in table

(ii) Explain the three ways of inserting a CSS to a document in detail.

External Style Sheet

This method should be used when a style is to be applied to a single occurrence

<p style="color: red; margin-left: 10px">This paragraph is formatted using inline

var active = false;

container.addEventListener("touchstart", dragStart, false);

container.addEventListener("mousedown", dragStart, false);

if (e.target === dragItem) {

if (e.type === "touchmove") {

setTranslate(currentX, currentY, dragItem);

function setTranslate(xPos, yPos, el) {

var active = false;

container.addEventListener("mousedown", dragStart, false);

if (e.target === dragItem) {

container.addEventListener("mousedown", dragStart, false);

if (e.type === "touchmove") {

setTranslate(currentX, currentY, dragItem);

Ending the Drag

S-ar putea să vă placă și