2009 June » Vivian Crap

Jun 17

Color Picker

Color Palette for Web

Below is a chart covering the 216 hexidecimal color values from the web safe palette. Use this chart if you prefer to use colors from the web safe palette.

#FFFFFF
#FFFFCC
#FFFF99
#FFFF66
#FFFF33
#FFFF00
#FFCCFF
#FFCCCC
#FFCC99
#FFCC66
#FFCC33
#FFCC00
#FF99FF
#FF99CC
#FF9999
#FF9966
#FF9933
#FF9900
#FF66FF
#FF66CC
#FF6699
#FF6666
#FF6633
#FF6600
#FF33FF
#FF33CC
#FF3399
#FF3366
#FF3333
#FF3300
#FF00FF
#FF00CC
#FF0099
#FF0066
#FF0033
#FF0000
#CCFFFF
#CCFFCC
#CCFF99
#CCFF66
#CCFF33
#CCFF00
#CCCCFF
#CCCCCC
#CCCC99
#CCCC66
#CCCC33
#CCCC00
#CC99FF
#CC99CC
#CC9999
#CC9966
#CC9933
#CC9900
#CC66FF
#CC66CC
#CC6699
#CC6666
#CC6633
#CC6600
#CC33FF
#CC33CC
#CC3399
#CC3366
#CC3333
#CC3300
#CC00FF
#CC00CC
#CC0099
#CC0066
#CC0033
#CC0000
#99FFFF
#99FFCC
#99FF99
#99FF66
#99FF33
#99FF00
#99CCFF
#99CCCC
#99CC99
#99CC66
#99CC33
#99CC00
#9999FF
#9999CC
#999999
#999966
#999933
#999900
#9966FF
#9966CC
#996699
#996666
#996633
#996600
#9933FF
#9933CC
#993399
#993366
#993333
#993300
#9900FF
#9900CC
#990099
#990066
#990033
#990000
#66FFFF
#66FFCC
#66FF99
#66FF66
#66FF33
#66FF00
#66CCFF
#66CCCC
#66CC99
#66CC66
#66CC33
#66CC00
#6699FF
#6699CC
#669999
#669966
#669933
#669900
#6666FF
#6666CC
#666699
#666666
#666633
#666000
#6633FF
#6633CC
#663399
#663366
#663333
#663300
#6600FF
#6600CC
#660099
#660066
#660033
#660000
#33FFFF
#33FFCC
#33FF99
#33FF66
#33FF33
#33FF00
#33CCFF
#33CCCC
#33CC99
#33CC66
#33CC33
#33CC00
#3399FF
#3399CC
#339999
#339966
#339933
#339900
#3366FF
#3366CC
#336699
#336666
#336633
#336600
#3333FF
#3333CC
#333399
#333366
#333333
#333300
#3300FF
#3300CC
#330099
#330066
#330033
#330000
#00FFFF
#00FFCC
#00FF99
#00FF66
#00FF33
#00FF00
#00CCFF
#00CCCC
#00CC99
#00CC66
#00CC33
#00CC00
#0099FF
#0099CC
#009999
#009966
#009933
#009900
#0066FF
#0066CC
#006699
#006666
#006633
#006600
#0033FF
#0033CC
#003399
#003366
#003333
#003300
#0000FF
#0000CC
#000099
#000066
#000033
#000000

Jun 15

The DOM Event Model Advanced

Javascript, Web Development No Comments »

Mouse Events

onMouseDown: A mouse button has been pressed.
onMouseMove: The mouse has been moved.
onMouseOut: The mouse pointer has left an element.
onMouseOver: The mouse pointer has entered an element.
onMouseUp: A mouse button has been released.
onClick: One mousedown and one mouseup detected on this element.
onDbClick: A mouse button has been double-clicked (clicked twice rapidly).

Mouse Event Properties

Property Name

Description

button

A number that specifies which mouse button changed state during a mousedown, mouseup, or click event. A value of 0 indicates the left button, 1 indicates the middle button, and 2 indicates the right button.

