头歌（Educoder）——Web前端课程设计——JavaScript答案

function Car(plate,owner) {
    this.plate = plate;
    this.owner = owner;
}
 
function Job() {};
Job.prototype.company = "myCompany";
Job.prototype.salary = 12000;
 
function mainJs(a,b,c,d,e) {
    //请在此处编写代码
	/********** Begin **********/
    var student = {name:a,gender:b};
    var myCar = new Car(c,d);
    var myJob =  new Job();
    myJob.company = e;
    /********** End **********/
    return student.name+student.gender+myCar.plate+myCar.owner+myJob.company;
}

第2关: 属性的增删改查

var store = {
	name:"Luma Restaurant",
	location:"No 22,Cot Road",
	accountant:"Vivian Xie",
	day1:3200,
	day2:3200,
	day3:3200,
	day4:3200,
	day5:3200,
	day6:3200,
	day7:3200,
	day8:3200,
	day9:3200,
	day10:3200
}
function reviseAttribute(reviser,date,attValue) {
	//Convert string to integer
	attValue = parseInt(attValue);
	//请在此处编写代码
	/********** Begin **********/
	store["day"+date] = attValue;
	store.accountant = reviser;
	/********** End **********/
	var totalSales =  store["day1"]+store["day2"]+store["day3"]+store["day4"]+store["day5"]+store["day6"]+store["day7"]+store["day8"]+store["day9"]+store["day10"];
    return totalSales+store.accountant;
}

第3关: 属性的检测和枚举

var orange = {
	weight:"200g",
	color:"orange",
	taste:"sour"
};
var car = {
	brand:"Jaguar",
	price:"$80000",
	model:"XFL"
}
 
function mainJs(a) {
	//请在此处编写代码
	/********** Begin **********/
	var result = "";
	if(a in car) {
		for(att in car) {
			result += att;
		}
	}
	else {
		for(att in orange) {
			result += att;
		}
	}
	return result;
	/********** End **********/
}

JavaScript数组

第1关: 数组的创建、读写和长度

var array1 = [1,2,3,"js",4,true,"hello"];
var array2 = [true,true,"java",2.1];
function mainJs(a) {
	//请在此处编写代码
	/********** Begin **********/
	a = parseInt(a);
	if(array1.length == a) {
		return array1[array1.length-1];
	}
	else {
		return array2[array2.length-1];
	}
	/********** End **********/
}

第2关: 数组元素的增减

var testArray = [12,"java","js","c","c++",24,36,"python","c#","css"];
function mainJs(a,b) {
	a = parseInt(a);
	b = parseInt(b);
	//请在此处编写代码
	/********** Begin **********/
	for(var i = 0;i < a;i++) {
		var rearMember = testArray.pop();
		testArray.unshift(rearMember);
	}
	return testArray[b];
	/********** End **********/
}

第3关: 数组的遍历和多维数组

var arr = [1,2,3,4,5,6,7,8,9,0,10,11,12,13,14,15,16,17,18,19,20,21,23,22];
function mainJs(a,b) {
	a = parseInt(a);
    b = parseInt(b);
    //请在此处编写代码
	/********** Begin **********/
	//新建二维数组，行长为a，列长为b
    var multiArr = new Array(a);
    for(var i = 0;i < a;i++) {
        multiArr[i] = new Array(b);
    }
	//依次将原数组的元素放置在二维数组的相应位置上
    var count = 0;
    for(var i = 0;i < a;i++) {//先行
        for(var j = 0;j < b;j++) {//后列
            multiArr[i][j] = arr[count++];
        }
    }
	//返回二维数组
    return multiArr;
	/********** End **********/
}

第4关: 数组的常用方法

