TOMAS Reimers: Tere, kõigile. Minu nimi on Tomas Reimers. 

MIKE RIZZO: Ja ma olen Mike Rizzo. 

TOMAS Reimers: Meil ​​on kaks CS50s TS. Ja täna me juhtiv seminar JavaScript ja CSS web apps. Kui soovite jälgida mööda, link on seal. Ja sa tahad, et panna see üles arvuti korraks? 

Seal on link. See on väike ala, mis on lingid kõik ressursid me ei kavatse olla juhtides sind täna ja on ka palju kasulikku teavet kirjutas meile loe põhjalikumalt, kui lähete tagasi ja sa üritad mäleta, mida täpselt me ​​öelda, mida sa olid räägime, jne. 

MIKE RIZZO: Olgu. Seega alustagem. 

TOMAS Reimers: Nii et sa tahad alustada? OK. 

MIKE RIZZO: Jah. Nii me kõigepealt soovis alustada lai ülevaade interneti ja failitüüpe kavandamisel veebisaitidel. Kuigi see esitus me ei taha sattuda arvesse JavaScript palju palju hiljem, me tahtsime, et alustad lihtsalt, selline, nagu linnu silma vaadata mida kodulehel on ja kuidas mõelda projekteerimisel kodulehel algusest. 

Nii et te sel hetkel - seda on reede õhtu - peaks olema esitas oma CS50 rahandus probleem seab. Loodetavasti oli hea maitse mida veebi programmeerimine saab. Aga siin me tahame, liiki, anda sa teise maitse, samuti. 

TOMAS Reimers: Nii lihtsalt sulgege mida juhtub, kui kirjutad oma URL veebibrauser, et URL muutub vaatasin arvutis. Ja arvuti on ühendatud teise arvutisse, kes võõrustab et veebilehel. OK, nii et kui lähete google.com, oled ühendatud üks Google arvutid, mis on failid google.com. 

Siis küsitakse konkreetset faili. Nii et kui te lähete - Ma ei tea - example.com / index.html või / test.html, sa lähed küsima selles failis. Ja web server läheb tagastab selle teile. 

Siis, kui sa lähed läbi, et fail - kui sa oled arvuti saab, et fail - see läheb algusesse ehitada veebilehel. Nüüd see on HTML faili mis on omamoodi nagu struktuuri veebilehel. HTML-faili võib ka viide CSS faili, mis määratlevad stiilis veebilehele. 

JavaScript failid, mis määratleb suhtlemist veebilehe. Image faili, mis on vaid pilte. Ja võib-olla siduda teiste HTML-faile, mis saab siis külastada. 

MIKE RIZZO: OK, tore. Nii et te kõik, ehk, hoolikalt loodud kohaliku vastuvõtva oma virtuaalne masin. Ja see lihtsalt omamoodi, on kohalike domeeni, et arvuti võõrustab ainult teile teie enda IP-aadress. 

Nii selles, siis saad lisada et ta oma veebilehekülgedele. Ma mõtlen, et CS50 Finance, siis peaks olema lisatud mõned HTML-lehekülgi, mis on omamoodi, pakitud PHP ümbris. Aga lõpuks, mida teie PHP lehekülge aastal kirjutamine oli HTML. 

Aga mõtlesin tagasi Algusest Euroopa Erksa oli meil seada load kõik, eks? Nii see lihtsalt põhimõtteliselt saame teada kes saab lugeda, kirjutada ja võib-olla täita iga faili. Nii et me teeme kiirelt - hm? 

TOMAS Reimers: Nii et me teha kiire demo. Nii lihtsalt, et teile meelde tuletada, kui te ühendada Google arvuti - kes iganes - ja paluda faili arvutisse kõigepealt tuleb veenduda, et sa volitatud tegelikult silmas, et faili või lugeda, et esitada, sest sa ei saa lihtsalt küsida iga fail, mis arvutis, eks? See oleks julgeoleku ohtu. 

Nii faile süsteemid, mida me kasutame, nagu see CS50 aparaat, on kolm Üldiselt inimesed, kes võivad olla load midagi. Esimene on tegelik omanik ütles faili. Teine on grupp, mis fail kuulub. Me ei kavatse keskenduda liiga palju seda. Ja viimane asi, nagu, maailmas või nagu kõik teisedki, kes on ole konkreetselt selle faili ja ei mingit omandiõigust üle. 

Nii et kui meil on omanik, grupp, ja siis maailma. Ja siis, iga neist rühmadest, siis võib olla üks kolmest õigusi, OK, või mitu neist. Võite lugenud õigused. Sul võib olla õige õigused. Ja sul võib olla käivitamisõigust. 

Nii tegelike failitüüpe, loe luba on nagu tegelikult lugemine faili sisu. Õige loata on kirjalikult nimetatud fail. Käivitamisõigus töötab fail nagu te teete, kui teil tekib üks oma CS50 projekte. 

Nii et kui me mõtleme failid nagu siis, kui me peame lugema HTML fail, mis peab olema maailma loetav, eks? Arvatavasti ka omanik tahab et oleks võimalik muuta, et fail. Nii omanik läheb vaja lugeda ja kirjutada õigused. Nad tõesti ei pea täitma. 

Nimel, me ei kavatse ravida samas kui maailma praegu. Nii nad vajavad lugemisõigust. Aga nad ei vaja kirjutada või käivitamisõigust. Ja nüüd, kui me mõtleme tagasi endine PSETs, mida me mõistame, on seda laadi ning nägema binaarne, õigus? 1 tähistab jah. 0, kui ei. Ja me saame tegelikult tõlkima see kahekomponentsete. 

Nii 110 kahendsüsteemis oleks 6. 100 oleks 4. Sama koos maailma. Nii number saaksite jaoks Õigused sellele oleks 644. 

MIKE RIZZO: Ja kui te arvate, tagasi kui sa chmoded midagi, ma usun nad esitasid lahendamist Näiteks, kui sa võiksid teha midagi nagu chmod 644 ja seejärel faili nimi. 644 siis saate nüüd näha otse kui see pärineb. Loodetavasti muudab see natuke selgem. 

Ja siis sa mehe selgus - oh jah, siin see on jälle. Nii 600 siis oleks lihtsalt näide loobusime siin, kus omanik on lugeda ja õiguseid samas rühmas ja maailm ei ole mingeid õigusi faili avamiseks. 

TOMAS Reimers: Ja siis on meil kiire nimekiri ühiste õigused. Nii kataloogid, mida soovite tegelikult chmod 711. Kiire kõrvale - kataloog, on käivitatava loata tähendab olla võimeline avada kataloogi. Pilte, CSS, JavaScript, HTML vajadustele 644 sest põhiliselt maailma vajadustele lugeda õigused. 

Ja PHP, mida te olete näinud kuigi me ei räägi sellest rangelt tavaliselt chmoded koos luba 600, sest see on joosta lubade omanik. Vähemalt seadmele. 

MIKE RIZZO: Nii et kui sa ei ole konkreetselt täpsustada, millist tüüpi faili sa tahad tegelikult millega kuni see esitlus - meil oli probleem, sest kõik ei chmoded õigesti - sa lähed, et saada, selline, Keelatud viga, et veebisait tegelikult ei ole luba juurdepääsu mis tahes faili soovite külastada. Ja muidugi, et võib kinnitada - kui lahendamist - muutes load sobivalt. 

