博客园上的一篇关于js的面试题:
创新互联建站服务项目包括永兴网站建设、永兴网站制作、永兴网页制作以及永兴网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,永兴网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到永兴省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
Web前端面试题目汇总
望采纳
!doctype html
html lang="en"
head
meta charset="UTF-8"
titleDemo/title
script
//试着编写一个程序,根据学生考试成绩,输出其总评的级别
var rank = function(n){
var rules = {
59:'不及格',
69:'一般',
79:'中等',
89:'良好',
100:'优秀'
};
n = Number(n);
n = (isNaN(n) || n 0) ? 0 : n;
n = n 100 ? 100 : n;
for(var limit in rules){
if(n = limit)
return rules[limit];
}
return 'out of rules!';
};
//输入1-7中的任何一个数字,输出相应的星期
var week = function(n){
return {
1:'星期一',
2:'星期二',
3:'星期三',
4:'星期四',
5:'星期五',
6:'星期六',
7:'星期日'
}[n] || 'out of rules!';
};
//输入1-12中的任何一个数字,输出相应的季节
var season = function(n){
var rules = {
3:'春',
6:'夏',
9:'秋',
12:'冬'
};
n = Number(n);
n = (isNaN(n) || n 1) ? 1 : n;
n = n12 ? 12 : n;
for(var limit in rules){
if(n = limit)
return rules[limit];
}
return 'out of rules!';
};
//定义一个无参数无返回值的名称为sayHello的函数,其作用是弹出提示框并提示信息“Hello,welcome you!”;
var sayHello = function(){
alert('Hello,welcome you!');
};
//定义一个函数名称为cube,其作用是弹出输入框提示用户输入一个整数(其方法是parseInt(prompt("请输入整数",0))),计算该整数的立方,并弹出提示框提示计算的结果
var cube = function(){
var n = parseInt(prompt('请输入整数',0));
alert(Math.pow(n,3));
};
// 定义一个函数名称为opt,其作用是计算1到n之间所有整数之和,将结果作为函数返回值返回
var opt = function(n){
var sum = 0;
for(var i=1;i=n;i++)
sum +=i;
return sum;
};
window.addEventListener('load',function(){
//调用函数sayHello()
sayHello();
//调用函数cube(),并输入整数25,查看计算结果
cube();
//调用函数opt(),计算1到20之间所有整数的和,并使用document.write()方法输出计算结果
document.write(opt(20));
});
/script
/head
body
/body
/html
出个考察执行顺序的setTimeout(() = {
console.log(1)
}, 100)
console.log(2);
new Promise((res) = {
console.log(3)
res(4)
}).then(res = {
console.log(res)
})
setTimeout(() = {
console.log(5)
}, 0)
出个考察作用域的a = 1;
b = 2;
c = 3;
var obj = {
a: 'a',
b: 'b',
c: 'c',
actionA: () = {
console.log(this.a);
},
actionB() {
console.log(this.b);
},
actionC,
}
function actionC() {
console.log(this.c);
}
obj.actionA();
obj.actionB();
obj.actionC();
actionC();
一、不定项选择题 (每题3分,共30分)
1. 声明一个对象,给它加上name属性和show方法显示其name值,以下代码中正确的是( D )
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:”zhangsan”,show:”alert(this.name)”};
C. var obj = {name:”zhangsan”,show:function(){alert(name);}};
D. var obj = {name:”zhangsan”,show:function(){alert(this.name);}};
2. 以下关于Array数组对象的说法不正确的是( CD )
A. 对数组里数据的排序可以用sort函数,如果排序效果非预期,可以给sort函数加一个排序函数的参数
B. reverse用于对数组数据的倒序排列
C. 向数组的最后位置加一个新元素,可以用pop方法
D. unshift方法用于向数组删除第一个元素
3. 要将页面的状态栏中显示“已经选中该文本框”,下列JavaScript语句正确的是( A )
A. window.status=”已经选中该文本框”
B. document.status=”已经选中该文本框”
C. window.screen=”已经选中该文本框”
D. document.screen=”已经选中该文本框”
4. 点击页面的按钮,使之打开一个新窗口,加载一个网页,以下JavaScript代码中可行的是( AD )
A. input type=”button” value=”new”
onclick=”open(‘new.html’, ‘_blank’)”/
B. input type=”button” value=”new”
onclick=”window.location=’new.html’;”/
C. input type=”button” value=”new”
onclick=”location.assign(‘new.html’);”/
D. form target=”_blank”action=”new.html”
inputtype=”submit” value=”new”/
/form
5. 使用JavaScript向网页中输出h1hello/h1,以下代码中可行的是( BD )
A. scripttype=”text/javascript”
document.write(h1hello/h1);
/script
B. scripttype=”text/javascript”
document.write(“h1hello/h1”);
/script
C. scripttype=”text/javascript”
h1hello/h1
/script
D. h1
scripttype=”text/javascript”
document.write(“hello”);
/script
/h1
6. 分析下面的代码:
html
head
script type=”text/javascript”
function writeIt (value) { document.myfm.first_text.value=value;}
/script
/head
body bgcolor=”#ffffff”
form name=”myfm”
input type=”text” name=”first_text”
input type=”text” name=”second_text”
/form
/body
/html
以下说法中正确的是( CD )
A. 在页面的第二个文本框中输入内容后,当鼠标离开第二个文本框时,第一个文本框的内容不变
B. 在页面的第一个文本框中输入内容后,当鼠标离开第一个文本框时,将在第二个文本框中复制第一个文本框的内容
C. 在页面的第二个文本框中输入内容后,当鼠标离开第二个文本框时,将在第一个文本框中复制第二个文本框的内容
D. 在页面的第一个文本框中输入内容后,当鼠标离开第一个文本框时,第二个文本框的内容不变
7. 下面的JavaScript语句中,( D )实现检索当前页面中的表单元素中的所有文本框,并将它们全部清空
A. for(vari=0;i form1.elements.length;i++) {
if(form1.elements.type==”text”)
form1.elements.value=”";}
B. for(vari=0;idocument.forms.length;i++) {
if(forms[0].elements.type==”text”)
forms[0].elements.value=”";
}
C. if(document.form.elements.type==”text”)
form.elements.value=”";
D. for(vari=0;idocument.forms.length; i++){
for(var j=0;jdocument.forms.elements.length; j++){
if(document.forms.elements[j].type==”text”)
document.forms.elements[j].value=”";
}
}
8. 在表单(form1)中有一个文本框元素(fname),用于输入电话号码,格式如:010-82668155,要求前3位是010,紧接一个“-”,后面是8位数字。要求在提交表单时,根据上述条件验证该文本框中输入内容的有效性,下列语句中,( A )能正确实现以上功能
A. var str= form1.fname.value;
if(str.substr(0,4)!=”010-”|| str.substr(4).length!=8 ||
isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码!”);
B. var str= form1.fname.value;
if(str.substr(0,4)!=”010-” str.substr(4).length!=8
isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码!”);
C. var str= form1.fname.value;
if(str.substr(0,3)!=”010-”|| str.substr(3).length!=8 ||
isNaN(parseFloat(str.substr(3))))
alert(“无效的电话号码!”);
D. var str= form1.fname.value;
if(str.substr(0,4)!=”010-” str.substr(4).length!=8
!isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码!”);
9. 关于正则表达式声明6位数字的邮编,以下代码正确的是( C )
A. var reg = /\d6/;
B. var reg = \d{6}\;
C. var reg = /\d{6}/;
D. var reg = new RegExp(“\d{6}”);
10. 关于JavaScript里的xml处理,以下说明正确的是( BCD )
A. Xml是种可扩展标记语言,格式更规范,是作为未来html的替代
B. Xml一般用于传输和存储数据,是对html的补充,两者的目的不同
C. 在JavaScript里解析和处理xml数据时,因为浏览器的不同,其做法也不同
D. 在IE浏览器里处理xml,首先需要创建ActiveXObject对象
二、问答题
1. 列举浏览器对象模型BOM里常用的至少4个对象,并列举window对象的常用方法至少5个 (10分)
对象:Window document location screen history navigator
方法:Alert() confirm() prompt() open() close()
2. 简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明 (10分)
Document.getElementById 根据元素id查找元素
Document.getElementByName 根据元素name查找元素
Document.getElementTagName 根据指定的元素名查找元素
三、程序题
1、补充按钮事件的函数,确认用户是否退出当前页面,确认之后关闭窗口; (10分)
html
head
script type=”text/javascript”
function closeWin(){
//在此处添加代码
if(confirm(“确定要退出吗?”)){
window.close();
}
}
/script
/head
body
input type=”button”value=”关闭窗口”onclick=”closeWin()”/
/body
/html
2、写出简单描述html标签(不带属性的开始标签和结束标签)的正则表达式,并将以下字符串中的html标签去除掉(15分)
var str = “div这里是divp里面的段落/p/div”;
//
scripttype=”text/javascript”
varreg = /\/?\w+\/?/gi;
varstr = “div这里是divp里面的段落/p/div”;
alert(str.replace(reg,”"));
/script
3、完成foo()函数的内容,要求能够弹出对话框提示当前选中的是第几个单选框。(10分)
html
head
metahttp-equiv=”Content-Type” content=”text/html;charset=utf-8″ /
/head
body
script type=”text/javascript”
function foo() {
//在此处添加代码
var rdo =document.form1.radioGroup;
for(var i =0 ;irdo.length;i++){
if(rdo.checked){
alert(“您选择的是第”+(i+1)+”个单选框”);
}
}
}
/script
body
form name=”form1″
input type=”radio” name=”radioGroup”/
input type=”radio” name=”radioGroup”/
input type=”radio” name=”radioGroup”/
input type=”radio” name=”radioGroup”/
input type=”submit”/
/form
/body
/html
4、完成函数showImg(),要求能够动态根据下拉列表的选项变化,更新图片的显示 (15分)
body
script type=”text/javascript”
function showImg (oSel) {
//在此处添加代码
var str = oSel.value;
document.getElementById(“pic”).src= str+”.jpg”;
}
/script
img id=”pic”src=”img1.jpg”width=”200″ height=”200″ /
br /
select id=”sel”
option value=”img1“城市生活/option
option value=”img2“都市早报/option
option value=”img3“青山绿水/option
/select/body
有些地方我也不是太懂。试着给解释1下巴。
首先是注意javascript里,function即可以是方法也可以是对象。
var x = 10; //声明全局变量x
var foo={ //声明类foo
x:20, //声明foo类成员x。其初始值为20
bar:function(){ //声明foo类成员bar,其值是个方法
var x = 30; //方法里边定义1个局部变量x.
return this.x; //返回类成员x的值,注意这里是用了this.代表是返回其所属类的成员。
}
};
alert(foo.bar());//这个好理解,调用foo的bar方法吗。当然是输出了foo.x = 20啦。
alert((foo.bar)());//和上边一样,虽然加了括号,但是还是引用的foo.bar。所以输出也是foo.x = 20.
alert((foo.bar=foo.bar)());//这里和上边不一样了。foo.bar = foo.bar 其结果是返回了一个function,function的定义和foo.bar是一样的,但是这个function不再是属于foo的。而是属于整个javascript的。那么这里当要输出this.x的时候,就是输出了前边定义的全局变量x=10
alert((foo.bar,foo.bar)());//同样,经过运算返回的function不再是foo的成员。所以this指向的是整个javascript.
我自己也有不理解的地方:
(foo.bar, foo.bar)这种运算之前没看到过。我测试了一下。(1,5)返回的是5,类推(1,5,12)返回12.貌似是返回了最后1个值。