TOMAS Reimers: Hi, almal. My naam is Tomas Reimers. MIKE RIZZO: En ek is Mike Rizzo. TOMAS Reimers: Ons is twee van CS50s TS. En vandag is ons die leiding van die seminaar oor JavaScript en CSS vir die web programme. As jy wil volg saam, die skakel is reg daar. En jy wil om dit te sit op die rekenaar kortliks? Daar is die skakel. Dit is 'n klein werf, wat het skakels na al die hulpbronne wat ons gaan wees wys jou vandag en het ook 'n baie nuttige inligting wat geskryf is deur ons te Lees meer in diepte wanneer jy terug te gaan, en jy probeer om te onthou wat presies het ons sê, wat jy was praat, ensovoorts. MIKE RIZZO: Alle reg. So laat ons begin. TOMAS Reimers: So jy wil om te begin? OK. MIKE RIZZO: Ja. So het ons eerste wou begin met 'n breë oorsig oor die internet en lêer tipes by die ontwerp van webtuistes. Terwyl hierdie aanbieding ons wil kry in 'n baie in JavaScript veel Later, ons wou begin met net, soort van soos 'n Voëlvlug van wat 'n webwerf is en hoe na te dink oor die ontwerp van 'n webwerf vir die begin. So julle ouens, op hierdie punt - met dit synde Vrydagaand - moet jou CS50 finansies voorgelê probleem sit. Hopelik, dit was 'n goeie smaak van wat web ontwikkeling kan wees. Maar hier wil ons, soort, gee jy 'n ander smaak, as well. TOMAS Reimers: So net om te vat wat gebeur, wanneer jy tik in jou URL te jou webblaaier, wat URL kry opgekyk in die rekenaar. En jou rekenaar se verbind na 'n ander rekenaar, wat as gasheer van die webwerf. OK, so as jy gaan na google.com, is jy gekoppel aan een van Google se rekenaars, wat die lêers vir google.com. Dit vra dan vir 'n spesifieke lêer. So as jy gaan na - Ek weet nie - example.com / index.html / of test.html, jy gaan om te vra vir daardie spesifieke lêer. En die web bediener se gaan om terug te keer na jou toe. Dan, wanneer jy deur die lêer - sodra jy die rekenaar kry wat lêer - dit gaan om te begin 'n webblad te bou. So is dit nou die HTML-lêer, wat is 'n soort van soos die struktuur van die webblad. Die HTML-lêer kan ook verwys CSS lêers, wat definieer die styl van die webblad. JavaScript-lêers, wat definieer interaksie met die webblad. Beeld-lêers, wat net beelde. En moontlik verwys na ander HTML-lêers, wat jy kan dan besoek. MIKE RIZZO: OK, groot. So julle ouens het al, miskien, moeite opstel van jou plaaslike gasheer op jou virtuele masjien. En dat net, soort, is die plaaslike domein wat jou rekenaar net die gasheer vir jou op jou eie IP adres. So in daardie, dan kan jy voeg dit jou eie web bladsye. Ek bedoel, in CS50 Finansies, moet jy bygevoeg 'n paar HTML bladsye, wat is, soort, toegedraai in die PHP wikkel. Maar uiteindelik, wat jou PHP bladsye was uitdruk was HTML. Maar dink terug na die begin van die PSET, het ons te stel die regte vir alles, reg? So dit is net basies laat ons weet wat kan lees, skryf, en moontlik voer elk van die lêers. So ons gaan 'n vinnige om te doen - hm? TOMAS Reimers: So ons gaan 'n vinnige demo te doen. So net om jou te herinner, wanneer jy toegang tot Google se rekenaar - wie - en vra vir 'n lêer, die rekenaar eerste nodig om seker te maak jy gemagtig om werklik te sien dat 'n lêer of lees dat dien, want jy kan nie net vra vir 'n lêer op die rekenaar, reg? Dit sou 'n sekuriteit inhou. So lêers op die stelsels wat ons gebruik, soos hierdie CS50 toestel, het drie algemene mense wat kan regte na iets. Die eerste is die werklike eienaar van die genoemde lêer. Die tweede is die groep wat die lêer behoort. Ons gaan nie om te fokus te veel op nie. En die laaste ding is, soort van, soos die wêreld of soos almal wie se nie spesifiek na die lêer en nie enige eiendomsreg daaroor. So as ons het die eienaar, groep, en dan die wêreld. En dan, vir elk van hierdie groepe, het jy een van drie regte kan hê, OK, of verskeie van hulle. Jy kan gelees regte. Jy kan regte nie. En jy kan voer regte. Dus, in terme van die werklike lêer tipes, lees toestemming is soos eintlik lees die inhoud van die lêer. 'N Reg toestemming skriftelik te sê lêer. 'N voer toestemming loop die liasseer soos jy doen wanneer jy een van jou CS50 projekte. So wanneer ons dink oor lêers soos wanneer ons moet 'HTML te lees lêer, wat moet die wêreld te wees leesbare, reg? Vermoedelik, ook die eienaar wil in staat wees om die lêer te wysig. So het die eienaar se gaan nodig lees en skryf regte. Hulle het nie regtig nodig uitvoer. Groep, ons gaan behandel dieselfde as die wêreld vir nou. Sodat hulle nodig leesregte. Maar hulle skryf nie nodig of uit te voer regte. En nou, as ons terug dink aan die voormalige PSETs, wat ons besef, is hierdie soort van lyk soos binêre, reg? 1 staan ​​vir ja. 0 vir geen. En ons kan eintlik vertaal hierdie binêre. So 110 in binêre sou wees 6. 100 sou wees 4. Dieselfde met die wêreld. So het die nommer wat jy sou kry vir die regte vir hierdie sou wees 644. MIKE RIZZO: En as jy terugdink wanneer jy iets chmoded, ek glo hulle het in die probleem het die voorbeeld van waar jy kan doen iets soos chmod 644 en dan 'n lêer naam. Die 644 dan kan jy nou sien wat direk waar wat kom uit. So hopelik wat maak dat 'n bietjie meer duidelik. En dan vir jou man se duidelikheid - O ja, hier is dit weer. So 600 dan net sou wees om die voorbeeld Ons het hier waar die eienaar het lees en nodige regte, terwyl die groep en die wêreld nie enige regte het nie die lêer om toegang te verkry. TOMAS Reimers: En dan het ons 'n vinnige lys van algemene regte. So dopgehou, wat jy wil om werklik chmod 711. Vinnige eenkant - vir 'n gids te hê uitvoerbare toestemming beteken om in staat wees om die gids oop te maak. Beelde, CSS, JavaScript, HTML behoeftes 644, want basies, die wêreld behoeftes en regte. En PHP, wat julle gesien het alhoewel ons nie praat oor dit streng is tipies chmoded met toestemming 600, want dit is hardloop met die regte van die eienaar. Ten minste op die toestel. MIKE RIZZO: So as jy dit nie doen nie spesifiek spesifiseer watter tipe lêer jy wil in eintlik die opstel hierdie aanbieding - ons het 'n probleem met hierdie, want alles is nie korrek chmoded - jy gaan, soort van 'n te kry verbied fout wat die webwerf eintlik nie toestemming het om toegang te verkry watter lêer jy wil om dit te bekom. En natuurlik, wat kan vasgestel word - soos in die probleem gestel - deur die verandering regte gepas. TOMAS Reimers en die laaste kommentaar vinnig plaaslike ontwikkeling is - ons het hierdie, maar ons wou net om dit te bring weer - As jy vra vir 'n bediener - sodat plaaslike gasheer, byvoorbeeld com of wat ook al. - en jy hoef nie 'n spesifieke lêer spesifiseer nie, die lêer wat jou rekenaar gaan te vra, is index.html genoem. Of as dit nie bestaan ​​nie, jeug. Cool. So dit is net 'n herhaling van alles, hopelik, dat ons gedek het in artikel, en lesing, en tot dusver in CS50. En nou gaan ons begin praat oor spesifiek biblioteke. JavaScript en CSS biblioteke vir die web programme. So 'n vinnige rede hoekom ons biblioteke is om die programmering - daar is 'n baie probleme in ontwikkeling, wat hou knal weer en weer en weer. Jy mag opmerk dat baie van die webwerwe moet die vermoë druppel af het spyskaarte, byvoorbeeld, of moet die vermoë 'n baie standaard knoppie te hê styl, wat nie mag wees die maklikste ding. Nou dat jy begin om te kry in HTML, jy besef dat knoppies kan eintlik lyk regtig lelik as jy Moenie iets doen. So 'n klomp mense het geskryf genoem biblioteke. En in hierdie konteks, hulle is ook raamwerke genoem. Ons gaan om te gebruik om die twee verwissel. En wat hulle is, is hulle basies gemaakte stukke van die kode - óf CSS of JavaScript - wat weg te neem 'n baie van die Team jy het in die kodering. Sodat hulle die pre-definieer 'n klomp van die klasse of pre-definieer 'n klomp van die funksies vir JavaScript se geval, wat kan jy later bel. En dan kan jy, soort van, kry toegang tot hierdie kode sonder om iets te doen. 'N Voorbeeld van die biblioteek was CS50.H. Dit was 'n biblioteek wat ons jou gegee het terug in week een, wat toegelaat het om te doen dinge soos wat getint en GetString sonder om te skryf 'n kode self. MIKE RIZZO: Alle reg. So hier, net soos ons moes sluit in ons c lêers van die verskillende biblioteke, het ons ook moet insluit in ons HTML-lêers verskillende biblioteke. Byvoorbeeld, as ons wou in te sluit 'n spesifieke JavaScript-biblioteek hier, miskien, een wat ons geskryf onsself as dit plaaslik bedryf genoem script.js, het ons net gebruik van hierdie simbole. So het ons 'n script tipe gelykes JavaScript bron gelykes JavaScript.js. En as jy terug dink aan jou CS50 Finansies probleem gestel, as jy kyk in Header.php in die templates gids, jy moet gesien het sommige van hierdie ingesluit. So die eerste een - die skrifte - is, insluitend 'n JavaScript-biblioteek. Insluitende 'n CSS biblioteek is 'n bietjie anders. Hier, in plaas van die script Label jy die skakel tag. En dan, die teks CSS tipe is 'n bietjie anders. Jy hoef nie altyd te sluit rel styl blad. Maar ek dink dit is in die algemeen, goeie praktyk. En dan uiteindelik, die HREF, wat jy waarskynlik sien in jou ATAGs vir die koppeling in verskillende skakels net spesifiseer die skakel van waar om dit te vind nie. Byvoorbeeld, as ons wou 'n skakel verskillende biblioteek - laat ons net sê - wat geleef het by styles.css. En ons wou dit om te skakel in dit is bedryf op die web, sou ons kopieer dit. En dan plak dit in alles wat Ons het hier plaas. TOMAS Reimers: OK, Hopelik sal jy ouens is reeds bekend met hoe CSS te skakel. Jy moes dat op te doen jou laaste bruin stel. JavaScript, sommige van julle dalk het 'n paar ervaring met. Sommige van julle mag nie. So vir nou, weet dat 'n JavaScript-lêer is baie soos 'n CSS lêer in die sin dat jy kan skakel om dit of dat jy dit kan sluit intern. En dit kan jy script dinge. En ons gaan jou te loop deur 'n bietjie JavaScript later. So gebruik 'n biblioteek - sodra jy ingesluit het, is dit as eenvoudig as letterlik die roeping van die funksies of die toevoeging van die klas name om dit te. Die laaste ding wat ons wil hê om te praat oor in terme van die biblioteek - en dit is meer van 'n tegniese kennis - is open source lisensie. So wanneer jy hierdie eintlike biblioteke, jy mag dink van vrae soos is dit OK dat ek net iemand anders se kode, veral want dit is iets wat ons baie het jy dit nie doen nie in hierdie kursus. So in die geval van 'n oop bron lisensiëring, 'n baie van die ontwikkelaars - As hulle eers 'n biblioteek geskryf, wat hulle dink kan wees nuttig vir ander mense - sal dit publiseer op die web en gee dit 'n lisensie. En 'n lisensie sê basies ek hiermee toestemming verleen om ander mense hierdie stuk sagteware te gebruik met die volgende soort bepalings. Ons het ingesluit 'n skakel na 'n goeie site om te help om die lisensies in te verstaan Indien jy loop in hulle. Algemene bepalings is dinge soos jy is welkom om my biblioteek te gebruik sodat Solank as wat jy gee my krediet. Jy is welkom om my biblioteek te gebruik so lank as wat wanneer dit breek jy my blameer nie. Jy is welkom om my biblioteek so lank om te gebruik as jy dit nie gebruik nie om geld te maak vir jouself. Hierdie is vorme van gemeenskaplike bepalings. Vir hierdie CS50 finale projek, het hulle moet nie super relevant omdat die projekte wat jy ouens gebruik is waarskynlik eerder, soort van, bekend. Maar wanneer jy eintlik gaan uit in die wêreld en begin met behulp van biblioteke, wat mag of mag nie so goed geïmplementeer word as sommige van die meer populêre ons gaan word deur gaan. Dit is goed om in staat wees om te verstaan hierdie lisensies en te verstaan ​​wat hulle beteken. En gaan terug. MIKE RIZZO: OK. So nou beweeg op voorbeelde van die werklike CSS. Op hierdie punt so ver, kan jy nie teëgekom het nie. Maar jy kan teëgekom het dit in jou alledaagse lewe waar iets wat lyk een manier op 'n leser dalk nie dieselfde lyk manier in 'n ander leser. Dit is die leser leser genoem verenigbaarheid. En steeds is dit meer en steeds meer van 'n probleem, veral as implementeer om meer en meer vryhede dinge te implementeer as hulle wil. So wat oorkom, is daar eintlik 'n groot biblioteek genoem Normalize.CSS. TOMAS Reimers: Ons het die skakel. Op hierdie punt, dit is nuttig as jy het jou laptop daar op soek na die site. En ons is aan jou gee hierdie reg nou bloot omdat die CS50 finale projek is eintlik gaan vra om dit te implementeer Net so en deur blaaiers. Dus net in die agterkant van jou te hou kop, dit is 'n wonderlike biblioteek want dit sal, soort van, standardiseer dinge. In Firefox, dalk iets wys as een pixel aan die linkerkant. En dan kan Chrome eintlik besluit dat wat jy bedoel was 10 pixels aan die linkerkant. En jy wil dit te standaardiseer. Normaliseer sal eintlik 'n baie goeie werk om seker te maak dat jou site lyk dieselfde oor blaaiers. MIKE RIZZO: So as ons wou net Klik op die skakel regtig vinnig en show jy wat dit lyk, jy kan dit aflaai die gebruik van die reuse aflaai knoppie. Of ek u aanmoedig om meer te lees oor dit deur te kliek op hierdie skakel in die laer regterkantste hoek. TOMAS Reimers: En as jy eintlik Klik Lees meer reg daar - Klik op die bron op GitHub - jy eintlik sien die open source lisensie LICENSE.md reg daar. En wat jy hier sien, is die baie gewild MIT-lisensie. Weereens, as jy deur die teks lees, jy sal in staat wees om dit te vind op die webwerf verwys ons na voor en in staat wees om te verstaan ​​dit sonder om te lees deur die reg jargon. MIKE RIZZO: OK, groot. So dit is normaliseer. Ons wou jou te gee wat regtig vinnig. O ja, het jy 'n vraag? Publiek: So wanneer jy dit aflaai, jy volg net die kode wat hulle onder die knoppie aflaai? TOMAS Reimers: Ja, so wanneer jy laai - MIKE RIZZO: O, dit is 'n groot punt. So die vraag is hoe doen ons eintlik dit aflaai? So as ons op die skakel, sien ons dat dit eintlik verskyn by die bron-kode. So om dit te doen, wat ons kon nie net kliek Save As. Save As en dat indien bring 'n lêer. En dan kan ons kies om te red dit as normalize.CSS. En dan sal jy dit in te skakel - TOMAS Reimers: Die dieselfde manier waarop jy skakel in enige ander lêer. En as jy 'n skakel dit in, wat is 'n groot oor normaliseer, is dit eintlik sorg vir al die harde werk deur die self. Dit beteken dat jy nie het nie enige klasse by te voeg. Jy hoef nie iets vreemd om te doen. Dit sal normaliseer sonder jou om iets te doen verder. Ja, jy het dit in te sluit. Google Chrome is nie reageer. Net 'n vinnige eenkant - Ek het opgemerk ons ​​gespring in hierdie. Die res van hierdie aanbieding is gaan 'n vinnige oorsig te wees. 'N Opname van biblioteke. Basies, wat hulle is. Wat hulle doen. Hoe is hulle nuttig. Hoe jy dit kan implementeer. As jy wil om te begin soek na hulle, volgende saam, en deur die lees hulle het, sou ek hoogs aan te moedig nie. Alternatiewelik, is jy welkom om ook te begin om hulle af te laai en met hulle in 'n gesig net wat hulle te sien lyk of wat hulle doen as jy ' jou laptop in die voorkant van jou. Indien nie, is jy welkom om te hou luister na ons praat. Ons gaan om te hou praat. En ons het tyd aan die einde, hopelik ons sal eintlik kry in wat jy wat sommige van hierdie biblioteke lyk. MIKE RIZZO: Cool. Alle reg, so nou kom ons praat oor Font awesome. TOMAS Reimers: so Font awesome is 'n baie netjiese terrein, veral vir diegene van ons wat minder artisties talentvolle. Ignoreer die naam Font awesome, dit gee jy 'n klomp van die ikone wat baie nuttig. So 'n baie keer sal jy implementeer 'n ikoon wat jy wil dalk soos 'n mooi x so dat jy iets kan sluit. Of wil jy dalk 'n soort van knoppie wysig met 'n potlood tekening soos almal het. En dit is wanneer jy leer dat teken die ikone kan wees baie geduld en moeilik. Font awesome - as jy eintlik gaan na die webwerf - gee jou 'n baie ikone onder die ikone aan die bokant. Ja, net die top. Dit gee jou 'n baie ikone gratis. So hier het jy sien ons het dinge soos 'n asterisk, bars, 'n weerligstraal, 'n kalender, 'n fout, 'n boek, ensovoorts. Dit kan baie nuttig wees. Die manier waarop jy sluit dit jy is, sluit letterlik die CSS-lêer. En nadat jy het die CSS-lêer, wat jy kan doen, is jy 'n tag genoem I. Dit satands vir ikoon met die klas FA staan ​​vir Font awesome. En dan, wat ook al die klas wat jy wil. So as ek wou 'n ikoon van hierdie plus vierkante reg hier, sou ek dit gee dit die klas FA. En dan FA koppelteken plus koppelteken vierkante. MIKE RIZZO: Cool, OK. TOMAS Reimers: En dan, die laaste CSS Biblioteek ons ​​wil te kry deur ons probeer om dit te hou op 'n minimale CSS biblioteke omdat ons nie besef dat die titel van hierdie aanbieding is JavaScript biblioteke. Maar ons het gedink dat ons kan net sowel bekend te stel aan die ander biblioteke terwyl ons praat oor biblioteke. Dit is Google Web Fonts. En wat Google Web Fonts jy kan te doen, is fonts op jou webwerf, wat is 'n baie maklike manier om dit te maak mooi en jou stel om te onderskei van almal anders se is as dit 'n mooi font of as dit 'n mooi versameling van fonts. Google Web Fonts is lekker in teenstelling met ander biblioteke in die sin dat dit 'n werklik gelei installasie. So as jy volg die skakel, dit is google.com / fonts, ek glo nie. As jy volg dat jy kan jou font kies. Jy kan kies aan die linkerkant van dik, inslag, ensovoorts. En dan, wanneer jy gekies het een, kan jy 'n vinnige gebruik klik. Reg daar. Onderkant regs van die boks. En dan, blaai af. Eerste van alles, hulle gee jou die CSS dat wat jy nodig het om werklik te skakel om dit te. Dit is reg daar. Jy kan net kopieer en plak dat in En die lekker ding van hierdie een is jy eintlik nie eens nodig om te aflaai van die lêer. Wat is dit gaan doen, is dit gaan om te skakel na Google se weergawe van dit. So terug na wat dit beteken nie dat. Dit beteken dat wanneer 'n gebruiker laai jou lêer - laai jou HTML bladsy - HTML bladsy gaan hierdie lêer te verwys. So dan, is jou rekenaar gaan om te sien, O, dit is die gasheer op google.com eerder as op theirsite.com. Laat my gaan vra Google vir die lêer. En dan, gaan dit in te sluit dit amper asof dit 'n deel van jou eie webwerf. TOMAS Reimers: Cool. En as jy sluit, dan te sluit dit in jou CSS, dit gee jou die werklike lyn. So jy het die eiendom font familie gelykstaande aan die naam van die skrif. MIKE RIZZO: OK. Dus het ons net klaar met CSS. En sommige van julle kan dink, goed, Ons het 'n paar CSS op CS50 Finansies. Maar CSS biblioteek was bootstrap. Ons het eintlik sluit Skoenlus 'n bietjie later onder JavaScript want met die Skoenlus CSS biblioteek kom ook met 'n baie JavaScript dat Skoenlus of Twitter - wat Skoenlus gemaak - gebruik al hul CSS te bestuur. TOMAS Reimers: Is daar iemand enige vrae so ver oor CSS in die algemeen? Ons is goed? Awesome. MIKE RIZZO: awesome. TOMAS Reimers: So beweeg op JavaScript. MIKE RIZZO: So ons wou praat oor jQuery om mee te begin. Het iemand al gehoor van jQuery voor of dit gebruik? Ja, 'n paar? So as jy net werk met inheemse JavaScript, sal jy jouself vind tik 'n baie lang keurders 'n baie. So, wat jQuery doen, is dit ' 'n lekker wikkel vir die JavaScript taal wat kan jy maklik kies en manipuleer verskillende elemente binne die dokument voorwerp model van die webblad of die DOM, wat ek dink julle het gehoor van in lesings op hierdie punt. TOMAS Reimers: As jy nog nie gehoor van of as jy dit nog nie gesien lesing Tog, die Document Object Model is basies hoe dinge verteenwoordig. So HTML soort lyk soos 'n boom wanneer jy eintlik trek dit uit. Jy het die HTML element bo-op. Jy het die kop en liggaam. En dan, binne wat jy alles anders. Dit is waarna verwys word as die DOM - Document Object Model. So 'n model wat voorwerpe verteenwoordig in die dokument is 'n maklike manier om te dink oor dat. En een van die groot ding oor jQuery is dit regtig Dwarsbalke dat en manipuleer elemente binne wat ongelooflik eenvoudig. So eenvoudig, in die feit dat die meerderheid van die JavaScript biblioteke of indien nie die meerderheid, die groot meerderheid van die mense sien jy eintlik nodig het jQuery so dat hulle hulself net kan hardloop want as jy het nie jQuery, jy sou 'n baie tyd mors probeer uit te vind hoe om te kies sekere elemente en hoe ander dinge te doen. En die ander groot ding oor jQuery is dat dit kruis leser versoenbaar is. So onthou toe ons gesê dat nie alle blaaiers te implementeer dinge op dieselfde manier? Dit is waar, selfs in JavaScript. En een van die groot dinge oor jQuery is dat dit sal ontdek die leser en op te spoor die geskikte metode. So as jy 'n element te kies, Internet Explorer kan sê jy veronderstel hierdie manier te doen. Firefox kan sê die korrekte manier is om op hierdie manier. jQuery nie omgee nie. Wanneer jy vertel jQuery 'n te kies element sal dit uit te vind hoe dit is veronderstel om dit te doen binne die leser die gebruikers is tans in, en dan doen dit so. MIKE RIZZO: So laat ons nie oor praat die gebruik van jQuery 'n bietjie. Net soos PHP, jQuery het 'n besondere voorliefde vir die dollar-teken. So sal jy vind dat enige jQuery - Wel, nie almal nie. Jy kan soms vervang die dollar teken met die woord jQuery. Maar oor die algemeen, net omdat dit korter, wanneer jy sien dat jQuery gebruik dit sal met 'n dollar teken wees. So hier het ons net wat 'n begin selector vir 'n element in die DOM. Hier het ons die dollar-teken gevolg deur oop hakies en dan aanhalingstekens. En binne die aanhalings gaan ons keurders vir die verskillende elemente. Net soos in CSS, ons nodig het om die keurders te in staat wees om die verskillende elemente te stileer binne die bladsy. Diegene verskillende keurders vertaal presies in jQuery en JavaScript, vir die grootste deel. So hier het ons 'n dot cat. So as jy onthou van lesing die dot beteken net die klas. So ons kies element met die klas cat. So as ek gaan voort en maak ons JavaScript konsole hier regtig vinnig net demonstreer, as ek tik net die dollar-teken, sien ons dat dit is 'n paar funksie wat kom. En dit is net gedefinieer deur jQuery. TOMAS Reimers: Vir dié van julle onbekende, die konsole is 'n instrument binne Chrome, wat dit moontlik maak om jou te, basies, loop JavaScript op die huidige bladsy. Dit sal jy baie nuttig vind wanneer jy eintlik die opsporing en jy nodig het om te wees, wat is die huidige waarde van 'n globale veranderlike of wat is iets anders? Dit is soort van soos GDB met die uitsondering wat jy kan eintlik elemente op die bladsy te manipuleer met dit in 'n baie makliker manier. En ook dit maak nie, basies, maak seker met julle voordat dit doen iets nie. So, terwyl, kan GDB wees, is jy seker dat jy die volgende stap om te loop? Die konsole is in werklikheid is. So as die webblad is die lewering en doen wat dit doen, die raad se loop ook saam met dit. En jy kan toereken kode sit in dat konsole, wat sal word uitgevoer op die bladsy. MIKE RIZZO: So het die konsole te tree, Ek dink ek moet kortliks praat van hoe om dit te doen. In die laaste probleme wat jy mag hê gebruik Chrome se inspekteer element funksies of view bladsy bron - en dit is toeganklik net deur die regte kliek op die bladsy of 'n spesifieke element en doen óf inspekteer element of view bladsy bron. Ons kan ook toegang verkry tot die JavaScript konsole direk deur kies inspekteer element. So dan is jy net getref konsole op die ver regterkant. Alternatiewelik kan jy ook weg na die boonste regterkantste hoek, wat afgesny is op die skerm waar dit het die drie horisontale bars. En jy gaan af na gereedskap en dan JavaScript konsole hier waar kan sien - ten minste op Windows - die kortpad is beheer Shift J. So dan As ons wou 'n element te kies binne hierdie bladsy, net soos ek gewys voor, doen ons dollar-teken oop parens en haal dan. 'N interessante ding is, oor die algemeen, enkele aanhalings en dubbel aanhalings is verwissel. So 'n klomp mense gebruik net enkele aanhalings, want hulle is vinniger te tik as dubbel aanhalingstekens omdat jy nie het om af te hou die Shift. So ek sal net doen nou. So ek wil om iets te kies met die klas. Houer, net omdat ek weet dis iets wat op ons webblad nou. En ek druk Enter. En ons kan sien dat dit dit gekies het. So is dit toon dat dit teruggekeer daardie voorwerp. So dit is 'n basiese keuse. As ons wou eintlik manipuleer, jy wil hê om iets te noem op daardie seleksie, wat ons sal kry in later. TOMAS Reimers: So net om te kyk na wat meer in diepte, is dit nie anders as die funksie oproepe wat ons in C. Die naam van die funksie hier is 'n bietjie vreemd. Dit is dollar-teken. Dit is net 'n naam van 'n funksie. Daar is niks spesiaal nie. Ons het oop hakies. Dan, ons het ons een argument wat in hierdie geval gebeur met 'n string te wees, wat is 'n opsie vir dit. En dan, ons het ons geslote hakies. Dit is dit. Dit is nie dat baie verskillend. Alhoewel, dit lyk baie vreemd. En dit kan, soort van, 'n knelpunt wees wys vir 'n klomp mense. MIKE RIZZO: So Net so, as ons wou 'n element wat 'n ID te kies, Nou wil ons kies deur ID in plaas van die klas. Dit sou 'n soortgelyke ding wees waar ons net nie die skerp teken vir ID. So ons is hier kies alle elemente wat ID bar. TOMAS Reimers: En dit strek. Dit CSS strek. Net soos in CSS, kan jy al kies skakels, wat die klas cat. Hier is dit dieselfde ding. Jy kan a.foo doen, wat sou kies al die skakels met die klas cat. Jy kan 'n skerp bar te doen, wat sou Kies die skakel met die ID bar en so aan en so voort. Enige CSS selector is 'n geldige jQuery selector. MIKE RIZZO: Ja. OK, so nou kom ons kry in 'n bietjie van manipulasie wat ons kan doen met ons jQuery. So jQuery het 'n spesifieke tipe notasie waar ons net gebruik 'n kol aan die einde. En jy kan dink dit soos in C hoe ons het verskillende structs. En om te gaan in dié structs, sou jy gebruik 'n punt te kry in hulle. Dit is soort van 'n soortgelyke ding. Net nou het ons 'n funksie binne hierdie selector dat ons kan 'n beroep op dit. So hier is die heel eerste voorbeeld jy kan sien is 'n CSS selector. En basies, wat dit doen, is dit pas die eerste element CSS van hierdie ding wat jy gekies - hierdie element wat jy gekies - met die waarde wat. TOMAS Reimers: So 'n maklike vertaling van wat sou wees as jQuery, basies, het net cat. En dan in CSS gesê, kleur rooi en sluit. Dit is dieselfde idee. Wat dit gedoen het, is dit gekies al cat elemente. En dan is dit toegepas word. Soort van, die eiendom van kleur is gelyk aan rooi. MIKE RIZZO: Net so kan ons ook verander die werklike inhoud van wat wys op die HTML van die bladsy, wat is werklik 'n koel, want dit beteken dat jou web bladsye kan nou heeltemal dinamiese en het nie om staties te wees dat jy die druk van die gebruik van PHP aan die begin van die bladsy gelaai word. So hier, as ons wou verander om die werklike HTML van die bladsy, sou ons nou noem die HTML-funksie, wat dan net inserts wat ons spesifiseer in daardie element dat ons gekies. So hier is ons kies element met klas cat en dan sê dit is HTML dit is nou hallo wêreld. TOMAS Reimers: En as jy dink oor wat nuttige toepassings van hierdie, hierdie CSS een, die eerste ding wat jy kan begin om te dink oor is in terme van selfs drop down menus. Jy kan begin dinge soos om te doen wanneer 'n gebruiker oor die boonste gedeelte hang van 'n drop down, wat jy wil maak die onderste deel sigbaar is. Reg? So in CSS, ons het eienskappe iets sigbaar te maak. Dinge soos vertoon kolon geen sou dit onsigbare. Wys blok sou maak dit sigbaar. Of selfs as jy wil eenvoudiger om te gaan, moet jy het dinge soos sigbaarheid gelykes sigbaar, en die sigbaarheid gelyk versteek. En jy kan begin om dinge te implementeer soos drop down menu regs nadat jy deur die idee van hoe kan jy uitvind wanneer dit oopmaak, wat ons kry deur middel van baie kort. Maar ons kan begin om te sien aansoeke van hierdie. In 'n soortgelyke sin, as jy was om te probeer en te implementeer, kom ons sê, 'n chat enjin en jy wil 'n bietjie te maak spraakborrel kom wanneer jy het het 'n nuwe boodskap, as jy een van die Nuwe boodskap, kan jy 'n bietjie te maak spraakborrel kom deur die wysiging die HTML van die bladsy, reg? Deur die toevoeging van ekstra toespraak borrel met die ekstra teks in daar. Ja? Publiek: So jy sou dit binne insluit die HTML-kode in soort van soos 'n [Onhoorbaar]? MIKE RIZZO: Right. Ja, ons sal kry om daardie in 'n bietjie. Ja, dit is 'n soortgelyke bietjie te PHP. Nie presies dieselfde is. 'N Goeie onderskeid te maak is wat hierdie is eintlik die wysiging wanneer ons wysig die bladsy, want dit gaan nie te wees die wysiging van die werklike lêer wat tans gehou op die bediener omdat die wêreld moet nie toestemming jou lêers te wysig. Dit is net die redigering wat op die bladsy en wat daar binne vertoon die leser. So as jy die bladsy te herlaai na, sê, iets wat die verwydering soos ons sien wat ons kan doen met die verwyder oproep, dat die ding sal dan weer verskyn. TOMAS Reimers: So een manier om te dink oor dit is as ek jou rekenaar en Mike is, soort van die bediener. Wat gaan gebeur is ek gaan vra Mike, hey, kan ek 'n afskrif van die Hierdie webblad? En hy sal vir my 'n afskrif van dit. Nee, dit is nie die oorspronklike ding. Dit is net 'n kopie. En dan sal dit wees soos, ag, daar is JavaScript hier. Dit is duidelik dat, moet ek verander die bladsy te wees soos hierdie. En ek is die wysiging van jou kopie. Maar dit is nie die bewerkstelliging die werklike kopie. En as ek hom weer vra verfris die bladsy - hey, kan ek nog 'n skoon kopie - Hy gaan my te gee 'n skoon kopie. En dan, ek gaan dieselfde ding om te doen soos: Ag, hierdie JS hier wat sê om dit te wysig. En ek gaan om te hou om dit te doen. MIKE RIZZO: So 'n baie cool ding wat jy kan doen met jQuery is eintlik verskillende tipes voeg van die animasie aan jou bladsy. Ek weet nie of jy al ooit gesien het, waar jy probeer om 'n 'n vorm invul aanlyn en jy nie invul die dinge reg. So 'n klein ding afgly aan die bokant en sê jy nie korrek gedoen. Probeer asseblief weer. En dan, kan dit selfs net skuif. Blyk jQuery het in funksies gebou wat al van daardie animasie baie, baie maklik. So is daar eers die vervaag out funksie, wat jy kan 'n beroep op iets. En dit is 'n manier om die CSS van te verander dat element in 'n geanimeerde manier. So dit neem net element jy noem dit vervaag op. En dan, dit is ondeursigtigheid verander stadig totdat dit gaan heeltemal deursigtig. TOMAS Reimers: Die ander gewilde een is om af te skuif, wat sal maak iets vertoon deur in te skuif dit af. So in die geval van die drop down menu, Weereens, wanneer ons geleer hoe om op te spoor Wanneer dit is hovered oor, jy kan net vertel dat dit onder deel gly nou. En dan, wil dit voorkom deur gly. MIKE RIZZO: En dan, as jy net 'n soort van animasie in gedagte dat jQuery nie noodwendig verskaf. Byvoorbeeld, kom ons sê jQuery het jy met 'n skyfie af en skuif op. Wel, kom ons sê jy wil gly iets in die linker-of vanaf die regte soort van soos die CS50 Hoofblad doen wanneer gaan jy na 'n nuwe paneel. Jy sal dan waarskynlik moet dit self implementeer die gebruik van die lewendig funksie binne jQuery. So insgelyks, jy moet net lewendig. En dan, binne dit wat dit neem om 'n Woordeboek van die verskillende waardes dat jy veronderstel is om te slaag. So hier, as ons wou animeer die element cat sodanig dat sy breedte óf uitsit of kontrakte tot 80 pixels, afhangende van wat dit tans is. Ons wil net gebeur dat as die argument binne is. Animeer ook 'n paar ander argumente dat jy dit kan slaag, byvoorbeeld, die spoed van die animasie wat jy wil om dit te gee. En om dit te doen, sou ek net sê vinnig Google jQuery lewendig. En dan, die opvoeding van hierdie bladsy, jy kan sien dit is 'n klomp van die verskillende eienskappe wat jy dit kan slaag. En ek u aanmoedig om - wanneer jy kom oor iets wat jy nie doen nie weet of wil net meer oor 'n leer spesifieke metode wat jy kan bel oor iets - net vir Google dit. jQuery is uiters goed gedokumenteer. En dikwels is daar 'n baie voorbeelde dat hulle voorsiening te maak vir jou. As ons rol af - pad af - wat ons kan gebruik, as well. Weereens, wanneer 'n ontwikkelaar eintlik gaan deur die moeite skryf van 'n biblioteek, hulle gewoonlik wil iemand om dit te gebruik. So saam gaan 'n dokumentasie. En dat dokumentasie kan gewoonlik gevind op die projek bladsy, wat Hoekom het ons julle dit dat die oorspronklike werf in die begin, wat links jy na die projek bladsye sodat jy kan sien dat dokumentasie. Tipies, die projek bladsy in die geval van [onhoorbaar], is dit vir julle gesê het die name van die klasse. In die geval van JavaScript, dit gee jy die naam van die funksies. By the way, as ons blaai na die top, 'n vinnige kant nota op funksies is wanneer jy sien 'n funksie geïmplementeer soos hierdie met die harde tussen hakies in die middel, wat beteken dat dat eiendom is opsioneel. Net 'n kop. Ek het gesien hoe 'n baie vrae oor dat. So hier kan ons sien dat die animate neem eiendomme as 'n noodsaaklike argument. En alles is opsioneel. Kant nota - jy kan dink van hierdie, sorteer van, soos man bladsye. Man bladsye dokumentasie vir C en vir 'n baie ander dinge, as well. MIKE RIZZO: So het ons geleer hoe om te verander verskillende CSS op die bladsy, lewendig, en verwyder voeg HTML. Maar een van die werklik mees kragtige dinge oor JavaScript en veral jQuery - wat dit kan jy doen, is om te reageer op verskillende elemente wat gebeur. Byvoorbeeld, ons het hier 'n gebeurtenis hanteerder. En dit beteken dat net wanneer hierdie gebeurtenis, ons hanteer dit in 'n sekere manier. So hier is die generiese jQuery gebeurtenis hanteerder is die dot op. En dan, die eerste ding wat jy verskaf is wat geval dit moet word luister na. So hier is, is dit die kliek wat ons wag vir. TOMAS Reimers: Alternatiewelik, jy het op hover, wat is 'n baie gewilde een. So terug na my drop down menu idee. Jy sal die boonste een op hover. En dan kan jy dit verander. MIKE RIZZO: Right. En dan, wanneer dit gebeur, is dit net voer die funksie wat ons dit gee as 'n argument en dat dit waarskuwings hallo of hi. TOMAS Reimers: So in die geval van JavaScript, dit is 'n plek wat ons nodig het om te verwyder ons van C. Ons kan eintlik neem funksies as argumente. En daar is 'n baie baie komplekse maniere om dit te doen. Ons gaan een manier te bevorder, wat jy kan definieer die funksioneer reg daar. So wanneer jy vra vir 'n funksie as 'n parameter, jy basies is net gaan om die funksie te definieer op die plek. En die manier waarop jy 'n funksie definieer in JavaScript is jy letterlik sê funksie. Dan, gewoonlik, die naam van die funksie. Maar ons gaan nooit te verwys hierdie funksie weer. So laat ons dit naamloos. Toe het die hakies, dan is die krullerige draadjies, en dan die kode binne daardie. So ons dit verstaan ​​kan 'n bietjie verwarrend. So ons gee jou die algemene vorm van Wat 'n event handler lyk hieronder, wat is op die gebeure. En dan, jou kode binne-in daardie. MIKE RIZZO: Is daar enige vrae oor hierdie? Dit kan 'n bietjie verwarrend die eerste keer wat jy dit sien. TOMAS Reimers: jy eintlik wil open 'n lêer en wys vir hulle jQuery nou? MIKE RIZZO: Ja, laat ons dit doen. OK. TOMAS Reimers: So nou is ons in die toestel. En wat ons gedoen het, is ons geneem het om die vryheid van die skep van beide 'n index.html lêer, wat skakel na 'n JavaScript-lêer. En ons kan oopmaak om die - ja. Wel, dit doen twee dinge. Die eerste is om dit te koppel die JavaScript-lêer. En ons sal sien dat hier. Ons sien dat in die hoof van die HTML-dokument, veral. So jy sal daar sien dat Ons, basies, sê SRC, wat staan ​​vir bron. En dit is die URL. So hier kan jy sê ons het ingesluit jQuery. En ons het ook ingesluit skrifte. Die ander manier JavaScript in te sluit is dat jy kan 'n geïntegreerde script sluit tag as ons het aan die onderkant waar dit sê script tipe is teks JavaScript. So ons sê, luister, ons is oor 'n script te sluit. En die tipe van die script is JavaScript, wat 'n tipe van die teks. Baie eenvoudig. MIKE RIZZO: So dit, soort van, kry om te jou vraag oor hoe ons sluit JavaScript in ons lêers want as ons het PHP, ons doen iets soos hierdie. En dan, het ons PHP funksies - Kom ons sê aandele doen iets wat - gaan daar in. Maar nou het ons die script tags dat ons dit gee, wat eintlik deel van die HTML self, want dit is nie vervalsen om 'n HTML-lêer soos dit is in PHP, want as jy eintlik gaan in en kyk na die bron van die bladsy sien jy die script tags daar met die JavaScript verband hou met hulle in daardie. So dan, as ons wou skryf sommige JavaScript - Laat ons net sê ons wou liggaam te verander want nou het ek nie enige ander etikette wat ek kan regtig wysig buiten liggaam. Laat ons net sê ek wou verander die CSS van daardie. So ons sal voortgaan en verandering die kleur van om dit te red. So ek spaar die lêer. Kom ons gaan terug na ons webblad te gaan, verfris, en dit doen dit outomaties omdat dit nie lyk soos dit het gewag op alle want ons was nie luister vir 'n gebeurtenis of iets soos dit. TOMAS Reimers: So as ons gaan terug na daardie lêer in die besonder - die HTML File - wat jy gaan te sien is ons het - onthou dat dit gelaai is, soort, chronologies. So het ons die eerste keer die kop. dit laai die twee lêers. Dan gaan ons na die liggaam. En ons sien hallo wêreld. So het ons lewer hallo wêreld. En dan is die laaste ding wat ons het is ons die script tag. So loop die script tag, want dit is nie vertel dit om te wag vir iets. En dit is die mees basiese manier JavaScript om te hardloop. Met wat gesê het, kan jy die script merk in die kop net hierdie punt te wys? En uit te voer. Ons gaan om te sien dat dit het nie die kleur verander. En dit is een van die probleme van JavaScript is dat dinge is gelaai in 'n chronologiese volgorde. So teen die tyd dat die kode hardloop, het ons gekies - gaan terug - die liggaam tag. Die liggaam tag nog nie bestaan ​​nie, want JavaScript is in lyn met HTML. So het die leser is soos kies liggaam. Daar is nie so iets nie. Sodat ons kan ignoreer nie. En ons hou gaan. En dan definieer ons 'n liggaam tag. Maar wat nooit opgedateer. So wanneer jy die uitvoering script tags, maak seker dat jy plaas na die liggaam tag. Volgende skuif. MIKE RIZZO: OK. So het ons iets verander. Maar dit het nie lyk soos dit het gereageer op ons by al omdat dit net soort van het dit so gou as wat dit laai die bladsy. So nou, in plaas van om dit te doen, waarom ons nie voeg 'n gebeurtenis hanteerder. So laat ons iets doen na die liggaam weer. En kom ons sê ons doen dit op - kliek. Ons sal 'n funksie voeg. TOMAS Reimers: Kom ons verander dit is die kleur rooi weer. Hoekom nie? MIKE RIZZO: Ja, laat se verandering sy 'n rooi kleur te weer. Alle regte. So laat herlaai die bladsy. OK, sien ons - as wat verwag is, beteken dit nie rooi draai nie. Maar dan kan ons voortgaan en klik daarop. TOMAS Reimers: En dit rooi. MIKE RIZZO: En is dit nie rooi as wat verwag is. TOMAS Reimers: En ons kan sien hoe ons kan begin baie basies te bou interaksie. Ander dinge wat ons dalk wil doen, is, As ons nie wil hê die liggaam te maak kleur rooi, kom ons maak die HTML agtergrond kleur rooi. Net so is dit dieselfde CSS. En wanneer ons dit verander, kan ons sien dat hierdie baie dramatiese effek van die verandering van die hele bladsy. So weer, as jy die uitvoering van dinge, jy kan een komponent het wat bedoel is om gedruk word nie. Kom ons sê 'n uitgang knoppie en 'n hele ander komponent, wat bedoel is om te reageer. So jy sal 'n venster verwyder wanneer dit gebeur. MIKE RIZZO: OK. Net as 'n voorbeeld - jy het nie hierdie vroeër te sien - Ek sal net wys hoe dit lyk soos wanneer ons iets weg te steek. So ek sal voort te gaan en nie skuif. TOMAS Reimers: Wil om te draai in 'n paragraaftipe voordat ons dit doen? MIKE RIZZO: OK. Ja, hoekom nie ons doen dit net so ons kan dit kies 'n bietjie meer. TOMAS Reimers: En laat ons gee dit 'n klas. MIKE RIZZO: Ja. OK, so laat ons sien. In plaas van die keuse van die werklike liggaam nou, ek sal net kies om alles met klas hallo, wat ons hier net een ding. Daarom moet ons nie hoef te bekommerd wees oor wat. So ek sal dit verfris. Ek sal voort te gaan en kliek om dit. En dit, soort van, het 'n vreemde skyfie up ding, wat nie sien dat aantreklik. Die algemeen, hulle kyk mooi mooi. Ek dink hierdie - vir 'n paar rede - het nie. Ek sal net nie 'n fade out so kan jy kyk na dit ook. Baie lekkerder. En dan, as ek oop die JavaScript troos weer en ons wil om te sien wat dit lyk soos wanneer ons dit vervaag in Nou, ek het net noem vervaag in op. En dit vervaag terug in Net so is, kan ons eintlik ook slaag 'n argument te vervaag in of vervaag, wat is, soort van, die spoed van dit. So laat ons gaan voort en sê wat ons wil dit om stadig te gaan vervaag in So ek dink dit nog steeds lyk redelik vinnig. Maar dit was stadiger as voorheen. TOMAS Reimers: En as jy wil om uit te vind meer uit oor hierdie dinge, weer, gaan net na die jQuery dokumentasie, wat ons julle gegee het, en lees deur middel van hierdie. Hulle dokumenteer hul funksies ongelooflik goed. MIKE RIZZO: OK. So ek dink laat ons terug na hierdie gaan. En ons kan praat oor ons laaste bladsy. Wel, ons kan voltooi met Skoenlus. En dan sal ons dit oopmaak vir 'n paar vrae. En as julle enige idees wat jy wil om te probeer om te gooi en te sien As ons hulle kan implementeer met JavaScript vinnig. So regtig vinnig oor Skoenlus, wat is outomaties ingesluit in jou laaste probleem wat in die CSS-gids en eintlik gekoppel aan jou Header.php. So jy klasse kon bygevoeg het dat gedefinieer word binne Skoenlus om dit te. En dit sal outomaties styl daardie dinge dienooreenkomstig. TOMAS Reimers: So Skoenlus is 'n baie magiese ding wat ontwikkel is deur die mense op Twitter. En wat dit veronderstel was om te doen, was - voor webwerwe was regtig moeilik om te maak kyk mooi, veral wanneer ons moes 'n baie algemene komponente. So 'n baie knoppies op die web gekyk dieselfde. Baie van die teks velde kan gerig word aan lyk baie beter as die standaard teks gebied jy weet waarskynlik van werklik ou webtuistes of regtig swak gemaak webtuistes, wat net lyk soos letterlike teks bokse sonder enige vorm van teks skaduwee of enige soort van mooi uiteensetting. So, wat Skoenlus gedoen het, was dit gesê, goed, Ons het 'n baie algemene style. Hoekom dit nie maak ons ​​'n gemeenskaplike stel van CSS en 'n gemeenskaplike stel JavaScript as Wel, wat kan dit styl is en wat kan gee mense dinge soos drop down menu, kan wat mense gee dinge soos hulpwerkwoorde. Modale is wat oor die bladsy verskyn wanneer dit streng gesproke iets wat verder verhinder interaksie totdat jy interaksie met dit. Iets soos hierdie is, is jy seker jy wil om hierdie saak te verwyder? Jy kan nie regtig iets anders doen totdat jy sê ja of nee. Dit het al hierdie en dit verpak dit saam en sê: Hier gaan ons. Mense kan nou gebruik nie. En jy kan dit oor by getbootstrap.com. Dit is outomaties ingesluit binne jou laaste probleem stel. En jy is meer as welkom om te gebruik dit op jou finale projek. En as jy wil om dit te volg skakel Skoenlus te kry. Jy sal sien hier is die Skoenlus CSS site. Jy sal sien Skoenlus. En as jy rol af, sal jy sien hoe om dit te laai, hoe om te installeer dit, ensovoorts. MIKE RIZZO: en jy kan ook, Interessant genoeg, pas dit aan wees watter soort temas wat jy wil. Ek weet dit is iets wat ek gedoen het vir my finale projek toe ek die klas is pas dit. 'N ander weergawe van Skoenlus wat het 'n ander kleur skema en verskillende vorms van 'n paar verskillende dinge. So ek u aanmoedig om te speel met dit. Dit is soort van pret om te doen. TOMAS Reimers: Op soek na oor die top weer, dit is baie soortgelyk aan die Font Awesome site. Baie van die dokumentasie sal begin lyk soortgelyk wanneer jy gesien genoeg van dit. So hier het ons die CSS komponent van hierdie. En jy sal sien hoe dit Styl kan dinge. So as jy op tafels, byvoorbeeld, jy kan onmiddellik 'n tafel mooi deur eenvoudig die klas tafel om dit te. Dieselfde dinge vir knoppies. As jy net voeg die klas BTN en AP standaard of BTN primêre, kan jy kry een van hierdie knoppies met hierdie pre-gemaak style. En dan, as jy op soek is na iets meer kompleks as net restyling wat w reeds het, oor op die blad JavaScript oor die top ons het 'n klomp van die komponente. So hier het ons oorgange, hulpwerkwoorde, oortjies eenvormige groottes, oortjies, en tooltips. 'N Nutswenk is wat verskyn onder jou muis wanneer jy hover oor iets. Popovers, waarskuwings, knope, opvoubare accordeons is wat hulle gewoonlik genoem. Caroussels, wat flip deur soos beelde. So dit is die komponente van Skoenlus. Ek wil u aanmoedig om hoogs gaan kyk na hulle. Daar is 'n JavaScript-komponent en 'n CSS komponent. Voel vry om dit te gebruik as jy wil. Ons gaan nie te veel gaan in hulle omdat ons voel die dokumentasie is baie goed gedoen. En ja. Het jy enige vrae oor wat? MIKE RIZZO: So as 'n werklik 'n vinnige kant, die ontwerp van hierdie webblad ons vinnig saam te stel vir hierdie aanbieding is eintlik gedoen met behulp van Skoenlus. Soos jy kan sien, wanneer ons kliek op hierdie verskillende oortjies, ons is nooit werklik verlaat die huidige index.html bladsy. So wat ons het, is verskillende divs binne hierdie index.html. En dan, wanneer ons kliek 'n ander blad, dit is net die verandering wat 'n mens se vertoning. So dit dienooreenkomstig posisioneer hulle verander die HTML van die bladsy sodat die huidige blad gemerk as aktiewe so dit anders en lyk verskyn baie mooi. TOMAS Reimers: So dit was al gedoen sonder dat ons skryf byna enige CSS. Ons sien ook 'n kop-aan die bokant, wat die kleure is deur ons. Maar die werklike sit dit op die top van die bladsy en maak dit boek was Skoenlus. En dan, selfs vir 'n ander biblioteek - dit is nie een het ons gepraat oor, maar een Jy kan Google as jy wil. Dit is prettify.js genoem. En dit sal sintaks verlig jou kode vir jou met behulp van beide CSS en JavaScript. Die laaste ding wat ons wil hê om te praat oor Voordat ons jou uit in die wêreld te kyk na biblioteke om uit te vind hoe om dit te gebruik en om, hopelik, Lees dokumentasie en kry wat jy behoefte is hoe biblioteke te vind. So die eerste is ons is net gaan Google om te stoot. Gaan Google. Dit is letterlik wat ons doen wanneer ons nodig het om iets te doen, is ons Google. Is daar 'n JavaScript-biblioteek laat my tyd in 'n te manipuleer nuttige manier? So as ek weet dat sommige gebruikers skep 'n rekening hier, en dit is die huidige tyd, hoe kan ek bereken die verskil met wat sonder om te dit self bereken? So dit is eintlik 'n algemene ding, JavaScript tyd biblioteek. En hier is ons Moment.js-- die mees gewilde een. As ons 'n biblioteek te manipuleer iets soos kleur in staat wees om genereer 'n klomp van ewekansige kleure - moontlik, 'n te genereer styl of iets - ons kan iets soos Google JavaScript kleur biblioteek. En ek is seker ons sal pop-up met 'n duisend en een van hulle. Jy is welkom om deur hulle te lees. So die meeste dinge - as jy dit vind - gaan op een van die gasheer plekke wat gasheer kode. Hulle is 'n paar gewilde kinders. Die gewildste, deur ver, is github.com. En as jy gaan na GitHub dit is eintlik waar Norm is aangebied. So as jy wil om terug te gaan dat 'n mens. Wys hulle dat. MIKE RIZZO: En dit is eintlik waar dit is ook die gasheer, as jy opgemerk. TOMAS Reimers: Ja. So as jy gaan oor te normaliseer en gaan na die GitHub. Was, is dat? MIKE RIZZO: Daardie klein kat ding is die GitHub simbool. TOMAS Reimers: Oh. So GitHub gebruik 'n metode genoem Git te stoor kode. Is jy nie weet wat dit is, of dit bang jy, is dit goed. Jy hoef nie te weet wat Git is omdat GitHub het 'n knoppie Download aan die onderkant regs. Die ander nuttige ding om te weet oor GitHub is die meeste produkte sal 'n lees my. En as hulle nie 'n webwerf, die lees my sal praat oor hoe jy installeer dit, hoe jy dit gebruik, wat dit doen, ensovoorts, ensovoorts, ensovoorts. Wat ons het basies al loop jy deur. MIKE RIZZO: Internet se beëindig. TOMAS Reimers: Dit is fyn. Die laaste twee dinge wat ons wou om te praat oor - Ons het gepraat oor Git - is die oplos van probleme. En hierdie een is nie so relevant is vir die finale produk as dit wanneer jy vertrek 50. En wanneer jy loop in produkte implementering van biblioteke of die uitvoering jou eie projek, gaan jy vrae te hê of jy gaan om te kyk vir vrae. Weereens, google dit. Dit is letterlik wat ons doen. Dit gaan klink dom. Maar letterlik, ons google dit. En weer, een van die eerste dinge jy gewoonlik gehardloop het, is stackoverflow.com, wat 'n wonderlike vraag-en-antwoord oë. Dit is wonderlik om beide want jy kan plaas die vrae en kyk vir antwoorde nie, maar ook omdat dit het reeds 'n baie pre-bevolk inhoud daar. So gewoonlik As jy Google 'n ontwikkeling vraag in die eerste paar treffers wat jy kan reeds hardloop in dit tydens jou probleem stelle. En dan, die laaste ding wat regtig kort is JSFIDDLE, wat is - wat ons vandag het is besig met 'n baie werk met JavaScript HTML CSS. JSFIDDLE is 'n web artikels, wat basies kan jy jou HTML te neem, JOU JavaScript links onder, en jou CSS bo regs. En dan kan dit 'n vinnige lewer daarvan om te sien hoe dit in wisselwerking. Dit is baie nuttig wanneer mense probeer 'n bewys van die konsep te doen soos dit is hoe jy doen 'n drop down menu. Miskien 'n vinnige ontbloot of wat ook al. MIKE RIZZO: So laat ons gaan voort en kliek op hierdie. 'N vinnige nota - terwyl, voor ons was doen op klik. Blyk JCorey Korea het ook 'n ingeboude in kliek event handler dat dit gebruik net omdat dit figureer jy gaan wil baie dinge om te doen As jy wil iets om te klik. Net so is, is dit ook 'n hover. Maar die volle omvang van die te kry diegene, kyk na die jQuery dokumentasie en dit doen. Ek het iets dom hier. TOMAS Reimers: So ek het 'n baie vinnige program hier, wat sê knoppie op klik. Dan het ons 'n lus vir. Want ek is minder as 404. Dit is net gaan om te pop-up hierdie waarskuwing boodskappe. MIKE RIZZO: En wat was die kode 404 gestaan ​​in HTML? Is daar iemand onthou? Nie gevind nie, reg. Chrome het ook bygevoeg hierdie netjiese ding waar jy kan - TOMAS Reimers: Omdat mense soos Mike begin om dit te doen 'n baie en irriterende gebruikers, wat dit moontlik maak jy info te sien. MIKE RIZZO: Ja. TOMAS Reimers: Het ons enige vrae hieroor, oor JavaScript biblioteke, die vind van biblioteke, of wat die web-ontwikkeling lyk soos in die werklike wêreld? Ons loop teen die tyd. So ek is nie seker ons gaan tyd om te implementeer te hê tensy dit is regtig vinnig. Is ons goeie? MIKE RIZZO: Enigiets wat jy ouens wil regtig vinnig in, soos om te sien twee minute of minder? TOMAS Reimers: Enigiets ons kan verduidelik? Hoe in te skryf - Publiek: [onhoorbaar]? MIKE RIZZO: Ja, so that's - TOMAS Reimers: Jy kan net getref Control-U op die webwerf. MIKE RIZZO: O, ek het nie geweet dat. TOMAS Reimers: Ek dink, ja. Control-U. Ja. MIKE RIZZO: O, so dit is die kode vir die webwerf. Maar as jy eintlik wil laai ons lêers en alles is, word dit aangebied op github.com TOMAS Reimers: streep my naam - Tomas Reimers - streep CS50 koppelteken seminaar. MIKE RIZZO: en jy kan vind alles wat daar. TOMAS Reimers: Dit is wat GitHub lyk, deur die manier. So weer, wanneer jy sien 'n oop bron projek, tipies, hulle sal 'n gelees word my daar wat jy kan lees. En as jy terug gaan, sal jy agterkom dat jy het die aflaai zip, wat sal toelaat dat jy die bron te laai kode te sluit in die produk in jou eie ding. MIKE RIZZO: Ja, en as ons net kliek op die index.html regtig vinnig - TOMAS Reimers: Jy sal hier te sien is die bron-kode vir die webwerf. MIKE RIZZO: Ook, ek het vergeet om reg te stoot voor met die groot tafel is dit ingesluit, maar daar is ook 'n tafel van chmods dat ons ingesluit Net vir jou duidelikheid. Maar as ons blaai al die pad af na die bodem, ons het nie eintlik baie doen veel met die JavaScript dinge glad met hierdie. Dit is uitsluitlik van alles anders wat ons gehad het. So dankie ouens vir die komende en luister. Ons hoop dat hierdie was regtig nuttig. Indien u enige JavaScript verwante vrae of wil net om te praat oor Wat anders soos wat ander cool dinge wat jy kan doen met JavaScript, wil ons graag met jou te praat. TOMAS Reimers: As jy 'n vraag oor jou projek of as dit kan wees relevant, ons sal waarskynlik rondom stok 'n bietjie na hierdie. Maar anders as dit, het 'n goeie naweek. MIKE RIZZO: Ja, geniet. Sien julle ouens. TOMAS Reimers: Sien ya.