Thursday, 2 November 2017

HTML5 Questions & JavaScript


HTML5 Interview Questions : 



1. How to migrate html4 to html5

 You can migrate from XHTML to HTML5, using the same recipe.
Typical HTML4Typical HTML5
<div id="header"><header>
<div id="menu"><nav>
<div id="content"><section>
<div class="article"><article>
<div id="footer"><footer>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta charset="utf-8">


2.The Difference Between <article> <section> and <div>
Ans :
 In the HTML5 standard, the <section> element is defined as a block of related elements.
The <article> element is defined as a complete, self-contained block of related elements.
The <div> element is defined as a block of children elements.

3.Differences Between .htm and .html ?

There is no difference between the .htm and .html extensions. Both will be treated as HTML by any web browser or web server.
The differences are cultural:
.htm "smells" of early DOS systems where the system limited the extensions to 3 characters.
.html "smells" of Unix operating systems that did not have this limitation.
4.Explain some important html5 tags ?
ANS:


TagDescription
<article>Defines an article in a document
<aside>Defines content aside from the page content
<bdi>Isolates a part of text that might be formatted in a different direction from other text outside it
<details>Defines additional details that the user can view or hide
<dialog>Defines a dialog box or window
<figcaption>Defines a caption for a <figure> element
<figure>Defines self-contained content

 ex:
 <figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption>
</figure>

<footer>Defines a footer for a document or section
<header>Defines a header for a document or section
<main>Defines the main content of a document
<mark>Defines marked/highlighted text
<menuitem> Defines a command/menu item that the user can invoke from a popup menu
<meter>Defines a scalar measurement within a known range (a gauge)
<nav>Defines navigation links
<progress>Represents the progress of a task
<rp>Defines what to show in browsers that do not support ruby annotations
<rt>Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>Defines a ruby annotation (for East Asian typography)
<section>Defines a section in a document
<summary>Defines a visible heading for a <details> element
<time>Defines a date/time
<wbr>Defines a possible line-break
4. New HTML5 input types 

HTML5 added several new input types:
  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
Here is a list of some common input restrictions (some are new in HTML5):
AttributeDescription
disabledSpecifies that an input field should be disabled
maxSpecifies the maximum value for an input field
maxlengthSpecifies the maximum number of character for an input field
minSpecifies the minimum value for an input field
patternSpecifies a regular expression to check the input value against
readonlySpecifies that an input field is read only (cannot be changed)
requiredSpecifies that an input field is required (must be filled out)
sizeSpecifies the width (in characters) of an input field
stepSpecifies the legal number intervals for an input field
valueSpecifies the default value for an input field

5.What is the use of iframe tag?
An iframe is used to display a web page within a web page.
Syntax:
  1. <iframe src="URL"></iframe>  
Example:
  1. <iframe src="demo_iframe.html" width="200px" height="200px"></iframe>  


6.What is canvas in HTML5?
Canvas is an HTML area which is used to draw graphics.

7.Which video formats are supported by HTML5?

HTML 5 supports three types of video format:
  • mp4
  • webm
  • ogg

8.What is the use of figure tag in HTML 5?

HTML 5 <figure> tag is used to handle the group of diagrams, photos, code listing etc. with some embedded content. You can also add a caption for the photo with the help of <figcaption> tag.
  1. <figure>  
  2.   <img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>  
  3. </figure>  


9.I do not put <!DOCTYPE html> will HTML 5 work?

No, browser will not be able to identify that it is a HTML document and HTML 5 tags will not function properly.

10.What is datalist tag?

The HTML 5 datalist tag provides an auto complete feature on form element. It facilitates users to choose the predefined options. More details...


----------------------------------------------------------------

Java Script Questions :

-----------------------------------------------------------------1.What are JavaScript Data Types?
JavaScript Data types:
  • Number
  • String
  • Boolean
  • Object
  • Undefined
2. What is the use of isNaN function?
 isNan function returns true if the argument is not a number otherwise it is false.
