Book Review

"Professional: JavaScript for Web Developers, Third Edition" part 2

In chapter 6, the book demonstrate how to control JavaScript object’s property with its internal value. I think immuntable.js may make sure this techniques in implementation.
In chapter 7, is show some interest property in function object, but it is not accessible in strict mode, it is not very useful.
In chapter 9, this book explain how user agent evolve, and meaning of each component. It is quite interesting.

Chapter 6: Object-Oriented Programming

Internal values of property of objects

Object.defineProperty() and Object.defineProperties() can change the internal value

  • data attribute
    • configurable
    • enumerable
    • writable
    • value
  • accessor attribute
    • configurable
    • enumerable
    • get
    • set

Other Information

  • instanceof check prototype chain
  • constructor will create a new context, changing the this value

Class Inheritance

The books spent lots of time to talk about implementation of class inheritance in JavaScript. I skipped it as ES6 have support class. What is the es5 equivalent of es6 class may be an interesting question.

  • Prototype share all functions
    • But access time is long
  • In ECMAScript spec, prototype is internal object, but many browsers implement __proto__
    • Standard way to get prototype is getPrototypeOf
  • in operator
    • (name in object) return true if the object have an index name
      • no matter it is a instance property or prototype property
  • All native object use prototype
  • Prototype and constructor can be different
  • Drawback of prototype, can change inheritance during execution
  • Although possible, it is not recommended to modify native object prototypes in a production environment.
  • Share data value (especially array and object) in prototype can cause tricky bugs
    • One solution is use constructor for data property, prototype for function property
      • I think we should stick to es6 class if possible, it is over-complicated to implement class in es5
  • return statement in constructor can override the value return by constructor by default

Chapter 7: Function Expressions

  • Recursion
    • callee vs function f() and f = function()
      • callee is not available in strict mode
      • anonymous function fail if the function varaible changed
        • as the recursion coerced to the variable
      • Use named function in recursion
  • Anonymous function != closure
    • Closures are functions that have access to variables from another function’s scope.
  • Closures carry with them the containing function’s scope
    • They take up more memory than other functions.
    • It’s recommended you use them only when absolutely necessary.
    • Beware which context do this refer to
  • Can use closure to mimic block scope
    • let keyword in es6 create variable in block scope

Chapter 8: The Browser Object Model

window and frame

  • window in BOM is global in ECMAScript
  • All frames have its own window
    • It means there are multiple global object, one object for one frame
  • window.frames store all window object for frames in this frame
  • window is current frame
  • The window.top object always points to the very top (outermost) frame, which is the browser window itself.
  • Root’s window.parent is itself
  • screenLeft and screenTop give frame position information

  • window.self = window

  • Cross browser window position detection

    • Check both screenLeft and screenX
    • Is it standardized now?
  • Window size
    • window.innerWidth and document.body.clientWidth
    • Is it standardized now?

Pop up window

  • window.open() can change the content of iframe.
  • special windows’ name _self, _parent, _top, or _blank.
  • Also have lots of setting to control pop up window
  • open() return null if it is blocked by build-in pop up blocker

Set time out

  • Can accept string input instead of function
    • but it is not recommended, because there are performance penalty
  • this in timeout callback refer to window
    • if bind() is not called

Location object

  • assign() process the new url and add to history
    • equivalent assign url to window.location and location.href
  • If you don’t want to update history, use replace()
  • reload() may load the page from browser cache
    • use reload(true) to force browser to get a new page
  • usually for client detection
  • appcodename always return mozilla
  • Can detect plugin like flash shockwave
  • registerContentHandler() and registerProtocolHandler()
    • Don’t know what is it

screen object

Is it standard? From MDN, seems in working draft

history object

It will refresh page, how web app work?

  • go()
    • integer / url string
  • back()
  • forward()

Chapter 9: Client Detection

  • Capability detection
    • Use JavaScripts to check
      • Make sure method exist and make sure the method is a function.
      • But IE 8 have buggy typeof, sometimes return object instead of function
      • We can use double NOT operator to produce a Boolean result
        • Which is more optimal to store and access
  • Quirks Detection
    • Detect browser bugs
  • User-Agent Detection
    • Identifying the rendering engine
      • The exact name and version of a browser isn’t as important as the rendering engine being used.
    • Detect platform is also useful
      • Notice that game systems have web browser now
  • Capability detection > Quirks Detection > User-Agent Detection

Chapter 10: The Document Object Model

  • 12 types of node, all of which inherit from a base type.
    • Node.ELEMENT_NODE (1)
    • Node.ATTRIBUTE_NODE (2)
    • Node.TEXT_NODE (3)
    • Node.CDATA_SECTION_NODE (4)
    • Node.ENTITY_REFERENCE_NODE (5)
    • Node.ENTITY_NODE (6)
    • Node.PROCESSING_INSTRUCTION_NODE (7)
    • Node.COMMENT_NODE (8)
    • Node.DOCUMENT_NODE (9)
    • Node.DOCUMENT_TYPE_NODE (10)
    • Node.DOCUMENT_FRAGMENT_NODE (11)
    • Node.NOTATION_NODE (12)
    • Not all types are supported

