>> [MÜZİK OYUN]
>> David MALAN Bu CS50 olup.
Bu haftanın dokuz başlangıcıdır.
Ve bu olurdu ne Sayın Boole 200 doğum olmuştur.
Yani bu adamlar olduğunu biz ima ettik kime
kullanma konusunda oldukça bazı zamanlar Doğru ve false değişkenler,
1 ve 0 ve böyle.
Ve bu Google'ın oldu Bugün ona haraç.
O 200 açık olurdu.
İsterseniz öylesine CS50 öğle yemeği için bize katılın,
Linke bir göz atın dersin web sitesinde.
Ve böyle yüzler ve arkadaşlar olarak Bu burada Cambridge sizi bekliyor.
Bu gibi Yüzler New Haven sizi bekliyor.
Ve, Ken aslında New Haven nazik yapılmış
Eli bir animasyonlu GIF denen Burada son bir GIF henüz lunch--
Başka bir grafik dosya biçimi, hangi ile o familiar-- konum
Böyle küçük bir şey görünüyor.
Yani sadece bir dizi Tamam of--.
Cambridge burada kimse gülüyor.
Ama New Haven, bu Doğru, gerçekten komik?
Pekala.
>> Yani orada bize katılın yoktur.
İşte Harvard'da, Özellikle, bu Çarşamba,
Eğer ikinci sınıfta iseniz veya çaylak even-- yapma ya da junior-- düşünce
bilgisayara bir anahtar bilim, biliyorum orada olacak o
CS bu adil danışmanlık olmak Çarşamba, kısa bir süre dersten sonra
Bilgisayarda 04:00 PM fen binası Maxwell Dworkin.
Biz ders en bu koymak gerekir Yarın sitesi yanı sıra.
Donuts, ben söyledim, servis edilecektir.
>> Pekala.
Ben alay Çok komik story-- etrafında internette,
ve ben bazı eski arşivleri bulundu Benim eski web sitesi.
Ve bu çevrede konrtol dönüyor zaman, o çok zamanında görünüyor
Ben UC seçimlerin olduğunu toplamak beri tekrar yukarı dişli üzeresiniz.
Yani, UC için koştu sefil kaybetti.
Ve belki bu yüzden parçası oldu.
Yani şu anda web siteme oldu.
Nedense, ben düşündüm insanlara söylemeden önce iyi bir fikir,
Ya benim bir platform oldu ve neden Onlar sahip oldukları, bana oy gerekir
öğrenmek için girmek için tıklayın Geçmişe olan bilgiler,
ürpertici tür.
Ben gerçekten ne olduğunu bilmiyorum.
>> Ama kesinlikle değil mi Benim kampanya yardımcı.
Ben de üst düzey tarafından bulundu year-- Ben bu Muppet takvimi vardı.
The Muppets sonra tekrar rağbet tür vardı.
Ya da belki onlar değildi.
Ben o zamanlar Muppet takvimi vardı.
Ve ben isim serin olacağını düşündüm Harvard'ın ağında benim bilgisayar
frogman.student.harvard.edu.
Anda, hepimiz benzersiz vardı tanımlanabilir konak adları.
Ve bazı makyaj seçebilirsiniz yerine kendi adının isim.
Ve ben nedense Frogman ile gitti.
>> Ve sonra ben bir sürü geçirdi started-- zaman bu linkler aracılığıyla tıklayarak
bu sabah.
Ve bu, benim hakkında sayfası oldu hangi şimdi biraz sevimli görünüyor.
Ama aynı zamanda sadece tanıklık ne kadar teknoloji geldi.
Ben, geri gün, yani 486 şey oldu.
Bu gün, süper, süper değil, süper yavaş ve iyi daha az
sen olabilir daha senin Kendi cepler bugünlerde.
Orada bu konuda daha çok şey var daha utanç vericiydi.
Yani ben onu bırakacağım.
Ama bu benim ilk akın web-- içine oh, hayır.
Bu değildi.
Web programlama içine benim ilk gerçek baskını Ben sadece unuttum bu site oldu.
Bir noktada, ben öğrendim nasıl tekrarlayan arka plan resimleri olun.
Ve bu yüzden, bu fayans etkili bulundu hokey oyuncusu, futbol ve golf gibi
top, ya da her neyse yani Frosh Sohbet web sitesi için.
Ve bu gerçekten, aslında İlk web tabanlı proje I on-- aldı
Belki ikinci sınıf öğrencisi düşünüyorum yıl, genç year--
CS50 ve CS51 bir çektikten sonra Ortak takip sınıfların.
Ben arıyorum fark arşivler aracılığıyla
benim ardılları biri ve arkadaşlar, Lee, tür değişti
kendine telif hakkı.
Ama bu gerçekten bir şey olduğunu Ben utanç için kendi gerekir.
Ama o zaman, bu İlk web sitesi oldu
Ben birkaç hafta önce söylediği gibi, hangi çaylak olabilir tarafından
Burada intramural spor kayıt olun.
Ve bu yüzden çıkıyor Bu arka plan resimleri
Böyle iyi bir fikir değildir.
Ama web yeni ve Hepimiz deneme idi.
Ve bu ne olduğunu ben görünüşte zaman yaptım.
Pekala.
Bu yüzden daha fazla uzatmadan, biz geçiş Gerçekten, size bugün dişli çarklar,
bulabileceğiniz son parçası Nihai projeler için özellikle yararlıdır
ama aynı zamanda başlar Bütün world wide web yapmak
Biraz daha anlaşılır hissediyorum.
Nitekim, biz tanıtmak için gidiyoruz bir daha programlama dili
benzer denilen JavaScript ve farklı şekillerde farklı
dillerin biz bugüne kadar baktım.
>> Yani C, hatırlama, bu derlenmiş bir dildir.
Bir derleyici aracılığıyla çalıştırmak zorundasın.
Sen itiraz için kaynak kodunu almak kodu veya sıfırlar ve olanları.
Ve bu sıfır ve hangilerinin olduğunu CPU, Merkezi İşlem Birimi,
Aslında anlıyorum.
PHP, aksine değil, derlenmiş dil.
Bir ne kadar mı?
Bu bir dil var.
Yani bazı program var bir tercüman olduğunu denir
için dökersin-- üst okumak zorunda alt, sol haklıydın--
ve ne tüm anlamaya senin sözdizimi yapar ve anlamı,
Bir döngü veya koşul olsun veya programlama herhangi başka bir numara
oluşturur.
Yani bir dil var.
>> Sonra HTML tanıttı.
Ve HTML bile değil Programlama dili.
Biz onu ne derim?
Sadece A biçimlendirme dili Bunu söylemenin süslü yolu bir tür
gibi programlama yapıları yok biz bile geri Scratch gününde gördüm.
Hiçbir döngüler vardır.
Hiçbir koşul vardır.
Bu gerçekten bir dildir Verilerinizi işaretleme hakkında
ve biçimlendirme veya Bir şekilde onu yapılandırılmasında.
>> CSS, bu arada, benzer bir programlama dili.
Hatta daha estetik yönlendirilmiş var.
Ve bu ince ayar sıralamak için izin verir yazı tipi boyutu ve renkleri gibi şeyler
yerleştirme ve bütün ve.
Sonra biz
>> SQL.
Yani SQL gerçekten programlama Bir anlamda dil,
olsa özel Özellikle veritabanlarına.
Ama biz sadece size tanıtmak bile seçmek ve yerleştirmek ve silme ve güncelleme
ve diğerleri bir çift, aslında can çıkıyor
fonksiyonları yazmak veya Onlar senin gibi işlemler,
bakmak SQL ve hareket denilen Oldukça PHP ve C fonksiyonları gibi.
Yani o var olduğunu biliyoruz.
Ama biz bile onlarla rahatsız etmeyin Biz sadece burada yuzeysel olarak.
Ve sonra JavaScript, son Bizim dil resmen tanıtıldı.
JavaScript Yani çok olduğu bir dil.
Ve bu tanıdık, do Bunu ayırt etmek istiyorum
Bazı karakteristik olan C ve PHP hem?
Ne farklı kılan nedir?
>> HEDEF KİTLE: Bu derlenmiş değil.
>> DAVID MALAN: Tekrar söyle?
>> HEDEF KİTLE: Bu derlenmiş değil.
>> DAVID MALAN: O derlenmiş değil.
Bu yüzden de, yorumlanır.
Yani derlenmiş değil.
Ama bu PHP gibi biraz yapar.
Ama yine de farklıdır Bazı çarpıcı bir şekilde PHP,
Bu arada, en azından bunu kullanacağız.
Evet?
>> HEDEF KİTLE: Bu istemci tarafı çalışır.
>> DAVID MALAN: Bu çalıştırır istemci tarafı, genellikle.
Bu gerçekten ayırt edici bulunuyor Şu anda bizim için karakteristik.
C anlamda sunucu tarafı oldu Biz CS50 IDE her şeyi yaptım.
PHP şimdiye kadar olmuştur Sunucu tarafı sürece
bu da, çok interpreted-- alır değil derlenmiş, ancak interpreted--
tabii ki CS50 IDE içinde bulutta bir sunucu veya sunucuları.
>> Ama JavaScript bile Senin olsa gidiyoruz
pset, diyelim ki, bunu yazmaya başlamak için Sekiz ve sen projects-- belki son
bunu sağa gidiyor CS50 IDE ve kaydedin
CS50 IDE CS50 IDE içinde dosyalarda ve sırayla, bulut sunucuları
o barındırılan hangi, gitmiyor yorumlamak veya kod çalıştırmak için.
Aksine, gönderilecek gidiyor tarayıcıya aşağı değiştirilmemiş formu.
Ve o zaman IE olacak Chrome ya da Firefox veya Safari veya
ya da, aslında her türlü yorumlar Bu, yukarıdan aşağıya, soldan sağa doğru.
Anahtar fark yaratmanın Yani Bugün için karakteristik
JavaScript istemci tarafı olduğunu ve PHP, örneğin,
been sunucu tarafı vardır.
Şimdi, bu ilginç sonuçları vardır gibi, fikri mülkiyet
ve kim aslında kodunu görebilirsiniz.
Ve gerçekten, sen gidebilirsin ve web üzerinde gördüğünüz en
Birisi sahip olduğu herhangi bir kod JavaScript ile yazılmış.
Bazen, okunabilir bazen Karartılmış oluyor.
Ama zamanında bu konuda daha fazla.
>> JavaScript Yani, güzel yeterli olduğunu Süper benzer, sözdizimsel, C.
Ve PHP gibi çok, Hiçbir ana işlevi var.
Eğer yazmaya başlamak istiyorsanız JavaScript kodu, bugün göreceğiniz gibi,
sadece bunu yazmaya başlayın.
Ama özellikle görürsünüz olduğunu ağ brovserleri bağlamında yararlı olan.
Ancak, benim küçük Genellikle earlier-- disclaimer--
Eğer giderek can söylemek oldu Bugün kullanımı JavaScript sunucu tarafı
node.js denilen süslü bir çerçeve kullanarak CS50 kendi bazı uygulamaların bu
yazılır.
Aslında Node.js. kullandığı 50 Kontrol
Ama biz odaklanmak için gidiyoruz Out burada JavaScript istemci tarafı.
>> Yani burada PHP koşullar kümesidir.
Üzgünüm, aslında açmayız, o Açıklamada, çok doğrudur.
Burada da bir dizi JavaScript koşulları.
Sözdizimsel, o C ve PHP özdeş.
Sayın Boole ifadeleri vardır Benzer şekilde, sözdizimsel
C ve PHP hem özdeş.
Biz de anahtarları var Aynı bakmak JavaScript.
Biz döngüler için var aynı yapılandırılmış
while döngüleri, while döngüleri yapmak.
>> Bu seferki biraz farklı.
PHP her bir yapı için vardı Kullandığınız olabileceğini
ya da belki, pset yedi kullanacağız.
JavaScript bu özel sürümü de vardır için kelimenin tam anlamıyla bir şey söylemek nerede
nesne değişken anahtar için bu gibi diyerek çok kısa ve öz bir şekilde,
Ben bir object-- var ve verdiyseniz yaparız Bir moment-- yine bu konuda konuşmak
ve ben her yineleme istiyorum içeride anahtar değer çiftleri,
Ben nasıl anlamaya gerek yok sıfır, tek olan sayısal endeks onları,
iki üç.
>> Ben tam anlamıyla bu diyebilirim.
Ve her tekrarında, JavaScript Beni değişken anahtarı güncellenir için
Daha sonra ilk anahtar, bir sonraki anahtar olarak, sonraki tuşuna, sonra bir sonraki anahtar,
ve benzeri.
Ve ben tedavi ederek değerde alabilirsiniz JavaScript bir nesne olarak biz göreceğiz
bir var sanki PHP ilişkisel dizi.
Gerçekten de, nihayet sarılı eğer senin bir ilişkisel dizi nedir etrafında zihin
PHP, şimdi olduğu gibi için bunu düşünebilirsiniz JavaScript nesneye aynı.
Ama bu biraz Bir basitleştirme.
>> Diziler güzel yeterli, aynı bakmak bir karakter dışında PHP.
Burada eksik bir şey var PHP ile geçen hafta gördün söyledi.
Ne ihmal var?
Evet?
Hiçbir Dolar işareti.
Yani bir geri konum daha normal dünyası nerede
değişkenler dolar işareti yok.
Ama onları öneki yapmak tipik var, küçültebilirsiniz.
Ve var değişkeni anlamına gelir.
Ve PHP gibi çok gevşek olduğunu türleri vardır sayede typed--,
sayılar ve dizeler vardır ve mantarlar ve bu nedenle forth--
JavaScript benzer türleri vardır.
Ama gevşek o yazdığınız oluyor biz programcılar bunları belirtmek zorunda değilsiniz.
Biz sadece farkında olmak zorunda farklı tipleri vardır.
>> Değişkenler, meanwhile-- burada nasıl Biz "Merhaba dünya" ilan olabilir
bir dize olarak.
O aynı olduğunu fark PHP ama hiçbir Dolar işareti.
Ve bu bir şey biz edeceğiz olduğunu Daha fazla bugün görmeye başlayabilirsiniz,
Eğer bir nesne vardır sayede anahtarları ve değerleri ile.
Ve denemek isterseniz Son hafta-- gelen anlaması için
sözdizimi biraz farklıdır.
Ama biraz aklı kaç check-- anahtarlar bu nesneye sahip gibi görünüyor?
Yani dört görüyorum.
Ben iki görüyorum.
>> Yani aslında iki.
Yani bu bir koleksiyon İki anahtar-değer çiftleri.
Anahtar, değeri FB olan sembolüdür.
Anahtar, değeri 101.53 olan fiyattır.
Yani bu iki anahtar-değer çiftleri vardır.
Ve, PHP-- hatırlamak ve bu yine sadece bir tür sözdizim fark.
Her olmadığını entelektüel ilginç.
PHP'nin bu aynı yazılı olabilir follows-- alıntı olarak bir şey, eşittir.
Ve ben köşeli parantezler bu değiştirin.
Ve sonra bu değişiklik Bir alıntı sözcük, "fiyat".
Ve sonra iki nokta üst üste kullanmayın.
Geçen hafta ne kullandın?
Evet, eşittir işareti funky gösterimini ok.
>> Ve sonra ben burada aynı şeyi yaptı.
Burada aynı şey.
Ve hepsi bu.
Bu değil varsa Yani gayet Gerçekten hafızaya battı sadece
Henüz gerçekten çünkü entelektüel ilginç.
Sadece sözdizimsel farklılıklar var.
Ama fikirleri tam olarak aynıdır.
Bu değişkenin İçinde JavaScript alıntı
anahtar-değer çiftleri bir koleksiyon olduğunu biri, bir sembolü
fiyattır.
Ve ben o değerlere alabilirsiniz aşağıdaki sözdizimini.
Sadece PHP, I could gibi let sanki şey gibi yapmak
Beni bu kutu biraz daha büyük yapmak.
Sadece PHP, I could gibi kahretsin, ah bu-- olun.
Hadi.
>> Sadece PHP-- Tamam, yaparız gibi sadece sunum notları kullanın.
Sadece PHP gibi, I can ["sembolü"] $ alıntı $ alıntı yapmak,
ve bu beni alacak değeri "sembolü."
JavaScript, bu olacak özdeş, ben sadece bunu sayede.
Tek şey Eksik dolar işaretidir.
>> Yani güzel yeterli, daha sonra, var değil tüm bu kadar yeni sözdizimi.
Yani biz odaklanmak Ne bugün, gerçekten, bir fikir ve uygulamaların bazılarını.
Ve ilk böyle uygulama bu sen olabilir
Eğer pset daldı eğer gördük Yedi zaten bu sözdizimi.
Yani ettik pset yedi, eğer görülen ya da henüz görmedim,
Verdiğimiz bir dosya var olduğunu biliyorum Eğer config.json-- JavaScript denilen
Notasyon Nesne.
Neden?
Biz sağlamak için mümkün istedim bazı anahtar-değer çiftleri içeren bir şablon.
Size bir liste vermek mümkün istedim konağın, sunucunun adı.
Sana vermek istedim Kullanıcı adınız için yer tutucu
ve şifreniz için bir yer tutucudur.
Eğer görmüyorsanız Bu, henüz endişe etmeyin.
Pset yedi bu konuda daha fazla [? spec. ?] Ve daha sonra,
Açıkçası, biz seni istiyorum to-dos doldurmak için
Eğer giriş yaptığınızda, çünkü Her biriniz CS50 IDE,
Kendi adınızı ve şifrenizi var.
>> Bu yüzden yarım düzine kullandım veya daha fazla farklı dosya formatlarını destekler.
Biz bir .txt dosyası kullanılmış olabilir.
Biz bir CSV dosyası kullanılır olabilir.
Biz kullandım verebilecek bir INI dosyası, bir XML dosyası,
bir sürü daha kısaltmalar olduğunu Hiç duymuş olabilir.
Bu keyfi tür günün sonunda.
Ama bu gün süper popüler bir metin biçimi JSON-- JavaScript Object denilen
Olarak göstermek bu gibi görünüyor.
Bu, biraz şifreli var ama desenleri dikkat edin.
Sen açık kıvırcık ile başlar kaşlı ve aynı ile sona erer.
Inside o şeydir.
Bu anahtar-değer çifti var.
Yani bu ben bir nesnedir Burada ekranda bakarak
bu bir değeri vardır, bir anahtarı vardır.
Ve sadece dayalı çıkarım Bir önceki model, anahtarı burada ne var?
Veritabanı, bir şey için kolonun sol.
>> Şimdi değer olması umulur Birden fazla satır bu sefer.
Ama değer bir kıvırcık ile başlar brace ve bir küme ayracı ile biter.
Peki ne önerirsiniz olduğunu veritabanının değerinin türü?
Bir sözlük ya da sadece daha fazla kısaca, bir amacı.
Sağ?
Bu bir veri yapısı bir tür olduğu kendi içinde diğer yapıların da kullanabilirsiniz.
Bütün bu şey iseniz Yani Bir object-- ve nesneyi çağıran
pairs-- anahtar-değer sadece bir demet veritabanının kendisi değeri bir nesnedir.
Veritabanının değeri bir sürü vardır anahtar değer çiftleri, ilki
olan ev sahibi, daha sonra, adı Kullanıcı adınızı, sonra şifre,
Değerleri her arada, bu kadar çift ​​tırnak sadece sıkıcı bir dize.
>> Yani olmasa bile Henüz süper net,
Bu sadece bir olduğunu biliyorum Standart, oldukça sıkıcı bir yol
standart bir formatta veri depolama.
Ancak ortak hatalar size Hatta pset yedi, yapmak olabilir,
Biraz aptalca şeyler vardır eğer gibi yanlışlıkla orada virgül ihmal.
Bu dosyada neden gidiyor mutlaka okunabilir değil varlık.
Yanlışlıkla gibi şeyler atlarsanız tırnak, okunabilir olacak değil.
Bu yüzden oldukça nitpicky dosya biçimi var, ama süper yaygın biri.
Ve biz bile bunu kullanmak için ne Eğer herhangi bir JavaScript aksi kullanmayın,
pset yedi.
>> Pekala.
Yani bu resmi hatırlıyorum.
Biz, HTML, hakkında konuştuk Kod bu gibi görünebilir.
Bu HyperText Markup Language olduğunu [Inaudible] için sadece "merhaba dünya".
Ama sonra önerdiği Geri iken yardımcı takdirde,
Eğer düşünmeye başlamak isteyebilirsiniz Bu zaten bir ağaç gibi yaklaşık.
Aslında, girinti biz Okunabilirlik aşkına sadece kullanmak
veya stilin aşkına üzerinde için Sol can tür
Bu ağacın, seni çevrilmesi Bazı özel kök düğüm var yaparız
genel olarak, belge denilen aşağıda kök HTML öğesi veya etiket, HTML,
bu daha sonra iki vardır Çocuklar, baş ve gövde.
>> Ve sonra da, baş bir başlık vardır.
Ve başlık bir metin değeri vardır.
Ve vücut benzer bir metin değeri vardır.
Eğer rahat bir deyiş iseniz Yani evet, bu HTML sürebilir
ve benzeri bir resim çizmek Bu, sağ taraf
Güzel bir zihinsel model şimdi çünkü Biz JavaScript var, bir programlama
dil olduğunu tarayıcılar can yürütmek ve sizin için yorumlamak,
o ne çıkıyor Biz kodda yapmak üzereyiz
Bu işlemek için başlangıç ​​olduğunu bellekte ağaç yapısı.
Biz inşa etmek zorunda değilsiniz bellekte ağaç.
Biz tür yapmak zorunda değilsiniz pset beş tarzı veri yapısı
karmaşıklığı.
Güzel yeterince üzerine tarayıcı, alt HTML top yorumlama,
sola veya sağa, kelimenin tam anlamıyla gidiyor bize bir işaretçi eşdeğer el
ücretsiz bu bütün ağaca.
Bu zor iş yapar.
İşte ne Mozilla ve Apple ve diğerleri bizim için yapmış.
>> Ve JavaScript ile biz gidiyoruz kontrol edebilmek ve değişim ve yapılacak
ilginç şeyler O ağaç, aksi takdirde bilinen
Bir DOM veya Belge Nesnesi Modeli olarak.
Ne şeyler tür?
Peki, bu çıkıyor JavaScript, var
Bu çamaşır listesi yer alabilir olaylar.
Ve biz gerçekten kullanmadıysanız Kelime hafta sıfır ve pset beri
Sıfır biz Scratch hakkında konuştuk.
Çoğunuz muhtemelen kullanmak vermedi Kazı Kazan projesinde bir olay.
Ama hatırlamak olabilir Basit Marco Polo
örnek, nerede biz iki vardı sprite, kimi birini Marco dedi.
Kime, sonra dinleme üzerine diğer ve bu olay işitme, Polo, dedi.
Değilse, çekinmeyin O kadar geri geri bakmak.
>> Ama bu sadece etmektir demek, ve ne tür can
Bunların isimleri sonucuna şeyler, JavaScript, o çıkıyor,
Bize dinlemek için bir yol verecek Fare aşağı gidiş veya fare kadar gidiyor için
veya tuşunu basılı veya anahtar gidiyor gidiş yukarıya veya onsubmit onSelect
ya da bir şey onresizing.
Diğer bir deyişle, herhangi bir fiziksel aksiyon İnsan bir tarayıcı ile alabilir
Her gün yapmak, yazabilirsiniz Bunun için kod bu olaylar için dinler
ve sonra uygun bir şey yok.
>> Örneğin, Google Maps kullanmak, Eğer tıklayın ve hareket ne olur
Fare, tipik haliyle?
Eğer tıklayın ve sürükleyin?
Evet?
Kesinlikle.
Haritayı hareket etmeye başlar.
Yani bir çeşit ne görebiliyorum Buraya, şuraya ne.
Ve nasıl Google, uygulamak mu?
Eh, muhtemelen, onlar Bu olayın bir çift kullanarak
dinleyiciler, bir o , fare üzerindeki dinleyin diyor
ne zaman kullanıcı fiziksel yüzden down-- Onun trackpad veya onun fare iter
aşağı.
Sonra arıyoruz hareketi gibi bir şey
ya da başka bir olay olduğunu Bize sürükleyin yakalayabilirsiniz.
Ve aslında, sürükle bu benzer olduğunu dot olası seçeneklerin nokta listesini süslüyor.
>> Yani bu güçlü olacak yol kullanıcıya yanıt başlamak için
Hatta o aslında tıkladığında önce açık gibi bir şey gönderin.
Ama biz tanıtmak için gidiyoruz Bir kaç konu oraya.
Ama önce, diyelim geçiş bazı gerçek kod.
Yani gidiyorum önde ve açmak dom-0,
hangi çok basit bir örnek Burada ben sadece yakınlaştırmak eğer
Benim için burada bu girişe sahiptir.
Ve ben devam edin ve yazın gidiyorum Benim adını "Davut" ve Gönder'i tıklayın.
>> Ve sonra, gerçi çeşit ucuza, ben , söylüyor açılır bu istemi var
"merhaba, David!"
Yani bu tür bir gibi bizim "merhaba dünya"
Biz süre geri C yaptım ve Hatta PHP dinamik ettik çünkü
Adımı çıkışı.
Burada başkasının adını yapabilirsiniz.
Ben sadece, bu değişebilir gibi, Hannah, Gönder'i tıklatın.
Ve gerçekten de, küçük pop-up değişir.
>> Şimdi, pop-up biri web en kötüye özellik.
Ve aslında, geri gün pop-up blokerler
moda haline geldi çünkü sen Bazı website-- gitmek istiyorum
belki sorgulanabilir duymak yüzden aniden o olur
Ekranınızı peppering başlayın pop-up bir sürü ile.
Ve böylece bu yeteneği açılır kullanıcının önündeki pencereler
Özellikle olmamıştır İnsanlığın tarafından iyi aldı.
Gördüğünüz İşte bu yüzden Bu şeyi önlemek,
hangi sadece bu her şeyi çirkin yapar.
Yani bir ihtiyacımız olacak kullanıcı istemi için daha iyi bir yol.
Ama şimdi, o iş gibi görünüyor.
Yani sadece sezgisel, ne Buradaki olmak görünüyor?
Devam edin ve Gönder'i tıklatın ve o zaman bir şey açıkça oluyor.
Ama olmuyor ne oldu bu Geçen hafta ben Gönder tıkladım her zaman?
Ekranda ne olmadı?
Maalesef?
Yükle.
URL hiç değişmedi.
Ben, bu dom-0 olduğunu söyledi ve ben dom-0 hâlâ değilim.
Normalde, biz diğer bazı değiştirildi olsun istiyorum Register.php veya benzeri gibi URL.
>> Ama ben bile görevden ne zaman Tamam tıklayarak bu şey,
URL'ye fark kalır tamamen koydu.
Ve aslında, ben biraz eğer şüpheci, beni Chrome'u açalım.
Bana Ağ sekmesini açalım.
Ve şu anda boş olduğunu fark.
Beni go ahead ve Maria yeniden edelim.
Hiçbir ağ trafiği var.
Yani hiçbir HTTP var.
>> Yani aslında, ben kaynak koduna bakarsanız bu-- için bana bu pencereyi kapatalım
ve Kaynak görüntüle gidin.
İlginç.
Bazı var gibi görünüyor Yeni etiketler, aralarında script.
Öyleyse CS50 içinde bir göz atalım IDE tam olarak kullanıcıya gönderilen şey.
>> Yani burada atalım bu-- HTML sadece odaklanın.
İşte dom-0.html alt yarısı.
Ve bir başlık var fark, Bir kafa etiketi, vücut etiket, bir form etiketi.
Ama ne olarak size atlar Farklı asla ettik özellikle
herhangi bir JavaScript Kendinizi yazılı.
Beni biraz ilerleyin edelim Burada sağa.
Ben bir giriş var, için başka bir giriş gönderebilirsiniz.
Ben yeni tür bir kimliği, var.
Ama biz CSS ile bu gördün.
Başka ne kesinlikle yeni?
Evet?
Güzel.
>> Pekala.
Yani onsubmit yazan yere, takip etmek göründüğü gibi dikkat edin.
Bu özniteliği HTML nomenklatüründe.
Onun değeri burada alıntı dizedir.
Ve bu biraz görünüyor İlk bakışta garip.
Bu HTML değil.
Bu CSS değil.
Tahmin edebileceğiniz gibi bu, JavaScript olduğunu.
Yani bu yerleşik görünüyor Web sayfası Greet adı verilen bir fonksiyonudur.
Ve bunu sadece çıkarım ediyorum Bir kelime, çünkü selamlıyorum.
Bu, açık bir paren var yakın parantez, noktalı virgül.
Bir C işlevi gibi görünüyor PHP işlevi gibi görünüyor.
>> Ve gerçekten de gidiyor JavaScript fonksiyonu.
Sonra yanlış dönüyorum.
Biz geri geleceğiz sadece bir an o.
Ama nerede bu işlev tanımlanır?
Peki beni yukarı izin dosyanın üstüne.
Ve uzun bir çizgi var olsa bile, nispeten basittir.
Beni burada uzaklaştırmak edelim ve Bu dört satır odaklanın.
>> , JavaScript Yani sadece PHP gibi, sadece
diyelim ki, kelimenin tam anlamıyla, kelime "işlevi," İşlevin adı,
ve daha sonra herhangi parantez Bu durumda hiçbir argüman arguments--.
Ve hiçbir dönüş türü var JavaScript, PHP gibi sadece.
Yani C'den biraz gevşek var Açık kaşlı ayraç, yakın kaşlı ayraç.
JavaScript yerleşik function-- olduğunu önerilen bir function--
ancak bir işlev uyarısı denilen Hayatta kimin tek amacı
oldukça çirkin yukarı çekmek için Biz bir an önce gördüm istemi.
>> Şimdi bu bir lokma türüdür.
Burada neler oluyor?
Yani başlayalım Burada her şeyi vurgulayın.
Yani uyarmak için aynı argüman var.
Ve ne oluyor?
Bu sadece bir dize gibi görünüyor.
Ve PHP aksine ve aksine çıkıyor C, bu JavaScript farketmez
Tek tırnak veya çift tırnak varsa.
Onlar eşdeğer olacak.
Ve açıkçası, bu sadece Bugünlerde popüler
Her zaman için JavaScript programcılar için nedense tek tırnak kullanın.
Bunu yapmak için sadece bir şey var.
Ama biz, hem de çift tırnak kullanabilirsiniz.
>> Yani artı yeni bir karakterdir.
Ama o sizin Yaptığım kim Bu daha önce artı ne demek?
Evet.
Concatenate.
Bu yüzden PHP gördüm.
Sadece nokta var PHP operatör o
birlikte iki dizeleri birleştirmek olacaktır.
C boyun bir ağrı bunu idi.
Oldu pset altı, hatırlayın boyun bir özel ağrı,
Kullanmak zorunda strcat işlevinin gibi bir şey
bellek ayırma sonra yığınında ya da öbek üzerinde.
Sen çemberler üzerinden atlamak zorunda kaldı Sadece iki dizeyi bitiştirmek için.
JavaScript, bu süper basit.
Sadece aralarındaki artı operatörünü kullanın.
>> Yani karmaşık görünümlü şey, bu gibi görünüyor
çünkü sonunda Bütün bu dize, ben sadece
ünlem işareti üzerine bağlamak.
Ne oldu haşhaş bu yüzden eğer "Merhaba, David", "merhaba, Hannah,"
"Merhaba, Maria," ve benzeri, açıkça ikisi arasında orta bir şey o
Artılar bana ne erişimi vermelisiniz?
Ne emin var mı?
Evet.
Yani burada davranarak edeceğiz kendi adını cevap, değil mi?
Bu yüzden onların adı finalde attı Sonuç. Peki bu ne anlama geliyor?
Eh, ben daha önce önerdi DOM sözde resim
Bu özel kök elemanı vardır yol kadar üst belge denir.
Ve şimdi, o gidiyor, çıkıyor Özel bir küresel değişken olarak
JavaScript bir olan yerleşik yararlı işlevselliği sürü.
Yararlı işlevsellik arasında yetenek herhangi soyundan düğümünde alır.
Bu kareler veya dikdörtgenler veya elips sadece tabiri caizse, bir ağaç düğümleri.
>> Yani yerleşik çıkıyor JavaScript'in belge nesnesi
aksi takdirde olarak bilinen bir fonksiyonudur yöntem, yani getElementById denir.
Çağırmak için sözdizimi JavaScript bir işlev
Bir nesne ya da a içeride Değişken sadece nokta gösterimi ile olduğunu.
Ve biz C gördüm Ne struct sözdizimi.
Sen, biraz PSET yedi görüyoruz çeşit, sen CS50 :: sorgu gördüğünüzde.
PHP kolon kolon başka bir şeydir olan bir işlevi çağırmadan yolu
Bazı nesne içindeki.
>> Ama şimdi JavaScript için, bu sadece bir nokta var.
Ve böylece bu fonksiyon, güzel yeterli, tür
o KODU eleman almak does-- ne diyor.
Bir eleman sadece başka bir adıdır DOM bir etiket veya düğüm için.
Ve böylece kimlik "adı," eleman almak Benim HTML var burada bu-- demektir.
Ve bu HTML tabanlı ne düğüm ya da ne HTML etiketi Ben kimim
programlı teslim olacak document.getElementById arayarak?
>> Evet, kesinlikle.
Ben giriş alacağım kimin kimliği var unsuru "adı" dir.
Yani özellikle yapabilirsiniz Bu fonksiyonun düşünmek,
vermenin bir yolu olarak, getElementById belirli düğüme bir işaretçi geri
ağaç.
Biz bu çizilmiş değil ağaç, ama bir yoldur
bu erişim elde dikdörtgen veya dikdörtgen
benzersiz kendi kimliği yoluyla tanımlayarak.
>> Şimdi, neden bu yararlıdır?
Eh, o çıkıyor Eğer kazanılmış bir kez o
dan dikdörtgen Bu düğüm, resim, bunun içinde o düğüm,
bu da, bütün bir grup vardır properties-- anahtar-değer çiftleri
veya değer olarak adlandırılır biri veri.
Yani kelimenin tam anlamıyla, bir tür ağız dolusu her şeyi açıklamak için.
Ama günün sonunda, Bütün bu yapar sana vermek
Kullanıcı yazdığınız bir dize Bu hiyerarşik moda.
Ama ben sevmiyorum Bunlardan çift.
Ya da daha doğrusu, bazı merak hala var.
Tüm bu iş gibi görünüyordu.
Neden geri döndüm sizce selamlıyorum çağrıldıktan sonra yanlış?
Bu da, biraz çirkin görünüyor Ben iki tablo var olması
noktalı virgül ile ayrılmış.
Tahminde bulun.
Ben return false çıkardıysanız ne sadece içgüdüsel, ne olabilir?
Maalesef, tekrar ediyorum?
>> Windows'un bir demet açın.
Yani potansiyel belki bir şey Bu olur gibi.
Başka?
Bir istek nereye teslim olabilir mi?
Aynı sayfaya.
Bu yüzden, aslında, hepsi bu Burada cevap yakın,
Hatta aksine olsa Geçmişte, ben oldum
Eylem niteliği belirtilen, normalde biz yapmak zorundayız.
Varsayılan var ortaya çıktı. Eylemi belirtmezseniz,
bu teklifi demek gibi, unquote veya dosyanın kendisinde adı,
Bu durumda, bu olur dom-0.html gibi.
Sadece biraz, anlaşılmaktadır ki ya da daha doğrusu ima etti.
>> Ve ben bunu yapmazsanız eğer öyleyse, en dikkat edelim.
Bana bu kurtaralım.
Ve ben yalancı getiri kaldırdık.
Beni bu geri dönelim örnek ve kuvvet yeniden yükleyin.
Ve beni önermek görmüş olabilir Bu CS50 üstünde bir demet tartışın.
Herhangi bir şey davranıyor Eğer korkak ve Beklediğiniz gibi tarayıcı, davranıyor değil
çoğu zaman sen tutmak isteyeceksiniz Shift ve sonra yeniden yükle seçeneğini tıklatın.
Yani yeniden her dosya zorlar ve tarayıcınızın önbelleğini yerel kullanmayın
veya kopyalama şimdi, böylece beni önde gidelim ve Benim Müfettiş, Ağ sekmesini açın.
Ben tıklayın gidiyorum Oturum çünkü Koru Ben
bu satırları silmek istemiyorum Ben başka bir yerde whisked olsun bir kez.
>> Beni burada devam edelim ve Andi yazın, Gönder'i tıklatın.
Pekala.
Beklendiği gibi görünüyor.
Bu "merhaba, Andi" diyor.
Beni Tamam 'ı edelim.
İlginç.
Sayfa değiştirildi dikkat edin Orijinal sayfaya olsa.
Değiştirilen URL tür dikkat edin.
Bu, bir soru işareti eklendi bu genellikle bir göstergesidir
biz bir şey göndermek için çalıştı.
Ve sonra altta, daha açık,
Burada gerçek HTTP isteği, 200 yanıt var olanı
Beni buraya geri getirdi.
>> Yani bu değil ne olduğunu Biz doğru yapmak ister misin?
Çünkü ben .... istemiyorum Bütün sayfayı yeniden yükleyin.
Bunun yerine dönmek istedim yani kısa devre olarak yanlış
tarayıcının varsayılan davranış, hangi sayfayı göndermek için, tabii ki oldu.
>> Yani bir göz atalım marjinal iyi bir örnektir.
Bu dom sürüm biridir.
Ve aşağıdaki dikkat edin.
Eğer grok yoksa Tamam kod satırları hepsi.
Ama temelde farklı nedir Bu uygulama hakkında?
Ben davranır şart olacak Aynı, aynı şeyi yapar.
Açıkçası farklı ne yaptım?
Evet?
>> HEDEF KİTLE: [duyulamaz].
DAVID MALAN: Evet.
Yani fonksiyon tanımlanır differently-- formundan mevcut diğer bir deyişle,,
Orada hat 7-- veya daha çok, satır 8-- Artık
Ben onsubmit niteliği var.
Önceki örnekte, ben bu vardı.
Ve sonra ben tam anlamıyla benim kod yazdı.
Ve sonra return false dedi.
Ve bu ovmak vermedi Henüz yanlış bir şekilde,
o başlamalıdır sürece Sadece HTML gibi gibi,
Biz başladığında onu co-karışmak stil nitelikleri CSS ile,
sadece biraz almaya başladı Dağınık ya da biraz yanlış hissediyorum.
>> Benzer burada, eğer Eğer HTML alarak başlayın
ve daha sonra otomatik olarak Bazı JavaScript kodu plop
Bir alıntı dize ortasında, bu kadar Çok sürdürülebilir olmayacak.
Sağ?
İlk başta bile belli değil JavaScript kodu nerede koyun.
Bu yüzden gerçekten güzel olurdu Daha iyi bir tasarım prensibi,
en Bizim HTML tamamen devam edelim Bizim JavaScript ayrı.
>> Yani biz ettik, ne yapmak Burada yapılan following-- olduğunu
biz sadece sadece biçimlendirme için HTML kullanabilirsiniz.
Ve böylece sürümünde bu bir bütün Ben benzersiz bir kimlik şeklidir.
Ve sonra buraya, ben yararlanarak ediyorum JavaScript kendine has bir özelliği bir
bu sayede ben ne olabilir adsız işlevi çağıran.
Yani dediğim eğer çıkıyor 'demo' arasında document.getElementById
Bu bana bir işaretçi vermek gibi Benim ağaç bu düğüm, form elemanı,
sözde.
>> Şimdi, ben sadece biliyorum HTML biraz bilerek
şimdi bazı online okumak zorunda konum referans, bir form öğesi destekler
Olay listeners-- bir sürü içinde Başka bir deyişle, olay çamaşır listesi
Biz bir an önce gördüm dinleyici.
Ben belgeleri okuyarak biliyorum Bu onsubmit geçerli bir olaydır
Bir form elemanı için dinleyici.
>> Yani ben öğrendikten sonra, yapmamı için güvenli
bu düğümü almak following-- ağacından, form elemanı,
ve sözde erişmek onsubmit özellik.
Yani nokta sadece anlamına gelir Bu, bir özelliktir
bunun içinde özel bir değer gibi.
Ve hangi veri türü Ben kimim atama, görünüşe göre,
olan onSubmit için içinde etkili bir şekilde değişken
ağaçtaki o düğümün?
O yapı içinde bir alan var.
Veri türü nedir?
>> Bir fonksiyon, evet.
Yani PHP bu sahip çıkıyor.
Ve hatta biz bile Bu konuda sana söylemedim,
C de işlev işaretçileri vardır geçmek ve işlevleri atamak yeteneği
değişkenlerinin değerlerine kendilerini.
Ve biz gitmiyoruz C geri gerilemeye
Ama şimdi, o çıkıyor Burada sağ tarafta,
Biraz görünüyor olsa da funky, bu araçlar, hey tarayıcı,
Bana bir fonksiyon vermek.
Hatta vererek rahatsız gitmiyorum Bir isim ben olduğum için tam anlamıyla
diyelim atamak olacak Bu fonksiyonun adresi
Hemen onSubmit için.
Bir başka deyişle, tarayıcısında, sana ihtiyacım yok Bu fonksiyon denir bilmek.
Sadece bilmeniz gereken nerede bellekte olduğunu.
Ve bu yüzden sadece yeterlidir Orada bir eşittir işareti var
ve benzeri, bu adlandırma zahmet değil foo veya selamlıyorum veya herhangi bir diğer kelime.
Ve şimdi bu sadece bir üslup şeydir.
Ben bu küme ayracı hareket olabilir Şeyin sorry-- sonraki satıra
gibi biz genellikle CS50 yok.
Ama JavaScript, bu kadar aslında biçimsel ortak
Sadece küme ayracı tutmak için, ilk satırdaki ilki.
>> Ama bundan sonra, orada ilginç bir şey yok.
Bu açık kaşlı ayraç sadece Benim fonksiyonun başlangıç ​​çizmektedir.
Işlevi artık özdeş, ben ettik hariç
Dönüş false dahil Bu fonksiyonun içinde.
O konrtol döner çünkü ve sadece yaptığınız
okuma bunu biliyorum documentation--
Eğer işlev atamak eğer o onsubmit işleyicisi yanlış döndürür için,
Tarayıcı sadece bilir ve kabul eder Bir sunucuya formu göndermek için değil.
True döndürürse, bu sunacaktır göreceğiz nedenlerle bir sunucuya o
Bir an yararlıdır.
>> Sonra noktalı sonra kaşlı ayraç sadece orada
Ben işlevi tanımlayan bıktım demektir.
Sen en kısa sürede ne diyeceğimi Bir gönderme duymak.
Pekala.
Bu hala tartışmalı tür çirkin.
Yani biz daha ne yapabiliriz?
>> Peki, bu daha sonra çıkıyor last-- olan sürüm iki,
ve biz buna sadece bakışta olacak.
Yapma riskini göze alarak o çirkin, o çıkıyor
Bir kütüphane var olduğunu Dünya jQuery denir.
Ve jQuery bir süper popüler JavaScript kütüphanesi
çoğu o kadar popüler Herhangi öyle değil JavaScript--
insanlar şaşırtmak için nadir JavaScript ile jQuery.
Neden?
JavaScript kendisini çok var seyleri yapmanın yolları ayrıntılı
document.getElementById, dadadadadada.
Çok sahip sonunda kod uzun satırları.
>> Yani John Resid adında bir adam, kim aslında bir başlangıç ​​için çalışıyor
Bu günlerde yukarı çıktı Bu kütüphane yıllar
önce birçok kişi katkıda bulunmuştur Bu değişiklikler jQuery denilen
şu şekilde sözdizimi.
Ve sadece bu yüzden sen, bu gördüm Eğer kaçınılmaz olacak, çünkü
Bir yaparak bu bkz web tabanlı bitirme projesi,
Bu eşdeğer yolu olacaktır kullanarak aynı işlevi uygulamak
Bu özel kütüphane.
>> Şimdi, çok daha alay birbirinden bütünüyle bu
Sadece bazı desenleri bakalım.
Bu sözdizimi gibi görünüyor Kaç anonim fonksiyonlar
ya da isimsiz fonksiyonlar veya AKA lambda fonksiyonları?
İki, değil mi?
Ve biliyor musun, o bile Eğer bu süper rahat değiliz
sadece gerçeği ile diyor function () iki kez.
>> Ve o çıkıyor Ne bu kod doing-- olduğunu
ve online başvurular söz edeceğim, sonuçta, bu bazı yardım için.
Bu sadece anlamına gelir o zaman Belge, hazır
go ahead ve kayıt Aşağıdaki işlevi
HTML teslim eylemcisi olarak kimin benzersiz bir fikir demo unsur.
Ve sonra, bu olduğunda, bu iki kod satırları diyoruz.
Ve bu, bir daha trajik olduğunu return false diyerek ayrıntılı bir yol.
Ve biz sırf bu sözü Bu çevrim gibi bir kod göreceksiniz.
Ve bu yılgın olan bir şey değil.
Ama doğrusu, ne olduğunu akılda tutmak JavaScript ortak olacak
Bu paradigma.
Şimdi bunu göstermek ve neden bu kadar işte.
Pekala.
Bu yüzden çok fazla durmadan O sözdizimi çok,
Herhangi bir sorunuz orada vardır Bu örnekler, ya da fikirler bugüne kadar?
Pekala.
Yani yararlı bir şey için bu kullanalım.
Sadece merhaba diyor bir web sayfası yapma falan, bütün bu ilginç değil
underwhelm değil.
Bu kimse, güzel olmak için gitmiyor ama yararlı bir şeyler yapmak için gidiyor.
Benim dizine geri dönelim Burada ve açmak, form 0.html söylüyorlar.
>> Yani bu çaylak olduğunu varsayalım intramural spor kayıt sayfası
Herhangi bir CSS veya tasarımın herhangi duygusu olmadan.
Ve ben önde gitmek istiyorum ve Bir şifre ile buradan kayıt.
Ve ben koşulları kabul gidiyorum ve koşullarını ve Kayıt tıklayın.
Ve şimdi web sitesi Siz "diyor, Kayıtlı! (Eh, gerçekten değil.) "
O amele gibi o, görünüyor ama Beni go ahead ve yeniden kuvvet verelim.
>> Ve bana hayır, değil mi, diyelim Benim gerçek e-posta adresi gereklidir.
Ya da belki sadece orada postayı söyleyeceğim.
Şifre 12345, gibi olacak.
Ve sonra, ben sırf salak, şimdi 123456789 var.
Ve ben senin onay kutusunu gitmiyorum.
>> Hmm.
Pekala.
Yani birkaç fırsatlar var Burada iyileştirilmesi için.
Ve biliyor musun, yoksa pset göreceksiniz Eğer code-- yazabilirsiniz yedi,
ve yazmak gerekecek PHP-- kodu savunmak için
kullanıcı bu tür karşı hatalar açıkça kullanıcı çünkü
işbirliği değil.
Ve o sana vermemiştir tüm İstediğin ya da formatında değerleri
Onları istediğini söyledi.
Yani pset yedi görürsünüz Biz kesinlikle bazı olabilir
demek koşullar varsa e-posta adresi varsa
Bir username@something.edu değil, biz sadece olabilir
özür dile ve kullanıcıya özür dileriz çok, sen pset yedi olabilir gibi.
Ya da o kutuyu işaretli değil varsa, PHP çıkıyor, bunu algılayabilir,
Çok.
Ve kesinlikle şifreler ise register.php olarak eşleşmiyor
pset yedi için, bunu algılayabilir.
Ama bu bir ağrı var Bu boyun şimdi talep ettikleri
Bize sunucuya tüm yol gitmek.
Kullanıcı hatası haberdar edilir.
Ve en azından kullandığınız sürece Bazı meraklısı teknikleri,
Şimdi onlar geri okunu tıklatın gerekiyor.
O gibi güzel olmaz mıydı web sitelerinin bir sürü bugün,
Eğer daha acil olsaydı geribildirim, anında?
>> Diğer bir deyişle, beni sürümüne gidelim Hiçbir güzel olacak biri.
Ama bu özelliği var.
Malan, 12345, 123.456.789, değil , Kayıt kutusunu kontrol edeceğim.
Şifreler eşleşmiyor.
Yani bu pop-up ugly-- olsa biz sonunda bu yerini alabilir
Bootstrap gibi bir şey ile, Eğer pset yedi hangi görürsünüz
Ben yaptım çok popüler olduğunu library-- şifreler eşleşmiyor olduğunu algılayabilir.
Pekala.
Peki, bana kullanıcı olarak bunu düzeltmek edelim.
Beni go ahead ve 12345, 12345 diyelim.
Hala anlaşmayı kontrol etmiyor.
Sen kabul etmelisiniz şartlar ve koşullar.
Peki neden?
>> Biz zaten oturtulması ettiyseniz bir yol var ki,
ve biz size gerekli ettik Hatayı tespit etmek pset yedi
Böyle durumlar Sunucu tarafı, neden yapayım
Ayrıca JavaScript bunu rahatsız?
Bir argüman neler var ekleme iyilik nedir
Eğer some-- olarak görmek üzereyiz Ek karmaşıklık var.
>> Belki hiçbir ters yoktur.
Ne olabilir?
HEDEF KİTLE: [duyulamaz].
DAVID MALAN: Oh, ilginç.
Potansiyel patlatır.
Yani emin, sen taşıma değilseniz hatalı kullanıcı girişi harika olduğunu,
Belki o takdirde hepsi iyi Hatta sunucu bulmuyor.
Ben oraya itmek istiyorsunuz ve diyelim ki, muhtemelen gerekir
Bu sorunların her ikisi de düzeltmek.
Ama bu adil.
Başka?
>> HEDEF KİTLE: [duyulamaz].
>> DAVID MALAN: Evet.
Daha önce de söylediğim gibi bu kod, bir istemci tarafında yorumlanır.
Bu sunucuyu rahatsız etmiyor, bunun anlamı öyle değil
Sunucunun yük veya kapasite etkiler.
Ve şimdi, biraz eski, benim için, Bu anlamlı bir etkisi yoktur
Şu anda tek kullanıcı var çünkü.
>> Ama herhangi iseniz terbiyeli boyutu sitesi,
Özellikle büyük, Facebook gibi, devamını insanları tutabilir
Sunucunuzun iyi Bir sunucu için, tabii ki,
Sadece RAM sınırlı miktarda var, gigahertz sonlu sayıda
şeylerin sınırlı sayıda Bu, zaman birimi başına yapabilir.
Daha fazla insan var, bu yüzden Dünya, sunucu isabet
Yanlışlıkla günlüğü yanlış, tıpkı iyi eğer
Sunucunuza kapalı olduğu yükü tutabilirsiniz.
Ayrıca, özellikle mobil Hiç yasiyorsaniz device--
my.harvard oturum veya Yale NetID ya da bu gibi,
bir sürü bu gecikme var o alır bu sayede gibi web siteleri,
gibi bir lanet ikinci ya da iki bazen.
Ve sonra, Tanrım, sen yanlış yazarsanız sonra geri vurmak ve onu yeniden yapmak zorunda.
Yani özellikle, gecikme var yavaş ağ bağlantıları üzerinde.
Ama JavaScript çünkü istemci üzerinde çalışır
ve ileri geri gitmek gerekmez potansiyel yavaş internet üzerinden
Bağlantı, alabilirsiniz neredeyse anında geri bildirim.
>> Yani bu bakalım.
Beni açalım form 0 ve Burada HTML bak.
Ve Sadece neler olduğunu görelim.
Bu kimin bir formdur Eylem register.php olduğunu.
Ben sadece bu yüzden almak istimal Ben URL'yi görebiliyordu.
Ama şifreler için, biz kesinlikle isterdim gerçekte göndermek için bunu değiştirmek için.
İşte tip bir metin giriş alanı var.
İşte başka bir giriş var tip şifre alanı.
Eğer hiç görmedim eğer Burada ise, tip onay kutusunu bir giriş.
>> Ama hiçbir JavaScript var burada olursa olsun.
Bu sadece HTML olduğunu register.php gider.
Ama sürümünde tek yer, nerede Bu pop-up almaya başladı,
en Aslında burada ne olduğunu görelim.
Bir uyarlamada, ne Ben ben see-- gidiyorum
Yeterince durak olabilir düşünce Yeterli kelimelerle, ama bitti.
>> Sürümünde oraya Şehre gidiyoruz.
Bir uyarlamada, following-- fark ve en iyi uygulama değil,
ama bu benim ilk.
Aşağıdaki dikkat edin Form, ben bir komut dosyası etiketi var.
Ve bir betik etiketi, demektir hey, tarayıcı, burada
bazı kod geliyor, tipik olarak, JavaScript.
Ve şimdi, ben ne yapıyorum dikkat edin.
LINE ben zar zor olabilir diyor, bu-- 32 satır okumak,
var bu yüzden bana ver form-- Form adında bir değişken.
Ve sonra document.getElementId olsun "Kayıt." nin
Bu nedir?
Peki, beni buraya kadar geri sarmak edelim.
Ve ihbar, ah, ben formu elemanı verdi keyfi fakat açıklayıcı bir fikir
Kayıt.
Yani bu bana bir değişken verir Bana bu düğümü kapmak için olanak sağlar,
Ağacın bu dikdörtgen formu çağırdı.
form.onsubmit araçlar, hey tarayıcı, bir olay dinleyicisi kayıt
Bu formda.
Bu şekilde diğer bir deyişle, sunulan, aşağıdaki kodu çalıştırın.
Bir isim çünkü gerek yok Neden adını bilmeniz gerekiyor?
Sadece bilmeniz gereken ergo, ne yürütmek için
bir anonim veya lambda fonksiyonu var.
Ve bu işlevi Burada bu hatların hepsi.
Ve şimdi, dürüst olmak gerekirse bile sizin olsa Hiç JavaScript yazılı olmayabilirdi
daha önce, sadece C ve PHP mantık bu.
Yani form.email.value eğer == "" - E-posta alan boştur eğer öyleyse,
Gerekir "ile kullanıcı bağırma E-posta adresinizi sağlamak. "
Else if form.password.value kullanıcı olarak boş bağırma olduğunu
"Sen parolasını sağlamanız gerekir."
>> Daha ilginci mantıklı, form.password.value yapmazsa
Eşit form.confirmation.value-- Onay nereden geldi?
Bana geri sarma edelim.
Peki, bu girdi denilen Burada alan şifre.
Ve ben onay burada bu bir denir.
Ben denilen olabilirdi Şifre, iki ya da başka bir şey.
Ben sadece mantıksal kontrol ediyorum Bu iki aynı olduğunu.
Bu Bay Boole olduğunu çıkıyor Else-- bir Boolean değeri, onay kutusunu vasıtasıyla yine.
Yani derseniz, ünlem point-- form.agreement.checked takdirde
yanı sıra, kullanıcı bağırma.
>> Yani göreceksiniz bu sözdizimi JavaScript çok yaygın,
nerede bu noktalı gösterimde var.
Burada bir nesne ile başlar.
Sen bir daha derin dalış şifre gibi bir özellik.
Ve sonra onun gerçek değeri olsun.
Ve yine, burada girilir.
İşte adı şifredir.
Ve onun değeri ne olursa olsun İnsan aslında yazdığınız olmuştur.
>> Bunların hepsi Yani durumlarda, ben yanlış döndü.
Ama eğer, ben doğru dönmek.
Ve şimdi biz bir bakın zorlayıcı kullanımı
Eğer yanlış dönecekti Kullanıcı ne yaptığını durdurmak
onu yapmak ya da onu seçin tekrar tekrar ya da yazın.
Aksi takdirde, biz doğru dönmek.
>> Ve bana bir tane tanıştırayım Bu diğer varyant sadece
bunların biraz anlayış tohum.
Peki, bu sürüm 2., form-2-- Ben bir elin dalgası ile yapacağım.
Bu, meraklı olanlar için, bir jQuery sürümü
isteyebilirsiniz olanlarınız söz konusu kütüphane serpmek.
Ama start-- ve herhangi bir soru olur mu?
Bana şu an çünkü duraklatmak Let Bu kadar hızlı ve çok oldu.
>> Ama burada güzel bir şey olduğunu tüm kod hemen hemen aynıdır.
Yeni ürünleri dom nedir nedir?
Bu dikdörtgenler nelerdir?
Bu düğümler nelerdir?
Bir anonim işlev nedir?
Bir olay işleyicisi nedir?
Ama neyse ki, bu çoğu sadece bir Haftanın sıfır, diyelim ki, tam bir daire.
Pekala.
Yani biraz daha ilginç bir şey?
Eh, her şeyden önce, gitmeme izin önde ve Google Maps kadar açık.
Ve sen o fark edeceksiniz an, split saniye,
ne olur fark Ben yeterince hızlı tıklatın.
Ve Harvard'da bu bağlantı böyledir hızlı gerçekten fark yoktur.
Ama çeşit çeşit ne görüyorsun Ben tıklayın ve gerçekten çok hızlı sürüklerseniz?
Online seyretme olanlar, Eğer 0.5x hıza bu yavaş eğer,
Bu daha iyi görebilirsiniz.
>> Önce ne oluyordu Ben tıkladım ve sürükledi önce?
Me yapalım var-- deneyelim 90210 gibi bir şey.
En uzak gidelim.
Bu da, gerçekten hızlı oldu.
Nasıl Disney World hakkında?
Oraya gidiyoruz.
TAMAM.
Eğer bölünmüş bir saniye ne gördün?
Sadece, meydanlar gibi, değil mi?
Fayans için yer tutucuları?
>> Peki, burada ne oluyor?
Google Maps güzel bir örnektir AJAX denir bu teknolojiyi kullanır.
Biz başlayacağız Ve burası özellikle JavaScript kullanmak
çekici bir yoldur.
Geri gün içinde, orada MapQuest denilen bu web sitesi.
Ve ben almış bir 1990'larda bu ekran,
eğer istedim nerede Harita üzerinde buraya bak,
kelimenin tam anlamıyla bir ok tıklıyorsunuz üstünde yukarı olduğunu gösterdi
Haritanın farklı bir kare.
Sizi, sola hareket etmek isteseydim gösterdim ok tıklandığında
Haritanın farklı bir kare.
Ve bazı web siteleri hala bu bugün yok.
Ama bile MapQuest aldı Google Maps gibi iyi.
>> Bunun yerine ne bu daha iyi Gün AJAX kullanmak web siteleri olduğunu.
AJAX-- da denir Asynchronous JavaScript ve XML,
hangi söyleyerek sadece süslü bir yoludur bir teknoloji veya tekniğin o
JavaScript kullanarak bir tarayıcı veriyor Ek HTTP isteklerini yapmak için
sonra sayfa yüklendi.
Peki bu ne anlama geliyor?
Peki, bu tür olacaktır Gmail'de can sıkıcı
Eğer istediği her zaman postanızı kontrol etmek,
tam anlamıyla Control-R veya vurmuş Komut R veya yükle düğmesini tıklatın
ve bütün lanetlemek sayfası yeniden olacaktır.
Sağ?
Beyaz flaş ediyorum Muhtemelen saniye.
Aptal ilerleme çubuğu göreceksiniz.
Yeni varsa ve sadece görmek için posta, tüm web sayfası ve URL
Eğer yeniden olurdu konum.
>> Ama bu Gmail'de ne değil.
Sağ?
Yeni bir e-posta içinde olsun Gmail ne ekranda olur?
Sadece sağ, yukarı gösterir?
Sadece sihirli görünür tablosunda yeni bir satır olarak.
Bu aslında içeren bir karmaşıklık iyi bir miktar.
Aslında, bu ağacın hakkında düşünüyorsanız, hangi burada basit biri olmasına rağmen,
Gmail-- ve ben bakmak olurdu koda sure-- olmak
Muhtemelen bir HTML tablosu vardır ya da belki bu işler bir sırasız liste
gibi inboxes e-postaların her biri.
>> Ve böylece orada bu hayal olmadığını sen bellekte bir ağaçtır
çeşit çeşit görünüyor Gmail'i kullanarak Bu gibi Google ooh, anlar,
Eğer yeni e-posta, öyle değil Bütün ağaç yeniden istiyoruz.
Aksine, düğüm bulmak istiyor Gelen kutunuzu temsil eden ağaç
ve sadece yeni bir düğüm eklemek.
>> Beş, seni Pset Yani çok benzer karma tabloya düğümleri eklemek zorunda
Benzer Google aracılığıyla yapar O yazmıştır JavaScript kodu,
Bu ağacın travers, nerede olduğunu anlamaya Pencerenin bu gelen kısmıdır,
ve daha sonra yeni bir satır eklemek.
Ve yeni bir satır sadece bir anlamı Bir ağaçta yeni düğümler ya da daha fazla.
>> Ve böylece AJAX bu tekniktir bu tam olarak bunun için izin verir.
Bir URL ziyaret ettiğiniz zaman, ancak, uzun deli,
ve sayfa var bir kere Hala, olabilir yüklenmiş
den fazla veri yakala o olsun internet--
Bir e-posta veya map-- bir kiremit perde arkasında yakala
ve ardından sayfanın içine yerleştirin İnsan gerçekten yok ki
Bunun için beklemek zorunda.
>> Facebook Messenger aynı şekilde çalışır.
Diğer websites-- Herhangi bir sayıda oh, aslında, hatta bu.
Ben bu açıkçası, bir tür biridir demek sinir bozucu bir bu gün bulunmaktadır.
Ben cats-- Bu aramaya başlarsanız Korkunç bir kullanıcı deneyimi türüdür.
Bu sadece benim için aramaya başlar.
Peki ne yapıyor?
URL gerçekten değişmedi Ben yazmaya başladığımdan beri.
Ama ne genelinde gidiyor ilginç hmm, tamam wire--.
Ne genelinde gidiyor Tel burada sadece tuhaflaşıyor.
>> TAMAM.
Bu yüzden bana go ahead ve kontrol edelim eleman ve Ağ sekmesine gidin
ve bu yapmayı deneyin teknik ve kediler hakkında az.
Ben yazarken, kelimenin tam anlamıyla, kediler ve-- neler oluyor
per-- Bunu tıklayın gitmiyorum.
Pekala.
Yani buraya, her ne oluyor zaman görünüşe göre, bir karakter yazın?
Gibi, düşük seviyede?
Ne o her biriyle oluyor Benim klavye de karakter yazarak mı?
Evet?
HEDEF KİTLE: [duyulamaz].
>> DAVID MALAN: Kesinlikle.
Bu karakterlerin her biri Bir seferde Google'a bir gidiş.
Onlar bir dize kadar inşa ediyoruz kendi sunucusunda olduğunu gösterir
Ben şimdiye kadar yazdığınız her şeyi.
Ve her zaman tipi başka bir karakter, onlar
Bir onların gizli sos kullanın algoritması arama ve anlamaya,
O bu kedi sayfasını demek Bu kedi sayfası veya benzeri ya da?
Bir anlamda Yani, bir bana sağlar Bu daha iyi bir deneyim bile yok
Benim düşünce tamamlamanız gerekir.
Ve gerçekten de bir yararlıdır şey, genel olarak otomatik tamamlama.
Onların algoritmalar yeterince iyi iseniz ve benim aramaları yeterli açıktır ise,
Ben bütün kelimeyi yazmak zorunda değilsiniz.
Onlar bana söylemek için gidiyoruz ne o Aslında Arıyorum edilir.
Peki Google aramaları anında Arama sadece AJAX kullanarak
Onları istemek için izin veren kodu kullanarak Bir web tarayıcısı üzerinden ek içerik
Bu kullanarak perde arkasında Yeni dil, JavaScript.
Bu yüzden sol bir kaç dakika var.
Ve benim dostum kadar diyelim Sahneye Colton yukarı,
sanki bu yana Özellikle eğlence son kez
Bir teknolojiyi tanıtmak için bazılarınız o
bir ilgi ifade ettiler Nihai projeler için.
Biz getirmek için eğlenceli olacağını düşündüm Bir gönüllü kadar olsa da, bugün
Size bir ek göstermek için Evet siz-- sağlar, bu,
Ben ilk bu eli gördüm.
Yukarı gel.
Çok iyi yapılmış.
Aferin.
Ben bu konuda proje için gidiyorum sadece bir an ekran.
Herkes için Adın ne?
>> EFA: Ben Efa değilim.
>> DAVID MALAN: Etha?
>> EFA: Efa.
>> DAVID MALAN: Efa?
>> EFA: Evet.
>> DAVID MALAN: Seni görmek güzel.
Pekala.
Beni bu hazır olalım.
Üzerinde Hadi Burada Colton orta.
Ne Colton elinde bulunuyor Bugün uzaktan kumanda.
Yani yerine sadece bir orada durmak daha etrafa üç boyutlu dünya
Colton yaptığı gibi, şimdi Efa yapabilirsiniz Aslında kadar giderek dolaşmak,
aşağı, sola ve sağa gibi Nintendo veya Xbox denetleyicisi.
EFA: Ben sahneden düşmek için gidiyorum.
DAVID MALAN: I will Buraya kabaca durmak.
Ama bu bir risktir.
TAMAM.
Şimdi git ve o koydu.
Bana devam edelim ve Burada ekrana geçmek.
Bana ışıkları loş olsun.
Ve Colton, bana izin yanınızdaki standı geliyor.
>> Burada açıklamak istiyor musunuz mikrofon ile ne yapıyoruz?
Hadi bakalım.
>> COLTON: Elbette.
Yani şimdi biz konum Oculus kadar yükleme,
Ben operating-- çalışmıyor sanırım Sistem, fakat ana program,
Tüm oyunlar erişebilir ve kitaplığınızda olan uygulamalar.
Yani şimdi, o demeliyim Touchpad başlamak için dokunun.
Touchpad üzerinde olacak kulaklığın sağ tarafı.
Şimdi git ve tap--
EFA: Oh, adamım.
DAVID MALAN: Evet, oraya gitmek.
Efa görmektir kalite çok daha yüksek kalitesidir.
Bu burada sadece Wi-Fi.
COLTON: sen Peki yapmak istediğiniz olacak
Yukarıya doğru bakmak olduğunu Ekranın sağ.
Evet, çok sağ üst köşesinde o oyun.
Ve sonra seçerken o, yine touchpad dokunun.
Ben onun Dreadhalls düşünüyorum.
Ve sonra burada burada A- edilir let Senin için gözlük tutun.
>> Yani sadece ona bir denetleyici verdi.
Yani şimdi o oyunu kontrol edebilirsiniz.
O gibi etrafında falan taşıyabilirsiniz.
Yani go ahead ve üstüne bakmak.
Siz Yeni Oyun görmelisiniz.
Öyleyse devam edin ve bunu yapabilirsiniz.
Şimdi, kontrol etmek gerekir kumanda ile kendiniz
yanı sıra, kısa sürede Oyun burada yükler.
Bu biraz korkutucu olabilir.
>> EFA: Şimdi söyle.
TAMAM.
>> COLTON: Pekala.
Böylece hareket edebilir onaylayın.
TAMAM.
Sen taşıyabilirsiniz.
Mükemmel.
Eğer aşağı bakmak Yani eğer, sen bir harita var.
Olduğun yerde Harita gösterir.
Sen odaya bakabilirsiniz.
Tamamen etrafında dönebilir.
Evet, kesinlikle.
Arkanı dön.
>> Yani sola bakın.
Ben bir şey yapabilirsiniz düşünüyorum Odaya bir varil üzerinde pick up.
>> EFA: Ben nasıl alabilirim yolumdan haritasına?
COLTON: Look up.
Sadece bakmak.
Pekala.
Orada sen gitmek.
Şimdi devam edin ve sadece arkanı dön.
Yani sol öteye bakmak.
Sola hareket devam edin.
Sol Aramaya devam et.
Devam et.
Evet.
>> EFA: Oh, bu şekilde.
>> COLTON: Evet.
Kumanda ile ona doğru yürüyün.
Orada sen gitmek.
Şimdi onu almak diyebilirim.
Orada sen gitmek.
Onu al.
Pekala.
Şimdi bu odadan çıkalım.
Devam edin ve o kapının yürüyün.
Yani diyor hold-- gidiyoruz açık zorlamak için düğmesini basılı tutun.
Yani go ahead ve basılı tutun.
Evet, açmak zorlama.
Pekala.
Aferin.
Şimdi odadan yürüyorsun.
Yani gerisini terk edeceğim ve size öğrenmek görüyorum.
EFA: Karanlık bir odada gitmiyorum.
Bekle.
Şimdi karanlık koridordan gitmek zorunda?
Tamam, ben [inaudible] geri dönüyorum.
COLTON: Pekala.
Biraz daha öğe almak için.
Bazı sikkeler gibi görünüyor.
Bu bir kilit seçim var.
Eğer bulursanız kilitli kapı, bunu kullanabilirsiniz.
Korktun mu?
>> EFA: Henüz.
COLTON: Tamam.
>> Evet Pretend--.
Sadece sen iddia Aslında orada duruyor.
Ve sen etrafta açarsanız Eğer buna alışması lazım.
Ama mantıklı.
David MALAN: EFA devam ederken ve Biz bu bütün gün yapabilirim çünkü, oynamak,
Hepimizin ucu ayak burada yapamam.
Ama biz diğer iki çift var, Eğer gelip oynamak isterseniz.
Aksi takdirde, biz göreceğiz Çarşamba günü bir sonraki.
Bugün gönüllüye teşekkür ederiz.
[Alkış]
>> [MÜZİK - "Seinfeld TEMA"]
KONUŞMACI 1: Eh, ben koyarak yeni bir PL monte.
Ben sadece OLPF-- değişti
>> HOPARLÖR 2: Peki Tam yapıyorsun?
>> KONUŞMACI 1: Eh, her biri these-- Burada, sana burada bu bir gösteririz.
Sen burada görebilirsiniz.
>> KONUŞMACI 3: Ben bu iyi olduğumu düşünüyorum.
Biraz daha istiyor musun?
>> KONUŞMACI 4: Hayır, ben iyiyim. [Duyulamaz].
>> KONUŞMACI 3: Hayır, [inaudible].
Bazı var.
KONUŞMACI 1: Farklı renk.
HOPARLÖR 2: Tamam.
KONUŞMACI 1: Yani sonuçta neyi o o rengi ayarlar does of--