Internet companies recruiting web front end written questions

As major Internet companies set up Web front-end development engineers, design engineers and other positions, the Web front-end more and more recognized by Internet enterprises. And its importance and status also with the browser-side of the rich client's embodiment and increasing. The future and trend of HTML5, the industry's forecasts will be combined with flash, Silverlight and so on, thus replacing the traditional client applications. And the client core work that achieves this goal is to have the Web front-end engineer to complete. From another perspective, for web products, the interaction and user experience is the first value of the product, and this part of the value is in the Web front-end. It can be said that the Web front-end is a Web product appearance and speech, behavior.

Here is a quick explanation of the components of the Web front-end.

1. UI Design Section

This is the first step in Web-product virtualization. This section is usually in a slightly larger company and is set up as a separate department or as someone who works. The main is to master photo, AI, can quickly transform the idea into a graphic design, and make small pictures such as PNG. At the same time, UI design should also include elements of user interaction design, basic prototypes of how to interact with users, and so on.

2. Html/css, page static

This is a 2 step in web production, which is to cut the UI designer's design diagram into a static page. Here the "cut" is not a simple cut, but the use of CSS inside the background color and border style to interpret the design manuscript, and to form a Web-standard HTML code. Here the Web front-end also needs to be the picture, HTML page and CSS style reasonable file distribution arrangement, etc.

3.Javascript, as client dynamic

This is a 3 step in web production, where engineers use DOM operations, AJAX, data and server-side communication, and local-style switching. At the same time, because JavaScript, as is a dynamic language, so this part of the code requires the Web front-end engineers have good coding habits, can write efficient OOP code, and the code to compress the line to reduce bandwidth consumption.

4.Flash, Silverlight, video Multimedia

This section has different requirements for different web products, typically requiring you to interact with flash and the Web, server, and design and develop flash.

5.PHP, Java and other CGI, service-side communication basics and coding

This part is the better use of Ajax and other technologies, to understand how the service side of the work will be more conducive to the development of Web front-end engineer work. Typically, excellent Web front-end engineers are familiar with a development language on the server side.

The following is Webryan finishing the Baidu Web front-end written and interview some of the topics and processes, provided to you for reference.

Baidu Web front-end test paper on the topic:

1. To determine whether the string is such a composition, the first must be letters, the following can be letters, numbers, underscores, the total length of 5-20
2. Intercept string ABCDEFG EFG
3. Make the background color of an input into red
4. Give a page, write HTML CSS
5. The high width of the div is equal to the height of the viewable area of the browser, the browser scrolls, and the div always overwrites the entire visible area of the browser
6. To determine the most frequently occurring character in a string, count this number
7. IE and FF scripting compatibility issues

Again asked is 1,4,6,7, this time to ask the author's intention, and give 7 more answers, and IE ff incompatible reasons
Then looked at the resume, did not ask the program on the resume, but let yourself talk about
1 comments on the future trend of Web client technology
JavaScript + Ajax=ria
Adobe Flash as 3
Flex
Sliveright
How 2web development team members should work together
Layout CSS Scripts
such as the long-term accumulation of scripting people may cast type Yui such a product-level script library (highlights)
3web Development Once the team has no other people encounter problems, what problems, to ask you
4 If you want to practice, when can
5 What problems do you encounter in the process of development, talk about the views
6web Development Script development environment with what, debugging with what
Try Aptana, now use EditPlus.
Debug definitely use Firebug,ie to look at the page Dom with Ieinspector
7 If there's a new technology that needs to be mastered now, what would you do
The discovery of new technology I usually through the RSS tools, such as I use Googlereader
Half an hour a day looking at the latest information, technology trends
Discover new technology, first have a general understanding, if there is a need for in-depth
I usually see his official website, such as jquery, I will search to www.jquery.com, and then see Docs, samples
If you want to use the project, there are difficult problems, I will svn get the latest source of this technology, in-depth tracking into, see the principle of implementation
The technology that emerges now is opensource.

Question Time
100 degree Web development script to do like the Yui Library plan
How many people are the 200-degree web development engineers going to recruit

Baidu phone two side recall Web Development Department –web Development engineer

First, introduce yourself.
And then talk about doing Web projects
and start asking technical questions.

Optimization Problem of front-end development
For:
When the product is released, JS compression, that is, function name replacement, the entire file compressed into one line
CSS development of the time note to write clearly, there is a base.css, and then according to different pages need to add CSS, publish the CSS in a definition of a line, the purpose is to compress the file size
The final release of the time can even be compressed into a file, or even CSS, JS through the technique of compression into a css,js (highlights)
The goal is to reduce the number of HTTP connections that users access to web products

The development process of Web front-end products
A: First, according to the product positioning, user groups, to determine the color, and then design the overall layout of the paper, then PNG or PSD out of the effect of the picture, cut out the need for small pictures, and then handwritten code DIV+CSS constructs the page, and then write the script according to the function
Refer to 126 mailbox home, put all the small pictures in a picture, through the background-position of CSS to implement the page, or to optimize, reduce the number of HTTP connections

Avoiding the problem of duplicate JavaScript multi-person development function
A: First of all, through naming conventions, such as the functions implemented by different developers, prefix the function name, although the function name looks complex, the release can be replaced, so as to optimize.
Another option is for each developer to encapsulate its own function into a class, and then call it even if the function name is the same, but because it is a class. function name to call, so also reduce the likelihood of duplication.

JavaScript inheritance implementation in object-oriented
A: I'm using prototype.js extend.js extension
Then Parent.initialize () in the subclass ...
Not a good answer.
Correct answer:

1. Construction device
function Animal () {};
function mammal () {};
function canine () {};
function Dog () {};
2. Prototype linked list
Mammal.prototype = new Animal ();
Canine.prototype = new mammal ();
Dog.prototype = new Canine ();

The basic principle of prototype.js realization
For:
Encapsulate functionality
such as Ajax.request, or have the code to judge the browser; position the calculation of the position of the page element

Prototye is too large, if a page function does not need to do so, realize it yourself, how to do
A: First, after the page, CSS, script separation, the script will be the entire module function as a class var do={}
Which initializes the function Init:function () {}, and then the last Do.init ()
Where Init will bind events to the elements in the form on the page that need to interact, such as $ (' input1′ '). Onclick=function () {}

The difference between IE, FF script below
For:
1.IE has outerhtml,ff no
2. page element Id,ie can be directly taken, FF must be document.getElementById ()
3.Ajax inside FF is new XMLHttpRequest, and IE is
Try new ActiveXObject (' Msxml2.xmlhttp ') try new ActiveXObject (' Microsoft.XMLHTTP ')

FF below implementation outerhtml
Answer: Parenet.firstchild parent.innerhtml.
That's not a good answer.
The correct answer: the principle is, get: The tagname of this tag, and then the property loop constructs the properties of the tag
Set: Inserts a string in front of the element with InsertBefore and then removechild the element

<script language= "JavaScript" >
<!–
if (typeof (HtmlElement)!= "undefined" &&!window.opera)
{
htmlelement.prototype.__definegetter__ ("outerHTML", function ()
{
var a=this.attributes, str= "<" +this.tagname, i=0;
for (; i<a.length;i++)
if (a[i].specified)
str+= "" +a[i].name+ ' = "' +a[i].value+ '";
if (!this.canhavechildren)
return str+ "/>";
return str+ ">" +this.innerhtml+ "</" +this.tagname+ ">";
});
htmlelement.prototype.__definesetter__ ("outerHTML", function (s)
{
var d = document.createelement ("DIV"); d.innerhtml = s;
for (var i=0; i<d.childnodes.length; i++)
This.parentNode.insertBefore (D.childnodes[i], this);
This.parentNode.removeChild (this);
});
htmlelement.prototype.__definegetter__ ("Canhavechildren", function ()
{
Return!/^ (Areabasebasefontcolframehrimgbrinputisindexlinkmetaparam) $/.test (This.tagName.toLowerCase ());
});
}
–>
</SCRIPT>

The explanation difference of CSS under IE and FF
For:
1.png transparent background, FF below no problem, ie need to use filter channel
2.z-index in IE, FF, under the interpretation of the problem,

IE will think that the first z-index=0
3. Long string, word-wrap:break-all can solve IE, but FF needs overflow:hidden.
Fung Shuya added:
1, some of the tags in FF can not be used, such as button
2, filters
3, mouse Cursor:hand Cursor:pointer
4, Div's highly adaptive
5, the box model resolution is not the same
6, UL, Ol of padding and margin

IE can recognize *, standard browser (such as FF) does not recognize *;
IE6 can recognize *, but can not identify!important;
IE7 can recognize the *, also can identify!important;
FF does not recognize *, but can identify!important;
such as style= "*width:10px;! Important width:20px; "
In this way, under the IE6 width of 10px, under the width of IE7 20px

The prospect of Web front-end technology
Answer: JavaScript ajax;flash as;flex;sliveright
Attached to the online Baidu Web development engineer written questions set
1 Write a method to find the byte length of a string

