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

المتغيرات والمصفوفات في Java

 Java, لغات برمجة  1 Response »
أكتوبر 312011
 

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

أولا: للتذكير، لطباعة رسالة معينة نستخدم الشفرة الآتية:

class testvariables
{
public static void main(String[]args)
{
System.out.print("Hello hct.me!");
}
}

والناتج:

jGRASP UI

(في المربع في الأسفل)

ثانيًا: أنواع المتغيرات في Java:

أيضًا لنختصر الدرس، بالرجوع للأنواع في C، اضغط هنا

مثال على برنامج يقوم بعملية جمع عددين هم 2 في المتغير a و 8 في المتغير b و sum لتخزين الناتج:

class testvariables
{
public static void main(String[]args)
{
int a=2, b=8, sum;
sum = a+b;
System.out.print("the sum of " + a + " + " + b + " is equal " + sum);
}
}

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

import java.util.*;
class testvariables
{
public static void main(String[]args)
{
String name;
name = "Abdulaziz";
System.out.print("Hello  " + name);
}
}

الآن، وقت المصفوفات :D. لا تفرق كثيرًا عن C، المثال التالي للتوضيح:

class testvariables
{
public static void main(String[]args)
{
int sum;
int[] numbers = {2, 8};
sum = numbers[0] + numbers[1];
System.out.print("the sum of " + numbers[0] + " + "  + numbers[1] + " is equal " + sum);
}
}

لاحظ أن الفرق بسيط بين C و Java في المصفوفات، بالتالي سنترك تطبيق بقية الدرس لك كتمرين يومي إضافي :mrgreen:

المتغيرات والمصفوفات في C

 C Language, لغات برمجة  1 Response »
أكتوبر 262011
 

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

#include<stdio.h>
main()
{
    printf("Welcome to C Language, enjoy browsing http://www.alrashdi.co/blog \n");
}

ربما تكون هناك اضافة وهي “\n” ويقصد بها كتابة سطر جديد .. يمكنك التجربة عبر تكرارها بين الكلمات لترى النتيجة 🙂

مثلما شُرح سلفًا، هناك أنواع مختلفة من المتغيرات وهي char, int, float وغيرها وكل نوع يتقبل نوع معين من البيانات وللتوضيح:
char: للمدخلات الحرفية
int: عدد صحيح
float: عدد غير صحيح (رقم بفواصل مثلًا؛ لا أذكر المسمى نسبةً لعدم توافقي مع الرياضيات 😀 )

وسنقوم بعمل برنامج مبسط لعمل عملية جمع حسابية، المتغير a للرقم الأول وهو 19، والمتغير b للرقم الثاني وهو 21 وأخيرًا متغير أخير ليخزن ناتج عملية الجمع وليكن sum؛ وبما أن كافة الاعداد صحيحة سيكون النوع هو int لكافة المتغيرات..

الطريقة الأولى لتعريف المتغيرات دون ادخال القيم هي:

#include<stdio.h>
main()
{
int a,b, sum;
}

والطريقة الثانية:

#include<stdio.h>
main()
{
int a;
int b;
int sum;
}

أيضًا يمكن ادخال قيمة المتغيرات في ذات التعريف، ليكون كالتالي بالنسبة للطريقة الأولى:

#include<stdio.h>
main()
{
int a=19,b=21, sum;
}

أو التالي للطريقة الثانية:

#include<stdio.h>
main()
{
int a=19;
int b=21;
int sum;
}

ولإتمام عملية الجمع:

#include<stdio.h>
main()
{
int a=19,b=21, sum;
sum = a+b;
printf("Welcome to C Language, enjoy browsing http://www.alrashdi.co/blog \n");
printf("result of %d + %d = %d", a, b, sum);
}

لاحظ أننا قمنا بتخزين العملية الحسابية في المتغير sum، ثم عرضنا الناتج، ولإزالة الغموض عن سطر طباعة النتائج:

printf("result of %d + %d = %d", a, b, sum);

لاحظ تكرار “%d” ثلاث مرات، ومثلما ذُكر في الدرس السابق، %d ترافق النوع int، فبالتالي هي تعني 3 متغيرات من نوع int. بعد كتابة الرسالة، قمنا بتحديد قيم %d بالترتيب في بقية السطر خارج علامات الاقتباس وفصلنا بينهم بالفاصلة..

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

0 1 2 3 4 5 6 7 8 9
100 101 102 103 104 105 106 107 108 109

