Web Development Interview Questions | Eklavya Online

Web Development Interview Questions

CSS means Cascading Style Sheet

It is used to customize in-built HTML tags, means defining user-defined styles to
HTML tags.
Selectors P Property: value
<P Style = “Color: red; Background-color: orange; Font-size: 14pt; Text-align:
right”>
Semicolon is deli meter for properties.
Colon is separator for property and values.
<h1> is called tag
<h1>Hello</h1> is called element
h1 is called selector

Use DIV tags with CSS for laying out the web pages and use TABLE for representing data.Tabular data represented using html table tag.

Div tags are generally used to layout web page elements without using tables, because tables are heavy wighted than div tags. The traditional way of laying out web pages was to place them inside invisible tables as demonstrated below. This way of laying out is more complicated to do, harder to maintain and makes the web pages to load very slowly.

Bad: Laying out with nested TABLE tags and CSS

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>

<title>Table Layout</title>

 

<style type=”text/css”>

 

table {

width: 100%;

height: 1000px;

}

 

td.header {

width: 100%;

text-align: center;

background-color: yellow;

}

 

td.contents {

width: 80%;

text-align: center;

background-color: orange;

}

 

td.rhsmenu {

width: 20%;

text-align: center;

background-color: green;

}

 

td.footer {

width: 100%;

text-align: center;

background-color: blue;

}

 

</style>

</head>

<body>

<table>

<tbody>

<tr height=”15%”>

<td class=”header” colspan=”2″>Header Information</td>

</tr>

<tr height=”65%”>

<td class=”contents”>Contents go

here</td>

<td class=”rhsmenu”>RHS Panel</td>

</tr>

<tr height=”20%”>

<td class=”footer” colspan=”2″>Footer Information</td>

</tr>

</tbody>

</table>

 

</body>

</html>

The newer way to lay out your page elements is using DIVs and CSS. It can do everything tables can do and much more, and as an added bonus it loads a lot faster than tables ever did. It is easier to maintain, if you don’t go overboard with nested DIVs. Use DIV for the conatainer and then use other elements SPAN, P, etc with CSS.

Good: Laying out with DIVs and CSS tag

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>

<title>Div Layout</title>

 

<!– This can be defined outside in its own file and included into an html file –>

<style type=”text/css”>

 

body {

display: block;

width: 400px;

height:400px;

text-align: center;

}

 

/* main content container floated to the left*/

#content {

position: relative;

width: 80%;

height: 65%;

float: left;

background-color: orange;

width: 320px;

}

 

/* rhs menu container floated to the left*/

#rhs-menu {

position: relative;

width: 20%;

height: 65%;

float: left;

background-color: green;

}

 

/* header container floated to the left*/

#header {

position: relative;

width: 100%;

height: 15%;

float: left;

background-color: yellow;

}

 

/* footer with “clear”” to ensure that the footer is always below content and rhs-menu */

#footer {

position: relative;

width: 100%;

height: 20%;

clear: both;

background-color: blue;

}

 

/* align text vertically*/

#content p,#rhs-menu p,#header p,#footer p {

position: absolute;

top: 50%;

left: 50%;

height: 50%;

width: 50%;

margin: -15% 0 0 -25%;

}

 

/* position the logo using absolute (from top left corner) or relative*/

.logo-text {

position: absolute;

top: 5px;

left: 10px;

}

 

</style>

</head>

<body>

<div id=”header”><span class=”logo-text”>logo goes here </span>

<p>Header Information</p>

</div>

<div id=”content”>

<p>Contents go here</p>

</div>

<div id=”rhs-menu”>

<p>RHS Panel</p>

</div>

<div id=”footer”>

<p>Footer Information</p>

</div>

 

</body>

</html>

InnerHTML is not standard, and its a String. The DOM is not, and although innerHTML is faster and less verbose, its better to use the DOM methods like appendChild(), firstChild.nodeValue, etc to alter innerHTML content

A prompt box allows the user to enter input by providing a text box.

JavaScript is a platform-independent,event-driven, interpreted client-side scripting andprogramming language developed by Netscape Communications Corp. and Sun Microsystems.

It is perfectly legal to assign a number to a variable and then assign a string to the same variable as followsexample

i = 10;

i = “string”;

This is called variable typing

The “Access Denied” error in any browser is due to the following reason.
A javascript in one window or frame is tries to access another window or frame whosedocument’s domain is different from the document containing the script.

The following example illustrates thisIt creates a function called square with argument x and returns x multiplied by itself.

var square = new Function (“x”,”return x*x”);

Don’t be fooled by the term Java in both. Both are quite different technologies. The key differences can be summarized as follows:

JavaScript variables are dynamically typed, whereas the Java variables are statically typed.

var myVar1 = “Hello”;         //string type

var myVar2 = 5;               //number type

var myVar3 = new Object( );   //empty object type

var myVar4 = {};              //empty object type — JSON (JavaScript Object Notation) style.

In JavaScript properties and methods are dynamically added, whereas Java uses a template called a class.  The myVar3 empty object dynamically adds properties and a method.

myVar3.firstName = “Test1”;  // add a property to object

myVar3.lastName = “Test2”;   // add a property to object

// add a method

myVar3.someFunction = function( ) {

//.…………

}

JavaScript function can take variable arguments. You can call the function shown below  as myFunction( ), myFunction(20), or myFunction(20,5).

function myFunction( value ) {

//.…. do something here

}

JavaScript has an implicit keyword known as the “arguments”,  which holds all the passed         arguments. It also has a “length” property  as in arguments.length to display the number of         arguments. Technically an “arguments” is not an array as it does not have the methods like push, pop, or  split that an array has. Here is an example.

myFunction(5,10,15,20);

function myFunction(value) {

//value is 5;

//arguments[0] is 5

//arguments[1] is 10

//arguments[2] is 15

//arguments[3] is 20

//arguments.length is 4

}

JavaScript objects are basically like name/value pairs stored in a HashMap<string,object>.

For example, a JavaScript object is represented in JSON style as shown below.

var personObj = {

firstName: “John”,

lastName: “Smith”,

age: 25,

printFullName: function() {

document.write(this.firstName + ”  ” +  this.lastName);

} ,

 

printAge: function () {

document.write(“My age is: ” +  this.age);

}

}

You can invoke the methods as shown below

personObj.printFullName();

personObj.printAge();

JavaScript functions are objects as well. Like objects, the functions can be stored to a variable, passed as arguments, nested within each other, etc. In the above example, nameless functions are attached to variables “printFullName” and “printAge” and invoked via these variables. A function that is attached to an object via a variable is known as a “method”. So, printFullName and printAge are methods.

Technically, what is done with the “add” and “sum” functions is that we have created a new function object and attached them to the variables “add” and sum. As you can see in the example below, the “add” variable is assigned to variable “demo”, and the function is invoked via demo(2,5) within the “sum” function.

function add(val1, val2) {

var result = val1 + val2;

alert(“The result is:” + result);

return result;

}

 

var demo = add;

 

function sum() {

var output = demo(5, 2);

}

Now the above temp.js under tutorial/js folder can be invoked from an HTML file under tutorial/html as shown below.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<script language=”javascript” type=”text/javascript” src=”../js/temp.js”>

</script>

 

<title>Insert title here</title>

</head>

<body>

<form id=”evaluate1″>

<input type=”button” value=”evaluate”  onclick=”sum()”/>

<input type=”button” value=”evaluate2″ onclick=”demo(3,2)”/>

<input type=”button” value=”evaluate3″ onclick=”add(2,2)”/>

</form>

</body>

</html>

This demonstrates that the functions in JavaScript are objects, and can be passed around. Every function in JavaScript also has a number of attached methods including toString( ), call( ), and apply( ). For example,   The temp2.js is stored under js_tutorial/js.

function add(val1, val2) {

var result = val1 + val2;

alert(“Result is:” + result);

return result;

}

 

var printAdd = add.toString(); //converts the “add” function to string.

 

function demo() {

alert(printAdd); //alerts the whole source code of the “add” function

}

 

The demo function can be invoked from an html.The temp2.html is stored under js_tutorial/html.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<script language=”javascript” type=”text/javascript” src=”../js/temp2.js”>

</script>

 

<title>Insert title here</title>

</head>

<body>

<form id=”evaluate1″>

<input type=”button” value=”evaluate”  onclick=”demo()”/>

</form>

</body>

</html>

The printAdd cannot be invoked from the HTML because this variable stores the string representation of the source code of the “add”function and not the function itself.

JavaScript variables need to be treated like records stored in a HasMap and referenced by name, and not by memory address or pass-by-reference as in Java. The following code snippet demonstrates this.

var x = function () { alert(“X”); }

var y = x;

x = function () { alert(“Y”); };

y();           // alerts “X” and NOT “Y”

x();           // alerts “Y”

Java does not support closure till atleast version 6. A closure is a function plus a binding environment. closures can be passed downwards (as parameters) or returned upwards (as return values). This allows the function to refer to variables of its environment, even if the surrounding code is no longer active. JavaScript supports closure.

In JavaScript a closure is created every time you create a function within a function. When using a closure, you will have access to all the variables in the enclosing (i.e. the parent) function.

