السبت، 20 يوليو، 2013

الفرق بين jQuery و javascript


السلام عليكم ورحمة الله وبركاتة

درسنا اليوم سوف يكون عن javascript

هذا كتاب لتعلم اللغة من هنا    حمله الان



وأما بعد ..

لعدم معرفتي الكبيرة في الجي كوايري [ jQuery ] والمختصة في هذه اللغة 

المدرجة تحت نوعية الجافا سكربت [ JavaScript ]

والتي لايخلو أي موقع أو منتدى من إستخدامها في القوائم المنزلقة أو المنسدلة وعمليات

أخرى لعمل موقع داينميكي ذو شكل أفضل وبتوسيع نطاقة وتجميل شكل ومحتوى الويب سايت

لذالك أحببت أن أدرج لكم هذا الموضوع لكي أستفيد ويستفيد الجميع من المعلومات التي

أرغب أن نستشف منها ميكانيكية عمل هذه اللغة سوياً لتعم الفائدة بإذن الله على الجميع

لغة [ jQuery ] ...

ماهي هذه اللغة ؟

هي لغة مدرجة تحت نطاق الـ [ JavaScript ] بنفس عملها السابق ولكنها تقلل من عمل

تكرار الأوامر والتي تعد إستهلاك كبير من وقت المبرمج وعدم تكرار حلقات التكرار والشروط

التابعة للـ [ JavaScript ] بشكلها السابق .. فهي مكتبة مخصصة بطريقة أخرى تقلل من

عدد الأحرف وطريقة برمجتها تختلف ولكن تعطي نفس الناتج السابق ولكن بطريقة أفضل !

من هو مخترع هذه اللغة ؟

أخترع وإبتكر هذه الطريقة : جون ريسيغ في أوائل عام 2006 [ John Resig ] والذي قام

بعمل هذه المكتبة لمن يعمل مسبقاً على [ JavaScript ] ولكن بطريقة أخرى لتستطيع

أخي مبرمج [ JavaScript ] بإستخدامها بكل سهولة مع لغة [ XML ] + [ Ajax ] والتعبير

عن برمجتك بطريقة أحترافية بطعم آخر

هدف هذه اللغة ؟

هدف هذه اللغة بشكل أولي هي جعل البرمجة لمحبين [ JavaScript ] بسيطة ويمكن أيضاً

إعادة إستخدامها وتعديلها بأي وقت وبسهولة تامة ..

أليس من الجميل حقاً أن تحصل على ذالك كله ؟ بوقت بسيط ؟ وبطريقة أسهل ؟

مثال لأحد البرمجيات التي تم إستخدامها عبر البرمجة في لغة [ JavaScript ] دون

إستخدام الـ [ jQuery ] :

كود:
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
    var link = links.item(i);
    link.onclick = function() {
        return confirm('You are going to visit: ' + this.href);
    };
}
وهنا مثال آخر لأحد البرمجيات التي تم إستخدامها عبر البرمجة في لغة [ JavaScript ] بإستخدام

الـ [ jQuery ] :

كود:
$('#external_links a').click(function() {
    return confirm('You are going to visit: ' + this.href);
});
نفس العمل ؟ طريقة مميزة وسلسلة ؟

أختصرها من 8 أسطر لـ 3 أسطر فقط وأحصل على نفس الناتج !!

مايميز هذه اللغة هو بداية الأوامر بها كعمل المتغيرات في لغة [ php ]

المغيرات في لغى الـ [ php ] كانت دوماً تحصل على علامة $

مثلاً :

كود PHP:
$hamad "hamad alshamri";  
ولكن لغة [ jQuery ] الآن تدخلت بمتغير جديد وهو

$

بإضافة الـ [ function ] الخاص بك

مثال على لغة [ php ] :

كود PHP:
$swalif "swalif softs";  
الآن لغة أو مكتبة [ jQuery ] لها الـ $

كمثال :

كود PHP:
$('#external_links a').click(function() {
    return 
confirm('You are going to visit: ' this.href);
});  
فهي بإستخدام آخر والذي يعد كنوع من عمليات الـ [ php ]

ولكن بطريقة أخرى تابعة كلياً لـ [ JavaScript ] لأنها لغة [ JavaScript ] بالأساس

حيث يتم تنفيذ عمليات الـ بوضع التنصيص

$()

في بداية الأمر لعمل الـ [ function ] وتتالي الكود لطباعة الناتج المطلوب بسهولة أكبر

ومايميز هذه اللغة بأنك عزيزي مبرمج أن تقوم بإستخدام أكواد [ HTML ] بداخل هذه اللغة

دون أن تواجه أي خلل يذكر 

كود PHP:
$("<p>Hi aLL</p>")  
أو مثلاً :

كود PHP:
$('#grow').animate({ height500width500 }, "slow", function(){
    
alert('The element is done growing!');
});  
تستطيع إستخدام الـ [ CSS ] بداخل الـ [ jQuery ] كإستخدامك [ HTML ] أو [ PHP ] مع [ CSS ]

بسهولة بإذن الله ..

وكما ذكرت سابقاً بأن [ jQuery ] تمتاز بسهولتها ونسهولة الرجوع إليها مستقبلاً لتعديلها

دون قرائه العديد من الأكواد التي قد برمجت سابقاً ..!

وأهم من ذالك بأنها ستكون أكثر سهولة للمبرمج نفسه ..

أيضاً يمكنك إستخدام الـ [ jQuery ] مع الأجاكس بكل سهولة بإذن الله

فما هو رأيك لنفتح باب النقاش عن jQuery ونأخذ من هذا النقاش شئ مفيد ؟

مراجع أستفدت منها وستفيدكم بإذن الله :

http://www.jquery.com/  الموقع الرئيسي
http://docs.jquery.com/Ajax  لدروس الأجاكس
http://docs.jquery.com/Tutorials  للدروس بشكل عام
http://docs.jquery.com/Plugins  للبلوج إنز مع أمثله
http://docs.jquery.com/Downloading_jQuery  لتحميل الـ jQuery ملف js
http://www.ddj.com/java/201000935?pgno=1  شرح تفصيلي عن jQuery
http://www-128.ibm.com/developerwork...jaxjquery.html  شرح تفصيلي عن jQuery

0 التعليقات:

إرسال تعليق

لا تنسى ان تشارك samir soltani بتعليقك
او نشر الموظوع جزاك الله خيرا