Client-side JavaScript Notes

The bulk of these notes were taken from/while reading through JavaScript: The Definitive Guide (5th edition) by David Flanagan. Copyright 2006 O'Reilly Media, Inc., 978-0-596-10199-2. Some lines are copied verbatim, but generally, they are 'paraphrased' for better 'personal referencability'. Quoted items are generally linked back to this paragraph. Some other notes were taken from other sources available on the Internet. This document is intended primarily for personal reference.

Table of Contents

Basic Browser Environment

Window object represents the browser window (or frame). Document object represents the HTML doc.
Window object is global object for client-side programming.
Each window contains it's own global environment.
Any script section can interact (i.e. call functions) from any other script section.
web browser generates events to notify programs of user input. Browser attempts to invoke an event handler which program can tie into.
Scripts that do not use document.write are recommended for inclusion in the <head> section of the html doc.
Client-side JavaScript is single-threaded. Be careful not to delay loading or other execution without notifying the user.
Scripts can only read the properties of windows and docs that have the same origin as the doc that contains the script.
- This origin is defined as the protocol, host, and port of the URL from which the doc was loaded. Applies to most object properties in a window.
- You can modify the domain property of the Document object to be a parent domain of the URL you are at. This is so multiple machines from same domain can read from each other if programmed to do that. You cannot go to top-level domain.
Cross-site scripting (XSS) - attacker injects HTML tags or scripts into a target web site. Typically a server-side issue. Need to sanitize input you get from users. Javascript example of this might be:
```
name = name.replace(/</g, "&lt;").replace(/>/g, "&gt;");
```

Window object hierarchy

Current Window	self, window, parent, top (Window objects)
	navigator
	frames[]
	location
	history
	screen
	document	anchors[]
		links[]
		images[]
		applets[]
		forms[]	elements[]	options

Many objects descend from Document object (DOM). Items above are defacto standars and are known as lvl 0 DOM. Most browsers include them.

Getting client-side scripts to run

event handler	onclick	supported by all button-like form elements, and <a> and <area>. if handler returns false, browser does not perform default button/link action
	onmousedown	most document elements
	onmouseup	most document elements
	onmouseover	when mouse pointer moves over element
	onmouseout	when mouse pointer moves out of element
	onchange	<input>, <select>, <textarea> when value changed by user and then changes focus
	onload	when document and external content (i.e. images) are fully loaded if multiple onload handlers are registered, no guarantee abou the order in which they are invoked. Don't use document.write() calls in onload's.
	onunload	triggered when user navigates away from web page use to undo/cleanup effects of your onload handler (e.g. close secondary windows) don't popup windows, don't do anything time-consuming
	<input type=checkbox name=options value=blah onclick="blah = this.checked;"; function testalert() { alert("testing..."); } <a href="" onclick="testalert(); return(false);">test alert</a> test alert //can also assign event handler from external javascript code...
Javascript in URLs	<a href="javascript:alert("Hello World!");">test alert</a> test alert <a href="javascript:window.open('about:blank'); void 0;">open new win</a> open new win // adding urls this way not considered good form (don't modify link characteristics). // you can also type the javascript url into the location field of the browser
bookmarklets	mini-JavaScript programs that can be easily launched from a menu, toolbar, or bookmarks
	//put the following into a link <a href='javascript:var e="",r="";do{e=prompt("Expression: "+e+"\n"+r+"\n",e);try{r="Result: "+eval(e);}catch(ex){r=ex;}}while(e);void 0;'>JS Evaluator</a> //search for bookmarklets on the web

Browser compatability

Many ways. The following seem acceptable...

Conditional Comments in IE vs. other browsers

completely non-standard, but seem to work...

html display

...in html <body> section...
<!--[if IE]>
html displayed in IE (only)
<![endif]-->

<!--[if gte IE 6]>
html displayed in IE6+ (only)
<![endif]-->

<!--[if !IE]> <-->
display in browsers other then IE
<!--> <![endif]-->

display in all browsers

JavaScript

/*@cc_on
  @if (@_jscript)
    // jscript is IE javascript
    // var is always set in IE
  @else*/
    //no longer insid a JavaScript comment
    //but still in the IE conditional comment
    //non-IE browsers will run this code
/*@end
  @*/

Browser Windows

Timers

make smart phone vibrate navigator.vibrate(pattern)	pattern is single number representing the duration of vibration in milliseconds.	setTimeout()	schedules function to function to run after number of milliseconds useful to sched function for delay of 0 milliseconds. Browser invokes function when it has finished running event handlers for any currently pending events, and has finished updating state of doc'.
	function alertinfive() { track5 = setTimeout("alert('5 seconds later')",5000); return(false); }; <form><input type="button" value="run in 5 seconds" onclick='alertinfive();'></form>
clearTimeout()	<form><input type="button" value="cancel alert" onclick='clearTimeout(track5); return(false);'></form>
setInterval()	function is invoked repeatedly at intervals of specified number of milliseconds put in example...
clearInterval()	use the tracking value to clar the setInterval() put in example...

Location and History

location property	holds the URL of the current doc assigning a string value to the window.location property will make browser try to load it as a URL different then document.location or document.URL. This will hold original URL even after a redirect. document.location contains URL as loaded.
	reload()	reloads currently diplayed page from the web server
	replace()	loads and displays URL specified, and replaces current URL in browser's history list
	href
	protocol
	host
	pathname
	search	items following a question mark in the URL (i.e. parameters)
	document.write(location.href.toString() + " - " + location.protocol.toString());

history	back()	go back in history list
	forward()	go forward in history list
	go()	takes integer arg. Goes forward or backward number of steps in history list.
Mozilla browsers support window.back() and window.forward(). Similar functionality, but may perform different action when used with frames.

Window, Screen, and Browser info

Window/Document Geometry

location
non-IE	default IE	IE doc with <!DOCTYPE> declaration	(all vars are read only)
window.	document.body.	document.documentElement.	outerWidth, outerHeight	size of browser win on desktop
			screenX, screenY screenLeft, screenTop (IE)	position of browser win on desktop
			innerWidth, innerHeight clientWidth, clientHeight (IE)	window size minus menu bars, toolbars, scrollbars, etc.
			pageXOffset, pageYOffset scrollleft, scrollTop (IE)	scrollbar positions
			scrollWidth, scrollHeight (IE)	size of doc

function windowpos() {
	var windowX = 0;
	var windowY = 0;
	if (window.screenLeft) { //IE and others
		windowX = window.screenLeft;
		windowY = window.screenTop;
	}
	else if (window.screenX) {
		windowX = window.screenX;
		windowY = window.screenY;
	}
	var string6 = "windowX - " + windowX + ", windowY - " + windowY;
	alert(string6);
}
<form><input type="button" value="Window Location" onclick='windowpos();'></form>

Screen Object

information about size of display, number of colors available.

width, height	specify size in pixels.
availWidth, availHeight	specify display size actually available.
availLeft, availTop (non IE)	first avail position on the screen.

function screendim() {
	var string7 = "width - " + screen.width + ", height - " + screen.height;
	string7 += ", availWidth - " + screen.availWidth;
	string7 += ", availHeight - " + screen.availHeight;
	alert(string7);
}
<form><input type="button" value="Screen Dimensions" onclick='screendim();'></form>

Navigator Object

Contains info about the web browser as a whole.
Often not a good choice for browser sniffing...better to test for (method) capability. Sometimes useable to determine which way to work around bugs.

var string7;
for(var prop in navigator)
	string7 += prop + ": " + navigator[prop] + "
";
document.write(string7);

Window object

.open	pop-up window usually blocked - generally successful only if occurs in response to user action such as clicking on a button or link. return value is window object that can be used to refer to new window. 'opener' property refers to window from which this window was opened. null if user created.
	var w = window.open("urltoopen.html", "nameofwindow", "width=400,height=350,resizable=yes...(features), "true(default)/false - create new entry in (other) target windows browsing history");
.close	close the window window object continues to exist, but do not attempt to use properties (except testing for window.closed == true. Also, user may have closed window, so continue to check.
moveTo(), moveBy(), resizeTo(), resizeBy()	window geometry and placement manipulation. Considered bad form to use them. May be blocked or restricted by browsers.
focus()	requests system give window keyboard focus,and move window to top of stacking order
blur()	relinquishes keyboard focus
scrollBy()	scross doc number of pixels left, right, up or down
scrollTo()	scrolls doc to an absolute position html elements have offsetLeft and offsetTop properties that specify X and Y coordinates. You can use this position with scrollTo(). elements have focus() method that will also scroll the element to make it visible elements have scrollIntoView which will move window so element is visible
.location.hash	window.location.hash = "#blah" //will jump to the related <a name=> tag

dialog boxes

not commonly used now-a-days...

alert()
confirm()	confirm box blocks until user closes
prompt()	prompt box blocks until user closes

status line

The status property is generally blocked (misuse). The defaultStatus property is blocked in some browsers. This one sets the default status line when nothing is being hovered over.

Error Handling

assign a function to the window.onerror property
arguments are error msg, URL of doc, line number.
if return value is true, browser believes that handler has handled error and no further action is necessary (i.e. no browser error msg).

//display no more then 3 error msgs in dialog box
window.onerror = function(msg, url, line) {
	if (onerror.num++ < onerror.max) {
		alert("ERROR: " + msg + "\n" + url + ":" + line);
		return true;
	}
}
onerror.max = 3;
onerror.num = 0;

Frame Relationships

Applys to frames or iframes.
window or self - everything in your own window or frame
frames[x]refers to the different frames. frames.length will tell you how many frames exist.
frames[1].frames[2] would be the 3rd subframe in the 2nd frame.
parent.frames[1] could get you from frame[0] to the elements in frame[1].
top.frames[1]always goes to the the top frame to get to the other frame.
parent.dawindow2 could refer to the other frame if it was named dawindow2 in the frame name.
Default context ends at each frame. Be careful.
parent.frames[0].i = 4 could set the variable i in the 1st frame's context.
parent.frames[0].f() could call f() in the 1st frame's context.

Documents

Never document.write() to your own document from event handlers (i.e. after initial parse)

daname="joe";
document.writeln("hello ");  //puts a newline in, good for <pre>>s
document.write("there " + daname + "<br />");
hi = "hello ";
over = "there ";
document.write(hi, over, daname);

//create/write to another doc in a another window
var ww = window.open();
var dd = ww.document;
dd.open();		//optional
dd.write("hello");	//write into the doc in the other window
dd.close();		//make sure to close the doc or it may not display

Legacy Doc properties

document.

bgColor	background color of doc. <body> bgcolor attr
cookie	http cookies
domain	used to relax the same-origin security policy somewhat
lastModified	contains mod date of doc
location	deprecated. User URL prop.
referrer	URL of doc containing link that brought the browser to curr doc
title	<title> of doc
URL	URL from which doc was loaded. Sames a window.location.href except in server redirect.

Legacy Doc Obj Collections

document.

can add/modify anything that does not require 'reflow' of document
<form>, form elements, <img>, and <applet>, and links can be assigned name attribute and accessed this way. (See form[] example below).
For named attribute of <form>, <img>, and <applet>, you can also access via named property of doc object. (See form[] example below).
NAMED ATTRIBUTES MAY NOT WORK IN IE

anchors[]	<a> tag names. .name prop holds name attributes. //example of getting text from anchors var a = document.anchors[0]; var text = null; if (a.text) text = a.text; // Netscape 4 else if (a.innerText) text = a.innerText; // IE 4+ if ((text == null) \|\| (text == '')) text = a.name; // Default
applets[]	Java applets
forms[]	<form> elements. Each object has property element[] for each element in form. triger on onsubmit event handler when form submitted. If return false, form is not submitted (i.e. after form validation. <form name="f1"><input type="button" name="dabutton" value="f1 test"></form> document.write("1st - " + document.forms[7].elements[0].attributes[1].nodeValue + "<br />"); document.write("2nd - " + document.forms[7].elements[0].value + "<br />"); document.write("3rd - " + document.forms.namedItem("f1").elements[0].value + "<br />"); document.write("4th - " + document.forms["f1"].elements[0].value + "<br />"); document.write("5th - " + document.forms.f1.dabutton.value + "<br />"); document.write("6th - " + document.f1.dabutton.value + "<br />"); <form><input type="button" value="changeit" onclick="document.forms.f1.dabutton.value='changed'; return(false)";></form>
images[]	src (r/w) property of <img> elements. Used for image-rollovers, simple animations...
links[]	href prop of <a> and some <area> tags. href prop in IE replaces both string and href, in firefox it only replaces href. Consider changing string (again) in IE to get it where you want it to be. Properties include protocol, hostname, pathname. triggers on onmouseover, onmouseout, onclick (if event handler returns false, browser will not follow link). <a name="yahoolink" id="yahoolink" href="http://www.yahoo.com">www.yahoo.com</a> if (document.links.yahoolink) { document.write(document.links.yahoolink.innerHTML + " - "); document.write(document.links.yahoolink.href + " links version<br />"); } else { //IE6 can't do named links dayahoolink = document.getElementById("yahoolink"); document.write(dayahoolink.innerHTML + " - "); document.write(dayahoolink.href + " non-links version<br />"); } <input type="button" value="change url" onclick="document.links.yahoolink.href='http://google.com'; return(false);"> <input type="button" value="change string" onclick="document.links.yahoolink.innerHTML='google.com'; return(false);"> <input type="button" value="IE change url" onclick="document.getElementById('yahoolink').href='http://google.com'; return(false);"> <input type="button" value="IE change string" onclick="document.getElementById('yahoolink').innerHTML='google.com'; return(false);"> www.yahoo.com

Setting event handlers via object interface

Remember that event handlers can be set as object interfaces...

document.myform.onsubmit = validateform;
// no parens needed after function name (don't want to execute here, just want to assign

Additional DOM information

More info here

CSS and DHTML

Typical attributes used...

position	static \| relative \| absolute \| fixed
top, left
bottom, right
width, height
z-index
display	inline \| block \| inline-block \| ...
visibility	visible \| hidden \| collapse
clip
overflow	visible \| hidden \| scroll \| auto
margin, border, padding
background
opacity	How opaque or translucent. CSS3. Alternative exists for IE

Positioning

Look up in css notes for more specifics

static	normal flow
absolute	positioned independent of other elements. Not part of flow. IE4 only supports absolute positioning of certain elements.
fixed	positioned with respect to browser window. Not part of flow
relative	position adjusted relative to position in normal flow. normal flow space maintained

To support IE4, wrap absolutely positioned elements in <div> or <span> tags.

<div style="position: relative; left: 0px; top: 0px; border: 1px solid black; height: 100px; width: 100px;">
    <div style="position: absolute; left: 20px; top: 30px; height: 40px; width: 40px; background-color: blue;">
    </div>
</div>

Querying position and size

element.offsetLeft	X (left) coord relative to (usually)offsetParrent
element.offsetTop	X (top) coord relative to (usually)offsetParrent
element.offsetWidth	(width)
element.offsetHeight	(height)

//this example taken directly from JavaScript: The Definitive Guide 
//(5th edition) by David Flanagan.
//different browsers handle offsetParent differently, but the following
//should generally work to determine absolute position of element.
//doesn't handle overflow attr - check the book for more
//get x coord of element e
function getX(e) {
    var x = 0;
    while(e) {
        x += e.offsetLeft;
        e = e.offsetParent; //move up to parent
    }
    return x;
}

Translucency/Transparency

/* css */
opacity: .75;               /* standard CSS3 style for transparency */
-moz-opacity: .75;          /* transparency for older Mozillas */
filter: alpha(opacity=75);  /* transparency for IE; no decimal point */

<div style="position: relative; left: 0px; top: 0px; border: 1px solid black; 
height: 200px; width: 200px;">
    <div style="position: absolute; left: 20px; top: 30px; height: 80px; 
        width: 80px; background-color: red;"></div>
    <div style="position: absolute; left: 50px; top: 50px; height: 80px; 
        width: 80px; background-color: yellow; opacity: .75; -moz-opacity: .75; 
        filter: alpha(opacity=75);"></div>
</div>

Clipping and Overflow

See CSS notes for more
This is what gets clipped.

style="clip: rect(T R B L)";
style="clip: rect(0px 100px 100px 0px)";
    OR
style="clip: rect(auto 100px auto auto)";
/*auto matches clipping region to edge of element's box*/

This is how what gets clipped is handled.

visible	overflow may be drawn ouside elemnt's box
hidden	overflow is clipped and hidden
scroll	permanent horizontal and vertical scrollbars. doesn't usually display on printout
auto	scrollbars if necessary

Scripting Styles

Scripting Inline Styles

Find the element by ID, tag name, or recursive traversal
Use element's style property and the particular style property. If particular style property has a dash (-), remove it and make beginning of next word capitalized.

function changefont222() {
    var datext222 = document.getElementById("datext222");
    datext222.style.color = "red";
    datext222.style.fontWeight = "bold";
    datext222.style.border = "2px dashed green";
    datext222.style.position = "absolute";
    datext222.style.top = "30px";
    datext222.style.left = "20px";
}

<div style="position: relative; left: 0px; top: 0px; height: 80px; 
    width: 500px; border: 1px solid gray">
<div id=datext222 style="width: 300px; border: 2px solid black;">dis is datext222</div> 
</div>
<form><input type=button value="change datext222" onclick="changefont222(); return(false);"></form>

dis is datext222

You can use the element's style property and the particular style property to query attribute values set set explicitly in the style attribute of the element, or set with previous JavaScript.
If properties can have grouped properties (i.e. margin: 0px 5px 20px 0px; then they can be set as one string.

<div id=containerbox333 style="position: relative; left: 0px; top: 0px; 
        border: 1px solid black; height: 200px; width: 200px;">
    <div id=redbox333 style="position: absolute; left: 20px; top: 30px; height: 80px; 
            width: 80px; background-color: red;"></div>
    <div id=yellowbox333 style="position: absolute; left: 50px; top: 50px; height: 80px; 
            width: 80px; background-color: yellow; opacity: .75; 
                    -moz-opacity: .75; filter: alpha(opacity=75);"></div>
</div>

var dadir333X = 1;
var dadir333Y = 2;
var dayellowdir333X = -2;
var dayellowdir333Y = -1;
var tracking333;
var containerbox333 = document.getElementById("containerbox333");
var redbox333 = document.getElementById("redbox333");
var yellowbox333 = document.getElementById("yellowbox333");
var damaxX = parseInt(containerbox333.style.width) - parseInt(redbox333.style.width);
var damaxY = parseInt(containerbox333.style.height) - parseInt(redbox333.style.height);
var damaxYellowX = parseInt(containerbox333.style.width) - parseInt(yellowbox333.style.width);
var damaxYellowY = parseInt(containerbox333.style.height) - parseInt(yellowbox333.style.height);
function moveboxes333() {
    var redboxcurX = parseInt(redbox333.style.left);
    var redboxcurY = parseInt(redbox333.style.top);
    var yellowboxcurX = parseInt(yellowbox333.style.left);
    var yellowboxcurY = parseInt(yellowbox333.style.top);
    if ((redboxcurX >= damaxX) || (redboxcurX <= 0)) {
        dadir333X = -1 * dadir333X;
    }
    if ((redboxcurY >= damaxY) || (redboxcurY <= 0)) {
        dadir333Y = -1 * dadir333Y;
    }
    if ((yellowboxcurX >=damaxYellowX) || (yellowboxcurX <= 0)) {
        dayellowdir333X = -1 * dayellowdir333X;
    }
    if ((yellowboxcurY >=damaxYellowY) || (yellowboxcurY <= 0)) {
        dayellowdir333Y = -1 * dayellowdir333Y;
    }
    var danewX = redboxcurX + dadir333X;
    var danewY = redboxcurY + dadir333Y;
    var danewYellowX = yellowboxcurX + dayellowdir333X;
    var danewYellowY = yellowboxcurY + dayellowdir333Y;
    var daXtext = danewX + "px";
    var daYtext = danewY + "px";
    var dayellowXtext = danewYellowX + "px";
    var dayellowYtext = danewYellowY + "px";
    redbox333.style.left = daXtext;
    redbox333.style.top = daYtext;
    yellowbox333.style.left = dayellowXtext;
    yellowbox333.style.top = dayellowYtext;
}
function startmove333() {
    tracking333 = setInterval("moveboxes333()",25);
}
function stopmove333() {
    clearInterval(tracking333);
}

<form><input type=button value="start movement" onclick="startmove333(); return(false);">
<input type=button value="stop movement" onclick="stopmove333(); return(false);"></form>

Getting Computed Styles

This means getting the most relevant style for an element no matter where it is defined from (css stylesheet, cascaded style, inline, etc....)
getComputedStyle(element, pseudoelement) is the W3C standard. pseudoelement are things like :before or :after. Most of the time it is just null.
element.currentStyle is IE alternative.

can sometimes be hard to make useful (i.e. a font query could return arial,helvetica,sans-serif).

function getdastyle() {
    var computingstyleid = document.getElementById("computingstyle");
    var typeface = "";
    if (computingstyleid.currentStyle)  // IE
        typeface = computingstyleid.currentStyle.fontFamily;
    else if (window.getComputedStyle)   // other browsers
        typeface = window.getComputedStyle(computingstyleid, null).fontFamily;
    alert(typeface);
}

<span id=computingstyle style="border: 1px solid black;">
Test msg</span><br /><br />

<form>
<input type=button value="what's the font" onclick="getdastyle(); return(false);">
</form>

Test msg

Reading or Setting the Class for an Element

element.className

var classes = element.className;  //can return multiple classes

//assume that class is not already in the classname list
element.className += " ";
element.className += "aclassname";
    OR
element.className = "aclassname"; //replace the class name altogether

Enabling/Disabling Stylesheets

doesn't appear to work in IE6

testcss1.css

body {color: black;}

testcss2.css

body {color: red;}


function enableSS(sheet) {
    if (sheet == "testcss1") {
        document.getElementById('testcss1').disabled = false;
        document.getElementById('testcss2').disabled = true;
    } else {
        document.getElementById('testcss1').disabled = true;
        document.getElementById('testcss2').disabled = false;
    }    
}

<form>
<input type=radio name=choosedastylesheet value=csstest1 checked='checked'
    onclick="enableSS('testcss1')">csstest1
<input type=radio name=choosedastylesheet value=csstest2 
    onclick="enableSS('testcss2')">csstest2
</form>

Working with Stylesheet attributes

document.styleSheets[]	contains stylesheets
document.styleSheets[].cssRules[] //W3C document.styleSheets[].rules[] //IE	rules of stylesheets W3C says all rules including things like @import and @page IE only shows actual style rules
rule.selectorText	CSS selector for the rule not defined (in W3C DOM) if not a style rule.
rule.style	CSS2Properties object that describes styles associated with selector not defined (in W3C DOM) if not a style rule.
document.styleSheets[].insertRule() //W3C document.styleSheets[].addRule() //IE	adding style rule document.styleSheets[0].insertRule("H2 { text-weight: bold; }", 0); document.styleSheets[0].addRule("H2", "text-weight: bold;", 0);
document.styleSheets[].deleteTRule() //W3C document.styleSheets[].removeRule() //IE	deleting style rule document.styleSheets.deleteRule(rulenumfromarray); document.styleSheets.removeRule(rulenumfromarray);

//taken from JavaScript: The Definitive Guide (5th edition) by David Flanagan.
//Copyright 2006 O'Reilly Media, Inc., 978-0-596-10199-2
var ss = document.styleSheets[0];
//W3C or IE
var rules = ss.cssRules?ss.cssRules:ss.rules;
for (var i = 0; i < rules.length; i++) {
    var rule = rules[i];
    //no @import and other nonstyle rules
    if (!rule.selectorText) continue;
    var ruleText = rule.selectorText + " { " + rule.style.cssText + " }";
    
    document.write(ruleText + "<br />");
}

Events

There are 3 event models of relevance.

original - HTML 4, DOM Lvl 0 API, supported by all JavaScript-enabled browsers
standard- DOM Lvl 2. Not supported by IE6.
IE - Supported by IE5+.

Original event handlers (i.e. Dom Lvl 0)

Handler	Triggered when	Supported by
onabort	Image loading interrupted.	<img>
onblur	Element loses input focus.	<button>, <input>, <label>, <select>, <textarea>, <body>
onchange	Selection loses focus, and value has changed since it gained focus.	<input>, <select>, <textarea>
onclick	mouse press and release; follows mouseup. Return false to cancel default action.	most elements
ondblclick	double-click	most elements
onerror	error loading image	<img>
onfocus	element gains input focus	<button>, <input>, <label>, <select>, <textarea>, <body>
onkeydown	key pressed down. Return false to cancel.	Form elements and <body>
onkeypress	key pressed; follows keydown. Return false to cancel.	Form elements and <body>
onkeyup	key released; follows keypress	Form elements and <body>
onload	doc load complete	<body>, <frameset>, <img>
onmousedown	mouse button pressed	most elements
onmousemove	mouse moved	most elements
onmouseout	mouse moves off element	most elements
onmouseover	mouse moves over element	most elements
onmouseup	mouse button released	most elements
onreset	form reset requested. Return false to prevent.	<form>
onresize	window size changes	<body>, <frameset>
onselect	text selected	<input>, <textarea>
onsubmit	form submission requested. Return false to prevent.	<form>
onunload	doc or frameset unloaded.	<body>, <frameset>
online, offline	browser is online or offline	<navigator>
hashchange	when content changes	most elements
transitionend	When a CSS transition ends	most elements
scroll	when a window starts to scroll	window, textbox, anything w a scrollbar

Event handlers as attributes

Event handlers as properties

careful - if user interacts with doc element before doc is fully loaded, event handlers for doc element may not yet be defined. Consider loading on/after onload.

<form name="daform500">
<input name="dabutton500" type="button" value="Press Me">
</form>

document.daform500.dabutton500.onclick=function() { alert('pressed'); };
function daform500rollover() {
    document.daform500.dabutton500.value += " please";
}
//notice no ()
document.daform500.dabutton500.onmouseover = daform500rollover;

you may want to append previous handler/function to the one you add. Following example builds on previous one.

var dabutton501 = document.daform500.dabutton500;
var da500handler = dabutton501.onclick;
function da501handler() {
    alert("first alert");
}
dabutton501.onclick = function() { da501handler(); da500handler(); }

scope is defined incontext of the element that invokes it. this keyword refers to target element.
scope in form and form element includes form and element (i.e. this.form.button.value).
keep handler assignment simpler (i.e. call a function) so you don't get scope confusion.

DOM Lvl2 Event Handling

Doesn't work in IE (at least not IE6-).

Events can occur:

at capturing phase - events propagate from Doc object down - anything above target can register,
at actual event in target - similar to Dom lvl 0, and
at bubbling phase, when event bubbles back up doc hierarchy. In general, raw events bubble while higher-level ones do not.

Events are executed in the scope in which they are defined.
The this keyword usually refers to the event on which the handler was registered.
you usually can register an object as long as it has a method named handleEvent.
you can mix with DOM lvl0.
event handler can use identifer event to refer to event object (and associated properties and methods (see below)). This happens even when registered as DOM lvl 0 event.

eventobject.stopPropagation()	during event propagation, event handler calls this method to stop propagation of event.
eventobject.preventDefault()	prevents default action (like the click event of an <a> tag.
element.addEventListener	add the handler to the object. Can add multiple, but no guarantee on order. object.addEventListener("eventtype",function,true-capturingphase or false-event or bubbling phase) document.myform.addEventListener("submit",doSomething, false); <div id=dadiv800 style="border: 1px solid gray; width: 200px;">click on me if not IE</div> function doSomething() { alert("hello"); } dadobject = document.getElementById('dadiv800'); if (dadobject.addEventListener) { dadobject.addEventListener("mousedown",doSomething,false); } click on me if not IE
element.removeEventListener()	removes event handler registration

Event modules and types

You can check to see if browser support module with particular DOM Lvl 2 event with code like:

document.implementation.hasFeature("MouseEvent", "2.0");

Event type	Interface	Bubbles	can be cancelled	Supported by/detail properties
abort	Event	yes	no	<img> <object>
blur	Event	no	no	<a> <area> <button> <input> <label> <select> <textarea>
change	Event	yes	no	<input> <select> <textarea>
click	MouseEvent	yes	yes	screenX screenY clientX clientY altKey ctrlKey shiftKey metaKey button detail
error	Event	yes	no	<body> <frameset> <img> <object>
focus	Event	no	no	<a> <area> <button> <input> <label> <select>
load	Event	no	no	<body> <frameset> <iframe> <img> <object>
mousedown	MouseEvent	yes	yes	screenX screenY clientX clientY altKey ctrlKey shiftKey metaKey button detail
mousemove	MouseEvent	yes	no	screenX screenY clientX clientY altKey ctrlKey shiftKey metaKey
mouseout	MouseEvent	yes	yes	screenX screenY clientX clientY altKey ctrlKey shiftKey metaKey relatedTarget
mouseover	MouseEvent	yes	yes	screenX screenY clientX clientY altKey ctrlKey shiftKey metaKey relatedTarget
mouseup	MouseEvent	yes	yes	screenX screenY clientX clientY altKey ctrlKey shiftKey metaKey button detail
reset	Event	yes	no	<form>
resize	Event	yes	no	<body> <frameset> <iframe>
scroll	Event	yes	no	<body>
select	Event	yes	no	<input> <textarea>
submit	Event	yes	yes	<form>
unload	Event	no	no	<body> <frameset>
DOMActivate	UIEvent	yes	yes	detail
DOMFocusIn	UIEvent	yes	no	none
DOMFocusOut	UIEvent	yes	no	none

Event Interface properties & methods

type - type of event
target - node on which event occurred
currentTarget - node on which event is being processed
eventPhase - Event.CAPTURINGPHASE, Event.AT_TARGET, Event.BUBBLING_PHASE
timeStamp - date object when event occured
bubbles - boolean
cancelable - specifies whether event has a default action that can be canceled
stopPropagation() - ...
preventDefault() - stops default action from occuring

UIEvent Interface properties

view - window object within which event occured
detail - number that may provide additional info (i.e. number of clicks). For DOMActivate events, 1 - normal activation, 2 - hyperactivation (such as double-click or shift-enter)

MouseEvent properties

button - mouse button number (left to right - 0, 1, 2)
altKey, crtlKey, metaKey, shiftKey - boolean fields that indicate whether particular keys wer pressed with mouse event
clientX, clientY - coordinates of mouse pointer relative to client area or browser window. Note you have to use (non-IE) window.pageXOffset and window.pageYOffset or (IE) scrollleft and scrollTop - to deal with the amount that the window has scrolled
screenX, screenY - coordinates of mouse pointer relative to upper-left corner of user's monitor
relatedTarget - for mouseover events, it is node mouse left when moving over target. For mouseout events, is is node mouse is moving into.

IE Event Model

window.event is a global variable. Some of the properties are:

type	event handler name (with "on" removed (e.g. "click" or "mouseover"))
srcElement	element on which event occurred
button	mouse button number pressed (1-left, 2-right, 4-middle)
clientX, clientY	mouse coordinates at time of event relative to upper-left corner of containing window.
offsetX, offsetY	position of mouse pointer relative to source element (i.e. where in the img there was a click)
altKey, ctrlKey, shiftKey	booleans that specify whether Alt, Ctrl, or Shirt keys were held down when event occurred.
keyCode	Unicode char code of keypress event (keydown or keyup).Use String.fromCharChode() to convert to string.
fromElement	for mouseover events, this specifies the doc element that the mouse came from
toElement	for mouseout events, this specifies the doc element that the mouse is going to
cancelBubble	boolean. Set to true to prevent current event from bubbling further up
returnValue	boolean. set to false to prevent browser from performing default action associated with event.

windows event in IE never get's passed. To duplicate do something like:

function daEventHandler(event) {
    if (!event) event = window.event;  // get event details for IE
    //rest of function
}
//***OR***
function daEventHandler(e) {
    var event = e || window.event;
    //rest of function
}

IE Event-Handler Registration

IE5 and later...
attachEvent() and detachEvent()...similar to addEventListener() and removeEventListener() except:

no capturing

2 args: event type and handler function. i.e.

document.getElementById("blah801").attachEvent("onmouseover", doSomething);
//doSomething is a function defined elsewhere

IE methods include the "on" prefix (i.e. onclick)
functions registered with attachEvent() are global and this refers to Window object, not event's target element.
event-handler functions can be registered more then once. function will be invoked as many times as it was registered.
to cancel bubbling, set window.event.cancelBubble to true. Will work for current event (only).

Mouse Events in IE

setCapture(), releaseCapture()

methods of all HTML elements.
when setCapture() called on an element, allsubsequent mouse events are directed to that element (and bubble up). This applies to all mouse-related events: mousedown, mouseup, mousemove, mousemove, mouseover, mouseout, click, dblclick.
Mouse captures get interrupted if web browser loses focus, an alert dialog appears, a system menu is displayed, etc.... Element on which setCapture() is was called will receive an onlosecapture event. It is no longer receiving capture mouse events.

Event Handler Memory Leaks

Something like this will cause a memory leak:

function addAHandler(form) {
    form.attachEvent("onsubmit", function() { return validate(); };
}

To get around this either:

never declare inline functions like this, OR
remove event handlers in response to an onunload() event.

Mouse Events

during mouse event clientX and clientY refer to mouse pointer position in window coordinates. Scrolling not considered. Add Geometry.getHorizontalScroll() or Geometry.getVerticalScroll() to get actual values in browser window.

Here's an example from JavaScript: The Definitive Guide (5th edition) by David Flanagan on dragging document elements.

Key Events

keydown, keypress, and keyup correspond to onkeydown, onkeypress, and onkeyup.
keypress generally is easiest to use. For example, shift-2 will show up as @. (Other types may not process char type.
repeating keypresses cannot be counted on (i.e. you may only get one even though the user is holding down the key.
keypress will not happen in IE for non ASCII keystrokes (i.e. F1, Page Down, etc...). Keyup and Keydown should.
Nonprinting function keys hav virtual keycodes, and are available thorugh the event object associated with the keydown event.
Alt, Ctrl, or Shift key presses are indicated by state of the altKey, ctrlKey, and shiftKey properties of the event object.
Firefox

keyCode holds virtual keycode, sent with keydown event.
function keys generate keypress events - charCode is zero, keyCode contains virtual keycode.

for keydown events, keyCode is virtual keycode.
for keypress events, keyCode in char code.

char codes can be converted to chars with function String.fromCharCode().

keyboard input example

//won't work with cut and paste text, grab onchange handler
<form>
<input id="blah6778" type="text" onkeyup="this.value = this.value.toUpperCase();">
</form>

Type something below

Synthetic Events

Fake event sent between handlers - my not be necessary to use in level 0.
Dispatched events are handled synchronously (you have don't (?) have to wait for call to return)
If you want to wait for call to return, call setTimeout() with value of 0 milliseconds

Document.createEvent() - creates event

In IE Document.createEventObject to create event object.

Event.initEvent(), UIEvent.initEvent(), MouseEvent.initMouseEvent() - initializes event
<node>.dispatchEvent - send event to node that it is to be dispatched to.

In IE <targetelement>.fireEvent to send/dispatch event.

var DataEvent = {};

DataEvent.send = function(target, datatype, data) {
    if (typeof target == "string") target = document.getElementById(target);

    if (document.createEvent) {            // DOM event model
        var e = document.createEvent("Events");
        e.initEvent("dataavailable", true, false); 
    }
    else if (document.createEventObject) { // IE event model
        var e = document.createEventObject();
    }
    else return;  // Do nothing in other browsers
    
    e.datatype = datatype;
    e.data = data;

    if (target.dispatchEvent) target.dispatchEvent(e); // DOM 
    else if (target.fireEvent) target.fireEvent("ondataavailable", e); // IE
};

DataEvent.receive = function(target, handler) {
    if (typeof target == "string") target = document.getElementById(target);
    if (target.addEventListener)
        target.addEventListener("dataavailable", handler, false);
    else if (target.attachEvent) 
        target.attachEvent("ondataavailable", handler);
};

Forms

Accessing elements

document.forms[1].elements[2]
	OR
document.<formname>.<elementname>

// Access last form in document
document.forms[document.forms.length-1]

<form name=daform onreset="return confirm('Really reset the data?')">
<input type=text name=daaddress value="1 Main Street">
<button type=button onclick="setformvalue();">set the text field value</button>
<input type=reset>
</form>

<script type="text/javascript" language="JavaScript">
function setformvalue() {
	document.daform.daaddress.value = "set value";
	return false;
};
</script>

submit() and reset()

Submit the form. Reset the form to original settings.

tags, type property, events

<input type="button"> <button type="button">	"button"	onclick
<input type="checkbox">	"checkbox"	onclick
<input type="file">	"file"	onchange
<input type="hidden">	"hidden"
<option>
<input type="password">	"password"	onchange
<input type="radio">	"radio"	onclick
<input type="reset"> <button type="reset">	"reset"	onclick
<select>	"select-one"	onchange
<select multiple>	"select-multiple"	onchange
<input type="submit"> <button type="submit">	"submit"	onclick
<input type="text">	"text"	onchange
<textarea>	"textarea"	onchange

element properties

type - ro
form - ro ref to containing form
name - ro
value - rw

Common event handlers

onclick
onchange
onfocus - gains input focus
onblur - loses input focus

Push Buttons

If onclick event handler returns false, default action of button is not performed.

Toggle Buttons

Can do the following with radio buttons or checkboxes.

<form name=dacheckboxes>
    <input type=checkbox name=dacheckbox value="first" onclick="checkcheckboxes();">first</input><br />
    <input type=checkbox name=dacheckbox value="second" onclick="checkcheckboxes();">second</input><br />
    <input type=checkbox name=dacheckbox value="third" onclick="checkcheckboxes();">third</input><br />
</form>
<form name=checkingvalues>
    <input type=text name=valuelisttext value="">
</form>

<script type="text/javascript" language="JavaScript">
function checkcheckboxes() {
    var valuelisttext = "";
    for (var i = 0; i < document.dacheckboxes.length; i++) {
        if (document.dacheckboxes.dacheckbox[i].checked) {
            valuelisttext = valuelisttext + document.dacheckboxes.dacheckbox[i].value + " ";
        }
    }
    document.checkingvalues.valuelisttext.value = valuelisttext;
	return false;
};
</script>

select and option

<form name=blahblah44>
<select multiple="multiple" name="daoptions44" size="4">
    <option value=one>one</option>
</select>
<input type=text name=datext44 value="">
<button type=button onclick="addvalue44();">add value</button>
<button type=button onclick="deleteselected44();">delete selected values</button>
<button type=button onclick="deletevalues44();">delete all values</button>
<input type=reset></input>
</form>
<script type="text/javascript" language="JavaScript">
function deletevalues44() {
    document.blahblah44.daoptions44.options.length = 0;
    return false;
}
function addvalue44() {
    var dalength = document.blahblah44.daoptions44.options.length;
    var datext = document.blahblah44.datext44.value;
    var newoption = new Option(datext, //text property
                               datext, //value property
                               false,  //defaultSelected property
                               false); //selected property
    document.blahblah44.daoptions44.options[dalength] = newoption;
    return false;
}
function deleteselected44() {
    var dalength = document.blahblah44.daoptions44.options.length - 1;
    for (var i = dalength; i >= 0; i--) {
        if (document.blahblah44.daoptions44.options[i].selected) {
            //note that options array will compress towards 0
            document.blahblah44.daoptions44.options[i] = null; 
        }
    }
}

Assigning event to a tag from javascript

<form name=blah55>
    <button type=button name=clickme55>click me</button>
    <button type=button onclick="enableclickme55();">enable the click me button</button>
</form>

<script type="text/javascript" language="JavaScript">
function enableclickme55() {
    //do this onload to make unobtrusive javascript
    document.blah55.clickme55.onclick = function() { showclicked55(); }
}
function showclicked55() {
    alert("clicked");
}
</script>

Cookies

Attributes

max-age - sets lifetime of cookie in seconds. Used to be expires.
path - path where cookie is valid. Has to be equal to, or a subset of, existing fqdn.
domain - domain where cookie is valid. Has to be equal to, or a subset of, existing fqdn.
secure - boolean attribute that indicates whether it can be transmitted over secure protocol (only) or not.

Setting, deleting, showing

cookies may nt include semi-colons, commas, or whitespace. If you need them, make sure to use encodeURIComponent() to encode the value before storing it. Use decodeURIComponent() to decode it. Older functions escape(), and unescape() have been deprecated.
change the value of a cookie - set its value again (e.g. you could keep resetting the max-age.
to delete a cookie, specify name, path, doman, and setting arbitrary or null value, and set its max-age to 0.

document.cookie = "version=" + encodeURIComponent(document.lastModified);

var nextyear = new Date();
nextyear.setFullYear(nextyear.getFullYear() + 1);
function setdacookie77 () {
    var dastring77 =  "version=1" +
                      "; max-age=" + (60*60*24*364); 
    document.cookie = dastring77;
//  document.cookie = "version=" + document.lastmodified +
//                    "; expires=" + nextyear.toGMTString() +
//                    "; path=/" +
//                    "; domain=jungar.net";
    return false;
}
function cleardacookie77 () {
    var mydate = new Date();
    mydate.setTime(mydate.getTime() - 1);
    document.cookie = "version=2; max-age=-1";
//  document.cookie = "version=2; expires=" + mydate.toGMTString();  
//  document.cookie = "username=; expires=" + mydate.toGMTString(); 
//  var dastring77 =  "version=" +
//                    "; expires=" + mydate.toGMTString();
//                    "; path=/";
//  document.cookie = dastring77;
    return false;
}
function showallcookies77 () {
    var allcookies = document.cookie;
    var checkcookies = decodeURIComponent(allcookies);
    alert ("allcookies - " + checkcookies);
    var dalen = allcookies.length;
    alert("length = " + dalen);
    var pos = allcookies.indexOf("version");
    if (pos != -1) {
        alert("we've got a live one");
        var start = pos + 8;
        var end = allcookies.indexOf(";", start);
        if (end == -1) end = allcookies.length;
        var value = allcookies.substring(start, end);
        value = decodeURIComponent(value);
        alert("value = " + value);
    }
}
function cookieenabled77 () {
//    if (navigator.cookieEnabled != undefined) {
//        alert("navigator.cookieEnabled - " + navigator.cookieEnabled);
//    } else {
        document.cookie = "testcookie=test; max-age=10000";
        var cookies = document.cookie;
        if (cookies.indexOf("testcookie=test") == -1) {
            alert("testcookie not set");
        } else {
            alert("testcookie set");
        }
//    }
}

XMLHttpRequest

Methods

GET - get whole document.
POST -Send variables aspart of request.
HEAD - Return header only (check things like modification date without downloading whole document).

Example

request.open("GET", url, false, username, password);      // store the request
                                                          // 3rd arg - false=synchronous request/response
                                                          // 4th & 5th arg for svr that needs auth
                                                          // 3rd, 4th, and 5th args optional
request.setRequestHeader("User-Agent", "XMLHttpRequest"); // set the headers
request.setRequestHeader("Accept-Language", "en");
request.setRequestHeader("If-Modified-Since", lastRequestTime.toString());
                                                          // Browser will automatically add relevant cookies
                                                          // unless you add manually
request.send(null);                                       // send the request
                                                          // GET requests, use null
                                                          // POST requests, send form data

CHECK ON HEADER OPTIONS IN STANDARDS

Synchronous Response

blocks until response is recieved. No way to stop or interrupt.
need to check status property to see HTTP status code (200 OK, 404 Not found, etc.)
Response is in responseText property.
If response is XML, you can access DOM object in responseXML property. If it's XML (DOM), server must identify as MIME type "text/xml" to be accessible this way. Note you can always get at basic text in responseText

if (request.status == 200 {
    var datext = request.responseText;
    // do something with the text
} else {
    alert("Error " + request.status + "L " + request.statusText);
}

OR

if {request.status == 200) {
    if (request.getResponseHeader("Content-Type") == "text/xml") { 
        var doc = request.responseXML;
        // Do something with the response document
    }
}

Asynchronous Response

Pass true as the 3rd response in the request.open method.
Call/Script returns immediately. Response available later in XMLHttpRequest object via same properties as described in synch usage.
add event handler on onreadystatechange property.
uses same-origin security policy
does not work with file:// protocol. Must upload test scripts to web server.

XMLHttpRequest readyState values

0	open not called yet
1	opened called, but send not called
2	send called, server has not responded
3	data being received (readyState 3) from server firefox sends this multiple times per large doc IE sends once at beginning of doc download
4	response is complete

HTTP Get

See xmlHttpRequest.js.

var request = HTTP;newRequest(); //from utility function
request.onreadystatechange = function() {
    if (request.readyState == 4) {
        if (request.status == 200) {
            var datext = request.responseText;
            //do something with datext or request.responeText
        }
    }
}
request.open("GET",url); //no 3rd argument - async by default
//set headers?
request.send(null); // asynch so no block, return immediately

HTTP POST

Data passed in body of request (not in URL like GET).
send string of vars after passing through encodeURIComponent. See xmlHttpRequest.js.

Timeouts

If you need to create a timeout, use Window.setTimeout() function and Window.clearTimeout.
Use XMLHttpRequest.abort() if you have to cancel a request.

XML, JSON

Can always have responseText populate innerHTML property of some doc element.
alternative to XML/DOM is JSON

<!-- XML -->
<author>
    <name>Joe Smith</name>
    <books>
        <book>Da first title</book>
        <book>Da second title</book>
    </books>
</author>
//JSON
{
    "name": "Joe Smith",
    "books": [
        "Da first title",
        "Da second title"
    ]
}

AJAX Examples

text pull

<form name=timecompare>
Browser time
<input type=text name=localtime value="">
Server time
<input type=text name=servertime value="">
<button type=button onclick="compareTimes();">Show Times</button>
</form>

<script type="text/javascript" language="JavaScript">
function compareTimes() {
    var d = new Date();
    var localdate = d.getDate();
    var localmonth = d.getMonth();
    var localyear = d.getFullYear();
    var localhour = d.getHours();
    var localmin = d.getMinutes();
	var localsec = d.getSeconds();
    
    if (localmin < 10) { 
        localmin = "0" + localmin; 
    }
	if (localsec < 10) {
		localsec = "0" + localsec;
	}
    var localdatetime = localmonth + "/" + localdate + "/" + localyear + " " + 
                        localhour + ":" + localmin + ":" + localsec;
    document.timecompare.localtime.value = localdatetime;
    
    HTTP.getText("/AJAXDomJavaScript/proutdate.php",putsvrtime);
    return false;
}
function putsvrtime(datext) {
	document.timecompare.servertime.value = datext;
}
</script>

<?php
echo date('n/j/Y G:i:s');
?>

xml pull

<form name=xmlview>
<textarea name=textversion rows=8 cols=80></textarea>
<br /><br />
<u>DOM table<u>
<div id=xmlversion class=boxedmono></div>
<br />
<u>Character names and descriptions only</u>
<div id=characters class=boxedmono></div>
<button type=button onclick="grabdaxml();">Grab the XML</button>
</form>

function grabdaxml() {
    HTTP.getXML("/AJAXDomJavaScript/proutxml2.php",putdaxml);
	return false;
}
var totaltable = "";
var totaltable2 = "";
function putdaxml(daxml, datext) {
	document.xmlview.textversion.value = datext;
	//initialize totaltable
	totaltable =   (put in the table header row for
	  nodeType, nodeName, nodeValue, textContent, Data...)
	totaltable2 =	"<table class=mono>" + "<tr>" +
					"<th>name</th>" +
					"<th>desc</th>" +
					"</tr>";
	//grab the dom
	var n = daxml.documentElement;
	var children = n.childNodes;
	var depthstring = "-";
	lookforxmltext(children, depthstring);
	totaltable = totaltable + "</table>"
	//insert table into the xmlversion div
	var xmlversion =  document.getElementById("xmlversion");
	xmlversion.innerHTML = totaltable;
	//grab the characters nodes only
	var characternodes = n.getElementsByTagName("character");
	lookforcharacters(characternodes);
	totaltable2 = totaltable2 + "</table>"
	//insert table into the characters div
	var xmlversion =  document.getElementById("characters");
	xmlversion.innerHTML = totaltable2;
}
function lookforcharacters(characternodelist) {
	for (var i=0; i < characternodelist.length; i++) {
		// going to assume that things are in the right order for now
		// need to check on name because you can get /n and whitespace...
		if (characternodelist[i].nodeName == "name") {
			totaltable2 =	totaltable2 + "<tr>" +
			"<td>" + characternodelist[i].textContent + "</td>";
		}
		if (characternodelist[i].nodeName == "desc") {
			totaltable2 = totaltable2 + 
			"<td>" + characternodelist[i].textContent + "</td>" + "</tr>";
		}
		// in case there's anything deeper
		if (characternodelist[i].childNodes.length > 0) {
			lookforcharacters(characternodelist[i].childNodes);
		}
	}
}
function lookforxmltext(Childlist, depthstring) {
	for (var i=0; i < Childlist.length; i++) {
		totaltable = 	totaltable + "<tr>" +
						"<td>" + depthstring + "</td>" +
						"<td>" + i + "/" + Childlist.length + "</td>" +
						"<td>" + Childlist[i].nodeType + "</td>" +
						"<td>" + Childlist[i].nodeName + "</td>" + 
						"<td>" + Childlist[i].nodeValue + "</td>" +
						"<td>" + Childlist[i].textContent + "</td>" + 
						"<td>" + Childlist[i].Data + "</td>" +
						"</tr>";
		if (Childlist[i].childNodes.length > 0) {
			depthstring2 = depthstring + "-";
			lookforxmltext(Childlist[i].childNodes, depthstring2);
		}
	}
<?php 
header('Content-type: text/xml');
$xmlstr = <<<XML
<?xml version='1.0' standalone='yes'?>
	(xml for book with title characters, and plot)
XML;
$xml = new SimpleXMLElement($xmlstr); 
echo $xml->asXML();
//echo $xml->book[0]->plot; 
?>

Text version

JavaScript one-liners

some of the following commands came from https://pinjarirehan.medium.com/10-javascript-one-liners-for-beginner-developers-to-look-pro-b9548353330a

array filtering

const scores = [85, 92, 73, 98, 80];
const evenScores = scores.filter(num => num % 2 === 0);

// evenScores will be [92, 98, 80]

Array Mapping

The map method creates a new array with the results of calling a provided function on every element in the original array.

const sideLengths = [5, 3, 7];
const areas = sideLengths.map(num => num * num);

// areas will be [25, 9, 49]

Flattening Arrays

The flat method (available in ES6 and later) creates a new array with all sub-array elements concatenated into it.

const nestedGroceries = [
  ["Apples", ["Red", "Green"]],
  ["Milk", ["Whole", "2%"]]
];
const flatGroceries = nestedGroceries.flat(); 

// flatGroceries will be ["Apples", "Red", "Green", "Milk", "Whole", "2%"]

Unique Elements (No Duplicates Allowed)

// Original guest list with a duplicate entry
const guestList = ["Alice", "Bob", "Charlie", "Alice"];

// Remove duplicates by converting the array to a Set and back to an array
const uniqueGuestList = [...new Set(guestList)];

// uniqueGuestList will be ["Alice", "Bob", "Charlie"]
console.log(uniqueGuestList);

Shorthand Conditionals

// Define the age of the user
const age = 18;

// Determine the message based on the user's age
const message = age >= 18 ? "Welcome!" : "Sorry, not yet.";

// Output the message
console.log(message);

String Reversal

const str = "Hello, world!";
const reversedStr = str.split('').reverse().join('');

// reversedStr will be "!dlrow ,olleH"

Object Property Existence

const user = { name: "Alice", age: 30 };

// Check if the user object has an 'email' property
const hasEmail = "email" in user;

// hasEmail will be false because the 'email' property is not present in the user object

Default Parameter Values

const greet = (name = "Guest") => `Hello, ${name}!`;
console.log(greet());

// Output: Hello, Guest!

console.log(greet("Bob"));
// Output: Hello, Bob!

Compact Arrays

const numbers = [1, 0, null, 3]; // Original array
const compactNumbers = numbers.filter(Boolean); // Using filter with Boolean as the callback function

// compactNumbers will be [1, 3] because Boolean(1) is true, Boolean(0) is false, Boolean(null) is false, and Boolean(3) is true

filter method looking for "falsy" values

Dynamic Object Keys

const prop = "score";
const person = { [prop]: 90 };

// person will be {score: 90}

The value of the prop variable is used as the key name within the curly braces when creating the object.

Promises

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function. Imagine a function, createAudioFileAsync(), which asynchronously generates a sound file given a configuration record and two callback functions: one called if the audio file is successfully created, and the other called if an error occurs.

Syntax

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

details including async and promises

frequently-sought-solutions-for-javascript.html

Generators

taken from dev website

Generators are a special type of function that can pause and resume execution. Unlike regular functions, which run to completion when called, generators yield control back to the caller at designated points. This ability to pause and resume makes them particularly useful for tasks that require a sequence of values or need to handle asynchronous operations more elegantly.

function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = myGenerator();

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

The Power of yield

The yield keyword not only pauses the generator but also allows values to be sent back into the generator.

Syntax/basic usage

A generator function is defined using the function* syntax, and it uses the yield keyword to pause execution.

applications

Generators shine in scenarios where you need custom iteration logic. For instance, you can create a generator to iterate over a range of numbers or even complex data structures.

Generators, combined with promises, can simplify asynchronous code. Libraries like co use this pattern to manage async flows more naturally than nested callbacks or promise chains.