TOMAS Reimers: Hola a tots. Preses Reimers del meu nom. 

MIKE RIZZO: I jo sóc Mike Rizzo. 

TOMAS Reimers: Som dues de TS CS50s. I avui estem liderant el seminari sobre JavaScript i CSS per a aplicacions web. Si vols seguir endavant, la enllaç està just aquí. I vostè vol posar cap amunt breument a l'ordinador? 

Aquí està l'enllaç. És un lloc petit, que té vincles amb tots els recursos que seran que el porten avui i també té una gran quantitat de informació útil escrit per nosaltres per llegir més en profunditat quan torni, i que està tractant de recordar el que va ser exactament el que diem, el que eres parlant, et cetera. 

MIKE RIZZO: Molt bé. Així que anem a començar. 

TOMAS Reimers: Així que vols començar? D'acord. 

MIKE RIZZO: Si. Així que primer volíem començar amb una àmplia visió general sobre la Internet i els tipus d'arxius en el disseny de llocs web. Si bé aquesta presentació vull entrar en JavaScript molt més més tard, volíem començar amb simplement, una mica, com a vista d'ocell del que un lloc web és i com a pensar en el disseny d'un lloc web per a l'inici. 

Així que vostès, en aquest moment - amb el sent divendres a la nit - ha de tenir presentat les seves finances CS50 butlletins de problemes. Amb sort, això va ser un bon sabor del que la programació web pot ser. Però aquí volem, alguna cosa així, donar que un altre gust, també. 

TOMAS Reimers: Així que per recapitular el succeeix, quan s'escriu en la seva URL a el seu navegador d'Internet, que posa URL mirar a l'ordinador. I connecta el seu ordinador de a un altre equip, que alberga aquest lloc web. OK, així que quan vas a google.com, ets connectat a un Google de ordinadors, que té el arxius de google.com. 

Aleshores us preguntarà un arxiu específic. Així que si vas a - No sé - example.com / index.html o / prova.html, vostè va a demanar aquest arxiu específic. I el lloc web va per tornar a vostè. 

Després, una vegada que passen per aquest arxiu - una vegada que estàs equip s'obté que arxiu - que va a començar per construir una pàgina web. Així que ara que té l'arxiu HTML, que és una cosa així com el estructura de la pàgina web. L'arxiu HTML també podria fer referència a Arxius CSS, que defineixen el estil de la pàgina web. 

Arxius JavaScript, que defineix interacció amb la pàgina web. Els arxius d'imatge, que són només imatges. I, possiblement, establir vincles amb altres arxius HTML, que després es pot visitar. 

MIKE RIZZO: OK, molt bé. Així que vostès tenen de tot, potser, laboriosament configurar el seu host local al sistema virtual. I això, una mica, és el local domini que l'equip rep només per a vostè en la seva pròpia adreça IP. 

Així que dins d'això, llavors vostè pot afegir a que les seves pròpies pàgines web. Vull dir, en CS50 Finances, vostè ha de tenir afegit algunes pàgines HTML, que són, classe de, embolicat en l'embolcall PHP. Però al final, el que les seves pàgines PHP van ser sortida era HTML. 

Però pensant en tornar als orígens del PSET, vam haver establir els permisos per a tot, oi? Així que això només bàsicament ens permet saber Qui pot llegir, escriure, i possiblement executar cada un dels arxius. Així que farem una ràpida - hm? 

TOMAS Reimers: Així que anem per fer una demostració ràpida. Així que per recordar a vostè, quan vostè connectar-se al equip de Google - qui - i demanar un arxiu, l'ordinador primer cal assegurar-se que està autoritzat per realment veure aquest arxiu o llegir que presentar perquè no es pot simplement pregunta per a qualsevol arxiu en aquest equip, no? Això seria un risc de seguretat. 

Així que els arxius dels sistemes que utilitzem, com aquest aparell CS50, té tres general, les persones que poden tenir permisos a alguna cosa. La primera és la real propietari d'aquest arxiu. El segon és el grup que pertany el fitxer. No ens centrarem massa en això. I l'últim és, més o menys, com el món, o com tothom qui és no és específic d'aquest arxiu i no tenir drets de propietat sobre ella. 

Així que si tenim el propietari, grup, i després món. I després, per a cada un d'aquests grups, es pot tenir un de tres permisos, OK, o múltiple d'ells. Vostè pot tenir permisos de lectura. Vostè pot comptar amb els permisos adequats. I vostè pot tenir permisos d'execució. 

Així que en termes de tipus d'arxiu reals, llegiu el permís és com en realitat la lectura el contingut del fitxer. Un permís dreta està escrivint a aquest arxiu. Un permís d'execució s'està executant el presentar com es fa quan s'executa una de seus projectes CS50. 

Per això, quan estem pensant en arxius com quan necessitem llegir un arxiu HTML arxiu, que ha de ser món llegible, oi? Presumiblement, també el propietari vol ser capaç d'editar aquest arxiu. Així que l'amo necessitarà permisos de lectura i escriptura. En realitat, no cal executar. 

Grup, que tractarem el mateix que el món d'avui. Pel que necessiten permisos de lectura. Però no cal escriure o permisos d'execució. I ara, si pensem en tornar a l'antiga Conjunts de processadors, el que ens adonem és que aquest tipus de semblar-se a binari, oi? 1 significa que si. 0 per no. I en realitat podem traduir aquest a binari. 

Així que 110 en binari seria 6. 100 seria 4. El mateix amb el món. Així que el número al qual obtindria per al permisos per això serien 644. 

MIKE RIZZO: I si vostè pensa de nou a quan es va efectuar chmod alguna cosa, crec van donar en el conjunt de problemes de la exemple d'on es podia fer alguna cosa com chmod 644 i després el nom de l'arxiu. El 644 llavors, ara es pot veure directament d'on ve això. Així que espero que això fa que una mica més clara. 

I a continuació, per a major claredat de quin tipus - oh, sí, aquí això és nou. Així que 600 llavors no seria més que l'exemple ens vam donar per vençuts aquí on el propietari té permisos de lectura i dreta mentre que el grup i el món no tenen cap permís per accedir a l'arxiu. 

TOMAS Reimers: I després tenim una ràpida llista de permisos comuns. Així directoris et vols chmod realitat 711. A part ràpida - per a un directori per tenir permís d'execució significa poder per obrir el directori. Les imatges, CSS, JavaScript, HTML necessitats 644, ja que, bàsicament, el món necessitats permisos de lectura. 

I PHP, el que vostès han vist encara que no estarem parlant d'ell estrictament normalment es va efectuar chmod amb permís 600 perquè s'executa amb els permisos del propietari. Almenys en l'aparell. 

MIKE RIZZO: Així que si no ho fa específicament especificar el tipus d'arxiu que vulgueu a la configuració realitat aquesta presentació - hem tingut un problema amb això perquè tot el que no es va efectuar chmod correctament - vostè va a aconseguir, una mena de, un error prohibit que el lloc web en realitat no tenir permís per accedir a qualsevol arxiu desitja que s'accedeix. I, per descomptat, que es pot fixar - com en el conjunt de problemes - en canviar permisos correctament. 

