Web front-End pen questions

The following is the Web front-end development Pen Question collection of JavaScript chapter, the HTML/CSS Chapter

1, determine whether the string is composed of such, the first must be a letter, the following can be letters, numbers, underscores, the total length is 5-20

var reg =/^[a-za-z][a-za-z_0-9]{4,19}$/;

Reg.test ("a1a__a1a__a1a__a1a__");

2, intercept the string ABCDEFG EFG

var str = "ABCDEFG";

if (/efg/.test (str)) {

var EFG = str.substr (Str.indexof ("EFG"), 3);

alert (EFG);

}

3, judge the most frequently occurring characters in a string, count this number

Characters the character of a string in a hash table, key is a character, and value is the number of occurrences

var str = "Abcdefgaddda";

var obj = {};

for (var i = 0, L = str.length; i < L; i++) {

var key = Str[i];

if (!obj[key]) {

Obj[key] = 1;

} else {

obj[key]++;

}

}

/* traverse this hash table to get the value of the largest key and value*/

var max =-1;

var max_key = "";

var key;

for (key in obj) {

if (Max < Obj[key]) {

max = Obj[key];

Max_key = key;

}

}

Alert ("Max:" +max+ "Max_key:" +max_key);

4,ie and FF scripting compatibility issues

(1) Window.event:

Represents the current event object, IE has this object, FF No, FF passes the event object to the event handler function

(2) Get event source

IE uses srcelement to get the event source, while FF gets the event source with target

(3) Add, remove events

IE:element.attachEvent ("onclick", function) element.detachevent ("onclick", function)

FF:element.addEventListener ("Click", Function, True) Element.removeeventlistener ("Click", Function, True)

(4) Get custom properties for tags

IE:div1.value or div1["value"]

FF: Available Div1.getattribute ("value")

(5) Document.getelementbyname () and Document.all[name]

Ie;document.getelementbyname () and document.all[name] cannot get DIV elements

FF: Yes

(6) Properties of Input.type

IE:input.type Read Only

FF:input.type can read and write

(7) InnerText textcontent outerhtml

IE: Support InnerText, outerhtml

FF: Support Textcontent

(8) Whether an ID is available instead of an HTML element

IE: You can replace HTML elements with IDs

FF: Not Available

Here are just a few of the most common and many more introductions to the differences between JavaScript in IE and Firefox browser.

5, avoid the problem of the same name of JavaScript multi-person development function

(1) Pre-defined naming conventions can be developed to prefix functions with functions developed by different developers

(2) The function of each developer is encapsulated in the class, and the function of the class is called when it is called, even if the name of the function is not repeated, OK

6,javascript inheritance implementation in object-oriented

JavaScript's object-oriented inheritance implementations generally use constructors and prototype prototype chains, with the following simple code:

function Animal (name) {

THIS.name = name;

}

Animal.prototype.getName = function () {alert (this.name)}

function Dog () {};

Dog.prototype = new Animal ("Buddy");

Dog.prototype.constructor = Dog;

var dog = new Dog ();

7,FF below to implement outerHTML

FF does not support outerhtml, and special handling is required to implement outerHTML

Ideas are as follows:

Add a new element A to the page, clone a copy of the element that needs to get outerhtml, append the element to the new A, and get a innerhtml.

Spandiv

SPAN

P

8, write a method to find the byte length of a string

Assume:

An English character occupies one byte, and a Chinese character occupies two bytes

function GetBytes (str) {

var len = str.length;

var bytes = Len;

for (var i=0; i

if (Str.charcodeat (i) > 255) bytes++;

}

return bytes;

}

Alert (GetBytes ("Hello, as"));

9, write a method to remove the repeating elements of an array

var arr = [1, 1, 2, 3, 3, 2, 1];

Array.prototype.unique = function () {

var ret = [];

var o = {};

var len = this.length;

for (var i=0; i

var v = this[i];

if (!o[v]) {

O[V] = 1;

Ret.push (v);

}

}

return ret;

};

Alert (Arr.unique ());

10, write out 3 typical applications that use this

(1) used in HTML element event properties, such as

(2) Constructors

function Animal (name, color) {

THIS.name = name;

This.color = color;

}

(3)

(4) The This keyword is used in CSS expression expressions

div element

12, how do I show/hide a DOM element?

El.style.display = "";

El.style.display = "None";

El is the DOM element to manipulate

How do I detect if a variable is a string type in 13,javascript? write a function implementation

There are two ways of generating a string type:

(1) Var str = "Hello world";

(2) Var str2 = new String ("Hello World");

function isstring (str) {

return (typeof str = = "string" | | str.constructor = = string);

}

var str = "";

Alert (isstring (1));

Alert (isstring (str));

Alert (isstring (new String (str)));

14, the Web page to achieve a calculation of how much time left in the countdown timer program, the Web page on the real-time dynamic display "xx years left xx days xx xx minutes xx seconds"

15, supplemental code, mouse click Button1 after the Button1 moved to the back of Button2

What types of data do 16,javascript have?

Simple: number,boolean,string,null,undefined

Compound: object,array,function

17, the following CSS tags are called in JavaScript how to spell, Border-left-color,-moz-viewport

borderLeftColor

Mozviewport

How to deeply clone an object in 18,javascript

function Cloneobject (o) {

if (!o | | ' Object '!== typeof o) {

return o;

}

var c = ' function ' = = = = typeof O.pop? [] : {};

var p, V;

For (P in O) {

if (O.hasownproperty (p)) {

v = o[p];

if (v && ' object ' = = = = typeof v) {

C[P] = Ext.ux.clone (v);

}

else {

C[p] = v;

}

}

}

return C;

};

19, how to control the line break in alert

\ alert ("P\NP");

20, please implement, mouse click on any tab in the page, alert the name of the tag. (Note compatibility)

Spandiv

SPAN

P

21, write a JavaScript function, parsequerystring, whose purpose is to parse the URL parameter into an object, such as:

var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2″;

function parsequerystring (URL) {

var params = {};

var arr = Url.split ("?");

if (arr.length <= 1)

return params;

arr = Arr[1].split ("&");

For (var i=0, l=arr.length; i

var a = arr[i].split ("=");

Params[a[0]] = a[1];

}

return params;

}

var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2";

var ps = parsequerystring (URL);

Alert (ps["Key1"]);

What is 22,ajax? An interactive model of Ajax? What is the difference between synchronous and asynchronous? How do I troubleshoot cross-domain issues?

Ajax is a browser and server interaction technology that combines a variety of technologies, and the basic idea is to allow an Internet browser to make asynchronous HTTP calls to a remote page/service and update a current Web page with the received data without having to refresh the entire page. This technology can improve the client experience. Technologies included:

XHTML: The XHTML specification that corresponds to the XHTML1.0 is now a.

CSS: corresponding to the CSS specification, is currently CSS2.0

DOM: The DOM here mainly refers to the HTML Dom,xml DOM included in the following XML

JavaScript: ECMAScript specification corresponding to the ECMA

XML: Specification of XML DOM, XSLT, XPath, etc.

