[Powered by Google Translate] [סמינר: jQuery] [Vipul Shekhawat, אוניברסיטת הרווארד] [זה CS50.] [CS50.TV] אם אתם עוקבים יחד בבית, אתה בעצם יכול לגשת השקופיות שלי באינטרנט על ידי לחיצה על קישור זה. זה TjjRWj, על bit.ly. גם אתה יכול פשוט ללכת לכתובת האתר ישירות, אשר cloud.cs50.net / ~ vshekhawat, שהוא השם שלי, וjQuery. אני מאוד ממליץ לך לבצע יחד, אם אתה צופה בבית, ואם אתה כאן, גם, כי זו מצגת די אינטראקטיבית. 

אז היום אני הולך לדבר על jQuery, והשאלה הראשונה היא, מה הוא jQuery? בשנה זו, אני יודע שאתם לא מכוסים JavaScript בפרטים רבים ככל יש לנו בשנים האחרונות. JavaScript היא, קודם כל, רק שפה בצד הלקוח שאתה משתמש כדי להריץ סקריפטים וקוד במחשב של כל משתמש. אז יש לך בשרת שמספק דפי אינטרנט לאנשים, אבל אולי כדאי לך לעשות דברים על המחשב שלהם, תשאל את המכונה שלהם כדי לשלוח בקשות לשרת שלך בכל 30 שניות או משהו כזה. אתה יכול לעשות את זה באמצעות JavaScript. JQuery פשוט מספק יותר פונקציונלי על גבי JavaScript שעושה דברים מיותרים בשבילך. אם אתה מסתכל על התוכן על גבי, שמתאר חלק מהדברים שאתה יכול לעשות. אז בסך הכל, שהוא נוצר בינואר 2006. זה היה יזום ראשון של בחודש אוגוסט 2005. זה בסביבה כבר כמה שנים, וזה באמת חלק מתנועת Web 2.0 החדשה מה שעשה באינטרנט כל כך מבריק. זה ספריית JavaScript בשימוש נרחב ביותר. מעל 19.6 מיליון אתרים משתמשים בו, והוא עדיין גדל שימוש לפי builtwith.com, אשר, ככל הנראה, בשנה האחרונה, פשוט כבר ברציפות הולך וגדל די ליניארי. בין 10 מיליון אתרים המובילים, יש עוד - כ -40% מהם משתמשים בו כיום. פייסבוק משתמש בה, הרבה אתרים אחרים כיום להשתמש בו. אתה יכול להסתכל בסטטיסטיקות האלה בעצמך, אם אתה רוצה. ואתה יכול להגיד זה חוקי כי יש לו בסיס ו13 חברי דירקטוריון, יחד עם צוות של 20 אנשים שעובדים על זה על בסיס קבוע. אז זה בשימוש נרחב מאוד, יש לו כתובת אתר org., זה מהודר, יש לו ספין-offs עבור דברים אחרים, כך שזה עניין גדול. 

למה אתה צריך להשתמש בו? JQuery היא קלה מאוד. זה אומר שזה לא קובץ ענק. ניתן להוריד קובץ minified, שהוא ללא כל המרחב והערות לבנים, וזה רק 32 ק"ג. אז זה קל פשוט לזרוק אל דף האינטרנט שלך ורק כדי להתחיל להשתמש בו. זה גם כתוב בצורה יעילה מאוד, כך שהוא לא תופס הרבה - זה לא להאט את האתר שלך הרבה יותר בעת השימוש בו. הוא מאפשר לך ליישם את הדברים שהיו בלתי אפשריים בעבר. ישנם כמה היבטים של פונקציונליות, כמו יצירת אנימציות, כי בדרך כלל יהיה מאוד, מאוד קשה לעשות. אבל בjQuery הם למעשה פשוטים מאוד. ויש כמה דברים שהם מרגיזים לעשות, אפשרי ב-JavaScript, כמו שליחת בקשת POST, אבל כדי לשלוח בקשה לשרת, אתה צריך לכתוב חמש או שש או שבע שורות של קוד. עכשיו אתה רק יכול לעשות את זה בשורה אחת של קוד, בקריאה לפונקציה אחת. כי באמת מפשט הרבה דברים שאתה עושה. וכל הילדים מגניבים משתמשים בו. לפי זה, אני מתכוון אליי. בפרויקט הגמר שלי בשנה שעברה, שהוא news.whrb.org, אשר לתחנת הרדיו, אני יצרתי את הבלוג הזה אשר מארח את כל התוכניות שעשינו ואת קבצי MP3 עבורם. אתה יכול לעיין בתוכניות האחרונות, וכל זה נעשה באמצעות jQuery. אתה יכול להגיד לי בגלל כל האנימציות האלה, בעצם. אז אם יש לך - אם אתה יוצר הודעה חדשה, אתה רואה slideDowns הקטן האלה, שכל זה נעשה באמצעות jQuery. וזה לדעוך - כך בדברים כאלה כל זה נעשה באמצעות jQuery, ואתה לא צריך לטעון מחדש את הדף כל הזמן כדי לנווט באתר. עוד דבר מגניב שעשה שימוש בjQuery הוא מצגת זו. אני משתמש בדבר הזה המקור הפתוח בשם scrolldeck, שמישהו כתב על דף של jQuery. אם אתה באמת מסתכל על המקור, אתה יכול לראות את זה הם משתמשים בזה סימן דולר; סימני דולר משמשים בjQuery כדי לסמן שפונקציה היא פונקצית jQuery. אז הם מגדירים עטיפה על גבי jQuery המאפשר לך להכין מצגת כזה, ואתה יכול לראות את זה כאן הם כולל את קובץ jQuery המקורי, וזה מה שתצטרך לכלול אם ברצונך להשתמש jQuery באתרי האינטרנט שלך. 

