[Powered by Google Translate] [שבוע 9] [דוד י מלאן - אוניברסיטת הרווארד] [זה CS50. - CS50.TV] בסדר. ברוך שובך. זה CS50, וזהו תחילתו של שבוע 9. היום אנחנו מתמקדים בייחוד בתכנון, כבר לא בהקשר של ג אבל בהקשר של PHP וקצת SQL וקצת JavaScript, בייחוד לקראת סוף הוא 7 pset וגם פרויקט הגמר שלך. למעשה, אם אתה נמצא בשלב זה בפרויקט הגמר שלך שם כנראה החל משעה בערך לפני שהתחלת לפחות לתת קצת מחשבה לפרויקט הגמר שלך ואתה חושב שאתה רוצה לשתף פעולה עם חבריו לכיתה 1 או 2, אם אתה נתקלת בבעיות בהתחברות עם חברים לכיתה אמרה, תרגיש חופשי למלא את הטופס בcs50.net/partners/form. זה פשוט שואל אותך מי אתה, איזה סוג של פרויקט אתה חושב על, איפה אתה גר רק מסיבות לוגיסטיות. ואז, אם אתה רוצה לשמור על עין על בשבוע הבא או כך את כתובת אתר הגיליון האלקטרוני לשם, אז אתה יכול לראות גרסה לקריאה בלבד של Google Doc שבה אנו אוספים את המידע הזה. אז אם אתה רוצה לעבוד עם מישהו, בכל האמצעים יהססו להושיט יד לאנשים באמצעות מנגנון זה. אבל רוב האנשים מבצעים את הסולו עבודה. זה בסדר גמור. אז אל תרגיש שזה בכל דרך מחייבת. ביום שישי זה היה רק ​​אני ועוד כמה מצוות בפה, תיאטרון ריק ברובו. 3 תיירים יש יושבים שם למעלה, וזה היה קצת מביך. מה שדברנו עליו היה מסדי נתונים ודברנו על 7 קצת pset. ואם אתה לא במקרה העכבר שבוידאו עדיין, זה בסדר. אני אנסה להגדיר את כל תנאים שאנחנו אחרת היו לוקחים כמובן מאליו המבוסס על הרצאתו של יום שישי. 

אבל היום אנחנו הולכים לנסות להשיג אותך לנקודה של לא רק להיות מסוגל לעשות משהו כמו 7 pset אבל באמת להבין מה קורה מתחת למכסת המנוע, במיוחד כמה מההפשטות שאנחנו מכניסים למקום בקובץ functions.php כדי להפוך את חייך קצת יותר קלים, אלא כדי שסופו של הדבר מבין כך שכאשר את גלגלי העזר יורדים בכמה שבועות אתה עדיין יכול לשרוד בעולם האמיתי ולעשות את הדברים האלה בלי שום CS50 מסגרת מתחתיך. זה _SESSION $, לאלה מכם שאינם מכירים או שכבר תפס את הסרטון ביום שישי, מה SESSION נותן לנו לעשות ביישום אינטרנט PHP מבוסס? זה משתנה superglobal, מה שאומר שזה דומה ברוח ולGET POST ועוד כמה אחר, אבל מה זה דבר הזה שימושי ל? 

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

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

אבל אם אני מתחיל מחדש דף זה, זה אומר שהגיע זמן 1, 2, 3, 4, 5, וזה יהיה סופו של דבר רק לשמור על ספירה מעלה, מעלה, מעלה, מעלה, מעלה עבור כל פעם שאני לוחץ בפועל טענתי על זה. אז איך זה עובד? תן לי ללכת בתוך הקובץ הזה שנקרא counter.php. החלק העליון שלו הוא כל ההערות הכחולות, אבל חלק המעניין הוא כאן. בקו 13 שאנו מכנים session_start פונקציה זו, וזה ממש כל מה שאתה צריך לעשות אם אתה רוצה לקבל גישה לsuperglobal המיוחד הזה שנקרא $ _SESSION. זה הופך את זה לאפשרי, ואנו רואים ברגע איך זה בכלל אפשרי. בהודעת הקו 16 מה אני עושה. אם המפתח, הנקרא להתמודד - במילים אחרות, ערך המדד - "נגד" קיים בתוך המערך הזה שנקרא מושב, אז מה אני עושה עם זה בשורה מתחת? מהו קו 18 עושים? 

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

אחרת, אם אני לא מוצא שיש משהו בsuperglobal המושב, אני כנראה אני מאתחל נגדי משתנה זה 0, וכך רק בהנחה שהמשתמש מעולם לא היה כאן בעבר. ואז זה כמובן הוא להגדיל כל זמן את המונה איך? אני מעדכן את הערך שיש בפנים של מערך אסוציאטיבי זה על ידי הגדרתה שווה לכל דלפק הוא כרגע + 1. אם אני כאן כדי לגלול מטה ה-HTML של הדף, זה בעצם די פשוט. כל מה שיש בגופו של דף זה, "יש לך בקר באתר זה פעמים כה וכה." וזו היא מבנה של PHP. אם אתה עושה <? =, זה שווה ערך למה שיעילות תפקוד? זה באמת שווה ערך למשהו כמו printf, שראינו פעמים רבות ב-C, אם כי, כפי שאתה ודאי יודע כבר מהמפרט ב7 pset, הדפסה היא גם פונקציה שרק מדפיסה משהו, זה לא ממש להשתמש בקודים בפורמט, ואתה באמת יכול להגיד הד גם כן. הם כולם לא היה בצורה למרות שהתוצאה הסופית היא סופו של דבר את אותו הדבר. אז השימוש הזה של סימן שווה הוא רק סוג של דרך אלגנטית לעשות את זה באופן תמציתי יותר ממה שאתה יוכל אולי ל. אז זה כל מה שהאתר הזה עושה. זה מדפיס את ערכו של נגד. איך כל זה באמת קורה? אולי אתה זוכר לפני שבוע בערך התחלנו לחפש מתחת למכסת המנוע כיצד דף אינטרנט עובד באמצעות כרטיסיית מפקח זה. 

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

ואז, אם אתה באמת רוצה להיות פרנואידית, להפסיק דפדפן, הפעל אותו מחדש, ואז לוודא שהכל עובד כצפוי. אז בקיצור, מטמון הסליקה הוא טוב כשעושים פיתוח. אז הנה יש לנו את כרטיסיית הרשת. אני קודם לכן בקרתי באתר 9 פעמים, אבל תן לי ללכת קדימה עכשיו ולחץ על רענן. ואני מחזיר עד 0. בואו לראות איך זה בעצם הוא שsuperglobal מושב זה מיושם. אני הולך ללחוץ על בקשת 1 HTTP שנעשה, וחלון ניפוי זה מאפשר לי להסתכל בתוך זה. כאן אני רואה רק תגובה מהשרת, וזה לא מעניין. אני ראיתי את זה בכל מיני דרכים. אבל מה מעניין מבחינה טכנית הם את הכותרות. אם אני לגלול למטה כאן ולהתמקד בכותרות הבקשה ולחץ על צג מקור, מה שאני הולך לראות אותו, פשוטו כמשמעו, בקשת HTTP שרק עבר מהדפדפן שלי לשרת, GET להיות הפעיל Word ולאחר מכן / counter.php להיות שם הקובץ, HTTP/1.1 פשוט להיות הגרסה של HTTP שהדפדפן שלי משתמש. קו זה הנה תזכורת קטנה מדפדפן לשרת מה השם של השרת הוא שהיא רוצה לדבר איתו. ולאחר מכן את שאר לפעמים זה מעניין אבל זה לא רלוונטי כרגע. 

