Nov 242011
 

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

العملية الشرح مثال
+ تستخدم لعمليات الجمع 1+ 2
++ أضف 1 i++
تستخدم لعمليات الطرح 1 – 2
اطرح 1 i–
* تستخدم لعمليات الضرب 1 * 2
/ تستخدم لعمليات القِسمة 1 / 2
% تستخدم لعرض الباقي من عملية القسمة 1 % 2
التعابير
== للتساوي a == b
=! لا يساوي a != b
< و > تستخدم لعمليات المقارنة، أكبر أو أصغر من a > b
=< أو => أكبر أو يساوي / أصغر أو يساوي a >= b
|| أو“or” – أي يتحقق
أحد الشروط
a == b || c == d
&& و “and” – يجب أن
تتحقق كل الشروط
a == b && c == d

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

sum = a + b;

هي عملية جمع، حاصل ناتج جمع المتغير a مع b، أو للطرح:

sub = a - b;

حاصل طرح a من b وهكذا ..

سيتم شرح الأوامر الشرطية في درس لاحق بإذن الله 🙂

Nov 102011
 

في الدرس السابق بعنوان مقدمة حول JavaScript ، تم شرح طريقة استدعاء JavaScript في صفحات الموقع، وفي هذا الدرس سيتم شرح طريقة التعامل مع JavaScript عن طريق الأحداث “Events” وكيفية صنع دوال JavaScript لاستدعاءها في حدث معيّن.

فما هي الأحداث في HTML؟

ببساطة هي تشبه الأوامر الشرطية، لكن تعاملها يشترط على احداث معينة، مثالًا؛ عند الضغط (OnClick) على الزر أ اظهر رسالة ترحيب. مثال أدق:

<input type="submit" name="button" id="button" value="Show Welcome" onClick="window.alert('Welcome to http://www.alrashdi.co');">

وهناك العديد من الأحداث منها:

onLoad: عند تحميل المحتوى، وينحصر هذا الحدث على الوسم body في html فقط.

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

onBlur: عند إلغاء التركيز، يعكس الحدث السابق، أي بعد خروج المؤشر من نموذج ادخال معيّن.

onchange: في الغالب يرافق القوائم، ويقصد به عند تغيير القيمة..

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

وللاستعداد للجزء القادم من الدرس، سأدرج بعض دوال JavaScript مع الشرح أدناه:

– اظهار رسالة للمستخدم:

window.alert('الرسالة هنا');

– نافذة التأكيد:

confirm('رسالة التأكيد هنا');

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

– نافذة ادخال نص:

prompt('السؤال هنا', 'قيمة افتراضية');

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

 

كيفية عمل دالة في JavaScript:

شكل الدالة يكون:

function name()
{

}

وتستبدل name باسم الدالة، ويمكن أيضًا ادراج متغيرات في الدالة، مثال:

function name(var1, var2)
{

}

أي أن الملخص في تكوين الدالة هو الكلمة المفتاحية function يتلوها اسم الدالة وقوسين بهما المتغيرات إن وجدت، وقوسين معكوفين بينها تضع محتوى الدالة 🙂

وسنقوم الآن بصنع دالة لعرض رسالة ترحيب:

function welcome_message()
{
window.alert('Welcome to http://www.alrashdi.co');
}

وسنضعها في الحدث onLoad في الوسم body، بحيث تظهر عند تحميل الصفحة، الشفرة كاملة:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript Example 4</title>

<script type="text/javascript">
function welcome_message()
{
window.alert('Welcome to http://www.alrashdi.co');
}
</script>

</head>

<body onLoad="welcome_message();">

</body>
</html>

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

ليس هناك أي تعقيد، سنقوم بتخزين ما يكتبه المستخدم عبر نافذة الادخال في متغير معين، وثم نقوم بعرض رسالة تحتوي ذلك المتغير، المثال:

function welcome_message()
{
var name = prompt('What is your name?');
window.alert('Welcome ' + name + ' to http://www.alrashdi.co');
}

