1
00:00:00,270 --> 00:00:05,870
Birkaç video önce, öğeleri seçme ve bunları değiştirme konseptini tanıttım.

2
00:00:06,120 --> 00:00:13,050
Dolayısıyla bir H1 veya tüm resim etiketleri seçeriz ve sonra rengi değiştirebilir veya canlandırabilir veya üzerlerine

3
00:00:13,050 --> 00:00:14,660
tıkladığınızda bir şeyler yapabiliriz.

4
00:00:14,670 --> 00:00:18,360
Şimdiye kadar seçme yarısını ve bu videoyu yalnızca kapsamış olduk.

5
00:00:18,360 --> 00:00:24,090
Öğeleri seçtikten sonra öğeleri değiştirmek için birçok yöntemden birkaç tanesini tanıtacağız.

6
00:00:24,120 --> 00:00:26,760
İşte konuşmak istediğim dört ana şey var.

7
00:00:26,970 --> 00:00:29,320
İlki, bir öğe stilini nasıl değiştiririz.

8
00:00:29,340 --> 00:00:32,050
Mavi yapmak ya da gizlemek için nasıl yapacağız.

9
00:00:32,070 --> 00:00:34,070
Yazı tipi boyutunu değiştirin.

10
00:00:34,080 --> 00:00:40,320
Sonraki olarak, sınıfları javascript ile ekleme ve kaldırma ve ardından bir etiketin içeriğini değiştirme hakkında

11
00:00:40,320 --> 00:00:40,920
konuşacağız.

12
00:00:41,010 --> 00:00:44,490
Örneğin bir H-1 etiketinin içindeki metni nasıl değiştirebilirim?

13
00:00:44,490 --> 00:00:46,590
Ve sonra son değiştiren nitelikler.

14
00:00:46,590 --> 00:00:52,040
Öyleyse, bir resim etiketinde veya AA etiketi üzerindeki referans üzerinde nasıl değişiklik yapacağız.

15
00:00:52,230 --> 00:00:55,260
Stil özelliği hakkında konuşarak başlayacağız.

16
00:00:55,260 --> 00:01:00,900
özelliği, yüzlerce özellik ayarlayabildiğimiz her CSSA mülkü için bir tane büyük bir nesne.

17
00:01:00,900 --> 00:01:07,560
Dolayısıyla DOM kurulduğunda ve tek bir düğüm yapıldığında veya her öğe için bir nesne yapıldığında

18
00:01:07,830 --> 00:01:11,220
stil adı verilen bir özellik var ve style

19
00:01:11,370 --> 00:01:15,460
Bu durumda, stil ve öğeye farklı şekilde gidecek javascript yazabiliriz.

20
00:01:15,480 --> 00:01:23,580
Yani burada bir öğeyi onun Id vurguluğuyla seçiyorum, bu nedenle etiketi adı verilen bir değişkene kaydetmeyi ve sonra

21
00:01:23,580 --> 00:01:24,730
onu değiştirmeyi seçin.

22
00:01:24,750 --> 00:01:26,370
Ve ne yaptığımı ayarlarım.

23
00:01:26,370 --> 00:01:34,190
Etiket nokta stili nokta rengi mavi etiket nokta stili nokta kenarlığı 10 pikseldir kırmızıya eşittir.

24
00:01:34,200 --> 00:01:37,830
Sağ tarafın bir dize olması gerektiğini unutmamak önemlidir.

25
00:01:38,280 --> 00:01:43,430
Dolayısıyla, Css'de mavi veya 70 Px civarında tırnak işaretleri koymamıza rağmen.

26
00:01:43,440 --> 00:01:44,730
Bu Css değil.

27
00:01:44,730 --> 00:01:45,720
Bu javascript.

28
00:01:45,720 --> 00:01:48,820
Dolayısıyla hala normal javascript kurallarını takip etmek zorundayız.

29
00:01:49,080 --> 00:01:53,550
Bu nedenle, bu özelliklerin bazılarını göstermek için kullanacağım basit bir web sayfam var.

