TOMAS Reimers: Hi, visiem. Mans vārds ir Tomas Reimers. 

MIKE RIZZO: Un es esmu Mike Rizzo. 

TOMAS Reimers: Mēs esam divi CS50s TS. Un šodien mēs esam vadošā semināru JavaScript un CSS web progr. Ja vēlaties sekot līdzi, saite ir labi tur. Un jūs vēlaties, lai to uz augšu uz datora īsi? 

Tur ir saite. Tā ir maza vieta, kas ir saites uz visi resursi, mēs ejam, lai būtu norādot jums šodien, un ir arī daudz noderīgu informāciju raksta mums lasīt vairāk padziļināti, kad jūs iet atpakaļ, un jūs mēģināt atcerēties, ko tad īsti mēs sakām, ko Jūs bijāt runājam, un tā tālāk. 

MIKE RIZZO: Nu labi. Tāpēc sāksim. 

TOMAS Reimers: Tātad jūs vēlaties, lai sāktu? OK. 

MIKE RIZZO: Jā. Lai mēs vispirms gribēju sākt ar plaša pārskats par internetu un failu tipus, veidojot mājas lapas. Kaut arī šī prezentācija mēs vēlamies nokļūt uz JavaScript daudz daudz vēlāk, mēs vēlējāmies, lai sāktu ar tikai, veida, piemēram, putna lidojuma Par to, kas mājas lapā ir un cik domāt par projektēšana mājas lapu sākuma. 

Tātad jūs guys, šajā brīdī - ar to ir piektdienas vakarā - vajadzētu būt iesniedzis CS50 finanses problēma komplekti. Cerams, ka bija laba gaume par to, ko interneta programmu var būt. Bet šeit mēs gribam, veida, sniedz tu citu garšu, kā arī. 

TOMAS Reimers: Tik vienkārši Atgādinājums ko notiek, ja jūs tipa jūsu URL, lai Jūsu interneta pārlūks, kas URL izpaužas pacēla datorā. Un dators ir pieslēgts uz citu datoru, kas rīko šo tīmekļa vietni. Labi, tad, kad jūs apmeklējat google.com, jūs saistīts ar vienu no Google datoriem, kas ir failus google.com. 

Tad tas prasa noteiktu failu. Tātad, ja jūs iet - Es nezinu - example.com / index.html vai / test.html, jūs gatavojas lūgt ka īpašu datni. Un tīmekļa servera iet atgriezties to jums. 

Tad, kad jūs iet caur šo failu - kad jūs esat dators kļūst, ka failu - tas notiek, lai sāktu lai izveidotu mājas lapu. Tāpēc tagad tas ir HTML failu, kas ir veida, piemēram, struktūru mājas lapā. HTML failu var arī atsauce CSS failus, kas definē stils mājas lapā. 

JavaScript failus, kas definē mijiedarbība ar mājas lapā. Attēlu failus, kas ir tikai attēlus. Un, iespējams, saistīt ar citiem HTML failus, kas tad jūs varat apmeklēt. 

MIKE RIZZO: Labi, lieliski. Tātad jums puiši ir visiem, varbūt, rūpīgi izveidot savu vietējās uzņēmējas par savu virtuālo mašīnu. Un ka tikai, veida, ir vietējās domēna, ka jūsu dators uzņem tikai jums uz savu IP adresi. 

Tāpēc, ka pašlaik, tad jūs varat pievienot uz to savas tīmekļa lapas. Es domāju, kas CS50 Finance, jums ir jābūt pievienoti daži HTML lapas, kas ir, veida, ietin PHP iesaiņojuma. Bet galu galā, kādi jūsu PHP lapas Tika outputting bija HTML. 

Bet domāšana atpakaļ uz paša sākuma no PSET, mums bija, lai uzstādītu atļaujas par visu, labi? Tāpēc tas tikai būtībā ļauj mums zināt kas var lasīt, rakstīt, un, iespējams, izpildīt katru no failiem. Tāpēc mēs esam gatavojas darīt ātri - HM? 

TOMAS Reimers: Tātad, mēs ejam to darīt ātri demo. Tik vienkārši, lai atgādinātu jums, kad jūs savienojumu ar Google datoram - kurš - un lūgt failu, dators vispirms nepieciešams, lai pārliecinātos, ka jūs esat pilnvarots faktiski apskatītu šo failu vai lasīt, ka failu, jo jūs varat ne tikai uzdot jebkuru failu uz šī datora, vai ne? Tas būtu drošības apdraudējumu. 

Tātad failus uz sistēmu mēs izmantojam, piemēram, Tas CS50 ierīces, ir trīs vispārējie cilvēki, kas var būt atļaujas kaut ko. Pirmais ir faktiskais īpašnieks minētajā dokumentācijā. Otrais ir grupa, kas fails pieder. Mēs nebrauksim, lai koncentrētos pārāk daudz par to. Un pēdējā lieta ir, sava veida, piemēram, pasaules vai tāpat kā visi pārējie, kurš ir nav raksturīgi šai lietai un nav nav nekādas īpašuma tiesības uz to. 

Tātad, ja mums ir īpašnieks, grupas, un tad pasaule. Un tad, katrai no šīm grupām, jūs var būt viens no trim atļaujām, Labi vai vairākas no tām. Jums var būt lasīt atļaujas. Jums var būt tiesības atļaujas. Un jūs varat būt izpildīt atļaujas. 

Tātad attiecībā uz faktisko failu tipiem, lasīt atļauja ir kā faktiski lasījums saturs failu. Tiesības atļauja ir rakstiski uz minēto failu. Izpildīt atļauja darbojas failu, kā jūs darīt, ja jūs darbināt kādu no Jūsu CS50 projektiem. 

Tad, kad mēs esam domājot par failiem piemēram, kad mums ir nepieciešams, lai izlasītu HTML fails, kas ir nepieciešams, lai būtu pasaules lasāma, vai ne? Jādomā, arī īpašnieks vēlas lai varētu rediģēt šo failu. Tā īpašnieks dodas uz nepieciešamību lasīt un rakstīt atļaujas. Tie nav īsti nepieciešams izpildīt. 

Grupa, mēs ejam, lai ārstētu pats kā pasaulē tagad. Tāpēc tie ir lasīšanas atļaujas. Bet tie nav nepieciešams rakstīt vai izpildīt atļaujas. Un tagad, ja mēs domājam atpakaļ uz bijušo PSETs, ko mēs saprotam ir šie veida un izskatās bināro, vai ne? 1 nozīmē jā. 0 ne. Un mēs faktiski var tulkot to bināro. 

Tātad 110 binārā būtu 6. 100 varētu būt 4. Tas pats ar pasauli. Tātad numuru jūs varētu saņemt par atļaujas tas būtu 644. 

MIKE RIZZO: Un, ja jūs domājat, ka atpakaļ uz kad jūs chmoded kaut ko, es uzskatu, ka viņi padevās problēmu noteikts piemērs, kur jūs varētu darīt kaut kas līdzīgs chmod 644 un tad faila nosaukumu. 644, tad jūs tagad var redzēt tieši ja tas nāk no. Tāpēc cerams, ka padara šo nedaudz vairāk skaidrs. 

Un tad jūs puisis skaidrību - Ak jā, šeit tas ir atkal. Tātad 600 tad būtu vienkārši piemērs mēs pametusi šeit, ja īpašniekam ir lasīt un vajadzīgās atļaujas, lai gan grupa un pasaulē nav nekādu atļauju piekļūt lietas materiāliem. 

TOMAS Reimers: Un tad mums ir ātri sarakstu ar kopīgiem atļaujas. Tātad katalogi, jūs vēlaties faktiski chmod 711. Quick malā - uz direktoriju, lai būtu izpildāmo atļauja ir jāspēj , lai atvērtu direktoriju. Attēlus, CSS, JavaScript, HTML vajadzībām 644, jo, galvenokārt, pasaulei vajadzību lasīt atļaujas. 

Un PHP, kas jums puiši ir redzējuši kaut gan mēs ne runāt par to stingri parasti chmoded ar atļauja 600 jo tas darbojas ar atļaujas īpašnieka. Vismaz uz ierīces. 

MIKE RIZZO: Tātad, ja jums nav īpaši jānorāda, kāda veida fails vēlaties faktiski nosakot up šo prezentāciju - mums bija problēmas ar to, jo viss nebija chmoded pareizi - jūs gatavojas saņemt, veida,, Aizliegts kļūda, ka mājas lapa tas tiešām nav atļaujas piekļūt neatkarīgi no failu Jūs vēlaties, lai piekļūtu. Un protams, ka var tikt fiksēta - kā problēmu noteikts - mainot atļaujas pienācīgi. 

TOMAS Reimers: Un pēdējais komentārs ātri vietējā attīstība ir - mēs cēla šo augšu, bet mēs vienkārši vēlējāmies lai to atkal - ja jūs lūgt servera - tā vietējā uzņēmēja, piemēram, com vai neatkarīgi. - un jums nav norādīt konkrētu failu, failu, ka jūsu dators ir iet lūgt sauc index.html. Vai, ja tas nav, index.php. 

