>> Molt bé.
Així, JavaScript.
Gairebé tothom en aquesta sala probablement té algun grau
de la comoditat amb que si Va ser allà quan en SC50
o que ha estat personal projectes web i fins i tot
si ho has fet una mica d'ella amb aquest últim projecte de la base de PHP,
però per a la major banda, molts de vostès,
encara que té una mica de consol
amb JavaScript potser no s'han pres
per fet com el funciona el llenguatge i el que passa
de sota el capó i el que intentarem
fer avui és pelar algunes de les capes tècniques
del que JavaScript està, com es diferencia d'un llenguatge
com PHP, com pot ser utilitzat no només del costat del client
però també del costat del servidor i a continuació, centrar molt específicament
en aquest marc, no notarà cap JS que és essencialment un temps d'execució,
un programa amb el qual pot executar codi JavaScript
costat del servidor i s'està convertint tipus cada vegada més popular
de la mateixa alçada d'aquest dia de probablement Ruby i PHP
i Python i veuràs
que té alguns bastant característiques de gran abast per mitjà d'alguns
de la llengua incorporada construccions.
Però en primer lloc, algunes de les fàcils coses només per recordar
de com funciona aquesta llengua i si vostè té problemes per veure qualsevol
d'això, només el crit i anem a ajustar.
Per tant, un com en PHP hi cap noció d'una funció principal,
que acaba de començar a escriure codi
i per a això es pot interpretar dalt a baix.
En el context d'un navegador
o al costat alguna cosa del servidor anem a veure alguns exemples
en una estona.
Condicions, sintàcticament equivalent a PHP i C,
C + + i altres llenguatges tan sols per donar-li un sentit
de com podríem estructurar,
només hi ha una canònica condicions.
Expressions booleanes, mateixa exacta sintàcticament com vostè ha vist
en aquests mateixos altres idiomes, tant per oring
i per acabar les coses junts.
JavaScript té interruptors, molt semblant a PHP i una altra de do
i no està limitat, com en C a primitives integrals
com caràcters i ints pot en realitat fer altres tipus de valors.
Loops. Per tant, això és exactament de la mateixa
i probablement una dotzena d'idiomes, bucles while, do while
i llavors aquest truc aquí.
Per tant, això és una mena de conegut com enumeració ràpida
i és una manera molt intel · ligent de la mateixa manera que en PHP fer
per a cada FU com a bar vostè pot de manera similar,
en un objecte de JavaScript, on object és el nom
de la variable aquí, per exemple, var i en l'objecte i en cada iteració
d'aquest bucle, i és serà un
de les claus d'aquest objecte.
Per tant, si vostè té un objecte per a un estudiant, i l'estudiant té un ID
i un nom i una casa, iterativa prendré
del valor d'identificador i el nom i casa i que pugui per això l'índex
en objecte com si fos una matriu usant claudàtors
notació per obtenir el valor del DNI o nom de clau
o casa i així successivament.
I al contrari de comú descomptat, objectes JavaScript
propietats no són necessàriament garanteix que sigui
en el mateix ordre, aquesta és també fidel a PHP el que no assumeix
que les coses es quedaran en el mateix ordre
que es posa als tecla parells de valors en un objecte.
Què hi ha de les matrius?
Hi ha un parell de maneres escriure sintàcticament
però això és probablement el més comú plaça ara només usant
notació de claudàtors.
Per tant, aquesta és una variable a trucar als números que contenen array
de sis sencers allà, aquí és una simple cadena
i observeu el que està absent a partir d'aquests exemples,
Què és JavaScript aparentment inexistent.
Sí Per tant, no hi ha cap noció d'escriure, després, no
en aquest context aquí, però això és de fet una cadena.
Així, JavaScript té tipus i que era de fet un conjunt
que és en si mateix un tipus i cadascun dels elements
en la matriu van ser de tipus nombre que JavaScript els crida.
Per tant, es tracta d'una vagament escrit llenguatge i ja veurem
JavaScript com PHP té un operador identitat
i altres mecanismes de realment comprovar quin és el tipus
d'alguna variable és tant per a la comprovació d'errors
i per a altres aplicacions.
I aquí hi ha un objecte de mostra conté només un ID i un nom.
I ara, notem que estem utilitzant notació de claudàtors arrissat,
la sagnia i el blanc l'espai és una espècie de sentit
i això declara una variable el nom és Rob
i el ID és 1 i el tipus de data és aquí el nostre nombre
i la cadena, respectivament.
I llavors aquest és alguna cosa lleugerament diferent
si alguna vegada has fet alguna cosa amb l'Ajax en aquests dies?
Vostè probablement utilitzat un objecte com aquest
però el que val la pena assenyalar aquí?
Què és sintàcticament mai tan diferent, tan sols un parell
de les coses entre aquest exemple que és sens dubte més petita
i aquest exemple més extens.
Així, per primera vegada en simples termini, què és això?
Quin és el tipus de personal li ho diràs?
Bé, és una matriu, és una sèrie de què?
>> Objectes.
>> Bé, és un conjunt d'objectes.
I ara, se centren en un sol - qualsevol d'aquests objectes,
el que és diferent entre això i això?
>> Les claus són cadenes.
Sí >>. Així, la claus són cadenes,
i les tecles són en realitat cadenes en ambdós casos
i això és una espècie d'idiota
al meu entendre, el disseny històric decisió quan vostè està utilitzant
JSON, JavaScript Object Notation,
que és essencialment un format de transport
per a l'enviament de les dades normalment a través de la xarxa
entre el client i el servidor, cal recordar
que això no és en realitat JSON vàlid i aquesta és una
d'aquests FYIs menys que mai colpejar el seu cap contra la paret
durant diversos minuts sense una bona raó, no és vàlida JSON
perquè les tecles són en realitat no cotitzat.
JSON requereix estúpidament que les claus no només ser citat,
sinó que cotitzaran doblement, cometes simples no són suficients.
Així, petita cosa estúpida i més d'un fet de la diversió
per als propòsits de l'actualitat, però aquesta també seria vàlid JavaScript
no es tracta només - el invers no és cert.
Està bé.
Per tant, anem a veure un munt més d'això.
Està bé.
Llavors, això és JavaScript sintàcticament probablement bastant
familiar, qualsevol de vostès que tenen mai utilitzat abans JavaScript
que no és un gran salt des de PHP o la majoria de qualsevol llenguatge de procediments
que podria haver usat.
Així, avui ens centrarem en els aspectes interessants
de JavaScript particularment en el context de no js
però no exclusivament perquè fins ara el que has,
si va utilitzar Javascript, utilitzat dins d'un navegador.
Per tant, no JS és un entorn a continuació, en una mica que està passant
que ens permetrà accedir El codi JavaScript de client -
costat del servidor, però en primer lloc, anem a fer una ullada
en alguna cosa que és un poc més del costat del client.
Per tant, m'he anat i això és lligat al lloc web de golf,
si vols jugar al llarg, hi ha dos subdirectoris
en Zip d'avui de l'anomenada perns presoners d'origen zip en el lloc web
i aquests són només un alguns exemples que recorden
de les coses que podria haver vist abans i en certa manera em elles construïdes
des de simples a lleugerament més complicat de presa de pèl
algunes de les característiques de JavaScript.
Per tant, seguirem endavant i prendre un cop d'ull per exemple a això.
Així que, per desgràcia l'etiqueta de parpelleig ser matat fa diversos anys
com la forma han aconseguit més bonica i més bonica
i l'etiqueta de parpelleig era literalment claudàtor obert parpelleja claudàtor de tancament
i quin tipus de no més temps amb nosaltres.
Però, encara podem ressuscitar aquesta idea d'una etiqueta per només una mica
de pensar-hi lògicament, com anar
tracta de fer alguna cosa com Aquest parpelleig intuïtivament?
Suposant que vostè sap una mica mica de JavaScript i CSS o
en aquest punt, és Està bé si no ho fas.
>> Establir un temps d'espera i amagar llavors després vaig Etiquétalo
i mostrar de nou.
>> Sí, perfecte.
Aquesta és una espècie de la programació 101,
Com aconseguir una efecte visual d'aquesta manera?
Bé, d'alguna manera ha de mostrar alguna cosa
i després amagar alguna cosa, espectacle alguna cosa, alguna cosa a amagar
com proposa Jonathan l'ús d'algun tipus de temps d'espera,
algun tipus de programa que vostè pot fer això en diverses ocasions sense necessitat de
per utilitzar un bucle o alguna cosa així.
Així que, deixa anar a blink-0.html
i m'ho dius a mi encojo el tipus de lletra una mica
de manera que més d'això encaixa.
I anem a fer una ullada al que està passant aquí.
Així que, primer de tot, adonar que el cos
d'aquesta pàgina és super senzill, a l'interior del cos
de la pàgina és només un div.
He donat arbitràriament un identificador de felicitació
i que podria ser qualsevol cosa en tant que és únic
i llavors només tinc una mica de text simple, hola món.
Així doncs, si ara em desplaço cap amunt, notar una mica d'estil suau i esponjosa.
Així, dic, agut salutació, que com vostès saben
en CSS només significa únicament identificar l'element
amb una idea de salutació,
mida de la font va arbitràriament ser això, els marges i l'alineació del text.
Per tant, sense interès detalls estètics
per centrar més o menys el text.
Per tant, la part interessant és a l'etiqueta de seqüència de comandaments d'aquí
que se m'acut per posar dins d' del cap de la pàgina.
Així, We'Ll - vostè pot fer això en qualsevol nombre de maneres
i veurem uns quants iteracions d'aquest mateix programa
però anem a començar des del principi.
Per tant, he declarat una funció anomenada parpelleig
i pel que sembla s'utilitza aquesta incorporada en el mètode DOM anomenada
GetElementById que és potser un dels mètodes més potents
que s'obté de la caixa amb JavaScript buscant
"Salutació" no té per què ser cometes com si fos
en HTML està bé està bé sempre i
com vostè és estilísticament consistent en aquests dies m'atreveixo a dir
moltes persones utilitzen Java, cometes simples en JavaScript,
cometes en HTML, però no importa realment
sempre que vostè és consistent.
Així doncs, aquí, si vostè no està familiaritzat, en realitat es pot accedir a
amb JavaScript CSS propietats en elements.
Així, noto que tinc declarat una variable anomenada div
i s'emmagatzema a l'interior d'aquesta variable,
una referència al que sigui aquest element DOM és.
Per tant, si vostè pensa de nou a CS50 o qualsevol classe en què pensaves
sobre les estructures d'arbre i DOM, Document Object Model,
això és només una referència a un node en un arbre,
que representa aquesta pàgina
i si div.style.visibility propietat és igual, igual, igual,
ocult, llavors només volen una palanca que
com Jonathan va proposar en cas contrari jo vull
per canviar-ho a ocult.
Ara, com en el costat, per què la triple és igual allà?
O què és això en comparació amb iguals dobles?
>> Equivalent estricte.
>> Ho sentim.
>> Equivalent estricte.
Així, són els operadors d'identitat
on per no estàs comprovant només el valor de la variable
com, sentit igual igual sinó també el tipus de la mateixa.
Així, tot i que no tenim especificats fins aquí totes les dades
tipus per a les variables en aquest o qualsevol dels tobogans,
hi ha un tipus associat amb aquesta cadena oculta
amb aquest valor, ocult i que és de cadena curs.
Així, en aquest cas, es en realitat no importa
perquè no hi ha manera que anem a combinar una cadena
de "ocult" amb algun altre valor
però això és sovint una bona hàbit que li diria a aconseguir
en l'ús de la igualtat, igual,
signe igual és en general una bona cosa.
Això farà que el seu codi més robust tant en PHP, però
i en JavaScript perquè vostè es quedarà
en ocasions casos de cantonada on el valor pot ser zero
que està comprovant i zero Es pot confondre amb fals
o podria ser que no i com en PHP,
Javascript també pot tenir múltiples valors falsament on per zero
i fals i null i undefined tots poden resoldre de forma implícita
false.
Però si vostè està realment amb ganes per comprovar si hi ha un valor particular
com zero, el número o fals booleà llavors vostè ha
utilitzar aquest operador identitat.
Així, podria succeir per aconseguir en tota manera tot i que aquí,
és una espècie de sentit perquè sabem que estem comprovant
per un valor de cadena i és no serà una altra cosa.
Així doncs, aquí està la màgia llavors, si jo desplaceu-vos cap avall per a aquesta línia aquí,
pel que sembla, construïda en l'objecte finestra
i aquesta és una característica de un navegador que pot accedir
a aquesta superpotència mundial objecte anomenat Finestra,
dins que és part de la funcionalitat,
si peça de la qual s'estableix l'interval
i que es necessita aparentment Quin tipus d'arguments?
Sí
>> Crida funció i un temps.
>> Bé. Així, una funció trucar i un temps
i de manera particularment 01:00 referència a una funció,
un punter a una funció en sentit
i aquesta és la funció això va
per ser executat cada número de milisegons i en aquest cas,
és cada 500 mil · lisegons.
Per tant, és una forma d'induir efectiva i bucle infinit
sense utilitzar iteració però lloc dient JavaScript
al motor a l'interior del navegador
de fer això cada 500 milisegons o està a prop
a 500 mil · lisegons com es pot,
resulta que sota de la capella,
hi ha el que s'anomena un esdeveniment bucle i anem a tornar a aquest
en el context de node de JS que acaba constantment classe
d'aquí assegut, spinning, a l'espera de feina per fer
i tan aviat com es donen compte,
Han passat 500 mil · lisegons blink es dirà de nou
i una vegada i una altra és juntament amb qualsevol altre treball
que cal fer.
Així que, què podem millorar en aquesta llista?
Bé, deixa obrir fins blink-1.html
i demostrar un tres i no-1.html
com estèticament perfectament idèntics.
Llavors, què podríem millorar aquí?
Bé, notarà que era una espècie d'inútil
per definir una funció anomenada Blink perquè quants
en quants llocs oi trucar al obrir i tancar la funció?
>> Només una vegada.
>> Per tant, un.
Per tant, no estava malament, en fet, és probablement bastant
senzill.
He definit un obrir i tancar la funció, em trucar a un obrir i tancar la funció per mitjà
d'aquest paràmetre, però tècnicament,
no hi havia raó perquè i un paradigma comú
en JavaScript és realitat fer ús de les funcions lambda
com vostè pot recordar de 51 o funcions anònimes
on si no és necessari un nom per a una funció,
si només estàs trucant sens dubte en un lloc,
Per què molestar destorbar el seu codi, que saturen la ment programadors
i el seu espai de nom realment amb símbols
que en realitat no hagi de preocupar-se.
I així, en aquesta versió aquí,
Noto que estic trucant window.setInterval directament
a la part superior de la meva etiqueta script llavors jo estic passant
en una funció sense nom que no pren cap argument
i això és perfectament fi i llavors el cos
d'aquesta funció que apareix és idèntica al que era abans
i l'única sintàctica diferència ara és
aquí al costat de la 500.
Vaig a tancar el cos de la funció
i llavors jo dic executar aquest codi anterior,
cada 500 mil · lisegons.
Canvi tant, molt marginal
però un pas cap al que és probablement a un més elegant
aplicació de la present.
Per tant, anem a prendre aquest intensificar encara més si ara vaig
en un obrir i tancar dos, vostè veure una biblioteca comuna,
l'efecte dels quals es va
per ser completament insignificant estèticament però si anem
en la versió 2 aquí, avís que a la part superior del meu cap,
He inclòs el última versió de JQuery.
I llavors, aquí baix, Acabo de netejar
el codi una mica, és no serà un món de diversió
seguir utilitzant funcions DOM nadius
i una mena de prima de JavaScript.
De fet, JQuery com puguis saber s'ha convertit en tan popular
que la majoria de la gent simplement conflicte amb jQuery JavaScript
però en realitat només un sopar biblioteca d'utilitat escrita
un tipus anomenat John Resignació i des d'altres
que tenen només fa un moltes coses tedioses
en JavaScript més fàcil i més succint.
Així, en aquest cas aquí el que està passant?
Així doncs, tinc aquesta aparença d' un signe de dòlar, més sobre això
en un moment, i després aquest és un selector CSS.
Així, és molt similar en esperit del que vaig fer abans,
però aquesta vegada, estic literalment, utilitzant el hashtag
per indicar un únic identificador de trucada de felicitació
i després aparentment . Css és un mètode integrat
a qualsevol objecte és que m'acabo de crear
i estic comprovant el valor de la tecla de visibilitat.
I si el valor d'aquesta clau iguals, iguals, iguals, amagat,
llavors vaig a canviar i Vaig a canviar aquesta vegada
utilitzant el mateix mètode que aparentment està sobrecarregat
en el sentit que té dues firmes diferents,
un amb un argument i un amb dos arguments,
el segon dels quals és el pioner,
el primer dels quals és un captador per dir-ho.
I si curiosa i si ho En realitat mai es va veure en això,
si anem a jquery.css espere colpejar la part superior és de fet aquest
i es pot veure una major explicació formal
que ens limitem a usar això, . Css amb nom de propietat
i després l'organisme utilitza CSS dot
amb un nom de propietat i un valor.
Així, marginalment més neta, però compte el tipus de patró aquí
amb cada iteració d'aquest codi,
estem espècie del que és més i més fort i més fort
i no diuen millors dissenys
ja que estem utilitzant algú codi d'una altra persona que ha eliminat
part de la complexitat.
Així que, ara farem aquest encara més simple.
I de fet, si em trec tota la cotitzacions que vostè veurà tot just tot el
comentes veuràs com senzill que això ha arribat.
L'única diferència aquí, per descomptat, és
que estic fent servir una palanca mètode que també ve incorporat
per jQuery i això és només
perquè una altra persona escriure el codi
que en realitat alterna l'ajust de visibilitat
de qualsevol element DOM que l'envia.
Per tant, cada vegada millor.
I així, aquest és un patró,
tot i que això és un sopar exemple senzill i classificar
l'efecte net estúpid que és una peça de parpelleig de text,
és aquesta classe de pensament procés que cal pensar -
estar pensant en no necessàriament el primer
escriptura passiva alguna cosa per al proper projecte
però si com iterar amb el seu assessor o amb mi
i les seves reunions d'equip o vostè simplement revisar el seu codi de companys d'equip
sobre estrenyi coses, oi?
Després de tot, és menys -
unes poques línies de codi que en última instància té
en teoria, com menys et molesta és probable que es convida
perquè no són simplement menys codi que ficar-se amb.
Està bé.
Per tant, un parell de robatoris de pilota.
Funcions lambda, funcions anònimes,
molts dels quals han vist abans
i després també acaba de prémer les coses amb una biblioteca
com jQuery en aquest cas particular.
Està bé.
Alguna pregunta?
Anem a fer un altre client aspecte lateral aquí,
en forma de zero tenim aquest efecte net.
Forma de Super simple i aparentment si intento fer clic registra't aquí
Inicialment em diu vostè és registrat, bé, no realment.
Bé, per què és això?
Bé, aquí està la formació 0.html molt poc codi,
No JavaScript en absolut i és completament una espècie falsa
de manera perquè l'acció valor és registered.html
el que significa que no importa el que Escric en aquesta forma,
on es va a ser enviats al servidor?
Sí Així que, per registered.html que és clarament un arxiu HTML
que és, per tant estàtica arxiu que no té mitjans
de prendre la entrada de l'usuari assumint no hi ha codi JavaScript
incrustat en ell això és mirant en l'adreça URL
així que això és totalment un NOOP i que no passarà
amb les dades presentades, però es pot veure l'estructura
d'una manera bastant simple HTML5
que té uns pocs contrasenya, uns pocs tipus d'entrada.
Així que, anem a realment ara afegir una mica de comprovació d'errors
i veure com podríem millorar això.
Així doncs, aquí és una espècie d'un pobre el camí de l'home de l'aplicació d'aquesta
i és una mena de tros repugnant de codi.
Així, en primer lloc anem a desplaçament fins a la part inferior
per veure el que és el mateix i el que és diferent.
L'única cosa diferent ara entre aquest
i la versió anterior és que jo he donat la forma i la identificació
de "registre" podria haver estat qualsevol cosa que vull
però que serà única identificable fins i tot això no és
estrictament necessari perquè si un pàgina només té una forma segurament
podria trobar amb una de mètodes selectors de jQuery.
Però d'aquesta manera només fa és més determinista.
Així que, si em vaig ara al meu guió etiqueta, observi el següent,
iguals window.onload una funció anònima.
Llavors, què està fent això?
Així, cal recordar que, en la programació del costat del client -
De JavaScript en lloc de pàgines HTML s'han associat diversos esdeveniments
amb elements, prement i la presentació i l'enfocament
i la distorsió i altres tals esdeveniments que podrien ocórrer
com un usuari normalment interactua amb la pàgina,
window.onload fa el que diu.
Per les finestres de tota la càrrega
així que una vegada que totes les imatges han estat descarregat una vegada que tots els arxius
estat descarregada i un cop la pàgina s'ha carregat,
fer el següent codi, i compte si em canvi a la part inferior
d'aquest mètode, observi que no hi ha parèntesis
després de la clau que és dir
que no estic executant aquesta funció fins ara aquí,
el navegador va a executar que per a mi quan s'ha determinat
que la pàgina s'hagi carregat.
Per tant, anem a veure el que hem fet,
document.getElementById registre
de manera que només em dóna una referència al node
en l'arbre que és de compte un identificador de registre.
I ara, me'n vaig a registrar un altre controlador d'esdeveniments
fent form.onsubmit obté aquesta funció anònima
el que significa que la següent codi s'ha d'executar sempre que
aquesta forma es presenta.
Ara, la major part d'això és només espècie de avorrit lògica.
Així, si el valor de la camp de correu electrònic en el formulari és
"Res", llavors vostè ha proporcionar la seva adreça de correu electrònic,
crides a l'usuari una alertar i després tornar false.
I després tinc una munt d'altres controls,
els controls de la contrasenya,
els comprova si el contrasenyes són les mateixes,
els controls si l'acord casella està marcada o no
i jo simplement li crit a l'usuari si qualsevol
d'aquestes proves en realitat un error.
I així, aquí és un exemple encara encara que és una mica artificiosa
aquí el fet que estic fent servir iguals, iguals, iguals,
significa que l'usuari no es pot tractar d'enganyar
escrivint el de valor.
O, més aviat estic veritablement la comprovació de la presència
de la cadena buida, l'usuari no ha posat res encara.
Si l'usuari va escriure en, literalment, zero,
"Zero" potencialment podria haver confondre amb la cadena buida.
I dic que és una espècie de sentit aquí
perquè, òbviament, fins i tot zero No és una adreça de correu electrònic.
Però si això era una més camp genèric com un camp de text
o un nom o una descripció o cosa que valorar per
i no és necessàriament sintàcticament tenir
en ser una adreça de correu electrònic, l'usuari podria escriure una mena zero
i de nou cas de cantonada, però això és per això solen comprovar els tipus es
una cosa útil.
Vostè està realment la comprovació de que l'usuari hagi escrit res
en aquest camp.
Llavors, què passa si cap d'aquestes proves fallen, bé,
retornant true interior d'un controlador d'esdeveniments
com onsubmit només significa let el comportament original en realitat
propagar i, per tant, la forma aconseguirà presentat.
I és per això que quan finalment fa clic a Envia abans d'arribar
mitjançant register.html i si ho faig ara, avís,
Em cridar en si no ho faig proporcionar una adreça de correu electrònic
i puc escriure malan@harvard.edu,
carmesí [fonètic], carmesí, marcant la casella,
i ara registrar i em diu, de nou,
està registrat o no realment.
Està bé.
Així que, anem a netejar això només mica i després la transició
a la nova més recent coses del costat del servidor.
Així que, si em vaig a la formació 2.html, notar un parell de coses.
Així que, un, vestit jQuery nou en la barreja
pel que de nou és aquest signe de dòlar
i ara estic fent servir alguns mètodes de jQuery.
Així, en primer lloc, què és el que té el signe de dòlar que és
tan especial aquí?
Quin és el signe del dòlar lligat en la major part de qualsevol codi de jQuery?
Sí
[Inaudible Observació]
D'acord. Per tant, la funció de signe de dòlar passa pel DOM buscant
per a alguna cosa amb aquest particular, selector CSS.
Així, cert, però gairebé massa precisa.
Això és el que passa quan es passa d'una cadena
com en aquest cas, però no ho fa sempre ha de passar una sèrie.
De fet, el cas en qüestió, la mateixa primera línia aquí és que no és un
Selector CSS, estic passant en una funció lambda.
Així que, en general - de manera que, bona resposta, però massa precís.
En termes més generals, quin és signe de dòlar representa?
>> Només jQuery.
Sí >>. Així doncs, tot just jQuery o és només una funció
que fa alguns anys guy escriure i altres persones tenen
enriquit després que, literalment, per defecte es diu -
oops, es diu jQuery.
Simplement - resulta a diferència de molts
de signe idiomes dòlar és una símbol perfectament vàlid utilitzar
en el nom d'una variable, mentre que
en signe de dòlar PHP òbviament, té un significat especial
però en JavaScript com a algunes llengües, mostra de dòlar
i el guió baix i l'altre tal caràcters especials totalment de fiar
per utilitzar en el seu propi símbol noms de variables.
Així, algú acaba de decidir que, saps què?
Serà bastant tediós
perquè tot el món escrigui jQuery tot el temps,
m'ho dius a mi espècie de planta 1 estaca a terra i dir:
"Aquesta biblioteca es utilitzar el signe de dòlar ".
I de fet, aquesta no augmentar el risc
que algú més presumptuosament es va a utilitzar el signe de dòlar
per la seva biblioteca, però hi ha maneres d'espècie d'assegurar
que quan s'utilitza el dòlar signar assigna a jQuery
perquè es pot provar si que ja s'ha assignat
a una altra cosa essencialment.
Està bé.
Llavors, això és tot el que És a dir, no hi ha màgia.
És només un sexy busca tros de sintaxi que és agradable
i ràpida i fàcil d'escriure.
Llavors, què passa quan es escriviu la mostra de dòlar parin obertes
i tot seguit, una funció anònima.
Bé, resulta que aquest és notació realment taquigrafia
per al document de punts parin oberta llista.
Així que, com Cynthia va notar anteriorment ja hem trobat una
cas cantonada.
Si vostè acaba de passar a la funció lambda,
l'efecte del dòlar mostra és una mica diferent.
De fet, el que realment està succeint és que és equivalent a aquest,
passant una referència a l'objecte de document mundial
això és mundial com l'objecte de la finestra és
que li fa una mica de funcionalitat especial
que afecta tota la pàgina o el navegador i resulta
que en el document quan vostè ho envolta amb jQuery,
jQuery essencialment s'adona, oh, això és una referència
a aquest objecte document especial,
permetin-me registrar un controlador d'esdeveniments crida a punt
que no és nativa JavaScript o DOM relacionats.
Ready és un jQuery El que diu
quan la pàgina s'ha carregat tots els elements HTML
però no necessàriament carregat, la totalitat de la CSS i les imatges
i arxius de JavaScript i arxius flash i els gustos.
Per tant, és un pas abans de de la càrrega i després seguir endavant
i executar el següent.
I el costat positiu de la utilització de llistes mitjans és que es pot, ja saps,
que tots els elements en el seu DOM,
sobretot de la identificació única coses amb ID, existeixen encara
si la pàgina, el seu contingut s'estan carregant i càrrega
i vostè té algun icones trencats per un moment
o una pàgina en blanc en el fons.
Sí
>> Què passaria si [inaudible]?
>> Exemple perfecte, una pregunta perfecta.
Per tant, anem a veure si podem simular això ara mateix.
Així doncs, permetin-me continuar i eliminar aquestes dues línies aquí i després
sense molestar-se a arreglar la sagnia, deixa anar per davant
i eliminar aquesta aquí - oops, això d'aquí baix.
I ara, que em deixis passar a la pàgina, aneu a la formació 2.html i tipus
Registrar, res semblava succeir, diguem, per què va ser que,
seguirem endavant i obrir fins inspector de Chrome,
obrir la consola només per veure si passa alguna cosa aquí, ara,
inscriure, encara res.
Així, el codi és sintàcticament multa
així que no estic veient cap missatges d'error de color vermell,
però el que clarament No està passant?
Cap del meu codi és correcte, no funciona de manera que cap
dels meus codis sembla executant, així que per què és això?
Bé, JavaScript i navegadors més en general executar el
contingut d'una pàgina web, la part superior a baix, d'esquerra a dreta.
I el problema és que pel fet que la part superior
d'aquesta pàgina ha HTML després el cap a continuació, l'escriptura i després un altre guió,
això va a quedar executada abans el que és encara llestos,
o fins i tot existeix en l'arbre la representació de la pàgina.
El formulari en si mateix, ni tan sols el existeix cos en aquest moment.
Així, jQuery és prou intel · ligent amb ell és la comprovació d'errors
que si no hi ha cap element amb l'identificador únic del registre,
que no rescatar els de vostè
i acaba de desencadenar alguna consola error i trencar tota la pàgina,
que passarà per alt en silenci vostè, però la raó que cap
d'aquest codi s'executa cada vegada
perquè quan vostè té registrades d'aquest present guia,
no existia cap element per associar.
Així que és una espècie de no op allà.
Així, especificant lloc, espereu fins que l'edat s'ha carregat
si ho féssim el window.onload El que és una espècie
de la vella manera de fer escola o la forma en jQuery sexy
d'aquesta manera, podem dir-li que esperi fins que tots
d'aquestes etiquetes HTML tenen estat analitzada de manera que fins i tot
Si les imatges no han carregat, en menys que el node està en l'arbre,
llavors JQuery pot assegurar que tot està allà.
Sí
[Inaudible Observació]
Sí, bé, sí, absolutament.
Així, l'altra solució a això, si vostè no ha utilitzat aquest
o no recordava que aquesta existia,
es podia moure en absolut tot això a la part inferior
de la pàgina web, a l'interior del cos encara però per sota de la forma
i que seria també resoldre aquest problema.
És només típicament considerada una mala pràctica.
És una mica desordenat i descuidat especialment
si segueixes jamming tot a la part inferior de la pàgina,
sobretot quan em quedo coses senzilles, posant tot
del meu codi a l'interior de la pàgina HTML
quan, per descomptat, vostè pot sens dubte entrar en l'hàbit
de factoring a terme en un arxiu separat
moment en el qual és simplement agradable
centralitzar la arxius al cap.
Excepte que hi ha un preu que vostè paga
posant JavaScript altres actius, com arxius CSS
a la capçalera de la pàgina, Quin és el risc que s'executa?
>> Més lenta càrrega de les pàgines.
>> Més lenta càrrega de la pàgina, per què?
>> Com que estem tractant per carregar totes les biblioteques
abans de [inaudible].
>> Exactament perquè els navegadors llegiu la part superior de codi a baix,
esquerra a dreta si Google analytics són lents
o el jQuery CDN és lent o l'API de Facebook és lent
i que l'arxiu simplement es penja potencialment depenent
sobre la forma que ha carregat l'arxiu, la pàgina sencera podria semblar que es bloqueja.
I si vostè veu això molta franquesa
en els llocs web que tenen molt anuncis de baixa qualitat
en ells, som només una lenta o lloc web enderrocat podria penjar una pàgina
per alguna indefinida nombre de segons
fins que finalment el navegador esperem que el temps d'espera en la qual
i després et mostra la resta de la pàgina.
Així que, si alguna vegada ha utilitzat com Facebook, com el botó,
a la seva pàgina web, deixa a veure si puc trobar aquest
sense haver d'iniciar sessió aquí.
Així doncs, si vostè va a la Botó com el de Facebook
i feu clic en un codi get, maleïda sigui,
anem a veure si podem trobar l'exemple,
segurament algú havia publicat això.
[Pausa]
Vaig a renunciar a uns pocs segon, si no veiem això.
Facebook asynch - OK.
Per tant, aquest és el codi i, llevat que han canviat recentment
que Facebook en realitat recomana que utilitzi
per carregar la seva biblioteca i en realitat proposar
que es posa això en el cos de la pàgina.
Així, Facebook li aconsella crear una espècie d'estúpid DIV
que acaba d'ID únic com això, llavors té una etiqueta de script
i tota aquesta complexitat essencialment fa la següent
i ells no utilitzen cap JQuery perquè no volen
a assumir qualsevol altra dependències,
m'ho dius a mi passar aquesta sobre una mica.
Així, explica que estan funció anònima aquí,
més sobre això en un moment,
després utilitzen document.createElement,
que estan creant un element de DOM, això és com malloc per dir-ho
on l'etiqueta és de tipus guió, està a continuació, especificant
que l'atribut async d'aquesta etiqueta que està passant
per ser veritat, llavors seguir endavant i esbrinar quina és la URL
de Facebook JavaScript ha de ser
i això és només la manera de luxe
de verificació hauran sigui HGP o HDPS.
I, finalment, es observi el que fa Facebook,
aconsegueixen el node DOM que té un ID d'arrel Facebook
que és el que van dir vostè posi a la pàgina
i després s'annexen al nen pel que l'efecte de tot això és
al tipus d'injectar dinàmicament una nova etiqueta de script a la seva pàgina
com a fill de la DIV que vostè inserit allà perquè la resta
de la pàgina es carrega feliçment
i llavors aquest codi en realitat que es carrega de forma asíncrona.
Així, essencialment després de la fet i jo diferit menció
de la funció anònima,
Què és això covard sintaxi referint-se a aquí
quan tingui no només la funció obrir parin, parin prop
i després entre claus, per què els parin obertes aquí
i després el tancament obert, prop Parin aquí, el que cal fer?
>> [Inaudible] definint i després l'execució de?
>> Exactament, és la definició d'un funció que sigui anònima,
sinó que es limita la definició d'una funció,
per descomptat, no s'executa una funció fins que es digui
pel seu nom, però és clar això és una funció anònima
pel que no es pot anomenar pel seu nom, però es pot
en JavaScript executar una funció anònima només
encapsulant tot l'assumpte entre parèntesis com ho hem fet
amb aquest Parin i aquest Parin aquí i després una fixació
al final de la funció parin parin obrir, tancar,
si vostè no desitja passar cap argument.
Però això sembla una mica estúpid,
com per què aquest addicional complexitat sintàctica
que la majoria de la gent no semblen reconèixer, quin és el valor
d'embolicar els tres línies de codi
en una funció anònima d'aquesta manera.
Sí
>> Per evitar sobreescriure 01:00 valuós en la [inaudible].
>> Exactament, per evitar sobreescriure una variable
a la pàgina existent, no?
Facebook és una mica presumptuosament decidit,
que facin servir el variable d'E, és molt probable
que vostè o qualsevol persona que utilitzi Facebook com el botó
o qualsevol altre plug socials
en compte una variable en algun lloc anomenat E. Així,
encapsulant totes del seu codi dins
d'aquesta funció en l'anonimat, que essencialment tenen el seu propi àmbit
que no s'arrisca clobbering les variables existents.
Per tant, això també és en realitat un paradigma molt comú,
especialment quan s'escriu un codi de la biblioteca
o quan vostè mateix no ho fa volen el desordre del seu espai de noms
amb altres variables que vol que el valor de viure
i moren una vegada que surti aquest bloc de codi,
aquesta és una bona tècnica en JavaScript.
Està bé.
Així, després de tornada a aquest exemple aquí, tot el que hem fet al final
amb aquest exemple és simplement netejat el codi.
Per tant, encara té en el seu conjunt munt d'interruptors, un manat sencer
de les condicions aquí, però notar una mica de sintaxi,
aquest té accés al node DOM amb el registre únic d'identificació,
els mitjans espacials semblen ara per un descendent d'aquest node,
trobar si és de tipus d'entrada i després fins i tot
si vostè no ha vist aquest abans, vostè pot ser que sàpiga
que això només significa trobar amb l'etiqueta d'entrada,
els elements d'entrada que té un atribut de nom amb un valor
de correu electrònic i, a continuació, deixar que em sacsejo la meva mà en algun
de la resta no és tot el que estimulant
però en realitat només la sintaxi de jQuery per a les mateixes operacions.
Està bé.
Però el que no és tan important aquí és la matèria costat del navegador
sinó més aviat el fet que tenien formes més netes i menys contaminants
realment de fer que el treball de codi.
Està bé.
Alguna pregunta?
[Inaudible Observació]
D'acord. Ara la part divertida.
Així, Node.js Per què?
A qui li importa?
Què saps d'ell avui?
Node.js, per què?
Henry [ortografia suposa].
[Inaudible Observació]
Restabliment de la bateria?
El que - això és un perfecta suspensió del penya-segat
per a la segona meitat d'avui.
Per què no anem i prenem un descans de 5 minuts aquí,
hi ha una mitjana de caramel màquina allà si ho faria
com un caramel sense posant un quart polz