داخلي خارجي Javaالنص: تعلم مع المثال

من قبل: جيمس هارتمان جيمس هارتمان
Hours تحديث

⚡ ملخص ذكي

داخلي وخارجي Javaيصف هذا المقال الموضعين المعتمدين لكتابة كود البرمجة النصية داخل مشروع الويب. ويقارن بين كلا النهجين، ويعرض أمثلة عملية، ويشرح الربط الصحيح باستخدام async و defer، ويحدد متى يوفر كل موضع سهولة صيانة وأداءً أفضل.

  • 📄 التوظيف الداخلي: Code يتم وضعه بين علامات البرمجة النصية داخل مستند HTML ويتم تحميله مع الصفحة التي تملكه.
  • 🗂️ التوظيف الخارجي: Code يوجد في ملف .js منفصل يتم الرجوع إليه من خلال سمة src، لذلك تشترك العديد من الصفحات في مصدر واحد.
  • 🔗 قاعدة الربط: يجب دائمًا إغلاق علامة البرنامج النصي الخارجية، ويتم حل مسار src بالنسبة إلى مستند HTML ما لم يتم توفير مسار كامل.
  • ⚙️ التحكم في التحميل: تقوم السمة defer بتشغيل الملف بعد اكتمال تحليل HTML، بينما تقوم السمة async بتشغيله بمجرد انتهاء التنزيل.
  • 🚀 فائدة التخزين المؤقت: يقوم المتصفح بتخزين الملفات الخارجية مؤقتًا مرة واحدة، ثم يعيد استخدامها في كل صفحة تشير إليها.
  • 🧭 معيار الاختيار: احتفظ بالمنطق القصير الخاص بالصفحة داخليًا، وانقل المنطق المشترك أو المطول إلى ملف خارجي لتسهيل عملية تصحيح الأخطاء.
  • 🚫 المعالجات المضمنة: يجب استبدال معالجات السمات مثل onclick التي تمزج بين الترميز والسلوك باستخدام addEventListener.
اقرأ المزيد

داخلي وخارجي Javaسيناريو

ما هي العوامل الداخلية والخارجية؟ Javaالبرنامج النصي؟

يمكنك استخدام Javaكود البرنامج النصي بطريقتين.

  1. يمكنك إما تضمين Javaكود البرنامج النصي داخليًا داخل مستند HTML الخاص بك نفسها.
  2. يمكنك الاحتفاظ بملحق Javaكود البرنامج النصي في ملف خارجي منفصل ثم قم بالإشارة إلى هذا الملف من مستند HTML الخاص بك.

كلا الموقعين ينفذان نفس اللغة تمامًا وينتجان نفس النتيجة في المتصفح. يكمن الاختلاف في مكان تخزين المصدر، وكيفية تنزيله من قبل المتصفح، ومدى سهولة إعادة استخدام الكود وصيانته عبر موقع الويب.

ما هو داخلي Javaالبرنامج النصي؟

داخلي Javaالسكربت هو كود مكتوب مباشرةً داخل زوج من وسوم السكربت في ملف HTML. يقرأ المتصفح الترميز من الأعلى إلى الأسفل، وعندما يصل إلى وسم السكربت، ينفذ التعليمات فورًا، دون أي طلب إضافي من الشبكة.

لقد تم استخدام JS الداخلي حتى الآن. هنا عينة -

<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>

الإخراج:

Today is Wednesday.

يتغير اليوم المطبوع مع ساعة نظام الزائر، لأن getDay تُرجع رقمًا من 0 ليوم الأحد إلى 6 ليوم السبت، ويتم استخدام هذا الرقم كمؤشر في مصفوفة أيام الأسبوع.

ما هو خارجي Javaالبرنامج النصي؟

تخطط لعرض التاريخ والوقت الحاليين في جميع صفحات موقعك الإلكتروني. لنفترض أنك كتبت الكود ونسخته إلى جميع صفحات موقعك (لنقل 100 صفحة). ولكنك تريد لاحقًا تغيير تنسيق عرض التاريخ أو الوقت. في هذه الحالة، سيتعين عليك إجراء تغييرات في جميع الصفحات المئة. ستكون هذه مهمة شاقة وتستغرق وقتًا طويلاً.

