book

JavaScript: Novice to Ninja, 2nd Edition

Name: JavaScript: Novice to Ninja, 2nd Edition
Author: Darren Jones
ISBN: 9781492064237

by Darren Jones

September 2017

Beginner

666 pages

11h 35m

English

SitePoint

Read now

Unlock full access

JavaScript: Novice to Ninja 2nd Edition
Notice of RightsNotice of LiabilityTrademark NoticeAbout Darren JonesAbout SitePoint
Preface
Who Should Read This BookConventions UsedCode SamplesTips, Notes, and WarningsSupplementary Materials
Chapter 1: Hello, JavaScript
ProgrammingJavaScriptThe History of JavaScriptThe Browser WarsWeb 2.0StandardsHTML5Node.jsJavaScript VersionsThe Future of JavaScriptA Ninja Programming EnvironmentInstalling NodeNode InstallerNode Version ManagerJavaScript In The ConsoleText EditorsOnline OptionsYour First JavaScript ProgramJavaScript in the BrowserThree Layers of the WebUnobtrusive JavaScriptGraceful Degradation and Progressive EnhancementYour Second JavaScript ProgramDon't Break the WebThe Project: Quiz NinjaChapter Summary
Chapter 2: Programming Basics
CommentsJavaScript GrammarReserved WordsPrimitive Data TypesVariablesDeclaring and AssigningScopeGlobal ScopeLocal ScopeNaming Constants & VariablesDirect Assignment and Assignment By ReferenceStringsString Properties and MethodsTemplate LiteralsSymbolsNumbersOctal and Hexadecimal NumbersExponential NotationNumber MethodsArithmetic OperationsChanging The Value of VariablesIncrementing ValuesInfinityNaNChecking a Value is a NumberType CoercionConverting Between Strings and NumbersConverting Strings to NumbersConverting Numbers to StringsParsing NumbersUndefinedNullBooleansLogical Operators! (Logical NOT)&& (Logical AND)|| (Logical OR)Lazy EvaluationBitwise OperatorsBitwise NOTBitwise ANDBitwise ORBitwise XORBitwise Shift OperatorsComparisonEqualitySoft EqualityHard EqualityInequalityGreater Than and Less ThanQuiz Ninja ProjectChapter Summary
Arrays, Logic, and Loops
ArraysInitializing an ArrayAdding Values to ArraysCreating Array LiteralsRemoving Values from ArraysDestructuring ArraysArray Properties and MethodsPop, Push, Shift, and UnshiftMerging ArraysThe join() MethodSlicing and SplicingReverseSortFinding if a Value is in an ArrayMultidimensional ArraysSetsCreating SetsAdding Values to SetsSet MethodsRemoving Values From SetsConverting Sets to ArraysWeak SetsMapsCreating MapsAdding Entries To MapsMap MethodsRemoving Entries From MapsConverting Maps to ArraysWeak MapsLogicif Statementselse StatementsTernary OperatorSwitch StatementsLoopsWhile LoopsInfinite Loopsdo ... while LoopsFor LoopsNested for LoopsLooping over ArraysLooping Over SetsLooping Over MapsQuiz Ninja ProjectChapter Summary
Functions
Defining a FunctionFunction DeclarationsFunction ExpressionsFunction() ConstructorsInvoking a FunctionReturn ValuesParameters and ArgumentsVariable Numbers of ArgumentsImproved Mean FunctionDefault ParametersArrow FunctionsFunction HoistingVariable HoistingCallbacksSorting Arrays With A CallbackArray IteratorsforEach()map()Reduce()Filter()Chaining Iterators TogetherImproving the mean() FunctionQuiz Ninja ProjectChapter Summary
Objects
Object LiteralsA Super ExampleCreating ObjectsAccessing PropertiesComputed PropertiesCalling MethodsChecking if Properties or Methods ExistFinding all the Properties of an ObjectAdding PropertiesChanging PropertiesRemoving PropertiesNested ObjectsObjects as Parameters to FunctionsthisNamespacingBuilt-in ObjectsJSONThe Math ObjectThe Date ObjectThe RegExp ObjectBasic Regular ExpressionsCharacter GroupsRegular Expression PropertiesSpecial CharactersModifiersGreedy and Lazy ModifiersA Practical ExampleString MethodsQuiz Ninja ProjectChapter Summary
The Document Object Model
The Document Object ModelWhat is the DOM?History of the DOMAn Example Web PageGetting ElementsLegacy DOM Shortcut MethodsGetting An Element By Its IDGet Elements By Their Tag NameGet Elements By Their Class NameQuery SelectorsNavigating the DOM TreeFinding the Value of a NodeGetting and Setting AttributesSetting An Element’s AttributesClasses Of An ElementCreating Dynamic MarkupReplacing Elements on a PageLive CollectionsUpdating CSSCamel Case PropertiesDisappearing ActChecking Style PropertiesUse with CautionQuiz Ninja ProjectChapter Summary
Events
Event ListenersInline Event HandlersOlder Event HandlersUsing Event ListenersExample CodeThe Event ObjectTypes of EventThe Event TargetCoordinates of an EventTypes of EventsMouse EventsKeyboard EventsModifier KeysTouch EventsTouch Event PropertiesRemoving Event ListenersStopping Default BehaviorEvent PropagationBubblingCapturingStopping the Bubbling PhaseEvent DelegationQuiz Ninja ProjectChapter Summary
Forms
FormsA Searching ExampleAccessing Form ElementsForm Properties and MethodsForm EventsSubmitting a FormRetrieving and Changing Values From a FormForm ControlsInput FieldsText Input FieldsPassword Input FieldsCheckbox Input FieldsRadio Button Input FieldsHidden Input FieldsFile Input FieldsOther Input TypesSelect Drop-Down ListText AreasButtonsI Need a Hero!Form ValidationDisabling the Submit ButtonQuiz Ninja ProjectChapter Summary

