Sue Brandreth's Learning Resources

• Introduction;
• What Is JavaScript?;
• What Is jQuery?;
• HTML: The Barebones Structure;
• CSS: Adding Style to Web Pages;
• Software for JavaScript Programming;
• About This Book;
• The Very Basics;
• About the Online Resources;

Part One: Getting Started with JavaScript;

Chapter 1: Writing Your First JavaScript Program;

• 1.1 Introducing Programming;
• 1.2 How to Add JavaScript to a Page;
• 1.3 Your First JavaScript Program;
• 1.4 Writing Text on a Web Page;
• 1.5 Attaching an External JavaScript File;
• 1.6 Tracking Down Errors;

Chapter 2: The Grammar of JavaScript;

• 2.1 Statements;
• 2.2 Built-In Functions;
• 2.3 Types of Data;
• 2.4 Variables;
• 2.5 Working with Data Types and Variables;
• 2.6 Tutorial: Using Variables to Create Messages;
• 2.7 Tutorial: Asking for Information;
• 2.8 Arrays;
• 2.9 Tutorial: Writing to a Web Page Using Arrays;
• 2.10 A Quick Object Lesson;
• 2.11 Comments;

Chapter 3: Adding Logic and Control to Your Programs;

• 3.1 Making Programs React Intelligently;
• 3.2 Tutorial: Using Conditional Statements;
• 3.3 Handling Repetitive Tasks with Loops;
• 3.4 Functions: Turn Useful Code Into Reusable Commands;
• 3.5 Tutorial: A Simple Quiz;

Part Two: Getting Started with jQuery;

Chapter 4: Introducing jQuery;

• 4.1 About JavaScript Libraries;
• 4.2 Getting jQuery;
• 4.3 Adding jQuery to a Page;
• 4.4 Modifying Web Pages: An Overview;
• 4.5 Understanding the Document Object Model;
• 4.6 Selecting Page Elements: The jQuery Way;
• 4.7 Adding Content to a Page;
• 4.8 Setting and Reading Tag Attributes;
• 4.9 Reading, Setting, and Removing HTML Attributes;
• 4.10 Acting on Each Element in a Selection;
• 4.11 Automatic Pull Quotes;

Chapter 5: Action/Reaction: Making Pages Come Alive with Events;

• 5.1 What Are Events?;
• 5.2 Using Events the jQuery Way;
• 5.3 Tutorial: Introducing Events;
• 5.4 More jQuery Event Concepts;
• 5.5 Advanced Event Management;
• 5.6 Tutorial: A One-Page FAQ;

Chapter 6: Animations and Effects;

• 6.1 jQuery Effects;
• 6.2 Tutorial: Login Slider;
• 6.3 Animations;
• 6.4 Performing an Action After an Effect Is Completed;
• 6.5 Tutorial: Animated Dashboard;

Part Three: Building Web Page Features;

Chapter 7: Improving Your Images;

• 7.1 Swapping Images;
• 7.2 Tutorial: Adding Rollover Images;
• 7.3 Tutorial: Photo Gallery with Effects;
• 7.4 Advanced Gallery with jQuery FancyBox;
• 7.5 Tutorial: FancyBox Photo Gallery;

Chapter 8: Improving Navigation;

• 8.1 Some Link Basics;
• 8.2 Opening External Links in a New Window;
• 8.3 Creating New Windows;
• 8.4 Opening Pages in a Window on the Page;
• 8.5 Basic, Animated Navigation Bar;

Chapter 9: Enhancing Web Forms;

• 9.1 Understanding Forms;
• 9.2 Adding Smarts to Your Forms;
• 9.3 Tutorial: Basic Form Enhancements;
• 9.4 Form Validation;
• 9.5 Validation Tutorial;

Chapter 10: Expanding Your Interface;

• 10.1 Organizing Information in Tabbed Panels;
• 10.2 Adding a Content Slider to Your Site;
• 10.3 Determining the Size and Position of Page Elements;
• 10.4 Adding Tooltips;

Part Four: Ajax: Communication with the Web Server;

Chapter 11: Introducing Ajax;

• 11.1 What Is Ajax?;
• 11.2 Ajax: The Basics;
• 11.3 Ajax the jQuery Way;
• 11.4 JSON;

Chapter 12: Flickr and Google Maps;

• 12.1 Introducing JSONP;
• 12.2 Adding a Flickr Feed to Your Site;
• 12.3 Tutorial: Adding Flickr Images to Your Site;
• 12.4 Adding Google Maps to Your Site; Part Five: Tips, Tricks, and Troubleshooting;

Chapter 13: Getting the Most from jQuery;

