A L L - I N - O N E 2nd Edition Chris Minnick, et al. Coding A L L - I N - O N E $41.99 USA / $49.99 CAN / £28.99 UK Minnick, et al. Cover Image: © shutterstock/antoniodiaz This All-in-One includes work by expert coders and coding educators, including Chris Minnick and Eva Holland coauthors of Coding with JavaScript For Dummies; Nikhil Abraham, author of Coding For Dummies and Getting a Coding Job For Dummies; John Paul Mueller and Luca Massaron, coauthors of Python for Data Science For Dummies and Machine Learning For Dummies; and Barry Burd, author of Flutter For Dummies. Define your function as a coder A little coding knowledge can go a long way. It can help launch you on the path to becoming a software developer or upgrade your reputation among your co-workers as a tech guru. This book helps you dig into languages like HTML, CSS, JavaScript, and Python as you learn to design websites, create web and mobile apps, and analyze and visualize data. You even get some insight on how to translate your newfound skills into a career. From aspiring code wranglers to professionals who want to start coding on the job, this book has your back. Computers Programming/General Coding 2nd Edition 7 Mini-Books Inside... • Getting Started with Coding • Basic Web Coding • Advanced Web Coding • Creating Mobile Apps • Getting Started with Python • Data Analysis with Python • Career Building with Coding 0005390112.INDD i Trim size: 7.375 in × 9.25 in June 11, 2022 4:44 PM Coding A L L - I N - O N E 0005390112.INDD ii Trim size: 7.375 in × 9.25 in June 11, 2022 4:44 PM 0005390112.INDD iii Trim size: 7.375 in × 9.25 in June 11, 2022 4:44 PM 0005390112.INDD iii Trim size: 7.375 in × 9.25 in June 11, 2022 4:44 PM Coding A L L - I N - O N E 2nd Edition by Chris Minnick, Nikhil Abraham, Barry Burd, Eva Holland, Luca Massaron, and John Paul Mueller 0005390112.INDD iv Trim size: 7.375 in × 9.25 in June 11, 2022 4:44 PM Coding All-in-One For Dummies ® , 2nd Edition Published by: John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, www.wiley.com Copyright © 2022 by John Wiley & Sons, Inc., Hoboken, New Jersey Media and software compilation copyright © 2022 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 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: WHILE THE PUBLISHER AND AUTHORS HAVE USED THEIR BEST EFFORTS IN PREPARING THIS WORK, THEY 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 ANY IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES REPRESENTATIVES, WRITTEN SALES MATERIALS OR PROMOTIONAL STATEMENTS FOR THIS WORK. THE FACT THAT AN ORGANIZATION, WEBSITE, OR PRODUCT IS REFERRED TO IN THIS WORK AS A CITATION AND/ OR POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE PUBLISHER AND AUTHORS ENDORSE THE INFORMATION OR SERVICES THE ORGANIZATION, WEBSITE, OR PRODUCT MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING PROFESSIONAL SERVICES. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR YOUR SITUATION. YOU SHOULD CONSULT WITH A SPECIALIST WHERE APPROPRIATE. FURTHER, READERS SHOULD BE AWARE THAT WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ. NEITHER THE PUBLISHER NOR AUTHORS SHALL BE LIABLE FOR ANY LOSS OF PROFIT OR ANY OTHER COMMERCIAL DAMAGES, INCLUDING BUT NOT LIMITED TO SPECIAL, INCIDENTAL, CONSEQUENTIAL, OR OTHER DAMAGES. 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 https://hub.wiley.com/community/support/dummies 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: 2022939031 ISBN 978-1-119-88956-4 (pbk); 978-1-119-88957-1 (epub); 978-1-119-89535-0 (epdf) 0005390115.INDD v Trim size: 7.375 in × 9.25 in June 11, 2022 4:46 PM Contents at a Glance Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Book 1: Getting Started with Coding . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 CHAPTER 1: What Is Coding? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 CHAPTER 2: Programming for the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 CHAPTER 3: Becoming a Programmer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Book 2: Basic Web Coding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 CHAPTER 1: Exploring Basic HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 CHAPTER 2: Getting More Out of HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 CHAPTER 3: Getting Stylish with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 CHAPTER 4: Next Steps with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 CHAPTER 5: Responsive Layouts with Flexbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 CHAPTER 6: Styling with Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Book 3: Advanced Web Coding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 CHAPTER 1: What Is JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 CHAPTER 2: Writing Your First JavaScript Program . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 CHAPTER 3: Working with Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 CHAPTER 4: Understanding Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 CHAPTER 5: Working with Operators, Expressions, and Statements . . . . . . . . . . . . 225 CHAPTER 6: Getting into the Flow with Loops and Branches . . . . . . . . . . . . . . . . . . . 241 CHAPTER 7: Getting Functional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 CHAPTER 8: Making and Using Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 CHAPTER 9: Controlling the Browser with the Window Object . . . . . . . . . . . . . . . . . 291 CHAPTER 10: Manipulating Documents with the DOM . . . . . . . . . . . . . . . . . . . . . . . . . 307 CHAPTER 11: Using Events in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327 CHAPTER 12: Integrating Input and Output . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339 CHAPTER 13: Understanding Callbacks and Closures . . . . . . . . . . . . . . . . . . . . . . . . . . 355 CHAPTER 14: Embracing AJAX and JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367 Book 4: Creating Mobile Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383 CHAPTER 1: What Is Flutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385 CHAPTER 2: Setting Up Your Computer for Mobile App Development . . . . . . . . . . . 401 CHAPTER 3: “Hello” from Flutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433 CHAPTER 4: Hello Again . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469 CHAPTER 5: Making Things Happen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495 0005390115.INDD vi Trim size: 7.375 in × 9.25 in June 11, 2022 4:46 PM CHAPTER 6: Laying Things Out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527 CHAPTER 7: Interacting with the User. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567 CHAPTER 8: Navigation, Lists, and Other Goodies . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605 CHAPTER 9: Moving Right Along . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 653 Book 5: Getting Started with Python . . . . . . . . . . . . . . . . . . . . . . . . . 675 CHAPTER 1: Wrapping Your Head around Python . . . . . . . . . . . . . . . . . . . . . . . . . . . . 677 CHAPTER 2: Installing a Python Distribution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 689 CHAPTER 3: Working with Real Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 707 Book 6: Data Analysis with Python . . . . . . . . . . . . . . . . . . . . . . . . . . . 729 CHAPTER 1: Conditioning Your Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 731 CHAPTER 2: Shaping Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 759 CHAPTER 3: Getting a Crash Course in MatPlotLib . . . . . . . . . . . . . . . . . . . . . . . . . . . . 779 CHAPTER 4: Visualizing the Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 795 Book 7: Career Building with Coding . . . . . . . . . . . . . . . . . . . . . . . . . 813 CHAPTER 1: Exploring Coding Career Paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 815 CHAPTER 2: Exploring Undergraduate and Graduate Degrees . . . . . . . . . . . . . . . . . 829 CHAPTER 3: Training on the Job . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 843 CHAPTER 4: Coding Career Myths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 853 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 861 Table of Contents vii 0005390115.INDD vii Trim size: 7.375 in × 9.25 in June 11, 2022 4:46 PM Table of Contents INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 About This Book. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Foolish Assumptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Icons Used in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Beyond the Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Where to Go from Here . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 BOOK 1: GETTING STARTED WITH CODING . . . . . . . . . . . . . . . . . . 5 CHAPTER 1: What Is Coding? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Defining What Code Is . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Following instructions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Writing code with some Angry Birds. . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Understanding What Coding Can Do for You . . . . . . . . . . . . . . . . . . . . .10 Eating the world with software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10 Coding on the job . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12 Scratching your own itch (and becoming rich and famous) . . . . . .13 Surveying the Types of Programming Languages . . . . . . . . . . . . . . . . .13 Comparing low-level and high-level programming languages . . . .14 Contrasting compiled code and interpreted code . . . . . . . . . . . . . .15 Programming for the web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16 Taking a Tour of a Web App Built with Code . . . . . . . . . . . . . . . . . . . . . .16 Defining the app’s purpose and scope . . . . . . . . . . . . . . . . . . . . . . . .16 Standing on the shoulders of giants . . . . . . . . . . . . . . . . . . . . . . . . . .17 CHAPTER 2: Programming for the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Displaying Web Pages on Your Desktop and Mobile Device . . . . . . . . .20 Hacking your favorite news website . . . . . . . . . . . . . . . . . . . . . . . . . .20 Understanding how the World Wide Web works . . . . . . . . . . . . . . .23 Watching out for your frontend and backend. . . . . . . . . . . . . . . . . .24 Defining web and mobile applications . . . . . . . . . . . . . . . . . . . . . . . .25 Coding Web Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26 Starting with HTML, CSS, and JavaScript . . . . . . . . . . . . . . . . . . . . . .26 Adding logic with Python, Ruby, or PHP . . . . . . . . . . . . . . . . . . . . . . .27 Coding Mobile Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28 Building mobile web apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29 Building native mobile apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30 Deploying Web Applications in the Cloud . . . . . . . . . . . . . . . . . . . . . . . .31 0005390115.INDD viii Trim size: 7.375 in × 9.25 in June 11, 2022 4:46 PM viii Coding All-in-One For Dummies CHAPTER 3: Becoming a Programmer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Writing Code Using a Process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34 Researching what you want to build . . . . . . . . . . . . . . . . . . . . . . . . .35 Designing your app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .36 Coding your app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37 Debugging your code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38 Picking Tools for the Job . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39 Working offline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39 Working online with CodeSandbox.io . . . . . . . . . . . . . . . . . . . . . . . .40 BOOK 2: BASIC WEB CODING . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 CHAPTER 1: Exploring Basic HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 What Does HTML Do? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46 Understanding HTML Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47 Identifying elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47 Featuring your best attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49 Standing head, title, and body above the rest . . . . . . . . . . . . . . . . .50 Getting Familiar with Common HTML Tasks and Elements . . . . . . . . .52 Writing headlines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .53 Organizing text in paragraphs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54 Linking to your (heart’s) content . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55 Adding images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56 Styling Me Pretty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .58 Highlighting with bold, italics, underline, and strikethrough . . . . .58 Raising and lowering text with superscript and subscript. . . . . . . .59 Building Your First Website Using HTML . . . . . . . . . . . . . . . . . . . . . . . . .60 CHAPTER 2: Getting More Out of HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Organizing Content on the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .64 Listing Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .66 Creating ordered and unordered lists . . . . . . . . . . . . . . . . . . . . . . . .66 Nesting lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67 Putting Data in Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68 Basic table structuring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69 Stretching table columns and rows . . . . . . . . . . . . . . . . . . . . . . . . . .70 Aligning tables and cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72 Filling Out Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75 Understanding how forms work . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75 Creating basic forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76 Practicing More with HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78 Table of Contents ix 0005390115.INDD ix Trim size: 7.375 in × 9.25 in June 11, 2022 4:46 PM CHAPTER 3: Getting Stylish with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 What Does CSS Do? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79 CSS Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .81 Choosing the element to style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .81 My property has value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83 Hacking the CSS on your favorite website . . . . . . . . . . . . . . . . . . . . .84 Common CSS Tasks and Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86 Font gymnastics: Size, color, style, family, and decoration . . . . . . .86 Customizing links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90 Adding background images and styling foreground images . . . . .93 Getting Stylish . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .97 Adding CSS to your HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .97 Practicing with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99 CHAPTER 4: Next Steps with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Styling (More) Elements on Your Page . . . . . . . . . . . . . . . . . . . . . . . . . .102 Styling lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102 Designing tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105 Selecting Elements to Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107 Styling specific elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107 Naming HTML elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112 Aligning and Laying Out Your Elements . . . . . . . . . . . . . . . . . . . . . . . . .113 Organizing data on the page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114 Shaping the div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116 Understanding the box model. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117 Positioning the boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119 Writing More Advanced CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122 CHAPTER 5: Responsive Layouts with Flexbox . . . . . . . . . . . . . . . . . . . 123 Introducing Responsive Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124 The web is mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124 Why are so many sites mobile-unfriendly? . . . . . . . . . . . . . . . . . . .124 Introducing mobile-first design . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124 Making responsive web pages with the viewport meta tag . . . . .125 Using Flexbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128 Creating boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129 Thinking in one dimension . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130 Using multi-line containers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .133 Make no assumptions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .134 Aligning on the cross-axis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .134 Aligning on the main axis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .136 Modifying flexible boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .137 Changing the order of items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139 Experimenting with Flexbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .140 0005390115.INDD x Trim size: 7.375 in × 9.25 in June 11, 2022 4:46 PM x Coding All-in-One For Dummies CHAPTER 6: Styling with Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Figuring Out What Bootstrap Does . . . . . . . . . . . . . . . . . . . . . . . . . . . . .144 Installing Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .145 Understanding the Layout Options . . . . . . . . . . . . . . . . . . . . . . . . . . . .147 Lining up on the grid system . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .147 Dragging and dropping to a website . . . . . . . . . . . . . . . . . . . . . . . .150 Using predefined templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151 Adapting layout for mobile, tablet, and desktop . . . . . . . . . . . . . .151 Coding Basic Web Page Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153 Designing buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153 Navigating with toolbars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155 Adding icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .157 Practicing with Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .158 BOOK 3: ADVANCED WEB CODING . . . . . . . . . . . . . . . . . . . . . . . . . . 159 CHAPTER 1: What Is JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 What Is JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .161 The Eich-man cometh . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .162 Mocha-licious . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163 We need more effects! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163 JavaScript Grows Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164 Dynamic scripting language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .165 What does JavaScript do? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166 Why JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .167 JavaScript is easy to learn! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .168 JavaScript is everywhere! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169 JavaScript is powerful! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .172 JavaScript is in demand! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .172 CHAPTER 2: Writing Your First JavaScript Program . . . . . . . . . . . . . . 173 Setting Up Your Development Environment . . . . . . . . . . . . . . . . . . . . .173 Downloading and installing Chrome . . . . . . . . . . . . . . . . . . . . . . . .174 Downloading and installing a code editor . . . . . . . . . . . . . . . . . . . .174 Reading JavaScript Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .181 Running JavaScript in the Browser Window . . . . . . . . . . . . . . . . . . . . .182 Using JavaScript in an HTML event attribute . . . . . . . . . . . . . . . . . .182 Using JavaScript in a script element . . . . . . . . . . . . . . . . . . . . . . . . .183 Including external JavaScript files . . . . . . . . . . . . . . . . . . . . . . . . . . .185 Using the JavaScript Developer Console . . . . . . . . . . . . . . . . . . . . . . . .188 Commenting Your Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189 Single-line comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .190 Multi-line comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .190 Using comments to prevent code execution . . . . . . . . . . . . . . . . . .191 Table of Contents xi 0005390115.INDD xi Trim size: 7.375 in × 9.25 in June 11, 2022 4:46 PM CHAPTER 3: Working with Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Understanding Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193 Initializing Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195 Understanding Global and Local Scope . . . . . . . . . . . . . . . . . . . . . . . . .197 Naming Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199 Creating Constants Using the const Keyword . . . . . . . . . . . . . . . . . . . .201 Working with Data Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .202 Number data type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .202 bigInt data type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .205 String data type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .205 Boolean data type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .208 NaN data type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .209 Undefined data type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .210 Symbol data type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .210 CHAPTER 4: Understanding Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Making a List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .211 Array Fundamentals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .213 Arrays are zero-indexed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .213 Arrays can store any type of data . . . . . . . . . . . . . . . . . . . . . . . . . . .214 Creating Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .215 Using the new keyword method . . . . . . . . . . . . . . . . . . . . . . . . . . . .215 Array literal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .215 Populating Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .215 Understanding Multidimensional Arrays . . . . . . . . . . . . . . . . . . . . . . . .216 Accessing Array Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .218 Looping through arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .219 Array properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .220 Array methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .220 Using array methods. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222 CHAPTER 5: Working with Operators, Expressions, and Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Express Yourself . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226 Hello, Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226 Operator precedence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226 Using parentheses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .227 Types of Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .230 Assignment operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .230 Comparison operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .231 Arithmetic operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .231 String operator. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .234 Bitwise operators. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .234 Logical operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .236 0005390115.INDD xii Trim size: 7.375 in × 9.25 in June 11, 2022 4:46 PM xii Coding All-in-One For Dummies Special operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .237 Combining operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239 CHAPTER 6: Getting into the Flow with Loops and Branches . . . 241 Branching Out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .241 if . . . else statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .242 Switch statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .243 Here We Go: Loop De Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246 for loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246 for . . . in loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248 while loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .251 do . . . while loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .252 break and continue statements . . . . . . . . . . . . . . . . . . . . . . . . . . . .253 CHAPTER 7: Getting Functional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 Understanding the Function of Functions . . . . . . . . . . . . . . . . . . . . . . .255 Using Function Terminology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .257 Defining a function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .257 Function head . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .257 Function body . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .257 Calling a function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .258 Defining parameters and passing arguments . . . . . . . . . . . . . . . . .258 Returning a value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .258 The Benefits of Using Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .258 Writing Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .262 Returning Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .263 Passing and Using Arguments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .264 Passing arguments by value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .265 Passing arguments by reference . . . . . . . . . . . . . . . . . . . . . . . . . . . .267 Calling a function without all the arguments . . . . . . . . . . . . . . . . .267 Setting default parameter values . . . . . . . . . . . . . . . . . . . . . . . . . . .267 Calling a function with more arguments than parameters . . . . . .268 Getting into arguments with the arguments object . . . . . . . . . . . .268 Understanding Function Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .269 Creating Anonymous Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270 Knowing the differences between anonymous and named functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270 Arrow functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270 Doing it Again with Recursion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .271 Functions within Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .273 CHAPTER 8: Making and Using Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Object of My Desire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .275 Creating Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .277 Table of Contents xiii 0005390115.INDD xiii Trim size: 7.375 in × 9.25 in June 11, 2022 4:46 PM Defining objects with object literals . . . . . . . . . . . . . . . . . . . . . . . . .277 Defining objects with a constructor function . . . . . . . . . . . . . . . . .278 Making objects with class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .279 Using Object.create . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .280 Retrieving and Setting Object Properties . . . . . . . . . . . . . . . . . . . . . . . .280 Using dot notation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .281 Using square bracket notation . . . . . . . . . . . . . . . . . . . . . . . . . . . . .281 Deleting Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .283 Working with Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .284 Using this . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .286 An Object-Oriented Way to Become Wealthy: Inheritance . . . . . . . . .287 Creating an object using inheritance . . . . . . . . . . . . . . . . . . . . . . . .288 Modifying an object type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .289 CHAPTER 9: Controlling the Browser with the Window Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 Understanding the Browser Environment . . . . . . . . . . . . . . . . . . . . . . .291 The user interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .292 Loader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293 HTML parsing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .294 CSS parsing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .294 JavaScript parsing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .294 Layout and rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .295 Investigating the BOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .295 The Navigator object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .295 The Window object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .298 Using the Window object’s methods . . . . . . . . . . . . . . . . . . . . . . . .304 CHAPTER 10: Manipulating Documents with the DOM . . . . . . . . . . . 307 Understanding the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307 Understanding Node Relationships . . . . . . . . . . . . . . . . . . . . . . . . . . . .309 Using the Document Object’s Properties and Methods . . . . . . . . . . .314 Using the Element Object’s Properties and Methods . . . . . . . . . . . . .316 Working with the Contents of Elements . . . . . . . . . . . . . . . . . . . . . . . .319 innerHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .319 Setting attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .320 Getting Elements by ID, Tag Name, or Class . . . . . . . . . . . . . . . . . . . . .320 getElementById . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .321 getElementsByTagName . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .322 getElementsByClassName . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .322 Using the Attribute Object’s Properties . . . . . . . . . . . . . . . . . . . . . . . . .324 Creating and Appending Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325 Removing Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325 0005390115.INDD xiv Trim size: 7.375 in × 9.25 in June 11, 2022 4:46 PM xiv Coding All-in-One For Dummies CHAPTER 11: Using Events in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327 Knowing Your Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .327 Handling Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .329 Using inline event handlers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .330 Event handling using element properties . . . . . . . . . . . . . . . . . . . .331 Event handling using addEventListener . . . . . . . . . . . . . . . . . . . . . .332 Stopping propagation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .336 CHAPTER 12: Integrating Input and Output . . . . . . . . . . . . . . . . . . . . . . . . 339 Understanding HTML Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .339 T