::تطبيقات:: على الدرس الأول والثاني والثالت للجافاسكريبت..

**M. Al-Dhafeeri** · 20-12-2008

السلام عليكم ورحمة الله وبركاته..

لكي لا أكون سريع في وضع الدروس، هذا الموضوع راح يكون (فقط) تطبيقات على ماقمت بشرحه في الدروس (التطبيقات سأضع تطبيق او تطبيقين وكل واحد نفس الشي ^^) الثلاث بالجافاسكريبت وكانت عن (المتغيرات، الأساسيات، الدوال، حلقات التكرار، جمل الشرط والأكواد التي يجب عليك معرفتها لتسهل عليك البرمجه وكيفية الربط بين ال html والجافاسكريبت من خلال استخدام (ازرار) او (الفورم)..الخ).

الدروس الثلاث السابقة:
::الدرس الأول:: أساسيات الجافاسكريبت..
::الدرس الثاني:: أكواد تفيدنا والجمل الشرطية في الجافاسكريبت
::الدرس الثالث:: الدوال وحلقات التكرار في الجافاسكريبت..

سأبدأ بإذن الله بوضع مجموعه من الأكواد لبرامج معيّنه وسأقوم بشرحها..

++++++++
أول تطبيق: هذا كود لفورم يستخدم الجافاسكريبت للتأكد من انه الفورمز ليست فارغة، وأيضا يقوم بالتأكد من ان
المستخدم قام بكتابة المعلومات صحيحه أم لا.. (اسم المستخدم والباسوورد)

اذا كان (اسم المستخدم او الباسوورد خطأ) فستظهر رسالة تنبيه للمستخدم، بخصوص ذلك
اما اذا كان (اسم المستخدم و الباسوورد صح) فستظهر رساله تؤكد للمستخدم تسجيله وتنقله اما للموقع او تغلق المتصفح..

شرح للكود بالصور..

أولاً طبعا نقوم بعمل فورم وسوف يأخذ من المستخدم username و password وزر ادخال المعلومات

وثانيا نقوم بكتابة الاوامر التي نريد تطبيقها..

وهذا الكود كامل

كود HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>صفحة الدخول للموقع..</title>
<script type="text/javascript">
//function check(), that'll check if the user enters the correct username and password, and to check if the users left them empty
function check()
{
	var user = document.hi.userName.value;
	var pass = document.hi.pass.value;
	
	if( (user == "") || (user != "Mohammed") ) // if..else statement to check if the username is empty or not correct
	{
		window.alert( " يرجى كتابة اسم المستخدم أو تأكد من اسم المستخدم");
		return false;
	}
	
	else // else to check if the password is not correct or empty
		if( (pass != "123456") || (pass == "")  )
		{
			window.alert(" الباسوورد خطأ او لم تقم بادخال الباسوورد ");
			return false;
			
		}
		
	con( user, pass); // to call the function con, that'll confirm the entered data, it'll pass the "user and pass"
}

function con( user, pass )
{
	var ok = window.confirm(" شكرا لتسجيل دخولك،\nسيتم الآن تحويلك للموقع، \nفي حالة عدم موافقتك سيتم اغلاق المتصفح ");
	
	if( ok ) // if..else statement to check if the user chose "Ok" or "Cancel" from the box that'll appeared to him from confirm
	{
		window.location = 'http://www.clickclick.ws'; // if the user clicked "Ok" he'll transfer to my forums
	}
	
	else // if the user clicked "Cancel" the window will be closed
		window.close();
}
</script>

</head>

<body>

<form name="hi" onsubmit="return check()" >
	<input name="userName" type="text" value="اسم المستخدم" size="20" /><br />
	<input name="pass" type="text" value="الباسوورد" size="20" /><br />
	<input name="submit" type="submit" value="دخول" /></form>

</body>

</html>

مثال مباشر للتطبيق:
صفحة الدخول للموقع..

اسم المستخدم: Mohammed
كلمة السر: 123456

أي سؤال بخصوص هذا التطبيق سأكون بالخدمه..

الآن سأنتظر تطبيقاتكم (حسب أفكاركم) كل واحد أكيد راح يكون عنده تطبيق بالجافاسكريبت يعتمد على ماسبق شرحه بالدروس الثلاث السابقه، خلونا نشوف ابداعاتكم..
وأيضا لاتنسون، الكود الرائع والغير فوضوي واستخدام المتغيرات المناسبه من صفات المبرمج المتميز

:::ClickClick Forums::: • مشاهدة الموضوع - ::تطبيقات:: على الدرس الأول والثاني والثالت للجافاسكريبت..

**ليوناردو دافينشي** · 21-12-2008

السلام عليكم يا صاحب الشرح المميز

عندي طلب صغير قبل البدء يا ريت تضع رابط للصورة رقم 2 لانها كبيرة جدااً :anger2:

كود للتاكد أن المدخل به ليس الا عربياً

صنعته هذه لاجل موضوع أخر لكنه كود نادر

كود PHP:


<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<script type="text/javascript">

function isArabicField(ElementID)
{
//Cheak arabic Characters in field

var n  = document.getElementById(ElementID).value;
var EC =0;
// Arabic Expression
var AE = /ا|أ|إ|آ|ب|ت|ة|ث|ج|ح|خ|د|ذ|ر|ز|س|ش|ص|ض|ط|ظ|ع|غ|ف|ق|ك|ل|م|ن|ه|و|ي|ء|ئ|ؤ|ى|ـ/;
for(i=0;i<n.length;i++){if (!n.substring(i,i+1).match(AE)){EC++;}}
    if(EC!=0){
// تنفيذ أمر هنا اذا كان هناك احرف غير عربية 
    alert('يجب ان يكون الاسم عربياً');
    n.focus();
        return false;
    }else{
// تنفيذ امر اذا كان لا يوجد احرف اجنبية
    alert('المدخل صحيحـ');
    return true;
    }

}

</script>

</head>
<body style="font-family:Tahoma; font-weight : bold; font-size : 13px; padding: 20px; ">



<form action="#" onsubmit="return false; " >
  <fieldset>
    <legend>التحقق اذا كان المدخل أحرف عربية:</legend>
    اكتب اسمك بالعربية:  <input ID="arName" name="arName" type="Text" value=""> <br />
 <input name="Button2" onclick="isArabicField('arName');" type="submit" value="أضغط هنا للتحقق"  />
  </fieldset>
</form>

 </body>
 </html>

لي عودة
أرجو رأيك يا شاعر الظلام

**M. Al-Dhafeeri** · 22-12-2008

المشاركة الأصلية كتبت بواسطة ليوناردو دافينشي مشاهدة المشاركة

السلام عليكم يا صاحب الشرح المميز

عندي طلب صغير قبل البدء يا ريت تضع رابط للصورة رقم 2 لانها كبيرة جدااً :anger2:

كود للتاكد أن المدخل به ليس الا عربياً

صنعته هذه لاجل موضوع أخر لكنه كود نادر

كود PHP:


<html dir="rtl">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">

<script type="text/javascript">



function isArabicField(ElementID)

{

//Cheak arabic Characters in field



var n  = document.getElementById(ElementID).value;

var EC =0;

// Arabic Expression

var AE = /ا|أ|إ|آ|ب|ت|ة|ث|ج|ح|خ|د|ذ|ر|ز|س|ش|ص|ض|ط|ظ|ع|غ|ف|ق|ك|ل|م|ن|ه|و|ي|ء|ئ|ؤ|ى|ـ/;

for(i=0;i<n.length;i++){if (!n.substring(i,i+1).match(AE)){EC++;}}

    if(EC!=0){

// تنفيذ أمر هنا اذا كان هناك احرف غير عربية 

    alert('يجب ان يكون الاسم عربياً');

    n.focus();

        return false;

    }else{

// تنفيذ امر اذا كان لا يوجد احرف اجنبية

    alert('المدخل صحيحـ');

    return true;

    }



}



</script>



</head>

<body style="font-family:Tahoma; font-weight : bold; font-size : 13px; padding: 20px; ">







