二. js相关面试题

Posted 2022-10-13

1.JS表单弹出对话框函数是？获取输入焦点函数是?
alert()
focus()

2.JS的转向函数是？怎么引入一个外部JS文件？

location.href
​​​<script src=’xxx’></script>​​

3.行内元素有哪些?块级元素有哪些?
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块状元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

4.margin和padding的区别
margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。（外边距）
padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。（内边距）

5.介绍一下CSS的盒子模型
CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

6.js什么是事件冒泡
事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。

7.依次写出下代码输出值

  console.log(a) 
  var a = 100
  fn(zhangsan) 
  function fn(name)
        age = 20 
        console.log(name,age)
        var age
  

答案： undefined zhangsan age

8.在“？？？”处写出this指向（1分）
var a =
name:‘A’,
fn: function()
console.log(this.name)


a.fn() // this === ？？？ a
a.fn.call(name : B’) // this === ？？？name:B
var fn1 = a.fn
fn1() // this ===？？？window

9.依次写出下代码输出值 （1分）13524
console.log(1)
setTimeout(function()
console.log(2)
)
console.log(3)
setTimeout(function()
console.log(4)
,1000)
console.log(5)

10.一个html页面的部分结构为：

<div>
  <input type=”text” name=”foo”>
  <input type=”button” value=”反转” id=”reverseText”>
</div>
使用jquery实现点击按钮将输入框内容反转(2分)
$(#reverseText).click(function()
    var str = $(input[name=foo]).val();
    var revstr = str.split("").reverse().join("");
    $(input[name=foo]).val(revstr)
  );

11.HTML/CSS和javascript对一个前端开发人员分别意味着什么？你是如何进行学习和实践的？
HTML：网站结构
CSS：网站的样式
JS: 网站交互

12.介绍一下你对浏览器内核的理解？
浏览器内核分为两部分内容，一部分是渲染引擎，负责生成DOM树，渲染页面；另一部分是JS引擎，负责JS的解释执行。
目前五大浏览器内核及代表
1.Trident是IE的内核
2.Gecko是火狐内核
3.Webkit是safari内核
4.Chromium是chrome内核
Presto opera内核

13.移动端的布局用过媒体查询吗？移动页面和PC页面有哪些不同？
1.移动端页面一般加如下代码，告诉浏览器以何种模式来显示网页，手机端一般是按照屏幕等比缩放
​​​<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />​​​ 2.移动端浏览器内核比较统一，兼容性问题相对少一些
3.移动端增加了触摸、滑动事件

14.为什么要初始化CSS样式？什么是CSS预处理器？
因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异
CSS预处理器：用一种专门的编程语言，编写WEB样式，在编译成CSS文件格式
目前主流的预处理器里最常用的三种有：SASS LESS STYLUS

15.请用代码说明JavaScript中undefined和not defined 的区别？
Undefined是js语言中定义的原始类型中的一个，undefined不是程序报错，而是程序允许的一个值。
Not defined是js在运行代码时，遇到未定义就来运算的变量时爆出的错误。

var temp;
alert(temp);//undefined，
temp3 = temp4+1;
alert(temp3);// not defined,变量未定义，不能直接拿来运算

16.JavaScript中什么是闭包？请用代码说明。
闭包就是一个函数把外部那些不属于自己的对象也包含进来了。
Js的闭包，无非就是变量解析的过程。

(
function()
 
var hello="hello,world"; 
function welcome(hi)
 
alert(hi); //解析到作用域链的第一个对象的属性
alert(hello); //解析到作用域链的第二个对象的属性
  
welcome("Its easy"); 
)();

17.JavaScript如何实现继承？请用代码说明。
1.原型链继承

function Animal(name)
    this.name = name || animal;
    this.sleep = function()
    Console.log(this.name+正在睡觉);
    

Animal.prototype.eat = function(food)
    Console.log(this.name+正在吃:+food);

function Cat()

Cat.prototype = new Animal();
Cat.prototype.name = cat;

2.构造继承

Function cat(name)
    Animal.call(this);
   this.name = name || tom;

18.JavaScript和ECMAScript 6 是什么关系？
ECMAScript 是一个标准，是由Ecma International组织制定的，ECMAScript 6指的是
ECMA-262的第6个版本，与ES2015、ECMAScript2015是同一个意思。
JavaScript遵循ECMAScript标准，JavaScript是ECMAScript的实现

19.请编写用来验证邮箱和手机是否有效的JavaScript代码。

var h=/^[\\u4e00-\\u9fa5]0,$/;
    var d=/^1[3458]\\d9$/;
    var y=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\\.[a-zA-Z0-9_-])+/;
$("[name=phone]").blur(function() 
      var v=$(this).val();
      if (v==) 
        $("[name=phone]").next().html("手机号不能为空！");
        $(this).prev().css("color","#f00");
      else if(!v.match(d))
        $("[name=phone]").next().html("手机号不正确！");
        $("[name=phone]").prev().css("color","#f00");
      else
        $(this).prev().css("color","#0EA74A");
        $("[name=phone]").next().html("");
       
    );

20.请用JS将数组a=array（‘a’，‘b’，…）中的元素拼成一个字符串
arr.join(".")

21.了解ajax吗？简述其道理，如何调用ajax，如何查看ajax服务器端返回的数据？

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1.创建ajax对象
var request; 
if (window.XMLHttpRequest)  
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 
request=new XMLHttpRequest();  
else  
// IE6, IE5 浏览器执行代码 
request=new ActiveXObject("Microsoft.XMLHTTP");
 
