Giriş
JavaScript tanıtıma ihtiyaç duymaz. Web geliştirme için en popüler programlama dillerinden biridir. Şuna benzer şekilde çalışır: HTML ve CSS. Bu dillerin tümü, web tabanlı uygulamaların ve programların tasarlanmasına ve geliştirilmesine yardımcı olur.
Peki JavaScript özellikle nasıl yararlıdır? JavaScript yardımıyla web uygulamalarınızı ve web sayfalarınızı oldukça etkileşimli hale getirebilirsiniz. Modern alanda rehavete yer yoktur. İzleyicilerinizin dikkatini ilk birkaç saniyede çekmeniz ve onları meşgul etmeniz gerekir. İlgi çekici ve duyarlı bir web tasarımının bunu yapmanın en iyi yollarından biri olduğuna şüphe yoktur. Neyse ki çoğu tarayıcı JavaScript'i desteklemektedir. Bazı yerleşik motorların yardımıyla tarayıcınızda çalıştırılabilir.
HTML'e JavaScript Ekleme
Web uygulamanız için JavaScript dosyaları kullanmak istiyorsanız, bunları HTML işaretlemesiyle yan yana çalıştırmanız gerekir. HTML'e JavaScript eklemenin iki yolu vardır. Yaklaşımlardan biri, bunu bir HTML belgesi içinde satır içi (inline) olarak yapmaktır. Diğer yol ise ayrı bir dosya olarak eklemektir. Bu dosya, HTML belgesiyle birlikte indirilecektir.
Bu eğitimde, JavaScript'i HTML'e nasıl ekleyeceğinizi bu iki yöntemi kullanarak ayrıntılı olarak inceleyeceğiz.
HTML Belgelerine Satır İçi (Inline) JavaScript Nasıl Eklenir
İlk olarak, bir HTML belgesine satır içi olarak nasıl JavaScript ekleyebileceğinizi göreceğiz. Bunu yapmak için özel HTML etiketini kullanmanız gerekir. Bu etiket <script>'tir. Bu etiket JavaScript kodunu sarmalar. Etiketi HTML işaretlemenizin herhangi bir yerine yerleştirebilirsiniz. Nereye yerleştireceğiniz, JavaScript'in ne zaman yüklenmesini istediğinize bağlıdır.
Örneğin, bunu <head> bölümüne, <body> bölümüne veya hatta </body> kapatma etiketinden sonrasına yerleştirebilirsiniz. JavaScript'i HTML kodunun ana içeriğinden uzak tutmak istiyorsanız, etiketi <head> bölümüne koymanız daha iyi olur. Bu, JavaScript kodunu içerecektir. Öte yandan, JavaScript kodunuzun web sayfanızın düzeni içinde çalışmasını isteyebilirsiniz. Durum böyleyse, etiketi <body> bölümüne yerleştirmelisiniz. Diyelim ki içerik oluşturmak için document.write kullanıyorsanız bunu yaparsınız.
Bunu anlamanın daha iyi bir yolu, kod içeren bir örnek olacaktır. Boş olan aşağıdaki HTML belgesini ele alalım. Bu belgenin tarayıcı başlığı Today’s Date:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bugünün Tarihi</title> </head> <body> </body> </html> |
Görebileceğiniz gibi, burada JavaScript'ten eser yok. Belge şu ana kadar yalnızca HTML işaretlemesini içeriyor. Şimdi, aynı anda yüklenmesini ve çalışmasını sağlamak için satır içi bazı JavaScript kodları eklemek istiyoruz. Aşağıdaki JavaScript kod parçasını ele alalım:
|
1 2 |
let d = new Date(); alert("Bugünün tarihi: " + d); |
Yukarıdaki koda göre, web sayfamızın bugünün tarihini içeren bir uyarı göstermesini sağlıyoruz. Dolayısıyla, ziyaretçi siteyi ne zaman açarsa açsın, sayfa güncel tarihi gösterecektir.
Şimdi bu JavaScript kod parçasını HTML belgesine eklemek için <script> etiketini kullanacağız. Her şeyden önce, JavaScript kodunu <head> etiketleri arasına eklemeniz gerekir. Bu, web sayfasına bu özel kodun sayfanın diğer içeriğinden önce yüklenmesi gerektiğini söyler. Kodu <title> etiketlerinin altına ekleyebilirsiniz. Bunu şu şekilde yapabilirsiniz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bugünün Tarihi</title> <script> let d = new Date(); alert("Bugünün tarihi: " + d); </script> </head> <body> </body> </html> |
JavaScript kodunuz artık eklendi. Web sayfanız çalışacak ve sayfanın geri kalanından önce bu betiği yükleyecektir. Sitenizi başlattığınızda, geçerli tarihi içeren bir uyarı alacaksınız, bunun gibi bir şey:
Kodu HTML belgesinin <head> bölümüne bu şekilde ekleyebilirsiniz. Alternatif olarak, betiği <body> etiketlerinin içine veya dışına ekleyebilirsiniz. Aşağıdaki örnekte göreceğiniz gibi, kod parçasını <head> bölümünden sonra ekleyeceğiz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bugünün Tarihi</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>Bugünün tarihi: " + d + "</h1>" </script> </body> </html> |
Bu değişikliğin bir sonucu olarak, sayfayı yeniden yüklediğinizde şuna benzer bir şey göreceğiniz:
Ayrı Bir JavaScript Dosyası ile HTML'e JavaScript Nasıl Eklenir
Küçük JavaScript betikleri HTML dosyalarıyla iyi çalışır. Bunun nedeni, tamamının bir sayfa veya daha azında çalışmasıdır. Birden fazla sayfayı kaplayan daha büyük betiklerle çalışıyorsanız, dosyanın anlaşılması çok zorlaşabilir. Bu nedenle, onu ayrı bir JavaScript dosyası olarak eklemeniz gerekebilir. Dosya, HTML belgesiyle eş zamanlı olarak yüklenecektir.
Bu bölümde, ayrı bir dosya kullanarak HTML'e nasıl JavaScript ekleyebileceğinizi tartışacağız. Kod genellikle bir veya birden fazla .js dosyasında barındırılır. HTML belgesi, diğer tüm harici varlıklar gibi bu dosyalara referans verecektir. Tamamen ayrı bir JavaScript dosyası kullanmak istemenizin birçok nedeni vardır. Temel olarak, kodun okunmasını ve anlaşılmasını çok daha kolay hale getirir. Ayrıca, ayrı dosyalar önbelleğe alınmış sayfaların hızlı yüklenmesini sağlar ve bakımı da nispeten daha kolaydır.
Bu avantajlardan yararlanmak için, JavaScript dosyası ile HTML belgesini birbirine nasıl bağlayacağınızı bilmeniz gerekir. Anlamanıza yardımcı olmak için küçük bir web projesi örneğini ele alacağız. Bu varsayılan proje, kök dizinde bir ana index.html, css/ dizininde style.css ve js/ dizininde script.js içerir. İşte küçük projemiz:
|
1 2 3 4 5 6 7 8 9 10 11 |
proje/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
HTML işaretlememiz için daha önce kullandığımız belgeyi kullanacağız:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bugünün Tarihi</title> </head> <body> </body> </html> |
Artık iki belgemiz olduğuna göre, bunları birbirine bağlamaya başlayabiliriz. Tarihle ilgili JavaScript kodunu script.js dosyasına eklememiz gerekiyor. Bunu aşağıdaki gibi bir <h1> başlığı olarak ekleyeceksiniz:
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>Bugünün tarihi: " + d + "</h1>" |
Kodu HTML belgesine bağlamak için betiğe bir referans ekleyeceksiniz. Referans, HTML şablonunun <body> bölümünün içinde veya altında bulunmalıdır. Burada kullanacağınız kod şudur:
|
1 |
<script src="js/script.js"></script> |
Gördüğünüz gibi, <script> etiketini kullanıyoruz. Bu etiket, projenin js/ dizininde bulunan script.js dosyasını işaret etmektedir. Kodun HTML belgesinde nasıl görüneceği aşağıda belirtilmiştir:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bugünün Tarihi</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
Dilerseniz sayfanızı canlandırmak için bazı biçimsel değişiklikler yapabilirsiniz. Örneğin, <h1> başlığına biraz arka plan rengi ekleyelim. Bu düzenlemeyi style.css dosyasında yapacağız:
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
Düzenleme başlıkta gösterileceğinden, buna HTML belgesinin <head> bölümünde referans vereceğiz. Bu CSS dosyasına referansı şu şekilde yapacaksınız:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bugünün Tarihi</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
Artık gerekli referansları yaptığımıza göre, değişiklikleri görselleştirebilirsiniz. index.html dosyasını tarayıcınızda yüklediğinizde buna benzer bir sayfa göreceksiniz:
Kodu güncellemek isterseniz, tüm sayfalarınızı tek bir konumdan düzenleyebilirsiniz. Bu, web sayfalarının bakımını oldukça kolaylaştırır. JavaScript betikleriniz için ayrı bir dosya kullanmanın avantajı budur.
Sonuç
Umarız bu eğitim, HTML'e JavaScript ekleme süreci hakkında daha fazla bilgi edinmenize yardımcı olmuştur. Bunu bir HTML belgesine satır içi (inline) olarak nasıl yapacağımızın yanı sıra bir .js dosyası olarak nasıl ekleyeceğimizi de ele aldık. Artık temel bilgileri bildiğinize göre, HTML içinde JavaScript ile çok daha fazlasını yapabilirsiniz.
İşte blogumuzdan JavaScript'i daha fazla kullanmanıza yardımcı olacak bazı kaynaklar:
- Kendi web uygulamanızı oluşturuyorsanız, en iyi sunucu kurulumunun nasıl seçileceğine dair kılavuzumuza göz atın.
- Eğer Ghost ile nasıl blog kurulacağını öğrenmek istiyorsanız bu eğitime göz atın.
- Bu eğitime göz atın Ubuntu 18.04 üzerinde Node.js'in nasıl kurulacağını öğrenmek için.
Keyifli Kodlamalar!
Yorumlar
Henüz yorum yapılmamış. İlk siz olun.