02【前端笔试】

02 【前端笔试】

1，css属性overflow属性

定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。

【解析】

• 参数是scroll时候，必会出现滚动条。

• 参数是auto时候，子元素内容大于父元素时出现滚动条。

• 参数是visible时候，溢出的内容出现在父元素之外。

• 参数是hidden时候，溢出隐藏。

2，flash和js通过什么类如何交互?

【解析】

Flash提供了ExternalInterface接口与JavaScript通信

两个方法：call和addCallback

作用：call让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。

• ExternalInterface.addCallback("在js里可调用的flash方法名",flash内方法) //在flash中通过这个方法公开 在js中可调用的flash内的方法;

• ExternalInterface.call("js方法",传给js的参数) //在flash里调用js里的方法

3，用js让一个input的背景颜色变成红色？

【解析】

思路：

• 获取该元素：document.getElementById()/document.getElementsByTagName()

• 通过该元素拥有的属性和方法来改变元素的样式信：style，className 使用style接口一次只能改变一个样式，而使用className则可以同时改变多个样式，当然前提是已经用css定义该类名的相关样式。

• backgroundColor? background-color?

• 在使用点运算符时，浏览器看到“-”就没法正确解析了，在那种情况下，只能将该变量使用驼峰命名法来表示。

• 而使用方括号表示法，"-"被理解为字符串中的内容，该字符串能被正确解析。 eg: inputElement.style.backgroundColor = 'red'; // 这是没问题的

• inputElement.style.background-color = 'red'; // 这是错的，浏览器看不懂啊...

• inputElement.style["background-color"] = 'red'; // 这也是可以的

表示红色有若干种方法:

• 颜色名：red

• 百分数：rgb(100%, 0%, 0%)

• 数值：rgb(255, 0, 0)

• 十六进制：#FF0000

• 简写的十六进制：#F00

4，html5标签？

<canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

<menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。 

command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。

5，css属性position的属性值的描述

static、absolute、fixed、relative。

position:static　无定位

position:absolute　绝对定位 元素框从文档流完全删除，

position:fixed　相对于窗口的固定定位

position:relative　相对定位 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

6，下面程序 输出什么？

（1）Function是引用类型：保存在堆中，变量f1,f2是保存在栈中；

（2）闭包：一个函数（产生新的作用域）定义的局部变量、子函数的作用域在函数内， 但是一旦离开了这个函数，局部变量就无法访问，所有通过返回子函数到一个变量f1的方法，让  f1指向堆中的函数作用域，这样可以使用局部变量i.

  (3)   过程：

   第一次f1()  : f1=Foo()中，先执行Foo(): i = 0,return值返回给f1

 (f1指向子函数   f1()=function(){.....},因为子函数没有 定义i，所以向上找到父函数定义的 i:  )并执行子函数 输出i=0,再自加 i =1(覆盖了父函数Foo 的 i值);

  第二次f1() : 执行的是子函数 Function(){  ..},输出的是父函数 的 i=1,再自加 i =2;

  第一次f2():同第一次f1(),不同的是 f2指向堆中一个新的对象 function(){ ...},所有此i非彼i,输出i=0;如果再次f2(),那么和第二次f1(),一样输出i=1; 

7，值传递：

把一个值类型（也叫基本类型）传递给另一个变量时，其实是分配了一块新的存储空间，在内部改变这个值时，其实在函数外部对这个值没有影响

8，NaN,即非数值（Not a Number）如果不是数字，才返回true

eval：返回字符串表达式中的值

unEscape：返回字符串ASCI码

escape：返回字符的编码

parseFloat：返回实数

8，有关JavaScript中 call和apply的描述

相同点:两个方法产生的 作用是完全一样的

不同点:方法传递的参数不同

对于call（），第一个参数是运行函数的作用域，其余参数都直接传递给函数即传递给函数的参数必须逐个列举出来。

对于apply（），第一个参数是 运行函数的作用域 ，另一个参数是参数数组,可以是Array实例或arguments对象。

9，CSS Sprites

1）.简介

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。

2）.优点

（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

（2）CSS Sprites能减少图片的字节；

（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。

（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

3）.缺点

（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。

（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。

（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。

（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

12，浏览器内核

1）Trident: IE 以Trident 作为内核引擎；

2)  Gecko: Firefox 是基于 Gecko 开发；

3）WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器；

4）Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台--Opera mini

注：2013年2月Opera宣布转向WebKit引擎

注：2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