zoukankan      html  css  js  c++  java
  • web前端开发笔试集锦(javascript篇1)转

    原文出处: http://hi.baidu.com/jinhui04/item/eaf40034fa00def597f88dbc


    1, 判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母、数字、下划线,总长度为5-20

    var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;reg.test("a1a__a1a__a1a__a1a__");

    2,截取字符串abcdefg的efg

    var str = "abcdefg";if (/efg/.test(str)) {var efg = str.substr(str.indexOf("efg"), 3);alert(efg);}

    3,判断一个字符串中出现次数最多的字符,统计这个次数

    //将字符串的字符保存在一个hash table中,key是字符,value是这个字符出现的次数var str = "abcdefgaddda";var obj = {};for (var i = 0, l = str.length; i &lt; l; i++) {var key = str[i];if (!obj[key]) {obj[key] = 1;} else {obj[key]++;}}/*遍历这个hash table,获取value最大的key和value*/var max = -1;var max_key = "";var key;for (key in obj) {if (max < obj[key]) {max = obj[key];max_key = key;}}alert("max:"+max+" max_key:"+max_key);

    4,IE与FF脚本兼容性问题

    (1) window.event:

    表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象

    (2) 获取事件源

    IE用srcElement获取事件源,而FF用target获取事件源

    (3) 添加,去除事件

    IE:element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)

    FF:element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)

    (4) 获取标签的自定义属性

    IE:div1.value或div1[“value”]

    FF:可用div1.getAttribute(“value”)

    (5) document.getElementByName()和document.all[name]

    IE;document.getElementByName()和document.all[name]均不能获取div元素

    FF:可以

    (6) input.type的属性

    IE:input.type只读

    FF:input.type可读写

    (7) innerText textContent outerHTML

    IE:支持innerText, outerHTML

    FF:支持textContent

    (8) 是否可用id代替HTML元素

    IE:可以用id来代替HTML元素

    FF:不可以

    这里只列出了常见的,还有不少,更多的介绍可以参看JavaScript在IE浏览器和Firefox浏览器中的差异总结

    5,规避javascript多人开发函数重名问题

    (1) 可以开发前规定命名规范,根据不同开发人员开发的功能在函数前加前缀

    (2) 将每个开发人员的函数封装到类中,调用的时候就调用类的函数,即使函数重名只要类名不重复就ok

    6,javascript面向对象中继承实现

    javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链,简单的代码如下:

    function Animal(name) {this.name = name;}Animal.prototype.getName = function() {alert(this.name)}function Dog() {};Dog.prototype = new Animal("Buddy");Dog.prototype.constructor = Dog;var dog = new Dog();

    7,FF下面实现outerHTML

    FF不支持outerHTML,要实现outerHTML还需要特殊处理

    思路如下:

    在页面中添加一个新的元素A,克隆一份需要获取outerHTML的元素,将这个元素append到新的A中,然后获取A的innerHTML就可以了。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>获取outerHMTL</title><style>div{ background:#0000FF;100px;height:100px;}span{ background:#00FF00;100px;height:100px;}p{ background:#FF0000;100px;height:100px;}</style></head><body><div id="a"><span>SPAN</span>DIV</div><span>SPAN</span><p>P</p><script type="text/javascript">function getOuterHTML(id){var el = document.getElementById(id);var newNode = document.createElement("div");document.appendChild(newNode);var clone = el.cloneNode(true);newNode.appendChild(clone);alert(newNode.innerHTML);document.removeChild(newNode);}getOuterHTML("a");</script></body></html>

    8,编写一个方法 求一个字符串的字节长度

    假设:

    一个英文字符占用一个字节,一个中文字符占用两个字节

    function GetBytes(str){var len = str.length;var bytes = len;for(var i=0; i<len; i++){if (str.charCodeAt(i) > 255) bytes++;}return bytes;}alert(GetBytes("你好,as"));

    9,编写一个方法 去掉一个数组的重复元素

    var arr = [1 ,1 ,2, 3, 3, 2, 1];Array.prototype.unique = function(){var ret = [];var o = {};var len = this.length;for (var i=0; i<len; i++){var v = this[i];if (!o[v]){o[v] = 1;ret.push(v);}}return ret;};alert(arr.unique());

    10,写出3个使用this的典型应用

    (1)在html元素事件属性中使用,如

    <input type=”button” onclick=”showInfo(this);” value=”点击一下”/>

    (2)构造函数

    function Animal(name, color) {this.name = name;this.color = color;}

    (3)

    <input type="button" id="text" value="点击一下" /><script type="text/javascript">var btn = document.getElementById("text");btn.onclick = function() {alert(this.value); //此处的this是按钮元素}</script>

    (4)CSS expression表达式中使用this关键字

    <table width="100px" height="100px"><tr><td><div style="expression(this.parentNode.width);">div element</div></td></tr></table>

    12,如何显示/隐藏一个DOM元素?

    el.style.display = "";el.style.display = "none";

    el是要操作的DOM元素

    13,JavaScript中如何检测一个变量是一个String类型?请写出函数实现

    String类型有两种生成方式:

    (1)Var str = “hello world”;

    (2)Var str2 = new String(“hello world”);

    function IsString(str){return (typeof str == "string" || str.constructor == String);}var str = "";alert(IsString(1));alert(IsString(str));alert(IsString(new String(str)));

    14,网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示“××年还剩××天××时××分××秒”

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>倒计时</title></head><body><input type="text" value="" id="input" size="1000"/><script type="text/javascript">function counter() {var date = new Date();var year = date.getFullYear();var date2 = new Date(year, 12, 31, 23, 59, 59);var time = (date2 - date)/1000;var day =Math.floor(time/(24*60*60))var hour = Math.floor(time%(24*60*60)/(60*60))var minute = Math.floor(time%(24*60*60)%(60*60)/60);var second = Math.floor(time%(24*60*60)%(60*60)%60);var str = year + "年还剩"+day+"天"+hour+"时"+minute+"分"+second+"秒";document.getElementById("input").value = str;}window.setInterval("counter()", 1000);</script></body></html>

    15,补充代码,鼠标单击Button1后将Button1移动到Button2的后面<div> <input type=”button” id =”button1″ value=”1″ onclick=”???”> <input type=”button” id =”button2″ value=”2″ /”> </div>

    <div><input type="button" id ="button1" value="1" onclick="moveBtn(this);"><input type="button" id ="button2" value="2" /></div><script type="text/javascript">function moveBtn(obj) {var clone = obj.cloneNode(true);var parent = obj.parentNode;parent.appendChild(clone);parent.removeChild(obj);}</script>

    16,JavaScript有哪几种数据类型

    简单:Number,Boolean,String,Null,Undefined

    复合:Object,Array,Function

    17,下面css标签在JavaScript中调用应如何拼写,border-left-color,-moz-viewport

    borderLeftColor

    mozViewport

    18,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;};

    19,如何控制alert中的换行

     alert(“p p”);

    20,请实现,鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>鼠标点击页面中的任意标签,alert该标签的名称</title><style>div{ background:#0000FF;100px;height:100px;}span{ background:#00FF00;100px;height:100px;}p{ background:#FF0000;100px;height:100px;}</style><script type="text/javascript">document.onclick = function(evt){var e = window.event || evt;var tag = e["target"] || e["srcElement"];alert(tag.tagName);};</script></head><body><div id="div"><span>SPAN</span>DIV</div><span>SPAN</span><p>P</p></body></html>
  • 相关阅读:
    .NET XmlNavigator with Namespace
    编程要素
    【FOJ】1962 新击鼓传花游戏
    【POJ】1389 Area of Simple Polygons
    【POJ】2482 Stars in Your Window
    【HDU】3265 Posters
    【HDU】1199 Color the Ball
    【HDU】3642 Get The Treasury
    【HDU】4027 Can you answer these queries?
    【HDU】1542 Atlantis
  • 原文地址:https://www.cnblogs.com/whf-Staring/p/4392775.html
Copyright © 2011-2022 走看看