İç dış JavaKomut Dosyası: Örneklerle Öğrenin

By: James Hartman James Hartman
Hours Güncellenmiş

⚡ Akıllı Özet

İç ve Dış JavaBu makale, bir web projesi içindeki komut dosyası kodunun iki desteklenen yerleşim şeklini açıklamaktadır. Makale, her iki yaklaşımı karşılaştırır, çalışan örnekler gösterir, async ve defer ile doğru bağlantıyı açıklar ve her yerleşimin ne zaman daha iyi bakım kolaylığı ve performans sağladığını belirtir.

  • 📄 Kurum İçi Yerleştirme: Code HTML belgesindeki script etiketleri arasında yer alır ve sahibi olan sayfa ile birlikte yüklenir.
  • 🗂️ Dış Yerleştirme: Code Ayrı bir .js dosyasında yer alır ve `src` özniteliği aracılığıyla referans verilir, bu nedenle birçok sayfa aynı kaynağı paylaşır.
  • 🔗 Bağlantı Kuralı: Harici bir script etiketi her zaman kapatılmalıdır ve tam bir yol belirtilmediği sürece `src` yolu HTML belgesine göre çözümlenir.
  • ⚙️ Yükleme Kontrolü: `defer` özniteliği, HTML ayrıştırma işlemi tamamlandıktan sonra dosyayı çalıştırırken, `async` özniteliği indirme işlemi biter bitmez dosyayı çalıştırır.
  • ???? Önbelleklemenin Faydası: Harici dosyalar tarayıcı tarafından bir kez önbelleğe alınır ve bunlara referans veren her sayfada yeniden kullanılır.
  • 🧭 Seçim Kriteri: Sayfaya özgü kısa mantığı dahili tutun ve paylaşılan veya uzun mantığı hata ayıklamayı kolaylaştırmak için harici bir dosyaya taşıyın.
  • ???? Sıralı İşleyiciler: onclick gibi öznitelik tabanlı olay işleyicileri, işaretlemeyi davranışla karıştırır ve addEventListener ile değiştirilmelidir.
Devamını Oku

İç ve Dış JavaSenaryo

İç ve Dış Kavramlar Nelerdir? JavaSenaryo?

Sen kullanabilirsiniz JavaKodu iki şekilde yazabilirsiniz.

  1. Şunu da dahil edebilirsiniz: JavaKomut dosyası kodu HTML belgenizin içinde dahili olarak kendisi.
  2. Sen tutabilirsin JavaKomut dosyası kodu ayrı bir harici dosya ve ardından HTML belgenizdeki o dosyanın üzerine gelin.

Her iki yerleşim de tamamen aynı dili çalıştırır ve tarayıcıda aynı sonucu üretir. Aradaki fark, kaynak kodun nerede saklandığı, tarayıcının onu nasıl indirdiği ve kodun bir web sitesi genelinde ne kadar kolay yeniden kullanılabileceği ve sürdürülebileceğinde yatmaktadır.

Dahili Nedir? JavaSenaryo?

İç JavaScript, HTML dosyasındaki bir çift script etiketi içine doğrudan yazılan koddur. Tarayıcı, işaretlemeyi yukarıdan aşağıya doğru okur ve script etiketine ulaştığında, ek bir ağ isteği olmadan ifadeleri hemen yürütür.

Şu ana kadar Internal JS kullanıyoruz. İşte bir örnek –

<html>
<head>
  <title>My First JavaScript code!!!</title>
  <script type="text/javascript">
    // Create a Date Object
    var day = new Date();
    // Use getDay function to obtain todays Day.
    // getDay() method returns the day of the week as a number like 0 for Sunday, 1 for Monday,….., 5
    // This value is stored in today variable
    var today = day.getDay();
    // To get the name of the day as Sunday, Monday or Saturday, we have created an array named weekday and stored the values
    var weekday = new Array(7);
    weekday[0]="Sunday";
    weekday[1]="Monday";
    weekday[2]="Tuesday";
    weekday[3]="Wednesday";
    weekday[4]="Thursday";
    weekday[5]="Friday";
    weekday[6]="Saturday";
    // weekday[today] will return the day of the week as we want
    document.write("Today is " + weekday[today] + ".");
  </script>
