book

JavaScript from Beginner to Professional

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

December 2021

Beginner

546 pages

10h 24m

English

Packt Publishing

Read now

Unlock full access

Who this book is forWhat this book coversTo get the most out of this bookGet in touch
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
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
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
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
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
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
Object-oriented programmingClasses and objectsClassesConstructorsPractice exercise 7.1MethodsPractice exercise 7.2PropertiesGetters and settersInheritancePrototypesPractice exercise 7.3Chapter projectsEmployee tracking appMenu items price calculatorSelf-check quizSummary
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
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

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
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
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
Introducing concurrencyCallbacksPractice exercise 13.1PromisesPractice exercise 13.2async and awaitPractice exercise 13.3Event loopCall stack and callback queueChapter projectPassword checkerSelf-check quizSummary
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
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
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

Content preview from JavaScript from Beginner to Professional

14 HTML5, Canvas, and JavaScript

HTML5 was released in 2012 and became standardized in 2014, which caused browsers to support all sorts of new features. The introduction of HTML5 impacted the realm of possibilities that are available through JavaScript. The options for graphics, videos, interaction with graphics, and a lot more with JavaScript have increased tremendously since the introduction of HTML5, and have been so revolutionary that in fact, they led to the end of support of Flash by web browsers.

HTML5 allows web page(s) to be better structured by adding new elements, such as <header>. And also the DOM has improved quite a bit, which has led to increased performance. There are quite a few other additions and you'll see some of them in ...