DAVID J. MALAN: Pekala, bu nedenle bu burada Myo koludur bant, bir çift olan biz CS50 son projeler için var. Ve biz sıraya bir gösteri oldu peşin nerede aslında size kadar Bu oldukça sıkı kol burada bant senin kas hareketleri dinler Daha sonra yazılım eşlenen Burada Colton dizüstü hangi vardı iTunes ve Şarkı zaten sıraya. Aksine beni bu demoing daha, Colton laboratuarda oldu açıkça bütün hafta bir gösteri alıyorum bir cesur gönüllü hazır. Birisi gelip istiyorsanız up-- ilk elini gördüm. Hadi gel. [00:01:09] Tamam. Ve senin adın ne? 

[00:01:13] Ä°ZLEYÄ°CÄ°: Ah, Maria. 

[00:01:14] DAVID J. MALAN: Maria, seni görmek güzel. Buraya gel. Beni Colton tanıştırayım. Colton, bu Maria. 

[00:01:21] COLTON: Merhaba, nice to meet you. 

[00:01:23] David J. MALAN: Tüm Doğru, bu yüzden sen, bir adım gidiş Eğer koymak için kolunuzun üzerine bu Oldukça olduğunu, böylece dirsek yakın kadar sıkı. Ve bu arada, en atalım Bizim Google Glass koymak ve bugün teknolojilerini karıştırın edeceğiz. 

[00:01:33] COLTON: İlk gerekecek şeylerin içine bu kanca. 

[00:01:36] DAVID J. MALAN: Tamam. Aslında, en gibi kolunu koyalım mümkün olduğunca bu kabloya yakın bu yüzden ilk o kadar senkronize olabilir. 

[00:01:41] COLTON: Hadi yapalım. 

[00:01:42] David J. MALAN: Ve bu arada, bu yüzden Herkes daha yakından bakış alabilirsiniz, Biz Andrew kamera atacağım Orada ekranda. Bu yüzden bu bir USB kablosu var Maria'nın kol bandı takılan. Ve bana Colton ekranını atmak edelim Bir sonraki projektör üzerinde. 

[00:02:00] Peki Colton cihazı kaydediyor Bir Myo bu kabloya bağlı şimdi. Ve şimdi ne Maria'nın anlık yapmak için gidiyor Aslında yürümek olduğunu kalibrasyon adımları ve yazılım öğretmek nasıl onu kasları tepki O yaptığınızda belli önceden tanımlanmış Yazılım anlıyor jestleri. Eğer gitmek istiyorsanız Ekranın ön. Tamam, denemeye devam. 

[00:02:30] COLTON: Bu gibi gidin. Ve bunun gibi. Ve sağa tüm yol. Geri gitmek. 

[00:02:35] DAVID J. MALAN: Tamam. Farklı bir bakış açısı. Bu değil. Bizi bu. 

[00:02:40] MARIA: Tamam. DAVID J. MALAN: Hayır En yüksek yukarı o yüzden onu geçelim dirsek yakın, hatta sıkı. Tamam. 

[00:02:52] İşte başlıyoruz. Bu CS52X için iyi bir zaman olacaktır. Biz oraya gitmek. 

[00:02:57] Çok güzel. TAMAM MI. Thumb pinky için. 

[00:03:02] Çok güzel. Parmaklarınızı yayıldı. İyi. Doğru Dalga. Bu merakla gösteriyor Sol hand-- ile size 

[00:03:17] COLTON: Evet, bu garip değil. DAVID J. MALAN: Dalga Sağ ve ileriye taşımak. Hızlı ileri atlamak veya sonraki. Bu Tamam Dalga doğru. 

[00:03:25] MARIA: bekleyeceğim Sakın. 

[00:03:26] DAVID J. MALAN: Bazı yardıma mı ihtiyacınız var? 

[00:03:28] COLTON: Yani böyle gidiyoruz. MARIA: Bu dönüyor Başka bir şey olsa. COLTON: Öyle. DAVID J. MALAN: Evet, ben bilmiyorum Neden size bir leftie gösteriyor. COLTON: Neden try-- yok Sadece böyle gidiyor deneyin. 

[00:03:38] DAVID J. MALAN: Hayır? Belki kolunuzu ulaşmak Biraz daha düz dışarı ve bu gibi daha ani olun. Evet, tamam, hadi. 

[00:03:48] MARIA: Üzgünüm. DAVID J. MALAN: Bu senin hatan değil. COLTON: Bu iyi. DAVID J. MALAN: Tüm Hakları. Şey-- 

[00:03:56] MARIA: biz o, bu atlamak mı? DAVID J. MALAN: Evet, haydi kurtulmuş izin. Herkes bir yapmak istiyorum Yani eğer Bu kesme kenarı kullanarak nihai projesi donanım, fark sadece olabilir alışmak biraz zaman. Ve bu-- gerçeklik budur aslında çok kenar kanıyor. 

[00:04:10] Bu ne denir olduğunu geliştirici kiti, hangi aslında bir ön sürüm olması gerekiyordu böylece insanlar tam olarak ne olduğunu onunla mücadele bu--, rakam dışarı nasıl insanların vücudumuzun çalışma teknolojisini kullanır. İstediğiniz Yani eğer daha sonra, dersten sonra, size gelip izin ve ona başka bir bıçak almak. Alkış Ama aksi takdirde, yuvarlak, eğer biz geldiğiniz için Maria için, olabilir. 

[00:04:26] MARIA: Teşekkür ederim. 

[00:04:28] DAVID J. MALAN: Teşekkür ederim. Biz bu asmak edeceğiz, ama biz vereceğiz siz-- nasıl burada bir stres topu dersiniz? Ah, ve- ve-- evet, teşekkürler. Tamam. Eğer vardı meraklı için, Yani Ses seçim ile yabancı Biz orada yapılan Daha önce, inanılmaz bir tv gösteriyor ki kesinlikle gerekir tıkınırcasına izliyor Netflix olmak Burada bu biridir. 

[00:04:51] HOPARLÖR 1: Bayanlar ve baylar, Josh adında bir büyücü. 

[00:05:04] DAVID J. MALAN: Ve görünüşe göre, bu kadar Bir şey şimdi ders sırasında beni metin. Ben söyledim oluyorum Maria Dün bir doğum günü vardı. Dan Yani mutlu yıllar Maria CS50 de. 

[00:05:18] Yani son bir ay içinde okumuş olabilirsiniz Burada bu baylar, Steve Aslında Ballmer, Üniversitede 1977 sınıf, Son zamanlarda Microsoft emekli. O, burada bir lisans daha sonra bir kaç yıl sonra kendini buldu Stanford Business School o bir telefon alınca onun bir arkadaşı aramak koridora yaşamıştı Burada Harvard'da ondan. Bu arkadaşınızın ismi Bill oldu Gates ve zaman, O olmaya Steve işe çalışıyordu İlk iş kişi, gerçekten, Küçük bir şirkette Microsoft isim. 

[00:05:45] Uzun lafın kısası, Steve sonuçta kazanıldı, ne zaman Microsoft'a katıldı Sadece 30 çalışanı vardı. Ve zaman o oldukça yakın emekli, Şirket 100.000 çalışanı vardı son birkaç yıldır. Ve böylece bir web sitesi Verge olarak bilinen video Bu haraç hazırlanan biz diye düşündüm ki size verdiği paylaştı ne kadar enerji Steve duygusu o verir herhangi bir sunum getiriyor. [VİDEO OYNATMA] -Microsoft Dördüncü çocuk gibi. Çocuklar evden yapmak. Bu durumda, sanırım Ben evi terk ediyorum. Bill Hey, whazzap? 

