Xah Web Dev Blog

2 nice JavaScript lib for plotting math functions.

function-plot. runs on top of d3js. features interval arithmetics. https://github.com/maurizzzio/function-plot/

jsxgraph. geometer sketchpad like lib. http://jsxgraph.uni-bayreuth.de/wp/index.htmlhttps://github.com/jsxgraph/jsxgraph

JavaScript: Semicolon Rules. Much update.

there are 2 schools of thought. One, the Douglas Crockford classicist, recommend adding semicolon. The other, often younger, JavaScript coding hotshots in industry, recommend ommiting semicolon at all times.

JavaScript SVG set style problem

3 hours spent debugging this

svgElement.setAttribute("style", styleStr)

vs

svgElement.style = styleStr;

The latter does not work on a 2011 old android tablet running 3 years old CyanogenMod running Google Chrome (too lazy to check version).

JavaScript Quiz. Array Splice Insert Without Nesting

// js quiz

// you have
function add () { return ["a","b"]; }
var tt = [1,2,3,4];

// you want
// [ 1, 'a', 'b', 2, 3, 4 ]

// modify tt, using splice. How?

for answer, see JavaScript: Array Splice Example

JavaScript: Array.prototype.reduce and reduceRight Example (new page. Basic example.)

JavaScript: Compute Date Range

Understand Atomic CSS in 1 Minute

JavaScript: Flatten Nested Array

see also JavaScript: Array How-To

JavaScript: Array.prototype.every Example

JavaScript: Test Equality of Objects

now, a function that compare 2 arbitrary objects, by deep dive.

JavaScript: Array Compare Equality (updated)

JavaScript: DOM Whitespace Nodes (added more example)

never, use delete to remove element in a array. Use Array.prototype.splice. It is the most general way to insert or remove slices at any position.

See JavaScript: Array Splice Example

JavaScript: Method Chaining and Function Composition

new version of JavaScript in Depth is out. Sent to previous buyers.

Buy Xah JavaScript Tutorial

if you bought it before, please leave a comment or review at Buy Xah JavaScript Tutorial. Hopefully positive. Thanks.

JavaScript: Replace All Children, createDocumentFragment

JavaScript: Randomize DOM List or Element Children

web bugs is now called web beacon.

that is, those 1 by 1 pixel image file used for tracking. (and many other techniques, now being standardized if not already)

Beacon spec https://www.w3.org/TR/beacon/

json syntax vs JavaScript syntax

json syntax isn't just what JavaScript accepts. For example:

see also JavaScript: JSON Methods

〔➤see Python: Read/Write to JSON

HTTP Protocol Tutorial (new)

CSS Random Gradient with JavaScript, at CSS Linear Gradient Tutorial

CSS Radial Gradient Tutorial (minor update)

JavaScript: Closure (minor update)

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

Meaning of Font Size. Standard Size for All Fonts?

best way to JavaScript: Get Current Script Tag

JavaScript: Clone Object. 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”

and JavaScript property names are strings. They are implicitly converted to string automatically. 〔➤see JavaScript: Property Names Are Strings

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

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 Dictionary of 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 Named “prototype”

JS+DOM: 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 Regex. Major update. Examples are on a page of their own.

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

JavaScript Encode URL, Escape String (updated)

JavaScript: Tagged Template String

JavaScript: Template String

Global Internet Usage Hour Pattern. Guess when is internet most busy in usa, and when in china. local time.

JavaScript wuwu quiz

// quiz. figure out what does this code do
// 2015-10-29

function foo() {
    var eleName = document.getElementById("x79177");
    alert(
        (function(le) {
            return function(f) {
                return f(f);
            } (function(f) {
                return le(
                    function(x) { return (f(f))(x); }
                );
            });
        }) (function (givenGetDepth) {
            return function (element) {
                return (element === null) ? 0 : givenGetDepth(element.parentNode) + 1;
            };
        }) (document.getElementById(eleName))

    );
};
foo();

JavaScript: Property Named “prototype” (new page)

JavaScript: “undefined” (new page)

JavaScript: What's “null” Used For? (new page.)

is xml dead related search 2015-10-17
is XML dead?

On a different note, James Clark (programmer), the top expert of XML, his last blog entry is 5 years ago http://blog.jclark.com/

XML and XHTML is a sad story. Excellent tech, but blown up by enterprise. Now we have the HTML5 soup, back to the roots of random soup.

web design gray text on white Joe Arms Erlang 2015-10-16
can you read the grey text?

another gray on white. This one from the inventor of erlang language. Web Design: Say No to Grey Text on White Background

Buy JavaScript in Depth. New version is out.

This is early stage of selling my tutorial. If you enjoyed it, please help me spread the word. Leave a comment at JavaScript in Depth. Thanks.

major re-organization of the js+dom table of contents page. JavaScript+DOM Tutorial

v8 comilation quirk: char count

these 2 JavaScript code, one is twice as slow, because its comment has a few 4 more chars.

#NodeJS : A quick optimization advice By Jefferson Rafael K. @ https://medium.com/@c2c/nodejs-a-quick-optimization-advice-7353b820c92e

web dev front-end and back-end

the original work: 1600×996. Artist is Hans Arnold.

upgrade to latest node.js (v4.x), then you'll have latest es6 support as Google Chrome browser.

write once, run anywhere. —JavaScript

JavaScript Books Review

JavaScript quiz of the day. true or false?

function f () {};
Function.prototype = 3;
console.log( f instanceof Function );

refresh here JavaScript “instanceof” Operator, but that still may not answer why.

puzzling? discuss at https://plus.google.com/+XahLee/posts/CLMxi9LGteG

Solution

this will silently fail.

// silently fail
Function.prototype = 3;

If you add "use strict", then error is reported.

"use strict";
Function.prototype = 3;

// Function.prototype = 3;
//                    ^
// TypeError: Cannot assign to read only property 'prototype' of function Function() { [native code] }

You cannot change Function.prototype, because the “prototype” property there does not have “writable” attribute.

console.log(
    Object.getOwnPropertyDescriptor(Function,"prototype")
);

// output:
// { value: [Function: Empty],
//   writable: false,
//   enumerable: false,
//   configurable: false }

JavaScript: Property Attributes: Writable, Enumerable, Configurable

HTML Input Range: Slider UI

JavaScript: SVG Clock (updated. Using svg transform instead for moving the hands.) 〔➤see SVG: Coordinate Transformation

get local copy of html5 spec

the whatwg group finally made building their html5 spec simple. git and build your own for local reading. https://github.com/whatwg/html-build

SVG Path: Elliptical Arc (new)

emacs google plus girl profile spam 2015-09-24 47415
Pretty Girl Spam

now i succumb to the tyranny of JSDoc. http://usejsdoc.org/

JavaScript: Should You Move Variables to the Top? (updated.)

How to Disable JavaScript, Flash, Java in Google Chrome, Firefox, Internet Explorer (repost)

JavaScript: f.call f.apply f.bind (major rewrite)

JavaScript: How to Get Max/Min Value of a Array? (on its own page)

Web Spam, Scam, Blackhat SEO Collection

CSS: What's a CSS Pixel? What's Reference Pixel? (rewritten)

Past Articles by Date

2015-082015-072015-052015-042015-032014-112014-102014-092014-082014-072014-062014-052014-042014-032014-022014-012013-122013-112013-102013-092013-082013-072013-062013-052013-042013-032013-012012-112012-102012-092012-072012-052012-042012-032012-012011-082011-062011-042011-012010-072010-01

Like what you read? Buy JavaScript in Depth.