TOMAS Reimers: Ja viimane kommentaar kiiresti kohalik areng - me toonud selle üles, kuid me lihtsalt ei tahtnud et viia see uuesti - kui te küsite server - nii kohalikud peremehe näiteks. com või mis iganes - ja te ei määra konkreetset faili, fail, arvuti läheb küsida nimetatakse index.html. Või kui see ei ole, index.php. 

Lahe. Nii et lihtsalt sulgege kõik, Loodetavasti oleme kaetud osa ja loengus ja siiani CS50. Ja nüüd me hakkame rääkima kohta eraldi raamatukogudes. JavaScript ja CSS raamatukogud web apps. 

Nii et üks kiire miks meil raamatukogud on Programmeerimine - seal on palju probleeme programmeerimine, mis hoiavad avanemise uuesti ja uuesti ja uuesti. Te võite märgata, et paljud veebilehed vaja võimet olla rippmenüüst menüüsid, näiteks või pea võime on väga standard nupp stiili, mis ei pruugi olla kõige lihtsam asi. Nüüd, kui hakkate sattuda HTML, siis aru, et nuppe saab tegelikult vaata kole kui sa ei tee midagi. 

Nii paljud inimesed on kirjutanud nimetatakse raamatukogud. Ja selles kontekstis, et nad nimetatakse ka raamistikud. Me ei kavatse kasutada kaks vaheldumisi. Ja mida nad on nad põhiliselt premade tükid kood - kas CSS või JavaScript - mis võtab ära palju Team teil kodeerimine. 

Nii nad eelnevalt määratleda kamp klasside või eelnevalt määratleda hunnik funktsioone JavaScript juhul mis võite helistada hiljem. Ja siis saab, omamoodi, saada juurdepääs selle koodi ilma võttes midagi teha. Näide raamatukogu CS50.H. See oli raamatukogu andsime teile tagasi nädalas üks, mis võimaldas teil teha asju GetInt ja getString ilma kirjutada mingi koodi ise. 

MIKE RIZZO: Olgu. Nii et siin, nagu meil oli lisada meie c faile erinevate raamatukogud, me ka peaks sisaldama meie HTML-faile erinevates raamatukogudes. Näiteks, kui me tahame, et see hõlmaks konkreetse JavaScript raamatukogu siin võibolla üks, et me oleme kirjutanud ise, sest see on kohapeal toimus nimetatakse script.js me lihtsalt kasuta neid noteerimise. 

Nii et meil on script tüüp võrdsete JavaScript allikas võrdsete JavaScript.js. Ja kui te arvate tagasi oma CS50 rahandus lahendamist, kui te vaatasin header.php mallide kausta sa oleks pidanud nägema mõned neist lisada. Nii et see esimene - skripte - on ka JavaScript library. Sealhulgas CSS raamatukogu natuke erinev. 

Siin asemel skript Tag peate link tag. Ja siis tekst CSS tüüp on veidi erinev. Te ei pea alati sisaldama rel laadilehe. Aga ma arvan, et see on üldiselt Hea tava. 

Ja siis lõpuks, href, mida Tõenäoliselt nägi oma ATAGs siduda eri lingid lihtsalt täpsustab link kust leida seda. Näiteks, kui me tahame, et siduda erinevad raamatukogu - ütleme - mis elas styles.css. Ja me tahtsime siduda, et see on toimus veebis, me kopeerida seda. Ja siis kleepige see iganes meil on siin selle asemel. 

TOMAS Reimers: OK, loodetavasti sa olete juba tuttav kuidas siduda CSS. Sa pidid seda tegema viimase pruun komplekt. JavaScript, mõned teist võib-olla on mõned kogemused. Mõned teist ei pruugi. 

Nii et nüüd tean, et JavaScript fail on väga sarnane CSS faili selles mõttes, et saate lingi või et saaksite ka sisemiselt. Ja see võimaldab teil script asju. Ja me sõelub natuke JavaScript hiljem. 

Nii et kasutades raamatukogu - kui olete kantud, see on nagu lihtne sõna otseses mõttes kutsutakse funktsioone või lisades klass nimesid ta. Viimane asi, mida me tahame rääkida umbes nii raamatukogu - ja see on rohkem tehniline märkus - on avatud lähtekoodiga litsentse. Nii et kui sa leiad need tegelikud raamatukogud, siis võib mõelda küsimusi, nagu see on OK, et ma olen lihtsalt kasutades kellegi teise koodi, eriti sest see on midagi, mida me väga palju ütlesin, et ei tee seda muidugi. 

Seega, kui tegemist on avatud lähtekoodiga litsentse, palju arendajad - kui nad pole kirjutatud raamatukogu mis nende arvates võiks olla kasulik teiste inimestega - avaldab selle veebis ja annab loa. Ja luba põhimõtteliselt ütleb, et ma olen käesolevaga loa andmisel muu inimesed kasutada seda tarkvara koos järgmiste omamoodi erinõudeid. 

Lisasime lingi hea koht aidata teil mõista litsentse Kui sa satuvad. Ühine erinõudeid on asjad olete teretulnud kasutama oma raamatukogu nii Niikaua kui sa ei anna mulle krediiti. Oled teretulnud kasutama oma raamatukogu niikaua kui see puruneb sa ei süüdista mind. Oled teretulnud kasutama oma raamatukogu nii kaua kui sa ei kasuta seda raha teenida ise. Need liiki ühine erinõudeid. 

Sel CS50 lõplik projekt, nad ei peaks olema super oluline, kuna projekte, mis te kasutate on ilmselt pigem omamoodi, on teada. Aga kui sa tegelikult minema maailm ja hakata kasutama raamatukogu, mis võib olla või mitte olla samuti rakendada mõned enam levinud oleme läheb läbimas. See on hea, et oleks võimalik aru saada Nende litsentside ja aru, mida need tähendavad. Ja läheb tagasi. 

MIKE RIZZO: OK. Nüüd lähevad peale näited tegeliku CSS. Siinkohal seni, võite ei puutunud seda. Aga siis oleks tulnud seda oma igapäevaelus kui midagi mis näeb välja üks viis ühe brauseri ei pruugi välja samasugune kuidas teise brauseriga. 

Seda nimetatakse brauseri seadistusi ühilduvus. Ja üha rohkem on muutumas üha mitme probleemi, eriti kuna brauserid võtma üha enam vabadusi rakendada asju, nagu nad tahavad. Nii, et ületada, et seal on tegelikult suur raamatukogu kutsus Normalize.CSS. 

TOMAS Reimers: Lisasime link. Sel hetkel, see on kasulik, kui olete oma sülearvuti olemas vaadates kohas. Ja me anname teile seda parem nüüd lihtsalt sellepärast CS50 lõplik Projekt on tegelikult läheb palun teil seda rakendada sarnaselt kaudu brauseritega. 

Nii lihtsalt hoida tagasi oma pea, see on suurepärane raamatukogu kuna kaaspüüki, omamoodi, standardiseerida asju. Firefox, midagi võib näidata ühe piksli vasakul. Ja siis Chrome võib otsustada, et tegelikult mida sa mõtlesid oli 10 pikslit vasakule. Ja sa tahad, et ühtlustada seda. Normaliseerimine on tegelikult tõesti hea tööd teha kindel, et teie sait ootab sama kogu brauserid. 

MIKE RIZZO: Nii et kui me tahtsime lihtsalt linki tõesti kiiresti ja näita sa, mida see välja näeb, siis saab alla laadida, kasutades hiiglane nuppu Laadi alla. Või ma kutsun teid üles lugeda rohkem see klikkides see link alumises paremas nurgas. 