TOMAS Reimers: I l'últim comentari per desenvolupament ràpid local és - ens portat això, però l'únic que volíem per portar de nou - si vostè demana un servidor - hoste tan local, per exemple, com o el que sigui. - i no s'especifica un arxiu concret, l'arxiu que l'equip va per demanar que es diu index.html. O si això no existeix, index.php. 

Genial. Així que això és només una recapitulació de tot, amb sort, que hem cobert en secció, i una conferència, i fins al moment en CS50. I ara anem a començar a parlar biblioteques sobre concret. Biblioteques de JavaScript i CSS per a aplicacions web. 

Així que una de les raons per la qual tenim ràpida biblioteques és la programació - hi ha un munt de problemes en programació, que segueixen apareixent una altra vegada, i una altra, i una altra. Vostè pot notar que una gran quantitat de llocs web necessita la capacitat de tenir desplegables menús, per exemple, o necessiten la capacitat per tenir una tecla molt estàndard estil, que pot no ser la cosa més fàcil. Ara que comença a entrar en HTML, adonar-se que els botons poden realment mirar molt lleig si no facis res. 

Així que un munt de gent ha escrit anomenat biblioteques. I en aquest context, són també anomenat marcs. Anem a utilitzar el 02:00 indistintament. I el que són és que són bàsicament peces prefabricades de codi - ja sigui CSS o JavaScript - de portar una gran quantitat de la equip que té en la codificació. 

Així que predefinir un munt de classes o pre-definir un grapat de funcions per El cas de JavaScript, que pot trucar més tard. I llavors vostè pot, més o menys, obtenir l'accés a aquest codi sense haver de fer res. Un exemple de la biblioteca era CS50.H. Aquesta va ser una biblioteca que vam donar a vostè de nou en la primera setmana, el que va permetre que facis coses així GetInt i GetString sense haver d'escriure qualsevol codi manualment. 

MIKE RIZZO: Molt bé. Així que aquí, igual que hem hagut d'incloure en la nostra c arxius els diferents biblioteques, també cal incloure en arxius del nostre HTML diferents biblioteques. Per exemple, si volguéssim incloure una biblioteca de JavaScript específic aquí, potser, un que hem escrit nosaltres mateixos, ja que està allotjat de forma local anomenats script.js, només utilitzar aquesta notació. 

Així que tenim iguals tipus guió JavaScript font iguals JavaScript.js. I si vostè pensa de nou al seu CS50 problema financer establert, si un mira a header.php a la carpeta de plantilles, vostè ha d'haver vist alguns d'ells inclosos. Així que aquest primer - els scripts - és que inclou una biblioteca de JavaScript. Inclou una biblioteca de CSS és una mica diferent. 

Aquí, en lloc de la seqüència de comandaments ETIQUETA vostè necessita l'etiqueta d'enllaç. I a continuació, el tipus de text CSS és una mica diferent. No sempre ha d'incloure full d'estil rel. Però jo crec que és, en general, bones pràctiques. 

I, finalment, el HREF, que Probablement va veure en els seus ATAGs per vincular en diferents baules només especifica les l'enllaç d'on trobar això. Per exemple, si volguéssim vincular un diferent de la biblioteca - diguem - que va viure a styles.css. I volíem vincular que en això és allotjada a la web, volem copiar això. I després enganxar en qualsevol que aquí tenim al seu lloc. 

TOMAS Reimers: OK, esperem que pugui nois ja estan familiaritzats amb la forma de vincular CSS. Havies de fer això en el seu últim conjunt marró. JavaScript, alguns de vosaltres potser tenir una mica d'experiència amb. Alguns de vostès potser no. 

Així que per ara, saber que un arxiu JavaScript és molt semblant a un arxiu CSS a el sentit que es pot enllaçar amb ell o que es poden incloure de forma interna. I és que permet a les coses de guió. I anem a caminar a través d'un mica de JavaScript més endavant. 

Així, utilitzant una biblioteca - una vegada que s'ha inclòs ell, és com simple com literalment trucant al funcions o l'addició de la noms de classe a la mateixa. L'última cosa que volem parlar aproximadament, en termes de la biblioteca - i això és més d'una nota tècnica - és la concessió de llicències de codi obert. Així que quan vostè troba aquestes biblioteques reals, vostè pot estar pensant en Preguntes com està bé que només sóc utilitzant el codi d'una altra persona, especialment perquè això és una cosa que en gran mesura Et vaig dir que no ho fan en aquest curs. 

Així que en el cas de les llicències de codi obert, molts dels desenvolupadors - una vegada que han escrit una biblioteca, que pensen que podria ser útil a altres persones - el publicarà a la web i donar-li una llicència. I una llicència bàsicament diu que sóc la present la concessió de permisos a altres les persones a utilitzar aquest programari amb el següent tipus de estipulacions. 

Hem inclòs un enllaç a un bon lloc per ajudar a entendre les llicències d' cas que estigui en ells. Estipulacions comunes són coses com us convidem a utilitzar la meva biblioteca per sempre que es nomeni a l'autor. El convidem a utilitzar la meva biblioteca sempre que quan es trenca no em culpis. El convidem a utilitzar la meva biblioteca tant de temps que no l'utilitzi per fer diners per si mateix. Aquests són tipus de comú estipulacions. 

Per a aquest projecte final CS50, que no ha de ser súper rellevant perquè els projectes que vostès SEU ÚS probablement més aviat, una mena de, conegut. Però quan realment sortir a l' món i començar a utilitzar les biblioteques, les quals poden o no ser tan ben implementat com alguns dels més populars que estem estarà passant. És bo ser capaç d'entendre aquestes llicències ja entendre el que signifiquen. I tornant. 

MIKE RIZZO: OK. Així que ara passar a exemples de CSS real. En aquest punt, fins al moment, és possible que no s'han trobat amb això. Però és possible que hagi trobat en la seva vida quotidiana en què alguna cosa que es veu d'una manera en un navegador podrien no tenir el mateix aspecte forma en un altre navegador. 

Això es diu navegador navegador compatibilitat. I cada vegada s'està tornant més i més d'un problema, especialment pel que navegadors prenen més i més llibertats per posar en pràctica les coses com ells volen. Així que per superar això, hi ha en realitat és una gran biblioteca anomenada Normalize.CSS. 

TOMAS Reimers: Es van incloure en el vincle. En aquest punt, és útil si vostè té el seu ordinador portàtil a la que hi ha buscant en el lloc. I estem donant això a vostè dret ara simplement perquè la final CS50 projecte és en realitat va a demanar-li que implementar de manera similar i per mitjà dels navegadors. 

Així que per mantenir a la part posterior de la seva el cap, això és una biblioteca meravellosa perquè serà, més o menys, normalitzar les coses. A Firefox, una cosa pot mostrar com un píxel cap a l'esquerra. I després Chrome pot decidir que en realitat el que volia dir era 10 píxels a l'esquerra. I voleu estandarditzar això. Normalitzar farà realment una molt bona treball d'assegurar-se que el seu lloc té el mateix aspecte en tots els navegadors. 

MIKE RIZZO: Així que si volíem simplement feu clic al vincle molt ràpid i l'espectacle el que sembla, vostè pot descarregar usant el gegant botó Descarregar. O us animo a llegir més sobre això fent clic en aquest enllaç a la part inferior cantonada dreta. 

TOMAS Reimers: I si en realitat feu clic a Llegir Més just allà - feu clic a la font en GitHub - que realment va a veure el codi obert atorgar una llicència a LICENSE.md allà. I vostè veu aquí és la llicència MIT molt popular. Un cop més, si vostè llegeix a través del text, vostè serà capaç de trobar en el lloc vam fer referència abans i ser capaços de entendre sense haver de llegir a través de l'argot jurídica. 

MIKE RIZZO: OK, molt bé. Així que això és Normalitzar. Volíem donar-li que realment ràpidament. Oh, tens alguna pregunta? 

AUDIÈNCIA: Així que quan es descarrega, es només has de seguir el codi que tenen sota el botó de descàrrega? 

TOMAS Reimers: Sí, pel que al rebre - 

MIKE RIZZO: Oh, això és un gran punt. Per tant el dubte era com fer que en realitat descarregar? Així que si fem clic a l'enllaç, veiem que en realitat apareix en el codi font. Així que per fer això, el que hem pogut no és simplement feu clic a Desa com. Guardar com i que en cas de obrir un arxiu. I llavors podem optar per guardar com normalize.CSS. I després caldria vincular a - 

TOMAS Reimers: De la mateixa manera que relacionar en qualsevol altre arxiu. I una vegada que ho enllaç en, el que és genial sobre Normalitzar és en realitat va a fer-se càrrec de tot el dur treballar per si mateix. El que vol dir que vostè no ha afegir cap classe. 

No ha de fer res estrany. Es normalitzarà sense tu fer res més. Sí, vostè ha de incloure. Google Chrome no està responent. 

Només una ràpida costat - Em vaig adonar que ens va ficar en això. La resta d'aquesta presentació és serà un resum ràpid. Una enquesta de les biblioteques. 

Bàsicament, el que són. El que ells fan. Com són útils. Com és possible posar-les en pràctica. Si vols començar a mirar-los, seguint al llarg, i de la lectura a través d' ells, jo els animo a que. 

Com a alternativa, us convidem també a començar a descarregar ells i que inclou en un espectacle només per veure el que sembli o què fer si té seu ordinador portàtil al davant de vostè. Si no és així, us convidem a seguir ens escolta parlar. Seguirem parlant. I tenim temps al final, amb sort anem a realment entrar en mostrant el que algunes d'aquestes biblioteques ser similar. 

MIKE RIZZO: Cool. Molt bé, així que ara anem a parlar sobre Font impressionant. 

TOMAS Reimers: Awesome manera de font és una lloc realment fantàstic, especialment per a aquells de nosaltres que són menys artísticament talentós. Ignorant el Nom de font impressionant, dóna que un munt d'icones, que són molt útil. Així que un munt de vegades que es va a implementar un ICON és possible que vulgueu com un bonic x el que es pot tancar alguna cosa. 

O pot ser que vulgui algun tipus de botó Edita amb un dibuix a llapis com tothom té. I aquí és quan s'assabenta que dibuix de les icones pot ser molt tediós i difícil. Font impressionant - si en realitat anar al lloc - et dóna un munt d'icones sota les icones de la part superior. Sí, només la part superior. Se li donarà una gran quantitat d'icones gratis. 

Així que aquí veus que tenim coses com un asterisc, bars, un llamp, 1 calendari, un insecte, un llibre, etc. Això pot ser molt útil. La forma en què s'inclou aquest és incloure literalment, l'arxiu CSS. I després d'haver inclòs l'arxiu CSS, el que pot fer és crear un etiqueta anomenada I. satands TI per Icona amb la classe FA de peu per a Font impressionant. I després, qualsevol que sigui la classe que vostè desitja. 

Així que si volia una icona d'aquest plus quadrar aquí, jo li donaria que la classe FA. I llavors guió FA més quadrat guió. 

MIKE RIZZO: Cool, OK. 

TOMAS Reimers: I llavors, l'última CSS biblioteca que volem aconseguir a través de nosaltres tractant de mantenir el mínim sobre CSS biblioteques, perquè ens adonem de la títol d'aquesta presentació és JavaScript Biblioteques. Però pensem que puguem, així presentar-te a altres biblioteques mentre parlàvem sobre les biblioteques. 

És Google Web Fonts. I el que Google Web Fonts li permet fer és afegir les fonts al seu lloc web, que és una manera molt fàcil de fer-ho bonica i distingir el conjunt de de tots els altres és si té una font agradable o si es té un bon col · lecció de fonts. Google Web Fonts és agradable a diferència d'altres biblioteques en el sentit que és un instal · lació realment guiada. 

Així que si vostè segueix l'enllaç, és google.com / fonts, crec. Si segueix això, pot triar el tipus de lletra. Vostè pot triar a l'esquerra gruix, inclinació, etc. I després, un cop triat un, pot fer clic en l'ús ràpid. Aquí mateix. A baix a la dreta de la caixa. 

I després, desplaceu-vos cap avall. En primer lloc, et donen la CSS que cal enllaçar realment a ella. Està just allà. Vostè pot simplement copiar i enganxar aquest polz I el bo d'això és que en realitat no tan sols necessita descarregar l'arxiu. 

Què es va a fer és que va vincular a la versió de Google de la mateixa. Així que de tornada al que significa això. Això vol dir que quan un usuari descàrrega teu arxiu - descàrrega teva pàgina HTML - el seu HTML la pàgina es va a fer referència al fitxer. 

Així doncs, l'equip va a veure, oh, està allotjat a google.com en lloc que en theirsite.com. Déjame anar a preguntar Google per a aquest arxiu. I després, es va a incloure gairebé com si es tractés d'un part del teu propi lloc. 

TOMAS Reimers: Cool. I una vegada que s'inclou que, a continuació, a incloure'l al teu CSS, li dóna la línia real. Així s'estableix la família de fonts de propietat igual al nom de la seva font. 

MIKE RIZZO: OK. Així que acabem d'acabar amb CSS. I alguns de vostès podrien estar pensant, bé, vam tenir una mica de CSS en CS50 Finances. Però biblioteca CSS va ser d'arrencada. En realitat ens incloem Bootstrap una mica més endavant sota JavaScript perquè amb la biblioteca Bootstrap CSS també ve amb un munt de JavaScript que Bootstrap o Twitter - qui va fer Bootstrap - s'utilitza per gestionar la totalitat del seu CSS. 

TOMAS Reimers: Algú té alguna preguntes fins ara sobre CSS en general? Estem bé? Impressionant. 

MIKE RIZZO: Awesome. 

TOMAS Reimers: Així es mou en JavaScript. 

MIKE RIZZO: Així que volia parlar sobre jQuery, per començar. Algú ha sentit parlar de jQuery abans o usat? Sí, un parell? Així que si vostè acaba de treballar amb nadius JavaScript es trobarà escrivint un munt de selectors llargs molt. Llavors, què jQuery fa és que proporciona un bonic embolcall per el codi JavaScript llenguatge que li permet seleccionar fàcilment i manipular diferents elements dins del model d'objectes de document de la la pàgina web o el DOM, que crec que vostès han sentit parlar de en donar una conferència en aquest punt. 

TOMAS Reimers: Si vostè no ha sentit parlar de o la conferència si no has vist però, és el Document Object Model bàsicament com es representen les coses. Així HTML manera s'assembla a un arbre quan en realitat el arribarà. Vostè té l'element HTML a la part superior. Vostè té el cap i el cos. 

I després, dins de que té tota la resta. Això es coneix com DOM - Document Object Model. Així que un model que representa els objectes en el document és una manera fàcil de pensar sobre això. I un de la gran cosa sobre jQuery és el que realment fa de desplaçament i que la manipulació d'elements dins de que increïblement simple. 

Així simple, de fet, que la majoria dels JavaScript biblioteques o si no l' majoria, la gran majoria dels vostè veurà realment requereixen jQuery per que puguin funcionar a si mateixos simplement perquè si vostè no té jQuery, que seria perdre molt temps intentant trobar la manera de seleccionar cert elements i la forma de fer altres coses. I l'altra gran cosa sobre jQuery és que és transversal navegador compatible. 

Així que recordi de nou quan ens va dir que no tots els navegadors implementen coses de la mateixa manera? Això és cert fins i tot en JavaScript. I una de les millors coses de jQuery és que va a detectar l' i detectar el navegador mètode apropiat. 

Així que si vostè necessita per seleccionar un element, Internet Explorer podria dir que ets suposa que ha de fer d'aquesta manera. Firefox podria dir el correcte forma és d'aquesta manera. jQuery no li importa. Quan li dius a jQuery per seleccionar un element que s'adonaran de com és suposa que fer-ho dins del navegador de l' usuari està actualment en, i després fer d'aquesta manera. 

MIKE RIZZO: Així que no anem a parlar sobre l'ús de jQuery una mica. Igual que PHP, jQuery té una especial afició pel signe de dòlar. Així que trobareu que qualsevol jQuery - Bé, no tots. De vegades es pot substituir el dòlar signar amb la paraula jQuery. Però, en general, només perquè és més curta, cada vegada que vegi sent jQuery utilitzat serà amb un signe de dòlar. 

Així que aquí només estem mostrant un començament selector per a un element en el DOM. Aquí, tenim el signe de dòlar seguit per parèntesis d'obertura i després cita. I dins de les cometes anar els nostres selectors per als diferents elements. Igual que en el CSS, necessitàvem selectors per ser capaç d'aplicar estil diferents elements dins de la pàgina. Aquests diferents selectors tradueixen exactament en jQuery i JavaScript, en la seva major part. 

Així que aquí tenim un foo punt. Així que si vostè recorda de conferència, el punt només significa la classe. Així que estem seleccionant element amb la classe foo. Així que si segueixo endavant i obrir els nostres JavaScript consola d'aquí molt ràpid simplement demostrar que, si jo només escric la signe de dòlar, veiem que es tracta d'alguna funció que apareix. I s'acaba de definir per jQuery. 

TOMAS Reimers: Per a aquells de vostès desconegut, la consola és una eina dins de Chrome, que li permet, bàsicament, executeu JavaScript a la pàgina actual. Això es pot trobar molt útil quan en realitat estàs depuració i ha de ser, què és el corrent valor d'una variable global o el és alguna cosa més? És com GDB, amb l'excepció que en realitat es pot manipular els elements de la pàgina amb que d'una manera molt més fàcil. I també no ho fa, bàsicament, comproveu amb vostè abans de fer res. 

Així que, no GDB podria ser, oi Segur que voleu executar el següent pas? La consola està en real. Així que la pàgina web és la prestació i fent el que està fent, la consell del també corrent al costat d'ell. I vostè pot posar codi d'imputar a aquesta consola, que executar-se en la pàgina. 

MIKE RIZZO: Així que per entrar a la consola, Suposo que hauria breument esmentar com fer-ho. En els últims problemes que vostè pugui tenir usat Chrome d'inspeccionar element funcions o visualització de la pàgina d'origen - i aquests són accessible només per dret clic a la pàgina o una específica element i fent bé inspeccionar element o vista de la pàgina d'origen. També podem accedir a JavaScript consola directament per triar inspeccionar element. Consola Així que vostè acaba de colpejar a l'extrem dret. 

També podeu també haver anat a la cantonada superior dreta, que es talla en aquesta pantalla on compta amb les tres barres horitzontals. I cal baixar a les eines i a continuació, la consola JavaScript aquí, on pot veure - almenys en Windows - l'accés directe és el Control Shift J. Llavors si volíem per seleccionar un element en aquesta pàgina, igual que jo vaig mostrar abans, fem la mostra de dòlar parens obertes i després cita. 

Una cosa interessant és, en general, Les cometes simples i dobles intercanviable. Així que molta gent només ha d'utilitzar un sol cometes perquè són més ràpids d'escriure de cometes perquè no és així ha de mantenir premuda la tecla de majúscules. Així que vaig a fer això ara mateix. 

Així que vull seleccionar alguna cosa amb classe. Container, només perquè sé que és cosa que està en la nostra la pàgina web en aquest moment. I vaig arribar a Enter. I podem veure que la va seleccionar. Per tant, es mostra que retornat aquest objecte. Així que aquesta és una selecció bàsica. Si volem manipular en realitat, vostè hauria de trucar a alguna cosa en què la selecció, la qual entrarem en més endavant. 

TOMAS Reimers: Així que només per veure que més en profunditat, això no és diferent que les crides a funcions que vam fer en C. El nom de la funció aquí és un mica estrany. És signe de dòlar. És només un nom d'una funció. No hi ha res especial en això. 

Tenim parèntesi oberts. Llavors, tenim el nostre un argument, que en aquest cas passa a ser una cadena, que és un selector per a això. I després, tenim la nostra parèntesi tancat. Això és tot. 

No és que molt diferents. Encara que, que té un aspecte molt estrany. I això pot ser, més o menys, un escull apuntar per a un munt de gent. 

MIKE RIZZO: Així que de manera similar, si volíem per seleccionar un element que té un ID, Ara volem seleccionar per ID en lloc de la classe. Seria una cosa similar en el qual acaba de fer el signe de sostingut per ID. Així que estem seleccionant aquí tot elements que tenen bar ID. 

TOMAS Reimers: I això s'estén. Això CSS s'estén. Igual que en el CSS, es pot seleccionar tot enllaços, que tenen la classe foo. Aquí, és la mateixa cosa. 

Vostè podria fer a.foo, que seleccionaria tots els vincles amb la classe Foo. Vostè podria fer una barra afilada, el que faria seleccioneu l'enllaç amb la barra d'identificació i així successivament i així successivament. Qualsevol selector CSS és una vàlida selector de jQuery. 

MIKE RIZZO: Si. OK, així que ara entrarem en una mica de manipulació que podem fer amb nostra jQuery. Així que jQuery té un tipus particular de notació en el qual només utilitzem un punt al final. I vostè pot pensar en això com en C com teníem diferents estructures. I per entrar en aquestes estructures, ho faria utilitzar un punt per entrar-hi. 

És a dir, una cosa així, una cosa similar. Només que ara tenim funcions dins d'aquest selector que podem recórrer-hi. Així que aquí, el primer exemple es pot veure és un selector CSS. I, bàsicament, el que fa és s'aplica el primer element CSS per a aquest cosa que ha seleccionat - aquest element que ha seleccionat - amb el valor que. 