var calculate = function(x) {

var myconst = 2;

return function(y) {

return x + y + myconst;    // has visibility to parent variable ‘const’

};

}

var plus5 = calculate(5);         //plus5 is now a closure

alert(plus5(3));                  //returns 10  i.e. x=5, y=3, myconst=2

alert(plus5(7));                  //returns 14  i.e  x=5, y=7, myconst=2

alert(plus5(10));                 //returns 17  i.e  x=5, y=10, myconst=2

Java programs can be single threaded or multi-threaded. JavaScript engines only have a single thread, forcing events like

  • Asynchronous UI Events like mouse click, focus, etc. It is asynchronous because you don’t know when a user is going to click or change a text.
  • Timer functions like
  • var id = setTimeout(function, delay); // Initiates a single timer which will call the specified function after the delay. The function returns a unique ID with which the timer can be canceled at a later time.
  • var id = setInterval(function, delay); // Similar to setTimeout but continually calls the function (with a delay every time) until it is canceled.
  • clearInterval(id); // Accepts a timer ID (returned by either of the aforementioned functions) and stops the timer callback from occurring. clearTimeout(id);

Ajax responses asynchronously invoking a callback function when the response is sent back from the server. It is asynchronous because, you don’t know how long a server will take to process the ajax request and then to send the responseto execute within the same thread.

Even though all the above time based events appear to be run concurrently, they are all executed one at a time by queuing all these events. This also mean that if a timer is blocked from immediately executing, it will be delayed until the next possible point of execution making it to wait longer than the desired delay. This might also cause the intervals execute with no delay.

Having said this, HTML5 specifies Web Workers, which is a standardized API for multi-threading JavaScript code.

Here are the key points to remember:

  • JavaScript variables are dynamically typed.
  • In JavaScript properties and methods are dynamically added.
  • JavaScript function can take variable arguments.
  • JavaScript objects are basically like name/value pairs stored in a HashMap<string,object>.
  • JavaScript functions are objects as well.

Here are some working examples: For the examples shown below, the HTML files are stored under /html sub-folder and JavaScript files are stored under /js sub-folder. The console.log(…) statements are written to your browser’s web console. For example, in firefox, you can view the web console via tools – Web Developer – Web Console. Make sure that the version of Firefox you use has this option. The Web Console is handy for debugging as well.

Example 1: two input values are either added or concatenated depending on their types. If both values of type number then add them, otherwise just concatenate the values. Take note of the JavaScript keywords and functions like typeof, isNaN(..), Number(..), parseInt(..), etc. The “document” is part of the DOM tree representing an HTML document in memory. The method “getElementById(…)” will return the relevant “input” element from the DOM tree, and “value” will return the input value that was entered.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>

 

<html>

 

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<script language=”javascript” type=”text/javascript” src=”../js/evaluate1.js”>

</script>

<title>Insert title here</title>

</head>

 

<body>

 

<form id=”evaluate1″>

<input id=”val1″ type=”text” value=”” />

<input id=”val2″ type=”text” value=”” />

<input type=”button” value=”evaluate”  onclick=”addOrConcat()”/>

<p>

<div id=”result”></div>

</p>

</form>

 

</body>

 

</html>

 

function addOrConcat() {

var val1 = document.getElementById(“val1”).value;  //string

var val2 = document.getElementById(“val2”).value;  //string

var result = document.getElementById(“result”);    //object

var ans = -1;  //number

 

//      if val1 and val2 are numbers, add them

if(!isNaN(val1)  && typeof parseInt(val2) == ‘number’) {

ans = Number(val1) + Number(val2);  //add numbers

}else {

ans = val1 + val2;                   //string concat

}

 

result.innerHTML = “Result is: ”  + ans;

//      write to browser console.

console.log(“val1 is of type ” + typeof val1);

console.log(“result is of type ” + typeof result);

console.log(“ans is of type ” + typeof ans);

}

Example 2: Very similar to Example 1, but uses objects, and passes the relevant values from the call within HTML itself. It also uses the toString( ) method to convert a function object to display its source code.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>

<html>

 

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<script language=”javascript” type=”text/javascript” src=”../js/evaluate3.js”>

</script>

<title>Insert title here</title>

</head>

 

<body>

<form id=”evaluate1″>

<input id=”val1″ type=”text” value=”” />

<input id=”val2″ type=”text” value=”” />

<input type=”button” value=”evaluate”

onclick=”addOrConcat(document.getElementById(‘val1’).value,document.getElementById(‘val2’).value)”/>

<p>

<div id=”result”></div>

</p>

</form>

</body>

 

</html>

 

