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

Recommendations

Info

The Missing Manual Series xvi the missing credits • Switching to the Mac: The Missing Manual, Snow Leopard Edition, by David Pogue • Switching to the Mac: The Missing Manual, Lion Edition, by David Pogue • Wikipedia: The Missing Manual by John Broughton • Windows Vista: The Missing Manual by David Pogue • Windows 7: The Missing Manual by David Pogue • Word 2007: The Missing Manual by Chris Grover • Your Body: The Missing Manual by Matthew MacDonald • Your Brain: The Missing Manual by Matthew MacDonald • Your Money: The Missing Manual by J. D. Roth www.it-ebooks.info
Introduction The Web was a pretty boring place in its early days. Web pages were constructed from plain old HTML, so they could display information, and that was about all. Folks would click a link and then wait for a new web page to load. That was about as interactive as it got. These days, most websites are almost as responsive as the programs on a desktop computer, reacting immediately to every mouse click. And it’s all thanks to the subjects of this book—JavaScript and its sidekick, jQuery. What Is JavaScript? JavaScript is a programming language that lets you supercharge your HTML with animation, interactivity, and dynamic visual effects. JavaScript can make web pages more useful by supplying immediate feedback. For example, a JavaScript-powered shopping cart page can instantly display a total cost, with tax and shipping, the moment a visitor selects a product to buy. JavaScript can produce an error message immediately after someone attempts to submit a web form that’s missing necessary information. JavaScript also lets you create fun, dynamic, and interactive interfaces. For example, with JavaScript, you can transform a static page of thumbnail images into an animated slideshow (as you’ll learn how to do on page 314). Or you can do something more subtle like stuff more information on a page without making it seem crowded by organizing content into bite-size panels that visitors can access with a simple click of the mouse (page 301). Or add something useful and attractive, like pop-up tooltips that provide supplemental information for items on your web page (page 326). www.it-ebooks.info 1
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: • Facebook: The Missing Manual, T
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 and 30: Commercial Software Commercial webs
Page 31 and 32: way: You could build a house by cut
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?