30
00:01:54,240 --> 00:02:00,190
Dolayısıyla bu web sayfası, o paragraftan çok basit bir H-1 paragraf kadar basittir.

31
00:02:00,200 --> 00:02:05,310
Güçlü bir etiket var ve ardından iki sevimli corgi karışımından oluşan iki görüntü var.

32
00:02:05,640 --> 00:02:11,100
ve bir şeyler seçerek başlamam lazım ve bu H-1'in rengini ve sınırını değiştireceğim.

33
00:02:11,100 --> 00:02:13,770
Bu yüzden ne yapacağım Konsolos'a gitmek

34
00:02:13,770 --> 00:02:19,470
Dolayısıyla onu seçmek zorundayım ve bunu, seçici H-1'i sorgulayan yeni bir belgede yapmak

35
00:02:20,650 --> 00:02:22,800
için birden fazla yol var.

36
00:02:25,320 --> 00:02:33,030
Ve sonra sana büyük bir nesne olan ton-ton mülk H-1 tarzı göstereceğim.

37
00:02:33,600 --> 00:02:41,680
Bu yüzden onlardan birini H-1 tarzı koyu renk gibi değiştirip sarı yapmayı deneyeceğim.

38
00:02:42,520 --> 00:02:45,560
Ve hemen sarıya dönüştüğünü görebiliyorduk.

39
00:02:45,570 --> 00:02:54,300
Sınır H-1 ile aynı olan bu kenar boşluğu stili beş piksel katı pembe yapın.

40
00:02:56,100 --> 00:02:56,950
Ve işte gidiyoruz.

41
00:02:57,210 --> 00:03:01,190
Elbette ki sadece bunun pembe bir sınıra sahip sarı olmasını istediysek.

42
00:03:01,290 --> 00:03:04,910
Sayfa yüklendiği andan itibaren bunu yapmak için javascript kullanmak için hiçbir neden yok.

43
00:03:04,920 --> 00:03:09,990
CSSA dosyasına koyduk, javascript kullanılıyordu; kullanıcı sarı sayfaya gelmişti ve kullanıcı beş saniyeliğine

44
00:03:09,990 --> 00:03:15,210
sayfaya geldiğinde pembe bir kenarlığı var, yoksa kullanıcı belirli bir bölümüne ilerlediğinde bunun

45
00:03:15,210 --> 00:03:18,670
olmasını isterdi. sayfa veya kullanıcı bir şey üzerine tıkladı.

46
00:03:18,690 --> 00:03:23,450
Her şey etkileşimli hale getirilmesiyle ilgilidir ve kısa süre içerisinde nasıl yapılacağını göreceğiz.

47
00:03:24,960 --> 00:03:29,310
burada kendim yapıyormuşum gibi bir öğe üzerinde bir sürü dosyayı manipüle

48
00:03:29,310 --> 00:03:35,430
ediyorsanız ve bu etikette beş farklı özelliği değiştirirseniz, kesinlikle daha iyi bir yol var demektir.

49
00:03:35,430 --> 00:03:38,150
Stil özelliğini kullanma hakkında güzel bir şey,

50
00:03:38,460 --> 00:03:40,740
Ve daha iyi bir yol olduğunun birkaç nedeni var.

51
00:03:40,740 --> 00:03:43,350
Birincisi, bu çok kuru kod değil.

52
00:03:43,350 --> 00:03:46,740
Stil etiketli stil etiketli tekrarlanan bir sürü şey var.

53
00:03:46,740 --> 00:03:50,670
Daha da önemlisi, endişelerin ayrılması denilen bu kavram olsa da.

54
00:03:50,820 --> 00:03:57,210
Dolayısıyla, endişeleri birbirinden ayırmak, HM L K R İ K İ L İ Ş K K K K s v not javascript olduğu konseptidir.

55
00:03:57,210 --> 00:04:00,840
Her biri kendi küçük alanlarından sorumlu ve biz bunu istemiyoruz.

