إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

خطوتك الأولى في الجي كويري

7 تعليقات

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

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

الفهرس
  1. مصطلحات مهمة ( تذكير ) .
  2. ربط الصفحات بمكتبة الجي كويري .
  3. أول تابع ، تابع jquery .
  4. أول سكربت " Hello World " .

مصطلحات مهمة ( تذكير )

كما عرفنا سابقا ، تضاف لغة الجي كويري إلى صفحات الـHTML . لذلك يجب أولا تعلم أساسيات لغتي الـHTML و الـCSS ، قد يكون الكثير منكم قد تعلم لغتي الـHTML و الـCSS باللغة الفرنسية أو الإنجليزية ، و نحن هنا نتكلم بالعربية ، لذلك لا بد من الإتفاق على بعض المصطلحات العربية التي يجري تداولها في مجال الوب .

و نبدأ بأول مصطلح :

الوسم :
بالفرنسية Balise ، و الوسوم هي تلك الرموز التي نضعها دائما داخل العلامتين < > ، و هي التي تحدد طبيعة العناصر التي نريد إدخالها ، و كما نعلم جميعا ، تفرض بنية الـHTML وجود نوعين من الوسوم ، وسوم الفتح و وسوم الإغلاق .

<strong>مدونة عاشق النت مدونة جميلة</strong>

وسم الفتح هو <strong> و وسم الإغلاق هو <strong/> .


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

السمة :
بالفرنسية Attribut ، بعض عناصر ( وسوم ) الـHTML تتميز بسمات معينة نحن نحددها ، و ذلك بإضافة رموز معينة يفهمها المتصفح قبل غلق الوسم . مثال :

<img src="myPicture.png" />

src هي السمة ، و myPicture.png هي القيمة التي أخذتها تلك السمة .

الخصائص :
خصائص الـCSS ، أو les Proprietés de CSS ، و هي كل تلك الخصائص التي تتحكم في مظهر العناصر كـ color ، margin ، background إلخ .

li { color: red; }

الخاصية هنا هي color ، و red هي القيمة التي أخذتها هذه الخاصية .

المحددات :
Les Sélécteurs ، ليس في الـCSS فقط ، و إنما في جميع لغات البرمجة أيضا ، فالمحددات هي جميع تلك الرموز التي نقوم من خلالها بتحديد العناصر ، ففي المثال السابق المحددة هي li .

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

ربط الصفحات بالجي كويري

سنذكر في هذه الفقرة بالطريقة المتبعة لربط صفحاتنا بمكتبة الجي كويري ، ثم العنصر الذي سنكتب فيه السكربتات .

فكما رأينا في الفصل السابق ، لكي تعمل لغة الجي كويري يجب ربط صفحات الـHTML بالمكتبة أولا ، و المكتبة هي عبارة عن ملف جافاسكربت ، لذلك نضع داخل رأس الصفحة ( داخل العنصر <head> ) :

<script src="رابط المكتبة"></script>

