TOMAS REIMERS: Hej, alle sammen. Mit navn er Tomas Reimers. 

MIKE RIZZO: Og jeg er Mike Rizzo. 

TOMAS REIMERS: Vi er to af CS50s TS. Og i dag er vi førende seminaret JavaScript og CSS til web apps. Hvis du ønsker at følge med, det link er lige derovre. Og ønsker du at sætte det op på computeren kortvarigt? 

Der er linket. Det er et lille websted, der indeholder links til alle de ressourcer, vi kommer til at være pege dig i dag og har også en masse nyttige oplysninger skrevet af os Læs mere i dybden, når du går tilbage, og du forsøger at huske, hvad præcist gjorde vi siger, hvad var du taler om, et cetera. 

MIKE RIZZO: Okay. Så lad os begynde. 

TOMAS REIMERS: Så du ønsker at starte? OK. 

MIKE RIZZO: Ja. Så vi ønskede først at starte med en bred overblik over internettet og filtyper, når designe hjemmesider. Mens denne præsentation vil vi komme ind i JavaScript en masse meget senere, ønskede vi at starte med bare, lidt ligesom et fugleperspektiv af hvad en hjemmeside er, og hvordan at tænke på at designe en hjemmeside for starten. 

Så jer på dette punkt - med det være fredag ​​aften - skal have indsendt dit CS50 finans problem sæt. Forhåbentlig, det var en god smag af, hvad webprogrammering kan være. Men her vil vi, slags, giver dig en anden smag, så godt. 

TOMAS REIMERS: Så bare for at opsummere, hvad sker, når du skriver i din webadresse til din webbrowser, får denne URL slås op i computeren. Og din computers tilsluttet til en anden computer, der er vært denne hjemmeside. OK, så når du går til google.com, er du tilsluttet en af ​​Googles computere, som har den filer til google.com. 

Derefter beder om en bestemt fil. Så hvis du går til - Jeg ved det ikke - example.com / index.html eller / test.html, du kommer til at bede om den pågældende fil. Og webserverens går at vende tilbage til dig. 

Så, når du går gennem denne fil - når du er computer får at fil - det kommer til at starte at bygge en webside. Så nu har den HTML-fil, som er lidt ligesom den struktur af websiden. HTML-filen kan også referere til CSS-filer, som definerer stil af websiden. 

JavaScript-filer, der definerer interaktion med websiden. Billedfiler, der er kun billeder. Og muligvis linke til andre HTML-filer, som du derefter kan besøge. 

MIKE RIZZO: OK, godt. Så du fyre har alt, måske, møjsommeligt oprette din lokale vært på din virtuelle maskine. Og at netop, slags, er den lokale domæne, som din computer er vært for kun for dig på din egen IP-adresse. 

Så inden for denne, så kan du tilføje til det dine egne websider. Jeg mener, i CS50 Finance, bør du have tilføjet nogle HTML-sider, som er, slags, svøbt i PHP wrapper. Men i sidste ende, hvad din PHP-sider blev output var HTML. 

Men tænker tilbage til begyndelsen af PSET, havde vi at sætte tilladelserne til alt, ikke? Så dette bare dybest set lader os vide der kan læse, skrive og muligvis udføre hver af filerne. Så vi kommer til at gøre en hurtig - hm? 

TOMAS REIMERS: Så vi vil at gøre en hurtig demo. Så bare for at minde dig om, når du forbindelse til Googles computer - hvem - og bede om en fil, computeren først er nødt til at sikre, at du er godkendt til rent faktisk at se, at filen eller læse, at fil, fordi du ikke bare kan spørge for enhver fil på denne computer, right? Det ville være en sikkerhedsrisiko. 

Så filer på de systemer, vi bruger, ligesom denne CS50 apparat, har tre generelt folk der kan have tilladelser til noget. Den første er den faktiske Ejeren af ​​nævnte fil. Den anden er den gruppe, der filen tilhører. Vi kommer ikke til at fokusere for meget på det. Og den sidste ting er, en slags, ligesom verden eller ligesom alle andre der er ikke er specifikke for den pågældende fil, og ikke har nogen ejendomsret over den. 

Så hvis vi har ejer, gruppe, og derefter verden. Og så, for hver af disse grupper, du kan have en af ​​tre tilladelser, OK, eller flere af dem. Du kan have læserettigheder. Du kan have rette tilladelser. Og du kan have køretilladelse. 

Så i form af faktiske filtyper, læse tilladelse er ligesom faktisk at læse indholdet af filen. En ret tilladelse skriver til nævnte fil. En køretilladelse kører fil, som du gør, når du kører en af dine CS50 projekter. 

Så når vi tænker på filer ligesom når vi har brug for at læse en HTML fil, der skal være verden læsbar, right? Formentlig også ejeren ønsker at være i stand til at redigere denne fil. Så ejeren vil få brug for læse og skrive tilladelser. De behøver ikke virkelig har brug for at udføre. 

Gruppen, vi kommer til at behandle samme som verdens for nu. Så de har brug for Læsning. Men de behøver ikke skrive eller køretilladelse. Og nu, hvis vi tænker tilbage til den tidligere PSETs, hvad vi ved, er disse slags af ligne binær, right? 1 står for ja. 0 for ingen. Og vi kan faktisk oversætte dette til binær. 

Så 110 i binær ville være 6. 100 ville være 4. Samme med verden. Så det nummer, du ville få for den tilladelser til dette ville være 644. 

MIKE RIZZO: Og hvis du tænker tilbage på når du chmoded noget, tror jeg de gav i problemet indstille eksempel på, hvor du kan gøre noget som chmod 644 og derefter filnavnet. 644 så kan du nu se direkte hvor der kommer fra. Så forhåbentlig, der gør, at lidt mere klart. 

Og så til dig fyrens klarhed - oh yeah, her er det igen. Så 600 så bare ville være eksempel vi gav op her, hvor ejeren har læse og rette tilladelser mens gruppe og verden har ikke nogen tilladelser at få adgang til filen. 

TOMAS REIMERS: Og så skal vi have en hurtig liste over almindelige tilladelser. Så mapper, du vil have faktisk chmod 711. Hurtig side - for en mappe at have eksekverbare tilladelse betyder at være i stand for at åbne mappen. Billeder, CSS, JavaScript, HTML behov 644 fordi, dybest set, verden behov læse tilladelser. 

Og PHP, som du fyre har set selv om vi ikke vil tale om det strengt typisk chmoded med tilladelse 600 fordi det køres med tilladelserne til ejeren. Mindst på apparatet. 

MIKE RIZZO: Så hvis du ikke specifikt angive, hvilken type fil du ønsker i rent faktisk at sætte op denne præsentation - vi havde et problem med dette, fordi alt var ikke chmoded korrekt - du kommer til at få, sådan en forbudte fejl, at hjemmesiden faktisk ikke har tilladelse at få adgang uanset fil du vil have det til at få adgang. Og selvfølgelig, som kan fastsættes - som i problem sæt - ved at ændre tilladelser korrekt. 

TOMAS REIMERS: Og den sidste bemærkning til hurtigt lokal udvikling er - vi bragt dette op, men vi ville bare at bringe det op igen - hvis du beder om en server - så lokal vært, for eksempel com eller hvad. - og du behøver ikke angive en bestemt fil, den fil, computeren går til at bede om hedder index.html. Eller hvis det ikke findes, index.php. 

Fedt. Så det er bare et resumé af alt, Forhåbentlig da vi har dækket i sektion, og foredrag, og så langt i CS50. Og nu vil vi begynde at tale om specifikt biblioteker. JavaScript og CSS-biblioteker for web apps. 

Så en hurtig grunden til at vi har biblioteker programmerer - der er en masse problemer i programmering, der holder popping op igen og igen og igen. Du vil måske bemærke, at en masse hjemmesider brug for evnen til at have drop down menuer, for eksempel, eller har brug for evnen at have en meget standard knap stil, som ikke kan være det nemmeste. Nu, at du begynder at komme ind i HTML, du indse, at knapperne kan faktisk ser virkelig grim, hvis du gør ikke noget. 

Så en masse mennesker har skrevet kaldes biblioteker. Og i denne sammenhæng, er de også kaldet rammer. Vi kommer til at bruge to flæng. Og hvad de er, er de er dybest set premade stykker kode - enten CSS eller JavaScript - at tage væk en masse af de Team du har i kodning. 

Så de pre-definere en flok af klasser eller præ-definere en flok funktioner til JavaScript sag, som du kan ringe senere. Og så kan du, en slags, få adgang til denne kode uden at skulle gøre noget. Et eksempel af biblioteket var CS50.H. Det var et bibliotek, vi gav dig tilbage i uge et, som tillod dig at gøre ting som der GetInt og getString uden at skulle skrive nogen kode selv. 

MIKE RIZZO: Okay. Så her, ligesom vi skulle omfatte i vores c-filer de forskellige biblioteker, vi også skal medtage i vores HTML filer forskellige biblioteker. For eksempel, hvis vi ønskede at medtage en specifik JavaScript bibliotek her, måske, som vi har skrevet os selv som det lokalt er hostet kaldet script.js, vi bare bruge denne notation. 

Så vi har script typen ligemænd JavaScript kilde ligemænd JavaScript.js. Og hvis du tænker tilbage på din CS50 finans problem indstillet, hvis du kiggede i header.php i mappen Skabeloner, du skulle have set nogle af disse inkluderet. Så dette første - scripts - er herunder et JavaScript bibliotek. Herunder en CSS biblioteket en lille smule anderledes. 

Her, i stedet for scriptet tag, du har brug for link tag. Og så teksten CSS typen er lidt anderledes. Du behøver ikke altid nødt til at inkludere rel typografiark. Men jeg tror, ​​det er generelt god praksis. 

Og så endelig, det HREF, som du formentlig så i dine ATAGs for at koble i forskellige links bare er oplyst linket til hvor man kan finde det. For eksempel, hvis vi ønskede at knytte en andet bibliotek - lad os bare sige - der boede på styles.css. Og vi ønskede at knytte at det er hostes på nettet, ville vi kopiere det. Og derefter indsætte den ind i, hvad vi har lige her i stedet. 

TOMAS REIMERS: OK, forhåbentlig du fyre allerede kender med hvordan man kan knytte CSS. Du var nødt til at gøre det på din sidste brun sæt. JavaScript, nogle af jer måske har en vis erfaring med. Nogle af jer måske ikke. 

Så for nu, ved, at en JavaScript-fil er meget gerne en CSS-fil i den forstand, at du kan linke til det eller som du kan medtage det internt. Og det giver dig mulighed for at script ting. Og vi kommer til at gå dig gennem en lille smule af JavaScript senere. 

Så ved hjælp af et bibliotek - når du har medtaget det, er det som simpelt som bogstaveligt kalde funktioner eller tilføje klasse navne til det. Det sidste, vi ønsker at tale om i form af bibliotek - og det er mere en teknisk note - er open source licenser. Så når du finde disse egentlige biblioteker, du kan tænke på spørgsmål kan lide er det OK, at jeg bare bruger en andens kode, især fordi det er noget, vi meget fortalte du ikke at gøre i dette kursus. 

Så i tilfælde af open source licenser, en masse udviklere - når de har skrevet et bibliotek, som de mener kunne være nyttigt til andre mennesker - vil offentliggøre det på internettet og give det en licens. Og en licens dybest set siger jeg hermed give tilladelse til andre folk til at bruge dette stykke software med følgende slags bestemmelser. 

Vi har inkluderet et link til et godt sted at hjælpe dig med at forstå de nævnte licenser hvis du løber ind i dem. Almindelige bestemmelser er ting som er du velkommen til at bruge mit bibliotek, så længe du giver mig kredit. Du er velkommen til at bruge mit bibliotek så længe når den bryder du ikke bebrejde mig. Du er velkommen til at bruge mit bibliotek, så længe som du ikke bruger det til at tjene penge for dig selv. Disse er former for fælles bestemmelser. 

Til dette CS50 afsluttende projekt, de bør ikke være super relevant, fordi de projekter, som du fyre bruger, er formentlig snarere en slags, kendt. Men når du rent faktisk gå ud i verden og begynde at bruge biblioteker, som måske eller måske ikke være så godt gennemført som nogle af de mere populære dem, vi er kommer til at gå igennem. Det er godt at være i stand til at forstå disse licenser og til forstå, hvad de betyder. Og gå tilbage. 

MIKE RIZZO: OK. Så nu flytter ind på eksempler faktiske CSS. På dette punkt hidtil, vil du måske ikke er stødt på dette. Men du måske har stødt på det i din hverdag, hvor noget der ser på én måde på én browser ser måske ikke den samme måde i en anden browser. 

Dette kaldes browser browser kompatibilitet. Og i stigende grad er det blevet mere og mere af et problem, især som browsere tager flere og flere friheder at gennemføre tingene, som de ønsker. Så for at overvinde det, der faktisk er et stort bibliotek kaldet Normalize.CSS. 

TOMAS REIMERS: Vi inkluderede linket. På dette tidspunkt, er det nyttigt, hvis du har din bærbare computer i der ser på webstedet. Og vi giver dette for dig lige nu blot fordi CS50 endelig Projektet er faktisk kommer til at bede dig om at gennemføre den lignende og gennem browsere. 

Så bare for at holde på bagsiden af ​​din hoved, det er en vidunderlig bibliotek fordi det vil, slags, standardisere ting. I Firefox kan noget vise som én pixel til venstre. Og så Chrome kan beslutte, at der faktisk hvad du mente var 10 pixels til venstre. Og du ønsker at standardisere dette. Normaliser vil faktisk gøre en rigtig god opgave at sikre, at dit websted ser det samme på tværs af browsere. 

MIKE RIZZO: Så hvis vi ønskede at blot Klik på linket virkelig hurtigt og show dig, hvad der ligner, du kan hente det ved hjælp af gigant knappen Hent. Eller jeg opfordre dig til at læse mere om det ved at klikke på dette link i den nederste højre hjørne. 

TOMAS REIMERS: Og hvis du rent faktisk klik Læs mere lige der - klik på kilde på GitHub - du faktisk se open source licens på LICENSE.md lige der. Og du vil se her er den meget populært MIT licens. Igen, hvis du læser teksten, vil du være i stand til at finde den på webstedet vi refereres før og være i stand til forstå det uden at skulle læse gennem den juridiske jargon. 

MIKE RIZZO: OK, godt. Så det er normaliseres. Vi ønskede at give dig der virkelig hurtigt. Åh, har du et spørgsmål? 

PUBLIKUM: Så når du henter det, du blot følge denne kode, at de har under knappen download? 

TOMAS REIMERS: Ja, så når du downloader - 

MIKE RIZZO: Åh, det er en stor punkt. Så spørgsmålet var, hvordan gør vi faktisk hente den? Så hvis vi klikker på linket, ser vi at det rent faktisk dukker op på kildekoden. Så for at gøre dette, hvad vi kunne gøre er bare at klikke på Gem som. Gem som og der bør opdrage en fil. Og så kan vi vælge at gemme det som normalize.CSS. Og så ville du nødt til at forbinde det på - 

TOMAS REIMERS: På samme måde som du linke i enhver anden fil. Og når du linker det i, hvad er stor om Normaliser er det rent faktisk vil tage sig af alle de hårde af sig selv. Betyder, at du ikke har at tilføje klasser. 

Du behøver ikke at gøre noget underligt. Det vil normalisere uden dig gør noget yderligere. Ja, du er nødt til at inkludere den. Google Chrome svarer ikke. 

Bare en hurtig side - Jeg bemærkede vi sprang ind i dette. Resten af ​​denne præsentation er kommer til at være et hurtigt overblik. En undersøgelse af biblioteker. 

Dybest set, hvad de er. Hvad de gør. Hvordan de er nyttige. Hvordan du kan gennemføre dem. Hvis du ønsker at begynde at kigge på dem, følge med, og læsning gennem dem, vil jeg stærkt opfordre det. 

Alternativt er du også velkommen til at begynde at downloade dem og inklusive dem i et syn blot for at se, hvad de ser ud, eller hvad de skal gøre, hvis du har din bærbare foran dig. Hvis ikke, er du velkommen til at holde lytter til os snakke. Vi kommer til at holde taler. Og vi har tid i slutningen, forhåbentlig vi vil faktisk komme ind at vise dig hvad nogle af disse biblioteker se ud. 

MIKE RIZZO: Cool. Okay, så lad os nu tale om Font Awesome. 

TOMAS REIMERS: så Font Awesome er en virkelig sirlige sted, især for dem af os, der er mindre kunstnerisk talentfuld. Ignorerer navnet Font Awesome, det giver dig en masse ikoner, som er meget nyttig. Så en masse gange, du vil gennemføre en ikon kan du som en nice x deromkring at du kan lukke noget. 

Eller du ønsker måske en form for knappen Rediger med en blyant tegning ligesom alle andre har. Og det er, når du lærer at tegning af disse ikoner kan være meget trættende og vanskeligt. Font Awesome - hvis du rent faktisk gå til webstedet - giver dig en masse ikoner under ikonerne øverst. Ja, bare toppen. Det vil give dig en masse af ikoner gratis. 

Så her kan du se, vi har ting som en stjerne, barer, et lyn, en kalender, en fejl, en bog, et cetera. Dette kan være meget nyttig. Den måde du medtage denne er du medtage bogstaveligt CSS-fil. Og efter du har inkluderet den CSS-fil, hvad du kan gøre, er at du opretter en tag kaldet I. Den satands for ikon med klassen FA stående i Font Awesome. Og så, hvad klasse du ønsker. 

Så hvis jeg ville have en ikon af denne plus square lige her, ville jeg give det klassen FA. Og så FA bindestreg plus bindestreg firkantet. 

MIKE RIZZO: Cool, OK. 

TOMAS REIMERS: Og så den sidste CSS bibliotek, vi ønsker at komme igennem, vi er forsøger at holde det minimalt på CSS biblioteker, fordi vi indser det Titlen på denne præsentation er JavaScript biblioteker. Men vi troede, at vi kan lige så godt introducere dig til de andre biblioteker mens vi talte om biblioteker. 

Det er Google Web Fonts. Og hvad Google Web Fonts giver dig gøre er at tilføje skrifttyper til din hjemmeside, som er en virkelig nem måde at gøre det smuk og til at skelne dit sæt fra alle andres er, hvis det har en dejlig skrifttype eller hvis det har en dejlig samling af skrifttyper. Google Web Fonts er rart i modsætning til andre biblioteker i den forstand, at det er en virkelig automatiseret installation. 

Så hvis du følger linket, det er google.com / skrifttyper, tror jeg. Hvis du følger det, du kan vælge din skrifttype. Du kan vælge på venstre fra tykkelse, skrå, et cetera. Og så, når du har valgt en, du kan klikke på hurtig brug. Lige der. Nederst til højre i boksen. 

Og derefter rulle ned. Først og fremmest, de giver dig CSS som du nødt til rent faktisk at linke til det. Det er lige der. Du kan bare kopiere og indsætte det i. Og nice ting om denne ene er du behøver faktisk ikke engang behøver at hente filen. 

Hvad det kommer til at gøre, er at det går at linke til Googles version af det. Så tilbage til hvad betyder. Det betyder, at når en bruger downloader din fil - downloader din HTML-side - din HTML side kommer til at henvise til denne fil. 

Så, er din computer kommer til at se, Åh, det er hostet på google.com snarere end theirsite.com. Lad mig gå bede Google for denne fil. Og så det kommer til at omfatte det næsten som om det var en en del af dit eget websted. 

TOMAS REIMERS: Cool. Og når du medtage det, så at medtage den i din CSS, det giver dig den faktiske linje. Så du indstille egenskaben font familie lig med navnet på din skrifttype. 

MIKE RIZZO: OK. Så vi er lige blevet færdig med CSS. Og nogle af jer måske tænke, ja, vi havde nogle CSS på CS50 Finance. Men CSS bibliotek var bootstrap. Vi har faktisk omfatter Bootstrap lidt senere under JavaScript fordi med Bootstrap CSS biblioteket også kommer med en masse af JavaScript, Bootstrap eller Twitter - der gjorde Bootstrap - bruger til at styre alle deres CSS. 

TOMAS REIMERS: Er der nogen der har nogen spørgsmål hidtil omkring CSS i almindelighed? Vi er gode? Awesome. 

MIKE RIZZO: Awesome. 

TOMAS REIMERS: Så flytter videre til JavaScript. 

MIKE RIZZO: Så vi ønskede at tale om jQuery til at begynde med. Har nogen hørt om jQuery før eller brugt det? Ja, et par? Så hvis du bare arbejde med indfødte JavaScript, vil du finde dig selv skrive en masse lange selektorer en masse. Så hvad jQuery gør, er det giver en pæn indpakning til JavaScript sprog, der lader dig nemt vælge og manipulere forskellige elementer i dokumentet objekt model af webside eller DOM, som jeg tror du fyre har hørt om i forelæsning på dette punkt. 

TOMAS REIMERS: Hvis du ikke har hørt om det, eller hvis du ikke har set foredrag endnu, Document Object Model er dybest set, hvordan tingene er repræsenteret. Så HTML slags ligner et træ når du rent faktisk trække det ud. Du har HTML-element på toppen. Du har hoved og krop. 

Og så, inden du har alt andet. Der er benævnt DOM - Document Object Model. Så en model, som repræsenterer objekter dokumentet er en nem måde at tænke om det. Og en af ​​de store ting om jQuery er det virkelig gør gennemkører der og manipulere elementer inden for det utroligt simpelt. 

Så simpelt, i virkeligheden, at de fleste af JavaScript biblioteker, eller hvis ikke flertal grand størstedelen af ​​dem du vil se rent faktisk kræver jQuery så at de kan køre sig selv blot fordi hvis du ikke har jQuery, du ville spilde en masse tid på at forsøge at finde ud af, hvordan du vælger bestemte elementer og hvordan at gøre andre ting. Og den anden store ting om jQuery er, at det er cross browser kompatibel. 

Så husk tilbage, når vi sagde, at ikke alle browsere implementere tingene på den samme måde? Dette gælder også i JavaScript. Og en af ​​de store ting om jQuery er, at det detekterer browser og opdage passende metode. 

Så hvis du har brug for at vælge et element, Internet Explorer kan sige, du er formodes at gøre på denne måde. Firefox kan sige det rigtige måde er denne vej. jQuery er ligeglad. Når du fortæller jQuery til at vælge en element vil det regne ud, hvordan det er formodes at gøre det inden browseren Brugeren er i øjeblikket i, og derefter gøre det på den måde. 

MIKE RIZZO: Så lad os ikke tale om brugen af ​​jQuery en lille smule. Ligesom PHP, jQuery har en særlig forkærlighed for dollartegn. Så du opdage, at enhver jQuery - godt, ikke alle. Du kan undertiden erstatte dollar underskrive med ordet jQuery. Men generelt, bare fordi det er kortere, når du ser jQuery være brugt det vil være med et dollartegn. 

Så her er vi bare viser en begyndelse omskifter for et element i DOM. Her har vi den dollartegn efterfulgt ved åbne parenteser og derefter citater. Og inden for de citater gå vores vælgere for de forskellige elementer. Ligesom i CSS, vi havde brug for vælgere til være i stand til at style forskellige elementer på siden. Disse forskellige vælgere oversætte nøjagtigt ind jQuery og JavaScript, for det meste. 

Så her har vi en prik foo. Så hvis du husker fra foredrag, dot betyder bare klassen. Så vi vælger elementet med klasse foo. Så hvis jeg gå videre og åbne vores JavaScript-konsol her virkelig hurtigt bare vise det, hvis jeg bare skrive dollar tegn, ser vi, at det er nogle funktion, der kommer op. Og det er netop defineret af jQuery. 

TOMAS REIMERS: For dem af jer uvant, konsollen er et værktøj inden Chrome, som giver dig mulighed for at, dybest set køre JavaScript på aktuelle side. Dette finder du utroligt nyttigt, når du faktisk debugging og du behøver at være ligesom, hvad er den nuværende værdi på ca global variabel eller hvad er noget andet? Det er lidt ligesom GDB med undtagelse at du kan faktisk manipulere elementer på siden med det i en meget lettere måde. Og også det ikke, dybest set, tjek i med dig, før det gør noget. 

Så henviser til, at måske GDB være ligesom, er du sikker på at du ønsker at køre det næste skridt? Konsollen er i det virkelige. Så som websiden rendering og gøre, hvad det laver, det byrådets også kører sideløbende. Og du kan sætte imputere kode i at konsol, som vil køres på siden. 

MIKE RIZZO: Så for at komme ind i konsollen, Jeg tror jeg skal kort nævne, hvordan man gør det. I de sidste problemer, som du måtte have brugt Chromes inspicere element funktioner eller view side kilde - og dem er tilgængelige lige ved at højreklikke klikke på siden eller en specifik element og gør enten inspicere element eller visning side kilde. Vi kan også få adgang til JavaScript konsollen direkte ved vælge inspicere element. Så du bare trykke konsol i langt højre side. 

Alternativt kunne du også har gået til øverste højre hjørne, som er afskåret på denne skærm, hvor det har de tre vandrette søjler. Og du går ned til værktøjer og derefter JavaScript-konsol her, hvor kan se - mindste på Windows - genvejen er Kontrol Shift J. Så hvis vi ønskede at vælge et element inden for denne side, ligesom jeg viste før, vi gør dollar sign åbne parens og derefter citerer. 

En interessant ting er, generelt, apostroffer og dobbelte anførselstegn er udskiftelig. Så en masse mennesker bare bruge single anførselstegn, fordi de er hurtigere til at skrive end anførselstegn, fordi du ikke gøre nødt til at holde Shift nede. Så jeg vil bare gøre det lige nu. 

Så jeg ønsker at vælge noget med klasse. Container, bare fordi jeg ved, det er noget, der er på vores webside lige nu. Og jeg ramte Enter. Og vi kan se, at det har valgt det. Så det viser sig, at det returneres samme objekt. Så det er et grundlæggende valg. Hvis vi ønskede at faktisk manipulere det, ville du nødt til at kalde noget på den udvælgelse, som vi vil komme ind senere. 

TOMAS REIMERS: Så bare for at se på det mere i dybden, det er ikke anderledes end funktionskald vi gjort i C. Navnet på funktionen her er der en lidt underligt. Det er dollartegn. Det er bare et navn på en funktion. Der er ikke noget særlig om det. 

Vi har åbne parenteser. Så har vi vores ét argument, som i dette tilfælde sker for at være en streng, som er en omskifter for den. Og så har vi vores lukket parentes. Det er det. 

Det er ikke så meget forskellige. Selv ser det meget underligt. Og det kan være, en slags, et springende punkt for en masse mennesker. 

MIKE RIZZO: Så på samme måde, hvis vi ønskede for at vælge et element, der har et id, Nu ønsker vi at markere med ID i stedet for klassen. Det ville være en lignende ting, hvor vi bare gøre det skarpe tegn for id. Så vi vælger her hele elementer, der har ID bar. 

TOMAS REIMERS: Og det udvider. At CSS udvider. Ligesom i CSS, kan du vælge alle links, som har klassen foo. Her er det det samme. 

Du kan gøre a.foo, hvilket ville du vælge alle de links med klassen foo. Du kan gøre en skarp bar, hvilket ville vælge linket med id bar og så videre og så videre. Enhver CSS selector er en gyldig jQuery selector. 

MIKE RIZZO: Ja. OK, så lad os nu komme ind i en lille smule manipulation, som vi kan gøre med vores jQuery. Så jQuery har en bestemt type af notation, hvor vi bare bruge en prik i slutningen. Og du kan tænke på dette som i C hvordan vi havde forskellige structs. Og for at gå ind i disse structs, ville du bruge en prik for at komme ind i dem. 

Dette er sådan, en lignende ting. Først nu har vi funktioner inden for dette vælgerelementet at vi kan kalde på den. Så her, det allerførste eksempel du kan se, er en CSS selector. Og dybest set, hvad det gør, er det gælder det første element CSS til dette ting, du har valgt - dette element, du har valgt - med den værdi,. 

TOMAS REIMERS: Så en let oversættelse af der ville være, hvis jQuery, dybest set, tog bare foo. Og så i CSS sagde, farven rød og tæt. Det er den samme idé. Hvad det er gjort, er det er markeret alle foo elementer. Og så er det anvendt. Slags, ejendommen farve er lig med rødt. 