זה פשוט סוג של סקרנות. Cryptic שמחרוזת זו היא, בכל פעם הדפדפן שלך מבקרת באתר הוא הודיע ​​השרת מה דפדפן שאתה משתמש ואיזו מערכת הפעלה אתה משתמש ומה הגרסה. אז אם אי פעם תהו איך אתרים כמו CNN ומה לא יודע מה האחוזים של משתמשי מקינטוש באינטרנט, משתמשי ה-PC, משתמשי IE, משתמשי כרום וכדומה, זה בגלל שכל הדפדפנים שלנו מספרים בכל אתר אינטרנט אחד בחוץ מה שאנחנו. זה לא בהכרח מכיל מידע אישי, אבל זה כן אומר שרת מה כתובת ה-IP שלך היא ומה דפדפן ומערכת הפעלה אתה משתמש. אז זה שבו מידע זה. אבל מה שיותר מעניין עכשיו כשזה מגיע למפגשים האלה הוא בכותרת התגובה. תן לי לחצו על צג מקור לצד תגובה. מה שמעניין כאן הוא כמה דברים. 1, שחזרנו קוד מצב של 200. אנחנו אף פעם לא רואים את קוד המצב הזה כי זה אומר שמכיל בסדר. זה אומר פשוטו כמשמעו בסדר בניגוד למשהו אחר. מה מספר לפעמים אנחנו רואים שזה רע? [תלמיד] 404. 404, קובץ לא נמצא, 403 ייתכן שתקלעו לכבר, שאסור, מה שאומר ששכחת משהו chmod, ככל הנראה. ויש חבורה של אחרים. 

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

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

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

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

אז בדרך זו cookie נשלח הלוך ושוב מעבר לגדר. סקרנות נוספת על עוגיות, במיוחד כאן, היא שזה לחלוטין בטקסט. אין הצפנה קורית כאן בכלל, ואכן אני משתמש HTTP באותו הרגע. אחד הרגעים האהובים עלינו בCS50, שנמצא כעת לפני 2 שנים, היה בערך בזמן כלי בשם Firesheep יצא. זה היה חתיכה חינם של תוכנה שנעשתה על ידי חוקר אבטחה כקריאת השכמה לקהילה להגיד בדיוק איך מיושם אכזרי מנגנוני אימות מסוימים באינטרנט היו. אז לכמה זמן, פייסבוק היה כמעט כולו על HTTP, HTTPS לא. וגם אם אין לך מושג איך עובדים האנוסים, S הוא מאובטח אז זה אומר שיש לפחות כמה מעורב בהצפנה. פייסבוק לא משמש להצפנת שמות משתמש וסיסמות, אבל ברגע שאתה הסתכלת עליך דוקר או ההודעות שלך או בעדכון החדשות שלך, כל זה לא היה מוצפן. אז היה פשוט Gmail עד שנה או 2 לפני. כל פעם שאתה מחובר, כן, הם השתמשו בהצפנה מאובטחת, אבל לאחר מכן הם לא עשו זאת. ולמה זה יכול להיות? למה לא פשוט להשתמש בהצפנה כל הזמן במקרי שימוש כמו זה? מה זה? אני חושב ששמעתי משהו. [תלמיד] מהירות. מהירות, נכון? יש דרכים לעקוף את זה. אבל אם אתה רק סוג של חושב על זה בהיגיון, אם אתה מצפין משהו, אתה צריך לעשות לפחות עוד קצת עבודה. בpset 2 כאשר אתה יישמת קיסר או Vigenere או אפילו סדק, פשוט להדפיס מחרוזת הוא קל יחסית. הצפנה ולאחר מכן מדפיס מחרוזת מינימאלית דורשת קצת יותר עבודה. 

 לאתרים פופולריים סופר כמו גוגל ופייסבוק, אם אתה צריך לעשות יותר עבודה עבור כל משתמש לכל דף אינטרנט יחיד שהם מבקרים, שפשוט לוקח זמן CPU יותר. ואם אתה צריך יותר זמן מעבד, ייתכן שתצטרך יותר שרתים, מה שאומר שאולי אתה צריך עוד כסף. וכך במשך שנים רבות זה פשוט ממש לא היה התרגול הטוב ביותר. אנשים היו משתמשים בהצפנת SSL רק כאשר הם זקוקים לכך. אבל התברר, וכבחור הזה עם Firesheep עשה סופר ברור, כאשר אתם בחורים שנמצאים כרגע בפייסבוק עכשיו - מתוך סקרנות, בואו נראים אם אתה fess למעלה. אם אתה בפייסבוק עכשיו בלשונית כלשהי, גם אם זה לא הקווירית, הוא כתובת האתר שלך HTTP או HTTPS? [סטודנטים] מרובים ס S? [שחוק] אוקיי. כל HTTP? רק 1? אוקיי. אז כולנו יכול לפרוץ לחשבון פייסבוק של הבחור שעכשיו. ברוב המקרים זה הפך מופעל כברירת מחדל, לפחות באתרים מסוימים. ובקיצור, אם את תעבורת האינטרנט שלך היא לא מוצפנת, לא רק את ה-HTML ללכת הלוך ושוב על פני WiFis לא מוצפן, אז אל דברים כמו עוגיות ללכת הלוך ושוב לאורך האוויר ללא כל צורה של הצפנה. אז אם יש לך רק קצת מתמצא בתכנות או קצת Googling כישורים כדי למצוא תוכנה חופשיה שעושה את זה, כל מה שאתה צריך לעשות זה לשבת בסטארבקס או לשבת בשדה תעופה שבו יש בדרך כלל הוא לא מוצפן WiFi ורק לצפות למילות מפתח כמו הגדרת קוקי: או PHPSESSID כי אם יש לך הבנה הטכנית לרק לצפות WiFi לכל הקטעים שזרימת האוויר לאורך לדפוס זה, אז אתה יכול לומר שPHPSESSID של הבחור קורה להיות bo8dal וכן הלאה. ואז שוב, אם אתה מספיק הבנה טכנית או יש את הכלי הנכון, אז אתה יכול פשוט להגדיר מחדש את הדפדפן שלך כדי להתחיל להציג את חותמת יד לFacebook.com, ופייסבוק הוא רק הולך להניח שאתה הבחור בגלל כל מה שהם יודעים הוא לא מי אתה, אלא שיש לך מזהה ייחודי זה. אז אם אתה גונב שמזהה ייחודי ולהציג אותו לשרת האינטרנט כמו שלך, הם רק הולכים להראות לכם להאכיל החדשות של אותו האדם או ההודעות של אותו האדם או הדוקר. 

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

