دفتر تحضير لغة الجافا سكربت

[محمد جبلي]

بسـم الله الرحمـن الرحيــــــــــــــم

أعضاء الفريق الواعد

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



زهرة البيلسان - ريفــــــــــــــان - twinkle - الهدهده - أم يوسف - S a R a -شادل

محمد جبلي - المحلاوي

[line]

المصدر / http://www.w3schools.com/js/default.asp

JS Basic

الوقت المستغرق : ( الوقت 5 أيام فقط لا غير بداية بيوم السبت القادم بإذن الله )

( اليوم الأول )
محمد جبلي /

JS HOME
JS Introduction
JS How To
JS Where To
JS Statements
JS Comments
JS Variables
JS Operators

( اليوم الثاني )
زهرة البيلسان /

JS Comparisons
JS If...Else
JS Switch
JS Popup Boxes
JS Functions

( اليوم الثالث )
ريفــــــــــــــان /

JS For Loop
JS While Loop
JS Break Loops
JS For...In

( اليوم الرابع )
twinkle /

HTML 4.0 Event Attributes ( تم شرحه ويحتاج تشييك هـ و ـنـا )
JS Events
JS Try...Catch
JS Throw
JS onerror

( اليوم الخامس )
الهدهده /

JS Special Text
JS Guidelines

[line]

أم يوسف و المحلاوي و سارة و أبو عـابد و أرومـا و شادل

راح يمسكوا JS Objects كاملة ( تقسيم الدروس راح يكون مستقبلاً )

إللي عنده إعتراض على التقسيم يقول

الطريقة ..
الدخول على الدرس في المصدر .. ( إما أن تترجمة ترجمة أو الأفضل تفهمه وتشرحه بطريقتك )

كتابة الترجمة أو الشرح في موضوع خاص لتحضير ( دفتر تحضير لغة الجافا سكربت )
يمكن أن تقوم الهدهده بتحضير دروسها الأخيره من الأن و وضعها في الدفتر ( كمثال )
أي أن التحضير لا يكون مرتب كل واحد يحضر وقت ما يبغى المهم لا يتأخر عن يومه

كل واحد يحط واجب ليومه ويكون مسؤول عنه

( إللي طريقة تنسيقهم للمواضيع سيئة يحاولوا يضبطوا التنسيق شوي .. لا يعموا عيوننا )

[محمد جبلي]

JavaScript

الجافا سكربت تستخدم في ملايين الصفحات على الإنترنت لتحسين التصميم
والتأكد من مدخلات البيانات في النماذج و لمعرفة نوع متصفح الزائر و لإنشاء الكوكيز
وغيرها الكثير الكثير ..

الجافا سكربت هي الـ ( scripting language ) الأكثر شعبية على الإنترنت
تعمل على كل المتصفحات الرئيسية مثل الإكسبلورار و الفايرفوكس و الأوبرا وغيرها

[line]

يجب أن تكون على معرفة بـالـ [ HTML / XHTML ] قبل تعلمك الجافا سكربت

[line]

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

الجافا سكربت صُممت لجعل صفحة الـHTML تفاعلية
الجافا سكربت هي scripting language
الـ scripting language هي لغة برمجة خفيفة الوزن ( أي لغة برمجة مبسطه )
الجافا سكربت عادةً تضمن في كود الـHTML في شفرة الصفحة

JavaScript is an interpreted language (means that scripts execute without preliminary compilation)

JavaScript لغةُ مُتَرجَمةُ (تَعْني بأنّ المخطوطاتِ تُنفّذُ بدون تجميعِ تمهيديِ)

أي شخص يمكنه إستعمال الجافا سكربت بدون شراء رخصة

[line]

هل الجافا سكربت ( JavaScript ) هل نفس الجافا ( Jvav ) ؟

لا ..
الجافا سكربت و الجافا لغتان مختلفتان كلياً في المفهوم و التصميمم !

الجافا ( طورت بواسطة شركة Sun Microsystems ) و هي لغة برمجة قوية و أكثر تعقيد
مثل الـ C و ++C

[line]

ماذا تستطيع الجافا سكربت أن تعمل ؟

الجافا سكربت تعطي مصممي الـHTML أداة برمجية

محرري لغة الـHTML عادةً لا يكونوا مبرمجين .. والجافا سكربت لغة برمجة بسيطة جداً من ناحية التكوين
لذلك يمكن لأي شخص تقريباً وضع قصاصات من كود الجافا سكربت في لغة الـHTML
( لذلك توجد مواقع كثيره يوجد بها أكواد جافا سكربت جاهزة يقوم الأفراد بنسخها ووضعها مباشرةً في صفحتهم )

الجافا سكربت ممكن أن تضع نص ديناميكي في صفحة الـHTML

بالإمكان كتابة نص متغير داخل كود الـHTML بإستخدام الجافا سكربت
مثال /

كود PHP:

document.write("<h1>" + name + "</h1>") 


الجافا سكربت ممكن أن تتفاعل مع الأحداث ( events )

جافا سكريبت يمكن ان تحدد لتنفيذ عندما يحدث شىء ما
مثل عندما ينتهي من تحميل الصفحه أو عندما يقوم المستخدم بالنقر على عنصر HTML

الجافا سكربت تستطيع قراءة و كتابة عناصر الـHTML

الجافا سكربت تستطيع قراءة و تغيير محتوى عناصر الـHTML

الجافا سكربت نستطيع إستخدامها لتأكد من البيانات المدخلة

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

الجافا سكربت يمكن أن تستخدم للكشف عن متصفح الزائر

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

الجافا سكربت ممكن أن تستخدم لإنشاء الكوكيز

الجافا سكربت ممكن أن تستخدم لتخزين و إسترجاع معلومات من حاسوب الزائر

[line]

معلومات مافهمت منها شيء سوا أن اللغة أخترعت من قبل Brendan Eich في شركة Netscape
أستاذة الإنجليزي .. أسعفينا

The Real Name is ECMAScript

JavaScript's official name is "ECMAScript". The standard is developed and maintained by the ECMA organisation.

ECMA-262 is the official JavaScript standard. The standard is based on JavaScript (Netscape) and JScript (Microsoft).

The language was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all Netscape and Microsoft browsers since 1996.

The development of ECMA-262 started in 1996, and the first edition of was adopted by the ECMA General Assembly in June 1997.

The standard was approved as an international ISO (ISO/IEC 16262) standard in 1998.

The development of the standard is still in progress.

الحمد لله أنتهيت من المقدمة

[twinkle]

*** اليوم الرابع ***

1) الدرس الثامن عشر JS Events


أحداث الجافا سكريبت (JavaScript Events)


تعريف الأحداث (Events):
المقصود بالأحداث هي الإجراءات أو الأفعال التي تحدث ويمكن للجافا سكربت اكتشافها والتعامل معها.
باستخدام الجافا سكربت، يمكننا إنشاء صفحات ويب متحركة.

