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

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

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

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

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

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

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

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

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

[סימני מכות בטלפון] 

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

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

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

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

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

[חציצת קולות] 

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

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

בסדר, אז למה הוא כל כך יותר רלוונטי למה שקורה? ובכן ראשון, מהיר כמה הודעות. אז אחת, אם ברצונך להצטרף לצ'אנג, ו ניק, ואחרים בארוחת הצהריים ביום שישי קרוב, לעשות RSVP בכתובת הרגילה יש. אם אתה חושב על ריכוז באו עושה משנית בCS, בין אם אתה בכיתה י, או בשנה ראשונה, או אפילו זוטר או בכיר, בשלב זה ועדיין יכול לסחוט בקורסים, להבין שבית הספר להנדסה צובר לבן חופשיים ו הגלידה ועצתו של ג'רי זמן קצר לאחר המעמד ביום רביעי בשעה 4:00 בבניין CS במקסוול דבורקין. אם זה מהר מדי על המסך, פשוט ללכת לcs50.harvard.edu ל קישור לאירוע בפייסבוק שבו אתה יכול לראות פרטים נוספים. 

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

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

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

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

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

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

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

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

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

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

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

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

ואתה יכול לעשות אפילו מהודר יותר דברים where-- בואו נלך לירוק. ואני יכול לעשות את זה ב כמובן עם הקוד שלי. אבל גם API עצמו תומך בפעולות פאנקי כמו זה, שעכשיו מפריע שלנו במשך 30 שניות הבאות. 

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

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

DAVID מלאן: אז רק כמה שבועות, אתה גם יכול להיות שמגניב ביריד CS50. מכשיר נוסף שאנו יש חבורה של שאנחנו תשמח להשאיל לך לפרויקטים נקרא בקר תנועה. זהו מכשיר USB קטן אתה מתחבר למחשב ש מאפשר לך אינטראקציה עם המחשב הנייד שלך, Mac או PC, כאילו שיש לך כמו Kinect Xbox ובעצם עושה תנועות פיזיות הרבה כמו שאנו רואים בזה חזון לעתיד. 

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

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

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

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

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

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

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

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

כתובת ה- IP של לא שייכת לחלק כפוף האקר חו"ל להרוס מועיל מידע ממשלתי. החלטת דירקטוריון על googlebot.com, עכביש סריקת האינטרנט עצמו מאוד של גוגל. אופס. אחרי קצת מחקר וערבול סביב כדי למצוא גיבוי noncorrupt, ג'וש מצא את הבעיה. 

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

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

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

עכשיו בכנות, זה לגמרי מטופש שCMS JavaScript ועוגיות משומשים ליישם מערכת כניסתה ולא עושה את זה בצד השרת, כ אתם עושים ותעשו בPSet 7-- יש login.php file-- תמיד, תמיד, תמיד ביטחון צריך להיות נעשה בצד השרת, לא בצד הלקוח, כי, כפי שזה מאמר מציע ואת עלול עצמך לראות בשלב מסוים, זה הוא טריוויאלי עבור משתמש, טוב או רע, פשוט לכבות את JavaScript שלא לדבר על עוגיות. אז זה WTF היומי שלך. 

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

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

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

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

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

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

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

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

אז אחת מהשורות של SQL ש לתת במפרט 7 PSet זה אחד כאן. ואנחנו לא מבלים ענק משך הזמן מדבר על זה. אבל מתברר, שאם אתה מנסה כדי לקנות כמה מניות באוצר CS50 כי כבר יש לך כמה מניות של, רוצה להיות מסוגל לעשות מספר דברים ביחד באופן מיידי. אתה רוצה להיות מסוגל ביעילות, ברמה גבוהה, סמן את כל הימין, אם אני רוצה לקנות עוד מניות של חינם, המניות הפרוטות לדבר על במפרט, אני רוצה לבדוק קודם כמה מניות יש לי. ונניח שזה חמש. ונניח שאני רוצה לקנות 10 יותר, אני סופו של דבר רוצה להיות 15 מניות. אז אני חייב לשאול שתי שאלות. מה מצבו של משתנה? מה המצב של השורה? כמה מניות אני צריך כרגע? אז אתה רוצה ללכת קדימה ולעדכן אותו. אז זה אנלוגי ל חלב שבבדקת את השורה, ואז אתה רוצה לעדכן אותו כי אם אתה רוצה לקנות 10 מניות, אתה לא רוצה לשנות השורה 10, אתה רוצה לשנות את זה עד 5 בתוספת 10 או, כמובן, 15. 

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

אה הנה זה באו שוב. הודעת טקסט בטלפון שלי. אז בואו נעשה את זה יותר בטון קטן. נניח שאתה לא יישום מקרר, ואתה לא מיישם PSet 7 אבל בנק בפועל, או כספומט, כספומט מכונת, שבה אתה איכשהו רוצה להיות מסוגל להעצים משתמשים להעביר כסף מחשבון אחד למשנהו. אישור, לתלות על. אני הולך להשתיק את זה עכשיו, תודה לך. אז אנחנו רוצים להעביר את הכסף ממספר חשבון אחד לחשבון אחר מספר, במיוחד 100 $. אז זה סוג של שרירותי דוגמא, שבו אתה, הכספומט, אולי כדאי לך לבצע שני SQL שאילתות, להחסיר מחשבון אחד, ולהוסיף לחשבון האחר. אבל אתה רוצה לוודא כי אלה שני קווים שני לקרות או בכלל לא. אתה לא רוצה משהו מקבל נקטע. אתה לא איזה בחור רע חכם עומד איכשהו בבנק אוף אמריקה עם שני כספומטים בחזית שלו, ואיכשהו סוג של הקלדה ב פקודות באותו הזמן, אני מקווה שמנסה לנכות 200 $ במקום של 100 $ ויש להם רק 100 $ לזכותו. בקיצור, אתה רוצה שזה להתנהג בדיוק כפי שאתה מצפה. 

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

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

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

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

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

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

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

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

אז מה הפתרון? ובכן בPSet 7, אנחנו באמת להימנע מכל זה ביחד. אנחנו נותנים לך פונקצית שאילתא, ואנחנו ממליץ לך להשתמש בסימני שאלה כמצייני מיקום, דומה ברוחה ל% s של printf, אבל מה מפתח על סימני השאלה כאן הוא אם אתה קורא למעשה דרך functions.php, בנו פונקצית שאילתא מיושמת, סימני שאלה אלה נמלטו, לפי כל דבר שעלול להיות מסוכן כמו ציטוט אחד מופעל לציטוט אחד נמלט. 

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

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

אז עכשיו אתם צריכים בתקווה מבין קצת יותר הומור חנון כאן. 

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

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

אז כל קוד JavaScript שאתה מתחיל בכתיבה לPSet 8, או פרויקט הגמר שלך, או בעולם האמיתי הוא בדרך כלל הולך כדי להינצל בשרת, באופן מוחלט ב- HTML או נקודת נקודה JS לקובץ JavaScript. אבל הדפדפן הולך להוריד כי JavaScript קוד לדוגמא של Chrome שלך, או IE, או Firefox, או משהו כזה. והקוד הוא בעצם הולך לקבל בוצע בתוך הדפדפן שלך. רק כדי לעשות את זה יותר אמיתי, בואו לראות את זה בצורה מוחשית. 

אין לנו מושג מה הקוד הזה עושה בלי באמת לקרוא את זה. אבל הרשית לי ללכת לFacebook.com ללא כניסה. תן לי ללכת לבדיקת רכיב וללכת, נניח, רשת וטען מחדש את הדף. ואנחנו see-- תן לי לעבור רענן עמוד כדי לקבל את כל הבקשות לחדשות. וראשון קובץ שאני רואה זה CSS, CSS. הנה הראשון JavaScript קובץ, ויש לי אין לי מושג מה זה עושה, אבל כאן הוא חלק מקוד JavaScript שמניע את פייסבוק. זה אפילו לא באמת ש חשיפה כדי להתקרב. זה עדיין שטותי באותה מידה. 

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

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

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

אז בואו נסתכל בכמה דוגמאות איך אנחנו יכולים להשתמש ב- JavaScript כאן. בקוד המקור של היום, יש לנו חבורה של קבצים, הראשון שבם, בואו נקראים DOM אפס. אז DOM אפס נראה כדלקמן. תן לי ללכת לספרייה זו ולפתוח domzero.html, ראש שיש לו סוג doc הצהרה, אומר כאן מגיעה HTML 5. ועכשיו הנה תג HTML. הנה תג הראש. והנה מה חדש היום. 

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

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

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

קהל: שרשור. DAVID מלאן: שרשור. אז C אפילו לא צריך את זה. PHP יש מפעיל הנקודה, שעושה את זה. יש JavaScript המפעיל בתוספת, אשר מבלבל הוא בדיוק כמו Java. עכשיו מה קורה כאן? 

אז הנה המקום שבו בסיסי הבנה של תמונה ש זרקנו את זוג לפני ימים נכנס לשחק. זכור כאשר היו לנו פשוט גרסה של HTML page-- זה פשוט אמר, שלום עולם. ואז משכו את עץ מימין, ש הייתה חבורה של מלבנים וקווים הקושר אותם כמו עץ ​​משפחה. אז זה DOM שנקרא או סוג Document Object Model. ומתברר שאתה יכול לגשת ל מלבנים בעץ שעם תחביר כמו הבא. אתה ממש אומר מסמך, שבו הוא משתנה הגלובלי מיוחד בJavaScript תכנית שיש לו תפקיד הקשורים אליו, כי אתה יכול לגשת ל בדומה לstruct, אבל אתה פשוט אומר נקודה ולאחר מכן את השם של הפונקציה, לקבל אלמנט לפי תעודת זהות. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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