altKey, ctrlKey, metaKey, shiftKey

These four boolean fields indicate whether the Alt, Ctrl, Meta, or Shift keys were held down when a mouse event occurred.

clientX/clientY

Specify the X and Y coordinates of the mouse pointer, relative to the upper-left corner of the browser’s viewport and do not take document scrolling into account.

screenX/screenY

Specify the X and Y coordinates of the mouse pointer, relative to the upper-left corner of the user’s monitor. These values are useful if you plan to open a new browser window at or near the location of the mouse event.

relatedTarget

This property refers to a node that is related to the target node of the event. For mouseover events, it is the node that the mouse left when it moved over the target. For mouseout events, it is the node that the mouse entered when leaving the target.

W3C Standard

Internet Explorer

Description

button

Still an integer value but the button value is interpreted differently in IE. A value of 0 indicates none, 1 indicates the left button, 2 indicates the right button, 3 indicates the left and right buttons, 4 indicates middle button, 5 indicates the left and right buttons, 6 indicates the middle and right buttons, 7 indicates the left, middle, and right buttons.

relatedTarget

fromElement
toElement

fromElement specifes the document element that the mouse came from for mouseover events. toElement specifies the document element that the mouse has moved to for mouseout events.

clientX/clientY

          			function onMouseDownHandler(event) {
          				var e = event || window.event; // IE stores events in window object.
          				var mouseObj = {left: e.clientX, top: e.clientY}; // Store the position of the mouse object.
          			}
          			element.onmousedown = onMouseUpHandler;

currentTarget and relatedTarget/fromElement and toElement

          			var GENERIC = {
          				findCurrentTarget: function(event, node) {
          					var currentTarget;
          					if (window.event) // For IE
          						currentTarget = node;
          					else if (event && event.currentTarget) // For Firefox, Opera
          						currentTarget = event.currentTarget;
          					return currentTarget;
          				},
          				findRelatedTarget: function(event) {
          					var relatedTarget;
          					if (window.event) { // For IE
          						if (window.event.fromElement)
          							relatedTarget = window.event.fromElement;
          						else if (window.event.toElement)
          							relatedTarget = window.event.toElement;
          					} else if (event && event.relatedTarget) { // For Firefox, Opera
          						relatedTarget = event.relatedTarget;
          					}
          					return relatedTarget;
          				}
          			};

ViewDemo

Convert Mouse Coordinates

          			var CSS = {
          				// Return the position of the element relative to the top-left corner of the document.
          				offset: function(element) {
          					if (!element) return;
							if (typeof element == "string") element = document.getElementById(element);
          					var left = 0, top = 0;
          					for (var elem = element; elem; elem = elem.offsetParent) {
          						left += elem.offsetLeft;
          						top += elem.offsetTop;
          					}
          					for (elem = element.parentNode; elem && elem != document.body; elem = elem.parentNode) {
          						if (elem.scrollLeft) left -= elem.scrollLeft;
          						if (elem.scrollTop) top -= elem.scrollTop;
          					}
          					return {left: left, top: top};
          				}
          			};

Drag and Drop

drag() takes two arguments. The first is the element that is to be dragged. This may be the element on which the mousedown event occurred or a containing element (e.g., you might allow the user to drag on the titlebar of a window to move the entire window).
In either cases, it muse refer to a document element that is absolutely positioned using the CSS position attribute. The second argument is the event object associated with the triggering mousedown event.

drag() records the position of the mousedown event and then registers event handlers for the mousemove and mouseup events that follow the mousedown event. The handler for the mousemove event is responsible for moving the document element, and the handler for the mouseup event is responsible for deregistering itself and the mousemove handler.
It is important to note that the mousemove and mouseup handlers are registered as capturing event handlers because the user may move the mouse faster than the document element can follow it, and some of these events occur outside the original target element. Without capturing, the events may not be dispatched to the correct handlers.
Also, note that the moveHandler() and upHandler() functions that are registered to handle these events are defined as functions nested within drag(). Because they are defined in this nested scope they can use the arugments and local variables of drag(), which considerably simplifies their implementation.