في لغة الجافا سكريبت، يوجد ما يسمى بالأحداث Events (جمع حدث) والوظائف Functions (جمع وظيفة):
الوظائف: تمت دراسته في اليوم الثاني – الدرس الثالث عشر.. وهي أعمال ينفذها الجافا سكريبت حينما يحصل حدث معين.
الأحداث (وهو درس اليوم): سبق التعريف أعلاه،، والمقصود به أي موقف أو إجراء (سواء قام به المستخدم أو غيره) مرتبط بوظيفة معينة، حينما يحصل الحدث يقوم الجافا سكريبت بتنفذ الوظيفة المرتبطة بالحدث.

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

كل عنصر في صفحة الويب له مجموعة تناسبه من الأحداث (Events)، كأن نستخدام مثلا الحدث onClick الخاص بالعنصر (الزر) لتنفيذ وظيفة معينة حالما ينقر عليه، بحيث يتم كتابة الأحداث داخل وسوم الـHTML.

سؤال: (حينما ينقر المستخدم على زر، تظهر النافذة الترحيبية)
في الجملة السابقة، ما هو الحدث؟ وما هي الوظيفة المرتبطة به؟
الحدث هو: النقر على الزر
الوظيفة هي: ظهور النافذة الترحيببية

الحدث Event: هو إجراء معين ومعروف لدى الجافا سكريبت.. أي أن الجافا سكريبت يتعامل (حاليا) مع 21 حدث فقط، ولا يمكننا إنشاء أحداث خاصة بنا.
بينما الوظيفة Function: هي مجموعة من الأوامر يحددها المستخدم بنفسه، أي أنها ليست محدودة، ويمكننا إنشاء الوظائف كما نريد.


بعض الأحداث التي يتعامل معها الجافا سكريبت:
1) النقر على الفأرة..
2) تحميل صفحة ويب أو تحميل صورة..
3) مرور الفأرة على منطقة معينة في صفحة الويب..
4) تحديد مربع نص موجود في نماذج الـHTML..
5) إرسال نموذج HTML..
6) النقر على مفتاح ما في لوحة المفاتيح..


ملاحظات:
** لمعرفة جميع الأحداث التي تتعامل معها لغة الجافا سكربت وطريقة كتابة كل حدث، يمكنكم الرجوع إلى الصفحة التالية: complete Event reference

** يكتب الحدث والوظفية المرتبطة به بالصورة التالية:
الحدث = "الوظيفة" ،، مثل: onload="load()"
نلاحظ أن طريقة كتابة الحدث في HTML هو نفسه طريقة كتابة الخصائص في HTML:
الخاصية = "القيمة" ،، مثل: width="100"
أي أن أحداث الجافا سكربت تعامل وكأنها خصائص للوسوم في HTML (لأن هناك أحداث معينة تتعامل مع وسوم معينة ... وليس كل الوسوم تتعامل مع كل الأحداث)
لذلك تعتبر الأحداث وكأنها من خصائص الوسوم

** اسم الحدث Event مكون من مقطعين: الأول هو on والثاني هو مسمى الحدث وغالبا ما يدل على ما يقوم به الحدث..
بينما اسم الوظيفة Function هو اسم من إنشاء المستخدم، يختار الاسم كيفما يريد، وينتهي اسم الوظيفة بقوسين كهذه () إما أن تكتب متغيرات داخل القوسين أو لا يكتب شيئا.. وتحتاج الوظيفة إلى تعريف مسبق (تم شرح الوظائف بالتفصيل في اليوم الثاني –الدرس الثالث عشر-)..

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



شرح لأبرز الأحداث المستخدمة في الجافا سكريبت:

1) الحدثين onload و onUnload:
الحدث onload يستخدم عند الدخول على صفحة الويب أو تحميل عنصر على صفحة الويب..
والحدث onunload يستخدم عند الخروج من صفحة الويب أو إزالة عنصر من صفحة الويب..

غالبا ما سيتغل الحدث onload في معرفة نوع ورقم الإصدار للمتصحفات التي يستخدمها زوار الصفحة (نوع المتصفح مثل: Mozilla Firefox ورقم إصداره مثل: 3.0.1).
وفي بعض الأحيان تحتاج بعض المتصفحات (أو بعض الإصدارات) إلى قيم خاصة ومعلومات معينة حتى تعمل الصفحة بشكل صحيح.. لذلك يتم الكشف عن المتصفحات بهذا الحدث وتحميل اللازم من المعلومات..

كلا الحدثين onload و onunload غالبا ما يستخدمان للتعامل مع الكويكز التي يتم ضبطها حينما يدخل أو يغادر المستخدم صفحة الويب..
مثلا.. حينما يدخل المستخدم إلى صفحتك للمرة الأولى، تظهر نافذة منبثقة تسأل عن اسم المستخدم، وحينما يزور المستخدم صفحتك للمرة الثانية (محتفظا بالكويكز التي دخل بها لأول مرة) تظهر نافذة منبثقة أخرى ترحب به (معتمدة في معلوماتها على الكويكز)..



2) الأحداث onFocus و onBlur و onChange
غالبا ما تستخدم الأحداث: onFocus و onBlur و onChange للتأكد من سلامة الحقول المدخلة في النموذج..

المثال التالي يتحدث عن كيفية استخدام الحدث onChange، الوظيفة checkEmail() سوف يتم استدعائها حالما يغير المستخدم محتويات الحقل:

<input type="text" size="30"
id="email" onchange="checkEmail()" />

لاحظ:
** تم كتابة الحدث onchange داخل الوسم <input /> ..
** تم كتابة الحدث onchange مع الوظيفة checkEmail() بالصورة التالية: الحدث = "الوظيفة" ..



3) الحدث onsubmit
يستخدم هذا الحدث للتأكد من سلامة جميع حقول النموذج قبل إرساله..

في المثال التالي، يتحدث عن كيفية عمل الحدث onsubmit، الوظيفة checkForm() سوف يتم استدعاءها حينما ينقر المستخدم على زر submit الموجود في النموذج ..
إذا كانت القيم المدخلة في حقول النموذج غير صحيحة، تلقائيا ستلغى عملية إرسال الرسالة..
الوظيفة checkForm() لها قيمتين: إما True أو False ..
تعود بقيمة True إذا تم الإرسال بشكل صحيح، وتعود بقيمة False إذا لم يتم الإرسال لأي سبب كان..

<form method="post" action="xxx.htm"
onsubmit="return checkForm()" />

لاحظ:
** تم كتابة الحدث onsubmit داخل الوسم <form /> ..
** تم كتابة الحدث onsubmit مع الوظيفة checkForm() بالصورة التالية: الحدث = " الوظيفة return " (وجود return ليس ضروريا لكنه لأتمام الغرض من الوظيفة)



4) الحدثين onMouseOver و onMouseOut
غالبا ما يستخدم الحدثين onMouseOver و onMouseOut لإنشاء أزرار متحركة.
المثال التالي عن الحدث onMouseOver ، حينما تمر الفأرة على الرابط (الظاهر على شكل صورة) تظهر رسالة تنبيه

<a href="http://www.w3schools.com"
onmouseover="alert('An onMouseOver event');return false">
<img src="w3schools.gif" width="100" height="30" />
</a>

لاحظ:
** تم كتابة الحدث onMouseOver داخل الوسم <a /> ..
** تم كتابة الحدث onMouseOver مع الوظيفة alert() بالصورة التالية: الحدث = " الوظيفة ; return false" .. (وجود return ليس ضروريا لكنه لأتمام الغرض من الوظيفة)







ترجمة الرابط complete Event reference

مرجع لأحداث الجافا سكربت (JavaScript Event Reference)

عادة ما تستخدم الأحداث مع الوظائف، والوظيفة لن تعمل قبل أن يحدث الحدث المرتبط بها.


معالجات الأحداث (أو الأماكن التي تتم فيها تطبيق هذه الأحداث)
شء جديد بالنسبة إلى لغة HTML 4.0 أن تجعل الأحداث قادرة على الإستجابة للإجراءات في المتصفح.. مثل تشغيل الجافا سكربت حينما ينقر المستخدم على أحد عناصر الـHTML ..

فيما يلي قائمة بالخصائص (أو أحداث الجافا سكريبت تحديدا ) التي يمكن إضافتها داخل وسوم الـHTML لتعرف على الإجراءات
يدل الرمز
FF : متصفح الفايرفوكس
N : متصفح النت سكيب
IE : متصفح الإنترنت اكسبلورر
وتدل الأرقام 1 و 2 و 3 و 4 على رقم إصدار المتصفح فأعلا الذي يتوافق مع الحدث



يمكن معرفة شرح كل حدث بالتفصيل مع طريقة كتابته بالنقر على الرابط complete Event reference


فيما يلي تخصيص بعض الأحداث للوسوم الملائمة لها:

أحداث النافذة
تستخدم فقط في عنصر body و frameset



أحداث النموذج
تستخدم فقط في عنصر form



أحداث لوحة المفاتيح
لا تستخدم في العناصر التالية:
base, bdo, br, frame, frameset, head, html, iframe, me ta, param, script, style, and title



أحداث الفأرة
لا تستخدم في العناصر التالية:
base, bdo, br, frame, frameset, head, html, iframe, me ta, param, script, style, and title




ملاحظة: بقي الدرس التاسع عشر والعشرون ...

[محمد جبلي]

يستخدم وسم الـ <script> لإدخال كود الجافا سكربت داخل كود الـHTML
( العنصر <script> من الـHTML )

[line]

كيفية وضع كود جافا سكربت داخل كود HTML /

الخطوة الأولى : ( مثال )

<html>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>

وضعنا الوسم <script> داخل الـ body
و وضعنا له الخاصية type و أعطيناها القيمة text/javascript
الخاصية type تستخدم لتحدد لغة البرمجة المستخدمة

الخطوة الثانية : ( مثال )

<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

قمنا بكتابة كود الجافا سكربت في مكان محتوى عنصر <script>
السطر /

document.write("Hello World!");

عبارة عن كود جافا سكربت يقوم بطباعة جملة Hello World! في المتصفح

( مثال حي إضغط هنا )

[line]

لنفرض ..

* أنك نسيت وضع عنصر <script> وقمت مباشرة بكتابة كود الجافا سكربت

سيقوم المتصفح بإظهار الكود كاملاً دون تنفيذه ( مثال حي إضفط هنا )

لحل المشكلة / أكثر من التطبيق لتتمرن و تأكد من صفحاتك جميعها قبل نشرها

* أن المتصفح لا يدعم الجافا سكربت

سيقوم المتصفح بإظهار كود الجافا سكربت كاملاً دون تنفيذه

لحل المشكلة / يتم كتابة كود الجافا سكربت كتعليق في الـHTML
مثال :

<html>
<body>
<script type="text/javascript">
<!--
document.write("Hello World!");
//-->
</script>
</body>
</html>

تم وضع الـ // قبل --> ليمنع الجافا سكربت من تنفيذ وسم --> ( لا أدري ماذا يقصد لعل الدروس القادمة توضح لنا )

مثال حي على القدرة على كتابة كود HTML داخل كود الجافا سكربت ( إضغط هنا )

[محمد جبلي]

أين نكتب كود الجافا سكربت ؟

يتم كتابة كود الجافا سكربت في ثلاثة أماكن /

* في الـBody وتنفذ عند تحميل الصفحة ( مثال حي إضغط هنا )
* في الـHead وتنفذ عند إستدعائها ( مثال حي إضغط هنا )
* في ملف خارجي وتنفذ عند إستدعائها ( مثال حي إضغط هنا )

( لن أشرح طريقة كتابتها لأنها سهلة .. فقط إنظر للأمثله الموجودة في الروابط أعلاه )

[line]

ملاحظات :

* يمكنك كتابة كود جافا سكربت في الـHead و الـBody في نفس الصفحة ..

<html>
<head>
<script type="text/javascript">
....
</script>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>

* إذا أردت إستخدام نفس الجافا سكربت في صفحات كثيرة في موقعك فالأفضل أن تكتبها في ملف خارجي
إجعل إمتداد الملف ( .js )
لا تكتب في الملف الخارجي أي وسم HTML ولا حتى <script> .. فقط كود جافا سكربت !

مثال لطريقة ربط الملف الخارجي بكود الـHTML

<html>
<head>
<script src="xxx.js"></script>
</head>
<body>
</body>
</html>

نضع قيمة الخاصية src رابط الملف الخارجي

[line]

كن نبيهاً لتعرف المكان الصحيح الذي يفترض أن تكتب فيه كود الجافا سكربت

[محمد جبلي]

الجافا سكربت عبارة عن مجموعة متسلسلة من العبارات ( Statements ) يتم تنفيذها
بواسطة المتصفح
فهي تقوم بتوجيه المتصفح ليقوم بأعمال معينة ..

[line]

document.write("Hello Dolly");

ترون في نهاية الكود وجود فاصلة منقوطة , الفاصلة المنقوطة يفضل أن تضعها دائماً
حتى تتعود يديك على البرمجة في أي لغة ( الفاصلة المنقوطة إختيارية في الجافا سكربت وفقاً للمعايير )
المبرمج المتمرس دائماً يضع فاصلة منقوطة .. في لغات أخرى يجب عليك وضعها لذلك تعود

الفاصلة المنقوطة يجب أن تضعها إن أردت كتابة عبارتين في سطر واحد !

[line]

كود الجافا سكربت يتكون من عبارات متسلسلة تنفذ وفقاً لهذا التسلسل
( مثال حي )

إن أردت أن تنفذ جميع العبارات ( أكواد الجافا ) مع بعض
فضعها كـ كتلة ( Block )
بحيث تبدأ بـ { وتنتهي بـ }
مثال /

