دروس في برمجة المواقع (جافا سكريبت)

منتدى بلدية مناعة :: الكومبيوتر والأنترنيت :: تقنيات متقدمة

دروس في برمجة المواقع (جافا سكريبت)الخميس ديسمبر 25, 2008 9:47 am

ماهي الجافا سكريبتس وكيف تعمل ؟

الجافا وبكل بساطه لغة من لغات البرمجة ان صح التعبير .. مهامها الأساسيه بث الحياة في صفحات الويب المكتوبة بلغة ال HTML وتعطيك امكانية التحكم بكل جزء في صفحة الوب، من ال forms الى الوصلات بل وحتى بعض الوظائف الخارجيه .
الجافا سكريبتس صممت من قبل Netscape لإضافة بعض الحيوية الى صفحات الويب، طبعا لايفوتني أن أذكر أن ال Java في الاصل صممت من قبل شركة Sun وهي المالك الأساسي للغة، المهم، من الأمثلة عليها مانراه كثيرا في بعض الصفحات، من اظهار التوقيت، وتحريك الصفحات الى أعلى والى أسفل، وكذا التحكم بال Forms .

الجافا سكريبتس تخلتف عن أغلب لغات البرمجة الأخرى في كونها سهلة التحكم والتبويب، حتى للأشخاص الذين لم يكتبوا بأي لغة برمجة أخرى في حياتهم كلها .
بكل بساطة،الجافا سكريبتس هي الهواء لصفحتك .

حسنا، أعلم أنه وبعد تلك السطور في الأعلى، توارد الى ذهنك العديد من الأسئله ،، فلنحاول معا الإجابه على بعضها :
1- لماذا أتعلم الجافا سكريبتس ؟

أول مايخطر في بالي إجابة على هذا السؤال هو : القوة .. الحريه .. الإبداع . لأنه بمجرد الكتابه بال HTML فأنت مقيد بأن تضل صفحتك كما هي ثابته لاتتغير الا بتغيير الكود ، وهذا غير مقبول بتاتا في عالم التكنولوجيا الجديده .وبواسطة الجافا سكريبتس يمكنك حتى الباس صفحتك حلة جديدة من ألوان الخلفيه .. وأنواع الخطوط .. وحتى الصور .. حسب التوقيت اليومي للزائر وبدون أي تدخل منك !
وشيء مهم أيضا .. الجافا سكريبتس تعتبر من أبسط اللغات ! الكل يستطيع تعلمها .. نعم الكل .. .ألا توافقني الرأي ، أن كتابة الكود الخاص بك مباشرة أفضل ألف مرة من البحث عنه في الشبكه .
وربما لاتجد مبتغاك بسهولة ! أو قد لاتجدة إطلاقا .

2 - مالمقصود بشفرة البرنامج أو السورس كود ؟

الكود أو السورس كود : هو مجوعة الأوامر التي تكتب مجتمعة أو متفرقة ليعمل البرنامج بصورتة الرئيسيه ، أي البنية التحتية للبرنامج ، وتكون دائما مكتوبه كتابة ويمكن عرضها بأي برنامج تحرير نصوص عادي مثل ال NOTEBAD .
3- ماهو الفرق بين الجافا .. والجافا سكريبتس ؟

الفرق بينهما كبير . نعم فالجافا أقوي بكثير من الجافا سكريبتس ، وأكثر تعقيدا ، وولأسف ، أصعب في التحكم . وهي تأتي في نفس مستوى لغتي السي ، والسي بلس بلس .
بالإضافه الى أنك تحتاج الى برامج خاصة للكتابة بلغة الجافا ، بينما الجافا سكريبتس أبسط بكثير ! يمكنك بمجرد فتح أي برنام تحرير نصوص مثل ال NOTEBAD كتابة السكريبت كاملا !!! صدق أولا تصدق . لن تحتاج الى شي آخر سوى المتصفح لترى النتيجه .
4- هل بإمكان الكود الذي كتبته بالجافا سكريبت العمل على متصفحي النتسكيب والإكسبلورر بدون أية مشاكل ؟

للأسف ، الإجابة بلا !
الجافا سكريبتس أصلا مصمم من قبل شركه نتسكيب . اذا نتسكيب أكثر دعما له . من جهة أخرى هناك فروقات أساسية في تعامل هذين المتصفحين مع الجافا ، وبعضها يطال حتى الأوامر الأساسيه .
سنتطرق لاحقا الى كيفية تجاوز هذه العقبة ، أما الآن فدعني أخبرك بأن أفضل طريقة للتأكد من عمل السكريبت هو تجربته على كلا المتصفحين . طبعا ستدهشك كثرة المواقع التي فشلت في الوصول بصفحاتها الى أفضل شكل ودعم لكلا المتصفحين ، وهذا مايفسر السطر الذي نراه كثيرا :
لأفضل عرض ، ينصح بإستخدام المتصفح الفلاني .

