Examples For Masterminds

TableofContents
Examples
DownloadTXTFiles
Chapter1WebDevelopment
Listing11:CreatinganHTMLdocument
Listing12:DeclaringCSSrules
Listing13:DeclaringJavascriptcode
Listing14:Declaringserversidecode
Chapter2HTML
Listing21:Includingthe<!DOCTYPE>element
<!DOCTYPEhtml>
Listing22:Includingthe<html>element
Listing23:Includingthe<head>element
Listing24:Includingthe<body>element
Listing25:Includingthe<title>element
Listing26:Includingthe<meta>element
Listing27:Addingmore<meta>elements
Listing28:Includingthedocument'sicon
Listing29:LoadingaCSSfilewiththe<link>element
Listing210:Includingthe<header>element
Listing211:Includingthe<nav>element
Listing212:Organizingthemaincontent
Listing213:Includingthe<article>element
Listing214:Includingthe<footer>element
Listing215:Identifyingelementswiththeidattribute
Listing216:Identifyingelementswiththeclassattribute
Listing217:Includingthe<h1>element
Listing218:Defininglinesoftextwiththe<p>element
Listing219:Showingthetextintheoriginalformat
Listing220:Addinglinebreakstoaparagraphwiththe<br>element
Listing221:Highlightingtext
Listing222:Complementingthe<article>element
Listing223:Complementingthe<footer>element
Listing224:Presentingcodewiththe<code>and<pre>elements
Listing225:Linkingthedocumenttootherdocumentswiththe<a>element
Listing226:Linkingthedocumenttodocumentsinotherwebsiteswiththe
<a>element
Listing227:Openingthelinkinanewwindow
Listing228:Creatinglinkstoelementsinthedocument
Listing229:Sendinganemail
Listing230:Applyingthepinganddownloadattributes
Listing231:Includinganimageinthedocument
Listing232:Reducingthesizeoftheimage
Listing233:Identifyingthepicturewiththe<figure>element
Listing234:Creatinganunorderedlistofitems
Listing235:Creatinganorderedlistofitems
Listing236:Creatingalistinreverseorder
Listing237:Creatingalistoftermsanddescriptions
Listing238:Creatingasimplelistwiththe<blockquote>element
Listing239:Disclosinginformationwiththe<details>andthe<summary>
elements
Listing240:Creatingatable
Listing241:Creatingatablewithaheader
Listing242:Stretchingcells
Listing243:Usingthetranslateattribute
Listing244:Usingcontenteditabletoeditcontent
Listing245:Defininganemptyformwiththe<form>element
Listing246:Includingtoolsinaform
Listing247:AssigningadifferentnametotheSubmitbutton
Listing248:Declaringinitialvalues
Listing249:Identifyingformelements
Listing250:Associatinglabelswithelementsusingtheforattribute
Listing251:Settingthemaximumnumberofcharactersallowed
Listing252:Requestingspecifictypesofinputs
Listing253:Restrictingthenumbers
Listing254:Usingtherangetype
Listing255:Usingtheradiotype
Listing256:Usingthecheckboxtype
Listing257:Usingthedatetype
Listing258:Usingthecolortype
Listing259:Usingtheimagetypetocreateasubmitbutton
Listing260:Usingthe<button>elementtocreateasubmitbutton
Listing261:Usingthe<textarea>element
Listing262:Usingthe<select>element
Listing263:Suggestingalistofvalueswiththe<datalist>element
Listing264:Usingthe<progress>element
Listing265:Usingthe<meter>element
Listing266:FormwiththemethodGET
Listing267:ProcessingdataintheserverwithPHP(process.php)
Listing268:GeneratinganHTMLdocumentwithPHP(process.php)
Listing269:Usingthedisabledattribute
Listing270:Usingtheplaceholderattribute
Listing271:Sendingaformwithoutvalidationwiththeformnovalidate
attribute
Listing272:Declaringtheemailinputasarequiredfield
Listing273:Customizingtypeswiththepatternattribute
Listing274:Declaringtheemailinputasamultiplefield
Listing275:Usingtheautocompleteattribute
Listing276:Usingtheautofocusattribute
Listing277:Deactivatingthespellcheckfeature
Listing278:Declaringformelementsanywhereinthedocument
Chapter3CSS
Listing31:DeclaringCSSproperties
Listing32:DeclaringCSSrules
Listing33:InlineStyles
Listing34:Includingstylesintheheadofthedocument
Listing35:ApplyingCSSstylesfromanexternalfile
Listing36:DefiningCSSstylesinanexternalfile
Listing37:Inheritingstyles
Listing38:Overwritingstyles
Listing39:Referencing<span>elementsbykeyword
Listing310:Declaringruleswithmultipleselectors
Listing311:Combiningselectors
Listing312:Testingselectors
Listing313:Applyingthe>selector
Listing314:Applyingthe+selector
Listing315:Applyingthe~selector
Listing316:Referencingbythevalueoftheidattribute
Listing317:Identifyingtheelement<p>byitsidattribute
Listing318:Referencingbythevalueoftheclassattribute
Listing319:Assigningstyleswiththeclassattribute
Listing320:Declaringaclassonlyfor<p>elements
Listing321:Referencingonly<p>elementsthathaveanameattribute
Listing322:Referencing<p>elementsthathaveanameattributewiththe
valuemytext
Listing323:Applyingattributeselectors
Listing324:Creatingadocumenttotestpseudoclasses
Listing325:Implementingthepseudoclass:nthchild()
Listing326:Changingtheindextoaffectadifferentelement
Listing327:Creatingalistwiththepseudoclass:nthchild()
Listing328:Implementingthekeywordsoddandeven
Listing329:Using:lastchildtomodifythelast<p>elementofthelist
Listing330:Applyingstylestoeveryelementexcept<p>
Listing331:Defininganexceptionusingtheclassattribute
Listing332:Testingformattingproperties
Listing333:Changingthefontfamilyandsizeofthetitle
Listing334:Changingthefontwiththefontproperty
Listing335:Aligningtextwiththetextalignproperty
Listing336:Definingthespacebetweenwordswiththewordspacing
property
Listing337:Removingtheunderlineinthelinksofourdocument
Listing338:Loadingacustomfontforthetitle
Listing339:Assigningacolortothetitle
Listing340:Assigningacolorwiththergb()function
Listing341:Assigningacolorwiththehsl()function
Listing342:Assigningacustomwidth
Listing343:Assigningacustomheight
Listing344:Hidingthecontentthatoverflows
Listing345:Addingscrollbars
Listing346:Addingmarginsandpaddings
Listing347:Addingabackgroundcolor
Listing348:Addingabackgroundimage
Listing349:Configuringthebackground
Listing350:Configuringthebackgroundwiththebackgroundproperty
Listing351:Addingabordertoanelement
Listing352:Definingaborderwiththeborderproperty
Listing353:Generatingroundcorners
Listing354:Declaringdifferentvaluesforeachcorner
Listing355:Generatingellipticcorners
Listing356:Addinganoutlinetotheheader
Listing357:Creatingacustomborderfortheheaderbox
Listing358:Definingaborderimagewiththeborderimageproperty
Listing359:Addingashadowtotheheader
Listing360:Addingtheblurvaluetotheboxshadowproperty
Listing361:Expandingtheshadow
Listing362:Creatinganinnershadow
Listing363:Addingashadowtothetitle
Listing364:Addingalineargradienttotheheader
Listing365:Settingtheinitialposition
Listing366:Creatingagradientwithadirectionof30degrees
Listing367:Creatingamulticolorgradient
Listing368:Creatingatranslucentgradient
Listing369:Settingcolorstops
Listing370:Creatingaradialgradient
Listing371:Creatingamulticolorradialgradient
Listing372:Applyingafiltertotheheader
Listing373:Scalingtheheader
Listing374:Creatingamirrorimagewiththescale()function
Listing375:Rotatingtheheader
Listing376:Distortingtheheader
Listing377:Movingtheheadertotheright
Listing378:Moving,scalingandrotatingtheelementwithjustoneproperty
Listing379:Addingathreedimensionaleffecttotheheader
Listing380:Declaringadifferentoriginfortheviewer
Listing381:Respondingtothemouse
Listing382:Creatingacompleteanimationusingthetransitionproperty
Listing383:Creatingacomplexanimation
Listing384:Declaringmoreframesforouranimation
Chapter4WebDesign
Listing41:DefiningHTML5elementsasblockelements
Listing42:Testingthefloatproperty
Listing43:Floatingtheimagetotheleft
Listing44:Recoveringthenormalflowwiththeoverflowproperty
Listing45:Addinganemptyelementtoapplytheclearproperty
Listing46:Recoveringthenormalflowwiththeclearproperty
Listing47:Creatingadocumenttotestthefloatproperty
Listing48:Floatingboxestotheleft
Listing49:Reducingthesizeofthecontainer
Listing410:Floatingboxestotheleftandright
Listing411:Settingtherelativepositionofanelement
Listing412:Settingtheabsolutepositionofanelement
Listing413:Settingthezindex
Listing414:Showingaslidewithadditionalinformation
Listing415:Stylingtheboxes
Listing416:Animatingtheslide
Listing417:Splittingarticlesintocolumns
Listing418:Definingthecolumns
Listing419:Addingarulebetweenthecolumns
Listing420:DefiningadocumentfortheTraditionalBoxModel
Listing421:Implementingaresetrule
Listing422:Assigningstylestotheheader
Listing423:Assigningstylestothenavigationarea
Listing424:Assigningstylestotheoptionsofthemenu
Listing425:Assigningstylestothemaincontent
Listing426:Creatingthecolumnsforthemaincontent
Listing427:Settingthepositionandstylesofthe<time>element
Listing428:Assigningstylestothearticles
Listing429:Assigningstylestothefooter
Listing430:Calculatingthesizeofthesectionswithpercentages
Listing431:Addingsubmenus
Listing432:Assigningstylestosubmenus
Listing433:Organizingboxeswithaflexiblecontainer
Listing434:Declaringtheelementparentboxasaflexiblecontainer
Listing435:Makingtheboxesflexiblewiththeflexproperty
Listing436:Creatinganunevendistribution
Listing437:Combininginflexibleandflexibleboxes
Listing438:Controllinghowtheelementsshrink
Listing439:Definingflexibleboxeswithapreferredsize
Listing440:Declaringamaximumsize
Listing441:Reversingtheorientationoftheboxes
Listing442:Definingthepositionofeachbox
Listing443:Distributingemptyspaceinaflexiblecontainer
Listing444:Distributingemptyspacewithjustifycontent
Listing445:Distributingverticalspace
Listing446:Stretchingtheboxestooccupytheverticalspaceavailable
Listing447:Aligningtheboxestothetop
Listing448:Aligningtheboxesbythebaseline
Listing449:Changingthealignmentforthebox2element
Listing450:Creatingtwolinesofboxeswiththeflexwrapproperty
Listing451:Aligningmultiplelineswiththealigncontentproperty
Listing452:DefiningadocumentfortheFlexibleBoxModel
Listing453:Turningtheheaderintoaflexiblecontainer
Listing454:Turningthemenuintoaflexiblecontainer
Listing455:Turningthecolumnsintoflexiblecontainers
Listing456:Configuringthecontent
Listing457:Turningthefooterintoaflexiblecontainer
Chapter5ResponsiveWebDesign
Listing51:LoadingstyleswithMediaQueries
Listing52:Definingthestylesbydefault(responsiveall.css)
Listing53:Definingthestylesforsmalldevices(responsivephones.css)
Listing54:DeclaringMediaQuerieswiththe@mediaatrule
(responsiveall.css)
Listing55:Addingmultiplebreakpoints
Listing56:Addingtheviewport<meta>tag
Listing57:Creatingflexibleelementswithpercentages
Listing58:Addingmarginsandpaddingstoflexibleelements
Listing59:Includingpaddingandborderinthesizeoftheelement
Listing510:Declaringflexibleandfixedcolumns
Listing511:Movingthefixedcolumntotheleft
Listing512:Creatingadocumentwithtwofixedcolumns
Listing513:Definingtwofixedcolumnsonthesides
Listing514:Declaringrelativefontsizes
Listing515:Declaringrelativesizesforelementsandcontainers
Listing516:Declaringrelativesizesforelementswithremunits
Listing517:Adaptingthesizeoftheimages
Listing518:Settingamaximumsizeforimages
Listing519:Selectingtheimagewiththe<picture>element
Listing520:Selectingimagesfordifferentresolutions
Listing521:Declaringthesizeofanimagewithhighresolution
Listing522:Declaringthemaximumsizeofanimagewithhighresolution
Listing523:Includingtheelementtoshowthebackgroundimage
Listing524:Updatingthebackgroundimage
Listing525:DefiningflexibleelementswiththeTraditionalBoxModel
Listing526:Repositioningthe<time>element
Listing527:Rearrangingthecolumns
Listing528:Creatingamobilemenu
Listing529:Addingamenubuttonforsmallscreens
Listing530:Hidingthemenubutton
Listing531:Replacingthemenuwiththebutton
Listing532:Showingthemenuwhenthebuttonispressed
Listing533:Displayingthemenuasaflexiblecontainer
Listing534:DesigningaresponsivedocumentwiththeFlexibleBoxModel
Listing535:Movingthe<time>element
Listing536:Movingfromatwocolumntoaonecolumndesign
Listing537:Adaptingthemenuandthefooter
Chapter6Javascript
Listing61:DefininginlineJavascript
Listing62:Implementingmultipleeventattributes
Listing63:Respondingtotheloadevent
Listing64:EmbeddingJavascriptinthedocument
Listing65:IntroducingJavascriptcodefromanexternalfile
Listing66:CreatingaJavascriptfile(mycode.js)
Listing67:DeclaringavariableinJavascript
Listing68:Usingthecontentofavariable
Listing69:Assigninganewvaluetoavariable
Listing610:Assigningthevalueofavariabletoanothervariable
Listing611:Performinganoperationwiththevaluestoredinavariable
Listing612:Performingcomplexoperations
Listing613:Controllingprecedenceintheoperation
Listing614:Incrementingthevalueofavariable
Listing615:Incrementingthevalueofavariablebyaspecificvalue
Listing616:Calculatingtheremainder
Listing617:Determiningtheparityofanumber
Listing618:Assigningastringofcharacterstoavariable
Listing619:Concatenatingtext
Listing620:Addingtextatthebeginningofthevalue
Listing621:Concatenatingstringsandnumbers
Listing622:Concatenatingnumbers
Listing623:Escapingcharacters
Listing624:Generatingnewlines
Listing625:DeclaringaBooleanvariable
Listing626:Creatingarrays
Listing627:Displayingthearray'svalues
Listing628:Usingdifferenttypesofvalues
Listing629:Declaringavalueasundefined
Listing630:Declaringanullvalue
Listing631:Workingwithvaluesinarrays
Listing632:Definingmultidimensionalarrays
Listing633:Accessingmultidimensionalarrays
Listing634:Assigninganemptyarrayasthevalueofanotherarray
Listing635:Assigninganemptyarraytoavariable
Listing636:Checkingaconditionwithif
Listing637:Invertingtheresultofthecondition
Listing638:Checkingmultipleconditionswithlogicaloperators
Listing639:UsingBooleanvaluesasconditions
Listing640:Usingintegernumbersasconditions
Listing641:Usingstringasconditions
Listing642:Checkingtwoconditionswithifelse
Listing643:Checkingavaluewiththeswitchinstruction
Listing644:Creatingaloopwiththeforinstruction
Listing645:Iteratingoverthevaluesofanarray
Listing646:Usingthewhileinstruction
Listing647:Usingthedowhileinstruction
Listing648:Jumpingtothenextcycleoftheloop
Listing649:Interruptingtheloop
Listing650:Declaringfunctions
Listing651:Processingdatawithfunctions
Listing652:Declaringglobalandlocalvariables
Listing653:Declaringtwovariableswiththesamename
Listing654:Sendingavaluetoafunction
Listing655:Callingthefunctionwithdifferentvalues
Listing656:Sendingthevalueofavariabletoafunction
Listing657:Sendingmultiplevaluestoafunction
Listing658:Returningvaluesfromfunctions
Listing659:Returningdifferentvaluesfromafunction
Listing660:Declaringanonymousfunctions
Listing661:Executinganonymousfunctions
Listing662:Checkingwhetheravalueisanumberornot
Listing663:Convertingastringintoanumber
Listing664:EncodingastringtoincludeitinaURL
Listing665:Creatingobjects
Listing666:Accessingproperties
Listing667:Accessingpropertiesusingvariables
Listing668:Accessingpropertieswithinvalidnames
Listing669:Updatingvaluesandaddingnewpropertiestotheobject
Listing670:Creatingobjectsinsideobjects
Listing671:Declaringandexecutingmethods
Listing672:Returningvaluesfrommethods
Listing673:Referencingtheobject'spropertieswiththethiskeyword
Listing674:Usingaconstructortocreateanobject
Listing675:Sendinginitialvaluestoaconstructor
Listing676:Usingconstructorstocreatemultipleobjects
Listing677:Definingprivateproperties
Listing678:Creatingobjectswiththenewoperator
Listing679:Defininginitialvaluesfortheobject
Listing680:Creatingobjectsfromotherobjects
Listing681:Addinganewmethodtotheprototype
Listing682:Testingtheprototypechain
Listing683:Creatingnumberswithaconstructor
Listing684:Creatingnumbersfromstrings
Listing685:Performingarithmeticoperationswithobjects
Listing686:Creatinganarraywithaconstructor
Listing687:Creatinganemptyarraywithaconstructor
Listing688:Countingthenumberofcharactersinastring
Listing689:Iteratingthroughthecharactersofastring
Listing690:Removingspacecharacters
Listing691:Processingastring
Listing692:Convertingastringtouppercase
Listing693:Copyingasetofcharacters
Listing694:Copyingallthecharactersfromanindextotheendofthestring
Listing695:Referencingcharacterswithnegativeindexes
Listing696:Copyingcharactersbetweentwoindexes
Listing697:Gettingwordsfromastring
Listing698:Searchingforastringatthebeginningofanotherstring
Listing699:Searchingforastringinsideanotherstring
Listing6100:Findingthelocationofastringinsideanotherstring
Listing6101:Replacingastringbyanotherstring
Listing6102:Gettingtheamountofvaluesinthearray
Listing6103:Iteratingthroughthearray
Listing6104:Creatinganarrayfromthevaluesofanotherarray
Listing6105:Filteringthevaluesofanarray
Listing6106:Returningaconditiontofiltertheelements
Listing6107:Checkingthevaluesofanarray
Listing6108:Creatingastringwiththevaluesofanarray
Listing6109:Gettingtheindexofavalueinanarray
Listing6110:Searchingformultiplevaluesinanarray
Listing6111:Addingvaluestoanarray
Listing6112:Addingmultiplevaluestoanarray
Listing6113:Concatenatingtwoarrays
Listing6114:Removingvaluesfromanarray
Listing6115:Removingvaluesfromanarray
Listing6116:Addingvaluestoanarrayinaspecificposition
Listing6117:Sortingthevaluesofanarrayinreverseorder
Listing6118:Sortingthevaluesinalphabeticalorder
Listing6119:Sortingthevaluesinnumericalorder
Listing6120:Processingthevaluesandstoringtheresults
Listing6121:CreatingaDateobject
Listing6122:CreatingaDateobjectfromastring
Listing6123:CreatingaDateobjectfromdatecomponents
Listing6124:Readingthecomponentsofadate
Listing6125:Readingthemonth
Listing6126:Incrementingadate
Listing6127:Calculatinganinterval
Listing6128:Calculatinganintervalinseconds
Listing6129:Calculatinganintervalindays
Listing6130:Comparingtwodates
Listing6131:Comparingonlythedatewithoutthetime
Listing6132:PerformingarithmeticoperationswiththeMathobject
Listing6133:Gettingarandomnumber
Listing6134:Defininganewlocation
Listing6135:Refreshingthepage
Listing6136:Openinganewwindow
Listing6137:Usingtimerstoexecutefunctions
Listing6138:Cancellingatimer
Listing6139:GettingareferencetotheElementobjectthatrepresentsan
element
Listing6140:Readingtheelement'sattributesfromJavascript
Listing6141:Accessingelementsbykeyword
Listing6142:Accessinganelementbykeyword
Listing6143:FindinganelementwiththequerySelector()method
Listing6144:Searchingforanelementinsideanotherelement
Listing6145:Assigningnewstylestoanelement
Listing6146:ReadingCSSstylesfromJavascript
Listing6147:Replacingtheelement'sclass
Listing6148:Turningclassesonandoff
Listing6149:Turningclassesonandoffwiththetoggle()method
Listing6150:Assigningcontenttoanelement
Listing6151:Modifyingthecontentofanelement
Listing6152:InsertingHTMLcodeintothedocument
Listing6153:AddingHTMLcodeinsideanelement
Listing6154:CreatingElementobjects
Listing6155:AddingcontenttoanElementobject
Listing6156:DefiningeventattributesfromJavascriptcode
Listing6157:ListeningtoeventswiththeaddEventListener()method
Listing6158:UsingEventobjects
Listing6159:Respondingtoaneventwithananonymousfunction
Listing6160:Passingvaluestoalistener
Listing6161:Passingvaluestoalistenerwithanonymousfunctions
Listing6162:Reportingthepositionofthemouse
Listing6163:Calculatingthepositionofthemouseonanelement
Listing6164:Detectingthekeypressed
Listing6165:Detectingspecialkeys
Listing6166:Generatinganerror
Listing6167:Showingmessagesontheconsolewiththelog()method
Listing6168:Respondingtoerrors
Listing6169:Throwingexceptions
Listing6170:DetectingfeatureswithModernizr
Chapter7FormsAPI
Listing71:SubmittingaformfromJavascript
Listing72:Gettingareferencetothe<form>elementfromtheforms
property
Listing73:Checkingthevalidityoftheform
Listing74:Settingcustomerrormessages
Listing75:Creatingacustomvalidationsystem
Listing76:Validationinrealtime
Listing77:Readingvaliditystatestodisplayacustomizederrormessage
Listing78:Usingthe:validand:invalidpseudoclasses
Listing79:Usingthe:requiredand:optionalpseudoclasses
Listing710:Usingthe:inrangeand:outofrangepseudoclasses
Chapter8Media
Listing81:Playingvideowiththe<video>element
Listing82:Activatingthecontrolsbydefault
Listing83:Definingthedisplayarea
Listing84:Includingaplaceholderforthevideo
Listing85:Creatingacrossbrowservideoplayerwithdefaultcontrols
Listing86:Playingaudiowiththe<audio>element
Listing87:Creatingacrossbrowseraudioplayerwithdefaultcontrols
Listing88:CreatingavideoplayerwithHTML
Listing89:Designingthevideoplayer
Listing810:Initializingtheapplication
Listing811:Playingandpausingthevideo
Listing812:Updatingtheprogressbar
Listing813:Playingfromthepositionselectedbytheuser
Listing814:Switchingtosoundorsilencewiththemutedproperty
Listing815:Controllingthevolume
Listing816:Listeningtotheloadeventtostarttheapplication
Listing817:Addingsubtitleswiththe<track>element
Listing818:DefiningaWebVTTfile
Listing819:IncludingtagsinaWebVTTfile
Listing820:DeclaringstylesforWebVTT
Listing821:Configuringcues
Listing822:GettingtheTextTrackobject
Listing823:Displayingthetracksinformationonthescreen
Listing824:Displayingcuesonthescreen
Listing825:Displayinginformationaboutcues
Listing826:AddingtracksandcuesfromJavascript
Chapter9StreamAPI
Listing91:Accessingthewebcam
Listing92:Showingstreamsinformation
Listing93:Stoppingthestream
Chapter10FullscreenAPI
Listing101:Takinga<video>elementfullscreen
Listing102:Takinganyelementfullscreen
Chapter11CanvasAPI
Listing111:Includingthe<canvas>element
Listing112:Gettingthedrawingcontextforthecanvas
Listing113:Drawingrectangles
Listing114:Changingcolors
Listing115:Applyingalineargradienttothecanvas
Listing116:Startingandendingapath
Listing117:Creatingapath
Listing118:Completingthetriangle
Listing119:Drawingasolidtriangle
Listing1110:Usingatriangleasamask
Listing1111:Drawingcircleswiththearc()method
Listing1112:Drawinganarcof45degrees
Listing1113:Creatingcomplexcurves
Listing1114:Testingpropertiesforlines
Listing1115:Drawingtext
Listing1116:Measuringtext
Listing1117:Applyingshadowstotext
Listing1118:Translating,rotatingandscaling
Listing1119:Cumulativetransformationofthematrix
Listing1120:Savingandrestoringthecanvasstate
Listing1121:TestingtheglobalCompositeOperationproperty
Listing1122:Drawinganimage
Listing1123:Adjustingtheimagetothesizeofthecanvas
Listing1124:Extracting,resizinganddrawing
Listing1125:Addingapatterntoourpaths
Listing1126:Generatingthenegativeofanimage
Listing1127:Enablingcrossoriginaccess
Listing1128:Creatingadocumenttoshowanimagewiththecanvas'
content
Listing1129:Creatinganimagewiththecanvas'content
Listing1130:Creatingananimation
Listing1131:Creatingthedocumenttoshowaprofessionalanimation
Listing1132:Creatinga2Dvideogame
Listing1133:Showingvideooncanvas
Listing1134:Programmingasnapshotapplication
Chapter12WebGL
Listing121:IncludingtheThree.jslibraryinthedocument
Listing122:Creatingawireframesphere
Listing123:Rotatingacubewiththemouse
Listing124:Addinglighttothescene
Listing125:Addingtexturetoanobject
Listing126:Applyingadifferenttextureforeachfaceofthecube
Listing127:Including3Dtextinourscene
Listing128:Introducingvideoina3Dworld
Listing129:Loading3Dmodels
Listing1210:Creatingthedocumentfora3Dvideogame
Listing1211:Definingbasicproperties
Listing1212:Definingtheinitiate()method
Listing1213:Definingtheloading()method
Listing1214:Definingthecreate()method
Listing1215:Definingthecontrol()method
Listing1216:Definingtheprocess()method
Listing1217:Definingthedraw()method
Listing1218:Definingthedetect()method
Listing1219:Definingtheloop()method
Chapter13PointerLockAPI
Listing131:Takingcontrolofthemouse
Listing132:Reportingachangeintheconditionofthemouse
Listing133:Checkingtheconditionofthemouse
Listing134:Lockingandunlockingthemouse
Listing135:CalculatingthepositionofthemousewithmovementXand
movementY
Chapter14WebStorageAPI
Listing141:CreatingadocumenttoworkwiththeStorageAPI
Listing142:Designingtheinterface
Listing143:Storingandretrievingdata
Listing144:Usingashortcuttoworkwithitems
Listing145:Listingalltheitemsinthestoragespace
Listing146:Deletingitemsinthestoragespace
Listing147:UsingLocalStorage
Listing148:Listeningtothestorageeventtokeepthelistofitemsupdated
Listing149:Accessingtheevent'sproperties
Chapter15IndexedDBAPI
Listing151:CreatingadocumenttotesttheIndexedDBAPI
Listing152:Definingthestylesfortheboxes
Listing153:Openingthedatabase
Listing154:Reportingerrorsandgettingareferencetothedatabase
Listing155:DeclaringObjectStoresandindexes
Listing156:AddingobjectstoourObjectStore
Listing157:Readingthenewobject
Listing158:Initiatingtheapplication
Listing159:Listingobjects
Listing1510:Listingobjectsbyyearindescendingorder
Listing1511:Deletingobjects
Listing1512:Creatingadocumenttosearchformovies
Listing1513:Searchingformovies
Chapter16FileAPI
Listing161:Creatingadocumenttoloadfiles
Listing162:Definingthestylesfortheformandthedataboxelement
Listing163:Readingatextfile
Listing164:Loadingimages
Listing165:Workingwithblobsandtheslice()method
Listing166:Assigningablobtoan<img>element
Listing167:Usingeventstocontroltheprocess
Chapter17DragandDropAPI
Listing173/Listing174/Listing176/Listing178:ThegetAttribute()method
appliedintheseexamplesreturnsthevalueoftheattributebetweenparenthesis,butyou
canreadtheattributeusingdotnotation,asexplainedinChapter6.Theseexampleswere
modifiedtousedotnotationinstead.
Listing171:CreatingadocumenttoexperimentwiththeDragandDropAPI
Listing173:Processingadraganddropoperation
Listing174:Providingfeedbacktotheuser
Listing175:Designingadocumenttodraganddropfrommultiplesources
Listing176:Filteringimagesbytheidattribute
Listing177:Usinga<canvas>elementasadropbox
Listing178:Configuringthethumbnail
Listing179:Creatingasimpledocumenttodropfiles
Listing1710:Processingthedatacontainedinthefilesproperty
Chapter18GeolocationAPI
Listing181:CreatingadocumenttotesttheGeolocationAPI
Listing182:Gettingthelocation'sinformation
Listing183:Showingerrormessages
Listing184:ConfiguringtheGeolocationsystem
Listing185:TestingthewatchPosition()method
Listing186:RepresentingthelocationonamapusingtheGoogleMapsAPI
Chapter19HistoryAPI
Listing191:Navigatingbackinthebrowser'shistory
Listing192:CreatingabasicdocumenttoexperimentwiththeHistoryAPI
Listing193:Definingthestylesfortheboxesandthe<span>elements
Listing194:GeneratinganewURLandcontent
Listing195:Keepingtrackoftheuserslocationinthehistory
Listing196:Creatingthemaindocumentforourapplication
Listing197:Manipulatinghistory
Chapter20PageVisibilityAPI
Listing201:Reportingthevisibilitystate
Listing202:Respondingtothevisibilitystate
Listing203:Combiningtheblur,focusandvisibilitychangeevents
Chapter21AjaxLevel2
Listing211:CreatingadocumenttoprocessAjaxrequests
Listing212:Designingthestylestoshapetheboxesonthescreen
Listing213:Readingafile
Listing214:Readinganimagefromtheserver
Listing215:Showingtheprogressoftherequest
Listing216:Sendingavirtualformtotheserver
Listing217:RespondingtoaPOSTrequest(process.php)
Listing218:Creatingadocumenttouploadfiles
Listing219:UploadingafilewithFormData()
Listing2110:Definingthedroppingareatouploadfiles
Listing2111:Uploadingfilesonebyone
Chapter22WebMessagingAPI
Listing221:IncludinganiframeinsideadocumenttotesttheWeb
MessagingAPI
Listing222:Definingtheboxes(messaging.css)
Listing223:Sendingamessagetotheiframe(messaging.js)
Listing224:Creatingadocumentfortheiframe(iframe.html)
Listing225:Processingmessagesinthetarget(iframe.js)
Listing226:Communicatingwithspecificorigins/targets
Listing227:Communicatingwithspecificorigins(messaging.js)
Listing228:Respondingtothemaindocument(iframe.js)
Chapter23WebSocketAPI
Listing231:AdaptingtheonMessage()functiontoourapplication
(demo.php)
Listing232:Creatingthedocumenttoinsertcommands
Listing234:Sendingmessagestotheserver
Listing235:Informingtheuseraboutthestateoftheconnection
Chapter24WebRTCAPI
Listing244:Inthisexampleweconfiguredtheserverasaturnserverbutitshouldbea
stunserver.Theinstructionvarservers={"iceServers":[{"urls":"turn:
stun.l.google.com:19302"}]}shouldbewrittenasvarservers={"iceServers":
[{"urls":"stun:stun.l.google.com:19302"}]}
Listing244:TheRTCPeerConnection()constructordoesn'trequirethevendorprefix
anymore.TheinstructionwebkitRTCPeerConnection(servers)shouldbewrittenas
RTCPeerConnection(servers)
Listing241:RespondingtooffersandanswersfromtheWebSocketserver
(demo.php)
Listing242:Creatingadocumenttomakevideocalls
Listing243:ConnectingwiththeWebSocketserverandgettingthemedia
streams
Listing244:Startingthepeertopeerconnection
Listing245:GettingtheSessionDescription
Listing246:Sendinganoffertoaremotepeer
Listing247:Sendingsignalstotheremotepeer
Listing248:Processingthesignals
Listing249:Respondingtotheaddstreamandicecandidateevents
Listing2410:Listeningtotheloadeventtostarttheapplication
Listing2411:Creatingadocumenttotestdatachannels
Listing2412:Creatingthepeertopeerconnectionwithadatachannel
Chapter25WebAudioAPI
Listing2513:TherequestAnimationFrame()methoddoesn'trequirethevendorprefix
anymore.TheinstructionwebkitRequestAnimationFrame(showgraphic)shouldbe
writtenasrequestAnimationFrame(showgraphic)
Listing251:Creatingadocumenttoplaysounds
Listing252:Playinganaudiobuffer
Listing253:Playingtheaudiosourcenodeinaloop
Listing254:TurningdownthevolumeusingaGainNode
Listing255:Introducingdelay
Listing256:GettinganechoeffectwiththeDelayNode
Listing257:AddingafilterwiththeBiquadFilterNode
Listing258:Addingadynamiccompressor
Listing259:Applyingaconvolutioneffect
Listing2511:Calculatingthepositionofthesoundina3Dscene
Listing2512:CreatingadocumenttoexperimentwiththeAnalyserNode
Listing2513:Drawingthechartona<canvas>element
Chapter26WebWorkersAPI
Listing261:CreatingadocumenttoexperimentwithWebWorkers
Listing262:Definingthestylesfortheboxes(webworkers.css)
Listing263:Loadingtheworker(webworkers.js)
Listing264:Creatingtheworker(worker.js)
Listing265:Listeningtotheerrorevent(webworkers.js)
Listing266:Producinganerror(worker.js)
Listing267:Terminatingtheworkerfromthemaincode(webworkers.js)
Listing268:Terminatingtheworkerfromthecodeoftheworker
Listing269:LoadingexternalJavascriptcodesfortheworker
Listing2610:Creatingadocumenttoexperimentwithsharedworkers
Listing2611:Creatingthedocumentfortheiframe(iframe.html)
Listing2612:Connectingtotheworkerfromthemaindocument
(webworkers.js)
Listing2613:Connectingtotheworkerfromtheiframe(iframe.js)
Listing2614:Respondingfromasharedworker(worker.js)
GetThisBookNow!
HTML5forMasterminds
HowtotakeadvantageofHTML5to
createresponsivewebsitesand
revolutionaryapplications
HTML5forMasterminds3rdEdition,now
withacompletecourseonWeb
DevelopmentandResponsiveWebDesign.
Learnhowtocreatewebsitesand
applicationsfordesktopandmobiledevices
withHTML,CSS,andJavascript.HTML5for
Mastermindsleadsthereaderstepbystep
tomasterthecomplexsubjectsrequiredto
createwebsitesandwebapplications.After
readingthisbook,youwillknowhowto
structureyourdocumentswithHTML,how
tostylethemwithCSS,andhowtowork
withthemostpowerfulJavascriptAPIs...
OtherBooksinthisSeries
iOSAppsforMasterminds
HowtotakeadvantageofSwift3to
createinsanelygreatappsforiPhones
andiPads
iOSAppsforMastermindsleadsthereader

Examples For Masterminds

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Examples For Masterminds

Загружено:

Авторское право:

Доступные форматы

TableofContents

Вам также может понравиться