الدرس الثاني في جافا سكربت واجهة المستخدم

  • تاريخ النشر : 10/08/38 11:45:00 م
الدرس الثاني في جافا سكربت واجهة المستخدم

بسم الله الرحمن الرحيم

بعد أن أخذنا فكرة في الدرس الأول عن الجافا سكربت

سوف تتساءل عن وجهة المستخدم

للأسف الجافا سكربت بذاتها لا تستخدم واجهة مستخدم مخصصة سوى في ثلاث أدوات وهي

  1. صندوق الرسائل ويستدعى بالأمر alert
  2. صندوق الرسائل  مع إدخال نص  ويستدعى بالأمر Prompt
  3. صندوق رسائل التأكيد وهو عبارة عن رسالة لها خيارين فقط  OK و  Cancel  ويستدعى بالأمر Confirm

إذا مالحل مع فقر واجهة المستخدم للجافا سكربت ؟

الجواب هو استخدام أدوات النموذج من HTML

مثل مربع الإدخال text

صندوق الإختيار checkbox

وغيرها من الأدوات التي تقدمها لغة HTML

 

دعونا قبل ان نعود لأدوات واجهة المستخدم نأخذ فكرة عن أدوات الجافا الثلاثة وكيف نستخدمها ؟

الأول alert  

تذكر أن alert  عبارة عن رسالة تعرض للمستخدم بزر واحد فقط اسمه OK وغالباً ماتظهر الرسالة بعد تفاعل أو تنفيذ ( function  ) معين مع المستخدم

وهذه الأداة أقصد alert  مدعومة من المتصفحات المشهورة مثل Chrome, Internet Explorer, Firefox, Safari and Opera.

ولكن يقوم المستخدم أحيانا بحجب هذه الرسالة لغرض الأمان سواء من خصائص المتصفح أو برامج الحماية

و فيما يلي نموذج لعرض رسالة ترحيبية عند فتح الصفحة

  1. افتح المفكرة في جهازك أو أي برنامج لتحرير كود الجافا سكربت
  2. اكتب الكود التالي :
<HTML>

<HEAD>

<meta charset="utf-8"/>
<title>تجربة عرض رسالة باستخدام الجافا سكربت</title>

</HEAD>
<BODY>
<button onclick="SayHi()"> ترحيب </button>
<Script>
function SayHi()
    {
        alert("مرحبا بك في جافا سكربت");
    }
</Script>
</BODY>
</HTML>

 

  1. قم بتشغيل الملف عبر المتصفح وانقر على زر ترحيب لتظهر لك رسالة مرحبا بك في جافا سكربت وهي تنفيذ للأمر alert

 

الثاني Prompt

تذكر أن الأمر Prompt سيعرض لك مربع حوار عبارة عن رسالة ومربع نص لإدخال بيانات وزرين هما OK  و cancel

وغالباً نستخدم هذا الأمر لإظهار رسالة لطلب معلومة محددة يتم إدخال نتيجته في  ( function  ) معين مع ليتم إكمال المعالجة وإظهارها للمستخدم

وهذه الأداة أقصد Prompt مدعومة من المتصفحات المشهورة مثل Chrome, Internet Explorer, Firefox, Safari and Opera.

ولكن يقوم المستخدم أحيانا بحجب هذه الرسالة لغرض الأمان سواء من خصائص المتصفح أو برامج الحماية

و فيما يلي نموذج لعرض رسالة ترحيبية  باسم المستخدم الذي يعود من مربع الحوار Prompt عند فتح الصفحة

  1.  افتح المفكرة في جهازك أو أي برنامج لتحرير كود الجافا سكربت
  2. اكتب الكود التالي :
<HTML>


<HEAD>


<meta charset="utf-8"/>

<title>تجربة عرض رسالة باسم المستخدم في الجافا سكربت</title>


</HEAD>

<BODY>

<button onclick="SayHi()"> ترحيب </button>

<p id="resultprompt"></p>

<Script>

function SayHi()

    {

                        var personname;

        personname = prompt("أكتب اسمك لو تكرمت :");

                document.getElementById("resultprompt").innerHTML=" أهلاً وسهلا "+personname + "!";

    }

</Script>

</BODY>

</HTML>

 

  1. قم بتشغيل الملف عبر المتصفح وانقر على زر ترحيب لتظهر لك رسالة أكتب اسمك لو تكرمت وفي داخلها مربع نص وهي تنفيذ للأمر Prompt وعند كتابة الرسالة والنقر على زر OK تظهر على الصفحة أهلاً وسهلاً ثم اسمك الذي أدخلته

 

 

الأمر Confirm

تذكر أن الأمر Confirm سيعرض لك مربع حوار عبارة عن رسالة ولكن يفرق عن الأمر  alert  أن الرسالة لها زرين هما OK  و cancel

وغالباً نستخدم هذا الأمر لإظهار رسالة لتأكيد أمر بالموافقة أو عدمها ليتم إدخال نتيجته في  ( function  ) معين ثم يتم إكمال المعالجة

وهذه الأداة أقصد Confirm مدعومة من المتصفحات المشهورة مثل Chrome, Internet Explorer, Firefox, Safari and Opera.

ولكن يقوم المستخدم أحيانا بحجب هذه الرسالة لغرض الأمان سواء من خصائص المتصفح أو برامج الحماية

و فيما يلي نموذج لعرض رسالة ترحيبية  باسم المستخدم الذي يعود من مربع الحوار Confirm عند فتح الصفحة

  1. افتح المفكرة في جهازك أو أي برنامج لتحرير كود الجافا سكربت
  2. اكتب الكود التالي :
<HTML>

<HEAD>

<meta charset="utf-8"/>
<title>تجربة عرض رسالة استعلام باستخدام الجافا سكربت</title>

</HEAD>
<BODY>
<button onclick="SayHi()"> إسألني </button>
<p id="resultprompt"></p>
<Script>
function SayHi()
    {
		var userResponse;
        userResponse=confirm("هل ترغب بتعلم الجافا سكربت ؟");
	    
        var message;        
        if(userResponse==true)
        {
            message="أنت في الطريق الصحيح";
        }
        else
        {
            message="فكر في لغة برمجية أخرى.";
        }
        document.getElementById("resultprompt").innerHTML=message;
    }
</Script>
</BODY>
</HTML>

 

  1. قم بتشغيل الملف عبر المتصفح وانقر على زر إسألني لتظهر لك رسالة تسألك " هل ترغب بتعلم الجافا سكربت ؟" ولها زرين الأول OK والآخر Cancel  وهي تنفيذ للأمر confirm وعند النقر على زر OK تظهر على الصفحة عبارة أنت في الطريق الصحيح و إذا اخترت الزر  Cancel  تظهر عبارة فكرة في لغة برمجية أخرى

 

بهذا ننهي درسنا الثاني

والحمد لله رب العالمين

 

⇐ أسئلة وأجوبة في CSS
فكرة سريعة عن الترميز ⇐

الردود

آراء أعضاء الموقع وتعليقاتهم

هل أنت مشترك بموقع تقنيات ؟ بادر بالإشتراك الآن


يجب عليك التسجيل لتستطيع كتابة تعليق