Head First JavaScript

What will you learn from this book?

So you're ready to make the leap from writing HTML and CSS web pages to creating dynamic web applications? Start here. Head First JavaScript is your guided tour to exciting and interactive web page creation. Built for your brain, this book covers all the JavaScript essentials, from basic web programming techniques including variables, functions, and looping to more advanced topics like form validation, DOM manipulation, custom objects, debugging — and even Ajax! So get ready… responsive web sites are just pages away.

• Intro
  Your brain on JavaScript
  • Who is this book for?
  • We know what you're thinking
  • Metacognition
  • Bend your brain into submission
  • Read me
  • The technical review team
  • Acknowledgments

1. The interactive web:
   Reacting to the Virtual World
   • (Online) people have needs
   • Like talking to a brick wall… nothing happens
   • But JavaScript talks back
   • Lights, camera, interaction!
   • Use the <script> tag to tell the browser you're writing JavaScript
   • Your web browser can handle HTML, CSS, and JavaScript
   • Man's virtual best friend… needs YOUR help
   • Making iRock interactive
   • Create the iRock web page
   • Test drive
   • JavaScript events: giving the iRock a voice
   • Alerting the user with a function
   • Add the iRock greeting
   • Now let's make the iRock really interactive
   • Interaction is TWO-way communication
   • Add a function to get the user's name
   • Instant replay: what just happened?
   • Test drive iRock 1.0
2. Storing data:
   Everything Has Its Place
   • Your scripts can store data
   • Scripts think in data types
   • Constants stay the SAME, variables can CHANGE
   • Variables start out without a value
   • Initialize a variable with =''
   • Constants are resistant to change
   • What's in a name?
   • Legal and illegal variable and constant names
   • Variable names often use CamelCase
   • Plan the Duncan's Donuts web page
   • A first take at the donut calculations
   • Initialize your data…or else
   • NaN is NOT a number
   • You can add more than numbers
   • parseInt() and parseFloat() convert text to a number
   • Why are extra donuts being ordered?
   • Duncan discovers donut espionage
   • Use getElementById() to grab form data
   • Validate the web form's data
   • Strive for intuitive user input
3. Exploring the client:
   Browser Spelunking
   • Clients, servers, and JavaScript
   • What can a browser do for you?
   • The iRock needs to be more responsive
   • Timers connect action to elapsed time
   • Breaking down a timer
   • Set a timer with setTimeout()
   • A closer look: the setTimeout() function
   • Multiple size screens, multiple complaints
   • Use the document object to get the client window's width
   • Use document object properties to set the client window width
   • Set the height and width of the iRock image
   • The iRock should be sized to the page
   • onresize is triggered when the browser's resized
   • The onresize event resizes the rock
   • Have we met? Recognizing the user
   • Every script has a life cycle
   • Cookies outlive your script's life cycle
   • Cookies have a name and store a value… and can expire
   • Your JavaScript can live OUTSIDE your web page
   • Greet the user with a cookie
   • greetUser() is cookie-powered now
   • Don't forget to set the cookie, too
   • Cookies affect browser security
   • A world without cookies
   • Talk to the users… it's better than nothing
4. Decision making:
   If There's a Fork in the Road, Take It
   • Lucky contestant, come on down!
   • "if" this is true… then do something
   • An if statement evaluates a condition… and then takes action
   • Use if to choose between two things
   • You can make multiple decisions with if
   • Adding an else to your if statement
   • Variables drive the story
   • But part of the story is missing
   • Compounding your JavaScript efforts
   • Tiered decision making with if/else
   • An if can go inside another if
   • Your functions control your pages
   • Pseudocode lets you map out your adventure
   • Stick figure inequality
   • != Psst, I've got nothing to tell you…
   • Crafting decisions with comparison operators
   • Comments, placeholders, and documentation
   • Comments in JavaScript start with //
   • Scope and context: Where data lives
   • Check your adventure variable score
   • Where does my data live?
   • Choice of five
   • Nesting if/else can get complicated
   • Switch statements have multiple cases
   • Inside the switch statement
   • A switchy stick figure adventure: test drive
5. Looping:
   At the Risk of Repeating Myself
   • X marks the spot
   • Deja vu all over again…for loops
   • Treasure hunting with a for loop
   • Dissect the for loop
   • Mandango: a macho movie seat finder
   • First check seat availability
   • Looping, HTML, and seat availability
   • Movie seats as variables
   • Arrays collect multiple pieces of data
   • Array values are stored with keys
   • From JavaScript to HTML
   • Visualizing Mandango seats
   • Test drive: the solo seat finder
   • Too much of a good thing: endless loops
   • Loops always need an exit condition (or two!)
   • A "break" in the action
   • Boolean operator logic uncovered
   • Looping for just a "while" …until a condition is met
   • Breaking down the while loop
   • Use the right loop for the job
   • Movie seat data modeling
   • An array of an array: two-dimensional arrays
   • Two keys to access 2-D array data
   • Mandango in 2-D
   • An entire theater of manly seats
6. Functions:
   Reduce, Reuse, Recycle
   • The mother of all problems
   • Functions as problem solvers
   • The nuts and bolts of a function
   • A function you've already met
   • Building a better thermostat
   • Passing information to functions
   • Function arguments as data
   • Functions eliminate duplicate code
   • Creating a seat setter function
   • The setSeat() function
   • The significance of feedback
   • Returning data from functions
   • Many happy return values
   • Getting the status of a seat
   • Showing the seat status
   • You can link the function to an image
   • Repetitive code is never a good thing
   • Separating functionality from content
   • Functions are just data
   • Calling or referencing your functions
   • Events, callbacks, and HTML attributes
   • Wiring events using function references
   • Function literals to the rescue
   • Where's the wiring?
   • A shell of an HTML page
