JavaScript'i HTML ile Bütünleştirme

JavaScript kodları HTML ile dahili ve harici olarak bütünleştirilebilir.

Dahili olarak satır içinde (inline) yazılabilir. Örnek olarak.

<!-- HTML Sayfası -->
<!DOCTYPE html>
<html lang="tr">
    <head>
        <title> JavaScript Dersleri </title>
    </head>
    <body>
        <!-- Butona tıklandığında konsolda 'Merhaba' görünecek bir kod ekledik.-->
        <button onclick="alert('Merhaba')">TIKLA</button>
    </body>
</html>

' alert() ' fonksiyonu internet tarayıcımızın penceresinde bir uyarı kutusu göstermemizi sağlayan JavaScript fonksiyonudur.

Uzun kodlar yazmak için elverişli olmayan bu yöntemi genellikle fonksiyonlarımızı çalıştırmak için kullanırız.

JavaScript kodlarımızı dahili olarak doküman içerisinde '<script> </script>' etiketi ile de yazabiliriz. Basit ve uzun olmayan kodlarımızı bu yöntemle bütünleştirmemiz önerilir. Örnek olarak.

<!-- HTML Sayfası -->
<!DOCTYPE html>
<html lang="tr">
    <head>
        <title> gitbook.io </title>
    </head>
    <body>
        <!-- 'yaz()' adında bir javascript fonksiyonu yazdık.-->
        <script>
            function yaz() {
                alert('Merhaba');
            }
        </script>
        <!-- Butona tıklandığında 'yaz()' fonksiyonunu çağırdık.-->
        <button onclick="yaz()">TIKLA</button>
    </body>
</html>

Bu örnekte HTML elementimize tıklanınca çalıştırmak istediğimiz fonksiyonu satır içinde yazdık. Bu örnekteki "<script> </script>" etiketini dokümanın "<html> </html>" etiketleri arasında istediğimiz yerde yazabiliriz.

Genellikle kullanılan yöntem de harici olarak bütünleştirmektir. Uzun ve karmaşık işler için yazdığımız kodları bu yöntemle bütünleştirmemiz önerilir. Örnek olarak.

<!-- HTML Sayfası -->
<!DOCTYPE html>
<html lang="tr">
    <head>
        <!-- Javascript kodlarımızı harici dosyadan bütünleştirdik.-->
        <script src="js/custom.js"> </script>
        <title> gitbook.io </title>
    </head>
    <body>
        <!-- Butona ile harici dosyamızdaki 'yaz()' fonksiyonunu çağırdık.-->
        <button onclick="yaz()">TIKLA</button>
    </body>
</html>

Bu yöntemde script etiketinin "src" niteliğini kullanırsak, etiket içinde yazdığımız kodlar yürütülmez. Yani 'bir' script etiketiyle aynı anda hem harici hem de dahili bütünleştirme yapamazsınız. Farklı script etiketleriyle bunu yapabilirsiniz. Bir HTML dokümanında sadece bir tane script etiketi olmasıyla ilgili bir zorunluluk yoktur. Örnek olarak.

<!-- Yanlış Örnek -->
<script src="js/custom.js">
    //Aşağıdaki kod çalışmaz çünkü yukarıda script etiketinde 'src' niteliği var.
    alert('Merhaba');
</script>

<!-- Doğru Örnek -->
<!-- Harici betik dosyası -->
<script src="js/custom.js"> </script>

<!-- Dahili betik -->
<script>
    //Aşağıdaki kod çalışır çünkü script etiketinde 'src' niteliği yok.
    alert('Merhaba');
</script>

Bu yöntemlerden birinin bir HTML dokümanında kullanılması diğer yöntemi geçersiz kılmaz. HTML dokümanında bütünleştirmeler birlikte kullanılabilir.

PreviousGeliştirme Ortamı NextJavascript'te İfadeler

Last updated 1 year ago