目录
JSON
第1关:
- 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关:
- 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>