.js # html # html5 # javascript

JavaScript, Html Belgesinde Nasıl Kullanılır?

İbrahim Bozkurt
JAVASCRİPT ve JQUERY
JavaScript Html Belgesinde Nasıl Kullanılır

Bir javascript kodu html belgesine birden farklı şekilde eklenebilir. Bunlar iç bağlantı, dış bağlantı ve gömülü kod olarak üçe ayrılır.

<script> Etiketi

HTML’de JavaScript kodu <script> ve </script> etiketleri arasına eklenir .

See the Pen JavaScript, Html Belgesinde Nasıl Kullanılır? 1 by ArmyYazılım (@armyyazilim) on CodePen.

Eski JavaScript örnekleri bir tür özelliği kullanabilir: <script type=”text/javascript”>. Type özniteliği artık gerekli değildir. JavaScript, HTML’deki varsayılan betik dilidir.

JavaScript İşlevleri ve Etkinlikleri

JavaScript function, çağırılan ve çalıştırılabilen bir JavaScript kodu bloğudur.

Örneğin, kullanıcının bir düğmeyi tıklatması gibi bir olay meydana geldiğinde bir işlev çağrılabilir .

<head> veya <body> içindeki JavaScript

Bir HTML belgesine istediğiniz sayıda komut dosyası yerleştirebilirsiniz.

Komut dosyaları bir HTML sayfasının , <body> ve <head> bölümüne veya her ikisine birden yerleştirilebilir. 

<head> içindeki JavaScript

Bu örnekte, bir HTML sayfasının <head> bölümüne bir JavaScript function yerleştirilmiştir .

İşlev, bir düğme tıklandığında çağrılır:

See the Pen JavaScript, Html Belgesinde Nasıl Kullanılır? 2 by ArmyYazılım (@armyyazilim) on CodePen.

<body> içindeki JavaScript

Bu örnekte, bir HTML sayfasının <body> bölümüne bir JavaScript function yerleştirilmiştir .

İşlev, bir düğme tıklandığında çağrılır:

See the Pen Untitled by ArmyYazılım (@armyyazilim) on CodePen.

Komut dosyalarını <body> öğesinin altına yerleştirmek görüntüleme hızını artırır çünkü komut dosyası yorumlaması ekranı yavaşlatır.

Harici JavaScript

Komut dosyaları harici dosyalara da yerleştirilebilir:

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

Harici komut dosyaları, birçok farklı web sayfasında aynı kod kullanıldığında pratiktir.

JavaScript dosyalarının dosya uzantısı .js’dir .

Harici bir komut dosyası kullanmak için, komut dosyasının adını bir <script> etiketin src(kaynak) özniteliğine girin:

<script src="myScript.js"></script>

See the Pen Untitled by ArmyYazılım (@armyyazilim) on CodePen.

Gördüğünüz gibi paragraf değiştirmek için kullandığımız js kodunu bu kod;

<script src="https://armyyazilim.com/myScript.js"></script>

sayesinde armyyazılım sitesinden aldık. Aynı şekilde çalıştı.

<head> içine veya <body> içine istediğiniz gibi harici bir komut dosyası referansı yerleştirebilirsiniz .

<script>Komut dosyası, tam olarak etiketin bulunduğu yerde bulunuyormuş gibi davranacaktır .

<script> Harici komut dosyaları etiket içeremez .

Harici JavaScript Avantajları

Komut dosyalarını harici dosyalara yerleştirmenin bazı avantajları vardır:

  • HTML ve JS kodu ayırır
  • HTML ve JavaScript’in okunmasını ve bakımını kolaylaştırır
  • Önbelleğe alınmış JavaScript dosyaları, sayfa yüklemelerini hızlandırabilir

Bir sayfaya birkaç betik dosyası eklemek için birkaç betik etiketi kullanın:

<script src="script1.js"></script>
<script src="script2.js"></script>

Dış Referanslar

Harici bir komut dosyasına 3 farklı şekilde başvurulabilir:

  • Tam bir URL ile (tam bir web adresi)
  • Bir dosya yolu ile (/js/ gibi)
  • herhangi bir yol olmadan

Bu örnek, script.js’ye bağlanmak için tam bir URL kullanır:

<script src="https://armyyazilim.com/myScript.js"></script>

Bu örnek, script.js’ye bağlanmak için bir dosya yolu kullanır:

Bu örnek sitenizin dosyalarının içinde bulunan .js dosyası için geçerli. Kendi sunucularınızda bulunuyorsa bir .js dosyası temelde bu şekilde bağlamasılısınız.

<script src="/js/script.js"></script>

Bu örnek, myScript.js’ye bağlanmak için hiçbir yol kullanmaz:

Bir dosyanın içinde bulunmuyorsa; anadizinde bir .js dosyası bulunduruyorsanız onu da bu şekilde bağlayabilirsiniz;

<script src="script.js"></script>

HTML Dosya Yolları bölümünde dosya yolları hakkında daha fazla bilgi edinebilirsiniz .

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir


ArmyYazilim