[Powered by Google Translate] [Seminar: jQuery] [Vipul Shekhawat, Harvard University] [Dette er CS50.] [CS50.TV] Hvis du følger med hjemme, kan du faktisk få tilgang til mine lysbilder online ved å gå til denne linken. Det er TjjRWj, på bit.ly. Du kan også bare gå til nettadressen direkte, som er cloud.cs50.net / ~ vshekhawat, som er mitt navn, og jquery. Jeg oppfordrer deg til å følge med hvis du ser hjemme, og hvis du er her, også, fordi dette er en ganske interaktiv presentasjon. 

Så i dag skal jeg snakke om jQuery, og det første spørsmålet er, hva er jQuery? I år vet jeg har dere ikke dekket JavaScript i så mange detaljer som vi har i tidligere år. JavaScript er først av alt, bare en klient-side språk som du bruker til å kjøre skript og kode på hver brukers maskin. Så du har en server som gir websider til folk, men du kanskje vil gjøre ting på sin maskin, spør maskinen sin til å sende forespørsler til serveren hvert 30. sekund eller noe sånt. Du kan gjøre det ved hjelp av JavaScript. JQuery gir bare mer funksjonalitet på toppen av JavaScript som gjør ekstra ting for deg. Hvis du ser på innholdet på toppen, som beskriver noen av de ting som du er i stand til å gjøre. Så samlet, ble det opprettet i januar 2006. Det ble først unnfanget av i august 2005. Det har eksistert i et par år, og det er virkelig en del av den nye Web 2.0-bevegelsen som har gjort internett så skinnende. Det er den mest brukte JavaScript-bibliotek. Over 19,6 millioner nettsteder bruker den, og bruken øker fortsatt ifølge builtwith.com, som, tilsynelatende, det siste året, har nettopp vært stadig økende ganske lineært. Blant de 10 millioner nettsteder, er det fortsatt - rundt 40% av dem bruker nå det. Facebook bruker det, mange andre nettsteder bruker i dag det. Du kan se på disse statistikkene på egen hånd, hvis du vil. Og du kan fortelle det er legit fordi den har en stiftelse og 13 styremedlemmer, sammen med et team på 20 personer som arbeider på det med jevne mellomrom. Så det er veldig mye brukt, den har en. Org URL, det er fancy, det har ringvirkninger for andre ting, så det er en big deal. 

Hvorfor skal du bruke det? JQuery er veldig lette. Det betyr at det er ikke en stor fil. Du kan laste ned den minified fil, som er uten alle de hvite plass og kommentarer, og det er bare 32 kB. Så det er lett å bare kaste på websiden din og bare for å begynne å bruke den. Det er også svært effektivt skrevet, så det tar ikke opp mye - det ikke forsinker ditt nettsted mye når du bruker den. Den lar deg implementere ting som tidligere var drivverdige. Det er noen aspekter av funksjonalitet, som å lage animasjoner, som normalt ville være veldig, veldig vanskelig å gjøre. Men i jQuery de er faktisk veldig enkelt. Og det er noen ting som er irriterende å gjøre, mulig i JavaScript, som å sende en POST-forespørsel, men å sende en forespørsel til en server, må du skrive fem eller seks eller syv linjer med kode. Nå kan du bare gjøre det på en eneste linje med kode, i en enkelt funksjon samtale. Som forenkler virkelig mye av ting som du gjør. Og alle de kule barna bruker den. Med det mener jeg meg. I mitt siste prosjekt i fjor, som er news.whrb.org, som er for radiostasjonen, opprettet jeg denne bloggen som arrangerer alle viser at vi har gjort og MP3-filer til dem. Du kan bla gjennom de siste show, og det er gjort ved hjelp av jQuery. Du kan fortelle på grunn av alle disse animasjonene, egentlig. Så hvis du har - hvis du oppretter et nytt innlegg, du ser disse små slideDowns, det er alt gjort ved hjelp av jQuery. Og dette fade - så den slags ting er gjort ved hjelp av jQuery, og du slipper å stadig oppdatere siden for å navigere på nettstedet. En annen kul ting som er laget ved hjelp av jQuery er denne presentasjonen. Jeg bruker denne open source tingen kalt scrolldeck, som noen skrev på toppen av jQuery. Hvis du faktisk ser på kilden, kan du se at de bruker denne dollartegn; dollartegn brukes i jQuery for å markere at en funksjon er en jQuery funksjon. Så de definerer en wrapper på toppen av jQuery som lar deg lage en presentasjon som dette, og du kan se det her de er inkludert det opprinnelige jQuery fil, som er det du må inkludere hvis ønsker å bruke jQuery i dine egne nettsider. 

