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 9

Storing User Data in the Browser

IN THIS CHAPTER

Getting the hang of the Web Storage API

Taking your first look at JSON

Adding stuff to storage

Getting stuff from storage

Removing stuff from storage

Data is like garbage. You’d better know what you are going to do with it before you collect it.

—MARK TWAIN (ATTRIBUTED)

One of the hallmarks of a bigtime website is that most of what you as a site visitor see is data that has been retrieved from a server. That data has been created and managed by a database specialist, and the code that asks for the required data and then returns that data to the web browser is created by a back-end web developer.

Alas, back-end coding is beyond the purview of this book (but it’s a big part of my companion book Web Coding and Development All-in-One For Dummies [Wiley]). This book is all about front-end web development, but does that mean you’re out of luck when it comes to working with data?

For example, suppose your web page enables each user ...