Tip:
Highlight text to annotate it
X
>> ROGER ZURAWICKI: Hola a todos.
¿Puedo llamar tu atención?
Gracias, chicos.
Hoy quiero hablar de Meteor.
Se trata de un marco de JavaScript.
Vamos a ir a través de cómo se puede hacer que las aplicaciones web muy interesantes.
>> Antes de entrar en JavaScript, sólo quiero decirles que ustedes que esta voluntad
ser - que tendrá una tarde piece Este semestre.
Debe ser acerca de JavaScript.
Creo que [inaudible] es primero ir a cubrir el PHP cosas HTML web antes de que
mover a JavaScript.
Y en CS50, JavaScript es considerado como un código de cliente.
Por lo tanto, sólo se ejecuta en el navegador web.
>> Pero gracias a los recientes avances en tecnología, ahora hemos logrado ejecutar
JavaScript como un servidor.
Así que esto ha creado una muy cool marco porque ahora se puede escribir
legítimamente el mismo código para los el cliente y el servidor.
Y al definir las funciones de su servidor, el cliente puede llamar a los
mismas funciones.
Y eso hace que sea mucho más fácil.
Mientras que antes, si está usando PHP en el servidor, JavaScript en el frente
final, tienes que escribir una función PHP y luego una versión de JavaScript de la
misma función para hacer el mismo tipo de trabajo.
>> Así que antes de empezar, quiero a mostrar una demo de lo que
Meteor puede hacer por usted.
Les voy a mostrar la demo, que es lo usted será capaz de crear por el
final de este seminario.
Sólo vamos aquí.
Esta es una aplicación la tabla de posiciones.
Se basa en realidad fuera de el ejemplo Meteor que te da.
>> Meteor es muy agradable porque cuando usted instalarlo como un paquete, usted puede
básicamente, jugar con estos cuatro demos.
Y la tabla de posiciones es la primera de estas demostraciones.
Después del seminario, os animo a todos simplemente explorar las otras demos
porque yo creo que son muy cool, y te muestran el poder de Meteor.
>> Entonces, ¿qué es esto, esto es alojado en la tabla de posiciones.
Esto es sólo francamente una lista de nombres.
Y usted puede seleccionar a las personas.
Ellos se vuelven amarillas.
Y entonces usted puede dar los cinco puntos.
Y te darás cuenta de que la lista es ordenada porque como me entrego más
y más puntos, ahora estoy en la parte superior.
Así que aquí es donde empezamos.
>> Y lo que va a ser capaz de tomar distancia de este seminario es un poco más
características que he añadido a la tabla de posiciones.
Vamos a estar cubriendo cómo, así como añadir cinco puntos a un jugador, podemos
eliminar jugadores, podemos añadir nuevos jugadores, y podemos elegir cómo queremos
para ordenarlos.
Y estas son todas las llamadas a la API muy fácil Meteor que ofrece para usted.
También tiene una característica aquí para seleccionar al azar las puntuaciones.
>> Así que lo que es realmente bueno de esta es que ustedes pueden realmente
todos van al sitio.
Lo pondré en el texto más grande aquí.
Uno de los radicales-plomo erboard.meteor.com.
Y cuando ustedes van al sitio, debe ser capaz de editar el sitio, y
todas sus ediciones serán visibles para todos los demás.
Así que usted puede - ¿Están todos capaz de conectar con el sitio?
Así que jugar un rato con él.
Ve y empezar a borrar algunos nombres.
Vea lo que sucede.
>> Así que ya ve todo el mundo puede jugar.
Esto es sólo la seguridad predeterminada modo para Meteor.
Ya ves que todo el mundo puede cambiar los datos de cada uno.
No se preocupe.
Meteor tiene seguridad.
Esta es una práctica muy fácilmente función, donde se puede configurar usuarios
y los inicios de sesión.
Pero en este momento, cualquiera que visita el sitio puede darse a sí mismos ya que muchos
señala que quieran.
Así que siempre es así porque este es una forma divertida de empezar.
Y entonces sólo tendremos que hablar acerca de los detalles, cómo
Meteor hace posible.
>> Así que voy a cubrir lo que es Meteor, y entonces sólo tendremos que necesitamos para cubrir el
dos requisitos previos que CS50 no ha cubierto lo suficiente.
Pero para el final del término, debe sentirse cómodo con HTML y
JavaScript para conseguir realmente sus manos sucio trabajo con Meteor.
Y yo creo que es sólo una gran manera para incluso menos cómoda a los estudiantes a hacer
proyectos finales porque pueden realmente permanecen en un idioma, y que llegan a
ver los cambios de su trabajar de inmediato.
>> Así que esto pase de diapositivas, sólo algunos de los principales tecnologías que Meteor JS
da a usted.
Meteor no es una nueva tecnología en su propio.
Es realmente un conglomerado de todas estas cosas diferentes
tenemos en Internet.
Así como HTML, CSS, JavaScript, nos tienen algunas tecnologías como Node.js,
que es lo que le permite ejecutar JavaScript en la parte final de su
servidor, así algo de JavaScript bibliotecas, como jQuery, subrayado.
>> Todo esto le resultará familiar a que para el final del semestre.
Y nosotros también llegamos a usar una base de datos llamada mongoDB, que es una realidad
popular base de datos ahora para estas nuevas startups.
Usted puede pensar que es como MySQL, pero funciona muy bien con el lenguaje Java.
Y hay algunas otras tecnologías aquí y muchos más que no he enumerado
que toda la interfaz realmente muy bien con Meteor.
>> Tengo que poner esta diapositiva porque a veces me da la confusión acerca de esto.
Meteor es sólo JavaScript.
No es PHP.
No es Ruby on Rails.
Así que si usted escribe el código, si quieres escribir un proyecto Meteor, que realmente
no puede utilizar el código Ruby.
¿De verdad no utiliza PHP.
>> Si bien vamos a ver que las diferencias en código y sintaxis podrían no ser que
diferente, quiero destacar a usted que Meteor, todo lo que el código es
sólo en JavaScript.
Y todo lo que usted muestra a el usuario será HTML CSS.
Pero usted no está realmente utilizando cualquiera de los demás idiomas que la otra
seminarios podrían cubrir.
¿Qué Meteor también es un servidor web.
Así que incluso si usted no tiene ninguna JavaScript, y lo que desea para servir
Archivos CSS y HTML, Meteor lo puede hacer por usted.
>> Y aquí está el enlace de nuevo a la demo que me dieron ustedes
comenzó a jugar con.
Pero vamos a pasar a HTML.
¿Cuántas personas aquí tienen ni idea de lo que es HTML?
Aceptar grande.
Y eso es completamente bien.
Usted realmente no necesita saber mucho acerca porque vamos a ir sobre la
uso muy simplemente.
>> Esto es lo que el simple Página HTML se parece.
Esto puede ser como tu hola, mundo de HTML, mientras que comenzamos en C con
hola, mundo.
Yo no quiero hacer énfasis en la detalles de lo que HTML, lo que la cabeza, lo que
cuerpo, qué título está haciendo allí.
Sólo quiero hacer hincapié en la estructura, cómo tienes las etiquetas.
Y eso es el ángulo entre paréntesis.
Y ahí es donde usted tiene sus descriptores.
>> Así que es posible que tenga el documento HTML.
Y entonces se le cierra el documento HTML con lo mismo que la barra invertida.
Y tiene diferentes tipos de etiquetas.
Y observe que todos están igualados.
Tendrá como una etiqueta del cuerpo y luego una estrecha etiqueta body.
Y dentro de la etiqueta del cuerpo, que va a ser el contenido de su página web.
Así que esta página web podría mostrar simplemente en un fondo blanco y texto ***
hola, mundo.
¿Eso tiene sentido?
Aceptar.
>> Ahora voy a rápidamente cubrir JavaScript.
En las palabras de un TF anterior, "JavaScript es la mejor programación
lenguaje existente en la actualidad.
Otras personas tratan de te diga lo contrario.
Se equivocan ". JavaScript es bastante agradable, y te voy a mostrar por qué.
>> Así que este es el ejemplo clásico de empezar con en C. Tenemos hola, mundo.
Y te das cuenta de que incluso si achica , usted tiene que tener por lo menos dos
líneas de código aquí.
Tengo varias líneas de código.
Esto se puede hacer de manera muy sencilla.
Una línea en JavaScript con console.log, y luego la cadena,
hola, mundo.
>> Ahora, a pesar de que nos estamos moviendo a un nuevo Javascript, casi todo el
habilidades que has aprendido mediante la codificación en C son directamente portátil.
Así cuerdas, la idea de las cadenas en comillas dobles, que es lo mismo.
El punto y coma, que es lo mismo.
>> Una característica interesante acerca de JavaScript en realidad es que se
no es necesario el punto y coma.
Se puede adivinar que usted debe poner un punto y coma allí.
Pero dicho esto, siempre se debe tratar para poner sus puntos y comas allí.
Se considera un buen estilo.
Y también, no hay función principal.
Usted acaba de empezar en la parte superior del archivo y leer cosas línea por línea.
>> Entonces esto es lo que se necesita para hacer que hola, programa mundial.
Y entonces cuenta de que tiene que hacer hola y luego ejecute hola.
Con JavaScript, se considera un lenguaje interpretado.
Lo que hay que saber es que no hay decisiones.
>> No hay compilación.
Usted acaba de ejecutar el nodo.
Y recuerda nodo es el programa que ejecutará el JavaScript en una consola,
en un cuadro ***, no el sitio web.
Así que usted acaba de darle el archivo, y es va a imprimir hola, mundo.
>> Yo realmente hago un poco de demostración de que para ustedes aquí.
Así que vamos a ir a mi Terminal de Node.js.
Aceptar.
Vamos a pasar aquí.
Así que voy a empezar a nodo.
Y yo voy a enseñar ustedes en tan sólo un segundo cómo conseguir que la
instalado, si no lo hace.
Permítanme hacer esto un poco más grande.
Aceptar.
Espero que ustedes pueden ver.
>> Así que puede escribir código como lo hice antes de console.log.
Hola, Roger.
Y note que no tengo que hacer el punto y coma, pero luego me sale este extraño
Lo indefinido.
Bueno, en realidad, no importa sobre lo indefinido.
Cosas que quiero que te des cuenta es que usted no es necesario que la función principal aquí
para iniciar la ejecución de código.
Y no hay final a la barra invertida.
Hay algunas pequeñas características que JavaScript puede hacer por usted.
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: Ah, sí.
Lo siento por eso.
Y eso sólo significa flecha nodo está listo para otro comando.
Así que usted puede hacer que haga sencillo matemáticas, al igual que 1 más 1.
Y al igual que en C, estas matemáticas símbolos son los mismos.
Yo puedo hacer console.log de un número.
Y luego imprime dos.
JavaScript es agradable en ese sentido porque a pesar de que dos es un int,
como en C, si se hizo con printf dos, que se obtendría un error.
>> Pero JavaScript sabe, oh, eres imprimir algo.
Voy a necesitar una cadena.
Así que permítanme convierto que dos en una cadena para usted.
Y también se puede hacer algunas cosas raras como hola y luego más dos.
Esto es sólo otro ejemplo de cómo dos se puede convertir en allí también.
>> Así que con eso fuera del camino, vamos a cubrir sólo un poco más de JavaScript.
Así que en C, tenemos tipos.
Cada vez que creamos una nueva variable, que tengo que decir que es que es char * o
cadena en el caso CS50.
O si tuviéramos un número decimal, que teníamos que decir flotador.
Si necesitábamos un booleano, que teníamos que decir b.
Y luego, una vez que tuvimos algo que fue ab, que tuvo que permanecer un bool.
No podríamos mágicamente cambiarlo a un int a menos que escribimos en el
paréntesis, int de b.
>> En JavaScript, no hay tipos.
Usted sólo piensa en él como var.
Y var es la forma de crear un nuevo tipo.
Por lo tanto, puede tener var s siendo una cadena, var siendo n un flotador,
y var b siendo cierto.
Y una cosa que no se puede hacer en C es Ahora puedo decir que, después de esa línea, b
es igual a un número entero.
Y eso funciona muy bien.
Mientras que en C, sería decir como el número entero no es un bool.
Yo no puedo hacer eso para usted.
O [inaudible] arrojaría un error.
>> Y puedo volver rápidamente al nodo y mostrar un poco de esa funcionalidad.
Así que puedo tener una var a.
Llámelo "Apple". Así que ahora cuando imprimo una, Tengo mi cadena, 'Manzana'. Pero yo sí puedo
También dicen ahora que a es igual a 3.
Y observe que no hay error.
Y una ahora es igual a 3.
Cualquier pregunta hasta ahora?
Sí.
>> AUDIENCIA: Espera, entonces console.log es básicamente printf, ¿verdad?
>> ROGER ZURAWICKI: console.log es su printf.
>> AUDIENCIA: Así es.
Así que ¿cómo es que si usted acaba de escribir en ocho o [inaudible], lo que hace que
[Inaudible]?
>> ROGER ZURAWICKI: Así es.
Por lo que es -
las cosas en verde se imprime en la consola.
Y lo que veremos a continuación es cuando nos movemos a la web
página, que no va a hacer -
JavaScript será tener un HTML plantilla, que voy a cubrir en el
Meteor parte del seminario.
Y ahí es donde usted puede decir, dame el valor de A, y pondrá en un
su sitio web.
Debido a que cada navegador web realmente tiene una pequeña consola.
Y si uno mira con mucho cuidado, sería obtener alguna información, como su
printf está apareciendo allí con cada página web que se carga.
>> AUDIENCIA: ¿Cómo llegaste a la pantalla de shell?
>> ROGER ZURAWICKI: Así que hay un comando llamado nodo, y viene con Meteor.
Así que voy a dejar de fumar fuera de allí.
Nodo es el programa que corre JavaScript.
Si usted va a meteor.com, que puede instalar Meteor, y
Meteor viene con nodo.
Debido Meteor es sólo una colección de todos estos paquetes de software.
Cuando lleguemos a nuestro ejemplo, lo haré caminar a todo el mundo a través de la instalación de
METEOR, y entonces usted puede jugar con el nodo mismo.
Vale, muy bien.
>> Así que otra gran característica de trabajar con JavaScript está bucles son la misma.
Más o menos lo mismo.
Para bucles, los bucles while, do bucles while, if-else.
Es todo lo mismo con los aparatos de ortodoncia.
Es la misma sintaxis.
En el caso de un bucle, la pequeña detalle que hay que prestar atención
que está en lugar de int i es igual a 0, tenemos que decir var i es igual a 0.
Pero eso es debido a las variables tipos que hemos hablado antes.
>> Observe que la convierte en printf un registro, un console.log.
Y nosotros no tenemos que hacer el porcentaje p barra invertida n y luego pasar en i.
Sólo puedo decir.
Y sería imprimir los números de cero a cuatro.
Si quieren probar esto, porque que trajo un buen punto.
Si quería ejecutar este código en su propio navegador, le recomiendo que
todo el mundo se abre Google Chrome.
Google Chrome o cualquier navegador web realmente, pero me gusta Google Chrome
porque está muy estandarizado.
>> Usted puede ir a, creo, si hace haga clic en cualquier sitio web, sólo en el
espacio en blanco, verás una opción llamado Inspeccionar Elemento.
Por lo general es el último.
Y cuando hace clic en él, usted debe conseguir una cosa a la parte inferior aparecen aquí.
Déjame el zoom aquí.
Y tenemos algunas fichas aquí.
El único que te importa es la consola.
>> Y esta es una consola de JavaScript que ahora se puede trabajar con ellos.
Grande.
Así que puedo escribir en la misma materia Yo estaba escribiendo antes de nodo.
Uno más uno es dos.
Var a es igual a "Apple".
Y entonces yo imprimo una, y una es "Apple".
Así que en cualquier navegador de Internet, Firefox, Chrome, Safari, lo que se utiliza, como
siempre y cuando tenga acceso a un JavaScript consola, el mismo tipo de
código corría en el nodo que puede correr en su propia consola.
>> AUDIENCIA: [inaudible]?
>> ROGER ZURAWICKI: Cómo llegar a la consola?
Tiene que hacer clic derecho en un espacio vacío en la página, y luego vas a
Inspeccionar Elemento.
Así que en realidad, me gustaría que ustedes sólo asegúrese de que puede
Inspeccionar Elemento en Chrome.
Y ve cuando se escribe en algunos código en la consola
que se ejecuta correctamente.
No dude en hacer cualquier pregunta si algo no está claro.
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: Cualquier tipo, claro.
Sólo hay un tipo para todos variables en JavaScript.
Y cuando usted tiene que declarar una variable, usted dice var.
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: Si.
Lo hace, pero en JavaScript, es muy inteligentes acerca de la asignación de memoria.
No hay malloc.
No hay ninguna conexión.
Así que usted no tiene que preocuparse por eso.
Esa es otra característica interesante que JavaScript que proporciona.
>> Así que me gustaría seguir adelante.
¿Sería eso está bien?
Aceptar.
Grande.
>> AUDIENCIA: Estoy teniendo problemas para la búsqueda de la [? Inspeccionar Elemento. ?]
>> ROGER ZURAWICKI: se ve tan Safari un poco diferente, pero que
tener Chrome o Firefox?
Esos son los más fácil los que trabajamos.
Y para sus proyectos, lo recomiendo la pervivencia de un navegador, ya
usted obtendrá un montón de errores casi porque cada navegador golosinas
JavaScript HTML un poco diferente.
Así que creo que tu vida será mucho más fácil si nos atenemos a Chrome porque
que está disponible en todas las máquinas.
Y es un navegador muy popular.
¿De acuerdo?
>> Así que el siguiente tema que debemos cubrir en JavaScript -
Lo siento por el formato aquí.
Tuve que estirar las diapositivas para que coincida el proyector de pantalla ancha.
Pero ahora me gustaría hablar acerca de cómo lo hace funciones.
En C, tenemos que declarar cada función.
Al igual que int añadir, y se necesita un int en x, y un int y, a continuación, añadimos los
y lo devuelve.
>> En JavaScript, las funciones son en realidad otro tipo de variable.
Así que nos limitamos a decir var agregar y que es igual a una función.
Una función que toma un X y un y.
¿Y qué hace esa función?
Devuelve x más y en la misma exacta sintaxis como en C. Y se nota que en
JavaScript no dirá lo que la función devuelve porque desde
variables no tienen tipos de todos modos, en realidad no es productivo, supongo,
que se especifica toda tu tipos en sus funciones.
Y luego, cuando se llama a una función, es la misma sintaxis exacta como C.
sólo tiene que pasar en sus dos argumentos.
Me gustaría probar esto en mi nodo.
¿Puedo cambiar la diapositiva?
>> AUDIENCIA: [inaudible].
¿Vamos a obtener una copia de las diapositivas?
>> ROGER ZURAWICKI: Si.
Así que vamos a volver a nodo.
Aceptar.
Así que voy a decir var add función es igual.
Tomando una x, tomando una y.
Y entonces se sabe que de la declaración no completado.
Así que en el nodo o en su consola, te darás cuenta de puntos suspensivos.
Así que usted puede seguir escribiendo su código.
Y ahora voy a decir de retorno x más y.
Y a continuación, cierre la abrazadera.
Y en el momento de cerrar el corsé, se considera que la declaración ha terminado.
>> Y ahora puedo decir añadir uno y dos.
Y voy a conseguir tres.
Tenga en cuenta que si sólo he añadido, se me dice que es una función.
Y una cosa sólo de prestar atención a es si se le da un número erróneo de
argumentos, se tendrá que realizar.
Se ejecutará, pero usted debería obtener algunos resultados realmente extraño.
Algo así como un valor de la basura, usted puede pensar en él.
Así que por favor, seguir adelante y tratar de esto en su navegador.
>> Aceptar, por lo que en aras del tiempo, voy a ahora pasar a las siguientes características en
JavaScript.
Hasta ahora hemos hablado acerca de las funciones.
Hemos hablado acerca de los bucles, si las declaraciones también.
La sintaxis es la misma como C y las variables.
Y ahora quiero hablar acerca de las matrices.
Lamento que las diapositivas quedó un poco cortado.
Pero, en realidad, en la primera sección, todo lo que necesita va a funcionar.
>> Así que tenemos otro tipo de variables denominadas matrices.
Y utilizamos corchetes para denotar ellos.
Así que en el primer ejemplo, var arr, matriz vacía.
Esta es la lista vacía, por lo que una serie que no contiene elementos.
Y también se puede tener un arreglo con tres cuerdas.
En C, todos los elementos de la matriz tenido que ser del mismo tipo.
>> Pero debido a que en JavaScript que sólo hay un tipo, las matrices pueden realmente
tener diferentes tipos de valores.
Al igual que aquí, tenemos una matriz con un flotador, un bool y int.
La manera de conseguir una longitud de una matriz, que en realidad no tiene que utilizar el tamaño de
ni nada.
Usted acaba de decir la matriz y a continuación, dot longitud.
Y esta longitud de punto, usted puede pensar en se siente una especie de estructura, cómo cada
matriz tiene un campo, una variable adicional dentro de la misma llamada longitud, que
realiza un seguimiento de la duración de su matriz es.
>> Así que voy simplemente rápidamente para entrar en nodo y mostrar que ustedes lo mismo.
Así que puedo tener una matriz.
Puede ser la lista vacía.
Y me va a imprimir copias de una lista vacía.
Grande.
Ahora puedo decir que la matriz tiene 1, y 2,3, y verdadero.
Así que todos los diferentes tipos.
Y te das cuenta que funciona muy bien.
La matriz que vuelva soportes todos los valores se lo di.
>> Si quisiera obtener el primer elemento de la la matriz, la sintaxis es en realidad
el mismo que en C. puede decir matriz cero.
Y para conseguir uno.
Yo puedo decir lo mismo de array dos, y me da cierto.
Si hago algo fuera de la formación, JavaScript es un lenguaje de seguro
porque no voy a obtener un fallo seg.
Voy a definir.
>> Y esto no definido, puede tipo de pensar en ello como nulo.
Pero puede ser realmente molesto cuando código, ya que tendrá que comprobar que
casi todo lo que hace, trabajar con no está definido.
Y vamos a ver algunos ejemplos de esto cuando trabajamos en Meteor.
>> Aunque array de cuatro no está definido, Puedo asignarle un valor.
Así que voy a decir que es igual a uno.
Y luego, si me voy a la matriz, que tener el valor añadido allí.
Y note esa matriz de tres, que también fue sin definir, se queda sin definir.
Así que ahora tengo una matriz con un agujero en el centro.
Pero si yo imprimí array cuatro, Me gustaría conseguir uno.
Si lo hiciera array de tres, me sale indefinido.
>> Así que la buena característica de que JavaScript le permite hacer es que las listas pueden
cambiar el tamaño.
Matrices, arrays estar listas, que cambian de tamaño.
Y usted puede especificar cualquier ubicación dentro de ellos.
Y todos los huecos se rellenarán con estos valores indefinidos.
>> Hasta ahora hemos hablado acerca de las matrices.
Ahora, lo último que quiero cubrir en JavaScript, y esto es muy importante
para entender el código que Yo te voy a mostrar,
va a ser objetos.
Y los objetos son un término en -
básicamente, que están presentes en muchos lenguajes de programación.
Y cada lenguaje de programación le gusta pensar en ellos un poco diferente.
>> Pero creo que para Meteor, un buen analogía es la estructura C.
En C, si queremos encontrar la estructura estudiante, tendríamos que especificar toda la
cosas dentro de ella.
Por lo tanto, tiene que tener un nombre.
Tiene que tener un año.
Tiene que tener una perspectiva de género.
Pero también tenemos que darle el tipos de todas esas cosas.
>> Y ahora que tenemos este molde para la struct llamado estudiante, que puede tener un
nueva estructura, y entonces podemos manualmente dicen lo que cada uno de los campos son.
Y ahí es donde usamos el nombre de punto, dot años, dot género.
Y luego pues sólo en la última línea de código aquí, sólo estoy imprimiendo el
nombre del estudiante estructura.
>> En el mundo de JavaScript, hay hay tal cosa como struct estudiante.
Usted no generar una estructura preestablecida.
Usted realmente justo, en estos soportes, usted dice lo que está todo.
Y es esta notación extraña con la dos puntos y después de la coma, pero usted
acostumbrarse a él muy pronto.
>> Y en realidad es un muy fácil, forma flexible de sólo
la manipulación de objetos.
Te das cuenta de que si quiero conseguir ahora nombre de s, acabo de hacer s.name.
¿Hay alguna pregunta acerca de esto?
Esto por lo general ha sido muy confuso tema al introducir a la gente a
JavaScript.
Voy a hacer algunos ejemplos de esto en el nodo.
¿Sí?
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: Entonces, ¿usted tener un ejemplo, múltiple
las variables de ese tipo.
>> AUDIENCIA: [inaudible].
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: OK.
Así que supongo que el camino va a ir sobre es que pondría objetos en una matriz,
y ahora usted tendrá una matriz de objetos.
¿Responde esto a su pregunta?
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: Si.
S es un objeto.
Así que podemos ir al nodo y sólo jugar un poco.
>> AUDIENCIA: [inaudible]?
>> ROGER ZURAWICKI: Oh, está bien.
Así que si usted se está preguntando lo que las clases son, clases son tratados de manera muy diferente,
y tienen un esquema muy raro llamada de prototipos, que no lo hace
necesita saber acerca de.
No hay manera fija para hacerlo.
Así que si usted desea generar múltiples, que sería sólo un poco de tener una función
o algo así.
Usted genera su propia función.
Y usted desea devolver un objeto.
Eso sería lo más fácil manera de hacerlo.
¿Eso tiene sentido?
Aceptar.
Grande.
Así que una vez que tengamos una comprensión de JavaScript objetos, que son -
oh, sí.
>> AUDIENCIA: [inaudible]
ejemplo, ¿cuál es la diferencia entre "Roger", con comillas dobles frente a
[Inaudible] con comillas simples.
>> ROGER ZURAWICKI: OK.
Así que esto es en C, tenemos la única cotizaciones representan caracteres y doble
cotizaciones representan cadenas.
JavaScript realidad produce esta distancia porque usted puede tener cadenas con
comillas simples o dobles, y no hay no hay tal cosa como un solo carbón.
Pero si usted acaba de copiar el mismo Código C, JavaScript haría
tratarlo bien.
Que es por lo traté como -
es por eso que puede, literalmente, puerto el código en ese sentido.
>> Y quiero que le muestre un ejemplo de un objeto más complicado.
Así se puede observar que un objeto puede tener cadenas como valores.
Puede tener otra lista de valores.
Podría tener una lista de objetos como valores.
Realmente no hay límite a esto.
Así que aquí, es sólo una buena demostración de cómo se puede obtener una gran cantidad
diferentes tipos que van en todo en un solo objeto.
¿Esto tiene sentido?
>> Ahora, usted también puede tener matrices de objetos.
Y aquí es un poco similar a lo que se le preguntó, si se puede tener objetos de
del mismo tipo.
Pero el problema es que no hay una fija formato para los objetos en JavaScript.
Así que hay que especificar usted mismo.
Y usted tiene que asegurarse de que son uniformes.
Así que aquí, cuando creo un objeto, no tengo para asegurarse de que cada uno tiene un
nombre, y cada uno tiene una casa.
>> Y luego tengo una serie de ellos, y que puede ser mi casa.
Y entonces aquí se puede tipo de véase el bucle pasando.
El bucle de ser sólo un muy común forma de recorrer a través de una matriz
en JavaScript.
Tenga en cuenta que este modelo es muy similar a la C equivalente, en el que
tener int i es igual a cero. yo es menor que la longitud.
Y luego i plus plus.
>> Es casi el mismo código, a excepción de algunos detalles.
Así lo entiende todo el mundo qué es un objeto?
Sólo pensar en ello como un struct C.
Y la forma de acceder a los campos es sólo con el punto.
Y como siempre que se recuerde cómo utilizar el punto, estarás bien.
>> OK, así que ahora todo el mundo puede leer ese vínculo?
Este es el enlace al proyecto.
¿Hay alguien que tiene problemas ver el enlace?
OK, vamos a cambiarla para que.
No es -
Sí, eso es, probablemente, el manera más fácil de hacerlo.
Grande.
>> Así que si vas a este sitio, no debería haber algunas instrucciones que voy
ir sobre cómo podemos instalar Meteor y conseguir nuestro proyecto de ejemplo en ejecución.
Quiero hacer que todos tengan el enlace de abajo antes de pasar.
¿Puedo pasar?
Vale, muy bien.
>> Así que aquí estoy en el sitio web.
Se dará cuenta en el archivo readme, tenemos algunas instrucciones sobre cómo
conseguir ª configurar.
¡Tienes que ser ya sea en el CS50 electrodoméstico o simplemente en un Mac.
Windows no funcionará.
Pero, básicamente, todo lo que no es De Windows deben trabajar con estos
instrucciones bien.
Pero puedo hacer que sea un poco grande también.
>> Así se encontrará con el primer par de comandos.
Estos chicos se acaba de instalar Meteor.
Yo puedo entrar en mi terminal.
Y si me quedo lo mismo ahora, Yo ya tengo instalado.
Así que es un poco más corto.
Puede ser que tome un poco más de tiempo para ustedes.
Pero quiero primero asegúrese que tenemos Meteor en ejecución.
Después Meteor ha instalado, debe ser capaz de obtener los nodos de la consola.
>> AUDIENCIA: Están pidiendo una contraseña.
>> ROGER ZURAWICKI: Eso sería su contraseña de usuario, si estás en un Mac.
Sólo necesita permiso para modificar algunos archivos del sistema.
Así que la pregunta era, si se le pide una contraseña, es sólo que le solicitará que
por su contraseña y nombre de usuario cuando iniciar sesión en tu Mac.
Y esto es, para que pueda cambiar los archivos del sistema.
>> Y cuando esté listo, usted puede seguir adelante con el siguiente paso, que copiará el
código de ejemplo que tengo de la página web.
Y tendrá un nuevo directorio en su directorio de inicio llamado de líderes y
podemos empezar a trabajar a partir de ahí.
Así que sólo estoy copiando y pegando éstos comandos en mi terminal.
Y para mí, yo ya clonado él.
Así que ahora puedo mover en la tabla de posiciones.
Y debería tener unos pocos archivos de allí.
¿Alguna pregunta?
>> AUDIENCIA: [inaudible] no funciona.
>> ROGER ZURAWICKI: Oh, es posible necesitará git instalado también.
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: ¿Lo sientes?
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: Oh, está bien.
Aceptar.
Eso es porque es posible que tenga que ser registrado para GitHub para conseguir este enlace.
Si ustedes pueden ver que, lo más fácil manera de hacerlo yo diría entonces es
descargar el zip.
Y esto sólo va a descargar todos los archivos.
Y entonces una vez que usted pone en su descargar o su directorio de inicio -
Recomiendo lo ponga al directorio de inicio para que todos podamos
ejecutar los mismos comandos.
Mientras que tenemos los archivos, lo haremos ser capaz de empezar a trabajar con ellos.
Quiero saber si la gente está teniendo problemas para descargar los archivos.
>> AUDIENCIA: Por directorio principal, quieres decir -
>> ROGER ZURAWICKI: directorio home Así lo haría ser John Harvard, si se encuentra en
el aparato CS50.
Para llegar a su directorio principal, sólo tienes que escribir en C.
>> AUDIENCIA: [inaudible]
CS50 aparato [inaudible].
>> ROGER ZURAWICKI: Si.
¿Desea ejecutar los comandos en su terminal.
>> AUDIENCIA: [inaudible].
Tengo un error que dice que no existe el archivo o directorio.
>> ROGER ZURAWICKI: Podemos tomar una rápida romper y sólo asegúrese de que
todo el mundo tiene Meteor instalado, y voy a simplemente ir a tratar de ayudar a la gente.
Por favor, intenta ayudar a los demás si se está ejecutando en problemas.
Lo sentimos, sí.
¿Está usted tanto en el aparato?
>> AUDIENCIA: Si.
Tengo la RISA
>> ROGER ZURAWICKI: OK.
Si nos remontamos a la página web, ir desplazarse hasta la parte superior.
Y hay esta HTTPS.
>> AUDIENCIA: Copia este?
>> ROGER ZURAWICKI: Si.
Y entonces usted quiere escribir git clone.
Así que si se presiona Control A -
>> AUDIENCIA: Aquí?
Y hacerlo [inaudible]?
>> ROGER ZURAWICKI: G-I-T.
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: Git y luego clonar.
Así que es muy similar al comando que tenía anteriormente, pero la URL cambió.
Así que antes de que fuera esta, ahora es esto.
Permítanme actualizo el -
sí.
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: Este es descargado.
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: Oh, por lo que no clonar correctamente.
Voy a arreglar eso.
Hay un error de intentar para descargar los archivos.
Permítanme actualizo el comando para ustedes para que pueda asegurarse de que funcione.
Lo siento por eso.
Debe ser la misma para Mac o dispositivo CS50.
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: He actualizado la comando para el número dos, si
de actualizar la página.
Y con esto, URL, debe ser capaz de descargar los archivos.
>> AUDIENCIA: Así que si seguimos siendo la descarga de [inaudible].
>> ROGER ZURAWICKI: Si usted es todavía la descarga de meteoros?
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: Sí, si quieres para desarrollar en tu Mac.
Pero lo que necesita el desarrollador Xcode herramientas instaladas.
He probado estos comandos en el CS50 aparato, para que pueda garantizar
que va a trabajar.
Sí. deja que me vaya y te ayude.
>> AUDIENCIA: [inaudible].
Doy mi contraseña.
Se trata de Mac.
Y entonces lo hago [inaudible].
>> ROGER ZURAWICKI: OK.
Me gustaría tratar de ejecutar todos los comandos únicamente en el terminal aparato CS50.
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: Lo conseguiría trabajo primero en el terminal, en el
Aparato CS50, y luego el terminal de Mac.
>> AUDIENCIA: Así que si lo haces en el CS50 Appliance así, [inaudible].
>> ROGER ZURAWICKI: Me gustaría pasar , pero si la gente sigue teniendo
problemas para configurar Meteor, Kevin es más que feliz de ayudar a ustedes a cabo,
Kevin en la camisa gris.
Lo que debemos tener es que vamos a ejecutar el último comando, número tres, en
nuestro terminal.
Cuando hacemos eso, vamos a correr Meteor.
>> Y usted debe -
oh, ya tengo Meteor en ejecución.
Así que no va a dejar que - me dejó simplemente cerrar mi otro Meteor.
Cuando ejecuto Meteor, que Ahora debería ver que -
debería ver el directorio actual que ha de servir.
Y ahora que va a decir el servidor se está ejecutando en http://localhost.
Esa es la URL que desea poner en su navegador web.
>> Y en esa URL, usted debería ser capaz de acceder a una pequeña tabla de clasificación.
Así en cuenta que este es el localhost, lo que significa que si usted hace cualquiera
cambios, no van a ver los cambios del otro.
Mientras que en el sitio Web que te mostré al principio, podríamos obtener
cambios de todo el mundo porque todo el mundo fue el acceso a la misma página web.
>> Así que déjame ir a [? palabra?]
3000.
Por lo que debe ser capaz de simplemente confirmar que la funcionalidad funciona.
Puede seleccionar diferentes personas, y se les puede dar diferentes puntos.
Así que le doy puntos alguien.
También puede ver que que suben de rango.
>> Ahora bien, en aras del tiempo, no son tres características que he
implementado.
Y vamos a implementar el borrado usuarios como nuestro primer largometraje.
Pero antes de seguir adelante, son ¿Alguna pregunta?
Usted tenía la mano hacia arriba.
¿Sí?
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: ¿Se puede comprobar Meteor que está instalado?
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: host local 3000?
Y estás en el aparato CS50?
Que puedo hacer -
usted no tiene que estar en un Mac.
Esto funcionará en el aparato.
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: En el normal, navegador web, sí.
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: Es Meteor correr?
Así que bien, no hay una distinción.
Si está ejecutando en el aparato, que tiene que hacer
localhost en el aparato.
Si está ejecutando en su Mac, como yo, entonces yo puedo hacer
mi Mac Google Chrome.
Pero si usted está utilizando el aparato CS50, lo que tiene que hacer todo lo
en el aparato.
Así que usted tiene que utilizar Google Chrome en el aparato.
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: Es sigue sin funcionar?
>> AUDIENCIA: [inaudible].
>> ROGER ZURAWICKI: Así que para repetir, ¿cómo acceder a la página web actual.
Usted tiene una URL aquí en localhost 3000.
Si estás en el aparato CS50, usted tiene que abrir CS50
Google Chrome de aparato.
Y en ese Google Chrome en el aparato, se puede escribir en ese URL,
y usted debería ver una tabla de clasificación.
Así que voy a simplemente aplazarlo a este lado un poco.
Y ahora voy a abrir mi editor de texto aquí.
Así que permítanme simplemente asegúrese de que el código está en orden.
Aceptar.
Grande.
>> Me gustaría ahora pasar por el código un poco.
Y el primer archivo que me gustaría empezar con decir leaderboard.html.
Usted será capaz de obtener este código después de el seminario, así que sólo quiero mostrar
que en mi equipo lo que está pasando.
Así que espero que todo el mundo puede ver esto.
Así que desde el principio del archivo, tener nuestra cabeza y el título, que
es similar a lo que vimos en todos los documentos HTML.
Y luego vamos a tener el cuerpo de la etiqueta aquí.
>> Lo que he seleccionado es el principal cuerpo, básicamente, lo que es
va a ser visualizado.
Pero hay alguna nueva que no sea HTML cosas, y eso es en el
corchetes angulares dobles.
Y estos son los códigos de plantilla.
Por lo que usted ve aquí este soporte nueva clasificación soporte.
Y esto es una especie de - pensar en él como llamar a una función para HTML.
>> Se trata de una versión especial del HTML.
Es la versión que usa Meteor, que Es por eso que usted puede mostrar diferentes
cosas, como la tabla de posiciones nombres y botones.
Pero leaderboard le dice que vaya a la plantilla con el nombre de líderes.
Así que la plantilla no va a ser visualizado por sí, pero es una función, por lo que
será llamado.
Y vas a sustituir en todo esto código aquí en clasificación.
>> La parte interesante de clasificación aquí es sólo esta tabla.
Si usted acaba de leer, lea este código en voz alta, que debe ser intuitiva
porque clasificación, lo único que tenemos aquí es una tabla.
Esta clase ID cosas no lo hace tenga que preocuparse.
Sólo sé que hay un encabezado de la tabla.
Eso es este thead.
>> Y encuentra un nombre y una anotación.
Todas estas etiquetas, como thtable, thead, usted acaba de aprender sobre la marcha.
No es importante que memorice éstas ya que sólo puede acceder a cualquier
referencia en línea.
O para el final del semestre, éstos sólo será muy familiar con usted.
>> Después de la cabecera de la tabla, la parte que quiero llamar su
atención es la h etiqueta.
Porque es entre dobles, es una plantilla.
Así que eso significa para cada uno de los jugadores, lo jugadores es, tenemos que
mostrarlo.
Y nos vamos a la plantilla de jugadores.
>> Si nos desplazamos hacia abajo un poco más -
Espero que todo el mundo pueda verlo.
Tenemos la plantilla del reproductor.
Y esta plantilla básicamente define un celda de la tabla, donde se coloca en el nombre
aquí y la puntuación.
Alejándonos ahora, podemos ver que este trozo de código -
y ese fue nuestro reproductor ahí abajo -
define una de estas células.
Cada cosa que hago clic se convierte en amarilla.
>> Una forma sencilla de que pudiera cambiar eso ahora.
Asegúrese Meteor todavía se está ejecutando.
Meteor debe ser un proceso de servidor, por lo que sólo deja
funcionando cuando usted desarrolló.
Digamos que yo quería cambiar todos los nombres o la puntuación.
Y yo diría que voy añadir puntos aquí.
Así que el cambio que hice aquí fue, en lugar de la puntuación sólo,
añadir puntos espaciales de puntuación.
>> Me voy a alejar, y estoy va a salvar mi archivo.
Y después de guardar mi archivo, necesito para asegurarse de Meteor está en marcha.
Lo siento por eso.
Yo quiero mostrar ediciones se hace en tiempo real.
Así que voy a cambiar un poco de texto.
Haga clic en un jugador.
Lo pongo en mayúsculas.
Y debe ser que si esto está funcionando adecuadamente, cuando yo la salvo a ella se
actualizaría.
>> Oh, creo que en este momento el problema es No estoy en el directorio correcto.
Aceptar.
Lo siento por eso.
Así que aquí, lo que se nota es mi cambio pasó.
Ahora digo que quiero revertir el cambio.
Quiero volver a lo que tenía.
Yo sólo voy a escribir normalmente.
Haga clic en un jugador.
>> El momento en que la salvo a ella el El sitio se actualiza para mí.
Y veo a mi cambio de el sitio al instante.
Esta es una característica muy útil en la depuración porque ahora
Yo no tengo que -
cuando escribimos código C, no sólo nos tiene que guardar el archivo, pero tuvimos que
hacerlo y luego ejecutarlo de nuevo.
Meteor es muy agradable porque a diferencia de C, el momento de guardar el HTML o
Archivo JavaScript, el cambio muestra inmediatamente.
>> Una pregunta es, en estas plantillas, cómo Cómo puedo obtener los valores como reproductores
o seleccione un nombre?
Si hago zoom aquí en mi código, Veo esto para cada jugador.
Así que la plantilla sabe que Tengo jugadores de alguna manera.
Y sabe que hay un nombre seleccionado.
¿De dónde viene esto?
Eso viene desde el JavaScript.
>> Y si vas a leaderboard.js, esta archivo, ahora cuando voy aquí, tenemos un
algunos comandos definidos.
Esta es una sintaxis especial Meteor.
Observe que no es necesario vars ni nada.
Pero estos son sólo estructuras sobre estructuras sobre las estructuras o estos objetos.
Y todo lo que estoy definiendo es la plantilla llamada tabla de clasificación.
>> Clasificación debe recibir una Lo llamó jugadores.
Y lo que es los jugadores?
Es lo que esta expresión devuelve.
¿Y cuál es el nombre seleccionado?
Es algo más de código.
Los detalles del código que vamos a cubrir un poco más tarde.
Pero ahora quiero que entiendas que en este código, estamos tomando
jugadores, y estamos dándole un valor.
En este caso, se trata de una función que es ejecutado.
Así podemos obtener el valor de nuevo cuando ejecutamos la función.
Este es un registro.
¿Eso tiene sentido?
>> Yo puedo cambiar la forma en que está ordenada.
Aquí, hay un objeto de ordenación.
Y lo que dice es que voy a clasificar por puntuación descendente primero y
a continuación, nombre ascendente.
Si cambio esto a uno, que va para ordenar ascendente puntuación.
Así que cero debe estar en la parte superior.
Y cuando hago zoom en mi sitio web, Ahora vemos que el sitio web actualizado.
Y el resultado es ascender.
>> La siguiente función sólo quiero cubrir es clic incremento.
Fuera de razones de tiempo, no lo haré ser capaz de cubrir más del Meteor
código, pero hay un montón de recursos disponibles, y seré
aquí después del seminario.
Pero yo solo quiero cubrir los eventos clasificatorios.
Esta sintaxis aprenderás un poco más tarde en la conferencia.
Este es JavaScript.
>> Sólo estamos diciendo, cuando tengamos un clic, y está en el incremento, este
de hash sólo significa ID.
En la etiqueta de identificación de incremento, entonces queremos actualizar - las palabras claves que quiero que
hay que vigilar es la actualización y seleccionar y jugador.
Así que cualquier jugador del seleccionado, lo actualizamos.
Y lo que hacemos es incrementamos su puntuación por cinco.
Y eso va a describir la funcionalidad que tenemos aquí.
>> Después del final de este seminario, vamos a ser capaz de ver algo más de código.
Pero volviendo a mi meta que quiero cambiar el sitio, quería aquí
añadir un botón de eliminación de manera Puedo eliminar el reproductor.
Así que para hacer eso, necesito que hacer dos cosas.
Tengo que actualizar el código HTML, actualice la ver, lo que se muestra al usuario, y
luego tener algo de JavaScript que, cuando la se pulsa el botón, Meteor va
que hacer algo.
Se va a quitar ese jugador.
>> Así que hay un montón de trozos de código que en el fondo ya tiene
ha hecho por mí.
Si miro aquí, ya tengo una manera de conseguir que el jugador seleccionado.
Eso es todo esto, si usted puede verlo.
Así que si yo sólo -
Voy a tener otro evento.
Así que voy a copiar lo que tengo.
Debido a que esta es una lista, Sólo necesito una coma.
>> Así que ahora voy a clic en Eliminar.
Y entonces, en lugar de los jugadores de la actualización, Voy a hacer los jugadores eliminar.
Y todos los jugadores eliminar necesidades es un jugador seleccionado.
Así que esta función es todo lo que necesitamos.
Me hace falta añadir algo de HTML aquí sin embargo.
Así que si me desplazo hasta aquí, esta es la vista HTML.
Tuvimos una cosa aquí, que era una una etiqueta.
Usted no tiene que preocuparse por eso.
>> Lo que le importa a usted es este incremento ID.
Y esto es lo que nos ha permitido decir, cuando hicimos clic incremento, tenemos que
dar cinco puntos.
Y verás que se trata de un botón.
Eso es lo que significa la btn.
Y el texto en el botón es dar cinco puntos.
Así que lo que voy a hacer es que soy va a copiar esta línea.
Voy a cambiar el ID de eliminar.
Y yo voy a cambiar el texto aquí para borrar.
>> Así que todo esté guardado.
Quiero volver a mi JavaScript para asegurarse de que no tengo
eliminar fila aquí.
Bueno.
Así que voy a guardar ambos archivos.
Después de guardar ambos archivos, nos puede volver a la parte inferior.
Y ahora vemos que tenemos un botón de eliminar.
Y un paso más.
Te das cuenta de que podría obtener una error porque cuando hago clic en
borrar, no pasa nada.
>> Una forma de depurar esto es ir volver a Inspeccionar Elemento.
Estoy haciendo esto a propósito para que pueda ve cómo le depurar algo.
En Inspeccionar Elemento, tenemos todo nuestro texto aquí abajo.
Quiero volver a la consola.
¿Y qué pasa cuando voy aquí está consigo algún tipo de error.
Se dice que no hay método de borrar.
>> Lo que esto quiere decir es cuando voy volver al código, llamé jugador
eliminar aquí.
El borrado no es en realidad el comando correcto.
Así que para saber cuál es el comando correcto Es decir, existe la API Meteor.
La documentación que quiero señalar que chicos a es justo en meteor.com.
Así que lo tengo aquí.
Esto es justo lo que ustedes saben Dónde obtener más información.
>> Hay un enlace a la documentación.
Y en el fondo, no puedo simplemente no encontrar para eliminación.
Y lo que se ve, eliminar es en realidad quitar.
Ese es el comando que Tengo que llamar.
Así que ahora que sabemos que, voy para cambiar esta delete para eliminar.
Así que ahora, cuando vuelvo a mi tabla de posiciones El sitio, que voy a hacer clic
borrar, y ahora me voy.
No hay más Roger.
Y puedo seguir borrando cada nombre de soltera hasta me queda nada.
>> Así que fue un poco de vista previa de cómo utilizar Meteor.
Aprenderás mucho mas JavaScript y HTML necesario para hacer
se vea más bonita, que vamos a cubrir en [de esta semana? pieza?] ajustado para HTML
y JavaScript en la próxima [? pieza?] ajustado.
>> Así que no te preocupes si no todos esto viene fácil para usted.
Será en el momento de el proyecto final.
Gracias por venir.
El enlace actualizaré pronto después de la seminario para que pueda ver un poco más
ejemplos que he implementado en forma para obtener la clasificación más avanzada
que tengo en este sitio web aquí en uno de los radicales-leaderboard.meteor.
Gracias.
>> [Aplausos]