JavaScript 学习手册二

最新推荐文章于 2024-03-25 09:17:36 发布

好啊啊啊啊

最新推荐文章于 2024-03-25 09:17:36 发布

阅读量4.1k

点赞数 24

分类专栏： web 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_46675545/article/details/117306238

版权

web 专栏收录该内容

6 篇文章 5 订阅

订阅专栏

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>

好啊啊啊啊

关注

24
点赞
踩
60

收藏

觉得还不错? 一键收藏
3
评论
JavaScript 学习手册二

JavaScript 学习手册二：JS 数据类型第1关：JavaScript 数据类型介绍任务描述本关任务：在函数 objectTest() 内部定义了六个变量 a、b、c、d、e、f，并已经赋值，你需要判断它们各是什么数据类型。变量 aType、bType、cType、dType、eType、fType 分别表示上面六个变量的数据类型的名字，你需要给他们赋值。比如变量 a 如果是数字类型，需要给变量 aType 赋值字符串 number。可选的数据类型名如下： number、string、b
复制链接

扫一扫