PPK On JavaScript

Reviewed July 31st, 2007 @ 09:55AM

[Book Cover] PPK On JavaScript

PPK on JavaScript by Peter-Paul Koch might just be the most thorough JavaScript book I have read. Through the use of eight real-world example scripts, PPK walks us through JavaScript from the very beginning. Over the years JavaScript has had its ups and downs. This is mainly due to the flux of poorly optimized scripts that are scattered around the Internet. So how do you know what source to trust? What are some best practices for JavaScript? How can you utilize JavaScript to add enhancements to your site without breaking in the browser? How can you create scripts that will enhance the user experience and not hurt it? All of these topics and more are discussed in this book.

Throughout the ten chapters and 499 pages of this book, there is very little that isn't covered on the topic. Let's take a look at the organization and flow of the book:

  1. Purpose

    This chapter paints the big picture for us. There is no jumping into scripts or coding in the first few chapters. Here we get an overview of some important aspects of JavaScript. One of the most important aspects is the coverage of the history of JavaScript. Though some might find this to be boring, I believe it to be invaluable. Understanding the history of JavaScript gives you a better idea of how it has formed into the language it is today. This is one of the most valuable parts of the book. It sets a solid foundation for everything else that is covered.

  2. Context

    Along with understanding the history, it is good to see where JavaScript fits into the big picture of web development. Here we take an in-depth look at HTML, CSS, and JavaScript. There are many distinctions to be made here as each could potentially mix with the other. It is important to keep a clean separation of your structure (HTML), presentation (CSS), and your behavior (JavaScript). At some points the line may become blurry on mixing the two, which is why each aspect is discussed in detail. These include separation of presentation and structure, separation of behavior and structure, and separation of behavior and presentation.

    Not every user or device has JavaScript enabled. Moving forward we look at the impact on accessibility and how it affects things such as no mouse, screen readers, and usability. These are all important pieces that must be addressed as we begin adding advanced functionality to our website.

    Lastly we are introduced to the eight example scripts that we will encounter: Textarea MaxLength, Usable Forms, Form Validation, Dropdown Menu, Edit Style Sheet, Sandwich Picker, XMLHTTP Speed Meter, and Site Survey.

  3. Browsers

    This chapter provides a little more context and history into the different browser families. We look not only at browsers but other devices such as mobile phones and screen readers. We look at each of these and are then shown some of the incompatibilities that they suffer. We address the problems and look to build solutions to patch the holes. Next we look at solving problems by using two different techniques: object detection and browser detection. Object detection works by checking if the methods you are using are supported before you use them. Browser detection tries to detect the current User Agent and then build from there. Browser detection has many flaws associated with it. One specifically is browser spoofing where you can send a different User Agent string to the server, lying to the application about the available technology. There are correct uses, but this should mostly be avoided.

    If you have been developing JavaScript for a while then you are probably used to using the alert method to help in the debugging process. Here were are introduced to debugging, figuring out some of the cryptic messages returned by the browser, and how we can deal with browser bugs.

  4. Preparation

    Planning is important for all projects. Here we are introduced to preparing our application for enhancements. This involves having the proper placements of hooks. Hooks are found by using an ID, class, custom attributes (not a widely accepted solution), and name/value pairs.

    Once we have our hooks in place, we have to get access to them to make our modifications. Having access is only part of the process. We also have to learn how to generate content when necessary and understanding the relationships inside of the DOM. We get a brief primer on setting up our script tag and how we can utilize multiple scripts if necessary.

    Our hooks are in place, and we know where we want to apply our effects. How and when should they fire? We stop to take a look at the initialization of scripts and the load event. This method has its pitfalls, which are discussed and alternate solutions are addressed. We take a look back to the example scripts for some more insight and real-world use cases.

  5. Core

    Everything we have done to this point hinges on our ability to actually program the functionality we are trying to achieve. This section walks through the basics of programming in JavaScript. We look at statements, comments, code blocks, operators, values, and case sensitivity. Next we look at the six different data types that are available to us, and how JavaScript handles conversion and concatenation. We look at ways to explicitly convert our data types when necessary. After looking at the data types we look at some of the common operators. These are inherent to every programming language, so there isn't much new in this area. We've looked at the constructs, now we move to discussing variables: proper naming, the var keyword, and variable scope. This is very important to grasp as we move forward and create our own functions to achieve our tasks. Next we look at working with numbers, strings, and booleans inside of our scripts. We have a good foundation, now we move to control structures such as if, switch, for, while, do/while, break and continue, and try/catch. The next few sections focus on defining and working with custom functions, creating and defining objects and their methods and properties, and finally dealing with arrays. The section on arrays is especially helpful as it discussed how you can loop over them and how you can add, delete, and locate specific sections inside of an array.

  6. BOM

    This section looks at the Browser Object Model and the window object. We take a look at the global window object and its impact on creating new pages and cross communication between windows. We then look at navigation within the window and the location and history. We learn how to manipulate the geometry of the window, and how to retrieve information about the current window dimensions.

    The chapter rounds off with discussion of some miscellaneous functions such as alert, confirm, prompt and timeouts and intervals. We take a closer look at some of the available methods for the document object. Finally, we take a look at working with cookies and utilizing/managing them within our application.

  7. Events

    This is probably one of the most important sections of this book. This section gives a thorough look at all of the available events. The chapter first starts by looking at some compatibilities and how to resolve them case by case. We take an in-depth look at all of the available events at our disposal and how they work. We look at event registration and the best way to handle it. The rest of this chapter discusses event bubbling and capturing and the browser support related to each, the event object and its properties available to us, targeting your elements, and then implementing some of our new-found knowledge in the example scripts. Sometimes grasping events and event registration can be tough, but this chapter makes it easy through illustration and the example scripts.

  8. DOM

    We have come a long way to this point. We have set our foundation, looked at the core of JavaScript, examined the browser window and its properties, and learned how to set our events in motion. Now it is time to look at the Document Object Model. The DOM holds all of the information inside of our pages. It is comprised of all elements and attributes and their relationship to one another. They are commonly referred to as nodes that build the family tree. Understanding of this structure is what gives us the power to build elements and insert them or delete them. We have full control over our internal structure.

    However, it is never that easy. Traversing the DOM can sometimes be painful, especially when you see some of the differences between browsers. We take a look at how to find our nodes, how we can retrieve information about those nodes, and how we can change our document tree through appending, inserting, removing, and replacing. We are also introduced to creating elements and creating text nodes, and then how we can achieve some of the above tasks.

    This chapter rounds off with the always heated discussion of the use of innerHTML, finding attributes and setting their values, dealing with text nodes - even empty text nodes that sometimes cause confusion, understanding and traversing the nodeLists, and dealing with forms and the Level 0 DOM. All of these pieces help us put together the big puzzle as we are using JavaScript to manipulate our pages.

  9. CSS Modification

    Earlier we discussed the aspect of keeping your presentation separate from your behavior. This chapter discusses best practices for working between the two. We learn how to get style information from our elements, and then how we can add classes dynamically. We take a brief look at the possibility of changing the entire stylesheet via JavaScript. While this is a nice introduction, I think it would require a specific project.

    The last parts of this chapter look at some examples of keeping the clean separation, but applying some visual enhancements. We work through some examples of toggling display of elements, animating elements, and changing the dimensions and position of elements.

  10. Data Retrieval

    This chapter is all about AJAX. We look at the XMLHttpRequest object and how to make it work cross browser through some conditional checks. Once we have sent the request, we need to know how to handle the response. We look at the different statuses and response codes that we will be dealing with and how to set callback functions to handle the response. We look at the available return formats such as XML, HTML, JSON, and CSV. The final part to this chapter looks at the impact that AJAX has on accessibility.

This review alone does not do this book justice. This book thoroughly discussed each and every aspect to JavaScript, from its history to looking to its future. The example scripts helped to grasp the different concepts, but the real meat of the book was in the specific coverage of each aspect. There are many books about specific aspects of JavaScript, but this book combines them all into one resource. If you are just getting your feet wet in JavaScript, then this book is the perfect book to help take you to the next level.