ppk on JavaScript
Introduction: Part of the introduction
Table of Contents
The eight example scripts: Links to the working versions and the scripts in text format; lists of the pages where aspects of these scripts are discussed
Errata
Links: All URLs from the book in handy Web link format
Book posts: From the QuirksBlog archives
The book
The blogs
QuirksBlog
Bug Report: The bug report system that aims to gather many browser bugs
Elsewhere on the 'Net: Links to interesting stuff on other sites
Blogroll: some blogs that I read
Bug Report: The bug report system that aims to gather many browser bugs
Elsewhere on the 'Net: Links to interesting stuff on other sites
Blogroll: some blogs that I read
Compatibility Tables
Overview
DOM - Core
DOM - HTML
DOM - CSS
DOM - Events
DOM - Event properties
DOM - CSS Object Model View
DOM - Core
DOM - HTML
DOM - CSS
DOM - Events
DOM - Event properties
DOM - CSS Object Model View
Drafts
JavaScript
Table of contents
General
Introduction: What JavaScript is. What it can do. Debugging scripts.
Placing JavaScript: How to add JavaScript to HTML pages. JavaScript includes. The <NOSCRIPT> tag
Object detection: How to see if a browser supports a certain object. Use this instead of a browser detect.
Placing JavaScript: How to add JavaScript to HTML pages. JavaScript includes. The <NOSCRIPT> tag
Object detection: How to see if a browser supports a certain object. Use this instead of a browser detect.
Core
Statements: if() and for().
Functions: How does a JavaScript function work? What can you do with it?
Strings: What are strings and what can you do with them?
Boolean logic: Important in all programming languages.
Associative arrays: How to use JavaScript objects as associative arrays.
The this keyword: How the this keyword works. Currently only treats event handling.
Functions: How does a JavaScript function work? What can you do with it?
Strings: What are strings and what can you do with them?
Boolean logic: Important in all programming languages.
Associative arrays: How to use JavaScript objects as associative arrays.
The this keyword: How the this keyword works. Currently only treats event handling.
Date and time
Introduction to date and time: Epoch Time. The Date object and its methods. The millennium problem and its solution. Compatibility table for date.getYear() and date.getFullYear().
Date and time: How to write a script that prints out the date and time.
Last modified: How to write a script that shows how old your documents are in a user friendly way.
Date and time: How to write a script that prints out the date and time.
Last modified: How to write a script that shows how old your documents are in a user friendly way.
BOM
Introduction to frames: How to influence other frames.
Popups: How to create a popup exactly as you want it.
Cross-window scripting: Sequel to the pop-up script. How to influence other windows.
Iframes: How to deal with iframes.
Browser detect: How to see what browsers your visitors are using. Why not to depend on this too much.
Cookies: How to manage cookies.
Popups: How to create a popup exactly as you want it.
Cross-window scripting: Sequel to the pop-up script. How to influence other windows.
Iframes: How to deal with iframes.
Browser detect: How to see what browsers your visitors are using. Why not to depend on this too much.
Cookies: How to manage cookies.
Events
Introduction to Events: General introduction to event handling. Overview. Browser compatibility problems.
The events: Event descriptions and compatibility tables.
Early event handlers: Inline model, default actions and preventing them.
Traditional model: The traditional event registration model that works in all Version 4+ browsers.
Advanced models: The W3C and Microsoft event registration models.
Event accessing: How to access the event object.
Event properties: How to read out event properties despite serious browser incompatibilities.
Event order: Event capturing and event bubbling. currentTarget
Mouse events: Some advanced tricks and problems of the mouse events. relatedTarget, fromElement, toElement.
Event pairs: To keep our sites accessible to non-mouse users we must use non-mouse events in addition to mouse events. Which ones?
Detecting keystrokes: How to detect the keys your users press.
addEventSimple: My utility function for simple unobtrusive event handler creation.
The events: Event descriptions and compatibility tables.
Early event handlers: Inline model, default actions and preventing them.
Traditional model: The traditional event registration model that works in all Version 4+ browsers.
Advanced models: The W3C and Microsoft event registration models.
Event accessing: How to access the event object.
Event properties: How to read out event properties despite serious browser incompatibilities.
Event order: Event capturing and event bubbling. currentTarget
Mouse events: Some advanced tricks and problems of the mouse events. relatedTarget, fromElement, toElement.
Event pairs: To keep our sites accessible to non-mouse users we must use non-mouse events in addition to mouse events. Which ones?
Detecting keystrokes: How to detect the keys your users press.
addEventSimple: My utility function for simple unobtrusive event handler creation.
DOM
W3C DOM Introduction: Introduction to the Level 1 DOM. Nodes, walking through them, changing them, creating or removing them.
Level 1 DOM
Edit text: How to allow users to edit a text on a page.
TOC: A script that generates a Table of Contents
Textarea Maxlength: To add a maximum length to a textarea and warn the user when he exceeds this maximum length
getElementsByTagNames(): A custom script for getting elements by several tag names in the order they appear in the document.
W3C methods vs. innerHTML: Test script to find the fastest way to write large amounts of content into the page.
TOC: A script that generates a Table of Contents
Textarea Maxlength: To add a maximum length to a textarea and warn the user when he exceeds this maximum length
getElementsByTagNames(): A custom script for getting elements by several tag names in the order they appear in the document.
W3C methods vs. innerHTML: Test script to find the fastest way to write large amounts of content into the page.
Forms
Introduction to forms: How to write a script that checks user input in a form.
Example form: Simple example of a script that checks user input in a form.
Usable Forms: How to show and hide form fields based on user actions.
Extending forms: An example script for the way in which the W3C DOM may radically change the interaction of a site.
Error messages: How to write error messages next to the form field they apply to.
Example form: Simple example of a script that checks user input in a form.
Usable Forms: How to show and hide form fields based on user actions.
Extending forms: An example script for the way in which the W3C DOM may radically change the interaction of a site.
Error messages: How to write error messages next to the form field they apply to.
Range
Introduction to Range: What a Range is and how you can use it.
Level 0 DOM: General info about the DOMs; history. The Level 0 Document Object Model, for mouseovers and form checks.CSS modification
style vs. className: Test script to find the fastest way to change the style of elements.
Find position: How to get the true position of an element on the page.
Get styles: How to get the default styles of your page.
Change style sheet: How to change an entire style sheet.
Opacity setting: Which elements allow you to set opacity.
Styling an input type="file": Can almost, but not quite, be done in pure CSS. I prefer JavaScript nonetheless.
Element dimensions: Six property pairs that say something about the dimensions of an HTML element.
Drag and drop: A drag and drop script that's keyboard accessible
Find position: How to get the true position of an element on the page.
Get styles: How to get the default styles of your page.
Change style sheet: How to change an entire style sheet.
Opacity setting: Which elements allow you to set opacity.
Styling an input type="file": Can almost, but not quite, be done in pure CSS. I prefer JavaScript nonetheless.
Element dimensions: Six property pairs that say something about the dimensions of an HTML element.
Drag and drop: A drag and drop script that's keyboard accessible
Data retrieval
XMLHttpRequest functions: The functions I always use
Site navigation: How the site navigation works
XMLHttpRequest posts: From the QuirksBlog archives
Site navigation: How the site navigation works
XMLHttpRequest posts: From the QuirksBlog archives
CSS
Table of contents: Includes browser compatibility chart
General
Quirks and Strict Mode: How to trigger them, what the differences are
CSS Hacks: Why not to use them
Conditional comments: Explorer Windows only
CSS Hacks: Why not to use them
Conditional comments: Explorer Windows only
CSS 2 selectors
* selector: Selects all elements
> selector: Selects direct children of an element
+ selector: Selects the next sibling of an element
[attr] selector: Selects an element with a certain attribute value
Multiple classes: Giving an element two or more classes
:hover and :active: Elements with the mouse over them, or active elements
:first-child and :last-child: Select first and last children of an element
:focus: Form elements that have the focus
> selector: Selects direct children of an element
+ selector: Selects the next sibling of an element
[attr] selector: Selects an element with a certain attribute value
Multiple classes: Giving an element two or more classes
:hover and :active: Elements with the mouse over them, or active elements
:first-child and :last-child: Select first and last children of an element
:focus: Form elements that have the focus
CSS 2 declarations
counters: These allow you to use counters for headings or other elements
cursor: auto, crosshair, default, help, move, pointer (and hand), progress, text, wait
display: block, inline, inline-block, none, list-item, run-in, compact, table
List styles: list-style-type, list-style-image, list-style-position
min and max: min-width, max-width, min-height, max-height
outline: A sort of border
overflow: visible, hidden, scroll, auto
position: static, relative, absolute, fixed
Table columns: Dividing a table in columns and applying styles to these columns
Fun with tables: empty-cells, border-collapse, border-spacing, table-layout
white-space: pre, nowrap
cursor: auto, crosshair, default, help, move, pointer (and hand), progress, text, wait
display: block, inline, inline-block, none, list-item, run-in, compact, table
List styles: list-style-type, list-style-image, list-style-position
min and max: min-width, max-width, min-height, max-height
outline: A sort of border
overflow: visible, hidden, scroll, auto
position: static, relative, absolute, fixed
Table columns: Dividing a table in columns and applying styles to these columns
Fun with tables: empty-cells, border-collapse, border-spacing, table-layout
white-space: pre, nowrap
CSS 3 selectors
~ selector: Selects the general next sibling of an element
More [attr] selectors: Selects an element with an attribute whose value starts with, ends with, or contains a certain string.
:first-line and :first-letter: Select the first line or the first letter of an element
:before and :after: Insert content before or after an element
:not: Negation selector
:root: The root element, or initial containing block
:target: Selects an element that's the current target of a hash in the URL
:enabled: :disabled and :checked for form fields
:empty: Empty elements
::selection: To style text selected by the user
:only-child: Selects an element that's the only child of its parent
:nth-child(): Selects elements according to a formula
Media queries: To define styles for certain monitor sizes
More [attr] selectors: Selects an element with an attribute whose value starts with, ends with, or contains a certain string.
:first-line and :first-letter: Select the first line or the first letter of an element
:before and :after: Insert content before or after an element
:not: Negation selector
:root: The root element, or initial containing block
:target: Selects an element that's the current target of a hash in the URL
:enabled: :disabled and :checked for form fields
:empty: Empty elements
::selection: To style text selected by the user
:only-child: Selects an element that's the only child of its parent
:nth-child(): Selects elements according to a formula
Media queries: To define styles for certain monitor sizes
CSS 3 declarations
background-attachment: The three values of this declaration deconstructed
Multiple background images: How to define more backgrounds for one element
box-sizing: How to switch box models
Columns: How to divide a box into several columns
content: for use with :before and :after
content: To overwrite the content of an element, independent of :before and :after
opacity
resize: To allow users to resize an element.
text-shadow: To define a text shadow
Multiple background images: How to define more backgrounds for one element
box-sizing: How to switch box models
Columns: How to divide a box into several columns
content: for use with :before and :after
content: To overwrite the content of an element, independent of :before and :after
opacity
resize: To allow users to resize an element.
text-shadow: To define a text shadow
About
About this site and myself
About me
Freelance web developer
Client side
Skills
Webrichtlijnen
My CV
My publications
Conferences: I'll speak at some, and attend others
Client side
Skills
Webrichtlijnen
My CV
My publications
Conferences: I'll speak at some, and attend others
About this site
Frequently Asked Questions
Copyright: This site is largely, but not entirely, free of copyright. Read about the exceptions.
Colophon
Site redesign posts
Copyright: This site is largely, but not entirely, free of copyright. Read about the exceptions.
Colophon
Site redesign posts
My portfolio
Politics
Politics homepage
The Rules of the Game: A general introduction to the Dutch political system
The Ins and Outs: The three large parties and their dance around the centre of power
The Ins and Outs: The three large parties and their dance around the centre of power
Documentation
Denominational segregation: The political system that ruled from 1900 to 1970. Short history.
Party overview: Dutch election results 1977-present, with a rough indication of where the parties stand on several issues
Maps
Party overview: Dutch election results 1977-present, with a rough indication of where the parties stand on several issues
Maps