Head First JavaScript Programming

Views: 1015
Ratings: (0)

What will you learn from this book?

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. Prepare to open your mind as you learn (and nail) key topics including:

  • The inner details of JavaScript
  • How JavaScript works with the browser
  • The secrets of JavaScript types
  • Using arrays
  • The power of functions
  • How to work with objects
  • Making use of prototypes
  • Understanding closures
  • Writing and testing applications

What’s so special about this book?

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. This book replaces Head First JavaScript, which is now out of print.

List price: $42.99

Your Price: $34.39

You Save: 20%

 

14 Slices

Format Buy Remix

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

ePub

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 youwith JavaScript youre 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 youll also be in a position to create totally new behaviors for your users.

Youll be in good company too, JavaScripts not only one of the most popular programming languages, its also supported in all modern (and most ancient) browsers; JavaScripts even branching out and being embedded in a lot of environments outside the browser. More on that later; for now, lets get started!

If youre used to creating structure, content, layout and style in your web pages, isnt it time to add a little behavior as well? These days, theres no need for the page to just sit there. Great pages should be dynamic, interactive, and they should work with your users in new ways. Thats where JavaScript comes in. Lets start by taking a look at how JavaScript fits into the web page ecosystem:

 

2. Writing Real Code: Going further

ePub

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 youre lacking is the real experience of writing code, and were 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 were going to take it one step at a time. Come on, lets get this started, and if you want to launch the next casual startup, we wont stand in your way; the code is yours.

Its you against the browser: the browser hides ships and your job is to seek them out and destroy them. Of course, unlike the real Battleship game, in this one you dont place any ships of your own. Instead, your job is to sink the computers ships in the fewest number of guesses.

Goal:Sink the browsers ships in the fewest number of guesses. Youre given a rating, based on how well you perform.

 

3. Introducing Functions: Getting functional

ePub

Get ready for your first superpower. Youve got some programming under your belt; now its 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. Youre going to find not only that functions are your gateway from scripter to programmer, theyre the key to the JavaScript programming style. In this chapter were going to start with the basics: the mechanics, the ins and outs of how functions really work, and then youll keep honing your function skills throughout the rest of the book. So, lets get a good foundation started, now.

More on this as we progress through the book.

Sharpen your pencil

Do a little analysis of the code below. How does it look? Choose as many of the options below as you like, or write in your own analysis:

 

4. Putting Some Order in Your Data: Arrays

ePub

Theres more to JavaScript than numbers, strings and booleans. So far youve been writing JavaScript code with primitivessimple strings, numbers and booleans, like Fido, 23, and true. And you can do a lot with primitive types, but at some point youve 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 were going to walk through how to put your data into an array, how to pass it around and how to operate on it. Well be looking at a few other ways to structure your data in later chapters but lets get started with arrays.

Meet the Bubbles-R-Us company. Their tireless research makes sure bubble wands & machines everywhere blow the best bubbles. Today theyre testing the bubble factor of several variants of their new bubble solution; that is, theyre testing how many bubbles a given solution can make. Heres their data:

 

5. Understanding Objects: A trip to Objectville

ePub

So far youve been using primitives and arrays in your code. And, youve approached coding in quite a procedural manner using simple statements, conditionals and for/while loops with functionsthats not exactly object-oriented. In fact, its not object-oriented at all! We did use a few objects here and there without really knowing it, but you havent 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, youre going to find out why using objects is going to make your life so much betterwell, better in a programming sense (we cant really help you with your fashion sense and your JavaScript skills all in one book). Just a warning: once youve discovered objects youll never want to come back. Send us a postcard when you get there.

Ah, our favorite topic! Objects are going to take your JavaScript programming skills to the next leveltheyre the key to managing complex code, to understanding the browsers document model (which well do in the next chapter), to organizing your data, and theyre even the fundamental way many JavaScript libraries are packaged up (more on that much later in the book). That said, objects are a difficult topic, right? Hah! Were going to jump in head first and youll be using them in no time.

 

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

ePub

Youve come a long way with JavaScript. In fact youve evolved from a newbie to a scripter to, well, a programmer. But, theres 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 theyve been loaded. So how do you interact with the page? By using the DOM, otherwise known as the document object model. In this chapter were going to break down the DOM and see just how we can use it, along with JavaScript, to teach your page a few new tricks.

You were given some HTML with code in an external file, captured from Dr. Evels web site, that looked like this:

And you needed to figure out Dr. Evels passcode using your deductive powers on this code.

Lets walk through this code to see how Dr Evel is generating his passcodes. After we break down each step youll start to see how this all works:

 

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

ePub

Its time to get serious about our types. 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 didnt have the luxury of a silver-spoon, academic, peer-reviewed language definition? Well thats true, but the academic life didnt stop Steve Jobs and Bill Gates, and it didnt stop JavaScript either. It does mean that JavaScript doesnt have the... well, the most thought-out type system, and well find a few idiosyncrasies along the way. But, dont worry, in this chapter were going to nail all that down, and soon youll be able to avoid all those embarrassing moments with types.

Now that youve had a lot of experience working with JavaScript typestheres your primitives with numbers, strings, and booleans, and theres all the objects, some supplied by JavaScript (like the Math object), some supplied by the browser (like the document object), and some youve written yourselfarent you just basking in the glow of JavaScripts simple, powerful and consistent type system?

 

8. Bringing it All Together: Building an app

ePub

Put on your toolbelt. That is, the toolbelt with all your new coding skills, your knowledge of the DOM, and even some HTML & CSS. Were 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 were building the entire experience: a nice big game board, multiple ships and user input right in the web page. Were going to create the page structure for the game with HTML, visually style the game with CSS, and write JavaScript to code the games behavior. Get ready: this is an all out, pedal to the metal development chapter where were going to lay down some serious code.

Sure, you can feel good because back in Chapter2 you built a nice little battleship game from scratch, but lets admit it: that was a bit of a toy gameit worked, it was playable, but it wasnt exactly the game youd impress your friends with, or use to raise your first round of venture capital. To really impress, youll need a visual game board, snazzy battleship graphics, and a way for players to enter their moves right in the game (rather than a generic browser dialog box). Youll also want to improve the previous version by supporting all three ships.

 

9. Asynchronous Coding: Handling events

ePub

After this chapter youre going to realize you arent in Kansas anymore. Up until now, youve been writing code that typically executes from top to bottomsure, 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, were awfully sorry to break this to you this late in the book, but thats 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 thats just a few examples. In fact, all kinds of events are happening all the time, behind the scenes, in your browser. In this chapter were going rethink our approach to JavaScript coding, and learn how and why we should write code that reacts to events.

You know what a browser does, right? It retrieves a page and all that pages contents and then renders the page. But the browsers doing a lot more than just that. What else is it doing? Choose any of the tasks below you suspect the browser is doing behind the scenes. If you arent sure just make your best guess.

 

10. First Class Functions: Liberated functions

ePub

Know functions, then rock. Every art, craft, and discipline has a key principle that separates the intermediate players from the rock star virtuososwhen it comes to JavaScript, its 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 factoryyoure going to encounter some wild, wacky and wonderful things as you learn more about JavaScript functions.

Well spare you the singing Oompa Loompas.

So far weve been declaring functions like this:

There are no surprises here, but lets get our terminology down: formally, the first statement above is a function declaration, which creates a function that has a namein this case quackthat can be used to reference and invoke the function.

 

11. Anonymous Functions, Scope and Closures: Serious functions

ePub

Youve put functions through their paces, but theres more to learn. In this chapter we take it further; we get hard-core. Were going to show you how to really handle functions. This wont be a super long chapter, but it will be intense, and at the end youre going to be more expressive with your JavaScript than you thought possible. Youre also going to be ready to take on a coworkers code, or jump into an open source JavasScript library, because were going to cover some common coding idioms and conventions around functions. And if youve never heard of an anonymous function or a closure, boy are you in the right place.

And if you have heard of a closure, but dont quite know what it is, youre even more in the right place!

Youve already seen two sides of functionsyouve seen the formal, declarative side of function declarations, and youve seen the looser, more expressive side of function expressions. Well, now its time to introduce you to another interesting side of functions: the anonymous side.

 

12. Advanced Object Construction: Creating objects

ePub

So far weve been crafting objects by hand. For each object, weve used an object literal to specify each and every property. Thats okay on a small scale, but for serious code we need something better. Thats 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 blueprintmeaning 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 were creating lots of objects. So, lets get started and after this chapter youll be talking constructors just like you grew up in Objectville.

So far in this book, youve been using object literals to create objects. With an object literal, you create an object by writing it out... well, literally. Like this:

Object literals give you a convenient way to create objects anywhere in your code, but when you need to create lots of objectssay a whole fleet of taxisyou wouldnt want to type in a hundred different object literals now would you?

 

13. Using Prototypes: Extra strength objects

ePub

Learning how to create objects was just the beginning. Its 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, youre 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? Youll see soon enough. Lets get started...

If youre used to Java, C++, or any language based on classical object-oriented programming lets have a quick chat.

And if you arent... what, you got a date? Take a seat, and go along for the rideyou might just learn something as well.

Well give it to you straight: JavaScript doesnt have a classical object-oriented model, where you create objects from classes. In fact, JavaScript doesnt have classes at all. In JavaScript, objects inherit behavior from other objects, which we call prototypal inheritance, or inheritance based on prototypes.

 

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

ePub

Weve covered a lot of ground, and youre almost finished with this book. Well miss you, but before we let you go, we wouldnt feel right about sending you out into the world without a little more preparation. We cant possibly fit everything youll 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 must-read!).

jQuery is a JavaScript library that is aimed at reducing and simplifying much of the JavaScript code and syntax that is needed to work with the DOM and add visual effects to your pages. jQuery is an enormously popular library that is widely used and expandable through its plug-in model.

Now, theres nothing you can do in jQuery that you cant do with JavaScript (as we said, jQuery is just a JavaScript library); however, it does have the power to reduce the amount of code you need to write.

 

Details

Print Book
E-Books
Slices

Format name
ePub (DRM)
Encrypted
true
Sku
2370006339465
Isbn
9781449343989
File size
5 KB
Printing
Disabled
Copying
Disabled
Read aloud
No
Format name
ePub
Encrypted
No
Printing
Allowed
Copying
Allowed
Read aloud
Allowed
Sku
In metadata
Isbn
In metadata
File size
In metadata