XMLHttpRequest: Web Applications1.0 Specification (http://whatwg.org/specs/web-apps/current-work/) corresponding to WHATWG

Ajax Interaction Model

　　

Synchronization: The script will stay and wait for the server to send a reply before continuing

Async: Script allows a page to continue its process and handle possible replies

Cross-domain problem simple understanding is because of the limitations of the JS homologous policy, a.com domain name JS can not operate B.Com or c.a.com under the object, the specific scenario is as follows:

　　

PS: (1) If the cross-domain problem is caused by a port or protocol the front end is powerless

(2) on a cross-domain issue, the domain is only identified by the header of the URL and does not attempt to determine whether the same IP address corresponds to the domain or two domains corresponding to an IP

Front-end for cross-domain workarounds:

(1) Document.domain+iframe

(2) Dynamically create a script tag

23, what is closure? Below this UL, how to click on each column when alert its index?

This is the first one.

This is the second one.

This is the third one.

A closure is generated when an intrinsic function is called by the outer region of the function that defines it.

(function A () {

var index = 0;

var ul = document.getElementById ("test");

var obj = {};

for (var i = 0, L = ul.childNodes.length; i < L; i++) {

if (ul.childnodes[i].nodename.tolowercase () = = "Li") {

var li = ul.childnodes[i];

Li.onclick = function () {

index++;

alert (index);

}

}

}

})();

24, please give the asynchronous loading JS scheme, not less than two

By default JavaScript is loaded synchronously, that is, JavaScript loading is blocked, after the elements to wait for the JavaScript to be loaded before loading, for some meaning is not very large javascript, if placed in the page header will cause the load is very slow , it can seriously affect the user experience.

Asynchronous Load Mode:

(1) Defer, only IE support

(2) Async:

(3) Create script, insert into DOM, callback after loading, see code:

function Loadscript (URL, callback) {

var script = document.createelement ("script")

Script.type = "Text/javascript";

if (script.readystate) {//ie

Script.onreadystatechange = function () {

if (script.readystate = = "Loaded" | |

Script.readystate = = "complete") {

Script.onreadystatechange = null;

Callback ();

}

};

} else {//others:firefox, Safari, Chrome, and Opera

Script.onload = function () {

Callback ();

};

}

script.src = URL;

Document.body.appendChild (script);

}

25, please design a set of programs to ensure that the page JS loaded completely.

var n = document.createelement ("script");

N.type = "Text/javascript";

Omit part of the code above

IE supports script's ReadyStateChange attribute (ie support the ReadyStateChange event for script and CSS nodes)

if (ua.ie) {

N.onreadystatechange = function () {

var rs = this.readystate;

if (' loaded ' = = = = = RS | | ' Complete ' ===rs) {

N.onreadystatechange = null;

f (Id,url); callback function

}

};

Omit part of the code

Safari 3.x supports the Load event for script nodes (DOM2)

N.addeventlistener (' Load ', function () {

f (Id,url);

});

Firefox and Opera support OnLoad (but not dom2 on FF) handlers for

Script nodes. Opera, but no FF, support the OnLoad event for link

Nodes.

}else{

N.onload = function () {

f (Id,url);

};

}

How to define class in 26,js, how to extend prototype?

Ele.classname = "* * *"; defined in CSS in the following form:. * * * {...}

a.prototype.b = C;

A is the name of a constructor

B is the property of this constructor

C is the value of the property you want to define

27, there are several ways to add an HTML element to an event.

(1) Assigning values to the event attributes of an HTML element

(2) Use ele.on*** = function () {...} in JS

(3) The method of adding events using DOM2 AddEventListener or attachevent

The difference between 28,documen.write and innerHTML

Document.Write can only redraw the entire page

innerHTML can redraw part of a page

29, what does multi-browser detect through?

(1) navigator.useragent

(2) Features of different browsers, such as AddEventListener

30,js's base object has those, window and document common methods and properties listed to

String,number,boolean

Window:

Method: Setinterval,settimeout,clearinterval,cleartimeout,alert,confirm,open

Property: Name,parent,screenleft,screentop,self,top,status

Document

Method: Createelement,execcommand,getelementbyid,getelementsbyname,getelementbytagname,write,writeln

Properties: Cookie,doctype,domain,documentelement,readystate,url,

31, the optimization problem of front-end development

(1) Reduce the number of HTTP requests: CSS Spirit,data URI

(2) Js,css source compression

(3) Front-end template js+ data, reduce the bandwidth wasted due to HTML tags, front-end with variables to save AJAX request results, each operation of local variables, no request, reduce the number of requests

(4) Use innerHTML instead of DOM operation, reduce DOM operation times, optimize JavaScript performance

(5) Use settimeout to avoid page loss response

(6) using hash-table to optimize the search

(7) Set classname instead of directly manipulating style when you need to set a lot of styles

(8) Use less global variables

(9) The result of caching DOM node lookups

(10) Avoid using CSS Expression

(11) Picture Pre-load

(12) Avoid using table,table in the main layout of the page to wait for the content to be fully downloaded before it appears, showing slower than the div+css layout

32, how to control the amount of data during the transmission of Web pages

Enable gzip compression

Maintain good programming habits, avoid repetitive css,javascript code, redundant HTML tags and attributes

33,flash, the advantages and disadvantages of Ajax, in the use of how to choose?

The advantages of Ajax

(1) Searchable type

(2) Openness

(3) Fees

(4) Ease of use

(5) Easy to develop

The benefits of Flash

(1) Multimedia processing

(2) Compatibility

(3) Vector graphics are much more advantageous than Svg,canvas

(4) Client resource scheduling, such as microphone, camera

Web front-end pen question (GO)