JavaScript 学习手册二：JS 数据类型

第1关：JavaScript 数据类型介绍

任务描述

本关任务：在函数 objectTest() 内部定义了六个变量 a、b、c、d、e、f，并已经赋值，你需要判断它们各是什么数据类型。变量 aType、bType、cType、dType、eType、fType 分别表示上面六个变量的数据类型的名字，你需要给他们赋值。比如变量 a 如果是数字类型，需要给变量 aType 赋值字符串 number。可选的数据类型名如下： number、string、bool、object、undefined 和 array 分别表示数字、字符串、布尔型、对象类型、undefined 还有数组。

function objectTest() {var a = {name:"myName",id:2};var b = [1,true,2];var c = 1;var d = "1";var e = true;var f;var aType,bType,cType,dType,eType,fType;//请在此处编写代码/********** Begin **********/aType=typeof(a);bType='array';cType=typeof(c);dType=typeof(d);eType='bool';fType=typeof(f);/********** End **********/return aType+","+bType+","+cType+","+dType+","+eType+","+fType;
}

第2关：JavaScript 数据类型转换

任务描述

数据类型转换是开发过程中最常碰到的问题之一。

本关任务：函数 mainJs() 有三个字符串类型的参数 a、b 和 c，你需要分别把他们转换为整数，整数和小数。

第一个参数既有可能是 12 这种纯整数的字符串形式，也有可能是 12a3 这种含有非数字字符的字符串；

第二个参数是 16 进制数字的字符串形式，如 af2；

第三个参数是纯小数的字符串形式，如 12.2；

想要通过本关，请阅读下方的相关知识。

function mainJs(args1,args2,args3) {//请在此处编写代码/********** Begin **********/var a=parseInt(args1);var b=parseInt(args2,16);var c=parseFloat(args3);/********** End **********/return a+b+c;
}

JavaScript学习手册五：JS数组提交中

第1关：数组的创建、读写和长度

任务描述

本关任务：掌握创建数组的方法，获取数组的元素和长度

具体要求如下：

已知两个数组array1和array2，参数a是一个整数，先判断a的值与数组array1的长度值相等，如果相等，返回数组array1的最后一个元素，反之，则返回数组array2的最后一个元素；

var array1 = [1,2,3,"js",4,true,"hello"];
var array2 = [true,true,"java",2.1];
function mainJs(a) {//请在此处编写代码/*********begin*********/var a1=array1.length;var a2=array2.length;if(a1==a)return array1[a1-1];else    return array2[a2-1];/*********end*********/
}

第2关：数组元素的增减

任务描述

本关任务：掌握数组元素增减的方法。

具体要求如下：

将数组testArray的最后a个元素移动到最前面，这a个元素之间的相对位置不变，其余元素之间的相对位置不变；

比如将数组[1,2,3,4,5]最后2个元素移动到最前面，数组变为[4,5,1,2,3]；

返回移动结束后数组在索引b处的元素；

var testArray = [12,"java","js","c","c++",24,36,"python","c#","css"];
function mainJs(a,b) {a = parseInt(a);b = parseInt(b);//请在此处编写代码/*********begin*********/var a1=testArray.length;for(var i=a1-1;i>=a1-a;i--){var t=testArray.pop();testArray.unshift(t);}return testArray[b];/*********end*********/
}

第3关：数组的遍历和多维数组

任务描述

本关任务：将一个一维数组转换为二维数组，行优先。

具体要求如下：

将一维数组arr转为a行b列的二维数组，行优先；

返回该二维数组；

var arr = [1,2,3,4,5,6,7,8,9,0,10,11,12,13,14,15,16,17,18,19,20,21,23,22];
function mainJs(a,b) {a = parseInt(a);b = parseInt(b);//请在此处编写代码/*********begin*********/var array=new Array(a);for(var i=0;i<a;i++){array[i]=new Array(b);}var k=0;for(var i=0;i<a;i++){for(var j=0;j<b;j++){array[i][j]=arr[k++];}}arr=array;// console.log(arr);return arr;
}

第4关：数组的常用方法

任务描述

本关任务：掌握数组的常用方法。

具体要求如下：

获取字符串a在数组myArray的所有位置并组成一个位置数组；

获取字符串b在数组myArray的所有位置并组成一个位置数组；

合并这两个数组然后返回合并后的数组。

function mainJs(myArray) {myArray = myArray.split(",");//请在此处编写代码/*********begin*********/// console.log(myArray);var a1=new Array();var b1=new Array();var len=myArray.length;for(var i=0;i<len;i++){// console.log();if(myArray[i]=="a")a1.push(i);if(myArray[i]=="b")b1.push(i);}var c=a1.concat(b1);return c;/*********end*********/
}

第5关：数组的应用——内排序

任务描述

本关任务：掌握冒泡排序和选择排序。

具体要求如下：

函数mainJs(a)中的变量arr是一个数组，你需要对该数组进行选择排序；

返回选择排序进行过程中，在每一趟交换前，待排序子数组的最大元素的位置组成的数组；

比如对于上面相关知识中的数组[9,5,8,0,2,6]，第一次交换前，最大的元素9的索引是0，第二次交换前，最大元素8的索引是2，第三次交换前最大元素6的索引是0，第四次交换前最大元素5的索引是1，第五次交换前最大元素2的索引是1，第六次交换前最大元素0的索引是0。索引需要返回的数组是[0,2,0,1,1,0]；

function mainJs(a) {var arr = a.split(",");for(var i = 0;i < arr.length;i++) {arr[i] = parseInt(arr[i]);}//请在此处编写代码/*********begin*********/var count=new Array();var max=arr[0],cnt=0;for(var i=1;i<arr.length;i++){max=arr[0];cnt=0;var j;for(j=1;j<=arr.length-i;j++){if(arr[j]>max){max=arr[j];cnt=j;}}var t=arr[j-1];arr[j-1]=max;arr[cnt]=t;count.push(cnt);}// console.log(arr);// console.log(count);return count;/*********end*********/
}

JavaScript学习手册八：JS函数

第1关：用函数语句定义函数

任务描述

本关任务：用函数语句定义一个函数

具体要求如下：

定义一个名字为mainJs()的函数；

该函数有两个参数，均为字符串类型；

函数的功能是返回这两个参数的拼接结果

//请在此处编写代码
/********** Begin **********/
function mainJs(a,b)
{return a+b;
}/********** End **********/

第2关：用表达式定义函数

任务描述

本关任务：定义一个匿名函数。

具体要求如下：

定义一个匿名函数，将它赋值给变量myFunc；

该函数实现求一个三位数的各个位上的数字之和，比如123各个位上的数字分别为1、2和3，和是6；

function mainJs(a) {a = parseInt(a);//请在此处编写代码/********** Begin **********/var myFunc=function(a){var t1=parseInt(a%10);var t2=parseInt(a/10%10);var t3=parseInt(a/100);return t1+t2+t3;};/********** End **********/return myFunc(a);
}

第3关：函数的调用

任务描述

本关任务：根据要求调用不同的函数。

具体要求如下：

mainJs()代码区上面定义了三个函数，从上到下分别编号为1、2和3；

mainJs()有三个参数a、b和c，根据a的值（函数的编号，可取的值是1、2和3）调用相应的函数（可选的函数分别是getMax()、getMin()和getSum()，具体请参考代码！），并传入参数b和c，返回得到的结果；

比如a为1表示你需要调用函数getMax()；

//求最大值的函数
function getMax(b,c) {return b>c?b:c;
}//求最小值的函数
var getMin = function(b,c) {return b>c?c:b;
}//对象中的求和函数
var myObject = {id:1,name:"function",myFunc:function(b,c) {return b+c;}
}function mainJs(a,b,c) {a = parseInt(a);b = parseInt(b);c = parseInt(c);//请在此处编写代码/********** Begin **********/if(a==1){return getMax(b,c);}else if(a==2){return getMin(b,c);}else{return myObject.myFunc(b,c);}/********** End **********/
}

第4关：未定义的实参

任务描述

JavaScript的实际参数的个数有时候是不确定的。

本关任务：学习处理未定义的实参.

具体要求如下：

路口有四个方向的红绿灯，其默认值分别是green、green 、red和yellow；

对于函数mainJs(a,b,c,d)的四个参数，要求在没有传入实参或者传入undefined时，其分别设置为上述默认值；

最后返回四个字符串型参数的拼接结果，字符串中间用-符号隔开，如分别传入red、red、yellow和undefined时，返回red-red-yellow-yellow；

function mainJs(a,b,c,d) {//请在此处编写代码/********** Begin **********/if(a==undefined)a="green";if(b==undefined)b="green";if(c==undefined)c="red";if(d==undefined)d="yellow";return a+"-"+b+"-"+c+"-"+d;/********** End **********/
}