56
00:04:00,840 --> 00:04:02,830
Aralarında çok fazla geçiş yapmak istemiyoruz.

57
00:04:02,850 --> 00:04:08,190
Bu diyagramda, her ekibin yapısı ve javascripti olan arasında biraz çapraz

58
00:04:08,190 --> 00:04:12,930
geçişin olduğunu görebilirsiniz ve bu davranış da sunumu değerlendirmektir.

59
00:04:12,930 --> 00:04:18,690
Ve H html javascripti ile küçük bir çakışma var, ancak C Ss gelmeden önce

60
00:04:18,690 --> 00:04:25,050
eskiden olduğu gibi, aslında stil özelliklerini kullandığımız her bir öğede kendi stillerinizi tek tek yazmak zorunda

61
00:04:25,050 --> 00:04:25,840
olduğunuzu unutmayın.

62
00:04:26,130 --> 00:04:32,310
Bu durumda tanıtımımız tarzı aslında yapıya dokunuyordu ve Cs'lerle artık

63
00:04:32,310 --> 00:04:33,500
onları ayırdık.

64
00:04:33,570 --> 00:04:38,710
Bu yüzden HMO'muz saf bir yapıdadır ve başarı saf stildir.

65
00:04:38,880 --> 00:04:44,430
Peki javascript hangi sayfanın davranışını kontrol etmeli ve bazen bunun

66
00:04:44,460 --> 00:04:50,490
anlamı şeylerin nasıl görüneceğini değiştirmek ama aslında javascript içindeki özellikleri değiştirerek

67
00:04:50,490 --> 00:04:52,620
javascriptde şekillendirme yapmak.

68
00:04:52,680 --> 00:04:57,530
Yapabileceklerimiz, onları CSSA dosyasının içinde açıp kapatmaktır.

69
00:04:57,570 --> 00:05:04,270
Dolayısıyla gerçekten yaygın olan kalıplardan biri, vurgulamaya benzer bir CSSA sınıfı tanımlamamız ve bu vurgulama sınıfının beş

70
00:05:04,270 --> 00:05:08,380
ya da altı ya da değiştirdiğimiz birçok farklı özelliğe sahip olmasıdır.

71
00:05:08,380 --> 00:05:13,210
Ardından, bir öğeyi javascript ile seçebilir ve o vurgulama sınıfını verebiliriz.

72
00:05:13,210 --> 00:05:18,930
Dolayısıyla, bir satırla Javascript'te beş farklı özelliği değiştirecek bir sınıf ekleyebiliriz.

73
00:05:19,150 --> 00:05:22,660
Bunun Javascript'de nasıl uygulanacağına bir göz atalım.

74
00:05:22,690 --> 00:05:29,020
Dolayısıyla bir etiket seçmek ve daha sonra stil değiştirmek ancak mavi olmak için renk değiştirmek ve daha

75
00:05:29,020 --> 00:05:35,770
sonra 10 piksel katı kırmızı olabilmek için çizgiyi çizmek yerine bunun yerine bir sınıf bulmak için bir şey çağrılabilir.

76
00:05:36,250 --> 00:05:41,940
Genellikle, sınıfın yapılması gerekeni yansıtan şekilde biraz anlamlı olmasını istersiniz.

77
00:05:42,040 --> 00:05:45,040
Vurgulanan bir şey mi yoksa doğru bir cevap mı var.

78
00:05:45,040 --> 00:05:49,840
Sınıfı uygulamak için ne sebep olursa olsun yüksek puan, iyi bir isim bulmaya çalışıyor.

79
00:05:50,170 --> 00:05:56,320
Bu yüzden bu iyi bir isim değil, bazı sınıf bazı sınıf renk mavi ve sınır 10

80
00:05:56,320 --> 00:05:57,820
piksel katı kırmızı değişiyor.

81
00:05:57,820 --> 00:06:06,280
Sonra tek yapmam gereken etiketi seçip sonra da nokta sınıfı listesine ekleyerek bir nokta ekleyin ve