لذلك، احفظ Javaسيناريو الكود في ملف جديد بالملحق .js. بعد ذلك، قم بإضافة سطر من التعليمات البرمجية في جميع صفحات الويب الخاصة بك للإشارة إلى ملف .js الخاص بك مثل هذا:

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

ملاحظاتيُفترض أن ملف .js وجميع صفحات الويب الخاصة بك موجودة في نفس المجلد. إذا كان ملف external.js موجودًا في مجلد مختلف، فيجب عليك تحديد المسار الكامل لملفك في خاصية src. </script> الوسم إلزامي حتى لو لم يكن للعنصر أي محتوى، لأن وسم البرنامج النصي ذاتي الإغلاق ليس HTML صالحًا، وسيتم ابتلاع بقية الصفحة بواسطة العنصر غير المنتهي.

هذا هو الكود الذي تضعه داخل ملف currentdetails.js:

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);

هذا هو ملف currentdetails.js الخاص بك. لا تقلق من كثرة الأسطر البرمجية، ستتعلم البرمجة قريبًا. قم بإجراء التغييرات على مستند HTML الخاص بك كما يلي:

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

⚠️ تحذير: يقوم البرنامج النصي القديم المذكور أعلاه بإضافة صفر قبل كل ساعة، لذا يتم عرض الساعة 11 صباحًا على شكل 011. كما أنه يُعيّن hours1 دون تعريفها، مما يُنشئ متغيرًا عامًا ضمنيًا ويُسبب خطأً في الوضع الصارم. النسخة المُصححة أدناه تُصلح كلا العيبين.

النسخة الحديثة المعاد كتابتها من نفس الملف أقصر، وتعلن عن كل متغير، وتضيف الحشو إلى القيم بشكل صحيح:

// 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;

عينة الإخراج:

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

ذات المواد

كيفية ربط مصدر خارجي Javaملف البرنامج النصي بشكل صحيح

ثلاثة تفاصيل تحدد ما إذا كان سيتم تحميل ملف خارجي على الإطلاق: المسار المكتوب في سمة src، وموضع علامة البرنامج النصي في المستند، وسمة التحميل المطبقة عليها.

يتم تحديد المسارات بالنسبة إلى مستند HTML ما لم يتم توفير شرطة مائلة في البداية أو عنوان كامل.

قيمة المصدر معنى يقرر أن
currentdetails.js نفس المجلد الذي توجد فيه صفحة HTML /pages/currentdetails.js
js/currentdetails.js مجلد فرعي من المجلد الحالي /pages/js/currentdetails.js
../currentdetails.js المجلد الذي يسبق المجلد الحالي /currentdetails.js
/assets/js/currentdetails.js المسار المطلق من جذر الموقع /assets/js/currentdetails.js

تتحكم خاصية التحميل في وقت توقف المتصفح عن تحليل HTML لتشغيل الملف. يلخص الجدول أدناه السلوكيات الثلاثة المتاحة.

السمة التحميل لحظة التنفيذ تم الحفاظ على النظام
بدون سلوفان تحليل HTML مباشرة بعد التنزيل نعم
تأجيل بالتوازي مع التحليل بعد تحليل المستند نعم
المتزامن بالتوازي مع التحليل بمجرد انتهاء التنزيل لا 
<!-- 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>

💡 نصيحة: استخدم type="text/javascript" السمة اختيارية في HTML5 ويمكن حذفها. احتفظ بها فقط عند دعم المتصفحات القديمة جدًا، أو استبدلها بـ type="module" عند استخدام عبارات الاستيراد والتصدير.

داخلي مقابل خارجي Javaالنص: الاختلافات الرئيسية

تُظهر المقارنة أدناه كلا الموقعين جنبًا إلى جنب عبر العوامل التي تحدد الاختيار عادةً.

عامل داخلي Javaسيناريو خارجي Javaسيناريو
مكان التخزين داخل ملف HTML ملف منفصل بامتداد .js
إعادة الاستخدام عبر الصفحات يتطلب نسخها في كل صفحة ملف واحد يُشار إليه في كل صفحة
التخزين المؤقت للمتصفح يتم إعادة تنزيلها مع كل صفحة تم تخزينها مؤقتًا مرة واحدة وإعادة استخدامها
جهود الصيانة يكون مرتفعًا عند مشاركة الكود ملف واحد فقط للتعديل
طلب HTTP إضافي لا نعم، واحد لكل ملف
التصحيح أصعب في ملف HTML طويل أسهل مع أسماء ملفات وأرقام أسطر واضحة
أفضل مناسبة ل منطق مختصر خاص بالصفحة المكتبات المشتركة والنصوص البرمجية الطويلة

