الفصل الحادي عشر يحتوي على
*** كائن 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>
**** ملاحظه ****
يقوم المثال بالتأكد من وجود "@" و "." اللذين يجب التاكد من وجودهما في اي عنوان بريد الكتروني وهناك العديد من العلميات للتاكد