Javascript Interview Questions

Front 1

What are the different data types in Javascript?

Back 1

There's

-Numbers

-Strings

-Booleans

-Objects

-null

-undefined

Note that there isn't a separate Integer, just number - which is represented as a double

precision floating point number.

There's also

-Functions

-Arrays

-RegExps

all of which are Objects deep down, but with enough special wiring to be mentioned on their own.

Front 2

What is the difference between an Ajax call and a form submit?

Back 2

A standard form submit sends a new HTTP request (POST or GET) and loads the new page in the browser. In Ajax, the data is sent to the server (POST or GET) in the background, without affecting the page at all, and the response is then received by javascript in the background, again without affecting the page at all.

(The javascript can, of course, then use the data received from the server to update some of the page content.)

Ajax is generally useful where only a small section of the page content will change.

Front 3

What does Ajax mean?

Back 3

Asynchronous JavaScript and XML

Front 4

What is the object you use to make an Ajax call?

Back 4

The XMLHttpRequest object is used to exchange data with a server.

Front 5

What is the object you have to use to make an Ajax call in IE earlier versions?

Back 5

IE5 and IE6 use an ActiveXObject

variable=new ActiveXObject("Microsoft.XMLHTTP");

Front 6

List the methods of the object you use to make Ajax calls

Back 6

To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object:

xmlhttp.open("GET","ajax_info.txt",true);

xmlhttp.send();

Front 7

Which event listener do you use in Ajax calls?

Back 7

The onreadystatechange event

When a request to a server is sent, we want to perform some actions based on the response.

The onreadystatechange event is triggered every time the readyState changes.

The readyState property holds the status of the XMLHttpRequest.

Front 8

How many different values can the readyState property have?

Back 8

0: request not initialized

1: server connection established

2: request received

3: processing request

4: request finished and response is ready

Front 9

What is JSON?

Back 9

JavaScript Object Notation

Front 10

What is the main difference between JSON and the Javascript object literal formats?

Back 10

JSON has a much more limited syntax including:

Key values must be quoted

Strings must be quoted with " and not '

You have a more limited range of values (e.g. no functions allowed)

Front 11

What is event delegation and what are the two main reasons why it is used?

Back 11

JavaScript event delegation is a simple technique by which you add a single event handler to a parent element in order to avoid having to add event handlers to multiple child elements.

1:There are less event handlers to setup and reside in memory. This is the big one; better performance and less crashing.

2:There’s no need to re-attach handlers after a DOM update. If your page content is generated dynamically, via Ajax for example, you don’t need to add and remove event handlers as elements are loaded or unloaded.

Front 12

How do you find out the tag name (for example ‘p’ or ‘a’ or ‘div’) of a dom element with Javascript?

Back 12

var x = document.getElementById("myP").tagName;

Front 13

If you have a click event, how do you find out from the event object which element was clicked?

Back 13

The srcElement property returns the element that fired the event. This is an object, and has the same properties as the element.

So, if the we click on an image with an id attribute of 'Image1', and a src attribute of 'picture1.jpg', then event.srcElement.id will return 'Image1', and event.srcElement.src will return 'picture1.jpg', although this will be extended because the computer internally converts relative URLs into absolute URLs.

Similarly, the srcElement has a tagName property:

event.srcElement.tagName will return 'IMG'. And we can also read styles, so if the image has a style height of 100px, then event.srcElement.style.height will return '100px'.

Front 14

Which dom elements have innerHTML (give 3 examples), which dom elements have value?

Back 14

p, div, a

you can use the JavaScript valueOf method on any string

Front 15

How do you get the first element of an array?

Back 15

return array[0];

Front 16

How can you find out how many elements you have in an array?

Back 16

return array.length

Front 17

What are the index numbers in an array?

Back 17

[0,1,2,3,4,5] they are the numbers of the items in an array

Front 18

How do you add new elements to an array (to the end of the array)?

Back 18

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.push("Kiwi");

Front 19

How do you add a single line comment and a multi line comment to your Javascript code?

Back 19

//

/* */

Front 20

How do you find out how long a string is?

Back 20

console.log("string".length);

Front 21

How can you cut out the first 3 characters of a string?

Back 21

Just use substring: "apple".substring(0,3); will return app

Front 22

What is the event object?

Back 22

During normal program execution, a large number of events occur, so the event object is a fairly active object, constantly changing its properties.Whenever an event fires, the computer places appropriate data about the event into the event object - for example, where the mouse pointer was on the screen at the time of the event, which mouse buttons were being pressed at the time of the event, and other useful information.

Front 23

How can you access the event object in most browsers?

Back 23

You can just use, event.srcElement.id or event.srcElement.tagName in most browsers

Check with someone about this

Front 24

How can you access the event object in Internet explorer?

Back 24

You have to use addEventListener("click", funtion())

Check with someone about this

Front 25

How do you add an event listener to a DOM element?

Back 25

addEventListener()

Front 26

What data structure do you get if you use the getElementsByClassName or getElementsByTagNamemethod?

Back 26

You get an HTML collection

Front 27

What is the innerHTML of a DOM element?

Back 27

This property provides a simple way to completely replace the contents of an element. For example, the entire contents of the document body can be deleted by:

document.body.innerHTML = ""; // Replaces body content with an empty string.

Front 28

