JavaScript下部分--头歌(educoder)实训作业题目及答案

这篇具有很好参考价值的文章主要介绍了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关: 窗口文章来源地址https://www.toymoban.com/news/detail-425842.html


 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>

到了这里,关于JavaScript下部分--头歌(educoder)实训作业题目及答案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 头歌(educoder)实训作业题目及答案分享 ——1-7 Java入门-分支与循环练习

    📜个人简介 :  作者简介:大家好,我是Passenger.n✌️  支持一下:点赞👍+收藏🌟+留言📪 📣 系列专栏:java基础🍁 ✉️格言:花有重开日,人无再少年!🌞 万事开头难,既然迈开了这一步,那就坚持走下去! 这是我的第一篇博客,希望萌新看了有收获,大佬看了给指

    2024年02月04日
    浏览(82)
  • 头歌(educoder)实训作业题目及答案分享 ——1-3 Java入门 - 运算符和表达式

    📜个人简介 :  作者简介:大家好,我是Passenger.n  支持一下:点赞👍+收藏🌟+留言📪 📣 系列专栏:java基础🍁 ✉️格言:花有重开日,人无再少年!🌞 万事开头难,既然迈开了这一步,那就坚持走下去! 这是我新的一篇博客,希望萌新看了有收获,大佬看了给指路😝

    2024年02月07日
    浏览(139)
  • ​​​​​​​头歌(EduCoder)Java实训作业答案

    搜集整理了一份最新最全的头歌(EduCoder)Java实训作业答案,分享给大家~ (EduCoder)是信息技术类实践教学平台。(EduCoder)涵盖了计算机、大数据、云计算、人工智能、软件工程、物联网等专业课程。超60000个实训案例,建立学、练、评、测一体化实验环境。   第一关 第二关 C

    2024年02月08日
    浏览(44)
  • 获取头歌实训参考答案(EduCoder)

    头歌EduCoder平台实训答案在此,里面搜集了一些答案,可以查查有没有想看的。 https://edaser.github.io/ 一定 不要直接复制答案 ,建议还是自己做,实在不会做的,参考看完后要独立完成。 在这里可以查询一些实训的答案,后台的数据库记录了几百个实训关卡的答案,实现的方

    2024年02月11日
    浏览(41)
  • 头歌实践教学平台答案(Java实训作业答案)

    搜集整理了一份最新最全的头歌(EduCoder)Java实训作业答案,分享给大家.(EduCoder)是信息技术类实践教学平台。(EduCoder)涵盖了计算机、大数据、云计算、人工智能、软件工程、物联网等专业课程。超60000个实训案例,建立学、练、评、测一体化实验环境。这份是头歌实践教学平

    2023年04月11日
    浏览(83)
  • 头歌平台-人工智能技术应用-实践学习与答案2(补充实训部分)

    注:这一题的输出没有很符合我的预期,所以我干脆直接改了他的print输出,用自己更喜欢的方式输出 注: 这里对字典的统计我引入了defaultdict函数(这个函数是用来新建一个键值对的),算是额外引入了一个算法库使用 测试用例: 一、 针对集体宿舍人员如何科学防控的问

    2024年02月07日
    浏览(72)
  • Educoder_头歌实训_离散数学_图论

    目录 第1关:图的概念 任务描述 相关知识 图的概念 习题参考 第2关:图的表示 任务描述 相关知识 图的表示 编程要求 测试说明 习题参考 第3关:单源最短通路问题 任务描述 相关知识 单源最短通路 Dijkstra算法 编程要求 测试说明 习题参考 本关任务:学习图的基本概念,完

    2024年02月03日
    浏览(44)
  • 【头歌educoder】离散数学实训参考-第一章-集合

    目录 1. 集合及其基本运算的实现 第一关:set简单应用 第二关:《仲夏夜之梦》中的回文单词对 第三关:求幂集  第四关:计算n个集合的笛卡尔乘积 2. 自然数系统 第一关:NaturalNumber的输出  第二关:NaturalNumber的加法 第三关:NaturalNumber的乘法 第四关:将NaturalNumber转换为阿

    2024年02月09日
    浏览(48)
  • Educoder/头歌JAVA实训——JAVA循环与分支语句编程练习

    为了完成本关任务,你需要掌握:1、数组的定义; 2、循环语句的熟练使用。 实现思路: 可以通过三层循环的方式,第一层循环用于控制百位数的变化,第二层循环用于控制十位数的变化,第三层循环用于控制个位数的变化。 由于题目要求百位数、十位数、个位数互不重复

    2023年04月08日
    浏览(75)
  • 【Educoder作业】C&C++函数实训

    是不是学会了函数就可以做任何题了… T1 登月纸桥 给出了函数的基本定义,可以在主函数上面定义函数,然后在主函数下面写函数。可能会显得可读性强一点? T2 几点几分了? 这里拆解进制的手段用的是之前博客里的拆解十进制的手段。最高位用下取整的除法,低位用取模

    2024年02月03日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包