YÜKLENİYOR...

HTML Dersleri

  • Anasayfa
  • script Etiketi HTML'de Başlangıç Seviyesindekilerin Kullanımını Karıştırdığı Etiket
script Etiketi HTML'de Başlangıç Seviyesindekilerin Kullanımını Karıştırdığı Etiket - html, html dersleri, script, script etiketi, script src, src, src özelliği, head script, body script, #03
Ahmet Aydın - 07/01/2021 - 28 Görüntülenme

script Etiketi HTML'de Başlangıç Seviyesindekilerin Kullanımını Karıştırdığı Etiket

Merhaba, bu makalede Sıfırdan HTML Derslerine devam ediyoruz ve HTML veya Javascript’e yeni başlayan öğrencilerin sıklıkla kullanımını karıştırdığını gördüğüm script etiketi yapısını inceleyeceğiz. Bu bilgileri ders videosunu izleyerek ve ders dosyalarını indirip inceleyerek pekiştirebileceğinizi unutmayınız.

script Etiketi

HTML dosyasında Javascript kodlarını çalıştırmak için kullandığımız etikettir. Bu işlemi ister HTML dosyası içerisinde Javascript kodlarını script etiketinin açma ve kapatma etiketleri arasında yazarak istersek de dışarıdaki bir Javascript dosyası ile bağlantı kurarak gerçekleştirebiliriz.

script etiketi head etiketlerinin veya body etiketlerinin açma ve kapatma etiketleri arasında kullanılabilir. Bunun gereksinimini aşağıda açıklayacağım.

İlk olarak script etiketini head etiketinin açma ve kapatma etiketleri arasında kullanalım. script etiketinin açma ve kapatma etiketlerini oluşturalım. Bu etiketlerin arasına gelerek basit bir Javascript kodu yazabiliriz.

Örnek: document.write(“Merhaba”);

Yukarıdaki basit bir Javascript kodunu script etiketinin açma ve kapatma etiketleri arasına yazıyoruz. Bu değişikliği kaydedip HTML dosyamızı tarayıcıda açtığımızda, herhangi bir hata yapmadıysak Merhaba ifadesinin yazdırıldığını gözlemleyebiliriz.

Şimdi script etiketinin body etiketinin açma ve kapatma etiketleri arasında kullanmamızı gerektirecek bir ihtiyaç doğuralım. Bunun için body etiketlerinin açma ve kapatma etiketleri arasına gidelim ve p etiketinin açma ve kapatma etiketlerini oluşturalım. p etiketini henüz incelemedik ama burada kısa bir bilgi vereyim. p etiketi, paragraflarımızı temsil eden etikettir. İleride bu etikete yine değineceğim. p etiketimizi oluşturup açma ve kapatma etiketlerinin arasına herhangi bir şey yazmıyoruz. p etiketinin açılış etiketinde p ifadesinden sonra bir boşluk bırakıyoruz ve id = “” ifadesini oluşturuyoruz.

id Niteliği

Identity kelimesinden gelmekte olup kimlik anlamını taşır. Bir HTML dosyasında bir id değeri sadece bir kere kullanılabilir/kullanılmalıdır. Yukarıda p etiketi için bir id tanımlaması yapmak istediğimizi belirten ifadeyi oluşturduk. Bu ifadedeki tırnak işaretleri arasına id değerini yazabiliriz. Bu id değeri buradaki p etiketimize ait olup başka bir HTML elementine bu id’yi veremeyiz, vermemeliyiz!

Örnek: id = “paragraf”

Yukarıda p etiketimiz için id niteliğine paragraf değerini atadım. Bu işlemi Javascript kodları ile buradaki p etiketine erişebilmek ve üzerinde işlem yapabilmek için gerçekleştirdim.

Şimdi head etiketinin açma ve kapatma etiketleri arasına gidelim ve daha önce yazdığımız Javascript kodunun altına bir Javascript kodu daha ekleyelim.

Örnek: document.getElementById(“paragraf”).innerHTML = “Ahmet Aydın”;

Yukarıdaki Javascript kodunda document ifadesi ile HTML dosyamızdaki, getElementById(“paragraf”) ifadesi ile id’si paragraf olan elemente erişmek istediğimi belirtmiş oluyoruz. innerHTML ifadesi ile de eriştiğimiz bu elemente, = “” ifadesi ile tırnak işaretleri arasında belirteceğimiz değerin yazdırılmasını sağlıyoruz. Özetle yukarıdaki örneğimizde p etiketinin açma ve kapatma etiketleri arasına Ahmet Aydın ifadesinin yazdırılmasını istemiş olduk.

