0
0

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

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>
标签： json javascript 前端
本文转载自: https://blog.csdn.net/qq_35353972/article/details/127229443
版权归原作者 北沐xxx 所有， 如有侵权，请联系我们删除。
登录后发布评论

“JavaScript下部分--头歌（educoder）实训作业题目及答案”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

day4下午-XXE漏洞

推荐文章：探索安全网络的未来 —— HSTS Preload List 实用代码

Docker 安装redis镜像，详细保姆级教程

【Linux】多线程（上）

剖析Spark Shuffle原理（图文详解）

2024年NSSCTF秋季招新赛-WEB

MYSQL InnoDB 行格式揭秘：探讨数据行头信息的关键组成

文章导航