عند العمل مع ملفات الويب، يجب تحميل جافا سكريبت وتشغيله جنبًا إلى جنب مع ترميز (HTML)، يمكن القيام بذلك إما مضمّنًا داخل مستند (HTML) أو في ملف منفصل سيقوم المتصفح بتنزيله جنبًا إلى جنب مع مستند (HTML).
كيفية ربط جافا سكريبت إلى HTML
1. إضافة جافا سكريبت مباشرة إلى ملف HTML
الطريقة الأولى لإضافة جافا سكريبت إلى (HTML) هي الطريقة المباشرة، حيث يمكن إضافة كود جافا سكريبت:
- بين علامتي <head>.
- بين علامتي <body>.
اعتمادًا على المكان الذي تضيف فيه رمز جافا سكريبت في ملف (HTML) الخاص بك، سيختلف التحميل، الممارسة الموصى بها هي إضافته في قسم <head> بحيث يظل منفصلاً عن المحتوى الفعلي لملف (HTML) الخاص بك، لكن وضعه في <body> يمكن أن يحسن سرعة التحميل، دعونا نلقي نظرة على ملف (HTML) التالي الذي من المفترض أن يعرض الوقت الحالي:
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<script>JAVASCRIPT IS USUALLY PLACED HERE</script>
<title>Time right now is: </title>
</head>
<body>
<script>JAVASCRIPT CAN ALSO GO HERE</script>
</body>
</html>
في الوقت الحالي، لا يتضمن الكود أعلاه جافا سكريبت، وبالتالي لا يمكن إظهار الوقت الفعلي، يمكننا إضافة الكود التالي للتأكد من أنه يعرض الوقت الصحيح:
var time = new Date();
console.log(time.getHours() + “:” + time.getMinutes() + “:” +
time.getSeconds());
2. إضافة كود جافا إلى ملف منفصل
في بعض الأحيان، لا تبدو إضافة جافا سكريبت إلى (HTML) مباشرة أفضل طريقة للقيام بذلك، لأن بعض نصوص جافا سكريبت تحتاج إلى استخدامها على صفحات متعددة، لذلك من الأفضل الاحتفاظ بكود جافا سكريبت في ملفات منفصلة، انظر الى المثال التالي:
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Time right now:</title>
</head>
<body>
</body>
<script src=”js/myscript.js”></script>
</html>
ستكون محتويات ملف (myscript.js) كالتالي:
