إذن ، هل أنت متحمس لكتابة بعض أوامر الجي كويري ، إن شاء الله في هذا الفصل سنُذكر بأهم مكونات لغة الـHTML ، لأن الجي كويري لغة برمجة تضاف إلى صفحات الـHTML ، و عن طريقها يتم خلق كل التأثيرات الحركية و الديناميكية في الصفحة ، مما يزيد ثقة المستخدم في الموقع .
سنكتشف من خلال هذه الدروس أن الجي كويري لغة خفيفة ، سهلة ، و قوية ، إذن فمرحبا بك معنا في عالم الجي كويري
.الفهرس
- مصطلحات مهمة ( تذكير ) .
- ربط الصفحات بمكتبة الجي كويري .
- أول تابع ، تابع jquery .
- أول سكربت " 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>
<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")......
$("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>
<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>
ما سبق كان مجرد مثال عملي لسابق بسيط في الجي كويري ، سنتعرف في الفصول القادمة على كل السوابق بأنواعها و أشكالها مع التعمق في كل سابق على حدة و إعطاء الأمثلة و غيرها من التقنيات التي ستساعدنا على التعلم ، كل ما يجب منك هو تطبيق كل ما تتعلمه و ليس الإكتفاء بقراءة الفصول فقط ، فبالتطبيق و إرتكاب الأخطاء يتعلم المرأ 
.
.
مقالاتك رائعة
ردحذفومدونتك اروع .. متابع بإذن الله
ما شاء الله عليك أخي عاشق مقال رائع
ردحذفموضوع رائع و مفيد جدا,حروف,حرووف,منتديات حروف,فوتوشوب حروف,حروف الفوتوشوب,موقع حروف,عالم حروف,حروف السعودية,حروف الاسماء,حروف ديزاين
ردحذفسلمت يداك اخي مبدع والله
ردحذفربي يوفقك
merci
ردحذفhttp://a-3rb.blogspot.com
ردحذفجزاك الله خيرا اخى على الموضوع الجميل
نفعنا الله واياك بكل خير ونفع بنا العباد
تحياتى لجهدك الطيب
http://shomane.blogspot.com/
http://12abjdhoaz.blogspot.com
اود ان اصحح معلومة بخصوص الوسوم والعناصر :
ردحذفبالنسبة للوسوم فهي تماما كما تفضلت بشرحها
اما بالنسبة للعناصر فهناك لبس في الموضوع اود ايضاحه :
العنصر HTML عامة, يبتدئ من وسم البداية الى غاية وسم النهاية بما في ذالك المحتوى
ولذالك نجد الوسوم التي لا تحتوي على محتوى مثل : img - input - br .... تسمى عناصر فارغة