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. [00:01:09] Todo correcto. E cal é o seu nome? [00:01:13] Audiencia: Uh, María. [00:01:14] DAVID J. Malan: María, bo che ver. Veña ata aquí. Deixe-me presentar-lle Colton. Colton, esta é Maria. [00:01:21] Colton: Ola, pracer de coñece-lo. [00:01:23] 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. [00:01:33] Colton: Primeiro imos ter que conectar esta nas cousas. [00:01:36] 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. [00:01:41] Colton: Imos facelo. [00:01:42] 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. [00:02:00] 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. [00:02:30] COLTON: Vai como esta. E así. E todo o camiño á dereita. Volva. [00:02:35] DAVID J. Malan: Aceptar. Perspectiva diferente. Non é vostede. Somos nós. [00:02:40] 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. [00:02:52] Aquí imos nós. Este sería un bo momento para CS52X. Alí imos nós. [00:02:57] Moi bo. Está ben. Polgar para mindinho. [00:03:02] Moi bo. Estender os dedos. Boa. Onda correcta. Está amosando curiosamente vostede coa hand-- esquerda [00:03:17] Colton: Si, iso é raro. DAVID J. Malan: Onda de á dereita e seguir adiante. Fast forward para saltar ou seguinte. É iso mesmo Onda Aceptar. [00:03:25] MARIA: Eu don't-- esperar. [00:03:26] DAVID J. Malan: Necesita axuda? [00:03:28] 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. [00:03:38] DAVID J. Malan: Non? Quizais acadar o seu brazo algo máis recto e facelo máis abrupta como este. Si, OK, imos alí. [00:03:48] MARIA: Eu sinto moito. DAVID J. Malan: Non é culpa súa. Colton: É bo. DAVID J. Malan: All Right. Bom-- [00:03:56] 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. [00:04:10] 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. [00:04:26] MARIA: Grazas. [00:04:28] 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í. [00:04:51] COLUMNA 1: Señoras e señores, un máxico chamado Josh. [00:05:04] 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. [00:05:18] 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. [00:05:45] 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? [00:06:23] -Wazzap? [00:06:24] 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. [00:06:42] Só pode ir máis rápido e máis rápido. Pode haber algúns competidores que, por desgraza, son eliminados! [00:06:54] Eu amo esta empresa. Si! Eu son un PC, e eu amo esta empresa! [00:07:08] Desenvolvedores, programadores, desenvolvedores, desenvolvedores, desenvolvedores, desenvolvedores, desenvolvedores, desenvolvedores. Si! Os desenvolvedores web! [00:07:19] Os desenvolvedores web! Os desenvolvedores web! Escoita o que máis lle obter, sen custo adicional! [00:07:28] 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! [00:07:35] Gravalos en CD! Publicala conxuntamente no MSN! Vostede envialos amigos! [00:07:40] 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. [00:07:52] Relación son como tiburón. Eles se moven para adiante ou morren. Realmente creo tecnoloxía empresas son os mesmos. [00:08:01] [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. [00:08:22] 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. [00:08:34] 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. [00:09:29] 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. [00:09:50] 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. [00:10:03] 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? [00:10:18] Ou, o que é usado para? Calquera? Si. [00:10:20] 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. [00:10:33] 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. [00:10:46] 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. [00:11:18] 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? [00:11:36] Nós só facer o que? Calquera. Cómpre aventura alén o primeiro par de liñas. Si. [00:11:40] 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. [00:11:50] 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. [00:12:03] 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. [00:12:16] 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. [00:12:35] 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. [00:13:09] 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. [00:13:25] 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. [00:14:03] 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. [00:14:17] 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. [00:14:34] 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. [00:14:56] 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. [00:15:35] 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. [00:15:57] 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. [00:16:09] Déixeme abrir un ficheiro chamado form.html. É super sinxelo. E só mira como esta. [00:16:15] 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í. [00:16:32] 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. [00:16:40] 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. [00:16:49] 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. [00:17:10] E eu non vou marcar a caixa. Déixeme prema en rexistrar. E di que, hm, está rexistrado. Non é realmente. [00:17:16] 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. [00:17:37] 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. [00:17:48] 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. [00:17:56] 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. [00:18:19] 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. [00:18:30] 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. [00:18:40] 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. [00:19:04] 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. [00:19:21] 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. [00:19:42] 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. [00:20:02] 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? [00:20:09] 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í. [00:20:21] 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. [00:20:46] Entón, o código debe ser executado cando o formulario é enviado? Ao parecer, todo dentro da chaveta. E este é só estilística. [00:20:53] 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? [00:21:03] 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. [00:21:21] 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. [00:21:40] 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. [00:21:56] 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 é? [00:22:17] Audiencia: Así, calquera caixa de verificación automaticamente un booleano. Non ten que declaralo lo así. [00:22:21] 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. [00:22:36] 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. [00:22:54] 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. [00:23:06] 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. [00:23:12] Entón volver máis resposta inmediata. E, en xeral, o usuario experiencia é mellor. Pense sobre a alternativa. [00:23:17] 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. [00:23:29] 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. [00:23:36] 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. [00:23:49] 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. [00:24:20] 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. [00:24:30] 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. [00:24:38] 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. [00:25:05] 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. [00:25:37] 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. [00:25:50] Así, en particular, déixeme ir adiante e abrir este aquí. Veña. Alí imos nós. [00:25:59] 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. [00:26:13] 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. [00:26:21] 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. [00:26:59] 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. [00:27:07] 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. [00:27:31] Oh, berros. Imos abrir maps.google.com. Deixe-me facer o diálogo máis novo. [00:27:36] 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. [00:28:04] 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. [00:28:25] 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. [00:28:34] 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. [00:28:40] 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. [00:28:57] 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. [00:29:53] 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. [00:30:05] 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. [00:30:27] 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. [00:30:53] 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? [00:31:17] 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. [00:31:34] 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. [00:32:14] 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--. [00:32:35] 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. [00:32:44] 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. [00:32:53] 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. [00:33:21] 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. [00:33:42] 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í. [00:33:52] 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. [00:34:08] 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. [00:34:21] 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. [00:34:43] 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. [00:34:55] 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. [00:35:07] Pode só telo como o nome. Só parece legal. Así, a comunidade adoptou como un apelido para a súa propia biblioteca chamada jQuery. [00:35:13] 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í. [00:35:27] 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í. [00:35:41] 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. [00:35:55] Eu non vin unha icona de spinning. Non perdín a capacidade de mover o rato. O meu navegador era realmente perfectamente ben. [00:36:01] 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. [00:36:18] 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. [00:36:42] 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. [00:37:01] 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. [00:37:14] 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. [00:37:27] 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. [00:37:39] 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. [00:38:00] 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. [00:38:25] 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. [00:38:46] 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? [00:39:00] Colton: Dalle só poñer as súas mans sobre este cara e vai ver algúns fabuloso glitter. [00:39:04] 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? [00:39:15] Colton: Vaia á seguinte pantalla e ver. [00:39:17] DAVID J. Malan: Todo ben. [00:39:19] Colton: Un xogo divertido onde comeza a facer robots. [00:39:21] 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. [00:39:41] COLTON: Eu fixen unha no accidente. [00:39:43] DAVID J. Malan: OK, eu vou incorporarse este cara. Caramba! Cando estabamos a practicar esta última noite, xa sabe o que iso converteu? [00:39:51] Así. Está ben. Próximo? [00:39:55] Colton: Claro. [00:39:56] 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. [00:40:14] Colton: Oh, alí vai. [00:40:15] 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 é? [00:40:27] 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í? [00:40:37] Está ben. Grazas. Cal é o seu nome? [00:40:39] Audiencia: Laura. [00:40:40] DAVID J. Malan: Laura? Bo ver. Se non lle importa de poñer Google Glass máis dos seus lentes. Este é Colton. [00:40:46] Colton: Ola. Pracer en coñece-lo. [00:40:48] 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. [00:40:57] Audiencia: Non. [00:40:58] 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. [00:41:06] 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. [00:41:16] Audiencia: Si, queremos nivel un, aquí. [00:41:20] DAVID J. Malan: Good. OK, entón todo o que tes que facer é cortar a corda. O cursor é o único branco alí en baixo. [00:41:28] 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. [00:41:39] Audiencia: Oh merda. Está ben. Ela quere ir por ese camiño. Oh merda, isso-- [00:41:44] DAVID J. Malan: Yeah. Obxectivo secundario é facer que todas as estrelas. Todo ben, axiña. [00:41:53] Imos ver se pode obter este terceiro. Boa. OK, vaia alí. [00:42:06] Claro. Oh, moi bo. Todo correcto. [00:42:11] 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. [00:42:18] Audiencia: Probablemente vai querer iso de volta. [00:42:21] COLUMNA 2: Na próxima CS50--