(二)阿里巴巴2016前端开发工程师笔试一

1:下列事件哪个不是由鼠标触发的事件()

正确答案: D   你的答案: D (正确)

A、click
B、contextmenu
C、mouseout
D、keydown解析:

click是鼠标点击事件

contextmenu 是当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件

[ 试试在页面中的 <body> 中加入onContentMenu="return false" 就可禁止使用鼠标右键了 ]

mouseout 事件会在鼠标指针移出指定的对象时发生。

keydown 事件会在用户按下一个键盘按键时发生,由键盘触发

2:下面关于CSS布局的描述,不正确的是?

正确答案: D   你的答案: D (正确)

A、块级元素实际占用的宽度与它的 width 属性有关;
B、块级元素实际占用的宽度与它的 border 属性有关;
C、块级元素实际占用的宽度与它的 padding 属性有关;
D、块级元素实际占用的宽度与它的 background 属性有关。

解析:

块级元素的宽度是指块级元素内容区、左右内边距、左右边框和左右外边距的宽度之和。而块级元素内容区的宽度由该元素的width属性来表示(或设置)。(w3c标准盒子模型)

3:下面有关html的描述,不推荐的是?

正确答案: B   你的答案: B (正确)

A、在页面顶部添加 doctype声明;
B、在 </head> … <body> 中间插入 HTML 代码;
C、避免使用 <font> 标签;
D、使用 <table> 元素展现学生成绩表等数据。

解析:

HTML代码是插入在<body>..</body>之间,因为body是页面的主体部分,我们浏览网页的时候除了标题之外的东西都是在body中呈现的;

建议使用CSS样式(代替 <font>)来定义文本的字体、字体颜色、字体尺寸。

4:浏览器在一次 HTTP 请求中,需要传输一个 4097 字节的文本数据给服务端,可以采用那些方式?

正确答案: E   你的答案: E (正确)

A、存入 IndexdDB
B、写入 COOKIE
C、放在 URL 参数
D、写入 Session
E、使用 POST
F、放在 Local Storage解析:

IndexdDB 是 HTML5 的本地存储,把一些数据存储到浏览器(客户端)中,当与网络断开时,可以从浏览器中读取数据,用来做一些离线应用。

Cookie 通过在客户端 ( 浏览器 ) 记录信息确定用户身份,最大为 4 kb 。

url 参数用的是 get 方法,从服务器上获取数据,大小不能大于 2 kb 。

Session 是服务器端使用的一种记录客户端状态的机制 。

post 是向服务器传送数据,数据量较大。

local Storage 也是 HTML5 的本地存储,将数据保存在客户端中(一般是永久的)。

5:下面哪个属性不会让 div 脱离文档流(normal flow)?

正确答案: C   你的答案: C (正确)

A、position: absolute;
B、position: fixed;
C、position: relative;
D、float: left;

解析:

A:position: absolute;

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位;都绝对定位了,肯定脱离了文档流。。

B:position: fixed;

生成绝对定位的元素,相对于浏览器窗口进行定位;相对于浏览器了,也和正常顺序排下来没什么关系。。

C:position: relative;

生成相对定位的元素,相对于其正常位置进行定位。生成相对定位,也就是说还在原本的上下左右之间,上下左右的元素都不变,so这个没有能脱离文档流。。就这个了

D:float: left;都浮动出去了,还上哪保持原位置去。。

6:javascript 语言特性中,有很多方面和我们接触的其他编程语言不太一样,比如说,javascript语言实现继承机制的核心就是 ___1____ ,而不是Java语言那样的类式继承。

Javascript 解析引擎在读取一个Object的属性的值时,会沿着 ____2____向上寻找,如果最终没有找到,则该属性值为_____3_____ ; 如果最终找到该属性的值,则返回

结果。与这个过程不同的是,当javascript解析引擎执行“给一个Object的某个属性赋值”的时候,如果当前Object存在该属性,则改写该属性的值,如果当前的Object本身并不

存在该属性,则赋值该属性的值 。

答案:

1、prototype

2、原型链

3、undefined

7:填写内容让下面代码支持a.name = “name1”; b.name = “name2”;

function obj(name){

_____1_____

}

obj. ______2_____ = "name2";

var a = obj("name1");

var b = new obj;

答案:

1、 if(name){ this.name = name;}return this;

2、prototype.name

解析:

function obj(name){

    if(name){  //判断obj实例有没有name属性,如果有则给this对象,如果没有就从原型上找name 。

        this.name = name;

    }

    return this;

}

obj.prototype.name = "name2";

var a = obj("name1");

var b = new obj;

console.log(a.name); // name1