<script type="text/javascript">
{
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
}
</script>

( مثال حي )

المثال أعلاه ليس مفيد جداً .. ولكنه فقط لتوضيح كيفية إنشاء كتلة ( بلوك ؛ سأطلق عليها من الأن بلوك )
البلوك عادةً ما يستخدم لتنفيذ مجموعة من البيانات في وظيفة معينه أو عند حدوث حدث معين
سنتعرف عليها مستقبلاً بالتفصيل إن شاء الله

[line]

التعليقات

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

توجد طريقتين /

الأولى : إن كان التعليق في سطر واحد فتضع // قبله
مثال : ( المثال نفسه حي )

<script type="text/javascript">
// This will write a header:
document.write("<h1>This is a header</h1>");
// This will write two paragraphs:
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

مثال أخر : ( كتابة التعليق في نفس السطر بعد الكود )

<script type="text/javascript">
document.write("Hello"); // This will write "Hello" 
document.write("Dolly"); // This will write "Dolly" 
</script>

الثانية : إذا كان التعليق عبارة عن عدة أسطر
تضع قبلها /* وبعدها */
مثال : ( المثال نفسه حي )

<script type="text/javascript">
/*
The code below will write
one header and two paragraphs
*/
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

[line]

بإمكانك إستخدام طريقة التعليقات لمنع تنفيذ كود معين

مثال : ( المثال نفسه حي )

<script type="text/javascript">
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
//document.write("<p>This is another paragraph</p>");
</script>

مثال أخر لمنع تنفيذ عدة عبارات : ( المثال نفسه حي )

<script type="text/javascript">
/*
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
*/
</script>

[محمد جبلي]

فآآآآآآآصل رياضيآآآآتي

المدرس : ياجبلي جواب على المعادلة دي
أنا : أيت معادلة يا أستاذ
المدرس : شوفها قدام وشك ( س + 5 = 7 )
أنا : إيش يعني ( س ) يا أستاذ
المدرس : س يعني متغير .. قلي كم تساوي عشان تكون المعادلة صحيحة
أنا : اهااا س = 2 يا أستاذ
المدرس :

[line]

المتغيرات ( Variables )

المتغيرات عبارة عن حاويات لتخزين البيانات

فمثلا :

x = 5 
Jabali = 21
MyName = "Mohammad"
name3 = "ma3ali"
mohammad_Jabali = 21

كلاً من ( x , Jabali , MyName , name3 , mohammad_Jabali ) عبارة عن متغيرات

في الرياضيات كنا نستخدم الـx لتعبير عن الإحداثي السيني و الـy عن الإحداثي الصادي
فعندما نرى x و y نعرف تلقائياً أنها للأمر الفلاني ..

نفس الحال مع المتغيرات في لغات البرمجة , و الجافا سكربت بالطبع
فمثلا إذا أردنا إدخال إسم نضيع المتغير بإسم name أو MyName
وإذا أردنا إنشاء متغير لطول نسمي المتغير length

بإمكانك تسميت المتغير بأي إسم مثلا x , dt4, t4g , ii4 , dgfrd
ولكن حتى تكون مبرمج على مستوى عالي يجب أن تسمي كل شيء بإسمه
أو وصف له .. حتى تستطيع أنت بنفسك فهم الكود والتعديل عليه وقت ما تشاء بدون تعب
أو حتى إن أراد شخص أخر يريد التعديل على الكود فسيفهم معنى المتغيرات بسرعه .

يمكن أن يحتوي المتغير على حرف لاتيني ( كبير أو صغير ) أو رقم أو _

هناك قواعد إجبارية لتسمية المتغير :

* أن لا يبدأ برقم ( ممكن أن يبدأ بحرف لاتيني أو _ "underscore" فقط )
* أن لا يكون أحد الأسماء المحجوزة في اللغة ( تجدها هنا )

قواعد متعارف عليها في الجافا سكربت و ليست إجبارية : ( تختلف من لغة برمجة للغة برمحة أخرى )

* أن يكون إسم المتغير يصف كما وضحنا سابقاً .. مثال : name
* أن يتكون إسم المتغير من حروف صغيرة ( lowercase ) .. مثال : length
* إن كان المتغير من عدة أسماء فيتم كتابتها بالحروف الصغير ووضع بينها _ ( underscore ) مثال : strong_man

تنبيـة :
الجافا سكربت ككل حساسة لحالة الأحرف .. لذلك متغيرات الجافا سكربت كذلك حساسة لحالة الأحرف
فـ المتغير NaMe يختلف إختلاف كلي عن name

( تـم الإستعانـة بمصدر أخر : هنـــا : )

[line]

طريقة الإعلان عن المتغيرات في الجافا سكربت :

يتم الإعلان عن المتغيرات بإستخدام جملة var
بحيث يتم كتابة var ثم إسم المتغير

مثال :

var x;
var carname;

في المثال أعلاه تم الإعلان عن المتغيرات بدون إضافة قيمة له
بالإمكان إسناد قيمه له مستقبلاً ..

var x;
var carname;
x=5;
carname="Volvo";

أو ممكن أن نسند لها القيم في التعريف مباشرةً
مثال :

var x=5;
var carname="Volvo";

ملاحظة : عندما تسند نص لمتغير يجب أن تضعه بين علامتي إقتباس .

يتم كتابة اسم المتغير في اليسار ثم = ثم القيمة في اليمين !

[line]

لنفرض ..

* أنه تم إسناد قيمة لمتغير لم يتم التعريف عنه .. مثال :

x=5;
carname="Volvo";

سيتم التعريف عنها تلقائياً يعني كأنك كتبت :

var x=5;
var carname="Volvo";

* أنك أعدت تعريف متغير تم تعريفه مسبقاً و إسناد قيمة له
فلن يفقد قيمته السابقة .. مثال :

var x=5;
var x;

[line]

بالإمكان تغيير قيمة المتغير أثناء تنفيذ البرنامج !

مثـــــــال : ( مثــال حي )

<script type="text/javascript">
var firstname;
firstname="Hege";
document.write(firstname);
document.write("<br />");
firstname="Tove";
document.write(firstname);
</script>

[twinkle]

2) الدرس التاسع عشر JS Try...Catch

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

من المفترض أن المشكلة في المتصفح تسبب إغلاق مباشر للمتصفح أو توقف المتصفح عن الاستجابة لأوامر المستخدم...
والمشكلة في البريد الالكتروني لا ترسل الرسالة بالصورة الصحيحة..
وكل هذه النتائج مزعجة للمستخدم..

لكن طريقة إظهار رسالة الخطأ (أو معالجة المشكلة الحاصلة بأي طريقة كانت) أفادتنا كثيرا وأصبح بمقدور المستخدم معالجة الخطأ إن أمكن معالجته أو إنهاء البرنامج إن رغب..