The Window Object
The Browser Object ModelGoing GlobalDialogsBrowser InformationWhich Browser?Location, Location, LocationThe Browser HistoryControlling WindowsScreen InformationThe Document Objectdocument.write()CookiesDeleting CookiesTiming FunctionssetTimeout()setInterval()AnimationrequestAnimationFrameQuiz Ninja ProjectChapter Summary
Testing and Debugging
Errors, Exceptions, and WarningsExceptionsStack TracesWarningsThe Importance of Testing and DebuggingStrict ModeLinting ToolsFeature DetectionDebugging in the BrowserThe Trusty AlertUsing the ConsoleDebugging ToolsError ObjectsThrowing ExceptionsException Handlingtry, catch, and finallyTestsTest-driven DevelopmentTesting FrameworksJestCrunching Some NumbersQuiz Ninja ProjectChapter Summary
Further Functions
Function Properties and MethodsCall and Apply MethodsCustom PropertiesImmediately Invoked Function ExpressionsTemporary VariablesInitialization CodeSafe Use of Strict ModeCreating Self-contained Code BlocksFunctions that Define and Rewrite ThemselvesInit-Time BranchingRecursive FunctionsCallbacksEvent-driven Asynchronous ProgrammingCallback HellPromisesChaining Multiple PromisesAsync FunctionsGeneralized FunctionsFunctions That Return FunctionsClosuresFunction ScopeReturning FunctionsA Practical ExampleA Counter ExampleGeneratorsFunctional ProgrammingPure FunctionsHigher-Order FunctionsCurryingA General Curry FunctionGetting FunctionalQuiz Ninja ProjectChapter Summary
Object-Oriented Programming in JavaScript
Object-Oriented ProgrammingEncapsulationPolymorphismInheritanceClassesConstructor FunctionsES6 Class DeclarationsThe Constructor PropertyStatic MethodsPrototypal InheritanceThe Prototype PropertyFinding Out the PrototypeOwn Properties and Prototype PropertiesThe Prototype Is Live!Overwriting Prototype PropertiesWhat Should the Prototype Be Used For?Public and Private MethodsInheritanceThe Prototype ChainThe Object ConstructorEnumerable PropertiesInheritance Using extendsPolymorphismAdding Methods to Built-in ObjectsProperty Attributes and DescriptorsGetting and Setting Property DescriptorsGetters and SettersCreating Objects from Other ObjectsObject-Based InheritanceObject Prototype ChainMixinsUsing Mixins to Add PropertiesUsing Mixins to Create a copy() FunctionFactory FunctionsUsing the Mixin Function to Add Modular FunctionalityChaining FunctionsBinding thisUse that = thisUse bind(this)Use for-of Instead Of forEach()Use Arrow FunctionsBorrowing Methods from PrototypesBorrowing Array MethodsComposition Over InheritanceQuiz Ninja ProjectChapter Summary
Ajax
Clients and ServersA Brief History of AjaxThe Fetch APIBasic UsageResponse InterfaceRequest InterfaceHeaders InterfacePutting It All TogetherReceiving InformationSending InformationFormDataA Living StandardQuiz Ninja ProjectChapter Summary
HTML5 APIs
HTML5The data- AttributeHTML5 APIsHTML5 Web StorageGeolocationWeb WorkersWebsocketsNotificationsMultimediaOther APIsDrawing with CanvasShims and PolyfillsQuiz Ninja ProjectChapter Summary
Modern JavaScript Development
LibrariesDOM Manipulation ExamplejQueryUnderscore & LodashAdvantages and Disadvantages of LibrariesWhen to Use a LibraryFinding LibrariesModular JavaScriptES6 ModulesNode.js ModulesMVC FrameworksA Quick List ExampleMV* FrameworksTemplatesWeb ComponentsView LibrariesPackage ManagersnpmSearching for Packagesnpm initAliasesYarnContent Delivery NetworksDeploying JavaScriptTranspiling CodeMinificationFolder StructureWebpackQuiz Ninja ProjectChapter Summary
Next Steps
What’s Next For JavaScript?WebAssemblyJavaScript FatigueNinja SkillsVersion ControlKeep Your Knowledge Up to DateUse Common JavaScript Coding PatternsBuild ThingsPair ProgrammingContribute to Open Source ProjectsJavaScript Development IdeasHTML5 Game DevelopmentSingle-page Web ApplicationsProgressive Web ApplicationsMobile App DevelopmentDesktop App DevelopmentNode.js DevelopmentAnd There’s More!Chapter Summary

Content preview from JavaScript: Novice to Ninja, 2nd Edition

Chapter 6: The Document Object Model

The Document Object Model (DOM) allows you to access elements of a web page and enable interaction with the page by adding and removing elements, changing the order, content and attributes of elements, and even altering how they are styled.

In this chapter, we’ll cover the following topics:

Introduction to the DOM
Getting elements ―getElementById, getElementsByClassName, getElementsByTagName, querySelector and querySelectorAll
Navigating the DOM
Getting and setting an element’s attributes
Updating the DOM by creating dynamic markup
Changing the CSS of an element
Our project ― we'll dynamically insert each question into the HTML

The Document Object Model

What is the DOM?

The Document Object Model, ...

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: 9781492023623Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

JavaScript: Novice to Ninja, 2nd Edition

by Darren Jones

Chapter 6: The Document Object Model