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

Recommendations

Info

Introducing Programming 22 javascript & jquery: the missing manual Figure 1-1: Java Script lets web pages respond to visitors. On Amazon.com, mousing over the “Gifts & Wish Lists” link opens a tab that floats above the other content on the page and offers additional options. Note: Actually, HTML5 does add some smarts to HTML—including basic form validation. But since not all browsers support these nifty additions (and because you can do a whole lot more with forms and JavaScript), you still need JavaScript to build the best, most user-friendly and interactive forms. You can learn more about HTML5 and web forms in Mark Pilgrim’s HTML5: Up and Running (O’Reilly). Introducing Programming For a lot of people, the term “computer programming” conjures up visions of superintelligent nerds hunched over keyboards, typing nearly unintelligible gibberish for hours on end. And, honestly, some programming is like that. Programming can seem like complex magic that’s well beyond the average mortal. But many programming concepts aren’t difficult to grasp, and as programming languages go, JavaScript is relatively friendly to nonprogrammers. Still, JavaScript is more complex than either HTML or CSS, and programming often is a foreign world to web designers; so one goal of this book is to help you think more like a programmer. Throughout this book, you’ll learn fundamental programming concepts that apply whether you’re writing JavaScript, ActionScript, or even writing a desktop program using C++. More importantly, you’ll learn how to approach a programming task so you’ll know exactly what you want to do before you start adding JavaScript to a web page. Many web designers are immediately struck by the strange symbols and words used in JavaScript. An average JavaScript program is sprinkled with symbols ({ } [ ] ; , () www.it-ebooks.info
!=) and full of unfamiliar words (var, null, else if). It’s like staring at a foreign language, and in many ways, learning a programming language is a lot like learning another language. You need to learn new words, new punctuation, and understand how to put them together so you can communicate successfully. In fact, every programming language has its own set of key words and characters, and its own set of rules for putting those words and characters together—the language’s syntax. Learning JavaScript’s syntax is like learning the vocabulary and grammar of another language. You’ll need to memorize the words and rules of the language (or at least keep this book handy as a reference). When learning to speak a new language, you quickly realize that placing an accent on the wrong syllable can make a word unintelligible. Likewise, a simple typo or even a missing punctuation mark can prevent a JavaScript program from working, or trigger an error in a web browser. You’ll make plenty of mistakes as you start to learn to program—that’s just the nature of programming. JavaScript is a client-side language, which (in English) means that it works inside a web browser. The alternative type of web programming language is called a server-side language, which you’ll find in pages built around PHP, .NET, ASP, ColdFusion, Ruby on Rails, and other web server technologies. Server-side programming languages, as the name suggests, run on a web server. They can exhibit a lot of intelligence by accessing databases, processing credit cards, and sending email around the globe. The problem with server-side languages is that they require the web browser to send requests to the web server, forcing visitors to wait until a new page arrives with new information. Client-side languages, on the other hand, can react immediately and change what a visitor sees in his web browser without the need to download a new page. Content can appear or disappear, move around the screen, or automatically update based on how a visitor interacts with the page. This responsiveness lets you create websites that feel more like desktop programs than static web pages. But JavaScript isn’t the only client-side technology in town. You can also use plug-ins to add programming smarts to a web page. Java applets are one example. These are small programs, written in the Java programming language, that run in a web browser. They also tend to start up slowly and have been known to crash the browser. UP TO SPEED The Client Side vs. the Server Side chapter 1: writing your first javascript program www.it-ebooks.info Introducing Programming Flash is another plug-in based technology that offers sophisticated animation, video, sound, and lots of interactive potential. In fact, it’s sometimes hard to tell if an interactive web page is using JavaScript or Flash. For example, Google Maps could also be created in Flash (in fact, Yahoo Maps was at one time a Flash application, until Yahoo recreated it using JavaScript). A quick way to tell the difference: Rightclick on the part of the page that you think might be Flash (the map itself, in this case); if it is, you’ll see a pop-up menu that includes “About the Flash Player.” Ajax, which you’ll learn about in Part 4 of this book, brings both client-side and server-side together. Ajax is a method for using JavaScript to talk to a server, retrieve information from the server, and update the web page without the need to load a new web page. Google Maps uses this technique to let you move around a map without forcing you to load a new web page. In truth, JavaScript can also be a server-side programming language. For example, the node.js web server (http:// nodejs.org/) uses JavaScript as a server-side programming language to connect to a database, access the web server’s file system, and perform many other tasks on a web server. This book doesn’t discuss that aspect of JavaScript programming, however. 23
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 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: Writing Your First JavaScript Progr
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

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?