百度前端技术学院2016春（2）JavaScript（一）

文章目录

1. 任务14：零基础Java其他事情ript编码（二）
1. 1.1. 数组
  1. 1.1.1. 创建数组
  2. 1.1.2. 读取和设置数组的值
2. 1.2. 动态创建修改DOM中的内容
  1. 1.2.1. 操作节点
  2. 1.2.2. 删除所有节点
2. 任务15：零基础JavaScript编码（三）
3. 任务16：零基础JavaScript编码（四）
4. 任务17：零基础JavaScript编码（四）
5. 任务18：基础JavaScript练习（一）
1. 5.1. 用数组表示队列
  1. 5.1.1. 数组的栈方法、队列方法
  2. 5.1.2. splice方法
6. 任务19：基础JavaScript练习（二）
1. 6.1. 限制输入和用高度表示数字的大小
2. 6.2. 用可视化方式表示排序
  1. 6.2.1. 如何表达每一步的排序
7. 任务20：基础JavaScript练习（三）
1. 7.1. 处理字符串
2. 7.2. 模糊匹配
8. 任务21：基础JavaScript练习（四）
1. 8.1. 添加onmouseover事件相关
2. 8.2. 键盘事件

　　这篇记录了百度前端技术学院阶段2（JavaScript）部分任务14到任务21的知识点和演示，因为其他事情的缘故没有按照规定的时间完成。最近才重新开始，每一个任务都让我受益良多。不仅是知识点上的，还有心态上、处理问题上的进步。继续加油~

任务14：零基础Java其他事情ript编码（二）

数组

创建数组

　　题目中使用的方式为使用数组字面量表示法。每一项又是一个数组字面量，包含名称和值。

var aqiData = [
  ["北京", 90],
  ["上海", 50],
  ["福州", 10],
  ["广州", 50],
  ["成都", 90],
  ["西安", 100]
];

读取和设置数组的值

　　使用方括号并提供相应值的基于０的文字索引。
　　例如找到符合条件的值，并插入新的数组：

1	newArray[a]=[aqiData[i][0],aqiData[i][1]];

动态创建修改DOM中的内容

　　1.创建节点:document.createElement(“li”)
　　2.将新节点添加到文档树中已经存在的节点中element.appendChild(newElement)

操作节点

appendChild()
insertBefore(要插入的节点，参照的节点)
replaceChild(要插入的节点，要替换的节点)
removeChild(要移除的节点)
cloneNode(true/false)
normalize()处理文档树中的文本节点，若不包含文本的空节点，则删除；若为连续两个文本节点，则合并为一个

删除所有节点

　　要注意倒着删除才能全部删除，否则会

1
2
3

for(var i=oUl.childNodes.length-1;i>=0;i--){	
	oUl.removeChild(oUl.childNodes[i]);
}

任务15：零基础JavaScript编码（三）

数组操作

数组排序

　　数组排序用到了sort()方法。此方法默认按升序排，且接收一个比较函数作为参数，可利用此方法进行二维数组的排序。

function sortAqiData(data) {
	//二维数组的排序
	data.sort(function(x,y){
		return x[1]-y[1];
		});
	return data;
}

js选择器

访问子节点childNodes

<ul id="source">
  <li>北京空气质量：<b>90</b></li>
  <li>上海空气质量：<b>70</b></li>
  <li>天津空气质量：<b>80</b></li>
</ul>

　　子节点的数目不是3，而是7。
　　若想选择li子节点，我结合了nodeType来选取。当nodeType为3时，是text类型，不操作。noteType为1，是element类型，此时选取了li。

字符串操作

　　取到li中的innerHTML中的内容是字符串类型的，获取其中的数据用到了如下操作：

stringObject.indexOf(string,startPos)返回指定字符串首次出现的位置
stringObject.substring(startPos,stopPos）提取两个指定下标中的字符串
代码
 演示
　　提交后发现有许多小问题，排名从0开始，排序方式不对，排名要转化成中文数字。

任务16：零基础JavaScript编码（四）

获取数据处理

trim()

　　通过trim()可去除字符串前后的空格。

输入判断——正则表达式

　　正则表达式由一些普通字符和一些元字符组成。在本练习中用到了如下：

元字符	描述
＾	匹配输入字符串的开始位置
$	匹配输入字符串的结束位置
＋	匹配前面的子表达式一次或多次(大于等于1次）
\d	匹配一个数字字符。等价于[0-9]

　　另外，用[\u4e00-\u9fa5]匹配中文字符。

match()方法

　　match()方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
　　stringObject.match(searchvalue)
　　stringObject.match(regexp)

数据存储——JSON和JavaScript对象字面量

　　本练习中用JavaScript对象字面量表示了对象，与JSON表示有不同之处。
　　首先，JSON方式没有变量声明。其次，JSON方式没有末尾的分号。并且，JSON方式中对象的属性必须加双引号。

添加和删除

var aqiData = {};
//add property
aqiData[oCity] = oAqiInput;
//aqiData["北京"]=100；
//delete
delete aqiData[oCity];

事件代理（事件委托）

　　事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。使得整个页面所占用的内存空间更少，提升整体性能。添加事件处理程序的所需的DOM引用更少，所花的时间也减少。所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术。

把事件处理程序指定给较高层级的元素

　　如果带有事件处理程序的元素被innerTHML删除了，那么原来添加到元素中的事件处理程序有可能无法当作垃圾回收。如果不进行处理，他们很有可能还将对元素和对事件处理程序的引用都保存在内存中。
　　如果事先知道将来有可能删除掉页面的某一部分，可以不直接把事件处理程序添加到该部分的元素中，而通过把事件处理程序指定给更高层级的元素，同样能够处理该区域中的元素。
　　本练习中，要通过按钮删除表格的指定行，就可以把事件处理程序添加到整个表格上。

event事件和具体行数绑定

　　兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法，都会传入event对象。
　　本练习通过event.type获取事件的目标，即button按钮，通过此按钮可以得到要删除的行。
代码

任务17：零基础JavaScript编码（四）

对象

利用对象，进行跨浏览器的事件处理

　　通过把对象封装到一个单独的js中。

var eventUtil = {
	//添加
	addHandler:function(element,type,handler){
		if(element.addEventListener){
			element.addEventListener(type,handler,false);
		}else if(element.attachEvent){
			element.attachEvent('on'+type,handler);
		}else{
			element['on'+type]=handler;
		}
		},
	......

对象的遍历

　　本练习中的数据是存储在一个对象中，遍历和数组的遍历有一些不同。

for(var x in aqiSourceData){
	  var newOption = document.createElement("option");
	  newOption.value = i++;
	  newOption.innerHTML = x;
	  citySelect.appendChild(newOption);
	  }

　　通过这样的方式，获取对象中的值，并放入select的下拉列表选项中。给select设置事件，当选项发生改变时调用函数，此时用到onchange方法。

用DOM实现柱状图标

初始化图表所要的数据

　　本练习非常重要的点就是如何把原始的数据处理成图标所需要的数据。数据格式的设计很重要。这部分参考了别人的代码。

事件委托

　　通过本练习，更加理解了事件委托的用法。在本练习中没有个每个按钮和每个select选项上添加事件，而是在更高的元素上添加的，通过事件对象知道到底选择的是哪一个元素。
代码
 演示
 在github中创建项目的demo

任务18：基础JavaScript练习（一）

用数组表示队列

　　本练习要完成一个队列的效果，并进行左添加、右添加、左删除、右删除、删除某一项的操作。
　　我用到JavaScript中的数组来存储数据，数组的一些特定方法可以完成需求。

数组的栈方法、队列方法

　　用数组的这些方法可以完成栈、队列的相关操作。

var que = new Array();//创建一个数组
function divChange(oInput,target){ //进行队列、栈操作
	switch(target.id){
		case "leftIn":
			que.unshift(oInput); //以相反的方式模拟队列，即前端添加，后端删除
			break;
		case "rightIn":
			que.push(oInput);
			break;
		case "leftOut":
			que.shift();  //取得第一项，正好对应于左删除
			break;
		case "rightOut":
			que.pop();
			break;
		}
	}
//删除数组中的某一项
function divChange2(target){
	var id = target.id;
	var index = id.substring(3);  //通过div的id和que的下标关系得到要删除的数组元素的下标
	que.splice(index,1);  //删除起始下标为index,长度为1的值
	}

splice方法

　　splice(index,len,[item])，该方法会改变原始数组。
　　可用于替换、添加、删除数组的某个或几个值。
　　delete方法，删除掉数组的某元素后，会把该下标位置置为undefined，数组的长度不变。
代码
 演示

任务19：基础JavaScript练习（二）

限制输入和用高度表示数字的大小

　　这两个要求在前面的练习中都有，其中用高度表示大小用到了子元素为绝对定位、父元素相对定位的方式。

用可视化方式表示排序

如何表达每一步的排序

　　我用到的方式是在排序之前，创建一个空的数组，在排序过程的结果都用数组存储起来，即存储为一个二维数组。这里有个问题困惑我了很久，如下：

var queSort = new Array();//创建一个数组，来存储每一步的排序结果
function bubbleSort(){  //冒泡排序
	var t=0,k=0;
	for(var i=0;i<que.length-1;i++){  //que是原来的数组
		for(var j=0;j<que.length-i;j++){
			if(que[j]<que[j+1]){
				t=que[j];
				que[j]=que[j+1];
				que[j+1]=t;   
				queSort[k] = que;　　／／１
				console.log(queSort[k]);
				k++;			
			}//if
		}//for
	}//for
	//alert(queSort[0][0]);
	console.log("bbb");
	for(var i=0;i<queSort.length;i++){
		console.log(queSort[i]);
		}
}

　　通过这种方式给queSort数组赋值，每一个值又为一个数组，但是在最后遍历的时候，发现数组的每一项都是一样的，这是这种方式进行赋值后，因为在js中，Array是引用类型，que发生了变化，又会影响之前queSort[i]的值。
　　若想让queSort[i]为一个不受干扰的数组，可以将1改为queSort[k]= que.slice();对que数组进行克隆。
　　也可以使用concat()。concat()返回的并不是调用函数的Array，而是一个新的Array，所以可以利用这一点进行复制。
代码　
 演示

任务20：基础JavaScript练习（三）

　　此任务为任务１８的拓展，增加了字符串的处理，模糊匹配等内容。

处理字符串

　　可以输入英文、数字、汉子字符，并以一定的方式分割。通过下面的方式将字符串处理并插入数组中。

function queIn(){
	var text = document.getElementById("input1").value.trim();
	text = text.replace(/[^0-9a-zA-Z\u4e00-\u9fa5]/ig," ");
	text=text.split(" ");//分割字符串为字符串数组
	for(var i in text){
		que.push(text[i]);
		}
	}

模糊匹配

　　通过字符串的indexof方法，来判断是否匹配查询的值。通过新建一个数组，把

function queSelect(){
	var j=0;
	var selectText = document.getElementById("select").value.trim();
	selectText = selectText.replace(/[^0-9a-zA-Z\u4e00-\u9fa5]/ig,"");//处理要匹配的字符
	for(var i=0;i<que.length;i++){
		if(que[i].indexOf(selectText)>=0){//若匹配
			que2[i] = que[i];
			que2L = 1;  //将标志改为1
			}
		else{
			que2[i] = "*";//不匹配则新的数组 
			}
		}
	}

　　通过这样的方式就得到了两个数组，一个是元素组，一个新的数组，其中匹配的项新数组中有内容，否则新数组中的内容为*，通过遍历两个数组，来渲染图。

function renderChart(){
	var renderDiv = document.getElementById("showQue");
	var text="";
	if(que2L==1){  //有查询到结果
		for(var i=0;i<que.length;i++){
			if(que2[i]=="*"){  //第i项是否匹配
				console.log("不匹配"+i);
				text += '<div id="div'+i+'" style="height:50px; width:50px; background-color:red; color:#fff;">'+que[i]+'</div>';
			}else{  //匹配的项
				console.log("匹配"+i);
				text += '<div id="div'+i+'" style="height:50px; width:50px; background-color:red; color:green;">'+que[i]+'</div>';
				}
		}
	}else{ //没有查询到结果
		console.log("没查询结果");
		for(var i=0;i<que.length;i++){
			text += '<div id="div'+i+'" style="height:50px; width:50px; background-color:red; color:#fff;">'+que[i]+'</div>';
			}
		}
	renderDiv.innerHTML = text;
	}

代码　
 演示

任务21：基础JavaScript练习（四）

　　这个练习是在任务20的改进，练习了代码的抽象和封装。主要抽象出来了插入、删除、比较等功能。大部分知识点都是之前了解过的，在编码的过程中进一步的复习、反思、总结，也遇到了许多小问题，在写代码的过程中收获很多但是遇到问题不再觉得烦躁和不知所措，而是知道该如何下手了，这是写代码让我成长的地方！

添加onmouseover事件相关

　　在给父元素添加onmouseover事件后，却想要实现这样的功能：在进入子元素的时候才触发事件。可以加入判断。此时父元素为div，子元素为span

eventUtil.addHandler(renderDiv[0],'mouseover',function(event){//删除技能提示（移入）
		event = eventUtil.getEvent(event);
		var target = eventUtil.getElement(event);
		if(target.nodeName=="SPAN"){//这里加一个判断，就不会在刚进入父元素的时候就产生事件了
			target.textContent = '删除：'+target.textContent;
			}
		});

键盘事件

　　在此联系中，要实现这样的功能：输入空格、逗号、回车时，将内容保存并显示。这里要用到event对象的keyCode属性来判断键盘输入的值。这里出现了一个问题就是，出现中文输入法的时候许多键盘的keyCode变为229，用KeyUp键盘事件就不会再出现这样的问题了。
代码　
 演示