אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » MooTools » MooTools – מבוא

MooTools – מבוא

רן בר-זיק מאי 4, 2010 10:06 am אין תגובות

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

אזהרה: אחוז השימוש ב-MooTools ירדו דרמטית ועדיף שלא להשתמש בו. אם אתם מחפשים ספרית JavaScript - שווה לכם לבדוק את jQuery במקום
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
אזהרה: אחוז השימוש ב-MooTools ירדו דרמטית ועדיף שלא להשתמש בו. אם אתם מחפשים ספרית JavaScript - שווה לכם לבדוק את jQuery במקום

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

אזהרה: אחוז השימוש ב-MooTools ירדו דרמטית ועדיף שלא להשתמש בו. אם אתם מחפשים ספרית JavaScript - שווה לכם לבדוק את jQuery במקום
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
»אלמנטים ב-MooTools
MooTools
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד