Tip:
Highlight text to annotate it
X
>> 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 ***ä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 *** 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 *** 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 *** 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 *** 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 *** 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 *** 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 *** 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 *** 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 *** 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 *** 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 *** 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.