console.log(window.name); // name1

console.log(b.name); // name2

//一般函数直接调用,默认this执行全局window|global

//通过obj(‘name1‘)调用,返回this引用,并传给a, 此时a等于window对象,即可输出属性name值

//new操作, new obj 等价于 new obj() ,实例化一个对象,这时this指向obj,要拿到b.name的值

//需要保证name属性存在,属性查找原则是先查找当前实例有没有属性,如果有就直接使用,如果

//没有就到原型上面找,再没有就接着原型链一步一步,这里为了和a.name作属性区别,使用了if(name)有条件地构建this的属性name

//所以,现在实例name属性提供给a使用,原型上的name提供给b使用。

8:输出对象中值大于2的key的数组

var data = {a: 1, b: 2, c: 3, d: 4};

Object.keys(data).filter(function(x) { return ____1_____;})

期待输出:[“c”,”d”]

答案:data[x]>2

解析:

Object.keys(Object)

Array.filter(function)

Object是包含属性和方法的对象, 可以是创建的对象或现有文档对象模型 (DOM) 对象。

Object.keys(object)的返回值是 一个数组,其中包含对象的可枚举属性和方法的名称。

Array.filter(function)对数组进行过滤返回符合条件的数组。

Object.keys(data)的返回值为数组["a","b","c","d"],经过 filter(function(x) { return ; })过滤,返回值大于2的key的数组。x为返回数组的属性名称即“a"、"b"、"c"、“d”,则对应的属性值为data[x],比较语句为data[x]>2。

9:请实现一个fibonacci函数,要求其参数和返回值如下所示:

/**

 *@desc: fibonacci

 *@param: count {Number}

 *@return: result {Number} 第count个fibonacci值,计数从0开始

  fibonacci数列为:[1, 1, 2, 3, 5, 8, 13, 21, 34 …]

  则getNthFibonacci(0)返回值为1

  则getNthFibonacci(4)返回值为5

 */

function getNthFibonacci(count) {

}

答案:

此题应该避免使用递归的方法,因为当count较大时,递归的方法耗时较长。

故考虑使用迭代法,可以使用数组记录每一项。

但此题只需要用到前面两项,从节约空间的角度讲不需要开辟数组。

function getNthFibonacci(count) {
    if(count<0) return 0;
    if(count<=1) return 1;
    var first = 1;
    var second = 1;
    var third = 0;
    for(var i = 2; i <= count; i++) {
        third = first + second;
        first = second;
        second = third;
    }
    return third;
}

10:实现如下页面布局。核心区域左侧自适应,右侧固定宽度 200px

答案:

css代码:

body {
    margin: 0;
}
.fn-clear:after {
    content: " ";
    clear: both;
    display: block;
    font-size: 0;
    visibility: hidden;
    height: 0;
}
.fn-clear {
    zoom: 1;
}
.container {
    padding: 10px;
}
.header {
    background: #eee;
    position: relative;
    margin-bottom: 10px;
}
.logo {
    width: 100px;
    height: 100px;
    float: left;
    background: #f60;
}
.username {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.main {
    margin-bottom: 10px;
}
.side-bar {
    width: 200px;
    float: right;
    background: #ccc;
}
.content {
    margin-right: 200px;
    background: #f6f6f6;
}
.footer {
    background: #999;
}
html代码:
<div class="container">
        <div class="header fn-clear">
            <div class="logo">logo</div>
            <div
  class="username">[email protected]</div>
        </div>
        <div class="main">
            <div
  class="side-bar">menu</div>
            <div class="content">左侧内容</div>
        </div>
        <div class="footer">
            footer
        </div>
</div>
时间: 2024-10-17 07:27:38

(二)阿里巴巴2016前端开发工程师笔试一的相关文章

试卷: 阿里巴巴2016前端开发工程师笔试(一)

4 浏览器在一次 HTTP 请求中,需要传输一个 4097 字节的文本数据给服务端,可以采用那些方式? 正确答案: E   你的答案: B (错误) 存入 IndexdDB 写入 COOKIE 放在 URL 参数 写入 Session 使用 POST 放在 Local Storage IndexdDB 是 HTML5 的本地存储,把一些数据存储到浏览器(客户端)中,当与网络断开时,可以从浏览器中读取数据,用来做一些离线应用. Cookie 通过在客户端 ( 浏览器 ) 记录信息确定用户身份,最大

前端试题-2016年阿里前端开发工程师笔试题6,7,8题的解法

2016年阿里前端开发工程师笔试题(只有题,没有答案): http://www.cnblogs.com/sdgf/archive/2015/08/18/4740698.html 第6题:请在____处填写答案,从而达到题目的要求 var arr = [1, 2, 3, 4, 5]; var result = arr.sort(_______________________________).join("+"); console.log(result); 解答:在排序当中,如果需要按照某

前端开发工程师如何在2013年里提升自己【转】--2016已更新升级很多何去何从?

大部分人非常在意个人在技术上的提升.但是保持对新技术的了解是一项不小的挑战, 毕竟我们需要的信息在数量上过于庞大.2012年里,伴随着前端发展的是大量的革命性突破和对前端的重新定义. 我们在实践的路上飞速前进,具体的进步体现在使用抽象化,优秀的代码质量,维护性上的提升以及更好的性能.如果你实在忙到没有时间来跟上最新的技术,不用担心. 随着假日的来临,我们就有了一些空闲的时间可以自己支配,我想,如果我把我收集的前端相关的精品讨论列表分享出来,那一定会对大家有一些帮助.你不需要把所有的都阅读一遍,但

Web前端开发工程师养成计划【转载】

Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国日渐成熟才解放了一直以来姥姥不疼舅舅不爱的前端开发工程师们. 有没有发现从09年下半年到现在全中国的互联网公司都在招聘前端开发工程师?如果你注意到了,那么恭喜你,你已经拥有那么一点点预测互联网职场动向的能力. 可能令你感到遗憾的是你从没从事过前端开发工作,不过没关系,只要你肯努力,一切都是可以学会的

HTML5前端开发工程师工资为什么那么高?

现代社会的就业压力可以说是非常的大,大学毕业生一抓一大把,要是没有一技之长很难在这个社会中立足,所以为了能够跟上时代的脚步,就必须掌握一个特长,就目前的发展来说,企业对于HTML5前端开发人才需求量可以说是非常的大.那么HTML5前端开发工程师工资为什么那么高呢? 越来越多的企业开始注重到用户体验,小到企业网站.个人主页,大到政府部门,都是通过网站向外界展示形象.传播信息,网站离不开HTML5前端开发人员,所以学习HTML5前端开发在当前社会里非常受用,工资也就越来越高. HTML5前端开发工程

麦子学院-Web前端开发工程师系列培训教程

HTML+CSS基础入门1.课程介绍2.html的语法3.html的基本结构4.html的文档设置标记上(格式标记)5.html的文档设置标记下(文本标记)6.html图像标记img7.html超链接的使用8.html表格相关的标记9.html表格实战<简单的网页布局>10.html框架详解与框架布局实战11.HTML表单设计(上)12.HTML表单设计(下)13.使用CSS样式的方式14.定义CSS样式(CSS选择器)15.CSS常用属性(颜色属性)16.css常用属性(字体相关属性)17.

Web前端开发工程师需要掌握哪些核心技能?

Web前端开发所涉及的内容主要包括W3C标准中的结构.行为和表现,那么这三项中我们需要掌握的核心技能是什么呢? 1.开发语言 HTML发展历史有二十多年,历经多次版本更新,HTML5和CSS3的出现又是一次革新.有些人认为前端开发要掌握的技能简单,不就是制作网页 嘛,其实不然,web前端需要掌握的核心语言xHTML+CSS+JavaScript,JavaScript作为最难的语言之一,许多编程高手也不敢妄 自菲薄自封精通.由于JavaScript与html的差异性,以及静动态分开处理的一些好处.

浅谈前端开发工程师与美工的区别

一. 什么是美工?     美工:意为美术工程师(Art Engineer),一般出身于艺术美术院校的艺术设计专业居多.     根据工作性质美工一般分为平面美工.三维美工.网页美工三大类.     平面美工是由美工用Fireworks 或者 Photoshop 设计出平面外观.     三维美工是由美工用3DMAX等工具进行三维角色模型设计,道具模型设计,环境场景模型设计,包装设计等.     网页美工是美工用Dreamwerver等网页编辑软件把已经设计好的平面效果图,制做成HTML静态网页

Web前端开发工程师需要掌握哪些核心技能

Web前端开发所涉及的内容主要包括W3C标准中的结构.行为和表现,那么这三项中我们需要掌握的核心技能是什么呢? 1.开发语言 HTML发展历史有二十多年,历经多次版本更新,HTML5和CSS3的出现又是一次革新.有些人认为前端开发要掌握的技能简单,不就是制作网页 嘛,其实不然,web前端需要掌握的核心语言xHTML+CSS+JavaScript,JavaScript作为最难的语言之一,许多编程高手也不敢妄 自菲薄自封精通.由于JavaScript与html的差异性,以及静动态分开处理的一些好处.