1
00:00:00,360 --> 00:00:01,380
Tekrar hoşgeldiniz.

2
00:00:01,380 --> 00:00:04,380
Bu videoda ön uç üzerinde duracağız.

3
00:00:04,620 --> 00:00:08,790
Javascript'de değerlendirilen her bir TMLC'yi daha önce herhangi bir kod yazmayacağımızı,

4
00:00:08,790 --> 00:00:12,530
ancak ilk defa bir kod göreceğimizi yüksek düzeyde öğreneceğiz.

5
00:00:13,140 --> 00:00:17,900
Öyleyse, ön ve arka uç arasında farklı olanın ne olduğunu bilmek istediğiniz iki büyük şey var.

6
00:00:18,040 --> 00:00:23,970
Ve sonra da H arasındaki fark nedir? M. S. SS ve Javascript ve bunların rolleri nelerdir.

7
00:00:25,080 --> 00:00:28,740
Öyleyse Ön Uç ile Başak arasında tartışarak başlayalım.

8
00:00:28,860 --> 00:00:35,610
Öyleyse birisine gidince biliyorsun hadi gidelim Facebook'a git Ben Facebook'ta vurdum com vuruşumu vurdum.

9
00:00:35,610 --> 00:00:43,050
Web'in nasıl çalıştığına ilişkin videoyu hatırlarsanız Facebook dot com isteyen bir HTP isteği oluştururum ve

10
00:00:43,050 --> 00:00:50,850
bu da Facebook sunucusuna gider veya sonunda Facebook beni hangi sayfaya geri göndereceğine karar verir.

11
00:00:51,210 --> 00:00:56,760
Bu yüzden Facebook durumunda hangi resimlerin ne kadar hikayeye sahip olduklarını anlamalıyız. Ne kadar

12
00:00:56,760 --> 00:01:02,400
çok arkadaşım elimde ne kadar mesaj var, ne yazıları benim ayarlarımın en üstünde olanların

13
00:01:02,400 --> 00:01:03,790
hepsi bana ait.

14
00:01:04,110 --> 00:01:10,200
Ve sonra bana geri gönderir h tim elsea javascript'de yazıyor tarayıcım benim için

15
00:01:10,200 --> 00:01:10,870
görüntüler.

16
00:01:11,370 --> 00:01:16,980
burada ön ve arka uç arasındaki farkı açıklıyor, tarayıcıda gördüğüm herşey sadece H'dir.

17
00:01:16,980 --> 00:01:21,650
Dolayısıyla bu diyagram M. S. Evet.

18
00:01:21,720 --> 00:01:24,190
Ve javascript buzdağının sadece ucu.

19
00:01:24,270 --> 00:01:28,910
Ancak tarayıcımın ön uç veya istemci tarafı olduğunu görür.

20
00:01:29,250 --> 00:01:31,960
Arka plan tarafından oluşturulmuştur.

21
00:01:32,370 --> 00:01:34,360
Tüm mantıkların gerçekleştiği diğer her şey.

22
00:01:34,440 --> 00:01:40,680
Giriş yapıp kullanmadığımı saptamak, arkadaşlarımın hangi fotoğrafları olduğumu bulmak için ne kadar çok

23
00:01:40,680 --> 00:01:42,000
sevdiklerimi bulunduğunu yazmıştım.

24
00:01:42,000 --> 00:01:45,970
Bunların hepsi arka uç veya sunucu tarafı mantığından geliyor.

25
00:01:46,200 --> 00:01:48,000
Böylece burada çok daha fazlası olduğunu görebilirsiniz.

26
00:01:48,030 --> 00:01:50,820
Teknoloji, ön uçta pek çok seçenek var, değil.

27
00:01:50,850 --> 00:01:58,010
Her zaman HTML CSS'dir ve arka uçta javascript kullanıyorsunuz, aslında Python ph P Ruby javascript gibi farklı

28
00:01:58,020 --> 00:02:01,180
dillerimiz var, bu da aslında kullanacağımız şey.

29
00:02:01,350 --> 00:02:06,570
Postgrady'lerin, Mongo'nun ve kanepenin D. farklı veritabanları var. B ve Mya'nın.

30
00:02:06,570 --> 00:02:09,320
Q Pekala ve netlik Lightener'ın pek çok seçeneği var.

31
00:02:09,390 --> 00:02:11,010
Bu yüzden biraz korkutucu.

32
00:02:11,040 --> 00:02:15,060
O birime ulaştığımızda arka uç hakkında kesinlikle daha fazla konuşacağız.

33
00:02:15,060 --> 00:02:20,940
Fakat şimdilik şunu hatırlayın: Arka uç, eritilecek H'yi ve geri gönderilen C S'yi

34
00:02:20,940 --> 00:02:21,770
oluşturan şeydir.

35
00:02:21,780 --> 00:02:27,200
San Francisco'daki en sevdiğim restorana tembel ayı denirken bir örnek verelim.

36
00:02:27,390 --> 00:02:28,890
İşte restoran sayfası.

37
00:02:29,100 --> 00:02:31,580
Bu sayfa daima aynıdır.

38
00:02:31,620 --> 00:02:32,810
Yani değiştirilebilir demektir.

39
00:02:32,820 --> 00:02:34,790
Ama değişmesi için.

40
00:02:34,920 --> 00:02:38,600
Geliştirici H'ye girmelidir. T. miktarı ve manuel olarak değiştirin.

41
00:02:38,610 --> 00:02:44,490
Aynı ana sayfayı her aldığımda temel olarak sayfayı yeniliyorum; aynı sıkça sorulan

42
00:02:44,730 --> 00:02:46,540
soruların aynısını bize ulaştıracaktım.

43
00:02:46,580 --> 00:02:48,650
Bu kötü bir şey değil, ancak değiştirilmesi gerekmiyor.

44
00:02:48,660 --> 00:02:50,580
Bu sadece bir sayfa bir sayfa.

45
00:02:50,610 --> 00:02:55,520
Ancak tembel ayı Yelp sayfası dinamik.

46
00:02:55,530 --> 00:03:01,110
Her seferinde yeni bir inceleme yazıldığında her zaman değişecek, burada her defasında gösterilecek

47
00:03:01,170 --> 00:03:05,070
ve bu durumda şunu diyelim diyelim 5 yıldız oylayalım.

48
00:03:05,070 --> 00:03:06,590
Bir eleştiri okudum.

49
00:03:07,170 --> 00:03:11,840
Muhtemelen incelememi reddediyorsun, ama bir eleştiri yazsam burada görünecektir.

50
00:03:11,880 --> 00:03:17,000
Her zaman olduğu şeyler işte dinamik, bu yüzden yararlı bir inceleme olduğunu söyleyebilirim.

51
00:03:17,190 --> 00:03:18,700
Komik bir eleştiri bu.

52
00:03:19,140 --> 00:03:23,510
Ve eklediğim oylar bir veritabanında saklanır.

53
00:03:23,520 --> 00:03:27,060
Bir şeyler olmuş bununla etkileşim kuruyorum ve devam ediyor.

54
00:03:27,060 --> 00:03:32,010
Sayfayı şimdi tazelersem çok farklı değil.

55
00:03:32,100 --> 00:03:36,350
Fakat daha önce bunun eğlenceli olduğunu düşünmeden önce hatırladığı halde.

56
00:03:36,350 --> 00:03:37,740
Komik olduğunu düşündüm.

57
00:03:37,740 --> 00:03:44,250
Yani temelde asıl önemli olan nokta, bu sayfaya gittiğimde bunu isteyeceğim Arel Yelp aynı şeyi her

58
00:03:44,250 --> 00:03:45,650
zaman geri göndermez.

59
00:03:45,840 --> 00:03:49,060
Kullanıcının oturum açması kullanıcının tamamlandığını anlayacaktır.

60
00:03:49,290 --> 00:03:52,600
Eğer öyleyse, profil resmini buraya koymak istiyoruz.

61
00:03:52,710 --> 00:03:53,980
Herhangi bir konuda oy kullandı mı?

62
00:03:54,000 --> 00:03:54,470
Evet.

63
00:03:54,510 --> 00:03:57,990
Tamam, doğru şekilde vurguladığımızdan emin olalım.

64
00:03:58,000 --> 00:03:59,260
Rengi değiştir.

65
00:03:59,310 --> 00:04:01,530
Onun tekrar oy vermesine izin verme vb.

66
00:04:01,530 --> 00:04:05,420
Ve sonra ona başka şeyler söylüyor ve Javascript yapıyor ve geri gönderiyor.

67
00:04:05,430 --> 00:04:10,150
Kesinlikle dinamik olan başka bir sayfa örneği Google Haberler'dir.

68
00:04:10,620 --> 00:04:15,330
Her canım sıkıştığımda neredeyse beş dakikada bir burada bir şeyler değişiyor

69
00:04:15,330 --> 00:04:17,780
burada hava NFL puanı olsun.

70
00:04:17,820 --> 00:04:19,260
Demek istediğim bunlar canlı olarak güncelleniyor.

71
00:04:19,290 --> 00:04:23,190
Belki de yeni haberler var, kıran haberlerin bir şeyleri değişir.

72
00:04:23,190 --> 00:04:25,590
Bu her zaman çok farklıdır.

73
00:04:25,620 --> 00:04:28,840
Ancak bu her zaman aynıdır.

74
00:04:29,130 --> 00:04:31,020
Tekrar, fark iki şeydir.

75
00:04:31,020 --> 00:04:34,530
Biri statik sayfaya karşı dinamik bir sayfadır.

76
00:04:34,530 --> 00:04:36,650
İkisi de web sayfalarıdır.

77
00:04:36,660 --> 00:04:39,920
Her ikisi de TMLC ler ve Javascript geri geliyor.

78
00:04:40,110 --> 00:04:46,770
Bir sunucu tarafı kodu arka uçta bir şey tabanlı kapalı değişecek.

79
00:04:47,340 --> 00:04:49,600
Bu yüzden de bir restoranın benzetmesini seviyorum.

80
00:04:49,740 --> 00:04:52,350
Yani sihirli bir şekilde bir restorana gidersen oturursun.

81
00:04:52,380 --> 00:04:58,230
Diyelim ki o biftek sipariş ederken bir biftek sipariş ediyorsunuz, mutfakta giderek mutfak sizin

82
00:04:58,230 --> 00:05:01,060
için her şeyi hazırlayan bir istekte bulunur.

83
00:05:01,080 --> 00:05:02,350
Arka tarafın sonu bu.

84
00:05:02,460 --> 00:05:05,710
Onların pişirilmesi ne kadar zaman alacak malzemelere karar verir.

85
00:05:05,970 --> 00:05:11,430
Her şey bir tabakta, daha sonra bir garson ya da garson geliyor ve masanıza getiriyor.

86
00:05:11,430 --> 00:05:12,480
Bu yüzden çok benzer.

87
00:05:12,480 --> 00:05:16,880
Şefin isteği olsun ya da sunucu sunucuysa.

88
00:05:17,070 --> 00:05:22,530
her şeyi hazırlar ve sonra nihayet istemci tarafında olan masanıza geri gönderilir.

89
00:05:22,530 --> 00:05:26,040
Buzdağının bu bölümü, onu bir araya getiren

90
00:05:27,290 --> 00:05:29,840
Şimdi onu yaşlanan üç parçayı parçalayalım.

91
00:05:29,940 --> 00:05:31,610
Javascript'de yazıyor.

92
00:05:32,390 --> 00:05:35,310
Bu yüzden, bu bileşenlerin her biri hakkında çok detaylı bilgi alacağız.

93
00:05:35,330 --> 00:05:39,420
Ayrı bölümler ve birimler var, ancak HDMI orada başlayacak.

