JavaScript مقابل jQuery: الاختلافات الرئيسية التي تحتاج إلى معرفتها



في JavaScript vs jQuery ، سنكتشف أيهما أفضل من الآخر. كلاهما قوي ويتم استخدامهما في تطوير الويب لنفس الغرض.

لقد عرفنا JavaScript و JQuery منذ سنوات قليلة. تم اختراع JavaScript قبل jQuery. كلاهما قوي ويتم استخدامهما في تطوير الويب ويتم استخدامهما لنفس الغرض ، أي جعل صفحة الويب تفاعلية وديناميكية. وبعبارة أخرى ، فإنها تضفي الحيوية على صفحات الويب. قد يتساءل الناس إذا تم استخدامها لنفس الغرض فلماذا هذين المفهومين المنفصلين؟ في مقالة JavaScript vs jQuery هذه ، سنكتشف أيهما أفضل من الآخر في التسلسل التالي:

JavaScript: لغة قوية في تطوير الويب

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





جافا سكريبت - جافا سكريبت مقابل مسج - edureka

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



دعنا ننتقل إلى JavaScript مقابل jQuery ونفهم المكتبة التي تم تطويرها من JavaScript.

jQuery: مكتبة تم تطويرها من JavaScript

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

كيفية إنشاء تطبيق في Salesforce



jQuery هي إحدى مكتبات JavaScript التي تم إنشاؤها منها. إنها مكتبة JavaScript الأكثر شهرة التي اخترعها John Resign وتم إصدارها في يناير 2006 في BarCamp NYC. jQuery مكتبة مفتوحة المصدر مجانية ومرخصة بموجب ترخيص MIT. هذا لديه ميزة قوية للتوافق عبر المستعرضات. يمكنه بسهولة التعامل مع مشكلات المستعرضات التي يمكن أن نواجهها باستخدام JavaScript. وبالتالي ، يستخدم العديد من المطورين jQuery لتجنب مشكلات التوافق عبر المستعرضات.

دعنا الآن ننتقل إلى مدونة JavaScript vs jQuery ونرى سبب إنشاء jQuery.

لماذا تم إنشاء jQuery وما هي الإمكانيات الخاصة لـ jQuery؟

في JavaScript ، يتعين علينا كتابة الكثير من التعليمات البرمجية للعمليات الأساسية بينما باستخدام jQuery ، يمكن إجراء نفس العمليات باستخدام سطر واحد من التعليمات البرمجية. لذلك يجد المطورون أنه من الأسهل التعامل مع jQuery أكثر من JavaScript.

  • على الرغم من أن JavaScript هي اللغة الأساسية التي تطورت منها jQuery ، فإن jQuery تجعل معالجة الأحداث ، ومعالجة DOM ، يستدعي Ajax أسهل بكثير من JavaScript. يسمح لنا jQuery أيضًا بإضافة تأثيرات متحركة على صفحة الويب الخاصة بنا والتي تتطلب الكثير من الألم وأسطر التعليمات البرمجية باستخدام JavaScript.
  • يحتوي jQuery على مكونات إضافية مدمجة لإجراء عملية على صفحة ويب. علينا فقط تضمين أو استيراد المكون الإضافي في صفحة الويب الخاصة بنا لاستخدامه. وبالتالي فإن الإضافات تسمح لنا بإنشاء تجريدات للرسوم المتحركة والتفاعلات أو التأثيرات.
  • يمكننا أيضًا إنشاء مكوننا الإضافي المخصص باستخدام jQuery. إذا احتجنا إلى رسم متحرك على صفحة ويب بطريقة معينة ، فيمكننا تطوير مكون إضافي وفقًا للمتطلبات واستخدامه على صفحة الويب الخاصة بنا.
  • يحتوي jQuery أيضًا على مكتبة أدوات واجهة مستخدم عالية المستوى. تحتوي مكتبة الأدوات هذه على مجموعة كاملة من المكونات الإضافية التي يمكننا استيرادها على صفحة الويب الخاصة بنا واستخدامها لإنشاء صفحات ويب سهلة الاستخدام.

دعونا نفهم الفرق.

JavaScript مقابل jQuery

