אנמציות וניהול תכני HTML

אחת מהמעלות הנחמדות ש jQuery מספקת לנו – היא שיפור חווית המשתמש.

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

הצגת/הסתרת אלמנטים

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

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

הקוד בדוגמה הבאה מסתיר את כל האלמנטים שה class שלהם הוא answer:

				
					$('.answer').hide();

הקוד בדוגמה הבאה מציג בחזרה את כל האלמנטים שה class שלהם הוא answer:

				
					$('.answer').show();

תרגיל לשיעור זה מצורף קובץ בשם "hide_show_effect.html".

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

עזרה: הפונקציה parent (זו פונקציה של jQuery) מחזירה את אלמנט ה"אבא" של האלמנט הנוכחי.

לדוגמה, אם יש לנו את קוד ה HTML הבא:

				
					<div class="question"
    <div class="title">איזה קורס אנחנו לומדות?</div>
    <div class="answer">קורס JQuery</div>
</div>

אז בקוד ה jQuery הבא – הפונקציה parent תחזיר לנו את ה div הראשי, שה class שלו הוא question:

				
					$('.title').parent();

הפונקציה find מחפשת אלמנט בתוך האלמנט שעליה נרשמת הפונקציה.

בדוגמה הבאה הפונקציה מחפשת אלמנט שה class שלו הוא answer, והוא נמצא בתוך האלמנט שה class שלו הוא question:

				
					$('.question').finde('.answer');

תרגיל

כתבי חידון, לחיצה על המילה "רמז" מציגה רמז שקשור לשאלה.

תרגיל רשות (מצריך גם ידע בשפת JavaScript)

כתבי קוד שמציג סליידר תמונות. כל 3 שניות התמונות תתחלפנה.

עזרה: כדי להפעיל קוד כל 3 שניות אפשר להשתמש בפונקציה setIntervel (זו פונקציה בשפת JavaScript

לכל תמונה יהיה id שמרמז מה האינדקס שלה, למשל: "img_1".

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

טיפ

(רלוונטי גם לגבי אפקטי התצוגה האחרים שנלמד בשיעור זה):

ניתן לקבוע את משך זמן האפקט ע"י שליחת פרמטר. הפרמטר הוא מספר אלפיות השניה שבהן האפקט ימשך.

בדוגמה הבאה האלמנט יוסתר בהדרגה (אנימציה) – ההדרגה תמשך במשך 5 שניות:

				
					$('.answer').hide(5000);

עמעום

ישנם כמה סוגי עמעום ב jQuery:

1.fadeIn – הופך את האלמנט ממוסתר למוצג, עם אפקט עמעום.

2.fadeOut – הופך את האלמנט ממוצג למוסתר, עם אפקט עמעום.

3.fadeToggle – מחליף את מצב האלמנט: אם הוא מוסתר – הקוד מציג אותו, אם הוא מוצג – הקוד מסתיר אותו, עם אפקט עמעום.

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

דוגמאות

הדוגמה הבאה מציגה את האלמנט שה id שלו הוא div1, תוך שימוש באפקט העמעום:

				
					$("#div1").fadeIn();

הדוגמה הבאה מסתירה את האלמנט שה id שלו הוא div1, תוך שימוש באפקט העמעום:

				
					$("#div1").fadeOut();

הדוגמה הבאה מגדירה את שקיפות האלמנט שה id שלו הוא – div1 ל – 0.4, תוך שימוש באפקט העמעום (משך האפקט – אנימציה – הוא 4 שניות):

				
					$("#div1").fadeTo(4000, 0.4|);

תרגילים

לשיעור זה מצורף קובץ בשם "html". עברי על הקוד וודאי שאת מבינה את הקוד.

הריצי בדפדפן וצפי בתוצאה.

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

שקופית

jQuery מספקת לנו את אפקט השקופית ע"י פונקציות ה slide שלה:

1.slideDown – מציג את האלמנט (המוסתר בד”כ) ע”י אנימציה של שקופית יורדת.

2.slideUp – מסתיר את האלמנט ע”י אנימציה של שקופית עולה

3.slideToggle – בוחר באחת מ 2 האפשרויות הנ”ל בהמתאם למצב האלמנט כרגע (מוצג/מוסתר).

תרגילים

לשיעור זה מצורף קובץ בשם "html". עברי על הקוד וודאי שאת מבינה את הקוד.

הריצי בדפדפן וצפי בתוצאה.

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

אנימציות

ספריית ה jQuery מאפשרת לנו ליצור אנימציות מותאמות אישית, ע"י הפונקציה animate.

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

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

נ.ב.: את שמות פרמטרי ה CSS נרשום כמילה אחת, אין אפשרות לרשום פרמטר שהוא יותר ממילה אחת.

.'וכו .paddingLeft נרשום padding-left במקום .fontSize נרשום font-size לכן – במקום

בדוגמה הבאה תתבצע אנימציה על ה div והוא יזוז למיקום של 250 פיקסלים מצד שמאל:

				
					$("div").animate({left: '250px'});

בדוגמה הבאה תתבצע אנימציה מורכבת יותר (מיקום, שקיפות – 0.5, גובה – 150, רוחב – 150):

				
					$("div").animate({
  left: '250px',
  opacity: '0.5',
  height: '150px',
  width: '150px'
});

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

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

				
					$('h1').animate({fontSize: '100px', paddingRight: '0', paddingTop: '0'}, 2000);
$('h1').animate({fontSize: '20px', paddingRight: '300', paddingTop: '300'}, 2000);
$('h1').animate({fontSize: '120px', paddingRight: '200', paddingTop: '50'}, 2000);
$('h1').animate({fontSize: '40px', paddingRight: '900', paddingTop: '100'}, 2000);
$('h1').animate({fontSize: '200px', paddingRight: '500', paddingTop: '500'}, 2000);
);

