[השמעת מוסיקה] 

DAVID מלאן: זה CS50. זה הוא ההתחלה של שבוע תשע. וזה מה שהיה צריך היה יום הולדת ה -200 של מר בול. אז זה הבחורים למי אנחנו כבר רמזנו די הרבה פעמים על שימוש ב משתני וליאנית אמת ושקר, 1 ו -0 וכאלה. וזה היה של גוגל מחווה לו היום. הוא היה הופך 200. אז אם אתה רוצה הצטרף אלינו לארוחת הצהריים CS50, תסתכל על הקישור באתר האינטרנט של הקורס. ופרצופים כאלה וחברים כ אלה מחכים לכם כאן בקיימברידג '. פרצופים כמו אלה מחכים לכם בניו הייבן. ואכן, קן ב ניו הייבן עשתה חביבה מה שנקרא GIF מונפש של אלי כאן בlunch-- האחרון GIF הוא עדיין עוד פורמט קובץ גרפי, עם שאתה familiar-- ש נראה קצת משהו כזה. אז פשוט רצף ל-- אישור. אף אחד כאן לא בקיימברידג 'צוחק. אבל בניו הייבן, זה הוא ממש מצחיק, נכון? בסדר. 

אז אל תצטרפו אלינו לשם. כאן בהרווארד, במיוחד, ביום רביעי, אם אתה בכיתה י 'או הלימודים הראשונה even-- או אפילו חשיבה junior-- של קבלת מתג למחשב מדע, יודע ששם יהיו להיות CS ייעוץ הוגן זה יום רביעי, זמן קצר לאחר כיתה בשעה 4:00 במחשב בניין המדעים מקסוול דבורקין. אנחנו נשים את זה על המסלול של אתר עד מחר, כמו גם. סופגניות, נאמר לי, יוגשו. 

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

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

ואז אני started-- ביליתי הרבה זמן לחיצה באמצעות קישורים אלה הבוקר. וזה היה בעמוד עליי, שעכשיו סוג של נראה מקסים. אבל זה גם מעיד על רק כמה רחוק טכנולוגיה הגיע. אני מתכוון, חזרה ביום, 486 היו משהו. בימים אלה, הוא סופר, סופר, סופר איטי וגם פחות ממה שיש לך ב כיסים של ימים אלה. יש עוד שם ש היה אפילו יותר מביך. אז אני אשאיר את זה ככה. אבל זה היה ראשון שלי פשיטה לתוך web-- הו, לא. זה לא היה. הפשיטה האמיתית הראשונה שלי לתכנות אינטרנט היה באתר זה, שבו אני פשוט שכחתי. בשלב מסוים, למדתי איך להפוך את תמונות רקע חוזר על עצמו. וכך מצאתי את ריצוף זה יעיל, כמו שחקן הוקי, כדורגל, וגולף כדור, או מה שזה לא לאתר האינטרנט של פרוש IMS. וזה היה ממש, ממש פרויקט מבוסס האינטרנט הראשון שלקחתי on-- אני חושב שאולי בכיתה י ' שנה, year-- הזוטר לאחר נטילת CS50 וCS51, אחד של כיתות המשך במשותף. שמתי לב במחפש בארכיונים שאחד היורשים שלי ו חברים, לי, סוג של השתנו זכויות היוצרים לעצמו. אבל זה אכן היה משהו ש אני צריך להחזיק את המבוכה ל. אבל באותו הזמן, זה היה באתר הראשון, כמו שאמרתי לפני כמה שבועות, על ידי שהשנה הראשונה יכלה להירשם לסוגי ספורט כאן. וכך מתברר שתמונות הרקע כמו שהם לא רעיון כל כך טוב. אבל האינטרנט היה חדש, ו כולנו להתנסות. וזה מה שאני כנראה עשה באותו הזמן. בסדר. אז בלי עיכובים נוספים, אנו לעבור הילוכים היום כדי לתת לך, באמת, החתיכה האחרונה שאתה עלול למצוא שימושי במיוחד עבור פרויקט גמר אבל גם שאתחיל להפוך את האינטרנט הרחב כל העולם מרגיש קצת יותר מובן. ואכן, אנחנו הולכים להציג את שפת תכנות יותר אחד JavaScript נקרא זה דומה ושונות בדרכים שונות משפות בדקנו עד כה. 

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

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

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

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

