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

目录

 JSON

第1关: JSON对象

第2关: JSON数组

第3关: JSON字符串

Math、日期和异常处理

第1关: Math类

第2关: Date类

第3关: JavaScript错误

HTML DOM——文档元素的index.php/tags-10.html" >操作（一）

第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  
第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  
HTML DOM——文档元素的操作（一）
 
第1关: 通过id获取文档元素
 
        get element by id    Google    
this 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            EduCoder        FaceBook                Twitter                NUDT        
this is a text
         var temp= document.getElementsByTagName("p")[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("p1").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 form                var 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    按钮1    按钮2    按钮3            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    
            button                //请在此处编写代码/********** 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