Xah Web Dev Blog Archive 2016-01

JavaScript: Closure (minor update)

Web Design of Popular Sites: Serif or Sans Serif, Fixed Layout or Flow?

Meaning of Font Size and Em Height

best way to JavaScript: Get Current Script Tag

JavaScript: Clone, Deep Copy Object/Array. new tip.

DOM, List Attributes

in DOM, there's a strange attributes property, which return a list of attributes of a element.

use it like this

var hh = document.getElementsByTagName("a")[0];

var aa = hh.attributes;

// number of attributes
aa.length

// first attribute
aa[0]

result object can be indexed by number (for example: result[2]) or attribute name (for example: result["src"]).

https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes

the returned object is a strange NamedNodeMap object. https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap

see DOM Standard#interface-namednodemap

each element of NamedNodeMap is a strange Attr object. This Attr object went thru major DOM changes. https://developer.mozilla.org/en-US/docs/Web/API/Attr

I think if you really want a list of all attributes of a node, then there's no other way, use node.attributes. But otherwise, you can use

by the way, i said they are strange, because they are strange to me, and probably rarely used. I need to read the DOM spec. Now with whatwg's spec, it should be much easier to read. DOM Standard

〔►see JavaScript: Basic DOM Methods

Disable Google Chrome Smooth Scrolling

latest Google Chrome v49 now has smooth scrolling. to disable it, goto chrome://flags/#disable-smooth-scrolling

JavaScript “undefined” trap

// JavaScript trap
var u = "2";
var o = {};
o[u.id] = 4;
console.log( o[u.id]); // works!!

lesson: JavaScript returns undefined in many situations, with no warning. (var with no init, non-existent property, out of bound array access, function with no return value, etc.) 〔►see JavaScript: “undefined”

so, here, the u.id implicitly becomes "undefined", and now you basically have o = {"undefined":4};

see also JavaScript: Property Key

WebSocket Tutorial

WebSocket is now mature, supported by all browsers.

Buy JavaScript in Depth. New version is out.

update sent to previous buyers. If you changed your email, let me know. email to xah@xahlee.org

Visual CSS. Now, there's side panel for easy navigation, for all pages.

JavaScript in Depth. Now each page has a side-panel, for easy navigation.

The Story of XML

ECMAScript 2015 Set Object's Parent

In ECMAScript 2015, a new function Object.setPrototypeOf(obj, parent) lets you set/change parent. (that is, effectively setting the [[prototype]] internal slot.) ECMAScript 2015 §Fundamental Objects#sec-object.setprototypeof

You should never change a object parent object. Because, for complex JavaScript implementation reasons, doing that is very slow. Instead, you should create a new object with the right parent. 〔►see JavaScript: How to Create Object with Parent X?

see also JavaScript: Property Key "prototype"

JavaScript: What Does Live Object Mean? (major update)

JavaScript: Event Delegation (updated. new code example, functional programing style)

JavaScript: Add / Remove Event Handler (updated)

JavaScript Execution Order (updated)

JavaScript: String Methods for RegExp. Major update. Examples are on a page of their own.

the one html tag that summarize just how fk'd the web standards and fashions in past decade is: iframe

Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.