>> [Música tocando]
>> DAVID Malan: Este é CS50.
Este é o principio da novena semana.
E iso é o que foi 200 aniversario do Sr Boole.
Polo tanto, este é os bolseiros a quen nós aludiu
bastantes veces sobre o uso Variables booleanas verdadeiros e falsos,
1 e 0 e tal.
E este foi o de Google Homenaxe a el hoxe.
El virado 200.
Entón, se quere unirse a nós para xantar CS50,
Bótalle un ollo na ligazón na páxina web do curso.
E eses rostros e amigos como estes esperan por ti aquí en Cambridge.
Caras que estes esperan por ti en New Haven.
E, de feito, Ken en New Haven para os nadadores feitas
o que se chama un GIF animado de Eli aquí nunha recente lunch-- un GIF é aínda
outro formato de ficheiro gráfico, co que está familiar-- que
parece un pouco algo así.
Polo tanto, só unha secuencia de-- Aceptar.
Ninguén aquí en Cambridge está rindo.
Pero en New Haven, este é moi divertido, non?
Todo ben.
>> Polo tanto, unirse a nós alí.
Aquí en Harvard, En concreto, este mércores,
se vostede é un estudante de segundo ano de calouro ou even-- ou mesmo pensamento junior-- de toma de
un interruptor no ordenador ciencia, saber que haberá
ser un CS aconsellando xusto este Mércores, despois da aula
ás 4:00 PM no ordenador edificio de ciencias Maxwell Dworkin.
Imos poñer isto no curso de web mañá, tamén.
Donuts, me dixeron, será servido.
>> Todo ben.
Story-- tan divertido eu estaba cutucando en torno de Internet,
e atopei algúns arquivos antigos do meu antigo sitio.
E verifícase en torno a este out-- tempo, parece moi oportuna
desde Entender que as eleccións de UC Está a piques de acelerar o ritmo de novo.
Entón eu execute para UC, perdeu miserabelmente.
E quizais iso foi en parte por que.
Polo tanto, este foi o meu sitio no momento.
Por algunha razón, eu penso que era unha boa idea, antes de dicir ás persoas
o que a miña plataforma era e por que deben votar en min, que teñen
premer para entrar para descubrir que información, que, en retrospectiva, é
tipo de asustado.
Eu realmente non sei o que era.
>> Pero certamente non fixo axudar a miña campaña.
Eu tamén penso que por Senior ano-- eu tiven este calendario Muppet.
Muppets foron tipo de en voga na época.
Ou que non estaban.
Eu tiña un calendario Muppet naquela época.
E eu penso que sería legal para nome meu ordenador na rede da Harvard
frogman.student.harvard.edu.
Na época, todos tivemos en exclusiva nomes de host identificables.
E podería escoller algunha vaidade en vez de nomear o seu propio nome.
E eu fun con frogman por algún motivo.
>> E entón eu started-- Pasei moito de tempo premendo través destas ligazóns
esta mañá.
E esta foi a miña páxina sobre, que agora parece tipo de encantador.
Pero tamén recoñece só o que a tecnoloxía chegou.
Quero dicir, de volta ao día, un 486 era algo.
Estes días, é super, super, super slow e ben menos
do que pode ter no seu propios petos estes días.
Hai máis alá que foi aínda máis embaraçoso.
Entón, eu vou deixar por iso mesmo.
Pero esa foi a miña primeira incursión web-- Oh, non.
Isto non era.
A miña primeira incursión real para programación web foi neste sitio, que eu esquezo.
Nalgún punto, eu aprendín a facer repetitivas imaxes de fondo.
E así que eu atopei esta tella eficaz, como xogador de hoquei, fútbol e golf
balón, ou o que quere que sexa para o sitio web do Frosh IMS.
E iso era realmente, realmente a primeiro proxecto baseado na web que eu tomei on--
Creo que se cadra estudante de segundo ano ano, ano-- Júnior
despois de tomar CS50 e CS51, un das clases follow-on comúns.
Notei no ollar a través dos arquivos
que un dos meus sucesores e amigos, Lee, medio que cambiou
dos dereitos de autor a si mesmo.
Pero iso era de feito algo que I debe posuír o constrangimento para.
Pero, na época, este foi o primeiro sitio web,
como dixen, hai unhas semanas, polo cal calouro podería
rexistrarse para deportes internos aquí.
E así el saír que imaxes de fondo
así non son unha boa idea.
Pero a web era novo, e estabamos todos a probar.
E iso é o que eu aparentemente fixo no seu momento.
Todo ben.
Así, sen máis delongas, imos cambiar Engrenaxes hoxe para lle dar, realmente,
a última peza que pode atopar moi útil para proxectos finais
pero tamén que comezará a facer o Wide Web mundo
sentir un pouco máis comprensible.
En realidade, nós estamos indo a introducir unha linguaxe de programación
chamado JavaScript que é semellante e diferente de xeitos diferentes
desde linguaxes nós miramos ata agora.
>> Entón C, recall, é esta linguaxe compilada.
Ten que executa-lo a través dun compilador.
Obtén o código fonte de oposición código, ou ceros e uns.
E aqueles son ceros e uns que súa CPU, Central Processing Unit,
realmente entender.
PHP, por contraste, non é unha linguaxe compilada.
É unha cousa?
É unha linguaxe interpretada.
Polo tanto, hai algún programa chamado un intérprete que
ten que ler ele-- arriba baixo, de esquerda direita--
e descubrir o que todos súa sintaxe fai e significa,
tanto se se trata de un loop ou unha condición ou calquera outro número de programación
constrúe.
Entón esta é unha linguaxe interpretada.
>> Entón, nós introducimos HTML.
E HTML non o é un linguaxe de programación.
Nós chamalo o que?
Unha linguaxe de reserva, que é só unha especie de forma elegante de dicir que
non ten programación construcións como vimos incluso para atrás no día do Scratch.
Non hai lacetes.
Non hai condicións.
É realmente unha linguaxe sobre a reserva dos seus datos
e formato-lo ou estruturando o de algunha maneira.
>> CSS, á súa vez, do mesmo xeito non unha linguaxe de programación.
É aínda máis esteticamente orientada.
E iso permite clasificar afinar cousas como o tamaño e as cores da pia batismal
e colocación e todo iso.
Entón tivemos
>> SQL.
Entón SQL é de feito unha programación lingua, en certo sentido,
aínda a medida especificamente a bases de datos.
Pero aínda que teña só presenta-lo a seleccionar e inserir e eliminar e actualizar
e un par de outros, Acontece que realmente pode
funcións ou escribir procedementos, como son
chamado, en SQL que ollar e actuar así como funcións PHP e C.
Entón sabe que os hai.
Pero nin sequera preocuparse eles como acabamos de rabuñar a superficie aquí.
E entón JavaScript, o último dos nosas linguas formalmente presentado.
Entón JavaScript, tamén, é unha linguaxe interpretada.
E os que están familiarizados, facer quere para distinguilo lo
con algunha característica de ambos C e PHP?
O que o fai diferente?
>> Audiencia: Non está feita.
>> DAVID Malan: Diga novo?
>> Audiencia: Non está feita.
>> DAVID Malan: Non está feita.
Por iso, tamén, é interpretada.
Polo tanto, non está feita.
Pero iso fai que sexa un pouco como PHP.
Senón que é distinto do PHP dalgunha maneira destacada,
polo menos na forma en que imos usalo.
Si?
>> Audiencia: Corre-se do lado do cliente.
>> DAVID Malan: É executado do lado do cliente, normalmente.
Isto é de feito o distintivo característica para nós agora.
C foi do lado do servidor no sentido que fixemos todo CS50 IDE.
PHP ata agora foi do lado do servidor, na medida
como, tamén, recibe interpreted-- non compilado, pero interpreted--
dentro CS50 IDE, o que obviamente é só un servidor ou servidores na nube.
>> Pero JavaScript, mesmo se está indo
para comezar a escribir-lo para, digamos, pset oito e quizais última projects-- é
indo para a dereita, en CS50 IDE e salve-
en arquivos dentro IDE CS50, CS50 IDE e, á súa vez, os servidores en nube
en que está aloxado, non van para interpretar ou realizar o seu código.
Pola contra, só pode ser enviado en forma inalterada ata o navegador.
E é entón será IE ou Chrome ou Firefox ou Safari
ou sexa alí o que, en realidade, interpreta el, de arriba abaixo, de esquerda a dereita.
Así, a distinción clave característica para hoxe
é que é JavaScript no lado do cliente e PHP, por exemplo,
foi do lado do servidor.
Agora, iso ten implicacións interesantes para, así, propiedade intelectual
e quen realmente ver o seu código.
E, de feito, pode ir web e vexa máis
calquera código que alguén ten escrito en Javascript.
Ás veces é lexible, ás veces é ofuscado.
Pero máis sobre iso no seu tempo.
>> Entón JavaScript, ben o suficiente, é Super semellante, sintacticamente, a C.
E así como PHP, non hai ningunha función principal.
Se queres comezar a escribir Código de JavaScript, como vai ver hoxe,
acaba de comezar a escribilo.
Pero é, vai ver, particularmente útil no contexto navegadores web.
Con todo, a miña pequena disclaimer-- xeralmente earlier--
foi dicir que pode cada vez máis uso hoxe server-side JavaScript
usando unha estrutura de fantasía chamado Node.js que algunhas das aplicacións propias do CS50
son escritos no.
Consulte 50 realmente usa Node.js.
Pero nós estamos indo focalizar en JavaScript no lado do cliente aquí en diante.
>> Entón aquí está unha serie de condicións en PHP.
Sentímolo, em-- de feito, que declaración tamén é correcta.
Aquí tamén é un conxunto de condicións en JavaScript.
Sintacticamente, é idéntica a C e para o PHP.
Expresións do Sr Boole son, Do mesmo xeito, sintacticamente
idéntico para ambos C e PHP.
Temos tamén switches JavaScript que parecen idénticos.
Temos para loops que son estruturadas de forma idéntica,
mentres loops, facer mentres loops.
>> Esa é un pouco diferente.
PHP tiña a cada constructo que pode estar usando
ou vai utilizar en pset sete, quizais.
JavaScript ten esta versión especial do para onde literalmente dicir algo
como para a clave variable en obxecto, que é un xeito moi sucinta de dicir:
se eu teño un object-- e nós imos falar sobre estes novo nun moment--
e quero facer unha iteración sobre todo dos pares de valores clave dentro,
Non teño que descubrir como índice numericamente los con cero, un,
dous, tres.
>> Eu podo dicir que literalmente.
E en cada iteración, JavaScript para min vai actualizar a clave variable
para ser a primeira clave, a continuación, a tecla seguinte, a continuación, a próxima clave, entón a próxima clave,
e así por diante.
E podo conseguir polo seu valor por tratamento un obxecto en JavaScript, como veremos,
como se fose un matriz asociativa en PHP.
En realidade, se finalmente envolto seu mente en torno ao que unha matriz asociativa é
en PHP, pode pensar niso por agora como idéntico a un obxecto en JavaScript.
Pero iso é un pouco de unha simplificación esaxerada.
>> Arrays ollar, ben o suficiente, idéntico para PHP con excepción dun personaxe.
Hai unha cousa que falta aquí que vimos a semana pasada con PHP.
O que está omitido?
Si?
Sen sinal de dólar.
Entón, nós estamos de volta a un máis mundo normal onde
variables non teñen cifrões.
Pero prefixar los con var, normalmente.
E var significa variable.
E moi parecido PHP é vagamente typed-- en que existen tipos,
existen números e cadeas e Carrozas e así forth--
JavaScript semellante ten tipos.
Pero é vagamente ingresaran en que o os programadores non teñen que especificalo eles.
Nós só temos que ser conscientes que existen diferentes tipos.
>> Variables, meanwhile-- aquí está como podemos declarar "Ola, mundo"
como unha cadea.
Teña en conta que é o mesmo que o PHP pero ningún sinal de dólar.
E iso é algo que imos comezar a ver máis hoxe,
en que ten un obxecto con claves e valores.
E se queres probar deducir última week--
A sintaxe é un pouco diferente.
Pero un pouco de cordura check-- cantas claves que este obxecto parece?
Entón eu vexo catro.
Vexo dous.
>> Polo tanto, é de feito dous.
Polo tanto, esta é unha colección de dous pares de valores clave.
A clave é símbolo cuxo valor é FB.
A clave é o prezo cuxo valor é 101,53.
Entón eses son dous pares de valores clave.
E lembre, PHP-- e esta é unha vez só unha especie de diferenza sintáctica.
Non é todo o que intelectualmente interesante.
PHP podería escribir este mesmo cousa como citas follows--, é igual.
E eu cambiar estes para corchetes.
E entón eu cambiar isto para unha palabra citada, "prezo".
E entón eu non utilizar os dous puntos.
O que eu uso a semana pasada?
Si, o signo igual arrow notación descolados.
>> E entón eu fixen o mesmo aquí.
O mesmo aquí.
E iso é todo.
Polo que é bo se isto non ten realmente afundido en memoria só para
aínda porque é realmente intelectualmente desinteressante.
É só diferenzas sintácticas.
Pero as ideas son exactamente os mesmos.
Neste variable Cita en JavaScript
é unha colección de pares chave-valor, unha das cales é símbolo, unha das cales
é o prezo.
E podo chegar a eses valores coa seguinte sintaxe.
Así como en PHP, puiden facer algo como-- deixar
me facer esta caixa un pouco maior.
Así como en PHP, puiden facer isto-- oh, caramba.
Imos alí.
>> Así como en PHP-- OK, imos non necesitará empregar as notas do presentador.
Así como en PHP, podo facer $ cita ["simbolo"] Cita $,
e iso me vai levar o valor de "símbolo".
En JavaScript, que será idéntica, polo que eu só podo facelo.
O único que é falta é o sinal de dólar.
>> Tan ben o suficiente, entón, non hai non todo o que moi nova sintaxe.
Entón, o que hoxe imos concentrar en, realmente, é algunhas das ideas e das aplicacións.
E a primeira, tales aplicación que pode
ver se mergullou pset sete xa é esta sintaxe.
Así, en pset sete, se ten viu ou non viu aínda,
sei que hai un ficheiro que damos chamou config.json-- JavaScript
Obxecto Notation.
Por que?
Queriamos ser capaz de fornece-lo con un modelo con algúns pares de valores clave.
Queriamos ser capaz de lle dar unha lista do hospedeiro, o nome do servidor.
Queriamos darlle unha espazo reservado para o seu nome de usuario
e un espazo reservado para o contrasinal.
Se non está a ver iso aínda, non se preocupe.
Máis sobre o tema en sete pset [? spec. ?] E logo,
Obviamente, queremos que para cubrir a realizar-dos
porque cando entrar CS50 IDE, cada un de vós
ter o seu propio nome de usuario e contrasinal.
>> Entón poderíamos usar unha media ducia ou máis formatos de arquivos diferentes.
Poderiamos utilizar un ficheiro .txt.
Poderiamos utilizar un ficheiro CSV.
Poderíamos usar un Arquivo INI, un arquivo XML,
un grupo enteiro máis siglas que pode non ter xa oín.
É unha especie de arbitrario ao final do día.
Pero super popular nos días de hoxe é un texto formato chamado JSON-- JavaScript Object
Notation-- que se parece con isto.
É un pouco enigmática, pero observar os patróns.
Comeza cun rizado aberto cinta, e que acaban co mesmo.
Dentro do que é algo.
É un par clave-valor.
Polo tanto, este é un obxecto que eu son mirando a pantalla aquí
que ten unha chave, que ten un valor.
E só inferir a base do estándar anterior, o que é a clave aquí?
Base de datos, a cousa a á esquerda do colonos.
>> Agora, o valor pasa a ser un varias liñas neste momento.
Pero o valor comeza cun rizado cinta e remata cunha chaveta.
Entón, o que propón é a Tipo do valor da base de datos?
Un dicionario ou, só brevemente, un obxecto.
Non?
Este é un tipo de estrutura de datos que pode utilizar outras estruturas dentro de si.
Entón, se esa cousa toda que estamos chamando un object-- e un obxecto
é só unha morea de valor clave da pairs-- valor do propio banco de datos é un obxecto.
O valor de base de datos ten un grupo enteiro de pares de valores de clave, o primeiro dos cales
é anfitrión, a continuación, nomee, a continuación, nome de usuario, contrasinal, a continuación,
cada un de cuxos valores, mentres, é só unha secuencia aburrido entre comiñas dobres.
>> Así, aínda que iso non é super claro aínda,
sabemos que este é só un estándar, forma bastante aburrido
de almacenar datos nun formato estándar.
Pero os erros comúns que pode facer, mesmo en pset sete,
son pequenas cousas estúpidas, como se accidentalmente omitir a coma alí.
Isto vai producir no ficheiro non necesariamente de ser lexible.
Se omitir accidentalmente cousas como o citas, non vai ser lexible.
Polo tanto, é un formato de ficheiro moi detallista, pero é un que é super común.
E nós pasar a usalo, aínda que non usar calquera outra forma JavaScript,
en pset sete.
>> Todo ben.
Entón lembre que este cadro.
Nós falamos sobre, HTML, que o código pode ser como este.
Este é o formato Markup Language [Inaudível] para só "Ola, mundo".
Pero, entón, propuxo unha tempo que, se iso axuda,
pode querer comezar a pensar sobre o xa como unha árbore.
En realidade, o descenso que nos usar só polo amor de lexibilidade
ou por mor do estilo de a esquerda pode tipo de
ser traducida a esta árbore, onde ter algún nodo raíz especial que imos
xenericamente chamado documento, debaixo do cal é o elemento HTML raíz ou etiqueta, HTML,
que, a continuación, ten dous nenos, cabeza e corpo.
>> E, a continuación, á súa vez, a cabeza ten un título.
E título ten un valor de texto.
E o corpo ten un valor semellante texto.
Entón, se está dicindo cómodo que si, podería tomar este HTML
e deseñar un cadro como tanto, o lado dereito
é un modelo mental bo porque agora que temos JavaScript, unha programación
linguaxe que os navegadores poden executar e interpretar para vostede,
verifícase que o estamos a piques de facer o código
é comezar a manexar esta estrutura de árbore na memoria.
Non hai que construír a árbore en memoria.
Non temos que facer unha especie de estrutura de datos e cinco estilo pset
complexidade.
O navegador, ben o suficiente, encima interpretar HTML arriba para abaixo,
esquerda ou dereita, é, literalmente, indo man-nos o equivalente a un punteiro
para que árbore enteira de balde.
Fai todo o traballo duro.
Iso é o que Apple e Mozilla e outros fixeron para nós.
>> E con JavaScript que imos ser capaz de controlar e cambiar e facer
Cousas interesantes para aquela árbore, tamén coñecida
como DOM ou Document Object Model.
Que tipo de cousas?
Ben, resulta que en JavaScript, non hai
este rol de eventos que poden ocorrer.
E nós realmente non teño usado que palabra desde semana cero e pset
cero cando falamos Raspadinha.
A maioría de vostedes probablemente non usar un evento no seu proxecto Scratch.
Pero ten que se lembrar o simple Marco Polo
exemplo, onde tivemos dous sprites, un dos cales dixo Marco.
O outro dos que, a continuación, ao escoitar e escoitando o evento, dixo: Polo.
Se non, Sinto-se a liberdade de mirar para atrás tan lonxe cara atrás.
>> Pero esta é só a dicir, e pode tipo de
deducir os nomes destes cousas, JavaScript, verifícase,
vai dar-nos unha forma de escoitar para rato indo para abaixo ou rato subindo
ou a tecla para abaixo ou tecla indo indo arriba onselect onsubmit
onresizing ou algo así.
Noutras palabras, calquera acción física que un ser humano pode levar cun navegador
que fai todos os días, pode escribir código para que escoita a estes eventos
e despois fai algo apropiado.
>> Por exemplo, se usa Google Maps, o que pasa se fai clic e movemento
o rato, tipicamente?
Se fai clic e arrastrar?
Si?
Exactamente.
O mapa comeza a moverse.
Así, pode tipo de ver o que está aquí, o que está alí.
E como Google aplicar isto?
Ben, presuntamente, son usando un par destes eventos
oíntes, que di, escoitar no rato
down-- así cando o usuario fisicamente empuxa o trackpad ou o rato
abaixo.
E entón nós estamos a buscar algo así como movemento
ou calquera outro evento que nos permite capturar arrastre.
E, de feito, de arrastre é semellante neste punto punto dot lista de opcións posibles.
>> Polo tanto, este vai ser un poderoso xeito de comezar a responder ao usuario
mesmo antes de el ou ela clic algo explícito enviar.
Pero nós estamos indo a introducir un par de temas para chegar alí.
Pero primeiro, imos transición para algúns código real.
Entón, eu estou indo a ir adiante e abrir don-0,
que é un exemplo moi sinxelo aquí que se eu simplemente aumentar o zoom
ten esta entrada aquí por min.
E eu estou indo a ir adiante e escribir "David" para o meu nome e prema en Enviar.
>> E entón, aínda tipo de barato, I ten este poder que aparece que di:
"Ola, David"
Polo tanto, este é o tipo de como o noso "Ola, mundo"
que fixemos algún tempo en C e mesmo en PHP, porque eu teño dinamicamente
emitido o meu nome.
Podo facer nome doutra persoa aquí.
Podería simplemente cambiar isto para, como, Hannah, faga clic en Enviar.
E, de feito, os pequenos cambios emerxente.
>> Agora, os pop-ups son un dos a maioría dos recursos abusada web.
E, de feito, de volta os bloqueadores de emerxentes día
entrou en voga, porque ía para algún website--
quizais un Place-- cuestionable que, de súpeto,
iniciar salpicado súa pantalla con unha morea de ventás emerxentes.
E así, esta habilidade para emerxentes fiestras fronte do usuario
non foi particularmente ben recibido pola humanidade.
Entón é por iso que ve este previr cousa,
que só fai esa cousa toda feo.
Entón, nós imos ter unha mellor forma para solicitar ao usuario.
Pero, por agora, que parece funcionar.
Entón, só de forma intuitiva, o que parece estar a suceder aquí?
I vai adiante e faga clic en Enviar entón algo está pasando, de forma clara.
Pero o que non está a suceder que pasou a semana pasada, en calquera momento eu clic en Enviar?
O que non pasou na pantalla?
Sentímolo?
Actualizar.
O URL non cambiou en todo.
Eu dixen que iso era don-0, e eu aínda estou no don-0.
Normalmente, teriamos mudado para algún outro URL, como register.php ou semellantes.
>> Pero aínda cando dimitir esa cousa premendo OK,
notar que a URL fica completamente parado.
E, de feito, se eu son un pouco escéptico, déixeme abrir Chrome.
Déixeme abrir a guía Rede.
E teña en conta que é en branco no momento.
Deixe-me ir adiante e reenviar María.
Non hai ningún tráfico de rede calquera.
Polo tanto, non hai HTTP.
>> Entón, en realidade, se eu ollar para o código fonte para isto-- déixeme pechar esta ventá
e ir á vista de orixe.
Interesante.
Parece que hai algunha novas etiquetas, entre eles guión.
Entón, imos dar un ollo dentro CS50 IDE exactamente o que eu mandei para o usuario.
>> Entón, aquí imos é-- centrar só o HTML.
Aquí está a metade inferior do don-0.html.
E teña en conta que ten un título, unha marca de cabeza, unha marca do corpo, unha marca de formulario.
Pero o que salta para fóra a vostede como diferente, especialmente se nunca
escrito calquera JavaScript si mesmo.
Déixeme rolar un pouco a dereita aquí.
Eu teño unha entrada, outra entrada para presentar.
Eu teño un ID, que é unha especie de novo.
Pero fixemos ver iso con CSS.
O que máis é sempre novo?
Si?
Niza.
>> Todo ben.
Entón, onde di que onsubmit, teña en conta o parecer continuación.
Este é un atributo na nomenclatura HTML.
O seu valor é esa secuencia entre comiñas aquí.
E iso parece un pouco estraño a primeira vista.
Non é HTML.
Non é CSS.
É dicir, como podes imaxinar, JavaScript.
Polo que parece, incorporado nesta A páxina web é unha función chamada greet.
E eu estou inferindo que porque é unha palabra, cumprimento.
Ten un paréntese aberta, paren próximos, punto e coma.
Parece que unha función C, parece unha función PHP.
>> E, de feito, que vai ser unha función JavaScript.
Entón eu estou volvendo false.
Nós imos voltar a que en só un momento.
Pero onde é definido esta función?
Ben, deixe-me rolar para arriba arriba do ficheiro.
E aínda que sexa unha longa liña, é relativamente simple.
Deixe-me aquí e reducir Concéntrase-se nestes catro liñas.
>> Así, en JavaScript, só como PHP, só
digamos, literalmente, a palabra "función", o nome da función,
e, a continuación, con calquera parénteses arguments-- sen argumentos neste caso.
E non hai ningún tipo de retorno en JavaScript, así como PHP.
Polo tanto, é un pouco máis flexible que C. Abrir chaveta, preto chaveta.
Construído en JavaScript é un function-- non un function-- recomendado
pero unha función chamada alerta cuxo único obxectivo na vida
é para puxar arriba que moi feo solicitar que vimos hai pouco.
>> Agora, iso é unha especie de boca chea.
O que está pasando aquí?
Entón, imos comezar a destacar todo aquí.
Ese é o mesmo argumento para advertir.
E o que está a suceder?
Isto parece unha corda.
E non é que, a diferenza de PHP e ao contrario C, non importa en JavaScript
se comiñas simples ou dobres.
Eles van ser equivalente.
E, francamente, é só popular estes días
para programadores JavaScript para sempre usar comiñas simples, por algún motivo.
É só a cousa que facer.
Pero poderiamos usar comiñas dobres, tamén.
>> Entón é máis un novo personaxe.
Pero aqueles de vostedes que fixen que antes, o que máis dicir?
Si.
Concatenar.
Entón, nós vimos isto en PHP.
Non é só o punto operador en PHP que
ha concatenar dúas secuencias xuntos.
C era unha dor no pescozo para facelo.
Teña en conta que do pset seis, que era unha dor especial no pescozo,
que tería que usar algo así como strcat
tras a reserva de memoria na pila ou a pila.
Tiña que ir a través de marcos só para concatenar dúas cadeas.
En JavaScript, é super sinxelo.
Só ten que usar o operador máis entre eles.
>> Así, o complexo de aparencia cousa parece ser este
porque, ao final de Toda esa secuencia, só
concatenar nun signo de admiración.
Polo tanto, se o que estaba xurdindo foi "Ola, David", "Ola, Hannah,"
"Ola, María", etc., de forma clara esa cousa medio entre os dous
triunfos que me dar acceso a que?
O que está aí seguramente?
Si.
Entón, eu vou finxir aquí a responder ao seu nome, non?
Entón, o seu nome aparece na final resultado. Entón o que significa isto?
Ben, eu propuxen anteriormente no que imaxe de que a chamada DOM
ten este elemento raíz especial subida superior chamado documento.
E agora, ao parecer, iso vai de ser unha variable global especial
en JavaScript, en que está construído un todo grupo de funcións útiles.
Entre a funcionalidade útil é a capacidade de obter en calquera nodo descendente.
Estes cadrados ou rectángulos ou elipses só os nós nunha árbore, por así dicir.
>> Así, verifícase que embutido Obxecto de documento de JavaScript
é unha función, doutro xeito coñecida como método, que se chama getElementById.
A sintaxe para chamar unha función en JavaScript
que está dentro dun obxecto ou un variable é só coa notación de punto.
E vimos isto en C que a sintaxe da estrutura.
Ve iso en pset sete, especie de, máis ou menos, cando ve CS50 :: consulta.
O colon colon en PHP é outro xeito de chamar a unha función que é
dentro dalgún obxecto.
>> Pero, de momento, en JavaScript, é só un punto.
E así esta función, ben o suficiente, tipo de
di o que does-- obter elemento por ID.
Un elemento é só outro nome para unha etiqueta ou nó na DOM.
E así comeza elemento por ID "nome" significa isto-- aquí está o meu HTML.
E a partir desta HTML, o que nó ou etiqueta HTML son eu
será programaticamente handed chamando document.getElementById?
>> Si, exactamente.
Eu estou indo a obter a entrada elemento alí cuxa ID é "nome".
Entón, en concreto, podes pensas desta función,
GetElementById, como un xeito de dar copia dun punteiro para ese nó específico
na árbore.
Non tiraron esta árbore, pero é un xeito
de acceder a ese rectángulo ou rectángulo que
identificando-lo exclusivamente a través do seu ID.
>> Agora, por que isto é útil?
Ben, botan que unha vez que teña obtido
ese nó, que rectángulo do imaxe, que no interior do mesmo nó,
á súa vez, ten unha morea de pares de valores clave properties--
ou de datos, un dos cales se chama valor.
Entón, literalmente, é unha especie de bocado para explicar a cousa toda.
Con todo, ao final do día, todo isto fai é darlle
unha secuencia de caracteres que o usuario introduciu no desta forma xerárquica.
Pero eu non me gusta de un par destas cousas.
Ou mellor, hai algunha curiosidade aínda.
Todo isto parecía funcionar.
Porque pensas que eu regresar false despois de chamar cumprimento?
Isto parece un pouco feo, que Teño dúas afirmacións alí
separados por punto e coma.
Tomé un palpite.
Se eu eliminar voltar falso, o que pode suceder, só instintivamente?
Sentímolo, dicir de novo?
>> Abre un grupo de Windows.
Entón quizais algo potencialmente así ía ocorrer.
Que mais?
Pode presentar unha solicitude para onde?
Para a mesma páxina.
Entón, en realidade, é iso o máis preto responder aquí,
aínda que, ao contrario no pasado, eu non teño
especificar o atributo de acción, que normalmente temos que facer.
Acontece aí é un defecto. Se non especifica a acción,
é como dicir cita, pecha comiñas ou o nome do ficheiro en si,
que neste caso sería ser como don-0.html.
É só unha especie de inferir, ou mellor implícita.
>> E por iso, se non fai iso, imos notar.
Déixeme gardar este.
E eu elimina retorno falso.
Déixeme volver a este exemplo e forza de voltar a cargalo.
E pode ver-me suxerir isto CS50 Discutir unha morea de veces.
Se algo está sempre actuando funky e navegador non está comportándose como se esperaba,
moitas veces vai querer soster Shift e prema en Reload.
Isto vai obrigar cada ficheiro para recargar e non usar caché local do navegador
ou copia de xeito que agora, deixe-me ir adiante e abrir o meu Inspector, na guía Rede.
Vou clic Preserve Log porque
non quero iso para eliminar as liñas Xa que recibín arrastrada noutro lugar.
>> Déixeme ir adiante aquí e Tipo de Andi, prema en Enviar.
Todo ben.
Isto parece como se esperaba.
El di: "Ola, Andi."
Permítanme, prema en Aceptar.
Interesante.
Teña en conta que a páxina cambiou, aínda á páxina orixinal.
Teña en conta o tipo de URL cambiou.
Engadiu un punto de interrogación, que é xeralmente un indicador
que tentou presentar algo.
E, a continuación, na parte inferior, aínda máis explícita,
aquí é a petición HTTP real, que recibiu unha resposta de 200 que
me trouxo de volta aquí.
>> Polo tanto, este non é o que queremos facer, non?
Porque eu non quero actualizar a páxina enteira.
I en vez quería volver falsa, para curtocircuíto
o comportamento por defecto do navegador, que era, por suposto, para enviar a páxina.
>> Entón, imos dar un ollo a un marxinalidade mellor exemplo.
Esta é unha versión don.
E teña en conta o seguinte.
Todo ben se non Grokar todas as liñas de código.
Pero o que é fundamentalmente diferente sobre esta aplicación?
Vou estipular se comporta o mesmo, fai o mesmo.
O que eu teño, obviamente, feito de forma diferente?
Si?
>> Audiencia: [inaudível].
DAVID Malan: Yeah.
Así, a función é definida differently-- Noutras palabras, ausente da forma,
alí enriba na liña 7-- ou ao contrario, a liña non 8--
eu teño o atributo onsubmit.
No exemplo anterior, eu tiña iso.
E entón eu literalmente escribiu o meu código aquí.
E entón eu dixo return false.
E se non fregar vostede xeito incorrecto, con todo,
debe comezar a na medida como, así como HTML,
cando comezamos a mesturar a co-it CSS en atributos de estilo,
el só comezou a estar un pouco confuso ou se sentir un pouco mal.
>> Así mesmo aquí, se comezar a tomar HTML,
e entón automaticamente plop algún código JavaScript
no medio dunha cadea, é non vai ser moi fácil de manter.
Non?
Non é nin sequera evidente a primeira vista Un lugar onde o código JavaScript.
Polo tanto, sería realmente bo, como un principio de mellor deseño,
imos manter o noso HTML completo separado da nosa Javascript.
>> Entón, para iso, o que temos feito aquí é o following--
simplemente usar HTML só reserva.
E así, nunha versión deste, todo Eu teño é unha forma cunha identificación única.
E entón para acá, estou aproveitando dun recurso especial de JavaScript
polo cal podo ter o que é chamado unha función anónima.
Así, verifícase que, se eu chamo document.getElementById de 'demo'
que é como me dar un punteiro para este nó na miña árbore, o elemento do formulario,
por así dicir.
>> Agora, eu só sei de sabendo un pouco de HTML
agora estamos despois de ler algúns en liña de referencia, que soporta un elemento de formulario
unha morea de evento en listeners-- Noutras palabras, o rol de evento
ouvintes que vimos hai pouco.
Sei que a partir da lectura da documentación que onsubmit é un evento válido
oínte a un elemento de formulario.
>> Entón, cando eu sei que, é seguro para min facer
o following-- obter ese nó da árbore, o elemento do formulario,
e acceda a chamada propiedade onsubmit.
Así, o punto significa só esta é unha propiedade,
como un valor especial para dentro del.
E que tipo de datos son eu asignación de aparentemente
para OnSubmit, que é efectivamente unha variable dentro
dese nó na árbore?
É un campo dentro desa estrutura.
Cal é o tipo de datos?
>> Unha función, si.
Así, verifícase que o PHP ten iso.
E aínda que nós non falar sobre iso,
C tamén ten función punteiros, os capacidade de pasar e asignar funcións
como os propios valores das variables.
E non imos a retroceder ao C.
Pero, por agora, parece que no lado da man dereita aquí,
aínda que pareza un pouco funky, este medio, hey navegador,
dáme unha función.
Non vou molestar mesmo dando -lle un nome, porque eu estou literalmente
vai asignar imos chamalo a dirección desta función
inmediatamente a OnSubmit.
Noutras palabras, o navegador, non para saber o que esta función se chama.
Só ten que saber onde está na memoria.
E así é suficiente só para ten un signo igual alí
e non se preocupe nomeando iso, como foo ou cumprimento ou calquera outra palabra.
E agora esta é só unha cousa estilística.
Podería mover este chaveta para as-- sorry-- seguinte liña
como xeralmente facemos CS50.
Pero en JavaScript, é realmente estilisticamente común
só para manter a chaveta, o primeiro, en que a primeira liña.
>> Pero a continuación, hai nada interesante.
Isto chaveta aberta só demarca o inicio da miña función.
A función é agora idénticas, excepto que eu teño
incluído o teito retorno dentro desta función.
Porque pasa out-- e só faría
sei que isto de lectura o documentation--
que a función que atribúe ao manipulador onsubmit retorna false,
o explorador só sabe e acepta non enviar o formulario para un servidor.
Se volve true, presentará para un servidor por razóns que veremos
son útiles en só un momento.
>> E entón o punto e coma despois a chaveta alí só
significa que eu son feito definindo a función.
Vostede sabe o que chamar o máis axiña como escoitar unha presentación.
Todo ben.
Isto aínda é indiscutibelmente tipo de feo.
Entón, o que máis podemos facer?
>> Ben, ao parecer, a continuación, en versión dous, que é o last--
e imos ollar para iso.
Correndo o risco de facer que máis fea, verifícase se
que hai unha biblioteca en o mundo chamado jQuery.
E jQuery é un super- biblioteca JavaScript populares
iso é tan popular que a maioría calquera JavaScript-- non é
inusual que as persoas confunden jQuery con JavaScript.
Por que?
En si ten moito JavaScript formas de facer as coisas- verboso
document.getElementById, dadadadadada.
Acaba tendo moi longas liñas de código.
>> Así, un suxeito chamado John Resid, que realmente funciona para unha startup
ata estes días, saíu con iso anos de biblioteca
hai que moitas persoas teñen contribuído a chamada jQuery que cambia
A sintaxe do seguinte xeito.
E só así xa viu iso, Porque vai invariabelmente
ver iso facendo un proxecto final baseado na web,
esta sería a forma equivalente a execución desa mesma función usando
esta biblioteca especial.
>> Agora, en vez de provocación o diferencia na súa totalidade,
imos só ollar para algúns patróns.
Esta sintaxe parece cantas funcións anónimas
ou funcións sen nome ou funcións lambda AKA?
Dous, non?
E vostede sabe que, aínda que non é super cómodo con iso,
só polo feito de que el di function () dúas veces.
>> E parece que o que este código é doing--
e nós imos referirse a referencias en liña, en definitiva, para axuda con iso.
Isto só significa que, cando o documento está listo,
dalle cadastre- a seguinte función
como o manipulador de enviar ao HTML elemento cuxa idea orixinal é de demostración.
E entón, cando isto ocorre, chamar estas dúas liñas de código.
E esta é, traxicamente, unha máis xeito detallada de dicir return false.
E nós mencionados iso só porque podes ver un código coma este en liña.
E non é nada para se intimide con.
Pero en vez diso, ten en conta que o que é será común en JavaScript
é ese paradigma.
E é por iso que nós amosamos que de momento.
Todo ben.
Entón, sen deterse moi moi en que a sintaxe,
son hai dúbidas sobre estes exemplos ou ideas ata agora?
Todo ben.
Entón, imos usar isto para algo útil.
Facendo unha páxina web que di Ola, así e así non é tan interesante,
non underwhelm.
Este non vai ser bonito, pero só pode facer algo útil.
Déixeme volver ao meu directorio aquí e abrir-se, dicir, fórmase 0.html.
>> Entón supoño que este é o calouro páxina de rexistro deportes internos
sen CSS ou calquera sentido de deseño.
E quero ir adiante e rexístrate aquí cunha contrasinal.
E eu vou aceptar os termos e condicións e prema en Register.
E agora o sitio di: "Vostede é rexistrado! (Ben, non realmente.) "
Que parece que funcionou, pero deixe-me ir adiante e facer reload.
>> E déixeme dicir, non, non fazê- precisa do meu enderezo de correo-e real.
Ou que nós imos só dicir correo alí.
Contrasinal será, como, 12345.
E entón, só porque eu son un idiota, agora é 123456789.
E eu non estou indo para comprobar a súa caixa.
>> Hmm.
Todo ben.
Polo tanto, hai varias oportunidades para mellora aquí.
E vostede sabe, é verán no pset sete, que pode escribir code--
e ten que escribir código PHP-- para defender
contra estes tipos de usuario erros porque o usuario claramente
non cooperou.
E el ou ela non lle deu toda a valores que quería ou mesmo en formato
que quería.
Entón podes ver en pset sete que seguramente poderiamos ter algún
as condicións que se que o enderezo de correo-e
non é un username@something.edu, poderíamos só
desculparse e pedir desculpas para o usuario moito, como pode estar en pset sete.
Ou se non ter comprobado que a caixa, Acontece en PHP, pode detectar que,
tamén.
E, por suposto, as contrasinais non corresponden como no register.php
pset para sete, pode detectar iso.
Pero iso é unha dor no pescozo en que agora solicitar
nós para percorrer todo o camiño para o servidor.
O usuario é informado do erro.
E, polo menos, a non ser que use algunhas técnicas máis extravagantes,
agora ten que facer clic na frecha cara atrás.
Non sería bo, como unha morea de sitios de hoxe,
se tivese máis inmediato feedback, instantaneamente?
>> Noutras palabras, deixe-me ir á versión un, que vai haber máis fermosa.
Pero ten este recurso.
Malan, 12345, 123456789, non vai marcar a caixa, Register.
Os contrasinais non coinciden.
Así, aínda que ese emerxentes é ugly-- podemos substituír iso, finalmente,
con algo como Bootstrap, que podes ver no pset sete
é un library-- moi popular fixen detectar que os contrasinais non coinciden.
Todo ben.
Ben, deixe-me corrixir isto como o usuario.
Deixe-me ir adiante e dicir 12345, 12345.
Aínda non comprobando o acordo.
Ten que aceptar a Termos e condicións.
Entón, por que?
>> Se xa postulaba que hai un camiño,
e temos necesario vostede en pset sete para detectar erros
condicións como este do lado do servidor, por que eu debería
que preocuparse tamén en facelo en JavaScript?
¿Que é un argumento en favor de que engadindo
está a piques de ver como some-- hai unha complexidade adicional.
>> Quizais non hai ningunha cabeza.
O que podería ser?
Audiencia: [inaudível].
DAVID Malan: Oh, interesante.
Exploits potenciais.
Entón, por suposto, se non está seguro entrada do usuario errónea de que grande,
quizais sexa tanto mellor se non cheguen ao seu servidor.
Quere empurrar cara atrás alí e por exemplo, vostede probabelmente debería
corrixir estes dous problemas.
Pero iso é xusto.
Que mais?
>> Audiencia: [inaudível].
>> DAVID Malan: Yeah.
Este código, como dixemos antes, é interpretados no lado do cliente.
Non molesta o servidor, o que significa que non ten
impacto de carga ou a capacidade do servidor.
E agora, por pouco me vello, iso non ten efecto significativo
porque eu teño un usuario no momento.
>> Pero se é calquera web de tamaño decente,
especialmente as grandes, como Facebook, o máis que pode manter a xente fóra
do servidor o mellor porque un servidor, por suposto,
ten só unha cantidade finita de RAM, un número finito de gigahertz,
un número finito de cousas pode facer por unidade de tempo.
Entón, se hai máis persoas en o mundo bater o seu servidor,
rexistrando accidentalmente incorrectamente, tan ben se
pode manter esta carga fóra do seu servidor.
Ademais, especialmente nun móbil device-- Se xa
rexistrar en my.harvard ou Netid de Yale ou similar,
hai esta a latencia con unha morea de sitios como aquel polo cal toma,
como, a mínima segundo ou dous, ás veces.
E entón, meu Deus, se escribe mal, a continuación, ten que bater para atrás e refacelo lo.
Polo tanto, non hai latencia, especialmente en conexións de rede máis lentas.
Pero JavaScript porque é executado no cliente
e non é preciso ir e volver a través dunha internet lenta potencialmente
conexión, pode comezar o producto case instantáneo.
>> Entón, imos ollar para iso.
Déixeme abrir formulario 0 correo mirar para o HTML aquí.
E imos ver o que está a suceder.
Esta é unha forma cuxo acción é register.php.
Eu só estou usando obteña que eu podía ver a URL.
Pero para contrasinais, nós seguramente queremos para cambiar esta para deixar na realidade.
Aquí está o campo de entrada de texto tipo.
Aquí está outra entrada campo de tipo de contrasinal.
Aquí está, se nunca viu, unha entrada de caixa tipo.
>> Pero non hai JavaScript aquí calquera.
Este é só HTML que vai register.php.
Pero, nunha versión, onde comezou a estar esas ventás emerxentes,
imos ver o que realmente acontece aquí.
Na versión un, o que Vou see-- I
penso que podería deixar o suficiente con palabras suficientes, pero eu execute para fóra.
>> Na versión um-- alí imos nós.
Na versión un, teña en conta o following-- e non é a mellor aplicación,
pero é o meu primeiro.
Teña en conta que por baixo do caso, eu teño unha etiqueta script.
E unha marca de script significa, hey, navegador, aquí
vén nalgún código, normalmente, JavaScript.
E agora, teña en conta o que eu estou facendo.
En linha-- eu mal podo ler ele-- liña 32, el di,
var form-- entón me dea unha variable chamada formulario.
E, a continuación, obter document.getElementId de "rexistro".
Que é isto?
Ben, deixe-me volver aquí enriba.
E observen, ah, eu dei o elemento do formulario unha idea arbitraria, pero descritivo
da inscrición.
Entón iso me dá unha variable que permíteme para incorporarse este nodo,
que rectángulo na árbore chamada formulario.
medios form.onsubmit, hey navegador, rexistrar un oínte de evento
neste formulario.
Noutras palabras, cando este formulario é presentado, executa o seguinte código.
Ela non precisa dun nome, porque Por que ten que saber o nome?
Só ten que saber o que facer, ergo
é unha función anónima ou lambda.
E esa función é todas estas liñas aquí.
E agora, para ser honesto, aínda que non podería escribir nunca JavaScript
antes, non é máis que lóxica C e PHP.
Polo tanto, se form.email.value == "" - polo que se o campo de correo electrónico está en branco,
berrar co usuario con "Debe proporcionar o seu enderezo de correo electrónico. "
Else if form.password.value é berro en branco ao usuario,
"Ten que proporcionar o seu contrasinal."
>> Máis interesante, loxicamente, se non form.password.value
igual form.confirmation.value-- onde é que a confirmación veu?
Déixeme volver.
Ben, eu chamei esta entrada campo aquí contrasinal.
E eu chamei este aquí confirmación.
Podería telo chamado password dous ou calquera outra cousa.
Eu só estou comprobando loxicamente que estes dous son o mesmo.
Else-- verifícase se este é o Sr Boole novamente-- un valor booleano, a caixa de verificación.
Entón, se eu digo, exclamación ponto-- Se non form.agreement.checked,
berrar co usuario tamén.
>> Polo tanto, esta sintaxe que podes ver é moi común en JavaScript,
onde ten esa notación pontilhada.
Comeza cun obxecto aquí.
Mergullo no máis profundo de un a unha propiedade como contrasinal.
E entón comeza a seu valor real.
E unha vez máis, aquí é a entrada.
Aquí é o contrasinal nome.
E o seu valor é o que o humana, en realidade, introducida.
>> Así, en todos estes casos, volvín falsa.
Pero se non, I return true.
E agora vemos unha uso convincente de cando
ía voltar false para deter o que o servidor está realizando
e facerlle escoller novo ou escriba de novo.
Se non, nós return true.
>> E deixe-me presentar un outra variante deste só
para sementar algunha comprensión do mesmo.
Ben, na versión 2 do presente, fórmase 2-- Eu vou facer iso cun aceno de man.
Este é, para os curiosos, a versión jQuery,
aqueles de vostedes que pode querer xogar con esa biblioteca particular.
Pero imos start-- e dúbidas?
Deixe-me facer unha pausa por un momento porque que foi rápido e moito.
>> Pero o bo aquí é que todos do código é practicamente o mesmo.
O novo material é o que é o don?
Cales son eses rectángulos?
Cales son eses nós?
¿Que é unha función anónima?
¿Que é un manipulador de eventos?
Pero, por sorte, a maioría de que é só círculo completo de, digamos, semana cero.
Todo ben.
Polo tanto, algo un pouco máis interesante?
Ben, en primeiro lugar, deixe-me ir adiante e abrir o Google Maps.
E vai entender que, para un momento, na segunda división,
teña en conta o que acontece cando I clic rápido abondo.
E esa conexión en Harvard é tan rápido que realmente non nota-lo.
Pero o que tipo de especie de ver se eu facer clic e arrastrar moi rápido?
Aqueles de vós asistir en liña, se diminuír isto para velocidade de 0,5x,
podes ver iso mellor.
>> O que estaba a suceder só antes de que eu premidas e arrastradas?
Déixeme probar aqui-- déixeme facer outra cousa, como 90210.
Imos aló.
Iso foi moi rápido, tamén.
Como case Disney World?
Alí imos nós.
Aceptar.
O que viu nunha fracción de segundo?
Só, como, prazas, non?
Marcadores de posición para tellas?
>> Ben, o que está pasando aquí?
Google Maps é un bo exemplo de esta tecnoloxía que se chama AJAX.
E é aí onde imos comezar a usar o JavaScript nun particularmente
xeito sedutor.
De volta ao día, houbo esta web chamado MapQuest.
E eu debería tomar unha screenshot desta partir dos anos 1990,
onde se quería mirar para arriba aquí no mapa,
vostede literalmente premer nunha frecha Se na parte superior que lle mostre
un cadrado diferente do mapa.
Se quixese ir á esquerda, premendo unha frecha que lle mostre
un cadrado diferente do mapa.
E algúns sitios aínda o fan hoxe.
Pero aínda MapQuest obtivo mellor, como Google Maps.
>> Pola contra, o que é mellor estes días é sitios que usan AJAX.
AJAX-- tamén coñecido como Asynchronous JavaScript e XML,
que é só un xeito elegante de dicir unha tecnoloxía ou técnica que
permite que un navegador usando JavaScript para facer solicitudes HTTP adicionais
despois de que a páxina sexa cargado.
Entón o que significa isto?
Ben, sería tipo de irritante en Gmail
cada vez que quería comprobar o correo,
tiña, literalmente, prema Control-R ou Command-R ou prema no botón Actualizar
ea páxina danado enteiro ía actualizar.
Non?
Sería palpebrar branco probablemente por segundo.
Ía ver a barra de progreso estúpido.
E só para ver se ten novos e, a páxina web enteira ea URL
está no tería que volver cargar.
>> Pero iso non é o que pasa en Gmail.
Non?
Cando comeza un novo e-mail en Gmail, o que pasa na pantalla?
Isto só amosa-se, non?
El só aparece Magic como unha nova liña na táboa.
Isto implica un realmente cantidade razoable de complexidade.
En realidade, se pensar sobre esta árbore, que aínda que é sinxelo aquí,
Gmail-- e eu tería que mirar no código para ser sure--
Probablemente ten unha táboa HTML ou que unha lista desordenada que fai
cada unha das súas caixas de entrada correos electrónicos como.
>> E por iso, se imaxinar iso alí é unha árbore na memoria cando está
usando Gmail, que mira o tipo de tipo de así, cando Google entende, ooh,
ten un novo correo, iso non acontece quere reconstruír a árbore enteira.
Pola contra, ela quere atopar o nodo no a árbore que representa a súa caixa de entrada
e só tes que introducir un novo nodo.
>> Entón, moi semellante ao PSET cinco, onde tivo que introducir os nós nunha táboa hash,
Do mesmo xeito que Google, vía Código JavaScript que ten escrito,
Traverse esta árbore, descubrir onde é a parte caixa de entrada da xanela,
e, a continuación, engadir unha nova liña.
E unha nova liña significa só unha ou máis novos nós nunha árbore.
>> E así AJAX é esta técnica que permite exactamente isto.
Unha vez que visitou unha URL, con todo tolo tempo é,
e unha vez que a páxina ten procede, pode aínda
coller máis datos a partir da internet-- se é
un correo electrónico ou unha tella dun map-- agarralo lo detrás das escenas
e, a continuación, introduza o na páxina de xeito que o ser humano non ten realmente
ten que esperar por iso.
>> Facebook Messenger funciona do mesmo xeito.
Calquera número de outros websites-- Oh, de feito, incluso iso.
É dicir, que é, a verdade, tipo de un irritante presentan estes días.
Se eu comezar a buscar por este cats-- é unha especie de experiencia do usuario horrible.
El só comeza a buscar-me.
Ben, o que está facendo?
O URL non cambiou dende que eu comecei a escribir.
Pero o que está a suceder en todo o wire-- OK, hmm interesante.
O que está a suceder en todo o fío aquí só queda máis estraño.
>> Aceptar.
Entón deixe-me ir adiante e inspeccionar elemento e vaia á guía Rede
e tentar facelo técnico e menos sobre gatos.
Mentres tecleo literalmente gatos e- o que está pasando
per-- eu non vou prema iso.
Todo ben.
Entón, aquí abaixo, o que está a suceder cada xa que escribir un carácter aparentemente?
Como, de baixo nivel?
O que está a suceder con cada un destes caracteres estou escribindo no meu teclado?
Si?
Audiencia: [inaudível].
>> DAVID Malan: Exactamente.
Cada un destes personaxes é indo ao Google, un de cada vez.
Están construíndo unha cadea en que representa o servidor
todo o que eu escriba ata agora.
E cada vez que eu tecleo outro personaxe, que
usar o seu salsa secreto dun buscar algoritmo e descubrir,
quere dicir esta páxina gato ou esta páxina gato ou similares?
Entón, nalgún sentido, el me dá un mellor experiencia en que eu nin
precisa para completar o meu pensamento.
E, de feito, é unha útil cousa, autocomplete en xeral.
Se os seus algoritmos son bos o suficiente e as miñas investigacións son moi obvias,
Eu non teño que escribir a palabra completa.
Eles van me dicir o que é en realidade estou buscando.
Entón, o que Google chama instantánea investigación está só usando AJAX,
usando un código que lles permite solicitar contido adicional a través dun navegador web
nos bastidores usando este nova linguaxe, JavaScript.
Polo tanto, temos un par de minutos do final.
E deixe-me chamar meu amigo Colton ata o escenario,
xa que parecía particularmente divertido última vez
a introdución dunha tecnoloxía que algúns de vós
teñan manifestado interese en para proxectos finais.
Nós pensamos que sería divertido para traer Se un voluntario, aínda que, hoxe
para amosar-lle un complemento para este que permite você-- si,
Vin iso de primeira man.
Imos cara arriba.
Moi ben feito.
Bo traballo.
Eu estou indo a proxectar esta en a pantalla en só un momento.
Cal é o seu nome para todos?
>> EFA: Eu son EFA.
>> DAVID Malan: Etha?
>> EFA: EFA.
>> DAVID Malan: EFA?
>> EFA: Yeah.
>> DAVID Malan: Pracer en velo.
Todo ben.
Déixeme ver se pronto.
Achegue-se sobre a medio con Colton aquí.
Que Colton ten nas súas mans hoxe é un control remoto.
Entón en vez de só estar alí nun mundo tridimensional mirando arredor
Colton como fixo agora pode EFA de feito, pé subindo,
abaixo, esquerda e dereita no seu Nintendo ou Xbox controlador.
EFA: eu vou caer fóra do escenario.
DAVID Malan: eu vou ir aproximadamente aquí.
Pero iso é un risco.
Aceptar.
Entón vai adiante e poñer os en.
Deixe-me ir adiante e cambiar a pantalla aquí.
Déixeme diminúa as luces.
E Colton, déixeme veña estar ao seu lado.
>> Quere explicar aquí co micrófono o que estamos facendo?
Aquí vas.
>> Colton: Claro.
Entón, agora somos cargar o Oculus,
Eu creo que non operan operating-- sistema, pero o programa principal, onde
podes acceder todos os xogos e aplicacións que están na súa biblioteca.
Entón, agora, debe dicir Preme no touchpad para comezar.
Touchpad será na lado dereito do auriculares.
Entón vai adiante e tap--
EFA: Oh, cara.
DAVID Malan: Si, alí vai.
A calidade EFA está a ver é moito máis elevada calidade.
Este é só o WiFi aquí.
Colton: Entón, o que está Vai querer facer
é mirar para arriba dereita da pantalla.
Yep, aquel xogo na parte superior dereita.
E entón cando está seleccionando el, toque novo no touchpad.
Creo que as súas Dreadhalls.
E entón aquí está A-- aquí, deixe- me soster os seus lentes para ti.
>> Entón, eu só lle deu un controlador.
Entón, agora pode controlar o xogo.
Pode moverse e cousas así.
Entón vai adiante e ollar para arriba ata o cumio.
Debería ver un novo xogo.
Entón vai adiante e pode facelo.
Agora, ten que ser capaz de controlar Se co controlador,
así, canto máis rápido o xogo leva-se aquí.
Isto pode ser un pouco asustado.
>> EFA: Agora me di.
Aceptar.
>> Colton: Todo ben.
Entón, confirme que pode moverse.
Aceptar.
Pode moverse.
Perfecto.
Entón, se ollar para abaixo, ten un mapa.
Mapa mostra onde está.
Podes ollar arredor da sala.
Pode virar completamente.
Si, exactamente.
Date a volta.
>> Entón mire para a súa esquerda.
Eu creo que hai algo que podes incorporarse o barril no cuarto.
>> EFA: ¿Como obter o Guión para fóra do camiño?
Colton: Olle para arriba.
Basta ollar para arriba.
Todo ben.
Alí vai.
Agora vai adiante e só virar.
Entón mire máis á súa esquerda.
Mantéñase movendo á esquerda.
Continúe buscando esquerda.
Continúe indo.
Si.
>> EFA: Ah, iso xeito.
>> Colton: Si.
Camiño cara a el co controlador.
Alí vai.
Agora debe dicir buscalo.
Alí vai.
Recollelo.
Todo ben.
Agora, imos saír desta sala.
Dalle camiñar ata a porta.
Entón está indo a hold-- di Manteña o botón para forzalo aberto.
Entón vai adiante e Manteña o botón.
Yep, forzándoo a abrir.
Todo ben.
Bo traballo.
Agora estamos camiñando para fóra da sala.
Entón eu vou deixar o resto para ti e ver o que descubrir.
EFA: Eu non estou indo na sala escura.
Oh, espera.
Agora eu teño que ir polo corredor escuro?
OK, eu vou volver [inaudível].
Colton: Todo ben.
Algúns máis elementos para incorporarse.
Parece que algunhas moedas.
Esa é unha gazua.
Entón, se atopa unha bloqueado porta, pode usar isto.
Está con medo?
>> EFA: Aínda non.
Colton: Aceptar.
>> Pretend-- si.
Basta finxir que é de feito, de pé alí.
E se virar circundar-- ten que se acostumar con iso.
Pero ten sentido.
DAVID Malan: E mentres segue a EFA xogar, xa que podería facelo o día,
todos podemos punta dos pés para fóra aquí.
Pero temos outros dous compañeiros, se desexa vir e xogar.
Se non, imos ver Ata a próxima mércores.
Grazas ao noso voluntario hoxe.
[Aplausos]
>> [MUSIC - "Seinfeld TEMA"]
COLUMNA 1: Ben, eu son poñendo un novo PL montar en.
Eu só cambiou o OLPF--
>> COLUMNA 2: Entón, o que exactamente está facendo?
>> COLUMNA 1: Ben, cada un dos these-- aquí, eu vou amosar-lle este aquí.
Pode velo aquí.
>> COLUMNA 3: Eu creo que eu son bo con estes.
Queres máis?
>> COLUMNA 4: Non, eu estou ben. [Inaudível].
>> COLUMNA 3: Non, [inaudível].
Teña algún.
COLUMNA 1: A cor diferente.
COLUMNA 2: Aceptar.
COLUMNA 1: Entón, en definitiva o que fai é que axusta a cor de--