קהל: זה לא הידור. 

DAVID מלאן: תגיד שוב? 

קהל: זה לא הידור. 

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

קהל: היא פועלת בצד הלקוח. 

DAVID מלאן: היא פועלת בצד הלקוח, בדרך כלל. זה אכן ההבחנה אופייני לנו עכשיו. C היה בצד שרת במובן שעשינו כל שבIDE CS50. PHP עד כה היה בצד שרת במידה כפי שגם מקבל interpreted-- לא נערך, אבל interpreted-- בתוך CS50 IDE, שכמובן הוא רק שרת או שרתים בענן. 

אבל JavaScript, אפילו למרות שאתה אתה הולך להתחיל לכתוב אותו, למשל, pset שמונה ואולי סופיים projects-- אתה הולך לתקן את זה ב וIDE CS50 לשמור אותו בקבצים בתוך IDE CS50, CS50 IDE ו, בתורו, שרתי הענן שבו הוא מתארח, לא הולך לפרש או לבצע הקוד שלך. במקום זאת, זה הולך לשליחה ב טופס ללא שינוי עד לדפדפן. ואז זה הולך להיות IE או כרום או פיירפוקס או ספארי או מה שזה לא מפרש למעשה זה, מלמעלה למטה, משמאל לימין. אז הבחנת מפתח אופייני להיום הוא כי JavaScript הוא בצד הלקוח ו- PHP, למשל, יש בצד שרת היה. עכשיו, יש לכך השלכות מעניינות ל, כמו, קניין רוחני ומי באמת יכול לראות את הקוד שלך. ואכן, אתה יכול ללכת באינטרנט ולראות את רוב כל קוד שיש מישהו נכתב ב- JavaScript. לפעמים זה קריא, לפעמים זה לטשטש. אבל עוד על כך בבוא הזמן. 

אז JavaScript, יפה מספיק, הוא סופר דומה, מבחינה תחבירית, לג והרבה כמו PHP, אין פונקציה העיקרית. אם אתה רוצה להתחיל לכתוב קוד JavaScript, כפי שתראה היום, אתה פשוט להתחיל לכתוב אותו. אבל זה, תראה, במיוחד שימושי בהקשר של דפדפני אינטרנט. עם זאת, קטן שלי disclaimer-- בדרך כלל earlier-- היה אומר שיותר ויותר שאתה יכול שימוש כיום בצד השרת JavaScript באמצעות מסגרת מפוארת נקראת Node.js כי חלק מיישומיה של CS50 כתובים ב. בדוק 50 בעצם משתמש Node.js. אבל אנחנו הולכים להתמקד ב בצד הלקוח JavaScript כאן והלאה. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

אז מתברר שנבנה ל אובייקט המסמך של JavaScript היא פונקציה, הידוע גם ב שיטה, שנקראת getElementById. התחביר לקוראים פונקציה בJavaScript שנמצא בתוך אובייקט או משתנה הוא רק עם סימון הנקודה. וראינו את זה ב- C מה תחביר struct. אתה רואה את זה בpset שבע, סוג של, סוג של, כשאתה רואה את שאילתא CS50 ::. מעי גס המעי הגס ב- PHP הוא עוד דרך של קורא לפונקציה זה בתוך כמה אובייקט. 

אבל לעת עתה ב- JavaScript, זה רק נקודה. וכך בפונקציה זו, יפה מספיק, סוג של אומר מה זה does-- לקבל אלמנט לפי תעודת זהות. אלמנט הוא רק שם אחר לתג או צומת בDOM. וכך לקבל אלמנט ידי "שם" זיהוי פירוש זה-- הנה HTML שלי. ומבוסס על HTML זה, מה צומת או מה תג HTML אני הולך להיות תכנותי ידיים על ידי קורא document.getElementById? 

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

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

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

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

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

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

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

קהל: [לא ברור]. DAVID מלאן: כן. אז הפונקציה מוגדרת differently-- במילים אחרות, נעדרו מהצורה, שם למעלה על קו 7-- או ולא, קו 8-- כבר לא יש לי תכונת onSubmit. בדוגמא הקודמת, היה לי את זה. ואז אני ממש כתבתי את הקוד שלי כאן. ואז אמרתי לחזור שווא. ואם זה לא לשפשף אתה בדרך הלא נכונה עדיין, זה צריך להתחיל למידה כ, בדיוק כמו ב- HTML, כשהתחלנו לשתף להתערבב זה עם CSS בתכונות סגנון, זה פשוט התחיל לקבל קצת מבולגן או מרגיש קצת לא בסדר. 

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

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

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

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

