前端面试题

时间  2019-11-29
标签 端面 试题 繁體版
原文   原文链接

一、Javascript包括哪些数据类型，请分别编写3种以上类型的判断函数，如：isString()?javascript

字符串、数字、布尔、数组、对象、null、undefinedphp

typeof, instanceof, isArray()?css

二、编写一个JavaScript函数，实时显示当前时间，格式”年—月—日  时：分：秒 ？html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input id="show" style="width:300px;"/>
  <script>
    function getTime(){
      var nowDate = new Date();
      var year = nowDate.getFullYear();
      var month = (nowDate.getMonth() + 1) > 10 ? nowDate.getMonth() + 1 : '0' + (nowDate.getMonth() + 1);
      var day = nowDate.getDate() > 10 ? nowDate.getDate() : '0' + nowDate.getDate();
      var hour = nowDate.getHours() > 10 ? nowDate.getHours() : (nowDate.getHours() == 0 ? 24 : '0' + nowDate.getHours());
      var minutes = nowDate.getMinutes() > 10 ? nowDate.getMinutes() : '0' + nowDate.getMinutes();
      var seconds = nowDate.getSeconds() > 10 ? nowDate.getSeconds() : '0' + nowDate.getSeconds();
      var str="当前时间为：" + year + "年" + month + "月" + day + "日" + " " + hour + ":" + minutes + ":" + seconds;
      document.getElementById("show").value = str;
    }
    window.setInterval("getTime()", 1000);
  </script>
</body>
</html>前端

三、如何显示/隐藏一个DOM元素？java

     答案：显示：object.style.display="block";node

              隐藏：object.style.display="none";web

 

四、如何添加html元素的事件处理，有几种方法？ajax

    答案：html的元素的事件就只用控件自带的的那么几个，如onclick,onmouserdown ,..等等都是调用脚本执行跨域

            方法：一、在空间上写直接激发事件

                      二、在页面加载的时候就调用脚本激发控件的某个事件

                      三、在后台利用后台代码强行执行控件的事件。

   或：

（1） 为HTML元素的事件属性赋值

（2） 在JS中使用ele.on*** = function() {…}

（3） 使用DOM2的添加事件的方法 addEventListener或attachEvent

五、如何控制alert中的换行？

   答案：\n alert("text\ntext");

             alert("再打个招呼。这里演示了" + "\n" + "如何在消息框中添加折行。")

六、判断一个字符串中出现次数最多的字符，统计这个次数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    var str = "abcdefgaddda";
    var obj = {};
    for(var i = 0; i < str.length; i++){
      var key = str[i];
      if(typeof obj[key] === 'undefined'){
        obj[key] = 1;
      }else{
        obj[key]++;
      }
    }
    var max = -1;
    var max_key = obj[key];
    for(var key in obj){
      if(max < obj[key]){
        max = obj[key];
        max_key = key;
      }
    }
    document.write("字符:" + max_key + ",出现次数最多为:" + max + "次")
  </script>
</body>
</html>

七、判断字符串是不是这样组成的，第一个必须是字母，后面能够是字母、数字、下划线，总长度为5-20.

 var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;

 reg.test("a1a__a1a__a1a__a1a__");

八、请编写一个Javascript函数parseQueryString，它的用途是把URL参数解析为一个对象，如 var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2";

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    function parseQueryString(url){
      var result = {};
      var arr = url.split("?");
      if (arr.length <= 1){
        return result;
      }else{
        arr = arr[1].split("&");
        for(var i=0; i<arr.length; i++){
          var a = arr[i].split("=");
          result[a[0]] = a[1];
        }
        return result;
      }
    }
    var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2";
    var ps = parseQueryString(url);
    document.write(ps['key0'] + '<br>' + ps['key1'] + '<br>' + ps['key2']);
  </script>
</body>
</html>

九、在页面中有以下html : <div id="firld">

                                       <input type="text" value="User Name"/>

                                </div>

                          <span class="red"></span>

需求用闭包方式写一个JS,从文本框中取出值，并在标签 span中显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="firld">
    <input type="text" value="User Name"/>
  </div>
  <span id="red" class="red"></span>
  <script>
    var result = (function(){
      var value = document.getElementById("firld").children[0].value;
      var all = document.getElementsByTagName("span");
      for(var i = 0; i < all.length; i++){
        if(all[i].className == 'red'){
          all[i].innerHTML = value;
          break;
        }
      }
    })();
  </script>
</body>
</html>

十、在 IE 6.0下面是不支持position:fixed 的，请写一个JS使用<div id="box"></div>固定在页面的右下角。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .tit{position:absolute; width:100px; height:100px; background:red;}
  </style>
