Html Css Javascript Kodları
İstemci tarafı JavaScript, JavaScript'in tarayıcınızda çalışma şeklini ifade eder. Bu durumda JavaScript motoru tarayıcı kodunun içindedir. Tüm büyük web tarayıcıları kendi yerleşik JavaScript motorlarıyla birlikte gelir.
Web uygulaması geliştiricileri, fare tıklaması veya fareyle üzerine gelme gibi çeşitli olaylarla ilişkili farklı işlevlerle JavaScript kodu yazar. Bu işlevler HTML ve CSS'de değişiklikler yapar.
İstemci tarafı JavaScript'in nasıl çalıştığına dair bir genel bakış:
1. Tarayıcı, ziyaret ettiğinizde bir web sayfası yükler.
2. Yükleme sırasında tarayıcı, sayfayı ve düğmeler, etiketler ve açılır kutular gibi tüm öğelerini Belge Nesne Modeli (DOM) adı verilen bir veri yapısına dönüştürür.
3. Tarayıcının JavaScript motoru, JavaScript kodunu bayt koduna dönüştürür. Bu kod, JavaScript söz dizimi ile makine arasında bir aracıdır.
4. Bir düğmeye fare tıklaması gibi farklı olaylar, ilişkili JavaScript kod blogunun yürütülmesini tetikler. Motor daha sonra bayt kodunu yorumlar ve DOM'da değişiklikler yapar.
5. Tarayıcı yeni DOM'u görüntüler.
Sunucu tarafı Javascript
Sunucu tarafı JavaScript, arka uç sunucu mantığında kodlama dilinin kullanımını ifade eder. Bu durumda JavaScript motoru doğrudan sunucuya oturur. Sunucu tarafı JavaScript işlevi veri tabanına erişebilir, farklı mantıksal işlemler gerçekleştirebilir ve sunucunun işletim sistemi tarafından tetiklenen çeşitli olaylara yanıt verebilir. Sunucu tarafı komut dosyası oluşturmanın birincil avantajı, web sitesi yanıtını gereksinimlerinize, erişim haklarınıza ve web sitesinden gelen bilgi isteklerine göre büyük ölçüde özelleştirebilmenizdir.
İstemci tarafına karşı sunucu tarafı
Dinamik kelimesi hem istemci tarafı hem de sunucu tarafı JavaScript'i tanımlar. Dinamik davranış, gerektiğinde yeni içerik oluşturmak için web sayfası görüntüsünü güncelleme yeteneğidir. İstemci tarafı ve sunucu tarafı JavaScript arasındaki fark, yeni içerik oluşturma biçiminde yatmaktadır. Sunucu tarafı kodu uygulama mantığını kullanarak ve veri tabanındaki verileri değiştirerek dinamik olarak yeni içerik oluşturur. İstemci tarafı JavaScript ise, kullanıcı arayüzü mantığını kullanarak ve zaten istemcide bulunan web sayfası içeriğini değiştirerek tarayıcı içinde dinamik olarak yeni içerik oluşturur. İki bağlamda anlam biraz farklıdır ancak ilişkilidir ve her iki yaklaşım da kullanıcı deneyimini geliştirmek için birlikte çalışır.
Dinamik özelliklerdeki uygulama dışında, iki JavaScript kullanımı arasındaki diğer bir fark, kodun erişebileceği kaynaklardır. İstemci tarafında tarayıcı JavaScript'in çalışma zamanı ortamını kontrol eder. Kod, yalnızca tarayıcının erişmesine izin verdiği kaynaklara erişebilir. Örneğin, siz bir indirme düğmesine tıklamadığınız sürece sabit diskinize içerik yazamaz. Öte yandan, sunucu tarafı işlevleri, gerektiğinde sunucu makinesinin tüm kaynaklarına erişebilir.
HTML Dersleri 14 – Javascript Kullanımı
Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde Iframe Kullanımı adlı yazımızda HTML’de Iframe kullanımını öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 13 – Iframe Kullanımı linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML'de Javascript konusuna gözatıp, HTML sayfalarımıza Javascript kodlarını nasıl dahil edeceğimizi öğreneceğiz.
İlk önce bilmeyenler için Javascript Nedir ? konusuna kısaca değinelim. Javascript Web Platformlarda kullanılan bir programlama dilidir. JavaScript HTML sayfalarını daha dinamik ve etkileşimli hale getirir.
HTML'de Javascript kodlarını dahil etmenin bir çok yolu vardır. Script etiketi ile ( < script > ) javascript kodlarını dahil edebiliriz. Script etiketi, istemci tarafı bir komut dosyası (JavaScript) tanımlamak için kullanılır. Genellikle html kodunun en sonuna , < script > etiketleri arasına yazılır javascript kodları.
HTML Script Kullanımı
Örnek Script Etiketi Kullanımı ;
<script> document.getElementById("deneme").innerHTML = "Kodlama Vakti!"; </script>Diğer bir seçenek ise html etiketlerinin içerisine parametre olarak yazılabilir. Örneğin a etiketine sahip olan bir linkin , onClick parametresine javascript kodu yazılabilir. OnClick tıklandığı sırada anlamı gelmektedir.
HTML Etiketi İçinde Javascript Kullanımı
Örnek Kullanım;
<button type="button" onclick="document.getElementById('test').innerHTML = Date()"> Tarihi Ekrana Yaz </button> <p id="test"></p>Bu örnekte button elementinin onClick parametresine javascript kodu yazılmıştır.
HTML Noscript Kullanımı
Noscript etiketi ( < noscript >), tarayıcılarda komut dosyalarını devre dışı bırakmış veya istemci tarafı komut dosyalarını desteklemeyen bir tarayıcıya sahip kullanıcılar için alternatif bir içerik sağlamak için kullanılır:
<script> document.getElementById("test").innerHTML = "Kodlama Vakti!"; </script> <noscript>Üzgününüz , bu tarayıcı Javascript kodlarını desteklememektedir.</noscript>Tebrikler! Bu derste HTML’de Javascript Kullanımını, Javascript kavramını , HTML'de Javascript kodlarını dahil etmeyi öğrendik.Kodlama Vakti ile kodlama hiç bu kadar kolay olmamıştı.
HTML Derslerinin ondördüncü kısmı olan dersimizde , HTML’de Javascript Kullanımı konusunu öğrendik. Ders sonunda ki testimize katılarak öğrendiklerinizi pekiştirebilirsiniz. Derslerimiz hoşunuza gittiyse eğer paylaş butonlarından sevdiklerinizle paylaşabilirsiniz !