[00:06:23] -Wazzap? 

[00:06:24] Hey, Wazzap? Biz verilen oldum bir muazzam bir fırsat. Ve Bill bize bu fırsatı verdi. Ben bunun için Bill teşekkür etmek istiyorum. Ben çok istiyorum. yenilik hızı yavaş gitmiyor. 

[00:06:42] Daha hızlı ve daha hızlı almak için gidiyor. Birkaç rakip olabilir ne yazık ki ortadan kalkar! 

[00:06:54] Ben bu şirketi seviyorum. Evet! Ben bir bilgisayar değilim, ve ben bu şirketi seviyorum! 

[00:07:08] Geliştiriciler, geliştiriciler, geliştiriciler, geliştiriciler, geliştiriciler, geliştiriciler, geliştiriciler, geliştiriciler. Evet! Web geliştiricileri! 

[00:07:19] Web geliştiricileri! Web geliştiricileri! Dinleyin başka ne hiçbir ekstra ücret ödemeden olsun! 

[00:07:28] MS-DOS yönetici, randevu kalender, bir kart kazık, bir not defteri, Bir saat, bir kontrol paneli. Ve, bunu inanabiliyor musun? Reversie! 

[00:07:35] CD'ye yazabilirsiniz! MSN onları göndermeden! Siz arkadaşlarınıza mail! 

[00:07:40] Tek bir tıklama ile tüm! Bir Microsoft, bir strateji, bir team-- disiplinli, profesyonel, odaklı, ve yaptığımız tüm uzman. Bana eski bir filmden bir satırını kullanın edelim. 

[00:07:52] İlişkiler köpekbalıkları gibi. Onlar ileriye taşımak veya ölürler. Aslında teknoloji düşünüyorum şirketlerin aynı. 

[00:08:01] [SON VİDEO OYNATMA] DAVID J. MALAN: Yani biz çok mutluyuz Steve bize katılacak duyurdu Burada CS50 en sonraki Çarşamba Her zamanki yer ve burada zaman. Uzay olasılıkla sınırlı olacaktır. Ve böylece, bizzat bize lütfen katılmak için kısa bir süre sonra bugün baş veya cs50.harvard.edu/register için. 

[00:08:22] Ve biz tarafından takip edecek Salı noktalar teyit. Sonraki için sabırsızlanıyoruz CS50 içinde ders sırasında Çarşamba. Şimdi, diğer yandan, ben oldu Crimson bu rastlamak sadece Geçen gün. 

[00:08:34] Bu çıkıyor CS50 personeli biri olduğunu ve CS50 öğrencilerinin en az bir Şu anda UC için çalıştıran Başkan ve başkan yardımcısı, hangi beni geri getirdi Kendi gün geri ben sefil UC seçimi kaybetti. Ama gümüş astar ki ben her zaman Hikaye olduğunu söylemek I biri eminim birçok nedeni ben kaybettim Seçim tam bir eksikliği Kamu konuşma için bir yetenek. Ve bu yüzden oldukça dürüst, onu Beni sürdü, bu deneyim Benim genç yıl, aslında imzalamak düşünüyorum Harvard Computer Society, için hangi grup kampüs olduğunu çeşitli teknik temaslarda bulundu ve diğer şeyler. Ve ben onların öğretim devraldı konferanslar ve dolayısıyla , bir fırsat vardı harika bir fırsat, Tam bu üzerinde çalışmaya başlamak için. Ama aynı zamanda, ben bir fırsat vardı Bu deneyim sırasında Kendimi daha HTML öğretmek. Ve bu yüzden dün gece procrastinated HTML tabanlı web sitesi aracılığıyla arıyor Ben, 1997 gibi '98 yılında yapılan benim Burada bu gibi görünüyor kampanya. Biliyorum. 

[00:09:29] Çünkü-- ve tabii ki, haber 1998 yılında bu muhteşem tasarım kararı veya etajer. Eğer istediğiniz ilk şey, kullanıcıların Web sitenizi ziyaret üzerine yapılacak Başka bir bağlantıyı tıklamanız zorunda olduğunu keşiş burada web sitenize girmek için arkasında nerede kefen perde gibi görünüşte benim Kampanya platformu oldu. Ve bu alırsınız hepsi Bugün sadece bir ekran görüntüsü. Ama ben, gibi, içinden okuyor Kampanya afişleri dün gece ve benim platformu. 

[00:09:50] Ve ben zaman çok kızmıştı. Ilginç oldu Ben-- Benim platformu. Yani o zamandan beri sakinleşti ettik. Ama birgün, ben yine çalışacak ve Bu süre kapalı umarım daha iyi. 

[00:10:03] Peki, HTML, ben yapılan bu dil Size in-- yakında çok more-- yapacağız biz oldum şeydir Geç hakkında konuşuyor ve büyük ölçüde için şimdi verilen alarak biz diğer dillere üzerine hareket ettik. Ama sadece bir an için duralım ve bağlamda bu bazı şeyleri koymak. Yani bir cümlede, HTML nedir? 

[00:10:18] Ya, ne için kullanılır? Herkes? Evet. 

[00:10:20] İZLEYİCİ: web siteleri için Biçimlendirme. DAVID J. MALAN: Web sitesi için Biçimlendirme. Yani bir biçimlendirme dili olduğunu Bir web sayfasını yapısı sağlar. Üstbilgi burada gider, başlık buraya, vücut buraya. Bu, bir, koyu bir ayrıntı bu tür italics--. 

[00:10:33] Tamam, iyi. Yani CSS siz-- ve I sağlar Orada bazı özgürlükler aldı cesur-bakan ve italik nedeniyle ile daha iyi bu ile uygulanan oluyor. CSS ne bu--? Bir cümle söylemek. Herkes tüm. Evet. 

[00:10:46] İZLEYİCİ: Bezemeler ve Bunu nasıl tasarlanacağı gibi şeyler. DAVID J. MALAN: Tamam, iyi. Sizi izin süslemeler Bunu tasarlamak ya da stilize kalın ve benzeri şeyler ile italik ve renkleri ve aynı zamanda daha fazla para cezası elemanların taneli konumlandırma. Bu tür şeyleri çekmenize olanak verir Son mil Örneğin, eğer, bu yüzden Pset7 içinde, üzerinde fark etmiş olabilirsiniz sizin portföy sayfası bu noktada iseniz Zaten bir varsayılan tablo o size Kullanıcının stok holdinglerin göstermek için yapmak ve nakit muhtemelen oldukça iğrenç görünüyor Hiçbir boşluk ile varsayılan. Sıkışmış bir Herşey tür Birlikte satırlar ve sütunlar halinde. 

[00:11:18] Peki, bir parça CSS, fark olabilir, aslında bu çimdik ve bunu yapabilir çok daha tanıdık ve çok şey güzel bakmak için. Yani CSS hakkında web sitelerinin stylization. Ama sonra başka bir tanıttı Bize ne sağlar dil, PHP,? 

[00:11:36] Sadece ne yapalım? Herkes. Ötesinde girişim var İlk birkaç satır. Evet. 

[00:11:40] İZLEYİCİ: dinamik içerik oluşturun. DAVID J. MALAN: Mükemmel. Dinamik içerik oluşturun. Ve sen bunu yapabilirsiniz dil herhangi bir sayı. Biz çünkü PHP kullanmak için ne C sözdizimi çok benzer bir parçası. 

