صناديق الرسائل في جافا سكريبت JavaScript Message Boxes
صناديق الحوار في الجافاسكريبت
مقدمة
تعتبر صناديق الرسائل في جافا سكريبت وسيلة فعّالة لتفاعل المستخدم مع صفحات الويب. تُستخدم هذه الصناديق لعرض رسائل تنبيه، تأكيد، وإدخال، مما يمكن المطورين من تحقيق تفاعل ديناميكي وفعّال مع المستخدم.
في هذا الدرس، سنستعرض ونشرح استخدامات صناديق الرسائل الثلاثة الرئيسية في جافا سكريبت: صندوق التنبيه (Alert Box)، صندوق التأكيد (Confirm Box)، وصندوق الإدخال (Prompt Box). سنتناول كل نوع على حدة، مع توفير أمثلة توضيحية تساعدك في فهم كيفية استخدامها في تطبيقاتك الويب.
سنتعمق في كيفية استخدام هذه الصناديق لعرض رسائل مختلفة، جمع بيانات من المستخدم، وتأكيد أو رفض أمور معينة. ستحظى هذه المفاهيم بأهمية خاصة في تصميم وتطوير واجهة المستخدم، حيث يمكنك من خلالها تعزيز تفاعل المستخدم وتحسين تجربة التصفح على صفحات الويب الخاصة بك.
مع تفهم أفضل لكيفية استخدام صناديق الرسائل في جافا سكريبت، ستكون قادرًا على تضمين هذه الأساليب بشكل فعّال في تطبيقاتك، مما يعزز تفاعل المستخدم ويسهم في تحسين تجربة استخدامهم
صناديق الرسائل في جافا سكريبت (JavaScript Message Boxes) هي نافذات صغيرة تظهر للمستخدم لعرض رسائل أو تنبيهات. يمكن استخدامها للتفاعل مع المستخدم وتقديم معلومات أو طلب إدخال بسيط.
أنواع صناديق الرسائل في جافاسكريبت
هناك ثلاثة أنواع رئيسية من صناديق الرسائل في جافا سكريبت:
Alert Box (صندوق التنبيه):
يستخدم لعرض رسالة تنبيه للمستخدم. تكون هذه الرسالة غالبًا معلوماتية وتحتوي على زر “موافق” للمستخدم للنقر عليه.
alert("مرحبًا! هذه رسالة تنبيه.");
Confirm Box (صندوق التأكيد):
يستخدم للسماح للمستخدم بتأكيد أو رفض أمر ما. يحتوي عادة على زرين: “موافق” و “إلغاء”.
var result = confirm("هل أنت متأكد من رغبتك في القيام بذلك؟");
if (result) {
// الكود إذا تم الضغط على زر "موافق"
console.log("تم تأكيد الإجراء.");
} else {
// الكود إذا تم الضغط على زر "إلغاء"
console.log("تم إلغاء الإجراء.");
}
Prompt Box (صندوق الإدخال):
يستخدم للسماح للمستخدم بإدخال بيانات. يحتوي عادة على مربع نص لإدخال البيانات وزرين: “موافق” و “إلغاء”.
var name = prompt("من فضلك، أدخل اسمك:", "الاسم الافتراضي");
if (name != null) {
// الكود إذا تم الضغط على زر "موافق"
console.log("مرحبًا، " + name + "!");
} else {
// الكود إذا تم الضغط على زر "إلغاء"
console.log("تم إلغاء الإجراء.");
}
تلك هي الأمثلة الأساسية لاستخدام صناديق الرسائل في جافا سكريبت للتواصل مع المستخدم وجمع المدخلات أو عرض تنبيهات.
أمثلة تطبيقية
(صندوق التنبيه): Alert Box
مثال شامل في صفحة اتش تي ام ال مع الشرح
يمكنك إضافة صندوق تنبيه (Alert Box) في صفحة HTML باستخدام جافا سكريبت. فيما يلي مثال شامل يوضح كيفية إضافة صندوق تنبيه في صفحة HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert Box Example</title>
<!-- يمكنك تضمين أي أنماط أخرى أو روابط أساسية هنا -->
</head>
<body>
<!-- مثال على زر لتنشيط صندوق التنبيه -->
<button onclick="showAlert()">عرض التنبيه</button>
<!-- السكريبت الخاص بصندوق التنبيه -->
<script>
function showAlert() {
// استخدام الدالة alert لعرض صندوق التنبيه
alert("مرحبًا! هذا مثال على صندوق التنبيه في جافا سكريبت.");
}
</script>
</body>
</html>
الشرح:
تم إنشاء زر <button> يحتوي على نص “عرض التنبيه”.
تم استخدام الخاصية onclick لربط الزر بدالة JavaScript تسمى showAlert().
تم تضمين السكريبت في الجزء السفلي من الصفحة (<script>…</script>) والذي يحتوي على الدالة showAlert() التي تستخدم alert() لعرض صندوق التنبيه عند النقر على الزر.
عند فتح الصفحة والنقر على الزر، ستظهر نافذة تنبيه تحتوي على الرسالة “مرحبًا! هذا مثال على صندوق التنبيه في جافا سكريبت.”
Confirm Box (صندوق التأكيد):مثال شامل في صفحة اتش تي ام ال مع الشرح
يمكننا إضافة صندوق تأكيد (Confirm Box) إلى صفحة HTML باستخدام جافا سكريبت. إليك مثال شامل يوضح كيفية تنفيذ ذلك:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confirm Box Example</title>
<!-- يمكنك تضمين أي أنماط أخرى أو روابط أساسية هنا -->
</head>
<body>
<!-- مثال على زر لتنشيط صندوق التأكيد -->
<button onclick="showConfirmation()">عرض صندوق التأكيد</button>
<!-- السكريبت الخاص بصندوق التأكيد -->
<script>
function showConfirmation() {
// استخدام الدالة confirm لعرض صندوق التأكيد
var result = confirm("هل أنت متأكد من رغبتك في القيام بذلك؟");
// التحقق من النتيجة المسترجعة من صندوق التأكيد
if (result) {
// الكود إذا تم الضغط على زر "موافق"
alert("تم تأكيد الإجراء.");
} else {
// الكود إذا تم الضغط على زر "إلغاء"
alert("تم إلغاء الإجراء.");
}
}
</script>
</body>
</html>
الشرح:
تم إنشاء زر <button> يحتوي على نص “عرض صندوق التأكيد”.
تم استخدام الخاصية onclick لربط الزر بدالة JavaScript تسمى showConfirmation().
تم تضمين السكريبت في الجزء السفلي من الصفحة (<script>…</script>) والذي يحتوي على الدالة showConfirmation() التي تستخدم confirm() لعرض صندوق التأكيد.
بعد ظهور صندوق التأكيد، يتم التحقق من القيمة المسترجعة (result) لتحديد ما إذا كان المستخدم قد قرر المتابعة أو ألغى الإجراء، ثم يتم عرض رسالة تنبيه بناءً على هذا الاختيار.
Prompt Box (صندوق الإدخال):مثال شامل في صفحة اتش تي ام ال مع الشرح
يمكنك إضافة صندوق إدخال (Prompt Box) إلى صفحة HTML باستخدام جافا سكريبت. فيما يلي مثال شامل يوضح كيفية تنفيذ ذلك:
<!DOCTYPE html>
< dir= rtl html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prompt Box Example</title>
<!-- يمكنك تضمين أي أنماط أخرى أو روابط أساسية هنا -->
</head>
<body>
<!-- مثال على زر لتنشيط صندوق الإدخال -->
<button onclick="showPrompt()">عرض صندوق الإدخال</button>
<!-- السكريبت الخاص بصندوق الإدخال -->
<script>
function showPrompt() {
// استخدام الدالة prompt لعرض صندوق الإدخال
var userInput = prompt("من فضلك، أدخل اسمك:", "الاسم الافتراضي");
// التحقق من قيمة المدخلات وعرض رسالة بناءً على ذلك
if (userInput !== null) {
alert("مرحبًا، " + userInput + "!");
} else {
alert("تم إلغاء الإجراء أو ترك الحقل فارغًا.");
}
}
</script>
</body>
</html>
الشرح:
تم إنشاء زر <button> يحتوي على نص “عرض صندوق الإدخال”.
تم استخدام الخاصية onclick لربط الزر بدالة JavaScript تسمى showPrompt().
تم تضمين السكريبت في الجزء السفلي من الصفحة (<script>…</script>) والذي يحتوي على الدالة showPrompt() التي تستخدم prompt() لعرض صندوق الإدخال.
بعد ظهور صندوق الإدخال، يتم التحقق من قيمة المدخلات (userInput) لتحديد ما إذا كان المستخدم قد قام بإدخال قيمة أم قام بالضغط على زر “إلغاء”. يتم عرض رسالة تنبيه بناءً على هذا الاختيار.
تطبيق شامل عن JavaScript Message Boxes مع الشرح
سأقدم مثالًا على تطبيق بسيط يستخدم صناديق الرسائل في جافا سكريبت. في هذا المثال، سنقوم بإنشاء نموذج تسجيل دخول بسيط باستخدام صندوق إدخال لاستلام اسم المستخدم وكلمة المرور. سنقوم أيضًا بعرض رسالة تأكيد عند النقر على زر تسجيل الدخول.
<!DOCTYPE html >
<html lang="en" dir=rtl>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<!-- يمكنك تضمين أي أنماط أخرى أو روابط أساسية هنا -->
</head>
<body>
<!-- نموذج تسجيل الدخول -->
<div id="loginForm">
<label for="username">اسم المستخدم:</label>
<input type="text" id="username" placeholder="أدخل اسمك">
<label for="password">كلمة المرور:</label>
<input type="password" id="password" placeholder="أدخل كلمة المرور">
<button onclick="validateLogin()">تسجيل الدخول</button>
</div>
<!-- السكريبت الخاص بتطبيق صناديق الرسائل -->
<script>
function validateLogin() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === "" || password === "") {
alert("الرجاء إدخال اسم المستخدم وكلمة المرور.");
} else {
var confirmation = confirm("هل أنت متأكد من رغبتك في تسجيل الدخول؟");
if (confirmation) {
alert("تم تسجيل الدخول بنجاح، مرحبًا " + username + "!");
} else {
alert("تم إلغاء تسجيل الدخول.");
}
}
}
</script>
</body>
</html>
الشرح:
تم إنشاء نموذج بسيط لتسجيل الدخول يحتوي على حقلي إدخال لاسم المستخدم وكلمة المرور وزر “تسجيل الدخول”.
تم استخدام السكريبت لتحقق من ملء حقلي المدخلات (اسم المستخدم وكلمة المرور).
إذا لم يتم إدخال أي من الحقلين، سيتم عرض صندوق تنبيه.
إذا تم إدخال معلومات، سيتم عرض صندوق تأكيد.
بناءً على اختيار المستخدم في صندوق التأكيد، سيتم عرض رسالة تنبيه تحمل رسالة ترحيب إذا تم الضغط على زر “موافق”، ورسالة أخرى إذا تم الضغط على زر “إلغاء”.
هذا مثال بسيط لتوضيح كيف يمكن استخدام صناديق الرسائل في تطبيق جافا سكريبت لتحقيق تفاعل المستخدم في سياق النموذج البسيط لتسجيل الدخول.
اختبار حول موضوع “JavaScript Message Boxes” مع الإجابات وشرح صحة كل إجابة.
يرجى محاولة الإجابة على الأسئلة قبل قراءة الإجابات.
الأسئلة:
1-كيف يمكن استخدام صندوق التنبيه في جافا سكريبت؟
a) confirm()
b) prompt()
c) alert()
d) message()
2-ما هي وظيفة صندوق التأكيد؟
a) عرض رسائل تنبيه
b) جمع بيانات من المستخدم
c) تأكيد أو رفض أمر ما
d) عرض نافذة مربع إدخال
3-كيف يمكن جمع بيانات من المستخدم باستخدام جافا سكريبت؟
a) alert()
b) confirm()
c) prompt()
d) validate()
4-ما هي الدالة المستخدمة لعرض صندوق الإدخال؟
a) alert()
b) confirm()
c) prompt()
d) input()
5-ماذا يعود صندوق التأكيد بفعل المستخدم؟
a) قيمة منطقية (true/false)
b) سلسلة نصية
c) رقم صحيح
d) لا شيء
6-كيف يمكن التحقق من نتيجة صندوق التأكيد باستخدام جافا سكريبت؟
a) validate()
b) checkResult()
c) confirmResult()
d) if (result) { /* code */ }
7-ما هي الدالة المستخدمة لعرض صندوق التنبيه؟
a) message()
b) alert()
c) info()
d) notify()
8-ما هو الهدف الرئيسي لاستخدام صناديق الرسائل في جافا سكريبت؟
a) تشغيل الأكواد تلقائياً
b) تقديم تحديثات على الصفحة
c) التفاعل مع المستخدم وعرض معلومات أو جمع بيانات
d) حظر عمليات الإدخال
9-كيف يمكن استخدام صندوق التنبيه لعرض رسالة تنبيه؟
a) alert(“Hello!”)
b) confirm(“Hello!”)
c) prompt(“Hello!”)
d) notify(“Hello!”)
10-ماذا يحدث عند استخدام prompt() لجمع بيانات من المستخدم؟
a) يتم عرض صندوق تأكيد
b) يتم عرض صندوق إدخال
c) يتم عرض صندوق تنبيه
d) يتم عرض نافذة جديدة
11-كيف يمكن التحقق من القيمة المسترجعة من prompt() في جافا سكريبت؟
a) if (result) { /* code */ }
b) if (confirmation) { /* code */ }
c) if (userInput) { /* code */ }
d) if (inputValue) { /* code */ }
12-ماذا يعيد confirm() بشكل افتراضي إذا تم الضغط على زر “إلغاء”؟
a) true
b) false
c) null
d) undefined
13-ما هي الطريقة الصحيحة لاستخدام alert() لعرض رسالة تنبيه؟
a) message(“Hello!”)
b) alert(“Hello!”)
c) info(“Hello!”)
d) show(“Hello!”)
14-ما هي وظيفة alert() في جافا سكريبت؟
a) جمع بيانات من المستخدم
b) عرض صندوق تأكيد
c) عرض رسالة تنبيه
d) الاستعلام عن حالة معينة
15-ماذا يعيد prompt() إذا تم الضغط على زر “إلغاء”؟
a) سلسلة فارغة
b) null
c) undefined
d) رقم صفر
الإجابات
c- 1
2-c
3-c
4-c
5-a
6-d
7-b
8-c
9-a
10-b
11-c
12-b)
13-b)
14-c
b)- 15