[Powered by Google Translate] [שבוע 9, המשך] [דוד י מלאן - אוניברסיטת הרווארד] [זה CS50. - CS50.TV] 

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

לדוגמה, על ידי עיצוב אנו מתכוונים למעשה מקבלים ממשק המשתמש או חווית המשתמש נכון. אני מעז לומר - ואנחנו יודעים מסט הבעיה אחרונה כאשר מעטים מכם שודרו תלונותיך בעניין איזושהי תוכנה או חומרה שמקוממת אותך, בין אם בקמפוס ומחוצים - יש הרבה אתרים שם בחוץ, יש הרבה חומרה שם בחוץ, זה סוג של מבאס. אבל המציאות היא שעושה דברים שהם קלים לשימוש עדיין הם בכל זאת חזקה הוא אתגר קשה מאוד. אז להיום שאלתי את יוסף וטומי להצטרף אליי כאן כדי שנוכל לנהל שיחה, גם על עיצוב ואילו סוגים של תהליכי חשיבה צריכים להתחיל עוברים בראש שלך בעת עיצוב הפרויקטים הסופיים שלך, מאמציך לעתיד. ואז עם העזרה של טומי אנחנו מסתכלים על חלק מפרטי היישום. איך אתה יכול לקבל קצת חזון על נייר או בראש שלך כי אז אתה יכול לבצע את תכניתי באמצעות כמה מהטכנולוגיות והטכניקות שרק התחלנו לדבר עליו, כלומר JavaScript ומשהו אפילו חדש יותר, כלומר AJAX, JavaScript אסינכרוני. זה מאפשר לך ליצור את כל דינמי יותר של ממשק משתמש על ידי ההבאה עוד ועוד נתונים בהדרגה משרת. כך אוכל לראות כמה מהקטעים האלה, כמו גם היום. במאמר מוסגר, אם אתם מעוניינים בריכוז במדעי מחשב או minoring במדעי מחשב, יודע שזה יום שישי בצהריים במקסוול דבורקין 221 יהיה אירוע פיצה בו תוכל ללמוד קצת יותר על מדעי מחשב. בדרכך החוצה היום תוכל לאסוף את מדריך הלא רשמי לCS באוניברסיטת הרווארד. אנחנו נשים אותו בפחי האשפה מחוץ בגובה מותנים כך שאם תרצה לתפוס את זה וללמוד קצת יותר על CS, שיהיה שם בשבילך כמו שזה היה בשבוע 0. כמו כן, אם ברצונך להצטרף אלינו לארוחת צהריים ביום שישי CS50 בשעת 1:15 בערב, הראש לcs50.net/lunch. בלי עיכובים נוספים, אני נותן לך בחור ההוראה יוסף אונג. היי. [מחיאות כפות] תודה. הפעם הראשונה שלמדתי על עיצוב הייתה בכיתה כאן נקראת CS179. 

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

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

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

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

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

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

אבל כמו טומי יראה לך בשנייה, שקיימים דרכים עבורך כך שכאשר אתה לוחץ על דבר שהוא יכול לשלוח באופן אוטומטי מה שאנו מכנים בקשת AJAX ולקבל נתונים הלוך ולסנן את תוצאות באופן מיידי. יש טונות של דברים שהם לא בסדר בממשק זה. [מלאן] אתה יכול לחפש קיימברידג'? יש משהו חריג במקצת כאן, איפה שאכפת קיימברידג' ועדיין אתה מקבל Westford, ספרינג היל, מערב ניוטון וכדומה. כנראה שלא אידיאלי. >> כנראה שלא אידיאלי. כיצד היינו יכול להפוך את החוויה של המשתמש טוב יותר בדף המסוים הזה? כן. >> [תלמיד] הוראות. אוקיי. הוראות באיזה סוג של תחושה? [תלמיד] לדוגמה, דבר למשתמשים חדשים שלא יודעים אפילו מה קרייגסליסט הוא או שאתה לא יודע מה אתה אמור לעשות. נכון. אז להסביר מה קרייגסליסט הוא בדף זה הוא חשוב. אנחנו ממש יכולים לדעת מה משתמשי דף זה הוא למעשה ל. אם אני רק ביקור הזה, אני רואה את כל חבורה של מיקומים. אני אפילו לא יודע למה הם מתכוונים. אבל יותר חשוב, פשוט מסתכל על ממשק זה, זוכר שהייתי צריך לגלול למטה המון דברים כדי למצוא קהילה מסוימת כי אני בעצם אכפת על זה. מה דרך מהירה יותר שאני יכול לעשות את זה? כן. [תלמיד] מחלק אותם למזרח, אזורי מערב. >> אוקיי. אני יכול לחלק אותם לקטגוריות נוספות שיכול לעזור לי לקבוע מהר יותר איך להגיע למקום מסוים ש. [תלמיד] שים את הרשימה נפתחת. >> ימני. אוקיי. אני יכול להשתמש בתפריט נפתח כי יש לנו בערכה קבועה של דברים ויכולנו להראות להם בתפריט נפתח. ככה זה לא תופס כל כך הרבה מקום על המסך. אבל אפילו יותר מזה, מה אנחנו יכולים לעשות? כן. >> [תגובת תלמיד לא נשמעה] >> אתה יכול להגיד את זה שוב? >> [תלמיד] תיבת חיפוש. כן, תיבת חיפוש. זה נהדר. מה שאנחנו באמת יכולים לעשות את זה אם אנחנו מסתכלים אחורה בשקופיות, תיבת החיפוש. השלמה אוטומטית. דרך קלה מאוד לחפש בתוצאות שאתה מכיר נמצאת בסט. אם אני אתחיל להקליד BO, רק יראו לי את כל התוצאות שיש להם בתוך BO שלהם. ככה אני בקלות יכול למצוא אחד המסוים שאני רוצה ללכת ל במקום שיצטרך לגלול רשימה גדולה באמת זה. 

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

אבל בואו נדבר בפייסבוק באופן כללי יותר. אני בטוח שהרבה אנשים כאן יש דעות על פייסבוק, שני החלטות טובות והחלטות עיצוב עיצוב רעות. אז בואו לפרוק או להיות מאושר. נו באמת. אני יודע שכולכם להשתמש בפייסבוק. מישהו חייב לך משהו רע לומר או משהו טוב להגיד על זה. כן. [תלמיד] בערוץ החדשות יש הרבה דברים שאני לא ממש אכפת להם. ערוץ החדשות עושה מראה הרבה דברים שאולי לא אכפת להם. יש לך חברים בפייסבוק שלא פגשו במשך 2 או 3 שנים ואתה רואה את התוצאות של החדשות שלהם צצות בערוץ החדשות שלך ואתה לא באמת אכפת לו. פייסבוק בעצם עשה מאמץ כדי להפוך את זה יותר טוב, והם באמת ניסו לדחוף את התוצאות רלוונטיות לחלק העליון של ערוץ החדשות כמו של מנוח אז אתה בעצם רואה את דברים על ידי חברים אשר רלוונטיים לך או לחברים הקרובים שלך. עוד משהו? כן. [תגובת תלמיד לא נשמעה] >> אתה יכול להגיד את זה שוב? [תלמיד] המודעות הן יחסית צנועות. >> באיזה מובנת? [תגובה בלתי נשמעת תלמיד] אין להם אור על המסך, כמו דגלים. אוקיי. זה טוב. אם אתה זוכר את האינטרנט משנתי ה -90 - >> [מלאן] אני הייתי שם. >> הוא היה שם. [שחוק] אתה אולי זוכר את הרקע מהבהב-GIF נוצץ בכל מיני דברים, GeoCities סוג הסגנון של דברים. זה ממש לא דוגמה לעיצוב טוב כי זה באמת מסיח את הדעת מהתוכן. אתר אמנות ייל הייתה לי GIF המונפש כרקע שלהם ואתה לא יכול לקרוא שום דבר בדף, אבל אני מניח שמישהו באמת דבר איתם ועכשיו זה קצת שונה. [מלאן] זה הרבה יותר טוב עכשיו. >> זה הרבה יותר טוב עכשיו, כפי שאתה יכול לראות. >> [מלאן] אה, כן. פשוט נהדר, פשוט - כן. אוקיי. 

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

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

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

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

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

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

איזה ממנגנוני UI השונים האלה היית משתמש? אם אתה פשוט יודע את כמות HTML שלמדה לפני ואתה יודע את התשומות הן כפתורי רדיו, תיבות סימון, תפריטים נפתחים, ותיבת קלט, מה היית הבחירה הטבעית שלך הייתה לבחירת תאריכים? [תלמיד] קלט. קלט. >> או אולי אפילו נפתח עם כל התאריכים, נכון? אז עם מנגנונים מורכבים יותר ממשק משתמש כמו זה בצד השמאל שתוכל ליישם, אתה יכול לעשות את התהליך הזה הרבה יותר אינטואיטיבי עם מחוון כי הזמן הוא רציף, ואנשים בדרך כלל לא חושבים על זה במונחים של נתחים בדידים. בסדר. הדבר אחרון. עשר היוריסטיקות שימושיות. כל הדברים שדברנו על כנראה נופלים תחת אחת מהקטגוריות הללו. אם אתה הולך לקישור זה, אשר פורסם באתרי האינטרנט, אתה בעצם תוכל, כפי שאתה מעצב את האתר שלך, לשמור על היוריסטיקות אלו בחשבון וכללים אלה של אגודל. לפרויקטים שלך, מה שאני מציע לך לעשות כדי לתכנן היישום שלך טוב יותר הוא לעשות אב טיפוס ראשון בעיתון. כאשר אתה חושב על היישום שלך, לשרטט מהר מאוד את מה שאתה רוצה שזה ייראה כמו ולוודא שכל התיבות מסודרות באופן שהוא מאוד אינטואיטיבי למשתמש להשתמש ואפילו להראות אב טיפוס הנייר האלה לחברים שלך ולהתחיל בקבוצות מיקוד. פשוט לקבל 2 או 3 אנשים יחד ולבקש מהם רק כדי להקיש על אב טיפוס הנייר הללו, ולהראות להם מסכים חדש כדי לראות אם הם באמת מבינים מה קורה. 

מה אתה רוצה לעשות הוא לתת להם משימה, משימה שתניע, ופשוט לתת להם את היישום ולתת להם להשתמש בו. אל תתנה להם הוראות מעבר לכך. אתה רוצה למעשה לתת להם אינטראקציה עם היישום שלך באופן שמאפשר לך לראות איך הם היו משתמשים בו אם לא היית עומדים לידם. וזה חשוב מאוד. זה ייתן לך הרבה תובנה באשר לאנשים לעקוף דברים מסוימים באופן שלא התכוון להם? האם הם משתמשים במנגנוני ממשק משתמש מסוימים על המסך באופן שהוא סוג של חאקי? אני לא מעוניין שהם עושים את זה ככה. וברגע שתסיים עם זה, מה אתה רוצה לעשות? סלעי העיצוב שלך, נכון? מה שאתה רוצה לעשות הוא שאתה רוצה לפתח ואז לעשות תהליך ששוב ושוב. אז להראות את זה לחברים לאחר שפתחת אותו, לבדוק אותו, לפתח, לבחון, לפתח, לבחון, לחזר, וכן הלאה וקדימה. עיצוב הוא מאוד תהליך חוזר ונשנה במובן זה. למעשה אתה צריך לבנות משהו ואז מבינים דברים על זה כי אתה לא הבנת לפני ולחזור ולשפר מזה. עכשיו, כמו לחלק הפיתוח, זה מה השטומים הולכים להראות לך אחרי ההפסקה ואיך ייתכן שתוכל ליישם משהו כמו השלמה אוטומטית באופן שהוא פשוט למדי. [מלאן] כמו טומי מקים כאן, אם כך, שאלה. הרבה האתרים הקדומים ביותר - וכאשר יוסף אמרו אתר בסגנון 1990, זה היה מימושים שבו אם אתה רוצה לבחור שעת התחלה ושעת סיום, בכנות, בחזרה באותו היום ואפילו בכמה אתרי אינטרנט היום, הדרך בה אתה עושה את זה היא שאתה בוחר משעה נפתחת, אתה בוחר דקות מנפתח, אולי תבחר בבוקר, בערב, ואז אתה עושה את זה 3 פעמים נוספות. וכך עם 6 קליקים ואולי קצת גלילה המשתמש שלך באמת יכול לספק איזה תאריך ו / או בטווח זמן במובן הזה. 

אז בהחלט לא אופטימלי ובכל זאת עד כה לא ראתה שום יכולות הבעה בכל אחת מהשפות שהסתכלנו על לעשות משהו יותר סקסי כמו מחוון זה זמן התחלה וזמן סיום. אבל אם אתה חושב לחזור לשבוע 0 בעת שדברנו עליו שריטה, גם שם לא היו יישומונים שפשוט עשו דברים מסוימים. אתה באמת פשוט היית לי היסודות האלה כמו לולאות ותנאים וכדומה. אז סוג של רק ממחשבה מופשטת מאוד עכשיו, בלתי תלויה בפרטים של HTML, מה באמת קורה עם משהו כמו שעה זו ההתחלה ושעת סיום מחוון? כשאני מזיז את העכבר שלי ואני לוחץ על סמל שהגזר קטן מהשמאל והתחל לגרור, תכנות, מה זה שאתה רוצה להיות מסוגל ליישם כדי שזה יקרה? מה שאלות, מה ביטויים בוליאניים אתה רוצה להיות מסוגל לשאול? מה באמת קורה? סמי? [תלמיד] איפה מיקום הסמן? >> טוב. איפה מיקום הסמן? זה היה משהו שהיינו צריך כדי להביע שוב בלגרד, אם זה היה מבוסס על מיקום או אפילו צבע או כמו. אתם אולי זוכרים ולו בחטף ביום שני יש את כל הדברים האלה היו נקראים אירועים בעולם של האינטרנט, ולכן יש דברים כמו onclick וonkeypress וonkeyup וonMouseOver וonmouseout. אז להבין שגם הדברים האלה שאנחנו כבר לוקחים כמובן מאליו באינטרנט עם אתרים כמו פייסבוק וג'ימייל, גם אם אין לך מושג איך תוכל ליישם את זה כי אין שום דבר שאפילו דומה לזה בהרצאה או בעית הגדרה 7, מבין שעם את מדויקי יסודות אלה, עם HTTP ופרמטרים וGET ולפרסם, עם תשומות HTML בסיסיות שבדקנו עד כה וברגע עם המנגנונים תכנוניים שתומים של כ להציג אתה יכול להתחיל לבטא את עצמך בדיוק כמו שעשית בשבוע 0 באופן אינטואיטיבי מאוד גרירה ושחרור. 

אז עם זה אמר, טומי MacWilliam וכמה חלקי פאזל חדשים עבורנו לאינטרנט. בסדר. השמי הוא טומי ואני הולך לדבר על JavaScript. רק ויתור: אני בדעה שJavaScript היא שפת תכנות הטובה ביותר בכל העולם כולו. יש הרבה אנשים שלא מסכימים איתי, אבל זה פשוט מדהים. ברגע שאתה חוזר לג', אם יש לך לכתוב C לכיתה אחרת או כמה שפות אחרות, זה ממש מתסכל בכל הפרטים ברמה נמוכה שיש לך להסתבך פנימה אז אם אי פעם אתה מרגיש עצוב על כמה מעצבן C היא לכתוב, פשוט לחזור, לכתוב קצת ב-JavaScript. זה נירוונה. אתה תרגיש הרבה יותר טוב על היום הרע שלך. הרבה מהקסם של JavaScript מגיע מיכולתה לתמרן את הדברים שכבר נמצאים בדף. כשכתבנו הסקריפטים PHP שלנו, הם הוצאו להורג בשרת, וסופו של הדבר שPHP סקריפט כנראה פלט קצת HTML. שHTML נשלח ללקוח, ולאחר מכן זה היה זה. אם PHP רצה להוסיף לחצן לדף, לדוגמה, הוא לא באמת יכול לעשות את זה. זה היה צריך להפוך קובץ HTML חדש לגמרי ולשלוח את זה לדפדפן. עם JavaScript אנחנו יודעים שאנחנו יכולים לעדכן את הדברים בזמן שהם כבר נמצאים בדף, ובגלל זה אנחנו יכולים לספק משוב מיידי הרבה יותר, שבאמת ישפר את חווית המשתמש באתר שלנו. רק סיכום מהיר של בוררי JavaScript. אנו יודעים שכאשר אנו מורידים דף HTML, זה הולך להיות מיוצג בDOM. 

DOM זוכר הוא רק העץ הגדול הזה שבו אלמנטים הקשורים בהיררכיה הגדולה הזה. כשעבדנו עם מסדי נתונים ב7 pset, אחד מהדברים הראשונים שאנחנו צריכים לדעת איך לעשות היה שאילתא מסד הנתונים. יש לנו שולחן משתמשים גדול זה, ולפעמים אנחנו פשוט רוצים להגיד, "אני רוצה שרק חלק מהמשתמשים אלה התואמים את מצב קצת." בדומה לכך, כאשר יש לנו DOM אנו זקוקים לדרך תשאולו. אנו זקוקים לדרך של אמירה: "אני רוצה את כל הלחצנים שנראים כמו זה "או את כל התמונות בדף." ובוררים אלה מאפשרים לנו לעשות את זה. אז רק לסכם מהירים. הראשון זה כאן, זה # להגיש, מה שהולך לבחור? מישהו זוכר? [תגובת תלמיד לא נשמעה] >> כן, בדיוק. זה הולך לבחור אלמנט בדף שיש לו תעודת זהות של שליחה. וכדי שתג החשיש אומר בורר זה הולך לעבוד עם תעודות זהות. מה דעתך על אחד השני, זה. מרכז, מה שיבחר? כן. >> [תלמיד] ייצוגי. >> בדיוק. עכשיו זה הולך לבחור בכיתה. ההבדל בין זהות ומעמד כאן הוא בדרך כלל זיהוי צריך להיות ייחודי בתוך כל מרחב שאתה מחפש מעל. לכן, אם היו מחפש את דף אינטרנט כולו, אתה באמת צריך רק אלמנט 1 עם שזהות מסוימת, ולכן במקרה זה של שליחה. עם שיעורים, מצד השני, יכול להיות לנו אלמנט יותר מ 1 באותו העמוד באותה הכיתה. זה יכול להיות שימושי עבור להגיד שאני רוצה לבחור את כל מה שמרוכז בדף ולא רק דבר 1. 

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

סוג זה של איבוד פופולריות לאחרונה, אז ה-X בAJAX אינו משמש כל הזמן. בעיקרון, מה AJAX מאפשר לנו לעשות הוא להפוך בקשות HTTP מההקשר של JavaScript. כאשר אנחנו בדפדפן האינטרנט שלנו ואנחנו לנווט ברחבי דפים ואנחנו לוחצים על קישור, מה הדפדפן שלנו הולך לעשות הוא לבצע בקשת HTTP לכולנו את קשר שלחצו. אבל זה לא תמיד אידיאלי, כי אם זה מצב, אז כמו שאמר דוד, תמיד יש לנו להפוך את המשתמשים ללחוץ על כפתור שליחה או ללחוץ על קישור כדי לגרום לכל דבר לקרות, כי הדבר דורש בקשת HTTP. אז עם AJAX אנחנו יכולים לעשות את הבקשות בשמו של JavaScript. כלומר, בכל פעם שהמשתמש מקיימים אינטראקציה עם הדף או כל דבר שקורה, אנחנו באמת יכולים לעשות בקשה תוכניתית לחלק קובץ PHP אחר באתר שלנו או כל דבר אחר ולאחזר את הנתונים שקובץ שיורק החוצה. בואו נסתכל על דוגמה של AJAX. זה הדף שלנו עם אוצר CS50 אשר בתקווה חלק מאיתנו מכיר. אם נסתכל על ה-HTML של דף זה, אנו רואים כאן שאני הוספתי כמה דברים, אחד מהם נתתי לי טופס זה מזהה. אני כבר אמרתי id = "טופס הצעת מחיר". עשיתי את זה רק בגלל שזה הולך להפוך את זה קצת יותר קל לבחור מתוך DOM מאז אני פשוט לא יכול לעשות שאילתא פשוטה מאוד. מה שאני רוצה לעשות כאן הוא שאני רוצה לתקן קצת בעיה עם CS50 אוצר. אז אם אנחנו הולכים לfinance.cs50.net, בכל פעם שאני רוצה לקבל הצעת מחיר, אני צריך ללחוץ על כפתור ציטוט לקבל את זה, ושקבל ציטוט הכפתור אז לוקח אותי לכל דף נוסף. ואם אני רוצה ציטוט נוסף, יש לי ללחוץ על הכפתור חזרה ואז אני מקליד את זה, אני מקבל את הצעת מחיר, ואני לוחץ על כפתור חזור. זה באמת לא את חוויית המשתמש הטובה ביותר. מי באמת הייתי משתמש באתר אם זה כל כך איטי על מנת לקבל מחירי המניות? אז מה אנחנו רוצים לעשות עם AJAX הוא להסיר צעד זה של הולך לדף נפרד כדי להציג את התוצאות. 

מה אנחנו באמת רק אתה מבקשים הוא שמחיר ממש קטן, וזה רק כמות קטנה מאוד של נתונים. כך שאין לי צורך ללכת עוד דף HTML שלם, להוריד תצווה חדש של HTML, אולי להוריד עוד כמה תמונות, כמה קבצי CSS אחרים פשוט לי לענות על השאלה פשוטה מאוד של כמה עושה מניות עלות זו. עם AJAX אנחנו יכולים לעשות את זה הרבה יותר קל. אנו רואים כאן שאני מקשר בקובץ JavaScript נקרא quote.js. בואו בעצם לפתוח את הקובץ. לא שם. כל קבצי JavaScript שלי הולכים להיות ממוקמים ב-HTML כך שדפדפן האינטרנט יכול לגשת אליו. אז יש לנו כאן ספרייה נפרדת לJavaScript, ועכשיו הוא כאן quote.js. בחלק העליון של קובץ זה זה אומר כאן שאני רוצה לחכות לכל הדף להיות טעון לפני שאני מנסה לעשות כל דבר. למה זה נחוץ? מתברר שהדבר הבא שאני הולך לעשות כאן הוא להתחיל לחפש אלמנט התואם את חלק בורר. אם זה אי פעם JavaScript להורג לפני האלמנט הזה נטען בדף, אז כל מה שאני מנסה לעשות הוא לא הולך לעבודה בגלל שאני הולך לנסות לבחור משהו שהוא עדיין לא שם. אז בשורה העליונה זה אומרת שאני רוצה שתחכה עד שהכל נטען כך אנחנו מובטחים שכל אלמנטים שאני מחפש הם למעשה בדף. סימן דולר זה כאן פירושו אני משתמש בספרייה שנקראת jQuery. ספריית jQuery זה מאפשר לנו להשתמש בבוררים אלה שרק הסתכלו. באומר $ לאחר מכן עובר כבטיעון # טופס הציטוט הזה, אני עכשיו בחירת צורה שאנחנו פשוט לקחנו להסתכל. עכשיו יש לי ייצוג של אותה הדמות בזיכרון איכשהו. 

באובייקט זה עכשיו, זה ייצוג של הטופס, עכשיו אני משתמש בפונקציה שנקראת ב. מה הפונקציה הזו עושה הוא שזה הולך לצרף מטפל באירועים. האירוע שאנחנו הולכים להקשיב להוא אירוע השליחה. לכן, כאשר המשתמש לוחץ על כפתור שליחה או שלוחץ על Enter, האירוע הזה הולך לירות. על ידי משדל לזה, עכשיו אני יכול לדרוס את התנהגות ברירת המחדל של הטופס. ללא הפעלה זו, צורתו לא תיכנע לכל קובץ PHP השתמשנו בתכונה זו פעולה. אבל במקום זה, אני אומר עכשיו, חכה, חכה, חכה, אני לא רוצה שתעשה את זה בפועל. אני רוצה שזה יקרה לפני שאתה הולך ומנסה לשלוח אותה לכמה קבצי PHP. עכשיו מה שאני רוצה לעשות? בנקודה זו אני רוצה להשתמש ב-AJAX איכשהו לטעון במה המחיר של המנייה הוא. הדבר הראשון שצריך לדעת הוא מה מניית המשתמש נראה באופק. כדי לעשות את זה אני הולך להשתמש בבורר אחר. זה הבורר השלישי שהסתכלנו קודם. זה אומר שאני רוצה להתחיל את צורת האלמנט הזה בזהות של טופס הצעת מחיר. אז איפשהו בתוכו של הטופס חייב להיות אלמנט קלט שיש לו שמו של סמל. אם אנחנו מסתכלים אחורה בHTML שלנו, ראיתי שיש לנו קלט [שם = סמל]. זה אומר שזה הולך לבחור שתיבת הטקסט שהמשתמש מקליד. זה נחמד. יש לנו את תיבת הטקסט. עכשיו אנחנו רק צריכים לדעת מה יש בתוכו. כדי לעשות זאת אנחנו יכולים לקרוא לשיטה זו כאן,. Val זה, וזה אומר שאני יודע מה יש לך תיבת טקסט. אני רוצה שתגיד לי מה זה שלמשתמש קליד תיבת הטקסט. עכשיו יש לנו מחרוזת בשם סמל ששווה לכל מה שהקליד פנימה המשתמש זה נחמד. אנו יכולים להשתמש במחרוזת שעכשיו לעשות את הבקשה שלנו. זוהי פונקציה חדשה כאן, זה $, מלבד אנחנו כבר לא הולכים להיות בחירת אלמנטים, אנחנו הולכים להתקשר אל פונקציה אחרת המסופקת לנו על ידי jQuery. פונקצית AJAX זה מה בעצם הולך לעשות את בקשת HTTP זה. אז יש לנו להגיד לו כמה דברים. הדבר הראשון שאנחנו צריכים להגיד פונקציה זו הוא שבו אני רוצה ללכת לבקשה. אי שם בפרויקט שלי יש לי את הקובץ הזה בתוך ספריית HTML נקראת quote.php. אני יכול לגשת לקובץ זה, ראה, ממש כמו היום, אם אני הולך לlocalhost / quote.php. 

אני רוצה JavaScript להגיש בקשה לאותו דף. איזה סוג של בקשה עכשיו? ראינו לפני שהטופס יש שיטה ש= "הודעה" תכונה, וזה אומר שזה הולך לעשות בקשת POST, כך שזה לא הולך לשים כל דבר ב-URL, ולא בקשת GET, שפשוט יפוטרו אם רק ניגשים לדף עם דפדפן האינטרנט, למשל. עכשיו אנחנו כבר אמרנו שאני רוצה לעשות בקשת POST HTTP לדף הממוקם בquote.php. כששלחנו את הטופס, זכור שאנחנו יכולים לגשת לרכיבי הקלט בתוכו של הטופס עם שמשתנה _POST $. עד כה בסיפור שלא שלחו בפועל לאורך כל נתונים עדיין. שמנו רק אמרתי אנחנו עושים את בקשת AJAX והנה הסוג של בקשה אנחנו עושים. עכשיו אנחנו צריכים בעצם לשלוח כמה נתונים לדף. כדי לעשות זאת אנחנו יכולים להשתמש במאפיין זה נקרא נתונים. הערך של מאפיין זה הוא למעשה מערך אסוציאטיבי. הסיבה לכך היא שהוא מאפשר לנו לשלוח יותר מסתם חתיכה 1 של נתונים. זו הסיבה שיש לנו הסוגריים המסולסלים האלה כאן מקוננים בתוך סוגריים מסולסלים האחרים אלה. את המפתחות במערכים האסוציאטיביים האלה הולכים להיות אותו הדבר אלה מייחס את השם ברכיבי הטופס שלנו. זה אומר שאם אני שולח יחד מפתח של סמל, זה אומר שדף PHP שלי יכול לגשת למידע זה עם _POST $ [סמל] בדיוק כמו שעשינו בעבר כאשר היינו הגשת טופס. ועכשיו לנתונים בפועל אנחנו רוצים לשלוח הולך להיות בתוך הערך של מערך אסוציאטיבי זה. 

אנחנו מאוחסנים טקסט זה בסמל שנקרא משתנה, ואז אנחנו שולחים את איתי עכשיו מפתח של סמל וערך של מה שהקליד פנימה המשתמש עכשיו אנחנו עשינו בקשת HTTP זה, קובץ ה-PHP שלנו להורג, וזה הולך לשלוח כמה נתונים חזרו עכשיו ללקוח שפשוט עשו בקשה זו. עכשיו אנחנו צריכים להגיב לכל מה שאמר לנו השרת. כדי לעשות את זה יש לנו נכס זה אחרון קרא כאן הצלחה. הערך של מפתח להצלחה זה בעצם הולך להיות פונקציה, וזה אחד מהדברים המגניבים שאפשר לעשות עם JavaScript. לא רק אתה יכול לי ints או מערכים כערך בתוך מערך אסוציאטיבי, אנחנו גם יכולים להיות פונקציה. אז באומרו הצלחה, זה המפתח שלי. מעי גס אומר כאן מגיע הערך, ועכשיו את הערך של זה הוא למעשה פונקציה. אז אנחנו לא צריכים לתת פונקציה זו שם כשלעצמה. אנחנו רק יכולים להגיד שזה הולך להיות תפקיד כלשהו. זה הולך לקחת את הטיעון 1. הטיעון לתפקיד זה הוא הולך להיות מה השרת שלח אותנו חזרה מן הבקשה. בדיוק כמו כאשר הדפדפן שלנו הופך את בקשה, השרת שולח משהו בחזרה והדפדפן מציג אותו, בהקשר שלנו AJAX פשוט עשה בקשה, השרת שלח משהו בחזרה, ועכשיו יש לנו שמיוצגים כמחרוזת. עם מחרוזת שאני רק רוצה להציג את זה בדף. כדי לעשות את זה אני הולך יש בורר אחד אחרון. אני רוצה לבחור את האלמנט במחיר הזהות. זה רק div ריק שיצרתי בדף, ואני רוצה להגדיר את התוכן שdiv כדי להיות מה שהשרת שלח אותנו בחזרה. אני כבר ממש שונה quote.php קצת. 

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

לסמל תן לי להקליד בAAPL ולחץ על קבל הצעה. עכשיו ראה שנתח של אפל עולה איזה מספר הדולרים פשוט הופיע בדף, אבל את כתובת האתר לא השתנתה בכלל. למעשה, כאן היא בקשת HTTP שאנחנו פשוט עשינו. עשינו בקשת POST לquote.php. זה הגיוני. זה מה שהשרת שלח לנו בחזרה. זה כבר לא את המסמך הזה ענקי HTML עם תמונות ודברים כאלה, זה רק שורת הטקסט, ואז סתם מוצגים השורה של טקסט. אם אחזור לכותרות ולראות מה אנחנו בעצם נשלחנו בתוך בקשת HTTP זה, אנחנו יכולים לראות כאן למטה ששלחנו יחד מפתח של סמל וערך של AAPL, וזה מה שמשתמש הקליד פנימה זה נחמד, אבל זה עדיין קצת מעצבן. אני עדיין צריך ללחוץ על כפתור זה כדי לקבל את מחירי המניות. אנחנו אנשים עסוקים ואין לנו זמן ללחץ על כפתורים. גוגל הבינה את זה לפני זמן מה, כאשר הם מיושמים ב-Google Instant. מה שגוגל עושה היא מיידי כמו שאתה מקליד זה רק מתחיל להציג תוצאות עבורך אז אתה לא צריך לדאוג לאף לחיצה על חיפוש. למעשה, סיפור משעשע הקשור לזה. לאחר ש-Google המיידי יצא, אנשים היינו כמו, "וואו, זה הוא סופר מדהים". "זה כל כך מגניב". ותלמיד למטה בסטנפורד שהיה בן 19 באותה העת עשה האתר הזה שנקרא YouTube מיידי. כל המיידי YouTube עושה הוא לחפש ביעילות YouTube מייד. אז במקום שיצטרך ללכת לYouTube.com ופגע חיפוש, כאשר אני מתחיל להקליד למשהו מיידי כמו YouTube CS50, אנחנו יכולים לראות כאן שזה ניסיון על חיבור אינטרנט איטי לאכלס את התוצאות הללו לחיות. כדי לעשות זאת אנחנו יכולים באמת לעשות שינוי פשוט מאוד לקובץ quote.js. כרגע אנחנו מצרפים את האירוע הזה כאשר הטופס נשלח. אנחנו לא באמת רוצים לגרום למשתמש לשלוח טופס זה יותר, אז בואו במקום לפטר את האירוע הזה בכל פעם שהמשתמש לוחץ על מקש. כדי לעשות זאת בואו 1 לשנות את האירוע מלהגיש לkeyup. זה אומר שבמקום להמתין לטופס לשלוח, בכל פעם שתלחץ על מקש כלשהו, ​​שמשהו עומד לקרות. זה כבר לא הגיוני לצרף keyup אירוע זה לכל הטופס. אנחנו באמת רק אכפת שתיבת החיפוש. 

כדי לבחור את זה עכשיו, אנחנו יכולים לשנות את זה כדי להיות, ולא טופס הצעת מחיר, טופס הצעת מחיר ויהיה לנו קלט (הקלד = טקסט) או שאנחנו יכולים לומר (שם = סמל) - מה שאנחנו רוצים. עכשיו יש עוד דבר אחד אחרון שאנחנו צריכים לעשות. זכור כאן כשאמרנו חזרת השווא אנחנו אמרנו שאנחנו לא רוצים שאירוע ברירת המחדל לירות. אבל זה פשוט כל כך קורה שאם אנחנו להשבית את זה עכשיו, כל מה שאנחנו מקלידים לא הולכים להופיע בדפדפן של עוד כי זאת תהיה התנהגות ברירת המחדל של הקלדה לתוך תיבת טקסט. אנחנו כבר לא רוצים לעקוף את זה, אז בואו נהרוס תמורה זו מוטעה. אם אנחנו חוסכים את זה ולטעון מחדש את הדף, עכשיו כשאני מתחיל להקליד AAPL תראה שמחיר המנייה בתחתית כאן משלים באופן אוטומטי. אז הנה הוא מיידי אוצר CS50. למעשה סיפור מצחיק על YouTube המיידי הוא סטודנט שרק סוג של כתב את זה כפרויקט 1-לילה, ולמחרת הוא הציע לי עבודה ביוטיוב המנכ"ל. אז פשוט כמו זה, אתה CS50 סטודנטים, פרויקטי הגמר שלך יכול לסדר לך עבודה ביוטיוב. משהו כזה הוא רעיון ממש מגניב לפרויקט גמר, נכון? היו לנו חלק מהפונקציונליות קיימת שאנחנו רוצים לשלב עם. אנו משפרים את חווית המשתמש קצת, ופתאום מחפש משהו ב-YouTube מיידי יכול להיות הרבה יותר קלה מלחפש אותו ב-YouTube הרגיל. אז זה AJAX בקליפת אגוז. 

בדוגמאות שיוסף היה מראה, ראו הרבה autocompletes, וautocompletes האלה הם באמת, באמת שימושיים, כי אנחנו לא צריכים לזכור - לדוגמה, אם אתה לא זוכר את מחיר המנייה של אפל ואנחנו רק יודעים שזה משהו aa, ולא רק אומר לי, "חלקיו של דבר זה עולה הרבה כסף זה", הייתי סוג של רוצה לדעת מה המניות תתחלנה עם aa. אנחנו יכולים לעשות את זה ממש יפה עם ספריית המגף שכבר נכללה בתוך CS50 אוצר. אם אתה בא לכאן, לתג JavaScript ולגלול למטה לTypeahead, זה רק תוסף נחמד שמישהו כבר כתב לנו, ואנחנו יכולים בקלות להשתמש בפונקציונליות שלו ככה. אני הקלדתי והנה רשימה של כמה מדינות שמתחילות עם א ' נניח שאני חושב שזה ממש מגניב וזה זמן בשבילי כדי לכלול את זה בדף שלי. מתברר שזה ממש ממש פשוט. בואו נקפוץ לכאן כדי quote3.js. הקובץ שלי נראה קצת שונה. כאן למטה את כל הדברים של AJAX שלי הוא זהה. אני רוצה לטעון את נתוני המניות מבלי לעבור לדף אחר. אבל עכשיו אני רוצה להשתמש בתוסף זה. תיעוד המגף יש דוגמאות גדולות של איך בדיוק אני יכול לעשות את זה. אני רוצה לומר, "הנה הקלט שאני רוצה בהשלמה אוטומטית", ואני הולך לקרוא לפונקציה זו נקראת typeahead, וזה הולך לטפל בכל דברי Typeahead עבורנו. זה יהיה לאתחל את הרשימה, הוא יעשה כל הסינון שלנו. הדבר היחיד שהוא צריך לדעת מה הוא נתונים שאנחנו autocompleting ב. אז התבררתי לי מפתח זה רק על ידי קריאת התיעוד ולהסתכל על הדוגמות. אם אני נותן לו מפתח של מקור, הערך של מפתח זה הוא רק חלק המערך של דברים שאני רוצה בהשלמה אוטומטית. משתנה זה בא מקובץ אחר זה. אני פותח את symbols.js. 

symbols.js זה רק מערך גדול באמת זה שמכיל מחרוזות מכל סמלי מניות אלה מנאסד"ק. אם אני רוצה לקפוץ לראש HTML, כך jharvard, vhosts, globalhost, HTML, התבניות, quote_form. מאחר שכעת נקרא quote3.js, נתנו לי להחליף את קובץ JavaScript אני כולל כאן. עכשיו יש לי quote3.js, אז אני הולך לטעון שבקובץ JavaScript הנפרד, אחד שיש לי שBootstrap השלמה אוטומטית. עכשיו כשאני קופץ בחזרה לדפדפן, לטעון מחדש את הדף, ואני מתחיל להקליד aa, יש ההשלמה האוטומטית שלי. וזה היה ממש פשוט כמו זה. היה לי קו 1 של קוד שרק אמר, "הנה הדברים שאני רוצה להשלמה אוטומטית על," ופתאום יש לי פונקציונלי ממש ממש נחמד זה לא עם המון מאמץ. כפי שאתה מפתח אתרי אינטרנט ובמיוחד לוואי הקצה הקדמי של דברים, אתה הולך למצוא את זה מקרה הרבה. יש הרבה, הרבה, הרבה ספריות ממש מגניבות בחינם שם בחוץ זה עושה את זה סופר קל לעשות דברים כאלה. מישהו יכול לחשוב על כל חסרונות של פשוט autocompleting על רשימה הגדולה של סמלים? מה יכול להיות משהו שהוא לא הכי הטוב בגישה זו? כן. >> [תלמיד] זמן, אם יש לך הרבה [לא ברור] כן. כרגע אנחנו מורידים קובץ JavaScript הענק הזה ויש הרבה סימנים. ולכן אם יש לנו טונות של חומרים, סוג זה של יכולת להגדיל את זמן האחזור של לא מחפש רק אלא גם מוריד את הקובץ עצמו. גדול. עוד משהו? נכון לעכשיו אין תחושה אמיתית של שייכות. אם אני מקליד בA, חברות שתופענה כאן אולי לא תהיה החברות הפופולריות ביותר שמתחילות עם א ' 

לפני שאני מקבל אפל, זה עלול לקחת עוד כמה תווים כדי למצוא את מה שאני מחפש. השלמה אוטומטית זה אין תחושה של שייכות. זה רק הולך לומר, "כל דבר שמתאים לי אני הולך להצגה". במקום זאת, אני רוצה איכשהו לשלב נגיעה מסוימת לחיפושים שלי. אם אני הולך לכאן כדי אוצר יאהו, finance.yahoo.com, אם אני מנסה להיכנס לסמל בדף של יאהו האוצר ואני מתחיל להקליד goog, יש לי רשימה הנחמדה הזה של דברים. ברור, זה נראה כמו יאהו האוצר עושה משהו יותר מתוחכם כאן. יש להם נגיעה מסוימת ויש להם גם מידע נוסף כמו השם של המנייה. זה משהו שאני באמת לא יכול לקבל רק עם רשימת המלאי שלי של סמלים. אני רוצה את זה ואז אני הולך לקחת את זה. כדי לעשות את זה בואו נעשה כמה דברים. בואו ראשון לפתוח את המפקח על דף זה בגלל שראינו שדף זה אינו מחדש כלל, כך שזה כנראה שימוש ב-AJAX איכשהו לטעינת הנתונים שלה. אנחנו יכולים לגלות מה נתונים שהוא טוען. אם אני לוחץ על כרטיסיית רשת זו, אלה הולכים להיות כל הבקשות שמתחילות להיות מפוטרים. עכשיו, אם אני מקליד בגו, אנו יכולים לראות שיש לי רק בקשת HTTP חדשה. זה כנראה שם נתונים שמגיעים. ואכן, אם אני מסתכל על כתובת אתר זה, וזה קצת מוזר בשם, אנו יכולים לראות שזה בדיוק איפה יאהו שולח את הנתונים שלה מ. 

יצרתי קובץ נפרד בשם suggest.php זה דומה מאוד ברוחו לבדיקת התפקוד. זה בעצם הולך לעשות שאילתא לכתובת האתר של יאהו, תחזור חלק מנתונים, ולשלוח אותו חזרה אליי. כעת, במקום להשתמש ברשימה זו גדולה, עצומה של סמלים, אני יכול להשתמש בדברים הרלוונטיים הנחמדים של יאהו, ואני לא צריך להוריד שקובץ JavaScript המסיבי. אני רק הולך לניתץ את סמלי המניות ממש הרלוונטיים. בואו לקפוץ לתוך זה. אז html, js. אנחנו נמצאים עכשיו בquote4. עכשיו אנחנו כבר לא משתמשים שרשימה הגדולה של קבצי JavaScript. אבל יש סוג קטן של בעית העיצוב כאן. אנחנו אמרנו שבAJAX הוא אסינכרוני. משמעות של זה היא שכשאני עושה את בקשת AJAX, כך ממש כאן, על קו 8, זה המקום שבי בקשת AJAX שלי הוא ירה בפועל. בואו נגיד שעכשיו יש לי קצת קוד כאן למטה שהולך לעשות כמה דברים רוצים להזהיר את המשתמש או משהו כזה שינוי בדף. מה שלא יקרה הוא הדפדפן לא הולך לחכות לבקשה זו כדי להמשיך לפני שירד ופגע בקו זה. זה חלק אסינכרוני. זה הולך לביצוע בקשה זו ואומרת, "בכל פעם שאתה מסיים, "לחזור ולקרוא לפונקציה שאמרתי לך להתקשר אל החלק הפנימי של הצלחה". זה אומר שאנחנו לא יכולים פשוט להוריד את כל המניות מראש. אנחנו צריכים להגיש את הבקשה ולחכות למשהו שיחזור. זה אומר שלפני, הייתי יכול פשוט להגיד מגף, "הנה הרשימה של דברים שאני רוצה שההשלמה אוטומטית על". אנחנו כבר לא יכולים לעשות את זה יותר, כי אנחנו לא יודעים מה שאנחנו רוצים בעצם השלמה אוטומטית ב. למזלנו, מגף חשב על זה, כי אלה בחורים חכמים שיושבים שם, והם בעצם נתנו לנו דרך אחרת כדי לטעון תוסף Typeahead זה. לפני כן, שוויו של רכוש מקור זה היה רק ​​מערך זה גדול של דברים להשלמה אוטומטית ב. 

עכשיו רכוש המקור הוא למעשה פונקציה, ומטרתו של תפקיד זה הוא להבין מה את הדברים להשלמה אוטומטית הם. איך שזה הולך להבין שזה הולך לשאול אוצר יאהו מה הדברים הטובים ביותר להשלמה אוטומטית הם. כדי לעשות את זה אני הולך להגיש בקשת AJAX דומה מאוד. אני הולך לבקש דף זה בsuggest.php. אני רוצה לשלוח לאורך הסמלים עדיין. ועכשיו את ההצלחה שלי, אמרה לי התיעוד Bootstrap שכדי לאכלס את הרשימה הזאת של דברים, כל מה שאני צריך לעשות הוא לעבור במערך זה עכשיו לפונקציה של הקריאה החוזרת. אבל חכה רגע. אם זה אמור להיות מערך וAJAX שולח אותי חזרה טקסט, איך זה אפשרי? זה מציג דרך חדשה להחלפת נתונים הנקראים JSON. במקרה זה לא רק שאנחנו שולחים חזרה מחרוזת פשוטה של ​​טקסט. עכשיו יש לנו עסק עם רשימה מורכבת יותר מסמלי מניות. סמלי מניות אלו יכולות לכלול גם דברים כמו השם של החברה או את המחירים הנוכחיים. רק באמצעות מחרוזת ארוכה גדולה שלא מעוצבת בכל דרך לחיזוי הוא לא הולך להיות הדרך הטובה ביותר לקבל את הנתונים מהשרת של יאהו אליי בדרך שאני יכול בקלות להבין. JSON הוא טכנולוגיה המנצלת כיצד אנו יוצרים מערכים אסוציאטיביים ב-JavaScript. זה נראה הרבה כמו מערך אסוציאטיבי JavaScript, ולמעשה, זה בגלל שזה הוא. JSON עומד לסימון אובייקט JavaScript. זה בעצם פורמט מוסכם להעברת נתונים הלוך ושוב. הנה זה אובייקט JSON או מערך אסוציאטיבי זה JSON הוא שולח לי כמה נתונים על קורס. 

את המפתחות של מערך זה הם כמובן דברים כמו שיש לו ערך של cs50, וכאן אנו יכולים לראות שאני יכול להיות בעל ערך שהוא מערך. אני לא צריך לעשות דברים כמו לנתח את המחרוזות ולחפש פסיקים ולעשות דברים מטורפים כמו זה. בגלל זה הוא הכריז בפורמט JSON זה, JavaScript ו jQuery כבר יש פונקציות כדי להמיר מחרוזת שנראה כמו JSON זה לתוך מערך אסוציאטיבי בפועל JavaScript שאנחנו יכולים לעבוד איתו. עושה את זה הוא פשוט כמו אומר שהוא כבר לא קובץ, suggest.php זה, שולח אותי חזרה פשוט מחרוזת הטקסט, אבל אני יודע שזה הולך להיות שולח אותי חזרה JSON. זה אומר שJSON ניתן להמיר את המערך אסוציאטיבי של JavaScript. וכך jQuery, אני רוצה שתעשה את זה בשבילי. זה אומר שפרמטר זה תגובה כאן, זה כבר לא רק מחרוזת. מכיוון שאמרנו לי jQuery שהנה מגיע חלק JSON, jQuery הולך להיות חכם מספיק כדי לומר, "רצה JSON?" "אני הולך להפוך אותם למערך אסוציאטיבי בשבילך." בואו באמת אסתכל על כרטיסיית הרשת פעם אחת יש לנו quote4.js. אנו נשנה את זה ולטעון מחדש את הדף. עכשיו אני הולך להקלדה ב- שוב. עשיתי כמה בקשות לsuggest.php, אבל עכשיו את התגובה הזאת, ולא רק את המחרוזת, זה JSON. אז יש לי סד מתולתל פתוח ואמר, "הנה בא מערך אסוציאטיבי". 

ראשון ויחידה המרכזית של מערך אסוציאטיבי זה נקרא סמלים, ואז הנה מערך של כל הסמלים הרלוונטיים באים עכשיו מאוצר יאהו, לא מאותה רשימה ענקית. ככה אני יכול פשוט לאכלס תוסף השלמה אוטומטי זה עם נתונים מסוימים שלא מגיעים מקובץ מקומי שכבר ידוע מראש אלא ממשהו אחר. מתבררים שאנחנו באמת יכולים לנצל את הטכנולוגיה בשם jsonp, או JSON עם ריפוד, שיבטל מתווך suggest.php זה. אבל במקום לעשות את זה, בואו במקום להעיף מבט על איך אני יכול לשפר את זה עוד יותר. אני באמת אוהב את Typeahead של המגף. זה ממש נחמד. אבל אנחנו בדרך טובה בJavaScript ואנחנו רוצים סוג של לעשות זאת בעצמנו, אולי תסתכל על מה שהתוסף הזה יכול לעשות. בואו כבר לא משתמש בדבר הזה Typeahead, ובואו ננסה לעשות את הרשימה הזאת של מניות הציעו את עצמנו. כאן בquote6.php אנחנו הולכים להתחיל באותה הדרך. מישהו מקליד בכל פעם שמשהו, אנחנו רוצים להפוך את בקשת AJAX. זה דומה למיידי אוצר CS50 המקורי שלנו. במקום לבצע בקשה לquote.php, עכשיו אנחנו בהגשת בקשה לאותו קובץ כמו קודם, זה suggest.php, שרק הולך למשוך את הנתונים מYahoo Finance. 

שוב, אנחנו עדיין מצפים JSON, אבל עכשיו מאז Typeahead לא עושה את זה בשבילנו, אנחנו גם צריכים לשלוח יחד הערך שבתוך תיבת הטקסט הנוכחית. עכשיו אנחנו יודעים מה לבקש אוצר יאהו ל, ואז עכשיו הנה הפונקציה שאנחנו רוצים להוציא לפועל לאחר שהבקשה משלימה. אין לנו את התוסף על מנת להפוך את הרשימה עבורנו, אז הנה מקום שבו אנחנו בעצם הולכים לבנות רשימה של הצעות. כדי לעשות זאת, הרבה כמו ב-PHP אנו שרשור המחרוזות גדולות האלה של HTML אז הדפסת אותן, אנחנו יכולים לעשות את אותו הדבר בדיוק ב-JavaScript. ראשון שאנחנו הולכים להתחיל במחרוזת זו נקראת הצעות, ומחרוזת זו היא רק הולכת להכיל כ-HTML. אנחנו רוצים שזה יהיה רשימה של דברים, ולכן אנחנו הולכים להתחיל עם תג רשימה זו, ועכשיו אנחנו הולכים לחזר על כל הסמלים שהוחזרו בחזרה אלינו. זכור, כי אנחנו כבר אמרנו datatype: "json", זה לא מחרוזת. זה כבר מערך עבורנו. זה ממש מגניב. אנחנו יכולים פשוט לומר, "אני רוצה שתצרף רשימת אלמנטים". אנחנו נשים אותו בתוך אלמנט בצד זה, אנחנו נותנים לו מעמד של הצעות כך שאנחנו יודעים מה זה, ועכשיו כאן הוא הסמל שחזרנו מYahoo Finance. 

לאחר שיצרנו אלמנט לכל אחד מהסמלים שקבלנו בחזרה, אנחנו פשוט רוצים לסגור את הרשימה. אז עכשיו הצעות מייצגות קטע HTML הקטן הזה שכאשר לשים על דף הולך להיות הרשימה של דברים שאנחנו מחפשים. עכשיו בואו בעצם לשים את זה בדף. כדי לעשות זאת יצרתי למעשה עוד div ריק ונתתי לו תעודת זהות של הצעות. בדומה אנו קובעים את התוכן של div אשר יציג את המחיר של נתוני המלאי, עכשיו אנחנו פשוט רוצים להגדיר את התוכן של div זה לכל מחרוזת זו היא המכיל סמלים אלה. באמצעות שיטת ה-HTML, משתנים זה הצעות, מחרוזת זו, היא מחרוזת של ה-HTML. אני רוצה שתיקח את זה HTML ושמת אותו בתוך div בשם הצעות. שמנו רק צרפתי משהו DOM עכשיו. הוספנו כמה אלמנטים חדשים לDOM שעכשיו אנחנו יכולים להציג בדף. בואו לראות איך זה נראה. אם תטענו בquote6 ועכשיו אנחנו חוזרים, עכשיו כשאני מתחיל להקליד AAPL, אין לנו עוד מגף שההשלמה האוטומטית, אבל עכשיו יש לנו רשימה זו שעשינו בעצמנו. זה מכוער קצת מTypeahead המגף, למשל, אבל זה מאפשר לנו לעשות דבר אחד. כשחפשנו באותו תוסף המגף, ראה שכאשר אנו autocompleted, אחד מערכי ההשלמה אוטומטית היה AAPL. כי לא יכול להיות כל כך מועיל. כמשתמש, אני עלול לא לזהות את כל סמלי המניות באופן מיידי. מה אני כנראה יותר סיכוי להכיר הם השמות האמיתיים של החברה. אז זה לא יהיה ממש מועיל אם במקום לומר AAPL זה אמר משהו כמו אפל כי אנחנו כבר התגלגלנו זה את עצמנו, אנחנו יכולים באמת לעשות את זה בקלות. בואו לפתוח את קובץ הציטוט האחרון שלנו כאן, אז quote7. 

אותו דבר. רק יצרתי עוד קובץ PHP שיחזור אלינו יותר מאשר רק הסמלים. זה יהיה גם להחזיר לנו שמות של החברה. ולכן אנחנו עושים את אותו דבר. אנחנו עושים בקשת AJAX. לאחר שהבקשה הושלמה, אנחנו הולכים לבצע פונקציה זו כאן, ופונקציה זו הולכת לבנות את מחרוזת גדולה של אלמנטים. אבל ההבדל כאן הוא שהערך של רשימות אלה הוא כבר לא רק הסמל, עכשיו זה שם. אז יש לנו בעיה קטנה אחת. כאשר אנו משתמשים בבדיקה שלנו, אנחנו צריכים איכשהו להעביר אותו לסמל. אנחנו לא יכולים לעבור בדיקת משהו כמו Microsoft Corporation. אנחנו צריכים להעביר את זה MSFT. כאשר אנחנו כותבים HTML, יש לנו הרבה תכונות נחמדות מוכללות. אולי זה קשור לhref או כיתה. אבל מה שאנחנו באמת צריכים עכשיו הוא שכל אחד מהקישורים הללו יש סמל מנייה המשויכת אליו. אין מובנה בתכונת ה-HTML עבור הסמל מניה, אבל למזלנו, HTML5 מאפשר לנו ליצור התכונות שלנו להיות מה שאנחנו רוצים. באומרו נתוני סמל, אני כבר הצגתי תכונה חדשה שמה שאני המצאתי, וזה בסדר, כי אני הקדמתי אותו עם הנתונים הללו. אנחנו הולכים לאחסון פנימי של יש סמל מהמלאי עכשיו. מה שזה אומר הוא שלמרות שאנו מציגים את הערך של שמה של החברה הפנימי שלנו ההשלמה האוטומטית, אנחנו עדיין זוכרים את הסמל המשויך לכל חברה. כמו שאנחנו עושים שהוא בתוך האלמנט הזה עצמו. אז זה אומר שאנחנו צריכים לעשות יותר שינוי אחד. כאשר אנו לוחצים עליו עכשיו, אנחנו צריכים דווקא לנצל תכונת הסמל ולא רק את הערך שלו. אם גיבוי, אנו מייחסים מטפל באירועים להצעות. בכל פעם אחת מההצעות אלה לוחץ עכשיו, אני רוצה לעשות משהו. מה שאני רוצה לעשות הוא לשנות את הערך של תיבת קלט. עכשיו אני רוצה להגדיר אותה פונקצית val זה. 

אז ללא כל ויכוחי פונקצית val זה חוזרת אליך את מה שכבר בתיבת הטקסט, אבל אם אתה נותן לו מחרוזת, זה הולך לקחת את המחרוזת שהכניסה אותו לתוך תיבת הטקסט. אני בחירת תיבת הטקסט שלה באותו אופן. קורא לו בתוך סמל של טופס הצעת מחיר. עכשיו אני שולח לו את הערך של נתוני סמל התכונה. הדבר הזה כאן הוא חדש, זה $ (זה). מה זה מתייחס להוא אלמנט שלוחץ עליו. אנחנו יכולים לראות כאן, כי אנחנו לא מצרפים אירוע לחיצה לכל רכיב בכיתה של הצעה בנפרד. במקום זאת, אנחנו מתקרבים זה קצת אחר. במקום שאנחנו אומרים בכל פעם שמשהו בפנים של div הצעות זו, שיזכור רק את המכל לרשימה זו, אם משהו בתוך div זה לוחץ ויש לו מעמד של הצעה, אני רוצה את האירוע הזה כדי לירות. בעיקרון מה שזה אומר שאנחנו יכולים לעשות הוא שאנחנו יכולים לעשות שימוש חוזרים באותו מטפל אירוע זה לכל הדברים ברשימה. אז אנחנו לא צריכים להיות מטפל באירועים אחד לאלמנט הראשון ומטפל באירועים שונה לאלמנט השני. במקום זאת, אפשר לומר, "אני רוצה אותו המטפל באירועים שיחול על כל דבר ברשימה שלי." אבל אנחנו צריכים איכשהו לדעת איזה רכיב היה לוחץ עליו. זו מילת מפתח "זה" מייצגת בדיוק את זה. זה האובייקט שפשוט לחץ על ידי המשתמש. אם אני רק לחצתי על הקישור 3, זה מייצג את האלמנט של שהלינק 3, מה שאומר שאני יכול לקבל את התכונה שלו, נתוני הסמל, אנחנו יודעים שיש להכיל את הסמל שמשויך לחברה אני פשוט לחצתי. אם נקפוץ חזרה לדף המימון שלנו, אנו יכולים לראות עכשיו שברגע שאני מתחיל להקליד משהו כמו MSFT, אנחנו כבר לא מקבלים רק את סמלי המניות, עכשיו אנחנו מקבלים את החברות בפועל. אבל כאשר אני לוחץ על אחת מהחברות אלה, אנו יכולים לראות שאנחנו למעשה אכלוס תיבת הטקסט לא עם שמה של החברה אבל בכל מה שמאוחסן בתוך תכונות נתונים אלה. ואז אם אני ממש לראות את אחת מהמרכיבים אלה על ידי לחיצה עליו זכות ולחיצה על בדוק אלמנט, אנחנו יכולים ממש לראות איך זה נראה. 

זכור, זה משהו שאנחנו יצרנו בתוך שעבור לולאה כאשר אנחנו בונים את המחרוזת של ה-HTML. אנחנו יכולים לראות כאן שנתוני הסמל הזה יש ערך של MSFT, וזה נהדר. זה מה שהיינו מצפה. זה סמל וזה מה שיש לנו את הערך שאנחנו צריכים להשתמש בתוך תיבת טקסט זו. זה מספיק לטופס ההצעה כי זה די משעמם. בואו פשוט לעשות כמה שיפורים מהירים לדף תיק העבודות שלנו. אם השתמשת CS50 אוצר לזמן ואתה מתחיל לקנות ולמכור הרבה מניות, סופו של דבר לוח זה הולך לקבל די גדול, ואתה הולך רוצה המניות טיקר, כמובן. ברגע שהשולחן הוא ממש ממש גדול, זה יכול להיות שימושי עבור המשתמש לנסות לחפש אותו. בתוך תיבת החיפוש, אם אני מתחיל להקליד משהו כמו דיסני ומחפש המניות של מיקי המאוס שלי, אנחנו יכולים לראות שהטבלה כעת סינון בהתבסס על מה שזה עתה הקליד פנימה פונקציונליות זו נראית מסובכת במיוחד, אבל זה ממש ממש קל עם jQuery ו-JavaScript. קובץ portfolio.php זה כולל קובץ JavaScript נקרא portfolio.js. בואו נסתכל על זה. אז html, js, תיק. כאן מקום שאנחנו עושים שחפשנו על השולחן. הדבר הראשון שצריך לעשות הוא לצרף למטפל באירועים שתיבת הטקסט כי אנחנו יודעים שאנחנו רוצים סינון הפונקציה לירות בכל פעם שמשתמש לוחצת על משהו, כי אין לנו זמן לכפתורי חיפוש. הדבר הראשון שאנחנו צריכים לעשות הוא להבין מה המשתמש מחפש, בדיוק כמו שעשינו בעבר. מילת מפתח זה מתייחס לאלמנט הנוכחי אינטראקציה של המשתמש עם. 

בגלל האינטראקציה של המשתמש עם תיבת החיפוש, $ זה מייצג את תיבת החיפוש, כך this.val נותן לנו את מה שבפנים של תיבת החיפוש שהמשתמש מקליד כרגע. אז, עכשיו מה שאנחנו רוצים לעשות הם שאנחנו רוצים לחזר על כל השורות בתוך השולחן שלנו. כדי לבחור את כל השורות בטבלה שלנו, נתתי לי הטבלה המזהה תיק שולחן, וכל שורה מיוצגת על ידי אלמנט TR, אז הבורר הזה הולך להחזיר לי את המערך גדול של כל השורות בטבלה שלי. עכשיו אני רוצה לחזר על מערך זה. אני יכול לך ללולאה, אבל למעשה מספק לנו jQuery פונקציה נחמדה בשם "כל אחד". מה כל אחד עושה הוא לוקח כל טיעון אחד, והטענה שהיא פונקציה. מהו עומד לעשות הוא שזה הולך ליישם פונקציה שלכל אלמנט פנימי של רשימה זו. פונקציה זו לוקחת טיעון אחד זה דואר, וכאשר פונקציה זו מופעלת, דואר זה הולך להיות מוחלף בשורה הראשונה, אז בשורה שנייה, ולאחר מכן בשורה השלישית. אגב זה, זה אותו הדבר כמו בריצה ללולאה ואז להבין את האלמנט הנוכחי המבוסס על המדד שלך בתוך ללולאה. בכל איטרציה, עבור כל אחד מהאלמנטים האלה בטבלה, אני רוצה לבדוק אם הטקסט של היסוד - הטקסט של התא בתוך השורה - תואם את מה שאני מחפש. מחרוזת זו גדולה ארוכה של פקודות היא איך אני יכול לעשות את זה. ראשית, שוב, זה מתייחס כיום ל-- כי זה בתוך פונקציה חדשה - זה עכשיו השורה הנוכחית בטבלה. אני רוצה לקחת את השורה הנוכחית בטבלה, ואני רוצה לקבל את כל ילדיה. זכור, DOM הוא עץ היררכי, מה שאומר שיש אלמנטים מספר הילדים. 

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

אז מה לפנינו? כפי שתראה בכמה ימים, הצעת פרויקטים הסופית היא תוצאה. הצעת פרויקטים הסופית תשאל אותך כמה שאלות, אך ביניהם יהיו שלוש אבן דרך - 1 אבן דרך "טובה", אחד אבן דרך טובה יותר, ואחד הטוב ביותר. הרעיון הוא באמת לעזור לכם להגדיר את הציפיות שלך כך שמינימאלי שיהיה מאושר עם התפוקה של פרויקט הגמר שלך וזה יהיה "טוב" עד כמה שאתה מודאג. אבל אז בעניין להוציא לך להגיע קצת למשהו טוב יותר או משהו טוב, אנחנו גם למיין של לדחוף אותך לכיוון זה גם כן. CS50 האק--טהון, בינתיים, הוא בכמה שבועות. בדרך כלל, אנחנו עושים את זה על בסיס בסיס הגרלה בגלל הריבית, אבל רוב סיכויים שניקח כמה מאה מאיתנו בהסעות באוטובוסים מהכיכר הרווארד עד לכיכר שבי קנדל מיקרוסופט יש מתקן יפה בשם קולע "NERD" - המחקר החדש באנגליה ובפיתוח המרכז. אנחנו נגיע לשם בסביבות השעה 8 בערב יהיה לנו קצת אוכל. סביב עד 1 תהיה לנו עוד קצת אוכל. בסביבות 5 בבוקר אם אתה עדיין ער ניסע מעל לIHOP או לקחת אותך בחזרה לקמפוס. האובייקטיבי יש לצלול לפרויקטי גמר לצד חבריו לכיתה ואנשי צוות. ואז כעבור כמה ימים הוא יריד CS50, שבאמת אמור להיות הזדמנות עבורכם להציג את העבודה שלך והישגים לסמסטר בעוד מתחכך זה בזה ומקבל תחושה של מה שכולם עשו. עם זאת אמרה, הרבה תודות לטומי וליוסף, ואנו רואים אותך ביום שני.  [מחיאות כפות]