• 13.1 Useful jQuery Tips and Information;
• 13.2 Using the jQuery Docs;
• 13.3 Traversing the DOM;
• 13.4 More Functions For Manipulating HTML;
• 13.5 Advanced Event Handling;

Chapter 14: Going Further with JavaScript;

• 14.1 Working with Strings;
• 14.2 Finding Patterns in Strings;
• 14.3 Working with Numbers;
• 14.4 Dates and Times;
• 14.5 Putting It All Together;
• 14.6 Writing More Efficient JavaScript;
• 14.7 Creating Fast-Loading JavaScript;

Chapter 15: Troubleshooting and Debugging;

• 15.1 Top JavaScript Programming Mistakes;
• 15.2 Debugging with Firebug;
• 15.3 Debugging Tutorial;

JavaScript Resources;

• References;
• Basic JavaScript;
• jQuery;
• Ajax;
• Advanced JavaScript;
• CSS;

• The Missing Credits
• Introduction
• Part One: Getting Started with JavaScript
  • Chapter 1: Writing Your First JavaScript Program
  • Chapter 2: The Grammar of JavaScript
  • Chapter 3: Adding Logic and Control to Your Programs
• Part Two: Getting Started with jQuery
  • Chapter 4: Introducing jQuery
  • Chapter 5: Action/Reaction: Making Pages Come Alive with Events
  • Chapter 6: Animations and Effects
• Part Three: Building Web Page Features
  • Chapter 7: Improving Your Images
  • Chapter 8: Improving Navigation
  • Chapter 9: Enhancing Web Forms
  • Chapter 10: Expanding Your Interface
• Part Four: Ajax: Communication with the Web Server
  • Chapter 11: Introducing Ajax
  • Chapter 12: Flickr and Google Maps
• Part Five: Tips, Tricks, and Troubleshooting
  • Chapter 13: Getting the Most from jQuery
  • Chapter 14: Going Further with JavaScript
  • Chapter 15: Troubleshooting and Debugging
  • JavaScript Resources

Introduction 1
Key Features of This Book     1
How to Use This Book     2
How This Book Is Organized     2
Conventions Used in This Book.     3
Sample Code for This Book     3

Part I: Beginning jQuery Mobile

Hour 1: Getting to Know jQuery Mobile     7
Why You Should Use jQuery Mobile     7
Supported Devices     9
The Developer’s Arsenal     12
Summary     18
Q&A     18
Workshop     19

Hour 2: Working with HTML, CSS, and JavaScript     21
Building Content with HTML     21
Presenting CSS     27
Functioning with JavaScript     32
Summary     37
Q&A     38
Workshop     38

Hour 3: Using the jQuery Framework     41
Including jQuery in Your Site     42
Summary     58
Q&A     58
Workshop     59

Hour 4: Introduction to the jQuery Mobile Framework     61
Adding jQuery Mobile to Your Site.     61
Using Data Roles     63
Creating a Simple Page     65
Understanding the Mobile Initialization Event     69
Using the pageinit Event Instead of $(document).ready()     70
Summary     75
Q&A     76
Workshop     76

Hour 5: Building Your First Mobile Site     79
Structuring the Page     79
Adding a Header and Footer     82
Formatting Text Content.     84
Attaching an Image     86
Linking to a Second Page     89
Summary     91
Q&A     92
Workshop     92

Part II: Creating the User Interface

Hour 6: Knowing the Capabilities of Mobile Devices     97
Understanding Screen Resolutions and PPI     97
Additional Mobile Features    101
Looking at Mobile Operating Systems     105
Learning About Mobile Graded Browser Support     108
Summary     108
Q&A     109
Workshop     110

Hour 7: Learning About Page Layout     113
Using a Single Page Layout     113
Using a Multiple Page Layout     115
Aligning Content with a Grid     122
Conquering Collapsible Content     127
Summary     130
Q&A     130
Workshop     131

Hour 8: Tuning the Toolbars     133
Adding a Header Toolbar     133
Attaching a Navigation Toolbar     137
Adding a Footer Toolbar     139
Positioning the Toolbars     144
Adding Persistent Navigation     148
Summary     150
Q&A     150
Workshop     150

Hour 9: Designing Buttons     153
Beginning with Buttons     153
Overriding Button Defaults     156
Changing the Button Size     158
Adding Icons to Buttons     162
Summary     167
Q&A     167
Workshop     168

Hour 10: Formulating Your Forms     171
Getting Started with Forms     171
Enhancing Forms with jQuery Mobile     173
Extended Input Elements     181
Submitting Forms     186
Summary     188
Q&A     188
Workshop     188

Hour 11: Learning About Lists     191
Creating Standard and Inset Lists     191
Adding Extras to Lists     194
Using Icons and Thumbnails     196
Searching List Content     202
Using a List Within a Form     204
Summary     206
Q&A     206
Workshop     206

Hour 12: Handling Events     209
Events for Page Initialization     209
Brushing Up on Touch Events     215
Looking at Virtual Mouse Events     221
Adapting to the Orientation Event     223
Summary     225
Q&A     225
Workshop     226

Hour 13: Changing the Default Theme     229
Learning About the Theme Framework     229
Theming Site Components     236
Switching the Swatches     239
Summary     247
Q&A     248
Workshop     248

Part III: Customizing Your Content

Hour 14: Sprucing Up Your Design     253
Understanding Copyrights and Licensing     253
Finding Images     257
Functionality Enhancement with Plug-ins     261
Adding Custom Fonts     265
Summary     271
Q&A     271
Workshop     272

Hour 15: Responsive Site Layout     275
Appreciating Media Queries     275
Adjusting Layouts Based on Screen Size     276
Rotating Site Layout     286
Summary     289
Q&A     289
Workshop     290

Hour 16: Rolling Your Own Theme with ThemeRoller     293
Introduction to ThemeRoller     293
Creating a Theme with ThemeRoller     294
Working with a Custom Theme     302
Summary     305
Q&A     305
Workshop     306

Hour 17: Detecting Mobile Devices     309
Learning the Importance of Mobile Detection     309
Using the .htaccess File     310
Playing Device Detective with PHP     313
Using JavaScript as a Detection Method     316
Non-Detection Solutions     320
Summary     323
Q&A     323
Workshop     324

Part IV: Extending the Mobile Experience

Hour 18: Embedding Video Playback for Mobile     327
Understanding Video Playback     327
Embedding a Video with YouTube     328
Embedding a Video with Vimeo     334
Embedding Your Own Video     336
Exploring Other Video Embedding Services     340
Summary     341
Q&A     341
Workshop     341

Hour 19: Encoding Your Own Video for Mobile     343
Learning the Basics of Video Encoding     343
Comparing Video Codecs and Mobile Devices     349
Encoding Video for Mobile Playback     351
Delivering Video Content     357
Summary      359
Q&A     360
Workshop    360

Hour 20: Creating QR and Tag Codes     363
Delving into QR and Tag Codes     363
Scanning QR Codes     364
Rendering Quick Response Codes     365
Generating Microsoft Tag Codes     375
Summary     379
Q&A     379
Workshop     380

Hour 21: Learning to Minify Everything     381
Compressing Code     381
Using Gzip and Deflate     387
Compressing Images     389
Using mod_pagespeed on Your Apache Server     394
Summary     395
Q&A     395
Workshop     396

Hour 22: Using Mobile Device Emulators     397
Turning to Mobile Device Emulators     397
Finding Emulators for Testing     399
Using Emulators for Testing     411
Summary     415
Q&A     415
Workshop     416

Hour 23: Building an App with PhoneGap and jQuery Mobile     419
Getting Started with PhoneGap     419
Including jQuery Mobile in Your Project     430
Compiling the Application     . 437
Summary     440
Q&A     440
Workshop     440

Hour 24: Including jQuery Mobile with WordPress     443
Introducing the WordPress CMS     443
Installing WordPress     444
Creating a Custom Theme for WordPress     445
Adding jQuery Mobile to Your Theme     447
Summary     461
Q&A     462
Workshop     462

PART I: Introduction to jQuery and JavaScript Development

HOUR 1: Intro to Dynamic Web Programming

• Understanding the Web Server/Browser Paradigm

• Preparing to Write jQuery and JavaScript

HOUR 2: Debugging jQuery and JavaScript Web Pages• Viewing the JavaScript Console

• Debugging HTML Elements

• Debugging CSS

• Debugging jQuery and JavaScript

• Analyzing the Network Traffic

HOUR 3: Understanding Dynamic Web Page Anatomy• Using HTML/HTML5 Elements to Build a Dynamic Web Page

• Understanding HTML Structure

• Implementing HTML Head Elements

• Adding HTML Body Elements

• Adding Some Advanced HTML5 Elements

HOUR 4: Adding CSS/CSS3 Styles to Allow Dynamic Design and Layout

• Adding CSS Styles to the Web Page

• Adding CSS Styles to HTML Elements

• Preparing CSS Styles for Dynamic Design

HOUR 5: Jumping into jQuery and JavaScript Syntax• Adding jQuery and JavaScript to a Web Page

• Accessing the DOM

• Understanding JavaScript Syntax

HOUR 6: Understanding and Using JavaScript Objects• Using Object Syntax

• Understanding Built-In Objects

