Reading Notes of "JavaScript Object-Oriented Programming Guide (2nd Edition)" (1)
Reading Notes of "JavaScript Object-Oriented Programming Guide (2nd Edition)" (2)
Catalog
I. Basic Types
1.1 String
1.2 Objects
1.3 Prototype
1.4 Common Mathematical Methods
DOM operation
2.1 Node Number, Name and Value
2.2 Parent, child and adjacent nodes
2.3 Adding and deleting nodes
2.4 attribute correlation
2.5 DOM aggregation
2.6 DOM traversal
III. OTHER
3.1 Event
3.2 Browser Detection
3.3 Three kinds of bullet windows
3.4 Forward and Backward Control Based on Browser History
3.5 Six Ways to Overload Pages
3.6 Modify the current page URL without refreshing the page
3.7 URI Coding
3.8 window correlation
I. Basic Types
1.1 String
Determine whether a string is included
In the indexOf method, finding the relevant string returns the subscript that appears for the first time. If it is not found, it returns to - 1, which can be used to determine whether a string exists or not.
console.log('Fine'.indexOf('in') !== -1) // true
Separate strings into arrays according to certain rules
Below is the space as the dividing mark.
console.log('I seek you'.split(' ')) // ["I", "seek", "you"]
Copy the string at the specified location
The two parameters passed in are the marker of the beginning and the end, respectively. As you can see, the content represented by the small label of the second parameter itself will not be copied. The second parameter is used to mark, and here is the end position.
console.log('I seek you'.slice(2,6)) // seek
console.log('I seek you'.substring(2,6)) // seek
Stitching strings
console.log('I seek you'.concat(' too.')) // I seek you too.
View characters in strings
console.log('I seek you'[0]) // I
console.log('I seek you'.charAt(0)) // I
1.2 Objects
Judging whether an attribute is one's own or inherited
You can't judge whether an attribute is inherited or self-owned by using in. You can use hasOwnProperty.
var xiaoming = {
name: 'xiaoming'
}
Using in does not determine whether attributes are self-contained or inherited
---------------------------------
'name' in xiaoming // true
'toString' in xiaoming // true
---------------------------------
xiaoming.hasOwnProperty('name') // true
xiaoming.hasOwnProperty('toString') // false
Judging whether an object can be enumerated
xiaoming.propertyIsEnumerable() // false
Judging that an object is a prototype of another object
var People = function (name) {
this.name = name
}
var xiaoming = new People('xiaoming')
Human.prototype = monkey
monkey.isPrototypeOf(man)
1.3 Prototype
- _ proto_ is an attribute of an instance object
- prototype is an attribute of a constructor
- Constructor points to constructor
IE does not exist _proto_. It is recommended to use ES5's Object.getPropertyOf() access.
typeof [].__proto__ // "object" Object.getPrototypeOf([]) // [constructor: function, toString: function, toLocaleString: function, join: function, pop: function...] [].constructor.prototype
Prototype Inheritance
var People = function (name,age) {
this.name = name
this.age = age
}
xiaoming = People.prototype
xiaoming.constructor = xiaoming
1.4 Common Mathematical Methods
Math.PI // 3.141592653589793 Math.SQRT2 // 1.4142135623730951 Math.sqrt(2) // 1.4142135623730951 Math.E // 2.718281828459045 Math.pow(2,3) // 8 Math.random() * (10-2)+2 // Average between 7.564475903879611 | 2-8 Math.LN2 // 0.6931471805599453 Math.floor(2.6) // 2 | Minimum integer of specified value Math.ceil(2.6) // 3 | Maximum integer with specified value Math.round(2.6) // 3 | to the nearest integer to the specified value Math.max() // 3 Math.min() // 2 Math.sin(90) // 0.8939966636005579 Math.cos(90) // -0.4480736161291702
DOM operation
2.1 Node Number, Name and Value
There are 12 nodeType s, see MDN
<div class="you">HELLO YOU</div>
var you = document.getElementsByClassName('you')[0]
you.nodeType // 1
you.nodeName // BIV
you.nodeValue // null
you.textContent // HELLO YOU
you.innerText // "HELLO YOU"
2.2 Parent, child and adjacent nodes
Check whether there is a child node
document.documentElement.hasChildNodes('body') // true
View all child nodes
document.documentElement.childNodes // [head, text, body]
View the first child node
document.documentElement.firstChild // <head>...</head>
Accessing parent node
document.documentElement.childNodes[0].parentNode
Accessing adjacent nodes
document.documentElement.children[0].previousSibling // null document.documentElement.children[0].nextSibling // #text
2.3 Adding and deleting nodes
<div class="you">HELLO YOU</div>
var you = document.getElementsByClassName('you')[0]
New Node
var pTag = document.createElement('p')
var pVal = document.createTextNode('HELLO YOU')
pTag.appendChild(pVal) // <p>HELLO YOU</p>
Adding Nodes
document.body.insertBefore(pTag,you) document.body.replaceChild(you,pTag)
Delete Nodes
document.body.removeChild(you)
Cloning Node
true is a deep copy that copies the content of the node. flase only copies empty labels.
var newNodeFalse = document.body.cloneNode(true) var newNodeFalse = document.body.cloneNode(false) console.log(newNodeFalse) // <body>...</body> console.log(newNodeFalse) // <body></body>
2.4 attribute correlation
<div class="you">HELLO YOU</div>
var you = document.getElementsByClassName('you')[0]
Check for an attribute
you.hasAttributes('class') // true
Get specific attributes
you.getAttribute('class') // "you"
you.attributes[0].nodeValue // "you"
you.attributes['class'].nodeValue // "you"
selector
The querySelector uses a CSS selector that returns a single node. Returns all matched results using query Selector All.
document.querySelector('.you')
document.querySelectorAll('.you') // [div.you]
Batch add style
you.style.cssText = "color:red;font-size:200px;"
2.5 DOM aggregation
document.images document.applets document.links document.anchors document.forms document.cookie document.title document.referrer document.domain
2.6 DOM traversal
function walkDOM(n){
do {
console.log(n)
if(n.hasChildNodes()){
walkDOM(n.firstChild)
}
}
while (n=n.nextSibling)
}
walkDOM(document.body)
III. OTHER
3.1 Event
Prevent bubbles
event.stopPropagation() window.event.cancelBubble = true //IE
Prevent default events
event.preventDefault() return false // IE
Drag event
Touch Event
Here is a drawing page implemented by canva. Touch screen drawing The implementation process can directly look at the source code. In addition, the analysis of touch screen events, please see Bole Online.
touchstart touchmove touchend touchleave touchcancel
3.2 Browser Detection
User agents can be simulated, so it is more reliable to detect the current browser type according to the different features of the browser.
if(window.addEventlistener) {
// code...
}
else if(){
// code...
}
3.3 Three kinds of bullet windows
The three bullet windows are alert, confirm and prompt. Validation and interaction can be assigned to variables, which store the corresponding results.
alert('Welcome To JS!')
var isLike = confirm('Do you like JS?')
var whyLike = prompt('Why do you like it.')
console.log(isLike) // true
console.log(whyLike) // Maybe...
3.4 Forward and Backward Control Based on Browser History
Depending on the cached browser history, you can control forward, backward, and jump to the specified history.
window.history.forward() // Forward window.history.back() // Back off window.history.go(1) // Jump
3.5 Six Ways to Overload Pages
location.reload()
location.assign('/')
location.replace('/')
window.location.href = '/'
location = location
window.location.reload()
3.6 Modify the current page URL without refreshing the page
history.pushState({a:1},'','hello')
3.7 URI Coding
function decodeURI(url,params){
var url = url || 'http://www.cnblogs.com/bergwhite/'
var params = params || {name: 'berg', age: 22}
var query = []
for (param in params) {
query.push(param+'='+params[param])
}
return url+=query.join('&')
}
decodeURI() // "http://www.cnblogs.com/bergwhite/name=berg&age=22"
decodeURI('http://www.you.com/',{a:1,b:2}) // "http://www.you.com/a=1&b=2"
3.8 window correlation
New window opens content
window.open('http://www.baidu.com','zzzzzzzzzzzz','width=800px,height=300px,resizable=yes')
Determine whether it's a high-resolution screen
window.devicePixelRatio // 1
Thank you for your reading.