אבל המטרה כאן היא באמת להדגיש לא איך לעשות את זה אך כיצד להתגונן מפני דברים כאלה. והפתרון טריוויאלי כאן, אפילו שזה עצמו הוא פגום, באמת כדי להפחית את השימוש של אתרים שאינם בשימוש HTTPS כל זמן. אז אתרים כמו פייסבוק וגוגל יותר ויותר יש לי תיבות שבו אתה יכול להצטרף לדברים מהסוג הזה, ובנקים היו זה במשך שנתי מסיבות דומות. אז רק קצת גורם פחד אם אנחנו יכולים. אבל זהו זה על קצה מזלג. כך שרת זוכר מי אתה. וברגע שהם יכולים לזכור מי אתה, הם יכולים לזכור שום דבר עליך שהמתכנת יש לאחסן בתוך superglobal המיוחד הזה שנקרא $ _SESSION. ועבור 7 pset אנחנו משתמשים בו רק כדי לזכור trivially int, כלומר את המזהה הייחודית של המשתמש שמחובר, כך שאנחנו יודעים שהם היינו שם קודם. כל שאלות ואז על מפגשים או עוגיות או כמו? Firesheep לא עובד כמו גם יותר, ואתה צריך להעביר את המחשב למצב מופקר מיוחד אז אתה בעצם מקשיב לתנועה מלבד עצמכם. אז אם אתה כרגע הורדת Firesheep, מבין שזה לא ממש קל כמו שהיה פעם להפגין. בסדר. ולא עושה את זה בסנדרס. לעשות את זה בבית. מאגרי מידע. אחד מהדברים שעשינו ב7 pset מאוד במכוון היה אנחנו נותנים לך טבלה במסד נתוני מדגם עבור משתמשים שיש כמה שמות משתמש, כמה שמות משתמש, ועוד כמה סיסמות מוצפנות המפורטת בן. וכפי שתראה, אם יש לך כבר לא, אתה הולך לעשות כדי לשנות את הטבלה קצת. אתה תצטרך להוסיף קצת מטמון לכל אחד מהמשתמשים שבטבלה, ואתה תצטרך להוסיף שולחן היסטוריה, שולחן תיקים, או אולי קוראים לזה משהו אחר. אבל במונחים של חשיבה על איך לעשות את זה, בואו לפתוח את הכלי הזה שבו הייתי ביום שישי, אבל אם לא מוכר, המכשיר מגיע עם כלי שם phpMyAdmin שכתוב במקרה ב-PHP, אבל את מטרתו בחיים, אחרי שאכנס לכאן כjharvard עם ארגמן, הוא לתת לי דרך ידידותית למשתמש של צפייה ושינוי מסד הנתונים שלי. 

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

לבית, ברור שאנחנו לא רוצים שזה יהיה int, שהוא ערך 32-bit ב-MySQL. עשינו לדבר בקצרה ביום שישי על varchar, אשר עומד על אורך char משתנה. מה זה? זה מאפשר לך לציין כי אתה רוצה שזה יהיה מחרוזת מסוג כלשהו. אתה לא באמת יודע מראש כמה זמן זה הוא, ולכן אנחנו באופן שרירותי נגיד את שם בית יכול להיות 255 תווים, אבל אתה יכול ללכת עם 32, 64 - כל מספר באמת. אבל היתרון של שימוש varchar מעל שדה נקרא char הוא מה? רק אם אני באופן אינטואיטיבי לגלול למטה כאן, שים לב שיש char ויש varchar. Varchar הוא אורך משתנה char; char הוא באורך קבוע char. לכן, בהתבסס רק על הגדרה זו, מה יתרון או חסרון של כל אחד מאלה? במילים אחרות, למי אכפת ההבחנה, או מה איכפת לך? 

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

[תגובה בלתי נשמעת תלמיד] בדיוק. זה ממש המקרה שchar יהיה בדרך כלל משתמש יותר בזיכרון כי char, כמו ב-C, כמו מייתר, זה מערך של תווים. אז אם אתה אומר שדה char באורך 255, מסד הנתונים הוא ממש הולך לתת לך 255 תווים. אם הבית סופו להיות Mather ו 6 תווים בסה"כ ו, אתה מבזבז מעל 200 תווים. 

אז varchar יעילות משתמש רק כדמויות רבות ככל שיידרש עד לסכום מקסימאלי. אבל המחיר שאתה משלם הוא למעשה ביצועים, באופן פוטנציאלי. אם אתה יודע מראש שכל המחרוזות שלך הולכים להיות 8 תווים - לדוגמה, תניח שאתה דורש סיסמות באורך 8 - היתרון של שימוש בשדה char בהזדמנות, אם כי לא לעתים קרובות, הוא לציין אורך קבוע למשהו כמו סיסמא כי עכשיו מסד הנתונים יכול להיות אפילו יותר חכם. אם הוא יודע שכל שדה char, כל מחרוזת בעמודה היא באותו האורך, אתה מקבל בחזרה את התכונה של גישה אקראית. אתה יכול לקפוץ כבין שדות char השונים בטבלת מסד הנתונים שלך כי תחשוב על מסד נתונים כשורות ועמודות. אז אם כל אחד מהחוטים הוא באותו האורך, אתה יודע שראשון הוא בייט 0, הבא הוא בבית 8 ואז 16 ואז 24 וכך הלאה. אז אם כל המחרוזות הן באותו האורך, אתה יכול לקפוץ הרבה יותר יעיל. כך שיכול להיות יתרון במונחים של ביצועים, אבל בדרך כלל אין לך את המותרות של ידיעה מראש, כך varchar הוא הדרך ללכת. הנה עוד פרט אחד שאפילו פייסבוק נתקל בסופו של דבר. Ints הם גדול, ואנחנו פחות או להשתמש בם כברירת מחדל בכל פעם שאנחנו רוצים מספר, אבל זה רק 32 חתיכות. 

ולמרות שפייסבוק לא די לנו 4 מליארד משתמשים כיום, בהחלט יש בו כמה אנשים שהיו שם איתי חשבונות מרובים או חשבונות שנפתחו ולאחר מכן נסגרו, ולכן אני מאמין שפייסבוק עצם לפני כמה שנים הייתה למעבר מint ל, כפי שנקרא בצדק, bigint, שהוא רק 64 ביטים במקום. אז גם את זה הוא החלטה עיצובית. אתה יהיה ממש בר מזל אם פרויקט הגמר שלך הופך אתחול, יש 4 מיליארדים ו1 משתמשים, פחות או יותר, ובמקרה זה באמצעות ints יכול להיות קצת קצר רואי. אבל במציאות, טבלת המשתמשים שלך היא כנראה בסדר עם ints. אבל למשהו כמו 7 pset, כמו טבלת ההיסטוריה שלך, ייתכן שיש אלף, מ'של משתמשים אם תתפתח etrade.com. אז בעוד שייתכן שאין לו מעל 4 מליארד משתמשים, משתמשים אלה יש לך אולי יש יותר מ 4 מיליארדים עסקות לאורך זמן - קונה ומוכר ודברים בהיסטוריה שלהם. אז אם אתה מצפה - שוב, אלה הם בעיות טובות להיות אם יש לך הרבה נתונים זה - אם אתה עושה את צופה נתונים העולים על הגודל של int, הולך עם משהו כמו bigint הוא כיוון שלא אמץ מספיק פעמים על ידי מעצבים כי אנשים שדמות לא הולכת להיות בעיה, אבל ככה זה קל לבחור משהו יותר גדול מזה. עשרוני אנו משתמשים ב7 pset, אשר מציין דיוק קבוע כך שאתה יכול למנוע את הבעיות כרוכות בצופו זוגות וריאל וכדומה. 

ואז יש כמה תחומים אחרים כאן. אנחנו נניף את ידינו עליהם במידה מסוימת. אבל תאריכים, שעות כולם יש פורמט שנקבע ב-MySQL, והיתרון של אחסון תאריכים כתאריכים ולא varchars משמעות הדבר הוא שהאתר באמת יכול לפרמט אותם לפורמטים שונים, אם פורמט אמריקאי או אירופי או בפורמט כמו - איך שלא תרצה אותו - ביעילות רבה יותר מאשר לו היו רק חלק varchar הגנרית. ויש גם את החלק השני בינארי, VARBINARY, כתמים. אלה הם גופים גדולים בינארי, ואתה יכול גם לאחסן נתונים בינאריים כמו גם נתונים גיאומטריים במסד נתונים. אבל עבורנו אנחנו בדרך כלל אכפת ints וvarchars וכדומה. בואו נסיים את זה למשל עם הבית. הבית שאני הולך לומר באופן שרירותי יהיה 255 תווים. אז ערך ברירת מחדל שאנחנו יכולים לעשות את זה. כברירת מחדל אנחנו יכולים לשים את כולם במאת'ר הבית, למשל. ככה אנחנו יכולים לציין שהמאגר צריך לוודא שמישהו תמיד יש לו ערך. אבל אני אשאיר את זה להיות. למעשה, לאנשים שגרים מחוץ לקמפוס ולא בבית, אולי אני בעצם רוצה לציין שערך ברירת המחדל עבור הבית הוא NULL, ואז אני צריך לבדוק את התיבה הזאת ולהגיד אתר זה בסדר אם הבית של המשתמש הוא NULL. 

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

למשהו כמו בית, זה לא צריך להיות מפתח ראשי כי אז רק 1 אדם יכול לחיות במאת'ר ואדם 1 בקורייר וכמו. בדומה לכך, זה לא צריך להיות ייחודי. ההבדל בין ראשוני וייחודיים הוא כי במקרה של הטבלה הנוכחית שלנו, זיהוי יהיה עיקרי אך הדוא"ל אינו הסיבה עיקרי שלהזכרנו זה עתה - ביצועים - אבל זה עדיין צריך להיות ייחודי. אז אתה עדיין יכול לאכוף ייחוד בלי הטענה שזה שדה ראשי חשוב סופר. אבל זה אחד הוא מועיל למדי: מדד. אם אתה יודע מראש לפרויקט הגמר שלך, ל7 pset, או באופן כללי, בית שתחום זה הולך להיות משהו שאתה מחפש בהרבה באמצעות מילת מפתח או משהו אחר לבחור, אז אתה יכול להגיד לי מנע האתר יפעיל את קסמיה ולוודא שהוא יוצר בזיכרון כל מבני נתונים מהודרים נחוץ כדי לזרז את חיפושים המבוססים על הבית. אולי זה יהיה להשתמש בשולחן חשיש, אולי זה יהיה להשתמש ברשימה מקושרת. במציאות, הוא נוטה להשתמש בעץ, לעתים מבנה שנקרא B-עץ - לא עץ בינארי אלא B-עץ - שהוא עץ רחב מאוד שאתה עשוי לראות בכיתה כמו CS124, כיתת מבני נתונים. אבל בקיצור, אין לך מה לדאוג כי בעת שימוש תוכנת מסד נתונים חכמה. אתה פשוט יכול להגיד לו, "מדד תחום זה ולכן אני יכול לחפש עליו בצורה יעילה יותר". 

אם תשאיר את זה ואתה מנסה לחפש כולם במסד הנתונים המתגורר במאת'ר, זה יתפתח לחיפוש ליניארי. ואם יש לך 6000 undergrads כל החיים באיזה בית, אתה הולך לחפש את השולחן כולו כדי למצוא את Matherites, בעוד שאם אתה אומר אינדקס, אני מקווה שזה יהיה משהו קרוב לחיפוש לוגריתמים למצוא סוגים אלו של תלמידים. זוהי רק תכונה חופשיה להפעיל, למרות שזה בא במחיר של כמות מסוימת של שטח. לבסוף, תוספת אוטומטית, תחום בינה מלאכותי זה, רק אומר שאם זה int ואתה לא רוצה לדאוג לזה בעצמך להגדיל כל פעם שיש משתמש חדש, תבדוק את זה, וכל משתמש שמקבל מוכנס באופן אוטומטי לקבל תעודת זהות חדשה. בואו לחצו על שמור, ועכשיו בואו למצוא פגם בעיצוב זה. אם אני נכנסתי לעיון, שים לב שגם מייק והבית שלי הוא NULL. אני יכול להשתמש phpMyAdmin לערוך זאת באופן ידני. אני יכול ללכת לכאן וסוג ב 'ר ולאחר מכן על Enter, ועכשיו שים לב לטבלה היא שונה. אבל שם לב שאני יכול לעשות משהו אחר גם כן. זהותו של הדוד היא 1, אז phpMyAdmin שוב הוא רק כלי ניהולי; זה לא משהו שהמשתמשים שלך תמיד הולכים לראות. אז אם אני במקום לוחץ על כרטיסיית SQL למעלה - ושוב, 7 pset יכיר לך יותר של שאילתות אלה - אני באופן ידני יכול לבצע את פקודת שפת SQL מובנהית השאילתה משתמשי UPDATE SET הבית = 'Pfoho "איפה id = 1. שאילתות SQL אלה, די יפים, די קריאות משמאל לימין. לעדכן את טבלת המשתמשים, הגדר את השדה התקשר לבית לPfoho שם זיהוי של המשתמש הוא 1. או אפילו שאני יכול לעשות בי דוא"ל = 'malan@harvard.edu'. כל עוד שמזהה באופן ייחודי לי, שהיה עובד גם כן. אבל זהות נוטה להיות ביצועים גבוהים יותר, אז בואו נעשה את זה. בואו לחצו על Go. אוקיי, lecture.users לא קיים. מה הטעות שלי? מה שנקרא השולחן דווקא כאן? זה נקרא תלמידים רק בגלל שזה מה שעשינו עד כאן בפינה שמאלית עליונה. זה נקרא תלמידים, לא ממשתמשים. אז לחץ על חפש כעת. השורה 1 מושפעת. שאילתא ארכה 0.01 שניות. אם אני לוחץ על עיון עכשיו, עכשיו חיי Malan בPfoho. אז זה טעם אחר של SQL, אבל pset יעבור קצת יותר מזה. 

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

כן. [תלמיד] בראותם שזה בתלמידים, אנחנו משתמשים באותה [לא ברור] אותו הדבר - בדיוק. אז אם 400 אנשים חיים במאת'ר, פחות או יותר, סופו של דבר לוח זה הולך יש 400 שורות שאומרות "ר", "ר", "ר", "ר", "ר". אנחנו מבזבזים את כל הבתים הללו, ויש כמה מזנונים שם. 1, יש מקרה שבו הפינה המטורף אם מישהו משלם הרבה כסף שינוי השמות ומאת'ר, עכשיו אנחנו צריכים לשנות את הנתונים בטבלה השלמה שלנו. זה לא יקרה לעתים קרובות, אם כי Pfoho נקרא פעם צפון בית לפני 15 שנה, כך זה קורה. אבל זה לא כל כך משכנע. יותר משכנע מאשר מקרה פינה כמו זה של צורך לעדכן את הנתונים בתפזורת עבור מסד נתונים למה אתה אחסון מאת'ר שוב ושוב ושוב ושוב? זה הרבה תווים, 6 תווים. אנחנו לא יכולים לעשות אפילו יותר טוב מזה, במיוחד לPforzheimer? אין ספק שאנחנו יכולים לעשות יותר טוב מזה דמויות רבות. למה לא פשוט לשייך את מזהה ייחודית של כל בית וחנות שעבור כל משתמש? אז בואו ננסה את זה. במקום פשוט להשתמש בטבלת התלמידים, נתן לי ללכת עד למסד נתוני ההרצאה שלי כאן למעלה בצד שמאל למעלה. שים לב כאן זה אומר יצירת טבלה. תן לי ליצור טבלה חדשה בשם בתים. מספר העמודות הולך להיות 2. Enter. עכשיו יש לי 2 שדות. אני הולך לקרוא לזה בשם, וזה הולך להיות varchar באורך 255, 

אבל זה די שרירותי. אני רוצה לשים את זה כאן על ידי ועידה. אז שים את זהות עד כאן. בואו לתת את כל בית מזהה ייחודי. בואו לתת את כל בית שם. בואו לציין שהמזהה תהיה חתומה רק על ידי אמנה לשימוש מספרים חיוביים בלבד. בואו נלך קדימה ותיתן לי תחום זה אוטומטי תוספת לעת עתה. ואנחנו לא צריכים שום דבר אחר? בואו נלך קדימה ולחץ על שמור. עכשיו יש לי טבלה שנייה. שימו לב שמלבד זה הוא פקודת SQL הסתומה במקצת שהיית צריך להקליד באופן ידני אם לא באמצעות כלי ניהולי כמו phpMyAdmin. אז סיבה נוספת שאנו משתמשים בו. זה סוג של בחינה פדגוגית להפליא שימושי, כי אתה יכול ללחוץ סביב ולהבין איך דברים עובדים רק על ידי העתקה והדבקה של מה phpMyAdmin עשה. אבל פקודת שולחן היצירה היא מה שהוצא להורג, וכאן הוא השולחן שלי. תן לי ללכת קדימה עכשיו ולהשתמש ב-SQL גרידא ולא מפשטנות על ידי לחיצה על כרטיסיית ההוספה. תן לי לנהל INSERT INTO בתים, ואני הולך להגיד את שמו של הבית הולך להיות בעל ערך של 'ר'. זה הכל. תחביר זה קצת יותר מסתורי. זה השם של השדות שברצוננו להוסיף. אלה הערכים שאנחנו רוצים להכניס לתוך התחומים אלה. תן לי לחצו על Go. השורה 1 הוכנסה לקחה 0.02 שניות. תן לי עכשיו לחצו על עיון. 

שים לב אם אלחץ על עיון, יש מאת'ר, מזהה שהוא על ידי אוטומצית המספר 1. תן לי לעשות עוד אחד. תן לי ללכת ללשונית SQL. INSERT INTO בתים. שמו של הבית הולך להיות ערך של Pfoho וכן הלאה. עבור. ואני יכול להמשיך לעשות את זה שוב ושוב ושוב. או אם אתה משתעמם בעזרת phpMyAdmin, אתה יכול פשוט להשתמש בכרטיסיית ההוספה ולא יצטרכו להקליד SQL הגלם. אתה פשוט יכול לדפוק אותו במהירות רבה יותר על ידי הקלדה, למשל, קורייר, זן, ועכשיו אם אנחנו לוחצים על עיון, יש קורייר עם זיהוי של 3. אז זה מה שאנחנו מתכוונים באופן אוטומטי תוספת. אבל עכשיו אנחנו צריכים לתקן משהו בתלמידים. בתלמידים מה צריך את סוג הנתונים של שדה הבית עכשיו יהיה? זה צריך להיות int, נכון? אז המטרה כאן היא גורם החוצה, הידוע גם בנורמליזציה, שולחנות כך שאנו לא שומרים את המידע מיותר בכל השולחנות שלי. ושוב, בדרך שהיינו כאן לא תגיד 'ר, ר, מאת'ר, מאת'ר, Pfoho, Pfoho, Pfoho, Pfoho, וזה מאוד מיותר במונחים של הבזבזנות של התווים. אז תן לי ללכת קדימה ולשנות את זה על ידי לחיצה על מבנה, ותנו לי להמשיך ולבדוק את שטח הבית, לחץ על שינוי, ועכשיו אני הולך לשנות את זה כדי להיות int. 255 הם כבר לא רלוונטי. תן לי ללכת קדימה ואומרים שזה בסדר אם זה עדיין NULL. שמור. עכשיו תלמידי טבלה השתנו בהצלחה, ושים לב שוב הבית הוא int. במאמר מוסגר, להתעלם מהמספר בסוגריים כשמדובר ints. 

זה מסיבות מדור קודם. חזרה ביום שבו לא היה לך GUIs, שהייתה במקום בסביבת שורת פקודה, את כמה 10 ו 11 בהתאמה תווים שצוין אתה צריך להראות בחלון המסוף כדי בעצם להציג שדות. אין לזה שום קשר עם האורך של קצת השדה בפועל, ולכן אנחנו פשוט להתעלם מזה לעת עתה. עכשיו אני צריך להיכנס לטבלה זו. ואם הדוד חי במאת'ר, הבית לא צריך להיות 0, שהוא ערך ברירת מחדל int הקרוב ל NULL. הוא צריך לחיות בבית 1. בואו שרירותי לומר שחיי מייק בPfoho, כך מספר בית 2. עכשיו השולחן שלי נראה קצת יותר מסתורי. אלא לשקול את היעילות. עכשיו אני משתמש רק 32 חתיכות כדי לזהות את הבית, מה שאומר שיש רק 1 הגדרה הקנונית של בית מאת'ר וPfoho וזה בטבלת הבתים. אז אם אני רוצה עכשיו להצטרף טבלאות אלה, חושבים על זה ככה. כאן יש לי שולחן התלמידים שלי, ועל צד ימין יש מספרים אלה, 1 ו 2. 1 הוא מאת'ר, 2 הם Pfoho. יש לנו את אותם מספרים בטבלה אחרת זה, אשר נקרא בתים, 1 ו 2 ו 3 למשך 3 הבתים הללו. מה עכשיו אנחנו רוצים לעשות זה יש את היכולת בקוד, PHP ו-SQL, כדי למיין מלהצטרף טבלאות אלה, שבו אם אלה הם תלמידים ואלה הם בתים, אנחנו רוצים איכשהו לשלב אותם כך שעד 1 שורות עם 1, 2 שורות עם 2, וכדי שנוכל להבין איפה דוד ושבו מייק ואיפה כולם חיים. לשם כך אנו יכולים לבצע שאילתא SQL כמו הבא. SELECT * FROM תלמידי בתי JOIN ON - ועכשיו מה שדות שאנו רוצים להצטרף ב? אז students.house = houses.id. 

לא ברור מספיק, אך חלק זה פירושו מילולי ליצור טבלה זמנית חדשה זה התוצאה של הצטרפות תלמידים ובתים. ואיך אתה רוצה לשלב את קצות האצבעות שלי כאן? הגדרה 'שדה הבית השווה לבתים של תלמידי שדה מזהה. ואם אני עכשיו אלחץ על Go, אני חוזר בדיוק מה שקיוויתי. דוד הוא במאת'ר, מייק הוא בPfoho, ואני גם רואה את המזהים הייחודיים. אבל הנקודה היא שעכשיו יש לי שולחן מלא. וכך ממסעדה כאן ל7 pset או באמת לפרויקט הגמר: אם אתה מוצא שאתה אחסון כל פיסת המידע מיותר, בין אם מדובר בבית, אולי זה עיר, מדינה ומיקוד בי ZIP תמיד יכול לשמש בדרך כלל אך לא כמזהה ייחודית, אין לעבור את התרגיל נפשי ולאחר מכן עם משהו כמו phpMyAdmin של הפקטורינג מתוך נתונים אלה נפוצים במיוחד משום שהאתר שלך אהיה יותר טוב בשימוש ויותר פופולריים, זה איך אתה לוודא שהכל הוא סופר מהיר, על ידי מתן את מסד הנתונים כרמזים רבים באשר לייחוד ככל האפשר. זה היה הרבה. יש שאלות? בסדר. בואו לקחת הפסקה של 5 דקות ויש להיערך מחדש. בסדר. להלן דוגמה ששמשה לפני כמה שנים כשלקחתי CS161, אשר היא מחלקת מערכות ההפעלה במכללה אשר ידוע להיות מדהים, אבל כמות מטורפת של עבודה, והיא מתמקדת באמת בחלק מהבעיות ברמה הנמוכה שעולות במערכות הפעלה וגם אפילו בעולם של מסדי נתונים. 

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

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

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

הדרך הפשוטה ביותר בMySQL היא קו של SQL שנתנו לך במפרט סט הבעיה שנראה בדיוק כמו זה. הכנס את התקליטור לשולחן - איך שקורא - איד, סמל, ומניה, מספר המניות, הערכים הבאים, למשל. אם לא קראת את המפרט עדיין, זוהי דוגמה המעורבת איך אתה הולך על קונה 10 מניות פרוטות זו לנשיא Skroob, זיהוי המשתמש שקורה להיות המספר 7? זה אומר INSERT INTO שולחן id הבא, סמל, ומספר המניות מתוך 7, 'DVN.V', ו10. אבל - אבל, אבל, אבל - הקו השני הוא אחד החשוב. על מניות UPDATE מפתח משוכפלות = מניות + VALUES (מניות). אז לחלוטין מסתורי למראה במבט הראשון. אבל העובדה ששאילתא SQL זו, למרות שהיא עוטפת על 2 קווים, שאילתא היא ארוכה 1, זה אומר שזה אטומי במובן זה ששאילתא זו תהיה גם תבוצע כולם יחד או בכלל לא. ולפי הגדרה של MySQL, זה איך הם יישמו שאילתא זו. זה בהגדרה במדריך המובטח לבצע בבת אחת או בכלל לא. המוטיבציה לכך היא כדלקמן. אם במקרה הזה אתה מנסה לקנות 10 מניות, זה סוג של הסיפור הזהה לחלב, שזה סוג של הסיפור הזהה לכספומט. 

אם אתה עושה את הטעות של שימוש לא תחביר זה אך במקום בחירה מתוך מסד הנתונים לראות כמה מניות פרוטות זה אין הנשיא Skroob יש, ומניח שיש לו 10 מניות, ועוד קצת שבריר שני מאוחר יותר אז אתה עושה משפט UPDATE, וזה עוד הצהרה ב-SQL שאומר להמשיך ולהוסיף עוד 10 מניות עד 10 הנוכחיים, כך שאופן אידיאלי הכולל הוא 20, הבעיה היא כי במערכות מסדי הנתונים של היום וכי במחשבים של היום יש לך במעבדים מרובים ליבות, מרובות - במילים אחרות, מחשבים יכולים ממש לעשות דברים מרובים בבת אחת - אין שום ערובה שSELECT שלך ולעדכנך במקרה זה הולכים לקרות גב אל גב. אז תרחיש גרוע היה שאתה עושה SELECT כדי לראות כמה מניות פרוטות זה אינו Skroob יש, ואז פשוט במקרה אחר שאילתא מסד נתונים מתבצעת - אולי Skroob שלו בחלון דפדפן אחר מנסה לקנות 10 מניות בחלון אחר לגמרי, ממש כמו הכספומט - ותניח ששאילתא אחרת מקבלת בין SELECT והעדכון. זה יכול להיות המקרה שSkroob עכשיו מאבד חלק מספר המניות מכיוון שתהליך אחר בדיקת המצב של עולמו, או שהוא מקבל יותר מניות ממה שהוא צריך. אנחנו לא נכנסנו לפרטים של מה בדיוק קווי עלילה מסוימים האלה יהיו, אבל הנקודה היא שאם יש לך כדי לבדוק את ערך משתנים ולאחר מכן לקבל החלטה, אם יש סיכון למישהו אחר לעשות משהו בבין 2 האמירות האלה, כמו שיכול לקרות במערכות מרובות מעבד, מערכות מרובות ליבה ב, מחשבים עם היכולת לעשות דברים רבים בבת אחת, דברים רעים יכולים לקרות חשבונות הבנק כמו שחויבו באופן שגוי, קנייה כפליים חלב, או במקרה זה המספר הלא הנכון של מניות. אבל יש דרך קלה יותר לחשוב על זה. 

מתברר שגם תומך SQL, אם תגדיר את הטבלה בצורה נכונה, משהו שנקרא עסקות, שאני טוען הוא למעשה גם קל יותר להבנה מזה, אבל זה לא 1-אונייה, אז זה באמת קצת יותר מעורב. יש ממש בהצהרת SQL נקראת עסקת START. בדיוק כמו שיש SELECT, UPDATE, INSERT, DELETE, ולהצטרף וחבורה של אחרים, יש מילות מפתח כמו עסקת START. ומה שאתה עושה אז בהקשר של 7 pset - אתה לא צריך לעשות את זה בשביל 7 pset; הוא הכחיש באופן מפורש שלא הכרחי, אבל לעבודות גמר שהוא יכול להיות שימושי - אם אתה קורא לשאילתא של עסקת START ואז שאילתא אחרת ואז שאילתא אחרת ואז עוד אחד, עוד אחד ועוד, שאילתות אלה לא תבוצענה בפועל עד שאתה קורא את משפט SQL להתחייב, ובשלב זה, בין אם זה 2 הצהרות או 20 הצהרות, הם יהיו כולם מבוצעים בפעם אחת, מה שאומר שאף אחד אחר לא יכול לקנות יותר מדי חלב או חיוב יותר מדי כסף בטעות או לקנות מניות רבות מדי, משום שכל השאילתות שלך יהיה לבצע גב אל גב אל הגב אל גב. וזה סופר חשוב, במיוחד כשאתה עושה משהו כזה. זוהי דוגמה שרירותית, שאומרת בואו לעדכן את חשבון הבנק על ידי קביעת איזון שווה לאיזון - 1000 $ שבו מספר החשבון הוא 2. ואז המשפט השני עכשיו בואו להפקיד ש1000 $ למישהו אחר בחשבון הבנק שחשבונו מספר 1. 

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

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

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

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

אתה יכול לטשטש את זה, מה שאומר שאתה יכול לעשות את זה נראה מטורף ומכוער ללא רווחים, שמות משתנים איומים, כדי לעשות את זה קשה יותר עבור אנשים כדי לגנוב IP שלך, אבל המפתח הוא שהוא מבוצע בצד דפדפן. למרות כצד שרת צד ניתן להשתמש ב-JavaScript, השימוש הנפוץ ביותר ברגע זה הוא עדיין בדפדפן. והנה מה שזה נראה. הנה אם-אחר אם אחר, לבנות בדיוק כמו C, בדיוק כמו PHP. הנה ביטוי בוליאני כאשר אתה "או" 2 דברים ביחד. כאן הוא כאשר אתה "ו" 2 דברים ביחד. הנה הצהרה בוררת, אשר דומה ל-PHP בכך שתוכלו לעבור על סוגים שונים של ערכים. הלולאות באופן דומה יש ללולאות כאן, שבנויות בצורה זהה למה שראינו בעבר. בעוד לולאות; יש לנו לעשות בזמן לולאות. משתנה, לא הייתה בצורה. אתה להצהיר על משתנה כמו שאתה עושה ב-PHP ו-C, אבל דומה JavaScript הקלדה בחולשה. לא תציין int או float או מחרוזת או משהו כזה בדרך כלל. ניתן לציין var. אתה לא צריך לציין var, אבל יש לו השלכות, אם אתה לא יודע. בדרך כלל אם אתה משמיט var, אתה יוצר בטעות משתנה גלובלי במקום מקומי. אז תרשה לי להציע לך שכמעט תמיד רק לומר var ואז את השם של המשתנה. זה לא סוג, זה רק var למשתנה. זו תהיה דוגמה, אם זה 123 או "שלום, עולם". מערכים הם הווה ותחבירי דומים ל-PHP. אני אגיד את מספרי var ואז אני משתמש בסוגריים מרובעים שוב כדי להצהיר על משתנה הסוג שלו הוא מערך שיש המספרים הללו מסוימים בזה המופרד בפסיקים. ואז לבסוף, זה הוא היחיד שבאמת נראה שונים. תזכיר כי ב-PHP היינו יישמתי מערך אסוציאטיבי לתלמיד כמו Zamyla שעשוי להיראות כך, כאשר המשתנה נקרא תלמיד. הסוגריים המרובעים אומרים כאן מגיע מערך. 

העובדה שאני לא משתמש במדדים אלא מחרוזות מספריים - האיד, בית, ושם - משמעות דבר הוא כי זה מערך אסוציאטיבי, וחיצים אלה עם סימן השוויון והסוגר זוויתי משמעות דבר הוא שהמפתח הוא "ID", הערך הוא 1; המפתח הוא "בית", הערך הוא ינתרופ הבית; המפתח הוא "שם", הערך הוא Zamyla צ'אן. אז יש 3 מפתחות בפנים של מערך זה אסוציאטיבי, כל אחד מהם יש לו הערך בפני עצמו. אנו רואים כי ב7 pset, או שבקרוב, באותו הרעיון JavaScript, אבל זה הולך להיראות כך. סטודנט אז var - שום סימן של דולר ושום אזכור לסוג עדיין אבל var - שווה ולאחר מכן פתח סוגריים מסולסלים, כי ב-JavaScript כאשר יש לך זוגות ערך מפתח, אתה בעצם משתמש במשהו שנקרא אובייקט. ואלה מכם שלא לקחת נגמ"שים או כמו שתארו את האובייקטים מג'אווה או שפות דומות. JavaScript היא לא ג'אווה, קודם כל. זה היה לפני שנים והחלטות עיצוב מכוונות לדפוק את משהו אחר שהיה פופולרי, שמו, למרות שאין לה שום קשר מהותי לג'אווה עצם. JavaScript יש אובייקטים, ואתה יוצר אותם בדרך של סימון הסד המתולתל. אובייקטים ב-JavaScript הם פחות או יותר שווים ערך למערכים אסוציאטיביים ב-PHP כשזה מגיע לאחסון נתונים בתוכם. 

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

הנה הדברים הישנים בדוגמה זו. יש לי תג HTML, תגית ראש, ותג כותרת. אז יש לי כאן עם תג גוף div, שההיזכרות היא רק חלוקה מלבנית של הדף שנתתי לו מזהה ייחודי שרירותי של "ברכה" ל, רק אז יש לי דרך של התייחסות ייחודית לזה, שיש לו חלק מטקסט פשוט מאוד: שלום, עולם. עכשיו בואו לגלול אותי לחלק העליון של קובץ זה ולראות מה חדש. הדבר הראשון זה למעלה חדש הוא תג התסריט, ובתוך תג סקריפט ההודעה שהכרזתי זה עתה פונקציה. להכריז על פונקציה ב-JavaScript, די דומה ל-PHP, אתה ממש לכתוב פונקציה אז את השם של הפונקציה, סוגריים, ואולי כמה טיעונים אם זה לוקח כל. אז יש לי סד המתולתל שלי כרגיל, ועכשיו יש לנו קצת קוד חדש במקצת, אבל בואו נראה מה זה אומר. אז div var, זה רק אומר שייתן לי div שנקרא משתנה. אני יכול לקרוא לה foo, אבל רצה שזה ייקרא div מסיבות שתהיינה ברורים בשני. אז מתברר בJavaScript - וזה קוד JavaScript המוטבע בדף האינטרנט שלי - יש משתנה גלובלי מיוחד של מינים הנקראים מסמך. JavaScript היא למעשה שפה מונחה עצמים. אנחנו לא נכנסנו לפרטים ב50 על מה זה אומר, אך לעת עתה יודע שמטרה היא פחות או יותר כמו struct. כמו שראינו בדרך חזרה, כאשר אחד של הבעיה המוקדמת קובע בו אנחנו שמים הרבה מידע בstruct, דומה הוא לתעד struct מיוחד שמגיע עם הדפדפן, מגיע עם כל דף אינטרנט. זה לא משהו שאני יצרתי. בתוך מבנה מסמך זה, אם כי, יש לך לא רק נתונים אבל יש לך גם פונקציות. 

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

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

ומתברר שיש חלון האובייקט בתוך פונקציה מיוחדת שלו שנקרא setInterval שעושה מה שהוא אומר. זה יהיה להגדיר את מרווח זמן - במקרה זה כל 500 אלפיות שני - ו, ינחש, מה זה הולך לעשות כל 500 אלפיות שני? זה הולך לבצע שמצמוץ הפונקציה. ומה שיפה כאן הוא שאנחנו יכולים לעשות את זה ב-C למרות שמעולם לא עשינו. C האם יש משהו שנקרא מצביעי פונקציות שבו אתה יכול להעביר פונקציות סביב כטיעונים. כמו כן ב-JavaScript אתה יכול להעביר את השם של פונקציה לפונקציה אחרת. ושים לב למה שאני עושה. אני לא עושה את זה. אם אני שם סוגריים לאחר המצמוץ, זה אומר לקרוא את פונקצית ההרף. אם אני פוסח עליהם, זאת אומרת כאן היא פונקצית המצמוץ כך setInterval שאפשר לקרוא לזה כל 500 אלפיות שני. אז התוצאה הסופית, אכזרי ככל שיהיה, היא שאם אני נכנסתי localhost וללכת לblink.html, עכשיו יש לי את זה קורה שוב ושוב. ואם אני באמת בודק אלמנט, בואו נראה אם ​​אנחנו יכולים לראות את זה. תנו לי לבדוק אלמנט, בואו לגלול למטה רק קצת, תן לי לבחור אלמנטים לכאן, ומבחין בתוך DOM של המפקח של הכרום. זה ממש משתנה הלוך ושוב כל 500 אלפיות שני. אם תלכו לידידנו נייט, אם אי פעם תהה איך זה עובד רעיון, דומה עם מרווח, אבל נייט למעשה עושה שימוש יעיל מאוד של צבע במקרה ספציפי זה כאן. אז מה עוד יכולים בעצם אנחנו עושים עם זה? בואו לפתוח את דוגמה נוספת ולנסות משהו זה תכנותי אפילו יותר מועיל מביצוע מצמוץ דברים. תן לי ללכת לספריית הטפסים שלנו היום ולהיכנס לform0. זו הייתה הצורה המכוערת ביותר האפשרית שאני יכול לבוא עם, ותרשו לי להראות לך איך זה נראה בדפדפן. 

תן לי ללכת לlocalhost / צורות, וזה form0. זהו טופס HTML מכוער סופר שיש לו כמה שדות לדוא"ל, לסיסמא, סיסמא, ולאחר מכן תיבה קטנה להסכים לתנאים מסוימים. המלכוד הוא אם אני מבקר בטופס זה, ואני לא רוצה לתת לך את כתובת הדוא"ל שלי, אני לא רוצה להסכים לתנאים ולהתניות אולי, אני יכול ללחוץ על הרשמה וזה מאפשר לי לעבור בכל מקרה. זה קורה להגיש לקובץ PHP טיפש נקרא dump.php. כל שהוא עושה הוא להדפיס את התוכן של _GET $ רק למטרות אבחון. זה מה שהוגש על ידי המשתמש זה עתה. אבל תניח שבאמת אנחנו רוצים לאמת את צורת ההגשה של המשתמש. תן לי ללכת לגרסה 1. זה form1.html. זה נראה אסתטי גרוע באותה מידה, אבל שים לב כמה מפואר זה. אם אני לוחץ על הרשמה ללא שיתוף פעולה, צועק עליי. "עליך לספק את כתובת הדוא"ל שלך." בסדר. אז בואו ננסה את זה לי. אז malan@harvard.edu. אני לא צריך סיסמא. הרשמה. "עליך לספק את סיסמא." בסדר. אז אני אספק את הסיסמה של ארגמן. הרשמה. "סיסמות לא תואמות." יש לי עכשיו להקליד כאן ארגמן. בדקתי בטעות ש. הרשמה. "עליך להסכים לתנאים." בסדר. מסכים שם. הרשמה. ועכשיו זה מראה לי את פלט האבחון שם. 

אז מה בדיוק קרה? היה לנו את היכולת הזו כדי לאמת להגיש את הטופס. למעשה, אם אתה לא צולל לתוך 7 pset, יש פונקציה להתנצל זה עושה את זה די קל לצעוק על המשתמש עם הודעה על המסך. אני משתמש במנגנון מעט שונה, פונקצית ההתראה, וזה לא פונקציה זה חייך על שכן הוא הופך את הודעות משתמש מאוד מכוערות. אבל בואו נראים מה אני עושה כאן. זה form1.html, ושם לב שיש לי קצת תחביר די מוכר: תג גוף, צורת תג, מאפיין פעולה, תכונת שיטה. אבל שם לב שנתתי לי טופס זיהוי ייחודי לנוחות. אז יש לי שדה הדוא"ל סוגו הוא טקסט, שדה סיסמא סוגו הוא סיסמא, שדה אישור סוגו הוא סיסמא, ולאחר מכן תיבה ששמה הוא הסכם לכאן, היא סוג התיבה סימון. ואז יש לי כפתור שליחה. אבל שם לב שבחלק העליון מה עוד יש לי. קודם כל, יש שימוש נוסף של תג סקריפט. אם יש לך קצת קוד JavaScript בקובץ אחר, בדיוק כמו עם CSS אתה יכול לכלול אותו. ואתה עושה את זה עם מקור תסריט, ואז שמת לב שאני מתחבר כנראה לgoogleapis.com לדרך ארוכה מאוד אבל שם קובץ שמסתיים בjquery.min למינימום. js. jQuery היא ספרייה פופולרית ביותר לJavaScript שרק גורמת JavaScript עוד יותר ידידותי למשתמש לשימוש. זה הפך ביעילות סטנדרט דה פקטו. אז למרות מה לראות שאתה אינו טהור JavaScript כשלעצמה, זה ספרייה על גבי JavaScript כמו ספריית CS50 היא שכבה על גבי קוד C ברמה נמוכה; המציאות היא כמעט כולם באינטרנט משתמש בו. אז אלה לא גלגלי עזר. זה פשוט הכי טוב להתאמן בימים אלה. עכשיו שם לב שמתחת הוא תג התסריט שלי, ושם לב למה שעשיתי כאן. מתברר כי jQuery עושה משהו מפואר קטנה. JavaScript יש סימני דולר, אבל הם חסרי משמעות. 

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

זו פונקציה שנקראת מוכן, וזה רק אומר שבצע את הפעולות הבאות כאשר כל דף האינטרנט הוא מוכן, כאשר הכל כבר קראו בשרת. מה אתה רוצה לעשות? אני רוצה לבצע את הנתח של קוד. שים לב שאנו לא רוצים לבצע קוד זה מייד. אם אני משמיט את זה, זה אומר מייד יתחיל להוציא להורג את השורות האלה של קוד. אבל עובדה שאני אומר לא, לא, לא, עטוף את זה בפונקציה אנונימית כמו זה אמצעים לא מבצעים את זה עדיין, קורא לזה בסוף. ראינו את זה לפני רגע בדוגמא הטופס הקודמת שלנו. איזה תפקיד אנו קוראים סופו של דבר, 500 אלפיות שניים? למצמץ. אז אותו הרעיון. שוב, גם אם זה נראה קצת מוזר, פשוט לקחת לעת עתה על אמונה להכריז שפונקציה אנונימית שנקראת סופו של דבר, אתה פשוט לכתוב פונקציה () { אז מה קוד אנחנו הולכים לבצע סופו של דבר? הבא. זה גם נראה קצת חדש, אבל זה אומר שהנה פונקצית jQuery, וזה עכשיו הוא קיצור. קטע HTML זה בתחתית המסך יש כמובן כמה ייצוג עץ. זה לא זה. דף זה הוא יותר מעניין מ, למשל שלום העולם הזה. אבל יש איזה עץ מתאים ל-HTML. זה יהיה כאב בצוואר יש ליישם איזה פונקציה רקורסיבית כדי להתחיל בצומת השורש ולאחר מכן למצוא את הצומת שמזהה רישום. אז מה עושה jQuery סופר קל עבורנו, פשוטו כמשמעו, הוא זו. קדימה ותתפוס אותי מה div או צורה כלשהי, מה אלמנט HTML יש זיהוי של רישום. זה שווה document.getElementById ('רישום'). 

מדוע אנשים כמו jQuery? כי זה קצר יותר להקלדה. אבל זה כל מה שזה. זה אותו הרעיון. תשיג לי את תג זיהוי שלו הוא רישום. וכאשר זה תג, אשר קורה להיות טופס, הוא הגיש, ללכת קדימה ולבצע קוד זה. אז בואו לקחת מבט אחד עכשיו באופן שאנחנו עושים טופס אימות. התחביר הוא אמנם סתום בהתחלה, אבל מה קורה? אם הקו הזה של קוד נכון, אני הולך לצעוק על המשתמש לספק את כתובת הדוא"ל שלו או שלה. אז מהו הקו הזה של קוד? $ פירוש jQuery. עכשיו שם לב לכך. זה כמו סוג של CSS. אם כבר צללת לתוך CSS עדיין, אתה יודע שזה אומר שהאלמנט מזהה רישום. המרחב אומר למצוא ילד או צאצא של רישום השם הוא קלט. ואז הדבר הזה בסוגריים מרובעים הוא מסננת קטנה. וגם אם זה נראה סתום, זה רק אומר לעבור לטופס רישום תעודת זהות שלו, ללכת בתוך אלמנט קלט שמשמה הוא דואר אלקטרוני, ולאחר מכן לקבל את הערך שלו, לא משנה מה הערך שלו במקרה - asdf אם זה כל מה שהוקלד או malan@harvard.edu אם זה מה שהקלדתי. אז אם הערך של השדה של טופס הדוא"ל == כלום, צועק על המשתמש. אחר אם הערך של שדה הסיסמה כלום ==, לצעוק על המשתמש. 

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

אבל כפי שקורה לעתים קרובות בעיצוב אתרים, זה תלוי בך באמת לחטט, לשלב קטעי קוד ודוגמאות מהאינטרנט כל כך הרבה זמן כמו שאתה מצטט אותם לפי תנאים שבגיליון הראשון ומבין שלימוד HTML, CSS, JavaScript וגם SQL באמת אמור להיות התרגיל הזה ב-Home כאשר אנו מתחילים לקחת את גלגלי העזר הללו. ומבין גם שיש כל כך הרבה דברים שאתה יכול לעשות עם דפדפן. בפנים של רוב האלמנטים האלה יש דברים אחרים שנקראים טפל באירועים. ולמרות שאנחנו רק הבטנו באלה שקוראים לי onsubmit וonready, אתה יכול לעשות דברים כמו onkeydown, onkeyup, כמו כאשר המשתמש נוגע מפתח, אתה יכול להקשיב לזה ואת המפתח. Gmail יש קיצורי מקשים. כיצד Google ליישם קיצורי מקלדת כמו C ללהלחין? הם מקשיבים לאירועים, כפי שהם נקראים, כמו onkeypress או onkeyup וonkeydown. אם אי פעם רחפת עם העכבר מעל חלק אפשרות תפריט ופתאום, זהו, מופיע תפריט או צבע שינויים הגרפי, איך הם עושים את זה? במקום להקשיב לonready או onsubmit, אתה מקשיב לonMouseOver או onmouseout. 

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

[CS50.TV]