[Head First Series 01] • Head First JavaScript Programming by Freeman, Eric T. -- Read -- Imperial Library of Trantor

Index

Head First JavaScript Programming Dedication Praise for Head First JavaScript Programming Praise for other books by Eric T. Freeman and Elisabeth Robson Authors of Head First JavaScript Programming How to Use This Book: Intro

Who is this book for?

Who should probably back away from this book?

We know what you’re thinking.

And we know what your brain is thinking.

Metacognition: thinking about thinking Here’s what WE did: Here’s what YOU can do to bend your brain into submission Read Me Tech Reviewers Acknowledgments

1. A Quick Dip into Javascript: Getting your feet wet

The way JavaScript works How you’re going to write JavaScript How to get JavaScript into your page

A little test drive

JavaScript, you’ve come a long way baby...

It’s True.

How to make a statement Variables and values Back away from that keyboard! Express yourself Doing things more than once How the while loop works Making decisions with JavaScript And, when you need to make LOTS of decisions Reach out and communicate with your user

Create an alert. Write directly into your document. Use the console. Directly manipulate your document.

A closer look at console.log Opening the console Coding a Serious JavaScript Application How do I add code to my page? (let me count the ways) We’re going to have to separate you two

2. Writing Real Code: Going further

Let’s build a Battleship game Our first attempt... First, a high-level design A few more details...

Representing the ships Getting user input Displaying the results

Working through the Pseudocode Oh, before we go any further, don’t forget the HTML! Writing the Simple Battleship code Now let’s write the game logic Step One: setting up the loop, getting some input How prompt works Checking the user’s guess So, do we have a hit? Adding the hit detection code Hey, you sank my battleship! Provide some post-game analysis And that completes the logic! Doing a little Quality Assurance Can we talk about your verbosity... Finishing the Simple Battleship game How to assign random locations The world-famous recipe for generating a random number Back to do a little more QA Congrats on your first true JavaScript program, and a short word about reusing code

3. Introducing Functions: Getting functional

What’s wrong with the code anyway? By the way, did we happen to mention FUNCTIONS? Okay, but how does it actually work? What can you pass to a function? JavaScript is pass-by-value.

That means pass-by-copy.

Weird Functions

EXPERIMENT #1: what happens when we don’t pass enough arguments? EXPERIMENT #2: what happens when we pass too many argments? EXPERIMENT #3: what happens when we have NO parameters?

Functions can return things too Tracing through a function with a return statement Global and local variables

Know the difference or risk humiliation

Knowing the scope of your local and global variables The short lives of variables Don’t forget to declare your locals!

4. Putting Some Order in Your Data: Arrays

Can you help Bubbles-R-Us? How to represent multiple values in JavaScript How arrays work

How to create an array

How to access an array item Updating a value in the array How big is that array anyway? The Phrase-O-Matic Meanwhile, back at Bubbles-R-Us...

Cubicle Conversation

How to iterate over an array But wait, there’s a better way to iterate over an array

Test drive the bubble report

It’s that time again.... Can we talk about your verbosity? Redoing the for loop with the post-increment operator Quick test drive

Cubicle Conversation Continued...

Creating an array from scratch (and adding to it)

Test drive the final report

And the winners are... A quick survey of the code... Writing the printAndGetHighScore function Refactoring the code using printAndGetHighScore Putting it all together...

5. Understanding Objects: A trip to Objectville

Did someone say “Objects”?! Thinking about properties... How to create an object What is Object-Oriented Anyway? How properties work How does a variable hold an object? Inquiring minds want to know... Comparing primitives and objects

Initializing a primitive variable Initializing an object (a reference) variable

Doing even more with objects...

Doing some pre-qualification Does the taxi cut it?

Stepping through pre-qualification Let’s talk a little more about passing objects to functions

Putting Fido on a diet.... The Auto-O-Matic

Oh Behave! Or, how to add behavior to your objects Improving the drive method

Take the fiat for a test drive Uh oh, not so fast...

Why doesn’t the drive method know about the started property?

A test drive with “this”

How this works How behavior affects state... Adding some Gas-o-line Now let’s affect the behavior with the state

Gas up for a test drive

Congrats on your first objects! Guess what? There are objects all around you! (and they’ll make your life easier)

6. Interacting with Your Web Page: Getting to know the DOM

In our last chapter, we left you with a little challenge. The “crack the code challenge.” So what does the code do?

A quick recap

How JavaScript really interacts with your page How to bake your very own DOM A first taste of the DOM Getting an element with getElementById What, exactly, am I getting from the DOM? Finding your inner HTML What happens when you change the DOM A test drive around the planets Don’t even think about running my code until the page is fully loaded!

Let’s try that again...

You say “event hander,” I say “callback”

Why stop now? Let’s take it further

How to set an attribute with setAttribute More fun with attributes! (you can GET attributes too)

What happens if my attribute doesn’t exist in the element? Meanwhile, back at the solar system... Test driving the planets one last time...

So what else is a DOM good for anyway?

7. Types, Equality, Conversion and All That Jazz: Serious types

The truth is out there... Watch out, you might bump into undefined when you aren’t expecting it... How to use null Dealing with NaN It gets even weirder We have a confession to make Understanding the equality operator (otherwise known as ==)

If the two values have the same type, just compare them If the two values have different types, try to convert them into the same type and then compare them

How equality converts its operands (sounds more dangerous than it actually is)

CASE#1: Comparing a number and a string. CASE#2: Comparing a boolean with any other type. CASE#3: Comparing null and undefined. CASE#4: Oh, actually there is no case #4.

How to get strict with equality

Two values are strictly equal only if they have the same type and the same value.

Even more type conversions...

Another look at concatenation, and addition What about the other arithmetic operators?

How to determine if two objects are equal

When we test equality of two object variables, we compare the references to those objects Two references are equal only if they reference the same object

The truthy is out there... What JavaScript considers falsey The Secret Life of Strings How a string can look like a primitive and an object A five-minute tour of string methods (and properties) Chair Wars (or How Really Knowing Types Can Change Your Life)

In Larry’s cube In Brad’s cube But wait! There’s been a spec change Back in Larry’s cube At Brad’s laptop at the beach Larry snuck in just ahead of Brad. The suspense is killing me. Who got the chair?

8. Bringing it All Together: Building an app

This time, let’s build a REAL Battleship game Stepping back... to HTML and CSS Creating the HTML page: the Big Picture

Step 1: The Basic HTML Step 2: Creating the table Step 3: Player interaction

Adding some more style

Step 4: Placing the hits and misses

Using the hit and miss classes How to design the game Implementing the View How displayMessage works

Implementing displayMessage

How displayHit and displayMiss work

Implementing displayHit and displayMiss Another Test Drive...

The Model

How the model interacts with the view You’re gonna need a bigger boat... and game board

How we’re going to represent the ships Implementing the model object

Thinking about the fire method

Setting up the fire method

Looking for hits Putting that all together... Wait, can we talk about your verbosity again? Meanwhile back at the battleship... A view to a kill...

Implementing the Controller Processing the player’s guess Planning the code... Implementing parseGuess

Meanwhile back at the controller...

Counting guesses and firing the shot

Game over? Getting a player’s guess

How to add an event handler to the Fire! button

Getting the player’s guess from the form

Passing the input to the controller

What’s left? Oh yeah, darn it, those hardcoded ships!

How to place ships

The generateShipLocations function

Writing the generateShip method Generate the starting location for the new ship Completing the generateShip method

Avoiding a collision! Two final changes Congrats, It’s Startup Time!

9. Asynchronous Coding: Handling events

What are events? What’s an event handler? How to create your first event handler Test drive your event Getting your head around events... by creating a game Implementing the game