94
00:05:39,530 --> 00:05:43,760
Temelde köprü metni biçimlendirme dili için duruyor.

95
00:05:43,760 --> 00:05:44,870
Bunu hayal et.

96
00:05:44,880 --> 00:05:47,900
Ve aslında Internet'in ilk günlerinde yaşananlar bunlardı.

97
00:05:47,960 --> 00:05:53,610
Bilgi göndermek ve belgeler göndermek için standartlaştırılmış bir yol yoktu.

98
00:05:53,720 --> 00:05:59,810
İlk başta, İnternet'in üniversiteler ve kolejler arasında iletişim kurmak için gönderildiğini ve ayrıca bir

99
00:05:59,820 --> 00:06:01,510
askeri araç olduğunu biliyorsunuz.

100
00:06:01,520 --> 00:06:06,040
Diyelim ki sadece göndermek istediğimi söyleyelim bunu bir arkadaşıma göndermek istedim.

101
00:06:06,560 --> 00:06:10,160
Tamamının bu cesur olduğunu söylemeliyim.

102
00:06:10,250 --> 00:06:12,170
Bunlar küçük kurşun kalemleri.

103
00:06:12,260 --> 00:06:14,770
Bazı metinlerim var ve bununla ilgili alıntılar var.

104
00:06:14,770 --> 00:06:19,240
Bunu parçalamanın ve başkasına göndermek için bir yol bulmam lazım.

105
00:06:19,580 --> 00:06:28,230
Ve çözüm HMO idi, bu yüzden HMO, aslında delirmez olduğunu söylemeyeceğimizi öğrenebileceğimiz en kolay

106
00:06:28,220 --> 00:06:35,390
şey ancak ne istediğimizi açıkladığımız ve ne yazarsanız onu elde etmeniz

107
00:06:35,390 --> 00:06:36,450
çok basit.

108
00:06:36,440 --> 00:06:39,800
Dolayısıyla HMO'ya genellikle bir web sayfasının isimleri denir.

109
00:06:39,810 --> 00:06:40,830
Yapı bu.

110
00:06:40,820 --> 00:06:48,360
Bazı insanlar iskelet temelde burada koy bir görüntü koymak söylüyorlar bir mermi noktası koymak burada bir başlık buraya biraz

111
00:06:48,360 --> 00:06:50,570
daha küçük bir başlık koymak koymak.

112
00:06:50,570 --> 00:06:58,350
stilini nasıl tarif ettiğimiz HVM Kendi başına CSSA değerlendirmeyi nasıl kullanacağınız gerçekten hiçbir şey yapmaz.

113
00:06:58,340 --> 00:07:04,720
Bir sayfanın yapısını tanımlamanıza izin verir CSSA Öte yandan ihtiyacım olan sayfanın

114
00:07:04,740 --> 00:07:10,540
Her web sayfasında HMO vardır Bazı web sayfalarında C S S yoktur Bazıları javascript içermez.

115
00:07:10,540 --> 00:07:11,620
Zorunlu değil.

116
00:07:11,700 --> 00:07:18,350
H Tim L öylesine c s basamaklı stil sayfaları tam olarak bu adın nereden geldiğini ve

117
00:07:18,360 --> 00:07:18,990
biraz öğrenir.

118
00:07:19,010 --> 00:07:26,030
Temel olarak mevcut HMO stilleri, bu mermi noktalarını yeşil yapmak gibi şeyler söyleyebilirsiniz.

119
00:07:26,150 --> 00:07:32,980
İlk görüntüye sarı bir kenar verin, son görüntüye çizgilerle büyük pembe bir çerçeve verin.

120
00:07:33,000 --> 00:07:39,110
Genellikle bir web sayfasının sıfatı kabul edilir ya da bazı insanlar deriyi H'ye söyler. T. burada javascript.

121
00:07:39,360 --> 00:07:44,000
bir erkek iskeleti ve son parça

122
00:07:44,000 --> 00:07:49,170
Javascript muhtemelen bu üçünden en karmaşık olanıdır.