ويمكنك التجربة في نفس المثال السابق، قد تلاحظ تكرار علامة الجمع أكثر من مرة “+”، وللتوضيح، في JavaScript، نستخدم “+” لدمج أكثر من متغير أو نص مقتبس في نفس السطر.

وأخيرًا، سأضع مثال لرسالة التأكيد وكيفية استخدامها بشكل صحيح. لنفترض أن هناك وصلة للذهاب لموقع آخر غير موقعك، وترغب بتنبيه الزائر بذلك وتأكيد خروجه من موقعك؛ ستكون الدالة في الحدث onClick في الوصلة الخارجية، والدالة هي:

function leave_page()
{
var con = confirm('هل أنت متأكد من مغادرة هذه الصفحة؟\n http://www.alrashdi.co');
if(con)
return true;
else
return false;
}

لاحظ وجود الكلمة المفتاحية return، وتستخدم لتأكيد العملية ما بعد الحدث، أو الحركة القادمة، أي أنه في حالة التأكيد، يواصل المتصفح العملية باتجاهه للصفحة الخارجية، وفي حالة عدم التأكيد، يحبط المتصفح الانتقال للصفحة الخارجية. الشفرة كاملة:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript Example 2</title>

<script type="text/javascript">
function leave_page()
{
var con = confirm('هل أنت متأكد من مغادرة هذه الصفحة؟\n http://www.alrashdi.co');
if(con)
return true;
else
return false;
}
</script>

</head>

<body>
<div align="center"><a href="http://www.hct.me" onClick="return leave_page();">Go to HCT Community Site</a></div>
</body>
</html>

هنا نصل لختام هذا الدرس، إن كانت هناك أسئلة، يرجى طرحها في التعليقات أسفل الدرس 🙂

 

Nov 032011
 

قد لا تصنف JavaScript كلغة برمجة عند البعض، لأن خواصها تقتصر على جهة المتصفح دون خادم الموقع. فما هي JavaScript؟

جافا سكريبت (بالإنجليزية: JavaScript‏) هي لغة برمجة وتأتي كلمة جافا من الإنجليزية وتعني جزيرة جاوة وهي جزيرة إندونيسية، ولا علاقة لمنشأ اللغة باسمها. طورت جافاسكريبت من قبل شركة نيتسكيب (Netscape) وصن مايكروسيستمز (Sun Micro systems). تختلف الجافا سكريبت عن لغة الجافا من شركة صن مايكروسيستمز والتشابه في الاسم لا يرجع لأنهما مثل بعضهما، وفائدة هذه اللغة هي بثّ الحياة إلى شبكة الإنترنت، حيث تستخدم لإنشاء صفحات إنترنت أكثر تفاعلية (ديناميكية).

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

من الأمثلة على JavaScript:

– النوافذ التنبيهية، صورة:

– نوافذ التأكيد، صورة:

– نوافذ ادخال النصوص، صورة:

– استبدال عنوان الصفحة

– التأكد من الحقول المدخلة

– تقنية Ajax، ومكتبة jQuery

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

 

كيفية إضافة JavaScript إلى صفحة معينة:

هناك طريقتان، الأولى داخلية وتكون بإضافة شفرة JS في ذات الصفحة ضمن وسم <script>، للتوضيح:

<script type="text/javascript">
window.alert('Welcome to my blog \n http://www.alrashdi.co');
</script>

في أي مكان في الصفحة لكن يفضل أن يكونا من ضمن محتوى الوسم <head>، مثال:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript Example 1</title>

<script type="text/javascript">
window.alert('Welcome to my blog \n http://www.alrashdi.co');
</script>

</head>

<body>
</body>
</html>

والطريقة الثانية بربط JavaScript بملف خارجي (الامتداد .js) بالصفحة والمثال:

<script type="text/javascript" src="http://www.alrashdi.co/file.js"></script>

أو كاملًا:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript Example 1</title>

<script type="text/javascript" src="http://www.alrashdi.co/file.js"></script>
</head>

<body>
</body>
</html>

بشكل عام، JS هي ليست صعبه في التعلم، لكن مثل غيرها، تحتاج للتجربة والممارسة لتتقنها جيدًا، وسأضع الأمثلة في درس لاحق بإذن الله 🙂