נוגע בזה, איך אתה להתקין אותו? אתה יכול פשוט ללכת לjQuery.com ולהוריד את הקובץ, להוסיף אותו למדריך אתרים ולכלול אותו. אז רק בחלק העליון, בתג ראש קובץ HTML שלך של קובץ HTML הראשי שלך, פשוט יש קו זה של קוד עם הגרסה הנכונה עבור איזו גרסה של jQuery אתה משתמש. אתה יכול להוריד אותו על ידי לחיצה על jQuery.com, לחץ על "הורדת jQuery," ויש לך את זה. זה מכיל. ולמעשה, אנחנו יכולים להעיף מבט על מה שזה נראה. אם תלחץ על להוריד כאן, jQuery היא זה. זה רק אחד קובץ JavaScript גדול שעושה את כל הדברים הקסם בשבילך. זוהי גרסת minified, אשר אינה קריא כלל. גם אתה יכול להסתכל בגרסת הפיתוח, שהוא קריא אבל עדיין מאוד מאוד ארוך. זה הרבה דברים שם. ניתן גם לקשר לגרסה שלו אירח של גוגל. כך שירשה לך רק לסמוך על גוגל כדי לספק אותו. הם מספקים כל גרסה שלו, זמינה בכל העת. אז כנראה שאתה יכול לסמוך על גוגל כדי לארח אותו בשבילך. או שאתה יכול לקשר לגרסה האחרונה שלו של jQuery. יש להם כתובת אתר שתמיד מעודכנים לגרסה האחרונה. זה jQuery-האחרון, ויש בעיה אחת עם זה, אשר היא שאם jQuery המעודכן וחלק מהפונקציונליות הקודמת הם הופכים retrograded או מיושן, זה אולי לא - זה עלול להתחיל כדי לא לקבל נתמך יותר. אז אם אתה כותב אתר אינטרנט באמצעות גרסת 1.8.2, על ידי גרסת 2.7 הזמן יוצא חלק מהפונקציות שכתבתם לא עובד יותר. כך שזה טוב יותר, רק כדי להוריד את קובץ kB 32, לשים אותו על דף האינטרנט שלך, וזה יעבוד לנצח. 

אני הולך קדימה, ולהתחיל לדבר על פונקציונליות בפועל של jQuery. הדבר הראשון הוא בוררים. זה מה שהיה בתחילה jQuery יזום כדי לספק. ואתה יכול ללחוץ על תיעוד להסתכל התיעוד מפורט לבוררים שאני הולך להיות כיסוי. הרעיון מאחורי בוררים הוא שאתה יכול לבחור רכיבי HTML בדף. אלמנטים בדף יש מזהים וכיתות והיבטים מזהים אחרים אליהם. יש גם - הם הרי בהזמנות שונות. חלק מהזמן הם מקוננים בתוך אחד את השני. JQuery מאפשר לך לבנות שאילתות פשוטות שלאחזר אלמנטים מהעמוד. אז אתה יכול לתפעל אלמנטים אלה באמצעות פונקציות jQuery, המהווה את סעיף המניפולציה נגיע למועד מאוחר יותר. באפשרותך לשנות את ה-HTML, לשנות את ה-CSS, גם אתה יכול להנפיש ולהוסיף פונקציות המפעילות באירועים מסוימים. כך, למשל, אם הוא לחצת על משהו, אתה רוצה שמשהו יקרה, אתה יכול לעשות את זה באמצעות jQuery גם כן. ויש מספר עצום של דרכים לבחירת אלמנטים. רובם מעולם לא השתמשתי, אבל יש את אלה בסיסיים, שהם די חשובים. בורר האלמנטים, לדוגמה, אם אתה רק בחירה כל דבר כלומר div - יש לי בעצם את הקוד הפתוח לשקופיות מצגת זו. כך, לדוגמה, הנה השקופית הראשונה. כאן יש לנו div. אם אנחנו באמת לבחור את כל האלמנטים div בדף, זה רק ייתן לנו מערך של כל האלמנטים מהסוג div שקיים בקובץ זה. הזהות הבורר מאפשר לך לבחור כל דבר עם מספר נתון. אז אם זה, למשל, יש את הדבר הזה מזהה "מה", ואם עשו את זה עם מה ש# במקום כמה זהות, זה היה פשוט לחזור על מערך שיש אלמנט אחד וזה האלמנט של הדף. אנחנו גם יכולים לשלב בוררים בדרך זו על ידי בעל רק לבחור דברים עם תעודות, כי הם אלמנטים div. אז כן. בחר divs שיש להם תעודת זהות שרק. למחלקה שפשוט תשתמש בנקודה, זה אותו הדבר כמו ה-CSS. צאצא גם עובד, כך שאם יש לך קצת בכיתה והוא מקונן אלמנטים בתוכו - כך, למשל, יש איזה כיתה ויש לו תג עוגן לקישור לדף אחר, אתה יכול להשתמש בתחביר זה כדי לאחזר את הקישור. אתה יכול גם לבחור דברים מרובים בבת אחת; פשוט להפריד ביניהם על ידי פסיקים, להשתמש בכל בורר שאתה רוצה, ותוכל לבחור את כולם בבת אחת, במערך בודד. ואז יש גם לא בורר, כך שאתה יכול לבחור את כל האלמנטים מהסוג div כי אין לי כמה סוג מסוים. וזה רק בדרך מועילה כדי לקבל מבוא לבחירה איך זה עובדת. אני אראה כמה דוגמאות קונקרטיות בשני. 

בוררים הם מתקדמים - אלה הם רק כמה דוגמאות. יש עשרות אלה, אבל אם ברצונך לבחור את כל תגי התמונה בתוך אלמנט כלשהו, ​​אז פשוט לך לעשות: תמונה. אם ברצונך לבחור את המרכיבים אפילו, למשל, אם יש 20 מהם, אתה רוצה לבחור 0, 2, 4, 6 וכן הלאה, אתה עושה: אפילו, או שאתה יכול גם לעשות: מוזר. אלה הם פסאודו סלקטורים, מה שאומר שהם בעצם לחשב כל אלמנט אחר ולא רק הולך ובחירה בכל אחד מהם. אתה יכול גם - כל רכיב יכול להיות גם תכונות ספציפיות. כך, למשל, בכיתה = המרכז הוא גם תכונה. לתג עוגן זה, href, היפרטקסט התייחסות, הוא תכונה גם. אז אתה יכול לבחור משהו שקישורים לדף ספציפי או סתם - זה ממש כללי. באפשרותך לבחור כל דבר עם כל תכונה שאתה רוצה. ולאחר מכן, גם, תכונה מכילה. אם אתה, למשל, רצית לבחור את כל אלמנטי הקלט כי יש את המילה "עובר" כשמו של אותם, אם דף יש גוש טקסט קלט זה נקרא "סיסמא," שהייתי להיות דרך אחת שאתה יכול לבחור את זה. ויש עוד רבים. אתה יכול ללכת קדימה ולהסתכל על התיעוד ותראו את דוגמאות ספציפיות של איך זה עובד. 

הדבר הבא הוא המניפולציה DOM. אחרי שאנחנו לבחור אלמנטים, אנו רוצים בעצם לעשות דברים איתם. עד כה לא הסתכלתי על זה בכלל, אבל אם אתה מסתכל על התיעוד, יש באמת הרבה שאנחנו יכולים לעשות. בשלב זה, אנחנו הולכים כדי לבחור אלמנטים במצגת זו ולתפעל אותם באמצעות jQuery. בגלל זה מיושם באמצעות jQuery, יש לנו גישה לספריית jQuery, ואנחנו יכולים להשתמש בפונקציות האלה בתוך קוד זה. דבר שימושי אחד שאתה אולי לא יודע עליו הוא הקונסולה. ו-Google Chrome הוא מה שאני משתמש. אתה יכול ללחוץ על גובה הפקודה J או ALT השליטה J כדי לפתוח את המסוף. ב-Firefox אני חושב שזה של פקודת המשמרת K או שליטת המשמרת ק בספארי אתה צריך ללכת לשנות כמה הגדרות. יש קשר, אם אתה רוצה לעשות את זה, אבל אני ממליץ לקבל כרום או פיירפוקס. אז בואו לפתוח את הקונסולה, זה כאן למטה. זה מאפשר לך בעצם רק לעשות מה שאתה רוצה. אז אתה יכול פשוט להקליד ליצור X נקרא משתנה, x = 5, בואו לראות מה + 2 הוא x. אתה יכול אפילו לעשות משהו כמו CS + בוא יראו, x + 45, שיהיה CS50. אתה פשוט יכול לעשות כמה דברים JavaScript טיפוסיים. אבל אתה גם יכול לעשות את jQuery בכאן. 

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

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

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

ניתן גם לשנות CSS באופן ישיר, כך שבמקום הוספה בכיתה שיש לו כמה מאפיינים מוגדרים מראש, אתה יכול פשוט להוסיף את כל מה שאתה רוצה CSS לכל דבר. אז בואו גוף הנבחר, המהווה את כל המצגת, וצבע הוא המאפיין שמגדיר מה הוא את צבעי הטקסט. אם נשנה אותו לאדום, כל הטקסט בדף יהפוך לאדום. אנחנו יכולים לעשות משהו כמו צבע רקע כחול, אנחנו הולכים לשם, זה יפה. אתה יכול לעשות מה שאתה רוצה עם זה. שימוש במאפיין CSS, אתה באמת יכול לשנות את אופן כל דבר נראה בכל עת. הדבר הבא הוא אפקטים. השפעות הן בעצם אותו דבר כמו שינוי CSS, אבל הם בעצם לספק כמה אנימציה נוספת אליו. אז במקום רק מראה או מסתיר משהו או שינוי הצבע, למעשה אתה יכול להפוך אותו לאנימציה. הנה התיעוד, אם אתה רוצה להעיף מבט על התיעוד נרחב אחריו. אבל אני הולך כדי לכסות את העיקריים שבהם. יש תכנית והמאפיינים להסתתר. הצג / הסתר מספר מתאים בעצם לכל תיבה זו, כך שאם אני מסתיר את זה, זה פשוט ייעלם. ואני יכול להראות את זה שוב אם אני רוצה לעשות את זה יחזור. וזה בחזרה. זה לא ממש נעלמים, אני לא ממש להסיר אותו מהדף, אני פשוט להגדיר את מאפיין ה-CSS של נראות לנסתרות כך שאתה לא יכול לראות את זה יותר. יש גם להחליק למעלה ולהחליק במורד; שמאפשר לך לקבל את האפקט הזה. הוא מחליק עד נעלמים, ואחרי שהוא נעלם אתה יכול להחליק אותו כדי להפוך אותו לחזור. ועכשיו זה בחזרה. יש גם אפקט עמעום זה, ש-- מזהה דהייה מתאים לתיבה זו. אם אני לדהות זה, אז זה ייעלם לאט לאט. אני יכול גם להיעלם בזה, וזה לא יחזור. אתה יכול גם לעשות לדהייה, שהוא ספציפי לפונקציה לדעוך. אתה יכול לקבל את זה לדעוך לכל אטימות מסוימים שאתה רוצה. אז אם אתה לדעוך לאט ל0.5, זה אהיה חצי גלוי. אני יכול לעשות את זה ללכת ל0.1, ובחזרה ל1 כדי להפוך אותו לגלוי באופן מלא שוב. זה רק אנימציה אחרת שאתה יכול לעשות. 

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

הדבר הבא שאנחנו הולכים לדבר עליו הוא אירועים. אירועים נאפשר לך - עד כה, יש לנו עתה להקליד דברים לתוך המסוף וכי הוא אחת דרכים לגרום לזה לקרות, אבל בדף עצמו, אתה לא הולך להיות מסוגל להפוך את סוג הדברים שמשתמש לתוך המסוף. אתה רוצה שדברים יקרו באופן אוטומטי. בשביל זה, אתה צריך להשתמש באירועים המפעילים על כמה קורה אירוע מסוים. אתה יכול לבדוק בתיעוד של את הפרטים מלאים. אז בואו נראה. אנחנו רוצים להסתיר או להציג את התיבה, אבל כרגע הכפתור הזה לא עושה כלום, כי אני לא ליישם את זה עדיין. אני הולך לעבור לדף ה-HTML עצמו. הנה השקופית. יש div לשקופית. יש לו את המעמד של שקופית. יש טקסט. עכשיו, יש תיבה זו ועל כפתור התיבה. איך היינו למעשה להפוך את זה להיעלם? קודם כל, בואו לכתוב פונקציה שהופכת את התיבה מזהה להיעלם. זהו התחביר לfuntion, בואו פשוט נקראים לזה hideTheBox. זה לא לוקח שום טענות, כי אין טענות שיש לנקוט. אנחנו יכולים לבחור בתיבה מזהה. אז באמצעות jQuery בחר, אנו יכולים לבחור בתיבה מזהה, ואז פשוט לעשות את זה להיעלם. בואו נעשה את זה לדהות. אם נתקלנו בפונקציה זו בקונסולה בפועל, אנו יכולים להגדיר פונקציה זו, אנו יכולים להתקשר hideTheBox, וזה עובד. אבל אנחנו רוצים שזה יקרה כאשר לוחץ על לחצן למעשה. כדי לעשות זאת, אנחנו צריכים להשתמש באירוע. כדי לאגד אירוע לאיזה כפתור מסוים או התרחשות כלשהי פעולה, אנחנו צריכים לבחור את המרכיב שיפעיל את האירוע - או שיפעיל את האירוע, מצטער. 