7. Forms and validation:
   Getting the User to Tell All
   • The Bannerocity HTML form
   • When HTML is not enough
   • Accessing form data
   • Form fields follow a chain of events
   • Losing focus with onblur
   • Alert box validation
   • Validate fields to make sure you have "not nothing"
   • Validation without aggravating alert boxes
   • A more subtle non-empty validator
   • Size matters…
   • Validating the length of data
   • Validating a ZIP code
   • Validating a date
   • Regular expressions aren't "regular"
   • Regular expressions define patterns to match
   • Metacharacters represent more than one literal character
   • Drilling into regular expressions: quantifiers
   • Validating data with regular expressions
   • Matching mins and maxes
   • Eliminating three-digit years with this…or that
   • Leave nothing to chance
   • Can you hear me now? Phone number validation
   • You've got mail: validating email
   • The exception is the rule
   • Matching optional characters from a set
   • Constructing an email validator
8. Wrangling the page:
   Slicing and Dicing HTML with the DOM
   • Functional but clumsy…interface matters
   • Describing scenes without alert boxes
   • Accessing HTML elements
   • Getting in touch with your inner HTML
   • Seeing the forest and the trees: the Document Object Model (DOM)
   • Your page is a collection of DOM nodes
   • Climbing the DOM tree with properties
   • Changing node text with the DOM
   • Standards compliant adventuring
   • Designing better options
   • Rethinking node text replacement
   • Replacing node text with a function
   • Dynamic options are a good thing
   • Interactive options are even better
   • A matter of style: CSS and DOM
   • Swapping style classes
   • Classy options
   • Test drive the stylized adventure options
   • Options gone wrong: the empty button
   • A la carte style tweaking
   • No more bogus options
   • More options, more complexity
   • Tracking the decision tree
   • Building the decision history in HTML
   • Manufacturing HTML code
   • Tracing the adventure story
9. Bringing data to life:
   Objects as Frankendata
   • A JavaScript-powered party
   • Data + actions = object
   • An object owns its data
   • Object member references with a dot
   • Custom objects extend JavaScript
   • Construct your custom objects
   • What's in a constructor?
   • Bringing blog objects to life
   • The need for sorting
   • A JavaScript object for dating
   • Calculating time
   • Rethinking blog dates
   • An object within an object
   • Converting objects to text
   • Accessing pieces and parts of a date
   • Arrays as objects
   • Custom sorting an array
   • Sorting made simple with function literals
   • Searching the blog array
   • Searching within strings: indexOf()
   • Searching the blog array
   • Searching works now, too!
   • The Math object is an organizational object
   • Generate random numbers with Math.random
   • Turn a function into a method
   • Unveiling the shiny new blog object
   • What do objects really offer YouCube?
10. Creating custom objects:
    Having It Your Way with Custom Objects
    • Revisiting the YouCube Blog methods
    • Method overload
    • Classes vs. instances
    • Instances are created from classes
    • Access an instance's properties with "this"
    • Own once, run many: class-owned methods
    • Use prototype to work at a class-level
    • Classes, prototypes, and YouCube
    • Class properties are shared, too
    • Creating class properties
    • Signed and delivered
    • A date formatting method
    • Extending standard objects
    • Custom date object = better YouCube
    • A class can have its own method
    • Examine the sort comparison function
    • Calling a class method
    • A picture is worth a thousand words
    • Incorporating images into YouCube
    • Adding imagery to YouCube
    • An object-powered YouCube
11. Kill bugs dead:
    Good Scripts Gone Wrong
    • Real-world debugging
    • The case of the buggy IQ calculator
    • Try different browsers
    • Debugging on easy street
    • Variables gone wild undefined
    • Crunching the intelligence numbers
    • The case of the radio call-in bugs
    • Opening up the investigation
    • A question of syntax validation (Bug #1)
    • Careful with those strings
    • Quotes, apostrophes, and consistency
    • When a quote isn't a quote, use escape characters
    • Undefined isn't just for variables (Bug #2)
    • Everyone's a winner (Bug #3)
    • Alert box debugging
    • Watching variables with alert
    • Bad logic is legal but buggy
    • Everyone's a loser! (Bug #4)
    • Overwhelmed by annoying alerts
    • Build a custom console for debugging
    • The peskiest errors of all: runtime
    • The JavaScript bug trifecta
    • Comments as temporary code disablers
    • The dangers of shadowy variables
12. Dynamic data:
    Touchy-Feely Web Applications
    • Yearning for dynamic data
    • A data-driven YouCube
    • Ajax is all about communication
    • XML lets you tag Your data Your way
    • XML + HTML = XHTML
    • XML and the YouCube blog data
    • Injecting YouCube with Ajax
    • JavaScript to the Ajax rescue: XMLHttpRequest
    • Get or Post? A request with XMLHttpRequest
    • Making sense of an Ajax request
    • Interactive pages start with a request object
    • Call me when you're done
    • Handling a response…seamlessly
    • The DOM to the rescue
    • YouCube is driven by its data
    • Dysfunctional buttons
    • The buttons need data
    • Time-saving web-based blog additions
    • Writing blog data
    • PHP has needs, too
    • Feeding data to the PHP script
    • Getting it up: Posting blog data to the server
    • Making YouCube more, uh, usable
    • Auto-fill fields for your users
    • Repetitive task? How about a function?

Phew, 600+ pages to describe a language closely related to C… It is 550 pages to many! I never read a more verbose book in my life, and they manages to miss out on JS Frameworks (barely mention that they exist) and starts to talk about PHP when it comes to explaining AJAX…

Come on, buy something else if you really want to learn JavaScript!