【前端】【JavaScript】前端笔试面试之JavaScript相关

请实现，点击页面中的任何标签，alert该元素的名称（注意兼容性）

document.onclick=(function(e){
                e=e ||window.event;
                var o =e.target || e.srcElement;
                alert(o.tagName);
            });

完成一个正则表达式，验证用户输入是否电子邮箱

 document.getElementById("inputEmail").oninput=(function(e){
            console.log("inputing");
            var email=document.getElementById("inputEmail").value;
            var myreg=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

            if(!myreg.test(email)){
                document.getElementById("msg").innerHTML="请输入合法的电子邮箱";
            }else{
                document.getElementById("msg").innerHTML="是合法的电子邮箱";
            }
        });

写代码模拟ES5的Object.create()过程
a)在不适用Vue、react的前提下写代码解决以下问题
一个TODO-LIST页面上有1000个条目的待办列表，其中100项在同一时间达到了过期时间，需要在相应项的text-node里添加“已过期”文字，需要尽可能减少DOM树重绘次数以提升性能
b)尝试使用Vue或react解决以上问题
你是如何组织js代码的？（可以从模块、组件、模式、编程思想等方面说明）
JavaScript的typeof函数返回类型
undefined object number string Boolean function
==和===的区别

null == undefined   // true

false===undefined  // false

js的this的理解

ECMAScript 对象作用域
 彻底弄懂js中的this指向

this在对象的方法中指的是当前方法的对象。由于全局函数是window对象的方法，其中的对象指的是window。

js的变量作用域的理解

函数、自执行函数、匿名函数
闭包

闭包
js的ES6和ES7的了解

ECMAScript6入门by阮一峰
 ES7 8新特性介绍
DOM树的理解

HTML DOM
新建一个html文件，写一个input框，要求只能输入数字，并且在输入时如果敲回车键的话，就调用一个自定义的onsubmit方法，将input框中的值传给这个方法。

input只能输入数字

<!DOCTYPE html>
<html>
<head>
    <title>一个输入框</title>
    <script>
        /*document.onload=(function(){
            document.getElementById("inputNumber").onkeydown=(function(e){
                var code=e.keyCode || e.charCode;
                console.log(code);
                if(code < 48 && code > 57  &&
                    code!=46 && code !=8 &&
                    code != 37 && code != 39 && 
                    code != 13){
                    console.log("Not Number");
                    e.preventDefault?e.preventDefault():e.returnValue=false;
                } 
            })
        });
        document.onkeydown=function(e){
            e=e.keyCode || e.charCode;
            document.getElementById("code").innerHTML+=e;

        };*/
    </script>
</head>
<body>
    <div class="container">
        <form id="theForm">
            <input type="text" id="inputNumber">
        </form>
        <div class="clear"></div>
        <div id="code"></div>
    </div>
    <script>
        document.getElementById("theForm").onsubmit=function(){
            alert("表单已提交");
            return true;
        };
        document.getElementById("inputNumber").onkeydown=(function(e){
                var code=e.keyCode || e.charCode;
                console.log(code);
                if(!(code >= 48 && code <= 57)  &&
                   !(code >= 96 && code <= 105)  &&
                    code!=46 && code !=8 &&
                    code != 37 && code != 39 && 
                    code != 13){
                    e.preventDefault?e.preventDefault():e.returnValue=false;
                } 
                if(code==13){
                    document.getElementById("theForm").submit();
                }
        });
    </script>
</body>
</html>

编程：

用JavaScript实现一个栈（后进先出LIFO），有入栈push，出栈pop，查询栈顶元素top，查询是否为空empty。

function mystack(){
    var store=[];
    var storeRes=[];
    //入栈
    this.push=function(element){
        store.push(element);
        storeRes.unshift(element);
    }
    //出栈
    this.pop=function(){
        return store.pop();
    }
    //查询栈顶元素
    this.top=function(){
        return store[store.length-1];
    }

    //清空
    this.clear=function(){
        store.splice(0,store.length);
    }

    //检测是否为空
    this.empty=function(){
        return store.length==0;
    }
}

var str='ABCDE';
var newStack=new mystack();

(function(){
    for(var i=0;i<str.length;i++){
        newStack.push(str[i]);
    }
    while(!newStack.empty()){
        console.log(newStack.pop());
    }
})();

统计HTML网页中各个标签的数量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统计一个HTML中各标签出现的次数</title>
    <script>
        window.onload=function (){
            //注意是getElementsByTagName()是复数 因为返回的是数组？
            var tags=document.getElementsByTagName("*");
            var tagsNameTemp=[];
            //注意数组的声明方式
            for (var i=0;i<tags.length;i++){
                tagsNameTemp[i]=tags[i].tagName;
            }
            console.log(tagsNameTemp);
            //存储各个标签数量
            var tagNum=[];
            var nameinx=0;var num=0;
            for(var i=0;i<tagsNameTemp.length;i++){
                num=0;
                tagNum[i]=++num;//把自己数进去
                for(var j=i+1;j<tagsNameTemp.length;j++){
                    if(tagsNameTemp[j]==tagsNameTemp[i]){
                        tagNum[i]=++num;
                        tagsNameTemp.splice(j,1);
                        j--;
                    }
                }
            }
            for(var i=0;i<tagsNameTemp.length;i++){
                console.log(tagsNameTemp[i]+"有"+tagNum[i]+"个");
            }
        }
    </script>
</head>
<body>
    <div class="htmleaf-container">
    <div id="wrapper" class="login-page">
        <div id="login_form" class="form">
        <form id="login-form"  class="login-form" method="post">
          <input type="text" placeholder="用户名" id="user_name" name="user_name" value=""/>
          <input type="password" placeholder="密码" id="user_password" name="user_password" value=""/>
          <div id="errorsDiv">
            <label></label>
            <span ><i></i>
            <p class="sysError">登录失败,请确认帐号和密码正确</p>
            </span>
          </div>
          <input class ="submitBtn" id="login" value="登录"  type="submit"></input>
          <p class="message" id="message1">还没有账户? <a href="">立刻创建</a></p>
          <input type="hidden" id="msg" value=""/>
        </form>
        </div>
    </div>
    </div>
</body>
</html>

深度优先遍历搜索

struct TreeNode
{
    int data;
    TreeNode *left;//null
    TreeNode *right;
};

void DfsTree(TreeNode *root){
   stack<TreeNode *> s;
   s.push(root);
   while(!s.empty()){
       TreeNode node=s.top();
       cout<<node.data<<" " ;
       s.pop() ;
       if(node->right!=NULL){
            s.push(root->right);
       }
        if(node->left!=NULL){
            s.push(root->left);
       }
   }
}

【前端】【JavaScript】前端笔试面试之JavaScript相关

猜你喜欢