JavaScript Interview Questions with Answers Page IV

From freshersonline.com

Jump to: navigation, search

Interview Question Home

1. To write messages to the screen without using "document.write()" ?

Changing the contents of an element is a much better solution. When the method showStatus is invoked it will change the content of the span.

...

function showStatus(message) {

var element = document.getElementById("mystatus");

element.textContent = message; //for Firefox

element.innerHTML = message; //for IE (why can't we all just get along?)

return true;

}

...

Test.

...

2. How to Add new elements dynamically. < html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

< head >

< title>t1</title>

function addNode() {

var newP = document.createElement("p");

var textNode = document.createTextNode(" I'm a new text node");

newP.appendChild(textNode);

document.getElementById("firstP").appendChild(newP);

}

</script>

</ head>

< body onload="addNode();" style=" background: url('../images/Sand-1280.jpg'); background-color: yellow;">

<p id="firstP"> firstP<p> </ body>

</html>

3. how to have an element invoke a javascript on selection, instead of going to a new URL:

function pseudoHitMe() {

alert("Ouch!");

}

</script>

4. How to have the status line update when the mouse goes over a link (The support of the status line is sporadic)?

<a href="javascript.shtml"

onmouseover="window.status='Hi There!';return true"

onmouseout="window.status=;return true">Look at the Status bar</a>

Look at the Status bar as your cursor goes over the link.

5. How to create a popup warning box

alert('Warning: Please enter an integer between 0 and 100.');

6. How to create a confirmation box?

confirm("Do you really want to launch the missile?");

7. How to create an input box?

prompt("What is your temperature?");

8. How to open a window with no toolbar, but with the location object.