3.What is negative infinity?
Negative Infinity is a number in JavaScript which can be derived by dividing negative number by zero.

4. Is it possible to break JavaScript Code into several lines?
Breaking within a string statement can be done by the use of a backslash, '\', at the end of the first line
Example:
document.write("This is \a program");
And if you change to a new line when not within a string statement, then javaScript ignores break in line.
Example:
var x=1, y=2,
z=
x+y;
The above code is perfectly fine, though not advisable as it hampers debugging.

5.Which company developed JavaScript?
Netscape is the software company who developed JavaScript.

6.What are undeclared and undefined variables?
Undeclared variables are those that do not exist in a program and are not declared. If the program tries to read the value of an undeclared variable, then a run time error is encountered.
Undefined variables are those that are declared in the program but have not been given any value. If the program tries to read the value of an undefined variable, an undefined value is returned.

7.What is 'this' keyword in JavaScript?
'This' keyword refers to the object from where it was called.

8.Explain the working of timers in JavaScript? Also elucidate the drawbacks of using the timer, if any?
Timers are used to execute a piece of code at a set time or also to repeat the code in a given interval of time. This is done by using the functions setTimeout, setInterval and clearInterval.
The setTimeout(function, delay) function is used to start a timer that calls a particular function after the mentioned delay. The setInterval(function, delay) function is used to repeatedly execute the given function in the mentioned delay and only halts when cancelled. The clearInterval(id)function instructs the timer to stop.
9.What is the difference between ViewState and SessionState?
'ViewState' is specific to a page in a session.
'SessionState' is specific to user specific data that can be accessed across all pages in the web application.

10.Explain how can you submit a form using JavaScript?

To submit a form using JavaScript use document.form[0].submit();

11.How can the style/class of an element be changed?
It can be done in the following way:
document.getElementById("myText").style.fontSize = "20?;
or
document.getElementById("myText").className = "anyclass";
12.What is called Variable typing in Javascript?
Variable typing is used to assign a number to a variable and the same variable can be assigned to a string.
Example
i = 10;
i = "string";
This is called variable typing.

13.Explain the difference between "==" and "==="?
"==" checks only for equality in value whereas "===" is a stricter equality test and returns false if either the value or the type of the two variables are different.

14.Explain how to detect the operating system on the client machine?
In order to detect the operating system on the client machine, the navigator.platform string (property) should be used.

15.What are all the types of Pop up boxes available in JavaScript?
  • Alert
  • Confirm and
  • Prompt
16.What is the use of Void(0)?
Void(0) is used to prevent the page from refreshing and parameter "zero" is passed while calling.
Void(0) is used to call another method without refreshing the page.

17.Explain what is pop()method in JavaScript?
The pop() method is similar as the shift() method but the difference is that the Shift method works at the start of the array. Also the pop() method take the last element off of the given array and returns it. The array on which is called is then altered.
Example:
var cloths = ["Shirt", "Pant", "TShirt"];
cloths.pop();
//Now cloth becomes Shirt,Pant

18. How generic objects can be created?
Generic objects can be created as:
var I = new object();
19.Which keywords are used to handle exceptions?
Try… Catch---finally is used to handle exceptions in the JavaScript
Try{
 Code
}
Catch(exp){
 Code to throw an exception
}
Finally{
 Code runs either it finishes successfully or after catch
}
20.Which keyword is used to print the text in the screen?
document.write("Welcome") is used to print the text – Welcome in the screen.
21.What is variable typing?
Variable typing is used to assign a number to a variable and then assign string to the same variable. Example is as follows:
i= 8;
i="john";
22.What are the different types of errors in JavaScript?
There are three types of errors:
  • Load time errors: Errors which come up when loading a web page like improper syntax errors are known as Load time errors and it generates the errors dynamically.
  • Run time errors: Errors that come due to misuse of the command inside the HTML language.
  • Logical Errors: These are the errors that occur due to the bad logic performed on a function which is having different operation.
23.What is the use of Push method in JavaScript?
The push method is used to add or append one or more elements to the end of an Array. Using this method, we can append multiple elements by passing multiple arguments

