مدونة علم البرمجة والحاسوب
من حقك ان تتعلم اكثر

دورة جافا سكربت - Javascript الدرس الحادي عشر

Labels:

الفصل الحادي عشر يحتوي على

*** كائن Form
*** عناصر النموذج
*** تغيير القيم
*** التبديل بين قيمتين
*** المربعات النصيه
*** المربعات الخاصه بكلمه المرور
*** ازرار الاختيار
*** تحديد زر الاختيار
*** مربعات الاختيار
*** تحديد مربع الاختيار
*** القوائم الخاصه بالخيارات
*** خاصيه selected Index
*** مساحه النص
*** تغيير القيم في كائن Form
*** ارسال النموذج
*** تعديل النموذج
*** التاكد من صحه عنوان البريد الالكتروني


كائن النموذج

يحتوي كائن window.document.forms[] على مصفوفة خاصة بجميع النماذج في

مستند html مرتبة بالشكل الذي تظهر فية في كود html على سبيل المثال يقوم

كائن window.document.forms[0] يشير الى النموذج الاولي في كود html الخاص بصفحة الويب

واذا تم تحديد قيمة لسمة name الخاصة بعنصر <form> فيمكن ان نشير الى النموذج من خلال

الاسم لذلك فان النموذج الذي يطلق علية n يمكن ان تشير اليه كـ document.n ويمكن الوصول

الى جميع السمات الاخرى الموجودة داخل علامات الترميز <form> من خلال تعيينها كخصائص

للكائن ويوضح المثال التالي كيف يمكن لجافا سكربت ان تشير الى الخصائص المتعلق

بكائن <form> في html



كود PHP:
<FORM NAME="n"METHOD="post"
ACTION="mailto:NaWaL2040@hotmail.com"ENCTYPE="3asfh/NaNo">

<SCRIPT TYPE="text/javascript">

<!--

var msg="Name: "+document.n.name;
msg+="\nMethod: "+document.n.method;
msg+="\nAction: "+document.n.action;
msg+="\nEnctype: "+document.n.encoding:
alert(msg);
//-->
</SCRIPT> 

عناصر النموذج

يحتوي كائن window.document.forms[].elements[]على مصفوفة خاصة بكل العناصر التى يمكن

ان توجد داخل نموذج مرتبة با لشكل الذي تظهر بة في كود html على سبيل المثال بالنسبة

للنموذج الذي يطلق علية n يقوم كائن document.elements[0] با لتعامل مع العنصر

الاول الذي يظهر في هذا النموذج واذا تم تحديد قيمة لسمة nameالخاصة با لعنصر

فان العنصر يمكن الوصول الية وتحديدة من خلال الاسم وعلية فان اي عنصر يطلق

علية btn1 في نموذج n يمكن الوصول الية من خلال هذا التركيب document.n.btn1 ويمكن

الوصول الى السمات الاخرى من خلال تحديدها كخصائص للعنصر كما هو موضح في المثال التالي


كود PHP:
<INPUT TYPE="button"VALUE="Click Me" ONCLICK="run()">

<SCRIPT TYPE="text/javascript">

<!--

function run(){alert("Hi");}

var msg="Element Type: "+document.n.btn1.type;
msg +="Element Value: "+document.n.btn1.value;
msg +="Element Onclick: "+document.n.btn1.onclick;
document.write(msg);
//-->
</SCRIPT> 

تغيير القيم

يمكن تغيير القيمة التي تم تحديدها في كود html من خلال جافا سكربت ولذلك فان

الزر سيقوم بوظيفة مختلفة في المثال التالي تقوم سمة onclick في html بتحديد ان

الدالة first() سيتم استدعاؤها عند الضغط على الزر وتقوم الدالة first() بتحديد سلسلة

حرفية كقيمة للمتغير ثم تقوم بتعيين دالة جديدة للتعامل مع الاحداث يطلق عليها second()

لسمة onclick الخاصة بالزر وعند الضغط على الزر فانة سيعمل على استدعاء

دالة second() وتنفيذ العبارة البرمجيةالتي تحتويها


كود PHP:
<FORM NAME="n">

<INPUT TYPE="button"NAME="btn1"VALUE="Click Me"ONCLICK="first()">

</FORM>

<SCRIPT TYPE="text/javascript">

<!--

var msg
function first(){
msg="This message was left by the first function";
document.n.btn1.onclick=second;

}

function second(){
alert("Hi,I'm the second function\n"+msg);

}
//-->
</SCRIPT> 

