book

JavaScript and JQuery: Interactive Front-End Web Development

Name: JavaScript and JQuery: Interactive Front-End Web Development
Author: Jon Duckett
ISBN: 9781118531648

by Jon Duckett

June 2014

Beginner

640 pages

14h 12m

English

Wiley

Read now

Unlock full access

Cover Page
Title Page
Copyright
TABLE OF CONTENTS
CREDITS
Introduction
EXAMPLES OF JAVASCRIPT IN THE BROWSERTHE STRUCTURE OF THIS BOOKHTML & CSS: A QUICK REFRESHERBROWSER SUPPORT
Chapter 1: The ABC of Programming
1/a WHAT IS A SCRIPT AND HOW DO I CREATE ONE?A SCRIPT IS A SERIES OF INSTRUCTIONSWRITING A SCRIPTDESIGNING A SCRIPT: TASKSDESIGNING A SCRIPT: STEPSFROM STEPS TO CODEDEFINING A GOAL & DESIGNING THE SCRIPTSKETCHING OUT THE TASKS IN A FLOWCHART1/b HOW DO COMPUTERS FIT IN WITH THE WORLD AROUND THEM?COMPUTERS CREATE MODELS OF THE WORLD USING DATAOBJECTS & PROPERTIESEVENTSMETHODSPUTTING IT ALL TOGETHERWEB BROWSERS ARE PROGRAMS BUILT USING OBJECTSTHE DOCUMENT OBJECT REPRESENTS AN HTML PAGEHOW A BROWSER SEES A WEB PAGE1/c HOW DO I WRITE A SCRIPT FOR A WEB PAGE?HOW HTML, CSS, & JAVASCRIPT FIT TOGETHERPROGRESSIVE ENHANCEMENTCREATING A BASIC JAVASCRIPTLINKING TO A JAVASCRIPT FILE FROM AN HTML PAGETHE SOURCE CODE IS NOT AMENDEDPLACING THE SCRIPT IN THE PAGEHOW TO USE OBJECTS & METHODSJAVASCRIPT RUNS WHERE IT IS FOUND IN THE HTML
Chapter 2: Basic JavaScript Instructions
STATEMENTSCOMMENTSWHAT IS A VARIABLE?VARIABLES: HOW TO DECLARE THEMVARIABLES: HOW TO ASSIGN THEM A VALUEDATA TYPESUSING A VARIABLE TO STORE A NUMBERUSING A VARIABLE TO STORE A STRINGUSING QUOTES INSIDE A STRINGUSING A VARIABLE TO STORE A BOOLEANSHORTHAND FOR CREATING VARIABLESCHANGING THE VALUE OF A VARIABLERULES FOR NAMING VARIABLESARRAYSCREATING AN ARRAYVALUES IN ARRAYSACCESSING & CHANGING VALUES IN AN ARRAYEXPRESSIONSOPERATORSARITHMETIC OPERATORSUSING ARITHMETIC OPERATORSSTRING OPERATORUSING STRING OPERATORSEXAMPLE
Chapter 3: Functions, Methods & Objects
WHAT IS A FUNCTION?A BASIC FUNCTIONDECLARING A FUNCTIONCALLING A FUNCTIONDECLARING FUNCTIONS THAT NEED INFORMATIONCALLING FUNCTIONS THAT NEED INFORMATIONGETTING A SINGLE VALUE OUT OF A FUNCTIONGETTING MULTIPLE VALUES OUT OF A FUNCTIONANONYMOUS FUNCTIONS & FUNCTION EXPRESSIONSIMMEDIATELY INVOKED FUNCTION EXPRESSIONSVARIABLE SCOPEHOW MEMORY & VARIABLES WORKWHAT IS AN OBJECT?CREATING AN OBJECT: LITERAL NOTATIONACCESSING AN OBJECT AND DOT NOTATIONCREATING OBJECTS USING LITERAL NOTATIONCREATING MORE OBJECT LITERALSCREATING AN OBJECT: CONSTRUCTOR NOTATIONUPDATING AN OBJECTCREATING MANY OBJECTS: CONSTRUCTOR NOTATIONCREATING OBJECTS USING CONSTRUCTOR SYNTAXCREATE & ACCESS OBJECTS CONSTRUCTOR NOTATIONADDING AND REMOVING PROPERTIESRECAP: WAYS TO CREATE OBJECTSTHIS (IT IS A KEYWORD)RECAP: STORING DATAARRAYS ARE OBJECTSARRAYS OF OBJECTS & OBJECTS IN ARRAYSWHAT ARE BUILT-IN OBJECTS?THREE GROUPS OF BUILT-IN OBJECTSTHE BROWSER OBJECT MODEL: THE WINDOW OBJECTUSING THE BROWSER OBJECT MODELTHE DOCUMENT OBJECT MODEL: THE DOCUMENT OBJECTUSING THE DOCUMENT OBJECTGLOBAL OBJECTS: STRING OBJECTWORKING WITH STRINGSDATA TYPES REVISITEDGLOBAL OBJECTS: NUMBER OBJECTWORKING WITH DECIMAL NUMBERSGLOBAL OBJECTS: MATH OBJECTMATH OBJECT TO CREATE RANDOM NUMBERSCREATING AN INSTANCE OF THE DATE OBJECTGLOBAL OBJECTS: DATE OBJECT (AND TIME)CREATING A DATE OBJECTWORKING WITH DATES & TIMESEXAMPLE FUNCTIONS, METHODS & OBJECTS
Chapter 4: Decisions & Loops
DECISION MAKINGEVALUATING CONDITIONS & CONDITIONAL STATEMENTSCOMPARISON OPERATORS: EVALUATING CONDITIONSSTRUCTURING COMPARISON OPERATORSUSING COMPARISON OPERATORSUSING EXPRESSIONS WITH COMPARISON OPERATORSCOMPARING TWO EXPRESSIONSLOGICAL OPERATORSUSING LOGICAL ANDUSING LOGICAL OR & LOGICAL NOTIF STATEMENTSUSING IF STATEMENTSIF…ELSE STATEMENTSUSING IF…ELSE STATEMENTSSWITCH STATEMENTSUSING SWITCH STATEMENTSTYPE COERCION & WEAK TYPINGTRUTHY & FALSY VALUESCHECKING EQUALITY & EXISTENCESHORT CIRCUIT VALUESLOOPSLOOP COUNTERSLOOPINGKEY LOOP CONCEPTSUSING FOR LOOPSUSING WHILE LOOPSUSING DO WHILE LOOPSEXAMPLE