MIKE RIZZO: På samme måde kan vi også ændre det faktiske indhold af, hvad der er vises på HTML på siden, som er virkelig cool, fordi det betyder, at din websider kan nu være helt dynamisk og behøver ikke at være statisk at du udskriver ved hjælp af PHP i begyndelsen af den side, der indlæses. Så her, hvis vi ønskede at ændre faktiske HTML på siden, ville vi nu kalder HTML funktion, som så bare skær uanset hvad vi angiver i dette element, som vi har valgt. Så her vi vælger elementet med klasse foo og så siger det er HTML er det nu hej verden. 

TOMAS REIMERS: Og når man tænker over hvad er nyttige anvendelser af dette, denne CSS ene, den første ting, kan du begynde at tænke på er i form af selv drop down menuer. Du kunne begynde at gøre ting som, når en bruger svæver over den øverste del af en dråbe ned, du ønsker at gøre den nederste del synlig. Right? 

Så i CSS, har vi egenskaber at gøre noget synligt. Ting som display kolon none ville gøre det usynlige. Display blok vil gøre det synligt. Eller endda hvis du ønsker at gå enklere, du har ting som synlighed ligemænd synlig, og synlighed er lig skjult. 

Og du kan begynde at implementere ting ligesom drop down menuer til højre når du får gennem ideen om, hvordan kan du regne ud, når det åbnes, som vi får gennem meget kortvarigt. Men vi kan begynde at se anvendelser af denne. I en lignende følelse, hvis du skulle prøve og gennemføre, lad os sige, en chat motor og du ønsker at gøre en lille taleboble kommer op, når du har fik en ny besked, når du får den ny meddelelse, kan du lave en lille taleboble kommer op ved at ændre HTML på siden, ikke? Ved at tilføje, at ekstra taleboble med den ekstra tekst derinde. Ja? 

PUBLIKUM: Så du ville indkapsle dette i HTML-kode i lidt ligesom en [Uhørligt]? 

MIKE RIZZO: Right. Ja, vi vil komme til at i en lille smule. Ja, det ligner en lidt til PHP. Ikke ligefrem ens. 

En god skelnen at gøre er, hvad dette faktisk redigering når vi redigerer den side, fordi det ikke kommer til at blive redigere den faktiske fil, der bliver holdes på serveren, fordi verden bør ikke have tilladelse at redigere dine filer. Dette er blot at redigere, hvad der er på siden og hvad der bliver vist inden browseren. Så hvis du skulle genindlæse siden efter, sige, slette noget så vi se, vi kan gøre med remove opkaldet, at ting ville derefter igen. 

TOMAS REIMERS: Så en måde at tænke på dette er, hvis jeg er din computer og Mike er en slags, serveren. Hvad kommer til at ske, er jeg har tænkt mig at spørger Mike, hey, kan jeg få en kopi af denne webside? Og han vil give mig en kopi af den. 

Nej, det er ikke den originale ting. Det er bare en kopi. Og så ville det være ligesom, åh, der er JavaScript her. Er klart, at jeg redigere side at være sådan. Og jeg redigerer din kopi. 

Men det er ikke foretager den faktiske kopi. Og hvis jeg skulle spørge ham igen opdatere siden, - hey, kan jeg have en anden ren kopi - han kommer til at give mig anden ren kopi. Og så jeg har tænkt mig at gøre det samme ligesom, åh, det JS her, der siger at redigere denne. Og jeg har tænkt mig at holde gør det. 

MIKE RIZZO: Så en virkelig cool ting at du kan gøre med jQuery er faktisk tilføje forskellige typer animationer til din side. Jeg ved ikke, om du nogensinde har set, hvor du forsøger at et at udfylde en formular online, og du behøver ikke udfylde tingene korrekt. Så en lille ting glider ned foroven og siger, at du ikke har gjort dette korrekt. Prøv venligst igen. Og så kan det endda bare glide op. 

Slår ud jQuery har indbyggede funktioner at gøre alle det animation virkelig, virkelig nemt. Så der er først fade ud funktion, som du kan ringe på noget. Og det er en måde at ændre CSS af at element i en animeret måde. Så det tager, uanset element du kalder det fade ud på. Og så, langsomt ændrer det opacitet indtil det går helt gennemsigtig. 

TOMAS REIMERS: Den anden populære er glide ned, hvilket vil gøre noget vises ved at skubbe den ned. Så i tilfælde af rullemenuen, igen, da vi lærte at opdage når dette er blevet svævede, du bare kunne fortælle denne bund del glide ned nu. Og så ser det ud ved at glide ned. 

MIKE RIZZO: Og så, hvis du bare har en form for animation i tankerne, at jQuery giver ikke nødvendigvis. For eksempel, lad os sige jQuery yder dig et dias ned og slide op. Nå, lad os sige, du ønskede at glide noget fra venstre eller fra den rigtige slags ligesom CS50 hovedside gør, når du går til et nyt panel. Du ville så sandsynligvis nødt til at gennemføre det selv ved hjælp af animere funktion inden jQuery. 

Så på samme måde, du bare animere. Og så, i det det tager en ordbog af de forskellige værdier at du skulle passere. Så her, hvis vi ønskede at animere element foo således, at dens bredde enten udvider eller kontrakter til 80 pixels, afhængigt af, hvad det i øjeblikket er. Vi ville bare videregive, at så argumentet i det. 

Animere også har nogle andre argumenter at du kunne passere det, for eksempel, hastigheden af ​​animationen at du ønsker at give det. Og for at gøre det, ville jeg bare sige hurtigt Google jQuery animere. Og så opdrager denne side, kan du se det fik en masse forskellige egenskaber, som du kan passere det. 

Og jeg vil opfordre dig - når du kommer på noget, du ikke kende eller blot ønsker at lære mere om en bestemt metode, som du kan ringe om noget - bare google det. jQuery er yderst veldokumenteret. Og ofte gange der er en masse af eksempler på, at de leverer til dig. Hvis vi rulle ned - vej ned - at vi kan bruge, så godt. 

Igen, når en udvikler rent faktisk går gennem besværet med at skrive et bibliotek, de typisk vil have nogen til at bruge det. Så sammen med kommer til at være en dokumentation. Og at dokumentation kan normalt være findes på projektets side, der er hvorfor vi gav dig, at oprindelige websted i starten, som forbinder dig til den projekt sider, så du kan se denne dokumentation. 

Typisk projektet side i tilfælde af [uhørlige], det fortalte dig det navnene på de klasser. I tilfælde af JavaScript, giver dig navnet på funktionerne. Af den måde, hvis vi rulle op til toppen, en hurtig side bemærkning om funktioner er når du ser en funktion implementeret som dette med den hårde parentes i midten, der betyder at ejendommen er valgfrit. Bare en heads up. Jeg har set en masse spørgsmål om det. 

Så her kan vi se, at animere tager egenskaber som et nødvendigt argument. Og alt andet er valgfrit. Side note - du kan tænke på dette, sortere af, ligesom man-siderne. Man sider er dokumentation for C og for en masse andre ting, så godt. 

