JavaScript and JQuery: Interactive Front-End Web Development

JavaScript and JQuery: Interactive Front-End Web Development

Released June 2014
Publisher(s): Wiley
ISBN: 9781118531648

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Learn JavaScript and jQuery a nicer way

This full-color book adopts a visual approach to teaching JavaScript & jQuery, showing you how to make web pages more interactive and interfaces more intuitive through the use of inspiring code examples, infographics, and photography. The content assumes no previous programming experience, other than knowing how to create a basic web page in HTML & CSS. You'll learn how to achieve techniques seen on many popular websites (such as adding animation, tabbed panels, content sliders, form validation, interactive galleries, and sorting data)..

  • Introduces core programming concepts in JavaScript and jQuery

  • Uses clear descriptions, inspiring examples, and easy-to-follow diagrams

  • Teaches you how to create scripts from scratch, and understand the thousands of JavaScripts, JavaScript APIs, and jQuery plugins that are available on the web

  • Demonstrates the latest practices in progressive enhancement, cross-browser compatibility, and when you may be better off using CSS3

    • If you're looking to create more enriching web experiences and express your creativity through code, then this is the book for you.

    This book is also available as part of a set in hardcover - Web Design with HTML, CSS, JavaScript and jQuery, 9781119038634 - and in softcover - Web Design with HTML, CSS, JavaScript and jQuery, 9781118907443.

    Table of contents

    1. Cover Page
    2. Title Page
    3. Copyright
    4. TABLE OF CONTENTS
    5. CREDITS
    6. Introduction
      1. EXAMPLES OF JAVASCRIPT IN THE BROWSER
      2. THE STRUCTURE OF THIS BOOK
      3. HTML & CSS: A QUICK REFRESHER
      4. BROWSER SUPPORT
    7. Chapter 1: The ABC of Programming
      1. 1/a WHAT IS A SCRIPT AND HOW DO I CREATE ONE?
        1. A SCRIPT IS A SERIES OF INSTRUCTIONS
        2. WRITING A SCRIPT
        3. DESIGNING A SCRIPT: TASKS
        4. DESIGNING A SCRIPT: STEPS
        5. FROM STEPS TO CODE
        6. DEFINING A GOAL & DESIGNING THE SCRIPT
        7. SKETCHING OUT THE TASKS IN A FLOWCHART
      2. 1/b HOW DO COMPUTERS FIT IN WITH THE WORLD AROUND THEM?
        1. COMPUTERS CREATE MODELS OF THE WORLD USING DATA
        2. OBJECTS & PROPERTIES
        3. EVENTS
        4. METHODS
        5. PUTTING IT ALL TOGETHER
        6. WEB BROWSERS ARE PROGRAMS BUILT USING OBJECTS
        7. THE DOCUMENT OBJECT REPRESENTS AN HTML PAGE
        8. HOW A BROWSER SEES A WEB PAGE
      3. 1/c HOW DO I WRITE A SCRIPT FOR A WEB PAGE?
        1. HOW HTML, CSS, & JAVASCRIPT FIT TOGETHER
        2. PROGRESSIVE ENHANCEMENT
        3. CREATING A BASIC JAVASCRIPT
        4. LINKING TO A JAVASCRIPT FILE FROM AN HTML PAGE
        5. THE SOURCE CODE IS NOT AMENDED
        6. PLACING THE SCRIPT IN THE PAGE
        7. HOW TO USE OBJECTS & METHODS
        8. JAVASCRIPT RUNS WHERE IT IS FOUND IN THE HTML
    8. Chapter 2: Basic JavaScript Instructions
      1. STATEMENTS
      2. COMMENTS
      3. WHAT IS A VARIABLE?
      4. VARIABLES: HOW TO DECLARE THEM
      5. VARIABLES: HOW TO ASSIGN THEM A VALUE
      6. DATA TYPES
      7. USING A VARIABLE TO STORE A NUMBER
      8. USING A VARIABLE TO STORE A STRING
      9. USING QUOTES INSIDE A STRING
      10. USING A VARIABLE TO STORE A BOOLEAN
      11. SHORTHAND FOR CREATING VARIABLES
      12. CHANGING THE VALUE OF A VARIABLE
      13. RULES FOR NAMING VARIABLES
      14. ARRAYS
      15. CREATING AN ARRAY
      16. VALUES IN ARRAYS
      17. ACCESSING & CHANGING VALUES IN AN ARRAY
      18. EXPRESSIONS
      19. OPERATORS
      20. ARITHMETIC OPERATORS
      21. USING ARITHMETIC OPERATORS
      22. STRING OPERATOR
      23. USING STRING OPERATORS
      24. EXAMPLE
    9. Chapter 3: Functions, Methods & Objects
      1. WHAT IS A FUNCTION?
      2. A BASIC FUNCTION
      3. DECLARING A FUNCTION
      4. CALLING A FUNCTION
      5. DECLARING FUNCTIONS THAT NEED INFORMATION
      6. CALLING FUNCTIONS THAT NEED INFORMATION
      7. GETTING A SINGLE VALUE OUT OF A FUNCTION
      8. GETTING MULTIPLE VALUES OUT OF A FUNCTION
      9. ANONYMOUS FUNCTIONS & FUNCTION EXPRESSIONS
      10. IMMEDIATELY INVOKED FUNCTION EXPRESSIONS
      11. VARIABLE SCOPE
      12. HOW MEMORY & VARIABLES WORK
      13. WHAT IS AN OBJECT?
      14. CREATING AN OBJECT: LITERAL NOTATION
      15. ACCESSING AN OBJECT AND DOT NOTATION
      16. CREATING OBJECTS USING LITERAL NOTATION
      17. CREATING MORE OBJECT LITERALS
      18. CREATING AN OBJECT: CONSTRUCTOR NOTATION
      19. UPDATING AN OBJECT
      20. CREATING MANY OBJECTS: CONSTRUCTOR NOTATION
      21. CREATING OBJECTS USING CONSTRUCTOR SYNTAX
      22. CREATE & ACCESS OBJECTS CONSTRUCTOR NOTATION
      23. ADDING AND REMOVING PROPERTIES
      24. RECAP: WAYS TO CREATE OBJECTS
      25. THIS (IT IS A KEYWORD)
      26. RECAP: STORING DATA
      27. ARRAYS ARE OBJECTS
      28. ARRAYS OF OBJECTS & OBJECTS IN ARRAYS
      29. WHAT ARE BUILT-IN OBJECTS?
      30. THREE GROUPS OF BUILT-IN OBJECTS
      31. THE BROWSER OBJECT MODEL: THE WINDOW OBJECT
      32. USING THE BROWSER OBJECT MODEL
      33. THE DOCUMENT OBJECT MODEL: THE DOCUMENT OBJECT
      34. USING THE DOCUMENT OBJECT
      35. GLOBAL OBJECTS: STRING OBJECT
      36. WORKING WITH STRINGS
      37. DATA TYPES REVISITED
      38. GLOBAL OBJECTS: NUMBER OBJECT
      39. WORKING WITH DECIMAL NUMBERS
      40. GLOBAL OBJECTS: MATH OBJECT
      41. MATH OBJECT TO CREATE RANDOM NUMBERS
      42. CREATING AN INSTANCE OF THE DATE OBJECT
      43. GLOBAL OBJECTS: DATE OBJECT (AND TIME)
      44. CREATING A DATE OBJECT
      45. WORKING WITH DATES & TIMES
      46. EXAMPLE FUNCTIONS, METHODS & OBJECTS
    10. Chapter 4: Decisions & Loops
      1. DECISION MAKING
      2. EVALUATING CONDITIONS & CONDITIONAL STATEMENTS
      3. COMPARISON OPERATORS: EVALUATING CONDITIONS
      4. STRUCTURING COMPARISON OPERATORS
      5. USING COMPARISON OPERATORS
      6. USING EXPRESSIONS WITH COMPARISON OPERATORS
      7. COMPARING TWO EXPRESSIONS
      8. LOGICAL OPERATORS
      9. USING LOGICAL AND
      10. USING LOGICAL OR & LOGICAL NOT
      11. IF STATEMENTS
      12. USING IF STATEMENTS
      13. IF…ELSE STATEMENTS
      14. USING IF…ELSE STATEMENTS
      15. SWITCH STATEMENTS
      16. USING SWITCH STATEMENTS
      17. TYPE COERCION & WEAK TYPING
      18. TRUTHY & FALSY VALUES
      19. CHECKING EQUALITY & EXISTENCE
      20. SHORT CIRCUIT VALUES
      21. LOOPS
      22. LOOP COUNTERS
      23. LOOPING
      24. KEY LOOP CONCEPTS
      25. USING FOR LOOPS
      26. USING WHILE LOOPS
      27. USING DO WHILE LOOPS
      28. EXAMPLE
    11. Chapter 5: Document Object Model
      1. THE DOM TREE IS A MODEL OF A WEB PAGE
      2. WORKING WITH THE DOM TREE
      3. CACHING DOM QUERIES
      4. ACCESSING ELEMENTS
      5. METHODS THAT SELECT INDIVIDUAL ELEMENTS
      6. SELECTING ELEMENTS USING ID ATTRIBUTES
      7. NODELISTS: DOM QUERIES THAT RETURN MORE THAN ONE ELEMENT
      8. SELECTING AN ELEMENT FROM A NODELIST
      9. SELECTING ELEMENTS USING CLASS ATTRIBUTES
      10. SELECTING ELEMENTS BY TAG NAME
      11. SELECTING ELEMENTS USING CSS SELECTORS
      12. REPEATING ACTIONS FOR AN ENTIRE NODELIST
      13. LOOPING THROUGH A NODELIST
      14. LOOPING THROUGH A NODELIST: PLAY-BY-PLAY
      15. TRAVERSING THE DOM
      16. WHITESPACE NODES
      17. PREVIOUS & NEXT SIBLING
      18. FIRST & LAST CHILD
      19. HOW TO GET/UPDATE ELEMENT CONTENT
      20. ACCESS & UPDATE A TEXT NODE WITH NODEVALUE
      21. ACCESSING & CHANGING A TEXT NODE
      22. ACCESS & UPDATE TEXT WITH TEXTCONTENT (& INNERTEXT)
      23. ACCESSING TEXT ONLY
      24. ADDING OR REMOVING HTML CONTENT
      25. ACCESS & UPDATE TEXT & MARKUP WITH INNERHTML
      26. UPDATE TEXT & MARKUP
      27. ADDING ELEMENTS USING DOM MANIPULATION
      28. ADDING AN ELEMENT TO THE DOM TREE
      29. REMOVING ELEMENTS VIA DOM MANIPULATION
      30. REMOVING AN ELEMENT FROM THE DOM TREE
      31. COMPARING TECHNIQUES: UPDATING HTML CONTENT
      32. CROSS-SITE SCRIPTING (XSS) ATTACKS
      33. DEFENDING AGAINST CROSS-SITE SCRIPTING
      34. XSS: VALIDATION & TEMPLATES
      35. XSS: ESCAPING & CONTROLLING MARKUP
      36. ATTRIBUTE NODES
      37. CHECK FOR AN ATTRIBUTE AND GET ITS VALUES
      38. CREATING ATTRIBUTES & CHANGING THEIR VALUES
      39. REMOVING ATTRIBUTES
      40. EXAMINING THE DOM IN CHROME
      41. EXAMINING THE DOM IN FIREFOX
      42. EXAMPLE
    12. Chapter 6: Events
      1. DIFFERENT EVENT TYPES
      2. HOW EVENTS TRIGGER JAVASCRIPT CODE
      3. THREE WAYS TO BIND AN EVENT TO AN ELEMENT
      4. HTML EVENT HANDLER ATTRIBUTES (DO NOT USE)
      5. TRADITIONAL DOM EVENT HANDLERS
      6. USING DOM EVENT HANDLERS
      7. EVENT LISTENERS
      8. USING EVENT LISTENERS
      9. USING PARAMETERS WITH EVENT HANDLERS & LISTENERS
      10. USING PARAMETERS WITH EVENT LISTENERS
      11. SUPPORTING OLDER VERSIONS OF IE
      12. FALLBACK FOR USING EVENT LISTENERS IN IE8
      13. EVENT FLOW
      14. WHY FLOW MATTERS
      15. THE EVENT OBJECT
      16. THE EVENT OBJECT IN IE5-8
      17. USING EVENT LISTENERS WITH THE EVENT OBJECT
      18. EVENT DELEGATION
      19. CHANGING DEFAULT BEHAVIOR
      20. USING EVENT DELEGATION
      21. WHICH ELEMENT DID AN EVENT OCCUR ON?
      22. DIFFERENT TYPES OF EVENTS
      23. USER INTERFACE EVENTS
      24. LOAD
      25. FOCUS & BLUR EVENTS
      26. FOCUS & BLUR
      27. MOUSE EVENTS
      28. CLICK
      29. WHERE EVENTS OCCUR
      30. DETERMINING POSITION
      31. KEYBOARD EVENTS
      32. WHICH KEY WAS PRESSED
      33. FORM EVENTS
      34. USING FORM EVENTS
      35. MUTATION EVENTS & OBSERVERS
      36. USING MUTATION EVENTS
      37. HTML5 EVENTS
      38. USING HTML5 EVENTS
      39. EXAMPLE
    13. Chapter 7: jQuery
      1. WHAT IS JQUERY?
      2. A BASIC JQUERY EXAMPLE
      3. WHY USE JQUERY?
      4. FINDING ELEMENTS
      5. DOING THINGS WITH YOUR SELECTION
      6. A MATCHED SET / JQUERY SELECTION
      7. JQUERY METHODS THAT GET AND SET DATA
      8. JQUERY OBJECTS STORE REFERENCES TO ELEMENTS
      9. CACHING JQUERY SELECTIONS IN VARIABLES
      10. LOOPING
      11. CHAINING
      12. CHECKING A PAGE IS READY TO WORK WITH
      13. GETTING ELEMENT CONTENT
      14. GETTING AT CONTENT
      15. UPDATING ELEMENTS
      16. CHANGING CONTENT
      17. INSERTING ELEMENTS
      18. ADDING NEW CONTENT
      19. GETTING AND SETTING ATTRIBUTE VALUES
      20. WORKING WITH ATTRIBUTES
      21. GETTING & SETTING CSS PROPERTIES
      22. CHANGING CSS RULES
      23. WORKING WITH EACH ELEMENT IN A SELECTION
      24. USING .EACH()
      25. EVENT METHODS
      26. EVENTS
      27. THE EVENT OBJECT
      28. EVENT OBJECT
      29. ADDITIONAL PARAMETERS FOR EVENT HANDLERS
      30. DELEGATING EVENTS
      31. EFFECTS
      32. BASIC EFFECTS
      33. ANIMATING CSS PROPERTIES
      34. USING ANIMATION
      35. TRAVERSING THE DOM
      36. TRAVERSING
      37. ADD & FILTER ELEMENTS IN A SELECTION
      38. FILTERS IN USE
      39. FINDING ITEMS BY ORDER
      40. USING INDEX NUMBERS
      41. SELECTING FORM ELEMENTS
      42. FORM METHODS & EVENTS
      43. WORKING WITH FORMS
      44. CUTTING & COPYING ELEMENTS
      45. CUT, COPY, PASTE
      46. BOX DIMENSIONS
      47. CHANGING DIMENSIONS
      48. WINDOW & PAGE DIMENSIONS
      49. POSITION OF ELEMENTS ON THE PAGE
      50. DETERMINING POSITION OF ITEMS ON THE PAGE
      51. WAYS TO INCLUDE JQUERY IN YOUR PAGE
      52. LOADING JQUERY FROM A CDN
      53. WHERE TO PLACE YOUR SCRIPTS
      54. JQUERY DOCUMENTATION
      55. EXTENDING JQUERY WITH PLUGINS
      56. JAVASCRIPT LIBRARIES
      57. PREVENTING CONFLICTS WITH OTHER LIBRARIES
      58. EXAMPLE JQUERY
    14. Chapter 8: Ajax & JSON
      1. WHAT IS AJAX?
      2. WHY USE AJAX?
      3. HOW AJAX WORKS
      4. HANDLING AJAX REQUESTS & RESPONSES
      5. DATA FORMATS
      6. XML: EXTENSIBLE MARKUP LANGUAGE
      7. JSON: JAVASCRIPT OBJECT NOTATION
      8. WORKING WITH JSON DATA
      9. LOADING HTML WITH AJAX
      10. LOADING XML WITH AJAX
      11. LOADING JSON WITH AJAX
      12. WORKING WITH DATA FROM OTHER SERVERS
      13. HOW JSONP WORKS
      14. USING JSONP
      15. JQUERY & AJAX: REQUESTS
      16. JQUERY & AJAX: RESPONSES
      17. LOADING HTML INTO A PAGE WITH JQUERY
      18. LOADING CONTENT
      19. JQUERY'S AJAX SHORTHAND METHODS
      20. REQUESTING DATA
      21. SENDING FORMS USING AJAX
      22. SUBMITTING FORMS
      23. LOADING JSON & HANDLING AJAX ERRORS
      24. JSON & ERRORS
      25. AJAX REQUESTS WITH FINE-GRAINED CONTROL
      26. CONTROLLING AJAX
      27. EXAMPLE AJAX & JSON
    15. Chapter 9: APIs
      1. PLAYING NICELY WITH OTHERS
      2. HTML5 JAVASCRIPT APIS
      3. FEATURE DETECTION
      4. MODERNIZR
      5. GEOLOCATION API: FINDING USERS' LOCATIONS
      6. THE GEOLOCATION API
      7. WORKING WITH LOCATION
      8. WEB STORAGE API: STORING DATA IN BROWSERS
      9. LOCAL STORAGE
      10. SESSION STORAGE
      11. HISTORY API & PUSHSTATE
      12. THE HISTORY OBJECT
      13. WORKING WITH HISTORY
      14. SCRIPTS WITH APIS
      15. JQUERY UI
      16. JQUERY UI ACCORDION
      17. JQUERY UI TABS
      18. JQUERY UI FORM
      19. ANGULARJS
      20. USING ANGULAR
      21. VIEW & VIEWMODEL
      22. DATA BINDING & SCOPE
      23. GETTING EXTERNAL DATA
      24. LOOP THROUGH RESULTS
      25. PLATFORM APIS
      26. GOOGLE MAPS API
      27. BASIC MAP SETTINGS
      28. A BASIC GOOGLE MAP
      29. CHANGING CONTROLS
      30. GOOGLE MAP WITH CUSTOM CONTROLS
      31. STYLING A GOOGLE MAP
      32. ADDING MARKERS
    16. Chapter 10: Error Handling & Debugging
      1. ORDER OF EXECUTION
      2. EXECUTION CONTEXTS
      3. THE STACK
      4. EXECUTION CONTEXT & HOISTING
      5. UNDERSTANDING SCOPE
      6. UNDERSTANDING ERRORS
      7. ERROR OBJECTS
      8. ERROR OBJECTS CONTINUED
      9. HOW TO DEAL WITH ERRORS
      10. A DEBUGGING WORKFLOW
      11. BROWSER DEV TOOLS & JAVASCRIPT CONSOLE
      12. HOW TO LOOK AT ERRORS IN CHROME
      13. HOW TO LOOK AT ERRORS IN FIREFOX
      14. TYPING IN THE CONSOLE IN CHROME
      15. TYPING IN THE CONSOLE IN FIREFOX
      16. WRITING FROM THE SCRIPT TO THE CONSOLE
      17. LOGGING DATA TO THE CONSOLE
      18. MORE CONSOLE METHODS
      19. GROUPING MESSAGES
      20. WRITING TABULAR DATA
      21. WRITING ON A CONDITION
      22. BREAKPOINTS
      23. STEPPING THROUGH CODE
      24. CONDITIONAL BREAKPOINTS
      25. DEBUGGER KEYWORD
      26. HANDLING EXCEPTIONS
      27. TRY, CATCH, FINALLY
      28. THROWING ERRORS
      29. THROW ERROR FOR NaN
      30. DEBUGGING TIPS
      31. COMMON ERRORS
    17. Chapter 11: Content Panels
      1. SEPARATION OF CONCERNS
      2. ACCESSIBILITY & NO JAVASCRIPT
      3. ACCORDION
      4. CREATING AN ACCORDION
      5. TABBED PANEL
      6. CREATING TAB PANELS
      7. MODAL WINDOW
      8. CREATING MODALS
      9. USING THE MODAL SCRIPT
      10. MODAL OBJECT
      11. PHOTO VIEWER
      12. USING THE PHOTO VIEWER
      13. ASYNCHRONOUS LOADING & CACHING IMAGES
      14. PHOTO VIEWER SCRIPT (1)
      15. PHOTO VIEWER SCRIPT (2)
      16. RESPONSIVE SLIDER
      17. USING THE SLIDER
      18. SLIDER SCRIPT OVERVIEW
      19. SLIDER SCRIPT
      20. SLIDER MOVE() FUNCTION
      21. CREATING A JQUERY PLUGIN
      22. BASIC PLUGIN STRUCTURE
      23. THE ACCORDION PLUGIN
    18. Chapter 12: Filtering, Searching & Sorting
      1. JAVASCRIPT ARRAY METHODS
      2. JQUERY METHODS FOR FILTERING & SORTING
      3. SUPPORTING OLDER BROWSERS
      4. ARRAYS VS. OBJECTS CHOOSING THE BEST DATA STRUCTURE
      5. FILTERING
      6. DISPLAYING THE ARRAY
      7. USING ARRAY METHODS TO FILTER DATA
      8. STATIC FILTERING OF DATA
      9. DYNAMIC FILTERING
      10. STORING REFERENCES TO OBJECTS & DOM NODES
      11. DYNAMIC FILTERING
      12. FILTERING AN ARRAY
      13. FILTERED IMAGE GALLERY
      14. TAGGED IMAGES
      15. PROCESSING THE TAGS
      16. THE TAGGED OBJECT
      17. FILTERING THE GALLERY
      18. THE FILTER BUTTONS
      19. SEARCH
      20. SEARCHABLE IMAGES
      21. SEARCH TEXT
      22. LIVESEARCH
      23. SORTING
      24. CHANGING ORDER USING COMPARE FUNCTIONS
      25. HOW SORTING WORKS
      26. SORTING NUMBERS
      27. SORTING DATES
      28. SORTING A TABLE
      29. HTML TABLE STRUCTURE
      30. COMPARE FUNCTIONS
      31. THE COMPARE OBJECT
      32. SORTING COLUMNS
      33. SORTABLE TABLE SCRIPT
    19. Chapter 13: Form Enhancement & Validation
      1. HELPER FUNCTIONS
      2. UTILITIES FILE
      3. THE FORM ELEMENT
      4. FORM CONTROLS
      5. SUBMITTING FORMS
      6. THE SUBMIT EVENT & GETTING FORM VALUES
      7. CHANGING TYPE OF INPUT
      8. SHOWING A PASSWORD
      9. SUBMIT BUTTONS
      10. DISABLE SUBMIT BUTTON
      11. CHECKBOXES
      12. SELECT ALL CHECKBOXES
      13. RADIO BUTTONS
      14. SELECT BOXES
      15. TEXTAREA
      16. CHARACTER COUNTER
      17. HTML5 ELEMENTS & ATTRIBUTES
      18. SUPPORT & STYLING
      19. CURRENT APPROACHES
      20. PLACEHOLDER FALLBACK
      21. PLACEHOLDER POLYFILL
      22. POLYFILL USING MODERNIZR & YEPNOPE
      23. CONDITIONAL LOADING OF A POLYFILL
      24. FORM VALIDATION
      25. FORM HTML
      26. VALIDATION OVERVIEW
      27. DEALING WITH ERRORS
      28. SUBMITTING THE FORM
      29. CODE OVERVIEW
      30. REQUIRED FORM ELEMENTS
      31. CREATING ERROR MESSAGES
      32. DISPLAYING ERROR MESSAGES
      33. VALIDATING DIFFERENT TYPES OF INPUT
      34. CREATING AN OBJECT TO VALIDATE DATA TYPES
      35. REGULAR EXPRESSIONS
      36. COMMON REGULAR EXPRESSIONS
      37. CUSTOM VALIDATION
      38. BIO & PASSWORD VALIDATION
      39. CODE DEPENDENCIES & REUSE
      40. VALIDATING PARENTAL CONSENT
      41. HIDE PARENTAL CONSENT
      42. AGE CONFIRMATION
      43. PASSWORD FEEDBACK
      44. PASSWORD SCRIPT
    20. Index

    Product information

    • Title: JavaScript and JQuery: Interactive Front-End Web Development
    • Author(s):
    • Release date: June 2014
    • Publisher(s): Wiley
    • ISBN: 9781118531648