DAVID J. MALAN: Bine, astfel încât aceasta de aici este brațul Myo bandă, un cuplu de care ne-am au pentru proiecte finale CS50. Și asta a fost o demonstrație noi în coadă te-ai trezit în avans în cazul în care, în esență, acest braț destul de strâns trupa aici ascultă mișcările musculare care sunt apoi mapate în software-ul pentru laptop Colton pe deasupra aici care a avut iTunes și că melodie deja coada de așteptare în sus. Mai degrabă decât să mă demoing aceasta, Colton a fost în laborator în mod clar toată săptămâna printr-o demonstrație gata pentru un voluntar curajos. Dacă cineva ar dori să vină pe up-- a văzut mâna întâi. Haide sus. [00:01:09] Bine. Și care este numele tău? [00:01:13] Audiența: Uh, Maria. [00:01:14] DAVID J. MALAN: Maria, mă bucur să te văd. Vino pe aici. Permiteți-mi să vă prezint Colton. Colton, aceasta este Maria. [00:01:21] COLTON: Bună, mă bucur să te cunosc. [00:01:23] DAVID J. MALAN: Toate Bine, deci primul pas, suntem O să ai pune acest pe antebratul astfel că este destul de strâns până aproape de cot. Și între timp, să aibă a pus pe sticla noastră Google și ne vom amesteca tehnologii astăzi. [00:01:33] COLTON: În primul rând va trebui să cârlig acest lucru în lucruri. [00:01:36] DAVID J. MALAN: OK. De fapt, să pună brațul drept aproape de acest cablu în calitate de posibil astfel încât să putem sincroniza mai întâi în sus. [00:01:41] COLTON: Hai să facem acest lucru. [00:01:42] DAVID J. MALAN: Și între timp, așa că toată lumea poate obține dintr-o ochire mai aproape, vom arunca camera lui Andrew pe ecran acolo. Deci, avem un cablu USB care este fiind conectat la banderola Maria. Și să-mi arunce de ecran Colton lui pe proiector următor. [00:02:00] Deci, Colton este înregistrarea dispozitivului acum ca un Myo conectat la acest cablu. Și acum, ce Maria de gând să faci momentan se plimba de fapt prin treptele de etalonare și să învețe software-ul cum mușchii ei răspund atunci când ea face anumite pre-definite gesturi care software-ul înțelege. Dacă doriți să mergeți în fața ecranului. OK, mai încearcă. [00:02:30] COLTON: Du-te ca aceasta. Și așa. Și tot drumul spre dreapta. Du-te înapoi. [00:02:35] DAVID J. MALAN: OK. Diferit perspectivă. Nu e de tine. Ne-E. [00:02:40] MARIA: OK. DAVID J. MALAN: Nu. Să ne mișcăm mai mare, astfel că este mai aproape de cot, sau chiar mai stricte. Bine. [00:02:52] Aici vom merge. Acest lucru ar fi un moment bun pentru CS52X. Acolo mergem. [00:02:57] Foarte frumos. OK. Degetul mare pentru a pinky. [00:03:02] Foarte frumos. Spread degetele. Bun. Val dreapta. Este curios arată vă cu hand-- stângă [00:03:17] COLTON: Da, e ciudat. DAVID J. MALAN: Wave la dreapta și merge mai departe. Fast forward pentru a sări peste sau următor. Asta-i în regulă drept Wave. [00:03:25] MARIA: Eu don't-- aștepta. [00:03:26] DAVID J. MALAN: Aveți nevoie de ajutor? [00:03:28] COLTON: Deci, te duci așa. MARIA: E de cotitură alt lucru, totuși. COLTON: Este. DAVID J. MALAN: Da, nu știu de ce te arată un leftie. COLTON: De ce nu try-- doar încercați să mergi așa. [00:03:38] DAVID J. MALAN: Nu? Poate ajunge la brațul tău un pic mai drept și să-l mai abruptă ca aceasta. Da, OK, haide. [00:03:48] MARIA: Îmi pare rău. DAVID J. MALAN: Nu e vina ta. COLTON: E bine. DAVID J. MALAN: Bine. Well-- [00:03:56] MARIA: Ar trebui să sari peste asta, atunci? DAVID J. MALAN: Da, hai l-ai lăsat pe cârlig. Deci, dacă cineva ar dori să facă un proiect final folosirea acestui margine de tăiere hardware, s-ar putea realiza doar ia un pic sa va obisnuiti cu. Și asta: realitatea este aceasta este, de fapt, foarte sângerare margine. [00:04:10] Aceasta este ceea ce se numește kit-ul de dezvoltator, care este menit să fie, în esență, o eliberare de pre astfel încât oamenii pot face exact astea-- lupta cu ea, figura cum corpurile oamenilor de lucru cu tehnologia. Deci, dacă vrei după aceea, după curs, putem lăsa să vină și să ia o altă lovitură de cuțit la el. Dar în caz contrar, o rundă de aplauze, în cazul în care am putea, de Maria pentru că a venit pe sus. [00:04:26] MARIA: Vă mulțumesc. [00:04:28] DAVID J. MALAN: Mulțumesc. Vom atârnă pe aceasta, dar vom da Tu-- ce zici de o minge de stres aici? Oh, si-- if-- da, mulțumesc. Bine. Deci, pentru curioși, dacă ai fi familiarizat cu alegerea de sunet că ne-am făcut acolo mai devreme, un TV uimitor arată că ar trebui absolut fie pe Netflix, ma uit la chef Este aceasta o aici. [00:04:51] SPEAKER 1: Doamnelor și domnilor, un magician pe nume Josh. [00:05:04] DAVID J. MALAN: Si se pare, e un lucru pentru mine de text în timpul curs acum. Mi se spune că Maria a avut ieri o zi de naștere. Atât de fericit ziua de nastere de la CS50 la Maria la fel de bine. [00:05:18] Deci, este posibil să fi citit în luna recent că acest domnilor aici, Steve Ballmer, care a fost de fapt clasă de 1977 la fotbal, recent pensionat pentru Microsoft. A fost un student aici, apoi câțiva ani mai târziu sa trezit la Stanford Business School atunci când a primit un telefon apel de la un prieten de-al său care a trăit pe hol de la el aici la Harvard. Numele respectivului prieten a fost Bill Gates, iar la momentul respectiv, el a fost încercarea de a recruta Steve a fi prima persoana de afaceri, într-adevăr, la o companie mica nume Microsoft. [00:05:45] O scurtă poveste lungă, Steve a fost în cele din urmă a câștigat peste, s-au alăturat Microsoft, atunci când a avut doar 30 de angajați. Și de timp el retras destul de recent, compania a avut 100.000 de angajati în ultimii câțiva ani. Și astfel un site cunoscut sub numele de acostament pregătit acest tribut pe video pe care le-am gândit să comun, care vă oferă un sentiment de cat de mult energie Steve aduce la orice prezentare dă. [VIDEO PLAYBACK] -Microsoft E ca un al patrulea copil. Copiii fac ieși din casă. În acest caz, cred Plec din casa. Hei Bill, whazzap? [00:06:23] -Wazzap? [00:06:24] Hei, wazzap? Am primit un oportunitate enormă. Și Bill ne-a dat această ocazie. Vreau să le mulțumesc Bill pentru asta. Vreau să prea. Ritmul de inovare nu este de gând să încetinească. [00:06:42] Este mergi la a lua mai repede și mai repede. Ar putea fi câteva concurenți care sunt, din păcate, eliminate! [00:06:54] Îmi place această companie. Da! Eu sunt un PC, si-mi place aceasta companie! [00:07:08] Dezvoltatori, dezvoltatori, dezvoltatori, dezvoltatori, dezvoltatori, dezvoltatori, dezvoltatori, dezvoltatorii. Da! Dezvoltatori web! [00:07:19] Dezvoltatori web! Dezvoltatori web! Ascultați ce altceva te ajunge la nici un cost suplimentar! [00:07:28] Executivul MS-DOS, o programare calandru, un morman carte, un pad notă, un ceas, un panou de control. Si, îți vine să crezi? Reversie! [00:07:35] Arde-le pe CD-ul! Le publica în MSN! Le-ai ne la prieteni! [00:07:40] Toate cu un singur click! O Microsoft, o strategie, o team-- concentrat, disciplinat, profesionist, și expert în tot ceea ce facem. Permiteți-mi să folosesc o linie de la un film vechi. [00:07:52] Relațiile sunt ca rechinii. Ei se mișcă înainte sau mor. Cred că de fapt tech companiile sunt aceleași. [00:08:01] [END VIDEO PLAYBACK] DAVID J. MALAN: Deci, suntem atât de încântați să anunțăm că Steve va fi alături de noi aici, în CS50 miercurea viitoare la locul și ora aici de obicei. Spațiu va fi probabil limitat. Și astfel să ni se alăture în persoană, vă rog cap de astăzi sau la scurt timp după aceea la cs50.harvard.edu/register. [00:08:22] Și vom urmări cu Marți confirmând pete. Bucurați-vă de faptul că următorul Miercuri în timpul prelegere în CS50. Acum, în altă ordine de idei, sa întâmplat să întâlni acest lucru în Crimson doar ieri. [00:08:34] Se pare că unul dintre angajații lui CS50 și cel puțin una dintre studentele CS50 lui este în curs de desfășurare pentru UC presedinte si vice-presedinte, care ma adus înapoi pentru propriile mele zile în urmă atunci când am pierdut alegerile UC mizerabil. Dar linia de argint în care este Intotdeauna mi-am spun povestea este că unul din Sunt sigur mai multe motive am pierdut electorală a fost o lipsă totală de un talent de a vorbi in public. Și așa destul de sincer aceasta, ma condus, că experiența Cred că anul meu de juniori, să semneze de fapt pentru Harvard Computer Society, care este grupul din campus care deține diverse discuții tehnice și alte lucruri. Și am preluat de predare a acestora seminarii și, prin urmare, a avut o oportunitate, o oportunitate minunata, pentru a începe să lucreze la exact acest lucru. Dar, de asemenea, am avut o oportunitate în timpul acestei experiențe să mă învețe tot mai mult HTML. Și așa am amânat aseară de Cautati prin site-ul pe bază de HTML Am făcut în 1997 ca, '98, pentru mea campanie care arata ca acest lucru aici. Știu. [00:09:29] Because-- și, bineînțeles, aviz această decizie de design uimitor în 1998 sau fleacuri. Primul lucru pe care doriți utilizatori a face pe vizitarea site-ul tau este de a avea de a faceți clic pe un alt link doar pentru a introduce site-ul dvs. aici cu călugărul în spatele ca o perdea învăluită în cazul în care se pare că platforma mea de campanie a fost. Și aceasta este tot ce veți obține azi e doar un screenshot. Dar am citit prin, cum ar fi, postere campaniei mele noaptea trecută și platforma mea. [00:09:50] Și am fost atât de supărat la momentul respectiv. Platforma mea asta-- a fost interesant. Așa că m-am calmat de atunci. Dar într-o zi, eu va rula din nou și sperăm că mai bine de data asta. [00:10:03] Astfel HTML, această limbă în care am făcut că in-- veți face în curând mult more-- este ceva ce am fost vorbim despre de întârziere și în mare măsură luand de la sine acum că ne-am mutat la alte limbi. Dar să ne oprim o clipă și pune unele dintre aceste lucruri în context. Deci, într-o propoziție, ceea ce este HTML? [00:10:18] Sau, ceea ce este utilizat pentru? Oricine? Da. [00:10:20] Audiența: marcare pentru site-uri web. DAVID J. MALAN: Marcaj pentru site-ul. Deci, este un limbaj de markup care vă permite să structureze o pagină web. În afara merge până aici, titlu merge aici, corpul se duce aici. Acest lucru este ingrosate, aceasta este italics-- acest tip de detaliu. [00:10:33] OK, bine. Deci, CSS Tu-- și eu execută a luat unele libertăți acolo cu bold-italice, deoarece suprafața si care este mai bine pusă în aplicare cu aceasta. CSS ce este--? Spune într-o propoziție. Oricine la toate. Da. [00:10:46] Audiența: Ornamente și chestii, cum ar fi modul de a proiecta. DAVID J. MALAN: OK, bine. Ornamente pe care le permit de a proiecta sau stiliza aceasta cu lucruri cum ar fi aldine și cursive și culori și, de asemenea, mai bine poziționare cu zimți de elemente. Într-un fel vă permite să luați lucrurile de ultimul kilometru, astfel că, dacă, de exemplu, în Pset7, este posibil să fi observat pe dumneavoastră pagina de portofoliu dacă ești în acest moment deja că o tabelă implicit pe care le face pentru a arăta deținerea de acțiuni ale utilizatorului și bani, probabil, pare destul de hidos în mod implicit, cu nici un spațiu alb. Totul e un fel de ticsit împreună în rânduri și coloane. [00:11:18] Ei bine, cu un pic de CSS, așa cum s-ar putea realiza, poti sa misti de fapt, că și să-l ceva mult mai familiar și mai mult mai frumos să se uite la. Deci, este vorba despre CSS stilizare de site-uri web. Dar apoi am introdus încă un alt limbă, PHP, ceea ce ne permite să facem ce? [00:11:36] Să faci ce? Oricine. Trebuie să se aventureze dincolo de primul cuplu rânduri. Da. [00:11:40] Audiența: generarea de conținut dinamic. DAVID J. MALAN: Perfect. Generarea de conținut dinamic. Și puteți face acest lucru în orice număr de limbi. Se întâmplă să utilizați PHP pentru că este în parte atât de asemănătoare cu sintaxa C. [00:11:50] Dar PHP face exact acest lucru. Acesta vă permite să genera dinamic ieșire. Și o parte din producție ar putea fi HTML, așa cum ne-am făcut de obicei. Și este, de asemenea, pentru că este un limbaj de programare, este mecanismul prin care putem vorbi de baze de date. [00:12:03] Și putem face interogări la alte servere, cum ar fi Yahoos și programatic face nimic într-adevăr că s-ar putea altfel doresc să oblige un computer pentru a face. Deci, PHP ne permite să înceapă scoate dinamic conținutul. Deci, prin această logică, nu am avut un site web dinamic din nou în 1998. [00:12:16] A fost doar o pagină web static. Conținut mea a trebuit să fie schimbat de către manual cu gedit sau ceva echivalent. Dar PHP este ceea ce am folosit sau ar fi putut folosi, mai degrabă, pentru ceva de genul Site-ul Frosh AI, care trebuia sa aiba înregistrări și gestiona o listă de lucruri pe care users-- sunt de fapt schimbă peste timp, chiar dacă se întâmplă pentru a utiliza Perl, un alt limbă la momentul respectiv. [00:12:35] Și apoi în cele din urmă, am introdus SQL-- Structured Query Language. Deci, încă o altă limbă care este utilizat pentru ce? Folosit pentru ce? Putem să se aventureze pe slight-- OK, nu mergem pentru a ajunge mult mai departe decât orchestra de aici. Audiența: Este un protocol folosit pentru a vorbi la bazele de date. DAVID J. MALAN: Un protocol folosit pentru a vorbi la bazele de date. Lasă-mă să tweak. Este un limbaj natural folosit pentru a vorbi cu databases-- selectează și inserții și șterge și actualizări și efectiv chiar mai multe caracteristici care noi nici măcar nu au scufundat în dar poate doriți să explore-- avea pentru a explora pentru, să zicem, un proiect final. Deci, există aceste diverse piese. [00:13:09] Și sperăm Pset7, chiar dacă caietul de sarcini este destul de lung, este în mod deliberat mult timp pentru a vă plimba prin modul în care aceste lucruri pot toate fi introdus împreună. Acum, luni, noi a introdus ultima noastră limbă că vom face introducerea în mod oficial în course-- care este, JavaScript. Acest lucru, cum ar fi PHP, este un limbaj interpretat. [00:13:25] Dar o distincție cheie Am propus luni este faptul că în timp ce PHP este de executare sau fiind interpretate pe server, care în acest caz este aparatul CS50, sau ar putea fi unele web comerciale server de pe internet, JavaScript general este un limbaj care se execută partea de client Nu server de side-- atât în ​​browser-ul. Care este de a spune, la fel ca atunci când am deschis până Facebook cod sursă și a găsit toate din aceste fișiere Js, implicația a fost că atunci când vizitați Facebook sau mai site-uri web în aceste zile, veți obține nu numai HTML, nu numai CSS, dar o grămadă de activarea JavaScript- cod de multe ori în formă de fișiere Js. Și apoi e browser-- opinia ta Mac sau PC-- care execută acel cod. [00:14:03] Dar browser-ul dvs. se execută. Vă puteți gândi într-un fel de nisip. Astfel încât codul JavaScript nu ar trebui să fie posibilitatea de a șterge fișierele de pe calculatorul dumneavoastră. Nu ar trebui să fie în măsură să trimite e-mailuri în numele dumneavoastră. Tipul tau de browser de restricționează ce poti face cu ea. [00:14:17] Deci, în acest sens, e un pic mai puțin puternic, poate, decât C. Dar poate JavaScript, ca o deoparte, să fie utilizate pe server, deși vom tind să nu pentru a vorbi despre ea în acest context. Deci, acum hai lega acestea împreună. O săptămână în plus în urmă, am prezentat unele HTML pe left-- pagina web foarte plictisitor. [00:14:34] Doar spune salut lume. Și apoi am propus, pe de chiar putem fel de fura idei din discuția noastră de structuri de date în C și cred despre modul în care acest ierarhică limbaj de marcare pe stânga ar putea fi trase sau puse în aplicare în memorie ca o structură de arbore real cu noduri și indicii și acele tipuri de detalii. In partea dreapta, numim că un document DOM-- Object Model-- care este doar un mod fantezist de a spune copac. [00:14:56] Acum, de ce este acest lucru util pentru cred că de ea în acest fel? Deoarece acum cu JavaScript, pentru că avem cod care ajunge să joace în acest mediu, HTML real pe care-i a fost trimis la browser deja și are deja a fost încărcat în memorie de către Browser-ul într-un copac în a computerului RAM ca aceasta, putem folosi JavaScript pentru a traversa de fapt sau de mers pe jos sau de căutare sau a schimba acel copac DOM oricum ne-o dorim. Deci, în fapt, dacă credeți că despre facebook.com, dacă folosiți funcția de chat, dacă utilizarea Gmail și funcția Gchat, nimic în cazul în care aveți mesaje care vin din nou și din nou și din nou, aceste mesaje sunt, probabil, cum ar fi, tag LI, tag-uri lista de articole, poate. [00:15:35] Sau poate sunt doar divs care să păstreze apare de fiecare dată când primiți un mesaj instant. Și astfel, asta înseamnă doar ceea ce Facebook sau Google este de a face este în orice moment veți obține o Mesajul de pe server, ele sunt, probabil, folosind JavaScript pentru a adăuga doar un alt nod la acest tree-- un alt nod la acest copac care apoi vizual doar arata ca o nouă linie de text pe ecran. Dar ei inserarea în această structură de date. [00:15:57] Deci, în clase ca CS124 și altele, veți de fapt, scrie mai mult cod împotriva structuri de date, cum ar fi acest lucru. Dar de acum în JavaScript, vom presupune doar avem toate această funcționalitate gratuit de limba în sine. Așa că haideți să ne uităm la un exemplu. [00:16:09] Lasă-mă să deschid un fișier numit form.html. E foarte simplu. Este doar pare ca aceasta. [00:16:15] Nu CSS, nici un gând de estetica. E pur funcțională și se pare că eu sunt solicitând un e-mail, o parolă, parolă din nou, iar apoi o verificare să fie de acord unor termeni și condiții. Ce codul sursă pentru acest Se pare ca este, probabil, ceva s-ar putea ghici cu o pic de gândire acum. Am o etichetă formular aici. [00:16:32] O acțiune este aparent de gând să du-te la un fișier numit register.php. Metoda am de gând să îl utilizați este minim. Și apoi am primit un mesaj câmp al cărui nume este de e-mail. [00:16:40] Am un câmp parolă al cărui nume este parola. Am primit un alt câmp parolă cărui nume este o confirmare oarecum arbitrar. E doar un alt parametru HTTP. [00:16:49] Și apoi ne-am nu am folosit aceste, cu excepția deoarece AI Frosh demo în class-- o casetă de validare, care este doar tip este egal cu cec. Și eu sun acest acord. Așa că am un fel de arbitrar, ci numit în mod convenabil aceste domenii. Așa că acum, atunci când acest formular devine depusă, să vedem ce se întâmplă. Dacă fac malan@harvard.edu, Voi face o parolă de purpuriu. Voi face o parolă de nimic. Să nu cooperează. [00:17:10] Și nu voi verifica pe centru. Lasă-mă să faceți clic pe Înregistrare. Și se spune, hm, tu ești înregistrat. Nu chiar. [00:17:16] Dar URL-ul sa schimbat. Deci, această formă a fost lăsat în mod clar să se supună register.php. Dar probabil, eu ar trebui să fie prinderea unele dintre aceste erori. Acum, în Pset7 și unele din exemplele noastre de curs, noi, în general, s-ar imprima un mare mesaj de eroare roșu aici a zis, lipsă numele, sau lipsește parolă. Am făcut asta înainte și ne-am terminat partea de server de detectare a erorilor. [00:17:37] Dar multe site-uri în aceste zile face client de detectare a erorilor din partea în cazul în care URL-ul nu se schimbă. Toată pagina nu reîmprospătare. Veți obține feedback-ul instant de la browser-ul. Poate că ceva nu este în roșu. [00:17:48] Poate că veți obține un pop-up. Dar tu nu pierde timpul trimiterii la server de date care este incomplet. Așa că haideți să vedem cum putem să atinge acea caracteristică la fel de bine. [00:17:56] Lasă-mă să merg la form1.html, care arată la fel. Dar dacă de data asta fac malan@harvard.edu și scriu roșu și eu nu cooperează în continuare dar faceți clic pe Register, observa acum. Nu e cea mai sexy soluția. Cel puțin am prins această eroare. Și l-am folosit alerta Funcția în JavaScript-- care suntem folosind doar în clasă. În general, nu trebuie să utilizați acest deoarece se poate ajunge foarte repede de control. Dar parolele nu se potrivesc este eroarea. [00:18:19] Lasă-mă să merg mai departe și faceți clic pe OK. Dar ceea ce Takeaway cheie aici este faptul că URL-ul nu sa schimbat. Pierdem așa că nu am deranjat timpul serverului cere o o intrebare pe care am putea avea a dat seama răspunsul la mine. [00:18:30] Iar utilizatorul, chiar dacă vorbit despre acest mai mult decât Consumatorului de gând să se gândească la acest lucru, va avea feedback-ul instant. Nu e nici o latenta cu conectivitatea de rețea. Deci, să ne uităm la acest cod sursă. [00:18:40] Arată Form1.html similară structural aici. Forma este, de fapt, același lucru. Dar să vedem ce am făcut aici. Și există diferite moduri de a face acest lucru. Și am făcut cea mai dreaptă urmăritor, dar nu modul cel mai elegant încă. Am o etichetă scenariu. Apoi m-am apel document.getElementById ("înregistrare"). Și am păstra ca valoare în formă, o variabilă. [00:19:04] Deci, ce am făcut? Vă puteți gândi document.getElementById ca fiind o funcție specială care JavaScript vă oferă că mâinile literalmente tine un pointer la unul din nodurile sau dreptunghiuri în acest copac. Deci, acum că e sub ce formă variabilă nostru în JavaScript este, de fapt îndreptat la. [00:19:21] Deci, acum sintaxa este diferită de C. Dar noi facem câteva lucruri aici. Unul, acesta este un pic ciudat Cautati, cu siguranță față de C. Dar uita-te la linia 35. Deci, pe form.onsubmit stânga. Amintiti-va ca onsubmit este ca un câmp într-un struct. Dacă credeți că a variabilei formă este doar a fi un struct C, aceasta ar putea avea unele domenii. [00:19:42] Înapoi în a doua zi, am avut nume de studenți, ID-uri, case, cele fel de domenii. Gândește-te de onsubmit ca un alt domeniu. Dar este un domeniu special, deoarece Browser-ul este preprogramat sa se astepte .onsubmit să nu fie o valoare cum ar fi un număr sau șir de caractere, dar pentru a fi de fapt o funcție sau adresa unei funcții în memoria calculatorului. [00:20:02] Și într-adevăr, asta e ceea ce acest cuvânt cheie aici nu. Acest lucru spune, da-mi o nouă funcție. Dar ceea ce este numele său Va fi, aparent? [00:20:09] Gândire înapoi până luni. Care este numele acestei Funcția bazat pe această sintaxă? Nu, vreau să spun, nu e clar nici un nume associated-- siguranță nu în ceea ce am evidențiat aici. [00:20:21] Dar asta e de fapt OK. Aceasta este o funcție anonimă, sau o Funcția lambda ca unii s-ar putea numi. Și asta înseamnă doar este încă o funcție. E doar, nu se poate spune pe nume. Dar asta e în regulă. Pentru că din nou, browser-ul a fost preprogramat de companii precum Google sau Microsoft sau Mozilla sau alte persoane la știu doar că în cazul în câmpul .onsubmit în interiorul unui element de formular are valoare, se tratează ca o function-- un pointer funcție, dacă vreți. Și se numesc, atunci când este prezentat formularul. [00:20:46] Deci, ce cod ar trebui să fie executat atunci când se depune formularul? Aparent, totul în interiorul a gulerului buclat. Și acesta este doar stilistică. [00:20:53] Ai putea face acest lucru ca avem tendința de a face din CS50. Dar în JavaScript, cei mai mulți oameni tind să-l păstrați pe aceeași linie doar pentru că este mult mai clar asociată cu această funcție de cuvinte cheie. Deci, acum ce fac? [00:21:03] În cazul în care form.email.value egal la egal la egal șir gol sau nimic, aici e o alertă în cazul în care am de gând să spun, trebuie să furnizați adresa ta de email, și apoi să se întoarcă false. Și e că fals întoarcere că previne forma de a fi prezentate. Între timp, în cazul în care valoarea parolei este gol, am de gând să țipe la utilizator și spun, trebuie să furnizați o parolă. [00:21:21] Între timp lucrurile devin un pic crescator aici. În cazul în care form.password.value nu form.confirmation.value egal, pe de altă teren, tipa la utilizatorul că parolele nu se potrivesc în care acestea nu a făcut în urmă o clipă. Și apoi asta e un puțin mai sexy pentru că am Știu că știam că conceptual verificat este numele o casetă de selectare lui. [00:21:40] Deci, eu pot folosi doar o exclamație Punct de spus dacă verificarea nu este checked-- e Boolean valoare, adevărate sau false-- Voi țipa la utilizator pentru acest motiv. În caz contrar, dacă vom obține prin toate aceste condiții, hai să se întoarcă adevărat. Să formularul fi prezentate. Și acest lucru se va întâmpla atunci. [00:21:56] Să scrieți în roșu. Să verificăm centru, faceți clic pe Register. Și acum mă duc până la destinație. Acum, nu exista nici o bază de date acolo. Nu e nimic interesant în register.php. Aveam nevoie de ceva pentru a vorbi de fapt la. Așa că lasă-mă întrerupe, aici. Orice întrebări cu privire la ceea ce tocmai am făcut sau ce o parte din acest nou sintaxă este? OK, da? [00:22:17] Audiența: Deci, orice casetă este în mod automat un Boolean. Nu trebuie să-l declare ca asta. [00:22:21] DAVID J. MALAN: Corect. Orice casetă care este trimis la tine de la un formular HTML pentru codul JavaScript vor fi tratate, da, ca Boolean value-- adevărat sau fals. E o întrebare bună. Întrucât celelalte valori, de Desigur, au fost text, siruri de caractere AKA. [00:22:36] Bine, asa ca lasa-ma înapoi un pic mai departe. Care a fost ideea asta? Doar pentru a fi clar. Cum ar fi, știm deja, chiar de la Pset7 și chiar de la curs de săptămâna trecută exemple, pe care le putem verifica în mod evident, $ _GET $ _POST Vedea dacă utilizatorul dă-ne o valoare gol. Amintiți-vă funcția de gol în PHP. [00:22:54] Deci, doar pentru a fi clar, ceea ce este un motiv am putea, de asemenea, vreau să fac acest lucru verificarea erorilor în interiorul a browser-ului? Care este motivația aici? Da. [00:23:06] Audiența: Mai repede, iar tu nu faci trimite datele inutile la server. DAVID J. MALAN: Bun. E mai rapid. Tu nu trimiteți inutil date către server. [00:23:12] Astfel încât să obțineți înapoi o mai răspuns imediat. Și, în ansamblu, utilizatorul experiență este mai bine. Gândiți-vă la alternativa. [00:23:17] În cazul în care pentru Gmail-- și a fost în urmă cu mulți ani. Să presupunem că ai un nou e-mail Gmail cont, dar singura modalitate prin pentru a vedea care este de a, cum ar fi, reîncărcați întreaga pagină. Sau să presupunem că faceți clic pe un link pentru a citi un e-mail. [00:23:29] Totul trebuie să reîncărcați astfel pe care le puteți vedea e-mail. Sau Facebook-- primiți un mesaj de discuții. Tu nu-l vezi până când nu reîncărcați pagina sau faceți clic pe unele link. [00:23:36] Cum ar fi, acest lucru ar fi un teribil experiență de utilizator enervant. Și aceasta este ceea ce a fost ca, în mod clar, înapoi, atunci când am fugit de UC iar pe internet a fost mult mai puțin dinamic și JavaScript nu a fost la fel de popularizat așa cum este acum. Și lucrurile devin mult mai dinamic și mult mai mult partea de client în acest sens. [00:23:49] Dar există o captură aici, și aceasta este un fel de un Te-am prins enervant. Doar pentru că ai adăuga partea de client detectare ca acest lucru nu înseamnă puteți sau ar trebui să abandoneze detectare partea de server. În esență, doriți să puneți dumneavoastră verificarea erorilor în ambele locuri. Pentru că ceea ce a fost o a lecției învățate din articol am citit câteva fragmente din acest stupid CMS system-- Content Management System-- care a fost punerea în aplicare a sistemului său de autentificare, autentificare sale prin ce mecanism? JavaScript. [00:24:20] Audiența: JavaScript. DAVID J. MALAN: JavaScript, exact, nu? A fost folosind JavaScript. Și literalmente, voi avea a jucat un pic, probabil, cu inspectorul Chrome. Și dacă pot să-l găsesc, să inspecteze elementul. [00:24:30] Lasă-mă să merg pe să fac toate opțiunile Chrome. Și acest lucru este cât de ușor este să dezactiva JavaScript într-un browser. Verifica, nu mai mult JavaScript. [00:24:38] Deci, în echitate, o mulțime a benzii aceste zile este doar de gând să rupă pentru că Gmail și alte sites-- Facebook-- presupune că JavaScript este activat. Dar, dacă faci ceva stupid ca doar validarea de intrare utilizatori și o verificare pentru erori pe partea de client, un adversar ar putea face cu ușurință acest lucru. Și apoi chiar inteligentă adversar ca voi acum ar putea folosi Telnet sau Curl sau comenzi de linie de comandă doar și de fapt trimite mesaje catre server care în mod similar, nu sunt verificate de eroare. [00:25:05] Deci, aceasta este mai mult o decizie interfața cu utilizatorul decât este un real tehnic improvement-- de punere în aplicare partea de client ceva de genul asta. Deci, acum o privire rapidă, dar apoi Voi amâna la plimbare on-line prin intermediul pentru asta. În formă de două, de fapt, am trecut prin și curățat codul un pic. Dar permiteți-mi să amâne pentru o din videoclipuri noi vom probabil embed în Pset8 care arată doar o sintaxă similară folosind o bibliotecă numită jQuery, care este un super, super- bibliotecă populară în JavaScript ca sincer cei mai mulți oameni utilizați doar în aceste zile și chiar confunda ca ființă în sine JavaScript. [00:25:37] Și tinde să implice unele semne dolar și cuvintele cheie, cum ar fi documente în paranteze aici. Dar, din nou, lasă-mă să amâne până la unele tutoriale mai lent on-line mai degrabă decât a lua legat în doar sintaxă. Să trecem la ceva un pic mai rece în ceea ce privește cererile de acest lucru. [00:25:50] Deci, în special, lasă-mă să merg înainte și să se deschidă această aici. Haide. Acolo mergem. [00:25:59] Lasă-mă să deschid această imagine aici. Complicată în mod inutil Cautati, dar ea descrie o tehnică numită AJAX-- Asynchronous JavaScript și XML, în cazul în care X pentru XML este de fapt nu mai într-adevăr folosite. Ea tinde să folosească ceva altfel numit JSON. [00:26:13] Dar aici este modul în care ceva de genul Google Maps sau Google Earth funcționează. Să încercăm acest lucru pe zbor, de fapt. Lasă-mă să mergeți mai departe și deschide Chrome pe browser-ul meu. [00:26:21] Și lasă-mă să merg în, spune, maps.google.com. Și, de fapt, dacă ești bătrân suficient să ne amintim ceea ce, cum ar fi, MapQuest a fost ca pe vremuri, și poate că ei încă mai lucrează ca aceasta. Când ați folosit pentru a căuta something-- 33 Oxford Street, Cambridge, Mass, hai sa facem asta: te ar fi de fapt, dacă a vrut să deplasare în sus și în jos, la stânga și la dreapta, v-ar arata ca un sageata mare pe partea de sus, și-l v-ar arăta un alt cadru a hărții aici. Sau v-ar faceți clic pe stânga și tu ar merge pe aici, sau un alt faceți clic pe și v-ar trece peste aici. Dar, în loc acestea zile, desigur doar ia acordat pentru că putem merge în jurul valorii de Cambridge destul de repede doar făcând clic și trăgând. Dar observați că sunt niște probleme. [00:26:59] Dacă fac acest lucru suficient de repede, ceea ce pare să se întâmple ca am trageți un pic prea repede pentru computer pentru a ține pasul? Ce vezi? Da. [00:27:07] Audiența: Pixelii nu refresh. DAVID J. MALAN: pixeli nu refresh. Nu e actually-- și tu ar putea vedea acest lucru, de fapt, dacă te uiți on-line și pauză aceasta sau de fapt încetinește lucrurile jos pentru once-- veți vedea că există dale, grinzi, sau dreptunghiuri care lipsesc de pe hartă până la o fracțiune de secundă mai târziu, mai multe date, mai multe fotografii de fapt apar pe ecran. Și, de fapt, dacă facem acest lucru uitandu-te până Chrome's-- să zicem, Chrome-- Să vedem. Noi nu putem face asta. [00:27:31] Oh, Hopa. Să deschidem maps.google.com. Permiteți-mi să fac fereastra mare din nou. [00:27:36] Du-te înapoi la 33 Oxford Street. Care a fost site-ul am fost la recent? Am avut această, cum ar fi, declama privat pentru mă că aș mesaj atunci instant nici un prieten care a fost on-line care a vrut să-l audă. E unele site-ul. Cred că e atât de Comcast-- o foarte mare ISP american. Puteți, atunci când vă înscrieți pentru nou cablu serviciu modem sau de servicii TV prin cablu, ei au o forma foarte rezonabil în cazul în care vă întreb pentru adresa. Și au acest uimitor facilitate numita completă auto, cum ar fi Google, care începe să se umple în răspunsul la întrebarea ta. [00:28:04] Problema este, o fac complet auto pe primele lucruri pe care le tastați. Deci, dacă începeți să tastați în 33 ea, vă va arăta literalmente fiecare casă în America, care începe cu numărul 33 înainte de a continua să se așteaptă să tastați mai mult. Deci, dacă tastați 33 Oxford, apoi vă arată fiecare stradă în America, care are 33 de Oxford în numele său, indiferent de oraș care vă aflați. [00:28:25] Și apoi continuați să tastați. Și, în cele din urmă, ea își dă seama că ei nu fac serviciu de oferta pentru casa ta, în Cambridge sau ceva de genul asta. Dar ideea este, aceasta este cea mai punerea în aplicare a asinine auto a finaliza vreodată. [00:28:34] Și Mă duc off pe această tangentă din nou. Dar există modalități bune la folosesc JavaScript și căile rele. Și asta nu e neaparat cel mai bun. [00:28:40] Dar punctul de aici, înainte de aceasta tirada, a fost de a deschide posibilități aici și să deschidă instrumente de dezvoltare, așa cum ne-am încurajat înainte, și pentru a viziona rețelei Fila cum am faceți clic pe foarte repede. Și observați o grămadă a primi cereri sa întâmplat. Toate acest lucru sa întâmplat de când am târât. [00:28:57] Și, cel mai probabil, într-adevăr, o mulțime de aceste rânduri acum sunt de imagine JPEG slash Tipuri MIME sau tipuri de conținut. Asta pentru că ceea ce face crom de fiecare dată când faceți clic și glisați, faceți clic pe și trageți, este este realizarea, oh, I nevoie pentru a merge cere Google pentru țiglă pe harta care sa terminat aici, descarcati-l repede prin HTTP, și apoi adăugați-l la așa-numitele DOM pentru browserele web în copac memorie Reprezentarea astfel încât utilizatorul, mă, vede că țiglă actualizat. Și acest lucru este din cauza o tehnica numita AJAX. Înapoi în a doua zi, într-adevăr a fost cazul că, dacă a vrut sa schimbe ceea ce este pe ecran, va trebui să faceți clic în sus, în jos, la stânga, dreapta. Și apoi o nouă pagină va deschide. Dar aceste zile, totul este mult mai dinamic. Se întâmplă în modul în care oamenii ar fi Sper că de fapt ar fi interactiv. Și se realizează acest lucru prin intermediul unei tehnici numită AJAX, care este, probabil, cel mai bine explicat printr-un exemplu. În primul rând, permiteți-mi să mergeți mai departe și deschide un fișier numit quote.php în Codul de distribuție de astăzi. [00:29:53] Și apoi lasă-mă să fac Hopa symbol--. Lasă-mă să fac simbol = GOOG pentru doar câteva stoc. Sau, de fapt, să facem unul din PSET gratuit. Enter. [00:30:05] Și acum observați ce mă întorc. Deci, acesta este un adevărat fișier scurt PHP pe care am a scris că pur și simplu împrumută cod din funcția de căutare Pset7 lui și scuipă folosirea acestui acoladă și citate și notație colon, aparent, stocul actual de preț pentru Firma pe care le trece în via GET. Deci, acest lucru este diferit de la cele mai multe din ceea ce ne-am făcut în același anunț eu sunt literalmente scuipa ceea ce arata ca cod JavaScript. [00:30:27] De fapt, acesta este un obiect JavaScript. De fapt, doar pentru a fi mai clar, JavaScript Object Notation-- JSON-- este doar un mod fantezist de a spune că voi poate reprezenta date în JavaScript mult ca tine poate în PHP folosind perechi de valori-cheie. Deci, dacă am vrut să o declare o variabilă în JavaScript a reprezintă Zamyla, pentru instance-- o struct pentru Zamyla-- și vom numi elev, această variabilă. ID-ul ei este unul, casa este Winthrop, iar numele este Zamyla. [00:30:53] Dar eu pot avea, de asemenea, o serie de obiecte. Deci, dacă de fapt am vrut să am o matrice în JavaScript care conține mai multe astfel de obiecte, acest timp reprezentând personal, S-ar putea avea aceste trei bucăți de cod din spate la spate în spate pentru acestea trei foști membri ai personalului. Deci, sintaxa, destul de similar cu both-- la PHP. Dar acest lucru este deosebit JavaScript. E notație obiect. Deci, ce este acest util pentru? [00:31:17] Dacă aș scrie cod care scuipă JSON-- JavaScript Object Notation-- chestia asta Se pare ca aceasta sau chestia asta Se pare ca structura Zamyla lui, Eu pot folosi de fapt, acest în programele scriu. Lasă-mă să merg la ajax0.html. Și acest too-- nu de mult crezut dat de estetica. Dar priviți ce se întâmplă. [00:31:34] Lasă-mă să merg mai departe și tastați gratis aici. Faceți clic primi citat. Și observați URL-ul nu sa schimbat. Dar am primit un pop-up cu aparent de azi penny prețul de vînzare de 0.15 dolari. Deci, nu tot așa de rău. Dar diferența este că într-un fel, aceste date s-au întors la mine direct. Dar să facem un pas spre ceva mai familiar. În versiunea una din asta, lasă-mă să tip liber din nou, faceți clic pe Obțineți citat, și now-- oh, aceasta a fost de fapt versiunea jQuery. Așa că haideți să mine-- nu am făcut- fast-forward destul de departe. Lasă-mă să merg la versiunea doi, care este în cazul în care mi-am dorit. Observați ce am făcut aici. Am un web page-- un super- versiune simpla a oricărei pagini web s-ar putea folosi de astazi cu un câmp de text aici pentru liberă și apoi se pare că doar text. [00:32:14] Aceasta nu este o formă aici, se pare. Dar dacă faceți click primi citat, observați pagina mea de web este pe cale să se schimbe ca și cum am tocmai am primit un nou mesaj chat sau ca și cum tocmai m-am mutat hartă și necesare pentru a obține mai multe date adăugat dinamic pe pagina web fără schimbarea URL și utilizatorul experiență obtinerea întreruptă. Într-adevăr, eu sunt încă la exact aceeași ajax2.html place--. [00:32:35] Așa că haideți să ne uităm doar la acest exemplu și a vedea modul în care acest lucru se întâmplă. Lasă-mă să intru în ajax2.html. Și observați formularul de primul. [00:32:44] Aici, eu sunt de cotitură off complet automată. Uneori devine enervant în cazul în care browser-ul încearcă să-ți arăt tot istoricul. Astfel încât să puteți face în HTML de doar că auto a finaliza off. [00:32:53] Am dat acest câmp de text o symbol-- mai degrabă, un ID de simbol. Și acum, aceasta este o caracteristică interesantă. Noi nu am vorbit despre durata, dar vă puteți gândi la asta ca o etichetă paragraf sau div tag-ul. Este ceea ce se numește o în-linie de elemente, care înseamnă că nu va primi un paragraf rupe deasupra și dedesubt. E doar de gând să rămână în linie fără lovind echivalentul a intra. Așa că am dat această bucată de cod HTML care urmează a fi determinat un identificator unic că am sunat arbitrar preț. Și am o butonul Submit. [00:33:21] Deoarece acum cu here-- și acest lucru este Codul de fapt, super-uimitor cât de puțin poti scrie să faci relativ curat lucruri-- observați ce am făcut aici, dacă am derulați până la capul paginii. Am inclus pentru prima dată în capul meu o etichetă script care de fapt face referire la o JavaScript fișier în altă parte. Acest lucru este din partea organizației care scrie jQuery, iar acest lucru este doar oferindu-vă mai târziu Versiunea de bibliotecă lor jQuery. [00:33:42] Deci, aceasta este un fel de ascuțite include în C sau necesită în PHP. Puteți utiliza tag-ul script- cu un atribut sursă. Dar acum propria ta cod este o să fie chiar aici. [00:33:52] Observați Am o funcție numită Citate. Și se pare un pic criptic la prima vedere. Dar să tachineze această afară. Dă-mi o variabilă numită URL. Atribui o literalmente acest șir. Deci, ghilimele simple, ghilimele duble în JavaScript doar dă-mi un șir. Ce face plus? Concatenare. [00:34:08] Deci, aceasta este acum sintaxa jQuery care are un pic Noțiuni de bază utilizate pentru a. Dar acest lucru înseamnă doar du-te adu-mi DOM nod al cărui identificator unic este un simbol. Hashtag acolo înseamnă simbol identificator unic. [00:34:21] Semnul dolar în Parantezele doar să spun, înfășurați acest în jQuery un fel de sos secret, așa te funcționalități suplimentare. Și apoi .val este aparent o funcție, sau, cum se spune acum, o metodă reușită de acest nod că doar îți dă valoarea. Deci, pe scurt, urât și confuz ca acest lucru pare la prima vedere, acest lucru înseamnă doar a lua cu utilizatorul tastat in, pune-l la sfârșitul șirului prin concatenarea ea. Asta e tot. [00:34:43] Deci, acum, ultimele trei rânduri. Puteți stoarce o mulțime de funcționalitate din trei linii. Acest semn dolar, ca o la o parte, este doar o poreclă pentru o variabilă globală special numit literalmente jQuery. [00:34:55] Semn dolar doar pare cool. Deci, comunitatea jQuery doar un fel a folosit-o ca simbol lor speciale. Aceasta nu înseamnă ceea ce înseamnă, în PHP. În JavaScript, semn dolar este la fel ca o literă a alfabetului sau un număr pentru o variabilă. [00:35:07] Puteți să-l avea la fel de nume. Doar pare cool. Deci, comunitatea la adoptat ca pseudonim pentru propria biblioteca lor numit jQuery. [00:35:13] Și e foarte popular. Asa ca JSON este exact asta. Este o funcție care oameni buni la jQuery scris care devine JSON de la o server-- JavaScript Object Notation. Din ceea ce URL-ul se merge pentru a obține aceste informații? Se pare că de la această adresă URL aici. [00:35:27] Și ce ar trebui să facă browser-ul ca Imediat după ce se va întoarce acest răspuns? Și aceasta este magia de AJAX, astfel încât să speak-- JavaScript asincronă în XML. E greu sa vezi cu un astfel de exemplu simplu ca am avut aici. [00:35:41] Dar acest lucru a fost asincron în sensul în care codul meu, atunci când executat trimis un mesaj server pentru a merge adu-mi niște JSON. Și sa întâmplat super rapid că am primit un răspuns. Dar ceea ce este interesant este faptul că acest linie de cod nu a închide calculatorul meu. [00:35:55] N-am văzut o pictogramă de filare. Nu am pierdut capacitatea de a muta mouse-ul meu. Browser-ul meu a fost de fapt foarte bine. [00:36:01] Pentru că modul în care se ocupă de activarea JavaScript- răspuns de la serverul este următoarea. Te înscrii ceea ce ai numi o funcție de apel invers, care înseamnă doar, hei, JavaScript. De îndată ce serverul răspunde cu JSON, va rugam sa sunati această funcție anonim. [00:36:18] Și atunci va rugam sa a trecut în această funcție indiferent șir serverul scuipa ca un argument numit de date. Deci, cu alte cuvinte, dacă Sunt asamblare dinamic o quote.php URL care trece în acest simbol cum ar GRATUIT sau GOOG sau fleacuri, Eu atunci spun JavaScript du-te că adresa URL. Amintiți-vă că browser-ul este de gând să se întoarcă ceva care arata ca am vazut earlier-- aceasta. [00:36:42] Și ce al doilea argument aici pentru a primi JSON spune se numesc această funcție în cazul în care serverul se întoarce fie că este vorba de 10 milisecunde de acum sau 10 secunde de acum. Și, de îndată ce faci, se adaugă prețul de la pagina. Această sintaxă aici doar înseamnă du-te la nodul din copac, acesta unic de identificare este price-- acest interval am văzut mai devreme. [00:37:01] Această metodă numit HTML doar spune, du-te înlocui HTML care este acolo cu data.price. Ce-i data.price? Ei bine, browser-ul, amintesc, mi-a arătat această întoarce. Deci, acestea sunt date. [00:37:14] Și așa e puțin criptic pentru a vedea virgulele aici. Dar, de fapt, lasă-mă să fac asta. Lasă-mă să inserați acest lucru foarte repede în gedit și ai se arăta ca și cum am arătat Structura mai devreme Zamyla lui. [00:37:27] Ce serverul trimite înapoi este un mic obiect care arata ca aceasta. Și așa data.price este doar mi-a dat 0.1515. Deci, o mulțime de mișcare Piese de aici dintr-o dată. [00:37:39] Dar takeaways cheie este că avem această capacitate pentru a face HTTP suplimentare solicitări utilizează JavaScript fără a fi nevoie să reîncărcați pagina. Și apoi putem de fapt schimba pagina web pe zbor. Și se pare că JavaScript și alte limbi pot fi folosite acum nu numai de a evolua pagini web, dar pentru a scrie de fapt software-ul într-un calculator real, nu limitează doar la Chrome sau altele asemenea. [00:38:00] De fapt, if-- Colton, vrei Vrei să ni se alăture din nou aici cu codul de laborator, și Chang precum și? Să mergem mai departe, după ce a vorbit despre funcții anonime și callback și într-adevăr ispiti soarta aici cu un live demo cu sângerare tehnologie de vârf, unul dintre aceste dispozitive Elite mișcare. Acum, acest aparat, rechemare, este un dispozitiv USB pic precum și that-- asta e beautiful-- care se conectează la porturile USB. [00:38:25] Și apoi oferă intrare sub formă de gesturilor umane prin detectarea folosind raze infrarosii, în esență, mișcările de pe brațul tău. Deci, întrucât ceea ce a încercat Maria înainte a fost musculară, senzație de fapt, ceea ce se schimbă brațul tău, acest lucru este în infraroșu pe bază. Deci, este excelentă pentru deplasările în interiorul un fel de sferă de un picior sau cam asa ceva a dispozitivului în sine. [00:38:46] Deci, de ce să nu iau o lovitură de cuțit în această primă? Și să mergem mai departe și arunca te-ai trezit pe tavan aici. Deci să punem laptop Colton de până aici. Avem Andrew pe televizor. Și ce ai vrea să fac mai întâi? [00:39:00] COLTON: Du-te și doar pune-ți mâinile pe tipul ăsta și veți vedea niște sclipici fabulos. [00:39:04] DAVID J. MALAN: Foarte frumos. Acest lucru se întâmplă totul în timp real. OK. Bine, și da. Atât de frumos. Bine, ce altceva putem face? [00:39:15] COLTON: Du-te la ecranul următor și să vedem. [00:39:17] DAVID J. MALAN: În regulă. [00:39:19] COLTON: un joc distractiv pic de în cazul în care veți obține pentru a face roboți. [00:39:21] DAVID J. MALAN: Bine, deci aceasta este mâinile în fals arată-mi ce să fac. COLTON: Da Deci, mergeți mai departe și apuca unul dintre blocurile și pune-l pe partea de sus a corpului, care robot. DAVID J. MALAN: Oh, nu e mâna mea. Oh. OK, adorabil. Așteaptă un minut, OK. Acolo mergem. [00:39:41] COLTON: Am făcut un accident pe. [00:39:43] DAVID J. MALAN: OK, voi primi acest tip. La naiba! Când am fost practicarea acestui ultim noapte, știi ce transferată acest lucru în? [00:39:51] Ca aceasta. OK. Una următor? [00:39:55] COLTON: Sigur. [00:39:56] DAVID J. MALAN: Bine, și nu există un al treilea. Bine. COLTON: Și în asta, veți obține sa-- DAVID J. MALAN: Oh, asta e frumos. COLTON: --yeah, alege APT această floare. DAVID J. MALAN: OK. Nu? Pierdute. [00:40:14] COLTON: Oh, nu te duci. [00:40:15] DAVID J. MALAN: Ah, Uită-te la asta. Foarte frumos. Ei bine, ce dont 'vom lua unul voluntar aici care ar dori să vină pe sus. Ce zici de acolo în verde, nu? [00:40:27] Bine, și să have-- în loc de a face acest lucru, unii dintre voi s-ar putea ști acest joc here-- tăiat frânghia, poate? Să vedem. Avem ochelarii pe aici? [00:40:37] OK. Mulțumesc. Care e numele tău? [00:40:39] Audiența: Laura. [00:40:40] DAVID J. MALAN: Laura? Mă bucur să văd. Dacă nu te superi inscrie Google Glass peste ochelarii. Acest lucru este Colton. [00:40:46] COLTON: Bună. Mă bucur să te cunosc. [00:40:48] DAVID J. MALAN: OK, haide jur. Bine, deci ce ai de gând să face aici, care a jucat acest lucru înainte, Se pune mâna pe Leap Motion aici. Și acum, săgeata trebuie să se miște. Oh, nope. [00:40:57] Audiența: Nu. [00:40:58] DAVID J. MALAN: Ne Nu vreau să renunț încă. OK, așteptați. Peste aici. Deci, observați cum vă țineți ta degetul peste ceva, mouse-ul începe să meargă verde, care este modul în care faceți clic. [00:41:06] Deci, hover peste Redare. Și doar un singur deget este bine. Și acum faceți clic pe putinul tip verde pe partea stângă. Și acum ține până când se umple de culoare verde. Bun. Acum, cum ar fi, un nivel de până sus. [00:41:16] Audiența: Da, vrem nivel unu, aici. [00:41:20] DAVID J. MALAN: Bun. OK, deci tot ce trebuie să faceți este să taie coarda. Cursorul e cel alb acolo jos. [00:41:28] Foarte frumos. Bine, e pe cale de a obține mai greu. Deci, țineți degetul pe viitor acum. Bun. Asta e greu. [00:41:39] Audiența: Oh, rahat. OK. Vrea să meargă în acest fel. Oh crap, that-- [00:41:44] DAVID J. MALAN: Da. Obiectiv secundar este de a obtine toate stelele. În regulă, următorul. [00:41:53] Să vedem dacă puteți obține acest al treilea. Bun. OK, du-te acolo. [00:42:06] Sigur. Oh, foarte frumos. Bine. [00:42:11] Deci, de ce nu ne-am suspenda aici azi? Lasa pe nimeni sa vii pe la care vrea să joace. Multumesc mult pentru Laura voluntar. Si iti vom vedea pe luni. [00:42:18] Audiența: Probabil vrei astea înapoi. [00:42:21] SPEAKER 2: La CS50-- următor