Berøring på det, hvordan kan du installere den? Du kan bare gå til jQuery.com og laste ned filen, legge det til en web-katalog, og ta den med. Så bare på toppen, i hodet tag av HTML-fil av dine viktigste HTML-fil, bare at kodelinje med den riktige versjonen for hvilken versjon av jQuery du bruker. Du kan laste den ned ved å gå til jQuery.com, klikk på "download jQuery," og du har det. Det var det. Og faktisk, kan vi ta en titt på hvordan det ser ut. Hvis du klikker på last ned her, er jQuery dette. Det er bare ett stort JavaScript-fil som gjør alt den magiske ting for deg. Dette er den versjon minified, som ikke er lesbar i det hele tatt. Du kan også se på utviklingen versjonen, som er lesbar men fortsatt veldig, veldig lang. Det er en masse ting der inne. Du kan også koble til Googles vert versjon av den. Så det vil tillate deg å bare stole på Google for å gi det. De gir hver versjon av den, tilgjengelig til enhver tid. Så du kan sikkert stole på Google for å være vert det for deg. Eller du kan koble til jQuery egen nyeste versjonen. De har en URL som alltid oppdatert til siste versjon. Det er jQuery-siste, og det er ett problem med det, som er at ved den oppdaterte jQuery og noen av de tidligere funksjonaliteten de hadde blir retrograded eller foreldet det kanskje ikke - det kan begynne å ikke bli støttet lenger. Så hvis du skriver en nettside ved hjelp av versjon 1.8.2, ved den tid-versjon 2.7 kommer ut noen av funksjonene du skrev virker ikke lenger. Så det er bedre å bare laste ned 32 kB fil, sette det på nettsiden din, og det vil fungere for alltid. 

Jeg kommer til å gå videre og begynne å snakke om selve funksjonaliteten i jQuery. Det første er velgere. Dette er hva jQuery var opprinnelig tenkt å gi. Og du kan klikke på dokumentasjon for å se på detaljert dokumentasjon for de velgere jeg kommer til å bli dekket. Ideen bak velgere er at du kan velge HTML-elementer på en side. Elementer på en side har IDer og klasser og andre identifiserende aspekter til dem. Det er også - de er i forskjellige rekkefølger. Noen av tiden de er nestet inni hverandre. JQuery lar deg konstruere enkle spørringer som henter elementer fra siden. Deretter kan du manipulere disse elementene ved hjelp jQuery funksjoner, som er manipulasjon delen vi får til senere. Du kan endre HTML, endre CSS, kan du også animere og legge til funksjoner som aktiverer på visse hendelser. Så, for eksempel, hvis noe har klikket, vil du noe til å skje, kan du gjøre det ved hjelp jQuery også. Og det er et stort antall måter å velge elementer. De fleste av dem jeg aldri har brukt, men det er de grunnleggende, som er ganske viktig. Elementet velgeren, for eksempel hvis du bare velge noe som er en div - Jeg har faktisk koden åpen for denne lysbildepresentasjon. Så, for eksempel, her er det første lysbildet. Her har vi en div. Hvis vi faktisk velge alle divs på siden, det vil bare gi oss en rekke av alle divs som finnes i denne filen. ID-velgeren kan du velge noe med en gitt ID. Så hvis dette, for eksempel, har denne tingen ID "hva", og hvis vi gjorde dette med # hva stedet for noen ID, ville det bare tilbake en matrise som har et enkelt element, og det er at elementet på siden. Vi kan også kombinere velgere på denne måten ved å ha bare velge ting med IDer som er divs. Så ja. Bare velge divs som har som ID. For klassen bare du bruker en prikk, er det det samme som CSS. Etterkommer fungerer også, så hvis du har noen klasse og det har hekket elementer innen det - så, for eksempel, det er noen klasse og den har en ankerkode å koble til en annen side, kan du bruke denne syntaksen til å hente koblingen. Du kan også velge flere ting på en gang, bare skille dem med komma bruke velgeren du vil, og du vil velge dem alle på en gang, i en enkelt array. Og så er det også ikke velgeren, slik at du kan velge alle divs som ikke har noen spesifikk klasse. Og det er bare en nyttig måte å få en innføring i hvordan dette valget fungerer. Jeg skal vise noen konkrete eksempler i et sekund. 

Avanserte velgere er - dette er bare noen få eksempler. Det finnes dusinvis av disse, men hvis du ønsker å velge alle bilde-koder innenfor noen element, så du bare gjøre: image. Hvis du ønsker å velge selv elementer, for eksempel hvis det er 20 av dem, du ønsker å velge 0, 2, 4, 6 og så videre, du gjør: selv, eller du kan også gjøre: odd. Dette er pseudo velgere, noe som betyr at de faktisk beregne alle andre element i stedet for bare å gå og velge dem alle. Du kan også - hvert element kan også ha spesifikke egenskaper. Så, for eksempel, er class = center også et attributt. For denne ankerkode, href, hypertekst referanse, er et attributt også. Så du kan velge noe som linker til en bestemt side eller bare - det er virkelig generelt. Du kan velge hva som helst med hvilken som helst egenskap som du ønsker. Og så, også, inneholder attributtet. Hvis du for eksempel ønsker å velge alle drivelementene som har ordet "pass" som navnet på dem, hvis en side har en inngang tekstblokk som heter "passord", som ville være en måte du kan velge det. Og det er mange flere. Du kan gå videre og se på dokumentasjonen og se konkrete eksempler på hvordan det fungerer. 