TOMAS Reimers: Així que una traducció fàcil de això seria si jQuery, bàsicament, acaba de prendre foo. I després, en CSS, va dir, el vermell i tancar. És la mateixa idea. El que es fa és que està seleccionat tots els elements Foo. I llavors s'aplica. Més o menys, el color de propietat és igual a vermell. 

MIKE RIZZO: De la mateixa manera, també podem alterar el contingut real del que és que mostra en el codi HTML de la pàgina, que és realment genial, perquè significa que el seu pàgines web ara poden ser completament dinàmic i no han de ser estàtica que imprimeixi usant PHP en el començament de La pàgina s'està carregant. Així que aquí, si volguéssim canviar la HTML real de la pàgina, ho faríem ara cridar a la funció HTML, el qual només inserits el que especifiquem a aquest element que hem seleccionat. Així que aquí estem seleccionant element amb foo classe i després dient que és HTML ara és hola món. 

TOMAS Reimers: I quan es pensa en Quines són les aplicacions útils de això, això CSS un, el primer que vostè pot començar a pensar és fins i tot en termes de menús desplegables. Vostè podria començar a fer coses com, quan un usuari es desplaça sobre la part superior of a down drop, vols fer la part inferior visible. Cert? 

Així que en CSS, tenim propietats per fer alguna cosa visible. Coses com la pantalla de còlon cap faria invisible. Bloc de visualització faria visible. O fins i tot si vols anar més simple, que tenir coses com iguals visibilitat visibles, i la visibilitat és igual ocult. 

I es podria començar a aplicar les coses com desplegable dreta menús després de passar per la idea de com podeu imaginar quan aquest s'obri, que sortirem de manera molt breu. Però podem començar a veure aplicacions d'aquest. En un sentit similar, si anés a tractar i posar en pràctica, diguem, una xerrada motor i vol fer una mica de bombolla de diàleg sempre que vostè has té un nou missatge, una vegada que el nou missatge, vostè pot fer una mica de bombolla de diàleg apareixerà de manera alterar el codi HTML de la pàgina, a la dreta? Afegint que la bombolla del discurs addicional amb el text addicional en aquest país. Sí? 

AUDIÈNCIA: Així que vostè integrar això dins el codi HTML, en una mena [Inaudible]? 

MIKE RIZZO: així. Sí, anem a arribar a això aquí a una estona. Sí, és una semblança poc a PHP. No és exactament similar. 

Una bona distinció de fer és el que aquest en realitat està editant quan editem la pàgina, ja que no serà editant el fitxer real que guardat al servidor perquè el món no haurien de tenir permís per editar els seus arxius. Això és només editant el que està en la pàgina i el que es mostra en el navegador. Així que si anés a tornar a carregar la pàgina després, dir, l'eliminació d'alguna cosa com el veiem que podem fer amb l'anomenada remove, això seria tornar a aparèixer. 

TOMAS Reimers: Així que una manera de pensar en això és si jo sóc el teu ordinador i Mike és, més o menys, el servidor. Què passarà és que vaig a Pregunta als Mike, escolta, puc tenir una còpia de aquesta pàgina web? I ell em donarà una còpia. 

No, no és l'original. És només una còpia. I llavors seria com, oh, hi ha codi JavaScript que hi. Clarament, hauria editar el pàgina sigui així. I estic editant la seva còpia. 

Però això no efectuar la còpia real. I si jo fos a preguntar de nou actualitzar la pàgina, - Hey, puc tenir una altra còpia neta - ell va a donar-me una altra còpia neta. I llavors, jo faré el mateix com, oh, això JS aquí que diu editar aquest. I jo seguiré fent això. 

MIKE RIZZO: Així que una cosa realment fresca que es pot fer amb jQuery és realment afegir diferents tipus d'animacions a la pàgina. No sé si alguna vegada has vist on vostè està tractant d'un farciment d'un formulari en línia i vostè no omple les coses correctament. Així que una petita cosa llisca cap avall a la part superior i li diu no ho hagin fet això correctament. Torneu-ho de nou. I llavors, potser fins i tot només lliscar cap amunt. 

Resulta que jQuery s'ha construït en funcions que fan tot això animació molt, molt fàcil. Així que no és en primer lloc l'esvaïment funció, la qual cosa vostè pot trucar en alguna cosa. I és una manera de canviar el CSS de aquest element en forma animada. Així que pren el que sigui element l'anomeneu fade out successivament. I després, canvia lentament de l'opacitat fins que s'apagui completament transparent. 

TOMAS Reimers: L'altra populars llisqui cap avall, el que farà alguna cosa sembla lliscar cap avall. Així que en el cas del menú desplegable, de nou, quan ens assabentem de la manera de detectar quan aquest s'ha mantingut per sobre, vostè podria dir-li a aquest fons part llisqui cap avall ara. I llavors, sembla lliscant cap avall. 

MIKE RIZZO: I llavors, si només tens algun tipus d'animació en compte que jQuery no necessàriament proporcionen. Per exemple, diguem que jQuery màquina li ofereix un tobogan cap avall i feu lliscar cap amunt. Bé, anem a dir que volia lliscar alguna cosa per l'esquerra o des el tipus correcte de com el CS50 pàgina principal fa cada vegada vostè va a un nou panell. A continuació, probablement haurà de aplicar per si mateix utilitzant la animar funció dins de jQuery. 

Així que de manera similar, que acaba d'animar. I després, dins d'ella que es necessita un Diccionari dels diferents valors que se suposa que has de passar. Així que aquí, si volguéssim animar l' element foo de tal manera que la seva amplada sigui s'expandeix o contreu a 80 píxels; depenent del que actualment és. Ens acaba de passar que, com l'argument en el seu interior. 

Animar també tenen alguns altres arguments que vostè podria passar, per exemple, la velocitat de l'animació que vols donar-li. I per fer això, jo només diria ràpidament Google jQuery animat. I després, la criança d'aquesta pàgina, vostè pot veure que té un munt de diferents propietats que pot aprovar-lo. 

I us animo - cada vegada que vénen amb alguna cosa que no ho fa saber o simplement vol aprendre més sobre una mètode particular que pot trucar en alguna cosa - Només Google. jQuery és extremadament ben documentat. I moltes vegades hi ha una gran quantitat de exemples que es proporcionen per a vostè. Si ens desplacem cap avall - fins a baix - que podem utilitzar, també. 

Un cop més, quan un desenvolupador es va en realitat per la molèstia d'escriure un biblioteca, en general volen algú a usar-lo. Per això, al costat va a ser una documentació. I que la documentació que generalment pot ser que es troba a la pàgina del projecte, que és per això li vam donar aquest lloc original en el principi, el que es vincula a la pàgines del projecte perquè pugui veure que la documentació. 

Normalment, la pàgina del projecte en el cas de [inaudible], va dir a la noms de les classes. En el cas de JavaScript, que dóna que el nom de les funcions. Per cert, si ens desplacem fins al cim, una nota lateral ràpida a les funcions és cada vegada que vegi una funció implementada així amb el disc parèntesi en el medi, el que significa que aquesta propietat és opcional. Només un mà a mà. He vist un munt de preguntes sobre això. 

Així que aquí podem veure que la animate té propietats com un argument necessari. I tota la resta és opcional. Nota al marge - vostè pot pensar en això, més o menys de, igual que les pàgines de manual. Les pàgines man són de documentació per a C i per a un munt d'altres coses, també. 

