book

HTML, CSS, & JavaScript All-in-One For Dummies

by Paul McFedries

August 2023

Beginner

848 pages

18h 49m

English

For Dummies

Read now

Unlock full access

Copyright
About This BookFoolish AssumptionsIcons Used in This BookBeyond the Book
What Do HTML, CSS, and JavaScript Do, Exactly?Why Learn HTML, CSS, and JavaScript?Seeing How It All WorksAdding Structure with HTMLAdding Style with CSSAdding Dynamism with JavaScript
Setting Up Your Test BrowsersCreating Your Local FoldersChoosing Your Text EditorWhat Else Do You Need?Using the WebDev Workbench
Understanding Web Hosting ProvidersA Buyer’s Guide to Web HostingFinding a Web HostFinding Your Way around Your New Web Home
Cross-Browser Testing Your CodeUnderstanding ValidationDon’t Skip Validation!Validating Your HTML CodeValidating Your CSS CodeValidating Your JavaScript Code
Getting to Know HTML’s Basic Structure TagsCarving Up the PageCommenting Your Code

Applying the Basic Text TagsCreating LinksBuilding Bulleted and Numbered ListsInserting Special CharactersA Few More HTML Text Tags to Know
Inserting ImagesEmbedding VideosEmbedding Audio Snippets
What Is a Table?Web Woodworking: How to Build a TableAdding More Table ElementsTable Refinishing: Styling Your Tables
What Is a Web Form?Building a Web Form
Why to Make Your Pages AccessibleUnderstanding Web AccessibilityMaking Your Page Structure AccessibleMaking Text AccessibleMaking Media AccessibleBuffing Up Your Page Accessibility SemanticsMaking Your Pages Keyboard-FriendlyEnsuring Sufficient Color ContrastValidating the Accessibility of a Page
Thinking Outside (but Also Inside) the Box ModelA Brief Digression on WhitespaceAdding PaddingPutting a Border on ItManipulating Element MarginsStyling Element Sizes
Introducing Yourself to the Web Page FamilyWhat’s All This About a Selector?Learning the Standard SelectorsSelecting Descendants, Children, and SiblingsSelecting Elements by Attribute
Scratching Your Head Over Pseudo-ClassesGetting Up to Speed with Pseudo-Elements
Commenting Your CSS CodeUsing a CSS ResetDebugging CSSPopping the Hood: How Styles Get Applied
Getting Comfy with CSS Measurement UnitsChecking Out the Absolute Measurement UnitsGetting to Know the Relative Measurement UnitsHere's Looking at View(port Measurement Units)Calculating with CSS
Specifying Colors in CSSUsing Color to Spruce Up Your TextStyling an Element’s BackgroundImpressing Your Friends with Color GradientsSetting Border ColorsPlaying with Colors in the Dev Tools
Taking Care of Your TextThe Typographic Trinity: Setting Type Size, Line Height, and Line LengthApplying Text StylesMore Typographical TrickeryGiving Your Links a MakeoverMessing with Alignment
What Is Web Coding?What Is a Programming Language?Is JavaScript Hard to Learn?What You Can Do with JavaScriptWhat You Can’t Do with JavaScriptWhat Do You Need to Get Started?Dealing with a Couple of Exceptional CasesAdding Comments to Your CodeCreating External JavaScript Files
Understanding VariablesNaming Variables: Rules and Best PracticesUnderstanding Literal Data TypesJavaScript Reserved WordsJavaScript and HTML Keywords
Understanding Expression StructureBuilding Numeric ExpressionsBuilding String ExpressionsBuilding Comparison ExpressionsBuilding Logical ExpressionsUnderstanding Operator Precedence
Making True/False Decisions with if StatementsBranching with if…else StatementsMaking Multiple DecisionsUnderstanding Code LoopingUsing while LoopsUsing for LoopsUsing do…while LoopsControlling Loop ExecutionAvoiding Infinite Loops
What Is a Function?The Structure of a FunctionWhere Do You Put a Function?Calling a FunctionPassing Values to FunctionsReturning a Value from a FunctionGetting Your Head around Anonymous FunctionsMoving to Arrow FunctionsRunning Functions in the FutureUnderstanding Variable ScopeUsing Recursive Functions
Working with ObjectsGetting to Know the Document Object ModelSpecifying ElementsTraversing the DOMManipulating ElementsModifying CSS with JavaScriptTweaking HTML Attributes with JavaScriptBuilding Reactive Pages with Events
What Is an Array?Declaring an ArrayPopulating an Array with DataHow Do I Iterate Thee? Let Me Count the WaysCreating Multidimensional ArraysManipulating Arrays
Manipulating Text with the String ObjectDealing with Dates and TimesWorking with Numbers: The Math Object
Understanding Web StorageIntroducing JSONAdding Data to Web StorageGetting Data from Web StorageRemoving Data from Web Storage
Understanding JavaScript’s Error TypesGetting to Know Your Debugging ToolsDebugging with the ConsolePausing Your CodeStepping Through Your CodeMonitoring Script ValuesMore Debugging StrategiesThe Ten Most Common JavaScript ErrorsThe Ten Most Common JavaScript Error Messages
Looking at the HTMLFormElement ObjectTaking a Peek at the HTMLInputElement ObjectProgramming Text FieldsCoding CheckboxesDealing with Radio ButtonsProgramming Selection ListsHandling and Triggering Form EventsCreating Keyboard Shortcuts for Form ControlsDealing with the Form Data
Getting a Grip on Page FlowFloating ElementsPositioning ElementsStacking Elements
Introducing FlexboxDo I Still Need Flexbox Now That CSS Grid Is Here?Setting Up and Configuring Flex ContainersTaking Control of Flex Items
Introducing CSS GridSetting Up the Grid ContainerSpecifying the Grid Rows and ColumnsTaking Control: Assigning Grid ItemsGetting Your Grid Ducks in a Row (or a Column): Aligning Things
What is a Responsive Layout?Going with the Flow: Fluid LayoutsQuerying Your Way to Responsiveness: Adaptive LayoutsWorking with Images ResponsivelyExploring the Principles of Mobile-First Development

Content preview from HTML, CSS, & JavaScript All-in-One For Dummies

Chapter 4

Controlling the Flow of JavaScript

IN THIS CHAPTER

Understanding how you control the flow of JavaScript

Setting up your code to make decisions

Understanding code looping

Setting up code loops

Avoiding the dreaded infinite loop

A good programmer is someone who always looks both ways before crossing a one-way street.

—DOUG LINDER

If left to its own devices, the web browser will process HTML and JavaScript code in its default way. Nothing is inherently wrong with that default, but if you stand back and just let the browser do its standard thing, the result will be a standard-issue web page.

The secret to producing beautiful and lively web pages is to wrest control from the web browser and take matters into your own hands. You learn how to break out of the browser’s default layout flow in Book 5. Here, I’m talking JavaScript, so you need to learn how to break out of the browser’s default script-processing flow.

The default script flow means that the browser processes the code ...