Web front-end development written collection (JavaScript 1) go

Original source: Http://hi.baidu.com/jinhui04/item/eaf40034fa00def597f88dbc

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 of 5-20var 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, value is the number of occurrences of this character var str = "Abcdefgaddda"; var obj = {};for (var i = 0, L = str.length; I &A Mp;lt; 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 () {};D Og.prototype = new Animal ("Buddy");D Og.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.

<! doctype html public  "-//w3c//dtd xhtml 1.0 transitional//en"   "HTTP// Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

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<len; i++) {if (Str.charcodeat (i) > 255) by tes++;} 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<len; i++) {var v = thi S[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

<input type= "button" onclick= "Showinfo (this);" value= "click"/>

(2) Constructors

function Animal (name, color) {this.name = Name;this.color = color;}

(3)

<input type= "button" id= "Text" value= "click"/><script type= "Text/javascript" >var btn = document.getElementById ("text"); Btn.onclick = function () {alert (this.value);//This is the button element}</script>

(4) Use the This keyword in CSS expression expressions

<table width= "100px" height= "100px" ><tr><td><div style= "width:expression ( This.parentNode.width); " >div element</div></td></tr></table>

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

El.style.display = ""; El.style.display = "none";

El is the DOM element to manipulate

How to detect a variable in 13,javascript is a string type? Please write out the 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"

<! doctype html public  "-//w3c//dtd html 4.01 transitional//en"   "HTTP// Www.w3.org/TR/html4/loose.dtd ">

15, supplemental code, mouse click Button1 after you move Button1 to Button2 back <div> <input type= "button" id = "button1″value=" 1″onclick= "???" > <input type= "button" id = "button2″value=" 2″/"> </div>

<div><input type= "button" id = "Button1" value= "1" onclick= "movebtn (this);" ><input type= "button" id = "Button2" value= "2"/></div><script type= "Text/javascript" >function MOVEBTN (obj) {var clone = Obj.clonenode (true); var parent = Obj.parentnode;parent.appendchild (clone); Parent.removechild (obj);} </script>

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.clon E (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)

<! doctype html public  "-//w3c//dtd xhtml 1.0 transitional//en"   "HTTP// Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Web front end development written exam (JavaScript 1) goto