Det neste er DOM manipulasjon. Etter at vi velger elementene, vil vi ønske å faktisk gjøre ting med dem. Så langt har vi ikke sett på i det hele tatt, men hvis du ser på dokumentasjonen, det er virkelig mye som vi kunne gjøre. På dette punktet, kommer vi til å velge elementer på denne presentasjonen og manipulere dem ved hjelp av jQuery. Fordi dette er implementert ved hjelp jQuery, har vi tilgang til jQuery biblioteket, og vi kan bruke disse funksjonene innenfor denne koden. En nyttig ting som du kanskje ikke vet om er konsollen. Og Google Chrome er hva jeg bruker. Du kan trykke alt kommandoen J eller alt kontroll J for å åpne konsollen. I Firefox tror jeg det er på kommando shift K eller kontroll skift K. I Safari må du gå endre noen innstillinger. Det er en link hvis du ønsker å gjøre det, men jeg anbefaler å få Chrome eller Firefox. Så la oss åpne opp konsollen, er det her nede. Den lar deg i utgangspunktet bare gjøre hva du vil. Så du kan bare skrive inn opprette en variabel kalt x, x = 5, la oss se hva x + 2 er. Du kan selv gjøre noe sånt CS + la oss se, x + 45, som vil være CS50. Du kan bare gjøre noen typiske JavaScript ting. Men du kan også gjøre jQuery her. 

Så la oss se på denne første aspektet her. Vi kommer til å lage en variabel som heter HTML, som er en streng. Den har et avsnitt tag i det, det kalles noen ny tekst. Så har vi denne HTML, er det noen ny tekst i nr. koder. Nå er vi faktisk ønsker å legge det til side. Jeg satt det opp slik at HTML for dette avsnittet, denne tittelen her, føyer ID. Hvis vi velger append ID og deretter legge til det HTML variabel jeg nettopp opprettet, det vil legge til at HTML på slutten, rett etter denne paragrafen tag. Så hvis vi gjør det - vi valgte denne paragraf, og vi har kalt append funksjonen med HTML variabel Jeg har nettopp lagt, det vil legge til at ny tekst der på siden. Vi kan også foranstille, noe som betyr at det vil gå før, i begynnelsen av dette elementet. Så det er noen ny tekst i begynnelsen og etterpå. Jeg kan gå videre og oppdatere for å bli kvitt dette ting jeg nettopp har gjort. Men det er et eksempel på hvordan du kan bruke den foranstilte og legge metoder å manipulere ting på siden, legg til litt HTML. 

Du kan også endre klasser. Tilbake i denne stilen fil, har jeg laget dette for seieren klassen som har tekst farge rød, noen bakgrunnsfarge, og en tekst skygge. Det ser heslig, men jeg kan faktisk - denne paragrafen tilsvarer klasse ID. Så jeg kan legge klassen for seieren. Jeg kan utføre dette i konsollen, og som vil legge den klassen, og nå ser det ut heslig, som forventet. CSS automatisk blir brukt til klasser som du - hvis det er CSS for en klasse, det automatisk blir anvendt hvis du endrer klasse av et element. Da kan vi bare fjerne den ved hjelp remove klasse. Så hvis du har noen forhåndsdefinerte klasser som rødt eller uthevet, og deretter du vil bruke dem til elementer, du trenger ikke å gjøre alt CSS styling hver gang. Du kan bare legge klassen til et element, og deretter vil det automatisk bli - vil den automatisk ser hensiktsmessig for den klassen. Vi kan også fjerne ting, så jeg kommer til å velge alle divs på siden og fjerne dem. Hva kommer det til å se ut? Det kommer til å se ut som ingenting, så det er faktisk ingenting igjen. Min presentasjon er borte. Jeg kan oppdatere og bringe den tilbake, heldigvis, fordi det er bare å kjøre en gang, men det er et eksempel på å fjerne, hvis du ønsker å fullstendig ødelegge et element av siden. 

Du kan også overskrive, og jeg kommer til å velge alle ledd koder på siden og gå inni dem og erstatte teksten som de har i dem med bare ordet "testing". Hvis du gjør dette, vil du erstatte hvert avsnitt på siden med denne testingen. Jepp. De er alle erstattet med testing. Så det er et eksempel på tilgang til tekst og overskrive den. Du kan også hente informasjon, og dette er virkelig kult for inndataboksene. Hvis du har en tekstboks at folk skriver ting inn, folk skriver ting inn i det, her vi velge inngang, noen innspill tag med en type tekst. I dette tilfellet er det bare en input-boksen i hele presentasjonen, så vi må bare velge den første, og da vi kaller val-funksjonen på den. Som returnerer verdien, og for en tekstboks, verdien er akkurat hva som skjer for å være inne i den. Så hvis vi gjør dette, går den bare strengen ting. Og hvis vi kaller det på nytt etter å ha skrevet flere ting, forvandles den til flere ting. Det er en flott måte å få tilgang til elementer i en tekstboks, og deretter sjekke, Dette er en e-postadresse, dette er en gyldig dato, f.eks. Du kan bare hente ting kjapt som folk skriver det, og deretter sjekke om det er gyldig, kan du sende den tilbake til en server, gjøre hva du vil med den. Og det er hvordan du få tilgang hva som er inni disse boksene. 

Du kan også modifisere CSS direkte, slik at stedet for å legge en klasse som har noen forhåndsdefinerte egenskaper, du kan bare legge til uansett CSS du ønsker å noe. Så la 's Select kroppen, som er den hele presentasjonen, og farge er den eiendommen som definerer hva fargene teksten er. Hvis vi endre den til rødt, vil all tekst i the page slå til rødt. Vi kan gjøre noe sånt som bakgrunnsfarge blå, det vi gå; det er vakkert. Du kan gjøre noe du vil med dette. Bruke CSS eiendom, kan du virkelig modifisere hvordan noe ser til enhver tid. Den neste tingen er effekter. Effektene er i utgangspunktet den samme tingen som å modifisere den CSS, men de faktisk gi noen ekstra animasjon til det. Så i stedet for bare å dukke eller skjuler noe eller skifte farge, du kan faktisk gjøre det animert. Her er dokumentasjonen, hvis du ønsker å ta en titt på den omfattende dokumentasjon for det. Men jeg kommer til til å dekke de viktigste de. Det finnes showet og skjul egenskaper. Vise / skjule ID faktisk tilsvarer til hele denne boksen, så hvis jeg skjule det, vil det bare forsvinne. Og jeg kan vise det igjen hvis jeg ønsker å gjøre det komme tilbake. Og det er tilbake. Det gjorde ikke faktisk forsvinne, Jeg gjorde ikke faktisk fjerne det fra the page, Jeg har akkurat satt den CSS eiendom av synlighet til skjult slik at du ikke kan se det lenger. Det har skyv også opp og skyv ned; som lar deg å ha denne effekten. Den glir opp til forsvinne, og etter at den forsvinner du kan skyve det ned for å gjøre den komme tilbake. Og nå er det tilbake. Det er også denne fade effekt, som - fade ID tilsvarer til denne boksen. Hvis jeg fade det ut, deretter det vil sakte forsvinne. Jeg kan også falme den i, og det vil komme tilbake. Du kan også gjøre fade til, nemlig er spesifikk for den fade funksjon. Du kan ha det falme til noen bestemt opacity at du ønsker. Så hvis du visne det sakte til .5, vil det blitt halvparten synlig. Jeg kan gjøre det gå til 0,1, og tilbake til 1 for å gjøre det fullt synlig igjen. That er bare en annen animasjon som du kan gjøre. 

Det finnes også de vekslebryterne effekter. Så jeg kommer til for å velge den toggle ID, noe som tilsvarer til denne boksen, og på at div kan du ringe toggle; om det er synlig det vil bli usynlig, hvis det er usynlig det vil bli synlig igjen. Så jeg bare kalt denne toggle funksjon to ganger; den første ett var det samme tingen som hide, var den andre samtalen det samme ting som en show. Og du kan også gjøre dette med en fade toggle, noe som gjør det samme ting, bortsett fra det faktisk fades. Og samme ting med lysbildet veksle. Det finnes chained effekter så vel, betyr hvilke hvis du velger et element og bare ringe en haug med animasjon metoder på den, hvis du ville ha det å fade ut, deretter skyv ned, og deretter skjule og deretter visne i, vil den gjøre dem i en rad. Så forsvant, kom tilbake - for noen grunn, gjorde de hide ikke skje. La oss prøve den ut. Yeah, så det falmet ut og deretter den raste unna. Og det er nok mer. Du kan bruke den animate-funksjonen å lage dine egne animasjoner, er noe som ganske kompleks, men det gir deg med uendelig extensibility. Du kan gjøre noen form for animasjon du ønsker. Du kan også bruke kø for å kø opp flere animasjoner om gangen. Så hvis du vil ha noe å fly på tvers the page, lysbilde fra toppen rett til bunnen venstre, kan du gjøre det, og bare ha en haug med handlinger går ene etter den andre. 

Den neste tingen vi kommer til å snakke om er hendelser. Hendelser tillater du - så langt, vi har nettopp blitt å skrive ting inn i konsollen og at er én måte å gjøre dette skje, men på en faktisk side, du er ikke kommer til å være i stand til å gjøre de brukergrupper type ting inn i konsollen. Du vil at ting til å skje automatisk. For det, må du å bruke hendelser som aktiverer på noen bestemt hendelse happening. Du kan sjekke i dokumentasjonen for de fulle detaljer. Så la oss se. Vi ønsker å skjule eller vise av i boksen, men akkurat nå denne knappen ikke gjøre noe fordi jeg ikke gjorde implementere det ennå. Jeg kommer til å gå til selve HTML side. Her er the slide. Det er en div for lysbildet. Det har den klassen av lysbilde. Det er teksten. Nå, det er denne boksen og boksen-knappen. Hvordan ville vi faktisk gjøre dette forsvinne? Først av alt, la oss skrive en funksjon som gjør den boksen ID forsvinne. Dette er syntaksen for funtion, la oss bare kalle det hideTheBox. Det tar ikke eventuelle argumenter, fordi det finnes ingen argumenter å bli tatt. Vi kan velger du boksen ID. Så ved hjelp av den jQuery velg, kan vi velge box ID, og så bare gjøre det forsvinne. La oss gjøre det fade ut. Hvis vi kjørte denne funksjonen i den faktiske konsollen, vi kunne definere denne funksjonen; vi kan kalle hideTheBox, og det fungerer. Men vi ønsker det å skje når knappen er faktisk trykkes. Å gjøre det, må vi bruke en hendelse. Hvis du vil binde en hendelse til noen spesifikke knappen eller litt action happening, vi har å velge den element at arrangementet vil utløse - eller som vil utløse arrangementet, beklager. 