אז קודם כל, בואו לבחור את תיבת כפתור זיהוי כי זה על הכפתור, ועכשיו, לכפתור הזה, אנחנו רוצים ליצור אנימציה כאשר הוא לוחץ עליו. אז יש פונקצית לחיצה זה. זה מאפשר לך להיקשר אליו פונקציה אחרת. פונקציה זו לוקחת פונקציה אחרת כטיעון אנחנו יכולים לעבור בתפקוד hideTheBox, וכל פעם שלחץ על כפתור זה הוא, שהפונקציה תהיה באופן אוטומטי לבצע. אז זה יעבוד אם לשמור את זה, אני לרענן, ו-- שני אחת, אני מצטער. תן לי לתקן את זה ממש מהר. אוקיי. יש שאנחנו הולכים. אז עכשיו התיבה היא נעלמת כאשר אנו לחצו על הכפתור. אנחנו גם יכולים לשנות את זה רק כדי fadeToggle, לשנות את זה רק כדי להסתיר או להציג את התיבה, וזה יעבוד גם יותר מדי, אם אנחנו לרענן. אנחנו יכולים להסתיר את זה, אנחנו יכולים גם להראות את זה, ושימשיך לעבוד. דבר נוסף שאנו יכולים לעשות הוא, שאנחנו לא באמת צריכים להגדיר פונקציה זו hideTheBox לפני שאנו קוראים את פונקצית הלחיצה. אז במקום להגדיר את הפונקציה וקורא hideTheBox, אנחנו הולכים רק לקרוא לזה, אם הדבר הזה הוא לחיצה. כדי שנוכל להגדיר אותו בעילום שם לכאן, אשר היא תכונה שיש לי-JavaScript. באפשרותך להגדיר את תפקידיו, בדרך כלל, היינו אומר hideTheBox הפונקציה עם טענות, אך במקום זאת, אנחנו רק יכולים לומר לתפקד בלי ויכוחים, להתחיל את הסד המתולתל להגדיר את הפונקציה, סגירת שהסד מתולתל, ואז פשוט להגדיר את הפונקציה בפה, בתוך הסוגריים ראשון והסוגריים האחרון שמתאים לטיעונים של פונקצית הלחיצה. אז אנחנו עוברים בפונקציה זו, אנו יכולים להעתיק את שורת קוד הזאת ממש כאן, ושיעשה את אותו דבר בדיוק. ועכשיו אין לנו פונקצית fadeTheBox האקראית היושב סביב בלי שום סיבה נראית לעין. הפונקציה הוגדרה בעילום שם, אין לו שם. זה יהיה לבצע רק כאשר אנו לוחצים על כפתור התיבה. כל כך מרענן שוב, עוד פעם אחת, ואתה יכול לראות שזה עדיין עובד. וככה אתה יוצר אירועים. 

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

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

הדבר הבא שאני הולך לדבר עליו הוא AJAX. AJAX, אני יודע שאנחנו לא כיסינו JavaScript בכמה שיותר עומק בשנה זו, כל כך פשוט שאני הולך לדבר על AJAX באופן כללי לרגע. AJAX מייצג JavaScript אסינכרוני ו-XML. זה בעצם, למשל, כשאתה בפייסבוק וזה דוחף לך הודעה, זה בגלל שאייאקס היא פועלת בדפדפן האינטרנט שלך. כל כמה שניות דפדפן האינטרנט שלך בעצם הולך לשרתים של פייסבוק, לשאול אותם, האם יש לך משהו חדש בשבילי, ואז זה חוזר אליך. זה מאפשר לך לשלוח בקשות לשרת מבלי צורך לטעון את הדף. אז בדרך כלל, אם אתה רק באמצעות PHP ומסד נתונים, אתה צריך לרענן את הדף לפני שאתה יכול לקבל מידע חדש מהשרת. אבל השימוש ב-AJAX, אתה יכול למשוך למידע חדש, כי כל הזמן, או למשוך אותו כשאתה לוחץ על כפתור או משהו כזה. אז זה מאפשר לנו לשלוח בקשות מבלי לטעון מחדש את הדף, ואנחנו יכולים להשתמש גם GET או POST בקשות. 

מקבלים בקשות הן, למשל, אם לך לGoogle.com ולעשות את המבחן = q. זה נותן להם מבחן השאילתה. וזה בקשת GET כי זה עובר בפרמטרים האלה לתוך כתובת האתר עצמו. בקשת POST היא כאילו אתה שולח אותם באמצעות דואר. זה כמו שאתה מכניס אותו במכתב ולשלוח אותו אליהם, אבל הם לא ממש לראות את התוכן. הם לא נראים לעין בכתובת האתר. אתה לא יכול להקליד אותו ישירות ב, אתה צריך לשלוח אותו כמעט בחשאי. שהוא בתפקיד. אבל באמצעות jQuery, אתה יכול לעשות GET ותשלח בקשות הרבה יותר בקלות ממה שאתה בדרך כלל יכול רק באמצעות JavaScript רגיל. אתה יכול השאילתה באמצעות ממשקי API GET בקשות, ואתה יכול גם לבדוק את פרטי התחברות. בעמוד הבא, אני יצרתי את זה, ששואל, "מה יש לארוחת צהריים?" באמצעות API הרווארד האוכל, אז בואו נמשוך את זה. זוהי רק דוגמה של איך אתה יכול להשתמש jQuery לעשות בקשה להגיע לAPI ולקבל מידע בחזרה ממנו. אז אנחנו רוצים לראות את התפריט להיום, ואנחנו רוצים לראות מה יש לארוחת צהריים. הנה כתובת האתר כדי ליצור בקשה לקבל בjQuery. אתה משתמש ב$. לקבל פונקציה. הטענה הראשונה היא כתובת האתר, ולכן בדיוק את מה שאתה שואל. אז הטיעון הבא הוא פונקציה שמבצעת כאשר בקשת GET הושלמה. אז אתה שולח את חלק הבקשה לשרת, לחכות שזה יחזור. מתי זה יחזור, אתה הולך לקחת חלק בפעולה עם הנתונים שחוזרים מהשרת. בואו נלך קדימה ואת הקוד הזה גם כן. אני לא קוד זה או, בכוונה. הנה TODO. קודם כל, בואו להשתמש באירוע המחייב כך שכאשר לחצן זה נלחץ, ואנו שולחים את בקשת GET. וכאשר שהשאילתה GET חוזרת עם כמה נתונים, אנחנו הולכים לכתוב אותו לתוך div מזהה מידע הארוחה זו. קודם כל, בואו לבחור את מזונן זהות. כאשר הוא לחץ, אנחנו רוצים אותו לעשות משהו. בואו פשוט לעשות את זה בעילום שם fuction, כמו קודם. יכול לעטוף את הסוגריים מסולסלים האלה, וכאשר לחצן זה נלחץ, אנחנו רוצים לשלוח בקשת GET כדי לבדוק מה יש לארוחת צהריים. כדי לעשות זאת, אנחנו יכולים פשוט להקליד ב$. לקבל. זוהי פונקצית jQuery, תוך שימוש בסימן הדולר. זה לוקח כמה טיעונים. הראשון הוא כתובת האתר, השני הוא הפונקציה של קריאה חוזרת, הפונקציה שנקראת כאשר הבקשה שמחזירה למעשה. בואו פשוט לבנות את כתובת האתר ראשונה. אנחנו יכולים לקבל את זה מAPI שהדוד כתב למעלה. הולך כאן, אנו יכולים לראות שזה food.cs50.net/api/1.3/menus, ואז אתה פשוט עובר בשמות של הפרמטרים שאתה רוצה. אז פרמטר 1 הוא 1 ערך. זה נראה כמו יום רגיל, תאריך התחלה, ברירת מחדל הוא היום אם לא יזין כל דבר, וגם תאריך סיום ברירות מחדל עד היום, אם לא יזין כלום. זה מה שאנחנו רוצים. אנחנו רוצים רק כדי לקבל את המידע להיום. 

אנחנו רוצים להיות בפורמט JSON. זה פשוט שרירותי, אתה יכול להשתמש בכל צורה שאתה רוצה. אתה יכול להשתמש בקובץ CSV, אבל JSON הוא סימון אובייקט JavaScript. זה קל מאוד לJavaScript כדי להבין מה זה אומר, ואנחנו יכולים להדפיס את זה בקלות רבה יותר בדרך זו. אז בואו לבקש את זה בJSON, וארוחת הצהריים את בקשתו של בואו. אז ארוחה = ארוחת צהריים. רק כדי לכתוב את כתובת האתר ש, אנחנו חוזרים לכאן. אין תפריטים. הפרמטר הראשון הוא פלט = JSON כי זה מה שאנחנו רוצים, ולך להפריד את הפרמטרים עם 'ו'. הפרמטר השני הוא - אני לא זוכר. ארוחה. ואנחנו רוצים ארוחת צהריים = ארוחה. אתה יכול לבדוק זאת על ידי הקלדת כתובת אתר אותו לדפדפן שלך והולך אליו. זה ייתן לך קצת פלט. זה פשוט חבורה של דברים זה לארוחת צהריים. זה בפורמט המכוער הזה. אנחנו רוצים להדפיס אותו על הדף שלנו בפורמט טוב יותר. אז כתובת האתר נכונה, עכשיו אנחנו רק צריכים לכתוב פונקציה להתקשר שוב כאשר הבקשה היא מוצלחת. פונקציה זו תהיה למעשה לקחת ויכוח. זה יהיה נתונים. הנתונים הוא מה שחוזר מהבקשה GET לאחר בקשת GET נעשה. אנחנו יכולים לעשות את הסוגריים המסולסלים, כאן אנו כותבים פונקציה אנונימית כי מבצע, תוך שימוש בנתונים אלה, כאשר אנו מקבלים את המידע בחזרה. אז נתונים, כאשר הקלדנו את כתובת האתר הזה, זה מה שהנתונים הולך להיראות. זה הולך להיות המחרוזת ענקית הזאת. אבל דבר הטוב הוא, JavaScript יכול לנתח את זה על ידי שימוש בפונקצית JSON.parse. אז בואו ליצור משתנה חדש בשם נתונים לנתח. ולנתח נתונים הוא מערך של אובייקטים. כל אובייקט מכיל מידע כגון - טוב, בואו נעיף מבט. יש לו תאריך, ארוחה, קטגוריה, מתכון, כל דברים אחרים. אז בואו פשוט להדפיס את שמו לכל אחד. בואו לחזר על כל המערך של דברים שאנחנו מקבלים מזה, ופשוט להדפיס את כל אחד מהם - להדפיס את שמו של כל אחד. זוהי ללולאה. 

יש תחביר JavaScript מועיל הזה שבו אתה יכול ליצור משתנה ולולאה על מערך, var ואני הוא רק iterator, אז במקום לעשות var i = 0, אני היה פחות מ האורך, אני + +, אתה יכול פשוט לעשות var i בנתוני מנותחים. בדוגמה זו, הנתונים מנותחים (i) יהיו מתאים לאלמנט הנוכחי של המערך, האובייקט הממשי. ואנחנו רוצים לקבל את השם מחוץ לזה. אז בואו פשוט לעשות שם. והדבר האחרון הוא, שאנחנו הולכים לקבל קצת jQuery שוב. למעשה להוסיף אותו לדיב, div מידע הארוחה הזאת שכרגע ריקה. אז בואו לבחור את זה. אנו נשתמש במידע div ארוחת jQuery ובחר מזהה, או ארוחת פרטים מזהה, מצטער. אנחנו רוצים לצרף לזה. אם היינו עושה בדיקה, למשל, זה יהיה פשוט להחליף אותו בכל פעם אחת. אז אנחנו יכולים פשוט לצרף את זה. האלמנט הנוכחי במערך, נקבל את השם של זה, ואנו נוסיף אותו לסוף div מזהה מידע הארוחה. ולאחר מכן, רק כדי לגרום לזה להיראות יותר נקי, אנו גם לצרף מעבר שורה אז זה לא בשורה אחת. אז אם הכל ילך כשורה, שצריך להיות טוב - קודם כל, בכל פעם שלחץ על הכפתור הזה, זה ישלח את בקשה להגיע לכתובת זו. כאשר הנתונים חוזרים ממנה, זה יהיה לנתח אותו, להפוך אותו לJSON, לולאה על כל המערך המייצג את הנתונים, ולאחר מכן להוסיף את השם ומעבר שורה לכל שורה בזה ארוחת פרטי זיהוי שהיה ריק קודם לכן. אז חוזר לדף זה, ירענן, קליק, לברר - זה לא עובד. זה מצער. וזה מקום שבו באגים נכנס Index.html, שורת 1. זה מעניין. בסדר, טוב, ולא לבלות את הזמן לעשות את זה, אני פשוט הולך למשוך את הקובץ עשה את זה יש לי, שהוא הגרסה הושלמה. אני לא בטוח מה ההבדל, אבל אנחנו יכולים פשוט לפתוח את זה במקום. ואנחנו הולכים לAJAX, וזה אמור לעבוד בצורה נכונה. זה מה שהיה לארוחת צהריים היום, ללא סדר מסוים, עם ציטוטים סביבו, כך שזה לא הכי יפה. אבל, כמובן, אם היית עושה את זה לפרויקט גמר, היית לגרום לזה להיראות טוב יותר. אבל זה רק דוגמה פשוטה של ​​איך אתה עושה את בקשת GET. ואם אנחנו מסתכלים על הקוד עצמו, אני מנחש, אני די בטוח זה עדיין פחות או יותר את אותו הדבר. אה, שכחתי להמיר אותו למחרוזת, וזהו. לא, זה עדיין לא עובד. בכל מקרה, הנה הקוד הושלם בפועל על מה זה אמור להיראות, וזה עושה את אותו דבר כמו מה שאני רק יישמנו. כאשר אתה לוחץ על הכפתור, הוא משתמש GET JSON כדי לנתח את הנתונים באופן אוטומטי. זה לוקח את הנתונים בחזרה ממנו והלולאות באמצעות המערך השלם ומדפיס את - כל מה שיש היום לצהריים, את שמו שלו, ומצרף לו מעבר שורה אחרי כל שורה. ככה אתה משתמש בפונקצית GET. 

אתה יכול גם להשתמש POST, שלא היה לי זמן כדי לכתוב את דוגמה לזה, אבל אנחנו יכולים להסתכל בתיעוד. אם אתה מסתכל על jquery.post, אתה יכול לראות שזה כמעט אותו הדבר. יש לך כתובת אתר, אך במקום העברת פרמטרים באמצעות - פשוט לשים אותם במחרוזת לכתובת האתר עצמו, אתה צריך לעבור בנתונים זה משתנה שהוא בעצם מערך, מילון שפרמטרי מפות לערכים. שאתה עובר ושבשולח אותם בשימוש בPOST. וברגע שיש לך את זה, אז אתה יכול להיות פונקצית הצלחה כי מבצע כאשר הנתונים מגיע בחזרה. אחרת, זה בדיוק אותו הדבר. אז באמצעות POST, אולי כדאי לך להשתמש בPOST, לדוגמה, אם יש לך טופס קלט אתה נותן לאנשי סיסמאות כניסה לתוכו, ושולח את סיסמאות האלה לתסריט העורפי שלך, כדי לבדוק במאגר המידע אם המשתמש שהוא חוקי או לא. אתה יכול לעשות את זה כל שימוש jQuery, במקום לרענן את הדף בכלל. ככה אני יישמנו בבלוג שהראיתי לך קודם לכן. אם תלכו לפורטל הסוף ולהתנתק, להתנתק, יציאה לא עובד. ובכן, תן לי רק לפתוח אותו בחלון חדש. כאן יש סיסמא, ואני הולך להקליד משהו אקראי. זה לא עובד, אבל אתה יכול לראות שאנחנו לא באמת צריך לרענן את הדף בכלל. קוד, אם אתה רוצה להסתכל על זה, הוא זמין בכל פה. אז את הקוד שכתבתי בשנה שעברה מתישהו. כפי שאתם יכולים לראות כאן, אנו שולחים בקשת POST. יש לי קובץ שנקרא login.php בקצה האחורי, אשר בודק אם הסיסמה אינו חוקית. הפרמטרים שאנחנו מעבירים בהם סיסמא, ממופות הקלט שהוא בתיבת קלט זה כרגע. וכאשר הנתונים מגיע בחזרה, אנחנו בודק. אם הנתונים הוא שקר, אז אנחנו אומרים סיסמא שגויה, להחליק אותו, ופשוט לעשות את זה ייעלם אחרי זה. אחרת, לטעון את דף הניהול. וזה היה הכל נעשה באמצעות JSON. בזה שורות רבות של קוד, אתה יכול פשוט להעביר את הנתונים לקצה האחורי, לבדוק אם זה נכון, לבדוק אם אתה מחובר בצורה נכונה, ובעצם מגיב אליו, מעביר את האדם לדף הנכון או לא נותן להם להיכנס ולהגיד להם שיש להם סיסמא שגויה. אז זאת דוגמה של איך אתה יכול להשתמש POST jQuery כדי לשלוח בקשת POST לקצה האחורי שלך, בודק אם מישהו מחובר בצורה נכונה. 

בסדר, אז זה כל מה שהיה לי דוגמאות, וכל מיני דברים שאני רוצה לכסות. אלה הם הדברים העיקריים שjQuery מאפשר לך לעשות: בחר אלמנטים, לשנות אותם באמצעות המניפולציה DOM, אתה יכול להוסיף אפקטים, להפעיל דברים באירועים מסוימים, וגם לעשות בקשות AJAX בצורה חלקה מאוד ובקלות. אז תודה לך שבאת, או הצפייה, ואם יש לך שאלות, רק תודיע לי. כן? [סטודנטים] חזרה, כשאתה הראה שיש לך JSON לאחר בקשת POST במרכאות, ואני רק תוהה מה שעשה. >> כן, אני רואה. השאלה הייתה, בדוגמא שרק הראיתי, לא היה המילה JSON במרכאות סביב - אני פשוט מושך אותו שוב - סביב פונקצית POST. אני פשוט מושך אותו להצגה. אז הנה בקשת הודעה זו, ויש JSON זה במרכאות. שרק מגדיר את מה שאנחנו מצפים להיות הפלט. אז אם אנחנו עוברים בJSON כסוג הנתונים הצפוי, זה לא דרישה, אבל אם אנחנו עוברים אותו, לאחר מכן את הנתונים באופן אוטומטי להיות מנותחים כמו JSON. אז אנחנו לא צריכים לקרוא את הפונקציה לנתח JSON על זה, זה פשוט יקרה באופן אוטומטי. ואם תסתכל בתיעוד של POST, קיים משתנה סוג נתונים זה, את סוג הנתונים צפויים מהשרת. ברירת מחדל הוא ניחוש אינטליגנטי שיכול להיות שגוי, כך שאתה יכול להשאיר את המקום ריק, אבל זה פשוט הסוג של נתונים בקידוד שבו אתה משתמש, בין אם זה JSON או XML או משהו אחר. 

יש עוד שאלות? בסדר. אם יש לך שאלות נוספות, אל תהסס לשלוח לי דוא"ל בvshekhawat@college.harvard.edu, ואת השקופיות וקוד צריכים להיות זמינים באינטרנט בקרוב. בהצלחה עם פרויקט הגמר שלך, מקווה שאתה משתמש jQuery. [CS50.TV]