MIKE RIZZO: Så vi har lært at ændre anderledes CSS på siden, animere den, og fjerne tilføje HTML. Men en af ​​de virkelig mest magtfulde ting om JavaScript og især jQuery - hvad det kan du gøre, er at reagere på forskellige elementer til at ske. For eksempel, her har vi en event handler. Og det betyder bare, når dette hændelse sker, vi håndtere det på en bestemt måde. 

Så her, den generiske jQuery begivenhed handleren er prikken på. Og så, den første ting, du har opgivet er det tilfælde bør det lytte efter. Så her, det er klik, vi venter på. 

TOMAS REIMERS: Alternativt har du den svæver, som er en meget populær en. Så tilbage til min rullemenuen idé. Du ville have den øverste på hover. Og så kunne du ændre det. 

MIKE RIZZO: Right. Og så, når det sker, er det bare udfører denne funktion, at vi giver det som et argument, og at det advarer hej eller hej. 

TOMAS REIMERS: Så i tilfælde af JavaScript, er dette et sted vi nødt til at fjerne os fra C. Vi kan faktisk tage funktioner som argumenter. Og der er en masse virkelig komplekse måder at gøre dette. Vi kommer til at fremme den ene vej, der er, kan du definere fungere lige der. 

Så når du beder om en funktion som en parameter, er du dybest set blot kommer til at definere funktionen på stedet. Og den måde du definerer en funktion i JavaScript er dig bogstaveligt sige funktion. Derefter sædvanligvis navnet af funktionen. Men vi vil aldrig referere denne funktion igen. Så vi lader det navnløs. 

Derefter parenteser, så krøllet seler, og derefter koden i det. Så vi forstår dette dåse være lidt forvirrende. Så vi giver dig den almindelige form for hvad en hændelseshandler ligner nedenfor, som er på begivenheder. Og så, din kode inde det. 

MIKE RIZZO: Er der nogen spørgsmål om denne? Dette kan være lidt forvirrende første gang, du ser det. 

TOMAS REIMERS: Du rent faktisk ønsker at åbne en fil og vise dem nogle jQuery lige nu? 

MIKE RIZZO: Ja, lad os gøre det. OK. 

TOMAS REIMERS: Så nu er vi i apparatet. Og hvad vi har gjort er, at vi har taget frihed til at skabe både en index.html fil, som linker til en JavaScript-fil. Og kan vi åbne op for - ja. Tja, det gør to ting. 

Den første er den linker til den JavaScript-fil. Og vi vil se, at op her. Vi ser, at i spidsen for HTML-dokument, især. Så du vil se der, vi, dybest set, siger SRC, som står for kilden. Og det er det URL. 

Så her kan man sige, vi har inkluderet jQuery. Og vi har også inkluderet scripts. Den anden måde at medtage JavaScript er som du kan medtage en inline-script tag, som vi har på bunden, hvor det siger script type er tekst JavaScript. 

Så vi siger, lyt, er vi ved at omfatte et script. Og typen af ​​det script er JavaScript, som er en type af tekst. Meget enkel. 

MIKE RIZZO: Så det, slags, får at dit spørgsmål om, hvordan vi inddrager JavaScript i vores filer, fordi når vi havde PHP, vi gør noget som dette. Og så har vores PHP funktioner - lad os sige lagre gøre noget med det - går derind. Men nu har vi scripttags at vi giver det, som faktisk en del af HTML sig selv, fordi det ikke er faking at være en HTML-fil som det er i PHP, fordi hvis du rent faktisk går i og se på kilden til siden, du vil se disse scripttags derinde med JavaScript forbundet med dem i det. 

Så, hvis vi ønskede at skrive nogle JavaScript - lad os bare sige, at vi ønskede at ændre krop fordi lige nu har jeg ikke andre tags, som jeg virkelig redigere udover kroppen. Lad os bare sige, at jeg ønskede at ændre CSS af det. Så vi vil gå videre og forandring farven på den til rød. 

Så jeg gemme filen. Lad os gå tilbage til vores webside, opdateringshastighed, og det gør det automatisk fordi det ikke synes ligesom det ventede på alle, fordi vi ikke lyttede til et arrangement eller noget lignende. 

TOMAS REIMERS: Så hvis vi går tilbage til det fil i særdeleshed - HTML fil - hvad du vil at se, er, at vi har - huske, at dette er indlæst, slags, kronologisk. Så vi har først hovedet. indlæser disse to filer. Så går vi til kroppen. Og vi ser hej verden. Så vi render hej verden. 

Og så det sidste, vi har er vi har script-tag. Så det kører script-tag, fordi det er ikke fortæller det til at vente på noget. Og det er det mest basale måde at køre JavaScript. 

Med det sagt, kan du sætte scriptet tag op i headeren bare for at vise dette punkt? Og køre den. Vi kommer til at bemærke, at det ikke ændre farven. Og dette er et af de problemer, JavaScript er, at tingene er indlæst i kronologisk rækkefølge. 

Så på det tidspunkt, at koden kørte, valgte vi - gå tilbage - kroppen tag. Kroppen tag eksisterer ikke endnu, fordi JavaScript er på linje med HTML. Så browser er ligesom at vælge krop. Der er ikke sådan noget endnu. Så vi kan ignorere det. Og vi holde ud. 

Og så skal vi definere en krop tag. Men som aldrig bliver opdateret. Så når du gennemføre script tags, skal du sørge for at placere efter kroppen tag. Næste dias. 

MIKE RIZZO: OK. Så vi ændrede noget. Men det ligner ikke det reagerede på os på alle, fordi det lige slags gjorde det, så snart det er lagt på siden. Så nu, i stedet for at gøre dette, hvorfor ikke tilføjer vi en event handler. 

Så lad os gøre noget til kroppen igen. Og lad os sige, at vi gør det på - klik. Vi vil tilføje en funktion. 

TOMAS REIMERS: Lad os ændre det er farve til rød igen. Hvorfor ikke? 

MIKE RIZZO: Ja, lad os ændre dens 'farve til rød igen. Ok. Så lad os genindlæse siden. OK, vi ser - som forventet, betyder det ikke røde endnu. Men så kan vi gå videre og klik på det. 

TOMAS REIMERS: Og det bliver røde. 

MIKE RIZZO: Og det gør røde som forventet. 

TOMAS REIMERS: Og vi kan se, hvordan kan vi begynde at bygge meget grundlæggende interaktion. Andre ting, vi måske ønsker at gøre, er, hvis vi ikke ønsker at gøre kroppen farven rød, lad os gøre HTML baggrundsfarven rød. Bare så det er den samme CSS. 

Og når vi ændrer det, kan vi se dette meget dramatisk effekten af ​​at ændre hele siden. Så igen, hvis du gennemføre tingene, du kan have én komponent som er beregnet til at blive klikket på. Lad os sige en Exit-knappen og en hel anden komponent, som er beregnet til at reagere. Så du vil fjerne et vindue når det sker. 

MIKE RIZZO: OK. Blot som eksempel - du ikke får at se dette tidligere - Jeg vil bare vise dig, hvad det ser gerne, når vi skjuler noget. Så jeg vil gå videre og glider op. 

TOMAS REIMERS: Vil du wrap, at i en afsnit type, før vi gør det? 