Så først av alt, la oss velger du boksen-knappen ID fordi det er den knappen, og nå, for den knappen, vi ønsker å skape en animasjon når det klikkes. Så det er denne click funksjonen. Det tillater deg til å binde en annen funksjon til det. Denne funksjonen tar en annen funksjon som et argument vi kan passere i hideTheBox funksjon, og når denne knappen er klikket, vil at funksjon automatisk henrette. Så dette vil fungere hvis vi lagre denne, vil jeg oppdatere, and - ett sekund, jeg beklager. La meg fikse dette virkelig raskt. Ok. Det vi går. Så nå av i boksen er forsvinner når vi klikker på knappen. Vi kan også endre denne å bare fadeToggle, endre det bare for å skjule eller vise av i boksen, og dette vil også arbeide også, hvis vi oppdatere. Vi kan skjule det, kan vi også vise det, og at vil fortsette å jobbe. En annen ting vi kan gjøre er, har vi ikke faktisk nødt til å definere denne hideTheBox funksjon før vi kaller et klikk-funksjonen. Så i stedet for å definere funksjon og ringer hideTheBox, vi er bare kommer til å kalle det hvis dette tingen er klikket. Så vi kan definere det anonymt i her, som er en funksjon som JavaScript har. Du kan definere en funksjon; normalt, ville vi si funksjon hideTheBox med argumenter, men i stedet, kan vi bare si fungere ingen argumenter, starter du curly brace som definerer funksjonen, nært at curly brace, og deretter bare definere funksjonen i her, innenfor den først Hvilke som helst parentesen og den siste parentesen at svarer til de argumentene for klikket-funksjonen. Så vi er som passerer i denne funksjonen, kan vi kopiere denne linjen med kode akkurat her, og som vil gjøre den eksakte samme tingen. Og nå vi ikke har denne tilfeldig fadeTheBox funksjon som er sitter rundt for uten noen åpenbar grunn. The funksjonen ble definert anonymt, betyr det ikke har et navn. Det vil bare henrette når vi klikker på boksen-knappen. Så forfriskende en gang mer, én mer tid, og du kan se at den fortsatt fungerer. Og det er hvordan du opprette hendelser. 

Det finnes en rekke av forskjellige hendelser som vi kan bruke. Jeg kommer til å bytte tilbake til bruken av konsollen å bare vise deg hvordan disse fungerer. IDene for hver av disse korrespondere til hver boks. Så dette boksen er click ID, er denne én nøkkel-ID, og ​​dette en er musen ID. One more ting er at det er denne handlingen funksjon; snarere enn å skrive det ut hver gang, Jeg faktisk gikk videre og definert dette handlingen funksjon her nede. Det gjør det samme tingen som den hideTheBox-funksjonen. Det blir denne boksen og enten fades den ut eller fades det i. Og det er derfor vi er i stand til å bruke den her. Så hvis vi klikk på denne click ID, ønsker vi å gjøre boksen forsvinne eller dukke opp igjen. Det er det samme tingen som knappen at vi hadde i det siste lysbildet. Nå etter vi kaller at, kan vi klikker på denne og boksen vil forsvinne, deretter klikk på den igjen og boksen vil dukke opp igjen. That er ganske enkel. Dobbeltklikk gjør det samme tingen, bortsett fra det krever et dobbeltklikk. Så hvis du klikker på det en gang og klikk på den igjen ingenting vil skje, men hvis du dobbeltklikker klikke raskt, vil det forsvinne. Hvis du dobbeltklikker klikk igjen, vil den komme tilbake. Så det er ganske enkel. Keyboard-inndata er slags rare; Jeg tror ikke det faktisk fungerer i dette eksemplet fordi nøkkelen ned, nøkkel opp og nøkkel presse og andre sentrale handlinger aktivere ingen rolle hva element du binde den til. For eksempel, selv hvis jeg bundet nøkkelen ned på legeme eller noe annet helt, deretter det ville likevel aktivere uansett - det er ikke spesifikke. Jeg trenger ikke å være å klikke på dette og trykker på en tasten for å gjøre noe forsvinne. Det ville bli aktiveres uavhengig av hva element Jeg er for tiden i. Så disse ikke faktisk fungerer i dette eksempelet fordi den ikke gjenkjenner meg som å skrive inn input inn i keyboard input div. 

