题目总结
求工作Orz
1.
函数声明:
函数表达式:
在后续的调用中,效果是没有差别的;但是他们的区别在于解析器对这两种定义读取的顺序不同;
解析器会事先读取函数声明,并在执行后续的代码之前使之可以使用,即使你把函数声明放在代码的末端;
而对于函数表达式,解析器只有在读到函数表达式所在那行的时候才执行
2.
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。
relative 生成相对定位的元素,相对于其正常位置进行定位。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)
3.
BFC(block formatting context)中相邻的两个block-level的盒,上一个box的下边距会跟下一个box的上边距发生叠加,即两者取最大的,而不是相加;
当把元素的display属性设为inline-block,它们都位于IFC当中,所以不论水平还是竖直方向,都不会发生叠加;
当把元素的float属性设为left,它们都不在正常流中,更不在BFC中了,同样不论水平还是竖直方向,都不会发生叠加;
当一个容器既没有border又没有padding时,它的第一个子box的的margin也能跟它的上一个容器的margin发生叠加;
有padding(内边距)的时候,上一节的情况不发生;
4.
background-color:blue; /firefox/
background-color:red\9; /all ie/
background-color:yellow\0; /ie8/
+background-color:pink; /ie7/
_background-color:orange; /ie6/
5.
浏览器内核:
- Trident(IE内核)
- Gecko(Firefox内核)
- Presto(Opera前内核) (已废弃)
- Webkit(Safari内核,Chrome内核原型,开源)
6.
null只和undefined相等,接下来依次有number都转number,有boolean也都转number,有string都转string,对象互相不等,NaN互相不等就可以了
7.
当遮罩被点击时要自动关闭
8.一个简单的图片轮播
9.
JavaScript是一门什么样的语言,它有哪些特点?
10.
JavaScript的数据类型都有什么?
11.
已知ID的Input输入框,希望获取这个输入框的输入值,怎么做?(不使用第三方框架)
12.
希望获取到页面中所有的checkbox怎么做?(不使用第三方框架)
13.
设置一个已知ID的DIV的html内容为xxxx,字体颜色设置为黑色(不使用第三方框架)
14.
当一个DOM节点被点击时候,我们希望能够执行一个函数,应该怎么做?
如何阻止事件冒泡?
+什么是事件冒泡?
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document(有些浏览器是window).
+如何阻止?
比如这个页面,分为三层,divone是最外层,divtwo是中间层,hr_three是最里层,他们都有各自的click事件,最里层a标签还有href属性。
运行页面,点击”点击我”会依次弹出:我是最里层->我是中间层->我是最外层->然后再链接到百度,这就是事件冒泡,本来我只点击id为hr_three的标签,但是却执行了三个alert操作。
事件冒泡过程:hr_three->divtwo->divone,从最里层冒泡到最外层。
如何来阻止?
+event.stopPropagetion()
再点击”点击我”,会弹出:我是最里层,然后链接到百度
+returnfalse;
如果头部加入的是以下代码
再点击”点击我”,会弹出:我是最里层,但不会执行链接到百度页面
由此可以看出:
+event.stopPropagetion();
事件处理过程中,阻止了事件冒泡,但不会阻止默认行为(它就执行了超链接的跳转)
+returnfalse;
事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)
+event.preventDefault();
如果把它放在头部A标签的click事件中,点击”点击我”
会发现它依次弹出:我是最里层->我是中间层->我是最外层,但最后没有跳到百度
它的作用是:事件处理过程中,不阻止事件冒泡,但阻止默认行为(它只执行所有弹框,却没有执行超链接跳转)
15.
什么是Ajax和JSON,它们的优缺点
16.
看下列代码输出为何?解释原因。
Undefined是一个只有一个值的数据类型,这个值就是“undefined”,在使用var声明变量但并未对其赋值进行初始化时,这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。
|
|
解释:null是一个只有一个值的数据类型,这个值就是null。表示一个空指针对象,所以用typeof检测会返回”object”。
17.
看下列代码,输出什么?解释原因
var undefined;
undefined == null; // true
1 == true; // true
2 == true; // false
0 == false; // true
0 == ‘’; // true
NaN == NaN; // false
[] == false; // true
[] == ![]; // true
undefined与null相等,但不恒等(===)
一个是number一个是string时,会尝试将string转换为number
尝试将boolean转换为number,0或1
尝试将Object转换成number或string,取决于另外一个对比量的类型
所以,对于0、空字符串的判断,建议使用 “===” 。“===”会先判断两边的值类型,类型不匹配时为false。
那么问题来了,看下面的代码,输出什么,foo的值为什么?
var foo = “11”+2-“1”;
console.log(foo);
console.log(typeof foo);
执行完后foo的值为111,foo的类型为number。
18.
var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);//2
19.
已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”],Alert出”This is Baidu Campus”。
20.
已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。
21.
已知var numberArray = [3,6,2,4,1,5]; (考察基础API)
1) 实现对该数组的倒排,输出[5,1,4,2,6,3]
2) 实现对该数组的降序排列,输出[6,5,4,3,2,1]
|
|
22.
输出今天的日期,以YYYY-MM-DD的方式,比如今天是2014年9月26日,则输出2014-09-26
23.
将字符串”
|
|
24.
为了保证页面输出安全,我们经常需要对一些特殊的字符进行转义,请写一个函数escapeHtml,将<, >, &, “进行转义
25.
foo = foo||bar ,这行代码是什么意思?为什么要这样写?
短路表达式:作为”&&”和”||”操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短路求值。
26.
等价于
函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部,但是只提升名称不会提升赋值部分。
27.
用js实现随机选取10–100之间的10个数字,存入一个数组,并排序。
28.
把两个数组合并,并删除第二个元素。
arrayObject.splice(index,howmany,item1,…..,itemX)
//index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, …, itemX 可选。向数组添加的新项目
29.
1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2)添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id,唯一性
30.
有这样一个URL:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定),将其按key-value形式返回到一个json结构中,如{a:'1‘, b:’2’, c:’’, d:’xxx’, e:undefined}。
31.
正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同?匹配邮箱的正则表达式?
32.
33.
写一个function,清除字符串前后的空格。(兼容所有浏览器)使用自带接口trim(),考虑兼容性:
34.
Javascrpt语言的特殊之处,就在于函数内部可以直接读取全局变量。
另一方面,在函数外部自然无法读取函数内的局部变量。
这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!
附:雅虎网站性能优化的34条黄金准则
1、尽量减少HTTP请求次数
+合并文件:如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改,这可能会相对麻烦点,但即便如此也要把这个方法作为改善页面性能的重要一步。
+CSS Sprites:是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中,然后通过CSS的background-image和 background-position属性来显示图片的不同部分;
2、减少DNS查找次数
域名系统(DNS)提供了域名和IP的对应关系,就像电话本中人名和他们的电话号码的关系一样。当你在浏览器地址栏中输入www.dudo.org 时,DNS解析服务器就会返回这个域名对应的IP地址。一般情况下返回给定域名对应的IP地址会花费20到120毫秒的时间。而且在这个过程中浏览器什么都不会做直到DNS查找完毕。
+缓存DNS查找
3、避免跳转
跳转是使用301和302代码实现的。下面是一个响应代码为301的HTTP头:
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
元素的刷新标签和JavaScript也可以实现URL的跳转,但是如果你必须要跳转的时候,最好的方法就是使用标准的3XXHTTP状态代 码,这主要是为了确保“后退”按钮可以正确地使用。
但是要记住跳转会降低用户体验。
4、可缓存的AJAX
5、推迟加载内容
把整个过程按照onload事件分隔成两部分,JavaScript是一个理想的选择。例如,如果你有用于实现拖放和动画的JavaScript,那么它 就以等待稍后加载,因为页面上的拖放元素是在初始化呈现之后才发生的。其它的例如隐藏部分的内容(用户操作之后才显现的内容)和处于折叠部分的图像也可以 推迟加载
工具可以节省你的工作量
6、预加载
预加载是在浏览器空闲时请求将来可能会用到的页面内容(如图像、样式表和脚本)。
使用这种方法,当用户要访问下一个页面时,页面中的内容大部分已经加载到缓存中了,因此可以大大改善访问速度。
下面提供了几种预加载方法:
+无条件加载:触发onload事件时,直接加载额外的页面内容。以Google.com为例,你可以看一下它的spirit image图像是怎样在onload中加载的。这个spirit image图像在google.com主页中是不需要的,但是却可以在搜索结果页面中用到它。
+有条件加载:根据用户的操作来有根据地判断用户下面可能去往的页面并相应的预加载页面内容。在search.yahoo.com中你可以看到如何在你输入内容时加载额外的页面内容。
+有预期的加载:载入重新设计过的页面时使用预加载。这种情况经常出现在页面经过重新设计后用户抱怨“新的页面看起来很酷,但是却比以前慢”。问题可能出在 用户对于你的旧站点建立了完整的缓存,而对于新站点却没有任何缓存内容。因此你可以在访问新站之前就加载一部内容来避免这种结果的出现。在你的旧站中利用 浏览器的空余时间加载新站中用到的图像的和脚本来提高访问速度。
7、减少DOM元素数量
8、根据域名划分页面内容
把页面内容划分成若干部分可以使你最大限度地实现平行下载。由于DNS查找带来的影响你首先要确保你使用的域名数量在2个到4个之间。例如,你可以把用到的HTML内容和动态内容放在www.example.org上,而把页面各种组件(图片、脚本、CSS)分别存放在 statics1.example.org和statics.example.org上。
9、使iframe的数量最小
ifrmae元素可以在父文档中插入一个新的HTML文档。了解iframe的工作理然后才能更加有效地使用它,这一点很重要。
+iframe优点:
解决加载缓慢的第三方内容如图标和广告等的加载问题
Security sandbox
并行加载脚本
+iframe的缺点:
即使内容为空,加载也需要时间
会阻止页面加载
没有语意
10、不要出现404错误
11、使用内容分发网络
内容分发网络(Content Delivery Network,CDN)是由一系列分散到各个不同地理位置上的Web服务器组成的,它提高了网站内容的传输速度。用于向用户传输内容的服务器主要是根据 和用户在网络上的靠近程度来指定的。例如,拥有最少网络跳数(network hops)和响应速度最快的服务器会被选定。
12、为文件头指定Expires或Cache-Control
这条守则包括两方面的内容:
对于静态内容:设置文件头过期时间Expires的值为“Never expire”(永不过期)
对于动态内容:使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求
13、Gzip压缩文件内容
Gzip是目前最流行也是最有效的压缩方式。这是由GNU项目开发并通过RFC 1952来标准化的。另外仅有的一个压缩格式是deflate,但是它的使用范围有限效果也稍稍逊色。
Gzip大概可以减少70%的响应规模。
14、配置ETag
Entity tags(ETags)(实体标签)是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制(“实体”就是所说的“内 容”,包括图片、脚本、样式表等)。
15、尽早刷新输出缓冲
16、使用GET来完成AJAX请求
使用GET最为恰当,因为它只需发送一个TCP包(除非你有很多cookie)。IE中URL的最大长度为2K,因此如果你要发送一个超过2K的 数据时就不能使用GET了。
一个有趣的不同就是POST并不像GET那样实际发送数据。根据HTTP规范,GET意味着“获取”数据,因此当你仅仅获取数据时使用GET更加有意义(从语意上讲也是如此),相反,发送并在服务端保存数据时使用POST。
17、把样式表置于顶部
因为把样式表放到
注重性能的前端服务器往往希望页面有秩序地加载。
18、避免使用CSS表达式(Expression)
19、使用外部JavaScript和CSS
20、削减JavaScript和CSS
21、用代替@import
22、避免使用滤镜
23、把脚本置于页面底部
24、剔除重复脚本
25、减少DOM访问
27、减小Cookie体积
28、对于页面内容使用无coockie域名
29、优化图像
30、优化CSS Spirite
31、不要在HTML中缩放图像
32、favicon.ico要小而且可缓存
33、保持单个内容小于25K
这条限制主要是因为iPhone不能缓存大于25K的文件。
34、打包组件成复合文本
把页面内容打包成复合文本就如同带有多附件的Email,它能够使你在一个HTTP请求中取得多个组件(切记:HTTP请求是很奢侈的)。当你使用这条规则时,首先要确定用户代理是否支持(iPhone就不支持)