MIKE RIZZO: OK. Ja, hvorfor gør vi ikke det bare så vi kan vælge det lidt mere. 

TOMAS Reimers: Og lad os give det en klasse. 

MIKE RIZZO: Ja. OK, så lad os se. Stedet for at vælge den faktiske krop nu vil jeg bare vælge alt med klasse hej, som her vi bare have én ting. Så vi skal ikke have til bekymre sig om det. 

Så jeg vil opdatere den. Jeg vil gå videre og klik på det. Og det, en slags, gjorde en underlig dias up ting, der ikke ser så attraktiv. Generelt ser de ret nice. Jeg gætte, dette - for nogle grund - ikke gjorde. Jeg vil bare gøre en fade ud, så du kan se på det også. Meget pænere. 

Og så, hvis jeg åbner op for JavaScript trøste igen, og vi ønsker at se, hvad det ser ud, når vi fade det i. Nu vil jeg bare kalde fade ind på det. Og det svinder igen 

Tilsvarende kunne vi faktisk også videregive et argument at fade ind eller fade ud, hvilket er, slags, hastigheden af ​​det. Så lad os gå videre og sige, at vi ønsker, det at gå langsomt falme i. Så jeg tror det stadig virkede temmelig hurtig. Men det var langsommere end før. 

TOMAS REIMERS: Og hvis du ønsker at finde ud af mere om disse ting, igen, bare gå til jQuery dokumentation, som vi har givet dig, og læse gennem disse. De dokumenterer deres funktioner utroligt godt. 

MIKE RIZZO: OK. Så jeg gætte lad os gå tilbage til dette. Og vi kan snakke om vores sidste side. Nå, kan vi slutte af med Bootstrap. Og så vil vi åbne det op for nogle spørgsmål. Og hvis du fyre har nogen ideer, du gerne vil prøve at kaste op og se hvis vi kan gennemføre dem med JavaScript hurtigt. 

Så virkelig hurtigt om Bootstrap, som automatisk blev medtaget i dit sidste problem indstillet i CSS mappen og faktisk er knyttet til i din header.php. Så du kunne have tilføjet klasser, defineres inden Bootstrap til det. Og det ville have automatisk stylet disse ting i overensstemmelse hermed. 

TOMAS REIMERS: So Bootstrap er en meget magiske ting udviklet af mennesker på Twitter. Og hvad det skulle gøre, var - før hjemmesider var virkelig hårdt på at gøre ser nice, især når vi havde en masse fælles komponenter. Så en masse knapper på web så det samme. 

En masse af tekstfelter kan foretages se bedre ud end standard tekst felt, du sikkert kender fra virkelig gamle hjemmesider eller virkelig dårligt lavet websites, som bare ligner bogstavelig tekstbokse uden nogen form for tekst skygge eller nogen form for god disposition. Så hvad Bootstrap gjorde, var det sagt, godt, Vi har en masse fælles stilarter. Hvorfor gør vi ikke lave en fælles sæt af CSS og et fælles sæt af JavaScript som godt, som kan style det som er, og som kan give folk ting som drop down menuer, kan der giver folk ting som modals. 

Modal er hvad popper over siden når det er strengt taget noget, som hæmmer yderligere interaktion, indtil du interagere med det. Noget som dette er, er du sikker du vil slette denne ting? Du kan ikke rigtig gøre noget andet indtil du siger ja eller nej. 

Det tog alt dette, og det pakket det sammen og sagde, here we go. Folk kan nu bruge denne. Og du kan finde det over på getbootstrap.com. Det blev automatisk omfattet dit sidste problem indstillet. Og du er mere end velkommen til at bruge det på din endelige projekt. Og hvis du ønsker at følge denne link for at få Bootstrap. 

Du kan se her, er Bootstrap CSS site. Du vil se Bootstrap. Og hvis du ruller ned, vil du se hvordan du henter det, hvordan man installere det, et cetera. 

MIKE RIZZO: Og du kan også, interessant nok, tilpasse det til være, hvad slags temaer som du ønsker. Jeg ved, det er noget, jeg gjorde for min afgangsprojekt, da jeg tog klassen blev tilpasse det. En anden version af Bootstrap at havde en anden farve ordningen og forskellige former for nogle forskellige ting. Så jeg opfordre dig til at lege med det. Det er lidt sjovt at gøre. 

TOMAS REIMERS: Ser på tværs toppen igen, det er meget lig den skrifttype Awesome site. En masse af dokumentation vil begynde at synes ens, når du har set nok af det. Så her har vi CSS del af denne. Og du vil se, hvordan det kan style ting. Så hvis du klikker på borde, for eksempel, kan du straks få en tabel temmelig ved blot at tilføje klassen tabel til det. 

Samme ting for knapper. Hvis du blot tilføje klassen BTN og BTN standard eller BTN primær, kan du få en af ​​disse knapper med disse pre-made stilarter. Og så, hvis du leder efter noget mere end blot at restyling hvad w allerede har, over på fanen JavaScript tværs af toppen, vi har en masse komponenter. 

Så her har vi overgange, modals, dropdowns, faneblade og værktøjstip. En tooltip er, hvad der dukker op under din mus, når du holder på noget. Popovers, alarmer, knapper, sammenklappelig harmonikaer er hvad de er normalt kaldes. Karruseller, som flip gennem billeder. 

Så dem, er de komponenter, af Bootstrap. Jeg vil opfordre dig til at meget gå se på dem. Der er en JavaScript-komponent og en CSS komponent. Du er velkommen til at bruge dem som du vil. Vi kommer ikke til at gå for meget ind i dem fordi vi føler dokumentationen er virkelig godt klaret. Og ja. Har du har spørgsmål om det? 

MIKE RIZZO: Så som en virkelig hurtig side, design af denne webside, vi hurtigt sat sammen for denne præsentation er faktisk gøres ved hjælp af Bootstrap. Som du kan se, når vi klikker på disse forskellige faner, er vi faktisk aldrig forlader denne aktuelle index.html side. Så hvad vi har, er forskellige divs inden for denne index.html. Og så, når vi klikker på et andet fane, er det blot at ændre som ens fremvisning. 

Så det placerer dem i overensstemmelse hermed, ændrer HTML på siden, så den aktuelle fane er markeret som aktiv, så det vises forskelligt og udseende virkelig rart. 

TOMAS REIMERS: Så blev alle gjort uden at vi skriver næsten enhver CSS. Vi ser også en header på tværs af toppen, hvor farverne er af os. Men den faktiske sætte den på toppen af ​​siden og gøre det scroll var Bootstrap. Og så selv for et andet bibliotek - dette er ikke en, vi talte om, men en du kan Google, hvis du ønsker. Dette kaldes prettify.js. Og det vil syntaksfremhævningen din kode for dig at bruge både CSS og JavaScript. 

Det sidste, vi ønsker at tale om før vi slipper dig ud i verden til at se på bibliotekerne for at finde ud af hvordan man bruger dem og, forhåbentlig, læse dokumentationen og finde, hvad du behov er at finde biblioteker. Så det første er vi bare kommer til at skubbe Google. Go Google. 

Det er bogstaveligt talt hvad vi gør, når vi nødt til at gøre noget er vi Google. Er der en JavaScript-bibliotek, tillader mig at manipulere tiden i en nyttig måde? Så hvis jeg ved, at nogle bruger skabe en konto her, og det er aktuel tid, hvordan kan jeg beregne Forskellen med det uden at skulle beregne det selv? Så det er faktisk en fælles ting, JavaScript tid bibliotek. Og her er vi Moment.js-- den mest populære. 

Hvis vi har brug for et bibliotek til at manipulere noget lignende farve for at kunne generere en flok tilfældige farver - eventuelt at generere en stil eller noget - vi kunne google noget lignende JavaScript farve biblioteket. Og jeg er sikker på, vi ville poppe op med et tusind og en af ​​dem. Du er velkommen til at læse dem igennem. 

Så de fleste ting - når du finder dem - vil være vært på et af de websteder, som vært kode. De er er et par populære dem. Den mest populære, ved langt, er github.com. Og hvis du går til GitHub det er faktisk hvor normaliser var vært. Så hvis du ønsker at gå tilbage til. Vis dem det. 

MIKE RIZZO: Og det er faktisk, hvor dette er hostet også, hvis du bemærket. 

TOMAS REIMERS: Ja. Så hvis du går over til normalisere og gå til GitHub. Var er det? 

MIKE RIZZO: Den lille kat ting er GitHub symbol. 

TOMAS REIMERS: Oh. Så GitHub bruger en metode, der kaldes Git at gemme koden. Er du ikke ved, hvad der er eller det skræmmer dig, det er fint. Du behøver ikke at vide, hvad Git er fordi GitHub har en download-knap nederst til højre. 

Den anden nyttige ting at vide om GitHub er de fleste produkter vil have en læse mig. Og hvis de ikke har en hjemmeside, den læse mig vil tale om, hvordan du installere det, hvordan du bruger det, hvad det gør, et cetera, et cetera, et cetera. Hvad vi har været stort set gå dig igennem. 

MIKE RIZZO: Internettets holde op. 

TOMAS REIMERS: Det er fint. De sidste to ting vi ønskede at tale om - vi har talt om Git - er fejlfinding. Og dette er ikke så relevant for slutproduktet, som det er når du forlader 50 år. Og når du løber ind i produkter gennemførelse af biblioteker eller gennemførelse af dit eget projekt, du vil har spørgsmål, eller du er kommer til at se for spørgsmål. 

Igen, Google det. Det er bogstaveligt talt hvad vi gør. Dette kommer til at lyde fjollet. Men bogstaveligt, vi Google det. Og igen, en af ​​de første ting du normalt løbe ind i, er stackoverflow.com, som er et vidunderligt spørgsmål og svar syne. 

Det er vidunderligt, både fordi du kan bogføre spørgsmål og se efter svar, men også fordi det allerede har en masse præ-befolket indhold der. Så som regel, når du Google en programmering spørgsmål inden for den første par hits du måske allerede har kørt ind i det i løbet af dit problem sæt. 

Og så den sidste rigtig kort ting er jsFiddle, der er - i dag vi har gjort et stort arbejde med JavaScript HTML CSS. JsFiddle er en web-app, som dybest set giver dig mulighed for at tage din HTML, DIN JavaScript nederst til venstre, og din CSS øverst til højre. Og så kan det skabe en hurtig render af det og se, hvordan det interagerer. Det er meget nyttigt, når folk forsøger til at gøre en proof of concept som dette er, hvordan du ville gøre en drop down menu. Måske en hurtig afdække eller hvad. 

MIKE RIZZO: Så lad os gå videre og klik på denne. En hurtig note - henviser til, at før vi var gør på klik. Slår ud JCorey Korea har også en indbygget i klik event handleren, at det bruger bare fordi det tal, du er lyst til at gøre en masse ting når du ønsker at klikke på noget. 

Tilsvarende er det også har en svæve. Men for at få det fulde omfang af dem, se på jQuery dokumentation og gøre det. Jeg gjorde noget dumt her. 

TOMAS REIMERS: Så jeg har en virkelig hurtig program lige her, som siger knap klik. Så har vi en for-løkke. For i er mindre end 404. Det er bare at dukke op disse advarselsmeddelelser. 

MIKE RIZZO: Og hvad var det kode 404 stod for i HTML? Er der nogen der kan huske? Ikke fundet, til højre. Chrome også tilføjet denne nydelige ting, hvor du kan - 

TOMAS REIMERS: Fordi folk som Mike begyndte at gøre dette en masse og irriterende brugere, som tillader dig at se info. 

MIKE RIZZO: Ja. 

TOMAS REIMERS: Har vi nogen spørgsmål om dette, om JavaScript biblioteker, finde biblioteker, eller hvad webudvikling udseende ligesom i den virkelige verden? Vi kører op mod tiden. Så jeg er ikke sikker på, vi vil at have tid til at gennemføre medmindre det er virkelig hurtig. Er vi gode? 

MIKE RIZZO: Noget du fyre vil gerne at se virkelig hurtig i, ligesom, to minutter eller mindre? 

TOMAS REIMERS: Anything vi kan afklare? Hvordan man skriver i - 

PUBLIKUM: [uhørligt]? 

MIKE RIZZO: Ja, så that - 

TOMAS REIMERS: Du kan bare slå Ctrl-U på hjemmesiden. 

MIKE RIZZO: Åh, jeg vidste ikke, at. 

TOMAS REIMERS: Jeg tror, ​​ja. Ctrl-U. Ja. 

MIKE RIZZO: Åh, så det er kode til hjemmesiden. Men hvis du rent faktisk ønsker at downloade vores filer og alt, det er hostet på github.com 

TOMAS REIMERS: skråstreg mit navn - Tomas Reimers - skråstreg CS50 bindestreg seminaret. 

MIKE RIZZO: Og du kan finde alt der. 

TOMAS REIMERS: Dette er, hvad GitHub ser ud, ved den måde. Så igen, når du ser en open source projekt typisk vil de være en read mig der, som du kan læse. Og hvis du går tilbage, vil du bemærke, at du har download zip, som vil giver dig mulighed for at downloade kilden kode til at omfatte produkt i din egen ting. 

MIKE RIZZO: Ja, og hvis vi blot klikke på index.html virkelig hurtigt - 

TOMAS REIMERS: Du kan se her er den kildekoden til vores hjemmeside. 

MIKE RIZZO: Også, jeg glemte at skubbe til højre før med det store bord det inkluderet, men der er også en tabel af chmods som vi indgår bare for din klarhed. Men hvis vi rulle hele vejen ned til bund, vi faktisk ikke gøre meget meget med JavaScript ting på alle med dette. Det er udelukkende fra alt andet, som vi havde. 

Så tak gutter for at komme og lytte. Vi håber, at dette var virkelig nyttige. Hvis du har nogen JavaScript relateret spørgsmål eller blot ønsker at tale om hvad der ellers ligesom hvad andre seje ting du kan gøre med JavaScript, ville vi elsker til at tale med dig. 

TOMAS REIMERS: Hvis du har et spørgsmål om dit projekt eller om det kan være relevant, vil vi sandsynligvis holde sig omkring lidt efter dette. Men bortset fra det, har en god weekend. 

MIKE RIZZO: Ja, nyde. Se jer. 

TOMAS REIMERS: See ya.