26. What is Server-Sent Event in HTML5?
Answer:
SSE is a technology where a browser receives automatic updates from a server via HTTP connection.
Server-Sent Events (SSE) allows a web page to get updates from a server.
It describes how servers can initiate data transmission towards clients once an initial client connection has been established.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>Getting Server Updates</h1>
<div id="result"></div>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>
</body>
</html>
The EventSource object is used to receive server-sent event notifications.
You have to add an <eventsource> tag to the document while using SSE in a web application.
In the above example, the 'source' attribute points to an URL which provides a persistent HTTP connection that sends a data stream containing the events.
27. What is Contenteditable Attribute in HTML5?
Answer:
Contenteditable attribute is the new feature of HTML5 which is mainly applied in Content Management System.
This attribute specifies that whether the content of an element is editable or not.
Syntax:
<element contenteditable = “true|false">
A true specifies that the element is editable and false specifies that the element is not editable.
Using contenteditable attribute, you can edit content directly from the browser.
Example:
<!DOCTYPE html>
<html>
<body>
<p contenteditable="true">Welcome to CareerrRide.</p> //You can edit this content directly from the browser because the attribute's value is 'true'.
</body>
</html>
28. What do you know about Vibration API in HTML5?
Answer:
Vibration API gives you alert when you get a new message or a phone call.
This API is especially useful when you are in a noisy environment or the place where you feel the ringing would be a distraction to others.
HTML5 introduces us to play with the vibration on the devices but the HTML5 Vibrate API supports only the recent version of Firefox & Chrome.
Syntax:
navigator.vibrate(long | [long]);
The vibrate function accepts milliseconds or array of milliseconds.
Example:
// vibrate for 1000 ms
navigator.vibrate(1000);
// array of ms
navigator.vibrate([1000]);
In the above examples, we are setting the device to vibrate 1000 milliseconds.
29. What is the purpose of Battery Status API in HTML5?
Answer:
The Battery Status API specification defines a means for the web developers to programatically to determine the battery status of the hosting device.
HTML5 provides an API for a device's battery.
Battery Status API provides information about the system's battery level and also defines events that are fired when changes of the battery level or status take place.
You can check whether the Battery Status API is supported by the browser or not as shown below.
var battery = navigator.battery || navigator.webkitBattery ||navigator.mozBattery || navigator.msBattery;
if (battery)
{
// Battery Status API is supported
}
This API is currently supported by the latest version of Chrome and Firefox and it has four basic properties:
1. Charging: It is a boolean type and a read only that indicates whether the device is charging the battery. The default value is true.
2. ChargingTime: It is a double type and a read only that gives you the remaining time in seconds to charge the device battery fully. The default value is 0.
3. DischargingTime: It is a double type and read only that represents the remaining time for a complete discharge of the device battery. The default value is calculated based on the other property values.
4. Level: It is a double type and read only that represents the battery level in the scale of 0 - 1.0. The default value is 1.0.
30. What is the purpose of Frames?
Answer:
Frames allow multiple HTML documents to be present as independent windows within a main browser.
It allows you to present two or more documents at once.
Frames can be declared using <FRAMESET> element. The 'src' attribute of the frameset element points to the document that you want to display in a frame. The rows and cols (columns) attributes of frameset element defines the layout of the frame.
Example:
<!DOCTYPE html>
<html>
<frameset cols="50%,50%">
<frame src="http://www.careerride.com/MCA.aspx" />
<frame src="http://www.careerride.com/view.aspx?id=20737" />
</frameset>
</html>