ViewDemo

Key Events

onKeyDown: A keyboard key is pressed.
onKeyPress: A keyboard key is pressed or held down.
onKeyUp: A keyboard key is released.

charCode and keyCode

charCode is the integer property specifies for keydown and keyup events and Unicode character code for keypress events. Use String.fromCharCode() to convert character codes to strings.

ViewDemo

Jun 04

Javascript Error Handling

Javascript, Web Development No Comments »

Types of Errors

Syntax Errors

Syntax errors are errors in grammar and punctuation such as mismatched quotes or missed commas. These errors are caught quickly if you have the browser’s built-in error detector in display mode or run the script through jsLint.

Runtime Errors

Runtime errors only show up as the script is executed. Common examples are calling a function that hasn’t been declared (typing error or case-sensitivity issue) or division by zero. Although JavaScript is typeless, many built in objects expect and/or return specific types (eg. style.left needs string type).

Logic Errors

Logic errors are basic errors in the programmer’s algorithms or procedural errors. Diagnosis only comes when incorrect results occur and solution requires mapping out the flow for test cases. The wrong scoping of a variable is an example of this kind of error.

Incorrect Operator Precedence Errors

Incorrect operator precedence errors are basic mathematical grouping errors. The best way to avoid them is with brackets to force the order that you want operations to occur explicitly.

Browser Implementation Errors

Browser implementation errors are quirks that occur in one browser but not others. See Browser Issues for more details. Test your code on all anticipated client browsers!

Global Error Handling

The window object has an event called onerror that is invoked whenever there’s an unhandled error on the page.

As you can see, the event will pass 3 arguments to the invoked function. The first one is the actual error message. The second one is the URL of the file containing the error (useful if the error is in an external.js file.) The last argument is the line number in that file where the error happened.

Returning true tells the browser that you have taken care of the problem. If you return false instead, the browser will proceed to treat the error as unhandled, showing the error message and the status bar icon.

          			var onErrorHandler = function(message, fileName, lineNumber) {
          				var element = document.createElement("p");
          				element.innerHTML = "Error: " + message + "<br />File Name: " + decodeURIComponent(fileName) + "<br />Line: " + lineNumber;
          				document.body.appendChild(element);
          				// Returning true tells the browser that you have taken care of the problem.
          				// If you return false instead, the browser will proceed to treat the error as unhandled, showing the error message and the status bar icon.
          				return true;
          			};
          			window.onerror = onErrorHandler;

ViewDemo

Structured Error Handling

If anything goes wrong in the statements that are inside the try block’s statements then the statements in the catch block will be executed and the error will be passed in the error variable. The finally block is optional and, if present, is always executed last, regardless if there was an error caught or not.

The error object has two important properties: name and message. The message property contains the same error message that we have seen before. The name property contains the kind of error that happened and we can use that to decide if we know what to do with that error.

          			function catchError() {
          				var element = document.createElement("p");
          				var html = "";
          				try {
          					var username = window.prompt("Please Enter Your Name: ", "");
          					html = "Your name (" + username + ") has " + username.length + " letters.";
          				} catch(error) {
          					if (error.name == "TypeError")
          						html = error.name + ": " + error.message + "<br />File Name: " + decodeURIComponent(error.fileName) + "<br />Line: " + error.lineNumber;
          					else
          						throw error;
          				} finally {
          					// The finally block is optional and, if present, is always executed last, regardless if there was an error caught or not.
          					element.innerHTML = html;
          					document.body.appendChild(element);
          				}
          			}
          			window.onload = catchError;

ViewDemo

Vivian Crap

Categories

Archives

Meta

Color Picker

The DOM Event Model Advanced

clientX/clientY

currentTarget and relatedTarget/fromElement and toElement

Convert Mouse Coordinates

charCode and keyCode

Javascript Error Handling

Links