• Creating Custom-Defined Objects

PART II: Implementing jQuery and JavaScript in Web PagesHOUR 7: Accessing DOM Elements Using JavaScript and jQuery Objects

• Understanding DOM Objects Versus jQuery Objects

• Accessing DOM Objects from JavaScript

• Using jQuery Selectors

HOUR 8: Navigating and Manipulating jQuery Objects and DOM Elements with jQuery• Chaining jQuery Object Operations

• Filtering the jQuery Object Results

• Traversing the DOM Using jQuery Objects

• Looking at Some Additional jQuery Object Methods

HOUR 9: Applying Events for Richly Interactive Web Pages• Understanding Events

• Using the Page Load Events for Initialization

• Adding and Removing Event Handlers to DOM Elements

• Triggering Events Manually

• Creating Custom Events

• Implementing Callbacks

HOUR 10: Dynamically Accessing and Manipulating Web Pages• Accessing Browser and Page Element Values

• Dynamically Manipulating Page Elements

• Dynamically Rearranging Elements on the Web Page

HOUR 11: Accessing Data Outside the Web Page• Understanding the Screen Object

• Using the Window Object

• Using the Browser Location Object

• Using the Browser History Object

• Controlling External Links

• Adding Pop-up Boxes

• Setting Timers

PART III: Building Richly Interactive Web Pages

HOUR 12: Enhancing User Interaction Through Animation and Other Special Effects

• Understanding jQuery Animation

• Animating Show and Hide

• Animating Visibility

• Sliding Elements

• Creating Resize Animations

• Implementing Moving Elements

HOUR 13: Interacting with Web Forms

• Accessing Form Elements

• Intelligent Form Flow Control

• Dynamically Controlling Form Element Appearance and Behavior

• Validating a Form

HOUR 14: Creating Advanced Web Page Elements

• Adding an Image Gallery

• Implementing Tables with Sorting and Filters

• Creating a Tree View

• Using Overlay Dialogs

• Implementing a Graphical Equalizer Display

• Adding Sparkline Graphics

PART IV: Advanced Concepts

HOUR 15: Accessing Server-Side Data via AJAX

• Making AJAX Easy

• Implementing AJAX

• Using Advanced jQuery AJAX

HOUR 16: Interacting with External Services, Facebook, Google, Twitter, and Flickr

• Using jQuery and JavaScript to Add Facebook Social Elements to Your Web Pages

• Adding Google Maps to Your Web Pages

• Adding a Custom Google Search

• Adding Twitter Elements to Your Web Pages

• Adding Flickr Images to Your Website

PART V: jQuery UI

HOUR 17: Introducing jQuery UI

• Getting Started with jQuery UI

• Applying jQuery UI in Your Scripts

HOUR 18: Using jQuery UI Effects• Applying jQuery UI Effects

• Adding Effects to Class Transitions

• Adding Effects to Element Visibility Transitions

HOUR 19: Advanced Interactions Using jQuery UI Interaction Widgets• Introducing jQuery UI Interactions

• Using the Drag-and-Drop Widgets

• Resizing Elements Using the Resizable Widget

• Applying the Selectable Widget

• Sorting Elements with the Sortable Widget

HOUR 20: Using jQuery UI Widgets to Add Rich Interactions to Web Pages

• Reviewing Widgets

• Adding an Expandable Accordion Element

• Implementing Autocomplete in Form Elements

• Applying jQuery UI Buttons to Form Controls

• Creating a Calendar Input

• Generating Stylized Dialogs with jQuery UI

• Implementing Stylized Menus

• Creating Progress Bars

• Implementing Slider Bars

• Adding a Value Spinner Element

• Creating Tabbed Panels

• Adding Tooltips to Page Elements

• Creating Custom Widgets

PART VI: jQuery MobileHOUR 21: Introducing Mobile Website Development

• Jumping into the Mobile World

• Getting Started with jQuery Mobile

• Understanding jQuery Mobile

HOUR 22: Implementing Mobile Web Pages• Building Mobile Pages

• Implementing Mobile Sites with Multiple Pages

• Creating a Navbar

• Implementing Dialogs

HOUR 23: Formatting Content in Mobile Pages

• Adding Basic HTML

• Creating a Grid Layout

• Implementing Listviews

• Using Collapsible Blocks and Sets

• Adding Auxiliary Content to Panels

• Working with Pop-ups

• Building Mobile-Friendly Tables

HOUR 24: Implementing Mobile Form Elements and Controls

• Understanding Mobile Forms

• Using Text Elements

• Defining Buttons

• Adding Sliders and Toggle Switches

• Defining Radios and Check Boxes

• Implementing Select Menus