ife-task002 学习记录

了解javascript。

参考资料
期望达成

了解JavaScript是什么；如何在HTML页面加载JavaScript代码。搜索一下，为什么我们让你把script放在</body>前。

javascript数据类型及语言基础

任务一：判断数据类型。

       // 判断arr是否为一个数组，返回一个bool值
		function isArray(arr) {
			//if(arr.constructor === Array) 或者
			if (arr instanceof(Array)) {
				console.log("数组");
				return true;
			} else {
				console.log("不是数组");
				return false;
			}
		}
// 判断fn是否为一个函数，返回一个bool值
		function isFunction(fn) {
			if (typeof(fn) === "function") {
				console.log("函数");
				return true;
			} else {
				console.log("不是函数");
				return false;
			}
		}
		isArray([]);//是数组
		isFunction(function() {});//函数

任务二：判断数据类型了解值类型和引用类型的区别，了解各种对象的读取、遍历方式。

// 使用递归来实现一个深度克隆，可以复制一个目标对象，返回一个完整拷贝
// 被复制的对象类型会被限制为数字、字符串、布尔、日期、数组、Object对象。不会包含函数、正则对象等
function clone(obj) {
	if (typeof obj == "number") {
		var _number = obj;
		console.log("数字" + _number);
	} else if (typeof obj == "string") {
		var _string = obj;
		console.log("字符" + _string);
	} else if (typeof obj == "boolean") {
		var _boolean = obj;
		console.log("布尔值" + _boolean);
	} else if (obj instanceof Date) {
		var _Date = obj;
		console.log("日期" + _Date);
	} else if (obj instanceof(Array)) {
		var _A = [];
		var len;
		for (var i = 0, len = obj.length; i < len; i++) {
			_A[i] = obj[i];
		}
		console.log(_A[i]);
	} else if (obj instanceof(Object)) {
		var _obj = {};
		for (var j in obj) {
			_obj[j] = obj[j];
		}
		console.log(_obj);
	}
	clone({
		1: 2,
		3: 4
	})
}

任务三：学习数组、字符串、数字等相关方法。


// 对数组进行去重操作，只考虑数组中元素为数字或字符串，返回一个去重后的数组
function uniqArray(arr) {
	var newArray = [];
	for (var i in arr) {
		if (arr[i] !== '' && newArray.indexOf(arr[i]) < 0) {
			newArray.push(arr[i]);
		}
	}
	console.log(newArray);
	return newArray;
}
uniqArray([1, , 3, 3, 3, 4, 5, 8]);

资料参考：https://msdn.microsoft.com/zh-cn/library/bb383831.aspx

// 实现一个简单的trim函数，用于去除一个字符串，头部和尾部的空白字符
// 假定空白字符只有半角空格、Tab
// 练习通过循环，以及字符串的一些基本方法，分别扫描字符串str头部和尾部是否有连续的空白字符，并且删掉他们，最后返回一个完成去除的字符串
function simpleTrim(str) {
	var len = str.length;
	var i = 0;
	var newStr = [];
	for (i; i < len; i++) {
		if (str[i] !== ' ' && str[i] !== '\t' && str[i] !== '') {
			newStr.push(str[i]);
		}
	}
	newStr = newStr.join("");
	console.log(newStr);
}
simpleTrim("	1 			2	 3 8 ");

语法关键词：==join()==和==split()==
搜索关键词：数组与字符串转化

// 对字符串头尾进行空格字符的去除、包括全角半角空格、Tab等，返回一个字符串
// 尝试使用一行简洁的正则表达式完成该题目
function trim(str2) {
	return str2.replace(/^\s+|\s+$/g, '');
}
var str2 = '   hi!  ';
str2 = trim(str2);
console.log(str2);

语法关键词：==string.replace()==

// 实现一个遍历数组的方法，针对数组中每一个元素执行fn函数，并将数组索引和元素作为参数传递
function each(arr, fn) {
	for (var i in arr) {
		fn(arr[i], i);
	}
}
// 其中fn函数可以接受两个参数：item和index
// 使用示例
var arr = ['java', 'c', 'php', 'html'];
function output(item) {
	console.log(item)
}
each(arr, output); // java, c, php, html
// 使用示例
var arr = ['java', 'c', 'php', 'html'];
function output2(item, index) {
	console.log(index + ': ' + item)
}
each(arr, output2); // 0:java, 1:c, 2:php, 3:html

语法关键词：==for in==
知识点：函数能够作为参数传递

参考答案：http://www.lishengcn.cn/archives/136.html

// 获取一个对象里面第一层元素的数量，返回一个整数
function getObjectLength(objNum) {
	var num = 0;
	for(var i in objNum)
	{
		if(objNum.hasOwnProperty(i)){
			num++;
		}
	}
	return num;
}
// 使用示例
var objNum = {
	a: 1,
	b: 2,
	d: 5,
	c: {
		c1: 3,
		c2: 4
	}
};
console.log(getObjectLength(objNum)); // 3

语法关键词：==object.hasOwnProperty()==

任务四：学习正则表达式。

// 判断是否为邮箱地址
			function isEmail(emailStr) {
    			var isEmail =/^(\w+\.*\w)+@\w+\.(\w{1,3})$/;
    			if(isEmail.test(emailStr))
    			 {
			    	console.log("是邮箱"+emailStr);
			    }
			    else console.log("不是邮箱");
			}
			// 判断是否为手机号
			function isMobilePhone(phone) {
			    var isPhone = /^(13|15|18)\d{9}$/;
			    if(isPhone.test(phone))
			    {
			    	console.log("是手机号"+phone);
			    }
			    else console.log("不是手机号");
			}
			isEmail("uheyhome@163.com")
			isMobilePhone("18674052544")

期望达成：

掌握JavaScript的各种数据类型概念、判断方法；掌握JavaScript函数、对象的概念；掌握字符串、数字、数组、日期等对象的方法；了解JavaScript的作用域；初步掌握正则表达式的写法；

DOM

任务一

  			// 为element增加一个样式名为newClassName的新样式
function addClass(element, newClassName) {
	//判断是否有这个class，如果否则新增class
	if (!this.hasClass(element, newClassName)) {
		element.className += " " + newClassName;
	}
}
// 移除element中的样式oldClassName
function removeClass(element, oldClassName) {
	if (this.hasClass(element, oldClassName)){
		//匹配class前后空格的正则。
		var reg = new RegExp('(\\s|^)' + oldClassName + '(\\s|$)')
		//判断是否有这个class，如果有则用空格替代
		element.className = element.className.replace(reg, ' ');
	}
}
// 判断siblingNode和element是否为同一个父元素下的同一级的元素，返回bool值
function isSiblingNode(element, siblingNode) {
	//判断两者的父元素是否全等。
	if(element.parentNode === siblingNode.parentNode) return true;
}

语法关键词：hasClsaa();

// 获取element相对于浏览器窗口的位置，返回一个对象{x, y}
function getPosition(element) {
	var position = {};
	position.x   = element.getBoundingClientRect().left + document.documentElement.scrollLeft;
	position.y   =element.getBoundingClientRect().top + document.documentElement.scrollTop;
	return position;
}

关键词：getBoundingClientRect()
资料参考：http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html
资料参考2：http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/

语法关系表：

offset*	client*	scroll*
offsetWidth	clientWidth	scrollWidth
offsetHeight	clientHeight	scrollHeight
对象整体的实际宽/高度，包滚动条等边线(border)，会随对象显示大小的变化而改变。即：offsetWidth=clientWidth+scrollbar（滚动条）+border。	是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。即：width/height+padding，不包括滚动条。	对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。即：滚动高宽。
offsetLeft	clientLeft	scrollLeft
offsetLeft	clientTop	scrollTop
获取对象相对于版面或由offsetParent属性指定的父坐标的顶/左部位置（offsetParent：指的是最近的定位祖先元素。如果没有祖先元素是定位的话，会指向body元素。）	获取对象的上/左边框的宽度	设置或获取对象最顶/左端和对象内容的最顶/左端之间的距离。

我看到不少人在这个题上加了：position.x = element.getBoundingClientRect().left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);或者position.x = element.getBoundingClientRect().left + document.body.scrollTop;
通过实践，实际获取的是元素相对于网页body的高/宽度，把滚动条算在内了。同时，题目是相对于浏览器窗口的位置，所以我觉得不应该加scrollTop/Left。*