פונקציה, כן. אז מתברר שיש זה PHP. ולמרות שאנחנו לא ספרתי לך על זה, C יש גם מצביעי פונקציה, היכולת להעביר ולהקצות פונקציות כערכי המשתנים עצמם. ואנחנו לא הולכים לסגת בחזרה לג אבל לעת עתה, מתברר ש בצד ימין כאן, למרות שזה נראה קצת פאנקי, אמצעי זה, היי דפדפן, לתת לי תפקיד. אני לא הולך אפילו לטרוח לתת זה שם כי אני ממש הולך להקצות בואו נקראים לזה הכתובת של פונקציה זו מייד onSubmit. במילים אחרות, דפדפן, אתה לא צריך לדעת מה פונקציה זו נקראת. אתה רק צריך לדעת שבו הוא נמצא בזיכרון. ואז זה די פשוט ל יש סימן שוויון יש ולא להטריד את שמות זה, כמו foo או לברך או כל מילה אחרת. ועכשיו זה רק דבר סגנונית. יכולתי לזוז סד מתולתל זה על כל-- השורה הבאה sorry-- כמו שאנחנו עושים בדרך כלל CS50. אבל בJavaScript, זה למעשה סגנונית משותפת רק כדי לשמור על הסד המתולתל, ראשון, שבשורה ראשונה. 

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

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

ובכן, מתברר לאחר מכן ב גרסה שתי, שהוא last-- ואנחנו רק מבט חטוף בשלב זה. בסיכון של קבלת זה, מתברר מכוער שיש ספרייה ב העולם שנקרא jQuery. וjQuery היא סופר ספריית JavaScript הפופולרית זה כל כך פופולרי שרוב כל JavaScript-- זה לא נדיר עבור אנשים לבלבל jQuery עם JavaScript. למה? JavaScript עצמו יש מאוד דרכים מפורט של עשיית things-- document.getElementById, dadadadadada. אתה בסופו של דבר שיש מאוד תורים ארוכים של קוד. 

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

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

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

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

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

הממ. בסדר. אז יש כמה הזדמנויות לשיפור כאן. ואתה יודע, או תראה בpset שבע, שאתה יכול לכתוב code-- ואתה צריך לכתוב קוד בPHP-- להגן נגד סוגים שונים של משתמשים אלה טעויות מפני המשתמש בבירור לא שתף ​​פעולה. והוא או היא לא נתנה לך את כל ערכים שאתה רוצה, או אפילו בפורמט שאתה רוצה אותם. אז תראה בpset שבע ש אנחנו יכולים בהחלט יש כמה אם תנאים שאומרים אם כתובת הדוא"ל לא username@something.edu, אנחנו רק יכולים אומר מצטער ומתנצל למשתמש הרבה, כמו שאתה יכול להיות בpset שבע. או אם הם לא בדקו תיבה ש, מתברר ב- PHP, אתה יכול לזהות את זה, מדי. ובוודאי אם סיסמאות אינו תואם כמו בregister.php לpset שבע, אתה יכול לזהות את זה. אבל זה כאב ב צוואר שבעכשיו הם מבקשים שלנו ללכת את כל הדרך לשרת. המשתמש מודע לשגיאה. ולפחות אלא אם אתה משתמש כמה טכניקות מהודרות, עכשיו הם צריכים ללחוץ על החץ בחזרה. האם לא יהיה זה נחמד, כמו הרבה אתרי אינטרנט היום, אם היה לך מיידי יותר משוב, באופן מיידי? 

במילים אחרות, תנו לי ללכת לגרסה אחד, שהוא הולך להיות לא יפה. אבל יש בתכונה זו. מלאן, 12345, 123456789, לא הולך לבדוק את התיבה, רישום. סיסמאות לא תואמות. אז למרות מוקפץ זה ugly-- אנחנו יכולים להחליף את זה סופו של דבר עם משהו כמו המגף, שתראה בpset שבע הוא library-- פופולרי מאוד שעשיתי לזהות שהסיסמות לא תואמות. בסדר. ובכן, הרשה לי לתקן את זה כמשתמש. תן לי ללכת קדימה ואומרים 12345, 12345. עדיין לא בדק את ההסכם. עליך להסכים ל תנאים. אז למה? 

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

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

