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