>> [MUSIC JOC]
>> DAVID MALAN: Aceasta este CS 50, și acesta este începutul săptămânii nouă.
Și ceea ce ne-am gândit facem astăzi nu este închide doar capitolul privind ultima saptamana
material în care ne-am concentrat pe serverul partea de programare web cu PHP si SQL,
unele chestii de baze de date.
Vom vorbi despre un pic de astăzi securitate și apoi
tranziția la o programare partea de client Limba cunoscut sub numele de JavaScript.
Dar, mai întâi, unele răscumpărare.
>> Aveți dreptul să reamintească faptul că pe Miercuri, am stabilit
pentru a scrie un site web care a luat în datele introduse de utilizator de
de o forma HTML care apoi stocate că numele de intrare utilizator, telefon
numere, și cellphone transportatorii din baza de date.
Și apoi am avut un pic de comandă script line, scris în PHP
care ar fi trebuit să itera peste rândurile din baza de date
și trimite mesaje text.
În ciuda mai multor mai multe încercări, am nu am primit că de lucru până la sfârșitul anului.
>> Așa că mi-am petrecut toată această săptămână de lucru pe care cod pentru a ne trece la punctul
de unde am rămas, în care toate Am primit până la sfârșitul anului miercuri
a fost acest mesaj de tip text de la Margo ca m-am luptat,
urmată de un mesaj text de la un alt coleg de clasa, Ai această David.
Urmat de acesta, minunat încurajator.
Păstrate în curs de desfășurare, foarte încurajator.
Aproape am ajuns până la then-- și asta e nota ne-am încheiat miercuri.
Și apoi, de fapt, probabil, favorita mea, o clipă mai târziu, aceasta a venit în.
Al naibii de live stream.
>> Așa că astăzi, ne-am stabili acest lucru cu o rapidă uita-te la ceea ce am făcut de atunci.
Deci, toate de acest cod este disponibil on-line de săptămâna trecută, opt saptamani,
codul sursă.
Și veți vedea că am trecut, și de fapt am curățat lucrurile un pic.
Am introdus un cuplu alt caracteristici ale unei baze de date SQL.
De exemplu, mai degrabă decât doar face purtător de var char
așa cum cred că am făcut-o pe zbor săptămâna trecută.
Am loc să-l definiți ca ceea ce se numește o enumerare.
>> Și unii dintre voi s-ar fi văzut acest lucru așa cum am explorat C. Enum este, de fapt
o caracteristică a C, unde puteți enumera o grămadă de constante
și să le atribuie valori automate, ca unul, doi, trei, patru
fără a fi nevoie să numere de cod dure.
Deci, SQL susține același lucru, prin care în cazul în care aveți un câmp de bază de date pe care doar tu
doresc să ia pe unul dintre finit Valorile puteti specifica literalmente
așa cum am făcut acolo pentru patru transportatorii populare telefoane mobile din SUA.
>> Așa că am făcut asta.
Și am făcut o serie de modificări ca bine, din care cel mai important
a fost de a se lucra e-mail deoarece rechemare, că acest program bazat pe care
în general, numit un e-mail la SMS gateway, care este doar
un mod fantezist de a spune că Verizon, și AT & T, precum și alte persoane să sprijine un server,
prin care în cazul în care primește e-mail, acesta se convertește la SMS
și trimite un text Mesajul pe telefonul cuiva.
Deci, dacă am făcut acest lucru în mod corect, aici este o formă nouă și îmbunătățită
care este de gând să vorbesc cu Codul noi și îmbunătățite, care
poți să te joci cu on-line.
Și-l va face, sperăm meu bip telefon intr-o clipa.
>> Deci, în primul rând, am de gând să tastați în numele meu.
În al doilea rând, eu nu am de gând pentru a face acest lucru acest moment.
Am de gând să-mi Controlați Element.
Iar acesta este doar un lucru mic, așa că nu
crea de ore de post-productie lucra așa cum am făcut data trecută.
Există acum este numărul meu de telefon.
>> O să selectați Verizon.
Și aici, să porniți acest microfon aici, și vizează acest lucru la telefonul meu aici.
Am de gând să faceți clic pe Înregistrare, care ar trebui să sperăm
pune-l în baza de date.
Acum am de gând să merg la program de linie de comandă, care
rechemare a fost numit slash punct text, și cruce degetele.
Aici vom merge.
>> [Faliment telefon]
>> [Aplauze]
DAVID MALAN: Deci, mult mai distractiv decât asta: e distractiv, desigur, dacă am lua în ea.
Dar e mult mai distractiv, m-am gândit, dacă am a creat unul dintre acele momente din filme
în cazul în care ca și cum ceva cu adevarat rău sa întâmplat în lume,
și la fel ca toți oamenii NSA telefoane mobile începe bip
cu mesaje text alertarea-le la acest fapt.
Așa că am crezut că vom încerca pentru a recrea la fel aici,
care nu folosesc o bază de date, Eu în schimb în avans
a scris un program care arata ca acest lucru.
>> Aceasta este o index.php-- și am pus on-line de acest cod
ca well-- care, aparent, doar face form.php,
folosind un stil de paradigmă MVC pe care le vorbim despre mai în detaliu în set problemă
șapte.
Această formă este destul de simplu.
Se va prezenta la un fișier numit here.php prin poștă.
Și se pare că o să întreb pentru un nume, și un număr de telefon,
și apoi prin așa-numitul Selectați meniu, e
O să vă dau cel puțin patru transportatorii populare telefoane mobile din SUA,
și apoi vă permit să eficient ia prezență click aici.
>> Și aici, între timp, se va împrumuta o parte din codul de ultima ora.
Și dacă tocmai ați degresat acest lucru, veți vedea că nu există
o grămadă de verificarea erorilor.
Dar frumusetea de la final este că noi nu scriem pentru o bază de date de astăzi.
Suntem o ține simplu și doar trimiterea sperăm
un mesaj text prin intermediul funcției I a scris în ultimii câteva zile apelul
Text, care este în Funcții. php, care este din nou disponibil on-line.
>> Deci, dacă doriți să ia parte în acest sens.
Noi nu vom fi stocarea nimic.
Du-te la această adresă URL aici, în timp real.
Nu-l prezinte doar încă, dar hai sa a se vedea dacă putem avea una dintre aceste film
momente în care telefonul mobil toată lumea începe bip, sperăm, doar
o dată în acest an, spre deosebire de 2011 în cazul în care aceasta a mers oribil razna.
Și odată ce te duci la acea adresă, ar trebui să vedeți o formă super-simplu
că, dacă aveți un nume, un telefon mobil număr, și un purtător telefon mobil care
Meciuri lista de acolo, du-te înainte și completați formularul.
Dar nu a lovit prezintă încă.
>> Forma va arata asa.
Du-te și tastați numele, numărul de telefon.
OOP, cineva va inainte de curba.
E în regulă.
OK, toată lumea e completat formularul.
Acest lucru ar trebui să funcționeze pe o telefon, de asemenea, dacă doriți.
Bine, pe locuri, fiți gata, start.
Lovit aici.
Ce?
Nu.
Jur pe Dumnezeu, am testat aceasta de mai multe ori astăzi.
Te-ai prins?
>> [Interpunerea VOCI]
>> DAVID MALAN: OK, eroare utilizator poate.
Asta-i două.
Ea a lucrat pentru doi dintr-un câteva sute, trei, patru.
OK, asta e bine.
Patru din cinci pentru corectitudine cum despre.
>> Deci, ce sa întâmplat?
Deci, probabil, fără să vadă tău ecrane, de ce s-ar putea fi errored?
Este, probabil, că am fost pur și simplu încercarea de a face prea multe conexiuni
la serverul e-mail de la Harvard tot la dată de la aceeași adresă IP.
Sunt doar ghicitul, deoarece nu am făcut- au luxul de testare
acest cod cu unele 300 de persoane in avans
dar de acum seama că că cel puțin ar trebui
au ajuns treaba acest moment.
>> Bine, deci de ce este asta tot mai mult Germane a ceea ce se întâmplă?
Ei bine în primul rând, o rapidă cuplu de anunțuri.
Deci, unul, dacă doriți să se alăture Chang, și Nick, și alții la masa de prânz vineri,
face RSVP la URL-ul obișnuit acolo.
Dacă sunteți de gândire de concentrare sau a face un secundar în CS,
dacă ești un al doilea de studentie, sau student în anul întâi, sau chiar junior sau senior în acest moment
și poate stoarce încă la cursuri, dau seama că școala de inginerie
este colectarea gratuit Ben și Înghețată Jerry și consultanță
acest miercuri la scurt timp după clasă la 04:00 în clădirea CS
la Maxwell Dworkin.
În cazul în care acest lucru este prea rapid pe ecran, du-te
a cs50.harvard.edu pentru o link către eveniment Facebook
unde puteți vedea mai multe detalii.
>> Între timp, m-am gândit mi-ar corecta un alt lucru pe care mi goofed miercuri.
Se pare că ID-ul lui Mark pe Facebook nu a fost trei.
A fost patru.
Se pare că el a avut mai multe încercare Conturile decât îmi amintesc.
Dar ceea ce a simțit acest lucru ca o oportunitate să faci este să trage un URL de genul asta.
>> Deci, se dovedește că Facebook are un API, Application Programming Interface,
care este un mecanism prin care voi pot solicita date prin programare
la Facebook și să se întoarcă mașină informații care pot fi citite, nu pagini web
dar doar text crud, ceva numita JavaScript Object Notation.
Și de fapt, dacă am vizita acest URL-ul, și zoom in, în mod implicit,
acest lucru este Mark public informații accesibile.
>> Și interesant Detalii aici este doar faptul că ID-ul său
este într-adevăr, numărul patru, pe care am a dat seama imediat ce am făcut asta.
Puteți face acest lucru singuri, dacă știi numele de utilizator Facebook, dacă aveți unul.
Doar introduceți-o până sus acolo.
Și nimic din toate acestea este privat.
Eu doar fac acest lucru chiar în modul incognito.
Deci, eu nici măcar nu mă autentificat.
Și tu văzând că eu se pare că a fost numărul utilizator 6454
pe Facebook, care nu este prea rău în aceste zile.
Deci, oricum, veți vedea, de asemenea, informații suplimentare acolo.
>> Și aspectul util de care este că
ar putea scrie software-ul propriu că integrează într-un fel de date, cum ar fi acest lucru
în propria aplicație.
Puteți împuternici utilizatori la conectați la site-ul dvs.,
nu folosind propriul lor nume de utilizator personalizat și Ați dar poate de conectare de Facebook
și obține informații chiar despre prietenii lor,
în cazul în care aprobă astfel de, sau similar.
Astfel act de faptul că CS50, de asemenea, are ceva din propriile API-uri,
una pentru datele catalog desigur, unii pentru meniurile care se îmbrățișări din mese
hale, tot de la clădiri și locații
în campus, avem un API pentru la fel de bine pe care le puteți interoga în mod similar și de a lua
Date textual spate pe care le puteți integra într-o PHP, JavaScript sau, sau chiar,
deși mai puțin frecvent, o C pe bază de proiect final.
>> Într-adevăr, înainte de finala proiect sunt câteva repere.
Ai un e-mail de la noi ieri.
Dau seama că propunerea acest lucru se datorează luni care vine.
Nu e neaparat obligatoriu, dar te aveți nevoie pentru a primi semenii didactice
aprobare înainte de a face ulterior, orice modificări.
Și apoi mai departe constitue un număr de alte repere.
>> Deci, pentru a te tachineze, de asemenea, cu unele posibilități,
avem o grămadă de aceste becuri nuanță.
Și unii dintre voi au acum unele dintre acestea în camera ta de cămin, de asemenea.
Și ei au prea o API.
Deci, amintesc acele săptămâni becuri binare Acum că Dan Bradley și Ansel
Duff a creat pentru noi.
Ei au folosit o interfață software pentru a acest bec, care în acest moment
este conectată la energie electrică și apoi prin wireless
este conectat la un lucru mic numit Podul aici,
ca un mic de proprietate router la acest aparat.
>> Dar se pare că dacă știu cum să trimite mesaje HTTP, ca noi toți acum facem,
Pot trimite un mesaj ca aceasta să acest bec pentru a porni sau opri
sau de a face orice număr de alte operațiuni pe ea.
Observați că nu este înțeles, nu este posta.
Mai este unul numit put.
Nu e de fapt alte câteva astfel de verbe.
Dar observați există o cale acolo, slash API, slash nou dezvoltator,
slash lumina, slash unul, slash stat.
>> Asta e aparent doar cale că societatea, Philips,
a decis că trebuie să lovi cu o cerere HTTP
dacă doriți să modificați starea a bulbului prin HTTP 1.1.
Apoi observați linia de gol.
Și apoi în cele din urmă ceea ce arata ca un fel de tablou de un anumit fel,
aceasta din nou, va fi numit JavaScript Object Notation, sau Jason.
Și ceea ce vedeți aici este că există trei perechi de valori-cheie.
>> O cheie este numit pe.
Și valoarea ei aparent va fi adevărat.
Luminozitatea este de 128, ceea ce este un fel de int.
Și apoi timp de tranziție este zero, ceea ce este aparent
cât de mult o să să ia pentru a transforma acest lucru pe.
>> Deci, chiar acum acest bec este oprit.
Dar dacă am face exact asta: lasa mă să merg la o foaie de ieftin mic
că Dan înființat în advance-- și am de gând
a merge mai departe și copiere comanda de mai jos.
Curl, așa cum unii dintre voi ar fi spicuite pe CS50
Discutați este un utilitar ca Telnet astfel de pe care le puteți simula cereri HTTP,
pune în mod special.
Pot trimite datele, exact ceea ce tocmai am
a văzut o clipă în urmă specific pentru această adresă URL aici.
Și apoi Curl este de gând să se ocupe de toate antetele necesare
și parsarea acolo de.
>> Deci tot ce trebuie să faceți este să copiați acest lucru în o fereastră terminal și apoi apăsați Enter.
Și becul merge mai departe.
Și acest lucru este tot trece printr- calculatorul meu fără fir
într-un fel în jos pe punte, care este apoi vorbesc cu acest bec.
Pot să fac altceva.
Pot face acest lucru du-te roșu, de exemplu.
Eu pot face, de exemplu, acest lucru du-te verde.
Pot face să meargă albastru.
>> Și observa in fiecare dintre acestea instanțe, toate că eu sunt în schimbare
este așa-numita valoare de nuanță de fapt da unele de culoare.
Așa că lasă-mă să inserați acesta în la fel de bine.
Acum e albastru.
>> Și tu poți face chiar crescator lucrurile where-- să mergem la verde.
Și am putea face acest lucru de desigur, cu propriul meu cod.
Dar chiar și API-ul în sine sprijină operațiunile funky,
ca aceasta, care va deranja acum ne pentru următoarele 30 secunde.
>> Deci, asta e una gust de ceea ce s-ar putea face cu un API, aceasta implicând
becuri.
Rețineți că CS50 are un cuplu perechi de Google Glass dacă doriți
Vrei să abordeze ceva de-a lungul aceste linii, Arduino Unos, care
sunt calculatoare minuscule, în esență, pe o placă de circuit mic
pe care le puteți conecta cabluri și alte lucruri
a și efectiv de control -ul mediu din lumea reală.
Și apoi există un cuplu de jucării noi pe care le avem.
Acesta literalmente tocmai a sosit altă zi prin e-mail, un Myo banderolă.
Și m-am gândit că e un mod de a te excitat despre proiectele
care v-ar folosi cu acest hardware ar
fie pentru a juca acest clip scurt pe care le folosesc pentru a tachineze oameni
că suntem acum trăiesc în viitor.
>> [MUSIC JOC]
>> DAVID MALAN: Deci, în doar câteva săptămâni, voi prea poate ca rece la târg CS50.
Un alt dispozitiv care le au o grămadă de care suntem
fericit pentru împrumut pentru proiectele este numit un controler de mișcare.
Acesta este un dispozitiv USB pic vă conectați la un calculator care
vă permite de a interacționa cu laptop-ul, Mac sau PC,
ca și cum ai avut ca un Xbox Kinect și de fapt, face propuneri fizice mult
așa cum vom vedea în acest viziune a viitorului.
>> [MUSIC JOC]
>> DAVID MALAN: Deci, chiar dacă aveți nici o idee cum ceva de genul asta
ar putea fi inventate sau locul de muncă la un nivel hardware, indiferent.
Chiar și după doar câteva luni de CS50, și o înțelegere de programare
mai mult, în general, și programare web mai mult recent, și apoi, de asemenea, API-uri, și HTTP,
veți avea acces, prin intermediul API-uri de software, dacă
vreau să împrumute una dintre acestea dispozitive pentru a vorbi de fapt să-l
și nu trebuie să vă faceți griji cu privire la punerea în aplicare care stau la baza
detalii, care este complet în conformitate cu această noțiune de stratificare
o abstracție care ne-am văzut de-a lungul semestrului.
>> Deci, de asemenea, peste week-end, a văzut câteva bucăți de știri.
Du-te în primul rând, du-te la seminarii, dacă ar dori să învețe ceva
mai mult pe orice număr de subiecte.
A se vedea URL-ul acolo.
Și acesta a fost trimis la mă de Chang, cine cunoști,
cine imprimarea armata noastră de elefanți.
Și a fost un titlu, după cum urmează.
Sunt îngrozit de noua mea TV.
De ce mi-e frică de a transforma acest lucru pe și ai fi prea.
Deci, suntem acum la punct în semestrul,
de asemenea, în cazul în care chiar dacă aveți cea mai mică de înțelegere
de cum functioneaza web, și HTTP, și de securitate, lucruri de genul asta
ar trebui să înceapă pentru a prinde ochi.
Dar, de asemenea, veți înțelege dacă aceste lucruri sunt sau nu sunt
amenințări reale.
>> Așa că am luat cateva extrase din acest articol aici.
Iar povestea este după cum urmează.
Eu sunt acum proprietarul un nou televizor inteligent, care
promite să livreze de streaming conținut multimedia, jocuri, app,
social media, și internet navigare, oh și TV prea.
Singura problemă este că eu sunt acum frică să-l folosească, spune autorul.
Te-ar fi, de asemenea, dacă ai citit prin politica de confidențialitate 46 pagina pentru TV.
Cantitatea de date acest colectează lucru este uimitor.
Aceasta jurnalele de unde, când, cum, și pentru cât timp utilizați televizorul.
Aceasta stabilește de urmărire cookie-uri, așa cum am discutat,
și balize proiectat pentru a detecta atunci când aveți
conținut special vizualizate sau un anumit mesaj de e-mail
dacă doriți să verificați e-mail pe televizor.
Acesta înregistrează aplicațiile pe care le utilizați, site-urile pe care le vizitați,
și modul în care interacționează cu conținutul, a face toate acestea prin intermediul televizorului inteligent.
De asemenea, yet-- mai ciudat asta e addition-- meu
are o construit în aparat de fotografiat cu recunoaștere facială.
>> Scopul este de a oferi de control gest pentru TV
și vă permite să vă conectați la personalizate cont folosind fata ta.
În sensul creșterii, imaginile sunt salvate pe televizor, în loc de încărcat
la un server de firmă.
Pe de dezavantaj, pe internet Conexiune face ca întreaga TV
vulnerabile la hackeri care au demonstrat capacitatea
să preia controlul complet al mașinii.
>> Mai îngrijorător, ca și în cazul în care nu a fost destul de inteligent, este microfonul.
Televizorul are o voce facilitate de recunoaștere
care permite utilizatorilor să controleze ecranul cu comenzi vocale.
Dar serviciul vine cu un avertisment destul de rău augur.
Vă rugăm să fiți conștienți de faptul că în cazul în care cuvintele tale vorbite includ
personal sau în alte sensibil informații, aceste informații
va fi printre datele capturate și transmise către o terță parte.
Ai înțeles?
Nu spune personal sau sensibil chestii in fata televizorului.
>> Deci, aceasta este de fapt real.
Și e greu să nu pentru a vedea dacă Mergi la Best Buy sau altele asemenea pentru televizoare
aceste zile.
Sunt toți inteligent într-un fel.
Și ei asistent inteligentă și mai ciudat.
Și acestea sunt pur și simplu de colectare a datelor în moduri pe care le-am vorbit despre
și apoi încărcarea prin HTTP sau un alt protocol la un server.
>> Deci, aceasta a fost de un articol distracție în acest website on-line
aici, care a vorbit despre o special bug sau cod greșit
pe care le putem lega de fapt în discuție săptămâna trecută.
Deci, acest titlu a fost la fel de urmează, povestea merge aici,
Josh Breckman a lucrat pentru o companie care a aterizat un contract
pentru a dezvolta un management de conținut sistem, sau CMS, așa cum se numesc,
pentru un site web guvern destul de mare.
O mare parte a proiectului a implicat dezvoltarea unui sistem de management de conținut
astfel că angajații ar fi capabil de a construi și menține
în continuă schimbare de conținut pentru site-ul lor.
Lucrurile au mers destul de bine pentru la câteva zile după întâmplă în direct.
Dar, în ziua de șase, lucrurile nu au mers atât de bine.
Toate conținut de pe site-ul a dispărut complet.
Și toate paginile dus la implicit, Vă rugăm introduceți pagina web conținut.
Ne pare rău.
Josh a fost chemat pentru a investiga și a observat
că unul deosebit de suparatoare adresă IP externă a avut
căzut în și elimină toate conținutul de pe sistem.
>> Adresa IP nu aparținea la unele îndoit hacker de peste mări
pe distrugerea de ajutor informații guvernamentale.
Se hotărî să googlebot.com, Foarte proprii de web crawling păianjen Google.
Ne pare rău.
După un pic de cercetare și codare în jurul a găsi o copie de rezervă noncorrupt,
Josh găsit problema.
>> Un utilizator a copiat și lipite unele de conținut de la un
pagină la alta, inclusiv o Edit Hyperlink
pentru a edita conținutul de pe pagina.
În mod normal, acest lucru nu ar fi o emisiune de la un utilizator din afara ar fi
Trebuie să introduceți un nume și o parolă, dar sistemul de autentificare CMS,
sistemul de conectare, nu a luat în considerare
hacking sofisticat tehnici de Google Spider.
Ne pare rău.
>> După cum se pare, Google Spider nu utilizează
cookie-uri, ceea ce înseamnă că se poate trece cu ușurință un cec pentru
este conectat la set cookie a fi false.
De asemenea, nu acorde atenție la JavaScript, care ar fi în mod normal
prompte și redirecționeze utilizatorii care nu ai autentificat.
Aceasta nu însă urmează fiecare hyperlink pe fiecare pagină în care constată,
inclusiv a celor cu Șterge Page în titlu.
Ne pare rău.
>> Deci, ce înseamnă acest lucru în mai multe punct de vedere tehnic dar destul de accesibile?
Aceasta înseamnă doar că de-a lungul site-ul lor,
au avut URL-uri nu spre deosebire de acesta, care s-ar putea vedea în probleme stabilit șapte.
Reamintim în problema seta șapte sau stiti în probleme stabilit șapte
că ești provocat, printre altele,
să-și vândă stocurile în numele utilizatorilor.
Dar de punere în aplicare care facilitate de cale a obține prin intermediul hyperlink-uri în utilizare tău
interfață, probabil Nu mai deștept ideea
pentru că în cazul în care site-ul dvs. este într-un fel accesibil fie de către un om
cine clic în jurul sau să cumpere un bot cum ar fi Google sau un Spider
cum se numesc asta e doar crawling web încearcă să indice
web ca un motor de căutare, acestea ar putea foarte ușor
lovit prin a obține acest tip de URL.
Și asta e funcțional echivalent cu, în acest caz,
vinde toate acțiunile de Google.
>> Acum sincer, e complet asinine că CMS
second-hand JavaScript și cookie-uri să pună în aplicare sistemul de autentificare
și nu fac asta pe partea de server, cum voi face și va fi, în PSET 7--
există o login.php file-- mereu, mereu,
mereu de securitate ar trebui să fie face pe partea de server,
nu pe partea de client pentru că, așa cum aceasta articol sugerează și s-ar putea te
a se vedea la un moment dat, ea este banal pentru un utilizator, bun sau rău,
la rândul său, doar off de activarea JavaScript- nu mai vorbim de cookie-uri.
Astfel că este WTF de zi cu zi.
>> Nu e una mai mult, care este doar un fel de înfricoșător,
așa că am să-l menționez în cazul în care doar ca o lectie de viata.
Ori de câte ori utilizați o aplicație numit ca Snapchat sau altele asemenea
care spune că aceste fotografii dura doar pentru cinci secunde, zece secunde sau fleacuri.
Sunt efemer Aceasta este absolut nu este cazul.
Ca nu exista nici o cale, digital, să pună în aplicare o formă de video,
sau imagine, text sau schimbul de astfel de ca un destinatar de la celălalt capăt
nu se poate salva într-un fel de date.
>> În modul cel mai naiv, cineva ar putea lua telefonul lor.
Și ei au o fereastră de 10 secunde în timp ce se uită la unele anticipate
pentru a lua doar un alt telefon și-l fotografieze, în mod evident.
Astfel încât să puteți păstra ceva digital în acest fel.
Unii dintre voi știu cum să ia capturi de ecran de pe telefon.
De fapt, dacă nu știți acest lucru, dau seama că, cel puțin Snapchat,
și cred că alte aplicații în aceste zile,
cel puțin tine daca spun destinatar are de fapt
ia o captură de ecran a imaginii.
>> Dar mai rău încă, aceasta a fost snappening, ca cineva a inventat recent,
în cazul în care unele 100000 snaps a fost eliberat
în ceea ce se numește un fișier torrent pe diferite site-uri în cele din urmă.
Iar acestea conținea o grămadă de mesaje private și posturi.
Se pare ca cele mai multe dintre ele benigne, deci nu este ceea ce s-ar putea aștepta.
Dar, pentru că oamenii au avut a folosit un site web terț,
logare cu Snapchat lor numele de utilizator și parola și apoi
economisire toate snaps lor pe acest site terță parte.
Și a fost că parte terță site-ul care a fost spart,
care cineva tocmai a însemnat dat seama cum pentru a obține toate 100.000 plus de acele imagini
în propriul lor hard disk pentru partajare ulterioară.
Sincer, aici, e un fel de asinine care Snapchat
este pus în aplicare în așa fel încât o terță parte poate sorta de interceptare
datele și care nu este legat de dumneavoastră aplicație proprie care rulează pe telefon.
Dar aici, de asemenea, seama că acestea lucrurile nu ar trebui să te prind prin surprindere,
sau cel puțin nu ar trebui fie o lectie de viata aici.
Dacă doriți tehnice detalii, du-te la faptul că URL-ul acolo
care este în diapozitive de astăzi.
În regulă, orice întrebări cu privire la lecții de viață de astăzi din CS?
Rândul său, că off.
Ceva?
Am o mulțime de oameni verificare Snapchat sau ceva de acum.
>> În regulă, așa SQL, Structured Query Language.
Hai să terminăm.
Și, de asemenea, cu toate că suntem doar zgarierea
suprafața acestui limbă, vă vom da
destul de limba sub formă de PSET 7
astfel încât să puteți aborda unele funcționalitate destul de comune.
Dar dați seama că există un cuplu lucruri pe care nu necesită de voi,
dar ei vor să fie importantă veni proiecte finale
și, desigur, vin de luare real site-uri cu utilizatori reale
este această decizie de design.
>> Se pare că în o bază de date MySQL, tu
au ciorchini de opțiuni, cum ar fi tipurile de date pentru coloanele
și alte lucruri, dar trebuie, de asemenea, alegerea unui așa-numit de stocare
motor pentru toate datele, un fel de sistem de fișiere,
daca esti familiar, pentru toate datele.
Ce format este aceasta în cele din urmă stocate în?
Și cele mai comune, poate, a fost MyISAM și InnoDB, termeni tehnici
că vom pasa numai în măsura în care unul are
și nu are următoarea caracteristică.
>> Să presupunem că aveți un pic frigider cămin.
Și să presupunem că tu și dumneavoastră coleg de cameră, care împărtășesc acest frigider,
sunt într-adevăr pasionat de lapte cuvânt de spus.
Și acest lucru este, de fapt, modul în care Povestea sa spus să-mi drumul înapoi
în ziua când am luat un curs denumit CS 161 sisteme de operare, care
explorează în mod similar acest subiect.
Deci, v-ați luat acest frigider.
Ai ieșit din lapte.
Și ai venit acasă, colegul tău de cameră a lui încă la clasă sau orice altceva,
și vă decideți voi du-te afară și a lua niște lapte.
Astfel încât să închideți frigider, blocare camera de camin, du-te peste drum
la CVS sau ori de câte ori, și de a lua în linie pentru a cumpăra niște lapte.
>> Între timp, colegul tău de cameră ajunge acasa de la clasă, ajunge in camera de camin,
deschide frigiderul, de asemenea, își dă seama ooph, nu mai avem lapte.
Deci, el sau ea închide frigider și apoi se întâmplă
pentru a merge la cealaltă CVS, care se întâmplă să fie
un bloc departe de alte CVS în piață, și devine în linie
acolo pentru a obține niște lapte.
Acum, desigur, câteva minute mai târziu, amândoi primi înapoi,
și cel mai rău dintre toate posibile rezultatele sa întâmplat.
Ambele aveți lapte.
Și tu nu prea cum ar fi lapte atât de mult.
Deci, una dintre ele este doar O să se înrăutățească la un moment dat.
Deci, acum aveți o cantitate excesivă de lapte în frigider toate că de ce?
>> [Inaudibil]
DAVID MALAN: Da, nu- comunica între ele într-un fel
că au fost obtinerea de lapte.
Deci, în cele mai simple moduri în lumea umană,
cum s-ar putea să evitați această prostie scenariu să se întâmple astfel de
să ajungi doar cu unul.
Le Text, da bine.
Dar cum altfel?
Post-it-uri.
DAVID MALAN: O notă post-it.
Orice formă de comunicare care spune colegului tău de cameră
nu merg în frigider pentru lapte.
Am de gând să merg repopula pe cont propriu.
Deci, aveți nevoie într-un fel pentru a bloca această resursă.
Deci, putem face asta: putem fel de ruina povestea și transforme într-o poveste CS
care cred că de acest lucru ca la fel ca o variabilă, care este stocarea o anumită valoare.
Și chiar acum, Valoarea de lapte este zero,
care nu doriți dumneavoastră coleg de cameră pentru a inspecta variabila
si apoi ia o decizie el sau ea bazat pe starea de care variabila
dacă sunteți în procesul de schimbarea stării de care variabila.
>> Deci una dintre liniile de SQL pe care le vă dau în PSET 7 caietul de sarcini
Este aceasta o aici.
Iar noi nu cheltui un imens perioada de timp vorbesc despre asta.
Dar se pare că, dacă încercați pentru a cumpăra niște acțiuni în finanțe CS50
că aveți deja unele acțiuni ale, tu
doresc să fie capabil să facă un număr de lucruri instantaneu împreună.
Vrei să fii în stare să în mod eficient, la un nivel ridicat,
verifica în regulă, dacă vreau pentru a cumpara mai multe actiuni ale gratuită,
WE penny stoc vorbesc despre în spec,
Vreau să verificați mai întâi cât de multe acțiuni am.
Și să presupunem că e cinci.
Și să presupunem că vreau să cumpara 10 mai, am în cele din urmă
doresc să aibă 15 parts de stoc.
Deci, am să întreb două întrebări.
Care este starea de variabila?
Care este starea de rând?
Câte acțiuni se în prezent am?
Apoi vrei să mergi mai departe și să o actualizați.
Deci, asta e analogic la lapte în care vă verificați rând,
și apoi doriți să-l actualizați pentru că, dacă doriți să cumpere 10 parts,
nu vrei să se schimbe rândul la 10, vă
vrea să-l schimbe la 5 plus 10 sau, desigur, 15.
>> Această linie de cod asigură că aceste două idei conceptuale
întâmpla împreună sau deloc.
Nimeni, inclusiv unele alt utilizator care a autentificat în aceeași site-ul,
poate întrerupe într-un fel verificarea rândului
și actualizarea rând, selectați și actualizarea dacă vrei.
Și sintaxa nu este super evident, dar aceasta linie, lung este cum este,
garantează faptul că aceste două operațiuni verifica variabila sau verificați rândul
și să actualizeze rândul întâmpla atomic.
>> Oh, aici vom merge din nou.
Mesaj text pe telefonul meu.
Așa că haideți să facem acest lucru o puțin mai concret.
Să presupunem că nu ești punerea în aplicare a unui frigider,
și tu nu ești de punere în aplicare PSET 7, dar o bancă real,
sau un bancomat, un Teller automat Mașină, în care tu cumva
doresc să fie în măsură de a împuternici utilizatorilor de a transfera bani
de la un cont la altul.
OK, stai.
Am de gând pentru a dezactiva acest lucru acum, vă mulțumesc.
Așa că ne-am dori să se mute bani dintr-un număr de cont
într-un alt cont număr, în mod special de 100 $.
Deci, aceasta este un fel de arbitrar exemplu, prin care tu, ATM-uri,
ar putea dori să execute două SQL interogări, scade dintr-un cont,
și se adaugă la alt cont.
Dar doriți să vă asigurați că acestea două linii de ambele întâmpla sau nu la toate.
Tu nu vrei ceva obtinerea întreruptă.
Tu nu un tip deștept rău într-un fel în picioare la Bank of America
cu două ATM-uri in fata de el și într-un fel
un fel de tastarea în comenzi, în același timp,
sperăm că încercarea de a deduce 200 dolari în loc de 100 dolari și doar cu 100 dolari creditat.
Pe scurt, doriți ca acest lucru să se comporta exact așa cum vă așteptați.
>> Și modul în care face această bază de date este în SQL
îl înveliți în ceea ce-i numit o tranzacție.
Literalmente în SQL, puteți apela lui CS50 Funcția de interogare cu citat start încheiat citatul
tranzacție.
Apoi, puteți executa orice număr de interogări SQL ulterioare,
dar nici unul dintre ei ia efect în baza de date
până te sun interogare citat citatul comite, în cazul în care din nou folosind PHP.
Și în acest fel, vă puteți asigura că chiar dacă aveți de 1.000 de utilizatori tot
lovind baza de date în același timp, SQL
va promit că aceste două interogări vor fi
pus în aplicare un drept după altul.
Astfel încât să nu se termina cu exces de lapte sau suma greșită, în cele din urmă,
de bani.
>> Deci, ține minte acest lucru, nu atât de mult pentru PSET 7
dar pentru proiecte finale daca esti de fapt
încercarea de a muta date în jurul valorii de peste mese ca s-ar putea aici.
Dar poate chiar mai simple și mai evident pentru a înțelege cu un exemplu
Este aceasta o aici.
Și cineva ne prin e-mail despre aceasta doar de altă zi
când a văzut ceva asemănător on-line.
>> Deci, după știința mea, sistemul de pin nu este vulnerabil la acest atac.
Și nu am nici o idee în cazul în care chiar utilizări baza de date SQL sub capota.
Dar să-l utilizați pentru dragul discuției.
Iată pe ecran care Oameni buni de la Harvard au tendința de
pentru a vedea când vă conectați cu lor Numărul Harvard ID-ul și PIN-ul lor.
Și să presupunem că sistemul de pin au fost implementat în PHP și cu o MySQL
baza de date, codul care cineva de ani în urmă s-ar fi scris
ar putea arata ca aceasta.
În primul rând, să declare o variabilă numită nume de utilizator.
Și tocmai asta de la superglobale POST.
Apoi a obține o altă variabilă denumit parola și facă același lucru.
Și apoi doar executa această interogare mult timp aici,
selectați stea de la utilizatori în cazul în care numele de utilizator este egal cu cutare
și parola este egal cu cutare și cutare.
>> Observați că cret bretele Am folosit aici
Adică doar la PHP, du-te înainte și substitut
valoarea acestor două variabile acolo.
Ei nu sunt strict necesare, dar ei au tendința de a evita erorile de sintaxă subtile.
Deci, acest lucru arata complet corect la prima vedere.
Și este.
Ai putea pună în aplicare Sistemul dată în acest fel.
>> Dar să presupunem că un super- elev inteligent și rău intenționat
Intrare acest lucru ca dată lui sau a ei.
Așa că m-am îndepărtat glonțul semne aici, în macheta sus,
și l-am descoperit de fapt ceea ce el sau ea ar putea fi dactilografiere.
Și e un pic ciudat.
Dar ce sare la tine la potențial îngrijorătoare despre intrarea utilizatorului,
chiar dacă nu aveți nici o idee ce un atac SQL Injection înseamnă.
De ce acest lucru sa te uiti un pic de pește?
Ce-i asta?
[Inaudibil]
DAVID MALAN: sau se află în un pic suspect.
De fapt, asta e un cuvânt cheie din SQL.
Așa că nu este de bun augur.
Faptul că nu există toate aceste ghilimele simple
there--, de fapt, una dintre cel mai ușor moduri de a rupe unele baze de date
este prin tastarea într-un nume ca O'Reilly care are un apostrof în ea
pentru că dacă omul care a scris codul din spatele scenei
nu ia în considerare faptul că există ar putea fi ghilimele simple într-un utilizator
de intrare, și el sau ea este folosind ghilimele simple în codul lor,
lucruri rele se pot întâmpla.
>> De fapt, mai rău încă, ia în considerare acest lucru.
În cazul în care acest lucru a fost din nou codul că cineva de la Harvard ani
în urmă a scris pentru PIN-ul sistem, observați ceea ce este
pe cale de a obține substituit pentru numele de utilizator și parola
în cazul în care utilizatorul scrie din nou skroob ar fi numele de utilizator
și apoi unul, doi, trei, patru, cinci, citat sau citat citatul unul egali
citez unul.
Și observați ceea ce este esențial aici este utilizatorul nu a
a început parola sau pini cu un citat.
Iar ei nu l-au încheiat cu un citat pentru că el sau ea
Se presupune că, dacă programator nu a fost atât de clare,
acestea sunt de gând să aibă cele ghilimele simple în codul lor.
>> Deci, aici e codul.
Și schimbarea care s-ar putea întâmpla acum este aceasta.
Și am subliniat ceea ce utilizatorul a tastat.
Deci, înainte, după.
Și observați ce e ușor îngrijorătoare acum despre jumătatea din dreapta a acestui cod SQL?
E un pic mai complex, desigur, decât interogările care le-am văzut.
Dar acest lucru nu se poate, eventual, fi un lucru bun dacă ești
a zis selectați stele, care este selectați totul, de la masa utilizatorului
în cazul în care numele de utilizator este egal cu skroob și parola este egal unu, doi, trei, patru,
cinci sau unu este egal cu unu.
Care este implicația logică de ultima clauză probabil?
E doar întotdeauna adevărat.
>> Si pentru ca am un fel de ghicit sau a dat seama prin încercare și eroare
că programatorul care a scris acest cod nu a făcut-
anticipa o persoană umană sau rău tastarea în ghilimele simple, de asemenea,
putem sintactic a finaliza interogarea SQL
cu ceva fără sens dar ceva care
este sintactic incorect care evaluează întotdeauna adevărat.
Deci, în cazul în care acest cod este folosit pentru a răspunde întrebarea adevărată sau falsă ar trebui să
acest utilizator să li se permită să treacă, Răspunsul este întotdeauna aparent întâmplă
pentru a fi adevărat, pentru că acest lucru se întâmplă întotdeauna pentru a selecta ceva din baza de date
pentru că unul, desigur, este egal întotdeauna unul.
>> Deci, care este solutia?
Ei bine, în PSET 7, noi de fapt evita toate astea împreună.
Noi vă oferim o funcție de interogare, și noi vă recomandăm să utilizați semne de întrebare
ca substituenți, în mod similar în spirit printf lui% s,
dar ceea ce este esențial despre semnele de intrebare aici este dacă ai citit de fapt prin
functions.php, unde ne Funcția de interogare este pusă în aplicare,
aceste semne de întrebare sunt scăpat, prin care orice potențial periculos
ca un singur citat este pornit într-un singur citat scăpat.
>> Deci, aceasta este ceea ce este întâmplă cu adevărat, dacă
utilizați funcția de interogare CS50 sau orice număr de biblioteci gratuite terțe părți care
face același lucru.
Nu contează în acest caz, în verde, în cazul în care utilizatorul a introdus într-un singur citat
deoarece interogarea Funcția pe care am scris este
O să adăugați backslash înainte orice astfel de citat periculos.
Deci, acest lucru nu este, în De fapt, o să fie legal.
Acest lucru este ca tastarea într-un nebun în căutarea parolă care este, desigur, nu merge
să fie parola real skroob lui.
>> Deci, Takeaway pentru CS50 este una, absolut folosiți întotdeauna ceva
cum ar fi funcția de interogare CS50 lui sau biblioteca de bază,
care se întâmplă să fie numit DOP.
Dar niciodată, niciodată, Nu face codul ca aceasta
fără a scăpa sau de spălare cum se spune intrări tale.
Și o vei face la un moment dat, probabil, veni peste unele site ca asta.
De fapt, se pare a fi cazul cum ar fi în aeroporturi și hoteluri din locuri
în cazul în care acestea au Wi-Fi gratuit acces pe care va trebui sa va logati pentru,
aceste site-uri sunt întotdeauna puse în aplicare oribil.
Și astfel un fel de distracție la exercițiu acasă, nu în scopuri răuvoitoare sau mai mult
de o distracție pe drum exercițiu, este să tastați doar
un apostrof, un singur citat, într-o formă pe unele site-ul
și să vedem ce se întâmplă.
Și dacă serverul se blochează sau dă ai un fel de mesaj de eroare,
ar putea fi foarte bine că cineva nu a anticipat acest lucru.
Și atunci trebuie să vă avertizăm propriu-zis autorități și trece mai departe.
>> Deci, acum, voi ar trebui să sperăm, înțelege un pic mai mult umor tocilar aici.
>> [Râsete]
DAVID MALAN: Știi că ești un tocilar.
Pentru următoarele câteva ani, va veti aminti
care mici Mese Bobby este din cauza acestui desen animat aici.
Astfel încât să păstreze în minte cum ne-am schimbare de context pentru ultima dată
prezenți JavaScript.
Ne-am petrecut relativ mic timp pe sintaxa PHP
pentru că e de fapt Super similar cu C.
Și destul de frumos, JavaScript prea este super similară cu sintaxa lui C
precum vom vedea în doar o clipă și cum vom
a se vedea mai târziu în această săptămână, în special.
Ce poti face cu acest limbaj, deși, este cu atât mai puternic,
în special cu API-uri.
>> Dar mai întâi un tur rapid.
Așa că unul, în JavaScript, există nici o funcție principală, ceea ce este frumos.
Ca și în PHP, puteți scrie doar cod.
Condiții arata ca aceasta.
Și expresii booleene s-ar putea arata ca aceasta sau ca aceasta.
Exista switch-uri, și ei ar putea arata ca aceasta.
Patru bucle arata ca aceasta.
În timp ce buclele arata ca aceasta.
Face whiles arata ca aceasta.
Și apoi tablouri arata ca aceasta, foarte asemănător cu PHP.
Dar observați, că în JavaScript voi declara o variabilă nu cu un dolar
semn, nu cu un tip de date, ci pur și simplu prin a spune var pentru variabila în fața sa.
Acesta este de asemenea liber tipizat prin aceea că prezintă tipuri,
dar nu le declară în mod explicit.
Și apoi un șir de caractere, pentru exemplu, s-ar putea uita-te
în acest fel, că șir fiind numit în acest caz.
Și apoi un obiect.
Și acestea, vom vedea mai înainte de mult timp.
Și un obiect este, probabil, una dintre cele mai văzut cel mai frecvent structuri de date
într-o bază de activarea JavaScript- Programul deoarece permite
să se asocieze arbitrară perechi de valori-cheie locații
ca matrice asociative PHP și la fel ca și propria tabelă de dispersie
sau încercați așa cum ne-am pus în aplicare câteva săptămâni spate.
Deci, haideți să vedem de fapt ce putem face cu JavaScript.
Și în special, acest lucru este o listă lungă de caracteristici
care browsere au ca ne permit să cârlig JavaScript
într-un site web în felul următor.
JavaScript este adesea folosit ca un partea de client limbaj de scripting.
Nu este compilat.
Se prea este interpretat.
Dar spre deosebire de PHP, care a fost difuzate pe server, în serverul de web,
sau în interiorul profundă a clienti, JavaScript
este diferit prin aceea că de obicei rulează în browser.
>> Deci, orice cod JavaScript de a începe scris pentru proiectul final PSET 8, sau,
sau în lumea reală este, în general, merge să fie salvate pe server, absolut
într-un HTML punct sau punct JS pentru fișier JavaScript.
Dar browser-ul se întâmplă pentru a descărca că JavaScript
codul pentru propriul exemplu de Chrome, sau IE, Firefox sau, sau orice altceva.
Iar codul este de fapt mergi la a lua executat în interiorul propriului browser.
Doar pentru a face acest lucru mult mai reale, să vedem acest lucru în formă concretă.
>> Nu avem nici o idee despre ceea ce face acest cod fără să citească într-adevăr prin ea.
Dar lasă-mă să merg la Facebook.com fără să vă conectați.
Lasă-mă să merg la Controlați Element și du-te la, să zicem, de rețea și reîncărcați pagina.
Și vom see-- permiteți-mi să schimbe Reload Pagina pentru a obține toate cererile pentru noi.
Și primul care fișier vad este CSS, CSS.
Iată primul JavaScript dosar, și am
nici o idee despre ce face acest lucru, dar aici este o parte din codul JavaScript
care conduce Facebook.
Nu e chiar adevărat că dezvăluind pentru a mări.
E încă la fel de lipsit de sens.
>> Dar veți vedea chiar mai jos, nu e chiar mai multe dintre aceste fișiere JavaScript.
Ne pare rău.
Asta e un ping.
Să mergem în jos un pic în plus, și mai mult, și mai mult.
Nu e unul.
>> Deci, chiar dacă Facebook, în spatele scene, este scris în parte în PHP
și Facebook propria versiune a acestuia, există o mare cantitate de JavaScript.
De fapt, orice a chat faci pe Facebook,
oricare dintre actualizările inline cronologie care se întâmplă în timp real, toate din care
este condusă de JavaScript.
Da?
>> Audiența: Nu sunt sigur în cazul în care acest lucru este Facebook,
dar m-am gândit că Facebook a dezvoltat propria lor in-house limbaj cod?
DAVID MALAN: Au făcut-o.
Deci, de aceea spun o variație de PHP numit Hip Hop că ei de fapt
caracteristici adăugate în astfel încât, atunci când Mark puse în aplicare în primul rând Facebook,
a fost scris în PHP.
Și la fel de bine a rămas un fel de limbaj front-end
pe care le folosesc pentru mult de codificare a acestora, dar
nu a fost o limbă care este cântare deosebit de bine la miliarde
de oameni.
Și astfel ei au adăugat propriile lor îmbunătățiri în spatele scenei.
Și ei folosesc orice număr de alte limbi
pentru diverse piese de infrastructura lor.
Deci da, este o variație de ceea ce stim acum ca PHP.
>> Așa că haideți să aruncăm o privire la câteva exemple
de modul în care am putea folosi JavaScript aici.
În codul sursă de astăzi, avem o grămadă de fișiere, dintre care primul,
hai sa numit DOM zero.
Deci, DOM zero, arată după cum urmează.
Lasă-mă să merg în acest director și deschide domzero.html,
partea de sus a care are un tip doc declarație, spunând că aici vine HTML 5.
Și acum iată un tag HTML.
Iată tag-ul cap.
Și aici e ceea ce este nou astăzi.
>> Avem acum o etichetă script în interiorul capului a paginii.
Și acest lucru se pare că nu foarte puțin, dar aviz
care le-am definit un script-ul, un JavaScript.
Și, ca o paranteză, deoarece aceasta este o concepție greșită comună,
JavaScript nu are absolut nimic de a face cu Java, limbajul
că unii dintre voi s-ar putea au învățat în APCS.
A fost mai mult de un marketing lucru decât orice,
echitatie coattails de Java ani în urmă.
Dar JavaScript, nimic de-a face cu Java, doar în mod similar, și enervant,
confuz pe nume.
>> Deci, aici este modul în care declara o funcție în JavaScript, spune literalmente funcție,
apoi numele funcției, atunci orice argumente s-ar putea lua,
la fel ca în PHP.
Se pare că în JavaScript, una dintre cele mai Funcțiile enervant care există este alertă.
Aceasta este o fereastră mică care va apărea și vă avertizăm
la unele bucată de informații.
Este, în general, se încruntă la.
Dar o vom folosi ca nostru primul exercițiu aici.
>> Observați câteva caracteristici ale JavaScript.
Ghilimele simple și ghilimele Nu mai contează de fapt.
Ghilimele simple si duble citate pot fi schimbate,
întrucât în ​​C, va trebui să utilizați ghilimele duble pentru siruri de caractere,
și aveți două singur citate de caractere.
În lumea JavaScript, mulți oameni, cei mai mulți oameni
Folosiți ghilimele simple din jurul siruri de caractere doar pentru că este un lucru stilistic.
Dar ceea ce este operatorul plus aici, pe care nu le-am văzut mai înainte?
>> Audiența: Concatenarea.
DAVID MALAN: Concatenarea.
Deci, C nu are nici măcar acest lucru.
PHP are operatorul punct, care face acest lucru.
JavaScript are operatorul plus, care confuz este la fel ca Java.
Acum, ce se întâmplă aici?
>> Deci, aici e în cazul în care o bază înțelegerea de care imagine
ne-am aruncat un cuplu zile în urmă intră în joc.
Amintiți-vă atunci când am avut un simplu versiune a unui HTML page--
el tocmai a spus, salut lume.
Și apoi am desenat un copac la dreapta, pe care
a avut o grămadă de dreptunghiuri și linii conectându-le ca un arbore genealogic.
Deci, asta e așa-numita DOM sau Document Object Model.
Și se pare că puteți accesa dreptunghiuri în acel copac cu sintaxa
cum ar fi următoarele.
Tu spui pur și simplu de document, care este o Global variabilă specială într-un JavaScript
program care are o funcție asociate cu ea pe care le puteți accesa
similar cu un struct, dar pur și simplu spune punct si apoi numele functiei,
a obține elementul de identificare.
>> Elementul Vreau să ajung este aparent cita numele încheiat citatul.
Și apoi m-am doriți să obțineți valoarea sa.
Acum ajungem înainte de noi înșine.
Nici măcar nu sunt sigur ce toate acestea sunt despre.
Să înainte de rapid pentru a HTML pe pagina, care este super simplu.
>> Observați că am definit o forma aici.
Observați L-am dat un unic ID-ul, chiar dacă noi nu am folosit
acest atribut înainte.
Dar acest lucru există în HTML.
Puteți identifica în mod unic o anumită bucată din HTML cu un identificator de genul asta.
>> Observații acum astea-- se dovedește HTML susține, pe această listă spălătorie
Acum un moment, un întreg buchet de Stivuitoare eveniment.
Și acest tratare a evenimentului spune pe inscrieti.
Privind transmiterea de utilizare a acestei formular, sunați la următorul cod.
Și codul care va să fie numit sau executate
este exact acest lucru, greacă Funcția urmată de fals întoarcere.
Orice altceva ar trebui să să fie destul de familiar.
>> Aici este o intrare de tip text, a cărui ID-ul, în acest caz, va fi numele.
Noi nu avem un atribut nume real acest time-- și un buton de trimitere.
Deci, pagina rezultată arata ca acest lucru.
Și comportamentul rezultat, veți vedea, arata ca aceasta.
Pagina găzduiește locale spune: salut David, cu greu un punct de vedere estetic
mod de a saluta un utilizator.
Dar ceea ce de fapt se întâmplă?
>> Ei bine, ia în considerare ceea ce este aceasta.
Acesta este un câmp de text.
Și în conformitate cu HTML aici, mi-am dat
un identificator unic chemat citat numele încheiat citatul.
Între timp, am spus atunci când utilizatorul susține acest formular
prin apăsarea Enter sau clic pe butonul Submit buton, apelați funcția numit Greet
și apoi să se întoarcă Fals.
Să considerăm cele în sens invers.
Observați atunci când am faceți clic pe Trimiteți, URL-ul paginii nu se schimba.
Icon a browser-ului nu a început filare.
Nu am mers nicăieri, și asta e pur și simplu pentru că am spus return false.
Revino scurtcircuitelor false sau de la opritoarele comportamentul implicit a unui formular.
Așa că atunci ne lasă cu aceasta o ultimă întrebare.
Ce face Greet?
Ei bine, se pare că Greet solicită o funcție numită
Alert, trece într-o singură argument lung e
rezultatul concatenarea împreună o buchet de siruri, salut spațiu virgulă,
atunci tot ce se întoarce acest lucru.
Deci, document care este ca un global variabilă la acea rădăcină de copac,
apelarea unei funcții speciale, altfel acum cunoscut ca metoda.
O funcție care este în interiorul unei variabile este
numit o metodă în loc de o funcție.
>> Asa ca element de ID.
Ce element pe care îl faci doriți să obțineți prin ID-ul său?
Citat numele încheiat citatul și atunci valoarea specific.
Deci, cu alte cuvinte, acel cod simplu constată câmpul de text al cărui nume este ID-ul
și apoi devine valoarea sa.
Deci, dacă ar fi să schimbe acest lucru și spune Davin în loc de David,
și faceți clic pe Submit, acum ne au un salut pentru Davin.
>> Bine, deci tot fin și bun.
Dar să vedem dacă putem face aceasta un pic mai curat, deoarece doar
scrie cod ca acest lucru este în general, va fi dezaprobat.
Acest lucru se va arata infricosator.
Dar ceea ce este primul diferență care să notați aici
în această versiune pe lângă numele se schimbă la un DOM?
Ce structural arată diferit despre aceasta față de celălalt?
Da?
Audiența: este forma pe partea de sus a script-ul acum?
DAVID MALAN: Da, formularul este pe partea de sus a scenariului pentru un motiv oarecare curios.
Deci, asta e primul lucru care sare la mine, de asemenea.
Și din fericire, cel puțin, această parte este identic.
Deci, singurul lucru care pare a fi diferit este acest lucru.
>> Deci, aici e ceea ce e curat despre JavaScript 2.
Și-l face greu de înțelege la prima vedere,
în special pentru proiectele finale, după căutați la mostre de cod on-line,
dar se reduce la o anumită caracteristici sintactice de bază.
Aici, din nou este faptul că Document Global variabilă.
Aici, din nou este faptul ca metodă sau funcție care spune că ajunge elementul de identificare.
De data aceasta vreau să a obține ID-ul numit demo.
Unde este asta?
Asta-i aparent corect aici, forma în sine.
>> Și acum observați că se pare că, dacă am mă întorc acel nod din pomul din care
reprezintă forma în sine, nu un câmp de text,
se pare că forma, care nod sau dreptunghi din copac,
are ceea ce vom numi o proprietate, foarte, foarte, foarte asemănătoare
în spirit la un struct în C. E doar un membru de date în interiorul acestui dreptunghi.
>> Așa că am forma aici, și eu sunt atașarea,
sau mă atribuirea, pentru a On său Trimite handler sau mai degrabă Trimite pe proprietate
următoarea funcție.
Și acest lucru este, de departe, cel mai nebun lucru până acum punct de vedere sintactic.
Se pare în JavaScript și în PHP, și sincer pentru care contează în C,
chiar dacă noi nu o facem, puteți adauga fără nume, anonim, sau AKA lambda
Funcțiile care nu au un nume dar poate fi numit totuși.
>> Deci, ce fac aici este am atribuire această Trimite pe proprietate, care
Este în interiorul acestui nod arborelui DOM mea, o funcție, funcția de indicator dacă vrei.
Această funcție nu are nici o nume, dar asta nu o face
contează că vom vedea într-un moment cum să-l numesc.
Când această funcție este numit, acest cod este executat, atunci
fals este returnat la fel ca înainte.
>> Dar observați ce am făcut.
În acest moment, în poveste, am un formular.
Are un ID unic numit demo.
Aici, am o etichetă script care execută codul de mai jos.
Aceasta se leagă de faptul că nod în copac pentru că e pe Submit
proprietate această funcție aici.
Și doar prin natura cum functioneaza browsere, când acum am faceți clic pe Trimite sau tasta Enter,
această funcție este mergi la a lua numit.
Ea nu are nevoie de un nume pentru că cine naiba îi pasă ce se numește.
Singura dată când acesta este niciodată mergi la a lua chemat este atunci când am depuneti formularul de cerere.
Nu e nevoie de mine, dezvoltator uman,
să-i spunem de fapt în altă parte.
>> Acum, la fel ca și un teaser, ca în cazul în care nu au fost minte îndoire suficient,
putem face chiar acest lucru uita-te folosind mai criptic
o bibliotecă foarte popular numit jQuery.
De fapt, jQuery și JavaScript sunt de multe ori inclus.
Și ce vom face, miercuri, este de pornire folosirea acestui limbaj și aceste biblioteci
pentru a construi din ce în ce asincron și aplicații dinamice
cum ar fi harta de asistent aplicatii, aplicatii
că a actualiza pagina web în timp real timp, la fel ca Facebook sau Gchat
face, și nu mai ne limităm la lovirea Trimite prin o prezentare sau doar posta
singur.
Așa că veți vedea miercuri.
>> [MUSIC JOC]