Tekrar hoşgeldiniz.
Bu videoda ön uç üzerinde duracağız.
Javascript'de değerlendirilen her bir TMLC'yi daha önce herhangi bir kod yazmayacağımızı,
ancak ilk defa bir kod göreceğimizi yüksek düzeyde öğreneceğiz.
Öyleyse, ön ve arka uç arasında farklı olanın ne olduğunu bilmek istediğiniz iki büyük şey var.
Ve sonra da H arasındaki fark nedir? M. S. SS ve Javascript ve bunların rolleri nelerdir.
Öyleyse Ön Uç ile Başak arasında tartışarak başlayalım.
Öyleyse birisine gidince biliyorsun hadi gidelim Facebook'a git Ben Facebook'ta vurdum com vuruşumu vurdum.
Web'in nasıl çalıştığına ilişkin videoyu hatırlarsanız Facebook dot com isteyen bir HTP isteği oluştururum ve
bu da Facebook sunucusuna gider veya sonunda Facebook beni hangi sayfaya geri göndereceğine karar verir.
Bu yüzden Facebook durumunda hangi resimlerin ne kadar hikayeye sahip olduklarını anlamalıyız. Ne kadar
çok arkadaşım elimde ne kadar mesaj var, ne yazıları benim ayarlarımın en üstünde olanların
hepsi bana ait.
Ve sonra bana geri gönderir h tim elsea javascript'de yazıyor tarayıcım benim için
görüntüler.
burada ön ve arka uç arasındaki farkı açıklıyor, tarayıcıda gördüğüm herşey sadece H'dir.
Dolayısıyla bu diyagram M. S. Evet.
Ve javascript buzdağının sadece ucu.
Ancak tarayıcımın ön uç veya istemci tarafı olduğunu görür.
Arka plan tarafından oluşturulmuştur.
Tüm mantıkların gerçekleştiği diğer her şey.
Giriş yapıp kullanmadığımı saptamak, arkadaşlarımın hangi fotoğrafları olduğumu bulmak için ne kadar çok
sevdiklerimi bulunduğunu yazmıştım.
Bunların hepsi arka uç veya sunucu tarafı mantığından geliyor.
Böylece burada çok daha fazlası olduğunu görebilirsiniz.
Teknoloji, ön uçta pek çok seçenek var, değil.
Her zaman HTML CSS'dir ve arka uçta javascript kullanıyorsunuz, aslında Python ph P Ruby javascript gibi farklı
dillerimiz var, bu da aslında kullanacağımız şey.
Postgrady'lerin, Mongo'nun ve kanepenin D. farklı veritabanları var. B ve Mya'nın.
Q Pekala ve netlik Lightener'ın pek çok seçeneği var.
Bu yüzden biraz korkutucu.
O birime ulaştığımızda arka uç hakkında kesinlikle daha fazla konuşacağız.
Fakat şimdilik şunu hatırlayın: Arka uç, eritilecek H'yi ve geri gönderilen C S'yi
oluşturan şeydir.
San Francisco'daki en sevdiğim restorana tembel ayı denirken bir örnek verelim.
İşte restoran sayfası.
Bu sayfa daima aynıdır.
Yani değiştirilebilir demektir.
Ama değişmesi için.
Geliştirici H'ye girmelidir. T. miktarı ve manuel olarak değiştirin.
Aynı ana sayfayı her aldığımda temel olarak sayfayı yeniliyorum; aynı sıkça sorulan
soruların aynısını bize ulaştıracaktım.
Bu kötü bir şey değil, ancak değiştirilmesi gerekmiyor.
Bu sadece bir sayfa bir sayfa.
Ancak tembel ayı Yelp sayfası dinamik.
Her seferinde yeni bir inceleme yazıldığında her zaman değişecek, burada her defasında gösterilecek
ve bu durumda şunu diyelim diyelim 5 yıldız oylayalım.
Bir eleştiri okudum.
Muhtemelen incelememi reddediyorsun, ama bir eleştiri yazsam burada görünecektir.
Her zaman olduğu şeyler işte dinamik, bu yüzden yararlı bir inceleme olduğunu söyleyebilirim.
Komik bir eleştiri bu.
Ve eklediğim oylar bir veritabanında saklanır.
Bir şeyler olmuş bununla etkileşim kuruyorum ve devam ediyor.
Sayfayı şimdi tazelersem çok farklı değil.
Fakat daha önce bunun eğlenceli olduğunu düşünmeden önce hatırladığı halde.
Komik olduğunu düşündüm.
Yani temelde asıl önemli olan nokta, bu sayfaya gittiğimde bunu isteyeceğim Arel Yelp aynı şeyi her
zaman geri göndermez.
Kullanıcının oturum açması kullanıcının tamamlandığını anlayacaktır.
Eğer öyleyse, profil resmini buraya koymak istiyoruz.
Herhangi bir konuda oy kullandı mı?
Evet.
Tamam, doğru şekilde vurguladığımızdan emin olalım.
Rengi değiştir.
Onun tekrar oy vermesine izin verme vb.
Ve sonra ona başka şeyler söylüyor ve Javascript yapıyor ve geri gönderiyor.
Kesinlikle dinamik olan başka bir sayfa örneği Google Haberler'dir.
Her canım sıkıştığımda neredeyse beş dakikada bir burada bir şeyler değişiyor
burada hava NFL puanı olsun.
Demek istediğim bunlar canlı olarak güncelleniyor.
Belki de yeni haberler var, kıran haberlerin bir şeyleri değişir.
Bu her zaman çok farklıdır.
Ancak bu her zaman aynıdır.
Tekrar, fark iki şeydir.
Biri statik sayfaya karşı dinamik bir sayfadır.
İkisi de web sayfalarıdır.
Her ikisi de TMLC ler ve Javascript geri geliyor.
Bir sunucu tarafı kodu arka uçta bir şey tabanlı kapalı değişecek.
Bu yüzden de bir restoranın benzetmesini seviyorum.
Yani sihirli bir şekilde bir restorana gidersen oturursun.
Diyelim ki o biftek sipariş ederken bir biftek sipariş ediyorsunuz, mutfakta giderek mutfak sizin
için her şeyi hazırlayan bir istekte bulunur.
Arka tarafın sonu bu.
Onların pişirilmesi ne kadar zaman alacak malzemelere karar verir.
Her şey bir tabakta, daha sonra bir garson ya da garson geliyor ve masanıza getiriyor.
Bu yüzden çok benzer.
Şefin isteği olsun ya da sunucu sunucuysa.
her şeyi hazırlar ve sonra nihayet istemci tarafında olan masanıza geri gönderilir.
Buzdağının bu bölümü, onu bir araya getiren
Şimdi onu yaşlanan üç parçayı parçalayalım.
Javascript'de yazıyor.
Bu yüzden, bu bileşenlerin her biri hakkında çok detaylı bilgi alacağız.
Ayrı bölümler ve birimler var, ancak HDMI orada başlayacak.
Temelde köprü metni biçimlendirme dili için duruyor.
Bunu hayal et.
Ve aslında Internet'in ilk günlerinde yaşananlar bunlardı.
Bilgi göndermek ve belgeler göndermek için standartlaştırılmış bir yol yoktu.
İlk başta, İnternet'in üniversiteler ve kolejler arasında iletişim kurmak için gönderildiğini ve ayrıca bir
askeri araç olduğunu biliyorsunuz.
Diyelim ki sadece göndermek istediğimi söyleyelim bunu bir arkadaşıma göndermek istedim.
Tamamının bu cesur olduğunu söylemeliyim.
Bunlar küçük kurşun kalemleri.
Bazı metinlerim var ve bununla ilgili alıntılar var.
Bunu parçalamanın ve başkasına göndermek için bir yol bulmam lazım.
Ve çözüm HMO idi, bu yüzden HMO, aslında delirmez olduğunu söylemeyeceğimizi öğrenebileceğimiz en kolay
şey ancak ne istediğimizi açıkladığımız ve ne yazarsanız onu elde etmeniz
çok basit.
Dolayısıyla HMO'ya genellikle bir web sayfasının isimleri denir.
Yapı bu.
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
daha küçük bir başlık koymak koymak.
stilini nasıl tarif ettiğimiz HVM Kendi başına CSSA değerlendirmeyi nasıl kullanacağınız gerçekten hiçbir şey yapmaz.
Bir sayfanın yapısını tanımlamanıza izin verir CSSA Öte yandan ihtiyacım olan sayfanın
Her web sayfasında HMO vardır Bazı web sayfalarında C S S yoktur Bazıları javascript içermez.
Zorunlu değil.
H Tim L öylesine c s basamaklı stil sayfaları tam olarak bu adın nereden geldiğini ve
biraz öğrenir.
Temel olarak mevcut HMO stilleri, bu mermi noktalarını yeşil yapmak gibi şeyler söyleyebilirsiniz.
İlk görüntüye sarı bir kenar verin, son görüntüye çizgilerle büyük pembe bir çerçeve verin.
Genellikle bir web sayfasının sıfatı kabul edilir ya da bazı insanlar deriyi H'ye söyler. T. burada javascript.
bir erkek iskeleti ve son parça
Javascript muhtemelen bu üçünden en karmaşık olanıdır.
Bir sayfaya Bahjat ve etkileşim ekleyelim.
Dolayısıyla bizimle ve Javascript'le güzel görünen bir site oluşturabiliriz, ancak basit bir animasyon yapabileceğimiz
bir şey yapmayacak, ancak başka bir yerden veri yükleyebiliyoruz.
İşlevleri interaktif hale getirememekteyiz, mantık ekleyemiyoruz veya javascriptle oyunumuz var, burada
sahip olduğumuz örneğimizi kullanabilir veya kullanıcı yükü tıkladığında biraz matematik değişikliği yaparız.
Twitter'dan gelen yeni veriler mevcut hava durumunu alıyor.
Mevcut NFL skorları.
Eğer h tim L isimler Css sıfatlar ise o zaman javascript fiiller bir sayfada eylemlerdir.
Bu yüzden hepsini bir kodda güzelce tamamladım ve bu nedenle kod kalem harika bir manzara.
Bir sürü şey kullanmayacağız, fakat gerçekten H-2'ye LCS ve Javascript yazmaya başlamadık.
Bunu bir örnek olarak kullanacağım ve bunun nedeni tarayıcıda basit sayfalar yazmanıza izin veriyor,
böylece satır metnini kullanmak zorunda değilsiniz, bunu sadece tarayıcıya yazıyoruz ve sizinle çok
paylaşabiliriz kolayca.
Üç bölüm var h TMLC SS ve Javascript.
Yine burada kodun kendisi önemli değildir.
Kavramlar budur.
Şimdi bir göz atalım ve aslında C-s'ımdan kurtulacağım.
İşlerimden kurtulacağım ve bıraktığım şeyleri göreceksin.
Düz siyah-beyaz yapısal malzeme.
Bunları sözlerim diye içeriğimi belirliyorum ve bu içeriği belirli yapısal öğelerde
yani H1'de sarmallıyorum.
Ve yine bu o zamanlardan biridir.
Belirli sözdizimi hakkında endişelenmeyin.
Ö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.
Fakat temel olarak burada büyük metni hazırlaman söyleniyor.
Bu, bir liste yapmak ve bana bir mermi noktası ve başka bir madde imi atan diyor Bireysel liste
maddesi yapmak ve daha sonra burada Bana bir düğme diyor bir düğme yapmak söylüyor.
Gördüğünüz gibi sadece kendi yapı budur.
Şimdi gidelim veya bizi tekrar görelim.
Burada söylüyorum, yaptığım şeyi görebiliyorsun.
Burada olan H-1'i mor yaparak, yeşil yapacak şekilde değiştirebilir ve yeşil renge dönüştürebilir
ve düğmenin arka plan rengine ve metin rengine sahip bir kenarlığa sahip olmasını sağladığımı söyleyebilirim
bu yüzden değiştirebiliriz yeşil metin renginin olması.
Yeşili neyin değiştiğini görmek zor.
Ona göre 20 piksel daha büyük bir sınır verebilirim ki
sıfatlar var ve son parça bizim Javascript'im.
Yani javascript olmadan bu düğme hiçbir şey yapmaz.
Şimdi yaptığımız şey, kullanıcı düğmeyi tıkladığında yazan javascript yazısıdır.
Rasgele bir renk seçin ve arka plan rengini o rastgele renge ayarlayın; böylece tıklayabilir ve rasgele bir
renk elde edebilirim.
Bu javascriptden kurtulup, bunu yapmaya çalıştım da hiçbir şey olmaz çünkü hiçbir fiil
yok.
Sadece isim ve katkı maddeleri.
Sadece yapısal iskelet üstünde cildimin biraz üstünde benim javascriptim ekleyerek mantığı
ekleyebilirim.
Yani javascript gerçekten önemli.
Tam olarak büyük olasılıkla gerçek bir üretim sitede yapacağınız şey bu değil, belki mayın
süpürme yapabilecek bir oyununuz olurdu.
Bu Facebook sohbet olabilir, bir sayfaya kaydolmak için bir form olabilir.
Etkileşimli hale getirmek için javascript kullanıyorsunuz.
Yine kod kalemiyle oynamak için teşvik ediyorum.
Buna bağlanmanız ve biraz keşfetmeniz gerekir.
Bir sonraki videoyu taşımak için acelemiz yok.
İsterseniz bu renklerin bazılarını değiştirmeyi deneyin.
Bunlardan bazılarını değiştirmeyi deneyin.
Koda odaklanmayın.
Bununla oynamak sadece eğlencelidir, ancak bunlardan hiçbirini anlaman için herhangi bir baskı yoktur.
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.
Sağ