WIXLIB

Phil BallardMichael MoncurSams Teach YourselfJavaScript Fifth Edition24Hoursin800 East 96th Street, Indianapolis, Indiana, 46240 USA

Sams Teach Yourself JavaScript in 24 Hours, Fifth EditionCopyright 2013 by Pearson Education, Inc.All rights reserved. No part of this book shall be reproduced, stored in a retrieval system,or transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, without written permission from the publisher. No patent liability is assumed withrespect to the use of the information contained herein. Although every precaution hasbeen taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions. Nor is any liability assumed for damages resulting from theuse of the information contained herein.ISBN-13: 978-0-672-33608-9ISBN-10: 0-672-33608-1Library of Congress Cataloging-in-Publication Data is on file.Printed in the United States of AmericaFirst Printing October 2012TrademarksAll terms mentioned in this book that are known to be trademarks or service marks havebeen appropriately capitalized. Sams Publishing cannot attest to the accuracy of thisinformation. Use of a term in this book should not be regarded as affecting the validity ofany trademark or service mark.Warning and DisclaimerEvery effort has been made to make this book as complete and as accurate as possible,but no warranty or fitness is implied. The information provided is on an “as is” basis. Theauthors and the publisher shall have neither liability nor responsibility to any person orentity with respect to any loss or damages arising from the information contained in thisbook.Bulk SalesSams Publishing offers excellent discounts on this book when ordered in quantity for bulkpurchases or special sales. For more information, please contactU.S. Corporate and Government or sales outside of the U.S., please contactInternational k TaubAcquisitions EditorMark TaberManaging EditorKristy HartProject EditorAnne GoebelCopy EditorGeneil BreezeIndexerErika MillenProofreaderChrissy White,Language LogisticsPublishing CoordinatorVanessa EvansTechnical EditorJoseph GreenspanCover DesignerAnne JonesCompositorNonie Ratcliff

Contents at a GlancePart IV: AjaxHOUR 16 Introducing Ajax. . . . . . . . . . .251HOUR 17 Creating a Simple AjaxIntroduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .HOUR 2 Writing Simple Scripts . . . . . . . . . . . . . . . . . .HOUR 18 Solving Ajax ProblemsPart I: First Steps with JavaScriptHOUR 1 Introducing JavaScriptLibrary .17. . . . . . . .21. . . . . . . . . . . . .37287Part V: Using JavaScript LibrariesHOUR 19 Making Life Easier withLibrariesHOUR 3 Using Functions . . . . . . .273. . . . . . . . . . . . . . . . .HOUR 20 A Closer Look at jQuery . . . . .303317HOUR 4 Objects and Built-InObjects. . . . . . . . . . . . . . . . . . . .49HOUR 21 The jQuery UI User InterfaceLibrary .HOUR 5 Different Types of Data. . . . . . . . . . . . . . . .HOUR 7 Object Oriented Programming.HOUR 8 Meet JSON85HOUR 22 JavaScript and Multimedia . . .353. . . . . . .365. . . . . . . . . . . . . . . .383. .103HOUR 23 HTML5 and JavaScript. . . . . . . . . . . . . . . .121HOUR 24 JavaScript Beyond theHOUR 9 Responding to Events. . . . . . . .HOUR 10 JavaScript and Cookies. . . . . .155. . . . . . . .171HOUR 12 Scripting the DOM . . . . . . . . .185HOUR 13 JavaScript and CSS. . . . . . . . .201HOUR 14 Good Coding Practice. . . . . . .HOUR 15 Graphics and Animation . . . . .Web Page135Part III: Working with the DocumentObject Model (DOM)HOUR 11 Navigating the DOM .335Part VI: Using JavaScript with OtherWeb TechnologiesPart II: More Advanced JavaScriptHOUR 6 Scripts That Do More . . . . . . . . . . . . . . . . . .67217235Part VII: AppendicesAPPENDIX A Tools for JavaScriptDevelopment. . . . . . . . . . . .399APPENDIX B JavaScript QuickReferenceIndex . . . . . . . . . . . . . .403. . . . . . . . . . . . . . . . . . . . . . . . . .411

Table of ContentsIntroductionHOUR 4: DOM Objects and Built-InObjects1. . . . . . . . . . . . . . . . . . . . . . .Who This Book Is For . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .The Aims of This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Conventions Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Q&A, Quiz, and Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .How the Book Is Organized . . . . . . . . . . . . . . . . . . . . . . . . . . . .Tools You’ll Need . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112223PART I: First Steps with JavaScript .5. . . . . .HOUR 1: Introducing JavaScript . . . . . . . . . 7Web Scripting Fundamentals . . . . . . . . . . . . . . . . . . . . . . . . . . 7Server- Versus Client-Side Programming . . . . . . . . . . 8JavaScript in a Nutshell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Where JavaScript Came From . . . . . . . . . . . . . . . . . . . . . . . . 9The script Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Introducing the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11Talking to the User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1949. . . . . . . . . . . . . . . . . . . . . . .Interacting with the User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Selecting Elements by Their id . . . . . . . . . . . . . . . . . . . . . .Accessing Browser History . . . . . . . . . . . . . . . . . . . . . . . . . .Using the location Object . . . . . . . . . . . . . . . . . . . . . . . . . . . .Browser Information—The navigator Object . . . .Dates and Times . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Simplifying Calculation with theMath Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .495152535457HOUR 5: Different Types of Data . . . . . . .Numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Boolean Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .678359646565666770737479808081HOUR 2: Writing Simple Scripts . . . . . . . .Including JavaScript in Your Web Page . . . . . . . . . .JavaScript Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Capturing Mouse Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21PART II: More Advanced JavaScript.212324263033343435HOUR 6: Scripts That Do More . . . . . . . . . 85Conditional Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85Loops and Control Structures . . . . . . . . . . . . . . . . . . . . . . 90Debugging Your Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102HOUR 3: Using Functions . . . . . . . . . . . . .General Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Calling Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Arguments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Returning Values from Functions . . . . . . . . . . . . . . . . . .Scope of Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Q&A. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37373840434446474748. . . . .HOUR 7: Object Oriented Programming. .What Is Object Oriented Programming(OOP)? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Object Creation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Extending and Inheriting ObjectsUsing prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Encapsulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Using Feature Detection . . . . . . . . . . . . . . . . . . . . . . . . . . . .Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Q&A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103103104111115116118119119120