hide - Understanding jQuery

“
Second Revision. July 2012
Understanding
jQuery
In Detail
An almost poetic guide to a broader
understanding of web development
concepts and creating dynamic web
applications.
Includes an Interactive Table of Contents,
improved JavaScript chapters, 20+ pages of new content
practical jQuery lessons and Regular Expressions
2012 Greg Sidelnikov greg.sidelnikov@gmail.com
PHP & MySQL
database library class
See page 39.
1

About the Book
Table of Contents
Credits and Acknowledgements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Pre-flight
A Lesson in Creativity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Thinking About Creating Websites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Logical vs. Intuitive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Moving External SCRIPT Files to the Bottom of the Page. . . . . . . . . . . . . . . . . . . . . . . . 9
Determining the Placement of Internal JavaScript Code. . . . . . . . . . . . . . . . . . . . . . . . 10
JavaScript Boot Camp
The Importance of Understanding JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
JavaScript Boot Camp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
What is JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Where to Place JavaScript Code?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Everything is an Object. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Functions as Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Global Scope. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Function Closures - What Are They? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
What Exactly is a JavaScript Variable? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Are They Variables or Objects? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Determining Variable Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Variable Data Storage, Memory and Operators. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
What is a Variable?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Bitwise Operators. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Understanding JSON Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Ajax, PHP and MySQL
Making HTTP Requests with Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
What are some of the things that Ajax can be used for?. . . . . . . . . . . . . . . . . . . . . . . . . 37
Inserting Form Values into MySQL Database on Submit . . . . . . . . . . . . . . . . . . . . . . . 39
Ajax: In Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
2

Prototype, JavaScript Objects and JSON
Javascript as a Prototype-based Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Classes and Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Dynamic Prototype-based Objects in JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
The this Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Creating a JavaScript Object Using JSON. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
More About JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Everything in JavaScript is an Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Compile Time and Run Time. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Prototype. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Learning JavaScript Object Definitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Are Variables Objects?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Using typeof in a Real-World Scenario. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
jQuery
Learning jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
What is JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
What Makes jQuery Worth Studying? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Including jQuery In Your Webpage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Where Do You Type jQuery Code?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Web App Initialization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Calling jQuery Commands. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
jQuery as a JavaScript Statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
The Basic Structure of jQuery Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Web Application Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Including jQuery In Your Source Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Including jQuery as an External CDN-based Files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
How To Always Include the Latest Version of jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Including jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
CSS Selectors
CSS Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
What Kind of Elements Can You Select? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Common CSS Selector Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
CSS Selector Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Using Colon-based CSS Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
I Selected an Element. What’s Next? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Making Complex Selections. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
More About CSS Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Selecting Things: A Bird’s Eye View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
3

Get in the Habit of Using Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Whose Children Are These?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Using :nth-child Selector. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
A Small Detail About Using :nth-child Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
First and Last Children . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Selecting by “empty” Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Hidden or Visible. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Even or Odd . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
jQuery Events
jQuery Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Two ways of attaching an event handler to an event. . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
How to Unbind an Event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Using toggle() Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
What is Event Capture and Event Bubbling? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Event Capture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Event Bubbling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
List of All jQuery Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Speeding Up jQuery
The first rule of Javascript Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
The second rule of Javascript Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100
Choosing the Right Context. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100
Practical Lessons
Practical jQuery Lessons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102
Lesson 1: The :not Selector.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102
Lesson 2: Storing Data Inside HTML Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106
Lesson 3: Callback Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108
Lesson 4: Using append and prepend methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108
Lesson 5: Using appendTo and prependTo methods . . . . . . . . . . . . . . . . . . . . . . . . . .109
Regular Expressions
Regular Expressions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .111
Using the RegExp object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113
Rules of the Pattern Parameter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114
Matching the Target String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .115
Regular Expression Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118
Final Note from the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120
4

Thought transcends matter.
When we looked inside an atom we found what we imagined would be
there. We also found smaller particles inside molecules when we looked.
We found exactly what we were looking for in the first place.
When we looked outside into the universe and into the infinite vastness
of space we found that it was expanding even faster.
I hope you agree that according to these observations it seems that we
often find that which we already believe to be there.
The fact that you have purchased this book indicates that you believe you
will learn something new.
When I was writing it I believed the same thing.
Greg Sidelnikov
greg.sidelnikov@gmail.com
5

Credits and Acknowledgements
This book has been written over a long period of time with the help of many volunteer idea
contributors. I am thankful for the support I have received from the subscribers to my jQuery
Tutorial Newsletter, the cornerstone and the turning point for writing this book.
As I was writing the book I have frequently shared the excerpts with my newsletter subscribers.
I have received feedback ranging from syntax and spelling corrections to requests for making
significant clarifications and source code improvements.
If you have contributed in the past and would like to appear on this list, please send me your
name, email address, your website (or social network link) and and an attachment of your contributions
in a text file.
Name Contribution
Yonghui Song
s_yh@hotmail.com
Link correction, document layout improvements, requests to increase
the depth of the JavaScript Bootcamp section, function closure
diagram correction (as also pointed out by many others. Thanks!)
I am thankful for having the support of these volunteer editors. Just because I am writing the
book doesn’t mean someone else couldn’t possibly help me. On the contrary, anyone is welcome
to make a contribution.
Electronic pusblishing format gives me the ability to update the book at any time. If you would
like to make a contribution please email me at greg.sidelnikov@gmail.com
1

Preface
The purpose of this book is to provide a sufficient amount of educational material to the passionate
person who is interested in learning more about creating dynamic websites. Perhaps
you have already studied HTML in the past and now you are curious about getting better at
adding dynamic elements to your web pages. Or perhaps you want to add features to one of
those big website projects that require a deeper understanding of JavaScript and jQuery.
jQuery is not a programming language. It is a library of functions written in the language
called JavaScript. In order to understand jQuery we must also understand JavaScript. On the
other hand, just to get started it is not necessary to know everything about JavaScript. This is
why much time was spent picking the gems out during the process of determining the subjects
to be included in this book.
This book was designed with education as number one priority. It was organized in such a way
that it can be thought of as a collection of principles and tutorials written to help web designers
and web developers reach a deeper understanding of creating websites.
Throughout the book practical examples are shown along with the solutions using jQuery
functions. Readers will get a solid review of most important concepts behind JavaScript programming.
An example of that would be attaching events to HTML elements which is explained
using both JavaScript and jQuery.
Even though this book offers a deep review of jQuery functionality, instead of looking at it
merely as a jQuery manual or a list of all jQuery functions, it would probably be better to see
it as a course covering a diverse set of website creation subjects. After reading this book you
will learn about proper web page construction from scratch, creating clickable CSS buttons,
selecting HTML elements using powerful jQuery selector syntax and much more. In other
words, the focus of this book lies on both: web design and web development. The popularity of
jQuery has a lot to do with offering functions and methods to work on both of these fronts.
This book is for many different kinds of audiences. In order to suit both beginners and skilled
programmers, complex subjects are described using simple language; because experts already
understand these subjects in depth and need a simple overview, and simple subjects are described
using additional detail; because beginners are looking for in-depth information.
On the next page we will go over a few details that will help you understand the presentation
format of this book and make it easier for you to go through the book.
2

Introduction
What’s an educational book anyway? Any educational book is like an airport runway. It’s gets
you somewhere. After reading this book you will be ready to continue experimenting with
new knowledge and discover things that are not even mentioned in the book itself. I believe
the function of any educational material is to give direction.
The soul of a book can be found in the content it will encompass. Choosing the content for
this book has been a tremendously time consuming task. Designed as a tool for education this
book gives you enough information to move you forward and become a better JavaScript programmer
and web designer.
Even though very simple examples are used throughout the length of this book, it does not
mean that this book has no value to someone with an advanced understanding of JavaScript.
Simple tutorials are much more potent than elaborate ones.
This book is for anyone who wants to learn jQuery and JavaScript. It is also an invitation to
start taking a look at things from a slightly different perspective. I believe programmers of
any skill level will find this book useful. Visual diagrams presented throughout the book are
designed to help you memorize important concepts and in the end, reach the kind of understanding
that would make you comfortable with creating your own dynamic websites and web
applications.
You can’t please everyone. But when making this book I believed that it was possible to make
an intelligent attempt at creating a book which would be useful to beginners and experienced
programmers, without having to make a big compromise. For this reason, while writing this
book I have developed something I now refer to as the mirror technique.
The Mirror Technique
1. Simple subjects will be explained in great detail.
2. Difficult subjects will be explained in intentionally simplified language.
The requirement of learning JavaScript consists of understanding simple but also complex subjects.
The mirror technique is a set of two rules with regard to complexity of material. Sticking
to this logic, I managed to keep the content of this book neutral and increase audience appeal.
This way everyone gets a little of everything and the book remains in a neutral zone. Still, it’s
probably fair to say that this book is best suited for beginner-to-intermediate level programmers.
I try to create a balance, but this is the group that will find this book helpful the most.
In addition, over the years it has become apparent to me that most people who are looking for
computer tutorials are beginners. So it’s wise to put a little more emphasis on writing for that
group in particular.
3

A Lesson in Creativity
The web developer is responsible not only for writing code, but understanding the structure of
the entire web application. Part of the creative process is understanding web application composition.
The HTML, CSS and JavaScript files that go into a website.
When it comes to creating a great work of art, whether it’s a website, an interactive computer
simulation, a game, or anything that has to do with any programming language, the language
itself is only half of the story. This is why it’s so important to be able to integrate yourself into
this creative process rather than thinking in terms of writing the code.
If you want to create extraordinary things, just understanding jQuery won’t matter. What will
matter is how creative you are at finding new ways of putting things together. Knowing the
basics of web application composition is also very important.
I made this animation to demonstrate how little jQuery and JavaScript code is required to create
something interesting.
View this demo online:
www.learnjquery.org/demos/3d-css.html
Don’t worry if you don’t understand rendering using 3D CSS. We will cover 3D CSS later on in
the book. But as you can see, interesting things can be made with little jQuery code.
Study the composition of this application. If you don’t understand how that code works yet, no
problem! This is what the rest of this book is all about.
4

Thinking About Creating Websites
Now that we understand the basics behind web application composition, let’s take a look at
what else a web developer usually thinks about when creating an application or a website. As
simple as it is, many decisions have gone into creating the Seaguls Detected demo.
For example, finding a good cloud texture was important. Another crucial detail was choosing
the 3D angles for the sky and the ground. In this case in particular I had to think in 3D.
Change the angle by a few degrees higher or lower, and it doesn’t look right anymore.
But jQuery’s simple syntax was instrumental in making adjustments quickly, which eventually
led to the final version of the code. If we don’t count creating the graphic used in this demo, it
would only take us about an hour or so to write the code.
The jQuery library simplifies JavaScript programming. It gives us an easier syntax and an access
to functions that make it easy to get things done. For example, to move an HTML element
such as DIV with id “box“ to a new position on the screen the jQuery command would be:
jQuery Object
CSS Selector
jQuery(‘div#box’).css(‘left’, ‘100px’);
jQuery function
HTML element attribute
New position
jQuery has a very simple syntax and a set of powerful CSS selectors. They allow us to elegantly
select any set of HTML elements and then execute some type of a function on that selection.
Would you like to rotate all DIV elements on your page? Just one? Or would you like to change
the background color of all INPUT elements to black? How long should this animation last?
This it the type of thinking that is involved in adding dynamic features to your website using
the jQuery library.
How fast should the background image scroll to simulate the “flying through space” effect?
When to start or stop seagull animation? All these are the questions that can only be answered
by approaching the problem with a great deal of intuitive thinking. And jQuery makes the wall
between writing code and creativity thinner.
In order to create this demo I used the code as a paintbrush, not as a monotone logical process.
I envisioned the results based on my knowledge of jQuery, which allowed me to create
dramatic animations with just a few lines of code.
5

I love jQuery because it allows me to make fast decisions. How many lines of code would I
need to write in JavaScript in order to achieve these effects? More than I would like to. This
minimalist nature of jQuery syntax helps us become much more efficient at getting things
done.
It also gives me an assurance that the code written just once will run in more than one browser.
jQuery is an ideal framework for creative projects. Especially ones that you need to complete
and test quickly.
The decisions such as the ones that went into “Seagulls Detected” demo, the outcome of which
is a dramatic visual effect, really transcend the results of your work as a programmer. The end
result becomes much greater than just the code, which, in isolation, seems monotone and boring.
People who write code are not machines. But they can be, if they look at programming as just
writing the code. But there is also a human element. Exercising your creative thought and putting
ideas into action will determine quality of your work.
It is this type of thinking I recommend that you look into developing. I hope that by the end of
reading this book I have inspired you to see things using the creative approach.
It’s important to understand this. Don’t try to think that the tools you are using will be the
ones responsible for the quality of your work. Try to see how you can improve yourself, your
creativity and your knowledge. And the quality of the results will improve as well.
The jQuery code for this demo is incredibly compact – just under 100 lines you can see in the
source code below. Yet it creates so much. This is the power behind jQuery that will allow you
to create your own websites and games with less code.
To see the entire source code of the “Seagulls Detected” demo
copy this hyperlink into your browser’s address bar:
view-source:http://www.learnjquery.org/demos/3d-css.html
To harness the power of jQuery, you don’t have to know everything about it. You just need to
know the most powerful CSS selectors and functions. Also you will need to know about the
order in which to pass arguments to these functions.
Even learning just a few key principles will make a powerful impact on your ability to become
much more efficient at creating dynamic websites, games or applications. Try to memorize
them once you find them in this book. Create your own demos to see what different jQuery
functions do. Experiment. Don’t copy and paste code. Challenge your creativity.
6

Logical vs. Intuitive
What is your programming method? Do you care about formatting your code more than the
results it produces on the screen? Four spaces before each statement or two? Should I use tabs
instead of space bar to space my code? Probably not.
After making modifications to parameters that are to do with screen space, how good are you
at visualizing the true distance between 100px and 150px when you finally hit refresh and it
is actually rendered on the screen? How many times will you hit refresh before the layout is
aligned and is pixel-perfect?
Web designers who are also web developers usually write code while simultaneously envisioning
what the outcome of that code is going to be on the screen. The result is a visualization of
computer code they have written. It’s like they paint with computer commands and the language
is their paintbrush.
That’s what I love about web development. It forges a connection between the logic and visualization
of the outcome. It also has a great deal to do with the intuitive process. Web development
and programming don’t need to be excluded from it.
But let’s not fool ourselves. Writing code can also be a great exercise in logic. And it’s not always
fun and games.
Luckily, many jQuery plug-ins and JavaScript functions have already been written. Don’t hesitate
to use other people’s work. Don’t forget to give them credit. In the end, what matters is the
result... your work, what is perceived by the person who is using your software.
In the end, nobody cares about how you made something. People care only about the experience
of using your software. I will put my best effort into explaining the how in this book. The
what is up to you.
I hope that you will find my approach to explaining concepts that are mostly, or even entirely
logical, easy to follow. My goal in such cases is to always break down the problem into small
pieces.
7

Improving Page Load Performance
The subject of page load optimization is comprehensive. An entire book could be written just
about that. In fact Steve Souders had written such a book. It’s called High Performance Web
Sites.
He also has a phenomenal website www.stevesouders.com where you can find much more
about the process of optimizing your website as it’s being downloaded.
We already discussed the basic HTML page structure. There are some things you can do to
optimize your site. But it’s not always easy to know whether you’re making the right choice.
What if some browsers don’t support a technique that is not documented? What if inserting
JavaScript at the wrong place in your page slows performance? It can happen.
There has been a fair deal of debate about whether moving JavaScript code to the very bottom
of your HTML page is a good idea or not. The answer is that in some cases it is, in others it’s
not. In many cases, it is the right thing to do.
In order to understand this, let’s first analyze what the developers of HTML themselves can tell
us about this issue. Let’s see what the original HTML specification tells us:
http://www.w3.org/TR/1999/REC-html401-19991224/sgml/dtd.html
In other words, this is what it tells us:
1. SCRIPT is allowed directly inside the BODY tag
2. Directly inside HEAD (of course)
3. Directly inside BLOCKQUOTE
4. Directly inside FORM
5. Within inline elements, which includes: span, sub, sup, a, p and the list goes on.
And there are many other rules.
We’re not interested in JavaScript code in inline elements right now. Of course you can use
JavaScript there inside HTML attributes like onclick or onmouseover.
Number 1 is of most concern to us. If SCRIPT tag is allowed inside BODY tag, that means that
it is also allowed at the very bottom of the page right before closing the /BODY tag. This can
be helpful.
But wait. It may not always be a good idea to simply move all of your JavaScript code or files
to the bottom of the page. In some cases doing this may actually make your page load slower.
Next page will briefly outline some details you should know.
8

Moving External SCRIPT Files to the Bottom of the Page.
In contrast to a program that executes as a series of functions, one after another, a website is
governed by real-time events that execute at irregular intervals which cannot always be relied
on to occur in the same order.
This unpredictable manner in which each part of your website executes contributes to the confusion
around the subject of choosing the proper location for SCRIPT tags and the files they
specify within the SRC attribute.
If you put your SCRIPT tags at the very end of the page, it is possible that a user may see part
of the page including an element, such as an HTML button, with a JavaScript function call
defined in SCRIPT tags that have not been loaded yet - because they are at the bottom of the
page in the first place.
Externally defined JavaScript files could be hosted somewhere else, or on your own web host
that may stutter for a moment. You have probably already witnessed this before that sometimes
HTTP requests take time, stalling the entire web-page. This can occur regardless of
whether your SCRIPT file is located within the HEAD tag or at the bottom of the page just
before the closing /BODY tag.
This can happen even on a fast host server, especially one that is not configured for receiving
and processing a sufficient number of HTTP requests per second. Browser design should also
be taken in consideration.
Remember that every single time you add a new SCRIPT tag with a SRC location, a new
HTTP request will be created for that page. What will happen if, when we include external
files at the bottom of the page, that these requests take longer to load than the HTML page
itself?
Imagine that you have HTML button on a page. A SCRIPT tag which includes a file linking to
the definition of this button’s function is now placed to the bottom of the page. Now that it is at
the bottom, the page will indeed load faster, but HTTP requests still have to execute. The page
HTML has finished loading, but the JavaScript code containing your button functionality is
yet to be loaded.
What can we expect in a situation such as this? The result is that the user pushes a button
whose functionality is still loading from those HTTP requests. The user gets a JavaScript error
message, because the browser can’t find the script yet.
The general guideline, therefore, is that unless there is a good reason to do otherwise, place
your SCRIPT tags containing important on-page functionality inside the HEAD tag. All
others can go to the bottom.
9

Determining the Placement of Internal JavaScript Code
There are cases when you want to use JavaScript code directly inside the page. You are probably
already familiar with Google Analytics which offers statistics tracking JavaScript code.
They recommend that you place this code right before the closing /BODY tag. This is different
from SCRIPT tags.
In this context it is absolutely reasonable, and even necessary, to place your code in a place toward
the end of the page if you are interested in decreasing the perceived time it takes for your
page to load.
It’s convenient in this case because of the context in which the code is used. The HTTP requests
are still being made, but only when the loading process reaches the bottom of the page.
Google Analytics should not consider a page as being finished loading completely unless the
bottom of the page has been reached. And it has nothing to do with on-page elements. This
code does not affect any HTML markup. In this context it works.
* * *
External .js files that are not related to the functionality of on-page elements that are currently
being loaded can be moved to the bottom. When you have DHTML features that are unlikely
to be manipulated until after the page loads and renders (such as menus that are hidden by default,)
moving the corresponding JavaScript code to the bottom of the page is the best solution.
If, on the other hand, you have internal JavaScript code that is part of rendering the page, like
drawing on canvas, then I recommend moving the external script into the HTML document
and placing it right above the related HTML elements.
Note that for high-performance, high-traffic web applications, these rules may change. Sometimes
you just have to use knowledge of your web application in order to figure out the best
placement for your JavaScript code.
When trying to optimize your own website for page load performance, think about the context
in which your JavaScript code is being used.
This should help you understand the ideal place for your SCRIPT tags, whether it is at the
bottom of the page, right before an on-page element that requires that code or inside the
HEAD tag.
Profile your code. Use tools like Google Chrome’s JavaScript Console to determine whether
the changes you have made increase or decrease your page load time.
10

The Importance of Understanding JavaScript
jQuery is written in JavaScript. It is therefore important to understand at least some basic
principles required for writing JavaScript code. You can understand people who are quick to
jump into fiddling with jQuery right away because jQuery syntax is so easy to learn. But this is
probably not a good idea.
It would still be possible to start using jQuery without knowing these JavaScript principles but
I don’t recommend it. If we don’t know what a nameless function and events are, how could
we hope to understand the following statements that are so often seen in jQuery?
$(document).ready(function(){ ... });
(function($){ ... })(jQuery);
In the following JavaScript chapters we won’t cover all aspects of JavaScript. The focus will be
only on the most important concepts that relate to jQuery programming. Knowing what objects
are is an incredibly important concept. Also, understanding the diversity of definitions
and different ways in which JavaScript allows us to build our program becomes important.
Some people jump into jQuery programming head first, without knowing anything at all about
JavaScript. Try to avoid doing that. Instead, focus on understanding the concepts explained
in the following book sections and once armed with this knowledge I guarantee that you will
have a better grasp on jQuery.
Most of the time these techniques will probably work, even if your code is being written in a
completely wrong way. This is largely due to the great flexibility we are offered by programming
languages designed for web development. But eventually you will want to update your
code, or add something to it. And that’s when bigger problems will be introduced.
Actually understanding the code that you write has a positive effect on increasing productivity.
Moreover, proper code is fun to write because understanding the rules gives you the power to
write great programs that work exactly in the way you want them to.
You may continue pursuing to study JavaScript after you finish reading this book. You can
browse through all available functions and definitions of JavaScript but it’s likely that you’re to
never use some of any of them at all. This will depend on the needs of your website or web application
project.
The designers of any language or framework focus on the way in which it will be used by the
user of that language (the programmer.) Sometimes a language feature can seem like a bug
unless a mutual understanding is achieved between the programmer and the designers of that
language. I hope that this book will become helpful in drawing that bridge.
11

JavaScript
1. The only language people start using without actually learning it.
2. Probably the World’s most misunderstood programming language.
Statements are According to Douglas Crockford:
https://www.youtube.com/watch?v=hQVTIJBZook
12

The goal of JavaScript Boot Camp, the next section of the book, is to focus your attention on
the most important JavaScript concepts.
The concepts you will learn from the pages are very basic. They are designed to get you up to
speed in no time. Learn, understand and memorize them. Use this knowledge to increase efficiency
of your work ethic as a web developer in your own projects.
JavaScript Boot Camp
Welcome to JavaScript boot camp. Who attends boot camps? People who want to quickly get
up to speed with a set of basic ideas and become disciplined using them in practice.
The content in the next chapter will go over some of the most important concepts of programming
in JavaScript. It doesn’t pretend to be comprehensive by any definition of the word. The
goal is to increase awareness of the most significant concepts in order to prepare you for understanding
jQuery.
13

What is JavaScript?
Web designers use JavaScript to add dynamic function to websites. JavaScript can be used to
manipulate position of HTML elements, validate web forms and create cookies. It’s a relatively
easy language to learn. In the recent years JavaScript has gained increased popularity among
larger circles of web developers.
It is important to understand JavaScript now more than ever. As the web begins to rely more
on dynamic functionality, interactive applications, HTML games and even 3D graphics in
browsers, your knowledge of JavaScript and ability to use it in these situations determines your
effectiveness as a web developer of dynamic web applications, user interfaces and websites.
Before we go into exploring some of the fundamental JavaScript concepts, let’s take a brief look
at what JavaScript is.
JavaScript is a multi-paradigm programming language. The word paradigm takes its origin
from the Greek word παράδειγμα (paradeigma.) It means a pattern. The phrase multi-paradigm
programming language, then, is used in reference to a language that supports more than
one code pattern, in other words, style.
Some computer languages are designed with one type of a pattern, or paradigm, in mind. For
example, a logical programming language such as Prolog was created strictly for working with
mathematical equations. It is suitable for designing artificial intelligence algorithms.
Other popular types of programming styles (or paradigms) include functional, object-oriented
and event-driven, just to name a few. What’s important to understand is that computer
programming languages can follow more than one paradigm and JavaScript is one of those
languages. Understanding all programming paradigms is beyond the scope of this book, but
it’s worth mentioning here because JavaScript supports a few of them.
JavaScript was designed in order to be used in many different ways. JavaScript can be used as
an object-oriented language (with limitations), as a functional language and as an event-driven
language. It can probably be said that in a way JavaScript supports the logical paradigm too,
because it provides a library stored in an object called Math, which is used for mathematical
operations.
Even though JavaScript supports some object-oriented programming principles it really is not
an object-oriented programming language in itself. In fact, and even though everything in
JavaScript is an object, people with C++ background would find JavaScript lacking some important
object-oriented functionality they are used to, for example an easy way to work with
concepts such as class inheritance (though not completely impossible) and interfaces.
Still, objects play a large role in JavaScript functionality. Everything in JavaScript is an object.
14

Where to Place JavaScript Code?
In the section Improving Page Load Performance by Juggling Include Files we have briefly discussed
JavaScript placement within an HTML page. Let’s go over it again because the following
discussion will dive into source code examples.
JavaScript code is written inside tags. It can also be written directly inside a separate
file with .js extension, for example script.js is a popular one among web developers. External
files like script.js only contain JavaScript code, not HTML or any other type of code. Internal
instances of JavaScript are written directly into your HTML page. In both cases, JavaScript
is added using the tag:
1. To include an external JavaScript file, write this within the tag:
2. To execute JavaScript code located directly inside an HTML page, write:
alert(“Hello There.”);
The code above will execute as it is being read at the location within your HTML page where
you open and close your SCRIPT tags. In this example, the command alert(“Hello There.”);
will execute. It will pop up an alert message box displaying the message “Hello There.”
Everything is an Object
An object is a concept in computer science that refers to an entity capable of being manipulated
by the commands of a computer programming language. Even variables in JavaScript are
objects.
You may already be familiar with variables. A variable can be a numeric value such as 10, assigned
to a literal name such as apples. For example, to create this variable you would write the
following code:
var apples = 10;
It could be said that the variable called apple is assigned the value of 10. This variable in particular
can also be called an integer, because it is assigned a numeric value. It would be possible
to create a variable of type string by running the following code:
var color = “green”;
15

As you can see, variables can be assigned values of different types. For example strings or numbers,
and there are others. A string is simply a collection of characters encased by two single
or double quotes. You could have written var color = ‘green’; (notice the single quotes) and it
would be an exact equivalent to the example above.
But what the apples and color variables have in common is that both are objects in JavaScript.
In the beginning of this section we determined that objects are entities that can be manipulated
by commands of a programming language. What could be an example of this with regard to
the two variables discussed above? Let’s first take a look at the basic behavior of variables and
their values.
You can rename the variable color, that has already been defined, from “green” to “red” by
simply re-assigning the value like this:
color = “red”;
Note that we are no longer using the keyword var. The variable has already been created.
However, even to create a variable in JavaScript, it is not necessary to use the var keyword in
the first place. I do recommend, however, that every time you create a variable you use the var
keyword. Consequent value re-assignment operations on this variable don’t have to include it.
It’s also possible to assign a value of one variable to another. You can find out the length of the
value stored in variable color by storing it in another variable len:
var len = color.length;
But wait, what is this dot? And where did length come from? The dot (.) operator is the access
point for the properties of the variable, or object named color. You see, when we created the
variable color, JavaScript created an entire object for us, which from the moment of its creation
will also store its properties. These properties are determined by the internal definition of the
string object in JavaScript.
Interestingly, in addition to the properties created by JavaScript for these variables, we can also
add our own properties to them. More on this later.
When we assigned a string “red” to this variable, JavaScript automatically created an object of
type String for us. Moreover, it counted the number of characters we typed and stored that
number in the property called length.
Also, in the earlier example where we created a variable called apples, an object of type Integer
was created. All of this is done by JavaScript behind the scenes. We just use the syntax of JavaScript
to manipulate these objects.
16

It’s not important always necessary to understand that variables are actually objects. It is possible
to write programs thinking of variables as variables. However, as you learn more and enable
yourself to write more complex programs the knowledge of objects becomes important.
Functions as Objects
Even functions in JavaScript are objects. Below, we will consider the function add. add is the
name of the function. You can also think of it as an object called add.
Let’s consider this simple example:
function add(a, b)
{
var result = a + b;
return result;
}
This is a function definition. To define a function we start with the keyword function. This is
followed by a custom name. The point of this function is to add two numbers. You are the one
who determines the purpose, and therefore, the name of your new function.
You will write the logic of the code of this function. In this example we are adding two numbers
and return the result.
Notice a and b in parenthesis just after the function name. These two values will be “passed” to
the function at the time of program execution. Below you will see that I am passing the arbitrary
numbers 10 and 5 to this function.
Of course we are not limited to just two parameters. We could have just one paramter a or
many more if required. Multiple parameters are separated by comma, so we have add(a, b).
Within the function definition itself a and b are called parameters. We use these parameters to
determine what this function will do with them. But when we execute the function, the actual
values passed as parameters are called arguments. It’s easy to memorize because a parameter is
always represented by one letter or word but an argument can be a statement like 1 + 2. In the
example below 10 and 5 are this function’s arguments. They are passed as parameters a and b.
var result = add(10, 5);
By the time this statement finishes executing the variable result will store the return value of
15 because 10 + 5 is 15. Inside the function, the value is returned using the return keyword.
Notice that return is a reserved keyword. We cannot have a variable called return. In other
words the code var return = 12; will generate a syntax error.
17

The example above will first execute the function add and only then it will assign the returned
value to the variable called result. Function add is executed with the two passed arguments:
a=10 and b=5. The result, which is 15 will be then assigned to the variable called result.
We read books written in English from left to right. We also write code from left to right and at
first it appears to be natural to think that the first thing that happens is the value assignment to
the variable result. But that’s not true. Logically, the function will execute first.
It’s important to notice the direction of execution flow in a JavaScript statement. All code in
a singled out statement is executed from right to left. The opposite direction in which it was
written.
In other words, the function add is executed first. The function calculates and returns a new
value. Only then, this value is then assigned to the variable result.
Notice that we can execute the function without variable assignment as in:
add(10, 5);
Notice the missing var result = assignment. The function would be executed in memory. No
variable assignment would take place. But in this case in particular, it wouldn’t really make
much sense because the function returns a value which is the main purpose of this function.
In this case, the return value of the calculation 10 + 5 (or 15) would be returned but because
we are not doing anything with it, the result will simply vanish. Often, the purpose of a function
is to return a value but it depends on circumstances.
A function doesn’t always have to return a value. It can be executed as a stand-alone block of
code. An example of a function that doesn’t have to return a value is jQuery’s css or animate.
These two function simply manipulate an HTML element on the screen.
Functions and variables are the two of the most common building blocks of a JavaScript program.
When learning jQuery you will notice that for the most part you will be calling functions
that are already written. jQuery offers a number of interesting functions to work with the
HTML code of your website.
But before we get into jQuery there are still a few important concepts you need to understand.
We will continue exploring these concepts throughout the JavaScript Bootcamp chapter.
18

Scope
In order to understand function closures, one of the next subjects in the book, you must first
have an understanding of the concept of scope. Scope is where things are happening in your
program. Scope is usually determined by the { and } brackets. For example, the function “add”
we discussed earlier uses these brackets to define its scope. In other words, when the function
is executed, what is executed is the code within that scope.
We can call the function twice or three times, and again, over and over, the code contained
in the scope of that function will be executed. When a function is executed, a special part of
memory is allocated into which the function is loaded. Then this code is executed.
Unfortunately, the low-level details of computer program execution flow is not a part of this
book, and you don’t really need to know them to be a JavaScript or jQuery programmer. But
it’s an interesting subject you may want to explore on your own.
The most important concept you do have to understand with regard to scope, is that variables
in a scope are not visible to other scopes in a program.
What does not visible mean?
For example, variables defined inside a function scope only work within that function’s scope.
You can’t work with them from within other functions. That’s why variables can be passed to
functions as parameters, instead.
Most of the time, you will not be able to recall variables across scopes. In other words, the
scope the variable was created in, is the only scope it can be used in. But there is an exception,
and that is when we use a function closure, a concept we will define in a few moments.
Remember that all variables in the global scope are visible from everywhere. The global scope
is not limited to any brackets, it exists at the root of the program, “above” all other scopes.
Global Scope
Global scope is the root of your program. What you define in the global scope, things like
functions, variables, arrays, and so forth... will be visible from anywhere inside your program,
including, within all defined functions.
Also, on the contrary, variables defined inside a function cannot be visible in the global scope,
they are only visible within that function. Use scope to your advantage to organize data of your
program. Many programmers don’t even know that the concept of scope exists, they just follow
their instinct. There is nothing wrong with that. But being aware of it can be important if
you are looking to improve your understanding of writing code efficiently.
19

Only variables and events should be initialized inside $(document).ready, not functions.
Though, this is not a rule! However, if you do that, certain things will occur that will prevent
you from using the function in the global scope. In other words, function definitions are limited
to the scope they are defined in, just like variables. We know that a scope is any place in
your JavaScript program delimited by the { ... } brackets.
I have received a question from one of my newsletters subscribers about defining a function
inside $(document).ready(). It is an event that takes place after all DOM (all HTML elements)
are physically loaded into the web page... so essentially what happens is that a function is defined
inside the anonymous function that runs when this DOM event occurs. The function is
now limited to the scope of the anonymous function attached to that event. Let’s take a look:
$(document).ready(function()
{
function a() { alert(‘hello’); }
a(); // here it works, because it was defined in the same scope
}
// But here it produces an error -
// The function a() cannot be called outside of the scope it is defined in.
a(); // error: undefined function
In order to remedy this problem, we stick to defining all functions outside of the event This
means they will become available to call from the entire program, even within $(document).
ready... as well as throughout the whole scope of the program, the global scope.
function a() { alert(‘hello’); } // let’s define the function in the global scope, instead.
$(document).ready(function()
{
a(); // here it works
}
a(); // the function now works here as well
20

Function Closures - What Are They?
When working with any computer code for a long period of time, it is inevitable that you will
come across situations when specific type of logic is required in order to solve a problem.
Some of these situations are difficult to explain, unless you already understand the building
blocks of a programming language. But don’t worry, these concepts only seem difficult at first.
As you practice writing code these concepts will start to feel like a second nature.
In computer programming languages, even outside of JavaScript, there are rules created by the
developers of those languages that help us use all kinds of logical constructs that, in creative
ways, help us write computer code. Sometimes programmers use these rules to create logical
code structures. And sometimes they become adopted because they are so useful.
What are function closures and why is it important to understand them?
Remember that a closure can exist in any other language, not just JavaScript. It’s really just a
concept. Unlike a variable, or an object, a closure is more like a theoretical concept rather than
a feature of the language.
As different languages do not always have a common definition of the lexical environment,
their definitions of closure may also vary.
Let me give you an example of a function closure in JavaScript and then we’ll take a look at
what makes it special. Below is diagram that makes a visual connection between places in
memory shared by the same objects (or variables).
Flip over to the next page to see the diagram of the classic function closure pattern.
21

Notice that variables a and b are created in global scope of the program, outside of the function.
The actual assignment of these variables to a nameless function takes place inside the
scope of the function foo(). This means that now, a and b refer to a memory address of a function
within a function:
Let’s call the function foo(); to assign the variables to functions. When we do this, the name of
the variable itself becomes a function:
a = function() { /* do something here*/ }
After this assignment, calling the function is possible by just saying a(); What used to be a
variable is now a function. In JavaScript it’s perfectly legal to reassign a variable to a new value,
even if this new value is of type different from the type of the original variable. This is why it is
often said that JavaScript data types are typeless. The type is not defined explicitly.
As you can see, it’s possible to assign a variable to a function. Moreover, in this scenario
the function doesn’t even have a name. What’s going on here? JavaScript allows us to create
namesless functions. They are also known as anonymous functions.
These anonymous functions are extremely useful when we need to create a function “on the
fly” without having to define it prior to executing it.
Using anonymous functions on the fly is a common technique. As you continue studying
JavaScript you will find out that anonymous functions can be used in many different contexts.
For now let’s focus again on the diagram explaining the function closure.
22

Following the chart, you can see that the variables a and b are assigned to anonymous functions
created within the scope of another function called foo(); When this happens, the variables
in global scope will now actually be live references to the memory location inside foo();
even after the function has finished executing.
Calling a(); and b(); will execute the contents of the anonymous functions assigned to them
within foo(); Remember that by simply defining foo(); these associates are not yet made. The
function foo() must be executed at least to make these connections.
Now this is where it gets more interesting. The functions a(); and b(); are assigned within foo()
and can now be used outside of foo(). But what do these functions do? They manipulate a variable
defined inside the function scope of the function foo() itself.
This means that when we call a(); or b(); in the global scope, we are still working with the references
to the variable x, which itself resides within the scope of the function foo().
A good metaphor for this would be that a(); and b(); are sort of like tweezers that you use to
reach inside the scope of foo(); from the global scope. These functions can manipulate memory
(in this case the variable called x) defined inside foo().
This functionality is amazingly useful to make our objects persist. Objects such as variables
and functions can be stored within another “container” function such as foo(); in this example.
But wait, isn’t foo() also an object, as we discussed earlier? It is. So you can see now, how objects
can contain other objects inside them.
This cascading property of objects is very important. Storing objects inside other objects is
an incredibly useful concept used to design computer software in any language that supports
objects (aka, Object-oriented programming languages.)
JavaScript is not fully an Object-Oriented Programming (OOP) language, but it does support
this “matryoshka”-like quality of objects, where they can be stored within one another. Without
this principle, function closures would not make much sense.
23

What Exactly is a JavaScript Variable?
Learning isn’t always about explaining new complex subjects. Sometimes it’s about bringing to
your attention the deeper details of the already known. In-depth understanding makes programming
more interesting. It’s easy to think that you know everything about variables. But
there are many details that often slip from the viewfinder of an untrained eye.
While working on Revision Two of this book, I have added more chapters to the JavaScript
Bootcamp to talk more about the basics of JavaScript programming. One of the subjects deals
with JavaScript variables.
One of the goals with my writing is to give a deeper insight into simple concepts. I believe
that by reaching down to the very reason for why something works a certain way the reader is
given an opportunity to become a better JavaScript programmer.
When teaching a computer language such as JavaScript numerous tutorials talk about using
variables in terms of showing how they work. But little is said about what they are. We are
often told that we can define variables using the var keyword. But understanding what they are
and where they come from gives us a deeper insight into JavaScript programming. In fact,
many JavaScript concepts, such as objects, are much easier to understand if we can compare
them with variables.
Are They Variables or Objects?
* * *
Because everything in JavaScript is an object this sometimes creates confusion among the beginners
who are seeking to understand JavaScript data types. If everything is an object, then
what is a variable? And if a variable is indeed an object, then why are we using the keyword
named var to define it? Wouldn’t something like obj be more appropriate?
The answers to such questions are often determined by creators of the language specification
itself. The fact that someone decided to create a specification does not guarante that this specification
will be ideal. Regardless, when it comes to any data in any language, it is always tied to
the same concept: all data is stored in computer memory on the microprocessor.
Keep in mind that all variables are physically stored in computer memory at random addresses.
When we access a variable, we access the part of computer memory it is stored in. A variable
is stored at a unique and random memory address chosen by the operating system.
We’ll get to how variables are physically stored in computer memory in just a moment.
24

Even though it is possible to omit the var keyword from a variable definition, I recommend to
always define your variable with the var keyword:
var apples = 1;
Let’s take a look at some of the basic principles behind variable definitions:
1. A variable is often (but not always) a temporary storage of computer program data.
2. Variables are used to store and manipulate data during program life cycle.
3. The var keyword can be ommited from definition. But doing so is not recommended.
4. The type of a JavaScript variable can be integer, string, boolean, function, array or JSON.
5. In JavaScript a variable is also an object.
6. The variable allocates enough physical computer memory to store the specified value.
Variables are not unique to JavaScript. In other languages variables are created using all kinds
of keywords. In PHP a variable name is prepended a dollar sign as in $apple. In C++, each
different type of a variable has its own keyword. For example int for an integer type, char for
a text character or short for “half ” a variable which is 2 bytes in length. 4 bytes would be a full
32 bit set. On a 64-bit computer processor, an integer is 64-bit long.
In JavaScript we use the var keyword to define a variable of any type. How does JavaScript
determine the type of a variable being created? The type is defined by the assigned value. If we
say that apples = 1, JavaScript automatically creates a variable of type integer.
Determining Variable Type
JavaScript variable definitions are typeless. This means that we can create any type of a variable
and during the program lifecycle we can overwrite it by assigning a new value to it. This new
value doesn’t have to be of the same type as the original. In comparison, this wouldn’t be true
in languages like C++, where a variable of type integer can only be assigned an integer value.
Typeless variables such as ones used by JavaScript can be reassigned, or turned into a different
type using the equal sign. In C++ this process is known as type casting and requires manual
action. But this is completely legal in JavaScript and happens automatically. To check the type
of a variable at any point of its existence, we can use the typeof function:
Parameter Returned result (as string)
typeof(1) “number“
typeof(“hello“) “string”
typeof(true) “boolean”
typeof(object) “object”
typeof(null) “null”
typeof(orange) “undefined” given that the variable named orange does not exist (was never defined)
25

A variable allocates enough data storage in memory to store its value:
Random Access Memory.
RAM provides the computer program with
memory reserved for variable definitions
and other data storage. All JavaScript variables
are stored in computer memory.
RAM
Variables are created and stored inside
the computer processor.
When a variable is defined, depending
on the type of the computer processor, a
number of bytes will be allocated to store
the value specified by the programmer.
In this case, enough memory to store the
integer value 1 will be allocated.
On a 32-bit processor, 32 bits of space
will be allocated to store this number. In
binary format, it looks like this:
00000000 00000000 00000000 00000001
The actual data is stored as 0s and 1s on the microchip. Even though in the example above the
variable named apple equals 1, on a 32-bit processor a set of 32 0s is created. We’ll get to binary
logic in a bit. For now just think of variables as values stored at a unique memory address.
The truth is that even variables defined with the var keyword are objects. But because it is
possible to start using variables to manipulate data by learning their simple syntax, many
people never bother studying them with a greater degree of depth.
It is fair to say that a variable itself is not an object. It is merely a name/handle to the object.
An object is the data used in your program. Therefore, it makes sense that a variable can refer
to different types of objects like strings, integers, functions, arrays and objects created using
the JSON notation. We will continue discussing JavaScript objects later in the book.
Variable Data Storage, Memory and Operators
You are probably already familiar with JavaScript operators like the plus, minus and multiplication
signs. They allow us to do common logical operations on integers and even strings. But
as we just discussed above, the nature of a variable is in its physical representation in memory.
In memory, a variable is not stored as a name as seen in a JavaScript program. The name apple
exists only as an alias to the physical location in memory on the microchip. This value is represented
as a long string of 0s and 1s on the microchip at a unuque memory address. Knowing
this becomes incredibly important if we are to understand how bitwise operators work.
26

We’ll get to the bitwise operators in a following section of the book.
The actual value of a variable exists at a unique address in memory. The name apple is an alias
to that address. For us humans it is easier to communicate in words and phrases than in numbers,
like computers do. The name apple is a reference to a unique address that could look
something like 0xFA074315 in hexadecimal (base 16) number system.
In other words, var apple = 1, is the same thing as 0xFA074315 = 1. This hexadecimal address
is chosen by the operating system at random, as our program executes. It is the RAM address.
This makes sense now why this memory is called RAM, or Random Access Memory. It’s because
variables and other computer program data is stored at a temporary random address.
Let’s do a simple review to show how this relates to JavaScript code. Let’s assume that we have a
variable var apple = 1. Let’s compare it to actual representation in computer memory:
0xFA074315
var apple = 1; is the same as 00000000 00000000 00000000 000000001
Even though the stored value is 1, all those other zeros are still part of the same integer called
apple. They are just not being used. This is because the minimum size of an integer on a 32-bit
computer is 32 bits long. This is just how data is stored in computer memory. The 0s and 1s
are actual physical switches on the microprocessor. Of course if you are on a computer with a
64-bit processor, the integer would consist of 64 bits or 8 bytes. This gives us more processing
power but that’s beyond the subject of this book.
That’s a lot of 0s. To access or manipulate them, we can use the bitwise operators. But before
we get to bitwise operators its essential to understand how binary numbers work.
In order to understand binary numbers it’s a good idea to start with an example that explains
what happens when we increment a value of a binary number by one unit. There is a certain
pattern that forms. I broke down the proecss of incrementing a binary number into steps.
Shortly, we will take a look at these steps in detail. However, before looking at these diagrams
you should understand a few important things.
Let’s increment the binary value 00000001 (which is 1 in decimal) by one unit.
00000001 becomes 00000010
This is 1 in decimal This is 2 in decimal
1. Binary increment by one unit is done by shifting the leading bit to the left.
2. As the leading bit continues to shift left, it starts to free up zeros to its right.
27

Do you want to really understand programming? Or just write a few scripts and forget it?
Binary logic is an incredibly important concept. It may seem complicated at first, but I assure
you that by taking just 10 minutes to look at how binary logic works, a whole new world of
possibilities will open up and you might start seeing things in a slightly different way.
You and I have been using the decimal counting system from our birth. Decimal means base
10. Perhaps counting up to 10 and starting over as in 11, 12, 13, 14, 15 and so forth came from
the fact that human beings have 10 fingers. Whether that’s true or not, I don’t know. But if we
look at it that way, then a computer processor only has 1 finger. And it can either raise it like a
flag by showing that a bit is set to 1 or hide it by showing us nothing, or 0.
How would you count if you only had one finger? That seems to be like the only way. But computers
have memory that has enough space to store many values. So using this finger ballet
the computer operates on large data sets even though it only has one finger to do it with. How
does it then store values in memory? By using one finger to flip some values on and others off,
across the entire memory board.
Since we know that in a binary number a value can be only 0 or 1, then changing that value is
always a toggle. If a value is 0, it can only be changed to 1. If a value is 1, it can only be changed
to 0. We flip bits like they are lightbulb switches.
The computer is all powerful. It can flip any bit of information at any time if you instruct it to
do so. Which bits will you want to flip on or off? That’s entirely up to you. But when it comes
to incrementing a binary number by one unit, there is a certain pattern that forms. Knowing
this pattern will probably not make you a better JavaScript programmer. But it might give you
a deeper insight into how computer work.
* * *
Human beings become fascinated about control. When I was 12 years old, my uncle showed
me how to draw a line on a computer using the BASIC language. I can tell you that this event
alone fascinated me so much (I could now draw lines on the screen of a computer!) that I saw
myself making video games. It motivated me to continue exploring the world of computer programming.
It let me know that I could control the screen by issuing commands. It was fun.
The knowledge of binary numbers may not be necessary for most tasks associated with web
development but knowing that this kind of thing goes on inside a computer can awaken the
inspiration in someone. I hope, in the same way that my uncle awakened it in me.
We have already discussed that to increment a binary number by one unit we shift 1 to its left,
opening up more room for zeros to its right. But we have only discussed this process in the
context of going from 1 to 2. How do we go from 2 to 3 in binary logic? Let’s take a look, because
we don’t just keep shifting the leading 1 to the left in this case. Something else happens.
28

Incrementing a Binary Number
Step Dec. Binary Commentary
A 0 00000000
B 1 00000001
C 1 00000001
D 2 00000010
E 3 00000011
F 3 00000011
G 4 00000100
H 5 00000101
I 6 00000110
J 7 00000111
K 8 00001000
L 9 00001001
M 10 00001010
N 11 00001011
O 12 00001100
P 13 00001101
Q 14 00001110
R 15 00001111
S 16 00010000
We begin with a clean slate. This is 0 in binary and decimal.
Start by switching the right-most bit to on position. Another
way of thinking about it is that we shift 1 left into the number.
To increment by 1, start by shifting this bit to the left.
A zero to the right is now open. We just incremented the value
by one. The equivalent of 00000010 in decimal is 2.
Before we move on we first need to fill in remaining zeros to
the right. Note that 3 isn’t 00000100. That’s a common mistake.
We ran out of space. So, the next step is to move the leading 1
to the left again, and zero out everything to the right.
This is 4 in decimal.
The process repeats itself.
It looks like we exhausted all combinations. Just like in step G,
we shift left and zero out again.
11 is 1011 and not 1100 because we are always concerned with
filling in the two right-most 0s first. See steps A-J. Same thing.
Zero out.
Shift left.
Zero out.
29

What is a Variable?
Variables can be thought of and used in so many different ways that it would be pointless to
give them one specific definition. In the context of a computer program, what variable is can
only be understood by experimenting and writing your own computer programs.
A variable consists of a name and value.
var x; // Create a variable but skip the value.
var x = 1; // Create a variable and assign the value of 1 to it.
var a = b = c = 1; // Create three variables and assign value 1 to all of them.
Everything in JavaScript is an object. Therefore, all variables we can possibly create are objects.
An object is a concept. An idea. An object is not stored in computer memory with 0s and 1s.
It can be thought by the programmers as a theoretical structure of the program. The computer
processor only sees 0s and 1s. It doesn’t care about how we think. It just does what it’s told.
This means that the concept of an object doesn’t exist anywhere in the computer itself. It exists
only in our head. That is how humans think - in terms of objects. It’s a part of the creative process
inherent to all of us. There are objects inside other objects. Like ideas inside other ideas.
So what exactly is a JavaScript variable then? Let’s put it this way. If a computer program is a
novel, then a variable is a word. A function is a sentence. And a block of code that calls a number
of functions is a chapter.
A variable is a versatile tool which can be many things. Theorethically, it is just a name that we
create as an alias to a placeholder somewhere in computer memory at a random location. This
way we don’t have to memorize the actual computer address just to refer to that location in
memory every time we want to do something with that variables.
Once we assign a value to a variable it becomes that value. If we assign an object to a variable
name then that name becomes the object. If we assign a function, it becomes a function. The
value of a variable is up to the context in which that variable is used.
A variable can even refer to a an object created using the JSON. So as you see, the variable
name is a reference to something. A variable is determined by its value. The name of the variable
is a reference to that value.
A variable can also be an integer or a string. But even a number or a string is an object in JavaScript.
The value of the variable is always an object. This is why sometimes it is thought that
variables are objects. But it doesn’t mean that the name of the variable is an object. The name is
just a reference to the address in memory where that value is stored.
30

Bitwise Operators
With a solid understanding of binary numbers we can easily understand bitwise operators.
Bitwise operators work on binary numbers. The difference between regular operators you
may already be familiar with (like plus and minus which work with base-10 or decimal number
system) is that bitwise operators let us manipulate individual bits of data within the variable
value itself. Bitwise operators allow us to flip the state of an individual bit into on or off position
in different ways.
Bitwise operators & | ^ ~ > >>>
A good practical example of using bitwise operators would be storing user settings inside bits
of an integer, instead of using the integer value itself. This is extremely helpful and a much versatile
way of storing yes or no type of information. Let us remember from the previous section
of the book that an integer is represented by 32 bits of information on a 32-bit computer. This
means that one 32-bit integer has 32 spots that can be occupied by either 0s or 1s. These 0s and
1s can be manipulated in various ways using different bitwise operators:
& Bitwise AND operator
| Bitwise OR operator
^ Bitwise XOR operator
~ Bitwise NOT operator
> Bitwise Right Shift operator
>>> Bitwise Zero-fill Right Shift operator
Please note that leading zeros of a binary number can be skipped when refering to them in
writing. This means that the binary number 00000100 (or 7 in decimal) can be also written as
0100 or even 100. But 100 in decimal is one hundred. For this reason, when referring to number
100 in binary it is often written as 100b to avoid confusion.
In fact the Assembly Language (a language that talks in raw computer instructions directly to
the microprocessor) programmers often see bytes as split into a lower and higher halves:
0000 0001
The higher half The lower half
To make bitwise operations easier to understand the examples throughout the next pages will
use only the lower half of the byte. In other words examples will be simplied to 4 bits.
31

In order to understand bitwise logic, let’s pick two binary numbers to see what happens when
we use bitwise operators on them. By refering to the table on the Incrementing a Binary Number
page we can choose two arbitrary numbers. Let’s say Seven (0111) and Nine (1001). But
because binary numbers are a little unique in terms of how we assign them to JavaScript variables,
there is a small problem.
In JavaScript there isn’t a way to literally define a binary number. In fact, trying to define a
binary number using its literal representation as in example below we will be defining an octal
(base 8) number instead. JavaScript simply doesn’t have a direct way to define a binary value.
var apple = parseInt(111, 2);
var apple = parseInt(“0111”, 2);
Octal, not binary.
var apple = 0111;
var apple = 7;
var apple = 0x7;
Evaluated as the binary number 7. Note that 0111 would
generate an error. Do not pass leading zeros to parseInt
when specifying a binary number to avoid a syntax error.
However, if we pass the binary number as a string, then
we are allowed to use leading 0s with no problem.
Value is an octal number equal the decimal 73, not 7.
In JavaScript numbers starting with leading 0s indicate
the octal system, not binary. Avoid making this mistake.
The familiar decimal system.
This is the hexadecimal format. 0x7 equals 7 in decimal.
In the third example notice how the number looks as if it is in binary format. But it’s actually
not. By default JavaScript processes a value that starts with a zero as an octal number (base 8)
not binary (base 2), which is what we’re looking for.
An octal number is represented by digits between 0 and 7. And cleverly enough, JavaScript understands
all of this and determines the number type automatically by looking at its value. For
example 0118 would be equal the decimal 118 even though it has a leading 0. This is because
JavaScript knows that the digit 8 is not part of the octal system (0-7 only). But 0117 would be
treated as an octal number and the result would equal the decimal 79. Try it yourself:
var decimal = 0111; // will equal the decimal 73, not the binary 7, nor the decimal 111.
var decimal = 0117; // will equal the decimal 79.
var decimal = 0118; // will equal decimal 118.
If this confuses you, you are not alone. This is just the way JavaScript deals with numbers.
Without an explicit way to specify a number type, things will be confusing. This is why it’s
important to stick to one base. In the end, all numbers are represented in binary format inside
the computer. So the number system becomes our choice. In order to understand bitwise operator
logic we need to use the binary system, yet, it’s not directly available.
But that doesn’t create a big problem for us as long as we know what the number equivalents
are in the binary format. Equipped with parseInt, we are ready to explore the logic behind
bitwise operators.
32

The only way to directly specify a number in binary format is by using the parseInt function.
In particular we are interested in the second parameter radix. The radix argument gives us
control over the numeric system of the variable. If we pass 2 as the radix, we will be telling
parseInt to literally parse the value as a binary number, not as a decimal integer, an octal or
hexadecimal number. Which is exactly what we need.
The function parseInt converts the binary number into a decimal number.
var decimal = parseInt(0111, 2);
var decimal = parseInt(“00000111”, 2);
var decimal = parseInt(111, 2);
When the first argument is passed as an integer,
this will generate a syntax error. No leading zeros
are allowed.
We can simply pass 111 as an integer. But a better,
more explicit way to specify a binary number is to
use a string.
Returns 7, because 0111 in binary is 7 in decimal.
You can do it this way, it’ll still work. But it’s not
recommended.
Note that in JavaScript bitwise operators do not work directly with binary numbers. The actual
value of the variable specified as a binary number using parseInt will still be in decimal format
if we output it with the alert() function.
However, that is of little importance to us. The numeric system is only a shell. It is just a way
for us to work with numbers. And no matter what numeric system we use when we work with
numbers, in computer memory the data is always stored in the binary system. The decimal
numbers we are using when we work with JavaScript variables have binary counterparts.
Bitwise operators work on individual bits of two binary numbers. Bitwise operators work with
any two binary values of the same length. But let’s keep things simple and consider two binary
values represented by a single bit just to see how they work.
Here is a quick example of the bitwise AND operator working on two bits: 1 & 0 = 0
Let’s see what happens when we apply the bitwise AND operator represented by the & sign
to two values. The rules of the bitwise AND operator state that the result will be equivalent to
multiplying the two given values. For example, 1 & 0 = 0 because 1 × 0 = 0.
Bitwise AND operator &
Value 1 Operator Value 2 Result
0 & 0 0
1 & 0 0
1 & 1 1
33

At first this might seem confusing. Why would anyone want to perform some odd operations
on single bits of a number? But remember, the binary number can act more like a switchboard
with some values on and some off. One of the things we can do with a bitwise AND operator is
to check if.
Let’s now take a look at the bitwise OR operator. The rules of the bitwise OR operator state
that as long as one of the values is 1, the result will always be 1. Only if both values are 0 the
result will be 0 as well. If both values are 1, the result will be 1.
Bitwise OR operator | Example
Value 1 Operator Value 2 Result
0
1
|
|
0
0
0
1
0101
OR 0011
----
1 | 1 1
= 0111
JavaScript examples of the bitwise OR operator:
var result = 5 | 3; // result is 7
var result = 2 | 8; // result is 10
To perform binary operators on decimal numbers makes little sense. But these operations can
actually be meaningful if we start looking at them in terms of binary numbers. For example,
the bitwise OR operator can be used to add bits to an existing value:
0010 | 0001 = 0011
and the bitwise AND operator can be used to ensure that a bit is off by &-ing a 0:
0011 & 0001 = 0001
You may never have to deal with binary numbers in your JavaScript program. However they
may become useful for things like saving space when storing flags or user settings in a database.
34

Understanding JSON Definition
While writing new episodes for my jQuery Tutorial newsletter many people have asked me
why some variables are defined using quotation marks and why others don’t.
In particular with regard to the animate function example from the previous page, I was asked
the question: Why are there quotation marks around the argument “linear” but not around the
integer whose value is 1500?
We have already talked about the fact that JavaScript function parameters are typeless. This
means that you can pass any type of an argument to them. An argument can be a string (text
enclosed using quotation marks) or an integer (simply a digit.) JavaScript functions parameters
do not determine or ask for the obeject type passed to them like C++ functions do.
The assumed type of the parameter is determined by the programmer, not by the language
specification. This means that when constructing a function of your own you are responsible
for determining the type of the arguments that presumably will be passed to that function.
It’s your responsibility to write the function in such way that handles any possible type of a
parameter passed to it. jQuery programmers made the decision that the first parameter of the
function animate() should be a JSON, the second an integer, and the third a string.
JSON is the syntax rule for defining an object in JavaScript. An object can contain a number of
variables, functions or other objects. Let’s take a look at an incredibly basic example of JSON
object definition:
var obj = { a: 1, b: 2 };
It’s important to note that neither var, nor obj are referred to as JSON. JSON is in itself only a
guideline for object definition in JavaScript as seen between the two { and } brackets. One of
the most important things about JSON is that it uses the : (colon symbol) and the , (comma) to
define the inner contents of an object. In other words, that’s just the way the syntax was defined
by the creators of JavaScript language specification (Originally known as EcmaScript.)
JSON in itself is a unique data representation like var or function. Except it has no keyword
definition. In other words { var a: 1, var b: 2 }; would be a wrong way to create an object and
this would create a JavaScript syntax error. This is important because there is actually a second
way of creating objects in JavaScript using the function keyword where defining a using
var a = 1; would actually be legal, but we will discuss this in another section of this book.
35

Let’s display the variable “a” currently stored inside the object we just created obj. To access a
member variable of an object we use the . (dot operator) as in the following example:
alert(obj.a);
This will output “1” in an alert box because that’s the value of a as defined in the previous example.
In the same way we can access any variable stored inside of an object that was created
using the JSON notation. But what kind of other things can we store inside a JSON?
The answer is simple. Because everything is an object in JavaScript, we can store pretty much
anything inside JSON, even another JSON itself:
var json = { json: { json: { x: 1; } } };
And to access the x property in this scenario we could do the following:
var x = json.json.json.x;
36

Making HTTP Requests with Ajax
What you will learn:
Ajax and jQuery
Asynchronous HTML form submit example
Extra material: Inserting Form Values into MySQL Database on Submit
MySQL Database wrapper class
Source code for “submit.php”
Storing submitted form data into MySQL database using a PHP script
When you talk about using Ajax with jQuery, you can either say little or you can say a lot. I’d
like to think that the latter is a more generous choice for the readers of my newsletter! I like to
go in detail.
I’m not going to bore you with all the details and syntax of every single parameter you can
possibly use. And in the spirit of my previous tutorials, I’d like to focus on practical usage of
making Ajax calls.
Let’s face it, most things you will do with Ajax are about making a GET or POST request and
returning the result. The result is the data returned by whatever script file you have chosen to
make a call to.
This result is simply the text version of the outcome of executing that file. For example, if you
have a PHP file that prints “Hello” and exits, then this “Hello” is what will appear in the result
of your Ajax call.
You can pass parameters to an Ajax call just as you would to a web page. An Ajax merely executes
a script file, in the same exact way as you would if you typed the URL of that script
directly into the address bar in your browser.
First things first. Let me just put it out there that in order to make an Ajax call, jQuery has a
special function that looks like this:
$.ajax(“script.php”);
Really, it’s that simple. But as you may know the devil is in detail. This will merely call the file
script.php (note, it can be script.asp, data.txt, an image, XML file or any other file that your
browser can open).
37

What’s important is the return value. The example above ignores the return value completely.
Luckily, jQuery allows us to capture it. In order for us to see this in action, we need to use a
slightly different syntax shown below:
$.ajax( { url: “script.php”,
type: “post”,
success: function(result) { alert(result); }
});
Still the same function. The only difference is that now we are using JSON with objects inside:
url, type and success. JSON is discussed earlier in this book.
Note that the “result” parameter passed to the success function is the data received from the
script. You are the one to decide what that returned data should be within your “script.php”
file. Again, it can be XML, plain text or any other kind of data, depending on the purpose of
your asynchronous HTTP request. You can format the function above in any way you wish,
but the point is that you specify either the POST or GET type using the “type” parameter.
Remember that everything in Javascript is an object? This is what makes it possible to assign a
function closure to the success parameter in the example above. Even “script.php” and “post”
values are actually objects of type String.
What are some of the things that Ajax can be used for?
Forms: jQuery Ajax is incredibly helpful when dealing with HTML web forms. Using selectors
it is possible to collect and send all values from all fields of the form directly to your form
processing script without having to retype the id’s, names or values from the form elements.
Let’s take a look at how you can use jQuery selectors along with Ajax to submit information
from an arbitrary form. Let’s say we have a form like this:
Note that there is no need to use the form tag at all unless you think you must. We’re avoiding
the regular HTML form submit and overriding it with the way we want it to work.
38

There is one curious thing about this code. What is this getform function? As you can see,
this function returns the parameters we are passing to submit.php, but where does it get them
from? It gets them directly from the input elements in our form. The second parameter is
‘#form’ - it is the context. We already discussed context in my previous jQuery tutorial called
How to speed up jQuery selectors. Head there to refresh your memory.
The first parameter “input” lets us specify a jQuery selector. In this case, we only have input
fields. But if we had textareas for example, I could also say:
$.ajax({url:’submit.php’ + getform(‘textarea,input’, ‘#form’), type:’post’})
Let’s take a look at the definition of getform function:
function getform(element, parent)
{
var ret = “?”;
var Length = $(element, parent).length;
var idnamelist = new Array();
var idvaluelist = new Array();
for (var i = 0; i < Length; i++)
{
idnamelist[i] = $(element, parent)[i].id;
idvaluelist[i] = $(element, parent)[i].value;
ret += idnamelist[i] + ‘=’ + idvaluelist[i];
if (i < Length - 1)
ret += “&”;
}
return ret;
}
You can further simplify this function, but the point is that I broke it down into variables to
make sure it’s easy to see what’s going on.
The getform function goes through all elements of type specified in the first parameter. You
can use just one element, for example “input” in this parameter, or you can add others. You
just have to separate them by comma as in “input,textarea”. This will be passed on to the dollar
sign function as a jQuery selector. The second argument “parent” is the context. We don’t want
to look at all input fields on the page, only those within the DIV element with id = “form”.
When the Submit button is clicked, jQuery fires an asynchronous ajax call to execute “script.
php” file, effectively passing all id’s and values of every single input element in our form. You
don’t have to do anything else. There is no more Javascript code to write, and it will work even
if you add more input fields into this form, or even textareas. Just make sure they all reside
within the DIV with the id = “form”. Also note that the submit.php (or submit.asp) file should
include your custom code for processing the form on the server.
39

Inserting Form Values into MySQL Database on Submit
The form example wouldn’t be complete without us knowing how to insert this form data into
the MySQL database.
In the previous part of this tutorial, using jQuery we were able to effectively collect all input
IDs and VALUEs associated with those IDs, and put them into a neat submit script.
No matter what input elements you place into this form, they will be automatically passed to
the submit.php script, thank goodness for the getform(selector, context) function. You can add
new input elements or delete existing ones. It will still work as long as each input element is assign
an ID attribute with a unique name.
But how do we insert this data into a MySQL database? Well, that’s the responsibility of our
submit.php script. This is the script that is being called by our jQuery ajax function.
But before we look at submit, I’d like to intoduce a PHP helper class containing several database-manipulation
functions that will allow us to do basic things with MySQL database. Let’s
take a look at what’s inside:
Link to PHP library file in text format on my website:
http://www.learnjquery.org/book/sourcecode/class.MysqlDatabase.txt
(Download and rename to class.MysqlDatabse.php)
Usage explained on the next page.
Place this code into a separate file, say class.Database.php and put it in a convenient place on
your server, in a folder called “php” or something similar.
The above class uses a utility function called array_to_list. This function takes two parameters,
the array of data (usually of type string because it contains names of table columns like
first_name, last_name, email_address, etc.) and the second parameter is the quote character
you want to use in the resulting string.
The result value is a string of names separated by a comma. Each name is wrapped with whatever
quote you specify as second parameter. The default is the ` quote, not ‘ or “. I find that this
is the best quote character to use in MySQL queries for wrapping a column name in. Of course
you can use ‘ or “ by overriding the second parameter of this function, but it’s up to you.
Note that to use class.MysqlDatabase.php you must include it in your php file. In addition,
you must provide your own database ip address, username, password and database catalog
name throughout the file. Of course, prior to doing so you must first create a new MySQL database
on your server or run it locally using a local Apache installation.
40

Now let’s take a look at the array_to_list function:
// Convert values of an array to a list “quoted” by the character specified as the second $quote parameter.
// This function allows us to convert arrays of data (of type string) into MySQL query parameters
// This way we can pass an array rather than typing them out ourselves and typing quotes around them.
function array_to_list($ar, $quote = ”`”)
{
$l = “”;
if (is_array($ar))
{
$ac = count($ar);
}
if ($ac>0)
{
for ($i=0; $i < $ac; $i++)
{
$l .= $quote.$ar[$i];
}
}
return $l;
}
return false;
if ($i + 1 < $ac)
$l .= “$quote,”;
else
$l .= “$quote”;
Put this function into a file and name it “utility.php”, or whatever you think is best.
Now... Let’s look at submit.php, which will conveniently include our utility function array_to_
list, used by our database manipulation class:
foreach($_POST as $k => $v)
{
$names[count($names)] = $k;
$vals[count($vals)] = addslashes($v);
}
$Connection = new MysqlDatabase(); // connect to the database
if (isset($Connection) && $Connection->isReady())
{
MysqlDatabase::insertTableData(“myform”, $names, $values);
}
41

I like code that you can “read” by just reading through it. Like a poem. It just makes sense.
Notice a peculiarity in the foreach loop when I am enumerating the $_POST array we just
received from our ajax call. Why am I using count($names) and count ($values) as an index to
insert the value to instead of counting things using something like $++ or a similar indexing
variable?
Well, the count function will return 0 for arrays that don’t exist. Once we add one entry, it will
return 1, then 2... and so on. The size of the array always points to its “next” placeholder available
to us. So there isn’t a need to use an $index variable at all. Moreover, this makes code look
less cluttered and more elegant.
I have to also use the addslahes function, because we will be wrapping our resulting strings in
our own quotes. This, however, depends on your database configuration. You will either have
to add “magic quotes” or leave the input raw. You’ll have to look into your database config files
on the host server.
Ajax: In Conclusion
Submitting forms is not the only use of Ajax, but in combination with PHP and MySQL it can
be a powerful tool for making your form submitting easy.
In the future I’m likely to add even more practical examples of using ajax here. Who said that
we have to stop here?
Web development is all about combinations of different languages, platforms and technologies.
That’s why it’s difficult to talk about one without mentioning the others... and be complete.
I hope that this code can be re-used by others, or at least it could give you an idea of how combinations
of different languages can effectively make your scripts really great. Don’t stop here
at just learning Ajax and jQuery, pursue studying other computer languages as well.
42

Javascript as a Prototype-based Language
JavaScript is a prototype-based programming language. In order to help us understand what
this means, we can compare JavaScript with different kind of a language. Let’s take a look at
languages such as Java and C++. These two are often referred to as Object-oriented languages.
One of the fundamental ideas behind these languages is the concept of a class which is like a
blueprint for creating an object.
What is a class? Let’s start simple. In JavaScript we have the keyword var which is used to
define a variable. We can later use this variable in our program to add numbers or concatenate
strings.
But what does a class define? By itself the keyword class defines a type of something. Literally,
it can be a type of anything. This is only limited by your imagination and the purpose of your
program. A class is an abstract concept, like a paintbrush. You choose the colors to paint your
program with.
The keyword class does not exist in JavaScript. But we need to talk about this keyword, and the
concept of classes as a computer science subject, only to compare it with JavaScript in order to
get a better insight on its prototype-based nature.
But there is still a link between classes and JavaScript. That link is the concept of an object. The
two languages C++ and Java use objects. So does JavaScript. And in a way a class is an object.
And we will see how in just a moment.
You may already understand what classes and objects are. But in order to gain a deeper understanding
of JavaScript as a prototype-based language we need to briefly discuss them in the
following section.
Classes and Objects
A class can be thought of as a creative logic tool that defines one of the many elements of your
computer program. A class is a type of something. It is a blueprint that defines the construction
and function a specific object that will be built from that class.
Multiple classes can and often are designed to work with each other. That’s the point. You can
create a class and call it class car. You can then create a class engine and use it to define an
engine for the car. You can create different types of cars by adding different kinds of engines
to them. In computer science this is referred to as object composition. Object composition is
a method rarely used in JavaScript programs because the prototype method, which we will
discuss in a moment, replaces it.
43

An object is created from a class. And in JavaScript everything is an object by definition. This
is why we never need to use the class keyword in the first place. Everything is already an object.
Whereas in PHP, C++ or Java, this is not true. Conceptually, variables are data types and
not necessarily classes in these languages. There is a clear distinction between variables and
classes in those languages. But not in JavaScript which treats every single data type as an object
by default. This is very important concept to understand and it is part of what makes JavaScript
a prototype-based language. In an object-oriented language the entire program is a collection
of these objects working together.
An object is an initialized class. It is the physical representation of the class in computer memory,
that is ready to be used by your program. While the class is merely a blueprint model, a
design - the object of that class is the constructed result.
The behavior and properties of an object can be defined during the process of object creation,
also known as instantiation of an object. In other words, a new instance of an object is created,
or initialized, from a specific model which is determined by its class.
An object can also be modified by your program during the course of its existence until it is
destroyed or in other words, erased from computer memory.
Classes are the models for spawning new instances of objects. Using one class, you can spawn
any number of different types of cars with different types of engines, transmission systems
or tires. The number of objects that can be created is only limited by memory capacity of the
computer on which your program is running.
An Example of Object Composition. Object-oriented programming languages follow the
same idea as in the real world, where real-life objects are constructed from a number of smaller
objects. A car has an engine and wheels. A light bulb has a glass shape and socket base type.
44

Let’s take a look at an example of an object in the C++ programming language. A class to represent
bulb shape. And a class to represent the socket type.
class Shape
{
int shape; // a digit
};
class SocketType
{
char type[32]; // a string
};
Let’s now take a look at how object composition can be used to define the light bulb class itself.
class LightBulb
{
Shape shape; // The Shape object is included in this object’s composition
SocketType socket_type; // SocketType is another object included in this one
int state; // 0 - for off, and 1 - for on
void turn_on(); // set state to 1
void turn_off(); // set state to 0
};
It’s important to understand that this is C++. In JavaScript all variables are typeless, in other
words when we define a JavaScript variable its type is determined by the value assigned to it.
In C++ the type of a variable is determined explicitly by the programmer.
In C++ we can define a class to be composed of previously defined classes of different types.
Together they form a model for an object to be created from this class. As you can see object
composition is an incredibly flexible computer programming paradigm.
The programmer’s creativity is used to determine the composition of every single entity required
by the program. You determine the design. In addition objects can have methods. In
this example it’s turn_on and turn_off which would toggle the state between 0 and 1.
Let’s not go into details of how to create classes in C++ and what int or void mean. After all
this is a JavaScript book. What’s important is that this is one way of object composition. For
now, take a note that this is the static way of creating objects. We’ll take a look at how Javascript
does this in a moment.
Two classes Shape and SocketType are used to construct one complete class LightBulb. This
is called object composition. We still can, and probably even should use object composition as
an effective method for object creation even in JavaScript - we will just have to think about in a
slightly different way. In a prototype-based way.
45

Dynamic Prototype-based Objects in JavaScript.
The notion of an object in computer programming is such an important concept, that it actually
relates to the design of the programming language as a whole. The period of time when
the program begins and continues its execution is often referred to as the run-time or the program
life cycle. And the way in which objects are designed in different programming language
paradigms has a lot to do with this life cycle.
Recall the C++ LightBulb class from the section above. In C++ these classes are entirely static.
They cannot be modified during run-time. In C++, before you can run the program it must be
compiled into an executable file first. Once the program begins execution, the classes are no
longer allowed to be changed. This is not true in JavaScript. In JavaScript, objects can continue
being modified during the program execution at run-time. Knowing this, we are getting
closer to understanding prototype-based object composition.
JavaScript programs compile within the browser itself (this is called “just in time,” JIT compiling
but also known as dynamic translation in computer science) so we never have to worry
about doing it manually like we would when writing a C++ program.
* * *
As we get deeper into exploring the concept of objects we will need to know about the tools
given to us for working with objects. In terms of the mindset required when writing objectbased
JavaScript programs, an object can be thought of as a toolbox, as a private space for
making something very specific work a certain way. An object isolates specific functionality,
making it easy to look at the entire program from the perspective of its design.
On the next page let’s explore an important concept called the this object. It’s used by objects
to refer to themselves from within themselves.
46

The this Object
Before I show you an example of a JavaScript object, I’d like to temporarily shift your attention
to a concept known as the this object. The “this” object is a reference to itself. Every object has
a reference to itself named this. You can think of the this reference as a variable that points to a
location of an object in computer memory.
But why in the world would we need to have a handle to an address in memory? Couldn’t we
just create an object and use its name? This is true. But what if the object itself needed to use
itself from within the functions within its own scope? What name would it use? It would use
the this reference to itself.
From within itself, LightBulb
will use the this object, to refer to itself
from within its own functions.
this is a reference to the object itself,
looking at itself from within itself.
But from the scope of the JavaScript program
we naturally use the class name
LightBulb to refer to that object.
One other way to think about it, is that while others refer to you by your name, you
refer to yourself as I, I am, me, etc.
The this object is a reserved keyword in JavaScript. In other words, you cannot give your variables
the literal name this. That would create an error. It’s a reserved keyword to be used only
as a self-reference of an object used only by the object itself.
The this object is also present in C++ and Java. But what does it mean to be a self-reference? In
order to understand this, we must think in terms of object composition again. When we create
objects we can place other objects (variables and functions) inside them to create one complete
object.
47

Without knowing anything at all about objects the this keyword may be slightly confusing to
understand in terms of how it is used in practice. So let’s now go back to our discussion of objects
in JavaScript knowing that the this is a reference to itself.
Just like in Java or C++, in JavaScript, it is also possible to add objects to other objects to create
greater, more versatile constructs. In fact, the idea is exactly the same. In JavaScript there are
two ways to create an object. One is by using JSON and another by using the function keyword.
We will take a look at both, one at a time
Creating a JavaScript Object Using JSON
Let’s take a look at one popular way of defining a JavaScript object:
var Object = { property: 1 };
What we are seeing here is called JSON or JavaScript Object Notation. JSON begins with a
curly bracket. We enter a property name, end it with a : (colon) and enter the value. Close it
with a }; Notice the semicolon at the end.
It’s possible to add more properties to the same object by separating them by comma:
var Object = { property: 1, another: 2 };
The code won’t compile if you add a semicolon after the last value (2). So we leave it blank.
Writing it out on one line is very convenient for simple objects. But when we have more than
one property we can format the object in the following way. Also it helps to memorize these
precautions:
var Object =
{
property: 1,
another: 2,
};
Leaving a comma at the end is legal
var Object =
{
property: 1,
another: 2;
};
Adding a semicolon here will generate an error
To access values of the properties property and another stored inside the main Object we will
use the dot operator:
var prop1 = Object.property; // prop1 will store 1
var prop2 = Object.another; // prop2 will store 2
48

Let’s rewrite the same LightBulb object from the C++ example above but using JavaScript and
what we know of JSON this time:
var LightBulb =
{
shape: 0,
socket_type: “European”,
state: 0,
turn_on: function() { alert(“Lightbulb with “ + this.socket_type + “ socket is on.”); },
turn_off: function() { alert(“Lightbulb with “ + this.socket_type + “ socket is off.”); }
};
All of the above: shape, socket_type, state, turn_on and turn_off are nothing more than objects
stored within the main object called LightBulb. Within an object shape, socket_type and
state are variables and referred to as object properties. But turn_on and turn_off are functions
and within an object functions are referred to as object methods.
Let’s access properties and methods from within this object using the . (dot) operator.
// And a few examples of using this object:
LightBulb.shape = 1;
LightBulb.socket_type = “Mogul”;
LightBulb.turn_on(); // This will display an alert message “Lightbulb with Mogul socket is on.”
LightBulb.turn_off(); // This will display an alert message “Lightbulb with Mogul socket is off.”
A few things are happening here.
The keyword var can be used to create variables as well as objects. As mentioned earlier, everything
in JavaScript is an object. Even variables defined using the var keyword itself. We then
simply name our object LightBulb like we would any other variable and use the equal sign
followed by a scope { ... }; and a semi colon, where the three dots determine the contents of the
object we are creating.
Notice that the definition of the “class” LightBulb which is done using the var keyword is also
the instantiation. In other words, we are defining and initializing the unique, working instance
of the object at the same time. This would be illegal in C++ and Java where definition
and instantiation are done separately.
In comparison, in languages like C++ and Java we must define the class first and only then
initialize the object. In other words we create a unique working instance of that object whose
definition cannot change during runtime of the program. In those languages, once an object is
initialized we cannot modify its blueprint - the class definition itself. But in JavaScript, we can.
49

More About JSON
JSON is a data interchange format. Although it is influenced by the JavaScript syntax it is used
in many other languages to represent data. It is not unique to JavaScript. In fact, it is often used
to send already created objects over network to a program written in another language (such
as Java) as string. Once Java receives that string it can then recreate a Java object using the
JSON string that was received from an application written in another language.
To create an object in JavaScript, we can use the JSON which stands for JavaScript Object Notation.
It’s nothing more than the syntax you are seeing below:
var main_object = { object1name: objectvalue, object2name: objectvalue };
You can have more than one object name and value pairs separated by comma. The variable
main_object is an object itself, whose parameters are specified using the JSON notation.
Remember that everything in JavaScript is an object. This means that the objects object1name
and object2name can be variables or functions. In other words, JSON is not limited to basic
data types.
The actual value specified in objectvalue can be any variable like an integer or a string. But it
can also be an array, a function or even another JSON. Again, this is because everything in
JavaScript is an object and the parameters inside a JSON are objects.
As an example let’s take a look at a practical example of acceptable values in a JSON.
var json =
{
animal: “cat”,
legs: 4,
eat: function() { /*eat*/ },
array: [0,1,2,3,4],
json: {
primary: 1,
secondary: 2,
another_array: [“a”, “b”, “c”]
},
final: 7
};
alert(json.json.another_array[1]); //display “b”
50

In order to access a value of an object from within the program we use the . (dot) operator. As
in the following example:
var light_bulb = { shape: 1, socket_type: “European”, state: 0 };
light_bulb.shape = 2; // change bulb shape
light_bulb.socket_type = “Mogul”; // change socket type
light_bulb.state = 1; // turn on
Everything in JavaScript is an Object
Knowing a few things about classes and objects, let’s go back to the original question that
started this section. JavaScript does not have the keyword called class. But it does have objects.
How can that be? This is because everything in JavaScript is an object. All variables and functions
are objects. Arrays and strings are objects of type Array and String, respectively.
It would be difficult to determine what prototype-based language really means using only one
sentence. But it’s easier now that we know something about the nature of objects in general.
In order to understand what prototype means with a slightly greater insight, let’s consider the
following points:
Compile Time and Run Time
Run time, or run-time is the period of time during which the program takes place. In other
words, a period of time during which it executes or runs its course.
We know that object-oriented programming languages make it possible to create an entirely
independent object that shares the design model of the original class it was created from. This
process happens during the run-time in computer memory while the program is being executed.
Before executing the program, and before it begins to run, the objects are defined by the programmer.
Objects are defined at the time the program is being written. The program is then
physically executed by the computer at run-time.
In purely object-oriented languages there is a concept called class inheritance. It implies that
classes can be spawned as copies of other classes. It means that if you have a car with a particular
type of an engine, you can quickly make a copy of that car using its original class. Class inheritance
is a process that happens during the planning stage of your computer program and
not during run-time. In other words, we define which classes will be inherited from which,
before executing the program.
51

In some programming languages the term compile time is used to describe the process of
rewriting your code into machine code, one that the computer processor understands. For it
does not understand JavaScript, C++ or PHP syntax. The processor only understands 0s and
1s.
Languages like C++ and Java require the program to be compile into machine code before executing
it. The process of compiling a program in those languages is usually manual. In other
words, the programmer needs to press the “compile” button on the Graphics User Interface
withing the IDE (Integrated Development Environment) or start the compile process using the
command line.
Prototype
In JavaScript the program is compiled by the browser just in time for being executed. In JavaScript
this process is automated by the browser. It’s known as JIT or Just In Time compilation.
It doesn’t mean it isn’t there just because we are never aware of it. All of your JavaScript programs
are always compiled before they are executed. We never notice any slow-downs because
most JavaScript programs are very short and are quick to compile. The reason for mentioning
any of this at all is that this has a lot to do with the prototype-based nature of JavaScript. We
will see how, in a moment.
I won’t say it is because languages like Java are compiled that they are not prototype-based.
Similarly, just because JavaScript has a JIT mechanism, it doesn’t mean that this is the only
reason it is prototype-based. The subject of computer language design is more complex than
this. And even in order to execute a Java program there is a JIT mechanism of its own running
on the client machine.
Where are we going with all of this as far as JavaScript concerned? The manual program compilation
process is true mostly of C++, Java and many other languages. But in JavaScript, we
can:
re-define the composition of an object dynamically during run-time.
This is the “prototype” part.
The prototype is an “object prototype” that can be changed during execution of the program.
In JavaScript objects are not derived from classes. In other words, even though class inheritance
can be imitated in JavaScript, it is not the primary part of JavaScript’s design as a programming
language. We use the dynamic nature of prototype-based object composition. All in
real time during execution.
52

Learning JavaScript Object Definitions
When I was learning to write programs for the PC back in late 1990s, I have chosen C++ as my
first programming language. Back then, you had to understand things like the command line
and knowing what IDE (Integrated Development Environment) to use. In other words, you
couldn’t just type up some code into Notepad and expect Windows to execute your program.
The code had to be first compiled and only then executed. This is still how compiled languages
like C++ work today.
But HTML and JavaScript are much more accessible. In fact, their popularity among web programmers
can be accredited to how easy it is to get started with them. The browser does the
compiling and execution of your program. You just write the code.
In order to run a C++ application on a Windows computer, the program has to be first compiled,
built into an executable file that the Operating System understands and then launched
by executing the file. The browser such as Internet Explorer, Firefox and Chrome are all examples
of a desktop application that was compiled and built into an executable file first. When
you click on its icon to launch the browser, you are executing the file that has been built by
developers of the browser.
But JavaScript and HTML code run directly inside the browser. There is nothing to compile or
build. The program executes after it is processed (compiled and built into machine code) by
the browser. This makes it incredibly easy for anyone to start writing JavaScript code. But that
can be dangerous.
Very often people jump into memorizing what a line of code looks like from online tutorials
and books and then try to recreate it in their own programs with different parameters. But this
approach to learning a language leads to confusion in the long run because of the lack of understanding
internal mechanics of a language.
Even though the process of writing the code was made easy by the automatic JIT (Just In
Time) compilation right inside the browser, the problem still arises when it comes to learning
53

JavaScript from scratch. If you are an absolute beginner, there are things you may not want to
do. The understanding how to learn a programming language becomes important.
The right way of thinking about JavaScript programming lies in understanding the creation
and manipulation of computer data. In other words, variables, functions, integers, strings,
arrays, etc. are the blocks of data we will define. This data will be manipulated by JavaScript
statements and logical constructs we create during the period of time our program executes, in
other words the run-time.
One of these often overlooked concepts is the definition of objects in JavaScript. I have not
seen many tutorials that actually spend time explaining this. They simply jump directly to
practical examples. But in order to really get a grasp on the art of programming websites, we
need to understand data creation and manipulation at the very root. We must thoroughly
understand what’s going on at the very core of computer language syntax. And at the core of
JavaScript there are objects and object definitions.
Let’s take a look at an object definition from one of my previous tutorials, the LightBulb object:
var LightBulb =
{
shape: 0,
socket_type: “European”,
state: 0,
turn_on: function() { /* code that turns bulb on here */ },
turn_off: function() { /* code that turns bulb off here */ }
};
Notice how we still use the var keyword to define an object, not a variable. This can actually
be thought of as a flaw in the language design as it surely can confuse us. Is it a variable, or is it
an object? Let’s analyze this structure in a slightly different way. Thinking of code using visual
imagination, we can draw this diagram:
54

This can be thought of as a mental model of this construct as seen from a beginner developer’s
point of view. But with a little abstraction, it is possible to see even more.
As I point out throughout this book everything in JavaScript is an object. This means, all variables,
integers, strings, arrays, functions, anonymous functions, all arguments passed to all
functions, all results returned from functions are objects. So the diagram above can be, once
again, simplified as:
This is the correct way to think about all objects. Even these branches of objects may contain
more objects within them. And that can create an infinite chain of objects. Which isn’t impossible.
Instead of saying that we are defining a variable using the var keyword it’s best to get used to
thinking of the data being created in terms of an object. Because that’s what it is. As you can
see, this gives us an abstract model to think about writing code that is much clearer.
Are Variables Objects?
Yes, they are. Even simple definitions such as var text = “hello”; will create an object of type
String. It’s just JavaScript conceals this from us. Theoretically, we should think of everything in
JavaScript as an object.
It is still perfectly safe to think of data created using the var keyword as variables. And sometimes
it is not required to think of them as objects. For example when we do something like:
var a = 1 + 1;
But that’s the simple stuff. If you want to understand how jQuery really works, and why it
works the way it does, you will need to think of these things in terms of objects.
Objects by definition are of recursive nature. This means that objects could contain other
objects within them. Objects within other objects are accessed using the object method and
55

property access operator - the . (dot) operator.
For example, the object of type String (the variable whose value is set to”European” in the first
diagram above is an object of type String. It’s not just a variable, it actually contains within it
methods (functions) and properties (variables) that can be used right away without us having
to define them.
JavaScript’s String object already contains functions defined within it so that we are ready to
start using them. For example, let’s access the LightBulb’s String object’s length property. We
can do so using the dot operator:
var len = LightBulb.socket_type.length;
Notice that the dot operator is used twice. First after LightBulb to access its methods or properties
and then after socket_type. The length property itself is an object of type Integer. How
can we know for sure? Javascript has a special function called typeof that we can use to determine
the type of an object by simply passing its reference as the parameter. Let’s use the good
old alert function in combination with typeof to display the actual type of an object we’re dealing
with:
As you can see typedef will tell us the type of the object being passed to it. One little note to
make is that the Integer object that is referred to as “number” is returned as the same type also
for floating point numbers such as 1.572. In other words there is no distinction between an
integer and a floating point number. They are both defined as an object of type “number” in
JavaScript.
56

Using typeof in a Real-World Scenario
One interesting aspect of looking at everything as an object in JavaScript has to do with creating
custom functions. This is something I mention in my jquery tutorial book all the time.
Let’s say we want to write a function. Then, based on the type of an object passed to this function
as an argument we want to do something different. The typeof function to the rescue:
function func(value)
{
if (typeof(value) == “string”)
{
// it’s a string, process the string...
}
if (typeof(value) == “object”)
{
// it’s an object...
}
}
But who would want to do it this way and why? The idea is actually utilized by jQuery object.
Which is the same as the dollar sign $ object. Let’s take a look at the following jQuery code:
Both functions do exactly the same thing - they select all div elements on the page located
within the body element (which means all of them) and hide them. As you may know the second
parameter of the jQuery object function we are seeing here is called context.
The context parameter is nothing more than the target element within which we will search for
any “div” elements. I chose “body” which is the main HTML container of the entire web page.
We could have chosen any other element - that’s up to your site’s DOM structure. But that’s not
the point of this example. The difference is in the parameter type passed to the function. What
happens when a string is passed? What happens when an object is passed?
The $(“body”) statement itself returns the object that contains the DOM that includes all elements
within the “body” element.
57

Why does jQuery do exactly the same thing even though the second parameter passed in two
different ways? The typeof function to the rescue. The jQuery function written in such a way
that it first determines the type of the object being passed to it as a parameter.
If the context parameter is a string like “body” it will take its literal meaning and find that
element using the text in the string. If the parameter is passed as an object (remember that
$(“body”) is a function that actually returns an object) then the work is already done - we already
have the object here.
Internally, the $ function will skip the seeking algorithm (since the object already contains all
the data.) This doesn’t mean that it’s faster, $(“body”) will still take time to obtain the object
itself, it’s just that it’s done before this object is passed to the main jQuery function for processing.
58

jQuery
59

Learning jQuery
The greatest thing about not knowing where to start is that you can start anywhere.
Many web publications assume that the reader is already familiar with the basics. This process
of skipping the basics makes it easy to exclude important principles of web development.
I recommend creating some kind of a Web Application Template. This would be the starting
point of a new website project. It’s simply a way of linking CSS and JavaScript files into one
HTML file, the main application file of your web application.
Modern web development may require understanding of several programming languages,
frameworks and programming techniques. Just knowing jQuery is not enough.
In order to really understand jQuery, we must also understand the environment in which it
works. In other words, the structure of a web page. How are the components of a web application
written in HTML linked together? How should they be linked together?
This interconnectedness of different languages is a crucial concept we need to understand
when developing dynamic web applications. This concept will be further explored.
Knowing how to use CSS selectors is also a big part of understanding jQuery. Most of the time
you will be selecting HTML elements, following specific selection patterns that you pass to the
main jQuery object, which is often referred to as the dollar sign ($).
CSS selectors play a big role in developing dynamic web pages in general. They operate using
the same principles that regular CSS files do. If you have styled an HTML page with CSS
before you may already be familiar with some of them. One such selector is the dot (.) operator
- it selects element(s) of a class. Another is the number sign (#) operator - used to select an
HTML element with a unique id.
Furthermore, things that are trivial to an experienced developer may not be as easy to understand
for those who have just begun their journey. For this reason, I decided to include this
section explaining how everything in a webpage fits together.
If you are someone who has just developed an interest in building websites or web applications,
you may be interested in understanding this proverbial skeleton of a web page and how
jQuery fits into the big picture.
You may also want to become familiar with the concept of refactoring your code. On the next
page, let’s take a brief look at how to construct a page using the minimum HTML code.
60

Technical documentation is often written by “experts” for “experts,” who often skip the very
basic, essential details. But that’s not how I see education. This book is written for everyone
who is trying to understand JavaScript and jQuery programming at its very basic level.
I started writing this book in late 2011. A lot has changed since then. The web started to move
in the direction of mobile devices. User interfaces became important. But one thing remained
the same. Understanding JavaScript is essential to understanding jQuery.
Because jQuery is a JavaScript framework, it is important to understand that what you are
learning about jQuery is essentially just the JavaScript syntax. Syntax in any programming language
is simply a set of rules which defines how a program in that language should be written.
JavaScript is a programming language in which everything is an object. I make references
to this statement throughout my book. The main jQuery object itself is nothing more than a
JavaScript object. All variables, functions, arrays, strings, numbers can also be treated as objects
in JavaScript. But what is an object? An object is a concept that was created as part of the
Object Oriented Programming paradigm (also known as OOP) developed decades ago. It was
part of the evolution of programming languages as they were not always object-oriented.
For now all you have to know is that the entire framework is a jQuery object. Objects can be
used to execute functions “attached” to them. And understanding these functions are at the
core of using jQuery. Even though CSS selectors are incredibly important, I will talk about
CSS selectors later in the following sections of the book.
What is JavaScript?
JavaScript is a web programming language that was designed to add dynamic features to web
pages. In the old days, we only had HTML and that was for making static websites with text
and images.
JavaScript allows us to make our websites come to life. We can add colors, change text, add or
remove new elements to/from our page, etc. without having to refresh the page in the browser.
And this dynamic nature of the web today is what makes it possible to develop web applications
that react to user’s input.
You probably have interest in jQuery because of one or more of the following:
1. You have a college assignment that requires using JavaScript or jQuery.
2. Your employer is asking to develop a dynamic feature like an image slider.
3. You are a freelance web developer who wants to save time writing code.
4. You know HTML, but you are interested in building dynamic web applications.
5. You are a website creation vigilante who is passionate about making things.
61

If this sounds like you, then you will benefit from this book.
What Makes jQuery Worth Studying?
Web browsers constantly evolve. Each browser (Internet Explorer, Firefox, Chrome, Safari,
Opera, etc....) has its own implementation of JavaScript. At the microscopic level, some browsers
don’t have features of some other browsers. This means that the programmer is responsible
for making sure his code works in all browsers separately.
jQuery simplifies JavaScript programming. It allows us to write JavaScript code (which is what
jQuery essentially is) without having to worry about the program working correctly in different
browsers. Write your jQuery code once and it is guaranteed to work most of the time in
most popular browsers. This way you don’t have to test your JavaScript in different browsers
separately. jQuery takes care of that for us.
Using jQuery over vanilla JavaScript helps to save time writing your program. jQuery has an
incredibly simple and intuitive syntax. It’s what JavaScript was supposed to be when it was
developed.
jQuery is a JavaScript framework that makes JavaScript programming easier. A framework is a
collection of functions and utilities, like a swiss army knife. It’s a toolset containing an array of
useful functions and easy ways to do rudimentary JavaScript tasks in an easy-to-use syntax.
When it comes to HTML jQuery works exclusively with HTML tags by selecting them. You
select what you need, and apply a function to what you just selected.
Here are just a few basic examples of what you can do with jQuery:
1. Dynamically remove (hide) all DIV elements using $(“div”).hide();
2. Select all elements on the page using $(“*”); (the star selector.)
3. Insert text or HTML dynamically into any other element by using $(“div”).html(“text”);
4. Load a separate web page with ajax using $.ajax(url); call.
5. Attach events to HTML elements without having to use tag attributes (like onclick, etc.)
6. Get current browser version. It’s stored in jQuery.browser or simply $.browser.
7. An easy to use syntax and functions for selecting complex sets of HTML elements.
This list can go on and on. Well, it all sounds great, but what is the quickest way to start using
jQuery on your website? In order to start using jQuery all you have to do is include it in the
source code of the web page.
Adding jQuery file to a web page is simple and will enable jQuery for that page only, not the
entire site.
62

Including jQuery In Your Webpage
To include jQuery, first download the latest version at www.jquery.com and unzip or copy the
file to the root directory of your website project (in other words, where your index.html or index.php
file is.) They always update the file to the most recent version, so it’s essential to have
the latest copy. It fixes bugs and improves performance.
I go in detail about how to include jQuery in your webpage in my book which also speaks
about increasing performance of your JavaScript code. But at the very basic level, jQuery is
included into your web page by adding the following line in between HEAD tags on your page:
Where “jquery-1.7.1.min.js” is the jQuery library file you downloaded. You can also specify
a relative path such as js/jquery-1.7.1.min.js or (of course) you can specify the exact path, for
example directly located on one of your websites:
http://www.thisisyourwebsite.com/js/jquery-1.7.1.min.js
That’s everything. Add that line and you are ready to start writing jQuery code inside of your
webpage. But where exactly do we enter jQuery code?
Where Do You Type jQuery Code?
jQuery is nothing more than JavaScript. In fact, jQuery object is just a JavaScript function that
we call over and over again to select HTML elements and do something interesting with them.
This means that jQuery code will work only where JavaScript is allowed on a web page.
1. Anywhere in a JavaScript file using .js extention. Right in between JavaScript code.
2. Anywhere inside HTML attributes like onclick, onmouseover, onload, etc.
3. Inside SCRIPT tags.
Basically, anywhere you can write JavaScript code. That’s where you write jQuery code.
63

Web App Initialization
To initialize our web app we write code inside document ready event inside SCRIPT tag:
$(document).ready()
{
/* Initialize your jQuery and JavaScript code here */
}
Writing HTML code to make website layouts is one thing. And you may already be familiar
with that. But JavaScript web applications often require an initialization process. This is where
you set all of your program’s variables default values. If it’s a game, this is the place where you
reset score to 0, player lives to 3, and reset the game state, etc. If you are a web designer, this
is where you reset your jQuery image slider, set it to display the default image and hide other
slides for now. In other words, this is your website reset point.
Calling jQuery Commands.
We have two basic ways of calling jQuery functions
1. Using the CSS selector syntax such as $(“div”) to select all div elements.
2. Using jQuery library objects (variables or functions) like $.ajax(url) and $.browser.
With regard to item 1 once we select an element or a group of elements, we can now use jQuery
functions on that selection (ignoring all the other HTML elements that were not selected).
These functions we can use on selected HTML elements are at the core of the jQuery library.
Let’s take a look at just a few of them:
$(“div”).click( function(){ alert(“I was clicked.”); } );
Attach a click event to selected element(s) and specify what should happen.
In this particular case, we make an alert show up when ANY div element is clicked.
Because remember, the “div” selector selects absolutely all DIV elements on your page.
$(“div”).bind(“click”, function(){ alert(“I was clicked.”); } );
Exactly the same thing as above, except using the bind (as in bind event to an element) In
jQuery you can often do the same thing in a slightly different way.
64

People who are reading this book come from all kinds of backgrounds and skill levels. I don’t
mean to offend the intelligence of those who already understand the concepts explained below.
But this is the necessary information that helps us understand jQuery. It is through understanding
JavaScript basics.
I know you might think: What is this $(“div”) and why are we typing that? Or what is this
function() inside the second set of parenthesis? What you are seeing is the JavaScript syntax.
The dollar sign ($) represents the main jQuery object, which is a JavaScript function. Parenthesis
are used to pass parameters to that object/function. This is the legal JavaScript syntax.
Remember that to use a function we must first define it.
To define a function.
function( parameters ) { ..entre code here to define what this function does.. };
To execute that function:
function( parameters );
The parameters can be passed to a function one by one, separated by comma. Parameters turn
into usable variables inside the function. So, how does all of this relate to jQuery? Let’s take a
look!
The dollar sign $ or jQuery are the names of the same function. They are equal each other:
$ = jQuery = function( parameters ) { /* definition of entire jQuery library */ }
In the two examples way above there, where I am using $(“div”), here is what happens. As you
can see we first execute the $ function which is the main jQuery object. Everything in JavaScript
is an object. This is why I refer to functions as objects interchangeably. You’ll find out
what an object is later on in my future newsletters. For the purpose of this tutorial it is not
necessary.
The paremeter we are passing to the jQuery function is “div”. We use double quotes because we
are passing a string of text. We are naming a literal HTML tag using a text-based name (also
called a string of text, or simply a string). In programming a string is often referred to a line of
text (with or without spaces), in other words a string of characters like a,b,c, etc.
Had we not used the double quotes that would tell jQuery that we are passing a variable called
div. For example, then, our code would look like $(div). But you see, when double quotes are
not used, it tells JavaScript that there is a variable called div, not a string of text!
65

In JavaScript, we can define variables as follows:
var tag = “div”;
So we just created a variable called tag, and assigned the string value of “div” to it. It could be
anything “abc” or “I’ll believe it when I see it.” It does’t matter. We just created a variable containing
a string of text.
Now that we have this variable defined, calling the following code:
$(tag);
...without double quotes would be the exact same thing as calling:
$(“div”);
It’s the same thing because that’s what the variable tag is defined as - as the literal string “div”.
It’s like they switched places :-) So that’s an example of passing a variable to a function.
Had we not defined variable tag as “div” and said $(tag) then JavaScript would give us an error
and say that tag is undefined.
jQuery offers us many stand-alone functions that stem from the main jQuery object (they are
attached to it) Stand-alone functions do not require elements to be selected. For example:
$.ajax(“webpage.html”);
This function simply calls the ajax method to dynamically load a web page and return its content
as a result (commonly known as function’s return value.)
However, CSS plays an even bigger role in writing jQuery code. In fact, selecting HTML elements
using CSS selectors is an extraordinarily important function of jQuery.
I dedicate a relatively large part of the book to detailed explanations of CSS selectors. But before
we get to them let’s take a look at jQuery as a JavaScript statement.
66

jQuery as a JavaScript Statement
jQuery offers a simple syntax to execute functions, attach events to HTML elements and simplify
JavaScript programming. However, when it comes to studying jQuery from absolute zero
there is a problem. Original documentation is written by people who created jQuery. It’s therefore
written in a language that is suitable only for JavaScript experts.
Because elegance of jQuery syntax is accessible to anyone with enough interest to learn website
script programming, it’s possible to learn jQuery the wrong way using the trial and error
method.
The purpose of this section of the book is to help you understand the fundamental knowledge
that is skipped from pretty much most tutorials I’ve seen online. And these principles are so
important to understand, especially if you are still studying JavaScript.
The Basic Structure of jQuery Syntax
Let’s consider the following example:
$(“div”).bind(“click”, function() { ... } );
If you are an experienced programmer you may find delight in this simplicity. But what if you
just started studying jQuery and you don’t know anything about JavaScript? All of a sudden,
even the simplicity of jQuery’s syntax is not so simple anymore. Here we select all div elements
on the web page and attach (bind) the onclick event, represented by the literal string “click,”
which is an alias to JavaScript’s onclick event (or HTML attribute.) It looks simple to the untrained
eye.
But let’s see what it looks like to someone who understands principles of JavaScript programming
involved in this code:
67

As mentioned above, to an experienced programmer, this is pure bliss. A syntax that combines
so many complex principles into one line of code.
But what does a beginner see when he looks at this code? A beginner is faced with a dilemma,
often thinking: Well, that is just how it works, so I simply must write it this way. But this is
an incorrect way of thinking about programming. You’d simply end up memorizing the order
in which the symbols and signs (such as the $ sign, dots, brackets, etc...) are written, without
actually understanding syntax.
Let’s do another example which will try to explain the syntax of jQuery’s animation function.
The function animate() is used when we want to dynamically change a specific property of an
HTML element over a period of time specified in milliseconds. Let’s take a look:
$(“#target”).animate({ width: “100px” }, 1500, “linear”);
In order to help us understand what’s going on here, let’s take a look at this diagram:
It’s easy to simply memorize. But as you can see, there is a lot going on even in a basic example
of jQuery code. It makes sense then that there should be educational material that sheds some
light on the inner workings of JavaScript. Many online tutorials focus on the functionality, but
not on understanding of the language itself. In my understanding, this isn’t the proper way of
studying a computer language.
We already know what “#target” is. It is a CSS selector that selects an arbitrary HTML element
whose id is “target”. But JSON notation is new. On the next page we will take a look at what
JSON is.
68

Web Application Template
Click on “View Source” on this page in your browser to see the structure of the HTML file:
www.learnjquery.org/book/sourcecode/1.000.starting-point.html
This code will be used as the starting point throughout the course of this book. All demos and
samples will be built around this example as the starting point.
This simple example demonstrates something very important. It’s an example of organized
code – an essential element of a well-written computer program.
In particular, the HTML, CSS and JavaScript source code is divided into separate external files.
Namely, program.js and program.css are two separate files. When starting your own project,
it’s wise to rename these files to something which describes your program.
Making a habit of starting a new project with this template is a good idea. It allows us to work
with each individual part of your program separately, isolating a current problem.
Avoid including CSS and JavaScript code internally inside the same HTML file whenever it is
possible. If it is possible to make a file to be linked externally, make it external. Do not write all
of your HTML, CSS and JavaScript in a single file. This helps browsers cache your application.
Remember that while sticking to this rule is important, certain situations force us to write JavaScript
or CSS code inside the same file. To single out code into separate files is certainly not
a law and if you absolutely must write CSS or JavaScript in the same file then you can.
Generally, placing different parts of the code into different files will help you stay organized
and become more efficient at writing your program. It will help you save time in the long run
especially as the size of your program increases.
Dividing your code into separate sections is called code refactoring. Refactoring your code
will make web programming simple, making it easy to focus on each file one at a time, instead
of having to browse up and down the same source code file all the time.
The source code includes the following items:
1. js/jquery-1.7.1.min.js and js/jquery-ui-1.8.js are included externally.
2. $(document).ready is included as a place to initialize all of your jQuery code.
3. CSS reset code helps us to reset default CSS properties for all browsers.
69

Including jQuery In Your Source Code
In my projects I usually allocate a special space for all of my JavaScript files. I put all of the
files ending in .js into the folder “js” in the root directory of my application. Because jQuery is
written in JavaScript it has an extention of .js. So I naturally like to place it inside the “js” folder
located in the root folder of my web application.
JavaScript files are inserted into a web project at the very top of the HTML page between the
two opening and closing HEAD tags:
This is where you specify the location of the jQuery .js file
This is my website content
As you may already know, we use the SCRIPT tag to include JavaScript files. You can download
the most recent version of jQuery file from their website www.jquery.com directly from
the homepage. As of this writing, the most recent version of jQuery is version 1.7.1
But you don’t always have to download jQuery just to add jQuery functionality to your page.
Live Internet locations are also available. Simply include them using the SCRIPT tag:
Hosted by jQuery
code.jquery.com/jquery-1.7.1.min.js
Hosted by Google
ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
Hosted by Microsoft
ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js
One of the reasons you would want to let jQuery, Google or Microsoft host your jQuery file
is for the benefit of improved latency. They have no choice but to offer the fastest CDN access
to everyone in the world. The web host you are using may limit the number of simultaneous
HTTP requests made to the server by your site. The jQuery files hosted at these locations do
not have the same limitations because they can be accessed by any site at any time.
Using your server’s cache configuration you can make sure that each unique visitor downloads
the jQuery library only once. Next time they return to your website, the cached version will be
used. Unfortunatelly server-side cache configuration is not covered in this book.
70

Include jQuery Locally
What if you are working on a local computer and it’s not connected to the Internet? Sure
enough you can add jQuery by including the framework file directly from a location off the
root folder of your project. Just make sure the file is actually located there:
project_root_folder/js/jquery-1.7.1.min.js
71

Including jQuery as an External CDN-based Files
Let’s take a brief look at the basic properties of an externally included file:
1. An external file is a file that is separate from your main HTML file.
2. An external file can be hosted on the same host. In most cases, it is.
It is not necessary, however, for an external file to be located on the same host as your web
page. You can add an external JavaScript file from a separate website and it will still be included
as part of your HTML page. The code will execute.
The jQuery locations discussed on the previous page are hosted by Google, Microsoft and the
jQuery project itself. They are offered in two flavors HTTP and HTTPS. The latter stands for a
secure connection with SSL.
The subject of the HTTP protocol and secure connections will not be discussed in this book.
However, you must know about Relative URL References with regard to including jQuery
from CDN locations using either the HTTP or HTTPS protocols.
For various reasons you may be interested in including either HTTP or HTTPS version of the
hosted file from one of the discussed CDNs.
What is a relative reference? It allows us to include external file without mentioning the absolute
location such as www.mywebsite.com/js/script.js. There are similar rules at work when
choosing either HTTP or HTTPS protocols, too.
Some pages on your website will be using the HTTP protocol. Others, HTTPS. In order for
our page to include the right protocol automatically, and according to the HTML specification,
we can use the double slash // symbol, as in:
Notice the leading // symbol. It means the correctly matched protocol will be used.
This is useful, because, for example, if you were forcing the fixed HTTPS protocol in an externally
included file, on a web page that was itself using HTTP, you would encounter a “mixed
content” security message. The // also helps us properly cache the file. Note that HTTPS can
never be cached.
The golden rule is whenever an external file is offered in HTTP and HTTPS flavors, use only
the // when including it, instead of http:// or https://
This method can also improve page load speed in some cases.
72

How To Always Include the Latest Version of jQuery
Working with jQuery for a long time you notice something interesting.
The jQuery team constantly churns out new versions of the framework containing important
bug fixes. Trying to always keep your version up to date can skip your attention. A new version
becomes available, but your programs will no longer be using the advantages of the most
recent version.
There is a way to make this process automatic. Just like in the previous examples, this can be
done by including the most recent version of jQuery from a CDN hosted by someone else.
Here is an address that always points to the most recent version of jQuery:
http://code.jquery.com/jquery-latest.min.js
When fixing bugs, the jQuery team puts a lot of effort into making different adjustments to
their code. All for the benefit of greater performance and better implementation across all
browsers. Things change. When you are working on your code, you are writing it for the currently
available version of jQuery.
Let’s say you are taking advantage of adding the most recent version of jQuery automatically,
using the CDN address displayed above. Imagine that the jQuery team has committed a fundamental
change to their framework and released it under the most recent version. Without
you knowing, your website has now automatically switched to that new version of the framework.
Even though the new version is an improvement, some of your code may just not work after
that adjustment anymore, or even break the entire JavaScript execution flow. It all depends on
which parts of the framework were modified and how.
And that’s how JavaScript works. It stops working after encountering one error. next commands
will not run. Dynamic parts of your website are brought to a halt! And nobody knows
why until the problem is revealed in Firebug.
If you choose this road, always keep an eye on the latest version release. Be ready to test your
code every time a new version arrives. You may get lucky. But then again you may not. The
choice, in the end... is yours.
73

Including jQuery UI
In the Starting Point “skeleton” HTML file discussed in the beginning, we have also externally
included the jQuery UI file js/jquery-ui-1.8.js
jQuery UI is yet another library written using the original jQuery framework. jQuery UI will
not work if the jQuery framework is not included first.
With regard to this book, jQuery UI will be mostly used for animation easing styles which are
defined by Bézier curve algorithms.
jQuery UI is used for much more than animation easing styles. You can use it to create interactive
widgets like buttons, sliders, tabs, and so on...
It really makes no sense describing everything that it does in this book, because the official
jQuery UI website www.jqueryui.com/docs/Getting_Started is an excellent manual that contains
a complete walk-through of every single feature. It has a phenomenal navigation and easy
to follow instructions.
I recommend coming back to that page after you have learned the basics of jQuery.
In order for some examples from later chapters of this book to work, jQuery UI library must
be included. I like to always include it in my projects because I just might need it.
74

CSS Selectors
This section is about CSS Selectors, the importance of knowing what DOM is and learning to
select elements of all kinds in different ways.
CSS selectors play crucial part in jQuery development. Many people are comfortable with just
learning a few selectors. But using selectors in combination with jQuery functions further enable
us to make complex selections. For example next, prev and parent functions let us quickly
jump from one HTML element to the next.
You want to learn as many selectors as possible if you want to increase your productivity. But
don’t learn them all at once. Experiment with one selector at a time, and build your knowledge
on your past experience.
Let’s consider some of the very basic jQuery selectors. The green areas indicate the area of a
web page being selected by the corresponding jQuery code displayed below each example:
$(‘body’); $(‘#orange’); or
$(‘div#orange’); or
$(‘body div#orange’);
$(‘#orange’).parent();
In the first example we select an element by tag name BODY. In this case, we are selecting the
entire body tag. Notice that the children of BODY are not selected only BODY is.
The second example uses the # symbol which selects elements by id attribute. In this example
when id = “orange”. All three selectors in this example do exactly the same thing but with a
different level of accuracy. #orange selects any element with that id but div#orange selects a
div element with that id. Remember that there can be only one unique id per element.
Third example shows how we can select BODY by referring to it as the parent of a child within
it using the function parent(). The DIV in this instance is a child of the parent tag BODY.
The function parent() is part of a set of functions for traversing nested HTML tags within the
DOM (Document Object Model). Other traversing functions exist such as next() and prev()
which will be discussed shortly. CSS Selectors operate on the DOM structure of the entire
document starting at the very top. $(“*”) selector selects all tags, even ones above .
75

What Kind of Elements Can You Select?
jQuery selectors can select pretty much any HTML element. And if you understand the basics
of DOM (Document Object Model), you are at a great advantage. Using your knowledge of
DOM and jQuery selectors together can significantly reduce the time you spend developing
dynamic JavaScript applications.
Here is the basic idea of the DOM. It looks like a tree. The HTML code equivalent of this
DOM structure is displayed below the diagram.
A Clockwork Orange
A Movie
By Stanley Kubrick
76

The DOM is pretty easy to understand. It is very useful for thinking about your jQuery selectors.
But it’s surprising how many people ignore it. Respect the DOM. Don’t ignore it.
CSS Selector code is the first parameter of the main jQuery object. Let’s quickly take a look at
the definition again:
jQuery = function(selector, context) { /* Library code */ }
The selector argument is one of the most frequently used parameters of jQuery. Many people
don’t even realize that there is a second argument that they can pass, called context. I’ll get
back to that later in this tutorial.
The selector parameter specifies the CSS selector code. Once the element in question is selected,
we can run a function on it.
jQuery(‘div’).hide();
This will select all DIV elements within the BODY branch of the DOM.
If multiple elements have been selected, this function will run on all selected elements. This
means, it will hide all DIV elements in BODY, even though BODY is not even a part of the
definition. It is assumed that the first selector refers to the BODY branch in DOM. We can
explicitly specify BODY in our selector, as you will see in the examples below for the sake of
being complete. But it is not always necessary.
Common CSS Selector Examples
Let’s take a look at some of the most common jQuery selectors that you are probably going to
be using all the time.
Probably one of the most common selectors is the # symbol. It stands for selecting a DIV with
an ID specified immediately after the # symbol.
jQuery(‘#dog’).hide(); // Select an element that has ID of “dog”, and hide it
jQuery(‘div#dog’).hide(); // Select DIV element that has ID of dog, and hide it
We can always refer to an element with an ID of “dog” as #dog in our jQuery selector. If we
want to be specific and select a DIV with an ID of “dog”, we can use “div#dog”. Of course, this
is a matter of semantics. Following the rule that there could (or should) be only one element
with a unique ID per webpage, it probably makes no sense prefixing the selectors that start
with # with the name of an element.
77

To traverse the DOM and make sure that we are selecting the right thing, we can use the
SPACE ( ) operator. The space operator lets DOM know exactly which branch we want to traverse:
// Hide all DIVs inside BODY, but not BODY itself
jQuery(‘body div’).hide();
// Hide all DIVs inside first DIV child of BODY, but not DIV child itself
jQuery(‘body div div’).hide();
// Hide all DIVs inside first DIV child of BODY whose id is #secret
jQuery(‘body div#secret div’).hide();
Note that none of the elements before the last space are actually selected. Only the last one is.
The values before the last space simply indicate the DOM path to traverse, but the path itself is
not selected, only the last element in the path.
CSS Selector Reference
The following diagrams visually explain how many jQuery CSS selectors work. Print it out,
you may find it as a useful reference to keep on your desk. Green indicates selected result.
In the first two examples we select arbitrary elements, one with id “clockwork” and another
with id “orange”. We then use the prev() and next() functions respectively to traverse back or
forward within the parent element. Function prev() steps one element back within the same
hierarchy. Function next() steps one element forward. The third example doesn’t select anything
at all. Why not? This is because there are no previous elements before the element with
id “orange”. The prev() function will not select the parent of current hierarchy.
78

Using Colon-based CSS Selectors
In this section I want to explore the colon (:) in jQuery selectors. The colon is like a mini
helper tool that lets us converge to the element we are searching for with greater precision.
Below I list most of the cases in general when the colon is used:
Colon-based CSS selector Practical example What it selects
:first
:last
:even
:odd
:eq(index)
:gt(N)
:lt(N)
:not(selector)
:header
:animated
:contains(text)
:empty
:hidden
:visible
$(“p:first”)
$(“p:last”)
$(“tr:even”)
$(“tr:odd”)
$(“ul li:eq(3)”)
$(“ul li:gt(3)”)
$(“ul li:lt(3)”)
$(“input:not(:empty)”)
$(“:header”)
$(“:animated”)
$(“:contains(‘clockwork’)”)
$(“:empty”)
$(“p:hidden”)
$(“table:visible”)
The first p element
The last p element
All even tr elements
All odd tr elements
The fourth element in a list (index starts at 0)
List elements with an index greater than 3
List elements with an index less than 3
All input elements that are not empty
All header elements h1, h2 ...
All animated elements
Tag contains text ‘clockwork’
All elements with no child (elements) nodes
All hidden p elements
All visible tables
I chose what I thought were the most important colon-based selectors. It’s not that colonbased
selectors are used less frequently than selectors like # (id) and . (class) but it’s that they
are used to compliment the id and class selectors.
To see the full list - http://api.jquery.com/category/selectors/
The colon selectors are often used with input-based elements when working and manipulating
radio buttons, the select and option elements, check boxes and textareas.
The number of the colon-based selectors can overwhelm someone who is just starting to learn
jQuery. My suggestion is to choose one to practice with until you fully understand how it
works and then move on to the next. In fact, if you do this for a few days, you’ll get them all
down in no time.
I Selected an Element. What’s Next?
jQuery gives us an easy way to select HTML elements. But what’s next? Just selecting an element
is like turning the ignition on and just sitting in the car waiting for something to happen.
In order to get a greater insight into this, let’s take a brief look at objects and JavaScript.
Sometimes we want to work with the this object which refers to the object that your Javascript
program flow currently has focus on, during the execution time of your script.
80

Here is a basic inline CSS example of the this keyword in action:
Iris
I highlighted the part of top interest in yellow. This is the inline JavaScript code located within
the onclick attribute of the arbitrary DIV element. Before I talk about this example in the context
of jQuery selectors I need to mention one important thing.
Don’t worry if you have never seen the this keyword before. Or if you have seen and used it
before but didn’t understand where exactly it comes from. I don’t blame you. Learning about
the this keyword from an inline JavaScript example like this is wrong. Yet, many inline JavaScript
examples use the this keyword without explaining what it actually means and how
to think about it. For now, just know that the this keyword is a self-reference to the object it is
used within. In this case the DIV with id “iris.”
HTML is a very fluid language to work with. Elements are typed in, and then, as if by a swing
of a magic wand a block or a table representing the website layout appears in the browser.
But what not many people know is that every time an HTML element is defined, inside the
program something that is called an object is created to refer to that element. The entire
HTML page can be referred to by using these objects alone.
As you place more elements within elements, these objects also become nested within the
structure of the entire document. This is called DOM or Document Object Model.
What happens when we select HTML elements using one of the jQuery selectors? It’s important
to think about DOM and the this keyword when discussing CSS selectors because the
jQuery selectors traverse DOM structure to find the right element.
You will learn much more about JavaScript objects and understand what they are later in the
book. But for now let’s return to our discussion of CSS selectors.
In the context of the example above, the this object refers to the element it is used in. In other
words, because onclick attribute is inside the DIV element identified with id “iris,” the this
keyword refers to the object of that DIV element. Intuitively then, we can use the style object
to modify the background color of the element and se it to “gold”, which is a pre-defined
HTML color name. It could have been red, green, blue, etc. or even #FF0000. The this keyword
allows us to apply an HTML style to itself, the DIV element it refers to.
Thinking that the this keyword was designed to be used as inline JavaScript only would be
a mistake. The origin of the this keyword has nothing to do with inline JavaScript. It has to
do with the concept of objects as used in computer science in general and more importantly,
within a computer program itself. The onclick attribute is simply one of the places where it’s
allowed for us to write JavasSript code.
81

We just used inline JavaScript to add new functionality to a DIV element. Clicking on this DIV
element will now turn its background to gold color or any other color of your choice.
The same exact effect can be achieved by rewriting the inline JavaScript code within the onclick
attribute. Let’s do that using jQuery this time:
$ is the main jQuery library Object
A few things are happening here:
Which CSS style to modify? What to change it to?
onclick = “$(this).css(‘background’, ‘gold’);”
This HTML element “css” is one of many jQuery functions
1. We start by calling the $ function, which is just another variable name for jQuery.
2. The this keyword is passed as an argument to the jQuery function to select current DIV.
3. Function css is called. It is one of the many functions offered by jQuery library.
4. Two arguments are passed to the css function:
a. The argument “background” tells the css function that we want to modify background.
b. The argument “gold” tells the css function to change its color to gold.
Here we pass the this keyword as an actual parameter directly to the jQuery object. The entire
JavaScript statement highlighted in yellow can be translated as:
When it is clicked, change the background color of this DIV to gold.
Before moving on to the next subject we need to understand one more thing. In the beginning
of this section we discussed that CSS can be selected using all kinds of different selectors represented
by a string of text. For example the string body would select the HTML element body
which encompasses the entire page. Something like #orange or div#orange would select any
element whose id is orange or a DIV element whose id is orange, respectively.
Remember that the dollar sign function is just a JavaScript function like any other. And in this
example, instead of passing a string we are passing the this object to the same exact function,
the dollar sign. And it still works. The parameters of a JavaScript functions are typeless. The
type of the argument is ignored.
If the this object is passed, jQuery is able to recognize that automatically and works directly
with the object itself. When, on the other hand, it sees that a string is passed to it, it first determines
which HTML elements this string describes and only then finds the appropriate object
or objects to select directly from the DOM structure of your page.
82

Because the DIV element has ID of “iris”, the same exact effect could be achieved by writing
the following jQuery command. This command is not called from within an onclick event. In
fact, it can be called from anywhere where JavaScript code is allowed in an HTML document.
$(“#iris”).css(‘background’, ‘gold’);
This command will select any HTML element whose id “iris”. Notice the # symbol telling the
selector to find any element with that id. The css part remains exactly the same. Just as in the
previous example css is the function we want to apply to selected elements. Whatever was selected
will now be liable for receiving the new css style.
jQuery offers a long list of functions that can be applied to the selected elements. These functions
make it easy to apply CSS styles and even dynamically animate the size, position or colors
of an element. You can hide elements, change their CSS properties; as in the example above
or attach events to elements.
On the previous page we took a look at how using inline JavaScript we could add jQuery code
to an attribute of an HTML element. We used the onclick attribute to change something about
that element when it was clicked. In other words we attached a user event to that element.
Using jQuery it is possible to attach an onclick even to any element without having to use
inline code. This is acheived using bind and unbind functions. The modern version of jQuery
library suggest that we should use the functions called on and off. But that’s like getting a little
ahead of where we are right now. Events are explained later on in the book. For now, just know
that jQuery is a powerful library that is not limited to merely changing CSS styles.
jQuery gives us access to a number of very helpful functions. But what are they? Let’s take a
look at some of the most popular jQuery functions.
Function Practical example What it does
css(style, value)
hide()
show()
prev()
next()
parent()
html()
text()
animate()
css(‘background’, ‘red’)
$(‘div’).hide()
$(‘div’).show()
$(‘div’).prev()
$(‘div’).next()
$(‘div’).parent()
$(‘div’).html(‘new’)
$(‘div’).text(‘new text’)
$(‘div’).animate({left: “100px”}, 1000)
Apply a CSS style to an element.
Hide all DIV elements. As in display:none;
Show all DIV elements. As in display:block;
Go to previous child within same DOM branch.
Go to next child within the same DOM branch.
Go to the parent of the currently selected element.
Replace the actual HTML content of an element.
Replace the content of an element with text.
Dynamically move the element to left: 100px;
83

This table lists only some of the functions. I tried to choose some of the most important ones
that I myself use often. There are many more functions related to each specific sub-group of
tasks: events, CSS, visual effects, animation, Ajax, utilities and more.
Making Complex Selections
I want to conclude by showing you an example of a complex CSS selection. The idea came
from a real project I was working on where I wanted to update a table cell, based on whether
any text located in an input field in an adjacent table cell has been changed. I wanted to update
the “has been edited” state every time the input in any table cell lost focus.
This would then change the text in an adjacent table cell from ok to ch, an indicator that “the
value has been changed for this element”. This way later I could simply grab (again, using
jQuery) only input fields that have been changed to new values and send it to the script to update
them, while ignoring values that were unchanged.
$(document).ready(function()
{
$(‘table td:nth-child(3) input’).change(function()
{
$(this).parent().prev().html(‘ch’);
});
});
Item Status Input
First Name ok
Last Name

After selecting all of these input boxes, we attach the change event to it, and assign it a function.
Whatever goes inside the { ... } brackets of that function will execute every time the input
field loses focus (when you click out of it, in other words onblur).
Note that the nameless function closure inside the change(...) event will actually be assigned to
each individual cell in the third column of this table, one by one (the function is assigned for
each table cell in the 3rd column). This is what the table td:nth-child(3) input selector does. It
goes into each cell of the third column one by one, using each cell as the starting point.
We use the jQuery’s parent() function. The parent of the selected input box is the TD cell in
which it is located.
We now use the prev() function on parent, to go back one TD cell. This is because the previous
child of the TD in which the input box is in, is the “status” TD. That’s the one we need to update.
This means we are now in the “status” TD cell.
Let’s modify the status TD cell with a new message, because the input has been modified for
that row’s input box. We use html(‘ch’) function. The default HTML in the status cell is “ok”,
and now we change it to “ch” (for: it has been changed!), or also known as “dirty” in the software
developer circles.
Of course you can get creative and do whatever you want, change the cell’s background color
by using css(‘background’,’ red’), or even insert a custom image icon indicating a “changed”
state. The point is that by using DOM’s element associations, we were able to traverse the
DOM tree backwards and into the element we needed to update. And all without using spiderweb
code.
I believe that this example illustrated how much more simple your Javascript development
can be using jQuery. Try to stick to similar ideas presented here. Traverse fields using their
children and parents, instead of directly accessing them by ID. This can be extremely powerful
technique and keeps your code clean and easy to edit.
85

More About CSS Selectors
Selecting things is at the very core of jQuery programming. Even though the previous chapter
has already covered jQuery CSS Selectors there is much more to selecting HTML elements.
Selecting Things: A Bird’s Eye View
Selecting things doesn’t have to be complicated. However, there are many cases when the
HTML is just way complicated. In many instances, people rush to assign many IDs or CLASSes
to everything and go from there.
The ID and CLASS attributes are not the best tools in this situation. In order to swiftly navigate
the DOM tree structure, jQuery presents us with very neat tools. This tutorial will outline
some of the most effective selectors to use in many common situations.
At first, I started this tutorial with the focus only on input elements such as input, textarea,
checkbox, radio button and select/option tags. But eventually as I continued updating it, it
evolved into something much more.
I still cover input elements at the bottom of his page, but I’d like to also talk about many other
ways in which you should be selecting your elements. The best idea is to go through them one
by one, and follow these clear diagrams below, that I think really make a good point of what
each type of a selector will do.
Once you memorize these ways, you will never want to go back to your old ID and CLASS attributes.
One of the reasons for this is that each element already has a name - it’s tag name.
jQuery allows us to refer to these tags by their name, and in some cases we can refer to them
by not even using the name or ID of an element we want to select. How is this possible? Let’s
compare the most common mentality of a jQuery enthusiast to one of a more experienced
programmer.
The main difference here is that when just starting out people tend to assign ID and CLASS attributes
to everything. Is this the right way of doing things?
Figure 1. explains mentality of the beginner jQuery programmer because everything is assigned
an ID (and in many other cases a class, though, this is not shown on the diagram).
Why is this a popular mentality of someone who just started out using jQuery? Well, it’s probably
because they only learned how to select elements by ID or a Class name and refused to
learn other types of selections one can make using advanced selectors and DOM traversal
techniques that jQuery has in its arsenal.
86

Figure 1
Mentality of a beginner jQuery programmer.
Everything has an ID. Sometimes
even elements that don’t need them.
Figure 2
Mentality of an experienced jQuery programmer.
It’s a clean slate, and there are
different ways to get to elements. Not
every element deserves an ID.
What’s up with the “blank” mentality in Figure 2? A more experienced jQuery developer will
look at the DOM as a clean slate. There is no need to assign an ID to every single element just
to refer to it. In fact, this is possible because you can select any element without assigning a
single ID or CLASS attribute to them.
But at the same time, we know that referring to an element by ID is the fastest way to select
an element. We have already discussed how you can use context, the second parameter of the
jQuery ($) function to select a proper context and speed up your jQuery code. So, IDs should
not be completely avoided. But they should not always be considered as the only method of
element identification either.
Because of this...it should be understood that a versatile jQuery programmer must create a
balance between the two mentalities, not to ignore one of them completely. However, he or she
must first consider Figure 2 and ask these questions:
1. Does assigning an ID to an element in your DOM really improve your DOM?
2. Or does it complicate it?
3. Are there performance benefits of using ID attributes?
87

Can you avoid using IDs or classes? In many, if not most, cases it’s very likely that you can! The
rest of this tutorial will use this knowledge to show you how to effectively use these methods
to select pretty much anything you want without creating an ID or CLASS infestation in your
HTML code for every single element. But first...
Get in the Habit of Using Context
Thinking about context, or the confinement area of your selection is not always about speed,
but rather, it’s about organizing your code and the way you think about CSS selectors. Let’s
take a look at the following diagram, in which two similar DIV elements serve as the context
of a selection.
Notice that the contents of each of the two DIV blocks defined as possible contexts are arbitrary
elements of any type. This is the “clean slate” mentality of an experienced jQuery developer.
We want to avoid assigning IDs to most of them, unless you really are certain that it will
make your elements easier to select.
When it comes to choosing a selection within a context element, we need to think of assigning
an ID to the context element. The diagram above is just a simple example. However, you will
need to use the code from your real-life HTML page in order to determine what that context
should be in the first place... that code may not look so simple at all. Especially this is true
when you are working with someone else’s code and seeing it for the first time.
You may think, well, what is the benefit of not using IDs everywhere? The benefit is mostly in
the alternative way of thinking about your code. It has no other advantages whatsoever. But
this alternative, “careful” way of thinking will determine your efficiency as a jQuery developer
in the long run.
Let’s take a look some of the ways in which this way of thinking can be helpful.
88

Whose Children Are These?
If we are to avoid using IDs completely, except when we need to assign them to a context, how
do we navigate the DOM?
We do so by using parents and children. But which elements are children of which parent
elements? How does the DOM determine that? Just like in the real world, children belong to
parents. But those parents can also be children of their parents, and so on. It’s just a matter of
perspective. Let’s take a look at this diagram that explains relationships between parents and
children:
If each box on this diagram represents an HTML element, then the first child of the body tag is
also the parent of all green children.
The second child of the body tag is also the parent of all yellow children.
Each individual yellow “child” is also an HTML element. Then black children 1, 2 and 3 are the
children of one of the yellow child whose parent is the second child of body tag. Trivial stuff
when you have a visual guide.
Using :nth-child Selector
Instead of using IDs for everything we will use the :nth-child selector that works on tag names
Let’s assume that we have a DIV and that we have a few other elements stored inside it; in particular
a DIV element, a SPAN element followed by 3 more DIV elements:
89

The :nth-child(2) will select the span element. Index 2, in this case is the literal 2nd child. Indexing,
in this case, does not begin with 0.
A Small Detail About Using :nth-child Selector
The jQuery’s implementation of nth-child selector is somewhat peculiar when dealing with
children of different types in the same parent. If we take the diagram from above as an example
and create a selector such as this one:
$(“body div div:nth-child(2)”)
It will not select anything at all. The second DIV child (whatever that may mean in this case?)
simply doesn’t exist. Because the second child is an element of type SPAN, not DIV. Logically,
you would think this selector would choose the DIV after the SPAN element. But that would
be wrong, because that DIV element can be rightfully selected as div:nth-child(3).
Had all of the elements been of type DIV, then this selector would actualy work.
You can see now that this selector prioritizes the notion of child, not what type that child is...
but that it is a child. It’s just how it works when different types of elements happen to be children
of the parent element. This is not a bug.
90

Next, let’s explore the possibility of making a selection using the first and last keywords.
First and Last Children
There are three different ways in which jQuery allows selecting HTML elements by first or last
element in a container. Consider the following diagram:
It doesn’t matter which way you choose. However, the colon character allows us to “glue” the
selector to a particular element kind. The example above does not explicitly state what type of
an element we are selecting. In order to do that, you would write something like div:last.
If you are going to explicitly specify the type of an element you want to choose, such as DIV
(not shown in the diagram) notice that there would be no space between div and the colon
character.
If there was a space between div and colon, however, it would mean a completely different
thing. Remember that the space is a selector in its own right, it means “go inside the element”,
so the selector such as div :last would seek the last child of an element located inside an arbitrary
div block anywhere on the page - it would even select all children of any DIV element on
the page.
91

Selecting by “empty” Element
We can also select elements that are empty as in nothing here. An empty element
is an element that doesn’t contain any text or other elements within the two enclosing tags.
In third example, even though there is clearly a value assigned to one of the input elements
the :empty selector will still select both input elements. Why? Because is technically
empty. It is not like . The :empty selector only works on a pair of tags. It checks the
content between two tags, not the value attribute. (At least as of 1.7.1 version of jQuery.)
Hidden or Visible
This is self-explanatory. You can select an element that is hidden (has visibility:hidden) or an
element that is visible by using the following selectors:
$(‘:hidden’) // select all hidden elements
$(‘:visible’) // select all visible elements
Even or Odd
One of the unique types of selectors jQuery offers are the :even and :odd selectors. You can use
:even or :nth-child(even) interchangeably, they select absolutely the same things.
92

jQuery Events
Because jQuery is so simple to use, lots of times people don’t even want to understand what
events are. As long as they can just use the functions with short names like click() or css().
If you don’t understand what events are, now is the time to learn. If you are pursuing an interest
in jQuery, you are likely to end up learning other programming languages as well. Those
languages may use events, and even the same concepts such as event bubbling. I will get to
event bubbling later in this tutorial, but for now let’s see how events can be triggered.
Let’s not overlook the nature of events in general. jQuery provides us with an interface to existing
Javascript events. All events that there is a jQuery function for, are actually tied to some
Javascript event.
Javascript event functionality is hardwired into the browser’s implementation of Javascript in
that browser. Most events are assigned to empty functions from the start. We can extend the
functionality of an event, by overriding that function with our own. So then, the most important
thing about events, is that we know what their names are and what they do.
Learning what events are available to us is something that comes with the experience of writing
Javascript code, but I also included a table of all jQuery events in the last section of this
tutorial. For now, let’s take a look at one of the most basic examples, where an event is attached
to the main window object.
Consider the following jQuery selector and event handler function:
$(window).load( function(){ alert(‘Window finished loading.’); } );
I highlighted the handler function in yellow. This is also known as an anonymous function
because this function doesn’t have a name. By using an anonymous (or nameless) function, we
simply want the code to be executed as soon as we define it within the same statement. We are
not concerned with that function’s name. That is why we omit it. This function is the code you
want to be executed when a jQuery event occurs. In this case we have chosen the load event,
which is the equivalent of the window.onload event, as shown below:
window.onload = function() { alert(‘Window finished loading.’); }
Can we use the code above instead? Yes, we can even use the old-school onload = “” in the
body tag in the HTML of the webpage.
93

Either way, exactly the same event will be triggered. But this is a simple example. Sometimes
some events require different syntax, based on which browser you are writing your Javascript
code for. jQuery saves us from thinking about those details.
jQuery just makes using events more convenient for the developer. Most of the time jQuery
events are expected to work exactly the same in all browsers with just a few exceptions, for example
the events related to capturing keyboard key strokes may not produce the same results
in some versions of Internet Explorer.
Two ways of attaching an event handler to an event.
jQuery offers us with two ways of attaching event handlers to Javascript events.
One way is by using the bind(event, handler) function, in which you are required to specify
the name of the event you want to target, and the handler function, which will run when that
event is fired.
The other way is to use the function designed to handle a specific event.
Also remember that jQuery events operate on jQuery selections made prior to attaching the
event function to them. Here is an example of the first method, using the bind() function:
$(window).bind( “load”,
function()
{
alert(‘Window finished loading.’);
});
And here is the equivalent using the second, a more direct method:
$(window).load( function() { alert(‘Window finished loading.’); } );
Will you use bind or call the load function directly? The choice is yours. It really makes no difference.
How to Unbind an Event
The title of this section should have probably read: Why should we unbind events?
Whenever you bind an event handler to an event, you tell the processor to allocate memory for
it. The more event handlers you have running at the same time, the more memory you are using.
This is why it’s important to unbind or detach your event handlers soon as you no longer
need them.
94

Of course, the effects of binding a few event handlers are invisible in short script programs, the
practice of unbinding events becomes more important when dealing with large web applications.
But it’s still a good habit to have.
In order to unbind an event you call the function called unbind():
$(window).unbind(“load”);
The code above will unbind the “onload” handler from window that we attached previously,
whether it was attached using the bind function or the load function. Of course, in this particular
case, this is a faulty example. Javascript probably already unbinds the event handler of
onload event internally, because it can only fire once. So they unbind it once it has played out.
But this is just an example. Most events will not be unbound automatically. That’s programmer’s
responsibility.
Sometimes, you will only want to bind an event once, and remove it once it has played out.
There is another jQuery function that fits this discussion. It is called one(). This function binds
an event handler to an event, and unbinds it soon as it is finished executing. In other words,
consequent events will not be triggered.
Let’s attach the click event to an arbitrary HTML element with ID “orange”:
$(“#orange”).one(“click”, function() {
alert(“This will be displayed only once.”);
});
The code above is the exact equivalent of the following:
$(“#orange”).bind(“click”, function( event ) {
alert(“This will be displayed only once.”);
$(this).unbind( event );
});
Applications can get complex, and there are many ways to bind and unbind event handlers to
events. So, what is the smartest way of binding and unbinding? It depends.
If you are using only your own script, and are not planning on using any outside libraries, all
that we have just discussed will suffice.
But how to write code carefully, in a way that doesn’t clash with what other scripts may be doing
to the same elements we are?
95

There is, indeed, a third way to bind and unbind event handlers. An example can be seen below:
var handler = function()
{
alert(‘The quick brown fox jumps over the lazy dog.’);
};
$(‘#orange’).bind(‘click’, handler);
$(‘#orange’).unbind(‘click’, handler);
By naming our event handler (so that it is no longer a function closure) and separating it from
the bind and unbind functions, we are able to explicitly tell jQuery to work with the original
location in memory of the object that we created.
This means that you will be binding and unbinding only click events assigned by your script.
Imagine if some other script (not developed by you) assigns a click event handler to the
HTML element with ID “orange” and that we unbind it by accident using our code. We would
interrupt the flow of that other script.
But Javascript code can be very sensitive to syntax being used. There is one more precaution
you should be aware of when binding and unbinding your event handlers. Consider the code
below:
$(‘#orange’).bind(‘click’, function()
{
alert(‘The quick brown fox jumps over the lazy dog.’);
});
// This will NOT unbind the event handler attached above
$(‘#orange’).unbind(‘click’, function() {
alert(‘The quick brown fox jumps over the lazy dog.’);
});
The unbind event in the example above will not actually unbind the event handler attached
with the bind function right above it. Why not? Because the first function created a function
closure located at an arbitrary address in memory.
The second function did the same thing. Essentially, we are telling Javascript to unbind an
event handler we have just created, yet, instead of giving the unbind function the handle to
that event, in the second example we are trying to unbind a brand new function we are creating
at the same time.
Nameless functions that we have specified “on the fly” will always be stored at a new, unique
address in memory even if their contents are exactly the same.
96

Using toggle() Events
Toggling between two values or two different CSS element styles is not supported natively by
Javascript. There isn’t a “toggle” event. jQuery makes this possible by adding its own toggle
event that will actually use Javascript’s native “onclick” events.
The event handlers attached to a selection with the toggle() function will be triggered on a
mouse click event. Think of toggle() as an advanced click event that can do more than one action,
based on how many event handlers are passed to this function.
$(document).ready(function()
{
$(“body”).toggle(
);
});
// Do this the first time selected element is clicked:
function() { $(this).css(‘background’, ‘#ff0000’); },
// Do this the second time selected element is clicked
function() { $(this).css(‘background’, ‘#0000ff’); },
// Do this the third time selected element is clicked:
function() { $(this).css(‘background’, ‘#ffffff’); }
// etc.. and then start over with the first event handler again
Pass as many event handlers to the toggle function as the states you want to be toggled on
mouse click. Most of the time this function will be used with just two event handlers for “on”
and “off ” state. The example above uses 3. Every time you click on the “body” of your page, it
will change colors, first to red, then to blue, and then finally back to white. Click a fourth time,
and the process starts all over again with triggering the first event handler again.
What is Event Capture and Event Bubbling?
Without understanding the DOM, you can’t understand event capture and event bubbling. In
one of the previous newsletter episodes I explained the DOM using a simple diagram. It’s basically
a tree of elements. Children are attached to their respective parent elements. And there
can be more than one child attached to the parent. Children can also be parents of their children,
and so forth.
The DOM has two ways of detecting events. One from the top down and the other from the
bottom up. The first method is known as event capture, the second is called event bubbling.
97

Event Capture
Even though the image was clicked, the image element is not the first to actually receive the
first event. Instead, the event is first processed by the document. In other words, the document
captures the event first. It then passes it to first div element, then to the second, and finally the
event arrives at its target, which is the image element. Each of the “ancestor” elements of the
target (img) receive the event and pass it on until the target element is reached. The target element
is defined by the original element that receives action first.
Event Bubbling
Bubbling is the reverse of capture. In this case, the target element that receives the action, such
as a mouse click, will process the event first using its event handler. Then, the event “bubbles”
up the DOM ancestor tree, all the way to document. Sort of like the bubbles in a glass of champagne.
Both event capture and bubbling happen behind the scenes, and many developers are not
aware that this is even happening while working with jQuery event functions. But this knowledge
is important because it is often the source of confusion when it comes to writing complex
script programs.
List of All jQuery Events
Your productivity as a jQuery developer will depend on how many event names you can recall
from your memory. The more events you commit to your memory, the less time you will
spend looking them up. Below is a table containing some of the jQuery events. You can see a
list of all jQuery events by going to the link below the table. I just didn’t want to clutter this email.
The link redirects to a page that can be printed out for your reference.
Event function Event description
.bind()
.blur()
.change()
.click()
.dblclick()
.delegate()
.die()
.error()
.focus()
.focusin()
.focusout()
.hover()
.on() and off()
Attach a function to an arbitrary event of your choice.
Attach “focus left a selected element” event.
Value of the selected input element has changed.
The selected element(s) has been clicked.
The selected element(s) has been double clicked.
Old function for .on(), use. on() instead.
Remove all events that were attached with .live()
Bind a handler to the “error” Javascript event
The selected element(s) received cursor focus
Detect focus of an input element nested inside an arbitrary parent (the selection)
Detect the loss of cursor focus of an input element nested inside a parent.
Mouse enters the area of an element.
New function equivalents to use instead of .bind() and .unbind()
For the full list of jQuery events refer to this page:
www.authenticsociety.com/jquery/list-all-jquery-events.html
98

Speed Up Your jQuery Code
jQuery is a great library for writing interactive web applications. It has a large feature set, it’s
extremely easy to use compared to the plain Javascript code and it is cross-browser compatible.
Write code once and it will work in all browsers just the same. Well, 99% (most of the time).
As you learn more about jQuery, you will start writing more complex CSS selectors and you
will discover more advanced functionality. But if you are not attentive enough when using
jQuery, chances are you will be writing inefficient code.
When I learned my first computer language, C++, I also learned that you could write a program
using pointers (references to an address in memory) that could literally crash your computer.
As a C++ programmer, it was your responsibility not to access memory you shouldn’t
have.
A similar type of responsibility exists when writing jQuery code, but not many web developers
are aware of it. Misusing jQuery selectors in combination with literally “selecting too many
things”, can cause a major slowdown in processing speed of your queries.
jQuery selectors can’t crash your computer. But they can possibly freeze your browser. This is
mostly true when it comes to CSS selectors. The versatility and easiness with which you can
access the DOM, you could be selecting too many things you don’t need to, without knowing
it. By doing that you can overwhelm the system resources of your browser and slow down the
functionality of your site.
The jQuery development team were aware of this situation. Therefore, they invented a solution
to this potential problem. They called it context.
But before we get there, let’s consider the general rules when writing high performance code
using Javascript.
The first rule of Javascript Performance
All Javascript frameworks can only be as fast as the native Javascript implementation.
That’s up to the people who developed the browser you are using and the processing speed of
your computer. But this also means that no matter how clever your jQuery selector code is,
there is a very realistic chance that you are not going to outdo limits set by the developers of
Javascript as part of your browser’s implementation.
99

When selecting elements, and as far as performance of Javascript goes, the best you can do is
to use the two utility functions getElementById() and getElementsByTagName(). And as you
may know, DOM manipulation is computationally expensive.
It’s important that we minimize the number of DOM requests. Working with 5-10 nodes will
probably not make a big difference. But what if you are looking to select a lot of things? By a
lot, I mean 1000? Or 5000? It’s not unreasonable for more advanced applications to select a
large number of elements. How does this apply to jQuery?
jQuery has a plentitude of ways in which you can select elements. We already went over a decent
number of selectors and the things you can do with them in the previous tutorial. The act
of selecting multiple elements is not without consequences. Don’t be fooled by the simplicity
of jQuery selector syntax. This is where context begins to play an important role.
Let’s take a closer look at the $() function offered by jQuery. Remember that you can use the
dollar sign and the keyword jQuery interchangeably.
jQuery( selector, [context] )
As you can see, jQuery actually takes two parameters. The second one, indicated by square
brackets [ and ] is the context, and it’s optional. That is why so many people tend to be unaware
of its existence.
We already know enough about the selector parameter. It’s a set of elements intermixed with
helper characters (such as the space, a comma, brackets or an arrow) that tells jQuery what
you want to select.
You can use the nth-child keyword to select a specific element by its index location in the
DOM node. You can select elements based on whether they are visible or not, by their class, by
id and by their type. You can go crazy because combinations abound. Some complex combinations
can also slow you down when you are walking wearing a pair of your jQuery selector
shoes. The selector argument is your left shoe. The context is your right shoe. Let’s see how we
can use these shoes to outdance any amateur jQuery developer.
Our first rule of Javascript performance states that frameworks can only be as fast as the native
Javascript implementation in your browser. This means that our fastest selector for a single element
must be using getElementById(). It needs to only find one element of your choice in the
DOM. It must then stop its search, without having to look for anything else. In addition, you
can use getElementsByTagName(). This function will result in a collection of elements based
on their tag name like DIV, SPAN or TABLE, etc.
100

Let’s now look at the jQuery way of doing these things:
$(‘#clockwork’) // will use getElementById()
$(‘div’) // will use getElementsByTagName()
A thinking man is now confronted by this logic: If we are to use jQuery we must stick only to
these two ways of using selectors. But this will surely defy the very purpose of why that man
decided to use jQuery in the first place?
Having thought this, what do we now do in order to write high performance code using the
flexibility of jQuery selector variations that stretch beyond the two examples? We do this by
providing the context.
The second rule of Javascript Performance
By laser-targeting the area which we want to operate on, by defining the confinement of, and
making specific the DOM block we will be working with, and by eliminating all the other garbage
we don’t need to include as part of our selection, we increase performance of our jQuery
code.
Like a horde of provoked hounds, by default jQuery selectors will start their search from the
very top of the DOM tree, and propagate down all branches. We can exclude some of these
branches from the search algorithm entirely. By searching less space, we find what we are looking
for faster. This way the browser will do less work and your program will execute faster. The
hounds have less distance to travel.
The second argument of the jQuery function, immediately after the selector parameter is the
context argument. It’s a means to choose the branch of DOM you want to work with, ignoring
all other branches in the tree of HTML elements.
The default the context is the Document. The whole DOM tree. That’s what we search if we
skip the context parameter. This can be a lot of markup to select, that we don’t really need to.
But when we pass in a reference or another $() selector, we can reduce this area significantly.
All of a sudden, context becomes our best friend, and not the scary, enigmatic entity you never
wanted to learn about.
Choosing the Right Context
Context is incredibly useful. We now know this. But before you go and start using it in your
own website, consider that misusing context can lead to negative results. In order to demonstrate
this, we will consider the following example.
101

Let’s say that we have a form residing in an element whose class name is .clockwork. And we
want to select all input elements that happen to be using class .orange within that form.
Using the .orange handle is just another way of referring to an input box. Let’s take a look at
how we would do this without using context first. This selector will select all visible input elements
anywhere in the DOM.
And with context?
$(‘.orange:visible’)
$(‘.orange:visible’, $(‘.clockwork form’))
But this would be a step backward. We just doubled the amount of work for jQuery by using
two complex selectors, not just one.
Remember our first rule of Javascript performance? Since we already know that using $(‘#id_
name’) is the absolute fastest way to perform a DOM selection, we will use that knowledge to
our advantage. You should always aim to simplify your selectors in such a way if you’re looking
for a performance advantage.
Instead, let’s rewrite the example from above to make it fast:
$(‘.orange:visible’, $(‘#my_form’))
Now this will cut the performance bottleneck of your jQuery selectors. The more expensive
selector .orange:visible now works within the confines of a less expensive selector #my_form.
In fact, this is the fastest selector you can possibly get with jQuery.
Remember the general rule when speeding up the performance of your jQuery selectors:
Confine a complex selector to a less complex context.
102

Practical jQuery Lessons
Instead of talking about something specific, I decided to do something new. In this section we
will take a bird’s eye view of jQuery functionality by briefly going over a number of different
functions and circumstances in which they are used.
Sometimes it is possible to become confused about how things work. Or rather, why they don’t
work as we believe they should. The answer to such questions usually lies in understanding
multiple languages such as JavaScript and CSS. Throughout the lessons I will try to capture
these details that I hope will shine more light on the kind of tools jQuery offers to us. But also
on the proper way to think about the syntax.
These lessons are designed to display the versatility of jQuery and how with just little code we
can gain more control over our JavaScript program. So, let’s begin.
Lesson 1: The :not Selector.
As we learned in the beginning chapters, in large part jQuery programming is about understanding
CSS selectors. It’s common to use # (the number symbol) and . (the dot) as part of
our selectors because it’s natural to select things we know are there like classes and ids.
However, certain cases demand we select everything except a certain type of an element. The
little known :not selector can help you accomplish that. Consider the following example where
we hide all paragraph elements on the screen except those within an unordered list (ul):
$(“p:not(ul p)”).hide();
As you may know, the p selector means select all paragraphs. Note that there is no space between
p and :not. Had there been a space, the selector would not work. That’s a completely different
context. A new selector ul p is specified after :not within a new set of parentheses. This
statement can be read as select everything except paragraphs inside the ul tag.
Remember that when working with jQuery we are also working with JavaScript and CSS. At
the same time. This means that the rules laid out by CSS still apply. And this is important to
understand because part of understanding selectors depends on your understanding of CSS,
and not jQuery itself.
When working with jQuery, little things matter. For example, a space between p and :not
would no longer produce the same results. This is because the space character is a CSS command
that tells CSS to select a completely new set of elements seen after the previous selector.
This is after all, CSS. Remember that the C stands for Cascading? This means we need to keep
in mind that HTML elements are nested inside other elements. And that’s natural.
103

Luckily, this book is called Understanding jQuery. So, below we will explore the hidden logic
behind some selector combinations and why they do not seem to work as our intuition suggests
that they should. Breaking this down like that will help us understand the deeper concepts
behind CSS selectors logic when using them in combination with jQuery.
Even though jQuery makes programming easy some details must not be overlooked.
It appears as though the :not selector requires a base selector such as body. However, it will not
work if the base selector is the star selector (*) which selects everything unless the CSS style
for * is explicitly specified by the programmer before calling the jQuery code. I don’t know
whether the developers of jQuery inteded it to be this way, but strangely, the following examples
will not produce intended results:
$(“:not(p)”).hide(); $(“* :not(p)”).hide();
Both examples will select and hide everything. Hmm, that can’t be right. Because clearly it
seems that the :not selector is used intuitively and it says select everything except p.
Is this intended functionality or an error in jQuery library? Keep in mind that the :not selector
is ignored in both of these cases - the asterisk is assumed in both. I would have loved to be able
to “select everything but” using the star/asterisk (*) selector in combination with :not. But there
are rules.
It’s easy to think that the above examples should just work. That’s intuitive thinking. But these
selector do not seem to match what we believe they should. However, this can be explained by
the cascading nature of CSS in combination with the hidden asterisk. Let’s take a look here:
$(“:not(p)”).hide();
The reason this selector will not select everything but the paragraphs is because that is not
what it actually selects! (Or doesn’t select). Remember, that all paragraphs on your page are
also within other tags. That is the knowledge we needed. When we select “:not(p)” what actually
happens is the entire DOM is selected and hidden (that means everything on the page)
because a CSS selector will select everything above in a cascading fashion of things. And the
reason for this is that the asterisk is assumed even when we do not explicitly specify it.
Now, let’s think about this. If we just selected the entire DOM and said “hide it” with hide(),
that means everything within the html, body tags, etc. Even the paragraph tags will be hidden.
Even though we just specified not to hide them. What we are hiding is actually the entire
DOM element which makes the entire page disappear.
104

There is a solution to this problem. And the solution is, again, to explicitly specify body as part
of the selector. Let’s take a look at the proper way of using the :not selector:
A single space character.
$(“body :not(p)”).hide();
Notice I added body followed by a space. Now, this will produce a correct result. But why?
Referring to our earlier discussion about selectors in the book we learned that only the last
element in the hierarchy specified using the space character will be selected.
But we can’t simply add a space character without a preceding HTML element. So we explicitly
specify the body tag too (by default jQuery sees lack of any preceding element as if the asterisk
was used). In this example the body tag itself is not selected, only the :not(p) elements.
This means that when I added the body tag and the space that followed, it is the space that is
explicitly telling the selector: do not select body … only select what is after the space character.
This small but important modification to the selector solved the problem. The selector will
now do exactly what is being asked. When working with :not selector it is important to make
explicit definitions like this and specify exactly what you are looking to select, rather than
making a quick guess and hope it works.
Using the :not Selector with the Asterisk
We know that the star selector, also known as the asterisk selector (*) is used to select everything
in the DOM structure. This means the doctype, html, head, title, body, etc. In other
words, everything, even tags outside the body tag. They are all part of the DOM.
$(“* :not(p)”).hide();
Only last element in the
hierarchy will be selected.
Here we will face exactly the same problem as we did in the previous example where we used
the body tag. However, this time we are selecting the entire DOM with the asterisk. Again, the
selector in the example above will not work as intended. We are indeed selecting everything
and then hiding it but only then asking not to hide paragraphs.
In the previous example our solution was to simply explicitly state that we want to hide everything
except the paragraphis within the body tag. That solved the problem and made the selector
behave correctly. But the asterisk selector is different because it is the default selector.
105

he asterisk selector (*) is the default behavior of any CSS selector whether it is specified or not.
In other words, an identical solution could look something like this:
$(“* body :not(p)”).hide();
Again, being explicit in telling jQuery exactly what we want to select fixed the problem. You
can see the true hierarchy forming. First the asterisk, then body, then everything else.
So, even though only :not(p) is the true defining point of what is being selected, you can see
how using the understanding of the DOM hierarchy itself also plays a big role in selecting elements.
If you find that your selector isn’t working for some reason, check its hierarchy integrity.
The best bet is to always be as specific as possible.
Looks like we’ve come around a full circle. We started this lesson with saying that the selectors
$(“* :not(p)”) and $(“:not(p)”) do not produce a result that at first they seem they should.
We then learned that in order to solve the problem we should explicitly indicate the context
whether it was the asterisk selector, the body tag, or both.
It should be easy to see now that $(“* :not(p)”) and $(“:not(p)”) are one and the same thing
exactly. There is absolutely no difference between the two selectors and the second one assumes
the asterisk by default anyway.
A Quick Note About Explicit Default CSS Definitions
While doing research about the inner workings of CSS selectors in the context of jQuery I
noticed something rather interesting. Even a selector such as $(“* :not(p)”).hide(); that we
just discussed above would not work quite the same under certain conditions. What are these
conditions?
First we must understand that the asterisk is not the same as body. The asterisk assumes absolutely
everything. Even the tag. And that’s the key to understanding why some CSS
selector may seem like they do not work in some instances. Remember that the tag
itself can contain CSS styles. If it does, it will certainly affect the tag as well.
To fix this problem we should stick to one simple rule. If you ever wish to use the asterisk
selector, you must always specify the default CSS style for everything using the asterisk command
within the default style.css file. As in: * { background: white; } Doing this will reset the
global style for every single tag on the page. If you don’t do this you will find that the asterisk
selector may not behave as intended. So the two core principles working with * and body selectors
are to always provide a default CSS style and be explicit with your CSS selectors.
106

jQuery provides a secondary way of dealing with not-based selections. And that is the direct
.not() method executed on a selection. Let’s take a look:
$(“* body p“).not(“ul”).hide();
But in this case, the .not method is used as a post-production filter, rather than a direct part
of hierarchy. In other words, what we don’t need is “added” last using the .not method. A little
different from how the inline :not selector works. So the above example is saying: select all
paragraphs tags in body, but not those within ul (unordered list) elements.
Which one is better :not or .not()? You will have to decide based on the circumstances. In
some cases one is easier to use than the other. The DOM hierarchy has unlimited capacity for
different element nesting scenarios.
However, if you are dealing with a large number of elements you wish to skip, keep in mind
that in many cases the inline :not achieves a faster performance than the equivalent .not()
method.
Lesson 2: Storing Data Inside HTML Elements
We use jQuery to work with HTML elements. Sometimes it is desired to attach arbitrary data
to an element beyond the default attributes like id, class, href, src, and so forth. What if we
wanted to add our own custom attributes to the element? In jQuery the .data() method takes
care of the problem. Let’s say we have this DIV element:
Description of my cat.
In order to attach arbitrary data and relate it to this element we can use the following method:
$(“#mypet”).data(“cat”, { legs: 4, eyes: 2, color: “orange” });
Notice that the data in this case is a JSON. But it could be any variable, even a function. Remember,
everything in JavaScript is an object. The value of “cat” is an object. That means it can
be anything. Now we can retreive the data from this element using the data method again:
var data = $(“#mypet”).data(“cat”);
var legs = data.legs;
var eyes = data.eyes;
var color = data.color;
107

It’s interesting to note that the data() method creates an actual attribute and attaches it to the
element. We know that it is theoretically possible to assign a custom attribute to any HTML
element:
Even though this will work, it will not validate. The proper way of doing that would be to prepend
the data-* prefix to the beginning of the attribute name. Let’s try again:
jQuery is already aware of this and it will automatically prepend data-* prefix to each new attribute
created using the data() method. Let’s take a look at the following example:
$(“#another_pet”).data(“wings”, { feathers: 1000 });
This code will create an attribute called data-wings, not wings. The data() method hides all of
that from us, even though that is what happens physically inside the element. The data method
in this example will also assign the JSON containing variable feathers, which equals 1000.
We already know that we can use the data() method again to retreive the object back and store
it in a variable. But you can also access this data by calling the attr(“data-wings“) method.
$(“#another_pet”).attr(“data-wings”);
This is just for reference. You should always use the data() method to retreive the values set using
the data() method.
Storing data inside HTML tags is a helpful technique for developing User Interfaces and other
dynamic applications. Imagine that we created custom attributes and attached them to an
HTML element that represents a User Interface window that does some function and needs to
retain its current state even after being moved to a new HTML element within. the website.
Now imagine that we want to copy and paste that window and integrate it into part of our
website without having to keep track of the variables and the current state of that window in
the global scope of our JavaScript application. Why not simply grab the entire element along
with the custom attributes it contains?
Simply use jQuery’s html() method to grab the window and again paste it into the new location
using the same method. You get the idea, the entire HTML element is moved from one location
into some place holder on the site retaining all attributes containing some type of data.
108

Lesson 3: Callback Functions
All jQuery statements eventually finish execution. Let’s say we selected some elements and we
ran a function on this selection such as .css(), .hide(), .attr(), etc. In event-based web development
it’s common to trigger a new event upon completion of some action. jQuery developers
knew this and gave us a way to call a custom function when an action is completed.
Most jQuery methods provide a special parameter where such function can be specified. This
function is often left nameless, because we are not interested in storing it for future use. We are
only interested in using it once every time a method or an event is executed.
Let’s attach a nameless callback function to a jQuery method css, which changes the font color
of selected element(s):
$(“div”).css(“color”, “red”, function() {
alert(“the font has been changed.“);
});
The nameless function will fire soon as all div elements finished changing font color to red.
Nameless functions are usually defined as the second or third parameter of a given jQuery
method. In some cases, the nameless callback function is the only argument of a jQuery method
as seen in the example below where we use the .click() method to execute an event.
$(“div”).click( function(){ /* execute code here */ } );
A callback function is often passed to a jQuery method as the only or the last argument.
Lesson 4: Using append and prepend methods
The append and prepend methods help us attach HTML content around existing content.
Consider the following examples. Let’s start with an empty div element and append new content
to it using these two functions:
$(“div”) .append(“New”); .prepend(“1”); .append(“2”);
New 1New 1New2
We start with an empty div and continue using the append and prepend methods to add new
values around the original value. You don’t need to call call each function from a statement on
a separate line. You can use the dot operator to chain all methods together as seen below:
$(“div”).append(“New”).prepend(“1”).append(“2”);
109

Let’s take a look at another practical example using prepend. This time let’s prepend paragraph
with id p2 to the paragraph with id p1 using a jQuery selector instead of a string literal:
Let’s run $(“#p1“).prepend($(“#p2“)) on the original HTML:
Original HTML
paragraph 1
paragraph 2
paragraph 3
Result
paragraph 2paragraph 1
paragraph 3
After $(“#p1”).prepend($(“#p2”)) is executed notice how the second paragraph was prepended
into the first paragraph. But something else is even more interesting at work here. The paragraph
that was prepended is gone from the original location. The functionality of the functions
append and prepend is similar to the copy and paste effect. The element being prepended is
removed from the original location.
Lesson 5: Using appendTo and prependTo methods
In the previous lesson we discussed append and prepend methods. Let’s now compare them to
their near-equivalent methods appendTo and prependTo. These methods do exactly the same
thing that append and prepend do. Except in reverse order as far as the syntax goes:
$(“#p1”).prepend($(“#p2”)) ;
$((“#p2”)).prependTo($(“#p1”));
The two statements above produce exactly the same result as shown in the second diagram
from the Lesson 4. The only difference is in the syntax and parameter reversal. There are cases
when either syntax makes it easier to understand the logic of your program.
In Lesson 4 the first example dealt with arguments passed as string literals. In other words, we
were prepending plain text within and to an existing HTML element. As you can see, it is also
possible to pass a jQuery object - which is what the $(“#p1”) selector returns - as arguments to
append and prepend methods. But this isn’t unique to these methods alone.
Most jQuery methods can accept the following as arguments:
1. The string literal, like “text123”,
2. The jQuery selector itself, like $(“p”), or
3. The raw JavaScript DOM object like document.getElementById(“p1”).
110

For example, the following statements do exactly the same thing. Pay attention to the type of
values being passed as arguments to the prepend function. As you can see, the same function
takes a multitude of different types of parameters.
// First let’s define some variables
var p1 = $(“#p1”);
var p2 = $(“#p2”);
// Now, all of the following will do exactly the same thing
$(“#p1”).prepend( $(“#p2”) ); // using one string literal and one selector
$(“#p1”).prepend(“#p2”); // using string literals
$(p1).prepend(p2); // using variables
$($(“#p1”)).prepend($(“#p2”)); // using selectors themselves as arguments
// Using the raw JavaScript DOM reference to the object:
$(document.getElementById(“p1”)).prepend(document.getElementById(“p2”));
Internally, document.getElementById is what a jQuery selector like $(“#p1”) will use anyway.
But the point is that you still can pass the object in any of these ways if you need to, if your
program requires it or if it is just more convenient than any other way.
Why do we need all these different ways? Sometimes the DOM is already available to work
with and we don’t really need to use a CSS selector to find it. Other times the only way to get
an object of an element in particular is to select it. If you already have a DOM handle (or a
variable) to an element, you don’t need to use a CSS selector which will return a jQuery object
to that element. Simply pass the DOM object to the jQuery method.
Because jQuery methods are designed to work with different representations of the same
HTML elements they make it so much more convenient to write JavaScript code.
111

Regular Expressions
How will you know it’s them when you see them?
Regular expressions are common features in computer
languages and text editors. Learning how to use them will
increase your performance as a computer programmer and
problem solver. JavaScript was designed with regex in mind.
The phrase Regular Expression can be shortened. Regular expressions are commonly referred
to as regex, or regexp in conversation. We use regular expressions to find or match a character
pattern within a word or a line of text. For example, we can search for the word clock in the
word clockwork. We can also find the words lock and work in the same word.
lock
clockwork
Regular expressions helps us find words or character patterns inside text and then store the
results in an array for further manipulation or modification. Another important function of
regular expressions lies in their ability to count the number of times a pattern repeats inside a
word or a sentence. For example, there are two o’s in the word clockwork. The following regular
experssion example demonstrates how we can find and count all o’s in the word clockwork:
var pattern = /o/g; // g modifier stands for global search
var result = “clockwork”.match(pattern); // match is a member function of string object
alert(result.count); // display how many times “o” was found
The actual regular expression pattern is stored between two / symbols. But they are not exactly
the same as double quotes when defining a string. The first / explicitly indicates the start of the
pattern whereas the second / explicitly indicates end. It usually matches end of line character.
112

As you may know an object can contain methods. Remember that everything in JavaScript is
an object. Even a literal string specified with double quotes. In this case, JavaScript has already
provided such a method (called match) to execute a regular expression match:
“clockwork“.match(/o/g) ......... Regex match - returns array: [“o”, “o”].
“clockwork”.toUpperCase()....... Returns “CLOCKWORK“.
“clockwork”.charAt(5) ........... Returns “w” because index counting starts from 0.
“clockwork”.length .............. Returns 9 but this is not an object method,
this is a member variable or object property.
There are a few other methods. In the context of this section we are only interested in the
method called match (also known as object’s member function). The example above shows that
match is not a unique method of the string’s object. And it also shows that it is possible to access
it directly from the string definition.
As you can see we can call all these functions directly after the closing double quote by accessing
the string’s member function with the dot operator. This can be done without having to
store the string within a unique variable first, but by calling it directly on the value itself.
By the way, doing it this way still creates a variable in memory and the value “clockwork” is assigned
to it. It’s just we won’t have a name handle to refer to it once the code is finished executing.
Sometimes this makes the code cleaner and easier to read.
You see, JavaScript already has a number of member functions to help us work with strings.
The function match is not the only one, but that is the one we need in order to execute a regular
expression pattern match.
Remember that this is rather a less common way to execute a command on a string. This is because
we are defining the string “clockwork” on the fly and simultaneously accessing its member
function match. But the exact same thing could be done using the following statements:
var text = “clockwork”;
var result = text.match(/o/g);
The difference is that here we first stored the string “clockwork” in a variable and only then
called the function match. But sometimes it is not necessary to do it this way. The choice belongs
to the programmer and the circumstances in which the code is written.
What else can a regular expression match?
Besides matching the characters from the alphabet we can also match other entities. For example
special characters like #, $, % and others. In addition, regular expressions make it possible
matching character ranges like A-Z or a-z (notice that the letter case matters) and also
113

numeric values such as 0, 1, 2, 3, 5, 6, 7… etc.
Regular expressions let us quickly find a character or a sequence of characters within a string
of text. They make it possible to find patterns searching from the start to the end of the string.
As you may already know a string is just a variable of type string. In other words, it’s text.
Below I am going to demonstrate how regular expressions work with a few brief examples and
visual diagrams. Because our focus is jQuery and JavaScript programming, I’ll show you how
Regular Expressions work within this context. But first, let’s see a slightly different, yet identical
(in terms of results) way in which JavaScript allows us to work with regex.
Using the RegExp object
The match method is not the only way to work with regular expressions. In addition to the
match method, JavaScript provides the RegExp object.
Using RegExp, first we will create the object with a regular expression pattern, which is just a
string of text containing the pattern we want to match in another string. Then we will pass the
modifier as a second parameter/argument to specify how we want to search for that pattern.
We can create the RegExp object as shown here:
var regex_obj = new RegExp(pattern, modifiers);
As you may already know, the operator new is used whenever we want to create a new object
of a specific type in JavaScript. In this case we want the RegExp object. Basically it means: create
a new object of type RegExp and allocate enough memory to store all of its methods (internal
funtions/objects) and properties (internal variables/objects).
The pattern parameter is the text we want to match. The modifier parameter is how we want to
match it. For example, modifier can be set to “g” as in following example.
var regex_obj = new RegExp(“lock”, “g”);
The “g” modifier means “global,” and it means that the entire string of text will be searched.
Had the “g” modifier been omitted, the pattern “lock” would only match once, even if there
were more instances of the character combination “lock” in the string we want to test this pattern
on. This just depends on what you want to do.
In addition to the RegExp object method, we can simply define a pattern as follows:
var pattern = /lock/g;
114

Notice that when we do it this way, we no longer use the double quotes to encompass the pattern.
We use the slash /. Also the modifier g is simply added after the second dash. Don’t neglect
the closing semicolon. Even though you can.
By the way, two other modifiers are available which are /i for case-insensitive matching, and /w
for multi-line matching, this is when you have line breaks in the string you are matching the
pattern with. You can use them in combination, for example to match case-insensitive characters
globally, use this pattern:
var pattern = /lock/gi;
Rules of the Pattern Parameter
It’s important to note that I refer to the pattern parameter as a character combination and not
as a string. You see, each character in the pattern is like a command to the regular expression
algorithm. It’s like a language in itself.
In regular expressions, commands are specified using special characters like parenthesis (abc)
or square brackets [cat]. Many other special characters are used to match things in very specific
ways. Herein lies the power of regular expressions.
An example of that would be the use of the square brackets[ and ]. Also known as the bracket
expression. Whenever we place a sequence of characters, such as “abc” within square brackets,
it changes meaning of our search pattern.
The [ and ] brackets will actually not be matched themselves at all, only the characters within
them. The bracket expression is just one part of the regular expression language. When using
them within the pattern parameter, it means the following: match any single character within
the brackets.
So, while the pattern “abc” matches exactly abc in that order, the pattern represented as [abc]
would match either a, b or c. Just one character. Here is an example of how one would instantiate
such a pattern using the RegExp object:
Some other patterns are shown in following examples:
[abc] ............... Find occurrence of any character between the brackets.
[^abc] .............. Find occurrence of any character not between the brackets.
[0-9]................ Find any digit from 0 to 9.
[A-Z] ............... Find any character from uppercase A to uppercase Z.
[a-z]................ Find any character from lowercase a to lowercase z.
[A-z] ............... Find any character from uppercase A to lowercase z.
115

Round parenthesis can be used to search or conditions, with the | symbol:
(clock|work|alex)..... Match either one of the three words.
Note that had the /g modifier been added to the end of this pattern, all separate words or
words containing clock, work and alex character sequences would be matched. But without the
/g modifier, only one word from this series (separated by | character, also known as the logical
“OR” operator) will be matched, whichever one is found first in the target string.
Don’t mix the regular expression’s logical OR operator | with the bitwise OR operator, also |. In
a JavaScript statement the logical OR operator is represented by the double || and the bitwise
OR operator is represented by one |. However, JavaScript regular expressions define the logical
OR operator as just one |. This is simply because the specification for Regular Expression
language also exists in many other languages. And a double || in the context of regular expressions
would look awkward.
As a quick side note, just before we see how strings can actually be matched with this pattern,
consider that the matched results are always returned as an array.
In the case of the latter example (the round parenthesis), with the /g modifier, the resulting
array would return the following: [ “clock”, “work”, “alex” ] if all three words were found in the
target string. Make a mental note, that the “match” function (and it is literally called match(),
as you will see in a moment) belongs to all string objects (that we are about to discuss) returns
an array of matches, even if only one match has been returned, for example: [ “clock” ]. This
value would be stored at index 0 in the match array as in match[0]. If found, the results work
and alex would be stored at match[1] and match[2] indices respectively.
There are many more matching tools at our disposal when using Regular Expressions, including
metacharacters and quantifiers. You can look them up, I just want to keep this tutorial
simple. I’ll probably talk about them as part of my future work.
Matching the Target String
Okay, we now know how to create some of the basic patterns, but how do you actually match
them with real strings? This is shown in the example below.
Remember how we had two different ways of creating a regular expression pattern? One was
using the RegExp object, and the other one writing it into a variable? Here is how you would
execute these patterns:
Using the RegExp object, find the word light in the word enlightenment:
var pattern = new RegExp(“light”);
116

Alternatively, we can create the parameter like this:
var pattern = /light/;
Now that we have the pattern, let’s create the string we want to search and match it with the
value stored in this pattern variable. Notice that I use the member function called match. It
belongs to the string object (the one created as var) I conveniently called :
var string = “enlightenment”;
var matched = string.match(pattern);
Everything in JavaScript is an object.
Objects of type string contain methods that operate on strings. When we define a string with
double quotes an object of type string is created automatically. As we have learned in the beginning
of this chapter, one of the methods that is already integrated into the string object is
called match. This is exactly what we use to match a regular expression pattern with a string.
We can, supposedly also pass a normal non-regex text string to the match function, minus the
special characters like the dot (.) or [ and ] brackets and other special characters:
var result = string1.match(string2); // string2 doesn’t have to be a regex
The argument string2 doesn’t have to be a regular expression. It could be a normal string, defined
using the double quotes. However, a normal string is limited to alpha-numeric characters
only. Regular expressions allow us deeper character search capabilities by providing us with a
number of special characters.
These special characters are like commands that do something very specific. And some of
them can be used to match a previous or next character from current position in the matching
pattern to be determined by the programmer. In other words, they are very versatile text
matching tools that give us control with per-character precision.
Special characters have a unique meaning as part of a regular expression pattern. If your pattern
has the dot (.) character in it, regular expression will not match this as a dot in the target
text string at all. Only a non-regex text string would do that.
But regex sees the dot character as an expression with a special meaning, saying: match any
character whether it’s a number, a letter or any other non-special character. More precisely the
dot means: match most any character with a few very specific exceptions.
117

As part of the regular expression the dot (or the period) character has special meaning. It will
match almost any single character. In order to match the actual period we need to put a backslash
in front of it as in \. or alternatively, place the dot inside square brackets [.]
Putting a backslash in front of a character is referred to as escaping a character. Or in other
words, preventing the special character to fulfil its special function and just match that character
in the provided string instead by treating it like any other matched character.
Escaping a character is a technique that becomes important if we want to match any character
inside a text that would otherwise have a special function in regular expression language.
* * *
Because everything is an object, we can create a string and execute a member function on it
right away. For example, the string “enlightenment” itself is an object and you could immediately
call the member function on it like this:
var pattern = “light”;
var matched = “enlightenment”.match(pattern);
Or you can do it this way:
var matched = “enlightenment”.match(“light”);
Or this way:
var matched = “enlightenment”.match(/light/);
What was matched will be stored in the matched variable. Let’s display it:
alert(matched);
The alert function will display the text string: “light”. You may not find this example very impressive.
We created a string called “light” only to find out that it matched with the word enlightenment
and the result is the same string “light?”
These examples shows only the basic function of how regular expressions work! Had the string
not been matched a value of null would be returned. In other words, using this simple syntax
we can determine whether a pattern exists in a word at all. Consider the code below.
118

if (“light”.match(/darkness/) == null)
{
alert(“No darkness was found in the light.“);
}
This is how we would determine whether there is a match at all.
Moreover, complex regex patterns may not always return the result that matches the requested
pattern (Of course). For example if you tried to match “enlgihtenment” to the pattern [aet] the
returned result would be e. Why’s that? This is because the expression in square brackets only
matches one character out of the entire set. In this case, the string is enlightenment, and the
first letter of this word is e. Because e is one of the letters in the pattern [aet] it will be immediately
matched and returned. The letters a and t are skipped and no longer considered if at least
one of them is matched. However, if /g is added (indicating global search) to the end of the
pattern, both t and e will be matched and the entire set will be returned.
But not only the entire set will be returned with the /g modifier, it will be returned as many
times as each letter is encountered in the word enlightenment. Let’s take a look:
“enlightenment”.match(/[aet]/); ............... Will return array = [“e”]
“enlightenment”.match(/[aet]/g); .............. Will return array = [“e, “t“, “e”, “e”, “t”]
Regular Expression Examples
In order to demonstrate how regular expressions work in a real world scenario, I needed to
find a piece of text that was dense enough with the characters like dots, commas, the end of
line, etc. I thought that a poem or song lyrics fit that criteria. Incidentally, while writing this
chapter I was listening to a song. I decided to use some of the lyrics as the source for the target
string as an example.
Let’s consider the lyrics from Just One Kiss written by The Cure as the source for our string.
You can listen to the song here: http://www.youtube.com/watch?v=7j7IarXmAAo
Here are a few examples of Regular Expression matches. You can print this diagram and keep
it on your desk to help you out with looking things up. Regular expression pattern rules and all
special characters can be a difficult to memorize.
I created this reference to help you visualize the results of each pattern. Please refer to the following
page for the visual examples that dissect some of the most common regular expression
scenarios. Remember that all results are always stored in an array even if only one match was
found.
119

The text string. Pattern Return value (Array)
Remember that time that the trees fell down.
The wood crashing through the wall.
Remember the sound that could wake the dead.
But nobody woke up at all.
/Remember/ [“Remember”]
Remember that time that the trees fell down.
The wood crashing through the wall.
Remember the sound that could wake the dead.
But nobody woke up at all.
/Remember/g [“Remember“, “Remember“]
Remember that time that the trees fell down.
The wood crashing through the wall.
Remember the sound that could wake the dead.
But nobody woke up at all.
/wall/g [“wall“]
Remember that time that the trees fell down. /[wall]/g [“a”, ”a”, “l”, “l”, “w”, “w”, “a”...
The wood crashing through the wall.
Remember the sound that could wake the dead.
But nobody woke up at all.
etc]
Remember that time that the trees fell down. /[.]/g [“.”, “.”, “.”,
The wood crashing through the wall.
Remember the sound that could wake the dead.
But nobody woke up at all.
“.”]
Remember that time that the trees fell down. /A-Z/ Only capital letters. A to Z.
The wood crashing through the wall.
Remember the sound that could wake the dead.
But nobody woke up at all.
[“R”, “T”, “R”, “B”]
Remember that time that the trees fell down. /.*/ Match everything until end
The wood crashing through the wall.
of line. Notice that the match
Remember the sound that could wake the dead.
automatically stops at the end
But nobody woke up at all.
of line, the invisible character.
Remember that time that the trees fell down. /.*/g When g is added, however,
The wood crashing through the wall.
the match does not stop at the
Remember the sound that could wake the dead.
But nobody woke up at all.
end of character mark.
If you understand these commands, you will be able to do some interesting things with strings.
However, these examples are far from definitive. There are thousands of different ways ot select
characters from a string using regular expressions.
If you believe regular expressions can help you with your web project, refer to Jan Goyvaerts
regular expression website at this URL: www.regular-expressions.info This is an excellent free
resource to further explore regular expressions.
120

jQuery and Regular Expressions
In previous chapter we discussed Regular Expressions with focus on using the JavaScript
match method. You are probably wondering if there is a way to use a Regular Expressions as
a CSS selector passed to the jQuery object. Wouldn’t it be great if we could do something like
the following example?
jQuery(“/div class = ‘button’/g“) // match all div elements with class attribute “button”
Unfortunatelly jQuery itself does not offer such a solution.
As of the time of this writing the latest version of jQuery is 1.7.1, and it does not support Regular
Expression selectors. However, this doesn’t meant that we can’t use Regular Expressions to
sort through HTML elements with jQuery. This can still be achieved using the .filter() method
and a little creativity on our part.
Let’s consider these following HTML:
Let’s say that we want to select only DIV elements that have an id name matching the letter o.
In other words the last two elements. We can write the following code to achieve this selection:
$(“div”).filter(function() { .................. // Filter the matched result set
return $(this).attr(“id”).match(/o/); ..... // Create a Regular Expression rule.
}).text(“matched”); ........................ // Do something with matched elements.
The $(“div”) selector returns a list of all 4 DIV objects obtained from the 4 HTML elements.
Then, using the .filter() method we can further refine this result set by matching it with a regular
expression /o/. In this example we are matching the value of the id attribute with a regular
expression that matches the o character (it will match only the DIV elements with id=”top”
and id=”bottom”.)
Upon execution of this filter, the two bottom DIV elements will contain the text “matched”
which was added using the .text() method at the end of the statement. Of course it would be
possible to run any other jQuery methods such as css, animate, etc. on the selected elements.
The advantage of using this strategy is that it requires no external libraries.
121

jQuery Callback Functions, the this Property and getElementById
Large parts of this book focus on explainings specific concepts such as CSS selectors, events,
and so forth. But sometimes a number of different concepts must work together in order to
accomplish something very specific. You can simply copy and paste obscure code from online
tutorials. But that doesn’t improve your skills. First understanding and then using these ideas
in combination with one another is what JavaScript development is all about.
Sometimes writing jQuery code requires understanding the logic of jQuery callback functions.
In particular how the this property is used within the context of callback functions. In fact this
is one of the most frequently used techniques when writing jQuery plug-ins or code that simply
stretches beyond the basic understanding of jQuery and JavaScript.
In comparison with JavaScript, computer programming languages that are strict, such as C++,
define a very specific set of rules in terms of how they should be used. The limitations of C++
are also part of the brilliance of its design. However, JavaScript is not always easy to understand
because the rules are not strictly defined. You can say that JavaScript is a maleable language
and often, because of its flexibility, it will allow us to invent our own rules.
Even though many modern application are developed using JavaScript, some of the concepts
that you will see for the first time may be hard to understand because of what professional web
developers were able to craft with this language using its flexibility. jQuery can be thought of
as such an example.
Some things may not always appear to be clear enough and many people resort to the “copy
and paste” solutions without understanding why the code does what it does. This is especially
true when we start mixing the logical (JavaScript-independent) jQuery’s ideas (such as the
syntax of a jQuery event function call) with pure JavaScript concepts. Often the mind simply
goes: What is JavaScript? What is jQuery? We already know that jQuery was written in JavaScript
but where do we draw the line?
The purpose of this section is to explain how callback functions, the this property and the native
document.getElementById function are interrelated and how they work together in helping
us to write effective code.
Let’s consider one of the most common jQuery methods called “click” to demonstrate the internal
workings of a generic callback function with a few this-property examples.
$(“div.button”).click(function()
{
var a = $(this); // Here the variable will refer to the selection as a jQuery object.
var b = this; // But here the variable will refer to the selection as a DOM object.
});
122

This is probably as simple as it gets. This code attaches a mouse click event to all DIV elements
whose class name is “button” and triggers the code inside the callback for each selected element
when a mouse click is detected.
The jQuery object $ is designed in such way that when you pass the native this property it converts
it into a jQuery object itself. This means that from now on we can treat the this object as
a jQuery object. This is done for at least three reasons:
1. In order to make the code cross-browser compatible,
2. In order to extend the functionality of the native property this, and
3. In order to simplify the syntax of the code.
So, again, by passing the native this object as an argument of the main jQuery object ($) we
essentially convert it into a handle to that object which enables us to run jQuery methods on it
and benefit from the advantages stated above:
$(“div.button”).click( function() // For each selected element:
{
var a = $(this).attr(“id”); // Get the “id” attribute of whatever was in “this”
var b = $(this).attr(“class”); // Get the “class” attribute of the same element
var c = $(this).attr(“custom”); // Get the value of a custom attribute name
var d = $(this).animate({left: “+=10px”}); // Animate the button by moving it +10px right.
});
Remember that the $(selector) function returns an array of objects to work on. So when we attach
the click method to it using the dot operator we are attaching the anonymous function to
each selected element on that list. All div’s with class = “button” will start receiving this event
from now on.
Notice how the $(this) statement allows us to easily grab the values inside the id and the class
attributes of the selected elements. We have successfully extended functionality of the native
this object. And while the native this property can determine the id value of an element, it
simply does not have the added benefit of jQuery methods:
$(“div.button”).click( function() // For each selected element:
{
var a = this.id; // Get the “id” attribute of the native “this.”
var b = this.className; // Get the “class” attribute of the native “this.”
var c = this.getAttribute(“custom”); // Get the value of a custom attribute name.
var d = this.animate({left: “+=10px”}); // Will fail. No such method in native JavaScript.
});
As you can see the native this is not as versatile as when it is used as a jQuery object. But both
123

objects refer to exactly the same thing.
Where Does document.getElementById Fit In?
Sometimes dealing with jQuery selectors and the this property can be confusing. This is usually
the case due to the illusion created by having to refer to the same objects by different names
and properties.
When we use the $(“div#next”) selector what actually happens is that the native JavaScript
function document.getElementById(“next“) will be eventually called. This process is simply
hidden from us by jQuery’s syntax.
But let’s take a closer look at the very first example we used in this section by outputting the
actual values of the native this and jQuery’s this object.
$(“div.button”).click(function()
{
var a = $(this); // Here the variable will refer to the selection as a jQuery object.
var b = this; // But here the variable will refer to the selection as a DOM object.
alert(a); // Outputs the string “[object Object]”
alert(b); // Outputs the string “[object HTMLDivElement]“
});
Why do the values output a different type of an object? Because they are of a different type of
an object, even though they are referring to the same thing. Remember that the $ function is a
handle to the main jQuery object. This jQuery library object was created by the developers of
jQuery as a custom object. So when we pass the native this, it becomes the jQuery this.
However, natively in JavaScript HTML elements actually have unique class names for each element.
For example a DIV element is referred to by the class HTMLDivElement. A
element is referred to by the class HTMLTableElement, and so forth. This is because each
element can do things others cannot. Even though most of them can do the same things, for
example, a DIV and a TABLE can both have a 2px border. But a DIV cannot have table cells
specified using the TR and TD tags.
Notice that the actual object is not a string like “[object HTMLDivElement]”. That’s just the
way the alert function will display a this object when it’s passed to it. The class names of the
DOM objects stored in the DOM tree hierarchy is not used often. However, to shine some
light on the issue, let’s see the rest of DOM element names as natively defined by JavaScript.
124

The following example will demonstrate the common DOM names in reference to various
HTML elements.
JavaScript DOM Object Class Name Example
$(document).ready(function() // Initializate once the entire DOM finished downloading.
{
var List = ““; // Store list of DOM object names
var ElementNames = [“a”, “b”, “c”, “d”, “e”, “f ”, “g”, “h”, “i”]; // Known id names
// Go through each element name and grab the DIV associated with that id
for (var i = 0; i < ElementNames.length; i++)
{
var Name = document.getElementById(ElementNames[i]); // get DOM object
if (i < ElementNames.length - 1)
List += Name + “\r\n“; // Add line breaks to each line except the last
}
alert(List); // Display the list of names for each DOM element
}); // end of $(document).ready
Find out what the output of this function is on the following page.
125

The JavaScript example from the previous page will output the following string, revealing the
DOM class names of each individual HTML element:
[object HTMLDivElement] // DIV
http://www.google.com/ // A
[object HTMLParagraphElement] // P
[object HTMLTableElement] // TABLE
[object HTMLSpanElement] // SPAN
[object HTMLElement] // B
[object HTMLElement] // I
[object HTMLFontElement] // FONT
[object HTMLScriptElement] // SCRIPT
Notice that the value of the DOM object referring to the A tag actually returns the value
stored within the HREF attribute instead of something like HTMLHyperlinkElement. Also
notice that the B and I elements share the same class name HTMLElement.
Keep in mind that $(this), the native this and getElementById, in the end all refer to one and
the same object. In JavaScript the only real object associated with an arbitrary DIV element is
of type HTMLDivElement. That’s all that there is. All variables, $(this) and this references are
merely handles to that object.
Finally, it should be noted that variables, such as var c above are not object themselves. They
are simply handles to an actual object stored in computer memory.
Use variables and references to objects as tweezers. Pick the objects you need to work on and
apply jQuery methods to them. Keep working on your program and try to find ideal ways to
create logical constructs that control the flow of your computer program.
126

Making Good CSS Buttons
This tutorial is a preview of the content from my tutorial e-book. This is from Revision 3 that I
am currently working on right now. The book contains the expanded version of this tutorial.
A website that has an original look stands out from the rest. CSS buttons therefore are important.
Perhaps they are even trivial to implement using basic CSS and jQuery events. However,
creating any high-quality work requires a thorough examination of the ingredients.
In this tutorial we will create custom CSS buttons that may look like this:
Or how about navigation bar buttons like these?
The buttons shown here are 3 times the original size. These sets can be accomplished using
simple CSS styles. But the most important ingredient of a good looking button is attention to
detail. We can’t carelessly slap gradients and colors onto a button. There is something subtle
about how the human eye picks up on the smallest details.
But first, a little history.
In the past, when it came to creating buttons our choices were limited to HTML’s and
tags. Their extent ranged from using the default button rendered by the browser itself
to using custom images as the background of the button element. In addition the programmer
could simply wrap an tag with an tag and remove the border of the image by setting
it’s border attribute to zero as in border = 0.
These techniques still work. But they have many flaws. For example on older Windows (that
may still be in use today,) the default button would appear as a plain button in gray color. On
the newer Windows operating systems the native button looks better, but it may not always fit
the theme of the custom website or UI you are developing.
With text using basics font like Arial or Verdana which is almost the only thing you can
change about the default HTML buttons, we are stuck with the limitations of the native button
design.
127

But we are not in the 1990’s anymore. These shortcomings have since evolved. Modern buttons
are created using CSS styles, jQuery and Ajax. The HTML and CSS elements of a button
represent its visual style, of course. jQuery is used to dynamically change the appearance of the
button depending on whether the mouse cursor is over or out of the button’s HTML element.
And finally Ajax is used to execute some function on the server once the button is clicked (like
a PHP file that returns a value). Of course, the action that occurs when the button is clicked on
could have been just a client-side JavaScript function. In fact, that is probably what most buttons
are used for. However, linking button actions to Ajax events that run some type of a script
is not uncommon. Buttons come in different types and flavors. What should happen when a
button is clicked is usually determined within a function known as a callback function.
$(“div#my_button”).click( function() { /* Do something */ } );
Here the callback function is highlighted in yellow. As you can see, it is passed to jQuery’s click
method as the only argument.
Choosing the Base Element: DIV or A
Let’s create a rule. All elements that are buttons will inherit the CSS class “button.” In other
words, in order for the web page to consider an HTML element a button we will apply the class
named “button” to that element using the class attribute as in:
or
Does it have to be this way? Of course not. But you are the developer, you create these rules.
For the purpose of this tutorial I chose to do it this way, but it’s certainly not a universal rule
cast out of iron or stone for creating CSS buttons.
The button we are about to create is going to have a base element. We can use any blocking
(commonly for buttons positioned with position: absolute) or inline elements (for buttons
positioned with position: relative) such as or to represent our button.
128

Sometimes it makes sense to make the button out of the tag (which creates a hyperlink)
and simply re-style it into a button and mute HREF functionality. You may think that is
a convenient choice because by default the tag is already clickable. However, this is not a
good reason for choosing the tag to create buttons at all. In fact the default clickability of
the tag should be muted entirely if we want it to serve as a CSS button.
Later on you will see that we will override all button events using jQuery’s .bind() method
instead of using the href or onclick attributes. Doing it this way makes it easy to switch to DIV
later on if in fact you do run into some type of a CSS style conflict that has to do with element
tag name collisions.
Let’s compare the two HTML tags that can be used to spur the roots of HTML button creation:
Okay
Okay
Normally, we should reserve the tag specifically for hyperlinks to avoid clashing CSS
styles between hyperlinks and buttons that may be added later on in our project.
We can, however create a special button and refer to it by its class name. Such a button can be
created using the A.button {...} style as in Okay) as long
as we promise ourselves that all buttons will be created this way (to keep our CSS files organized
and easier to work with).
Working on a serious web project your responsibility is to do everything in your power to
ensure that the buttons created using the tag will work the same and look the same in all
browsers. While I try to maintain at least some cross-browser compatibility in my tutorials you
can say that this tutorial is mainly limited to the Chrome, Firefox, Safari and the latest version
of Internet Explorer browser.
Writing a different tutorial for each browser could interfere with the fundamental concepts
presented here and I think one could write an entire book talking about the differences between
browsers alone.
Keep Things Simple At The Root
Choose one tag. But don’t choose both (A and DIV) to represent different buttons. Sticking to
one tag may prevent future confusion. Within the context of this tutorial I am going to explain
the details of using both: the tag and the tag to create buttons which are pretty
much the same minus some trivial differences.
129

The DIV tags don’t have to deal with the HREF attribute. Aside from that the two tags will
produce identical results. However, for this to be true within our script there are a few things
you should know about the tag.
Dealing with A and HREF
The tag has the infamous HREF attribute which is used to specify the destination of the
hyperlink. But we don’t want a button created using the tag to go to a web page. In other
words, we want our universal button to be able to respond to a click event. But we don’t want
to do that using the onclick attribute either. After all, this is a jQuery tutorial and jQuery offers
the convenience of using events which are accessible within a single point in our JavaScript
code. Being able to access important code from a single point in our script will save time
working on our application in the long term.
jQuery allows us to bind events to our buttons and this code will always be stored in the same
place during initialization of our web page (let’s say within the $(document).ready event.) This
will prevent us from having to jump from one onclick element to another throughout the entire
HTML part of our web application. And when the time comes to deal with modifying button
functionality in the future we can always refer to that single place in our code to modify
button functionality. And save ourselves a headache.
Let’s now talk more about the HREF attribute. As we just discussed we will be using jQuery
events instead of onclick and HREF attributes. This means that we need to figure out a way to
completely disable HREF.
You probably already know that when instead of providing a URL we can use the number
symbol # followed by a custom anchor name (like #Paris) as HREF value. This will make the
vertical scrollbar “jump” to the anchor location named “Paris” on your website. In other words
Clicking on this link: Go to paris the page will jump to a location
marked by this code:
Travel to Paris
We can simply use just the # symbol as in Return to top of the page and this
way, seeing how the anchor name is not provided at all, the web page will jump back to the
very beginning.
This is the default hyperlink functionality. But we want this to be completely disabled for our
button. We don’t want the button to go to any URLs or anchors. And we definitely don’t want
our button to jump back to the very top of the page when it’s clicked. But we do want something
to happen when a button is clicked using a jQuery event. We’ll discuss that momentarily.
For now let’s disable the HREF functionality completely by doing one of the following:
130

1. Specify javascript: return false; as the HREF value, as in href = “javascript: return false;“
2. Specify return: false as the value of the onclick attribute, as in onclick = “return false;“
3. Remove HREF attribute from the tag. Example Okay
All 3 techniques will disable the default HREF function of the A tag.
You may have not expected technique 3 to work. But in my tests, it worked without a problem
in Chrome, Firefox and Internet Explorer. In other words, by not specifying the HREF attribute
at all we are telling HTML that this is just an anchor, not a hyperlink.
The behavior of the A tag depends on the presence of the HREF attribute within the tag. With
it, it behaves like a hyperlink. Without it, it behaves like an anchor. Essentially by skipping
HREF we are turning the anchor into a button, not the hyperlink.
The cursor pointer icon is also dependent on the existence of HREF attribute within a tag.
When you hover over the HREF-less tag with your mouse it will no longer turn into a proper
pointer cursor. It will turn into a text-selection cursor. But that’s not a problem. We can re-add
the correct mouse pointer cursor back again by forcing the CSS style on our buttons as in:
A.button { cursor: pointer; } /* Getting the mouse pointer back into a HREF-less A */
That works. But wait. Let’s take care of one more thing. The tag used for buttons might
still be rendered as a hyperlink. This means it will display an underline text decoration under
the button’s name which is the text printed inside the button. This of course wouldn’t happen
with a DIV. But in order to prevent that from happening in an A tag, let’s also remove the text
decorations by enforcing the following CSS style on all buttons whose class is “button”:
A.button { text-decoration: none; }
Once we handle the HREF tag by applying the aforementioned CSS styles to our A-tag based
buttons we are pretty much left with the equivalent of a DIV tag. At this point this stripped
down A tag will behave in the same way as a DIV-based button would.
From this moment on, given that we understand the changes we just made to the A tag, we can
continue the discussion of creating custom buttons in such way that would apply to both the A
and the DIV tags equally in the same exact way.
Choosing the DIV tag as the base element for our buttons saves us from having to deal with
“preparing” the A tag for turning it into a button. Which tag you will use in your web application
for creating CSS buttons is up to you. Just make sure that you stick to one tag to avoid
complications later on.
131

Whichever tag you will use to create your buttons, one thing is clear. We will simply use the
jQuery’s .click(...) method or “bind” the click action using the .bind(...) method to the anonymous
callback function that will execute the code when the button is clicked.
I think we are equipped withe enough knowledge to start experimenting with the code.
Let’s walk through the process step by step and create a few buttons. First, we need to determine
the HTML and CSS. We already discussed that the button will be defined using either
the A or DIV elements. Either way, notice the class=”button” is present.
Okay
Cancel
Delete
Alternatively, you can use the DIV tag. Notice the abscence of onclick attribute in either case.
Okay
Cancel
Delete
Button CSS Styles
Now let’s write the CSS. To add interactivity to our button we want to have at least 3 different
CSS styles for mouseover, mouseout and mousedown events.
Default Style
First we will need to determine the main CSS style which will describe the color, border style
and the gradient of the button. This is the default style that will be applied to all buttons:
The button displayed here is several times larger for clarity.
132

Our goal is to match the button with the theme of the rest of the website. That’s entirely up to
you and your sense of design. Let’s take a look at how border-radius can change the appearance
or “feel” of the entire button.
Aside from the three examples above using border-radius that is far greater than half of the
button’s height will result in an angle that makes a perfect circle, making both sides of the button
perfectly round. That’s why in the Default Style we started with I set border-radius to the
value of 32px. Half of our button’s height is far less than that because it’s just an A element. But
if we provide a value that is larger than half of the height of the HTML element the roundness
of the button will reach its maximum and stop there, looking like half of a perfect circle.
Button style is a personal choice. You can change the border-radius value to anything you
want. Simply experiment with different values until you achieve something that looks good.
On Hover
When we hover the mouse pointer over the button, we want the button to change its appearance.
One of the best ways to achieve this subtle effect is by slightly changing the color of the
border, the font color and adding an outset shadow using the box-shadow property:
The .buttonOn class does not need to define all of the values of the Default Class because it
will simply inherit all of them from A.button. What we need to do is to overwrite some of the
values. I indicated new box-shadow property and the overwritten properties in red color.
133

The new color #bbbbbb is probably not very far from #cccccc of the original button. But you
have to believe me that these subtle adjustments make the experience of using the button feel
much more elegant.
The idea is to apply subtle changes. It is therefore a good habit to avoid changing style properties
from one extreme to another just because we have hovered the mouse cursor over the button.
The same goes for the font color. We apply a subtle, almost invisible change on hover.
Pressed Down
And finally we need a third style that is applied to a button when the mouse button is pressed
down. I have experimented with an inverse gradient. However, the button in this state looked
much more elegant if I simply made the background a solid gray color.
After conducting a few CSS experiments I have determined that the optimal styles for all three
states should look close to something compared to what you are seeing below. So far we have
arrived at these three styles:
Of course, we don’t have to stop here. You can continue applying further changes to match the
buttons with the theme of your website. But this is a very good base to start with.
134

So far, we have briefly discussed the CSS code for creating three different button states. I even
mentioned the linear-gradient property in the very first example. But even though the CSS
property linear-gradient is a WC3 standard, it will not work in Chrome.
I wanted to find a way to easily create gradients without having to define solutions that worked
in all browsers by hand. Moreover, I needed a solution that would produce the same results in
all browsers. After a quick Google search, I found what I was looking for.
The CSS code gradient for the background of the buttons was created using this extremely
powerful online CSS gradient tool. It makes sure the gradient looks the same in all browsers.
In addition, you can simply copy and paste the generated code into your CSS file.
Instead of cluttering the page with the source code listing for the entire CSS, let me give you a
link to the actual button.css file which describes the styles we have discussed in this section.
Download buttons.css
http://www.learnjquery.org/book/sourcecode/buttons.css
Now that we have A.button, .Hover and .Pressed defined we can use jQuery to program the
logic of our buttons. We have discussed jQuery events earlier in the book. But in addition to
events we will use jQuery’s methods .addClass and .removeClass to dynamically add and remove
the CSS classes we have just created when a mouse event (such as mouseover) occurs.
Attaching Mouse Events to the Buttons
Let’s take a look at a very simple jQuery event system that will switch the CSS classes of our
buttons depending on whether the mouse is in over, out, pressed, and released state.
$(document).ready( function() {
// What should happen to all .button elements when the mouse is over the element?
$(“.button“).mouseover( function() {
// Add .Hover
$(this).addClass(“Hover”);
});
// What should happen to all .button elements when the mouse is outside of the element?
$(“.button”).mouseout( function() {
// Remove .Hover and also remove .Pressed if it was present from a previous action.
$(this).removeClass(“Hover”).removeClass(“Pressed”);
}
135

What should happen to all .button elements when the mouse button is pressed down?
$(“.button”).mousedown( function() {
// Add class .Pressed
$(this).addClass(“Pressed”);
}
// And finally, what happens when the mouse is released?
$(“.button”).mouseup(function()
{
// Remove class .Pressed
$(this).removeClass(“Pressed”);
});
}); // End of $(document).ready
We just linked the mouseover, mouseout, mousedown and mouseup events with the previously
created CSS button styles and took care of all special cases. For example, notice that the
mouseout event also removes class .Pressed from the button. This is necessary because when
the mouse cursor leaves the button element from a pressed state it is important to return the
button to its default style again. If we didn’t do that, the button would continue to look like it is
still pressed even though the mouse curors is no longer on it.
Running this code inside $(document).ready(...) is important because we only need to attach
these events once. We use .addClass and .removeClass accordingly inside of each callback.
From this moment on, you can physically change the CSS style of each button and the functionality
will remain the same. If you need the buttons to look different than the ones in this
example you should easily be able to modify them without losing the event functionality.
136

Note from the Author
Looks like you’ve come to the end of the book.
On July 12 2012 the book has grown by about 30 pages and finished being distributed for free
to everyone who has purchased the original copy in April. This does not mean that the book
can be distributed for free to anyone. Only that you have to purchase it once to receive all future
updates for free. You have purchased a single license to use this book.
As of July 12, 2012
Most important corrections have been applied, and a great amount of new content has been
added. However there are still syntax errors and things I’d like to fix. Perhaps even add a few
more chapters. I wouldn’t feel completely satisfied until Revision Three which is what I will be
working on in the coming months. For now, I ask you to remain patient and continue following
my free jQuery newsletter if you are a current subscribers.
My plan is to continue applying new edits and adding new content to this book throughout
the remainder of the year 2012 and shape it into something more definitive, something that
has raw information and solid educational material readers can learn from. Those who have
already purchased their copy don’t need to buy the book again just because new content was
added. They will receive new updates by e-mail. There is nothing else you need to do.
* * *
When I had the idea to write a book, I wanted to create a volume of interesting and useful insights.
We already have plenty books that simply go through one feature after another offering
examples of code and listing functions. My goal was to create a fluid experience, cover many
different subjects and relate them to one another.
In addition to this book you can subscribe to my free jQuery e-mail newsletter. The link is
available from the book’s homepage: www.learnjquery.org
I hope that you have enjoyed this book.
If you have any questions regarding the code examples please feel free to write me an email:
greg.sidelnikov@gmail.com
Book Website Twitter Facebook Google+
Thank you for reading.
137