book

The JavaScript Workshop

Name: The JavaScript Workshop
ISBN: 9781838641917

by Joseph Labrecque, Jahred Love, Daniel Rosenbaum, Nick Turner, Gaurav Mehla, Alonzo L. Hosford, Florian Sloot, Philip Kirkbride, Christer Johansson, Peter Lyons Kehl, Andrew Artajos, Shubham Shrivastava, Lior Avital, Archit Goyal, Gavin Orland, David Parker, Dixit Patel, Tarunkumar Bagmar

November 2019

Beginner

802 pages

15h 33m

English

Packt Publishing

Read now

Unlock full access

Preface
About the BookAudienceAbout the ChaptersConventionsBefore You BeginInstalling Visual Studio CodeInstalling the "Open in Default Browser" ExtensionDownloading Node.jsWindowsMacLinuxVerifying the InstallationInstalling the Code Bundle
1. Getting to Know JavaScript
IntroductionWhat Is JavaScript and How Is It Used?JavaScript versus Other LanguagesExercise 1.01: Languages DiscoveryA Brief History of the JavaScript LanguageNetscape Mocha and LiveScriptSun Microsystems and JavaEcma International and ECMAScriptVersions of ECMAScript (and JavaScript)ECMAScript 1 (1997)ECMAScript 2 (1998)ECMAScript 3 (1999)ECMAScript 4 (unreleased)ECMAScript 5 (2009)ECMAScript 6 (2015)ECMAScript 7 (2016), ECMAScript 8 (2017), and ECMAScript 9 (2018)Exercise 1.02: Can I Use This Feature?Accessing Web Browser Developer ToolsGoogle ChromeMicrosoft EdgeApple SafariAn Introduction to VariablesExercise 1.03: Programming First StepsActivity 1.01: Creating an Alert Box Popup in the Web BrowserOverview of JavaScript CapabilitiesClient-Side Form ValidationJavaScript Widgets or ComponentsXML HTTP Requests (XHR)Storing Local DataDOM ManipulationAnimations and EffectsSummary
2. Working with JavaScript
IntroductionIntegrated Development Environments (IDE)GitHub's AtomSublime TextAdobe DreamweaverJetBrains WebStormMicrosoft Visual Studio CodeJavaScript Project and File ManagementProject Folders and FilesExercise 2.01: Creating a Working Project DirectoryJavaScript Syntax and StructureExercise 2.02: Creating Project BoilerplateBasic JavaScript SyntaxJavaScript Execution OrderExercise 2.03: Verifying an Execution Order Overview of JavaScript EnvironmentsBrowser-Based JavaScriptServer-Based JavaScriptDesktop JavaScriptMobile JavaScriptA Closer Look at Web Browser Developer ToolsThe Elements ViewThe Console ViewThe Sources ViewThe Network ViewHTML Element Manipulation with JavaScriptActivity 2.01: Adding and Modifying an Item to/in the To-Do ListSummary
3. Programming Fundamentals
IntroductionData TypesRepresentation of DataLiteral ValuesUsing Operators in ExpressionsExercise 3.01: Implementing Expressions and OperatorsUsing Variables and Constants in ExpressionsExercise 3.02: Working with Variables Using the Web Browser ConsoleFunctions That Return ValuesExercise 3.03: Using Functions in ExpressionsThe Object Data TypeReady-Made ObjectsExercise 3.04: Working with Ready-Made ObjectsSelf-Made ObjectsObject Dot NotationThe Array ObjectUsing the Console ObjectSyntaxSemicolon at the End of Code StatementsLines of Code versus StatementsCommentsConditional and Loop FlowCode BlocksConditional Flow Statementsif...else Statementif StatementExercise 3.05: Writing an if statementif Statement and else StatementExercise 3.06: Writing an if...else Statementif Statements with Multiple else...if Statementsif Statement, Multiple else...if statements, and the else StatementExercise 3.07: Writing an if Statement with Multiple if else Statements and the else StatementThe break Statementswitch StatementExercise 3.08: Writing a switch Statement and Testing ItLoop Statementsfor StatementExercise 3.09: Writing a for Loop and Testing Itdo...while StatementExercise 3.10: Writing a do...while Loop and Testing Itwhile StatementExercise 3.11: Writing a while Loop and Testing Itfor...in StatementExercise 3.12: Writing a for...in Loop and Testing Itfor...of StatementExercise 3.13: Writing a for...of Loop and Testing Itcontinue StatementLabeled StatementWriting and Invoking FunctionsDefining FunctionsFunction DeclarationExercise 3.14: Writing a Function as a Statement and Invoking ItFunction ExpressionExercise 3.15: Writing a Function as an Expression and Invoking ItArrow Function ExpressionDefining and Invoking an Arrow Function ExpressionExercise 3.16: Writing an Arrow Function and Invoking ItReacting to User Input Events and Updating the DOMThe DOM HTML Element ObjectGetting Access to Elements in the DOMCreating Elements and Content in the DOMDOM EventsExercise 3.17: Working with DOM Manipulation and EventsDebuggingSilent FailSyntax BugsLogic BugsDebuggingDebuggersActivity 3.01: The To-Do List Shuffle ProgramSummary
4. JavaScript Libraries and Frameworks
IntroductionFramework versus LibraryVanilla.jsPopular JavaScript FrameworksEverlasting jQueryWhere to Find and How to Use External CodeExercise 4.01: Using a Third-Party Library in Your CodejQuery versus Vanilla.jsManipulating the DOMMaking XHR RequestsExercise 4.02: Handling Click Events with jQueryExercise 4.03: Handling the Same Event with Vanilla.jsUI Animation Using jQueryExercise 4.04: Animating a "Peek-a-boo" on Button ClickFrameworks versus Core JavaScriptExercise 4.05: Rendering a List of To-Dos Using ReactExercise 4.06: Rendering a List of To-Dos without a LibraryExercise 4.07: Creating a Library YourselfActivity 4.01: Adding an Animation to the To-Do List ApplicationSummary
5. Beyond the Fundamentals
IntroductionCreating VariablesA Note on ReferencingGlobal AssignmentDeclaring with varDeclaring with letDeclaring with constExercise 5.01: Variables and ScopeIdentifying a Variable's TypeExercise 5.02: Evaluating Types from VariablesFixed TypesThe null ValueThe undefined ValueBoolean ValuesBoolean OperatorsComparison OperatorsLogical OperatorsExercise 5.03: Odds and EvensTesting the Truth of ValuesThe NOT OperatorBoolean Operator PrecedenceBoolean Operator AssociativityExercise 5.04: Free Home Delivery Eligibility ValidationWhy You Shouldn't Compare Boolean and Non-Boolean ExpressionsWhy You Shouldn't Chain Comparison ExpressionsThe Ternary OperatorWorking with NumbersArithmetic LimitationsThe Number ObjectNumber FunctionsNumber MethodsNumber PropertiesExercise 5.05: Currency FormatterWorking with StringsSpecial CharactersConcatenationTemplate LiteralsExercise 5.06: Email TemplatesThe String ObjectThe length PropertyString MethodsExercise 5.07: Sentence ReversalThe toString MethodNumbers with StringsWorking with FunctionsAnonymous FunctionsCallbacksExercise 5.08: Functional ParametersArrow FunctionsArrow Function CaveatsGenerator FunctionsThe this Keyword The arguments Keyword Call and ApplyExercise 5.09: Dynamic CurryingActivity 5.01: Simple Number ComparisonWorking with ObjectsObjects as HashtablesObject Keys and MemoryObject and Pass-By ReferenceObject IterationObject AccessorsExercise 5.10: Converting Objects to toStringWorking with ArraysArrays and MutabilityArray IterationBuilt-In Array FunctionsWorking with DatesParsing Date StringsFormatting Dates into StringsDate MathActivity 5.02: Creating a To-Do ModelSummary
6. Understanding Core Concepts
IntroductionEvent TypesTimer EventsExercise 6.01: Custom TimerEvent TimersThe setInterval FunctionThe setTimeout FunctionTimer ParametersExercise 6.02: Real-Time ClockThe JavaScript Events ModelEvent BubblingTraversing the Node TreeDirect Node AcquisitionAssigning and Removing an Event HandlerExercise 6.03: Tabbed ContentBubbling versus CapturingThe JavaScript Event Life CycleHalting Event PropagationHalting Event ActionsExercise 6.04: Conditional Event PreventionEvent TriggersCustom EventsNative Event TriggersEvent Hander AttributesEvents and MemoryWorking with FormsHTTPThe Form TagSubmitting a Form with JavaScriptForm Submission EventsPreventing Form SubmissionResetting a FormForm Reset Event Exercise 6.05: Simple Form HandlingForm ControlsInput Controls The Button Control The Checkbox Control The Radio Control The Text Control The Password Control email, tel, and url ControlsThe Hidden ControlThe Number ControlThe Image ControlThe File ControlThe Textarea ControlThe Select ControlActivity 6.01: Making Changes to the ModelSummary
7. Popping the Hood
IntroductionJavaScript Execution and the Event LoopThe JavaScript RuntimeJavaScript EngineEnvironment APIsMessage QueueEvent LoopCall StackMemory HeapEvent Loop in ActionExercise 7.01: Working with the Event LoopStack OverflowExercise 7.02: Stack OverflowMemory ManagementThe Garbage CollectorMemory LeaksEvent ListenersDetached DOM NodesGlobal VariablesIdentifying Memory LeaksExercise 7.03: Identifying Memory LeaksExercise 7.04: Fixing the Memory LeakActivity 7.01: Finding out the Number of Stack FramesSummary
8. Browser APIs
IntroductionCanvasExercise 8.01: Drawing Shapes Using Canvas ElementsManipulate Shapes Using PathActivity 8.01: Creating a Simple FractalWeb Audio APIExercise 8.02: Creating an Oscillator WaveformActivity 8.02: Playing Sound and Controlling Frequency Using Two OscillatorsAudio VisualizationWeb Storage APIExercise 8.03: Storing and Populating Name Using the localStorage APIIndexedDBExercise 8.04: Creating an Object Store and Adding DataQuerying IndexedDBExercise 8.05: Querying the DatabaseIndexedDB CursorExercise 8.06: Fetching, Storing, and Querying DataPerformance APIExercise 8.07: Assessing PerformanceWeb Socket APIExercise 8.08: Creating Chat Rooms Using WebSocketsActivity 8.03: Audio Visualization Summary
9. Working with Node.js
IntroductionThe Node.js EnvironmentSync versus Async Background of Request ProcessingWhat Are Callbacks?The Node.js ShellExercise 9.01: Your First ProgramHow to Import/Require a Module in a Node.js ApplicationNode Package Manager (npm) FlagsCommandspackage.jsonPublishing a PackageNode ModulesNode.js ModulesExercise 9.02: Updating URL Information Using the URL Module FilesystemOperating System Exercise 9.03: Fetching Details about the Operating SystemPath ModuleExercise 9.04: How to Extract and Join DirectoriesHTTPExercise 9.05: Using a Node.js ServerThird-Party ModulesExpress.jsThe bodyParser ModuleMorgan LoggerWorking with Databases Setting up DatabasesConnecting with DatabasesMySQLExercise 9.06: Install, Connect, and Process Responses with a MySQL ServerMongoDBExercise 9.07: Installing and Configuring a Connection in MongoDBMaking Real-Time Web Apps WebSocketSocket.IOExercise 9.08: Building a Chat ApplicationActivity 9.01: Create a Web Application to Upload, Store, and Save Image DetailsSummary

