InformIT.com

Sams Teach Yourself JavaScript in 24 Hours (Learning Lab)

 

Author: Phil Ballard
Publisher: Sams Publishing
ISBN: 978-0-13-417371-9
Copyright © 2015 by Pearson Education, Inc.

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

Part II: Cooking with Code

HOUR 5: Numbers and Strings

HOUR 6: Arrays

HOUR 7: Program Control

Part III: Objects

HOUR 8: Object-Oriented Programming

HOUR 9: Scripting with the DOM

HOUR 10: Meet JSON

Part IV: HTML and CSS

HOUR 11: JavaScript and HTML5

HOUR 12: JavaScript and CSS

HOUR 13: Introducing CSS3

Part V: Using JavaScript Libraries

HOUR 14: Using Libraries

HOUR 15: A Closer Look at jQuery

HOUR 16: The jQuery UI User Interface Library

HOUR 17: Ajax with jQuery

Part VI: Advanced Topics

HOUR 18: Reading and Writing Cookies

HOUR 19: Coming Soon to JavaScript

HOUR 20: Using Frameworks

HOUR 21: JavaScript Beyond the Web Page

Part VII: Learning the Trade

HOUR 22: Good Coding Practice

HOUR 23: Debugging Your Code

HOUR 24: JavaScript Unit Testing

Part VIII: Appendices

APPENDIX A: Tools for JavaScript Development

APPENDIX B: JavaScript Quick Reference


Introduction

This introduction walks you through a few basic things before you begin reading, including who this Learning Lab was written for, why it was written, the conventions employed in this Learning Lab and in the Sams Teach Yourself series, how the content is organized, and the tools you need to create JavaScript.

Who This Learning Lab Is For

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 the Learning Lab. Don’t worry—HTML is very accessible, and you don’t need to be an expert in it to start experimenting with the JavaScript examples in this Learning Lab.

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, and 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 being 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 Learning Lab 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 Learning Lab, 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 the Learning Lab are written as HTML5. For the most part, though, the code avoids using HTML5-specific syntax, since 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.

Each hour contains at least one section that walks you through the process of implementing your own script. This will help you to gain confidence in writing your own JavaScript code based on the techniques you’ve learned.

Q&A, Workshop, and Exercises

After each hour’s lesson, you’ll find three final sections.

Note

These sections provide additional comments that might help you to understand the text and examples.

Tip

These blocks give additional hints, shortcuts, or workarounds to make coding easier.

Caution

Avoid common pitfalls by using the information in these blocks.

  • The “Q&A” section tries to answer a few of the more common questions about the hour’s topic.
  • The “Workshop” section includes a quiz that tests your knowledge of what you learned in that lesson. Answers to the quiz items are conveniently provided immediately following the quiz.
  • The “Exercises” section offers suggestions for further experimentation, based on the lesson, that you might like to try on your own.

How the Learning Lab Is Organized

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

• Part I—First Steps with JavaScript

An introduction to the JavaScript language and how to write simple scripts using the language’s common functions. This part of the Learning Lab is aimed mainly at readers with little or no prior programming knowledge, and no knowledge of the JavaScript language.

• Part II—Cooking with Code

Here JavaScript’s data types are introduced, such as numbers, strings, and arrays. More sophisticated programming paradigms such as program control loops and timers are also covered.

• Part III—Objects

This part of the Learning Lab concentrates on creating and handling objects, including navigating and editing the objects belonging to the DOM (Document Object Model).

• Part IV—HTML and CSS

Here you learn in greater depth how JavaScript can interact with HTML (including HTML5) and CSS (Cascading Style Sheets), including the latest CSS3 specification.

• Part V—Using JavaScript Libraries

In this part of the Learning Lab you learn how to simplify cross-browser development using third-party libraries such as jQuery.

• Part VI—Advanced Topics

This part of the Learning Lab covers reading and writing cookies, looks at what’s new in JavaScript via the ECMAScript 6 specification, introduces the use of frameworks such as AngularJS, and shows examples of using JavaScript beyond its use in web pages.

• Part VII—Learning the Trade

In the final part you explore aspects of professional JavaScript development such as good coding practices, JavaScript debugging, and unit testing.

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 in this Learning Lab can all be created in a text-editing program, such as the Windows Notepad program. 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.

Note

Appendix A, “Tools for JavaScript Development,” lists some additional, easily obtainable tools and resources for use in JavaScript development.

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 Learning Lab 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 examples in the Learning Lab that demonstrate Ajax; to explore all of the sample 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 sample 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 Learning Lab. (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 V. Nearly all hosts do.)


About the Author

Phil Ballard, the author of various Sams Teach Yourself titles, 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, as well as writing numerous technical books and articles.

We Want to Hear from You!

As the reader of this Learning Lab, 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 Learning Lab—as well as what we can do to make our Learning Lab better.

Please note that we cannot help you with technical problems related to the topic of this Learning Lab.

When you write, please be sure to include this Learning Lab 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 Learning Lab.

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 Learning Lab at www.informit.com/register for convenient access to any updates, downloads, or errata that might be available for this Learning Lab.