التبديل بين قيمتين

من الافضل ان تقوم بتغيير الاسم المعروض على الزر من خلال سمة value اذا كان هذا الزر

يقوم بوظيفتين وفي المثال التالي يقوم زر btn1 في النموذج الذي يسمى بـ n باستدعاء

دالة stopgo() من اجل تشغيل وايقاف العدادويقوم العداد بزيادة القيمة الصحيحة داخل

المتغير في فاصل زمني مدتة 1-Second وعرض العدد في شريط حالة داخل الاطار يقوم عنوان

الزر بقراءة Start ولكنة يقوم بتغييرها الى Stop اذا كانت دالة countالخاصة بالمؤقت تعمل


كود PHP:
var running=false;

var num=-1;

function count(){

if(running){
num++;
window.status="Seconds elapsed: " +num;

var tim=setTimeout("count()",1000);}

else{
num=-1;
clearTimeout(tim);}

}

function.stopgo(){
running=!running;
count();
document.n.btn1.value=(running)?"Stop":"Start";

} 

المربعات النصية

يتم تغيير الكود المعروض في نص html بسهولة في جافا سكربت من خلال تحديد سلسلة حرفية

جديدة لخاصية القيمة التابعة لعنصر النموذج كما يتم تحديد مربعات النص في خط واحد ثابت

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

واللون ويقوم المثال التالى بعرض سلسلة حرفية في مربع النص ويقوم باضافة خصائص الاسلوب في

ادوات التصفح الحديثة الخاصة بانترنت اكسبلور


كود PHP:
<FORM NAME="n">

<INPUT TYPE="text"NAME="txt1"SIZE="25"></FORM>
document.n.txt1.value="JavaScript in easy setps";

if(document.all){
document.n.txt1.style.fontFamily="comic sans ms";document.n.txt1.style.fontSize="16pt";document.n.txt1.style.color="white";
document.n.txt1.style.backgroundColor="black";

} 

المربعات الخاصة بكلمات المرور

تعتبر مربعات كلمات المرور بمثابة مربع نص يقوم بعرض علامات نجمية (*) بدلا من الحروف الفعلية

ويقوم المثال التالي بتغيير السلسلة الحرفية الحالية بحيث تكون احرفها صغيرة ثم يقوم بتعيين قيمة

للمتغير واذا كانت قيمة المتغير تتوافق مع كلمة المرور الصحيحة فان التصفح سيقوم بتحميل الصفحة

الاولى الخاصة بموقع الويب ولكنة سيعرض مربع التحذير اذاكانت قيمة المتغير غير متوافقة0


كود PHP:
<FORM NAME="n">

<INPUT TYPE="password" NAME="pwd1" SIZE="25">

<INPUT TYPE="button" NAME="btn1" VALUE="Enter" ONCLICK="validate()">

</FORM>

<SCRIPT TYPE="text/javascript">

<!--

function validate(){

var entry=document.n.pwd1.value.toLowerCase();

if(entry=="admin")window.location="page1.htm";

else{
alert("Password incorrect-Please retry...");
document.n.pwd1.value="";}

}
//-->
</SCRIPT> 

ازرار الاختيار

يجب ان تحتوي مجموعة ازرار الاختيار التي سيتم تحديد اي منها على نفس الاسم المحدد

لسمة name في علامة الترميز <input> وفي تشكيل الكائنات DOM داخل المتصفح تقوم مجموعة

ازرار الاختيار بانشاء كائن document.form مع الاسم المحدد ويحتوي هذا الكائن على مصفوفة

خاصة بازرار الاختيار في المجموعة بحيث تكون مرتبة بنفس الوضع الذي تظهر فية في

كود html ويمكن للغة جافا سكربت ان تقوم بتحديد كل زر باستخدام اسم المصفوفة ورقم الفهرس

وفي المثال التالي تقوم جافا سكربت باختبار زر الاختيار الثاني ثم تقوم

بعرض كل من قيم الاختيار في مربع النص


كود PHP:
<FORM NAME="n">

<INPUT TYPE="radio"NAME="rad1"VALUE="1">

<INPUT TYPE="radio"NAME="rad1"VALUE="2">

<INPUT TYPE="text"NAME="txt1"SIZE="35">

</FORM>

<SCRIPT TYPE="text/javascript">

<!--
document.n.rad1[1].checked=true;

