MooTools – מבוא

מבוא ל-MooTools עם כתיבת פונקציה ראשונה וסלקטור בסיסי.

רן בר-זיק
מאי 4, 2010
קטגוריה: MooTools
תגיות: MooTools

MooTools היא פריימוורק של JavaScript שבדומה ל-jQuery מאפשרת למפתחי אינטרנט לכתוב JavaScript באופן מהיר ואפקטיבי. מאמר זה הוא מאמר מבוא, הראשון בסדרת המדריכים על MooTools.

MooTools Vs jQuery

הנושא של Mootools מול פריימוורקים אחרים, ובפרט jQuery, נידון לא מעט פעמים במקומות שונים. בסופו של דבר, jQuery הרבה יותר אינטואטיבית ללמידה בעוד ש-MooTools נחשבת קלה יותר להבנה עבור מתכנתים שמכירים OOP. אם אין לכם מושג מה כתבתי פה, כדאי לכם ללמוד jQuery. באתר זה יש מדריך מקיף ומלא ל-jQuery שכדאי לנסות אותו.
עבור משתמשים מתקדמים יותר, MooTools יכול להיות אופציה עדיפה בשל הגמישות הרבה שלו, שנכון ל-jQuery גרסה 1.4 עדיין אין. גמישות זו מחייבת הבנה מעמיקה יותר בתכנות בעוד שב-jQuery אפשר להשתמש גם ללא ידע רב בתכנות.
בסופו של יום, הבחירה בפריימוורק נעשית לפי צרכי הפרויקט והחיבה האישית של מנהל הפיתוח לפריימוורק זה או אחר. בג'ומלה למשל, נעשה שימוש ב-MooTools ולמרות שאפשר להשתמש ב-jQuery ביחד עם MooTools, עדיף להשתמש רק ב-MooTools כאשר מפתחים על ג'ומלה.

הורדת MooTools

באתר הרשמי של MooTools ניתן להוריד את קובץ mootools. יש להציב את הקובץ ב-head עוד לפני כל קובץ אחר של ג'אווהסקריפט שאנו כותבים:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
  <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Your title</title>
    <script type="text/javascript" src="mootools.js"></script>
    <script type="text/javascript" src="yourSiteCode.js"></script>
  </head>
  <body>....</body>
</html>

ב-yourSiteCode.js אנו מכניסים את הקוד שלנו. הקוד שלנו יתבסס על ה-API של MooTools. הדוקומנטציה של MooTools זמינה באתר שלהם.

DOM Ready

מדובר באירוע הבסיסי ביותר שיש ב-MooTools (ובכלל). כאשר אנו מתחילים להריץ קוד שישנה לנו את ה-DOM, אנו מעדיפים לוודא שקודם כל הדף נטען. כך למשל, אם אני רוצה לשנות div מסוים, על מנת שהקוד יעבוד אני צריך לוודא שה-div עלה. נשמע די טריוויאלי אך זה חשוב.
אני אכתוב פונקצית alert שתרוץ ברגע שהדף עלה (זה ה-Alert שראיתם בכניסה למאמר הזה).


window.addEvent('domready', function() {
    alert("The DOM is ready.");
});

Selectors

סלקטורים הם אחת הפונקציות החשובות ביותר ב-MooTools ומאפשרות לנו לבחור אלמנטים קיימים ב-DOM על מנת לבצע בהם שינויים. השינויים יכולים להיות מכל סוג שהוא, אבל לצורך העניין והדוגמא, נגיד שאני רוצה לקחת אלמנט כלשהו ולהצמיד אליו אירוע onclick. ה-id של האלמנט הוא myElement. לפיכך עלי לבחור את האלמנט ולהצמיד לו אירוע. הבחירה היא באמצעות סלקטור ושימוש נכון ונבון בסלקטורים יכול לחסוך המון כאב ראש.

בדומה ל-getElementById, גם ב-MooTools יש לנו סלקטור לפי id והוא בא בצורת $ ואז את ה-id. שימו לב למשל ל-div הבא ונסו ללחוץ עליו:

Click me.

כך ה-div נראה בקוד ה-HTML, אין כאן איזה גליק גדול:


<div id="myElement">Click me.</div>

וזה קוד הג'אווהסקריפט שלי:


window.addEvent('domready', function() {

    $('myElement').addEvent('click', function(){
    alert('clicked!');	
    });
  
});

בואו ננתח את הקוד החביב הזה. ראשית אנו רואים שיש לנו את אירוע domready שמכיל את הכל. זה על מנת שכאשר אני מצמיד את האירוע ל-div, אני אדע בוודאות שהוא כבר נטען ולא יהיה מצב שהוא לא יעבוד לי כי הסקריפט שלי נמצא ב-head וכל הדף לא הספיק להטען.
הדבר החשוב ביותר מבחינתנו הוא ('myElement')$ שהוא הסלקטור שלנו. פה יש את פונקציות הסלקטור ($) ואת ה-id של האלמנט, במקרה הזה myElement.
לאלמנט שלי אני מוסיף אירוע באמצעות פונקצית addevent. כרגע אנו לא נתייחס לנושא הוספת האירועים.

במאמר הבא אנו נמשיך לדבר על הסלקטורים של MooTools