目录
JavaScript学习手册九：字符串
第1关：查找字符串的位置
第2关：求指定位置的字符
第3关：字符串的截取
第4关：大小写转换
第5关：字符串的分割
JavaScript学习手册十一：JSON
第1关：JSON对象
第2关：JSON数组
第3关：JSON字符串
JavaScript学习手册十二：Math和Date
第1关：Math类
第2关：Date类
JavaScript学习手册十三：HTML DOM——文档对象的操作（一）
第1关：通过id获取文档元素
第2关：通过类名获取文档元素
第3关：通过标签名获取文档元素
第4关：html5中获取元素的方法一
第5关：html5中获取元素的方法二
第6关：节点树上的操作
第7关：属性值的获取
第8关：属性值的设置
JavaScript学习手册十六：浏览器对象模型
第1关：定时器
第2关：循环定时器
第3关：location对象
第4关：对话框
第5关：窗口
JavaScript学习手册九：字符串
第1关：查找字符串的位置
function mainJs(a, b) {//请在此处编写代码/********** Begin **********/var c = a.indexOf(b);var sum = 0;while (c >= 0) {sum += c;c = a.indexOf(b, c + b.length);}return sum;/********** End **********/}第2关：求指定位置的字符
function mainJs(a) {//请在此处编写代码/********** Begin **********/var t="";for (var i = 0; i < 6; i++) {t += a.charAt(i); }return t;/********** End **********/
}第3关：字符串的截取
function mainJs(a,b) {//请在此处编写代码/********** Begin **********/var t = a.indexOf(b);var str = "";if (t == -1) {return a;} else {str = a.slice(0, t)+ a.slice(t+b.length, a.length);}return str;/********** End **********/
}第4关：大小写转换
function mainJs(a,b) {//请在此处编写代码/********** Begin **********/var str1 = b.toUpperCase();//把b转换为大写var aa = a.split(b);//以b为边界分割a为字符串数组a = aa.join(str1);//以转换后的b为边界重新连接字符串数组得到新的areturn a;/*********End*********/
}第5关：字符串的分割
function mainJs(a) {//请在此处编写代码/********** Begin **********/var spaceArray = a.split(" ");//以space分割var commaArray = a.split(",");//以逗号分隔return spaceArray.length+commaArray.length-1;/********** End **********/
}JavaScript学习手册十一：JSON
第1关：JSON对象
function mainJs(a,b,c) {//请在此处编写代码/********** Begin **********/var jsonObject = { "key1": a, "key2": b, "key3":c};delete jsonObject.key3;var str="";for(att in jsonObject) {str += jsonObject[att]+",";}return str.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 str = "";for(var i = 0;i < a;i++) {str += myJson.language[i] + ",";}return str.slice(0,-1);/********** End **********/
}第3关：JSON字符串
var JSONString = '{"key1":"value1","key2":"value2"}';
function mainJs(a) {//请在此处编写代码/********** Begin **********/JSONObject = JSON.parse(JSONString);JSONObject.key1 = a;JSONString1 = JSON.stringify(JSONObject);return JSONString1;/********** End **********/
}JavaScript学习手册十二：Math和Date
第1关：Math类
function mainJs(a) {a = parseInt(a);//请在此处编写代码/********** Begin **********/var ma = Math.max(Math.ceil(a), Math.floor(a), Math.round(a), Math.sqrt(a), Math.sin(a));var mi = Math.min(Math.ceil(a), Math.floor(a), Math.round(a), Math.sqrt(a), Math.sin(a));return ma + mi;/********** End **********/
}第2关：Date类
function mainJs(a) {a = parseInt(a);var date = new Date(a);/*********Begin*********/var str = ",";y = date.getFullYear();m = date.getMonth();d = date.getDate();t = date.getDay();return y + str + m + str + d + str + t;/*********End*********/
}
JavaScript学习手册十三：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><div class="myName">This is quote</div><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 allDiv = document.getElementsByTagName("div");var myElement = allDiv[1].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关：节点树上的操作
<!DOCTYPE html>
<html lang="en">
<head><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 srcValue =document.getElementsByClassName("imgClass")[0].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>JavaScript学习手册十六：浏览器对象模型
第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","Xiao Ming");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","_blank");/********** End **********/}</script>
</body>
</html>
)
![数据结构 - 队列 [动画+代码注释超详解]，萌新轻松上手！！！](http://pic.xiahunao.cn/数据结构 - 队列 [动画+代码注释超详解]，萌新轻松上手！！！)