</head>
<body>
</body>
</html>

Çıktı:

Today is Wednesday.

Yazdırılan gün, ziyaretçinin sistem saatiyle değişir, çünkü getDay fonksiyonu Pazar için 0'dan Cumartesi için 6'ya kadar bir sayı döndürür ve bu sayı hafta içi günleri dizisinde bir indeks olarak kullanılır.

Dış Nedir? JavaSenaryo?

Tüm web sayfalarınızda geçerli tarih ve saati göstermeyi planlıyorsunuz. Diyelim ki kodu yazdınız ve tüm web sayfalarınıza (örneğin 100 sayfaya) kopyaladınız. Ancak daha sonra, tarih veya saatin görüntülenme biçimini değiştirmek istiyorsunuz. Bu durumda, 100 web sayfasının tamamında değişiklik yapmanız gerekecek. Bu çok zaman alıcı ve zor bir iş olacaktır.

Yani, kaydet JavaSenaryo kodunu .js uzantılı yeni bir dosyaya ekleyin. Ardından, tüm web sayfalarınıza .js dosyanızı işaret edecek şekilde bir kod satırı ekleyin:

<script type="text/javascript" src="currentdetails.js"></script>

not: .js dosyasının ve tüm web sayfalarınızın aynı klasörde olduğu varsayılmaktadır. Eğer external.js dosyası farklı bir klasördeyse, src özniteliğinde dosyanızın tam yolunu belirtmeniz gerekir. Kapanış </script> Öğenin içeriği olmasa bile `<script>` etiketi zorunludur, çünkü kendiliğinden kapanan bir `<script>` etiketi geçerli HTML değildir ve sayfanın geri kalanı sonlandırılmamış öğe tarafından yutulacaktır.

Bu, currentdetails.js dosyasının içine yerleştirmeniz gereken koddur:

var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var monthName;

var hours = currentDate.getHours();
var mins = currentDate.getMinutes();
var secs = currentDate.getSeconds();
var strToAppend;
if (hours >12 )
{
	hours1 = "0" + (hours - 12);
strToAppend = "PM";
}
else if (hours <12)
{
	hours1 = "0" + hours;
	strToAppend = "AM";
}
else
{
	hours1 = hours;
	strToAppend = "PM";
}

if(mins<10)
mins = "0" + mins;
if (secs<10)
	secs = "0" + secs;

switch (month)
{
	case 1:
		monthName = "January";
		break;
	case 2:
		monthName = "February";
		break;
	case 3:
		monthName = "March";
		break;
	case 4:
		monthName = "April";
		break;
	case 5:
		monthName = "May";
		break;
	case 6:
		monthName = "June";
		break;
	case 7:
		monthName = "July";
		break;
	case 8:
		monthName = "August";
		break;
	case 9:
		monthName = "September";
		break;
	case 10:
		monthName = "October";
		break;
	case 11:
		monthName = "November";
		break;
	case 12:
		monthName = "December";
		break;
}

var year = currentDate.getFullYear();
var myString;
myString = "Today is " + day +  " - " + monthName + " - " + year + ".<br />Current time is " + hours1 + ":" + mins + ":" + secs + " " + strToAppend + ".";
document.write(myString);

Bu, currentdetails.js dosyanız. Uzun kod satırları görmekten endişelenmeyin. Yakında kod yazmayı öğreneceksiniz. HTML belgenizde şu şekilde değişiklikler yapın:

<html>
	<head>
	   <title>My External JavaScript Code!!!</title>
	   <script type="text/javascript" src="currentdetails.js">
	   </script>
	</head>
	<body>
	</body>
</html>

⚠️Uyarı: Yukarıdaki eski komut dosyası her saatin başına sıfır ekliyor, bu nedenle sabah 11, 011 olarak görüntüleniyor. Ayrıca atama işlemi de yapıyor. hours1 Bunu belirtmeden kullanmak, örtük bir global değişken oluşturur ve katı modda hata verir. Aşağıdaki düzeltilmiş sürüm her iki hatayı da giderir.