function mainJs(myArray) {
	myArray = myArray.split(",");
	//请在此处编写代码
	/********** Begin **********/
	//新建用来存储字符串a位置的数组
	var indexsArrayOfStringa = new Array();
	//新建用来存储字符串b位置的数组
	var indexsArrayOfStringb = new Array();
	//求出参数字符串的长度
	var myArrayLength = myArray.length;
	var index = 0;
	//遍历获得字符串a的所有位置
	while(index < myArrayLength) {
		index = myArray.indexOf("a",index);
		if(index == -1) break;
		indexsArrayOfStringa.push(index++);
	}
	index = 0;
	//遍历获得字符串b的所有位置
	//这两个函数千万不要合在一起写！！！
	while(index < myArrayLength) {
		index = myArray.indexOf("b",index);
		if(index == -1) break;
		indexsArrayOfStringb.push(index++);
	}
	//返回两个数组的和数组
	return indexsArrayOfStringa.concat(indexsArrayOfStringb);
	/********** End **********/
}

第5关: 数组的应用——内排序

function mainJs(a) {
	var arr = a.split(",");
	for(var i = 0;i < arr.length;i++) {
    	arr[i] = parseInt(arr[i]);
	}
	//请在此处编写代码
	/********** Begin **********/
	var aLength = arr.length;//待排序数组的长度
	var temp;
	var max = arr[0];
	var maxIndex = 0;
	var indexArr = new Array();//记录最大元素位置的数组
	//进行选择排序
	for(var i = 0;i < aLength-1;i++) {
		for(var j = 1;j < aLength-i;j++) {
			if(arr[j] > max) {//更新最大元素及其索引
				max = arr[j];
				maxIndex = j;
			}
		}
		//记录最大元素所在的位置
		indexArr.push(maxIndex);
		//移动最大元素到索引最大处
		temp = arr[aLength-i-1];
		arr[aLength-i-1] = arr[maxIndex];
		arr[maxIndex] = temp;
		//将最大元素及位置归零
		var max = arr[0];
    	var maxIndex = 0;
	}
	return indexArr;
	/*********end*********/
}

JavaScript条件语句

第1关: if-else类型

function mainJs(a) {
	a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
	if(a >= 60) {
		return "pass";
	}
	else {
		return "unpass";
	}
	/********** End **********/
}

第2关: switch类型

function mainJs(a) {
	a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
	var name;
	switch(a) {
		case 82414:name = "Superior";
		break;
		case 59600:name = "Huron";
		break;
		case 58016:name = "Michigan";
		break;
		case 25744:name = "Erie";
		break;
		case 19554:name = "Ontario";
		break;
		default:name = "error";
		break;
	}
	return name;
	/********** End **********/
}

第3关: 综合练习

//判断一个年份是否为闰年
function judgeLeapYear(year) {
	//请在此处编写代码
	/********** Begin **********/
    var tt="年是闰年";
	var ff="年不是闰年";
	if(year%100==0){
		if(year%400==0){
			
			return year+tt;
		}else{
			
			return year+ff;
		}
 
	}else{
           if(year%4==0){
			   return  year+tt;
		   }else{
			   return year+ff;
		   }
	}  
	/********** End **********/
}
 
//对输入进行规范化处理
function normalizeInput(input) {
	/********** Begin **********/
	var output;
    switch(input){
	case "中共党员":
	case "党员":
	case "共产党员":output="中共党员";
		break;
		case "中共预备党员":
		case "预备党员":output="中共预备党员";
		break;
		case "团员":
	    case "共青团员":output="共青党员";
		break;
    case "大众":
	case "市民":
	case "人民": output="群众";
		break;
	default:  output="错误数据";
		break;	
	}
	return output;
    
	/********** End **********/
}
 
//判断苹果是否为优质品
function evaluateApple(weight,water) {
	/********** Begin **********/
    if(weight>=200 )
	{return "是优质品";}
	else{
		if(water>=0.7)
		{return "是优质品";}
		else
		{return "不是优质品";}
	}
	/********** End **********/
}

JavaScript循环语句

第1关: while类型

function mainJs(a) {
	a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
	var sum = 0;
	var i = 2;
	while(i <= a) {
    	var j = 2;
    	while(j < i) {
        	if(i%j == 0) {//能被整除，不是质数
        		break;//不需要再判断
         	}
    		j ++;//除数加1，继续测试是不是质数
    	}
    	if(j == i) {//还是没有因数，证明这是一个质数
    		sum = sum+i;//加在结果里面
    	}
		i = i+1;//测试下一个数是不是质数
	}
	return sum;
	/********** End **********/
}