رابط المكتبة ؟ يمكنك وضع الرابط ( http://code.jquery.com/jquery-1.8.0.min.js ) و هو رابط مباشر لجلب المكتبة من خادم الموقع الرسمي للغة الجي كويري .

أما إذا كنت تفضل أن تحمل المكتبة و تعمل دون إتصال بالإنترنت فيمكنك تحميل اخر إصدار من المكتبة على jQuery.com ، حجم المكتبة المضغوطة لا يتعدى 50kb ، يعني ملف صغير للغاية .

و بعد ربط الصفحة بالمكتبة ، أين سنكتب الجي كويري ؟

سنكتب الجي كويري داخل عنصر <script> آخر ، نضعه أينما أردنا ، و لكن من الأحسن وضعه بعد العنصر السابق لتفادي الأخطاء .

فعموما ستكون صفحة الـHTML بعد إضافة العنصرين كما يلي :

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <script>
             هنا نكتب الجي كويري
        </script>
    </head>
    <body>

    </body>
</html>

و في حالة ما إذا كانت لدينا الكثير من صفحات الـHTML  فيمكن كتابة الجي كويري في ملف جافاسكربت خارجي ( ملف ذو إمتداد js.* ) و ربطه بجميع الصفحات ليشتغل عليها جميعها و ذلك بإضافة العنصر التالي :

<script src="رابط الملف"></script>

مثل تقنيات ربط الصفحات بخصائص الـCSS تماما .

أول تابع ، تابع jquery .

مثل جميع لغات البرمجة ، يجب تحديد العناصر التي نريد تطبيق السكربتات عليها ، و ذلك بواسطة المحددات التي تكلمنا عنها سابقا ، و لكن قبل الإنطلاق في كتابة المحددة يجب أولا كتابة jQuery ، أو يمكن كتابة العلامة $ كإختصار للـ jQuery ، و المحددة تكتب بين قوسين و بين علامتي ".." ، فهكذا هي بنية الجي كويري . مثال :

jQuery("selecteur")......
$("selecteur")......

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

أما بالنسبة للمحددات في الجي كويري فمثلها مثل المحددات في الـCSS ، و هذا ما يزيد الجي كويري سهولة في التعلم ، غير أن هناك محددات أخرى تزيد بها الجي كويري و ذلك لتحكم أفضل و أسهل في العناصر  .

و من الأوامر المهمة التي يجب أن نتذكرها التابع ready ، فنحن نكتب الأوامر بحيث نجعل المتصفح يطبقها بعد القيام بشيء ما في الصفحة ، مثل النقر على زر ما ، أو على رابط ، أو تمرير مؤشر الفأرة على مساحة ما ، و ذلك باستخدام ما يعرف في الجافاسكربت بـتوابع الأحذات ( Javascript Events Functions ) .

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

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

و طريقة إدخاله سهلة و هي كالتالي :

jQuery(document).ready( function() {
هنا أكواد الجي كويري التي تتطبق مباشرة بعد فتح صفحة الوب
});

و يمكننا إستخدام الرمز $ إختصارا للـjQuery ليصبح الكود كالتالي :

$(document).ready( function() {
هنا  أكواد  الجي كويري التي تتطبق مباشرة بعد فتح صفحة الوب
});

و بما أنه يمكننا دمج اللغتين جي كويري و الجافاسكربت ، فيمكننا الإستغناء عن تابع الجي كويري ready و الإعتماد على تابع الجافاسكربت onload ، فهما يعملان نفس الشيء ، غير أنه يجب إستخدام التابع onload في البنية الخاصة بالجافاسكربت طبعا ، فيصبح بإمكاننا كتابة ما يلي :

window.onload = function() {
هنا  أكواد  الجي كويري التي تتطبق مباشرة بعد فتح صفحة الوب
}

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

أول سكربت " Hello World " .

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

التابع الذي يقوم بإضافة المحتويات النصية إلى العناصر هو ()text ، و بالطبع سنضيفه بعد المحددة التي ستكون عبارة عن span تشير إلى العنصر <span> الذي سنضعه في بدن الصفحة .

الكود في مجمله كالتالي :

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>HelloWorld</title>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <script>
            window.onload = function() {
                $('span').text('HelloWorld , This is jQuery first Script');
            }
        </script>
    </head>
    <body>
        <span></span>    
    </body>
</html>


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

تعليقات بلوجر

  1. مقالاتك رائعة
    ومدونتك اروع .. متابع بإذن الله

    ردحذف
  2. ما شاء الله عليك أخي عاشق مقال رائع

    ردحذف
  3. سلمت يداك اخي مبدع والله
    ربي يوفقك

    ردحذف

  4. جزاك الله خيرا اخى على الموضوع الجميل
    نفعنا الله واياك بكل خير ونفع بنا العباد

    تحياتى لجهدك الطيب

    http://shomane.blogspot.com/
    http://12abjdhoaz.blogspot.com

    ردحذف
  5. اود ان اصحح معلومة بخصوص الوسوم والعناصر :
    بالنسبة للوسوم فهي تماما كما تفضلت بشرحها
    اما بالنسبة للعناصر فهناك لبس في الموضوع اود ايضاحه :
    العنصر HTML عامة, يبتدئ من وسم البداية الى غاية وسم النهاية بما في ذالك المحتوى
    ولذالك نجد الوسوم التي لا تحتوي على محتوى مثل : img - input - br .... تسمى عناصر فارغة

    ردحذف

لإدخال الأكواد بالتعليقات عليك تحويلها بـأداة ترميز أحرف HTML الخاصة