JavaScript Novice to Ninja (Darren Jones) (z-library.sk, 1lib.sk, z-lib.sk)

JavaScript: Novice to Ninja 2nd Edition by Darren Jones Copyright © 2017 SitePoint Pty. Ltd. Product Manager: Simon Mackie English Editor: Katie Monk Technical Editor: James Hibbard Cover Designer: Alex Walker

Notice of Rights All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews.

Notice of Liability The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein.

Trademark Notice Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark. Published by SitePoint Pty. Ltd. 48 Cambridge Street Collingwood VIC Australia 3066 Web: www.sitepoint.com Email: books@sitepoint.com ISBN 978-0-9953826-2-6 (print) ISBN 978-0-9953827-7-0 (ebook) Printed and bound in the United States of America

About Darren Jones Darren has been programming and building websites since the turn of the millennium. He wrote the book Jump Start Sinatra in 2013 and followed it up with the Getting Started With Ruby video tutorials for SitePoint Premium. He has also written a number articles for SitePoint’s website. He started using JavaScript much more often after the release of Node.js. He loves the power and flexibility of the language as well as the amazing ecosystem that has grown around it. At the moment he is working on using React and Redux to develop an interactive online math quiz. He was born in the city of Manchester and still lives there, where he teaches mathematics and enjoys playing water polo.

About SitePoint SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. You’ll find a stack of information on JavaScript, PHP, Ruby, mobile development, design, and more. To Helen - thanks for always being there for me.

Preface In the preface to the first edition of this book, I talked about the ubiquity of JavaScript and its exponential growth. This shows no signs of slowing down as the second edition is published. In fact, there is a new phenomenon known as “JavaScript fatigue” that is used to describe the unrelenting barrage of new JavaScript tools and methodologies that are constantly appearing. In my view, this shouldn’t be viewed as a negative, it’s just a sign that the JavaScript landscape is a fertile one, and that will mean an ever-expanding list of new tools and libraries. Most of these help to take the language forward and make it better, and eventually these ideas make it into the official language. There’s now a new version of JavaScript scheduled for release every year. And, with each passing year, and each new version, the language becomes more powerful and mature, capable of building complex applications. It’s still not perfect, but it’s getting better all the time. While I was halfway through writing this second edition, I read somewhere that print books about JavaScript programming are pointless because they are out of date by the time they are published. On the one hand, I can appreciate this. The first edition of this book didn't use ES6 notation, which seemed to be a good idea at the time as it had only just become a standard, and hardly any browsers supported it. But ES6 quickly gained traction due to Node.js, and tools such as Babel bypassed the need for browser support. This meant that some of the code in the first edition appeared dated almost immediately after it was published. In this edition, I tried to avoid this happening by using the most up-to-date notation of the language, and removing most of the references to browser support. And, on the other hand, it doesn't matter, because, despite the unrelenting pace the JavaScript world moves at, the basic principles of programming don't change. This book is as much about learning to program as it is about learning JavaScript and, as in the first edition, it will teach you about fundamental programming principles. The way they are implemented might change, but the basic theory remains the same. I feel that JavaScript is an excellent choice of language for learning these techniques, particularly because of how easy it is to access – you can run a program from within your browser, without the need for installing any special software!

It’s an exciting time to be programming JavaScript, and it’s never too late to learn. In fact, if you are only just beginning to learn, you are lucky, as you’ll be able to ignore all its baggage from the past and focus on the exciting language it has become. Whatever level you’re at, I hope you get something from this book and enjoy programming in the language of the web! The aim of this book is to introduce you to programming using the JavaScript language, eventually helping you to develop into a JavaScript ninja. This is an exciting time to be learning JavaScript, having finally outgrown its early reputation as a basic scripting language used to produce cringeworthy effects on web pages. Today, JavaScript is used to produce professional and powerful web applications. Modern browsers are now capable of running JavaScript code at lightning speed, and Node.js has helped to revolutionize it by facilitating its use in other environments. This has led to a much more professional and structured approach to building JavaScript applications, where it is now considered a fully-fledged programming language. In short, JavaScript has grown up. JavaScript has a number of cool features that make it stand out from other languages, such as callbacks, first-class functions, prototypal inheritance, and closures. Its event-based model also makes it a very good choice for modern web application development. JavaScript’s ace in the pack, though, is something of which every language is envious ― its *ubiquity*. JavaScript is available almost everywhere; anybody who has access to a browser can use it. And this is increasing every year as it becomes more readily available outside the browser environment. This translates into JavaScript’s reach being immense: it is already the [most popular language on GitHub I can only see JavaScript growing even more popular in the future as it becomes the language of choice for the Internet of Things — helping to control household appliances, and even program robots. Before I get carried away, though, I should point out that JavaScript is far from perfect. It is missing some important programming constructs, such as modules and private functions, which are considered standard in many modern programming languages. Yet it’s also an unbelievably flexible language, where many of these gaps can be filled using the tools that it provides. In addition, many libraries have sprung into existence that help to

extend JavaScript so that it’s now able to reach its full potential. This book starts off with the basics, assuming no programming or JavaScript knowledge, but quickly gets up to speed covering all the main topics in great depth, such as functions, objects, and DOM manipulation. More advanced topics, such as error handling and testing, functional programming and OOP, are then introduced after the basics have been covered. There have been some exciting new developments in the world of JavaScript over the last few years, such as Ajax, HTML5 APIs and task runners, and these are covered in the last part of the book. There’s also a practical project to build a quiz application that is developed throughout the book towards the end of each chapter. I’ve written with developing for modern browsers in mind, so I’ve always tried to use the most up-to-date methods in the examples. Having said that, I’ve also tried to acknowledge if something might not work in an older browser, or if a workaround is needed. It’s a long way ahead ― 16 chapters, to be precise. But remember, every ninja’s journey starts with a single page (or something like that, anyway). So, turn the page and let’s get started!

Who Should Read This Book This book is suitable for beginner-level web designers and developers. Some knowledge of HTML and CSS is assumed, but no previous programming experience is necessary.

Conventions Used You’ll notice that we’ve used certain typographic and layout styles throughout this book to signify different types of information. Look out for the following items. Code Samples Code in this book is displayed using a fixed-width font, like so: <h1>A Perfect Summer's Day</h1> <p>It was a lovely day for a walk in the park. The birds were singing and the kids were all back at school.</p> Some lines of code should be entered on one line, but we’ve had to wrap them because of page constraints. An ➥ indicates a line break that exists for formatting purposes only, and should be ignored: URL.open("http://www.sitepoint.com/responsive-web-design-real-user-testing/?responsive1"); Tips, Notes, and Warnings Hey, You! Tips provide helpful little pointers. Ahem, Excuse Me ... Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information. Make Sure You Always ...

... pay attention to these important points. Watch Out! Warnings highlight any gotchas that are likely to trip you up along the way.

Supplementary Materials https://github.com/spbooks/jsninja2 contains the book's code archive. https://www.sitepoint.com/community/ are SitePoint’s forums, for help on any tricky web problems. books@sitepoint.com is our email address, should you need to contact us to report a problem, or for any other reason.

Chapter 1: Hello, JavaScript 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! Here’s what this chapter will cover: What is programming? The history of JavaScript The tools that are needed to program in JavaScript Installing Node.js JavaScript in the console Hello, world! Your first JavaScript program JavaScript in the web browser Graceful degradation and progressive enhancement A more complicated JavaScript program Project - we'll start a quiz project that will be developed throughout the book

Programming Programming is about making computers do what you want. A computer program is basically a series of instructions that tell your computer how to perform a task. Unfortunately, though, computers don’t speak the same language as us ― they only use 1s and 0s. The first computers were programmed using punched cards, with a hole representing a 1 and no hole representing 0. The first computer programs were written in machine code and assembly language. These are low-level programming languages that are closely associated with a computer’s hardware. This means they can be difficult languages to program in because they involve writing abstract code that is heavily tied to a computer’s architecture. If speed is very important, however, then writing in machine code or assembly language can be the best option. High-level programming languages, on the other hand, allow abstractions to be used that make the code easier for humans to read and write. Programs are written in a language such as C, C++ or Java, which is then compiled into machine code and executed. The programs written using these languages are very fast, making high-level languages suited to writing games and professional business software where speed is important. Most native apps are also written in higher-level languages. Scripting languages are also high-level, but they are interpreted, which means they are translated into machine code at run time. This often makes them slower than compiled languages, although interpreters are becoming ever more sophisticated, and increasingly blurring the lines between compiled and interpreted languages.

JavaScript The language we’ll be learning in this book is JavaScript, often referred to as the language of the web. Nearly all web browsers can run JavaScript, making it one of the most popular programming languages in the world. It has a low barrier to entry ― all you need to program in JavaScript is a text editor and a web browser. Although it is easy to get started, JavaScript can be a tricky language to grasp as it has some unique features and interesting quirks. Once you have mastered it, though, you’ll find it is a very flexible and expressive language that can create some powerful applications. JavaScript is a high-level scripting language that is interpreted and compiled at run time. This means it requires an engine that's responsible for interpreting a program and running it. The most common JavaScript engines are found in browsers such as Firefox, Chrome or Safari, although JavaScript can be run without a browser using an engine such as Google V8. Many modern JavaScript engines use a Just-In-Time (JIT) interpreting process, which considerably speeds up the compilation, making programs run faster. JavaScript is also a dynamic language, so elements of a program can change while it's running, and it can do lots of things in the background at run time (such as type checking, which we'll cover later) ― things that a compiled language like C++ would do at compile time.

The History of JavaScript The World Wide Web started life as a bunch of pages linked by hyperlinks. Users soon wanted more interaction with these pages, so Netscape (an early browser vendor) asked one of their employees, Brendan Eich, to develop a new language for their Navigator browser. This needed to be done quickly because of the intense competition between Netscape and Microsoft at the time. Eich managed to create a prototype scripting language in just 10 days. To do this, he borrowed various elements from other languages, including AWK, Java, Perl, Scheme, HyperTalk and Self. This was an impressive feat, but in the rush to be first to market, a number of quirks and bugs ended up in the language that were never fully addressed. The new language was originally called Mocha, but it was changed to LiveScript, then hastily rebranded as JavaScript so it could benefit from the publicity that Sun Microsystem’s Java language was attracting at the time. This name has often caused some confusion, with JavaScript often considered a lighter version of Java. However, the two languages are unrelated ― though JavaScript does have syntactical similarities to Java. JavaScript made its debut in version 2 of Netscape’s Navigator browser in 1995. The following year, Microsoft reverse-engineered JavaScript to create their own version, calling it JScript to avoid copyright issues with Sun Microsystems, who owned the Java trademark. JScript shipped with version 3 of the Internet Explorer browser, and was almost identical to JavaScript ― it even included all the same bugs and quirks ― but it did have some extra Internet Explorer-only features. Microsoft included another scripting language called VBScript with Internet Explorer at the same time. JavaScript (and JScript) was immediately popular. It had a low barrier to entry and was relatively easy to learn, which meant an explosion in its usage for making web pages dynamic and more interactive. Unfortunately, its low barrier was also a curse ― many people were now writing snippets of code

without understanding what they were doing. Code could now be easily copied and pasted, and was often used incorrectly, leading to lots of poor examples appearing all over the web. JavaScript was also frequently used to create annoying pop-up adverts, as well as for 'browser sniffing' (the process of detecting which browser was being used to view a web page). It had started to gain a negative reputation.

The Browser Wars By the time Netscape Navigator 4 and Internet Explorer 4 were released, JavaScript had become incredibly popular. Microsoft had started a lot of hype about the term Dynamic HTML, or DHTML for short, to refer to the use of JavaScript to make HTML more interactive and dynamic. In an attempt to capitalize on this popularity, Netscape and Microsoft tried to add new proprietary features, which lead to different syntaxes being used. This 'arms race' of adding new features became known as the 'Browser Wars'. The unfortunate downside was that programmers had to write two versions of code to achieve the same results in each browser. Professional programmers often dismissed JavaScript as a toy language, unsuitable for any serious programming, but this was unfair criticism ― the language wasn’t the problem, it was the way it was being used. Eventually, Microsoft won the browser wars and Internet Explorer emerged as the dominant browser. Support for standards also increased, helped largely by the efforts of the Web Standards Project (WaSP). Developer and browser vendors started to work together and embrace the standards laid out by the World Wide Web Consortium (W3C) and ECMA. The open-source web browser, Firefox, debuted in 2002, and Apple launched the Safari browser in 2003. Both had strong standards support, which meant developers were able to produce better web applications using JavaScript that behaved consistently across different browsers.