目錄
?JSON
第1關(guān): JSON對(duì)象
第2關(guān): JSON數(shù)組
第3關(guān): JSON字符串
Math、日期和異常處理
第1關(guān): Math類(lèi)
第2關(guān): Date類(lèi)
第3關(guān): JavaScript錯(cuò)誤
HTML DOM——文檔元素的操作（一）
第1關(guān): 通過(guò)id獲取文檔元素
第2關(guān): 通過(guò)類(lèi)名獲取文檔元素
第3關(guān): 通過(guò)標(biāo)簽名獲取文檔元素
第4關(guān): html5中獲取元素的方法一
第5關(guān): html5中獲取元素的方法二
第6關(guān): 節(jié)點(diǎn)樹(shù)上的操作
第7關(guān): 屬性值的獲取
第8關(guān): 屬性值的設(shè)置
HTML DOM——文檔元素的操作（二）
第1關(guān): 創(chuàng)建節(jié)點(diǎn)
第2關(guān): 插入節(jié)點(diǎn)
第3關(guān): 刪除節(jié)點(diǎn)
第4關(guān): 替換節(jié)點(diǎn)
第5關(guān): 綜合練習(xí)
事件處理
第1關(guān): 注冊(cè)事件處理程序
第2關(guān): 文檔加載事件
第3關(guān): 鼠標(biāo)事件
第4關(guān): 鍵盤(pán)事件
第5關(guān): 表單事件
第6關(guān): 拖動(dòng)事件
第7關(guān): 事件冒泡
瀏覽器對(duì)象模型
第1關(guān): 定時(shí)器
第2關(guān): 循環(huán)定時(shí)器
第3關(guān): location對(duì)象
第4關(guān): 對(duì)話框文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-425842.html
第5關(guān): 窗口文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-425842.html
?JSON
第1關(guān): JSON對(duì)象
function mainJs(a,b,c) {
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/********** Begin **********/
var JSONObject = {"key1":a,"key2":b,"key3":c};//定義JSON對(duì)象
delete JSONObject.key3;//刪除名字為key3的屬性
var result = "";
for(var att in JSONObject) {//遍歷剩余所有的屬性
result = result+JSONObject[att]+",";
}
return result.slice(0,-1);
/********** End **********/
}第2關(guān): JSON數(shù)組
var myJson = {
"category":"computer",
"detail":"programming",
"language":[
"js","java","php","python","c"
]
}
function mainJs(a) {
a = parseInt(a);
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/********** Begin **********/
var result = "";
for(var i = 0;i < a;i++) {
result = result+myJson.language[i]+",";
}
return result.slice(0,-1);
/********** End **********/
}第3關(guān): JSON字符串
var JSONString = '{"key1":"value1","key2":"value2"}';
function mainJs(a) {
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/********** Begin **********/
//JSON字符串轉(zhuǎn)換為JSON對(duì)象
var JSONObject = JSON.parse(JSONString);
//修改key1屬性的值為參數(shù)a
JSONObject.key1 = a;
//JSON對(duì)象轉(zhuǎn)換為JSON字符串并返回
return JSON.stringify(JSONObject);
/********** End **********/
}Math、日期和異常處理
第1關(guān): Math類(lèi)
function mainJs(a) {
a = parseInt(a);
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/********** 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關(guān): Date類(lèi)
function mainJs(a) {
a = parseInt(a);
var date = new Date(a);
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/********** Begin **********/
var year = date.getFullYear();
var month = date.getMonth();
var cal = date.getDate();
var day = date.getDay();
return year+","+month+","+cal+","+day;
/********** End **********/
}第3關(guān): JavaScript錯(cuò)誤
function mainJs(a) {
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/********** 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關(guān): 通過(guò)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>
<!-- 請(qǐng)?jiān)诖颂幘帉?xiě)代碼 -->
<!---------Begin--------->
var myElement = document.getElementById("a1");
<!---------End--------->
myElement.;
</script>
</body>
</html>第2關(guān): 通過(guò)類(lèi)名獲取文檔元素
<!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>
<!-- 請(qǐng)?jiān)诖颂幘帉?xiě)代碼 -->
<!---------Begin--------->
var myElement = document.getElementsByClassName("myName")[3];
<!---------End--------->
myElement.innerText="I changed the text";
</script>
</body>
</html>第3關(guān): 通過(guò)標(biāo)簽名獲取文檔元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>get element by id</title>
</head>
<body>
<div class="diva">
<a >EduCoder</a>
<a >FaceBook</a>
</div>
<div class="divb">
<a >Twitter</a>
<form name="myForm"></form>
<a >NUDT</a>
</div>
<p id="pp">this is a text</p>
<script>
<!-- 請(qǐng)?jiān)诖颂幘帉?xiě)代碼 -->
<!---------Begin--------->
var temp= document.getElementsByTagName("div")[1];
var myElement = temp.getElementsByTagName("a")[1];
<!---------End--------->
myElement.innerText="nudt";
</script>
</body>
</html>第4關(guān): html5中獲取元素的方法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>你需要獲得的元素是我</p>
<p>是樓上</p>
<p>是樓上的樓上</p>
<script>
<!-- 請(qǐng)?jiān)诖颂幘帉?xiě)代碼 -->
<!---------Begin--------->
var pElement = document.querySelector("p");
<!---------End--------->
console.log(pElement);
</script>
</body>
</html>第5關(guān): html5中獲取元素的方法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>你需要獲得的元素是我</p>
<p>包括我</p>
<p>還有我</p>
<script>
<!-- 請(qǐng)?jiān)诖颂幘帉?xiě)代碼 -->
<!---------Begin--------->
var pElement = document.querySelectorAll("p");
<!---------End--------->
console.log(pElement);
</script>
</body>
</html>第6關(guān): 節(jié)點(diǎn)樹(shù)上的操作
<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>藍(lán)</option>
</select>
</div>
</div>
<script>
var cl2 = document.getElementById("div1").lastElementChild;
<!-- 請(qǐng)?jiān)诖颂幘帉?xiě)代碼 -->
<!---------Begin--------->
var myElement = cl2.firstElementChild.children[1];
<!---------End--------->
myElement.innerText = "綠";
</script>
</body>
</html>第7關(guān): 屬性值的獲取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="p"></p>
<img class="imgClass"/>
<a id="a"></a>
<script>
<!-- 請(qǐng)?jiān)诖颂幘帉?xiě)代碼 -->
<!---------Begin--------->
var myElement = document.getElementsByClassName("imgClass")[0];
var srcValue = myElement.className;
<!---------End--------->
console.log(srcValue);
</script>
</body>
</html>第8關(guān): 屬性值的設(shè)置
<!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>
<!-- 請(qǐng)?jiān)诖颂幘帉?xiě)代碼 -->
<!---------Begin--------->
var myElement = document.getElementById("form1");
myElement.method = "post";
<!---------End--------->
console.log(document.getElementById("form1").method);
</script>
</body>
</html>HTML DOM——文檔元素的操作（二）
第1關(guān): 創(chuàng)建節(jié)點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p></p>
<script>
<!-- 請(qǐng)?jiān)诖颂幘帉?xiě)代碼 -->
<!---------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關(guān): 插入節(jié)點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<ul id="ul1">
<li>America</li>
<li>Mexio</li>
</ul>
<script>
<!-- 請(qǐng)?jiān)诖颂幘帉?xiě)代碼 -->
<!---------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關(guān): 刪除節(jié)點(diǎn)
<!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>
<!-- 請(qǐng)?jiān)诖颂幘帉?xiě)代碼 -->
<!---------Begin--------->
var parent = document.getElementById("browser");
var child = document.getElementById("opera");
parent.removeChild(child);
<!---------End--------->
</script>
</body>
</html>第4關(guān): 替換節(jié)點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<ol id="parent">
<a id="old" >Google</a>
</ol>
<script>
var newChild = document.createElement("a");
newChild.innerText = "eduCoder";
newChild.;
<!-- 請(qǐng)?jiān)诖颂幘帉?xiě)代碼 -->
<!---------Begin--------->
var parent = document.getElementById("parent");
var old = document.getElementById("old");
parent.replaceChild(newChild,old);
<!---------End--------->
</script>
</body>
</html>第5關(guān): 綜合練習(xí)
<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);
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/*********Begin*********/
var child2 = document.createElement("option");
child2.value="HeFeiCity";
child2.innerText="合肥市";
city.appendChild(child2);
/*********End*********/
}
}
</script>
</body>
</html>事件處理
第1關(guān): 注冊(cè)事件處理程序
<!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("監(jiān)聽(tīng)button1");
}
function listenButton2() {
console.log("監(jiān)聽(tīng)button2");
}
function listenButton3() {
console.log("監(jiān)聽(tīng)button3");
}
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/********** Begin **********/
var button2 = document.getElementById("button2");
button2.onclick = listenButton2;
var button3 = document.getElementById("button3");
button3.addEventListener("click",listenButton3);
/********** End **********/
</script>
</body>
</html>第2關(guān): 文檔加載事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onload="loadEvent()">
<script>
function loadEvent() {
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/********** Begin **********/
console.log("Welcome!");
/********** End **********/
}
</script>
</body>
</html>第3關(guān): 鼠標(biāo)事件
<!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>
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/********** Begin **********/
var myButton = document.getElementById("but");
myButton.addEventListener("click",function() {
var myElement = document.getElementById("p");
myElement.innerText="clicked";
})
/********** End **********/
</script>
</body>
</html>第4關(guān): 鍵盤(pán)事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onkeypress="pressEvent(event)">
<script>
function pressEvent(event) {
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/********** Begin **********/
var code = event.which;
if (code == 13) {
console.log("cannot use enter");
}
/********** End **********/
}
</script>
</body>
</html>第5關(guān): 表單事件
<!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() {
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/********** Begin **********/
var ele = document.getElementById("input");
var len = ele.value.length;
if (len <= 12) {
console.log("too short input");
}
/********** End **********/
}
</script>
</body>
</html>第6關(guān): 拖動(dòng)事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<!-- 請(qǐng)?jiān)诖颂幘帉?xiě)代碼 -->
<!---------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關(guān): 事件冒泡
<!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() {
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/********** Begin **********/
window.event?window.event.cancelBubble=true:event.stopPropagation();
/********** End **********/
console.log("parent");
}
function click3() {
console.log("child");
}
</script>
</body>
</html>瀏覽器對(duì)象模型
第1關(guān): 定時(shí)器
<!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() {
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/********** Begin **********/
timeId = window.setTimeout(timerTask,2000);
/********** End **********/
}
</script>
</body>
</html>第2關(guān): 循環(huán)定時(shí)器
<!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() {
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/********** Begin **********/
window.clearInterval(timeId1);
/********** End **********/
}
</script>
</body>
</html>第3關(guān): location對(duì)象
<!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() {
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/********** Begin **********/
var loc = window.location;
console.log(loc.hostname);
loc.;
/********** End **********/
}
</script>
</body>
</html>第4關(guān): 對(duì)話框
<!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;
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/********** Begin **********/
result = window.prompt("your name", "XiaoMing");
if (result === null) {
console.log("name cannot be null");
}
/********** End **********/
}
</script>
</body>
</html>第5關(guān): 窗口
<!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() {
//請(qǐng)?jiān)诖颂幘帉?xiě)代碼
/********** Begin **********/
myWindow = window.open("Demo.html", "window_name");
/********** End **********/
}
</script>
</body>
</html>到了這里，關(guān)于JavaScript下部分--頭歌（educoder）實(shí)訓(xùn)作業(yè)題目及答案的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
