Published by: John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, www.wiley.com

Copyright © 2015 by John Wiley & Sons, Inc., Hoboken, New Jersey

Media and software compilation copyright © 2015 by John Wiley & Sons, Inc. All rights reserved.

Published simultaneously in Canada

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without the prior written permission of the Publisher. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions.

Trademarks: Wiley, For Dummies, the Dummies Man logo, Dummies.com, Making Everything Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book.

LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.

For general information on our other products and services, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002. For technical support, please visit www.wiley.com/techsupport.

Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com.

Library of Congress Control Number: 2015938674

ISBN: 978-1-119-05607-2

ISBN 978-1-119-05607-2 (pbk); ISBN 978-1-119-05605-8 (ePDF); ISBN 978-1-119-05606-5 (ePub)

JavaScript is hot! What started as a quick-and-dirty language created for one of the first web browsers has turned into the world’s most popular programming language. Demand for JavaScript programmers is at an all-time high and only continues to grow.

This book is your key to becoming proficient in the core concepts of JavaScript. Whether your goal is to land a high-paying job as a programmer or to make your own personal website more interactive, you can be confident that the content and techniques presented in this book are fully up to date with the most current JavaScript standards and best practices.

Each chapter contains complete examples of real code that you can try and test in your own web browser at home.

Just as the only way to Carnegie Hall is to practice, practice, practice, the only way to become a better programmer is to code, code, code!

About This Book

This book is a friendly and approachable guide to getting started with writing JavaScript code. As programming languages go, JavaScript is fairly easy to pick up and start using. Because it’s so accessible, many people who started as web page authors have found themselves in the position of being responsible for maintaining, modifying, and writing JavaScript code. If that describes you, this book will quickly and easily bring you up to speed.

Whether you know a little JavaScript or you’ve never seen it, this book shows you how to write JavaScript the right way.

Topics covered in this book include the following:

• Understanding the basic structures of JavaScript programs
• Integrating JavaScript with HTML5 and CSS3
• Structuring your programs with functions
• Working with JavaScript Objects
• Using advanced JavaScript techniques, such as AJAX, callbacks, and closures
• Getting started with jQuery

Learning JavaScript isn’t only about learning the syntax of the language. It’s also about accessing the tools and community that has been built around the language. Professional JavaScript programmers have greatly refined the tools and techniques used to write JavaScript over the language’s long and exciting history. Throughout the book, we mention important best practices and tools for testing, documenting, and writing better code faster!

To make this book easier to read, keep in mind the following:

• As a convention for this book, all JavaScript code and all HTML and CSS markup appears in monospaced type like this:

  document.write("Hi!");

• The margins on a book page don’t have the same room as your monitor likely does. Therefore, long lines of HTML, CSS, and JavaScript may break across multiple lines. Remember that your computer sees such lines as single lines of HTML, CSS, or JavaScript. We indicate that everything should be on one line by breaking it at a punctuation character or space and then indenting any overage, like so:

  document.getElementById("anElementInTheDocument").
         addEventListener("click",doSomething,false);

• HTML and CSS don’t care very much about whether you use uppercase or lowercase letters or a combination of the two, but JavaScript cares a lot! In order to make sure that you get the correct results from the code examples in the book, always stick to the same capitalizations that we use.

Foolish Assumptions

We have a policy at our company, WatzThis?, to never assume (but, frankly, Eva is better at following the policy than Chris is). If you were ever 12 years old, you’ve probably heard the saying about what happens when you assume. If you don’t know, email us.

You don’t need to be a programming ninja or a hacker to understand programming. You don’t need to understand how the guts of your computer work. You don’t even need to know how to count in binary.

However, we do need to make a couple of assumptions about you. We assume that you can turn your computer on, that you know how to use a mouse and a keyboard, and that you have a working Internet connection and web browser. If you already know something about how to make web pages (it doesn’t take much!), you have a jump start on the material.

The other things you need to know to write and run JavaScript code are details we cover in this book. And the one thing you’ll find to be true is that programming requires attention to details.

Icons Used In This Book

Here’s a list of the icons we use in this book to flag text and information that’s especially noteworthy:

This icon highlights helpful tips that show you easy ways or shortcuts that will save you time or effort.

Whenever you see this icon, pay special attention. You won’t want to forget the information you’re about to read.

Be careful — very careful. This icon warns you of pitfalls to avoid.

This icon highlights technical details that you may or may not find interesting. Feel free to skip this information, but if you’re the techie type, you might enjoy reading it.

Beyond the Book

Here’s where you can find the online content for this book:

• Examples: You can find all the examples in the chapters at www.dummies.com/go/codingwithjavascript. Here you will find a directory labeled by chapter. Within the chapter, you will find each example labeled by its listing number
• Cheat Sheet: You can find lists of useful information at www.dummies.com/cheatsheet/codingwithjavascript.

Where to Go from Here

Coding with JavaScript is fun, and once you get a little knowledge under your belt, the world of interactive web applications is your oyster! So buckle up! We hope you enjoy the book and our occasional pearls of wisdom.

Part I

Getting Started with JavaScript

