As part of an AIR project that I have been working on with my good friend Rob, we came across the need to parse a number of URLs within the text of a Twitter post. This may not sound too easy at first, but thanks to the prototype property available on JavaScript objects, our task was a relatively simple one.

The prototype object of JavaScript is a prebuilt object that simplifies the process of adding custom properties or methods to all instances of an object. For example, there is not a trim() method available on the String class, therefore, through the wizardry of regular expressions and the prototype property, I can add one.

You simply need to specify String.prototype before your method definition. e.g.:

String.prototype.trim = function() { 
	return this.replace(/^\s+|\s+$/g,"");
}

With this in mind, we can add methods to our String class, at runtime, that will allow us to manipulate the text string that is passed back in a Twitter JSON packet.

The Goal

To auto-magically parse different types of links within a text string. We will look at standard URL links, links applied to Twitter usernames and those applied to Hashtags.

Demo

The demonstration simply takes a test string and outputs it to the screen using JavaScript.

See the demo in action.

Parsing URLs as Links to the resource

First we create a custom method of the String.prototype property called parseURL. When invoked on a string, the regular expression finds any instance of a URL and will wrap the URL with an HTML anchor, with the correct href attribute and value applied.

String.prototype.parseURL = function() {
	return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(url) {
		return url.link(url);
	});
};

Demo 1.

We can simply demonstrate the parsing of the link with the following code in the body of the page:

<script type="text/javascript">
var test = "Simon Whatley's online musings can be found at: http://www.simonwhatley.co.uk";
document.write(test.parseURL());
</script>

In the above example, a simple string variable is created called test, which contains a URL. The text does not contain any HTML at this stage. We then write out the test variable applying the parseURL() method to it.

The resultant HTML generated is the following:

Simon Whatley's online musings can be found at: <a href="http://www.simonwhatley.co.uk">http://www.simonwhatley.co.uk</a>

When rendered in a browser, the code becomes a hyper-link.

Parsing Usernames as Links to Twitter

Following on from the URL example above, we can apply a similar methodology to Twitter usernames since they can also be URLs to their associated Twitter page.

Again we create a custom method of the String.prototype property, this time we’ll called it parseUser. The regular expression in this case finds all instances of @username. We then simply replace the @ as this is not part of the actual username. The Twitter URL is then applied to the username.

String.prototype.parseUsername = function() {
	return this.replace(/[@]+[A-Za-z0-9-_]+/, function(u) {
		var username = u.replace("@","")
		return u.link("http://twitter.com/"+username);
	});
};

Demo 2.

We can simply demonstrate this with the following code:

<script type="text/javascript">
var test = "@whatterz is writing a post about JavaScript.";
document.writeln(test.parseUsername());
</script>

The resultant HTML generated is the following:

<a href="http://twitter.com/whatterz">@whatterz</a> is writing a post about JavaScript

Parsing Hashtags as Links to Twitter’s Search

Finally, Twitter also allows user’s to create Hastags within their posts. Hashtags are a community-driven convention for adding additional context and metadata to your tweets. Like regular URLs and usernames, Hastags can been parsed as a URL to an online resource, in this case, Twitter’s search.

Again we create a custom method of the String.prototype property, this time we’ll called it parseHashtag. The regular expression in this case finds all instances of #hashtag. The Twitter Search URL is then applied to the hashtag.

String.prototype.parseHashtag = function() {
	return this.replace(/[#]+[A-Za-z0-9-_]+/, function(t) {
		var tag = t.replace("#","%23")
		return t.link("http://search.twitter.com/search?q="+tag);
	});
};

Demo 3.

We can simply demonstrate this with the following code:

<script type="text/javascript">
var test = "Simon is writing a post about #twitter and parsing hashtags as URLs";
document.writeln(test.parseHashtag());
</script>

The resultant HTML generated is the following:

<code>
Simon is writing a post about <a href="http://search.twitter.com/search?q=%23twitter">#twitter</a> and parsing hashtags as URLs
</code>

NB. Twitter’s search was originally provided by Summize. However, as of July 2008, they have been bought by Twitter and the search can be found at http://search.twitter.com.

Where to take it next

Using the above code, we can now create a simple Twitter feed reader. Using, for example jQuery, to get and parse the Twitter JSON packet we can then apply the prototype methods to the text entries.

It is also worth noting that it is possible to cascade the methods, so we can do the following:

<script type="text/javascript">
var test = "@whatterz is writing a blog post about #twitter, which can be found at http://www.simonwhatley.co.uk";
document.writeln(test.parseURL().parseUsername().parseHashtag());
</script>

Download the code