24.What is unshift method in JavaScript?
Unshift method is like push method which works at the beginning of the array. This method is used to prepend one or more elements to the beginning of the array.

25.What is the difference between JavaScript and Jscript?
Both are almost similar. JavaScript is developed by Netscape and Jscript was developed by Microsoft .

26.How are object properties assigned?
Properties are assigned to objects in the following way -
obj["class"] = 12;
or
obj.class = 12;
27.Explain window.onload and onDocumentReady?
The onload function is not run until all the information on the page is loaded. This leads to a substantial delay before any code is executed.
onDocumentReady loads the code just after the DOM is loaded. This allows early manipulation of the code.

30.How can a value be appended to an array?
A value can be appended to an array in the given manner -
arr[arr.length] = value;

31.Describe the properties of an anonymous function in JavaScript?
A function that is declared without any named identifier is known as an anonymous function. In general, an anonymous function is inaccessible after its declaration.
Anonymous function declaration -
var anon = function() {
 alert('I am anonymous');
};
anon();
32.Write about the errors shown in JavaScript?
JavaScript gives a message if it encounters an error. The recognized errors are -
  • Load-time errors: The errors shown at the time of the page loading are counted under Load-time errors. These errors are encountered by the use of improper syntax, and thus are detected while the page is getting loaded.
  • Run-time errors: This is the error that comes up while the program is running. It is caused by illegal operations, for example, division of a number by zero, or trying to access a non-existent area of the memory.
  • Logic errors: It is caused by the use of syntactically correct code, which does not fulfill the required task. For example, an infinite loop.
33.Define unescape() and escape() functions?
The escape () function is responsible for coding a string so as to make the transfer of the information from one computer to the other, across a network.
For Example:
<script>
 document.write(escape("Hello? How are you!"));
</script>
Output: Hello%3F%20How%20are%20you%21
The unescape() function is very important as it decodes the coded string.
It works in the following way. For example:
<script>
 document.write(unescape("Hello%3F%20How%20are%20you%21"));
</script>
Output: Hello? How are you!
34. What are the decodeURI() and encodeURI()?
EncodeURl() is used to convert URL into their hex coding. And DecodeURI() is used to convert the encoded URL back to normal.
<script>
 var uri="my test.asp?name=ståle&car=saab";

 document.write(encodeURI(uri)+ "<br>");

 document.write(decodeURI(uri));
</script>
Output -
my%20test.asp?name=st%C3%A5le&car=saab
my test.asp?name=ståle&car=saab
35. Why it is not advised to use innerHTML in JavaScript?
innerHTML content is refreshed every time and thus is slower. There is no scope for validation in innerHTML and, therefore, it is easier to insert rouge code in the document and, thus, make the web page unstable.
36. What are the supported datatypes in JavaScript ?
The data types supported by JavaScript are:
  • Undefined
  • Null
  • Boolean
  • String
  • Symbol
  • Number
  • Object
37.How can you create an object in JavaScript?
JavaScript supports Object concept very well. You can create an object using the object literal as follows −
1
2
3
4
var emp = {
name: "Daniel",
age: 23
};

38. How can you create an Array in JavaScript?

You can define arrays using the array literal as follows-
1
2
var x = [];
var y = [1, 2, 3, 4, 5];

39. What is a name function in JavaScript & how to define it?

A named function declares a name as soon as it is defined. It can be defined using function keyword as :
1
2
3
function named(){
// write code here
}

40. Can you assign an anonymous function to a variable and pass it as an argument to another function?

Yes! An anonymous function can be assigned to a variable. It can also be passed as an argument to another function.

41.Name some of the built-in methods and the values returned by them.
Built-in MethodValues
CharAt()It returns the character at the specified index.
Concat()It returns the character at the specified index.
forEach()It calls a function for each element in the array.
indexOf()It returns the index within the calling String object of the first occurrence of the specified value.
length()It returns the length of the string.
pop()It removes the last element from an array and returns that element.
push()It adds one or more elements to the end of an array and returns the new length of the array.
reverse()It reverses the order of the elements of an array.