קהל: [לא ברור]. 

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

אבל אם אתה כל אתר אינטרנט של גודל הגון, במיוחד הגדול, כמו פייסבוק, ככל שאתה יכול לשמור על אנשים מ של השרת שלך טוב יותר כי שרת, כמובן, רק יש כמות סופית של זיכרון RAM, מספר סופי של ג'יגה-רץ, מספר סופי של דברים הוא יכול לעשות ליחידת הזמן. אז אם יש יותר אנשים ב העולם להכות השרת שלך, כניסה בטעות באופן שגוי, בדיוק כפי שגם אם אתה יכול לשמור על עומס שאת השרת שלך. בנוסף, במיוחד בנייד device-- אם אי פעם להיכנס לmy.harvard או netid של ייל או כמו, יש זה חביון עם הרבה אתרים כמו שלפיה לוקח, כמו, לעזאזל שני או שתיים לפעמים. ואז, אלוהים שלי, אם אתה mistype, אז אתה צריך להכות בחזרה ולבצע שוב את זה. אז יש חביון, במיוחד על חיבורי רשת איטיים יותר. אבל JavaScript, כי הוא פועל על הלקוח ולא צריך ללכת הלוך ושוב פני אינטרנט פוטנציאלי איטי חיבור, אתה יכול לקבל משוב כמעט מיידי. 

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

אבל אין JavaScript כאן בכלל. זה רק HTML ש הולך לregister.php. אבל בגרסה אחת, שבו אני התחלתי לקבל אותם חלונות קופצים, בואו לראות מה באמת קורה כאן. בגרסה אחת, מה ש אני הולך see-- אני חשבתי שאני יכול לעכב מספיק עם מספיק מילות, אבל נגמר לי. 

בגרסת one-- שם אנחנו הולכים. בגרסה אחת, שים לב following-- ולא היישום הטוב ביותר, אבל זה הראשון שלי. שים לב שמתחת ל טופס, יש לי תג סקריפט. ותג תסריט אומר, היי, דפדפן, כאן מגיע קצת קוד ב, בדרך כלל, JavaScript. ועכשיו, שים לב מה אני עושה. על line-- אני בקושי יכול לקרוא it-- קו 32, שזה אומר, var form-- אז תן לי משתנה בשם צורה. ולאחר מכן לקבל document.getElementId של "רישום". מה זה? ובכן, הרשה לי להריץ אחורה עד כאן. והודעה, אה, אני נתתי את אלמנט הטופס רעיון שרירותי אבל תיאורים רישום. אז זה נותן לי משתנה ש מאפשר לי לתפוס את הצומת ש, מלבן שבעץ נקרא טופס. אמצעי form.onsubmit, היי דפדפן, הירשם מאזין אירוע בטופס זה. במילים אחרות, כאשר בטופס זה הוא הוגש, לבצע את הקוד הבא. זה לא צריך שם כי למה אתה צריך לדעת את השם? אתה רק צריך לדעת מה לבצע, ergo זה פונקציה אנונימית או למבדה. והפונקציה שהיא כל שורות אלה כאן. ועכשיו, אם להיות כנה, גם אם אולי לא שנכתב אי פעם JavaScript לפני, זה רק היגיון C ו- PHP. אז אם form.email.value == "" - כך שאם את שדה הדואר האלקטרוני ריק, לצעוק על המשתמש עם "אתה חייב לספק את כתובת הדוא"ל שלך. " אחר אם form.password.value היא צעקה ריקה למשתמש, "עליך לספק את הסיסמה שלך." 

עוד מעניין באופן הגיוני, אם form.password.value לא form.confirmation.value-- שווה מאיפה האישור בא? תן לי אחורה. ובכן, אני נקרא קלט זה שדה סיסמא כאן. ואני קראתי את זה כאן אישור. יכולתי קראתי לזה סיסמא שתיים או כל דבר אחר. אני רק בודק באופן הגיוני כי שני אלה הם אותם. Else-- מתברר שזה מר בול again-- ערך בוליאני, תיבת הסימון. אז אם אני אומר, קריאת point-- אם לא form.agreement.checked, לצעוק על המשתמש גם כן. 

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

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

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

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

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

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

