网页前端开发笔试题.docx
- 文档编号:13140519
- 上传时间:2023-06-11
- 格式:DOCX
- 页数:9
- 大小:21.11KB
网页前端开发笔试题.docx
《网页前端开发笔试题.docx》由会员分享,可在线阅读,更多相关《网页前端开发笔试题.docx(9页珍藏版)》请在冰点文库上搜索。
网页前端开发笔试题
网页前端开发笔试题
网页前端开发笔试题
说说网页前端开发工程师笔试题目HTML&&CSS
1.Doctype?
严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
行内元素有哪些?
块级元素有哪些?
CSS的盒模型?
2.CSS引入的方式有哪些?
link和@import的区别?
3.CSS选择符有哪些?
哪些属性可以继承?
优先级?
内联和important哪个优先级高?
4.经常遇到的浏览器的兼容性有哪些?
怎么会出现?
解决方法是什么?
5.如何居中一个浮动元素?
6.HTML5和CSS3的了解情况7.你怎么来实现下面这个设计图
Javascript
1.怎样添加、移除、移动、复制、创建和查找节点
2.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别3.面向对象编程:
b怎么继承a4.看看下面alert的结果是什么functionb(x,y,a){arguments[2]=10;alert(a);}
b(1,2,3);
如果函数体改成下面,结果又会是什么?
a=10;
alert(arguments[2]);
5.请编写一个JavaScript函数parseQueryString,它的用途是把URL参数解析为一个对象,如:
varurl=”key2=2…..”varobj=parseQueryString(url);alert(obj.key0)//输出0(来自淘宝网校园招聘笔试题)
6.ajax是什么?
ajax的交互模型?
同步和异步的区别?
如何解决跨域问题?
7.什么是闭包?
下面这个ul,如何点击每一列的时候alert其index?
这是第一条这是第二条这是第三条
8.最近看的一篇Javascript的文章9.你如何去实现这个Tabview
10.常使用的库有哪些?
常用的前端开发工具?
开发过什么应用或组件?
11.性能-Yslow
这份面试题涵盖了很多方面的内容,基础的html+css,语义化,js的基本功,js的库和框架,以及前端工程师的学习能力.不错!
如果可以搞定这份面试题,你的月薪基本上上万了~~
扩展阅读:
Web前端开发笔试题集锦
[笔试问答]Web前端开发笔试题集锦
以下为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的efgvarstr="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<>
/*遍历这个hashtable,获取value最大的key和value*/varmax=-1;varmax_key="";varkey;
for(keyinobj){if(max<>
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)innerTexttextContentouterHTMLIE:
支持innerText,outerHTMLFF:
支持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就可以了。
SPANDIVSPANP
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;ivarv=this;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,Function17,下面css标签在JavaScript中调用应如何拼写,border-left-color,-moz-viewportborderLeftColormozViewport
18,JavaScript中如何对一个对象进行深度clonefunctioncloneObject(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该标签的名称.(注意兼容性)SPANDIVSPANP21,请编写一个JavaScript函数parseQueryString,它的用途是把URL参数解析为一个对象,如:
varurl=“;key1=1&key2=2″;functionparseQueryString(url){varparams={};
vararr=url.split("?
");if(arr.lengthfor(vari=0,l=ul.childNodes.length;i<>
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,andOperascript.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或attachEvent28,documen.write和innerHTML的区别document.write只能重绘整个页面innerHTML可以重绘页面的一部分29,多浏览器检测通过什么?
(1)navigator.userAgent
(2)不同浏览器的特性,如addEventListener
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,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)客户端资源调度,比如麦克风,摄像头
笔试问答]软件开发阶段笔试题
软件开发的阶段,软件测试的阶段,以及每个阶段的任务;{RAD(rapapplicationdevelopment),就是软件开发过程中的一个重要模型,称为快速应用开发模型。
其模型构图形似字母V,所以又称V模型。
他通过开发和测试同时进行的方式来缩短开发周期,提高开发效率。
V模型大体可以划分为下面几个不同的阶段步骤,既需求分析、概要设计、祥细设计、编码、单元测试、集成测试、系统测试、验收测试。
}⑴需求分析:
明确客户需要,按需求写出规格文档说明书;⑵概要设计:
构建框架,描述模块功能及接口;⑶祥细设计:
设计模块的具体实现方式及模块的组合方式(把程序的具体实现的功能,现象等描述出来);⑷编码:
按照祥细设计好的模块功能表,编写出实际的代码;①单元测试(模块测试):
按照设定好的最小测试单元进行按单元测试,主要是测试程序代码;②集成测试(也叫组装测试,联合测试):
集成测试是在软件系统集成过程中所进行的测试,其主要目的是检查软件单位之间的接口是否正确;③系统测试:
是对已经集成好的软件系统进行彻底的测试,以验证软件系统的正确性和性能等满足其指定的要求;④验收测试:
验收测试的目的是确保软件准备就绪,并且可以让最终用户将其用于执行软件的既定功能和任务。
友情提示:
本文中关于《网页前端开发笔试题》给出的范例仅供您参考拓展思维使用,网页前端开发笔试题:
该篇文章建议您自主创作。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 前端 开发 笔试