Men hvis du ser på musehandlinger, den første en er sveve, og det kan gjøre noen av dette ved hjelp CSS. Hvis du bruker CSS, kan du opprette den slik at hvis du hover over noe, deretter viker de stil endringer. Men ved hjelp av jQuery kan du endre de stiler av andre ting så vel. Så, for eksempel, vi skal til å kalle handling hvis vi sveve over denne div. Det betyr at hvis vi sveve over det, deretter boksen vil forsvinne. Hvis vi bevege seg bort fra det, vil boksen dukke opp igjen. Hvis vi kaller dette og sveve over det, betyr forsvinne av i boksen, og så snart vi bevege seg bort, kommer den tilbake. Hvis vi kaller dette hover funksjonen på musen ID, noe som tilsvarer til denne sekstenmeteren, og deretter hvis vi sveve over boksen, deretter boksen vil faktisk forsvinne - det er å være funky akkurat nå, men - hvis vi bevege seg bort fra det, vil det dukke opp igjen. Akkurat nå er det bakover for noen grunn. The musen enter og mus flytte funksjoner er noe lignende, men litt annerledes. Mus skriv bare aktiveres når musen kommer inn i boksen, som forventet. Så hvis du flytte inn i det, vil det forsvinne. Men det ikke vil dukke opp igjen når du beveger deg bort; du vil nødt til å flytte tilbake bort på den for det å komme tilbake. Det er også den mus flytte-funksjonen, som vil aktivere hver gang musen er engang til stede i boksen. Så det vil bare holde på å gå, falming inn og ut. Og det er faktisk logging - det virker som det er bare å fading inn og ut, men det er faktisk logging en mye flere handlinger enn dette, så når du beveger deg bort det vil bare holde det gående fordi det logget ut som en tusen av dem. Kanskje ikke en tusen. Kanskje fem. Den logger mer enn det. Poenget er, alle musehandlinger, det er mange av dem. Du kan lese opp på de andre enere, men de er alle litt forskjellige, og du kan plukke avhengig av hva ett du trenger for avhengig av hva som spesifikke formål forsøker du å gjøre. 

Den neste tingen Jeg kommer til å snakke om er AJAX. AJAX, jeg vet vi gjorde ikke dekke JavaScript i så mye dybde dette året, så jeg er bare kommer til å snakke om AJAX i generelt for et minutt. AJAX står for Asynchronous JavaScript og XML. Det er i utgangspunktet, for eksempel, når du er på Facebook og det presser deg en varsling, det er fordi AJAX er kjører på din web browser. Hvert par av sekunder din nettleser er faktisk kommer til å Facebooks servere, ber dem, trenger du har noe ny for meg, og deretter det kommer tilbake til deg. Dette tillater deg å sende forespørsler til en server uten faktisk å måtte laste inn siden. Så vanligvis, hvis du bare bruker PHP og en database, du må oppfriske the page før du kan få ny informasjon fra serveren. Men ved hjelp av AJAX, kan du trekke for at ny informasjon hele tiden, eller trekke for det når du klikker en knapp eller noe sånt. Så dette tillater oss å sende forespørsler uten omlasting the page, og vi kan bruke enten GET eller POST forespørsler. 

GET forespørsler er, for eksempel, hvis du å til Google.com og gjøre q = test. That er å gi dem en spørring test. Og det er en GET forespørselen fordi det er forbikjøring i disse parametrene inn i URL seg selv. En POST-forespørsel er som om du sender dem via innlegget. Det er som du sette den i en brev og sende den off til dem, men de ikke faktisk se innholdet. De er ikke synlig i nettadressen. Du kan ikke direkte skriv det inn; du har å sende det nesten hemmelighet. Det er i et innlegg. Men ved hjelp av jQuery, kan du gjøre GET og POST forespørsler mye mer lett enn du normalt kunne ved hjelp av bare ren JavaScript. Du kan utføre spørringer APIer bruk av GET forespørsler, og du kan også sjekke for påloggingsinformasjon. På den neste side, skapte jeg dette, noe som spør, "Hva er det til lunsj?" hjelp av Harvard food API, så la oss trekke det opp. Dette er bare et eksempel på hvordan du kan bruke jQuery til å gjøre en GET forespørsel til en API og få informasjon tilbake fra den. Så vi ønsker å se menyen for i dag, og vi ønsker å se hva som er for lunsj. Her er nettadressen for å skape en GET-forespørsel i jQuery. du bruker the $. få funksjon. Det første argumentet er den URL, så akkurat det du leter spørring. Deretter den neste argument er en funksjon som utføres når den GET-forespørsel er fullført. Slik at du sende off noen forespørsel til serveren, vent til det å komme tilbake. Når det ikke kommer tilbake, du kommer å ta noen handling med dataene som er tilbake fra serveren. La oss gå videre og kode dette så vel. Jeg gjorde ikke kode dette heller, med vilje. Her er den TODO. Først av alt, la oss bruke arrangementet binding slik at når denne knappen trykkes, sende vi off en GET forespørsel. Og når at GET forespørsel returnerer med noen data, vi kommer til å skrive det inn i denne måltid info ID div. Først av alt, la oss velg maten-knappen ID. Når den klikkes, noe vi vil ha det å gjøre noe. La oss bare gjøre det en anonym fuction, som før. Kan vikle disse krøllete bukseseler, og når denne knappen trykkes, ønsker vi å sende en GET forespørsel å sjekke hva som er til lunsj. Å gjøre det, kan vi bare skrive inn $. Få. Dette er en jQuery funksjon, ved hjelp av dollaren sign. Det tar et par av argumenter. Den første ene er den URL, den andre en er den tilbakeringing funksjon, den funksjonen som kalles når at forespørsel faktisk returnerer. La oss bare bygge URL-adressen først. Vi kan få det fra den API at David skrev opp. Going her, kan vi se at det er food.cs50.net/api/1.3/menus, og deretter du bare passere i navnene av parametrene som du ville liker. Så parameter ett er verdi 1.. Det ser ut som standard dato, start dato, defaults til i dag hvis du ikke skriver inn noe, og end date også defaults til i dag hvis du ikke skriver inn noe. Det er hva vi ønsker. Vi ønsker å bare få den informasjonen for i dag. 