node interface

  • Basic properties
    • nodeName is tag name
    • nodeValue is null (if element)
  • Node relationship
    • childNodes contain NodeList
      • NodeList is an array like object, but not instance of Array)
    • Node list is living, any change reflect directly
    • Related properties
      • parentNode
      • previousSibling
      • nextSibling
      • firstChild
      • lastChild
      • hasChildNodes()
    • One final relationship is shared by every node.
      • The ownerDocument property is a pointer to the document node that represents the entire document.
  • Manipulating Nodes
    • DOM node exist at most one location in a document
    • appendChild(), which adds a node to the end of the childNodes list
      • It does not create new node, it move node.
    • insertBefore()
    • replaceChild()
    • removeChild()
    • cloneNode()
      • It only copy attributes and, optionally, child nodes.
      • Event handlers are not cloned
    • normalize()
      • Merge text node and remove empty text node

Document node

  • Can be accessed by window.document
  • nodeType is 9.
  • nodeName is “#document”.
  • parentNode is null.
  • ownerDocument is null.
  • document.documentElement, which always points to the element in an HTML page.
  • document.body
  • document.doctype
    • Inconsistent browser support
  • Useful properties
    • title, URL, domain, and referrer
    • The ability to set document.domain is useful when there is a frame or iframe on the page from a different subdomain.
      • Pages from different subdomains can’t communicate with one another via JavaScript because of cross-domain security restrictions.
        • By setting document.domain in each page to the same value, the pages can access JavaScript objects from each other.
  • document.getElementById()
  • document.getElementsByTagName()
    • Tag names are case insensitive for html, but sensitive for xml and xhtml
  • Special collections
    • document.anchors
    • document.applets
    • document.forms
    • document.images
    • document.links
  • DOM Conformance Detection
    • document.implementation.hasFeature()
      • Browser vendor may not implement the feature correctly
      • This is not very reliable
  • document.write()
    • Write content to document directly

Inline script injection

Beware cannot have string contains '</script>', it will be parsed as close tag of javascript. We need to escape /, like '<\/script>'

Document writing is not supported in strict XHTML documents. For pages that are served with the application/xml+xhtml content type, these methods will not work.

Element node

  • nodeType is 1.
  • nodeName is the element’s tag name.
  • nodeValue is null.
  • parentNode may be a Document or Element.
  • nodeName is always in uppercase
  • Standard attributes
    • id, title, lang, dir, className
      • dir is the direction of language, can be ltr or rtl
      • className is class attributes in HTML
        • class is not used in JavaScript because it is reserved word
  • There are lots of subtype for element node, each represent a HTML tag
  • style object is not living (change not directly reflect)
  • element.attributes is living
  • NameNodeMap type
    • getNamedItem(name) — Returns the node whose nodeName property is equal to name.
    • removeNamedItem(name) — Removes the node whose nodeName property is equal to name from the list.
    • setNamedItem(node) — Adds the node to the list, indexing it by its nodeName property.
    • item(pos) — Returns the node in the numerical position pos.

Text node

  • nodeType is 3.
  • nodeName is “#text”.
  • nodeValue is text contained in the node.
  • Child nodes are not supported.
    • appendData(text) — Appends text to the end of the node.
    • deleteData(offset, count) — Deletes count number of characters starting at position offset.
    • insertData(offset, text) — Inserts text at position offset.
    • replaceData(offset, count, text) — Replaces the text starting at offset through offset + count with text.
    • splitText(offset) — Splits the text node into two text nodes separated at position offset.
    • substringData(offset, count) — Extracts a string from the text beginning at position offset and continuing until offset + count.
  • length property return the length of text
  • The special characters add to text node by method is automatically escaped
  • parentNode.normalize() merge the adjacent children or remove empty text node

Comment node

  • nodeType is 8.
  • nodeName is “#comment”.
  • nodeValue is the content of the comment.
  • parentNode is a Document or Element.
  • Child nodes are not supported.
  • Inherit from text node, having the methods.
  • can access text by node.data
  • Browsers don’t recognize comments that exist after the closing tag.

CDATASection

CDATA sections are specific to XML-based documents

  • nodeType is 4.
  • nodeName is “#cdata-section”.
  • nodeValue is the contents of the CDATA section.
  • parentNode is a Document or Element.
  • Child nodes are not supported.
  • Also inherit form text node
  • CDATA sections are valid only in XML documents
    • So most browsers will incorrectly parse a CDATA section into either a Comment or an Element.

DocumentType

  • nodeType is 10.
  • nodeName is the name of the doctype.
  • nodeValue is null.
  • parentNode is a Document.
  • Child nodes are not supported.
  • Cannot be create by code in DOM level 1
    • Only the name property is useful in html and xhtml, entities and notations are empty

The DocumentFragment Type

  • nodeType is 11.
  • nodeName is “#document-fragment”.
  • nodeValue is null.
  • parentNode is null.
  • No representation in markup
  • Cannot be add to document directly
  • For render performance
    • Can create a document fragment with multiple element to prevent live update of each insertion
      • In another word, we can achieve batch update with doucment fragment

Attr type

  • nodeType is 11.
  • nodeName is the attribute name.
  • nodeValue is the attribute value.
  • parentNode is null.
  • Child nodes are not supported in HTML.
    • Child nodes may be Text or EntityReference in XML.
  • Exist in an element’s attributes property.
    • But not considered part of the DOM document tree
    • There are three properties on an Attr object:
      • name, which is the attribute name (same as nodeName)
      • value, which is the attribute value (same as nodeValue)
      • specified always return true
  • From MDN, attribute node no longer inherit from node in DOM 4
    -The getAttribute(), setAttribute(), and removeAttribute() methods are preferable over manipulating attribute nodes.
    • Custom properties does not show up in object, need to use getAttribute()
    • Attribute names get normalized to lowercase when set using setAttribute()

Manipulating Tables

There are methods to make create table element easier

Element Traversal

There are new properties and methods to help us access sibling, children elements and number of children elements (not include comment and text node)