var msg="1st Radio Value: "+document.n.rad1[0].value; msg+="2nd Radio Value: "+document.n.rad1[1].value; document.n.txt1.value=msg;
//-->
</SCRIPT> 

تحديد زر الاختيار

تكمن اهمية زر الاختيار في كونة محدد ام لا ويمكن التاكد من ذلك من خلال خاصية تحديد زر الاختيار

الذي يقوم بعرض قيمة trues البوولينية اذا تم تحديد زر الاختيار او عرض قيمة false اذا

لم يتم تحديد الزر يمكن للغة جافا سكربت ان تقوم بعمل دورة تكرار داخل عناصر المصفوفة

الخاصة بزر الاختيار من اجل التاكد من تحديد الزر ثم تقوم باستخدام القيمة المحددة الخاصة

بزر الاختيار الذي تم تحديدة ويوضح المثال التالي كيف يمكن لجافا سكربت ان تجد زر الاختيار

الذي تم تحديده ثم تستخدم القيمة الخاصة بة


كود PHP:
<FORM NAME="n">

<INPUT TYPE="radio"NAME="rad1"VALUE="white">White
<INPUT TYPE="radio"NAME="rad1"VALUE="silver">Silver<INPUT TYPE="radio"NAME="rad1"VALUE="black">Black<BR>

<INPUT TYPE="button"VALUE="Poll Radios"ONCLICK="poll()">

</FORM>

<SCRIPT TYPE="text/javascript">

<!--

function poll(){

for(var i=0;i<document.n.rad1.length;i++){

if(document.n.rad1[i].checked)
document.bgColor=document.n.rad1[i].value;}

}
//-->
</SCRIPT> 

مربع الاختيار

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

اختيار على حدة من خلال استخدام سمة name الخاصة بها في كود html ويحتوي كل مربع

اختيار يقوم بانشاء كائن document.form بالاسم الخاص بة مثل زر الاختيار على خاصية معينة

يتم تحديدها وفي المثال التالي تقوم جافا سكربت باعداد الخاصية

التي تم تحديدها لثلاثة مربعات اختيار عندما يقوم المستخدم بالضغط على الزر


كود PHP:
<FORM NAME="n">

<INPUT TYPE="ckeckbox"NAME="chk1"VALUE="details">Send Details<BR>

<INPUT TYPE="ckeckbox"NAME="chk2"VALUE="samples">Send Samples<BR>

<INPUT TYPE="ckeckbox"NAME="chk3"VALUE="catalog">Send Catalogue<BR>

<INPUT TYPE="button"VALUE="Send Everything"ONCLICK="checkall()"><FORM>

<SCRIPT TYPE="text/javascript">

<!--

function checkall(){ with(document.n){
chk1.checked=true;
chk2.checked=true;
chk3.checked=true;}

}
</SCRIPT> 

تحديد مربعات الاختيار

تعتبر الخاصية التي تم تحديدها لكائن checkbox هامة وتقوم جافا سكربت بالبحث

عن كائنات checkboxes التي تم تحديدها ثم تستخدم القيم الخاصة بها ويقوم المثال التالي

باختبار الخاصية التي تم تحديدها في مربعات الاختيار

تعيين قيم مربعات الاختيار التي تم تحديدها لعرض قيمة المتغير في مربع حوار التحذير


كود PHP:
<FORM NAME="n">

<INPUT NAME="chk1"TYPE"ckeckbox"VALUE="Red">Red<BR>

<INPUT NAME="chk2"TYPE"ckeckbox"VALUE="Green">Green<BR>

<INPUT NAME="chk3"TYPE"ckeckbox"VALUE="Blue">Blue<BR>

<INPUT TYPE="button"VALUE="Poll"ONCLICK="poll()"></FORM>

<SCRIPT TYPE="text/javascript">

<!--

function poll(){

var res="Colour choice is";

for(var i=1;i<4;i++){

if(eval("document.n.chk"+i+"checked"))
res+=eval("document.n.chk"+i+".value+''");}
alert(res);}
//-->
</SCRIPT> 

**** ملاحظه ****

قم ياستخدام eval() لربط الاسماء وارقام في كائن form


القوائم الخاصة بالخيارات

تحتوي العناصر الموجودة في قائمة الخيارات على خاصية text بالنسبة لاي عنوان معروض يتكون

من سلسلة حرفية وكذلك قيمة مرتبطة باسم العنصر المحدد عندما يتم تحديد هذا العنصر

ويتم ارسال المجموعة الثنائية الاسم / القيمة الى وحدة الخدمة عند تقديم النموذج ويتم

