网络上一些javascript 题目

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

答：

var str = "string39_string";
var regexp = /^[a-z][\d_]{4,19}/gi;
alert(regexp.test(str));

2、截取字符串abcdefg的efg

答：

  var str = "abcdefg";
  var str2 = str.substring(str.indexOf("efg"));
  alert(str2);

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

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

答：（1）charCodeAt()方法与charAt()方法类似，但它并不返回指定位置上的字符本身，而是返回该字符在Unicode字符集中的编码值。计算机只能理解数字，对于计算机来说，所有字符串都是某种编码的数字。当需要使用的是数字编码所代表的字符，而不是使用数字本身时，计算机将根据编码与字符集的内部对应关系，把每一个编码转换为字符集中相应的字符。

（2）为什么要>255:Unicode编码中前256个字符（包括，大小写字母、数字、少数特殊字符:如标点符号、货币符号等），即0~255的字符只占1个字节，其他的字符，如汉字、日文等，占2个字节。

function much(str) {
 var count = 0;
 if (str!=null) {
  for (var i=0;i<str.length;i++) {
   if (str.charCodeAt(i)>255) {
    count += 2;   
   } else {
    count ++;    
   }
  }
  
 } else {
  return;
 }
 console.log(count);
}
much("123aB我们");

 

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

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

答: 年份4位数字，月份表示：0-11，日期表示：1-31，小时表示：0-23；

function show() {
 var date1 = new Date();
 var year = date1.getFullYear();
 var date2 = new Date(year+1,0,1,0,0,0);  //2015.01.01. 00:00
 var time = (date2-date1)/1000;           //得到相差的秒数，毫秒/1000   
 var date = Math.floor(time/(24*60*60));
 var hours = Math.floor(time%(24*60*60)/(60*60));
 var minutes = Math.floor(time%(24*60*60)%(60*60)/60);
 var seconds = Math.floor(time%(24*60*60)%(60*60)%60);
 var str = year + "年还剩" + date + "天" + hours + "时" + minutes + "分" + seconds + "秒"; 
 var ainput = document.getElementById("input");
 ainput.value = str;
 //console.log(date2);
} 
window.setInterval(show,1000);

7、js中如何检测一个变量是一个string类型:

答：

另： instanceof 方法用于识别正在处理的对象的类型，主要是要求开发者明确对象为某特定类型。

var object1 = new String("Hello world");
alert(object1 instanceof String);  //true

var str1 = "string1";
var str2 = new String("string2");
function test (str) {
 return (typeof str == "string" || str.construtor == String );
}
alert(test(str1));  //true
aler(test(str2));   //false
alert(typeof str2); //object

8、鼠标点击页面中的任意标签,alert出该标签的名称(注意兼容性)

答：nodeName，或者用，tagName

window.onclick = function (e) {
 var e = e || window.event;
 var target = e.srcElement || e.target;
 var name = target.nodeName.toLowerCase();
 alert(name);
}

9、js几种基本数据类型；

答：简单：Undefined、Number、String、Blooean、Object。 

复合：Object，Array，Function。

10、js的基础对象有哪些,window和document的常用方法和属性列出来;

答：根据《javascript高级程序设计》

js基本对象：String、Number 、Boolean、 Function、 Array、 Math 、Date 等。

window：

属性：status、defaultStatus、innerWidth、innerHeight

方法：alert()、confirm()、prompt()、open()、close()、go()、formard()、back()、setTimeout()、clearTimeout()、setInterval()、clearInterval()

document：

属性：cookie、nodeType、documentElement、URL

方法：getElementById()、getElementsByTagName()、getElementsByName()、createElement()、createTextNode()、

11、document.write() 和 innerHTML 的区别：

执行document.write()后，页面都将重绘，若多次调用的话，前面的会被修改。

innerHTML只会重绘html里的一部分。

12、如何控制alert中的换行
答: \n      alert("aa\nbb");

13、下面css标签在js中调用应如何拼写：border-left-color,-moz-viewport；
答:borderLeftColor,mozViewport
在IE或DOM中获取样式表中的样式obj.currentStyle.backgroundColor;document.getComputedStyle(obj,null).backgroundColor;

14、如何显示/隐藏一个DOM元素；

答：el.style.display ="block";
el.style.display ="none";

obj.style.visibility = "visibile";
obj.style.visibility = "hidden"; （另它仅仅是隐藏元素，以留下一个元素所占区域的空白）

15、规避js多人开发函数重名问题:
答：可以开发前规定命名规范,根据不同开发人员开发的功能在函数前加前缀;
将每个开发人员的函数封装到类中,调用的时候就调用的时候就调用类的函数,即使函数重名只要类名不重复就行;

16、如何添加html元素的事件，有几种方法；

答：
(1) 为 HTML 元素的事件属性赋值 <div style="width:100px;" onclick="alert()" ></div>;
(2) 在js中使用 ele.oncolick=function(){}
(3) 使用添加事件的方法 addEventListener(DOM兼容的浏览器) 或 attachEvent(IE);

17、js中如何定义class,如何扩展prototype?
答：在javascript中class用className表示,object.className来对html中class进行访问。
MyObject.prototype.show = function () { alert(); }
为原型扩展一个叫做show的方法,new MyObject().show();调用这个方法.