The example code can be downloaded from the demo page.

Creating an autocomplete form field historically has not been a trivial matter and would require an indepth knowledge of JavaScript and CSS. However, the task is made far more simple when using one of the many freely-available JavaScript libraries. In this post I will show you how to implement the jQuery Autocomplete created by Dylan Verheul.

The Goal

Allow the user to type a few characters into a standard form text input field and to automatically provide suggestions from which the user can select.

Prerequisites

  1. The latest copy of jQuery
  2. A basic understanding of JavaScript
  3. A server-side script that can respond to the AJAX request, in our case ColdFusion

Demo

The demo will specifically look at a simple form text input field, which takes a country name.

See the demo, and others, in action

How It Works

Once the user begins to type into the form text input field, the jQuery autocomplete is activated. After a set time interval, a list of items is displayed below the input field. The user can select these with either the arrow keys or mouse.

The Code

There are three parts to this demo:

  1. The page’s HTML.
  2. The server-side code to produce the dynamic page (i.e. to load the autocomplete div when the user types something into the input field).
  3. The jQuery & JavaScript.

HTML Form

<h3>Example 1.: Country Lookup</h3>
<p>Using <abbr title="Asynchronous JavaScript and XML">AJAX</abbr> to interrogate the database.</p>
<p>Example data: Australia, Bulgaria, United Kingdom</p>
<form name="frmAutoCompleteCountry" id="frmAutoCompleteCountry" action="#" method="post">
<p>
<label for="country">Country</label>
<input type="text" name="country" id="country" />
</p>
</form>
<p>NB. If you have <a href="http://getfirebug.com/" title="Get Firebug">Firebug</a> installed you will be able to view the <abbr title="Asynchronous JavaScript and XML">AJAX</abbr> call.</p>

ColdFusion

This is a simple example, using a database to return a list of country names that match the characters the user has input. You could expand this and return a JSON data structure.

<cfsetting enablecfoutputonly="true">
<cfquery name="qryGetCountry" datasource="myDatasource">
SELECT countryName
FROM Country
WHERE countryName LIKE <cfqueryparam value="#URL.q#%" cfsqltype="cf_sql_varchar" />
</cfquery>
<cfoutput query="qryGetCountry">
#qryGetCountry.countryName##chr(10)#
</cfoutput>

JavaScript

The JavaScript will attach itself after the document is ready, i.e. after the page has loaded. Each time the text input field, with the ID of country, is changed, the autocomplete event is fired. This makes a call to the ColdFusion page, which returns a list of matched items.

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<link type="text/css" href="autocomplete.css" rel="stylesheet" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
	$("#country").autocomplete(
		"country.cfm",
		{
			minChars:2,
			delay:200,
			autoFill:false,
			matchSubset:false,
			matchContains:1,
			cacheLength:10,
			selectOnly:1
		}
	);
);
</script>

Where To Take It Next

JSON

The above example only shows a simple text list, separated by carriage returns. It is more preferable to use JSON.

Unobtrusive JavaScript

As with any page that is loaded with JavaScript and AJAX functionality, it should work without JavaScript.

To achieve this with the above tutorial, you will need to replace the jQuery autocomplete functionality with an ‘interim’ page that allows a user to select from a list of items, effectively turning the input field into a simple search interface. Of course, all other form field information would need to be retained between pages.

Download The Code

The example code can be downloaded from the demo page. Included are ColdFusion and PHP examples.

For many web developers, whenever JavaScript is mentioned it provokes a rye smile; JavaScript is one of those programming languages that is rather avoided than embraced. This is not the fault of the language itself, but rather the browsers. A few years ago, the landscape of client-side scripting was a bleak scene. Browser inconsistencies, particularly with the dominant Internet Explorer, implementation bugs and numerous target platforms made developing client-side JavaScript a tricky undertaking.

To the consternation of these same developers, the landscape changed and Web 2.0 hit the mainstream. Almost overnight, every website on the internet wanted to use or was using AJAX. Marketers joined the bandwaggon and every feature requested had to involve something dynamic and revolutionary. Thus JavaScript development quickly hit the forefront of peoples minds and became as important as any server-side technology available at the time.

Over the next few blog posts, I will be using the popular frameworks jQuery, Yahoo! User Interface Library (YUI), ExtJS and Adobe’s Spry with ColdFusion to demonstrate various techniques, such as autocomplete and form validation.

by Dan Wellman

Synopsis

Learning the Yahoo! User Interface Library book coverThe Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML, and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD License and are free for all uses.