<form action="#" onsubmit="return false; " >

  <fieldset>

    <legend>التحقق اذا كان المدخل أحرف عربية:</legend>

    اكتب اسمك بالعربية:  <input ID="arName" name="arName" type="Text" value=""> <br />

 <input name="Button2" onclick="isArabicField('arName');" type="submit" value="أضغط هنا للتحقق"  />

  </fieldset>

</form>



 </body>

 </html>

لي عودة
أرجو رأيك يا شاعر الظلام

لووووول بخصوص الصوره بكل بساطه right click >> properties وانسخ اللينك :funny:

لأنه شرحت فيها الكود كامل عشان تتضح للزوار والأعضاء ^^

بخصوص كودك ممتاز والله ما استخدمت فيه شي خارج المواضيع اللي شرحتها لأنه اذا كان خارج المواضيع جان انت الحين بعداد الموتى :funny::funny: << شدعوه!!

من مساعه قاعد اقرى كودك بفهم طريقة الداله عشان انزل لها شرح بالصور.. وشكلي دايخ بروح انام وارد لكم باجر اذا الله عطاني عمر وخلصت هوومووركاي :shy:

دعواتكم وشاكر تفاعلك

**ليوناردو دافينشي** · 22-12-2008

لووووول بخصوص الصوره بكل بساطه right click >> properties وانسخ اللينك

لأنه شرحت فيها الكود كامل عشان تتضح للزوار والأعضاء ^^

بخصوص كودك ممتاز والله ما استخدمت فيه شي خارج المواضيع اللي شرحتها لأنه اذا كان خارج المواضيع جان انت الحين بعداد الموتى

<< شدعوه!!

من مساعه قاعد اقرى كودك بفهم طريقة الداله عشان انزل لها شرح بالصور.. وشكلي دايخ بروح انام وارد لكم باجر اذا الله عطاني عمر وخلصت هوومووركاي :shy:

دعواتكم وشاكر تفاعلك

الصورة كبيرة والصفحة عندي مش مبين الجزء الايسر منها ههههها
هوموركاي :court:

انا انتهيت من العمل الثاني

سكربت ضخم الي بيشرح الكود له مني جائزة

الكود طبعاً معقد شوي لاني انا شخصياً معقد وحياتي معقدة

السكربت عبارة عن قياس ادمان التدخين <<<<< عمل غير مسبوق

الطريقة من اختبار " فاجر ستورم " ما حد يسئل مين هذا الشخص لاني قراءت عنه بـ ويكيبيديا وما عرفته :shy:
ساعتان وانا أشتغل بالكود :1power:

>>>>> الكود هنا <<<<<

كود PHP:


<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<style>
body {
font-family:Tahoma; font-weight : bold; font-size : 13px; padding: 20px;
}

#Tips
{
text-align: center; 
margin: 0px auto -1px auto; 
font-size : 14px;
width:35%;background-color: #eeeeee;
}
.Tip{
background-color: #eeeeee;
font-size : 14px;
color: red;
}
span{color: red;}
</style>

<script type="text/javascript">
/* 
http://www.swalif.net/softs/
Topic : http://www.swalif.net/softs/swalif44/softs250372/
Leonardo-Davinci@msn.com
Thank you for try this script!!
*/
function ShowSwitchTip(Tip)
{
var n = document.getElementsByTagName("div")
if (Tip<=3){for(i=0;i<n.length;i++){if(n[i].id.match(/Tip/)){n[i].style.display="none"}}document.getElementById('Tip'+Tip).style.display=""}
else{
var t = document.getElementById('Tips');
    t.innerHTML=Tip;
if(t.style.display="none"){t.style.display="";}   ;
}

}
function Result()
{
var n = document.getElementsByTagName("input");
var s = "";
var j = 0;
         
for (i=0; i<n.length; i++){if (n[i].type=="radio" && n[i].checked==true){s+=""+n[i].value+"+";j++}}
if (j<=5){ShowSwitchTip('عليك الاجابة على جميع الاسئلة')}else{

s = s.substring(0,s.length-1);
s = eval(s);
if (s<=4 && s>=0){ShowSwitchTip(1);ShowSwitchTip('نسبة إلادمان '+s *100 /10 + "%"+'  إدمان قليل ')}
else if(s>=4 && s<=7){ShowSwitchTip(2);ShowSwitchTip('نسبة إلادمان '+s *100 /10 + "%"+' إدمان متوسط')}
else if(s>=5 && s<=10){ShowSwitchTip(3);ShowSwitchTip('نسبة إلادمان '+s *100 /10 + "%"+' إدمان عالي')}
}
}


</script>

</head>
<body>



<fieldset>
    <legend>قياس إدمان التدخين:</legend>
    <div id="Tip0">
        إختبر مدى إدمانك على التدخين <br />
        <ul>
            <li><span>متى تدخن اول سيجارة بعد الاستيقاظ مباشرة؟</span><br />
                <br />
                <input name="q1" type="radio" value="0" />
                بعد 60 دقيقة
                <br />
                <input name="q1" type="radio" value="2" />
                من 6 إلى 30 دقيقة <br />
                <input name="q1" type="radio" value="1" /> 
                من 31 إلى 60 دقيقة
                <br />
                <input name="q1" type="radio" value="3" /> 
                خلال خمس دقائق
                <br />
                <br />
            </li>
            <li><span>هل تجد صعوبة في الامتناع عن التدخين في الأماكن المحظورة؟</span><br />
                <br />
                <input name="q2" type="radio" value="1" /> 
                نعم
                <br />
                <input name="q2" type="radio" value="0" /> 
                لا<br />
                <br />
            </li>
            <li><span>ماهي السيجارة التي يصعب عليك الامتناع عنها؟</span><br />
                <br />
                <input name="q3" type="radio" value="0" /> 
                أي سيجارة <br />
                <input name="q3" type="radio" value="1" /> 
                أول سيجارة في الصباح
                <br />
                <br />
            </li>
            <li><span>كم سيجارة تدخن في اليوم؟</span><br />
                <input name="q4" type="radio" value="0" />
                1-10<br />
                <input name="q4" type="radio" value="1" />
                11-20<br />
                <input name="q4" type="radio" value="2" /> 
                21-30
                <br />
                <input name="q4" type="radio" value="3" /> 
                31+
                <br />
                <br />
            </li>
            <li><span>هل تدخن في الساعة الأولى من الصباح أكثر من بقية اليوم؟</span><br />
                <br />
                <input name="q5" type="radio" value="1" />
                نعم <br />
                <input name="q5" type="radio" value="0" />
                لا<br />
                <br />
            </li>
            <li><span>هل تدخن وأنت مريض جدا وملازم الفراش؟</span><br />
                <br />
                <input name="q6" type="radio" value="1" />
                نعم <br />
                <input name="q6" type="radio" value="0" />
                لا </li>
        </ul>
        <br />
        <br />
    </div>
    <div id="Tips" style="display:none;"></div>
    <div class="Tip" id="Tip1" style="display:none;"> 
        أنت قليل الادمان على النيكوتين يمكنك التخلص منه بسهولة, افعل ذلك قبل أن تصبح 
        مدمنا.
    </div>
    <div class="Tip" id="Tip2" style="display:none;"> 
        أنت مدمن نيكوتين, قد تتطور حالتك للأسوء و لكن فرص الاقلاع عنه موجودة, خذ 
        نصائح من الطبيب أو الصيدلي قبل أن تتطور حالتك.
    </div>
    <div class="Tip" id="Tip3" style="display:none;"> 
        أنت جداً مدمن على النيكوتين. جسمك يطلب النيكوتين بكثرة و هذا خطر
        عليك التغلب على هذه الرغبة, مراجعة الطبيب أو الصيدلي مهم للغاية لأخذ نصائح تقلل 
        من هذه الرغبة, لاتخاذ الاجراءات اللازمة و الا فأنت على حافة الهاوية.
    </div>
    <br />
    <p align="center">
        <input name="Button1" type="Button" onclick="Result()" value="النتيجة" /> 
        <input name="Button2" type="Button" onclick="ShowSwitchTip(0)" value="إعادة" /> 
    </p>
</fieldset>





 </body>
 </html>

**M. Al-Dhafeeri** · 26-12-2008

المشاركة الأصلية كتبت بواسطة ليوناردو دافينشي مشاهدة المشاركة

الصورة كبيرة والصفحة عندي مش مبين الجزء الايسر منها ههههها
هوموركاي :court:

انا انتهيت من العمل الثاني

سكربت ضخم الي بيشرح الكود له مني جائزة

الكود طبعاً معقد شوي لاني انا شخصياً معقد وحياتي معقدة

السكربت عبارة عن قياس ادمان التدخين <<<<< عمل غير مسبوق

الطريقة من اختبار " فاجر ستورم " ما حد يسئل مين هذا الشخص لاني قراءت عنه بـ ويكيبيديا وما عرفته :shy:
ساعتان وانا أشتغل بالكود :1power:

>>>>> الكود هنا <<<<<

كود PHP:


<html dir="rtl">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">

<style>

body {

font-family:Tahoma; font-weight : bold; font-size : 13px; padding: 20px;

}



#Tips

{

text-align: center; 

margin: 0px auto -1px auto; 

font-size : 14px;

width:35%;background-color: #eeeeee;

}

.Tip{

background-color: #eeeeee;

font-size : 14px;

color: red;

}

span{color: red;}

</style>



<script type="text/javascript">

/* 

http://www.swalif.net/softs/

Topic : http://www.swalif.net/softs/swalif44/softs250372/

Leonardo-Davinci@msn.com

Thank you for try this script!!

*/

function ShowSwitchTip(Tip)

{

var n = document.getElementsByTagName("div")

if (Tip<=3){for(i=0;i<n.length;i++){if(n[i].id.match(/Tip/)){n[i].style.display="none"}}document.getElementById('Tip'+Tip).style.display=""}

else{

var t = document.getElementById('Tips');

    t.innerHTML=Tip;

if(t.style.display="none"){t.style.display="";}   ;

}



}

function Result()

{

var n = document.getElementsByTagName("input");

var s = "";

var j = 0;

         

for (i=0; i<n.length; i++){if (n[i].type=="radio" && n[i].checked==true){s+=""+n[i].value+"+";j++}}

if (j<=5){ShowSwitchTip('عليك الاجابة على جميع الاسئلة')}else{



s = s.substring(0,s.length-1);

s = eval(s);

if (s<=4 && s>=0){ShowSwitchTip(1);ShowSwitchTip('نسبة إلادمان '+s *100 /10 + "%"+'  إدمان قليل ')}

else if(s>=4 && s<=7){ShowSwitchTip(2);ShowSwitchTip('نسبة إلادمان '+s *100 /10 + "%"+' إدمان متوسط')}

else if(s>=5 && s<=10){ShowSwitchTip(3);ShowSwitchTip('نسبة إلادمان '+s *100 /10 + "%"+' إدمان عالي')}

}

}





</script>



</head>

<body>







<fieldset>

    <legend>قياس إدمان التدخين:</legend>

    <div id="Tip0">

        إختبر مدى إدمانك على التدخين <br />

        <ul>

            <li><span>متى تدخن اول سيجارة بعد الاستيقاظ مباشرة؟</span><br />

                <br />

                <input name="q1" type="radio" value="0" />

                بعد 60 دقيقة

                <br />

                <input name="q1" type="radio" value="2" />

                من 6 إلى 30 دقيقة <br />

                <input name="q1" type="radio" value="1" /> 

                من 31 إلى 60 دقيقة

                <br />

                <input name="q1" type="radio" value="3" /> 

                خلال خمس دقائق

                <br />

                <br />

            </li>

            <li><span>هل تجد صعوبة في الامتناع عن التدخين في الأماكن المحظورة؟</span><br />

                <br />

                <input name="q2" type="radio" value="1" /> 

                نعم

                <br />

                <input name="q2" type="radio" value="0" /> 

                لا<br />

                <br />

            </li>

            <li><span>ماهي السيجارة التي يصعب عليك الامتناع عنها؟</span><br />

                <br />

                <input name="q3" type="radio" value="0" /> 

                أي سيجارة <br />

                <input name="q3" type="radio" value="1" /> 

                أول سيجارة في الصباح

                <br />

                <br />

            </li>

            <li><span>كم سيجارة تدخن في اليوم؟</span><br />

                <input name="q4" type="radio" value="0" />

                1-10<br />

                <input name="q4" type="radio" value="1" />

                11-20<br />

                <input name="q4" type="radio" value="2" /> 

                21-30

                <br />

                <input name="q4" type="radio" value="3" /> 

                31+

                <br />

                <br />

            </li>

            <li><span>هل تدخن في الساعة الأولى من الصباح أكثر من بقية اليوم؟</span><br />

                <br />

                <input name="q5" type="radio" value="1" />

                نعم <br />

                <input name="q5" type="radio" value="0" />

                لا<br />

                <br />

            </li>

            <li><span>هل تدخن وأنت مريض جدا وملازم الفراش؟</span><br />

                <br />

                <input name="q6" type="radio" value="1" />

                نعم <br />

                <input name="q6" type="radio" value="0" />

                لا </li>

        </ul>

        <br />

        <br />

    </div>

    <div id="Tips" style="display:none;"></div>

    <div class="Tip" id="Tip1" style="display:none;"> 

        أنت قليل الادمان على النيكوتين يمكنك التخلص منه بسهولة, افعل ذلك قبل أن تصبح 

        مدمنا.

    </div>

    <div class="Tip" id="Tip2" style="display:none;"> 

        أنت مدمن نيكوتين, قد تتطور حالتك للأسوء و لكن فرص الاقلاع عنه موجودة, خذ 

        نصائح من الطبيب أو الصيدلي قبل أن تتطور حالتك.

    </div>

    <div class="Tip" id="Tip3" style="display:none;"> 

        أنت جداً مدمن على النيكوتين. جسمك يطلب النيكوتين بكثرة و هذا خطر

        عليك التغلب على هذه الرغبة, مراجعة الطبيب أو الصيدلي مهم للغاية لأخذ نصائح تقلل 

        من هذه الرغبة, لاتخاذ الاجراءات اللازمة و الا فأنت على حافة الهاوية.

    </div>

    <br />

    <p align="center">

        <input name="Button1" type="Button" onclick="Result()" value="النتيجة" /> 

        <input name="Button2" type="Button" onclick="ShowSwitchTip(0)" value="إعادة" /> 

    </p>

</fieldset>











 </body>

 </html>

الصراحه معقد :\ :funny:

الف شكر عموما

**ليوناردو دافينشي** · 26-12-2008

المشاركة الأصلية كتبت بواسطة شاعر_الظلام مشاهدة المشاركة

الصراحه معقد :\ :funny:

الف شكر عموما

نريد شئ منك يا شاعر الظلام ..

بصراحة انا متشوق لأرى أحد أعمالك

**v.i.p_99** · 31-12-2008

السلام عليكم
شروحات مميزة وفكيت عقدة الجافا سكربت عندي خخخخخ
وانا متابع بس الصراحة مشغول هايومين
بس حبيت منك تشرح مكتبة الاجاكس <<طرار ويتشرط هع
لاني شغال على موقع وابي اتعلم الاجاكس تضيف لمسات جميلة على الموقع

وبالتوفيق_

**M. Al-Dhafeeri** · 10-01-2009

حياكم الله.. سامحوني على البطئ بالردود

وراح اكون مشغول الأيام هذي بخصوص ال finals والدراسه

دعواتكم لي.. عشان نكمل بعدين ان شاء الله من الدرس الرابع ^^

موفقين..

الموضوع: ::تطبيقات:: على الدرس الأول والثاني والثالت للجافاسكريبت..

أدوات الموضوع

بحث في الموضوع

::تطبيقات:: على الدرس الأول والثاني والثالت للجافاسكريبت..

المواضيع المتشابهه

للمشاهدة .. حوار مفتوح مع مقاتلي القسام .. إنتاج الجزيرة ( الجزء الأول والثاني )

سؤالين الأول في الفلاش والثاني في ؟؟؟

اخي الفاضل سوالف ( أين الدروس الأول والثاني والثالث ) !!

ضوابط المشاركة