目录
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属性的值为参数aJSONObject.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获取文档元素
get element by id Googlethis is a text
var myElement = document.getElementById("a1");myElement.href="https://www.educoder.net";第2关: 通过类名获取文档元素
get element by name 
This is quote
This is what you should get
var myElement = document.getElementsByClassName("myName")[3];myElement.innerText="I changed the text";第3关: 通过标签名获取文档元素
get element by id EduCoderFaceBookTwitterNUDTthis is a text
var temp= document.getElementsByTagName("div")[1]; var myElement = temp.getElementsByTagName("a")[1];myElement.innerText="nudt";第4关: html5中获取元素的方法一
你需要获得的元素是我
是楼上
是楼上的楼上
var pElement = document.querySelector("p");console.log(pElement);第5关: html5中获取元素的方法二
你需要获得的元素是我
包括我
还有我
var pElement = document.querySelectorAll("p");console.log(pElement);第6关: 节点树上的操作
myTitle 文本
超链接红黄蓝var cl2 = document.getElementById("div1").lastElementChild;var myElement = cl2.firstElementChild.children[1];myElement.innerText = "绿";第7关: 属性值的获取
![]()
var myElement = document.getElementsByClassName("imgClass")[0];var srcValue = myElement.className;console.log(srcValue);第8关: 属性值的设置
This is formvar myElement = document.getElementById("form1");myElement.method = "post";console.log(document.getElementById("form1").method);HTML DOM——文档元素的操作（二）
第1关: 创建节点
var newNode = document.createElement("form");newNode.method = "post";newNode.id = "myForm";document.body.appendChild(newNode);console.log(newNode.method);第2关: 插入节点
- America
- Mexio
var newNode = document.createElement("li");newNode.innerText = "Canada";document.getElementById("ul1").appendChild(newNode);var out = document.getElementsByTagName("li")[2];console.log(out.innerText);第3关: 删除节点
- Chrome
- Firefox
- Opera
- Safari
var parent = document.getElementById("browser");var child = document.getElementById("opera");parent.removeChild(child);第4关: 替换节点
Google
var newChild = document.createElement("a");newChild.innerText = "eduCoder";newChild.href = "https://www.educoder.net";var parent = document.getElementById("parent");var old = document.getElementById("old");parent.replaceChild(newChild,old);第5关: 综合练习
myTitle 北京安徽北京市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*********/}}事件处理
第1关: 注册事件处理程序
Title 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 **********/第2关: 文档加载事件
Title function loadEvent() {//请在此处编写代码/********** Begin **********/console.log("Welcome!");/********** End **********/}第3关: 鼠标事件
Title text
//请在此处编写代码/********** Begin **********/var myButton = document.getElementById("but");myButton.addEventListener("click",function() {var myElement = document.getElementById("p");myElement.innerText="clicked";})/********** End **********/第4关: 键盘事件
Title function pressEvent(event) {//请在此处编写代码/********** Begin **********/var code = event.which;if (code == 13) {console.log("cannot use enter");}/********** End **********/}第5关: 表单事件
Title function changeEvent() {//请在此处编写代码/********** Begin **********/var ele = document.getElementById("input");var len = ele.value.length;if (len <= 12) {console.log("too short input");}/********** End **********/}第6关: 拖动事件
Title drag me
function dragging(event) { /********** Begin **********/console.log(event.target.innerText);/********** End **********/}第7关: 事件冒泡
Title click me!
function click1() {console.log("root");}function click2() {//请在此处编写代码/********** Begin **********/ window.event" />浏览器对象模型
第1关: 定时器
Title set timer then undo
var timeId;function timerTask() {console.log("this is timer task");}function handleTimer() {//请在此处编写代码/********** Begin **********/timeId = window.setTimeout(timerTask,2000);/********** End **********/}第2关: 循环定时器
Title this is task onea
this is task two
try to remove task one
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 **********/}第3关: location对象
Title Click me to new page!
function openNew() {//请在此处编写代码/********** Begin **********/var loc = window.location;console.log(loc.hostname);loc.href = "https://www.educoder.net/forums/categories/all?order=newest";/********** End **********/}第4关: 对话框
Title Click to input name!
function inputName() {var result;//请在此处编写代码/********** Begin **********/result = window.prompt("your name", "XiaoMing");if (result === null) {console.log("name cannot be null");} /********** End **********/}第5关: 窗口
Title open new window
var myWindow;function openNewWindow() {//请在此处编写代码/********** Begin **********/myWindow = window.open("Demo.html", "window_name");/********** End **********/}