DAVID J. Malan: Todo ben, de xeito que este aquí é o brazo Myo
banda, un par de que ten para os proxectos finais CS50.
E iso foi unha demostración en fila se anticipadamente onde esencialmente
este brazo moi axustado banda aquí escoita os seus movementos musculares
que son entón mapeados en software para portátil de Colton aquí que
tivo iTunes e que música xa na cola.
En vez de me demoing tanto, Colton estivo no laboratorio
claramente toda a semana recibindo unha demostración preparado para un voluntario valente.
Se alguén quere vir en up-- viu a súa man primeiro.
Imos cara arriba.
>> Todo correcto.
E cal é o seu nome?
>> Audiencia: Uh, María.
>> DAVID J. Malan: María, bo che ver.
Veña ata aquí.
Deixe-me presentar-lle Colton.
Colton, esta é Maria.
>> Colton: Ola, pracer de coñece-lo.
>> DAVID J. Malan: Todos ben, entón o primeiro paso, estamos
terá pór esta no seu antebrazo
de xeito que é moi tight-se preto do seu cóbado.
E mentres tanto, imos ter poñer na nosa Vidro Google
e imos mesturar as tecnoloxías de hoxe.
>> Colton: Primeiro imos ter que conectar esta nas cousas.
>> DAVID J. Malan: Aceptar.
De feito, imos poñer o seu brazo como preto de este cabo como sexa posible
para que poidamos primeiro sincronizalo lo cara arriba.
>> Colton: Imos facelo.
>> DAVID J. Malan: E mentres tanto, por iso que todos poidan ter unha mirada máis atento,
imos tirar cámara de Andrew na pantalla alí.
Polo tanto, temos un cable USB que se ser conectado a braçadeira de María.
E déixeme tirar pantalla de Colton se o proxector próximo.
>> Entón Colton está rexistrando o dispositivo agora como un Myo conectado a este cabo.
E agora o que María de fará momentaneamente
é realmente andar por os pasos de calibración
e ensinar o software como os seus músculos responden
cando a certeza de predefinido apunta que o software entende.
Se quere ir en diante da pantalla.
Aceptar, siga intentando.
>> COLTON: Vai como esta.
E así.
E todo o camiño á dereita.
Volva.
>> DAVID J. Malan: Aceptar.
Perspectiva diferente.
Non é vostede.
Somos nós.
>> MARIA: Aceptar.
DAVID J. Malan: Non.
Imos movelo máis arriba, polo que é máis preto do seu cóbado, ou aínda máis axustado.
Todo correcto.
>> Aquí imos nós.
Este sería un bo momento para CS52X.
Alí imos nós.
>> Moi bo.
Está ben.
Polgar para mindinho.
>> Moi bo.
Estender os dedos.
Boa.
Onda correcta.
Está amosando curiosamente vostede coa hand-- esquerda
>> Colton: Si, iso é raro.
DAVID J. Malan: Onda de á dereita e seguir adiante.
Fast forward para saltar ou seguinte.
É iso mesmo Onda Aceptar.
>> MARIA: Eu don't-- esperar.
>> DAVID J. Malan: Necesita axuda?
>> Colton: Entón vai coma este.
MARIA: Está xirando o outra cousa, con todo.
Colton: É.
DAVID J. Malan: Si, eu non sei por que está amosando a vostede un esquerdista.
Colton: Por que non try-- só tentar ir coma este.
>> DAVID J. Malan: Non?
Quizais acadar o seu brazo algo máis recto
e facelo máis abrupta como este.
Si, OK, imos alí.
>> MARIA: Eu sinto moito.
DAVID J. Malan: Non é culpa súa.
Colton: É bo.
DAVID J. Malan: All Right.
Bom--
>> MARIA: Será que temos que pasar por alto que, entón?
DAVID J. Malan: Si, imos deixar fóra do gancho.
Entón, se alguén quere facer unha proxecto final mediante este vangarda
hardware, entende que só podería tomar algún tempo para se acostumar.
E isto-- a realidade é esta é realmente moi sangramento bordo.
>> Isto é o que se chama o kit de desenvolvemento, que
destínase a ser, esencialmente, un pre-lanzamento de xeito que a xente pode facer exactamente
isto-- loitar con el, figura o xeito no que os corpos das persoas traballar
coa tecnoloxía.
Entón se quere despois, tras charla,
podemos deixalo vir e tomar outra facada nel.
Pero por outra banda, unha salva de palmas, se Poderiamos, por María para vir enriba.
>> MARIA: Grazas.
>> DAVID J. Malan: Grazas.
Imos coller a iso, pero imos dar você- como sobre unha bola de estrés aquí?
Oh, e-- se-- si, grazas.
Todo correcto.
Entón, para os curiosos, se fose familiarizado coa elección de son
que fixemos alí anteriormente, unha televisión incrible
amosar que ten que absolutamente estar no Netflix observación de bingo
é este aquí.
>> COLUMNA 1: Señoras e señores, un máxico chamado Josh.
>> DAVID J. Malan: E, ao parecer, é unha cousa para me texto durante charla agora.
Estou sendo informado de que María tivo un aniversario onte.
Entón, feliz aniversario a partir de CS50 a María tamén.
>> Entón pode ler o mes recente que este señores aquí, Steve
Ballmer, que era, en realidade, clase de 1977 na facultade,
recentemente se aposentou a Microsoft.
Era un estudante aquí, logo un par de anos máis tarde
atopou-se en Stanford Business School
cando recibiu un teléfono chamada dun amigo seu que
viviu a finais do corredor del aquí en Harvard.
O nome deste amigo era Bill Gates, e no momento,
estaba intentando contratar Steve ser a primeira persoa de negocios, realmente,
nunha pequena empresa de nome Microsoft.
>> A longa historia curta, Steve foi finalmente conquistado,
uniuse a Microsoft cando tiña só 30 empregados.
E polo tempo que aposentou recentemente,
a empresa tiña 100.000 empregados ao longo dos últimos anos.
E así, un sitio coñecido como The Verge preparou esta homenaxe en vídeo
que pensamos compartido que lle dá
unha sensación de canta enerxía Steve trae a calquera presentación que dá.
[REPRODUCIÓN DE VIDEO]
-Microsoft É como un cuarto fillo.
Os nenos fan saír de casa.
Neste caso, eu creo que Estou saíndo da casa.
Ei Bill, whazzap?
>> -Wazzap?
>> Ei, wazzap?
Temos sido dada unha enorme oportunidade.
E Bill nos deu esa oportunidade.
Quero agradecer a Bill por iso.
Eu quero que ti tamén.
O ritmo da innovación non vai abrandar.
>> Só pode ir máis rápido e máis rápido.
Pode haber algúns competidores que, por desgraza, son eliminados!
>> Eu amo esta empresa.
Si!
Eu son un PC, e eu amo esta empresa!
>> Desenvolvedores, programadores, desenvolvedores, desenvolvedores, desenvolvedores, desenvolvedores,
desenvolvedores, desenvolvedores.
Si!
Os desenvolvedores web!
>> Os desenvolvedores web!
Os desenvolvedores web!
Escoita o que máis lle obter, sen custo adicional!
>> O executivo MS-DOS, unha cita Calandra, unha pila de tarxetas, un bloque de notas,
un reloxo, un panel de control.
E, pode crer niso?
Reversie!
>> Gravalos en CD!
Publicala conxuntamente no MSN!
Vostede envialos amigos!
>> Todo isto con un click!
One Microsoft, unha estratexia, un team-- centrado, disciplinado, profesional,
e especialista en todo o que facemos.
Déixeme usar unha liña dun filme antigo.
>> Relación son como tiburón.
Eles se moven para adiante ou morren.
Realmente creo tecnoloxía empresas son os mesmos.
>> [FIN REPRODUCIÓN DE VIDEO]
DAVID J. Malan: Entón, estamos moi satisfeitos coa anunciar que Steve Vai unirse a nós
aquí en CS50 vindeiro mércores en lugar de costume e tempo aquí.
Espazo será probablemente limitada.
E así unirse a nós na persoa, por favor cabeza hoxe ou inmediatamente
para cs50.harvard.edu/register.
>> E imos seguir por Martes confirmando puntos.
Ansiosos para que na próxima Mércores durante charla na CS50.
Agora, noutra noticia, pasou de eu se atopou con iso en The Crimson só
o outro día.
>> Acontece que un dos funcionarios do CS50 e, polo menos, un dos alumnos de CS50
está actualmente en execución para UC presidente e vicepresidente,
que me trouxo de volta aos meus propios días
cando eu perdín a elección UC miserabelmente.
Pero o forro de prata en que é que eu sempre
contar a historia é que un dos que eu estou seguro
moitas razóns que eu perda o elección foi unha completa falta
dun talento para falar en público.
E así, moi sincero, que dirixe-me, que a experiencia
Creo que o meu primeiro ano, para realmente asinar para Harvard Computer Society, que
é o grupo no campus que ten varias conferencias técnicas
e outras cousas.
E eu asumir o seu ensino seminarios e, polo tanto,
tivo unha oportunidade, unha oportunidade marabillosa,
para comezar a traballar sobre exactamente iso.
Pero tamén, eu tiven unha oportunidade durante esta experiencia
ensinarme todo o máis HTML.
E así eu acabo adiando a noite pasada por mirando a través do sitio web baseado en HTML
Eu fixen en 1997 como, 98, para o meu campaña que se parece iso aquí.
Sei.
>> Because-- e, por suposto, o aviso previo esta decisión deseño sorprendente en 1998
ou outros enfeites.
O primeiro que quere que os usuarios facer ao visitar a súa web
é ter que premer en outro enlace só para entrar no seu sitio web aquí co monxe
atrás como unha cortina envolta onde aparentemente miña plataforma de campaña era.
E iso é todo o que vai ter hoxe é só un screenshot.
Pero eu estaba lendo, como, meus carteis de campaña na noite pasada
e miña plataforma.
>> E eu estaba tan irritado co tempo.
A miña plataforma foi-- foi interesante.
Entón eu me calme desde entón.
Pero un día, eu vou correr de novo e espero que mellor fóra esta vez.
>> Entón, HTML, que a lingua na que eu fixen em-- que logo fará moi more--
é algo que estiven falando da tarde
e en gran parte o que supón agora que nos cambiamos para outras linguas.
Pero imos facer unha pausa por un momento e poñer algunhas destas cousas no contexto.
Así, nunha frase, o que é HTML?
>> Ou, o que é usado para?
Calquera?
Si.
>> Audiencia: Markup para sitios web.
DAVID J. Malan: Markup para o sitio.
Polo tanto, é unha linguaxe de reserva que permite estruturar unha páxina web.
Cabeceira sobe aquí, o título vai aquí, o corpo vai aquí.
Isto está en negra, este é italics-- este tipo de detalle.
>> OK, bo.
Entón CSS permite você- e eu tomou algunhas liberdades alí
co ousado orientados e cursiva porque que é mellor aplicado con iso.
CSS é-- o que?
Diga nunha frase.
Calquera persoa en todo.
Si.
>> Audiencia: enfeites e material, como forma de proxecto-lo.
DAVID J. Malan: OK, bo.
Adornos que permiten que para proxecto-lo ou estilizar el
con cousas como negra e cursiva e cores e tamén máis fino
posicionamento de gran de elementos.
É unha especie de permite levar as cousas a última milla, de xeito que se, por exemplo,
en Pset7, ten que notar no seu carteira de páxina se está neste momento
xa que unha táboa estándar que facer para amosar participacións do usuario
e diñeiro, probablemente, parece moi hediondo por defecto, sen espazo en branco.
Tipo Todo está cheo de xuntos en liñas e columnas.
>> Ben, cun pouco de CSS, como pode entender,
realmente pode axustar isto e facelo algo moito máis familiar e moi
máis bonito de ollar.
Entón CSS é a estilización de sitios web.
Pero, entón, lanzou unha linguaxe, PHP, o que nos permite facer o que?
>> Nós só facer o que?
Calquera.
Cómpre aventura alén o primeiro par de liñas.
Si.
>> Audiencia: xerar contido dinámico.
DAVID J. Malan: Perfecto.
Xerar contido dinámico.
E pode facelo en calquera número de idiomas.
Nós ocorrer para usar o PHP, xa que é en parte, de xeito semellante ao C sintaxe.
>> Pero o PHP fai exactamente iso.
Permite que xerar dinamicamente saída.
E algúns dos que a produción podería ser HTML, como temos benvida a facer normalmente.
E tamén, porque é unha linguaxe de programación, está
o mecanismo a través do cal podemos falar con bases de datos.
>> E podemos facer consultas para outros servidores como Yahoos
e programática facer nada realmente que podería
quere obrigar un ordenador para facer.
Entón PHP permítenos comezar saída dinamicamente o contido.
Entón, por esta lóxica, eu non teño un sitio dinámico de volta en 1998.
>> Era só unha páxina web estática.
O meu contido tivo que ser modificado por man con gedit ou algún equivalente.
Pero o PHP é o que usan ou podería usar, en vez diso,
para algo así como o Sitio Frosh IMS, que
era quere ter rexistros e xestionar unha lista de cousas que users--
están realmente cambiando ao longo do tempo, aínda que ocorra
para usar Perl, unha diferente linguaxe da época.
>> E entón, finalmente, nós introducimos SQL-- Structured Query Language.
Entón aínda outra lingua que se usa para que?
Usado para que?
Podemos aventura slight-- OK, non imos
para chegar máis lonxe que a orquestra aquí.
Audiencia: É un protocolo de usado para falar con bases de datos.
DAVID J. Malan: Un protocolo usado para falar con bases de datos.
Déixeme axustar.
É unha lingua natural utilizada falar con databases-- selecciona
e insercións e exclusións e actualizacións e, de feito,
ata máis recursos que aínda non mergullou
en, pero pode querer ter explore-- para explorar, por exemplo, un proxecto final.
Entón hai esas varias pezas.
>> E espero que Pset7, aínda súa especificación é moi longo,
é deliberadamente moito tempo para oriente-lo a través de como estas cousas poden todo
ser ingresaran xunto.
Agora, o luns, nós introducida noso último idioma
que imos presentar formalmente en course-- o que é, JavaScript.
Este, como PHP, é unha linguaxe interpretada.
>> Pero unha distinción fundamental Propuxen o luns
é que, mentres que o PHP está executando ou sendo interpretada no servidor, o que
neste caso, é o aparello CS50, ou pode ser algunha web comercial
servidor en Internet, JavaScript xeral
É unha linguaxe que funciona do lado do cliente Non servidor side-- no navegador.
O que quere dicir, exactamente como cando abrín Facebook se o código fonte e atopou todo
destes arquivos .js, a implicación era que cando visita Facebook ou máis
sitios estes días, comeza non só HTML, CSS, non só,
pero unha morea de JavaScript código, moitas veces en forma de arquivos .js.
E entón é a súa propia browser-- Mac ou PC-- que executa este código.
>> Pero o navegador executa.
Pode pensar nunha especie de sandbox.
Así que o código JavaScript non debe ser capaz de borrar arquivos no seu ordenador.
Ela non debe ser capaz de enviar un correo no seu nome.
O seu tipo de navegador restrinxe o que podes facer con el.
>> Entón, nese sentido, é un pouco menos poderoso, quizais, do que C.
Pero JavaScript pode, como un de banda, pode empregar o servidor,
pero imos tenden a non falar sobre iso nese contexto.
Entón agora imos amarra-los xuntos.
Unha semana máis atrás, presentamos algúns HTML na páxina web left-- super aburrido.
>> Só di Ola mundo.
E entón eu propuxen no dereito podemos especie de roubar ideas
da nosa discusión de estruturas de datos en C
e pensar sobre como iso xerárquica linguaxe de reserva da esquerda
poden ser deseñados ou aplicados na memoria como unha estrutura de árbore con nós de real
e punteiros e estes tipos de detalles.
Á dereita, a que chamamos que un documento DOM--
Obxecto Model-- que é só un xeito elegante de dicir árbore.
>> Agora, por que iso é útil para pense nisto deste xeito?
Porque agora con JavaScript, porque temos
código que obtén a desempeñar neste ambiente, o HTML real que é
foi enviado ao navegador xa e xa ten
procede na memoria pola navegador nunha árbore no seu ordenador de
RAM como esta, podemos utilizar JavaScript para realmente atravesar ou camiñar ou procura
ou cambialo DOM árbore con todo queremos.
Entón, en realidade, se pensar sobre facebook.com,
se usa o recurso de chat, se uso Gmail e recurso Gchat,
calquera cousa que ten mensaxes que veñen de novo e de novo
e, de novo, estas mensaxes son, probablemente, como, LI, etiqueta lista de elementos, quizais.
>> Ou quizais son só divs que seguen aparecendo
cada vez que recibir unha mensaxe instantánea.
E así, iso só significa que Facebook ou Google está facendo
é calquera momento que comeza a a mensaxe do servidor,
probablemente está a usar JavaScript só engadir outro nodo
para este tree-- outro nodo a este árbore que entón visualmente só mira
como unha nova liña de texto en pantalla.
Pero eles están inserindo para esta estrutura de datos.
>> Así como nas clases CS124 e outros, vai
realmente escribir máis código contra estruturas de datos como este.
Pero, por agora, en JavaScript, imos só supor
temos toda esa función de balde a partir da propia linguaxe.
Entón, imos ollar un exemplo.
>> Déixeme abrir un ficheiro chamado form.html.
É super sinxelo.
E só mira como esta.
>> O CSS, ningún pensamento de estética.
É puramente funcional e ao parecer, eu son
pedindo un correo electrónico, un contrasinal contrasinal e, a continuación, unha comprobación
a aceptar os termos e condicións.
Que o código fonte para este parece que pode ser algo
podes imaxinar cun pouco de pensamento agora.
Eu teño unha marca de formulario aquí.
>> Unha acción aparentemente está indo ir a un ficheiro chamado register.php.
O método que eu vou usar é quedar.
E entón eu teño un texto campo cuxo nome é e-mail.
>> Eu teño un campo de contrasinal cuxo nome é contrasinal.
Teño outra campo de contrasinal, cuxo nome
é a confirmación dun tanto arbitrariamente.
É só un parámetro HTTP.
>> E, entón, non usei eses excepto desde os IMS Frosh demo en class--
unha caixa de verificación que se só tipo é igual a cheque.
E eu vou chamar ese acordo.
Entón eu medio que arbitrariamente, senón convenientemente chamada neses campos.
De xeito que agora, cando esta forma queda presentado, imos ver o que acontece.
Se eu fai malan@harvard.edu, Vou facer un contrasinal de carmesim.
Vou facer un contrasinal de nada.
Non imos cooperar.
>> E eu non vou marcar a caixa.
Déixeme prema en rexistrar.
E di que, hm, está rexistrado.
Non é realmente.
>> Pero a URL cambiou.
Así, esta forma foi claramente permitido someterse a register.php.
Pero presuntamente, debería ser pegando algúns deses erros.
Agora, en Pset7 e algúns dos nosos exemplos de clase,
que, en xeral, imprimir unha gran mensaxe de erro vermello aquí
dicindo, o nome en falta, ou falta contrasinal.
Nós fixemos iso antes e temos done detección de erro do lado do servidor.
>> Pero moitos sitios estes días facer a detección de erros do lado do cliente
en que a URL non cambia.
A páxina enteira non actualizar.
Obtén un feedback instantáneas desde o navegador.
Quizais algo sae vermello.
>> Quizais recibe un pop up.
Pero non perda tempo enviando para os datos do servidor que é incompleto.
Entón imos ver como podemos acadar este recurso tamén.
>> Déixeme ir form1.html, parecer o mesmo.
Pero se esta vez fago malan@harvard.edu e eu tecleo carmesim
e eu non cooperar máis pero prema Register, teña en conta o momento.
Non é a solución máis sexy.
Eu, polo menos, peguei este erro.
E eu usei a alerta función en JavaScript--
que estamos a usar só en clase.
En xeral, non debe usar este porque pode rapidamente saír
de control.
Pero contrasinais non coinciden é o erro.
>> Deixe-me ir adiante e prema en Aceptar.
Pero o que o principal argumento aquí é que a URL non se alterou.
Desperdicio Entón eu non estou incómodo hora do servidor pedíndolle
unha pregunta que eu podería descubrín a resposta para min mesmo.
>> E o usuario, aínda que falado sobre iso
máis tempo do que o usuario de vai pensar sobre iso,
vai ter un feedback instantáneo.
Non hai ningunha latencia con a liña de rede.
Entón, imos ollar para este código fonte.
>> Miradas Form1.html estruturalmente semellante aquí enriba.
O formulario é de feito o mesmo.
Pero imos ver o que eu fixen aquí.
E hai diferentes formas de facelo.
E eu fixen o máis directo seguidor, pero non forma máis elegante aínda.
Eu teño unha etiqueta script.
Eu, entón, chamar document.getElementById ("rexistro").
E eu almacenar este valor na forma, unha variable.
>> Entón o que foi que eu fixen?
Pode pensar en document.getElementById como
unha función especial que JavaScript lle dá
que literalmente lle ofrece un punteiro para un dos nós
ou rectángulos nesta árbore.
Polo tanto, agora que é o que a nosa variable de formulario en JavaScript é realmente apuntando.
>> Entón, agora a sintaxe é diferente C. Pero estamos facendo algunhas cousas aquí.
Un deles, que é un pouco raro buscar, certamente contra C.
Pero mire para liña 35.
Así, no form.onsubmit esquerda.
Lembre que é onsubmit como un campo nunha struct.
Se pensas que a variable forma é só ser un struct C,
pode ter algúns campos.
>> Volver o día, tivemos nomes estudantes, IDs, casas, este tipo de campos.
Basta pensar onsubmit como outro campo.
Pero é un campo especial xa que o navegador é pre-programado para esperar
.onsubmit para non ser un valor como un número ou unha cadea,
pero para realmente ser unha función ou o enderezo dunha función
na memoria do ordenador.
>> E, de feito, é o que esta palabra clave aquí fai.
Este di, dáme unha nova función.
Pero cal é o seu nome será, ao parecer?
>> Pensando luns.
Qué é o nome do presente derivada función sintaxe?
Non, quero dicir, hai claramente ningún nome associated-- certamente
non no que eu destaque aquí.
>> Pero iso é realmente Aceptar.
Esta é unha función anónima, é un función lambda como algúns poden chamalo.
E iso significa só aínda é unha función.
É só, non pode chamalo polo nome.
Pero iso é OK.
Porque unha vez máis, o navegador foi pre-programados por empresas como Google
ou Microsoft ou Mozilla ou outros para só sei que se o campo .onsubmit
dentro dun elemento de formulario ten o valor, trata-lo como un function--
un punteiro de función, se quere.
E chamalo cando o formulario é enviado.
>> Entón, o código debe ser executado cando o formulario é enviado?
Ao parecer, todo dentro da chaveta.
E este é só estilística.
>> Podes facelo como tendemos a facer en CS50.
Pero en JavaScript, a maioría da xente tenden a perder la na mesma liña
só porque é máis claramente asociado con esa función contrasinal.
Entón agora o que estou facendo?
>> Se form.email.value igual equals a cadea baleira é nada, é aquí
unha alerta que vou dicir, ten que proporcionar o seu enderezo de correo electrónico,
e, a continuación, voltar falso.
E é esa falsa retorno que impide que a forma de ser sometido.
Non obstante, se o valor do contrasinal é en branco, eu vou berrar co usuario
e dicir, ten que proporcionar un contrasinal.
>> Mentres tanto, as cousas están quedando un pouco máis chique aquí.
Se non fai form.password.value igual form.confirmation.value,
o outro campo, grite o usuario que os contrasinais
non corresponden á medida que non hai un momento.
E entón que é un pouco máis sexy porque eu
sei que eu sabía que conceptualmente Comprobarase é o nome dunha caixa de selección.
>> Entón eu só podo usar unha exclamación punto de dicir se o cheque non é
checked-- é o booleano valor, verdadeiro ou false--
Vou gritar ao usuario por este motivo.
Se non, se pasar todas estas condicións,
imos voltar certo.
Deixe o formulario ser sometido.
E iso vai ocorrer axiña.
>> Imos escribir carmesim.
Imos comprobar a caixa, faga clic en Register.
E agora eu vou ata o destino.
Agora, non hai base de datos alí.
Non hai nada de interesante en register.php.
Eu só precisaba de algo para realmente falar.
Entón deixe-me facer unha pausa, aquí.
Calquera dúbida sobre o que acaba de facer ou o que algúns deste novo sintaxe é?
OK, non é?
>> Audiencia: Así, calquera caixa de verificación automaticamente un booleano.
Non ten que declaralo lo así.
>> DAVID J. Malan: Correcto.
Calquera opción que é enviado a vostede de un formulario HTML ao seu código JavaScript
será tratado, si, como un Booleana value-- verdadeiro ou falso.
É unha boa pregunta.
Considerando que os outros valores, de Por suposto, ser o texto, cordas aka.
>> Todo ben, entón me deixe rebobinar un pouco máis.
Cal foi o punto de todo este?
Só queda claro.
Tipo, a xente xa sabe, mesmo de Pset7 e mesmo de charla da semana pasada
exemplos, que podemos, obviamente, comprobar $ _GET $ _POST Ver se o usuario dános
un valor baleiro.
Teña en conta que da función baleira en PHP.
>> Entón, só para quedar claro, o que é un dos motivos que tamén pode
quero facelo a comprobación de erros dentro do navegador?
Cal é a motivación aquí?
Si.
>> Audiencia: Máis rápido, e non fai enviar datos inútiles para o servidor.
DAVID J. Malan: Good.
É máis rápido.
Non manda inútil os datos ao servidor.
>> Entón volver máis resposta inmediata.
E, en xeral, o usuario experiencia é mellor.
Pense sobre a alternativa.
>> Se, por Gmail-- e foi o caso hai moitos anos.
Supoña que vostede ten un novo correo o Gmail conta, pero a única forma a través da
a ver que é, como, actualizar a páxina enteira.
Ou supoñamos que prema unha ligazón para ler un correo electrónico.
>> Todo ten que recargar así que se pode ver o correo electrónico.
Ou Facebook-- recibe unha mensaxe de chat.
Non velo ata que recargar a páxina ou prema nalgún enlace.
>> Como, iso sería unha terrible experiencia do usuario irritante.
E iso é o que era, claramente, de volta cando eu execute para UC
e web foi moito menos dinámico e JavaScript non foi tan popularizado
como é agora.
E as cousas están quedando moi máis dinámico e moito máis
lado do cliente nese sentido.
>> Pero hai un problema aquí, e esta é unha especie de pegadinha irritante.
Só porque engade lado do cliente detección como isto non significa
pode ou debe abandonar detección do lado do servidor.
Vostede esencialmente quere poñer o seu comprobación de erros en ambos os lugares.
Porque o que foi un da lección aprendida
do artigo que lin algúns fragmentos con deste system-- CMS estúpido
Content Management System-- que era implantación do sistema de autenticación,
seu login dende cal mecanismo?
JavaScript.
>> Audiencia: JavaScript.
DAVID J. Malan: JavaScript, exactamente, non?
Estaba usando JavaScript.
E literalmente, vostedes teñen desempeñado un pouco probablemente
co inspector de Chrome.
E se eu puider atopalo, inspeccionar elemento.
>> Deixade-me pasar a facer todas as opcións de Chrome.
E é así que é doado desactivar o Javascript nun navegador.
Consulte, non máis Javascript.
>> Entón, para ser xusto, moi web nos días de hoxe
só vai romper porque Gmail e outros sites--
Facebook-- asumir que JavaScript está activado.
Pero se está facendo algo estúpido como só validar a entrada usuarios
e comproba se hai erros no lado do cliente,
un adversario podería facelo facilmente.
E despois aínda máis intelixente adversario como vostedes
agora pode utilizar o Telnet ou onda ou ordes de liña de comandos só
e realmente enviar mensaxes ao servidor que tampouco son erro comprobado.
>> Polo tanto, este é un decisión interface de usuario
que é unha técnica efectiva improvement-- implementación
lado cliente algo así.
Entón agora un rápido ollar, pero despois Vou retrasar a camiñada en liña
a través dun presente.
En forma de dous, que realmente pasou por e limparon o código un pouco.
Pero déixeme retrasar a unha dos vídeos que probablemente vai
incorporar en Pset8 que mostra unha sintaxe semellante usando unha biblioteca chamada
jQuery, que é un super, super biblioteca popular en JavaScript
que, francamente, a maioría da xente é só usar estes días
e mesmo confundir como propio ser JavaScript.
>> E iso tende a involucrar algúns cifrões
e palabras clave como documento en parénteses aquí.
Pero, de novo, déixeme retrasar a algúns tutoriais máis lentos en liña
en vez de estar amarre en só sintaxe.
Imos seguir adiante para algo un pouco máis frío
en termos de aplicacións deste.
>> Así, en particular, déixeme ir adiante e abrir este aquí.
Veña.
Alí imos nós.
>> Déixeme abrir esta foto aquí.
Innecesariamente complicado mirando, pero
describe unha técnica chamada AJAX-- Asynchronous JavaScript e XML, onde
o X para XML é realmente deixou de ser realmente utilizado.
El tende a usar algo outro chamado JSON.
>> Pero aquí é como algo como Google Maps ou Google Earth funciona.
Imos tentar que en tempo real, en realidade.
Deixe-me ir adiante e abrir ata Chrome no meu navegador.
>> E déixeme entrar, dicir, maps.google.com.
E, de feito, se é vello abondo para lembrar que,
como, MapQuest era como volver no mesmo día, e quizais eles aínda funcionan así.
Cando se usa para buscar something-- 33 Oxford Street, Cambridge, Mass,
imos facer isso- ti sería, en realidade, se
quería para desprazarse cara a arriba e abaixo, esquerda e dereita,
vostede ollaría como un gran frecha na parte superior, e
ía amosar-lle outro marco do mapa aquí.
Ou debería premer á esquerda e ía máis aquí, ou outro click
e ía por aquí.
Pero, en vez destes días, nós, por suposto, só
tomar por certo que podemos ir en torno de Cambridge moi rapidamente
só premendo e arrastrando.
Pero teña en conta que hai algúns fallos.
>> Se eu fai iso rápido abondo, o que parece estar a suceder
como eu arrastrar algo demasiado rápido para o ordenador para manter-se?
O que ve?
Si.
>> Audiencia: Os píxeles non actualizar.
DAVID J. Malan: O píxeles non actualizar.
Hai actually-- e podía ver iso, en realidade,
se está vendo en liña e descanso este é realmente atrasa as cousas
para once-- vai ver que hai tellas, cadrados, ou rectángulos que
están ausentes do mapa ata unha fracción de segundo despois, máis datos,
máis imaxes realmente aparecen na pantalla.
E, de feito, se facemos iso mirando ata Chrome's-- digamos, Chrome--
imos ver.
Non podemos facer iso.
>> Oh, berros.
Imos abrir maps.google.com.
Deixe-me facer o diálogo máis novo.
>> Voltar para 33 Oxford Street.
Cal foi o sitio que eu estaba recentemente?
Tiven que, como, divertido privado a a min mesmo que eu tiña entón mensaxe instantánea
calquera amigo que estaba en liña que querían escoitalo.
Hai algún sitio.
Creo que é por iso Comcast-- un gran ISP americano.
Pode, cando rexistrarte para novo cable servizo de módem ou servizo de televisión por cable,
eles teñen unha forma moi razoablemente onde pedirlle ao seu enderezo.
E ten esa incrible función chamada auto completa,
como Google, que comeza a encher na resposta á súa pregunta.
>> O problema é que eles fan auto completa sobre as primeiras cousas que escribe.
Entón, se comezar a escribir en 33, el pode amosar-lle literalmente toda casa
en América, que comeza co número 33
antes de continuar espero que escriba máis.
Entón, se escribir 33 Oxford, a continuación, el mostra as rúas
en América, que ten 33 Oxford en o seu nome, con independencia da cidade
que está en.
>> E entón continuar a escribir.
E, finalmente, el entende que non facer oferta de servizos para a súa casa en Cambridge
ou algo parecido.
Pero o punto é, este é o máis implantación asinino de auto
completar nunca.
>> E eu só vou off sobre esta tanxente novo.
Pero hai boas maneiras de usar JavaScript e malos camiños.
E iso non é necesariamente o mellor.
>> Pero o punto aquí, antes de que este discurso, era a apertura de ferramentas aquí
e abrir as ferramentas de desenvolvemento, como temos animou antes,
e para asistir a Rede guía como eu premer moi rápido.
E teña en conta un grupo enteiro de obter pedidos pasou.
Todo isto aconteceu dende que eu arrastrado.
>> E o máis probable, de feito moitas destas liñas
agora son imaxe JPEG barra Tipos MIME ou tipo de contido.
Iso porque o cromo está facendo cada vez que eu clic e arrastra, prema
e arrastrar, é que é entender, oh, I que ir pedir a Google para a tella
no mapa que está aquí, rapidamente a descarga vía HTTP,
e, a continuación, engadir lo ao chamado DOM para os navegadores web en árbore memoria
representación de maneira que o usuario, min, ve que a tella actualizado.
E iso é debido a unha técnica chamada AJAX.
Volver o día, realmente foi o caso de que se
quería cambiar o que está na pantalla, que tería que premer enriba, abaixo, á esquerda,
dereita.
E, a continuación, unha nova páxina se abrirá.
Pero estes días, todo é máis dinámico.
Acontece na forma que nos seres humanos faría espero que realmente faría de forma interactiva.
E el consegue iso forma dunha técnica chamada
AJAX, que é quizais o mellor explicada por un exemplo.
En primeiro lugar, deixe-me ir adiante e abrir un ficheiro
chamado quote.php en código de distribución de hoxe.
>> E, a continuación, deixe-me facer berros symbol--.
Deixe-me facer símbolo = GOOG por só algunhas accións.
Ou, en realidade, imos facer o un do Pset GRATIS.
Intro.
>> E agora o que eu volver.
Polo tanto, este é realmente un ficheiro PHP que eu curto
escribiu que simplemente pide código da función de investigación de Pset7
e cospe usando este chaveta e citas e notación de dous puntos, ao parecer,
prezo da acción actual ao empresa que pasa na vía get.
Polo tanto, esta é diferente de máis do que temos
feito en que o aviso que estou literalmente cuspindo
o que parece ser de código JavaScript.
>> De feito, este é un obxecto JavaScript.
De feito, só para ser máis claro, JavaScript Object Notation-- JSON--
é só un xeito elegante de dicir que pode representar datos en JavaScript moi
como pode en PHP usar pares de valores clave.
Entón, se eu quería declarar unha variable en JavaScript
a representa Zamyla, para instance-- un struct para Zamyla--
e imos chamalo estudante, esta variable.
O seu ID é un, casa é Winthrop, eo nome é Zamyla.
>> Pero tamén pode ter unha matriz de obxectos.
Entón, se realmente quería ter unha matriz en JavaScript que contén
varios destes obxectos, este tempo que representa o persoal,
Podería ter estes tres anacos de código de volta
a volta atrás para estes tres ex-membros do equipo.
Así, a sintaxe, bastante semellante ao ambos-- para PHP.
Pero iso é especialmente JavaScript.
É notación obxecto.
Entón, o que é útil para este?
>> Se eu escribir un código que cospe JSON-- JavaScript Object Notation-- cousas que
parécese iso ou cousas que Parece que a estrutura da Zamyla,
Podo realmente usar este en programas que eu escriba.
Déixeme ir ajax0.html.
E este non moi demasiado-- atención dada á estética.
Pero mira o que acontece.
>> Deixe-me ir adiante e escriba gratuitamente aquí.
Prema obter cita.
E teña en conta o URL non cambiou.
Pero eu puiden un pop up con parecer prezo das accións centavo de hoxe de US $ 0,15.
Entón, non tan malo así.
Pero a diferenza é que dalgún xeito, Estes datos viñeron de volta para min directamente.
Pero imos dar un paso na dirección algo máis familiar.
Na versión dun deste, déixeme escriba libre de novo, faga clic en Obter cita,
e agora- oh, esta foi de feito, a versión jQuery.
Entón imos me-- eu non fixen avanzar moi lonxe o suficiente.
Deixe-me ir á versión dous, que é onde eu quería.
Teña en conta o que fixen aquí.
Eu teño unha web página-- un super versión simple de calquera páxina web
pode usar hoxe, cun campo de texto aquí por libre e entón, ao parecer, só
texto.
>> Esta non é unha forma aquí, aparentemente.
Pero se eu premer en obter cita, teña en conta a miña páxina web
está a piques de cambiar, como se eu só teño unha nova mensaxe instantánea
ou como se eu só cambiou o mapa e necesario para obter máis datos
engadidos dinamicamente á páxina web sen a URL cambio eo usuario
experiencia estar detido.
En realidade, eu aínda estou no exactamente o mesmo ajax2.html Place--.
>> Entón, imos ollar só para este exemplo para ver como isto está a suceder.
Déixeme entrar ajax2.html.
E teña en conta a forma por primeira vez.
>> Aquí abaixo, eu estou volvendo off auto completa.
Ás veces queda irritante se o navegador
está intentando amosar-lle toda a súa historia.
Así, pode facelo en HTML só dicindo auto completar off.
>> Teño dado este texto dun campo symbol-- si, unha identificación de símbolo.
E agora, esta é unha característica interesante.
Non falamos de extensión, pero pode pensar sobre iso
como unha marca de parágrafo ou div tag.
É o que se chama de in liña elemento, que
significa que non vai conseguir un parágrafo romper enriba e debaixo del.
El só pode ir en liña sen acadando o equivalente a entrar.
Entón, eu teño dado este anaco de HTML a ser determinado un identificador único
que arbitrariamente chamado prezo.
E eu teño un botón Enviar.
>> Porque agora ata aquí- e este é realmente super incrible código quão pouco
pode escribir para facer relativamente puro coisas-
entender o que eu teño feito ata aquí, se eu rolar para arriba a cabeza desta páxina.
Eu xa incluído por primeira vez en miña cabeza unha etiqueta script
que, en realidade, fai referencia a unha JavaScript arquivo noutro lugar.
Esta é a partir da organización que escribe jQuery,
e iso é só darlle o último versión da súa biblioteca jQuery.
>> Entón, iso é como afiada incluír en C ou esixir en PHP.
Usa a etiqueta script cun atributo de orixe.
Pero agora o meu propio código vai ser bo aquí.
>> Repare que eu teño unha función chamada Quotes.
E parece un pouco enigmática, a primeira vista.
Pero imos xogar con este apart.
Déame unha variable chamada URL.
Asignar-se literalmente esta cadea.
Así, aspas, comiñas dobres en JavaScript só me dá unha corda.
O que fai o máis facer?
Concatenação.
>> Polo tanto, este é agora a sintaxe jQuery que leva un pouco para acostumar.
Pero iso significa só ir buscar-me o DOM nó cuxo identificador único é símbolo.
A hashtag non significa símbolo identificador único.
>> O sinal de dólar no parénteses significa só, enrole esta
jQuery nunha especie de segredo salsa de modo ten unha función adicional.
E, a continuación, é aparentemente .val unha función, ou como se di agora,
un método dentro deste nodo que só lle dá o valor.
Así, en breve, feo e confuso como iso parece, a primeira vista,
isto significa só ir con o usuario inseriu en, poñelas ao final da cadea
concatenando-lo.
Iso é todo.
>> Entón, agora, tres últimas liñas.
Pode usar unha morea de función de tres liñas.
Este sinal de dólar, como un de lado, é só un apelido
para unha variable global especial chamado literalmente jQuery.
>> Sinal de dólar só parece legal.
Así, a comunidade jQuery só unha especie do usou como o seu símbolo especial.
Isto non quere dicir que iso significa en PHP.
En JavaScript, sinal de dólar é só como unha letra do alfabeto
ou un número de variables.
>> Pode só telo como o nome.
Só parece legal.
Así, a comunidade adoptou como un apelido
para a súa propia biblioteca chamada jQuery.
>> E é super popular.
Polo tanto, obter JSON é exactamente iso.
É unha función que o persoal do jQuery escribiu
que recibe JSON dende un server-- JavaScript Object Notation.
Polo que URL é que vai para obter esta información?
Ao parecer, desde este URL aquí.
>> E o que debe facer como o navegador Así que recibe de volta esa resposta?
E esa é a maxia do AJAX, por así speak-- asynchronous JavaScript en XML.
É difícil ver con tal exemplo simple como tivemos aquí.
>> Pero este era asíncrono en a sensación de que o meu código cando
executado enviou unha mensaxe ao servidor para ir buscar-me un pouco JSON.
E isto aconteceu super rápido que eu teño unha resposta.
Pero o que é interesante é que esta liña de código non colgar meu ordenador.
>> Eu non vin unha icona de spinning.
Non perdín a capacidade de mover o rato.
O meu navegador era realmente perfectamente ben.
>> Debido a forma como JavaScript manipula o resposta do servidor é como segue.
Vostede rexistrar o que chamaría unha función de retorno, que
Significa só que, hey, JavaScript.
Así que o servidor responde con JSON,
chame esta función anónima.
>> E por favor, pasou a esta función calquera que sexa a secuencia de servidor cuspir
como un argumento chamado de datos.
Polo tanto, noutras, palabras, se Estou montando dinamicamente
quote.php un URL que pasa neste símbolo como LIBRE ou GOOG ou outros enfeites,
Eu digo, a continuación, JavaScript ir buscar este URL.
Lembre que o navegador vai voltar algo
que parece que viu earlier-- iso.
>> E o que o segundo argumento aquí para obter JSON está dicindo
é chamar esta función cando o servidor recibe de volta
se é 10 milisegundos a partir de agora é 10 segundos a partir de agora.
E así que fai, engade o prezo para a páxina.
Esta sintaxe aquí só Significa ir buscar o no
da árbore cuxo único identificador é preço-- ese período vimos anteriormente.
>> Este método chamado HTML só di, vai substituír
o código HTML que está aí con data.price.
O que hai de data.price?
Ben, o navegador, lembre, amosoume esta volvendo.
Polo tanto, este é un dato.
>> E por iso é un pouco enigmática para ver as comas aquí.
Pero, en realidade, deixe-me facelo.
Déixeme só pegar este moi rápido en gedit
e amosar-lle como mostramos Estrutura Zamyla anteriormente.
>> Que o servidor está enviando de volta é un pequeno obxecto que se parece con isto.
E así é data.price só me dando 0,1515.
Entón, unha morea de movemento pezas aquí todo dunha vez.
>> Pero as principais leccións é que temos esa capacidade
para facer HTTP adicional solicitudes mediante JavaScript
sen ter que recargar a páxina.
E entón podemos realmente cambiar a páxina web en tempo real.
E verifícase que JavaScript e outras linguaxes
pode ser usado non só agora de mutación páxinas web,
pero para realmente escribir software nun ordenador real,
non só confinada ao Chrome ou similares.
>> De feito, se-- Colton, que quere unirse a nós para atrás ata aquí
co seu código de laboratorio, e Chang tamén?
Imos adiante, despois de falar funcións anónimas e retorno
e realmente probar sorte aquí cunha demostración en directo con sangrado
tecnoloxía de punta, unha das estes dispositivos Elite movemento.
Agora, este dispositivo, recall, é un dispositivo USB pouco
ben isso-- que é beautiful-- que se conecta ás portas USB.
>> E entón el ofrece entrada baixo a forma de xestos humanos
usando detección por raios infravermellos, esencialmente, os movementos do seu brazo.
Así, mentres que María intentou antes era muscular,
realmente sentindo o que está cambiando seu brazo, que é o infravermello baseado.
Por iso, está buscando movementos dentro o tipo de esfera de un pé ou así
do dispositivo en si.
>> Entón por que non podo ter unha facada neste primeiro?
E imos adiante e xogar vostede enriba da sobrecarga aquí.
Entón, imos poñer o portátil de Colton aquí.
Temos Andrew na TV.
E o que quere facerme primeiro?
>> Colton: Dalle só poñer as súas mans sobre este cara
e vai ver algúns fabuloso glitter.
>> DAVID J. Malan: Very nice.
Isto todo está a suceder en tempo real.
Está ben.
Todo ben, e si.
Tan bo.
Todo ben, o que máis podemos facer?
>> Colton: Vaia á seguinte pantalla e ver.
>> DAVID J. Malan: Todo ben.
>> Colton: Un xogo divertido onde comeza a facer robots.
>> DAVID J. Malan: Todo ben, entón iso é mans falsos me amosando o que facer.
Colton: Si ir moi por diante e coller un dos bloques
e poñelas enriba de que o corpo do robot.
DAVID J. Malan: Ah, aí está a miña man.
Oh.
OK, encantador.
Espere un minuto, Aceptar.
Alí imos nós.
>> COLTON: Eu fixen unha no accidente.
>> DAVID J. Malan: OK, eu vou incorporarse este cara.
Caramba!
Cando estabamos a practicar esta última noite, xa sabe o que iso converteu?
>> Así.
Está ben.
Próximo?
>> Colton: Claro.
>> DAVID J. Malan: Todo ben, e hai un terceiro.
Todo correcto.
Colton: E neste, comeza a--
DAVID J. Malan: Ah, un deste bonito.
Colton: --yeah, escoller distante desta flor.
DAVID J. Malan: Aceptar.
Non?
Perdidas.
>> Colton: Oh, alí vai.
>> DAVID J. Malan: Ah, Olle para iso.
Moi bo.
Ben, por que non 'tomamos fóra un voluntario aquí
que quere vir cara arriba.
Como preto de alí no verde, non é?
>> Todo ben, e imos have-- no canto de facelo, algúns de vostedes
pode coñecer este xogo aquí- cortar a corda, quizais?
Imos ver.
Temos os nosos lentes aquí?
>> Está ben.
Grazas.
Cal é o seu nome?
>> Audiencia: Laura.
>> DAVID J. Malan: Laura?
Bo ver.
Se non lle importa de poñer Google Glass máis dos seus lentes.
Este é Colton.
>> Colton: Ola.
Pracer en coñece-lo.
>> DAVID J. Malan: OK, imos ao redor.
Todo ben, entón o que está indo a facer aquí, despois de xogar iso antes,
é poñer a man sobre o Leap Movemento aquí.
E agora a súa frecha debe moverse.
Oh, non tiña.
>> Audiencia: Non.
>> DAVID J. Malan: Nós Non quero deixar aínda.
OK, agarde.
Por aquí.
Entón, observe como realizar o seu dedo sobre algo,
o rato comeza a ir verde, que é como clic.
>> Entón pase o rato sobre Play.
E só un dedo é moi ben.
E agora clic na pequena cara verde do lado esquerdo.
E agora Manteña ata que enche verde.
Boa.
Agora, como, nivel un enriba.
>> Audiencia: Si, queremos nivel un, aquí.
>> DAVID J. Malan: Good.
OK, entón todo o que tes que facer é cortar a corda.
O cursor é o único branco alí en baixo.
>> Moi bo.
Todo ben, está a piques de ir máis difícil.
Entón Manteña o dedo sobre próxima agora.
Boa.
Este é difícil.
>> Audiencia: Oh merda.
Está ben.
Ela quere ir por ese camiño.
Oh merda, isso--
>> DAVID J. Malan: Yeah.
Obxectivo secundario é facer que todas as estrelas.
Todo ben, axiña.
>> Imos ver se pode obter este terceiro.
Boa.
OK, vaia alí.
>> Claro.
Oh, moi bo.
Todo correcto.
>> Entón, por que non atrasar aquí hoxe?
Deixe ninguén vir enriba que quere xogar.
Agradecemos moito a Laura noso voluntario.
E imos velo o luns.
>> Audiencia: Probablemente vai querer iso de volta.
>> COLUMNA 2: Na próxima CS50--