دورة جافا سكربت - 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 الدرس الرابع عشر ( والاخير )

بحث هذه المدونة الإلكترونية

اقسام المدونة

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

من انا ؟