[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.