MIKE RIZZO: Així que hem après a canviar divers CSS a la pàgina, animar, i retiri afegir HTML. Però un dels realment més poderosa coses sobre JavaScript i especialment jQuery - el que li permet fer és respondre a diferents elements que succeeixen. Per exemple, aquí tenim un controlador d'esdeveniments. I això només vol dir que cada vegada que això esdeveniment ocorre, el fem servir en un de certa manera. 

Així que aquí, l'esdeveniment genèric jQuery handler és el punt en. I llavors, el primer que sempre és quin esdeveniment hauria estar escoltant. Així que aquí, és el clic que que estem esperant. 

TOMAS Reimers: Alternativament, vostè té en vol estacionari, el qual és molt popular. Així que de tornada al meu desplegables idea menú. Vostè tindria el de dalt en vol estacionari. I llavors vostè podria canviar això. 

MIKE RIZZO: així. I llavors, quan això passa, només executa aquesta funció que li donem com a argument i que alerta hola o hola. 

TOMAS Reimers: Així que en el cas de JavaScript, aquest és un lloc que hem de deslligar de C. Podem realment prendre funcions com a arguments. I hi ha un munt de molt complexes formes de fer això. Anem a promoure d'una manera, que és es pot definir el funcionar allà. 

Així que quan vostè està demanant una funció com un paràmetre, ets bàsicament definirà la funció a l'acte. I la manera de definir una funció en JavaScript que és literalment dir funció. Llavors, en general, el nom de la funció. Però mai farem referència a aquesta funció de nou. Així que ho deixem sense nom. 

A continuació, els parèntesis, a continuació, l'arrissat claus, i després el codi dins d'aquesta. Així entenem aquesta llauna ser una mica confús. Així que li donem la forma general d' el que és un controlador d'esdeveniments sembla a continuació, que es troba en els esdeveniments. I llavors, el codi dins d'això. 

MIKE RIZZO: Hi ha alguna preguntes sobre això? Això pot ser una mica confús la primera vegada que ho veig. 

TOMAS Reimers: Segur que vol obrir un arxiu i mostrar alguns jQuery en aquest moment? 

MIKE RIZZO: Sí, farem això. D'acord. 

TOMAS Reimers: Així que ara estem en l'aparell. I el que hem fet és que hem pres la la llibertat de crear alhora un index.html arxiu, que enllaça amb un arxiu JavaScript. I podem obrir el - si. Bé, fa dues coses. 

La primera és que es vincula a l'arxiu JavaScript. I veurem que fins aquí. Veiem que al cap de la Document HTML, en particular. Llavors veuràs que cal que, bàsicament, diem SRC, que significa font. I aquesta és l'adreça URL. 

Així que aquí es pot dir que hem inclòs jQuery. I també hem inclòs scripts. L'altra manera d'incloure JavaScript està que pot incloure un script en línia tag que tenim a la part inferior on es diu tipus de guió és el text de JavaScript. 

Així que estem dient, escolta, estem a punt d'incloure un script. I el tipus d'aquest guió és JavaScript, que és un tipus de text. Molt simple. 

MIKE RIZZO: Així que això, una mica, arriba a seva pregunta sobre com incloem JavaScript als nostres arxius, perquè quan ens havia PHP, farem alguna cosa com això. I després, tenim les nostres funcions de PHP - diguem que les poblacions fan alguna cosa amb que - va allà. No obstant això, ara tenim les etiquetes de script que nosaltres li donem, que en realitat són part del propi HTML, perquè no és fingint ser un fitxer HTML com si és en PHP, perquè si intenta anar a i mirar la font de la pàgina, veuràs aquestes etiquetes script en allà amb el JavaScript associat amb en què. 

Així que, si volíem escriure alguna cosa de JavaScript - diguem que volíem canviar el cos perquè en aquest moment no tinc qualssevol altres etiquetes que realment puc modifica més de cos. Diguem que volia canviar el CSS d'això. Així que seguirem endavant i el canvi el color de la mateixa a vermell. 

Així que guardi l'arxiu. Tornem a la nostra pàgina web, actualitzar, i ho fa de forma automàtica ja que no semblava que esperava en absolut, perquè nosaltres no estàvem escoltant per a un esdeveniment o alguna cosa per l'estil. 

TOMAS Reimers: Llavors, si ens remuntem a aquest presentar, en particular, - el codi HTML Arxiu - el que vas veure és que tenim - recordeu que aquest es carrega, més o menys, cronològicament. Així que tenim per primera vegada el cap. que carrega els dos arxius. Després ens dirigim al cos. I veiem hola món. Així que prestem hola món. 

I llavors l'últim que tenim és que tenim l'etiqueta script. Així s'executa l'etiqueta script perquè és si l'oculta d'esperar per a res. I això és el més bàsic forma d'executar JavaScript. 

Dit això, es pot posar el guió etiqueta a la capçalera només per demostrar aquest punt? I corre això. Anem a notar que no va canviar el color. I aquest és un dels problemes de JavaScript és que les coses es carreguen en un ordre cronològic. 

Així en el moment que aquest codi estava corrent, seleccionem - tornar - l'etiqueta body. El cos de l'etiqueta no existeix encara, perquè JavaScript està d'acord amb HTML. Així que el navegador és com selecte cos. Hi ha però, no hi ha tal cosa. Així que podem ignorar això. I seguim endavant. 

I a continuació, es defineix una etiqueta body. Però això mai s'actualitza. Així que quan l'aplicació de l'escriptura etiquetes, assegureu-vos de col · locar després que el cos de l'etiqueta. Següent diapositiva. 

MIKE RIZZO: OK. Així que canviem alguna cosa. Però no sembla que va respondre a nosaltres en absolut, perquè només una mica ho va fer tan aviat com es carrega la pàgina. Així que ara, en comptes de fer això, per què No afegim un controlador d'esdeveniments. 

Així que anem a fer alguna cosa per al cos de nou. I diguem que ho fem en - premeu. Anem a afegir una funció. 

Canvi Anem: TOMAS Reimers el seu color a vermell una altra vegada. Per què no? 

MIKE RIZZO: Sí, canviarem el seu "color a vermell una altra vegada. Està bé. Així que anem a carregar la pàgina. Bé, ens veiem - com s'esperava, no s'encén de color vermell encara. Però llavors podem seguir endavant i feu clic. 

TOMAS Reimers: I no tornarà de color vermell. 

MIKE RIZZO: I ho fa tornarà de color vermell com s'esperava. 

TOMAS Reimers: I podem veure com podem començar a construir molt bàsic interacció. Altres coses que pot voler fer és, si no volem que el cos el vermell, farem el codi HTML fons de color vermell. Just el que és el mateix CSS. 

I quan ho canviem, podem veure aquesta efecte molt dramàtic de canviar el pàgina sencera. Així que de nou, si vostè està implementant coses, vostè pot tenir un component que està destinat a ser fet clic a. Diguem que un botó Sortir i tot un altre component, que està destinat a respondre. Pel que li tregui una finestra quan això succeeix. 

MIKE RIZZO: OK. Només com un exemple - que no arriba a veure això abans - Només et vaig a mostrar el que sembla com quan ens amaguem alguna cosa. Així que vaig a seguir endavant i fer-ho lliscar cap amunt. 

TOMAS Reimers: Vols embolicar que en un text de paràgraf abans de fer això? 

MIKE RIZZO: OK. Sí, per què no ho fem només per podem seleccionar una mica més. 

TOMAS Reimers: I anem a donar-li una classe. 

MIKE RIZZO: Si. OK, així que anem a veure. En lloc de seleccionar el cos real ara, només vaig a seleccionar tot amb classe hola, que aquí estem només hi ha una cosa. Així que no hauríem haver de preocupar-se per això. 

Així que vaig a actualitzar-lo. Vaig a seguir endavant i feu clic. I, més o menys, va fer una diapositiva estrany cosa, que no semblava que atractiu. En general, es veuen bastant bé. Suposo, això - per alguna raó - no ho va fer. Vaig a fer un fos de sortida de manera es pot veure en això també. Molt millor. 

I després, si obro el JavaScript consolem de nou i volem veure el que sembla que quan ens vam caure polz Ara, només dic esvair-se en l'all. I s'esvaeix interactiu 

De la mateixa manera, en realitat podríem passar també un argument per atenuar o intensificar terme, que és, una mena de, la velocitat de la mateixa. Així que seguirem endavant i dir que volem d'anar a poc a poc s'esvaeixen polz Així que suposo que encara semblava bastant ràpid. Però va ser més lent que abans. 

TOMAS Reimers: I si vostè vol trobar Més informació sobre aquestes coses, de nou, només cal anar a la documentació de jQuery, que els hem donat, i llegim a través d'aquests. Documenten les seves funcions increïblement bé. 

MIKE RIZZO: OK. Així que suposo que tornarem a això. I podem parlar de la nostra pàgina passada. Bé, podem acabar amb Bootstrap. I després anem a obrir fins per a algunes preguntes. I si vostès tenen alguna idea que vol tractar de tirar cap amunt i veure si som capaços de posar-les en pràctica amb JavaScript ràpidament. 

Així que en realitat ràpidament sobre Som-hi, que va ser inclòs automàticament a el seu últim conjunt de problemes a la carpeta CSS i de fet vinculats al seu header.php. Pel que podria haver agregat classes que es defineixen dins Som-hi a la mateixa. I hauria llaurat de forma automàtica aquestes coses en conseqüència. 

TOMAS Reimers: Així Bootstrap és un molt cosa màgica desenvolupat pel poble a Twitter. I el que havia de fer era - abans dels llocs web eren realment dur per fer vegin bé, especialment quan vam tenir una gran quantitat de components comuns. Així que un munt de botons al web es veia igual. 

Una gran quantitat de camps de text es pot fer per veuen millor que el text estàndard camp vostè probablement sap de veritat webs antigues o molt mal fets llocs web, que només es veuen com literal quadres de text sense cap tipus de text ombra o qualsevol tipus de bon contorn. Així que el que va fer va ser Bootstrap va dir, bé, Tenim molts estils comuns. Per què no fem un conjunt comú de CSS i un conjunt comú de JavaScript com així, el que pot dissenyar com està i que pot donar a la gent coses com caiguda menús desplegables, el que pot donar a la gent coses com les maneres. 

Modal és el que apareix sobre la pàgina cada vegada que sigui estrictament parlant alguna cosa, que inhibeix encara més interacció fins que interactuar amb ell. Una cosa com això és, estàs segura que desitja eliminar aquesta cosa? Realment no es pot fer res més fins que diguis sí o no. 

Li va prendre tot això i empaquetar que junts i va dir, aquí anem. Ara la gent pot usar això. I vostè ho pot trobar a través d' en getbootstrap.com. S'inclou automàticament dins posa el teu últim problema. I tu ets més que benvingut a usar-lo en el seu projecte final. I si vols seguir aquest enllaç per obtenir Bootstrap. 

Veuràs aquí és la Bootstrap lloc CSS. Veuràs Bootstrap. I si es desplaça cap avall, veurà com descarregar, com instal, et cetera. 

MIKE RIZZO: I vostè també pot, curiosament, personalitzar a ser qualsevol tipus de temes que desitgi. Sé que això és una cosa que vaig fer per la meva projecte final quan vaig prendre la classe va ser personalitzar-lo. Una versió diferent de Som-hi que tenia un esquema de color diferent i diferents formes d'alguns coses diferents. Així que us animo a jugar amb això. És una mica divertit de fer. 

TOMAS Reimers: Mirant a través de la part superior de nou, és molt similar a la Font Lloc impressionant. Una gran quantitat de documentació s'iniciarà pel que sembla similar quan has vist prou d'ell. Així que aquí tenim la CSS component d'aquest. I veuràs com pot llaurar coses. Així que si vostè fa clic en taules, per exemple, immediatament pot fer un taula bastant simplement afegint la taula de classes a la mateixa. 

Les mateixes coses per als botons. Si vostè només ha d'afegir BTN classe i BTN defecte o BTN primària, pot aconseguir qualsevol d'aquests botons amb aquests estils pre-fets. I llavors, si vostè està buscant una mica més complex que la simple restyling el w ja tenen, al llarg de la fitxa JavaScript mitjançant la qual la part superior tenen un munt de components. 

Així que aquí tenim transicions, modals, menús desplegables, tabuladors i la informació sobre eines. Una informació sobre eines és el que apareix sota del seu ratolí quan passa alguna cosa. Popovers, alertes, botons i plegable acordions és el en general es diuen. Carrusels, que flip a través d'imatges com. 

Així que aquests són els components de Som-hi. Et animaria a altament anar a buscar en ells. Hi ha un component JavaScript i un component de CSS. Siéntase lliure d'utilitzar ja que li serviran. No aprofundirem molt en ells perquè sentim la documentació està molt ben fet. I sí. Té alguna pregunta sobre això? 

MIKE RIZZO: Així com són realment ràpida banda, el disseny d'aquesta pàgina web que ràpidament armem per aquesta presentació és realment es fa usant Bootstrap. Com podeu veure, quan fem clic sobre aquestes diferents pestanyes, mai en realitat són sortir d'aquesta pàgina index.html actual. Així que el que tenim és diferents divs dins d'aquesta index.html. I després, cada vegada que feu clic a un diferent pestanya, és només el canvi de que mostra d'un. 

Per tant, en conseqüència els posiciona, canvia el codi HTML de la pàgina perquè la fitxa actual està marcada com activa per apareix de manera diferent i es veu realment agradable. 

TOMAS Reimers: Així que això va ser tot fet sense escriure gairebé qualsevol CSS. També veiem una capçalera a la part superior, que els colors són per nosaltres. Però la veritable posada al part superior de la pàgina i fer que rotllo era Bootstrap. I a continuació, fins i tot per a una altra biblioteca - aquesta no és un que hem parlat, però un vostè pot buscar a Google si vols. Això es diu prettify.js. I serà sintaxi ressaltar el seu codi per a vostè, utilitzant tant CSS i JavaScript. 

L'última cosa que volem parlar de abans de divulgar de sortir a la món a mirar les biblioteques d'esbrinar com usar-los i, amb sort, llegir la documentació i trobar el que necessitat és com trobar biblioteques. Així que la primera és només som va a empènyer Google. Anar Google. 

