>> [REPRODUCCIÓ DE MÚSICA]
>> DAVID Malan: Aquest és CS50.
Aquest és el començament de la setmana nou.
I això és el que hauria estat 200o aniversari de Mr. Boole.
Així que això és els becaris a la qual al·ludim hem
força vegades sobre l'ús de Variables booleanes veritables i falses,
1 i 0 i tal.
I aquesta era de Google Homenatge a ell avui.
Ell hauria complert 200.
Així que si voleu uneix-t'hi per dinar CS50,
fer una ullada a l'enllaç a la pàgina web del curs.
I aquestes cares i amics com aquests li esperen aquí a Cambridge.
Rostres com aquests t'esperen a New Haven.
I, de fet, en Ken New Haven amablement va fer
el que es diu un GIF animat d'Eli aquí en una recent lunch-- un GIF és encara
un altre format d'arxiu gràfic, amb la qual estàs familiar-- que
es veu una mica alguna cosa com això.
Així que només una seqüència de-- acord.
Ningú aquí a Cambridge està rient.
No obstant això, a New Haven, aquest és molt divertit, oi?
Tot bé.
>> Així que uneix-te a nosaltres allà.
Aquí a Harvard, En concret, aquest dimecres,
si vostè és un estudiant de segon any o estudiant de primer any even-- o fins i tot el pensament junior-- de decisions
un interruptor a l'ordinador ciència, saber que no vaig
ser un CS assessorant fira d'aquest Dimecres, poc després de la classe
a les 4:00 PM a l'ordinador edifici de ciències Maxwell Dworkin.
Anem a posar això en el curs de lloc web per demà, també.
Donuts, m'han dit, se serviran.
>> Tot bé.
Història-- tan graciós que estava ficant voltant en l'Internet,
i em vaig trobar amb alguns vells arxius del meu antic lloc web.
I resulta fora-- al voltant d'aquest temps, sembla molt oportuna
ja que tinc entès que les eleccions de la UC estan a punt de preparar-se de nou.
Així que vaig córrer per a la UC, perdut miserablement.
I potser això va ser en part per què.
Així que aquest era el meu lloc web en el temps.
Per alguna raó, vaig pensar que era una bona idea, abans de dir-li a la gent
el que el meu plataforma era i per què ha de votar per mi, que tenen
fer clic per entrar en descobrir que informació, que en retrospectiva és
una mica esgarrifós.
Realment no sé el que era.
>> Però certament no ho va fer ajudar a la meva campanya.
També em vaig adonar que per l'alta any-- vaig tenir aquest calendari Muppet.
Muppets eren mena de moda per aquell temps.
O potser no ho eren.
Vaig tenir un calendari Muppet per aquell temps.
I vaig pensar que seria genial per nomenar el meu equip a la xarxa de Harvard
frogman.student.harvard.edu.
En aquest moment, tots teníem única noms d'amfitrió identificables.
I vostè podria triar alguna vanitat nomenar en lloc del seu propi nom.
I me'n vaig anar amb home granota per alguna raó.
>> I llavors em started-- Vaig passar molt de temps accedint a aquests enllaços
aquest matí.
I aquesta va ser la meva pàgina sobre, que ara tipus de sembla adorable.
Però també dóna testimoni de sol fins a quin punt la tecnologia ha arribat.
Vull dir, al seu dia, un 486 era alguna cosa.
En aquests dies, és super, super, super lent i ben menys
el que podria tenir en el seu pròpies butxaques en aquests dies.
Hi ha més allà que que és encara més vergonyós.
Així que vaig a deixar les coses així.
Però aquesta va ser la meva primera incursió en web-- oh, no.
Això no era.
La meva primera incursió real de programació web Va ser aquest lloc, que simplement es va oblidar.
En algun moment, vaig aprendre a fer que les imatges de fons repetitives.
I així vaig trobar aquest mosaic efectiva, com a jugador d'hoquei, el futbol i el golf
pilota, o sigui el que sigui per al lloc web Frosh missatges instantanis.
I això era en realitat, realment la primer projecte basat en la web que vaig prendre en--
Crec que potser estudiant de segon any any, any-- Junior
després de prendre CS50 i CS51, un de les classes de seguiment en comú.
Em vaig adonar en la recerca a través dels arxius
que un dels meus successors i amics, Lee, una mena de canviar
els drets d'autor per dins.
Però això era en veritat una cosa que Que hauria de tenir la vergonya a.
Però en aquest moment, aquest va ser el primer lloc web,
com vaig dir fa unes setmanes, pel qual estudiants de primer any podria
inscriure en esports intramurs aquí.
I així resulta que que les imatges de fons
així no són una bona idea.
Però la web era nou, i tots estàvem experimentant.
I això és el que pel que sembla ho va fer en el seu moment.
Tot bé.
Així que sense més preàmbuls, canviem engranatges avui per donar-li, en realitat,
l'última peça que li pot resultar especialment útil per a projectes fi de carrera
sinó també que començarà a fer que la web a tot el món sencer
sentir una mica més comprensible.
De fet, anem a introduir una més llenguatge de programació
crida JavaScript que és similar i diferent de diferents maneres
de les llengües que hem vist fins al moment.
>> Així C, recordar, és aquest llenguatge compilat.
Has d'executar a través d'un compilador.
Vostè rep el codi font d'oposició codi, o zeros i uns.
I aquests són zeros i uns que la seva CPU, Central Processing Unit,
realment entendre.
PHP, per contra, no és un llenguatge compilat.
És un què?
És un llenguatge interpretat.
Així que hi ha algun programa anomenat un intèrpret que
ha de llegir it-- dalt baix, d'esquerra a dreta-
i esbrinar el que tots la seva sintaxi fa i significa,
si es tracta d'un bucle o una condició o qualsevol altre número de la programació
construeix.
Així que això és un llenguatge interpretat.
>> A continuació presentem HTML.
I HTML ni tan sols és un llenguatge de programació.
Ens diem què?
Un llenguatge de marcat, que és just una mena de forma elegant de dir que
no té construccions de programació com vam veure fins i tot en el dia d'Scratch.
No hi ha bucles.
No hi ha condicions.
Realment és una llengua sobre el marcatge de les dades
i formatar o l'estructuració d'alguna manera.
>> CSS, per la seva part, de manera similar no és un llenguatge de programació.
És fins i tot més orientada estèticament.
I li permet ordenar d'afinar coses com la mida i els colors de la font
i col·locació i tot això.
Després vam tenir
>> SQL.
Així SQL és de fet una programació llenguatge en cert sentit,
encara que a mesura específicament a bases de dades.
Però tot i que només li presentem seleccionar i inserir i esborrar i actualitzar
i un parell d'altres, Resulta que en realitat es pot
escriure funcions o procediments, ja que són
trucada, en SQL que es veuen i actuen absolutament com a funcions PHP i C.
Així que sabem que els existeixen.
Però ni tan sols ens molestem amb ells com acabem gratem la superfície aquí.
I després JavaScript, l'últim de les nostres llengües van introduir formalment.
Així JavaScript, també, és un llenguatge interpretat.
I els que estan familiaritzats, ho fan vol distingir-
amb alguna característica tant des de C i PHP?
Què el fa diferent?
>> AUDIÈNCIA: No és compilat.
>> DAVID Malan: Digui una altra vegada?
>> AUDIÈNCIA: No és compilat.
>> DAVID Malan: No és compilat.
Així que, també, s'interpreta.
Així que no és compilat.
Però això fa que sigui una mica com PHP.
Però segueix sent diferent de PHP d'alguna manera sorprenent,
almenys en la forma en què farem servir.
Sí?
>> AUDIÈNCIA: S'executa en el client.
>> DAVID Malan: Corre del costat del client, en general.
Això és de fet el distintiu característic per a nosaltres en aquest moment.
C va ser del costat del servidor, en el sentit que vam fer tot a IDE CS50.
PHP ha estat fins ara del costat del servidor a la mesura
ja que, també, es posa interpreted-- no compilat, però interpreted--
dins CS50 IDE, que per descomptat és només un servidor o servidors en el núvol.
>> Però JavaScript, fins i tot encara que et vas
per començar a escriure per a, diguem, pset huit i potser definitiva projects-- ets
anar a la dreta en IDE CS50 i guardar-
en els arxius dins d'IDE CS50, CS50 IDE i, al seu torn, els servidors del núvol
en el qual s'allotja, no van interpretar o executar el seu codi.
Més aviat, va ser enviats a forma inalterada fins al navegador.
I és llavors serà IE o Chrome o Firefox o Safari
o el que sigui que realment interpreta que, de dalt a baix, d'esquerra a dreta.
Així que la distinció clau característica per avui
és que JavaScript està del costat del client i PHP, per exemple,
ha estat del costat del servidor.
Ara, això té implicacions interessants per, igual que, la propietat intel·lectual
i que en realitat es pot veure el seu codi.
I, en efecte, es pot anar al web i veure més
qualsevol codi que algú té escrit en JavaScript.
A vegades és més fàcil de llegir, de vegades és ofuscat.
Però més sobre això en el moment oportú.
>> Així JavaScript, prou bé, és molt similars, sintàcticament, a C.
I molt com PHP, no hi ha funció principal.
Si vols començar a escriure Codi de JavaScript, com es veurà avui,
que acaba de començar a escriure-ho.
Però és, veuràs, en particular útil en el context dels navegadors web.
No obstant això, el meu petit disclaimer-- generalment abans els vaig parlar
era dir que pugui cada vegada ús avui dia del costat del servidor JavaScript
utilitzant un marc de fantasia anomenada NODE.JS que algunes de les aplicacions del CS50 propis
estan escrits en.
Comprovi 50 utilitza realment Node.js.
Però anem a centrar-se en Del costat del client JavaScript a partir d'ara.
>> Així que aquí és un conjunt de condicions en PHP.
Ho sentim, en-- realitat, que declaració, també és correcte.
Aquest és també un conjunt de condicions de JavaScript.
Sintàcticament, és idèntica a C i PHP.
Expressions del Sr. Boole són, De la mateixa manera, sintàcticament
idèntica a tots dos C i PHP.
També comptem amb interruptors en JavaScript que semblen idèntics.
Tenim per a bucles que són estructurat de forma idèntica,
mentre bucles, fer mentre bucles.
>> Aquest és una mica diferent.
PHP tenia la per a cada construcció que podria estar fent servir
o utilitzarà en el conjunt de processadors 7, potser.
JavaScript té aquesta versió especial de per on vostè diu, literalment, una cosa
com per clau variable d'objecte, que És una manera molt succinta de dir,
si tinc una objeto-- i anem a parlar d'aquests al seu torn en un moment--
i vull iterar sobre tots dels parells de claus de valor a l'interior,
Jo no he de trobar la manera de índex numèricament amb zero, un,
dos, tres.
>> Literalment, el que puc dir això.
I en cada iteració, JavaScript em vaig a actualitzar la clau variable
ser la primera clau, a continuació, la següent tecla, llavors la següent clau, llavors la següent tecla,
i així successivament.
I puc arribar al seu valor mitjançant el tractament un objecte en JavaScript, com veurem,
com si es tracta d'un matriu associativa en PHP.
De fet, si finalment embolicat el seu importa al voltant del que és una matriu associativa
en PHP, es pot pensar en això per ara com idèntica a un objecte en JavaScript.
Però això és una mica de una simplificació excessiva.
>> Les matrius es veuen, prou bé, idèntica a PHP a excepció d'un caràcter.
Hi ha una cosa que falta aquí que vam veure la setmana passada amb PHP.
El que s'omet?
Sí?
Cap signe de dòlar.
Així que estem de tornada a un més món normal, on
variables que no tenen signes de dòlar.
Però ho fa prefix ells amb var, en general.
I var significa variable.
I igual que PHP és vagament typed-- qual hi ha tipus,
hi ha números i cadenes i carrosses, etc. forth--
JavaScript de manera similar té tipus.
Però està vagament escrit en què el els programadors no han de especificar-los.
Només hem de ser conscients que hi ha diferents tipus.
>> Variables, meanwhile-- aquí és com podríem declarar "hola, món"
com una cadena.
Observi que és idèntica a PHP però cap signe de dòlar.
I això és una cosa que va a començar a veure més avui,
pel qual vostè té un objecte amb claus i valors.
I si vols provar inferir d'última week--
la sintaxi és una mica diferent.
Però una mica de seny check-- quants tecles fa aquest objecte sembla tenir?
Així que veig 4.
Veig dos.
>> Pel que és en realitat dues.
Així que aquesta és una col·lecció de dos parells clau-valor.
La clau és símbol el valor és FB.
La clau és el preu el valor és 101.53.
Així que aquests són dos parells clau-valor.
I recorda, PHP-- i això és nou només una mena de diferència sintàctica.
No és tot el que intel·lectualment interessant.
PHP podria haver escrit aquest mateix cosa com cita follows--, és igual.
I puc canviar aquests per claudàtors.
I llavors puc canviar això a una paraula citat, "preu".
I llavors jo no ús dos punts.
Què és el que faig servir la setmana passada?
Sí, el signe igual fletxa notació funky.
>> I després vaig fer el mateix aquí.
El mateix aquí.
I això és tot.
Així que és molt bé si això no té realment enfonsat en la memòria només
però, perquè és realment intel·lectualment interessant.
És simplement diferències sintàctiques.
Però les idees són exactament els mateixos.
Dins d'aquesta variable cita en JavaScript
és un conjunt de parells clau-valor, un dels quals és símbol, un dels quals
és el preu.
I puc arribar a aquests valors amb la següent sintaxi.
Igual que en PHP, pel que vaig poder fer alguna cosa com-- deixar
Em faig aquesta caixa una mica més gran.
Igual que en PHP, pel que vaig poder fer esto-- oh, maleïda sigui.
Vine.
>> Igual que en PHP-- OK, anem a només ha d'utilitzar les notes del presentador.
Igual que en PHP, pel que pugui fer $ cita ["símbol"] cotització $,
i això em el valor de "símbol".
En JavaScript, que serà idèntics, pel que jo només puc fer això.
L'única cosa que és falta és el signe de dòlar.
>> Així que molt bé prou, llavors, no hi ha no tant la sintaxi nova.
Així que el que avui ens centrem en, en realitat, és algunes de les idees i de les aplicacions.
I la primera tals aplicació que vostè pot ser
haver vist si es va capbussar en pset 07:00 ja és aquesta sintaxi.
Així que en conjunt de processadors 7, si tens vist o no vist encara,
saben que hi ha un arxiu que li donem vas cridar config.json-- JavaScript
Objecte de notació.
Per què?
Volíem ser capaços d'oferir una plantilla amb alguns parells clau-valor.
Volíem ser capaços de donar-li una llista de l'hoste, el nom del servidor.
Volíem donar-li una marcador de posició per al nom d'usuari
i un marcador de posició per a la contrasenya.
Si vostè no està veient això, però, no es preocupi.
Més sobre això en conjunt de processadors de set [? spec. ?] I llavors,
Òbviament, volem que omplir el les tasques pendents
perquè quan vostè registra a CS50 IDE, cada un de vosaltres
tenir el seu propi nom d'usuari i contrasenya.
>> Així que podríem haver fet servir una mitja dotzena o formats d'arxiu més diferents.
Podíem haver utilitzat un arxiu .txt.
Podríem utilitzat un arxiu CSV.
Podríem haver fet servir un Arxiu INI, un arxiu XML,
un munt més sigles que és possible que no hagi sentit a parlar mai.
És una mica arbitrària al final del dia.
Però molt popular en aquests dies és un text format anomenat JSON-- JavaScript Object
Notation-- que s'assembla a això.
És una mica críptic, notar els patrons.
Es comença amb un arrissat oberta cotilla, i acabes amb el mateix.
Dins d'això és alguna cosa.
És un parell clau-valor.
Així que aquest és un objecte que estic mirant a la pantalla aquí
que té una clau, que té un valor.
I just inferir sobre la base de la patró anterior, quin és la clau aquí?
Base de dades, el que cal l'esquerra del còlon.
>> Ara, el valor passa a ser a múltiples línies d'aquesta vegada.
Però el valor comença amb un arrissat preparar-se i acaba amb una clau.
Llavors, què proposaria vostè és el tipus del valor de base de dades?
Un diccionari o, simplement més succintament, un objecte.
Oi?
Aquesta és una espècie d'estructura de dades que pot utilitzar altres estructures dins de si mateix.
Així que si tot això estem trucar a un objeto-- i un objecte
és només un munt de clau-valor pairs-- la valor de la pròpia base de dades és un objecte.
El valor de la base de dades té un munt de parells de valors clau, el primer dels quals
és amfitrió, a continuació, el nom, llavors nom d'usuari, contrasenya i després,
cada un dels valors, per la seva banda, és només una cadena avorrida entre cometes dobles.
>> Així que fins i tot si això no és súper clara encara,
sabem que això és només una norma manera, força avorrida
d'emmagatzemar dades en un format estàndard.
Però els problemes més comuns que podria fer, fins i tot en pset 7,
són petites coses estúpides, com si ometre accidentalment la coma allà.
Això va resultar en l'arxiu no necessàriament sent llegible.
Si omet accidentalment coses com la cotitzacions, no serà fàcil de llegir.
Així que és un format d'arxiu molt primmirada, però és un que és molt comú.
I ens toca a utilitzar-lo, tot i que no utilitza cap JavaScript altra manera,
en pset 07:00.
>> Tot bé.
Així que recordi aquesta imatge.
Parlem, en HTML, que el codi podria tenir aquest aspecte.
Aquest és el HyperText Markup Language [Inaudible] per tot just "hola, món".
Però llavors ens vam proposar un temps enrere que si ajuda,
és possible que vulgueu començar a pensar sobre això ja com un arbre.
De fet, la indentació que utilitzar només pel bé de la llegibilitat
o per causa del seu estil l'esquerra tipus llauna de
traduir-se en aquest arbre, on tenir algun node arrel especial que anem a
genèricament denominat document, sota de la qual és l'element HTML arrel o etiqueta, HTML,
que després té dos els nens, el cap i el cos.
>> I després, al seu torn, el cap té un títol.
I el títol té un valor de text.
I el cos té igualment un valor de text.
Així que si estàs còmode dient això sí, vostè podria prendre aquest codi HTML
i fer un dibuix com això, el costat dret
és un model mental agradable perquè ara que tenim JavaScript, una programació
llenguatge que els navegadors poden executar i interpretar per a vostè,
resulta que el estem a punt de fer-ho al codi
és començar a manipular aquesta estructura d'arbre en la memòria.
No tenim per construir l'arbre en memòria.
No hem de fer una mena de estructura de dades i cinc d'estil pset
complexitat.
El navegador, molt bé prou, al interpretar superior HTML a baix,
esquerra o dreta, és, literalment, va nosaltres lliurar l'equivalent d'un punter
a tot aquell arbre de forma gratuïta.
Ho fa tot el treball dur.
Això és el que Mozilla i Apple i altres han fet per nosaltres.
>> I amb JavaScript anem a ser capaç de controlar i canviar i fer
coses interessants a aquest arbre, altrament coneguda
com DOM o Document Object Model.
Quin tipus de coses?
Bé, resulta que en JavaScript, no hi ha
aquesta llarga llista de esdeveniments que poden tenir lloc.
I no hem fet servir realment tan paraula des de la setmana zero i pset
zero quan parlàvem de Scratch.
La majoria de vostès probablement no van utilitzar un esdeveniment en el seu projecte de Scratch.
Però es pot recordar el simple Marco Polo
exemple, on teníem dos sprites, un d'ells va dir, Marc.
L'altre dels que després, en escoltar i escoltant aquest esdeveniment, va dir Polo.
Si no és així, no dubti en mirar cap enrere que cap enrere.
>> Però això és només per dir, i vostè pot classe de
inferir a partir dels noms d'aquests coses, JavaScript, resulta que,
ens va a donar una forma d'escoltar per al ratolí que va avall o el ratolí pujant
o anar tecla de sota o la tecla pujar o onselect onsubmit
o onresizing alguna cosa.
En altres paraules, qualsevol acció física que un ésser humà pot prendre amb un navegador
el que fan tots els dies, pot escriure codi perquè l'escolta dels esdeveniments
i després fa alguna cosa apropiat.
>> Per exemple, si utilitza Google Maps, ¿Què passa si es fa clic i es mouen
el ratolí, en general?
Si fa clic i arrossega?
Sí?
Exactament.
El mapa comença a moure.
Així que vostè pot espècie de veure el que hi ha aquí, el que és d'allà.
I com Google implementar això?
Bé, presumiblement, són usant un parell d'aquests esdeveniments
oients, un que diu, escolti el ratolí
down-- així que quan l'usuari físicament empeny la seva trackpad o el ratolí
cap avall.
I després estem buscant cosa així com el moviment
o algun altre esdeveniment que ens permet capturar arrossegament.
I de fet, d'arrossegament és similar en aquest dot dot dot llista de possibles opcions.
>> Així que això va a ser un poderós manera de començar a respondre a l'usuari
fins i tot abans que ell o ella realment fa clic alguna cosa explícita com presentar.
Però anem a introduir un parell de temes per arribar-hi.
Però primer, anem a la transició fins a cert codi real.
Així que em vaig a anar per davant i obrir dg-0,
que és un exemple molt senzill aquí que si el zoom en simplement
té aquesta entrada aquí per a mi.
I jo seguiré endavant i escriure "David" al meu nom i feu clic a Envia.
>> I llavors, encara que espècie de baix preu, em tenir aquest símbol que apareix que diu:
"hola, David!"
Així que això és una mena de com el nostre "hola, món"
que vam fer fa un temps enrere en C i fins i tot en PHP perquè he dinàmicament
emesa el meu nom.
Jo puc fer el nom d'algú més aquí.
Jo podria simplement canviar això, com, Hannah, feu clic a Envia.
I, en efecte, els petits canvis emergents.
>> Ara, els elements emergents són un dels majoria de les característiques d'abús del web.
I, de fet, de tornada a els bloquejadors de finestres emergents dia
es va posar de moda, ja que aniria a algun website--
potser un lloc-- qüestionable que de sobte
iniciar esquitxant la pantalla amb un munt de finestres emergents.
I així aquesta habilitat perquè aparegui finestres al davant de l'usuari
no ha estat especialment ben rebut per la humanitat.
Així que per això es veu aquest prevenir cosa,
que només fa tota aquesta cosa lletja.
Així que anem a necessitar un millor manera de demanar a l'usuari.
Però per ara, que sembla funcionar.
Així que només intuïtivament, el que sembla estar succeint aquí?
Segueixo endavant i feu clic a Enviar, i llavors alguna cosa està succeint, amb claredat.
Però el que no està succeint que va succeir la setmana passada qualsevol moment vaig fer clic a Enviar?
El que no va passar a la pantalla?
Ho sentim?
Actualitza.
La URL no va canviar en absolut.
Li vaig dir que això era dg-0, i encara estic a dg-0.
Normalment, ens tornaríem a aconseguir canviem a un altre URL, com register.php o similars.
>> Però fins i tot quan jo descarto ho fent clic a D'acord,
compte que la URL queda completament lloc.
I, de fet, si estic una mica escèptic, deixa obro Chrome.
Permetin-me obro la fitxa Xarxa.
I noti que és en blanc en el moment.
Déjame anar endavant i tornar a enviar Maria.
No hi ha trànsit de xarxa que sigui.
Així que no hi HTTP.
>> Així que de fet, si em veig en el codi font per esto-- permetin-me tancar aquesta finestra
i anar a la vista d'origen.
Interessant.
Sembla que hi ha una mica de noves etiquetes, entre ells guió.
Així que anem a fer una ullada dins CS50 IDE exactament el que envia a l'usuari.
>> Així que aquí anem a és-- centrar-se només en el codi HTML.
Aquí està la meitat inferior de dom-0.html.
I es va adonar que té un títol, una etiqueta de cap, un cos de l'etiqueta, una etiqueta de formulari.
Però el que salta a vostè com diferent, especialment si vostè mai ha
escrit cap JavaScript tu mateix.
Permetin-me desplaço una mica a la dreta aquí.
Tinc una entrada, una altra entrada per enviar.
Tinc una identificació, que és una espècie de nou.
Però ens van fer veure això amb CSS.
Quina altra cosa és, sens dubte de nou?
Sí?
Niça.
>> Tot bé.
Així que on diu onsubmit, compte del que sembla seguir.
Aquest és un atribut en la nomenclatura HTML.
El seu valor és aquesta cadena citat aquí.
I això es veu una mica estrany a primera vista.
No és HTML.
No és CSS.
Es tracta, com pot imaginar, JavaScript.
Així que sembla que construeix en aquest pàgina web és una funció anomenada salutació.
I estic inferint que acaba perquè és una paraula, saludar-lo.
Té una parin oberta, prop parin, punt i coma.
Sembla una funció C, s'assembla a una funció de PHP.
>> I, en efecte, que va ser una funció JavaScript.
Llavors torno falsa.
Tornarem a que, en un moment.
Però on es defineix aquesta funció?
Doncs m'ho dius a mi desplaçar-se cap amunt a la part superior de l'arxiu.
I tot i que es tracta d'una línia llarga, És relativament senzill.
Permetin-me Allunyar aquí i centrar-se en aquestes quatre línies.
>> Així que en JavaScript, just com PHP, només
diguem, literalment, la paraula "funció" el nom de la funció,
i després parèntesi amb qualsevol arguments-- cap argument en aquest cas.
I no hi ha tipus de retorn en JavaScript, igual que PHP.
Així que és una mica més fluix que C. Claudàtor obert, prop de claudàtor.
Construït en JavaScript és un function-- no és un function-- recomanat
però una funció anomenada d'alerta l'únic propòsit en la vida
és per tirar aquest bastant lleig missatge que vam veure fa un moment.
>> Ara bé, això és una espècie d'un mos.
Què està passant aquí?
Així que anem a començar a ressaltar tot aquí.
Aquest és el mateix argument per alertar.
I el que està passant?
Això només es veu com una cadena.
I resulta que, a diferència de PHP i diferència C, no importa en JavaScript
si vostè cometes simples o dobles.
Seran equivalent.
I, francament, és només popular en aquests dies
per als programadors de JavaScript per sempre utilitzar cometes simples per alguna raó.
És només el que cal fer.
Però podríem utilitzar cometes dobles, també.
>> Així que a més és un nou personatge.
Però aquells de vostès que han fet això abans, ¿què vol dir més?
Sí.
Concatenar.
Així ho vam veure en PHP.
No és només el punt operador en PHP que
es concatenar dues cadenes juntes.
C era un dolor al coll per fer això.
Recordeu del conjunt de processadors de sis, que era un dolor especial al coll,
vostè hauria de fer servir alguna cosa així com strcat
després de l'assignació de memòria a la pila o el munt.
Calia passar per la pedra només per concatenar dues cadenes.
En JavaScript, és super simple.
Només has d'utilitzar l'operador més entre ells.
>> Així que el complex d'aspecte cosa sembla ser la següent
perquè al final de tota aquesta cadena, només
concatenar en un signe d'exclamació.
Així que si el que estava apareixent ser "hola, David", "hola, Hannah,"
"hola, Maria," i així successivament, amb claredat cosa que hi ha entre els dos
avantatges m'han de donar accés a què?
Què hi ha allà amb seguretat?
Sí.
Així que vaig a fer veure que aquí la respondre al seu nom, oi?
Així que el seu nom va aparèixer a la final resultat. Llavors, què vol dir això?
Bé, he proposat anteriorment en què imatge que la crida de manera que l'DOM
té aquest element arrel especial camí fins a la part superior anomenat document.
I ara, resulta que això va ser una variable global especial
en JavaScript, integrat en que és una tota munt de funcionalitats útils.
Entre la funcionalitat útil és la capacitat per arribar a qualsevol node descendent.
Aquests quadrats o rectangles o el·lipses són només els nodes d'un arbre, per així dir-ho.
>> Així resulta que construeix en Objecte de document de JavaScript
és una funció, també coneguda com una mètode, que crida getElementById.
La sintaxi per cridar una funció en JavaScript
que està dins d'un objecte o una variable és simplement amb la notació punt.
I vam veure això en C el que la sintaxi struct.
Això es veu en el conjunt de processadors 07:00, classe de, més o menys, quan veus CS50 :: consulta.
Els dos punts de còlon en PHP és un altre forma de cridar a una funció que és
dins d'algun objecte.
>> Però per ara en JavaScript, és només un punt.
I així aquesta funció, prou bé, tipus de
diu el que does-- obtenir elements per ID.
Un element és només un altre nom per a una etiqueta o node al DOM.
I a fi d'obtenir elements per ID "nom" significa això- aquí està la meva HTML.
I en base a aquest codi HTML, el que node o el etiqueta HTML sóc jo
va ser mitjançant programació mà trucant a document.getElementById?
>> Sí, exactament.
Vaig a aconseguir l'entrada element existeix el ID és "nom".
Així específicament, pot pensar en aquesta funció,
getElementById, com una manera de donar una còpia d'un punter a aquest node específica
en l'arbre.
No hem elaborat aquest arbre, però és una manera
d'aconseguir l'accés a aquesta rectangle o aquest rectangle
mitjançant la identificació única que a través del seu ID.
>> Ara, per què és útil?
Bé, resulta que que una vegada que hagi rebut
aquest node, aquest rectangle de la imatge, aquest node dins d'ella,
al seu torn, té un munt de parells clau-valor properties--
o dades, un dels quals es diu valor.
Així que, literalment, és una mena de mos per explicar tot l'assumpte.
Però al final del dia, tot això fa és donar-li
una cadena que l'usuari va escriure en d'aquesta manera jeràrquica.
Però no m'agrada una parell d'aquestes coses.
O més aviat, hi ha una mica de curiositat encara.
Tot això semblava funcionar.
Per què creus que vaig tornar falsa després de cridar a saludar?
Això sembla una mica lleig, que Tinc dues declaracions no
separats per punt i coma.
Prengui una conjectura.
Si em treu return false, el que que podria succeir, simplement per instint?
Ho sentim, dir de nou?
>> Obriu un munt de de Windows.
Així que potser una mica potencialment igual que succeiria.
Què més?
Podria presentar una sol·licitud per on?
A la mateixa pàgina.
Així que, de fet, això és tot com més a prop resposta aquí,
tot i que, a diferència en el passat, no tinc
especifica l'atribut d'acció, que normalment hem de fer.
Resulta que hi ha un defecte. Si no s'especifica l'acció,
és com dir cita, cap de la cita o el nom de l'arxiu en si,
que en aquest cas seria ser com diu-0.html.
És només una mica d'inferir, o més aviat implícita.
>> I pel que si no faig això, notem.
Vaig a salvar això.
I m'he tret de retorn fals.
Permetin-me tornar a aquesta exemple i la força torni a carregar.
I és possible que hagi vist jo suggereixo això en CS50 Discutiu un munt de vegades.
Si hi ha alguna cosa que està sempre actuant funky i el navegador no es comporta com s'espera,
moltes vegades vostè voldrà mantenir Maj i feu clic a Actualitza.
Això obligarà a cada arxiu per recarregar i no utilitzar cau local del seu navegador
o una còpia de manera que ara, deixa anar endavant i obrir el meu inspector, a la fitxa Xarxa.
Vaig a fer clic Preservar Iniciar perquè
no ho volen per esborrar les files Una vegada que aconsegueixi portat lluny en un altre lloc.
>> Déjame anar per davant aquí i Tipus d'Andi, feu clic a Envia.
Tot bé.
Això sembla com s'esperava.
Diu "hola, Andi."
Permetin-me feu clic a D'acord.
Interessant.
Observi que la pàgina ha canviat, encara que en la pàgina original.
Observi el tipus de canvi d'URL.
Va afegir un signe d'interrogació, que sol ser un indicador
que tractem de presentar alguna cosa.
I a continuació, a la part inferior, encara més explícita,
aquí hi ha la sol·licitud HTTP actual, que va obtenir una resposta de 200 que
em va portar de tornada aquí.
>> Així que això no ho és que volem fer, no?
Perquè jo no vull recarregar tota la pàgina.
Jo en canvi volia tornar falsa per tal de curtcircuit
el comportament predeterminat del navegador, que era, per descomptat, a presentar la pàgina.
>> Així que donem una ullada a una marginalment millor exemple.
Aquesta és la versió 1 dom.
I noti el següent.
Està bé si no ho assimilo totes les línies de codi.
Però el que és fonamentalment diferent sobre aquesta aplicació?
Vaig a estipulo que comporta la mateixa, fa el mateix.
Què he òbviament fet diferent?
Sí?
>> AUDIÈNCIA: [inaudible].
DAVID Malan: Sí.
Així que la funció es defineix differently-- En altres paraules, absents de la forma,
allà dalt, en línia o 7-- més aviat, la línia més llarga 8-- cap
tinc l'atribut onsubmit.
En l'exemple anterior, vaig tenir això.
I després, literalment, vaig escriure el meu codi aquí.
I llavors em vaig dir return false.
I si no es fregui que el camí equivocat, però,
ha de començar a la mesura ja que, igual que en HTML,
quan vam començar a co-barregen el amb CSS en els atributs d'estil,
que acaba de començar a ser una mica desordenat o sentir una mica malament.
>> De la mateixa manera aquí, si de començar a prendre el HTML,
i després de forma automàtica plop una mica de codi JavaScript
al mig d'una cadena entre cometes, és no serà molt fàcil de mantenir.
Oi?
Ni tan sols és evident a primera lloc on el codi JavaScript és.
Així que seria molt agradable ja un principi de millor disseny,
anem a mantenir la nostra HTML complet separar de la nostra JavaScript.
>> Així que per fer això, el que hem fet aquí és la following--
simplement fem servir HTML només marcat.
I així, en versió d'un això, tot El que tinc és un formulari amb un identificador únic.
I després aquí, estic aprofitant d'una característica especial de JavaScript
pel que puc tenir el que hi ha crida una funció anònima.
Així que resulta que si jo dic document.getElementById de 'demostració'
això és com donar-me un punter a aquest node en el meu arbre, l'element de formulari,
per dir-ho així.
>> Ara, només sé de sabent una mica d'HTML
ara que estem d'haver llegit algunes en línia de referència, que un element de formulari compatible
un munt d'esdeveniments en listeners-- És a dir, la llarga llista d'esdeveniments
oients que vam veure fa un moment.
Sé que de la lectura de la documentació que onsubmit és un esdeveniment vàlid
escolta per a un element de formulari.
>> Així que una vegada que sé que, que és segur per a mi fer
el following-- aconseguir aquest node des de l'arbre, l'element de formulari,
i l'accés la trucada de la seva propietat onsubmit.
Així que el punt només significa aquesta és una propietat,
com un valor especial dins d'ella.
I quin tipus de dades sóc jo assignar, segons sembla,
a onsubmit, que és efectivament una variable dins
d'aquest node en l'arbre?
És un camp a l'interior d'aquesta estructura.
Quin és el tipus de dades?
>> Una funció, si.
Així resulta que PHP tingui.
I tot i que no li dirà sobre això,
C també té punters de funció, els capacitat de passar i assignar funcions
com a propis els valors de les variables.
I no anem a retrocedir de nou a C.
Però per ara, resulta que en el costat dret aquí,
tot i que es veu una mica covard, aquest mitjà, hey navegador,
dóna'm una funció.
Jo no em vaig a molestar fins i tot donant un nom perquè estic literalment
va assignar diguem la direcció d'aquesta funció
immediatament al onsubmit.
En altres paraules, navegador, no cal saber el que aquesta funció es diu.
Vostè només necessita saber on està en memòria.
I així és suficient només per tenir un signe igual no
i no molestar-se a nomenar aquest, igual que foo o saludar o qualsevol altra paraula.
I ara això és només una cosa d'estil.
Podia moure aquest claudàtor en ell-- línia al costat sorry--
com solem fer CS50.
Però en JavaScript, és realitat estilísticament comuna
només per mantenir la clau de la primer, en aquesta primera línia.
>> Però d'ara endavant, no hi ha res interessant.
Aquesta clau d'obertura just demarca l'inici de la meva funció.
La funció és ara idèntica, excepte que he
inclòs el fals retorn dins d'aquesta funció.
Perquè resulta fora-- i només ho faria
saber això de la lectura el documentation--
que si la funció que s'assigna al controlador de onsubmit retorna false,
el browser coneix i està d'acord no per enviar el formulari a un servidor.
Si retorna vertader, presentarà a un servidor per raons que veurem
són útils en un moment.
>> I a continuació, el punt i coma després la clau d'allí només
vol dir que he finalitzat la configuració de la funció.
Vostè sap com dir-tan aviat com se sent una presentació.
Tot bé.
Això segueix sent sens dubte una mica lleig.
Llavors, què més podem fer?
>> Bé, resulta que després en la versió 2, que és el last--
i només haurem de fer una ullada a això.
A risc de fer el més lleig, resulta
que hi ha una biblioteca a el món diu jQuery.
I jQuery és un super Biblioteca Popular JavaScript
això és tan popular que la majoria qualsevol JavaScript-- no és
estrany que la gent confongui jQuery amb JavaScript.
Per què?
Sí JavaScript té molt maneres de fer les coses-- detallats
document.getElementById, dadadadadada.
S'acaba per tenir molt llargues línies de codi.
>> Així que un tipus anomenat John Resid, que en realitat treballa per a una startup
fins a aquests dies, va sortir amb aquesta biblioteca anys
fa que moltes persones han contribuït a crida jQuery que canvia
la sintaxi de la següent manera.
I perquè ho has vist això, Com que vostè sempre
veure això si fent un projecte final basat en la web,
aquesta seria la forma equivalent de l'aplicació d'aquesta mateixa funció utilitzant
aquesta biblioteca especial.
>> Ara, en lloc de presa de pèl el distingeixen en la seva totalitat,
anem a mirar alguns patrons.
Aquesta sintaxi sembla tenir quantes funcions anònimes
o funcions sense nom o funcions lambda AKA?
Dos, oi?
I saps que, encara que vostè no és súper còmoda amb això,
simplement pel fet que es diu la funció () dues vegades.
>> I resulta que el que aquest codi és doing--
i ens referirem a les referències en línia, en última instància, una mica d'ajuda amb això.
Això només vol dir que quan el document està llest,
seguir endavant i registrar- la funció següent
com el controlador de presentar per al HTML element la única idea és demostració.
I després, quan això succeeix, trucar a aquestes dues línies de codi.
I això és, tràgicament, una més forma prolixa de dir return false.
I vaig esmentar això només perquè veuràs codi com aquest en línia.
I no és res per ser intimidat per.
Sinó més aviat, tingueu en compte que el que està va ser comú en JavaScript
és aquest paradigma.
I per això vam mostrar tot per ara.
Tot bé.
Així que sense aturar-se gaire tant en què la sintaxi,
es hi ha alguna pregunta sobre aquests exemples o idees fins al moment?
Tot bé.
Així que anem a usar això per a alguna cosa útil.
Fer una pàgina web que només diu hola, això i allò altre no és tan interessant,
no underwhelm.
Aquest no serà bonic, però es va a fer alguna cosa útil.
Déjame tornar al meu directori aquí i obrir, per exemple, la forma-0.html.
>> Així que suposo que aquest és el primer any pàgina de registre esports intramurs
sense cap tipus CSS o qualsevol sentit del disseny.
I vull seguir endavant i registrar-se aquí amb una contrasenya.
I vaig a estar d'acord amb els termes i les condicions i feu clic a Registre.
I ara el lloc web diu: "Tu ets registrada! (Bé, no realment.) "
Això sembla que va funcionar, però m'ho dius a mi anar per davant i la força de recàrrega.
>> I deixin-me dir-los, no, no ho fa necessiten la meva adreça de correu electrònic real.
O potser només haurem de diem electrònic en aquest país.
Clau de ser, com, 12.345.
I llavors, només perquè sóc un idiota, ara és el 123.456.789.
I jo no vaig a comprovar la seva caixa.
>> Hmm.
Tot bé.
Així que hi ha diverses oportunitats per a la millora aquí.
I vostè sap, o es veurà en pset 07:00, que es pot escriure code--
i vostè ha d'escriure codi en PHP-- defensar
contra aquest tipus d'usuari errors perquè l'usuari clarament
no ha cooperat.
I ell o ella no li ha donat tota la Valors que volies o fins i tot en el format
que volies.
Pel que vostè veu en pset set del sens dubte podríem tenir alguna
si les condicions el que diuen si l'adreça de correu electrònic
no és un username@something.edu, podríem simplement
demanar perdó i demanar disculpes a l'usuari tant, que es pot estar en pset 07:00.
O si no han comprovat que la caixa, Resulta que en PHP, es pot detectar que,
també.
I, certament, si les contrasenyes no coincideixen com a register.php
per pset 7, es pot detectar que.
Però això és un dolor al coll que ara sol·liciten
nosaltres anar tot el camí fins al servidor.
L'usuari és informat de l'error.
I almenys a menys que utilitzi algunes tècniques més elegants,
ara han de fer clic a la fletxa cap enrere.
¿No seria agradable, com una gran quantitat de llocs web d'avui en dia,
si tinguessis més immediat retroalimentació, a l'instant?
>> En altres paraules, deixa anar a la versió un, que hi haurà més bonica.
Però té aquesta característica.
Malan, 12345, 123456789, no marcarà la casella, Registre.
Les contrasenyes no coincideixen.
Així que, encara que aquest pop-up és ugly-- podem reemplaçar aquest finalment
amb alguna cosa com Som-hi, que es veurà en conjunt de processadors de set
és un library-- molt popular que vaig fer detecten que les contrasenyes no coincideixen.
Tot bé.
Bé, deixa arreglar això que l'usuari.
Deixin-me seguir endavant i dir 12.345, 12.345.
Encara no revisar l'acord.
Vostè ha d'acceptar els termes i condicions.
Així que per què?
>> Si ja hem plantegem que hi ha una manera,
i els hem requerit en pset set a detectar l'error
condicions com aquesta del costat del servidor, per què hauria de fer-ho
molestar també fer això en JavaScript?
Què és un argument en favor d'afegir el que
estàs a punt de veure com some-- hi ha una complexitat addicional.
>> Potser no hi ha alça.
Què podria ser?
AUDIÈNCIA: [inaudible].
DAVID Malan: Oh, interessant.
Gestes potencials.
Tan segur, si vostè no està manejant entrada de l'usuari errònia que gran,
potser és millor si es ni tan sols arribar al seu servidor.
M'agradaria fer retrocedir allà i per exemple, probablement hauria
solucionar dos problemes.
Però això és just.
Què més?
>> AUDIÈNCIA: [inaudible].
>> DAVID Malan: Sí.
Aquest codi, com hem dit abans, és interpretat en el costat del client.
No es va molestar al servidor, el que significa que no fa
impacte de la càrrega o la capacitat del servidor.
I ara, per poc em d'edat, això no té efecte significatiu
perquè tinc un usuari en aquest moment.
>> Però si vostè és qualsevol pàgina web de mida decent,
especialment els més grans, com Facebook, com més es pot mantenir a la gent fora
del seu servidor el millor perquè un servidor, per descomptat,
només té una quantitat finita de memòria RAM, un nombre finit de gigahertzs,
un nombre finit de coses que pot fer per unitat de temps.
Així que si hi ha més persones en el món colpejar al seu servidor,
ingressar accidentalment incorrectament, de la mateixa manera que si
pot mantenir aquest pes de sobre seu servidor.
A més, especialment en un mòbil device-- Si alguna vegada
iniciar sessió en my.harvard o NetID de Yale o similar,
hi ha aquesta la latència amb una gran quantitat d' llocs web com això que es necessita,
com, un maleït segon o dues vegades.
I després, Déu meu, si vostè escriu malament, llavors vostè ha de tornar el cop i refer-lo.
Així que hi ha latència, especialment en connexions de xarxa lentes.
Però JavaScript, perquè que s'executa en el client
i no ha d'anar i venir a través d'una internet potencialment lenta
connexió, vostè pot aconseguir retroalimentació gairebé instantània.
>> Així que donem una ullada a això.
Permetin-me obro forma-0 i mirar el HTML aquí.
I anem a veure el que està passant.
Aquesta és una forma la l'acció és register.php.
Només estic fent servir aconseguir tan que podia veure la URL.
Però per a les contrasenyes, segurament voldríem per canviar això per publicar a la realitat.
Heus aquí un camp d'entrada de tipus text.
Aquí hi ha una altra entrada camp de tipus contrasenya.
Aquí és, si vostè mai ha vist, una entrada de casella tipus.
>> Però no hi ha JavaScript aquí en absolut.
Això és només HTML que va a register.php.
Però en la versió un, en el qual començat a obtenir els elements emergents,
anem a veure el que realment passa aquí.
En la versió un, el que Vaig a veure- I
Vaig pensar que podria estancar suficient amb prou paraules, però se m'ha acabat.
>> En la versió un-- aquí anem.
En la versió un, notar l'following-- i no és la millor aplicació,
però és la meva primera.
Cal notar que sota de la forma, tinc una etiqueta de script.
I una etiqueta de script significa, bo, navegador, aquí
ve una mica de codi a, Típicament, JavaScript.
I ara, noto el que estic fent.
En line-- tot just puc llegir it-- línia 32, que diu,
var form-- així dóna'm una variable anomenada formulari.
I a continuació, obtenir document.getElementId de "registre".
Què és això?
Bé, deixa rebobinar fins aquí.
I fixeu-vos, ah, em vaig l'element de formulari una idea arbitrària però descriptiu
de registre.
Així que això em dóna una variable que em permet agafar aquest node,
aquest rectangle en l'arbre anomenat formulari.
mitjans form.onsubmit, hey navegador, registrar un detector d'esdeveniments
en aquest formulari.
En altres paraules, quan aquesta forma és presentat, executeu el següent codi.
No necessita un nom, perquè ¿Per què necessita saber el nom?
Vostè només necessita saber el que per a executar, ergo
és una funció anònima o lambda.
I aquesta funció és totes aquestes línies aquí.
I ara, per ser honest, tot i que podrien no haver escrit mai JavaScript
abans, és només C i PHP lògica.
Així que si form.email.value == "" - així que si el camp de correu electrònica està en blanc,
cridar l'usuari "Ha proporcionar la seva adreça de correu electrònic ".
Perquè si form.password.value és el crit blanc a l'usuari,
"Ha de proporcionar la contrasenya."
>> Més interessant, lògicament, si no ho fa form.password.value
igual form.confirmation.value-- ¿D'on va venir la confirmació ve?
Permetin-me rebobinar.
Bé, vaig trucar a aquest missatge camp aquí la contrasenya.
I vaig trucar a aquest d'aquí confirmació.
Podria haver anomenat contrasenya dues o qualsevol altra cosa.
Estic lògicament comprovant que aquests dos són el mateix.
Else-- resulta que això és el Sr. Boole nou-- una l'casella de verificació valor booleà ,.
Així que si jo dic, exclamació point-- si no form.agreement.checked,
cridar en l'usuari també.
>> Així que aquesta sintaxi que veurà és molt comú en JavaScript,
on vostè té aquesta separada per punts.
Es comença amb un objecte aquí.
Vostè submergir més profundament a un a una propietat com a contrasenya.
I llavors vostè aconsegueix al seu valor real.
I de nou, aquí hi ha l'entrada.
Aquí està la clau nom.
I el seu valor és el que el humà ha teclejat en realitat.
>> Així, en tots aquests casos, jo vam tornar falsa.
Però si no, torno cert.
I el que ara veiem un ús convincent de quan
tornaries fals Deixi de fer el que fa l'usuari de
i fer que ell o ella triï de nou o escrigui de nou.
Altrament, tornem cert.
>> I permetin-me presentar un sol una altra variant d'aquest just
per sembrar una certa comprensió de la mateixa.
Bé, en la versió 2 de la present, la forma-2-- Ho faré amb un gest de la mà.
Això és, per als curiosos, la versió de jQuery,
aquells de vostès que vulguin incursionar en aquesta biblioteca particular.
Però anem a start-- i qualsevol pregunta?
Permetin-me aturar-me per moments a causa això va ser ràpid i molt.
>> Però el millor és que tot del codi és més o menys el mateix.
El nou material és el que és el Regne?
Quins són aquests rectangles?
Quins són aquests nodes?
Què és una funció anònima?
Què és un controlador d'esdeveniments?
Però, per sort, la majoria de què és només al punt de partida de, per exemple, la setmana zero.
Tot bé.
Així que alguna cosa una mica més interessant?
Bé, primer que res, deixa anar per davant i obrir Google Maps.
I t'adonaràs que perquè un moment, a la segona divisió,
adonar-se del que passa quan Faig clic prou ràpid.
I aquesta connexió a Harvard és tan ràpid que no t'adones que.
Però, quin tipus d'espècie de veure si faig clic i arrossego molt ràpid?
Aquells de vostès veient en línia, si vas més a poc a poc això a la velocitat de 0.5x,
es pot veure això millor.
>> Què estava passant just abans vaig fer clic i arrossegar?
Permetin-me tractar aquí-- m'ho dius a mi fer una altra cosa, com 90210.
Anem a anar molt lluny.
Això va ser molt ràpid, massa.
Què hi ha de Disney World?
Som-hi.
D'ACORD.
Què vas veure per a una fracció de segon?
Simplement, com, les places, oi?
Els marcadors de posició per les rajoles?
>> Bé, què està passant aquí?
Google Maps és un bon exemple de aquesta tecnologia que es diu AJAX.
I aquí és on començarem a utilitzar el codi JavaScript en un particular
manera seductora.
De tornada al dia, no hi havia Aquest lloc web anomenat MapQuest.
I jo hauria d'haver pres una captura de pantalla d'això des de la dècada de 1990,
on si volies buscar aquí al mapa,
vostè literalment, feu clic en una fletxa a la part superior que va mostrar
una plaça diferent del mapa.
Si volies moure cap a l'esquerra, es fet clic una fletxa que va mostrar
una plaça diferent del mapa.
I alguns llocs web segueixen fent això avui.
Però fins i tot MapQuest ha aconseguit millor, com Google Maps.
>> En canvi, el que és millor això dies és els llocs web que utilitzen AJAX.
AJAX-- conegut com Asynchronous JavaScript i XML,
que és només una forma elegant de dir una tecnologia o tècnica que
permet un cercador emprant JavaScript fer peticions HTTP addicionals
després de la pàgina s'ha carregat.
Llavors, què vol dir això?
Bé, seria una espècie molest a Gmail
si cada vegada que volies per comprovar el seu correu,
haguessis colpejat literalment Control-R o Comando-R o feu clic al botó Actualitza
i tota la pàgina maleït seria recarregar.
Oi?
Seria parpellejarà blanc probablement per segon.
Veureu que la barra de progrés estúpid.
I només per veure si vostè té nova electrònic, tota la pàgina web i la URL
vostè està en hauria de recarregar.
>> Però això no és el que passa a Gmail.
Oi?
Quan arribi un nou correu electrònic a Gmail, el que succeeix a la pantalla?
Això demostra, oi?
Només apareix per art de màgia com una nova fila a la taula.
Això implica en realitat una quantitat decent de complexitat.
De fet, si es pensa en aquest arbre, que tot i que és molt simple aquí,
Gmail-- i hauria de buscar en el codi per ser sure--
probablement té una taula HTML o potser una llista desordenada que fa
cadascun dels seus safates d'entrada missatges de correu electrònic com.
>> I pel que si vostè s'imagina això cal és un arbre en memòria quan estàs
usant Gmail que es veu la classe de tipus de així, quan es dóna compte de Google, ooh,
Té un nou correu electrònic, no ho fa volen reconstruir l'arbre sencer.
Més aviat, vol trobar el node l'arbre que representa la safata d'entrada
i només cal inserir un nou node.
>> Així que és molt similar al joc de paràmetres 05:00, on haver de inserir nodes en una taula hash,
de manera similar fa Google, a través de Codi JavaScript que s'ha escrit,
travessia aquest arbre, esbrinar on és aquesta part la safata d'entrada de la finestra,
i després inserir una nova fila.
I una nova fila només significa un sol o més nous nodes en un arbre.
>> I així AJAX és aquesta tècnica que permet exactament això.
Una vegada que ha visitat un URL, No obstant això boig el temps que és,
i una vegada que la pàgina té ha carregat, pot encara
agafar més dades del Internet-ja sigui
un correu electrònic o una rajola d'un map-- agafar entre bastidors
i després inserir-lo en la pàgina per la qual cosa l'ésser humà en realitat no
haver d'esperar per a això.
>> Facebook Messenger funciona de la mateixa manera.
Qualsevol nombre d'altres websites-- oh, en realitat, ni tan sols això.
Vull dir, això és, francament, una mena de un molest compten aquests dies.
Si em poso a buscar cats-- aquest és una espècie d'una experiència d'usuari horrible.
Només cal començar a buscar per mi.
Bé, què està fent?
La URL no ha canviat Des que vaig començar a escriure.
Però el que està passant a través de la wire-- bé, hmm interessant.
Què està passant a tot el filferro d'aquí només es posa més rar.
>> D'ACORD.
Així que permetin-me anar endavant i va inspeccionar element i aneu a la fitxa Xarxa
i tractar de fer d'aquest tècnica i menys sobre els gats.
Mentre escric, literalment, gats i- el que està passant
per-- No faré clic això.
Tot bé.
Així que aquí, el que passa cada vegada que escric un personatge, pel que es veu?
Igual que, baix nivell?
Què està passant amb cadascun dels personatges que estic escrivint en el meu teclat?
Sí?
AUDIÈNCIA: [inaudible].
>> DAVID Malan: Exactament.
Cada un d'aquests personatges és anar a Google, un a la vegada.
Estan construint una cadena en el seu servidor que representa
tot el que he escrit en fins al moment.
I cada vegada que escrigui un altre personatge, que
utilitzar la seva salsa secreta d'un buscar algoritme i esbrinar,
Què vol dir aquesta pàgina gat o aquesta pàgina gat o similar?
Així que, en cert sentit, em proporciona una millor experiència en què jo no faig fins i tot
haurà de completar el meu pensament.
I, en efecte, és un útil cosa, autocompletat en general.
Si els seus algoritmes són prou bons i si les meves cerques són bastant òbvies,
Jo no he d'escriure la paraula sencera.
Van a dir-me el que és que estic realment buscant.
Així que el que Google diu instantània recerca s'acaba usant AJAX,
utilitzant el codi que els permet sol·licitar contingut addicional a través d'un navegador web
darrere de les escenes que utilitzen aquest nou idioma, JavaScript.
Així que tenim un parell de minuts per al final.
I m'ho dius a mi trucar al meu amic Colton a l'escenari,
ja que semblava especialment divertit última vegada
per introduir una tecnologia que alguns de vostès
han expressat el seu interès pels projectes finals.
Pensem que seria divertit per portar un voluntari, però, avui dia
que li mostri una addició a això que usted-- permet si,
Vaig veure per primera vegada aquesta mà.
Anem cap amunt.
Molt ben fet.
Bon treball.
Vaig a projectar això en la pantalla en un moment.
Quin és el teu nom per a tothom?
>> EPT: Sóc Efa.
>> DAVID Malan: Etha?
>> EPT: Efa.
>> DAVID Malan: Efa?
>> EPT: Sí.
>> DAVID Malan: Encantat de veure't.
Tot bé.
A veure si aquesta llest.
Anem a la mitjà amb Colton aquí.
Què Colton té a les mans avui és un comandament a distància.
Així que en lloc de et quedis aquí parat en un món tridimensional mirant al seu voltant
com ho va fer Colton, ara pot Efa realment caminar pujant,
avall, esquerra i dreta com un Comandament de Nintendo o Xbox.
EPT: Vaig a caure fora de l'escenari.
DAVID Malan: ho faré romandre més o menys per aquí.
Però aquest és un risc.
D'ACORD.
Així que endavant i posar els de.
Déjame anar endavant i canviar a la pantalla aquí.
Déjame apagar els llums.
I Colton, em va deixar arribat estand del costat de vostè.
>> Vols explicar aquí amb el micròfon el que estem fent?
Aquí tens.
>> COLTON: És clar.
Així que ara mateix estem carregant el Oculus,
Suposo operating-- que no opera sistema, però el programa principal, on
es pot accedir a tots els jocs i aplicacions que es troben a la seva biblioteca.
Així que ara mateix, ha de dir toqueu el panell tàctil per començar.
Touchpad serà en el costat dret dels auriculars.
Així que endavant i tap--
EPT: Oh, home.
DAVID Malan: Sí, aquí el tens.
La qualitat Efa està veient és molt més alta qualitat.
Això és només el Wi-Fi aquí.
COLTON: Llavors, què estàs voldrà fer
és mirar cap a la part superior dreta de la pantalla.
Sí, aquest joc a la part superior dreta.
I després, quan vostè està seleccionant que, toqueu la pantalla tàctil de nou.
Crec que els seus Dreadhalls.
I llavors aquí està A-- aquí, i molt jo sostinc seves ulleres per a vostè.
>> Així que només li vaig donar un controlador.
Així que ara ell pot controlar el joc.
Ell pot moure i coses per l'estil.
Així que endavant i mirar cap amunt fins al cim.
Hauria veure New Game.
Així que endavant i vostè pot fer això.
Ara, vostè hauria de ser capaç de controlar a tu mateix amb el controlador,
així, tan aviat com sigui el joc es carrega aquí.
Això podria ser una mica de por.
>> EPT: Ara vostè em diu.
D'ACORD.
>> COLTON: D'acord.
Així que confirmi que pot moure.
D'ACORD.
Pots moure't.
Perfecte.
Així que si es mira cap avall, tens un mapa.
Mapa que mostra on es troba.
Vostè pot mirar al voltant de l'habitació.
Vostè pot donar volta totalment voltant.
Sí, exactament.
Gira't.
>> Així que mira a la seva esquerra.
Crec que hi ha alguna cosa que es pot recollir en un barril a l'habitació.
>> EPT: Com puc obtenir la mapa del camí?
COLTON: Miri cap amunt.
Només cal mirar cap amunt.
Tot bé.
Cal anar.
Ara seguir endavant i simplement donar la volta.
Així que mira més cap a l'esquerra.
Per estar en moviment a l'esquerra.
Segueix buscant esquerre.
Segueix endavant.
Sí.
>> EPT: Oh, d'aquesta manera.
>> COLTON: Sí.
Camina cap a ella amb el controlador.
Cal anar.
Ara ha de dir recollir-lo.
Cal anar.
Agafa'l.
Tot bé.
Ara, anem a sortir d'aquesta habitació.
Vagi per davant i caminar a la porta.
Així que vas a hold-- diu premeu el botó perquè la força oberta.
Així que endavant i manteniu premut el botó.
Sí, el que va obligar obrir.
Tot bé.
Bon treball.
Ara estem sortint de l'habitació.
Així que vaig a deixar la resta per a vostè i veure el que esbrini.
EPT: jo no vaig a la cambra fosca.
Oh espera.
Ara he d'anar pel passadís fosc?
OK, vaig a tornar [inaudible].
COLTON: D'acord.
Alguns més elements a recollir.
Sembla que algunes monedes.
Això és una rossinyol.
Així que si vostè troba un tancats porta, vostè pot utilitzar això.
Tens por?
>> EPT: Encara no.
COLTON: OK.
>> Pretend-- si.
Només fingir que ets en realitat allà de peu.
I si al seu torn around-- vostè ha de acostumar-se a ell.
Però té sentit.
DAVID Malan: I mentre Efa segueix jugar, ja que podíem fer això tot el dia,
tots podem puntetes aquí.
Però tenim altres dos parells, si t'agradaria venir i jugar.
En cas contrari, veurem dimecres que ve.
Gràcies a la nostra voluntària avui.
[Aplaudiments]
>> [MÚSICA - "Seinfeld TEMA"]
ALTAVEU 1: Bé, estic posar una nova PL muntar en.
Acabo de canviar el OLPF--
>> ALTAVEU 2: Llavors, què estàs fent exactament?
>> ALTAVEU 1: Bé, cada un these-- aquí, et vaig a mostrar aquest aquí.
Es pot veure aquí.
>> ALTAVEU 3: Crec que estic bé amb aquests.
Vols més?
>> ALTAVEU 4: No, estic bé. [Inaudible].
>> ALTAVEU 3: No, [inaudible].
Pren una mica.
ALTAVEU 1: Divers color.
ALTAVEU 2: OK.
ALTAVEU 1: Així que en última instància, el que fa és que ajusta el color de--