<script language= "javascript" type= "Text/javascript" >
New function (s)
{
if (!arguments.length!s) return null;
if ("" ==s) return 0;
var l=0;
for (Var i=0;i<s.length;i++)
{
if (S.charcodeat (i) >255) l+=2;
else l++;
}
Alert (l);
(Hello, I'm good, everybody!) World! ");
</script>

2 Write a method to remove the duplicate elements of an array

<script language= "javascript" type= "Text/javascript" >
Array.prototype.strip=function ()
{
if (this.length<2) return [this[0]][];
var arr=[];
for (Var i=0;i<this.length;i++)
{
Arr.push (This.splice (i–,1));
for (Var j=0;j<this.length;j++)
{
if (This[j]==arr[arr.length-1])
{
This.splice (j–,1);
}
}
}
return arr;
}
var arr=[, "ABC", "ABC", 85,8,8,1,2,5,4,7,8];
Alert (Arr.strip ());
</script>

3 say more than 3 scripting compatibility issues with FF and IE
IE there is no children,ff, ie have parentelement,ff no, ie have innertext,outertext,outerhtml,ff not; FF has htmlelement,htmldivelement, Xmldocument,documentfragment,node, Event,element and so on, ie did not have data island, FF did not, IE and FF to create a HttpRequest instance of the same method. Wait a minute..
4 using scripting to remove the front and back spaces of a string

String.prototype.trim = function (mode)
{//Front and back space
if (mode== ' left ') {
Return ((This.charat (0) = "" && this.length > 0)? This.slice (1). Trim (' left '): this);
} else
if (mode = = ' right ') {
Return ((This.charat (this.length-1) = "" && this.length > 0)? This.slice (0, this.length-1). Trim (' right '): this);
} else {
Return This.trim ("left"). Trim (' right ');
}
};

5 figure out what is the most frequently occurring character in a string, how many times it appears

<script type= "Text/javascript" >
<! [Cdata[var str = "ADADFDFSEFFSERFEFSEFSEEFFFFFTSDG";//Name a variable to place the given string
var maxLength = 0; Name a variable to place the highest number of letters that appear and initialize to 0
var result = '; Name a variable placement result input

while (str!= ') {//loop iteration begins and determines whether the string is empty
Oldstr = str; Assign the original string variable to the new variable
GETSTR = STR.SUBSTR (0,1); Get the first character (first letter) using the Substr method of the string
eval ("str = str.replace (/" +getstr+ "/g, ')"); Details such as supplementary

if (Oldstr.length-str.length > MaxLength)
{//Determine the length of the original string minus the maximum length of the string before it is replaced
MaxLength = Oldstr.length-str.length; Subtracts two string lengths to get the maximum string length
result = Getstr + "=" + maxLength//return maximum string results (Letters, occurrences)
}
}

Alert (Result)//Popup results
]]>
</script>

6 write out a typical application using this in 3
Use this keyword inline in HTML element event properties:

7. The final question is how to make a combo option that allows you to enter a drop-down menu selection.

This web has a lot of finished products, mainly through the absolute positioning and relative positioning of the way to transform the original select label and input label method.

Attach a basic knowledge of JavaScript regular expressions:
G: Global Match
I: Ignore case
^ matches the beginning of an input or line,/^a/matches "an A" and does not match "an A"
$ matches the end of an input or line,/a$/matches "an A" and does not match "an A"
* Match the preceding metacharacters 0 or more times,/ba*/will match b,ba,baa,baaa
+ Match the preceding metacharacters 1 or more times,/ba*/will match ba,baa,baaa
? Match the preceding metacharacters 0 or 1 times,/ba*/will match B,ba
(x) match x Save x in a variable named $1...$9
XY match x or Y
{n} exact match n times
{n,} matches n times above
{n,m} matching n-m times
[XYZ] Character set (character set) that matches any one by one characters (or metacharacters) in this collection
[^XYZ] does not match any one of the characters in this collection
[b] Match a backspace
b matches the bounds of a word
B matches the non-boundary of a word
CX here, X is a control character,/cm/match ctrl-m
D matches a character number character,/d/=/[0-9]/
D matches a non-word digit character,/d/=/[^0-9]/
n Matches a line feed
R matches a return character
s matches a blank character, including n,r,f,t,v, etc.
S matches a non-white-space character equal to/[^nfrtv]/
T matches a tab
V matches a heavy-straight tab
W matches a character that can compose a word (alphanumeric, which is my transliteration, with numbers), including underscores, such as [W] matching "$5.98″ 5, equals [a-za-z0-9]
W matches a character that cannot be composed of words, such as the $ in [W] match $5.98″, equal to [^a-za-z0-9
Example: Verifying email
var myreg =/^[_a-z0-9]+@ ([_a-z0-9]+.) +[a-z0-9]{2,3}$/;
if (Myreg.test (Stremail)) return true;