>> רוג'ר ZURAWICKI: שלום לכולם.
האם אני יכול לקבל את תשומת הלב שלך?
תודה, חבר 'ה.
היום אני רוצה לדבר על מטאור.
זוהי מסגרת-JavaScript.
אנחנו נהיה עוברים איך אתה יכול להפוך יישומי אינטרנט ממש מגניבים.
>> לפני שנכנסנו לJavaScript, אני פשוט רוצה לספר לכם חבר 'ה שזה יהיה
יהיה - יהיה לך מאוחר יותר חתיכה בסמסטר הזה.
זה צריך להיות על JavaScript.
אני חושב [לא ברור] הוא הולך ראשון לכסות את חומר PHP האינטרנט HTML לפני שאנחנו
לעבור ל- JavaScript.
ובCS50, JavaScript נחשב כמו קוד לקוח.
כך שזה רק מקבל לרוץ דפדפן האינטרנט.
>> אך הודות לפיתוחים אחרונים בתחום טכנולוגיה, יש לנו עכשיו הצלחתי להפעיל
JavaScript כשרת גם כן.
אז זה יצר ממש מגניב מסגרת, כי עכשיו אתה יכול לכתוב
לגיטימי באותו קוד ל הלקוח והשרת.
וכאשר אתה מגדיר את הפונקציות בך שרת, הלקוח שלך יכול לקרוא אותם
אותן פונקציות.
וזה עושה את זה הרבה יותר קל.
בעוד שבעבר, אם אתה משתמש ב-PHP על השרת, JavaScript בחזית
סופו של דבר אתה צריך לכתוב פונקצית PHP ולאחר מכן גרסת JavaScript של
אותו תפקיד לעשות אותו סוג של עבודה.
>> אז לפני שנתחיל, אני רוצה כדי להראות לך הדגמה של מה
מטאור יכול לעשות בשבילך.
אני אראה לך את הדמו, וזה מה תוכל ליצור על ידי
סוף הסמינר זה.
אנחנו פשוט הולכים כאן.
זוהי אפליקציה Leaderboard.
זה באמת מבוסס מחוץ לירושלים מטאור זה נותן לך.
>> המטאור הוא נחמד מאוד, כי כאשר אתה להתקין אותו כחבילה, אתה יכול
בעצם לשחק עם ארבע הדגמות אלה.
וLeaderboard הוא הראשון של ההדגמות הללו.
לאחר הסמינר, אני מעודד את כולכם רק כדי לחקור את ההדגמות האחרות
כי אני חושב שהם ממש מגניבים, ו הם מראים לך את כוחו של המטאור.
>> אז מה זה, זה הוא מתארח בLeaderboard.
זה רק בכנות רשימה של שמות.
ואתה יכול לבחור אנשים.
הם פונים צהובים.
ואז אתה יכול לתת לי אותם חמש נקודות.
ותשים לב שהרשימה היא ממוין, משום שאני נותן יותר לעצמי
ויותר נקודות, אני עכשיו בראש.
אז זה מקום שבו אנחנו מתחילים.
>> ומה אתה יכול לקחת משם מסמינר זה הוא עוד כמה
תכונות אני הוספתי ל Leaderboard.
אנחנו נהיה מכסים איך, כמו גם להוסיף חמש נקודות לשחקן, אנחנו יכולים
למחוק שחקנים, אנחנו יכולים להוסיף שחקנים חדשים, ואנחנו יכולים לבחור איך אנחנו רוצים
כדי למיין אותם.
וכל אלה הם שיחות API קלים מאוד המטאור שמספק לך.
יש לך גם תכונה כאן לאקראי את הציונים.
>> אז מה באמת מגניב על זה הוא למעשה אתם יכולים
כל להיכנס לאתר.
אני אשים את זה בטקסט גדול יותר כאן.
אחד קיצוני להוביל erboard.meteor.com.
וכשאתם תחזרו לאתר, אתה צריך להיות מסוגל לערוך את האתר, ו
כל העריכות שלך יהיה גלוי לכל אחד אחר.
כך שאתה יכול - אתה חבר 'ה כל תוכל להתחבר לאתר?
אז לשחק עם זה.
ללכת ולהתחיל למחוק כמה שמות.
לראות מה קורה.
>> אז אתה רואה שכולם יכול לשחק.
זוהי רק ברירת מחדל של האבטחה מצב למטאור.
אתה רואה שכולם יכול לשנות נתונים אחד של השני.
אל תדאג.
מטאור האם יש ביטחון.
זה מיושם בקלות רבה תכונה, שבו אתה יכול להגדיר משתמשים
ושמות משתמש.
אבל עכשיו, כל מי שמבקר אתר יכול לתת את עצמם כרבים
מצביע כמו שהם רוצים.
אז ככה אני תמיד בגלל זה הוא דרך מהנה כדי להתחיל.
ואז אנחנו רק מדברים על הפרטים, איך
המטאור עושה את זה אפשרי.
>> אז אני הולך לכסות את מה הוא המטאור, ואז אנחנו רק צריכים לכסות את
שני תנאים מוקדמים שCS50 לא כיסה מספיק.
אבל בסוף של המונח, אתה צריך להיות נוח עם שני HTML ו
JavaScript באמת לקבל את הידיים מלוכלך עובד עם מטאור.
ואני חושב שזה פשוט דרך מצוינת עבור אפילו פחות נוח תלמידים לעשות
פרויקטי גמר, כי באמת שהם יכולים להישאר בשפה אחת, והם מקבלים
לראות את השינויים שלהם לעבוד מייד.
>> אז שקופית זו מציגה רק חלק טכנולוגיות עיקריות שהמטאור JS
נותן לך.
מטאור הוא לא טכנולוגיה חדשה בכוחות עצמו.
זה באמת אוסף של כל מיני דברים
יש לנו באינטרנט.
כמו גם ב-HTML, CSS, JavaScript, יש כמה טכנולוגיות כמו Node.js,
וזה מה שמאפשר לך להפעיל JavaScript על גב הסוף עליך
שרת, כמו גם כמה JavaScript ספריות, כמו jQuery, תחתון.
>> כל אלה יהיו מוכרים לי אתה עד סוף הסמסטר.
ואנחנו גם מקבלים לשימוש באתר בשם MongoDB, שהוא באמת
מסד הנתונים פופולריים עכשיו סטארטאפים החדשים אלה.
אתה יכול לחשוב על זה כעל כמו MySQL, אבל זה עובד יפה מאוד עם JavaScript.
ויש כמה טכנולוגיות אחרות כאן ועוד רבים שאינו מופיע ברשימה
שכל הממשק באמת יפה עם מטאור.
>> אני צריך לשים את השקופית הזאת בגלל לפעמים אני מקבל בלבול לגבי זה.
מטאור הוא רק ב-JavaScript.
זה לא PHP.
זה לא Ruby on Rails.
אז אם אתה כותב קוד, אם אתה רוצה לכתוב פרויקט מטאור, אתה באמת
לא יכול להשתמש בקוד רובי.
אתה באמת לא להשתמש ב-PHP.
>> בעוד שנראה כי ההבדלים ב קוד ותחביר לא יכולים להיות ש
שונה, אני רוצה להדגיש בפניך ש מטאור, כל מה שאתה הקוד הוא
רק ב-JavaScript.
וכל מה שאתה מראה ל המשתמש יהיה CSS HTML.
אבל אתה לא באמת משתמש בכל שפות אחרות שאחר
אולי סמינרים לכסות.
מה מטאור גם הוא הוא שרת אינטרנט.
אז גם אם אין לך שום JavaScript, ואתה רק רוצה לשרת
קבצי CSS ו-HTML, מטאור יכול לעשות את זה בשבילך.
>> והנה הקישור שוב הדגמה כי יש לי חבר 'ה
התחיל לשחק איתו.
אבל בואו נעבור ל-HTML.
כמה אנשים כאן יש לי אין לי מושג מה ה-HTML הוא?
אישור גדול.
וזה בסדר גמור לחלוטין.
אתה באמת לא צריך לדעת הרבה על זה בגלל שנעבור על
שימוש מאוד פשוט.
>> זה מה שפשוט דף ה-HTML נראה.
זה יכול להיות כמו שלום, העולם שלך ל HTML, ואילו התחלנו בC עם
שלום, עולם.
אני לא רוצה אותך ללחץ על פרטים של מה-HTML, מה בראש, מה
גוף, מה שהכותרת עושה שם.
אני רק רוצה להדגיש את המבנה, איך יש לך תגים.
וזה בסוגריים זוויתיים.
וזה שבו יש לך מתאריך.
>> אז אולי יש לך את מסמך ה-HTML.
ולאחר מכן תוכל לסגור את מסמך ה-HTML עם קו נטוי הפוך אותו דבר.
ויש לך סוגים של תגים שונים.
ושים לב שהם כולם מתאימים.
יהיה לך כמו תג גוף ולאחר מכן תג גוף קרוב.
ובתוך תג הגוף, שאהיה את התוכן של דף האינטרנט שלך.
אז דף אינטרנט זה הייתי פשוט להציג ברקע לבן וטקסט שחור
שלום, עולם.
האם זה הגיוני?
על אישור.
>> עכשיו אני הולך במהירות לכסות-JavaScript.
במילותיו של TF קודם, "JavaScript היא תכנות הטוב ביותר
שפה כיום בקיומו.
אנשים אחרים ינסו להגיד לך אחרת.
הם טועים. "JavaScript היא די נחמד, ואני אראה לך למה.
>> אז זו הדוגמא הקלאסית שאנחנו מתחילים עם ב C. יש לנו שלום, עולם.
ואתה שם לב שגם אם אתה לכווץ את זה, אתה צריך להיות לפחות שני
שורות קוד כאן.
יש לי כמה שורות של קוד.
ניתן לעשות זאת בצורה פשוטה מאוד.
שורה אחת בJavaScript עם console.log, ואז המחרוזת שלך,
שלום, עולם.
>> עכשיו, למרות שאנחנו עוברים לחדשים השפה JavaScript, כמעט כל
מיומנויות שלמדתם על ידי קידוד ב-C באופן ישיר ניידים.
אז מחרוזות, הרעיון של מחרוזות ב מרכאות כפולות, זה אותו הדבר.
פסיק, זה אותו הדבר.
>> תכונה מסודרת על JavaScript בעצם הוא שאתה
לא צריך פסיק.
זה יכול לנחש שאתה צריך לשים פסיק שם.
אבל שאמרו, אתה צריך תמיד לנסות לשים פסיק שלך שם.
זה נחשב סגנון טוב.
וגם, אין פונקציה העיקרית.
אתה רק מתחיל בחלק העליון של הקובץ ולקרוא שורת דברים אחרים שורה.
>> אז זה מה שנדרש כדי להפוך את שלום ש, תכנית העולם.
ואז אראה שיש לך לעשות שלום ולאחר מכן להפעיל את שלום.
עם JavaScript, זה נחשב שפה לפרש.
מה שאתם צריכים לדעת הוא ש אין החלטות.
>> אין שום הידור.
אתה פשוט להפעיל את הצומת.
וזכור צומת היא התכנית ה יפעל JavaScript שלך על קונסולה,
בקופסה שחורה, ולא באתר.
אז אתה פשוט לתת לו את הקובץ, וזה הולך להדפיס שלום, עולם.
>> אני באמת אעשה הדגמה קטנה של כי בשבילכם ממש כאן.
אז בואו נלך אליי מסוף Node.js.
על אישור.
בואו נעבור לכאן.
אז אני הולך להתחיל צומת.
ואני אראה לך חבר 'ה בסתם שניות איך להשיג את זה
מותקן, אם אתה לא יודע.
תן לי לעשות את זה קצת יותר גדול.
על אישור.
אני מקווה שאתם יכולים לראות.
>> אז אני יכול לכתוב קוד כמו שאני עשיתי לפני בconsole.log.
היי, רוג'ר.
ושים לב שאני לא צריך לעשות פסיק, אבל אז אני מקבל את זה מוזר
דבר לא מוגדר.
טוב, בעצם, שלא לדבר על הדבר לא מוגדר.
דברים שאני רוצה שתשים לב הוא שאתה לא צריך את הפונקציה העיקרית כאן
כדי להתחיל להריץ קוד.
ואין סוף קו נטוי הפוך.
יש כמה תכונות קטנות ש JavaScript יכול לעשות בשבילך.
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: אה, כן.
אני מצטער על זה.
חץ וזה רק אומר שצומת מוכן לפקודה אחרת.
אז אתה יכול לקבל את זה עושה פשוט מתמטיקה, כמו 1 ועוד 1.
ובדיוק כמו ב-C, מתמטיקה אלה סמלים הם בדיוק אותו הדבר.
אני יכול לעשות console.log של מספר.
ואז זה מדפיס שתיים.
JavaScript היא נחמדה במובן זה, כי למרות ששני הוא int,
כמו ב-C, אם אתה לא printf עם שני, היית מקבל שגיאה.
>> אבל JavaScript יודע, הו, אתה הדפסת משהו.
אני הולך צריך מחרוזת.
אז תן לי להמיר כי שני למחרוזת בשבילך.
ואתה גם יכול לעשות כמה דברים מוזרים כמו היי ולאחר מכן עוד שתיים.
זו היא רק דוגמא נוספת כיצד שתי ניתן להמיר שם גם כן.
>> אז עם זה את הדרך, בואו רק לכסות קצת יותר ב-JavaScript.
אז ב-C, יש לנו סוגים.
כל פעם שאנחנו יצרנו משתנים חדשים, יש לי להגיד זה שזה * או char
מחרוזת במקרה CS50.
או אם היו לנו מספר עשרוני, היו לנו לומר לצוף.
אם היינו זקוק בוליאנית, היו לנו לומר ב.
ואז ברגע שיש לנו משהו ש היה ב ', זה היה צריך להישאר בול.
אנחנו לא יכולים לשנות אותו באורח פלא ל int, אלא אם כן שכתבנו ב
סוגריים, int של b.
>> ב-JavaScript, אין סוגים.
אתה רק חושב על זה כעל var.
וvar הוא איך אתה יוצר סוג חדש.
אז זה יכול להיות var של להיות מחרוזת, n var להיות לצוף,
וvar b להיות אמיתית.
ועוד דבר אחד שאתה לא יכול לעשות ב-C הוא עכשיו אני יכול לומר, אחרי זה קו, ב
שווה למספר שלם.
וזה עובד בסדר גמור.
ואילו ב-C, הוא הייתי אומר כמו המספר השלם שלך הוא לא בול.
אני לא יכול לעשות את זה בשבילך.
או [לא ברור] היה זורק את שגיאה.
>> ואני יכול לחזור במהירות לצומת ו מראה חלק מיכולות ש.
אז אני יכול להיות var.
קורא לזה "אפל". אז עכשיו כשאני מדפיס, אני מקבל את המחרוזת שלי, 'אפל'. אבל אני יכול
גם עכשיו אומרים שווה 3.
ושים לב שאין שום שגיאה.
ועכשיו שווה 3.
כל שאלות עד כה?
כן.
>> קהל: חכה, כך console.log הוא בעצם printf, נכון?
>> רוג'ר ZURAWICKI: Console.log הוא printf שלך.
>> קהל: כן.
אז איך זה שאם אתה פשוט להקליד בשמונה או, מה עושה [לא ברור] כי
[לא ברור]?
>> רוג'ר ZURAWICKI: נכון.
אז זה -
הדברים בירוק מקבל מודפסים במסוף.
ומה שנראה הבא הוא כאשר אנו עוברים לאינטרנט
דף, אנחנו לא עושים -
JavaScript תהיה בעל HTML תבנית, שאני אכסה ב
חלק מטאור של הסמינר.
וזה שבו אתה יכול להגיד, תן לי את הערך של, וזה יהיה לשים ב
האתר שלך.
כי בכל דפדפן אינטרנט למעשה יש קצת מסוף.
ואם אתה נראה מאוד בזהירות, אתה הייתי לקבל קצת מידע, כמוך
printf שמופיע שם עם כל דף אינטרנט שאתה טוען.
>> קהל: איך הגעת למסך הפגז?
>> רוג'ר ZURAWICKI: אז יש פקודה נקרא צומת, והוא מגיע עם מטאור.
אז רק אני אפסיק לצאת משם.
צומת היא התכנית ה פועל ב-JavaScript.
אם אתה הולך לmeteor.com, אתה ניתן להתקין את המטאור, ו
מטאור מגיע עם צומת.
בגלל המטאור הוא רק אוסף של כל חבילות תוכנה אלה.
כשאנחנו מגיעים לדוגמא שלנו, אעשה זאת ללכת לכולם באמצעות התקנה
מטאור, ואז אתה יכול לשחק עם צומת בעצמך.
אוקיי, נהדר.
>> אז עוד תכונה נהדרת על עבודה עם JavaScript היא לולאות הן אותו הדבר.
פחות או יותר בדיוק אותו הדבר.
ללולאות, בעוד לולאות, לעשות תוך לולאות, אם אחר.
זה הכל אותו הדבר עם הפלטה.
זה אותו התחביר.
במקרה של ללולאה, קטן פירוט שאתה צריך לשים לב
להיא במקום int i שווה 0, יש לנו לומר שאני var שווה 0.
אבל זה בגלל שאחד מהמשתנים סוגים שדיברנו עליו קודם לכן.
>> שים לב שprintf הופך יומן, console.log.
ואנחנו לא צריכים לעשות אחוזים p n הלוכסן האחורי ולאחר מכן לעבור באני.
אתה רק יכול להגיד שאני.
וזה יהיה להדפיס את המספרים מאפס עד ארבעה.
אם אתם רוצים לנסות את זה, כי אתה הביא את נקודה טובה.
אם אתה רוצה להפעיל את הקוד הזה עליך דפדפן שלך, אני הייתי ממליץ לי
כולם פותח את Google Chrome.
Google Chrome או כל דפדפן אינטרנט באמת, אבל אני אוהב את של Google Chrome
כי זה מאוד סטנדרטי.
>> אתה יכול ללכת ל, אני מאמין, אם אתה צודק לחץ על כל אתר אינטרנט, רק ב
חלל לבן, תראה אפשרות נקרא בדוק רכיב.
זה בדרך כלל את האחרון.
וכשאתה לוחץ עליו, אתה צריך לקבל דבר לעומקו מופיע כאן.
תן לי להתקרב לכאן.
ויש לנו כמה כרטיסיות כאן.
אחד שאכפת לך הוא קונסולה.
>> ואת זה הוא קונסולת JavaScript כי עכשיו אתה יכול לעבוד איתו.
גדול.
אז אני יכול להקליד באותו חומר אני מקליד לפני בצומת.
ועוד אחד אחד הוא שתיים.
var שווה "אפל".
ואז הייתי להדפיס, והוא 'אפל'.
אז בכל דפדפן אינטרנט, פיירפוקס, כרום, ספארי, לא משנה מה אתה משתמש, כמו
כל עוד יש לך גישה לJavaScript קונסולה, אותו הסוג של
קוד שאני רץ בצומת לך יכול לרוץ בקונסולה שלכם.
>> קהל: [לא ברור]?
>> רוג'ר ZURAWICKI: כיצד להגיע לקונסולה?
יש לך זכות לחץ על שטח ריק בעמוד, ואז אתה הולך ל
בדוק רכיב.
אז בעצם, אני רוצה שחבר 'ה רק כדי לוודא שאתה יכול
בדוק רכיב בכרום.
ותראה בעת ההקלדה בחלק קוד לתוך המסוף
שהוא פועל כמו שצריך.
אל תהסס לשאול שאלות אם משהו לא ברור כאן.
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: כל סוג, מימין.
יש רק סוג אחד לכל משתנים ב-JavaScript.
וכאשר יש לך להכריז משתנה, אתה אומר var.
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: כן.
היא עושה, אבל ב-JavaScript, זה מאוד חכם על הקצאת זיכרון.
אין malloc.
אין בחינם.
אז אתה לא צריך לדאוג בקשר לזה.
זה עוד תכונה נחמדה ש JavaScript מספק לך.
>> אז אני רוצה להמשיך הלאה.
האם זה יהיה בסדר?
על אישור.
גדול.
>> קהל: אני רק מתקשה מציאת [? בדוק רכיב. ?]
>> רוג'ר ZURAWICKI: נראה כל כך ספארי קצת שונה, אבל אין לך
יש לי כרום או פיירפוקס?
אלה הם קלים יותר אלה לעבוד איתו.
ולפרויקטים שלך, אני ממליץ דבק עם דפדפן אחד, כי
אתה תקבל הרבה באגים כמעט כי בכל פינוקים דפדפן
JavaScript HTML קצת אחר.
אז אני חושב שהחיים שלך יהיו הרבה יותר קל אם אתה מקל על כרום משום
הוא זמין בכל המחשבים.
וזה דפדפן פופולרי למדי.
בסדר?
>> אז הנושא הבא שאנחנו צריכים לכסות בJavaScript -
אני מצטער על העיצוב כאן.
הייתי צריך למתוח את השקופיות כדי להתאים מקרן המסך הרחב.
אבל הייתי עכשיו רוצה לדבר על איך אתה עושה את הפונקציות.
ב-C, יש לנו להכריז כל פונקציה.
כמו int להוסיף, וזה לוקח int לתוך x, וy int, ולאחר מכן נוסיף אותם
ולהחזיר אותו.
>> ב-JavaScript, פונקציות הן למעשה עוד סוג משתנה.
אז אנחנו פשוט אומרים var להוסיף ו זה שווה פונקציה.
פונקציה שלוקחת את x ו-y.
ומה הפונקציה שעושה?
זה מחזיר את X ועוד Y באותו מדויק תחביר כמו בג ואתה שם לב שב
JavaScript, אתה לא תגיד לי מה פונקציה מחזירה כי מאז
אין לי משתני סוגים בכל מקרה, זה זה לא באמת פרודוקטיבי, אני מניח,
שמפרט את כולך סוגים בפונקציות שלך.
ואז כשאתה קורא לפונקציה, זה בדיוק באותו התחביר כמו C. אתה
רק לעבור בשני הטיעונים שלך.
אני רוצה לנסות את זה בצומת שלי.
האם אני יכול לשנות את השקופיות?
>> קהל: [לא ברור].
האם אנחנו מקבלים עותק של השקופיות?
>> רוג'ר ZURAWICKI: כן.
אז בואו נחזור לצומת.
על אישור.
אז אני אגיד את תוספת var שווה פונקציה.
לוקח x, y לוקח.
ואז היא יודעת ששל שמירה על לא הושלם.
אז בצומת או בקונסולה שלך, תוכל להבחין נקודת נקודת נקודה.
אז אתה יכול לשמור את הקלדת הקוד שלך.
ועכשיו אני אגיד את y בתוספת x התמורה.
ולאחר מכן לסגור את הסד.
וברגע שאני סוגר את הסד, זה רואה כי ההצהרה נגמרה.
>> ועכשיו אני יכול לומר להוסיף אחד ושניים.
ואני אביא את שלוש החוצה.
שימו לב שאם אני רק לא להוסיף, זה אומר לי שזה פונקציה.
ועוד דבר אחד, רק כדי לשים לב הוא אם לתת לו את המספר הלא נכון של
טיעונים, זה יעשה.
זה יפעל, אבל אתה עלול לקבל כמה תוצאות ממש מוזרות.
כמו סוג של ערך אשפה, אתה יכול לחשוב על זה.
אז בבקשה להמשיך ולנסות זה בדפדפן שלך.
>> אוקיי, אז בעניין של זמן, אני עכשיו תעבור לתכונות הבאות ב
ב-JavaScript.
אז שדיברנו על פונקציות.
דברנו על לולאות, אם יותר מדי הצהרות.
התחביר הוא אותו כמו C ומשתנים.
ועכשיו אני רוצה לדבר על מערכים.
אני מצטער שהשקופיות יש לי קצת מנותק.
אבל למעשה, בחלק הראשון, כל מה שאתה צריך יעבוד.
>> אז יש לנו סוג אחר עבור משתנים נקראים מערכים.
ואנחנו משתמשים בסוגריים מרובעים כדי לציין אותם.
כך שבדוגמא הראשונה, עיבוד var, מערך ריק.
זוהי הרשימה הריקה, כך שמערך המכיל לא אלמנטים.
ואתה גם יכול להיות מערך עם שלושה מיתרים.
ב-C, כל אלמנט במערך שלך היה צריך להיות אותו הסוג.
>> אבל בגלל בJavaScript יש רק סוג אחד, מערכים בעצם יכולים
יש סוגים שונים של ערכים.
כמו כאן, יש לנו מערך עם לצוף, bool, וint.
ככה אתה מקבל באורך של מערך, אתה בעצם לא צריך גודל הבהרה
או משהו.
אתה פשוט אומר מערך ו אז נקודה אורך.
ואורך נקודה זו, אתה יכול לחשוב עליו זה כמו סוג של struct, איך כל
יש מערך שדה, משתנה נוסף בתוכו נקרא אורך, אשר
עוקב אחר כמה זמן המערך שלך הוא.
>> אז אני הולך רק במהירות כדי להיכנס צומת ולהראות לכם את אותו הדבר.
אז אני יכול להיות מערך.
זה יכול להיות הרשימה הריקה.
והוא יודפס לגבות רשימה ריקה.
גדול.
עכשיו אני יכול לומר שהמערך יש 1, ו2.3, ואמיתי.
אז כל סוגים שונים.
ואתה שם לב שזה עובד בסדר גמור.
המערך שאחזור תומך כל הערכים שנתתי לו.
>> אם אני רוצה לקבל את האלמנט הראשון של המערך, התחביר הוא למעשה
אותו הדבר כמו בג אתה יכול לומר מערך אפס.
ואתה מקבל אחד.
אני יכול לומר את אותו הדבר עבור מערך שני, ואני מקבל את אמת.
אם אני עושה משהו מחוץ למערך, JavaScript היא שפה בטוחה
כי אני לא אקבל אשמת צינוק.
אני אביא לא מוגדר.
>> וזה לא מוגדר, אתה סוג שהוא יכול מלחשוב על זה כריק.
אבל זה יכול להיות ממש מעצבן כאשר אתה קוד, כי אתה צריך לבדוק כי
כמעט כל דבר שאתה עושה, אתה לעבוד עם אינו מוגדר.
ואנו רואים כמה דוגמאות של זה כאשר אנו עובדים במטאור.
>> למרות שהמערך ארבעה הוא לא מוגדר, אני יכול להקצות אותו ערך.
אז אני אגיד את זה שווה לאחד.
ואז אם אני הולך למערך, אני יש הערך המוסף לשם.
ושים לב שהמערך שלושה, שגם לא היה מוגדר, נשאר לא מוגדר.
אז עכשיו יש לי מערך עם חור באמצע.
אבל אם אני מודפס מערך ארבעה, הייתי מקבל אחד.
אם אני עשיתי את המערך שלושה, אני מקבל לא מוגדר.
>> אז תכונה נחמדה כי JavaScript מאפשר לך לעשות הוא שרשימות יכולה
לשנות את הגודל.
מערכים, מערכים להיות רשימות, הם משנים את גודלם.
וניתן לציין כל מיקום חלק פנימי שלהם.
ויהיה מלאים כל הפערים עם ערכים מוגדרים אלה.
>> אז שדיברנו על מערכים.
עכשיו, הדבר האחרון שאני רוצה לכסות ב JavaScript, וזה חשוב מאוד
להבנת הקוד ש אני הולך להראות לכם,
הולך להיות אובייקטים.
ואובייקטים הם מונח ב--
בעצם, הם נמצאים ב שפות תכנות רבות.
וכל אחת משפות תכנות אוהבת לחשוב עליהם קצת אחר.
>> אבל אני חושב למטאור, טוב אנלוגיה היא struct C.
ב-C, אם ברצוננו למצוא את struct סטודנט, היינו צריך לציין את כל
דברים בתוכו.
אז זה צריך להיות שם.
זה חייב להיות בשנה.
זה חייב להיות מין.
אבל אנחנו גם צריכים לתת לו את סוגים של כל הדברים האלה.
>> ועכשיו שיש לנו עובש זה עבור struct בשם סטודנט, יכול להיות לנו
struct החדש, ואז אנחנו יכולים באופן ידני לומר את מה שכל אחד מהשדות.
וזה שבו אנו משתמשים בשם נקודה, שנה הנקודה, נקודת מגדר.
ואז אנחנו פשוט, בשורה האחרונה של קוד כאן, אני פשוט מדפיס את
שמו של תלמיד struct.
>> בעולם JavaScript, יש אין דבר כזה תלמיד struct.
אתה לא ליצור מבנה שנקבע מראש.
אתה בעצם רק, בסוגריים אלה, אתה אומר את מה שהוא הכל.
וזה הסימון המוזר הזה עם מעי גס ולאחר מכן הפסיק, אבל אתה
מתרגל לזה די מהר.
>> וזה בעצם ממש קל, דרך גמישה של ממש
מניפולציה אובייקטים.
אתה שם לב שאם אני רוצה לקבל עכשיו שם מים, אני פשוט עושה את s.name.
האם יש שאלות על זה?
בדרך כלל זה היה מאוד מבלבל נושא כאשר אנחנו מציגים לאנשים
ב-JavaScript.
אני אעשה כמה דוגמאות לכך בצומת.
כן?
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: אז אתה עושה יש, למשל, מספר
משתנים מסוג זה.
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: אישור.
אז אני מניח שהדרך היית הולך על זה היית שם את האובייקטים במערך,
ועכשיו יהיה לך מערך של אובייקטים.
האם זה עונה על השאלה שלך?
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: כן.
S הוא אובייקט אחד.
אז אנחנו יכולים ללכת לצומת ורק לשחק קצת.
>> קהל: [לא ברור]?
>> רוג'ר ZURAWICKI: אה, אוקיי.
אז אם אתה שואל מה כיתות, מטופלים כיתות בצורה שונה מאוד,
ויש להם תכנית ממש מוזרה אב טיפוס שנקרא, שאתה לא
צריך לדעת על.
אין דרך קבועה לעשות את זה.
אז אם אתה רוצה ליצור מרובה, פשוט יש להם תפקיד סוג של
או משהו.
לך ליצור פונקציה משלך.
ואתה תחזור אובייקט.
זה יהיה הכי קל דרך לעשות את זה.
האם זה הגיוני?
על אישור.
גדול.
אז ברגע שיש לנו הבנה של JavaScript אובייקטים, שהם -
אה, כן.
>> קהל: [לא ברור]
למשל, מה ההבדל בין "רוג'ר" במרכאות כפולות לעומת
[לא ברור] עם מרכאות בודדות.
>> רוג'ר ZURAWICKI: אישור.
אז זה ב-C, יש לנו את אחת ציטוטים המייצגים את התווים, וכפול
ציטוטים המייצגים מחרוזות.
JavaScript זורק למעשה זה משם כי אתה יכול להיות עם מחרוזות
ציטוטים יחיד או כפולים, ויש אין דבר כזה תו אחד.
אבל אם אתה רק העתקת אותו קוד C, JavaScript היית
מתייחס לזה בסדר גמור.
וזו הסיבה שאני מתייחס אליו כ--
זו הסיבה שאני ממש יכול נמל הקוד במובן הזה.
>> ואני רוצה להראות לך דוגמא של אובייקט מורכב יותר.
אז אתה יכול להבחין כי אובייקט אחד יכול להיות מחרוזות כערכים.
יכול להיות שזה עוד רשימה של ערכים.
זה היה יכול להיות רשימה של אובייקטים כערכים.
באמת אין גבול לזה.
אז הנה, זה רק הדגמה טובה איך אתה יכול לקבל הרבה
סוגים שונים קורה כולם באובייקט אחד.
האם זה הגיוני?
>> עכשיו, אתה יכול להיות גם מערכים של אובייקטים.
וכאן הוא די דומה למה שאתה שאל, אם אתה יכול לקבל את חפצים של
אותו הסוג.
אבל הבעיה היא, שאין קבוע פורמט לאובייקטים ב-JavaScript.
אז אתה צריך לציין אותם בעצמך.
ואתה צריך לוודא שהם אחידים.
אז הנה, כשאני יוצר אובייקט, יש לי לוודא כי לכל אחד יש
שם, ולכל אחד בבית.
>> ואז יש לי מערך של אלה, וזה יכול להיות הבית שלי.
ואז כאן אתה יכול סוג של לראות את ללולאה קורה.
ללולאה להיות רק באמת נפוצה דרך לעבור על מערך
ב-JavaScript.
שים לב שדפוס זה דומה מאוד לשווה ערך C, שבו אתה
יש לי int i שווה לאפס. אני הוא פחות מ האורך.
ואז אני ועוד תוספת.
>> זה כמעט אותו הקוד, פרט לכמה פרטים.
אז האם כולם מבינים מה הוא אובייקט?
רק יחשוב על זה כמבנה C.
ואת אופן גישה לשדות הוא רק עם הנקודה.
וכל עוד אתה זוכר איך להשתמש בנקודה, אתה תהיה בסדר.
>> אוקיי, אז עכשיו כולם יכול לקרוא קישור זה?
זהו הקישור לפרויקט.
האם מישהו נתקל בבעיה רואה את הקישור?
אוקיי, בואו נשנה את זה אז.
זה לא -
כן, זה כנראה הדרך הקלה ביותר לעשות את זה.
גדול.
>> אז אם אתה הולך לאתר הזה, לא צריך להיות כמה הוראות שאני
תלכו על על איך אנחנו יכולים להתקין מטאור ולקבל הריצה פרויקט מדגם שלנו.
אני רוצה לעשות לכולם יש בטוחים הקישור למטה לפני שאני עובר.
האם אני יכול להמשיך הלאה?
אוקיי, נהדר.
>> אז הנה אני כאן באתר.
תוכל להבחין בקובץ readme, יש לנו כמה הוראות כיצד
כדי לקבל להגדיר ה.
אתה צריך להיות או בCS50 מכשיר או רק על מק.
Windows לא תעבוד.
אבל בעיקרון כל דבר שהוא לא Windows צריך לעבוד עם אלה
הוראות בסדר גמור.
אבל אני יכול לעשות את זה קצת גדול יותר גם כן.
>> אז תוכל לרוץ הראשון זוג פקודות.
החבר 'ה האלה פשוט יתקין מטאור.
אני יכול להיכנס למסוף שלי.
ואם אני מפעיל את אותו הדבר עכשיו, כבר יש לי את זה מותקן.
אז זה קצת קצר יותר.
זה עלול לקחת קצת יותר זמן בשבילכם.
אבל אני רוצה לוודא תחילה שיש לנו ריצה מטאור.
לאחר המטאור התקין, אתה צריך להיות מסוגל לקבל את הצומת במסוף.
>> קהל: הם שואלים לסיסמא.
>> רוג'ר ZURAWICKI: זה יהיה שלך סיסמא משתמש, אם אתה על מק.
זה פשוט צריך רשות לשנות כמה קבצי מערכת.
אז השאלה הייתה, אם הוא מבקש ממך סיסמא, זה פשוט שואל אותך
עבור שם המשתמש והסיסמה שלך כאשר אתה נכנסת ל- Mac שלכם.
וזה, כך שאתה יכול לשנות את קבצי מערכת.
>> וכשאתה מוכן, אתה יכול לעבור לצעד הבא, שיעתיק
קוד לדוגמא יש לי מאתר.
ותקבל ספרייה חדשה בך ספריית הבית בשם leaderboard, ו
אנחנו יכולים להתחיל לעבוד משם.
אז רק אני העתקה והדבקה אלה פקודות למסוף שלי.
ובשבילי, אני כבר לשכפל אותו.
אז רק עכשיו אני יכול לעבור לleaderboard.
ואני צריך כמה קבצים שם.
כל שאלה?
>> קהל: [לא ברור] לא עובד.
>> רוג'ר ZURAWICKI: אה, אתה עלול צריך git המותקן גם כן.
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: סליחה?
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: אה, אוקיי.
על אישור.
זה בגלל שאולי אתה צריך להיות מחובר כדי GitHub לקבל קישור זה.
אם אתם יכולים לראות את זה, הכי קל הדרך לעשות את זה ואז הייתי אומרת הוא
להוריד את הרוכסן.
וזה יהיה פשוט להוריד את כל הקבצים.
ואז ברגע שאתה שם אותו בך להוריד או תיקיית הבית שלך -
אני ממליץ לשים את זה בך ספריית הבית כך שכולנו יכולים
להפעיל את אותן פקודות.
כל עוד יש לנו את הקבצים, מה שנעשינו תוכל להתחיל לעבוד איתם.
תודיע לי אם אנשים שיש בעיה בהורדת הקבצים.
>> קהל: בספריית בית, אתה מתכוון -
>> רוג'ר ZURAWICKI: אז ספריית הבית היית להיות ג'ון הרווארד, אם אתה נמצא ב
מכשיר CS50.
כדי להגיע לספריית הבית שלך, פשוט להקליד בג
>> קהל: [לא ברור]
מכשיר CS50 [לא ברור].
>> רוג'ר ZURAWICKI: כן.
אתה רוצה להפעיל את הפקודות במסוף שלך.
>> קהל: [לא ברור].
יש לי שגיאה שאומרת שלא כזה קובץ או ספרייה.
>> רוג'ר ZURAWICKI: אנחנו יכולים לקחת מהירים לשבור ורק לוודא כי
לכולם יש להתקין מטאור, ואני פשוט ללכת לנסות לעזור לאנשים לצאת.
אנא נסה לעזור אחד לשני, אם אתה מפעיל בבעיות.
סליחה, כן.
האם שניכם במכשיר?
>> קהל: כן.
יש לי RISA
>> רוג'ר ZURAWICKI: אישור.
אם תחזרו לאתר, ללכת לגלול עד למעלה.
ויש HTTPS זה.
>> קהל: העתק את זה?
>> רוג'ר ZURAWICKI: כן.
ואז אתה רוצה הקלד בשיבוט git.
אז אם אתה לוחץ בקרה -
>> קהל: כאן?
ולעשות [לא ברור]?
>> רוג'ר ZURAWICKI: G-I-T.
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: Git ולאחר מכן לשכפל.
כך שזה מאוד דומה לפקודתך היה מעל, אבל את כתובת האתר השתנה.
אז לפני שזה היה זה, עכשיו זה זה.
תן לי לעדכן -
כן.
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: זה שהורדת.
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: הו, אז זה לא לשכפל בצורה נכונה.
אני אסדר את זה.
יש שגיאה בניסיון כדי להוריד את הקבצים.
תן לי לעדכן את הפקודה בשבילכם אז אני יכול לוודא שזה יעבוד.
אני מצטער על זה.
זה צריך להיות אותו הדבר עבור מקינטוש או מכשיר CS50.
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: אני כבר מעודכן הפקודה למספר שתיים, אם
אתה לרענן את הדף.
ועם זה, כתובת אתר, אתה צריך להיות תוכל להוריד את הקבצים.
>> קהל: אז אם אנחנו עדיין הורדה [לא ברור].
>> רוג'ר ZURAWICKI: אם אתה עדיין הורדת מטאור?
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: כן, אם אתה רוצה לפתח ב-Mac שלכם.
אבל אתה צריך את מפתח Xcode כלים מותקנים.
בדקתי בפקודות אלה בCS50 מכשיר, כך שאני יכול להבטיח
שזה יעבוד.
כן. תן לי ללכת ולעזור לך.
>> קהל: [לא ברור].
אני נותן את הסיסמה שלי.
זה מק.
ואז אני עושה [לא ברור].
>> רוג'ר ZURAWICKI: אישור.
הייתי מנסה לרוץ את כל הפקודות אך ורק בטרמינל מכשיר CS50.
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: הייתי לקבל את זה עובד ראשון במסוף, על
מכשיר CS50, ולאחר מכן מסוף מק.
>> קהל: אז אם אתה עושה את זה בCS50 מכשיר כמו זה, [לא ברור].
>> רוג'ר ZURAWICKI: אני רוצה לעבור ב, אבל אם אנשים שיש עדיין
מתקשה להגדיר את המטאור, קווין הוא יותר אשמח לעזור לך החבר 'ה בחוץ,
קווין בחולצה האפורה.
מה שאנחנו צריכים הוא שאנחנו הולכים הפעל את הפקודה האחרונה, מספר שלוש, ב
הטרמינל שלנו.
כאשר אנו עושים זאת, אנו מפעילים מטאור.
>> ואתה צריך -
הו, יש לי כבר ריצה מטאור.
אז זה לא הולך לתת - תן לי פשוט לסגור המטאור האחר שלי.
כאשר אני מפעיל מטאור, אתה עכשיו צריך לראות את זה -
אתה צריך לראות את הספרייה הנוכחית כי זה משרת.
ועכשיו זה הולך לומר השרת פועל על http://localhost.
זה את כתובת האתר שאתה רוצה לשים בדפדפן האינטרנט שלך.
>> ועל כתובת אתר זה, אתה צריך להיות מסוגל לגשת leaderboard קטן ונחמד.
אז שם לב שזה על localhost, מה שאומר שאם אתה עושה את כל
שינויים, אתה לא הולך ל לראות את השינויים של זה.
ואילו באתר האינטרנט שלי הראיתי לך בהתחלה, אנחנו יכולים לקבל
השינויים של כולם, כי כולם היה גישה לאותו אתר.
>> אז תן לי פשוט ללכת ל[? מילה?]
3,000.
אז אתה אמור להיות מסוגל רק כדי לאשר כי את הפונקציונליות עובדת.
באפשרותך לבחור אנשים שונים, ו אתה יכול לתת להם נקודות שונות.
אז אני נותן נקודות למישהו.
ניתן גם לראות כי הם עולים בדרגה.
>> עכשיו, בעניין של זמן, יש שלוש תכונות שיש לי
יושם.
ואנחנו הולכים ליישם את המחיקה משתמשים כתכונה הראשונה שלנו.
אבל לפני שאנחנו עוברים, הם יש שאלות?
היה לך את היד שלך.
כן?
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: האם אתה יכול לבדוק המטאור שמותקן?
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: מארח מקומי 3,000?
ואתה במכשיר CS50?
אני יכול לעשות -
אתה לא צריך להיות במקינטוש.
זה יעבוד במכשיר.
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: בנורמלי דפדפן אינטרנט, כן.
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: האם ריצה מטאור?
אז בסדר, יש הבדל כאן.
אם אתה מפעיל אותו ב מכשיר, שאתה צריך לעשות
localhost בתוך המכשיר.
אם אתה מפעיל אותו ב-Mac שלכם, כמו שאני, אז אני יכול לעשות
Mac-Google Chrome שלי.
אבל אם אתה משתמש במכשיר CS50, אתה צריך לעשות הכל
במכשיר.
אז אתה צריך להשתמש ב-Google כרום במכשיר.
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: זה עדיין לא עובד?
>> קהל: [לא ברור].
>> רוג'ר ZURAWICKI: אז רק כדי לחזור, איך אתה לגשת לאתר האינטרנט של החברה.
יש לך כתובת אתר כאן על localhost 3,000.
אם אתה במכשיר CS50, אתה צריך לפתוח CS50
מכשיר של Google Chrome.
ובש-Google Chrome בתוך מכשיר, אתה יכול להקליד את כתובת אתר ש,
ואתה צריך לראות את leaderboard.
אז אני הולך רק כדי לדחות את זה לצד כאן קצת.
ועכשיו אני הולך לפותחי עורך טקסט לכאן.
אז תן לי רק לוודא כי הקוד הוא בסדר.
על אישור.
גדול.
>> אני רוצה ללכת דרך החברה הקוד קצת.
והקובץ הראשון שהייתי רוצה להתחיל עם IS leaderboard.html.
אתה תהיה מסוגל לקבל את הקוד הזה אחרי הסמינר, ולכן אני רק רוצה להראות
לך על המחשב שלי מה קורה.
אז אני מקווה שכולם יכול לראות את זה.
אז בתחילת הקובץ מאוד, אנחנו יש לנו את הראש ואת הכותרת, אשר
דומה למה שראינו בכל מסמך HTML.
ואז אנחנו הולכים לי תג הגוף כאן.
>> מה שנבחרתי הוא עיקרי גוף, בעצם מה
הולך לקבל מוצג.
אבל יש כמה שאינו HTML חדש דברים, וזה ב
סוגריים משולשים כפולים.
ואלה הם תגי תבנית.
אז אתה תראה כאן סוגר זה leaderboard החדש סוגר.
וזה סוג של - חושב על זה כקורא פונקציה עבור ה-HTML.
>> זוהי גרסה מיוחדת של HTML.
זה הגרסה שהמטאור משתמש, אשר זו הסיבה שאתה יכול להציג שונה
דברים, כגון leaderboard שמות וכפתורים.
אבל leaderboard אומר לך ללכת ל תבנית עם שם leaderboard.
אז תבנית אינה מקבלת מוצגת על ידי עצמו, אבל זה פונקציה, כך שזה
יקבל בשם.
ואתה מחליף בכל זה קוד כאן לleaderboard.
>> החלק המעניין של leaderboard כאן הוא רק השולחן הזה.
אם אתה פשוט לקרוא אותו, לקרוא את הקוד הזה בקול רם, זה צריך להיות אינטואיטיבי
בגלל leaderboard, כל מה שאנחנו יש כאן הוא שולחן.
דברים ברמת זיהוי זה שאתה לא יודע צריך לדאוג.
רק יודע שיש כותרת טבלה.
זה thead זה.
>> והוא מוצא את שמו וציון.
כל התגים האלה, כמו thtable, thead, אתה פשוט תלמד כמו שאתה הולך יחד.
זה לא חשוב, כי אתה לשנן אלה, כי רק אתה יכול לגשת לכל
הפניה באינטרנט.
או עד סוף הסמסטר, אלה פשוט יהיה מוכר מאוד איתך.
>> לאחר הכותרת של הטבלה, חלק שאני רוצה להסב אותך
לב הוא תג h זה.
בגלל שזה בסוגריים מרובעים כפולים, זה תבנית.
אז זה אומר לכל אחד מהשחקנים, כל מה שהשחקנים, שיש לנו
להציג אותו.
ואנחנו הולכים לתבנית של השחקן.
>> אם אנחנו לגלול למטה קצת יותר -
אני מקווה שכולם יכול לראות את זה.
יש לנו את תבנית השחקן.
ותבנית זו בעצם מגדירה תא בטבלה, שבו אתה מכניס את השם
פה והציון.
התקרבות החוצה עכשיו, אנו יכולים לראות שנתח זה של קוד -
וזה היה השחקן שלנו שם למטה -
מגדיר אחד של תאים אלה.
כל דבר שאני לוחץ הופך להיות צהוב.
>> דרך פשוטה שאני יכול לשנות את זה עכשיו.
ודא מטאור עדיין פועל.
מטאור צריך להיות תהליך שרת, אז אתה פשוט להשאיר אותו
פועל בעת פיתחה.
בואו נגיד שאני רוצה לשנות כל השמות או הציון.
ואני הייתי אומר שאני הולך כדי להוסיף נקודות כאן.
אז השינוי שעשיתי כאן היה, במקום רק ציון, אני
להוסיף נקודות ציון בחלל.
>> אני הולך להקטין את התצוגה, ואני הולך להציל את התיק שלי.
ואחרי שאני שומר את הקובץ שלי, אני צריך כדי לוודא שהמטאור פועל.
מצטער על זה.
אני רוצה להראות לך עריכות נעשו בזמן אמת.
אז אני רק לשנות חלק מטקסט.
לחץ שחקן.
אני שם את זה בכל כמוסות.
וזה צריך להיות שאם זה עובד כמו שצריך, כאשר אני שומר את זה, זה
יעדכן.
>> אה, אני חושב שעכשיו הבעיה היא לא במדריך הנכון אני.
על אישור.
אני מצטער על זה.
אז הנה, מה שאתה שם לב הוא השינוי שלי עבר.
עכשיו אומר שאני רוצה לבטל את השינוי.
אני רוצה לחזור למה שהיה לי.
אני רק הולך לסוג זה בדרך כלל.
לחץ שחקן.
>> ברגע שאני שומר אותו, אתר מרענן בשבילי.
ואני רואה את השינוי שלי על האתר באופן מיידי.
זוהי תכונה באמת מועילה בניפוי כי עכשיו
לא צריך אני -
כאשר אנו כותבים קוד C, לא רק שאנו יש לשמור את הקובץ, אבל היו לנו כדי
להפוך אותו ולאחר מכן להפעיל אותו שוב.
המטאור הוא מאוד נחמד, כי שלא כמו C, ברגע שאתה לחסוך HTML או
JavaScript קובץ, השינוי מופיע באופן מיידי.
>> שאלה אחת היא, בתבניות אלה, איך אני מקבל ערכים כמו נגנים
או בחר שם?
אם אני להתקרב כאן לתוך הקוד שלי, אני רואה את זה לכל שחקנים.
אז התבנית יודעת כי יש לי שחקנים בדרך כלשהי.
והוא יודע שיש שם שנבחר.
מאיפה זה בא?
שמגיע מ- JavaScript.
>> ואם אתה הולך לleaderboard.js, זה קובץ, עכשיו כשאני הולך לכאן, יש לנו
כמה פקודות מוגדרות.
זהו תחביר מטאור מיוחד.
שים לב שאתה לא צריך VARs או משהו.
אבל אלה רק structs על structs על structs או אובייקטים אלה.
וכל מה שאני מגדיר הוא את התבנית קרא leaderboard.
>> Leaderboard צריך לקבל קרא דבר שחקנים.
ומה הוא שחקנים?
זה כל מה שביטוי זה חוזר.
ומה שם שנבחר?
זה חלק מקוד יותר.
הפרטים של הקוד שיהיו לכסות קצת מאוחר יותר.
אבל עכשיו אני רוצה שתבין כי בקוד זה, אנחנו לוקחים
שחקנים, ואנחנו נותנים לו ערך.
במקרה זה, מדובר בפונקציה שמקבל להורג.
כדי שנוכל לקבל את התמורה בחזרה כאשר אנו מפעילים את הפונקציה.
זהו יומן.
האם זה הגיוני?
>> אני יכול לשנות את הדרך שזה יסודר.
הנה, יש אובייקט כזה.
ומה זה אומר שאני הולך למיון על ידי ציון יורד ראשון ו
אז שם עולה.
אם אני משנה את זה לאחד, זה הולך כדי למיין עולה ציון.
אז אפס צריך להיות בחלק העליון.
וכשאני להתקרב לאתר האינטרנט שלי, אנחנו עכשיו רואה שהאתר מעודכן.
והציון הוא לעלות.
>> הפונקציה הבאה אני רק רוצה כדי לכסות הוא תוספת לחץ.
מתוך העניין של זמן, אני לא תוכל לכסות יותר של המטאור
קוד, אבל יש שפע של משאבים זמין, ואני אהיה
כאן אחרי הסמינר.
אבל אני פשוט רוצה לכסות אירועי leaderboard.
תחביר זה תוכל ללמוד קצת מאוחר יותר בהרצאה.
זה ב-JavaScript.
>> אנחנו רק אומרים, כאשר אנחנו מקבלים בלחיצה, וזה בתוספת, זה
חשיש רק אומר זהות.
על תג זיהוי תוספת, אז אנחנו רוצים לעדכן - מילות מפתח אני רוצה ש
כדי לצפות בהוא עדכון ו לבחור ושחקן.
אז נבחר מביניהם של שחקן, אנו לעדכן אותו.
ומה שאנו עושים זה להגדיל הציון שלה על ידי חמש.
ושיתאר את הפונקציונליות יש לנו כאן.
>> לאחר תום סמינר זה, אנו תוכל לראות קצת קוד יותר.
אבל אם אחזור למטרה שלי שאני רוצה לשנות את האתר, אני רוצה כאן
כדי להוסיף לחצן הסר כך אני יכול למחוק את השחקן.
אז כדי לעשות את זה, אני צריך לעשות שני דברים.
אני צריך לעדכן את ה-HTML, לעדכן את להציג, מה מקבל מוצג למשתמש, ו
אז יש לי כמה JavaScript שכאשר לוחץ על הכפתור, המטאור הולך
לעשות משהו.
זה הולך להסיר אותו השחקן.
>> אז יש הרבה חתיכות של קוד שיש להם בעצם כבר
כבר עשה בשבילי.
אם אני מסתכל כאן, יש לי כבר בדרך לקבל את השחקן שנבחר.
זה החומר הזה, אם אתה יכול לראות את זה.
אז אם אני פשוט -
אני הולך להיות אירוע נוסף.
אז אני הולך להעתיק את מה שיש לי.
כיוון שמדובר ברשימה, אני רק צריך פסיק.
>> אז עכשיו אני הולך ללחוץ למחוק.
ואז במקום עדכון שחקנים, אני הולך לעשות את השחקנים למחוק.
וכל השחקנים למחוק צרכי הוא שחקן שנבחר.
אז פונקציה זו היא כל מה שאנחנו זקוקים לו.
אני צריך להוסיף קצת HTML כאן אף.
אז אם אני לגלול למטה כאן, זו היא תצוגת ה-HTML.
היו לנו דבר כאן, שהיה תג.
אתה לא צריך לדאוג בקשר לזה.
>> מה שחשוב לך הוא תוספת זיהוי זה.
וזה מה שאפשר לנו לומר, כש אנחנו לוחצים תוספת, יש לנו ל
לתת חמש נקודות.
ואתם תראו שמדובר בכפתור.
זה מה שBTN אומר.
והטקסט בכפתור הוא לתת חמש נקודות.
אז מה שאני הולך לעשות הוא אני הולך להעתיק את הקו הזה.
אני הולך לשנות את הזהות שלך למחוק.
ואני הולך לשנות את טקסט כאן כדי למחוק.
>> אז להפוך את הכל בטוח נשמר.
אני רוצה לחזור לJavaScript כדי לוודא שיש לי
למחוק שורה כאן.
טוב.
אז אני הולך להציל את שני הקבצים.
לאחר שמירת שני הקבצים, אנחנו יכול לחזור לתחתית.
ועכשיו אנחנו רואים שיש לנו כפתור מחיקה.
ועוד צעד אחד.
אתה שם לב שאתה יכול לקבל שגיאה, משום שכאשר אני לוחץ
למחוק, שום דבר לא קורה.
>> דרך לאתר באגים זאת היא ללכת חזרה לבדוק רכיב.
אני עושה את זה בכוונה כדי שתוכל לראות איך היית באגים משהו.
בבדוק רכיב, יש לנו כל הטקסט שלנו כאן למטה.
אני רוצה לחזור למסוף.
ומה קורה כשאני הולך כאן הוא אני מקבל איזושהי שגיאה.
זה אומר שאין שיטה למחוק.
>> אז מה שזה אומר זה כשאני הולך בחזרה לקוד, התקשרתי לשחקן
למחוק כאן.
מחיקה היא בעצם לא את הפקודה הנכונה.
אז כדי לברר מה את הפקודה הנכונה הוא, יש את ה-API המטאור.
התיעוד אני רוצה להפנות אותך חבר 'ה להיא רק בmeteor.com.
אז יש לי אותו כאן.
זה פשוט כל כך אתם יודעים איפה כדי ללמוד עוד.
>> יש קישור לתיעוד.
ובעצם, אני רק יכול מוצא למחיקה.
ומה שאתה רואה, למחוק הוא למעשה להסיר.
זו הפקודה ש אני צריך להתקשר.
אז עכשיו שאנחנו יודעים את זה, אני הולך כדי לשנות את זה למחוק להסיר.
אז עכשיו, כשאני חוזר לleaderboard אתר, אני הולך ללחוץ
למחוק, ועכשיו אני נעלם.
אין יותר רוג'ר.
ואני יכול להמשיך במחיקה כל שם אחד עד שיש לי לא נשארים כלום.
>> אז זה היה קצת מקדימה כיצד להשתמש במטאור.
אתה תהיה ללמוד הרבה יותר JavaScript ו-HTML הדרוש כדי להפוך את
זה נראה יפה יותר, שאותן נסקור ב [של השבוע? חתיכה] נקבע לHTML?
ו-JavaScript בעולם הבא [? חתיכה?] נקבע.
>> אז לא לדאוג אם לא כל הדברים האלה באים בקלות אליך.
זה יהיה על ידי הזמן של פרויקט הגמר.
תודה שבאת.
הקישור אני אעדכן מייד לאחר סמינר כדי שתוכל לראות עוד קצת
דוגמאות שאני כבר מיושם באופן כדי לקבל את leaderboard המתקדם יותר
שיש לי באתר זה כאן ב אחד רדיקלי leaderboard.meteor.
תודה.
>> [מחיאות כפות]