//2监听响应状态变化
request.onreadystatechange=function()

if (request.readyState==4 && request.status==200)

//将服务器返回的图片路径赋值给img的src属性
$(#img1).attr(src,/+request.responseText); 


//3以post方式向/admin/upload路由发送请求
request.open("POST", "/admin/upload");
//4发送请求
request.send(formData);

$.ajax(
type: "POST",  //请求方式 
url: "/admin/upload",//发送请求的地址
data: formData,//发送到服务器的数据
contentType: false,//发送信息至服务器时内容编码类型
processData: false,//默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success: function(data) 
,
error: function(XMLHttpRequest, textStatus, errorThrown) 
alert("上传失败，请检查网络后重试");

);

22 解释下面语句的意思：document.form[“formName”].submit。（百度）
获取 name 为 formName的表单并将该表单数据提交到服务器。但这行代码是不能运行的 ， 有 两 处 错 误 ， 一 是 通 过 表 单 名 称 来 获 取 表 单 得 到 时 候 ，应该写成document.forms[‘formName’]，提交表单事件使用 submit 方法，需要加上括号.
document.forms[“formName”].submit();

23 有下面语句： 编写代码，当鼠标划过文本框，自动选中文本框中的内容。（百度）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dJTqoz89-1610457004776)(http://on64ewxzt.bkt.clouddn.com/blog/20180709/234521948.png)]

24 设计一个网页，使得打开它时弹出一个全屏的窗口，该窗口中有一个文本框和一个按钮。
用户在文本框中输入信息后点击按钮就可以把窗口关闭，而输入的信息却在主网页中显示。
（新浪）
主窗口：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pHJ5DvzW-1610457004788)(http://on64ewxzt.bkt.clouddn.com/blog/20180709/234630086.png)]
弹出窗口：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8e6l2S2Z-1610457004795)(http://on64ewxzt.bkt.clouddn.com/blog/20180709/234653445.png)]

25 判断以下代码是否正确，如果有错，请指出错误，如果正确，请指出运行结果 （酷讯）
var arr = new Array(
new Array(1,2,3,4),
new Array(“abc”, “def”, “xyz”),
);
for(i = 0; i < arr.length; i++)
document.write(arr[0])

怀疑这个代码写错了，第二个 new array 后面的逗号是多余的，如果此处没问题，则代
码是正确的，输出的结果是 1,2,3,4 1,2,3,4
注：arr 是一个二维数组，该数组有两个元素，第一个元素是数组[1,2,3,4]，第二个元素
也是一个数组为[“abc”, “def”, “xyz”]，for 循环语句执行了两次，但都是输出第一个元素，即
数组[1,2,3,4]。

26 用 JavaScript 写一个函数,其功能是可以删除数组中重复的元素。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1moDpO7F-1610457004801)(http://on64ewxzt.bkt.clouddn.com/blog/20180709/234834857.png)]

27 以下哪条 JavaScript 语句会产生运行错误：（ ）
A. var obj = ( );
B. var obj = [ ];
C. var obj = ;
D. var obj = //;
答案：A

28 请选择结果为真的表达式：（ ）
A. null instanceof Object
B. null === undefined
C. null == undefined
D. NaN == NaN
答案：C

29 foo 对象有 att 属性，那么获取 att 属性的值，以下哪些做法是可以的：（ ）
A. foo.att
B. foo(“att”)
C. foo[“att”]
D. foo“att”
E. foo[“a”+“t”+“t”]
答案：ACE

30 如何添加 html 元素的事件,有几种方法，举例

(1).直接作为元素的属性，如

(2).使用 DOM 0 级事件，简单，兼容性好，如 img.onclick = function()

(3).使用 DOM 2 级事件，功能更强大，在非 IE 等标准浏览其中，使用 addEventListener，在

IE 浏览器中则使用 attachEvent 来实现。

31 JavaScript 能否定义二维数组，如果不能你如何解决？
JavaScript 不支持二维数组定义，可以用 arr[0] = new array()来解决。

32 假设 a.html 和 b.html 在同一个文件夹下面，用 JavaScript 实现当打开 a.html 五秒钟后，
自动跳转到 b.html。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HtNsS0z7-1610457004808)(http://on64ewxzt.bkt.clouddn.com/blog/20180709/235102335.png)]

33 请使用 JavaScript 写出三种产生一个 image 标签的方法（提示：从方法、对象、HTML
角度考虑）

(1). var img = new Image();
(2). var img = document.createElement("image")
(3). img.innerHTML = "<img src=xxx.jpg />"

34 js 中网页前进和后退的代码

前进: history.forward();或者 history.go(1);
后退: history.back (); 或者 history.go(-1);

35 请写出一条至少 3 个节点的 DOM 树 (YG)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LicclWlV-1610457004811)(http://on64ewxzt.bkt.clouddn.com/blog/20180709/235139628.png)]

结果 HTML：

<div><a href="http://www.baidu.com"><span>百度</span></a></div>

36 实现点击按钮弹出窗口的代码 (YG)

document.getElementById( button ).onclick = function()
window.open (page.html);

其中，button 是按钮的 id，page.html 是要弹出的窗口页面。

37 JavaScript 包括那些基本数据类型？（小米）
JavaScript 中包括 5 种基本数据类型，分别是 Number，String，Boolean，Null 和 Undefined。