[00:11:50] Ama PHP tam olarak bunu yapıyor. Bu dinamik çıktı oluşturmanızı sağlar. Ve bu çıkış bazı olabilir HTML, biz genellikle yapıyorum gibi. O çünkü Ve o da var Bir programlama dilidir mekanizma ile Biz veritabanlarına konuşabilirsiniz. 

[00:12:03] Ve biz sorguları yapabilirsiniz Yahoos gibi diğer sunucular ve programlı bir şey yapmak Gerçekten aksi olabilir yapmak için bir bilgisayar zorlamak istiyorum. Yani PHP bize başlangıç ​​sağlar dinamik içerik çıktısı. Bu mantık tarafından Yani, ben yoktu geri 1998 yılında bir dinamik web sitesi. 

[00:12:16] Bu sadece statik bir web sayfası oldu. Benim içeriği ile değiştirilmesi gerekiyordu el gedit ya da eşdeğeri ile. Ama PHP biz kullanılan ya da ne kullanılmış olabilir, daha doğrusu, gibi bir şey Frosh Sohbet sitesi, hangi kayıtları almak gerekiyordu ve users-- şeylerin bir listesini yönetmek Aslında üzerinde değişiyor Biz ne olsa zaman, Perl, farklı kullanımı zaman dil. 

[00:12:35] Ve sonra son olarak, biz tanıttı SQL-- Structured Query Language. Yani başka bir dil Bu ne için kullanılır? Ne için kullanılır? Biz slight-- girişim olabilir Tamam, biz gitmiyoruz çok uzak olsun Burada orkestra daha. HEDEF KİTLE: Bu bir protokol var veritabanlarına konuşmak için kullanılır. DAVID J. MALAN: Bir protokol veritabanlarına konuşmak için kullanılır. Bana çimdik edelim. Kullanılan bir doğal dil var databases-- seçer konuşmak ve ekler ve siler ve güncellemeler ve aslında Hatta daha fazla özellik olduğunu biz bile daldı değil içine ama var explore-- isteyebilirsiniz , diyelim ki, bir final projesi keşfetmek için. Yani bu çeşitli parçalar vardır. 

[00:13:09] Ve umarım Pset7, olsa bile şartname, oldukça uzun Seni yürümek kasten uzun var nasıl bu şeyler her can ile Birlikte yazılması. Şimdi, Pazartesi biz üzerinde Bizim son dil tanıttı resmen tanıtmak edeceğiz , JavaScript elbette--. Bu, PHP gibi, bir yorumlanmış dil. 

[00:13:25] Ama önemli bir ayrım Ben Pazartesi günü önerdi PHP ise yürütme veya olmasıdır sunucu üzerinde yorumlanır hangi Bu durumda CS50 cihaz olup, ya da ticari web olabilir internet sunucusu, JavaScript genellikle istemci tarafında çalışan bir dildir tarayıcıda değil sunucu tarafta-- böylece. Hangi Sadece açıldığında gibi, demek ki Facebook kaynak kodu yukarı ve tüm bulundu Bu .js dosyaları, ima oldu Eğer Facebook veya ziyaret ettiğinizde çoğu web siteleri bu gün, olsun sadece HTML, CSS, sadece, ancak JavaScript bir sürü genellikle .js dosyaları şeklinde kodu. Ve o browser-- kendi bulunuyor Bu kodu çalıştırır, Mac veya PC--. 

[00:14:03] Ama tarayıcınız yürütür. Bir sanal sıralamada düşünebilirsiniz. JavaScript kodu olmamalı Böylece Bilgisayarınızdaki dosyaları silebilir. Bu mümkün olmamalı sizin adınıza e-posta gönderebilirsiniz. Kısıtlar ve Tarayıcınız tür onunla ne yapabilirim. 

[00:14:17] Yani bu anlamda, biraz var daha az güçlü, belki, daha C. Ama Javascript can, gibi bir kenara, sunucu üzerinde kullanılabilir, Konuşmamız değil eğilimindedir edeceğiz olsa Bu bağlamda bu konuda. Şimdi hep beraber bu kravat verelim. Bir hafta önce artı, bazı HTML sundu left-- süper sıkıcı web sayfasında. 

[00:14:34] Sadece dünya merhaba diyor. Ve sonra ben teklif Doğru biz tür fikirleri çalmak bizim tartışma C veri yapıları ve nasıl bu hiyerarşik düşünmek Soldaki işaretleme dili çekilmiş veya bellekte uygulanabilir düğümler ile gerçek bir ağaç yapısı olarak işaretçiler ve detaylar bu tür ve. Sağda, biz diyoruz Bir DOM-- Belgesi ki Hangi sadece bir Model-- Nesne ağaç söyleyerek bir fantezi yolu. 

[00:14:56] Şimdi, neden bu yararlıdır Bu şekilde düşünmek? Şimdi ile Çünkü JavaScript, biz var çünkü Bu oynamak için alır kod çevre, var gerçek HTML tarayıcıya gönderildi Zaten zaten var tarafından belleğe yüklenmiş Bilgisayarınız yıllarda bir ağaca tarayıcı Böyle RAM, biz JavaScript kullanabilirsiniz Aslında kadar hareket veya yürümek veya arama veya DOM ağacı ancak biz istiyoruz ki değiştirin. Yani aslında, eğer sen düşünmek hakkında facebook.com, sohbet özelliğini kullanıyorsanız, eğer kullanımı Gmail ve Gchat özelliği, Eğer varsa bir şey Tekrar ve tekrar geliyor mesajlar ve yine, bu iletiler, muhtemelen gibi, LI etiketi, Liste Öğe etiketleri, belki. 

[00:15:35] Ya da belki de konum sadece görünen devam divs Her zaman bir anlık ileti olsun. Ve böylece sadece ne demektir Facebook ya da Google yapıyor her zaman bir almak olduğunu sunucudan mesaj, muhtemelen JavaScript kullanıyorsanız sadece başka bir düğüm eklemek için Bu, bu başka bir düğüm tree-- daha sonra görsel sadece görünen ağaç Ekranda yeni bir metin çizgi gibi. Ama onlar takıyor Bu veri yapısı içine. 

[00:15:57] Gibi sınıflara Yani CS124 ve diğerleri, sen olacak Aslında karşı daha fazla kod yazmak Bu gibi veri yapıları. Ama şimdi JavaScript için, biz sadece farz edeceğiz Bu tüm işlevselliği olsun dilin kendisi ücretsiz. Yani bir örneğe bakalım. 

[00:16:09] Bana form.html adlı bir dosya açalım. Süper basit. Sadece bu gibi görünüyor. 

[00:16:15] Hayır CSS, estetik hiçbir düşünce. Bu tamamen işlevsel değil ve görünüşe göre ben Bir e-posta soran bir şifre, Tekrar şifre, ardından bir onay Bazı şartları ve koşulları kabul etmek. Ne bu kaynak kodu Muhtemelen bir şey gibi görünüyor Eğer bir ile sanırım olabilir Şimdi düşünce biraz. Ben burada bir form etiketi var. 

[00:16:32] Bir eylem görünüşte gidiyor register.php adlı bir dosyaya gidin. Ben kullanmak için gidiyorum yöntem olsun. Ve sonra bir metin var Adını e-posta olduğunu alanı. 

[00:16:40] Ben bir şifre alanı var Şifre kimin adıdır. Başka var Adını Şifre alanı biraz keyfi teyididir. Sadece başka bir HTTP parametresi var. 

[00:16:49] Ve sonra biz dışında bu kullanılmaz ettik Frosh Sohbet class-- içinde demo beri bir onay kutusu Sadece tipi çek eşittir. Ve ben bu anlaşmayı arayacağım. Yani ettik tür keyfi ama elverişli bu alanları atadı. Bu formu alır şimdi ne Böylece sunulan, en ne görelim. Ben malan@harvard.edu yaparsanız, Ben Ahududu şifre yapacağız. Ben hiçbir şey bir şifre yapacağız. En işbirliği yapmayalım. 

[00:17:10] Ve ben onay kutusunu olmaz. Bana Kayıt tıklayın edelim. Ve o hm, kayıtlı olduğunuz, diyor. Tam olarak değil. 

[00:17:16] Ama URL değişti. Yani bu formu açıkça izin verildi register.php göndermek için. Ama muhtemelen, ben olmalı Bu hataların bazıları alıcı. Şimdi, Pset7 ve bazı Bizim ders örnekleri, genellikle yazdırmak istiyorum Burada büyük bir kırmızı bir hata mesajı diyerek adını eksik, veya şifre eksik. Biz ve önce biz ettik yaptık done sunucu tarafı hata algılama. 

[00:17:37] Ama pek çok web sitesi bu gün istemci tarafı hata algılama yapmak nerede URL değişmez. Bütün sayfa yenileyin değildir. Sen anında geri bildirim almak tarayıcıdan. Belki bir şey kırmızı gider. 

[00:17:48] Belki bir pop up olsun. Ama gönderme zamanını boşa harcamayın eksik var sunucu veri. Peki nasıl olabilir görelim yanı sıra bu özelliği elde. 

[00:17:56] Beni form1.html gidelim Hangi aynı görünüyor. Ama bu sefer ben yaparsam malan@harvard.edu ve ben kıpkırmızı yazın ve ben daha işbirliği yok ancak Kayıt tıklayın, şimdi fark. Bu seksi çözüm değil. Ben en azından bu hatayı yakaladı ettik. Ve ben uyarı kullandım JavaScript-- fonksiyon hangi biz sadece sınıfta kullanıyorsunuz. Genel olarak, bu kullanmamalısınız çok hızlı bir şekilde alabilirsiniz çünkü kontrol sağlamıştır. Ama eşleşmiyor şifreleri hatadır. 

[00:18:19] Beni go ahead ve Tamam'a tıklayın edelim. Ama ne Buradaki anahtar paket URL değişmedi olduğunu. Yani rahatsız ettik israf Sunucunun zaman onu soran Ben olabileceğini bir soru kendime cevabını anladım. 

[00:18:30] Ve kullanıcı, olsa Bu bahsediyoruz Kullanıcı en uzun Bu düşünmek için gidiyoruz, anında geri bildirim sahip oluyor. Hiçbir gecikme ile yok ağ bağlantısı. Yani bu kaynak kodu bakalım. 

[00:18:40] Form1.html görünüyor Burada yapısal olarak benzer. gerçekte, aynıdır. Ama ben buraya ne yaptığını görelim. Ve bunu yapmak için farklı yollar var. Ve ben en düz yaptık Henüz en şık yolu takipçi değil. Ben bir script etiketini var. Sonra diyoruz document.getElementById ('kayıt'). Ve ben bu değeri depolamak biçiminde bir değişken. 

[00:19:04] Peki ben ne yaptım? Aklınıza gelebilecek Document.GetElementById olarak özel bir fonksiyon olduğunu JavaScript verir tam anlamıyla bir eller olduğunu düğümlerin bir işaretçidir Bu ağaç veya dikdörtgenler. Peki şimdi ne bizim formu değişken var JavaScript gerçekte işaret ediyor. 

[00:19:21] Peki şimdi sözdizimi farklı C. Ama biz burada bir şeyler yapıyoruz. Bir, bu biraz garip C. karşı kesinlikle arıyor Ama hat 35 bakmak. Sol form.onsubmit So. Bu onsubmit olduğunu hatırlayın Bir yapı içinde bir alan gibi. Form değişken düşünüyorsanız Sadece bir C yapı ediliyor, bazı alanlar olabilir. 

[00:19:42] Geri gün içinde, biz öğrencilerin isimleri vardı, Kimlikleri, evler, tarlalar bu tür. Sadece başka bir alan olarak onsubmit düşünüyorum. Ama nedeniyle özel bir alan bulunuyor Tarayıcı beklemek önceden programlanır .onsubmit bir değer değil Bir numara veya dize gibi, ama aslında bir fonksiyonu olarak ya da bir fonksiyonun adresi bilgisayarın belleğinde. 

[00:20:02] Ve gerçekten de, bu ne var Bu anahtar kelime burada yapar. Bu bana yeni bir fonksiyon vermek, diyor. Ama onun adı nedir görünüşe göre, olacak? 

[00:20:09] Pazartesi geri Düşünme. Bu adı nedir Bu sözdizimi dayalı işlev? Hayır, demek istediğim, açıkça var Hiçbir isim kesinlikle associated-- değil burada vurgulanan ettik ne. 

[00:20:21] Ama aslında Tamam. Bu anonim fonksiyonu, ya da bir diyebilirsiniz gibi bazı lambda fonksiyonu. Ve bu sadece anlamına gelir Hala bir işlev var. Bu ada göre arama yapabilirsiniz, sadece bu. Ama bu sorun değil. Yine Çünkü, tarayıcı olmuştur Google gibi şirketler tarafından önceden programlanan Microsoft veya Mozilla veya başkaları veya Sadece biliyorum .onsubmit alan ise Bir form elemanı vardır içinde değer, bir function-- olarak davranın Bir işlev işaretçisi, eğer olacak. Form gönderildiğinde Ve diyoruz. 

[00:20:46] Peki kod idam edilmelidir zaman form gönderildiğinde? Görünüşe göre, her şey küme ayracı içine. Ve bu sadece üslup olduğunu. 

[00:20:53] Siz gibi bu yapabileceğini Biz CS50 yapmak eğilimindedir. Ama JavaScript, çoğu kişi Aynı hat üzerinde tutmak eğilimindedir sadece daha net olduğu için Bu anahtar kelime fonksiyonu ile ilişkili. Peki şimdi ne yapıyorum? 

[00:21:03] Form.email.value eşittir eşitse Boş dize ya da hiçbir şey, burada Ben söylemek için gidiyorum bir uyarı, Eğer e-posta adresinizi sağlamanız gerekir ve sonra return false. Ve o geri dönüş yanlış olduğunu sunulmadan formu engeller. Bu arada, şifre değeri ise Boş, ben kullanıcıya bağırma gidiyorum ve bir şifre sağlamanız gerekir, diyorum. 

[00:21:21] Bu arada şeyler alıyorsanız Burada biraz meraklısı. Form.password.value değilse eşit form.confirmation.value, diğer alan, bağırma Kullanıcı bu şifreleri onlar gibi eşleşmiyor Bir an önce yoktu. Ve sonra bu biri bir biraz daha seksi çünkü ben Ben kavramsal biliyordum biliyorum kontrol onay kutusunun adıdır. 

[00:21:40] Yani sadece bir ünlem kullanabilirsiniz çek değilse noktası söylemek checked-- bu Boolean bulunuyor doğru ya da false-- değer, Ben bu nedenle kullanıcı bağırma olacak. Aksi takdirde, biz aracılığıyla olsun tüm bu koşullar, Sadece gerçek dönelim. Form teslim olsun. Ve bu o zaman ne olacak. 

[00:21:56] Kıpkırmızı edelim tipi. En onay kutusunu Let, Kayıt tıklayın. Ve şimdi hedefe gitmek. Şimdi, orada hiçbir veri tabanı yok. İlginç bir şey yok register.php içinde. Ben sadece bir şey gerekli Aslında konuşmak için. Yani beni burada, duralım. Biz sadece ne yaptık üzerinde herhangi bir soru ya bu yeni sözdizimi bazı nedir? Evet, tamam mı? 

[00:22:17] İZLEYİCİ: Yani herhangi bir onay kutusu otomatik bir Boolean olduğunu. Böyle beyan etmek zorunda değilsiniz. 

[00:22:21] DAVID J. MALAN: Doğru. Size gönderilmeden herhangi bir onay kutusu JavaScript kodu bir HTML formu Bir olarak, evet, tedavi edilecek Boolean doğru ya da yanlış value--. Bu iyi bir soru. Diğer değerler ise, bir Tabii, metin, AKA dizeleri olmuştur. 

[00:22:36] Tüm hakkı, bu yüzden bana izin biraz daha geri sarma. Bu bütün mesele neydi? Sadece temiz olması için. Gibi, biz zaten hatta Pset7 gelen, biliyorum ve hatta geçen haftaki dersin gelen tabii ki kontrol edebilirsiniz örnekler, Kullanıcı bize verirsen $ _GET $ _POST bakın Boş bir değer. PHP boş işlevi unutmayın. 

[00:22:54] Yani sadece ne, net olmak biz de olabilir bir nedeni Bu hata denetimi yapmak istiyorum tarayıcısı içinde? Burada motivasyon nedir? Evet. 

[00:23:06] İZLEYİCİ: Daha hızlı ve değil mi sunucuya gereksiz veri göndermek. DAVID J. MALAN: İyi. Bu hızlı. Sen işe yaramaz göndermek yok sunucuya veri. 

[00:23:12] Yani geri fazlasını elde anında yanıt. Ve genel olarak, kullanıcı deneyim iyidir. Alternatif düşün. 

[00:23:17] Gmail-- için ise ve oldu yıllar önce durum. Yeni bir e-posta Gmail var varsayalım Hesap, ancak tek yolu aracılığıyla Bu gibi olduğunu görmek için, tüm sayfayı yeniden yükleyin. Yoksa tıklayın varsayalım Bir bağlantı e-posta okumak için. 

[00:23:29] Her şey çok yeniden var Eğer e-posta görebilirsiniz. Ya da bir sohbet mesajı almak Facebook--. Eğer yeniden kadar bunu görmüyorum sayfa ya da bazı bağlantıyı tıklatın. 

[00:23:36] Gibi bu çok bir olacaktır can sıkıcı bir kullanıcı deneyimi. Ve bu, o gibi ne olduğunu açıkça, geri ben UC koştu zaman ve web daha az dinamik oldu popüler olarak ve JavaScript değildi gibi şimdi. Ve işler çok alıyorsanız daha dinamik ve çok daha fazlası Bu anlamda istemci tarafı. 

[00:23:49] Ama orada yakalamak burada, ve Bu sinir bozucu bir Yakaladım türüdür. Sadece istemci tarafında eklemek için Böyle algılama anlamına gelmez Siz veya terk etmelidir olabilir Sunucu tarafı algılama. Sen aslında, sizin koymak istiyorum Her iki yerde kontrol hatası. Biri ne Çünkü öğrenilen ders makalesinden bazı alıntılar okumak Bu aptal CMS sisteminin, ile gelen Oldu İçerik Yönetimi sisteminin, kimlik doğrulama sisteminin uygulanması, Ne mekanizması yoluyla kendi giriş? JavaScript. 

[00:24:20] İZLEYİCİ: JavaScript. DAVID J. MALAN: JavaScript, tam, değil mi? Bu JavaScript kullanarak edilmiştir. Ve tam anlamıyla, siz var muhtemelen biraz oynadı Chrome'un Müfettiş ile. Onu bulmak Ve eğer, eleman kontrol edin. 

[00:24:30] Yapmamı üzerinden gidelim Chrome'un tüm seçenekleri. Ve bu da ne kadar kolay olduğunu Bir tarayıcıda JavaScript devre dışı bırakın. , Artık JavaScript kontrol edin. 

[00:24:38] Yani adalet, bir sürü bu gün web sırf kırmak için gidiyor Gmail ve diğer sites-- Varsayalım Facebook-- JavaScript etkindir. Ama aptalca bir şey yapıyoruz gibi sadece kullanıcıların girişi doğrulayarak ve bunu kontrol istemci tarafında hataları, Bir düşman kolayca yapabilirdi. Ve o zaman bile akıllı Eğer çocuklar gibi düşman Şimdi Telnet veya Curl kullanabilirsiniz ya da sadece komut satırı komutları ve aslında sunucuya mesaj göndermek Bu benzer kontrol ve hatalı değildir. 

[00:25:05] Yani bu bir daha fazla olduğunu Kullanıcı arayüzü karar Bu teknik, gerçek bir daha improvement-- uygulanması böyle bir şey istemci tarafında. Yani şimdi hızlı bir bakışta, ama sonra Online yürüyüş erteleme edeceğiz Bu biri için aracılığıyla. Şeklinde iki yılında, biz aslında geçti ve kodunu biraz temizlenmiş. Ama beni birine erteleme izin videoları biz büyük olasılıkla olacak Sadece bir gösterir Pset8 embed adında bir kütüphane kullanarak benzer sözdizimi Bir süper, süper jQuery, JavaScript popüler kütüphane açıkçası çoğu kişi sadece bu gün kullanmak ve hatta karıştırmak varlık JavaScript kendisi. 

[00:25:37] Ve dahil etmek eğilimindedir Bazı dolar işaretleri ve belge gibi anahtar kelimeler Burada parantez içinde. Fakat yine de, beni ertelemek izin Online bazı yavaş öğreticiler yerine sadece sözdizimi bağladım olsun. En geçelim biraz soğuk bir şey Bu uygulamaları açısından. 

[00:25:50] Özellikle Yani, gitmeme izin önde ve burada bu kadar açık. Hadi. Biz oraya gitmek. 

[00:25:59] Beni burada bu resmi açalım. Gereksiz yere karmaşık arıyorum, ama adı verilen bir teknik tarif AJAX-- Asynchronous JavaScript ve XML, XML X aslında artık gerçekten kullanılır. Bu bir şey kullanmak eğilimindedir Başka JSON aradı. 

[00:26:13] Ama burada ne gibi bir şey olduğunu Google Haritalar veya Google Earth çalışır. En doğrusu, anında bu deneyelim. Beni go ahead ve açalım tarayıcımda kadar Krom. 

[00:26:21] Ve beni içine gidelim, , maps.google.com söylüyorlar. Ve aslında, eski iseniz Ne hatırlamak yeterli, gibi, MapQuest, geri gün gibi oldu ve belki de hala bu gibi çalışmak. Eğer şey-- aramak için kullanıldığında 33 Oxford Caddesi, Cambridge, Mass, en paha sen yapalım Aslında olur, eğer yukarı kaydırmak istedi ve aşağı, sola ve sağa Eğer bir şekilde görünecektir Büyük üzerindeki ok, ve Sana başka gösterecektir buraya haritanın çerçeve. Yoksa size bıraktı ve tıklatın ediyorum Buraya gitmek, ya da başka bir tıklama olur ve buraya gitmek istiyorum. Ama bunun yerine bu gün, biz tabii ki sadece Biz gidebilirsiniz hafife almak Cambridge çevresinde oldukça hızlı sadece tıklayarak ve sürükleyerek. Ancak bazı hataları var dikkat edin. 

[00:26:59] Ben yeterince hızlı yaparsanız, ne oluyor gibi görünüyor Ben sürüklerken biraz çok hızlı bilgisayar için yetişmek için? Ne görüyorsun? Evet. 

[00:27:07] İZLEYİCİ: piksel yenileme yok. DAVID J. MALAN: piksel yenilemek yok. Actually-- ve sizi var Aslında, bu görebiliyordu, online ve duraklama izliyor eğer Bu ya da aslında aşağı şeyler yavaşlatır once-- için orada olduğunu görürsünüz fayans, kareler, dikdörtgenler veya bu haritadan kadar eksik Bir saniye sonra, daha fazla veri, Aslında daha fazla resim ekranda görüntülenir. Ve aslında, biz bakarak bunu yaparsanız en, Chrome-- diyelim Chrome's-- kadar görelim. Biz bunu yapamaz. 

[00:27:31] Ah, hoppala. En maps.google.com açalım. Beni tekrar pencere büyük yapalım. 

[00:27:36] Geri 33 Oxford Street gidin. Geçenlerde oldu sitesi neydi? Ben bu gibi, özel rant vardı kendimi o anlık ileti ediyorum ki Çevrimiçi Herhangi bir arkadaş kim duymak istedim. Bazı web sitesi var. Ben o kadar Comcast-- olduğunu düşünüyorum Bir çok büyük Amerikan ISS. Yeni kablo, kaydolurken zaman modem servis veya kablo TV hizmeti, onlar çok makul bir form var nerede onlar adresi için sizden. Ve bu şaşırtıcı var otomatik tamamlama özelliği denir, Google gibi, bu dolmaya başlar Sorunuzun cevabı olarak. 

[00:28:04] Sorun, onlar otomatik tamamlama yapmak Yazdığınız ilk şeyler. Yani 33 yılında yazmaya başlarsanız, o Her evin tam anlamıyla size gösterecektir Amerika'da ki başlar sayı 33, devam etmeden önce Daha fazla yazmanız bekliyoruz. Oxford 33 yazarsanız Yani, o zaman size her sokak gösterir Amerika'da 33 Oxford sahip olduğu bakılmaksızın şehrin adı, Eğer olduğunuzu. 

[00:28:25] Ve sonra yazmaya devam. Ve nihayet, onlar değil ki fark Cambridge evinize teklif hizmeti ya böyle bir şey. Ama nokta bu, en olduğunu oto eşekçe uygulanması Hiç tamamlayın. 

[00:28:34] Ve ben sadece kapalı gidiyorum Bu teğet tekrar. Ama iyi yolu vardır JavaScript ve kötü yolları kullanın. Ve bu mutlaka en iyi biri değil. 

[00:28:40] Ama bu daha önce burada nokta, tirad, araçları buraya açmak oldu ve, geliştirici araçları açmak Daha önce teşvik ettik, ve Ağ izlemek için sekmesi gerçekten hızlı tıklayın gibi. Ve bir sürü fark istekleri oldu olsun. Ben sürükledi beri Tüm bu oldu. 

[00:28:57] Ve büyük olasılıkla, gerçekten Bu satırların bir sürü Şimdi görüntü çizgi JPEG vardır MIME türleri veya içerik türleri. Ne yaptığını krom, çünkü bu Ben tıkla ve sürükle her zaman, tıklayın ve ben, oh, hayata bulunuyor sürükle Karo Google'a sormak gitmek gerekir Burada bitti harita üzerinde, hızlı HTTP üzerinden indirebilirsiniz, ve sonra bu şekilde adlandırılan DOM eklemek Bellek ağacında web tarayıcıları temsil kullanıcı böylece, Bana, bu güncellenmiş kiremit görür. Bu nedenle, böyle AJAX adında bir tekniktir. Geri gün içinde, gerçekten Bu böyleydi eğer Ekranda ne değiştirmek istedim, yukarı tıklayınız olurdu, aşağı, sola, Doğru. Ve sonra yeni bir sayfa açacak. Ama bu gün, her şey daha dinamiktir. Biz insanlar olur şekilde olur aslında interaktif olur umarım. Ve bu başarır denilen bir teknikle yolu Belki de en iyi AJAX, Bir örnek ile açıklanabilir. Öncelikle, beni önde gidelim ve bir dosyayı açmak içinde quote.php denir Günümüz dağıtım kodu. 

[00:29:53] Ve sonra bana symbol-- hoppala yapalım. Bana sembolü yapayım = GOOG sadece bazı hisse senedi için. Ya da aslında, en yapalım Pset ÜCRETSİZ birer. Girin. 

[00:30:05] Ve şimdi geri almak ne fark. Yani bu bir gerçekten Kısa PHP dosyası olduğunu ben sadece kod ödünç olduğunu yazdı Pset7 en arama fonksiyonundan ve bu küme ayracı kullanarak tükürür ve tırnak ve kolon gösterim, görünüşe göre, için geçerli hisse senedi fiyat Eğer get üzerinden geçmek şirketi. Yani bu farklı biz ettik ne çoğundan Ben bu haber yapılır kelimenin tam anlamıyla dışarı tükürme ne JavaScript kodu gibi görünüyor. 

[00:30:27] Aslında, bu bir JavaScript amacıdır. Aslında, sadece daha temiz olması için JSON-- Notation-- JavaScript Object Senin söyleyerek sadece süslü bir yoludur çok JavaScript verileri temsil edebilir gibi PHP yapabilirsiniz anahtar değeri çiftleri kullanılarak. Ben beyan etmek istedim Yani eğer JavaScript değişken için, Zamyla temsil eder Zamyla-- için bir yapı instance-- ve biz arayalım Öğrenci, bu değişken. Onun kimlik ev, biri Winthrop ve isim Zamyla olduğunu. 

[00:30:53] Ama ben de nesneler dizisi olabilir. Yani aslında var istedim içeren JavaScript bir dizi Birden fazla tür nesneler, bu Zaman, personel temsil Ben bu üç sahip olabilir geri kod parçaları Bunlar için geri geri üç eski personeli. Yani sözdizimi, oldukça PHP both-- benzer. Ama bu özellikle JavaScript. Bu nesne gösterimi var. Yani bu yararlı nedir? Ben kodu yazarsanız 

[00:31:17] dışarı tükürür o JSON-- Şeyler Notation-- JavaScript Object o Bu veya malzeme gibi görünüyor , Zamyla yapısı gibi görünüyor Ben aslında bu kullanabilirsiniz programlar yazıyorum. Beni ajax0.html gidelim. Ve bu kadar değil too-- estetik verilen düşünce. Ama ne olur izle. 

[00:31:34] Beni go ahead ve burada ücretsiz yazın edelim. Teklif almak tıklayın. Ve URL değişmedi dikkat edin. Ama görünüşe göre bir pop up aldın 0,15 $ bugünün kuruş hisse senedi fiyatı. Yani tüm bu kötü değil. Ama fark, bu şekilde bir Bu veriler, doğrudan bana geri geldi. Ama doğru bir adım atalım daha tanıdık bir şey. Bu sürüm bir de, bana izin teklifi al tıklatın, ücretsiz yeniden yazın ve oh şimdi--, bu oldu Aslında jQuery versiyonu. Ben yaptım bana-- Yani izin Oldukça yeterince hızlı ileri. Beni sürüm iki gidelim hangi istediğim yerdir. Ben burada ne yaptık dikkat edin. Bir ağ bir süper page-- bilgisi Herhangi bir web sayfasının basit versiyonu Eğer bir metin alanıyla bugün kullanabilir Burada ücretsiz ve sonra görünüşte sadece Metin. 

[00:32:14] Bu görünüşte, burada bir biçimi değildir. Ama tıklarsanız olsun alıntı, benim web sayfasını fark I sanki değişmek üzere sadece yeni bir anlık mesaj aldım ya da ben sadece taşındı sanki harita ve daha fazla veri almak için gerekli Web sayfasına dinamik olarak eklenen URL değiştirme ve kullanıcı olmadan deneyim kesintiye alıyorum. Nitekim, ben hala yaşıyorum aynı duymak yüzden ajax2.html. 

[00:32:35] Yani bu örnekte sadece bakalım ve bu oluyor görüyoruz. Beni ajax2.html içine gidelim. Ve ilk formu dikkat edin. 

[00:32:44] Aşağı burada, ben dönüyorum otomatik tamamlama kapalı. Bazen olur Tarayıcı eğer can sıkıcı size göstermek için çalışıyor senin tüm geçmişi. Yani tarafından HTML yapabilirsiniz sadece otomatik kapatma tamamlamak söyleyerek. 

[00:32:53] Ben bu metin alanı a verdik symbol-- sembolü oldukça, bir kimlik. Ve şimdi, bu ilginç bir özelliktir. Biz, yayılma hakkında konuştuk değil ama bunu düşünmek olabilir Bir paragraf etiketi veya div etiketi gibi. Bir denir ne in hattı elemanı, burada Bir paragraf almazsınız anlamına gelir Yukarıda ve altında kırmak. Sadece olmadan-line kalmak için gidiyor girmek eşdeğer isabet. Yani HTML bu yığın verdik benzersiz bir tanımlayıcı belirlenecek Ben keyfi fiyat adlandırılan. Ve ben bir Gönder düğmesi var. 

[00:33:21] Şimdi ötürü-- ve bu Çünkü aslında süper şaşırtıcı ne kadar az kod Yapmanız yazabilirsiniz seyleri nispeten temiz fark Ben eğer ben burada ne yaptık Bu sayfanın başına kadar ilerleyin. Ben ilk ekledik kafam bir komut dosyası etiketi aslında başvuran bir JavaScript başka dosya. Bu organizasyon dan bu, jQuery yazar ve bu sadece size en son veriyor kendi jQuery kütüphanesinin sürümü. 

[00:33:42] Peki bu keskin gibi tür olduğunu C dahil veya PHP gerektirir. Sen script etiketini kullanın Bir kaynak niteliği ile. Ama şimdi benim kendi kodu Burada doğru olacak. 

[00:33:52] Ben bir işlevi çağrılır Tırnaklar var dikkat edin. Ve biraz görünüyor İlk bakışta şifreli. Ama bu ayrı kızdırmak verelim. Bana bir değişken olarak adlandırılan bir URL ver. Kelimenin tam anlamıyla bu dize atamak. Yani, tek tırnak, çift tırnak içinde JavaScript bana bir dize verir. Artı ne yapar? Birleştirme. 

[00:34:08] Peki bu şimdi jQuery sözdizimi hangi alışmak biraz zaman alıyor. Ama bu sadece bana DOM gidip anlamına gelir olan benzersiz tanımlayıcı sembolü düğüm. olduğu anlamına gelir hashtag benzersiz tanımlayıcı sembolü. 

[00:34:21] Dolar işareti Sadece demek parantez, bu şal Gizli sosu jQuery bir tür yani Eğer ek işlevsellik olsun. Sonra .val görünüşte Bir işlev, ya da biz şimdi dediği gibi, Düğümün içinde bir yöntem bu sadece size değer verir. Kısa çirkin ve kafa karıştırıcı Yani Bu ilk bakışta göründüğü kadar, Bu sadece yazdığınız kullanıcı ile almak anlamına gelir içinde, dizenin sonunda koydum Bunu birleştirerek. Hepsi bu. 

[00:34:43] Peki şimdi, son üç satır. Sen bir sürü sıkmak olabilir üç satır dışarı işlevselliği. Bir şekilde bu dolar işareti, kenara, sadece bir takma addır Özel bir global değişken için jQuery anlamıyla denir. 

[00:34:55] Dolar işareti sadece serin görünüyor. Yani jQuery topluluk sadece tür kendi özel sembolü olarak kullanılır. O PHP ne anlama geldiğini anlama gelmez. JavaScript, dolar işareti olan sadece bir harfle gibi veya bir değişken için bir numara. 

[00:35:07] Siz sadece isim olarak var olabilir. Sadece iyi görünüyor. Toplum Yani Bir takma ad olarak kabul jQuery denilen kendi kütüphane için. 

[00:35:13] Ve süper popüler. Yani JSON tam olarak olsun. Bu bir işlev olduğunu jQuery millet yazdı bir server-- arasından JSON alır JavaScript Object Gösterimi. Ne URL itibaren gidiyor Bu bilgiyi almak için? Görünüşe göre burada bu adresten. 

[00:35:27] Ve tarayıcı olarak ne yapmalıyım Bu yanıtı geri alır kısa sürede? Ve bu AJAX sihirli böylece, bir XML speak-- Asynchronous JavaScript. Bu tür a ile görmek zor Biz burada vardı basit bir örnek. 

[00:35:41] Ama bu asenkron oldu duygusu benim kod zaman bir mesaj gönderdi idam Sunucu bana biraz JSON gidip. Ve süper hızlı oldu ben bir yanıt aldım. Ama ne ilginç bu olduğunu kod satırı benim bilgisayar asmak vermedi. 

[00:35:55] Ben bir iplik simgesi görmedim. Ben kaybetmedim Benim fareyi hareket yeteneği. Benim tarayıcı aslında mükemmel iyiydi. 

[00:36:01] Yolu JavaScript kolları Çünkü aşağıdaki gibi sunucudan yanıt. Sen dediğimiz kayıt Bir geri arama fonksiyonu, hangi Sadece, hey, JavaScript demektir. En kısa sürede sunucu olarak JSON ile yanıt, Bu anonim işlevini çağırın lütfen. 

[00:36:18] Ve bu işleve geçirilen lütfen ne olursa olsun dize sunucusu tükürmek bir argüman verilerini denilen. Yani diğer bir deyişle, eğer Ben dinamik montaj ediyorum Bu geçen URL quote.php ÜCRETSİZ veya GOOG veya etajer gibi sembol, Sonra söylüyorum JavaScript bu URL'yi olsun gidin. Tarayıcısı unutmayın bir şey dönmek için gidiyor Bu earlier-- gördüm gibi o görünüyor. 

[00:36:42] Ve ne ikinci argüman Burada JSON söylüyor almak için Bu işlev çağrısı olduğunu sunucu geri alır 10 milisaniye olsun şimdi ya şimdi 10 saniye den. Ve en kısa sürede bunu gibi, sayfaya fiyatı ekleyin. Bu sözdizimi burada sadece düğüm gidip anlamına gelir olan benzersiz tanımlayıcı ağacından Daha önce gördüğümüz yayılma price-- olduğunu. 

[00:37:01] Bu yöntem, HTML adı Sadece, yerine gidip diyor Data.price ile orada HTML. Data.price nedir? Peki, tarayıcı, hatırlama, Beni bu geri geliyor gösterdi. Yani bu veridir. 

[00:37:14] Ve bu yüzden biraz şifreli var virgül burada görmek. Ama aslında, bana yapalım. Bana sadece bu yapıştırın edelim gerçek hızlı gedit içine Biz gösterdiğim gibi ve bu gösteriyor Daha önce Zamyla yapısı. Sunucu ne geri gönderiyor 

[00:37:27] bir Bu gibi görünüyor küçük nesne. Ve böylece data.price olduğunu Sadece bana 0,1515 vererek. Hareketli Yani bir sürü parçalar burada tek seferde. 

[00:37:39] Ama önemli paketler olduğunu Bu yeteneği var Ek HTTP yapmak için JavaScript kullanarak istekleri sayfayı yeniden zorunda kalmadan. Ve sonra biz aslında can anında web sayfasını değiştirmek. Ve o çıkıyor JavaScript ve diğer diller Şimdi kullanılabilir sadece web sayfaları mutasyona, ama aslında yazılım yazmak için gerçek bir bilgisayar, Sadece Chrome veya benzeri sınırlı değildir. 

[00:38:00] Aslında, sen Colton olur eğer-- Bizi buraya geri katılmak istiyorum laboratuvar kodu ve Chang ile de? En konuştuk olan, önde gidelim Anonim işlevler ve geriçağırımları ve gerçekten burada kader özendirmek Kanama ile canlı demo ile teknoloji, bir Bu Elite Hareket cihazları. Şimdi, bu cihaz, geri çağırma, Biraz USB aygıtı de bu beautiful-- bu ki- Bu USB portlarına takılan. 

[00:38:25] Ve sonra giriş sağlar İnsan jestleri şeklinde Kızılötesi ışınlar kullanarak tespit ederek, aslında, kolunuzdan hareketler. Peki Maria çalıştı ne ise daha önce, kaslı oldu Aslında değişen ne duygu kol, bu esaslı kızılötesi olduğunu. Bu yüzden içindeki hareketleri arıyor Bir ayak ya da öylesine alanında sıralama cihazının kendisinin. 

[00:38:46] Peki neden yapmayız Bu ilk bakışta bir bıçak? Ve en önde gidip atmak izin Burada yükü üzerinde yukarı. Yani burada Colton laptop koyalım. Biz TV'de Andrew var. Ve sen bana ilk ne istersiniz? 

[00:39:00] COLTON: önde ve sadece git Bu adam üzerine ellerini koymak ve bazı muhteşem ışıltısını görürsünüz. 

[00:39:04] DAVID J. MALAN: Çok güzel. Bu tüm gerçek zamanlı oluyor. TAMAM MI. Pekala, ve evet. Çok güzel. Pekala, biz başka ne yapabiliriz? 

[00:39:15] COLTON: Bir sonraki ekrana gidin ve bakın. 

[00:39:17] DAVID J. MALAN: Pekala. 

[00:39:19] COLTON: eğlenceli küçük bir oyun nereye robotlar yapmak olsun. 

[00:39:21] DAVID J. MALAN: Pekala, bu Bana ne yapacağımı gösteren sahte eller. COLTON: Evet Durmayın ve blokların birini kapmak ve o robotun vücudunun üstüne koydu. DAVID J. MALAN: Ah, elim var. Ah. Tamam, güzel. Tamam, bir dakika bekleyin. Biz oraya gitmek. 

[00:39:41] COLTON: Ben kaza biri yaptı. 

[00:39:43] DAVID J. MALAN: Tamam, ben bu adamı alırsınız. Kahretsin! Bu son pratik edildiğinde gece, sen bu işe intikal biliyor musun? 

[00:39:51] Bu gibi. TAMAM MI. Sonraki biri? 

[00:39:55] COLTON: Tabii. 

[00:39:56] DAVID J. MALAN: Pekala, ve üçüncü var. Tamam. COLTON: Ve bu bir, sen amaçlara yönelik olsun DAVID J. MALAN: Oh, bu güzel. COLTON: -Evet, bu çiçeği ayrı almak. DAVID J. MALAN: Tamam. Hayır mı? Cevapsız. 

[00:40:14] COLTON: Ah, oraya gitmek. 

[00:40:15] DAVID J. MALAN: Ah, şuna bak. Çok güzel. Peki, neden almak dont ' Burada bir gönüllü dışarı kim yukarı gelmek istiyorum. Nasıl hakkında orada Yeşil, değil mi? 

[00:40:27] Pekala, ve en have-- edelim senin yerine, bazı yapıyor Bu oyunu biliyor olabilir ötürü-- belki de, ipi kesip? Görelim. Biz burada bizim gözlük var? 

[00:40:37] Tamam. Teşekkür ederim. Adınız ne? 

[00:40:39] Ä°ZLEYÄ°CÄ°: Laura. 

[00:40:40] DAVID J. MALAN: Laura? Görmek güzel. Eğer koyarak sakıncası yoksa Gözlük üzerinde Google Glass. Bu Colton olduğunu. 

[00:40:46] COLTON: Merhaba. Tanıştığımıza memnun oldum. 

[00:40:48] DAVID J. MALAN: Tamam, etrafında gel. Pekala, bu yüzden gidiyoruz ne Burada yapmadan önce bu oynadıktan sonra, üzerine elini koymak Burada Leap Motion. Ve şimdi ok hareket etmelidir. Hayır, evet. 

[00:40:57] İZLEYİCİ: Hayır 

[00:40:58] DAVID J. MALAN: Biz Henüz çıkmak istemiyorum. Tamam, bekle. Buraya. Eğer tutun Yani fark senin bir şey üzerinde parmak, Fare yeşil gitmek başlar, hangi tıklayınız nasıl. 

[00:41:06] Yani Çal üzerinde gezdirin. Ve sadece bir parmak gayet iyi. Ve şimdi küçük tıklayın Soldaki yeşil adam. O yeşil doldurur kadar Ve şimdi tutun. İyi. Şimdi, gibi üst düzey bir yukarı. 

[00:41:16] Ä°ZLEYÄ°CÄ°: Evet, biz burada seviyesini biri istiyorum. 

[00:41:20] DAVID J. MALAN: İyi. Tamam, bu nedenle tüm var ipi kesilir yapmak. İmleç orada beyaz biri. 

[00:41:28] Çok güzel. Pekala, zor almak üzere. Yani önümüzdeki şimdi üzerinde parmağınızı tutun. İyi. Bu bir zor. 

[00:41:39] İZLEYİCİ: Ah bok. TAMAM MI. Bu şekilde gitmek istiyor. Ah bok, ki- 

[00:41:44] DAVID J. MALAN: Evet. İkincil amaç tüm yıldız elde etmektir. Pekala, bir sonraki. 

[00:41:53] Eğer bu üçüncü bir alabilirsiniz Bakalım. İyi. Tamam, oraya gitmek. 

[00:42:06] Tabii. Ah, çok güzel. Tamam. 

[00:42:11] Peki neden bugün burada erteleme değil mi? Herkes oynamak istiyor kim yukarı gelsinler. Bizim gönüllü Laura için çok teşekkürler. Ve biz Pazartesi günü göreceksiniz. 

[00:42:18] Ä°ZLEYÄ°CÄ°: Muhtemelen bu geri istiyorum. 

[00:42:21] HOPARLÖR 2: Bir sonraki CS50-- At