前端面试收集01

/2，截取字符串abcdefg的efg
//alert('abcdefg'.substring(4));

//3，判断一个字符串中出现次数最多的字符，统计这个次数
/*var str = 'asdfssaaasasasasaa';
var json = {};

for (var i = 0; i < str.length; i++) {
        if(!json[str.charAt(i)]){
                json[str.charAt(i)] = 1;
        }else{
                json[str.charAt(i)]++;
        }
};
var iMax = 0;
var iIndex = '';
for(var i in json){
        if(json[i]>iMax){
                iMax = json[i];
                iIndex = i;
        }
}
alert('出现次数最多的是:'+iIndex+'出现'+iMax+'次');*/

//4，IE与FF脚本兼容性问题
	/*obj.addEventListener(sEv, fn, false);
	obj.attachEvent('on'+sEv,fn);
	detachevet
	removeEventListener
	DOMContentLoaded
	onreadystatechange  complete
	DOMMouseScroll FF
	onmousewheel   非FF
	event.wheelDelta 上滚120 下-120
	event.detail     上滚-3   下3  
	obj.getCurrentStyle[attr]
	getComputedStyle(obj,false)[attr]
	XMLHttpRequest
	ActiveXObject('Mircorsoft.XMLHttp')
	FF本地能设置读取cookie 其他不行
	event  ev
	事件源
	srcElement||target
	toElement||relatedTarget
	obj.setCapture();只有ie认
	obj.releaseCapture();*/

//5，规避javascript多人开发函数重名问题
/*命名空间
封闭空间
js模块化mvc（数据层、表现层、控制层）
seajs
变量转换成对象的属性
对象化*/

//6，javascript面向对象中继承实现
/*function Person(name){
        this.name = name;
}

Person.prototype.showName = function(){
        alert(this.name);
}

function Worker(name, job){
        Person.apply(this,arguments)
        this.job = job;
}
for(var i in Person.prototype){
        Worker.prototype = Person.prototype;
}
new Worker('sl', 'coders').showName();*/

//7，FF下面实现outerHTML
/*var oDiv = document.createElement('div');
var oDiv1 = document.getElementById('div1');
var oWarp = document.getElementById('warp');

oWarp.insertBefore(oDiv, oDiv1);
oDiv.appendChild(oDiv1);
var sOut = oDiv.innerHTML;
oWarp.insertBefore(oDiv1, oDiv);
oWarp.removeChild(oDiv);
alert(sOut);*/


//8，编写一个方法 求一个字符串的字节长度;
//假设一个中文占两个字节
/*var str = '22两是';

alert(getStrlen(str))

function getStrlen(str){
        var json = {len:0};
        var re = /[\u4e00-\u9fa5]/;
        for (var i = 0; i < str.length; i++) {
                if(re.test(str.charAt(i))){
                        json['len']++;
                }
        };
        return json['len']+str.length;
}*/

//9，编写一个方法 去掉一个数组的重复元素
/*var arr = [1,2,3,1,43,12,12,1];
var json = {};
var arr2 = [];
for (var i = 0; i < arr.length; i++) {
        if(!json[arr[i]]){
                json[arr[i]] = true;
        }else{
                json[arr[i]] = false;
        }

        if(json[arr[i]]){
                arr2.push(arr[i]);
        }
};

for (var i = 0; i < arr.length; i++) {
        if(!aa(arr[i], arr2)){
                arr2.push(arr[i])
        }
};
function aa(obj, arr){
        for (var i = 0; i < arr.length; i++) {
                if(arr[i] == obj) return true;
                else return false;
        };
}
alert(arr2)*/

//10，写出3个使用this的典型应用
/*
事件： 如onclick  this->发生事件的对象
构造函数          this->new 出来的object
call/apply        改变this*/

//11、如何深度克隆
/*var arr = [1,2,43];
var json = {a:6,b:4,c:[1,2,3]};
var str = 'sdfsdf';

var json2 = clone(json);

alert(json['c'])
function clone(obj){
        var oNew = new obj.constructor(obj.valueOf());
        if(obj.constructor == Object){
                for(var i in obj){
                        oNew[i] = obj[i];
                        if(typeof(oNew[i]) == 'object'){
                                clone(oNew[i]);
                        }
                }
        }
        return oNew;
}*/
	var obj = {
				
				a : {
					b:10
				}
			}
			
			
			function deepCopy(obj){
				
				if(typeof obj != 'object'){
					return obj;
				}
				
				var newObj = {};
				
				for(var attr in obj){
					newObj[attr] = deepCopy(obj[attr])
				}
				
				return newObj;
			}
			
			var obj2 = deepCopy(obj);
			obj2.a.b = 20;
			alert(obj.a.b);
			alert(obj2.a.b);

