1 00:00:00,000 --> 00:00:07,440 2 00:00:07,440 --> 00:00:08,180 >> TOMAS REIMERS: Hei kaikki. 3 00:00:08,180 --> 00:00:09,250 Nimeni on Tomas Reimers. 4 00:00:09,250 --> 00:00:10,500 >> MIKE RIZZO: Ja olen Mike Rizzo. 5 00:00:10,500 --> 00:00:12,990 >> TOMAS REIMERS: Olemme kaksi CS50s TS. 6 00:00:12,990 --> 00:00:18,910 Ja tänään olemme johtava seminaari JavaScript ja CSS web-sovellukset. 7 00:00:18,910 --> 00:00:22,140 Jos haluat seurata pitkin, linkki on tuolla. 8 00:00:22,140 --> 00:00:25,190 Ja haluat laittaa sen ylös tietokoneeseen hetkeksi? 9 00:00:25,190 --> 00:00:27,460 >> Siellä on linkki. 10 00:00:27,460 --> 00:00:30,390 Se on pieni sivusto, jossa on linkit kaikki resurssit aiomme olla 11 00:00:30,390 --> 00:00:36,490 osoittaa sinua tänään ja on myös paljon hyödyllistä tietoa kirjoittanut meitä 12 00:00:36,490 --> 00:00:39,680 lue lisää syvyyttä, kun menet takaisin, ja yrität muistaa mitä 13 00:00:39,680 --> 00:00:42,166 juuri tuosta sanomme, mitä olitte puhumme, jne.. 14 00:00:42,166 --> 00:00:43,870 >> MIKE RIZZO: Selvä. 15 00:00:43,870 --> 00:00:44,890 Aloitetaanpa. 16 00:00:44,890 --> 00:00:45,700 >> TOMAS REIMERS: Haluat siis aloittaa? 17 00:00:45,700 --> 00:00:45,970 OK. 18 00:00:45,970 --> 00:00:47,170 >> MIKE RIZZO: Joo. 19 00:00:47,170 --> 00:00:51,730 Joten halusimme ensin aloittaa laaja yleiskuvan internetin ja 20 00:00:51,730 --> 00:00:54,240 tiedostotyyppejä suunniteltaessa verkkosivuilla. 21 00:00:54,240 --> 00:00:57,550 Vaikka tämä esitys haluamme päästä osaksi JavaScript paljon paljon 22 00:00:57,550 --> 00:01:00,320 myöhemmin, halusimme aloittaa pois vain, tavallaan, kuten lintuperspektiivistä 23 00:01:00,320 --> 00:01:03,270 mitä sivusto on ja miten ajatella suunnittelussa 24 00:01:03,270 --> 00:01:04,800 verkkosivuilla alku. 25 00:01:04,800 --> 00:01:08,370 >> Joten te, tässä vaiheessa - sen kanssa on perjantai-iltana - olisi 26 00:01:08,370 --> 00:01:11,000 lähettänyt CS50 rahoitus ongelma asettaa. 27 00:01:11,000 --> 00:01:15,260 Toivottavasti tämä oli hyvä maku mitä web ohjelmointi voi olla. 28 00:01:15,260 --> 00:01:18,261 Mutta täällä me haluamme, tavallaan, antaa sinulle toisen maku, samoin. 29 00:01:18,261 --> 00:01:23,190 >> TOMAS REIMERS: Joten vain kertaus mitä tapahtuu, kun kirjoitat URL 30 00:01:23,190 --> 00:01:26,650 Web-selain, että URL saa katseli tietokoneen. 31 00:01:26,650 --> 00:01:28,590 Ja tietokoneen liitetty toiseen tietokoneeseen, 32 00:01:28,590 --> 00:01:29,890 joka isännöi että verkkosivuilla. 33 00:01:29,890 --> 00:01:33,150 OK, joten kun menet google.com, olet kytketty yhteen Googlen 34 00:01:33,150 --> 00:01:36,496 tietokoneet, joka on tiedostoja google.com. 35 00:01:36,496 --> 00:01:38,750 >> Se kysyy tiettyä tiedostoa. 36 00:01:38,750 --> 00:01:40,020 Joten jos menet - 37 00:01:40,020 --> 00:01:41,550 En tiedä - 38 00:01:41,550 --> 00:01:48,170 example.com / index.html tai / test.html, aiot kysyä 39 00:01:48,170 --> 00:01:49,340 kyseisestä tiedostosta. 40 00:01:49,340 --> 00:01:52,780 Ja web-palvelimen takana palauttaa sen sinulle. 41 00:01:52,780 --> 00:01:54,910 >> Sitten, kun menet läpi, että tiedosto - 42 00:01:54,910 --> 00:01:57,750 43 00:01:57,750 --> 00:01:59,950 kun olet tietokone saa, että tiedosto - se tulee aloittaa 44 00:01:59,950 --> 00:02:00,820 rakentaa web-sivun. 45 00:02:00,820 --> 00:02:03,020 Joten nyt se on HTML-tiedosto, joka on tavallaan kuin 46 00:02:03,020 --> 00:02:05,170 rakenteen Web-sivun. 47 00:02:05,170 --> 00:02:08,620 HTML-tiedoston voi myös viitata CSS-tiedostot, jotka määrittävät 48 00:02:08,620 --> 00:02:09,889 tyyli sivun. 49 00:02:09,889 --> 00:02:12,970 >> JavaScript-tiedostot, jossa määritellään vuorovaikutusta web-sivulla. 50 00:02:12,970 --> 00:02:15,200 Kuvatiedostoja, jotka ovat vain kuvia. 51 00:02:15,200 --> 00:02:19,450 Ja mahdollisesti linkittää muihin HTML-tiedostoja, jonka voit sitten käydä. 52 00:02:19,450 --> 00:02:22,656 53 00:02:22,656 --> 00:02:24,380 >> MIKE RIZZO: OK, hyvä. 54 00:02:24,380 --> 00:02:28,980 Joten te kaikki, ehkä, vaivalla perustaa oman paikallisen isännän 55 00:02:28,980 --> 00:02:30,810 teidän virtuaalikone. 56 00:02:30,810 --> 00:02:35,650 Ja että vain, tavallaan, on paikallinen verkkotunnuksen, että tietokone isännöi vain 57 00:02:35,650 --> 00:02:38,760 sinulle omaa IP-osoitetta. 58 00:02:38,760 --> 00:02:43,300 >> Niin sisällä, että voit lisätä sen omia web-sivuja. 59 00:02:43,300 --> 00:02:47,655 Tarkoitan, vuonna CS50 Finance, sinun pitäisi olla lisätty joitakin HTML-sivuja, jotka ovat, 60 00:02:47,655 --> 00:02:49,410 tavallaan, käärittynä PHP kääre. 61 00:02:49,410 --> 00:02:54,690 Mutta loppujen lopuksi, mitä PHP-sivuja olivat syöttöä oli HTML. 62 00:02:54,690 --> 00:02:58,210 >> Mutta Muistelen alusta ja PSET, meillä oli asettaa 63 00:02:58,210 --> 00:03:00,890 käyttöoikeuksia kaiken, eikö? 64 00:03:00,890 --> 00:03:07,270 Joten tämä vain periaatteessa kertoo meille kuka voi lukea, kirjoittaa ja mahdollisesti 65 00:03:07,270 --> 00:03:08,730 suorittaa kunkin tiedostoja. 66 00:03:08,730 --> 00:03:11,870 Joten aiomme tehdä nopeasti - hm? 67 00:03:11,870 --> 00:03:15,660 >> TOMAS REIMERS: Menemme siis tehdä nopeasti demo. 68 00:03:15,660 --> 00:03:19,560 Joten vain muistuttaa teitä, kun yhteyden Googlen tietokoneeseen - 69 00:03:19,560 --> 00:03:20,690 kuka - 70 00:03:20,690 --> 00:03:24,060 ja pyytää tiedoston, ensin tietokoneeseen on varmistaa, että olet valtuutettu 71 00:03:24,060 --> 00:03:28,790 todella tarkastella kyseisen tiedoston tai lukenut, että tiedostoa, koska et voi vain kysyä 72 00:03:28,790 --> 00:03:30,430 tiedostolle kyseisen tietokoneen, eikö? 73 00:03:30,430 --> 00:03:32,260 Se olisi suojausriski. 74 00:03:32,260 --> 00:03:37,020 >> Joten tiedostoja järjestelmissä käytämme, kuten Tämän CS50 laite, on kolme 75 00:03:37,020 --> 00:03:39,200 yleensä ihmiset, jotka voivat olla käyttöoikeudet jotain. 76 00:03:39,200 --> 00:03:41,610 Ensimmäinen on todellinen omistaja sanoi tiedoston. 77 00:03:41,610 --> 00:03:43,820 Toinen on ryhmä, joka tiedosto kuuluu. 78 00:03:43,820 --> 00:03:46,090 Emme aio keskittyä liikaa siitä. 79 00:03:46,090 --> 00:03:50,010 Ja viimeinen asia on, tavallaan, kuten maailmaa tai kuten kaikki muutkin kuka 80 00:03:50,010 --> 00:03:54,130 ei juuri kyseistä tiedostoa eikä ole omistusoikeuksia sen yli. 81 00:03:54,130 --> 00:04:05,650 >> Joten jos meillä on omistaja, ryhmä, ja sitten maailman. 82 00:04:05,650 --> 00:04:10,510 Ja sitten kullekin näistä ryhmistä, et voi olla jokin kolmesta käyttöoikeudet, 83 00:04:10,510 --> 00:04:13,010 OK, tai useita niistä. 84 00:04:13,010 --> 00:04:15,070 Voit olla lukuoikeudet. 85 00:04:15,070 --> 00:04:16,560 Voit olla oikeassa käyttöoikeudet. 86 00:04:16,560 --> 00:04:18,880 Ja voit olla suoritus-oikeudet. 87 00:04:18,880 --> 00:04:22,060 >> Joten kannalta todellinen tiedostotyyppejä, lue lupa on kuin lukematta 88 00:04:22,060 --> 00:04:23,250 tiedoston sisältö. 89 00:04:23,250 --> 00:04:24,730 Oikeus lupaa kirjallisesti mainittuun tiedostoon. 90 00:04:24,730 --> 00:04:28,370 Suorittaa lupaa on käynnissä tiedosto kuten teet, kun olet suorittanut yhden 91 00:04:28,370 --> 00:04:29,620 sinun CS50 projekteja. 92 00:04:29,620 --> 00:04:32,190 93 00:04:32,190 --> 00:04:38,820 >> Eli kun olet ajatellut tiedostoja kuten silloin meidän täytyy lukea HTML 94 00:04:38,820 --> 00:04:41,790 tiedosto, jonka on oltava maailman luettavissa, eikö? 95 00:04:41,790 --> 00:04:44,420 Oletettavasti myös omistaja haluaa pystyä muokkaamaan kyseistä tiedostoa. 96 00:04:44,420 --> 00:04:46,610 Joten omistajan menossa on luku-ja kirjoitusoikeudet. 97 00:04:46,610 --> 00:04:48,710 He eivät todellakaan tarvitse suorittaa. 98 00:04:48,710 --> 00:04:50,950 >> Ryhmä, aiomme hoitaa sama kuin maailman nyt. 99 00:04:50,950 --> 00:04:54,610 Joten he tarvitsevat lukuoikeudet. 100 00:04:54,610 --> 00:04:57,310 Mutta he eivät tarvitse kirjoittaa tai suorittaa käyttöoikeudet. 101 00:04:57,310 --> 00:05:01,920 Ja nyt, jos ajattelemme takaisin entiselle PSETs, mitä ymmärrämme on tällaisia 102 00:05:01,920 --> 00:05:03,360 ja näyttää binary, eikö? 103 00:05:03,360 --> 00:05:04,210 1 tarkoittaa kyllä. 104 00:05:04,210 --> 00:05:05,040 0 ei. 105 00:05:05,040 --> 00:05:06,870 Ja voimme todella kääntää Tämän binääri. 106 00:05:06,870 --> 00:05:10,478 >> Joten 110 binary olisi 6. 107 00:05:10,478 --> 00:05:13,270 100 olisi 4. 108 00:05:13,270 --> 00:05:14,690 Sama maailma. 109 00:05:14,690 --> 00:05:20,846 Joten numero saisit käyttöoikeuksia tämä olisi 644. 110 00:05:20,846 --> 00:05:24,400 >> MIKE RIZZO: Ja jos luulet takaisin kun chmoded jotain, uskon 111 00:05:24,400 --> 00:05:28,980 he antoivat vuonna Harjoitus esimerkki, jossa voit tehdä 112 00:05:28,980 --> 00:05:36,470 jotain chmod 644 ja sitten tiedoston nimi. 113 00:05:36,470 --> 00:05:39,980 644 sitten, voit nyt nähdä suoraan mistä se tulee. 114 00:05:39,980 --> 00:05:42,840 Joten toivottavasti joka tekee, että hieman selvempi. 115 00:05:42,840 --> 00:05:45,600 >> Ja sitten sinulle kaveri selkeys - 116 00:05:45,600 --> 00:05:48,200 oh yeah, tässä tämä on taas. 117 00:05:48,200 --> 00:05:53,260 Joten 600 sitten olisi vain esimerkki luovuimme täällä missä omistaja on 118 00:05:53,260 --> 00:05:56,360 lukea ja oikeudet asennuksen ja ryhmän ja maailma ei ole mitään oikeuksia 119 00:05:56,360 --> 00:05:58,145 avata tiedostoa. 120 00:05:58,145 --> 00:06:01,500 >> TOMAS REIMERS: Ja sitten meillä on nopea luettelo yhteisistä käyttöoikeudet. 121 00:06:01,500 --> 00:06:05,250 Joten hakemistoja, haluatko todella chmod 711. 122 00:06:05,250 --> 00:06:08,930 Nopea sivuun - hakemisto voi olla suoritettavan lupaa merkitsee mahdollisuutta 123 00:06:08,930 --> 00:06:11,680 Avaa hakemistoon. 124 00:06:11,680 --> 00:06:15,280 Kuvia, CSS, JavaScript, HTML tarpeisiin 644 koska pohjimmiltaan maailma 125 00:06:15,280 --> 00:06:16,400 tarpeita lukuoikeus. 126 00:06:16,400 --> 00:06:20,960 >> Ja PHP, jonka te olette nähneet vaikka emme puhu siitä 127 00:06:20,960 --> 00:06:24,880 tiukasti tyypillisesti chmoded kanssa lupaa 600 koska se on ajaa 128 00:06:24,880 --> 00:06:26,540 luvat omistaja. 129 00:06:26,540 --> 00:06:27,790 Ainakin laitteen päälle. 130 00:06:27,790 --> 00:06:30,200 131 00:06:30,200 --> 00:06:36,870 >> MIKE RIZZO: Joten jos et ole erikseen tarkenna, millaisia ​​tiedosto 132 00:06:36,870 --> 00:06:39,480 haluat todella asettamalla up esittelyn - 133 00:06:39,480 --> 00:06:43,490 meillä oli ongelma tässä, koska kaikki ei chmoded oikein - 134 00:06:43,490 --> 00:06:47,550 aiot saada, tavallaan, kielletty virhe, että sivusto 135 00:06:47,550 --> 00:06:49,700 ei varsinaisesti ole lupaa käyttää mitä tahansa tiedostoa 136 00:06:49,700 --> 00:06:51,370 haluat sen käyttää. 137 00:06:51,370 --> 00:06:54,780 Ja tietenkin, joka voi olla kiinteä - kuten Harjoitus - muuttamalla 138 00:06:54,780 --> 00:06:56,405 käyttöoikeudet asianmukaisesti. 139 00:06:56,405 --> 00:06:59,620 >> TOMAS REIMERS: Ja viimeinen kommentti nopeasti paikallinen kehittäminen on - me 140 00:06:59,620 --> 00:07:02,000 tämän asian esille, mutta me vain halusimme tuoda sen uudelleen - 141 00:07:02,000 --> 00:07:06,230 jos kysyt palvelin - niin paikallinen isäntä, esimerkiksi. com tai mitä tahansa - 142 00:07:06,230 --> 00:07:09,170 ja et määritä tietyn tiedoston, tiedosto, että tietokone on menossa 143 00:07:09,170 --> 00:07:11,540 pyytää kutsutaan index.html. 144 00:07:11,540 --> 00:07:12,790 Tai jos se ei ole, index.php. 145 00:07:12,790 --> 00:07:15,560 146 00:07:15,560 --> 00:07:16,350 >> Cool. 147 00:07:16,350 --> 00:07:19,560 Joten se on vain kertaus kaiken, toivottavasti, että olemme katettu 148 00:07:19,560 --> 00:07:22,800 jakso, ja luento, ja tähän mennessä CS50. 149 00:07:22,800 --> 00:07:26,110 Ja nyt me aiomme alkaa puhua noin erityisesti kirjastot. 150 00:07:26,110 --> 00:07:30,270 JavaScript-ja CSS kirjastot web-sovellukset. 151 00:07:30,270 --> 00:07:36,350 >> Joten yksi nopea syy miksi meillä on kirjastot ohjelmoi - 152 00:07:36,350 --> 00:07:39,000 siellä on paljon ongelmia ohjelmointi, jotka pitävät popping 153 00:07:39,000 --> 00:07:40,570 uudestaan, ja uudestaan, ja uudestaan. 154 00:07:40,570 --> 00:07:43,870 Saatat huomata, että paljon sivustoja täytyy kyky on avattavasta 155 00:07:43,870 --> 00:07:49,100 valikot, esimerkiksi tai tarvitset kykyä on hyvin standardi painike 156 00:07:49,100 --> 00:07:51,400 tyyli, joka ei voi olla helpointa. 157 00:07:51,400 --> 00:07:54,670 Nyt kun alkaa saada HTML, voit ymmärtää, että painikkeet voivat todella 158 00:07:54,670 --> 00:07:57,720 näyttää todella ruma, jos älä tee mitään. 159 00:07:57,720 --> 00:08:00,830 >> Niin monet ihmiset ovat kirjoittaneet kutsutaan kirjastot. 160 00:08:00,830 --> 00:08:02,990 Ja tässä yhteydessä ne ovat kutsutaan myös puitteet. 161 00:08:02,990 --> 00:08:04,790 Aiomme käyttää kaksi synonyymeinä. 162 00:08:04,790 --> 00:08:07,360 Ja mitä he ovat on ne pohjimmiltaan premade paloja koodi - 163 00:08:07,360 --> 00:08:09,130 joko CSS tai JavaScript - 164 00:08:09,130 --> 00:08:13,240 jotka vievät paljon Team Sinulla koodauksessa. 165 00:08:13,240 --> 00:08:17,290 >> Joten ne ennalta määrittää joukko luokkia tai ennalta määrittää joukko toimintoja 166 00:08:17,290 --> 00:08:20,110 JavaScript n tapauksessa, joka voit soittaa myöhemmin. 167 00:08:20,110 --> 00:08:22,690 Ja sitten voit, tavallaan, saat käyttöoikeuden tähän koodi ilman 168 00:08:22,690 --> 00:08:23,710 tarvitse tehdä mitään. 169 00:08:23,710 --> 00:08:27,750 Esimerkiksi kirjaston oli CS50.H. Se oli kirjasto annoimme teille takaisin 170 00:08:27,750 --> 00:08:32,090 viikolla yksi, joka saa sinut tekemään tuollaista GetInt ja getString 171 00:08:32,090 --> 00:08:35,237 ilman kirjoittaa koodia itse. 172 00:08:35,237 --> 00:08:36,179 >> MIKE RIZZO: Selvä. 173 00:08:36,179 --> 00:08:40,299 Joten tässä, aivan kuten meillä oli sisällyttää meidän c tiedostoja eri 174 00:08:40,299 --> 00:08:46,570 kirjastot, meidänkin tulee sisällyttää meidän HTML-tiedostoja eri kirjastoissa. 175 00:08:46,570 --> 00:08:50,310 Esimerkiksi, jos halusimme sisällyttää erityistä JavaScript-kirjaston täällä, 176 00:08:50,310 --> 00:08:52,850 ehkä yksi että olemme kirjoitettu itsemme se on paikallisesti isännöi 177 00:08:52,850 --> 00:08:56,000 nimeltään script.js, me vain käyttää tätä merkintää. 178 00:08:56,000 --> 00:08:59,500 >> Joten meillä on kirjoitus tyyppi tasavertaisina JavaScript lähde tasavertaisina 179 00:08:59,500 --> 00:09:01,260 JavaScript.js. 180 00:09:01,260 --> 00:09:05,190 Ja jos luulet takaisin CS50 rahoituksen ongelma asettaa, jos katsoi vuonna 181 00:09:05,190 --> 00:09:09,190 header.php-kansioon, sinun olisi pitänyt nähdä 182 00:09:09,190 --> 00:09:10,970 Jotkut näistä mukana. 183 00:09:10,970 --> 00:09:13,250 Joten tämä ensimmäinen - skriptit - 184 00:09:13,250 --> 00:09:16,080 on myös JavaScript-kirjaston. 185 00:09:16,080 --> 00:09:18,760 Lukien CSS kirjasto on hieman erilainen. 186 00:09:18,760 --> 00:09:21,430 >> Täällä, sen sijaan, että kirjoitus Tag tarvitset link tag. 187 00:09:21,430 --> 00:09:27,110 Ja sitten, teksti CSS tyyppi on hieman erilainen. 188 00:09:27,110 --> 00:09:29,270 Sinun ei aina tarvitse sisältää suht tyylisivu. 189 00:09:29,270 --> 00:09:30,970 Mutta mielestäni se on yleisesti hyviä käytäntöjä. 190 00:09:30,970 --> 00:09:35,810 >> Ja sitten lopuksi HREF, johon luultavasti näki oman ATAGs linkittämistä 191 00:09:35,810 --> 00:09:39,440 eri linkkejä vain täsmennetään linkki, missä löytää sitä. 192 00:09:39,440 --> 00:09:42,250 Esimerkiksi, jos halusimme yhdistää kirjaston eri - haluan vain sanoa, - 193 00:09:42,250 --> 00:09:49,330 että asui styles.css. 194 00:09:49,330 --> 00:09:54,030 Ja halusimme yhdistää, että se on isännöi Webissä, olisimme kopioidaan. 195 00:09:54,030 --> 00:09:58,834 Ja sitten liitä se mitä meillä on täällä sijaan. 196 00:09:58,834 --> 00:10:01,340 >> TOMAS REIMERS: OK, toivottavasti kaverit ovat jo tuttuja 197 00:10:01,340 --> 00:10:02,410 miten yhdistää CSS. 198 00:10:02,410 --> 00:10:04,000 Sinun piti tehdä, että viimeinen ruskea asetettu. 199 00:10:04,000 --> 00:10:07,110 JavaScript, jotkut teistä ehkä on jonkin verran kokemusta. 200 00:10:07,110 --> 00:10:07,980 Jotkut teistä eivät. 201 00:10:07,980 --> 00:10:12,190 >> Joten nyt, tietää, että JavaScript-tiedoston on hyvin samankaltainen kuin CSS-tiedostoa 202 00:10:12,190 --> 00:10:15,640 mielessä, että voit linkittää sen tai että voit sisällyttää sen sisäisesti. 203 00:10:15,640 --> 00:10:17,360 Ja sen avulla voit script asioita. 204 00:10:17,360 --> 00:10:21,820 Ja me aiomme opastaa hieman JavaScript myöhemmin. 205 00:10:21,820 --> 00:10:23,560 >> Joten käyttämällä kirjasto - 206 00:10:23,560 --> 00:10:26,150 kun olet lisännyt se, se on niin yksinkertaista kuin kirjaimellisesti soittamalla 207 00:10:26,150 --> 00:10:29,640 toimintoja tai lisäämällä luokan nimiä sitä. 208 00:10:29,640 --> 00:10:32,220 Emme todellakaan halua puhua noin kannalta kirjasto - 209 00:10:32,220 --> 00:10:34,180 ja tämä on enemmän tekninen huomautus - 210 00:10:34,180 --> 00:10:35,860 on avoimen lähdekoodin lisensointi. 211 00:10:35,860 --> 00:10:41,550 Kun löydät näitä todellisia kirjastot, saatat ajatella 212 00:10:41,550 --> 00:10:47,630 Kysymykset kuten se on ok, että olen vain käyttää jonkun toisen koodin, erityisesti 213 00:10:47,630 --> 00:10:51,970 koska se on mitä hartaasti käskin sinun tehdä tällä kurssilla. 214 00:10:51,970 --> 00:10:55,790 >> Joten jos kyseessä on avoimen lähdekoodin lisensointi, paljon kehittäjät - 215 00:10:55,790 --> 00:10:57,540 kun he ovat kirjoitettu kirjasto, jonka he ajattelevat voisivat olla 216 00:10:57,540 --> 00:10:59,450 auttaa muita ihmisiä - 217 00:10:59,450 --> 00:11:02,420 julkaisee sen web ja antaa sille luvan. 218 00:11:02,420 --> 00:11:06,620 Ja lisenssin pohjimmiltaan sanoo Olen täten luvan myöntämistä muille 219 00:11:06,620 --> 00:11:11,250 ihmiset käyttää tätä pala ohjelmisto seuraavia eräänlainen 220 00:11:11,250 --> 00:11:13,230 määräyksiä. 221 00:11:13,230 --> 00:11:16,100 >> Olemme mukana linkki hyvä sivusto auttaa sinua ymmärtämään lisenssit 222 00:11:16,100 --> 00:11:17,720 Jos tulee niitä. 223 00:11:17,720 --> 00:11:21,680 Yhteinen sopimusmääräykset ovat asioita, kuten olet tervetullut käyttää minun kirjastoon, jotta 224 00:11:21,680 --> 00:11:23,000 kunhan annat minulle luottoa. 225 00:11:23,000 --> 00:11:25,670 Olet tervetullut käyttää minun kirjastoon kunhan särkyessään 226 00:11:25,670 --> 00:11:26,790 et syyttää minua. 227 00:11:26,790 --> 00:11:30,310 Olet tervetullut käyttää minun kirjastoon niin kauan koska et käytä sitä tehdä rahaa 228 00:11:30,310 --> 00:11:31,910 itse. 229 00:11:31,910 --> 00:11:34,130 Nämä ovat erilaisia ​​yhteisiä määräyksiä. 230 00:11:34,130 --> 00:11:37,780 >> Tästä CS50 opinnäytetyö, ne ei pitäisi olla erittäin merkityksellinen, sillä 231 00:11:37,780 --> 00:11:41,440 hankkeita, jotka te käyttöä ovat luultavasti melko, tavallaan, tiedossa. 232 00:11:41,440 --> 00:11:44,170 Mutta kun itse mennä ulos maailmaa ja alkaa käyttää kirjastoja, jotka 233 00:11:44,170 --> 00:11:48,100 voidaan tai ei voida yhtä hyvin toteuttaa jotkut enemmän suosituimmista lajeista olemme 234 00:11:48,100 --> 00:11:49,780 olla menossa läpi. 235 00:11:49,780 --> 00:11:53,310 On hyvä pystyä ymmärtämään näitä lupia ja 236 00:11:53,310 --> 00:11:54,560 ymmärtää, mitä ne tarkoittavat. 237 00:11:54,560 --> 00:11:58,120 238 00:11:58,120 --> 00:11:58,586 Ja menee takaisin. 239 00:11:58,586 --> 00:12:00,960 >> MIKE RIZZO: OK. 240 00:12:00,960 --> 00:12:04,850 Joten nyt siirryn esimerkkejä todellisten CSS. 241 00:12:04,850 --> 00:12:07,770 Tässä vaiheessa toistaiseksi, saatat ei olisi havainnut tämän. 242 00:12:07,770 --> 00:12:10,300 Mutta olet ehkä havainnut sen jokapäiväistä elämää, jossa jotain 243 00:12:10,300 --> 00:12:13,160 joka näyttää yhdellä tavalla yhdessä selaimessa ei ehkä näytä samalta 244 00:12:13,160 --> 00:12:14,880 tavalla toisessa selaimessa. 245 00:12:14,880 --> 00:12:17,400 >> Tätä kutsutaan selaimen selain yhteensopivuus. 246 00:12:17,400 --> 00:12:20,780 Ja yhä se on tulossa enemmän ja suurempi ongelma, varsinkin kun 247 00:12:20,780 --> 00:12:25,260 selaimet ottaa enemmän ja enemmän vapauksia toteuttaa asioita kuin he haluavat. 248 00:12:25,260 --> 00:12:28,440 Jotta voidaan päästä, että siellä oikeasti on Suurta kirjastoa nimeltään Normalize.CSS. 249 00:12:28,440 --> 00:12:32,236 250 00:12:32,236 --> 00:12:33,770 >> TOMAS REIMERS: Meillä sisältyvät linkkiä. 251 00:12:33,770 --> 00:12:36,210 Tässä vaiheessa se on hyödyllistä, jos sinulla on kannettavan tietokoneen siellä 252 00:12:36,210 --> 00:12:38,740 katsot sivustolla. 253 00:12:38,740 --> 00:12:42,580 Ja me annamme tämän teille oikea nyt yksinkertaisesti siksi CS50 lopullinen 254 00:12:42,580 --> 00:12:44,370 Projekti on todella menossa pyytää sinua toteuttamaan sen 255 00:12:44,370 --> 00:12:45,860 Samoin ja kautta selaimissa. 256 00:12:45,860 --> 00:12:49,250 >> Joten pitää takana pää, tämä on hieno kirjasto 257 00:12:49,250 --> 00:12:51,170 Koska se, tavallaan, standardoida asioita. 258 00:12:51,170 --> 00:12:54,230 Firefox, jotain voi näyttää kuin yhden pikselin vasemmalle. 259 00:12:54,230 --> 00:12:58,390 Ja sitten Chrome voi päättää, että tosiasiallisesti mitä tarkoitti oli 10 pikseliä 260 00:12:58,390 --> 00:12:59,380 vasemmalle. 261 00:12:59,380 --> 00:13:01,030 Ja haluat standardoida tätä. 262 00:13:01,030 --> 00:13:05,360 Normalisoituu todella tehdä todella hyvä työtä varmista, että sivustosi 263 00:13:05,360 --> 00:13:08,070 näyttää samalta eri selaimissa. 264 00:13:08,070 --> 00:13:10,660 >> MIKE RIZZO: Joten jos halusimme vain klikkaa linkkiä todella nopeasti ja näyttää 265 00:13:10,660 --> 00:13:13,140 , mitä se näyttää, voit ladata sen käyttämällä 266 00:13:13,140 --> 00:13:14,670 jättiläinen Lataa-painiketta. 267 00:13:14,670 --> 00:13:18,520 Tai sitten sinun kannattaa lukea siitä lisää klikkaamalla tätä linkkiä alemman 268 00:13:18,520 --> 00:13:19,310 oikeassa yläkulmassa. 269 00:13:19,310 --> 00:13:22,420 >> TOMAS REIMERS: Ja jos todella Valitse Lue lisää tuolla - 270 00:13:22,420 --> 00:13:24,340 klikkaa lähde GitHub - 271 00:13:24,340 --> 00:13:31,720 voit itse nähdä avoimen lähdekoodin lisenssin LICENSE.md oikeassa. 272 00:13:31,720 --> 00:13:35,740 Ja näet tässä erittäin suosittu MIT lisenssin. 273 00:13:35,740 --> 00:13:38,940 Uudelleen, jos luet tekstiä, voit löytää sen päällä 274 00:13:38,940 --> 00:13:42,550 me viitattu ennen ja pystyä ymmärtää sitä ilman lukea 275 00:13:42,550 --> 00:13:45,920 kautta lakikielellä. 276 00:13:45,920 --> 00:13:46,850 >> MIKE RIZZO: OK, hyvä. 277 00:13:46,850 --> 00:13:47,940 Niin, että Normalize. 278 00:13:47,940 --> 00:13:49,190 Halusimme antaa sinulle että todella nopeasti. 279 00:13:49,190 --> 00:13:50,030 Voi, sinulla on kysymys? 280 00:13:50,030 --> 00:13:53,013 >> Yleisö: Joten kun lataat sen, voit seuraa vain, että koodi, joka heillä on 281 00:13:53,013 --> 00:13:54,098 alle Lataa-painiketta? 282 00:13:54,098 --> 00:13:55,860 >> TOMAS REIMERS: Kyllä, niin kun lataat - 283 00:13:55,860 --> 00:13:58,130 >> MIKE RIZZO: Onpa suuri piste. 284 00:13:58,130 --> 00:14:00,700 Joten kysymys oli miten me itse ladata se? 285 00:14:00,700 --> 00:14:03,260 Jos siis klikkaa linkkiä, näemme että se todella ponnahtaa 286 00:14:03,260 --> 00:14:05,030 lähdekoodia. 287 00:14:05,030 --> 00:14:08,550 Joten tehdä tätä, mitä voisimme tehdä, on klikkaa Tallenna nimellä. 288 00:14:08,550 --> 00:14:10,830 Tallenna nimellä ja että olisi Tuo tiedosto. 289 00:14:10,830 --> 00:14:14,160 Ja sitten voimme valita tallennetaanko se normalize.CSS. 290 00:14:14,160 --> 00:14:15,810 Ja sitten sinun täytyy linkittää se - 291 00:14:15,810 --> 00:14:18,660 >> TOMAS REIMERS: samalla tavalla kuin -linkkiä minkä tahansa tiedoston. 292 00:14:18,660 --> 00:14:22,250 Ja kun liität sen, mitä hienoa noin Normalize on se todella 293 00:14:22,250 --> 00:14:25,920 hoitaa kaikki kovat toimi itsestään. 294 00:14:25,920 --> 00:14:27,730 Eli sinun ei tarvitse lisätä mitään luokissa. 295 00:14:27,730 --> 00:14:29,690 >> Sinun ei tarvitse tehdä mitään outoa. 296 00:14:29,690 --> 00:14:34,590 Se normalisoituu ilman sinua tee mitään edelleen. 297 00:14:34,590 --> 00:14:36,083 Kyllä, sinun täytyy sisällyttää se. 298 00:14:36,083 --> 00:14:38,990 299 00:14:38,990 --> 00:14:40,240 Google Chrome ei vastaa. 300 00:14:40,240 --> 00:14:43,270 301 00:14:43,270 --> 00:14:44,860 >> Just a quick syrjään - 302 00:14:44,860 --> 00:14:46,800 Huomasin hyppäsimme tähän. 303 00:14:46,800 --> 00:14:49,010 Loput esittelyn on olemaan yleiskatsauksen. 304 00:14:49,010 --> 00:14:50,380 Tutkimus kirjastojen. 305 00:14:50,380 --> 00:14:52,710 >> Pohjimmiltaan, mitä ne ovat. 306 00:14:52,710 --> 00:14:53,350 Mitä he tekevät. 307 00:14:53,350 --> 00:14:54,060 Miten he ovat hyödyllisiä. 308 00:14:54,060 --> 00:14:56,540 Miten voit toteuttaa ne. 309 00:14:56,540 --> 00:14:59,730 Jos haluat aloittaa katsomalla niitä, jälkeen pitkin, ja lukemisen kautta 310 00:14:59,730 --> 00:15:01,990 niitä, olisin erittäin rohkaista sitä. 311 00:15:01,990 --> 00:15:07,620 >> Vaihtoehtoisesti, olet tervetullut myös alkaa ladata niitä ja myös 312 00:15:07,620 --> 00:15:11,400 ne näky vain nähdä, mitä he näyttävät tai mitä he tekevät, jos sinulla on 313 00:15:11,400 --> 00:15:12,270 kannettavan tietokoneen edessä. 314 00:15:12,270 --> 00:15:14,650 Jos ei, olet tervetullut pitää kuuntelemassa meitä puhua. 315 00:15:14,650 --> 00:15:15,500 Aiomme pitää puhua. 316 00:15:15,500 --> 00:15:18,680 Ja meillä on aikaa lopussa, toivottavasti me todella päästä näyttämällä 317 00:15:18,680 --> 00:15:20,946 mitä jotkut näistä kirjastojen näyttää. 318 00:15:20,946 --> 00:15:22,320 >> MIKE RIZZO: Cool. 319 00:15:22,320 --> 00:15:25,466 Okei, joten nyt puhutaan noin Font Mahtavaa. 320 00:15:25,466 --> 00:15:30,480 >> TOMAS REIMERS: niin Font Awesome on todella siisti sivusto, erityisesti niille 321 00:15:30,480 --> 00:15:32,450 meistä, jotka ovat vähemmän taiteellisesti lahjakas. 322 00:15:32,450 --> 00:15:36,330 323 00:15:36,330 --> 00:15:38,880 Unohtaminen nimi Fontin Mahtavaa, se antaa sinulle kasan kuvakkeita, jotka ovat 324 00:15:38,880 --> 00:15:41,050 erittäin hyödyllinen. 325 00:15:41,050 --> 00:15:45,950 Niin paljon kertaa voit toteuttaa kuvaketta voit mukavalta x niin 326 00:15:45,950 --> 00:15:47,170 että voit sulkea jotain. 327 00:15:47,170 --> 00:15:49,910 >> Tai haluat ehkä jonkinlainen Muokkaa-painiketta kanssa lyijykynä piirustus kuten 328 00:15:49,910 --> 00:15:50,940 kaikki muu on. 329 00:15:50,940 --> 00:15:53,850 Ja silloin opit, että piirtäminen nämä kuvakkeet voi olla 330 00:15:53,850 --> 00:15:55,510 hyvin työlästä ja vaikeaa. 331 00:15:55,510 --> 00:15:59,160 Font Awesome - jos itse Siirry sivuston - 332 00:15:59,160 --> 00:16:02,892 antaa sinulle paljon kuvakkeita alle kuvakkeet yläreunassa. 333 00:16:02,892 --> 00:16:06,980 Joo, juuri alkuun. 334 00:16:06,980 --> 00:16:09,030 Se antaa sinulle paljon kuvakkeet ilmaiseksi. 335 00:16:09,030 --> 00:16:15,210 >> Joten tässä näette meillä on asioita, kuten tähti, baareja, salama, 336 00:16:15,210 --> 00:16:19,750 kalenteri, bug, kirja, jne.. 337 00:16:19,750 --> 00:16:21,110 Tämä voi olla erittäin hyödyllistä. 338 00:16:21,110 --> 00:16:24,290 Miten lisäät tämän on lisäät kirjaimellisesti CSS-tiedosto. 339 00:16:24,290 --> 00:16:29,760 Ja kun olet saanut sisällyttää CSS-tiedoston, mitä voit tehdä on luot 340 00:16:29,760 --> 00:16:33,430 merkintä: I. Se satands varten kuvake luokan FA 341 00:16:33,430 --> 00:16:34,460 seisomaan Font Awesome. 342 00:16:34,460 --> 00:16:36,330 Ja sitten, mitä luokka haluat. 343 00:16:36,330 --> 00:16:41,220 >> Joten jos halusin ikoni tämä plus neliö täällä, antaisin 344 00:16:41,220 --> 00:16:43,290 se luokka FA. 345 00:16:43,290 --> 00:16:46,230 Ja sitten FA väliviivaa plus väliviivaa neliö. 346 00:16:46,230 --> 00:16:50,325 347 00:16:50,325 --> 00:16:53,710 >> MIKE RIZZO: Cool, OK. 348 00:16:53,710 --> 00:16:56,980 >> TOMAS REIMERS: Ja sitten, viimeinen CSS Kirjasto haluamme saada läpi olemme 349 00:16:56,980 --> 00:16:59,950 yrittää pitää se mahdollisimman vähän CSS kirjastot koska emme ymmärrä 350 00:16:59,950 --> 00:17:03,660 otsikko esittelyn on Javascript Kirjastot. 351 00:17:03,660 --> 00:17:07,089 Mutta ajattelimme, että voimme yhtä hyvin tutustutaan muihin kirjastoihin 352 00:17:07,089 --> 00:17:09,569 kun puhuimme kirjastot. 353 00:17:09,569 --> 00:17:11,400 >> Se on Google Web Fonts. 354 00:17:11,400 --> 00:17:17,040 Ja mitä Google Web-fonttien avulla voit vain lisätä fontteja sivuston, 355 00:17:17,040 --> 00:17:22,079 joka on todella helppo tapa tehdä se kaunis ja erottaa sinun asettaa 356 00:17:22,079 --> 00:17:24,460 alkaen kaikkien muidenkin on, jos se on kiva fontti tai jos se on kiva 357 00:17:24,460 --> 00:17:27,790 kokoelma fontteja. 358 00:17:27,790 --> 00:17:31,410 Google Web Fonts on mukavaa toisin kuin muut kirjastot siinä mielessä, että se on 359 00:17:31,410 --> 00:17:33,490 todella ohjattu asennus. 360 00:17:33,490 --> 00:17:38,680 >> Joten jos noudatat linkkiä, se on google.com / fontit, uskon. 361 00:17:38,680 --> 00:17:41,100 Jos seuraat, että olet valita oman fontin. 362 00:17:41,100 --> 00:17:44,410 Voit valita vasemmalla alkaen paksuus, vino, jne.. 363 00:17:44,410 --> 00:17:48,970 Ja sitten, kun olet valinnut yhden, voit napsauttaa nopeasti käyttöön. 364 00:17:48,970 --> 00:17:49,820 Oikeassa. 365 00:17:49,820 --> 00:17:51,590 Oikeassa alareunassa ruutuun. 366 00:17:51,590 --> 00:17:54,380 367 00:17:54,380 --> 00:17:56,700 >> Ja sitten, selaa alaspäin. 368 00:17:56,700 --> 00:17:59,600 369 00:17:59,600 --> 00:18:02,650 Ensinnäkin, he antavat sinulle CSS sinun täytyy todella linkin siihen. 370 00:18:02,650 --> 00:18:03,330 Se on tuolla. 371 00:18:03,330 --> 00:18:05,170 Voit vain kopioida ja liittää, että sisään 372 00:18:05,170 --> 00:18:07,250 Ja Kiva juttu tämä on et itse edes tarvitse 373 00:18:07,250 --> 00:18:08,340 Lataa tiedosto. 374 00:18:08,340 --> 00:18:11,170 >> Mitä se aikoo tehdä, on se menee linkittää Googlen version. 375 00:18:11,170 --> 00:18:14,130 Joten takaisin, mitä se tarkoittaa. 376 00:18:14,130 --> 00:18:18,270 Tämä tarkoittaa, että kun käyttäjä lataa tiedosto - 377 00:18:18,270 --> 00:18:22,300 lataa HTML-sivulla - HTML sivu tulee viitata tähän tiedostoon. 378 00:18:22,300 --> 00:18:26,790 >> Joten sitten, tietokone tulee nähdä, Voi, se on isännöi google.com pikemminkin 379 00:18:26,790 --> 00:18:28,170 kuin theirsite.com. 380 00:18:28,170 --> 00:18:30,370 Anna minun mennä kysymään Google kyseisen tiedoston. 381 00:18:30,370 --> 00:18:32,800 Ja sitten, se tulee sisällyttää se melkein kuin se olisi 382 00:18:32,800 --> 00:18:35,584 osa oman sivuston. 383 00:18:35,584 --> 00:18:36,540 >> TOMAS REIMERS: Cool. 384 00:18:36,540 --> 00:18:40,980 Ja kun lisäät, että sitten sisällyttää sen CSS, se antaa sinulle 385 00:18:40,980 --> 00:18:41,830 todellinen linja. 386 00:18:41,830 --> 00:18:45,188 Niin asetat omaisuutta fonttiperheen sama nimi fontin. 387 00:18:45,188 --> 00:18:47,936 388 00:18:47,936 --> 00:18:50,440 >> MIKE RIZZO: OK. 389 00:18:50,440 --> 00:18:52,220 Joten me juuri päättynyt CSS. 390 00:18:52,220 --> 00:18:57,230 Ja jotkut teistä ehkä ajatella, hyvin, meillä oli joitakin CSS on CS50 Finance. 391 00:18:57,230 --> 00:19:00,390 Mutta CSS kirjasto oli bootstrap. 392 00:19:00,390 --> 00:19:05,190 Me itse asiassa kuuluu Bootstrap hieman myöhemmin alle JavaScript koska kanssa 393 00:19:05,190 --> 00:19:09,660 Bootstrap CSS kirjastoon tulee myös paljon JavaScript joka 394 00:19:09,660 --> 00:19:12,060 Bootstrap tai Twitter - joka teki Bootstrap - 395 00:19:12,060 --> 00:19:15,426 käyttää hallita kaikkia niiden CSS. 396 00:19:15,426 --> 00:19:19,592 >> TOMAS REIMERS: Onko kellään mitään kysymystä toistaiseksi CSS yleensä? 397 00:19:19,592 --> 00:19:20,723 Olemme kunnossa? 398 00:19:20,723 --> 00:19:21,216 Mahtava. 399 00:19:21,216 --> 00:19:22,495 >> MIKE RIZZO: Mahtavaa. 400 00:19:22,495 --> 00:19:25,136 >> TOMAS REIMERS: So liikkuvat kiinni JavaScript. 401 00:19:25,136 --> 00:19:27,900 >> MIKE RIZZO: Joten halusimme puhua noin jQuery aluksi. 402 00:19:27,900 --> 00:19:30,780 Onko kukaan kuullut jQuery ennen tai käyttänyt sitä? 403 00:19:30,780 --> 00:19:32,180 Joo, pari? 404 00:19:32,180 --> 00:19:36,000 Joten jos vain työtä natiivi JavaScript, löydät itsesi 405 00:19:36,000 --> 00:19:41,000 kirjoittamalla paljon pitkiä valitsimia paljon. 406 00:19:41,000 --> 00:19:44,400 Joten mitä jQuery ei se tarjoaa mukava kääre JavaScript 407 00:19:44,400 --> 00:19:48,180 kieli, jonka avulla voit helposti valita ja manipuloida eri elementtejä 408 00:19:48,180 --> 00:19:52,470 dokumentissa objektimallia verkkosivu tai DOM, joka mielestäni 409 00:19:52,470 --> 00:19:54,290 te olette kuulleet vuonna luento tässä vaiheessa. 410 00:19:54,290 --> 00:19:57,550 >> TOMAS REIMERS: Jos et ole kuullut sitä tai jos et ole katsellut luento 411 00:19:57,550 --> 00:20:01,870 vielä, Document Object Model on pohjimmiltaan miten asiat ovat edustettuina. 412 00:20:01,870 --> 00:20:05,290 Joten HTML tavallaan näyttää puu kun itse vetää sen pois. 413 00:20:05,290 --> 00:20:06,850 Sinulla on HTML-elementti päälle. 414 00:20:06,850 --> 00:20:07,560 Sinulla on pään ja vartalon. 415 00:20:07,560 --> 00:20:09,500 >> Ja sitten, tuossa olet on kaikkea muuta. 416 00:20:09,500 --> 00:20:10,660 Joka kutsutaan DOM - 417 00:20:10,660 --> 00:20:12,120 Document Object Model. 418 00:20:12,120 --> 00:20:16,090 Joten malli, joka edustaa esineitä asiakirja on helppo tapa ajatella 419 00:20:16,090 --> 00:20:18,560 siitä. 420 00:20:18,560 --> 00:20:22,520 Ja yksi suuri asia jQuery on se todella tekee liikkumisesta 421 00:20:22,520 --> 00:20:26,460 että ja manipuloida elementit että uskomattoman yksinkertainen. 422 00:20:26,460 --> 00:20:30,300 >> Niin yksinkertainen, itse asiassa, että suurin osa JavaScript kirjastojen tai jos ei 423 00:20:30,300 --> 00:20:34,200 enemmistöllä, grand suurin osa niistä näet todella vaativat jQuery niin 424 00:20:34,200 --> 00:20:37,530 että ne voivat juosta itsensä yksinkertaisesti koska jos sinulla ei ole jQuery, voit 425 00:20:37,530 --> 00:20:40,540 tuhlaisi paljon aikaa yrittää selvittää, miten valita tiettyjä 426 00:20:40,540 --> 00:20:43,660 elementit ja miten tehdä muita asioita. 427 00:20:43,660 --> 00:20:47,950 Ja Toinen suuri asia jQuery on, että se on rajat selain yhteensopiva. 428 00:20:47,950 --> 00:20:51,550 >> Joten Muistan kun sanoimme, että ei kaikki selaimet toteuttavat 429 00:20:51,550 --> 00:20:53,100 asiat samalla tavalla? 430 00:20:53,100 --> 00:20:55,120 Tämä pätee myös JavaScript. 431 00:20:55,120 --> 00:20:58,220 Ja yksi hienoimmista asioista jQuery on se, että se tunnistaa 432 00:20:58,220 --> 00:21:00,300 selain ja havaita sopivalla tavalla. 433 00:21:00,300 --> 00:21:03,420 >> Joten jos sinun täytyy valita elementin, Internet Explorer saattaa sanoa, että olet 434 00:21:03,420 --> 00:21:05,770 pitäisi tehdä tällä tavalla. 435 00:21:05,770 --> 00:21:08,300 Firefox voisi sanoa oikein tapa on tällä tavalla. 436 00:21:08,300 --> 00:21:09,710 jQuery ei välitä. 437 00:21:09,710 --> 00:21:12,550 Kun kerrot jQuery valita elementti se selvittää, miten se on 438 00:21:12,550 --> 00:21:16,290 pitäisi tehdä se selaimen sisällä käyttäjä on tällä hetkellä, ja tee 439 00:21:16,290 --> 00:21:18,584 niin. 440 00:21:18,584 --> 00:21:22,650 >> MIKE RIZZO: Joten puhu käyttö jQuery hieman. 441 00:21:22,650 --> 00:21:27,670 Aivan kuten PHP, jQuery on erityisesti mieltymys dollarin merkki. 442 00:21:27,670 --> 00:21:30,880 Joten huomaat, että mitään jQuery - 443 00:21:30,880 --> 00:21:32,060 No, eivät kaikki. 444 00:21:32,060 --> 00:21:35,210 Voit joskus korvata dollarin merkin sana jQuery. 445 00:21:35,210 --> 00:21:38,980 Mutta yleisesti, vain koska se on lyhyempi, kun näet jQuery on 446 00:21:38,980 --> 00:21:41,420 käytetään se tulee olemaan kanssa dollarin merkki. 447 00:21:41,420 --> 00:21:47,030 >> Joten tässä me vain osoittaa alkua valitsin osa DOM. 448 00:21:47,030 --> 00:21:52,850 Täällä meillä on dollarin merkki jälkeen avoin suluissa ja sitten lainauksia. 449 00:21:52,850 --> 00:21:56,130 Ja sisällä lainausmerkkejä mennä meidän valitsimet eri elementtejä. 450 00:21:56,130 --> 00:21:59,810 Aivan kuten CSS, tarvitsimme valitsijat voitava muotoilla eri elementtejä 451 00:21:59,810 --> 00:22:00,840 sivulla. 452 00:22:00,840 --> 00:22:06,555 Nämä eri valitsimet kääntämään täsmälleen osaksi jQuery ja JavaScript, 453 00:22:06,555 --> 00:22:07,820 suurimmaksi osaksi. 454 00:22:07,820 --> 00:22:10,120 >> Joten tässä meillä on piste foo. 455 00:22:10,120 --> 00:22:14,780 Joten jos muistatte luento, piste tarkoittaa vain sitä luokkaa. 456 00:22:14,780 --> 00:22:18,850 Joten olemme valitsemalla elementti luokan foo. 457 00:22:18,850 --> 00:22:22,670 Joten jos menen eteenpäin ja avaamme JavaScript-konsoli täällä todella nopeasti 458 00:22:22,670 --> 00:22:26,830 vain osoittaa sen, jos vain kirjoita dollarin merkki, näemme, että se on jokin 459 00:22:26,830 --> 00:22:28,090 toiminto, joka tulee. 460 00:22:28,090 --> 00:22:29,420 Ja se on vain määritelty jQuery. 461 00:22:29,420 --> 00:22:32,120 >> TOMAS REIMERS: Niille teistä tuntemattomia, konsoli on työkalu 462 00:22:32,120 --> 00:22:35,430 Chromessa, jonka avulla voit, pohjimmiltaan, suorittaa JavaScript 463 00:22:35,430 --> 00:22:36,450 nykyinen sivu. 464 00:22:36,450 --> 00:22:39,420 Tämä löydät uskomattoman hyödyllinen, kun olet todella virheenkorjaus ja sinä 465 00:22:39,420 --> 00:22:42,400 täytyy olla, mitä on nykyinen arvo on noin globaali muuttuja tai mitä 466 00:22:42,400 --> 00:22:43,910 on jotain muuta? 467 00:22:43,910 --> 00:22:47,620 Se on tavallaan kuin GDB lukuun ottamatta että voit itse 468 00:22:47,620 --> 00:22:51,600 manipuloida elementit sivu se paljon helpompaa tavalla. 469 00:22:51,600 --> 00:22:55,080 Ja myös se ei pohjimmiltaan tarkista teidän kanssanne, ennen kuin se tekee mitään. 470 00:22:55,080 --> 00:22:58,660 >> Joten taas, GDB voisi olla, oletko varma, että haluat suorittaa seuraava askel? 471 00:22:58,660 --> 00:22:59,830 Konsoli on todellinen. 472 00:22:59,830 --> 00:23:03,690 Jotta web-sivu on renderointi ja tekee mitä se tekee, 473 00:23:03,690 --> 00:23:05,720 Neuvoston myös käynnissä sen rinnalla. 474 00:23:05,720 --> 00:23:08,330 Ja voit laittaa imputoidaan koodi että konsoli, joka 475 00:23:08,330 --> 00:23:09,260 ajettava sivulla. 476 00:23:09,260 --> 00:23:12,190 >> MIKE RIZZO: Niin syöttää konsoliin Pitäs varmaan lyhyesti 477 00:23:12,190 --> 00:23:13,750 mainita, miten se tehdään. 478 00:23:13,750 --> 00:23:17,850 Viime ongelmia, joita saattaa olla käytetty Chromen tarkastaa elementin 479 00:23:17,850 --> 00:23:20,440 toimintoja tai katsella sivun lähdekoodi - 480 00:23:20,440 --> 00:23:23,870 ja ne ovat saatavilla vain oikea klikkaamalla sivun tai tietyn 481 00:23:23,870 --> 00:23:28,430 elementti ja tekee joko tarkastaa elementti tai tarkastella sivun lähdekoodia. 482 00:23:28,430 --> 00:23:31,190 Voimme myös käyttää JavaScript konsoli suoraan 483 00:23:31,190 --> 00:23:33,630 valitsevat tarkastaa elementti. 484 00:23:33,630 --> 00:23:37,930 Näin on sitten vain lyödä konsoli äärimmäisenä oikealla puolella. 485 00:23:37,930 --> 00:23:41,900 >> Vaihtoehtoisesti voit myös menneet on oikeassa yläkulmassa, 486 00:23:41,900 --> 00:23:46,820 joka leikataan pois tämän näytön, jossa sillä on kolme vaakapalkeilla. 487 00:23:46,820 --> 00:23:52,010 Ja menet alas työkaluja ja Nyt JavaScript-konsoli 488 00:23:52,010 --> 00:23:53,240 täällä, jossa voi nähdä - 489 00:23:53,240 --> 00:23:54,370 ainakin Windows - 490 00:23:54,370 --> 00:23:59,680 pikakuvake Ohjaus Shift J. Joten sitten jos halusimme valita elementin 491 00:23:59,680 --> 00:24:06,060 tämän sivun, aivan kuten näytin ennen, teemme dollarin merkki avata parens 492 00:24:06,060 --> 00:24:08,180 ja sitten lainaa. 493 00:24:08,180 --> 00:24:11,750 >> Mielenkiintoista on, yleensä, puolilainausmerkkejä ja lainausmerkit ovat 494 00:24:11,750 --> 00:24:12,370 vaihdettavissa. 495 00:24:12,370 --> 00:24:16,050 Niin monet ihmiset vain käyttää yhden lainausmerkkeihin, koska ne ovat nopeampia kirjoittaa 496 00:24:16,050 --> 00:24:19,780 kuin lainausmerkkeihin, koska et täytyy pitää Shift. 497 00:24:19,780 --> 00:24:21,770 Joten minä vain tehdä juuri nyt. 498 00:24:21,770 --> 00:24:24,510 >> Joten haluan valita jotain luokan. 499 00:24:24,510 --> 00:24:27,200 Container, vain koska tiedän, että se jotain, joka on meidän 500 00:24:27,200 --> 00:24:28,740 Web-sivun juuri nyt. 501 00:24:28,740 --> 00:24:29,520 Ja osuin Enter. 502 00:24:29,520 --> 00:24:31,670 Ja voimme nähdä, että se valitsi sen. 503 00:24:31,670 --> 00:24:34,990 Joten se näkyy, että se palasi objektia. 504 00:24:34,990 --> 00:24:36,620 Niin, että perus valikoima. 505 00:24:36,620 --> 00:24:40,080 Jos haluamme todella manipuloida sitä, olisit soittaa jotain 506 00:24:40,080 --> 00:24:43,925 tähän valintaan, joka joudumme myöhemmin. 507 00:24:43,925 --> 00:24:49,030 >> TOMAS REIMERS: Joten vain katsoa, ​​että enemmän syvyyttä, tämä ei eroa 508 00:24:49,030 --> 00:24:52,245 kuin funktiokutsuja teimme C. Funktion nimi tässä 509 00:24:52,245 --> 00:24:52,580 hieman outo. 510 00:24:52,580 --> 00:24:55,640 Se on dollarin merkki. 511 00:24:55,640 --> 00:24:57,010 Se on vain nimi funktion. 512 00:24:57,010 --> 00:24:58,810 Ei ole mitään erikoista. 513 00:24:58,810 --> 00:25:00,450 >> Meillä on avoimet sulut. 514 00:25:00,450 --> 00:25:03,880 Sitten meillä on yksi argumentti, joka tässä tapauksessa sattuu olemaan merkkijono, 515 00:25:03,880 --> 00:25:05,680 joka on valitsin sen. 516 00:25:05,680 --> 00:25:08,130 Ja sitten meillä on loppusulkumerkit. 517 00:25:08,130 --> 00:25:09,960 Siinä kaikki. 518 00:25:09,960 --> 00:25:11,500 >> Se ei ole niin hyvin erilaisia. 519 00:25:11,500 --> 00:25:12,900 Vaikka se näyttää hyvin oudolta. 520 00:25:12,900 --> 00:25:17,220 Ja että voi olla, tavallaan, kiinni Point paljon ihmisiä. 521 00:25:17,220 --> 00:25:21,460 >> MIKE RIZZO: Joten Samoin jos halusimme Valitse elementti, joka on tunnus, 522 00:25:21,460 --> 00:25:23,470 Nyt haluamme valitkaa ID sijaan luokassa. 523 00:25:23,470 --> 00:25:28,080 Olisi samanlainen asia, jos me vain tehdä teräviä merkki tunnus. 524 00:25:28,080 --> 00:25:33,576 Joten olemme valitsemalla täällä kaikki elementtejä, jotka ovat tunnus baari. 525 00:25:33,576 --> 00:25:35,400 >> TOMAS REIMERS: Ja tämä ulottuu. 526 00:25:35,400 --> 00:25:36,450 Että CSS ulottuu. 527 00:25:36,450 --> 00:25:42,260 Aivan kuten CSS, voit valita kaikki linkkejä, jolla on luokka foo. 528 00:25:42,260 --> 00:25:43,420 Täällä, se on sama asia. 529 00:25:43,420 --> 00:25:52,750 >> Voisit tehdä a.foo, joka valitsisi kaikki linkit luokan kanssa foo. 530 00:25:52,750 --> 00:25:58,860 Voisit tehdä teräviä baari, joka valitse yhteys ID baari ja niin 531 00:25:58,860 --> 00:25:59,770 edelleen ja niin edelleen. 532 00:25:59,770 --> 00:26:02,120 CSS valitsin on voimassa jQuery valitsin. 533 00:26:02,120 --> 00:26:03,370 >> MIKE RIZZO: Joo. 534 00:26:03,370 --> 00:26:07,996 535 00:26:07,996 --> 00:26:11,460 OK, joten nyt Mennään hieman manipuloinnin, että voimme tehdä 536 00:26:11,460 --> 00:26:12,870 meidän jQuery. 537 00:26:12,870 --> 00:26:19,280 Joten jQuery on tietyn tyyppinen merkintätapa missä me vain käyttää 538 00:26:19,280 --> 00:26:20,170 piste lopussa. 539 00:26:20,170 --> 00:26:23,340 Ja voit ajatella tätä kuin vuonna C miten meillä oli eri structs. 540 00:26:23,340 --> 00:26:27,110 Ja mennä noihin structs, olisit käyttää piste päästä niihin. 541 00:26:27,110 --> 00:26:28,480 >> Tämä on, tavallaan, samanlainen asia. 542 00:26:28,480 --> 00:26:33,570 Vasta nyt meillä on tehtäviä tämän valitsijaelementille että voimme pyytää sitä. 543 00:26:33,570 --> 00:26:38,640 Joten tässä, aivan ensimmäinen esimerkki näet on CSS valitsin. 544 00:26:38,640 --> 00:26:45,290 Ja periaatteessa, mitä se tekee, on se sovelletaan ensimmäisen elementin CSS tähän 545 00:26:45,290 --> 00:26:46,230 asia, että olet valinnut - 546 00:26:46,230 --> 00:26:47,720 tämä elementti, että olet valinnut - 547 00:26:47,720 --> 00:26:49,290 kanssa arvo. 548 00:26:49,290 --> 00:26:55,390 >> TOMAS REIMERS: Niin helppo käännös että olisi, jos jQuery, periaatteessa, 549 00:26:55,390 --> 00:26:57,790 vain otti foo. 550 00:26:57,790 --> 00:27:05,480 Ja sitten CSS sanoi, Väri punainen ja lähellä. 551 00:27:05,480 --> 00:27:06,670 Se on sama idea. 552 00:27:06,670 --> 00:27:08,800 Mitä se on tehnyt, on se on valittuna Kaikki elintarvikkeita elementtejä. 553 00:27:08,800 --> 00:27:10,170 Ja sitten se laitetaan. 554 00:27:10,170 --> 00:27:15,884 Tavallaan, omaisuuden väri on yhtä suuri kuin punainen. 555 00:27:15,884 --> 00:27:21,070 >> MIKE RIZZO: Vastaavasti voimme myös muuttaa todellista sisältöä, mikä on 556 00:27:21,070 --> 00:27:24,870 näytetään HTML-sivun, joka on todella hienoa, koska se tarkoittaa, että 557 00:27:24,870 --> 00:27:28,095 Web-sivut voivat nyt olla täysin dynaaminen ja ei tarvitse olla staattinen 558 00:27:28,095 --> 00:27:31,660 tulostamaan PHP aivan alussa 559 00:27:31,660 --> 00:27:33,320 sivu ladataan. 560 00:27:33,320 --> 00:27:36,810 Joten tässä, jos haluaisimme muuttaa varsinainen HTML-sivun, olisimme nyt 561 00:27:36,810 --> 00:27:43,550 soittaa HTML-toiminto, joka sitten vain insertit mitä me täsmennä 562 00:27:43,550 --> 00:27:45,390 että elementti, että me valitut. 563 00:27:45,390 --> 00:27:49,810 Joten tässä olemme valitsemalla elementti luokan foo ja sitten sano, että se HTML 564 00:27:49,810 --> 00:27:52,200 se on nyt hello world. 565 00:27:52,200 --> 00:27:55,600 >> TOMAS REIMERS: Ja kun ajattelee mitkä ovat hyödyllisiä sovelluksia 566 00:27:55,600 --> 00:28:00,800 tämä, tämä CSS yksi, ensimmäinen asia, joka voit alkaa miettiä 567 00:28:00,800 --> 00:28:03,070 kannalta jopa valikoista. 568 00:28:03,070 --> 00:28:08,350 Voisit alkaa tehdä asioita, kuten silloin, kun käyttäjä leijuu yläosan 569 00:28:08,350 --> 00:28:11,970 of avattavasta, haluat tehdä alaosassa näkyvä. 570 00:28:11,970 --> 00:28:12,540 Oikea? 571 00:28:12,540 --> 00:28:15,610 >> Niin CSS, meillä on ominaisuuksia tehdä jotain näkyvää. 572 00:28:15,610 --> 00:28:19,330 Asiat kuten näyttö paksusuolen none tekisi näkymättömäksi. 573 00:28:19,330 --> 00:28:21,190 Näyttö lohko tekisi näkyväksi. 574 00:28:21,190 --> 00:28:25,860 Tai vaikka haluat mennä yksinkertaisempi, voit on asioita, kuten näkyvyys tasavertaisina 575 00:28:25,860 --> 00:28:27,520 näkyvissä, ja näkyvyys vastaa piilossa. 576 00:28:27,520 --> 00:28:30,330 577 00:28:30,330 --> 00:28:34,780 >> Ja voisit alkaa toteuttaa asioita kuten valikoista oikealla 578 00:28:34,780 --> 00:28:38,410 kun saat läpi käsityksen siitä, miten voit selvittää, kun tämä avaa, 579 00:28:38,410 --> 00:28:39,850 josta saamme läpi hyvin lyhyesti. 580 00:28:39,850 --> 00:28:42,160 Mutta voimme alkaa nähdä sovelluksia tästä. 581 00:28:42,160 --> 00:28:45,540 Vastaavalla mielessä, jos olisit yrittää ja toteuttaa, sanokaamme, chat 582 00:28:45,540 --> 00:28:48,620 moottori ja haluat tehdä vähän puhekupla keksiä aina olet 583 00:28:48,620 --> 00:28:52,880 sai uuden viestin, kun saat uuden viestin, voit tehdä hieman 584 00:28:52,880 --> 00:28:55,890 puhekupla keksiä muuttamalla HTML-sivun, eikö? 585 00:28:55,890 --> 00:29:00,540 Lisäämällä että extra puhekupla kanssa ylimääräistä tekstiä siellä. 586 00:29:00,540 --> 00:29:01,140 Joo? 587 00:29:01,140 --> 00:29:07,750 >> Yleisö: Voisi siis upottaa tämän sisällä HTML-koodin tavallaan kuin 588 00:29:07,750 --> 00:29:10,534 [Äänetön]? 589 00:29:10,534 --> 00:29:12,940 >> MIKE RIZZO: Oikea. 590 00:29:12,940 --> 00:29:16,190 Joo, me saamme, että vuonna hieman. 591 00:29:16,190 --> 00:29:18,810 Joo, se on samanlainen hieman PHP. 592 00:29:18,810 --> 00:29:21,240 Ei aivan samanlaisia. 593 00:29:21,240 --> 00:29:24,730 >> Hyvä ero tehtävä se, mitä tämä on todella muokkaamalla kun me muokata 594 00:29:24,730 --> 00:29:28,480 sivun, koska se ei tule olemaan muokkaamalla todellisen tiedoston, jota 595 00:29:28,480 --> 00:29:31,380 säilytetään palvelimella, koska maailma ei pitäisi olla lupaa 596 00:29:31,380 --> 00:29:32,610 muokata tiedostoja. 597 00:29:32,610 --> 00:29:36,080 Tämä on vain muokkaamalla mitä sivulla ja mitä näkyykö 598 00:29:36,080 --> 00:29:36,950 selain. 599 00:29:36,950 --> 00:29:40,340 Joten jos olit ladata sivun uudelleen sen jälkeen, sanoa, poistamalla jotain niin me 600 00:29:40,340 --> 00:29:44,730 katso voimme tehdä Poista puhelun, että asia olisi sitten uudelleen näkyviin. 601 00:29:44,730 --> 00:29:48,590 >> TOMAS REIMERS: Joten yksi tapa ajatella tämä on, jos olen tietokoneen ja 602 00:29:48,590 --> 00:29:50,170 Mike on, tavallaan, palvelin. 603 00:29:50,170 --> 00:29:53,850 Mitä tulee tapahtumaan on aion pyytää Mike, hei, voinko olla kopio 604 00:29:53,850 --> 00:29:54,630 Tämän sivun? 605 00:29:54,630 --> 00:29:56,190 Ja hän antaa minulle kopion. 606 00:29:56,190 --> 00:29:57,430 >> Ei, se ei ole alkuperäinen juttu. 607 00:29:57,430 --> 00:29:58,620 Se on vain kopio. 608 00:29:58,620 --> 00:30:00,450 Ja sitten se olisi sama kuin, oh, siellä on JavaScript täällä. 609 00:30:00,450 --> 00:30:02,450 On selvää, minun pitäisi muokata sivu olla näin. 610 00:30:02,450 --> 00:30:04,250 Ja olen muokkaat kopio. 611 00:30:04,250 --> 00:30:05,920 >> Mutta se ei ole vaikuttavat kopion itse. 612 00:30:05,920 --> 00:30:08,480 Ja jos olisin pyytänyt häntä uudestaan päivitä sivu, - 613 00:30:08,480 --> 00:30:10,060 Hei, saisinko toisen puhdas kopio - 614 00:30:10,060 --> 00:30:11,440 hän aikoo antaa minulle toinen puhdas kopio. 615 00:30:11,440 --> 00:30:14,240 Ja sitten, aion tehdä sama asia kuten, oh, tämä JS täällä joka sanoo 616 00:30:14,240 --> 00:30:14,866 muokata tätä. 617 00:30:14,866 --> 00:30:17,460 Ja aion jatkaa tuota. 618 00:30:17,460 --> 00:30:20,930 >> MIKE RIZZO: Niin todella cool juttu että voit tehdä jQuery on 619 00:30:20,930 --> 00:30:24,350 itse lisätä erilaisia animaatioita sivullesi. 620 00:30:24,350 --> 00:30:27,440 En tiedä, jos olet koskaan nähnyt jossa yrität täyttää lomakkeen 621 00:30:27,440 --> 00:30:31,250 verkossa ja et täytä asiat oikein. 622 00:30:31,250 --> 00:30:33,440 Joten pikku juttu liukuu alas yläosassa ja sanoo, 623 00:30:33,440 --> 00:30:34,820 ole tehnyt tätä oikein. 624 00:30:34,820 --> 00:30:36,260 Ole hyvä ja yritä uudelleen. 625 00:30:36,260 --> 00:30:37,890 Ja sitten, se saattaa jopa vain kiivetä. 626 00:30:37,890 --> 00:30:40,710 >> Osoittautuu jQuery on rakennettu toiminnot jotka tekevät kaikki kyseisen 627 00:30:40,710 --> 00:30:44,180 animaatio todella, todella helppoa. 628 00:30:44,180 --> 00:30:46,750 Joten on ensin häivyttää out-toiminto, joka 629 00:30:46,750 --> 00:30:47,710 voit soittaa jotain. 630 00:30:47,710 --> 00:30:55,650 Ja se on tapa muuttaa CSS että tekijä animoitu tavalla. 631 00:30:55,650 --> 00:30:58,480 Joten se vie tahansa elementti kutsua sitä häivyttää pois. 632 00:30:58,480 --> 00:31:03,990 Ja sitten, hitaasti se muuttuu peittävyyttä kunnes se menee täysin avoin. 633 00:31:03,990 --> 00:31:07,330 >> TOMAS REIMERS: muita suosittuja yksi on liukua alas, mikä tekee 634 00:31:07,330 --> 00:31:08,800 jotain näkyviin vetämällä sitä alas. 635 00:31:08,800 --> 00:31:12,840 Joten jos kyseessä pudotusvalikosta, uudelleen, kun opimme, miten tunnistaa 636 00:31:12,840 --> 00:31:15,310 kun tämä on pysytellyt yli, voisitte vain kertoa tämän pohjan 637 00:31:15,310 --> 00:31:16,910 osa liukuu alas nyt. 638 00:31:16,910 --> 00:31:19,270 Ja sitten, se näyttäisi liu'uttamalla alas. 639 00:31:19,270 --> 00:31:22,042 640 00:31:22,042 --> 00:31:26,590 >> MIKE RIZZO: Ja sitten, jos sinulla on vain tietyntyyppinen animaatio mielessä, että 641 00:31:26,590 --> 00:31:29,080 jQuery ei välttämättä kerro. 642 00:31:29,080 --> 00:31:32,690 Esimerkiksi sanokaamme jQuery ei tarjota sinulle dia 643 00:31:32,690 --> 00:31:33,750 alas ja työnnä ylöspäin. 644 00:31:33,750 --> 00:31:36,740 No, sanokaamme olet halunnut liukua jotain tai vasemmalta sisään 645 00:31:36,740 --> 00:31:39,880 oikeanlaista kuten CS50 pääsivu tekee aina 646 00:31:39,880 --> 00:31:42,080 menet uusi paneeli. 647 00:31:42,080 --> 00:31:45,030 Olisit sitten luultavasti toteuttaa sitä itse käyttämällä 648 00:31:45,030 --> 00:31:49,310 animoida toimintoa jQuery. 649 00:31:49,310 --> 00:31:51,350 >> Joten samalla, juuri animoida. 650 00:31:51,350 --> 00:31:55,850 Ja sitten, sen sisällä se kestää sanakirja erilaisia ​​arvoja 651 00:31:55,850 --> 00:31:57,340 että sinun pitäisi kulkea. 652 00:31:57,340 --> 00:32:06,960 Joten tässä, jos halusimme animoida elementti foo sellainen, että sen leveys joko 653 00:32:06,960 --> 00:32:10,880 laajenee tai sopimukset 80 pikseliä, riippuen siitä, mitä se tällä hetkellä on. 654 00:32:10,880 --> 00:32:14,100 Haluamme vain tapahtui, että koska argumentti sisällä. 655 00:32:14,100 --> 00:32:18,060 >> Animoida myös joitakin muita argumentteja että voisitte välittää sen esimerkiksi 656 00:32:18,060 --> 00:32:21,150 nopeus animaation että haluat antaa sille. 657 00:32:21,150 --> 00:32:26,220 Ja tehdä sitä, haluan vain sanoa nopeasti Google jQuery animoida. 658 00:32:26,220 --> 00:32:31,710 Ja sitten, kasvatuksesta Tältä sivulta voit katso se sai joukko eri 659 00:32:31,710 --> 00:32:33,560 ominaisuuksia, jotka voit siirtää sitä. 660 00:32:33,560 --> 00:32:35,990 >> Ja kehotan teitä - kun tulee poikki jotain, et 661 00:32:35,990 --> 00:32:40,390 tietää tai haluat vain lisätietoja erityisesti tapa, että voit soittaa 662 00:32:40,390 --> 00:32:41,270 jotain - 663 00:32:41,270 --> 00:32:44,440 vain googlettaa. jQuery on äärimmäisen hyvin dokumentoitu. 664 00:32:44,440 --> 00:32:49,140 Ja usein siellä on paljon esimerkkejä siitä, että ne tarjoavat sinulle. 665 00:32:49,140 --> 00:32:52,470 Jos me selaa - 666 00:32:52,470 --> 00:32:53,720 alas - 667 00:32:53,720 --> 00:32:57,660 668 00:32:57,660 --> 00:32:59,190 että voimme käyttää, samoin. 669 00:32:59,190 --> 00:33:02,480 >> Jälleen kun kehittäjä todella menee läpi ongelmia kirjallisesti 670 00:33:02,480 --> 00:33:05,810 kirjasto, he yleensä haluavat joku käyttää sitä. 671 00:33:05,810 --> 00:33:09,400 Joten rinnalla on menossa olla dokumentointi. 672 00:33:09,400 --> 00:33:12,270 Ja että asiakirjat voidaan yleensä löytyy projektin sivulla, joka on 673 00:33:12,270 --> 00:33:14,970 miksi me annoimme teille, että alkuperäinen sivusto alussa, joka yhdistää sinut 674 00:33:14,970 --> 00:33:18,080 projektin sivut niin voit nähdä, että asiakirjat. 675 00:33:18,080 --> 00:33:22,670 >> Tyypillisesti projekti-sivu, jos of [äänetön], se määrännyt 676 00:33:22,670 --> 00:33:23,940 nimet luokkiin. 677 00:33:23,940 --> 00:33:27,250 Kun kyseessä on JavaScript, se antaa et nimen toimintoja. 678 00:33:27,250 --> 00:33:35,310 Muuten, jos me selaamalla ylös, nopea Sivuhuomautuksena toiminnoista on 679 00:33:35,310 --> 00:33:39,080 kun näet toiminto toteutetaan näin koviin 680 00:33:39,080 --> 00:33:43,800 suluissa keskellä, että välineet että omaisuus on vapaaehtoista. 681 00:33:43,800 --> 00:33:44,750 Vain heads up. 682 00:33:44,750 --> 00:33:47,350 Olen nähnyt paljon kysymyksiä siitä. 683 00:33:47,350 --> 00:33:50,370 >> Joten tässä voimme nähdä, että animoida vie ominaisuudet 684 00:33:50,370 --> 00:33:51,800 välttämättömänä argumentti. 685 00:33:51,800 --> 00:33:54,870 Ja kaikki muu on vapaaehtoista. 686 00:33:54,870 --> 00:33:56,136 Sivuhuomautuksena - 687 00:33:56,136 --> 00:33:58,090 voit ajatella tätä, lajitella ja, kuten man-sivuilta. 688 00:33:58,090 --> 00:34:04,275 Man-sivut ovat asiakirjat C ja ja paljon muita asioita, samoin. 689 00:34:04,275 --> 00:34:11,020 >> MIKE RIZZO: Joten olemme oppineet muuttaa eri CSS sivulla, 690 00:34:11,020 --> 00:34:14,040 animoida, ja poista lisätä HTML. 691 00:34:14,040 --> 00:34:16,889 Mutta yksi todella tehokkain asioita JavaScript 692 00:34:16,889 --> 00:34:18,270 ja erityisesti jQuery - 693 00:34:18,270 --> 00:34:22,570 mitä sen avulla voit tehdä on vastata eri elementtejä, jotka tapahtua. 694 00:34:22,570 --> 00:34:25,380 Esimerkiksi, tässä meillä on tapahtumankäsittelijänä. 695 00:34:25,380 --> 00:34:28,210 Ja se tarkoittaa vain sitä, kun tämä tapahtuma tapahtuu, hoidamme sen 696 00:34:28,210 --> 00:34:29,280 tietyllä tavalla. 697 00:34:29,280 --> 00:34:35,159 >> Joten tässä, yleinen jQuery tapahtuma käsittelijä on piste. 698 00:34:35,159 --> 00:34:42,949 Ja sitten, ensimmäinen asia annoit on mitä tapahtuma pitääkin 699 00:34:42,949 --> 00:34:43,810 kuunnella varten. 700 00:34:43,810 --> 00:34:45,610 Joten täällä, se on napsautuksella, että odotamme. 701 00:34:45,610 --> 00:34:49,250 >> TOMAS REIMERS: Vaihtoehtoisesti sinulla Hoverissa, joka on hyvin suosittu. 702 00:34:49,250 --> 00:34:52,000 Joten takaisin minun pudotusvalikosta idea. 703 00:34:52,000 --> 00:34:54,239 Olisit alkuun yksi häilyä. 704 00:34:54,239 --> 00:34:56,096 Ja sitten voisi muuttaa sitä. 705 00:34:56,096 --> 00:34:56,830 >> MIKE RIZZO: Oikea. 706 00:34:56,830 --> 00:35:01,680 Ja sitten, kun se tapahtuu, se vain suorittaa tätä toimintoa, että annamme sen 707 00:35:01,680 --> 00:35:05,080 argumenttina ja että se hälytykset hei tai Hei. 708 00:35:05,080 --> 00:35:08,900 >> TOMAS REIMERS: Eli jos kyseessä on JavaScript, tämä on paikka meidän 709 00:35:08,900 --> 00:35:12,970 poistaa itsemme C. voimme itse ottaa toimii argumentteja. 710 00:35:12,970 --> 00:35:15,940 Ja on paljon todella monimutkaisia ​​tapoja tehdä tätä. 711 00:35:15,940 --> 00:35:17,940 Aiomme edistää yksi tapa, joka on voit määrittää 712 00:35:17,940 --> 00:35:19,270 toimiakseen oikeassa. 713 00:35:19,270 --> 00:35:22,540 >> Joten kun olet pyytänyt toimivat parametri, olet pohjimmiltaan vain 714 00:35:22,540 --> 00:35:24,500 menossa toiminnon määrittämiseksi paikan päällä. 715 00:35:24,500 --> 00:35:27,090 Ja miten määrittelet funktion JavaScript on sinulle 716 00:35:27,090 --> 00:35:28,820 kirjaimellisesti sanoa toiminto. 717 00:35:28,820 --> 00:35:30,130 Sitten yleensä nimi funktion. 718 00:35:30,130 --> 00:35:32,510 Mutta emme koskaan viite tämä toiminto uudelleen. 719 00:35:32,510 --> 00:35:34,040 Joten jätämme sen nimetön. 720 00:35:34,040 --> 00:35:40,440 >> Sitten sulkeisiin, sitten kihara henkselit, ja sitten koodi kyseisessä. 721 00:35:40,440 --> 00:35:42,540 Joten me ymmärrämme tämän voi olla hieman sekavaa. 722 00:35:42,540 --> 00:35:45,180 Joten annamme sinulle yleinen muoto mitä tapahtumakäsittely näyttää 723 00:35:45,180 --> 00:35:47,790 alapuolella, joka on tapahtumia. 724 00:35:47,790 --> 00:35:50,598 Ja sitten, koodin sisällä että. 725 00:35:50,598 --> 00:35:52,478 >> MIKE RIZZO: Onko olemassa mitään kysyttävää tästä? 726 00:35:52,478 --> 00:35:54,818 Tämä voi olla hieman sekava ensimmäistä kertaa näet sen. 727 00:35:54,818 --> 00:35:57,550 >> TOMAS REIMERS: Olet itse haluat avata tiedoston ja näyttää heille joitakin 728 00:35:57,550 --> 00:35:58,155 jQuery juuri nyt? 729 00:35:58,155 --> 00:35:59,853 >> MIKE RIZZO: Joo, tehdään se. 730 00:35:59,853 --> 00:36:00,256 OK. 731 00:36:00,256 --> 00:36:02,490 >> TOMAS REIMERS: Joten nyt olemme laitteeseen. 732 00:36:02,490 --> 00:36:07,730 Ja mitä olemme tehneet on olemme ottaneet vapauden luoda sekä Index.html 733 00:36:07,730 --> 00:36:10,100 tiedosto, joka vie sinut JavaScript-tiedoston. 734 00:36:10,100 --> 00:36:12,880 Ja voimme avata - 735 00:36:12,880 --> 00:36:15,170 joo. 736 00:36:15,170 --> 00:36:16,630 No, se tekee kaksi asiaa. 737 00:36:16,630 --> 00:36:18,350 >> Ensimmäinen on sen linkkejä JavaScript-tiedoston. 738 00:36:18,350 --> 00:36:21,250 Ja näemme, että jopa täällä. 739 00:36:21,250 --> 00:36:25,340 Näemme, että pää HTML-dokumentti, erityisesti. 740 00:36:25,340 --> 00:36:28,260 Niin näet siellä, että me pohjimmiltaan sanoa SRC, 741 00:36:28,260 --> 00:36:29,590 joka tarkoittaa lähdettä. 742 00:36:29,590 --> 00:36:30,630 Ja se on URL. 743 00:36:30,630 --> 00:36:32,700 >> Joten täällä voi sanoa olemme sisältyvät jQuery. 744 00:36:32,700 --> 00:36:34,290 Ja olemme myös skriptejä. 745 00:36:34,290 --> 00:36:40,630 Toinen tapa sisällyttää JavaScript on että voit sisällyttää inline script 746 00:36:40,630 --> 00:36:44,600 tag kuten olemme alareunassa, jossa se sanoo kirjoitus tyyppi on teksti JavaScript. 747 00:36:44,600 --> 00:36:46,960 >> Joten me sanomme, kuuntele, olemme noin sisällyttää käsikirjoituksen. 748 00:36:46,960 --> 00:36:51,890 Ja tyyppi, että kirjoitus on JavaScript, joka on eräänlainen tekstiä. 749 00:36:51,890 --> 00:36:52,550 Hyvin yksinkertainen. 750 00:36:52,550 --> 00:36:56,490 >> MIKE RIZZO: Eli tämä, tavallaan, saa kysymykseesi siitä, miten me muun muassa 751 00:36:56,490 --> 00:37:02,340 JavaScript meidän tiedostoja, koska kun me oli PHP, teemme jotain tällaista. 752 00:37:02,340 --> 00:37:07,570 Ja sitten on meidän PHP toimintoja - sanokaamme varastot tehdä 753 00:37:07,570 --> 00:37:09,150 jotain, joka - 754 00:37:09,150 --> 00:37:10,490 menee sinne. 755 00:37:10,490 --> 00:37:13,860 Kuitenkin nyt meillä koodit että me annamme sille, jotka ovat todellisuudessa 756 00:37:13,860 --> 00:37:19,470 osa HTML itse, koska se ei ole faking on HTML-tiedosto maali 757 00:37:19,470 --> 00:37:25,070 on PHP koska jos todella mennä ja katso sivun lähdekoodi, 758 00:37:25,070 --> 00:37:28,430 näet nämä koodit siellä Javascript liittyy 759 00:37:28,430 --> 00:37:29,800 heitä siinä. 760 00:37:29,800 --> 00:37:31,760 >> Joten sitten, jos halusimme kirjoittaa joitakin JavaScript - 761 00:37:31,760 --> 00:37:37,110 Sanotaan vain halusimme muuttaa kehon koska juuri nyt minulla ei ole 762 00:37:37,110 --> 00:37:40,020 muita tunnisteita, jotka voin todella muokata lisäksi elin. 763 00:37:40,020 --> 00:37:42,450 Sanotaan vain halusin muuttaa CSS siitä. 764 00:37:42,450 --> 00:37:46,190 Joten me menemme eteenpäin ja muutos väri on punainen. 765 00:37:46,190 --> 00:37:47,380 >> Joten en tallenna tiedosto. 766 00:37:47,380 --> 00:37:52,700 Mennään takaisin meidän web-sivun, virkistää, ja tekee sen automaattisesti 767 00:37:52,700 --> 00:37:55,920 koska se ei tunnu se odotti ollenkaan, koska olimme ei kuuntele 768 00:37:55,920 --> 00:37:59,450 tapahtuman tai mitään sellaista. 769 00:37:59,450 --> 00:38:02,800 >> TOMAS REIMERS: Jos siis palata siihen tiedosto erityisesti - HTML 770 00:38:02,800 --> 00:38:04,710 tiedosto - mitä aiot nähdä on meillä - 771 00:38:04,710 --> 00:38:06,810 muistaa, että tämä on ladattu, tavallaan, kronologisesti. 772 00:38:06,810 --> 00:38:09,910 Joten olemme ensin pää. se lataa nämä kaksi tiedostoa. 773 00:38:09,910 --> 00:38:10,800 Sitten menemme kehon. 774 00:38:10,800 --> 00:38:11,640 Ja me näemme hello world. 775 00:38:11,640 --> 00:38:13,030 Joten me tehdä hello world. 776 00:38:13,030 --> 00:38:15,240 >> Ja sitten viimeinen asia meillä on meillä komentosarjatunnus. 777 00:38:15,240 --> 00:38:20,880 Joten se toimii komentosarjatunnus koska se on ei kerro sitä odottaa mitään. 778 00:38:20,880 --> 00:38:24,700 Ja se on alkeellisinta tapa suorittaa JavaScript. 779 00:38:24,700 --> 00:38:29,200 >> Tämän sanoi, voit laittaa script tag up otsikossa vain 780 00:38:29,200 --> 00:38:31,240 näyttää tässä vaiheessa? 781 00:38:31,240 --> 00:38:34,450 782 00:38:34,450 --> 00:38:35,700 Ja ajelu että. 783 00:38:35,700 --> 00:38:38,880 784 00:38:38,880 --> 00:38:41,070 Aiomme huomata, että se ei muuttanut väriä. 785 00:38:41,070 --> 00:38:44,210 Ja tämä on yksi niistä ongelmista JavaScript on, että asiat ovat ladattu 786 00:38:44,210 --> 00:38:45,930 aikajärjestyksessä. 787 00:38:45,930 --> 00:38:49,750 >> Joten tuolloin, että kyseisen koodin oli käynnissä, valitsimme - 788 00:38:49,750 --> 00:38:52,530 palata - 789 00:38:52,530 --> 00:38:53,670 body. 790 00:38:53,670 --> 00:38:57,560 Body ei ole vielä olemassa, koska JavaScript on sopusoinnussa HTML. 791 00:38:57,560 --> 00:39:01,790 Joten selain on kuin valitsemalla elin. 792 00:39:01,790 --> 00:39:02,760 Ei ole sellaista asiaa vielä. 793 00:39:02,760 --> 00:39:03,600 Joten emme voi sivuuttaa sitä. 794 00:39:03,600 --> 00:39:05,330 Ja pidämme menossa. 795 00:39:05,330 --> 00:39:07,200 >> Ja sitten me määrittelemme body. 796 00:39:07,200 --> 00:39:09,670 Mutta joka ei koskaan saa päivitetty. 797 00:39:09,670 --> 00:39:12,560 Joten kun olet täytäntöön script tunnisteet, varmista, että asetat 798 00:39:12,560 --> 00:39:15,502 jälkeen body. 799 00:39:15,502 --> 00:39:16,820 Seuraava dia. 800 00:39:16,820 --> 00:39:17,830 >> MIKE RIZZO: OK. 801 00:39:17,830 --> 00:39:19,330 Joten muutimme jotain. 802 00:39:19,330 --> 00:39:21,910 Mutta se ei näyttänyt se vastasi meitä lainkaan, koska se vain eräänlainen 803 00:39:21,910 --> 00:39:24,150 teki sen heti kun se ladattu sivu. 804 00:39:24,150 --> 00:39:27,700 Joten nyt, sen sijaan tehdä tämän, miksi emme lisätä tapahtuman käsittelijät. 805 00:39:27,700 --> 00:39:31,020 >> Tehdäänpä jotain kehoon uudelleen. 806 00:39:31,020 --> 00:39:33,490 Ja sanotaanko teemme sen - 807 00:39:33,490 --> 00:39:34,500 valitse. 808 00:39:34,500 --> 00:39:35,750 Me lisäämme toiminto. 809 00:39:35,750 --> 00:39:38,270 810 00:39:38,270 --> 00:39:39,690 >> TOMAS REIMERS: Vaihdetaan se on punaiseksi uudelleen. 811 00:39:39,690 --> 00:39:40,000 Miksi ei? 812 00:39:40,000 --> 00:39:41,680 >> MIKE RIZZO: Joo, nyt muutos sen "punaiseksi uudelleen. 813 00:39:41,680 --> 00:39:46,310 814 00:39:46,310 --> 00:39:46,900 Selvä. 815 00:39:46,900 --> 00:39:48,480 Joten lataa sivu. 816 00:39:48,480 --> 00:39:49,530 OK, näemme - 817 00:39:49,530 --> 00:39:52,290 odotetusti, se ei punaiseksi vielä. 818 00:39:52,290 --> 00:39:53,610 Mutta sitten voimme mennä eteenpäin ja klikkaa sitä. 819 00:39:53,610 --> 00:39:54,270 >> TOMAS REIMERS: Ja se muuttuu punaiseksi. 820 00:39:54,270 --> 00:39:56,090 >> MIKE RIZZO: Ja se tekee punaisiksi odotetusti. 821 00:39:56,090 --> 00:39:59,010 >> TOMAS REIMERS: Ja voimme nähdä, kuinka voimme alkaa rakentaa hyvin yksinkertainen 822 00:39:59,010 --> 00:40:00,170 vuorovaikutusta. 823 00:40:00,170 --> 00:40:03,850 Muut asioita kannattaa tehdä on, jos emme halua tehdä kehon 824 00:40:03,850 --> 00:40:07,230 Väri punainen, tehkäämme HTML taustaväri punainen. 825 00:40:07,230 --> 00:40:08,480 Just niin se on sama CSS. 826 00:40:08,480 --> 00:40:19,960 827 00:40:19,960 --> 00:40:23,320 >> Ja kun muutamme sitä, voimme nähdä tämän hyvin dramaattinen vaikutus muuttaa 828 00:40:23,320 --> 00:40:25,510 koko sivun. 829 00:40:25,510 --> 00:40:29,100 Joten jälleen, jos olet täytäntöön asioita, voit olla yksi komponentti 830 00:40:29,100 --> 00:40:30,150 joka on tarkoitettu napsautetaan. 831 00:40:30,150 --> 00:40:32,710 Sanotaan Exit-painiketta ja koko muu komponentti, 832 00:40:32,710 --> 00:40:33,830 joka on tarkoitus vastata. 833 00:40:33,830 --> 00:40:35,755 Voisi siis poistaa ikkunan kun näin tapahtuu. 834 00:40:35,755 --> 00:40:39,341 835 00:40:39,341 --> 00:40:40,700 >> MIKE RIZZO: OK. 836 00:40:40,700 --> 00:40:42,200 Aivan kuten esimerkiksi - 837 00:40:42,200 --> 00:40:44,400 et saa nähdä tätä aikaisemmin - 838 00:40:44,400 --> 00:40:47,500 Minä vain näytän sinulle, mitä se näyttää kuten kun me salata jotakin. 839 00:40:47,500 --> 00:40:52,220 Niin minä mennä eteenpäin ja tehdä dia ylös. 840 00:40:52,220 --> 00:40:54,440 >> TOMAS REIMERS Haluatko kääri että Edellä tyyppi ennen kuin teemme sen? 841 00:40:54,440 --> 00:40:55,132 >> MIKE RIZZO: OK. 842 00:40:55,132 --> 00:40:59,135 Niin, miksi emme tee sitä vain niin voimme valita sitä vähän enemmän. 843 00:40:59,135 --> 00:41:00,490 >> TOMAS REIMERS: Ja katsotaanpa antaa sille luokassa. 844 00:41:00,490 --> 00:41:01,740 >> MIKE RIZZO: Joo. 845 00:41:01,740 --> 00:41:06,575 846 00:41:06,575 --> 00:41:09,920 OK, joten katsotaanpa. 847 00:41:09,920 --> 00:41:14,820 Sen sijaan, että valitsemalla todellinen kehon nyt, minä vain valita kaiken kanssa 848 00:41:14,820 --> 00:41:18,780 luokan hei, mikä täällä vain yksi asia. 849 00:41:18,780 --> 00:41:20,900 Joten meidän ei pitäisi huolehtia siitä. 850 00:41:20,900 --> 00:41:23,080 >> Niin minä päivittää sitä. 851 00:41:23,080 --> 00:41:24,230 Menen eteenpäin ja klikkaa sitä. 852 00:41:24,230 --> 00:41:27,890 Ja se, tavallaan, teki outo dia up asia, joka ei näyttänyt, että 853 00:41:27,890 --> 00:41:29,580 houkutteleva. 854 00:41:29,580 --> 00:41:31,060 Yleensä ne näyttävät ihan kivoja. 855 00:41:31,060 --> 00:41:32,720 Oletan, tämä - joidenkin syy - ei. 856 00:41:32,720 --> 00:41:36,640 Otan vain tehdä häivyttää pois niin voit katsoa sekin. 857 00:41:36,640 --> 00:41:38,100 Paljon mukavampaa. 858 00:41:38,100 --> 00:41:41,150 >> Ja sitten, jos en avaa JavaScript konsoli uudelleen ja haluamme nähdä, mitä 859 00:41:41,150 --> 00:41:43,900 se näyttää, kun me häivyttää sen sisään 860 00:41:43,900 --> 00:41:46,920 Nyt olen vain soittaa häivyttää sitä. 861 00:41:46,920 --> 00:41:48,830 Ja se haalistuu takaisin sisään 862 00:41:48,830 --> 00:41:56,150 >> Samoin voisimme todella myös kulkea argumentti haalistua tai häivyttää, 863 00:41:56,150 --> 00:41:57,640 joka on, tavallaan, nopeutta sen. 864 00:41:57,640 --> 00:42:02,220 Joten mene eteenpäin ja sanoa haluamme se mennä hitaasti häivyttää sisään 865 00:42:02,220 --> 00:42:04,250 Joten kai se silti tuntui melko nopeasti. 866 00:42:04,250 --> 00:42:06,180 Mutta se oli hitaampi kuin ennen. 867 00:42:06,180 --> 00:42:10,340 >> TOMAS REIMERS: Ja jos haluat löytää Lisätietoja näistä asioista, jälleen, 868 00:42:10,340 --> 00:42:13,410 vain mennä jQuery dokumentaatio, jota me olemme antaneet teille, ja lukea 869 00:42:13,410 --> 00:42:13,735 näiden kautta. 870 00:42:13,735 --> 00:42:15,790 He dokumentoivat toiminnot uskomattoman hyvin. 871 00:42:15,790 --> 00:42:18,622 872 00:42:18,622 --> 00:42:19,570 >> MIKE RIZZO: OK. 873 00:42:19,570 --> 00:42:21,560 Joten kai mennään takaisin tähän. 874 00:42:21,560 --> 00:42:23,490 Ja voimme puhua meidän viimeinen sivu. 875 00:42:23,490 --> 00:42:24,690 No, voimme lopuksi Bootstrap. 876 00:42:24,690 --> 00:42:27,140 Ja sitten me sen avaaminen joitakin kysymyksiä. 877 00:42:27,140 --> 00:42:30,180 Ja jos teillä mitään ideoita, jotka haluat yrittää oksentaa ja nähdä 878 00:42:30,180 --> 00:42:34,150 jos voimme toteuttaa ne JavaScript nopeasti. 879 00:42:34,150 --> 00:42:37,890 >> Joten todella nopeasti noin Bootstrap, joka on automaattisesti mukana 880 00:42:37,890 --> 00:42:41,700 viimeinen ongelma asetettu CSS kansioon ja todella liittyvät oman 881 00:42:41,700 --> 00:42:43,190 header.php. 882 00:42:43,190 --> 00:42:46,740 Joten voi lisännyt luokkaa, että on määritelty Saapasraksi siihen. 883 00:42:46,740 --> 00:42:50,490 Ja se olisi automaattisesti tyylistä niitä asioita vastaavasti. 884 00:42:50,490 --> 00:42:54,550 >> TOMAS REIMERS: Eli Bootstrap on hyvin maaginen asia kehittämä ihmiset 885 00:42:54,550 --> 00:42:55,340 Twitterissä. 886 00:42:55,340 --> 00:42:57,230 Ja mitä se oli tarkoitus tehdä, oli - 887 00:42:57,230 --> 00:43:00,740 ennen sivustot olivat todella vaikea tehdä hyvältä, varsinkin kun meillä oli 888 00:43:00,740 --> 00:43:02,200 paljon yhteisiä osia. 889 00:43:02,200 --> 00:43:04,770 Niin paljon painikkeita Web näytti samalta. 890 00:43:04,770 --> 00:43:08,960 >> Paljon tekstiä kentät voidaan tehdä näyttää paremmalta kuin tavallinen teksti 891 00:43:08,960 --> 00:43:13,620 kenttä Tiedät luultavasti todella vanhat sivustot tai oikeastaan ​​huonosti tehty 892 00:43:13,620 --> 00:43:18,210 sivustoja, jotka vain näyttää kirjaimellinen tekstilaatikoita ilman minkäänlaista tekstin 893 00:43:18,210 --> 00:43:21,190 varjo tai minkäänlaista kiva ääriviivat. 894 00:43:21,190 --> 00:43:24,540 Joten mitä Bootstrap teki oli se sanoi, hyvin, meillä on paljon yhteistä tyylejä. 895 00:43:24,540 --> 00:43:28,210 Miksi emme tee yhdellä yhteisellä CSS ja yhteiset JavaScriptiä 896 00:43:28,210 --> 00:43:32,210 hyvin, mikä voi muotoilla se on ja joka voi antaa ihmisille asioita, kuten pisara 897 00:43:32,210 --> 00:43:34,610 valikoista, jotka voivat antaa ihmisille asioita, kuten modals. 898 00:43:34,610 --> 00:43:38,580 >> Modaalinen on mitä ponnahtaa yli sivun aina kun se on varsinaisesti 899 00:43:38,580 --> 00:43:41,090 jotain, joka estää edelleen vuorovaikutus kunnes 900 00:43:41,090 --> 00:43:43,110 vuorovaikutuksessa sen kanssa. 901 00:43:43,110 --> 00:43:45,820 Jotain tällaista on, oletko varma Haluatko poistaa tämä asia? 902 00:43:45,820 --> 00:43:49,100 Et voi oikeastaan ​​tehdä mitään muuta kunnes sanot kyllä ​​tai ei. 903 00:43:49,100 --> 00:43:52,720 >> Se vei kaikki tämän, ja se pakataan se yhteen ja sanoi, tässä sitä mennään. 904 00:43:52,720 --> 00:43:54,630 Ihmiset voivat nyt käyttää tätä. 905 00:43:54,630 --> 00:43:56,830 Ja löydät sen yli klo getbootstrap.com. 906 00:43:56,830 --> 00:44:00,480 Se on automaattisesti sisälly viimeinen ongelma asetettu. 907 00:44:00,480 --> 00:44:04,160 Ja olet enemmän kuin tervetullut käyttää sitä oman opinnäytetyön. 908 00:44:04,160 --> 00:44:06,950 Ja jos haluat seurata, että linkkiä saadaksesi Bootstrap. 909 00:44:06,950 --> 00:44:10,590 910 00:44:10,590 --> 00:44:15,700 >> Näet tässä Bootstrap CSS sivusto. 911 00:44:15,700 --> 00:44:16,860 Näet Bootstrap. 912 00:44:16,860 --> 00:44:20,450 Ja jos selaat alaspäin, näet miten ladata se, miten 913 00:44:20,450 --> 00:44:21,900 asenna se, ja niin edelleen. 914 00:44:21,900 --> 00:44:24,700 >> MIKE RIZZO: Ja voit myös, Kiinnostavaa kyllä, muokata sitä 915 00:44:24,700 --> 00:44:27,770 olla mitä Teemojen että haluat. 916 00:44:27,770 --> 00:44:31,270 Tiedän, että on jotain tein minun Opinnäytetyö kun otin luokka 917 00:44:31,270 --> 00:44:32,050 on muokata sitä. 918 00:44:32,050 --> 00:44:34,540 Eri versiota Bootstrap että oli erilainen värimaailma ja 919 00:44:34,540 --> 00:44:36,700 eri muotoja joidenkin eri asioita. 920 00:44:36,700 --> 00:44:38,250 Joten kehotan teitä pelata sitä. 921 00:44:38,250 --> 00:44:39,440 Se on tavallaan hauska tehdä. 922 00:44:39,440 --> 00:44:43,230 >> TOMAS REIMERS: Katse yli alkuun uudelleen, se on hyvin samankaltainen Font 923 00:44:43,230 --> 00:44:44,970 Mahtava sivusto. 924 00:44:44,970 --> 00:44:47,810 Monet asiakirjoista alkaa tuntua samanlainen kun olet 925 00:44:47,810 --> 00:44:48,940 nähnyt tarpeeksi. 926 00:44:48,940 --> 00:44:51,260 Joten tässä meillä on CSS osa tätä. 927 00:44:51,260 --> 00:44:53,540 Ja näet miten se voi muotoilla asioita. 928 00:44:53,540 --> 00:44:56,780 Joten jos klikkaat taulukoita, esimerkiksi voit heti tehdä 929 00:44:56,780 --> 00:45:01,710 taulukko melko yksinkertaisesti lisäämällä luokan pöytä siihen. 930 00:45:01,710 --> 00:45:03,150 >> Samoja asioita painikkeita. 931 00:45:03,150 --> 00:45:12,140 Jos vain lisätä luokan BTN ja BTN oletus tai BTN ensisijainen, voit 932 00:45:12,140 --> 00:45:16,240 saada jokin näistä painikkeista Näiden valmiista tyylejä. 933 00:45:16,240 --> 00:45:18,570 Ja sitten, jos etsit jotain monimutkaisempaa kuin pelkkä 934 00:45:18,570 --> 00:45:24,100 restyling mitä w jo, päälleni JavaScript-välilehden yläosassa me 935 00:45:24,100 --> 00:45:25,120 on joukko komponentteja. 936 00:45:25,120 --> 00:45:30,410 >> Joten tässä meillä on siirtymiä, modals, dropdowns, välilehdet ja vihjetekstien. 937 00:45:30,410 --> 00:45:35,530 Tooltip on mitä ponnahtaa alla hiiren kun viet jotain. 938 00:45:35,530 --> 00:45:40,280 Popovers, hälytykset, painikkeet, kokoontaitettava hanurit on mitä 939 00:45:40,280 --> 00:45:41,190 he yleensä kutsutaan. 940 00:45:41,190 --> 00:45:43,045 Karusellit, joka flip kautta, kuten kuvia. 941 00:45:43,045 --> 00:45:52,190 942 00:45:52,190 --> 00:45:54,840 >> Joten ne ovat komponentteja Saapasraksi. 943 00:45:54,840 --> 00:45:57,620 Haluaisin rohkaista teitä erittäin mennä katsomaan niitä. 944 00:45:57,620 --> 00:46:01,780 Siellä on JavaScript komponentti ja CSS komponentti. 945 00:46:01,780 --> 00:46:03,880 Voit vapaasti käyttää niitä kuten haluat. 946 00:46:03,880 --> 00:46:06,730 Emme aio mennä liian paljon niihin koska mielestämme asiakirjat 947 00:46:06,730 --> 00:46:09,360 on todella hyvin tehty. 948 00:46:09,360 --> 00:46:10,540 Ja joo. 949 00:46:10,540 --> 00:46:14,500 Onko sinulla kysyttävää siitä? 950 00:46:14,500 --> 00:46:19,430 >> MIKE RIZZO: Niin ovat todella nopeita puolella, suunnittelu tämän sivun, joka 951 00:46:19,430 --> 00:46:21,830 me nopeasti koonneet tämä esitys on 952 00:46:21,830 --> 00:46:24,290 todellisuudessa tehdään käyttäen Saapasraksi. 953 00:46:24,290 --> 00:46:27,810 Kuten näette, kun klikkaa näitä eri välilehtiä, emme koskaan oikeastaan 954 00:46:27,810 --> 00:46:30,750 jättäen tämän nykyisen index.html sivu. 955 00:46:30,750 --> 00:46:36,400 Eli meillä on erilainen divs tämän index.html. 956 00:46:36,400 --> 00:46:39,610 Ja sitten, kun me sitten eri välilehti, se on vain muuttamalla 957 00:46:39,610 --> 00:46:41,590 kumman näyttää. 958 00:46:41,590 --> 00:46:47,390 >> Joten se vastaavasti paikoittaa niitä, muuttaa HTML-sivun, jotta 959 00:46:47,390 --> 00:46:52,330 nykyinen välilehti aktiiviseksi merkitty niin se näyttää eri tavalla ja ulkonäkö 960 00:46:52,330 --> 00:46:52,820 todella mukavaa. 961 00:46:52,820 --> 00:46:57,260 >> TOMAS REIMERS: Niin, että kaikki tehtiin ilman meitä kirjallisesti lähes CSS. 962 00:46:57,260 --> 00:47:01,440 Näemme myös otsikon yläosassa, jotka värit ovat meille. 963 00:47:01,440 --> 00:47:04,800 Mutta todellinen laitat sen sivun yläreunaan ja tekee 964 00:47:04,800 --> 00:47:06,660 se scroll oli Bootstrap. 965 00:47:06,660 --> 00:47:09,720 Ja sitten vielä toisen kirjasto - tämä ei ole yksi puhuimme mutta yksi 966 00:47:09,720 --> 00:47:11,580 voit googlettaa jos haluat. 967 00:47:11,580 --> 00:47:15,130 Tätä kutsutaan prettify.js. 968 00:47:15,130 --> 00:47:20,650 Ja se syntaksinkorostus koodin teille sekä CSS-ja JavaScript. 969 00:47:20,650 --> 00:47:23,480 970 00:47:23,480 --> 00:47:27,070 >> Emme todellakaan halua puhua ennen me vapautamme sinut ulos 971 00:47:27,070 --> 00:47:30,620 maailman tarkastella kirjastojen selvittää miten niitä käytetään ja toivottavasti 972 00:47:30,620 --> 00:47:34,640 Lue dokumentaatio ja löytää mitä tarve on, miten löytää kirjastoja. 973 00:47:34,640 --> 00:47:37,000 Joten ensimmäinen on me vain menossa työntää Google. 974 00:47:37,000 --> 00:47:37,810 Mene Google. 975 00:47:37,810 --> 00:47:41,150 >> Se on kirjaimellisesti mitä me teemme, kun me täytyy tehdä jotain, on meidän Google. 976 00:47:41,150 --> 00:47:44,730 Onko JavaScript-kirjasto, joka antaa minulle mahdollisuuden manipuloida aikaa 977 00:47:44,730 --> 00:47:45,400 hyödyllinen tapa? 978 00:47:45,400 --> 00:47:49,510 Joten jos tiedän, että joku käyttäjä luo tilin täällä, ja tämä on 979 00:47:49,510 --> 00:47:53,010 kellonajan, miten voin laskea Ero että ilman 980 00:47:53,010 --> 00:47:55,020 laskea sen itse? 981 00:47:55,020 --> 00:47:59,630 Joten tämä on todella yhteinen asia, JavaScript aikaa kirjastossa. 982 00:47:59,630 --> 00:48:02,440 Ja tässä me Moment.js-- suosituin. 983 00:48:02,440 --> 00:48:06,530 >> Jos tarvitsemme kirjasto manipuloida jotain väri pystyä 984 00:48:06,530 --> 00:48:08,650 tuottaa joukko satunnaisia ​​värejä - 985 00:48:08,650 --> 00:48:10,660 mahdollisesti tuottaa tyyliä tai jotain - 986 00:48:10,660 --> 00:48:13,480 voisimme googlettaa jotain JavaScript värikirjastosta. 987 00:48:13,480 --> 00:48:15,620 Ja olen varma, että meillä olisi pop up kanssa tuhat ja yksi niistä. 988 00:48:15,620 --> 00:48:18,290 989 00:48:18,290 --> 00:48:21,410 Olet tervetullut lukemaan niiden kautta. 990 00:48:21,410 --> 00:48:24,610 >> Joten useimmat asiat - kun löytää ne - menossa isännöi yksi 991 00:48:24,610 --> 00:48:25,920 sivustoja, jotka isäntä koodi. 992 00:48:25,920 --> 00:48:26,960 He ovat muutamia suosituimmista lajeista. 993 00:48:26,960 --> 00:48:30,870 Suosituimpia, jonka pitkälle, on github.com. 994 00:48:30,870 --> 00:48:35,300 Ja jos menet GitHub se on todella jossa Normalize juonsi. 995 00:48:35,300 --> 00:48:36,950 Joten jos haluat mennä takaisin, että yksi. 996 00:48:36,950 --> 00:48:38,135 Näytä heille, että. 997 00:48:38,135 --> 00:48:40,516 >> MIKE RIZZO: Ja oikeastaan ​​missä tämä on isännöi myös, jos olet huomannut. 998 00:48:40,516 --> 00:48:41,000 >> TOMAS REIMERS: Joo. 999 00:48:41,000 --> 00:48:49,078 Joten jos ylität normalisoida ja mene GitHub. 1000 00:48:49,078 --> 00:48:51,936 Olivat se on? 1001 00:48:51,936 --> 00:48:54,620 >> MIKE RIZZO: Tuo pieni kissa juttu on GitHub symboli. 1002 00:48:54,620 --> 00:48:56,330 >> TOMAS REIMERS: Oh. 1003 00:48:56,330 --> 00:49:02,180 Joten GitHub käyttää menetelmää, jota kutsutaan Git tallentaa koodia. 1004 00:49:02,180 --> 00:49:05,150 Ei et tiedä mitä se on tai se pelottaa sinua, se käy hyvin. 1005 00:49:05,150 --> 00:49:16,100 Sinun ei tarvitse tietää, mitä Git on koska GitHub on Lataa-painike 1006 00:49:16,100 --> 00:49:17,200 oikeassa alareunassa. 1007 00:49:17,200 --> 00:49:21,350 >> Muita hyödyllisiä asia tietää noin GitHub on useimpien tuotteiden 1008 00:49:21,350 --> 00:49:23,200 on luki minulle. 1009 00:49:23,200 --> 00:49:25,400 Ja jos heillä ei ole verkkosivuilla, luki minulle kertovat, miten 1010 00:49:25,400 --> 00:49:28,310 asenna se, miten käytät sitä, mitä se tekee, jne., jne., jne.. 1011 00:49:28,310 --> 00:49:31,033 Mitä olemme pohjimmiltaan käydään läpi. 1012 00:49:31,033 --> 00:49:32,326 >> MIKE RIZZO: Internetin lopetus. 1013 00:49:32,326 --> 00:49:34,020 >> TOMAS REIMERS: Tuo on hieno. 1014 00:49:34,020 --> 00:49:36,980 Viimeksi kaksi asiaa halusimme puhua - 1015 00:49:36,980 --> 00:49:38,750 olemme puhuneet Git - 1016 00:49:38,750 --> 00:49:40,290 on vianmääritys. 1017 00:49:40,290 --> 00:49:43,020 Ja tämä ei ole niin merkitystä lopullinen tuote, koska se on 1018 00:49:43,020 --> 00:49:44,870 kun lähdet 50. 1019 00:49:44,870 --> 00:49:48,310 Ja kun olet joutunut tuotteet täytäntöönpanosta kirjastojen tai täytäntöönpanoa 1020 00:49:48,310 --> 00:49:50,230 oma projektisi, olet menossa on kysyttävää tai olet 1021 00:49:50,230 --> 00:49:51,660 menossa etsimään kysymyksiin. 1022 00:49:51,660 --> 00:49:53,060 >> Jälleen googlettaa. 1023 00:49:53,060 --> 00:49:54,630 Se on kirjaimellisesti mitä teemme. 1024 00:49:54,630 --> 00:49:56,400 Tämä tulee kuulostaa typerältä. 1025 00:49:56,400 --> 00:49:58,310 Mutta kirjaimellisesti, me googlettaa. 1026 00:49:58,310 --> 00:50:01,810 Ja vielä, yksi ensimmäisistä asioista sinun yleensä törmätä on 1027 00:50:01,810 --> 00:50:06,550 stackoverflow.com, joka on ihana Kysymys ja vastaus näky. 1028 00:50:06,550 --> 00:50:10,530 >> On hienoa molemmat, koska voit lähettää kysymyksiä ja etsiä 1029 00:50:10,530 --> 00:50:12,760 vastauksia, mutta myös siksi, se on jo paljon 1030 00:50:12,760 --> 00:50:14,590 esitäytettyä sisältöä siellä. 1031 00:50:14,590 --> 00:50:18,510 Joten yleensä kun googlettaa ohjelma kysymyksestä ensin 1032 00:50:18,510 --> 00:50:22,620 pari osuu olet ehkä jo suorittanut siihen aikana ongelma sarjaa. 1033 00:50:22,620 --> 00:50:27,840 >> Ja sitten, viimeinen todella lyhyt asia on JSFIDDLE, joka on - tänään olemme 1034 00:50:27,840 --> 00:50:32,110 tehneet paljon työtä JavaScript HTML CSS. 1035 00:50:32,110 --> 00:50:39,820 JSFIDDLE on web app, joka pohjimmiltaan voit ottaa HTML, YOUR 1036 00:50:39,820 --> 00:50:42,820 JavaScript alavasenta ja CSS oikeassa yläkulmassa. 1037 00:50:42,820 --> 00:50:47,840 Ja sitten se voi luoda nopeasti tehdä IT ja nähdä miten se vaikuttaa. 1038 00:50:47,840 --> 00:50:50,500 Se on erittäin hyödyllinen, kun ihmiset yrittävät tehdä proof of concept kuten 1039 00:50:50,500 --> 00:50:52,910 Tässä on, miten voit tehdä pudotusvalikosta. 1040 00:50:52,910 --> 00:50:54,980 Ehkä nopea paljastaa tai mitä tahansa. 1041 00:50:54,980 --> 00:50:56,560 >> MIKE RIZZO: Joten mennään eteenpäin ja napsauta tätä. 1042 00:50:56,560 --> 00:50:57,820 Nopea huomautus - 1043 00:50:57,820 --> 00:51:00,430 ottaa huomioon, ennen kuin olimme tekemässä napsautuksella. 1044 00:51:00,430 --> 00:51:04,380 Osoittautuu JCorey Korea on myös sisäänrakennettu napsautusliikenteessä tapahtumakäsittelyyn se 1045 00:51:04,380 --> 00:51:07,020 käyttää vain koska se luvut olet menossa haluavat tehdä paljon asioita 1046 00:51:07,020 --> 00:51:08,410 kun haluat osoittaa jotain. 1047 00:51:08,410 --> 00:51:09,690 >> Samoin, se on myös leijuvat. 1048 00:51:09,690 --> 00:51:12,850 Vaan saada koko laajuudessaan niitä, katso jQuery 1049 00:51:12,850 --> 00:51:15,320 asiakirjat ja tehdä se. 1050 00:51:15,320 --> 00:51:18,760 Tein jotain tyhmää täällä. 1051 00:51:18,760 --> 00:51:21,490 >> TOMAS REIMERS: Olen siis todella nopea Ohjelman täällä, joka kertoo 1052 00:51:21,490 --> 00:51:22,640 painiketta napsautuksella. 1053 00:51:22,640 --> 00:51:23,890 Sitten meillä on silmukka. 1054 00:51:23,890 --> 00:51:26,810 I on pienempi kuin 404. 1055 00:51:26,810 --> 00:51:29,530 Se on vain olemaan pop up Näiden hälytys viestejä. 1056 00:51:29,530 --> 00:51:33,425 >> MIKE RIZZO: Ja mikä oli koodi 404 seisoi HTML? 1057 00:51:33,425 --> 00:51:34,145 Muistaako kukaan? 1058 00:51:34,145 --> 00:51:35,450 Ei löydy, oikea. 1059 00:51:35,450 --> 00:51:38,640 1060 00:51:38,640 --> 00:51:40,885 Chrome lisäsi tämän siisti asia, jossa voit - 1061 00:51:40,885 --> 00:51:43,430 >> TOMAS REIMERS: Koska ihmiset haluavat Mike alkoi tehdä tätä paljon ja 1062 00:51:43,430 --> 00:51:47,230 harmittaa käyttäjiä, joka mahdollistaa voit nähdä tiedot. 1063 00:51:47,230 --> 00:51:48,286 >> MIKE RIZZO: Joo. 1064 00:51:48,286 --> 00:51:50,690 >> TOMAS REIMERS: Onko meillä kysyttävää tästä noin JavaScript 1065 00:51:50,690 --> 00:51:53,420 kirjastot, löytää kirjastot, tai mitä web-kehitys näyttää 1066 00:51:53,420 --> 00:51:55,400 kuten oikeassakin maailmassa? 1067 00:51:55,400 --> 00:51:56,880 Olemme juosten aikaa vastaan. 1068 00:51:56,880 --> 00:52:00,400 Joten en ole varma, aiomme on aika toteuttaa 1069 00:52:00,400 --> 00:52:02,290 ellei se on todella nopea. 1070 00:52:02,290 --> 00:52:04,580 Olemmeko hyvä? 1071 00:52:04,580 --> 00:52:08,110 >> MIKE RIZZO: Mitä te haluaisi nähdä todella nopeita, kuten kaksi 1072 00:52:08,110 --> 00:52:09,556 minuuttia tai vähemmän? 1073 00:52:09,556 --> 00:52:10,870 >> TOMAS REIMERS: Anything voimme selventää? 1074 00:52:10,870 --> 00:52:12,500 Miten kirjoittaa - 1075 00:52:12,500 --> 00:52:13,260 >> Yleisö: [kuultavissa]? 1076 00:52:13,260 --> 00:52:16,070 >> MIKE RIZZO: Kyllä, niin that - 1077 00:52:16,070 --> 00:52:18,065 >> TOMAS REIMERS: Voit painaa Ohjaus-U verkkosivuilla. 1078 00:52:18,065 --> 00:52:19,275 >> MIKE RIZZO: Ai, en tiennyt, että. 1079 00:52:19,275 --> 00:52:22,290 >> TOMAS REIMERS: Luulen, joo. 1080 00:52:22,290 --> 00:52:23,300 Ohjaus-U. Joo. 1081 00:52:23,300 --> 00:52:25,970 >> MIKE RIZZO: Ai, niin se on koodi verkkosivuilla. 1082 00:52:25,970 --> 00:52:29,580 Mutta jos todella haluat ladata tiedostoja ja kaikkea, se on isännöi 1083 00:52:29,580 --> 00:52:32,650 on github.com 1084 00:52:32,650 --> 00:52:34,850 >> TOMAS REIMERS: slash nimeni - 1085 00:52:34,850 --> 00:52:38,504 Tomas Reimers - slash CS50 väliviivaa seminaari. 1086 00:52:38,504 --> 00:52:40,710 >> MIKE RIZZO: Ja voit löydät kaiken siellä. 1087 00:52:40,710 --> 00:52:42,310 >> TOMAS REIMERS: Tämä on mitä GitHub näyttää muuten. 1088 00:52:42,310 --> 00:52:44,910 Joten jälleen, kun näet avoimen lähdekoodin projekti, tyypillisesti, he lukea 1089 00:52:44,910 --> 00:52:45,950 minua siellä, että voit lukea. 1090 00:52:45,950 --> 00:52:50,200 Ja jos palaat, huomaat, että sinulla on ladata zip, joka 1091 00:52:50,200 --> 00:52:52,130 voit ladata lähde koodi sisällyttää 1092 00:52:52,130 --> 00:52:53,666 tuotteen omia juttuja. 1093 00:52:53,666 --> 00:52:56,890 >> MIKE RIZZO: Joo, ja jos me klikkaa on index.html todella nopeasti - 1094 00:52:56,890 --> 00:52:59,180 >> TOMAS REIMERS: Näet tässä lähdekoodia sivuillamme. 1095 00:52:59,180 --> 00:53:02,016 1096 00:53:02,016 --> 00:53:06,070 >> MIKE RIZZO: Myös unohdin työntää oikealle ennen kanssa iso pöytä se 1097 00:53:06,070 --> 00:53:09,860 mukana, mutta siellä on myös taulukko of chmods että olemme mukana 1098 00:53:09,860 --> 00:53:13,210 juuri sinun selkeyttä. 1099 00:53:13,210 --> 00:53:16,940 Mutta jos me selaa kaikki alas pohja, emme itse tehdä 1100 00:53:16,940 --> 00:53:21,160 paljoakaan JavaScript juttuja ollenkaan tämän kanssa. 1101 00:53:21,160 --> 00:53:26,610 Se on yksinomaan kaiken muuta, joka meillä oli. 1102 00:53:26,610 --> 00:53:28,730 >> Joten kiitos kaverit tulossa ja kuuntelee. 1103 00:53:28,730 --> 00:53:29,830 Toivomme, että tämä oli todella hyödyllinen. 1104 00:53:29,830 --> 00:53:33,020 Jos sinulla on JavaScript liittyvien kysymyksiä tai vain halua puhua 1105 00:53:33,020 --> 00:53:36,240 mitä muuta kuin mitä muita hienoja asioita voit tehdä JavaScript, haluaisimme 1106 00:53:36,240 --> 00:53:37,186 jutella. 1107 00:53:37,186 --> 00:53:40,010 >> TOMAS REIMERS: Jos sinulla on kysymys noin projektisi tai jos tämä voi olla 1108 00:53:40,010 --> 00:53:42,740 asiaa, me luultavasti jäämään hieman tämän jälkeen. 1109 00:53:42,740 --> 00:53:44,640 Mutta muuten, on hyvä viikonloppu. 1110 00:53:44,640 --> 00:53:45,845 >> MIKE RIZZO: Joo, nauti. 1111 00:53:45,845 --> 00:53:46,120 Nähdään. 1112 00:53:46,120 --> 00:53:47,370 >> TOMAS REIMERS: Nähdään. 1113 00:53:47,370 --> 00:53:47,926