How do you change the innerHTML of a DOM element with Javascript?

Back 28

document.getElementById("myFakeId").innerHTML = "a string of strings";

Front 29

How do you change the styling of a DOM element with Javascript (for example the display property’svalue)?

Back 29

document.getElementById("button").style.display="inline-block";

Front 30

What is the window.onload event, why do we use it?

Back 30

window.onload
By default, it is fired when the entire page loads, including its content (images, css, scripts, etc.)In some browsers it now takes over the role of document.onload
and fires when the DOM is ready as well.

document.onload
It is called when the DOM is ready which can be prior to images and other external content is loaded.

Front 31

What happens when you call event.preventDefault()?

Back 31

e.preventDefault() will prevent the default event from occuring

examples of default browser events

- a click on the link causes navigation,
- a right-button mouse click shows the context menu
- enter on a form field cases it’s submission to the server, etc.

Front 32

What is an API? (with your own words)

Back 32

An API, at its most basic, is a way for outside (or third-party) applications to interact with your (or another company's) application.

For example, Dropbox has an API that allows you to write your own programs (in PHP or whatever other coding language) that can interact with Dropbox accounts using specific predetermined commands. Whether an API lets you have on READ or WRITE access (or both) is entirely up to the developer. Another example is Blizzard's API, which grants access to character data, equipment data, and other item data, but only allows READ access as opposed to Dropbox, which allows both using OAuth.

Front 33

What does OOP mean? (with your own words)

Back 33

Object-oriented programming (OOP) is a programming language model organized around objects rather than "actions" and data rather than logic. Historically, a program has been viewed as a logical procedure that takes input data, processes it, and produces output data.

Excellent related article: http://searchsoa.techtarget.com/definition/object-oriented-programming

Front 34

What is a keyword in programming? (with your own words)

Back 34

Keywords can be commands or parameters. Every programminglanguage has a set of keywords that cannot be used as variable names.Keywords are sometimes called reserved names

Front 35

List 20 Javascript Keywords

Back 35

All Javascript Reserved Words

abstract
arguments
boolean
break
byte
case
catch
char
class*
const
continue
debugger
default
delete
do
double
else
enum*
eval
export*
extends*
false
final
finally
float
for
function
goto
if
implements
import*
in
instanceof
int
interface
let
long
native
new
null
package
private
protected
public
return
short
static
super*
switch
synchronized
this
throw
throws
transient
true
try
typeof
var
void
volatile
while
with
yield

Words marked with* are new in ECMAScript5

Front 36

What is the Window object in Javascript? (with your own words)

Back 36

The window object is supported by all browsers. It represents the browser's window.

All global JavaScript objects, functions, and variables automatically become members of the window object.

Global variables are properties of the window object.

Global functions are methods of the window object.

Even the document object (of the HTML DOM) is a property of the window object:

window.document.getElementById("header");

is the same as:

document.getElementById("header");

Front 37

What is the DOM? (with your own words)

Back 37

The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

Front 38

What is the DOM Node? (with your own words)

Back 38

At the top level, there is an html node, with two children: head and body, among which only head has a child tag title.

HTML tags are element nodes in DOM tree, pieces of text become text nodes. Both of them are nodes, just the type is different.

Front 39

What is the DOM Tree? (with your own words)

Back 39

It is the hierarchy of parent and child dom nodes.
so for instance
HTML
HEAD - BODY
title - a, div, p etc

Front 40

What are the 3 ways to include Javascript on an HTML page?

Back 40

1. You can include it as an external file, inside of a script tag

2. You can place it directly on the page between script tags

3. You can have it inline on your html elements

Front 41

What keyword do you use to create a variable in javascript?

Back 41

var

Front 42

What are data types in Javascript?

Back 42

There's

-Numbers
-Strings
-Booleans
-Objects
-null
-undefined

Note that there isn't a separate Integer, just number - which is represented as a double precision floating point number.

There's also

-Functions
-Arrays
-RegExps

all of which are Objects deep down, but with enough special wiring to be mentioned on their own.

Front 43

Create a Javascript array? (using shorthand!)

Back 43

var myArray = [3, 2, 1, "bob", "joe"];

Front 44

Create a Javascript object? (using shorthand!)

Back 44

var car = {type:"Fiat", model:500, color:"white"};

Front 45

Create a Javascript function?

Back 45

var myFunk = function(){

}

Front 46

What is a parameter in Javascript?

Back 46

Inside of the parentheses of a function, you can place arguments or parameters which you can call within your function.

for instance

var myFunk = function(a, b){
console.log(a + b);
}

myFunk(1, 5);

Front 47

What is a argument in Javascript?

Back 47

technically a and b here "var myFunk = function(a, b){" are considered parameters

and 1 and 5 are considered arguments "myFunk(1, 5);"

personally I use them interchangeably

Front 48

What does the return keyword do within a function in Javascript?

Back 48

var a = function(){
return 1+2;
}

this code will make the variable "a" equal the value returned which is 3.

so console.log(a);
will log the number 3

Front 49

What are the 3 most common way in Javascript to find an HTML element on the page?

Back 49

1. document.getElementById
2. document.getElementsByClassName
3. document.getElementsByTagName

Front 50

How can you access properties in a Javascript object literal?

Back 50

objectName.propertyName

or

objectName[propertyName]