"head first" entries

The art of design patterns

Communicate more efficiently, concisely, and accurately.

Download a free copy of An Engineering Manager’s Guide to Design Patterns, a brain-friendly report that shows you how object-oriented design patterns are ideal for solving specific problems in application design.

If you haven’t had the pleasure of viewing Hal Abelson & Gerald Sussman’s 1986 MIT introductory computer science course, you owe it to yourself to set aside a few hours to view it. “1986?”, you say — “Could that really be relevant to my work today?” Unless you came through MIT or a similar program that teaches from their seminal book The Structure and Interpretation of Computer Programs, I’d bet you are most likely going to learn a few new things (even if you consider yourself a seasoned software developer).

Play the video, and right away you might be surprised, as Abelson, in the first five minutes of the class, states that not only is computer science not a science, it doesn’t have all that much to do with computers. Rather, Abelson suggests, computer science is more of an engineering discipline, or perhaps even an art; and, rather than being concerned with computers, computer science is more an exercise in creating imperative knowledge and managing complexity.

Anyone who has ever been late on a software development project (who hasn’t?) can relate to this. Software development starts to feel more like an art or craft when the best you can do is roughly estimate the size and scope of a job and then cross your fingers and hope for the best — certainly, it is at times like these when our field doesn’t feel like much of a science. And, for anyone who has worked on a project of moderate size, at some point you find complexity staring you in the face. All too often our first designs, and our code, turn into the dreaded big ball of mud (yes, that is a technical term).
Read more…

What it really means when people say “Everything in JavaScript is an object”

A new mantra for your next (programming) meditation session.

When you begin programming with JavaScript you might run across books, tutorials, and people who say “Everything in JavaScript is an object.” While it’s not 100% true (not *everything* is an object), it is *mostly* true. And sometimes this can be a bit surprising.

For instance, to most people functions and objects look and act completely different. And in many languages, functions and objects *are* completely different. However, in JavaScript, a function is an object. This can take a bit of concentrated attention to get your head around, but it’s an important concept because it’s the secret behind another big topic in JavaScript: functions as first class values.

Read more…

Dos and don’ts in JavaScript

A few best practices for when you're learning the language


With every programming language, there’s a list of do’s and don’ts and JavaScript is no exception. Some of these best practices are there for your protection (like always always always using semi-colons!); some to make your code more readable and less error-prone; and some to increase the efficiency of your code. Read more…

I just slipped on a banana peel named “this”

Keeping track of this in your JavaScript code

In JavaScript, the special variable this is used to refer an object. But which object this refers too depends on the code you’re executing and how this is used. So, a common problem for those learning JavaScript is keeping track of the value of this in different situations. You can be happily testing your code, and then – bam! Suddenly, things stop working, and you’re wondering what happened, not realizing that you’re assuming this is set to one value, when in fact, it’s an entirely different value. And, bugs caused by confusion about this are notoriously difficult to track down.
Read more…

What is that upside-down tree doing in my browser?

Start using JavaScript to create dynamic web pages by updating the DOM.

The secret to getting your web pages to do your bidding with code is to use JavaScript to manipulate the Document Object Model, or DOM. The DOM is an upside-down tree-like structure that the browser uses to represent your web page internally, and it’s by getting and setting values in the DOM that you can modify your web page in response to users doing things like clicking a button, moving the mouse, or dragging an element around.

Getting started with the DOM is easy once you understand how the browser translates your HTML into this internal structure made of objects. Once these objects are created, then you can manipulate them using a wide variety of properties and methods, to change the content of an element, to add a style to an element, or even remove an element from the page completely.

Read more…

Wait, where is my variable defined?

Learn JavaScript scope so you always know where your variables are defined

You may have noticed that Head First JavaScript Programming is released! Now that the book is done, we’ve got a few more Head First JavaScript Programming teasers for you. The book is aimed at those of you who are learning JavaScript from the ground up, and our goal with these teasers is to tease out a few characteristics of the language that might surprise you, trip you up, or that you might want to pay special attention to as you learn.