تخزين عناصر القائمة في مصفوفة options[]الخاصة بالكائن ويمكن كتابة كل من عنوان

النص والقيمة الخاصة بة بلغة جافا سكربت كما هو موضح في المثال


كود PHP:
<FORM NAME="n">

<SELECT NAME="S"><OPTION><OPTION><OPTION></SELECT>

<INPUT TYPE="button"VALUE="Set Options"ONCLICK="set()">

</FORM>

<SCRIPT TYPE="text/javascript">

<!--

function SET(){
with(document.n.s){
option[0].text="One";options[0].value="1";
option[1].text="Two";options[1].value="2";
option[2].text="Three";options[2].value="3";}

}
//-->
</SCRIPT> 

خاصية Selected Index

تحتوي مصفوفة option[] على خاصية تسمى بـ selectedIndex والتي تحتوي على رقم الفهرس

الخاص بالعنصر التي تم تحديدة في الوقت الحالي ويمكن لجافا سكربت ان تقوم باسترجاع

قيمة التحديدالحالي الخاص بالمؤثرات الديناميكية ويقدم

المثال التالي قيمة التحديد الحالي بالنسبة الخاص بالعرض في مربع النص


كود PHP:
<FORM NAME="n">

<SELECT NAME="s">

<OPTION VALUE="apple">Apple
<OPTION VALUE="plum">Plum
<OPTION VALUE="orange">Orange
</SELECT>

<INPUT TYPE="button"VALUE="Show Choice"ONCLICK="show()"><BR>

<INPUT TYPE="text"NAME="txt1">

</FORM>

<SCRIPT TYPE="text/javascript">

<!--

function show(){

var pick=document.n.selectedIndex;
document.n.txt1.value=document.n.s.options[pick].value;}
//-->
</SCRIPT> 

مساحة النص

يعتبر عنصر مساحة النص بمثابة مربع نص كبير يقوم بالتصفح بحيث يمكن قراءة وكتابة القيمة

الخاصة بة بواسطة جافا سكربت ويقوم المثال التالي بكتابة المحتوى في مساحة النص

عن طريق تحديد سلسلة حرفية للقيمةالخاصة بة عندما يقوم المستند بعملية التحميل ويتم

تعيين الدالة الخاصة بتحديد السلسلة الحرفية كمعالج لحدث onload في المستند بواسطة

النص البرمجي يجب ان تتوخىالحذر عند استخدام هذا الاتجاة اذا

كان النص البرمجي موجودا في جزء <head> الخاص بالمستند لان سمة onload

المدرجة في علامة الترميز <body> داخل html قد تقوم بحذفة والكتابة علية


كود PHP:
<SCRIPT TYPE="text/javascript">

<!--

function dotext(){
document.n.txtarea1.value="Welcom\nwww.3asfh.com/vb....";

}
window.onload=dotext;
//-->
</SCRIPT>
<FORM NAME="n">

<TEXTAREA NAME="txtarea1"ROWS="3"COLS="30">

</TEXTAREA>

</FORM> 

**** ملاحظه ****

من الافضل ان تقوم باستدعاء دوال onload باستخدام سمه onload الخاصه بعنصر <body> في html


تغيير القيم في كائن Form

تقوم تقنية reset()الخاصة بكائن Form بتغيير جميع القيم داخل النموذج وتحديث المدخلات

لتعود الى وضعهاالاصلي كما لو قام المستخدم بالضغط على زر reset توخى الحذر في استخدام

تقنية reset لتجنب قيام المستخدم بادخال البيانات بصفة مستمرة ويفضل في النص البرمجي

ان تقوم بتاكيد استدعاء المستخدم لحدث onreset قبل تغيير اعدادات النموذج مرة اخرى

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

الرابط الذي يتيح للصورة فرصة تغيير الاعدادات في كائن form عند النقر

عليها بزر reset يمكن وضع الاجزاء الصغيرة الخاصة بجافا سكربت في

مستند html بهذة الطريقة دون الحاجة الى كتلة نصية


كود PHP:
<FORM NAME="n">

<INPUT TYPE="checkbox"VALUE="fun">Fun JavaScript
<INPUT TYPE="checkbox"VALUE="great">Great JavaScript
<INPUT TYPE="checkbox"VALUE="easy">Easy JavaScript
</FORM>

<A HREF="javascript:document.n.reset()">

<IMG SRC="NaNo.jpg"WIDTH="205"HEIGHT="31"ALT=""></A> 

**** ملاحظه ****

قم باضافه سمه BORDER="O" لعلامه ترميز <Img> -image لازاله حد الرابط


ارسال النموذج

عندما يتم تقديم النموذج الى وحدة الخدمة فانة يتم ارسال القيم التي تم تحديدها

لسمات القيمة والاسم الخاصة بكل عنصر للنموذج كمجموعة ثنائية اسم / قيمة ويمكن

استخدام تقنية submit لكائن form لارسال النموذج الى وحدة الخدمة بنفس الطريقة كما لو

قام المستخدم بالنقر على زر submit في html وكما هو موضح في المثال المذكور في المثال

السابق فان هذة التقنية يمكن استخدامها لاستبدال الزر القياسي بصورة رسومية تقوم

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

بروتوكول JavaScript: حتى يجعل دالة جافا سكربت بمثابة الرابط الذي

يقدم النموذج عندما يقوم المستخدم بالنقر على الرابط


كود PHP:
<FORM NAME="n"METHOD="post"ACTION="mailto:NaWaL2040@hotmail.com"ENCTYPE="text/plain">


<INPUT TYPE="checkbox"VALUE="fun">Fun JavaScript
<INPUT TYPE="checkbox"VALUE="great">Great JavaScript
<INPUT TYPE="checkbox"VALUE="easy">Easy JavaScript
</FORM>

<A HREF="javascript:document.n.submit()">

<IMG SRC="NaWaL.jpg"WIDTH="205"HEIGHT="31"ALT=""></A> 

تعديل النموذج

يمكن استخدام خاصية onsubmit لكائن form في استدعاء دالة في جافا سكربت عندما يقوم

المستخدم بالنقر على زر submit وسيتم تنفيذ هذة الدالة ثم يتم ارسال النموذج

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

الثنائية الاسم / القيمة بشكل افضل بواسطة النص البرمجي CGI وفي المثال التالي اذا

كان النص لايحتوي على شيء فان القيمة ستكون صفرا حيث يتم تحديدها بواسطة دالة onsubmit


كود PHP:
<SCRIPT TYPE="text/javascript">

<!--

function addzeros(){with(document.n){

if(ln1.value=="")ln1.value="0";if(ln2.value=="")ln2.value="0";if(ln3.value=="")ln3.value="0";}

}
//-->
</SCRIPT>
<FORM NAME="n"METHOD="post"ACTION="mailto:NaWaL2040@hotmail.com"ENCTYPE="text/plain"ONSUBMIT="addzeros()">

Line 1 Quantity:<INPUT NAME="ln1"TYPE="text"VALUE="">

Line 2 Quantity:<INPUT NAME="ln2"TYPE="text"VALUE="">

Line 3 Quantity:<INPUT NAME="ln3"TYPE="text"VALUE="">

<INPUT TYPE="submit"VALUE="submit">

</FORM> 

**** ملاحظه ****

يتم حذف علامات الترميز <script> من هذا المثال لتوفير المسافه


التاكد من صحة عنوان البريد الاليكتروني

يمكن التحقق من صحة النموذج قبل تقديمة وفي المثال التالي تقوم جافا سكربت بفحص تنسيق

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

بتقديم النموذج فقط بعد التاكد من صحتة


كود PHP:
<SCRIPT TYPE="text/javascript">

<!--

function send_if_valid(){if(document.n.email.value.indexOf("@")==-1)
fail("No'@'in address");

else{

var adr=document.n.email.value.split("@");

if(adr[0].length<1)fail("User address absent");

else if(adr[1].indexOf(".")==-1)fail("No dot");

else if(adr[1].length<3)fail("Domaim incorrect");

else document.n.submit();}

}

function fail(msg){
alert("Email Address Error:\n"+msg);}
//-->
</SCRIPT>
<FORM NAME="n"METHOD="post"ACTION="mailto:NaWaL2040@hotmail.com">Enter Email Address...<BR>

<INPUT NAME="email"TYPE="text"VALUE=""><INPUT TYPE="button"VALUE="Submit Form"ONCLICK="send_if_vaild()">

</FORM> 

**** ملاحظه ****

يقوم المثال بالتأكد من وجود "‌‌‌‌‌@" و "." اللذين يجب التاكد من وجودهما في اي عنوان بريد الكتروني وهناك العديد من العلميات للتاكد
Posted by Sahel Mahadeen

أرشيف المدونة الإلكترونية

من انا ؟