VV's Corner » javascript

Triggering the Source Code view of the current page using JavaScript

admin — Fri, 28 Mar 2008 22:40:49 +0000

I was recently writing a demo to showcase the new Google Language API, and in my demo I did the usual thing of instructing users to View > Page Source in order to view the source code and comments. I know this is less than ideal, because it forces users to have to process the instructions, and then execute them. Somewhere in there you lose them and they never execute the desired action.

It got me thinking: is there a way to have the source code in front of them in one click? A few Google searches later, and the answer was yes!

Using JavaScript you can open a new window to display the source code view of the current window:

PLAIN TEXT

JAVASCRIPT:

window.open('view-source:' + window.location.href, 'mysource');

Voila! How easy was that? Now it's your turn.

Recommended Mozilla Firefox add-ons (aka extensions, aka plugins)

vinoaj — Mon, 30 Jul 2007 02:15:19 +0000

This is a list of my "must-have" Mozilla Firefox add-ons. If you can recommend anything similar or better, be sure to drop me a comment.

Page Analysis & SEO
Minimise Nuisance
Bookmark Management
Download Management
Productivity
Web Development & Design
Security
Functional Extensions
Tab Management
Add-Ons Management

Page Analysis & SEO

About This Site Bookmarks - right-click on a page, select "About This Site Bookmarks" and you will see a list of handy links pointing off to informational sites such as Alexa, Compete, Netcraft, del.icio.us, etc.

SearchStatus

ShowIP

Minimising Nuisance

Adblock Plus

Adblock Filterset.G Updater

Bookmark Management

Add Bookmark Here

Bookmark Duplicate Detector

del.icio.us

Download Management

Download Statusbar - manage your downloads via the Firefox status bar.

DownThemAll - conveniently download all link targets on a page.

FlashGot - allows for single and multiple downloads utilising an external download manager of your choice (I prefer FlashGet).

Productivity

Auto Copy - highlight a piece of text and the selection is automatically copied to your clipboard.

FoxClocks - displays local times around the world in the statusbar or toolbar. Great for if you are dealing with friends and colleagues across multiple timezones.

FoxyTunes - operate your currently running media player from your Firefox statusbar.

Google Notebook - conveniently clip text and links to your Google Notebook.

Linkification - Converts text links (including e-mail addresses) into clickable links.

PDF Download

Web Development & Design

ColorZilla - eye-dropper tool that allows you to pick the HEX & RGB values of colours of elements on the page.

Firebug - the quintessential Javascript debugger. It also allows for excellent DOM and CSS debugging and manipulation.

HTML Validator

IE View - open the current page in an IE window.

Live HTTP Headers - view HTTP request and response headers in realtime.

User Agent Switcher - allows you to spoof the User-Agent string and have Firefox masquerade as the Googlebot, etc, to see how your site reacts to different user-agents.

View Source Chart - renders page source HTML in an easy-to-read manner.

Web Developer - a must for the serious web developer.

YSlow - an addon to the Firebug debugger. It allows you to profile a page and identify bottlenecks. Provided by Yahoo. Also see Yahoo's articles on improving page load performance.

Security

CookieSafe

Edit Cookies

McAfee SiteAdvisor - lets you know if the currently viewed site is considered "safe" or not.

Functionality Extensions

CustomizeGoogle - customize your Google search and application experiences.

ErrorZilla - extends the standard page not found error screen with convenient links such as access to the page's Google cached copy.

Secure Login

View Cookies

Tab Management

Faviconize Tab - minimize a tab's width to the width of the favicon.

Tab Mix Plus

Add-Ons Management

Google Browser Sync

FEBE - a convenient extensions & settings backup tool. Allows you to also run scheduled backups. The backups can be used to transport your extensions and their settings to another machine or Firefox profile.

MR Tech Local Install - install power tools for add-ons

Class Inheritance in Javascript

admin — Tue, 05 Jun 2007 11:07:53 +0000

My previous post showed how to create classes in Javascript. This addendum post shows how to create an inherited class from a parent class.

The concept is simple.

Declare and define your parent class
Declare and define your child class without defining the parent-child relationship
Add a new instance of your parent class to your child class' prototype. Now the child class has access to the parent class' properties and methods. This last step may seem counter-intuitive, but the example below helps to clarify what I mean.

PLAIN TEXT

JAVASCRIPT:

function SuperHero(heroID, p1, p2, p3) {
...
...
...
}
/* Do some extending of SuperHero's prototype here */
//Now let's define our child class - note that we do not initially define the parent-child relationship
function AlienSuperHero(heroID, homePlanet, race, p1, p2, p3) {
...
//Now we indicate the parent-child relationship
this.prototype = new SuperHero(heroID, p1, p2, p3);
}
/* Do some extending of AlienSuperHero's prototype here */

Usage would be along the lines of:

PLAIN TEXT

JAVASCRIPT:

var MartianManhunter = new AlienSuperHero(3454, 'Mars', 'Martian', 'Flight', 'Telepathy', 'Shapeshifting');
if (fire) {
//This is a method defined in the parent class
MartianManhunter.losePowers();
}

Creating classes with Javascript

admin — Tue, 05 Jun 2007 10:51:22 +0000

Javascript is a prototype-based language rather than a class-based language (e.g. Java). For an explanation of the difference, see Mozilla's comparison of class-based and prototype-based languages.

In short, in a class-based language, objects are created by instantiating classes. The classes' list of properties and methods cannot be altered (e.g. added to) at runtime. A prototype-based language does not have the notion of a class. Everything is an object. A prototype-based object can have its list of properties and methods modified during runtime.

The examples below show how to create a class in Javascript. First we define a function that will behave as our constructor. Then we extend that function's prototype to include further functions that will behave as the class' methods. Note the use of the "this" keyword to refer to the prototype of the current object.

PLAIN TEXT

JAVASCRIPT:

//This is our constructor
function SuperHero(heroID, p1, p2, p3) {
this.heroID = heroID;
this.name = null;
this.power_1 = p1;
this.power_2 = p2;
this.power_3 = p3;
this.power_ultimate = p1 + p2 + p3;
}
//Now add some methods to the class
SuperHero.prototype.getPower1 = function() {
return this.power_1;
}
SuperHero.prototype.losePowers = function() {
this.power_1 = null;
this.power_2 = null;
this.power_3 = null;
}
SuperHero.prototype.setName = function(name) {
this.name = name;
}
SuperHero.prototype.alertProfile = function() {
var str = 'Hero Profile:\n' +
'Name: ' + this.name + '\n' +
'Name: ' + this.name + '\n' +
'Name: ' + this.name + '\n' +
'Name: ' + this.name + '\n' +
}

And now we have a simple class with a few simple properties and methods. Usage of the class would be something like:

PLAIN TEXT

JAVASCRIPT:

var Superman = new SuperHero(2331, 'Flight', 'Speed', 'Strength');
Superman.setName('Superman: Man of Steel');
var power_1 = Superman.getPower1();
if (kryptonite) {
Superman.losePowers();
}
Superman.alertProfile();

Add list items to a list via the DOM

admin — Thu, 05 Apr 2007 05:38:09 +0000

PLAIN TEXT

JavaScript:

//Create new list element
var new_item = document.createElement('li');
var new_item_label = document.createTextNode(title);
new_item.appendChild(new_item_label);
new_item.id = '467894sfs6f579f4sa6';
parent_container.appendChild(new_item);