Vi ønsker det formatet å være i JSON. Det er bare vilkårlig; du kan bruke hvilken som helst skjema som du ønsker. Du kan bruke CSV, men JSON er JavaScript Object Notation. Det er veldig lett for JavaScript å forstå hva det betyr, og vi kan skrive det ut mer lett på den måten. Så la oss be om det i JSON, og la oss forespørsel lunsj. Så måltid = lunsj. Bare for å skrive opp at URL, går vi tilbake hit. Det er menyer. Den første parameter er output = JSON fordi det er hva vi ønsker, og du skille de parametrene med en 'og.' Den andre parameteren er - jeg husker ikke. Meal. Og vi ønsker måltid = lunsj. Du kan teste denne nettadressen ved å skrive det inn i nettleseren din og kommer til å det. Det vil gi deg noen utgang. Det er bare en haug med ting som er for lunsj. Det er i denne stygge format. Vi ønsker å skrive den ut bort på side vår i en bedre format. Så URL'en er korrekt, nå er vi trenger bare å skrive en funksjon å ringe tilbake når forespørselen er vellykket. Denne funksjonen vil faktisk ta et argument. Den vil må innhente data. The data er hva som kommer tilbake fra den GET-forespørsel etter at GET-forespørsel er gjort. Vi kan gjøre krøllete bukseseler; in her vi skrive den anonyme funksjon som effektuerer, ved hjelp av at data når vi får den informasjonen tilbake. Så data, når vi skrev inn i denne nettadressen, dette er hva de data kommer til å se ut. Det kommer til å være denne enorme strengen. Men den gode tingen er, kan JavaScript analysere den ved å bruke JSON.parse-funksjonen. Så la oss opprette en ny variabel kalt parse data. Og parse data er en matrise av objekter. Hvert objekt inneholder informasjon som for as - vel, la oss ta en titt. Den har en date, et måltid, kategori, oppskrift, all dette andre stuff. Så la oss bare skrive ut ut navnet for hver enkelt. La oss iterere over hele matrisen av stuff at vi får tilbake fra det, og bare skrive ut ut hver one - skrive ut ut navnet på hver enkelt. Dette er en for løkke. 

JavaScript har dette nyttig syntaks der du kan opprette en variabel og loop over en array, og VAR jeg er bare den iterator, så i stedet for å måtte gjøre var i = 0, jeg var mindre enn lengden, i + +, kan du bare gjøre VaR jeg i analyseres data. I dette eksempel, vil uformaterte data (i) samsvarer med det aktuelle elementets av array, det faktiske objektet. Og vi ønsker å få navnet ut av det. Så la oss bare gjøre navn. Og den siste tingen er, vi skal å ha noen jQuery igjen. Faktisk legge det til i div, dette måltidet info div som er for tiden tom. Så la oss velg at. Vi vil bruke jQuery og select måltid info div ID, eller måltid info ID, beklager. Vi vil tilføye til dette. Hvis vi gjorde test, for eksempel, ville det bare overskrive det hver eneste gang. Så vi kan bare føye dette. Den nåværende element i den array, vil vi komme navnet ut av det, og vi vil føye det til slutten av måltidet info ID div. Og deretter bare for å gjøre det ser renere, vi vil også føye til en linje pause slik det er ikke alt på én linje. Så hvis alt går bra, bør at være bra å - først av alt, hver gang denne knappen klikkes, det vil sende off en GET forespørsel til denne nettadressen. Når dataene kommer tilbake fra det, vil det analysere den, slå den inn i JSON, loop over hel rekke som representerer at data, og deretter føye navnet og en linje break til hver linje i dette måltidet info ID som var tidligere tom. Så kommer tilbake til denne siden, vil vi oppdatere, klikk, finne ut - det fungerer ikke. That er uheldig. Og dette er hvor debugging kommer i. Index.html, 1 linje. Det er interessant. All right, vel, heller enn å bruke tid på å gjøre dette, jeg er bare kommer til å trekke opp den gjort fil som jeg har, er som den fullførte versjonen. Jeg er ikke sikker på hva forskjellen er, men vi kan bare åpne denne opp i stedet. Og vi går til den AJAX, og dette bør fungere riktig. Det er hva var for lunsj i dag, i ingen spesiell rekkefølge, med sitater i området rundt det, så det er ikke den peneste. Men, selvsagt, hvis du var å gjøre dette for et avsluttende prosjekt, du ville gjøre det ser bedre. Men det er bare en enkelt eksempel på hvordan du gjør den GET forespørsel. Og hvis vi ser på den faktiske koden, jeg gjetter, er jeg ganske sikker det er fortsatt ganske mye det samme. Oh, jeg glemte å konvertere den til en streng, det er det. Nei, er det fremdeles i ustand. Uansett, her er den faktiske fullførte koden for hva dette bør se ut, og det gjør det samme tingen som hva jeg bare implementert. Når du klikk på knappen, bruker den GET JSON å automatisk analysere de data. Det tar dataene tilbake fra det og looper gjennom hele matrisen og utskrifter ut the - uansett hva er for lunsj i dag, navnet av det, og føyer til et linjen break etter hver linje. Det er hvordan du bruker GET-funksjonen. 

