דוד י מלאן: בסדר, אז זה כאן הוא זרוע מיו להקה, כמה שאנחנו יש פרויקטי גמר CS50. וזה היה הפגנה שעמדנו בתור אותך מראש שבו בעצם זרוע הדוקה למדי זו להקה כאן מקשיב לתנועות השרירים שלך שלאחר מכן ממופים בתוכנה למחשב הנייד של קולטון כאן ש היה שiTunes ו השיר כבר עמד בתור. במקומי demoing זה, קולטון היה במעבדה ברור כל השבוע מקבל הפגנה מוכן למתנדב אמיץ. אם מישהו הייתי רוצה לבוא על up-- ראה את היד שלך ראשונה. בואו תעלה. [00:01:09] בְּסֵדֶר. ומה השם שלך? 

[00:01:13] קהל: אה, מריה. 

[00:01:14] דוד י מלאן: מריה, נחמד לראות אותך. תבואו לכאן ב. תן לי להכיר לך את קולטון. קולטון, זה מריה. 

[00:01:21] COLTON: היי, נחמד לפגוש אותך. 

[00:01:23] דוד י מלאן: כל נכון, כל כך צעד אחד, אנחנו הולך יש לך לשים זה לזרוע שלך כך שזה די הדוק ליד המרפק שלך. ובינתיים, בואו לשים ב- Google הזכוכית שלנו ואנו לערבב טכנולוגיות היום. 

[00:01:33] COLTON: ראשית נצטרך להתחבר זה לדברים. 

[00:01:36] דוד י מלאן: אישור. למעשה, בואו נשים כזרוע שלך קרוב לכבל זה אפשרי כדי שנוכל לסנכרן אותו ראשון. 

[00:01:41] COLTON: בואו לעשות את זה. 

[00:01:42] דוד י מלאן: ובינתיים, כל כך שכל אחד יכול לקבל מבט קרוב יותר, אנו לזרוק המצלמה של אנדרו על המסך יש. אז יש לנו כבל USB זה שמחובר לסרטה של ​​מריה. ותן לי לזרוק המסך של קולטון על המקרן הבא. 

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

[00:02:30] COLTON: ללכת ככה. וכמו ש. וכל הדרך לצד ימין. לחזור. 

[00:02:35] דוד י מלאן: אישור. נקודת מבט שונה. זה לא אתה. זה אנחנו. 

[00:02:40] מריה: אישור. דוד י מלאן: מס ' בואו נעבור גבוה יותר כך שזה אותו קרוב יותר למרפק שלך, או אפילו חזק יותר. בְּסֵדֶר. 

[00:02:52] הנה אנחנו מתחילים. זה יהיה זמן טוב עבור CS52X. הנה אנחנו מתחילים. 

[00:02:57] נחמד מאוד. אישור. אגודל לזרת. 

[00:03:02] נחמד מאוד. מורחים את האצבעות שלך. טוב. גל נכון. זה מוזר מראה לך עם hand-- השמאל 

[00:03:17] COLTON: כן, זה מוזר. דוד י מלאן: גל ל מהימין ומלנוע קדימה. הרצה קדימה כדי לדלג או הבא. זה נכון Wave על אישור. 

[00:03:25] מריה: אני don't-- לחכות. 

[00:03:26] דוד י מלאן: צריך קצת עזרה? 

[00:03:28] COLTON: אז אתה הולך ככה. מריה: הוא הופך דבר אחר, אם כי. COLTON: זה. דוד י מלאן: כן אני לא יודע למה זה מראה לך שמאליות. COLTON: למה אתה לא try-- רק לנסות ללכת ככה. 

[00:03:38] דוד י מלאן: לא? אולי תגיע הזרוע שלך את מעט ישר ולעשות את זה יותר פתאומי כזה. כן, בסדר, בואו. 

[00:03:48] מריה: אני מצטער. דוד י מלאן: זו לא אשמתך. COLTON: זה בסדר גמור. דוד י מלאן: בסדר. Well-- 

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

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

[00:04:26] מריה: תודה לך. 

[00:04:28] דוד י מלאן: תודה לך. אנחנו נשמור אותו, אבל אנו נותנים לי you-- מה דעתך על כדור מתח כאן? אה, and-- if--, כן, תודה. בְּסֵדֶר. אז לסקרן, אם היית מכיר את בחירת הקול שעשינו שם קודם לכן, טלוויזיה מדהימה להראות שאתה ממש צריך להיות על נטפליקס צופה בולמוס זה אחד כאן. 

[00:04:51] 1 SPEAKER: גבירותיי ורבותיי, קוסם בשם ג'וש. 

[00:05:04] דוד י מלאן: וככל הנראה, זה דבר לטקסטי במהלך הרצאה עכשיו. אני שאומר לי כי מריה היה יום הולדת אתמול. יום הולדת כל כך מאושר מ CS50 למריה גם כן. 

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

[00:05:45] סיפור ארוך קצר, סטיב זכה סופו של דבר על פני, הצטרפתי למיקרוסופט כשהם היו רק 30 עובדים. ועד שהוא פרש לא מזמן, הייתה לחברה 100,000 עובדים בשנים האחרונות. וכך אתר אינטרנט הידוע בשם סף הכנתי מחווה זו בוידאו שאנחנו חשבנו משותף שנותן לך תחושה של רק כמה אנרגיה סטיב מביא לכל הצגה שהוא נותן. [וידאו השמעה] -Microsoft כמו ילד רביעי. ילדים עושים לצאת מהבית. במקרה זה, אני מניח ש אני עוזב את הבית. היי ביל, whazzap? 

[00:06:23] -Wazzap? 

[00:06:24] הי, wazzap? ניתנו לנו הזדמנות אדירה. וביל נתן לנו את ההזדמנות. אני רוצה להודות להצעת חוק ש. אני רוצה שגם. קצב החדשנות לא הולך להאט. 

[00:06:42] זה הולך להגיע מהר יותר ומהר יותר. אולי יש כמה מתחרים שבוטלו למרבה הצער! 

[00:06:54] אני אוהב את החברה הזו. כן! אני מחשב, ואני אוהב את החברה הזאת! 

[00:07:08] מפתחים, מפתחים, מפתחים, מפתחים, מפתחים, מפתחים, מפתחים, מפתחים. כן! מפתחי אינטרנט! 

[00:07:19] מפתחי אינטרנט! מפתחי אינטרנט! הקשב למה אחר שאתה לקבל ללא תשלום נוסף! 

[00:07:28] מנכ"ל MS-DOS, מינוי לוח שנה, ערימת קלפים, כרית לב, שעון, לוח בקרה. ו, אתה יכול להאמין? Reversie! 

[00:07:35] לצרוב אותם לתקליטור! לפרסם אותם ל- MSN! אתה לשלוח אותם לחברים! 

