>> [Speel van musiek]
>> David Malan: Dit is CS50.
Dit is die begin van die week nege.
En dit is wat wil hê was mnr Boole se 200 verjaarsdag.
So dit is die metgeselle aan wie ons verwys
geruime tyd oor die gebruik van Boolese veranderlikes ware en valse,
1 en 0 en so.
En dit was Google huldeblyk aan hom vandag.
Hy sou draai 200.
So as jy wil saam met ons vir CS50 middagete,
'n blik op die skakel op die webwerf die kursus se.
En sodanige gesigte en vriende as hierdie wag jy hier in Cambridge.
Gesigte soos dié wag jy in New Haven.
En, in werklikheid, Ken in New Haven vriendelik gemaak
wat genoem 'n geanimeerde GIF van Eli hier by 'n onlangse lunch-- n GIF nog
'n ander grafiese lêer formaat, waarmee jy familiar-- dat
lyk 'n bietjie iets soos hierdie.
Dus net 'n reeks of-- OK.
Niemand hier in Cambridge lag.
Maar in New Haven, hierdie is regtig snaaks, reg?
Alles reg.
>> So nie daar by ons aansluit.
Hier by Harvard, spesifiek, hierdie Woensdag
as jy 'n stage of eerstejaars even-- of selfs junior-- denke van die maak van
'n skakelaar in rekenaar wetenskap, weet dat daar sal
word 'n CS adviseer billike hierdie Woensdag, kort ná die klas
by 04:00 in die rekenaar wetenskap gebou Maxwell Dworkin.
Ons sal dit op die loop se sit webwerf môre, as well.
Donuts, ek vertel, sal bedien word.
>> Alles reg.
So snaaks story-- ek skeer rondom op die internet,
en ek het 'n paar ou argiewe van my voormalige webwerf.
En dit blyk out-- om hierdie tyd, dit lyk baie tydige
want ek verstaan ​​dat die UC verkiesings is oor rat weer.
So ek het vir UC, verloor klaaglik.
En miskien was dit in 'n deel hoekom.
So dit was my webwerf op die oomblik.
Vir een of ander rede, het ek gedink dit was 'n goeie idee, voordat die mense te vertel
wat my platform was en waarom hulle moet stem vir my, dat hulle
kliek om te betree om uit te vind wat inligting, wat in retrospek is
soort creepy.
Ek weet nie regtig wat dit was.
>> Maar dit het beslis nie help my veldtog.
Ek het ook gevind dat deur die senior year-- Ek het hierdie Muppet kalender.
Muppets was soort van in die mode terug daarna.
Of miskien was hulle nie.
Ek het 'n Muppet kalender terug daarna.
En ek het gedink dit sou cool wees om naam my rekenaar op die netwerk Harvard se
frogman.student.harvard.edu.
Op die oomblik, ons almal uniek gehad identifiseerbare gasheer name.
En jy kan 'n paar nietigheid kies noem in plaas van jou eie naam.
En ek het met duiker vir een of ander rede.
>> En dan started-- ek ek spandeer baie van die tyd te kliek deur middel van hierdie skakels
vanoggend.
En dit was my oor bladsy wat nou soort van lyk adorable.
Maar dit getuig ook net hoe ver tegnologie het gekom.
Ek bedoel, terug in die dag, 'n 486 was iets.
Hierdie dae, dit is super, super, super stadig en goed minder
as jy dalk in jou eie sakke hierdie dae.
Daar is meer op wat daar was selfs meer verleentheid.
So ek sal dit laat.
Maar dit was my eerste inval in web-- O, nee.
Dit was nie.
My eerste werklike inval in web ontwikkeling was hierdie webtuiste, wat ek net vergeet.
Op 'n sekere punt, het ek geleer hoe om maak herhalende agtergrond beelde.
En so het ek gevind dat hierdie teël effektiewe, soos rugby speler, sokker, gholf en
bal, of wat ook al dit is vir die Frosh kitsboodskappe webwerf.
En dit was eintlik, werklik die eerste web-gebaseerde projek wat ek het on--
Ek dink miskien stage jaar, junior year--
nadat CS50 en CS51, een van die gemeenskaplike opvolg klasse.
Ek het opgemerk in soek deur die argiewe
dat een van my opvolgers en vriende, Lee, soort verander
die kopiereg homself.
Maar dit was inderdaad iets wat Ek moet die verleentheid te besit.
Maar op die oomblik, hierdie was die eerste webwerf,
soos ek gesê het 'n paar weke gelede, waardeur groentjie kon
registreer vir binnemuurse sport hier.
En so dit blyk dié agtergrond beelde
soos dit is nie so 'n goeie idee.
Maar die web was nuut, en ons is almal eksperimenteer.
En dit is wat ek blykbaar het in die tyd.
Alles reg.
So sonder verdere uitstel het, skakel ons ratte vandag om jou te gee, regtig,
die finale stuk wat jy kan vind veral nuttig vir finale projekte
maar ook wat sal begin om maak die hele wêreld wye web
voel 'n bietjie meer verstaanbaar.
Inderdaad, ons gaan stel een programmeertaal
genoem JavaScript wat soortgelyk en verskillende maniere in verskillende
van tale wat ons het gekyk na wat tot dusver.
>> So C, onthou, is dit saamgestel taal.
Jy het om dit te doen deur middel van 'n samesteller.
Jy kry bronkode om beswaar kode, of nulle en ene.
En dit is dié wat nulle en jou CPU, Central Processing Unit,
eintlik verstaan.
PHP, daarenteen, is nie 'n saamgestel taal.
Dit is 'n wat?
Dit is 'n geïnterpreteer taal.
So is daar 'n program genoem 'n tolk wat
moet it-- top lees onder, links na right--
en uit te vind wat al jou sintaksis doen en beteken,
of dit 'n lus of 'n voorwaarde of enige ander getal programmering
bou.
So dit is 'n geïnterpreteer taal.
>> Toe lei ons HTML.
En HTML is nie eens 'n programmeertaal.
Ons sal dit wat noem?
A opmaak taal, wat net 'n soort van fancy manier om te sê dit
nie programmering konstrukte soos het Ons het selfs terug in die dag van nuuts af.
Daar is geen loops.
Daar is geen voorwaardes.
Dit is regtig 'n taal oor die nasien van jou data
en om dit te formateer of strukturering dit in een of ander manier.
>> CSS, intussen, insgelyks nie 'n programmeertaal.
Dit is selfs meer esteties georiënteerd.
En dit laat jou soort verfyn dinge soos die grootte en kleure font
en plasing en al van dat.
Dan het ons
>> SQL.
So SQL is inderdaad 'n programmering taal in 'n sekere sin,
hoewel maat spesifiek tot databasisse.
Maar selfs al het ons jy net bekend te stel aan kies en voeg en te verwyder en werk
en 'n paar van die ander, blyk jy kan eintlik
skryf funksies of prosedures, soos hulle is
genoem, in SQL wat lyk en optree hou PHP en C funksies.
So weet dat diegene bestaan ​​nie.
Maar ons het nie eens die moeite met hulle soos ons krap net die oppervlak hier.
En dan JavaScript, die laaste van ons tale formeel bekendgestel.
So JavaScript, te, is 'n geïnterpreteer taal.
En diegene wat vertroud is, doen jy wil om dit te onderskei
met 'n paar kenmerkende van beide C en PHP?
Wat maak dit anders?
>> GEHOOR: Dit is nie saamgestel.
>> David Malan: Weer sê?
>> GEHOOR: Dit is nie saamgestel.
>> David Malan: Dit is nie saamgestel.
So is dit ook vertolk word.
So dit is nie saamgestel.
Maar wat maak dit 'n bietjie soos PHP.
Maar dit is nog steeds verskil van PHP in sommige treffende manier,
ten minste in die manier sal ons dit gebruik.
Ja?
>> GEHOOR: Dit loop kliënt-kant.
>> David Malan: Dit loop kliënt-kant, gewoonlik.
Dit is inderdaad die onderskeidende kenmerkend is vir ons nou.
C was bediener-kant in die sin dat ons alles in CS50 IDE.
PHP tot dusver was bediener-kant sover
soos dit ook kry interpreted-- nie saamgestel nie, maar interpreted--
binnekant CS50 IDE, wat van die kursus is net 'n bediener of bedieners in die wolk.
>> Maar JavaScript, selfs al is jy jy gaan
om te begin skryf dit, sê, pset agt en miskien finale projects-- jy
gaan om dit reg in CS50 IDE en stoor dit
in lêers binne CS50 IDE, CS50 IDE en op sy beurt, het die wolk bedieners
waarop dit aangebied, gaan nie interpreteer of voer jou kode.
Inteendeel, dit gaan in gestuur word Onveranderde af na die leser.
En dit is dan gaan IE wees of Chrome of Firefox of Safari
of wat ook al wat eintlik interpreteer dit, bo na onder, links na regs.
So het die sleutel onderskeidende eienskap vir vandag
is dat JavaScript is kliënt-kant en PHP, byvoorbeeld,
is bediener-kant.
Nou, dit het interessante implikasies vir, soos, intellektuele eiendom
en wie kan eintlik sien jou kode.
En inderdaad, kan jy gaan op die web en sien die meeste
enige kode wat iemand het geskryf in JavaScript.
Soms is dit leesbaar, soms is dit verborge.
Maar meer oor dit op die regte tyd.
>> So JavaScript, mooi genoeg nie, is super soortgelyke, sintakties, C.
En baie soos PHP, daar is geen hooffunksie.
As jy wil begin skryf JavaScript-kode, soos jy sal sien vandag
jy net begin skryf nie.
Maar dit is nie, sal jy sien, veral nuttig in die konteks van webblaaiers.
Maar my klein disclaimer-- gewoonlik earlier--
was om te sê dat jy kan toenemend vandag gebruik JavaScript bediener-kant
gebruik van 'n fancy raamwerk genoem Node.js dat sommige van eie programme CS50 se
geskryf in.
Check 50 eintlik gebruik Node.js.
Maar ons gaan om te fokus op JavaScript kliënt-kant hier op uit.
>> So hier is 'n stel van voorwaardes in PHP.
Jammer, in-- eintlik, verklaring, ook korrek is.
Hier is ook 'n stel van toestande in JavaScript.
Sintakties, is dit identies aan C en PHP.
Mnr Boole se uitdrukkings is, Net so, sintakties
identies aan beide C en PHP.
Ons het ook in skakelaars JavaScript wat identies lyk.
Ons het vir sirkelroetes is identies gestruktureer,
terwyl loops, doen terwyl loops.
>> Hierdie een is 'n bietjie anders.
PHP het die vir elke konstruk dat jy kan wees met behulp van
of sal gebruik in pset sewe, miskien.
JavaScript het hierdie spesiale weergawe van vir waar jy letterlik iets te sê
soos vir veranderlike sleutel voorwerp, wat is 'n baie bondige manier om te sê,
as ek 'n object-- het en ons sal praat oor hierdie weer in 'n moment--
en ek wil Itereer oor al van die sleutel waarde pare binne,
Ek het nie 'om uit te vind hoe om te numeries indeks hulle met 'n nul, een,
twee, drie.
>> Ek kan dit letterlik te sê.
En op elke iterasie, JavaScript vir my sal die veranderlike sleutel werk
die eerste sleutel, dan is die volgende sleutel, dan is die volgende sleutel, dan is die volgende sleutel,
en so meer.
En ek kan op sy waarde kry deur die behandeling van 'n voorwerp in JavaScript, soos ons sal sien,
asof dit 'n assosiatiewe skikking in PHP.
Inderdaad, as jy uiteindelik toegedraai jou omgee oor wat 'n assosiatiewe skikking is
in PHP, kan jy dink dit vir nou as identies aan 'n voorwerp in JavaScript.
Maar dit is 'n bietjie van 'n oorvereenvoudiging.
>> Skikkings kyk, mooi genoeg nie, identies PHP behalwe vir een karakter.
Daar is een ding ontbreek hier dat ons gesien het verlede week met PHP.
Wat weggelaat?
Ja?
Geen dollar teken.
So ons is terug na 'n meer normale wêreld waar
veranderlikes nie dollar tekens.
Maar jy doen voorvoegsel hulle met var, tipies.
En var beteken veranderlike.
En baie soos PHP is losweg typed-- waardeur daar tipes,
daar is getalle en stringe en dryf en so forth--
JavaScript het insgelyks tipes.
Maar dit is losweg getik in dat ons die programmeerders het nie aan hulle te gee.
Ons het net om bewus te wees dat die verskillende tipes bestaan.
>> Veranderlikes, meanwhile-- hier is hoe ons kan verklaar "hello, wêreld"
as 'n string.
Let daarop dat dit is identies aan PHP maar geen teken dollar.
En dit is iets wat ons sal begin vandag meer sien,
waardeur jy 'n voorwerp het met sleutels en waardes.
En as jy wil om te probeer om af te lei van die vorige week--
die sintaksis is 'n bietjie anders.
Maar 'n bietjie gesonde verstand check-- hoeveel sleutels nie hierdie voorwerp lyk het?
So ek sien vier.
Ek sien twee.
>> So dit is eintlik twee.
So, dit is 'n versameling van twee belangrike waarde pare.
Die sleutel is simbool waarvan die waarde is FB.
Die sleutel is die prys waarvan die waarde is 101,53.
So dit is twee belangrike waarde pare.
En onthou, PHP-- en dit is weer net soort van sintaktiese verskil.
Dit is nie al wat intellektueel interessant.
PHP kan dieselfde geskryf het iets soos follows-- quote, gelyk.
En ek hierdie verander na vierkantige hakies.
En dit dan verander ek 'n aangehaal woord "prys."
En dan het ek nog nie 'n kolon te gebruik.
Wat het ek verlede week gebruik?
Ja, die gelyk teken arrow funky notasie.
>> En dan het ek hier dieselfde ding.
Dieselfde ding hier.
En dit is al.
So dit is goed as dit het nie ingesink geheue net
nog, want dit is regtig intellektueel oninteressant.
Dis net sintaktiese verskille.
Maar die idees is presies dieselfde.
Binnekant van hierdie veranderlike aanhaling in JavaScript
is 'n versameling van die belangrikste waarde pare waarvan een is simbool, waarvan een
is die prys.
En ek kan kry by daardie waardes met die volgende sintaks.
Net soos in PHP, ek kon iets te doen like-- laat
my maak die boks 'n bietjie groter.
Net soos in PHP, ek kon maak this-- oh, dammit.
Kom op.
>> Net soos in PHP-- OK, sal ons net gebruik die aanbieder notas.
Net soos in PHP, ek kan doen $ quote $ quote ["simbool"],
en dit sal my kry die waarde van "simbool."
In JavaScript, dit gaan om identies, waardeur ek kan net dit te doen.
Die enigste ding wat ontbreek is die dollar-teken.
>> So mooi genoeg nie, dan is daar nie veel nuwe sintaksis.
So, wat ons vandag fokus op, regtig, is sommige van die idees en die aansoeke.
En die eerste sodanige program wat jy dalk
gesien as jy duik in pset sewe reeds is dit sintaksis.
So in pset sewe, as jy het gesien of dit nog nie gesien het nie,
weet dat daar is 'n lêer wat ons gee jy config.json-- JavaScript genoem
Beswaar notasie.
Hoekom?
Ons wou in staat wees om jou te voorsien met 'n sjabloon met 'n paar belangrike waarde pare.
Ons wou in staat wees om jou 'n lys van die leër, die naam van die bediener.
Ons wou 'n te gee plekhouer vir jou gebruikersnaam
en 'n plekhouer vir jou wagwoord.
As jy nie sien nie hierdie nog nie te bekommer nie.
Meer hieroor in pset sewe [? spec. ?] En toe,
natuurlik, ons wil hê jy in die tot-dos te vul
want as jy teken in CS50 IDE, elkeen van julle
jou eie gebruikersnaam en wagwoord.
>> So kan ons 'n half dosyn gebruik het of meer verskillende lêer formate.
Ons kan 'n txt lêer gebruik het.
Ons kan 'n CSV-lêer gebruik.
Ons kon gebruik het 'n INI-lêer, 'n XML-lêer,
'n hele klomp meer akronieme wat jy dalk nie nog ooit gehoor het.
Dit is soort van arbitrêre aan die einde van die dag.
Maar super gewild hierdie dae is 'n teks formaat genoem JSON-- JavaScript Object
Notation-- wat lyk soos hierdie.
Dit is 'n bietjie kripties, maar kennis van die patrone.
Jy begin met 'n oop krullerige stut, en jy eindig met dieselfde.
Binnekant van dit is iets.
Dit is 'n belangrike waarde paar.
So, dit is 'n voorwerp wat ek is kyk na die skerm hier op
wat een van die belangrikste, watter een waarde.
En net afleidings gebaseer op die vorige patroon, wat is die sleutel hier?
Databasis, die ding om die linkerkant van die kolon.
>> Nou, die waarde gebeur om te wees 'n veelvuldige lyne hierdie tyd.
Maar die waarde begin met 'n krullerige stut en eindig met 'n krullerige brace.
So, wat sou jy voorstel is die tipe van die waarde van die databasis?
'N woordeboek of net meer saaklik, 'n voorwerp.
Reg?
Dit is 'n soort van 'n struktuur wat data kan ander strukture gebruik binne homself.
So as hierdie hele ding is ons roep 'n object-- en 'n voorwerp
is net 'n klomp van die sleutel-waarde pairs-- die waarde van die databasis self is 'n voorwerp.
Die waarde van die databasis het 'n hele klomp van die belangrikste waarde pare waarvan die eerste
is gasheer, dan noem, dan gebruikersnaam, dan wagwoord
elk van wie waardes, intussen, is dit net 'n vervelige string in dubbele aanhalingstekens.
>> So selfs as dit is nie super duidelik net nog nie,
weet dat dit net 'n standaard, redelik vervelige manier
stoor data in 'n standaard formaat.
Maar die algemene foute wat jy kan maak, selfs in pset sewe
is bietjie dom dinge, soos as jy per ongeluk die komma daar weg te laat.
Wat gaan lei tot die lêer nie noodwendig leesbare.
Indien jy per ongeluk dinge soos die laat aanhalings, dit gaan nie leesbaar te wees.
So dit is 'n mooi nitpicky lêer formaat, maar dit is een wat super algemeen.
En ons gebeur om dit te gebruik, selfs al is jy enige JavaScript andersins gebruik nie,
in pset sewe.
>> Alles reg.
So onthou hierdie foto.
Ons het gepraat oor, in HTML, wat die kode kan lyk.
Dit is die HyperText Markup Language [Onhoorbaar] vir net "hello, wêreld."
Maar dan voorgestelde ons ruk terug dat as dit help,
jy dalk wil om te begin dink oor hierdie reeds soos 'n boom.
Trouens, die inkeping dat ons gebruik net ter wille van leesbaarheid se
of ter wille van styl se links kan soort van
vertaal word in hierdie boom, waar jy het 'n paar spesiale wortel node dat ons sal
generies genoem dokument, onder wie is die wortel HTML element of tag, HTML,
wat het dan twee kinders, kop en liggaam.
>> En dan op sy beurt, kop het 'n titel.
En die titel het 'n teks waarde.
En liggaam het insgelyks 'n teks waarde.
So as jy gemaklik gesegde dat ja, jy kan hierdie HTML neem
en trek 'n prentjie soos hierdie, die regterkant
is 'n mooi geestelike model, want nou dat ons JavaScript, 'n programmeertaal
taal wat implementeer kan voer en te interpreteer vir jou,
dit blyk dat wat ons is om te doen, in die kode
is begin om hierdie manipuleer boom struktuur in die geheue.
Ons hoef nie te bou die boom in die geheue.
Ons hoef nie te soort van doen pset vyf-style data struktuur
kompleksiteit.
Die leser, mooi genoeg nie, op interpretasie van HTML bo na onder,
links of regs, is letterlik gaan oorhandig ons die ekwivalent van 'n wyser
dat die hele boom gratis.
Dit maak al die harde werk.
Dit is wat Mozilla en Apple en ander het vir ons gedoen.
>> En met JavaScript gaan ons in staat wees om te beheer en te verander en doen
interessante dinge om daardie boom, andersins bekend
as 'n DOM of Document Object Model.
Watter soort dinge?
Wel, dit blyk dat in JavaScript, daar is
hierdie wasgoed lys van gebeure wat kan plaasvind.
En ons het nie regtig gebruik dat woord sedert week nul en pset
nul wanneer ons gepraat oor Scratch.
Die meeste van julle het waarskynlik nie gebruik 'n gebeurtenis in jou Scratch projek.
Maar jy kan onthou die eenvoudige Marco Polo
Byvoorbeeld, waar ons het twee sprites, van wie een sê Marco.
Die ander van wie dan op luister en hoor dat gebeurtenis, het gesê, Polo.
Indien nie, voel vry om terugkyk dat ver terug.
>> Maar dit is net om sê, en jy kan soort van
aflei uit die name van hierdie dinge, JavaScript, dit blyk,
gaan ons 'n manier om te luister gee vir die muis om af te gaan of muis gaan op
of sleutel om af te gaan of sleutel going up of onSubmit onselect
of onresizing iets.
Met ander woorde, 'n fisiese aksie dat 'n mens kan doen met 'n leser
dat jy elke dag te doen, kan jy skryf kode vir wat luister vir diegene gebeure
en dan doen iets gepas.
>> Byvoorbeeld, as jy Google Maps te gebruik, wat gebeur as jy op en skuif
die muis, tipies?
As jy kliek en sleep?
Ja?
Presies.
Die kaart begin om te beweeg.
Sodat jy kan soort van sien wat hier, wat is daar.
En hoe Google implementeer?
Wel, vermoedelik, hulle is met behulp van 'n paar van hierdie gebeurtenis
luisteraars, een wat sê, luister op die muis
down-- sodat wanneer die gebruiker fisies stoot sy trackpad of sy of haar muis
af.
En dan is ons op soek na iets soos beweging
of 'n ander gebeurtenis wat kan ons drag te vang.
En in die feit, sleep is insgelyks in hierdie dot dot dot lys van moontlike opsies.
>> So dit gaan 'n kragtige te wees manier om te begin reageer op die gebruiker
selfs voor hy of sy eintlik druk iets eksplisiete soos voorlê.
Maar ons gaan stel 'n paar onderwerpe om daar te kom.
Maar eers, laat se oorgang sommige werklike kode.
So ek gaan om te gaan voor en maak dom-0,
wat is 'n baie eenvoudige voorbeeld hier dat as ek in net zoom
het hierdie insette hier vir my.
En ek gaan om voort te gaan en tik in "David" vir my naam en klik op Submit.
>> En dan, al is dit soort van goedkoop, ek hierdie vinnige wat verskyn wat sê,
"hello, David!"
So dit is 'n soort van soos ons "hello, wêreld"
dat ons het 'n rukkie terug in C en selfs in PHP, want ek het dinamies
outputted my naam.
Ek kan die naam van iemand anders se hier doen.
Ek kon dit eenvoudig verander, soos Hanna, kliek Stuur.
En inderdaad, die klein pop-up veranderinge.
>> Nou, pop-ups is een van die mees misbruikte kenmerke van die web.
En in die feit, terug in die dag pop-up blockers
in die mode gekom omdat jy sou gaan om 'n paar website--
dalk 'n twyfelagtige place-- wat sou dan skielik
begin her jou skerm met 'n hele klomp van die pop-ups.
En so hierdie vermoë om pop-up vensters in die voorkant van die gebruiker
het veral nie gewees goed ontvang deur die mensdom.
So dit is waarom jy sien voorkom ding,
wat maak net hierdie hele ding lelik.
So ons gaan 'n behoefte beter manier om die gebruiker te vinnig.
Maar vir nou, wat blyk te werk.
Dus net intuïtief, wat lyk hier om te gebeur?
Ek gaan voort en klik, en dan is daar iets gebeur, duidelik.
Maar wat gebeur nie dit het gebeur verlede week enige tyd wat ek gekliek Stuur?
Wat het nie gebeur nie op die skerm?
Jammer?
Herlaai.
Die URL het glad nie verander nie.
Ek het gesê dit was dom-0, en ek is nog op dom-0.
Gewoonlik, wil ons verander kry om 'n ander URL, soos register.php of die wil.
>> Maar selfs toe ek ontslaan hierdie ding deur te kliek OK,
sien dat die URL bly heeltemal sit.
En, in werklikheid, as ek 'n bietjie skepties, laat my oop Chrome.
Laat my oop te maak die blad Network.
En sien dit is leeg op die oomblik.
Laat my gaan voort en weer Maria.
Daar is geen netwerk verkeer hoegenaamd nie.
So daar is geen HTTP.
>> So ja, as ek kyk na die bronkode vir this-- laat my hierdie venster toe
en gaan na View Bron.
Interessant.
Dit lyk asof daar is 'n paar nuwe etikette, onder hulle script.
So laat ons 'n blik binne CS50 IDE presies wat ek gestuur aan die gebruiker.
>> So hier is-- laat fokus op net die HTML.
Hier is die onderste helfte van dom-0.html.
En sien dat dit het 'n titel, 'n kop tag, 'n liggaam tag, 'n vorm tag.
Maar wat spring uit om jou as anders, veral as jy nog nooit
geskryf jouself enige JavaScript.
Laat my blaai 'n bietjie om die reg hier.
Ek het 'n inset het, 'n ander insette vir voorlê.
Ek het 'n ID, wat is 'n soort van nuwe.
Maar ons het dit sien met CSS.
Wat anders is beslis nuut?
Ja?
Lekker.
>> Alles reg.
So waar dit onSubmit sê, sien wat lyk om te volg.
Dit is 'n kenmerk in HTML naam.
Die waarde is hierdie aangehaal string hier.
En dit lyk 'n bietjie weird met die eerste oogopslag.
Dit is nie HTML.
Dit is nie CSS.
Dit is, as jy kan raai, JavaScript.
Dus blyk dit dat ingeboude webblad is 'n funksie genoem groet.
En ek afleidings wat net want dit is 'n woord, groet.
Dit het 'n oop hakie, naby hakie, kommapunt.
Lyk soos 'n C-funksie, lyk soos 'n PHP funksie.
>> En inderdaad, dit gaan 'n JavaScript-funksie.
Dan is terug ek vals is.
Ons sal terug te kom wat in net 'n oomblik.
Maar waar is die funksie gedefinieer?
Wel laat ek blaai up na die top van die lêer.
En selfs al is dit 'n lang lyn, dit is relatief eenvoudig.
Laat my hier zoom uit en fokus op die vier lyne.
>> So in JavaScript, net soos PHP, jy net
sê, letterlik, die woord "funksie" die naam van die funksie,
en dan hakies met enige arguments-- geen argumente in hierdie geval.
En daar is geen return type in JavaScript, net soos PHP.
So dit is 'n bietjie losser as C. Open krullerige brace, naby krullerige brace.
Gebou in JavaScript is 'n function-- nie 'n aanbevole function--
maar 'n funksie genoem waarskuwing wie se enigste doel in die lewe
is om te trek wat mooi lelike gevra dat ons 'n oomblik gelede gesien het.
>> Nou is hierdie soort van 'n mondvol.
Wat gaan hier aan?
So laat ons begin om beklemtoon hier alles.
Dit is dieselfde argument te waarsku.
En wat gaan aan?
Dit lyk net soos 'n string.
En dit blyk, in teenstelling met PHP en in teenstelling C, beteken dit nie saak nie in JavaScript
as jy aanhalingstekens of dubbele aanhalingstekens.
Hulle sal gelykstaande wees.
En eerlik, dit is net gewild hierdie dae
vir JavaScript programmeerders om altyd Gebruik aanhalingstekens vir een of ander rede.
Dis net die ding om te doen.
Maar ons kon dubbele aanhalingstekens gebruik, as well.
>> So plus is 'n nuwe karakter.
Maar dié van julle wat gedoen het dit voor, wat beteken plus beteken?
Ja.
Koppel.
So het ons dit in PHP.
Daar is net die dot operateur in PHP dat
sal twee stringe saam koppel.
C was 'n pyn in die nek om dit te doen.
Onthou van pset ses, wat was 'n especial pyn in die nek,
jy wil hê om te gebruik iets soos strcat
ná die toekenning van geheue op die stapel of die hoop.
Jy het om te spring deur hoops net twee stringe koppel.
In JavaScript, dit is super maklik.
Net gebruik van die plus operateur tussen hulle.
>> So het die komplekse soek ding blyk te wees van hierdie
want op die einde van hierdie hele string, ek het net
koppel op 'n uitroepteken.
So as wat knal is "hello, David," "hello, Hannah,"
"hello, Maria," en so meer, duidelik wat middel ding tussen die twee
plus punte moet my toegang tot wat gee?
Wat is daar vir seker?
Ja.
So ek sal hier die voorgee beantwoord hul naam, reg?
So hul naam opgeduik in die finale gevolg. So, wat beteken dit?
Wel, ek het vroeër in die voorgestelde prentjie wat die sogenaamde DOM
het hierdie spesiale wortel element pad tot bo genoem dokument.
En nou, dit blyk, wat gaan om 'n spesiale globale veranderlike
in JavaScript, gebou in wat 'n hele klomp van nuttige funksies.
Onder die nuttige funksie is die vermoë om te kry op enige afstammeling knoop.
Diegene vierkante of reghoeke of ellipse is net nodusse in 'n boom, om so te praat.
>> So dit blyk dat gebou in JavaScript se dokument voorwerp
is 'n funksie, andersins bekend as 'n metode, wat genoem getElementById.
Die sintaksis vir die roeping 'n funksie in JavaScript
wat is die binnekant van 'n voorwerp of 'n veranderlike is net met die dot-notasie.
En ons het dit gesien in C wat die struct sintaksis.
Jy sien dit in pset sewe soort, soort, wanneer jy sien CS50 :: navraag.
Die kolon kolon in PHP is 'n ander manier van die roeping van 'n funksie wat
binnekant van 'n paar voorwerp.
>> Maar vir nou in JavaScript, dit is net 'n punt.
En so hierdie funksie, mooi genoeg, soort
sê wat dit does-- kry element deur ID.
'N element is net 'n ander naam vir 'n tag of node in die DOM.
En so kry element deur ID "naam" beteken this-- hier is my HTML.
En op grond van hierdie HTML, wat node of wat HTML tag ek
gaan programmaties handed wees deur te bel document.getElementById?
>> Ja, presies.
Ek gaan die insette te kry element daar wie ID is "naam."
So spesifiek, kan jy dink van hierdie funksie,
getElementById, as 'n manier om terug 'n wyser na daardie spesifieke node
in die boom.
Ons het dit nie geteken boom, maar dit is 'n manier
om toegang tot daardie reghoek of reghoek
deur uniek identifiseer dit deur sy ID.
>> Nou, hoekom is dit nuttig?
Wel, dit blyk dat jy een keer gekry
dat knoop, wat reghoek uit die prentjie, wat node binnekant van dit,
op sy beurt, het 'n hele klomp van die properties-- sleutel waarde pare
of data, waarvan een is waarde genoem.
So letterlik, dit is soort van 'n mondvol om die hele ding te verduidelik.
Maar aan die einde van die dag, al dit doen is gee jou
'n string wat die gebruiker getik in in hierdie hiërargiese manier.
Maar ek hou nie van 'n paar van hierdie dinge.
Of liewer, daar is 'n paar nuuskierigheid steeds.
Al wat was om te werk.
Hoekom dink jy is ek terug valse na die roeping groet?
Dit lyk 'n bietjie lelik, wat Ek het twee state is daar
deur kommapunte geskei.
Neem 'n raaiskoot.
As ek verwyder terugkeer vals is, wat kan gebeur, net instinktief?
Jammer, sê weer?
>> Open 'n klomp van die Windows.
So potensieel dalk iets soos dit sou gebeur.
Wat anders?
Kan 'n versoek in te dien waar?
Na dieselfde bladsy.
So, in werklikheid, dit is wat hoe nader beantwoord hier
selfs al, in teenstelling in die verlede, ek het nie
gespesifiseerde die kenmerk aksie, wat normaalweg wat ons moet doen.
Blyk daar is 'n standaard. As jy nie aksie spesifiseer,
dit is soos om te sê quote, unquote of die naam van die lêer self,
wat in hierdie geval sou wees soos dom-0.html.
Dit is net soort van afgelei, of eerder geïmpliseer.
>> En so as ek dit nie doen nie, laat ons sien.
Laat my dit te red.
En ek het terug valse verwyder.
Laat my terug te gaan na hierdie voorbeeld en krag herlaai nie.
En jy kan my sien raai hierdie op CS50 Bespreek 'n klomp van die tye.
As daar iets ooit optree funky en die leser is nie optree as jy verwag,
dikwels jy wil om te hou Skuif en klik Reload.
Dit sal elke lêer te dwing om te herlaai en plaaslike cache gebruik nie
of 'n afskrif sodat nou, laat my gaan voort en open my Inspekteur, die blad Network.
Ek gaan om te kliek Bewaar Meld want ek
wil dit nie die rye verwyder nadat ek elders kry geklits weg.
>> Laat my hier gaan voort en tipe in Andi, kliek Stuur.
Alles reg.
Dit lyk soos verwag.
Dit sê "hallo, Andi."
Laat my klik OK.
Interessant.
Let daarop dat die bladsy verander, hoewel die oorspronklike blad.
Let op die URL soort verander het.
Dit het bygevoeg 'n vraagteken, wat gewoonlik 'n aanduiding
dat ons probeer om iets te dien.
En dan aan die onderkant, selfs meer uitdruklik,
hier is die werklike HTTP-versoek, wat 'n reaksie van 200 het dat
het my terug hier.
>> So dit is nie wat ons wil, reg te doen?
Want ek wil nie herlaai die hele bladsy.
Ek plaas wou terugkeer valse sodat kortsluiting
verstek gedrag van die leser se, wat was, natuurlik, na die bladsy te dien.
>> So laat ons neem 'n blik op 'n effens beter voorbeeld.
Dit is dom weergawe een.
En kennis van die volgende.
Dit is OK as jy nie grok al die reëls van die kode.
Maar wat is fundamenteel verskil oor hierdie implementering?
Ek sal stipuleer dit optree die dieselfde, doen dieselfde ding.
Wat het ek natuurlik anders gedoen het?
Ja?
>> GEHOOR: [onhoorbaar].
David Malan: Ja.
So die funksie gedefinieer differently-- Met ander woorde, afwesig van die vorm,
daar op die lyn 7-- of eerder, lyn 8-- nie meer
Het ek die onSubmit kenmerk.
In die vorige voorbeeld, ek het hierdie.
En dan het ek letterlik geskryf hier my kode.
En dan sê ek terugkeer onwaar.
En as dit nie vryf jy nog op die verkeerde manier,
dit moet begin om sover as, net soos in HTML,
toe ons begin om saam te meng dit met CSS in styl eienskappe,
dit het net begin om 'n bietjie te kry slordig of voel 'n bietjie verkeerd.
>> Net so hier, as jy begin om HTML,
en dan sal jy outomaties plop sommige JavaScript-kode
in die middel van 'n string aangehaal, dit is gaan nie baie onderhoubare te wees.
Reg?
Dit is nie eens duidelik op die eerste plaas waar die JavaScript-kode is.
So sou dit regtig mooi as wees 'n beginsel van 'n beter ontwerp,
laat heeltemal hou ons HTML skei van ons JavaScript.
>> So om dit te doen, wat ons het hier gedoen is die following--
ons net gebruik HTML slegs vir opmaak.
En so in die weergawe een van hierdie, al Ek het 'n vorm van 'n unieke ID.
En dan af hier, ek neem voordeel van 'n spesiale kenmerk van JavaScript
waardeur ek kan kry wat is genoem 'n anonieme funksie.
So dit blyk dat as ek roep document.getElementById van 'demo'
dit is soos gee my 'n wyser na hierdie node in my boom die vorm element,
om so te praat.
>> Nou, ek weet net van wetende 'n bietjie van HTML
nou is ons gelees het sommige aanlyn verwysing, wat 'n vorm element ondersteun
'n hele klomp van die geval listeners-- in ander woorde, die wasgoed lys van gebeurtenis
luisteraars dat ons 'n oomblik gelede gesien het.
Ek weet uit die lees van die dokumentasie dat onSubmit is 'n geldige geval
luisteraar vir 'n vorm element.
>> So wanneer ek weet dat, dit is veilig vir my om te doen
die following-- dat node kry van die boom, die vorm element,
en toegang sy sogenaamde onSubmit eiendom.
So het die dot beteken net dit is 'n eiendom,
soos 'n spesiale waarde binnekant van dit.
En wat data tipe is ek toeken, blykbaar,
om onSubmit, wat effektief 'n veranderlike binne
van daardie node in die boom?
Dit is 'n veld binne daardie struct.
Wat is die tipe data?
>> 'N funksie, ja.
Dit blyk dat PHP het hierdie.
En selfs al het ons het jy nie vertel oor dit,
C het ook funksie wysers, die vermoë om te slaag en toewys funksies
as waardes hulself veranderlikes.
En ons gaan nie om terug te agteruitgang C.
Maar vir nou, dit blyk dat op die regte kant hier,
selfs al is dit lyk 'n bietjie funky, Dit beteken hey leser,
gee my 'n funksie.
Ek gaan nie eens die moeite om te gee dit 'n naam, want ek is letterlik
gaan wys kom ons noem dit die adres van hierdie funksie
onmiddellik onSubmit.
Met ander woorde, die leser, het jy nie nodig om te weet wat hierdie funksie genoem.
Jy hoef net te weet waar dit in die geheue.
En so is dit voldoende om net het 'n gelyke teken daar
en nie te pla noem hierdie, soos cat of groet of enige ander woord.
En nou is dit net 'n stilistiese ding.
Ek kon dit krullerige brace beweeg op the-- sorry-- volgende reël
soos ons gewoonlik doen CS50.
Maar in JavaScript, dit is eintlik stilisties algemene
om net te hou die krullerige brace, die eerste een, op daardie eerste lyn.
>> Maar hierna, daar is niks interessant nie.
Wat oop krullerige brace net afbaken die begin van my funksie.
Die funksie is nou identies, behalwe as ek het
ingesluit die terugkeer valse binnekant van hierdie funksie.
Omdat dit blyk out-- en jy sou net
weet dit uit te lees die documentation--
dat indien die funksie wat jy ken die onSubmit hanteerder terug vals
die leser net weet en stem die vorm nie te onderwerp aan 'n bediener.
As dit waar terugkom, sal dit in te dien dit na 'n bediener vir redes wat ons sal sien
is nuttig in net 'n oomblik.
>> En dan is die kommapunt ná die krullerige brace net daar
beteken ek klaar die definisie van die funksie.
Jy weet wat om so gou bel as jy hoor 'n voorlegging.
Alles reg.
Dit is nog steeds waarskynlik soort lelik.
So, wat meer kan ons doen?
>> Wel, dit blyk dan in weergawe twee, wat is die last--
en ons sal net blik op hierdie.
Aan die risiko van die maak van dit leliker, dit blyk
dat daar 'n biblioteek in die wêreld genoem jQuery.
En jQuery is 'n super gewilde JavaScript biblioteek
dit is so gewild dat die meeste enige JavaScript-- dit is nie
ongewoon vir mense om te verwar jQuery met JavaScript.
Hoekom?
JavaScript self het baie verbose maniere om things--
document.getElementById, dadadadadada.
Jy eindig met baie lang lyne van die kode.
>> So 'n mede naam John Residensie el, wat eintlik werk vir 'n begin
up hierdie dae, kom uit met hierdie biblioteek jaar
gelede dat baie mense het bygedra om jQuery genoem dat veranderinge
die sintaksis in die volgende manier.
En net so het jy dit gesien het, want jy altyd
sien dit as 'n doen web-gebaseerde finale projek,
dit sou die ekwivalent manier wees uitvoering van hierdie funksie met behulp van dieselfde
hierdie spesiale biblioteek.
>> Nou, eerder as terg dit uitmekaar in sy geheel,
laat ons net kyk na sommige patrone.
Dit sintaksis blyk te hê hoeveel anonieme funksies
of naamlose funksies of AKA lambda funksies?
Twee, reg?
En jy weet dat, selfs al jy is nie super gemaklike met hierdie,
net deur die feit dat dit sê funksie () twee keer.
>> En dit blyk dat wat hierdie kode is doing--
en ons sal verwys na aanlyn verwysings, uiteindelik vir 'n paar help met hierdie.
Dit beteken net dat wanneer die dokument gereed is,
gaan voort en registreer die volgende funksie
as die stuur hanteerder vir die HTML element wie unieke idee is demo.
En dan, wanneer dit gebeur, noem hierdie twee reëls van die kode.
En dit is tragies, 'n meer verbose manier om te sê terugkeer onwaar.
En ons het dit al net omdat jy sal sien kode soos hierdie aanlyn.
En dit is niks om te word afgeskrik deur.
Maar eerder, in gedagte hou dat wat is gaan algemeen in JavaScript
is hierdie paradigma.
En so dit is hoekom ons wys dit vir nou.
Alles reg.
So sonder te woon veel op daardie sintaksis,
is daar enige vrae oor hierdie voorbeelde of idees tot dusver?
Alles reg.
So kom ons gebruik dit vir iets nuttig.
Maak 'n webblad wat net sê hello, so en so is nie al wat interessant,
nie underwhelm.
Hierdie een gaan nie mooi wees, maar dit gaan om iets nuttigs doen.
Laat my terug te gaan na my gids hier en maak, sê, vorm 0.html.
>> So dink dit is die groentjie binnemuurse sport registrasie bladsy
sonder enige CSS of enige sin van die ontwerp.
En ek wil om voort te gaan en registreer hier met 'n wagwoord.
En ek gaan akkoord met die voorwaardes en voorwaardes en klik Register.
En nou het die webwerf sê: "Jy is geregistreer! (Wel, nie regtig nie.) "
Dit lyk soos dit het gewerk, maar laat my gaan voort en dwing herlaai.
>> En laat my sê, nee, jy doen nie moet my werklike e-pos adres.
Of miskien sal ons net pos sê daar.
Wagwoord sal wees, soos, 12345.
En dan, net omdat ek 'n idioot, is dit nou 123456789.
En ek is nie van plan om jou boks.
>> Hmm.
Alles reg.
So is daar 'n hele paar geleenthede vir verbetering hier.
En jy weet, of sal in pset sien sewe, dat julle code-- kan skryf
en jy het om te skryf kode in PHP-- te verdedig
teen hierdie soort van die gebruiker foute omdat die gebruiker duidelik
het nie saam.
En hy of sy het jou nie gegee al die waardes wat jy wou of selfs in die formaat
dat jy hulle wou hê.
So jy sien in pset sewe wat ons kon seker 'n paar
indien toestande wat sê As die e-posadres
is nie 'n username@something.edu, ons kon net
sê jammer en vra om verskoning vir die gebruiker baie, soos jy kan wees in pset sewe.
Of as hulle nie het bewys dat boks, blyk in PHP, kan jy ontdek dat,
ook.
En seker as die wagwoorde nie ooreenstem as in register.php
vir pset sewe, kan jy ontdek dat.
Maar dit is 'n pyn in die nek in wat nou vra hulle
ons al die pad na die bediener.
Die gebruiker word in kennis gestel van die fout.
En ten minste nie, tensy jy gebruik sommige liefhebber tegnieke,
nou het hulle te kliek die pyltjie terug.
Sou dit nie lekker wees, soos 'n baie webwerwe vandag
as jy meer onmiddellike het terugvoer, onmiddellik?
>> Met ander woorde, laat my gaan na weergawe een wat gaan geen mooier.
Maar dit het hierdie funksie.
Malan, 12345, 123456789, nie gaan na die boks, Register.
Wagwoorde stem nie ooreen nie.
So selfs al is hierdie pop-up is ugly-- ons kan dit uiteindelik te vervang
met iets soos Skoenlus, wat jy sien in pset sewe
is 'n baie gewilde library-- ek gedoen het ontdek dat die wagwoorde stem nie ooreen nie.
Alles reg.
Wel, laat ek dit regmaak as die gebruiker.
Laat my gaan voort en sê 12.345, 12.345.
Steeds nie die beheer van die ooreenkoms.
Jy moet saamstem met die terme en voorwaardes.
So hoekom?
>> As ons reeds het gepostuleer dat daar 'n manier,
en ons het jou nodig pset sewe fout op te spoor
voorwaardes soos hierdie bediener-kant, waarom sou ek
pla dit ook doen in JavaScript?
Wat is 'n argument in gunste van die toevoeging van wat
jy oor om te sien as some-- is daar is bykomende kompleksiteit.
>> Miskien is daar geen onderstebo.
Wat kan dit wees?
GEHOOR: [onhoorbaar].
David Malan: O, interessant.
Potensiaal optree.
So seker nie, as jy nie die hantering van foutiewe toevoer van die gebruiker wat 'n groot,
miskien is dit al hoe beter as dit nie eens jou bediener te bereik.
Ek sou terug te stoot en daar sê, jy moet waarskynlik
los beide van hierdie probleme.
Maar dit is regverdig.
Wat anders?
>> GEHOOR: [onhoorbaar].
>> David Malan: Ja.
Hierdie kode, soos ons vantevore gesê het, is geïnterpreteer op die kliënt-kant.
Dit maak nie die bediener pla, wat beteken dat dit nie
impak vrag of kapasiteit van die bediener se.
En nou, vir klein ou my dit het geen betekenisvolle effek
want ek het 'n gebruiker op die oomblik.
>> Maar as jy 'n webwerf van ordentlike grootte,
veral die grootste, soos Facebook, hoe meer jy kan mense af te hou
van jou bediener beter omdat 'n bediener, natuurlik,
het slegs 'n beperkte hoeveelheid RAM, 'n eindige aantal gigahertz,
'n eindige aantal van die dinge dit kan doen per eenheid van tyd.
So as daar is meer mense in die wêreld slaan jou bediener,
per ongeluk aan te meld verkeerd, net so goed as jy
kan daardie las af te hou jou bediener.
Plus, veral op 'n mobiele device-- As jy al ooit
meld in my.harvard of Yale se netid of die wil,
daar is dit die latency met 'n baie webtuistes soos dié waardeur dit neem,
soos 'n damn sekonde of twee soms.
En dan, my God, as jy verkeerd intik, dan moet jy om terug te slaan en oordoen dit.
So is daar latency, veral op stadiger konneksies netwerk.
Maar JavaScript, want dit loop op die kliënt
en nie nodig het om terug te gaan en weer oor 'n potensieel stadig internet
verband, kan jy byna onmiddellik terugvoer.
>> So laat ons kyk na hierdie.
Laat my oopmaak vorm-0 en kyk na die HTML hier.
En laat ons sien net wat aangaan.
Dit is 'n vorm waarvan aksie is register.php.
Ek is net die gebruik van te kry sodat dat ek die URL kon sien.
Maar vir wagwoorde, wil ons seker wil om dit te verander om te post in die werklikheid.
Hier is 'n invoer veld van die tipe teks.
Hier is 'n ander insette gebied van die tipe wagwoord.
Hier is, as jy nog nooit gesien het nie, 'n inset van die tipe boks.
>> Maar daar is geen JavaScript hier hoegenaamd nie.
Dit is net HTML wat gaan na register.php.
Maar in die weergawe een, waar ek begin om diegene pop-ups te kry,
Kom ons kyk wat eintlik hier gebeur.
In weergawe een, wat Ek gaan see-- ek
gedink ek kon genoeg stalletjie met genoeg woorde nie, maar ek het uitgehardloop.
>> In weergawe one-- daar gaan ons.
In weergawe een, kennis van die following-- en is nie die beste implementering,
maar dit is my eerste.
Let daarop dat die onderstaande vorm, ek het 'n script tag.
En 'n script tag beteken, hey, die leser, hier
kom 'n paar kode in, Tipies, JavaScript.
En nou, let op wat ek doen.
Op line-- kan ek skaars lees it-- lyn 32, dit sê,
var form-- so gee my 'n veranderlike genaamd vorm.
En dan kry document.getElementId van die "registrasie".
Wat is hierdie?
Wel, laat ek rewind hier.
En kennisgewing, ah, ek het die vorm element 'n arbitrêre maar beskrywende idee
van registrasie.
So dit gee my 'n veranderlike wat laat my toe om dit node gryp,
dat reghoek in die boom genoem vorm.
form.onsubmit middel, hey leser, registreer 'n gebeurtenis luisteraar
op hierdie vorm.
Met ander woorde, wanneer hierdie vorm ingedien is, voer die volgende kode.
Dit het nie 'n naam, want nodig Hoekom het jy nodig om die naam ken?
Jy hoef net te weet wat om te voer, ergo
dit is 'n anonieme of lambda funksie.
En daardie funksie is al hierdie lyne hier.
En nou, om eerlik te wees, selfs al is jy dalk nie ooit geskryf het JavaScript
voor, dit is net C en PHP logika.
So as form.email.value == "" - so as die e-pos veld is leeg,
gil op die gebruiker met 'n "Jy moet bied jou e-posadres. "
Anders as form.password.value is leeg gil op die gebruiker,
"Jy moet jou wagwoord te voorsien."
>> Meer interessant logies, As form.password.value nie
gelyke form.confirmation.value-- waar het bevestiging vandaan?
Laat my rewind.
Wel, ek het hierdie insette gebied hier wagwoord.
En Ek het hierdie een hier bevestiging.
Ek kon dit genoem wagwoord twee of enigiets anders.
Ek is net logies nagaan dat hierdie twee is dieselfde.
Else-- dit blyk dit is mnr Boole again-- 'n Boolese waarde, die boks.
So as ek sê, uitroepteken point-- Indien nie form.agreement.checked,
gil op die gebruiker sowel.
>> So hierdie sintaksis jy sal sien is baie algemeen in JavaScript,
waar jy hierdie stippellyn notasie.
Jy begin met 'n voorwerp hier.
Jy duik in dieper om 'n te 'n eiendom soos wagwoord.
En dan kry jy op die werklike waarde.
En weer, hier is die insette.
Hier is die naam wagwoord.
En die waarde daarvan is ongeag die menslike eintlik getik.
>> So in al hierdie gevalle, is ek terug onwaar.
Maar indien nie, ek terugkeer waar.
En so nou sien ons 'n dwingende gebruik van toe
sou jy valse terugkeer stop wat die gebruiker se doen
en maak hom of haar kies weer of weer te tik.
Anders, ons terugkeer waar.
>> En laat my stel een ander variant van hierdie regverdige
sommige begrip daarvan saad.
Wel, in die weergawe 2 van hierdie, vorm 2-- Ek sal dit doen met 'n golf van 'n hand.
Dit is, vir diegene nuuskierig, die jQuery weergawe,
dié van julle wat dalk wil ploeteraars in daardie spesifieke biblioteek.
Maar laat ons start-- en enige vrae?
Laat my breek vir oomblik, want dit was vinnig en baie.
>> Maar die lekker ding hier is dat alle van die kode is pretty much dieselfde.
Die nuwe dinge is wat is die dom?
Wat is hierdie reghoeke?
Wat is hierdie nodes?
Wat is 'n anonieme funksie?
Wat is 'n event handler?
Maar gelukkig is die meeste van dit is net volle sirkel van, sê, week nul.
Alles reg.
So iets effens meer interessant?
Wel, die eerste van alles, laat my gaan voor en maak Google Maps.
En jy sal sien dat vir 'n oomblik, op die split sekonde,
sien wat gebeur wanneer Ek klik vinnig genoeg nie.
En hierdie verband aan die Harvard is so vinnig dat jy nie regtig agterkom nie.
Maar wat doen jy soort van soort sien as ek kliek en sleep baie vinnig?
Diegene van julle aanlyn kyk, as jy dit stadig om 0.5x spoed,
jy kan dit beter te sien.
>> Wat gebeur het net voordat ek gekliek en gesleep?
Kom ek probeer here-- laat my doen iets anders, soos 90210.
Kom ons gaan ver weg.
Dit was regtig vinnig ook.
Hoe oor Disney World?
Daar gaan ons.
OK.
Wat het jy gesien vir 'n split sekonde?
Net soos, vierkante, reg?
Plekhouers vir teëls?
>> Wel, wat gaan hier aan?
Google Maps is 'n mooi voorbeeld van hierdie tegnologie wat genoem AJAX.
En dit is waar ons sal begin om gebruik die JavaScript in 'n besonder
aanloklike manier.
Terug in die dag, was daar hierdie webwerf genoem MapQuest.
En ek moet geneem 'n kiekie van hierdie uit die 1990's,
waar as jy wou kyk hier op die kaart,
sou jy letterlik op 'n pyl by die top dat jy het
'n ander vierkant van die kaart.
As jy wil skuif na links, jy gekliek 'n pyl wat jy het
'n ander vierkant van die kaart.
En 'n paar webtuistes nog steeds doen dit vandag.
Maar selfs MapQuest gekry beter, soos Google Maps.
>> In plaas daarvan, wat is beter hierdie dae is webwerwe wat AJAX gebruik.
AJAX-- andersins bekend as Asynchrone JavaScript en XML,
wat net 'n fancy manier om te sê 'n tegnologie of tegniek wat
kan 'n leser met behulp van JavaScript om bykomende HTTP versoeke
na die bladsy gelaai is.
So, wat beteken dit?
Wel, sou dit soort irriterende in Gmail
As elke keer as jy wil om jou pos te gaan,
jy letterlik getref Control-R of Opdrag-R of kliek op die herlaai knoppie
en die hele darn bladsy sal herlaai.
Reg?
Dit sou wit flits waarskynlik vir die tweede.
Jy sal die dom progress bar te sien.
En net om te sien of jy 'n nuwe het pos, die hele webblad en die URL
jy by sou hê om op te laai.
>> Maar dit is nie wat gebeur in Gmail.
Reg?
Wanneer jy 'n nuwe e-in te kry Gmail, wat gebeur op die skerm?
Dit wys net op, reg?
Dit is net mettertyd verskyn as 'n nuwe ry in die tabel.
Wat eintlik behels 'n ordentlike bedrag van kompleksiteit.
In werklikheid, as jy dink oor hierdie boom, wat selfs al is 'n eenvoudige een hier,
Gmail-- en ek wil hê om te kyk by die kode om sure-- wees
het waarskynlik 'n HTML-tabel of miskien 'n On-geordende lys dat dit lewer
elk van jou posbus e-pos as.
>> En so as jy dit daar dink is 'n boom in die geheue wanneer jy
die gebruik van Gmail wat lyk soort van soort soos hierdie, wanneer Google besef, ooh,
jy het 'n nuwe e, is dit nie wil die hele boom te herbou.
Inteendeel, dit wil die node vind in Die boom wat jou posbus verteenwoordig
en net voeg 'n nuwe knoop.
>> So baie soortgelyk aan pset vyf, waar jy kan moes nodes te voeg in 'n gemors tafel,
insgelyks doen Google, via JavaScript kode wat dit geskryf het,
traverse hierdie boom, uit te vind waar is dat posbus deel van die venster,
en voeg 'n nuwe ry dan.
En 'n nuwe ry beteken net een of meer nuwe nodes in 'n boom.
>> En so AJAX is hierdie tegniek wat voorsiening maak vir presies dit.
Sodra jy 'n URL besoek het, egter gek lank dit is,
en sodra die bladsy het gelaai is, kan jy nog steeds
gryp meer inligting van die internet-- of dit nou
'n e-pos of 'n teël van 'n map-- gryp dit agter die skerms
en plaas dit dan in die bladsy sodat die menslike nie regtig
moet wag vir dit.
>> Facebook Messenger werk op dieselfde manier.
Enige aantal ander websites-- oh, eintlik, selfs dit.
Ek bedoel, dit is, eerlik, soort 'n irriterende funksie van hierdie dae.
As ek begin soek vir hierdie cats-- is 'n soort van 'n verskriklike gebruikers ervaring.
Dit begin net soek vir my.
Wel, wat doen dit?
Die URL het nie regtig verander sedert ek begin tik.
Maar wat gaan oor die wire-- OK, hmm interessant.
Wat gaan oor die draad hier net nog vreemder.
>> OK.
So laat my gaan voort en inspekteer element en gaan na die blad Network
en probeer om hierdie te maak tegniese en minder oor katte.
As ek tik, letterlik, katte and-- wat gebeur
per-- Ek gaan nie om te kliek nie.
Alles reg.
So af hier, wat gebeur elke keer as ek tik 'n karakter, blykbaar?
Soos, lae vlak?
Wat gebeur met elkeen van daardie karakters ek tik op my sleutelbord?
Ja?
GEHOOR: [onhoorbaar].
>> David Malan: Presies.
Elkeen van die karakters is gaan Google, een op 'n tyd.
Hulle is besig om 'n string op hul bediener wat verteenwoordig
alles wat ek tot dusver in getik.
En elke keer as ek tik ander karakter, het hulle
gebruik om hul geheime kruie van 'n soek algoritme en uit te vind,
bedoel hy hierdie kat bladsy of kat bladsy of die wil?
So in 'n sekere sin, bied dit my met 'n beter ervaring in dat ek dit nie doen nie, selfs
moet my denke te voltooi.
En inderdaad, dit is 'n nuttige ding, outovoltooiing in die algemeen.
As hul algoritmes is goed genoeg en as my soektogte is voor die hand liggend genoeg
Ek het nie die hele woord te tik.
Hulle gaan om my te vertel wat dit is ek eintlik soek.
So, wat Google oproepe direkte soek is net die gebruik van AJAX,
die gebruik van kode wat hulle toelaat om te versoek addisionele inhoud via 'n webblaaier
agter die skerms die gebruik van hierdie nuwe taal, JavaScript.
So ons het 'n paar minute oor.
En laat my bel my buddy Colton het op die verhoog,
aangesien dit gelyk veral pret laaste keer
om 'n tegnologie in te voer dat sommige van julle
'n belangstelling uitgespreek het in vir die finale projekte.
Ons het gedink dit sal pret wees om te bring sou 'n vrywilliger, al is, vandag
om jou te wys 'n toevoeging tot dit dat you-- toelaat ja,
Ek het gesien hoe die eerste hierdie hand.
Kom up.
Baie goed gedoen.
Goeie werk.
Ek gaan hierdie projek op die skerm in net 'n oomblik.
Wat is jou naam vir almal?
>> EFA: Ek is Efa.
>> David Malan: Etha?
>> EFA: Efa.
>> David Malan: Efa?
>> EFA: Ja.
>> David Malan: Nice om jou te sien.
Alles reg.
Laat my dit gereed is.
Kom oor na die middel met Colton hier.
Wat Colton het in sy hande vandag is 'n remote control.
So eerder as om net daar staan ​​in 'n drie-dimensionele wêreld rondkyk
as Colton het, nou kan Efa eintlik rond te loop deur te gaan op,
af, links, en regs soos 'n Nintendo of Xbox kontroleerder.
EFA: Ek gaan om te val af die verhoog.
David Malan: Ek wil staan ​​rofweg hier.
Maar dit is 'n risiko.
OK.
So gaan voort en sit die mense op.
Laat my gaan voort en oorskakel na die skerm hier.
Laat my die ligte verdof.
En Colton, laat my kom staan ​​langs jou.
>> Wil jy om te verduidelik met die mic wat ons doen?
Hier gaan jy.
>> COLTON: Natuurlik.
So nou is ons laai die oculus,
Ek dink nie operating-- bedryf stelsel, maar die belangrikste program, waar
kan jy toegang tot al die speletjies en apps wat in jou biblioteek.
So nou is, moet dit sê tap die touchpad te begin.
Touchpad gaan wees op die regterkant van die headset.
So gaan voort en tap--
EFA: Ag, man.
David Malan: Ja, daar gaan jy.
Die kwaliteit Efa is om te sien is veel hoër gehalte.
Dit is net die Wi-Fi hier.
COLTON: So, wat is jy gaan wil doen
is kyk na die top regterkant van die skerm.
Yep, wat spel op die heel bo regs.
En dan wanneer jy kies dit, tik die touchpad weer.
Ek dink dat sy Dreadhalls.
En dan is hier hier a--, laat my jou bril te hou vir jou.
>> So ek het hom net 'n kontroleerder.
So nou kan hy die wedstryd te beheer.
Hy kan rond en dinge beweeg soos dit.
So gaan voort en kyk op na die top.
Jy moet New Game sien.
So gaan voort en jy kan dit doen.
Nou, moet jy in staat wees om te beheer jouself met die kontroles,
sowel, so gou as die spel vragte hier op.
Dit mag wees 'n bietjie scary.
>> EFA: My nou vertel.
OK.
>> COLTON: Alle reg.
So bevestig dat jy kan rondbeweeg.
OK.
Jy kan rond te beweeg.
Volmaak.
So as jy kyk af, jy het 'n kaart.
Kaart wys jou waar jy is.
Jy kan kyk in die kamer rond.
Jy kan heeltemal omdraai.
Ja, presies.
Draai om.
>> So kyk na jou linkerkant.
Ek dink daar is iets wat jy kan af te haal op 'n vat in die kamer.
>> EFA: Hoe kry ek die karteer uit die pad?
COLTON: Kyk op.
Kyk net op.
Alles reg.
Daar gaan jy.
Nou gaan voort en net omdraai.
So kyk verder links.
Bly beweeg links.
Hou op soek gelaat.
Hou aan.
Ja.
>> EFA: O, dat die pad.
>> COLTON: Ja.
Wandel teenoor dit met die beheerder.
Daar gaan jy.
Nou is dit moet sê dit kom haal.
Daar gaan jy.
Tel dit op.
Alles reg.
Nou, laat ons kry uit hierdie kamer.
Gaan voort en loop na die deur.
So jy gaan hold-- dit sê hou die knoppie om dit te dwing oop.
So gaan voort en hou die knoppie.
Yep, dwing dit oop te maak.
Alles reg.
Goeie werk.
Nou is ons loop uit die kamer.
So ek gaan die res oorlaat om jou en kyk wat jy uit te vind.
EFA: Ek gaan nie in die donker kamer.
O, wag.
Nou het ek om te gaan die donker saal?
OK, ek gaan terug [onhoorbaar].
COLTON: Alle reg.
Sommige meer items te haal.
Lyk soos 'n paar munte.
Dit is 'n slot pick.
So as jy 'n geslote deur, kan jy gebruik dit.
Is jy bang?
>> EFA: Nog nie.
COLTON: OK.
>> Pretend-- ja.
Net voorgee jy is eintlik daar staan.
En as jy around-- draai jy het om gewoond te raak aan dit.
Maar dit maak sin.
David Malan: En terwyl Efa steeds speel, aangesien ons hierdie hele dag kon doen,
ons almal kan tip-toe hier.
Maar ons het twee ander pare, As jy wil om te kom en te speel.
Andersins, sal ons sien jy volgende Woensdag.
Dankie vandag aan ons vrywilligers.
[Applous]
>> [MUSIEK - "Seinfeld TEMA"]
Spreker 1: Wel, ek is om 'n nuwe PL berg op.
Ek het net verander die OLPF--
>> Spreker 2: So, wat presies doen jy?
>> Spreker 1: Wel, elkeen van these-- hier, ek sal jou wys hierdie een hier.
Jy kan dit hier te sien.
>> SPREKER 3: Ek dink ek is goed met hierdie.
Jy wil 'n paar meer?
>> SPREKER 4: Nee, ek is goed. [Onhoorbaar].
>> SPREKER 3: Nee, [onhoorbaar].
Kry vir jou.
Spreker 1: Verskillende kleur.
Spreker 2: OK.
Spreker 1: So uiteindelik wat dit doen, is dit die kleur pas of--