Això és, literalment, el que fem quan ens hagi de fer alguna cosa que és Google. Existeix una biblioteca de JavaScript que em permet manipular el temps en un manera útil? Així que si jo sé que algun usuari que cregui un compte aquí, i aquest és el hora actual, com puc calcular el diferència amb què sense haver de calcular jo mateix? Així que això és realment una cosa comuna, JavaScript biblioteca temps. I aquí Moment.js-- el més popular. 

Si necessitem una biblioteca per manipular cosa així com el color per poder generar un munt de colors a l'atzar - possiblement, per generar una estil o alguna cosa - podríem buscar a Google una mena JavaScript biblioteca de colors. I estic segur que hi hauria una finestra amb un mil i un. El convidem a llegir a través d'ells. 

Així que la majoria de les coses - quan vostè els troba - van ser allotjat en un dels llocs que codifiquen host. Són alguns dels més populars. El més popular, per ara, és github.com. I si vas a GitHub en realitat és on va ser acollit Normalitzar. Així que si vol tornar a aquesta. Ensenya que. 

MIKE RIZZO: I això és en realitat on aquesta es troba allotjat també, si et vas adonar. 

TOMAS Reimers: Si. Així que si vas a Normalitzar i anar a la GitHub. Eren és això? 

MIKE RIZZO: Aquesta coseta gat és el símbol de GitHub. 

TOMAS Reimers: Oh. Així GitHub utilitza un mètode anomenat Git al codi de botiga. És que vostè no sap el que és o que t'espanta, això està bé. No ha de saber què és Git perquè GitHub té un botó de descàrrega a la part inferior dreta. 

L'altra cosa útil saber sobre GitHub és la majoria dels productes tindrà un em llegeixen. I si no tenen un lloc web, l' llegeixo em vaig a parlar sobre com es instal, com ho fa servir, el que fa, et cetera, et cetera, et cetera. El que bàsicament hem estat caminar a través. 

MIKE RIZZO: deixar de fumar d'Internet. 

TOMAS Reimers: Això està bé. Les dues últimes coses que volíem per parlar de - hem parlat de Git - és la solució de problemes. I aquest no és tan rellevant per a la el producte final, ja que és quan surti de 50. I quan et trobes amb productes la implementació de biblioteques o l'aplicació de el seu propi projecte, vas tenir preguntes o estàs anar a buscar a les preguntes. 

Una vegada més, buscar a Google. Això és, literalment, el que fem. Això va a sonar ximple. Però, literalment, que Google. I de nou, una de les primeres coses en general, es troba que és stackoverflow.com, que és una meravella preguntes i respostes a la vista. 

És meravellós, tant perquè es pot Publicació de les preguntes i cercar respostes sinó també perquè que ja té una gran quantitat de contingut ja es troba completa allà. Així que en general quan es busca a Google una programació qüestió en el primer parella colpeja és possible que ja hagi executat en ella durant els seus butlletins de problemes. 

I després, l'últim que realment breu és JSFIDDLE, que és - avui hem estat fent un munt de treball amb JavaScript HTML CSS. JSFIDDLE és una aplicació web, que bàsicament li permet prendre el codi HTML, SEU JavaScript part inferior esquerra, i la seva part superior dreta CSS. I llavors es pot crear un render ràpid d'ella i veure com interactua. És molt útil quan les persones estan tractant fer una prova de concepte com així és com ho faria fer un menú desplegable. Potser un destapi ràpid o el que sigui. 

MIKE RIZZO: Així que anirem endavant i feu clic a aquest. Una nota ràpida - mentre que, abans que fóssim fent en fer clic. Resulta que JCorey Corea també ha incorporat un en controlador d'esdeveniments clic que utilitza només perquè figura ets voldrà fer un munt de coses quan es vol alguna cosa, premeu. 

De la mateixa manera, també té un vol estacionari. Però per arribar a tot l'àmbit de aquests, una ullada a la jQuery documentació i fer-ho. Vaig fer alguna cosa estúpid aquí. 

TOMAS Reimers: Així que tinc una molt ràpida programa d'aquí, que diu botó de clic. Llavors tenim un bucle for. Per i és menor que 404. Només va a aparèixer aquests missatges d'alerta. 

MIKE RIZZO: I quin va ser el codi 404 es va posar en HTML? Recorda algú? No s'ha trobat, a la dreta. Chrome també va afegir aquesta ordenada cosa on es pot - 

TOMAS Reimers: Perquè la gent com Mike va començar a fer això molt i molestar els usuaris, la qual cosa permet a veure info. 

MIKE RIZZO: Si. 

TOMAS Reimers: Tenim alguna pregunta sobre això, sobre JavaScript biblioteques, la recerca de biblioteques o mirades el desenvolupament web com en el món real? Estem corrent contra el temps. Així que no estic segur que anem tenir temps per posar en pràctica si no és realment ràpid. Estem bé? 

MIKE RIZZO: Qualsevol cosa que vostès li agradaria per veure realment ràpid, com, en dos minuts o menys? 

TOMAS Reimers: Qualsevol cosa podem aclarir? Com escriure en - 

AUDIÈNCIA: [inaudible]? 

MIKE RIZZO: Sí, així que això és - 

TOMAS Reimers: Vostè només pot colpejar Control-O en el lloc web. 

MIKE RIZZO: Oh, no sabia això. 

TOMAS Reimers: Jo crec, si. Control-O. Sí 

MIKE RIZZO: Oh, així que aquesta és la codi de la pàgina web. Però si realment voleu descarregar el nostre arxius i tot, es troba allotjada en github.com 

TOMAS Reimers: retallar meu nom - Tomas Reimers - slash Seminari de guió CS50. 

MIKE RIZZO: I vostè pot trobar de tot allà. 

TOMAS Reimers: Això és el que GitHub sembla, per cert. Així que de nou, quan es veu una font oberta projecte, en general, que serà una lectura jo aquí que vostè pot llegir. I si tornes, et donaràs compte que vostè té el zip de descàrrega, que li permeten descarregar la font codi per a incloure la producte en la seva pròpia cosa. 

MIKE RIZZO: Sí, i si sol clic en les index.html molt ràpidament - 

TOMAS Reimers: Veuràs aquí hi ha la codi font del nostre lloc web. 

MIKE RIZZO: També, em vaig oblidar d'empenta dret abans de la gran taula que inclosos, però també hi ha una taula de chmods que es van incloure només per la seva claredat. Però si ens desplacem fins al fons de la inferior, en realitat no ens fem molt tant amb el codi JavaScript coses en absolut amb això. És exclusivament a partir de tot el altra cosa que el que teníem. 

Així que gràcies nois per venir i escoltant. Esperem que aquest era molt servicial. Si vostè té alguna habilitat relacionada preguntes o simplement vol parlar Què més com el que altres coses interessants es pot fer amb JavaScript, ens encantaria parlar amb vostè. 

TOMAS Reimers: Si vostè té una pregunta sobre el seu projecte o si això pot ser rellevant, probablement anem quedem una mica després d'aquest. Però a part d'això, tenen un bon cap de setmana. 

MIKE RIZZO: Sí, gaudir. Ens veiem nois. 

TOMAS Reimers: Ens veiem.