function addOrConcat(val1,val2) {

 

var evalObj = new Object(); //create an empty object

evalObj.input1 = val1;     // add a property of type string

evalObj[‘input2’] = val2;  // add a property of type string

evalObj.result = document.getElementById(“result”); // add a property of type object

 

//add a method

evalObj.evaluate = function() {

 

if(!isNaN(this.input1)  && typeof parseInt(this.input2) == ‘number’) {

this.ans = Number(this.input1) + Number(this.input2);  //add numbers

}else {

this.ans = evalObj.input1 + this.input2;              //string concat

}

 

this.result.innerHTML = “Result is: ”  + this.ans;

}

 

evalObj.evaluate(); //call the method evaluate and “this” refers to evalObj

console.log(evalObj.evaluate.toString());

}

Example 3: Similar to Example 2, with minor modifications to the JavaScript file to demonstrate keywords like “arguments”

function addOrConcat() {

 

var evalObj = new Object();                          // create an empty object

evalObj.input1 = arguments[0];                       // this is value1

evalObj[‘input2’] = arguments[1];                    // this is value2

evalObj.result = document.getElementById(“result”);  // add a property of type object

 

//add a method

evalObj.evaluate = function() {

 

if(!isNaN(this.input1)  && typeof parseInt(this.input2) == ‘number’) {

this.ans = Number(this.input1) + Number(this.input2);  //add numbers

}else {

this.ans = evalObj.input1 + this.input2;              //string concat

}

 

this.result.innerHTML = “Result is: ”  + this.ans;

}

evalObj.evaluate(); //call the method evaluate and “this” refers to evalObj

console.log(evalObj.evaluate.toString());

}

document.getElementById(“myText”).style.fontSize = “20″;

(OR) document.getElementById(“myText”).className = “anyclass”;

Use the below specified style of comments

<script language=javascript>

<!–javascript code goes here–>

Or

Use the <NOSCRIPT>some html code </NOSCRIPT> tags and code the display html statements between these and this will appear on the page if the browser does not support javascript.

I/O operations like reading or writing a file is not possible with client-side javascript. However , this can be done by coding a Java applet that reads files for the script.

No.Javascript does not have block level scope,all the variables declared inside a function possess the same level of scope unlike c,c++,java.

Yes.Since javascript is a client-side script it does require the web server’s help for its computation,so it is always faster than any server-side script like ASP,PHP,etc.

Breaking is possible within a string statement by using a backslash \ at the end but notwithin any other javascript statement.that is,

document.write(“Hello \world”);

is possible but not

document.write\(“hello world”);

Most commonly used types of CSS are:

1. Local Style (inline style)
It is defined with-in a tag using an attribute style. It’s scope is limited to a tag in
which it is defined.

2. Internal Style
It is defined with-in a head block using a tag style. Its scope is limited to all those
tags, which are with-in that page.

3. External Style
It is defined in a separate file and saved with extension (.CSS). Its scope is
limited to all those web pages, which are linked to that CSS file.

Two one sentence summaries:

  • a closure is the local variables for a function – kept alive after the function has returned

or

  • a closure is a stack-frame which is not deallocated when the function returns.

A closure takes place when a function creates an environment that binds local variables to it in such a way that they are kept alive after the function has returned. A closure is a special kind of object that combines two things: a function, and any local variables that were in-scope at the time that the closure was created.
The following code returns a reference to a function:

function sayHello2(name)

{

var text = ‘Hello ‘ + name; // local variable

var sayAlert = function() { alert(text); }

return sayAlert;

}

Closures reduce the need to pass state around the application. The inner function has access to the variables in the outer function so there is no need to store the information somewhere that the inner function can get it.

This is important when the inner function will be called after the outer function has exited. The most common example of this is when the inner function is being used to handle an event. In this case you get no control over the arguments that are passed to the function so using a closure to keep track of state can be very convenient.

Use

// for line comments and

/* some code here */ for block comments

Name the numeric constants representing max,min values

Number.MAX_VALUE
Number.MIN_VALUE

In order to detect the operating system on the client machine, the navigator.appVersionstring (property) should be used.

Undeclared variables are those that are not declared in the program (do not exist at all),trying to read their values gives runtime error.But if undeclared variables are assigned then implicit declaration is done .

Undefined variables are those that are not assigned any value but are declared in the program.Trying to read such variables gives special value called undefined value.

No, java and javascript are two different languages. Java is a powerful object – oriented programming language like C++, C. Whereas Javascript is aclient-side scripting language with some limitations.

The onload event does not fire until every last piece of the page is loaded, this includes css and images, which means there’s a huge delay before any code is executed.
That isnt what we want. We just want to wait until the DOM is loaded and is able to be manipulated. onDocumentReady allows the programmer to do that.