الميزاتجافا سكريبتمسج
وجودJavaScript هي لغة مستقلة ويمكن أن توجد بمفردها.jQuery هي مكتبة JavaScript. لم يكن ليُبتكر لو لم يكن JavaScript موجودًا. لا يزال jQuery معتمدًا على JavaScript حيث يجب تحويله إلى JavaScript حتى يتمكن محرك JavaScript المدمج في المتصفح من تفسيره وتشغيله.
لغةإنها لغة برمجة نصية مفسرة عالية المستوى من جانب العميل. هذا هو مزيج من نص ECMA و DOM (نموذج كائن المستند)إنها مكتبة JavaScript خفيفة الوزن. لديها فقط DOM
الترميزيستخدم JavaScript المزيد من سطور التعليمات البرمجية حيث يتعين علينا كتابة التعليمات البرمجية الخاصة بنايستخدم jQuery عددًا أقل من سطور التعليمات البرمجية مقارنةً بجافا سكريبت لنفس الوظيفة حيث تمت كتابة الرمز بالفعل في مكتبته ، وعلينا فقط استيراد المكتبة واستخدام الوظيفة / الطريقة ذات الصلة للمكتبة في التعليمات البرمجية الخاصة بنا.
إستعمالتتم كتابة كود JavaScript داخل علامة البرنامج النصي في صفحة HTML
نحتاج إلى استيراد jQuery من CDN أو من مكان يتم فيه تنزيل مكتبة jQuery من أجل استخدامها. يتم أيضًا كتابة كود jQuery داخل علامة البرنامج النصي على صفحة HTML.
الرسوم المتحركةيمكننا عمل رسوم متحركة في JavaScript مع العديد من أسطر التعليمات البرمجية. تتم الرسوم المتحركة بشكل أساسي من خلال معالجة نمط صفحة Html.في jQuery ، يمكننا إضافة تأثيرات الحركة بسهولة باستخدام عدد أقل من سطور التعليمات البرمجية.
سهولة الاستخداميمكن أن يكون JavaScript مرهقًا للمطور لأنه قد يستغرق عددًا من سطور التعليمات البرمجية للوصول إلى وظيفةيعد jQuery أكثر سهولة في الاستخدام من JavaScript مع بضعة أسطر من التعليمات البرمجية
التوافق عبر المستعرضاتفي JavaScript ، قد نضطر إلى التعامل مع التوافق عبر المستعرضات عن طريق كتابة تعليمات برمجية إضافية أو حل بديل.jQuery متوافق مع المتصفحات. لا داعي للقلق بشأن كتابة أي حل بديل أو رمز إضافي لجعل شفرتنا متوافقة مع المتصفح.
أداءيمكن أن تكون JavaScript النقية أسرع في تحديد / معالجة DOM من jQuery حيث تتم معالجة JavaScript مباشرة بواسطة المتصفح.يجب تحويل jQuery إلى JavaScript لتشغيله في متصفح.
معالجة الأحداث والتفاعل واستدعاءات Ajaxكل هذا يمكن القيام به في JavaScript ولكن قد نضطر إلى كتابة العديد من أسطر التعليمات البرمجية.كل هذا يمكن القيام به بسهولة باستخدام jQuery مع عدد أقل من سطور التعليمات البرمجية. من الأسهل في jQuery إضافة التفاعلية والرسوم المتحركة وأيضًا إجراء مكالمات ajax لأن الوظائف محددة مسبقًا في المكتبة. نحن فقط نستخدم هذه الوظائف في الكود الخاص بنا في الأماكن المطلوبة.
الإسهابJavaScript مطول حيث يتعين على المرء كتابة العديد من أسطر التعليمات البرمجية لوظيفة مايعد jQuery موجزًا ​​ويستخدم عددًا أقل من أسطر التعليمات البرمجية ، وأحيانًا سطر واحد فقط من التعليمات البرمجية.
حجم والوزنكونها لغة ، فهي أثقل من jQueryكونها مكتبة ، فهي خفيفة الوزن. يحتوي على نسخة مصغرة من الكود الخاص به مما يجعله خفيف الوزن.
إعادة الاستخدام وقابلية الصيانةيمكن أن تكون تعليمات JavaScript البرمجية مطولة وبالتالي قد يكون من الصعب صيانتها وإعادة استخدامها.مع عدد أقل من سطور التعليمات البرمجية ، يكون jQuery أكثر قابلية للصيانة حيث يتعين علينا فقط استدعاء الوظائف المحددة مسبقًا في مكتبة jQuery في التعليمات البرمجية الخاصة بنا. هذا يجعلنا أيضًا نعيد استخدام وظائف jQuery بسهولة في أماكن مختلفة في الكود.

المضي قدمًا في الاختلاف بين JavaScript و jQuery with Example.

JavaScript مقابل jQuery مع أمثلة

دعونا ننظر في الأمثلة.

إضافة JavaScript و jQuery في مستند HTML الخاص بنا

تتم إضافة JavaScript مباشرة في مستند HTML داخل العلامة أو يمكن إضافة ملف JavaScript خارجي في مستند HTML باستخدام السمة src.
مكتوب مباشرة داخل وسم البرنامج النصي:

تنبيه ('تم استدعاء مربع التنبيه هذا مع حدث onload')