نلاحظ من الجدول السابق:

  1. المتغير numbers يحتوي 10 قيم مختلفة
  2. الفهرسة أو index تبدأ من الصفر، أي أن آخر فهرس يكون (طول المصفوفة – 1) وهكذا ..

المثال الآيتي يوضح كيفية تعريف المصفوفة:

#include<stdio.h>
main()
{
int numbers[10];
}

لقد تم التعريف، لكن لم ندخل القيم, ولادخال القيم:

#include<stdio.h>
main()
{
int numbers[10]={100, 101, 102, 103, 104, 105, 106, 107, 108, 109};
}

أو الطريقة الآتية:

#include<stdio.h>
main()
{
int numbers[10];
numbers[0]=100;
numbers[1]=101;
numbers[2]=102;
numbers[3]=103;
numbers[4]=104;
numbers[5]=105;
numbers[6]=106;
numbers[7]=107;
numbers[8]=108;
numbers[9]=109;
}

ولطباعة محتوى المصفوفة، نكتب اسم المتغير ورقم الفهرسة أو index، مثال:

#include<stdio.h>
main()
{
int numbers[10]={100, 101, 102, 103, 104, 105, 106, 107, 108, 109};
printf("%d is in index 5", numbers[5]);
}

 تعدد المصفوفات:

الجدول الآتي يوضح طريقة تخزين البيانات في المصفوفة المتعددة الاتجاه:

0 1 2 3 4
0 100 101 102 103 104
1 110 111 112 113 114

الجدول يوضح أن طول المصفوفة هو 5 × 2، وطريقة التعريف:

#include<stdio.h>
main()
{
int numbers[5][2];
}
وطريقة الادخال البيانات الأولى:
#include<stdio.h>
main()
{
int numbers[5][2]= {
{100, 101, 102, 103, 104},
{110, 111, 112, 113, 114}
};
}

أو الطريقة الآتية:

#include<stdio.h>
main()
{
int numbers[5][2];
numbers[0][0]=100;
numbers[1][0]=101;
numbers[2][0]=102;
numbers[3][0]=103;
numbers[4][0]=104;
numbers[0][1]=110;
numbers[1][1]=111;
numbers[2][1]=112;
numbers[3][1]=113;
numbers[4][1]=114;
}

وطريقة العرض:

#include<stdio.h>
main()
{
int numbers[5][2]= {
{100, 101, 102, 103, 104},
{110, 111, 112, 113, 114}
};
printf("%d is in index [1][0]", numbers[1][0]);
}

في العادة “التكرار” أو “loop” يرافق المصفوفات، وهو يسهل عملية تخزين البيانات، خاصة المدخلة مِن قبل المستخدم، وسيم شرح الطريقة في درس لاحق بإذن الله .. 🙂

البرنامج الأول باستخدام Java

 Java, لغات برمجة  2 Responses »
أكتوبر 232011
 

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

أولًا قبل البدأ في التطبيق العملي، يجب أن نتذكر الآتي:

  1. كل قوس، علامة اقتباس، أو قوس معكوف، يجب أن يغلق في حال فتحه.
  2. كل سطر برمجي يجب أن ينتهي بالفاصلة المنقوطة “;”.
  3. بعض الكلمات المفتاحية، تتطلب أن تكتب بنفس الطريقة في كل مرة، أي في حالة الأحرف (مثال: System != system).
  4. إضافة على النقطة السابقة، Java حساسة لحالة الأحرف، أي المتغير var لا يعادل المتغير Var، ويعتبر متغير آخر.

الآن لنبدأ التطبيق، أول نضع اسم التصنيف، ولنفترض أنه testapp

class testapp
{
}

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

class testapp
{
 public static void main(String[]args)
 {
  System.out.print("Welcome to Java hct.me visitor!");
 }
}

شرح الكلمات المفتاحية:

class: الكائن او التصنيف

public: يقصد بها أن هذه الدالة أو method، عام، ويمكن استخدامه خارج التصنيف المحدد، و private تخالفها ذلك، بحيث لا يمكن استخدم الدالة خارج ذات التصنيف

static: تعني أن الدالة يتم حلها وقت ترجمة البرنامج compiling، و Dynamic: يتم حل الدالة أثناء عمل البرنامج .. (إن صح التعبير)

main: يقصد بها الدالة الرئيسية بالبرنامج، أي التي يبدأ البرنامج بتشغيلها.

هنا، ينتهي التطبيق الأول للـJava، وسنتابع في درس آخر التطبيق الثاني في المتغيرات والمصفوفات بإذن الله 🙂

 Older Entries  Newer Entries