JavaScript Notes

JavaScript Features

https://developer.mozilla.org/en/DOM/Element.insertAdjacentHTML

Feature	Chrome	Firefox (Gecko)	IE	Opera	Safari (WebKit)
insertAdjacentHTML	1.0	8.0 (8.0)	4.0	7.0	4.0 (527)

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
insertAdjacentHTML	?	8.0 (8.0)	?	?	?

JavaScript Debugging

A Quick Way To View Generated Source Code Internet Archive – Wayback Machine Link
JavaScript Console
Dung Beetle: Bookmarklet for live DOM+CSS Editing
Dung Beetle: GitHub
Internet Explorer 9’s problematic console object
MSDN Using Console for Logging Alerts and Error Messages).aspx#consolelogging

Fix Missing Console Errors

if(!window.console || typeof console.log === 'undefined'){
	window.console = (function(){
		var me = {};
		me.assert = me.debug = me.error = me.fatal = me.log = me.warn = function(){};
		return me;
	})();
}

Firebug Lite

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
<script type="text/javascript" src="https://getfirebug.com/firebug-lite-beta.js"></script>

logargs

http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
http://pastie.org/1033665

window.logargs = function(context){ // grab the calling functions arguments log(context,arguments.callee.caller.arguments);
}

Differences between escape, encodeURI and encodeURIComponent

JavaScript URL-encoding: escape vs encodeURI

Accessing the System Clipboard

Accessing the System Clipboard with JavaScript – A Holy Grail?
JavaScript Copy to Clipboard

Select Text

bc..
/** * @see http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/ */
function getSelText() { var result = ‘’; if(window.getSelection){ result = window.getSelection(); }else if(document.getSelection){ result = document.getSelection(); }else if(document.selection){ result = document.selection.createRange().text; } return result;
}

Safari Developer Tools

To enable the Develop menu item to access all the WebKit developer tools on Mac open a terminal and type:

defaults write com.apple.Safari IncludeDebugMenu 1

On Windows edit:

%APPDATA%\Apple Computer\Safari\Preferences.plist

and in the node add:

<key>IncludeDebugMenu</key>
<true />

APPDATA usually equals C:\Documents and Settings\YOUR_LOGIN_NAME\Application Data

Google Analytics Click Tracking

<head>
	...
	<script language="javascript" type="text/javascript">
		function onReady(e)
		{
			var profiles = {"terms":{height:920, width:750, center:1, createnew:0, onUnload:onPopupUnload}, "privacy":{height:880, width:750, center:1, createnew:0, onUnload:onPopupUnload}};
			$(".popupwindow").popupwindow(profiles);
			$.log("[document] onReady");
		}

		$(document).ready(onReady);

		// Google Analytics //
		function onPopupUnload(e)
		{
			var clickedLink = 'Terms of Use or Privacy Policy';
			if(e.originalEvent && e.originalEvent.explicitOriginalTarget)
			{
				var tmp = e.originalEvent.explicitOriginalTarget;
				if(String(tmp.wholeText).length > 2)
					clickedLink = tmp.wholeText;
				else if(String(tmp.textContent).length > 2)
					clickedLink = tmp.textContent;
				else if(String(tmp.data).length > 2)
					clickedLink = tmp.data;
				else if(String(tmp.nodeValue).length > 2)
					clickedLink = tmp.nodeValue;
			}

			$.log("[onPopupUnload] e.type: " + e.type + " :: clickedLink: " + clickedLink);

			_gaq.push(['_trackEvent', 'Outbound Links', clickedLink]);
		}

		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
		_gaq.push(['_trackPageview']);

		(function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();
	</script>
</head>
<body>
	...
	<a href="http://xstreamhd.com/" onclick="_gaq.push(['_trackEvent', 'Outbound Links', 'Corporate']);" target="_blank">Corporate</a> |
	<a href="http://xstreamhd.com/myaccount/html/TermsOfUse.html" class="popupwindow" rel="terms" target="_blank">Terms of Use</a> |
	<a href="http://xstreamhd.com/myaccount/html/PrivacyPolicy.html" class="popupwindow" rel="privacy" target="_blank">Privacy Policy</a>
</body>

Object Detection

document.all – IE and Opera

Determining the browsers document mode

var engine = null;
if(window.navigator.appName == "Microsoft Internet Explorer"){
	// This is an IE browser. What mode is the engine in?
	if(document.documentMode){ // IE8+
		engine = document.documentMode;
	}else{ // IE 5-7
		engine = 5; // Assume quirks mode unless proven otherwise
		if(document.compatMode){
			if(document.compatMode == "CSS1Compat") // Else "BackCompat" quirks mode
				engine = 7; // standards mode
		}
	}
	// the engine variable now contains the document compatibility mode.
}

Events

Javascript Madness: Mouse Events
Track Mouse Position Outside of Flash Control

onreadystatechange & document.readyState

function readyStateHandler(){
	alert('[index.php][onreadystatechange] document.readyState: ' + document.readyState);
}
document.onreadystatechange = readyStateHandler;

if(navigator.appName == 'Microsoft Internet Explorer' && navigator.userAgent.indexOf('MSIE') != -1)
	window.attachEvent("onload", statusreport);
else if($.browser.mozilla)
	document.addEventListener("DOMContentLoaded", onReady, false);
else
	window.addEventListener("load", onReady, false);

$(document).ready(alert('[index.php][$(document).ready] document.readyState: ' + document.readyState));
$(window).load(alert('[index.php][$(window).load] document.readyState: ' + document.readyState));