</head>
<body>
  <div id="box" class="tit"></div>
  <script>
    window.onscroll= window.onresize = window.onload = function (){
      var getDiv = document.getElementById('box');
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      getDiv.style.left= document.documentElement.clientWidth - getDiv.offsetWidth + 'px';
      getDiv.style.top = document.documentElement.clientHeight - getDiv.offsetHeight +scrollTop +'px';
    }
  </script>
</body>
</html>

十一、请实现，鼠标移到页面中的任意标签，展现出这个标签的基本矩形轮廓。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .tit{display:block; width:100px; height:100px; background:yellow;}
  </style>
</head>
<body>
  <div id="box" class="tit"></div>
  <p class="tit">555</p>
  <a class="tit" href="www.baidu.com" alt="www.baidu.com"></a>
  <script>
  function mouseBorder(t){
    var c = t.childNodes;
    for(var i = 0 ; i < c.length; i++){
      var d = c[i];
      if(d.nodeType == 1){
        d.onmouseover = function(){
          this.style.border='1px solid red';
        };
        d.onmouseout = function(){
          this.style.border='';
        };
        mouseBorder(d);
      }; 
    }
  }
  mouseBorder(document.body);
  </script>
</body>
</html>

十二、js的基础对象有哪些，window 和 document 的经常使用的方法和属性列出来。

  String,Number,Boolean

Window:

方法：setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open

属性：name,parent,screenLeft,screenTop,self,top,status

Document

方法：createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln

属性：cookie,doctype,domain,documentElement,readyState,URL,

1三、javascript 中如何对一个对象进行深度clone

     function cloneObject(o) {    if(!o || 'object' !== typeof o) {        return o;    }    var c = 'function' === typeof o.pop ? [] : {};    var p, v;    for(p in o) {        if(o.hasOwnProperty(p)) {            v = o[p];            if(v && 'object' === typeof v) {                c[p] = Ext.ux.clone(v);            }            else {                c[p] = v;            }        }    }    return c;};

1四、js 中如何定义class ,如何扩展prototype ?

Ele.className = “***”; //***在css中定义，形式以下：.*** {…}

A.prototype.B = C;

A是某个构造函数的名字

B是这个构造函数的属性

C是想要定义的属性的值

1五、ajax是什么？ajax的交互模型？同步和异步的区别? 如何解决跨域问题?

   Ajax是多种技术组合起来的一种浏览器和服务器交互技术，基本思想是容许一个互联网浏览器向一个远程页面/服务作异步的http调用，而且用收到的数据来更新一个当前web页面而没必要刷新整个页面。该技术可以改进客户端的体验。包含的技术：

XHTML：对应W3C的XHTML规范，目前是XHTML1.0。

CSS：对应W3C的CSS规范，目前是CSS2.0

DOM：这里的DOM主要是指HTML DOM，XML DOM包括在下面的XML中

JavaScript：对应于ECMA的ECMAScript规范

XML：对应W3C的XML DOM、XSLT、XPath等等规范

XMLHttpRequest：对应WhatWG的Web Applications1.0规范（http://whatwg.org/specs/web-apps/current-work/）

AJAX交互模型

同步：脚本会停留并等待服务器发送回复而后再继续

异步：脚本容许页面继续其进程并处理可能的回复

跨域问题简单的理解就是由于JS同源策略的限制，a.com域名下的JS没法操做b.com或c.a.com下的对象，具体场景以下：

PS：（1）若是是端口或者协议形成的跨域问题前端是无能为力的

(2) 在跨域问题上，域仅仅经过URL的首部来识别而不会尝试判断相同的IP地址对应的域或者两个域是否对应一个IP

前端对于跨域的解决办法：

(1) document.domain+iframe

(2) 动态建立script标签

1六、请给出异步加载js方案，很多于两种。

     默认状况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，若是放在页头会致使加载很慢的话，是会严重影响用户体验的。

异步加载方式：

(1) defer，只支持IE

(2) async：

(3) 建立script，插入到DOM中，加载完毕后callBack，见代码：function loadScript(url, callback){   var script = document.createElement("script")   script.type = "text/javascript";   if (script.readyState){ //IE      script.onreadystatechange = function(){         if (script.readyState == "loaded" ||            script.readyState == "complete"){            script.onreadystatechange = null;            callback();         }      };   } else { //Others: Firefox, Safari, Chrome, and Opera      script.onload = function(){          callback();      };   }   script.src = url;   document.body.appendChild(script);}

1七、多浏览器检测经过什么？

  （1） navigator.userAgent

  （2） 不一样浏览器的特性，如addEventListener

1八、讲述一下你所了解的前端开发的优化方式

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程