Aynı dosyanın modern bir yeniden yazımı daha kısadır, her değişkeni tanımlar ve değerleri doğru şekilde doldurur:

// currentdetails.js - corrected modern version
const now = new Date();

const months = ["January", "February", "March", "April", "May", "June",
                "July", "August", "September", "October", "November", "December"];

const hours24 = now.getHours();
const suffix  = hours24 >= 12 ? "PM" : "AM";
const hours12 = String(hours24 % 12 || 12).padStart(2, "0");
const mins    = String(now.getMinutes()).padStart(2, "0");
const secs    = String(now.getSeconds()).padStart(2, "0");

const message = "Today is " + now.getDate() + " - " + months[now.getMonth()] +
                " - " + now.getFullYear() + ". Current time is " +
                hours12 + ":" + mins + ":" + secs + " " + suffix + ".";

document.getElementById("stamp").textContent = message;

Örnek çıktı:

Today is 29 - July - 2026. Current time is 09:05:07 AM.

İLGİLİ MAKALELER

Harici Bir Bağlantı Nasıl Kurulur? JavaKomut Dosyası Doğru Şekilde

Harici bir dosyanın yüklenip yüklenmeyeceğini belirleyen üç ayrıntı vardır: src özniteliğinde yazılı olan yol, script etiketinin belgedeki konumu ve ona uygulanan loading özniteliği.

Yollar, başında eğik çizgi veya tam adres belirtilmediği sürece HTML belgesine göre çözümlenir.

Kaynak Değeri anlam Karar Veriyor
mevcut ayrıntılar.js HTML sayfasıyla aynı klasör /pages/currentdetails.js
js/currentdetails.js Mevcut klasörün alt klasörü /pages/js/currentdetails.js
../currentdetails.js Mevcut klasörün bir üstündeki klasör. /currentdetails.js
/assets/js/currentdetails.js Site kök dizininden mutlak yol /assets/js/currentdetails.js

`loading` özniteliği, tarayıcının dosyayı çalıştırmak için HTML'yi ayrıştırmayı ne zaman durduracağını kontrol eder. Aşağıdaki tablo, mevcut üç davranışı özetlemektedir.

özellik İndir Uygulama Anı Düzen Korundu
Hayır Bloklar HTML ayrıştırma İndirme işleminden hemen sonra Evet
ertelemek Ayrıştırmaya paralel Belge ayrıştırıldıktan sonra Evet
zaman uyumsuz Ayrıştırmaya paralel İndirme işlemi biter bitmez Yok hayır 
<!-- Recommended for scripts that read the DOM -->
<script src="js/currentdetails.js" defer></script>

<!-- Recommended for independent third party scripts -->
<script src="js/analytics.js" async></script>

<!-- Modern module syntax, deferred by default -->
<script type="module" src="js/app.js"></script>

💡 İpucu: MKS type="text/javascript" HTML5'te `<script>` özniteliği isteğe bağlıdır ve atlanabilir. Yalnızca çok eski tarayıcıları desteklerken saklayın veya `<script>` ile değiştirin. type="module" İçe aktarma ve dışa aktarma ifadeleri kullanılırken.

İçsel ve Dışsal JavaSenaryo: Temel Farklılıklar

Aşağıdaki karşılaştırma, genellikle seçimi belirleyen faktörler açısından her iki yerleşimi de yan yana koymaktadır.

faktör İç JavaSenaryo dış JavaSenaryo
Depolama yeri HTML dosyasının içinde .js uzantılı ayrı bir dosya
Sayfalar arasında tekrar kullanın Her sayfaya kopyalanması gerekiyor. Her sayfada bir dosyaya atıfta bulunuluyor.
Tarayıcı önbelleği Her sayfayla birlikte yeniden indirildi. Bir kez önbelleğe alınır ve tekrar kullanılır.
Bakım çabası Kod paylaşıldığında yüksek değer elde edilir. Düşük, düzenlenecek tek dosya
Ekstra HTTP isteği Yok hayır Evet, dosya başına bir tane.
Hata ayıklama Uzun bir HTML dosyasında daha zor. Dosya adları ve satır numaralarının net olması işleri kolaylaştırır.
En uygun Kısa sayfa özel mantığı Paylaşımlı kütüphaneler ve uzun komut dosyaları

