As comprehensive as it can get. In 600+ pages you'll go from JavaScript Novice to Ninja. Covering everything from arrays, logic and loops, to functions, objects, DOM, events, testing and debugging, Ajax and more. It's everything you need to build with JavaScript.

JavaScript: Novice to Ninja, 2nd Edition

Preface

In this chapter, we’re going to introduce the JavaScript language, as well as set up a programming environment. We’ll also get started with some programming and write a couple of programs in JavaScript!

Hello, JavaScript

In the last chapter, we introduced JavaScript, then set up a programming environment. We even got our hands dirty with a few JavaScript programs. In this chapter, we’ll delve further and learn how JavaScript works, as well as write some more programs.

Programming Basics

In this chapter we’ll look at some of the data structures used in JavaScript to store lists of values. These are called arrays, sets, and maps. We’ll also look at logical statements that allow us to control the flow of a program, as well as loops that allow us to repeat blocks of code over and over again.

Arrays, Logic, and Loops

A function is a chunk of code that can be referenced by a name, and is almost like a small, self-contained mini program. Functions can help reduce repetition and make code easier to follow.

Functions

Everything in JavaScript is either one of the six primitive data types we met in Chapter 2 (strings, numbers, booleans, symbols, undefined, and null) or an object. We’ve actually met some objects already; arrays in Chapter 3 and functions in Chapter 4 are both objects, although these are built-in objects that are part of the language. In this chapter we’re going to look at user-defined objects, as well as some of the other built-in objects.

Objects

The Document Object Model (DOM) allows you to access elements of a web page and enable interaction with the page by adding and removing elements, changing the order, content and attributes of elements, and even altering how they are styled.

The Document Object Model

We saw in the last chapter how the DOM is an interface that allows you to use JavaScript to interact with a web page. Events are another part of the DOM and they are what provides the link between the web page and user interactions. Every time a user interacts with a web page, such as clicking on a link, pressing a key, or moving a mouse, an event occurs that our program can detect and then respond to.

Events

Forms are a very common method of interacting with a web page. A form is the main component of Google’s home page, and most of us use forms every day to log in to our favorite sites. In this chapter, we will look at how forms can be used to interact with a JavaScript program.

Forms

Every JavaScript environment has a global object . Any variables that are created in the global scope are actually properties of this object, and any functions are methods of it. In a browser environment the global object is the window object, which represents the browser window that contains a web page.

The Window Object

Errors and bugs are a fact of life in programming ― they will always be there. A ninja programmer will try to do everything to minimize errors occurring, and find ways to identify and deal with them quickly.

Testing and Debugging

We covered functions back in chapter 4, but we were only just beginning to scratch the surface. In JavaScript, functions are first-class objects , which means they can be passed around in the same way as every other value. They can have their own properties and methods, as well as accepting other functions as parameters and being returned by other functions. This makes them a very flexible tool to work with in JavaScript, and there are a variety of techniques and patterns that can be used to make code cleaner.

Further Functions

Object-oriented programming (OOP for short) is a style of programming that involves separating the code into objects that have properties and methods. This approach has the benefit of keeping related pieces of code encapsulated in objects that maintain state throughout the life of the program. The objects can also be reused or easily modified, as required. JavaScript obviously supports objects, as we saw in Chapter 5, so it also supports an object-oriented style of programming. In this chapter, we’ll look at what object-oriented programming is and how to implement it in JavaScript.

Object-Oriented Programming in JavaScript

Ajax is a technique that allows web pages to communicate asynchronously with a server, and it dynamically updates web pages without reloading. This enables data to be sent and received in the background, as well as portions of a page to be updated in response to user events, while the rest of the program continues to run.

Ajax

HTML5 is the latest version of the Hypertext Markup Language used to create web pages. The latest iteration is HTML 5.1, which finally became a W3C recommendation in November 2016.

HTML5 APIs

As you build more and more complex JavaScript projects, you’ll find the amount of code you’re using increases into hundreds and then thousands of lines. This can be difficult to manage without some sort of organizing. The first step is to break the code into separate files, but this presents its own problems, such as how to include all the files on a web page, and which code to put in which files. Indeed, how do you ensure that a file has access to the code in another file?

Modern JavaScript Development

We are nearing the end of the road to becoming a JavaScript ninja. But as one journey finishes, a new one begins. Now it’s time to level up your JavaScript ninja skills. In this final chapter, we’re going to see what’s in store for JavaScript in the future. We’ll also look at how to become a better programmer, as well as offer some ideas of what to do with your newfound JavaScript programming skills.

Community Questions