DAVID J. Malan: pob hawl, felly mae hyn dyma yw adain Myo band, un neu ddau o yr ydym gael ar gyfer prosiectau terfynol CS50. Ac yr oedd hynny'n arddangosiad rydym yn ciwio chi i fyny o flaen llaw lle yn y bôn y fraich eithaf tynn band i fyny fan hyn gwrando ar eich symudiadau cyhyrol sydd wedyn yn cael eu mapio yn meddalwedd i gliniadur Colton dros yma y Roedd gan iTunes a bod cân eisoes ciwio i fyny. Yn hytrach na fi demoing hyn, Colton wedi bod yn y labordy yn glir drwy'r wythnos yn cael arddangosiad yn barod ar gyfer un gwirfoddolwr dewr. Os byddai rhywun yn hoffi dod ar up-- welodd dy lygad y ffynnon. Dewch ar i fyny. [00:01:09] Mae pob hawl. A beth yw eich enw? [00:01:13] GYNULLEIDFA: Uh, Maria. [00:01:14] DAVID J. Malan: Maria, neis i weld chi. Dewch ar dros yma. Gadewch i mi eich cyflwyno i Colton. Colton, mae hyn yn Maria. [00:01:21] COLTON: Hi, neis i gwrdd â chi. [00:01:23] DAVID J. Malan: All iawn, felly cam un, rydym yn mynd i gael eich rhoi hwn at eich braich fel ei bod yn eithaf dynn i fyny yn agos at eich penelin. Ac yn y cyfamser, gadewch i ni gael rhoi ar ein Google Glass a byddwn yn cymysgu technolegau heddiw. [00:01:33] COLTON: Yn gyntaf bydd rhaid i ni bachyn hyn i mewn i'r pethau. [00:01:36] DAVID J. Malan: OK. Mewn gwirionedd, gadewch i ni roi eich braich fel yn agos at cebl hon ag y gallwch fel y gallwn yn gyntaf cydamseru i fyny. [00:01:41] COLTON: Gadewch i ni wneud hyn. [00:01:42] DAVID J. Malan: Ac yn y cyfamser, felly y gall pawb gael cipolwg agosach, byddwn yn taflu camera Andrew i fyny ar y sgrin yno. Felly mae gennym cebl USB sy'n yn cael ei blygio i mewn i rwymyn braich Maria. A gadewch i mi taflu screen Colton yn i fyny ar y taflunydd nesaf. [00:02:00] Felly Colton yn cofrestru y ddyfais bellach fel Myo gysylltiedig â'r cebl hwn. Ac yn awr beth Maria mynd i wneud am ennyd mewn gwirionedd yn cerdded trwy y camau calibro ac addysgu'r meddalwedd sut mae ei cyhyrau yn ymateb pan fydd yn gwneud yn siwr a ddiffiniwyd ymlaen llaw ystumiau bod y feddalwedd yn deall. Os hoffech chi fynd i mewn flaen y sgrin. OK, daliwch ati. [00:02:30] COLTON: Ewch fel hyn. Ac fel 'na. A'r holl ffordd i'r dde. Ewch yn ôl. [00:02:35] DAVID J. Malan: OK. Safbwynt gwahanol. Dyw hi ddim i chi. Mae'n i ni. [00:02:40] MARIA: OK. DAVID J. Malan: No. Gadewch i ni symud yn uwch i fyny, felly mae'n yn nes at eich penelin, neu hyd yn oed yn dynnach. Mae pob hawl. [00:02:52] Yma rydym yn mynd. Byddai hwn yn amser da i CS52X. Dyna ni. [00:02:57] Iawn 'n glws. OK. Thumb i Pinky. [00:03:02] Iawn 'n glws. Taenwch eich bysedd. Da. Tonnau i'r dde. Mae'n rhyfedd sy'n dangos chi gyda'r hand-- chwith [00:03:17] COLTON: Yeah, mae hynny'n rhyfedd. DAVID J. Malan: Wave i yr hawl a symud ymlaen. Ymlaen yn gyflym i sgip neu nesaf. Dyna Wave OK yn iawn. [00:03:25] MARIA: don't-- i ddim aros. [00:03:26] DAVID J. Malan: Angen rhywfaint o help? [00:03:28] COLTON: Felly rydych chi'n mynd fel hyn. MARIA: Mae'n troi'r beth arall, er. COLTON: Mae'n. DAVID J. Malan: Yeah Nid wyf yn gwybod pam ei fod yn dangos Leftie chi. COLTON: Nid Pam ydych chi'n try-- dim ond ceisiwch fynd fel hyn. [00:03:38] DAVID J. Malan: Nac oes? Efallai gyrraedd eich braich allan ychydig o sythach a'i wneud yn fwy swta fel hyn. Yeah, OK, yn dod ymlaen. [00:03:48] MARIA: Mae'n ddrwg gen i. DAVID J. Malan: Nid eich bai chi ydyw. COLTON: Mae'n iawn. DAVID J. Malan: Pob Hawl. Well-- [00:03:56] MARIA: A ddylem ni hepgor hyn, felly? DAVID J. Malan: Ie, gadewch i ni rhoi gwybod i chi oddi ar y bachyn. Felly os hoffai unrhyw un wneud prosiect terfynol yn arfer hon gad caledwedd, yn sylweddoli y gallai dim ond cymryd ychydig ddod i arfer â. Ac this-- y realiti yw hyn mewn gwirionedd yn gwaedu iawn ymyl. [00:04:10] Mae hyn yn yr hyn a elwir y pecyn datblygwr, a oedd i fod i fod yn hanfod yn cyn-rhyddhau fel y gall pobl ei wneud yn union this-- ymladd ag ef, ffigur allan sut mae cyrff pobl yn gweithio gyda'r dechnoleg. Felly os ydych am wedyn, ar ôl darlith, gallwn adael i chi ddod a cymryd stab arall arno. Ond fel arall, rownd o gymeradwyaeth, os gallem, i Maria dros ddod ar i fyny. [00:04:26] MARIA: Diolch yn fawr. [00:04:28] DAVID J. Malan: Diolch yn fawr. Byddwn yn dal gafael ar hyn, ond byddwn yn rhoi you-- beth am bêl straen yma? Oh, ac-- os-- yeah, diolch. Mae pob hawl. Felly, ar gyfer y chwilfrydig, os oeddech yn anghyfarwydd â'r dewis sain ein bod yn gwneud yno yn gynharach, mae teledu anhygoel dangos i chi y dylai gwbl bod yn goryfed mewn gwylio ar Netflix yw hyn yn un yma. [00:04:51] SIARADWR 1: Foneddigion a boneddigesau, dewin o'r enw Josh. [00:05:04] DAVID J. Malan: Ac mae'n debyg, 'i' yn beth i destun mi yn ystod darlith awr. Im 'yn cael gwybod bod Maria wedi cael pen-blwydd ddoe. Pen-blwydd mor hapus o CS50 i Maria hefyd. [00:05:18] Felly efallai y byddwch wedi darllen yn y mis diwethaf y boneddigesau hyn yma, Steve Ballmer, a oedd mewn gwirionedd yn dosbarth o 1977 yn y coleg, wedi ymddeol yn ddiweddar ar gyfer Microsoft. Yr oedd yn fyfyriwr israddedig yma, Yna, flynyddoedd cwpl yn ddiweddarach cafodd ei hun yn Ysgol Fusnes Stanford pan dderbyniodd ffôn ffonio o gyfaill sy'n wedi byw i lawr y neuadd oddi wrtho yma yn Harvard. Enw'r ffrind Bill oedd Gates, ac ar y pryd, yr oedd yn ceisio recriwtio Steve i fod yn y person busnes cyntaf, mewn gwirionedd, mewn cwmni bach enwi Microsoft. [00:05:45] Mae fer stori hir, Steve Enillwyd dros y pen draw, Ymunodd Microsoft pan fyddant Roedd dim ond 30 o weithwyr. Ac erbyn iddo wedi ymddeol yn eithaf diweddar, roedd gan y cwmni 100,000 o weithwyr dros yr ychydig flynyddoedd diwethaf. Ac felly gwefan o'r enw The Ymyl Paratowyd deyrnged hon ar fideo ein bod yn meddwl y byddem a rennir sy'n rhoi i chi ymdeimlad o union faint o ynni Steve yn dod at unrhyw gyflwyniad mae'n rhoi. [VIDEO Playback] -Microsoft Debyg i pedwerydd plentyn. Mae plant yn gadael y ty. Yn yr achos hwn, yr wyf yn dyfalu Dw i'n gadael y tŷ. Hey Bill, whazzap? [00:06:23] -Wazzap? [00:06:24] -Hey, Wazzap? Rydym wedi bod yn cael cyfle enfawr. A Bill roddodd y cyfle hwnnw i ni. Hoffwn ddiolch i Bill am hynny. Rwyf am i chi hefyd. Mae cyflymder y arloesi Nid yn mynd i arafu. [00:06:42] Mae'n mynd i fynd yn gyflymach ac yn gyflymach. Efallai y bydd ychydig o gystadleuwyr sy'n cael eu dileu yn anffodus! [00:06:54] Rwyf wrth fy modd y cwmni hwn. Ie! Rwyf yn PC, ac rwyf wrth fy modd y cwmni hwn! [00:07:08] Datblygwyr, datblygwyr, datblygwyr, datblygwyr, datblygwyr, datblygwyr, datblygwyr, datblygwyr. Ie! Datblygwyr y We! [00:07:19] Datblygwyr y We! Datblygwyr y We! Gwrandewch ar beth arall yr ydych ei gael heb unrhyw gost ychwanegol! [00:07:28] Mae'r weithrediaeth MS-DOS, apwyntiad calendr, pentwr cerdyn, pad nodyn, cloc, panel rheoli. Ac, gallwch chi yn credu ei fod? Reversie! [00:07:35] Eu llosgi i CD! Eu postio i MSN! Rydych yn eu bost at ffrindiau! [00:07:40] I gyd gydag un clic! Un Microsoft, un strategaeth, un team-- canolbwyntio, disgybledig, proffesiynol, ac arbenigwr ym mhopeth a wnawn. Gadewch i mi defnyddio llinell o hen movie. [00:07:52] Mae perthnasau yn debyg siarcod. Maent yn symud ymlaen, neu maent yn marw. Fi 'n weithredol yn meddwl tech cwmnïau yr un fath. [00:08:01] [DIWEDD VIDEO Playback] DAVID J. Malan: Felly, rydym mor falch o gyhoeddi y bydd Steve yn ymuno â ni yma yn CS50 ddydd Mercher nesaf yn y lle arferol ac amser yma. Bydd y gofod yn debygol o fod yn gyfyngedig. Ac felly i ymuno â ni yn bersonol, os gwelwch yn dda pen heddiw neu'n fuan wedi hynny i cs50.harvard.edu/register. [00:08:22] A byddwn yn dilyn i fyny gan Dydd Mawrth cadarnhau smotiau. Edrychaf ymlaen at hwnnw nesaf Dydd Mercher yn ystod darlith yn CS50. Yn awr, mewn newyddion arall, yr wyf yn digwydd i dod ar draws hyn yn The Crimson unig y diwrnod o'r blaen. [00:08:34] Mae'n ymddangos bod un o'r staff CS50 yn ac o leiaf un o fyfyrwyr CS50 yn ar hyn o bryd yn rhedeg am UC llywydd ac is-lywydd, a ddaeth i mi yn ôl i fy hun yn ôl ddiwrnod pan fyddaf yn colli yr etholiad UC druenus. Ond mae'r haul ar fryn yn hynny yw fy mod bob amser yn adrodd y stori yw bod un o'r dwi'n siwr llawer o resymau Collais y etholiad oedd diffyg llwyr o dalent ar gyfer siarad cyhoeddus. Ac felly yn eithaf onest, mae'n gyrrodd fi, profiad hwnnw Rwy'n credu fy mlwyddyn iau, i lofnodi mewn gwirionedd ar gyfer Cymdeithas Gyfrifiadurol Harvard, sef yw'r grŵp ar y campws sy'n yn cynnal amryw o sgyrsiau technegol a phethau eraill. Ac yr wyf yn cymryd dros eu haddysgu seminarau ac felly wedi cael cyfle, a Cyfle gwych, i ddechrau gweithio ar union hyn. Ond hefyd, cefais gyfle yn ystod profiad hwn i ddysgu fy hun yn fwy HTML. Ac felly yr wyf yn ei ohirio neithiwr gan edrych trwy'r wefan seiliedig HTML Wneuthum yn hoffi 1997, '98, ar gyfer fy ymgyrch sy'n edrych fel hyn yma. Yr wyf yn gwybod. [00:09:29] Because-- ac wrth gwrs, rhybudd y penderfyniad dylunio anhygoel yn 1998 neu whatnot. Y peth cyntaf y byddwch am i ddefnyddwyr i'w wneud ar ôl ymweld eich gwefan yw cael i glicio dolen arall yn unig i fynd i mewn i'ch gwefan yma gyda'r mynach y tu ôl fel llen dan len lle mae'n debyg fy llwyfan ymgyrch oedd. Ac mae hyn i gyd byddwch yn cael heddiw yn unig yw screenshot. Ond yr oeddwn yn darllen drwy, fel, fy posteri ymgyrch neithiwr ac mae fy llwyfan. [00:09:50] Ac roeddwn i mor grac ar y pryd. Fy llwyfan was-- roedd yn ddiddorol. Felly dwi wedi tawelu i lawr ers hynny. Ond someday, byddaf yn rhedeg eto ac gobeithio, yn well eu byd y tro hwn. [00:10:03] Felly HTML, yr iaith honno yn yr wyf yn ei wneud hynny in-- chi cyn bo hir bydd yn gwneud llawer more-- yn rhywbeth yr ydym wedi bod siarad am yn ddiweddar ac i raddau helaeth ac sy'n dilyn yn ganiataol bellach ein bod wedi symud ymlaen i ieithoedd eraill. Ond gadewch i ni oedi am ychydig funudau'n a roi rhai o'r pethau hyn mewn cyd-destun. Felly, mewn brawddeg, beth yw HTML? [00:10:18] Neu, beth sy'n ei ddefnyddio ar gyfer? Dylai unrhyw un? Ie. [00:10:20] GYNULLEIDFA: Markup ar gyfer gwefannau. DAVID J. Malan: Markup ar gyfer y wefan. Felly mae'n iaith markup sy'n yn gadael i chi strwythuro tudalen ar y we. Pennawd yn mynd i fyny fan hyn, teitl mynd yma, y ​​corff yn mynd yma. Mae hyn yn yn drwm, mae hyn yn italics-- y math hwnnw o fanylder. [00:10:33] OK, yn dda. Felly CSS gadael you-- ac yr wyf yn Cymerodd rhai rhyddid yno gyda'r feiddgar-wynebu ac italig oherwydd sy'n cael ei rhoi ar waith yn well gyda hyn. CSS yw-- beth? Dywedwch mewn brawddeg. Unrhyw un o gwbl. Yeah. [00:10:46] GYNULLEIDFA: addurniadau a stwff, fel sut i ddylunio iddo. DAVID J. Malan: Iawn, yn dda. Addurniadau sy'n caniatáu i chi i ddylunio neu stylize ei gyda phethau fel yn drwm ac llythrennau italig a lliwiau a hefyd yn fwy dirwy lleoli graen o elfennau. Mae'n fath o yn gadael i chi gymryd pethau y filltir olaf felly os, er enghraifft, yn Pset7, efallai eich bod wedi sylwi ar eich dudalen portffolio os ydych chi ar hyn o bryd eisoes fod tabl ball sy'n eich gwneud i ddangos ddaliadau stoc y defnyddiwr ac yn ôl pob tebyg arian parod yn edrych yn eithaf erchyll yn ddiofyn heb unrhyw ofod gwyn. Math popeth o llawn dop gyda'i gilydd mewn rhesi a cholofnau. [00:11:18] Wel, gydag ychydig o CSS, oherwydd efallai y byddwch yn sylweddoli, alli 'n weithredol tweak hynny ac yn ei gwneud yn rhywbeth llawer mwy cyfarwydd a llawer prettier i edrych ar. Felly mae CSS yn ymwneud â'r stylization o wefannau. Ond yna fe wnaethom gyflwyno eto arall iaith, PHP, sy'n gadael i ni wneud beth? [00:11:36] Gadewch i jyst yn gwneud beth? Unrhyw un. Got i fentro y tu hwnt y rhesi cwpl cyntaf. Yeah. [00:11:40] GYNULLEIDFA: Creu cynnwys deinamig. DAVID J. Malan: Perffaith. Cynhyrchu cynnwys deinamig. A gallwch wneud hyn mewn unrhyw nifer o ieithoedd. Rydym yn digwydd i ddefnyddio PHP am ei fod yn yn rhannol mor debyg i C chystrawen. [00:11:50] Ond PHP gwneud yn union hynny. Mae'n gadael i chi ddeinamig cynhyrchu allbwn. A gallai rhywfaint o'r allbwn fod yn HTML, fel yr ydym wedi bod yn gwneud fel arfer. Ac mae'n hefyd, am ei fod yn iaith raglennu, yn y mecanwaith drwy lle gallwn ni siarad â chronfeydd data. [00:12:03] A gallwn wneud ymholiadau i gweinyddwyr eraill fel yahoos ac programmatically gwneud unrhyw beth iawn bod chi efallai fel arall yn awyddus i orfodi cyfrifiadur i wneud. Felly PHP gadael i ni ddechrau ddeinamig outputting cynnwys. Felly, yn ôl y rhesymeg, nid oedd gennyf gwefan ddeinamig yn ôl yn 1998. [00:12:16] Yr oedd yn union dudalen we statig. Roedd fy cynnwys i gael ei newid gan â llaw gyda gedit neu ryw cyfwerth. Ond PHP yw hyn yr ydym yn ei ddefnyddio neu Gallai fod wedi defnyddio, yn hytrach, ar gyfer rhywbeth fel y Gwefan Frosh IMS, a oedd oedd i fod i gymryd cofrestriadau a rheoli rhestr o users-- pethau sy'n mewn gwirionedd yn newid drosodd amser, er ein bod yn digwydd i ddefnyddio Perl, a gwahanol iaith ar y pryd. [00:12:35] Ac yna yn olaf, rydym yn cyflwyno Ymholiad Strwythuredig SQL-- Iaith. Felly eto iaith arall sy'n cael ei ddefnyddio ar gyfer yr hyn? Defnyddir ar gyfer beth? Allwn ni fentro slight-- OK, nid ydym yn mynd i gael llawer farther nag y gerddorfa yma. GYNULLEIDFA: Mae'n protocol a ddefnyddir i siarad â chronfeydd data. DAVID J. Malan: A protocol a ddefnyddir i siarad â chronfeydd data. Gadewch i mi tweak. Mae'n iaith naturiol a ddefnyddir i siarad â databases-- yn dewis a mewnosod a dileu a diweddariadau ac mewn gwirionedd hyd yn oed mwy o nodweddion sy'n nid ydym wedi syrthio hyd yn oed i mewn ond efallai y byddwch am explore-- gael i edrych am, dyweder, prosiect terfynol. Felly, mae amryw o ddarnau hyn. [00:13:09] A gobeithio Pset7, er bod ei fanyleb yn eithaf hir, 'i' yn fwriadol hir i gerdded chi trwy sut y gall y pethau hyn i gyd eu teipio gyda'i gilydd. Yn awr, ar ddydd Llun, rydym yn gyflwyno ein hiaith diwethaf y byddwn yn cyflwyno yn ffurfiol mewn mae'r course-- hynny yw, JavaScript. Mae hyn, fel PHP, yn iaith dehongli. [00:13:25] Ond mae gwahaniaeth allweddol Cynigiais ar ddydd Llun yw bod tra PHP yn gweithredu neu yn cael ei ddehongli ar y gweinydd, a oedd yn yn yr achos hwn yw'r peiriant CS50, neu a allai fod rhyw gwe masnachol gweinyddwr ar y rhyngrwyd, JavaScript gyffredinol yn iaith sy'n rhedeg ochr y cleient Nid yw gweinydd side-- hynny yn y porwr. Pa un yw dweud, yn union fel pan agorais i fyny Facebook cod ffynhonnell a dod o hyd i gyd o ffeiliau .js rheini, yr awgrym oedd bod pan fyddwch yn ymweld Facebook neu'r rhan fwyaf gwefannau y dyddiau hyn, byddwch yn cael nid yn unig yn HTML, nid yn unig yn CSS, ond criw cyfan o JavaScript cod yn aml ar ffurf ffeiliau .js. Ac yna mae'n y browser-- eich pen eich hun Mac neu PC-- sy'n executes y cod hwnnw. [00:14:03] Ond mae eich porwr executes iddo. Gallwch chi feddwl mewn fath o pwll tywod. Fel na ddylai cod JavaScript fod yn gallu dileu ffeiliau ar eich cyfrifiadur. Ni ddylai fod yn gallu anfon negeseuon e-bost ar eich rhan. Mae eich porwr math o Yn cyfyngu beth y gallwch ei wneud ag ef. [00:14:17] Felly, yn hynny o beth, mae'n ychydig yn llai pwerus, efallai, na C. Ond gall JavaScript, fel o'r neilltu, yn cael ei ddefnyddio ar y gweinydd, er y byddwn yn tueddu i beidio â siarad am y peth yn y cyd-destun. Felly nawr gadewch i glymu'r rhain at ei gilydd. Mae wythnos yn ogystal yn ôl, rydym yn cyflwyno rhai HTML ar y dudalen we super ddiflas left--. [00:14:34] Dim ond dweud helo byd. Ac yna yr wyf arfaethedig ar yr dde gallwn fath o ddwyn syniadau o'n trafodaeth ar strwythurau data yn C a meddwl sut hierarchaidd hwn iaith markup ar y chwith gellid eu tynnu neu eu gweithredu mewn cof fel strwythur coeden go iawn gyda nodau ac awgrymiadau a mathau hynny o fanylion. Ar y dde, rydym yn galw bod Dogfen DOM-- Gwrthrych Model-- sydd ychydig ffordd ffansi o ddweud coeden. [00:14:56] Yn awr, pam mae hyn yn ddefnyddiol i feddwl am y peth fel hyn? Gan fod yn awr gyda JavaScript, gan fod gennym cod sy'n cael i chwarae yn hyn amgylchedd, mae'r HTML gwirioneddol dyna ei anfon at y porwr eisoes ac mae eisoes wedi eu llwytho i mewn i gof gan y porwr i mewn i goeden yn eich cyfrifiadur RAM fel hyn, gallwn ddefnyddio JavaScript i mewn gwirionedd yn croesi neu gerdded neu chwilio neu newid y goeden DOM, fodd bynnag rydym eisiau. Felly, mewn gwirionedd, os ydych yn meddwl am facebook.com, os ydych yn defnyddio'r nodwedd sgwrs, os ydych defnydd Gmail a'r nodwedd gchat, unrhyw beth lle mae gennych negeseuon sy'n dod dro ar ôl tro ac unwaith eto, negeseuon hynny yn ôl pob tebyg, fel, tag LI, tagiau Rhestr Eitem, efallai. [00:15:35] Neu efallai eu bod yn unig divs sy'n cadw ymddangos bob tro y byddwch yn cael neges ar unwaith. Ac felly mai dim ond yn golygu yr hyn y Facebook neu Google yn ei wneud yw unrhyw tro y byddwch yn cael Neges gan y gweinydd, yn ôl pob tebyg y maent yn ei defnyddio JavaScript i ddim ond ychwanegu nod arall i hyn tree-- nod arall i hyn goeden sydd wedyn yn eu golwg yn unig yn edrych yn fel llinell newydd o destun ar eich sgrîn. Ond maen nhw'n mewnosod i mewn i'r strwythur data. [00:15:57] Felly, mewn dosbarthiadau tebyg CS124 ac eraill, wnewch chi helpu mewn gwirionedd yn ysgrifennu mwy cod yn erbyn strwythurau data fel hyn. Ond am y tro yn JavaScript, byddwn yn jyst cymryd yn ganiataol yr ydym yn cael yr holl functionality hon am ddim gan yr iaith ei hun. Felly gadewch i ni edrych ar enghraifft. [00:16:09] Gadewch i mi agor ffeil o'r enw form.html. Mae'n super syml. 'I jyst yn edrych fel hyn. [00:16:15] Dim CSS, dim meddwl i estheteg. Mae'n swyddogaethol yn unig ac i bob golwg rwy'n gofyn am e-bost, cyfrinair, cyfrinair unwaith eto, ac yna siec i gytuno i rai telerau ac amodau. Yr hyn y cod ffynhonnell ar gyfer hyn edrych fel yn ôl pob tebyg rhywbeth efallai y byddwch yn dyfalu gyda ychydig bach o feddwl yn awr. Mae gen i ffurflen tag yma. [00:16:32] Mae camau'n cael yn ôl pob golwg yn mynd i ewch i ffeil o'r enw register.php. Mae'r dull Rydw i'n mynd i ddefnyddio ei gael. Ac yna mae gen i destun maes y mae ei enw i yw e-bost. [00:16:40] Mae gen i gae cyfrinair y mae ei enw yw cyfrinair. Mae gen i un arall maes cyfrinair y mae ei enw yn cadarnhau braidd yn fympwyol. Dim ond paramedr HTTP arall. [00:16:49] Ac yna nid ydym rydym wedi defnyddio hyn ac eithrio gan fod y IMS Frosh demo yn class-- blwch gwirio sydd yn math yn unig yn dychwelyd siec. A byddaf yn galw cytundeb hwnnw. Felly, yr wyf i wedi fath o fympwyol ond enwyd y meysydd hyn yn gyfleus. Fel bod yn awr pan fydd y ffurflen hon yn cael gyflwyno, gadewch i ni weld beth sy'n digwydd. Os byddaf yn gwneud malan@harvard.edu, 'N annhymerus' yn ei wneud a password o rhuddgoch. 'N annhymerus' yn ei wneud a password o ddim byd. Gadewch i ni gydweithio. [00:17:10] Ac nid wyf am edrych ar y blwch. Gadewch i mi cliciwch Gofrestr. Ac y mae'n ei ddweud, EM, rydych chi wedi cofrestru. Ddim mewn gwirionedd. [00:17:16] Ond mae'r URL newid. Felly y ffurflen hon ei ganiatáu yn glir i'w gyflwyno i register.php. Ond yn ôl pob tebyg, ddylwn i fod yn dal rhai o'r gwallau hyn. Yn awr, mewn Pset7 a rhai o'n enghreifftiau darlith, byddem yn gyffredinol argraffu neges gwall goch fawr yma gan ddywedyd, enw ar goll, neu ar goll cyfrinair. Rydym wedi gwneud hynny o'r blaen ac rydym wedi canfod gwall ochr y gweinydd Da. [00:17:37] Ond mae llawer o wefannau y dyddiau hyn gwneud cleient canfod gwall ochr lle nad yw'r URL yn newid. Nid yw'r dudalen gyfan yn adnewyddu. Byddwch yn cael adborth ar unwaith oddi wrth y porwr. Efallai rhywbeth yn mynd goch. [00:17:48] Efallai byddwch yn cael pop i fyny. Ond nad ydych yn gwastraffu amser yn anfon i mae'r data gweinydd sy'n anghyflawn. Felly, gadewch i ni weld sut y gallem cyflawni y nodwedd honno yn ogystal. [00:17:56] Gadewch i mi fynd i form1.html, sy'n edrych yr un fath. Ond os y tro hwn yr wyf yn ei wneud malan@harvard.edu ac yr wyf deipio rhuddgoch ac nid wyf yn cydweithredu ymhellach ond chliciwch Cofrestru, yn sylwi nawr. Dyw hi ddim yn ateb sexiest. Rwyf wedi o leiaf yn dal gwall hwn. Ac yr wyf wedi defnyddio'r rhybudd swyddogaeth yn JavaScript-- yr ydym yn unig yn defnyddio yn y dosbarth. Yn gyffredinol, ni ddylech ddefnyddio hyn oherwydd gall fynd allan yn gyflym iawn o reolaeth. Ond cyfrineiriau yn cyfateb yw'r gwall. [00:18:19] Gadewch i mi fynd yn ei flaen a chliciwch OK. Ond beth mae'r prydau parod allweddol yma yw nad yw'r URL yn newid. Gwastraffu felly nid wyf wedi trafferthu amser y gweinydd yn gofyn iddo cwestiwn y gallwn i gael cyfrifedig allan yr ateb i mi fy hun. [00:18:30] A'r defnyddiwr, er bod bod yn siarad am hyn hwy nag y defnyddiwr mynd i feddwl am hyn, yn mynd i gael adborth ar unwaith. Does dim latency gyda y cysylltedd rhwydwaith. Felly gadewch i ni edrych ar y cod ffynhonnell. [00:18:40] Edrych Form1.html strwythur tebyg i fyny yma. Mae'r ffurflen ar mewn gwirionedd yr un fath. Ond gadewch i ni weld beth a wnes i lawr fan hyn. Ac mae gwahanol ffyrdd o wneud hyn. Ac yr wyf wedi gwneud y mwyaf yn syth ddilynwr ond nid ffordd fwyaf cain eto. Mae gen i tag sgript. Yna, yr wyf yn galw document.getElementByID ('cofrestru'). Ac yr wyf yn storio y gwerth ffurf, yn amrywio. [00:19:04] Felly, beth a wneuthum? Gallwch chi feddwl am document.getElementByID fel rhai swyddogaeth arbennig sy'n JavaScript yn rhoi i chi bod llythrennol dwylo chi pwyntydd i un o'r nodau neu petryalau yn y goeden hon. Felly nawr dyna beth mae ein ffurflen newidyn yn JavaScript mewn gwirionedd yn pwyntio at. [00:19:21] Felly, yn awr mae'r gystrawen yn wahanol i C. Ond rydym yn ei wneud ychydig o bethau yma. Un, mae hyn mae un yn ychydig yn rhyfedd edrych, yn sicr yn erbyn C. Ond yn edrych ar y llinell 35. Felly, ar y form.onsubmit chwith. Dwyn i gof bod onsubmit yw fel cae mewn struct. Os ydych yn meddwl am y ffurflen newidyn yn cael ei dim ond bod yn struct C, gallai gael rhywfaint o gaeau. [00:19:42] Yn ôl yn y dydd, cawsom enwau myfyrwyr, IDs, tai, y rhai math o gaeau. Dim ond meddwl am onsubmit fel cae arall. Ond mae'n faes arbennig oherwydd bod y porwr yn preprogrammed i ddisgwyl Nid .onsubmit i fod yn werth fel rhif neu linyn, ond i mewn gwirionedd yn swyddogaeth neu gyfeiriad swyddogaeth er cof y cyfrifiadur. [00:20:02] Ac yn wir, dyna beth keyword hwn yn fan hyn yn ei wneud. Mae hyn yn dweud, yn rhoi swyddogaeth newydd i mi. Ond beth yw ei henw mynd i fod, mae'n debyg? [00:20:09] Gan feddwl yn ôl i ddydd Llun. Beth yw enw'r hyn yn seiliedig ar gystrawen hon swyddogaeth? Na, yr wyf yn golygu, mae yn amlwg dim enw associated-- sicr Nid yn yr hyn yr wyf wedi tynnu sylw yma. [00:20:21] Ond mae hynny'n iawn mewn gwirionedd. Mae hon yn swyddogaeth anhysbys, neu swyddogaeth lamda fel rhai a allai ei alw. Ac mae hynny'n ei olygu yw mae'n dal i fod yn swyddogaeth. 'I' jyst, nad ydych yn gallu ei alw wrth ei enw. Ond mae hynny'n iawn. Oherwydd unwaith eto, mae'r porwr wedi bod preprogrammed gan gwmnïau fel Google neu Microsoft neu Mozilla neu eraill i dim ond yn gwybod os yw'r cae .onsubmit tu mewn elfen ffurflen sydd â'r gwerth, drin fel function-- pwyntydd swyddogaeth, os mynnwch. Ac yn ei alw pan fydd y ffurflen yn cael ei chyflwyno. [00:20:46] Felly pa cod dylid ei ddienyddio pan fydd y ffurflen yn cael ei chyflwyno? Mae'n debyg, mae popeth tu mewn i'r Brace cyrliog. Ac mae hyn yn unig yw arddull. [00:20:53] Gallech wneud hyn yn hoffi rydym yn tueddu i wneud yn CS50. Ond yn JavaScript, rhan fwyaf o bobl yn tueddu i gadw ar yr un llinell dim ond oherwydd ei fod yn fwy clir yn sy'n gysylltiedig â'r swyddogaeth honno keyword. Felly nawr beth ydw i'n ei wneud? [00:21:03] Os form.email.value hafal gydradd llinyn gwag neu ddim byd, dyma rhybudd ble dw i'n mynd i ddweud, rhaid i chi roi eich cyfeiriad e-bost, ac yna dychwelyd ffug. Ac mae mor anwir dychwelyd hwnnw yn atal y ffurflen rhag cael ei gyflwyno. Yn y cyfamser, os yw gwerth cyfrinair wag, dw i'n mynd i gweiddi ar y defnyddiwr a dywedwch, rhaid i chi ddarparu cyfrinair. [00:21:21] Yn y cyfamser, mae pethau'n mynd yn ychydig ffansi yma. Os nad form.password.value gwneud form.confirmation.value cyfartal, y cae arall, gweiddi ar y defnyddiwr fod y cyfrineiriau yn cyd-fynd fel y maent Nid oedd funud yn ôl. Ac yna mae hyn yn un 'a Ychydig sexier oherwydd fy mod gwybod fy mod i'n gwybod yn gysyniadol fod gwirio yn enw blwch gwirio yn. [00:21:40] Fel y gallaf jyst ddefnyddio ebychnod pwynt i ddweud os na fydd y siec yn checked-- mae'n y Boole werth, gwir neu false-- 'N annhymerus' gweiddi ar y defnyddiwr am y rheswm hwnnw. Fel arall, os ydym yn mynd trwy pob un o'r amodau hyn, gadewch i ni dim ond yn dychwelyd yn wir. Gadewch yn cael ei gyflwyno y ffurflen. A bydd hyn wedyn yn digwydd. [00:21:56] Gadewch i deipio i mewn rhuddgoch. Gadewch i edrych ar y blwch, cliciwch ar y Gofrestr. Ac yn awr yr wyf yn mynd drwodd i'r gyrchfan. Yn awr, nid oes cronfa ddata yno. Does dim byd diddorol yn register.php. Fi jyst angen rhywbeth i siarad mewn gwirionedd i. Felly, gadewch i mi oedi, yma. Unrhyw gwestiynau am yr hyn yr ydym wedi ei wneud yn unig neu beth rhywfaint o hyn gystrawen newydd yw? OK, ie? [00:22:17] GYNULLEIDFA: Felly, unrhyw checkbox yn awtomatig yn Boole. Nid oes rhaid i chi ddatgan ei bod fel 'na. [00:22:21] DAVID J. Malan: Cywir. Unrhyw blwch ticio sy'n cael ei anfon i chi gan ffurflen HTML at eich cod JavaScript Bydd yn cael ei drin, ie, fel Boolean value-- wir neu'n anwir. Mae'n gwestiwn da. Tra bod y gwerthoedd eraill, o wrth gwrs, wedi bod yn destun, llinynnau AKA. [00:22:36] Mae pob hawl, felly gadewch i mi ailddirwyn ychydig ymhellach. Beth oedd holl bwynt hyn? Dim ond i fod yn glir. Fel, yr ydym eisoes yn gwybod, hyd yn oed o Pset7 a hyd yn oed o ddarlith yr wythnos ddiwethaf enghreifftiau, y gallwn yn amlwg wirio $ _GET $ _POST Weld a yw'r defnyddiwr yn ei roi i ni gwerth gwag. Cofiwch y swyddogaeth gwag yn PHP. [00:22:54] Felly, dim ond i fod yn glir, beth sydd un rheswm gallem hefyd eisiau gwneud gwirio gwall hwn tu mewn i'r porwr? Beth yw'r cymhelliant yma? Yeah. [00:23:06] GYNULLEIDFA: cyflymach, ac nid ydych yn ei wneud anfon data ddiwerth i'r gweinyddwr. DAVID J. Malan: Da. Mae'n gyflymach. Na fyddwch yn anfon ddiwerth data i'r gweinydd. [00:23:12] Felly, byddwch yn mynd yn ôl a mwy ymateb ar unwaith. Ac ar y cyfan, mae'r defnyddiwr profiad yn well. Meddyliwch am y dewis arall. [00:23:17] Os, am Gmail-- ac roedd yr achos o flynyddoedd lawer yn ôl. Gadewch i ni dybio eich bod got a e-bost newydd eich Gmail cyfrif, ond yr unig ffordd drwy i weld hynny yw, fel, ail-lwytho y dudalen gyfan. Neu Tybiwch chi glicio ar dolen i ddarllen e-bost. [00:23:29] Mae popeth wedi i ail-lwytho hynny bod yn gallu gweld yr e-bost. Neu Facebook-- byddwch yn cael neges sgwrs. Nid ydych yn ei weld nes i chi ail-lwytho y dudalen neu cliciwch rhywfaint o gyswllt. [00:23:36] Fel, byddai hwn yn ofnadwy profiad y defnyddiwr blino. A dyma sut beth oedd, yn amlwg, yn ôl pan oeddwn yn rhedeg am UC a'r we yn llawer llai deinamig ac nid oedd JavaScript fel boblogeiddio fel y mae nawr. Ac mae pethau'n mynd yn llawer yn fwy deinamig a llawer mwy ochr y cleient yn yr ystyr hwnnw. [00:23:49] Ond mae yna dal yma, ac mae hyn yn fath o gotcha blino. Dim ond oherwydd eich bod yn ychwanegu ochr y cleient Nid yw canfod fel hyn yn golygu gallwch chi neu y dylai roi'r gorau canfod ochr y gweinydd. Yn y bôn byddwch am roi eich gwall gwirio yn y ddau le. Oherwydd bod yr hyn a oedd yn un y wers a ddysgwyd o'r erthygl Rwyf yn darllen rhai darnau o â hyn system, CMS dwp Cynnwys Rheoli system, a oedd gweithredu ei system dilysu, ei mewngofnodi drwy pa fecanwaith? JavaScript. [00:24:20] GYNULLEIDFA: JavaScript. DAVID J. Malan: JavaScript, union, dde? Roedd yn defnyddio JavaScript. Ac yn llythrennol, rydych guys yn cael chwarae ychydig bach yn ôl pob tebyg gydag Arolygydd Chrome ar. Ac os gallaf ddod o hyd iddo, archwilio elfen. [00:24:30] Gadewch i mi fynd drosodd i'w wneud yr holl opsiynau Chrome ar. Ac mae hyn yw pa mor hawdd yw hi i analluogi JavaScript mewn porwr. Gwiriwch, dim mwy JavaScript. [00:24:38] Felly, i fod yn deg, mae llawer y we y dyddiau hyn yn unig yn mynd i dorri oherwydd Gmail a sites-- eraill Facebook-- cymryd yn ganiataol bod JavaScript wedi ei alluogi. Ond os ydych yn gwneud rhywbeth twp debyg yn unig dilysu mewnbwn defnyddwyr a gwirio ei fod am gwallau ar yr ochr y cleient, gallai adversary hawdd gwneud hyn. Ac yna hyd yn oed yn fwy craff adversary fel chi guys bellach yn gallu defnyddio'r Telnet neu Curl neu orchmynion llinell orchymyn yn unig ac mewn gwirionedd yn anfon negeseuon at y gweinydd hynny yn yr un modd nid ydynt yn gwirio gwall. [00:25:05] Felly, mae hyn yn fwy o penderfyniad rhyngwyneb defnyddiwr nag y mae yn wirioneddol technegol improvement-- gweithredu ochr y cleient rhywbeth fel hyn. Felly nawr Cipolwg cyflym, ond yna 'N annhymerus' gohirio at y daith ar-lein trwy'r am yr un yma. Ar ffurf dau, rydym mewn gwirionedd yn mynd trwy ac yn glanhau i fyny 'r cod ychydig bach. Ond gadewch i mi ildio i un o'r fideos yr ydym yn annhymerus debygol ymgorffori yn Pset8 mai dim ond yn dangos i chi a cystrawen tebyg gan ddefnyddio llyfrgell o'r enw jQuery, sy'n super, super llyfrgell boblogaidd yn JavaScript bod dweud y gwir rhan fwyaf o bobl dim ond yn defnyddio y dyddiau hyn ac hyd yn oed yn drysu fel JavaScript lles ei hun. [00:25:37] Ac mae'n tueddu i gynnwys rhai arwyddion doler a geiriau allweddol fel dogfen mewn cromfachau yma. Ond unwaith eto, gadewch i mi ildio i rhai sesiynau tiwtorial arafach ar-lein yn hytrach nag yn cael ei glymu i fyny mewn dim ond cystrawen. Gadewch i ni symud ymlaen i rhywbeth ychydig yn oerach o ran y ceisiadau hyn. [00:25:50] Felly, yn arbennig, gadewch i mi fynd ymlaen ac yn agor i fyny hyn yn fan hyn. Dewch ar. Dyna ni. [00:25:59] Gadewch i mi agor y llun yma. Ddiangen gymhleth edrych, ond mae'n yn disgrifio techneg o'r enw AJAX-- Asynchronous JavaScript a XML, lle y X i XML mewn gwirionedd bellach yn ei ddefnyddio mewn gwirionedd. Mae'n tueddu i ddefnyddio rhywbeth arall o'r enw JSON. [00:26:13] Ond dyma sut mae rhywbeth fel Google Maps neu Google Earth yn gweithio. Gadewch i ni roi cynnig ar hyn ar y hedfan, mewn gwirionedd. Gadewch i mi fynd yn ei flaen ac yn agor fyny Chrome ar fy porwr. [00:26:21] A gadewch i mi fynd i mewn i, dweud, maps.google.com. Ac mewn gwirionedd, os ydych yn hen digon i gofio beth, fel, roedd MapQuest tebyg yn ôl yn y dydd, ac efallai eu bod yn dal i weithio fel hyn. Pan fyddwch yn ei ddefnyddio i chwilio am something-- 33 Oxford Street, Caergrawnt, Mass, gadewch i ni wneud this-- chi Byddai mewn gwirionedd, os ydych yn yn awyddus i sosban i fyny ac i lawr, i'r chwith ac i'r dde, byddech yn edrych fel saeth fawr ar ei ben, ac mae'n Byddai dangos i chi un arall ffrâm y map i fyny yma. Neu a fyddech yn cliciwch i'r chwith ac rydych Byddai mynd dros yma, neu cliciwch arall a byddech yn mynd dros yma. Ond yn lle hynny mae'r rhain dyddiau, rydym wrth gwrs yn unig cymryd yn ganiataol y gallwn fynd o gwmpas Caergrawnt yn weddol gyflym dim ond drwy glicio a llusgo. Ond sylwi mae rhywfaint o ddiffygion. [00:26:59] Os byddaf yn gwneud hyn yn ddigon cyflym, yr hyn sy'n ymddangos i fod yn digwydd gan fy mod lusgo ychydig yn rhy gyflym ar gyfer y cyfrifiadur i gadw i fyny? Beth ydych chi'n ei weld? Yeah. [00:27:07] GYNULLEIDFA: Nid yw'r picseli yn adnewyddu. DAVID J. Malan: Y Nid yw picseli yn adnewyddu. Mae actually-- ac rydych allai weld hyn, mewn gwirionedd, os ydych yn gwylio ar-lein a saib hwn neu mewn gwirionedd yn arafu pethau i lawr am once-- byddwch yn gweld bod yna teils, sgwariau, petryalau neu sy'n ar goll o'r map nes ail rhaniad yn ddiweddarach, mwy o ddata, mwy o luniau mewn gwirionedd ymddangos ar y sgrin. Ac yn wir, os byddwn yn gwneud hyn drwy edrych fyny Chrome's-- gadewch i ni ddweud, Chrome-- gadewch i ni weld. Ni allwn wneud hynny. [00:27:31] Oh, whoops. Gadewch i ni agor maps.google.com. Gadewch i mi wneud y ffenestr fwy eto. [00:27:36] Ewch yn ôl i 33 Oxford Street. Beth oedd y wefan roeddwn ar yn ddiweddar? Roedd gen i hyn, fel, rant preifat i fy hun bod Id neges yna'n sydyn unrhyw ffrind a oedd ar-lein oedd am glywed. Mae rhywfaint o wefan. Rwy'n credu ei fod Comcast-- felly ISP Americanaidd mawr iawn. Gallwch, wrth gofrestru ar gyfer cebl newydd gwasanaeth modem neu wasanaeth teledu cebl, mae ganddynt ffurflen rhesymol iawn lle maent yn gofyn i chi am eich cyfeiriad. Ac mae gennych hyn anhygoel nodwedd a elwir yn auto cyflawn, fel Google, sy'n dechrau llenwi yn yr ateb i'ch cwestiwn. [00:28:04] Y broblem yw, maent yn gwneud auto cyflawn ar y pethau cyntaf y byddwch yn teipio. Felly, os byddwch yn dechrau teipio yn 33, mae'n Bydd yn dangos i chi yn llythrennol bob tŷ yn America sy'n dechrau gyda'r rhif 33 cyn parhau i yn disgwyl i chi deipio mwy. Felly os ydych yn teipio 33 Oxford, yna mae'n dangos i chi bob stryd yn America sydd â 33 Oxford mewn ei enw, heb ystyried y dref eich bod mewn. [00:28:25] Ac yna byddwch yn parhau teipio. Ac yn olaf, mae'n sylweddoli nad ydynt yn ei wneud cynnig gwasanaeth i'ch cartref yng Nghaergrawnt neu rywbeth fel 'na. Ond y pwynt yw, mae hyn yn y rhan fwyaf o gweithredu asinine o auto cwblhau erioed. [00:28:34] A Im 'jyst yn mynd i ffwrdd ar y tangiad hwn eto. Ond mae ffyrdd da i defnyddio JavaScript a ffyrdd drwg. Ac nid dyna'r reidrwydd yr un gorau. [00:28:40] Ond y pwynt yma, cyn hyn tirade, oedd i agor i fyny arfau i lawr fan hyn ac yn agor i fyny offer datblygwr, fel yr ydym wedi annog o'r blaen, ac i wylio'r Rhwydwaith tab wrth i mi glicio 'n sylweddol yn gyflym. Ac yn sylwi ar criw cyfan o cael ceisiadau ddigwyddodd. Mae hyn i gyd wedi digwydd ers i mi llusgo. [00:28:57] Ac yn fwyaf tebygol, yn wir llawer o resi hyn Erbyn hyn mae image slaes JPEG Mathau MIME neu fathau cynnwys. Mae hynny oherwydd yr hyn y chrome yn ei wneud bob tro rwy'n cliciwch a llusgo, cliciwch a llusgo, yw ei fod yn gwireddu, oh, yr wyf yn angen i chi fynd ofyn Google gyfer y teils ar y map sydd dros fan hyn, yn gyflym ei lawrlwytho trwy HTTP, ac yna ychwanegu at yr hyn a elwir DOM at y porwyr gwe yn goeden cof cynrychiolaeth fel bod y defnyddiwr, mi, yn gweld y teils diweddaru. Ac mae hyn oherwydd techneg o'r enw AJAX. Yn ôl yn y dydd, y mae mewn gwirionedd oedd yn wir, os ydych yn am newid beth sydd ar y sgrin, byddai'n rhaid i chi glicio i fyny, i lawr, i'r chwith, dde. Ac yna byddai tudalen newydd yn agor. Ond y dyddiau hyn, mae popeth yn fwy deinamig. Mae'n digwydd yn y ffordd y byddem bodau dynol gobeithio ei fod mewn gwirionedd y byddai yn rhyngweithiol. Ac mae'n ei gyflawni hyn drwy ffordd o techneg o'r enw AJAX, sydd efallai gorau esboniwyd gan enghraifft. Yn gyntaf, gadewch i mi fynd yn ei flaen ac yn agor i fyny ffeil Gelwir quote.php mewn cod dosbarthu heddiw. [00:29:53] Ac yna gadewch i mi wneud whoops symbol--. Gadewch i mi wneud symbol = GOOG am ddim ond ychydig stoc. Neu mewn gwirionedd, gadewch i ni wneud y un gan y Pset DDIM. Enter. [00:30:05] Ac yn awr sylwi ar yr hyn yr wyf yn ei gael yn ôl. Felly mae hyn yn wir yn ffeil PHP byr yr wyf Ysgrifennodd bod yn benthyca cod o swyddogaeth am-edrych Pset7 yn ac yn poeri allan defnyddio'r Brace cyrliog a dyfyniadau a nodiant colon, yn ôl pob golwg, pris y stoc yn bresennol ar gyfer y cwmni yr ydych yn pasio i mewn drwy get. Felly, mae hyn yn wahanol o'r rhan fwyaf o'r hyn yr ydym i wedi ei wneud yn yr hysbysiad hwnnw rwy'n llythrennol poeri allan hyn sy'n edrych fel cod JavaScript. [00:30:27] Mewn gwirionedd, mae hyn yn gwrthrych JavaScript. Yn wir, dim ond i fod yn fwy clir, Gwrthrych JavaScript Notation-- JSON-- yn unig yw ffordd ffansi o ddweud bod chi Gall gynrychioli data mewn JavaScript llawer fel y gallwch yn PHP gan ddefnyddio parau gwerth allweddol. Felly os oeddwn i eisiau i ddatgan newidyn yn JavaScript i yn cynrychioli Zamyla, er instance-- a struct i Zamyla-- a byddwn yn ei alw'n fyfyriwr, newidyn hwn. Mae ei adnabod yn un, tŷ yn Winthrop, ac enw i yw Zamyla. [00:30:53] Ond gallaf hefyd yn cael amrywiaeth o wrthrychau. Felly, os wyf mewn gwirionedd yn awyddus i gael amrywiaeth ym JavaScript cynnwys lluosog gwrthrychau o'r fath, mae hyn yn amser yn cynrychioli staff, Efallai fy mod i dri rhain darnau o god yn ôl i yn ôl i yn ôl ar gyfer y rhain tri aelod staff blaenorol. Felly mae'r cystrawen, 'n bert tebyg i both-- i PHP. Ond mae hyn yn arbennig o JavaScript. Mae'n nodiant gwrthrych. Felly beth mae hyn yn ddefnyddiol ar gyfer? [00:31:17] Os byddaf yn ysgrifennu cod sy'n poeri allan JSON-- Gwrthrych JavaScript Notation-- bethau sy'n yn edrych fel hyn neu'r pethau sy'n edrych fel strwythur Zamyla yn, Gall Fi 'n weithredol ddefnyddio hyn mewn rhaglenni i mi ysgrifennu. Gadewch i mi fynd i ajax0.html. Ac mae hyn too-- dim llawer o ystyriaeth i estheteg. Ond gwyliwch beth sy'n digwydd. [00:31:34] Gadewch i mi fynd yn ei flaen ac yn rhad ac am ddim deipio yma. Cliciwch gael dyfynbris. Ac yn sylwi nad yw'r URL wedi newid. Ond i ddim yn cael pop i fyny ag yn ôl pob golwg ceiniog pris stoc heddiw o 0.15 $. Felly, nid yw bob un sy'n ddrwg. Ond y gwahaniaeth yw bod rywsut, Daeth y data hwn yn ôl i mi yn uniongyrchol. Ond gadewch i ni gymryd cam tuag at rhywbeth mwy cyfarwydd. Mewn fersiwn un o hyn, gadewch i mi deipio yn rhydd eto, cliciwch Get dyfyniad, ac now-- oh, roedd hyn yn mewn gwirionedd yn y fersiwn jQuery. Felly, gadewch me-- wnes i ddim cyflym-ymlaen yn eithaf ddigon pell. Gadewch i mi fynd i'r fersiwn dau, a dyna lle roeddwn i eisiau. Sylwi ar yr hyn yr wyf wedi ei wneud yma. Mae gen i we page-- super Fersiwn syml o unrhyw dudalen ar y we Efallai y byddwch yn defnyddio heddiw gyda maes testun yma am ddim ac yna yn ôl pob golwg yn unig testun. [00:32:14] Nid yw hyn yn fath yma, yn ôl pob golwg. Ond os wyf cliciwch gael quote, sylwi fy tudalen ar y we ar fin newid fel pe bawn jyst got neges chwim newydd neu fel pe bawn newydd symud y mapio ac sydd eu hangen i gael mwy o ddata ychwanegu ddynamig at y dudalen we heb y newid URL a'r defnyddiwr profiad cael torri. Yn wir, rwy'n dal i fod yn y yr un ajax2.html place-- union. [00:32:35] Felly gadewch i ni edrych yn unig ar yr enghraifft hon a gweld sut mae hyn yn digwydd. Gadewch i mi fynd i mewn i ajax2.html. Ac yn sylwi ar y ffurflen yn gyntaf. [00:32:44] Lawr yma, dw i'n troi off auto cyflawn. Weithiau mae'n mynd blino os bydd y porwr yn ceisio dangos i chi eich hanes cyfan. Felly, gallwch wneud hynny yn HTML gan dim ond dweud auto cwblhau off. [00:32:53] Rwyf wedi rhoi testun y maes hwn a symbol-- yn hytrach, yn adnabod y symbol. Ac yn awr, mae hyn yn nodwedd ddiddorol. Nid ydym wedi siarad am rychwant, ond gallwch chi feddwl am y peth fel tag paragraff neu div tag. Mae'n hyn a elwir yn yn-lein elfen, sef yn golygu na fyddwch yn cael paragraff torri uwchben ac islaw iddo. Dim ond ei fod yn mynd i aros yn-lein heb taro gyfwerth â mynd i mewn. Felly, yr wyf wedi rhoi darn hwn o HTML i'w benderfynu dynodwr unigryw fy mod wedi galw pris yn fympwyol. Ac mae gen i fotwm Anfon. [00:33:21] Oherwydd erbyn hyn i fyny Yma-- ac mae hyn yn cod cyn lleied mewn gwirionedd super anhygoel gallwch ysgrifennu at wneud gymharol daclus things-- sylwi ar yr hyn yr wyf wedi ei wneud i fyny fan hyn os byddaf sgrolio i fyny i ben y dudalen hon. Rwyf wedi cynnwys yn gyntaf yn fy mhen tag sgript bod cyfeiriadau gwirionedd yn JavaScript ffeil mewn mannau eraill. Mae hyn yn oddi wrth y sefydliad sy'n ysgrifennu jQuery, ac mae hyn yn unig yw rhoi'r diweddaraf i chi fersiwn o'u llyfrgell jQuery. [00:33:42] Felly mae hyn yn fath o fel miniog cynnwys yn C neu ei gwneud yn ofynnol yn PHP. Byddwch yn defnyddio y tag sgript gyda priodoledd ffynhonnell. Ond yn awr mae fy cod hun yn mynd i fod yn iawn yn y fan hyn. [00:33:52] Hysbysiad gen i swyddogaeth o'r enw Dyfyniadau. Ac mae'n edrych ychydig cryptig ar yr olwg gyntaf. Ond gadewch i ni tynnu hyn ar wahân. Rhowch URL newidyn o'r enw i mi. Neilltuo yn llythrennol llinyn hwn. Felly, dyfyniadau sengl, dyfynodau dwbl mewn JavaScript jyst yn rhoi llinyn mi. Beth mae'r plws yn ei wneud? Concatenation. [00:34:08] Felly, mae hyn nawr yw'r gystrawen jQuery sy'n cymryd ychydig ddod i arfer â. Ond mae hyn yn unig yn golygu mynd yn cael 'm' r DOM nod y mae ei dynodwr unigryw yn symbol. Mae'r hashtag yno yn golygu symbol adnabod unigryw. [00:34:21] Mae'r arwydd doler yn y cromfachau ond yn golygu, lapio hyn mewn jQuery rhyw fath o saws gyfrinach felly byddwch yn cael functionality ychwanegol. Ac yna .val yn ôl pob golwg swyddogaeth, neu wrth i ni ddweud yn awr, dull tu mewn nod hwn mai dim ond yn rhoi'r gwerth i chi. Felly, yn fyr, yn hyll ac yn ddryslyd gan fod hyn yn edrych ar yr olwg gyntaf, mae hyn yn unig yn golygu mynd gyda'r defnyddiwr deipio yn, yn ei roi ar ddiwedd y llinyn drwy cydgadwyno MT iddo. Dyna i gyd. [00:34:43] Felly nawr, tair llinell olaf. Gallwch wasgu llawer o ymarferoldeb allan o'r tair llinell. Mae hyn yn arwydd doler, fel o'r neilltu, yn unig yw llysenw am newidyn byd-eang arbennig Gelwir llythrennol jQuery. [00:34:55] Arwydd doler yn unig yn edrych yn cŵl. Felly mae'r gymuned jQuery unig fath o yn ei ddefnyddio fel eu symbol arbennig. Nid yw'n golygu yr hyn y mae'n ei olygu yn PHP. Yn JavaScript, arwydd doler yn yn union fel llythyren o'r wyddor neu nifer ar gyfer newidyn. [00:35:07] Allwch gael dim ond fel yr enw. Dim ond yn edrych yn cŵl. Felly mae'r gymuned ei fabwysiadu fel llysenw am eu llyfrgell ei hun o'r enw jQuery. [00:35:13] Ac mae'n boblogaidd super. Felly ewch JSON yn union hynny. Mae'n swyddogaeth y mae'r Folks yn jQuery ysgrifennodd sy'n cael JSON o server-- Nodiant Gwrthrych JavaScript. O'r hyn URL mae'n mynd i gael y wybodaeth honno? Mae'n debyg o URL yma fan hyn. [00:35:27] A beth ddylai'r porwr wneud fel gynted ag y mae'n mynd yn ôl yr ymateb hwn? Ac mae hyn yn hud y AJAX, er mwyn speak-- Asynchronous JavaScript mewn XML. Mae'n anodd gweld gyda cyfryw a Enghraifft syml ag oedd gennym yma. [00:35:41] Ond roedd hyn yn asynchronous mewn yr ystyr y mae fy cod pan ddienyddio anfon neges at y gweinydd i fynd fy nghael rhywfaint JSON. Ac mae'n digwydd super gyflym fy mod yn cael ateb. Ond yr hyn sy'n ddiddorol yw bod hyn Nid yw llinell o god yn hongian fy chyfrifiadur. [00:35:55] Doeddwn i ddim yn gweld eicon nyddu. Doeddwn i ddim yn colli'r gallu i symud fy llygoden. Fy porwr oedd mewn gwirionedd yn berffaith iawn. [00:36:01] Oherwydd bod y ffordd JavaScript trin y ymateb gan y gweinydd fel a ganlyn. Rydych yn cofrestru hyn y byddech yn galw swyddogaeth alwad yn ôl, a oedd jyst yn golygu, hey, JavaScript. Cyn gynted ag y gweinydd yn ymateb gyda JSON, ffoniwch y swyddogaeth dienw. [00:36:18] Ac os gwelwch yn dda pasio i mewn i swyddogaeth hon beth bynnag llinyn y gweinydd boeri allan fel dadl o'r enw data. Felly, mewn eraill, geiriau, os Im 'yn cydosod ddynamig a quote.php URL pasio yn hyn symbol fel DDIM neu GOOG neu whatnot, Yna, Rwy'n dweud JavaScript mynd yn cael y URL. Cofiwch fod y porwr yn mynd i ddychwelyd rhywbeth sy'n edrych fel y gwelsom earlier-- hyn. [00:36:42] A beth yw'r ail ddadl yma i gael JSON yn ei ddweud yn galw swyddogaeth hon pan fydd y gweinydd yn cael yn ôl boed yn 10 milieiliadau o hyn neu 10 eiliad o hyn. A chyn gynted ag y byddwch yn ei wneud, ychwanegwch y pris at y dudalen. Mae hyn yn gystrawen yma yn unig golygu mynd yn cael y nod oddi wrth y goeden y mae ei unigryw dynodwr yw price-- y rhychwant a welsom yn gynharach. [00:37:01] Mae'r dull a elwir yn HTML jyst yn dweud, ewch yn cymryd lle yr HTML sydd yno gyda data.price. Beth sy'n data.price? Wel, mae'r porwr, yn galw i gof, dangos i mi mae hyn yn dod yn ôl. Felly, mae hyn yn data. [00:37:14] Ac felly mae'n ychydig yn cryptig i weld y coma yma. Ond mewn gwirionedd, gadewch i mi wneud hyn. Gadewch i mi jyst bastio hyn go iawn yn gyflym i mewn i gedit ac yn dangos hyn fel rydym yn dangos Strwythur Zamyla yn gynharach. [00:37:27] Yr hyn mae'r gweinydd yn anfon yn ôl yn Ychydig gwrthrych sy'n edrych fel hyn. Ac felly data.price yw dim ond rhoi i mi 0.1515. Felly, mae llawer o symud rhannau yma i gyd ar unwaith. [00:37:39] Ond mae'r siopau cludfwyd allweddol yw bod gennym y gallu hwn i wneud HTTP ychwanegol ceisiadau sy'n defnyddio JavaScript heb orfod ail-lwytho y dudalen. Ac yna gallwn mewn gwirionedd newid y dudalen we ar y hedfan. Ac mae'n ymddangos bod JavaScript ac ieithoedd eraill gellir ei ddefnyddio yn awr, nid yn unig i droi tudalennau gwe, ond i mewn gwirionedd yn ysgrifennu meddalwedd mewn cyfrifiadur go iawn, nid dim ond gyfyngu i Chrome neu debyg. [00:38:00] Yn wir, Os-- Colton, a fyddech yn hoffi ymuno â ni yn ôl i fyny yma gyda'ch cod labordy, a Chang hefyd? Gadewch i ni fynd yn ei flaen, ar ôl siarad am swyddogaethau dienw a callbacks ac yn wir yn temtio ffawd yma gyda demo byw gyda gwaedu dechnoleg ddiweddaraf, yn un o dyfeisiau hyn Elite Motion. Yn awr, ddyfais hon, galw i gof, oes fawr dyfais USB yn ogystal that-- dyna beautiful-- sy'n plygio i mewn i'ch porthladdoedd USB. [00:38:25] Ac yna mae'n darparu mewnbwn ar ffurf ystumiau dynol drwy ganfod ddefnyddio trawstiau is-goch, yn y bôn, symudiadau gan eich braich. Felly, tra bod yr hyn a geisiodd Maria ymlaen cyn oedd cyhyrol, mewn gwirionedd yn teimlo'n beth sy'n newid eich braich, mae hyn yn is-goch yn seiliedig. Felly, mae'n edrych am symudiadau o fewn y math o maes droed neu felly y ddyfais ei hun. [00:38:46] Felly pam nad ydw i'n cymryd a stab ar hyn yn gyntaf? A gadewch i ni fynd yn ei flaen ac yn taflu chi i fyny ar y uwchben yma. Felly gadewch i ni roi gliniadur Colton i fyny yma. Mae gennym Andrew ar y teledu. A beth fyddech chi'n hoffi i mi ei wneud yn gyntaf? [00:39:00] COLTON: Cer o flaen a dim ond roi eich dwylo dros y boi a byddwch yn gweld rhywfaint o gliter gwych. [00:39:04] DAVID J. Malan: Iawn 'n glws. Mae hyn yn digwydd i gyd mewn amser real. OK. Mae pob hawl, a yep. Felly 'n glws. Mae pob hawl, beth arall y gallwn ei wneud? [00:39:15] COLTON: Ewch i'r sgrîn nesaf a gweld. [00:39:17] DAVID J. Malan: pob hawl. [00:39:19] COLTON: Gêm Ychydig o hwyl lle rydych yn cael i wneud robotiaid. [00:39:21] DAVID J. Malan: pob hawl, felly mae hyn yn ei dwylo ffug sy'n dangos i mi beth i'w wneud. COLTON: Ydy Felly fynd yn ei flaen ac yn cydio yn un o'r blociau a'i roi ar ben y corff hwnnw yn robot. DAVID J. Malan: O, mae fy llaw. Oh. OK, annwyl. Arhoswch funud, OK. Dyna ni. [00:39:41] COLTON: Yr wyf yn gwneud un ar ddamwain. [00:39:43] DAVID J. Malan: OK, byddaf yn cael y boi. Damia! Pan oeddem yn ymarfer hyn yn olaf nos, eich bod yn gwybod beth datganoledig hyn i mewn? [00:39:51] Fel hyn. OK. Un nesaf? [00:39:55] COLTON: Cadarn. [00:39:56] DAVID J. Malan: pob hawl, ac mae un rhan o dair. Mae pob hawl. COLTON: Ac yn yr un yma, byddwch yn cael i-- DAVID J. Malan: O, yr un yma yn hardd. COLTON: --yeah, dewiswch wahân blodyn hwn. DAVID J. Malan: OK. Nac oes? Wedi colli. [00:40:14] COLTON: O, dyna ni. [00:40:15] DAVID J. Malan: Ah, Edrych ar hynny. Iawn 'n glws. Wel, pam dont 'rydym yn cymryd allan un gwirfoddolwr yma a hoffai ddod ar i fyny. Beth am iawn yno yn y gwyrdd, a yw'n? [00:40:27] Mae pob hawl, a gadewch i ni have-- yn hytrach na gwneud hynny, mae rhai ohonoch Gallai gwybod y gêm hon Yma-- torrwch y rhaff, efallai? Gadewch i ni weld. Rydym wedi ein sbectol ar dros yma? [00:40:37] OK. Diolch yn fawr. Beth yw eich enw? [00:40:39] GYNULLEIDFA: Laura. [00:40:40] DAVID J. Malan: Laura? Braf gweld. Os nad ydych yn meddwl rhoi Google Gwydr dros eich sbectol. Mae hyn yn Colton. [00:40:46] COLTON: Hi. Neis i gwrdd â chi. [00:40:48] DAVID J. Malan: Iawn, dewch o gwmpas. Mae pob hawl, felly beth ydych chi'n mynd i wneud yma, wedi chwarae hyn o'r blaen, yn rhoi eich llaw dros y Naid Motion yma. Ac yn awr y dylai eich saeth yn symud. Oh, Na. [00:40:57] GYNULLEIDFA: Na [00:40:58] DAVID J. Malan: Rydym nad ydych am i roi'r gorau iddi eto. OK, aros. Dros yma. Felly sylwi wrth i chi gynnal eich bys dros rywbeth, y llygoden yn dechrau i fod yn wyrdd, a dyna sut yr ydych yn clicio. [00:41:06] Felly hofran dros Chwarae. A dim ond un bys yn iawn. Ac yn awr cliciwch ar y bach guy gwyrdd ar y chwith. Ac yn awr yn dal hyd nes ei fod yn llenwi i fyny wyrdd. Da. Yn awr, fel, lefel un i fyny ei ben. [00:41:16] GYNULLEIDFA: Yeah, rydym am lefel un, yma. [00:41:20] DAVID J. Malan: Da. OK, felly i gyd sydd gennych i wneud ei dorri y rhaff. Mae eich cyrchwr yn yr un wen i lawr yno. [00:41:28] Iawn 'n glws. Mae pob hawl, mae'n ymwneud i gael galetach. Felly dal eich bys dros nesaf nawr. Da. Mae hyn yn un anodd. [00:41:39] GYNULLEIDFA: Oh crap. OK. Mae eisiau i fynd y ffordd honno. Oh yn crap, that-- [00:41:44] DAVID J. Malan: Yeah. Nod eilaidd yw i gael yr holl sêr. Mae pob hawl, nesaf. [00:41:53] Gadewch i ni weld os gallwch gael y trydydd un. Da. OK, yn mynd dros yno. [00:42:06] Cadarn. O, neis iawn. Mae pob hawl. [00:42:11] Felly pam nad ydym yn ohirio'r yma heddiw? Gadael i unrhyw un yn dod ar hyd sydd eisiau chwarae. Diolch o galon i Laura ein gwirfoddolwr. A byddwn yn eich gweld ar ddydd Llun. [00:42:18] GYNULLEIDFA: Mae'n debyg y byddwch am hyn yn ôl. [00:42:21] SIARADWR 2: Yn y CS50-- nesaf