123
00:07:49,380 --> 00:07:52,940
Bir sayfaya Bahjat ve etkileşim ekleyelim.

124
00:07:53,210 --> 00:07:58,940
Dolayısıyla bizimle ve Javascript'le güzel görünen bir site oluşturabiliriz, ancak basit bir animasyon yapabileceğimiz

125
00:07:58,940 --> 00:08:02,830
bir şey yapmayacak, ancak başka bir yerden veri yükleyebiliyoruz.

126
00:08:02,830 --> 00:08:08,150
İşlevleri interaktif hale getirememekteyiz, mantık ekleyemiyoruz veya javascriptle oyunumuz var, burada

127
00:08:08,150 --> 00:08:13,650
sahip olduğumuz örneğimizi kullanabilir veya kullanıcı yükü tıkladığında biraz matematik değişikliği yaparız.

128
00:08:13,640 --> 00:08:15,900
Twitter'dan gelen yeni veriler mevcut hava durumunu alıyor.

129
00:08:15,890 --> 00:08:17,640
Mevcut NFL skorları.

130
00:08:17,730 --> 00:08:25,730
Eğer h tim L isimler Css sıfatlar ise o zaman javascript fiiller bir sayfada eylemlerdir.

131
00:08:26,330 --> 00:08:33,400
Bu yüzden hepsini bir kodda güzelce tamamladım ve bu nedenle kod kalem harika bir manzara.

132
00:08:33,410 --> 00:08:39,160
Bir sürü şey kullanmayacağız, fakat gerçekten H-2'ye LCS ve Javascript yazmaya başlamadık.

133
00:08:39,620 --> 00:08:45,090
Bunu bir örnek olarak kullanacağım ve bunun nedeni tarayıcıda basit sayfalar yazmanıza izin veriyor,

134
00:08:45,290 --> 00:08:50,330
böylece satır metnini kullanmak zorunda değilsiniz, bunu sadece tarayıcıya yazıyoruz ve sizinle çok

135
00:08:50,340 --> 00:08:51,260
paylaşabiliriz kolayca.

136
00:08:51,260 --> 00:08:54,900
Üç bölüm var h TMLC SS ve Javascript.

137
00:08:54,980 --> 00:08:58,100
Yine burada kodun kendisi önemli değildir.

138
00:08:58,130 --> 00:08:59,650
Kavramlar budur.

139
00:09:00,050 --> 00:09:06,710
Şimdi bir göz atalım ve aslında C-s'ımdan kurtulacağım.

140
00:09:06,870 --> 00:09:11,280
İşlerimden kurtulacağım ve bıraktığım şeyleri göreceksin.

141
00:09:11,270 --> 00:09:14,490
Düz siyah-beyaz yapısal malzeme.

142
00:09:14,510 --> 00:09:21,890
Bunları sözlerim diye içeriğimi belirliyorum ve bu içeriği belirli yapısal öğelerde

143
00:09:21,890 --> 00:09:24,270
yani H1'de sarmallıyorum.

144
00:09:24,530 --> 00:09:26,530
Ve yine bu o zamanlardan biridir.

145
00:09:26,580 --> 00:09:28,730
Belirli sözdizimi hakkında endişelenmeyin.

146
00:09:28,910 --> 00:09:32,920
Önümüzdeki çok sayıda videomuz var ve bu videoların ayrıntıları ve bunların her biri ayrıntılı olarak incelenecek.

147
00:09:33,050 --> 00:09:36,910
Fakat temel olarak burada büyük metni hazırlaman söyleniyor.

148
00:09:36,980 --> 00:09:43,010
Bu, bir liste yapmak ve bana bir mermi noktası ve başka bir madde imi atan diyor Bireysel liste

149
00:09:43,010 --> 00:09:47,510
maddesi yapmak ve daha sonra burada Bana bir düğme diyor bir düğme yapmak söylüyor.

150
00:09:47,540 --> 00:09:50,950
Gördüğünüz gibi sadece kendi yapı budur.

