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

北沐xxx 2024-02-28 原文

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 lt gt 34 json 前端

有关JavaScript下部分--头歌（educoder）实训作业题目及答案的更多相关文章

ruby-on-rails - 在所有延迟的作业之前 Hook - 2
是否可以在所有delayed_job任务之前运行一个方法？基本上，我们试图确保每个运行delayed_job的服务器都有我们代码的最新实例，所以我们想运行一个方法来在每个作业运行之前检查它。(我们已经有了“check”方法并在别处使用它。问题只是关于如何从delayed_job中调用它。) 最佳答案现在有一种官方方法可以通过插件来做到这一点。这篇博文通过示例清楚地描述了如何执行此操作http://www.salsify.com/blog/delayed-jobs-callbacks-and-hooks-in-rails(本文中描述
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案那是一个javascript链接。Mechan
ruby - 脚本在命令行中成功执行但不是作为 cron 作业 - 2
我有一个bash脚本，它运行一个ruby脚本来获取我的Twitter提要。##/home/username/twittercron#!/bin/bashcd/home/username/twitterrubytwitter.rbfriends命令行运行成功/home/username/twittercron但是当我尝试将它作为cronjob运行时，它运行了但无法获取提要。##crontab-e*/15*****/home/username/twittercron脚本已经chmod+x。不知道为什么会这样。有什么想法吗？最佳答案
ruby - 在 RVM env 的 Ruby cron 作业中找不到 Gem - 2
我正在尝试在RVM环境中运行10.5的旧PPC机器上运行一个简单的ruby脚本。在SO上搜索，我遵循了这个post中选择的答案.这是cron中的结果行:SHELL=/bin/bash00****BASH_ENV=~/.bash_profile&&/bin/bash-c'~/deggy/onlineGW.rb'此命令在用户sam的根目录下的Bash中运行良好。这是我脚本的重要部分:#!/usr/bin/envrubyrequire'open-uri'require'nokogiri'...这是cron的错误输出:X-Cron-Env:X-Cron-Env:X-Cron-Env:X-C
javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2
我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？最佳答案如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文
ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2
我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如
ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2
出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？最佳答案是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=
ruby-on-rails - delayed_job 作为守护进程运行时作业失败。使用 rake 作业时运行良好 :work - 2
我实在是无计可施了。我不明白为什么它不起作用。我创建了一个类，我使用rake命令对其进行调用和排队。当我使用“rakejobs:work”运行worker并调用命令“rakeget_updates”时，它执行得很好。但是，当我将worker作为守护进程运行时(RAILS_ENV=productionbin/delayed_jobstart)并调用命令“rakeget_updates”时，它会产生错误。app/workers/get_updates.rbclassGetUpdatesdefperformbeginning=Time.nowincludeSoapHelperrequire'
ruby-on-rails - 如何将自定义 delayed_job 作业与 ActiveJob 一起使用？ - 2
我正在使用DelayedJob，我想更新我的Rails4.2应用程序以使用ActiveJob。问题是我有一堆看起来像这样的自定义作业:AssetDeleteJob=Struct.new(:user_id,:params)dodefperform#codeend#moremethodsn'stuffend然后在某处的Controller中，作业使用以下语法排队:@asset_delete_job=AssetDeleteJob.new(current_admin_user.id,params)Delayed::Job.enqueue@asset_delete_job我想找到ActiveJo

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关: 窗口

有关JavaScript下部分--头歌（educoder）实训作业题目及答案的更多相关文章

随机推荐