第5关：实参对象

任务描述

本关任务：编写一个计算若干个数的最大值的程序。

具体要求如下：

定义函数getMax()；

该函数计算并返回一组整数的最大值；

整数的个数不确定；

如果整数个数为0，直接返回0；

//请在此处编写代码
/********** Begin **********/
function getMax()
{var len=arguments.length;if(len==0)return 0;var max=arguments[0];for(var i=1;i<len;i++){if(max<arguments[i])max=arguments[i];}return max;
}/********** End **********/function mainJs(a) {a = parseInt(a);switch(a) {case 1:return getMax(23,21,56,34,89,34,32,11,66,3,9,55,123);case 2:return getMax(23,21,56,34,89,34,32);case 3:return getMax(23,21,56,34);case 4:return getMax(23,21,56,34,89,34,32,11,66,3,9,55,123,8888);case 5:return getMax();default:break;}
}

第6关：对象作为参数

任务描述

本关任务：编写一个以对象作为参数的函数。

具体要求如下：

函数objcetFunction()的参数是一个对象，该函数的功能是返回属性名1+':'+属性值1+','+属性名2+':'+属性值2+','+......+属性值n+','；

测试的时候我们会往mainJs()传入参数1或2或3，分别表示调用函数objectFunction()并传入对象参数park、computer或者city；

比如对于第一个对象park，该函数需要返回name:Leaf Prak,location:Fifth Avenue,todayTourists:4000,；

var park = {name:"Leaf Prak",location:"Fifth Avenue",todayTourists:4000
};var computer = {name:"Levenon",price:"$800",memory:"8G"
};var city = {name:"HangZhou",country:"Chine",population:9400000
}function objectFunction(object) {
//请在此处编写代码
/********** Begin **********/
// console.log();if(object.name=="Leaf Prak"){return ("name:"+object.name+","+"location:"+object.location+",todayTourists:"+object.todayTourists+",");}else if(object.name=="Levenon"){return ("name:"+object.name+","+"price:"+object.price+",memory:"+object.memory+",");}else{return ("name:"+object.name+","+"country:"+object.country+",population:"+object.population+",");}/********** End **********/
}function mainJs(a) {a = parseInt(a);switch(a) {case 1:return objectFunction(park);case 2:return objectFunction(computer);case 3:return objectFunction(city);default:break;}
}

第7关：函数对象

任务描述

本关任务：求数组中奇数或者偶数元素的个数。

具体要求如下：

已知getOddNumber(a)求数组a中奇元素的个数，getEvenNumber(a)求数组a中偶元素的个数；

完成函数getNumber(func,a)，实现：根据函数参数func的不同，求数组a中奇元素的个数或者偶元素的个数；

上一条提到的func的值只有可能是getOddNumber或者getEvenNumber

//求数组中奇数元素的个数
function getOddNumber(a) {var result = 0;for(var i = 0;i < a.length;i++) {if(a[i]%2 != 0)result++;}return result;
}//求数组中偶数元素的个数
function getEvenNumber(a) {var result = 0;for(var i = 0;i < a.length;i++) {if(a[i]%2 == 0)result++;}return result;
}function getNumber(func,a) {//请在此处编写代码/********** Begin **********/return func(a);/********** End **********/
}//测试接口
function mainJs(b,a) {a = a.split(",");var aLength = a.length;for(var i = 0;i < aLength;i++) {a[i] = parseInt(a[i]);}if(b == "getEvenNumber") {return getNumber(getEvenNumber,a);} else {return getNumber(getOddNumber,a);}
}

JavaScript学习手册十一：JSON

第1关：JSON对象

任务描述

本关任务：练习在JavaScript中定义JSON对象。

具体要求如下：

定义一个JSON对象JSONObject，它有三个属性：key1、key2和key3，它们的值分别是参数a、b和c；

删除其中名字为key3的属性；

删除完成后，遍历其余的所有属性，返回各属性的值连接成的字符串，中间用,隔开；

function mainJs(a,b,c) {//请在此处编写代码/********** Begin **********/var JSONObject={"key1":a,"key2":b,"key3":c};delete JSONObject.key3;var str="";str=str+JSONObject.key1+","+JSONObject.key2;return str;/********** End **********/
}

第2关：JSON数组

任务描述

本关任务：定义并操作JSON键值对中的值。

具体要求如下：

已知myJson的第三个属性的值是一个数组，参数a是一个数字，要求将数组中前a个元素（这些元素都是字符串类型）拼接起来，元素之间用,隔开，返回拼接后的字符串；

比如a为2的时候，你需要返回js,java。

var myJson = {"category":"computer","detail":"programming","language":["js","java","php","python","c"]
}
function mainJs(a) {a = parseInt(a);//请在此处编写代码/********** Begin **********/var str="";for(var i=0;i<a-1;i++){str=str+myJson.language[i]+",";}str=str+myJson.language[a-1];return str;/********** End **********/
}

第3关：JSON字符串

任务描述

本关任务：练习JSON字符串和JavaScript对象的相互转换。

具体要求如下：

先将JSON字符串JSONString转换为JavaScript对象JSONObject；

然后将JSONObject的key1属性的值设置为mainJs()函数的参数a；

最后将JSONObject转换为JSON字符串，并返回该字符串；

var JSONString = '{"key1":"value1","key2":"value2"}';
function mainJs(a) {//请在此处编写代码/********** Begin **********/JSONObject=JSON.parse(JSONString)JSONObject.key1=a;return JSON.stringify(JSONObject);/********** End **********/
}

JavaScript学习手册十三：HTML DOM——文档元素的操作（一）

第1关：通过id获取文档元素

任务描述

本关任务：通过id获取指定的文档元素。

具体要求如下：

获取本文档中id为a1的文档元素，要求用id获取文档元素；

将获取的元素赋值给变量myElement；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>get element by id</title>
</head>
<body><a id="a1" src="https://www.google.com">Google</a><p id="p1">this is a text</p><script><!-- 请在此处编写代码 --><!---------Begin--------->var myElement=document.getElementById("a1");<!---------End--------->myElement.href="https://www.educoder.net";</script>
</body>
</html>

第2关：通过类名获取文档元素

任务描述

本关任务：通过类名获取指定的文档元素。

具体要求如下：

通过getElementsByClassName()方法获取文档中唯一的<p>元素；

将获取到的结果赋值给变量myElement。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>get element by name</title>
</head>
<body><img src="" class="myName"/><form class="myName" id="myForm"></form><div class="myName">This is quote</div><p class="myName">This is what you should get</p><script><!-- 请在此处编写代码 --><!---------Begin--------->var myElement=document.getElementsByClassName("myName");<!---------End--------->myElement[3].innerText="I changed the text";</script>
</body>
</html>

第3关：通过标签名获取文档元素

任务描述

本关任务：通过标签名获取指定的文档元素。

具体要求如下：

获取第二个div元素下的第二个a元素，要求通过使用标签名获取；

将获取到的结果赋值给变量myElement。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>get element by id</title></head>
<body><div class="diva"><a href="https://www.educoder.net">EduCoder</a><a href="https://www.facebook.com">FaceBook</a></div><div class="divb"><a href="https://www.twitter.com">Twitter</a><form name="myForm"></form><a href="https://www.nudt.edu.cn">NUDT</a></div><p id="pp">this is a text</p>
<script><!-- 请在此处编写代码 --><!---------Begin--------->var myElement=document.getElementsByTagName("div")[1].getElementsByTagName("a")[1];<!---------End--------->myElement.innerText="nudt";
</script>
</body>
</html>

第4关：html5中获取元素的方法一

任务描述

本关任务：使用querySelector获取指定的文本元素。在你成功的获得元素后，我们将输出该元素；

具体要求如下：

获取html代码里面的第一个文本元素，并赋值给变量pElement，要求使用querySelector方法。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><p >你需要获得的元素是我</p><p >是楼上</p><p>是楼上的楼上</p><script><!-- 请在此处编写代码 --><!---------Begin--------->var pElement=document.querySelector("p");<!---------End--------->console.log(pElement);</script>
</body>
</html>

第5关：html5中获取元素的方法二

任务描述

本关任务：使用querySelectorAll()获取html里面所有的文本元素。

在你成功的获得元素后，我们将输出该元素；

具体要求如下：

获取html代码里面的所有的p元素，并赋值给变量pElement，要求使用querySelectorAll方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><p >你需要获得的元素是我</p><p>包括我</p><p>还有我</p><script><!-- 请在此处编写代码 --><!---------Begin--------->var pElement=document.querySelectorAll("p")<!---------End--------->console.log(pElement);</script>
</body>
</html>

第6关：节点树上的操作

任务描述

本关任务：练习节点树的操作。

具体要求如下：

已知变量cl2为获取到的类为c12的节点；

要求获取该div内文本为黄的option标签，并赋值给变量myElement；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body>
<div id="div1"><div class="cl1"><p>文本</p><a>超链接</a></div><div class="cl2"><select><option>红</option><option>黄</option><option>蓝</option></select></div>
</div><script>var cl2 = document.getElementById("div1").lastElementChild;<!-- 请在此处编写代码 --><!---------Begin--------->//   var cl1=document.getElementById("cl2");var myElement=cl2.firstElementChild.children[1];<!---------End--------->myElement.innerText = "绿";</script>
</body>
</html>

第7关：属性值的获取

任务描述

本关任务：获取指定的属性。

具体要求如下：

获取html代码里面<img>的class属性的值；

结果赋值给变量srcValue；

获取文档元素通过类名来获取。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><p id="p"></p><img class="imgClass"/><a id="a"></a><script><!-- 请在此处编写代码 --><!---------Begin--------->var srcValue=document.getElementsByClassName("imgClass")[0].className;<!---------End--------->console.log(srcValue);</script>
</body>
</html>

第8关：属性值的设置

任务描述

本关任务：设置表单的提交方法。

具体要求如下：

通过id来获取form1元素（只有一个），赋值给变量myElement；

通过操作myElement将form1的method属性改为post；

要求必须分两步进行。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><p id="p"></p><form id="form1" method="get" target="https://abc.xyz/def/ghi">This is form</form><a id="a"></a><script><!-- 请在此处编写代码 --><!---------Begin--------->var myElement=document.getElementById("form1");myElement.setAttribute("method","post");<!---------End--------->console.log(document.getElementById("form1").method);</script>
</body>
</html>

JavaScript学习手册十四：HTML DOM——文档元素的操作（二）

第1关：创建节点

任务描述

本关任务：创建一个表单<form>节点。

具体要求如下：

创建一个form节点，然后赋值给变量newNode，设置节点的id值为myForm，method值为post，如下所示：

<form id="myForm" method="post"></form>

字符串类型参数用""包含在内。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><p></p><script><!-- 请在此处编写代码 --><!---------Begin--------->var newNode=document.createElement("form");newNode.setAttribute("id","myForm");newNode.setAttribute("method","post");<!---------End--------->document.body.appendChild(newNode);console.log(newNode.method);</script>
</body>
</html>

第2关：插入节点

任务描述

ul标签在html中表示无序列表，li标签标识其中的列表项。

本关任务：在无序列表中插入新的列表项。

具体要求如下：

使用createElement方法创建一个li类型的新节点newNode；

通过innerText方法设置该节点内部文本的内容为Canada；

通过getElementById和appendChild方法将newNode节点添加到ul标签下面，作为它的最后一个子节点；

所有的字符串类型参数请用""包含在内；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><ul id="ul1"><li>America</li><li>Mexio</li></ul><script><!-- 请在此处编写代码 --><!---------Begin--------->var newNode=document.createElement("li");newNode.innerText="Canada";var Pnode=document.getElementById("ul1");Pnode.appendChild(newNode);<!---------End--------->var out = document.getElementsByTagName("li")[2];console.log(out.innerText);</script>
</body>
</html>

第3关：删除节点

任务描述

ol标签在html中表示有序列表，li标签表示其中的列表项。

本关任务：在有序列表中删除指定的列表项。

，要求按照步骤进行：

获取id为browser的节点，赋值给变量parent;

获取id为opera的节点，赋值给变量child；

通过removeChild方法删除child节点；

获取节点使用getElementById方法；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><ol id="browser"><li id="chrome">Chrome</li><li id="firefox">Firefox</li><li id="opera">Opera</li><li id="safari">Safari</li></ol><script><!-- 请在此处编写代码 --><!---------Begin--------->var parent=document.getElementById("browser");var child=document.getElementById("opera");parent.removeChild(child);<!---------End---------></script>
</body>
</html>

第4关：替换节点

任务描述

本关任务：替换指定的节点。

具体要求如下，请按步骤操作：

获取id为parent的节点（父节点），赋给变量parent；

获取id为old的节点（子节点），赋给变量old；

newChild已知，用newChild替换子节点old；

使用getElementById方法获取节点；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><ol id="parent"><a id="old" href="https://www.google.com">Google</a></ol><script>var newChild = document.createElement("a");newChild.innerText = "eduCoder";newChild.href = "https://www.educoder.net";<!-- 请在此处编写代码 --><!---------Begin--------->var parent=document.getElementById("parent");var old=document.getElementById("old");parent.replaceChild(newChild,old);<!---------End---------></script>
</body>
</html>

第5关：综合练习

任务描述

本关任务：练习节点的操作。

具体要求如下：

继续拓展相关知识中介绍的功能，要求第一列选择安徽省后，第二列下拉的选项中出现黄山市和合肥市两个选项，按照以下步骤进行；

创建一个option类型节点child2；

设置child2的value属性的值为HeFeiCity；

设置child2的显示的文本为合肥市;

将child2设置为id为city的节点下面的第二个子节点；

使用getElementById方法获取节点；

<html>
<head>
<title>myTitle</title>
<meta charset="utf-8" />
</head>
<body>
<select id="province" onChange="changeCity()"><option value="BeiJing" id="bj">北京</option><option value="AnHui" id="ah">安徽</option>
</select>
<select id="city"><option value="BeiJingCity">北京市</option>
</select>
<script>
function changeCity() {var province = document.getElementById("province");var city = document.getElementById("city");var length = city.children.length;for(var i = length-1;i >= 0;i--) {city.removeChild(city.children[i]);}if(province.value == "BeiJing") {var child1 = document.createElement("option");child1.value="BeiJingCity";child1.innerText="北京市"city.appendChild(child1);} else {var child1 = document.createElement("option");child1.value="HuangShanCity";child1.innerText="黄山市";city.appendChild(child1);/*********Begin*********/var child2=document.createElement("option");child2.value="HeFeiCity";child2.innerText="合肥市";city.appendChild(child2);/*********End*********/}
}
</script>
</body>
</html>

JavaScript学习手册十五：事件处理

第1关：注册事件处理程序

任务描述

本关任务：为指定的事件注册事件处理程序。

具体要求如下：

通过getElementById()获取id为button2的按钮，赋值给变量button2，然后使用button2.onclick()方法为该按钮绑定事件处理程序listenButton2()；

通过getElementById()获取id为button3的按钮，赋值给变量button3，然后使用button3.addEventListener()方法为该按钮绑定click事件的事件处理程序listenButton3()。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><button id="button1" onclick="listenButton1()">按钮1</button><button id="button2">按钮2</button><button id="button3">按钮3</button><script>function listenButton1() {console.log("监听button1");}function listenButton2() {console.log("监听button2");}function listenButton3() {console.log("监听button3");}//请在此处编写代码/********** Begin **********/var button2=document.getElementById("button2");// button2.onclick=listenButton2();button2.addEventListener("click",listenButton2);var button3=document.getElementById("button3");button3.addEventListener("click",listenButton3);// button3.onclick=listenButton3();/********** End **********/</script>
</body>
</html>

第2关：文档加载事件

任务描述

本关任务：处理文档加载事件。

具体要求如下：

在文档加载完成后（即文档加载事件发生后），在控制台输出Welcome!；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body onload="loadEvent()"><script>function loadEvent() {//请在此处编写代码/********** Begin **********/console.log("Welcome!");/********** End **********/}       </script>
</body>
</html>

第3关：鼠标事件

任务描述

本关任务：练习鼠标事件的处理。

具体要求如下：

第一步：通过id获取button（按钮）元素，赋给变量myButton；

第二步：通过addEventListener为按钮绑定一个事件处理程序，用来处理按钮的鼠标单击事件；

第三步：在事件处理程序中，通过id获取p元素，赋给变量myElement，然后设置当按钮被单击后，p里面的文本被改变为clicked；

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><p id="p">text</p><button id="but">button</button><script>//请在此处编写代码/********** Begin **********/var myButton=document.getElementById("but");myButton.addEventListener("click",function(){var myElement=document.getElementById("p");myElement.textContent="clicked";})/********** End **********/</script></body>
</html>

第4关：键盘事件

任务描述

本关任务：利用键盘事件判断用户在网页上是否使用了回车键。

具体要求如下，请按步骤操作：

获取用户按下的按键的编码，赋值给变量code；

判断code的值是否为13，是则在控制台打印cannot use enter。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body onkeypress="pressEvent(event)"><script>function pressEvent(event) {//请在此处编写代码/********** Begin **********/var code=event.which;if(code==13){console.log("cannot use enter");}/********** End **********/}          </script></body>
</html>

第5关：表单事件

任务描述

本关任务：使用change事件检验用户的输入。

具体要求如下：

通过id属性获取id为input的文本框，赋值给变量ele；
获取输入框中当前文本的长度，赋值给变量len；
判断len的值是否小于等于12，是则打印出too short input；

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><form><input id="input" type="text" onchange="changeEvent()" /><input id="input2" type="text"  /></form><script>function changeEvent() {//请在此处编写代码/********** Begin **********/var ele=document.getElementById("input");var len=ele.value.length;if(len<=12)console.log("too short input");/********** End **********/}</script></body>
</html>

第6关：拖动事件

任务描述

本关任务：学习处理拖动事件。

具体要求如下：

在第一个Begin和End中间设置p元素为可拖动的；

在第二个Begin和End中间使用event.target.innerText在控制台打印p元素里面的内容；

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div><!-- 请在此处编写代码 --><!---------Begin---------><p ondrag="dragging(event)" id="p1" draggable="true">drag me</p><!---------End---------></div><script>function dragging(event) {/********** Begin **********/console.log(event.target.innerText);/********** End **********/}</script></body>
</html>

第7关：事件冒泡

详解事件冒泡与捕获，戳连接事件冒泡与捕获

任务描述

本关任务：阻止事件冒泡的发生。

具体要求如下：

在id为div2的元素上面阻止click事件的冒泡。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="div1" onclick="click1()"><div id="div2" onclick="click2()"><p id="p" onclick="click3()">click me!</p></div></div><script>function click1() {console.log("root");}function click2() {//请在此处编写代码/********** Begin **********/window.event?window.event.cancelBubble=true:event.stopPropagation();/********** End **********/console.log("parent");}function click3() {console.log("child");}</script>
</body>
</html>

JavaScript学习手册十六：浏览器对象模型

第1关：定时器

任务描述

本关任务：学习设置和取消定时器

，具体要求如下：

第一步，设置执行一次的定时任务timerTask()，延迟为2000毫秒，任务的唯一标识赋值给变量timeId。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p onclick="handleTimer()">set timer then undo</p><script>var timeId;function timerTask() {console.log("this is timer task");}function handleTimer() {//请在此处编写代码/********** Begin **********/timeId=setTimeout(timerTask,2000);/********** End **********/}</script>
</body>
</html>

第2关：循环定时器

任务描述

本关任务：取消指定的定时任务。

具体要求如下，请按步骤操作：

取消定时任务timerTask1()，要求使用本关介绍的方法。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p onclick="task1()">this is task onea</p><p onclick="task2()">this is task two</p><p onclick="removeTask1()">try to remove task one</p><script>var timeId1;var timeId2;function timerTask1() {console.log("timerTask1!");}function timerTask2() {console.log("timerTask2!");}function task1() {timeId1 = window.setInterval(timerTask1,2000);}function task2() {timeId2 = window.setInterval(timerTask2,1500);}function removeTask1() {//请在此处编写代码/********** Begin **********/window.clearInterval(timeId1);/********** End **********/}</script>
</body>
</html>

第3关：location对象

任务描述

本关任务：读取主机名以及实现页面跳转

具体要求如下：

第一步，获取location对象，赋值给变量loc；

第二步，利用loc打印出当前页面地址的主机名；

第三步，利用loc实现跳转到https://www.educoder.net/forums/categories/all?order=newest；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p onclick="openNew()">Click me to new page!</p><script>function openNew() {//请在此处编写代码/********** Begin **********/var loc;loc=window.location;console.log(loc.hostname);window.location.href="https://www.educoder.net/forums/categories/all?order=newest";/********** End **********/}</script>
</body>
</html>

第4关：对话框

任务描述

本关任务：练习输入型对话框的使用。

具体要求如下：

第一步：弹出一个输入型对话框（输入框），用户的输入结果赋值给变量result，输入框提示语为your name，输入框默认值为Xiao Ming；

第二步：使用result判断用户的输入是否为null（不是字符串null，是表示空的null），如果是，在控制台打印name cannot be null

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p onclick="inputName()">Click to input name!</p><script>function inputName() {var result;//请在此处编写代码/********** Begin **********/result=window.prompt("your name","Xiao Ming");if(!result){console.log("name cannot be null");}/********** End **********/}</script>
</body>
</html>

第5关：窗口

任务描述

本关任务：练习窗口的操作。

具体要求如下：

第一步，打开一个窗口，它的文档的地址是Demo.html，name属性是窗口名字window_name，specs和replace不用设置。将打开的窗口赋值给变量myWindow；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p onclick="openNewWindow()">open new window</p><script>var myWindow;function openNewWindow() {//请在此处编写代码/********** Begin **********/myWindow=window.open("Demo.html","window_name");/********** End **********/}</script>
</body>
</html>

JavaScript 学习手册二相关推荐

[导入][转]sap学习手册二
SAP学习手册二作者:sunxufeng 有没有调整IDES4.6的中文包参数的步骤呢? 在导入中文包后直接手工修改有关参数,不要用CZ10去修改假定为D盘,路径为D:usrsapC11syspro ...
JavaScript学习（二十九）—JS常用的事件
JavaScript学习(二十九)-JS常用的事件一.页面相关事件 onload事件:当页面中所有的标签都加载完成后厨房该事件,格式:window.onload <body><sc ...
JavaScript学习（二十八）—事件冒泡和事件捕获
JavaScript学习(二十八)-事件冒泡和事件捕获一.什么是事件流? 简单说,事件流就是指事件的执行顺序,他包含两种模式:事件冒泡.事件捕获. (一).事件冒泡最常用的一种模式,就是指事件的执 ...
JavaScript学习（二十七）—解决IE以及IE8之前的浏览器下面的添加事件或者删除事件
JavaScript学习(二十七)-解决IE以及IE8之前的浏览器下面的添加事件或者删除事件 addEventListener和removeEventListener在IE8以及IE浏览器下面不支持, ...
JavaScript学习（二十六）—事件处理程序的添加与删除
JavaScript学习(二十六)-事件处理程序的添加与删除一.什么是事件? 所谓事件就是指用户或页面自身的某些行为,如点击鼠标,敲击键盘都是属于事件. 二.事件处理程序当事件被触发时会引起某些程 ...
JavaScript学习（二十五）—实现无缝滚动
JavaScript学习(二十五)-实现无缝滚动效果如下: 代码如下: <!DOCTYPE html> <html lang="en"><head& ...
JavaScript学习（二十三）—scrollTop练习
JavaScript学习(二十三)-scrollTop练习 <!DOCTYPE html> <html lang="en"><head>< ...
JavaScript学习（二十二）—动态创建表格
JavaScript学习(二十二)-动态创建表格效果如下: 代码如下: <!DOCTYPE html> <html lang="en"><head& ...
JavaScript学习（二十）—DOM中常用的属性
JavaScript学习(二十)-DOM中常用的属性 1.clientWidth属性作用:获取元素或页面的可视的区域的宽度格式:节点.clientWidth 2.clientHeight属性作用 ...

JavaScript 学习手册二

JavaScript 学习手册二：JS 数据类型

第1关：JavaScript 数据类型介绍

第2关：JavaScript 数据类型转换

JavaScript学习手册五：JS数组提交中

第1关：数组的创建、读写和长度

第2关：数组元素的增减

第3关：数组的遍历和多维数组

第4关：数组的常用方法

第5关：数组的应用——内排序

JavaScript学习手册八：JS函数

第1关：用函数语句定义函数

第2关：用表达式定义函数

第3关：函数的调用

第4关：未定义的实参

第5关：实参对象

第6关：对象作为参数

第7关：函数对象

JavaScript学习手册十一：JSON

第1关：JSON对象

第2关：JSON数组

第3关：JSON字符串

JavaScript学习手册十三：HTML DOM——文档元素的操作（一）

第1关：通过id获取文档元素

第2关：通过类名获取文档元素

第3关：通过标签名获取文档元素

第4关：html5中获取元素的方法一

第5关：html5中获取元素的方法二

第6关：节点树上的操作

第7关：属性值的获取

第8关：属性值的设置

JavaScript学习手册十四：HTML DOM——文档元素的操作（二）

第1关：创建节点

第2关：插入节点

第3关：删除节点

第4关：替换节点

第5关：综合练习

JavaScript学习手册十五：事件处理

第1关：注册事件处理程序

第2关：文档加载事件

第3关：鼠标事件

第4关：键盘事件

第5关：表单事件

第6关：拖动事件

第7关：事件冒泡

JavaScript学习手册十六：浏览器对象模型

第1关：定时器

第2关：循环定时器

第3关：location对象

第4关：对话框

第5关：窗口

JavaScript 学习手册二相关推荐

最新文章

热门文章