يمكنك كتابة وتضمين الكود الخاص بـ JavaScript في صفحات الويب بعد أن تكون قد أنشأت الوثيقة HTML الخاصة بك.
اين يمكن تضمين أكواد الجافاسكريبت في صفحة الويب
ملاحظة
هذا المقال لا يعوِّض تعلُّم لغة الجافاسكريبت من مصادرها الرسمية، ولا يستغني عن حضور دورات تعليمية رسمية في البرمجة.
هناك ثلاثة طرق رئيسية لكتابة وتضمين JavaScript في صفحات الويب:
1. داخل صفحة html
في وسم <script> داخلي
يمكنك وضع الكود المختصر أو الكود الكامل داخل وسم <script> داخلي في صفحة HTML. يجب أن يكون هذا الوسم بعد وسم العنوان <title> وقبل وسم الإغلاق </body> للصفحة. هذا هو المكان الذي يمكنك من خلاله تضمين أكواد JavaScript مباشرة في الصفحة.
مثال على تضمبن كود الجافا سكريبت داخل صفحة html
أكواد html و أكواد javascript
<!DOCTYPE html>
<html>
<head>
<title>صفحتي الرئيسية</title>
</head>
<body>
<!--محتوى الصفحة هنا يمكن تضمين اكواد جافاسكريبت-->
<script>
function sayHello() {
var name = prompt("ما اسمك؟");
if (name !== null && name !== "") {
alert("مرحباً بك، " + name + "!");
} else {
alert("مرحباً!");
}
// افتراض أنه يمكنك استدعاء الدالة هنا أو في أي مكان آخر من الصفحة
sayHello();
</script>
</body>
</html>
2. في ملف خارجي
في ملف خارجي مرتبط بصفحة html
يمكنك كتابة كود JavaScript في ملف خارجي بامتداد .js وتضمينه في صفحتك الرئيسية باستخدام وسم <script> داخلي في رأس الصفحة. يمكنك استخدام الوسم src للإشارة إلى ملف JavaScript الخارجي.
مثال على محتوى ملف script.js
يمكن انشاء ملف خارجي بامتداد script.js
function sayHello() {
var name = prompt("ما اسمك؟");
if (name !== null && name !== "") {
alert("مرحباً بك، " + name + "!");
} else {
alert("مرحباً!");
}
}وفي صفحة HTML، يكون التضمين كالتالي، ويتم استدعاء الدالة sayHello()
<!DOCTYPE html>
<html>
<head>
<title>صفحتي الرئيسية</title>
<script src="script.js"></script>
</head>
<body>
<!-- محتوى الصفحة -->
<script>
// افتراض أنه يمكنك استدعاء الدالة هنا أو في أي مكان آخر من الصفحة
Hello();
</script>
</body>
</html>3. في مكتبة خارجية
مكتبة خارجية
في بعض الأحيان، يمكنك استخدام مكتبات JavaScript الخارجية، مثل jQuery أو React، وتضمينها في صفحتك باستخدام وسم <script> داخلي في رأس الصفحة أو بالاستفادة من CDN (Content Delivery Network).
مثال على تضمين مكتبة jQuery باستخدام CDN
هذا مثال على امكانية استدعاء اكواد الجافا سكريبت من مكتبات خارجية.
<!DOCTYPE html>
<html>
<head>
<title>صفحتي الرئيسية</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- محتوى الصفحة -->
<script>
// استخدام jQuery لتحديد العنصر وتنفيذ بعض الإجراءات
$(document).ready(function () {
alert("تم تحميل الصفحة بنجاح باستخدام jQuery!");
});
</script>
</body>
</html>يمكنك اختيار الطريقة التي تناسب احتياجات مشروعك أو تطبيقك. سواء أكان JavaScript مباشرًا في الصفحة أو ملفًا خارجيًا أو مكتبة خارجية، فإن JavaScript يمكن أن يضيف التفاعل والديناميكية لصفحتك الويب.