82
00:06:06,310 --> 00:06:12,730
bu da benim fikrimle etiketimi verecek yeni bir sınıfın tümünde bu stillerin

83
00:06:12,730 --> 00:06:13,790
bazı sınıflarında uygulanacak.

84
00:06:13,810 --> 00:06:16,030
Sınıf listesinde yapabileceğimiz başka birkaç şey var.

85
00:06:16,270 --> 00:06:22,990
Bu örnekte, daha önce gördüğümüz, hangi sınıf ismi alan bir sınıf kaldırma ekleyeceğimize ek olarak üç

86
00:06:23,020 --> 00:06:29,200
yöntem ekledik ve bu sınıf adını sınıf listesinden kaldırdıktan sonra sınıf listesinden son derece kullanışlı

87
00:06:29,230 --> 00:06:30,760
olan sınıf listesini kaldırdık.

88
00:06:30,760 --> 00:06:31,960
Bir sınıf adı gerektiriyor.

89
00:06:32,080 --> 00:06:37,570
Ve eğer verilen öğenin o sınıfı varsa, eleman o sınıfı içermiyorsa o sınıfı kaldırır

90
00:06:37,570 --> 00:06:39,270
ve sonra onu açarım.

91
00:06:39,280 --> 00:06:40,550
Bu yüzden çok çok faydalı.

92
00:06:40,630 --> 00:06:42,180
Bunu her zaman daha sonra kullanacağız.

93
00:06:42,400 --> 00:06:46,990
Öyleyse, buradaki örneğime dönmeden önce size göstereyim.

94
00:06:46,990 --> 00:06:49,300
Aslında yeni bir sınıf tanımlayacağım.

95
00:06:49,690 --> 00:06:58,630
Dolayısıyla, yeni bir stil sayfası yapmadan ve bir bağlantı kullanarak sadece zaman uğruna bir stil

96
00:06:59,500 --> 00:07:00,390
etiketi kullanacağım.

97
00:07:00,530 --> 00:07:04,140
Bu yüzden, sadece büyük diyeceğiniz bir sınıfı tanımlayacağım.

98
00:07:04,990 --> 00:07:14,320
Ve ne yapacağım yazı tipi boyutunu 100 piksel olarak değiştirmek ve renk turuncu olacak şekilde değiştirin.

99
00:07:15,010 --> 00:07:22,540
Ve son olarak, ona beş piksel katı kırmızı bir sınır verelim.

100
00:07:22,960 --> 00:07:24,280
Bu yüzden bende bırakacağım.

101
00:07:24,370 --> 00:07:30,700
Sayfamı yenilersem tabii ki hiçbir şey değişmez, ancak ne zaman yapmak istediğim o sınıfa bir şeye başvurmaktır.

102
00:07:30,950 --> 00:07:37,120
Bu yüzden, bu paragrafın yapmak için büyük bir sınıfı olmasını sağlayacağım, şimdiye kadar bunu seçmem gerekiyor.

103
00:07:37,120 --> 00:07:44,900
Paragraf, sorgu seçici paragrafa eşittir.

104
00:07:47,180 --> 00:07:47,820
TAMAM.

105
00:07:48,010 --> 00:07:53,130
Ve sadece sınıf listesine bakarak başlayalım ve boş olduğunu görebilirsiniz.

106
00:07:53,140 --> 00:07:55,970
Bu paragrafa henüz sınıf atanmamıştır.

107
00:07:56,140 --> 00:08:04,090
Bu yüzden eğer bir tane atamak istersem, yapmam gereken P-Dub sınıfı liste ekle add to add ve sınıfı

108
00:08:04,180 --> 00:08:05,310
büyük eklemek istiyorum.

109
00:08:06,190 --> 00:08:07,240
Ve işte gidiyoruz.

110
00:08:07,720 --> 00:08:11,370
Böylece, stil sayfamdaki yeni değişiklikleri otomatik olarak yansıtıyor.

111
00:08:11,440 --> 00:08:13,540
Tek yapmam gereken büyük sınıfa eklemek.

