完整word版Web前端开发笔试题集锦已读解析.docx
- 文档编号:23189645
- 上传时间:2023-05-15
- 格式:DOCX
- 页数:15
- 大小:139.75KB
完整word版Web前端开发笔试题集锦已读解析.docx
《完整word版Web前端开发笔试题集锦已读解析.docx》由会员分享,可在线阅读,更多相关《完整word版Web前端开发笔试题集锦已读解析.docx(15页珍藏版)》请在冰豆网上搜索。
完整word版Web前端开发笔试题集锦已读解析
Web前端开发笔试题集锦
来源:
过来人求职网 时间:
2011-12-06
以下为Web前端开发笔试题集锦之Javascript篇,移步HTML/CSS篇
1,判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母、数字、下划线,总长度为5-20
varreg=/^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
reg.test("a1a__a1a__a1a__a1a__");
2,截取字符串abcdefg的efg
varstr="abcdefg";
if(/efg/.test(str)){
varefg=str.substr(str.indexOf("efg"),3);
alert(efg);
}
3,判断一个字符串中出现次数最多的字符,统计这个次数
//将字符串的字符保存在一个hashtable中,key是字符,value是这个字符出现的次数
varstr="abcdefgaddda";
varobj={};
for(vari=0,l=str.length;i varkey=str[i]; if(! obj[key]){ obj[key]=1; }else{ obj[key]++; } } /*遍历这个hashtable,获取value最大的key和value*/ varmax=-1; varmax_key=""; varkey; for(keyinobj){ if(max max=obj[key]; max_key=key; } } alert("max: "+max+"max_key: "+max_key); 4,IE与FF脚本兼容性问题 (1)window.event: 表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象 (2)获取事件源 IE用srcElement获取事件源,而FF用target获取事件源 (3)添加,去除事件 IE: element.attachEvent(“onclick”,function)element.detachEvent(“onclick”,function) FF: element.addEventListener(“click”,function,true)element.removeEventListener(“click”,function,true) (4)获取标签的自定义属性 IE: div1.value或div1[“value”] FF: 可用div1.getAttribute(“value”) (5)document.getElementByName()和document.all[name] IE;document.getElementByName()和document.all[name]均不能获取div元素 FF: 可以 (6)input.type的属性 IE: input.type只读 FF: input.type可读写 (7)innerTexttextContentouterHTML IE: 支持innerText,outerHTML FF: 支持textContent (8)是否可用id代替HTML元素 IE: 可以用id来代替HTML元素 FF: 不可以 这里只列出了常见的,还有不少,更多的介绍可以参看JavaScript在IE浏览器和Firefox浏览器中的差异总结 5,规避javascript多人开发函数重名问题 (1)可以开发前规定命名规范,根据不同开发人员开发的功能在函数前加前缀 (2)将每个开发人员的函数封装到类中,调用的时候就调用类的函数,即使函数重名只要类名不重复就ok 6,javascript面向对象中继承实现 javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链,简单的代码如下: functionAnimal(name){ this.name=name; } Animal.prototype.getName=function(){alert(this.name)} functionDog(){}; Dog.prototype=newAnimal("Buddy"); Dog.prototype.constructor=Dog; vardog=newDog(); 7,FF下面实现outerHTML FF不支持outerHTML,要实现outerHTML还需要特殊处理 思路如下: 在页面中添加一个新的元素A,克隆一份需要获取outerHTML的元素,将这个元素append到新的A中,然后获取A的innerHTML就可以了。 SPANDIV SPAN P 8,编写一个方法求一个字符串的字节长度 假设: 一个英文字符占用一个字节,一个中文字符占用两个字节 functionGetBytes(str){ varlen=str.length; varbytes=len; for(vari=0;i if(str.charCodeAt(i)>255)bytes++; } returnbytes; } alert(GetBytes("你好,as")); 9,编写一个方法去掉一个数组的重复元素 vararr=[1,1,2,3,3,2,1]; Array.prototype.unique=function(){ varret=[]; varo={}; varlen=this.length; for(vari=0;i varv=this[i]; if(! o[v]){ o[v]=1; ret.push(v); } } returnret; }; alert(arr.unique()); 10,写出3个使用this的典型应用 (1)在html元素事件属性中使用,如 (2)构造函数 functionAnimal(name,color){ this.name=name; this.color=color; } (3) (4)CSSexpression表达式中使用this关键字 divelement 12,如何显示/隐藏一个DOM元素? el.style.display=""; el.style.display="none"; el是要操作的DOM元素 13,JavaScript中如何检测一个变量是一个String类型? 请写出函数实现 String类型有两种生成方式: (1)Varstr=“helloworld”; (2)Varstr2=newString(“helloworld”); functionIsString(str){ return(typeofstr=="string"||str.constructor==String); } varstr=""; alert(IsString (1)); alert(IsString(str)); alert(IsString(newString(str))); 14,网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示“××年还剩××天××时××分××秒” 15,补充代码,鼠标单击Button1后将Button1移动到Button2的后面 16,JavaScript有哪几种数据类型 简单: Number,Boolean,String,Null,Undefined 复合: Object,Array,Function 17,下面css标签在JavaScript中调用应如何拼写,border-left-color,-moz-viewport borderLeftColor mozViewport 18,JavaScript中如何对一个对象进行深度clone functioncloneObject(o){ if(! o||'object'! ==typeofo){ returno; } varc='function'===typeofo.pop? []: {}; varp,v; for(pino){ if(o.hasOwnProperty(p)){ v=o[p]; if(v&&'object'===typeofv){ c[p]=Ext.ux.clone(v); } else{ c[p]=v; } } } returnc; }; 19,如何控制alert中的换行 \nalert(“p\np”); 20,请实现,鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性) SPANDIV SPAN P 21,请编写一个JavaScript函数parseQueryString,它的用途是把URL参数解析为一个对象,如: varurl=“ functionparseQueryString(url){ varparams={}; vararr=url.split("? "); if(arr.length<=1) returnparams; arr=arr[1].split("&"); for(vari=0,l=arr.length;i vara=arr[i].split("="); params[a[0]]=a[1]; } returnparams; } varurl=" varps=parseQueryString(url); alert(ps["key1"]); 22,ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题? Ajax是多种技术组合起来的一种浏览器和服务器交互技术,基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用,并且用收到的数据来更新一个当前web页面而不必刷新整个页面。 该技术能够改进客户端的体验。 包含的技术: XHTML: 对应W3C的XHTML规范,目前是XHTML1.0。 CSS: 对应W3C的CSS规范,目前是CSS2.0 DOM: 这里的DOM主要是指HTMLDOM,XMLDOM包括在下面的XML中 JavaScript: 对应于ECMA的ECMAScript规范 XML: 对应W3C的XMLDOM、XSLT、XPath等等规范 XMLHttpRequest: 对应WhatWG的WebApplications1.0规范(http: //whatwg.org/specs/web-apps/current-work/) AJAX交互模型 同步: 脚本会停留并等待服务器发送回复然后再继续 异步: 脚本允许页面继续其进程并处理可能的回复 跨域问题简单的理解就是因为JS同源策略的限制,域名下的JS无法操作或下的对象,具体场景如下: PS: (1)如果是端口或者协议造成的跨域问题前端是无能为力的 (2)在跨域问题上,域仅仅通过URL的首部来识别而不会尝试判断相同的IP地址对应的域或者两个域是否对应一个IP 前端对于跨域的解决办法: (1)document.domain+iframe (2)动态创建script标签 23,什么是闭包? 下面这个ul,如何点击每一列的时候alert其index? 这是第一条 这是第二条 这是第三条 内部函数被定义它的函数的外部区域调用的时候就产生了闭包。 (functionA(){ varindex=0; varul=document.getElementById("test"); varobj={}; for(vari=0,l=ul.childNodes.length;i if(ul.childNodes[i].nodeName.toLowerCase()=="li"){ varli=ul.childNodes[i]; li.onclick=function(){ index++; alert(index); } } } })(); 24,请给出异步加载js方案,不少于两种 默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。 异步加载方式: (1)defer,只支持IE (2)async: (3)创建script,插入到DOM中,加载完毕后callBack,见代码: functionloadScript(url,callback){ varscript=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,andOpera script.onload=function(){ callback(); }; } script.src=url; document.body.appendChild(script); } 25,请设计一套方案,用于确保页面中JS加载完全。 varn=document.createElement("script"); n.type="text/javascript"; //以上省略部分代码 //ie支持script的readystatechange属性(IEsupportthereadystatechangeeventforscriptandcssnodes) if(ua.ie){ n.onreadystatechange=function(){ varrs=this.readyState; if('loaded'===rs||'complete'===rs){ n.onreadystatechange=null; f(id,url);//回调函数 } }; //省略部分代码 //safari3.xsupportstheloadeventforscriptnodes(DOM2) n.addEventListener('load',function(){ f(id,url); }); //firefoxandoperasupportonload(butnotdom2inff)handlersfor //scriptnodes.opera,butnoff,supporttheonloadeventforlink //nodes. }else{ n.onload=function(){ f(id,url); }; } 26,js中如何定义class,如何扩展prototype? Ele.className=“***”;//***在css中定义,形式如下: .***{…} A.prototype.B=C; A是某个构造函数的名字 B是这个构造函数的属性 C是想要定义的属性的值 27,如何添加html元素的事件,有几种方法. (1)为HTML元素的事件属性赋值 (2)在JS中使用ele.on***=function(){…} (3)使用DOM2的添加事件的方法addEventListener或attachEvent 28,documen.write和innerHTML的区别 document.write只能重绘整个页面 innerHTML可以重绘页面的一部分 29,多浏览器检测通过什么? (1)navigator.userAgent (2)不同浏览器的特性,如addEventListener 30,js的基础对象有那些,window和document的常用的方法和属性列出来 String,Number,Boolean Window: 方法: setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open 属性: name,parent,screenLeft,screenTop,self,top,status Document 方法: createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln 属性: cookie,doctype,domain,documentElement,readyState,URL, 31,前端开发的优化问题 (1)减少http请求次数: cssspirit,datauri (2)JS,CSS源码压缩 (3)前端模板JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数 (4)用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能 (5)用setTimeout来避免页面失去响应 (6)用hash-table来优化查找 (7)当需要设置的样式很多时设置className而不是直接操作style (8)少用全局变量 (9)缓存DOM节点查找的结果 (10)避免使用CSSExpression (11)图片预载 (12)避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢 32,如何控制网页在网络传输过程中的数据量 启用GZIP压缩 保持良好的编程习惯,避免重复的CSS,JavaScript代码,多余的HTML标签和属性 33,Flash、Ajax各自的优缺点,在使用中如何取舍? Ajax的优势 (1)可搜索型 (2)开放性 (3)费用 (4)易用性 (5)易于开发 Flash的优势 (1)多媒体处理 (2)兼容性 (3)矢量图形比SVG,Canvas优势大很多 (4)客户端资源调度,比如麦克风,摄像头
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 完整 word Web 前端 开发 笔试 集锦 解析