10. Accessing External Resources
IntroductionJSONRESTWhat Is HTTP?TheSportsDBExercise 10.01: Using a REST API to Make CallsHTTP HeadersAJAXjQueryExercise 10.02: Using AJAX and the jQuery ajax() Method to Invoke a ServiceExercise 10.03: More AJAX and Some CSS StylingCSSOther Libraries and XMLHttpRequestAxios and the Fetch APIFor Comparison: XMLHttpRequest and jQueryUsing jQuery and XMLHttpRequest for POST RequestsCross-Domain RequestsCORS HeaderActivity 10.01: Implement REST Service Calls Using Various TechniquesSummary
11. Creating Clean and Maintainable Code
IntroductionWhat Is a Regex?Regexes in DetailLiteral CharactersSpecial Characters, Anchors, and EscapingWord BoundaryShorthand Character Classes and Word CharactersInverse ClassesDot CharacterSetsRangesExcluding Sets and RangesQuantifiersShorthand QuantifiersAlternationMany More Regex ConceptsPattern Specification and FlagsFinding Matches with String.match()Exercise 11.01: The Effect of the g FlagOther String Methods for RegexesExercise 11.02: Modifying Regex to Match a PatternAdding More Strings to the RegexActivity 11.01: Expanding Phone Number Matching Patterns to Accept Multiple FormatsActivity 11.02: Expanding Phone Number Matching Patterns to Accept a Particular FormatUseful RegexesBest Practices for Clean CodingGood Naming PracticesJavaScript LintersExercise 11.03: JSLintActivity 11.03: Refactoring to Clean CodeSummary
12. Using NextGeneration JavaScript
IntroductionBrowser DifferencespolyfillsTranspilersDevelopment Methodology LibrariesPackage ManagersThe Node Package ManagerInstalling ModulesThe Yarn Package ManagerThe Babel Transpiler@babel/core@babel/cli@babel/preset-env@babel/polyfill.babelrc Configuration FileExercise 12.01: A Basic Babel ProjectBabel Applications with ParcelWhat is Parcel?Using ParcelModular Applications in ParcelExercise 12.02: A Basic Parcel ProjectBabel Applications with WebpackWebpack ArchitectureWebpack Loaders and PluginsWebpack ConfigurationExercise 12.03: A Basic Webpack ProjectOther Popular BundlersOther Language TranspilingThe TypeScript LanguageExercise 12.04: A Basic TypeScript ProjectElm and ClojureScriptHaxeCode Support LibrariesjQueryUnderscore, Lodash, and RamdaClient Frameworks OverviewModels, Views, and ControllersVirtual DOMsReactive ProgrammingPopular FrameworksAngularJSReactJSVue.jsServer-Side LibrariesExpressRequestSocket.IOActivity 12.01: Creating a Project to Recognize and Compile TypeScript FilesSummary
13. JavaScript Programming Paradigms
IntroductionJavaScript ParadigmsThe Procedural ParadigmExercise 13.01: Implementing Procedural ProgrammingThe Object-Oriented ParadigmExercise 13.02: Implementing OOPEncapsulationInheritanceExercise 13.03: Inheritance Implementation Using the extends KeywordBasic JavaScript ConceptsPrototypes and Prototypical InheritanceWhat Is Prototypical Inheritance?Exercise 13.04: Prototypical Inheritance ImplementationAnonymous FunctionsThe Differences between Named Functions and Anonymous FunctionsData ScopeGlobal ScopeLocal ScopeFunction-Level ScopeBlock-Level ScopeHoistingThe Difference between var and letClosuresJavaScript Memory ManagementMemory Life CycleStatic versus Dynamic AllocationReleasing MemoryReference-Counting Garbage CollectionActivity 13.01: Creating a Calculator AppSummary
14. Understanding Functional Programming
IntroductionPure FunctionsSide EffectsImmutabilityExercise 14.01: Immutable Values and Objects – StringsExercise 14.02: Immutable Values and Objects – NumbersExercise 14.03: Mutability – ArraysExercise 14.04: Mutability – ObjectsCloning Objects and ArraysSample Data for Examples and ExercisesHigher-Order FunctionsThe Array.prototype.filter MethodA RefresherEliminating for LoopsThe Array.prototype.map MethodExercise 14.05: Another Way of Using Array.prototype.mapThe Array.prototype.reduce methodExercise 14.06: Grouping with Array.prototype.reduceImplementation of compose() and pipe()Composition with compose() and pipe()Currying FunctionsExercise 14.07: More Uses for Composition and Curried FunctionsFunction RecursionExercise 14.08: Creating a Deck of Cards Using reduce()Exercise 14.09: Using the pipe Method to Create a Card Shuffling FunctionBlackjackMapping Card Values to CardsActivity 14.01: Blackjack Card FunctionsManaging Blackjack Game StateBlackjack Game Logic FlowBlackjack Game Display FunctionsBlackjack Code ListingSummary
15. Asynchronous Tasks
IntroductionCallbackssetTimeout()Exercise 15.01: Asynchronous Execution with setTimeout()Callback Hell and the Pyramid of DoomPromises and the Fetch APIUsing the Fetch API to Get Player HonorsExercise 15.02: Refactoring the Honors List to Use the Fetch APIAn Improvement for Better PerformanceTidying Up Fetch CodeSome Fetch API Usage DetailsSome Details Concerning PromisesExercise 15.03: Creating a Utility Function to Delay ExecutionFurther Refinements to addDelay()Async/AwaitAsynchronous Generators and IteratorsActivity 15.01: Refactoring Promise Code to await/async SyntaxActivity 15.02: Further Simplifying Promise Code to Remove Function ParametersSummary
Appendix
1. Getting to Know JavaScriptActivity 1.01: Creating an Alert Box Popup in the Web BrowserSolution2. Working with JavaScriptActivity 2.01: Adding and Modifying an Item to/in the To-Do ListSolution3. Programming FundamentalsActivity 3.01: The To-Do List Shuffle ProgramSolution4. JavaScript Libraries and FrameworksActivity 4.01: Adding an Animation to the Todo List ApplicationSolution:5. Beyond the FundamentalsActivity 5.01: Simple Number ComparisonSolutionActivity 5.02: Creating a TODO ModelSolution6. Understanding Core ConceptsActivity 6.01: Making Changes to the ModelSolution:7. Popping the HoodActivity 7.01: Finding out the Number of Stack FramesSolution8. Browser APIs Activity 8.01: Creating a Simple FractalSolutionActivity 8.02: Playing Sound and Controlling Frequency Using Two OscillatorsSolutionActivity 8.03: Audio Visualization Solution9. Working with Node.jsActivity 9.01: Create a Web Application to Upload, Store, and Save Image DetailsSolution10. Accessing External ResourcesActivity 10.01: Implement REST Service Calls Using Various TechniquesSolution:11. Creating Clean and Maintainable CodeActivity 11.01: Expanding Phone Number Matching Patterns to Accept Multiple FormatsSolution:Activity 11.02: Expanding Phone Number Matching Patterns to Accept a Particular FormatSolution:Activity 11.03: Refactoring to Clean CodeSolution:12. Using Next-Generation JavaScriptActivity 12.01: Creating a Project to Recognize and Compile TypeScript FilesSolution:13. JavaScript Programming ParadigmsActivity 13.01: Creating a Calculator AppSolution14. Understanding Functional ProgrammingActivity 14.01: Blackjack Card FunctionsSolution:15. Asynchronous TasksActivity 15.01: Refactoring Promise Code to await/async SyntaxSolutionActivity 15.02: Further Simplifying Promise Code to Remove Function ParametersSolution

Overview

In 'The JavaScript Workshop', you'll master the essentials of JavaScript, the versatile programming language powering today's web. This comprehensive book takes you from understanding core syntax to implementing advanced features like asynchronous tasks and server-side programming, equipping you with the skills to craft robust, maintainable web applications.

What this Book will help me do

Understand and implement JavaScript fundamentals to develop interactive web pages.
Build scalable backend services using Node.js and enhance frontend functionality with browser APIs.
Use frameworks and libraries alongside tools like Gulp and Grunt to streamline development workflow.
Leverage modern JavaScript features including asynchronous programming for responsive applications.
Adopt best practices such as maintainable coding and functional programming paradigms.

Author(s)

The authors of 'The JavaScript Workshop', Joseph Labrecque and colleagues, are experienced software developers and educators. Joseph, in particular, has extensive expertise in interactive media and JavaScript projects. Together, the team has brought their collective knowledge to make topics approachable and practical.

Who is it for?

This book is ideal for beginners and aspiring web developers interested in JavaScript. If you have basic familiarity with HTML and CSS but little to no programming experience, this guide will bring you up to speed effectively. The practical approach ensures readers successfully transition from learning the basics to applying real-world solutions.

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781838641917

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills