מורה פרטית: מבוא לפריימוורקים והכרת JQUERY

[wmw]

חלק א: מהו פריימוורק?

בכדי להסביר בצורה מוחשית את צורת הפעולה של פריימוורק, מהו פריימוורק, ולאיזו מטרה הוא נועד, אנסה להסביר באמצעות מקרה אמיתי.

נניח שיש לי טופס בן 20 שדות טקסט, כולם שדות חובה.

כעת אני מעוניין לבצע ואליצדיה על כל אותם שדות.

האם אצטרך לכתוב 40 פעמים את המשפט המרגיז document.getElementById ?
(20 פעם לשדה הטקסט, ועוד 20 לאובייקט עם הכוכבית)

כמובן שתמיד אני יעשה "העתק/הדבק"... אך האם לא חבל על כל הטקסט הזה?


בואו נחשוב:
מה למעשה מספק לנו המשפט הזה?
הוא בסך הכל קריאה לפונקציה הקיימת במערכת, שמחזירה אובייקט [אלמנט] לפי מאפיין ה ID שלו.

האם בגלל שמתכנני השפה לא חסכו באותיות, אנחנו ניאלץ להשתמש באותו אורך בכל קריאה לפונקציה?

מה דעתכם על הרעיון הבא?

אני מגדיר פונקציה עם שם בעל אות אחת בלבד!
הפונקציה מקבלת ID, ומחזירה אלמנט.
איך?
פשוט: היא מחזירה לפי document.getElementById.....

נקרא לפונקציה שלנו G.

והיא תיראה כך:

function G(id){
    return document.getElementById(id);
}

כאשר אני ארצה לקרוא לאובייקט, במקום להשתמש בקריאה ארוכה כל כך, אני פשוט יכתוב כך:

var name = G("txt_name");

כעת עשיתי את אותה פעולה בדיוק כמו הפעולה הוותיקה של

var name = document.getElementById("txt_name");

נחמד, נכון?

לכן כעת מעכשיו, בכל פעם שאני בכלל יתחיל לכתוב קוד עבור דף מסויים, אני יכתוב בו פעם אחת את פונקציית G, ואתרגל מעתה לא להשתמש יותר ב document.getElementById

יום אחד גיליתי עוד רעיון נחמד מאד.

אם את שדה הטקסט אני יכנה למשל txt_name או txt_address וכדומה
ואת אובייקט הכוכבית האדומה, אני יכנה txt_name_star או txt_address_star

זאת אומרת תמיד תמיד אני יתן את אותו ID בדיוק, בתוספת המחרוזת star_

כעת, אני ימציא פונקציה בשם check, ובכל פעם שארצה לבדוק שדה, אקרא לפונקציה עם ה ID שלו, היא תקרא לאובייקט באמצעות G, ובאם הוא לא תקין, היא תקרא באמצעות G לאובייקט "id+"_star ואז תהפוך אותו לגלוי...
במידה והוא תקין, היא תסתיר את הכוכבית.

כך, במשך הזמן הצטברו לי כמה וכמה פונקציות ממש שימושיות, ובכל פרוייקט חדש שכתבתי, מייד עשיתי העתק הדבק של כל הפונקציות הללו.

רגע, לא חבל כל פעם לעשות העתק הדבק?

הרי אפשר לשמור אותו כקובץ עם סיומת JS, ובכל דף חדש, לשים תגית SCRIPT שתפנה אליו.
וכך, למרות שאת הפקודות אכתוב בדף ה HTML עצמו, או בקובץ JS אחר לחלוטין, אבל בגלל שהתגית SCRIPT שלו תהיה ממוקמת ראשונה, הפונקציות שאכתוב, "יכירו" את כל הפונקציות שכתובות בו.

וכך הלכו המתכנתים ויצרו לעצמם כמה "ליבות" כאלו, לשימושם האישי ולהפצה אצל חברים.

הפריימוורק הוא למעשה קובץ JS, שנקרא כבר בתחילת העמוד, והוא בערך כמו הדוגמה שנתתי עם פונקציית G ועם עוד שלל נרחב של תכונות ופונקציות.

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

למתכנת ישנו רק צורך להכיר וללמוד את הפריימוורק, ולבצע המוני פעולות שהוא היה רגיל לכתוב עבורם קוד ארוך מאד, בקריאה קצרצרה באמצעות אותו פריימוורק.

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

על כך, באשכול הזה בתגובה הבאה.

 

[wmw]

