book

JavaScript from Beginner to Professional

Name: JavaScript from Beginner to Professional
ISBN: 9781800562523

by Laurence Lars Svekis, Maaike van Putten, Rob Percival, Codestars By Rob Percival

December 2021

Beginner

546 pages

10h 15m

English

Packt Publishing

Read now

Unlock full access

Preface
Who this book is forWhat this book coversTo get the most out of this bookGet in touch
Getting Started with JavaScript
Why should you learn JavaScript?Setting up your environmentIntegrated Development EnvironmentWeb browserExtra toolsOnline editorHow does the browser understand JavaScript?Using the browser consolePractice exercise 1.1Adding JavaScript to a web pageDirectly in HTMLPractice exercise 1.2Linking an external file to our web pagePractice exercise 1.3Writing JavaScript codeFormatting codeIndentations and whitespaceSemicolonsCode commentsPractice exercise 1.4PromptRandom numbersChapter projectCreating an HTML file and a linked JavaScript fileSelf-check quizSummary
JavaScript Essentials
VariablesDeclaring variableslet, var, and constNaming variables Primitive data typesStringEscape charactersNumberBigIntBooleanSymbolUndefinednullAnalyzing and modifying data typesWorking out the type of a variableConverting data typesPractice exercise 2.1OperatorsArithmetic operatorsAdditionSubtractionMultiplicationDivisionExponentiationModulusUnary operators: increment and decrementCombining the operatorsPractice exercise 2.3Assignment operatorsPractice exercise 2.4Comparison operatorsEqualNot equalGreater than and smaller thanLogical operatorsAndOrNotChapter projectMiles-to-kilometers converterBMI calculatorSelf-check quizSummary
JavaScript Multiple Values
Arrays and their propertiesCreating arraysAccessing elementsOverwriting elementsBuilt-in length propertyPractice exercise 3.1Array methodsAdding and replacing elementsDeleting elements Finding elements SortingReversingPractice exercise 3.2Multidimensional arraysPractice exercise 3.3Objects in JavaScriptUpdating objectsPractice exercise 3.4Working with objects and arraysObjects in objectsArrays in objectsObjects in arraysObjects in arrays in objectsPractice exercise 3.5Chapter projectsManipulating an arrayCompany product catalogSelf-check quizSummary
Logic Statements
if and if else statementsPractice exercise 4.1else if statementsPractice exercise 4.2Conditional ternary operatorsPractice exercise 4.3switch statementsThe default casePractice exercise 4.4Combining casesPractice exercise 4.5 Chapter projectsEvaluating a number gameFriend checker gameRock Paper Scissors gameSelf-check quizSummary
Loops
while loopsPractice exercise 5.1do while loopsPractice exercise 5.2for loopsPractice exercise 5.3Nested loopsPractice exercise 5.4Loops and arraysPractice exercise 5.5for of loopPractice exercise 5.6Loops and objectsfor in loopPractice exercise 5.7Looping over objects by converting to an arraybreak and continuebreakcontinuePractice exercise 5.8break, continue, and nested loopsbreak and continue and labeled blocksChapter projectMath multiplication tableSelf-check quizSummary
Functions
Basic functionsInvoking functionsWriting functionsNaming functionsPractice exercise 6.1Practice exercise 6.2Parameters and argumentsPractice exercise 6.3Default or unsuitable parametersSpecial functions and operatorsArrow functionsSpread operatorRest parameterReturning function valuesPractice exercise 6.4Returning with arrow functionsVariable scope in functionsLocal variables in functionslet versus var variablesconst scopeGlobal variablesImmediately invoked function expressionPractice exercise 6.5Recursive functionsPractice exercise 6.6Nested functionsPractice exercise 6.7Anonymous functionsPractice exercise 6.8Function callbacksChapter projectsCreate a recursive functionSet timeout orderSelf-check quizSummary
Classes
Object-oriented programmingClasses and objectsClassesConstructorsPractice exercise 7.1MethodsPractice exercise 7.2PropertiesGetters and settersInheritancePrototypesPractice exercise 7.3Chapter projectsEmployee tracking appMenu items price calculatorSelf-check quizSummary
Built-In JavaScript Methods
Introduction to built-in JavaScript methodsGlobal methodsDecoding and encoding URIsdecodeUri() and encodeUri()decodeUriComponent() and encodeUriComponent()Encoding with escape() and unescape()Practice exercise 8.1Parsing numbersMaking integers with parseInt()Making floats with parseFloat()Executing JavaScript with eval()Array methodsPerforming a certain action for every itemFiltering an arrayChecking a condition for all elementsReplacing part of an array with another part of the arrayMapping the values of an arrayFinding the last occurrence in an arrayPractice exercise 8.2Practice exercise 8.3String methodsCombining stringsConverting a string to an arrayConverting an array to a stringWorking with index and positionsCreating substringsReplacing parts of the stringUppercase and lowercase The start and end of a stringPractice exercise 8.4Practice exercise 8.5Number methodsChecking if something is (not) a numberChecking if something is finiteChecking if something is an integerSpecifying a number of decimalsSpecifying precisionMath methodsFinding the highest and lowest numberSquare root and raising to the power ofTurning decimals into integersExponent and logarithm Practice exercise 8.6Date methodsCreating datesMethods to get and set the elements of a dateParsing datesConverting a date to a stringPractice exercise 8.7Chapter projectsWord scrambler Countdown timerSelf-check quizSummary
The Document Object Model
HTML crash courseHTML elementsHTML attributesThe BOMPractice exercise 9.1Window history objectWindow navigator objectWindow location objectPractice exercise 9.2The DOMAdditional DOM propertiesSelecting page elementsPractice exercise 9.3Chapter projectManipulating HTML elements with JavaScriptSelf-check quizSummary

Dynamic Element Manipulation Using the DOM
Basic DOM traversingPractice exercise 10.1Selecting elements as objectsChanging innerTextChanging innerHTMLAccessing elements in the DOMAccessing elements by IDPractice exercise 10.2Accessing elements by tag namePractice exercise 10.3Accessing elements by class namePractice exercise 10.4Accessing elements with a CSS selectorUsing querySelector()Using querySelectorAll()Element click handlerThis and the DOMPractice exercise 10.7Manipulating element styleChanging the classes of an elementAdding classes to elementsRemoving classes from elementsToggling classesManipulating attributesPractice exercise 10.8Event listeners on elementsPractice exercise 10.9Creating new elementsPractice exercise 10.10Chapter projectsCollapsible accordion componentInteractive voting systemHangman gameSelf-check quizSummary
Interactive Content and Event Listeners
Introducing interactive contentSpecifying eventsSpecifying events with HTMLSpecifying events with JavaScriptPractice exercise 11.1Specifying events with event listenersPractice exercise 11.2The onload event handlerPractice exercise 11.3Mouse event handlersPractice exercise 11.4The event target propertyPractice exercise 11.5DOM event flowPractice exercise 11.6onchange and onblurPractice exercise 11.7Key event handlerPractice exercise 11.8Drag and drop elementsPractice exercise 11.9Form submissionPractice exercise 11.10Animating elementsPractice exercise 11.11Chapter projectsBuild your own analyticsStar rating systemMouse position trackerBox clicker speed test gameSelf-check quizSummary
Intermediate JavaScript
Regular expressionsSpecifying multiple options for wordsCharacter optionsGroupsPractical regexSearching and replacing stringsEmail validationFunctions and the arguments objectPractice exercise 12.3JavaScript hoistingUsing strict modeDebuggingBreakpointsPractice exercise 12.4Error handlingPractice exercise 12.5Using cookiesPractice exercise 12.6Local storagePractice exercise 12.7JSONPractice exercise 12.8Parsing JSONPractice exercise 12.9Practice exercise 12.9 answersChapter projectsEmail extractorForm validatorSimple math quizSelf-check quizSummary
Concurrency
Introducing concurrencyCallbacksPractice exercise 13.1PromisesPractice exercise 13.2async and awaitPractice exercise 13.3Event loopCall stack and callback queueChapter projectPassword checkerSelf-check quizSummary
HTML5, Canvas, and JavaScript
Introducing HTML5 with JavaScriptLocal file readerUploading filesReading filesPractice exercise 14.1Getting position data with GeoLocationHTML5 canvasPractice exercise 14.2Dynamic canvasAdding lines and circles to the canvasPractice exercise 14.3Adding text to the canvasPractice exercise 14.4Adding and uploading images to the canvasPractice exercise 14.5Adding animations to the canvasPractice exercise 14.6Drawing on canvas with a mousePractice exercise 14.7Saving dynamic imagesMedia on the pageDigital accessibility in HTMLChapter projectsCreate a Matrix effectCountdown clockOnline paint appSelf-check quizSummary
Next Steps
Libraries and frameworksLibrariesjQueryD3UnderscoreReactFrameworksVue.jsAngularLearning the backendAPIsAJAXPractice exercise 15.1Node.js Using the Express Node.js framework Next stepsChapter projectsWorking with JSONList-making projectSelf-check quizSummary
Appendix – Practice Exercise, Project, and Self-Check Quiz Answers
Chapter 1, Getting Started with JavaScriptPractice exercisesProjectsCreating an HTML file and a linked JavaScript file Self-check quizChapter 2, JavaScript EssentialsPractice exercisesProjectsMiles-to-kilometers converterBMI calculatorSelf-check quizChapter 3, JavaScript Multiple ValuesPractice exercisesProjectsManipulating an arrayCompany product catalogSelf-check quizChapter 4, Logic StatementsPractice exercisesProjectsEvaluating a number game answersFriend checker game answersRock paper scissors game answersSelf-check quizChapter 5, LoopsPractice exercisesProjectMath multiplication tableSelf-check quizChapter 6, FunctionsPractice exercisesProjectsCreate a recursive functionSet timeout orderSelf-check quizChapter 7, ClassesPractice exercisesProjectsEmployee tracking appMenu items price calculatorSelf-check quizChapter 8, Built-In JavaScript MethodsPractice exercisesProjectsWord scramblerCountdown timerSelf-check quizChapter 9, The Document Object ModelPractice exercisesProjectsManipulating HTML elements with JavaScriptSelf-check quizChapter 10, Dynamic Element Manipulation Using the DOMPractice exercisesProjectsCollapsible accordion componentInteractive voting systemHangman gameSelf-check quizChapter 11, Interactive Content and Event ListenersPractice exercisesProjectsBuild your own analyticsStar rater systemMouse position trackerBox clicker speed test gameSelf-check quizChapter 12, Intermediate JavaScriptPractice exercisesProjectsEmail extractorForm validatorSimple math quizSelf-check quizChapter 13, ConcurrencyPractice exercisesProjectsPassword checkerSelf-check quizChapter 14, HTML5, Canvas, and JavaScriptPractice exercisesProjectsCreate a Matrix effectCountdown clockOnline paint appSelf-check quizChapter 15, Next StepsPractice exercisesProjectsWorking with JSONList-making projectSelf-check quiz
Other Books You May Enjoy
Index

Content preview from JavaScript from Beginner to Professional

10 Dynamic Element Manipulation Using the DOM

Learning the difficult concepts of the previous chapter will be rewarded in this chapter. We will take our DOM knowledge one step further and learn how to manipulate the DOM elements on the page with JavaScript. First, we need to learn how to navigate the DOM and select the elements we want. We will learn how we can add and change attributes and values, and how to add new elements to the DOM.

You will also learn how to add style to elements, which can be used to make items appear and disappear. Then we will introduce you to events and event listeners. We will start easy, but by the end of this chapter you will be able to manipulate web pages in many ways, and you will have the knowledge to create ...

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

Modern JavaScript from The Beginning [Second Edition] - Second Edition

Publisher Resources

ISBN: 9781800562523

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

JavaScript from Beginner to Professional

by Laurence Lars Svekis, Maaike van Putten, Rob Percival, Codestars By Rob Percival

10

Dynamic Element Manipulation Using the DOM

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.