من أجل استخدام jQuery ، نقوم بتنزيل الملف من موقعه على الويب ونحيل مسار ملف jQuery الذي تم تنزيله في السمة src الخاصة بعلامة SCRIPT أو يمكننا الحصول عليه مباشرةً من CDN (شبكة توصيل المحتوى).

 

باستخدام CDN :

 

دعونا نفهم اجتياز DOM والتلاعب

اجتياز DOM ومعالجته

في JavaScript:

يمكننا تحديد عنصر DOM في JavaScript باستخدام طريقة document.getElementById () أو باستخدام طريقة document.querySelector ().

var mydiv = document.querySelector (“# div1”)

أو

document.getElementById (“# div1”)

في jQuery:

هنا ، سيتعين علينا فقط استخدام الرمز $ مع وجود المحدد بين قوسين.

استنساخ عميق واستنساخ ضحل في جافا
$ (selector) $ ('# div1') - المحدد هو معرف 'div1' $ ('. div1') - المحدد هو فئة 'div1' $ ('p') - المحدد هو الفقرة الموجودة في صفحة Html

في العبارة أعلاه ، $ هي علامة تُستخدم للوصول إلى jQuery ، المحدد هو عنصر HTML.

إضافة الأنماط في JavaScript:

document.getElementById ('myDiv'). style.backgroundColor = '# FFF'

إضافة الأنماط في jQuery:

$ ('# myDiv'). css ('background-color'، '# FFF')

يشير محدد #myDiv إلى معرف 'myDiv'

يعد اختيار عنصر DOM ومعالجته أكثر إيجازًا في jQuery منه في JavaScript.

المضي قدما في التعامل مع الحدث.

التعامل مع الحدث

في JavaScript ، نختار عنصر HTML:

document.getElementById ('# button1'). addEventListener ('click'، myCallback) function myCallback () {console (“inside myCallback function”)}

هنا يتم استخدام طريقة getElementById () لتحديد عنصر بواسطة معرفه ، ثم نستخدم طريقة addEventListener () لإضافة مستمع الحدث إلى الحدث. في هذا المثال ، نضيف وظيفة myCallback كمستمع إلى حدث 'click'.

يمكننا أيضًا استخدام دالة مجهولة في المثال أعلاه:

document.getElementById ('# button1'). addEventListener ('click' ، الوظيفة () {console.log ('داخل الوظيفة')})

يمكن إزالة eventListener باستخدام طريقة removeEventListener ()

document.getElementById (“# button1”). removeEventListener (“click” ، myCallback)

في jQuery

يحتوي jQuery على أحداث محددة مسبقًا لجميع إجراءات DOM تقريبًا. يمكننا استخدام حدث jQuery المحدد لإجراء ما.

$ ('p'). click (function () {// click action})

أمثلة أخرى هي:

$ ('# button1'). dblclick (function () {// الإجراء لحدث النقر المزدوج على عنصر html بالمعرف 'button1'}

تُستخدم طريقة JQuery 'on' لإضافة حدث واحد أو أكثر إلى عنصر DOM.

$ (“# button1”). on (“click”، الوظيفة () {// action here})

يمكننا إضافة أحداث متعددة ومعالجات أحداث متعددة باستخدام طريقة on.

$ (“button1”). on ({click: function () {// action here}، dblclick: function () {// action here}})

يمكن أن يكون لحدثين أو أكثر نفس المعالج على النحو التالي:

$ (“# button1”). على (“click dblclick” ، الوظيفة () {// action here})

وهكذا نرى أنه باستخدام كود أقل وإيجازًا ، يكون التعامل مع الأحداث أسهل في jQuery منه في JavaScript.

المضي قدما مع Ajax Calls.

مكالمات أجاكس

في JavaScript

استخدم JavaScript كائن XMLHttpRequest لإرسال طلب Ajax إلى الخادم. يحتوي XMLHttpRequest على عدة طرق لإجراء استدعاء Ajax. الطريقتان الشائعتان مفتوحتان (طريقة ، URL ، غير متزامن ، مستخدم ، PSW) ، إرسال () وإرسال (سلسلة).
لنقم بإنشاء XMLHttpRequest أولاً:

var xhttp = new XMLHttpRequest () ثم استخدم هذا الكائن لاستدعاء الطريقة المفتوحة: xhttp.open ('GET'، 'D: //getinfo.txt'، true) xhttp.send ()

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

تقديم طلب آخر:

var xhttp = new XMLHttpRequest () ثم استخدم هذا الكائن لاستدعاء الطريقة المفتوحة وتقديم طلب نشر: xhttp.open ('POST'، 'D: //postinfo.txt'، true) xhttp.send ()

لنشر البيانات مع الطلب ، نستخدم طريقة setRequestHeader لـ xhttp لتحديد نوع البيانات التي سيتم إرسالها وترسل طريقة الإرسال البيانات في أزواج المفتاح / القيمة:

xhttp.setRequestHeader ('Content-type'، 'application / x-www-form-urlencoded') xhttp.send ('name = Ravi & لقب = Kumar')

في jQuery

يحتوي jQuery على العديد من الطرق المضمنة لإجراء مكالمات Ajax. باستخدام هذه الطرق ، يمكننا استدعاء أي بيانات من الخادم وتحديث جزء من صفحة الويب بالبيانات. تجعل طرق jQuery استدعاء Ajax أمرًا سهلاً.
طريقة jQuery load (): تقوم هذه الطريقة بجلب البيانات من عنوان URL وتحميل البيانات إلى محدد HTML.
$ ('p'). load (URL، data، callback)
عنوان URL هو الموقع الذي يتم استدعاؤه للبيانات ، ومعلمة البيانات الاختيارية هي البيانات (أزواج المفتاح / القيمة) التي نريد إرسالها مع المكالمة والمعلمة الاختيارية 'رد الاتصال' هي الطريقة التي نريد تنفيذها بعد التحميل قد اكتمل.

الأسلوبان jQuery $ .get () و $ .post (): تقوم هذه الطريقة بجلب البيانات من عنوان URL وتحميل البيانات إلى محدد HTML.
$ .get (URL، callback)
عنوان URL هو الموقع الذي يتم استدعاؤه للبيانات واسترداد الاتصال هو الطريقة التي نريد تنفيذها بعد اكتمال التحميل.

$ .post (URL، data، callback)
عنوان URL هو الموقع الذي يتم استدعاؤه للبيانات ، والبيانات هي زوج / أزواج المفتاح / القيمة الذي نريد إرساله مع المكالمة وإعادة الاتصال هي الطريقة التي نريد تنفيذها بعد اكتمال التحميل. هنا معلمات البيانات ورد الاتصال اختيارية.

استدعاءات jQuery Ajax أكثر إيجازًا من JavaScript. في JavaScript ، نستخدم كائن XMLHTTPRequest ، في jQuery لا يتعين علينا استخدام مثل هذا الكائن.

المضي قدما مع الرسوم المتحركة.

المتطلبات الأساسية لتعلم التعلم الآلي

الرسوم المتحركة

في JavaScript

لا تحتوي JavaScript على وظيفة رسوم متحركة محددة مثل وظيفة jQuery animate (). في JavaScript ، يتم تحقيق تأثير الرسوم المتحركة بشكل أساسي عن طريق معالجة نمط العنصر أو باستخدام خصائص تحويل CSS أو ترجمتها أو تحريكها. تستخدم JavaScript أيضًا أساليب setInterval () و clearInterval () و setTimeout () و clearTimeout () لتأثيرات الرسوم المتحركة.

setInterval (myAnimation، 4) function myAnimation () {document.getElementById ('# div1'). style.transform = 'translate (100px، 100px)' document.getElementById ('# div1'). style.transform = 'rotate (' # div1 ') 20 درجة) '}

تدور الرسوم المتحركة في JavaScript بشكل أساسي حول معالجة خصائص CSS.

في jQuery

يحتوي jQuery على العديد من الطرق المدمجة لإضافة رسوم متحركة أو تأثيرات على عناصر HTML. دعونا نتحقق من بعضها.
طريقة animate (): تستخدم هذه الطريقة لإضافة رسوم متحركة على عنصر.

$ ('# button1'). click (function () {$ ('# div1') .animate ({height: '300px'})})

طريقة show (): تُستخدم هذه الطريقة لجعل عنصر مرئيًا من حالة مخفية.

$ ('# button1'). انقر فوق (الوظيفة () {$ ('# div1'). show ()})

طريقة إخفاء (): تستخدم هذه الطريقة لإخفاء عنصر من حالة مرئية.

$ ('# button1'). انقر فوق (الوظيفة () {$ ('# div1'). إخفاء ()})

jQuery لها طرقها الخاصة لإنتاج الرسوم المتحركة والتأثيرات في صفحة ويب.

باختصار ، JavaScript هي لغة لتطوير الويب ، jQuery هي مكتبة نشأت من JavaScript. JavaScript و jQuery لهما أهمية خاصة في تطوير الويب.

الآن بعد أن تعرفت على JavaScript Loops ، تحقق من ملف بواسطة Edureka. سيساعدك تدريب شهادة تطوير الويب على تعلم كيفية إنشاء مواقع ويب رائعة باستخدام HTML5 و CSS3 و Twitter Bootstrap 3 و jQuery و Google APIs ونشرها في Amazon Simple Storage Service (S3).

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في 'JavaScript vs jQuery' وسنعاود الاتصال بك.