1、以下为 Web 前端开发笔试题集锦之 Javascript 篇，移步 HTML/CSS 篇1, 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20var reg = /a-zA-Za-zA-Z_0-94,19$/;reg.test(“a1a_a1a_a1a_a1a_“);2，截取字符串 abcdefg 的 efgvar str = “abcdefg“;if (/efg/.test(str) var efg = str.substr(str.indexOf(“efg“), 3);alert(efg);3，判断一个字符串中出现次数最多的字符，统计这个次数/
2、将字符串的字符保存在一个 hash table 中，key 是字符，value 是这个字符出现的次数var str = “abcdefgaddda“;var obj = ;for (var i = 0, l = str.length; i l; i+) var key = stri;if (!objkey) objkey = 1; else objkey+;/*遍历这个 hash table，获取 value 最大的 key 和 value*/var max = -1;var max_key = “;var key;for (key in obj) if (max 获取 outerHMTL d
3、iv background:#0000FF;width:100px;height:100px; span background:#00FF00;width:100px;height:100px; p background:#FF0000;width:100px;height:100px; SPANDIV SPANP function getOuterHTML(id)var el = document.getElementById(id);var newNode = document.createElement(“div“);document.appendChild(newNode);var c
4、lone = el.cloneNode(true);newNode.appendChild(clone);alert(newNode.innerHTML);document.removeChild(newNode);getOuterHTML(“a“);8，编写一个方法 求一个字符串的字节长度假设：一个英文字符占用一个字节，一个中文字符占用两个字节function GetBytes(str)var len = str.length;var bytes = len;for(var i=0; i 255) bytes+;return bytes;alert(GetBytes(“你好,as“);9，编
5、写一个方法 去掉一个数组的重复元素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（2）构造函数function Animal(name, color) this.name = name;this.color = color;（3）var btn = document.getElementById(“text“);btn.onclick = function() alert(this.value);
6、/此处的 this 是按钮元素（4）CSS expression 表达式中使用 this 关键字div element12，如何显示/隐藏一个 DOM 元素？el.style.display = “;el.style.display = “none“;el 是要操作的 DOM 元素13，JavaScript 中如何检测一个变量是一个 String 类型？请写出函数实现String 类型有两种生成方式：(1)Var str = “hello world”;(2)Var str2 = new String(“hello world”);function IsString(str)return (t
7、ypeof str = “string“ | str.constructor = String);var str = “;alert(IsString(1);alert(IsString(str);alert(IsString(new String(str);15，补充代码，鼠标单击 Button1后将 Button1移动到 Button2的后面 function moveBtn(obj) var clone = obj.cloneNode(true);var parent = obj.parentNode;parent.appendChild(clone);parent.removeChil
8、d(obj);16，JavaScript 有哪几种数据类型简单：Number，Boolean ，String，Null，Undefined复合：Object，Array，Function17，下面 css 标签在 JavaScript 中调用应如何拼写，border-left-color ，-moz-viewportborderLeftColormozViewport19，如何控制 alert 中的换行n alert(“pnp”);20，请实现，鼠标点击页面中的任意标签，alert 该标签的名称 （注意兼容性）鼠标点击页面中的任意标签，alert 该标签的名称 div background:#
9、0000FF;width:100px;height:100px; span background:#00FF00;width:100px;height:100px; p background:#FF0000;width:100px;height:100px; document.onclick = function(evt)var e = window.event | evt;var tag = e“target“ | e“srcElement“;alert(tag.tagName);SPANDIV SPANP 21，请编写一个 JavaScript 函数 parseQueryString，它的
10、用途是把 URL 参数解析为一个对象，如：var url = “http:/ parseQueryString(url)var params = ;var arr = url.split(“?“);if (arr.length = 1)return params;arr = arr1.split(“for(var i=0, l=arr.length; il; i+)var a = arri.split(“=“);paramsa0 = a1;return params;var url = “http:/ ps = parseQueryString(url);alert(ps“key1“);22，
11、ajax 是什么? ajax 的交互模型? 同步和异步的区别? 如何解决跨域问题?Ajax 是多种技术组合起来的一种浏览器和服务器交互技术，基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的 http 调用，并且用收到的数据来更新一个当前 web 页面而不必刷新整个页面。该技术能够改进客户端的体验。包含的技术：XHTML：对应 W3C 的 XHTML 规范，目前是 XHTML1.0。CSS：对应 W3C 的 CSS 规范，目前是 CSS2.0DOM：这里的 DOM 主要是指 HTML DOM，XML DOM 包括在下面的 XML 中JavaScript：对应于 ECMA 的 ECMAS
12、cript 规范XML：对应 W3C 的 XML DOM、XSLT、XPath 等等规范XMLHttpRequest：对应 WhatWG 的 Web Applications1.0规范（http:/whatwg.org/specs/web-apps/current-work/）AJAX 交互模型同步：脚本会停留并等待服务器发送回复然后再继续异步：脚本允许页面继续其进程并处理可能的回复跨域问题简单的理解就是因为 JS 同源策略的限制， 域名下的 JS 无法操作 或 下的对象，具体场景如下：PS：（1）如果是端口或者协议造成的跨域问题前端是无能为力的(2) 在跨域问题上，域仅仅通过 URL 的首
13、部来识别而不会尝试判断相同的 IP 地址对应的域或者两个域是否对应一个 IP前端对于跨域的解决办法：(1) document.domain+iframe(2) 动态创建 script 标签24，请给出异步加载 js 方案，不少于两种默认情况 javascript 是同步加载的，也就是 javascript 的加载时阻塞的，后面的元素要等待javascript 加载完毕后才能进行再加载，对于一些意义不是很大的 javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。异步加载方式：(1) defer，只支持 IE(2) async：(3) 创建 script，插入到 DOM
14、中，加载完毕后 callBack，见代码：function loadScript(url, callback)var script = document.createElement(“script“)script.type = “text/javascript“;if (script.readyState) /IEscript.onreadystatechange = function()if (script.readyState = “loaded“ |script.readyState = “complete“)script.onreadystatechange = null;callba
15、ck(); else /Others: Firefox, Safari, Chrome, and Operascript.onload = function()callback();script.src = url;document.body.appendChild(script);25，请设计一套方案，用于确保页面中 JS 加载完全。var n = document.createElement(“script“);n.type = “text/javascript“;/以上省略部分代码/ie 支持 script 的 readystatechange 属性(IE support the rea
16、dystatechange 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); /回调函数;/省略部分代码/safari 3.x supports the load event for script nodes(DOM2)n.addEventListener(load,function()f(id,url););/fi
17、refox and opera support onload(but not dom2 in ff) handlers for/script nodes. opera, but no ff, support the onload event for link/nodes.elsen.onload = function()f(id,url);26，js 中如何定义 class,如何扩展 prototype?Ele.className = “*”; /*在 css 中定义，形式如下：.* A.prototype.B = C;A 是某个构造函数的名字B 是这个构造函数的属性C 是想要定义的属性的值2
18、7，如何添加 html 元素的事件,有几种方法.（1） 为 HTML 元素的事件属性赋值（2） 在 JS 中使用 ele.on* = function() （3） 使用 DOM2的添加事件的方法 addEventListener 或 attachEvent28，documen.write 和 innerHTML 的区别document.write 只能重绘整个页面innerHTML 可以重绘页面的一部分30，js 的基础对象有那些, window 和 document 的常用的方法和属性列出来String,Number,BooleanWindow:方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open属性：name,parent,screenLeft,screenTop,self,top,statusDocument方法：createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln属性：cookie,doctype,domain,documentElement,readyState,URL,