18、Firefox下面如何实现outerHTML；

  window.onload = function () {
   var innerdiv = document.getElementById("inner");
   var ospan = document.createElement("span");
   var op = document.createElement("p");
   var oText = document.createTextNode("Hello world!");
   ospan.appendChild(oText);
   op.appendChild(ospan);
   innerdiv.appendChild(op);
   console.log(innerdiv);
  }

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

答：

 <script type="text/javascript">
  function change() {
   var div = document.getElementsByTagName("div")[0];
   var button1 = document.getElementById("button1");
   var button2 = document.getElementById("button2");
   button2.parentNode.appendChild(button1);
  }
 </script>
 </head> 
 <body> 
  <div> 
   <input type="button" id ="button1" value="1" onclick="change()"> 
   <input type="button" id ="button2" value="2" /> 
  </div>
 </body>

 20、写出异步加载js方案；

答：目前有5中方案；

（1）(不推荐使用)<script>标签里的属性 async=“async”；

HTML5中新增加的属性：async。async 属性规定一旦脚本可用，则会异步执行。注：async 属性仅适用于外部脚本（只有在使用 src 属性时）。

<script type="text/javascript" src="demo_async.js" async="async"></script>

测试结果：显示顺序1 2 3；

<!DOCTYPE html> 
<html> 
 <head>  
  <title>async</title>
  <script type="text/javascript" src="async.js" async="async"></script>
  <script type="text/javascript">
   console.log(1);   
  </script>
  <script type="text/javascript">
   window.onload = function () {
    var div1 = document.getElementById("div1");
     if (div1!=null){
     console.log(3);
     }
   }
   
  </script>
 </head> 
 <body> 
  <div id="div1">
   <p>async test<p>
  </div>
 </body> 
</html>

async.js  ：

console.log(2);

（2）（不推荐使用）<script>标签里的属性 defer=“defer”；

defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。只有 IE 支持 defer 属性。

<script type="text/javascript" defer="defer">

测试结果：本人发现没有影响，虽然在IE下测试的。还是把代码贴出来，是不是代码太简单或者有错误。

<!DOCTYPE html> 
<html> 
 <head>  
  <script type="text/javascript" dafer="defer">
   alert(2);
  </script>
  <script type="text/javascript">
   alert(1);   
  </script>
 </head> 
 <body> 
  <div id="div1">
   <p>async test<p>
  </div>
 </body> 
</html

（3）动态创建<script>标签

   (function () {
    var ss = document.createElement("script");
    ss.type = "text/javascript";
    ss.src = "http://code.jquery.com/jquery-1.7.2.min.js";
    var ss2 = document.getElementsByTagName("script")[0];
    ss2.parentNode.insertBefore(ss,ss2);
   })();

测试结果：先显示1然后2

<!DOCTYPE html> 
<html> 
 <head>  
  <title>async</title>
  <script type="text/javascript">
   (function () {
    var ss = document.createElement("script");
    ss.type = "text/javascript";
    ss.src = "async.js";
    var aScript = document.getElementsByTagName("script")[0];
    aScript.parentNode.insertBefore(ss,aScript);
    })();
   
  </script>
  <script type="text/javascript">
   console.log(1);   
  </script>
 </head> 
 <body> 
  <div id="div1">
   <p>async test<p>
  </div>
 </body> 
</html>

（4）把javascript的script标签放到body标签之后。

（5）ajax

见： www.w3school.com

jQuery下的Ajax

<script type="text/javascript" src="jquery-1/10/1.js"></script>
<script type="text/javascript">
    $(function () {
        $("input").click(function () {
            $.getScript("1234.js");
        });
    
    })
</script> 
<boby>
    <input type="button" value="button" />
</body>

1234.js  在服务器端的文件：

alert("response");

    网页加载好了后，1234.js的文件不会自动加载，等你点击input的按钮后才会加载1234.js文件。

（6）iframe

详见： http://hi.baidu.com/flondon/item/1ca3cacb4cb6c90aad092f97

21.关键字this的用法;
(1)在对象方法中,关键this总是指向调用该方法的对象。
var oCar = new Object;
oCar.color = "red";
oCar.showColor = function () {
 alert(this.color);    // outputs "red"
};
这里,关键字this用在对象的showColor()方法中。在此环境中,this等于对象oCar。
(同样在event对象的上下文中,this指代的是event对象。
oEvent.preventDefault = function () {
 this.returnvalue = false;
}
)
(2)在构造函数中
function Car (sColor, iDoors, iMpg) {
 this.color = sColor;
 this.doors = iDoors;
 this.mpg = iMpg;
 this.showColor = function () {
  alert(this.color);
 };
}
var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);
在构造函数内部无创建对象,而是使用this关键字。使用new运算符调用构造函数时,在执行第一行代码前先创建一个对象,只有用this才能访问该对象。
(3)在HTML元素中的属性事件。可用this对象来访问事件对象。
<img src="image1.gif" onmouseover="this.src='image2.gif'" onmouseout="this.src='image1.gif'" />
(4)css expression 中使用this关键字。
注意:css中使用expression只有IE浏览器才能识别。IE5及以后的版本支持。
<style type="text/css">
input {
 star : expression(onmouseover=function(){
  this.style.backgroundColor="#FF0000"
  },
  onmouseout=function(){
   this.style.backgroundColor="#FFFFFF"
 })
}
</style>