112
00:08:13,780 --> 00:08:18,880
Umarız ki bunun daha kolay olduğunu ve sorumlulukları birbirinden ayırdığımızı görebilirsiniz.

113
00:08:18,880 --> 00:08:24,940
Yani hepsi javascript yapar; SS'nin belirli bir bölümünde açar veya kapatır, tek tek mülkleri

114
00:08:24,940 --> 00:08:27,610
manüel olarak manuel olarak değiştirmek yerine.

115
00:08:27,610 --> 00:08:32,120
Artık, işleri Javascript'imiz yerine mümkün olduğunca değiştiriyoruz.

116
00:08:32,470 --> 00:08:42,430
Bu yüzden kaldırmak istersem, yapmam gereken tek şey, sınıfta sınıfın büyük kaldırılmamasını ve bahsettiğim en

117
00:08:42,610 --> 00:08:45,940
sevdiğim şeyin süper kullanışlı olmasıdır.

118
00:08:45,940 --> 00:08:52,170
Dolayısıyla şu an geçiş yapıp isabet edersem, girilen ismim sınıfın atanmadığı için büyük

119
00:08:52,180 --> 00:08:52,940
sınıfı atar.

120
00:08:53,320 --> 00:08:56,420
Şimdi büyük olan zaten atandı, böylece onu kaldıracak.

121
00:08:56,440 --> 00:09:04,030
Dolayısıyla bu açıkça, bu yazı tipi sınıfında bu çılgın turuncu yapmak için kullanışlıdır, ancak yapabileceğimiz şey, kullanıcının

122
00:09:04,030 --> 00:09:09,610
yapması için tıklamak için bir liste yapmak gibi bir şey üzerinde olmasıdır.

123
00:09:09,880 --> 00:09:11,440
Ve bunu geçeceğiz.

124
00:09:11,650 --> 00:09:15,400
Ancak tekrar tıklayabilirler ve daha sonra tıkanırlar veya normale dönerler.

125
00:09:15,430 --> 00:09:16,400
Bu yapılmalıdır.

126
00:09:16,410 --> 00:09:23,080
Veya bir sınıfa geçiş yaparak yapabiliriz, bu yüzden yapacağımız bir sınıfa sahip olabiliriz ve tekrar tıklayın

127
00:09:23,080 --> 00:09:23,700
uygulamalı tıklama.

128
00:09:23,800 --> 00:09:24,820
Kaldırıldı.

129
00:09:24,820 --> 00:09:27,000
Bu, geçiş seçeneğini ne zaman kullanabileceğinizi gösteren bir örnek.

130
00:09:27,100 --> 00:09:29,740
Fakat gerçekten çok faydalıdır.

131
00:09:29,740 --> 00:09:34,090
Sınıf listesinde bahsedeceğim son nokta teknik olarak bir dizi değil.

132
00:09:34,090 --> 00:09:37,840
Dolayısıyla, bir sınıf eklemek için bir reklam kullanmamız gerektiği anlamına gelir.

133
00:09:37,870 --> 00:09:39,900
İtme gibi bir şey yapamayız.

134
00:09:40,150 --> 00:09:44,000
Bu yüzden küçük bir not ama teknik olarak bir dizi olmadığını bilmek önemlidir.

135
00:09:44,470 --> 00:09:48,260
Bu nedenle, javascript aracılığıyla tarzı manipüle etmenin iki farklı yolunu ele aldık.

136
00:09:48,280 --> 00:09:53,980
bir mülkiyet yapıyor, ki bu sadece bir ya da iki şey yapıyorsan dürüstçe iyidir.

137
00:09:53,980 --> 00:09:55,340
Birincisi elle tek

138
00:09:55,690 --> 00:10:01,150
Ancak bunu toplu olarak yapıyorsanız veya birden fazla öğe için yapıyorsanız, bir sınıfı kullanmak ve klasörü açmak

139
00:10:01,180 --> 00:10:04,930
ya da kapatmak için daha geleneksel daha iyi bir stil daha iyidir