book

JavaScript Absolute Beginner’s Guide

Name: JavaScript Absolute Beginner’s Guide
Author: Kirupa Chinnathambi
ISBN: 9780134498638

by Kirupa Chinnathambi

July 2016

Beginner

416 pages

8h 55m

English

Que

Read now

Unlock full access

About This E-Book
Title Page
Copyright Page
Accessing the Free Web Edition
Contents at a Glance
Table of Contents
Dedication
Acknowledgments
About the Author
Introduction
Parlez-vous JavaScript?Contacting Me/Getting Help

1. Hello, World!
What Is JavaScript?A Simple ExampleCode Editing ToolsThe HTML DocumentLooking at the Code: Statements and Functions
Part I: The Basic Stuff
2. Values and Variables
Using VariablesMore Variable StuffNaming VariablesMore on Declaring and Initializing Variables
3. Functions
What Is a Function?A Simple FunctionCreating a Function That Takes ArgumentsCreating a Function That Returns DataThe Return KeywordExiting the Function Early
4. Conditional Statements: If, Else, and Switch
The If/Else StatementMeet the Conditional OperatorsCreating More Complex ExpressionsVariations on the If/Else StatementPhewSwitch StatementsUsing a Switch StatementSimilarity to an If/Else StatementDeciding Which to Use
5. Meet the Loops: For, While, and Do...While!
The for LoopThe Starting ConditionTerminating Condition (aka Are we done yet?)Reaching the EndPutting It All TogetherSome for Loop ExamplesStopping a Loop EarlySkipping an IterationGoing BackwardsYou Don’t Have to Use NumbersArray! Array! Array!Oh No He Didn’t!The Other LoopsThe while LoopThe do...while Loop
6. Timers
Meet the Three TimersDelaying with setTimeoutLooping with setIntervalAnimating Smoothly with requestAnimationFrame
7. Variable Scope
Global ScopeLocal ScopeMiscellaneous Scoping ShenanigansDeclarations Using var Do Not Support Block ScopingHow JavaScript Processes VariablesClosures
8. Closures
Functions within FunctionsWhen the Inner Functions Aren’t Self-Contained
9. Where Should Your Code Live?
The Options on the TableApproach #1: All the Code Lives in Your HTML DocumentApproach #2: The Code Lives in a Separate FileThe JavaScript FileReferencing the JavaScript FileSo...Which Approach to Use?Yes, My Code Will Be Used on Multiple Documents!No, My Code Is Used Only Once, on a Single HTML Document!
10. Commenting Your Code
What Are Comments?Single Line CommentsMulti-line CommentsCommenting Best Practices
Part II: It’s an Object-Oriented World
11. Of Pizza, Types, Primitives, and Objects
Let’s First Talk About PizzaFrom Pizza to JavaScriptWhat Are Objects?The Predefined Objects Roaming Around
12. Strings
The BasicsString Properties and MethodsAccessing Individual CharactersCombining (aka Concatenating) StringsMaking Substrings out of StringsSplitting a String/splitFinding Something Inside a StringUpper and Lower Casing Strings
13. When Primitives Behave Like Objects
Strings Aren’t the Only ProblemLet’s Pick on Strings AnywayWhy This Matters
14. Arrays
Creating an ArrayAccessing Array ValuesAdding Items to Your ArrayRemoving Items from the ArrayFinding Items in the ArrayMerging Arrays
15. Numbers
Using a NumberOperatorsDoing Simple MathIncrementing and DecrementingSpecial Values—Infinity and NaNInfinityNaNThe Math ObjectThe ConstantsRounding NumbersTrigonometric FunctionsPowers and Square RootsGetting the Absolute ValueRandom Numbers
16. A Deeper Look at Objects
Meet the ObjectCreating ObjectsSpecifying PropertiesCreating Custom ObjectsThe this Keyword
17. Extending Built-in Objects
Say Hello to Prototype...Again—Sort of!Extending Built-in Objects Is ControversialYou Don’t Control the Built-in Object’s FutureSome Functionality Should Not Be Extended or Overridden
18. Booleans and the Stricter === and !== Operators
The Boolean ObjectThe Boolean FunctionStrict Equality and Inequality Operators
19. Null and Undefined
NullUndefined
20. Immediately Invoked Function Expressions
Writing a Simple IIFEWriting an IIFE That Takes ArgumentsWhen to Use an IIFEAvoiding Code CollisionsClosures and Locking in StateMaking Things Private
Part III: Working with the DOM
21. JS, The Browser, and The DOM
What HTML, CSS, and JavaScript DoHTML Defines the StructurePrettify My World, CSS!It’s JavaScript Time!Meet the Document Object ModelThe Window ObjectThe Document Object
22. Finding Elements in the DOM
Meet the querySelector FamilyquerySelectorquerySelectorAllIt Really Is the CSS Selector Syntax
23. Modifying DOM Elements
DOM Elements Are Objects—Sort of!Let’s Actually Modify DOM ElementsChanging an Element’s Text ValueAttribute Values
24. Styling Your Content
Why Would You Set Styles Using JavaScript?A Tale of Two Styling ApproachesSetting the Style DirectlyAdding and Removing Classes Using classListAdding Class ValuesRemoving Class ValuesToggling Class ValuesChecking Whether a Class Value ExistsGoing Further
25. Traversing the DOM
Finding Your Way AroundDealing with Siblings and ParentsLet’s Have Some Kids!Putting It All TogetherChecking Whether a Child ExistsAccessing All the Child ElementsWalking the DOM
26. Creating and Removing DOM Elements
Creating ElementsRemoving ElementsCloning Elements
27. In-Browser Developer Tools
Meet the Developer ToolsInspecting the DOMDebugging JavaScriptMeet the ConsoleInspecting ObjectsLogging Messages
Part IV: Dealing with Events
28. Events
What Are Events?Events and JavaScript1. Listening for Events2. Reacting to EventsA Simple ExampleThe Event Arguments and the Event Type
29. Event Bubbling and Capturing
Event Goes Down. Event Goes Up.Meet the PhasesWho Cares?Event, Interrupted
30. Mouse Events
Meet the Mouse EventsClicking Once and Clicking TwiceMousing Over and Mousing OutThe Very Click-like Mousing Down and Mousing Up EventsThe Event Heard Again...and Again...and Again!The Context MenuThe MouseEvent PropertiesThe Global Mouse PositionThe Mouse Position Inside the BrowserDetecting Which Button Was ClickedDealing with the Mouse Wheel
31. Keyboard Events
Meet the Keyboard EventsUsing These EventsThe Keyboard Event PropertiesSome ExamplesChecking That a Particular Key Was PressedDoing Something When the Arrow Keys Are PressedDetecting Multiple Key Presses
32. Page Load Events and Other Stuff
The Things That Happen During Page LoadStage Numero UnoStage Numero DosStage Numero ThreeThe DOMContentLoaded and load EventsScripts and Their Location in the DOMScript Elements—Async and Deferasyncdefer
33. Handling Events for Multiple Elements
How to Do All of ThisA Terrible SolutionA Good SolutionPutting It All Together
34. Conclusion
Glossary
Index
Code Snippets

Content preview from JavaScript Absolute Beginner’s Guide

23. Modifying DOM Elements

In This Chapter

• Understand how JavaScript can be used to modify the DOM

• Meet the HTML Element

• Learn how to modify attributes

At this point, you kinda sorta know what the DOM is. You also saw how to find elements using querySelector and querySelectorAll. What’s next is for us to learn how to modify the DOM elements you found. After all, what’s the fun in having a giant lump of clay (or cookie dough) if you can’t put your hands on it and make a giant mess?

Anyway, besides it being fun and all, you will find yourself modifying the DOM all the time. Whether you are using JavaScript to change some element’s text, ...

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

JavaScript Absolute Beginner's Guide, 2nd Edition

Publisher Resources

ISBN: 9780134498638Purchase book

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

JavaScript Absolute Beginner’s Guide

by Kirupa Chinnathambi

23. Modifying DOM Elements

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.