window.open("http://www.mysite.org/Misc/Pennies","Pennies","resizable=yes,

status=yes,toolbar=yes,location=yes,menubar=yes,scrollbars=yes,width=800,height=400");

9. How to setting a cookie with the contents of a textbox ?

Values stored in cookies may not have semicolons, commas, or spaces. You should use the handy "escape()" function to encode the values, and "unescape()"

to retrieve them.

//Sets cookie of current value for myTextBox

function TextBoxOnchange() {

var myBox = window.document.getElementById(myTextBox");

document.cookie = "myTextBox="+ escape(myBox.value) + getExpirationString();

}

//return a string like ";expires=Thu, 5 Jan 2006 16:07:52 UTC"

function getExpirationString() {

var exp = new Date();

var threemonths = exp.getTime()+(120*24*60*60*1000);

exp.setTime(threemonths);

return ";expires="+exp.toGMTString();

}

This is called from the event handler in the HTML.

<input name="myTextBox" type="text" id="myTextBox"

onchange="javascript:TextBoxOnchange()" />

10. How to getting values from cookies to set widgets?

function getCookieData(labelName) {

//from Danny Goodman

var labelLen = labelName.length;

// read cookie property only once for speed

var cookieData = document.cookie;

var cLen = cookieData.length;

var i = 0;

var cEnd;

while (i < cLen) {

var j = i + labelLen;

if (cookieData.substring(i,j) == labelName) {

cEnd = cookieData.indexOf(";",j);

if (cEnd == -1) {

cEnd = cookieData.length;

}

return unescape(cookieData.substring(j+1, cEnd));

}

i++;

}

return "";

}

//init() is called from the body tag onload function.

function init() {

setValueFromCookie("brand");

setValueFromCookie("market");

setValueFromCookie("measure");

}

function setValueFromCookie(widget) {

if( getCookieData(widget) != "") {

document.getElementById(widget).value = getCookieData(widget);

}

//if you name your cookies the widget ID, you can use the following helper function

function setCookie(widget) {

document.cookie = widget + "=" +

escape(document.getElementById(widget).value) + getExpirationString();

}

11. How to Handle Event Handlers?

You can add an event handler in the HTML definition of the element like this,

</script>

<input type="button" id="hitme" name="hitme" value="hit me" onclick="hitme()"

Or, interestingly enough you can just assign the event's name on the object directly with a reference to the method you want to assign.

</script>

You can also use an anonymous method like this:

document.getElementById("hitme3").onclick = function () { alert("howdy!"); }

You can also use the the W3C addEvventListener() method, but it does not work in IE yet:

</script>

12. How to remove the event listener:

</script>

Key Events

"onkeydown", "onkeypress", "onkeyup" events are supported both in ie and standards-based browsers.

function setStatus(name,evt) {

evt = (evt) ? evt : ((event) ? event : null); /* ie or standard? */

var charCode = evt.charCode;

var status = document.getElementById("keyteststatus");

var text = name +": "+evt.keyCode;

status.innerHTML = text;

status.textContent = text;

}

</script>

<input type="text" name="keytest" size="1" value=""

onkeyup="setStatus('keyup',event)"

onkeydown="setStatus('keydown',event)"

status

</form>

13. How to change style on an element?

Between CSS and javascript is a weird symmetry. CSS style rules are layed on top of the DOM. The CSS property names like "font-weight" are

transliterated into "myElement.style.fontWeight". The class of an element can be swapped out. For example:

document.getElementById("myText").style.color = "green";

document.getElementById("myText").style.fontSize = "20";

-or-

document.getElementById("myText").className = "regular";

14. How to make elements invisible

Change the "visibility" attribute of the style object associated with your element. Remember that a hidden element still takes up space, use "display"

to make the space disappear as well.

if ( x == y) {

myElement.style.visibility = 'visible';

} else {

myElement.style.visibility = 'hidden';

}

15. How to set the cursor to wait.

In theory, we should cache the current state of the cursor and then put it back to its original state.

document.body.style.cursor = 'wait';

//do something interesting and time consuming

document.body.style.cursor = 'auto';

16. How to reload the current page

window.location.reload(true);

17. How to force a page to go to another page using JavaScript?

18. How to convert a string to a number using JavaScript?

You can use the parseInt() and parseFloat() methods. Notice that extra letters following a valid number are ignored, which is kinda wierd but

convenient at times.

parseInt("100") ==> 100

parseFloat("98.6") ==> 98.6

parseFloat("98.6 is a common temperature.") ==> 98.6

parseInt("aa") ==> Nan //Not a Number

parseInt("aa",16) ==> 170 //you can supply a radix or base

19. How to convert numbers to strings using JavaScript?

You can prepend the number with an empty string

var mystring = ""+myinteger;

var mystring = myinteger.toString();

You can specify a base for the conversion,

var myinteger = 14;

var mystring = myinteger.toString(16);

20. How to test for bad numbers using JavaScript?

the global method, "isNaN()" can tell if a number has gone bad.

var temperature = parseFloat(myTemperatureWidget.value);

if(!isNaN(temperature)) {

alert("Please enter a valid temperature.");

}

mystring will be "e".

21. What's Math Constants and Functions using JavaScript?

The Math object contains useful constants such as Math.PI, Math.E

Math also has a zillion helpful functions.

Math.abs(value); //absolute value

Math.max(value1, value2); //find the largest

Math.random() //generate a decimal number between 0 and 1

Math.floor(Math.random()*101) //generate a decimal number between 0 and 100

22. What's the Date object using JavaScript?

Time inside a date object is stored as milliseconds since Jan 1, 1970.

new Date(06,01,02) // produces "Fri Feb 02 1906 00:00:00 GMT-0600 (Central Standard Time)"

new Date(06,01,02).toLocaleString() // produces "Friday, February 02, 1906 00:00:00"

new Date(06,01,02) - new Date(06,01,01) // produces "86400000"

23. What does the delete operator do?

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.

24. How tp create Arrays using JavaScript??

var days = new Array();

days[0] = "Sunday"

days[1] = "Monday"

days[2] = "Tuesday"

days[3] = "Wednesday"

days[4] = "Thursday"

days[5] = "Friday"

days[6] = "Saturday"

document.write("first day is "+days[0])

</script>

This produces

first day is Sunday

A more compact way of creating an array is the literal notation:

var days = ["Sunday","Monday","Tuesday","Wednesday", "Thursday","Friday","Saturday"];

document.write("first day is "+days[0]) </script>

This produces

first day is Sunday

25. How to delete an entry using JavaScript?

The "delete" operator removes an array element, but oddly does not change the size of the array.

var days = ["Sunday","Monday","Tuesday","Wednesday", "Thursday","Friday","Saturday"];

document.write("Number of days:"+days.length); delete days[4];

document.write("
Number of days:"+days.length);

</script>

This produces

Number of days:7

26. How to use strings as array indexes using JavaScript?

Javascript does not have a true hashtable object, but through its wierdness, you can use the array as a hashtable.

var days = ["Sunday","Monday","Tuesday","Wednesday", "Thursday","Friday","Saturday"];

for(var i=0; i < days.length; i++) {

days[days[i]] = days[i];

}

document.write("days[\"Monday\"]:"+days["Monday"]);

</script>

This produces

days["Monday"]:Monday

27. How to use "join()" to create a string from an array using JavaScript?

"join" concatenates the array elements with a specified seperator between them.

var days = ["Sunday","Monday","Tuesday","Wednesday", "Thursday","Friday","Saturday"];

document.write("days:"+days.join(","));

</script>

This produces

days:Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday

28. How to make a array as a stack using JavaScript?

The pop() and push() functions turn a harmless array into a stack

var numbers = ["one", "two", "three", "four"];

numbers.push("five");

numbers.push("six");

document.write(numbers.pop());

</script>

This produces

sixfivefour

29. How to shift and unshift using JavaScript?

var numbers = ["one", "two", "three", "four"];

numbers.unshift("zero");

document.write(" "+numbers.shift());

</script>

This produces

zero one two

shift, unshift, push, and pop may be used on the same array. Queues are easily implemented using combinations.

30. How to create an object using JavaScript?

Objects can be created in many ways. One way is to create the object and add the fields directly.

var myMovie = new Object();

myMovie.title = "Aliens";

myMovie.director = "James Cameron";

document.write("movie: title is \""+myMovie.title+"\"");

This produces

movie: title is "Aliens"

To create an object you write a method with the name of your object and invoke the method with "new".

function movie(title, director) {

this.title = title;

this.director = director;

}

var aliens = new movie("Aliens","Cameron");

document.write("aliens:"+aliens.toString());

</script>

This produces

aliens:[object Object]

You can also use an abbreviated format for creating fields using a ":" to separate the name of the field from its value. This is equivalent to the

above code using "this.".

function movie(title, director) {

title : title;

director : director;

}

var aliens = new movie("Aliens","Cameron");

document.write("aliens:"+aliens.toString());

</script>

This produces

aliens:[object Object]

Retrieved from "http://www.freshersonline.com/wiki/JavaScript_Interview_Questions_with_Answers_Page_IV"

JavaScript Interview Questions with Answers Page IV

From freshersonline.com

Views

Personal tools

Search