Q1)JavaScript What’s a typical use case for an anonymous function?

Anonymous function is just a function without name.It is used for constructing the result
of a higher-order function[ is a function that does at least one of the following:takes one
or more functions as arguments,returns a function as its result.] that needs to return a
function.

ex:

var fnAnonymous = function(){

alert("hi");
};

fnAnonymous(); //hi

here fnAnonymous() is Anonymous function

use anonymous functions for three reasons:

1.If no name is needed because the function is only ever called in one place, then why
add a name to whatever namespace you're in.

2.Anonymous functions are declared inline and inline functions have advantages in that
they can access variables in the parent scopes. Yes, you can put a name on an anonymous
function, but that's usually pointless if it's declared inline. So inline has a significant
advantage and if you're doing inline, there's little reason to put a name on it.

3.The code seems more self-contained and readable when handlers are defined right
inside the code that's calling them. You can read the code in almost sequential fashion
rather than having to go find the function with that name.

Q2)JavaScript What is the hasOwnProperty function used for?

Every object descended from Object inherits the hasOwnProperty method. This method
can be used to determine whether an object has the specified property as a direct property
of that object; unlike the in operator, this method does not check down the object's
prototype chain. hasOwnProperty() is a normal Javascript function that takes a string
argument.

ex:

function Shape() {
this.name = "Generic";
this.draw = function() {
 return "Drawing " + this.name + " Shape";
};
}

function welcomeMessage()
{
var shape1 = new Shape();
alert(shape1.hasOwnProperty("name")); //this is returning true
}

Q3)JavaScript What is a polyfill? When might you use one? What is an example of a
popular polyfill?
A polyfill is a browser fallback, made in javascript, that allows functionality you
expect to work in modern browsers to work in older browsers. Ie to support canvas (an
html5 feature) in older browsers.

example

(var isEven = function(n) {

return n % 2 === 0;
};

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].filter(isEven);
// returns [2, 4, 6, 8, 10]

Q4)JavaScript While inside a function definition, what is the difference these two
statements?

x = 1;

var x = 1;

Variables declared outside a function become GLOBAL, and all scripts and functions on
the web page can access it.

Global variables are destroyed when you close the page.

If you declare a variable, without using "var", the variable always becomes GLOBAL.

Q5)JavaScript What is the difference between == and ===?

When we compare two variables of different type e.g. a boolean with a string or a number
with String using == operator, it automatically converts one type into another and return
value based upon content equality, while === operator is strict equality operator in Java,
and only return true if both variable of same type and also contains same value. This will
be much clear with following example of == and === operator in JavaScript :

0==false // true, because false is equivalent of 0

0===false // false, because both operands are of different type
2=="2" // true, auto type coercion, string converted into number
2==="2" // false, since both operands are not of same type

2) "==" operator is known as type coercion operator and anytime if both values are same
and compared using ==operator, type coercion happens. On the other hand === is known
as strictly equality operator. It's much similar Java's equality operator (==), which gives
compilation error if you compare two variables, whose types are not compatible to each
other. In fact, you should always use "===" operator for comparing variables or just for
any comparison.

Q6)JavaScript Describe event bubbling. Describe event capturing. Which one is

preferable and why?

Event bubbling and capturing are two ways of event propagation in the HTML DOM
API, when an event occurs in an element inside another element, and both elements have
registered a handle for that event. The event propagation mode determines in which order
the elements receive the event.

With bubbling, the event is first captured and handled by the innermost element and then
propagated to outer elements.

With capturing, the event is first captured by the outermost element and propagated to the
inner elements.

Capturing is also called "trickling", which helps remember the propagation order:

Only the bubbling model is supported by all major browsers. If you are going to use
event capturing anyway, you need to handle event bubbling for IE. So event bubbling is
preferable.

--------
Q7)CSS Describe a couple of different ways to overlay some text on an image

There are couple different ways of doing this.

1..
<a class="texthover" href=" " title="This is some text I want to display."
style="background-color:#FFFFFF;color:#000000;text-decoration:none"><img
src="http://your.imge.link.jpg" /></a>
Here you can even use it in comments here on creators and still have the hover text. See
image below and hover your mouse over it. No CSS needed. Just replace the text and the
image link to whatever you prefer.
This HTML goes in any HTML box.
2....
overlay, HTML and CSS.. My personal favorite
replace the image link and the text to whatever you prefer. This divide goes in any HTML
box. And the CSS goes in your design studio css section

html page
<div class="texthover"><br />
<img
src="http://api.ning.com/files/zNSLWuvsJ1IsNDWk68XplsZ6uepRjnDFBhg9Q5*DJd9n
krPgTeTdhz3Bwkp5FOy72uYwk*a6oW0hpwjWf4T90-Fvx-rf0Qrj/religion.jpg" />
<div class="overlay"><br />
<span>This is some text I want to display</span></div>
</div>
css page

DIV.texthover {
width:100%;
display:block;
position:relative;
text-align: center!important;}

DIV.texthover .overlay {
position:absolute;
top:45%;
width:0;
width:100%;
height:50%;
padding:10px;
background-color:rgba(0, 0, 0, 0.3);
display:none;
}
DIV.texthover:hover .overlay {
display:block;
}

Q8)CSS List as many values for the “display” property that you can remember
 inline,block,flex,inline-table,initial,table-cell,table-column,table-row

Q9)CSS Describe the differences between an “inline” and “inline-block” element

Inline elements:

respect left & right margins and padding, but not top & bottom
cannot have a width and height set
allow other elements to sit to their left and right.

Inline-block elements:

allow other elements to sit to their left and right

respect top & bottom margins and padding
respect height and width

---
Q10)jQuery Explain “chaining”
In chaining parent function/method returns an object which is then used by the child
function/method, and things go on such a way. In short the jQuery or $ returns itself (an
object) which allows the chaining.Chaining allows us to run multiple jQuery methods (on
the same element) within a single statement.
exmple: $("#p1").css("color", "red").slideUp(2000).slideDown(2000);

Q11)jQuery What is the correct way to determine whether a selector returned

something?
Query selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to "find" (or select) HTML elements based on their id, classes,
types, attributes, values of attributes and much more. It's based on the existing CSS
Selectors, and in addition, it has some own custom selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

Q12)jQuery What is $.Deferred used for?

jQuery.Deferred() A factory function that returns a chainable utility object with methods
to register multiple callbacks into callback queues, invoke callback queues, and relay the
success or failure state of any synchronous or asynchronous function.
var deferred = $.Deferred();

deferred.resolve("hello world");
deferred.done(function(value) {
alert(value);
});

----

Q13)HTML5 Give 5 examples of natively block-level tags. Give 5 examples of natively

inline tags.

block-level tags :<article>,<footer> ,<header>,<section> ,<figcaption>

natively inline tags: <b>, <big>, <i>, <small>, <tt>

Q14)HTML5 What are data- attributes good for?

The data-* attributes is used to store custom data private to the page or application.
The data-* attributes consist of two parts:
The attribute name should not contain any uppercase letters, and must be at least one
character long after the prefix "data-"
ex:
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
</article>

Q15)HTML5 List some features that are new to HTML5

list of features are implemented in html5
Tel
url
email
color
datetime
video
audio

Q16)HTML5 List some new HTML5 markup elements

progress - The progress element is used to represent the progress of a task. It supports
both indeterminate situations as well as determinate situations.
Ruby - The ruby element is used to support one or more spans of content to be marked
with ruby annotations.
rt - The rt element is used to mark the ruby text component for a ruby annotation.
rp - The rp element is used to provide parenthesis around a ruby text component of a ruby
annotation.
Section - The section element is used to represent a generic section of a document or
application, usually containing a heading. E.g. chapters in a book.
Source - The source element is used to specify to alternate media resources for media
elements. It is not supposed to be dynamically modified, as that will have no effect.
Summary- The summary element is an interactive element which is used to represent a
summary, or caption for a details element.
Time - The time element represents datetime attribute contents in a machine readable
form (limited to various kinds of dates, times, time-zone offsets, and durations).
Video - The video element is a type of media element used to represent a video stream.
wbr - The wbr element is used to represent a line break in a web page.

----
Q17)Security What is CSRF and how do you prevent it?

Cross-Site Request Forgery (CSRF) is a type of attack that occurs when a malicious Web
site, email, blog, instant message, or program causes a user’s Web browser to perform an
unwanted action on a trusted site for which the user is currently authenticated. The impact
of a successful cross-site request forgery attack is limited to the capabilities exposed by
the vulnerable application.

for prevent use

1.Using a Secret Cookie
2.Only Accepting POST Requests
3.Multi-Step Transactions
4.URL Rewriting

Q18)Security What is XSS and how do you prevent it?

Cross-site Scripting (XSS) refers to client-side code injection attack wherein an attacker
can execute malicious scripts (also commonly referred to as a malicious payload) into a
legitimate website or web application. XSS is amongst the most rampant of web
application vulnerabilities and occurs when a web application makes use of unvalidated
or unencoded user input within the output it generates.

To implement this, you have to include a few logic layers in your application.

1.Include a hidden form field on all forms of your site which are required when a user is
logged in. For example purposes, let's call it the nonce.
2.Include the nonce value in the users session variables, so that they have a copy.
3.After every POST or GET evaluation you want to protect, make sure that the nonce
from the browser (session) matches the nonce from the form (GET/POST value)
4.If they do not match, then the page may have been submitted fraudulently
5.The nonce may be generated new for each form, or stored server side in a database. Be
aware that if it is generated new each time, you may face issues with users back button
functionality, or multiple tabs, although this ius less work then storing it server side.

Q19)Accessibility If I have a <div> that behaves like a button (i.e.: has a click event
handler), how do I indicate that functionality to a screen reader?

Q20)Accessibility List two ARIA attributes and describe them

The aria-describedby attribute is used to indicate the IDs of the elements that describe the
object. It is used to establish a relationship between widgets or groups and text that
described them.

ex:

<button aria-label="Close" aria-describedby="descriptionClose"

onclick="myDialog.close()">X</button>

...

<div id="descriptionClose">Closing this window will discard any information entered

and
return you back to the main page</div>