Contents at a Glance

Introduction

PART I: FIRST STEPS WITH JAVASCRIPT

Hour 1: Introducing JavaScript

Hour 2: Writing Simple Scripts

Hour 3: Using Functions

Hour 4: DOM Objects and Built-In Objects

Hour 5: Different Types of Data

PART II: MORE ADVANCED JAVASCRIPT

Hour 6: Scripts That Do More

Hour 7: Object Oriented Programming

Hour 8: Meet JSON

Hour 9: Responding to Events

Hour 10: JavaScript and Cookies

PART III: WORKING WITH THE DOCUMENT OBJECT MODEL

Hour 11: Navigating the DOM

Hour 12: Scripting the DOM

Hour 13: JavaScript and CSS

Hour 14: Good Coding Practice

Hour 15: Graphics and Animation

PART IV: AJAX

Hour 16: Introducing Ajax

Hour 17: Creating a Simple Ajax Library

Hour 18: Solving Ajax Problems

PART V: USING JAVASCRIPT LIBRARIES

Hour 19: Making Life Easier with Libraries

Hour 20: A Closer Look at jQuery

Hour 21: The jQuery UI User Interface Library

PART VI: USING JAVASCRIPT WITH OTHER WEB TECHNOLOGIES

Hour 22: JavaScript and Multimedia

Hour 23: HTML5 and JavaScript

Hour 24: JavaScript Beyond the Web Page

PART VII: APPENDIXES

Appendix A: Tools for JavaScript Development

Appendix B: JavaScript Quick Reference

---

Introduction

If you’re interested in learning JavaScript, chances are that you’ve already gained at least a basic understanding of HTML and web page design in general and want to move on to adding some extra interactivity to your pages. Or maybe you currently code in another programming language and want to see what additional capabilities JavaScript can add to your armory.

If you’ve never tinkered with HTML at all, nor done any computer programming, it would be helpful to browse through an HTML primer before getting into this tutorial. Don’t worry—HTML is very accessible, and you don’t need to be an HTML expert to start experimenting with the JavaScript examples in here.

JavaScript is an ideal language to use for your first steps in programming, and in case you get bitten by the bug, pretty much all of the fundamental concepts that you learn in JavaScript will later be applicable in a wide variety of other languages such as C, Java, or PHP.

The Aims of This Learning Lab

When JavaScript was first introduced, it was somewhat limited in what it could do. With basic features and rather haphazard browser support, it gained a reputation in some quarters as being something of a toy or gimmick. Now, due to much better browser support for W3C standards and improvement in the JavaScript implementations used in recent browsers, JavaScript is finally beginning to be treated as a serious programming language.

Many advanced programming disciplines used in other programming languages can readily be applied to JavaScript, for example, object oriented programming promotes the writing of solid, readable, maintainable, and reusable code.

So-called “unobtrusive” scripting techniques and the use of DOM scripting focus on adding interaction to web pages while keeping the HTML simple to read and well separated from the program code.

This tutorial aims to teach the fundamental skills relevant to all of the important aspects of JavaScript as it’s used today. In the course of the lessons, you start from basic concepts and gradually learn the best practices for writing JavaScript programs in accordance with current web standards.

Conventions Used

All of the code examples in this learning kit are written to validate correctly as HTML5. In the main, though, the code avoids using HTML5-specific syntax because at the time of writing its support in web browsers is still not universal. The code examples should work correctly in virtually any recent web browser, regardless of the type of computer or operating system.

In addition to the main text of each lesson, you will find a number of boxes labeled as Notes, Tips, and Cautions.

Q&A, Quiz, and Exercises

Every hour ends with a short question-and-answer section to help with follow-up questions that occur as a result of reading the hour.

You can also take an interactive quiz on the content of each hour as well as do some suggested exercises to help you get more out of what you learned and apply this knowledge to your own applications.

How the Learning Lab Is Organized

The Learning Lab is divided into six parts, gradually increasing in the complexity of the techniques taught.

• Part I—First Steps with JavaScript

Part I is an introduction to the JavaScript language and how to write simple scripts using the language’s common functions. This part of the tutorial is aimed mainly at readers with little or no prior programming knowledge and no knowledge of the JavaScript language.

• Part II—More Advanced JavaScript

Here more sophisticated programming paradigms are introduced, such as program control loops and event handling, object oriented programming, JSON notation, and cookies.

• Part III—Working with the Document Object Model (DOM)

This part of the tutorial concentrates on navigating and editing the DOM (Document Object Model) tree, using CSS stylesheets, and styling and animating page elements. There is emphasis on using good coding practice such as unobtrusive JavaScript.

• Part IV—Ajax

Here you learn how to make background calls to the server using the XMLHTTPRequest object and handle the server responses, build a simple Ajax library, and learn about debugging Ajax applications.

• Part V—Using JavaScript Libraries

In this part, you learn how to simplify cross-browser development using third-party libraries such as Prototype and jQuery.

• Part VI—Using JavaScript with Other Web Technologies

In the final part examples are given of how to use JavaScript to control multimedia, exploit HTML5 capabilities, write browser add-ons, and more.

Tools You’ll Need

Writing JavaScript does not require any expensive and complicated tools such as Integrated Development Environments (IDEs), compilers, or debuggers.

The examples can all be created in a text editing program, such as Windows’ Notepad. At least one such application ships with just about every operating system, and countless more are available for no or low cost via download from the Internet.

To see your program code working, you’ll need a web browser such as Internet Explorer, Mozilla Firefox, Opera, Safari, or Google Chrome. It is recommended that you upgrade your browser to the latest current stable version.

The vast majority of the examples do not need an Internet connection to function. Simply storing the source code file in a convenient location on your computer and opening it with your chosen browser is generally sufficient. The exceptions to this are the hour on cookies and the section about Ajax; to explore all of the example code will require a web connection (or a connection to a web server on your Local Area Network) and a little web space in which to post the example code. If you’ve done some HTML coding, you may already have that covered; if not, a hobby-grade web hosting account costs very little and will be more than adequate for trying out the examples in this book. (Check that your web host allows you to run scripts written in the PHP language if you want to try out the Ajax examples in Part IV. Nearly all hosts do).

---

About the Authors

Phil Ballard, the author of Sams Teach Yourself Ajax in 10 Minutes, graduated in 1980 with an honors degree in electronics from the University of Leeds, England. Following an early career as a research scientist with a major multinational, he spent a few years in commercial and managerial roles within the high technology sector, later working full time as a software engineering consultant.

Operating as “The Mouse Whisperer” (www.mousewhisperer.co.uk), Ballard has spent recent years involved solely in website and intranet design and development for an international portfolio of clients.

Michael Moncur is a freelance webmaster and author. He runs a network of websites, including the Web’s oldest site about famous quotations, online since 1994. He wrote Sams Teach Yourself DHTML in 24 Hours and has also written several bestselling books about networking, certification programs, and databases. He lives with his wife in Salt Lake City.

We Want to Hear from You!

As the reader of this book, you are our most important critic and commentator. We value your opinion and want to know what we’re doing right, what we could do better, what areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass our way.

We welcome your comments. You can email or write to let us know what you did or didn’t like about this book—as well as what we can do to make our books better.

Please note that we cannot help you with technical problems related to this product’s topic, and that due to the high volume of mail we receive, we might not be able to reply to every message.

When you write, please be sure to include this book’s title and author as well as your name and email address. We will carefully review your comments and share them with the author and editors who worked on the book.

Email:       feedback@samspublishing.com

Mail:         Sams Publishing
                  ATTN: Reader Feedback
                  800 East 96th Street
                  Indianapolis, IN 46240 USA

Reader Services

Visit our website and register this book at informit.com/register for convenient access to any updates, downloads, or errata that might be available.