>> [MÜZİK OYUN]
>> Doug LLOYD: şimdi Yani yaşlısın Web programlama de artıları, değil mi?
Ve biz birkaç kapalı ettik Bireysel videoları dilleri.
Ve şimdi bir tane daha, JavaScript yapalım.
>> İlk iyi haber, JavaScript Modern bir programlama
kimin PHP gibi çok dil söz dizimi, C türetilmiştir
böylece başlamak için iyi bir yerdir.
Bu, aynı zamanda, PHP gibi eski hakkında yaklaşık 20 yıldır civarında yapılmış olan.
Çevresinde icat edildi PHP aynı zaman.
Ve JavaScript oldukça aslında kullanıcı deneyimi temel
ağ-yapının.
Aslında, orada üç dil ben
makyaj tür söyleyebilirim etkileşim kullanıcı deneyimi
web sitesi ile, html, css ve JavaScript.
Ve şimdi en bir konuşalım JavaScript hakkında biraz.
>> Kötü haber olsa da, sahip JavaScript kendisi için kurallar bir çok ayarlar,
ve daha sonra onları kırar.
Ve JavaScript aslında olabilir tür öğrenmek zorlu,
o C aksine çünkü ve Çok yapılandırılmıştır PHP,
ve çok katı kurallar var işlerin nasıl için.
JavaScript sorular o kadar esnek kazanılmış
belki şeyler gitmiyor Biz onları bekliyoruz şekilde çalışır
ve belki de gerçekten öğrenemez Bizim ilk programlama dili
Bir JavaScript gibi.
Yani belki öyle değil, çünkü kendisi herhangi bir kural ayarlamak,
ve gerçekten yok iyi kodlama alışkanlıkları uygulamak.
Ama şimdi umarım geliştirdik Bazı iyi kodlama alışkanlıkları,
ve bu yüzden foray başlayabilirsiniz JavaScript içine biraz.
>> Açılış benzer JavaScript yazmak için Bir nokta C uzantılı bir C dosyası kadar
ya da bir nokta PHP uzantılı bir PHP dosyası, Yapmamız gereken tek şey bir dosya açmak olduğunu
dot js dosya uzantısına sahip.
Biz herhangi bir özel olması gerekmez biz gibi sınırlayıcı PHP yaptı.
Açı bu tür braket soru işareti PHP
biz bu gelen, yol alıştığınız o biz ne olduğunu bizim tarayıcı söylemek
JavaScript dahil gereğidir Bir html etiketi o
ve biz hakkında biraz göreceksiniz nasıl bir anda bunu yapmak için.
>> Yapar başka bir şey Farklı JavaScript,
olsa da, istemci tarafında çalışan olmasıdır.
Yani PHP ile hatırlama olduğunu Biz gerçekten görmek asla
Bir web sitesi altını çizdi PHP.
Biz şimdiye kadar inceledi Eğer sayfa kaynak, biz sadece olur
oldu html bakın Bu PHP tarafından oluşturulan.
Ama JavaScript istemci tarafında çalışır.
Sizin JavaScript bilgisayarda çalışır.
Yapabileceğiniz Ve bu yüzden şeyler bloker eklemek istiyorum.
Sağ?
Reklam engelleme genellikle yapılır JavaScript tüm öldürme
Bu belirli bir web sitesi üzerinde çalışıyor.
Ve olurdu çünkü makine, istemci tarafında çalışacak,
Sadece durabilir Tamamen çalıştırmak için JavaScript.
Bu da kullandığınızda demektir JavaScript içeren bir web sitesi,
JavaScript kaynak göndermek zorunda senin http yanıt parçası olarak kod
müşteriye bunu istediğinde.
Ve böylece olmayabilir JavaScript kullanmak istiyorsanız
Gerçekten hassas şeyler yapmak geçen bilgiler gibi
kullanıcıların şifreleri geri hakkında ve ileri, çünkü aslında konum
Kaynak kodunun tüm alacak, oluşturulan sadece html,
Böyle söylemek PHP ile durum olurdu.
>> Peki nasıl biz JavaScript dahil Bizim html başlamak?
CSS benzer Aslında Burada bunu nasıl tür.
CSS ile biz stil etiketleri var.
Ve bu tarz etiketleri içinde, Biz bir CSS stil sayfası tanımlayabilirsiniz.
Aynı JavaScript ile Biz komut dosyası etiketleri açabilir,
Başka bir html etiketi we did not Bizim html video hakkında konuşmak,
ve JavaScript yazmak Bu komut etiketleri arasında.
Ayrıca olsa, gibi CSS, biz CSS dosyaları dışarıda bağlantı olabilir
ve bizim programa yolu içine çekin.
CSS ile biz de can JavaScript, afedersiniz
biz de kaynağı belirtebilirsiniz komut etiketinin niteliği
JavaScript bağlamak için ayrı ayrı, yani yok
bunu yazmak zorunda betik etiketleri arasında, biz
kullanarak bağlayabilirsiniz Bu komut etiketi de.
Ve sadece CSS nerede ile durum gibi biz muhtemelen tavsiye
senin yararına yazmak için durumda ayrı bir dosyada CSS
Bunu değiştirmek gerekir, Benzer öneririz do
Eğer sizin yazdığınız Ayrı dosyalarda JavaScript
ve script etiketleri kaynak kullanımı senin JavaScript kravat bağlıyor
senin html, web sayfanıza içine.
>> Yani JavaScript değişkenler, yaparız Burada sözdizimi hakkında konuşmaya başlayın.
Ve biz aracılığıyla gidersiniz hızlı bir şekilde bu tür
bu yüzden, PHP yaptık çünkü Bu tüm oldukça aşina olmalıdır.
Yani JavaScript değişkenler değişkenleri PHP çok benzer.
Orada hiçbir tür belirteci, ve Bir değişken tanıtmak zaman,
var anahtar sözcüğü ile önek.
PHP biz bir şey yapacağını Bu gibi dolar işareti, x.
Biz gösterilen işte böyle değişken, ama hayır, biz
türünü söz yok değişkenin tüm.
Biz böyle bir şey söylemek istiyorum dolar işareti x PHP 44 eşittir.
Yaptığımız olsaydı JavaScript Aynı şey,
Biz var x 44 eşittir söyleyebilirim.
Yani var yolumuza tür bir değişken tanıtılması.
Bu belki biraz daha sezgisel Sadece dolar işareti değişkeni daha.
>> Yine, orada beri hiçbir veri tipleri, biz bu yapabileceğini
herhangi bir veri türü ile, dizeleri, başka bir şey, tüm var olacaktır.
Ve Şartlı tüm bizim C ve PHP eski dostlar
hala mevcuttur, bu yüzden eğer var, else if, else, switch ve soru
mark kolon.
Bunun gibi esnek kalan Anahtarı PHP, ama sen tüm bu
artık aşina.
Ve döngüler vardır benzer olan süre eski favoriler,
süre yapmak, bize hâlâ mevcuttur.
Yani zaten biz bir şey biliyorum temel temel JavaScript tür
Sadece biraz sahip sayesinde Şimdi C ve PHP hakkında bilgi.
>> Ne JavaScript işlevleri hakkında?
Peki, benzer her işlevi PHP function anahtar ile tanıtıldı.
Sen fonksiyonunu söylüyorlar, ve sonra seni senin fonksiyonunu tanımlamak başlar.
Biraz farklı neler var JavaScript hakkında,
gerçi olması yeteneği ne bir anonim işlev denir.
Yani işlevleri tanımlayabilirsiniz bir isim yok.
Bu şey biziz Gerçekten daha önce görmedim.
Biz gerçekten kavramını kullanırız anonim fonksiyonunun
Bir süre sonra bu Video, bu olacak çünkü
bağlamda biraz daha mantıklı Biz belirli bir durumda görünce
ben burada hazırlanmış ettik.
Ama sadece bir göz atalım ne basit JavaScript at
fonksiyonu gibi görünebilir.
>> Yani ileride gittim ve Benim CS50 IDE açtı
ve zaten Apache çalıştırmak Benim sunucu yayınlanmaya başlaması için.
Ve ben bu dosya var home.html denilen aç.
Ve ben burada biraz yakınlaştırmak olacak.
Ve temelde görebilirsiniz Home.html düğmeleri sadece bir demet.
Ve ben burada üstünde iddia ediyorum Bu JavaScript bölümü olduğu
Malzemeler.
Yani düğmeleri bir sürü burada var, ancak bu düğmeler aslında ne yapmalıyım?
>> Eh, benim IED üzerinde kafa edeceğiz ve burada açmayı home.html var.
Başında, Ben bağlama ediyorum nerede burada
Benim JavaScript kaynak dosyaları tüm.
Sağ?
Yani, anonymous.js, clock.js var Ben kaynak niteliği kullanıyorum
komut etiketi dosya bağlantı.
Yani yazmadım herhangi Doğrudan bu dosyaya JavaScript,
ama ben çekti onca JavaScript ayrı ayrı yazdım.
Ve biz burada, bu aşağı kaydırma eğer gereken tüm biraz tanıdık geliyor
Yeni sözdizimi birazcık.
Biz başlık etiketi için buraya var fonksiyonları ve sonra bir düğme.
Ben, bir tür düğme var bir giriş var ve görünüşe göre bunu tıkladığımda,
Bazı çağıracağım uyarı tarih çalışması.
Ve bu tür karıştırmak nasıl olduğunu JavaScript ve html biraz.
Onlar aslında oldukça güzel oynamak Birlikte ve böylece görünüşte ne zaman
Bu düğmeye, ben gidiyorum tıklayın bazı fonksiyon uyarı tarihini aramak için.
Ve benzer şekilde ben davranışları tanımlanmış olması Diğer tüm düğmeler için bu
Bu home.html sayfasında bulunmaktadır, biz dönmeye devam edeceğiz hangi
Bu videonun ders sırasında.
Ama geri gidelim Burada bir göz atın
clock.js de, ki bu JavaScript dosyası ben
bu ilk işlevi vardır yazdım Biz bakmak için gidiyoruz.
Gördüğünüz gibi, benim JavaScript başlayacak Anahtar kelime fonksiyonu ile fonksiyon,
ve ben bu bir verdik isim, uyarı tarih denir.
Orada içi, görünüşte bir oluşturmak Geçerli tarih denen yeni bir yerel değişken.
Ve ben atamak için gidiyorum Yeni tarihe eşit.
Ve biz bir sürü alabilir Bir tarih nedir olarak detay,
ve gerçekten JavaScript böyledir Büyük biz belki yapamam
bir video her şeyi kapsar.
Ama, bu oluyor söylemek yeterli Bir veri öğesi bana geri dönmek için bu
Geçerli tarih ve saati kapsüller.
Ben ben bir değişken olduğunu saklamak ediyorum Görünüşe göre geçerli tarih uyarmak için gidiyorum.
>> Peki, uyarı yapar gibi geçerli tarih bakmak?
Dosyasına kendisi de bir göz atalım tarayıcı penceresinde üzerine geri.
Yani yine, bu düğme olduğunu ben Bu adlandırılmış fonksiyona bağlı olması.
Ve ben orada tıklayın ve bak o ne yaptığını, bu uyarılır.
Bu söylüyorum kutunun bu tür attı Beni şimdiki zaman görünüşe olduğunu
o 4 Kasım var Sabah 10:43:43.
Ve şimdi, yine tıklarsanız Doğru, daha sonra bir kaç saniye var?
Böylece tüm bu işlev yapar bu.
Bu düğmeyi tıklattığınızda, o Bana bir uyarı mesajı açılır.
Yani gerçekten orada değil işlevleri için çok
Bu, PHP farklıdır Yeni sözdizimi biraz
Bu JavaScript ile çalışma ile gelir.
>> JavaScript Diziler vardır Oldukça basit.
Bir diziyi bildirmek için kullanabilirsiniz Köşeli parantezler sözdizimi
Biz PHP aşina olduğunuzu.
Ve PHP benzer, biz Ayrıca veri tiplerini karıştırabilirsiniz.
Yani bu dizi, hem de Bu diziler olur
mükemmel meşru JavaScript olacak.
Tüm tamsayıları var biri ve bir o Farklı veri türlerini karıştırılır.
>> Çok farklı bir şey neler var JavaScript olsa?
Bu bir nesnenin kavramı var.
Yani belki duymuşsunuzdur nesne yönelimli programlama.
Biz, CS50 bunun bir sürü yapmayın ama biz biraz yapacak
Burada JavaScript bağlamında.
Şimdi JavaScript yeteneği vardır Bir nesne yönelimli programlama gibi davranırlar
dil, ancak kendisi değil münhasıran bir nesne yönelimli
Programlama dili.
Ve bu yine geliyor Geri ben söyledim neden
öğrenmek için çok zor olabilir İlk programlama gibi JavaScript
dil, öyle değil, çünkü Gerçekten özel bir paradigma uyacak.
>> Öte yandan C olan fonksiyonel programlama dili.
Biz istiyorsanız, fonksiyonlar Büyük patron adam tür, değil mi?
Onlar dikte Ne her şeyi olmuyor.
Biz değişkenleri değiştirmek istiyorum, Biz işlevlerini çağıran.
Biz işlevlerine şeyler.
Bir de, bunun yerine Nesneler yönelimli bir dil nesne,
çeşit yıldızı haline nesneleri ve fonksiyonları ikincil tür haline gelir.
Ama bir nesne ne nedir bir nesnenin bu kavramı nedir?
Eh, o yardımcı olur, düşünmek İlk sıralama bu konuda
bir Cı yapı ya da bir yapı gibi biz daha önce öğrendik.
C, bir yapı içeren alanların sayısı,
ve belki de şimdi başlayabilir Bu alanlar özelliklerini diyoruz.
Ama özellikleri asla gerçekten Doğru, kendi üzerinde durmak?
Bir araba için bir yapı tanımlarsanız iki aşağıdaki böyle
alanlar veya özellikleri, tek bir Arabanın yıl için tamsayı
ve başka bir 10 karakter araba modeli için dize,
Ben, böyle bir şey söyleyebiliriz Ben yeni bir değişken bildirebilirsiniz
struct araba herbie evi.
Ve sonra bir şey söyleyebiliriz gibi herbie.year, 1963 eşittir
ve herbie.model Beetle eşittir.
Bu iyi.
Ben alanları kullanarak yaşıyorum yapı bağlamında,
ama sadece asla olabilir Böyle bir şey söylemek.
Sağ?
Ben alan adını kullanamazsınız yapıdan bağımsız.
Bu temel bir şey bu.
>> Alanlar olmak Yani C yapılarının temel
özellikleri olan çok benzeyen JavaScript nesnelerine temel.
Ama ne bunları yapar özellikle ilgi çekici
nesneler de ne olabilir ki gerçekten denir yöntemleri,
fonksiyonlar için sadece bir fantezi kelime olduğunu nesneye özgü da vardır.
Bir işlev yani sadece olabilir Bir nesnenin bağlamında denir.
Tanımlamıştır Yalnızca bir nesne onun içinde bu işlev,
Eğer düşünecek olursanız yapı, fonksiyon
tanımlayanlar içinde tanımlanır Yapının kaşlı.
Yani sadece şey demektir yapısına.
Ve biz ne yapıyoruz tür olduğunu Burada nesnelerin ve yöntemlerle.
Biz gibisin temelde bir işlev tanımlama olduğunu
Sadece üzerinde mantıklı Özellikle nesne ve böylece biz
Nesnenin bir yöntem olduğunu diyoruz.
Ve biz o ismi asla Nesnenin bağımsız işlevi
Biz yıl veya model diyemeyiz gibi C. yapı bağımsız
>> Yani fonksiyonel programlama paradigmalar şuna benzer bir şey.
İşlev ve ardından geçirdiğinizde bir parametre olarak nesne.
Bir nesne yönelimli programlamada dil, bu tür alır
saygısız ve biz düşünmek istiyorum o object.function böyle.
Yani noktanın bu tür Operatör tekrar ima
bu özellik bir çeşit olduğunu veya nesnenin kendisi niteliği.
Ama bu ne bir nesnedir yönelimli programlama dili
bir işlev yapmak için ne olabilir Yine, bir yöntem üzerinde dediğiniz
sadece özel bir kelime bir işlev için Bu bir nesneye doğasında vardır.
Bu Ne olduğunu sözdizimi gibi görünebilir.
Ve böylece biz bazı görmeye başlarsınız JavaScript bağlamında bu.
>> Ayrıca, bir nesne hakkında aklınıza gelebilecek tür bir ilişkisel dizi gibi,
Biz PHP aşina olan.
Bir ilişkisel dizi izin verir hatırla bize bunun yerine, anahtar değer çiftleri var
indeksleri 0, bir, iki, üç sahip ve biz C alıştığınız böylece gibi
diziler.
İlişkilendirilebilir diziler eşleyebilirler Böyle bir PHP videoda olduğu gibi sözler,
konuştuğumuz Pizza Topingler.
Ve bu yüzden bir dizi vardı denilen pizzalar ve biz
vardı peyniri bir anahtar oldu ve 8,99 $ oldu değer ve sonra acıkmak bir anahtar oldu,
9,99 $ yani bir değer olduğunu ve.
Ve böylece biz de bir düşünmek olabilir Bir ilişkisel sort benzer nesne
dizi.
Burada Ve böylece bu sözdizimi Yeni bir nesne yaratacak
iki ile adı herbie bunun içinde özellikleri.
Değeri 1.963 atanan Yıl, dize atanır ve model
Beetle.
>> Ve ben kullanıyorum burada fark JavaScript tek tırnak.
Sen, tek veya çift tırnak kullanabilirsiniz ne zaman dizeleri bahsediyoruz.
Sadece geleneksel var dava çoğu kez
ne zaman JavaScript yazıyoruz, Sadece tek tırnak kullanın.
Ama burada çift tırnak kullanımı ve ebil bu kadar iyi mükemmel iyi olurdu.
>> Peki nasıl hatırlıyor PHP, biz bu kavramı vardı
Bizi sağlayacak her döngü için a anahtar değeri tüm üzerinde yineleme için
Bir ilişkisel çiftleri Dizi, çünkü biz
yineleme için bu yeteneği yoktu 0 ile, bir, iki, üç, dört,
ve benzeri?
JavaScript, çok benzer bir şey var ancak, her döngü için bir denir değil
o döngüler için bir denir.
Yani bana böyle dedi, eğer Bu, nesne var anahtarı,
söyleyerek karşı bir çeşit benziyor bir şey olarak her şey için.
Ama burada yapıyorum tüm yineleme olduğunu Benim nesnenin tüm tuşları aracılığıyla.
Ve Kıvırcık içinde Orada parantez, yapardım
başvurmak için nesne köşeli parantez tuşunu kullanın Bu anahtar konumda değer.
>> Seçenek olarak ise, orada Hatta başka bir yaklaşım.
Ben sadece sadece hakkında bakım değerler, ben, nesne anahtarı için söyleyebiliriz
ve sadece içeride tuşunu kullanın.
Yani nesne var anahtarı için, ben Nesne köşeli parantezleri kullanmak
döngü içinde anahtar.
Nesnenin var anahtarı için, elimden Sadece döngü içinde tuşunu kullanabilirsiniz,
Ben sadece, özellikle olduğum için Orada değerler hakkında konuşuyor.
>> Yani belki alalım fark bakmak
sadece hızlı bir şekilde size göstermek için Dört arasındaki fark
Bir çok özel olan ve için biz burada dizi, haftanın dizisi.
Yani yeni bir dizi bulmak zorunda Yedi dizeleri ile dolu olduğunu,
Pazartesi Salı Çarşamba, Perşembe, Cuma, Cumartesi, Pazar.
Ve şimdi yineleme istiyorum Bu dizi boyunca,
belirli bilgileri yazdırarak.
Ben döngü için kullanıyorsanız bilgi yazdırmak için,
Sana alacağım ne düşünüyorsunuz?
Peki, bir göz atalım.
Ve biz üzerinden atlamak önce Benim tarayıcı penceresine,
Sadece biliyorum console.log bir çeşit
JavaScript yazdırma F yapmanın yolu.
Ama konsol nedir?
Eh, biz gidiyoruz ne Şu anda bir göz atın gidin.
>> Tamam, bu yüzden biz geri döndük Benim tarayıcı penceresinde,
ve ben açacağım Benim geliştirici araçları kadar.
Yine, ben sadece F12 vuruyorum geliştirici araçları açmak için.
Ve burada da fark Üst ben konsolu seçtim.
Yani bu kavram Bir geliştirici konsolu,
ve bizi sağlayacak Bilgi çıktı
çeşit terminali gibi ama Daha sonra biraz göreceğimiz gibi,
biz de bilgiyi yazabilirsiniz Web sayfamıza ile etkileşim.
Ben burada biraz yakınlaştırmak için gidiyorum ve ben de şimdi test için tıklayınız değilim.
Ve dört test-- ben vermeyeceğim Şu anda size bunun için kod göstermek,
ama bunu eğer alırsınız siz kaynak kodu indirmek olduğunu
Bu video-- ile ilişkilidir sadece bu döngü içinde içindir
Gördüğümüz sadece bir İkinci önce slayt.
>> O yüzden tıklayın olduğumu düğme ve buraya,
Burada çıktısı ne var Konsol, 0, bir, iki, üç, dört, beş,
altı.
Ben bilgi yazdırmak vermedi Bu dizi konumları içinde
Ben döngü el çünkü.
Ve döngü gövdesi içinde, ben Sadece anahtar itiraz anahtarını basılmış.
Ama şimdi benim konsol temizleyin ve ben eğer Testin için geçiş ve testin dört
Ben döngü kullanmak demek yerine ve anahtarı yazdırmak
Bunu tıklarsanız, şimdi alıyorum Benim nesne içinde gerçek unsurları
veya bu durumda benim dizi.
Hafta içi her gün benim dizisi.
Ben Pazartesi basılmış Salı Çarşamba.
Böylece arasındaki fark var a için döngü içinde, hangi yazdırır
Sadece tuşunu kullanın eğer sadece tuşları döngüsünün gövdenin içinde,
ve döngü, baskılar ve bir değerler üzerinden sadece kullanırsanız
döngü gövdesi içinde tuşuna basın.
>> Pekala, nasıl biz şimdi başlarım dizeleri bitiştirmek ve belki karıştırmak
interpolasyon ile bazı değişkenler gibi biz PHP bunu başardık?
Peki, biz oldukça tanıdık PHP ile bu.
Bu kullandığımız yapacağını nasıl nokta operatörü dizeleri bitiştirmek için.
JavaScript olsa da, biz aslında bir şey kullanmak
artı operatörü denir ki hatta belki biraz daha fazla
sezgisel, değil mi?
Bir demet ekliyoruz dizeleri bir araya.
Yani geri dönelim üzerinde ne görmek
Biz yazdırmak için çalışıyorsanız yazdıracak Hafta dizideki tüm bilgileri.
Burada çok altında Pekala, Dize birleştirme altında,
Ben iki seçeneğiniz vardır, dize bina V1 ve sonra dize bina V2.
Ve biz biz neden göreceğiz Bir saniye V2 gerekir.
Ama ben yapacağım tıklayın dize bina V1, hangi
biz kod Sadece bir göz alarak,
artılar tüm console.log.
Şimdi bu baskılar olmadığını görelim Beklediğimiz ne.
>> Pazartesi, haftanın günü sayısı 01 Salı haftanın günü sayısı 11'dir.
Peki, ben ne çalışıyordum olsun orada yapmak
Pazartesi günü numarası yazdırmak için biri, Salı günü sayısı ikidir.
Ama ben gibi görünüyor Her zaman bir tane yazdırarak.
Peki, neden?
Eh, o çıkıyor, başka bir göz atın Burada bu kod küçük pasajı da.
Biz artı kullanıyorsanız dikkat edin İki farklı bağlamlarda operatörü.
>> Ve işte burada belki şeyler var biz tür söyleyerek oldum,
ah, o kadar harika.
Biz artık veri türleri ile anlaşma yok.
Ama burada nerede bir gerçek Biz veri tiplerini kaybetmek
aslında biraz olabilir bizim için bir sorun.
Şimdi artı operatörü için kullanıldığını dizeleri bitiştirmek ve numaralar eklemek
Birlikte, JavaScript vardır en iyi tahmin yapmak için
olarak Benim için ne yapmak istediğinizi.
Ve bu durumda, yanlış tahmin.
Sadece birleştirilmiş gün olacak 0, bir, iki, üç, dört, beş, veya altı,
ve sonra sadece birleştirilmiş Bu ve daha sonra bir tane birleştirilmiş.
Aslında onları bir arada eklemek vermedi.
Ve böylece bu diller, PHP ve JavaScript,
uzakta özetleri türleri bu kavramı,
artık onunla uğraşmak zorunda değilsiniz.
Onlar hala başlık altında türlerini var.
Ve biz, can durumlarda Bu gibi gerçeği kaldıraç
bir şey söyleyerek belki bu gibi hangi
tarafından, JavaScript anlatıyor yol, bir tamsayı olarak bu tedavi,
Hatta, bir dizge olarak tedavi yok ama biz bir araya dizeleri karıştırma ediyoruz
Burada ve tamsayılar.
>> Bu sadece o şeylerden biri o bağlamda çok büyük görünüyor
biz yok Artık türleri ile uğraşmak,
ama bazen olacak bir durum içine çalıştırmak
aynen böyle nereye gerçeği Eğer türleri üzerinde denetim yok
size geri teper olabilir Eğer dikkatli değilseniz.
Biz IDE üzerinden geri pop eğer Ve böylece, ben yine benim konsol temizlemek için gidiyor,
ve ben dize tıklayın gidiyorum Bina sürümü iki, hangi
O ayrıştırma int işlevini kullanın nerede olduğunu.
Şimdi yazdırarak var Ben bekliyorum bilgiler.
Pazartesi günü bir numara, Salı böylece gün iki numaralı ve olduğunu.
>> Yani tekrar işlevleri hakkında konuşalım.
Sanırım anonim hakkında konuşmak söz verdi fonksiyonlar ve bunun için şimdi bağlam
nihayet geldi.
Biz bunu daha önce bu yüzden, tekrar konuşalım Sadece bir saniye için diziler hakkında.
Yani diziler bir özeldir Bir nesnenin durum.
Aslında, her şeyin JavaScript'imiz bir amacıdır.
Yani fonksiyonlar bir Bir nesnenin özel bir durum,
tamsayılar bir özeldir Bir nesnenin durumda,
ancak diziler özellikle yöntemler bir dizi vardır.
Onlar nesneler çünkü Unutmayın, Onlar özellikleri ve yöntemleri olabilir.
Bunlar, bir dizi yöntem olduğu Bu nesnelere de uygulanabilir.
Adı verilen bir yöntem yoktur boyut, array.size,
bu dönecektir Eğer beklediğiniz gibi
senin dizideki öğelerin sayısı.
Array.pop, çeşit gibi haşhaş bizim kavramı
Bir yığının, hatırlarsan Bizim yığınlar video,
dizinin son öğesini kaldırır.
Array.push yeni bir eleman ekler Bir dizinin sonuna.
Array.shift tür olduğunu DQ gibi, dışarı ekliyorsa
Bir dizinin ilk öğesi.
>> Ama aynı zamanda başka bir özel var Bir dizinin yöntemi haritasını denir.
Ve bu bir çeşit ilginç bir kavram.
Yani bir harita fikri nedir?
Aslında bu göreceksiniz Birkaç diğer dillerde,
ve biz bahsetmiyoruz cartographers tür, burada harita
Biz bir eşleme fonksiyonu bahsediyoruz.
Bağlamda sen Burada bahsediyoruz, bir harita
özel bir operasyon biziz Bir dizide gerçekleştirebilirsiniz
Belirli bir işlevi uygulamak için Bu dizinin her elemanı.
ve böylece biz söyleyebilirim Bu durumda, belki, Array.map
ve bunun içinde, biz geçiyoruz Haritada içine istediğimiz bir işlevdir
her bir elemana uygulanır.
Yani kullanarak bir çeşit benzer var Bir döngü her eleman üzerinde yineleme için
ve belirli bir geçerlidir her eleman işlevi,
Sadece JavaScript inşa etti uygulanabilir bir haritalama kavramı.
Ve bu büyük bir bağlam anonim işlevi hakkında konuşun.
>> Yani biz diyelim tamsayılar bu dizi.
Bu nums denir ve beş var bu işler, bir, iki, üç, dört,
beş.
Şimdi bazı eşlemek istediğiniz Bu diziye işlev.
Ben bir işlev uygulamak istiyorum dizinin her elemanı için.
Peki, ben istiyorum ne diyelim Sadece bütün unsurları ikiye yapmak.
Ben sadece bir döngü kullanmak yapmak ne olabilir var ben 0'a eşittir, ben daha az
eşit veya 4, ben artı, artı ve Daha sonra her sayısını iki katına.
Ama ben de böyle bir şey yapabilirsiniz.
Ben nums eskiden söyleyebiliriz bir iki üç dört beş,
Şimdi, ama, ben seni istiyorum Bu dizinin üzerine bir eşleme uygulamak
Seni istiyorum nereye Her sayısını iki katına.
Ve bu tam olarak burada ne oluyor.
Ama ben geçen ettiğimi fark argümanı harita olarak.
Bu bir anonim bir işlevdir.
Ve ben vermediyseniz fark Bu işlev bir isim,
Ben sadece bir parametre listesi verdik.
Ve böylece bu bir örnektir anonim fonksiyon.
>> Biz genellikle bu çağrı asla Haritanın bağlamı dışında fonksiyonu.
Biz bir parametre olarak tanımlarken Haritayı ve bu yüzden gerçekten yapmak
eğer bunun için bir isim olması gerekir umurunda olan tek şey haritasıdır
ve doğru tanımlanmış oluyor Orada haritanın içinde.
Ve böylece bu bir anonim bir işlevdir.
Biz mümkün olmamıştır Daha önce bunu yapmak için.
Bazı fonksiyon haritada o num, bir parametre kabul eder
ve bu fonksiyon ne döner kez 2 num edilir.
Ve böylece bundan sonra eşleme uygulanmıştır,
Bu şimdi ne nums görünüyor olduğunu gibi, iki, dört, altı, sekiz, 10.
Ve biz pop üzerinden edeceğiz benim tarayıcı penceresi ve sadece
şuna bir bak gerçekten hızlı bir şekilde de.
>> Yani burada başka bir düğme var Benim ana sayfasına çift çağırdı.
Ve ben çift tıklatın ve söyler Bana bu, bir önce, iki, üç, dört,
Beş, iki, dört, altı, sekiz, sonra 10.
Ve geri dönüp eğer çift tıklayın Yine, iki, dört, altı, sekiz, 10.
Ve sonra sonra dört, Sekiz, 12, 16, ve daha sonra 20.
Ve ben bu işlevi ne yapıyorum?
Peki, biz sadece IDE üzerinden pop ve eğer Burada, benim anonim işlev çekin
13 ile yedinci hatta, ben Burada biraz fantezi işi,
ama ben sadece çıktısını ediyorum Ne dizisi şu anda var.
Daha sonra hat 16, 17, 18 benim haritası var.
Ben bu iki katına uyguluyorum budur her elemanın işlevi.
Ve daha sonra biraz aşağı, Ben de aynı şeyi yapıyorum
Ben şimdi ben hariç, daha önce yaptığını dizinin içeriğini yazdırmak
sonradan.
Ama ben burada yaptığım tek şey Sadece bir anonim işlevini kullanın
tüm dizi boyunca haritaya.
>> Yani bir daha büyük bir konu hakkında konuşmak Javascript bir olay kavramıdır.
Bir olay, sadece bir şeydir Bir kullanıcı web ile etkileşime girdiğinde
sayfa, belki onlar bir şey tıklayın ya da belki sayfa yükleme tamamlandığında
ya da belki taşındık bir şey üzerinde kendi fare,
ya da bir şey yazdığınız Bir giriş alanına.
Bütün bunlar olaylar bizim web sayfasında yaşanıyor.
Ve Javascript vardır yeteneği şey desteklemek
Bir olay işleyicisi denir ki Bir geri arama işlevi olduğunu
Bir html olayına yanıt.
Ve bir geri çağırma işlevi nedir?
Peki, bu genellikle sadece başka bulunuyor anonim fonksiyon için isim.
Bu bir işlev olduğunu bir olaya yanıt verir.
Biz gelip nereye Ve bu belirli işlevleri bağlanma düşüncesi
Belirli bir html özniteliği.
Çoğu html elemanları var Bir özellik için destek
Biz html hakkında konuşmak olmadığını tıklama gibi bir şey için bir video
veya vurgulu ya da yük, Bu olayların hepsi
Eğer işlevleri yazabilirsiniz Bu olaylarla bu anlaşma
ne zaman bu olayları web sayfasında ortaya çıkar.
>> Ve bu yüzden belki html Böyle bir şey görünüyor.
Ve ben burada iki düğme var, düğmesine bir düğme ve iki
ve burada ben şu anda var tanımlı hiçbir şey,
ama bu nerede niteliği üzerinde tıklama görünüşte benim html etiketinin parçasıdır.
Yani görünüşe göre ben ne tanımlarken Bu niteliğin içinde oluyor,
bazı JavaScript olacak olayına yanıt işlevi
muhtemelen üzerine tıklayarak düğmesine bir veya düğme iki.
>> Ne tür serin bu biz ise ilgili bir genel olay işleyicisi yazabilirsiniz.
Ve bu olay işleyicisi olacak bir olay nesnesi oluşturun.
Ve olay nesnesi bize anlatacak iki düğme hangi tıklandığı.
Şimdi nasıl çalışır?
Peki, böyle bir şey görünebilir.
Bu yüzden öncelikle düğmeleri belirleyecektir geri arama bir yanıt var
çağrılır işlevi düğme tıklandığında,
Biz olay uyarı adını arayacağım.
Ve ikimiz de durumda fark Bu olay parametresinde geçirerek.
Yani biz bu işlev çağrısı veya bu işlev
oluyor olay tetiklenir, Bu olay nesnesi oluşturmak için gidiyor
ve bir şekilde geçmek parametre adını uyarmak için.
Ve bu olay nesnesi bilgileri içeren gidiyor
hangi düğme tıklandığında edildi.
Ve nasıl bu işe yarıyor?
Peki, böyle bir şey görünebilir.
Yani şimdi benim ayrı olarak JavaScript dosyası, ben belki
Bu bulmak zorunda işlev uyarı isim, hangi
Yine o olay parametresini kabul eder.
Ben tespit ediyorum nerede Ve sonra burada hangi düğme tetikledi,
var tetikleyici olay eşittir nokta kaynak öğesi.
Oluşturulan kaynak neydi geçildi, bu olay nesnesi?
O düğmesine bir mıydı yoksa düğme iki miydi?
>> Ve sonra burada yapıyorum hepsi trigger.innerhtml yazdırarak.
Ama bu durumda, bu Bağlam, trigger.innerhtml
düğmesine yazılı sadece budur.
Biz atlama eğer sadece çok olur Geri bir saniye için, o olur
Bu düğme etiketleri arasında ne var olacak.
Bu düğme, bir veya düğme iki olacaktır.
Ve en az bir göz atalım bu nasıl olay işleyicisi olurdu
biz pratikte çalışan olsaydı bak.
>> Yani her şeyden önce, sen ettik açtı events.js,
JavaScript dosyası nerede hangi Bu fonksiyon tanımladıysanız.
Gördüğünüz gibi, bu kadar hemen hemen tam olarak ne
biz sadece bir saniye önce slayt gördüm.
Ve ben üzerinden gidecek Biz kullanarak oldum ana sayfası.
Ve ben düğmesi burada var tek ve düğme iki.
Ve ben düğmesi birine tıklayın edeceğiz.
Eğer sen, düğmeye tek tıklanan Burada uyarının görebilirsiniz.
TAMAM.
, Düğme iki seni tıklayın Bir düğmeye iki tıkladım.
>> Yani her iki düğme var Aynı işlev çağrısı, değil mi?
Onlar hem uyarı isim vardı Olay, ancak bu olay nesnesi
Biz üzerine tıkladığınızda oluşturulur gets tıklandığında hangi düğme söyler.
Biz ayrı iki yazmak yoktu sahip işlevleri veya anlaşma
herhangi bir ek bilgi aktarmak için.
Biz sadece güvenerek konum Ne JavaScript olacak
Bu oluşturmak için hangi yapmak bizim için bizim adımıza olay nesnesinin tür.
Daha JavaScript çok daha fazla var Bu videoda kaplı kadarıyla,
ancak sahip bu Seni almalısınız temel
Oldukça uzun bir yol için Her şeyi edeceğiz öğrenme
Bu hakkında bilmeniz gereken ilginç bir dil.
Ben Doug Lloyd değilim.
Bu CS50 olduğunu.