[00:07:40] כל בלחיצה אחת! אחת מיקרוסופט, אסטרטגיה אחת, team-- אחד התמקד, ממושמע, מקצועי, ומומחה בכל מה שאנחנו עושים. תן לי להשתמש בקו מסרט ישן. 

[00:07:52] מערכות יחסים הם כמו כרישים. הם נעים קדימה או שהם מתים. אני דווקא חושב שטק חברות זהות. 

[00:08:01] [END הפעלת וידאו] דוד י מלאן: אז אנחנו כל כך שמחים להודיע ​​כי סטיב יצטרף אלינו כאן בCS50 ביום רביעי הבא ב המקום הרגיל והזמן כאן. החלל צפוי להיות מוגבל. וכך להצטרף אלינו באופן אישי, אנא כיום ראש או זמן קצר לאחר מכן לcs50.harvard.edu/register. 

[00:08:22] ואנו נחזור אל על ידי יום שלישי מאשר כתמים. מצפה כי הבא יום רביעי במהלך ההרצאה בCS50. עכשיו, בחדשות אחרות, יצאתי לי נתקל בזה בCrimson רק היום האחר. 

[00:08:34] מתברר שאחד מאנשי צוות של CS50 ולפחות אחד מתלמידיו של CS50 פועל כעת לUC נשיא וסגן נשיא, שהחזיר אותי לימים שלי בחזרה כשהפסדתי בבחירות UC חרוץ. אבל כסף הבטנה בזה הוא שאני תמיד לספר את הסיפור הוא ש אחד אני בטוח סיבות רבות איבדתי בחירות היו חוסר מוחלט של כשרון לדיבור בפני קהל. וכך בכנות, זה הסיע אותי, חוויה ש אני חושב שהשנה שלי ג 'וניור, לחתום למעשה לחברת מחשב הרווארד, ש היא הקבוצה בקמפוס ש מחזיק שיחות טכניות שונות ודברים אחרים. ואני לקחתי על ההוראה שלהם סמינרים ולכן הייתה לי הזדמנות, הזדמנות נפלאה, להתחיל לעבוד על זה בדיוק. אבל גם, לא הייתה לי הזדמנות במהלך ניסיון זה ללמד את עצמי עוד יותר HTML. ואז אני דוחה את זה אתמול בלילה על ידי מחפש דרך האתר מבוסס HTML אני עשיתי כבשינה 1997, '98, עבורי קמפיין שנראה כמו זה כאן. אני יודע. 

[00:09:29] Because-- וכמובן, הודעה החלטת עיצוב המדהימה הזה בשנת 1998 או מה שלא. הדבר הראשון שאתה רוצה שמשתמשים לעשות על ביקור באתר האינטרנט שלך הוא שיש ללחוץ על קישור אחר רק כדי להיכנס לאתר האינטרנט שלך כאן עם הנזיר מאחור כמו וילון אפוף בי ככל הנראה פלטפורמת מסע הפרסום שלי הייתה. וזה כל מה שאתה מקבל היום הוא רק מסך. אבל אני קורא דרך, כמו, כרזות הבחירות שלי אתמול בלילה והמצע שלי. 

[00:09:50] ואני כל כך כעסתי על הזמן. הפלטפורמה שלי was-- זה היה מעניין. אז אני כבר נרגעתי מאז. אבל ביום מן הימים, אני ארוץ שוב ו אני מקווה שיותר טוב ממני זה זמן. 

[00:10:03] אז HTML, שפה שבה עשיתי שin-- תקבל בקרוב יעשה הרבה more-- זה משהו שאנחנו כבר מדבר על לאחרונה ובמידה רבה לוקח כמובן מאליו עכשיו כי אנחנו כבר עברנו לשפות אחרות. אבל בואו נעצור לרגע ו לשים כמה מהדברים האלה בהקשר. אז במשפט, מה זה HTML? 

[00:10:18] או, מה שמשמש ל? כל אחד? כן. 

[00:10:20] קהל: Markup לאתרים. דוד י מלאן: סימון עבור אתר. אז זה שפת סימון ש מאפשר לך מבנה דף אינטרנט. הכותרת עולה בכאן, כותרת הולך כאן, גוף עובר כאן. זה מודגש, זה הוא italics-- פרטים מסוג זה. 

[00:10:33] אישור, טוב. אז CSS מאפשר לי you-- ואני לקח כמה חירויות יש עם נועז פונה והנטוי בגלל זה יותר טוב מיושם עם זה. CSS is-- מה? אומר במשפט. מישהו בכלל. כן. 

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

[00:11:18] ובכן, עם קצת CSS, כפי שאתה יכול להבין, למעשה אתה יכול לצבוט את זה ולעשות את זה משהו הרבה יותר מוכר והרבה יפה להסתכל על. אז CSS הוא על את הסגנון של אתרים. אבל אז הצגתי עוד שפה, PHP, המאפשרת לנו לעשות מה? 

[00:11:36] בואו פשוט נעשה מה? כל אחד. יש סיכון מעבר כמה השורות הראשונות. כן. 

[00:11:40] קהל: ליצור תוכן דינמי. דוד י מלאן: מושלם. ליצור תוכן דינמי. ואתה יכול לעשות את זה ב כל מספר של שפות. אנחנו לקרות להשתמש PHP כי זה בחלק כל כך דומה לתחביר C. 

[00:11:50] אבל PHP עושה בדיוק את זה. הוא מאפשר לך באופן דינמי ליצור פלט. וחלק מהתפוקה שיכול להיות HTML, כפי שאנו כבר בדרך כלל עושים. וזה גם, כי זה שפת תכנות, היא המנגנון שבאמצעותו אנחנו יכולים לדבר למאגרי מידע. 

[00:12:03] ואנחנו יכולים לעשות שאילתות ל שרתים אחרים כמו Yahoos ואופן תכנותי לעשות שום דבר באמת, כי אחרת אתה עלול רוצה לכפות על מחשב לעשות. אז PHP מאפשר לנו להתחיל באופן דינמי פלט תוכן. אז לפי ההיגיון הזה, לא היה לי אתר דינמי בחזרה בשנת 1998. 

[00:12:16] זה היה רק ​​דף אינטרנט סטטי. התוכן שלי היה צריך להיות שונה על ידי ידני עם gedit או שווה ערך. אבל PHP זה מה שהייתי או היה יכול להשתמש, ולא, למשהו כמו אתר הפרוש IMs, ש היה אמור לקחת רישומים ו לנהל רשימה של הדברים users-- ש בעצם שינוי על זמן, למרות שאנחנו לקרות להשתמש Perl, שונה שפה בזמן. 

[00:12:35] ואז לבסוף, הצגנו SQL-- שפת שאילתות מובנית. אז עוד שפה המשמש לשם מה? משמש למה? האם אנחנו יכולים להעז slight-- בסדר, אנחנו לא הולכים כדי לקבל הרבה יותר רחוק מהתזמורת כאן. קהל: זה פרוטוקול נהג לדבר למאגרי מידע. דוד י מלאן: פרוטוקול נהג לדבר למאגרי מידע. תן לי לצבוט. זה שפה טבעית המשמשת לדבר databases-- בוחר ומוסיף ומוחקת ועדכונים ולמעשה אפילו יותר תכונות ש אנחנו אפילו לא צללנו לאבל ייתכן שתרצה explore-- יש לי לחקור, למשל, פרויקט גמר. אז יש אלה חלקים שונים. 

[00:13:09] ואני מקווה שPset7, למרות ש המפרט שלו הוא די ארוך, זה בכוונה ארוך ללכת לך דרך איך הדברים האלה כל יכולים להיות מוקלד יחד. עכשיו, ביום שני, אנחנו הציג השפה האחרונה שלנו שאנחנו באופן רשמי נציג ב course-- שהוא, JavaScript. זה, כמו PHP, הוא שפה פירשה. 

[00:13:25] אבל הבחנה מפתח אני הצעתי ביום שני הוא שבעוד PHP מבצע או מתפרש על השרת, ש במקרה זה הוא מכשיר CS50, או אולי יש כמה אתרים מסחריים שרת באינטרנט, JavaScript בדרך היא שפה שפועלת בצד הלקוח לא שרת side-- כך בדפדפן. כלומר, בדיוק כמו כשפתחתי את קוד מקור פייסבוק ומצא את כל קבצי .js אלה, המשמעות הייתה כי כאשר אתה מבקר בפייסבוק או ביותר אתרים בימים אלה, אתה מקבל לא HTML בלבד, לא רק CSS, אבל חבורה של JavaScript שלם קוד לעתים קרובות בצורה של קבצי js. ואז זה browser-- שלך Mac או PC-- שמבצע קוד ש. 

[00:14:03] אך הדפדפן שלך מבצע אותו. אתה יכול לחשוב בסוג של ארגז חול. כדי שהקוד JavaScript לא צריך להיות תוכל למחוק קבצים במחשב שלך. זה לא אמור להיות מסוגל לשלוח מיילים בשמך. סוג הדפדפן שלך ממגבילה מה שאתה יכול לעשות עם זה. 

[00:14:17] אז במובן הזה, זה קצת פחות חזק, אולי, יותר מג אבל JavaScript יכול, כ בצד, ניתן להשתמש בשרת, למרות שאנחנו נוטים שלא לדבר על זה בהקשר זה. אז עכשיו בואו לקשור אלה יחד. בתוספת לפני שבוע, הצגנו כמה HTML בדף אינטרנט סופר המשעמם left--. 

[00:14:34] רק אומר שלום עולם. ואז הצעתי ב נכון שאנחנו סוג של יכולים לגנוב רעיונות מהדיון שלנו מבני נתונים ב- C ולחשוב על איך היררכי זה שפת סימון שמשמאל יכול להיגרר או מיושם בזיכרון כמבנה עץ בפועל עם צמתים ומצביעים ואלו סוגים של פרטים. מימין, אנו קוראים כי מסמך DOM-- מתנגד Model-- שהוא רק דרך מפוארת לומר עץ. 

[00:14:56] עכשיו, למה זה שימושי ל חושב על זה בדרך זו? כי עכשיו עם JavaScript, כי יש לנו קוד שמקבל לשחק בזה סביבה, HTML בפועל זה נשלח לדפדפן כבר ויש לו כבר נטען לזיכרון על-ידי דפדפן בעץ במחשב שלך זיכרון RAM כמו זה, אנחנו יכולים להשתמש ב- JavaScript בעצם לעבור או ללכת או חיפוש או לשנות את זה עץ DOM עם זאת אנו רוצים. כך שלמעשה, אם אתה חושב על facebook.com, אם אתה משתמש בתכונת הצ'אט, אם אתה משתמש ב- Gmail ותכונת Gchat כלשהו, כל דבר שבו יש לך הודעות שמגיעות שוב ושוב ושוב, ההודעות האלה הן כנראה, כמו, תג LI, תגי פריט רשימה, אולי. 

[00:15:35] או אולי הם פשוט divs שממשיך להופיע בכל פעם שאתה מקבל הודעה מיידית. וכך זה רק אומר מה פייסבוק או גוגל עושה הוא כל פעם שאתה מקבל הודעה מהשרת, הם כנראה באמצעות JavaScript רק להוסיף צומת אחר לזה tree-- צומת אחר לזה עץ שאז מבחינה ויזואלית פשוט נראה כמו קו חדש של טקסט על המסך. אבל הם מכניסים למבנה נתונים זה. 

[00:15:57] אז בשיעורים כמו CS124 ואחרים, שתצליח למעשה לכתוב קוד נגד מבנים כמו זה נתונים. אבל לעת עתה ב- JavaScript, אנחנו רק נניח אנחנו מקבלים את כל הפונקציונליות הזו בחינם מהשפה עצמה. אז בואו נסתכל על דוגמא. 

[00:16:09] תן לי לפתוח את קובץ בשם form.html. זה סופר פשוט. זה רק נראה ככה. 

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

[00:16:32] פעולה ככל הנראה הולכת ללכת לקובץ שנקרא register.php. השיטה שאני הולך להשתמש בזה לקבל. ולאחר מכן יש לי טקסט שדה ששמה דואר אלקטרוני. 

[00:16:40] יש לי שדה סיסמא ששמה את הסיסמה. יש לי עוד שדה סיסמא ששמו הוא אישור באופן שרירותי למדי. זה רק עוד פרמטר HTTP. 

[00:16:49] ואז אנחנו כבר לא בשימוש אלה, למעט מאז IMs פרוש ההדגמה בclass-- תיבת סימון שהיא רק סוג שווה בדיקה. ואני אתקשר אל ההסכם ש. אז סוג של באופן שרירותי לי אבל בשם נוחות תחומים אלה. כך שכעת, כאשר צורה זו מקבלת הגיש, בואו לראות מה קורה. אם אני עושה את malan@harvard.edu, אני אעשה את סיסמא של ארגמן. אני אעשה את סיסמא של דבר. בואו לא נשתף פעולה. 

[00:17:10] ואני לא אבדוק את התיבה. תן לי לחץ הרשמה. וזה אומר, HM, אתה רשום. לא ממש. 

[00:17:16] אבל את כתובת האתר השתנתה. אז טופס זה בבירור היה מותר להגיש לregister.php. אבל יש להניח, שאני צריך להיות המושך את חלק מהשגיאות. עכשיו, בPset7 וכמה דוגמאות ההרצאה שלנו, היינו בדרך כלל להדפיס הודעת שגיאה אדומה גדולה כאן אומר, חסר שם, או חסר סיסמא. אנחנו כבר עשינו את זה לפני ויש לנו זיהוי שגיאות בצד השרת לעשות. 

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