متى تستخدم الداخلية والخارجية Javaسيناريو Code?

إذا كان لديك بضعة أسطر فقط من التعليمات البرمجية الخاصة بصفحة ويب معينة، فمن الأفضل الاحتفاظ بها Javaكود البرنامج النصي داخليًا ضمن مستند HTML الخاص بك.

من ناحية أخرى ، إذا كان لديك Javaإذا تم استخدام أكواد البرمجة النصية في العديد من صفحات الويب، فعليك مراعاة الاحتفاظ بها.ping ضع الكود الخاص بك في ملف منفصل. في هذه الحالة، إذا أردت إجراء أي تغييرات على الكود، يكفي تعديل ملف واحد فقط، مما يُسهّل صيانة الكود. إذا كان الكود طويلاً جدًا، فمن الأفضل أيضًا وضعه في ملف منفصل، فهذا يُسهّل عملية تصحيح الأخطاء.

من القواعد العملية للمبتدئين ألا يتجاوز عدد الأسطر عشرة أسطر تقريبًا. يمكن الاحتفاظ بأي شيء أقصر أو خاص بصفحة معينة في ملف داخلي، بينما يجب وضع أي شيء أطول أو مشترك في ملف خارجي.

في النسق Javaالسيناريو وأسباب تجنبه

يوجد موضع ثالث في الصفحات القديمة، حيث يُكتب الكود مباشرةً داخل سمة HTML. ورغم أنه لا يزال يعمل، إلا أنه يمزج بين البنية والسلوك، ولا يمكن تخزينه مؤقتًا أو إعادة استخدامه أو تغطيته بسياسة أمان محتوى صارمة.

<!-- 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>

بمجرد أن تشعر بالراحة عند وضع النصوص البرمجية، تابع مع Javaأساليب مصفوفة البرنامج النصي، يذاكر حلقات في Javaسيناريووالعمل من خلال عملي Javaأمثلة على أكواد البرمجة النصيةكما أن الملفات الخارجية تسهل بشكل كبير إدارة منطق تخزين المتصفح، مثل ملفات تعريف الارتباط في Javaسيناريو.

الأسئلة الشائعة

ضعه قبل وسم إغلاق <body> مباشرةً، أو في قسم <head> باستخدام الخاصية defer. كلا الخيارين يسمحان بعرض HTML أولاً، بحيث تكون العناصر موجودة عند تشغيل الكود.

نعم. أضف وسمًا برمجيًا واحدًا لكل ملف. بدون استخدام async، يقوم المتصفح بتنفيذها بالترتيب الذي تظهر به، لذا ضع الملفات التي تُعرّف الدوال المشتركة قبل الملفات التي تستدعيها.

الأسباب الشائعة هي مسار src خاطئ، أو علامة إغلاق البرنامج النصي مفقودة، أو اسم ملف بأحرف كبيرة وصغيرة مختلفة. افتح لوحة الشبكة في المتصفح وابحث عن استجابة 404.

يتم ذلك فقط في الزيارة الأولى، حيث يتم إرسال طلب إضافي واحد. بعد ذلك، يتم تحميل الملف من ذاكرة التخزين المؤقت للمتصفح، وهو ما يكون عادةً أسرع من تكرار نفس الكود في كل صفحة.

تُعيد معظم المساعدات ملف HTML واحدًا يحتوي على وسوم برمجية داخلية، لأنه يعمل دون الحاجة إلى إعداد. اطلب صراحةً ملف .js منفصلًا عندما تحتاج إلى بنية جاهزة للإنتاج.

تُعد الملفات الخارجية ذات السمة غير المتزامنة مناسبة لأدوات الذكاء الاصطناعي التابعة لجهات خارجية مثل برامج الدردشة الآلية، لأنها تُحمّل بشكل مستقل ولا تمنع عرض الصفحة المحيطة بها.

تلخيص هذه التدوينة بـ: