כש-JavaScript הגיעה
בתחילת דרכו של האינטרנט הדפים היו פשוטים למדי: הם הכילו טקסט, מספר מצומצם של תמונות ועיצוב מינימלי לחלוטין. בזמנו, העברת תמונה בגודל של מספר קילובייטים בלבד ארכה זמן רב למדי. מלבד העובדה שהאינטרנט היה איטי, גם המחשבים עצמם היו חלשים והתקשו להציג אנימציות פשוטות או דפי אינטרנט המכילים מספר תמונות. כיום, רוחב הפס גדל ואיתו גם המחשבים התחזקו ואלו יכולים לטעון עמודי אינטרנט כבדים בקלות רבה.
ככל שהטכנולוגיה התקדמה, איתה התקדמו גם אתרי האינטרנט. הם החלו להיראות יותר ויותר מקצועיים ודפוס העיצוב השתנה לחלוטין. דף שבעבר רק הציג מלל הפך ליצירת אומנות חוויתית למשתמש. כיום, דפי האינטרנט הם דפים אינטראקטיביים המכילים אנימציות, מידע המתעדכן בזמן אמת ועמודי תוכן מעוצבים. "המנוע" העיקרי של דפי האינטרנט האלה הוא שפת התסריט הידועה בשם "JavaScript", אשר מאפשרת לשנות הגדרות ומאפיינים בעמוד האינטרנט בזמן אמת, ללא צורך בטעינת הדף מחדש. החיסרון העיקרי בשפה זו הוא הקושי לגשת לאובייקטים השונים במסמך כגון תמונות, כפתורים, קישורים וטקסט, ולבצע עליהם מניפולציות שונות ולשנות את תכונותיהם. למשל, בכדי ליצור אנימציה שבה קובייה נעלמת וחוזרת בתדירות מסוימת עלינו לכתוב מספר שורות קוד לא מבוטל.
כאן נכנסת לתמונה jQuery, ספריה העוטפת את JavaScript ומקלה על משתמשים בפיתוח אתרי אינטרנט אינטראקטיביים בצורה קלה ומהירה יותר מ-JavaScript "טהור". במדריך זה נראה כיצד jQuery מייעלת את העבודה וכיצד אנו משתמשים בה.
|
jQuery היא מחלקת JavaScript אשר נועדה להקל על מפתחים ולייעל את זמן פיתוח דפי HTML אינטראקטיביים. ספריה זו מכילה מספר פונקציות אשר עוטפות את JavaScript ומפשטות לנו את העבודה. היא מקלה על ההתייחסות לאובייקטים במסמך, ניהול אירועים ויצירת אנימציות. כיום jQuery נמצאת בשימוש באתרים מוכרים רבים כמו גוגל, WordPress, NBC ומוזילה.
מלבד היתרון בייעול משימות פשוטות,
jQuery מציגה תמיכה ברבים מן הדפדפנים (לרשימת הדפדפנים הנתמכים
לחצו כאן). כאשר למשל אנו רוצים ליצור אנימציית
Fade (עמעום) ב-JavaScript עלינו לדאוג שהאנימציה תוצג בכל הדפדפנים בצורה זהה, דבר הדורש מאיתנו להוסיף שורות קוד נוספות בשל חוסר התאימות בין הדפדפנים. ב-
jQuery ישנה פונקציה פשוטה אשר יוצרת את אפקט ה-Fade ודואגת לכך שהאפקט יראה זהה בכול הדפדפנים, ובכך חוסך למתכנת עבודה רבה של התאמת הדף לדפדפנים השונים.
|
כפי שניתן לראות בתמונה לעיל, על הכדור הימני מוטמעת המילה "jQuery", כדור זה מתעמעם באמצעות שורת קוד פשוטה ביותר. לעומת זאת, הכדור השמאלי מתאר כדור המתעמעם באמצעות JavaScript. רק מלהסתכל על אורכו של קוד ה-JavaScript, ניתן להבין כי הוא הרבה יותר ארוך ומסורבל. נציין גם כי קוד זה לא יעבוד על כל הדפדפנים הנבחרים מפני שאינו הותאם אליהם, לעומת קוד ה-jQuery שכן ירוץ על רוב הדפדפנים. קוד ה-JavaScript דורש מאיתנו ליצור Timer שיחזור ויוריד את רמת השקיפות של כדור ה-JavaScript בקצב מסוים. jQuery עושה לנו את כל העבודה ברקע מבלי שנדע מה קורה בפנים. ניתן לחשוב על jQuery כמעין קופסא שחורה, זאת מפני שאין לנו צורך לדעת מה קורה בפנים.
הערה: ידע קודם ב-HTML ו-JavaScript הוא חובה. במדריך זה לא נעבור על הבסיס של שפות אלה.
הכל מתחיל בספריה אחת
על מנת לעשות שימוש במחלקות של JQuery, יש להשתמש בספריה הרשמית שלה. בכדי שנוכל להתחיל ולהשתמש בספריה זו עלינו להוריד אותה. ניתן להוריד את ספריה זו מן
האתר הרשמי.
לחיצה על כפתור ההורדה (Download) תוריד את קובץ ה-js למחשב האישי שלנו. אם הקובץ לא הורד ונפתח בדפדפן, שמרו את הדף עם הסיומת js וקראו לקובץ שהורדתם בשם jquery.js. כעת, ניצור קובץ HTML חדש ונייבא את ספריית ה-jQuery בדיוק כמו שאנו מייבאים כל ספריה (השורה הבאה נוספת בתגית ה-Head):
<script type="text/javascript" src="jquery.js"></script>