book

JavaScript and JQuery: Interactive Front-End Web Development

by Jon Duckett

June 2014

Beginner

640 pages

14h 12m

English

Wiley

Read now

Unlock full access

EXAMPLES OF JAVASCRIPT IN THE BROWSERTHE STRUCTURE OF THIS BOOKHTML & CSS: A QUICK REFRESHERBROWSER SUPPORT
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
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
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
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

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
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
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
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
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
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
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
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
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

Overview

Learn JavaScript and jQuery a nicer way

This full-color book adopts a visual approach to teaching JavaScript & jQuery, showing you how to make web pages more interactive and interfaces more intuitive through the use of inspiring code examples, infographics, and photography. The content assumes no previous programming experience, other than knowing how to create a basic web page in HTML & CSS. You'll learn how to achieve techniques seen on many popular websites (such as adding animation, tabbed panels, content sliders, form validation, interactive galleries, and sorting data)..

Introduces core programming concepts in JavaScript and jQuery

Uses clear descriptions, inspiring examples, and easy-to-follow diagrams

Teaches you how to create scripts from scratch, and understand the thousands of JavaScripts, JavaScript APIs, and jQuery plugins that are available on the web

Demonstrates the latest practices in progressive enhancement, cross-browser compatibility, and when you may be better off using CSS3

If you're looking to create more enriching web experiences and express your creativity through code, then this is the book for you.

This book is also available as part of a set in hardcover - Web Design with HTML, CSS, JavaScript and jQuery, 9781119038634 - and in softcover - Web Design with HTML, CSS, JavaScript and jQuery, 9781118907443.