במקום זאת, מה טוב יותר אלה ימים הוא אתרים המשתמשים ב- AJAX. AJAX-- הידוע גם ב Asynchronous JavaScript and XML, וזה רק דרך מפוארת של אומר טכנולוגיה או טכניקה ש מאפשר דפדפן באמצעות JavaScript כדי להפוך את בקשות HTTP נוספות לאחר הדף נטען. אז מה זה אומר? ובכן, זה יהיה סוג של מעצבן ב- Gmail אם בכל פעם שאתה רוצה כדי לבדוק את הדואר שלך, אתה ממש פגע בקרה-R או פיקוד-R או לחץ על לחצן רענן ואת כל הדף לעזאזל היה לטעון מחדש. נכון? זה היה יהבהב לבן כנראה לשני. היית רואה את סרגל ההתקדמות הטיפש. ורק כדי לראות אם יש לך חדש דואר, כל דף האינטרנט ואת כתובת האתר אתה בתצטרך לטעון מחדש. 

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

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

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

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

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

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

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

EFA: אני EFA. 

DAVID מלאן: Etha? 

EFA: EFA. 

DAVID מלאן: EFA? 

EFA: כן. 

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

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

COLTON: בטח. אז עכשיו אנחנו טוען את הצוהר, אני מניח שoperating-- לא פועל מערכת, אבל התכנית הראשית, שבו אתה יכול לגשת לכל המשחקים ו יישומים שנמצאים בספרייה שלך. אז עכשיו, זה צריך לומר הקש על משטח המגע כדי להתחיל. משטח מגע הולך להיות ב צד ימני של האוזניות. אז קדימה, tap-- EFA: הו, גבר. DAVID מלאן: כן, יש לך ללכת. איכות EFA רואה היא באיכות הרבה יותר גבוהה. זה רק גישה לאינטרנט אלחוטי כאן. COLTON: אז מה אתה הולך רוצה לעשות הוא מסתכל לכיוון החלק העליון שלו ימני של המסך. כן, משחק שעל עצם הזכות העליונה. ואז כשאתה בוחר זה, הקש על משטח המגע שוב. אני חושב Dreadhalls. ואז כאן הוא זה-- כאן, בואו לי להחזיק את המשקפיים שלך בשבילך. 

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

EFA: עכשיו אתה אומר לי. אוקיי. 

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

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

EFA: כיצד אוכל לקבל מפת מהדרך? COLTON: חפש. רק להסתכל למעלה. בסדר. הנה לך. עכשיו קדימה ופשוט להסתובב. אז להסתכל רחוק יותר לשמאלך. להמשיך לנוע שמאלה. תמשיך לחפש עזב. תמשיך ללכת. כן. 

EFA: הו, דרך ש. 

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

EFA: עדיין לא. COLTON: אישור. 

Pretend-- כן. רק להעמיד פנים שאתה למעשה עומד שם. ואם אתה פונה around-- אתה חייב להתרגל לזה. אבל זה הגיוני. DAVID מלאן: ובעוד EFA ממשיך לשחק, מאז שאנחנו יכולים לעשות את זה כל היום, כולנו יכולים קצות האצבעות כאן. אבל יש לנו שני זוגות אחרים, אם אתה רוצה לבוא ולשחק. אחרת, אנו רואים אתה הבא ביום רביעי. תודה למתנדבים שלנו היום. [מחיאות כפות] 

[MUSIC - "נושא סיינפלד"] 1 מרצה: ובכן, אני לשים PL חדש על הר. אני רק שיניתי את OLPF-- 

SPEAKER 2: אז מה בדיוק אתה עושה? 

1 מרצה: ובכן, כל אחד מthese-- כאן, אני אראה לך את זה כאן. אתה יכול לראות את זה כאן. 

SPEAKER 3: אני חושב שאני טוב עם אלה. אתה רוצה עוד? 

4 SPEAKER: לא, אני טוב. [לא ברור]. 

SPEAKER 3: לא, [לא ברור]. יש לי כמה. SPEAKER 1: צבע שונה. SPEAKER 2: אישור. SPEAKER 1: אז סופו של דבר מה ש עושה זה מתאים את הצבע של--