• About This Newsletter
• On the Web? => Properly Salting Passwords, The Case Against Pepper
• On the Road => Istanbul and Silicon Valley
• On the Blog => My New Logo and Business Card from 99designs
• On the Blog => Five Ways to Lose Work
• On the Blog => Yii and Me (aka, the Yii Book)
• Q&A => How Do I Make Ajax Content Available to Search Engines
• Q&A => Can You Use .html Instead of .php?
• Larry Ullman’s Book News => “PHP 5 Advanced: Visual QuickPro Guide” (3rd Edition)

About This Newsletter

To repeat what I’ve said in the past two newsletters, I am now officially on Twitter. Hopefully next month, I’ll get the Twitter “follow me” link on my main site and add it to this newsletter template. But in the meantime, you can follow me using @LarryUllman. I’m doing better about sending out tweets, and I do retweet things that I think are notable or useful. In fact, I sent out a tweet a couple of days ago asking for good newsletter questions, and I received a few, one of which I answer here. Even an old dog can learn a new trick, I guess.

Also, I would love to have more questions to answer in forthcoming newsletters. I tend to get the most questions when I do a book giveaway, and I haven’t had one of those in a while, so the well is running a bit dry.

As always, questions, comments, and all feedback are much appreciated. And thanks for your interest in what I have to say and do!

On the Web => Properly Salting Passwords, The Case Against Pepper

Anthony Ferrara, creator of the PHP PasswordLib library, just recently posted a discussion of using salts and pepper to improve the security of a stored password. Mostly, the article is a discussion of why a pepper is unnecessary (and if you don’t know what a “pepper” is, just read the article), but the posting also does a good job of explaining the purpose of a salt, and why the salt does not need to be a secret. The posting is relatively short, and is something I think everyone can benefit from reading.

The posting ends with the most important security fact:

Remember, the most dangerous kind of security is a false sense of it. Thinking you’ve made your application more secure, when in fact you’ve weakened it, is the worst thing you could possibly do.

On the Road => Istanbul and Silicon Valley

For the first time in a long time, I’m going to do some work-related traveling. I used to travel somewhat regularly for conferences and training seminars and the like. But then I had kids and other personal issues came up, so I cut back. I think the last time I travelled for work was when I spoke at a Voices That Matter conference in Nashville, TN in 2008!

My first trip is to Istanbul, Turkey, at the end of May. I’ll be speaking at the E-commerce Expo on May 30th (the site is in Turkish, so you’ll want to use a browser like Chrome that will translate the page for you). I will have about two other days to see what I can of the city, so if anyone has any recommendations of what to see and do, or where to eat, please let me know. I’ve heard nothing but great things about Istanbul and am really looking forward to it. Oh, and my speech—Building a Successful E-commerce Venture, or Failing Gracefully—should be good, too.

At the end of June, I’ll be doing two days of training on JavaScript and jQuery at the Mid-Pacific ICT Center Summer 2012 Faculty Development Week in Fremont, California. I’m tentatively thinking about making myself available for drinks or dinner on Thursday, June 28th, although I haven’t thought it through, yet. If you’re in the area and think you’d like to meet, let me know and I’ll see what makes sense from there. Thanks!

On the Blog => My New Logo and Business Card from 99designs

In March, I finally got around to having a new logo and business card created, using 99designs. It wasn’t a driving need for me, but it was about time. I wrote about the contest experience in one blog post. In another blog post, I show the end results, and also some of the terrible logos and business cards I’ve had along the way (i.e., the ones I designed).

I’ve since hired a designer to modify my CSS to use the new logo and colors. This is going to go with a new WordPress theme, which I’m hoping to get online in May. Hoping. After that I’ll also update this newsletter template.

On the Blog => Five Ways to Lose Work

In the previous newsletter, I wrote about competing for work. Getting work is a frequent topic of conversation I have with readers, and between that question, and my recent experiences with 99designs, I wrote a blog post titled “Five Ways to Lose Work”. Although some of the examples in that post come from my 99designs experience, it’s not really about 99designs, but more about the common mistakes people make when trying to get a project. My intent is that by recognizing these mistakes, you’ll be less likely to make them, and therefore have a better chance of getting work.

On the Blog => Yii and Me (aka, the Yii Book)

Many people have appreciated my Learning the Yii Framework series and are awaiting a formal Yii book written by me. This is something I have been hoping to do for sometime. It looks like that time will be the latter half of 2012. Almost definitely. In a recent blog post, I announced my current plans and thinking about the book. I was also very pleased to say that Qiang Xue, the creator of Yii, has generously agreed to act as the technical editor for the book. Now it’s just a matter of writing it!

Q&A => How Do I Make Ajax Content Available to Search Engines?

I’m digging way through the archives to find questions to answer, and I came across this one sent in by Richard back in October of 2008. It’s probably way too late to help Richard, but perhaps my answer can be of use to others. Here’s the prompt (summarized by me):

I have a discussion board that pulls posts via Ajax, which means that posts aren’t being indexed by search engines. I updated the system so that all posts are displayed by PHP, to make them search engine visible, and then use Ajax for new posts since the user got online, but are there other places where Ajax presents this sort of problem?

This brings up a very good point that every Web developer ought to be aware of. It’s obvious that if someone disables JavaScript, they can’t see the JavaScript functionality on a site. Statistically, only around 1-3% of all users have JavaScript disabled. However, all search engine bots are unable to see JavaScript-derived content. This means that all content on your site that’s created by JavaScript will not appear in search engines. This is especially ironic as many sites use JavaScript for the most important content. So what’s the solution?

The solution is actually the same solution for all JavaScript-based sites. Unless the site absolutely has to require JavaScript, you should always start with a non-JavaScript version first. A non-JavaScript version will be accessible by all search engines and by, well, anyone. The non-JavaScript version may not be pretty or cool, but it will be functional, which is most important. Then you can add the JavaScript layer to implement the cool, or more interactive, version. This process is called “progressive enhancement” and is a cornerstone of modern JavaScript, as explained in my “Modern JavaScript: Develop and Design” book.

If, for whatever reason, you don’t want to take this approach, then simply create alternative versions of your content that would be available for search engines. This could be as simple as a site map that links to non-dynamic versions of the content.

Q&A => Can You Use .html Instead of .php?

This question came in from @enxaneta_info via Twitter:

Is it possible to replace the .php extension with .html?

The short answer is yes. A file’s extension just tells the computer what application should be used to execute that file. With Web files, the extension tells the Web server how to treat that file. Normally, the .php extension indicates that the code therein should be run through the PHP module. If you wanted to use .html, you’d just need to tell the Web server to send all files with a .html extension through the PHP module. (This is done via an AddType directive in the Apache configuration file.)

One benefit of doing this is that it allows you to hide what type of server-side tool is being used. On the other hand, there is certain to be a performance hit as the Web server will send every page through the PHP module. But if you have a site that only contains PHP scripts and has no HTML files, this is a reasonable change to make.

Larry Ullman’s Book News => “PHP 5 Advanced: Visual QuickPro Guide” (3rd Edition)

I’ve formally started writing the third edition of my “PHP 5 Advanced: Visual QuickPro Guide” book. You can view the initial Table of Contents on my Web site, along with some discussion of my approach to this edition. The new edition is tentatively titled “Advanced PHP and Object-Oriented Programming: Visual QuickPro Guide”, to better reflect the book’s focus.

If you have any thoughts on the book’s table of contents, please share them on that blog posting page. As I said, I’m writing the book now, and it will be my primary focus for the next two months. Ideally the first submitted draft will be completed by the end of May (although that will be a stretch), and the book will come out by the end of summer.

dept_form.html

This page returns all of the employees in a selected department.

add_employee.html

This page uses Ajax to add an employee to the database (note: the version running on this site does not actually execute the INSERT query that updates the database.)

search_form.html

This page provides a simple search to retrieve employees by last name.

There’s no navigation within or among the pages. You’ll need to click Back to return to this page to see another example. To run one of the examples without Ajax (to see what that’d be like for visitors that can’t use the Ajax version), disable JavaScript in your Web browser.

1. Incorporating jQuery into an HTML page
2. Selecting page elements
3. Adding event handlers
4. Applying effects
5. Manipulating elements
6. Ajax
7. Plug-ins

I think I noted this in an earlier post, but an interesting feature of jQuery is that it ignores attempted actions that cannot be done. For example, if you attempt to hide an already hidden element, nothing happens. Specifically no error is thrown. While full-fledged programming in any language mandates that you avoid and watch for errors, jQuery is intended for quick and easy use, so this design means you don’t, in this example, need to test an element’s visibility before you attempt to hide it, greatly minimizing the amount of code you need to write.

Similarly, if you attempt to select something and no elements match the criteria, no objects are returned. Attempting to apply methods to a non-selection still doesn’t throw an error:

$('#thisDoesNotExist').addClass('varmit');

If you want to confirm that a selection was made, you can apply the length() method to test for that:

var set = $('p');
if (set.length()) {...

That code also shows how you can assign the results of the jQuery function call to another variable, making that result set available elsewhere in your code.

Going along the testing lines, for when you need to, you can see if an element has a particular class by using the is() method:

if ($('#x').is('.className') {...

This method tests an expression and returns a Boolean value. Note the period before the CSS classname in this particular use of it.

To see if something is hidden, use the custom :hidden criteria:

if ($('#x').is(':hidden')) {...

The :visible keyword is its corollary.

A variation on this is if you only want to select hidden or visible elements in the first place: $(‘p:visible’) selects every visible paragraph.

Moving on randomly…a common need for a form is to disable the submit button after the user has clicked it, thereby preventing multiple submissions. To do so using jQuery, use $(‘#submitButtonId’).attr(‘disabled’, ‘disabled’). That code selects the element with an ID value of submitButtonId, then applies the disabled attribute to it (in full XHTML compliance, the corresponding code would be disabled=”disabled”). You would obviously need to execute this code in a function that’s called upon the form’s submission (through an event handler).

Still quite randomly…in the first post I discussed how this code—

$(function() {
    // Do whatever.
});

—is used to identify code to be executed once the document is ready (somewhat similar to the onload event). Interestingly, jQuery allows you to define many of these document ready functions. This means you could put separate pieces of code into separate document ready functions or, more commonly, multiple included JavaScript files could each make use of this approach without overlapping or conflicting with each other.

Moving on more randomly and in conclusion…Firefox users, which I hope is everyone that develops Web pages, may also appreciate the jQuery Plugin for Firefox. It creates a menu that lets you more quickly access jQuery documentation. Speaking of which, when you’re looking at the jQuery manual, you may click on a link under API Reference to find methods within a specific subcategory, like Effects. The resulting page will list the methods in that category, with a brief description of each and its signature (i.e., what arguments it takes and what it returns). If you click on a method’s name on this page, you’ll be taken to another page that has a demo, with visible source code, for how that method can be used.

So that’s it! For now anyway. I’ll probably have more to say about jQuery in time. I do hope that you’ve found these posts to be useful. Of course, your best reference is the excellent yet managable jQuery documentation. There are also plenty of articles in the documentation and linked from it. As always, thanks for reading and let me know if you have any comments or questions.

1. Incorporating jQuery into an HTML page
2. Selecting page elements
3. Adding event handlers
4. Applying effects
5. Manipulating elements
6. Ajax

jQuery itself is a relatively light framework that provides basic, cross-platform functionality. It was intended to be easy to expand and build upon. This way, if you need X feature, it can be added, but if you don’t need that feature, you’re not forcing the user to download all the JavaScript for it. This is a great design, the only problem being how to find and use the plug-in you need.

To start, a lot of common functionality has been put into a separate library, called jQuery UI, short for User Interface. This library adds features like drag and drop, resizing, accordians, tabs, date pickers, progress bars, plus effects. Even though jQuery UI contains all that stuff, you can use the library’s download page to build your own custom version that only defines the features you need. See the jQuery UI demos page for examples and source code. The Getting Started page also includes some good, basic information. In time, you’ll likely want to check out the jQuery UI ThemeRoller, which helps create a custom, cohesive look for the effects to match the rest of your site.

If jQuery UI is missing a feature that you need, head to jQuery’s plug-ins page. There the plug-ins are organized by type, and there are listings of most popular and most recent releases. If you want someone else’s opinion as to which plug-ins are best, a quick search turns up many articles on the subject:

• http://www.noupe.com/ajax/37-more-shocking-jquery-plugins.html
• http://speckyboy.com/2008/07/21/20-amazing-jquery-plugins-and-65-excellent-jquery-resources/
• http://www.noupe.com/ajax/45-fresh-out-of-the-oven-jquery-plugins.html
• http://www.wiliam.com.au/wiliam-blog/the-best-web-2-jquery-javascript-plugins
• http://www.ajaxline.com/10-best-jquery-plugins-march-2009

There are a couple of plug-ins that I personally recommend: Superfish and the jQuery Form Plugin. The former creates “suckerfish”-style navigation menus out of nested unordered links. These are animated, keyboard accessible menus that degrade well. See the examples page to look at this in action. The jQuery Form Plugin makes it easy to integrate Ajax functionality with forms (as form data is commonly used in Ajax interactions). If you look at the examples, you’ll see that it could hardly be easier to make an Ajax request using form data. Plus it has a cool feature where it automatically uses a hidden iframe to handle file uploads (which cannot be handled via Ajax).

So, what else? Date pickers are a popular tool and the jQuery UI includes a version. If you want something fancier, consider the Date Range Picker plug-in. There are also nice color pickers available, like this one. And there are a ton of different image manipulation plug-ins out there, as you can see in the links above and on jQuery’s plug-in page.

1. Incorporating jQuery into an HTML page
2. Selecting page elements
3. Adding event handlers
4. Applying effects
5. Manipulating elements

Ajax, which may or may not stand for Asynchronous JavaScript and XML, depending upon whom you ask, is largely responsible for JavaScript’s current status. What was once a “toy” language used for rollover images at best, and annoying distractions at worst, is now a viable tool for developing Rich Internet Applications. The ability to make server-side requests behind-the-scenes so that user never has to leave the current page has transformed Web applications into more responsive, dynamic experiences, much more similar to what the user’s come to expect from their desktop applications (the expansion and adoption of broadband access is also a factor, among others). But this post isn’t intended to convince you to use Ajax, rather to show you how easily you can use it with jQuery. Because everything’s easier with jQuery!

There are a couple of different ways you can make Ajax requests using jQuery. To start, there’s the load() method. This method makes a request of a specific server-side resource and uses the returned result as the content for the element to which it’s applied. For example, say you have a DIV with an ID of news. You could load the current news, returned by a server-side script, into that DIV by doing this: $(‘#news’).load(‘fetch_news.php’). In this example, the PHP script presumably just returns a bunch of text, which is then used as the innerHTML value for the selected element. You can pass GET values to the server-side script by appending them to the URL, or pass POST values by providing a second argument containing the data to be posted. If you check out the jQuery documentation for load(), you’ll see an example where part of the returned text is parsed out and used.

If you want to do something more dynamic with the returned response, you can use the aptly named get() and post() methods.Unlike a lot of the methods I’ve discussed in my posts thus far, these methods aren’t applied to specific elements. Instead, the syntax you’ll see are $.get() and $.post(). Any method that gets called like $.methodName() are utility methods, as they apply to the document as a whole, and not to any subset of the DOM.

The get() method takes up to four arguments: a URL, optional parameters (data to be sent to the server), a function to be called when the request is completed, and the type of response to expect. For this fourth argument, use a string: text, html, xml, json, script, or jsonp. As an example, say you want to call the server-side script to see if a username is available:

$.get('check_username.php', { username: 'test' },
    function(data) {
        alert (data);
    },
'text');

So that makes a request to check_username.php, found in the same directory on the server as this current page. The request sends along a value of test assigned to username (so the PHP script would refer to $_GET['username']). The anonymous function will be called when the request is completed. It receives one argument, the returned response, assigned to data, which is then alerted. Finally, we state that text is expected back. That { username: ‘test’ } structure may seem a little strange. This is just one way of creating an object in JavaScript. In this case, it’s an anonymous object with one property (username). To pass multiple values, you would separate each by a comma: { username: ‘test’, color: ‘blue’, timezone: ‘EST’ }. Do note that the properties themselves are not quoted but their values are. Also, the anonymous function can be written to take two arguments, the second being a text version of the returned status, like success or notmodified.

In context, where you might check a provided username after the corresponding form field has changed, you would do this:

 // Call this anonymous function when the input's value changes:
$('#usernameInput').change(function() {

    // Create a new, empty object.
    var data = new Object();

    // Add a property called 'username' with a value of the form input's value:
    data.username = $('#usernameInput').val();

    $.get('check_username.php', data, function(response) { alert (response); }, 'text');

});

(In a more complete example, though, you would confirm that the input has some value before making the request, and then probably do some error reporting based upon the result. Like if the result was a simple binary value for available/unavailable, you could add a message to the DOM or change the class of the form input’s label to indicate the unavailability of the username.)

The post() method is used exactly like get(), but makes a POST request. Generally speaking, you should make GET requests when you’re just fetching data from a page; you use POST when the intention is to alter content on the server. For comparison, normal viewing of a page in the browser, or clicking on a link, is a GET request; submitting a form is often a POST request, where the result of that request is something dynamic happening, like updating a record in a database or sending an email.

The primary Ajax-related jQuery method is…ajax()! Like get() and post(), ajax() is not invoked on a selected element. This method only takes one argument, which is an object of options. You can find the full list of options in jQuery’s manual, but the key ones are: data, dataType, success, type, and url. The data is the data to be sent, as an object (like in the above get() example). The dataType option is the same as the fourth argument to get() and post(), with a value like text, html, json, jsonp, script, or xml. The value assigned to success is the function to be called when the request succeeds. The type is either get or post. The url value is the server-side script to which the request should be made.

Fleshing out the earlier get() example using ajax(), you’d have something like this:

// Call this anonymous function when the input's value changes:
$('#usernameInput').change(function() {

    // Create the data to be sent along as an object:
    var data = new Object();
    data.username = $('#usernameInput').val();

    // Create the Ajax options as an object:
    var options = new Object();
    options.data = data;
    options.dataType = 'text';
    options.type = 'get';
    options.success = function(response) {
        if (response == 1) { // Good!
            // Add a message:
            $('#usernameInputMsg').text('The username is available.');

            // Remove the error class, if present:
            $('#usernameInputLabel, #usernameInputMsg').removeClass('error');

        } else if (response == 0) { // Bad!
            // Add a message:
            $('#usernameInputMsg').text('The username is unavailable!');

            // Add the error class to two elements:
            $('#usernameInputLabel, #usernameInputMsg').addClass('error'); //
        }
    };
    options.url = 'check_username.php';

    $.ajax(options); // Make the request!

});

You can see this in action here. Note that for creating the both objects used in the request, I’m doing a longer, more formal object creation, to make it more clear what’s going on. There are more terse ways of accomplishing the same thing.

And that’s it for Ajax in jQuery. As always, there’s more information in the jQuery manual and in various tutorials online. And in my next post, I’ll discuss plug-ins, among them is the Form plug-in, which provides an easy way to submit form data via Ajax.

You can alter the size of an element using height() and width(). If called with an argument, that value will be the element’s new height or width accordingly. If either method is called without an argument, the element’s height or width is returned.

For more on the above methods, see jQuery’s documentation for CSS.

A few very important methods I have yet to discuss come under jQuery’s attributes category.These are html(), text(), and val(). Each of these can retrieve or set an element’s HTML, text, or value. For example, html() will return the innerHTML value of an element, or if provided with an argument, will update that element’s innerHTML. The text() method is used the same way for an element’s text value. In other words, html() can get and set HTML; text() can only get and set text. The val() method gets or sets the value of an element, like form elements.

Say you have two form inputs—firstName and lastName. You can combine what the user enters there and place it in another element, like an paragraph greeting:

var name = $('#firstName').val() + ' ' + $('#lastName').val();
$('#greeting').html('Hello, <span class="bold">' + name + '</span>');

Then there’s the attr() method, short for attribute, can be used to retrieve or apply an attribute to an element. To get a specific link’s URL, you would use $(‘#somelink’).attr(‘href’). To change every image so that it doesn’t have a border, that’d be $(‘img’).attr(‘border’, ’0′). Or, as a very useful example, to disable a submit button after a form submission (to prevent duplicate submissions), use: $(‘#submit’).attr(‘disabled’, ‘disabled’).

The last topic to discuss in this post is DOM manipulation through adding, moving, or removing elements. The append() method adds content to the end of an element; prepend() adds content to the beginning of it. Note that both methods add the content “inside” of the element. So this example add two strings within the paragraph tags: $(‘#someP’).append(‘This is at the end.’).prepend(‘This is at the beginning.’). Both methods have a corresponding *To() method—appendTo() and prependTo()—for situations where you want to create new content, then choose the existing element to which the new content should be added.

The corollaries to append() and prepend() are after() and before(). These methods add the new content outside of the selected element. The insertAfter() and insertBefore() work like appendTo() and prependTo(), but again are applied outside of the existing element.

Next up are a series of methods for wrapping elements. For example, if you want to wrap all paragraphs in a DIV: $(‘p’).wrap(‘<div class=”content”></div>’). There are variations on this method; see the jQuery documentation for more.

Finally, there’s the replaceWith() method, for replacing an element with something else, like replacing all unordered lists with ordered lists. The empty() method gets rid of an elements children (aka subelements) and remove() gets rid of the element itself, plus its children.

So that’s an overview of how you can manipulate DOM elements. I didn’t rough out an example for these but I can if you think further clarification is necessary. In my next post, I’ll talk about making Ajax requests using jQuery.

In my second post on jQuery, I already mentioned a couple of functions you can use for various effects: addClass(), hide(), and show(). Of these, addClass() and its sibling removeClass() is the most powerful and flexible. By applying defined CSS classes to elements (or by removing their application), you can dramatically change the appearance of an element. And as CSS allows elements to have multiple classes, so you can add as many as you’d like.

Moving on, the hide() and show() methods do exactly what you’d expect. Each takes an optional speed argument: slow, normal, or fast. Or you could specify how quickly the effect is accomplished by providing a number of milliseconds. The default affect, without a speed argument, is for the transition to occur immediately.

These two methods can be combined under one umbrella using toggle(). Say you have a title and some content:

<h2 id="moreTitle">Click for More Information</h2>
<p id="moreInfo">Lorem ipsum dolor sit amet....</p>

You can add a toggle() method to the paragraph that’s revealed and hidden when the H2 is clicked:

$('#moreTitle').click(function() {
    $('#moreInfo').toggle();
});

If the P is hidden, then clicking the title will show it. If it’s currently shown, clicking the title will hide it. You can see this in action in the second section in the example. And, as you can see in the example, the rest of the page content gets moved around seamlessly as needed. (Note that in a real application, you’d want to make it all look nicer, perhaps having a +/- graphic that changes to indicate the state.)

As an aside, going back to the addClass() and removeClass() methods, there’s also toggleClass(), which adds or removes a class as appropriate.

Similar to show() and hide() are slideUp(), slideDown(), and slideToggle(). The effect is the same as using show() and hide() with a set speed. See the third example on the demo page.

Next there’s fadeIn() and fadeOut(). Each makes objects appear or disappear, but only through the effect of fading (see the fourth section in the demo). Both take an optional speed argument, which is again slow, normal, fast, or a number of milliseconds. The fadeTo() method changes the opacity of an object. Provide it with a speed as the first argument and the desired opacity as the second. This should be a number from 0.0 (hidden) to 1.0 (full visibility).

Again, see the demo example that goes with this post to view these in action, and look at the source code to see the minimal amount of JavaScript needed to make all this happen. The stress in the demo is on the functionality; real-world implementation would naturally be improved.

A few last things, to wrap this up…

• An entirely different way you can affect an HTML page is to change the elements that exist (i.e., add and remove objects) or change their contents. Both will be discussed in the next post on jQuery.
• You can write custom effects and apply them to elements using the animate() method.
• The stop() method terminates an in-process effect.
• Because of the way jQuery methods work (they often return the thing they were applied to), you can chain multiple methods in one line, thereby creating multiple effects in one step. This next line makes it so that any time a link is clicked, it’s class is changed and it’s partially faded:

$('a').click(function() { $(this).addClass('someNewClass').fadeTo(0.4); });

• Finally, for all of these effects, remember that jQuery lets you select any number of objects on the page at one time, so you can apply one or more effects to one or more elements at the same time (as again the above line of code demonstrates).

UPDATE: I keep forgetting to mention an important jQuery concept here: jQuery will not complain if you attempt to apply an inappropriate method. For example, if you apply hide() to a hidden element, nothing happens, including no errors or exceptions. Or if you call removeClass() on an element that doesn’t have the named class, again, it’s not a problem. This is important to know because it means you don’t need to add a ton of code checking for an element’s properties prior to attempting something (as you should in JavaScript proper or in other programming languages).

So that’s it for built-in jQuery effects. I hope this helped and let me know if you have any comments or questions.

<input type="text" id="something" onchange="callThisFunction()" />

In jQuery, the preference is to put the JavaScript within SCRIPT tags in the HEAD of the page, not lost in the rest of the HTML body (this is part of the Unobtrusive JavaScript philosophy). So you would first select a particular element using $(‘#something’) or whatever, then call the method associated with the desired event. The onchange in the above code becomes change(), onfocus becomes focus(), onmouseover is mouseover(), onclick becomes click(), etc. Normally each of these is passed an anonymous function to be executed when the event occurs:

$('#something').change(function() {
    // Do whatever.
});

Within the anonymous function, this refers to the element that’s the recipient of the event. So to alert what the user just entered into the text box, you would code:

$('#something').change(function() {
    alert($(this).val());
});

Also, to be clear, the val() method returns the value of an element. With a text input, the value is the text entered into it.

Note that because you can’t reference Document Object Model elements until after the DOM has loaded, you’d put this code into a function that’s called after that point:

$(function() {
    $('#something').change(function() {
        alert($(this).val());
    });
});

As I discussed in my first post on jQuery, the above syntax is shorthand for

$(document).ready(function() {
    // Do whatever.
});

What this means is that ready() is a method associated with an event, specifically the browser window’s event of the DOM having been loaded.

There are other ways in jQuery to associate events with elements. Two nice methods—hover() and toggle()—take multiple functions as arguments. The hover() method takes a mouseover function as its first argument, the mouseout function as its second. So using it you can easily invoke whatever code with this common event pair. The toggle() method takes two or more functions as arguments. Each subsequent function will be executed upon repeating clicks upon that element. Also, I should point out that the bind() method is an alternative way of associating events with elements. This method takes the event type as its first argument, the function to be called as its second. The above example could be rewritten as:

$('#something').bind('change', (function() {
    alert($(this).val());
});

The jQuery documentation discusses all of the event-related methods, of course. There are several related to key events, and other important ones like: submit(), for when a form is submitted; select(), for when an element is selected; and, resize(), for when the browser window is resized. They’re all well documented, with examples. And, of course, these are all browser-independent ways of handling events in jQuery.

In the next post, I plan on discussing some of jQuery’s effects, like hiding and showing elements.