Du kan også bruke POST, som jeg ikke gjorde har tid å skrive opp et eksempel for det, men vi kan se på dokumentasjon. Hvis du ser på jquery.post, du kan se at det er nesten det samme tingen. Du har en URL, men i stedet av passerer parametere ved hjelp - bare å sette dem i strengen for selve webadressen, du har til å passere i dette data variabelen at er i utgangspunktet en array, en ordbok som tilordner parametre til verdier. Du passerer at i, og som sender dem i å bruke en POST. Og når du har at, så kan du ha en suksess funksjon som utføres når dataene kommer tilbake. Ellers er det nøyaktig det samme. Så ved hjelp av POST, du kanskje vil bruke POST, for eksempel, hvis du ha en inngang skjema du la folk input-passordene inn i det, og sende disse passordene off til din back-end script, for å sjekke inn den database hvorvidt at brukeren er gyldig eller ikke. Du kan gjøre at alt ved hjelp av jQuery i stedet for å måtte oppdatere siden i det hele tatt. Det er hvordan jeg implementert i den blogg som jeg viste deg tidligere. Hvis vi gå til slutten portal og logge ut, logge ut, Logge ut virker ikke. Vel, la meg bare åpne den opp i et nytt vindu. Her er det en passord, og jeg ble kommer til å skrive i noe tilfeldig. Det fungerer ikke, men du kan se at vi gjorde ikke faktisk nødt til å oppdatere siden i det hele tatt. The koden, hvis du ønsker å se på det, er alle tilgjengelige i her. Så koden skrev jeg i fjor en gang. Som du kan se her, sender vi en POST forespørsel. Jeg har en fil som heter login.php i ryggen end, som sjekker hvis passordet er gyldig. De parametrene vi passerer i er passord, kartlagt til den inngangen som står i denne inngangen boksen for tiden. Og når dataene kommer tilbake, sjekk vi. Hvis dataene er falsk, så sier vi feil passord, skyver det ned, og bare gjøre det forsvinne etter det. Ellers, laster vi admin-side. Og dette ble all gjort ved hjelp av JSON. I dette mange linjer med kode, kan du bare passere dataene til den back end, sjekke om det er riktig, sjekk om du logget inn riktig, og faktisk svare på det, omdirigere den personen til den riktige side eller ikke å la dem logge inn og fortelle dem at de hadde en feil passord. Så det er et eksempel på hvordan du kunne bruke jQuery POST til å sende en POST-forespørsel til din back end, sjekker hvorvidt noen er logget i riktig. 

All right, så at er alle de eksemplene jeg hadde, og alle ting jeg ønsket å dekke. De er de store ting som jQuery lar deg å gjøre: velg elementer, modifisere dem ved hjelp DOM manipulasjon, du kan legge til effekter, aktivere ting på visse hendelser, og også gjøre AJAX forespørsler svært sømløst og enkelt. Så takk for kommer eller ser på, og hvis du har noen spørsmål, bare la meg vite. Yeah? [Student] Back når du viste, du hadde JSON etter at selvtesten forespørselen i sitater, og jeg bare lurte på hva som gjorde. >> Yeah, ser jeg. Spørsmålet var at, i eksempelet bare jeg viste, det var ordet JSON i anførselstegn rundt the - Jeg vil bare trekke den opp igjen - around den POST funksjon. Jeg bare å trekke det opp for å vise. Så 's her denne POST-forespørsel, og det er denne JSON i anførselstegn. Som definerer akkurat hva vi forventer utdataene å være. Så hvis vi passerer i JSON som den forventede data type, det er ikke et krav, men hvis vi passere den i, så dataene vil automatisk bli parset som JSON. Så vi ikke har å ringe den JSON parse-funksjonen på den, det vil bare skje automatisk. Og hvis du tar en titt på dokumentasjonen for POST, dit er denne datatypen variabel, hvilken type data som som forventes fra serveren. Er førehandssett være et intelligent gjetning at kan være galt, slik at du kan la det stå tomt, men det er bare den type av data i koding at du bruker, enten det er JSON eller XML eller noe annet. 

Eventuelle andre spørsmål? OK. Hvis du har noen andre spørsmål, føler seg ledig å email meg på vshekhawat@college.harvard.edu, og lysbildene og kode bør være tilgjengelig på nettet pretty snart. Lykke til med dine endelige prosjekter, håper du bruke jQuery. [CS50.TV]