[Powered by Google Translate] [Seminar: Jquery] [Vipul Shekhawat, Harvard University] [Dette er CS50.] [CS50.TV] Hvis du følger sammen derhjemme, kan du faktisk få adgang til mine dias online ved at gå til dette link. Det er TjjRWj på bit.ly. Du kan også bare gå til webadressen direkte som er cloud.cs50.net / ~ vshekhawat, som er mit navn, og jquery. Jeg stærkt opfordre dig til at følge med, hvis du ser derhjemme, og hvis du er her, også fordi det er en temmelig interaktiv præsentation. 

Så i dag jeg har tænkt mig at tale om jQuery, og det første spørgsmål er, hvad er jQuery? Dette år, jeg kender jer ikke har dækket JavaScript i så mange detaljer som vi har i de forløbne år. JavaScript er først og fremmest, bare en klient-side sprog som du bruger til at køre scripts og kode på hver brugers maskine. Så du har en server, der giver web-sider til folk, men du måske ønsker at gøre ting på deres maskine, spørge deres maskine til at sende anmodninger til din server hvert 30. sekund eller noget lignende. Du kan gøre det ved hjælp af JavaScript. JQuery bare giver mere funktionalitet på toppen af ​​JavaScript der gør ekstra ting for dig. Hvis man ser på indholdet på toppen, der beskriver nogle af de ting, du er i stand til at gøre. Så samlet var det skabt i januar 2006. Det blev først udtænkt i august 2005. Det har været rundt i et par år, og det er virkelig en del af den nye Web 2.0 bevægelsen der er lavet internettet, så skinnende. Det er den mest udbredte JavaScript bibliotek. Over 19,6 mio hjemmesider bruger det, og brugen er stadig stigende ifølge builtwith.com, som tilsyneladende i det seneste år, har netop været konstant stigende nogenlunde lineært. Blandt de øverste 10 millioner sites, er der stadig - omkring 40% af dem er i øjeblikket bruger det. Facebook bruger det, masser af andre hjemmesider i øjeblikket bruger det. Du kan se på denne statistik på din egen, hvis du gerne vil. Og du kan fortælle det er legit, fordi det har et fundament og 13 bestyrelsesmedlemmer, sammen med et team på 20 personer, der arbejder på det på en regelmæssig basis. Så det er meget udbredt, det har en. Org URL, det er fancy, det har sidegevinster for andre ting, så det er en big deal. 

Hvorfor skal du bruge det? JQuery er meget let. Det betyder, at det ikke er en enorm fil. Du kan downloade Den minified fil, som er uden alle de hvide rum og kommentarer og det er kun 32 kB. Så det er nemt at bare smide på din webside og bare for at begynde at bruge det. Det er også meget effektivt skrevet, så det ikke tager en masse - det ikke sinke din hjemmeside meget, når du bruger den. Det lader dig gennemføre ting, som tidligere var umuligt. Der er nogle aspekter af funktionalitet, som at skabe animationer, normalt det ville være meget, meget vanskeligt at gøre. Men i jQuery de er faktisk meget simpelt. Og der er nogle ting, der er irriterende at gøre, muligt i JavaScript, som at sende en POST anmodning men at sende en anmodning til en server, er du nødt til at skrive fem eller seks eller syv linjer kode. Nu kan du bare gøre det i et enkelt linje kode i en enkelt funktion opkald. Det er virkelig forenkler en masse af de ting, du laver. Og alle de seje børn bruger det. Dermed mener jeg mig. I mit afgangsprojekt sidste år, hvilket er news.whrb.org, som er for radiostationen, Jeg har oprettet denne blog der er vært alle de viser, at vi har gjort, og de MP3 filer til dem. Du kan bladre gennem de seneste shows, og det hele gøres ved hjælp jQuery. Du kan fortælle på grund af alle disse animationer. væsentlige Så hvis du har - hvis du opretter et nyt indlæg, du ser disse små slideDowns, det er alle gjort ved hjælp jQuery. Og dette fade - så den slags ting er alle gjort ved hjælp af jQuery, og du behøver ikke konstant at genindlæse siden for at navigere rundt på webstedet. En anden cool ting, der er lavet ved hjælp af jQuery er denne præsentation. Jeg bruger denne open source ting kaldet scrolldeck, som nogen skrev på toppen af ​​jQuery. Hvis du rent faktisk ser på kilde, kan du se, at de bruger denne dollartegn; dollartegn anvendes i jQuery at betyde, at en funktion er en jQuery funktion. Så de definerer en wrapper på toppen af ​​jQuery der giver dig mulighed for at lave en præsentation som dette, og du kan se, at de her er inklusive originalen jQuery-fil, hvilket er, hvad du bliver nødt til at inkludere, hvis ønsker at bruge jQuery i dine egne websites. 

Berøring på det, hvordan kan du installere det? Du kan bare gå til jQuery.com og downloade filen, føje det til en web-bibliotek og medtage det. Så bare på toppen, i hovedet tag i din HTML-fil af dine vigtigste HTML-fil, har netop linje kode med den korrekte version til hvilken version af jQuery, du bruger. Du kan downloade det ved at gå til jQuery.com, klik på "Download jQuery", og du har fået det. Det er det. Og faktisk kan vi tage et kig på, hvad det ligner. Hvis du klikker på download her, jQuery er dette. Det er bare én stor JavaScript-fil, der gør alle de magiske ting for dig. Dette er den minified version, som ikke kan læses overhovedet. Du kan også se på udviklingen version, som kan læses men stadig meget, meget langvarig. Det er en masse ting derinde. Du kan også linke til Googles hostede version af det. Så der vil tillade dig at bare stole på Google til at give det. De giver hver version af det, tilgængelig på alle tidspunkter. Så du kan sikkert stole på Google til at være vært for det for dig. Eller du kan linke til jQuery egen nyeste version. De har en webadresse, der er altid opdateret til den nyeste version. Det er jQuery-nyeste, og der er et problem med det, hvilket er, at hvis den opdaterede jQuery og nogle af de tidligere funktionalitet de havde bliver retrograderet eller frarådet, det kan ikke - det kan begynde at ikke blive understøttet længere. Så hvis du skriver en hjemmeside bruger version 1.8.2, af den tid version 2.7 kommer ud nogle af de funktioner, du skrev ikke arbejde mere. Så det er bedre bare at hente den 32 kB-fil, sætte det på din webside, og det vil arbejde for evigt. 

Jeg har tænkt mig at gå videre og begynde at tale om den faktiske funktionalitet jQuery. Den første ting er selektorer. Dette er, hvad jQuery blev oprindeligt udtænkt til at give. Og du kan klikke på dokumentation for at se på den detaljerede dokumentation for selektorer jeg har tænkt mig at være der dækker. Ideen bag selektorer er, at du kan vælge HTML-elementer på en side. Elementer på en side har ID'er og klasser og andre identificerende aspekter til dem. Der er også - De er ude i forskellige ordrer. Noget af tiden, de er indlejret i hinanden. JQuery tillader dig at konstruere simple forespørgsler, der henter elementer fra siden. Derefter kan du manipulere disse elementer ved hjælp af jQuery funktioner, hvilket er manipulation afsnit vil vi komme til senere. Du kan ændre HTML, ændre CSS, kan du også animere og føje funktioner, der aktiverer på bestemte begivenheder. Så for eksempel, hvis noget er klikket, du vil have noget til at ske, du kan gøre det ved hjælp jQuery så godt. Og der er et stort antal måder at vælge elementer. De fleste af dem har jeg aldrig brugt, men der er de basale, som er ret vigtigt. Elementet selector, for eksempel, hvis du bare vælger noget , der er en div - Jeg har faktisk koden åben for dette dias præsentation. Så for eksempel, er her den første dias. Her har vi en div. Hvis vi rent faktisk vælge alle divs på siden, det vil bare give os en bred vifte af alle de divs, der findes i denne fil. ID-vælgeren kan du vælge noget med en given id. Så hvis dette, for eksempel, har denne ting ID "hvad," og hvis vi gjorde det med # hvad i stedet for noget ID, det ville blot returnere et array, der har et enkelt element, og det er dette element på siden. Vi kan også kombinere selektorer denne måde ved at have kun vælge ting med ID'er, der er divs. Så ja. Vælg kun divs, der har det id. For klasse du bare bruge en prik, det er det samme som CSS. Efterkommer virker også, så hvis du har nogle klasse og det har indlejret elementer inden det - så, for eksempel, der er nogle klasse, og det har en ankerkode at linke til en anden side, kan du bruge denne syntaks til at hente linket. Du kan også vælge flere ting på én gang, bare adskille dem med kommaer, bruge nogen selector du gerne vil, og du vil vælge dem alle på én gang, i et enkelt array. Og så er der også en ikke selector, så du kan vælge alle divs der ikke har nogle specifikke klasse. Og det er kun en hjælpsom måde at få en introduktion til, hvordan dette valg virker. Jeg vil vise nogle konkrete eksempler i et sekund. 

Avancerede vælgere er - disse er blot nogle få eksempler. Der er snesevis af disse, men hvis du ønsker at vælge alle billedet tags inden et element, så du bare gøre: image. Hvis du ønsker at vælge de lige elementer, for eksempel, hvis der er 20 af dem, du ønsker at vælge 0, 2, 4, 6 og så videre, du gør: selv, eller du kan også gøre: ulige. Disse er pseudo selektorer, hvilket betyder, at de rent faktisk beregne hver andet element i stedet for bare at gå og vælge dem alle. Du kan også - hvert element kan også have specifikke egenskaber. Så for eksempel, er class = centret også en attribut. Til denne ankerkode, hypertekst reference, href er en attribut også. Så du kan vælge noget, der linker til en bestemt side eller bare - det er virkelig generelt. Du kan vælge noget med nogen attribut, som du gerne vil. Og så også, attribut indeholder. Hvis du for eksempel ønskede at vælge alle input elementer der har ordet "pass" som navnet på dem, hvis en side har en indgang tekstblok der hedder "password", der ville være en måde du kan vælge det. Og der er mange flere. Du kan gå videre og se på dokumentationen og se konkrete eksempler på, hvordan det fungerer. 

Den næste ting er DOM manipulation. Efter at vi vælger elementer, vil vi ønsker rent faktisk at gøre ting med dem. Hidtil har vi ikke kigget på det på alle, men hvis man ser på den dokumentation, der er virkelig en masse, vi kunne gøre. På dette tidspunkt, vi kommer til at vælge elementer på denne præsentation og manipulere dem ved hjælp jQuery. Da dette er gennemført ved hjælp jQuery, har vi adgang til jQuery bibliotek, og vi kan bruge disse funktioner inden for denne kode. En nyttig ting, som du måske ikke kender, er konsollen. Og Google Chrome er, hvad jeg bruger. Du kan trykke alt kommando J eller alt kontrol J for at åbne konsollen. I Firefox Jeg tror det er kommando skift K eller kontrol shift K. I Safari skal du gå ændre nogle indstillinger. Der er et link, hvis du gerne vil gøre det, men jeg anbefale at få Chrome eller Firefox. Så lad os åbne op for konsollen, det er hernede. Det giver dig mulighed for at dybest set bare at gøre noget, du ønsker. Så du kan bare skrive oprette en variabel kaldet x, x = 5, så lad os se, hvad x + 2 er. Du kan endda gøre noget som CS + Lad os se, x + 45, som vil være CS50. Du kan bare gøre nogle typiske JavaScript stuff. Men du kan også gøre jQuery herinde. 

Så lad os se på dette første aspekt her. Vi kommer til at oprette en variabel kaldet HTML, hvilket er en streng. Det har et stykke tag i det, der kaldes nogle nye tekst. Så vi har denne HTML, det er nogle nye tekst i afsnit tags. Nu er vi faktisk ønsker at tilføje det til siden. Jeg sætte den op, så den HTML for dette stykke, denne titel her, er append id. Hvis vi vælger append id og derefter knytter til det HTML variabel jeg lige har oprettet, det vil tilføje, at HTML i slutningen, lige efter dette stykke tag. Så hvis vi gør det - vi valgte dette stykke, og vi har kaldt append funktion med HTML variabel jeg lige har tilføjet, det vil tilføje, at ny tekst lige der på siden. Vi kan også tilføjes i begyndelsen, hvilket betyder, at det vil gå, før i begyndelsen af ​​dette element. Så der er nogle nye tekst fra starten og bagefter. Jeg kan gå videre og opdatere for at slippe af med denne ting, jeg lige har gjort. Men det er et eksempel på, hvordan du kan bruge prepend og tilføj metoder at manipulere ting på siden, tilføje nogle HTML. 

Du kan også ændre klasser. Tilbage i denne stil-fil, har jeg oprettet dette for at vinde klassen der har tekst farven rød, nogle baggrundsfarve og en tekst skygge. Det ser hæsligt, men jeg kan faktisk - dette stykke svarer til klasse-id. Så jeg kan tilføje klassen for at vinde. Jeg kan udføre dette i konsollen, og det vil føje denne klasse, og nu ser det hæslige, som forventet. CSS automatisk bliver anvendt på de klasser, som du - hvis der er CSS for en klasse, er det automatisk bliver anvendt hvis du ændrer den klasse af et element. Så kan vi bare fjerne den ved hjælp af remove klasse. Så hvis du har nogle foruddefinerede klasser som rød eller fremhævet, og så du ønsker at anvende dem på elementer, du behøver ikke at gøre alle de CSS styling hver gang. Du kan bare tilføje klasse til et element, og så vil det automatisk blive - det vil automatisk søge passende for denne klasse. Vi kan også fjerne ting, så jeg har tænkt mig at vælge alle divs på siden og fjerne dem. Hvad der kommer til at se ud? Det kommer til at ligne ingenting, så der er faktisk ikke noget til venstre. Min præsentation er væk. Jeg kan opdatere og bringe den tilbage, heldigvis, fordi det bare kører én gang, men det er et eksempel på at fjerne, hvis du ønsker helt at ødelægge et element uden for siden. 

Du kan også overskrive, og jeg har tænkt mig at vælge alle afsnit tags på siden og gå ind i dem og erstatte den tekst, de har i dem med blot ordet "test." Hvis du gør dette, vil du erstatte alle afsnit på siden med denne test. Yep. De er alle erstattet med test. Så det er et eksempel på, at få adgang til teksten og overskrive det. Du kan også hente oplysninger, og det er virkelig cool for input bokse. Hvis du har en tekstboks, som folk skriver ting ind, folk skriver ting ind i det, Her vælger vi input, enhver input-tag med en type tekst. I dette tilfælde er der kun én indgang kasse i hele præsentationen, så vi bare vælge den første, og så kalder vi den val-funktionen på det. Der returnerer værdien, og for en input box, værdien er bare uanset hvad der sker for at være inde i det. Så hvis vi gør det, det bare returnerer strengen stuff. Og hvis vi kalder det igen efter at skrive flere ting, det bliver til flere ting. Det er en fantastisk måde at få adgang til dele af en input box, og derefter kontrollere, er dette en gyldig e-mail-adresse, er dette en gyldig dato, for eksempel. Du kan bare hente ting øjeblikkeligt som folk er at skrive det, og derefter kontrollere, om det er gyldigt, sende det tilbage til en server, skal du gøre noget, du vil med det. Og det er hvordan du får adgang til, hvad der er indeni disse bokse. 

Du kan også ændre CSS direkte, så i stedet for at tilsætte en klasse, der har nogle foruddefinerede egenskaber, kan du bare tilføje uanset CSS du vil noget. Så lad os vælge kroppen, hvilket er hele præsentationen, og farve er den egenskab, der definerer, hvad farverne teksten er. Hvis vi ændrer det til rød, vil al tekst på siden henvende sig til rød. Vi kan gøre noget som baggrundsfarve blå, der går vi, det er smukt. Du kan gøre hvad du vil med dette. Ved hjælp af CSS ejendom, kan du virkelig ændre, hvordan noget ser på noget tidspunkt. Den næste ting er effekter. Effekter er dybest set det samme som at ændre CSS, men de faktisk giver nogle ekstra animation til det. Så i stedet for bare at vise eller skjule noget eller ændre farven, du kan faktisk gøre det animeret. Her er dokumentationen, hvis du ønsker at tage et kig på den omfattende dokumentation for det. Men jeg har tænkt mig at dække de vigtigste. Der er vise og skjule egenskaber. Vis / skjul ID reelt svarer til hele denne boks, så hvis jeg skjule det, vil det bare forsvinde. Og jeg kan vise det igen, hvis jeg ønsker at gøre det komme tilbage. Og det er tilbage. Det gjorde faktisk ikke forsvinder, Jeg har faktisk ikke fjerne den fra siden, jeg bare indstille CSS egenskaben af ​​sigtbarhed til skjulte så du kan ikke se den mere. Der er også glide op og glide ned, der tillader dig at have denne virkning. Det glider op at forsvinde, og efter det forsvinder du kan skubbe den ned for at gøre det komme tilbage. Og nu er det tilbage. Der er også denne fade effekt, som - fade ID svarer til den boks. Hvis jeg fade det ud, så det vil langsomt forsvinde. Jeg kan også falme det i, og det vil komme tilbage. Du kan også gøre fade til, hvilket er specifik for fade-funktionen. Du kan have det fade til nogen specifik opacitet, du ønsker. Så hvis du fade det langsomt til 0,5, vil det blive halvt synligt. Jeg kan gøre det gå til .1, og tilbage til 1 for at gøre det fuldt synlige igen. Det er bare en anden animation, du kan gøre. 

Der er også den toggle effekter. Så jeg har tænkt mig at vælge den toggle-id, som svarer til denne boks, og på den div du kan ringe toggle, hvis det er synligt det bliver usynlige, hvis det er usynligt det bliver synlige igen. Så jeg bare kaldte denne skiftefunktion to gange, den første var det samme som skjul, det andet opkald var den samme som et show. Og du kan også gøre dette med en fade toggle, der gør det samme, bortset fra det faktisk svinder. Og samme med slide skifte. Der er lænket effekter samt, hvilket betyder hvis du vælger et element, og bare kalde en flok animation metoder på det, hvis du ønskede det at fade ud, så glide ned, og derefter skjule, og derefter fade ind, vil det gøre dem i træk. Så forsvandt, kom tilbage - for nogle grund, har skindet ikke ske. Lad os prøve det. Yeah, så det falmede ud, og så er det gled væk. Og der er masser mere. Du kan bruge animere funktionen at lave dine egne animationer, som er forholdsvis komplekse, men det giver dig uendelige udvidelsesmuligheder. Du kan lave alle slags animation, du ønsker. Du kan også bruge kø kø flere animationer på et tidspunkt. Så hvis du vil have noget at flyve på tværs af siden, dias fra øverste højre til nederste venstre, kan du gøre det, og bare have en masse projekter, der går den ene efter den anden. 

Den næste ting, vi kommer til at tale om, er arrangementer. Arrangementer giver dig - så langt har vi lige været at skrive ting i konsollen og det er en måde at gøre dette ske, men på en egentlig side, er du ikke vil være i stand til gøre brugeren type ting i konsollen. Du vil have tingene til at ske automatisk. Til det, skal du bruge hændelser, der aktiverer på nogle bestemt begivenhed sker. Du kan kontrollere dokumentationen for de fulde detaljer. Så lad os se. Vi ønsker at skjule eller vise kassen, men lige nu er denne knap ikke gøre noget, fordi jeg ikke gennemføre det endnu. Jeg har tænkt mig at gå til den faktiske HTML-side. Her er diaset. Der er en div for diaset. Det har den klasse af dias. Der er i teksten. Nu er der denne boks og boksen knappen. Hvordan skulle vi faktisk gøre det forsvinde? Først og fremmest, lad os skrive en funktion, der gør boksen id forsvinde. Dette er syntaksen for funtion, lad os bare kalde det hideTheBox. Det tager ikke nogen argumenter, fordi der er ingen argumenter, der skal træffes. Vi kan markere feltet id. Så ved hjælp af jQuery vælger, kan vi vælge box-id, og så bare gøre det forsvinde. Lad os gøre det fade ud. Hvis vi kørte denne funktion i selve konsollen, vi kunne definere denne funktion, vi kan kalde hideTheBox, og det virker. Men vi ønsker at det skal ske, når knappen er faktisk trykkes. At gøre det, vi er nødt til at bruge en begivenhed. At binde en begivenhed til nogle specifikke knap eller en handling sker, vi er nødt til at vælge det element, at begivenheden vil udløse - eller der vil udløse tilfælde, undskyld. 

Så først og fremmest, lad os markere feltet knappen ID fordi det er den knap, og nu, for den knap, Vi ønsker at skabe en animation, når der klikkes. Så der er denne klik-funktion. Det giver dig mulighed for at binde en anden funktion til det. Denne funktion tager en anden funktion som et argument vi kan passere i hideTheBox funktion, og når der klikkes på knappen, vil denne funktion automatisk udføre. Så dette vil fungere, hvis vi gemme dette, vil jeg opdatere, og - et sekund, jeg er ked af det. Lad mig ordne det virkelig hurtigt. Okay. Der går vi. Så nu kassen er ved at forsvinde, når vi klikker på knappen. Vi kan også ændre dette til bare fadeToggle, ændre det bare for at skjule eller vise kassen, og dette vil også arbejde for, hvis vi opdatere. Vi kan skjule det, kan vi også vise det, og det vil fortsætte med at arbejde. En anden ting, vi kan gøre, er, at vi ikke faktisk nødt til at definere denne hideTheBox funktion før vi kalder klikfunktion. Så i stedet for at definere funktionen og kalder hideTheBox, vi kun kommer til at kalde det, hvis denne ting er klikket på. Så vi kan definere det anonymt i her, hvilket er en funktion, JavaScript har. Du kan definere en funktion, der normalt, ville vi sige funktion hideTheBox med argumenter, men i stedet kan vi bare sige fungere nogen argumenter, starte klammeparentes at definere funktionen, tæt, at klammeparentes, og så bare definere funktionen på her, inden for den første parentes og sidste parentes der svarer til de argumenter klikfunktion. Så vi passerer i denne funktion, kan vi kopiere denne linje kode lige her, og det vil gøre præcis det samme. Og nu har vi ikke denne tilfældige fadeTheBox funktion der sidder rundt uden nogen åbenbar grund. Funktionen blev defineret anonymt, betyder det ikke noget navn. Det vil kun udføres, når vi klikker på boksen knappen. Så forfriskende en gang mere, en gang mere, og du kan se, at det stadig virker. Og det er hvordan du opretter begivenheder. 

Der er en masse forskellige begivenheder, som vi kan bruge. Jeg har tænkt mig at skifte tilbage til at bruge konsollen til bare vise dig, hvordan disse arbejde. De ID'er for hver af disse svarer til hver kasse. Så denne boks er click-id, denne ene er nøgle-ID, og ​​dette ene er mus-id. En ting mere er, at der er denne handling funktion, men snarere end at skrive det ud hver gang, Jeg gik faktisk videre og definerede denne handling funktion hernede. Det gør det samme som hideTheBox funktion. Det bliver dette felt og enten fade den ud eller svinder det i. Og det er derfor, vi er i stand til at bruge det her. Så hvis vi klikker på dette klik-id, vi ønsker at gøre kassen forsvinde eller genopstå. Det er det samme som den knap, vi havde i det sidste dias. Nu efter vi kalder det, kan vi klikke på dette og boksen forsvinder, klik derefter på det igen, og boksen vises igen. Det er temmelig simpelt. Dobbeltklik gør de samme ting, bortset fra at det kræver et dobbeltklik. Så hvis du klikker på det en gang, og klik på det igen intet vil ske, men hvis du dobbeltklikker på hurtigt, vil det forsvinde. Hvis du dobbeltklikker på igen, vil det komme tilbage. Så det er ret simpelt. Tastaturinput er lidt underligt, jeg tror ikke, det rent faktisk virker i dette eksempel fordi nøglen ned, key op og tastetryk og andre nøgleaktioner aktivere ligegyldigt hvad element, du binde det til. For eksempel, selv om jeg er bundet nede på legeme eller noget helt andet, så ville det stadig aktivere ligegyldigt - det er ikke specifikke. Jeg behøver ikke at blive klikke på dette, og trykke på en tast for at gøre noget forsvinde. Det vil blive aktiveret, uanset hvilken element Jeg er i øjeblikket i. Så disse faktisk ikke arbejde i dette eksempel fordi den ikke genkende mig som at indtaste input til tastaturet input div. 

Men hvis man ser på musehandlinger, den første er hover, og det kan gøre nogle af dette ved hjælp af CSS. Hvis du bruger CSS, kan du oprette det, så hvis du svæver over noget, derefter sin stil ændringer. Men ved hjælp af jQuery kan du ændre typografier af andre ting også. Så for eksempel, vi vil kalde ind, hvis vi svæver over denne div. Det betyder, at hvis vi svæve over det, så kassen forsvinder. Hvis vi flytter væk fra det, vil kassen dukke op igen. Hvis vi kalder dette og svæve over det, er kassen forsvinder, og så snart vi bevæger væk, det kommer tilbage. Hvis vi kalder denne hover funktion på musen id, som svarer til denne boks, så hvis vi svæve over feltet, derefter boksen rent faktisk vil forsvinde - det er at være funky lige nu, men - hvis vi bevæge os væk fra det, vil det dukke op igen. Lige nu er det tilbageskridt for nogle grund. Musen ind og musen flytte funktioner er noget lignende, men lidt anderledes. Mus kun indtaste aktiveres når musen går ind i boksen, som forventet. Så hvis du flytter ind i det, vil den forsvinde. Men det vil ikke igen, når du bevæger dig væk, og du bliver nødt til at flytte tilbage på det for det at komme tilbage. Der er også musen flytte funktionen, hvilket vil aktivere når musen er endog til stede i feltet. Så det vil bare holde på at gå, fading ind og ud. Og det er faktisk logger - det virker som det bare er fading ind og ud, men det er faktisk logge en masse flere handlinger end dette, så når du bevæger dig væk det vil bare holde i gang, fordi det er logget som en tusind af dem. Måske ikke et tusind. Måske fem. Den logger mere end det. Pointen er, at alle musehandlinger, der er en masse af dem. Du kan læse op på de andre dem, men de er alle lidt anderledes, og du kan vælge den, du har brug for for alt efter hvilken specifikke formål, du forsøger at gøre. 

Det næste jeg har tænkt mig at tale om, er AJAX. AJAX, jeg ved, vi ikke dækker JavaScript i så meget dybde i år, så jeg bare at tale om AJAX i almindelighed for et minut. AJAX står for Asynchronous JavaScript og XML. Det er dybest set, for eksempel, når du er på Facebook, og det skubber dig en meddelelse, det er fordi AJAX kører på din web browser. Hvert par sekunder din web browser er faktisk gå til Facebooks servere, spørge dem, har du noget nyt for mig, og så kommer det tilbage til dig. Dette giver dig mulighed for at sende anmodninger til en server uden egentlig at skulle indlæse siden. Så normalt, hvis du bare bruger PHP og en database, du nødt til at opdatere siden, før du kan få nye oplysninger fra serveren. Men ved hjælp af AJAX, kan du trække for at nye oplysninger hele tiden, eller trække for det, når du klikker på en knap eller sådan noget. Så dette giver os mulighed for at sende anmodninger uden at genindlæse siden, og vi kan bruge enten GET eller POST forespørgsler. 

GET anmodning er, for eksempel, hvis du til Google.com og do q = test. Der er givet dem en forespørgsel test. Og det er en GET anmodning, fordi den går i disse parametre i URL selv. En POST anmodning, som hvis du sender dem via posten. Det er ligesom du sætter det i et brev og sende det ud til dem, men de faktisk ikke se indholdet. De er ikke synlige i URL'en. Du kan ikke direkte skrive det i, du er nødt til at sende det næsten hemmeligt. Det er i et indlæg. Men ved hjælp af jQuery, kan du gøre GET og POST forespørgsler meget lettere end du normalt kan bruge bare JavaScript. Du kan forespørge API'er ved hjælp GET-forespørgsler, og du kan også tjekke for login-oplysninger. På næste side, skabte jeg dette, som spørger, "Hvad er der til frokost?" ved hjælp af Harvard mad API, så lad os trække det op. Dette er blot et eksempel på, hvordan du kan bruge jQuery til at gøre en GET anmodning til en API og få information tilbage fra det. Så vi ønsker at se menuen for i dag, og vi ønsker at se, hvad der er til frokost. Her er den URL til at oprette en GET anmodning jQuery. du bruger $. få funktion. Det første argument er den webadresse, så præcis, hvad du forespørger. Så næste argument er en funktion, der udfører når GET anmodning er fuldført. Så du sender fra nogle anmodning til serveren, vente på at komme tilbage. Når det kommer tilbage, er du nødt til at træffe nogle foranstaltninger med de data, der er tilbage fra serveren. Lad os gå videre og kode det så godt. Jeg har ikke kode det heller på formålet. Her er TODO. Først og fremmest, lad os bruge begivenheden binding så når trykkes på denne knap, sender vi fra en GET anmodning. Og når den GET anmodning returnerer med nogle data, vi kommer til at skrive det ind i dette måltid info id div. Først og fremmest, lad os vælge den mad knappen id. Når der klikkes på, vi vil have det til at gøre noget. Lad os bare gøre det en anonym fuction, som før. Kan pakke dem krøllede parenteser, og når dette trykkes på knappen, vi ønsker at sende en GET forespørgsel at kontrollere, hvad der er til frokost. For at gøre det, kan vi bare skrive $. Får. Dette er en jQuery funktion, ved hjælp af dollartegn. Det tager et par argumenter. Den første er den webadresse, den anden er den callback funktion, den funktion, der hedder når anmodningen faktisk vender tilbage. Lad os bare bygge URL'en først. Vi kan få det fra API, skrev David op. Går her, kan vi se, at det er food.cs50.net/api/1.3/menus, og så skal du bare passere i navnene på de parametre, som du ønsker. Så parameter 1 er værdien 1. Det ligner standard dato, start dato, defaults til i dag Hvis du ikke indtaster noget, og slutdato også defaults til i dag, hvis du ikke indtaster noget. Det er, hvad vi ønsker. Vi ønsker bare at få oplysninger for i dag. 

Vi ønsker, at formatet til at være i JSON. Det er bare vilkårlig; du kan bruge enhver form, du ønsker. Du kan bruge CSV, men JSON er JavaScript Object Notation. Det er meget nemt for JavaScript at forstå, hvad det betyder, og vi kan printe det ud lettere på den måde. Så lad os bede den i JSON, og lad anmodning frokost. Så måltid = frokost. Blot at skrive denne webadresse, vi gå tilbage her. Der er menuer. Den første parameter er output = JSON fordi det er hvad vi vil, og du adskille parametrene med et "og". Den anden parameter er - jeg kan ikke huske. Måltid. Og vi vil måltid = frokost. Du kan teste denne URL ved at skrive det ind i din browser og gå til det. Det vil give dig nogle output. Det er bare en masse ting, der er til frokost. Det er i denne grimme format. Vi ønsker at udskrive det på vores side i en bedre format. Så URL'en er korrekt, nu skal vi bare nødt til at skrive en funktion at ringe tilbage, når anmodningen er vellykket. Denne funktion vil faktisk tage et argument. Det vil være data. Dataene er, hvad der kommer tilbage fra GET forespørgsel efter GET anmodning er færdig. Vi kan gøre de krøllede parenteser, her skriver vi den anonyme funktion som henretter ved hjælp at data, når vi får de oplysninger tilbage. Så data, når vi har skrevet i denne URL dette er, hvad de data, der kommer til at se ud. Det kommer til at være denne enorme streng. Men den gode ting er, kan JavaScript parse den ved hjælp af JSON.parse funktion. Så lad os oprette en ny variabel kaldet fortolkningsfejl data. Og fortolkningsfejl data er en vifte af objekter. Hvert objekt indeholder oplysninger såsom - ja, lad os tage et kig. Det har en dato, et måltid, kategori, opskrift, alt det andre ting. Så lad os bare udskrive navnet for hver enkelt. Lad os gentage over hele vifte af ting, som vi får tilbage fra det, og bare udskrive hver enkelt - udskrive navnet på hver enkelt. Dette er en for-løkke. 

JavaScript har det nyttigt syntaks, hvor du kan oprette en variabel og løkken over et array, og var i er bare iterator, så i stedet for at skulle gøre var i = 0, Jeg var mindre end længden, jeg + +, kan du bare gøre VaR i i parsede data. I dette eksempel vil parsede data (i) svarer til det aktuelle element af matrixen. den faktiske objekt Og vi ønsker at få navnet ud af det. Så lad os bare gøre navn. Og den sidste ting er, vi kommer til at have nogle jQuery igen. Faktisk tilføje det til div, dette måltid info div, der er tom. Så lad os vælge denne. Vi bruger jQuery og vælg måltid info div id, eller et måltid info id, undskyld. Vi ønsker at føje til dette. Hvis vi gjorde test, for eksempel, ville det bare overskrive det hver eneste gang. Så vi kan bare tilføje dette. Den aktuelle element i array, vil vi få navnet ud af det, og vi vil tilføje det til slutningen af ​​måltidet info ID div. Og så bare for at gøre det ser renere, Vi vil også tilføje et linjeskift, så det ikke er alt på én linje. Så hvis alt går vel, skal der være god til at - først og fremmest, når det klikkes på knappen, det vil sende fra en GET anmodning til denne webadresse. Når data kommer tilbage fra det, vil det parse den, gøre det til JSON, loop over hele matrix, der repræsenterer disse data, og derefter føje navn og et linjeskift til hver linje i dette måltid info id, som tidligere var tom. Så gå tilbage til denne side, vil vi opdatere, klik, finde ud af - det virker ikke. Det er uheldigt. Og det er her debugging kommer ind Index.html, linje 1. Det er interessant. Okay, godt, frem for at bruge tid på at gøre det, jeg er bare at gå til trække op gjort fil, som jeg har, der er den færdig udgave. Jeg er ikke sikker på, hvad forskellen er, men vi kan bare åbne denne op i stedet. Og vi går til AJAX, og det skulle fungere korrekt. Det er, hvad der var til frokost i dag, i nogen bestemt rækkefølge, med anførselstegn omkring det, så det er ikke den kønneste. Men, selvfølgelig, hvis du gør dette for et afgangsprojekt, du ville gøre det se bedre ud. Men det er bare et enkelt eksempel på, hvordan du gør GET anmodning. Og hvis vi ser på den konkrete kode, jeg gætte, jeg er temmelig sikker det er stadig temmelig meget det samme. Åh, jeg glemte at konvertere den til en streng, det er det. Nej, det er stadig ikke fungerer. Uanset, her er den egentlige afsluttede koden for hvad det skal se ud, og det gør det samme som det, jeg netop gennemført. Når du klikker på knappen, det bruger GET JSON til automatisk parse data. Det tager data tilbage fra det, og løkker gennem hele rækken og udskriver det - hvad er til frokost i dag, navnet på den, og tilføjer et linjeskift efter hver linje. Det er hvordan du bruger GET funktion. 

Du kan også bruge POST, som jeg ikke har tid at skrive et eksempel for det, men vi kan se på dokumentationen. Hvis man ser på jquery.post, kan du se, at det er næsten det samme. Du har en URL, men i stedet for at passere parametre ved hjælp af - bare at sætte dem i streng for selve URL'en, du er nødt til at passere i denne datavariabel der er dybest set et array, en ordbog, der knytter til værdier. Du passerer det i, og det sender dem i at bruge en POST. Og når du har det, så kan du have en succes-funktion der udfører, når data kommer tilbage. Ellers er det nøjagtig det samme. Så ved hjælp af POST, du måske ønsker at bruge POST, for eksempel, hvis du har et input formular du lader folk input passwords ind i det, og sende disse passwords off til din back-end script, for at kontrollere i databasen, om den pågældende bruger er gyldig eller ej. Du kan gøre det alle bruger jQuery stedet for at skulle opdatere siden overhovedet. Det er hvordan jeg implementeret i den blog, jeg viste dig tidligere. Hvis vi går til slutningen portalen og logge ud, logge ud, Log ud virker ikke. Nå, lad mig bare åbne det op i et nyt vindue. Her er der en adgangskode, og jeg skulle til at skrive i noget tilfældigt. Det virker ikke, men du kan se, at vi ikke faktisk nødt til at opdatere siden på alle. Koden, hvis du ønsker at se på det, er alle tilgængelige her. Så den kode jeg skrev sidste år engang. Som du kan se her, sender vi en POST anmodning. Jeg har en fil kaldet login.php i bagenden, som kontrollerer, hvis adgangskoden er gyldig. De parametre, vi passerer i, er password, kortlagt til input, der er i denne indgang boks øjeblikket. Og når data kommer tilbage, vi kontrollere. Hvis dataene er falsk, så siger vi forkert adgangskode, skub det ned, og bare gøre det forsvinder efter det. Ellers, vi indlæse admin siden. Og dette blev alle gjort ved hjælp JSON. I dette mange linjer kode, kan du bare videregive dataene til bagenden, kontrollere, om det er korrekt, tjek, om du er logget ind korrekt, og faktisk svare på det, omdirigere den person til den rigtige side eller ikke lade dem logge ind og fortælle dem, at de havde en forkert adgangskode. Så det er et eksempel på, hvordan du kan bruge jQuery POST til at sende en POST anmodning til din ryg ende, kontrollere, om nogen har logget ind korrekt. 

Okay, så det er alle de eksempler, jeg har haft, og alle de ting jeg ønskede at dække. Det er de store ting, der jQuery tillader dig at gøre: vælge elementer, ændre dem ved hjælp af DOM manipulation, du kan tilføje effekter, aktivere ting på visse begivenheder, og også gøre AJAX anmodninger meget problemfrit og nemt. Så tak for at komme eller ser, og hvis du har spørgsmål, bare lad mig det vide. Ja? [Studerende] Tilbage når du viste, at du havde JSON efter at POST anmodning i anførselstegn, og jeg var bare undrende hvad der gjorde. >> Ja, jeg ser. Spørgsmålet var, at i eksemplet jeg bare viste, Der var ordet JSON i anførselstegn omkring - Jeg vil bare trække den op igen - omkring POST funktion. Jeg er bare at trække den op for at vise. Så her er det POST anmodning, og der er denne JSON i anførselstegn. Der bare definerer, hvad vi forventer output at være. Så hvis vi passerer i JSON den forventede datatype, Det er ikke et krav, men hvis vi passerer det i, så data automatisk blive fortolket som JSON. Så vi behøver ikke at kalde JSON parse funktionen på det, det vil bare ske automatisk. Og hvis du tager et kig på dokumentationen for POST, der er denne datatype variabel, den type data forventes fra serveren. Det som standard være en intelligent gæt, som kan være forkert, så du kan lade det stå tomt, men det er bare den type data i kodning, du bruger, uanset om det er JSON eller XML eller noget andet. 

Andre spørgsmål? Ok. Hvis du har andre spørgsmål, er du velkommen til at kontakte mig ved vshekhawat@college.harvard.edu, og dias og kode bør være tilgængelige online meget snart. Held og lykke med dine afgangsprojekter, håber du bruger jQuery. [CS50.TV]