אליסון BUCHHOLTZ-AU: כל כולם תקין. ברוכים השבים לסעיף. זה קטע הלפני אחרון שלנו. זה כל כך עצוב. אני לא יודע מה אני הולך לעשות בלי לראות אתכם בכל יום שני. אני מניח שאנחנו צריכים פשוט- אולי אנחנו יכולים רק נפגש כאן ויש לי ארוחת ערב או משהו. אֲנִי לֹא יוֹדֵעַ. אני אביא אוכל במקום. אנחנו פשוט לדבר. אבל כן, בשבוע הבא יהיה להיות החלק האחרון שלנו. בהקשר זה, יש לך חידון בשבוע הבא. אני יודע שכחתי לעשות, כמו, הודעה מראש של שבועיים בשבוע שעבר, אבל אני מקווה שאתם ידעתי שהיא יבוא זה. אני מקווה שזה הוא אחד מאחרוני מבחני אמצע סמסטר בשבילכם לסמסטר. אבל זה הולך לכסות את כל חומר שעברנו על. אז זה לא כמו שאתה יכול פשוט לשכוח כארבע לולאות או משתנה. מכיוון שלמדנו אלה בהתחלה, אלה הם כמובן משחק הוגן לחידון שלך. 

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

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

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

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

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

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

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

בסדר, אז זה היה סוג של רק דבר קצר, כמו תמיד, יש לנו דוגמאות. אני יודע שאתם אוהבים אותם. אז הנה דוגמא של מאוד JavaScript פשוט להגיש כאן. אז זה רק הולך ליצור מוקפץ זה שאומר, "Hello world," כאשר אתה להיכנס לדף, אבל בואו לנסות ולעבור את זה קצת. אז ברור שזה רק כמו index.html הרגיל שלך. אז, רק התבנית הרגילה שלנו כאן, ויש לנו HTML, יש לנו הראש שלנו, ובדיוק כמו עם CSS, איך אנחנו כלל כמה קבצים בחוץ, נכון? יש לנו כמה סוג תסריט טקסט שהוא JavaScript. והמקור הוא hello.js, שהוא כאן למטה. זה כל הקובץ של hello.js. ולאחר מכן יש לנו כמה כותרת וכמה גוף HTML שלא באמת אכפת לנו. 

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

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

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

זה מסוג הדברים מגניבים כאן למטה, כי אם אנו מבחינים משתנים ב מתחיל כאמת. ומה זה יכול does-- מישהו יגיד לי מה זה עושה? אז יש לנו כמה דרוך. מה היית סוג של b להיות בהתחלה? קהל: בוליאנית. אליסון BUCHHOLTZ-AU: בוליאני. Right. ואז אנחנו להקצות מחדש ב למחרוזת זו, נכון? אז כאן, איזה סוג של b להיות? זה יהיה מחרוזת, נכון? אז מה חשוב הודעה היא כי בג, ש יכול כמעט אף פעם לא עושה משהו כזה. היינו צריך שיהיה לי משתנה, להפיל אותו למשהו אחר, אולי לעשות קצת פונקציה עם שני i, ללכת מתשלום למספר שלם. אבל אם אנו מבחינים כאן, b מאוד בקלות משנה להקליד. 

קהל: המתן, כל כך פשוט שאתה יכול להיות כמו, "לעשות ב שלם?" 

אליסון BUCHHOLTZ-AU: כן. אתה פשוט יכול להקצות מחדש ב למספר שלם. 

קהל: באמת? 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

אליסון BUCHHOLTZ-AU: אז אתה רואה את העץ הזה כאן? 

קהל: כן. 

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

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

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

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

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

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

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

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

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

ואז כל מה ש JavaScript קובץ שאתה באמצעות, אז זה רק חלק חיצוני JavaScript קובץ שאתה משתמש. באותו אופן שאנחנו מקושרים לCSS שלנו קבצים, זה אותו דבר. זה רק קישורים לקובץ שבו JavaScript שלך הוא. ויש לי כמה דוגמאות עם JavaScript פשוט. אז אנחנו הולכים דרכו. ולאחר מכן במדד שלך JavaScript, שהוא JavaScript שלך להגיש כאן, זה סוג של המעטפת שיש לך לjQuery. אתה כמעט 99.9 אחוז מזמן הולך יש את זה בקובץ index.js שלך. כי מה זה אומר הוא, "לא מבצע שום דבר עד המסמך שלך הוא בעצם מוכן, "וזה בדיוק מה שאתה רוצה. כי אם המסמך שלך לא מוכן, וjQuery מתחיל לעשות דברים, זה פשוט בלגן. אז אתה תמיד רוצה להיות עטיפה זו. ולאחר מכן לדברים שנכנסו לשם, אני אעזוב למעיין בו 'החבר' שלך. 

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

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

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

אז מה יש לנו here-- זה לא אמור להיות שם. עכשיו זה טוב. OK. אז מה יש לנו כאן הוא רק דף HTML פשוט כי אתם צריכים להיות כל סופר מכיר משני psets האחרון שלך. יש לנו סוג doc שלנו כאן. יכול כולם לראות? OK. מגניב. יש לנו HTML שלנו ברור. יש לנו כמה כותרות שהן צמוד לגיליון סגנון ש פשוט עשה הגופן שלי נחמד וגדול ונועז. אז אל תדאגו בקשר לזה. 

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

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

אז רק אני הולך ללוות אותך חבר ' דרך כיצד נוכל להתקרב זה. כך שהדבר הראשון ש אנו עשויים רוצים לעשות, אם אנו משנים את הרקע של הגוף, הדבר הראשון שאנחנו אולי נרצה לעשות הוא בעצם לתפוס מה הוא הגוף, נכון? אז אנחנו רוצים שנהיה לי סכום, רקע, ואם תשימו לב, אני פשוט באופן אוטומטי פשוט להתחיל להקליד. אין שום דבר מיוחד ש צריך לעשות לקבצי JavaScript שלנו. אני יכול להתחיל הצהרה על משתנה, והכרזה על פונקציות אקראיות. וזה הרבה יותר בצורה חופשית. זה כמו עם C, נתנו כל מה שאתה הכללים קשים אלה, ואתה גדל, כך שאנחנו כמו ", ללכת הלאה. להיות חופשי. תעשה מה שאתה רוצה. " וזה מה שJavaScript. אז יש לנו קצת רקע כאן. עם מודל DOM שלנו, אנחנו יודעים שאנחנו יכול לעשות נקודת המסמך לקבל אלמנט, ואם אנו מבחינים כאן, הגוף שלנו יש זיהוי. נכון? כדי שנוכל לקבל מסמך על ידי Id, והנה אחת פשוט. מה הזהות שלנו שאנחנו רוצים כאן? קהל: רקע. אליסון BUCHHOLTZ-AU: רקע. מושלם. ונקודה-פסיק בסוף. שלא נעלם עדיין. אתה עדיין צריך פסיק שלך. OK. אז זה הראשון שלנו. וכאשר אנו לחצו משהו, אנחנו רוצה שמשהו יקרה, נכון? אז אולי רוצים קצת משתנים שמחכה לקליק. מה שאנחנו הולכים לעשות הוא שאנחנו הולכים להפוך את הקישור שלנו דומה יותר ללחץ. אז אנחנו הולכים לקבל קצת לחצן ש שווה לתעד dot לקבל אלמנט לפי תעודת זהות. ואם אני מדבר על לדבר לחץ על קישור או לחץ כאן למסיבה קישור, מה שעלול זיהוי שלי להיות כאן? מפלגה. נכון. אישור לא רע עד כה. כולם מקבלים את מה שאנחנו עושים? 

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

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

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

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

קהל: [לא ברור] זה כמו [לא ברור]. אליסון BUCHHOLTZ-AU: המתמטיקה נקודה אקראית. קהל: מגניב. אליסון BUCHHOLTZ-AU: כן. JavaScript רק דואג לך. OK. אז אנחנו יכולים לעשות את זה בשביל כל אלה. נכון? מתמטיקה dot זמנים אקראיים 255. העתק ש. מגניב. אז העניין הוא, רשאי זה לא תחזור שלם. נכון? אולי אנחנו קצת מספר בין אפס ואחד, וזה גורם לו להיות מעט את, וRGBs שלנו לא יכול להיות צף. הם צריכים להיות ints. אז אם אתה ניסית את זה, זה כנראה הייתי יש לי כמה התנהגות בלתי יציבה. זה יהיה קצת מסריח. אז מה שאנחנו עושים הוא שאנחנו רוצים לעשות בטוח כי אלה מעוגלים, ואתה יכול לעגל. כך או כך אני מעוגל עם רצפה. אז אני תמיד הקפדתי שזה מעוגל כלפי מטה. אבל הולך הנחה של כמה זה פשוט היה רק ​​כדי לקבל מספר אקראי, איך אתה חושב שאנחנו אולי רצפת מספר זה? זה דומה מאוד. רעיון כל? אז אם אקראי הייתה רק נקודה במתמטיקה אקראי, כך אתה חושב שאנחנו היינו עושים רצפה? רצפת dot מתמטיקה. ואתה גם יכול לעשות תקרת נקודת מתמטיקה. עגול הוא סוג של דו-משמעי כי אתה לא יודע אם לעגל כלפי מעלה או מטה בסיבוב. אז בדרך כלל אנחנו עושים תמיד במתמטיקה רצפת נקודה, תקרת נקודת מתמטיקה. אבל honestly-- 

קהל: האם עגול קומה למטה? 

אליסון BUCHHOLTZ-AU: קומת סיבובים למטה. וזה רק בחירה על החלק שלי. 

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

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

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

קהל: [לא ברור] בתוספת לאחר מכן הירוק בתוספת אז האדום. 

אליסון BUCHHOLTZ-AU: כן, כי אני פישלתי ש. הקנס של אחד ש. אה, להחזיק מעמד. מס ' כי אני צריך לוודא ש כי יש לי את כל אלה תקין. אז אני אסביר במזכרת uno. ירוק, כחול, מושלם. עכשיו אני עושה. אני מאמין. 

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

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

קהל: [לא ברור] אליסון BUCHHOLTZ-AU: מס ' ניסיתי את זה לפני השיעור. יש לי כל מה שעשיתי לפני כיתה במקרה הייתי כמו, "רגע, מה עשיתי לא בסדר?" כי אני היה כמו, "אני כנראה יהיה בלגן הזה עד שבשלב מסוים. " תוספת ירוקה. הכל נראה כאילו זה בשרשור בצורה נכונה. OK. 

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

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

קהל: שטח לאחר התוספת השנייה. 

אליסון BUCHHOLTZ-AU: איזה מהם? אה רגע, תחזיק מעמד. ללבוש חלל? 

קהל: בתוספת שנייה ב שרשור הירוק. אליסון BUCHHOLTZ-AU: אה. קהל: אין חלל לאחר התוספת, כן. אליסון BUCHHOLTZ-AU: אתה לא צריך את זה, but-- קהל: הו, אתה לא יודע? אליסון BUCHHOLTZ-AU: זה נראה די. קהל: OK. OK. 

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

אני מבטיח שזה עובד. אם לא, אני אראה לך מה הוא טומי. ויש. 

קהל: אתה מתייחס מפלגה נקודת CSS, וזה js נקודת מפלגה. 

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

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

אוקיי, אז אחרי הפיאסקו שעם מפלגה js נקודה, יש לנו שתי אפשרויות אחרות. יש לנו שעון או טוויטר. הם שניהם מעניינים. אולי לא ממש כיף כמו מסיבה, שהיה לי strobing קצת קריר דבר בסוף. האם יש לך חבר 'כל העדפה? קהל: שעון? אליסון BUCHHOLTZ-AU: שעון? OK. מגניב. 

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

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

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

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

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

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

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

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

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

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

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

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

אליסון BUCHHOLTZ-AU: זה הוא לקבל שעות וget-- הו. אתה are-- כוכב זהב. זה כל בדיקה, בחורים. אני מבטיח שזה עובד לפני השיעור. 

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

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

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

ראה אני מבטיח שאני לא משוגע. אֲנִי לֹא יוֹדֵעַ. אני לא יודע למה זה לא אוהב אותי. אני מרגיש כמו נראה אותו הדבר, אבל כנראה שזה שונא אותי. 

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

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

אז מה אנחנו רוצים לעשות, באותה רוח כללית שעשינו עם js dot השעון ונקודת צד js כפי ששמו לב, הוא אנחנו כבר נכתבנו על ידי תופסים למעשה הדברים שאכפת לנו, נכון? אז במקרה הזה, יש שני דברים שאכפת לנו, בסדר? דבר אחד שאנחנו בעצם סוג של מסתכל לתוך ציור ונתונים מ, ודבר אחד ש אנחנו באמת משנים. אז יש HTML שלנו. אם זה דף האינטרנט שלנו כאן, מה נתונים שאנחנו מסתכלים? זה הולך להיות מה ש הטקסט בתיבות שלנו, נכון? אז כל מה שאני מקליד בכאן. זה מה שאני רוצה לדעת, או זה מה שאני רוצה להסתכל. ומה הולך להיות שינוי בדף האינטרנט שלנו? התווים שנותרו. אז באותה הדרך, אנחנו רוצים להתחיל על ידי אתחול משתנים כי למעשה להחזיק אלמנטים אלה. בסדר? אז אם יש לנו כמה var זה אזור הטקסט שלנו, ויש לנו כמה var שנותר. נכון? אז אלה הולכים להחזיק שני הדברים האלה. אז אותו דבר, מסמך dot-- אישור, אני הולך כדי לוודא שזה הוא הולך לעבוד הפעם. אני מאוד נחוש בדעתו. אוקיי, אז אם אנחנו רוצים אזור טקסט, על פי לHTML שלנו, מה שמזהה? מה הזהות שלנו? זה פשוט הולך להיות טקסט כי זה יוצר אזור הטקסט שלנו, אישור, והזהות שלנו הוא טקסט, אז זה איך אנחנו יכולים לתפוס את מה שנמצא שם. OK, פסיק. אני הולך להיות סופר מדויק על זה, כי אני רוצה שזה יעבוד הפעם. OK, לעשות את אותו הדבר, לקבל אלמנט לפי תעודת זהות. אני באמת תוהה מה יש גרם לשניים האחרים לבלגן. OK, אז בזה, מה שאנחנו רוצים לגשת? מה הזהות שלנו כאן? יש לנו זיהוי אחר ב HTML שלנו, מה זה? קהל: תווים שנותר. אליסון BUCHHOLTZ-AU: תווים שנותרו. 

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

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

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

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

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

קהל: נותר? 

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

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

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

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

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