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