TOMAS Reimers: Ja kui sa tegelikult kliki Loe edasi seal - Klõpsake allikat GitHub - saate tegelikult näha avatud lähtekoodiga litsentsi LICENSE.md seal. Ja te näete, siin on väga populaarne MIT litsents. Jällegi, kui sa loed läbi teksti, Teil on võimalik leida see sait me viidatud enne ja suutma aru, et pole vaja lugeda läbi õigusliku kõnepruuki. 

MIKE RIZZO: OK, tore. Nii et normaliseerimine. Me tahtsime teile et tõesti kiiresti. Oh, teil on küsimus? 

Publik: Nii et kui sa selle alla laadida, siis järgige selle koodi, et nad on all nuppu Laadi alla? 

TOMAS Reimers: Jah, nii kui sa alla laadida - 

MIKE RIZZO: Oh, see on tore koht. Nii et küsimus on, kuidas seda teha me tegelikult selle alla laadida? Nii et kui me lingil, näeme see, et tegelikult hüppab lähtekoodi. Nii et seda, mida me võiksime tegema, on lihtsalt käsku Salvesta nimega. Save As ja mis peaks vajalikud failid. Ja siis saab salvestada seda normalize.CSS. Ja siis on teil siduda see - 

TOMAS Reimers: samamoodi kui viitavad muul faili. Ja kui sa link seda, mis on hea umbes normaliseerimine on see tegelikult hoolitseda kõigi hard töö iseenesest. See tähendab, et sa ei pea lisada mis tahes liiki. 

Sa ei pea midagi tegema, imelik. See normaliseerub ilma sinuta tee midagi edasi. Jah, sa pead selle lisada. Google Chrome ei reageeri. 

Lihtsalt kiire kõrvale - Märkasin me hüppas seda. Ülejäänud see esitus on saab kiire ülevaate. Uuring raamatukogudes. 

Põhimõtteliselt, mida nad on. Mida nad teevad. Kuidas on need kasulikud. Kuidas te võite neid rakendada. Kui te soovite alustada vaadates neid, järgmine mööda ja lugedes neid, ma väga julgustavad. 

Teise olete teretulnud ka alustada allalaadimist need ja ka nende silmis lihtsalt näha, mida nad nägema või mida nad teevad, kui teil on sülearvuti ees. Kui ei, siis oled teretulnud pidama kuulates meile rääkida. Me läheme edasi rääkida. Ja meil on aega lõpus, loodetavasti me tegelikult satuvad näidates teile mida mõned neist raamatukogud nägema. 

MIKE RIZZO: Cool. Olgu, nüüd räägime umbes Font Awesome. 

TOMAS Reimers: nii Font Awesome on tõesti kena sait, eriti neile, meile, kes on vähem kunstiliselt andekas. Ignoreerimine nimi Font Awesome, see annab sa hunnik ikoone, mis on väga kasulik. Nii palju kordi sa ellu ikoon võiksite nagu kena x nii et saate sulgeda midagi. 

Või te võiksite mingi Edit nupp pliiatsi joonistus nagu kõik teised on. Ja see, kui sa õpid, et juhtides neid ikoone saab väga tüütu ja raske. Font Awesome - kui te tegelikult saidile minna - annab teile palju ikoonide all ikoonide ülaosas. Jah, ainult top. See annab teile palju Ikoonide tasuta. 

Siin näete meil asjad tärn, baarid, äikest, kalender, bug, raamat, jne. See võib olla väga kasulik. Kuidas sa lisada see on teil lisada sõnalt CSS faili. Ja kui sa oled kaasatud CSS faili mida saate teha, on loote sildi I. satands eest ikoon klassi FA seisma Font Awesome. Ja siis, ükskõik klass tahad. 

Nii et kui ma tahtsin ikoon Selle pluss ruut siin, ma annaks see klass FA. Ja siis FA sidekriips pluss sidekriips ruut. 

MIKE RIZZO: Cool, OK. 

TOMAS Reimers: Ja siis viimase CSS raamatukogu tahame saada läbi me oleme püüame hoida seda minimaalse CSS raamatukogude, sest me mõistame, pealkiri see esitlus on JavaScript raamatukogud. Aga me arvasime, et meil võib samuti tutvustada teile teiste raamatukogude kui me rääkisime raamatukogudes. 

See on Google Web Fonts. Ja mida Google Web Fonts võimaldab tegema, on lisada fonte oma veebilehel, mis on tõesti lihtne viis teha seda ilus ja eristada oma komplekt alates kõik teisedki on, kui see on kena font või kui tal on kena kogumise fonte. Google Web Fonts on kena erinevalt teistest raamatukogud selles mõttes, et see on tegelikult juhitud paigaldus. 

Nii et kui te järgite link, see on google.com / fonts, ma usun. Kui te järgite seda, sa valida oma font. Sa võid valida vasakul alates paksus, kaldu, jne. Ja siis, kui olete valinud ühe, võite klõpsata kiire kasutamine. Just seal. All paremas nurgas kasti. 

Ja siis keri. Esiteks, nad teile CSS sa pead tegelikult lingi. See on seal. Sa võid kopeerida ja kleepida, et sisse Ja tore asi see on sa tegelikult ei pea isegi faili alla laadida. 

Mis see saab teha, on, et see saab linkida Google'i versiooni. Nii tagasi mida see tähendab. See tähendab, kui kasutaja laadige fail - laadib oma HTML-lehe - HTML leht läheb viide sellele failile. 

Niisiis, arvuti näeme, Oh, see on majutatud google.com pigem kui theirsite.com. Lase mul minna küsida Google, et fail. Ja siis see läheb lisada peaaegu nagu see oleks osa teie oma saidil. 

TOMAS Reimers: Cool. Ja kui teil lisada, et seejärel lisada selle oma CSS, see annab teile tegelik liin. Nii seate vara font võrdne nime oma font. 

MIKE RIZZO: OK. Nii et me lihtsalt viimistletud CSS. Ja mõned võite olla mõtlesin, noh, meil oli mõned CSS CS50 Finance. Kuid CSS raamatukogu oli bootstrap. Me tegelikult sisaldavad Bootstrap vähe hiljem alla JavaScript sest Bootstrap CSS raamatukogu ka kaasas palju JavaScript et Bootstrap või Twitter - kes tegi Bootstrap - kasutab, et hallata kõiki oma CSS. 

TOMAS Reimers: Kas keegi mingit küsimused siiani umbes CSS üldiselt? Oleme hea? Lahe. 

MIKE RIZZO: Awesome. 

TOMAS Reimers: Nii liigub edasi JavaScript. 

MIKE RIZZO: Nii et me tahtsime rääkida umbes jQuery alustada. Kas keegi on kuulnud jQuery enne või seda kasutanud? Jah, paar? Nii et kui sa tööd emakeelena JavaScript, leiad ennast kirjutades palju pikk valijad palju. Mis siis jQuery ei ole see annab kena ümbris JavaScript keel, mis võimaldab teil kergesti valida ja manipuleerida erinevate elementide dokumendis objekti mudeli veebilehe või DOM, mis ma arvan Te olete kuulnud sisse loeng selles punktis. 

TOMAS Reimers: Kui sa ei ole kuulnud või kui te ei ole jälginud loeng veel Document Object Model on põhiliselt, kuidas asjad on esindatud. Nii HTML omamoodi välja nagu puu kui sa tegelikult seda välja tõmmata. Sul on HTML element peal. Sul on pea ja keha. 

