>> TOMAS Reimers: Hei, alle sammen.
Jeg heter Tomas Reimers.
>> MIKE RIZZO: Og jeg er Mike Rizzo.
>> TOMAS Reimers: Vi er to av CS50s TS.
Og i dag er vi ledende seminaret på Javascript og CSS for web apps.
Hvis du ønsker å følge med, det koblingen er rett der borte.
Og har du lyst til å sette den opp kort på datamaskinen?
>> Det er linken.
Det er et lite område, som har koblinger til alle de ressursene vi skal være
peke deg i dag og har også en rekke nyttig informasjon som er skrevet av oss til
Les mer i dybden når du går tilbake, og du prøver å huske hva
akkurat gjorde vi si, hva var du snakker om, et cetera.
>> MIKE RIZZO: Greit.
Så la oss begynne.
>> TOMAS Reimers: Så du ønsker å starte?
OK.
>> MIKE RIZZO: Yeah.
Så vi først ønsket å starte med en bred oversikt om internett og
filtyper ved utformingen av nettsteder.
Mens denne presentasjonen ønsker vi å komme inn i Java mye mye
senere, ønsket vi å starte med bare, på en måte, som et fugleperspektiv
av hva en nettside er, og hvordan å tenke på å designe en
Nettside for starten.
>> Så dere, på dette punktet - med det å være fredag ​​kveld - bør ha
sendt inn CS50 finans oppgavesett.
Forhåpentligvis, som var en god smak av hva web-programmering kan være.
Men her vi ønsker å, på en måte, gi dere en annen smak, samt.
>> TOMAS Reimers: Så bare for å oppsummere hva skjer, når du skriver inn nettadressen til
nettleseren, får denne nettadressen så opp i datamaskinen.
Og datamaskinen er koblet til en annen datamaskin,
som er vert for det nettstedet.
OK, så når du går til google.com, er du koblet til en av Googles
datamaskiner, som har den filer for google.com.
>> Det spør da etter en bestemt fil.
Så hvis du går til -
Jeg vet ikke -
example.com / index.html eller / test.html, du kommer til å be om
den bestemte filen.
Og webserver kommer å returnere den til deg.
>> Deretter, når du går gjennom denne filen -
når du er datamaskinen blir at fil - det kommer til å starte
å bygge en web-side.
Så nå har det HTML-filen, som er liksom som
struktur av websiden.
HTML-filen kan også referere CSS-filer, som definerer
stil av websiden.
>> Javascript-filer, som definerer interaksjon med nettsiden.
Bildefiler, som er bare bilder.
Og muligens lenke til andre HTML-filer, som du kan deretter gå til.
>> MIKE RIZZO: OK, flott.
Så dere har alt, kanskje, møysommelig satt opp din lokale verten
på den virtuelle maskinen.
Og det bare, type, er den lokale domene maskinen din er vert for bare
for deg på din egen IP-adresse.
>> Så i løpet av det, så kan du legge til det dine egne websider.
Jeg mener, i CS50 finans, bør du ha lagt noen HTML-sider, som er,
liksom, innpakket i PHP wrapper.
Men til slutt, hva dine PHP-sider ble gi ut var HTML.
>> Men tenker tilbake til begynnelsen av PSett, måtte vi sette
tillatelsene for alt, ikke sant?
Så dette er bare utgangspunktet lar oss få vite som kan lese, skrive, og muligens
utføre hver av filene.
Så vi kommer til å gjøre en rask - hm?
>> TOMAS Reimers: Så vi skal å gjøre en rask demo.
Så bare for å minne deg, når du koble til Googles datamaskin -
hvem -
og be om en fil, datamaskinen først behov for å sørge for at du er autorisert
å faktisk vise at filen eller lese at filen fordi du ikke kan bare spør
for hvilken som helst fil på datamaskinen, ikke sant?
Det ville være en sikkerhetsfare.
>> Så filer på de systemene vi bruker, som dette CS50 apparatet, har tre
generelt folk som kan ha tillatelser til noe.
Den første er den faktiske eier av nevnte fil.
Den andre er den gruppen som fila tilhører.
Vi kommer ikke til å fokusere for mye på det.
Og det siste er, liksom, som verden eller som alle andre som er
ikke spesielt for denne filen og ikke har noen eierrettigheter enn det.
>> Så hvis vi har eier, gruppe, og deretter verden.
Og så, for hver av disse gruppene, du kan ha en av tre tillatelser,
OK, eller flere av disse.
Du kan ha leserettigheter.
Du kan ha rett tillatelser.
Og du kan ha kjøretillatelser.
>> Så når det gjelder selve filtyper, kan du lese tillatelse er som faktisk leser
innholdet i filen.
En riktig tillatelse skriver til nevnte fil.
En utføre tillatelse kjører fil som du gjør når du kjører en av
dine CS50 prosjekter.
>> Så når vi tenker om filer som når vi trenger å lese en HTML
file, som må være i verden lesbar, ikke sant?
Antagelig også eieren ønsker å være i stand til å endre den filen.
Slik at eieren kommer til å trenge lese og skrive rettigheter.
De trenger egentlig ikke utføre.
>> Gruppe, vi kommer til å behandle samme som i verden for nå.
Så de trenger leserettigheter.
Men de trenger ikke skrive eller kjøretillatelser.
Og nå, hvis vi tenker tilbake til tidligere PSETs, hva vi vet er disse slag
av å se ut som binære, ikke sant?
1 står for ja.
0 for nei.
Og vi kan faktisk sette dette til binær.
>> Så 110 i binær ville være seks.
100 ville være fire.
Samme med verden.
Så nummer du vil få for tillatelser for dette ville være 644.
>> MIKE RIZZO: Og hvis du tenker tilbake til når du CHMODet noe, tror jeg
de ga i oppgavesettet på eksempel på hvor du kan gjøre
noe som chmod 644 og deretter filnavn.
Den 644 da, kan du nå se direkte hvor det kommer fra.
Så forhåpentligvis som gjør at litt mer tydelig.
>> Og så for du fyren klarhet -
oh yeah, her dette er igjen.
Så 600 så ville bare være et eksempel vi ga opp her hvor eieren har
lese og høyre tillatelser mens gruppen og verden ikke har noen rettigheter
å få tilgang til filen.
>> TOMAS Reimers: Og så har vi en rask listen over vanlige tillatelser.
Så kataloger, vil du å faktisk chmod 711.
Hurtig til side - for en katalog å ha kjørbar tillatelse betyr å være i stand
å åpne katalogen.
Bilder, CSS, Javascript, HTML behov 644 fordi, i utgangspunktet, verden
behov leserettigheter.
>> Og PHP, som dere har sett vi vil ikke snakke om det selv
strengt er typisk CHMODet med tillatelse 600 fordi det kjøres med
tillatelsene for eieren.
Minst på apparatet.
>> MIKE RIZZO: Så hvis du ikke spesifikt spesifisere hva slags fil
du ønsker i faktisk å sette opp denne presentasjonen -
Vi hadde et problem med dette fordi alt var ikke CHMODet riktig -
du kommer til å få, type, en forbudt feil at nettstedet
den trenger ikke å ha tillatelse å få tilgang uansett fil
du vil at den skal få tilgang.
Og selvfølgelig, kan det fikses - som i oppgavesettet - ved å endre
tillatelser hensiktsmessig.
>> TOMAS Reimers: Og den siste kommentaren til raskt lokal utvikling er - vi
tok dette opp, men vi ville bare å ta det opp igjen -
hvis du ber om en server - så lokale verten, for eksempel, com eller hva. -
og du ikke angir en bestemt fil, filen som datamaskinen skal
å be om heter index.html.
Eller hvis det ikke finnes, index.php.
>> Cool.
Så det er bare en oppsummering av alt, forhåpentligvis, som vi har dekket i
delen, og foredrag, og så langt i CS50.
Og nå skal vi begynne å snakke om spesielt biblioteker.
Javascript og CSS-biblioteker for web apps.
>> Så en rask grunnen til at vi har bibliotekene er programmering -
det er en masse problemer i programmering, som holder spratt opp
igjen og igjen, og nytt.
Du kan legge merke til at en rekke nettsteder trenger muligheten til å ha drop down
menyer, for eksempel, eller trenger evnen å ha en veldig standard knapp
stil, som kanskje ikke er den enkleste ting.
Nå som du begynner å komme inn i HTML, du innse at knappene kan faktisk
ser virkelig stygt hvis du ikke gjør noe.
>> Så mange mennesker har skrevet kalt bibliotekene.
Og i denne sammenheng, er de også kalt rammer.
Vi kommer til å bruke den to om hverandre.
Og hva de er er at de er i utgangspunktet forhåndslagde deler av koden -
enten CSS eller Java -
som tar bort mye av den teamet har du i koding.
>> Så de forhåndsdefinere en haug med klasser eller pre-definere en haug med funksjoner for
Java sak, som du kan ringe senere.
Og så kan du, liksom, få tilgang til denne koden uten
å måtte gjøre noe.
Et eksempel på biblioteket var CS50.H. Det var et bibliotek vi ga deg tilbake
i uke én, som tillater deg å gjøre ting som det GetInt og GetString
uten å måtte skrive noen kode selv.
>> MIKE RIZZO: Greit.
Så her, akkurat som vi hadde til å omfatte i vår c-filer på forskjellige
bibliotekene, vi også bør ta med i vår HTML-filer forskjellige bibliotekene.
For eksempel, hvis vi ønsket å inkludere en spesifikk Javascript-bibliotek her,
kanskje, en som vi har skrevet oss selv som det er lokalt vertskap
kalt script.js, vi bare Denne notasjonen.
>> Så vi har script type er lik Java kilde equals
JavaScript.js.
Og hvis du tenker tilbake til din CS50 finans oppgavesettet, hvis du har sett på
header.php i maler-mappen, du burde ha sett
noen av disse er inkludert.
Så dette første - skriptene -
er inkludert et Javascript-bibliotek.
Inkludert en CSS-biblioteket er litt annerledes.
>> Her, i stedet for skriptet Tag du trenger link tag.
Og så, teksten CSS typen er litt annerledes.
Du trenger ikke alltid å inkludere rel stilark.
Men jeg tror det er, generelt, god praksis.
>> Og så til slutt, HREF, som du sannsynligvis så i dine ATAGs for å knytte
i forskjellige linker bare spesifiserer koblingen av hvor du skal finne det.
For eksempel, hvis vi ønsket å knytte en annet bibliotek - la oss bare si -
som levde på styles.css.
Og vi ønsket å knytte det i det er ligger på Internett, vil vi kopiere det.
Og deretter lime den inn i hva vi har rett her i stedet.
>> TOMAS Reimers: OK, forhåpentligvis du Gutta er allerede kjent
med hvordan vi kobler CSS.
Du måtte gjøre det på din siste brune settet.
Java, noen av dere kanskje har litt erfaring med.
Noen av dere kanskje ikke.
>> Så for nå, vet at en Javascript-fil er veldig mye som en CSS-fil i
den forstand at du kan koble til det eller at du kan ta den internt.
Og det tillater deg å skript ting.
Og vi kommer til å gå gjennom en litt av Java senere.
>> Så å bruke et bibliotek -
når du har tatt det, er det som enkelt som bokstavelig talt ringe
funksjoner eller legge til klasse navn til den.
Det siste vi ønsker å snakke om når det gjelder bibliotek -
og dette er mer av en teknisk notat -
er åpen kildekodelisens.
Så når du finner disse faktiske bibliotekene, du kan tenke på
spørsmål som er det OK at jeg bare bruker andres kode, spesielt
fordi det er noe vi veldig mye fortalte deg å ikke gjøre i dette kurset.
>> Så i tilfelle av åpen kildekode lisensiering, mange utviklere -
når de har skrevet et bibliotek, som de tror kan være
nyttig for andre mennesker -
vil publisere den på nettet og gi det en lisens.
Og en lisens i utgangspunktet sier jeg herved gi tillatelse til andre
folk til å bruke denne stykke programvare med følgende slags
bestemmelser.
>> Vi har tatt med en link til et godt nettsted til hjelpe deg å forstå lisenser i
tilfelle du får dem.
Vanlige bestemmelser er ting som du er velkommen til å bruke biblioteket mitt så
lenge du gir meg kreditt.
Du er velkommen til å bruke biblioteket mitt så lenge som når det bryter
du ikke klandre meg.
Du er velkommen til å bruke biblioteket mitt så lenge som du ikke bruker den til å tjene penger
for deg selv.
Dette er typer av felles bestemmelser.
>> For denne CS50 endelige prosjektet, de bør ikke være super relevant fordi
de prosjektene som dere bruker er trolig heller, liksom, kjent.
Men når du faktisk gå ut i verden og begynne å bruke bibliotekene, som
kan eller ikke kan være så godt gjennomført som noen av de mer populære de vi er
kommer til å gå gjennom.
Det er godt å være i stand til å forstå disse lisensene og til
forstå hva de betyr.
Og kommer tilbake.
>> MIKE RIZZO: OK.
Så nå flytter til eksempler av faktiske CSS.
På dette punktet så langt, kan du ikke har støtt på dette.
Men du har kanskje møtt det i hverdagen der noe
som ser én vei på én nettleser kanskje ikke ser det samme
måte i en annen nettleser.
>> Dette kalles nettleser nettleser kompatibilitet.
Og stadig er det blitt mer og mer av et problem, særlig ettersom
lesere ta flere og flere friheter å gjennomføre ting som de ønsker.
Så for å overvinne det, det faktisk er et stort bibliotek som heter Normalize.CSS.
>> TOMAS Reimers: Vi følger linken.
På dette punktet, er det nyttig hvis du har den bærbare datamaskinen i det
ser på nettstedet.
Og vi gir dette til deg nå rett og slett fordi den CS50 finalen
Prosjektet er faktisk kommer til be deg om å implementere det
på samme måte og gjennom nettlesere.
>> Så bare for å holde på baksiden av din hode, er dette et flott bibliotek
fordi det vil, liksom, standardisere ting.
I Firefox, kan noe vise som en pixel til venstre.
Og så Chrome kan bestemme at faktisk hva du mente var 10 piksler
til venstre.
Og du ønsker å standardisere dette.
Normal faktisk vil gjøre en virkelig god jobb med å sørge for at nettstedet ditt
ser det samme på tvers av nettlesere.
>> MIKE RIZZO: Så hvis vi ønsket å bare Klikk på lenken veldig raskt, og showet
deg hva som ser ut som, du kan laste den ned ved å bruke
giganten Last ned-knappen.
Eller jeg oppfordrer deg til å lese mer om det ved å klikke på denne linken i nedre
høyre hjørne.
>> TOMAS Reimers: Og hvis du faktisk Klikk Les mer rett der -
klikk kilden på GitHub -
vil du faktisk se åpen kildekode lisens på LICENSE.md rett der.
Og du vil se her er den svært populær MIT lisens.
Igjen, hvis du leser gjennom teksten, vil du være i stand til å finne det på nettstedet
vi referert før og kunne forstå det uten å måtte lese
gjennom den juridiske sjargong.
>> MIKE RIZZO: OK, flott.
Så det er Normaliser.
Vi ønsket å gi deg som virkelig raskt.
Oh, har du et spørsmål?
>> PUBLIKUM: Så når du laster den ned, du bare følg den koden som de har
under Last ned-knappen?
>> TOMAS Reimers: Ja, så når du laster ned -
>> MIKE RIZZO: Å, det er et stort poeng.
Så spørsmålet var hvordan gjøre vi faktisk laste den ned?
Så hvis vi klikker på lenken, ser vi at det faktisk dukker opp
på kildekoden.
Så for å gjøre dette, hva vi kunne gjør er å klikke rett på Lagre som.
Lagre som og som bør få opp en fil.
Og så kan vi velge å lagre det som normalize.CSS.
Og så du må koble den i -
>> TOMAS Reimers: Den samme måte som du kobling i en annen fil.
Og når du kobler den inn, hva er flott om Normal er det faktisk vil
ta vare på all den harde arbeide av seg selv.
Noe som betyr at du ikke trenger å legge til noen klasser.
>> Du trenger ikke å gjøre noe rart.
Det vil normalisere uten deg gjør noe videre.
Ja, du må ta den med.
Google Chrome svarer ikke.
>> Bare en rask til side -
Jeg la merke til vi hoppet inn i dette.
Resten av denne presentasjonen kommer til å bli en rask oversikt.
En undersøkelse av bibliotekene.
>> Innerst inne, hva de er.
Hva de gjør.
Hvordan de er nyttige.
Hvordan du kan gjennomføre dem.
Hvis du ønsker å begynne å se på dem, følgende sammen, og lese gjennom
dem, jeg vil sterkt oppfordre det.
>> Alternativt, er du velkommen også til begynne å laste dem ned og med
dem i et syn bare for å se hva de ser ut eller hva de skal gjøre hvis du har
den bærbare datamaskinen foran deg.
Hvis ikke, er du velkommen til å holde lytte til oss snakke.
Vi kommer til å fortsette å snakke.
Og vi har tid på slutten, forhåpentligvis Vi vil faktisk komme inn å vise deg
hva noen av disse bibliotekene se ut.
>> MIKE RIZZO: Cool.
Ok, så nå la oss snakke om Font Awesome.
>> TOMAS Reimers: så Font Awesome er en veldig ryddig nettsted, spesielt for de
av oss som er mindre kunstnerisk talentfull.
Ignorerer navnet Font Awesome, det gir du en haug med ikoner, som er
veldig nyttig.
Så mange ganger du vil implementere en ikonet vil du kanskje liker en fin x så
at du kan lukke noe.
>> Eller ønsker du kanskje en slags Rediger-knappen med en blyanttegning som
alle andre har.
Og det er da du lærer at tegne disse ikonene kan være
veldig kjedelig og vanskelig.
Font Awesome - hvis du faktisk gå til nettstedet -
gir deg en masse ikoner etter ikonene øverst.
Ja, bare toppen.
Det vil gi deg mye av ikoner for gratis.
>> Så her ser du vi har ting som en stjerne, barer, et lyn, en
kalender, en bug, en bok, et cetera.
Dette kan være meget nyttig.
Måten du tar med dette er at du inkluderer bokstavelig CSS-filen.
Og etter at du har tatt med CSS-filen, hva du kan gjøre er å opprette en
tag kalt I. Det satands for ikonet med klassen FA
står for Font Awesome.
Og så, uansett klasse du ønsker.
>> Så hvis jeg ville ha et ikon av dette pluss firkantet rett her, ville jeg gi
det klassen FA.
Og da FA bindestrek pluss bindestrek torget.
>> MIKE RIZZO: Cool, OK.
>> TOMAS Reimers: Og så, den siste CSS bibliotek vi ønsker å komme gjennom vi er
prøver å holde det minimalt på CSS bibliotekene fordi vi innser
Tittelen på denne presentasjonen er Javascript biblioteker.
Men vi tenkte at vi kan like godt introdusere deg til de andre bibliotekene
mens vi snakket om bibliotekene.
>> Det er Google Web Fonts.
Og hva Google Web Fonts lar deg å gjøre er å legge fonter til nettstedet ditt,
som er en veldig enkel måte å gjøre det pen og å skille apparatet
fra alle andres er hvis den har en fin skrift eller hvis den har en fin
samling av skrifter.
Google Web Fonts er fint i motsetning til andre bibliotekene i den forstand at det er en
virkelig guidet installasjon.
>> Så hvis du følger linken, er det google.com / skrifter, tror jeg.
Hvis du følger det, du kan plukke skriften.
Du kan velge på venstre fra tykkelse, skrå, et cetera.
Og så, når du har valgt en, du kan klikke rask bruk.
Akkurat der.
Nederst til høyre på boksen.
>> Og så, bla nedover.
Først av alt, de gir deg CSS som må du faktisk koble til det.
Det er rett der.
Du kan bare kopiere og lime det inn
Og det fine med dette er du trenger faktisk ikke engang trenger å
laste ned filen.
>> Hva det kommer til å gjøre er det som skjer å knytte til Googles versjon av den.
Så tilbake til hva betyr det.
Det betyr at når en bruker laster ned filen -
laster ned HTML-siden - HTML siden kommer til å referere til denne filen.
>> Så da har datamaskinen kommer til å se, Åh, det er vert på google.com heller
enn på theirsite.com.
La meg gå spør Google for denne filen.
Og så kommer det til å omfatte det nesten som om det var en
en del av ditt eget nettsted.
>> TOMAS Reimers: Cool.
Og når du har det, så til inkludere den i CSS, det gir deg
selve linjen.
Så du sette eiendommen font familien lik navnet på skriften.
>> MIKE RIZZO: OK.
Så vi nettopp ferdig med CSS.
Og noen av dere kanskje tenker, vel, vi hadde noen CSS på CS50 Finance.
Men CSS biblioteket var bootstrap.
Vi har faktisk inkluderer Bootstrap litt senere i henhold Java fordi med
Bootstrap CSS Biblioteket kommer også med mye Javascript som
Bootstrap eller Twitter - som gjorde Bootstrap -
bruker til å administrere alle sine CSS.
>> TOMAS Reimers: Er det noen som har noen spørsmål så langt om CSS generelt?
Vi er gode?
Awesome.
>> MIKE RIZZO: Awesome.
>> TOMAS Reimers: Så flytter på å Javascript.
>> MIKE RIZZO: Så vi ønsket å snakke om jQuery til å begynne med.
Har noen hørt om jQuery før eller brukt det?
Ja, et par?
Så hvis du bare jobber med innfødte Javascript, vil du finne deg selv
skrive mange lange velgere mye.
Så hva jQuery gjør er det gir en fin wrapper for Java
språk som lar deg enkelt velge og manipulere ulike elementer
i dokumentet objektmodell av nettside eller DOM, som jeg tror
dere har hørt om i forelese på dette punktet.
>> TOMAS Reimers: Hvis du ikke har hørt om det, eller hvis du ikke har sett foredrag
ennå, er det Document Object Model utgangspunktet hvordan ting er representert.
Så HTML slags ser ut som et tre når du faktisk trekke det ut.
Du har HTML-element på toppen.
Du har hodet og kroppen.
>> Og så, i løpet av det du har alt annet.
Som er referert til som DOM -
Document Object Model.
Så en modell som representerer objekter i dokumentet er en enkel måte å tenke
om det.
Og en av de store ting om jQuery er det virkelig gjør traversering
det og manipulere elementer innenfor som utrolig enkel.
>> Så enkelt, faktisk, at størstedelen av Javascript-biblioteker eller hvis ikke den
Flertallet, den store majoriteten av de ser du faktisk trenger jQuery så
at de kan kjøre seg bare fordi hvis du ikke har jQuery, du
ville kaste bort en masse tid på å prøve å finne ut hvordan å velge visse
elementer og hvordan du gjør andre ting.
Og den andre store ting om jQuery er at det er korset nettleseren kompatibel.
>> Så husker tilbake når vi sa at Ikke alle nettlesere implementere
ting på samme måte?
Dette gjelder selv i Javascript.
Og en av de store tingene om jQuery er at det vil oppdage
nettleser og oppdage hensiktsmessig måte.
>> Så hvis du trenger for å velge et element, Internet Explorer kan si du er
ment å gjøre denne måten.
Firefox kan si riktig måten er på denne måten.
jQuery bryr seg ikke.
Når du forteller jQuery for å velge en element det vil finne ut hvordan det er
ment å gjøre det i nettleseren på brukeren er i, og deretter gjøre
det på den måten.
>> MIKE RIZZO: Så la oss ikke snakke om bruken av jQuery litt.
Akkurat som PHP, har jQuery en bestemt forkjærlighet for dollartegnet.
Så du vil finne at noen jQuery -
godt, ikke alle.
Du kan noen ganger erstatte dollaren signere med ordet jQuery.
Men generelt, bare fordi det er kortere, når du ser jQuery være
brukte det vil være med et dollartegn.
>> Så her er vi bare viser en begynnelse VELGER for et element i DOM.
Her har vi den dollartegn etterfulgt av åpne parenteser og deretter sitater.
Og i løpet av de sitatene gå våre velgere for de forskjellige elementer.
Akkurat som i CSS, vi trengte velgere til kunne style forskjellige elementer
innenfor siden.
De ulike velgere sette nøyaktig inn jQuery og Javascript,
for det meste.
>> Så her har vi en prikk foo.
Så hvis du husker fra forelesning, prikken betyr bare klassen.
Så vi har valgt element med klassen foo.
Så hvis jeg går videre og åpne opp vår Java konsollen her veldig raskt
bare demonstrere det, hvis jeg bare skriver dollartegn, ser vi at det er noen
funksjon som kommer opp.
Og det er bare definert av jQuery.
>> TOMAS Reimers: For de av dere ukjente, er konsollen et verktøy
innenfor Chrome, som lar deg, utgangspunktet, kjøre Javascript på
gjeldende siden.
Dette vil du finne utrolig nyttig når du faktisk debugging og du
trenger å være som, hva er den nåværende Verdien av noen global variabel eller hva
er noe annet?
Det er typen som GDB med unntak som kan du faktisk
manipulere elementer på siden med det på en mye enklere måte.
Og også det ikke, i utgangspunktet, sjekk på med deg før den gjør noe.
>> Så mens, kan GDB være like, er du sikker på at du ønsker å kjøre neste trinn?
Konsollen er i virkeligheten.
Så som web-siden er rendering og gjør hva det gjør, det
rådets også kjøres sammen med det.
Og du kan sette impute koden på at konsoll som vil
kjøres på siden.
>> MIKE RIZZO: Så for å gå inn i konsollen, Jeg tror jeg skal kort
nevne hvordan du gjør det.
I de siste problemene du måtte ha brukte Chrome inspisere element
funksjoner eller view page source -
og de som er tilgjengelige bare ved å høyre klikke på siden eller et bestemt
element og gjør enten inspisere element eller vise siden kilden.
Vi kan også få tilgang til Java konsollen direkte av
velger inspisere element.
Så da du bare trykke konsoll på høyre side.
>> Alternativt kan du også har gått til øvre høyre hjørne,
som er klippet av på denne skjermen hvor det har de tre vannrette streker.
Og du går ned til verktøy og deretter Javascript-konsoll
her hvor kan se -
i alle fall på Windows -
snarveien er Kontroll Shift J. Så da hvis vi ønsket å velge et element
innenfor denne side, akkurat som jeg viste før, gjør vi dollar sign åpne parentesar
og deretter siterer.
>> En interessant ting er, generelt, apostrof og anførselstegn er
byttes.
Så mange mennesker bare bruke én anførselstegn fordi de er raskere å skrive
enn doble anførselstegn, fordi du ikke gjør det må holde nede Shift.
Så jeg vil bare gjøre det akkurat nå.
>> Så jeg ønsker å velge noe med klassen.
Container, bare fordi jeg vet det er noe som er på vår
web side akkurat nå.
Og jeg traff på Enter.
Og vi kan se at det har valgt det.
Så det viser seg at det returnert dette objektet.
Så det er et grunnleggende valg.
Hvis vi ønsket å faktisk manipulere det, du ville ha til å kalle noe
på at utvalget, som vi vil komme inn senere.
>> TOMAS Reimers: Så bare for å se på det mer i dybden, er dette ikke annerledes
enn de funksjonskall vi gjort i C. Navnet på funksjonen her er en
litt rart.
Det er dollartegn.
Det er bare et navn på en funksjon.
Det er ikke noe spesielt om det.
>> Vi har åpne parentes.
Da har vi vår ett argument, som i dette tilfellet skjer for å være en streng,
som er en velger for den.
Og så har vi vår lukket parentes.
Det var det.
>> Det er ikke så vesentlig forskjellig.
Selv om det ikke ser veldig merkelig.
Og det kan være, liksom, en stikker peke for mange mennesker.
>> MIKE RIZZO: Så på samme måte, hvis vi ønsket for å velge et element som har en ID,
Nå ønsker vi å velge ved ID i stedet for klassen.
Det ville være en lignende ting hvor vi bare gjøre det skarpt tegnet for ID.
Så vi velger her hele elementer som har ID bar.
>> TOMAS Reimers: Og dette strekker.
At CSS strekker.
Akkurat som i CSS, kan du velge alle koblinger, som har klassen foo.
Her er det det samme.
>> Du kan gjøre a.foo, som ville velge alle linkene med klassen foo.
Du kan gjøre en skarp bar, noe som ville Velg koblingen med ID bar og så
videre og så videre.
Enhver CSS velgeren er en gyldig jQuery velgeren.
>> MIKE RIZZO: Yeah.
OK, så nå la oss komme inn i en litt av manipulasjon at vi kan gjøre med
vår jQuery.
Så jQuery har en bestemt type notasjon der vi bare bruke
et punkt ved enden.
Og du kan tenke på dette som i C hvor vi hadde ulike structs.
Og for å gå inn i disse structs, ville du bruke en prikk for å komme inn i dem.
>> Dette er, på en måte, en lignende ting.
Først nå har vi funksjoner innenfor dette VELGER at vi kan kalle på den.
Så her, den aller første eksempelet du kan se er en CSS velgeren.
Og i utgangspunktet, hva det gjør er det gjelder det første elementet CSS til denne
ting som du har valgt -
dette elementet som du har valgt -
med den verdi som.
>> TOMAS Reimers: Så en enkel oversettelse av det ville være hvis jQuery, i utgangspunktet,
bare tok foo.
Og så i CSS sa, fargen rød og nær.
Det er den samme ideen.
Hva det er gjort er det valgt alle foo elementer.
Og så er det anvendt.
Sortering av, eiendommen farge er lik red.
>> MIKE RIZZO: På samme måte kan vi også endre det faktiske innholdet i det som er
viser på HTML på siden, noe som er virkelig kult fordi det betyr at
nettsider kan nå være helt dynamisk og trenger ikke å være statisk
at du skriver ut ved hjelp av PHP helt i begynnelsen av
at siden lastes.
Så her, hvis vi ønsket å endre selve HTML på siden, ville vi nå
ring HTML-funksjonen, som deretter bare inserts hva vi spesifiserer inn
det elementet som vi har valgt.
Så her er vi velge element med class foo og deretter sier det er HTML
det er nå hello world.
>> TOMAS Reimers: Og når du tenker på hva er nyttige anvendelser av
dette, dette CSS ett, er det første som du kan begynne å tenke på er
i form av enda drop down menyer.
Du kan begynne å gjøre ting som, når en bruker svever over den øverste delen
av en rullgardin, ønsker du å gjøre den nederste del er synlig.
Høyre?
>> Så i CSS, har vi eiendommer å gjøre noe synlig.
Ting som skjerm kolon none ville gjøre den usynlige.
Visnings blokk ville gjøre det synlig.
Eller selv om du ønsker å gå enklere, du har ting som sikt gir
synlig, og sikten er lik skjult.
>> Og du kan begynne å implementere ting som drop down menyer riktig
etter at du får gjennom ideen om hvordan kan du finne ut når denne åpnes,
som vi skal komme gjennom veldig kort.
Men vi kan begynne å se anvendelser av denne.
På en lignende måte, hvis du skulle prøve og implementere, la oss si, en chat
motor, og du ønsker å gjøre litt snakkeboblen kommer opp når du har
fikk en ny melding, når du får den ny melding, kan du lage en liten
snakkeboblen kommer opp ved å endre HTML på siden, ikke sant?
Ved å legge til at ekstra snakkeboble med ekstra tekst i det.
Yeah?
>> PUBLIKUM: Så du ville legge denne i HTML-kode i liksom som en
[Uhørbart]?
>> MIKE RIZZO: Høyre.
Ja, vi får til det i en liten bit.
Ja, det ligner en litt til PHP.
Ikke akkurat lik.
>> En god skille å gjøre er hva dette er faktisk redigerer når vi redigerer
siden fordi det ikke kommer til å bli redigerer selve filen som blir
holdt på tjeneren fordi verden bør ikke ha tillatelse
å redigere filene dine.
Dette er bare å redigere hva som skjer på siden og hva som blir vist i
nettleseren.
Så hvis du var å laste siden på nytt etter, si, slette noe som vi
ser vi kan gjøre med remove samtale, at ting vil da dukke opp igjen.
>> TOMAS Reimers: Så en måte å tenke på dette er hvis jeg er datamaskinen og
Mike er, liksom, serveren.
Hva kommer til å skje er at jeg kommer til å spør Mike, hei, kan jeg få en kopi av
denne nettsiden?
Og han vil gi meg en kopi av den.
>> Nei, det er ikke den opprinnelige tingen.
Det er bare en kopi.
Og da ville det være som, oh, det er Java her.
Åpenbart bør jeg redigere side å være som dette.
Og jeg redigerer din kopi.
>> Men det er ikke å utføring selve kopien.
Og hvis jeg skulle spørre ham igjen oppdaterer siden, -
hei, kan jeg ha en annen ren kopi -
han kommer til å gi meg annen ren kopi.
Og så, jeg kommer til å gjøre det samme liker, oh, JS dette her som sier
å redigere dette.
Og jeg kommer til å fortsette med det.
>> MIKE RIZZO: Så en veldig kul ting at du kan gjøre med jQuery er
faktisk legge til ulike typer av animasjoner til siden din.
Jeg vet ikke om du noensinne har sett hvor du prøver å fyll ut et skjema
online, og du trenger ikke fylle ut tingene riktig.
Så en liten ting glir ned på toppen og sier at du
har ikke gjort dette riktig.
Vennligst prøv igjen.
Og så, det kan også bare gli opp.
>> Slår ut jQuery har innebygde funksjoner som gjør alt dette
animasjon virkelig, virkelig enkelt.
Så det er første fade ut-funksjon, som
du kan ringe på noe.
Og det er en måte å endre CSS av som element i et animert måte.
Så det tar uansett element du kaller det fade ut på.
Og så endrer det opacity sakte før det går helt gjennomsiktig.
>> TOMAS Reimers: Den andre kjente er skli ned, noe som vil gjøre
noe ut ved å skyve den ned.
Så i tilfelle av rullegardinmenyen, igjen, når vi lærte å gjenkjenne
når dette har blitt svevde over, du kan bare fortelle dette bunnen
del skli ned nå.
Og så ser det ut til ved å skyve ned.
>> MIKE RIZZO: Og så, hvis du bare har noen form for animasjon i bakhodet at
jQuery gir ikke nødvendigvis.
For eksempel, la oss si jQuery ikke gi deg et lysbilde
ned og skyv opp.
Vel, la oss si at du ønsket å skyve noe inn fra venstre eller fra
den rette typen som CS50 hovedsiden gjør når
du går til et nytt panel.
Du vil da sannsynligvis måtte implementere det selv ved hjelp av den
animere funksjon innenfor jQuery.
>> Så på samme måte, du bare animere.
Og så, i det det tar en ordbok av de ulike verdier
at du skal passere.
Så her, hvis vi ønsket å animere element foo slik at dens bredde enten
utvider eller kontrakter til 80 piksler, avhengig av hva det er i dag.
Vi ville bare passere det som argumentet i den.
>> Animere også har noen andre argumenter at du kan gi det, for eksempel,
hastigheten på animasjonen at du ønsker å gi det.
Og for å gjøre det, jeg ville bare si raskt Google jQuery animere.
Og så, bringe opp denne siden, kan du se det har en haug med forskjellig
egenskaper som du kan passere den.
>> Og jeg oppfordrer deg - når du kommer over noe som du ikke
vet eller bare ønsker å lære mer om en bestemt metode som du kan ringe
på noe -
bare google det. jQuery er ekstremt godt dokumentert.
Og ofte er det mange av eksempler på at de gir for deg.
Hvis vi bla nedover -
helt ned -
at vi kan bruke, så vel.
>> Igjen, når en utvikler faktisk går gjennom bryet med å skrive en
bibliotek, de vanligvis vil noen til å bruke den.
Så i tillegg kommer til å være en dokumentasjon.
Og at dokumentasjonen kan vanligvis være finnes på prosjektets side, noe som er
hvorfor vi ga deg det opprinnelige området i begynnelsen, som knytter deg til
prosjektsider, slik at du kan se at dokumentasjon.
>> Vanligvis prosjektet siden i saken av [uhørbart], det fortalte du det
Navnene på de klasser.
I tilfelle av Javascript, det gir du navnet på funksjonene.
Forresten, hvis vi bla opp til toppen, en rask side note på funksjoner er
når du ser en funksjon implementert som dette med den harde
parentes i midten, det betyr at denne egenskapen er valgfri.
Bare en heads up.
Jeg har sett en rekke spørsmål om det.
>> Så her kan vi se at besjelede tar eiendommer
som et nødvendig argument.
Og alt annet er valgfritt.
Side note -
du kan tenke på dette, liksom av, som man-sidene.
Man sider er dokumentasjon for C og for en rekke andre ting, så vel.
>> MIKE RIZZO: Så vi har lært å bytte til et annet CSS på siden,
animere det, og fjerne legge til HTML.
Men en av de virkelig mektigste ting om Java
og spesielt jQuery -
hva det lar deg gjøre er å svare på forskjellige elementer som skjer.
For eksempel har vi her en hendelseshåndterer.
Og det betyr bare når dette hendelse skjer, vi håndtere det på en
bestemt måte.
>> Så her, det generiske jQuery hendelsen behandleren er prikken på.
Og så, den første tingen du oppga er hvilket arrangement det skal
lytte til.
Så her er det et klikk som vi venter på.
>> TOMAS Reimers: Alternativt har du på hover, som er en svært populær en.
Så tilbake til min nedtrekksmenyen idé.
Du vil ha den øverste på hover.
Og så kan du endre det.
>> MIKE RIZZO: Høyre.
Og så, når det skjer, det bare utfører denne funksjonen at vi gir den
som et argument, og at det varsler hei eller hi.
>> TOMAS Reimers: Så i tilfelle av Javascript, er dette et sted vi trenger å
fjerne oss fra C. Vi kan faktisk ta funksjoner som argumenter.
Og det finnes en rekke virkelig komplekse måter å gjøre dette.
Vi kommer til å fremme en måte, som er at du kan definere
fungere akkurat der.
>> Så når du spør etter en funksjon som en parameter, er du i utgangspunktet bare
kommer til å definere funksjonen på stedet.
Og måten du definerer en funksjon i Javascript er du
bokstavelig talt si funksjon.
Deretter, som regel, i navnet av funksjonen.
Men vi kommer aldri til å referere denne funksjonen igjen.
Så vi lar det navnløse.
>> Deretter parentes, så krøllete bukseseler, og deretter koden i det.
Så vi forstår dette kan være litt forvirrende.
Så vi gi deg den generelle formen for hva en hendelseshåndterer ser ut som
nedenfor, som er på arrangementer.
Og så, en kode på innsiden som.
>> MIKE RIZZO: Er det noen spørsmål om dette?
Dette kan være litt forvirrende første gang du ser den.
>> TOMAS Reimers: Du faktisk ønsker å åpne opp en fil og vise dem noen
jQuery akkurat nå?
>> MIKE RIZZO: Ja, la oss gjøre det.
OK.
>> TOMAS Reimers: Så nå er vi i apparatet.
Og det vi har gjort er at vi har tatt frihet til å skape både en index.html
fil, som linker til en Javascript-fil.
Og kan vi åpne opp -
ja.
Vel, det gjør to ting.
>> Den første er det linker til Javascript-filen.
Og vi vil se at her oppe.
Vi ser at i hodet av HTML-dokument, spesielt.
Så du får se det som vi, i utgangspunktet, sier SRC,
som står for kilde.
Og det er nettadressen.
>> Så her kan du si vi har inkludert jQuery.
Og vi har også inkludert skript.
Den andre måten å inkludere Java er at du kan inkludere et inline script
tag som vi har på bunnen hvor det sier script type er tekst Javascript.
>> Så vi sier, lytte, vi er om å inkludere et skript.
Og den typen som skriptet er Javascript, som er en type av tekst.
Veldig enkelt.
>> MIKE RIZZO: Så dette, type, får spørsmålet om hvordan vi inkluderer
Java våre filer fordi når vi hadde PHP, gjør vi noe sånt som dette.
Og så, har våre PHP funksjoner - la oss si bestandene gjøre
noe med det -
går inn der.
Men nå har vi de skriptkodene at vi gir det, som faktisk er
en del av HTML seg selv fordi det ikke er falsk å være en HTML-fil som det
er i PHP fordi hvis du faktisk gå i og se på kilden til siden,
du vil se disse skriptkodene i det med Java forbundet med
dem i det.
>> Så da, hvis vi ønsket å skrive noen Java -
la oss bare si at vi ønsket å endre kroppen fordi akkurat nå er jeg ikke har
eventuelle andre koder som jeg virkelig kan redigere foruten kroppen.
La oss bare si at jeg ønsket å endre CSS av det.
Så får vi gå videre og endring fargen på det til rødt.
>> Så jeg lagre filen.
La oss gå tilbake til vår web-side, refresh, og det gjør det automatisk
fordi det ikke ser ut som det ventet i det hele tatt fordi vi ikke lyttet
for en hendelse eller noe sånt.
>> TOMAS Reimers: Så hvis vi går tilbake til det fil i særdeleshet - HTML
fil - hva du skal å se er at vi har -
husk at dette er lastet, liksom, kronologisk.
Så vi har først hodet. den laster disse to filene.
Så går vi til kroppen.
Og vi ser hello world.
Så vi gjengi hello world.
>> Og så det siste vi har er vi har skriptmerket.
Så det kjører skriptmerket fordi det er ikke fortelle det å vente på noe.
Og det er den mest grunnleggende måte å kjøre Javascript.
>> Med det sagt, kan du sette skriptet tagge opp i overskriften bare
å vise dette punktet?
Og kjøre den.
Vi kommer til å legge merke til at det ikke endre fargen.
Og dette er et av problemene med Javascript er at ting er lastet
i en kronologisk rekkefølge.
>> Så på den tiden at den koden var i gang, vi valgte -
gå tilbake -
body-koden.
Body-koden ikke finnes ennå fordi Javascript er i tråd med HTML.
Så leseren er som velger kroppen.
Det finnes ikke noe slikt ennå.
Så vi kan se bort fra det.
Og vi holde det gående.
>> Og da vi definere en body-koden.
Men som aldri blir oppdatert.
Så når du implementere script tags, sørg for at du plasserer
etter body-koden.
Neste lysbilde.
>> MIKE RIZZO: OK.
Så vi endret noe.
Men det så ikke ut som det svarte til oss i det hele tatt fordi det bare slags
gjorde det så snart det lastet siden.
Så nå, i stedet for å gjøre dette, hvorfor trenger vi ikke legge en hendelseshåndterer.
>> Så la oss gjøre noe til kroppen på nytt.
Og la oss si at vi gjør det på -
klikk.
Vi vil legge til en funksjon.
>> TOMAS Reimers: La oss endre det er farge til rødt igjen.
Hvorfor ikke?
>> MIKE RIZZO: Ja, la oss skifte sin "farge til rødt igjen.
OK.
Så la oss oppdater siden.
OK, ser vi -
som forventet, vil det ikke slå rødt ennå.
Men da kan vi gå videre og klikk på den.
>> TOMAS Reimers: Og det blir røde.
>> MIKE RIZZO: Og det gjør blir røde som forventet.
>> TOMAS Reimers: Og vi kan se hvordan vi kan begynne å bygge helt grunnleggende
interaksjon.
Andre ting vi kanskje vil gjøre er, hvis vi ikke ønsker å gjøre kroppen
farge rød, la oss gjøre HTML bakgrunnsfargen rød.
Bare så det er den samme CSS.
>> Og når vi endre det, kan vi se dette meget dramatiske effekten av å endre
hele siden.
Så igjen, hvis du implementere ting, du kan ha en komponent
som er ment å bli klikket på.
La oss si en Exit-knappen og en hel annen komponent,
som er ment til å reagere.
Så du ville fjerne et vindu når det skjer.
>> MIKE RIZZO: OK.
Bare som et eksempel -
du ikke fikk se dette tidligere -
Jeg skal bare vise deg hvordan det ser liker når vi skjuler noe.
Så jeg skal gå videre og ikke gli opp.
>> TOMAS Reimers: Lyst å pakke det i en avsnitt type før vi gjør det?
>> MIKE RIZZO: OK.
Ja, hvorfor kan ikke vi gjøre det bare så vi kan velge det litt mer.
>> TOMAS Reimers: Og la oss gi den en klasse.
>> MIKE RIZZO: Yeah.
OK, så la oss se.
I stedet for å velge den faktiske kropps nå, vil jeg bare velge alt med
klasse hallo, som her vi bare har én ting.
Så vi bør ikke ha for å bekymre deg for det.
>> Så jeg skal oppdatere den.
Jeg skal gå videre og klikk på den.
Og det, liksom, gjorde en merkelig lysbilde opp ting, som ikke ser at
attraktiv.
Vanligvis gjør de ser ganske fin.
Jeg antar dette - for noen grunn - ikke gjorde det.
Jeg vil bare gjøre en fade ut så du kan se på det også.
Mye hyggeligere.
>> Og så, hvis jeg åpner opp Java konsollen igjen, og vi ønsker å se hva
det ser ut når vi visne det i.
Nå, jeg bare ringe visne med på det.
Og det forsvinner tilbake igjen
>> Tilsvarende kunne vi faktisk også passere et argument for å fade inn eller ut,
som er, på en måte, hastigheten av den.
Så la oss gå videre og si at vi ønsker det å gå sakte visne i.
Så jeg antar det fortsatt virket ganske raskt.
Men det var tregere enn før.
>> TOMAS Reimers: Og hvis du ønsker å finne ut mer om disse tingene, igjen,
bare gå til dokumentasjons jQuery, som vi har gitt deg, og lese
gjennom disse.
De dokumenterer deres funksjoner utrolig godt.
>> MIKE RIZZO: OK.
Så jeg antar la oss gå tilbake til dette.
Og vi kan snakke om vår siste side.
Vel, kan vi avslutte med Bootstrap.
Og så skal vi åpne den opp for noen spørsmål.
Og hvis dere har noen ideer som du har lyst til å prøve å kaste opp og se
hvis vi kan gjennomføre dem med Java raskt.
>> Så veldig raskt om Bootstrap, som ble automatisk inkludert i
din siste problemet satt i CSS-mappen og faktisk koblet til i din
header.php.
Så du kunne ha lagt til klasser som er definert innenfor Bootstrap til det.
Og det ville ha automatisk stylet disse ting deretter.
>> TOMAS Reimers: Så Bootstrap er et veldig magisk ting utviklet av folket
på Twitter.
Og hva det var ment å gjøre var -
før nettsteder var virkelig vanskelig å gjøre se fint ut, spesielt når vi hadde
en rekke vanlige komponenter.
Så mye av knappene på web sett det samme.
>> Mange av tekstfelter kan gjøres til ser bedre ut enn standard tekst
feltet du sikkert vet fra virkelig gamle nettsider eller virkelig dårlig gjort
nettsteder, som bare ser ut som bokstavelig tekstbokser uten noen form for tekst
skygge eller noen form for fin disposisjon.
Så hva Bootstrap gjorde var det sagt, vel, Vi har mye felles stiler.
Hvorfor kan ikke vi gjøre ett felles sett av CSS og et felles sett av Javascript som
vel, noe som kan style det som er og som kan gi folk ting som dråpe
down menyer, kan som gi folk ting som modals.
>> Modal er hva som dukker over siden når det er strengt tatt
noe, som hemmer videre interaksjon til du
samhandle med det.
Noe sånt som dette er, er du sikker du ønsker å slette denne tingen?
Du kan egentlig ikke gjøre noe annet før du sier ja eller nei.
>> Det tok alt dette, og det pakket det sammen og sa, her vi går.
Folk kan nå bruke dette.
Og du kan finne det over på getbootstrap.com.
Det ble automatisk inkludert i din siste oppgavesettet.
Og du er mer enn velkommen til bruke det på det endelige prosjektet.
Og hvis du ønsker å følge det lenke for å få Bootstrap.
>> Du vil se her er den Bootstrap CSS området.
Du vil se Bootstrap.
Og hvis du blar nedover, vil du se hvordan du laster ned den, hvordan du
installere det, et cetera.
>> MIKE RIZZO: Og du kan også, interessant nok, tilpasse den til
være hva slags temaer som du ønsker.
Jeg vet det er noe jeg gjorde for min siste prosjektet da jeg tok klassen
ble tilpasse den.
En annen versjon av Bootstrap at hadde et annet fargevalg og
ulike former av noen forskjellige ting.
Så jeg oppfordrer deg til å leke med det.
Det er litt morsomt å gjøre.
>> TOMAS Reimers: Ser over toppen igjen, det er veldig likt til Font
Awesome nettstedet.
Mye av dokumentasjonen vil starte å virke lignende når du har
sett nok av det.
Så her har vi CSS komponent av dette.
Og du får se hvordan det kan style ting.
Så hvis du klikker på tabeller, for eksempel, du kan raskt få et
Tabellen ganske ved å legge klassen bordet til den.
>> Samme tingene for knapper.
Hvis du bare legge klassen BTN og BTN Standard eller BTN primære, kan du
få en av disse knapper med disse ferdiglagde stiler.
Og så, hvis du leter etter noe mer komplisert enn bare
restyling hva w allerede har, over på fanen Java øverst vi
har en haug med komponenter.
>> Så her har vi overganger, modals, innføyning faner og verktøytips.
Et verktøytips er hva som dukker opp under musen når du holder på noe.
Popovers, varsler, knapper, sammenleggbart trekkspill er hva
de er vanligvis kalles.
Karuseller, som flip gjennom for eksempel bilder.
>> Så de er de komponentene av Bootstrap.
Jeg vil oppfordre deg til sterkt gå se på dem.
Det er en Javascript-komponent og en CSS-komponent.
Føl deg fri til å bruke dem som du vil.
Vi kommer ikke til å gå for mye inn i dem fordi vi føler dokumentasjonen
er veldig bra gjort.
Og ja.
Har du noen spørsmål om det?
>> MIKE RIZZO: Så som en er veldig rask side, utformingen av denne web siden som
vi raskt satt sammen for denne presentasjonen er
faktisk gjort ved hjelp av Bootstrap.
Som du ser, når vi klikker på disse ulike kategoriene, er vi faktisk aldri
forlater denne aktuelle index.html side.
Så det vi har er forskjellige divs innenfor denne index.html.
Og så, når vi klikker på en annen kategorien, er det bare å endre
som ens viser.
>> Så det posisjonerer dem tilsvarende, endrer HTML på siden, slik at
den aktive fanen er merket som aktiv så det ser annerledes og utseende
veldig fint.
>> TOMAS Reimers: Så det var gjort uten oss å skrive nesten alle CSS.
Vi ser også en header øverst, der fargene er av oss.
Men selve å sette den på toppen og gjør
det bla var Bootstrap.
Og så selv for et annet bibliotek - dette er ikke en vi snakket om, men en
du kan Google hvis du vil.
Dette kalles prettify.js.
Og det vil syntaks høydepunkt koden for deg med både CSS og Javascript.
>> Det siste vi ønsker å snakke om før vi slipper deg ut i den
verden for å se på biblioteker for å finne ut hvordan du bruker dem og til, forhåpentligvis,
lese dokumentasjon og finne det du Behovet er hvordan man skal finne biblioteker.
Så det første er vi bare kommer til å presse Google.
Gå Google.
>> Det er bokstavelig talt det vi gjør når vi trenger å gjøre noe er vi Google.
Er det et Javascript-bibliotek som tillater meg å manipulere tid i en
nyttig måte?
Så hvis jeg vet at noen bruker å skape en konto her, og dette er
gjeldende tid, hvordan kan jeg beregne forskjell at uten å måtte
beregne det selv?
Så dette er faktisk en vanlig ting, Java time bibliotek.
Og her er vi Moment.js-- den mest populære.
>> Hvis vi trenger et bibliotek å manipulere noe sånt som farge for å kunne
generere en haug av tilfeldige farger -
eventuelt, for å generere en stil eller noe -
vi kunne google noe sånt Javafargebiblioteket.
Og jeg er sikker på at vi ville komme opp med tusen og en av dem.
Du er velkommen til å lese gjennom dem.
>> Så de fleste ting - når du finner dem - skal være vert på en av de
nettsteder som vert kode.
De er er noen populære.
Den mest populære, ved langt, er github.com.
Og hvis du går til GitHub det er faktisk hvor Normal ble arrangert.
Så hvis du ønsker å gå tilbake til den.
Vis dem at.
>> MIKE RIZZO: Og det er faktisk der dette er vert for, hvis du lagt merke til.
>> TOMAS Reimers: Yeah.
Så hvis du går over til å normal og gå til GitHub.
Var er det?
>> MIKE RIZZO: Den lille katten ting er GitHub symbol.
>> TOMAS Reimers: Oh.
Så GitHub bruker en metode som kalles Git til butikken kode.
Er du ikke vet hva det er eller det skremmer deg, er det helt greit.
Du trenger ikke å vite hva Git er fordi GitHub har en Last ned-knappen
nederst til høyre.
>> Den andre nyttige ting å vite om GitHub er de fleste produkter
vil ha en lese meg.
Og hvis de ikke har et nettsted, lese meg vil snakke om hvordan du
installere det, hvordan du bruker det, hva det gjør, et cetera, et cetera, et cetera.
Hva vi har i utgangspunktet vært vandre gjennom.
>> MIKE RIZZO: Internetts slutte.
>> TOMAS Reimers: Det er greit.
De to siste tingene vi ønsket å snakke om -
vi har snakket om Git -
er feilsøking.
Og dette er ikke så relevant for i sluttproduktet når det er
når du forlater 50.
Og når du kjører inn i produkter implementere biblioteker eller gjennomføring
ditt eget prosjekt, du kommer å har spørsmål eller du er
kommer til å se etter spørsmål.
>> Igjen, Google det.
Det er bokstavelig talt det vi gjør.
Dette kommer til å høres dumt.
Men bokstavelig talt, vi Google det.
Og videre en av de første ting vil du vanligvis kjøre inn er
stackoverflow.com, som er en fantastisk spørsmål og svar skue.
>> Det er fantastisk både fordi du kan legge inn spørsmål og se etter
svar, men også fordi det allerede har mye av
forhåndsutfylt innhold der.
Så vanligvis når du Google en programmerings Spørsmålet i første
par treffer du kanskje allerede har kjørt inn i den i løpet av problem settene.
>> Og så, den siste virkelig kort tingen er JSFIDDLE, som er - i dag har vi
gjort mye arbeid med Java HTML CSS.
JSFIDDLE er en web-app, som i utgangspunktet gjør at du kan ta din HTML, DIN
Java nederst til venstre, og CSS øverst til høyre.
Og så kan det skape en rask render av det og se hvordan den samhandler.
Det er veldig nyttig når folk prøver å gjøre en proof of concept som
Dette er hvordan du ville gjøre en rullegardinmeny.
Kanskje en rask avdekke eller hva.
>> MIKE RIZZO: Så la oss gå videre og klikk på denne.
En rask kommentar -
mens, før vi var gjør på klikk.
Slår ut JCorey Korea har også en innebygd i klikkhendelsesbehandling at det
bruker bare fordi det tall du er kommer til å ønske å gjøre en masse ting
når du ønsker å klikke noe.
>> Tilsvarende har det også en hover.
Men for å få det fulle omfanget av de, se på jQuery
dokumentasjon og gjøre det.
Jeg gjorde noe dumt her.
>> TOMAS Reimers: Så jeg har en veldig rask program her, som sier
knappen på klikk.
Da har vi en for-løkke.
For i er mindre enn 404.
Det er bare kommer til å dukke opp disse varselmeldinger.
>> MIKE RIZZO: Og hva var det kode 404 sto for i HTML?
Husker noen?
Ikke funnet, ikke sant.
Chrome også lagt dette ryddig ting der du kan -
>> TOMAS Reimers: Fordi folk som Mike begynte å gjøre dette mye og
irriterende brukere, som tillater du å se info.
>> MIKE RIZZO: Yeah.
>> TOMAS Reimers: Har vi noen spørsmål om dette, om Java
biblioteker, finne biblioteker eller hva webutvikling utseende
som i den virkelige verden?
Vi kjører opp mot tiden.
Så jeg er ikke sikker på at vi skal til å ha tid til å gjennomføre
med mindre det er virkelig rask.
Er vi gode?
>> MIKE RIZZO: Anything dere ønsker å se virkelig rask i, som, to
minutter eller mindre?
>> TOMAS Reimers: Anything vi kan avklare?
Hvordan skrive på -
>> PUBLIKUM: [uhørbart]?
>> MIKE RIZZO: Ja, så that -
>> TOMAS Reimers: Du kan bare trykke Kontroll-U på nettstedet.
>> MIKE RIZZO: Åh, jeg visste ikke det.
>> TOMAS Reimers: Jeg tror, ​​ja.
Kontroll-U. Yeah.
>> MIKE RIZZO: Åh, så det er koden for nettstedet.
Men hvis du faktisk ønsker å laste ned vår filer og alt, er det vert
på github.com
>> TOMAS Reimers: slash mitt navn -
Tomas Reimers - slash CS50 bindestrek seminar.
>> MIKE RIZZO: Og du kan finne alt der.
>> TOMAS Reimers: Dette er hva GitHub ser ut, for øvrig.
Så igjen, når du ser en åpen kildekode prosjekt, vanligvis, vil de være en lese
meg der som du kan lese.
Og hvis du går tilbake, vil du legge merke til at du har nedlastings zip, noe som vil
tillate deg å laste ned kilde kode for å inkludere
produktet i din egen greie.
>> MIKE RIZZO: Ja, og hvis vi bare klikk på index.html veldig raskt -
>> TOMAS Reimers: Du får se her er den kildekoden for nettsiden vår.
>> MIKE RIZZO: Også glemte jeg å presse høyre før med det store bordet det
inkludert, men det er også en tabell av chmods at vi inkluderte
bare for din klarhet.
Men hvis vi bla helt ned til bunnen, gjorde vi faktisk ikke gjøre veldig
mye med Javascript ting i det hele tatt med dette.
Det er utelukkende fra alt annet som vi hadde.
>> Så takk til dere for å komme og lytter.
Vi håper dette var virkelig nyttig.
Hvis du har noen Java relatert spørsmål eller bare ønsker å snakke om
hva annet som hva andre kule ting du kan gjøre med Javascript, vil vi gjerne
å snakke med deg.
>> TOMAS Reimers: Hvis du har et spørsmål om prosjektet eller om dette kan være
relevant, vil vi trolig holde seg i nærheten litt etter dette.
Men annet enn det, har en god helg.
>> MIKE RIZZO: Yeah, nyte.
Se dere.
>> TOMAS Reimers: See ya.