כמעט כולנו נתקלנו כבר במושג JQUERY, מיהו ומה הוא מספר לנו?

ל JQUERY יש כמה וכמה תכונות ממש "הכרחיות", שכל מתכנת ממש "שבר את הראש" עד ש JQUERY ריכזו את הכל לשיטה אחת קבועה ומסודרת.

אחת התכונות הבסיסיות ביותר של JQ [כך אקרא מכאן ל JQUERY] היא הפילטרים.

כשאנחנו נזקקים להגיע לאובייקט על הדף, אנו מכירים את צורת הפנייה לפי ה ID.

מה דעתכם על סלקציה שונה?
סלקציה שתתן לי אובייקטים העונים למסנן שאני אקבע בעצמי.

בדפדפנים מסויימים היה אפשר לכתוב getElementByClass

האם נוכל גם אנחנו לקרוא לאובייקט לפי מאפיין CLASS?

רגע רגע, הרי בשונה מ ID שהוא ייחודי וחד פעמי בכל עמוד, את אותו קלאס אפשר לתת לכמה וכמה אובייקטים, איזה מהם תחזיר הקריאה?
את הראשון?
את האחרון?

הקריאה למעשה מחזירה את כולם, היא מחזירה מערך, סט שלם של אובייקטים.

ואם אני מחליט להסתיר למשל את כל הכוכביות האדומות שעל הדף, אני יוכל לעשות את זה בשורה אחת.

אם נתתי לכל האובייקטים של הכוכבית שעל הדף את אותו קלאס, הרי שאני יוכל בבת אחת להסתיר ולגלות אותם...

מערכת הפילטרים של JQ היא נרחבת מאד, ניתן לבנות פילטרים מסובכים, עם מגוון תנאים וסינונים מעניינים.

הבה נתחיל:

איך לדעתכם הכי הגיוני לקבוע האם אני בוחר לפי ID או לפי CLASS?

זוכרים את CSS?

ב CSS סולמית - # - מציינת ID, ונקודה -.- מציינת CLASS.

ב JQ גם כן אנחנו משתמשים באותה צורה.

כל פקודת JQ מתחילה בסימן דולר -$-.

ולכן, כדי לקרוא לאובייקט שה ID שלו הוא txt_name, אני יכתוב

var name = $('#txt_name');

התחביר יהיה יותר דומה ל CSS כשנראה איך אפשר לקרוא לכמה אובייקטים יחד

כן, בדיוק כמו ב CSS, פשוט נשים פסיק ביניהם

כך:

var objects = $('#txt_name, #txt_address');

כאשר נהיה מעוניינים לקבוע לקבוצת אובייקטים תכונה כלשהי לפי ה CLASS

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

נסגור את הגרשיים והסוגריים וזהו.

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

למשל: כשרצינו לקבל את הערך של השם שהמשתמש הקליד, כתבתנו: נקודה VALUE.

ב JQ משתמשים בפונקצייה VAL.

כך:

var name = $('#txt_name').val();

ל JQ יש גם תת פילטרים [שרובם אומצו ב CSS3]

למשל פילטר הסוגריים המרובעות.

הוא משמש כפילטר בתוך פילטר, וניתן להשתמש בו במגוון צורות.

למשל:

$('input[type="text"]');

פילטר זה יסנן את כל האובייקטים שהם INPUT וגם מאפיין TYPE שלהם הוא TEXT

אם למשל יש לי בנאי אוטומטי [בדרך כלל בצד שרת] שבונה לי אובייקטים בסדר רץ.

ואז יש לי ID שמתקבל כך:
dv_01
dv_02
dv_03
....
dv_66

האם אני יצטרך לדעת מראש כמה נבנו ?
האם אצטרך לבנות מחרוזת ארוכה כל כך?

ממש לא

אני הרי יודע שכל האובייקטים המבוקשים מתחילים במחרוזת DV וקו תחתון.
אז אני יבנה פילטר כזה:

$('div[id^="dv_"]')

הסימן ^ [שיפט 6] מסנן את כל מי שמתחיל במחרוזת המוגדרת.
כנ"ל יש סימנים נוספים לערך שמסתיים במחרוזת מוגדרת [$]
לערך שנמצא במקום כלשהו [*]
וכדומה.

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

במשך הזמן מתרגלים [מלשון תרגיל] את הפילטרים של JQ, מגלים שילובים מעניינים נוספים, מפענחים שילובים מוזרים שכתבו אחרים, ומתמקצעים בפריימוורק.



אחת הפונקציות החזקות של JQ היא CSS, והיא נועדה, איך לא, לשנות CSS לאובייקטים העונים על תנאי הסינון של הפילטר.

אם למשל ארצה לצבוע את מסגרת הטקסט באדום, אכתוב כך:

$('#txt_name').css('border' , '1px solid red');

הפרמטר הראשון מכיל את התכונה אותה בדעתי לשנות, והשני מכיל את הערך אותו אני מבקש לתת.

אם לא אספק את הפרמטר השני, אזי JQ יודע שלא באתי לשנות את הערך, אלא לקבל את הערך!

[הערה: יש עוד דרך להשתמש בפונקציה הזו, והיא מאפשרת ערכים מרובים בבת אחת, נציג אותה אחרי שנלמד על JSON]

אז יאללה, כבר מדגדג באצבעות להתחיל להתפרע עם JQ ?

הנה אנחנו מתחילים:

המערכת של jsfiddle מאפשרת לנו להפעיל את JQ בלי לכתוב תג SCRIPT עם הפנייה.

פשוט מאד, בצד שמאל יש לבחור בתיבת בחירה את גירסת JQ הרצויה [לנו זה לא משנה, אנחנו משתמשים בתכונות בסיסיות ביותר]

נבנה טבלה קטנה בת שני טורים, שני שדות טקסט, ושני כפתורים

לכל האובייקטים שבכל טור ניתן CLASS שונה, ובתיבת הטקסט נמלא צירופי צבעים, שבלחיצה על הכפתור הם יחליפו את צבע הרקע של כל הטור בבת אחת...

http://jsfiddle.net/PyA7D/

לתשומת לב:
אין בדיקה אם יש ערך בשדה, והאם הוא תקין

ניתן לכתוב ערכי צבעים כרגיל ב CSS

דהיינו, שם צבע מפורש: red, blue, green, yellow, olive וכדומה.
RGB מקוצר עם סולמית #000, #123, FFF# - כל מספר מ 1 ועד F מסמל את כמות הצבע אדום ירוק כחול.
RGB ארוך #1223A5 כל זוג מספרים מסמל גוון כנ"ל.

נסו, שנו את הקוד, הוסיפו דברים מעניינים, אל תהססו להשתולל, ותעלו לינקים של תוצאות מגניבות.

בהצלחה

 

[trew]

כמה זה הופך את הקוד לאיטי יותר?

 

[KingYes]

לא קראתי את המאמר, אבל אם עובדים נכון.. למה שיהיה קוד איטי?

 

[wmw]

אתה מתכוון לאיטיות של הביצוע, לא של הקידוד...

הקידוד מהיר פי כמה מאות...

בעקרון, יש דברים שפועלים במהירות הכי גבוהה ששייך, יותר מהצורה שבה היית עושה את זה בעצמך לבד [אלא אם היית מתקן שוב ושוב כמו JQ, ומחשב את המהלכים של מנוע הקוד ב RT]

מאידך, ישנם דברים מסויימים שעלולים לגרום לאיטיות עקב מורכבות מיותרת שנועדה לכסות על דברים שאין למשתמש מסויים צורך בהם.

איטיות נראית לעין לא מצאתי על שום מחשב, רק על סלולרים ישנים...

כיום יש JQUERY LIGHT וכל מיני אחרים שנגזרו למטרות אלו.

השימוש בהם זהה לחלוטין, כך שלעניין הקורס זה לא משנה.

 

[KingYes]

בשביל לשמור על ביצועים טובים, חייבים לעבוד עם זה בצורה נכונה. כמו נגיד, לשמור את הסלקטורים ב-cache, לרשום סלקטורים כמה שיותר מדוייקים (אבל אם משתמש ב-ID, אז לא לרשום לו שום דבר מחוץ המזהה שלו), להשתמש ב-on עם מעטפת.. וכו'.

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

 

[mat]

שינתי את זה שאפשר להשים את ה js במקומו.

http://jsfiddle.net/PyA7D/1/



וזה לדעתי יותר טוב
http://jsfiddle.net/PyA7D/2/

 

[wmw]

שינתי את זה שאפשר להשים את ה js במקומו.

http://jsfiddle.net/PyA7D/1/



וזה לדעתי יותר טוב
http://jsfiddle.net/PyA7D/2/

הלוו
עוד לא הגענו אפילו ל document ready
לא נגענו ב events

שוואייע שוואייע...

 

