FSWD_3_JavaScriptAdvance
FSWD_3_JavaScriptAdvance
for
for for…in for…of
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var numArray = [4,5,6];
var person = {age:5,job:'worker'}
for (var i = 0; i < numArray.length; i++) {
alert(numArray[i])
}
for (var index in numArray){
alert(numArray[index])
}
for (var key in person){
alert(key+'='+person[key])
}
for (var i of numArray){
alert(i)
}
</script>
</head>
<body>
</body>
</html>more array
sort reverse indexOf 从前往后搜索第一个的index，如果没有输出-1，第一个参数是搜索的内容，第二个参数用于指定开始搜索的位 lastIndexOf 从后向前搜索 slice(ab)：切片[a,b) splice(position,quantity):移去元素 splice(position,0，element):增加元素 splice(position,quantity，element):替换元素
forEach(function) func(element,index,array)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var aArray = [1,2,3]
aArray.forEach(alert)
aArray.forEach(function(elem,idx,arr) {arr[idx]=elem*elem})
aArray.forEach(alert)
</script>
</head>
<body>
</body>
</html>map(func):输入和输出都是数组
DOM
Document Object Model When you load something into browser(HTML XML SVG), it’s converted into DOM structure.
tree structure
role of text nodes
concept of whitespace and how it stored. It’s not visible and used to instruct to the next line.
node relation visualize the path for a node,自己编一个向上查找母节点的函数。
一些链接函数 parentNode childNodes[] firstChild lastChild previousSibling nextSibling
find a node有三种方法
- use the exact DOM path
- getElementsByName(h2)，可能发现很多个需要找到哪一个是自己需要的
- getElementById(id)，注意在每个element后面尽可能的加入id，name慢慢被id取代
change attribute of node setAttribute(“style”,”color:red”)
函数 getElementsByName getElementById setAttribute
创造不同种类的nodes createElement(‘div’) createElement(‘hello’) createElement(‘hr’)
增加node insertBefore(newItem,destParent.firstChild) 增加了一个新的sibling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function insert_new_text() {
var newItem = document.createElement('hr');
var destParent = document.getElementsByTagName('body')[0];
destParent.insertBefore(newItem, destParent.firstChild);
}
</script>
</head>
<body onclick='insert_new_text()'>
<h1 id='my_text'>Please click on the page.</h1>
</body>
</html>appendChild(newText) 在后面增加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function insert_new_text() {
var newText = document.createTextNode("This is dynamically added text");
var textpart = document.getElementById("my_text");
textpart.appendChild(newText);
}
</script>
</head>
<body onclick="insert_new_text()">
<h1 id='my_text'>Please click on the page.</h1>
</body>
</html>函数 createElement() createTextNode() insertBefore() appendChild()
删除node
函数 removeChild
删除所有的node
vartheNode = document.getElementById('theBody);
whiel(theNode.firstChild)
theNode.removeChild(theNode.firstChild)克隆节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function myFunction() {
alert("sa");
var theNode = document.getElementById('myList').lastChild;
var the_clone = theNode.cloneNode();
document.getElementById('myList').appendChild(the_clone);
}
</script>
</head>
<body>
<ul id='myList'>
<li>good morning</li>
<li>hello</li>
</ul>
<p>click the button to cloneNode</p>
<button onclick="myFunction()">Copy it!</button>
</body>
</html>函数 the_node.cloneNode() the_node.cloneNode(true) dest.appenChild(the_node)
mouse events
onclick = onmousedown followed by nomouseup onmousedown nomouseup onmouseover onmouseout
timer events
setTimeout(func,ms) setInterval(func,ms) repeatedly again and again clearTimeout(the_timer) clearInterval(the_timer) 停止操作
useful for dynamic web page behavior
var the_timer
the_timer1 = setTimeout(do_something,1000)
the_timer2 = setInterval(do_something,1000) add event using js
函数 addEventListener() removeEventListener()
#增加
window.onload = do_something
window.addEventListener('load',do_something)
<body onload=do_something>
#删除
theBody.removeEventListener('load',do_something)more on func
declare func
function f1() {}
var f = function () {} #这种方法可以使函数稍后创建
var f = function f1() {}
#函数也是对象，可以传递函数homework
getElementById() Math.random() onload createElement() Math.floor() while appendChild()