אנו מכירים JavaScript ו- JQuery כבר לא מעט שנים. JavaScript הומצא מוקדם יותר מאשר jQuery. שניהם חזקים ומשמשים בפיתוח אתרים ומשמשים לאותה מטרה כלומר להפוך את דף האינטרנט לאינטראקטיבי ודינמי. במילים אחרות, הם מביאים חיים בדפי האינטרנט. אנשים עשויים לתהות שאם משתמשים בהם לאותה מטרה, מדוע שני המושגים הנפרדים האלה? במאמר JavaScript לעומת jQuery, נגלה מה עדיף על פני האחר ברצף הבא:
- JavaScript: שפה עוצמתית בפיתוח אתרים
- JQuery: ספרייה שפותחה מ- JavaScript
- מדוע נוצר JQuery ומהן היכולות המיוחדות של JQuery
- ההבדל בין JavaScript ל- JQuery עם דוגמאות
JavaScript: שפה עוצמתית בפיתוח אתרים
JavaScript היא שפת סקריפטים המשמשת להוספת אינטראקטיביות לדפי האינטרנט שלנו. זו אחת משלוש טכנולוגיות הליבה לצד HTML ו- CSS המשמשות ליצירת דפי אינטרנט. בעוד ש- HTML ו- CSS מגדירים את המבנה של דף האינטרנט ואת המראה / העיצוב של דפי האינטרנט, JavaScript משמש כדי להפוך את דף האינטרנט לדינמי על ידי הוספת אינטראקטיביות אליו, כלומר בעזרת JavaScript נוכל להוסיף קצת קוד ללחיצת עכבר, העכבר מעל ועוד אירועים בדף האינטרנט ועוד.
JavaScript נתמך על ידי כל דפדפני האינטרנט ולדפדפני האינטרנט מנוע JavaScript מובנה לזהות קוד JavaScript ולעבוד איתו. לפיכך, JavaScript היא בעיקר שפה בצד הלקוח. זו שפה אחת שיכולה לשמש כשפה פרוצדוראלית, כמו גם שפה מונחית עצמים מבוססת אב-טיפוס. כאשר אנו משתמשים ב- JavaScript ראשוני אנו עובדים עם השפה הפרוצדוראלית בעוד JavaScript מתקדם משתמש במושגים מונחי עצמים.
בואו נמשיך עם JavaScript לעומת jQuery שלנו ונבין את הספרייה שפותחה מ- JavaScript.
jQuery: ספרייה שפותחה מ- JavaScript
במהלך השנים JavaScript התגלה כשפה רבת עוצמה לפיתוח אתרים. ישנן ספריות ומסגרות רבות שעלו אשר בנויים על גבי JavaScript. ספריות ומסגרות אלה פותחו כדי להרחיב את יכולתו של JavaScript, לעשות איתו הרבה דברים וגם כדי להקל על עבודתו של היזם.
jQuery היא ספריית JavaScript כזו שנבנית ממנה. זוהי ספריית ה- JavaScript הפופולארית ביותר שהומצאה על ידי ג'ון רזיין ושוחררה בינואר 2006 ב- BarCamp NYC. jQuery הוא בחינם, ספריית קוד פתוח, המורשית תחת רישיון MIT. יש לזה תכונה עוצמתית של תאימות בין דפדפנים. זה יכול לטפל בקלות בבעיות בין דפדפנים שאנחנו יכולים להתמודד עם JavaScript. לכן מפתחים רבים משתמשים ב- jQuery כדי להימנע מבעיות תאימות בין דפדפנים.
עכשיו נמשיך לבלוג JavaScript לעומת jQuery ונראה מדוע נוצר jQuery.
מדוע נוצר jQuery ומה היכולות המיוחדות של jQuery?
ב- JavaScript עלינו לכתוב הרבה קוד לפעולות בסיסיות ואילו עם jQuery ניתן לבצע את אותן פעולות עם שורת קוד אחת. לכן למפתחים קל יותר לעבוד עם jQuery מאשר עם JavaScript.
- למרות ש- JavaScript היא השפה הבסיסית ממנה התפתח jQuery, jQuery הופכת את הטיפול באירועים, למניפולציה של DOM, Ajax קוראת להרבה יותר קלה מ- JavaScript. jQuery גם מאפשר לנו להוסיף אפקטים מונפשים בדף האינטרנט שלנו שלוקח הרבה כאב ושורות קוד עם JavaScript.
- ל- jQuery יש תוספים מובנים לביצוע פעולה בדף אינטרנט. עלינו רק לכלול או לייבא את התוסף בדף האינטרנט שלנו כדי להשתמש בו. כך תוספים מאפשרים לנו ליצור מופשטים של אנימציות ואינטראקציות או אפקטים.
- אנחנו יכולים גם ליצור את התוסף המותאם אישית שלנו עם jQuery. אם אנו דורשים לבצע אנימציה בדף אינטרנט בצורה מסוימת, אנו יכולים לפתח תוסף בהתאם לדרישה ולהשתמש בו בדף האינטרנט שלנו.
- ל- jQuery יש גם ספריית ווידג'טים של ממשק משתמש ברמה גבוהה. בספריית היישומונים הזו יש מגוון שלם של תוספים שנוכל לייבא בדף האינטרנט שלנו ולהשתמש בהם ליצירת דפי אינטרנט ידידותיים למשתמש.
בואו נבין את ההבדל.
JavaScript לעומת jQuery
תכונות | JavaScript | jQuery |
קִיוּם | JavaScript היא שפה עצמאית ויכולה להתקיים בפני עצמה. | jQuery היא ספריית JavaScript. זה לא היה ממציא אם JavaScript לא היה שם. jQuery עדיין תלוי ב- JavaScript מכיוון שיש להמיר אותו ל- JavaScript כדי שמנוע ה- JavaScript המובנה בדפדפן יפרש אותו ויפעיל אותו. |
שפה | זו שפת סקריפטים המתפרשת בצד הלקוח ברמה גבוהה. זהו שילוב של סקריפט ECMA ו- DOM (מודל אובייקט מסמך) | זוהי ספריית JavaScript קלה. יש לו רק את ה- DOM |
סִמוּל | JavaScript משתמש בשורות קוד נוספות מכיוון שעלינו לכתוב קוד משלנו | jQuery משתמש בפחות שורות קוד מ- JavaScript עבור אותה פונקציונליות כמו שהקוד כבר כתוב בספריה שלה, עלינו רק לייבא את הספרייה ולהשתמש בפונקציה / השיטה הרלוונטית של הספרייה בקוד שלנו. |
נוֹהָג | קוד JavaScript כתוב בתוך תג התסריט בדף HTML | עלינו לייבא את ה- jQuery מ- CDN או ממיקום בו מורידים את ספריית jQuery על מנת להשתמש בו. קוד jQuery כתוב גם בתוך תג התסריט בדף ה- HTML. |
אנימציות | אנו יכולים ליצור אנימציות ב- JavaScript עם שורות קוד רבות. אנימציות נעשות בעיקר על ידי מניפולציה בסגנון של דף HTML. | ב- jQuery, אנו יכולים להוסיף אפקטים של אנימציה בקלות עם פחות שורות קוד. |
ידידותיות למשתמש | JavaScript יכול להיות מסורבל עבור המפתח מכיוון שהוא יכול לקחת מספר שורות קוד כדי להשיג פונקציונליות | jQuery הוא יותר ידידותי למשתמש מאשר JavaScript עם מעט שורות קוד |
תאימות בין דפדפנים | ב- JavaScript, ייתכן שנצטרך להתמודד עם תאימות בין דפדפנים על ידי כתיבת קוד נוסף או דרך לעקיפת הבעיה. | jQuery תואם לדפדפן. איננו צריכים לדאוג לכתיבת פיתרון כלשהו או קוד נוסף כדי להפוך את הקוד שלנו לתואם לדפדפן. |
ביצועים | JavaScript טהור יכול להיות מהיר יותר לבחירת / מניפולציה של DOM מאשר ל- jQuery מכיוון ש- JavaScript מעובד ישירות על ידי הדפדפן. | יש להמיר את jQuery ל- JavaScript כדי להפעיל אותו בדפדפן. |
טיפול באירועים, אינטראקטיביות ושיחות של אייאקס | כל אלה יכולים להיעשות ב- JavaScript אך יתכן ונצטרך לכתוב שורות קוד רבות. | את כל אלה ניתן לעשות בקלות עם jQuery עם פחות שורות קוד. קל יותר ב- jQuery להוסיף אינטראקטיביות, אנימציות וגם לבצע שיחות ajax מכיוון שהפונקציות כבר מוגדרות מראש בספריה. אנו פשוט משתמשים בפונקציות אלה בקוד שלנו במקומות הנדרשים. |
מֶלֶל | JavaScript הוא מילולית שכן צריך לכתוב שורות קוד רבות לצורך פונקציונליות | jQuery הוא תמציתי ומשתמש בפחות שורות קוד, לפעמים רק בשורת קוד אחת. |
גודל ומשקל | בהיותה שפה, זה כבד יותר מ- jQuery | להיות ספרייה, זה קל משקל. יש לו גרסה ממוזערת של הקוד שלה שהופך אותו למשקל קל. |
יכולת שימוש חוזרת ושמירה | קוד JavaScript יכול להיות מילולית ולכן יכול להיות קשה לתחזק אותו ולהשתמש בו מחדש. | עם פחות שורות קוד, jQuery ניתן לתחזק יותר מכיוון שאנחנו פשוט חייבים לקרוא לפונקציות המוגדרות מראש בספריית jQuery בקוד שלנו. זה גם גורם לנו לעשות שימוש חוזר בפונקציות jQuery במקומות שונים בקוד. |
ממשיכים בהבדל בין JavaScript ל- jQuery עם דוגמה.
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:
כאן, נצטרך להשתמש בסמל $ רק כאשר הבורר בסוגריים.
$ (בורר) $ ('# div1') - הבורר הוא מזהה 'div1' $ ('. div1') - הבורר הוא מחלקה 'div1' $ ('p') - הבורר הוא הפיסקה ב דף HTML
בהצהרה לעיל, $ הוא סימן המשמש לגישה ל- jQuery, הבורר הוא אלמנט HTML.
הוספת סגנונות ב- JavaScript:
document.getElementById ('myDiv'). style.backgroundColor = '# FFF'
הוספת סגנונות ב- jQuery:
$ ('# myDiv'). css ('צבע רקע', '# FFF')
בורר #myDiv מתייחס למזהה 'myDiv'
בחירת רכיבי DOM ומניפולציה הם הרבה יותר תמציתיים ב- jQuery מאשר ב- JavaScript.
ממשיכים בטיפול באירועים.
טיפול באירועים
ב- JavaScript אנו בוחרים אלמנט HTML:
document.getElementById ('# button1'). addEventListener ('לחץ ', myCallback) פונקציה myCallback () {console (' בתוך myCallback פונקציה ')}
כאן נעשה שימוש בשיטת getElementById () לבחירת אלמנט לפי המזהה שלו, ואז אנו משתמשים בשיטת addEventListener () כדי להוסיף מאזין לאירוע לאירוע. בדוגמה זו, אנו מוסיפים את פונקציית myCallback כמאזין לאירוע ה'קליק '.
אנו יכולים להשתמש גם בפונקציה אנונימית בדוגמה שלעיל:
document.getElementById ('# button1'). addEventListener ('לחץ ', פונקציה () {console.log (' בתוך הפונקציה ')})
ניתן להסיר את eventListener באמצעות השיטה removeEventListener ()
להמיר מחרוזת תאריך לתאריך
document.getElementById ('# כפתור 1'). removeEventListener ('לחץ', myCallback)
ב- jQuery
jQuery הגדיר מראש אירועים כמעט לכל פעולות ה- DOM. אנו יכולים להשתמש באירוע הספציפי jQuery לצורך פעולה.
$ ('P'). לחץ על (פונקציה () {// לחץ על פעולה})
דוגמאות נוספות הן:
$ ('# כפתור 1'). Dblclick (פונקציה () {// פעולה עבור אירוע הלחיצה הכפולה על רכיב ה- html עם המזהה 'כפתור 1'}
שיטת JQuery 'on' משמשת להוספת אירוע אחד או יותר לאלמנט DOM.
$ ('# Button1'). על ('לחץ', פונקציה () {// פעולה כאן})
אנו יכולים להוסיף מספר אירועים ומספר מטפלים באירועים באמצעות שיטה.
$ ('כפתור 1'). על ({לחץ: פונקציה () {// פעולה כאן}, dblclick: פונקציה () {// פעולה כאן}})
לשני אירועים או יותר יכול להיות אותו מטפל כמפורט להלן:
$ ('# Button1'). ב- ('לחץ dblclick', פונקציה () {// פעולה כאן})
לפיכך אנו רואים שעם קוד פחות ותמציתי, הטיפול באירועים קל יותר ב- jQuery מאשר ב- JavaScript.
ממשיכים עם שיחות אייאקס.
אייאקס מתקשרת
ב- JavaScript
JavaScript השתמש באובייקט XMLHttpRequest כדי לשלוח בקשת Ajax לשרת. ל- XMLHttpRequest יש מספר שיטות לבצע את שיחת Ajax. שתי השיטות הנפוצות הן פתוחות (שיטה, URL, אסינכרון, משתמש, PSW), send () ושליחה (string).
בוא ניצור תחילה XMLHttpRequest:
var xhttp = XMLHttpRequest חדש () ואז השתמש באובייקט זה כדי לקרוא לשיטה הפתוחה: xhttp.open ('GET', 'D: //getinfo.txt', נכון) xhttp.send ()
השיטה הפתוחה מבקשת לקבל בקשה לשרת / מיקום, האמיתי מציין שהבקשה אסינכרונית. אם הערך שגוי, המשמעות היא שהבקשה סינכרונית.
הגשת בקשת הודעה:
var xhttp = XMLHttpRequest חדש () ואז השתמש באובייקט זה כדי לקרוא לשיטה הפתוחה ובקש בקשת הודעה: xhttp.open ('POST', 'D: //postinfo.txt', נכון) xhttp.send ()
כדי לפרסם נתונים עם הבקשה, אנו משתמשים בשיטת setRequestHeader של xhttp כדי להגדיר את סוג הנתונים שיש לשלוח ושיטת השליחה שולחת את הנתונים בזוגות מפתח / ערך:
xhttp.setRequestHeader ('סוג תוכן', 'יישום / x-www-form-urlencoded') xhttp.send ('שם = ראבי ושם משפחה = קומאר')
ב- jQuery
ל- jQuery מספר שיטות מובנות לביצוע שיחות של אייאקס. בשיטות אלה, אנו יכולים להתקשר לכל נתונים מהשרת ולעדכן חלק מדף האינטרנט בנתונים. שיטות jQuery הופכות את שיחת Ajax לקלה.
שיטת ה- jQuery load (): שיטה זו מביאה נתונים מכתובת אתר וטוענת את הנתונים לבורר HTML.
$ ('P'). טעינה (URL, נתונים, התקשרות חוזרת)
כתובת ה- URL היא המיקום שנקרא לנתונים, פרמטר הנתונים האופציונלי הוא הנתונים (זוגות מפתח / ערך) שאנו רוצים לשלוח יחד עם השיחה והפרמטר האופציונלי 'callback' הוא השיטה אותה אנו רוצים לבצע לאחר הטעינה. הושלם.
שיטת jQuery $ .get () ו- $ .post (): שיטה זו מביאה נתונים מכתובת אתר וטוענת את הנתונים לבורר HTML.
$ .get (URL, התקשרות חוזרת)
כתובת ה- URL היא המיקום שנקרא לנתונים וההתקשרות חוזרת היא השיטה שברצוננו לבצע לאחר השלמת הטעינה.
$ .post (URL, נתונים, התקשרות חוזרת)
כתובת האתר היא המיקום שנקרא לנתונים, הנתונים הם צמד המפתחות / ערכים שאנו רוצים לשלוח עם השיחה וההתקשרות חוזרת היא השיטה שברצוננו לבצע לאחר השלמת הטעינה. כאן הנתונים והפרמטרים להתקשרות הם אופציונליים.
שיחות jQuery Ajax הן תמציתיות יותר מ- JavaScript. ב- JavaScript אנו משתמשים באובייקט XMLHTTPRequest, ב- jQuery איננו צריכים להשתמש באובייקט כזה.
ממשיכים עם אנימציה.
אנימציה
ב- JavaScript
ל- JavaScript אין פונקציית אנימציה ספציפית כמו פונקציית jQuery animate (). באפקט אנימציה של JavaScript מושג בעיקר על ידי מניפולציה בסגנון האלמנט או באמצעות CSS טרנספורמציה, תרגום או הנפשה של מאפיינים. JavaScript משתמש גם בשיטות setInterval (), clearInterval (), setTimeout () ו- clearTimeout () לאפקטים של אנימציה.
setInterval (myAnimation, 4) פונקציה myAnimation () {document.getElementById ('# div1'). style.transform = 'תרגם (100 פיקסלים, 100 פיקסלים)' document.getElementById ('# div1'). style.transform = 'סובב ( 20 מעלות) '}
אנימציה ב- JavaScript עוסקת בעיקר במניפולציה על מאפייני CSS.
ב- jQuery
ל- jQuery שיטות מובנות רבות להוסיף אנימציות או אפקטים על רכיבי HTML. בואו נבדוק כמה מהם.
שיטת האנימציה (): שיטה זו משמשת להוספת אנימציה על אלמנט.
$ ('# button1'). לחץ על (פונקציה () {$ ('# div1'). animate ({height: '300px'})})
שיטת ההצגה (): שיטה זו משמשת להופעת אלמנט ממצב נסתר.
$ ('כפתור 1'). לחץ על (פונקציה () {$ ('# div1'). הצג ()})
שיטת הסתר (): שיטה זו משמשת להסתרת אלמנט ממצב גלוי.
$ ('# button1'). לחץ על (פונקציה () {$ ('# div1'). הסתר ()})
ל- jQuery יש שיטות משלה לייצר אנימציה ואפקטים בדף אינטרנט.
לסיכום, JavaScript היא שפה לפיתוח אתרים, jQuery היא ספריה שמקורה ב- JavaScript. ל- JavaScript ול- jQuery יש חשיבות משלהם בפיתוח אתרים.
עכשיו שאתה יודע על לולאות JavaScript, עיין ב מאת אדוריקה. הדרכת הסמכת בניית אתרים תעזור לך ללמוד כיצד ליצור אתרים מרשימים באמצעות HTML5, CSS3, Twitter Bootstrap 3, jQuery ו- Google APIs ולפרוס אותו ל- Amazon Simple Storage Service (S3).
יש לך שאלה עבורנו? אנא הזכיר זאת בסעיף ההערות של 'JavaScript לעומת jQuery' ונחזור אליך.