1. 截取字符串abcdefg的efg
alert('abcdefg'.substring(4));
2. 写出3个使用this的典型应用
事件: 如onclick this->发生事件的对象
构造函数 this->new 出来的object
call/apply 改变this
3. JavaScript中如何检测一个变量是一个String类型?请写出函数实现
typeof(obj) == 'string'
obj.constructor == String;
4. 请说出三种减低页面加载时间的方法
1、压缩css、js文件
2、合并js、css文件,减少http请求
3、外部js、css文件放在最底下
4、减少dom操作,尽可能用变量替代不必要的dom操作
5. 什么是FOUC?你如何来避免FOUC?
由于css引入使用了@import 或者存在多个style标签以及css文件在页面底部引入使得css文件加载在html之后导致页面闪烁、花屏
用link加载css文件,放在head标签里面
6. 文档类型的作用是什么?你知道多少种文档类型?
影响浏览器对html代码的编译渲染
html2.0
xHtml
html5
7. 请解释什么是Javascript的模块模式,并举出实用实例。
js模块化mvc(数据层、表现层、控制层) seajs 命名空间
8. 如何组织自己的代码?是使用模块模式,还是使用经典继承的方法?
对内:模块模式
对外:继承
9. 你如何优化自己的代码?
代码重用 避免全局变量(命名空间,封闭空间,模块化mvc..)拆分函数避免函数过于臃肿
10. 12.请尽可能详尽的解释AJAX的工作原理。
创建ajax对象(XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp))
判断数据传输方式(GET/POST)
打开链接 open()
发送 send()
当ajax对象完成第四步(onreadystatechange)数据接收完成,判断http响应状态(status)200-300之间或者304(缓存)执行回调函数
11. js的继承模式: call()
基类:
function classA(sColor) { this.color = sColor; this.sayColor = function(){ alert(this.color); } }
子类:
function classB(sColor,sName) { //call()方法是与经典的“对象冒充”方法最相似的方法,它的第一个参数是用作this的对象,其他参数都直接传递给函数自身. classA.call(this,sColor); this.name = sName; this.sayName = function(){ alert(this.name); } }
使用:
var obj = new classB('blue','gaoyong'); obj.sayName(); obj.sayColor();
12.form中的input有哪些类型?
text:文本框
password:密码框
radio:单选按钮
checkbox:复选框
file:文件选择域
hidden:隐藏域
button:按钮
reset:重置按钮
submit:表单提交按钮
image:图片按钮,类似submit可以为按钮添加图片...
13 列举javaScript的3种主要数据类型,2种复合数据类型和2种特殊数据类型。
主要数据类型:string, boolean, number
复合数据类型:function, object
特殊数据类型: Null 空对象 Undefined 未定义
14. undefined 和null 的区别和注意点
1、如果用 “==” 进行比较,他们是相等的,因为比较的是值
2、区分他们有两种方法(他们的核心都是比较他们的 数据类型)
1)使用typeof 将他们区分开 , typeof(null)=object
2)使用全等“===” :比较的是 值和 数据类型,只有全都相同 才返回 true
alert(undefined == null); //true alert(typeof undefined == typeof null); //false alert(undefined === null); //true
14. js中对象继承的方法: prototype, 构造函数, .call , apply实现继承
prototype:
<SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html> <body> <script type="text/javascript"> function Person(name,age){ this.name=name; this.age=age; } Person.prototype.sayHello=function(){ alert("使用原型得到Name:"+this.name); } var per=new Person("马小倩",21); per.sayHello(); //输出:使用原型得到Name:马小倩 function Student(){} Student.prototype=new Person("洪如彤",21); var stu=new Student(); Student.prototype.grade=5; Student.prototype.intr=function(){ alert(this.grade); } stu.sayHello();//输出:使用原型得到Name:洪如彤 stu.intr();//输出:5 </script> </body> </html></SPAN></SPAN>
构造函数:
<SPAN style="FONT-SIZE: 18px"><html> <body> <script type="text/javascript"> function Parent(name){ this.name=name; this.sayParent=function(){ alert("Parent:"+this.name); } } function Child(name,age){ this.tempMethod=Parent; this.tempMethod(name); this.age=age; this.sayChild=function(){ alert("Child:"+this.name+"age:"+this.age); } } var parent=new Parent("江剑臣"); parent.sayParent(); //输出:“Parent:江剑臣” var child=new Child("李鸣",24); //输出:“Child:李鸣 age:24” child.sayChild(); </script> </body> </html></SPAN>
call , apply实现继承
<SPAN style="FONT-SIZE: 18px"><html> <body> <script type="text/javascript"> function Person(name,age,love){ this.name=name; this.age=age; this.love=love; this.say=function say(){ alert("姓名:"+name); } } //call方式 function student(name,age){ Person.call(this,name,age); } //apply方式 function teacher(name,love){ Person.apply(this,[name,love]); //Person.apply(this,arguments); //跟上句一样的效果,arguments } //call与aplly的异同: //1,第一个参数this都一样,指当前对象 //2,第二个参数不一样:call的是一个个的参数列表;apply的是一个数组(arguments也可以) var per=new Person("武凤楼",25,"魏荧屏"); //输出:“武凤楼” per.say(); var stu=new student("曹玉",18);//输出:“曹玉” stu.say(); var tea=new teacher("秦杰",16);//输出:“秦杰” tea.say(); </script> </body> </html></SPAN>
15 浏览器的对象模型
window,方法: alert, prompt, confirm, open, close,
document方法: write,
history,方法, back, forward, go
location:方法 href
navigator,navigator.cookieEnabled:该属性表示是否启用cookie
screen,screen.width/screen.height:表示显示器的分辨率(总的宽度,高度)
16. 超链接的属性target取值: _blank, _parent, _self, _top
17. js的常用对象: String, Math, Date和Array对象
18. .innerHTML,innerText,outerHTML,innerText的区别
举个例子来说吧。
<div>
<span>内容</span>
</div>
使用这几个来获取上面div的内容的话,区别如下:
innerHTML: <span>内容</span>,带有html标签
innerText: 内容 不带html标签
outerHTML: <div><span>内容</span></div>
outerText: 获取元素跟innterText是一样的。
19 form中的input可以设置为readonly和disable,请问2者有什么区别?
readonly不可编辑,但可以选择和复制;值可以传递到后台
disabled不能编辑,不能复制,不能选择;值不可以传递到后台
20.js中的3种弹出式消息提醒(警告窗口,确认窗口,信息输入窗口)的命令式什么?
alert
confirm
prompt
20. JS最经典的全局变量和局部变量的问题:
100 10 100
var a = 10; 2 function test(){ 3 a = 100; 4 console.log(a); 5 console.log(this.a); 6 var a; 7 console.log(a); 8 } 9 test();
结论, js执行前对所有生命进行分析, 第6行声明了局部变量, 所以函数内部的a都指向这个变量, 所以先输出100.
this.a指向函数的调用者, 即window, 所以显示10
第三个输出局部变量100
undefined 10
1 var a = 100; 2 function test(){ 3 console.log(a); 4 var a = 10; 5 console.log(a); 6 } 7 test();
第4行, 局部变量只解析声明, 不解析赋值, 所以第三行局部变量的值是undefined
下面赋值了局部变量,所以10
100 10 10
1 var a = 100; 2 function test(){ 3 console.log(a); 4 a = 10; 5 console.log(a); 6 } 7 test(); 8 console.log(a);
var声明的是局部变量 , 第4行是全局变量, 外面赋值100,所以显示100
第二个, 全局变量改成10, 所以10,
第三个, 全局变量a的值必须是10
21. JS的类型识别: 4种:typeof、Object.prototype.toString、constructor和instanceof
typeof可以识别标准类型(Null除外),不能识别具体的对象类型(Function除外)
Object.prototype.toString可以识别标准类型以及内置对象类型,不能识别自定义类型
constructor是对象原型上面的一个属性,它指向构造器本身,constructor可以识别标准类型(Undefined/Null除外),可以识别内置对象类型,可以识别自定义对象类型
instanceof可以识别内置对象类型,不能识别原始类型,可以识别自定义对象类型