JavaScript for Modern Web Development: Building a Web Application Using HTML, CSS, and Javascript

Cover PageTitle PageCopyright PageDedicationAbout the AuthorsAbout the ReviewersAcknowledgementPrefaceErrataTable of Contents1. History of JavaScript and How it Revolutionized Web DevelopmentStructureObjectiveA brief history of the World Wide WebWeb transition over the yearsWeb 1.0Web 2.0Web 3.0Advent of JavaScriptECMAScript – Standardization of JavaScriptRole of JavaScript in Modern Web developmentFront-end JS frameworksBack-end JS frameworksData layer frameworksJS automation testing frameworks and test runner environmentsConclusionQuestions2. HTML - Creating the Web ContentStructureObjectiveGetting started with HTMLBuilding blocks of HTMLStructure of an HTML documentHTML elementsBasic HTML tags to define contentSpecial content-related tagsHTML hyperlinkHTML listHTML tableHTML formInput form elementOther form elementsSpecial meaning-related HTML5 tagsHTML comment tagsHTML imagesHTML character entity referencesConclusionQuestions3. CSS - Making the Content BeautifulStructureObjectivePower of CSSBasics of CSSCSS syntaxHow to include CSS in HTML?Inline styleInternal style sheetExternal style sheetsCascading stylesWorking of CSSPropertiesValuesSelectorsCombinatorsContextual selectors/Descendant combinatorsChild combinators/selectorAdjacent sibling selectorGeneral sibling selectorStyling using Pseudo classStyling with Pseudo-elementsCSS inheritanceCSS precedence and specificityCSS precedence rulesUse of !important after CSS propertiesSpecificity of CSS rule selectorsSequence of declarationCSS unitsAbsolute lengthsViewport lengthsFont-relative lengthsPercentageCSS styling – Font, text, background propertiesStyling fontStyling textStyling backgroundCSS – The box modelBox-modelSetting width and heightBox sizingVertical margin collapseCSS display propertyInline boxBlock boxInline-blockCSS overflowPositioning elementsFixedAbsoluteRelativeStickyStacking contextCSS FlexboxFlex container propertiesFlex-item propertiesResponsive designViewportMedia queriesConclusionQuestions4. JavaScript Programming: Making the Application InteractiveStructureObjectiveIntroduction to JavaScript (JS)Building blocks of JSVariablesScopesGlobal scopeLocal scopeData TypesWorking with Data TypesOperatorsTypes of operators:CommentsStatementsFunctionsWhat is a function?More about functionsFunction as expressionFunction declaration versus function expressionDifferent aspects of functionsArraysWorking with DOMTraversing the DOMNodes related methodsElement related methodsAccessing elementsGetting and updating element contentAdding and removing HTML contentAttribute relatedConclusionQuestions5. Functional Programming with JavaScriptStructureObjectiveFunctional programmingImperative styleDeclarative style/functionalFeatures of functional programmingUsing functional programmingMajor concepts of functional programmingPure functionsBenefits of pure functionsHigher-order functionsImmutabilityRecursionReferential transparencyFirst-class functionsStored in a variablePassed as an argument to any other functionReturned by any other functionLimitations of a functional programming languageConclusionQuestions6. Object-Oriented JavaScriptStructureObjectiveIntroduction to OOPClassThe constructor of a classStatic member in a classObjectClass expressionEncapsulationInheritanceUse of super inside the constructorMethod overrideCalling the parent functionInheriting from built-in objectsAbstractionConclusionQuestions7. Asynchronous JSStructureObjectiveAsynchronicity in JavaScriptJavaScript runtimeCallbacksPromisesAsync AwaitAsyncAwaitScenario 1 – Synchronous behavior within asynchronousScenario 2 – Parallel execution within asynchronousScenario 3 – Async with classesScenario 4 – Error handling for async-awaitScenario 5 – Working with arrays asynchronouslyConclusionQuestions8. What’s New in ES2019 JavaScriptStructureObjectiveECMA Script StandardizationEssential ES6 changesHandling variables from var to const/letThe power of arrow functionsHandling stringsTemplate literalsHandling parametersFrom arguments to rest parametersSymbolsSpread operatorDestructuringClassesES2019 JavaScript – Major new featuresArray.prototype.{flat,flatMap}Array.flat()Array.flatMap()Object.fromEntriesES2019 JavaScript – Minor new featuresString.prototype.{trimStart,trimEnd}String.trimStart()String.trimEnd()Symbol.prototype.descriptionOptional catch bindingNew Function.toString()JSON ⊂ ECMAScript (JSON Superset)Well-formed JSON.stringify()Stable Array.prototype.sort()ConclusionQuestions9. Building An Application with JavaScriptStructureObjectivePlanning the applicationSolution approachBuilding the application step-by-stepStep 1 – Adding content to the launch pageStep 2 – Styling the launch pageStep 3 – Logic for the launch pageStep 4 – Adding responsiveness to the launch pageStep 5 – Content and styling for the application pageStep 6 – Content and styling for notes list in the application pageStep 7 – Logic for the application pageConclusionQuestions10. Debugging JavaScript ApplicationsStructureObjectiveThe browser devtoolsHow to launch the browser devtools?Parts of the Chrome devtoolsElements and stylesConsoleSourcesNetworkApplicationPerformanceMemorySecurityAuditThe debugging processUsing console.log statementsUsing the JavaScript DebuggerHow to add breakpoints?ConclusionQuestions11. Unit Testing AutomationStructureObjectiveUnit testingIntroduction to JasmineJasmine setup and configurationJasmine basic constructsdescribeitbeforeEach and afterEachexpectMatchersAsynchronous testingConclusionQuestions12. Build and Deploy an ApplicationStructureObjectiveWhy deployment?Getting ready for deploymentFor HTML/CSS/JS applicationsDetailed steps for hostingStep 1 – Login to the Heroku CLIStep 2 – Initialize and commit the application code to GitStep 3 – Create a named app in Heroku CLIStep 4 – Push your code into the remote git repositoryStep 5 – Deployment of any changes made to the applicationAlternate methodConclusionQuestions13. JavaScript Best PracticesStructureObjectiveJavaScript best practicesReadabilityNaming conventionsIndentation and spacingGuidelines for objectsAdd sufficient comments as neededAvoid global variablesFollow strict coding styleWrite modular code – Single responsibility principleAlways declare variablesAlways initialize variablesAvoid heavy nestingOptimize loop logicUse === ComparisonDifferentiate between assignment and comparisonDifferentiate between null and undefinedAlways use semicolonUse default in switch statementDifferentiate between addition and concatenationTrailing comma in JSON and object definitionsHTML and CSS best practicesMaintain a clean and readable code structureInclude JS Script at the endAvoid inline stylingCSS to be used consciouslyInclude imports wiselyUse lists for navigation itemsAvoid unnecessary divsAvoid tag qualifyUse color hex codesConsider cross-browser compatibilityValidate your codeReduce CSS code sizeRecommendations on best practicesConclusionQuestions14. Introduction to ReactStructureObjectiveSingle Page Applications(SPA)Getting started with ReactsrcReact and React-DOMIntroduction to JSXAdding event handlersElements, components and propsElementsComponentsFunctional componentsClass componentsStateful components and stateless componentsPropsPropTypesPassing method references between components using PropsState, lifecycle and virtual DOMStateManipulating stateAsynchronous setState functionLifecycle methodsMountingUpdatingUnmountingVirtual DOMStyling componentsStyling using external CSSInline stylingRendering lists and conditionalsListsConditional renderingFormsUncontrolled formsControlled formsCompositionHooksThe useState hookThe useEffect hookHow can hooks be reused?ConclusionQuestions15. Building an Application with ReactStructureObjectiveThinking in React to Approach the UI DevelopmentRequirements and Application DesignPrerequisites and getting startedBuilding the React applicationStep 1Step 2Step 3Step 4Step 5Step 6Step 7Step 8ConclusionQuestions16. State Management in React ApplicationsStructureObjectiveState managementThe architecture of ReduxWhy is middleware needed?Incorporating Redux in ReactSet up and provide the Redux store to the React applicationReact components connect to the Redux storeConclusionQuestions17. Debugging, Testing, and Deploying ReactStructureObjectiveDebugging React applicationsReactdeveloper toolsRedux devtoolsTesting React applicationsTest file organizationDefining the testsSnapshot testingShallow and mountDeploying React applicationsConclusionQuestions18. What Next - For Becoming A Pro?StructureObjectiveModern web development with JavaScript frameworksBuilding mobile appsTemplating enginesVisualizationFunctional programmingRoutingLoggingInternationalizationDocumentationTesting frameworksQA toolsPackage managerCode coverageRunnerServicesDatabaseConclusionQuestions