هذه أحد الأمثلة لاستخدام أساليب تصحيح الأخطاء منها درس اليوم، جملة try...catch




جملة الجافا سكريبت try ... catch
جملة try...catch تستخدم لفحص الكود من الأخطاء، حيث جملة try...catch تقسم الكتلة إلى قسمين:
قسم try.. وهو القسم الذي يكتب فيه الكود الخاص بالصفحة..
قسم catch.. وهو القسم الذي يكتب فيه ماذا سيفعل البرنامج حال وجود خطأ في الكود المكتوب في جزء الـtry (كظهور رسالة أو إعادة توجيه إلى صفحة ما)


The try...catch statement
من هنا يمكن معرفة طريقة كتابة جملة try...catch

The try...catch statement with a confirm box
من هنا يمكن رؤية مثال آخر لكتابة جملة try...catch




جافا سكريبت - اكتشاف (تصيد) الأخطاء

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


هناك طريقتين للكشف عن الأخطاء في صفحة الويب:
1) عن طريق استخدام جملة try...catch (مستخدمة في متصفح الانترنت اكسبلورر 5 فما فوق، متصفح موزيلا 1 ونت سكيب 6)
2) عن طريق استخدام حدث onerror... وهذه الطريقة تعتبر الحل التقليدي القديم فكشف وإصلاح الأخطاء (وهي مستخدمة منذ متصفح نت سكيب 3)



صيغة كتابة جملة الـ try...catch

try
{
// هنا كود اللازم تطبيقه
}
catch(err)
{
// هنا الكود الذي سيعالج الخطأ في الكود المكتوب في قسم try 
}

لاحظ أن كلمتي try و catch تكتب بحروف صغيرة، لو كتبت بحروف كبيرة أدى ذلك إلى ظهور خطأ في الجافا سكربت
يفضل وضع الكود كأجزاء كل جزء يتم وضعه في try ويوضع تصحيح خطأه المحتمل أو معالجة أي خطأ يحصل له في catch حتى نتحكم بأكبر قدر ممكن من الكود




المثال الأول
المثال التالي يحتوي على سكربت وظيفته إظهار رسالة ترحيبية "مرحبا بالضيف" حين النقر على الزر
على أية حال، يوجد خطأ مطبعي في الـfunction المسماة بـmessage() وهي خطأ في كتابة الـfunction التالي alert() حيث تمت كتابته بالصورة الخاطئة: adddlert()
لذلك... فإنه سيحدث خطأ جافا سكريبت

<html>
<head>
<script type="text/javascript">
function message()
{
adddlert("Welcome guest!");
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
/*
شرح البرنامج:
كما هو المعروف، يكتب كود الجافا سكريبت في جزء الـheader محصورا بالوسم <script> و </script>
وفي داخل الوسم script تكتب جميع الـFunctions المستخدمة مع الأحداث
وهنا كتب الـfunction المسمى بـmessage() ووظيفته عرض رسالة ترحيبية بالضيف الزائر للصفحة

وفي جزء الـbody، تم وضع زر حينما ينقر عليه يتم تنفيذ الـfunction المسماة بـmessage()

في كود الـfunction، كتب الكود الخاص بإظهار الرسالة الترحيببية بشكل خاطئ
حيث كتب الأمر alert الخاص بإظهار الرسالة بالشكل التالي: adddlert..
فحينما ينقر على الزر وينفذ كود الـmessage() ، يحصل خطأ لعدم وجود أمر اسمه adddlert،، فسيظهر خطأ في الجافا سكريبت..
*/
</body>
</html>

للحصول على إجراء ملائم حال حدوث الخطأ، يمكنك إضافة جملة try...catch لتلافي حدوث توقف في أداء الكود

لذا تم إعادة كتابة المثال السابق باستخدام جملة try...catch . فمنذ أن تقرأ الـfunction (كما هي مكتوبة بالصورة الخاطئة) سيكتشف قسم الـcatch هذا الخطأ وينفذ الكود المخصص لحل هذه المشكلة..
وهي عرض رسالة خطأ تخبر المستخدم بالخطأ الحاصل لديها..

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.description + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
/*
شرح جزئية الـtry...catch:
دائما يوضع في جزء try الكود اللازم تنفيذه ... وفي جزء الـcatch الكود الذي سينفذ في حال وجود خطأ في الكود الموجود داخل الـtry

لذا .. كتبت جملة try...catch داخل الـfunction المسماة بـ message()
فوضع كل كود الـmessage() داخل جزء try
وكتب كود إظهار رسالة خطأ داخل جزء catch

شرح جزء الـcatch:
سيظهر رسالة باستخدام الأمر alert ،، حيث أن هذا الأمر سيحتوي على نص وهي نص رسالة الخطأ التي ستظهر
ولم يكتب نص الرسالة مباشرة داخل الأمر، بل تم إنشاء متغير اسمه txt سيوضع داخله نص الرسالة، ومن ثم سيعرض الأمر alert قيمة المتغير txt

تم تعريف المتغير txt قبل الدخول إلى الـmessage()، وجعلت قيمته الابتدائية نص فارغ 
ومن ثم في داخل الـcatch تعطى txt قيمتها التي ستعرضها الرسالة
ففي البداية:
 txt="There was an error on this page.\n\n";
كتابة أول سطر (يوجد خطأ في هذه الصفحة) ثم ترك سطرين فارغين بعده..

  txt+="Error description: " + err.description + "\n\n";
يضاف إلى ما سبق السطر التالي: (وصف الخطأ هو: .......) ثم يكتب وصف هذا الخطأ، وهذا الوصف يعرفه الجافا سكريبت.. وغالبا ما يستخدم هذا السطر لوصف المشكلة الحاصلة أيا كانت.. ثم يترك سطرين فارغين بعده

  txt+="Click OK to continue.\n\n";
يضاف إلى ما سبق السطر التالي: انقر على زر OK للاستمرار

الأسطر الثلاثة السابقة هي قيمة المتغير txt

  alert(txt);
في النهاية، تعرض رسالة محتواها هو المتغير txt
*/
</body>

</html>

المثال الثاني:
المثال التالي نفس المثال السابق، لكنه يستخدم رسالة تأكيد لعرض رسالة مخصصة تخبر المستخدمين بإمكانية النقر على زر OK للاستمرار في عرض الصفحة أو بالنقر على زر Cancel للعودة إلى الصفحة الرئيسية
إذا أعاد الـ confirm method بقيمة False، معناه أن المستخدم نقر على الزر Cancel، وسيقوم الكود بإعادة توجيه المستخدم للصفحة الرئيسية..
أما إذا أعاد الـ confirm method بقيمة True، معناه أن المستخدم نقر على الزر OK أي يريد الاستمرار في الصفحة، لذا فإن الكود لن يقوم بأي شيء..

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Click OK to continue viewing this page,\n";
  txt+="or Cancel to return to the home page.\n\n";
  if(!confirm(txt))
    {
    document.location.href="http://www.w3schools.com/";
    }
  }
}
</script>
</head><body>
<input type="button" value="View message" onclick="message()" />

/*
شرح البرنامج:
هذا المثال هو نفس المثال السابق،، في مثال السابق إن حصل الخطأ تظهر رسالة تفيد بوجود خطأ
لكن هنا بدلا من أن نصف المشكلة سنجعل الرسالة تتيح إمكانية التحكم فيما لو نقر المستخدم على زر Cancel

لذلك -كما السابق- تم تعريف متغير وإعطائه القيم من داخل جزء الـcatch
لكن استخدم الأمر confirm وليس الأمر alert... 
حيث أن الأمر confirm يعرض رسالة توكيد،، لها زرين OK و Cancel،، زر OK يحمل القيمة True أما زر Cancel فيحمل القيمة False،،
والأمر alert يعرض رسالة تحذير،، لها زر واحد وهو OK

وعن طريق الأمر confirm سنعرف ماذا نقر المستخدم

حتى نسأل إن نقر الزر OK فنكتب:
if(confirm(txt))
وحنى نسأل إن نقر الزر Cancel فنكتب:
if(!confirm(txt))

وهنا نريد إذا نقر على Cancel ينتقل إلى الصفحة الرئيسية... لذا كتبنا if(!confirm(txt)) وهي جملة شرطية،، إن تحققت (أي نقر على Cancel) ينفذ الكود التالي:
document.location.href="http://www.w3schools.com/";
وهو كود ينقل المستخدم للصفحة الرئيسية
*/
</body></html>

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


حدث الـonerror
حدث الـonerror خاص بتصحيح الأخطاء، سيتم شرحه قريبا في الدرس الحادي والعشرون.. لكن في البداية ستتعلم كيفية استخدام الجملة throw لإنشاء الاستثناءات في الدرس التالي..
جملة throw يمكن استخدامها مع جملة try...catch


×^×^×^×^×^×^×^×^×^×^×

3) الدرس العشرون JS Throw


جملة Throw
جملة الـthrow تسمح لك بإنشاء الاستثناءات داخل الكود..


The throw statement
من هنا يمكنك معرفة كيفية استخدام جملة throw


جملة الـThrow :
تسمح لك جملة الـthrow بإنشاء الاستثناءات،، أي حالات خاصة أثناء حل المشكلة..
وإذا استخدمت مع جملة try...catch، فستجعلك تتحكم في سير البرنامج وفي ظهور رسائل الخطأ بالطريقة الملائمة..
لأنها ستزيد من عملية التخصيص داخل جملة try...catch

صيغة كتابتها:

throw (جملة الاستثناء)

جملة الاستثناء يمكن أن تكون جملة نصية، أو أرقام صحيحة، أو قيمتي نعم ولا ، أو كائن من الكائنات..


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


مثال:
المثال التالي، منذ أن يدخل المستخدم صفحة الويب تظهر له رسالة تطلب منه أن يحدد قيمة للمتغير x..

إن كانت قيمة المتغير x محصورة بين 0 و 10 جعله يكمل دخوله للصفحة
وإن كانت قيمة المتغير x أكبر من 10 أو أقل من صفر يعتبر خطأ وتظهر رسالة تحذيرية خاصة.. رسالة تخبره أهو أقل من 0 أم هو أكبر من 10..

الخطأ سيكشف من قبل معامل الـcatch وستظهر رسالة الخطأ المناسبة:

<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","");
try
{ 
if(x>10) 
throw "Err1";
else if(x<0)
throw "Err2";
} 
catch(er)
{
if(er=="Err1") 
alert("Error! The value is too high");
if(er == "Err2") 
alert("Error! The value is too low"); 
}
</script>
/*
شرح البرنامج:
الكود السابق تم وضع كود السكربت داخل وسم الـbody.. لأننا نريد منذ أن يدخل المستخدم تظهر الرسالة

تم تعريف متغير قيمته رسالة إدخال،، تطلب من المستخدم إدخال قيمة معينة
وكما هو وارد في نص رسالة الإدخال، يطلب إدخال قيمة محصورة ما بين 0 و 10

في قسم try كتب الكود اللازم وهو التاكد من الرقم المدخل إن كان مطابقا للمطلوب أم لا
تم اختبار قيمة x:
إن كانت أكبر من 10 تظهر رسالة الخطأ الأولى
وإن كانت أصغر من 0 تظهر رسالة الخطأ الثانية

لذلك... لإعطاء أكثر من تصحيح خطأ... تم استخدام الأمر throw

إن كان x > 10 فإن throw "Err1"
وإن كان x < 0 فإن throw "Err2"

وفي جزء catch يختبر نوع الخطأ الحاصل (err) هل هو الأول Err1 أم الثاني Err2

إن كان الخطأ الأول،، أظهر رسالة تحذيرية تنص على أن الرقم المدخل > 10
وإن كان الخطأ الثاني،، أظهر رسالة تحذيرية تنص على أن الرقم المدحل < 0

*/
</body>
</html>

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





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

[محمد جبلي]

JavaScript Operators

تستخدم علامة = للإسناد
وتستخدم علامة + للإضافة ! <<--- قل قسم

أي أن العمليات الرباضية يمكن عملها في لغة الجافا سكربت .. مثال :

y=5;
z=2;
x=y+z;

في المثال أسندنا العدد 5 للمتغير y و أسندنا رقم 2 للمتغير z
فأصبحت قيمة y تساوي 5 و الـ z تساوي 2
ثم قمنا بجمع الـy و z وأسندنا الناتج إلى x
فأصبحت قيمة الـx تساوي 7

جُمع في الجدول التالي العمليات الحسابية وطريقة كتابتها في الكود
وتم فرض أن الـ y تساوي 5

توrt قليلاً لتجربتها بنفسك .. بالذات الـ ++ و -- فسنستخدمها كثير

في الجدول التالي توضيح لطرق مختصر لكتابة العملية الحسابية
فرض أن x=10 و y=5
( الكلمة : معناها , Operator : عملية , Example : مثال , Same As : نفسه , Result : الناتج )

توقف مرة أخرى وقم بتجربتها بنفسك ( هذه الأمور أساسية في البرمجة مثل : أ ب ت يجب معرفتها )

[line]

String تعني سلسلة رمزية ممكن تكون أرقام أو حروف أو رموز لكن لا تتعامل مع العمليات
مثلاً :

name = "mohammad";
mynumber = "055555550";

المتغير name وكذلك المتغير myname نطلق عليه متغير من نوع String
وترون أن القيمة أحيطت بعلامتي إقتباس ..
فالرقم 055555550 لا يمكن إجراء عملية حسابية عليه لأنه تم إحاطته بعلامتي إقتباس
فأصبح يعامل معاملة النص ..

[line]

العملية + تستخدم مع الإســ String ــترنق ! ( سأطلق عليها إسترنق لأن سلسلة رمزية قد يكون تعريب سيء للمصطلح )

يمكن إستخدام العملية + لإضافة نصين إلى بعضهما ( لم الشمل ! )
فمثلا :

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

txt3 ستصبح في الأخير What a verynice day
الـ verynice أصبحت متشابكة !
إذاً لا بد من مسافة .. توجد طريقتين لوضع المسافة :
الأولى :

txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;

الثانية :

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

الأن ستصبح What a very nice day

[line]

حتى تفهم الفرق بين الأرقام و بين الأرقام التي على شكل إسترنق بشكل جيد
جرب هذا المثال : ( المثال حي هنا )

x=5+5;
document.write(x);

x="5"+"5";
document.write(x);

x=5+"5";
document.write(x);

x="5"+5;
document.write(x);

جملة جميلة :

If you add a number and a string, the result will be a string.

إذا أضفت رقم و إسترنق , الناتج سيكون إسترنق !

هنا إنتهى درس اليوم ولله الحمد

: الوآآآآآآآآآآآآآآآآآجب :



يجب أن أنبه أن هذا الدرس أهم درس
وهو الأساس .. فلا يمكن بناء منزل بدون أساس
أكثروا من التطبيق و التجريب و المحاولة

أسأل الله لي ولكم التوفيق

[محمد جبلي]

: تنبيه تنبيه تنبيه :

لقد قمت مضطراً
حتى تكون الدروس مرتبة بشكل جيد
بإحالة الدرس JS Comparisons الذي كان يفترض أن أقوم بشرحه أنا
إلى الأخت زهرة البيلسان لأنه شبة تابع لدرس JS If...Else

ومن يعتقد أن أحد دروسه يتفرض أن تكون ضمن دروس عضو أخر
فليحيلها إليه ( إياكم و التلاعب )

لذلك جرى التنبه وشكراً

[twinkle]

×^×^×^×^×^×^×^×^×^×^×


سؤال في درس onerror

http://www.w3schools.com/js/js_onerror.asp


مذكور في الدرس:

Syntax onerror=handleErr function handleErr(msg,url,l) { //Handle the error here return true or false } The value returned by onerror determines whether the browser displays a standard error message. If you return false, the browser displays the standard error message in the JavaScript console. If you return true, the browser does not display the standard error message.

الفرق بين return true وبين return false هو في إظهار الرسالة من عدمها (كما ذكر أعلاه)

لكن حينما طبقتها على المحرر

http://www.w3schools.com/js/tryit.as...=tryjs_onerror

وغيرت من True إلى False

ظهرت الرسالة في كلا الحالتين

ما الفرق بينهما؟


×^×^×^×^×^×^×^×^×^×^×

[زهرة البيلسان]

JS Comparisons
مقارنات JS



\\ مقارنة العمليات المنطقية وتستخدم لاختبار صائب أم خاطئ \\

عمليات المقارنة :
تستعمل في البيانات المنطقية
لتقرير المساواة أو الإختلاف بين المتغيرات أو القيم.

أدوات المقارنة :





كيف تتم المقارنة ؟
عملية المقارنة نستطيع استخدامها في البيانات المشروطة لمقارنة القيم و اتخاذ الاجراءات حسب النتيجة

مثال :
if (age<18) document.write("Too young");
سنأتي على هذا المثال بالتفصيل . .

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

فإذا كان X=6 وَ Y=3 فالجدول يوضح العمليات المنطقية و أمثلة عليها :



العمليات المشروطة :
تحتوي جافا سكريبت على العمليات المشروطة و فيها يخصّص قيمة إلى متغيّر مستندة على شرط .

على النحو التالي :
variablename=(condition)?value1:value2

الاسم المتغيّر = (شرط) ? قيمة 1 : قيمة 2
أي أنه إذا كان الاسم المتغير يحقق الشرط فستتحقق القيمة 1 و إذا لم يكن كذلك تتحقق القيمة 2

مثال :
greeting=(visitor=="PRES")?"Dear President ":"Dear ";

إذا كان الزائر = PRES
تظهر "Dear President "
أما إذا لم يكن = PRES
تظهر "Dear"

======================================== ======

[S a R a]

تونكل ,, بالنسبة للسؤالك ,, حاولت اعرف الفرق..
وجربت كذا مرة .. بس للاسف ,,

دوري في مصادر ثانية غير هالموقع .. يمكن تلقين اجابة ..

[محمد جبلي]

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

فأظن هي على حسب المتصفح .. والعالم الله

[twinkle]

4) الدرس الحادي والعشرون JavaScript The onerror Event

يعتبر استخدام حدث onerror هو الحل التقليدي القديم لاكتشاف الأخطاء في صفحة الويب

The onerror event (an example with an error)
من هذا الرابط سنعرف طريقة استخدام هذا الحدث لاكتشاف أخطاء صفحة الويب



حدث onerror

في بداية الدرس، ذكرنا أن من طرق اكتشاف الأخطاء طريقتين:
1) جملة try...catch
2) استخدام الحدث onerror

شرحنا كيفية استخدام جملة try...catch ،، والآن سنتعلم كيفية استخدام لحدث onerror ..

الحدث onerror لا يعمل إلا حينما يصادف الجافا سكريبت (أثناء التنفيذ) خطأ في الكود..


كيفية استخدامها:

لاستخدام الحدث onerror، يجب إنشاء وظيفة Function (لها وسائط أو معاملات) مرتبطة بالحدث لمعالجة اللأخطاء..
بحيث حينما ينفذ الجافا سكريبت الكود ويصادف الخطأ، ينتقل مباشرة إلى الحدث onerror ليعرف الـfunction المرتبط به، فيتوجه إليه فورا..
بعدها ينفذ الأوامر الموجودة في الـ Function ..

معاملات (أو وسائط) الوظيفة Function المرتبطة بالحدث onerror عبارة عن 3 معاملات:
msg : وهي تختص باسم رسالة الخطأ
url : تعرض رابط الصفحة التي بها الخطأ
line : السطر الذي به الخطأ

ما يميز حدث onerror هو كونه يتعامل مع جميع الأخطاء... لأنه يعرض رسالة تصف أي خطأ مع تحديد السطر الذي به الخطأ (من ضمن أسطر الكود) .. لذلك فهو حل تقليدي مستخدم منذ زمن


لذلك... في بداية كود الجافا سكريبت يكتب الحدث onerror واسم الوظيفة المرتبطة به
ثم تكتب كلمة function ثم اسم الوظيفة (التي كتبت في بداية الكود مع الحدث onerror)،، ثم نكتب بين قوسين معاملات الوظيفة كالتالي: (msg, url, l)
ثم نكتب داخل الـfunction الأوامر التي ستنفذها الجافا سكريبت حال حصول الخطأ
ثم نكتب في النهاية return true أو return false


وهذه الصيغة العامة لكتابة الحدث onerror:

onerror=handleErr

function handleErr(msg,url,l)
{
//Handle the error here
return true or false
}

القيمة التي يعود بها الحدث (return true أو return false) تحدد عرض المتصفح لرسالة الخطأ أم لا
إن جعلتها تعود بـFalse، فالمتصفح سيعرض الرسالة ، وإن جعلتها تعود بـTrue فالمتصفح لن يعرض الرسالة
>>>>>>>>>>>>>>> جربتها ولم تنجح... بإذن الله سنعرف الفرق بينهما

المثال التالي يعرض كيفية اكتشاف الأخطاء بحدث onerror

<html>
<head>
<script type="text/javascript">
onerror=handleErr;
var txt="";

function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n";
txt+="Error: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="Line: " + l + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
return true;
}

function message()
{
adddlert("Welcome guest!");
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
/*
شرح البرنامج:
هنا برنامج يعرض زرا، حين النقر عليه تظهر رسالة ترحيبية

الخطأ هنا في كود إظهار الرسالة الترحيبية

فمنذ أن يجد الجافا سكريبت الخطأ يتجه مباشرة إلى الـ Function المسماة بـ:
handleErr(msg, url,l)

حتى يقوم بإظهار رسالة الخطأ


شرح جزء handleErr(msg,url,l)
في البداية.. تم تعريف متغير txt وهو محتوى رسالة الخطأ
ومن ثم تم إعطاء قيم المتغير txt أي تم كتابة محتوى رسالة الخطأ
وهي إظهار وصف الخطأ ورابط الصفحة والسطر في الكود الذي به الخطأ
*/
</body>

</html>

...إلى هنا إنتهى الدرس الرابع...

يوضع الدرس في أربعة ردود ... كل درس في رد (الثامن عشر، التاسع عشر، العشرون، الحادي والعشرون)

بقي أن أكتب واجبا للدرس ... وسألحقه قريبا بإذن الله

إن كان هناك أية ملاحظات على الشرح أتمنى طرحها للتعديل على الشرح بالشكل المطلوب

جزيتم خيرا

[twinkle]

×^×^×^×^×^×^×^×^×^×^×


جزاكما الله خيرا

بحثت بحثا سريعا في المنتديات ولم أجد الجواب (لظروف الوقت ولأنني لم أقرأ درس اليوم بعد)...

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

عموما... العلم لا يقف إلى هنا ... يمكننا التعديل على الدرس متى ما عرفنا الفرق


بوركتم

×^×^×^×^×^×^×^×^×^×^×

[زهرة البيلسان]

JavaScript If...Else Statements
البيانات الشرطية في جافاسكريبت تستعمل لإداء أعمال مختلفة مستندة على شروط مختلفة .

البيانات الشرطية :
• if statement
• if...else statement
• if...else if....else statement
• switch statement


if statement

تقوم العبارة if باختبار شرط معين فاذا تحقق هذا الشرط يتم تنفيذ العملية و إلا يتم تجاهل هذه العملية . .

و تكون على النحو :
if (شرط)
{
الكود الذي سينفذ إذا تحقق الشرط
}

مثال :
http://www.w3schools.com/js/tryit.as...e=tryjs_ifthen

ملاحظة: عند مقارنة متغيّرات يجب أن تستعمل (==)

• if...else statement
تقوم هذه العبارة باختبار شرط معين فاذا تحقق هذا الشرط يتم تنفيذ العملية1 و إذا لم يتحقق نفذ العملية2 . .


على النحو :
if (شرط)
{
الكود الذي سينفذ إذا تحقق الشرط
}
else
{
الكود الذي سينفذ إذا لم يتحقق الشرط
}

مثال :
http://www.w3schools.com/js/tryit.as...yjs_ifthenelse


If...else if...else Statement

إذا كان هناك عدة شروط , فإذا لم يتحقق الشرط1 انتقل للشرط الثاني فإذا لم يتحقق انتقل للشرط الثالث و هكذا ...

على النحو :
if (الشرط1)
{
الكود الذي سينفذ إذا تحقق الشرط 1
}
else if (الشرط2)
{
الكود الذي سينفذ إذا تحقق الشرط 2
}
else
{
الكود الذي سينفذ إذا لم يتحقق الشرط1 و الشرط2
}

مثال :
http://www.w3schools.com/js/tryit.as...e=tryjs_elseif

[زهرة البيلسان]

JavaScript Switch Statement

تستخدم عبارة if غالباً إذا كان جواب الشرط عبارة عن احتمالين أو ثلاثة على الأكثر أما إذا زاد عدد الاحتمالات على ذلك فمن الأفضل استخدام عبارة Switch
و صيغتها العامة كما يلي :
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is
different from case 1 and 2
}

و هي تعمل كالتالي :
يتم اختبار قيمة N فإذا كانت قيمته = 1 تم تنفيذ الكود1 ثم الخروج من خلال الأمر break
و إذا كانت قيمة N فإذا كانت قيمته = 2 تم تنفيذ الكود2 ثم الخروج من خلال الأمر break
و إلا يتم تنفيذ الكود default

{ يتم التعبير عن كل حالة من حالات switch بكتابة كلمة case ثم النتيجة المطلوبة ثم النقطتين : }

مثال :
http://www.w3schools.com/js/tryit.as...e=tryjs_switch

[زهرة البيلسان]

JavaScript Popup Boxes


في جافا سكربت نستطيع أن نكون 3 أنواع من صناديق popup :
Alert box, Confirm box, and Prompt box.

:: Alert box ::
لاظهار صندوق حواري للمستخدم لاخباره بشيء
عندما يظهر Alert box، المستخدم يجب أن ينقر "OK" للمضي .

و هو على النحو :
alert("sometext");

مثال :
http://www.w3schools.com/js/tryit.as...me=tryjs_alert
http://www.w3schools.com/js/tryit.as...e=tryjs_alert2


:: confirm box ::
لسؤال المستخدم عن قبول اورفض شيء
عندما يظهر confirm box، المستخدم يجب أن ينقر إما "OK" للمضي أو "Cancel" للمضي.
إذا تم نقر "OK" , يرجع الصندوق قيمة OK إذا نقر "Cancel"، يرجع الصندوق قيمة Cancel

و هو على النحو :
confirm("sometext");

مثال :
http://www.w3schools.com/js/tryit.as...=tryjs_confirm

:: Prompt box ::
لادخال المستخدم بيان معين قبل دخول الصفحة .
إذا نُقر "OK" يرجع الصندوق القيمة المدخلة . .

و هو على النحو:
prompt("sometext","defaultvalue");

مثال :
http://www.w3schools.com/js/tryit.as...e=tryjs_prompt

[محمد جبلي]

زهرة .. ضعي الأكواد كأكواد أفضل ..
شكلها كذا غير مرتب

عندما تنتهي من التحضير وتجهيز الواجب
أنزلي الدرس غداً بحد أقصى في العصر

جزاكِ الله خير ,,