151
00:09:50,960 --> 00:09:54,110
Şimdi gidelim veya bizi tekrar görelim.

152
00:09:54,120 --> 00:09:55,970
Burada söylüyorum, yaptığım şeyi görebiliyorsun.

153
00:09:56,120 --> 00:10:03,750
Burada olan H-1'i mor yaparak, yeşil yapacak şekilde değiştirebilir ve yeşil renge dönüştürebilir

154
00:10:04,490 --> 00:10:12,830
ve düğmenin arka plan rengine ve metin rengine sahip bir kenarlığa sahip olmasını sağladığımı söyleyebilirim

155
00:10:13,700 --> 00:10:17,730
bu yüzden değiştirebiliriz yeşil metin renginin olması.

156
00:10:17,780 --> 00:10:20,020
Yeşili neyin değiştiğini görmek zor.

157
00:10:20,120 --> 00:10:26,970
Ona göre 20 piksel daha büyük bir sınır verebilirim ki

158
00:10:26,960 --> 00:10:31,610
sıfatlar var ve son parça bizim Javascript'im.

159
00:10:31,970 --> 00:10:35,420
Yani javascript olmadan bu düğme hiçbir şey yapmaz.

160
00:10:35,450 --> 00:10:41,180
Şimdi yaptığımız şey, kullanıcı düğmeyi tıkladığında yazan javascript yazısıdır.

161
00:10:41,340 --> 00:10:50,030
Rasgele bir renk seçin ve arka plan rengini o rastgele renge ayarlayın; böylece tıklayabilir ve rasgele bir

162
00:10:50,030 --> 00:10:51,640
renk elde edebilirim.

163
00:10:52,460 --> 00:10:57,800
Bu javascriptden kurtulup, bunu yapmaya çalıştım da hiçbir şey olmaz çünkü hiçbir fiil

164
00:10:57,810 --> 00:10:58,440
yok.

165
00:10:58,430 --> 00:11:00,410
Sadece isim ve katkı maddeleri.

166
00:11:00,450 --> 00:11:05,840
Sadece yapısal iskelet üstünde cildimin biraz üstünde benim javascriptim ekleyerek mantığı

167
00:11:05,850 --> 00:11:06,520
ekleyebilirim.

168
00:11:06,840 --> 00:11:08,300
Yani javascript gerçekten önemli.

169
00:11:08,370 --> 00:11:14,100
Tam olarak büyük olasılıkla gerçek bir üretim sitede yapacağınız şey bu değil, belki mayın

170
00:11:14,100 --> 00:11:16,110
süpürme yapabilecek bir oyununuz olurdu.

171
00:11:16,130 --> 00:11:19,800
Bu Facebook sohbet olabilir, bir sayfaya kaydolmak için bir form olabilir.

172
00:11:19,860 --> 00:11:22,080
Etkileşimli hale getirmek için javascript kullanıyorsunuz.

173
00:11:22,280 --> 00:11:25,510
Yine kod kalemiyle oynamak için teşvik ediyorum.

174
00:11:25,640 --> 00:11:28,340
Buna bağlanmanız ve biraz keşfetmeniz gerekir.

175
00:11:28,350 --> 00:11:30,280
Bir sonraki videoyu taşımak için acelemiz yok.

176
00:11:30,290 --> 00:11:32,960
İsterseniz bu renklerin bazılarını değiştirmeyi deneyin.

177
00:11:32,960 --> 00:11:34,590
Bunlardan bazılarını değiştirmeyi deneyin.

178
00:11:34,640 --> 00:11:36,190
Koda odaklanmayın.

179
00:11:36,290 --> 00:11:40,020
Bununla oynamak sadece eğlencelidir, ancak bunlardan hiçbirini anlaman için herhangi bir baskı yoktur.

180
00:11:40,040 --> 00:11:46,060
HDMI'nın C S'nin yaptığını ve javascript'in ne yaptığını çok yüksek düzeyde bir genel bakışın bir yana bırakın.

181
00:11:46,340 --> 00:11:46,630
Sağ