This book covers all released components whether utility, control, core file, or CSS tool. Methods of the YAHOO Global Object are used and discussed throughout the book. The basics of each control are presented, along with a detailed example showing its use to create complex, fully featured, cross-browser, Web 2.0 user interfaces.

Besides giving you a deep understand of the YUI library, this book aims to expand your knowledge of object-oriented JavaScript programming, as well as strengthen your understanding of the DOM and CSS.

The core aim is to teach you how to create a number of powerful JavaScript controls that can be used straight away in your own applications.

Download

Download the latest YUI version, including full API documentation and more than 250 functional examples from Sourceforge.

The library’s developers blog frequently at the YUI Blog and the YUI Library community exchanges ideas at YDN-JavaScript on Yahoo! Groups.

Book Review

The Yahoo! User Interface Library sits comfortably amongst its peers, which, along with many others, include Prototype, jQuery and Mootools. Arguably it can be said that the YUI library is the king among the JavaScript and CSS-libraries. With a vast number of well documented examples and near 100% compatibility amongst modern browsers, it would be difficult to find a comparable library.

It is one thing to be a well documented library, but it is another to know how to use the libraries to construct a user interface. This is the niche Dan Wellman fills with his book. Although not necessarily for the beginner, since you need a knowledge of CSS, JavaScript and a little AJAX, Wellman does a good job of explaining the concepts, especially AJAX, from scratch.

Wellman provides an A-to-Z of the library and assumes, rightly, that the reader has little or no knowledge of the library. To that effect, he does a long introduction of the YUI, following an overall review of its components, listing them in the first chapter. He then picks up a selection of some of the most established utilities, for example navigation, animation and AJAX utilities and in the following chapters he covers one or two examples for each of them.

Importantly, the book teaches the reader how to not only use the DOM manipulation and event handling aspects of the library, but also the CSS tools of the library.

Wellman does a good job of introducing the technical aspects at the beginning of each chapter, but not dwelling too long before moving on to real usage and methods.

What I would have liked to have seen is more interaction between different components written about in the book. Clearly building a fully-featured application that incorporates most or all of the key components would be unweildy, but individual and isolated examples doesn’t equate real-world scenarios either. For example, it is quite conceivable that autocomplete and drag-and-drop components would be utilised on the same page; it would have been good if Wellman had explained the pains or pitfalls that may be encountered with such combinations. The negativity aside, the examples are of a good quality.

The book does contain a number of errors, but since this is the first edition you can probably forgive the editors from missing them.

A major gripe I have with this book, indeed all technical books is the lack of colour throughout. It is far easier to read and understand the example code when code colouring is employed, allowing for easier understanding of the key elements in the code. Surely modern publishing techniques can mitigate against the extra cost of colour. Indeed, I would pay more for a well-written coloured technical book.

A great summary chapter on graceful degredation versus progressive enhancement would also have been welcomed, since many developers may not consider the usability and accessibility issues of using JavaScript.

This book is certainly a good read for anyone who has basic knowledge of JavaScript, HTML and CSS and who wants to learn how to apply the YUI library in their projects, making them more interactive for the user.

Adobe AIR for JavaScript DevelopersMike Chambers announced at the onAIR tour London event last week that he would be releasing an electronic version of the Adobe AIR for JavaScript Developers pocket book, by the publishers O’Reilly, under Creative Commons licence terms. Well, good to his word, you can download the pocket reference from the Adobe onAIR website.

This book is the official guide to Adobe AIR, written by members of the AIR team. With Adobe AIR, web developers can use technologies like HTML and JavaScript to build and deploy web applications to the desktop. Packed with examples, this book explains how AIR works and features recipes for performing common runtime tasks. Part of the Adobe Developer Library, this concise pocket guide explains:

  • What Adobe AIR is, and the problems this runtime aims to solve
  • How to set up your development environment
  • The HTML and JavaScript environments within AIR
  • How to create your first AIR application using HTML and JavaScript
  • Ways to perform an array of common tasks with this runtime

Also included is a guide to AIR packages, classes, and command line tools. Once you understand the basics of building HTML- and JavaScript-based AIR applications, this book makes an ideal reference for tackling specific problems. It offers a quick introduction to a significant new development technology, which lets you combine the reach and ease of the Web with the power of the desktop.

Among the plethora of JavaScript libraries to have been released, few have been recognised to be as effective as jQuery. This lightweight library has been the subject of different discussions since it was launched in 2006. Basically, jQuery has the ability to flawlessly string together JavaScript together with HTML. Because of its effectiveness, there have different types of lightweight applications and plug-ins launched using jQuery. Ajax based websites that offers simple interface would virtually work together using jQuery’s simple interface.

Download the jQuery 1.2 API Reference (360KB).