var a = {
	name : { age : 100 }
};

var str = JSON.stringify(a);

var b = JSON.parse(str);
console.log(b)
b.name.age = 200;

alert( a.name.age );



//12，JavaScript中如何检测一个变量是一个String类型？请写出函数实现
// typeof(obj) == 'string'
// obj.constructor == String;

//13，网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”
	/*var oDate = new Date();
	var oYear = oDate.getFullYear();

	var oNewDate = new Date();
	oNewDate.setFullYear(oYear, 11, 31, 23, 59, 59);
	var iTime = oNewDate.getTime()-oDate.getTime();

	var iS = iTime/1000;
	var iM = oNewDate.getMonth()-oDate.getMonth();
	var iDate =iS*/

//2.你能描述一下你制作一个网页的工作流程吗？

//3.你能描述一下渐进增强和优雅降级之间的不同吗?

//4. 请解释一下什么是语义化的HTML。
	//内容使用特定标签，通过标签就能大概了解整体页面的布局分布

//6. 你如何对网站的文件和资源进行优化？

//7. 为什么利用多个域名来存储网站资源会更有效？
	//确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他郁闷访问网站

//8.请说出三种减低页面加载时间的方法
	/*1、压缩css、js文件
	2、合并js、css文件，减少http请求
	3、外部js、css文件放在最底下
	4、减少dom操作，尽可能用变量替代不必要的dom操作*/

//9.什么是FOUC？你如何来避免FOUC？
	/*由于css引入使用了@import 或者存在多个style标签以及css文件在页面底部引入使得css文件加载在html之后导致页面闪烁、花屏
	用link加载css文件，放在head标签里面*/

//10.文档类型的作用是什么？你知道多少种文档类型？
	/*影响浏览器对html代码的编译渲染
	html2.0
	xHtml
	html5*/

//11.浏览器标准模式和怪异模式之间的区别是什么？
	//盒模型解释不同

//1.* 你使用过那些Javascript库？
	//jquery seajs yui

//2.哈希表
	//具有散列（映射）特性的数据模型

//3.闭包
	//子函数能被外部调用到，则该作用连上的所有变量都会被保存下来。
	函数嵌套函数,内部函数可以引用外部函数的参数和变量,参数和变量不会被垃圾回收机制所收回
	//好处：
	//1.希望一个变量长期驻扎在内存当中
	//2.避免全局变量的污染
	//3.私有成员的存在

//4.请解释什么是Javascript的模块模式，并举出实用实例。
	/*js模块化mvc（数据层、表现层、控制层）
	seajs
	命名空间*/

//5.你如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？
	/*对内：模块模式
	对外：继承*/

//9* 你如何优化自己的代码？
	/*代码重用
	避免全局变量（命名空间，封闭空间，模块化mvc..）
	拆分函数避免函数过于臃肿
	注释
	*/

//10.你能解释一下JavaScript中的继承是如何工作的吗？
	/*子构造函数中执行父构造函数，并用call\apply改变this
	克隆父构造函数原型上的方法*/

//11.useraget.nav

//12.请尽可能详尽的解释AJAX的工作原理。
	/*创建ajax对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
	判断数据传输方式(GET/POST)
	打开链接 open()
	发送 send()
	当ajax对象完成第四步（onreadystatechange）数据接收完成，
	判断http响应状态（status）200-300之间或者304（缓存）执行回调函数*/