第2关: do while类型

function mainJs(a,b) {
    a = parseInt(a);
    b = parseInt(b);
	//请在此处编写代码
    /********** Begin **********/
    var sum = 0;//结果
    var i = a+1;//从a后面的第一个数开始累加
    while(i < b) {//直到b前面的第一个数
        sum += i;
        i++;//下一个数
    }
    return sum;//返回结果和
   /********** End **********/
}

第3关: for类型

function mainJs(a) {
	a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
	var numLen = a.toString().length;//求出是个几位数
	var num = 1;
	var result = 0;
	for(var i = 0;i < numLen;i++) {
		var curNum = a.toString().substring(i,i+1);//取出其中的第i位数
		result = result+curNum*num;
		num = num*10;
	}
	return result;
	/********** End **********/
}

第4关: for in类型

var apple = {
    weight:"200克",
    level:"特级",
    locationProvince:"陕西省",
    locationCity:"榆林市"
}
 
function mainJs(a,b){
    apple[a]= b;
    //请在此处编写代码
	/********** Begin **********/
    var result = "";//结果字符串
    for(var x in apple) {//遍历所有的属性
        if(x.indexOf("location") == 0) {//以location开头的属性
            result += apple[x];//属性的值拼接
        }
    }
    return result;//返回结果
    /********** End **********/
}

第5关: break和continue的区别——break

function mainJs(a) {
	var arr = a.split(",");
	for(var k = 0,length = arr.length;k < length;k++) {
		arr[k] = parseInt(arr[k]);
	}
	//请在此处编写代码
	/********** Begin **********/
	for(var i = 0,length = arr.length;i < length;i++) {
		var cur = arr[i];//数组的第i个数
		for(var j = 2;j < cur;j++) {
			if(cur%j == 0) break;//不是质数，不需要再测试
		}
		if(j == cur) break;//已经找到了质数cur
	}
	return arr[i];
	/********** End **********/
}

第6关: break和continue的区别——continue

function mainJs(a,b) {
    a = a.split(",");
    for(var i = 0,length = a.length;i < length;i++) {
        a[i] = parseInt(a[i]);
    }
    var sum = 0;
    for(var i = 0,length = a.length;i < length;i++) {
		//请在此处编写代码
        /********** Begin **********/
        if(b > 0 && a[i] < 0) continue;//求正数的和，遇到负数跳过
        if(b < 0 && a[i] > 0) continue;//求负数的和，遇到正数跳过
        /********** End **********/
        sum += a[i];
    }
    return sum;
}

JavaScript函数

第1关: 用函数语句定义函数

//请在此处编写代码
/********** Begin **********/
function mainJs(a,b){
    return a+b;
}
/********** End **********/

第2关: 用表达式定义函数

function mainJs(a) {
    a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
    var myFunc = function(b) {
        var first = (b-b%100)/100;//求出百位数
        var second = (b%100-b%100%10)/10;//求出十位上的数
        var third = b-first*100-second*10;//求出各位数
        return first+second+third;
    }
    /********** End **********/
    return myFunc(a);
}

第3关: 函数的调用

//求最大值的函数
function getMax(b,c) {
    return b>c?b:c;
}
 
//求最小值的函数
var getMin = function(b,c) {
    return b>c?c:b;
}
 
//对象中的求和函数
var myObject = {
    id:1,
    name:"function",
    myFunc:function(b,c) {
        return b+c;
    }
}
 
function mainJs(a,b,c) {
    a = parseInt(a);
    b = parseInt(b);
    c = parseInt(c);
    //请在此处编写代码
	/********** Begin **********/
    if(a == 1) {
        return getMax(b,c);
    } else if(a == 2) {
        return getMin(b,c);
    } else {
        return myObject.myFunc(b,c);
    }
    /********** End **********/
}

第4关: 未定义的实参

