TOMAS REIMERS: Hej, alla. Jag heter Tomas Reimers. MIKE RIZZO: Och jag är Mike Rizzo. TOMAS REIMERS: Vi är två av CS50s TS. Och idag tar vi leder seminariet om JavaScript och CSS för webbprogram. Om du vill följa med, det länken är där borta. Och vill du sätta upp på kort på datorn? Det finns på länken. Det är en liten plats, som har kopplingar till alla resurser vi kommer att vara peka dig i dag och har även en hel del användbar information skriven av oss till Läs mer på djupet när du går tillbaka, och du försöker komma ihåg vad exakt gjorde vi säger, vad du var talar om, et cetera. MIKE RIZZO: Okej. Så låt oss börja. TOMAS REIMERS: Så du vill börja? OK. MIKE RIZZO: Ja. Så vi ville först börja med en bred översikt om internet och filtyper vid utformningen av webbplatser. Även denna presentation som vi vill komma in i JavaScript mycket mycket senare, ville vi att börja med bara, typ av, liksom en fågelperspektiv av vad en hemsida är och hur att tänka på att utforma en webbplats för start. Så ni, på denna punkt - med det vara fredag ​​kväll - borde ha lämnat in din CS50 finans Problemet ställer. Förhoppningsvis var det en god smak om vad webbprogrammering kan vara. Men här vill vi, typ av, ge du en annan smak, liksom. TOMAS REIMERS: Så bara för att sammanfatta vad händer, när du skriver in din webbadress till din webbläsare, blir den webbadressen såg upp i datorn. Och datorns ansluten till en annan dator, som är värd den webbplatsen. OK, så när du går till google.com, du ansluten till en av Googles datorer, som har den filer för google.com. Det frågar sedan för en viss fil. Så om du går till - Jag vet inte - example.com / index.html eller / test.html, du kommer att be om den specifika filen. Och webbservern är det som händer att återlämna den till dig. Sedan, när du går igenom den filen - när du är datorn blir att fil - det kommer att starta att bygga en webbsida. Så nu har HTML-filen, vilket är ungefär som den strukturen på webbsidan. HTML-filen kan också referera CSS-filer, som definierar stil av webbsidan. JavaScript-filer, som definierar interaktion med webbsidan. Bildfiler som är bara bilder. Och möjligen länka till andra HTML-filer, som du kan sedan besöka. MIKE RIZZO: OK, bra. Så ni har allt, kanske, mödosamt ställa in din lokala värden på din virtuella maskin. Och det bara, typ av, är den lokala domän som datorn är värd endast för dig på din egen IP-adress. Så inom det, då kan du lägga till till det egna webbsidor. Jag menar, i CS50 Finance, bör du ha lagt till några HTML-sidor, som, slags, insvept i PHP-omslag. Men i slutändan, vad din PHP-sidor fick mata var HTML. Men tänker tillbaka till början av PSET, var vi tvungna att ställa in behörigheterna för allt, eller hur? Så här låter bara i princip oss som kan läsa, skriva, och möjligen exekvera varje fil. Så vi kommer att göra en snabb - hm? TOMAS REIMERS: Så ska vi att göra en snabb demo. Så bara för att påminna dig, när du ansluta till Googles dator - vem - och be om en fil på datorn först måste se till att du är behörig att faktiskt se den filen eller läsa att fil för att du inte bara kan ställa för alla filer på den datorn, eller hur? Det skulle vara en säkerhetsrisk. Så filer på de system vi använder, som denna CS50 apparat, har tre allmänna personer som kan ha behörigheter till något. Den första är den faktiska ägare av nämnda fil. Den andra är den grupp som filen tillhör. Vi kommer inte att fokusera för mycket på det. Och det sista är, typ av, liksom värld eller liknande alla andra som är inte är specifika för den filen och inte har någon form av äganderätt det. Så om vi har ägare, grupp, och sedan världen. Och sedan, för var och en av dessa grupper, du kan ha ett av tre tillstånd, OK, eller flera av dem. Du kan ha läsbehörighet. Du kan ha rätt behörigheter. Och du kan ha körrättigheter. Så när det gäller faktiska filtyper, läsa tillstånd är som faktiskt läser innehållet i filen. En rätt tillstånd skriver till nämnda fil. En exekverarättigheterna kör fil som du gör när du kör en av din CS50 projekt. Så när vi funderar filer som när vi behöver läsa ett HTML- fil, som måste vara världens läsbar, eller hur? Förmodligen också ägaren vill för att kunna redigera den filen. Så ägaren kommer att behöva läs-och skrivbehörighet. De behöver egentligen inte köra. Group, kommer vi att behandla samma som världen för nu. Så de behöver läsbehörighet. Men de behöver inte skriva eller körningsbehörigheter. Och nu, om vi tänker tillbaka på tidigare PSETs, vad vi förstår är denna typ för att se ut som binär, eller hur? 1 står för ja. 0 för nej. Och vi kan faktiskt översätta detta till binära. Så 110 i binär skulle vara 6. 100 skulle vara 4. Samma med världen. Så det nummer du skulle få för tillstånd för detta skulle vara 644. MIKE RIZZO: Om du tänker tillbaka på när du chmoded något, tror jag de gav i problemet ange exempel på var du kan göra något som chmod 644 och sedan filnamnet. Den 644 då, kan du nu se direkt var det kommer ifrån. Så förhoppningsvis som gör att lite mer tydlig. Och sedan för att du killen klarhet - oh yeah, det är här igen. Så 600 då bara skulle vara exempel vi gav upp här där ägaren har läsa och höger behörigheter medan grupp och världen inte har några behörigheter för att komma åt filen. TOMAS REIMERS: Och så har vi en snabb lista över vanliga behörigheter. Så kataloger, du vill att faktiskt chmod 711. Quick åt sidan - för en katalog att ha körbara tillstånd innebär att kunna för att öppna katalogen. Bilder, CSS, JavaScript, HTML behov 644 därför att, i princip, världen behov läsbehörighet. Och PHP, som ni har sett även om vi inte kommer att prata om det strikt typiskt chmoded med tillstånd 600 eftersom det körs med behörigheterna för ägaren. Åtminstone på apparaten. MIKE RIZZO: Så om du inte uttryckligen ange vilken typ av fil du vill ha i faktiskt sätta upp denna presentation - Vi hade ett problem med detta eftersom allt var inte chmoded korrekt - du kommer att få, typ av, a förbjudet fel att webbplatsen faktiskt inte har behörighet att få tillgång till allt vad fil du vill att det ska komma. Och naturligtvis kan det vara fast - som i problembild - genom att ändra behörigheterna på lämpligt sätt. TOMAS REIMERS: Och den sista kommentaren för snabbt lokal utveckling är - vi tog upp detta, men vi ville bara att ta upp det igen - om du frågar efter en server - så lokala värden, till exempel com eller vad som helst. - och du inte anger en specifik fil, filen att datorn går att be om heter index.html. Eller om det inte finns, index.php. Cool. Så det är bara en resumé av allt, förhoppningsvis, när vi har täckt in avsnitt, och föreläsning, och hittills i CS50. Och nu ska vi börja prata om speciellt bibliotek. JavaScript-och CSS-bibliotek för webbprogram. Så en snabb anledningen till att vi har bibliotek programmerar - det finns en hel del problem i programmering, som håller poppar upp igen, och igen, och igen. Du kanske märker att många webbplatser behöver förmågan att ha drop down menyer, till exempel, eller behöver möjligheten att ha en mycket vanlig knapp stil, som inte får vara det lättaste. Nu när du börjar komma in i HTML, du inse att knappar kan faktiskt ser riktigt ful om du inte göra någonting. Så många människor har skrivit kallas bibliotek. Och i detta sammanhang, de är även kallade ramar. Vi kommer att använda två omväxlande. Och vad de är är att de är i grund och botten premade delar av koden - antingen CSS eller JavaScript - att ta bort en hel del av lag du har i kodning. Så de fördefiniera en massa klasser eller förväg definiera ett gäng funktioner för JavaScript fall, som du kan ringa senare. Och då kan du, liksom, få tillgång till denna kod utan att behöva göra någonting. Ett exempel på det biblioteket var CS50.H. Det var ett bibliotek som vi gav till dig i vecka ett, som får dig att göra sånt getInt och GetString utan att behöva skriva någon kod själv. MIKE RIZZO: Okej. Så här, precis som vi var tvungna att inkludera i vår c-filer de olika bibliotek, vi bör i vår HTML-filer olika bibliotek. Till exempel, om vi önskade att inkludera en specifik JavaScript-bibliotek här, kanske, en som vi har skrivit oss som det är lokalt värd kallade script.js, vi bara använda denna notation. Så vi har manus typ jämlikar JavaScript källa jämlikar JavaScript.js. Och om du tänker tillbaka på din CS50 finans problembild, om du tittat på header.php i mappen mallar, du skulle ha sett några av dessa ingår. Så denna första - skript - är bland annat ett JavaScript-bibliotek. Inklusive en CSS-bibliotek är lite annorlunda. Här, i stället för skriptet tagga behöver länken taggen. Och sedan, texten CSS typ är lite annorlunda. Du behöver inte alltid måste inkludera rel formatmall. Men jag tror att det är, generellt sett, god praxis. Och slutligen, det HREF, som du såg förmodligen i dina ATAGs för länkning i olika länkar bara Anger länken på var man kan hitta det. Till exempel, om vi önskade att koppla ett annat bibliotek - låt oss bara säga - som bodde på styles.css. Och vi ville knyta det i det är värd på webben, skulle vi kopiera det. Och sedan klistra in den på vad Vi har här i stället. TOMAS REIMERS: OK, förhoppningsvis du killar redan känner med hur man länkar CSS. Du var tvungen att göra det på din sista bruna set. JavaScript, några av er kanske har viss erfarenhet av. Några av er kanske inte. Så för nu, vet att en JavaScript-fil är väldigt mycket som en CSS-fil i den meningen att du kan länka till den eller att du kan ta med den internt. Och det kan du skript saker. Och vi kommer att gå igenom en lite JavaScript senare. Så med hjälp av ett bibliotek - När du har tagit med det, det är som enkelt som bokstavligen ringa funktioner eller lägga till klassnamn till det. Det sista vi vill prata om det gäller bibliotek - och detta är mer av en teknisk anmärkning - är öppen källkod licensiering. Så när du hittar dessa faktiska bibliotek, du kanske tänker på frågor tycker det är OK att jag bara med hjälp av någon annans kod, speciellt eftersom det är något vi verkligen sa till dig att inte göra på den här kursen. Så när det gäller öppen källkod licensiering, en hel del utvecklare - när de har skrivit ett bibliotek, som de tror skulle kunna vara hjälp för andra människor - kommer att publicera den på webben och ge det en licens. Och en licens i princip säger jag härmed att ge tillstånd till andra människor att använda denna mjukvara med följande slags bestämmelser. Vi har inkluderat en länk till en bra plats att hjälpa dig att förstå licenser i om du stöter på dem. Vanliga krav är saker som är du välkommen att använda mitt bibliotek så länge som du ger mig kredit. Du är välkommen att använda mitt bibliotek så länge som när det bryts du klandra inte mig. Du är välkommen att använda mitt bibliotek så länge när du inte använder den för att tjäna pengar för dig själv. Dessa typer av gemensamt bestämmelser. För detta CS50 slutprojekt, de bör inte vara super relevant eftersom de projekt som ni använder är förmodligen snarare, sorts, känd. Men när du faktiskt gå ut i världen och börja använda bibliotek, vilket kan eller inte kan också genomföras som några av de mer populära som vi är kommer att gå igenom. Det är bra att kunna förstå dessa licenser och till förstår vad de betyder. Och gå tillbaka. MIKE RIZZO: OK. Så nu flyttar till exempel faktiska CSS. Vid denna punkt så långt, kanske du inte har stött på detta. Men du kanske har stött på det i vardagen där något som ser ut på ett sätt på en browser kanske inte ser likadana sätt i en annan webbläsare. Detta kallas browser browser kompatibilitet. Och mer och mer det blir mer och mer av ett problem, i synnerhet som webbläsare tar fler och fler friheter att genomföra saker som de vill. Så för att övervinna det, egentligen är det ett stort bibliotek som heter Normalize.CSS. Tomas REIMERS: Vi ingår länken. Vid denna punkt, är det bra om du har din bärbara dator i det tittar på webbplatsen. Och vi ger det till dig rätt nu helt enkelt därför att CS50 final projekt faktiskt kommer att be dig att genomföra det på samma sätt och genom webbläsare. Så bara för att hålla på baksidan av ditt huvud, är detta en underbar bibliotek eftersom det kommer, sorts, standardisera saker. I Firefox, får något att visa som en bildpunkt till vänster. Och sedan Chrome kan besluta att faktiskt vad du menade var 10 pixlar åt vänster. Och du vill standardisera detta. Normalisera kommer faktiskt göra ett riktigt bra jobb med att se till att din webbplats ser likadan ut i olika webbläsare. MIKE RIZZO: Så om vi ville bara klicka på länken riktigt snabbt och show vad som ser ut som, du kan ladda ner det med hjälp av jätte Download-knappen. Eller jag dig att läsa mer om det genom att klicka på länken i den nedre högra hörnet. TOMAS REIMERS: Och om du faktiskt Klicka på Läs mer just där - klicka källan på GitHub - du faktiskt ser öppen källkod licens på LICENSE.md där. Och du ser här är den mycket populär MIT licens. Återigen, om du läser igenom texten, du kommer att kunna hitta det på webbplatsen Vi refererade tidigare och kunna förstå det utan att behöva läsa genom den juridiska jargong. MIKE RIZZO: OK, bra. Så det är normalisering. Vi ville ge dig det riktigt snabbt. Åh, har du en fråga? PUBLIK: Så när du laddar ned den, du bara följa den kod som de har under knappen Download? TOMAS REIMERS: Ja, så när du laddar ner - MIKE RIZZO: Åh, det är en stor punkt. Så frågan var hur gör vi faktiskt ladda ner den? Så om vi klickar på länken, ser vi att det faktiskt dyker upp på källkoden. Så för att göra det här, vad vi kunde gör är bara på Spara som. Spara som och det borde ta upp en fil. Och då kan vi välja att spara den såsom normalize.CSS. Och då skulle du behöva koppla den in - TOMAS REIMERS: Samma sätt som du länka i någon annan fil. Och när du koppla in den, vad som är bra om Normalisera är det faktiskt kommer ta hand om allt det hårda arbeta av sig själv. Vilket innebär att du inte har att lägga till några klasser. Du behöver inte göra någonting konstigt. Det kommer att normaliseras utan att du göra något ytterligare. Ja, du måste inkludera det. Google Chrome svarar inte. Bara en snabb åt sidan - Jag märkte att vi hoppade in i detta. Resten av den här presentationen är kommer att bli en snabb överblick. En undersökning av biblioteken. I grund och botten, vad de är. Vad de gör. Hur de är användbara. Hur du kan genomföra dem. Om du vill börja titta på dem, följa med, och läsa igenom dem, skulle jag starkt uppmuntra det. Alternativt är du välkommen även till börja ladda ner dem och med dem i en syn bara för att se vad de ser ut eller vad de gör om du har din bärbara dator framför dig. Om inte, är du välkommen att hålla lyssna på oss prata. Vi kommer att fortsätta prata. Och vi har tid i slutet, förhoppningsvis vi faktiskt komma in i visar dig vad några av dessa bibliotek se ut. MIKE RIZZO: Cool. Okej, så nu ska vi prata om Font Awesome. Tomas REIMERS: så Font Toppen är en riktigt snyggt plats, särskilt för dem av oss som är mindre konstnärligt begåvad. Att ignorera namnet Font Awesome, ger det dig en massa ikoner, som är mycket användbart. Så många gånger du kommer att genomföra en icon kanske du gillar en trevlig x så att du kan stänga något. Eller du kanske vill ha någon form av knappen Redigera med en blyertsteckning som alla andra har. Och det är då man lär sig att dra dessa ikoner kan vara mycket mödosam och svår. Font Awesome - om du faktiskt gå till webbplatsen - ger dig en massa ikoner i ikonerna i toppen. Ja, bara toppen. Det ger dig en hel del ikoner för gratis. Så här ser du att vi har saker som en asterisk, barer, en blixt, en kalender, en bugg, en bok, et cetera. Detta kan vara mycket användbart. Det sätt du inkludera detta är du inkludera bokstav CSS-filen. Och efter att du har tagit med CSS-filen, Vad du kan göra är att du skapar en tagg som heter I. satands för ikonen med klassen FA står för Font Awesome. Och sedan, oavsett klass du vill. Så om jag ville ha en symbol för detta plus torget just här, skulle jag ge den klassen FA. Och sedan FA bindestreck plus bindestreck torget. MIKE RIZZO: Cool, OK. TOMAS REIMERS: Och sedan, den sista CSS bibliotek vi vill få igenom är vi försöker hålla det minimalt på CSS bibliotek för att vi inser det titeln på denna presentation är JavaScript bibliotek. Men vi tänkte att vi kanske också introducera dig till andra bibliotek medan vi pratade om biblioteken. Det är Google Web Fonts. Och vad Google Web Fonts kan du göra är att lägga till typsnitt till din webbplats, vilket är ett riktigt enkelt sätt att göra det söt och för att skilja ditt set från alla andras är om den har ett fint typsnitt eller om den har en fin samling av typsnitt. Google Web Fonts är trevligt till skillnad från andra bibliotek i den meningen att det är en verkligen guidad installation. Så om du följer länken, det är google.com / typsnitt, tror jag. Om du följer det, du kan plocka dina typsnitt. Du kan välja till vänster från tjocklek, vinkling, et cetera. Och sedan, när du har valt en, du kan klicka på snabb användning. Just där. Längst ner till höger i rutan. Och sedan, rulla ned. Först av allt, de ger dig CSS som du behöver för att faktiskt länka till den. Det är just där. Du kan bara kopiera och klistra in den i. Och det fina med den här är du egentligen inte ens behöver ladda ner filen. Vad det kommer att göra är att det kommer länka till Googles version av det. Så tillbaka till vad betyder det. Det innebär att när en användare hämtar din fil - hämtar din HTML-sida - HTML sidan kommer att referera till denna fil. Så då är din dator kommer att se, åh, det är värd på google.com snarare än på theirsite.com. Låt mig gå be Google för den filen. Och sedan, det kommer att inkludera det nästan som om det vore en en del av din egen webbplats. TOMAS REIMERS: Cool. Och när du inkludera det, då till inkludera det i din CSS, det ger dig själva linjen. Så du anger egenskapen font familjen lika med namnet på teckensnittet. MIKE RIZZO: OK. Så vi precis avslutat med CSS. Och några av er kanske tänker, ja, Vi hade lite CSS på CS50 Finance. Men CSS biblioteket var bootstrap. Vi inkluderar faktiskt Bootstrap lite senare i JavaScript för med den Bootstrap CSS biblioteket kommer också med en hel del JavaScript som Bootstrap eller Twitter - som gjorde Bootstrap - använder för att hantera alla sina CSS. TOMAS REIMERS: Har någon något frågor så långt om CSS i allmänhet? Vi är bra? Awesome. MIKE RIZZO: Awesome. Tomas REIMERS: Så flyttar vidare till JavaScript. MIKE RIZZO: Så vi ville prata om jQuery till att börja med. Har någon hört talas om jQuery före eller använt det? Ja, ett par? Så om du bara arbetar med infödda JavaScript, hittar du dig själv skriva en massa långa väljare mycket. Så vad jQuery gör är det ger en trevlig täckblad i JavaScript språk som gör att du enkelt välja och manipulera olika element inom modell dokument föremål för webbsida eller DOM, som jag tror ni har hört talas om i föreläsning vid denna punkt. TOMAS REIMERS: Om du inte har hört talas om det eller om du inte har tittat på föreläsning ändå är Document Object Model i princip hur saker och ting är representerade. Så HTML slags ser ut som ett träd när du faktiskt dra ut den. Du har HTML-element på toppen. Du har huvudet och kroppen. Och sedan, i att du har allt annat. Det är kallat DOM - Document Object Model. Så en modell som representerar objekt i dokumentet är ett enkelt sätt att tänka om det. Och en av de bästa med jQuery är det verkligen gör förflyttnings det och manipulera element inom det otroligt enkelt. Så enkelt, faktiskt, att majoriteten av JavaScript-bibliotek, eller om inte majoriteten, den stora majoriteten av dem du ser faktiskt kräver jQuery så att de kan köra sig själva helt enkelt för om du inte hade jQuery, du skulle slösa bort en massa tid på att försöka räkna ut hur man väljer vissa element och hur man gör andra saker. Och den andra stora jQuery är att det är kors webbläsare kompatibel. Så minns tillbaka när vi sade att inte alla webbläsare genomföra saker på samma sätt? Detta gäller även i JavaScript. Och en av de bästa sakerna med jQuery är att den kommer att detektera webbläsare och upptäcka lämplig metod. Så om du måste välja ett element, Internet Explorer kan säga att du är tänkt att göra på detta sätt. Firefox kan säga rätt sätt är det här sättet. jQuery bryr sig inte. När du berättar jQuery för att välja en del kommer det att räkna ut hur det är ska göra det i webbläsaren användaren befinner sig i, och gör sedan det på det sättet. MIKE RIZZO: Så låt oss inte tala om användningen av jQuery lite. Precis som PHP, har ett särskilt jQuery kärlek för dollartecken. Så du kommer att upptäcka att någon jQuery - väl, inte alla. Du kan ibland ersätta dollarn skylt med ordet jQuery. Men generellt, bara för att det är kortare, när du ser jQuery är använt det ska vara med ett dollartecken. Så här är vi bara visar en början Väljare för ett element i DOM. Här har vi den dollartecken följt av öppna parenteser och sedan citat. Och inom citattecken går våra väljare för de olika delarna. Precis som i CSS, vi behövde väljare till kunna styla olika element inom sidan. De olika väljare översätta exakt i jQuery och JavaScript, för det mesta. Så här har vi en prick foo. Så om du minns från föreläsning, pricken betyder bara klassen. Så vi väljer elementet med klassen foo. Så om jag går vidare och öppna upp vår JavaScript-konsolen här riktigt snabbt bara visa det, om jag skriver bara dollartecken, ser vi att det är en del funktion som kommer upp. Och det är bara definieras av jQuery. TOMAS REIMERS: För er främmande, är konsolen ett verktyg inom Chrome, vilket gör det möjligt att, i grund och botten, köra JavaScript på aktuella sidan. Detta hittar du otroligt användbart när du faktiskt felsökning och du måste vara som, vad är den nuvarande värde av cirka global variabel eller vad är något annat? Det är ungefär som GDB med undantag att du kan faktiskt manipulera element på sidan med det på ett mycket enklare sätt. Och även att det inte, i princip, ta in med dig innan den gör något. Så medan kanske GDB vara som, är du säker på att du vill köra nästa steg? Konsolen är på riktigt. Så som webbsidan är rendering och gör vad den gör, den fullmäktiges också köra vid sidan om. Och du kan lägga skriva kod i denna konsol, vilket kommer köras på sidan. MIKE RIZZO: Så för att komma in i konsolen, Jag antar att jag borde helt kort tala om hur man gör det. Under de senaste problem som du kan ha begagnade Chrome inspektera elementet funktioner eller utsikt sida källa - och de som är tillgängliga genom att bara rätt att klicka på sidan eller en specifik elementet och gör antingen inspektera element eller vy sida källa. Vi kan även få tillgång till JavaScript konsol direkt av välja inspektera elementet. Så då du bara trycka konsol på höger sida. Alternativt kan du ha också gått till det övre högra hörnet, som skärs av på den här skärmen där den har de tre horisontella staplar. Och du går ner till verktyg och och JavaScript konsol här där kan se - åtminstone på Windows - genvägen är kontroll Shift J. Alltså om vi ville välja ett element inom denna sida, precis som jag visade innan, gör vi dollartecken öppna parens och sedan citerar. En intressant sak är, i allmänhet, apostrof och dubbla citationstecken är utbytbara. Så många människor använder bara enstaka citationstecken eftersom de är snabbare att skriva än dubbla citattecken eftersom du inte måste hålla ned Skift. Så jag ska bara göra det just nu. Så jag vill välja något med klass. Behållare, bara för att jag vet att det är något som är på vår webbsida just nu. Och jag slog Enter. Och vi kan se att det valt det. Så det visar sig att det tillbaka det objektet. Så det är ett grundläggande val. Om vi ​​ville faktiskt manipulera den, du skulle behöva ringa något på det valet, vilket Vi kommer att komma in senare. TOMAS REIMERS: Så bara för att titta på det mer på djupet, är det inte annorlunda än de funktionsanrop som vi gjort i C. Namnet på funktionen här är en lite konstigt. Det är dollartecken. Det är bara ett namn på en funktion. Det är inget speciellt med det. Vi har öppna parenteser. Sedan har vi vår ett argument, som i detta fall råkar vara en sträng, vilket är en väljare för den. Och då har vi vår sluten parentes. Det var allt. Det är inte så väldigt olika. Även om, ser det väldigt konstigt. Och det kan vara, liksom, en stickning pekar för många människor. MIKE RIZZO: Så samma sätt, om vi ville att välja ett element som har ett ID, Nu vill vi markera med ID i stället för klass. Det skulle vara en liknande sak där vi bara göra den skarpa tecken för ID. Så vi väljer här hela element som har ID-bar. TOMAS REIMERS: Och detta sträcker sig. Det CSS sträcker sig. Precis som i CSS, kan du välja alla länkar, som har klassen foo. Här är det samma sak. Du kan göra a.foo, vilket skulle välja alla länkar med klassen foo. Du kan göra en skarp bar, vilket skulle välj länken med ID-bar och så vidare och så vidare. Alla CSS-väljare är en giltig jQuery väljaren. MIKE RIZZO: Ja. OK, så nu ska vi få in lite av manipulation som vi kan göra med vår jQuery. Så jQuery har en viss typ av notation där vi använder bara en punkt på slutet. Och du kan tänka på detta som i C hur vi hade olika structs. Och att gå in i dessa structs, skulle du Använd en prick för att få in dem. Detta är, typ av, en liknande sak. Först nu har vi funktioner inom detta väljare att vi kan kalla på den. Så här, det allra första exemplet du kan se är en CSS-väljare. Och i grund och botten, vad det gör är det applicerar det första elementet CSS till detta sak som du valt - detta element som du valt - med det värde som. TOMAS REIMERS: Så en enkel översättning av som skulle vara om jQuery, i grund och botten, bara tog foo. Och sedan i CSS sade, färg rött och nära. Det är samma idé. Vad det är gjort är det valda alla foo element. Och då är det appliceras. Sortera på, fastighets färg är lika med rött. MIKE RIZZO: På liknande sätt kan vi också förändra det faktiska innehållet i det som är visar på HTML på sidan, vilket är riktigt coolt eftersom det innebär att din webbsidor kan nu vara helt dynamisk och behöver inte vara statisk att du skriver ut med PHP i början av sidan laddas. Så här, om vi ville ändra faktiska HTML på sidan, skulle vi nu anropa HTML-funktionen, som sedan bara insatser vad vi anger i det element som vi valt. Så här är vi välja element med klassen foo och sedan säger att det är HTML det är nu hallå världen. TOMAS REIMERS: Och när du tänker på vad är användbara tillämpningar av detta, den här CSS ett, det första som du kan börja tänka på är gäller även rullgardinsmenyer. Du kan börja göra saker som, när en användare svävar över den övre delen av en drop down, du vill göra bottendelen synlig. Rätt? Så i CSS, vi har fastigheter att göra något synligt. Saker som visnings kolon ingen skulle göra det osynligt. Display blocket skulle göra det synligt. Eller även om du vill gå enklare, du har saker som sikt jämlikar synligt, och sikten är lika dolt. Och du kan börja genomföra saker som rullgardinsmenyer rätt efter att du får igenom idén om hur kan du räkna ut när det öppnas, som vi får genom mycket kortfattat. Men vi kan börja se tillämpningar av detta. I en liknande känsla, om du skulle försöka och genomföra, låt oss säga, en chatt motor och du vill göra en liten pratbubbla kommer upp när du har fick ett nytt meddelande när du får nytt meddelande, kan du göra en liten pratbubbla kommit upp genom att förändra HTML på sidan, eller hur? Genom att lägga till den extra pratbubbla med extra text där. Yeah? PUBLIK: Så du skulle bädda detta inom HTML-koden i ungefär som en [OHÖRBAR]? MIKE RIZZO: Höger. Ja, vi kommer till det i en liten bit. Ja, det är liknande en Lite till PHP. Inte exakt lika. En bra distinktion att göra är vad detta faktiskt redigerar när vi redigerar sidan, eftersom det inte kommer att bli redigerar den aktuella filen som håller på att förvaras på servern eftersom världen bör inte behörighet att redigera dina filer. Detta är bara redigerar vad som finns på sidan och vad som visas inom webbläsaren. Så om du skulle ladda om sidan efter, säga, ta bort något som vi ser att vi kan göra med remove samtalet, det där skulle då dyka upp igen. TOMAS REIMERS: Så ett sätt att tänka detta är om jag är din dator och Mike är, typ av servern. Vad kommer att hända är jag ska Fråga Mike, hej, kan jag få en kopia av denna webbsida? Och han kommer att ge mig en kopia av den. Nej, det är inte den ursprungliga sak. Det är bara en kopia. Och då skulle det vara som att, åh, det finns JavaScript här. Helt klart ska jag redigera för att vara så här. Och jag redigerar din kopia. Men det är inte verkställa den färdiga kopian. Och om jag skulle fråga honom igen uppdatera sidan, - hej, kan jag få en ren kopia - han kommer att ge mig annan ren kopia. Och då kommer jag att göra samma sak liksom, åh, JS detta här som säger att redigera denna. Och jag kommer att fortsätta göra det. MIKE RIZZO: Så en riktigt cool grej som du kan göra med jQuery är faktiskt lägga till olika typer av animationer till din sida. Jag vet inte om du någonsin sett där du försöker en fyllning i ett formulär på nätet och du behöver inte fylla i saker på rätt sätt. Så en liten sak glider ner högst upp och säger att du har inte gjort det här på rätt sätt. Försök igen. Och sedan, det kanske till och med bara glida upp. Det visade sig att jQuery har inbyggda funktioner att göra allt för att animation riktigt, riktigt enkelt. Så det är först den blekna ur funktion, vilket du kan ringa om något. Och det är ett sätt att ändra CSS för som del i en animerad sätt. Så det tar allt inslag du kallar det tona ut på. Och sedan, förändras långsamt det opacitet tills den går helt genomskinligt. TOMAS REIMERS: Den andra populära ett är glida ner, vilket kommer att göra något som visas genom att skjuta den nedåt. Så i fallet med rullgardinsmenyn, igen, när vi lärt oss hur man upptäcker när detta har svävade över, du bara kunde berätta denna botten del glida ner nu. Och sedan, förefaller det genom att glida ner. MIKE RIZZO: Och sedan, om man bara har någon typ av animering i minnet att jQuery ger inte nödvändigtvis. Till exempel, låt oss säga jQuery ger dig med en bild ner och glida upp. Nåväl, låt oss säga att du ville skjuta något från vänster eller från rätt ungefär som CS50 huvudsida gör när du går till en ny panel. Du skulle då antagligen behöva genomföra det själv med hjälp av animera funktion i jQuery. Så på samma sätt, du bara animera. Och sedan, i det att det tar ordlista för de olika värdena att du ska passera. Så här, om vi ville att animera elementet foo sådan att dess bredd antingen expanderar eller kontrakt till 80 pixlar, beroende på vad den för närvarande är. Vi skulle bara passera det som argumentet i den. Animera också har några andra argument att du kan skicka det, till exempel, hastigheten på animeringen att du vill ge det. Och att göra det, vill jag bara säga snabbt till jQuery animera. Och sedan, att föra upp denna sida kan du se den har en massa olika egenskaper som du kan skicka det. Och jag uppmuntrar dig - när du kommit över något som du inte vet eller bara vill veta mer om en särskild metod som du kan ringa om något - bara Google det. jQuery är extremt väldokumenterad. Och ofta gånger det finns en hel del exempel som de tillhandahåller för dig. Om vi ​​bläddra ner - vägen ner - som vi kan använda, liksom. Återigen, när en utvecklare som faktiskt går igenom besväret att skriva ett bibliotek, de vanligtvis vill någon att använda den. Så tillsammans kommer att vara en dokumentation. Och att dokumentationen kan vanligtvis finns på projektsidan, vilket är varför vi gav dig den ursprungliga platsen i början, vilka länkar du till projektsidor så att du kan se till att dokumentationen. Normalt projektsidan i fallet av [OHÖRBAR], sade den dig namnen på klasserna. I fallet med JavaScript, det ger du namnet på funktionerna. Förresten, om vi rulla upp till toppen, en snabb liten not om funktioner är när du ser en funktion implementeras så här med den hårda parentes i mitten, det betyder att den egenskapen är valfri. Bara en heads up. Jag har sett en massa frågor om det. Så här kan vi se att animera tar egenskaper som en nödvändig argument. Och allt annat är frivilligt. Sidoanteckning - du kan tänka på detta, sortera av, som man-sidor. Man sidor är dokumentation för C och för en massa andra saker, liksom. MIKE RIZZO: Så vi har lärt oss hur man ändra olika CSS på sidan, animera den, och ta bort lägga till HTML. Men en av de riktigt mäktigaste saker om JavaScript och speciellt jQuery - vad det låter dig göra är att svara på olika element som händer. Till exempel, här har vi en händelsehanterare. Och det betyder bara när detta händelse inträffar, hanterar vi det i en visst sätt. Så här, den generiska jQuery händelsen handler är pricken på. Och sedan, det första du förutsatt är vilken händelse det ska att lyssna efter. Så här är det den klick som vi väntar på. TOMAS REIMERS: Alternativt har du på hover, vilket är en mycket populär en. Så tillbaka till min rullgardinsmenyn idé. Du skulle ha den översta på hover. Och så kan man ändra på det. MIKE RIZZO: Höger. Och då, när det händer, det bara utför denna funktion som vi ger det som ett argument och att Det varnar hej eller hej. Tomas REIMERS: Så i fallet med JavaScript, är detta en plats som vi behöver för att ta bort oss från C. Vi kan faktiskt ta funktioner som argument. Och det finns en hel del riktigt komplexa sätt att göra detta. Vi kommer att främja ett sätt, som du kan definiera fungera där. Så när du ber om en funktion som en parameter, är du i princip bara kommer att definiera funktionen på plats. Och hur du definierar en funktion i JavaScript är du bokstavligen säga funktion. Sedan, vanligtvis, namnet av funktionen. Men vi kommer aldrig att referera denna funktion igen. Så vi lämnar det namnlösa. Då parentesen, då den lockiga hängslen, och sedan koden i det. Så vi förstår denna burk vara lite förvirrande. Så vi ger dig den generella formen av vad en händelsehanterare ser ut nedan, som är på händelserna. Och då, din kod inuti det. MIKE RIZZO: Finns det någon frågor om detta? Detta kan vara lite förvirrande första gången du ser det. TOMAS REIMERS: Du verkligen vill öppna en fil och visa dem lite jQuery just nu? MIKE RIZZO: Ja, låt oss göra det. OK. TOMAS REIMERS: Så nu är vi i apparaten. Och det vi har gjort är att vi har tagit frihet att skapa både en index.html fil, som länkar till en JavaScript-fil. Och kan vi öppna upp - ja. Jo, det gör det två saker. Den första är den länkar till JavaScript-filen. Och vi ser att här uppe. Vi ser att i huvudet av HTML-dokument, i synnerhet. Så du ser det som vi, i grund och botten, säger SRC, som står för källan. Och det är webbadressen. Så här kan man säga att vi har inkluderade jQuery. Och vi har även manus. Det andra sättet att inkludera JavaScript är att du kan inkludera en inline-skript tag som vi har på botten där det säger script typ är text JavaScript. Så vi säger, lyssna, vi är om att inkludera ett skript. Och vilken typ av detta manus är JavaScript, vilket är en typ av text. Mycket enkelt. MIKE RIZZO: Så det här, typ av, får din fråga om hur vi inkluderar JavaScript våra filer för när vi hade PHP, vi gör något sånt här. Och sedan, har våra PHP funktioner - låt oss säga bestånden göra någonting med det - går in där. Men nu har vi skripttaggarna att vi ger den, som faktiskt del av HTML själv eftersom det inte är fejka att vara en HTML-fil som det är i PHP eftersom om du faktiskt gå in och titta på källan till sida, du kommer att se dessa script-taggar i det med JavaScript i samband med dem i det. Alltså, om vi ville skriva några JavaScript - låt oss bara säga att vi ville ändra kroppen eftersom just nu jag inte har andra taggar som jag verkligen kan redigera förutom kroppen. Låt oss bara säga att jag ville ändra CSS av detta. Så vi ska gå vidare och förändring färgen på det till röd. Så jag sparar filen. Låt oss gå tillbaka till vår webbsida, uppdatera, och den gör det automatiskt eftersom det inte verkar som om det väntade alls eftersom vi inte lyssnade för en händelse eller något liknande. TOMAS REIMERS: Så om vi går tillbaka till det fil i synnerhet - HTML fil - vad du ska att se är att vi har - kom ihåg att det är laddat, slags, kronologiskt. Så vi har först i huvudet. den laddar dessa två filer. Sedan går vi till kroppen. Och vi ser hej världen. Så vi gör hej världen. Och sedan det sista vi har är att vi har skripttagg. Så det körs skriptet taggen eftersom det är inte säga till den att vänta på något. Och det är den mest grundläggande sätt att köra JavaScript. Med det sagt, kan du sätta skriptet märka upp i sidhuvudet bara att visa detta? Och kör det. Vi kommer att märka att det inte ändra färg. Och detta är ett av problemen med JavaScript är att saker är laddad i kronologisk ordning. Så på tiden att denna kod var igång, valde vi - gå tillbaka - body-taggen. Kroppen taggen finns inte ännu eftersom JavaScript är i linje med HTML. Så webbläsaren är som väljer kropp. Det finns något sådant ännu. Så vi kan ignorera det. Och vi fortsätter att gå. Och så definierar vi en body-taggen. Men det blir aldrig uppdaterats. Så när du genomföra manus taggar, se till att du placerar efter body-taggen. Nästa bild. MIKE RIZZO: OK. Så vi ändrade något. Men det såg inte ut som det besvarade oss alls eftersom det bara typ av gjorde det så fort den laddade sidan. Så nu, istället för att göra detta, varför vi inte lägga en händelsehanterare. Så låt oss göra något till kroppen igen. Och låt oss säga att vi gör det på - klicka. Vi kommer att lägga till en funktion. TOMAS REIMERS: Låt oss förändring det är färg till rött igen. Varför inte? MIKE RIZZO: Ja, låt oss förändring sin "färg till rött igen. Okej. Så låt oss ladda om sidan. OK, ser vi - som väntat, inte röda ännu. Men då kan vi gå vidare och klicka på den. TOMAS REIMERS: Och det gör att bli röd. MIKE RIZZO: Och det gör röda som förväntat. TOMAS REIMERS: Och vi kan se hur vi kan börja bygga mycket grundläggande interaktion. Andra saker som vi kanske vill göra är, om vi inte vill göra kroppen färg röd, låt oss göra HTML bakgrundsfärg rött. Bara så det är samma CSS. Och när vi ändra det, kan vi se detta mycket dramatiska effekten av att ändra hela sidan. Så återigen, om du genomföra saker, du kan ha en komponent som är tänkt att användarna klickar på. Låt oss säga att en Avsluta-knapp och en hel annan komponent, som är avsedd att svara. Så du vill ta bort ett fönster när det händer. MIKE RIZZO: OK. Bara som ett exempel - du inte får se det här tidigare - Jag ska bara visa er hur det ser som när vi dölja något. Så jag ska gå vidare och inte glider upp. TOMAS REIMERS: Vill du slå in det i ett punkt typ innan vi gör det? MIKE RIZZO: OK. Ja, varför inte vi gör det bara så Vi kan välja det lite mer. TOMAS Reimers: Och låt oss ge det en klass. MIKE RIZZO: Ja. OK, så låt oss se. Istället för att välja den verkliga kroppen nu, jag ska bara markera allt med klass hej, som här vi bara en sak. Så ska vi inte behöva bekymra dig om det. Så jag ska uppdatera den. Jag ska gå vidare och klicka på den. Och det, sorts, gjorde en konstig slide up sak, som inte ser det attraktiv. Generellt ser de ganska trevligt. Jag antar att detta - för vissa anledning - inte. Jag ska bara göra en tona ut så du kan titta på det också. Mycket trevligare. Och sedan, om jag öppnar JavaScript trösta igen och vi vill se vad det ser ut när vi tona in den Nu, jag ringer bara tona in på det. Och det bleknar igen På samma sätt kan vi faktiskt också passera ett argument för att tona in eller ut, vilket är, typen av, hastigheten på den. Så låt oss gå vidare och säga att vi vill ha det att gå långsamt blekna i. Så jag antar att det fortfarande verkade ganska snabbt. Men det var långsammare än tidigare. TOMAS REIMERS: Och om du vill hitta reda på mer om dessa saker, återigen, bara att gå till jQuery dokumentation, som vi har gett dig, och läsa genom dessa. De dokumenterar deras funktioner otroligt bra. MIKE RIZZO: OK. Så jag antar att vi går tillbaka till detta. Och vi kan prata om vår sista sidan. Tja, kan vi avsluta med Bootstrap. Och då ska vi öppna den för vissa frågor. Och om ni har några idéer som du vill prova att kasta upp och se om vi kan genomföra dem med JavaScript snabbt. Så egentligen snabbt om Bootstrap, som var automatiskt med i din sista problem som i CSS-mappen och faktiskt kopplad till din header.php. Så du kunde ha lagt till klasser som definieras inom Bootstrap till det. Och det skulle ha automatiskt formaterad dessa saker därefter. Tomas REIMERS: Så Bootstrap är en mycket magisk sak som utvecklats av folket vid post. Och vad det var tänkt att göra var - innan webbplatser var verkligen svårt att göra ser trevligt, särskilt när vi hade många gemensamma komponenter. Så en hel del knappar på web såg samma. Många av textfält kan göras till ser bättre ut än den standardtext fält som du vet antagligen från riktigt gamla webbplatser eller riktigt dåligt gjort webbplatser, som precis ser ut som bokstav textrutor utan någon form av text skugga eller någon form av fin kontur. Så vad Bootstrap gjorde var det sagt, ja, Vi har mycket vanliga stilar. Varför inte vi göra en gemensam uppsättning CSS och en gemensam uppsättning JavaScript as väl, vilket kan styla det som är och som kan ge människor saker som drop down menyer, kan som ger människor saker som modals. Modal är det som dyker över sidan närhelst det är strängt taget något, som hämmar vidare interaktion tills du interagera med den. Ungefär så här är, är du säker du vill ta bort det här? Du kan inte riktigt göra något annat tills du säger ja eller nej. Det tog allt detta och det förpackat det tillsammans och sade, nu kör vi. Människor kan nu använda detta. Och du kan finna det över vid getbootstrap.com. Det var automatiskt ingår i din sista problemet inställd. Och du är mer än välkommen att använda det på ditt slutprojekt. Och om du vill följa det länk för att få Bootstrap. Du ser här är den Bootstrap CSS webbplats. Du kommer att se Bootstrap. Och om du bläddrar ner, ser du hur man laddar ner det, hur man installera det, et cetera. MIKE RIZZO: Och du kan också, intressant nog, anpassa den till vara något slag av teman som du vill. Jag vet att det är något som jag gjorde för min slutprojekt när jag tog klassen var skräddarsy det. En annan version av Bootstrap att hade ett annat färgschema och olika former av några olika saker. Så jag uppmuntrar dig att leka med det. Det är ganska kul att göra. TOMAS REIMERS: Ser över toppen igen, det är mycket likt det Font Fantastisk plats. En hel del dokumentation startar att verka liknande när du har sett nog av det. Så här har vi CSS komponent i detta. Och du får se hur det kan styla saker. Så om du klickar på tabeller, till exempel, Du kan omedelbart göra en bord ganska genom att helt enkelt lägga klasstabellen till det. Samma saker för knappar. Om du helt enkelt lägga till klass BTN och BTN standard eller BTN primära, kan du får någon av dessa knappar med dessa färdiga stilar. Och sedan, om du är ute efter något mer komplicerat än att bara restyling vad w redan har, över på fliken JavaScript överst vi har en massa komponenter. Så här har vi övergångar, modals, menyerna, flikar och verktygstips. Ett verktygstips är det som dyker upp under din musen när du svävar på något. Popovers, varningar, knappar, hopfällbar dragspel är vad de är oftast kallas. Karuseller, vilket flip igenom som bilder. Så de är de komponenter Bootstrap. Jag vill uppmuntra er att mycket gå titta på dem. Det finns en JavaScript-komponent och en CSS-komponent. Känn dig fri att använda dem som du vill. Vi ska inte gå in för mycket i dem eftersom vi anser att dokumentationen är riktigt bra gjort. Och ja. Har du några frågor om det? MIKE RIZZO: Så som är riktigt snabb sida, utformningen av denna webbsida som vi snabbt sätta ihop för denna presentation är faktiskt gjort med hjälp av Bootstrap. Som ni ser, när vi klickar på dessa olika flikar, vi är aldrig lämnar denna nuvarande index.html sidan. Så vad vi har är olika divar inom denna index.html. Och sedan, när vi klickar på en annan flik, det är bara att byta som ens visning. Så det följaktligen placerar dem, ändrar HTML på sidan, så att den aktuella fliken är markerad som aktiv så det verkar annorlunda och utseende riktigt nice. TOMAS REIMERS: Så det var allt gjort utan att vi skriver nästan alla CSS. Vi ser också en rubrik längst upp, som färgerna är av oss. Men själva sätta den på början av sidan och göra det rulla var Bootstrap. Och sedan även för ett annat bibliotek - detta är inte något som vi pratat om, men en du kan Google om du vill. Detta kallas prettify.js. Och det kommer att syntax framhäva din kod för dig med både CSS och JavaScript. Det sista vi vill prata om innan vi släpper dig ut i världen för att titta på biblioteken för att räkna ut hur man använder dem och, förhoppningsvis, Läs dokumentation och hitta det du Behovet är hur man hittar biblioteken. Så det första är vi bara kommer att driva Google. Gå Google. Det är bokstavligen vad vi gör när vi behöver göra något är vi Google. Finns det ett JavaScript-bibliotek som gör att jag kan manipulera tid i en användbart sätt? Så om jag vet att en del användare att skapa ett konto här, och detta är den aktuell tid, hur kan jag beräkna Skillnaden med det utan att behöva beräkna det själv? Så det här är faktiskt en gemensam sak, JavaScript biblioteket. Och här vi Moment.js-- den mest populära. Om vi ​​behöver ett bibliotek för att manipulera något som färg för att kunna generera en massa slumpmässiga färger - möjligen, för att generera en stil eller något - vi kunde Googla något liknande JavaScript färgbibliotek. Och jag är säker på att vi skulle dyka upp med tusen och en av dem. Du är välkommen att läsa igenom dem. Så det mesta - när du hittar dem - ska finnas på en av de platser som värdkoden. De är är några populära. De mest populära, genom långt, är github.com. Och om du går till GitHub det är faktiskt där Normalisera var värd. Så om du vill gå tillbaka till den. Visa dem att. MIKE RIZZO: Och det är faktiskt där detta är värd också, om du märkt. TOMAS REIMERS: Ja. Så om du går över till att normalisera och gå till GitHub. Var är det? MIKE RIZZO: Den lilla katten sak är GitHub symbol. TOMAS REIMERS: Oh. Så GitHub använder en metod som kallas Git att lagra koden. Är du inte vet vad det är eller det skrämmer dig, det är bra. Du behöver inte veta vad Git är eftersom GitHub har en Download knapp längst ner till höger. Den andra bra sak att veta om GitHub är de flesta produkter kommer att ha en läs mig. Och om de inte har en hemsida, det läsa mig kommer att prata om hur du installera det, hur man använder det, vad det gör, et cetera, et cetera, et cetera. Vad vi har i stort sett varit tar dig genom. MIKE RIZZO: Internets sluta. TOMAS REIMERS: Det är bra. De sista två saker vi ville att prata om - Vi har pratat om Git - är felsökning. Och den här är inte lika relevant för den slutliga produkten eftersom det är när du lämnar 50. Och när du kör in i produkter genomförande av bibliotek eller genomföra ditt eget projekt, du kommer att ha frågor eller är du kommer att leta efter frågor. Återigen, Google det. Det är bokstavligen vad vi gör. Detta kommer att låta dumt. Men bokstavligt, vi Google det. Och återigen, en av de första sakerna du brukar stöta på är stackoverflow.com, som är ett underbart frågor och svar ur sikte. Det är underbart både för att du kan skicka frågorna och leta efter svar men också på att det redan har en hel del förifylld innehåll där. Så oftast när du Google en programmering fråga inom den första par träffar du kanske redan kör in i den under dina problemsamlingar. Och sedan, det sista riktigt kort sak är JSFIDDLE, vilket är - i dag vi har gjort en hel del arbete med JavaScript HTML CSS. JSFIDDLE är en web app, som i princip kan du ta din HTML, DIN JavaScript längst ner till vänster, och din CSS uppe till höger. Och då kan det skapa en snabb rendering av det och se hur det interagerar. Det är väldigt användbart när människor försöker att göra ett proof of concept som detta är hur du skulle gör en rullgardinsmeny. Kanske en snabb avslöja eller vad som helst. MIKE RIZZO: Så låt oss gå vidare och klicka här. En snabb anteckning - medan, innan vi var gör på klick. Det visade sig att JCorey Sydkorea har också en inbyggd i klick händelsehanterare som det använder bara för att det siffror att du är kommer att vilja göra en massa saker när du vill klicka på något. På liknande sätt har det också en hovring. Men för att få den fulla omfattningen av dem, titta på jQuery dokumentation och göra det. Jag gjorde något dumt här. TOMAS REIMERS: Så jag har en riktigt snabb program just här, som säger knappen på klick. Då har vi en for-loop. För i är mindre än 404. Det är bara att dyka upp dessa varningsmeddelanden. MIKE RIZZO: Och vad var det kod 404 stod i HTML? Någon som minns? Hittades inte, höger. Chrome läggs också denna snyggt sak där du kan - TOMAS REIMERS: Därför att människor som Mike började göra detta mycket och irriterande användare, vilket gör du att se info. MIKE RIZZO: Ja. TOMAS REIMERS: Har vi några frågor om det här, om JavaScript bibliotek, hitta bibliotek eller vad webbutveckling ser som i den verkliga världen? Vi kör upp mot tiden. Så jag är inte säker på att vi ska att ha tid att genomföra om det inte är riktigt snabb. Är vi bra? MIKE RIZZO: Något ni skulle vilja att se riktigt snabb i, liksom, två minuter eller mindre? TOMAS REIMERS: Anything vi kan förtydliga? Hur man skriver in - PUBLIK: [OHÖRBAR]? MIKE RIZZO: Ja, så that - TOMAS REIMERS: Du kan bara trycka Kontroll-U på webbplatsen. MIKE RIZZO: Åh, jag visste inte det. TOMAS REIMERS: Jag tror, ​​ja. Kontroll-U. Yeah. MIKE RIZZO: Åh, så det är kod för webbplatsen. Men om du verkligen vill ladda ner vår filer och allt, är den värd på github.com TOMAS REIMERS: slash mitt namn - Tomas Reimers - snedstreck CS50 bindestreck seminarium. MIKE RIZZO: Och du kan hitta allt där. Tomas REIMERS: Detta är vad GitHub ser ut, förresten. Så återigen, när du ser en öppen källkod projekt, typiskt, kommer de att vara en läsa mig där som du kan läsa. Och om du går tillbaka, kommer du att märka att har du hämta zip, som kommer kan du ladda ner käll kod för att inkludera produkten i din egen sak. MIKE RIZZO: Ja, och om vi bara klicka på index.html verkligen snabbt - TOMAS REIMERS: Du ser här är den källkod för vår webbplats. MIKE RIZZO: Dessutom, jag glömde att skjuta rätt tidigare med det stora bordet det ingår, men det finns också en tabell av chmods som vi ingår bara för din skull. Men om vi rulla hela vägen ner till botten, vi faktiskt inte göra mycket mycket med JavaScript grejer alls med detta. Det är uteslutande från allt annat som vi hade. Så tack killar för att ni kom och lyssna. Vi hoppas att detta var riktigt bra. Om du har några JavaScript relaterad frågor eller bara vill prata om vad mer som vilka andra coola saker du kan göra med JavaScript, vill vi gärna att prata med dig. TOMAS REIMERS: Om du har en fråga om ditt projekt eller om det kan vara relevant, kommer vi förmodligen stanna kvar lite efter detta. Men andra än att ha en bra helg. MIKE RIZZO: Ja, njut. Se er. TOMAS REIMERS: Vi ses.