Dahili ve Harici Ne Zaman Kullanılmalı? JavaSenaryo Code?

Belirli bir web sayfasına özel yalnızca birkaç satırlık kodunuz varsa, o zaman JavaHTML belgenizin içindeki kodu yazın.

Öte yandan, eğer senin JavaWeb sayfalarının çoğunda komut dosyası kodu kullanılıyor, bu nedenle bunları korumayı düşünmelisiniz.ping Kodunuzu ayrı bir dosyada saklayın. Bu sayede, kodunuzda değişiklik yapmak istediğinizde yalnızca tek bir dosyayı değiştirmeniz yeterli olur; bu da kod bakımını kolaylaştırır. Kodunuz çok uzunsa, onu ayrı bir dosyada tutmak da daha iyidir. Bu, hata ayıklamayı kolaylaştırır.

Yeni başlayanlar için pratik bir kural, yaklaşık on satırlık bir eşik belirlemektir. Daha kısa ve sayfaya özgü her şey dahili kalabilirken, daha uzun veya paylaşılan her şey harici bir dosyaya ait olmalıdır.

Çizgide JavaSenaryo ve Neden Kaçınılması Gerektiği

Üçüncü bir yerleşim şekli ise eski sayfalarda bulunur; burada kod doğrudan bir HTML özniteliğinin içine yazılır. Çalışmaya devam etse de, yapıyı davranışla karıştırır ve önbelleğe alınamaz, yeniden kullanılamaz veya sıkı bir içerik güvenlik politikası kapsamına giremez.

<!-- Inline handler: works, but avoid it -->
<button onclick="alert('Clicked')">Click me</button>

<!-- Preferred: behaviour attached from a script -->
<button id="greet">Click me</button>

<script>
  document.getElementById("greet").addEventListener("click", () => {
      alert("Clicked");
  });
</script>

Komut dosyalarını yerleştirme konusunda rahat hissetmeye başladıktan sonra devam edin. JavaKomut dosyası dizi yöntemleri, ders çalışma döngüler JavaSenaryove üzerinde çalışın pratik JavaKomut dosyası kod örnekleriHarici dosyalar ayrıca tarayıcı depolama mantığını yönetmeyi de çok daha kolay hale getirir, örneğin: çerezlerde JavaSenaryo.

SSS

Kodu, kapanış `<body>` etiketinden hemen önce veya `<head>` etiketine `defer` özniteliğiyle birlikte yerleştirin. Her iki seçenek de HTML'nin önce oluşturulmasına izin verir, böylece kod çalıştırıldığında öğeler zaten mevcut olur.

Evet. Her dosyaya bir script etiketi ekleyin. Async olmadan, tarayıcı bunları göründükleri sırayla yürütür, bu nedenle paylaşılan işlevleri tanımlayan dosyaları, onları çağıran dosyalardan önce yerleştirin.

Genellikle yanlış src yolu, eksik bir kapanış script etiketi veya farklı büyük/küçük harf kullanımı içeren bir dosya adı gibi nedenler söz konusudur. Tarayıcınızın ağ panelini açın ve 404 yanıtı olup olmadığını kontrol edin.

Sadece ilk ziyarette, fazladan bir istek yapılır. Ondan sonra dosya tarayıcı önbelleğinden sunulur, bu da genellikle aynı kodu her sayfada tekrarlamaktan daha hızlıdır.

Çoğu asistan, kurulum gerektirmeden çalıştığı için dahili script etiketleri içeren tek bir HTML dosyası döndürür. Üretime hazır bir yapıya ihtiyacınız olduğunda, ayrı bir .js dosyası istemeyi açıkça belirtin.

Async özniteliğine sahip harici dosyalar, bağımsız olarak yüklendikleri ve çevreleyen sayfanın görüntülenmesini asla engellemedikleri için sohbet botları gibi üçüncü taraf yapay zeka araçları için uygundur.

Bu yazıyı şu şekilde özetleyin: