JavaScript & jQuery: The Missing Manual ... - Robert Guajardo

Recommendations

Info

About This Book Likewise, you’ll find good documentation on jQuery at http://docs.jquery.com/ Main_Page. But it’s written by programmers for programmers, and so the explanations are mostly brief and technical. And while jQuery is generally more straightforward than regular JavaScript programming, this book will teach you fundamental jQuery principles and techniques so you can start off on the right path when enhancing your websites with jQuery. JavaScript & jQuery: The Missing Manual is designed to accommodate readers who have some experience building web pages. You’ll need to feel comfortable with HTML and CSS to get the most from this book, since JavaScript often works closely with HTML and CSS to achieve its magic. The primary discussions are written for advanced-beginner or intermediate computer users. But if you’re new to building web pages, special boxes called Up to Speed provide the introductory information you need to understand the topic at hand. If you’re an advanced web page jockey, on the other hand, keep your eye out for similar shaded boxes called Power Users’ Clinic. They offer more technical tips, tricks, and shortcuts for the experienced computer fan. Note: This book periodically recommends other books, covering topics that are too specialized or tangential for a manual about using JavaScript. Sometimes the recommended titles are from Missing Manual series publisher O’Reilly Media—but not always. If there’s a great book out there that’s not part of the O’Reilly family, we’ll let you know about it. This Book’s Approach to JavaScript JavaScript is a real programming language: It doesn’t work like HTML or CSS, and it has its own set of (often complicated) rules. It’s not always easy for web designers to switch gears and start thinking like computer programmers, and there’s no one book that can teach you everything there is to know about JavaScript. The goal of JavaScript & jQuery: The Missing Manual isn’t to turn you into the next great programmer (though it might start you on your way). This book is meant to familiarize web designers with the ins and outs of JavaScript and then move on to jQuery so that you can add really useful interactivity to a website as quickly and easily as possible. In this book, you’ll learn the basics of JavaScript and programming; but just the basics won’t make for very exciting web pages. It’s not possible in 500 pages to teach you everything about JavaScript that you need to know to build sophisticated, interactive web pages. Instead, much of this book will cover the wildly popular jQuery JavaScript library, which, as you’ll soon learn, will liberate you from all of the minute, time-consuming details of creating JavaScript programs that run well across different browsers. You’ll learn the basics of JavaScript, and then jump immediately to advanced web page interactivity with a little help—OK, a lot of help—from jQuery. Think of it this 12 javascript & jquery: the missing manual www.it-ebooks.info
way: You could build a house by cutting down and milling your own lumber, constructing your own windows, doors, and doorframes, manufacturing your own tile, and so on. That “do it yourself” approach is common to a lot of JavaScript books. But who has that kind of time? This book’s approach is more like building a house by taking advantage of already-built pieces and putting them together using basic skills. The end result will be a beautiful and functional house built in a fraction of the time it would take you to learn every step of the process. About the Outline JavaScript & jQuery: The Missing Manual is divided into five parts, each containing several chapters: • Part 1, Getting Started with JavaScript, starts at the very beginning. You’ll learn the basic building blocks of JavaScript as well as get some helpful tips on computer programming in general. This section teaches you how to add a script to a web page, store and manipulate information, and add smarts to a program so it can respond to different situations. You’ll also learn how to communicate with the browser window, store and read cookies, respond to various events like mouse clicks and form submissions, and modify the HTML of a web page. • Part 2, Getting Started with jQuery, introduces the Web’s most popular Java- Script library, jQuery. Here you’ll learn the basics of this amazing programming tool that will make you a more productive and capable JavaScript programmer. You’ll learn how to select and manipulate page elements, add interaction by making page elements respond to your visitors, and add flashy visual effects and animations. • Part 3, Building Web Page Features, provides many real-world examples of JavaScript in action. You’ll learn how to create pop-up navigation bars and build an interactive photo gallery. You’ll make your web forms more usable by adding form validation (so visitors can’t submit forms missing information), add a calendar widget to make selecting dates easy, and change form options based on selections a web visitor makes. Finally, you’ll create interesting user interfaces with content sliders, tooltips, and pop-up dialog boxes that look great and function flawlessly. • Part 4, Ajax: Communicating with the Web Server, covers the technology that single-handedly made JavaScript one of the most glamorous web languages to learn. In this section, you’ll learn how to use JavaScript to communicate with a web server so your pages can receive information and update themselves based on information provided by a web server—without having to load a new web page. Note: You’ll find step-by-step instructions for setting up a web server on your computer so you can take advantage of the cool technology (discussed in Part 3) on this book’s companion web page. See “Living Examples” on page 16 for details. www.it-ebooks.info introduction About This Book 13
Page 1 and 2: www.it-ebooks.info
Page 3 and 4: JavaScript & jQuery www.it-ebooks.i
Page 5 and 6: JavaScript & jQuery www.it-ebooks.i
Page 7 and 8: Table of Contents The Missing Credi
Page 9 and 10: Selecting Page Elements: The jQuery
Page 11 and 12: Chapter 9: Enhancing Web Forms . .
Page 13 and 14: Chapter 14: Going Further with Java
Page 15 and 16: The Missing Credits About the Autho
Page 17 and 18: • Facebook: The Missing Manual, T
Page 19 and 20: Introduction The Web was a pretty b
Page 21 and 22: Note: After Netscape introduced Jav
Page 23 and 24: Hey, I am the title of this web
Page 25 and 26: As mentioned on page 5, a web page
Page 27 and 28: • Declaration Block. The code fol
Page 29: Commercial Software Commercial webs
Page 33 and 34: • Operating-system basics. This b
Page 35 and 36: Safari ® Books Online Safari® Boo
Page 37 and 38: Part One: Getting Started with Java
Page 39 and 40: Writing Your First JavaScript Progr
Page 41 and 42: !=) and full of unfamiliar words (v
Page 43 and 44: JavaScript is called a scripting la
Page 45 and 46: the closing tag—this approach ma
Page 47 and 48: In addition, you can attach externa
Page 49 and 50: 6. Click the Alert box’s OK butto
Page 51 and 52: Attaching an External JavaScript Fi
Page 53 and 54: Most web browsers are set up to sil
Page 55 and 56: • Unterminated string literal. A
Page 57 and 58: Accessing the Safari Error Console
Page 59 and 60: The Grammar of JavaScript Learning
Page 61 and 62: Programming languages usually categ
Page 63 and 64: is a Boolean value: Either the emai
Page 65 and 66: Table 2-1. Some words are reserved
Page 67 and 68: FREQUENTLY ASKED QUESTION Spaces, T
Page 69 and 70: each line of code that uses the pri
Page 71 and 72: That feature, known as automatic ty
Page 73 and 74: The same rules apply when concatena
Page 75 and 76: Tutorial: Asking for Information In
Page 77 and 78: 4. Return to your text editor. Loca
Page 79 and 80: you put the list of items between o
Page 81 and 82:
Because the index number of the las
Page 83 and 84:
So if each time the visitor clicks
Page 85 and 86:
2. Between the first set of tags,
Page 87 and 88:
5. Return to your text editor and e
Page 89 and 90:
The world of JavaScript is also fil
Page 91 and 92:
It’s easy to forget how a program
Page 93 and 94:
The third line ends with a comment
Page 95 and 96:
Adding Logic and Control to Your Pr
Page 97 and 98:
Conditional Statement Basics Condit
Page 99 and 100:
if (answer == 31) { alert('Correct.
Page 101 and 102:
if (answer == 31) { alert('Correct.
Page 103 and 104:
fridayCash >= 50 yes alert('You sho
Page 105 and 106:
Note: To type a pipe character, pre
Page 107 and 108:
crucial pieces of a conditional sta
Page 109 and 110:
Note: Why two sets of script tags?
Page 111 and 112:
Handling Repetitive Tasks with Loop
Page 113 and 114:
The first time through this loop, t
Page 115 and 116:
For Loops JavaScript offers another
Page 117 and 118:
However, with a do/while loop, you
Page 119 and 120:
ace, one or more lines of JavaScrip
Page 121 and 122:
function print(message) { document.
Page 123 and 124:
var formattedTotal = total.toFixed(
Page 125 and 126:
var message = 'Outside the function
Page 127 and 128:
the prompt() command. In addition,
Page 129 and 130:
Now that the basic variables for th
Page 131 and 132:
This code is just a basic if/else s
Page 133 and 134:
Part Two: Getting Started with jQue
Page 135 and 136:
Introducing jQuery The first chapte
Page 137 and 138:
jQuery isn’t the only JavaScript
Page 139 and 140:
2. Click the “Current Release”
Page 141 and 142:
Tip: When using the Google CDN, you
Page 143 and 144:
It may seem hard to believe, but, i
Page 145 and 146:
• Remove the element. In the Netf
Page 147 and 148:
Unfortunately, the major browsers h
Page 149 and 150:
Element selectors jQuery also has i
Page 151 and 152:
Advanced Selectors jQuery also lets
Page 153 and 154:
jQuery Filters jQuery also provides
Page 155 and 156:
Because looping through a collectio
Page 157 and 158:
• .text() works like .html() but
Page 159 and 160:
Note: jQuery also includes a functi
Page 161 and 162:
• Finally, you may want to toggle
Page 163 and 164:
highlight a tag (perhaps in reacti
Page 165 and 166:
The attr() function returns the att
Page 167 and 168:
Fifty alert dialog boxes with the m
Page 169 and 170:
Creating all that HTML takes time a
Page 171 and 172:
4. Click on the empty line between
Page 173 and 174:
Although the text looks like it wil
Page 175 and 176:
Action/Reaction: Making Pages Come
Page 177 and 178:
Mouse Events Ever since Steve Jobs
Page 179 and 180:
Form Events In the pre-JavaScript d
Page 181 and 182:
2. Assign an event. In jQuery, most
Page 183 and 184:
Tutorial: Introducing Events This t
Page 185 and 186:
Now that you’ve got the basics, y
Page 187 and 188:
More jQuery Event Concepts Because
Page 189 and 190:
Tip: Because the ready() function i
Page 191 and 192:
The toggle() Event jQuery’s toggl
Page 193 and 194:
Tip: If you access the event object
Page 195 and 196:
Advanced Event Management You can l
Page 197 and 198:
Other Ways to Use the bind() Functi
Page 199 and 200:
function is discussed on page 187).
Page 201 and 202:
9 function() { 10 $(this).next('.an
Page 203 and 204:
Animations and Effects In the last
Page 205 and 206:
Basic Showing and Hiding jQuery pro
Page 207 and 208:
Normally, when you hide an element
Page 209 and 210:
The Programming 1. In a text editor
Page 211 and 212:
edge of the page, changing its opac
Page 213 and 214:
When using the animate() function,
Page 215 and 216:
its width and height from zero to f
Page 217 and 218:
Note: See the note on page 29 for i
Page 219 and 220:
$(document).ready(function() { $('#
Page 221 and 222:
You’ll see the div move into view
Page 223 and 224:
Part Three: Building Web Page Featu
Page 225 and 226:
Improving Your Images Web designers
Page 227 and 228:
The key to this technique is line 1
Page 229 and 230:
1 2 3 $(document).ready(function(
Page 231 and 232:
Figure 7-2: The basic structure of
Page 233 and 234:
Here’s the creative part: Instead
Page 235 and 236:
Overview of Task The way the galler
Page 237 and 238:
1. In a text editor, open the file
Page 239 and 240:
New image (fade in) 1 2 3 Old i
Page 241 and 242:
The Basics FancyBox is very easy to
Page 243 and 244:
In addition, FancyBox can use the
Page 245 and 246:
jQuery FancyBox accepts a lot of di
Page 247 and 248:
and shifts the image using the back
Page 249 and 250:
• Border color around pop-up imag
Page 251 and 252:
The actual value you supply the rel
Page 253 and 254:
Improving Navigation Links make the
Page 255 and 256:
Line 1 selects all external links (
Page 257 and 258:
Manually adding target=“_blank”
Page 259 and 260:
open(URL, name, properties) The ope
Page 261 and 262:
• toolbar sets the visibility of
Page 263 and 264:
Tip: The jQuery ScrollTo plug-in pr
Page 265 and 266:
1. Download the FancyBox files from
Page 267 and 268:
5. Near the top of the file, click
Page 269 and 270:
Gadgets Gadget Basic Gadget Stan
Page 271 and 272:
margin: 0; padding: 0; list-style-t
Page 273 and 274:
To activate the menu, you first use
Page 275 and 276:
Enhancing Web Forms Since the earli
Page 277 and 278:
Mars Alpha Centauri You've never he
Page 279 and 280:
$(':checked') Even better, you can
Page 281 and 282:
adio buttons and checkboxes require
Page 283 and 284:
This code creates a text field on t
Page 285 and 286:
Like other events, you can use jQue
Page 287 and 288:
they can type? Why not just place t
Page 289 and 290:
Sometimes I get the same form infor
Page 291 and 292:
Note: See the note on page 29 for i
Page 293 and 294:
To disable the fields, all you have
Page 295 and 296:
fields if they don’t have to. You
Page 297 and 298:
Checking to make sure a text field
Page 299 and 300:
5. Apply the validate() function to
Page 301 and 302:
For example, say you have a field a
Page 303 and 304:
Tip: You can combine the basic vali
Page 305 and 306:
$('#signup').validate({ rules: { na
Page 307 and 308:
While JavaScript validation is grea
Page 309 and 310:
label.error { color: #F00; font-wei
Page 311 and 312:
Congratulations—you’ve just add
Page 313 and 314:
equired: true, email: true } } // e
Page 315 and 316:
Don’t forget the comma on line 5.
Page 317 and 318:
to place. The function receives bot
Page 319 and 320:
Expanding Your Interface A web page
Page 321 and 322:
Overview Specifications Shipping T
Page 323 and 324:
.tabs a { display: block; text-deco
Page 325 and 326:
Tabbed Panels Tutorial Now
Page 327 and 328:
Line 3 hides the panels. Because ea
Page 329 and 330:
9. Save the page and try it out in
Page 331 and 332:
Using AnythingSlider AnythingSlider
Page 333 and 334:
This is a tag (an HTML tag meant
Page 335 and 336:
• Color of the navigation buttons
Page 337 and 338:
• Variable size slides. If each s
Page 339 and 340:
• innerWidth() returns the width
Page 341 and 342:
$('#caption').css({ 'position' : 'a
Page 343 and 344:
.scrollTop( ) .scrollLeft( ) Browse
Page 345 and 346:
Here’s the HTML for a basic toolt
Page 347 and 348:
tooltip content. If the tooltip con
Page 349 and 350:
8. Inside the anonymous function yo
Page 351 and 352:
Lines 7 and 8 use the outerHeight()
Page 353 and 354:
Note: The example in this section p
Page 355 and 356:
13 if (triggerPos.top - tipH - scro
Page 357 and 358:
Part Four: Ajax: Communication with
Page 359 and 360:
Introducing Ajax JavaScript is grea
Page 361 and 362:
• Display new HTML content withou
Page 363 and 364:
The XMLHttpRequest object was actua
Page 365 and 366:
1. Create an instance of the XMLHtt
Page 367 and 368:
In addition, most of the time, you
Page 369 and 370:
Unless you’re using jQuery’s ba
Page 371 and 372:
fine—it’ll get any visitors to
Page 373 and 374:
$('#newslinks a').click(function()
Page 375 and 376:
Or: $.get(url, data, callback); $.p
Page 377 and 378:
You need to be careful using this m
Page 379 and 380:
When the web browser sends off a re
Page 381 and 382:
link behavior and prevents the web
Page 383 and 384:
Tutorial: Using the get() Function
Page 385 and 386:
The tag has the ID login applied t
Page 387 and 388:
doesn’t remove the first error me
Page 389 and 390:
Note: Another type of JSON, known a
Page 391 and 392:
The same is true with a JSON object
Page 393 and 394:
You pass the JSON object, and an an
Page 395 and 396:
Flickr and Google Maps In the previ
Page 397 and 398:
Flickr gives you a couple of ways t
Page 399 and 400:
Note: You can only search for tags
Page 401 and 402:
(see line 2 on page 381). Then, to
Page 403 and 404:
and an anonymous function. The $.ea
Page 405 and 406:
11. Save the page and preview it in
Page 407 and 408:
Note: GoMap uses version 3 of the G
Page 409 and 410:
In fact, you can use anything that
Page 411 and 412:
mapTypeControl : false If you do li
Page 413 and 414:
You can also add a marker after the
Page 415 and 416:
Adding Information Windows to Marke
Page 417 and 418:
8. Edit the script by adding a comm
Page 419 and 420:
Part Five: Tips, Tricks, and Troubl
Page 421 and 422:
Getting the Most from jQuery jQuery
Page 423 and 424:
Storing a selection into a variable
Page 425 and 426:
$('#main a') than this selector: $(
Page 427 and 428:
• Selectors (http://api.jquery.co
Page 429 and 430:
• Internals (http://api.jquery.co
Page 431 and 432:
jQuery functions working in this wa
Page 433 and 434:
You use .find() to select a descend
Page 435 and 436:
The .siblings() function also can t
Page 437 and 438:
More Functions For Manipulating HTM
Page 439 and 440:
This is the contents of outer
Page 441 and 442:
$('#container').delegate('selector'
Page 443 and 444:
Going Further with Java Script This
Page 445 and 446:
In this case, the conditional state
Page 447 and 448:
The slice() method requires a numbe
Page 449 and 450:
Unless you’re a super-alien from
Page 451 and 452:
Character Matches | Either the char
Page 453 and 454:
string, when what you really want i
Page 455 and 456:
Note: For regular expressions that
Page 457 and 458:
Note: The email regex listed above
Page 459 and 460:
• www\. matches www.. • ) is th
Page 461 and 462:
You could rewrite the code from pag
Page 463 and 464:
Working with Numbers Numbers are an
Page 465 and 466:
Note: You’re probably wondering w
Page 467 and 468:
var cost = 10; var printCost = '$'
Page 469 and 470:
The new Date() command creates a Da
Page 471 and 472:
JavaScript lets you access particul
Page 473 and 474:
Line 8 introduces a mathematical op
Page 475 and 476:
Creating a date that’s one week f
Page 477 and 478:
For example, if you have a search b
Page 479 and 480:
14 ); 15 }); //end ready() Now, the
Page 481 and 482:
Notice that there’s an awful lot
Page 483 and 484:
eak; default: message = 'What kind
Page 485 and 486:
Troubleshooting and Debugging Every
Page 487 and 488:
You’ll encounter a syntax error w
Page 489 and 490:
There are three basic categories of
Page 491 and 492:
For example, the following code gen
Page 493 and 494:
paths is the location of the web pa
Page 495 and 496:
The best way to deal with errors an
Page 497 and 498:
View console List of errors Using c
Page 499 and 500:
Tutorial: Using the Firebug Console
Page 501 and 502:
Save the page; reload it in Firefox
Page 503 and 504:
More Powerful Debugging The Firebug
Page 505 and 506:
After the script begins to run, as
Page 507 and 508:
Add new expression chapter 15: trou
Page 509 and 510:
3. Launch your text editor and open
Page 511 and 512:
A red dot appears to the left of li
Page 513 and 514:
16. Return to your text editor, and
Page 515 and 516:
JavaScript Resources This book prov
Page 517 and 518:
jQuery Much of this book covered th
Page 519 and 520:
Websites • Eloquent JavaScript (h
Page 521 and 522:
Index Symbols & (ampersand) && logi
Page 523 and 524:
ind() function, jQuery, 177-179, 42
Page 525 and 526:
dimensions of browser window, 319-3
Page 527 and 528:
validating, 278-291 error messages
Page 529 and 530:
post() function, 356-357, 358 seria
Page 531 and 532:
examples using, 2, 23, 124 librarie
Page 533 and 534:
searching selections, 365, 407, 413
Page 535 and 536:
typeof operator, 72 typing errors.
Page 537 and 538:
Colophon This book was composited i
show all

JavaScript & jQuery: The Missing Manual ... - Robert Guajardo

Create successful ePaper yourself

Delete template?

Save as template?