function mainJs(a,b,c,d) {
    //请在此处编写代码
	/********** Begin **********/
    if(a === undefined) {
        a = "green";
    }
    if(b === undefined) {
        b = "green";
    }
    if(c === undefined) {
        c = "red";
    }
    if(d === undefined) {
        d = "yellow";
    }
    return a+"-"+b+"-"+c+"-"+d;
   /********** End **********/
}

第5关: 实参对象

//请在此处编写代码
/********** Begin **********/
function getMax() {
	var aLength = arguments.length;
	var amax = 0;
	for(var i = 0;i < aLength;i++) {
		if(arguments[i] > amax) 
			amax = arguments[i];
	}
	return amax;
}
/********** End **********/
 
function mainJs(a) {
	a = parseInt(a);
	switch(a) {
		case 1:return getMax(23,21,56,34,89,34,32,11,66,3,9,55,123);
		case 2:return getMax(23,21,56,34,89,34,32);
		case 3:return getMax(23,21,56,34);
		case 4:return getMax(23,21,56,34,89,34,32,11,66,3,9,55,123,8888);
		case 5:return getMax();
		default:break;
	}
}

第6关: 对象作为参数

var park = {
    name:"Leaf Prak",
    location:"Fifth Avenue",
    todayTourists:4000
};
 
var computer = {
    name:"Levenon",
    price:"$800",
    memory:"8G"
};
 
var city = {
    name:"HangZhou",
    country:"Chine",
    population:9400000
}
 
function objectFunction(object) {
   //请在此处编写代码
	/********** Begin **********/
    var result = "";
    for(x in object) {
        result = result+x+":"+object[x]+",";
    }
    return result;
    /********** End **********/
}
 
function mainJs(a) {
    a = parseInt(a);
    switch(a) {
        case 1:return objectFunction(park);
        case 2:return objectFunction(computer);
        case 3:return objectFunction(city);
        default:break;
    }
}

第7关: 函数对象

//求数组中奇数元素的个数
function getOddNumber(a) {
    var result = 0;
    for(var i = 0;i < a.length;i++) {
        if(a[i]%2 != 0)
            result++;
    }
    return result;
}
 
//求数组中偶数元素的个数
function getEvenNumber(a) {
    var result = 0;
    for(var i = 0;i < a.length;i++) {
        if(a[i]%2 == 0)
            result++;
    }
    return result;
}
 
function getNumber(func,a) {
	//请在此处编写代码
    /*********Begin*********/
    return func(a);
    /*********End*********/
}
 
//测试接口
function mainJs(b,a) {
    a = a.split(",");
    var aLength = a.length;
    for(var i = 0;i < aLength;i++) {
        a[i] = parseInt(a[i]);
    }
    if(b == "getEvenNumber") {
        return getNumber(getEvenNumber,a);
    } else {
        return getNumber(getOddNumber,a);
    }
}

JavaScript字符串

第1关: 查找字符串的位置

function mainJs(a,b) {
    //请在此处编写代码
	/********** Begin **********/
    var startIndex = 0;
    var aLength = a.length;//a的长度
    var index = 0;
    var result = 0;
    while(startIndex < aLength) {//还没有匹配到末尾
        index = a.indexOf(b,startIndex);//本次匹配的位置
        if(index == -1) {//后面已经没有匹配的子串
            break;//提前结束整个过程
        }
        startIndex = index+1;//下次匹配的起始位置
        result += index;
    }
    return result;
	/*********End*********/
}

第2关: 求指定位置的字符

function mainJs(a) {
    //请在此处编写代码
	/********** Begin **********/
    var result = "";
    for(var i = 0;i < 6;i++) {//遍历，依次获取前六个数字
        result += a.charAt(i);
    }
    return result;
    /********** End **********/
}

第3关: 字符串的截取

function mainJs(a,b) {
    //请在此处编写代码
	/********** Begin **********/
    if(a.indexOf(b) == -1) {//没有杂质字符串直接返回
        return a;
    } else {
        var startIndex = a.indexOf(b);//杂质字符串起始处
        var endIndex = startIndex+b.length;//杂质字符串结束处
        return a.slice(0,startIndex)+a.slice(endIndex);
    }
    /*********End*********/
}

第4关: 大小写转换

function mainJs(a,b) {
	//请在此处编写代码
	/********** Begin **********/
    var str1 = b.toUpperCase();//把b转换为大写
    var aa = a.split(b);//以b为边界分割a为字符串数组
    a = aa.join(str1);//以转换后的b为边界重新连接字符串数组得到新的a
    return a;
	/*********End*********/
}

第5关: 字符串的分割

function mainJs(a) {
    //请在此处编写代码
	/********** Begin **********/
    var spaceArray = a.split(" ");//以space分割
    var commaArray = a.split(",");//以逗号分隔
    return spaceArray.length+commaArray.length-1;
    /*********End*********/
}

JavaScript 正则表达式

第1关: 字符串字面量

function mainJs(a) {
    a = a.replace(",","\n");
    //请在此处编写代码
	/********** Begin **********/
    var pattern = /js\n/;
    /********** End **********/
    return pattern.test(a).toString();
}

第2关: 字符类

function mainJs(a) {
    //请在此处编写代码
	/********** Begin **********/
    var pattern1 = /[a-zA-Z][0-9]/;
    var pattern2 = /A[^0-9]/;
    /********** End **********/
    return pattern1.test(a).toString()+","+pattern2.test(a).toString();
}

第3关: 重复

function mainJs(a) {
	//请在此处编写代码
	/********** Begin **********/
    var pattern1 = /\?+/;  
    var pattern2 = /\+{3,3}/;  
    var pattern3 = /\{\}{1,2}/;  
    var pattern4 = /\\{0,1}/;  
    
    
	/********** End **********/
    return pattern1.test(a).toString()+","+pattern2.test(a).toString()+","+pattern3.test(a).toString()+","+pattern4.test(a).toString();
}

第4关: 选择

function mainJs(a) {
    //请在此处编写代码
	/********** Begin **********/
    var pattern1 = /[0-9]{17}([0-9]|X)/;
    var pattern2 = /2(3|4)[0-9]{4}/;
    var pattern3 = /010|02[012345789]/;
    /********** End **********/
    return pattern1.test(a).toString()+","+pattern2.test(a).toString()+","+pattern3.test(a).toString();
}

第5关: 分组

function mainJs(a) {
    //请在此处编写代码
	/********** Begin **********/
    var pattern1 = /(\?\+){2,}/;
    var pattern2 = /\d(\?|\+)\d/;
    /********** End **********/
    return pattern1.test(a).toString()+","+pattern2.test(a).toString();
}

第6关: 引用

function mainJs(a) {
    //请在此处编写代码
	/********** Begin **********/
    var pattern1 = /([0-9]{3})[^0-9]\1/;
    var pattern2 = /[A-Z]([0-9])[A-Z]\1[A-Z]\1/;
    /********** End **********/
    return pattern1.test(a).toString()+","+pattern2.test(a).toString();
}

第7关: 匹配位置

function mainJs(a) {
     //请在此处编写代码
	/********** Begin **********/
     var pattern = /^js\b/;
    /********** End **********/
     return pattern.test(a).toString();
}

第8关: 修饰符

function mainJs(a) {
    //请在此处编写代码
	/********** Begin **********/
    var pattern = /\bshell\b/ig;
    /********** End **********/
    return a.match(pattern);
}

第9关: 正则表达式的使用

function mainJs(a) {
    //请在此处编写代码
	/********** Begin **********/
    var pattern = /[0-9]/g;
    return a.replace(pattern,"");
    /********** End **********/
}

JavaScript 的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 **********/
}

JavaScript 数学及日期函数

第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 **********/
}

JavaScript 文档元素获取

第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>

JavaScript 文档元素操作

第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>

JavaScript 事件处理

第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>

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", "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>

JavaScript 数据类型

第1关：JavaScript数据类型转换

function mainJs(args1,args2,args3) {
	//请在此处编写代码
	/********** Begin **********/
    const a = parseInt(args1);
    const b = parseInt(args2, 16);
    const c = parseFloat(args3);
    
	/********** End **********/
    return a+b+c;
}