More information can be found on the jQuery Website.

In arithmetic and algebra, when a number or expression is both preceded and followed by a binary operation (a calculation involving two operands), a rule is required for which operation should be applied first. From the earliest use of mathematical notation, multiplication took precedence over addition, whichever side of a number it appeared on. Thus 3 + 4 × 5 = 5 × 4 + 3 = 23.

Operator precedence, therefore, determines the order in which operators are evaluated in a statement. Operators with higher precedence are evaluated first.

A simple example can be expressed as follows:

<cfscript>
x = 3 + 4 * 5;
writeOutput(x); //returns 23
</cfscript>

This is equivalent to wrapping the 4 * 5 in parentheses:

<cfscript>
x = 3 + (4 * 5);
writeOutput(x); //returns 23
</cfscript>

If we switched the parentheses, the result returned would be entirely different:

<cfscript>
x = (3 + 4) * 5;
writeOutput(x); //returns 35
</cfscript>

This is an important point to note. Operators have an order of precedence, but this can be overridden using parentheses. Statements within parentheses are always evaluated first, before moving on to the outer statements.

Associativity

The concept of Associativity determines the order in which operators of the same precedence are processed. For example, consider the following expression (where OP stands for order of precedence):

a OP b OP c

Left-associativity (left-to-right) means that it is processed as:

(a OP b) OP c

Right-associativity (right-to-left) means it is interpreted as:

a OP (b OP c)

The following table details operators order of precedence:

Precedence Operator type Associativity Individual operators
1 increment n/a ++
decrement n/a
2 logical-not right-to-left !
unary + right-to-left +
unary negation right-to-left -
3 multiplication left-to-right *
division left-to-right /
modulus left-to-right %
4 addition left-to-right +
subtraction left-to-right -
5 relational left-to-right <
<=
>
>=
6 equality left-to-right ==
!=
7 logical-and left-to-right &&
8 logical-or left-to-right ||
9 assignment right-to-left =
+=
-=
*=
/=
%=
&=

Summary

Warning: Multiplication and division are of equal precedence, and addition and subtraction are of equal precedence. Using any of the above rules in the order addition first, subtraction afterward would give the wrong answer to

10 - 3 + 2

The correct answer is 9, which is best understood by thinking of the problem as the sum of positive ten, negative three, and positive two.

10 + (-3) + 2

It is usual, wherever you need to calculate operations of equal precedence to work from left to right. The following rules of thumb are useful:

First: perform any calculations inside parentheses (brackets)

Second: Next perform all multiplication and division, working from left to right

Third: Lastly perform all addition and subtraction, working from left to right

However, with experience, the commutative law, associative law, and distributive law allow shortcuts. For example,

17 x 24 / 12

is much easier when worked from right to left, where here the answer is 34.

In addition to the comparison operators, which can be used on string values, the concatenation operator (&) concatenates two string values together, returning another string that is the union of the two operand strings. For example, “my ” & “string” returns the string “my string”.

The shorthand assignment operator &= can also be used to concatenate strings. For example, if the variable mystring has the value “alpha”, then the expression mystring &= “bet” evaluates to “alphabet” and assigns this value to mystring. This expression can be used in all CFML expressions.

<cfscript>
mystring = "Alpha";
mystring &= "bet";
</cfscript>
 
<cfdump var="#variables#" label="Concatenating Strings" />

This returns the following output:

Concatenating Strings Operator Example

Following on from the first three parts of my “Using JavaScript Operators” in ColdFusion 8 series, where I introduced Arithmetic, Assignment and Logical Operators, it is now the turn of Comparison Operators.

In the past we have been restricted to the more ‘wordy’ operators such as those defined in the first table below.

Operator Description
IS
EQUAL
EQ
Perform a case-insensitive comparison of two values. Return True if the values are identical.
IS NOT
NOT EQUAL
NEQ
Opposite of IS. Perform a case-insensitive comparison of two values. Return True if the values are not identical.
CONTAINS Return True if the value on the left contains the value on the right.
DOES NOT CONTAIN Opposite of CONTAINS. Return True if the value on the left does not contain the value on the right.
GREATER THAN
GT
Return True if the value on the left is greater than the value on the right.
LESS THAN
LT
Opposite of GREATER THAN. Return True if the value on the left is smaller than the value on the right.
GREATER THAN OR EQUAL TO
GTE
GE
Return True if the value on the left is greater than or equal to the value on the right.
LESS THAN OR EQUAL TO
LTE
LE
Return True if the value on the left is less than or equal to the value on the right.