42.List out the different ways an HTML element can be accessed in a JavaScript code.

Here are the list of ways an HTML element can be accessed in a Javascript code:
(i) getElementById(‘idname’): Gets an element by its ID name
(ii) getElementsByClass(‘classname’): Gets all the elements that have the given classname.
(iii) getElementsByTagName(‘tagname’): Gets all the elements that have the given tag name.
(iv) querySelector(): This function takes css style selector and returns the first selected element.

43.What are the ways to define a variable in JavaScript?
The three possible ways of defining a variable in JavaScript are:
  • Var – The JavaScript variables statement is used to declare a variable and, optionally, we can initialize the value of that variable. Example: var a =10; Variable declarations are processed before the execution of the code.
  • Const – The idea of const functions is not allow them to modify the object on which they are called. When a function is declared as const, it can be called on any type of object.
  • Let – It is a signal that the variable may be reassigned, such as a counter in a loop, or a value swap in an algorithm. It also signals that the variable will be used only in the block it’s defined in.
44.What is the difference between Local storage & Session storage?
Storage - JavaScript interview questions
Local Storage – The data is not sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) – reducing the amount of traffic between client and server. It will stay until it is manually cleared through settings or program.
Session Storage – It is similar to local storage; the only difference is while data stored in local storage has no expiration time, data stored in session storage gets cleared when the page session ends. Session Storage will leave when the browser is closed.

45.What is the difference between null & undefined?
Undefined means a variable has been declared but has not yet been assigned a value. On the other hand, null is an assignment value. It can be assigned to a variable as a representation of no value. Also, undefined and null are two distinct types: undefined is a type itself (undefined) while null is an object.

46.What is the difference between window & document in JavaScript?
WindowDocument
JavaScript window is a global object which holds variables, functions, history, location.The document also comes under the window and can be considered as the property of the window.


47. What is the difference between innerHTML & innerText?

innerHTML – It will process an HTML tag if found in a string
innerText – It will not process an HTML tag if found in a string

48.What is NaN in JavaScript?
NaN is a short form of Not a Number. Since NaN always compares unequal to any number, including NaN, it is usually used to indicate an error condition for a function that should return a valid number. When a string or something else is being converted into a number and that cannot be done, then we get to see NaN.

49.What is a prompt box in JavaScript?
A prompt box is a box which allows the user to enter input by providing a text box. The prompt() method displays a dialog box that prompts the visitor for input. A prompt box is often used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click either “OK” or “Cancel” to proceed after entering an input value.

50.How to empty an Array in JavaScript?
There are a number of methods you can use to empty an array:
Method 1 –
1
arrayList = []
Above code will set the variable arrayList to a new empty array. This is recommended if you don’t have references to the original array arrayList anywhere else, because it will actually create a new, empty array. You should be careful with this method of emptying the array, because if you have referenced this array from another variable, then the original reference array will remain unchanged.
Method 2 –
1
arrayList.length = 0;
The code above will clear the existing array by setting its length to 0. This way of emptying the array also updates all the reference variables that point to the original array. Therefore, this method is useful when you want to update all reference variables pointing to arrayList.
Method 3 –
1
arrayList.splice(0, arrayList.length);
The implementation above will also work perfectly. This way of emptying the array will also update all the references to the original array.
Method 4 –
1
2
3
4
while(arrayList.length)
{
arrayList.pop();
}
The implementation above can also empty arrays, but it is usually not recommended to use this method often.
51.What is the difference between find and children methods?
Answer: Both the methods are used to filter the child of the matched elements. Find method is used to find all levels down the DOM tree but children method searches only a single level down the DOM tree.
52. What is difference between var and let ?
Answer :    
 let a = 'hello'; // globally scoped
var b = 'world'; // globally scoped
console.log(window.a); // undefined
console.log(window.b); // 'world'
var a = 'hello';
var a = 'world'; // No problem, 'hello' is replaced.
let b = 'hello';
let b = 'world'; // SyntaxError: Identifier 'b' has already been declared
   let greeting = "say Hi";
 greeting = "say Hello instead";  //its works but redeclare of variable not work

53. What are the new features in ES6 ?

Answer:  ES6 introduced many new features, enhancements, and improvements to the language. Some of the key features and standards introduced in ES6 include:

1.Arrow Functions: Arrow functions provide a concise syntax for defining functions. They have a shorter syntax and automatically bind the this value to the surrounding context.
2.Let and Const: The let and const keywords introduced block-scoped variable declarations. let allows for variable reassignment, while const declares immutable variables.
3.Classes: ES6 introduced a more class-like syntax for defining objects and constructors, making it easier to work with object-oriented programming in JavaScript.
4.Template Literals: Template literals allow for easy string interpolation and multiline strings using backticks ( `). 
Ex:  let text = `He's often called "Johnny"`;
5.Default Parameters: You can now specify default values for function parameters. 
Ex:
function myFunction (x, y = 2) {
  // function code
}
6.Rest and Spread Operators: The rest (...) and spread (...) operators provide a concise way to work with variable numbers of function arguments or elements in arrays.
Ex Rest Operator:
  function add(…args){ }
  Note: There can be more than one spread operator in javascript functions.
Ex Spread Operator:
        var array1 = [10,20,30,50];
        var array2 =[…array1,60];
Note: There must be only one rest operator in javascript functions.
7.Destructuring: Destructuring allows for extracting values from objects and arrays more easily and concisely.   
  ex: let { id, title, author } = article  // here article an object
8.Modules: ES6 introduced a standard module system, making it easier to organize and share code between files.
Ex:  <script type=”module”>
   import message from “./message.js”;
</script>
 9.String Methods: ES6 added several new methods for manipulating strings, such as startsWith, endsWith, includes, and more.
 10.Array Methods: New array methods like find, findIndex, filter, map, and reduce simplify working with arrays.
11.Promises: Promises provide a more structured way to work with asynchronous operations and avoid callback hell.
<script>
    const myPromise = new Promise((resolve, reject) => {
    // Simulate an asynchronous operation
    setTimeout(() => {
    const randomNumber = Math.random();
    if (randomNumber > 0.5) {
      resolve(randomNumber); // Fulfill the promise
    } else {
      reject("Number is too small"); // Reject the promise
        }
      }, 1000);
    });
   
    myPromise.then(result => {
        console.log("Fulfilled:", result);
    }).catch(error => {
        console.error("Rejected:", error);
    });
</script>
These are some of the most notable features and standards introduced in ECMAScript 6

54. String reverse using javascript ?


<script>
    function reverseString(str) {
        var reversed = '';
        for (var i = str.length - 1; i >= 0; i--) {
            reversed += str[i];
        }
        return reversed;
    }
    var originalString = 'Hello, World!';
    var reversedString = reverseString(originalString);
    console.log(reversedString); // Output: "!dlroW ,olleH"
</script> 

55. Write a Code for unique array


<script>
    // Create an array with duplicate values
    var duplicateArray = [1, 2, 2, 3, 4, 4, 5, 6, 6];
    // Use JavaScript Set to store unique values
    var uniqueSet = new Set(duplicateArray);
    // Convert Set back to an array
    var uniqueArray = Array.from(uniqueSet);
    console.log(uniqueArray);
</script>
(Or)
<script>
// Create an array with duplicate values
var duplicateArray = [1, 2, 2, 3, 4, 4, 5, 6, 6];

// Create an empty array to store unique values
var uniqueArray = [];

// Iterate through the duplicateArray using a for loop
for (var i = 0; i < duplicateArray.length; i++) {
    // Check if the current element is not already in the uniqueArray
    if (uniqueArray.indexOf(duplicateArray[i]) === -1) {
        // If it's not in the uniqueArray, add it
        uniqueArray.push(duplicateArray[i]);
    }
}
console.log(uniqueArray); // This will log the unique array to the console
</script>


-

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)