Atdzist. Tātad tas ir tikai Atgādinājums viss, cerams, ka mēs esam uz in sadaļā, un lekcija, un līdz šim CS50. Un tagad mēs esam gatavojas sākt runāt par īpaši bibliotēkām. JavaScript un CSS bibliotēkas web progr. 

Tāpēc viens ātrs iemesls, kāpēc mēs esam bibliotēkas ir programmēšana - tur ir daudz problēmu programmēšana, kurā glabāt popping up atkal, un atkal, un atkal. Jūs ievērosiet, ka daudzi tīmekļa vietnes nepieciešams spēju būt nolaižamo lnes, piemēram, vai ir nepieciešams spēju ir ļoti standarta pogu style, kas var būt Vieglākais lieta. Tagad, kad jūs sākat, lai iegūtu HTML, jūs saprotu, ka pogas var faktiski izskatās tiešām neglīts, ja jums nedara neko. 

Tik daudzi cilvēki ir uzrakstījuši sauc bibliotēkas. Un šajā sakarā, viņi sauc arī par sistēmas. Mēs ejam, lai izmantotu divi pārmaiņus. Un ko viņi ir, viņi būtībā premade gabalu kodu - nu CSS vai JavaScript - kas atņemt daudz komanda jums ir kodēšanas. 

Tāpēc viņi iepriekš noteikt ķekars klasēm vai iepriekš noteikt ķekars funkcijas attiecībā uz JavaScript ir gadījums, kas Jūs varat piezvanīt vēlāk. Un tad jūs varat, veida, saņemt piekļuve šai kodu bez kam kaut ko darīt. Piemērs bibliotēkas bija CS50.H. Tas bija bibliotēka, mēs deva jums atpakaļ nedēļā vienā, kas ļauj jums darīt lietas, piemēram, ka GetInt un GetString bez uzrakstīt Jebkāda sevi. 

MIKE RIZZO: Nu labi. Tātad šeit, tāpat kā mums bija, lai iekļautu mūsu c failus dažādās bibliotēkas, mēs arī vajadzētu iekļaut Mūsu HTML failus dažādas bibliotēkas. Piemēram, ja mēs vēlējāmies, lai iekļautu īpaša JavaScript bibliotēka šeit iespējams, viens, ka mēs esam rakstīts sevi, jo tas ir lokāli uzņēma sauc script.js, mēs tikai izmantot šo apzīmējumu. 

Tāpēc mums ir skripts tipa vienāds JavaScript avota vienāds JavaScript.js. Un, ja jūs domājat, ka atpakaļ uz savu CS50 finanšu problēma noteikt, ja jūs izskatījās header.php veidnes,, Jums vajadzēja redzēt daži no tiem iekļauti. Tāpēc šis pirmais - skripti - ir tostarp JavaScript bibliotēkas. Tostarp CSS bibliotēka ir mazliet atšķirīgs. 

Lūk, nevis skriptu tag jums ir nepieciešams saite tag. Un tad, teksta CSS veids ir nedaudz atšķirīgs. Jūs ne vienmēr ir jāiekļauj rel stila lapas. Bet es domāju, tas ir, vispār, laba prakse. 

Un tad beidzot, HREF, kuru jūs iespējams, redzēja jūsu ATAGs saistot dažādos saites tikai precizēts saite par to, kur atrast to. Piemēram, ja mēs vēlējāmies, lai savienotu dažādi bibliotēkas - pieņemsim tikai teikt - kas dzīvoja styles.css. Un mēs vēlējāmies, lai savienotu, ka tas ir hosted tīmeklī, mēs varētu kopēt to. Un pēc tam ielīmējiet to savos neatkarīgi mēs esam šeit vietā. 

TOMAS Reimers: OK, cerams, jūs puiši jau ir pazīstami ar to, kā sasaistīt CSS. Jums bija darīt, ka Jūsu pēdējā brūna komplektu. JavaScript, daži no jums varbūt ir zināma pieredze ar. Daži no jums var nebūt. 

Tāpēc tagad zinu, ka JavaScript fails ir ļoti daudz, piemēram, CSS failu sajūta, ka jūs varat saiti uz to, vai ka jūs varat iekļaut to iekšēji. Un tas ļauj jums skriptu lietām. Un mēs ejam staigāt jūs ar Mazliet JavaScript vēlāk. 

Tātad, izmantojot bibliotēku - pēc tam, kad esat iekļauts, tas ir tik vienkārši, kā burtiski zvanot funkcijas vai pievienojot klases nosaukumu uz to. Pēdējā lieta, ko mēs vēlamies runāt par izteiksmē bibliotēkas - un tas ir vairāk tehnisko piezīmi - ir atvērtā koda licencēšanas. Tātad, ja jums atrast šo faktisko bibliotēkas, Jums var domāt par jautājumiem, piemēram, tas ir OK, ka es esmu tikai izmantojot kādu citu kodu, it īpaši tāpēc, ka tas ir kaut kas mums ir ļoti daudz teicis jums nav darīt šajā kursā. 

Tātad, ja atvērtā koda licencēšanas, daudz izstrādātājiem - pēc tam, kad tie esam uzrakstījis bibliotēka, kas viņuprāt varētu būt noderīgi citiem cilvēkiem - publicē to internetā un piešķir tai licenci. Un licence būtībā saka, ka es esmu ar šo Piešķirot atļauju otrai cilvēkiem izmantot šo gabals programmatūru ar šādu veida pieņēmumiem. 

Mēs esam iekļāvuši saiti uz labu vietu, lai palīdzēs jums saprast licences, Gadījumā, ja jūs satikt tiem. Kopīgas saistības ir lietas, piemēram, Jūs esat laipni aicināti izmantot savu bibliotēku, lai Kamēr jūs varētu man kredītu. Jūs esat laipni aicināti izmantot savu bibliotēku tik ilgi, ja tas saplīst Jums nav vainot mani. Jūs esat laipni aicināti izmantot savu bibliotēku tik ilgi kā jums nav to izmantot, lai pelnītu naudu par sevi. Tie ir veida kopīgas pieņēmumiem. 

Šim CS50 galīgo projektu, viņi nevajadzētu būt super būtiska, jo projekti, kas jūs puiši izmanto, ir varbūt drīzāk veida, kas pazīstams. Bet, kad jūs faktiski iet ārā pasaulē un sākt izmantot bibliotēku, kas var būt vai var nebūt, kā arī īstenoti kā daži no vairāk populārs tiem mēs esam būs iet cauri. Tas ir labi, lai varētu saprast, šīs licences un to saprast, ko viņi domā. Un dodas atpakaļ. 

MIKE RIZZO: OK. Tāpēc tagad pārvietojas uz piemēriem Faktiskās CSS. Šajā brīdī tik tālu, jūs varētu nevar būt radušās šo. Bet jūs varētu būt radušās to jūsu ikdienas dzīvi, kur kaut kas kas izskatās vienā virzienā vienā pārlūkprogrammā varētu izskatīties vienādi veids, kādā citā pārlūkā. 

To sauc pārlūks saderība. Un arvien vairāk tas kļūst arvien vairāk un vairāk problēmu, jo īpaši pārlūkprogrammām ņem vairāk un vairāk brīvības lai īstenotu lietas, kā viņi vēlas. Tātad, lai pārvarētu, ka tur tiešām ir liela bibliotēka sauc Normalize.CSS. 

TOMAS Reimers: Mēs iekļauti saiti. Šajā brīdī, tas ir noderīgi, ja jums ir klēpjdators, kas tur meklē vietā. Un mēs dodam to jums tiesības Tagad vienkārši tāpēc CS50 galīgo Projekts ir faktiski gatavojas aicinu jūs, lai to īstenotu līdzīgi un caur pārlūkprogrammu. 

Tik vienkārši, lai saglabātu atpakaļ jūsu galva, tas ir brīnišķīgi bibliotēka tāpēc, ka tas būs, veida, standartizēt lietas. Firefox, kaut kas var parādīt kā vienu pikseli pa kreisi. Un tad Chrome var nolemt, ka faktiski ko tu domāji bija 10 pikseļi pa kreisi. Un jūs vēlaties, lai standartizētu šo. Normalizēt faktiski darīt ļoti labs darbs pārliecinoties, ka jūsu portāls izskatās vienādi uz visiem pārlūkiem. 

MIKE RIZZO: Tātad, ja mēs vēlējāmies, lai tikai noklikšķiniet uz saites tiešām ātri un parādīt jums, kas tas izskatās, jūs varat lejupielādēt to, izmantojot milzu Download pogu. Vai es aicinu jūs, lai uzzinātu vairāk par to noklikšķinot uz šīs saites, kas zemāks labajā stūrī. 

TOMAS Reimers: Un, ja jūs faktiski noklikšķiniet Lasīt vairāk tieši tur - noklikšķiniet avots par GitHub - jūs faktiski redzēt atvērtā koda licence par LICENSE.md turpat. Un jūs redzēsiet, šeit ir Ļoti populāri MIT licence. Atkal, ja jūs lasīt, izmantojot tekstu, Jūs varēsiet atrast uz vietas mēs atsauces pirms un varēs saprast bez lasīt ar juridisko žargonu. 

MIKE RIZZO: Labi, lieliski. Tātad tas ir Normalizēt. Mēs vēlējāmies, lai dotu jums kas tiešām ātri. Ak, jums ir jautājums? 

Mērķauditorija: Tātad, kad jūs to lejupielādēt, jūs vienkārši sekot šo kodu, ka viņi ir ar pogas Lejupielādēt? 

TOMAS Reimers: Jā, tā kad jūs lejupielādēt - 

MIKE RIZZO: Ak, tas ir liels punkts. Tātad jautājums ir, kā izdarīt mēs faktiski lejupielādēt to? Tātad, ja mēs noklikšķiniet uz saites, mēs redzam ka tā faktiski NOP augšu avota kodu. Tātad, lai to izdarītu, ko mēs varētu darīt, ir vienkārši noklikšķiniet uz Saglabāt kā. Saglabāt kā un kas būtu audzināt failu. Un tad mēs varam izvēlēties, lai saglabātu tā kā normalize.CSS. Un tad jūs ir saistīt to - 

TOMAS Reimers: Tāpat jūs saite jebkurā citā failā. Un, kad jūs saistīt to, kas ir liels par normalizē tas faktiski rūpēties par visu cieto strādāt ar sevi. Nozīmē, ka jums nav pievienot jebkuras klases. 

Jums nav kaut kas dīvaini to darīt. Tas normalizē bez tevis darīt kaut ko tālāk. Jā, jums ir iekļaut to. Google Chrome nereaģē. 

Tikai ātri malā - Es pamanīju, mēs ielēca šo. Šīs prezentācijas pārējais ir būs ātrs pārskats. Aptauja bibliotēkām. 

Būtībā, ko viņi ir. Ko viņi dara. Cik viņi ir noderīgi. Kā jūs varētu tos īstenot. Ja jūs vēlaties, lai sāktu meklē tos, pēc kopā, un iepazīšanās ar viņiem, es ļoti iesakām to. 

Alternatīvi, jūs esat laipni arī sākt lejupielādējot tos un iekļaujot tos redzi tikai, lai redzētu, ko viņi izskatās, vai to, ko viņi dara, ja jums ir jūsu klēpjdators priekšā no jums. Ja tā nav, jūs esat laipni aicināti saglabāt klausoties mums runāt. Mēs ejam, lai saglabātu runāt. Un mums ir laiks, beigās, cerams mēs faktiski nokļūt redzami ko daži no šiem bibliotēku izskatās. 

MIKE RIZZO: Cool. Labi, tāpēc tagad parunāsim par Fonts satriecošs. 

TOMAS Reimers: tā Fonts satriecošs ir tiešām veikls vietā, jo īpaši tiem, no mums, kas ir mazāk mākslinieciski talantīgs. Ignorējot vārdu fontu Awesome, tas dod jums ķekars ikonas, kas ir ļoti noderīga. Tik daudz reižu jūs īstenotu icon jūs varat, piemēram, jauku x tamlīdzīgi ka jūs varat aizvērt kaut ko. 

Vai jūs vēlaties kādu pogu Edit ar zīmuli, piemēram, visi pārējie ir. Un tas ir tad, kad jūs uzzināt, ka Izstrādājot šīs ikonas var būt ļoti garlaicīgs un grūti. Fonts Awesome - ja jūs tiešām dodieties uz vietni - sniedz jums daudz ikonas ar ikonas augšpusē. Jā, tikai top. Tas dos jums daudz ikonas par brīvu. 

Tātad, šeit jūs redzat, mums ir lietas, piemēram, zvaigznīte, bāri, zibens, kalendārs, bug, grāmatas, uc. Tas var būt ļoti noderīga. Kā jūs arī tas, vai tajā burtiski CSS failu. Un pēc tam, kad esat iekļauts CSS failu, ko jūs varat darīt, ir jums izveidot tag sauc I. Tā satands par ikonu ar klasi FA stāvot uz Fonts satriecošs. Un tad, neatkarīgi no klases vēlaties. 

Tātad, ja es gribēju ikonu šīs plus kvadrātveida tieši šeit, es dotu tas klases FA. Un tad FA defise plus defise square. 

MIKE RIZZO: Cool, OK. 

TOMAS Reimers: Un tad, pēdējais CSS bibliotēka mēs vēlamies, lai saņemtu ar mums cenšas, lai saglabātu to minimāla CSS bibliotēkas, jo mēs saprotam, nosaukumā šo prezentāciju ir JavaScript bibliotēkas. Bet mēs domājam, ka mēs varētu arī jūs iepazīstināt ar citām bibliotēkām kamēr mēs runājām par bibliotēkām. 

Tas ir Google Web fonti. Un ko Google Web fonti ļauj jums to darīt, ir pievienot fontus, lai jūsu mājas lapā, kas ir ļoti vienkāršs veids, lai padarītu to diezgan un atšķirt savu komplektu no visiem cits ir, ja tas ir jauku fontu, vai, ja tas ir jauki kolekcija fontus. Google Web fonti ir jauki atšķirībā no citiem bibliotēkas, kas nozīmē, ka tas ir tiešām vadīties uzstādīšana. 

Tātad, ja jums sekot saiti, tas ir google.com / fontus, es ticu. Ja jums sekot, ka jums var izvēlēties savu fontu. Jūs varat izvēlēties, pa kreisi no biezums, sašķiebt, un tā tālāk. Un tad, kad esat izvēlējies vienu, Jūs varat noklikšķināt ātri izmantot. Turpat. Apakšā pa labi no lodziņa. 

Un tad, ritiniet uz leju. Pirmkārt, viņi jums CSS ka Jums ir nepieciešams, lai faktiski saiti uz to. Tas ir labi tur. Jūs varat vienkārši kopēt un ielīmēt, ka iekšā Un jauka lieta par šo vienu, ir jūs faktiski nav pat nepieciešams, lai lejupielādēt failu. 

Kas tas ir gatavojas darīt, ir tas, kas notiek saistīt ar Google versiju. Tātad atpakaļ uz ko tas nozīmē. Tas nozīmē, ka tad, kad lietotājs lejupielādē failu - lejupielādē jūsu HTML lapas - jūsu HTML lapa gatavojas atsauci šo failu. 

Tātad, jūsu dators, kas notiek, lai redzētu, Ak, tas ir izvietots uz google.com, nevis nekā theirsite.com. Ļaujiet man iet uzdot Google šo failu. Un tad tas notiek, lai iekļautu gandrīz it kā tas būtu daļa no jūsu vietā. 

TOMAS Reimers: Cool. Un, kad jūs arī, ka pēc tam iekļaut to savā CSS, tas dod jums faktiskais līniju. Tātad, jūs noteikti īpašuma fontu saimi vienāds ar nosaukumu jūsu fontu. 

MIKE RIZZO: OK. Tāpēc mēs tikko pabeigts ar CSS. Un daži no jums varētu domāt, labi, mums bija dažas CSS uz CS50 Finance. Bet CSS bibliotēka bija sāknēšanas. Mēs faktiski ietver sāknēšanas nedaudz vēlāk saskaņā JavaScript jo ar Bootstrap CSS bibliotēka nāk arī ar daudz JavaScript minētā Sāknēšanas vai Twitter - kas par Bootstrap - izmanto, lai pārvaldītu visas savas CSS. 

TOMAS Reimers: Vai kāds ir kāda jautājumi līdz šim par CSS vispār? Mēs esam labi? Awesome. 

MIKE RIZZO: satriecošs. 

TOMAS Reimers: So pārvietojas uz JavaScript. 

MIKE RIZZO: Tātad, mēs vēlējāmies, lai runātu par jQuery, lai sāktu ar. Vai kāds dzirdējis par jQuery pirms vai to izmanto? Jā, pāris? Tātad, ja jūs vienkārši strādāt ar dzimto JavaScript, jūs atradīsiet sev ierakstot daudz garo pārslēdzējiem daudz. Tātad, ko jQuery tas ir tas sniedz jauka iesaiņojuma JavaScript valoda, kas ļauj jums viegli izvēlēties un manipulēt dažādus elementus ietvaros dokumenta objekta modeli mājas lapā vai DOM, kas, manuprāt, jums puiši ir dzirdējuši par in lekciju šajā brīdī. 

TOMAS Reimers: Ja neesat dzirdējuši par tas, vai, ja jums nav skatīties lekcija tomēr, dokumenta objekta modelis ir būtībā, kā lietas tiek pārstāvētas. Tāpēc HTML veida izskatās kā koks kad jūs faktiski izdarīt to ārā. Jums ir HTML elements virsū. Jums ir galvu un ķermeni. 

Un tad, ievērojot, ka jūs ir viss pārējais. , Kas ir minēta kā DOM - Dokuments Object Model. Tāpēc modelis, kas pārstāv objektu dokuments ir viegls veids, kā domāt par to. Un viens liels lieta par jQuery tas patiešām padara šķērso kas un manipulējot elementi ietvaros ka neticami vienkārši. 

Tik vienkārši, jo fakts, ka lielākā daļa JavaScript bibliotēkas vai ne vairākumu, grand vairākums ones jūs redzēsiet tiešām nepieciešama jQuery tā ka viņi var darboties paši vienkārši jo, ja jums nav jQuery, jums varētu atkritumu daudz laika, cenšoties izdomāt, kā izvēlēties dažus elementi un kā darīt citas lietas. Un otra liela lieta par jQuery ir tas, ka tas ir pāri pārlūku savietojami. 

Līdz ar to atcerēties atpakaļ, kad mēs teicām, ka ne visas pārlūkprogrammas īstenot lietas tādā pašā veidā? Tas ir taisnība, pat JavaScript. Un viens no lielas lietas par jQuery ir tas, ka tas atklās pārlūku un atklāt piemērotu metodi. 

Tātad, ja jums ir nepieciešams, lai izvēlētos elementu, Internet Explorer, iespējams, ka jūs esat vajadzēja darīt šādā veidā. Firefox varētu teikt pareizs veids ir šādā veidā. jQuery nav aprūpi. Kad jūs pateikt jQuery, lai izvēlētos elements, tas būs saprast, cik tas ir vajadzēja darīt to, kas pārlūku lietotājs ir pašlaik, tad to to, ka veidā. 

MIKE RIZZO: Tātad, pieņemsim nav runāt par izmantošana jQuery mazliet. Tāpat kā PHP, jQuery ir īpaši mīlestība uz dolāra zīmi. Tātad, jūs atradīsiet, ka nevienu jQuery - labi, ne visi. Jūs dažkārt var aizstāt dolāru parakstīt ar vārdu jQuery. Bet vispār, tikai tāpēc, ka tas ir īsāks, kad jūs redzat jQuery ir izmanto tas būs ar dolāra zīmi. 

Tāpēc šeit mēs esam tikai rāda sākums Selector par elementu DOM. Šeit mums ir dolāra zīmi sekoja Atvērtās iekavās un pēc tam citātus. Un ievērojot pēdiņām iet mūsu pārslēdzējiem dažādiem elementiem. Tāpat kā CSS, mums vajadzēja selektori, lai jāspēj stils dažādus elementus ietvaros lapā. Šie dažādie selektori tulkot tieši uz jQuery un JavaScript, par lielāko daļu. 

Tātad, šeit mums ir dot foo. Tātad, ja jūs atceraties no lekciju, dot tikai nozīmē klasi. Tāpēc mēs esam izvēloties elementu ar klases foo. Tātad, ja es iet uz priekšu un atvērt mūsu JavaScript konsole šeit tiešām ātri vienkārši pierādīt to, ja es vienkārši ierakstiet dolāra zīmi, mēs redzam, ka tas ir sava funkcija, kas nāk uz augšu. Un tas ir tikai noteikts jQuery. 

TOMAS Reimers: Attiecībā uz tiem no jums, svešs, konsole ir instruments ietvaros Chrome, kas ļauj jums, būtībā, palaist JavaScript pašreizējo lapu. Šī jūs atradīsiet neticami noderīgi, ja jūs faktiski atkļūdošanas un jūs ir jābūt, piemēram, kāda ir pašreizējā Dažu pasaules mainīgā vērtība vai kāda ir kaut kas cits? Tas ir veids, piemēram gdb izņemot ka jūs faktiski var manipulēt elementus lapā ar tas ir daudz vieglāk veidā. Un arī tas nav, būtībā, pārbaudiet ar jums, pirms tas neko. 

Tātad tā GDB varētu būt, piemēram, jūs esat pārliecināts, ka jūs vēlaties, lai palaistu nākamo soli? Konsole ir reālā. Tā kā mājas lapa ir izciršanas un dara kāds to dara, Padome ir arī darbojas kopā ar to. Un jūs varat ievietot piedēvēt kodu ka konsole, kurā būs palaist lapā. 

MIKE RIZZO: Tātad, lai ievadītu konsole, Es domāju, es būtu īsumā nerunājot par to, kā to izdarīt. Pēdējos problēmas, kas var būt izmanto Chrome pārbauda elementu funkcijas vai Skatīt lapas avotu - un tie ir pieejami tikai ar peles noklikšķinot uz lapas vai konkrētu elements, un darot vai nu pārbaudīt elements vai Skatīt lapas avotu. Mēs varam arī piekļūt JavaScript konsole tieši izvēloties pārbaudīt elements. Tātad jūs vienkārši hit konsole uz labajā pusē. 

Alternatīvi, jūs varētu būt arī aizgājuši augšējā labajā stūrī, kas ir nogriezts šajā ekrānā, kur tas ir trīs horizontālas joslas. Un jums iet uz leju, instrumentus un tad JavaScript konsole šeit, kur var redzēt - vismaz uz Windows - saīsne ir vadības maiņa J. Tātad ja mēs vēlējāmies, lai izvēlētos elementu šajā lapā, tāpat kā man parādīja pirms mēs dolāra zīmi atvērtos parens un tad citē. 

Interesanta lieta ir, vispār, vienu pēdiņām un pēdiņas ir nomaināms. Tik daudz cilvēku tikai izmantot vienotā citāti, jo viņi ātrāk rakstīt kā pēdiņās, jo jums nav ir turiet Shift. Tāpēc es ņemšu tikai darīt tieši tagad. 

Tāpēc es vēlos, lai izvēlētos kaut ko ar klasi. Konteiners, tikai tāpēc, ka es zinu, ka tas kaut kas ir uz mūsu mājas lapā tiesības tagad. Un es hit Enter. Un mēs varam redzēt, ka izvēlējusies to. Tātad, tas rāda uz augšu, ka atpakaļ šo objektu. Tātad, tas ir pamata izvēle. Ja mēs vēlējāmies, lai faktiski manipulēt ar to, Jums būs zvanīt kaut par šo izvēli, kas mēs nokļūt vēlāk. 

TOMAS Reimers: Tik vienkārši apskatīt, kas dziļāk, tas nav atšķirīgs par funkciju zvaniem mēs veikti C. Funkcijas šeit nosaukums ir mazliet dīvaini. Tas ir dolāra zīmi. Tas ir tikai nosaukums funkciju. Nav nekas īpašs par to. 

Mums ir atvērtas iekavas. Tad mums ir viens arguments, kas Šajā gadījumā notiek, string, kas ir selektoru, lai to. Un tad mums ir mūsu slēgta iekavas. Viss. 

Tā nav, ka ievērojami atšķiras. Lai gan, tas izskatās ļoti dīvaini. Un tas var būt, sava veida, uzlīmēšanu punktu par daudz cilvēku. 

MIKE RIZZO: Tātad līdzīgi, ja mēs vēlējāmies , lai izvēlētos elementu, kas ir ID, Tagad mēs vēlamies, lai izvēlētos no ID vietā klasē. Tas būtu līdzīga lieta, kurā mēs vienkārši darīt asas zīme ID. Tāpēc mēs esam izvēloties šeit visu elementi, kas ir ID bar. 

TOMAS Reimers: Un tas attiecas. Ka CSS paplašina. Tāpat kā CSS, jūs varat izvēlēties visus saites, kas ir klases foo. Lūk, tas ir tas pats. 

Jūs varētu darīt a.foo, kas izvēlētos visas saites ar klases foo. Jūs varētu darīt strauju joslu, kas būtu izvēlieties saikni ar ID bāru un tā un tā tālāk. Jebkura CSS selektors ir derīgs jQuery selektoru. 

MIKE RIZZO: Jā. Labi, tāpēc tagad pieņemsim nokļūt mazliet manipulācijas, ko mēs varam darīt ar mūsu jQuery. Tāpēc jQuery ir īpaša veida notācijas, kur mēs vienkārši izmantot dot beigās. Un jūs varat domāt par to, tāpat kā C, kā mums bija dažādi structs. Un iet uz tiem structs, jūs būtu izmantot dot, lai saņemtu tiem. 

Tas ir sava veida, līdzīga lieta. Tikai tagad mēs esam funkcijas šajā selektors, ka mēs varam zvanīt uz to. Tātad šeit, ļoti pirmais piemērs jūs varat redzēt, ir CSS selektoru. Un būtībā, kas tas tas ir tas attiecas uz pirmo elementu CSS uz šo lieta, ka izvēlējāties - šis elements, ka jūs izvēlējāties - ar vērtību šim. 

TOMAS Reimers: Tik vienkārši tulkojums kas būtu, ja jQuery, būtībā, vienkārši ņēma foo. Un tad CSS teica, Krāsa Sarkana un tuvu. Tā ir pati ideja. Kas tas ir darīts, ir tas izvēlēts visi Foo elementi. Un tad tas ir piemērots. Veida, īpašuma krāsa ir vienāds ar red. 

MIKE RIZZO: Tāpat mēs varam arī mainīt faktiskais saturs, kas ir norādot uz HTML lapas, kas ir tiešām foršs, jo tas nozīmē, ka jūsu web lapas, tagad var būt pilnīgi dinamiska un nav statisks kas jums izdrukāt, izmantojot PHP pašā sākumā lapa tiek ielādēta. Tātad šeit, ja mēs vēlējāmies, lai mainītu faktiskais HTML lapas, mēs tagad zvaniet HTML funkciju, kas pēc tam tikai ieliktņi neatkarīgi no mums norādīt uz šis elements, ka mēs izvēlējāmies. Tāpēc šeit mēs esam, izvēloties elementu ar klases foo un tad sakot, ka tas ir HTML tas tagad hello world. 

TOMAS Reimers: Un, kad jūs domājat par kādi ir noderīgas programmas, kas Tādēļ šajā CSS viena, pirmā lieta, kas Jūs varat sākt domāt par ziņā pat nolaižamās izvēlnes. Jūs varētu sākt darīt lietas, piemēram, ja lietotājs hovers virs augšējā daļa no nolaižamā, jūs vēlaties, lai apakšējā daļa redzams. Tiesības? 

Tātad CSS, mums ir īpašības darīt kaut ko redzamu. Lietas, piemēram, displejs resnās zarnas nevienam padarītu to neredzamu. Displeja bloku padarītu to redzamu. Vai pat, ja jūs vēlaties iet vienkāršāku, jums ir lietas, piemēram, redzamības līdztiesīgu redzama, un redzamība ir vienāds slēpta. 

Un jūs varētu sākt īstenot lietas piemēram, nolaižamās izvēlnes tiesības pēc tam, kad jums, izmantojot ideju par to, kā jūs varat izrēķināt, kad tas tiek atvērts, ko mēs izietu cauri ļoti īsi. Bet mēs varam sākt redzēt pieteikumi to. Līdzīgā nozīmē, ja jūs mēģināt un īstenot, teiksim, tērzēšanu dzinējs, un jūs vēlaties, lai mazliet runas burbulis nākt uz augšu, ja jūs esat ieguva jaunu ziņu, kad jūs saņemsiet jaunu ziņu, varat veikt nedaudz runas burbulis nākt klajā, mainot HTML lapas, vai ne? , Pievienojot šo papildu runas burbulis ar papildu tekstu tur. Yeah? 

Mērķauditorija: Lai jūs varētu iegult to laikā HTML kods veida, piemēram, [Dzirdams]? 

MIKE RIZZO: Right. Jā, mēs nokļūt, ka ar mazliet. Jā, tas ir līdzīgs mazliet PHP. Ne gluži līdzīgi. 

Labs atšķirība, lai ir, ko tas faktiski rediģēšanu, kad mēs rediģēt lapa, jo tas nebūs rediģēšanu faktisko failu, kas tiek glabāta serverī, jo pasaulē nedrīkst atļaujas rediģēt failus. Tas ir vienkārši rediģējot to, kas ir par lapu un to, kas tiek rādīta pārlūku. Tātad, ja tu būtu, lai pārlādētu lapu pēc, saka, dzēšot kaut kā mēs redzēt, ka mēs varam darīt ar noņemt zvanu, ka lieta, tad atkal parādās. 

TOMAS Reimers: Tik viens veids, kā domāt par Tas ir, ja es esmu jūsu datoru un Mike ir, sava veida, servera. Kas notiks, ir es esmu gatavojas jautāt Mike, hey, es varu būt kopiju šī mājas lapa? Un viņš man tā kopiju. 

Nē, tas nav oriģināls lieta. Tas ir tikai kopija. Un tad tas būtu, piemēram, oh, tur ir JavaScript šeit. Ir skaidrs, ka man vajadzētu rediģēt lapu līdzīgs šim. Un es esmu rediģēšanu kopiju. 

Bet tas nav īstenojušas faktisko kopiju. Un, ja man jautātu viņu vēlreiz atsvaidzināt lapu, - hey, es varu būt vēl tīru kopiju - viņš gatavojas sniegt man citu tīru kopiju. Un tad, es esmu gatavojas darīt to pašu piemēram, ak, tas JS šeit, ka saka rediģēt to. Un es esmu gatavojas, lai saglabātu darot to. 

MIKE RIZZO: Tik tiešām foršs lieta ka jūs varat darīt ar jQuery ir faktiski pievienot dažāda veida no animācijas uz jūsu lapu. Es nezinu, ja jūs esat kādreiz redzējuši, kur jūs mēģināt, lai aizpildītu veidlapu tiešsaistē, un jums nav jāaizpilda lietas pareizi. Tik maz lieta noslīd uz leju augšā un saka, jūs nav izdarīts pareizi. Lūdzu, mēģiniet vēlreiz. Un tad tas, iespējams, pat tikai slaidu uz augšu. 

Izrādās, jQuery ir uzcelta funkcijas kas padara visu, kas animācija ļoti, ļoti viegli. Tāpēc ir pirmais fade out funkcija, kas Jūs varat zvanīt uz kaut ko. Un tas ir veids, kā mainīt CSS par ka elements animācijas veidā. Tā tas notiek neatkarīgi no elementu tu sauc to fade out on. Un tad, lēnām mainās tas ir necaurredzamību līdz brīdim, kad tas notiek pilnīgi pārredzama. 

TOMAS Reimers: cits populārs viens ir slīdēt uz leju, kas padarīs kaut kas, šķiet, bīdot to uz leju. Tātad gadījumā, nolaižamajā izvēlnē, atkal, kad mēs uzzinājām to, kā noteikt ja tas ir hovered vairāk, jūs varētu vienkārši pateikt šo dibenu daļa slīdēt uz leju tagad. Un tad, šķiet, bīdot uz leju. 

MIKE RIZZO: Un tad, ja jums vienkārši ir kaut kāda veida animācijas prātā, ka jQuery nebūt negarantē. Piemēram, pieņemsim, ka jQuery tas sniedz jums ar slaidu leju un slaidu uz augšu. Nu, pieņemsim, ka jūs vēlētos, lai slīdētu kaut kas no kreisās vai no tiesības veida, piemēram, CS50 Galvenā lapa nav vien dodaties uz jaunu paneli. Jūs tad, iespējams, būs īstenot to pats, izmantojot animēt funkciju ietvaros jQuery. 

Tik līdzīgi, jūs vienkārši animēt. Un tad tajā tas aizņem vārdnīca dažādām vērtībām ka jūs vajadzēja iet. Tātad šeit, ja mēs vēlējāmies rosināt elements foo tā, ka tās platums nu paplašina vai līgumiem līdz 80 pikseļiem, atkarībā no tā, kāda tā ir patlaban. Mēs vienkārši iet, ka arguments tajā. 

Dzīva ir arī daži citi argumenti ka jūs varētu nodot to, piemēram, ātrums aktivizēšanai ka jūs vēlaties, lai dotu to. Un, lai to izdarītu, es tikai saku ātri Google jQuery animēt. Un tad, audzina šo lapu, varat redzam, ka ir ieguvuši ķekars dažādās īpašības, ka jūs varat iet to. 

Un es aicinu jūs - kad jūs nākt pāri kaut kas jums nav zināt, vai vienkārši vēlaties uzzināt vairāk par īpaši metode, ka jūs varat zvanīt par kaut ko - tikai google to. jQuery ir ļoti labi dokumentēta. Un bieži vien reizes ir daudz piemēri, ko tie sniedz jums. Ja mēs ritinātu uz leju - līdz galam - ka mēs varam izmantot, kā arī. 

Atkal, ja attīstītājs faktiski iet caur trouble rakstot bibliotēka, viņi parasti vēlas kāds to izmantot. Tāpēc līdzās gatavojas ir dokumentācija. Un ka šāda dokumentācija parasti var būt atrodama projekta lapu, kas ir kāpēc mēs deva jums šo sākotnējo vietni sākums, kas saista jūs Projekta lapas, lai jūs varētu redz, ka dokumentāciju. 

Parasti projekta lapu gadījumā gada [dzirdams], tas tev teicu, ka nosaukumi klasēs. Attiecībā uz JavaScript, tas dod Jūs nosaukums funkciju. Starp citu, ja mēs ritiniet uz augšu uz augšu, ātrs sānu piezīme par funkcijām kad jūs redzat funkciju īsteno kā šis ar cieto iekavās vidū, tas nozīmē, ka šis īpašums ir obligāta. Tikai galvu uz augšu. Esmu redzējis daudz jautājumu par to. 

Tātad, šeit mēs varam redzēt, ka dzīva aizņem īpašības kā vajadzīgs arguments. Un viss pārējais ir obligāta. Sānu piezīmi - Jūs varat domāt par to, kārtot un, piemēram, cilvēks lapas. Man lapas ir dokumentācija C par daudz citām lietām, kā arī. 

MIKE RIZZO: Tātad mēs esam iemācījušies, kā mainītu citu CSS lapā, animēt to, un izņemiet pievienojiet HTML. Bet viens no patiešām visspēcīgākais lietas par JavaScript un jo īpaši jQuery - ko tas ļauj jums jādara, ir reaģēt uz dažādi elementi, kas notiek. Piemēram, šeit mēs esam notikumu apdarinātājs. Un tas nozīmē tikai to, kad vien tas Pasākums notiek, mēs rīkoties ar to noteiktā veidā. 

Tātad šeit, vispārējs jQuery notikums apdarinātājs ir dot tālāk. Un tad, pirmā lieta, ko jūs sniedzāt ir tas notikums, tas būtu var klausās. Tātad šeit, tas klikšķis, ka mēs gaidām. 

TOMAS Reimers: Alternatīvi, jums ir uz hover, kas ir ļoti populārs viens. Tātad atpakaļ uz manu nolaižamās izvēlnes idejas. Jums būtu top viens uz lidināties. Un tad jūs varētu mainīt. 

MIKE RIZZO: Right. Un tad, kad tas notiks, tas tikai izpilda šo funkciju, ka mēs arī tā kā argumentu, un ka tā brīdina sveiki un hi. 

TOMAS Reimers: Tātad, šajā gadījumā JavaScript, šī ir vieta, kur mums ir nepieciešams, lai attālināties no C Mēs varam reāli veikt funkcijas, kā argumentus. Un tur ir daudz patiešām sarežģītas veidi, kā to izdarīt. Mēs ejam, lai veicinātu vienā virzienā, kas ir varat definēt darbojas labi tur. 

Tātad, ja jūs lūdzot funkciju kā parametrs, jūs būtībā vienkārši dodas uz noteiktu funkciju uz vietas. Un kā jūs definētu funkciju JavaScript ir jums burtiski saka funkciju. Tad parasti, nosaukums no funkciju. Bet mēs nekad atsauce šī funkcija vēlreiz. Tāpēc mēs atstāt to nezināms. 

Tad iekavās, tad izlocīts skavas, un tad kods šajā. Tāpēc mēs saprotam, tas var būt mazliet mulsinoša. Tāpēc mēs jums vispārējo formu ko notikumu apdarinātājs izskatās zemāk, kas ir par notikumiem. Un tad, jūsu kods iekšpusē, kas. 

MIKE RIZZO: Vai ir kāda jautājumi par šo? Tas var būt nedaudz mulsinoši, Pirmo reizi, kad jūs to redzat. 

TOMAS Reimers: Jūs tiešām vēlaties atvērt failu un parādīt viņiem dažus jQuery tieši tagad? 

MIKE RIZZO: Jā, pieņemsim darīt. OK. 

TOMAS Reimers: Tāpēc tagad mēs esam ierīcē. Un tas, ko mēs esam darījuši, ir, mēs esam spēruši brīvība radīt gan index.html fails, kas saista uz JavaScript faila. Un mēs varam atvērt - yeah. Nu, tas dara divas lietas. 

Pirmkārt, tas ir saistīts JavaScript faila. Un mēs redzam, ka šeit. Mēs redzam, ka vadītājs HTML dokumentu, jo īpaši. Tātad, jūs redzēsiet, kas tur, ka Mēs, galvenokārt, teiksim SRC, kas apzīmē avots. Un tas ir URL. 

Tātad, šeit jūs varat teikt, ka mēs esam iekļautas jQuery. Un mēs esam iekļāvuši arī skriptus. Otrs veids, kā iekļaut JavaScript ir ka jūs varat iekļaut inline skriptu tag kā mēs apakšā, kur tas saka skripts veids ir teksta JavaScript. 

Tāpēc mēs esam sakot, klausīties, mēs esam par to, lai iekļautu skriptu. Un šī skripta veids ir JavaScript, kas ir veida tekstu. Ļoti vienkārši. 

MIKE RIZZO: Tātad tas, veida, izpaužas jūsu jautājums par to, kā mēs arī JavaScript mūsu failus, jo, kad mēs bija PHP, mēs darām kaut kas līdzīgs šim. Un tad ir mūsu PHP funkcijas - teiksim krājumi jādara kaut kas ar to - iet tur. Taču tagad mums ir skriptu tagus ka mēs dodam to, kas ir faktiski daļa HTML pati, jo tas nav faking ir HTML fails, piemēram, tā ir PHP, jo, ja jūs tiešām iet un apskatīt avotu lapā, Jūs redzēsiet šo skriptu tagus tur ar JavaScript saistīta ar tos, kas. 

Tātad, ja mēs vēlējāmies, lai uzrakstīt kādu JavaScript - pieņemsim tikai teikt, mēs vēlējāmies, lai mainītu ķermeņa jo šobrīd man nav jebkurus citus tagus, ka es tiešām var rediģēt turklāt organismā. Pieņemsim tikai teikt, es gribēju mainīt CSS par to. Tātad mēs iesim uz priekšu un pārmaiņas krāsu tā sarkanā krāsā. 

Tāpēc es saglabājiet failu. Iesim atpakaļ uz mūsu mājas lapā, atsvaidzināt, un tas automātiski tāpēc, ka tas nav šķist tas gaidīja vispār, jo mēs neklausās notikumu vai kaut kā tā. 

TOMAS Reimers: Tātad, ja mēs ejam atpakaļ, ka failu, jo īpaši - HTML failu - ko jūs gatavojas lai redzētu, ir mums - atcerieties, ka tas ir piekrauts, veida, hronoloģiski. Tāpēc mums ir pirmais galvu. tas slodzes šos divus failus. Tad mēs ejam uz ķermeņa. Un mēs redzam Hello pasaulē. Tāpēc mēs piedāvājam Hello pasaulē. 

Un tad pēdējā lieta, ko mēs esam ir mums ir skriptu tag. Tātad, tas palaiž skriptu tag, jo tas ir nesaka to gaidīt kaut ko. Un tas ir visvienkāršākā veids, kā vadīt JavaScript. 

Ar to teica, jūs varat ievietot skriptu tag up galvenē tikko parādīt šo jautājumu? Un palaist to. Mēs ejam, lai paziņojuma, ka tā nemaina krāsu. Un tas ir viens no problēmām JavaScript ir tā, ka lietas ir piekrauts hronoloģiskā secībā. 

Tātad laikā, kad šis kods skrēja, mēs izvēlējāmies - go back - ķermeņa tag. Ķermeņa tag neeksistē vēl jo JavaScript ir saskaņā ar HTML. Tāpēc pārlūks ir kā izvēlieties organismā. Nav tādas lietas vēl. Tātad, mēs varam ignorēt to. Un mēs turpinām iet. 

Un tad mēs definējam ķermeņa tag. Bet tas nekad izpaužas atjaunošana. Tātad, ja jūs īstenojot skriptu tags, pārliecinieties, ka jums vieta Pēc ķermeņa tag. Nākamais slaids. 

MIKE RIZZO: OK. Tāpēc mēs mainīts kaut ko. Bet tas nav izskatās tā reaģēja uz mums vispār, jo tas tikai veida darīja to, tiklīdz tas ielādes lapu. Tāpēc tagad, nevis darīt to, kāpēc ne mēs pievienot notikumu apdarinātājs. 

Tātad, pieņemsim kaut ko darīt uz ķermeņa vēlreiz. Pieņemsim, ka mēs to darām par - noklikšķiniet. Mēs pievienotu funkciju. 

Tomas Reimers: Pieņemsim maiņa tas ir krāsu sarkano vēlreiz. Kāpēc ne? 

MIKE RIZZO: Jā, pieņemsim izmaiņas tās "krāsu uz sarkanu vēlreiz. Labi. Tāpēc pieņemsim pārlādēt lapu. Labi, mēs redzam - kā plānots, tas nav sarkt vēl. Bet tad mēs varam iet uz priekšu un noklikšķiniet uz tā. 

TOMAS Reimers: Un tas sarkt. 

MIKE RIZZO: Un tas nav sarkt, kā gaidīts. 

TOMAS Reimers: Un mēs varam redzēt, cik mēs varam sākt veidot ļoti pamata mijiedarbība. Citas lietas, ko mēs varētu vēlēties to darīt, ir, ja mēs negribam, lai ķermeni sarkano krāsu, pieņemsim HTML fona krāsa ir sarkana. Vienkārši tāpēc tas ir pats CSS. 

Un, kad mēs to mainīt, mēs varam redzēt šo ļoti dramatiska ietekme mainās visu lapu. Tātad vēlreiz, ja jūs īstenojot lietas, Jums var būt viens komponents kas ir domāts, lai būtu uzklikšķināt uz. Teiksim, izceļošanas pogu un visa cita sastāvdaļa, kas ir paredzēts, lai reaģētu. Lai jūs varētu noņemt logu kad tas notiks. 

MIKE RIZZO: OK. Tāpat kā, piemēram - Jums nav iegūt, lai redzētu šo agrāk - Es ņemšu tikai parādīs to, kā tas izskatās kā tad, kad mēs kaut ko slēpt. Tāpēc es iešu uz priekšu, un tie slaidu uz augšu. 

TOMAS Reimers: Vēlaties, lai wrap, ka punktu tipa pirms mēs to darām? 

MIKE RIZZO: OK. Jā, kāpēc nav mēs to darām tikai tik mēs varam izvēlēties to nedaudz vairāk. 

TOMAS Reimers: Un pieņemsim to klasi. 

MIKE RIZZO: Jā. Labi, tāpēc pieņemsim redzēt. Tā vietā, izvēloties faktisko ķermeni tagad, es ņemšu tikai atlasītu visu ar klase sveiki, kas šeit mēs tikai viena lieta. Tāpēc mums nevajadzētu jāuztraucas par to. 

Tāpēc es ņemšu atsvaidzināt to. Es iešu uz priekšu un noklikšķiniet uz tā. Un tas, veida, bija dīvaini Bīdiet up lieta, kas neizskatījās, ka pievilcīga. Vispār, tie izskatās diezgan jauki. Es domāju, tas - daži Iemesls - nav. Es ņemšu tikai darīt izbalināt, kas tik Jūs varat apskatīt, ka pārāk. Daudz patīkamāku. 

Un tad, ja es atvērt JavaScript konsole atkal, un mēs gribam, lai redzētu, kas tas izskatās, kad mēs fade to iekšā Tagad, es tikai aicinu izbalināt par to. Un tas zūd atpakaļ collas 

Tāpat, mēs patiešām varētu arī nodot arguments izbalināt vai izbalināt veic, kas ir veida, ātrums no tā. Tāpēc iesim uz priekšu un pateikt, ka mēs gribam tā iet lēnām izbalināt iekšā Tāpēc es domāju, tas joprojām likās diezgan ātri. Bet tas bija lēnāks nekā iepriekš. 

TOMAS Reimers: Un, ja jūs vēlaties atrast vairāk par šīm lietām, atkal, dodieties uz jQuery dokumentāciju, kas mēs esam dota jums, un lasīt caur tiem. Viņi dokumentēt savas funkcijas neticami labi. 

MIKE RIZZO: OK. Tāpēc es domāju, iesim atpakaļ uz to. Un mēs varam runāt par mūsu pēdējā lapā. Nu, mēs varam pabeigt ar sāknēšanas. Un tad mēs atvērtu to dažiem jautājumiem. Un, ja jūs guys ir kādas idejas, kas vēlaties mēģināt uzmest un redzēt ja mēs varam tos īstenot ar JavaScript ātri. 

Tik tiešām ātri par sāknēšanas, kas automātiski tika iekļauts Jūsu pēdējā problēma noteikts CSS mapē un faktiski saistīti ar jūsu header.php. Tātad, jūs varētu būt pievienotas klasēm, ir definēti sāknēšanas uz to. Un tas būtu automātiski veidoti šīs lietas atbilstoši. 

TOMAS Reimers: Tātad sāknēšanas ir ļoti burvju lieta, ko cilvēki izstrādājusi Twitterī. Un ko tas bija domāts darīt, bija - Pirms mājas lapas ir ļoti grūti izdarīt izskatās jauki, jo īpaši, ja mums bija daudz kopīgu sastāvdaļu. Tik daudz pogas web meklēja pati. 

Teksta laukiem daudz var veikt, lai izskatās labāk nekā standarta tekstu lauka jūs droši vien zināt, no patiešām vecās mājas lapas vai tiešām slikti veikts tīmekļa vietnes, kas vienkārši izskatās kā burtisks teksta kastes bez jebkāda veida teksta ēna vai jebkāda veida jauku kontūru. Tātad, ko Bootstrap tomēr bija tā teica, labi, Mums ir daudz kopīgas stili. Kāpēc nav mēs vienu vienotu kopumu CSS un kopīgs JavaScript kā labi, kas var stila tā kā ir un kas var dot cilvēkiem lietas, piemēram, kritums leju izvēlnes, kas var dot cilvēkiem lietas, piemēram, modals. 

Modālo ir tas, kas NOP pa lapu kad tas ir strikti runājot kaut ko, kas vēl kavē mijiedarbība, līdz jūs mijiedarbojas ar to. Kaut kas līdzīgs tas ir, jūs esat pārliecināts, ka vēlies dzēst šo lietu? Jūs nevarat īsti darīt kaut ko citu līdz brīdim, kad jūs sakāt: jā vai nē. 

Pagāja tas viss un iepako to kopā un teica, šeit mēs iet. Cilvēki tagad var izmantot šo. Un jūs varat atrast to pa pie getbootstrap.com. Tas automātiski tika iekļauti Jūsu pēdējā problēma noteikti. Un jūs esat vairāk nekā apsveicami, lai izmantot to savu galīgo projektu. Un, ja jūs vēlaties sekot, ka saiti, lai iegūtu sāknēšanas. 

Jūs redzat šeit ir Bootstrap CSS vietā. Jūs redzēsiet sāknēšanas. Un, ja jūs ritiniet uz leju, jūs redzēsiet kā lejupielādēt to, kā instalēt, un tā tālāk. 

MIKE RIZZO: Un jūs varat arī Interesanti ir tas, pielāgot to būt jebkāda veida tēmām ka jūs vēlaties. Es zinu, ka ir kaut kas man bija par manu galīgais projekts, kad man bija klasi Tika pielāgot to. Dažādas versijas sāknēšanas ka bija atšķirīgu krāsu shēmu un dažādas formas dažu dažādas lietas. Tāpēc es aicinu jūs spēlēt ar to. Tas ir sava veida jautri darīt. 

TOMAS Reimers: Meklē augšdaļā atkal, tas ir ļoti līdzīgs Fonts Awesome vietā. Dokumentācijas partijas sāks šķist līdzīgi, kad esat redzējis pietiekami daudz no tā. Tātad šeit mums ir CSS sastāvdaļa šo. Un jūs redzēsiet, cik tas var stila lietas. Tātad, ja jūs noklikšķiniet uz tabulas, piemēram, Jūs varat uzreiz veikt tabula diezgan vienkārši pievienojot klase tabulu uz to. 

Pašas lietas, pogām. Ja jūs vienkārši pievienot klases BTN un BTN neizpildes vai BTN galvenais, jūs varat saņemt vienu no šīm pogām ar šīm pre-made stiliem. Un tad, ja jūs meklējat kaut sarežģītāka nekā vienkārši restyling kādi w jau ir, pār tab JavaScript augšdaļā mēs ir ķekars sastāvdaļas. 

Tāpēc šeit mēs esam pārejām, modals, dropdowns, cilpiņas, un padomus. Tooltip ir tas NOP up ar savu pele, kad jūs lidināties uz kaut ko. Popovers, brīdinājumi, pogas, saliekamās akordeoni ir tas, ko viņi parasti sauc. Karuseļi, kas flip izmantojot, piemēram, attēlus. 

Tātad tie ir komponenti gada sāknēšanas. Es aicinu jūs, lai ļoti doties apskatīt tos. Tur JavaScript komponents un CSS sastāvdaļa. Justies brīvi izmantot tos kā jūs. Mēs nebrauksim iet pārāk daudz uz tiem jo mēs uzskatām, ka dokumentācija ir ļoti labi darīts. Un jā. Vai jums ir kādi jautājumi par šo? 

MIKE RIZZO: Tik tiešām ātri pusē, dizains šajā mājas lapā, kas mēs ātri salikt kopā Šī prezentācija ir reāli darīts, izmantojot sāknēšanas. Kā jūs varat redzēt, kad mēs noklikšķiniet uz šiem dažādas cilpiņas, mēs nekad faktiski Atstājot šo pašreizējo index.html lapu. Tātad, kas mums ir, ir dažādi divs šajā index.html. Un tad, kad mēs noklikšķiniet atšķirīgs tab, tas ir tikai mainot kuriem viens ir rāda. 

Tāpēc tas attiecīgi pozīcijas tiem, maina HTML lapas, lai tab strāva tiek atzīmēta kā aktīva tā šķiet atšķirīgi, un izskatās tiešām jauki. 

TOMAS Reimers: Tāpēc, ka viss bija izdarīts bez mums rakstot gandrīz jebkuru CSS. Mēs redzam arī galveni augšdaļā, kuras krāsas ir ar mums. Bet faktiskā uzvilkšanas lapas augšpusē, un padarīt tas ritināšanas bija sāknēšanas. Un tad pat citu bibliotēku - tas nav viena, mēs runājām par to, bet viens Jūs varat Google, ja vēlaties. To sauc prettify.js. Un tas būs sintakses izcelt savu kodu jums, izmantojot gan CSS un JavaScript. 

Pēdējā lieta, ko mēs vēlamies runāt par pirms mēs atbrīvot tevi ārā Pasaule aplūkot bibliotēkās izdomāt kā tos izmantot, un, cerams, lasīt dokumentāciju un atrast to, ko jūs vajadzība ir, kā atrast bibliotēkās. Tātad pirmais ir, mēs esam tikai gatavojas push Google. Go Google. 

Tas ir burtiski to, ko mēs darām, kad mēs vajag kaut ko darīt, ir mūsu Google. Vai ir JavaScript bibliotēka, kas man ļauj manipulēt laiku noderīgs veids? Tātad, ja es zinu, ka daži lietotājs izveidojot kontu šeit, un tas ir Pašreizējais laiks, kā es varu aprēķināt Atšķirība, ka bez aprēķināt to pats? Tātad tas ir faktiski kopējā lieta, JavaScript laika bibliotēkas. Un šeit mēs Moment.js, - populārākajām vienu. 

Ja mums vajag bibliotēku, lai manipulētu kaut ko līdzīgu krāsu, lai spētu rada ķekars izlases krāsas - iespējams, lai radītu stila vai kaut ko - mēs varētu Google kaut ko līdzīgu JavaScript krāsu bibliotēka. Un es esmu pārliecināts, ka mēs varētu pop up ar tūkstošus, un viens no tiem. Jūs esat laipni aicināti lasīt caur tiem. 

Tāpēc lielākā daļa lietas - ja jūs tos atrast - gribam būt izvietoti uz vienu vietas, kas ir uzņēmējas kodu. Viņi ir dažas populāras ones. Vispopulārākais, ko šim ir github.com. Un, ja jums iet uz GitHub tas faktiski kur Normalizēt uzņēma. Tātad, ja jūs vēlaties doties atpakaļ uz šo vienu. Parādīt viņiem, ka. 

MIKE RIZZO: Un kas ir faktiski, ja Tas ir izvietots arī, ja esat ievērojuši. 

TOMAS Reimers: Jā. Tātad, ja jums iet pār normalizēt un doties uz GitHub. Bija tas, ka? 

MIKE RIZZO: Ka maz kaķis lieta ir GitHub simbols. 

TOMAS Reimers: Ak. Tāpēc GitHub izmanto metodi, ko sauc Git uzglabāt kodu. Vai jūs nezināt, kas tas ir, vai tas biedē jūs, tas ir jauki. Jums nav zināt, kas Git ir jo GitHub ir pogas Lejupielādēt apakšējā labajā stūrī. 

Cita noderīga lieta zināt par GitHub ir lielākā daļa produktu būs lasīt mani. Un, ja viņiem nav mājas lapā, lasīt man runāt par to, kā jūs instalējiet to, kā jūs izmantojat to, ko tā dara, un tā tālāk, un tā tālāk, un tā tālāk. Kas mēs esam būtībā ir ejot jūs caur. 

MIKE RIZZO: Internets ir atmest. 

TOMAS Reimers: Tas ir jauki. Pēdējās divas lietas, ko mēs vēlējāmies runāt par - mēs esam runājuši par GIT - ir risināšanā. Un tas viens nav tik būtiska gala produkts, jo tas kad jūs atstāt 50. Un, kad jūs satikt produktos Īstenojot bibliotēkas vai īstenošanas savu projektu, jūs gatavojas ir jautājumi vai Jūs esat skatīsies uz jautājumiem. 

Atkal, Google to. Tas ir burtiski to, ko mēs darām. Tas ir gatavojas likties muļķīgs. Bet burtiski, mēs Google to. Un atkal, viena no pirmajām lietām jūs parasti uzskriet ir stackoverflow.com, kas ir lieliska jautājumu un atbilžu redzi. 

Tas ir brīnišķīgi, gan tāpēc, ka jūs varat post jautājumus un meklēt atbildes, bet arī tāpēc, ka tas jau ir daudz iepriekš apdzīvotos saturu tur. Tātad, parasti tad, kad jūs Google programmēšana Jautājums, kas pirmo reizi pāris hits jums jau darbojas tajā laikā jūsu problēmu kopas. 

Un tad, pēdējais tiešām īss lieta ir JSFIDDLE, kas ir - šodien mēs esam ir darīt daudz darba ar JavaScript HTML CSS. JSFIDDLE ir web app, kas būtībā ļauj jums veikt jūsu HTML, jūsu JavaScript kreisajā apakšējā, un Jūsu CSS augšā pa labi. Un tad tas var radīt ātri padarīt par to, un redzēt, kā tas mijiedarbojas. Tas ir ļoti noderīgi, ja cilvēki cenšas veikt koncepcijas, piemēram, tas ir, kā jūs to darītu do nolaižamo izvēlni. Varbūt ātri atklāt, vai neatkarīgi. 

MIKE RIZZO: Tad iesim priekšu un noklikšķiniet uz tā. Quick piezīme - tā kā, pirms mēs bijām dara klikšķi. Izrādās, JCorey Koreja ir arī iebūvēts ar klikšķi notikumu apdarinātājs, ka izmanto tikai tādēļ, ka tā tu esi gatavojas vēlaties darīt daudzas lietas ja jūs vēlaties, noklikšķiniet kaut ko. 

Tāpat tas ir arī lidināties. Bet, lai iegūtu pilnu apjomu tiem, apskatīt jQuery dokumentāciju un darīt to. Es tomēr kaut ko stulbu šeit. 

TOMAS Reimers: Tāpēc man ir ļoti ātrs Programma tieši šeit, kas norāda pogu klikšķi. Tad mums ir par cilpu. Kur i ir mazāks nekā 404. Tas ir tikai gatavojas pop up šo brīdinājumu ziņojumus. 

MIKE RIZZO: Un kāda bija kods 404 stāvēja uz HTML? Vai kāds atceras? Nav atrasts, labi. Chrome pievienots arī šis veikls lieta, kur jūs varat - 

TOMAS Reimers: Tāpēc, ka cilvēki, piemēram, Mike sāka darīt to daudz un kaitinošas lietotājiem, kas ļauj jūs redzēt info. 

MIKE RIZZO: Jā. 

TOMAS Reimers: Vai mums ir kādi jautājumi par to, par JavaScript bibliotēkas, atrast bibliotēkās, vai Ko Web Development izskatās tāpat kā reālajā pasaulē? Mēs paceļ pret laiku. Tāpēc es neesmu pārliecināts, ka mēs ejam ir laiks, lai īstenotu ja tas ir tiešām ātri. Mēs esam labi? 

MIKE RIZZO: visu, ko jūs guys vēlētos redzēt, tiešām ātri, piemēram, divas minūtes vai mazāk? 

TOMAS Reimers: Jebkas mēs varam noskaidrot? Kā rakstīt - 

Mērķauditorija: [dzirdams]? 

MIKE RIZZO: Jā, tā That - 

TOMAS Reimers: Jūs varat vienkārši hit Vadības U mājas lapā. 

MIKE RIZZO: Ak, es nezināju, ka. 

TOMAS Reimers: Es domāju, ka jā. Control-U. Jā. 

MIKE RIZZO: Ak, tā ka ir kods mājas lapā. Bet, ja jūs patiešām vēlaties, lai lejupielādētu mūsu failus un viss, tas ir izvietots gada github.com 

TOMAS Reimers: slash savu vārdu - Tomas Reimers - slash CS50 defise seminārs. 

MIKE RIZZO: Un jūs varat atrast visu tur. 

TOMAS Reimers: Tas ir tas, ko GitHub izskatās, ko veidā. Tātad vēlreiz, kad jūs redzat kādu atvērtā koda projektu, parasti, tie būs lasīt man tur, ka jūs varat izlasīt. Un, ja jūs iet atpakaļ, jūs ievērosiet, ka Jums ir lejupielādēt zip, kas būs ļauj lejupielādēt avotu kodu, lai ietvertu produkts savā lieta. 

MIKE RIZZO: Jā, un, ja mēs vienkārši noklikšķiniet uz index.html tiešām ātri - 

TOMAS Reimers: Redzēsiet šeit pirmkods mūsu mājas lapā. 

MIKE RIZZO: Arī es aizmirsu, lai push labo līdz ar to lielā galda tā iekļauts, bet tur ir arī tabula gada chmods ka mēs iekļautas tikai par savu skaidrību. Bet, ja mēs ritinātu visu ceļu uz leju, lai apakšas, mēs faktiski nav darīt ļoti daudz ar JavaScript sīkumi vispār ar to. Tas ir tikai no visa cits, kas mums bija. 

Tāpēc paldies puiši par ierašanos un klausīšanās. Mēs ceram, ka tas bija patiešām noderīga. Ja Jums ir kādi JavaScript saistīto jautājumi vai vienkārši vēlaties runāt par kāds cits, piemēram, kādas citas labas lietas jūs varat darīt ar JavaScript, mēs labprāt runāt ar jums. 

TOMAS Reimers: Ja Jums ir jautājums par savu projektu, vai, ja tas var būt gadījumā, mēs, iespējams stick apkārt nedaudz pēc tam. Bet kas nav, ir laba nedēļas nogale. 

MIKE RIZZO: Jā, patīk. See you guys. 

TOMAS Reimers: Skatīt ya.