1 00:00:00,330 --> 00:00:05,310 Tamam, böylece kodumuzun başında bulunan sıfırlama işlevini kullanabileceğimiz son bir yer var. 2 00:00:05,550 --> 00:00:11,000 Sayfa, ne yapılması gerektiğini ilk kez yüklediğinde, yaptığınız rasgele renkleri seçmek 3 00:00:11,010 --> 00:00:17,220 zorundayız, o zaman burada zaten sahip olduğumuz yeni rasgele renklerden bir renk seçmeliyiz. 4 00:00:17,820 --> 00:00:24,570 Sonra sayfadaki her bir karara bir renk atamalıyız, böylece sıfırlama işlevini kullanabiliriz, çünkü bu 5 00:00:24,570 --> 00:00:26,290 temelde yaptığı şeydir. 6 00:00:26,490 --> 00:00:31,960 Aslında yalnızca başlangıç ​​olarak init adlı bir işleve sahip ve bu da yok bir şeyi 7 00:00:32,340 --> 00:00:33,430 çalıştırarak işleri temizleyeceğim. 8 00:00:33,600 --> 00:00:38,610 Ve init fonksiyonumuzun içinde, sayfa yüklendiğinde çalışması gereken her şeyi koyacağız. 9 00:00:39,000 --> 00:00:41,490 Dolayısıyla, init işlevine sahip olacağız. 10 00:00:41,790 --> 00:00:47,970 Ve net işlevimizin içinde yapabileceğimiz ilk şey, devam edin ve mod düğmemizin 11 00:00:47,970 --> 00:00:49,070 dinleyicilerine ekleyin. 12 00:00:50,250 --> 00:00:52,200 Ve bu gerçekten sadece işleri temizlemek için. 13 00:00:52,230 --> 00:00:55,110 Bu yüzden hiçbir yerde ortasında dolanmak değil. 14 00:00:55,320 --> 00:00:56,850 Dolayısıyla bunu düzgün bir şekilde girintilendirir. 15 00:00:57,000 --> 00:01:05,260 Bu bizim mod düğmelerimiz olay dinleyicilerimiz ve bu kodu buradan alacağım. 16 00:01:05,400 --> 00:01:10,420 Ve bu ne yapar, sadece kurtulabildiğimiz her karenin rengini değiştirir. 17 00:01:10,560 --> 00:01:16,410 Bunu artık yapmak zorunda değiliz, çünkü bu sıfırlama işlemini kullanacağız ve tıkladığınızda tıklamak 18 00:01:16,410 --> 00:01:21,780 için tüm bu mantığın biraz temizleyebilmesi için her kareye klick dinleyicileri ekliyor. 19 00:01:22,620 --> 00:01:26,980 Mesaj ekranını değiştiriyoruz, sıfırlama düğmesi renklerini değiştiriyoruz. 20 00:01:27,030 --> 00:01:33,780 Bu yüzden, bunu init işlevimize kopyalayacağım, çünkü sayfanın çok iyi yüklendiğinde başında 21 00:01:33,900 --> 00:01:38,560 çalıştırılmasını ve bunu da doğru bir şekilde gerçekleştirilmesini istiyoruz. 22 00:01:38,820 --> 00:01:44,970 işleyicileri düğmeler mod düğmeleri ve kareler için kurduktan sonra en son 23 00:01:45,060 --> 00:01:52,080 şey, daha sonra sıfırlama işlevini çalıştırmak anlamına gelen ekranı sıfırlamak ve sıfırlama ne 24 00:01:52,080 --> 00:01:59,610 yapacağını gerçekten renkler üreteceğiz bu yüzden renkleri başlangıçta boş veya boş olarak tanımlayabiliriz. 25 00:01:59,610 --> 00:02:01,260 Ve sonra olay 26 00:02:01,260 --> 00:02:02,230 Ben sadece onunla başlayacağım. 27 00:02:02,280 --> 00:02:04,040 İlk önce boş bir dizi verelim. 28 00:02:04,350 --> 00:02:11,910 Ve sonra yapabileceğimiz, seçilen rengi sadece değeri olmayan bir değişken olmak ve onu kaydetmek ve işleri biraz 29 00:02:11,910 --> 00:02:13,920 daha temiz yapmak olarak belirledi. 30 00:02:14,010 --> 00:02:19,980 Seçmenlerimi burada aşağıya indireceğim, böylece elimizdeki yukarıdaki şeyleri seçmeyen üç değişken 31 00:02:19,980 --> 00:02:20,760 oluyor. 32 00:02:20,760 --> 00:02:25,620 Ve sonra sayfadaki farklı öğeleri seçen değişkenlerimiz var. 33 00:02:26,100 --> 00:02:26,620 TAMAM. 34 00:02:26,790 --> 00:02:29,360 Öyleyse en başında ne olur? 35 00:02:29,550 --> 00:02:34,600 Bu kodun tamamını çalıştırmak için init işlevi çalıştırıyoruz. 36 00:02:35,010 --> 00:02:42,160 Ve bu kod bizim mod düğmesi dinleyicilerimizi ayarlayacak ve kare dinleyicilerimizi kuracak ve 37 00:02:42,600 --> 00:02:49,050 sonra renkleri seçen sıfırlamayı çalıştırıp, metin içeriğini ve hepsini değiştiren renkleri rasgele 38 00:02:49,050 --> 00:02:50,980 bir renk seçer. 39 00:02:51,150 --> 00:02:56,400 Ve biz bu çizgiden kurtulabiliriz, çünkü bunu şimdi sıfırlama denilen init 40 00:02:56,520 --> 00:02:57,730 işlevinin içinde yapıyoruz. 41 00:02:57,780 --> 00:03:01,720 O halde devam etmeden önce bunun işe yarayıp yaramayacağına emin olalım. 42 00:03:02,610 --> 00:03:04,860 Yeniledik yeniyi açarız. Hata yok. 43 00:03:04,890 --> 00:03:05,860 Ve sayfayı yenilediğimi görebiliyorsunuz ve bu kodun tümü bu init işlevinde çalışıyor. 44 00:03:06,180 --> 00:03:11,370 Ve içeride gördüğümüz her şeyi sıfırlıyor. 45 00:03:11,370 --> 00:03:15,270 Böylece dinleyicilerimiz doğru bir şekilde kuruldu. 46 00:03:15,270 --> 00:03:17,190 Doğru mesajı alıyoruz. 47 00:03:17,460 --> 00:03:19,140 Tekrar oynayalım. 48 00:03:19,140 --> 00:03:20,160 Her şey düzgün çalışıyor. 49 00:03:20,370 --> 00:03:21,890 Kolay mod oynayalım. 50 00:03:22,170 --> 00:03:24,440 Oraya gidiyoruz. 51 00:03:25,680 --> 00:03:26,340 Bir kez daha tekrar oynayalım. 52 00:03:26,340 --> 00:03:31,430 Harika. 53 00:03:31,530 --> 00:03:32,000 Bu yüzden iyi çalışıyor. 54 00:03:32,100 --> 00:03:35,880 Yapabileceğimiz bir değişiklik daha var; bu, bu 55 00:03:35,910 --> 00:03:40,890 işlevi burada ve şimdi biraz uzun sürüyor ve birlikte çalıştığım 56 00:03:40,890 --> 00:03:45,750 bazı insanlara, işlevin ne kadar süreceği konusunda katı kurallar var. 57 00:03:45,750 --> 00:03:46,290 Bazı insanlar, kodunuzun 10 satırdan uzun olup olmadığını kendi işlevine bölmeniz gerektiğini söyleyecektir. 58 00:03:46,290 --> 00:03:51,900 Yani burada yapabiliriz. 59 00:03:52,230 --> 00:03:53,500 Bu, kendi yapabileceği 60 00:03:53,700 --> 00:03:59,370 bir işlevi olabilir, çünkü burada yapabileceğimiz bir mod düğmesi dinleyicisi kuruyor. 61 00:03:59,370 --> 00:04:00,000 Veya 62 00:04:00,040 --> 00:04:09,690 sadece yazma modu düğmesi ayarlama modu düğmeleri çağıralım ve o zaman burada fonksiyonu mod düğmelerini ayarlamak için bildirelim. 63 00:04:09,690 --> 00:04:15,010 Ve burada, o zaman yalnızca bir 64 00:04:15,960 --> 00:04:24,900 başlangıcında bir kez girinti çalıştırmak olacak bu kodu yapıştırın. 65 00:04:24,900 --> 00:04:25,470 Mod düğmesi dinleyicilerini kurduk ve aynı şeyi burada yapabiliriz. 66 00:04:25,470 --> 00:04:29,450 Bu kodu kopyalayın ve bu kişiye kare dinleyiciler 67 00:04:29,460 --> 00:04:38,100 kurmanın bir adını verelim ya da sadece bunun gibi kareler kurmasını çağıralım ve sonra bir dizi ayar yazalım. 68 00:04:38,100 --> 00:04:45,120 Ve sermayeyi kullanmadığımı fark ediyorum orada bulunmuyorsun. 69 00:04:45,120 --> 00:04:48,240 Dolayısıyla burada kareler oluşturmaya 70 00:04:48,300 --> 00:04:55,740 dikkat etmem gerekiyor ve kodumuzun aynı şekilde çalıştığından emin olalım. 71 00:04:55,740 --> 00:04:56,340 Şimdi bizim init gerçekten güzel ve temiz. 72 00:04:56,340 --> 00:04:59,130 Kareleri ayarlayan mod düğmelerini ayarlar ve gördüğümüz her şeyi sıfırlar. 73 00:04:59,250 --> 00:05:04,610 Yenilemeye çalışalım. 74 00:05:04,680 --> 00:05:06,850 Görünüşe göre bizim Meydanı hala iyi çalışıyordu. 75 00:05:07,170 --> 00:05:10,970 Onları daha fazla yenilersek mod düğmelerimiz yine de işe yarar. 76 00:05:11,100 --> 00:05:15,510 Bu yüzden hepsi harika ve her şey yolunda gidiyor gibi görünüyor. 77 00:05:15,510 --> 00:05:19,040 Şimdilik refactor'a kadar süreceğimiz kadarıyla. 78 00:05:19,430 --> 00:05:21,600 Ancak size gelecekteki videolarda iyileştirmek isteyeceğimiz birkaç şeyi göstereceğim. 79 00:05:21,600 --> 00:05:26,360 Javascript hakkında biraz bilgi edindikten sonra onunla daha rahat edelim, bazı tasarım desenlerinden 80 00:05:26,610 --> 00:05:31,020 bahsedeceğiz ve Tasarım Desenleri temel olarak kodunuzu yapılandırma yöntemlerimizdir, böylece bu kodu alabiliriz. 81 00:05:31,020 --> 00:05:36,690 Aynı oyunu yapmak için aynı mantıkla aynı şekilde çalışır ve 10 farklı kişi bunu 82 00:05:36,690 --> 00:05:42,030 10 farklı yolla yazabilir ve bu sadece hangi fonksiyonların ya da değişkenlerin adlarının değil. 83 00:05:42,030 --> 00:05:47,690 Ayrıca şeyleri genel olarak nasıl yapılandıracağımız ve en basit olanı veya 84 00:05:47,820 --> 00:05:53,100 en yaygın olanlarından birini modül tasarım deseni olarak adlandırdığımızda da geçerlidir. 85 00:05:53,460 --> 00:05:55,650 Bunun anlamı, nesnelere bir sürü 86 00:05:55,890 --> 00:06:01,860 özellik ekleyebilmemizdir; bu nedenle, nesnenin içinde bulunmayan bu değişken gibi değişkenlerimiz yok. 87 00:06:01,860 --> 00:06:05,460 Pencere nesnesinde bu gibi kendi başlarına olan herhangi bir işlevimiz yok. 88 00:06:05,550 --> 00:06:10,000 Daha ziyade, onları kendi nesnemize ekliyoruz. 89 00:06:10,080 --> 00:06:12,790 Yani böyle bir oyun nesnesine sahip olabilirsiniz. 90 00:06:12,870 --> 00:06:16,840 Ve sonra Game dot yazabiliriz ve biz sadece bir parçasını yapacağız. 91 00:06:17,280 --> 00:06:21,840 Game dot init bir işlevdir ve biz sadece bu 92 00:06:21,870 --> 00:06:30,690 kodu orada kopyalayacağız ve bunu her tekli her özellik değişkeni için yapacağız ve en sonunda oyuna gireceğiz. 93 00:06:30,690 --> 00:06:36,590 Ve bunun arkasındaki mantık biraz daha karmaşıktır. 94 00:06:36,620 --> 00:06:41,130 Kısa versiyon, şeyleri yapılandırılmış ve organize etmemize yardımcı oluyor. 95 00:06:41,130 --> 00:06:44,720 Ayrıca, nesne videolarından birinde daha önce bahsettiğim ad çarpışmalarını önlemeye de yardımcı olur. 96 00:06:44,940 --> 00:06:50,290 Bu yüzden tüm refactor'u gözden geçirmeyeceğim. 97 00:06:50,460 --> 00:06:52,620 Sahip olduğumuz şey yeterince iyi. 98 00:06:52,620 --> 00:06:53,730 İşe yarıyor. 99 00:06:53,730 --> 00:06:54,880 Ancak bir geliştirici 100 00:06:54,990 --> 00:06:59,100 olarak büyümeye devam edersiniz ve bir kere daha rahat ederseniz dikkat 101 00:06:59,100 --> 00:07:04,590 etmeniz gereken şeylerden biri de javascript tasarım kalıpları olduğunu öğrenir ve bunun üzerine yazılmış kitaplar bulunur. 102 00:07:04,590 --> 00:07:05,010 Makaleler 103 00:07:05,010 --> 00:07:10,740 ve bloglar ve çok sayıda video var ve javascriptinizi yapılandırmanızla ilgili çevrimiçi olan tüm dersler var. 104 00:07:10,740 --> 00:07:11,670 Yani odağı değil. 105 00:07:11,790 --> 00:07:12,940 Ve yine de gerçekten 106 00:07:12,970 --> 00:07:18,390 sadece içeriğe odaklanmak istiyorum kodu the HTML the javascript C mantık değerlendirmek ve yapısı daha sonra gelebilir. 107 00:07:18,450 --> 00:07:20,910 Fakat sadece bunu yapılandırmanın başka yollarının olduğunu bilmenizi isterim. 108 00:07:21,210 --> 00:07:24,260