Austin Matzko's Blog » JavaScript http://austinmatzko.com A blog about philosophy, Christianity, web development and whatever else I feel like writing about. Wed, 16 Mar 2011 17:14:59 +0000 en hourly 1 http://wordpress.org/?v=3.2-RC4-18391 I Am an Official Regex Day Winner http://austinmatzko.com/2008/06/06/happy-regex-day-to-me/ http://austinmatzko.com/2008/06/06/happy-regex-day-to-me/#comments Sat, 07 Jun 2008 03:38:34 +0000 filosofo http://www.ilfilosofo.com/?p=478 Ben Nadel declared June 1, 2008 the first National Regular Expression Day, and to celebrate he hosted a giveaway of regex-related prizes, including Jeffrey Friedl’s Mastering Regular Expressions. As you can see, I won the book and got it in the mail yesterday. I use regular expressions all the time—in PHP, JavaScript, Perl, sed, grep, and vi—and they’re so essential to my work that I can’t wait to “master” them.

I think I may have sunk to new lows of geekiness.

]]> http://austinmatzko.com/2008/06/06/happy-regex-day-to-me/feed/ 1 A Good Enough addEvent http://austinmatzko.com/2008/04/14/addevent-preserving-this/ http://austinmatzko.com/2008/04/14/addevent-preserving-this/#comments Tue, 15 Apr 2008 03:48:00 +0000 filosofo http://www.ilfilosofo.com/?p=441 Several years ago, PPK of Quirksmode sponsored a contest to come up with a new version of the trusty JavaScript addEvent function. The original addEvent was created by Scott Andrew LePera in 2001 as a way to merge Internet Explorer’s attachEvent with the W3C’s addEventListener. Both addEventListener and attachEvent allow you to attach a JavaScript event to a DOM object, but they differ in important ways. In particular, IE’s attachEvent doesn’t maintain the scope of the this keyword: this refers to the window object instead of the object on which you’re attaching the event, as in the case of addEventListener.

PPK’s contest itself ended up falling flat, as even the winner, John Resig (who later created the jQuery library), later repudiated it himself. That’s probably because PPK’s contest requirements were like asking for all three of good, fast, and cheap.

So seven years later, there’s no widely-adopted replacement to the original addEvent that:

  1. Is short
  2. Maintains the this scope in IE
  3. Has a corresponding removeEvent

The various libraries do a good job of 2 and 3, but not 1, and since I often find myself needing 1 and 2 but not 3, I came up with my own good-enough version of addEvent:

var addEvent = function( obj, type, fn ) {
        if (obj.addEventListener)
                obj.addEventListener(type, fn, false);
        else if (obj.attachEvent)
                obj.attachEvent('on' + type, function() { return fn.apply(obj, new Array(window.event));});
}
 

It’s short, which is just what I need when I’m trying to keep the JavaScript size low. (Whenever size isn’t so much of an issue, such as on the administrative side of a website, I’m more likely to use a library which will have a much more robust way of assigning events to objects.) And my addEvent also makes this refer to object in question, even for IE.

]]> http://austinmatzko.com/2008/04/14/addevent-preserving-this/feed/ 16 JavaScript Email Hiding http://austinmatzko.com/2005/06/28/javascript-email-hiding/ http://austinmatzko.com/2005/06/28/javascript-email-hiding/#comments Tue, 28 Jun 2005 18:08:55 +0000 filosofo http://www.ilfilosofo.com/blog/2005/06/28/javascript-email-hiding/ been using the following JavaScript in the middle of a page:


<script type="text/javascript"> <!-- This script hides the email address from spiders -->
                <!-- Begin hide from old browsers
                username = "webmaster";
                site = "ibcboston.org";
                document.write(&#39;<a href="mailto:&#39; + username + &#39;@&#39; + site + &#39;">&#39;);
                document.write(username + &#39;@&#39; + site + &#39;</a>&#39;);
                // End -->
</script><noscript><div>webmaster _at_ ilfilosofo _dot_ org</div></noscript>

 
JavaScript-enabled browsers re-assemble the email address for their users, and humans without JavaScript can figure out the address shown between the <noscript> tags. This approach is clunky: you have to repeat little JavaScripts everywhere you have an email address, XHTML validators aren’t happy to see it, and it doesn’t abstract structure and behavior. So I wrote a short JavaScript function that looks for <span>s of class “hiddenemail.” For each span that it finds with class “hiddenemail,” it puts together into a mailto: link the <span>s within it that have classes of “name,” “domain,” and “tld” (tld = “top level domain”). Everything else, such as the “_at_” or “_dot_” it just ignores: you can put anything there to confuse spiders (but inform those without JavaScript enabled). Mark up your email address like so: 
<span class="hiddenemail">
<span class="name">webmaster</span> _at_ 
<span class="domain">ilfilosofo</span> _dot_ <span class="tld">com</span>
</span>
And run the function below when the page loads (e.g. window.onload = revealEmails();)


//************************************************************************
function revealEmails() { //changes hidden email names within span tags to clickable addresses
//looks for span class of &#39;hiddenemail&#39;
//    inside that class it looks for span classes of &#39;name&#39;,&#39;domain&#39;, and &#39;tld&#39;
// from http://www.ilfilosofo.com/blog/2005/06/28/javascript-email-hiding/
//************************************************************************
    var x = document.getElementsByTagName(&#39;span&#39;);
    for (var i=0;i<x.length;i++) {
        var address;
        if (x[i].className == &#39;hiddenemail&#39;) {
            var y = x[i].getElementsByTagName(&#39;span&#39;);
                for (var j=0;j<y.length;j++) {
                    if (y[j].className == &#39;name&#39;) {
                        if (y[j].innerHTML !== null)
                        address = y[j].innerHTML + &#39;@&#39;;
                    }
                    if (y[j].className == &#39;domain&#39;) {
                        if (y[j].innerHTML !== null)
                        address = address + y[j].innerHTML + &#39;.&#39;;
                    }
                    if (y[j].className == &#39;tld&#39;) {
                        if (y[j].innerHTML !== null)
                        address = address + y[j].innerHTML;
                    }
                  }
                if ((x[i].innerHTML !== null) && (address !== null))
                x[i].innerHTML = &#39;<a href=&#39;mailto:&#39; + address + &#39;&#39;>&#39; + address + &#39;</a>&#39;;
        }
    }
}

 
By the way, some such as JavaScript guru Peter-Paul Koch think that classes are for CSS, not JavaScript. What I’m doing violates the separation of style and behavior, he would say. But I don’t see that. If you can use “id” for both CSS and JavaScript, why not “class”? ]]> http://austinmatzko.com/2005/06/28/javascript-email-hiding/feed/ 2