Visit http://www.dummies.com for great Dummies content online.

In This Chapter

What Does JavaScript Do?

If you use the web, you're making use of JavaScript all the time. The list of things that can be enabled with JavaScript is extensive and ranges from simple notices you get when you forget to fill out a required field on a form to complex applications, such as Google Docs or Facebook. Here’s a short list of the most common uses for JavaScript on the web:

• Nifty effects
• Input validation
• Rollover effects
• Drop-down/fly-out menus
• Drag and drop features
• Infinitely scrolling web pages
• Autocomplete
• Progress bars
• Tabs within web pages
• Sortable lists
• Magic Zoom (see Figure 1-4)

Why JavaScript?

JavaScript has become the standard for creating dynamic user interfaces for the web. Pretty much any time you visit a web page with animation, live data, a button that changes when you hover over it, or a drop-down menu, JavaScript is at work. Because of its power and ability to run in any web browser, JavaScript coding is the most popular and necessary skill for a modern web developer to have.

Where is JavaScript? JavaScript is everywhere!

Although JavaScript was originally designed to be used in web browsers, it has found a home in many other places. Today, JavaScript runs on smartphones and tablets, on web servers, in desktop applications, and in all sorts of portable devices.

JavaScript in the web browser

The most common place to find JavaScript, and what it was originally designed to do, is running in web browsers. When JavaScript runs in this way, it’s called client-side JavaScript.

Client-side JavaScript adds interactivity to web pages. It accomplishes this in several ways:

• By controlling the browser itself or making use of functionality of the browser
• By manipulating the structure and content of web pages
• By manipulating the styles (such as fonts and layout) of web pages
• By accessing data from other sources

In order to understand how JavaScript is able to manipulate the structure and style of web pages, you need to know a little bit about HTML5 and CSS3.

HTML5

Hypertext Markup Language (HTML) is the language used to structure web pages. It works by marking up content (text and images) to give web browsers information about the content, such as what is a heading, what is a paragraph, where an image goes, and so on. Listing 1-1 shows a simple HTML document. Figure 1-5 shows how a web browser displays this document.

Listing 1-1: A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
 <title>Hello, HTML!</title>
</head>
<body>
 <h1>This is HTML</h1>
 <p id="introduction">This simple document was written with Hypertext Markup Language.</p> 
</body>
</html>


Here is everything you need to know about HTML right now in order to move forward with learning JavaScript:

• In HTML, the characters surrounded by angle brackets are called tags.
• The ending tag (which comes after the content being marked up) has a slash after the first angle bracket. For example </p> is an ending tag.
• A group of two tags (beginning and ending), plus the content in between them, is called an element.
• Elements are generally organized in a hierarchal way (with elements nested within elements).
• Elements may contain name/value pairs, called attributes. If an element has attributes, they go in the beginning tag. Name/value pairs assign values, in quotes, to names (which aren’t in quotes) by putting an equals sign between them. For example, in the following tag, width and height are both attributes of the div element:

  <div width="100" height="100"></div>

• Some elements don’t have content and therefore don’t need an ending tag. For example, the img tag, which simply inserts an image into a web page, looks like this:

  <img src="myimage.jpg" width="320" height="200" alt="Here is a picture of my dog.">

All the data necessary to show the image is included in the beginning tag using attributes, so the img tag doesn’t require an ending tag.

When you write a web page with HTML, you can include JavaScript code directly in that document, or you can reference JavaScript code file (which end in .js) from the HTML document. Either way, your viewer’s web browser will download the JavaScript code and run it when a user accesses a web page containing that JavaScript.

Client-side JavaScript runs inside of your users’ web browsers.

CSS3

Cascading Style Sheets (CSS) is the language used to add formatting and different layouts to web pages. The word style, when used in CSS, refers to many aspects of how the HTML document is presented to the user, including

• Typefaces (or font faces)
• Type size
• Colors
• Arrangement of elements in the browser window
• Sizes of elements
• Borders
• Backgrounds
• Creation of rounded corners on element borders

Like JavaScript, CSS can be either placed directly into an HTML document, or it can be linked to from the HTML document. Once it’s downloaded, it immediately does its thing and formats the document according to your specifications.

Style sheets in CSS are made up of CSS rules, which contain properties and values that should be applied to an element or a group of elements. Here’s an example of a CSS rule:

p{font-size: 14px; font-color: black; font-family: Arial, sans-serif}

This rule, reading from left to right, specifies that all p elements (which indicate paragraphs in HTML) should be displayed in text that is 14px large, black, and using the Arial font. If Arial isn’t available on the user’s computer, it should be displayed in some sans serif typeface.

The part of the CSS rule that’s outside of the curly brackets is called the selector. It selects the elements that the properties within the curly brackets apply to.

Throughout this book, you find out how to use JavaScript with HTML and CSS. We provide just enough information here to be able to show you how HTML and CSS work. If you need to learn more, you can find some excellent books about them. One that we highly recommend is Beginning HTML5 and CSS3 For Dummies by Ed Tittel and Chris Minnick (Wiley).

In This Chapter