It is a product of Netscape.
Its competitors are VBScript and Jscript, which are the products of Microsoft.
It is a scripting language.
It I case sensitive.
It provides in-built objects, which have fields and methods.
User-defined functions can be created, which can be invoked on particular event.
Java script is used with-in HTML web page using a tag <script>.
It can be used either in head or in body block, according to the need.
It is used to make the web page dynamic and for client side validation.

NOTE: With-in a script block, html tags cannot be used directly.

Unobtrusive Javascript refers to the argument that the purpose of markup is to describe a document’s structure, not its programmatic behavior and that combining the two negatively impacts a site’s maintainability. Inline event handlers are harder to use and maintain, when one needs to set several events on a single element or when one is using event delegation.

<input type=”text” name=”date” />

Say an input field with the name “date” had to be validated at runtime:

document.getElementsByName(“date”)[0].

addEventListener(“change”, validateDate,false);

function validateDate()

{

// Do something when the content of the ‘input’ element with the name ‘date’ is changed.

}

Although there are some browser inconsistencies with the above code, so programmers usually go with a javascript library such as JQuery or GUI to attach behavior to an element like above.

The == checks for value equality, but === checks for both type and value.

The null value is a unique value representing no value or no object. It implies no object,or null string,no valid boolean value,no number and no array object.

HTML  means Hyper Text Markup Language.
It is used to define the structure of the document and its format.
Hypertext is the text, which refers further text.
HTML is used to create static web pages, which are used to represent the data on
the web.
It is not case-sensitive.
It provides tags, which has I-built style and definitions.
Html web pages can be created using any text editor like notepad, edit, etc. and
saved with an extension (. html) or (. htm).
Once the html web page is created in order to access the html web page, web browser is used, which has in-built html parser. Where html parser is a software application, which is used to parse the html tags like <b>, etc.

This depends on the user’s browser and OS.

In the case of Netscape with Windows OS,all the cookies are stored in a single file called cookies.txt

c:\Program Files\Netscape\Users\username\cookies.txt

In the case of IE,each cookie is stored in a separate file namely username@website.txt.

c:\Windows\Cookies\username@Website.txt

=== is strict equality operator ,it returns true only when the two operands are having the same value without any type conversion.

javascript code can be embedded in a web page between

<scriptlangugage=”javascript”></script> tags

Following are 3 types of client-side validation:
1. Field cannot be empty. There must be any value.
2. Format must be valid. Like: age is numeric.
3. Values must be with in valid range. Like: age should not be negative and
month should be between 1 to 12.

Using global variables in Javascript is evil and a bad practice. That being said, namespacing is used to bundle up all your functionality using a unique name. In JavaScript, a namespace is really just an object that you’ve attached all further methods, properties and objects. It promotes modularity and code reuse in the application.

Since 1 is a string, everything is a string, so the result is 124. In the second case, its 93.

Undefined value means the variable used in the code doesnt exist or is not assigned any value or the property doesnt exist.

Generation of HTML pages on-the-fly without accessing the Web server. The user can be given control over the browser like User input validation Simple computations can be performed on the client’s machine The user’s browser, OS, screen size, etc. can be detected Date and Time Handling.

The delete operator is used to delete all the variables and objects used in the program,but it does not delete variables declared with var keyword.

This can be achieved by using the following tag between head tags or between body tags.

<script src=”abc.js”></script>

where “abc.js” is the external javscript file to be accessed.

It is a bad practice to have a DIV element nested inside a SPAN element. You can have a SPAN inside a DIV. The reason being the DIV is a block element and SPAN is an inline element. So, why would you want to have a block element inside an inline element? SPAN is a like sub tag, which applies styles for the specified content in-between the SPAN tag.

There are two HTML tags:
Starting tag and Closing tag
For example:
<b> Hello Dear </b>
Here, <b> is starting tag and </b> is closing tag.
Here, <b> Hello Dear </b> completely treated as an element.

Number, String, Undefined, null, Boolean

An alert box displays only one button which is the OK button whereas the Confirm box displays two buttons namely OK and cancel.

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.

Unassigned variables are initialized by JavaScript with a default value of undefined. JavaScript never sets a value to null. That must be done programmatically.

    • Undefined value cannot be explicitly stated that is there is no keyword called undefined whereas null value has keyword called null
    • typeof undefined variable or property returns undefined whereas
      typeof null value returns object

Document.bgcolor property can be set to any appropriate color.

Continue statement continues the current loop (if label not specified) in a new iteration whereas break statement exits the current loop.