طبعا ولأن الأغلبية تستخدم الإكسبلورر ، فسيكون التركيز علية في الشرح والأمثله ، ولن أنسى التطرق الى كيفية معرفة نوع المتصفح الخاص بالمستخدم
أساسيات اللغة

وكما أي لغة أخرى ، الكتابة بالجافا سكريبتس تخضع لبعض الشروط التي لامفر من تعلمها ، وإتباعها ، وإلا فإن البرامج وبكل بساطة ، لن تعمل .
أولاُ : Case sensitivity

الجافا سكريبتس هي case sensitive language ، أي أن الكلمة المكتوبه بالحروف اللاتينيه الصغيره تختلف عن نفس الكلمة مكتوبة بالأحرف الكبيره

مثلا :

Naser غير naser غير naSer ، وهكذا ..
ثانيا : الفاصلة المنقوطه Semicolons

يفترض الى درجة الإلزام أن ينتهي كل سطر بفاصلة منقوطة :

var x=3;

ثالثاً : المساحات الخالية :

الجافا سكريبتس كما ال HTML تتجاهل المساحات الخالية ، والسطور الجديدة ، مثلا :

var x=4 هي نفسها var x = 4

مع ملاحظة أنه لابد من ترك مسافة خالية على الأقل بعد أي مصطلح من مصطلحات الجافا !
رابعا : الأقواس

ستقابلك أثناء الكتابة بالجافا أقواس عدة ، على إختلاف أنواعها ، يجب عليك بعد فتح أي قوس من هذا الأقواس غلقة ، تتابعيا ، القوس الأخير فالذي يليه

لكي لايخلق لك ذلك أية مشاكل أثناء تنفيذ البرنامج ، ولاننسى أي مشكلة معناها توقف البرنامج عن العمل .

إطلع على المثال التالي لفهم ذلك :

If (t[3] != 11) {

t[4]=2;

}

خامسا : الكلمات المحجوزة

أو مصطلحات الجافا المحجوزة ، وهي أوامر الجافا التي لايمكنك نسب أي متغيرات إليها على الإطلاق ، كما في كل لغات البرمجة المعروفة .

رد: دروس في برمجة المواقع (جافا سكريبت)الخميس ديسمبر 25, 2008 9:49 am

التعامل مع الأحداث

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

موضوعنا اليوم هام جدا لكل مطور عاهد نفسه على الارتقاء بأعماله و الاندفاع إلى التميز والتطوير . ومن هنا نريد أن نتكلم اكثر تحديد لتطوير تطبيقات تعمل على الإنترنت .
فكثير نسمع انه من الأسباب وراء نجاح أي موقع هو وجود طاب ديناميكي متجدد للموقع . فالمقصود من هذه العبارة ليس استخدامنا لغة معينه تطفئ على الموقع طابع من الديناميكا . ولكننا قصدنا التفاعل بين المستخدم والموقع . بغض النظر إلى اللغة المستخدمة أو المفضلة لد المصمم فهيا وسيلة لمحاكاة المستخدم داخل الموقع . هنا يشعر المستخدم بالتفاعل أي أنة عندما يفع شيء يظهر شيء أخر أو كما قال نيوتن (لكل فعل رد فعل) موضوعنا اليوم يتحدث عن هذا القانون وتطبيقه في البرمجة . واكثر اللغات انسيابا في التعامل مع أحداث المستخدم هي لغة الجافا سكريبت .
ولنبدأ بالتحدث بطريقة اكثر توضيحا . وكما نعلم أن لغة جافا سكريبت تعتبر من اللغات التي تعمل بشكل كبير في جانب العميل . أي أن المتصفح سيقوم بدور المعالجة للأحدث التي تصدر بواسطة المستخدم . فمثل عند الضغط فوق ربطة تشعبيه أو عندما تدخل بياناتك في Form فأن حدث معين قد يقع لأخبار المتصفح بنوع المعالجة المطلوبة لهذا الحدث .ثم الاستجابة للحدث ومعالجته , وهو ما يعرف باسم معالجة الأحداث .
ولنوضح مثالا بسيطا لفكرة معالجة الأحداث :
عند الضغط على رابطة في أي صفحة من المفترض أن يستجيب المتصفح لهذا الحدث بتحميل الصفحة المرتبطة بهذا العنوان URL ويعرضها , أما لو استخدمنا الأحداث في جافا سكريبت للتعامل مع هذه الوصلة . يمكن تغير هذا الأجراء الطبيعي بكتابة شفرة معالجة مختلفة . فمثلا يمكنك عرض مربع حوار قبل التوجه للوصلة أو إصدار صوت معين أو تحميل صورة متحركة أو ظهور نصوص في أماكن مختلفة من الصفحة أو إغلاق نافذة من نوع pop up . تتعدد الأحداث التي يمكن فعلها بكتابة شفرات معالجة للحدث.
وبصورة مختصرة تتمكن الأحداث في التعامل مع . الروابط والصور وخراط الصور والنماذج والنوافذ كما يمكنها التحكم في عناصر html الافتراضية لتجعلها تفعل أعمال مختلفة .
يوجد العديد من الأحداث داخل جافا سكريبت سوف اعرض اغلبها خلال هذه السلسلة لكن الآن اذكر لكم أهم هذه الأحداث وأكثرها انتشار .