[00:17:48] אולי אתה מקבל pop up. אבל אתה לא תבזבז את הזמן של שליחה ל נתוני שרת זה לא שלם. אז בואו נראה כיצד אוכל להשיג תכונה זו גם כן. 

[00:17:56] תן לי ללכת לform1.html, שנראה אותו הדבר. אבל אם אני עושה את זה זמן malan@harvard.edu ואני מקליד ארגמן ואני לא אשתף פעולה נוספת אבל לחץ על הרשמה, שם לב עכשיו. זה לא הפתרון הכי סקסי. לפחות אני כבר תפסתי את השגיאה. ואני השתמשתי ההתראה פונקציה בJavaScript-- שאנו משתמשים רק בכיתה. באופן כללי, אתה לא צריך להשתמש בזה כי זה יכול לצאת מהר מאוד מכלל שליטה. אבל סיסמאות לא תואם היא השגיאה. 

[00:18:19] תן לי ללכת קדימה ולחץ על אישור. אבל מה ממסעדה המפתח כאן הוא שכתובת האתר לא השתנה. מבזבז כל כך אני כבר לא טרחתי הזמן של השרת שואל אותו שאלה שיש לי יכולים הבין את התשובה לעצמי. 

[00:18:30] והמשתמש, למרות ש מדבר על זה יותר מהמשתמש של הולך לחשוב על זה, הוא הולך להיות משוב מיידי. אין חביון עם הקישוריות לרשת. אז בואו נסתכל על קוד מקור זה. 

[00:18:40] נראה Form1.html מבחינה מבנית דומה כאן. הצורה היא למעשה אותו הדבר. אבל בואו יראו את מה שעשיתי כאן. ויש דרכים שונות לעשות את זה. ואני עשיתי ישר ביותר חסיד, אבל לא בדרך האלגנטית ביותר עד כה. יש לי תג סקריפט. אז אני קורא ל document.getElementById ('רישום'). ואני מאחסן ערך ש בצורה, משתנה. 

[00:19:04] אז מה עשיתי? אתה יכול לחשוב על document.getElementById להיות כ פונקציה מיוחדת ש JavaScript נותן לך זה ממש נותן לך מצביע לאחד הצמתים או מלבנים בעץ הזה. אז עכשיו זה מה שמשתנה הטופס שלנו ב- JavaScript הוא למעשה מצביע על. 

[00:19:21] אז עכשיו התחביר שונה מ C. אבל אנחנו עושים כמה דברים כאן. אחד, אחד זה קצת מוזר מחפש, בוודאי לעומת ג אבל תסתכל על קו 35. אז על form.onsubmit השמאל. נזכיר onsubmit שהוא כמו שדה בstruct. אם אתה חושב על משתנה הצורה זה פשוט להיות struct C, אולי יש לו כמה תחומים. 

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

[00:20:02] ואכן, זה מה ש מילת המפתח כאן עושה. זה אומר, תן לי את פונקציה חדשה. אבל מה השם שלה הולך להיות, ככל הנראה? 

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

[00:20:21] אבל זה בסדר בעצם. זה פונקציה אנונימית, או פונקציה למבדה כפי שכמה שיקראו לזה. וזה רק אומר ש זה עדיין פונקציה. זה פשוט, אתה לא יכול לקרוא לזה בשמו. אבל זה בסדר. כי שוב, הדפדפן כבר מתוכן מראש על ידי חברות כמו גוגל או מיקרוסופט או Mozilla או לאחרים רק יודע שאם שדה .onsubmit בתוך אלמנט טופס יש ערך, להתייחס אליו כfunction-- מצביע פונקציה, אם תרצה. וקורא לזה כאשר הטופס נשלח. 

[00:20:46] אז מה קוד צריך להיות מוצא להורג כאשר הטופס נשלח? ככל הנראה, כל מה ש בתוך הסד המתולתל. וזו רק סגנוני. 

[00:20:53] אתה יכול לעשות את זה כמו אנו נוטים לעשות בCS50. אבל ב- JavaScript, רוב האנשים נוטה לשמור אותו באותה השורה רק בגלל שזה בצורה ברורה יותר הוא הקשורים למילות מפתח שפונקציה. אז עכשיו מה אני עושה? 

[00:21:03] אם form.email.value שווה שווה המחרוזת או שום דבר הריק, הנה התראה שבו אני הולך לומר, עליך לספק את כתובת הדוא"ל שלך, ולאחר מכן לחזור שווא. וזה ששקר התמורה ש מונע את הטופס שמהוגש. בינתיים, אם ערך הסיסמה ריק, אני הולך לצעוק על המשתמש ואומרים, עליך לספק את הסיסמה. 

[00:21:21] דברים בינתיים מקבלים קצת מגדלת כאן. אם form.password.value לא form.confirmation.value שווה, תחום האחר, לצעוק על המשתמש שהסיסמות אינו תואם כפי שהם לא לפני רגע. ואז זה אחד זה סקסי קטן כי אני ידעתי שאני יודע רעיוני ש בדק זה השם של תיבת סימון. 

[00:21:40] אז אני יכול פשוט להשתמש בסימן קריאה לציין אם הבדיקה היא לא checked-- זה בוליאנית ערך, אמיתי או false-- אני צועק על המשתמש מסיבה זו. אחרת, אם אנחנו מקבלים דרך כל התנאים הללו, בואו פשוט לחזור נכון. בואו הצורה תוגש. ואז זה יקרה. 

[00:21:56] בואו תקליד בארגמן. בואו לבדוק את התיבה, לחץ על רישום. ועכשיו אני עובר ליעד. עכשיו, אין שום מסד נתונים יש. אין שום דבר מעניין בregister.php. אני רק צריך משהו למעשה לדבר. אז תן לי להשהות, כאן. כל שאלות על מה בדיוק עשינו או מה שחלק מהתחביר חדש זה? אישור, כן? 

[00:22:17] קהל: אז כל תיבת סימון הוא באופן אוטומטי בוליאנית. אתה לא צריך להכריז על זה ככה. 

[00:22:21] דוד י מלאן: נכון. כל תיבת סימון שנשלח אליך מ טופס HTML לקוד JavaScript שלך יטופל, כן, כ בוליאני value-- אמת או שקר. זו שאלה טובה. ואילו ערכים האחרים, של כמובן, הייתה על מודעה, מחרוזות AKA. 

[00:22:36] בסדר, אז תנו לי אחורה עוד קצת. מה היה כל העניין של זה? רק שיהיה ברור. כמו, שאנחנו כבר יודעים, אפילו מPset7 ואפילו מההרצאה בשבוע שעבר דוגמאות, שאנחנו יכולים כמובן לבדוק $ _GET $ _POST לראות אם המשתמש נותן לנו ערך ריק. זכור את הפונקציה הריקה ב- PHP. 

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

[00:23:06] קהל: מהיר יותר, ואתה לא לשלוח נתונים חסרי תועלת לשרת. דוד י מלאן: טוב. זה מהיר. אתה לא שולח חסר תועלת הנתונים לשרת. 

[00:23:12] כך שאתה מקבל בחזרה יותר תגובה מיידית. ובאופן כללי, המשתמשים החוויה היא טובה יותר. תחשוב על האלטרנטיבה. 

[00:23:17] אם לGmail-- והיה המקרה לפני שנים רבות. נניח שיש לך דוא"ל חדש Gmail שלך חשבון, אבל הדרך היחידה דרך כדי לראות זאת היא, כמו, טען מחדש את הדף כולו. או נניח שאתה לוחץ על קישור כדי לקרוא דואר אלקטרוני. 

[00:23:29] כל מה שיש כדי לטעון מחדש כל כך כי אתה יכול לראות את הדואר אלקטרוני. או Facebook-- אתה מקבל הודעה בצ'אט. אתה לא רואה את זה עד שאתה טוען מחדש הדף או לחץ כמה קישור. 

[00:23:36] כמו, זה יהיה מאוד חווית משתמש מעצבנת. וזה מה שזה היה כמו, ברור, אז, כשרצתי לUC והאינטרנט היה הרבה פחות דינמי וJavaScript לא היה כמו לפופולרי כפי שהוא עכשיו. ודברים נעשים הרבה יותר דינמי והרבה יותר בצד הלקוח במובן זה. 

[00:23:49] אבל יש מלכוד כאן, ו זה סוג של תפסתי אותך מעצבנת. רק בגלל שאתה מוסיף בצד הלקוח גילוי כזה לא אומר אתה יכול או צריך לנטוש זיהוי צד שרת. אתה בעצם רוצה לשים אותך בדיקת שגיאות בשני המקומות. כי מה שהיה אחד של הלקח מהמאמר שקראתי כמה קטעים בsystem-- CMS המטופש הזאת ניהול System-- תוכן שהיה יישום מערכת האימות שלה, כניסתה באמצעות מה מנגנון? JavaScript. 

[00:24:20] קהל: JavaScript. דוד י מלאן: JavaScript, בדיוק, נכון? זה היה באמצעות JavaScript. ופשוטו כמשמעו, יש לך חבר ' שיחקתי קצת כנראה עם המפקח של Chrome. ואם אני יכול למצוא אותו, לבדוק את האלמנט. 

[00:24:30] תן לי ללכת על לעשות כל האפשרויות של הכרום. וזה כמה זה קל ל להשבית JavaScript בדפדפן. בדוק, לא יותר JavaScript. 

[00:24:38] אז בהגינות, הרבה של האינטרנט בימים אלה הוא פשוט הולך לשבור בגלל Gmail וsites-- האחר Facebook-- להניח ש JavaScript מופעל. אבל אם אתה עושה משהו טיפשי כמו מתן תוקף לקלט רק משתמשים והבדיקה ל שגיאות בצד הלקוח, יריב יכול לעשות זאת בקלות. ואז גם חכמה יותר יריב כמוכם עכשיו יכול להשתמש ב- Telnet או סלסול או פקודות קו רק הפקודה ובעצם לשלוח הודעות לשרת כי בדומה אינם שגיאה נבדק. 

[00:25:05] אז זה יותר מ החלטת ממשק משתמש ממה שהיא בפועל טכנית improvement-- יישום לוואי כמו זה לקוח משהו. אז עכשיו מבט מהיר, אבל אז אני לדחות לטיול המקוון דרך לזה. בצורה שתי, אנחנו באמת עברנו וניקיתי את הקוד קצת. אבל הרשית לי לדחות את זה ל של קטעי הווידאו שסביר להניח ש להטביע בPset8 זה רק מראה לך תחביר דומה באמצעות ספרייה שנקראת jQuery, שהוא סופר, סופר ספרייה פופולרית ב- JavaScript כי בכנות רוב האנשים פשוט להשתמש בימים אלה ואפילו לבלבל כ בן JavaScript עצמו. 

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

[00:25:50] אז בפרט, תן לי ללכת קדימה, לפתוח את זה כאן. נו באמת. הנה אנחנו מתחילים. 

[00:25:59] תן לי לפתוח את התמונה הזאת כאן. מסובך שלא לצורך מחפש, אבל זה מתאר בטכניקה הנקראת AJAX-- Asynchronous JavaScript and XML, שבו X ל- XML ​​הוא למעשה כבר לא בשימוש באמת. הוא נוטה להשתמש במשהו בשם אחר JSON. 

[00:26:13] אבל כאן הוא איך דבר כזה Google Maps או Google Earth עובד. בואו ננסה את זה במהירות ההבזק, בעצם. תן לי ללכת קדימה ולפתוח עד Chrome בדפדפן שלי. 

[00:26:21] ותן לי ללכת ל, אומר, maps.google.com. ובעצם, אם אתה בן מספיק כדי לזכור מה, כמו, MapQuest היה כמו חזרה ביום, ואולי הם עדיין עובדים ככה. כאשר אתה משמש לחיפוש something-- רחוב 33 אוקספורד, קיימברידג ', מסצ'וסטס, בואו נעשה את זה-- למעשה היית, אם אתה רציתי כדי לנוע למעלה ו למטה, שמאלה וימינה, היית נראה כמו חץ גדול על גבי, וזה היה מראה לך עוד מסגרת של המפה כאן. או שהיית לחץ על שמאל ואתה הייתי הולך לכאן, או לחץ אחר והיית הולך לכאן. אבל במקום אלה ימים, אנחנו כמובן רק לוקח כמובן מאליו שאנחנו יכולים ללכת סביב קיימברידג 'די מהר רק על ידי לחיצה וגרירה. אבל שים לב שיש כמה תקלות. 

[00:26:59] אם אני עושה את זה מספיק מהר, מה שקרה כנראה כאני גורר קצת מהר מדי למחשב כדי לשמור על קשר? מה אתה רואה? כן. 

[00:27:07] קהל: פיקסלים לא לרענן. דוד י מלאן: פיקסלים לא לרענן. יש actually-- ואתה יכל לראות את זה, למעשה, אם אתה צופה באינטרנט והפסקה למעשה זה או מאט את הדברים לonce-- תראה שיש אריחים, ריבועים, או מלבנים ש חסרים במפה עד שבריר שני לאחר מכן, נתונים נוספים, תמונות נוספות למעשה תופיע על המסך. ולמעשה, אם אנחנו עושים את זה על ידי ההסתכלות עד Chrome's-- נניח, Chrome-- בואו נראה. אנחנו לא יכולים לעשות את זה. 

[00:27:31] אה, אופס. בואו לפתוח את maps.google.com. תן לי לעשות החלון גדול שוב. 

[00:27:36] חזור לרחוב אוקספורד 33. מה היה באתר הייתי בתקופה האחרונה? היה לי, כמו, בטרוף פרטי זה ל את עצמי, כי הייתי הודעה אז מיידית כל חבר שהיה באתר מי שרצה לשמוע את זה. יש איזה אתר. אני חושב שזה כל כך Comcast-- ספק שירותי אינטרנט אמריקאי גדולים מאוד. אתה יכול, בעת הרשמה לכבל חדש שירות מודם או שירות טלוויזיה בכבלים, יש להם צורה מאוד סביר שבו הם מבקשים ממך לכתובת שלך. ויש לי זה מדהים תכונה בשם אוטומטי מלא, כמו גוגל, שמתחיל למלא בתשובה לשאלה שלך. 

[00:28:04] הבעיה היא, שהם עושים אוטומטי מלאים על הדברים הראשונים שאתה מקליד. אז אם אתה מתחיל להקליד ב -33, זה אראה לך, פשוטו כמשמעו, בכל בית באמריקה שמתחילה עם המספר 33 לפני שתמשיך ל מצפה לך להקליד יותר. אז אם אתה מקליד 33 אוקספורד, אז זה מראה לך כל רחוב באמריקה שיש לו 33 אוקספורד ב שמו, ללא קשר לעיירה כי אתה ב. 

[00:28:25] ואז אתה ממשיך להקליד. ולבסוף, הוא מבין שהם לא הצעת שירות לביתך בקיימברידג ' או משהו כזה. אבל הנקודה זו היא, שרוב יישום מטופש של רכב להשלים אי פעם. 

[00:28:34] ואני רק הולך מ על המשיק הזה שוב. אבל יש דרכים טובות ל להשתמש ב- JavaScript ודרכים רעות. וזה לא בהכרח הטוב ביותר. 

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

[00:28:57] וסביר להניח, אכן הרבה שורות אלה עכשיו הם JPEG לוכסן תמונה סוגי MIME או סוגי תוכן. זה בגלל מה שהכרום עושה כל פעם שאני לחץ וגרור, לחץ וגרור, הוא שזה מימוש, הו, אני צריך ללכת לשאול את גוגל לאריח על המפה זה נגמר כאן, במהירות להוריד אותו דרך HTTP, ולאחר מכן להוסיף אותו לDOM שנקרא לדפדפני האינטרנט בעץ זיכרון ייצוג, כך שהמשתמש, שלי, רואה שאריח מתעדכן. וזה בגלל בטכניקה הנקראת AJAX. חזרה היום, זה באמת היה המקרה שאם אתה רציתי לשנות את מה שיש על המסך, היית צריך ללחוץ למעלה, למטה, שמאלה, תקין. ולאחר מכן דף חדש ייפתח. אבל בימים אלה, כל מה ש הוא דינמי יותר. זה קורה בדרך בה אנו בני האדם היית מקווה שזה באמת אינטראקטיבי היית. והוא משיג זאת על ידי דרך של טכניקה הנקראת AJAX, שהוא אולי הכי טוב מוסבר על ידי דוגמא. ראשית, תן לי ללכת קדימה ולפתוח את קובץ נקרא quote.php ב קוד ההפצה של היום. 

[00:29:53] ולאחר מכן נתת לי לעשות אופס symbol--. תן לי לעשות סמל = GOOG רק כמה מניות. או בעצם, בואו נעשה אחד מבחינם Pset. הזן. 

[00:30:05] ועכשיו שים לב למה שאני מקבל בחזרה. אז זה באמת קובץ PHP קצר ש כתבתי שפשוט שואל את קוד מפונקצית בדיקה של Pset7 ויורק את השימוש בסד מתולתל זה ו ציטוטים וסימון מעי גס, ככל הנראה, מחיר המניה הנוכחית ל חברה שאתה עובר בדרך הגט. אז זה שונה מרוב מה שיש לנו נעשה שבהודעה אני פשוטו כמשמעו לירוק מה שנראה כמו קוד JavaScript. 

[00:30:27] למעשה, מדובר באובייקט JavaScript. למעשה, רק כדי להיות יותר ברור, אובייקט JavaScript Notation-- JSON-- רק דרך מפוארת של אומר שאתה יכול לייצג נתונים ב- JavaScript הרבה כמו שאתה יכול בPHP באמצעות זוגות ערך מפתח. אז אם אני רוצה להכריז משתנה ב- JavaScript למייצג Zamyla, ל instance-- struct לZamyla-- ואנחנו קוראים לזה סטודנט, משתנה זה. תעודת הזהות שלה היא אחד, הבית הוא וינתרופ, ושם הוא Zamyla. 

[00:30:53] אבל אני גם יכול להיות מערך של אובייקטים. אז אם באמת היינו רוצה שיהיו לי מערך ב- JavaScript המכיל אובייקטים כגון מרובים, זה זמן מייצג צוות, אולי יש לי שלושה אלה נתחי הקוד בחזרה לגב אל גב לאלה שלושה חברי צוות לשעבר. אז התחביר, די בדומה לboth-- ל- PHP. אבל זה בעיקר JavaScript. זה סימון אובייקט. אז מה זה מועיל ל? 

[00:31:17] אם אני כותב קוד שיורק את JSON-- אובייקט JavaScript Notation-- דברים ש נראה כמו חומר הזה או ש נראה כמו המבנה של Zamyla, אני יכול להשתמש בזה בתוכניות שאני כותב. תן לי ללכת לajax0.html. וזה too-- לא הרבה חשבתי שניתן לאסתטיקה. אבל תראה מה קורה. 

[00:31:34] תן לי ללכת קדימה והקלידו בחינם כאן. לחץ לקבל הצעת מחיר. ושימו לב את כתובת האתר לא השתנתה. אבל אני לא מקבל pop up עם כנראה המחיר של היום אגורה המניה של 0.15 $. אז לא כל כך רע. אבל ההבדל הוא שאיכשהו, הנתונים אלה חזרו אליי ישירות. אבל בואו ניקח צעד לקראת משהו מוכר יותר. בגרסה אחת של זה, תן לי הקלד שוב חופשי, לחץ על קבלו ציטוט, וnow-- הו, זה היה למעשה גרסת jQuery. אז בואו me-- אני לא מהר קדימה די רחוק מספיק. תן לי לעבור לגרסה שתי, המקום שבו רציתי. שים לב מה שעשיתי כאן. יש לי אינטרנט page-- סופר גרסה פשוטה של ​​כל דף אינטרנט אולי אתה משתמש כיום בשדה טקסט כאן בחינם ולאחר מכן, ככל הנראה, רק על מודעה. 

[00:32:14] זה לא טופס כאן, כנראה. אבל אם אני לוחץ לקבל ציטוט, מבחין דף האינטרנט שלי זה עומד להשתנות כאילו אני פשוט יש לי הודעה מיידית חדשה או כאילו אני רק עברתי המפה וצריכה לקנות עוד כמה נתונים הוסיף באופן דינמי לדף האינטרנט ללא שינוי כתובת האתר והמשתמש ניסיון מקבל נקטע. ואכן, אני עדיין ב בדיוק את אותו ajax2.html place--. 

[00:32:35] אז בואו נסתכל רק בדוגמה זו ולראות איך זה קורה. תן לי ללכת לajax2.html. ושים לב את הטופס ראשון. 

[00:32:44] כאן למטה, אני פונה את אוטומטי מלא. לפעמים זה נעשה מעצבן אם הדפדפן הוא מנסה להראות לך ההיסטוריה כולה שלך. אז אתה יכול לעשות את זה ב- HTML על ידי רק אומר אוטומטי להשלים את. 

[00:32:53] נתתי לי שדה טקסט זה symbol-- ולא, זיהוי של סמל. ועכשיו, זה תכונה מעניינת. לא דברנו על תוחלת, אבל אתה יכול לחשוב על זה כמו תג פסקה או div תג. זה מה שנקרא ב- קו אלמנט, ש משמעו שאתה לא תקבל סעיף לפרוץ מעל ומתחתיו. זה רק הולך להישאר באונליין ללא להכות את המקבילה של הזן. אז נתתי לי נתח זה של HTML שייקבע מזהה ייחודי כי אני באופן שרירותי בשם מחיר. ויש לי כפתור Submit. 

[00:33:21] כי עכשיו את here-- וזה קוד כמה מעט בעצם סופר מדהים אתה יכול לכתוב לעשות יחסית מסודר things-- שים לב למה שעשיתי פה, אם יש לי לגלול מעלה לראש דף זה. אני כבר נכלל לראשונה ב הראש שלי תג סקריפט שבעצם מתייחס JavaScript להגיש במקום אחר. זו היא של הארגון שכותב jQuery, וזה רק נותן לך את המילה האחרונה גרסה של ספריית jQuery. 

[00:33:42] אז זה כמו סוג של חד כולל בC או לדרוש ב- PHP. אתה משתמש בתג סקריפט עם תכונת מקור. אבל עכשיו הקוד שלי הוא הולך להיות ממש כאן. 

[00:33:52] שים לב שיש לי ציטוטים פונקציה שנקראת. וזה נראה קצת נסתר במבט ראשון. אבל בואו להקניט זה בנפרד. תן לי את כתובת משתנה בשם. להקצות אותו, פשוטו כמשמעו, במחרוזת זו. אז, בגרשיים בודדים, במרכאות כפולות ב JavaScript פשוט נותן לי מחרוזת. מה התוספת עושה? שרשור. 

[00:34:08] אז זה עכשיו הוא תחביר jQuery שלוקח קצת הזמן להתרגל. אבל זה רק אומר לך לקבל אותי DOM צומת שייחודית מזהה הוא סמל. Hashtag יש משמעות סמל מזהה ייחודי. 

[00:34:21] סימן הדולר ב סוגריים רק אומר, לעטוף את זה בjQuery סוג של רוטב סודי כל כך אתה מקבל פונקציונליות נוספת. ולאחר מכן .val הוא ככל הנראה פונקציה, או כפי שאנו אומרים עכשיו, שיטה בתוך פיסקה זו שרק נותן לך את הערך. אז בקיצור, מכוער ומבלבל כמו זה שנראה במבט ראשון, זה רק אומר שמקבל עם משתמש הקליד ב, לשים אותו בסוף של המחרוזת על ידי שרשור זה. זה כל מה ש. 

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

[00:34:55] דולר סימן פשוט נראה מגניב. אז קהילת jQuery פשוט סוג של השתמש בו כסמל המיוחד שלהם. זה לא אומר מה שזה אומר ב- PHP. ב- JavaScript, סימן דולר הוא בדיוק כמו מכתב של אלפבית או מספר למשתנה. 

[00:35:07] רק אתה יכול לקבל את זה כשם. פשוט נראה מגניב. אז הקהילה אימץ אותו ככינוי לספרייה שלהם שנקראת jQuery. 

[00:35:13] וזה סופר פופולרי. אז לקבל JSON הוא בדיוק זה. זה פונקציה ש הורים בבית jQuery כתבו שמקבל JSON מserver-- סימון אובייקט JavaScript. ממה כתובת אתר זה הולך כדי לקבל מידע זה? כנראה מכתובת אתר זו כאן. 

[00:35:27] ומה הדפדפן צריך לעשות כ ברגע שהיא מקבלת בחזרה את התגובה הזאת? וזה הקסם של AJAX, כך ל Asynchronous JavaScript speak-- ב- XML. קשה לראות עם כזה דוגמא פשוטה כמו שהיו לנו כאן. 

[00:35:41] אבל זה היה אסינכרוני ב המובן שהקוד שלי כש להורג שלח מסר ל השרת ללכת להביא לי קצת JSON. וזה קרה סופר מהיר כי יש לי תגובה. אבל מה שמעניין הוא שזה שורת קוד לא לתלות את המחשב שלי. 

[00:35:55] אני לא רואה את סמל מסתובב. אני לא אבדתי את היכולת להזיז את העכבר שלי. הדפדפן שלי היה דווקא בסדר גמור. 

[00:36:01] בגלל שהדרך JavaScript מטפל תגובה מהשרת היא כדלקמן. אתה נרשם מה שאתה רוצה לקרוא פונקציה של קריאה חוזרת, ש רק אומר, היי, JavaScript. ברגע שהשרת מגיב עם JSON, נא להתקשר פונקציה אנונימית זו. 

[00:36:18] ובבקשה עבר לפונקציה זו מה מחרוזת השרת לירוק כטיעון בשם נתונים. אז ב, מילות אחרות, אם אני הרכבה דינמית quote.php URL עוברת בזה סמל כמו בחינם או GOOG או מה שלא, אז אני אומר לי JavaScript ללכת לקבל את כתובת האתר ש. זכור כי הדפדפן הוא הולך להחזיר משהו זה נראה כמו שראינו earlier-- זה. 

[00:36:42] ומה הטיעון השני כאן כדי לקבל JSON אומר הוא קורא לפונקציה זו כאשר השרת מקבל בחזרה בין אם זה 10 אלפיות שנייה מעכשיו או 10 שניות מעכשיו. וברגע שאתה עושה, להוסיף את המחיר לדף. תחביר זה כאן רק פירוש ללכת לקבל את הצומת מהעץ שייחודי מזהה הוא price-- תוחלת שראינו קודם לכן. 

[00:37:01] שיטה זו נקראת HTML רק אומר, ללכת להחליף HTML שמופיע שם עם data.price. מה data.price? ובכן, הדפדפן, זוכר, הראה לי זה חוזר. אז זה נתונים. 

[00:37:14] ואז זה קצת נסתר כדי לראות את הפסיקים כאן. אבל למעשה, תן לי לעשות את זה. תן לי רק להדביק את זה ממש מהר לgedit ומראה את זה כמו שהראינו המבנה של Zamyla קודם לכן. 

[00:37:27] מה השרת שולח בחזרה הוא אובייקט קטן שנראה כך. וכך data.price הוא רק נותן לי 0.1515. כל כך הרבה נע חלקים כאן בבת אחת. 

[00:37:39] אבל מזנוני המפתח הוא שיש לנו את היכולת הזו כדי להפוך את HTTP נוסף בקשות באמצעות JavaScript בלי צורך לטעון מחדש את הדף. ואז אנחנו יכולים למעשה לשנות את דף האינטרנט במהירות ההבזק. ומתברר ש JavaScript ושפות אחרות ניתן להשתמש עכשיו לא רק להשתנות דפי אינטרנט, אבל בעצם לכתוב תוכנה במחשב בפועל, אינם מוגבל רק לכרום או משהו הדומה. 

[00:38:00] למעשה, if-- קולטון, היית רוצה להצטרף בחזרה אותנו כאן עם הקוד שלך במעבדה, וצ'אנג, כמו גם? בואו נלך קדימה, שדבר על פונקציות והתקשרות חזרה בעילום שם ובאמת להתגרות בגורל כאן עם הדגמת חיה עם דימום טכנולוגיה חדשנית, אחד מ מכשירי העלית Motion אלה. עכשיו, המכשיר הזה, כזכור, הוא התקן USB קטן גם that-- זה beautiful-- המתחבר ליציאות ה- USB שלך. 

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

[00:38:46] אז למה לא אקח לי דקירה בבית זה קודם? ובואו נלך קדימה ולזרוק אתה על מעל כאן. אז בואו לשים את המחשב הנייד של קולטון כאן. יש לנו אנדרו בטלוויזיה. ומה אתה רוצה ממני לעשות קודם? 

[00:39:00] COLTON: קדימה, רק שם את הידיים שלך על הבחור הזה ותראה כמה נצנצים מדהימים. 

[00:39:04] דוד י מלאן: יפה מאוד. כל זה קורה בזמן אמת. אישור. בסדר, וכן. כל כך נחמד. בסדר, מה עוד אנחנו יכולים לעשות? 

[00:39:15] COLTON: עבור למסך הבא ותראה. 

[00:39:17] דוד י מלאן: בסדר. 

[00:39:19] COLTON: משחק קצת כיף בו אתה מקבל כדי להפוך את הרובוטים. 

[00:39:21] דוד י מלאן: בסדר, אז זה הוא ידיים מזויפות מראה לי מה לעשות. COLTON: כן אז קדימה ולתפוס את אחד מאבני ולשים אותו על החלק העליון של הגוף של הרובוט ש. דוד י מלאן: אה, יש לי את יד. אה. אישור, מקסים. חכה רגע, בסדר. הנה אנחנו מתחילים. 

[00:39:41] COLTON: עשיתי אחד על תאונה. 

[00:39:43] דוד י מלאן: בסדר, אני אקבל את הבחור הזה. לעזאזל! כאשר אנו מתאמנים בזה אחרון הלילה, אתה יודע מה זה לתחום של? 

[00:39:51] כמו זה. אישור. הבא? 

[00:39:55] COLTON: בטח. 

[00:39:56] דוד י מלאן: בסדר, ויש שלישי. בְּסֵדֶר. COLTON: וזה אחד, אתה מקבל to-- דוד י מלאן: אה, של יפה הזה. COLTON: --yeah, לאסוף בנפרד את הפרח הזה. דוד י מלאן: אישור. לא? שלא נענו. 

[00:40:14] COLTON: אה, הנה לך. 

[00:40:15] דוד י מלאן: אה, תראה ש. נחמד מאוד. ובכן, למה לא 'אנחנו לוקחים מתוך מתנדב כאן מי רוצה לבוא בעד. מה דעתך על שם בירוק, נכון? 

[00:40:27] בסדר, ובואו have-- במקום לעשות את זה, חלק מכם אולי יודע את המשחק הזה here-- לחתוך את החבל, אולי? בואו נראה. יש לנו הכוסות שלנו בכאן? 

[00:40:37] אישור. תודה לך. מה שמך? 

[00:40:39] קהל: לורה. 

[00:40:40] דוד י מלאן: לורה? נחמד לראות. אם לא אכפת לך לשים Google Glass על המשקפיים שלך. זה קולטון. 

[00:40:46] COLTON: היי. נחמד לפגוש אותך. 

[00:40:48] דוד י מלאן: בסדר, בוא בסביבה. בסדר, אז מה אתה הולך לעשות כאן, ששחק את זה לפני, הוא הניח את ידכם על קפיצת Motion כאן. ועכשיו החץ שלך צריך לעבור. אה, לא כלום. 

[00:40:57] קהל: מס ' 

[00:40:58] דוד י מלאן: אנחנו לא רוצה להפסיק עדיין. אישור, לחכות. כאן. אז שם לב שאתה מחזיק אצבע על משהו, העכבר מתחיל ללכת ירוק, וכך אתה לוחץ. 

[00:41:06] אז העבר את העכבר על Play. ורק אצבע אחת זה בסדר. ועכשיו לחץ על קטן בחור ירוק בצד השמאל. ועכשיו להחזיק עד שהוא מתמלא ירוק. טוב. עכשיו, כמו, רמה אחת למעלה. 

[00:41:16] קהל: כן, אנחנו רוצים רמה אחת, כאן. 

[00:41:20] דוד י מלאן: טוב. אוקיי, אז כל מה שיש לך לעשות הוא לחתוך את החבל. הסמן זה לבן אחד שם למטה. 

[00:41:28] נחמד מאוד. בסדר, זה בערך להשיג יותר. אז להחזיק את האצבע על פני הבא עכשיו. טוב. זה אחד זה קשה. 

[00:41:39] קהל: איזה חרא. אישור. הוא רוצה ללכת בדרך זו. אה שטויות, that-- 

[00:41:44] דוד י מלאן: כן. מטרה משנית היא להשיג את כל הכוכבים. בסדר, הבא. 

[00:41:53] בואו תראו אם אתה יכול לקבל שליש זה. טוב. אישור, תלך לשם. 

[00:42:06] בטח. אה, נחמד מאוד. בְּסֵדֶר. 

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

[00:42:18] קהל: אתה בטח רוצה אותם בחזרה. 

[00:42:21] SPEAKER 2: בCS50-- הבא