دورة جافا سكربت - Javascript الدرس الرابع عشر ( والاخير )
محتوى الفصل الرابع عشر
*** تسلسل المواقع التي يتم انشاؤها للتجاره الالكترونيه في جافا سكربت
*** 1- صفحات المنتجات
*** 2- النموذج المختفي
*** 3- التفاصيل الخاصه بالعميل
*** 4- انشاء رقم الطلب
*** 5- تاكيد طلب العميل
*** 6- ارسال طلب العميل
*** نماذج من الامكانيات المتطوره في لغه جافا سكربت
تسلسل المواقع التي يتم انشاؤها للتجاره الالكترونيه في جافا سكربت
بالفصل هذا راح نناقش عمليه تطوير الطلبات عبر الانترنت والتي تبدا بصفحه يختار
منها المستخدم العناصر المحدده ويتم تقسيم الصفحه الى مقطعين المقطع الايسر
والذي يسمى menu (القائمه) والايمن الذي يسمى main (المقطع الرئيسي) حيث انه
يشغل حيزا اكبر ويظل اطار القائمه معروضا بشكل ثابت بينما يقوم الاطار الرئيسي
بعرض الصفحات المختلفه عندما يقوم المستخدم باستعراض او تفقد مابداخل الموقع
وهناك زر يتم اضافته في نهايه النموذج لنقل المستخدم الى مرحله اخرى خاصه
بعمليه الطلب
النموذج المختفي
تحتوي الصفحه الموجوده في الاطار الخاص بالقائمه على نموذج مختفي يطلق
عليه m (خاص بالذاكره) حيث يحتفظ بالبيانات المرتبه بينما يتم تغيير
الصفحات في الاطار الرئيسي وتتكون هذه الصفحه ايضا من العناصر الخاصه
بالمدخلات التي تعرض عناصر ادخال النموذج المسمى بـ "n" في صفحه المنتج
بالاضافه الى اسم العميل ورقم حساب ورقم طلب
كود:
<FORM NAME="m"METHOD="post"ACTION="mailto:NaWaL2040@HotMaiL.CoM"ENCTYPE="text/plain"> <INPUT TYPE="hidden"NAME="customer"VALUE=""> <INPUT TYPE="hidden"NAME="accountnum"VALUE=""> <INPUT TYPE="hidden"NAME="ordernum"VALUE=""> <INPUT TYPE="hidden"NAME="ball"VALUE=""> <INPUT TYPE="hidden"NAME="hoop"VALUE=""> <INPUT TYPE="hidden"NAME="cone"VALUE=""> </FORM>
تقوم سمه onclick الخاصه بالزر الموجود في صفحه المنتجات باستدعاء داله جافا سكربت
التي تقوم بادخال قيم في النموذج المختفي يحددها المستخدم في نموذج صفحه
المنتجات المسمى "n" ثم يقوم بتحميل صفحه جديده في الاطار الرئيسي
كود:
<SCRIPT TYPE="text/javascript">
<!--
function populate(){
parent.frames.menu.document.m.ball.value=document.n.ball.value;
parent.frames.menu.document.m.hoop.value=document.n.hoop.value;
parent.frames.menu.document.m.cone.value=document.n.cone.value;
}
window.location="customer.htm";
//-->
</SCRIPT>التفاصيل الخاصه بالعميل
تتطلب الصفحه اسم العميل ورقم الحساب حيث تتم اضافتهما مره اخرى الى نموذج
الذاكره "m" في اطار القائمه من خلال form
كود:
<SCRIPT TYPE="text/javascript">
<!--
function populate(){
parent.frames.menu.document.m.customer.value=document.n.customer.value;
parent.frames.menu.document.m.accountnum.value=document.n.accountnum.value;
}
window.location="confirm.htm";
//-->
</SCRIPT>انشاء رقم الطلب
تحتوي الصفحه النهائيه التي تظهر في عمليه الطلب على جميع التفاصيل الخاصه
بطلبات العميل حتى يقوم المستخدم بالتحقق منها قبل تقديم نموذج الطلب ويتم
كتابه هذه التفاصيل بواسطه جافا سكربت من خلال البيانات التي يتم استرجاعها
من النموذجالذي تم اخفاؤه في اجل صفحه اطار القائمه ومن الافضل ان تقوم بتحديد
رقم مميز لطلب العميل من اجل التعريف به وتقوم جافا سكربت في صفحه التاكيد
بانشاء هذا الرقم اولا ثم تقوم بتخزينه في النموذج الي تم اخفاؤه في اطار
القائمه ويمكن لكائن date ان يقوم بتقديم رقم الطلب باستخدام اجزاء من الوقت
الحالي والتي تعني الساعه والدقيقه والثانيه وفي هذا النص يتكون رقم الطلب
من الرقم النهائي في السنه متبوعا بالشهر والساعه والدقيقه والثانيه
كود:
<SCRIPT TYPE="text/javascript"> <!-- var d=new Date(); var yr=(d.getYear()).toString(); yr=yr.charAt(3); var mo=(d.getMonth()).toString(); var hr=(d.getHours()).toString(); var mn=(d.getMinutes()).toString(); var sc=(d.getSeconds()).toString(); var onum=yr+mo+hr+mn+sc; parent.frames.menu.document.m.ordernum.value=onum;
**** ملاحظه ****
من الممكن ان تشترك طلبات عمليين مختلفين في نفس الرقم وفي نفس الوقت
تاكيد طلب العميل
كود:
document.write("Order No."+praent.frames.menu.document.m.ordernum.value);
document.write("<BR>For"+praent.frames.menu.document.m.customer.value);
document.write("<BR>Account No."+praent.frames.menu.document.m.accountnum.value);
if(parent.frames.menu.document.m.ball.value!="")
document.write(parent.frames.menu.document.m.ball.value+"Balls @ $20.40 each<BR>");
if(parent.frames.menu.document.m.hoop.value!="")
document.write(parent.frames.menu.document.m.hoop.value+"Hoops @ $10.20 each<BR>");
if(parent.frames.menu.document.m.cone.value!="")
document.write(parent.frames.menu.document.m.cone.value+"Cones @ $10.20 each<BR>");ارسال طلب العميل
تشتمل الكتله النصيه الخاصه بجافا سكربت داخل الصفحه الاخيره في العمليه
الخاصه بالطلب على داله واحده لارسال النموذج الذي تم اخفاؤه في اطار
القائمه عندما يقوم المستخدم بالضغط على زر form
كود:
function sendorder(){
parent.frames.menu.document.m.submit();
}
//-->
</SCRIPT>ويتم ارسال النموذج الى نص برمجه CGI على وحده خدمه الويب ولكن
هذا النموذج يتم تقديمه بواسطه البريد الالكتروني لشرح المحتويات بشكل واضح
نماذج من الامكانيات المتطوره في لغه جافا سكربت
تنتظر لغه جافا سكربت مستقبل اكثر اشراقا مع المقدمه الخاصه بتنسيق
ملف SVG لعرض Scalable Vector Graphics (الصور الرسوميه التي تم انشاؤها
باستخدام متجهات ويمكن التحكم في حجمها) وتقوم تنسقيات الملف بتخزين المعلومات
الخاصه Vector Graphic في نموذج النص داخل مستند XML وتعتبر احجام SVG صغيره
بالمقارنه مع صور GIF و JPG كما انها تتمع بامكانيه تكبير الصوره دون الحاجه
الى زياده حجم الملف ويمكن التعامل مع العناصر الخاصه بالصور بواسطه جافا سكربت
لاضفاء نوع من الحركه والتأثيرات الفعاله ويحتوي برنامج Jasc الذي يقوم
بانشاء Paint Shop Pro على برنامج يسمى Trajectory Pro والذي يقوم بانشاء صور
رسوميه باستخدام المتجهات مثل SVG المتاحه في مواقع الويب على العنوان التالي
http://www.jasc.com
ويقوم برنامج Adobe Illustrator بتدعيم صور SVG بالاظافه الى انه يشتمل على
Interactivity Palette لانشاء صور SVG الفعاله بواسطه جافا سكربت ويقوم برنامج
Adobe بانشاء متصفح يتم تثبيته على الجهاز الشخصي لتدعيم تنسيق SVG والذي
يمكنك تثبيته بشكل تلقائي على ادوات التصفح دون الحاجه لامكانيه SVG ويمكنك
الوصول اليه عن طريق الموقغ
http://www.adobe.com/support/downloads/main.html
كل الامتدادات الخاصه بمتصفح DOM تؤكد الامكانيات المتطوره في SVG
ولمعرفه المزيد عن تنسيق الخاص بملف SVG تجده في الوقع التالي
http://wwww.w3c.com
انتهى الفصل الرابع عشر
تشاهدون في الحلقه القادمه عوده سالي من فرنسا لرؤيه والدها :D
اتمنى انه السلسله كانت مفيده
على فكره اللي يبي التطورات بلغه جافا سكربت
يدخل هالمواقع بتفيده اكثير بصراحه
http://www.geocities.com/SiliconValley/7116/
http://javascript.internet.com/books/
http://www.javascript-page.com/
http://www.javascriptworld.com/
http://www.javascriptcity.com/
http://www.javascriptsearch.com/
دورة جافا سكربت - Javascript الدرس الثالث عشر
اليوم نبدأ الفصل قبل الاخير الفصل الثالث عشر
وانتظروا الحلقه الاخيره من المسلسل باحداث دراميه غير متوقعه :D
الفصل الثالث عشر يحتوي على
*** بروتوكول جافا سكربت
*** السمات الخاصه بالطبقات
*** امكانيه رؤيه الطبقه
*** المحتويات الفعاله
*** عرض الشرائح
*** تغيير وضع الطبقات
*** تمرير الطبقات
*** الطبقات المنبثقه
*** القائمه النشطه
*** الخيارات الحديثه
بروتوكول جافا سكربت
يمكن تحديده لسمه herf في عنصر anchor الخاص بـ html بحيث تكون داله جافا سكربت
بمثابه هدف الارتباط التشعبي ويجب ان يكون اسم الداله متبوعا باسم بروتوكول لتحديد
كود النص البرمجي الذي يتم تنفيذه او ادراج الاجزاء الصغيره للكود في سطر بعد الاسم
مباشره ويحتوي المثال التالي على كل من الكود الذي يتألف من سطر واحد وكذلك استدعاء
الداله بحيث يتم تنفيذ كل منهما عندما يقوم المستخدم بالنقر على الرابط الخاص بهما
كود:
<SCRIPT TYPE="text/javascript">
<!--
function respond(){
alert("Script-block code");
}
//-->
</SCRIPT>
<A HERF="javascript:alert('In-line code')">NaWaL #1</A>
<A HERF="javascript:respond()">NaWaL #2</A>**** ملاحظه ****
يمكنك ايضا انشاء عنصر anchor لا يحمل اي دلاله في البعض باستخدام //:JavaScript وبذلك
سيمكنك استخدام ايه سمات اخرى مثل onmouseover
السمات الخاصه بالطبقات
تعتبر id و top و left و z-index و visibility و bgColor بمثابه السمات الست
الخاصه بالطبقات التي يمكن استخدامها في dhtml يمكن استخدام هذه السمات في
علامه الترميز <Layer> في ادوات التصفح الخاصه بالنت سكيب لتحديد مكونات الطبقه
وانشاء خصائص متعلقه بكائن layer ويتم كتابه الجزء العلوي للاطار الخاص بالطبقه
lyr في النص على هذا النحو document.lyr.top وهناك اختلافات كبيره في ادوات
التصفح الخاصه بمايكروسفت حيث انها تستخدم سمه style في علامه الترميز <div>
تحديد مكونات النص من خلال الاستعانه بالفاصلات المنقوطه ويتم كتابه الجزء العلوي
للاطار الخاص بالطبقه lyr على هذا النحو lyr.style.top ويقوم المثال التالي
بانشاء طبقه وتسجيل قيم خاصه بالجزء العلوي للطبقه والمكونات اليسرى
كود:
<SCRIPT TYPE="text/javascript">
<!--
if(document.layers){
document.write('<LAYER ID="lyr"top="15"left="170"width="50"height="50"z-index="10"bgColor="silver"visibility="visible">Layer</LAYER>');
document.write("Top="+document.lyr.top+"Left="+document.lyr.left);}
if(document.all){
document.write('<DIV ID="lyr"STYLE="position:absolute;top:15;left:170;width:50;height:50;z-index:10;background-color:silver;visibility:visible">Layer</DIV>');
document.write("Top="+document.all.lyr.style.top+"Left="+document.all.lyr.style.left);
}
//-->
</SCRIPT>**** ملاحظه ****
السمه الخاصه بلون الخلفيه في مستعرض الانترنت اكسبلور هي background-color
بدلا من bgColor
امكانيه رؤيه الطبقه
عندما تقوم بتحديد كيفيه انشاء طبقات باستخدام جافا سكربت في كل من انترنت اكسبلور
والنت سكيب يمكنك استخدام جافا سكربت في يمكنك الاستعانه بالامكانيات الخاصه بلغه
جافا سكربت لتغيير قيم السمات الخاصه بكل منهما بطريقه ديناميكيه على سبيل المثال
اذا قمت بتغيير القيمه الخاصه بسمه visibility الى hidde فان هذا سيؤدي الى اخفاء
الطبقه من الشكل وعلى النقيض من ذلك يمكن اظهار الطبقه التي تم اخفاؤها من خلال
تغيير هذه القيمه الى visible ويقوم النص البرمجي التالي بتبديل امكانيه رؤيه
طبقه واحده باستخدام معالج الحدث onmouseover و onmouseset ومن الممكن ان يقوم
النص ايضا بتبديل العديد من الطبقات بسهوله لمزيد من التأثير
كود:
<SCRIPT TYPE="text/javascript">
<!--
if(document.layers){
document.write('<LAYER ID="lyr"top="15"left="100"width="140"height="140"z-index="10"visibility="hidden"><IMG SRC="NaWaL.jpg"WIDTH="140"HEIGHT="140"BORDER="0"></LAYER>');
}
if(document.all){
document.write('<DIV ID="lyr"STYLE="position:absolute;top:15;left:170;width:50;height:50;z-index:10;visibility:hidden"><IMG SRC="NaWaL.jpg"WIDTH="140"HEIGHT="140"BORDER="0"></DIV>');
}
function showNaWaL(){
if(document.layers)document.lyr.visibility="visible";
if(document.all)lyr.style.visibility="visible";
}
function hideNaWaL(){
if(document.layers)document.lyr.visibility="hidden";
if(document.all)lyr.style.visibility="hidden";
}
//-->
</SCRIPT>ويبدو الكود الخاص برابط html على النحو التالي
كود:
<A HERF="javascript://"ONMOUSEOVER="showNaWaL()"ONMOUSEOUT="hideNaWaL()">NaWaL Link</A>
المحتويات الفعاله
يمكن ان تستخدم لغه جافا سكربت في كتابه المحتويات على الطبقه التي قمت
بانشائها دون تأثير على المحتويات الموجوده في اي مكان على الصفحه وسيظل
مكان الطبقه كما هو ولكن ارتفاعها سيزيد بشكل تلقائي اذا كان المحتوى لا
يتناسب مع حجم الطبقه الحالي ويمكن للنص ان يلتف بشكل تلقائي على حد
الطبقه وبالتالي لن يتم تقسيم الكلمات ويقوم المثال الذي يعرض هذه الامكانيه
بانشاء طبقه ثم يقوم بكتابه النص الذي يتم ادخاله عن طريق المستخدم في مربع
النص بشكل فعال عند الضغط على زر input لاحظ التركيب الخاص بادوات التصفح
نت سكيب حيث يحتوي طبقه المستند نفسها على خاصيه document
كود:
<SCRIPT TYPE="text/javascript">
<!--
if(document.layers){
document.write('<LAYER ID="lyr"top="90"left="10"width="200"height="20"z-index="10"bgColor="silver"></LAYER>');
}
if(document.all){
document.write('<DIV ID="lyr"STYLE="position:absolute;top:90;left:10;width:200;height:20;z-index:10;background-color:silver"></DIV>');
}
function write_entry(){
var str=document.n.txt.value;
if(document.all)lyr.innerHTML=str;
if(document.layers){
document.lyr.document.open();
document.lyr.document.write(str);
document.lyr.document.close();}
}
//-->
</SCRIPT>ويبدو الكود الخاص برابط html على النحو التالي
كود:
Please enter some text below: <FORM NAME="n"> <INPUT TYPE="text"VALUE=""NAME="txt"> <INPUT TYPE="button"VALUE="Write Entry"ONCLICK="write_entry()"> </FORM>
عرض الشرائح
يمكن لجافا سكربت ان تقوم بتدوير الصور لعرض الشرائح بشكل تلقائي والتي تقوم
بتحديث الصوره بعد فتره يتم تحديدها من قبل وفي هذا النص يقوم برنامج التحميل
السابق بتنزيل كل الصور على الذاكره حتى يتمكن عرضها ويتم تحديد زمن التدوير بالملي
ثانيه من خلال القيمه التي تم تعيينها للمتغير المسمى بـ pause ويعتبر المتغير المسمى
بـ n بمثابه عداد تعين قيم متزايده فيه من خلال داله rotate ويمكن استخدامه لعرض
الصوره في رقم الفهرس الذي تم تحديده داخل مصفوفه imgs[] يجب ان تحتوي كل الصور
على نفس الابعاد وان تكون ملفاتها صغيره الحجم لتجنب اي تأخير في عمليه التزيل
كود:
<SCRIPT TYPE="text/javascript">
<!--
var pause=3000;
var n=0;
var imgs=new Array("butterfly.gif","globe.gif","fish.gif",clock.gif");
var preload=new Array();
for(var i=1;i<imgs.length;i++){
preload[i]=new Image();
preload[i].src=imgs[i];
}
function rotate(){
document.images.pic.src=imgs[n];
(n==(imgs.length-1))?n=0:n++;
setTimeout(''rotate()'',pause);
}
window.onload=rotate;
//-->
</SCRIPT>ويقوم كود html المستخدم في عرض الشرائح الخاصه بجافا سكربت بتحديد
اسم pic للصوره الاصليه حتى يمكن للنص البرمجي ان يشير الى كائن image
على هذا النحو التالي document.images.pic
كود:
Enjoy the show<BR> <IMG NAME="pic"SRC="bfly.gif"WIDTH="72"HEIGHT="72"ALT=""VSPACE="5"HSPACE="10">
**** ملاحظه ****
يجب التـأكد من ان جميع الصور تبدو بالحجم الفعلي الذي يسمح بعرضها
حتى لا يكون المتصفح بحاجه الى تغيير الحجم عند العرض
تغيير وضع الطبقات
يمكن تعديل الاحداثي الايسر للطبقه في جافا سكربت من اجل تغيير الطبقه على
امتداد محور X ويقوم المثال التالي بانشاء طبقه تحتوي على صوره لمركب شراعي
خارج الحد الايسر للاطار ثم تتولى داله timer تنفيذ عمليه ابحار المركب على الشاشه
عندما تختفي صوره المركب من الحافه اليمنى للاطار فان جافا سكربت تقوم بجعل
المركب الشراعي يتجه الى الناحيه المعاكسه وبالتالي فان النص البرمجي يقوم
بتغيير اتجاه المركب من اليمين الى اليسار وعندما تختفي صوره المركب من الحافه
اليسرى للاطار فانها ستعود الى وضعها الاصلي بحيث يعاود المركب الابحار من الناحيه
اليمنى وهكذا ويتحكم المتغير goright في اتجاه السير او الابحار ويتم ضبط المتغير
على قيمه true وينعكس اتجاه المركب عند وصوله الى اقصى اليمين او اقصى اليسار
ويمكن رؤيه داله setsail في شطرين بحيث يقوم في الشطر الاول بتشغيل الكود في
متصفح انترنت اكسبلور بينما يقوم الشطر الثاني بتشغيل الكود الخاص بالنت سكيب
ويعتبر هذا بمثابه توضيح جيد لكود جافا سكربت الذي يقوم بتحقيق نفس التأثير
في كل متصفح ولكنه يتم تجاهله من قبل ادوات التصفح الاخرى
كود:
<SCRIPT TYPE="text/javascript">
<!--
var preload=new Image();preload.src="sail_1.gif";var goright=true;
if(document.all)document.write("<div id='boat'style='position:absolute;top:20;left:-75;width:70;height:85'><img name='boat_image'src='sail_r.gif'alt=''></div>");
if(document.layers)document.write("<layer id='boat'top='20'left='-75'width='70'height='85'><img name='boat_image'src='sail_r.gif'alt=''></layer>");
function setsail(){
if(document.all) { if(goright)
boat.style.left=(parseInt(boat.style.left)+1);
else boat.style.left=(parseInt(boat.style.left)-1);
if(parseInt(boat.style.left)>=(document.body.clientWidth+5)){
goright=false;
document.images.boat_image.src="sail_1.gif";}
if(parseInt(boat.style.left)<=-75){
goright=true;
document.boat_image.src="sail_r.gif";}
}
if(document.layers) { if(goright)
document.boat.left+=1
else document.boat.left-=1
if(document.boat.left>=(window.innerWidth+5)) { goright=false;
document.boat_image.src="sail_1.gif";}
if(document.boat.left<=-75){
goright=true;
document.boat_image.src="sail_r.gif";}
}
window.setTimeout("setsail()",50);
}
setsail();
//-->
</SCRIPT>**** ملاحظه ****
استخدم animated gifts للحصول على نتائج مثيره ويجب ان تكون القيم الخاصه بوحدات
البكسل متبوعه بـ Px في النهايه داخل متصفح انترنت اكسبلور ولذلك فان تقنيه
Parse Int تكون مطلوبه لاستخراج الجزء الصحيح للتعامل معه
تمرير الطبقات
تم تعديل الخاصيه left في المثال السابق لسمه layer ولكن هذا المثال يقوم
بالتعامل مع خاصيه top الخاصه بالطبقه بهدف تمرير هذا الجزء الى اعلى او اسفل
على الاحداثي Y يقوم النص اولا بانشاء طبقه محدده خاصه بالمتصفح تحتوي على
صوره لطائره هيلكوبتر ويقوم كود html باضافه ارتباطات تشعبيه تقوم باستدعاء
دوال جافا سكربت ولكن هذه الارتباطات لا تحتوي على العنوان المطلوب وعندما يقوم
المستخدم بوضع المؤشر على الرابط التشعبي الذي يطلق عليه Soar فان داله timer
تقوم بزياده القيمه في خاصيه top وبالتالي الطبقه تتحرك الى اعلى الاطار عند
وضع المؤشر على الرابط التشعبي المسمى بـ Sink والذي يحمل التأثير العكسي
فان الطبقه تتحرك اسفل الاطار وفي كل حاله يتم الغاء داله timer عندما يتحرك
المؤشر بعيدا عن الرابط التشعبي وكذلك عندما تتوقف حركه الطبقه
كود:
<SCRIPT TYPE="text/javascript">
<!--
var timer;
var &@#&@#&@#&@#&@#&@#&@#='<IMG SRC="copter.gif"WIDTH="100"HEIGHT="50"ALT="">';
if(document.layers){
document.write('<LAYER ID="lyr"top="100"left="150">'+&@#&@#&@#&@#&@#&@#&@#+'</LAYER>');}
if(document.all){
document.write('<DIV ID="lyr"STYLE="position:absolute;top:100;left:150">'+&@#&@#&@#&@#&@#&@#&@#+'</DIV>');}
function soar(){
if(document.all)lyr.style.top=parseInt(lyr.style.top)-1;
if(document.layers)document.lyr.top-=1;
timer=setTimeout("soar()",50);
}
function sink(){
if(document.all)lyr.style.top=parseInt(lyr.style.top)+1;
if(document.layers)document.lyr.top+=1;
timer=setTimeout("sink()",50);
}
function stop(){
clearTimeout(timer);
}
//-->
</SCRIPT>
<A HERF="javascript://"ONMOUSEOVER="soar()"ONMOUSEOUT="stop()">Soar</A>
<A HERF="javascript://"ONMOUSEOVER="sink()"ONMOUSEOUT="stop()">Sink</A>**** ملاحظه ****
عند وضع المشر على Soar فان الرابط سيؤدي الى تحريك الصوره الى اعلى الرابط
تعتبر تقنيه parseInt مطلوبه للحصول على اعلى قيمه للطبقه بواسطه متصفح انترنت
اكسبلور لتعديل سرعه التمرير قم بتغيير داله timer من 50
الطبقات المنبثقه
يقوم هذا المثال باستكمال امكانيه رؤيه واخفاء الطبقات المذكوره في المثال
السابق في هذا الفصل من خلال انشاء طبقات متعدده ومحدده خاصه بالمتصفح والتي يتم
فيها التبديل بين امكانيه والرؤيه والاخفاء من خلال تخطيطات الصوره وعندما يتم وضع
المؤشر على الرابط التشعبي فان داله جافا سكربت ستقوم بعرض الطبقه المناسبه ولكنها
ستقوم باخفاء هذه الطبقه عندما يتحرك المؤشر بعيدا عن الرابط
كود:
<SCRIPT TYPE="text/javascript">
<!--
var bod='<IMG SRC="harsal.gif"WIDTH="190"HEIGHT="100"USEMAP="#harsal"BORDER="0">';
var sal='<IMG SRC="hisal.gif"WIDTH="100"HEIGHT="40">';
var har='<IMG SRC="hihar.gif"WIDTH="100"HEIGHT="40">';
if(document.layers){
document.write('<LAYER ID="lyr"top="80"left="50">'+bod+'</LAYER><LAYER ID="sal"top="30"left="130"z-index="10"visibility="hidden">'+sal+'</LAYER><LAYER ID="har"top="30"left="55"z-index="20"visibility="hidden">'+har+'</LAYER>');}
if(document.all){
document.write('<DIV ID="lyr"STYLE="position:absolute;top:70;left:30">'+bod+'</DIV><DIV ID="sal"STYLE="position:absolute;top:20;left:110;z-index:10;visibility:hidden">'+sal+'</DIV><DIV ID="har"STYLE="position:absolute;top:20;left:35;z-index:10;visibility:hidden">'+har+'</DIV>');}
function talk(n){
if(document.all){
if(n==0)document.all.har.style.visibility="visible";
if(n==1)document.all.sal.style.visibility="visible";}
if(document.layers){
if(n==0)document.har.visibility="visible";
if(n==1)document.sal.visibility="visible";}
}
function hush(n){
if(document.all){
if(n==0)document.all.har.style.visibility="hidden";
if(n==1)document.all.sal.style.visibility="hidden";}
if(document.layers){
if(n==0)document.har.visibility="hidden";
if(n==1)document.sal.visibility="hidden";}
}
//-->
</SCRIPT>وفيما يلي كود html الخاص بتخطيط الصوره المستخدم في كود جافا سكربت
كود:
<MAP NAME="harsal"> <AREA SHAPE=RECT COORDS="0,0,60,100"HERF="javascript://"ALT=""ONMOUSEOVER="talk(0)"ONMOUSEOUT="hush(0)"> <AREA SHAPE=RECT COORDS="130,0,190,100"HERF="javascript://"ALT=""ONMOUSEOVER="talk(1)"ONMOUSEOUT="hush(1)"> </MAP>
القائمه النشطه
يستخدم هذا المثال الاحداثيات الخاصه بالماوس من اجل تغيير امكانيه الرؤيه الخاصه
بطبقات القائمه بالاضافه الى انه يستخدم انماط style sheet لتحديد المكونات الخاصه
بطبقه الشريط الرئيسي والطبقات الخاصه بالقوائم
كود:
<SCRIPT TYPE="text/javascript">
<!--
if(document.layers)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=track;
divref=(document.all)?"":"document.";
stlref=(document.all)?"style.":"";
function track(e){
var x=(document.all)?event.x:e.pageX;
var y=(document.all)?event.y:e.pageY;
if(x<1||x>65||y<53||y>123)
eval(divref+"b."+stlref+"visibility='hidden'");
if(x<80||x>145||y<53||y>123)
eval(divref+"c."+stlref+"visibility='hidden'");
if(x<160||x>225||y<53||y>123)
eval(divref+"d."+stlref+"visibility='hidden'");
}
function reveal(menu){
eval(divref+menu+"."+stlref+"visibility='visible'");
}
//-->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
.bar{position:absolute;left:0;top:50;color:black;width:800;height:20px;background:silver;font-family:verdana;font-size:10pt;border-color:white;border-width:1;
}
.menu{position:absolute;width:65;height:50;background:silver;top:71px;visibility:hidden;font-family:verdana;font-size:10pt;border-color:white;border-width:1px;}
//-->
</STYLE>وكود الـ HTML الخاص بهذا المثال على النحو التالي
كود:
<DIV ID="a"CLASS="bar">
<A HERF="javascript://"ONMOUSEOVER="reveal('b')">
Menu 1</A>|
<A HERF="javascript://"ONMOUSEOVER="reveal('c')">
Menu 2</A> |
<A HERF="javascript://"ONMOUSEOVER="reveal('d')">
Menu 3</A> |
</DIV>
<DIV ID="b"CLASS="menu"STYLE="left:0"LEFT="0">
<A HERF="target1.htm">Item 1</A>
<A HERF="target2.htm">Item 2</A>
<A HERF="target3.htm">Item 3</A></DIV>
<DIV ID="c"CLASS="menu"STYLE="left:80"LEFT="80">
<A HERF="target4.htm">Item 1</A>
<A HERF="target5.htm">Item 2</A>
<A HERF="target6.htm">Item 3</A></DIV>
<DIV ID="d"CLASS="menu"STYLE="left:160"LEFT="160">
<A HERF="target7.htm">Item 1</A>
<A HERF="target8.htm">Item 2</A>
<A HERF="target9.htm">Item 3</A></DIV>الخيارات الحديثه
في هذا المثال تقوم جافا سكربت بتغيير قائمه الخيارات النشطه والقيم
الخاصه بها طبقا لزر الاختيار الذي يتم تحديده
كود:
<SCRIPT TYPE="text/javascript">
<!--
function setcities(){
if(document.n.rad[0].checked)jap();
if(document.n.rad[1].checked)usa();
}
function jap(){
with(document.n.s.options[0]){
selected=true;text="Select Ctiy...";value="";}
with(document.n.s.options[1]){
text="Kyoto";value="kyoto";}
with(document.n.s.options[2]){
text="Osaka";value="osaka";}
with(document.n.s.options[3]){
text="Tokyo";value="tokyo";}
showvalue();
}
function usa(){
with(document.n.s.options[0]){
selected=true;text="Select Ctiy...";value="";}
with(document.n.s.options[1]){
text="New York";value="new york";}
with(document.n.s.options[2]){
text="Los Angeles";value="los angeles";}
with(document.n.s.options[3]){
text="Washington";value="washington";}
showvalue();
}
function showvalue(){
document.n.txt.value=document.n.s.option[document.n.s.selectedIndex].value;}
//-->
</SCRIPT>
<FORM NAME="n">
Selected Value:<BR>
<INPUT TYPE="text"NAME="txt"VALUE=""SIZE="16"><BR>
<INPUT TYPE="radio"NAME="rad"ONCLICK"setcities()">Japan
<INPUT TYPE="radio"NAME="rad"ONCLICK"setcities()">USA
<BR>
<SELECT NAME="s"ONCHANGE="showvalue()">
<OPTION VALUE=""SELECTED>Select Country...</OPTION>
<OPTION VALUE=""></OPTION>
<OPTION VALUE=""></OPTION>
<OPTION VALUE=""></OPTION>
</SELECT>
</FORM>دورة جافا سكربت - Javascript الدرس الثاني عشر
الفصل الثاني عشر
محتوى الفصل
*** الاحداث الخاصه بعمليات النقر على الماوس (حدث click)
*** تحديد موضع المؤشر باستخدام حدث MouseMove
*** التعرف على حدث MouseOver
*** التعرف على حدث MouseOut
*** اهميه حدثي Mouse Cown و MouseUp
*** تحديد ازرار الماوس التي تم ضغطها
*** التعرف على حدثى Key Up و Key Down
*** اكواد المفاتيح
*** حدث Load
*** حدث Unload
*** حدث Focus
*** حدث Blur
*** التعريف على حدث Change
*** التعريف على حدث Reset
*** حدث Submit
*** حدث Abort
*** حدث Resize
الاحداث الخاصه بعمليات النقر على الماوس (حدث click)
يعتبر حدث click اكثر الاحداث التفاعليه مع الكمبيوتر ويظهر عندما يقوم المستخدم
بالضغط على الزر الايمن للماوس عندما يكون مؤشر الماوس على زر في مستند ويب ويتم
تحديد معالج الحدث onclick في علامه الترميز <input> الخاصه بـ html والمتعلقه
بالزر مع سمه onclick الخاصه بـ html وتعتبر القيمه التي تم تحديدها لسمه html
بمثابه استدعاء للداله التي ستقوم بتنفيذ العبارات البرمجيه في لغه جافا سكربت
ويقوم المثال التالي باستدعاء داله جافا سكربت عندما يقوم المستخدم بالنقر على
الزر وادخال قيمه الوسيط لاستخدامه في الداله التي تم استدعاؤها
كود:
<SCRIPT TYPE="text/javascript">
<!--
function doclick(str){
document.n.txt.value=str;
}
//-->
</SCRIPT>
<FORM NAME="n">
<INPUT TYPE="text"NAME="txt"VALUE="">
<INPUT TYPE="button"VALUE="Do Click"ONCLICK="doclick('JavaScript in easy steps')">
</FORM>تحديد موضع المؤشر باستخدام حدث MouseMove
من الافضل ان تعرف مكان المؤشر عند استخدام جافا سكربت في عمليات كتابه النص
البرمجي باستخدام dhtml وعندما يقوم المستخدم بتحريك المؤشر فانه يتم تشغيل
حدث MouseMove وهذه العمليه يتم توجيهها بواسطه جافا سكربت من اجل استخدامها
مع معالج الحدث onmousemove يوضح المثال التالي طريقه مفيده في تحديد احداثي
الشاشه x-y عند تطوير نصوص البرمجه بلغه dhtml وعندما يتم توجيه MouseMove
ان معالج الحدث onmousemove يقوم بعرض احداثي x-y بشكل ديناميكي
كود:
<SCRIPT TYPE="text/javascript">
<!--
if(document.layers)
document.captureEvents(Event.MOUSEMOVE);
if(document.all||document.layers)
document.onmousemove=track;
function track(e){
var x=(document.all)?event.x:e.pageX;
var y=(document.all)?event.y:e.pageY;
document.n.txt.value="X="+x+"Y="+y;
}
//-->
</SCRIPT>
<FORM NAME="n">
<INPUT TYPE="text"NAME="txt"VALUE="">
<INPUT TYPE="text"NAME"txt">
</FORM>التعرف على حدث MouseOver
يتم تشغيل حدث MouseOver عندما يضع المستخدم المؤشر على ارتباط تشعبي على صفحة الويب
ويمكن لعلامات الترميز <a> و <area> ان تقوم بتحديد معالج الحدث بالنسبة لحدث MouseOver
من خلال تحديد استدعاء دالة في جافا سكربت لسمة onmouseover الخاصة بعلامات الترميز
ويقوم معالج الحدث بابدال الصور من خلال النقر على الصور الحالية لعرض الصورة التالية
ولكن من الممكن تنفيذ اية عبارة برمجية ويقوم المثال التالي بتحديد قيمة عبارة سلسلة
الحرفية في المدخلات الخاصة بمربع النص عند وضع المؤشر على الصورة
كود:
<SCRIPT TYPE="text/javascript">
<!--
function domouseover(){
document.n.txt.value="Mouse is Over the link";
}
//-->
</SCRIPT>
<A HREF="target.html"ONMOUSEOVER="domouseover()">
<IMG NAME="star"SRC="star.gif"WIDTH="34"HEIGHT="34"ALT=""></A>
<FORM NAME="n">
<INPUT TYPE="text"NAME"txt">
</FORM>التعرف على حدث MouseOut
يتم تشغيل حدث MouseOut عندما يحرك المستخدم المؤشر بعيد عن الرابط التشعبي على
صفحة الويب ويمكن لعلامات الترميز <a> و <area> ان تقوم بتحديد معالج الحدث بالنسبة
لحدث MouseOut من خلال استدعاء دالة في جافا سكربت بالنسبة لسمة onmouseout
الخاصة بعلامات الترميز ويقوم معالج الحدث بعرض الصور بشكل متتال حتى تعود الصور الى
وضعهاالاصلي الذي كانت علية ويعتبر المثال التالي تكملة للمثال السابق من خلال اضافة
معالج حدث onmouseout لتغيير قيمة مربع النص عندما يتحرك مؤشر الماوس بعيد عن الرابط
كود:
<SCRIPT TYPE="text/javascript">
<!--
function mousehandler(n){
with(document.n.txt){
if(n==1)value="Mouse is Over the link";
if(n==0)value="Mouse is Out of link area";}
}
//-->
</SCRIPT>
<A HREF="target.html"ONMOUSEOVER="mousehandler(1)"ONMOUSEOUT="mousehandler(0)">
<IMG NAME="star"SRC="star.gif"WIDTH="34"HEIGHT="34"ALT=""></A>
<FORM NAME="n">
<INPUT TYPE="text"NAME"txt">
</FORM>اهمية حدثي Mouse Down و Mouseup
يتم تشغيل حدث MouseDown عندما يقوم المستخدم بالضغط على زر الماوس كما يتم تشغيل
حدث MouseUp عند اطلاق زر الماوس ويستخدم هذين الحدثين معا ولذلك فان النقرة الواحد
على الماوس ستؤدي الى استخدام معالجي حدث في هذة الحالة ويقوم هذا المثال بابدال الصورة
وتغيير قيمة مربع النص عند الضغط على زر الماوس ولكنة يعيد كلاهما الى وضعهما الاصلي
عند اطلاق زر الماوس
كود:
<SCRIPT TYPE="text/javascript">
<!--
function light(n){
if(n==1){
document.images.bulb.src="bulbon.gif";
document.n.txt.value="Mouse button is Down";}
if(n==0){
document.images.bulb.src="bulboff.gif";
document.n.txt.value="Mouse button is Up";}
}
//-->
</SCRIPT>
<IMG NAME="bulb"SRC="bulboff.gif"WIDTH="72"HEIGHT="72"ALT="">
<INPUT TYPE="text"NAME"txt"SIZE="18">
<INPUT TYPE="button"VALUE="light Switch"ONMOUSEDOWN="light(1)"ONMOUSEUP="light(0)">تحديد ازرار الماوس التي تم ضغطها
يمكن لجافا سكربت ان تقوم بحديد زر الماوس الذي تم ضغطة من خلال فحص الخصائص المتعلقة
بحدث MouseDown ويقوم زر الماوس الايسر بتخزين قيمة تقدر بواحد صحيح في خاصية event.button
الموجودة في انترنت اكسبلور ولكن هذه الخاصية تسمى بـ e.which في نت سكيب
كود:
<SCRIPT TYPE="text/javascript">
<!--
var msg="Right-Click Context Menu Is Disabled";
if(navigator.appName=="Netscape")
window.captureEvents(Event.MOUSEDOWN);
function stopmenu(e){
if(navigator.appName=="Netscape"&&(e.which==2||e.which==3)){
alert(msg);return false;}
if(navigator.appName=="Microsoft Internet Explorer"&&(event.button==2||event.button==3)){
alert(msg);return false;}
}
window.onmousedown=stopmenu;
document.onmousedown=stopmenu;
//-->
</SCRIPT>حدثا KeyDown و KeyUp
يتم تشغيل حدث KeyDown عندما يقوم المستخدم بالضغط على زر Keyboard Key وكذلك
يتم تشغيل حدث KeyUp عند اطلاق هذا الزر ويستخدم هذين الحدثين معا ولذلك فان الضغط على
مفتاح واحد سيقوم باستخدام معالجي حدث ويقوم هذا المثال باستبدال الصورة وتغيير قيمة
مربع النص عند الضغط على اي زر كما انة يقوم باعادة كليهما الى الوضع الاصلي
عند اطلاق زر الماوس
كود:
<SCRIPT TYPE="text/javascript">
<!--
if(navigator.appName=="Netscape")
window.captureEvents(Event.KEYDOWN,Event.KEYUP);
function isdown(){
document.images.bulb.src="bulbon.gif";
document.n.txt.value="Key is Down"; }
function isup(){
document.images.bulb.src="bulboff.gif";
document.n.txt.value="Key is Up"; }
document.onkeydown=isdown;document.onkeyup=isup;
//-->
</SCRIPT>
<IMG NAME="bulb"SRC="bulboff.gif"WIDTH="72"HEIGHT="72"ALT="">
<FORM NAME="n">
<INPUT TYPE="text"NAME="txt"SIZE="18"></FORM>اكواد المفاتيح
يمكن استخدام حدث KeyDown ايضا من اجل الحصول على كود الحرف بالمفتاح الذي تم
الضغط عليه والذي هو عباره عن رقم موحد خاص بمفتاح الحرف ويقوم المثال بالبحث
عن اكواد الحرفين Y و N اذا كانا مكتوبين بحروف صغيره وكبيره ثم يقوم بتقسيم
النص البرمجي لتعيين قيمه لمربع النص الخاص بالنموذج
كود:
<SCRIPT TYPE="text/javascript">
<!--
If(document.layers)
window.captureEvents(Event.KEYDOWN);
function showkey(e){
var msg="";
var fwd="Y key pressed";
var hlt="N key pressed";
if(navigator.appName=="Netscape"){
if(e.which==89||e.which==121)msg=fwd;
if(e.which==78||e.which==110)msg=hlt;}
}
if(navigator.appName=="Microsoft Internet Explorer"){
if(event.KeyCode==89||event.KeyCode==121)msg=fwd;
if(event.KeyCode==78||event.KeyCode==110)msg=hlt;
if(msg!="")document.n.txt.value=msg;
}
window.onkeydown=showkey;
document.onkeydown=showkey;
//-->
</SCRIPT>**** ملاحظه ****
Y=89 و N=78 و y=121 و n=110
حدث load
لا يتم تشغيل حدث load حتى يتم تحميل عناصر html على صفحه الويب ولذلك فان معالج
الحدث onload سيتم تشغيله بعد توافر جميع العناصر في الصفحه واذا كانت وظيفه
داله جافا سكربت الموجوده في راس المستند هي تعديل العناصر الخاصه بمضمون المستند
فان العناصر يجب ان يكون قد تم تحمليها لتجنب اي خطأ في النص البرمجي ويقوم معالج
الحدث onload استدعاء داله جافا سكربت التي غالبا ما تسمى بـ init والتي تقوم
بتخصيص مجموعه من القيم لتشغيل الصفحه ويقوم هذا المثال بتغيير الوان صفحه
html وتحديد قيمه للمتغير يتم تعيينها في مربع النص
كود:
<SCRIPT TYPE="text/javascript">
<!--
function init(){
document.bgColor="black";
document.fgColor="white";
var str="Page Loaded";
document.n.txt.value=str;
}
window.onload=init;
//-->
</SCRIPT>
<BODY BGCOLOR="white"TEXT="black">
<H2> Welcome to 3asfh.com...</H>
<FORM NAME="n">
<INPUT NAME="txt"TYPE="text"VALUE="">
</FORM>**** ملاحظه ****
من الممكن ان تحل ادوات معالجه الحدث التي تم تحديدها لسمه onload الخاصه
بعلامه الترميز <tag> محل ادوات المعالجه المدرجه في النص البرمجي
حدث Unload
يتم تشغيل الحدث عندما يقوم المتصفح بالغاء تحميل المستند من الاطار او المقطع
وهذا يحدث عاده عندما ينتقل المستخدم الى موقع جديد ومن الممكن ان يقوم معالج
الحدث onunload باستدعاء داله جافا سكربت بهدف تشغيل قبل الغاء تحميل المستند
ويستخدم معالج حدث onunload في حفظ الحاله الاخيره للبيانات على هذه الصفحه في
ملف البيانات او بواسطه تقديمها لوحده الخدمه كما انه يستخدم ايضا في فتح الاطارات
المنبثقه الجديده التي تحتوي على مزيد من المعلومات التي قد ينتفع بها المستخدم
ويوضح المثال التالي استخدام المعالج حدث onunload لفتح اطار جديد منبثق
كود:
<SCRIPT TYPE="text/javascript">
<!--
function finally(){
var win=window.open("finally.htm","","top=50,left=50,width=297,height=90");
}
window.onunload=finally;
//-->
</SCRIPT>حدث Focus
يتم تشغيل الحدث عندما يقوم المستخدم بالنقر على عنصر في نموذج او على اطار
تحديد وجهة البيانات الخاصه بالمتصفح ويمكن لمعالج الحدث onfocus ان يقوم
باستدعاء داله جافا سكربت عند استقبال البيانات وفي المثال التالي يتم السلسله
الحرفيه في مربع النص عندما يقوم المستخدم بالنقر على مربع النص
كود:
<FORM NAME="n"> <INPUT NAME="txt"TYPE="text"VALUE="Enter data here"ONFOCUS="this.value"=""></FORM>
يمكن الاستفاده من تقنيه focus الخاصه بعنصر النموذج في تحريك المؤشر الى
المكان المطلوب الخاص بالتدخلات وفي هذا المثال اذا كانت القيمه التي تم
ادخالها عن طريق المستدعي ليست عباره عن رقم فانه يتم تحديد سلسله حرفيه
خاليه في مربع النص كما ان المؤشر يعود الى مربع النص
كود:
<SCRIPT TYPE="text/javascript">
<!--
function examine(val){
if(isNaN(val)){
document.n.txt.value="";document.n.txt.focus();}
}
//-->
</SCRIPT>
<FORM NAME="n">
<INPUT NAME="txt"TYPE="text"VALUE=""ONCLICK="examine(this.value)">
</FORM>**** ملاحظه ****
لاحظ كيف تستخدم الكلمه الرئيسيه this في جافا سكربت في نقل رابط الكائن
الخاص بـ document.txt
حدث Blur
يتم تشغيل الحدث عندما يتحول التركيز في المتصفح بعيد عن عنصر في نموذج او
اطار معين ويقوم معالج الحدث onblur باستدعاء جافا سكربت وفي المثال التالي
يقوم المستخدم بادخال بعض البيانات في مربع النص الذي تركه منذ قليل
كود:
<SCRIPT TYPE="text/javascript">
<!--
function isentry(val){
if(val==""){
alert("Please enter data"); document.n.txt.focus();}
}
//-->
</SCRIPT>
<FORM NAME="n">
<INPUT NAME="txt"TYPE="text"VALUE=""ONBLUR="isentry(this.value)"></FORM>كما يمكنك الاستعانه بتقنيه blur الخاصه بعنصر في النموذج في منع ادخال ايه بيانات
في المربعات النصيه المصممه للقراءه فقط ويقوم هذا المثال بالغاء التحديد الخاص
بالبيانات النصيه اذا حاول المستخدم ان يقوم بادخال ايه بيانات
كود:
<INPUT TYPE="text"VALUE="Read"ONFOCUS="blur(this)">
**** ملاحظه ****
تعمل تقنيه window.blur على تصغير الاطار
حدث Change
يتم تشغيل الحدث في حاله تغيير القيمه الخاصه بالبيانات النصيه او عند قيام
المستخدم بتحديد عنصر في قائمه الخيارات يمكن لمعالج الحدث onchange ان يقوم
باستدعاء جافا سكربت لتنفيذ بعض الاكواد عندما يتم تشغيل حدث change ويقوم المثال
التالي بضبط الخيار الاولي الذي تم تحديده على اللون الاخضر ثم يقوم بتعيين
معالج الحدث الذي يعرض القيمه المحدده في مربع النص عند تغيير التحديد
كود:
<SCRIPT TYPE="text/javascript">
<!--
function init(){
document.n.s.options[1].selected=true;
document.n.s.onchange=showselected;
}
function showselected(){
document.n.txt.value=document.n.s.options[document.n.s.selectedIndex].value;
}
window.onload=init;
//-->
</SCRIPT>
<FORM NAME="n">
<INPUT NAME="txt"VALUE="">
<SELECT NAME="s">
<OPTION VALUE="red">Red
<OPTION VALUE="green">Green
<OPTION VALUE="blue">Blue
</SELECT>
</FORM>حدث Reset
يتم تشغيل الحدث عندما يقوم المستخدم بالضغط على زر reset الخاص بالنموذج
او عندما تقوم داله جافا سكربت بتنفيذ تقنيه form.reset وقد يقوم معالج الحدث
onerset باستدعاء داله جافا سكربت عندما يتم حدث reset وفي هذا المثال يتم
تحديد معالج الحدث لسمه onreset الخاصه بـ html في علامه الترميز <form>
ولذلك سيتم تغيير قيمه زر الاختيار كما سيتم عرض القيمه الخاصه بالسمه في مربع
النص التابع للنموذج الثاني عندما يتم اعاده ضبط النموذج الاول
كود:
<SCRIPT TYPE="text/javascript">
<!--
function showvalue(){
document.n1.r[0].value="Salmon";
document.n2.txt.value=document.n1.r[0].value;
}
//-->
</SCRIPT>
<FORM NAME="n1"ONRESET="showvalue()">
<INPUT TYPE="radio"NAME="r"VALUE="Red"CHECKED>Red
<INPUT TYPE="radio"NAME="r"VALUE="Green">Green
<INPUT TYPE="radio"NAME="r"VALUE="Blue">Blue
<INPUT TYPE="reset"VALUE="Reset">
</FORM>
<FORM NAME="n2">
<INPUT TYPE="text"NAME="txt"VALUE="">
</FORM>حدث Submit
يتم تشغيل الحدث عندما يقوم المستخدم بالضغط على زر submit في النموذج وعند
استدعاء معالج الحدث onsubmit لداله واحده لتاكيد صحه النموذج قبل التقديم
واذا قام معالج الحدث بعرض قيمه false فلن يتم ارسال بيانات النموذج يوضح
المثال عمليه تحقق من صحه عنوان بريد الكتروني ويقوم بعرض رساله تحذير
للمستخدم اذا ثبت خطأ هذا العنوان
كود:
<SCRIPT TYPE="text/javascript">
<!--
function validation(){
if(document.n.email.value.indexOf("@")==-1){
alert("Email address is absent or incorrect");
return false;}
}
//-->
</SCRIPT>
<FORM NAME="n"METHOD="post"ACTION="mailto:NaWaL2040@HotMail.Com"ENCTYPE="text/plain"ONSUBMIT="return validation()">Enter your email address:
<INPUT NAME="email"TYPE="text"VALUE="">
<INPUT TYPE="submit"VALUE="Submit">
</FORM>حدث Abort
يتم تشغيل الحدث عندما يقوم المستخدم بالغاء تنزيل الصوره غالبا من خلال النقر
على زر stop الموجود في شريط الادوات الخاص بمتصفح الويب وقد يقوم معالج الحدث
onabort باستدعاء داله جافا سكربت في حاله الغاء تنزيل الصوره وقد يتم تحديد
معالج الحدث لسمه onabort في علامه الترميز <img> لخاصه بلغه html وفي المثال
التالي يقوم معالج الحدث بانشاء رساله تحذير تعمل على تاكيد الغاء عمليه التنزيل
كود:
<SCRIPT TYPE="text/javascript">
<!--
function abortmsg(){
alert("Image Download Aborted");
}
//-->
</SCRIPT>
<IMG SRC="bigpic.jpg"WIDTH="1024"HEIGHT="768"ALT=""ONABORT="abortmsg()">حدث Resize
يتم تشغيل الحدث عندما يقوم المستخدم باعاده ضبط اطار المتصفح وبالتالي
يقوم معالج الحدث onresize بتنفيذ الكود حتى يجعل الصفحه مناسبه لحجم الاطار
الجديد ويمكن الاستفاده من ذلك في تغيير وضع محتويات صفحه dhtml كما هو موضح
في المثال التالي الذي سيقوم بانشاء طبقه في وضع المنتصف والتي سيتم تغييرها
في حاله حجم الاطار مره اخرى
كود:
<SCRIPT TYPE="text/javascript">
<!--
if(document.layers)document.write("<LAYER ID='lyr'TOP='20'BGCOLOR='silver'WIDTH='100'HEIGHT='50'Z-INDEX='10'>Layer</LAYER>");
if(document.all)document.write("<DIV ID='lyr'STYLE='position:absolute;top:20px;width:100px;height:50px;background-color:silver;z-index:10'>Layer</DIV>");
function fixpos(){
var innerwidth=(document.layers)?self.innerWidth:
document.body.clientWidth;
var fixleft=(innerwidth/2)-50;
(document.layers)?document.lyr.left=fixleft:lyr.style.left=fixleft;
}
fixpos()
window.onsize=fixpos;
//-->
</SCRIPT>**** ملاحظه ****
تقوم داله fixpos() بتقسيم عرض الاطار الى اثنين لانشاء مركز الاطار الافقي
ثم يتم طرح عرض الطبقه لتحديد الوضع الايسر للطبقه
دورة جافا سكربت - Javascript الدرس الحادي عشر
الفصل الحادي عشر يحتوي على
*** كائن 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> **** ملاحظه ****
يقوم المثال بالتأكد من وجود "@" و "." اللذين يجب التاكد من وجودهما في اي عنوان بريد الكتروني وهناك العديد من العلميات للتاكد