Keyword

Result: 65 questions

What is HTML5 Web Storage? Explain localStorage and sessionStorage.

Answer:

With HTML5, web pages can store data locally within the user’s browser.

Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for.

The data is stored in name/value pairs, and a web page can only access data stored by itself. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

The difference between localStorage and sessionStorage involves the lifetime and scope of the storage.

Data stored through localStorage is permanent: it does not expire and remains stored on the user’s computer until a web app deletes it or the user asks the browser to delete it. SessionStorage has the same lifetime as the top-level window or browser tab in which the script that stored it is running. When the window or tab is permanently closed, any data stored through sessionStorage is deleted.

Both forms of storage are scoped to the document origin so that documents with different origins will never share the stored objects. But sessionStorage is also scoped on a per-window basis. If a user has two browser tabs displaying documents from the same origin, those two tabs have separate sessionStorage data: the scripts running in one tab cannot read or overwrite the data written by scripts in the other tab, even if both tabs are visiting exactly the same page and are running exactly the same scripts.

View

Explain what is the difference between AngularJS and backbone.js?

Answer:

AngularJS combines the functionalities of most of the 3rd party libraries, it supports individual functionalities required to develop HTML5 Apps.  While Backbone.js do their jobs individually.

View

What is “callback hell” and how can it be avoided?

Answer:

“Callback hell” refers to heavily nested callbacks that have become unweildy or unreadable.

An example of heavily nested code is below:

query("SELECT clientId FROM clients WHERE clientName='picanteverde';", function(id){
  query("SELECT * FROM transactions WHERE clientId=" + id, function(transactions){
    transactions.each(function(transac){
      query("UPDATE transactions SET value = " + (transac.value*0.1) + " WHERE id=" + transac.id, function(error){
        if(!error){
          console.log("success!!");
        }else{
          console.log("error");
        }
      });
    });
  });
});

The primary method to fix callback hell is usually referred to as modularization. The callbacks are broken out into independent functions which can be called with some parameters. So the first level of improvement might be:

var logError = function(error){
    if(!error){
      console.log("success!!");
    }else{
      console.log("error");
    }
  },
  updateTransaction = function(t){
    query("UPDATE transactions SET value = " + (t.value*0.1) + " WHERE id=" + t.id, logError);
  },
  handleTransactions = function(transactions){
    transactions.each(updateTransaction);
  },
  handleClient = function(id){
    query("SELECT * FROM transactions WHERE clientId=" + id, handleTransactions);
  };

query("SELECT clientId FROM clients WHERE clientName='picanteverde';",handleClient);

Even though this code is much easier to read, and we created some functions that we can even reuse later, in some cases it may be appropriate to use a more robust solution in the form of promises. Promises allow additional desirable behavior such as error propogation and chaining. Node.js doesn’t include much core support for promises, so one of the popular promise libraries should be used. One of the most popular is the Q promise library.

More information about promises and how they work can be found here.

Additionally, a more supercharged solution to callback hell is provided by generators, as these can resolve execution dependency between different callbacks. However, generators are much more advanced and it might be overkill to use them for this purpose. To read more about generators you can start with this post.

View

What is canvas in HTML5?

Answer:

Canvas is an HTML area which is used to draw graphics.

View

Is there any need to change the web browsers to support HTML5?

Answer:

No. Almost all browsers (updated versions) support HTML 5. For example: Chrome, Firefox, Opera, Safari, IE etc.

View

Which video formats are supported by HTML5?

Answer:

HTML 5 supports three types of video format:

  • mp4
  • webm
  • ogg
View

How tags are migrated from HTML4 to HTML5?

Answer:

No. Typical HTML4 Typical HTML5
1) <div id="header"> <header>
2) <div id="menu"> <nav>
3) <div id="content"> <section>
4) <div id="post"> <article>
5) <div id="footer"> <footer>

Header and Footer Example

HTML 4 Header and Footer:

<div id="header">  
  <h1>Monday Times</h1>  
</div>  
.  
.  
.  
<div id="footer">  
  <p>&copy; JavaTpoint. All rights reserved.</p>  
</div>

HTML 5 Header and Footer:

<header>  
  <h1>Monday Times</h1>  
</header>  
.  
.  
.  
<footer>  
  <p>© JavaTpoint. All rights reserved.</p>  
</footer>

Menu Example

HTML 4 Menu:

<div id="menu">  
  <ul>  
    <li>News</li>  
    <li>Sports</li>  
    <li>Weather</li>  
  </ul>  
</div>

HTML 5 Menu:

<nav>  
  <ul>  
    <li>News</li>  
    <li>Sports</li>  
    <li>Weather</li>  
  </ul>  
</nav>

 

View

What is the use of required attribute in HTML5?

Answer:

It forces user to fill text on textfield or textarea before submitting form. It is used for form validation.

Example:

Name: <input type="text" name="name" required>

 

View

What are the new <input> types for form validation in HTML5?

Answer:

The new input types for form validation are email, url, number, tel and date.

Example:

<input type="email">

 

View

Which of the following browser supports HTML5 in its latest version?
 

Quiz

 Which of the following browser supports HTML5 in its latest version?

Quiz

Which of the following browser supports HTML5 in its latest version?
 

Quiz

 Is HTML5 backward compatible with old browsers?
 

Quiz

  Which of the following tag represents a generic document or application section in HTML5?
 

Quiz

 Which of the following tag represents an independent piece of content of a document in HTML5?
 

Quiz

  Which of the following tag represents a piece of content that is only slightly related to the rest of the page in HTML5?
 

Quiz

Which of the following tag represents the header of a section in HTML5?
 

Quiz

Which of the following tag represents the footer of a section in HTML5?
 

Quiz

 Which of the following tag represents a section of the document intended for navigation in HTML5?
 

Quiz

Which of the following tag can be used to mark up a conversation in HTML5?

Quiz

© 2017 QuizBucket.org