当前位置：
  1. 首页
  2. java
  3. 正文
本文介绍: JavaScript–头歌（educoder）实训作业题目及答案

目录

 JSON

第1关: JSON对象

第2关: JSON数组

第3关: JSON字符串

Math、日期和异常处理

第1关: Math类

第2关: Date类

第3关: JavaScript错误

HTML DOM——文档元素的操作（一）

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

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

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

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

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

第6关: 节点树上的操作

第7关: 属性值的获取

第8关: 属性值的设置

HTML DOM——文档元素的操作（二）

第1关: 创建节点

第2关: 插入节点

第3关: 删除节点

第4关: 替换节点

第5关: 综合练习

事件处理

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

第2关: 文档加载事件

第3关: 鼠标事件

第4关: 键盘事件

第5关: 表单事件

第6关: 拖动事件

第7关: 事件冒泡

浏览器对象模型

第1关: 定时器

第2关: 循环定时器

第3关: location对象

第4关: 对话框

第5关: 窗口

 JSON

第1关: JSON对象

function mainJs(a,b,c) {
    //请在此处编写代码
	/********** Begin **********/
    var JSONObject = {"key1":a,"key2":b,"key3":c};//定义JSON对象
    delete JSONObject.key3;//删除名字为key3的属性
	var result = "";
	for(var att in JSONObject) {//遍历剩余所有的属性
		result = result+JSONObject[att]+",";
	}
	return result.slice(0,-1);
   /********** End **********/
}

第2关: JSON数组

var myJson = {
	"category":"computer",
	"detail":"programming",
	"language":[
	"js","java","php","python","c"
	]
}

function mainJs(a) {
	a = parseInt(a);
    //请在此处编写代码
	/********** Begin **********/
    var result = "";
    for(var i = 0;i < a;i++) {
        result = result+myJson.language[i]+",";
    }
    return result.slice(0,-1);
   /********** End **********/
}

第3关: JSON字符串

var JSONString = '{"key1":"value1","key2":"value2"}';
function mainJs(a) {
    //请在此处编写代码
	/********** Begin **********/
	//JSON字符串转换为JSON对象
    var JSONObject = JSON.parse(JSONString);
	//修改key1属性的值为参数a
	JSONObject.key1 = a;
	//JSON对象转换为JSON字符串并返回
    return JSON.stringify(JSONObject);
   /********** End **********/
}

Math、日期和异常处理

第1关: Math类

function mainJs(a) {
    a = parseInt(a);
    //请在此处编写代码
	/********** Begin **********/
    var b = Math.ceil(a);
    var c = Math.floor(a);
    var d = Math.sqrt(a);
    var e = Math.round(a);
    var f = Math.sin(a);
    return Math.max(b,c,d,e,f)+Math.min(b,c,d,e,f);
   /********** End **********/
}

第2关: Date类

function mainJs(a) {
    a = parseInt(a);
    var date = new Date(a);
    //请在此处编写代码
	/********** Begin **********/
    var year = date.getFullYear();
    var month = date.getMonth();
    var cal = date.getDate();
    var day = date.getDay();
    return year+","+month+","+cal+","+day;
   /********** End **********/
}

第3关: JavaScript错误

function mainJs(a) {
    //请在此处编写代码
	/********** Begin **********/
    try {
        if(a < 0)
            throw new Error("negative cannot be rooted");
        if(a == 0)
            throw new Error("zero cannot be numerator");
        return 1/(Math.sqrt(a));
    }catch(err) {
        return err.message;
    }
    /********** End **********/
}

HTML DOM——文档元素的操作（一）

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

<!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关: 通过类名获取文档元素

<!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>
    <q class="myName">This is quote</q>
    <p class="myName">This is what you should get</p>
    <script>
		<!-- 请在此处编写代码 -->
        <!---------Begin--------->
        var myElement = document.getElementsByClassName("myName")[3];
        <!---------End--------->
        myElement.innerText="I changed the text";
    </script>
</body>
</html>

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

<!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 temp= document.getElementsByTagName("div")[1];
     var myElement = temp.getElementsByTagName("a")[1];
    <!---------End--------->
    myElement.innerText="nudt";
</script>
</body>
</html>

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

<!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中获取元素的方法二

<!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关: 节点树上的操作

<html>
<head>
<title>myTitle</title>
<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 myElement = cl2.firstElementChild.children[1];
      <!---------End--------->
      myElement.innerText = "绿";
    </script>
</body>
</html>

第7关: 属性值的获取

<!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 myElement = document.getElementsByClassName("imgClass")[0];
        var srcValue = myElement.className;
        <!---------End--------->
        console.log(srcValue);
    </script>
</body>
</html>

第8关: 属性值的设置

<!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.method = "post";
        <!---------End--------->
        console.log(document.getElementById("form1").method);
    </script>
</body>
</html>

HTML DOM——文档元素的操作（二）

第1关: 创建节点

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

第2关: 插入节点

<!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";
        document.getElementById("ul1").appendChild(newNode);
        <!---------End--------->
        var out = document.getElementsByTagName("li")[2];
        console.log(out.innerText);
    </script>
</body>
</html>

第3关: 删除节点

<!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关: 替换节点

<!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关: 综合练习

<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>

事件处理

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

<!DOCTYPE html>
<html lang="en">
<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;
        var button3 = document.getElementById("button3");
        button3.addEventListener("click",listenButton3);
        /********** End **********/
    </script>
</body>
</html>

第2关: 文档加载事件

<!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关: 鼠标事件

<!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.innerText="clicked";
        	})
        	/********** End **********/
    	</script>
	</body>
</html>

第4关: 键盘事件

<!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关: 表单事件

<!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关: 拖动事件

<!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关: 事件冒泡

<!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>

浏览器对象模型

第1关: 定时器

<!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 = window.setTimeout(timerTask,2000);
            /********** End **********/
        }
    </script>
</body>
</html>

第2关: 循环定时器

<!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对象

<!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 = window.location;
            console.log(loc.hostname);
            loc.href = "https://www.educoder.net/forums/categories/all?order=newest";
            /********** End **********/
        }
    </script>
</body>
</html>

第4关: 对话框

<!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", "XiaoMing");
            if (result === null) {
                console.log("name cannot be null");
            }
           /********** End **********/
        }
    </script>
</body>
</html>

第5关: 窗口

<!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>

原文地址:https://blog.csdn.net/qq_35353972/article/details/127229443

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_14189.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

上一篇 学习script setup 语法糖
下一篇 vue+face-api.js实现前端人脸识别功能

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。