Ja siis sees, et sa on kõike muud. Seda nimetatakse DOM - Document Object Model. Nii mudel, mis esindab objekte dokument on lihtne mõelda, sellest. Ja üks suur asi jQuery on see tõesti teeb liiklevad mis ja manipuleerides elemente et uskumatult lihtne. 

Nii lihtne, et tegelikult enamus JavaScript raamatukogudes või kui ei häälteenamusega grand enamus neist näete tegelikult vaja jQuery nii et nad võivad töötada ise lihtsalt sest kui sa ei ole jQuery, siis oleks jäätmete palju aega püüdes nuputada, kuidas valida teatud elemendid ja kuidas teha muid asju. Ja teine ​​suur asi jQuery on see, et see rist brauser ühilduvad. 

Seega pidage meeles, tagasi, kui me ütlesime, et kõik brauserid ei rakendada asjad samamoodi? See on tõsi, isegi JavaScript. Ja üks suuri asju jQuery on, et see aitab tuvastada brauser ja avastamiseks sobiv meetod. 

Nii et kui teil on vaja valida element, Internet Explorer võib öelda, et sa oled peaks tegema nii. Firefox võiks öelda õige viis on niimoodi. jQuery ei hooli. Kui sa ütled jQuery valida element siis nuputada, kuidas see on peaks tegema seda jooksul brauser kasutaja on praegu, ja tehke seda nii. 

MIKE RIZZO: Nii ärme räägime kasutamine jQuery natuke. Just nagu PHP, jQuery on eriline kiindumus dollari märk. Nii et sa leiad, et iga jQuery - Noh, mitte kõik. Võite mõnikord asendada dollar kirjutada sõna jQuery. Aga üldiselt, lihtsalt sellepärast, et see on lühem, kui näed jQuery on kasutatakse seda tulen dollari märk. 

Nii et siin me oleme lihtsalt näitab alguses selektor element DOM. Siin on dollari märk, millele järgneb avatud sulgudes ja siis jutumärkides. Ja sees hinnapakkumisi minna meie valijad võtta erinevaid elemente. Just nagu CSS, vajasime selektorit saama stiil erinevate elementide lehekülje sees. Need erinevad valijad tõlkima täpselt arvesse jQuery ja JavaScript, jaoks enamasti. 

Nii et siin me oleme dot suva. Nii et kui te mäletate loengu dot tähendab lihtsalt klassi. Nii et me valides element klassi suva. Nii et kui ma edasi minna ja avada meie JavaScript konsool siin tõesti kiiresti lihtsalt näidata seda, kui ma lihtsalt kirjutada dollari märk, siis näeme, et see on mingi funktsioon, mis kerkib. Ja see on lihtsalt määratud jQuery. 

TOMAS Reimers: Neile, harjumatu, konsool on vahend jooksul Chrome, mis võimaldab teil, Põhimõtteliselt joosta JavaScript Praegune lehekülg. See leiad uskumatult kasulik, kui sa oled tegelikult silumine ja te olema nagu, milline on praegune väärtus mõned globaalse muutuja või mis on midagi muud? See on selline nagu GDB välja arvatud et saate tegelikult manipuleerida elemente lehele see palju lihtsam viisil. Ja ka see ei ole, põhimõtteliselt kontrollima sinuga koos, enne kui ta midagi teeb. 

Nii et, GDB võib olla meeldib, sa oled kindel, et soovite käivitada järgmine samm? Konsool on reaalne. Nii nagu veebileht muudab ja teha kõik ta teeb, nõukogu ka töötab kõrvuti see. Ja võite panna omistada kood et konsool, mis käivitada lehel. 

MIKE RIZZO: Nii sisestada konsooli, Ma arvan, et ma lühidalt rääkimata, kuidas seda teha. Viimase probleeme, mis võivad olla Kasutatud Chrome kontrollida element funktsioone või vaadata lehekülje lähteteksti - ja need on kättesaadavad ainult parema klõpsates lehe või konkreetse element ja teeme kas kontrollima element või vaadata lehekülje lähtekoodi. Saame kasutada ka JavaScript konsool otse valides kontrollida element. Siis sa lihtsalt tabanud konsool kaugel paremal küljel. 

Teine võimalus oleks ka läinud ülemises paremas nurgas, mis on ära lõigatud sellel ekraanil, kus tal on kolm horisontaalribadega. Ja sa minna vahendid ja siis JavaScript konsool siin, kus saab näha - vähemalt Windows - Otsetee on kontrolli Shift J. Siis kui me tahame, et valida element jooksul seda lehte, nagu ma näitasin enne teeme dollari märk avatud Sulgudes ja siis hinnapakkumisi. 

Huvitav asi on see, üldiselt, ülakoma ja jutumärkide on vahetatav. Nii palju inimesi lihtsalt kasutada ühe hinnapakkumisi, sest nad on kiiremini tippida kui jutumärkides, sest sa ei tea pead hoidke Shift. Nii et ma tegin seda just nüüd. 

Ma tahan, et valida midagi klassi. Container, lihtsalt sellepärast, et ma tean, et see midagi, mis on meie veebilehele praegu. Ja ma Enter. Ja me näeme, et see on valitud see. Nii et see näitab üles, et ta tagasi, et objekti. Nii et on põhiline valik. Kui me tahtsime tegelikult manipuleerida seda, siis oleks helistada midagi selle valiku põhjal, mis me sattuda hiljem. 

TOMAS Reimers: Nii lihtsalt vaadata, et rohkem sügavuti, see ei erine kui funktsioon nõuab tegime C. Funktsiooni nimi on siin natuke imelik. See on dollari märk. See on lihtsalt nimi funktsiooni. Ei ole midagi erilist selle kohta. 

Meil on avatud sulgudes. Siis on meil üks argument, mis sel juhul juhtub olema string, mis on selektor seda. Ja siis on meil suletud sulgudes. Nii see on. 

See ei ole nii tohutult erinevad. Kuigi, see ei vaata väga imelik. Ja see võib olla omamoodi, kleepumist Point on palju inimesi. 

MIKE RIZZO: Nii Samamoodi, kui me tahtsime Valige element, mis on ID, nüüd tahame Valige ID asemel klassis. Oleks sarnane asi, kus me lihtsalt teha teravaid märk ID. Nii et me valides siin kõik elemente, mis on ID bar. 

TOMAS Reimers: Ja see ulatub. See CSS ulatub. Just nagu CSS, saate valida, kas kõik lingid, mis on klassi suva. Siin see on sama asi. 

Sa võid seda teha a.foo, mis valida kõik sidemed klassi suva. Sa võid seda teha järsku bar, mis oleks vali link ID-baar ja nii edasi ja nii edasi. Iga CSS valijat on kehtiv jQuery valijat. 

MIKE RIZZO: Jah. OK, nii et nüüd lähme sattuda natuke manipuleerimist, et me saame teha koos meie jQuery. Nii jQuery on teatud tüüpi Märke, kus me lihtsalt kasutada dot lõpus. Ja sa ei mõtle seda nagu C, kui meil oli erinev structs. Ja minna neid structs, siis oleks kasutada dot sattuda neile. 

See on omamoodi sarnane asi. Ainult nüüd on täitmiseks kõnealuses saab valida saame kutsuda seda. Nii et siin on väga esimene näide näete on CSS valijat. Ja põhimõtteliselt, mida see teeb, on see kehtib esimese elemendi CSS käesoleva asi, mida ei valitud - see element, et sa ei valitud - väärtusega, mis. 

TOMAS Reimers: Nii lihtne tõlge mis oleks, kui jQuery, põhimõtteliselt lihtsalt võttis suva. Ja siis CSS ütles punast värvi ja tihe. See on sama mõte. Mis see on tehtud on see valik kõik suva elementi. Ja siis see on rakendatud. Omamoodi, kinnisvara värv võrdub punane. 

MIKE RIZZO: Samuti saame muuta ka täitekoguse mis on näidata HTML lehe, mis on tõesti lahe, sest see tähendab, et teie veebilehti saab nüüd täielikult dünaamiline ja ei pea olema staatilised mis sa välja printida, kasutades PHP aasta algusest lehekülje laadimist. Nii siin, kui me tahame, et muuta tegelik HTML lehe oleksime nüüd kutsuvad HTML funktsioon, mis siis lihtsalt lisab iganes me täpsusta et element, mis me valisime. Nii et siin me oleme valides elemendi klass suva ja siis öelda, et see on HTML see on nüüd tere. 

TOMAS Reimers: Ja kui sa arvad mis on kasulikud rakendused see on see CSS üks esimene asi, mis võite hakata mõtlema, on mõttes isegi rippmenüüst. Sa võid hakata tegema asju, kui kasutaja hõljub üle ülemise osa ning rippmenüüst, sa tahad teha alumine osa nähtav. Eks ole? 

Nii et CSS on meil omadused teha midagi nähtavaks. Asjad ekraan koolon none muudaks see nähtamatu. Display block oleks teha see nähtavaks. Või isegi kui sa tahad minna lihtsamat, siis on asjad nähtavus võrdsete nähtav ja nähtavus võrdub peidetud. 

Ja siis võiks hakata rakendama asjad nagu rippmenüüst õige pärast saad läbi idee, kuidas saate aru saada, kui see avaneb, mis me saame läbi väga lühidalt. Aga me saame alustada näha rakendusi seda. Sarnases tähenduses, kui sa olid püüda ja rakendada, oletame, chat mootor ja sa tahad teha vähe õhupalli tulla, kui olete sain uue kirja, kui sa saad uus sõnum, mida saate teha natuke õhupalli tulla muutes HTML lehe, eks? Lisades, et ekstra õhupalli ekstra teksti seal. Jah? 

Publik: Et siis kinnistada see jooksul HTML koodi omamoodi nagu [Kuuldamatu]? 

MIKE RIZZO: Õigus. Jah, me saame selle aastal natuke. Jah, see on sarnane natuke PHP. Mitte päris sarnased. 

Hea vahet teha, mida see tegelikult redigeerimise kui me muuta lehte, sest see ei kavatse olla toimetamine tegelik fail, mis on hoitakse serveris, kuna maailm ei ole luba redigeerida faile. See on lihtsalt redigeerimise mis lehel ja mis on nähtavad brauserit. Nii et kui sa olid asendusostu lehekülge pärast, öelda, jättes midagi, kui me vaata me saame teha koos eemalda kõne et asi oleks siis uuesti. 

TOMAS Reimers: Nii üks viis mõelda see on siis, kui ma olen oma arvuti ja Mike on omamoodi, server. Mis juhtub on, et ma lähen küsi Mike, hei, kas ma saaksin koopia Selle veebilehe? Ja ta annab mulle koopia. 

Ei, see ei ole originaal asi. See on lihtsalt koopia. Ja siis see oleks nagu, oh, pole JavaScript siin. On selge, et ma tuleks redigeerida leht olema. Ja ma oma koopia redigeerimise. 

Aga see ei ole kõrvale tegelik koopia. Ja kui ma palun tal uuesti värskenda lehekülge, - Hei, kas ma saaksin veel puhas koopia - ta läheb mulle teine ​​puhas koopia. Ja siis ma teen sama asja nagu, oh, see JS siin mis ütleb muuta seda. Ja ma lähen hoida tehes. 

MIKE RIZZO: Nii tõesti lahe asi , mida saate teha koos jQuery on tegelikult lisada erinevaid animatsioone lehele. Ma ei tea, kas olete näinud, kus üritate täitke vorm Internetis ja te ei täida asjad õigesti. Nii väike asi liigub alla ülaosas ja ütleb, et sa ei ole seda teinud õigesti. Palun proovige uuesti. Ja siis ta võib isegi lihtsalt slaid. 

Selgub, jQuery on sisseehitatud funktsioonid et teha kõik, et animatsiooni tõesti lihtne. Seega on esimene fade out funktsioon, mis võite helistada midagi. Ja see on viis muuta CSS et element animeeritud viisil. Nii et see võtab tahes element sa seda fade välja. Ja siis, aeglaselt muutub see läbipaistmatust kuni see läheb täiesti läbipaistev. 

TOMAS Reimers: teine ​​populaarne on slaidi alla, mis muudab midagi ilmub, libistades seda allapoole. Seega juhul, kui rippmenüüst uuesti, kui saime teada, kuidas avastada kui see on tiirles üle, võid lihtsalt öelda seda alt osa lükake alla nüüd. Ja siis tundub, libistades alla. 

MIKE RIZZO: Ja siis, kui sa lihtsalt teatud tüüpi animatsiooni meeles, et jQuery ei pruugi anda. Näiteks oletame, et jQuery Mis annab teile slide alla ja lükake see üles. Noh, oletame, et sa tahtsid libiseda midagi vasakult või alates õiget nagu CS50 esilehele teeb alati te lähete uus paneel. Sa oleks siis ilmselt rakendada seda ise, kasutades animeerida funktsiooni jQuery. 

Seega sarnaselt, sa lihtsalt animeerida. Ja seejärel, selle sees kulub sõnastik erinevate väärtustega et sa peaksid läbima. Nii siin, kui me tahtsime animeerida element foo selline, et selle laius kas Näitab või lepinguid 80 pikslit, sõltuvalt sellest, mida see praegu on. Me lihtsalt edasi, et kui argument sees. 

Animeerimine on ka mõned teised argumendid et siis võiks edasi see näiteks kiirust animatsioon et sa tahad seda. Ja et seda teha, ma lihtsalt öelda, kiiresti Google jQuery animeerida. Ja siis, kasvatab seda lehte, saate vaata see sai hunnik erinevaid omadusi, mis saab edasi seda. 

Ja ma kutsun teid - kui sa tuled kogu midagi, et te ei teavad või lihtsalt tahad rohkem teada saada eriti meetod, mida saab helistada midagi - just google ta. jQuery on väga hästi dokumenteeritud. Ja sageli korda on palju näiteid, et nad pakuvad teile. Kui me keri - tee alla - et saame kasutada, samuti. 

Jällegi, kui arendaja tegelikult läheb läbi vaeva kirjalikult raamatukogu, nad tavaliselt tahavad keegi seda kasutada. Nii kõrval läheb olema dokumentatsioon. Ning et dokumendid saab tavaliselt leida projekti lehel, mis on Miks me andsime teile, et algne sait Alguses, mis seob teid Projekti lehti, nii et saate näha, et dokumendid. 

Tavaliselt on projekti lehekülg puhul kohta [kuuldamatu] see ju ütlesin nimed klassides. Juhul javascriptist annab te nimi funktsioone. Muide, kui me liikuge üles tippu, kiire pool märkus funktsioonide kui näed funktsiooni rakendada niimoodi raske sulgudes keskel, et vahendid et see vara on vabatahtlik. Lihtsalt heads-up. Olen näinud palju küsimusi sellest. 

Nii et siin me näeme, et animeerida võtab omadused kui vaja argument. Ja kõik muu on vabatahtlik. Side märkus - sa ei mõtle sellele, sorteerida kohta, nagu mees lehekülge. Man lehekülge dokumentatsiooni C ja jaoks palju muid asju, samuti. 

MIKE RIZZO: Me oleme õppinud, kuidas muuta erinevaid CSS lehel animeerida, ja eemaldada lisada HTML. Kuid üks tõesti võimsaim asju JavaScript ja eriti jQuery - mida ta saab teha, on vastata erinevaid elemente, mis juhtub. Näiteks on meil siin sündmus. Ja see tähendab lihtsalt, kui see Kui juhtub, et me sellega hakkama teatud viisil. 

Nii et siin on geneeriline jQuery sündmus käitleja täpiga. Ja siis esimene asi, mida sa ette on see, mis juhul peaks kuulata jaoks. Nii et siin, see klõps, et ootame. 

TOMAS Reimers: Teine võimalus on Hoverissa, mis on väga populaarne. Nii tagasi mu rippmenüüst idee. Sa oleks top üks hõljuma. Ja siis võib seda muuta. 

MIKE RIZZO: Õigus. Ja siis, kui see juhtub, see lihtsalt täidab seda funktsiooni, et me anname seda kui argument ning et see hoiatab tere või tere. 

TOMAS Reimers: Nii puhul JavaScript on see koht peame eemalda end C. me saame tegelikult võta toimib argumendid. Ja seal on palju tõesti keeruline, kuidas seda teha. Me edendada üks viis, mis saab määrata toimima seal. 

Nii et kui sa palud funktsiooni parameeter, sa oled põhiliselt just läheb määrab funktsiooni kohapeal. Ja kuidas saab määrata funktsiooni JavaScript on teil sõna otseses mõttes öelda funktsiooni. Siis tavaliselt nime ning funktsiooni. Aga me ei kavatse viide Selle funktsiooni jälle. Nii me jätame selle nimetu. 

Siis sulud, siis lokkis traksid ja siis koodi mis. Nii et me sellest aru saab olla natuke segane. Nii anname üldine vorm Mis sündmus näeb allpool, mis on sündmuste kohta. Ja siis, oma koodi sees, et. 

MIKE RIZZO: Kas on olemas küsimused selle kohta? See võib olla natuke segane Esmakordselt näed seda. 

TOMAS Reimers: Sa tegelikult tahad avada fail ja näidata neile mõned jQuery kohe? 

MIKE RIZZO: Jah, teeme seda. OK. 

TOMAS Reimers: Nüüd oleme seadmesse. Ja see, mida me oleme teinud, on meil tehtud vabadus luua nii index.html fail, mis seob JavaScript-faili. Ja me saame avada - jah. Noh, see kahte asja. 

Esimene on see seob JavaScript-faili. Ja me näeme, et siin. Me näeme, et juht HTML dokumendi, eriti. Nii et te näete seal, et me põhiliselt öelda SRC, mis tähistab allikas. Ja see URL. 

Nii et siin sa ei saa öelda, et me oleme lisatud jQuery. Ja me oleme ka skripte. Muul viisil kaasata JavaScript on , mida saate lisada inline script tag, kui meil on allosas, kus see ütleb script tüüp on tekst JavaScript. 

Nii me ütleme, kuula, me oleme kohta lisada skripti. Ja tüüpi, et skript on JavaScript, mis on teatud tüüpi teksti. Väga lihtne. 

MIKE RIZZO: Nii et see, millist, saab küsimus, kuidas me hulka JavaScript meie failid, sest kui me oli PHP, me teeme midagi sellist. Ja siis on meie PHP funktsioonid - Ütleme varude teha midagi, mis - läheb sinna. Kuid nüüd on meil script silte et me anname seda, mis on tegelikult osa HTML ise, sest see ei ole teeskleb on HTML faili nagu see on PHP, sest kui sa tegelikult minna ja pilk allikas lehele näete neid script sildid seal koos JavaScripti seostatud neid selles. 

Niisiis, kui me tahaksime kirjutada mõned JavaScript - ütleme lihtsalt tahtsime muuta keha sest praegu ei ole mul muu sildid, mis suudan tõesti muuta peale keha. Ütleme nii, et ma tahtsin muuta CSS sellest. Nii me edasi minna ja muutus värvi see punaseks. 

Nii et ma salvestada faili. Lähme tagasi meie veebilehele, värskenda, ja ta teeb seda automaatselt sest see ei tundu nagu ta ootas üldse, sest me ei kuulanud sündmuse või midagi sellist. 

TOMAS Reimers: Kui me läheme tagasi, et esitada eriti - HTML faili - mida sa lähed näha, on meil - pidage meeles, et see on laetud, omamoodi järjestuses. Nii et meil on esimene juht. see laeb need kaks faili. Siis läheme keha. Ja me näeme, tere. Nii me muuta tere. 

Ja siis viimane asi, mida me peame on meil script tag. Nii see töötab script tag, sest see on ei ütle ta oodata midagi. Ja see on kõige elementaarsem viis näidata JavaScript. 

Olles seda öelnud, on võimalik paned script tag üles päises lihtsalt näidata selles küsimuses? Ja käivitada see. Me märgata, et see ei muuda värvi. Ja see on üks probleeme JavaScript on, et asjad on koormatud kronoloogilises järjekorras. 

Seega ajal, et see kood jooksin valisime - tagasi minna - body. Body veel ei ole, sest JavaScript on kooskõlas HTML. Nii brauser on nagu valige keha. Seal ei ole sellist asja veel. Nii et me saame seda ignoreerida. Ja me jätkame. 

Ja siis me defineerime body. Aga kunagi saab ajakohastada. Nii et kui sa oled rakendamise script tags veenduge paned pärast body. Järgmine slaid. 

MIKE RIZZO: OK. Nii oleme muutnud midagi. Aga see ei paistnud ta reageeris meid üldse, sest see lihtsalt selline tegin seda niipea, kui see laetud lehel. Nüüd, selle asemel, et seda teha, siis miks ei lisame sündmus. 

Teeme midagi keha uuesti. Ja oletame, et me seda teha - klõpsake. Lisame funktsiooni. 

TOMAS Reimers: Muutkem see punaseks uuesti. Miks mitte? 

MIKE RIZZO: Jah, teeme muutus selle "punaseks uuesti. Hea küll. Teeme asendusostu lehekülge. OK, me näeme - ootuspäraselt, ei punaseks veel. Aga siis me saame minna ja klõpsake seda. 

TOMAS Reimers: Ja see punaseks. 

MIKE RIZZO: Ja see punaseks ootuspäraselt. 

TOMAS Reimers: Ja me näeme, kuidas saame hakata ehitama väga lihtne suhtlemist. Muud asjad, mida me võiks teha tahad on, kui me ei taha, et keha Värv punane, teeme HTML taustavärv punane. Just nii see on sama CSS. 

Ja kui me seda muuta, näeme seda väga dramaatiline mõju muutmata terve lehekülje. Nii et taas, kui sa rakendatakse asjad, sul võib olla üks osa mis on mõeldud jälginud. Ütleme Exit nupp ja kogu muu osa, mis on mõeldud reageerimiseks. Nii et sa kaotaks aken kui see juhtub. 

MIKE RIZZO: OK. Nii nagu näiteks - sa ei saa näha seda varem - Ma lihtsalt näitan sulle, kuidas see välja nagu siis, kui me midagi varjata. Nii et ma minna ja ärge lükake üles. 

TOMAS Reimers: Tahad pakkima, et Lõike tüüp, enne kui me seda teeme? 

MIKE RIZZO: OK. Jah, miks me ei tee seda lihtsalt nii saame valida seda veidi rohkem. 

TOMAS Reimers: Ja olgem anna see klass. 

MIKE RIZZO: Jah. OK, nii et vaatame. Selle asemel, valides tegelik keha nüüd, ma lihtsalt vali kõik koos klass tere, mis siin me on ainult üks asi. Nii et me ei peaks muretse. 

Nii et ma värskendada. Ma lähen edasi ja klõpsake seda. Ja see, omamoodi, tegi imelikke slaid up asi, mis ei paistnud, et atraktiivne. Üldiselt nad näevad päris kena. Ma arvan, et see - mõned põhjus - ei ole. Ma lihtsalt ei fade välja nii võite vaadata ka seda. Palju kenamaks. 

Ja siis, kui ma avada JavaScript konsooli uuesti ja me tahame näha, mida see näeb välja nagu siis, kui me fade see sisse Nüüd ma lihtsalt helistada Tugevneda peal. Ja see kaob uuesti sisse 

Samamoodi võiksime tegelikult ka edasi argument, et Tugevneda või hajuvad, mis on selline, kiirus seda. Lähme edasi ja ütleme, et me tahame see minna aeglaselt tuhmuma sisse Nii et ma arvan, et see ikka tundus päris kiire. Aga see oli aeglasem kui enne. 

TOMAS Reimers: Ja kui sa tahad teada rohkem neid asju jälle minge jQuery dokumentatsioon, mida me oleme teile ja lugeda läbi nende. Nad dokumenteerivad oma ülesandeid uskumatult hästi. 

MIKE RIZZO: OK. Nii et ma arvan, et lähme tagasi siia. Ja me saame rääkida meie viimasel leheküljel. Noh, me ei lõpeta Bootstrap. Ja siis me seda avatumaks mõned küsimused. Ja kui te poisid on mingeid ideid, sa tahaks proovida öökima ja vaata kas saame rakendada neid JavaScript kiiresti. 

Nii et tõesti kiiresti umbes Bootstrap, mis automaatselt lisada Teie viimane probleem sätestatud CSS kausta ja tegelikult seotud oma header.php. Nii et sa oleks võinud anda klasside on määratletud jooksul Bootstrap ta. Ja see oleks automaatselt stiilis neid asju vastavalt. 

TOMAS Reimers: Nii Bootstrap on väga maagiline asi töötanud inimesed at Twitter. Ja mida ta pidi tegema, oli - enne veebilehed olid tõesti raske teha vaata ilus, eriti kui meil oli palju ühiseid detaile. Nii palju nuppe web vaatasin sama. 

Palju väljadel saab teha vaata parem kui standard teksti valdkonnas te ilmselt teate on tõesti vana veebilehed või tõesti halvasti tehtud veebilehed, mis lihtsalt välja nagu grammatiline tekstiboksides ilma igasuguse teksti vari või mis tahes kena ülevaate. Mis siis Bootstrap tegin oli see ütles ka, meil on palju ühist stiile. Miks me ei võiks teha ühe ühised CSS ja ühised JavaScript kuna hästi, mida saab stiil nagu on ja mis võib anda inimestele asju drop menüüde, mis võib anda inimestele asjad modals. 

Modal mida hüppab üle lehe kui see on rangelt võttes midagi, mis pärsib edasist koostoime, kuni te suhelda ta. Midagi sellist on, oled sa kindel, soovite kustutada selle asja? Sa ei saa tõesti midagi muud teha kuni sa öelda jah või ei. 

Ta võttis kõik see ja see on pakendatud see kokku ja ütles, siin me läheme. Inimesed saavad nüüd kasutada seda. Ja leiad selle üle kell getbootstrap.com. See automaatselt kuuluvad viimase lahendamist. Ja sa oled rohkem kui teretulnud kasutada seda oma lõpliku projekti. Ja kui sa tahad jälgida, et link saada Bootstrap. 

Näete siin Bootstrap CSS kohas. Näete Bootstrap. Ja kui sa keri, näete kuidas alla laadida, kuidas installida, jne. 

MIKE RIZZO: Ja te saate ka Huvitaval kombel on kohandada seda olema olenemata sellest, millist teemat mis sa tahad. Ma tean, et see on midagi, mida ma ei teinud minu lõplik projekt kui ma võtsin klassi aastal kohandada seda. Erinevat versiooni Bootstrap et oli erinev värvilahendused ja erikujulised mõnede erinevaid asju. Nii et ma kutsun teid mängima sellega. See on selline lõbus teha. 

TOMAS Reimers: Otsin ülaosas jällegi, see on väga sarnane Font Awesome site. Palju dokumentatsioon hakkab tunduvad sarnased, kui olete näinud piisavalt. Nii et siin on meil CSS komponendiks. Ja te näete, kuidas see saab stiili asju. Nii et kui klõpsate tabelid, näiteks saate koheselt muuta tabel päris lisades vaid klass tabeli ta. 

Sama asja eest nuppe. Kui sa lihtsalt lisada klassi BTN ja BTN maksejõuetuse või BTN esmane saate saada mõni neist nupud neid eelnevalt tehtud stiile. Ja siis, kui sa otsid midagi keerulisem kui lihtsalt restyling mida w juba üle edasi JavaScript tab ülaosas me on hunnik komponente. 

Nii et siin on meil üleminekud modals, rippmenüüst, klapid ja vihjed saab. Tooltip mida hüppab alla oma hiirt, kui sa hõljuma midagi. Popovers, alarmid, nööbid, kokkupandav akordionid, mida nad tavaliselt nimetatakse. Karussellid, mis flip läbi nagu pildid. 

Nii et need on komponendid kohta alglaaduri. Ma kutsun teid üles väga minna vaatama neid. Seal on JavaScript osa ja CSS komponent. Julgelt neid kasutada soovite. Me ei lähe liiga palju neid sest me tunneme dokumendid on tõesti hästi tehtud. Ja jah. Kas teil on mingeid küsimusi selle kohta? 

MIKE RIZZO: Nii nagu on tõesti kiire külg, kujunduse see veebileht, me kiiresti kokku panna see esitus on tegelikult teha kasutades Bootstrap. Nagu näete, kui me kliki neid erinevad sakid, me tegelikult ei jättes selle praegune index.html lehel. Nii, mis meil on erinev divs selles index.html. Ja siis, kui me klõpsa eri tab, et see on lihtsalt muutumas Milline neist näidata. 

Seega vastavalt positsioonides nende muudab HTML lehe nii, et aktiivne sakk on märgitud kui aktiivne nii tundub erinevalt ja välimus tõesti kena. 

TOMAS Reimers: Nii et kõik toimub ilma meile kirjalikult peaaegu iga CSS. Näeme ka header ülaosas, mis värvi on meie poolt. Kuid tegelik panemise lehe algusesse ja teha see rullraamat oli Bootstrap. Ja siis isegi veel raamatukogus - see ei ole üks rääkisime vaid üks saate Google, kui soovite. Seda nimetatakse prettify.js. Ja siis süntaksi esiletõstmise oma kood sa kasutad nii CSS ja JavaScript. 

Viimane asi, mida me tahame rääkida enne kui me ei vabasta sind viidud maailma vaadata raamatukogude nuputada kuidas neid kasutada ning loodetavasti loe dokumentatsiooni ja leida, mida Vajadus on, kuidas leida raamatukogudes. Nii et esimene on lihtsalt oleme läheb push Google. Mine Google. 

See on sõna otseses mõttes, mida me teeme, kui me pead tegema midagi, et me Google. Kas on JavaScript raamatukogu, mis võimaldab mul manipuleerida aega kasulik viis? Nii et kui ma tean, et mõned kasutaja loomine konto siin ja see on Praegusel ajal, kui ma arvutada Erinevus et ilma et arvutab ta ise? Nii et see on tegelikult ühine asi, JavaScript aega raamatukogus. Ja siin me Moment.js-- kõige populaarsem üks. 

Kui vajame raamatukogu manipuleerida midagi värvi saaks genereerida suvalisi värve - võimalik, et genereerida stiil või midagi - me Kas Google midagi JavaScript värv raamatukogu. Ja ma olen kindel, et me oleks pop up tuhat ja üks neist. Olete oodatud lugema nende kaudu. 

Nii et enamik asju - kui sa neid leida - hakkavad asuma ühel alad, kus esineb kood. Nad on vähe levinud. Populaarseim poolt Praeguseks on github.com. Ja kui te lähete GitHub see on tegelikult kus normaliseerimine võõrustas. Nii et kui sa tahad tagasi minna, et üks. Näidake neile, et. 

MIKE RIZZO: Ja see on tegelikult kus see on majutatud ka, kui sa märganud. 

TOMAS Reimers: Jah. Nii et kui te lähete üle normaliseerida ja minna GitHub. Kas see on? 

MIKE RIZZO: See väike kass asi on GitHub sümbol. 

TOMAS Reimers: Oh. Nii GitHub kasutab meetodit nimetatakse Git salvestada koodi. Kas sa ei tea, mis see on või see hirmutab teid, see on hea. Te ei pea teadma, mida Git on sest GitHub on nuppu Laadi alla allosas paremal. 

Teine kasulik asi teada umbes GitHub on enamiku toodete on lugeda mulle. Ja kui nad ei ole veebilehel, loe mulle räägib, kuidas installida, kui sa seda kasutada, mida ta ei, jne, jne, jne. Mida me oleme põhimõtteliselt olnud kõndimine teid läbi. 

MIKE RIZZO: interneti suitsetamisest. 

TOMAS Reimers: See on hea. Kaks viimast asju tahtsime rääkida - oleme rääkinud Git - on probleemi. Ja see ei ole nii oluline lõplik produkt on kui sa lahkud 50. Ja kui sul tekib tooted rakendamiseks raamatukogudes või rakendamise oma projekti, sa lähed et on küsimusi või olete lähed otsima küsimustele. 

Jällegi, Google seda. See on sõna otseses mõttes, mida me teeme. See läheb tunduda rumal. Aga sõna-sõnalt, siis Google seda. Ja jälle üks esimesi asju sa tavaliselt joosta on stackoverflow.com, mis on suurepärane küsimus ja vastus silmist. 

See on suurepärane nii, sest sa võid postitada küsimusi ja otsida vastuseid, vaid ka sellepärast, see on juba palju eeltäidetud sisu seal. Nii tavaliselt kui sa Google programmeerimine Küsimus esimese paar tabamust olete juba joosta sinna ajal probleem komplekti. 

Ja siis viimane tõesti lühike asi on JSFIDDLE, mis on - täna me oleme teinud palju tööd JavaScript HTML CSS. JSFIDDLE on web app, mis põhimõtteliselt võimaldab teil võtta oma HTML, oma JavaScript alt vasakule ja oma CSS top korras. Ja siis ta saab luua kiire muuda IT ja näha, kuidas see toimib. See on väga kasulik, kui inimesed üritavad teha tõendi mõiste nagu see on, kuidas sa teha rippmenüüst. Ehk kiire paljastada või mis iganes. 

MIKE RIZZO: Lähme käia ja klõpsake seda. Kiire märkus - arvestades, et enne olime teeme klõpsu. Selgub JCorey Korea on ka sisseehitatud aastal kliki sündmus, et see kasutab lihtsalt põhjusel, et sa oled lähed tahan teha palju asju, kui soovite klõpsa midagi. 

Samamoodi on ka hõljuma. Aga et saada täit ulatust need, pilk jQuery dokumentatsiooni ja tegema. Ma tegin midagi rumalat siin. 

TOMAS Reimers: Nii et mul on tõesti kiire programmi siin, mis ütleb, nuppu klõpsuga. Siis on meil silmus. Suhe i on väiksem kui 404. See lihtsalt läheb avanes neid hoiatusi. 

MIKE RIZZO: Ja mis oli kood 404 seisis HTML? Kas keegi mäletab? Ei leitud õige. Chrome lisas ka see puhas asi, kus saab - 

TOMAS Reimers: Kuna inimestele meeldib Mike hakkas seda tegema palju ja tüütu kasutajad, mis võimaldab näete info. 

MIKE RIZZO: Jah. 

TOMAS Reimers: Kas meil on küsimusi sellest ligikaudu JavaScript raamatukogud, leida raamatukogud, või mida veebiarendust välimus nagu reaalses maailmas? Me jookseme vastu aega. Nii et ma olen kindel, et me ei kavatse on aeg, et rakendada arvatud juhul, kui see on tõesti kiire. Kas me oleme head? 

MIKE RIZZO: Kõike, mida te poisid tahaks näha tõesti kiire on, nagu, kaks minutit või vähem? 

TOMAS Reimers: Midagi saame selgitada? Kuidas kirjutada - 

Publik: [kuuldamatu]? 

MIKE RIZZO: Jah, nii see on - 

TOMAS Reimers: Sa võid lüüa Kontroll-U veebilehel. 

MIKE RIZZO: Oh, ma ei tea seda. 

TOMAS Reimers: Ma arvan, et jah. Kontroll-U. Jah. 

MIKE RIZZO: Ah, et see on kood veebilehel. Aga kui te tegelikult soovite alla laadida meie failid ja kõik, see on majutatud edasi github.com 

TOMAS Reimers: kärpida minu nimi - Tomas Reimers - kaldkriips CS50 sidekriips seminar. 

MIKE RIZZO: ja te saate leida kõike. 

TOMAS Reimers: Seda GitHub Paistab, muide. Nii et taas, kui näete avatud lähtekoodiga Projekti tavaliselt, nad loetud mul on, mida saate lugeda. Ja kui sa lähed tagasi, märkad, et sul alla laadida zip, mis võimaldab teil laadida allikas koodi lisada toote enda asi. 

MIKE RIZZO: Jah, ja kui me kliki on index.html tõesti kiiresti - 

TOMAS Reimers: Näete, siin on lähtekoodi meie veebilehel. 

MIKE RIZZO: Ka mina unustasin suruda õigus Enne suurte Tabelist lisatud, kuid seal on ka tabel kohta chmods et lisasime Lihtsalt oma selguse. Aga kui me leidke kõik tee alla alumine, me tegelikult ei tee väga palju koos JavaScript värk üldse see. See on eranditult kõik muud, mis meil oli. 

Nii et tänan teid, et tulite ja kuulata. Loodame, et see oli tõesti kasulik. Kui teil on JavaScript related küsimusi või lihtsalt tahan rääkida Mis muud, näiteks, mida teised lahedad asjad saate teha JavaScript, me tahaks sinuga rääkima. 

TOMAS Reimers: Kui sul on küsimus oma projekti või kui seda on võimalik asjakohane, siis me tõenäoliselt kinni umbes natuke pärast seda. Aga peale selle, on hea nädalavahetus. 

MIKE RIZZO: Jah, meeldib. Näeme. 

TOMAS Reimers: Nägemist.