1
00:00:00,600 --> 00:00:03,770
Şimdiye dek, neden hakim olan isimlendirmenin heyecan verici olduğunu konuştuk.

2
00:00:03,960 --> 00:00:05,100
Neden umursuyorsun

3
00:00:05,100 --> 00:00:09,420
Bunu kullanan farklı siteler sonsuz imkanlara sahip oyunlar heyecan verici şeyler.

4
00:00:09,570 --> 00:00:12,710
Ancak biz hala DOM'un gerçekte ne hakkında konuşmadık.

5
00:00:12,810 --> 00:00:16,380
Başlamak için bunu sadece bu videoda yapalım, sadece tanımlayalım.

6
00:00:16,380 --> 00:00:17,180
Dio.

7
00:00:17,220 --> 00:00:20,040
Dom, Doküman nesne modeli anlamına gelir.

8
00:00:20,190 --> 00:00:24,100
Bu üç kelimenin anlamı gelecek slaytlarda biraz daha mantıklı olacak.

9
00:00:24,100 --> 00:00:26,780
Ama daha üst bir seviyede tanımlayarak başlayalım.

10
00:00:26,820 --> 00:00:30,560
Dom, javascript ile yaşınız arasındaki arabirimdir.

11
00:00:30,570 --> 00:00:37,080
Tim Mounty SS Temel olarak, H ile etkileşim kurmak için kullanabileceğiniz özel javascript nesneleri javascript yöntemleri

12
00:00:37,080 --> 00:00:42,870
işlevlerinin bir demetidir. M. S. değerlendirelim şeyler değiştirebiliriz elemanları ekleyebiliriz elemanları kaldırırız renkleri değiştiririz şeyleri

13
00:00:42,870 --> 00:00:48,930
H'leriyle etkileşime girmek için her türlü heyecan verici yollar canlandırırız. M. S. belirlemek.

14
00:00:49,380 --> 00:00:54,270
Bu slaytta DOM'un nasıl oluşturulduğu ve neden belge nesne modeli olarak

15
00:00:54,330 --> 00:00:56,070
adlandırıldığı hakkında biraz konuşacağım.

16
00:00:56,070 --> 00:01:02,180
metne başlığım olan bir H-1'e sahip olmak için onu basitçe kenara koymak sadece basittir. o.

17
00:01:02,180 --> 00:01:09,210
Dolayısıyla bir e-posta sayfası yüklediğimizde bir tarayıcıda şöyle görünür ve metni link olarak içeren bir başlık ve

18
00:01:09,210 --> 00:01:09,950
bir etiket,

19
00:01:10,260 --> 00:01:16,360
Bu yüzden bunu tarayıcıda açtığımda bunu görüyorum, ancak perde arkasında DOM oluşturuldu.

20
00:01:16,380 --> 00:01:19,190
Buradan inşa edilmiş.

21
00:01:19,320 --> 00:01:24,270
Demek istediğim, bu yaş Tim'in bir grup javascript nesnesine dönüştüğü.

22
00:01:24,270 --> 00:01:27,440
Her nesne bu öğelerden birini modeller.

23
00:01:27,450 --> 00:01:31,340
Nesne modeli, belge nesne modelinin bir parçası olsun.

24
00:01:31,650 --> 00:01:37,530
için, tarayıcıdaki her ekibi yükledikçe, tarayıcı bize böyle şeyler sergiliyor.

25
00:01:37,530 --> 00:01:38,060
Tekrarlamak

26
00:01:38,220 --> 00:01:43,890
Ancak sahnelerin arkasında aslında bir javascript nesnesi ile her bir öğenin bu modelini yaparız, tıpkı

27
00:01:44,220 --> 00:01:47,490
köpeğimiz Rusty'yi bir javascript nesnesi kullanarak modellediğimiz gibi.

28
00:01:47,490 --> 00:01:50,770
Bir mülk adını ve bir başka cins ve yaşı vardı.

29
00:01:50,850 --> 00:01:55,080
Bu nesneler, içerik farklı olmak dışında temelde aynı şeydir.

30
00:01:55,110 --> 00:02:03,120
Her şeyin içinde bulunan tüm farklı özelliklerin renk arka plan renginin metin boyutuna sahip

31
00:02:03,120 --> 00:02:07,290
oldukları etiket metni türü gibi şeyler var.

32
00:02:07,290 --> 00:02:11,460
Bu nesnelerle çalışırken kesinlikle çok fazla zaman harcayacağız, bu nedenle ayrıntılar önemli değil.

33
00:02:11,640 --> 00:02:14,970
Burada vurgulamak istediğim tek şey, her zaman L'yi doldurmamız. Tarayıcıda görüntülenir ve tarayıcı bu

34
00:02:15,120 --> 00:02:21,810
Tim L'yi alır ve her öğeyi alır ve bir nesneye dönüştürür.

35
00:02:21,900 --> 00:02:22,610
Yani nesne modeli bölümünü kapsar.

36
00:02:22,680 --> 00:02:24,510
Belge ne hakkında.

37
00:02:24,540 --> 00:02:25,860
Böylece şunu görebilirsiniz; bu,

38
00:02:26,070 --> 00:02:31,950
DOM'dan, her şeyin H modelinin tamamında içerdiği en üst düzey nesne olan yapı türünün küçük bir diyagramıdır. T. Bize mounseers belge

39
00:02:31,950 --> 00:02:38,250
denir.

40
00:02:38,250 --> 00:02:38,930
Böylece herhangi bir web sayfasına gidebiliriz.

41
00:02:39,120 --> 00:02:41,200
Bu yüzden Google'ı açtım ve sadece içeri girmeye başlıyorum. Belge sözcüğü.

42
00:02:41,220 --> 00:02:45,190
Ve bunu yaptığım zaman bu büyük nesneye geri dönen bu büyük şeyi alıyorum.

43
00:02:45,390 --> 00:02:49,470
Bunun haricinde bir javascript nesnesine benzemiyor.

44
00:02:49,470 --> 00:02:51,900
Gerçekten beklediğimiz şey değil.

45
00:02:51,900 --> 00:02:53,740
Bunun nedeni tarayıcı benden bir miktar saklıyor olmasıdır.

46
00:02:53,760 --> 00:02:56,030
Gerçekten bana gösteren şey, HQ

47
00:02:56,130 --> 00:03:01,860
postası metin gibi görünüyor, ancak bu Timo'da modellenen gerçek nesneleri göstermiyor.

48
00:03:01,860 --> 00:03:04,480
gerekiyor ve bunu iptal etmeye çalışacağız.

49
00:03:04,740 --> 00:03:11,550
Bunu almak için, konsol nesnesinde başka bir yöntem olan iptal noktası D I R'yi kullanmamız BEN. R. Yapacağımız tüm belgeler, tüm belge nesnesini aşina olduğumuz bu nesne

50
00:03:11,550 --> 00:03:17,430
sözdiziminde yazdırmaktır.

51
00:03:17,430 --> 00:03:19,990
Böylece burada daha fazla bilgi var

52
00:03:20,070 --> 00:03:25,680
dışında sadece kendi başına Rusty ile aynı yazdıklarımız gibi normal bir nesne olduğunu görebilirsiniz.

53
00:03:25,710 --> 00:03:30,220
Bu nedenle yazı tipleri veya görüntü bağlantıları

54
00:03:30,510 --> 00:03:40,050
gibi şeyler var ancak vücut gibi şeyler de var ve bu vücut tüm vücudu temsil ediyor.

55
00:03:40,050 --> 00:03:41,040
Yani burada gördüğün her eleman vücudun içinde.

56
00:03:41,040 --> 00:03:44,320
sürü başka mülk bulunduğunu göreceksin.

57
00:03:44,340 --> 00:03:49,710
Bedenimi açarsam Child'ın düğümleri de dahil olmak üzere bir

58
00:03:49,710 --> 00:03:51,050
Bu nedenle çocuk

59
00:03:51,150 --> 00:03:57,960
düğümleri, bir betik etiketinin bulunduğu bir div olduğunu ve vücudun içinde başka bir div bulunduğunu bize gösteriyor.

60
00:03:57,960 --> 00:03:58,590
Ve öğelere gittiysek bunu görürdük.

61
00:03:58,590 --> 00:04:00,710
İşte bedenin içindeki ceset.

62
00:04:00,710 --> 00:04:03,360
İlk div'de bir betik etiketimiz var ve ikinci div var.

63
00:04:03,420 --> 00:04:07,990
Ve o zaman, o üçüncü div'u açarız

64
00:04:08,430 --> 00:04:15,480
ki, o ikinci div'da eğer içinde iki tane daha div görmeyi bekleriz.

65
00:04:15,480 --> 00:04:15,890
Konsolos'a

66
00:04:15,900 --> 00:04:23,390
gidersek ve ikinci div'a bakarsak ve alt düğümlere baktığımızda, iki tane daha div var demektir. Dolayısıyla domun gerçekten çok hızlı büyüdüğünü görebilirsiniz.

67
00:04:23,430 --> 00:04:28,360
Yüzlerce ve yüzlerce farklı özellik ve yöntem ile farklı düğümler

68
00:04:28,500 --> 00:04:32,610
ve iç içe geçmiş nesnelerin bu çılgın yapısı var.

69
00:04:32,610 --> 00:04:34,730
Bu sadece çok şey.

70
00:04:34,890 --> 00:04:36,250
Bu sınıfta başta bahsettiğim,

71
00:04:36,270 --> 00:04:39,570
herşeyi bilmemekten hoşnut kalmak zorunda olduğun zamanlardan biri.

