Web technology ultra important question for exam
Question and answer |
Q1. Write a program in which you used alert, prompt, and confirm box.
Ans: JavaScript alert - Dialog box
An alert box is mostly used to give a warning to the user.alert() is a simple function to display a message to a dialog box (also called alert box). There is only one button which is an OK alert. Here is a simple example to display a text in the alert box.
HTML Code
<!DOCTYPE html>
<head>
<title>Javascript alert box example-1</title>
</head>
<body>
<h1 style="color: red">JavaScript alert() box example</h1>
<hr />
<script type="text/javascript">
alert("This is a alert box");
</script>
</body>
</html>
JavaScript prompt - Dialog box
The alert() method can not interact with the visitor. To interact with the user we use prompt(), which asks the visitor to input some information and stores the information in a variable. It is very useful when you want to popup a text box to get user input.
See the following example.
HTML Code
<!DOCTYPE html>
<head>
<title>JavaScript prompt() example-2</title>
</head>
<body>
<script type="text/javascript">
visiter_name = prompt("Input your name : ")
if(visiter_name != null && visiter_name != "")
alert("Your Name is : "+visiter_name);
else
alert("Blank name ...!")
</script>
</body>
</html>
JavaScript confirm - Dialog box
Confirm() displays a dialog box with two buttons, OK and Cancel and a text as a parameter. If the user clicks on OK button, confirm() returns true and on clicking Cancel button, confirm() returns false.
See the following web document.
HTML Code
<!DOCTYPE html>
<head>
<title>JavaScript confirm box example </title>
</head>
<body>
<h1 style="color: red">JavaScript confirm() box example</h1>
<hr />
<script type="text/javascript">
mess1='Press Ok to Continue.';
x = confirm(mess1);
if (x == true)
{
alert("You have clicked on Ok Button.");
}
else
{
alert("You have clicked on Cancel Button."); }
</script>
</body>
</html>
Q2. What is a chaning method ? explain with the proper example.
Ans: jQuery Method Chaining
The jQuery provides another robust feature called method chaining that allows us to perform multiple action on the same set of elements, all within a single line of code.
This is possible because most of the jQuery methods return a jQuery object that can be further used to call another method. Here's an example.
Example »
<!DOCTYPE html>
<head>
<title>Example of jQuery Method Chaining</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
/* Some custom styles to beautify this example */
p {
width: 200px;
padding: 40px 0;
font: bold 24px sans-serif;
text-align: center;
background: #aaccaa;
border: 1px solid #63a063;
box-sizing: border-box;
}
</style>
<script>
$(document).ready(function(){
$(".start").click(function(){
$("p").animate({width: "100%"}).animate({fontSize: "46px"}).animate({borderWidth: 30});
});
$(".reset").click(function(){
$("p").removeAttr("style");
});
});
</script>
</head>
<body>
<p>Hello World!</p>
<button type="button" class="start">Start Chaining</button>
<button type="button" class="reset">Reset</button>
</body>
</html>
The above example demonstrate the chaining of three animate() method. When a user click the trigger button, it expands the <p> to 100% width. Once the width change is complete the font-size is start animating and after its completion, the border animation will begin.
Q3.what is CDN server? And what is the Advantages of CDN server?
Ans:
CDN - Content Delivery Network:
CDN is short for content delivery network. A content delivery network (CDN) is a system of distributed servers (network) that deliver pages and other web content to a user, based on the geographic locations of the user, the origin of the webpage and the content delivery server.
This service is effective in speeding the delivery of content of websites with high traffic and websites that have global reach. The closer the CDN server is to the user geographically, the faster the content will be delivered to the user. CDNs also provide protection from large surges in traffic.
Advantages Of CDN
Companies that witness a huge traffic on their website on daily basis can use CDN to their advantage. When a large number of users simultaneously access a web page on some specific content such as a video, a CDN enables that content to be sent to each of them without delay. Here are few of the benefits of using a CDN for your website:
1. Your Server Load Will Decrease:
As a result of, strategically placed servers which form the backbone of the network the companies can have an increase in capacity and number of concurrent users that they can handle. Essentially, the content is spread out across several servers, as opposed to offloading them onto one large server.
2. Content Delivery Will Become Faster:
Due to higher reliability, operators can deliver high-quality content with a high level of service, low network server loads, and thus, lower costs. Moreover, jQuery is ubiquitous on the web. There’s a high probability that someone visiting a particular page has already done that in the past using the Google CDN. Therefore, the file has already been cached by the browser and the user won’t need to download again.
3. Segmenting Your Audience Becomes Easy:
CDNs can deliver different content to different users depending on the kind of device requesting the content. They are capable of detecting the type of mobile devices and can deliver a device-specific version of the content.
4. Lower Network Latency And Packet Loss:
End users experience less jitter and improved stream quality. CDN users can, therefore, deliver high definition content with high Quality of Service, low costs, and low network load.
5. Higher Availability And Better Usage Analytics:
CDNs dynamically distribute assets to the strategically placed core, fallback, and edge servers. CDNs can give more control of asset delivery and network load. They can optimize capacity per customer, provide views of real-time load and statistics, reveal which assets are popular, show active regions and report exact viewing details to customers. CDNs can thus offer 100% availability, even with large power, network or hardware outages.
6. Storage And Security:
CDNs offer secure storage capacity for content such as videos for enterprises that need it, as well as archiving and enhanced data backup services. CDNs can secure content through Digital Rights Management and limit access through user authentication.
Q4.state all the get elements method.
The HTML DOM Document Object
The document object represents your web page.
If you want to access any element in an HTML page, you always start with accessing the document object.
Below are some examples of how you can use the document object to access and manipulate HTML.
Finding HTML Elements
Often, with JavaScript, you want to manipulate HTML elements.
To do so, you have to find the elements first. There are several ways to do this:
- Finding HTML elements by id
- Finding HTML elements by tag name
- Finding HTML elements by class name
- Finding HTML elements by CSS selectors
- Finding HTML elements by HTML object collections
Finding HTML Element by Id
The easiest way to find an HTML element in the DOM, is by using the element id.
This example finds the element with
id="intro"
:
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements by Id</h2>
<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>
<p id="demo"></p>
<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"The text from the intro paragraph is " + myElement.innerHTML;
</script>
</body>
</html>
Finding HTML Elements by Tag Name
This example finds all
<p>
elements:
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements by Tag Name</h2>
<p>Hello World!</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
<p id="demo"></p>
<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
'The text in first paragraph (index 0) is: ' + x[0].innerHTML;
</script>
</body>
</html>
Finding HTML Elements by Class Name
If you want to find all HTML elements with the same class name, use
getElementsByClassName()
.
This example returns a list of all elements with
class="intro"
.
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements by Class Name</h2>
<p>Hello World!</p>
<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>
<p id="demo"></p>
<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>
</body>
</html>
Finding HTML Elements by CSS Selectors
If you want to find all HTML elements that match a specified CSS selector (id, class names, types, attributes, values of attributes, etc), use the
querySelectorAll()
method.
This example returns a list of all
<p>
elements with class="intro"
.
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements by Query Selector</h2>
<p>Hello World!</p>
<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>
</body>
</html>
No comments:
Post a Comment
Please do not enter any spam link in the comment box.