However, with the arrival of ColdFusion 8, the CFML scripting language has been brought into line with other major scripting languages. This change is undoubtedly good for ColdFusion as developers familiar with the ActionScript and JavaScript syntax can now more effectively code ColdFusion and vice-versa.

The following table describes the comparison operators that can be used in ColdFusion 8, albeit used in <cfscript> expressions only:

Operator Description Examples returning true1
Equal (==) If the two operands are not of the same type, JavaScript converts the operands then applies strict comparison. If either operand is a number or a boolean, the operands are converted to numbers; if either operand is a string, the other one is converted to a string

3 == var1
"3" == var1
3 == '3'

Not equal (!=) Returns true if the operands are not equal. If the two operands are not of the same type, JavaScript attempts to convert the operands to an appropriate type for the comparison.

var1 != 4 var1 != "5"

Greater than (>) Returns true if the left operand is greater than the right operand.

var2 > var1

Greater than or equal (>=) Returns true if the left operand is greater than or equal to the right operand.

var2 >= var1 var1 >= 3

Less than (<) Returns true if the left operand is less than the right operand.

var1 < var2

Less than or equal to (<=) Returns true if the left operand is less than or equal to the right operand.

var1 <= var2
var2 <= 5

1 These examples assume that var1 has been assigned the value 3 and var2 has been assigned the value 4.

Below are just a few simple examples of the new ColdFusion operators and their use:

IS EQUAL TO

In the below example, the value of var1 is not equal to var2, therefore the comparison returns false and the else statement is processed, writing the number 4 to the screen.

<cfscript>
var1 = 3;
var2 = 4;
if (var1 == var2) //returns false
	writeOutput(var1);
else
	writeOutput(var2); //writes out 4
</cfscript>

IS NOT EQUAL TO

In the below example, the variable var1 is not equal to 4, therefore the statement returns true, writing 3 to the screen. The second if statement serves to emphasise that ColdFusion is not strictly typed. Therefore comparing var1 to an Integer or a String is possible. ColdFusion handles type conversion in the background.

<cfscript>
var1 = 3;
var2 = 4;
if (var1 != 4) //returns true
	writeOutput(var1); //writes out 3
 
if (var1 != "5") //returns true
	writeOutput(var1); //writes out 3
</cfscript>

IS GREATER THAN

In the below example, var2 is greater than var1, therefore the value of var2, 4, is printed out on screen. Changing the operator to Greater Than or Equal To (>=) would also return the same result. However, using the Less Than (<) and Less Than or Equal To (<=) operators would return false and not write a value to the screen.

<cfscript>
var1 = 3;
var2 = 4;
if (var2 > var1) //returns true
	writeOutput(var2); //writes out 4
</cfscript>

Following on from my posts on Arithmetic and Assignment operators, Logical operators are typically used with Boolean (logical) values; when they are, they return a Boolean value. However, the && and || operators actually return the value of one of the specified operands, so if these operators are used with non-Boolean values, they may return a non-Boolean value.

The logical operators are described in the following table:

Operator Usage Description
Logical AND (&&) expr1 && expr2 Returns expr1 if it can be converted to false; otherwise, returns expr2. Thus, when used with Boolean values, && returns true if both operands are true; otherwise, returns false.
Logical OR (||) expr1 || expr2 Returns expr1 if it can be converted to true; otherwise, returns expr2. Thus, when used with Boolean values, || returns true if either operand is true; if both are false, returns false.
Logical NOT (!) !expr Returns false if its single operand can be converted to true; otherwise, returns true.

Using ColdFusion, the Logical operators can be expressed as follows:

Logical AND

In the below example, both operands, x and y, return true, therefore myVariable is set to true within the logical statement.

<cfscript>
x = 9;
y = 2;
myVariable = false;
 
if (x < 10 && y > 1)
{
	myVariable = true;
}
</cfscript>

Logical AND Operator Example Results

Logical OR

In the below example, neither x equals 10 nor y equals 1, therefore the first part of the logical statement is not resolved. Instead, the else statement is processed, assigning the boolean value false to the variable myVariable.

<cfscript>
x = 9;
y = 2;
 
if (x == 10 || y == 1)
{
	myVariable = true;
}
else
{
	myVariable = false;
}
</cfscript>

Logical OR Operator Example Results

Logical NOT

In the below example, x does not equal y. Ordinarily this would result in the logical statement being evaluated, however, a logical negation has been applied to the beginning of the expression to be evaluated, therefore the variable myVariable is assigned the boolean value true.

<cfscript>
x = 9;
y = 2;
myVariable = false;
 
if (!x==y)
{
	myVariable = true;
}
</cfscript>

Logical NOT Operator Example Results

« Older entries