72
00:04:39,570 --> 00:04:42,060
Şimdi, çoğu geliştiricinin buradaki özelliklerin yarısını bilmediğini söyleyebilirim.

73
00:04:42,420 --> 00:04:46,450
En fazla yüzde 10 ile çalıştıklarını söyleyebilirim.

74
00:04:46,500 --> 00:04:49,200
Burada neredeyse hiç kullanmamız gereken çok şey var.

75
00:04:49,200 --> 00:04:52,630
Ve sonra bazen bir şey çıkıyor ve daha önce hiç yapmadığım bir şey yapmamız gerekiyor.

76
00:04:52,680 --> 00:04:57,150
Biz onu google ve oh alright öğrendik, öyleyse kürlenmemiş değişim mülkü için.

77
00:04:57,330 --> 00:05:03,690
Hiç bir fikrim yoktu.

78
00:05:03,750 --> 00:05:04,560
Ve bu gerçekten de bir geliştirici olmak nasıl bir şey.

79
00:05:04,680 --> 00:05:06,500
Şimdiye kadar javascript'le, değişkenler hakkında

80
00:05:06,510 --> 00:05:11,190
öğrendiğimiz fonksiyonlar ve nesneler hakkında bilgi sahibi olduğumuz, küçük kontrollü bir dünyada çalışıyoruz.

81
00:05:11,190 --> 00:05:14,380
Ve sınırlı sayıda işi yapmanın yolu var ve

82
00:05:14,610 --> 00:05:19,110
yalnızca DOM ile bilmeniz gereken çok özel bir bilgi alt kümesi var.

83
00:05:19,110 --> 00:05:21,440
Artık birçok özellikte çalışmak için bu muazzam ekosisteme sahibiz.

84
00:05:21,450 --> 00:05:25,500
Bu yüzden burada çok şey olduğunu yinelemek istiyorum.

85
00:05:25,620 --> 00:05:28,020
Önemli parçalara odaklanacağız, ancak amaç ezberlemek değil.

86
00:05:28,170 --> 00:05:32,100
Hedef, her malı emzirmemek değildir.

87
00:05:32,130 --> 00:05:34,780
Yine en çok yüzde 10 yetkin bir web geliştiricisi olmanız gereken şey.

88
00:05:34,920 --> 00:05:39,560
Tamam o halde geri dönelim ve sadece bir kez daha geçmek istiyorum.

89
00:05:40,000 --> 00:05:43,080
Hakkında konuştuklarımızı özetleyin.

90
00:05:43,080 --> 00:05:44,450
Dolayısıyla DOM, belge nesne modeli anlamına gelir.

91
00:05:44,700 --> 00:05:48,030
JavaScript ve H'niz arasındaki arayüz. M. S. İşi interaktif hale getirmek için javascript'imizi nasıl kullanabiliriz.

92
00:05:48,150 --> 00:05:52,150
Sayfaya yeni bir element eklemek

93
00:05:52,280 --> 00:05:55,180
veya bir linkin ref özelliğini değiştirmek veya vücudumuzdaki arka plan

94
00:05:55,260 --> 00:06:01,800
görüntüsünü değiştirmek veya bir formun değerini nasıl elde edebileceğimizi yapmak gibi işler yapıyoruz veya özel doğrulamalar ve animasyonlar ile etkileşimli Bazı kodlarda

95
00:06:01,800 --> 00:06:07,320
tıkladığınız öğeler, tüm bu farklı olasılıkları çalıştırır; bunların hepsi, belge nesne modelinin javascript'imizi H ile bağladıkları gerçeğinden kaynaklanır. M. S. erişim.

96
00:06:07,320 --> 00:06:13,160
modelinin nesne modeli parçası, H öğelerimizi modelleyen bir grup javascript nesnesinin olduğunu söyler.

97
00:06:13,410 --> 00:06:18,960
Böylece, belge nesne T. Miktar.

98
00:06:19,260 --> 00:06:24,930
Dolayısıyla bir ATAC var burada, burada atec'i temsil eden bir nesne buluyoruz.

99
00:06:24,930 --> 00:06:27,470
Ve sonra, burada gördüğümüz bu H1 etiketini temsil eden başka bir nesne buluyoruz.

100
00:06:27,870 --> 00:06:32,980
Son olarak belge nesne modeli deniyor çünkü her

101
00:06:33,180 --> 00:06:37,770
şey belge adı verilen bir nesnenin içinde yaşıyor.

102
00:06:37,980 --> 00:06:42,930
Her şeyin içinde yaşadığı kök düğümdür.

103
00:06:42,930 --> 00:06:43,740
Bir sonraki video, bazı kod yazmaya başlayacağız.

104
00:06:43,830 --> 00:06:46,850
 

105
00:06:47,070 --> 00:06:49,030