function ajax(url, fnSucc, fnFaild)
{
	//1.创建Ajax对象
	if(window.XMLHttpRequest)
	{
		var oAjax=new XMLHttpRequest();
	}
	else
	{
		var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	//2.连接服务器（打开和服务器的连接）
	oAjax.open('GET', url, true);
	
	
	//3.发送
	oAjax.send();
	
	//4.接收
	oAjax.onreadystatechange=function ()
	{
		if(oAjax.readyState==4)
		{
			if(oAjax.status==200)
			{
				//alert('成功了：'+oAjax.responseText);
				fnSucc(oAjax.responseText);
			}
			else
			{
				//alert('失败了');
				if(fnFaild)
				{
					fnFaild();
				}
			}
		}
	};
}











	用户名：

   	 密码：

	





//
1、charCodeAt方法返回一个整数，代表指定位置字符的Unicode编码。 
strObj.charCodeAt(index) 
说明： 
index将被处理字符的从零开始计数的编号。有效值为0到字符串长度减1的数字。 
如果指定位置没有字符，将返回NaN。 
例如： 
var str = "ABC"; 
str.charCodeAt(0); 
结果：65 
2、fromCharCode方法从一些Unicode字符串中返回一个字符串。 
String.fromCharCode([code1[,code2...]]) 
说明： 
code1，code2...是要转换为字符串的Unicode字符串序列。如果没有参数，结果为空字符串。 
例如： 
String.fromCharCode(65,66,112); 
结果：ABp 
3、charAt方法返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串。 
strObj.charAt(index) 
说明： 
index想得到的字符的基于零的索引。有效值是0与字符串长度减一之间的值。 
例如： 
var str = "ABC"; 
str.charAt(1); 
结果：B 
4、slice方法返回字符串的片段。 
strObj.slice(start[,end]) 
说明： 
start下标从0开始的strObj指定部分其实索引。如果start为负，将它作为length+start处理，此处length为字符串的长度。 
end小标从0开始的strObj指定部分结束索引。如果end为负，将它作为length+end处理，此处length为字符串的长度。 
例如： 
012345 
var str = "ABCDEF"; 
str.slice(2,4); 
结果：CD 
5、substring方法返回位于String对象中指定位置的子字符串。 
strObj.substring(start,end) 
说明： 
start指明子字符串的起始位置，该索引从0开始起算。 
end指明子字符串的结束位置，该索引从0开始起算。 
substring方法使用start和end两者中的较小值作为子字符串的起始点。如果start或end为NaN或者为负数，那么将其替换为0。 
例如： 
012345 
var str = "ABCDEF"; 
str.substring(2,4); // 或 str.substring(4,2); 
结果：CD 
6、substr方法返回一个从指定位置开始的指定长度的子字符串。 
strObj.substr(start[,length]) 
说明： 
start所需的子字符串的起始位置。字符串中的第一个字符的索引为0。 
length在返回的子字符串中应包括的字符个数。 
例如： 
012345 
var str = "ABCDEF"; 
str.substr(2,4); 
结果：CDEF 
7、indexOf方法放回String对象内第一次出现子字符串位置。如果没有找到子字符串，则返回-1。 
strObj.indexOf(substr[,startIndex]) 
说明： 
substr要在String对象中查找的子字符串。 
startIndex该整数值指出在String对象内开始查找的索引。如果省略，则从字符串的开始处查找。 
例如： 
01234567 
var str = "ABCDECDF"; 
str.indexOf("CD"，1); // 由1位置从左向右查找 123... 
结果：2 
8、lastIndexOf方法返回String对象中字符串最后出现的位置。如果没有匹配到子字符串，则返回-1。 
strObj.lastIndexOf(substr[,startindex]) 
说明： 
substr要在String对象内查找的子字符串。 
startindex该整数值指出在String对象内进行查找的开始索引位置。如果省略，则查找从字符串的末尾开始。
例如： 
01234567 
var str = "ABCDECDF"; 
str.lastIndexOf("CD",6); // 由6位置从右向左查找 ...456 
结果：5 
9、search方法返回与正则表达式查找内容匹配的第一个字符串的位置。 
strObj.search(reExp) 
说明： 
reExp包含正则表达式模式和可用标志的正则表达式对象。 
例如： 
var str = "ABCDECDF"; 
str.search("CD"); // 或 str.search(/CD/i); 
结果：2 
10、concat方法返回字符串值，该值包含了两个或多个提供的字符串的连接。 
str.concat([string1[,string2...]]) 
说明： 
string1，string2要和所有其他指定的字符串进行连接的String对象或文字。 
例如： 
var str = "ABCDEF"; 
str.concat("ABCDEF","ABC"); 
结果：ABCDEFABCDEFABC 
11、将一个字符串分割为子字符串，然后将结果作为字符串数组返回。 
strObj.split([separator[,limit]]) 
说明： 
separator字符串或 正则表达式 对象，它标识了分隔字符串时使用的是一个还是多个字符。如果忽略该选项，返回包含整个字符串的单一元素数组。 
limit该值用来限制返回数组中的元素个数。 
例如： 
var str = "AA BB CC DD EE FF"; 
alert(str.split(" "，3)); 
结果： 
AA,BB,CC 
12、toLowerCase方法返回一个字符串，该字符串中的字母被转换成小写。 
例如： 
var str = "ABCabc"; 
str.toLowerCase(); 
结果：abcabc 
13、toUpperCase方法返回一个字符串，该字符串中的所有字母都被转换为大写字母。 
例如： 
var str = "ABCabc"; 
str.toUpperCase(); 
结果：ABCABC


1. 栈方法和队列方法
 var array = new Array();
 var ele = array.pop();
 if(!ele) {
  alert("返回尾部的数据类型为" + typeof ele);
 }
 //push：将接收到的参数按从左到右的顺序依次添加到数组的尾部,返回更新后的数组长度
 var countNum = array.push("zhansan", "lisi");
 alert(countNum);//2
 alert(array);//zhansan,lisi
 //pop:删除并返回尾部元素,更新数组的长度
 var lastEle = array.pop();
 alert(lastEle);//lisi
 alert(array);//zhangsan
 //unshift：将接收到的参数按照从右到左的顺序依次添加到数组的首部,返回更新后的数组长度
 var len = array.unshift("zhaowu","wangliu");
 alert(len);//3
 alert(array);//zhouwu,wangliu,zhangsan
 //shift：删除并返回数组首部元素,更新数组的长度
 var firstEle = array.shift();
 alert(firstEle);//zhaowu
 alert(array);//wangliu,zhangsan
 
 2. 重排序方法
 var orgVal = [0,1,10,5,20];
 // sort()：将数组中的元素按ASCII字符（都看作是一个字符串）进行升序排列
 orgVal.sort();
 alert(orgVal);// 0,1,10,20,5
 
 //sort(sortFunction)接收一个比较函数的参数,以便用户按照自己的排序方式排序
 function compareTo(val1, val2) {
  if (val1 > val2) {
   return 1;//将第一个参数放到第二个参数之后, 返回正值
  } else if (val1 < val2) {
   return -1;//返回负值
  } else {
   return 0;//返回零
  }
 }
 // 实现数组元素的升序排列
 orgVal.sort(compareTo);
 alert(orgVal);// 0,1,5,10,20
 
 //降序排列（先升序,后反转）
 orgVal.reverse();
 alert(orgVal);// 20, 10, 5, 1, 0
 
3. concat([args])操作方法
 var array = ["black", "red"];
 //concat()：创建并返回当前数组的一个副本
 var array2 = array.concat();
 alert(array2);
 //concat(args)：如果参数不是一个或者多个数组,创建当前数组的一个副本,然后将参数依次追加到数组尾部并返回
 var array3 = array.concat("gray","green");
 alert(array3);
 //concat(args)：如果参数是一个或者多个数组,创建当前数组的一个副本,然后将数组中的元素依次追加到数组尾部并返回
 var array4 = array.concat(["gray","green"]);
 alert(array4);
 //依次将参数按照从左到右的顺序添加到尾部
 var array5 = array.concat("orange", ["gray","green"]);
 alert(array5);//black,red,orange,gray,green
 
 4. slice()操作方法
      基于当前数组的一项或者多项创建并返回数组,例如：var orgVal = [0,1,10,5,20];
 orgVal.slice(num1);
 当num1=2时, 返回[10, 5, 20];
 orgVal.slice(num1, num2);
 当num1=2，num2=4时，返回[10, 5];
 当num1 > num2时，返回null
 
 5. splice()操作方法
 (1) 删除操作：splice(sIndex, len)：其中sIndex为起始位置, len为截取的数组长度，例如：
 var removed = array.splice(1,3);
 alert(removed);//["red", "orange", "gray"]
 alert(array);//["black", "green"]
     显然, 有删除项时,返回由这些删除项构成的新数组。（原数组保留未删除的部分）
 (2) 插入操作：splice(rIndex, 0 , args...)：其中rIndex为要插入的位置，args为要替换的元素，例如：
 removed = array.splice(1, 0, "yellow");
 if (0 == removed.length) {
  alert("这是一个空的数组对象");
 }
 alert(array);//["black", "yellow", "green"]
    由上例可见, 无删除项时,返回一个空对象数组。向数组中插入一个以及多个元素，数组里面中rIndex位置上及其后面位置上的元素依次向后移动。
(3) 替换操作：splice(sIndex, len, args...)：首先删除sIndex位置及其以后的len个元素，然后将args从sIndex位置开始逐个执行插入操作，例如：
 removed = array.splice(1, 2, "orange");
 alert(array);//["black", "orange"]
 alert(removed);//["yellow", "green"]
 
 6. indexOf()和lastIndexOf()
      返回要查找的元素在数组中的位置（从0开始），不存在则返回-1。


///////////////////////////////
css sprites是什么，请说出他的优点和缺点?
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，
“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少
了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。
缺点：就是在拼图时，比较麻烦，还有后期维护也比较麻烦，比如做好的图，然后一个图标改了大小，
但是图标之间留的位置不够，那你就要重写很多css，，当然现在已经很多这方面的软件，或者在线生成代码
。。。但这个麻烦还是存在的。