This brain friendly guide teaches you everything from JavaScript language fundamentals to advanced topics, including objects, functions, and the browser’s document object model. You won’t just be reading—you’ll be playing games, solving puzzles, pondering mysteries, and interacting with JavaScript in ways you never imagined. And you’ll write real code, lots of it, so you can start building your own web applications. We think your time is too valuable to waste struggling with new concepts. Using the latest research in cognitive science and learning theory to craft a multi sensory learning experience, Head First JavaScript Programming uses a visually rich format designed for the way your brain works, not a text heavy approach that puts you to sleep.

Machine generated contents note: 1.A quick dip into JavaScript: Getting your feet wet -- JavaScript gives you Superpowers. The true programming language of the web, JavaScript lets you add behavior to your web pages. No more dry, boring, static pages that just sit there looking at you---with JavaScript you're going to be able to reach out and touch your users, react to interesting events, grab data from the web to use in your pages, draw graphics right in your web pages and a lot more. And once you know JavaScript you'll also be in a position to create totally new behaviors for your [ect.] -- The way JavaScript works -- How you're going to write JavaScript -- How to get JavaScript into your page -- JavaScript, you've come a long way baby ... -- 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. Contents note continued: And, when you need to make LOTS of decisions -- Reach out and communicate with your user -- 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. Contents note continued: You already know about variables, types, expressions ... we could go on. The point is, you already know a few things about JavaScript. In fact, you know enough to write some real code. Some code that does something interesting, some code that someone would want to use. What you're lacking is the real experience of writing code, and we're going to remedy that right here and now. How? By jumping in head first and coding up a casual game, all written in JavaScript. Our goal is ambitious but we're going to take it one step at a time. Come on, let's get this started, and if you want to launch the next casual startup, we won't stand in your way; the code is [ect.] -- Let's build a Battleship game -- Our first attempt ... -- First, a high-level design -- 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. Contents note continued: 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 -- 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. Contents note continued: Get ready for your first Superpower. You've got some programming under your belt; now it's time to really move things along with functions. Functions give you the power to write code that can be applied to all sorts of different circumstances, code that can be reused over and over, code that is much more manageable, code that can be abstracted away and given a simple name so you can forget all the complexity and get on with the important stuff. You're going to find not only that functions are your gateway from scripter to programmer, they're the key to the JavaScript programming style. In this chapter we're going to start with the basics: the mechanics, the ins and outs of how functions really work, and then you'll keep honing your function skills throughout the rest of the book. So, let's get a good foundation started, [ect.] -- What's wrong with the code anyway? -- By the way, did we happen to mention Functions?. Contents note continued: Okay, but how does it actually work? -- What can you pass to a function? -- JavaScript is pass-by-value -- Weird Functions -- Functions can return things too -- Tracing through a function with a return statement -- Global and local variables -- 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 -- There's more to JavaScript than numbers, strings and booleans. Contents note continued: So far you've been writing JavaScript code with primitives---simple strings, numbers and booleans, like "Fido", 23, and true. And you can do a lot with primitive types, but at some point you've got to deal with more data. Say, all the items in a shopping cart, or all the songs in a playlist, or a set of stars and their apparent magnitude, or an entire product catalog. For that we need a little more ummph. The type of choice for this kind of ordered data is a JavaScript array, and in this chapter we're going to walk through how to put your data into an array, how to pass it around and how to operate on it. We'll be looking at a few other ways to structure your data in later chapters but let's get started with [ect.] -- Can you help Bubbles-R-Us? -- How to represent multiple values in JavaScript -- How arrays work -- How big is that array anyway? -- The Phrase-O-Matic -- Meanwhile, back at Bubbles-R-Us ... -- How to iterate over an array. Contents note continued: But wait, there's a better way to iterate over an array -- Can we talk about your verbosity? -- Redoing the for loop with the post-increment operator -- Quick test drive -- Creating an array from scratch (and adding to it) -- 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 -- So far you've been using primitives and arrays in your Code. Contents note continued: And, you've approached coding in quite a procedural manner using simple statements, conditionals and for/while loops with functions---that's not exactly object-oriented. In fact, it's not object-oriented at all! We did use a few objects here and there without really knowing it, but you haven't written any of your own objects yet. Well, the time has come to leave this boring procedural town behind to create some objects of your own. In this chapter, you're going to find out why using objects is going to make your life so much better---well, better in a programming sense (we can't really help you with your fashion sense and your JavaScript skills all in one book). Just a warning: once you've discovered objects you'll never want to come back. Send us a postcard when you get [ect.] -- Did someone say "Objects"?! -- Thinking about properties ... -- How to create an object -- What is Object-Oriented Anyway? -- How properties work. Contents note continued: How does a variable hold an object? Inquiring minds want to know ... -- Comparing primitives and objects -- Doing even more with objects ... -- Stepping through pre-qualification -- Let's talk a little more about passing objects to functions -- Oh Behave! Or, how to add behavior to your objects -- Improving the drive method -- Why doesn't the drive method know about the started property? -- How this works -- How behavior affects state ... Adding some Gas-o-line -- Now let's affect the behavior with the state -- 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 -- You've come a long Way With JavaScript. Contents note continued: In fact you've evolved from a newbie to a scripter to, well, a programmer. But, there's something missing. To really begin leveraging your JavaScript skills you need to know how to interact with the web page your code lives in. Only by doing that are you going to be able to write pages that are dynamic, pages that react, that respond, that update themselves after they've been loaded. So how do you interact with the page? By using the DOM, otherwise known as the document object model. In this chapter we're going to break down the DOM and see just how we can use it, along with JavaScript, to teach your page a few new [ect.] -- The "crack the code challenge" -- So what does the code do? -- 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. Contents note continued: A test drive around the planets -- Don't even think about running my code until the page is fully loaded! -- You say "event hander", I say "callback" -- How to set an attribute with setAttribute -- More fun with attributes! (you can GET attributes too) -- Don't forget getElementById can return null too! -- Any time you ask for something, you need to make sure you got back what you expected ... -- So what else is a DOM good for anyway? -- 7. Types, equality, conversion, and all that jazz: Serious types -- It's time to get serious about Our types. Contents note continued: One of the great things about JavaScript is you can get a long way without knowing a lot of details of the language. But to truly master the language, get that promotion and get on to the things you really want to do in life, you have to rock at types. Remember what we said way back about JavaScript? That it didn't have the luxury of a silver-spoon, academic, peer-reviewed language definition? Well that's true, but the academic life didn't stop Steve Jobs and Bill Gates, and it didn't stop JavaScript either. It does mean that JavaScript doesn't have the well, the most thought-out type system, and we'll find a few idiosyncrasies along the way. But, don't worry, in this chapter we're going to nail all that down, and soon you'll be able to avoid all those embarrassing moments with [ect.] -- 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. Contents note continued: We have a confession to make -- Understanding the equality operator (otherwise known as ==) -- How equality converts its operands (sounds more dangerous than it actually is) -- How to get strict with equality -- Even more type conversions ... -- How to determine if two objects are equal -- 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 -- 8. Bringing it all together: Building an app -- Put On your toolbelt. Contents note continued: That is, the toolbelt with all your new coding skills, your knowledge of the DOM, and even some HTML & CSS. We're going to bring everything together in this chapter to create our first true web application. No more silly toy games with one battleship and a single row of hiding places. In this chapter we're building the entire experience: a nice big game board, multiple ships and user input right in the web page. We're going to create the page structure for the game with HTML, visually style the game with CSS, and write JavaScript to code the game's behavior. Get ready: this is an all out, pedal to the metal development chapter where we're going to lay down some serious [ect.] -- This time, let's build a REAL Battleship game -- Stepping back ... to HTML and CSS -- Creating the HTML page: the Big Picture -- Adding some more style -- Using the hit and miss classes -- How to design the game -- Implementing the View -- How displayMessage works. Contents note continued: How displayHit and displayMiss work -- The Model -- How we're going to represent the ships -- Implementing the model object -- Setting up the fire method -- Implementing the Controller -- Processing the player's guess -- Planning the code ... -- Implementing parseGuess -- Counting guesses and firing the shot -- How to add an event handler to the Fire! button -- Passing the input to the controller -- How to place ships -- Writing the generateShip method -- Generate the starting location for the new ship -- Completing the generateShip method -- 9. Asynchronous coding: Handling events -- After this chapter you're going to realize you aren't in Kansas anymore. Contents note continued: Up until now, you've been writing code that typically executes from top to bottom---sure, your code might be a little more complex than that, and make use of a few functions, objects and methods, but at some point the code just runs its course. Now, we're awfully sorry to break this to you this late in the book, but that's not how you typically write JavaScript code. Rather, most JavaScript is written to react to events. What kind of events? Well, how about a user clicking on your page, data arriving from the network, timers expiring in the browser, changes happening in the DOM and that's just a few examples. In fact, all kinds of events are happening all the time, behind the scenes, in your browser. In this chapter we're going rethink our approach to JavaScript coding, and learn how and why we should write code that reacts to [ect.] -- What are events? -- What's an event handler? -- How to create your first event handler -- Test drive your event. Contents note continued: Getting your head around events ... by creating a game -- Implementing the game -- 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 -- How the event object works -- Putting the event object to work -- Test drive the event object and target -- Events and queues -- Even more events -- How setTimeout works -- Finishing the image game -- Test driving the timer -- 10. First-class functions: Liberated functions -- Know functions, then rock. Contents note continued: Every art, craft, and discipline has a key principle that separates the intermediate players from the rock star virtuosos---when it comes to JavaScript, it's truly understanding functions that makes the difference. Functions are fundamental to JavaScript, and many of the techniques we use to design and organize code depend on advanced knowledge and use of functions. The path to learning functions at this level is an interesting and often mind-bending one, so get ready ... This chapter is going to be a bit like Willy Wonka giving a tour of the chocolate factory---you're going to encounter some wild, wacky and wonderful things as you learn more about JavaScript [ect.] -- 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 -- How functions are values too. Contents note continued: 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 -- Returning functions from functions -- Writing the flight attendant drink order code -- The flight attendant drink order code: a different approach -- Taking orders with first class functions -- Webville Cola -- How the array sort method works -- Putting it all together -- Take sorting for a test drive -- 11. Anonymous functions, scope, and closures: Serious functions -- You've put functions through their paces, but there's more to learn. Contents note continued: In this chapter we take it further; we get hard-core. We're going to show you how to really handle functions. This won't be a super long chapter, but it will be intense, and at the end you're going to be more expressive with your JavaScript than you thought possible. You're also going to be ready to take on a coworker's code, or jump into an open source JavasScript library, because we're going to cover some common coding idioms and conventions around functions. And if you've never heard of an anonymous function or a closure, boy are you in the right [ect.] -- 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. Contents note continued: Calling a function (revisited) -- What the heck is a closure? -- Closing a function -- Using closures to implement a 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 -- How the Click me! closure works -- 12. Advanced object construction: Creating objects -- So far we've been crafting objects by hand. Contents note continued: For each object, we've used an object literal to specify each and every property. That's okay on a small scale, but for serious code we need something better. That's where object constructors come in. With constructors we can create objects much more easily, and we can create objects that all adhere to the same design blueprint---meaning we can use constructors to ensure each object has the same properties and includes the same methods. And with constructors we can write object code that is much more concise and a lot less error prone when we're creating lots of objects. So, let's get started and after this chapter you'll be talking constructors just like you grew up in [ect.] -- 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 -- It's Production Time!. Contents note continued: 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 -- Learning how to create objects was just the beginning. Contents note continued: It's time to put some muscle on our objects. We need more ways to create relationships between objects and to share code among them. And, we need ways to extend and enhance existing objects. In other words, we need more tools. In this chapter, you're going to see that JavaScript has a very powerful object model, but one that is a bit different than the status quo object-oriented language. Rather than the typical class-based object-oriented system, JavaScript instead opts for a more powerful prototype model, where objects can inherit and extend the behavior of other objects. What is that good for? You'll see soon enough. Let's get [ect.] -- 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. Contents note continued: How to set up the prototype -- Prototypes are dynamic -- A more interesting implementation of the 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 -- Creating a show dog Instance -- A final cleanup of show dogs -- Stepping through Dog.call -- The chain doesn't end at dog -- Using inheritance to your advantage ... by overriding built-in behavior -- Using inheritance to your advantage ... by extending a built-in object -- Grand Unified Theory of Everything -- Better living through objects -- Putting it all together -- What's next? -- 14. Appendix: Leftovers The top ten topics (we didn't cover) -- We've covered a lot of ground, and you're almost finished with this book. Contents note continued: We'll miss you, but before we let you go, we wouldn't feel right about sending you out into the world without a little more preparation. We can't possibly fit everything you'll need to know into this relatively small chapter. Actually, we did originally include everything you need to know about JavaScript Programming (not already covered by the other chapters), by reducing the type point size to 00004. It all fit, but nobody could read it. So we threw most of it away, and kept the best bits for this Top Ten appendix. This really is the end of the book. Except for the index, of course (a [ect.] -- #1.jQuery -- #2. Doing more with the DOM -- #3. The Window Object -- #4. Arguments -- #5. Handling exceptions -- #6. Adding event handlers with addEventListener -- #7. Regular Expressions -- #8. Recursion -- #9. JSON.