Step 1: access the image in the DOM Step 2: add the handler, and update the image

Test drive Let’s add some more images Now we need to assign the same event handler to each image’s onclick property How to reuse the same handler for all the images

Assigning the click handler to all images on the page

How the event object works Putting the event object to work Test drive the event object and target Events and queues Even more events

Test drive your timer

How setTimeout works Finishing the image game Test driving the timer

10. First Class Functions: Liberated functions

The mysterious double life of the function keyword Function declarations versus function expressions Parsing the function declaration What’s next? The browser executes the code Moving on... The conditional

And finishing up...

How functions are values too Did we mention functions have First Class status in JavaScript? Flying First Class Writing code to process and check passengers Iterating through the passengers Passing a function to a function

Test drive flight

Returning functions from functions Writing the flight attendant drink order code The flight attendant drink order code: a different approach

Wait, we need more drinks!

Taking orders with first class functions

Test drive flight

Webville Cola How the array sort method works Putting it all together

Meanwhile back at Webville Cola

Take sorting for a test drive

11. Anonymous Functions, Scope and Closures: Serious functions

Taking a look at the other side of functions... How to use an anonymous function We need to talk about your verbosity, again When is a function defined? It depends... What just happened? Why wasn’t fly defined? How to nest functions How nesting affects scope A little review of lexical scope Where things get interesting with lexical scope Functions Revisited Calling a function (revisited) What the heck is a closure? Closing a function Using closures to implement a magic counter

Test drive your magic counter

Looking behind the curtain... Creating a closure by passing a function expression as an argument The closure contains the actual environment, not a copy Creating a closure with an event handler

Click me! without a closure Click me! with a closure Test drive your button counter

How the Click me! closure works

12. Advanced Object Construction: Creating objects

Creating objects with object literals Using conventions for objects Introducing Object Constructors How to create a Constructor How to use a Constructor How constructors work You can put methods into constructors as well

Take the bark method for a quick test drive

It’s Production Time! Let’s test drive some new cars Don’t count out object literals just yet Rewiring the arguments as an object literal Reworking the Car constructor Understanding Object Instances Even constructed objects can have their own independent properties Real World Constructors The Array object Even more fun with built-in objects

13. Using Prototypes: Extra strength objects

Hey, before we get started, we’ve got a better way to diagram our objects Revisiting object constructors: we’re reusing code, but are we being efficient? Is duplicating methods really a problem? What are prototypes? Inheriting from a prototype How inheritance works Overriding the prototype

So where do you get a prototype?

How to set up the prototype

Test drive the prototype with some dogs Give Spot his WOOF! in code Test drive the custom bark method Teaching a new trick

Prototypes are dynamic A more interesting implementation of the sit method

Test drive the new sit method

One more time: how the sitting property works How to approach the design of the show dogs Setting up a chain of prototypes How inheritance works in a prototype chain Creating the show dog prototype

First, we need an object that inherits from the dog prototype Next, turning our dog instance into a show dog prototype Now it’s time to fill in the prototype

Creating a show dog instance

Test drive the show dog Examining the exercise results

A final cleanup of show dogs

A little more cleanup

Stepping through Dog.call

The final test drive

The chain doesn’t end at dog

What is Object? Object as a prototype

Using inheritance to your advantage... by overriding built-in behavior Using inheritance to your advantage... by extending a built-in object

Test driving the cliché machine

Grand Unified Theory of Better living through objects Putting it all together What’s next?

A. Leftovers: The top ten topics (we didn’t cover)

#1 jQuery #2 Doing more with the DOM #3 The Window Object #4 Arguments #5 Handling exceptions

Try/catch

#6 Adding event handlers with addEventListener

Event handling in IE8 and older

#7 Regular Expressions

The RegExp constructor Using a RegExp object

#8 Recursion #9 JSON #10 Server-side JavaScript

Index About the Authors Colophon Copyright

← Prev
Back
Next →

← Prev
Back
Next →