Dosyamızı kaydedip tarayıcıda açtığımızda web sayfamızda herhangi bir değişiklik göremeyeceğiz. Hatamızı görebilmek için tarayıcımızda sağ tıklayıp incele diyelim ve tarayıcımızın geliştirici araçları penceresinin açılmasını sağlayalım. Burada Console sekmesinde olduğumuza dikkat edelim ve aldığımız hatayı gözlemleyelim.

Cannot set property ‘innerHTML’ of null at html03.html:7

Alınan bu hatayı “boş değerin innerHTML özelliği ayarlanamaz” diye tercüme edebiliriz. at ifadesinden sonra ise hatanın, benim dosya adıma ve kod satırlarıma göre html03.html dosyasının 7. satırında alındığı ifade ediliyor. Bu konum sizin dosya adınıza ve kod satır numaranıza göre değişiklik gösterebilir. Peki bu hatayı neden aldık?

Şimdi web sayfamızın işleyişini düşünelim. Kodlarımız yukarıdan aşağıya doğru bir akışla işlenir ve çalıştırılır. script etiketinin açma ve kapatma etiketlerinin arasına gelindiğinde ilk Javascript kodumuz başarılı bir şekilde çalışır. Ancak ikinci Javascript kodumuz, kendisinden aşağıda kalan yani henüz oluşturulmamış bir elemente erişmek istediğinden dolayı bu hatayı alıyoruz. İşte bu gibi durumlarda script etiketini body etiketinin açma ve kapatma etiketleri arasında hatta body etiketinin kapatma etiketinin hemen üzerinde yazarız. Şimdi bu değişikliği gerçekleştirelim.

Body kapatma etiketinin hemen üzerinde script etiketinin açma ve kapatma etiketlerini oluşturalım. İlgili Javascript kodumuzu keselim ve bu etiketler arasına yapıştıralım. Dosyamızı kaydedelim ve tarayıcımızda değişiklikleri gözlemleyelim. Herhangi bir hata yapmadıysak web sayfamızda, innerHTML karşısındaki tırnak işaretleri arasında yazmış olduğumuz ifadeyi görebiliriz. Yine Console sekmesine gidip orada da hata almadığımızı gözlemleyebiliriz.

Bu örneğimizdeki gibi HTML elementleriyle ilişkili Javascript kodlarını yazarken bu hiyerarşiye dikkat etmemiz gerekiyor. Kullanım ihtiyacına göre script etiketini head ya da body etiketlerinin açma ve kapatma etiketleri arasında yazmamız gerektiğine karar vermeliyiz.

Burada mantığı kaptıysak script etiketini bu sefer dışarıdaki bir Javascript dosyası ile bağlantı kurmak için kullanalım. Bu kullanım ile Javascript kodlarımızı bağlantı kuracağımız Javascript dosyası içerisinde yazabiliriz.

Yine script etiketinin açma ve kapatma etiketlerini oluşturalım. script etiketinin açma etiketi içerisinde script ifadesinden sonra bir boşluk bırakalım ve src = “” ifadesini oluşturalım.

src Niteliği

Dışarıdan bağlantı kurmak istediğimiz dosyanın konumunu belirttiğimiz niteliktir. src niteliğinin karşısında bulunan tırnak işaretleri arasına bağlantı kurulacak dosyanın konumunu yazabiliriz.

Örnek: src = “js/html03.js”

Yukarıdaki örnekte HTML dosyam ile aynı dizinde bulunan js klasörünün içerisindeki html03.js dosyası ile bağlantı kurmak istediğimi belirtmiş oldum. Şimdi HTML sayfamızdaki Javascript kodlarını keserek, önceden oluşturduğum script etiketlerini silerek (sadece son yapı kalsın) HTML dosyamızı düzenliyoruz. Kestiğimiz Javascript kodlarını bağlantı kurduğumuz dışarıdaki Javascript dosyasına yapıştırıyoruz.

Yukarıda bahsettiğim hiyerarşiye göre son oluşturduğumuz script etiketi yapısını, head etiketinin açma ve kapatma etiketleri arasında veya body etiketinin açma ve kapatma etiketleri arasında oluşturup oluşturmayacağımıza karar vermeliyiz.

Bu makalede Sıfırdan HTML Derslerine devam ettik ve HTML veya Javascript’e yeni başlayan öğrencilerin sıklıkla kullanımını karıştırdığını gördüğüm script etiketi yapısını inceledik.

Bu bilgileri ders videosunu izleyerek ve ders dosyalarını indirip inceleyerek pekiştirebileceğinizi hatırlatmak istiyorum. Ahmet Aydın Youtube Kanalı’na abone olabilir ve burada olmayan paylaşımlardan da faydalanabilirsiniz. Umarım yararlı bir yazı olmuştur. Bir sonraki makalede görüşebilmek dileğiyle kodla kalın, hoşça kalın...