من الأحدث التي يمكن لجافا سكريبت معالجتها :
MOUSEMOVE تحريك الماوس
CLICK نقر الماوس فوق رابطة
MOUSEDOWN ضغط زر الماوس والاستمرار في الضغط
MOUSEOVER تحريك الماوس فوق رابطة
MOUSEOUT تحريك الماوس من داخل رابطة إلى خارجها
توجد أحداث خاصة بالصور وأخرى خاصة الروابط وأخرى خاصة بالتحميل .سنتعرف على المزيد من الأحداث في دروس قادمة ولكن قبل أن نغلق الدرس نضع لك مثال تطبيقي للتجربة.
تطبيق عملي :
نفترض انك تريد معالجة الحدث المرتبط بتحريك المستخدم فوق ربطة معينة فينبغي عليك ربط الحدث المطلوب بالوصلة .

<a href=http://www.c4arab.com onMouseOver=”كود معالجة الحدث”>
موقع الموسوعة العربية للكمبيوتر
</a>

يجب أن تقع شفرة معالجة الحدث onMouseOver بين علامات اقتباس .
يمكن أن نجعل الزائر عندما يمر فوق الرابطة تظهر لها نافذة Window باستدعاء الدالة alert الخاصة بالكائن window
شاهد المثال :
<a href=http://www.c4arab.com onMouseOver="alert('مرحبا بك في موقع الموسوعة العربية للكمبيوتر')">
موقع الموسوعة العربية للكمبيوتر
</a>

موقع الموسوعة العربية للكمبيوتر

وعند تطبيق المثال السابق وسوف يعرض لك وصلة بعنوان موقع الموسوعة العربية للكمبيوتر . وعند المرور عليها تظهر لك نافذة مكتوب عليها مرحبا بك في موقع الموسوعة العربية للكمبيوتر .
يمكنك استخدام نفس المعالجة بواسطة أحداث أخرى .

رد: دروس في برمجة المواقع (جافا سكريبت)الخميس ديسمبر 25, 2008 9:50 am

الكائنات في جافا سكريبت(2)

سوف نكمل كلامنا في هذا الدرس عما بدأناه من شرح للكائنات في جافا سكريبت في الدرس السابق

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

1- String Object

2- Date Object

3- Window Object

4- Browser Object

سوف يتم شرح بعض من الكائنات لكل فئة

أولا: كائنات السلاسل String Object :

1- خاصية length

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

مثال:

<script language="JavaScript”>

var str="الموسوعة العربية للكمبيوتر “

document. write(str.length (

</script>

2-طريقة fontcolor() :

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

مثال:

<script language="JavaScript”>

var txt=”الموسوعة العربية للكمبيوتر ”;

document.write("<p>" + txt.fontcolor('red') + "</p>”);

document.write("<p>" + txt.fontcolor('blue') + "</p>”):

document.write("<p>" + txt.fontcolor('green') + "</p>”)

</script>

1- طريقة match() :

يتم عن طريق هذه الطريقة تحديد او فحص سلسلة من داخل سلسلة
وان لم يجد السلسلة سوف يعيد بـ null والمثال سوف يوضح ذلك ..

<script language="JavaScript”>

var str= "الموسوعة العربية للكمبيوتر"

document.write(str.match ("الموسوعة"))

</script>
4- طريقة toLowerCase() وtoUpperCase() :

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

<script language="JavaScript”>

var str=("Hello c4arab”)

document.write(str.toLowerCase())

document.write("<br>”)

document.write(str.toUpperCase ())

</script>

ثانيا: كائنات التاريخ:

الكائن date

<script language="JavaScript”>

var d = new Date ()

document.write(d.getDate())

document.write (".")

document.write(d.getMonth() + 1 (

document.write (".")

document.write(d.getFullYea())

</script>

تم هنا تخصيص الكائن date للمتغير d وطبع علي المتصفح اليوم بالخاصية getDate() والشهر بالخاصية getMonth و السنة بالخاصية getFullYear() نلاحظ عند ايجاد الشهر اضفنا القيمة 1 لان عداد الشهر يبدأ من "0".

ثالثا : كائنات النوافذ Window Object :

1- الصناديق الحوارية

أ-Alert box

لاظهار صندوق حواري للمستخدم لاخباره بشيء

مثال:

<script language="JavaScript”>

var alrt = alert("Press a button")

</script>

ب- confirm box :

لسؤال المستخدم عن قبول اورفض شيء

<script language="JavaScript”>

var name = confirm("الموسوعة العربية ”);

</script>

جـ - Prompt box

لادخال المستخدم بيان معين:

<script language="JavaScript”>

var name = prompt("Please enter fav site","الموسوعة ")

</script>

2 – الكائن window :

أ‌- الكائن window :

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

مثال فتح موقع الموسوعة بالتحكم في حجم النافذه

<head>

<script language="JavaScript”>

function openwindow ()

{

window.open("www.c4arab.com","my_new_window",
"toolbar=yes,location=yes,
directories=no,status=no,
menubar=yes,scrollbars=yes,
resizable=no,
copyhistory=yes
,width=400,height=400”)

}

</script>

</head>

<body .

<form .

<input type="button " value="Open Window " onclick="openwindow()”>

</form>

</body>

ب‌- reload :

لاعادة تحميل الصفحة refresh :

location.reload()

د--خاصية شريط الحالة status bar :

window.status = "الموسوعة العربية "

هـ -خاصية طباعة الصفحة:

window.print()

رابعا : كا ئنات المتصفح :

تفيد في معرفة بعض البيانات عن متصفح العميل

1- لمعرفة نوع المتصفح وطباعة رسالة بذلك علي المتصفح :

document.write("You are browsing this site with: "+ navigator.appName)

2- لمعرفة اصدار المتصفح

navigator.appVersion

3- لمعرفة SCREEN RESOLUTION و وعمق ألوان الشاشة

document.write(window.screen.availWidth + "*")

document.write(window.screen.availHeight + "<br>")

document.write(window.screen.colorDepth + "<br>")

بهذا المقدار البسيط قد نكون قد انتهينا بعرض بعض الكائنات المبيتة وبعض الخصائص لها وسوف نتعرض الدرس القادم انشاء الله بكيفية عمل كائنات بانفسنا واستخدام خصائصها.

رد: دروس في برمجة المواقع (جافا سكريبت)الخميس ديسمبر 25, 2008 9:54 am

في لغة الجافا سكريبت من المهم معرفة كيفية التعامل مع المتغيرات variables. المتغير هو مكان تخزين مؤقت تحفظ فيه قيم معينة، عندما تتغير هذه القيم، يمكن للمستخدم تحديث المتغير بحيث يحفظ القيم الجديدة.
هناك عدة أنواع من المتغيرات، وكل منها يستطيع تخزين أنواع معينة من البيانات:
1- أرقام صحيحة integer numbers
2- أرقام بعلامة عشرية floating-point numbers
3- سلاسل حروف strings
4- قيم منطقية Boolean

أولا: أرقام صحيحة integer numbers:
هي قيم عددية لا تحتوي على علامة عشرية، وقد تكون موجبة أو سالبة. تظهر علامة الطرح (-) قبل القيم السالبة.
تكتب الأعداد الصحيحة إما بالنظام العشري decimal، أو بالنظام السداسي عشر hexadecimal، أو بالنظام الثماني octal. والفرق بين هذه الأنواع يكون في الأساس الذي يستخدمه نظام الترقيم.
مثلا، النظام العشري المعتاد يستخدم ارقام للعد (من صفر الى 9). أما النظام السداسي عشر فهو يستخدم 16 رقما للعد (من صفر حتى 9 ثم من a حتى f)، وتتميز هذه الأرقام بوجود حرفي 0x قبلها. والنظام الثماني يستخدم ثمانية أرقام للعد (من صفر حتى 7)، وتتميز هذه الأرقام بوجود صفر في بدايتها.
على سبيل المثال، الرقم 37 هو عدد صحيح بالنظام العشري، والرقم 037 هو عدد صحيح بالنظام الثماني، والرقم 0x37 هو عدد صحيح بالنظام السداسي عشر.
تطبيق:
1- افتح ملف نوت باد جديد. قم بالإعلان عن 3 متغيرات باستخدام كلمة var واستخدم عبارة document.write لعرض القيم كما يلي:

var decimalNum, hexadecimalNum, octalNum;
decimalNum = 37;
hexadecimalNum = 0x37;
octalNum = 037;
document.write("This is a decimal number: " + decimalNum + "
");
document.write("This is a hexadecimal number: " + hexadecimalNum + "
");
document.write("This is an octal number: " + octalNum + "
");

2- افتح الملف السابق في مستعرض الويب. سوف يتم عرض قيمة كل واحد من المتغيرات كما في الصورة:

يمكنكم أن تجربوا مع أي رقم آخر والتأكد من القيم.

--------------------------------------------------------------------------------
ثانيا: أعداد ذات العلامة العشرية floating-point numbers:
هي أعداد تحتوي على كسور و بها علامة عشرية، و يمكن لهذه الأعداد أن تكون موجبة أو سالبة. واذا كانت الأعداد كبيرة جدا أو صغيرة جدا، فإنه يمكن كتابتها بالترميز العلمي scientific notation، وهذا الترميز يضع حرف الـ E داخل الرقم ثم يتبعه بعدد المنازل العشرية التي تحركها العلامة العشرية. تحرك الأرقام الموجبة العلامة ناحية اليمين، وتحرك الأرقام السالبة العلامة ناحية اليسار.
على سبيل المثال، الرقم 7.32E7 يمثل الرقم 73,200,000 والرقم 5.014E-4 يمثل الرقم 0.0005014
ملاحظة:

حجم الرقم هو الذي يحدد إن كان الكمبيوتر سيعرضه باستخدام الترميز العادي أو الترميز العلمي. فالأرقام الأصغر من 1.0E-7 يتم عرضها بالترميز العلمي. أما الأرقام الموجبة فإنها يمكن أن تصل الى الطول 1.0E20 قبل أن يتم عرضها بالترميز العلمي.
تطبيق:
1- افتح ملف نوت باد جديد. قم بالإعلان عن 4 متغيرات و عين أعداد عشرية كقيمة لكل متغير، قيمتان كبيرتان، و قيمتان صغيرتان. استخدم عبارة document.write لعرض القيم كما يلي:

var largeNum, veryLargeNum, smallNum, verySmallNum;
largeNum = 123456789000000000000.0;
veryLargeNum = 5.14E52;
smallNum = 0.000000123;
verySmallNum = 6.023E-23;
document.write("This is a large number: " + largeNum + "
");
document.write("This is a very large number: " + veryLargeNum + "
");
document.write("This is a small number: " + smallNum + "
");
document.write("This is a verySmall number: " + verySmallNum + "
");

2- افتح الملف السابق في مستعرض الويب. سوف يتم عرض قيمة كل واحد من المتغيرات كما في الصورة:

رد: دروس في برمجة المواقع (جافا سكريبت)الخميس ديسمبر 25, 2008 10:00 am

وبقية الدرس سيأتيكم قريبا جدا انشاء الله

مواضيع مماثلة

مقدمة فى برمجة DLL (لغة دلفي)
الكتاب العربي كتاب تعلم لغة البرمجة جافا JAVA تعلم واحترف
برنــــــــــــــــامج عملاق لتدميــــــــــــــر المواقع الإبـــــــــــاحية
المواقع المميزة داخل المطبخ
برنامج تصميم المواقع - تحفة-

انتقل الى:

صلاحيات هذا المنتدى:

لاتستطيع الرد على المواضيع في هذا المنتدى

قم بتسجيل الدخول للرد

منتدى شامل

دروس في برمجة المواقع (جافا سكريبت)

descriptionدروس في برمجة المواقع (جافا سكريبت)الخميس ديسمبر 25, 2008 9:47 am

descriptionرد: دروس في برمجة المواقع (جافا سكريبت)الخميس ديسمبر 25, 2008 9:49 am

descriptionرد: دروس في برمجة المواقع (جافا سكريبت)الخميس ديسمبر 25, 2008 9:50 am

descriptionرد: دروس في برمجة المواقع (جافا سكريبت)الخميس ديسمبر 25, 2008 9:54 am

descriptionرد: دروس في برمجة المواقع (جافا سكريبت)الخميس ديسمبر 25, 2008 10:00 am