【Web应用技术基础】JavaScript学习手册（9、11、12、13、16）

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为边界重新连接字符串数组得到新的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学习手册十一：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>