fakecineaste : javascript interview questions

Fill in the body of the sortByFoo function below. Executing the code should display true three times in your browser.

Tested sortByFoo.js with firebug.

References
http://www.siteduzero.com/forum/sujet/corps-de-la-fonction-20209
http://www.siteduzero.com/forum/sujet/tableau-foo-5-foo-7-10308
https://gist.github.com/1121755/0f6e5eee6dc437912fb937f5db481235e1837b7e
http://www.opendebug.com/article/321245
http://bbs.csdn.net/topics/380207906
http://www.andhrafriends.com/topic/340334-javascript-solutions-helpp/Finish the code below:

<html><head>
<script>
    document.body.innerHTML = '
        <div id="42" onclick="clicked(event)">1</div>
        <div id="43" onclick="clicked(event)">2</div>
        <div id="44" onclick="clicked(event)">3</div>';

    function clicked(event)
    {
      // TODO: Fill in here. Use event.target.
      // TODO: Display an alert containing the id of the clicked div
    }
</script>
</head>
<body></body>
</html>

Tested by firefox

<html><head>
<script>
document.body.innerHTML = '<div id="42" onclick="clicked(event)">1</div><div id="43" onclick="clicked(event)">2</div><div id="44" onclick="clicked(event)">3</div>';

function clicked(event)
{
// TODO: Fill in here. Use event.target.
// TODO: Display an alert containing the id of the clicked div

var obj = event.srcElement || event.target;
alert(obj.id);
}
</script>
</head>
<body></body>
</html>

Rewrite the code below using DOM or jQuery calls instead of using innerHTML. If using jQuery, it will be considered accessible in the $ variable.

Tested by firefox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>iframe Example</title>

</head>

A:link {text-decoration: none}

A:visited {text-decoration: none}

A:active {text-decoration: none}

A:hover {font-size:24; font-weight:bold; color: red;}

</style>

<body>

</ul>

</body>

</html>

Write a jQuery module that provides the following methods for setting CSS border properties:

$('#foo').border('1px solid blue');
$('#foo').border({width: '2px', color: 'red', radius: '1px'});
$('#foo').border(null);
$('#foo').border(); // Returns the value of the border property

Tested by firefox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Untitled Document</title>

A:link {font-size:24; font-weight:bold; color: red;}

</style>

</head>

<body>

<table>

<th>

<ul>

<li><a href="#">Bullet 1</a></li>

<li><a href="#">Bullet 2</a></li>

<li><a href="#">Bullet 3</a></li>

</ul>

</th>

<tr>

</tr>

</table>

</body>

</html>

Code a slideUpAndOut(elem) javascript function that makes an element disappear by sliding upwards and out of the page, without altering the layout and positioning of other elements in the page.

Tested by firefox

<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>

<script type="text/javascript">

function slideUpAndOut(elem){

if($("#" + elem).is(":hidden"))
$("#" + elem).slideDown('slow');
else
$("#" + elem).slideUp('slow');
}

</script>

</head>
<body>

<div id="slide-text">
<p>paragraph will disappear by sliding upwards and out of the page </p>
</div>

<button onClick="slideUpAndOut('slide-text')">Slide Paragraph</button>

</body>
</html>

In an XHTML document, when should you use class vs id attributes?

IDs can be used once but classes can be used multiple times.ID is more specific. You can use multiple classes to style an HTML element but you can only use one ID when styling an HTML element.Classes are useful to apply similar declarations to a variety of elements.

Should you use ID or class?

http://css.maxdesign.com.au/selectutorial/advanced_idclass.htm

The Difference Between ID and Class

http://css-tricks.com/the-difference-between-id-and-class/

When should I use a class and when should I use an ID?

http://css-discuss.incutio.com/wiki/Classes_Vs_Ids

Explain what the following code means:

a:hover { font-weight: bold; }

A:hover
Defines
the style for hovered links. A
link is hovered when the mouse moves over it.
font-weight: bold is used for
font formatting.

In CSS2, how would you select all of the text fields of a form? What do you need to do for it to work in IE6?

This can be used.

input[type=text]

{

//css rules

}

To comply with IE6.

IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

http://code.google.com/p/ie7-js/

Is there a way in CSS to select all input elements of type text?

http://stackoverflow.com/questions/5789975/select-all-text-boxes-in-css

http://stackoverflow.com/questions/4113965/css-selector-for-text-input-fields

What differences are there between absolute and relative positionings?

Absolute positioning

This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. These values will be relative to the next parent element with relative (or absolute) positioning

Relative positioning

A relative positioned element is positioned relative to its normal position. The content of a relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.

What are the differences between absolute and relative positioning?

http://www.phpmind.com/blog/2010/09/what-are-the-differences-between-absolute-and-relative-positioning/

Write the code for a javascript-less CSS menu interface. The interface (a “menubar” of sorts) will have two menus, the first with 3 elements, the second with 10 elements. It must work in Google Chrome or any webkit based browser. The choice of presentation is open, but must be well argued.

Tested by google chrome and safari

<html>

<head>

<title>Untitled Document</title>

#menu-bar {

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

height: 24px;

line-height: 100%;

border-radius: 0px;

-webkit-border-radius: 0px;

-moz-border-radius: 0px;

box-shadow: 2px 2px 0px #666666;

-webkit-box-shadow: 2px 2px 0px #666666;

-moz-box-shadow: 2px 2px 0px #666666;

background: #8B8B8B;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9, endColorstr=#7A7A7A);

background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));

background: -moz-linear-gradient(top, #A9A9A9, #7A7A7A);

border: solid 0px #6D6D6D;

}

#menu-bar li {

margin: 0px 6px 0px 0px;

padding: 0px 0px 0px 0px;

float: left;

position: relative;

list-style: none;

}

#menu-bar a {

font-weight: bold;

font-family: arial;

font-style: normal;

font-size: 12px;

color: #E7E5E5;

text-decoration: none;

display: block;

padding: 8px 20px 8px 20px;

margin: 0;

border-radius: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

text-shadow: -20px -20px 0px #000000;

}

#menu-bar .current a, #menu-bar li:hover > a {

background: #0399D4;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1);

background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));

background: -moz-linear-gradient(top, #EBEBEB, #A1A1A1);

color: #444444;

-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

text-shadow: 2px 2px 3px #FFFFFF;

}

#menu-bar ul li:hover a, #menu-bar li:hover li a {

background: none;

border: none;

color: #666;

-box-shadow: none;

-webkit-box-shadow: none;

-moz-box-shadow: none;

}

#menu-bar ul a:hover {

background: #0399D4 !important;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#04ACEC, endColorstr=#0186BA);

background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;

background: -moz-linear-gradient(top, #04ACEC, #0186BA) !important;

color: #FFFFFF !important;

border-radius: 0;

-webkit-border-radius: 0;

-moz-border-radius: 0;

text-shadow: 2px 2px 3px #FFFFFF;

}

#menu-bar ul {

background: #DDDDDD;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);

background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));

background: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);

display: none;

margin: 0;

padding: 0;

width: 185px;

position: absolute;

top: 30px;

left: 0;

border: solid 1px #B4B4B4;

border-radius: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-webkit-box-shadow: 2px 2px 3px #222222;

-moz-box-shadow: 2px 2px 3px #222222;

box-shadow: 2px 2px 3px #222222;

}

#menu-bar li:hover > ul {

display: block;

}

#menu-bar ul li {

float: none;

margin: 0;

padding: 0;

}

#menu-bar ul a {

padding:10px 0px 10px 15px;

color:#424242 !important;

font-size:12px;

font-style:normal;

font-family:arial;

font-weight: normal;

text-shadow: 2px 2px 3px #FFFFFF;

}

#menu-bar ul li:first-child > a {

border-top-left-radius: 10px;

-webkit-border-top-left-radius: 10px;

-moz-border-radius-topleft: 10px;

border-top-right-radius: 10px;

-webkit-border-top-right-radius: 10px;

-moz-border-radius-topright: 10px;

}

#menu-bar ul li:last-child > a {

border-bottom-left-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-moz-border-radius-bottomleft: 10px;

border-bottom-right-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

-moz-border-radius-bottomright: 10px;

}

#menu-bar:after {

content: ".";

display: block;

clear: both;

visibility: hidden;

line-height: 0;

height: 0;

}

#menu-bar {

display: inline-block;

}

html[xmlns] #menu-bar {

display: block;

}

* html #menu-bar {

height: 1%;

}

</style>

</head>

<body>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</body>

</html>

What does the following code mean? What does it display, and why?

#foo {

position: relative; overflow: hidden; background-color: red;

top: 10px; left: -50px; width: 100px; height: 100px;

}

div.bar {

position: absolute; background-color: blue;

height: 50px; width: 75px; bottom: 0px; right: -30px;

}

.foo {

float: right; background-color: green;

width: 30px; height: 30px; margin: 10px 0 30px;

}

span {

background-color: black; width: 50px; height: 400px;

}

</style></head>

<body>

</div>

</body></html>

In IE9 page spans black block on the left side of the web page.In mozilla chroma and safari page is blank

I tested like below

</div>

Aim is to position div tags side by side.

fakecineaste

Thursday, March 7, 2013

javascript interview questions

No comments:

Post a Comment