>> [השמעת מוסיקה]
>> דאג LLOYD: אז עכשיו אנחנו ישנים יתרונות בתכנות האינטרנט, נכון?
ואנחנו כבר כיסינו כמה שפות בקטעי וידאו אישיים.
ועכשיו בואו נעשה עוד אחד, JavaScript.
>> אתחיל בחדשות טובות, JavaScript הוא תכנות מודרני
שפה כמו PHP ש תחביר נגזר מC,
אז זה מקום טוב להתחיל.
זה בערך ישן כמו PHP, כמו גם, לאחר כ 20 שנים.
הוא הומצא סביב באותו הזמן כמו PHP.
וJavaScript היא בעצם די יסוד לחווית המשתמש
של האינטרנט.
למעשה, יש שלוש שפות שאני
הייתי אומר סוג של איפור חוויית משתמש של אינטראקציה
עם אתר האינטרנט, HTML, CSS, ו- JavaScript.
ואז עכשיו בואו נדבר קצת על JavaScript.
>> החדשות הרעות, אם כי, עם JavaScript הוא כי זה קובע הרבה כללים לעצמו,
ואז זה שובר אותם.
וJavaScript באמת יכול להיות סוג של מאתגר ללמוד,
כי זה לא כמו C ו PHP, שמאוד מובנים
ויש כללים מאוד נוקשים לאיך דברים יכולים לעבוד.
JavaScript יש סוג קיבל כל כך גמיש
שאולי דברים לא הולכים ל לעבוד בדרך שאנחנו מצפים מהם,
ואולי אנחנו באמת לא יכולים ללמוד שפת תכנות הראשונה שלנו
כJavaScript.
אז אולי בגלל זה לא להגדיר את עצמו כל כללים,
וזה לא ממש לאכוף הרגלי קידוד טובים.
אבל עכשיו אנחנו כבר בתקווה שפותחו כמה הרגלים טובים קידוד,
וכדי שנוכל להתחיל לפשיטה לJavaScript קצת.
>> כדי לכתוב JavaScript, דומה לפתיחה עד קובץ C עם סיומת C נקודה
או קובץ PHP עם סיומת דוט PHP, כל מה שאנחנו צריכים לעשות הוא לפתוח את קובץ
עם סיומת קובץ JS הנקודה.
אנחנו לא צריכים שום מיוחדים מפרידים כמו שעשינו ב- PHP.
סוג זה של זווית PHP סימן שאלת הסוגר
כי אנחנו רגילים לכך, בדרך אנחנו אומרים לנו שהדפדפן מה שיש לנו הוא
JavaScript היא על ידי הכללה זה בתג HTML,
ואנו רואים קצת על איך לעשות את זה ברגע.
>> הדבר האחר שגורם ל JavaScript שונה,
אם כי, הוא שהוא פועל בצד הלקוח.
אז זוכר עם PHP ש אנחנו אף פעם לא באמת יכולים לראות
PHP שהדגיש באתר.
אם אי פעם ראינו ב מקור של דף, אנחנו רק הייתם
לראות HTML שהיה נוצר על ידי PHP ש.
אבל JavaScript פועל בצד הלקוח.
JavaScript שלך פועל במחשב שלך.
וזה למה שאתה יכול לעשות דברים כמו להוסיף חוסמי.
יָמִינָה?
חסימת מודעה נעשתה בדרך כלל על ידי להרוג את כל JavaScript
הפועל באתר מסוים.
ובגלל זה היה צריך לרוץ בצד הלקוח מכונה שלך,
רק אתה יכול לעצור את JavaScript להפעלה לחלוטין.
זה גם אומר שכאשר אתה משתמש ב אתר הכולל JavaScript,
אתה צריך לשלוח את מקור JavaScript קוד כחלק מתגובת http
ללקוח כאשר הם מבקשים את זה.
ואז אתה אולי לא רוצה להשתמש ב- JavaScript
לעשות דברים באמת רגישים כמו מידע שעובר
על סיסמאות של המשתמשים לגבות ו שוב, בגלל שהם למעשה
הולך לקבל את כל קוד המקור, לא רק html שנוצר,
כמו שהיה קורה עם למשל PHP.
>> אז איך אנחנו כוללים JavaScript ב- HTML שלנו להתחיל עם?
ובכן, דומה ל- CSS, למעשה, הוא סוג של איך אנחנו עושים את זה כאן.
עם CSS יש לנו תגי סגנון.
ובתוך תגי סגנון אלה, אנו יכולים להגדיר גיליון סגנונות CSS.
באופן דומה עם JavaScript אנחנו יכולים לפתוח את תגי תסריט,
תג html אחר שעשינו לא לדבר על בוידאו HTML שלנו,
ולכתוב JavaScript ב בין תגי סקריפט אלה.
גם אם כי, כמו CSS, אנחנו יכול לקשר במחוץ קבצי CSS
ולמשוך אותם לתוך התכנית שלנו ככה.
עם CSS אנחנו גם יכולים, תסלח לי, עם JavaScript
אנחנו יכולים גם לציין את המקור תכונה של תג סקריפט
לקשר בJavaScript בנפרד, כדי שלא
צריך לכתוב את זה ב בין תגי תסריט, אנחנו
יכול לקשר אותו בשימוש ב שתג התסריט גם כן.
ובדיוק כמו עם המקרה עם CSS בי מומלץ שזה היה כנראה
האינטרס שלך לכתוב CSS שלך בקובץ נפרד במקרה
אתה צריך לשנות את זה, באופן דומה אנו ממליצים לעשות
שאתה כותב JavaScript בקבצים נפרדים
ולהשתמש במקור תגי סקריפט מייחס לקשור JavaScript שלך
ל- HTML שלך, דף האינטרנט שלך.
>> משתנים אז JavaScript, אנחנו להתחיל לדבר על התחביר כאן.
ונלך דרך של מהירות מסוג זה,
כי אנחנו כבר עשינו את זה ב- PHP, כך זה צריך להיות די מוכר כל.
אז משתנה ב- JavaScript הם דומה מאוד ל- PHP משתנים.
אין מציין סוג, ו כשאתה מציג את משתנה,
אתה קידומת זה עם מילת המפתח var.
ב- PHP היינו עושה משהו כמו זה, x סימן דולר.
ככה אנחנו הצבענו משתנה, אבל לא, אנחנו
לא מזכיר את הסוג של משתנה בכל.
היינו אומרים משהו כמו x סימן דולר שווה 44 ב- PHP.
אם אנחנו עושים אותו דבר ב- JavaScript,
היינו אומר x var שווה 44.
אז var הוא סוג של הדרך שלנו של החדרת משתנה.
זה אולי קצת יותר אינטואיטיבי לא רק משתנה סימן דולר.
>> שוב, כי אין סוגי נתונים, אנחנו יכולים לעשות את זה
עם כל סוג נתונים, מחרוזות, כל דבר אחר יהיה כל להיות var.
תנאי, כולנו חברים ותיקים מC ו- PHP
עדיין זמינים, כך שיש לנו, אם, אחר אם, אחר, מתג ושאלה
מעי גס סימן.
מתג שנותר גמיש כמו שזה היה ב- PHP, אבל כל אלה אתה
מכיר על ידי החברה.
ובאופן דומה עם לולאות הן המועדפים הישנים של זמן,
לעשות בזמן, ועדיין לרשותנו.
אז אנחנו כבר יודעים הרבה סוג JavaScript בסיסי של יסודות
רק מכוח שיש לא מעט ידע עכשיו על C ו- PHP.
>> מה לגבי פונקציות בJavaScript?
ובכן, דומה ל- PHP כל פונקציה היא הציג עם מילת המפתח הפונקציה.
אתה אומר פונקציה, ואז אתה להתחיל להגדיר את הפונקציה שלך.
מה זה קצת שונה על JavaScript,
למרות שהוא היכולת שיש לי מה שנקרא פונקציה אנונימית.
אז אתה יכול להגדיר פונקציות שאין להם שם.
זה משהו באמת לא ראה בעבר.
אנחנו באמת נשתמש במושג של פונקציה אנונימית
מעט מאוחר יותר בזה וידאו, כי זה יהיה
לעשות קצת יותר הגיוני בהקשר כאשר אנו רואים אותו במצב מסוים
כי אני כבר בעבודת כאן.
אבל בואו רק נסתכל על מה JavaScript פשוט
פונקציה עשויה להיראות.
>> אז אני כבר הלכתי קדימה ו נפתח IDE CS50
ואני כבר לרוץ אפאצ'י כדי להתחיל ריצת השרת שלי.
ויש לי קובץ זה פתוח בשם Home.html.
ואני להתקרב קצת כאן.
ובעצם, אתה יכול לראות את Home.html הוא פשוט חבורה של כפתורים.
ואני טוען שבחלק העליון כאן כי זה סעיף JavaScript
חומרים.
אז יש חבורה של כפתורים כאן, אבל מה לחצנים אלה עושים בעצם?
>> ובכן, אנחנו מעל הראש שלי המטען, ויש לי Home.html אני פותח כאן.
בהתחלה מאוד, כאן המקום שבו אני מקשר
בכל קבצי מקור JavaScript שלי.
יָמִינָה?
אז יש לי anonymous.js, clock.js, אני משתמש בתכונת המקור
של תג התסריט לקשר בקובץ.
כל כך לא אני כתבתי JavaScript ישירות לקובץ זה,
אבל אני כבר משכתי בכל JavaScript שכתבתי בנפרד.
ואם אנחנו לגלול למטה כאן, זה צריך כל נראים מוכר במקצת
עם קצת תחביר חדש.
יש לנו כאן תג כותרת ל פונקציות ולאחר מכן על כפתור.
יש לי קלט זה כפתור סוג, וככל הנראה, כאשר אני לוחץ עליו,
אני הולך להתקשר לכמה לתפקד מועד התראה.
וככה אנחנו סוג של יכולים לערבב קצת JavaScript ו- HTML.
הם בעצם לשחק יפים יפה יחד, וכך ככל הנראה כאשר
אני לוחץ על לחצן זה, אני הולך לקרוא כמה מועד התראת פונקציה.
ובאופן דומה יש לי הגדרת התנהגויות לכל הכפתורים האחרים ש
הם בדף home.html, שנשמור חוזר
לבמהלך הסרטון הזה.
אבל בואו נחזור עד כאן ותסתכל
בclock.js, המהווה את קובץ JavaScript ש
כתבתי שיש פונקציה ראשונה אנחנו הולכים להעיף מבט.
כפי שניתן לראות, אני מתחיל JavaScript שלי לתפקד עם הפונקציה של מילות מפתח,
ואני נתתי אחד זה שם, זה נקרא מועד התראה.
בתוך משם, אני כנראה ליצור משתנה מקומי חדש בשם תאריך הנוכחי.
ואני הולך להקצות שווה למועד חדש.
ואנחנו יכולים להיכנס להרבה פירוט על מה הוא תאריך,
ובאמת JavaScript הוא כל כך גדול שאנחנו לא יכולים
לכסות את הכל בוידאו אחד.
אבל די אם נאמר, זה הולך לחזור אליי פריט מידע ש
מתמצת את התאריך והשעה הנוכחיים.
אני אחסון שבמשתנה שאני כנראה הולך להתריע תאריך הנוכחי.
>> ובכן, מה עושה התראה מבט תאריך הנוכחי כמו?
בואו נסתכל על הקובץ עצמו לגבות מעל בחלון הדפדפן.
אז שוב, זה הכפתור ש קשר ל, פונקציה בשם זה.
ואני לוחץ אותו שם ו תראה מה זה עשה, זה התראה.
זה צץ סוג זה תיבה לספר שלי שהזמן הנוכחי הוא, ככל הנראה,
זה 4 בנובמבר ב 10:43:43 בבוקר.
ואם אני לוחץ עליו שוב, עכשיו זה כמה שניות מאוחר יותר, נכון?
אז זה כל פונקציה זו עושה.
כאשר אני לוחץ על לחצן זה, זה צץ הודעת התראה לי.
אז יש ממש לא יותר מדי פונקציות
זה שונה מPHP, רק קצת תחביר החדש
שמגיע עם עבודה עם JavaScript.
>> מערכים ב- JavaScript הם די פשוט.
להכריז מערך, אתה משתמש ב תחביר סוגריים מרובעים
שאנחנו מכירים מPHP.
ודומה ל- PHP, אנחנו ניתן גם לערבב סוגי נתונים.
אז מערך זה, שניהם מערכים אלה הייתם
להיות JavaScript הלגיטימי לחלוטין.
אחד שכל המספרים השלמים, ואחד ש מתערבב סוגי נתונים שונים.
>> מה זה משהו שונה מאוד ב- JavaScript, אף?
זה הרעיון של אובייקט.
אז אולי שמעת על תכנות מונחה עצמים.
אנחנו לא עושים את זה הרבה בCS50, אבל אנחנו נעשה קצת מזה
כאן בהקשר של JavaScript.
עכשיו יש JavaScript היכולת להתנהג כמו תכנות מונחה עצמים
שפה, אבל זה לא את עצמו באופן בלעדי מונחה עצמים
שפת תכנות.
וזה מגיע שוב בחזרה למה שאמרתי, זה
יכול להיות מאוד מאתגר ללמוד JavaScript תכנות הראשון שלך
שפה, כי זה לא באמת יתאים פרדיגמה מסוימת.
>> C מצד שני הוא שפת תכנות פונקציונלית.
אם אנחנו רוצים, פונקציות סוג של איש הבוס הגדול, נכון?
הם מכתיבים את מה ש קורה כל דבר אחר.
אנחנו רוצים לשנות את המשתנים, אנו קוראים פונקציות.
אנחנו עושים דברים לפונקציות.
אובייקטים במקום, ב מתנגד שפת אוריינטציה,
אובייקטי סוג של להיות הכוכב ו פונקציות להיות סוג של משנית.
אבל מה הוא אובייקט, מה ש הוא הרעיון הזה של אובייקט?
ובכן, אם זה עוזר, חושב על זה בסוג ראשון
כמו מבנה C או struct שאנחנו כבר למדנו על לפני.
ב C, מבנה מכיל מספר תחומים,
ואולי כעת אנו יכולים להתחיל ל קוראים מאפייני תחומים אלה.
אבל התכונות אף פעם לא באמת לעמוד על שלהם, נכון?
אם אני מגדיר את מבנה למכונית כמו זה עם שני הבא
שדות או נכסים, אחד שלם לשנה של המכונית
ועוד 10 אופי מחרוזת למודל של המכונית,
אני יכול לומר דבר כזה, אני יכול להצהיר על משתנה חדש
של הרבי המכונית struct סוג.
ואז אני יכול לומר משהו כמו herbie.year שווה 1,963,
וherbie.model שווה חיפושית.
זה בסדר.
אני משתמש בשדות ב הקשר של המבנה,
אבל אני אף פעם לא יכול פשוט אומר משהו כזה.
יָמִינָה?
אני לא יכול להשתמש בשם השדה עצמאי של המבנה.
זה סוג של דבר בסיסי.
>> אז שדות להיות יסוד למבני C
דומים מאוד למאפיינים ש יסוד לאובייקטי JavaScript.
אבל מה שעושה אותם מעניין במיוחד
הוא שעצמים יכולים להיות גם מה ש שיטות נקראות, שהם באמת
רק מילה יפה לפונקציות ש הם אינהרנטי לאובייקט, כמו גם.
אז זה תפקיד שיכול להיות רק נקרא בהקשר של אובייקט.
רק אובייקט שהגדיר פונקציה זו בתוך שלה,
אם אתה חושב על struct, הפונקציה
מוגדר בתוך המגדירים סוגריים מסולסלים של המבנה.
אז זה רק אומר משהו למבנה.
וזה סוג של מה שאנחנו עושים כאן עם אובייקטים ושיטות.
זה בעצם כמו שאנחנו הגדרת פונקציה ש
רק הגיוני ב אובייקט מסוים, וכדי ש
קורא לזה שיטה של ​​האובייקט.
ואנחנו אף פעם לא יכולים לקרוא לזה פונקציה בלתי תלויה של האובייקט,
בדיוק כמו שאנחנו לא יכולים להגיד שנה או מודל עצמאי של struct בג
>> תכנות פונקציונלי אז פרדיגמות להיראות משהו כזה.
פונקציה ולאחר מכן כאשר אתה עובר באובייקט כפרמטר.
בתכנות מונחה עצמים שפות, זה סוג של מקבל
התהפך, והיינו חושבים על זה ככה, object.function.
אז זה סוג של נקודה ש מפעיל רומז שוב
שזה סוג מסוים של רכוש או תכונה של האובייקט עצמו.
אבל זה מה שאובייקט שפת תכנות מונחה
אולי לעשות כדי להפוך את פונקציה קורא לשיטה, שוב, ש
היא רק מילה מיוחדת לפונקציה זה טבוע באובייקט.
זה מה ש תחביר עשוי להיראות.
ואז נתחיל לראות חלק מ זה בהקשר של JavaScript.
>> גם אתה יכול לחשוב על אובייקט כמו סוג של מערך אסוציאטיבי,
שאנחנו מכירים מPHP.
זכור מערך אסוציאטיבי מאפשר לנו יש זוגות ערך מפתח, במקום
שיש מדדים 0, אחת, שתיים, שלוש, וכן הלאה כמו שאנחנו רגילים מC
מערכים.
מערכים אסוציאטיביים יכולים למפות מילות, כגון בוידאו PHP,
אנחנו מדברים על תוספות של פיצות.
ואז הייתה לנו מערך פיצות בשם, ואנחנו
הייתה לי הגבינה הייתה מפתח ו$ 8.99 היו ערך, ולאחר מכן פפרוני היה מפתח,
9.99 $ היה ערך, וכן הלאה.
וכך אנו יכולים גם לחשוב על מתנגד סוג של דומה לאסוציאטיבי
מַעֲרָך.
וכך תחביר זה כאן היה ליצור אובייקט חדש
הרבי קרא לעם שני תכונות הפנימיים שלו.
שנה, המקבלת את הערך 1963, ומודל, אשר מוקצה המחרוזת
חיפושית.
>> ושים לב כאן שאני משתמש גרשיים בודדים ב- JavaScript.
אתה יכול להשתמש בגרשיים בודדים או כפולים על מיתרים כאשר אתה מדבר.
זה רק באופן קונבנציונלי המקרה שרוב הפעמים
כאשר אתה כותב JavaScript, אתה פשוט השתמש בגרשיים בודדים.
אבל אני יכול להשתמש במרכאות כפולות כאן, ו זה יהיה בסדר גמור גם כן.
>> אז זוכר איך ב PHP היו לנו את הרעיון הזה
של עבור כל לולאה שיאפשר לנו ללחזר על כל ערך מפתח
זוגות אסוציאטיביים מערך, כי אנחנו
לא היה לי יכולת זו כדי לחזר דרך 0, אחת, שתיים, שלוש, ארבעה,
וכולי?
יש JavaScript משהו דומה מאוד, אבל זה לא נקרא לכל לולאה,
זה נקרא בלולאות.
אז אם אמרתי לי ש זה, למפתח var באובייקט,
זה סוג של דומה לאומר לכל דבר כמו משהו.
אבל כל מה שאני עושה כאן הוא iterating דרך כל המפתחות של האובייקט שלי.
ובתוך מתולתל הפלטה שם, הייתי
להשתמש במקש סוגריים מרובעים אובייקט להפנות לערך שבמיקום מרכזי.
>> לחלופין, יש אפילו אחר גישה.
אם אני רק דואג רק ערכים, אני יכול לומר במפתח של אובייקט,
ורק להשתמש במפתח בפנים.
אז למפתח var באובייקט, יש לי להשתמש בסוגריים מרובעים אובייקט
מפתח בתוך הלולאה.
למפתח var של אובייקט, שאני יכול רק להשתמש במפתח בתוך הלולאה,
כי אני פשוט במיוחד מדבר על הערכים קיימים.
>> אז בואו אולי לקחת מסתכל על ההבדל
רק כדי להראות לך במהירות ההבדל בין ארבעה
ולשל עם מסוים מאוד מערך, שיש לנו כאן, מערך שבוע.
אז אני צריך למצוא מערך חדש כי אני מלא בשבעה מיתרים,
יום שני יום שלישי יום רביעי, יום חמישי, שישי, שבת, יום ראשון.
ואני רוצה לחזר עכשיו באמצעות מערך זה,
הדפסת מידע מסוים.
אם אני משתמש בלולאה ל להדפיס את המידע,
מה אתה חושב שאני הולך לקבל?
ובכן, בואו נסתכל.
ולפני שאנחנו קופצים מעל לחלון הדפדפן שלי,
רק יודע ש console.log הוא סוג של אחד
דרך לעשות F הדפסה ב- JavaScript.
אבל מה היא הקונסולה?
ובכן, זה מה שאנחנו הולכים ללכת תסתכל עכשיו.
>> אוקיי, אז אנחנו שוב כאן בחלון הדפדפן שלי,
ואני הולך לפתוח עד כלי הפיתוח שלי.
שוב, אני רק להכות F12 כדי לפתוח את כלי פיתוח.
ושים לב שכאן ב עליון שבחרתי קונסולה.
אז זה הרעיון של קונסולת מפתח,
וזה יאפשר לנו להדפיס את המידע,
כמו סוג של המסוף, אבל כפי שתראה קצת יותר מאוחר,
אנחנו יכולים גם להקליד מידע ב כדי לקיים אינטראקציה עם דף האינטרנט שלנו.
אני הולך להתמקד בקצת כאן, ואני הולך עכשיו לחץ על במבחן.
וארבעה בtest-- אני לא הולך להראות לך את הקוד לזה עכשיו,
אבל אתה תקבל את זה אם אתה להוריד את קוד המקור ש
מזוהה עם video-- זה כי הוא פשוט בלולאה
שראינו רק שני לפני בשקופית.
>> אז אני הולך קליק ש כפתור, וכאן,
הנה מה שהודפס ב קונסולה, 0, אחת, שתיים, שלוש, ארבע, חמש,
שֵׁשׁ.
אני לא להדפיס את המידע בתוך מקומות מערך אלה,
כי אני משמש בלולאה.
ובתוך הגוף של הלולאה, אני רק הדפיס מפתח אינו מתנגדים מפתח.
אבל אם אני עכשיו לנקות הקונסולה שלי, ואני לעבור למבחן, וארבעה של מבחן
אני אומר שאני משתמש לשל לולאה במקום ולהדפיס את המפתח,
אם אני לוחץ על זה, עכשיו אני מקבל אלמנטים בפועל בתוך האובייקט שלי
או המערך שלי במקרה זה.
המערך שלי של ימי שבוע.
אני הדפסתי יום שני, יום שלישי יום רביעי.
אז זה ההבדל בין בלולאה, שמדפיסה
רק את המפתחות אם אתה רק משתמש במפתח בתוך הגוף של הלולאה,
ולשל לולאה, אשר הדפסים את הערכים אם אתה משתמש רק
מפתח בתוך הגוף של הלולאה.
>> בסדר, איך אנחנו עכשיו מתחילים ל לשרשר מחרוזות ואולי לערבב
חלק ממשתנים עם אינטרפולציה כמו שהיינו מסוגל לעשות בPHP?
ובכן, אנחנו די מכירים עם זה מPHP.
כך היינו עושה את זה באמצעות מפעיל נקודה ללשרשר מחרוזות.
ב- JavaScript, אם כי, אנחנו בעצם להשתמש במשהו
התקשרתי למרכזייה בתוספת, ש הוא אולי אפילו קצת יותר
אינטואיטיבי, נכון?
אנחנו מוסיפים חבורה יחד של מחרוזות.
אז בואו לחזור שוב ולראות מה זה
יודפס אם אנחנו מנסים להדפיס כל המידע במערך שבוע.
בסדר, אז תחת כאן תחת שרשור מחרוזת,
יש לי שתי אפשרויות, בניין מחרוזת V1 ולאחר מכן V2 בניין מחרוזת.
ואנו רואים למה אנחנו צריך V2 בשני.
אבל אני הולך ללחוץ על V1 בניין מחרוזת, ש
הוא הקוד שהיינו רק להעיף מבט ב,
console.log עם כל הפלוסים.
בואו תראו אם זה הדפסים את מה שאנחנו מצפים.
>> יום שני הוא יום מספר 01 של השבוע, יום שלישי הוא יום מספר 11 של השבוע.
ובכן, מה שאני מנסה לעשות שם היה מקבל
זה להדפיס את יום שני הוא יום מספר אחד, יום שלישי הוא יום מספר שתיים.
אבל זה נראה כאילו אני תמיד להדפיס את אחד.
ובכן, מדוע זה כך?
ובכן, מתברר, לקחת מבט נוסף בקטע הקטן הזה של קוד כאן.
שים לב שאנו משתמשים בתוספת מפעיל בשני הקשרים שונים.
>> ואז הנה שבו אולי דברים שאנחנו כבר סוג של היו אומרים,
הו, זה כל כך גדול.
אנחנו לא מתעסקים עם סוגי נתונים יותר.
אבל הנה שבו למעשה כי אנחנו מאבדים סוגי נתונים
באמת יכול להיות קצת של בעיה עבורנו.
כעת, לאחר שהמפעיל בתוספת משמש ל לשרשר מחרוזות ולהוסיף מספרים
יחד, יש JavaScript כדי להפוך את הניחוש הטוב ביותר שלה
על מה אני רוצה לעשות את זה בשבילי.
ובמקרה הזה, זה ניחש לא נכון.
זה יום רק בשרשור, שיהיה 0, אחת, שתיים, שלוש, ארבעה, חמש, שש או,
ואז זה פשוט בשרשור וששרשור אז אחד.
זה באמת לא להוסיף אותם יחד.
וכך שפות הבאות, PHP ו- JavaScript,
שתקצירים משם רעיון זה של סוגים,
אתה לא צריך להתמודד עם זה יותר.
אין עדיין יש להם סוגים מתחת למכסת המנוע.
ואנחנו יכולים, במצבים כמו זה, למנף את העובדה ש
באומרו משהו כמו אולי זה, ש
הוא אומר לי JavaScript, על ידי דרך, להתייחס לזה כמספר שלם,
לא להתייחס אליו כמחרוזת, אפילו למרות שאנחנו ערבוב יחד מחרוזות
ושלמים כאן.
>> זה רק אחד מהדברים האלה כי זה נראה כל כך גדול בהקשר
כי אנחנו לא צריכים להתמודד עם סוגים יותר,
אבל לפעמים אתה לרוץ למצב
בדיוק כמו זה שבו העובדה ש אין לך שליטה על סוגים
יכול לפעול כבומרנג עליך אם אתה לא זהיר.
ולכן אם אנחנו לקפוץ אחורה אל IDE, אני הולך לנקות את הקונסולה שלי שוב,
ואני הולך ללחוץ מחרוזת גרסת בניין שתי, ש
המקום שבו אני משתמש בפונקצית שint לנתח.
עכשיו זה להדפיס את מידע שאני מצפה.
מספר יום אחד של יום שני, יום שלישי הוא מספר יום שני, וכן הלאה.
>> אז בואו נדבר על פונקציות שוב.
הבטחתי לנו היה מדברים על עילום שם פונקציות, ועכשיו ההקשר של
סוף סוף הגיע.
אז לפני שאנו עושים זאת, בואו נדבר שוב על מערכים רק לשנייה.
אז מערכים הם מיוחדים מקרה של אובייקט.
למעשה, כל דבר ב JavaScript היא בעצם אובייקט.
אז פונקציות מקרה מיוחד של אובייקט,
מספרים שלמים הם מיוחדים מקרה של אובייקט,
אבל במיוחד מערכים יש מספר השיטות.
זכור כי הם אובייקטים, הם יכולים להיות בעלי תכונות ושיטות.
יש להם מספר השיטות ש יכול להיות מיושם על אובייקטים אלה.
יש שיטה הנקראת גודל, array.size,
שיחזור ל אתה כמו שאפשר לצפות
מספר האלמנטים במערך שלך.
array.pop, כמו סוג של הרעיון של פקיעה מחוץ
של ערימה, אם אתה זוכר מוידאו הערימות שלנו,
מסיר את האלמנט האחרון מהמערך.
array.push מוסיף אלמנט חדש בסופו של מערך.
array.shift הוא סוג של כמו DQ, זה מדביק את
האלמנט הראשון של מערך.
>> אבל יש גם אחר מיוחד שיטה של ​​מערך הנקראת מפה.
וזה סוג של רעיון מעניין.
אז מה הוא את הרעיון של מפה?
אתה באמת תראה את זה בכמה שפות אחרות,
ואנחנו לא מדברים על סוג של הקרטוגרפים המפה כאן,
על פונקצית מיפוי אנחנו מדברים.
בהקשר אנחנו מדבר כאן, מפה
הוא מבצע מיוחד ניתן לבצע במערך
ליישם פונקציה מסוימת לכל אלמנט של מערך זה.
וכך היינו אומר ב מקרה זה, אולי array.map,
ובתוכו, אנחנו עוברים למפה היא פונקציה שאנחנו רוצים
שאחול על כל אלמנט.
אז זה סוג של מקביל לשימוש ב לולאה ללחזר על כל אלמנט
ולהחיל מסוים לתפקד לכל אלמנט,
רק JavaScript יש זה נבנה ב רעיון של מיפוי שניתן ליישם.
וזה הקשר גדול ל לדבר על פונקציה אנונימית.
>> אז בואו נגיד שיש לנו מערך זה של מספרים שלמים.
זה נקרא nums, ויש לו חמש דברים בזה, אחת, שתיים, שלוש, ארבעה,
חמש.
עכשיו אני רוצה למפות כמה פונקציה למערך זה.
אני רוצה יש להם תפקיד להחיל לכל אלמנט של המערך.
ובכן, נניח שמה שאני רוצה לעשות הוא פשוט להכפיל את כל האלמנטים.
מה אני יכול לעשות רק הוא להשתמש בלולאה לי var שווה 0, אני הוא פחות מ
או שווה ל 4, אני בתוספת, בתוספת, ו אז להכפיל כל מספר.
אבל אני גם יכול לעשות משהו כזה.
אני יכול לומר nums היה בעבר אחד שתיים שלוש ארבע חמש,
עכשיו, אם כי, אני רוצה אותך תחול על מיפוי מערך זה
שבו אני רוצה אותך להכפיל כל מספר.
וזה בדיוק מה שקורה כאן.
אבל שים לב למה שאני עובר כבטיעון למפה.
זה פונקציה אנונימית.
ושימו לב שלא ניתנה פונקציה זו שם,
רק נתתי לו רשימת פרמטרים.
ואז זה דוגמא של פונקציה אנונימית.
>> אנחנו בדרך כלל לא היינו קוראים לזה פונקציה מחוץ להקשר של המפה.
אנחנו מגדירים אותו כפרמטר כדי למפות, ולכן אנחנו לא באמת
צריך לזה שם אם דבר היחיד שמעניין אותו זה המפה
וזה מוגדר נכון יש בתוך המפה.
ואז זה פונקציה אנונימית.
אנחנו לא מסוגלים לעשות בעבר זה.
מפה כמה שפונקציה מקבל פרמטר אחד, num,
ומה הפונקציה שעושה הוא חוזר NUM פעמים 2.
וכך אחרי זה מיפוי יושם,
עכשיו זה מה שנראה nums כמו, שתיים, ארבעה, שש, שמונה, 10.
ואנחנו נקפוץ לי חלון דפדפן ורק
תסתכל על זה מהר מאוד גם כן.
>> אז יש לי עוד כפתור כאן בדף הבית שלי בשם כפול.
וכשלוחץ פעמיים, וזה אומר לי שלי לפני זה היה אחד, שתיים, שלוש, ארבעה,
חמש אחרי שתיים, ארבעה, שש, שמונה, 10.
ואם אני חוזר ולחץ לחיצה כפולה שוב, שני, ארבעה, שש, שמונה, 10.
ואז אחרי, ארבעה, שמונה, 12, 16, ולאחר מכן 20.
ומה אני עושה בתפקיד זה?
ובכן, אם אנחנו פשוט לקפוץ לIDE, ו אני מושך את הפונקציה אנונימית שלי, כאן
על קו שבעה עד 13, אני עושה עבודה מפוארת קצת כאן,
אבל אני פשוט להדפיס את מה כרגע במערך.
אז על קו 16, 17, ו -18, יש המפה שלי.
זה המקום שבי אני החלת הכפלה זו פונקציה לכל אלמנט.
ואז קצת יותר למטה, אני רק עושה את אותו הדבר
אני עושה לפני, למעט עכשיו אני להדפיס את התוכן של המערך
אחרי כן.
אבל כל מה שעשיתי כאן הוא פשוט להשתמש פונקציה אנונימית
למפות פני כל מערך.
>> אז נושא אחד יותר גדול כדי לדבר על ב JavaScript היא הרעיון של אירוע.
אירוע הוא משהו שפשוט קורה כאשר משתמש אינטראקציה עם האינטרנט שלך
דף, אז אולי הם לוחצים משהו, או אולי בדף סיום טעינה,
או אולי הם כבר עברו העכבר שלהם על משהו,
או שהם כבר הקלידו משהו בשדה קלט.
כל הדברים האלה הם אירועים המתרחשים בדף האינטרנט שלנו.
ויש JavaScript יכולת לתמוך במשהו
בשם מטפל באירועים, ש היא פונקציה של קריאה חוזרת ש
מגיב לאירוע HTML.
ומה פונקציה של קריאה חוזרת?
ובכן, זה בדרך כלל רק עוד שם לפונקציה אנונימית.
זה פונקציה ש מגיב לאירוע.
וזה המקום שבו אנו מגיעים ל רעיון של קשירת פונקציות מסוימות
לתכונת HTML מסוימת.
רוב האלמנטים של HTML תמיכה בתכונה
שלא לדבר על בhtml וידאו למשהו כמו בקליק
או בריחוף או בעומס, כל האירועים הללו
כי אז אתה יכול לכתוב פונקציות עסקה שעם אירועים אלה
כאשר אירועים אלה להתרחש בדף האינטרנט שלך.
>> ואז אולי html שלך נראה משהו כזה.
ויש לי שני כפתורים כאן, כפתור אחד וכפתור שני,
וכאן יש לי כרגע שום דבר מוגדר,
אבל זה מקום שבו התכונה ב לחץ הוא כנראה חלק מתג html שלי.
אז כנראה כאשר אני מגדיר את מה ש קורה בתוך התכונה ש,
זה הולך להיות קצת JavaScript פונקציה שמגיבה לאירוע
ככל הנראה של לחיצה על כפתור אחד או שניים כפתור.
>> מה סוג של מגניב על זה אנחנו יכול לכתוב מטפל אירוע גנריות.
והנדלר אירוע זה ליצור אובייקט אירוע.
ואובייקט האירוע יגיד לנו איזו משני הכפתורים היה לוחץ.
עכשיו איך זה עובד?
ובכן, זה עשוי להיראות משהו כזה.
אז נגדיר הכפתורים הראשונים שלנו יש תגובה לקריאה החוזרת
פונקציה שתיקרא כאשר לוחץ על לחצן,
אנחנו קוראים לשם התראת אירוע.
ושים לב שבשני המקרים אנחנו עובר בפרמטר אירוע זה.
אז אנחנו קוראים לפונקציה זו או כאשר פונקציה זו
מופעל על ידי האירוע שקורה, זה הולך ליצור אובייקט אירוע זה
ולהעביר אותו כ פרמטר להתריע שם.
ושאובייקט האירוע הוא הולך להכיל מידע
על איזה כפתור שלחיצה עליו.
ואיך הוא עושה את זה?
ובכן, זה עשוי להיראות משהו כזה.
אז עכשיו בי נפרד קובץ JavaScript, אולי אני
צריך למצוא את זה שם התראת פונקציה, ש
שוב מקבל שפרמטר אירוע.
ואז כאן הוא המקום שבו אני מזהה איזה כפתור הופעל,
הדק var שווה אירוע אלמנט מקור נקודה.
מה היה המקור שנוצר אובייקט אירוע זה, שהתקבל ב?
זה היה כפתור אחד או שזה היה כפתור שניים?
>> ואז כאן כל מה שאני עושה הוא להדפיס את trigger.innerhtml.
ובכן, במקרה זה, בזה הקשר, trigger.innerhtml
זה בדיוק מה שכתוב על הכפתור.
זה פשוט כל כך קורה אם אנחנו קופצים בחזרה לשנייה, שהיית
להיות מה שבין תגי כפתור אלה.
זה יהיה כפתור אחד או שניים כפתור.
ובואו נסתכל איך הייתם מטפל באירועים זה
נראה אם ​​היו לנו אותו פועל בפרקטיקה.
>> אז קודם כל, יש לך events.js נפתח,
שהוא קובץ JavaScript שבי יש לי מוגדר בפונקציה זו.
וכמו שאתה יכול לראות, זה פחות או יותר בדיוק מה
רק שראינו בשקופית לפני שנייה.
ואני אלך על ל דף הבית אנחנו כבר משתמשים.
ויש לי כאן כפתור אחד וכפתור שני.
ואני לוחץ על כפתור אחד.
אתה לוחץ על כפתור אחד, אם אתה ניתן לראות כאן בהתראה.
אוקיי.
לחץ על לחצן שני, לחץ על כפתור שני.
>> אז יש לי שני הכפתורים אותו קריאה לפונקציה, נכון?
שניהם היו שם התראה אירוע, אבל אובייקט אירוע זה
שמקבל נוצרים כאשר אנו לוחצים על זה אומר לנו שהכפתור היה לוחץ.
אנחנו לא צריכים לכתוב שתי נפרדים פונקציות או עסקה עם בעל
להעביר כל מידע נוסף.
אנחנו רק להסתמך על מה יהיה JavaScript
לעשות עבורנו, שבו הוא ליצור ש סוג של אובייקט אירוע בשמנו.
יש הרבה יותר לJavaScript מ מה שמכוסים בסרט הזה,
אבל יש אלה יסודי צריך להביא לך
די ארוכות דרכים לימוד כל מה שאתה
צריך לדעת על זה שפה מעניינת.
אני דאג לויד.
זה CS50.