精精通javascript(英文版)

THISTECHNIQUEGOESWAYBEYONDSIMPLEFADEINDHTML,HOWEVERTHEABILITYTOKNOWWHETHERJAVASCRIPTISDISABLED/ENABLEDANDTOAPPLYSTYLESISAHUGEWINFORCAREFULWEBDEVELOPERSEVENTACCESSIBILITYTHEFINALPIECETOTAKEINTOCONSIDERATIONWHENDEVELOPINGAPURELYUNOBTRUSIVEWEBAPPLICATIONISTOMAKESURETHATYOUREVENTSWILLWORKEVENWITHOUTTHEUSEOFAMOUSEBYDOINGTHIS,YOUHELPTWOGROUPSOFPEOPLETHOSEINNEEDOFACCESSIBILITYASSISTANCEVISIONIMPAIREDUSERS,ANDPEOPLEWHODONTLIKETOUSEAMOUSESITDOWNONEDAY,DISCONNECTYOURMOUSEFROMYOURCOMPUTER,ANDLEARNHOWTONAVIGATETHEWEBUSINGONLYAMOUSEITSAREALEYEOPENINGEXPERIENCETOMAKEYOURJAVASCRIPTEVENTSMOREACCESSIBLE,ANYTIMEYOUUSETHECLICK,MOUSEOVER,ANDMOUSEOUTEVENTS,YOUNEEDTOSTRONGLYCONSIDERPROVIDINGALTERNATIVENONMOUSEBINDINGSTHANKFULLYTHEREAREEASYWAYSTOQUICKLYREMEDYTHISSITUATIONCLICKEVENTONESMARTMOVEONTHEPARTOFBROWSERDEVELOPERSWASTOMAKETHECLICKEVENTWORKWHENEVERTHEENTERKEYISPRESSEDTHISCOMPLETELYREMOVESTHENEEDTOPROVIDEANALTERNATIVETOTHISEVENTONEPOINTTONOTE,HOWEVER,ISTHATSOMEDEVELOPERSLIKETOBINDCLICKHANDLERSTOSUBMITBUTTONSINFORMSTOWATCHFORWHENAUSERSUBMITSAWEBPAGEINSTEADOFUSINGTHATEVENT,THEDEVELOPERSHOULDBINDTOTHESUBMITEVENTONTHEFORMOBJECT,ASMARTALTERNATIVETHATWORKSRELIABLYMOUSEOVEREVENTWHENNAVIGATINGAWEBPAGEUSINGAKEYBOARD,YOUREACTUALLYCHANGINGTHEFOCUSTODIFFERENTELEMENTSBYATTACHINGEVENTHANDLERSTOBOTHTHEMOUSEOVERANDFOCUSEVENTSYOUCANMAKESURETHATYOULLHAVEACOMPARABLESOLUTIONFORBOTHKEYBOARDANDMOUSEUSERSMOUSEOUTEVENTLIKETHEFOCUSEVENTFORTHEMOUSEOVEREVENT,THEBLUREVENTOCCURSWHENEVERTHEUSERSFOCUSMOVESAWAYFROMANELEMENTYOUCANTHENUSETHEBLUREVENTASAWAYTOSIMULATETHEMOUSEOUTEVENTWITHTHEKEYBOARDNOWTHATYOUKNOWWHICHEVENTPAIRSBEHAVETHEWAYYOUWANTTHEMTO,YOUCANREVISITLISTING63TOBUILDAHOVERLIKEEFFECTTHATWORKS,EVENWITHOUTAMOUSE,ASSHOWNINLISTING617LISTING617ATTACHINGPAIRSOFEVENTSTOELEMENTSTOALLOWFORACCESSIBLEWEBPAGEUSE/FINDALLTHEELEMENTS,TOATTACHTHEEVENTHANDLERSTOTHEMVARLIDOCUMENTGETELEMENTSBYTAGNAME“A“FORVARI0IELEMENT,/WHICHCHANGESTHESBACKGROUNDTOBLUEWHENTHEUSEREITHER/MOUSESOVERTHELINK,ORFOCUSESONITUSINGTHEKEYBOARDAIONMOUSEOVERAIONFOCUSFUNCTIONTHISSTYLEBACKGROUNDCOLORBLUECHAPTER6NEVENTS1327273CH06FINALQXD11/16/06816AMPAGE132THISPRINTFORCONTENTONLYSIZEWITHOUTHIM,THISPROJECTWOULDNOTHAVEHAPPENEDIDALSOLIKETOTHANKMYTECHNICALEDITOR,DANWEBB,FORTHOROUGHLYCHECKINGMYCODEANDREMINDINGMEOFTHEFINERPOINTSOFTHEJAVASCRIPTLANGUAGEDUETOHISEFFORT,THECODEINTHISBOOKSHOULDWORKASEXPECTEDANDBEPRESENTEDINAWAYTHATISCORRECTANDUNDERSTANDABLEIDLIKETOTHANKMYCOPYEDITOR,JENNIFERWHIPPLE,ANDMYPRODUCTIONEDITOR,LAURAESTERMAN,FORHELPINGTOKEEPTHEBOOKREADABLEANDCOMPREHENSIBLE,ANDFORDEALINGWITHMYMANYFOLLIESANDINCONSISTENCIESIALSOWANTTOTHANKTRACYBROWNCOLLINS,MYPROJECTMANAGER,FORKEEPINGMEINLINE,ORGANIZED,ANDGENERALLYONTOPOFMYDEADLINESIDALSOLIKETOTHANKJULIAWESTANDJOSHKINGFORSTICKINGWITHMETHROUGHTHELONGDAYSANDWEEKSOFWRITING,WHILEIWASSHIRKINGMYOTHERRESPONSIBILITIESJULIAWASBYMYSIDEEVERYDAY,MAKINGSURETHATIALWAYSMETMYDEADLINES,KEEPINGMESTRONG,ANDENCOURAGINGMETOWORKHARDFINALLY,IWOULDLIKETOTHANKMYFAMILYANDFRIENDSFORSUPPORTINGMEANDENCOURAGINGMETHROUGHOUTTHEYEARSXIX7273FMFINALQXD11/16/06803AMPAGEXIX7273FMFINALQXD11/16/06803AMPAGEXXINTRODUCINGMODERNJAVASCRIPTPART1NNN7273CH01FINALQXD11/16/06823AMPAGE17273CH01FINALQXD11/16/06823AMPAGE2MODERNJAVASCRIPTPROGRAMMINGTHEEVOLUTIONOFJAVASCRIPTHASBEENGRADUALBUTPERSISTENTOVERTHECOURSEOFTHEPASTDECADE,THEPERCEPTIONOFJAVASCRIPTHASEVOLVEDFROMASIMPLETOYLANGUAGEINTOARESPECTEDPROGRAMMINGLANGUAGEUSEDBYCORPORATIONSANDDEVELOPERSACROSSTHEGLOBETOMAKEINCREDIBLEAPPLICATIONSTHEMODERNJAVASCRIPTPROGRAMMINGLANGUAGEASITHASALWAYSBEENISSOLID,ROBUST,ANDINCREDIBLYPOWERFULMUCHOFWHATILLBEDISCUSSINGINTHISBOOKWILLSHOWWHATMAKESMODERNJAVASCRIPTAPPLICATIONSSODIFFERENTFROMWHATTHEYUSEDTOBEMANYOFTHEIDEASPRESENTEDINTHISCHAPTERARENTNEWBYANYSTRETCH,BUTTHEIRACCEPTANCEBYTHOUSANDSOFINTELLIGENTPROGRAMMERSHASHELPEDTOREFINETHEIRUSEANDTOMAKETHEMWHATTHEYARETODAYSO,WITHOUTFURTHERADO,LETSLOOKATMODERNJAVASCRIPTPROGRAMMINGOBJECTORIENTEDJAVASCRIPTFROMALANGUAGEPERSPECTIVE,THEREISABSOLUTELYNOTHINGMODERNABOUTOBJECTORIENTEDPROGRAMMINGOROBJECTORIENTEDJAVASCRIPTJAVASCRIPTWASDESIGNEDTOBEACOMPLETELYOBJECTORIENTEDLANGUAGEFROMTHESTARTHOWEVER,ASJAVASCRIPTHAS“EVOLVED”INITSUSEANDACCEPTANCE,PROGRAMMERSOFOTHERLANGUAGESSUCHASRUBY,PYTHON,ANDPERLHAVETAKENNOTEANDBEGUNTOBRINGTHEIRPROGRAMMATICIDIOMSOVERTOJAVASCRIPTOBJECTORIENTEDJAVASCRIPTCODELOOKSANDBEHAVESDIFFERENTLYFROMOTHEROBJECTCAPABLELANGUAGESILLGOINTODEPTH,DISCUSSINGTHEVARIOUSASPECTSOFWHATMAKESITSOUNIQUE,INCHAPTER2,BUTFORNOW,LETSLOOKATSOMEOFTHEBASICSTOGETAFEELFORHOWMODERNJAVASCRIPTCODEISWRITTENANEXAMPLEOFTWOOBJECTCONSTRUCTORSCANBEFOUNDINLISTING11,DEMONSTRATINGASIMPLEOBJECTPAIRINGTHATCANBEUSEDFORLECTURESINASCHOOLLISTING11OBJECTORIENTEDJAVASCRIPTREPRESENTINGALECTUREANDASCHEDULEOFLECTURES/THECONSTRUCTORFOROURLECTURE/TAKESTWOSTRINGS,NAMEANDTEACHERFUNCTIONLECTURENAME,TEACHER/SAVETHEMASLOCALPROPERTIESOFTHEOBJECTTHISNAMENAMETHISTEACHERTEACHER3CHAPTER1NNN7273CH01FINALQXD11/16/06823AMPAGE3/AMETHODOFTHELECTURECLASS,USEDTOGENERATE/ASTRINGTHATCANBEUSEDTODISPLAYLECTUREINFORMATIONLECTUREPROTOTYPEDISPLAYFUNCTIONRETURNTHISTEACHER“ISTEACHING“THISNAME/ASCHEDULECONSTRUCTORTHATTAKESINAN/ARRAYOFLECTURESFUNCTIONSCHEDULELECTURESTHISLECTURESLECTURES/AMETHODFORCONSTRUCTINGASTRINGREPRESENTING/ASCHEDULEOFLECTURESSCHEDULEPROTOTYPEDISPLAYFUNCTIONVARSTR“/GOTHROUGHEACHOFTHELECTURES,BUILDINGUP/ASTRINGOFINFORMATIONFORVARI0IPOINTERTOITANDHAVEITWORKWITHNOCHANGESANUMBEROFTECHNIQUESANDSOLUTIONSEXISTTHATDEVELOPERSUSETOKEEPTHEIRCODECLEANANDUNIVERSALLYCOMPATIBLETHEMOSTPOPULARTECHNIQUEFORKEEPINGYOURCODEFROMINFLUENCINGORINTERFERINGWITHOTHERJAVASCRIPTCODEISTHEUSEOFNAMESPACESTHEULTIMATEBUTNOTNECESSARILYTHEBESTORCHAPTER1NMODERNJAVASCRIPTPROGRAMMING5FIGURE11ASCREENSHOTOFTHEFIREFOXFIREBUGPLUGININACTION7273CH01FINALQXD11/16/06823AMPAGE5MOSTUSEFULEXAMPLEOFTHISINACTIONISAPUBLICUSERINTERFACELIBRARYDEVELOPEDBYYAHOO,WHICHISAVAILABLEFORANYONETOUSEANEXAMPLEOFUSINGTHELIBRARYISSHOWNINLISTING13LISTING13ADDINGANEVENTTOANELEMENTUSINGTHEHEAVILYNAMESPACEDYAHOOUILIBRARY/ADDAMOUSEOVEREVENTLISTENERTOTHEELEMENTTHATHASAN/IDOFBODYYAHOOUTILEVENTADDLISTENERBODY,MOUSEOVER,FUNCTION/ANDCHANGETHEBACKGROUNDCOLOROFTHEELEMENTTOREDTHISSTYLEBACKGROUNDCOLORREDONEPROBLEMTHATEXISTSWITHTHISMETHODOFNAMESPACING,HOWEVER,ISTHATTHEREISNOINHERENTCONSISTENCYFROMONELIBRARYTOANOTHERONHOWITSHOULDBEUSEDORSTRUCTUREDITISONTHISPOINTTHATCENTRALCODEREPOSITORIESSUCHASJSANJAVASCRIPTARCHIVENETWORKBECOMEIMMENSELYUSEFULJSANPROVIDESACONSISTENTSETOFRULESFORLIBRARIESTOBESTRUCTUREDAGAINST,ALONGWITHAWAYTOQUICKLYANDEASILYIMPORTOTHERLIBRARIESTHATYOURCODERELIESUPONASCREENSHOTOFTHEMAINDISTRIBUTIONCENTEROFJSANISSHOWNINFIGURE12IWILLDISCUSSTHEINTRICACIESOFDEVELOPINGCLEAN,PACKAGEABLECODEINCHAPTER3ADDITIONALLY,THEIMPORTANCEOFOTHERCOMMONSTUMBLINGPOINTS,SUCHASEVENTHANDLINGCOLLISION,WILLBEDISCUSSEDINCHAPTER6CHAPTER1NMODERNJAVASCRIPTPROGRAMMING67273CH01FINALQXD11/16/06823AMPAGE6UNOBTRUSIVEDOMSCRIPTINGBUILTUPONACOREOFGOOD,TESTABLECODEANDCOMPLIANTDISTRIBUTIONSISTHECONCEPTOFUNOBTRUSIVEDOMSCRIPTINGWRITINGUNOBTRUSIVECODEIMPLIESACOMPLETESEPARATIONOFYOURHTMLCONTENTTHEDATACOMINGFROMTHESERVER,ANDTHEJAVASCRIPTCODEUSEDTOMAKEITALLDYNAMICTHEMOSTIMPORTANTSIDEEFFECTOFACHIEVINGTHISCOMPLETESEPARATIONISTHATYOUNOWHAVECODETHATISPERFECTLYDOWNGRADEABLEORUPGRADEABLEFROMBROWSERTOBROWSERYOUCANUSETHISTOOFFERADVANCEDCONTENTTOBROWSERSTHATSUPPORTIT,WHILESTILLDOWNGRADINGGRACEFULLYFORBROWSERSTHATDONTWRITINGMODERN,UNOBTRUSIVECODECONSISTSOFTWOASPECTSTHEDOCUMENTOBJECTMODELDOM,ANDJAVASCRIPTEVENTSINTHISBOOKIEXPLAINBOTHOFTHESEASPECTSINDEPTHCHAPTER1NMODERNJAVASCRIPTPROGRAMMING7FIGURE12ASCREENSHOTOFTHEPUBLICJSANCODEREPOSITORY7273CH01FINALQXD11/16/06823AMPAGE7THEDOCUMENTOBJECTMODELTHEDOMISAPOPULARWAYOFREPRESENTINGXMLDOCUMENTSITISNOTNECESSARILYTHEFASTEST,LIGHTEST,OREASIESTTOUSE,BUTITISTHEMOSTUBIQUITOUS,WITHANIMPLEMENTATIONEXISTINGINMOSTWEBDEVELOPMENTPROGRAMMINGLANGUAGESSUCHASJAVA,PERL,PHP,RUBY,PYTHON,ANDJAVASCRIPTTHEDOMWASCONSTRUCTEDTOPROVIDEANINTUITIVEWAYFORDEVELOPERSTONAVIGATEANXMLHIERARCHYSINCEVALIDHTMLISSIMPLYASUBSETOFXML,HAVINGANEFFICIENTWAYTOPARSEANDBROWSEDOMDOCUMENTSISABSOLUTELYESSENTIALFORMAKINGJAVASCRIPTDEVELOPMENTEASIERULTIMATELY,THEMAJORITYOFINTERACTIONTHATOCCURSINJAVASCRIPTISBETWEENJAVASCRIPTANDTHEDIFFERENTHTMLELEMENTSCONTAINEDWITHINAWEBPAGEANDTHEDOMISANEXCELLENTTOOLFORMAKINGTHISPROCESSSIMPLERSOMEEXAMPLESOFUSINGTHEDOMTONAVIGATEANDFINDDIFFERENTELEMENTSWITHINAPAGEANDTHENMANIPULATETHEMCANBEFOUNDINLISTING14LISTING14USINGTHEDOCUMENTOBJECTMODELTOLOCATEANDMANIPULATEDIFFERENTDOMELEMENTSINTRODUCTIONTOTHEDOM/WECANTMANIPULATETHEDOMUNTILTHEDOCUMENT/ISFULLYLOADEDWINDOWONLOADFUNCTION/FINDALLTHEELEMENTSINTHEDOCUMENTVARLIDOCUMENTGETELEMENTSBYTAGNAME“LI“/ANDADDAAREDBORDERAROUNDALLOFTHEMFORVARJ0JINTRODUCTIONTOTHEDOMTHEREAREANUMBEROFREASONSWHYTHEDOMISAWESOME,HEREARESOMECHAPTER1NMODERNJAVASCRIPTPROGRAMMING87273CH01FINALQXD11/16/06823AMPAGE8ITCANBEFOUNDEVERYWHEREITSEASYTOUSEITCANHELPYOUTOFINDWHATYOUWANT,REALLYQUICKLYTHEDOMISTHEFIRSTSTEPTODEVELOPINGUNOBTRUSIVEJAVASCRIPTCODEBYBEINGABLETOQUICKLYANDSIMPLYNAVIGATEANHTMLDOCUMENT,ALLRESULTINGJAVASCRIPT/HTMLINTERACTIONSBECOMETHATMUCHSIMPLEREVENTSEVENTSARETHEGLUETHATHOLDSTOGETHERALLUSERINTERACTIONWITHINANAPPLICATIONINANICELYDESIGNEDJAVASCRIPTAPPLICATION,YOUREGOINGTOHAVEYOURDATASOURCEANDITSVISUALREPRESENTATIONINSIDEOFTHEHTMLDOMINORDERTOSYNCHRONIZETHESETWOASPECTS,YOUREGOINGTOHAVETOLOOKFORUSERINTERACTIONSANDATTEMPTTOUPDATETHEUSERINTERFACEACCORDINGLYTHECOMBINATIONOFUSINGTHEDOMANDJAVASCRIPTEVENTSISTHEFUNDAMENTALUNIONTHATMAKESALLMODERNWEBAPPLICATIONSWHATTHEYAREALLMODERNBROWSERSPROVIDEANUMBEROFEVENTSTHATAREFIREDWHENEVERCERTAININTERACTIONSOCCUR,SUCHASTHEUSERMOVINGTHEMOUSE,STRIKINGTHEKEYBOARD,OREXITINGTHEPAGEUSINGTHESEEVENTS,YOUCANREGISTERCODETHATWILLBEEXECUTEDWHENEVERTHEEVENTOCCURSANEXAMPLEOFTHISINTERACTIONISSHOWNINLISTING15,WHERETHEBACKGROUNDCOLOROFTHESCHANGEWHENEVERTHEUSERMOVESHISMOUSEOVERTHEMLISTING15USINGTHEDOMANDEVENTSTOPROVIDESOMEVISUALEFFECTSINTRODUCTIONTOTHEDOM/WECANTMANIPULATETHEDOMUNTILTHEDOCUMENT/ISFULLYLOADEDWINDOWONLOADFUNCTION/FINDALLTHEELEMENTS,TOATTACHTHEEVENTHANDLERSTOTHEMVARLIDOCUMENTGETELEMENTSBYTAGNAME“LI“FORVARI0IELEMENT,/WHICHCHANGESTHESBACKGROUNDTOBLUELIIONMOUSEOVERFUNCTIONTHISSTYLEBACKGROUNDCOLORBLUECHAPTER1NMODERNJAVASCRIPTPROGRAMMING97273CH01FINALQXD11/16/06823AMPAGE9/ATTACHAMOUSEOUTEVENTHANDLERTOTHEELEMENT/WHICHCHANGESTHESBACKGROUNDBACKTOITSDEFAULTWHITELIIONMOUSEOUTFUNCTIONTHISSTYLEBACKGROUNDCOLORWHITEINTRODUCTIONTOTHEDOMTHEREAREANUMBEROFREASONSWHYTHEDOMISAWESOME,HEREARESOMEITCANBEFOUNDEVERYWHEREITSEASYTOUSEITCANHELPYOUTOFINDWHATYOUWANT,REALLYQUICKLYJAVASCRIPTEVENTSARECOMPLEXANDDIVERSEMUCHOFTHECODEANDAPPLICATIONSINTHISBOOKUTILIZEEVENTSINONEWAYORANOTHERCHAPTER6ANDAPPENDIXBARECOMPLETELYDEDICATEDTOEVENTSANDTHEIRINTERACTIONSJAVASCRIPTANDCSSBUILDINGUPONYOURBASEOFDOMANDEVENTINTERACTIONSCOMESDYNAMICHTMLATITSCORE,DYNAMICHTMLREPRESENTSTHEINTERACTIONSTHATOCCURBETWEENJAVASCRIPTANDTHECSSINFORMATIONATTACHEDTODOMELEMENTSCASCADINGSTYLESHEETSCSSSERVEASTHESTANDARDFORLAYINGOUTSIMPLE,UNOBTRUSIVEWEBPAGESTHATSTILLAFFORDYOUTHEDEVELOPERTHEGREATESTAMOUNTOFPOWERWHILEPROVIDINGYOURUSERSWITHTHELEASTAMOUNTOFCOMPATIBILITYISSUESULTIMATELY,DYNAMICHTMLISABOUTEXPLORINGWHATCANBEACHIEVEDWHENJAVASCRIPTANDCSSINTERACTWITHEACHOTHERANDHOWYOUCANBESTUSETHATCOMBINATIONTOCREATEIMPRESSIVERESULTSFORSOMEEXAMPLESOFADVANCEDINTERACTIONS,SUCHASDRAGANDDROPELEMENTSANDANIMATIONS,TAKEALOOKATCHAPTER7,WHERETHEYAREDISCUSSEDINDEPTHAJAXAJAX,ORASYNCHRONOUSJAVASCRIPTANDXML,ISATERMCOINEDINTHEARTICLE“AJAXANEWAPPROACHTOWEBAPPLICATIONS”HTTP/WWWADAPTIVEPATHCOM/PUBLICATIONS/ESSAYS/ARCHIVES/000385PHPBYJESSEJAMESGARRETT,COFOUNDERANDPRESIDENTOFADAPTIVEPATH,ANINFORMATIONARCHITECTUREFIRMITDESCRIBESTHEADVANCEDINTERACTIONSTHATOCCURBETWEENTHECLIENTANDTHESERVER,WHENREQUESTINGANDSUBMITTINGADDITIONALINFORMATIONCHAPTER1NMODERNJAVASCRIPTPROGRAMMING107273CH01FINALQXD11/16/06823AMPAGE10THETERMAJAXENCOMPASSESHUNDREDSOFPERMUTATIONSFORDATACOMMUNICATION,BUTALLCENTERAROUNDACENTRALPREMISETHATADDITIONALREQUESTSAREMADEFROMTHECLIENTTOTHESERVEREVENAFTERTHEPAGEHASCOMPLETELYLOADEDTHISALLOWSAPPLICATIONDEVELOPERSTOCREATEADDITIONALINTERACTIONSTHATCANINVOLVETHEUSERBEYONDTHESLOW,TRADITIONALFLOWOFANAPPLICATIONFIGURE13ISADIAGRAMFROMGARRETTSAJAXARTICLETHATSHOWSHOWTHEFLOWOFINTERACTIONWITHINANAPPLICATIONCHANGESDUETOTHEADDITIONALREQUESTSTHATAREMADEINTHEBACKGROUNDANDMOSTLIKELYWITHOUTTHEUSERSKNOWLEDGECHAPTER1NMODERNJAVASCRIPTPROGRAMMING11FIGURE13ADIAGRAMFROMTHEARTICLE“AJAXANEWAPPROACHTOWEBAPPLICATIONS,”SHOWINGTHEADVANCED,ASYNCHRONOUSINTERACTIONTHATOCCURSBETWEENTHECLIENTANDASERVER7273CH01FINALQXD11/16/06823AMPAGE11SINCETHEORIGINALRELEASEOFTHEGARRETTARTICLE,THEINTERESTOFUSERS,DEVELOPERS,DESIGNERS,ANDMANAGERSHASBEENPIQUED,ALLOWINGFORANEXPLOSIONOFNEWAPPLICATIONSTHATMAKEUSEOFTHISADVANCEDLEVELOFINTERACTIONIRONICALLY,WHILETHEREHASBEENTHISRESURGENCEININTEREST,THETECHNOLOGYBEHINDAJAXISRATHEROLDHAVINGBEENUSEDCOMMERCIALLYSINCEAROUNDTHEYEAR2000THEPRIMARYDIFFERENCE,HOWEVER,ISTHATTHEOLDERAPPLICATIONSUTILIZEDBROWSERSPECIFICMEANSOFCOMMUNICATINGWITHTHESERVERSUCHASINTERNETEXPLORERONLYFEATURESSINCEALLMODERNBROWSERSSUPPORTXMLHTTPREQUESTTHEPRIMARYMETHODFORSENDINGORRECEIVINGXMLDATAFROMASERVER,THEPLAYINGFIELDHASBEENLEVELED,ALLOWINGFOREVERYONETOENJOYITSBENEFITSIFONECOMPANYHASBEENATTHEFOREFRONTOFMAKINGCOOLAPPLICATIONSUSINGAJAXTECHNOLOGY,ITSGOOGLEONEHIGHLYINTERACTIVEDEMOTHATITRELEASEDJUSTBEFORETHEORIGINALAJAXARTICLECAMEOUTISGOOGLESUGGESTTHEDEMOALLOWSYOUTOTYPEYOURQUERYANDHAVEITBEAUTOCOMPLETEDINREALTIMETHISISAFEATURETHATCOULDNEVERBEACHIEVEDUSINGOLDPAGERELOADSASCREENSHOTOFGOOGLESUGGESTINACTIONISSHOWNINFIGURE14ADDITIONALLY,ANOTHERREVOLUTIONARYAPPLICATIONOFGOOGLEISGOOGLEMAPS,WHICHALLOWSTHEUSERTOMOVEAROUNDAMAPANDSEERELEVANT,LOCALRESULTSDISPLAYEDINREALTIMETHELEVELOFSPEEDANDUSABILITYTHATTHISAPPLICATIONPROVIDESBYUSINGAJAXTECHNIQUESISUNLIKEANYOTHERMAPPINGAPPLICATIONAVAILABLEANDHASCOMPLETELYREVOLUTIONIZEDTHEONLINEMAPPINGMARKETASARESULTASCREENSHOTOFGOOGLEMAPSISSHOWNINFIGURE15EVENTHOUGHVERYLITTLEHASPHYSICALLYCHANGEDWITHINTHEJAVASCRIPTLANGUAGE,DURINGTHEPASTCOUPLEYEARS,THEACCEPTANCEOFJAVASCRIPTASAFULLBLOWNPROGRAMMINGENVIRONMENTBYSUCHCOMPANIESASGOOGLEANDYAHOOSHOWSJUSTHOWMUCHHASCHANGEDINREGARDTOITSPERCEPTIONANDPOPULARITYCHAPTER1NMODERNJAVASCRIPTPROGRAMMING12FIGURE14ASCREENSHOTOFGOOGLESUGGEST,ANAPPLICATIONAVAILABLEATTHETIMEOFGARRETTSAJAXARTICLETHATUTILIZEDTHEASYNCHRONOUSXMLTECHNIQUES7273CH01FINALQXD11/16/06823AMPAGE12BROWSERSUPPORTTHESADTRUTHOFJAVASCRIPTDEVELOPMENTISTHATSINCEITISSOTIEDTOTHEBROWSERSTHATIMPLEMENTANDSUPPORTIT,ITISALSOATTHEMERCYOFWHICHEVERBROWSERSARECURRENTLYTHEMOSTPOPULARSINCEUSERSDONTNECESSARILYUSETHEBROWSERSWITHTHEBESTJAVASCRIPTSUPPORT,WEREFORCEDTOPICKANDCHOOSEWHICHFEATURESAREMOSTIMPORTANTWHATMANYDEVELOPERSHAVEBEGUNTODOISCUTOFFSUPPORTFORBROWSERSTHATSIMPLYCAUSETOOMUCHTROUBLEWHENDEVELOPINGFORTHEMITSADELICATEBALANCEBETWEENSUPPORTINGBROWSERSDUETOTHESIZEOFTHEIRUSERBASEANDSUPPORTINGTHEMBECAUSETHEYHAVEAFEATURETHATYOULIKERECENTLYYAHOORELEASEDAJAVASCRIPTLIBRARYTHATCANBEUSEDTOEXTENDYOURWEBAPPLICATIONSALONGWITHTHELIBRARY,ITALSORELEASEDSOMEDESIGNPATTERNGUIDELINESFORWEBDEVELOPERSTOFOLLOWTHEMOSTIMPORTANTDOCUMENTTOCOMEOUTOFITINMYOPINIONISYAHOOSCHAPTER1NMODERNJAVASCRIPTPROGRAMMING13FIGURE15GOOGLEMAPS,WHICHUTILIZESANUMBEROFAJAXTECHNIQUESTODYNAMICALLYLOADLOCATIONINFORMATION7273CH01FINALQXD11/16/06823AMPAGE13OFFICIALLISTOFBROWSERSTHATITDOESANDDOESNTSUPPORTWHILEANYONE,ANDANYCORPORATION,CANDOSOMETHINGSIMILAR,HAVINGADOCUMENTPROVIDEDBYONEOFTHEMOSTTRAFFICKEDWEBSITESONTHEINTERNETISENTIRELYINVALUABLEYAHOODEVELOPEDAGRADEDBROWSERSUPPORTSTRATEGYTHATASSIGNSACERTAINGRADETOABROWSERANDPROVIDESDIFFERENTCONTENTTOITBASEDUPONITSCAPABILITIESYAHOOGIVESBROWSERSTHREEGRADESA,X,ANDCAGRADEBROWSERSAREFULLYSUPPORTEDANDTESTED,ANDALLYAHOOAPPLICATIONSAREGUARANTEEDTOWORKINTHEMANXGRADEBROWSERISANAGRADEBROWSERTHATYAHOOKNOWSEXISTSBUTSIMPLYDOESNOTHAVETHECAPACITYTOTESTTHOROUGHLY,ORISABRANDNEWBROWSERTHATITSNEVERENCOUNTEREDBEFOREXGRADEBROWSERSARESERVEDWITHTHESAMECONTENTASAGRADEBROWSERS,INHOPESTHATTHEYLLBEABLETOHANDLETHEADVANCEDCONTENTCGRADEBROWSERSAREKNOWNAS“BAD”BROWSERSTHATDONOTSUPPORTTHEFEATURESNECESSARYTORUNYAHOOAPPLICATIONSTHESEBROWSERSARESERVEDTHEFUNCTIONALAPPLICATIONCONTENTSWITHOUTJAVASCRIPT,ASYAHOOAPPLICATIONSAREFULLYUNOBTRUSIVEINTHATTHEYWILLCONTINUETOWORKWITHOUTTHEPRESENCEOFJAVASCRIPTINCIDENTALLY,YAHOOSBROWSERGRADECHOICESJUSTSOHAPPENTOCOINCIDEWITHMYOWN,WHICHMAKESITPARTICULARLYAPPEALINGWITHINTHISBOOK,IUSETHETERMMODERNBROWSERALOTWHENIUSETHATPHRASE,IMEANANYBROWSERTHATHASGRADEASUPPORTDEEMEDBYTHEYAHOOBROWSERCHARTBYGIVINGYOUACONSISTENTSETOFFEATURESWITHWHICHTOWORK,THELEARNINGANDDEVELOPMENTEXPERIENCEWILLBECOMEMUCHMOREINTERESTINGANDMUCHLESSPAINFULALLBYAVOIDINGBROWSERINCOMPATIBILITIESIHIGHLYRECOMMENDTHATYOUREADTHROUGHGRADEDBROWSERSUPPORTDOCUMENTSWHICHCANBEFOUNDATHTTP/DEVELOPERYAHOOCOM/YUI/ARTICLES/GBS/GBSHTML,INCLUDINGTHEBROWSERSUPPORTCHARTSHOWNINFIGURE16,TOGETAFEELFORWHATYAHOOISATTEMPTINGTOACCOMPLISHBYMAKINGTHISINFORMATIONAVAILABLETOTHEGENERALWEBDEVELOPINGPUBLIC,YAHOOISPROVIDINGANINVALUABLE“GOLDSTANDARD”FORALLOTHERSTOREACH,WHICHISAGREATTHINGTOHAVEFORMOREINFORMATIONABOUTALLTHEBROWSERSTHATARESUPPORTED,SEEAPPENDIXCOFTHISBOOKWHERETHESHORTCOMINGSANDADVANTAGESOFEACHBROWSERAREDISCUSSEDINDEPTHMOREOFTENTHANNOT,YOULLFINDALLOFTHEAGRADEBROWSERSTOBEONTHECUTTINGEDGEOFDEVELOPMENT,PROVIDINGMORETHANENOUGHFEATURESFORYOUTODEVELOPWITHWHENCHOOSINGWHATBROWSERSYOUWISHTOSUPPORT,THEENDRESULTULTIMATELYBOILSDOWNTOASETOFFEATURESTHATYOURAPPLICATIONISABLETOSUPPORTIFYOUWISHTOSUPPORTNETSCAPENAVIGATOR4ORINTERNETEXPLORER5FOREXAMPLE,ITWOULDSEVERELYLIMITTHENUMBEROFFEATURESTHATYOUCOULDUSEINYOURAPPLICATION,DUETOTHEIRLACKOFSUPPORTFORMODERNPROGRAMMINGTECHNIQUESCHAPTER1NMODERNJAVASCRIPTPROGRAMMING147273CH01FINALQXD11/16/06823AMPAGE14HOWEVER,KNOWINGWHICHBROWSERSAREMODERNALLOWSYOUTOUTILIZETHEPOWERFULFEATURESTHATAREAVAILABLEINTHEM,GIVINGYOUACONSISTENTBASEFROMWHICHYOUCANDOFURTHERDEVELOPMENTTHISCONSISTENTDEVELOPMENTBASECANBEDEFINEDBYTHEFOLLOWINGSETOFFEATURESCOREJAVASCRIPT15THEMOSTCURRENT,ACCEPTEDVERSIONOFJAVASCRIPTITHASALLTHEFEATURESNECESSARYTOSUPPORTFULLYFUNCTIONALOBJECTORIENTEDJAVASCRIPTIN