JavaScript – Abdulaziz Al Rashdi

التأكد من الحقول وارسال البيانات بـAjax عبر jQuery

JavaScript, jQuery, لغات برمجة 2 Responses »

أغسطس 072013

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

ما قبل البدأ: مكتبة jQuery:

مكتبة jQuery عبارة عن مكتبة مبنية على JavaScript لتسهل على المستخدم الوصول لعديد من دوال اللغة الرئيسية بشكل سلس.

مكتبة jQuery تتكون من ملف واحد فقط ويمكنك تنزيله من موقعها الرسمي. بالنسبة للاستخدام فكل ما عليك هو ربطها بالصفحة والطريقة هي بوضع التالي بين وسمي head في الصفحة:

<script type="text/javascript" src="jquery.js"></script>

أي أن “jquery.js” عبارة عن اسم الملف ومساره. للتعامل مع الأحداث في jQuery نستخدم هذه الطريقة:

$(handler).click();

أي أن “handler” يقصد بها المقبض أو الجزء المسبب للحدث في الصفحة. و click هي نوع الحدث (عند الضغط) ويمكن أن تكون هناك دالة داخل الحدث. بالعودة للمقبض، هناك أكثر من طريقة لتحديد المقبض؛ منهم استخدام id الجزء المراد استخدامه مسبوقًا بـ# ، مثالًا:

<button id="test" name="test">click me</button>
<script type="text/javascript">
$('#test').click(function(){
    alert("مرحبًا");
});
</script>

طريقة أخرى وهي باستخدام الاسم، لكن في هذه الحالة يجب تحديد نوع العنصر، مثالًا إن كان حقل فتسبقه input وإن كان صندوق نص فـ textarea تسبق اسم العنصر، وهنا مثال مبني على المثال الذي سبق أعلاه:

<button id="test" name="test">click me</button>
<script type="text/javascript">
$('button[name=test]').click(function(){
    alert("مرحبًا");
});
</script>

هناك طرق أخرى لكن ما سبق يفي بالغرض لعنوان الدرس. بالنسبة للأحداث فهي عديدة منها: submit, blur, focus and change

الجزء الأول من الدرس: إنشاء النموذج: Continue reading »

محاكاة جدار Facbook، نسخة ثانية

JavaScript, PHP, تقنيات, دروس ويب, لغات برمجة No Responses »

مايو 232012

في [تطبيق مجاني] محاكاة لجدار Facebook وضعت الاصدار الأول من تطبيق محاكاة جدار Facebook، والمقصد من وضعه هو استغلاله لمن أراد الاستفادة منه في تطوير مهاراته في PHP، من مبدأ المشاركة في التعلم، ويمكن تطوير التطبيق لما يتناسب مع الاستخدام الشخصي في الموقع ما دام أنه لا يخالف الشريعة الاسلامية بكل حرية 🙂

الجديد في هذا التطبيق:

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

مثال:

http://www.alrashdi.co/tests/fbwall/index.php

username: test

password: test

(يجب تسجيل الدخول لمشاهدة الجدار)

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

مثال للعرض باللغة العربية:

التنزيل:

fbWall-v1.2.zip

طريقة التركيب:

فك ضغط الملف
زراعة قاعدة البيانات
تغيير الاعدادات (اختياري)

الاعدادات:

الاعدادات موجودة في الملف includes/settings.php

<?PHP
$setting = array();
$setting['title'] = 'FB Wall'; ## عنوان الموقع
$setting['session'] = 900; ## مدة حفظ تسجيل الدخول لكل عضو بالثواني
$setting['characters'] = 200;  ## عدد الحروف الأقصى للكتابة
$setting['moderator'] = array(1); ## ارقام عضويات المشرفين
$setting['jsrefresh'] = 10000; ## الزمن لتحديث المشاركات بالمليثانية
$setting['language'] = 'default'; ## اللغات: default / arabic
?>

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

العمليات والتعابير في C, Java و PHP

C Language, Java, JavaScript, PHP, دروس ويب, لغات برمجة No Responses »

نوفمبر 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 وهكذا ..

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

التعامل مع JavaScript

JavaScript, دروس ويب, لغات برمجة No Responses »

نوفمبر 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>

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

مقدمة حول JavaScript

JavaScript, دروس ويب, لغات برمجة 1 Response »

نوفمبر 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 هي ليست صعبه في التعلم، لكن مثل غيرها، تحتاج للتجربة والممارسة لتتقنها جيدًا، وسأضع الأمثلة في درس لاحق بإذن الله 🙂