Beginning JavaScript The Ultimate Guide to Modern JavaScript Development Third Edition Russ Ferguson
Beginning JavaScript Russ Ferguson Ocean, NJ, USA ISBN-13 (pbk): 978-1-4842-4394-7 ISBN-13 (electronic): 978-1-4842-4395-4 https://doi.org/10.1007/978-1-4842-4395-4 Copyright © 2019 by Russ Ferguson This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: Louise Corrigan Development Editor: James Markham Coordinating Editor: Nancy Chen Cover designed by eStudioCalamar Cover image designed by Freepik (www.freepik.com) Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer- sbm.com, or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail [email protected], or visit www.apress.com/ rights-permissions. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book's product page, located at www.apress.com/9781484243947. For more detailed information, please visit www.apress.com/source-code. Printed on acid-free paper
This space is dedicated to my brother, Rodd, and my Dad. If not for my Dad, none of this would be possible. Thanks, Dad. —Russ
Table of Contents About the Author����������������������������������������������������������������������������������������������������� ix About the Technical Reviewer��������������������������������������������������������������������������������� xi Acknowledgments������������������������������������������������������������������������������������������������� xiii Chapter 1: Introduction to JavaScript���������������������������������������������������������������������� 1 The Why of JavaScript������������������������������������������������������������������������������������������������������������������ 2 What Is JavaScript?���������������������������������������������������������������������������������������������������������������������� 2 JavaScript in a Web Page and Essential Syntax��������������������������������������������������������������������������� 3 JavaScript Syntax�������������������������������������������������������������������������������������������������������������������� 4 Code Execution������������������������������������������������������������������������������������������������������������������������ 5 Functions�������������������������������������������������������������������������������������������������������������������������������������� 7 Objects������������������������������������������������������������������������������������������������������������������������������������������ 8 Summary������������������������������������������������������������������������������������������������������������������������������������ 10 Chapter 2: JavaScript and Development Tools������������������������������������������������������� 11 Tutorials and Resources�������������������������������������������������������������������������������������������������������������� 11 Integrated Development Environments��������������������������������������������������������������������������������� 12 Node.js����������������������������������������������������������������������������������������������������������������������������������� 14 Version Control Systems�������������������������������������������������������������������������������������������������������� 17 Summary������������������������������������������������������������������������������������������������������������������������������������ 24 Chapter 3: JavaScript Variables����������������������������������������������������������������������������� 25 Declaring Variables in JavaScript����������������������������������������������������������������������������������������������� 25 Reassigning Variables in JavaScript������������������������������������������������������������������������������������������� 27 Variables That Can’t Be Reassigned������������������������������������������������������������������������������������������� 28 Variables That Can Only Be Used in a Single Code Block����������������������������������������������������������� 29 Variable Hoisting������������������������������������������������������������������������������������������������������������������������� 31 v
Table of Contents Strict Mode��������������������������������������������������������������������������������������������������������������������������������� 33 Summary������������������������������������������������������������������������������������������������������������������������������������ 34 Chapter 4: JavaScript Objects and Arrays�������������������������������������������������������������� 35 Host Object or Native Object������������������������������������������������������������������������������������������������������� 36 Explaining Objects���������������������������������������������������������������������������������������������������������������������� 37 Introduction to the Document Object������������������������������������������������������������������������������������������ 37 Arrays and Stacks����������������������������������������������������������������������������������������������������������������������� 39 Getting the Length of an Array���������������������������������������������������������������������������������������������������� 40 Using Loops and Filters��������������������������������������������������������������������������������������������������������� 41 Summary������������������������������������������������������������������������������������������������������������������������������������ 44 Chapter 5: JavaScript Functions and Context�������������������������������������������������������� 45 Making a Function Declaration��������������������������������������������������������������������������������������������������� 45 Using Arrow Functions���������������������������������������������������������������������������������������������������������������� 47 How Does the Keyword this Work?��������������������������������������������������������������������������������������������� 48 Using the call, apply, and bind Methods�������������������������������������������������������������������������������������� 51 Understanding Closures�������������������������������������������������������������������������������������������������������������� 53 Summary������������������������������������������������������������������������������������������������������������������������������������ 56 Chapter 6: JavaScript and Events�������������������������������������������������������������������������� 57 Using preventDefault ����������������������������������������������������������������������������������������������������������������� 60 Event Propagation ���������������������������������������������������������������������������������������������������������������������� 62 Creating Custom Events�������������������������������������������������������������������������������������������������������� 65 Summary������������������������������������������������������������������������������������������������������������������������������������ 66 Chapter 7: JavaScript and Programming Paradigms��������������������������������������������� 69 Object-Oriented Programming with JavaScript�������������������������������������������������������������������������� 69 Children of the Atom�������������������������������������������������������������������������������������������������������������� 72 JavaScript Classes and Prototypical Inheritance������������������������������������������������������������������ 74 Functional Programming with JavaScript����������������������������������������������������������������������������� 76 Pure Functions����������������������������������������������������������������������������������������������������������������������� 77 Side Effects/Shared State����������������������������������������������������������������������������������������������������� 78 vi
Table of Contents Immutability��������������������������������������������������������������������������������������������������������������������������� 78 Declarative Over Imperative Code����������������������������������������������������������������������������������������� 79 Summary������������������������������������������������������������������������������������������������������������������������������������ 80 Chapter 8: JavaScript and Debugging�������������������������������������������������������������������� 83 The Console Panel����������������������������������������������������������������������������������������������������������������������� 84 The Sources Panel���������������������������������������������������������������������������������������������������������������������� 90 Summary������������������������������������������������������������������������������������������������������������������������������������ 97 Chapter 9: JavaScript and Client-Side Development���������������������������������������������� 99 What Exactly Is NodeJS?������������������������������������������������������������������������������������������������������������ 99 Node on the Client Side������������������������������������������������������������������������������������������������������������ 100 Using package.json for Your Project����������������������������������������������������������������������������������������� 101 Adding Libraries to package.json���������������������������������������������������������������������������������������������� 103 Introduction to Module Bundlers (Webpack)����������������������������������������������������������������������������� 106 Adding webpack-dev-server����������������������������������������������������������������������������������������������������� 110 Adding Babel.js������������������������������������������������������������������������������������������������������������������������� 111 Adding HTML and CSS Loaders������������������������������������������������������������������������������������������������� 113 Summary���������������������������������������������������������������������������������������������������������������������������������� 118 Chapter 10: JavaScript and Server- Side Development���������������������������������������� 121 Basic Express Setup����������������������������������������������������������������������������������������������������������������� 122 Adding nodemon and Routes to the Express App��������������������������������������������������������������������� 123 Creating Routes with NodeJS��������������������������������������������������������������������������������������������������� 124 Setting Up a Local Instance of MySQL�������������������������������������������������������������������������������������� 127 Returning Data from MySQL Using NodeJS������������������������������������������������������������������������������ 129 Summary���������������������������������������������������������������������������������������������������������������������������������� 134 Chapter 11: JavaScript and Application Frameworks: Angular��������������������������� 135 Installing Angular���������������������������������������������������������������������������������������������������������������������� 136 What Is TypeScript?������������������������������������������������������������������������������������������������������������������� 136 Developing an Angular Application������������������������������������������������������������������������������������������� 137 Angular’s Architecture��������������������������������������������������������������������������������������������������������������� 141 vii
Table of Contents Creating an Angular Service����������������������������������������������������������������������������������������������������� 144 Updating Your Angular Service�������������������������������������������������������������������������������������������������� 147 Creating a Proxy for Your Local Angular Application����������������������������������������������������������������� 150 Adding Twitter Bootstrap to Your Angular Application��������������������������������������������������������������� 154 Creating a Simple Form in Angular and Style It with Bootstrap������������������������������������������������ 156 Passing Information from Angular to Node������������������������������������������������������������������������������� 159 Summary���������������������������������������������������������������������������������������������������������������������������������� 163 Chapter 12: JavaScript and Application Frameworks: React������������������������������� 165 Adding a Proxy and Retrieving Data������������������������������������������������������������������������������������������ 169 Creating, Updating, and Displaying State in a React Component���������������������������������������������� 171 Adding Bootstrap to React�������������������������������������������������������������������������������������������������������� 175 Posting Data from a React Application�������������������������������������������������������������������������������������� 176 Adding Strong Types to Your React Application������������������������������������������������������������������������� 182 Adding Types to Your React Code���������������������������������������������������������������������������������������������� 184 Summary���������������������������������������������������������������������������������������������������������������������������������� 185 Chapter 13: JavaScript and Static Deployment���������������������������������������������������� 187 Developing an Angular Application and Connecting It to GitHub����������������������������������������������� 187 Using the Angular Router���������������������������������������������������������������������������������������������������������� 190 Using Angular Services������������������������������������������������������������������������������������������������������������� 195 Deploying a Static Site to Netlify���������������������������������������������������������������������������������������������� 199 Summary���������������������������������������������������������������������������������������������������������������������������������� 201 Index��������������������������������������������������������������������������������������������������������������������� 203 viii
About the Author Russ Ferguson is a freelance developer and instructor in the New York City area. He has worked with companies of all sizes, from startups to some of the largest organizations in the world. These companies have spanned industries including cable television, book publishing, finance, and advertising. He has worked on projects for companies like Bank of America, General Mills, LG, Viacom, and DC Comics. ix
About the Technical Reviewer Toby Jee is software programmer currently located in Sydney, Australia. He loves Linux and open source projects. He programs mainly in Java, JavaScript, TypeScript, and Python. In his spare time, Toby enjoys walkabouts, reading, and playing guitar. xi
Acknowledgments I need to thank everyone at Apress for working with me and keeping me on course to get this book finished. Nancy, Toby, Louise, James, and Jade, thank you. xiii
Search
Read the Text Version
- 1 - 10
Pages: