>> TOMAS REIMERS: Hallo, iedereen.
Mijn naam is Tomas Reimers.
>> MIKE RIZZO: En ik ben Mike Rizzo.
>> TOMAS REIMERS: Wij zijn twee van CS50s TS.
En vandaag gaan we wat leidt het seminar over JavaScript en CSS voor web apps.
Als u wilt om mee te volgen, de link is daar.
En wil je het omhoog zetten de computer even?
>> Er is de link.
Het is een kleine site, die links naar heeft alle middelen die we gaan zijn
wijst u vandaag en heeft ook veel nuttige informatie geschreven door ons te
lees meer in de diepte als je teruggaat, en je probeert te herinneren wat
hebben we precies zeggen, wat je was het over, et cetera.
>> MIKE RIZZO: Oke.
Dus laten we beginnen.
>> TOMAS REIMERS: Dus je wilt beginnen?
OK.
>> MIKE RIZZO: Yeah.
Daarom wilden we eerst beginnen met een brede overzicht over het internet en
bestandstypen bij het ontwerpen van websites.
Hoewel deze presentatie willen we krijgen in in JavaScript erg veel
later, wilden we om te beginnen met net, soort van, zoals eye view van een vogel
van wat een website is en hoe na te denken over het ontwerpen van een
website voor de start.
>> Dus jullie, op dit moment - met het zijnde vrijdagavond - zou moeten hebben
uw CS50 financiën ingediend probleem stelt.
Hopelijk, dat was een goede smaak van wat web programmeren kan zijn.
Maar hier willen we, soort, geven u een andere smaak, als goed.
>> TOMAS REIMERS: Dus gewoon om wat samen te vatten gebeurt, wanneer u typt in uw URL naar
uw webbrowser, die URL krijgt opgezocht in de computer.
En uw computer aangesloten een andere computer,
welke hosts die website.
OK, dus als je naar google.com, je bent aangesloten op een van Google's
computers, die over de bestanden voor google.com.
>> Het vraagt ​​dan om een ​​specifiek bestand.
Dus als je naar -
Ik weet het niet -
example.com / index.html of / test.html, je gaat om te vragen om
dat specifieke bestand.
En de webserver gaan om het terug aan u.
>> Dan, als je door dat bestand -
zodra je computer krijgt dat file - het gaat om te beginnen
naar een webpagina te bouwen.
Dus nu is het HTML-bestand, dat is een soort als de
structuur van de webpagina.
Het HTML-bestand kan ook verwijzen CSS-bestanden, die het definiëren
stijl van de webpagina.
>> JavaScript-bestanden, die bepaalt interactie met de webpagina.
Beeldbestanden die net beelden zijn.
En eventueel verwijzen naar andere HTML-bestanden, die u vervolgens bezoekt.
>> MIKE RIZZO: OK, geweldig.
Dus jullie hebben allemaal, misschien, nauwgezet opzetten van uw lokale host
op uw virtuele machine.
En dat alleen maar, soort, is de lokale domein dat uw computer hosts
voor u op uw eigen IP-adres.
>> Dus binnen die, dan kunt u toevoegen om het uw eigen webpagina's.
Ik bedoel, in CS50 Finance, moet u beschikken over voegde een aantal HTML-pagina's, die,
soort, verpakt in de PHP wrapper.
Maar uiteindelijk, wat uw PHP-pagina's werden het uitvoeren was HTML.
>> Maar denken terug naar het prille begin van de PSET, moesten we stellen
de machtigingen voor alles, toch?
Dus dit laat gewoon eigenlijk het ons weten die kunnen lezen, schrijven, en eventueel
telkens laten uitvoeren van de bestanden.
Dus we gaan snel een doen - hm?
>> TOMAS REIMERS: Dus we gaan om snel een demo te doen.
Dus gewoon om u te herinneren, wanneer u aansluiten op Google's computer -
wie -
en vraag om een ​​bestand, de computer eerst moet ervoor zorgen dat je bevoegd bent
om daadwerkelijk te zien dat bestand of gelezen dat file want je kunt niet gewoon vragen
voor elk bestand op die computer, toch?
Dat zou een gevaar voor de veiligheid zijn.
>> Dus bestanden op de systemen die we gebruiken, zoals deze CS50 apparaat, hebben drie
algemeen van mensen die kunnen hebben machtigingen voor iets.
De eerste is de eigenlijke eigenaar van het genoemde bestand.
De tweede is de groep die het bestand behoort.
We gaan niet te focussen te veel op dat.
En het laatste wat is, een soort van, zoals de wereld of zoals iedereen wie
niet specifiek voor dat bestand en niet hebben geen eigendomsrechten over.
>> Dus als we de eigenaar, groep, en vervolgens wereld.
En voor elk van deze groepen, je kan een van de drie machtigingen,
OK of meerdere daarvan.
U kunt leesrechten hebben.
U kunt juiste rechten hebben.
En je kunt uitvoeren permissies.
>> Dus in termen van de werkelijke bestandstypen, lezen toestemming is als het werkelijk te lezen
de inhoud van het bestand.
Een recht toestemming schrijft het genoemde bestand.
Een execute permissie loopt de bestand zoals je doet als je een van de run
uw CS50 projecten.
>> Dus als we denken over bestanden zoals wanneer we nodig hebben om een ​​HTML lezen
bestand, dat moet wereld leesbare, toch?
Vermoedelijk ook de eigenaar wil kunnen die bestand.
Dus de eigenaar gaat nodig hebben lezen en schrijven permissies.
Ze hebben niet echt nodig uitvoeren.
>> Groep, gaan we behandelen de hetzelfde als de wereld nu.
Dus moeten ze leesrechten.
Maar ze hebben geen schrijfrechten nodig of uitvoer rechten.
En nu, als we terugdenken aan de voormalige PSETs, wat wij realiseren is dit soort
van kijken als binaire, toch?
1 staat voor ja.
0 voor nee.
En we kunnen eigenlijk vertalen deze naar binair.
>> Dus 110 in binair zou 6.
100 zou 4.
Zelfde met wereld.
Dus het nummer dat u zou krijgen voor de toestemmingen hiervoor zou zijn 644.
>> MIKE RIZZO: En als je terugdenkt aan als je iets CHMOD, geloof ik
zij gaven in het probleem te stellen de voorbeeld van waar je zou kunnen doen
iets als chmod 644 en vervolgens de bestandsnaam.
De 644 dan kun je nu direct zien waar dat vandaan komt.
Dus hopelijk dat maakt dat een beetje meer duidelijk.
>> En dan voor de duidelijkheid je kerel -
oh ja, hier is dit weer.
Dus 600 dan zou gewoon het voorbeeld zijn we gaven hier waar de eigenaar heeft
lezen en juiste rechten terwijl groep en wereld geen machtigingen
toegang tot het bestand.
>> TOMAS REIMERS: En dan hebben we een snelle lijst van veel voorkomende toestemmingen.
Dus directories, je wilt daadwerkelijk chmod 711.
Quick opzij - voor een map te hebben uitvoerbare toestemming betekent om te kunnen
naar de directory te openen.
Afbeeldingen, CSS, JavaScript, HTML behoeften 644 omdat, in principe, de wereld
behoeften leesrechten.
>> En PHP, die jullie hebben gezien hoewel we niet zullen praten over het
strikt wordt doorgaans CHMOD met toestemming 600 omdat het lopen met
de rechten van de eigenaar.
Althans op het apparaat.
>> MIKE RIZZO: Dus als je niet specifiek specificeren welk type bestand
je wilt in het daadwerkelijk opzetten up deze presentatie -
we hadden een probleem met dit omdat alles was niet goed CHMOD -
je gaat, soort van, een te krijgen verboden fout die de website
niet daadwerkelijk toestemming hebben om toegang te krijgen wat file
u het wilt openen.
En natuurlijk kan dat worden opgelost - zoals in probleem set - door het veranderen
permissies gepast.
>> TOMAS REIMERS: En de laatste opmerking voor snel lokale ontwikkeling is - we
bracht dit, maar we wilden gewoon om het weer op te brengen -
als je vraagt ​​om een ​​server - zo lokale host, bijvoorbeeld, com of wat dan ook. -
en je hoeft niet een bepaald bestand op te geven, het bestand dat uw computer gaat
te vragen voor heet index.HTML.
Of als dat niet bestaat, index.PHP.
>> Cool.
Dus dat is gewoon een samenvatting van alles, hopelijk dat we hebben behandeld in
sectie, en lezingen, en tot nu toe in CS50.
En nu gaan we beginnen te praten over specifiek bibliotheken.
JavaScript en CSS-bibliotheken voor web apps.
>> Dus een snelle reden waarom we bibliotheken is het programmeren -
er is een hoop problemen in programmering, die blijven opduiken
opnieuw, en opnieuw, en opnieuw.
U zult merken dat veel websites hebben de mogelijkheid om drop-down hebben
menu's, bijvoorbeeld, of het vermogen nodig een zeer standaard knop hebben
stijl, die niet mogen worden de makkelijkste.
Nu dat je begint te krijgen in HTML, u beseffen dat knopen kan eigenlijk
ziet er echt lelijk als je doen niets.
>> Dus veel mensen hebben geschreven genoemd bibliotheken.
En in deze context, zijn ze ook wel kaders.
We gaan gebruik maken van de twee door elkaar.
En wat ze zijn, is dat ze in principe premade stukjes code -
ofwel CSS of JavaScript -
dat weg te nemen een groot deel van de team heb je in de codering.
>> Dus ze vooraf definiëren een heleboel klassen of pre-definiëren een heleboel functies voor
Geval JavaScript, die u kunt bellen later.
En dan kun je, soort van, krijgen toegang tot deze code zonder
iets te hoeven doen.
Een voorbeeld van de bibliotheek was CS50.H. Dat was een bibliotheek gaven we aan u terug
in week een, waardoor je te doen dat soort dingen getInt en GetString
zonder schrijven elke code zelf.
>> MIKE RIZZO: Oke.
Dus hier, net alsof we moesten omvatten in onze c-bestanden de verschillende
bibliotheken, we ook moeten opnemen in onze HTML-bestanden verschillende bibliotheken.
Bijvoorbeeld, als we wilden onder een specifiek JavaScript-bibliotheek hier,
misschien, een die we hebben geschreven onszelf als het is lokaal gehoste
riep script.js we gewoon Gebruik deze notatie.
>> Dus hebben we script type gelijken JavaScript bron gelijken
JavaScript.js.
En als je terugdenkt aan je CS50 financiën probleem stellen, als je keek in
header.php in de map templates, je moet gezien hebben
Enkele van deze.
Dus dit eerste - de scripts -
is inclusief een JavaScript-bibliotheek.
Waaronder een CSS bibliotheek een beetje anders.
>> Hier, in plaats van het script tag die u nodig hebt op de link tag.
En dan, het type tekst CSS is een beetje anders.
Je hoeft niet altijd te bevatten rel style sheet.
Maar ik denk dat het, in het algemeen, goede praktijken.
>> En dan eindelijk, de HREF, die u zag waarschijnlijk in uw ATAGs voor het koppelen
in verschillende schakels gewoon specificeert de link van waar te vinden dat.
Bijvoorbeeld, als we wilden een koppeling andere bibliotheek - laten we zeggen -
die woonde op styles.css.
En we wilden koppelen dat in dat gehost op het web, zouden we dat begrepen.
En dan plakken in wat we hebben hier plaats.
>> TOMAS REIMERS: OK, hopelijk u jongens zijn al vertrouwd
met hoe je CSS koppelen.
Je moest dat op doen uw laatste bruine set.
JavaScript, sommigen van jullie misschien enige ervaring met.
Sommigen van u niet.
>> Dus voor nu, weten dat een JavaScript-bestand is heel erg als een CSS-bestand in
de zin dat je kunt koppelen aan het of dat je het kan ook intern.
En het laat je script dingen.
En we gaan u door een beetje JavaScript later.
>> Dus met behulp van een bibliotheek -
als je eenmaal hebt opgenomen, het is zo simpel als letterlijk het aanroepen van de
functies hetzij het class namen aan.
Het laatste wat we willen praten over in termen van de bibliotheek -
en dit is meer een technische nota -
is open source licenties.
Dus als u deze werkelijke bibliotheken, denkt u misschien van
Vragen als is het OK dat ik ben gewoon gebruik van de code van iemand anders, in het bijzonder
want dat is iets wat we heel erg zei dat je niet doen in deze cursus.
>> Dus in het geval van open source licenties, veel ontwikkelaars -
als ze eenmaal een bibliotheek hebt geschreven, die zij denken zouden kunnen zijn
nuttig zijn om andere mensen -
zal naar het web publiceren en geef het een licentie.
En een licentie in feite zegt Ik ben hierbij het verlenen van toestemming aan andere
mensen naar dit stukje software te gebruiken de volgende soort
bepalingen.
>> We hebben een link naar een goede site om opgenomen helpen de licenties in te begrijpen
hoofdletter je in hen.
Gemeenschappelijke bepalingen hebben zijn zaken als u bent welkom om mijn bibliotheek te gebruiken zijn zo
Zolang je me krediet.
U bent welkom om mijn bibliotheek te gebruiken zolang als het kapot
je me niet kwalijk nemen.
U bent welkom om mijn bibliotheek te gebruiken zo lang als je het niet gebruiken om geld te verdienen
voor jezelf.
Dit zijn soorten voorkomende bepalingen.
>> Voor deze CS50 afstudeerproject, ze niet super relevant omdat
de projecten die jullie gebruiken waarschijnlijk eerder, soort, bekend.
Maar als je daadwerkelijk uit te gaan in de wereld en begin met behulp van bibliotheken, die
al dan niet ook worden geïmplementeerd een aantal van de meer populaire we
gaan door te gaan.
Het is goed om te kunnen begrijpen deze licenties en
begrijpen wat ze bedoelen.
En gaan terug.
>> MIKE RIZZO: OK.
Dus nu verplaatsen naar voorbeelden daadwerkelijk CSS.
Op dit punt tot nu toe, zou je niet hebben dit ondervonden.
Maar je zou kunnen hebben ondervonden bij uw dagelijks leven waar iets
dat ziet er een manier op een browser misschien niet hetzelfde uitzien
manier in een andere browser.
>> Dit is de browser browser heet compatibiliteit.
En steeds is het steeds meer en meer een probleem, vooral omdat
browsers nemen meer en meer vrijheden om dingen uit te voeren als ze willen.
Dus om te overwinnen, dat er eigenlijk een grote bibliotheek genaamd Normalize.CSS.
>> TOMAS REIMERS: We begrepen de link.
Op dit punt, is het handig als heb je je laptop daar
kijken naar de locatie.
En we geven dit aan u rechts nu simpelweg omdat de CS50 finale
project daadwerkelijk gaat u vragen om het uit te voeren
gelijk en door browsers.
>> Dus gewoon in de achterkant van je houden hoofd, is dit een prachtige bibliotheek
want het zal, soort van, standaardiseren dingen.
In Firefox kan iets laten zien als een pixel naar links.
En dan kan Chrome eigenlijk besluiten dat wat je bedoeld was 10 pixels
links.
En u wilt deze te standaardiseren.
Normaliseren zal eigenlijk wel echt een goede job zorgen dat uw site
ziet er hetzelfde in verschillende browsers.
>> MIKE RIZZO: Dus als we wilden gewoon klik op de link heel snel en tonen
u hoe dat eruit ziet, je kunt het downloaden via de
reus knop Download.
Of ik moedig u aan om meer te lezen door te klikken op deze link in de onderste
rechtse hoek.
>> TOMAS REIMERS: En als je echt Klik op Lees meer daar -
Klik op de bron op GitHub -
je eigenlijk zien de open source licentie op LICENSE.md daar.
En je zult hier ziet is de zeer populair MIT licentie.
Nogmaals, als u lezen via de tekst, je zult in staat zijn om het te vinden op de site
we verwezen vóór en in staat zijn om begrijpen zonder te lezen
door de juridische jargon.
>> MIKE RIZZO: OK, geweldig.
Dus dat is Normaliseren.
We wilden u dat heel snel.
Oh, heb je een vraag?
>> PUBLIEK: Dus als je het te downloaden heb je volg gewoon de code die zij hebben
onder de Download-knop?
>> TOMAS REIMERS: Ja, zo wanneer u het downloaden -
>> MIKE RIZZO: Oh, dat is een groot punt.
Dus de vraag was hoe doen we het eigenlijk downloaden?
Dus als we op de link klikken, zien we dat het eigenlijk opduikt
naar de broncode.
Dus om dit te doen, wat we konden doen is gewoon op Opslaan als.
Opslaan als en dat moet brengen een bestand.
En dan kunnen we kiezen om te besparen als normalize.CSS.
En dan zou je om het te koppelen in -
>> TOMAS REIMERS: Op dezelfde manier als je verwijzen in elk ander bestand.
En zodra je het koppelen in, wat is er veel over Normaliseren is hij in feite zal
zorgen voor al het harde werken op zich.
Wat betekent dat je niet hoeft om bepaalde categorieën toe te voegen.
>> Je hoeft niets te raar doen.
Het zal normaliseren zonder jou verder niets te doen.
Ja, je moet het nemen.
Google Chrome reageert niet.
>> Gewoon een snel terzijde -
Ik merkte dat we sprongen in deze.
De rest van deze presentatie is gaat om een ​​snel overzicht te zijn.
Een overzicht van bibliotheken.
>> Kortom, wat ze zijn.
Wat ze doen.
Hoe ze zijn nuttig.
Hoe je zou ze uit te voeren.
Als u wilt gaan kijken naar hen, volgende langs, en het lezen door
hen, Ik zou dat aanmoedigen.
>> Als alternatief, bent u welkom ook voor beginnen ze te downloaden en met
ze in een gezicht alleen maar om wat ze zien er uitzien of wat ze doen als je
uw laptop voor je.
Zo niet, welkom om u bent luisteren met ons praten.
We gaan blijven praten.
En we hebben de tijd aan het eind, hopelijk we eigenlijk krijgen in het tonen van u
wat sommige van deze bibliotheken eruit.
>> MIKE RIZZO: Cool.
Oke, dus nu laten we praten over Font Awesome.
>> TOMAS REIMERS: zo Font Awesome is een werkelijk keurige plaats, vooral voor die
onder ons die minder artistiek getalenteerd.
Het negeren van de naam Font Awesome, het geeft u een bos van icoontjes, die
zeer nuttig.
Dus een heleboel keer zul je een werktuig pictogram kunt u me een aardige x zo
dat je iets kunt sluiten.
>> Of wilt u misschien een soort van knop Bewerken met een potloodtekening als
iedereen heeft.
En dat is wanneer je leert dat tekening die iconen kunnen worden
zeer vervelend en moeilijk.
Font Awesome - als u daadwerkelijk ga naar de site -
geeft je veel iconen onder de pictogrammen boven.
Ja, gewoon de top.
Het zal u veel geven pictogrammen voor gratis.
>> Dus hier zie je we hebben dingen zoals een sterretje, bars, een bliksemschicht, een
kalender, een insect, een boek, et cetera.
Dit kan zeer nuttig zijn.
De manier waarop je dit onder andere is dat je onder letterlijk het CSS-bestand.
En nadat je de CSS-bestand opgenomen, wat u kunt doen is u maakt een
tag genaamd I. Het satands voor pictogram met de klasse FA
staat voor Font Awesome.
En dan, ongeacht de klasse je wilt.
>> Dus als ik een icoon van deze plus vierkant hier, zou ik geef
zij de categorie FA.
En dan FA koppelteken plus koppelteken plein.
>> MIKE RIZZO: Cool, OK.
>> TOMAS REIMERS: En dan, de laatste CSS bibliotheek willen we door te komen zijn we
proberen om het minimum te houden over CSS bibliotheken, omdat we beseffen het
titel van deze presentatie is JavaScript Libraries.
Maar we dachten dat we net zo goed u kennismaken met de andere bibliotheken
terwijl we aan het praten waren over bibliotheken.
>> Het is Google Web Fonts.
En wat Google Web Fonts u kunt te doen is fonts toe te voegen aan uw website,
dat is een heel gemakkelijke manier om het te maken vrij en om uw set te onderscheiden
van iedereen anders is als het een mooi lettertype of als het heeft een leuke
verzameling lettertypen.
Google Web Fonts is mooi in tegenstelling tot andere bibliotheken in de zin dat het een
echt begeleide installatieprocedure.
>> Dus als je de link volgt, is het google.com / fonts, geloof ik.
Volgt u dat, u kan je het lettertype kiezen.
U kunt kiezen aan de linkerkant van dikte, schuin, et cetera.
En dan, als je eenmaal hebt gekozen voor een, je kunt snel gebruik klikken.
Daar.
Rechtsonder in het vak.
>> En dan naar beneden scrollen.
Allereerst, ze geven je de CSS die je nodig hebt om daadwerkelijk te linken.
Het is daar.
Je kunt gewoon kopiëren en plakken die binnen
En het mooie van deze is je eigenlijk niet eens nodig om
Download het bestand.
>> Wat het gaat doen, is dat het gaat om te linken naar Google's versie van het.
Dus terug naar wat betekent dat.
Dat betekent dat wanneer een gebruiker uw bestand download -
downloadt uw HTML-pagina - uw HTML pagina gaat verwijzen naar dit bestand.
>> Zo dan, de computer gaat zien, oh, het is gehost op google.com plaats
dan op theirsite.com.
Laat me gaan vragen Google voor dat bestand.
En dan, het zal omvatten het bijna alsof het een
een deel van uw eigen site.
>> TOMAS REIMERS: Cool.
En zodra je dat onder andere, vervolgens naar opnemen in uw CSS, het geeft je
de huidige regel.
Dus je hebt de eigenschap font familie ingesteld gelijk is aan de naam van het lettertype.
>> MIKE RIZZO: OK.
Dus we zijn net klaar met CSS.
En sommigen van u zou kunnen denken, goed, we hadden wat CSS op CS50 Finance.
Maar CSS bibliotheek was bootstrap.
We eigenlijk onder Bootstrap een beetje later onder JavaScript want met
de Bootstrap CSS bibliotheek komt ook met veel JavaScript dat
Bootstrap of Twitter - die Bootstrap gemaakt -
gebruikt om al hun CSS beheren.
>> TOMAS REIMERS: Heeft iemand enig hebben vragen tot nu toe over CSS in het algemeen?
We zijn goed?
Geweldig.
>> MIKE RIZZO: Awesome.
>> TOMAS REIMERS: Dus bewegen op JavaScript.
>> MIKE RIZZO: Dus wilden we praten over jQuery om mee te beginnen.
Heeft iemand gehoord van jQuery voor of gebruikt?
Ja, een paar?
Dus als je gewoon werken met native JavaScript, vind je jezelf
het typen van een veel lange selectors veel.
Dus wat jQuery doet is het biedt een leuke verpakking voor de webbrowser
taal die kunt u gemakkelijk en manipuleren verschillende elementen
in het document object model van de webpagina of de DOM, waarvan ik denk dat
jullie hebben gehoord van in lezing op dit punt.
>> TOMAS REIMERS: Als u nog niet gehoord van of indien u niet hebt bekeken lezing
nog, het Document Object Model is eigenlijk hoe de dingen zijn vertegenwoordigd.
Dus HTML soort lijkt op een boom wanneer u daadwerkelijk trekken het uit.
Je hebt de HTML-element op de top.
U hebt het hoofd en lichaam.
>> En dan, in dat u hebben al het andere.
Dat aangeduid als de DOM -
Document Object Model.
Dus een model dat objecten vertegenwoordigt in het document is een eenvoudige manier om na te denken
daarover.
En een van de grote ding over jQuery is het maakt echt het oversteken
dat en manipuleren elementen binnen dat ongelooflijk eenvoudig.
>> Zo eenvoudig, namelijk dat de meeste JavaScript-bibliotheken of niet
meerderheid, de grote meerderheid van degenen zie je eigenlijk nodig jQuery zo
dat ze zich gewoon kunnen lopen want als je niet over jQuery, je
zou een hoop tijd te verspillen proberen te erachter te komen hoe je bepaalde selecteren
elementen en hoe je andere dingen te doen.
En de andere grote ding over jQuery is dat het cross-browser compatible.
>> Dus herinner me terug toen we zeiden dat niet alle browsers implementeren
dingen op dezelfde manier?
Dit geldt zelfs in JavaScript.
En een van de grote dingen over jQuery is dat het detecteren
browser en detecteren de geschikte methode.
>> Dus als je nodig hebt om een ​​element te selecteren, Internet Explorer zou kunnen zeggen dat je
verondersteld om op deze manier te doen.
Firefox zou kunnen zeggen dat de juiste manier is deze manier.
jQuery niet schelen.
Wanneer u jQuery vertellen om een ​​te selecteren element zal het uitzoeken hoe het is
verondersteld om het te doen binnen de browser de gebruiker is op dit moment in, en dan doen
het op die manier.
>> MIKE RIZZO: Dus laten we niet praten over het gebruik van jQuery een beetje.
Net zoals PHP, jQuery heeft een bijzondere voorliefde voor het dollar teken.
Dus je zult dat elke jQuery vinden -
nou ja, niet allemaal.
Soms kunt u de plaats van de dollar ondertekenen met het woord jQuery.
Maar over het algemeen, gewoon omdat het korter, wanneer je ziet dat jQuery
gebruikt het zal met een dollar teken.
>> Dus hier zijn we gewoon met een begin selector voor een element in de DOM.
Hier hebben we het dollar teken gevolgd door haakjes openen en vervolgens citaten.
En binnen de aanhalingstekens gaan onze selectors voor de verschillende elementen.
Net als in CSS, we selectors nodig in staat zijn om verschillende elementen te stylen
binnen de pagina.
Deze verschillende selectors vertalen precies in jQuery en JavaScript,
grotendeels.
>> Dus hier hebben we een punt foo.
Dus als je herinneren van lezing, de stip betekent gewoon de klas.
Dus we selecteren element met klasse foo.
Dus als ik ga je gang en open onze JavaScript console hier heel snel
gewoon laten zien, als ik typ de dollarteken, zien we dat het aantal
functie die omhoog komt.
En het is gewoon gedefinieerd door jQuery.
>> TOMAS REIMERS: Voor degenen onder u onbekende, de console is een hulpmiddel
binnen Chrome, waarmee u, principe, lopen JavaScript op de
huidige pagina.
Dit zul je ongelooflijk handig wanneer je eigenlijk debuggen en u
moeten zijn als, wat is de huidige waarde van enkele globale variabele of wat
is iets anders?
Het is net zoiets als GDB, met uitzondering dat je daadwerkelijk kan
elementen op de pagina te manipuleren met het in een veel eenvoudiger manier.
En ook het niet, in principe, controleer bij jou voordat het iets doet.
>> Dus dat zou GDB willen worden, ben je zeker dat u de volgende stap zijn?
De console is in het echt.
Dus als de webpagina wordt renderen en doen wat het doet, de
raad ook loopt langs het.
En u kunt toerekenen code steken in die console, die zal
worden uitgevoerd op de pagina.
>> MIKE RIZZO: Dus om de console in te voeren, Ik denk dat ik zou moeten kort
vermelden hoe dat te doen.
In de laatste problemen die je kan hebben gebruikte Chrome inspecteren element
functies of view page source -
en die zijn toegankelijk door gewoon rechts klikken op de pagina of specifieke
element en het doen ofwel inspecteren element of view page source.
We kunnen ook toegang krijgen tot de JavaScript console rechtstreeks door
kiezen inspecteren element.
Dus dan moet je gewoon op de console aan de rechterzijde.
>> Als alternatief kunt u ook gegaan naar de rechterbovenhoek,
die wordt afgesneden op dit scherm waar heeft de drie horizontale balken.
En je naar beneden gaan naar hulpmiddelen en dan JavaScript-console
hier waar kan zien -
in ieder geval op Windows -
de snelkoppeling is Controle Shift J. Dus dan als we wilden een element selecteren
binnen deze pagina, net zoals ik liet zien voordat, doen we dollarteken geopend parens
en dan citeert.
>> Een interessant ding is, in het algemeen, enkele aanhalingstekens en dubbele aanhalingstekens zijn
uitwisselbaar.
Dus veel mensen enkel gebruik gewoon aanhalingstekens omdat ze sneller te typen
dan dubbele aanhalingstekens omdat je niet moet Shift ingedrukt.
Dus ik zal gewoon dat nu doen.
>> Dus ik wil iets te kiezen met klasse.
Container, gewoon omdat ik weet dat het iets dat op onze
webpagina nu.
En ik druk op Enter.
En we kunnen zien dat het geselecteerd is.
Het toont zo omhoog dat het terug dat object.
Dus dat is een fundamentele keuze.
Als we wilden eigenlijk manipuleren, je zou hebben om iets te noemen
op deze selectie, die zullen we later krijgen in.
>> TOMAS REIMERS: Dus gewoon om te kijken naar die meer in de diepte, dit is niet anders
dan de functie oproepen die we in C. De naam van de functie hier is een
beetje raar.
Het is dollarteken.
Het is gewoon een naam van een functie.
Er is niets bijzonders aan.
>> We hebben een open haakjes.
Dan hebben we onze een argument dat in dit geval toevallig een string,
die een selector voor.
En dan hebben we onze gesloten haakjes.
Dat is het.
>> Het is niet zo enorm verschillend.
Hoewel, ziet het er heel raar.
En dat kan, een soort, een knelpunt te zijn punt voor veel mensen.
>> MIKE RIZZO: Dus op dezelfde manier, als we wilden een element dat een ID heeft selecteren,
nu willen we door te selecteren ID in plaats van klasse.
Het zou iets dergelijks waar we gewoon doen de scherpe teken voor ID.
Dus zijn we hier de selectie van alle elementen die ID bar.
>> TOMAS REIMERS: En dit verlengt.
Dat CSS uitstrekt.
Net als in CSS, kunt u alle selecteren links, die de klasse foo hebben.
Hier, het is hetzelfde.
>> Je zou a.foo doen, wat zou selecteren alle koppelingen met de klas foo.
Je kon een scherpe bar doen, wat zou selecteert u de koppeling met de ID-bar en zo
, enzovoort.
Elke CSS selector is een geldige jQuery selector.
>> MIKE RIZZO: Yeah.
OK, dus nu laten we in een klein beetje van manipulatie die we kunnen doen met
onze jQuery.
Dus jQuery heeft een bepaald type notatie waar we gewoon gebruik
een punt op het einde.
En je kunt bedenken in deze trant in C hoe we hadden verschillende constructen.
En in die structs te gaan, zou je Gebruik een punt te krijgen in hen.
>> Dit is, een soort van, iets dergelijks.
Pas nu hebben we functies binnen deze selector waarmee we kunnen bellen op.
Dus hier, het eerste voorbeeld je kunt zien is een CSS-selector.
En eigenlijk, wat dat doet is het past het eerste element CSS deze
ding dat je geselecteerd -
dit element dat u geselecteerd -
met de waarde die.
>> TOMAS REIMERS: Dus een eenvoudige vertaling van dat zou zijn als jQuery, principe,
nam gewoon foo.
En dan in CSS zei, kleur rood en dicht.
Het is hetzelfde idee.
Wat het heeft gedaan is dat het geselecteerde alle foo elementen.
En dan is het toegepast.
Soort, de eigenschap color is gelijk aan rood.
>> MIKE RIZZO: Op dezelfde manier kunnen we ook veranderen de werkelijke inhoud van wat
te zien op de HTML-code van de pagina, die is echt cool, want het betekent dat uw
webpagina's kunnen nu volledig dynamisch zijn en hoeven niet statisch te zijn
dat je uit te printen met behulp van PHP aan het begin van
de pagina wordt geladen.
Dus hier, als we wilden veranderen de eigenlijke HTML van de pagina, zouden we nu
bellen met de HTML-functie, die dan gewoon inserts wat we opgeven in
dat element dat we geselecteerd.
Dus hier zijn we selecteren element met klasse foo en dan zeggen dat het HTML
het is nu hello wereld.
>> TOMAS REIMERS: En als je erover nadenkt wat nuttige toepassingen van
deze, deze CSS een, het eerste ding dat kun je beginnen te denken over is
in termen van zelfs drop-down menu's.
Je zou kunnen beginnen om dingen zoals, doen als een gebruiker over de top deel zweeft
van een drop-down, je wilt maken het onderste deel zichtbaar.
Rechts?
>> Dus in CSS, we hebben eigenschappen om iets zichtbaar te maken.
Dingen als scherm colon none zou het onzichtbaar maken.
Weergaveblok zou het zichtbaar te maken.
Of zelfs als u wilt eenvoudiger gaan, je hebben dingen zoals zichtbaarheid gelijken
zichtbaar, en zichtbaarheid gelijk verborgen.
>> En je zou kunnen beginnen om dingen te implementeren zoals drop-down menu rechts
nadat je door de idee van hoe kunt u achterhalen wanneer deze wordt geopend,
die we door krijgt heel kort.
Maar we kunnen beginnen om te zien toepassingen van deze.
In een soortgelijke zin, als je om te proberen en uit te voeren, laten we zeggen, een praatje
motor en je wilt een beetje te maken tekstballon komen wanneer je hebt
kreeg een nieuwe bericht, als je eenmaal de nieuw bericht, kunt u een beetje te maken
tekstballon komen door het veranderen de HTML-code van de pagina, toch?
Door het toevoegen van dat extra tekstballon met de extra tekst in.
Yeah?
>> PUBLIEK: Dus je zou dit in te bedden de HTML-code in als een soort
[Onverstaanbaar]?
>> MIKE RIZZO: Juist.
Ja, we krijgen dat in een klein beetje.
Ja, het is vergelijkbaar een beetje PHP.
Niet echt vergelijkbaar.
>> Een goed onderscheid te maken is wat dit is eigenlijk het bewerken toen we bewerken
de pagina omdat het niet gaat worden het bewerken van de eigenlijke bestand dat wordt
op de server onderhouden omdat de wereld moet toestemming niet hebben
om uw bestanden te bewerken.
Dit is gewoon het bewerken van wat er op de pagina en wat er wordt binnen getoond
de browser.
Dus als je naar de pagina na het herladen, zeggen, iets verwijderen wij
zien we kunnen doen met het verwijderen gesprek dat ding zou dan weer verschijnen.
>> TOMAS REIMERS: Dus een manier om na te denken over dit is als ik de computer en
Mike is, een soort van, de server.
Wat er gaat gebeuren is dat ik ga vraagt ​​Mike, hey, kan ik een kopie van
deze webpagina?
En hij zal mij een kopie van te geven.
>> Nee, het is niet de originele ding.
Het is gewoon een kopie.
En dan het zou zijn, oh, er is hier webbrowser.
Het is duidelijk dat ik bewerk de pagina te worden als deze.
En ik ben het bewerken van uw exemplaar.
>> Maar dat is niet het uitvoeren van de werkelijke kopie.
En als ik hem opnieuw vragen Vernieuw de pagina, -
hey, ik heb nog een schoon exemplaar -
hij gaat me ander schoon exemplaar.
En dan ga ik hetzelfde doen zoals, oh, dit JS hier die zegt
deze bewerken.
En ik ga blijven doen.
>> MIKE RIZZO: Dus een echt cool ding dat je kunt doen met jQuery is
daadwerkelijk toe te voegen verschillende types van animaties aan uw pagina.
Ik weet niet of je ooit hebt gezien waar je probeert om een ​​een formulier invullen
online en je hoeft niet invullen de dingen correct.
Dus een klein ding glijdt aan de bovenkant en zegt dat je
hebben dit niet correct gedaan.
Probeer het opnieuw.
En dan is het misschien zelfs alleen maar omhoog schuiven.
>> Blijkt jQuery heeft ingebouwde functies die maken dat alles
animatie echt, echt makkelijk.
Er is dus eerst de fade out functie, die
u kunt bellen op iets.
En het is een manier om de CSS van veranderen dat element in een geanimeerde manier.
Dus het duurt wat element jullie noemen het fade-out op.
En dan, verandert langzaam het is dekking totdat gaat volledig transparant.
>> TOMAS REIMERS: De andere populaire wordt naar beneden glijden, die zorgt ervoor
iets lijken door het omlaag te schuiven.
Dus in het geval van het drop-down menu, weer, toen we geleerd hoe op te sporen
wanneer dit is zweefde boven, je kon gewoon vertellen deze bottom
deel schuift nu naar beneden.
En dan lijkt het erop door naar beneden glijden.
>> MIKE RIZZO: En dan, als je gewoon een soort van animatie in het achterhoofd dat
jQuery niet noodzakelijkerwijs.
Bijvoorbeeld, laten we zeggen jQuery doet u voorzien van een glijbaan
omlaag en omhoog schuiven.
Nou, laten we zeggen dat je wilde schuiven iets van links of van
de juiste soort als de CS50 hoofdpagina doet wanneer
je naar een nieuw paneel.
Je zou dan waarschijnlijk moeten zelf uit te voeren met behulp van de
animeren functie binnen jQuery.
>> Zo ook is, je gewoon animeren.
En dan, binnen het duurt een woordenboek van de verschillende waarden
dat je zou moeten passeren.
Dus hier, als we wilden animeren de element foo zodat de breedte of
uitzet of krimpt naar 80 pixels, afhankelijk van wat het nu is.
We zouden net voorbij dat als het argument binnen het.
>> Animeren ook een aantal andere argumenten dat je het kon overgaan, bijvoorbeeld
de snelheid van de animatie dat u wilt geven.
En om dat te doen, zou ik zeggen snel Google jQuery animeren.
En dan, de opvoeding van deze pagina, kunt u zie het heeft een heleboel verschillende
eigenschappen die je het kunt doorgeven.
>> En ik moedig u - wanneer u komt over iets dat je niet
kennen of gewoon meer wilt weten over een leren specifieke methode die u kunt bellen
op iets -
gewoon Google het. jQuery is uiterst goed gedocumenteerd.
En vaak zijn er een heleboel voorbeelden die zij voor u verzorgen.
Als we scroll naar beneden -
weg naar beneden -
die we kunnen gebruiken, als goed.
>> Ook wanneer een ontwikkelaar daadwerkelijk gaat de moeite van het schrijven van een
bibliotheek, ze meestal willen iemand om het te gebruiken.
Dus naast gaat zijn een documentatiecentrum.
En die documentatie kan meestal worden vinden op de project pagina, die is
waarom wij u gegeven dat de oorspronkelijke site in het begin, die u verbindt met de
project pagina's, zodat u kunt zien dat de documentatie.
>> Typisch, de project pagina in het geval van [onverstaanbaar], het geeft je de verteld
namen van de klassen.
Bij JavaScript, geeft de naam van de functies.
By the way, als we omhoog naar de top, een snelle kanttekening over de functies is
wanneer u een functie geïmplementeerd zien als dit met de harde
haakjes in het midden, dat betekent dat die eigenschap is optioneel.
Slechts een hoofd.
Ik heb een heleboel vragen gezien daarover.
>> Dus hier kunnen we zien dat de bezielde neemt eigenschappen
als noodzakelijke argument.
En al het andere is optioneel.
Side note -
kunt u denken aan deze, soort van, zoals man-pagina's.
Man pages zijn documentatie voor C en voor een heleboel andere dingen, als goed.
>> MIKE RIZZO: Dus we hebben geleerd hoe te veranderen verschillende CSS op de pagina,
animeren, en verwijderen toevoegen HTML.
Maar een van de echt meest krachtige dingen over JavaScript
en vooral jQuery -
wat kun je doen is reageren op verschillende elementen die gebeuren.
Zo, hier hebben we een event handler.
En dat betekent alleen wanneer deze gebeurtenis plaatsvindt, behandelen we het in een
bepaalde manier.
>> Dus hier, de generieke jQuery evenement handler is de stip op.
En dan, het eerste wat je bedoeld is welke gebeurtenis het zou moeten
luisteren voor.
Dus hier, het is de klik die we wachten.
>> TOMAS REIMERS: Of je hebt bij aanwijzen, dat is een zeer populair is.
Dus terug naar mijn drop down menu idee.
Je zou de top een bij aanwijzen hebben.
En dan kun je dat veranderen.
>> MIKE RIZZO: Juist.
En dan, wanneer dat gebeurt, het is gewoon voert deze functie die we geven
als argument en dat waarschuwt hallo of hoi.
>> TOMAS REIMERS: Dus in het geval van JavaScript, is dit een plaats waar we moeten
onszelf te verwijderen uit C. We kunnen eigenlijk neem functies als argumenten.
En er zijn een heleboel echt complexe manieren om dit te doen.
We gaan op een manier te bevorderen, die u kunt definiëren de
functioneren daar.
>> Dus als je vraagt ​​voor een functie als een parameter, je eigenlijk bent gewoon
naar de functie te definiëren ter plaatse.
En de manier waarop u een functie definiëren in JavaScript is u
functie letterlijk zeggen.
Vervolgens, meestal, de naam van de functie.
Maar we gaan nooit verwijzen opnieuw deze functie.
Dus laten we het naamloos.
>> Dan haakjes dan de gekrulde bretels, en vervolgens de code in die.
Dus we begrijpen dit blikje een beetje verwarrend.
Dus geven wij u de algemene vorm van wat een event handler ziet er als
hieronder, die op gebeurtenissen.
En dan, uw code in die.
>> MIKE RIZZO: Zijn er vragen over dit?
Dit kan een beetje verwarrend de eerste keer dat je het ziet.
>> TOMAS REIMERS: U wilt eigenlijk het openen van een bestand en ze te laten zien wat
jQuery op dit moment?
>> MIKE RIZZO: Ja, laten we dat doen.
OK.
>> TOMAS REIMERS: Dus nu zijn we in het toestel.
En wat we hebben gedaan is dat we hebben genomen de vrijheid van het creëren van zowel een index.html
file, die links naar een JavaScript-bestand.
En kunnen we het openstellen van de -
ja.
Nou, het doet twee dingen.
>> De eerste is het linkt aan het bestand webbrowser.
En we zullen zien dat hier.
We zien dat in het hoofd van de HTML-document, in het bijzonder.
Dus je zult daar zien dat we, in principe, zeggen SRC,
staat voor bron.
En dat is de URL.
>> Dus hier kun je zeggen dat we Inclusief jQuery.
En we hebben ook scripts.
De andere manier om JavaScript behoren is dat u kunt beschikken over een inline script
tag zoals we bij de bodem, waar het zegt script type is tekst webbrowser.
>> Dus we zeggen, luister, we zijn ongeveer om een ​​script toe te voegen.
En het soort dat script JavaScript, dat is een soort van tekst.
Heel simpel.
>> MIKE RIZZO: Dus dit, soort, krijgt je vraag over hoe we behoren
JavaScript in onze bestanden, want als we hadden PHP, we zoiets doen.
En dan hebben onze PHP-functies - laten we zeggen dat de voorraden doen
iets met dat -
gaat daar.
Maar nu hebben we de script-tags dat we geven, die eigenlijk
deel van de HTML zelf, want het is niet faken dat een HTML-bestand als het
is in PHP, want als je ook daadwerkelijk te gaan in en kijken naar de bron van de pagina,
u zult deze script-tags zien daar met de JavaScript in verband met
ze in die.
>> Zo dan, als we wilden schrijf een aantal JavaScript -
laten we gewoon zeggen dat we wilden lichaam te veranderen want nu heb ik niet
alle andere tags die ik kan echt bewerken naast lichaam.
Laten we zeggen dat ik wilde wijzigt de CSS van dat.
Dus we zullen verder gaan en verandering de kleur ervan naar rood.
>> Dus ik sla het bestand op.
Laten we teruggaan naar onze website te gaan, vernieuwen, en het doet het automatisch
want het leek niet alsof hij wachtte helemaal omdat we niet luisteren
voor een evenement of iets dergelijks.
>> TOMAS REIMERS: Dus als we terug gaan naar die dossier in het bijzonder - de HTML
file - wat je gaat om te zien is dat we hebben -
vergeet niet dat deze is geladen, soort, chronologisch.
Dus hebben we eerst het hoofd. laadt deze twee bestanden.
Dan gaan we naar het lichaam.
En we zien hello wereld.
Dus maken we hello wereld.
>> En dan is het laatste wat we hebben is hebben we de script-tag.
Het loopt zo de script-tag, want het is het niet te vertellen om te wachten op iets.
En dat is de meest elementaire manier om JavaScript uit te voeren.
>> Met dat gezegd, kan je het script tag in de header net
om dit punt te laten zien?
En lopen dat.
We gaan merken dat het heeft de kleur veranderen.
Dit is een van de problemen van Javascript is dat de dingen zijn geladen
in een chronologische volgorde.
>> Dus op het moment dat die code liep, hebben we gekozen -
ga terug -
de body-tag.
De body-tag bestaat nog niet omdat Javascript is in lijn met HTML.
Dus de browser is net als select lichaam.
Er is niet zoiets nog.
Dus we kunnen negeren.
En we blijven gaan.
>> En dan bepalen we een body-tag.
Maar dat wordt nooit bijgewerkt.
Dus als je de uitvoering script -tags, zorg ervoor dat je plaatst
na de body-tag.
Volgende dia.
>> MIKE RIZZO: OK.
Dus hebben we iets veranderd.
Maar het zag er niet uit alsof het gereageerd op ons helemaal omdat het gewoon een soort van
deed het zodra het laden van de pagina.
Nu, in plaats van dit te doen, waarom doen we niet toevoegen een event handler.
>> Dus laten we iets doen het lichaam weer.
En laten we zeggen dat we doen het op -
klik.
We zullen een functie toe te voegen.
>> Verandering Let's: TOMAS REIMERS het is de kleur rood weer.
Waarom niet?
>> MIKE RIZZO: Ja, laten we verandering haar 'kleur weer rood.
Oke.
Dus laten we de pagina geladen is.
OK, zien we -
zoals verwacht, niet rood nog draaien.
Maar dan kunnen we verder gaan en klik erop.
>> TOMAS REIMERS: En het maakt rood.
>> MIKE RIZZO: En het doet rood zoals verwacht.
>> TOMAS REIMERS: En we kunnen zien hoe we kunnen beginnen met bouwen zeer basic
interactie.
Andere dingen die we zouden willen doen is, als we niet willen het lichaam te maken
Kleur rood, laten we de HTML achtergrond kleur rood.
Net zo is het hetzelfde CSS.
>> En als we veranderen, kunnen we dit zien zeer dramatisch effect van het veranderen van de
hele pagina.
Dus nogmaals, als je de uitvoering van dingen, U kunt een component hebben
die is bedoeld om te worden geklikt.
Laten we zeggen dat een Exit-knop en een hele andere component,
die bedoeld is om te reageren.
Dus je zou een raam te verwijderen wanneer dat gebeurt.
>> MIKE RIZZO: OK.
Net als een voorbeeld -
je niet krijgen om dit eerder te zien -
Ik zal even laten zien hoe het eruit leuk als we iets te verbergen.
Dus ik zal doorgaan en niet omhoog schuiven.
>> TOMAS REIMERS: Wil wikkel deze in Type paragraaf voordat we dat doen?
>> MIKE RIZZO: OK.
Ja, waarom niet wij doen dat net zo we kunnen het selecteren een beetje meer.
>> TOMAS REIMERS: En laten we geef het een klasse.
>> MIKE RIZZO: Yeah.
OK, dus laten we zien.
In plaats van het selecteren van het eigenlijke lichaam nu, ik zal gewoon alles selecteren met
klasse hello, die we hier gewoon een ding.
Dus moeten we niet te zorgen over.
>> Dus ik zal het vernieuwen.
Ik zal doorgaan en klik erop.
En het, soort van, deed een vreemde dia up ding, dat zag er niet zo
aantrekkelijk.
Over het algemeen zien ze er vrij aardig.
Ik denk dat dit - voor sommige reden dan ook - niet.
Ik zal gewoon een fade out, zodat ook u kunt kijken.
Veel mooier.
>> En dan, als ik open de webbrowser troosten weer en we willen zien wat
het lijkt erop dat als we verdwijnen in het stopcontact
Nu, ik bel vervagen op.
En het vervaagt opnieuw
>> Op dezelfde manier kunnen we eigenlijk ook doorgeven een argument om in te faden of fade-out,
die, soort, de snelheid ervan.
Dus laten we verder gaan en zeggen dat we willen het langzaam gaan vervagen inch
Dus ik denk dat het nog steeds leek vrij snel.
Maar het was trager dan voorheen.
>> TOMAS REIMERS: En als je wilt weten Meer informatie over deze dingen, nogmaals,
gewoon naar de jQuery documentatie, die wij je hebt gegeven, en lees
door deze.
Ze beschrijven hun functies ongelooflijk goed.
>> MIKE RIZZO: OK.
Dus ik denk dat laten we terugkeren naar deze te gaan.
En we kunnen praten over onze laatste pagina.
Nou, we kunnen eindigen met Bootstrap.
En dan zullen we het te openen voor een aantal vragen.
En als jullie nog ideeën die je wilt proberen om te gooien en te zien
als we ze kunnen implementeren met JavaScript snel.
>> Dus echt snel over Bootstrap, die werd automatisch opgenomen in
uw laatste probleem in de map CSS en eigenlijk gekoppeld aan uw
header.php.
Dus kon je lessen hebt toegevoegd dat gedefinieerd in Bootstrap aan.
En het zou automatisch hebben vormgegeven die dingen dienovereenkomstig.
>> TOMAS REIMERS: Dus Bootstrap is een zeer magische ding ontwikkeld door de mensen
bij Twitter.
En wat het moest doen was -
voor websites waren echt moeilijk te maken zien er leuk uit, vooral wanneer we hadden
veel gemeenschappelijke componenten.
Dus veel knoppen op de web zag er hetzelfde uit.
>> Veel tekstgebieden kunnen worden gemaakt er beter uitzien dan de standaard tekst
veld weet je waarschijnlijk van echt oude websites of echt slecht gemaakt
websites, die net uitzien als letterlijke tekstvakken zonder afkomstig van
schaduw of enige vorm van mooie schets.
Dus wat Bootstrap deed was het zei, goed, we hebben veel gemeen stijlen.
Waarom gaan we niet maken een gemeenschappelijk pakket van CSS en een gemeenschappelijke set van JavaScript als
goed, wat kan stylen zoals is en welke kunnen mensen dingen zoals drop geven
down menu's, kunnen die mensen geven dingen als hulpwerkwoorden.
>> Modal is wat verschijnt op de pagina wanneer het is strikt genomen
iets, die verder remt interactie tot u
interactie met het.
Zoiets als dit is, weet je het zeker U wilt dit ding verwijderen?
Je kunt niet echt iets anders te doen totdat je ja of nee zeggen.
>> Het duurde dit alles en het verpakte het elkaar en zei, hier gaan we.
Mensen kunnen nu gebruik maken van deze.
En je kunt het vinden op bij getbootstrap.com.
Het werd automatisch opgenomen in uw laatste probleem te stellen.
En je meer dan welkom bent om gebruik het op uw uiteindelijke project.
En als je wilt volgen dat verwijzen naar Bootstrap krijgen.
>> Je zult hier ziet is de Bootstrap CSS website.
Je zult zien Bootstrap.
En als je naar beneden scrollt, zie je hoe te downloaden, hoe te
installeren, et cetera.
>> MIKE RIZZO: En dat kan ook, interessant genoeg, pas het aan
worden wat voor soort thema's die je wilt.
Ik weet dat is iets wat ik deed voor mijn afstudeerproject toen ik de klas
werd pas het aan.
Een andere versie van Bootstrap dat had een ander kleurenschema en
verschillende vormen van enkele verschillende dingen.
Dus moedig ik u om te spelen met dat.
Het is wel leuk om te doen.
>> TOMAS REIMERS: Kijkend over de top nogmaals, het is zeer vergelijkbaar met de Font
Ontzagwekkende plaats.
Er is veel documentatie zal beginnen te lijken vergelijkbaar wanneer je hebt
gezien genoeg van.
Dus hier hebben we de CSS onderdeel.
En je zult zien hoe het dingen kunnen stylen.
Dus als u klikt op de tafels, bijvoorbeeld, kunt u direct maken van een
tafel vrij door simpelweg het toevoegen de klasse tafel aan.
>> Dezelfde dingen voor knoppen.
Als je gewoon voeg de klasse BTN en BTN standaard of BTN primaire, kunt u
krijgt een van deze knoppen met deze pre-gemaakte stijlen.
En dan, als je op zoek bent naar iets complexer dan alleen
restyling wat w al hebben, dan op het tabblad JavaScript aan de bovenkant we
heb een heleboel onderdelen.
>> Dus hier hebben we overgangen, hulpwerkwoorden, dropdowns, tabs en tooltips.
Een tooltip is wat opduikt onder uw muis wanneer u de muisaanwijzer op iets.
Popovers, waarschuwingen, knoppen, inklapbaar accordeons is wat
ze meestal genoemd.
Carrousels, die flip door middel van beelden.
>> Dus dat zijn de componenten van Bootstrap.
Ik wil u aanmoedigen om zeer gaan kijken naar hen.
Er is een component JavaScript en CSS component.
Voel je vrij om ze te gebruiken als je wil.
We gaan niet te veel gaan in hen omdat wij vinden de documentatie
is echt goed gedaan.
En ja.
Heeft u nog vragen over?
>> MIKE RIZZO: Dus als een echt snelle kant, het ontwerp van deze webpagina die
we snel samen voor deze presentatie is
eigenlijk gedaan met behulp van Bootstrap.
Zoals je kunt zien, als we op deze verschillende tabbladen, we zijn eigenlijk nooit
het verlaten van deze huidige index.html pagina.
Dus wat we hebben is anders divs binnen deze index.html.
En dan, wanneer we op een ander tabblad, het is gewoon het veranderen
die iemands tonen.
>> Dus dienovereenkomstig plaatst hen verandert de HTML van de pagina, zodat
het huidige tabblad wordt gemarkeerd als actief dus het anders en ziet er verschijnt
echt leuk.
>> TOMAS REIMERS: Dus dat was allemaal gedaan zonder ons te schrijven bijna elke CSS.
We zien ook een header aan de bovenkant, waarin de kleuren zijn door ons.
Maar de werkelijke zetten het op de boven aan de pagina en het maken van
Het scroll was Bootstrap.
En dan nog voor een andere bibliotheek - dit is er niet een die we over gesproken, maar een
U kunt Google als u wilt.
Dit heet prettify.js.
En het zal syntax highlight uw code voor u met behulp van zowel CSS en JavaScript.
>> Het laatste wat we willen praten over voordat we bevrijd je uit in de
wereld te kijken naar bibliotheken om erachter te komen hoe ze te gebruiken en, hopelijk,
Lees documentatie en vinden wat je behoefte is hoe bibliotheken te vinden.
Dus de eerste is dat we gewoon gaat duwen Google.
Ga naar Google.
>> Dat is letterlijk wat we doen als we moeten iets doen is dat we Google.
Is er een JavaScript-bibliotheek die staat me toe om tijd te manipuleren in een
handige manier?
Dus als ik weet dat sommige gebruiker creëren hier een account, en dit is de
huidige tijd, hoe kan ik het berekenen van de verschil dat hoeft
bereken het zelf?
Dus dit is eigenlijk een gemeenschappelijke zaak, JavaScript tijd bibliotheek.
En hier zijn we Moment.js-- de meest populaire.
>> Als we behoefte aan een bibliotheek te manipuleren zoiets als kleur kunnen
het genereren van een aantal willekeurige kleuren -
eventueel, voor het genereren van stijl of iets -
we iets zoals Google JavaScript kleur bibliotheek.
En ik weet zeker dat we zouden verschijnen met duizend en een van hen.
U bent welkom om te lezen via hen.
>> Dus de meeste dingen - als je ze vinden - gaan op een van de worden gehost
sites die gastheer code.
Ze zijn een paar populaire.
De meest populaire, door ver, is github.com.
En als je naar GitHub is het eigenlijk waar Normaliseren werd georganiseerd.
Dus als je terug wilt naar die ene gaan.
Toon hen dat.
>> MIKE RIZZO: En dat is eigenlijk waar dit is te gehost, of het je opgevallen.
>> TOMAS REIMERS: Yeah.
Dus als je over te normaliseren en ga naar de GitHub.
Waren is dat?
>> MIKE RIZZO: Dat kleine kat ding is de GitHub symbool.
>> TOMAS REIMERS: Oh.
Dus GitHub maakt gebruik van een methode genaamd Git te slaan code.
Is dat je niet weet wat dat is of het maakt je bang, dat is prima.
Je hoeft niet te weten wat Git is omdat GitHub heeft een knop Downloaden
rechts onderaan.
>> De andere nuttige ding om te weten over GitHub is de meeste producten
zal hebben een read me.
En als ze niet over een website, het lees me zal praten over hoe je
installeren, hoe je het gebruikt, wat het doet, et cetera, et cetera, et cetera.
Wat we eigenlijk geweest loopt u door.
>> MIKE RIZZO: Gestopt met Internet's.
>> TOMAS REIMERS: Dat is prima.
De laatste twee dingen die we wilden om te praten over -
We hebben gesproken over Git -
is het oplossen van problemen.
En dit is niet zo relevant voor het eindproduct is
als je weggaat 50.
En als je in de producten uitvoering van bibliotheken of uitvoering
je eigen project, je gaat vragen hebt of je bent
gaat op zoek naar vragen.
>> Nogmaals, Google het.
Dat is letterlijk wat we doen.
Dit gaat klinken dom.
Maar letterlijk, we Google het.
En nogmaals, een van de eerste dingen je meestal tegenkomen is
stackoverflow.com, dat is een prachtige vraag en antwoord zicht.
>> Het is fantastisch zowel omdat u post de vragen en zoeken naar
antwoorden, maar ook omdat het heeft al veel
vooraf ingevulde inhoud daar.
Dus meestal als je een programmeer googlen vraag binnen de eerste
echtpaar raakt u wellicht al hebt uitgevoerd in het tijdens uw probleem sets.
>> En dan, de laatste echt korte ding is JSFIDDLE, die - Vandaag hebben we
gedaan een hoop werk met JavaScript HTML CSS.
JSFIDDLE is een web app, die in feite kunt u uw HTML nemen, UW
JavaScript linksonder, en je CSS rechtsboven.
En dan kan het creëren van een snelle maken van het en zie hoe deze samenwerkt.
Het is erg handig wanneer mensen proberen om een ​​proof of concept te doen zoals
dit is hoe je zou doen een drop-down menu.
Misschien een snel bloot te leggen of wat dan ook.
>> MIKE RIZZO: Dus laten we gaan gang en klik deze.
Een korte opmerking -
dat het, voordat we doen op klik.
Blijkt JCorey Korea heeft ook een ingebouwde in click event handler die het
gebruikt alleen omdat het cijfers je bent gaat willen een heleboel dingen doen
als je iets wilt klikken.
>> Op dezelfde manier, het heeft ook een hover.
Maar om de volledige reikwijdte van krijgen degenen, kijk naar de jQuery
documentatie en doe het.
Ik heb iets stoms hier.
>> TOMAS REIMERS: Dus ik heb een echt snel programma hier, die zegt
knop op klik.
Dan hebben we een lus.
Voor i kleiner is dan 404.
Het gaat gewoon om pop-up deze waarschuwingsberichten.
>> MIKE RIZZO: En wat was het code 404 stond in HTML?
Herinnert iemand zich?
Niet gevonden, rechts.
Chrome ook toegevoegd deze keurige ding waar je kan -
>> TOMAS REIMERS: Omdat mensen zoals Mike begon dit doen veel en
vervelend gebruikers, waardoor je info te zien.
>> MIKE RIZZO: Yeah.
>> TOMAS REIMERS: Hebben we vragen over dit, over JavaScript
bibliotheken, Bibliotheken of wat web development looks
net als in de echte wereld?
We lopen tegen de tijd.
Dus ik ben niet zeker dat we gaan om tijd te implementeren hebben
tenzij het echt snel.
Zijn we goed?
>> MIKE RIZZO: Alles wat jullie willen om te zien echt snel in, zoals, twee
minuten of minder?
>> TOMAS REIMERS: Anything we kunnen verduidelijken?
Hoe om te schrijven in -
>> PUBLIEK: [onverstaanbaar]?
>> MIKE RIZZO: Ja, zo that -
>> TOMAS REIMERS: U kunt gewoon op Controle-U op de website.
>> MIKE RIZZO: Oh, ik wist niet dat.
>> TOMAS REIMERS: Ik denk, ja.
Controle-U. Yeah.
>> MIKE RIZZO: Oh, dus dat is het code voor de website.
Maar als je echt wilt downloaden onze bestanden en alles wordt gehost
op github.com
>> TOMAS REIMERS: slash mijn naam -
Tomas Reimers - slash CS50 koppelteken seminar.
>> MIKE RIZZO: En je kunt alles wat er.
>> TOMAS REIMERS: Dit is wat GitHub eruit ziet, door de manier waarop.
Dus nogmaals, als je ziet een open source project, meestal, zullen ze een stuk zijn
me daar dat je kunt lezen.
En als je terug gaat, zult u merken dat heb je de download zip, die zal
kunt u de broncode downloaden code omvatten de
product in uw eigen ding.
>> MIKE RIZZO: Ja, en als we klikt u gewoon op de index.html heel snel -
>> TOMAS REIMERS: U zult hier zien is de broncode voor onze website.
>> MIKE RIZZO: Ook, ik vergat naar rechts te duwen voordat met de grote tafel het
inbegrepen, maar er is ook een tafel van CHMOD instelling te krijgen dat we opgenomen
alleen voor uw duidelijkheid.
Maar als we scroll helemaal naar beneden naar de bodem, we hebben eigenlijk niet erg
veel met de JavaScript spul helemaal met dit.
Het is uitsluitend van alles anders dat we hadden.
>> Dus dank jullie voor jullie komst en luisteren.
We hopen dat dit was erg behulpzaam.
Als u JavaScript verwante vragen of gewoon wilt praten over
wat anders als wat andere leuke dingen je kunt doen met JavaScript, willen we graag
met je praten.
>> TOMAS REIMERS: Als u een vraag over uw project of als dit kan zijn
relevant, zullen we waarschijnlijk blijven hangen iets daarna.
Maar anders dan dat, hebben een goed weekend.
>> MIKE RIZZO: Ja, genieten.
Zie jullie.
>> TOMAS REIMERS: Tot ziens.