[wmw]

חלק ג: עוד על סלקטורים וגם על אירועים ב JQ

לפריימוורק JQ יש עוד מגוון סלקטורים מעניין.

יש אפשרות לבחור את האובייקט הראשון באמצעות המתודה first
את האחרון באמצעות last
את הזוגי והאי זוגי באמצעות even / odd [יעיל מאד בעיצוב טבלת מידע מרובת שורות]
איבר מסויים באמצעות eq
סלקטור השלילה not

יש עוד מגוון רחב ומעניין של סלקטורים כאלו.

סלקטורים בעץ:
parent - מצביע על האובייקט האב - האובייקט שמכיל את האובייקט הנדון
children - אובייקטי הבנים של האובייקט הנדון [דור אחד למטה]
find - מחפש בצאצאי האובייקט הנדון [בכל הדורות למטה]

filter - מחזיר באמצעות פונקציית בדיקה מחושבת [יקר במשאבים]
is - בודק תנאי שלא קיים לו פילטר ספציפי [למשל בדיקה האם האובייקט כרגע במצב מסויים].

רוצים דוגמאות? אל דאגה, בסוף הפרק נדגים פילטר משוכלל.

אירועים:
ראינו כבר בהדגמות, שבלחיצה על כפתור כלשהו, חיברנו אליו פונקציה שתתרחש עם הלחיצה בקוד צד הלקוח.
לשם כך כתבנו את שם הפונקציה במאפיין onclick.
האם ניתן לשייך פונקציה לאירוע גם באמצעות JQ?

למשל: האם ניתן לקבוע שכל הכפתורים מסוג מסויים בעמוד יבצעו את אותה פעולה, מבלי לכתוב אותה שוב ושוב לכל כפתור בנפרד?

התשובה היא חיובית בהחלט

באמצעות הפקודה המתאימה, ניתן לבצע את זה בפשטות.

אם נהיה מעוניינים ללכוד את אירוע הקליק, פשוט נשתמש בפונקציה click
[ישנם דרכים נוספות, שנראה אולי לאחר העמקה ב JQ]

דבר חשוב מאד שנצטרך להכיר, זו הפונקציה שממתינה ליצירת האובייקטים.
הסבר:
כאשר אנחנו כותבים פקודה על קובץ JS או בתגית SCRIPT, היא מתבצעת על ידי הדפדפן מיידית. ובדרך כלל, טרם היה סיפק ביד הדפדפן לקרוא את מסמך ה HTML ו"לצייר" את האובייקטים.

ולכן, אם נקבע באותה פקודה להריץ קוד הנוגע לאובייקטים מסויימים על הדף, סיכוי רב שהפקודה לא תתבצע, מהסיבה הפשוטה: האובייקטים טרם נוצרו....

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

היא נראית כך:

$(document).ready(function(){
    //כאן כותבים את הפקודות שייתרחשו כשהמסמך יהיה מוכן
});

אנו נדגים דוגמה מעניינת, לפילטר קצת מורכב:

נגדיר את המשימה:

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

אנו צריכים לשלוח לשרת פקודת מחיקה, עם אותו ערך מזהה, ולאחר שהשאת מחזיר תשובה חיובית, נמחק את השורה בתוך הטבלה.

הערה חשובה: בשלב זה לא נלמד איך שולחים אירוע לשרת בלי לרענן את כל הדף [AJAX] אלא נבנה פונקציה שכאילו מבצעת את זה ומחזירה תשובה חיובית.

משהו אחרון לפני שנתחיל:
היות ו JQ היא כל כך נפוצה, וגם שוקלת לא מעט [100 ק"ב +-] לכן, יש כמה אתרים, שמחזיקים עותק של ה JS לשימוש כללי.
מה הרווח?
כשהדפדפן מזהה כתובת של JS / CSS/ תמונה וכודמה שכבר שמור אצלו בזכרון, הוא לא ניגש לשרת לבקש שוב את אותו הקובץ.

כך, שגם אתר עם שרת חלש, שעלול לגרום איטיות בפתיחת המסמך [ולנטישת הגולש], יכול להשתמש בלינק מפורסם, במקום להחזיק את JQ אצלו על השרת
מה שיגרום, שיהיה סיכוי רב שהגולש כבר ביקר לאחרונה באתר אחר שסיפק לו את אותה הכתובת, כך שהדפדפן יחסוך את הקריאה לJQ שוב ושוב בכל אתר.

גוגל למשל גם מחזיקה גירסאות, ואפילו מביאה דוגמה לקוד להשתלה
בכתובת הזו: https://developers.google.com/speed/libraries/devguide#jquery

אני רוצה להשתמש במערכת אחרת של לימוד קוד.
במערכת הזו אני כבר שתלתי במקור קריאה ל JQ, כך שאתם לא רואים אותה, אבל היא פועלת.

בכל מקרה, באם תצטרכו להשתמש בעמוד כלשהו, פשוט תעתיקו את התגית SCRIPT כולה מהלינק הנ"ל [ניתן לשנות את שם הגירסה ב SRC] ותשימו בעמוד שלכם לפני פתיחת התגית סקריפט שאתם מתכנתים.

בלינק הבא נראה את הדוגמה:
נבדוק שהיא פועלת אצלינו [שימו לב, ניתן לשנות את תצוגת המקטעים על הדף בצד ימין למטה - לנוחותכם]
http://codepen.io/anon/pen/mebrL

שימו לב:
בקוד ה HTML אין בכלל חיבור לאירועים
בטבלה כל הכפתורים נכתבו אותו הדבר, יש להם קלאס בשם btn_del ואיתו JQ מזהה אותם.
את הצבעים קבעתי ב CSS, תראו שיש לו מזהה של אובייקט זוגי ולא זוגי [מה שפעם היה רק ב JQ, והיום קיים ב CSS3, כך שגם לאחר מחיקת שורה, לא יהיו שני שורות רצופות בעלות אותו צבע]

האובייקט this מתייחס למי שיצר את האירוע, כך שכאילו שלחנו את הכפתור בעצמו כפרמטר.

ואז התהליך הוא כזה:
אנו יוצרים משתנה שיחזיק את כל אובייקט השורה שבה לחצו על הכפתור
אביו של הכפתור הוא האובייקט TD, ואביו של TD, סבו של הכפתור הוא TR שהוא השורה.

כעת אנו צריכים לחלץ מתוך השורה את הערך שנכתב בשדה השני.
אנו מחפשים את הילדים מסוג TD של השורה, מסננים בעזרת EQ את הילד השני [הראשון הוא 0, השני הוא 1 השלישי הוא 2 וכו']
ואז מבקשים את ה HTML שיש בתוך השדה המבוקש.

כעת אנחנו מפעילים את הפונקציה שקוראת לשרת [כביכול..., לעת עתה זה לא בתחום השיעור הזה, הפונקציה כעת רק מקפיצה הודעה עם הערך שחולץ]
הפונקציה הנ"ל מחזירה ערך חיובי TRUE.
ואז מופעלת הפונקציה שמוחקת את השורה:
הפרמטר שנשלח אליה הוא אובייקט השורה. והיא מפעילה עליו את המתודה REMOVE של JQ

וואו, נראה לי העמסתי עליכן המון
אבל סומך עליכן שתוכלנה להתמודד עם זה.

אני כאן לעזרה והסברים.

 

[rachel1]

הלינק http://codepen.io/anon/pen/mebrL לא עובד אצלי. האתר נפתח אבל התוכן ריק.

 

[wmw]

הנה זה עלה מצויין

בדקתי במחשב אחר

 

[rachel1]

מעניין. משום מה במחשב שלי זה לא עולה. אנסה ממחשב אחר.

 

[wmw]

אם לא ילך, אעביר אותו לסביבת העבודה הקודמת.

חוץ מהבעיה הזו, החומר מובן? או שיש צורך לפשט ולהסביר דברים ?

 

[rachel1]

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

 

[wmw]

הנה בכל אופן הקוד בפלטפורמה המוכרת

http://jsfiddle.net/8g2Hq/

 

[צובעים בענק]

תודה על הפרקים שמועברים באופן ברור ומסודר!
מחכים לעוד...

 

[wmw]

טוב, אני מנסה להמשיך לפי התוכנית.

אני חושב שכעת אצור מדריך ל"גיור" תבניות HTML+CSS

אקח לי איזו תבנית לדוגמה, מאתר תבניות חינמיות, ואגייר אותו צעד אחר צעד עם הסברים.

על הדרך נלמד איך להשתמש בכלי הפיתוח של כרום.

קצת סבלנות

 

[יידישע קאפ]

קצת סבלנות

יש לי קצת סבלנות...

 

[תכל'ס]

...

 

[חנית שלום]

מוסבר בצורה בהירה יוצא מגדר הרגיל!