Sunday, 19 March 2017

HTML5 interview questions Part 2

1. Ques: What are the new APIs provided by the HTML5  standard ?
Answer:
The HTML 5 standard comes with a new APIs.
  • Media API
  • Text Track API
  • Application Cache API
  • User Interaction
  • Data Transfer API
  • Command API
  • Constraint Validation API
  • History API

2. Ques:  How can  use Audio in HTML5 ?
Answer:
 HTML5 embedding audio files following way. Supported audio formats are MP3, Wav and Ogg.
<audio controls>
  <source src="moviessong.mp3" type="audio/mpeg">
  <embed height="60" width="100" src="horse.mp3">
</audio>


3. Ques:  How can  use Video in HTML5 ?
Answer:
 HTML5 embedding Video files following way. Supported video formats are MP4, WebM and Ogg.
<video width="500" height="400" controls>

  <source src="movies.mp4" type="video/mp4">

  Your browser does'nt support video embedding feature.

</video>




4. Ques: What are “web workers”  in  HTML5?
Answer:
A web worker is a script that runs in the background (i.e., in another thread) without the page needing to wait for it to complete. The user can continue to interact with the page while the web worker runs in the background. Workers utilize thread-like message passing to achieve parallelism.
Unlike JavaScript the Web worker doesn't interrupt the user and the web page remain responsive because they are running tasks in the background.


5. Ques: What is use of HTML Canvas?
Answer:
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Ex:
<canvas id="newcanvas" width="300" height="100"></canvas>


6. Ques: What is a SVG?
Answer:
SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer. SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system etc.

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.


7. Ques: What is the difference between Canvas and SVG?
Answer:
 Difference between Canvas and SVG given as
Canvas 
  • Canvas draws 2D graphics, on the fly (with a JavaScript). 
  • Canvas is a javascript API for drawing vector graphics to a bitmap of a specific size.
  • Pixel based (Dynamic .png)
  • Single HTML element.(Inspect element in Developer tool. You can see only canvas tag)
  • Modified through script only
  • Event model/user interaction is granular (x,y)
  • Performance is better with smaller surface, a larger number of objects (>10k), or both
SVG
  • SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element. In SVG, each drawn shape is remembered as an object.
  • SVG is a document format for scalable vector graphics.
  • Shape based
  • Multiple graphical elements, which become part of the DOM
  • Modified through script and CSS
  • Event model/user interaction is abstracted (rect, path)
  • Performance is better with smaller number of objects (<10k), a larger surface, or both

8. Ques: What are the new input attributes in HTML5 ?
Answer:
Below are the new input attributes in HTML5 
  • AutoFocus
  • Form
  • FormMethod
  • FormNoValidate
  • Height and Width
  • Min and Max
  • Placeholder
  • Required

9. Ques: What methods are used to draw straight line using canvas?
Answer:
Below are the list of methods used to draw straight line 
  • moveTo(a,b)
  • lineTo(a,b)
  • stroke()

10. Ques: What is HTML5 Application Cache ?
Answer:
HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
  • Offline browsing - users can use the application when they're offline
  • Speed - cached resources load faster
  • Reduced server load - the browser will only download updated/changed resources from the server

No comments:

Post a Comment

Thank you for comment