תרגילים

לשיעור זה מצורף קובץ בשם "html". עברי על הקוד וודאי שאת מבינה את הקוד. הריצי בדפדפן וצפי בתוצאה.
צרי אנימציה יצירתית משלך 🙂
אתגר (מחייב ידע בשפת JavaScript) – צרי משחק: במשחק ירחפו חיידקים, נגיפי קורונה וכו' (הכל תמונות כמובן) – הם יזוזו כל הזמן למיקומים רנדומליים (לולאה אינסופית). לחיצה על תמונה כזו (של נגיף וכו') "תהרוג אותו" (fadeOut). האתגר יהיה למחוק את כל הנגיפים 🙂

שלחי אלי את התרגילים הפתורים במייל חוזר.

בהצלחה!

ספריית jQuery מכילה פונקציות שמסיעות לנו לנהל ולנתח תוכן HTML.

html()

הפונקציה html() מאפשרת לנו לקבל את ה HTML שהאלמנט מכיל , היא גם מאפשרת לשנות אותו.

הדוגמה הבאה מחזירה את קוד ה HTML שמכיל האלמנט עם ה class שהערך שלו הוא question:

				
					$('.question').html()

הדוגמה הבאה משנה את ערך הHTML שבאלמנט ל זהו טקסט מודג ש:

				
					|$'.question').html('זהו טקסט <b>מודגש</b>')

()text

הפונקציה text זהה לפונקציה html, אבל היא מחזירה את הטקסט ללא תגיות ה HTML שלו.

לשיעור זה מצורף קובץ בשם manipulate_html.html – עברי על הקוד שלו וודאי שאת מבינה אותו, הריצי את הקובץ בדפדפן וצפי בתוצאה.

val()

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

הדוגמה הבאה מחזירה לנו את הערך שנמצא כרגע בשדה first_name:

				
					$('first_name').val();

הדוגמה הבאה מעדכנת את הערך בשדה username ככה שהוא יהיה admin:

				
					$('username').val('admin');

תרגיל

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

JavaScript את יכולה לפשט את התהליך ולבדוק אם הססמאות ב 2 השדות של הסיסמאות – אכן זהות.

attr()

פונקציה זו מחזירה/מעדכנת את ערך של אחד המאפיינים באלמנט ה HTML (שם המאפיין המבוקש נשלח בפרמטר הראשון של הפונקציה).

המילים שמוקפות בעיגול הן דוגמאות לשמות של מאפיינים באלמנו HTML:

				
					<img fetchpriority="high" decoding="async" src="Otyzuqqnzmj.jpg;" width="500" height="500" />

הדוגמה הבאה מכניסה למשתנה elemId את ה id של האלמנט:

				
					elemId = $('div').attr('id');

הדוגמה הבאה משנה את ערך המאפיין width של האלמנט div ל – 700:

				
					$('div').attr('width', 700);

תרגיל

צרי מסמך HTML עם קישורים. כתבי קוד שמעדכן את ה href של כל הקישורים לכתובת "h ttps://appupgo.co.il /".

שלחי אלי את התרגילים הפתורים במייל חוזר.

בהצלחה!

התחברות

הרשמה

שלחי פניה דרך טופס הצרו קשר
או פני אלינו:

אודות

הקורסים

הדרכות

צרי קשר