Chapter 5: Document Object Model
THE DOM TREE IS A MODEL OF A WEB PAGEWORKING WITH THE DOM TREECACHING DOM QUERIESACCESSING ELEMENTSMETHODS THAT SELECT INDIVIDUAL ELEMENTSSELECTING ELEMENTS USING ID ATTRIBUTESNODELISTS: DOM QUERIES THAT RETURN MORE THAN ONE ELEMENTSELECTING AN ELEMENT FROM A NODELISTSELECTING ELEMENTS USING CLASS ATTRIBUTESSELECTING ELEMENTS BY TAG NAMESELECTING ELEMENTS USING CSS SELECTORSREPEATING ACTIONS FOR AN ENTIRE NODELISTLOOPING THROUGH A NODELISTLOOPING THROUGH A NODELIST: PLAY-BY-PLAYTRAVERSING THE DOMWHITESPACE NODESPREVIOUS & NEXT SIBLINGFIRST & LAST CHILDHOW TO GET/UPDATE ELEMENT CONTENTACCESS & UPDATE A TEXT NODE WITH NODEVALUEACCESSING & CHANGING A TEXT NODEACCESS & UPDATE TEXT WITH TEXTCONTENT (& INNERTEXT)ACCESSING TEXT ONLYADDING OR REMOVING HTML CONTENTACCESS & UPDATE TEXT & MARKUP WITH INNERHTMLUPDATE TEXT & MARKUPADDING ELEMENTS USING DOM MANIPULATIONADDING AN ELEMENT TO THE DOM TREEREMOVING ELEMENTS VIA DOM MANIPULATIONREMOVING AN ELEMENT FROM THE DOM TREECOMPARING TECHNIQUES: UPDATING HTML CONTENTCROSS-SITE SCRIPTING (XSS) ATTACKSDEFENDING AGAINST CROSS-SITE SCRIPTINGXSS: VALIDATION & TEMPLATESXSS: ESCAPING & CONTROLLING MARKUPATTRIBUTE NODESCHECK FOR AN ATTRIBUTE AND GET ITS VALUESCREATING ATTRIBUTES & CHANGING THEIR VALUESREMOVING ATTRIBUTESEXAMINING THE DOM IN CHROMEEXAMINING THE DOM IN FIREFOXEXAMPLE
Chapter 6: Events
DIFFERENT EVENT TYPESHOW EVENTS TRIGGER JAVASCRIPT CODETHREE WAYS TO BIND AN EVENT TO AN ELEMENTHTML EVENT HANDLER ATTRIBUTES (DO NOT USE)TRADITIONAL DOM EVENT HANDLERSUSING DOM EVENT HANDLERSEVENT LISTENERSUSING EVENT LISTENERSUSING PARAMETERS WITH EVENT HANDLERS & LISTENERSUSING PARAMETERS WITH EVENT LISTENERSSUPPORTING OLDER VERSIONS OF IEFALLBACK FOR USING EVENT LISTENERS IN IE8EVENT FLOWWHY FLOW MATTERSTHE EVENT OBJECTTHE EVENT OBJECT IN IE5-8USING EVENT LISTENERS WITH THE EVENT OBJECTEVENT DELEGATIONCHANGING DEFAULT BEHAVIORUSING EVENT DELEGATIONWHICH ELEMENT DID AN EVENT OCCUR ON?DIFFERENT TYPES OF EVENTSUSER INTERFACE EVENTSLOADFOCUS & BLUR EVENTSFOCUS & BLURMOUSE EVENTSCLICKWHERE EVENTS OCCURDETERMINING POSITIONKEYBOARD EVENTSWHICH KEY WAS PRESSEDFORM EVENTSUSING FORM EVENTSMUTATION EVENTS & OBSERVERSUSING MUTATION EVENTSHTML5 EVENTSUSING HTML5 EVENTSEXAMPLE
Chapter 7: jQuery
WHAT IS JQUERY?A BASIC JQUERY EXAMPLEWHY USE JQUERY?FINDING ELEMENTSDOING THINGS WITH YOUR SELECTIONA MATCHED SET / JQUERY SELECTIONJQUERY METHODS THAT GET AND SET DATAJQUERY OBJECTS STORE REFERENCES TO ELEMENTSCACHING JQUERY SELECTIONS IN VARIABLESLOOPINGCHAININGCHECKING A PAGE IS READY TO WORK WITHGETTING ELEMENT CONTENTGETTING AT CONTENTUPDATING ELEMENTSCHANGING CONTENTINSERTING ELEMENTSADDING NEW CONTENTGETTING AND SETTING ATTRIBUTE VALUESWORKING WITH ATTRIBUTESGETTING & SETTING CSS PROPERTIESCHANGING CSS RULESWORKING WITH EACH ELEMENT IN A SELECTIONUSING .EACH()EVENT METHODSEVENTSTHE EVENT OBJECTEVENT OBJECTADDITIONAL PARAMETERS FOR EVENT HANDLERSDELEGATING EVENTSEFFECTSBASIC EFFECTSANIMATING CSS PROPERTIESUSING ANIMATIONTRAVERSING THE DOMTRAVERSINGADD & FILTER ELEMENTS IN A SELECTIONFILTERS IN USEFINDING ITEMS BY ORDERUSING INDEX NUMBERSSELECTING FORM ELEMENTSFORM METHODS & EVENTSWORKING WITH FORMSCUTTING & COPYING ELEMENTSCUT, COPY, PASTEBOX DIMENSIONSCHANGING DIMENSIONSWINDOW & PAGE DIMENSIONSPOSITION OF ELEMENTS ON THE PAGEDETERMINING POSITION OF ITEMS ON THE PAGEWAYS TO INCLUDE JQUERY IN YOUR PAGELOADING JQUERY FROM A CDNWHERE TO PLACE YOUR SCRIPTSJQUERY DOCUMENTATIONEXTENDING JQUERY WITH PLUGINSJAVASCRIPT LIBRARIESPREVENTING CONFLICTS WITH OTHER LIBRARIESEXAMPLE JQUERY
Chapter 8: Ajax & JSON
WHAT IS AJAX?WHY USE AJAX?HOW AJAX WORKSHANDLING AJAX REQUESTS & RESPONSESDATA FORMATSXML: EXTENSIBLE MARKUP LANGUAGEJSON: JAVASCRIPT OBJECT NOTATIONWORKING WITH JSON DATALOADING HTML WITH AJAXLOADING XML WITH AJAXLOADING JSON WITH AJAXWORKING WITH DATA FROM OTHER SERVERSHOW JSONP WORKSUSING JSONPJQUERY & AJAX: REQUESTSJQUERY & AJAX: RESPONSESLOADING HTML INTO A PAGE WITH JQUERYLOADING CONTENTJQUERY'S AJAX SHORTHAND METHODSREQUESTING DATASENDING FORMS USING AJAXSUBMITTING FORMSLOADING JSON & HANDLING AJAX ERRORSJSON & ERRORSAJAX REQUESTS WITH FINE-GRAINED CONTROLCONTROLLING AJAXEXAMPLE AJAX & JSON
Chapter 9: APIs
PLAYING NICELY WITH OTHERSHTML5 JAVASCRIPT APISFEATURE DETECTIONMODERNIZRGEOLOCATION API: FINDING USERS' LOCATIONSTHE GEOLOCATION APIWORKING WITH LOCATIONWEB STORAGE API: STORING DATA IN BROWSERSLOCAL STORAGESESSION STORAGEHISTORY API & PUSHSTATETHE HISTORY OBJECTWORKING WITH HISTORYSCRIPTS WITH APISJQUERY UIJQUERY UI ACCORDIONJQUERY UI TABSJQUERY UI FORMANGULARJSUSING ANGULARVIEW & VIEWMODELDATA BINDING & SCOPEGETTING EXTERNAL DATALOOP THROUGH RESULTSPLATFORM APISGOOGLE MAPS APIBASIC MAP SETTINGSA BASIC GOOGLE MAPCHANGING CONTROLSGOOGLE MAP WITH CUSTOM CONTROLSSTYLING A GOOGLE MAPADDING MARKERS
Chapter 10: Error Handling & Debugging
ORDER OF EXECUTIONEXECUTION CONTEXTSTHE STACKEXECUTION CONTEXT & HOISTINGUNDERSTANDING SCOPEUNDERSTANDING ERRORSERROR OBJECTSERROR OBJECTS CONTINUEDHOW TO DEAL WITH ERRORSA DEBUGGING WORKFLOWBROWSER DEV TOOLS & JAVASCRIPT CONSOLEHOW TO LOOK AT ERRORS IN CHROMEHOW TO LOOK AT ERRORS IN FIREFOXTYPING IN THE CONSOLE IN CHROMETYPING IN THE CONSOLE IN FIREFOXWRITING FROM THE SCRIPT TO THE CONSOLELOGGING DATA TO THE CONSOLEMORE CONSOLE METHODSGROUPING MESSAGESWRITING TABULAR DATAWRITING ON A CONDITIONBREAKPOINTSSTEPPING THROUGH CODECONDITIONAL BREAKPOINTSDEBUGGER KEYWORDHANDLING EXCEPTIONSTRY, CATCH, FINALLYTHROWING ERRORSTHROW ERROR FOR NaNDEBUGGING TIPSCOMMON ERRORS
Chapter 11: Content Panels
SEPARATION OF CONCERNSACCESSIBILITY & NO JAVASCRIPTACCORDIONCREATING AN ACCORDIONTABBED PANELCREATING TAB PANELSMODAL WINDOWCREATING MODALSUSING THE MODAL SCRIPTMODAL OBJECTPHOTO VIEWERUSING THE PHOTO VIEWERASYNCHRONOUS LOADING & CACHING IMAGESPHOTO VIEWER SCRIPT (1)PHOTO VIEWER SCRIPT (2)RESPONSIVE SLIDERUSING THE SLIDERSLIDER SCRIPT OVERVIEWSLIDER SCRIPTSLIDER MOVE() FUNCTIONCREATING A JQUERY PLUGINBASIC PLUGIN STRUCTURETHE ACCORDION PLUGIN
Chapter 12: Filtering, Searching & Sorting
JAVASCRIPT ARRAY METHODSJQUERY METHODS FOR FILTERING & SORTINGSUPPORTING OLDER BROWSERSARRAYS VS. OBJECTS CHOOSING THE BEST DATA STRUCTUREFILTERINGDISPLAYING THE ARRAYUSING ARRAY METHODS TO FILTER DATASTATIC FILTERING OF DATADYNAMIC FILTERINGSTORING REFERENCES TO OBJECTS & DOM NODESDYNAMIC FILTERINGFILTERING AN ARRAYFILTERED IMAGE GALLERYTAGGED IMAGESPROCESSING THE TAGSTHE TAGGED OBJECTFILTERING THE GALLERYTHE FILTER BUTTONSSEARCHSEARCHABLE IMAGESSEARCH TEXTLIVESEARCHSORTINGCHANGING ORDER USING COMPARE FUNCTIONSHOW SORTING WORKSSORTING NUMBERSSORTING DATESSORTING A TABLEHTML TABLE STRUCTURECOMPARE FUNCTIONSTHE COMPARE OBJECTSORTING COLUMNSSORTABLE TABLE SCRIPT
Chapter 13: Form Enhancement & Validation
HELPER FUNCTIONSUTILITIES FILETHE FORM ELEMENTFORM CONTROLSSUBMITTING FORMSTHE SUBMIT EVENT & GETTING FORM VALUESCHANGING TYPE OF INPUTSHOWING A PASSWORDSUBMIT BUTTONSDISABLE SUBMIT BUTTONCHECKBOXESSELECT ALL CHECKBOXESRADIO BUTTONSSELECT BOXESTEXTAREACHARACTER COUNTERHTML5 ELEMENTS & ATTRIBUTESSUPPORT & STYLINGCURRENT APPROACHESPLACEHOLDER FALLBACKPLACEHOLDER POLYFILLPOLYFILL USING MODERNIZR & YEPNOPECONDITIONAL LOADING OF A POLYFILLFORM VALIDATIONFORM HTMLVALIDATION OVERVIEWDEALING WITH ERRORSSUBMITTING THE FORMCODE OVERVIEWREQUIRED FORM ELEMENTSCREATING ERROR MESSAGESDISPLAYING ERROR MESSAGESVALIDATING DIFFERENT TYPES OF INPUTCREATING AN OBJECT TO VALIDATE DATA TYPESREGULAR EXPRESSIONSCOMMON REGULAR EXPRESSIONSCUSTOM VALIDATIONBIO & PASSWORD VALIDATIONCODE DEPENDENCIES & REUSEVALIDATING PARENTAL CONSENTHIDE PARENTAL CONSENTAGE CONFIRMATIONPASSWORD FEEDBACKPASSWORD SCRIPT
Index

Content preview from JavaScript and JQuery: Interactive Front-End Web Development

11 CONTENT PANELS

Content panels allow you to showcase extra information within a limited space. In this chapter, you will see several examples of content panels that also give you practical insight into creating your own scripts using jQuery.

In this chapter, you will see how to create many types of content panels: accordions, tabbed panels, modal windows (also known as a lightboxes), a photo viewer, and a responsive slider. Each example of a content panel also demonstrates how to apply the code you have learned throughout the book so far in a practical setting.

Throughout the chapter, reference will be made to more complex jQuery plugins that extend the functionality of the examples shown here. But the code samples in this chapter also show how it is possible to achieve techniques you will have seen on popular websites in relatively few lines of code (without needing to rely on plugins written by other people).

ACCORDION

An accordion features titles which, when clicked, expand to show a larger panel of content.

MODAL WINDOW

When you click on a link for a modal window (or “lightbox”), a hidden panel will be displayed.

RESPONSIVE SLIDER

The slider allows you to show panels of content that slide into view as the user navigates between them.

TABBED PANEL

Tabs automatically show one ...

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

Front-End Web Development with Modern HTML, CSS, and JavaScript

Laurence Svekis

HTML CSS and JavaScript for Beginners - A Web Design Course

Laurence Svekis

Learn Enough JavaScript to Be Dangerous: Write Programs, Publish Packages, and Develop Interactive Websites with JavaScript

Michael Hartl

Web Development with Node and Express, 2nd Edition

Ethan Brown

Publisher Resources

ISBN: 9781118531648Purchase book Other

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

JavaScript and JQuery: Interactive Front-End Web Development

by Jon Duckett

11