Whether you’re coming to JavaScript from another language, or you’re learning JavaScript as your first language, the way scope works — that is, when and where your variables are defined — might surprise you. Scope in JavaScript isn’t always intuitive, and it’s easy to make some simple mistakes that can cause your code to work in unexpected ways.

Read more…

JavaScript Flexibility: Fun, But Use with Care

JavaScript is dynamically typed

When you begin programming in JavaScript, you’ll need to use variables. A variable is just a bit of storage to hold a value. Just about every line of code you write will use a variable of one kind or another, so it’s a good idea to get familiar with the kinds of things you can put in variables, and how you can use them. Now, if you’re coming from another programming language, like Java, you might be surprised to see how loose JavaScript is about variables and their type. JavaScript doesn’t care if your variable starts out with a string value, and ends up being a number: JavaScript’s dynamically typed.

In this installment of Head First JavaScript Programming Teasers, you’ll learn about the basics of variables, how JavaScript is dynamically typed, and why it’s a good idea to stick with one type for your variables.

JavaScript Makes Browsers Behave

Start adding functionality to your HTML and CSS with JavaScript

If you know HTML and CSS, you’re ready to begin learning JavaScript. But you might be surprised, because JavaScript looks quite different from both HTML and CSS. That’s because JavaScript is a language for computation. Unlike HTML, which is for marking up content to add meaning and structure to that content, and CSS, which is a set of declarative rules for adding style to selected elements, JavaScript is for describing computation: it’s a language for describing how things get done.

A JavaScript program consists of a series of statements, each of which does a little bit of computation. A statement might store some data in a variable, or modify data with an expression, or make a decision about what to do based on the value of a variable, or even tell the browser to do something, like pop up an alert.

Want to know more? In part four of Head First JavaScript Programming Teasers, Eric shows you how JavaScript is different from HTML and CSS, and why. He also steps you through a simple example of JavaScript code, so you can get a taste of how it works.

Cutting Your Programming Teeth on JavaScript

Why it's a great first programming language

JavaScript is a bit different from other programming languages. How? Well, JavaScript runs in an environment, and that’s usually the browser. So when you learn JavaScript, you’ll learn both the language basics, as well as how to use JavaScript in the browser to do things like interact with the page, add and remove elements, draw graphics, or store data locally in the browser.

Another way that JavaScript is a bit different is that it’s so easy to get started with: all you need is a basic text editor and a browser, and you’re ready to go. This also makes JavaScript a great first language. For instance, the fact that you can run JavaScript in the browser means you have a built-in, easy way to see your results, and you can create and interact with a web page interface, without having to write a huge amount of code.

We’re designing Head First JavaScript Programming so that you can learn JavaScript, from scratch, even if you’ve never programmed before. All you need is just some background in HTML and CSS. If that’s where you’re coming from, and you’re itching to learn how to program, check out part three of Head First JavaScript Programming Teasers, where we step you through what makes JavaScript unique, and why it’s a great first programming language.

Location, Location, Location

Why where you put your script element matters

Everyone knows you add JavaScript to your page by putting your <script> element at the top of your HTML page, right? Not so fast. In part two of Head First JavaScript Programming Teasers, Eric explains the nuts and bolts of the <script> element: how to add it to your page, and where.

While you can put a <script> element just about anywhere in your code, there are a couple of things you should know before you make any decisions about where to add it. For instance, you might already know that the browser reads your page top down and starts executing your JavaScript as it gets to the code. That means if you put your JavaScript in the <head> of your document, the browser will execute the code before it loads the rest of the page. That might be what you want… or it might mean that users are sitting there looking at a blank page while your script is executing.

Watch the video for a couple of other tips about the <script> element, taken from our upcoming book, Head First JavaScript Programming.

And if you missed the first part of this video series, you can watch it here.