Xah's Web Dev Blog

Tutorial on {HTML, CSS, JavaScript, …} + gossip on {Google, Internet, SEO, Spam, …}.

Buy Xah JavaScript Tutorial.

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


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.


// 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.) 〔➤ 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 46957
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: ƒ.call, ƒ.apply, ƒ.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)

CSS HSL Color Samples (minor update)

CSS: Background Image, CSS Sprites Tutorial (repost)

Intro to Chinese Encoding; What Character Encoding Does Chinese Sites Use? (minor update)

JavaScript: the Property Named “constructor”

minor update. Never use the “constructor” property.

Xah SVG Tutorial (much rework in the past weeks)

SVG: Text Element Tutorial (first version)

JavaScript: Convert Between String & Number (minor update)

The W3C, is now hip, due to competition with WHATWG. W3C now has github, with HTML, tutorial style!


by the way, if you didn't know already, the w3c and WHATWG split few years ago. NOT amicably. 〔➤ WHATWG vs W3C Split

web design: 3 more websites with unreadable gray on white

gray on white chrome devtools website 2015-08-05
Web Design: Say No to Grey Text on White Background

JavaScript: Throw Try Catch Finally (new)

JavaScript Syntax Complexity: Lookahead

JavaScript expression statement complexity 2015-08-13
JavaScript Syntax Complexity: Lookahead. ECMAScript 5.1 §12#sec-12.4

good DOM tutorial book

my JavaScript tutorial, on JavaScript the language, i consider to be the best on the web. Especially, the style i cover it. 〔➤ Xah JavaScript Tutorial by Example

my dom tutorial 〔➤ JavaScript+DOM Tutorial〕, is only a introduction.

if you want comprehensive dom tutorial, i can recommend 2 books:

JavaScript Operators (updated)

JavaScript: Navigate DOM Tree (updated)

JavaScript: DOM Whitespace Nodes (on its own page)

JavaScript: Get Element's Type, Tag Name, Content (updated)

JavaScript Array Methods (updated. Examples separated into own pages)

CSS Linear Gradient Tutorial (updated)

JavaScript quiz variable in array 2015-08-09
JavaScript quiz variable in array

New version of my JavaScript tutorial is out. See: Buy Xah JavaScript Tutorial

Buy it. Thanks.

JavaScript: Random Array Element, Randomize Array (on its own page)

JavaScript: Format Number (new code added)

js constructor quiz 2015-08-05
do you understand every line here? JavaScript: the Property Named “constructor” (updated)

JavaScript: the Bad Parts (added a new item about looping thru properties)

Web Design: Say No to Grey Text on White Background (more screenshot)

Understanding JavaScript Object System (more refinement)

So, Google Plus is now officially flopped, after 4 years of ado.

google plus failed news 2015-08-03
google plus failed news

The Google Plus Song (humor)

Firefox: Set Mouse Wheel Scroll Speed, Autoscroll (updated)

Firefox: Set Backspace Key to Go Back To Previous Page

Web Design, Minimal Window Width of Popular Sites (repost)

Google Chrome. Hover mouse over a link. It should show the URL. But, Google Chrome had a bug since about 2014-07

JavaScript: Keyword “this” (major update. Added a section on the purpose)

JavaScript: Array Compare Equality

JavaScript: Range Function for Array

JavaScript: Timing JavaScript Code

China ISP Ad Injection

Google gmail's spam box is now deciding what you should see. This from Linux Torvalds. https://plus.google.com/+LinusTorvalds/posts/DiG9qANf5PA

Google Gmail Blocks Mozilla Thunderbird

JavaScript Execution Order; Asynchronous JavaScript (minor update)

JavaScript Fun with new, null, null char, …

new;    // syntax error. keyword “new” must be followed by a expression
x[new] = 22; // syntax error. keyword “new” must be followed by a expression

x."new" = 11; // syntax error. dot notation can't start with quote
x.new = 7;    // valid. new is converted to a string

"\x00" // valid. a string with a null char.

var x = { null: 3 }; // valid. null is converted to string here
var x = { new: 2 };  // valid. new is converted to string here

var x = { "\x00": 4}; // valid. string with a null char, as property name

var x = { "p": null }; // valid. property value can be any value.

Asynchronous JavaScript: Using JavaScript to Insert JavaScript (minor update)

Google's PageSpeed Insights Fails Its Own Site

why JavaScript object hierarchy is confusing
why JavaScript object hierarchy is confusing

JavaScript: Understanding Prototype & Inheritance

find nesting depth of a element

// find nesting depth of a element
function getDepth (ele) {
    var dp = 0;
    while ( ele.parentNode !== null ) {
        ele = ele.parentNode;
        dp++; }
    return dp;

JavaScript: ECMAScript 2015 Features First draft.

ECMAScript 2015 Language Specification – ECMA-262 6th Edition Now with collapsible table of contents.

Brendan Eich, inventor of JavaScript, turns out, is not a good presenter, nor is he a good blogger.

node.js size bloat
node.js size bloat

JavaScript, in ES6, the term “host object” is gone.

JavaScript, in ES6, the term “native object” is now called “standard” object.


JavaScript object tree
JavaScript: Understanding Prototype & Inheritance

JavaScript: How to Convert Array-Like Object to Array? (major update)

// js quiz. what does it return
 "toString" in {p:3}

answer: JavaScript: Accessing & Listing Properties

JavaScript: Reading & Writing to Property and Prototype Chain (new. on its own page)

JavaScript: Create & Delete Property (new. on its own page)

JavaScript: Property Overview (new)

JavaScript quiz: property name with space

var x={"a b": 8};
x["a b"];
x[a b];
x."a b";

JavaScript: Dot Notation vs Bracket Notation for Accessing Properties

JavaScript: Understanding Prototype & Inheritance (major update. Added standard object inheritance hierarchy. A picture is coming.)

JavaScript: the Bad Parts

JavaScript object's __proto__ property for getting parent is now officially blessed by ES 6. JavaScript: How to Find Object's Prototype/Parent?

in ECMAScript 6, the confusing terminology “internal property”, is now called “internal slot”.

see ECMAScript Data Types and Values#sec-object-internal-methods-and-internal-slots

syntax coloring of JavaScript compared. Syntax Coloring in Editors

ES6 added several new math functions, among which, is Math.hypot(…) that computes the length of a vector! See updated: JavaScript Math Object & Methods

If you haven't heard, ES6 is officially released.

JavaScript: Semicolon

xah-unicode-search now on github


SVG Path Tutorial (updated)

JavaScript: Set Element's Attribute Value (minor update)

JavaScript: How to Use Browser's JS Console (on its own page)

HTML “ruby” Annotation Example Firefox now supports ruby annotation.

JavaScript: .appendChild Example (appenChild actually moves the child.)

JavaScript: Creating Nodes, Functional Programing Style

WHATWG vs W3C Split

CSS: Flowing List (updated)

CSS: Animation Tutorial (minor update)

JavaScript quiz #85753

// js quiz. what does this return.
var f = function () { return 3; }
var g = function () { f = function () { return 7; }; return 4; }

comment at https://plus.google.com/+XahLee/posts/bEUYbj2F7JY

evolution of the web. “permalink”, “tag cloud”

evolution of the web. The term “permalink” is now dead. as well as “tag cloud”. “cloud” itself probably will die in a few years.

Run windows 95 in browser. http://win95.ajf.me/

What's the Difference Between jQuery Selector and DOM querySelectorAll()? (minor update)

Internet Users World Map