>> בסדר.
אז, ב-JavaScript.
כמעט לכל אחד בחדר הזה כנראה יש במידה מסוימת
של נוחות עם זה אם זה היה בדרך חזרה, כאשר בSC50
או שזה היה אישי פרויקטי אינטרנט או אפילו
אם עשית קצת את זה עם הפרויקט הזה בעבר PHP בסיס,
אך על פי רוב חלק, רבים מכם,
גם אם יש לך מעט נחמה
עם JavaScript אולי לא נלקח
כמובן מאליו איך עבודות שפה ומה שקורה
על מתחת למכסת המנוע ו מה שאנחנו הולכים לנסות
לעשות היום הוא קליפה בחזרה חלק מהשכבות טכני
ממה הוא JavaScript, איך היא שונה משפה
כמו PHP, איך יכול להיות משמש לא רק בצד הלקוח
אבל גם בצד שרת ו לאחר מכן להתמקד באופן ספציפי מאוד
במסגרת זו, שים לב לא JS שהוא בעצם זמן ריצה,
תכנית שבה אתה יכול לבצע קוד JavaScript,
בצד שרת וזה הופך סוג פופולרי יותר ויותר
של באותו המעמד זה ימים כנראה רובי ו-PHP
ופייתון ותראו
שיש לו כמה די תכונות רבות עוצמה בדרך של כמה
של השפה מובנית בונה.
אבל קודם, כמה קל דברים רק כדי להזכיר לך
כיצד שפה זו עובדת ו אם יש לך בעיה לראות כל
של הצעקה הזאת, רק ואנחנו יהיו להתאים.
לכן, כמו ב-PHP שיש אין מושג של פונקציה העיקרית,
אתה פשוט תתחיל לכתוב קוד
ואתה יכול לכך לפרש אותו מלמעלה למטה.
בהקשר של דפדפן
או בצד שרת משהו אנחנו תראו כמה דוגמאות
בקצת.
תנאים, מבחינה תחבירית שווה ערך ל-PHP, כמו גם C,
C + + ועוד כמה שפות אחרות אז רק כדי לתת לך תחושה
איך אנחנו יכולים לבנות את זה,
יש רק הקנונית מצב.
ביטויים בוליאנית, אותו דבר מבחינה תחבירית כפי שראית
באותו אחר אלה שפות, הן עבור oring
ולסיום דברים ביחד.
יש JavaScript מתגים, בדומה למטלות PHP והאחר של
ואתה לא מוגבל, כמו ב-C להפרימיטיבים נפרד
כמו תווים וints יכול למעשה לעשות סוגים אחרים של ערכים.
לולאות. אז, זה הוא בדיוק אותו הדבר
וכנראה תריסר שפות, תוך לולאות, לעשות בזמן שלולאות
ולאחר מכן את הטריק הזה כאן.
אז, זה סוג של המכונה ספירה מהירה
וזה בדרך מאוד חכמה של בדיוק כמו ב-PHP לעשות
עבור כל FU כסרגל באופן דומה אתה יכול,
באובייקט JavaScript, שבו אובייקט הוא השם
של משתנה כאן, למשל, אני var באובייקט ועל כל איטרציה
של לולאה זו, הוא אני הולך להיות אחד
מפתחות מאותו האובייקט.
לכן, אם יש לך אובייקט עבור תלמיד, ותלמיד מזהה
ושם ובית, איטרטיבי אני אקח
מהשווי של תעודת זהות ושם ו בית ואתה יכול לכך מדד
לאובייקט כאילו זה מערך באמצעות סוגר מרובע
סימון כדי לקבל את הערך של הזהות או שם המפתח
או בית וכן הלאה.
ובניגוד לנפוץ הנחה, JavaScript אובייקטים,
מאפיינים הם לא מובטח בהכרח להיות
באותו סדר, זה גם נכון ל-PHP ולכן אין להניח
שדברים יישארו באותו סדר
כי אתה מכניס מפתח אלה זוגות ערך לאובייקט.
מה דעתך על מערכים?
יש כמה דרכים לכתוב את זה מבחינה תחבירית
אבל זה כנראה הכי כיכר עכשיו רק באמצעות נפוצה
סימון סוגר.
אז, זה משתנה ל להתקשר למספרים המכילים מערך
של שישה מספרים שלמים שם, הנה מחרוזת פשוטה
ושים לב מה נעדר מדוגמאות הללו,
מה הוא JavaScript ככל הנראה חסר.
כן. לכן, אין שום מושג של הקלדה, בוודאי לא
בהקשר זה כאן, אבל זה אכן חוט.
אז, יש לי JavaScript סוגים וזה אכן היה מערך
שהוא עצמו סוג וכל אחד מהאלמנטים
במערך שהיו מסוג מספר כJavaScript קורא להם.
אז, זה שהוקלד באופן רופף שפה ואנו רואים
JavaScript שכמו PHP יש מפעיל זהות
ומנגנונים אחרים ל בעצם בודק מה הסוג
של כמה משתנים הוא הן לבדיקת שגיאות
וליישומים אחרים.
והנה אובייקט מדגם המכיל רק מזהה ושם.
ועכשיו, שים לב שאנחנו באמצעות סימון סוגריים מסולסל,
הכניסה ולבנה החלל הוא סוג של משמעות
וזו מצהירה משתנה ששמו הוא רוב
וזהותו היא 1 ו סוג התאריך הוא כאן המספר שלנו
ומחרוזת בהתאמה.
ואז זה משהו מעט שונה
אם אי פעם עשו משהו עם אייאקס בימים אלה?
אתה כנראה בשימוש אובייקט כזה
אבל מה שראוי לציין כאן?
מה זה מבחינה תחבירית אי פעם כל כך שונה רק כמה,
דברים בין דוגמא זו שהוא אמנם קטן יותר
והדוגמא הגדולה הזה.
אז, לראשונה בהדיוט של טווח, מה זה?
מהו הסוג של צוות היית אומר?
בסדר, זה מערך, זה מערך של מה?
>> אובייקטים.
>> בסדר, זה מערך של אובייקטים.
ועכשיו, להתמקד רק אחד - כל אחד מהאובייקטים אלה,
מה שונה בין זה וזה?
>> המפתחות הם מחרוזות.
>> כן. אז, מפתחות הם מחרוזות,
והמפתחות הם למעשה מחרוזות בשני המקרים
וזה סוג של אידיוטים
בעיצוב ההיסטורי דעתי החלטה בכל פעם שאתה משתמש
JSON, JavaScript סימון אובייקט,
שהוא למעשה פורמט תחבורה
לשליחת נתונים בדרך כלל בכל הרשת
בין הלקוח לשרת, אתה צריך לזכור
כי זה לא באמת JSON חוקי וזה אחד
של FYIs אלה, אלא אם אי פעם לדפוק את הראש בקיר
במשך כמה דקות לא טוב הסיבה, זה לא JSON חוקי
כי המפתחות נמצאים לא ציטט למעשה.
JSON דורש בצורה אידיוטית כי המפתחות לא רק להיות מצוטטים,
אלא שהם יצוטטו כפליים, ציטוטים בודדים, אינם מספיקים.
לכן, דבר קטן טיפש ויותר מכך כיף
למטרות של היום, אבל זה גם יהיה חוקי של JavaScript
זה פשוט לא - ההפך אינו נכון.
בסדר.
אז, נוכל לראות שפע יותר מזה.
בסדר.
אז, זה JavaScript מבחינה תחבירית כנראה די
מוכר, כל אחד מכם שיש להם מעולם לא השתמש JavaScript לפני
זה לא קפיצה גדולה מ-PHP או ביותר בכל שפה פרוצדורלית
שייתכן שהשתמשת.
לכן, היום אנחנו מתמקדים ההיבטים המעניינים
ב-JavaScript במיוחד בהקשר של שום JS
אך לא רק בגלל עד עכשיו יש לך כנראה,
אם השתמש Javascript, השתמשתי בו בתוך דפדפן.
לכן, לא JS הוא סביבה אז בקצת הולך
כדי לאפשר לנו לגשת JavaScript לקוח קוד -
בצד שרת, אבל ראשון, בואו נסתכל
במשהו שהוא קצת יותר בצד לקוח.
אז, אני כבר הלכתי ובכך הוא מקושר באתר האינטרנט של הקורסים,
אם אתה רוצה לשחק יחד, יש שתי ספריות משנה
במיקוד של היום נקרא חתיכים מקור zip באתר
ואלה הם רק כמה דוגמאות זכרונות
דברים שאולי ראו לפני ואני בניתי אותם הסוג של
מפשוט ביותר למעט יותר מסובך ללהקניט
את חלק מהתכונות ב-JavaScript.
אז, בואו נלך קדימה ולקחת תסתכל למשל בשלב זה.
אז, בעצב התג למצמץ היה הרגת את לפני כמה שנים
כדרך יש לי יפה יותר ויפה יותר
והתג למצמץ היה, פשוטו כמשמעו, סוגר פתוח למצמץ קרוב סוגר
וזה סוג של אין כבר לא איתנו.
אבל, אנחנו עדיין יכולים להחיות הרעיון הזה של תג רק על ידי סוג
לחשוב על זה מבחינה לוגית, איך אתה הולך
על עשיית משהו כמו זה למצמץ באופן אינטואיטיבי?
בהנחה שאתה יודע קצת קצת JavaScript ו-CSS או
בשלב זה, זה בסדר אם אתה לא יודע.
>> הגדרת פסק זמן ולהסתיר זה אז אחרי אני לתייג אותו
החוצה ולהראות את זה שוב.
>> כן, מושלם.
זה סוג של תכנות 101,
איך היית להשיג אפקט חזותי כזה?
ובכן, אתה איכשהו צריך להראות משהו
ולהסתיר משהו, אז מופע משהו, להסתיר משהו
וכיונן מציע שימוש בסוג כלשהו של פסק זמן,
איזה לוח זמנים שאתה יכול לעשות זה שוב ושוב, ללא צורך
להשתמש בלולאה או משהו כזה.
אז, תן לי ללכת להרף-0.html
ותן לי לכווץ הגופן קצת
כך שיותר מזה מתאים.
ובואו נסתכל במה שקורה כאן.
אז, קודם כל, שם לב שהגוף
דף זה הוא סופר פשוט, חלק פנימי של הגוף
של הדף הוא רק div.
באופן שרירותי שנתתי זיהוי של ברכה
וזה יכול להיות כל דבר כל כך הרבה זמן כמו שזה ייחודי
ואז יש לי רק כמה טקסט פשוט, שלום עולם.
לכן, אם אני עכשיו לגלול מעלה, להבחין בכמה סטיילינג רך.
לכן, אני אומר, חד ברכה, שכפי שאתה יודע
ב-CSS רק אומר באופן ייחודי לזהות את הרכיב
עם רעיון של ברכה,
גודל גופן הולך באופן שרירותי יהיה זה, שוליים ויישור טקסט.
אז, לא מעניין פרטים אסתטיים
בערך למרכז את הטקסט.
לכן, החלק המעניין הוא בתג את התסריט כאן
שאני במקרה לשים בתוך של ראש הדף.
אז, נה - אתה יכול לעשות זה בכל מספר הדרכים
ואנו רואים כמה חזרות של אותו בתכנית זו
אבל בואו נתחיל מלמעלה.
אז, אני כבר הכריז פונקציה שנקראת מצמוץ
וכנראה שהוא משתמש בזה מובנה בשיטה הנקראת DOM
getElementById שהוא אולי אחת השיטות החזקות יותר
שאתה מקבל מהקופסה עם JavaScript מחפש
"ברכה" לא חייבת להיות במרכאות כפולות כמו שזה היה
ב-HTML הוא או זה בסדר כל כך הרבה זמן
כמו שאתה סגנונית בימים אלה עולים בקנה אחד אני מעז לומר
אנשים רבים משתמשים בג'אווה, גרשיים בודדים ב-JavaScript,
מרכאות כפולות ב-HTML, אבל זה לא ממש משנה
כל עוד אתה עולה בקנה אחד.
אז, הנה, אם אתה לא מכיר, למעשה אתה יכול לגשת
עם JavaScript CSS נכסים על אלמנטים.
אז, שם לב שיש לי הכריז על משתנה בשם div
ומאוחסן בתוך של משתנה זה,
התייחסות לכל מה שאלמנט DOM הוא.
לכן, אם אתה חושב לחזור לCS50 או כל כיתה שבו אתה חשבת
על מבני עץ ו DOM, הסוג Document Object Model,
זה רק התייחסות לצומת בעץ,
שמייצג את דף זה
ואם div.style.visibility רכוש שווה, שווה, שווה,
נסתר, אז אני פשוט רוצה לעבור אותו
כמו יונתן הציעה אחרת אני רוצה
כדי להחליף אותו לנסתר.
עכשיו, כמו בצד, למה המשולש שווה שם?
או מה זה לעומת שווה כפול?
>> מקביל קפדנית.
>> מצטער.
>> מקביל קפדנית.
אז, זה מפעילי הזהות
שבו על ידי אתה בודק לא רק את הערך של המשתנה
כתחושה שווה, שווה אלא גם את הסוג שלו.
לכן, למרות שיש לנו לא צוינו כה כל נתוני
סוגים לכל משתנים ב זה או כל השקופיות,
יש סוג הקשורים עם המחרוזת שהוסתרה
עם ערך זה, מוסתרים ו כי הוא של מחרוזת כמובן.
לכן, במקרה זה, לא ממש משנה
משום שאין שום דרך ש אנחנו הולכים לצרף את מחרוזת
של "סמוי" עם ערך אחר
אבל זה הוא לעתים קרובות טוב הרגל הייתי אומר כדי לקבל
לשימוש שווה, שווה,
סימן שוויון הוא בדרך כלל דבר טוב.
זה יעשה את הקוד שלך חזק יותר גם ב-PHP, אבל
ובJavaScript בגלל שאתה תרוץ
אל מדי פעם מקרי פינה שבו הערך יכול להיות אפס
כי אתה בודק ול אפס ניתן conflated עם שווא
או יכול להיות שלא וכמו ב-PHP,
מדי Javascript יכולה להיות מרובה ערכים שקריים שבו באפס
והשקר ובטל ולא מוגדר יכול לפתור את כל משתמע
לשווא.
אבל אם אתה באמת רוצה כדי לבדוק אם ערך מסוים
כמו אפס, המספר, או השווא בוליאנית אז יש לך
כדי להשתמש באופרטור זהות זו.
אז, זה יכול לקרות כדי לקבל לכל מקרה למרות שכאן,
זה סוג של המשמעות כי אנחנו יודעים שאנחנו בודקים
עבור ערך מחרוזת וזה לא הולך להיות כל דבר אחר.
אז, הנה הקסם אז, אם אני לגלול למטה כדי הקו הזה כאן,
ככל הנראה, שנבנה בחלון האובייקט
וזו היא תכונה של דפדפן אתה יכול לגשת
לזה סופר גלובלי אובייקט נקרא חלון,
בתוך כך הוא כמה פונקציונלי,
אם פיסת בי נקבע מרווח
וזה לוקח, ככל הנראה, אילו סוגים של טיעונים?
כן.
>> קריאה לפונקציה וזמן.
>> טוב. לכן, פונקציה להתקשר וזמן
וכן במיוחד התייחסות לפונקציה,
מצביע לפונקציה מבחינה מסוימת
וזה הפונקציה זה הולך
כדי לקבל להורג בכל מספר אלפיות שנייה, ובמקרה זה,
זה כל 500 אלפיות שנייה.
אז, זה דרך של גרימת ביעילות ובלולאה אינסופית
ללא שימוש באיטרציה אבל במקום לספר JavaScript
למנוע בתוך של הדפדפן
כדי לעשות את זה כל 500 אלפיות שנייה או קרוב
500 אלפיות השניה כפי שהוא יכול,
מתברר כי מתחת למכסת המנוע,
יש מה שנקרא אירוע לולאה ואנחנו עוד נחזור לזה
בהקשר של צומת JS כי פשוט כל הזמן סוג
לשבת שם, ספינינג, מחכה לעבודה שצריך לעשות
וברגע שזה מבין,
500 אלפיות השניה עברו מצמוץ יקבל התקשר שוב
והוא שוב ושוב לצד כל עבודה אחרת
זה צריך להספיק.
אז, מה אנחנו יכולים לשפר כאן?
ובכן, הרשה לי לפתוח עד blink-1.html
ולהדגים את blink-1.html
כאסתטי זהה בצורה מושלמת.
אז, מה אנחנו יכולים לשפר כאן?
ובכן, שים לב שזה היה סוג של חסר תועלת
להגדיר פונקציה שנקראת בלינק, כי כמה
בכמה מקומות עשו לי קורא הרף הפונקציה?
>> רק פעם אחת.
>> אז, אחד.
אז, זה לא היה רע, ב למעשה זה כנראה די
ישר קדימה.
אני מוגדר כהרף פונקציה, אני קורא הרף פונקציה בדרך
של פרמטר זה, אבל מבחינה טכנית,
לא הייתה סיבה ל זה והפרדיגמה נפוצה
ב-JavaScript הוא למעשה לעשות שימוש בפונקציות למבדה
כפי שאתם אולי זוכרים מ 51 או פונקציות בעילום שם
שבו אם אתה לא צריך שם לפונקציה,
אם אתה קורא את זה רק בהחלט במקום אחד,
למה לטרוח להעמיס את הקוד שלך, להעמיס את המוח של המתכנתים
ואת השם שלך בחלל באמת עם סמלים
כי אתה לא באמת צריך לדאוג.
וכך, בגרסה זו כאן,
שם לב שאני מתקשר window.SetInterval ישירות
בחלקו העליון שלי תג סקריפט אז אני מעביר
בפונקציה חסרת שם שלא לוקח ארגומנטים
וזה באופן מושלם קנס ולאחר מכן הגוף
של פונקציה שהיא מופיעה היא זהה למה שהיה בעבר
ותחבירי בלבד הבדל עכשיו הוא
כאן למטה ליד 500.
אני סוגר את הגוף של הפונקציה
ואז אני אומר ביצוע שהקוד קודם,
כל 500 אלפיות שנייה.
שינוי כל כך, מאוד שולי
אבל צעד לקראת מה כנראה אלגנטי יותר
יישום זה.
אז, בואו ניקח את זה צעד נוסף אם אני עכשיו אלך
להרף שני, תוכל תראה את ספרייה משותפת,
ההשפעה שהוא הולכת
להיות חסר חשיבות לחלוטין מבחינה אסתטית, אבל אם אנחנו הולכים
לגרסה שתי כאן, הודעה כי בחלק העליון של הראש שלי,
צירפתי הגרסה האחרונה של jQuery.
ואז, כאן למטה, אני רק ניקיתי
את הקוד קצת, זה לא הולך להיות עולם כיף
כדי להמשיך להשתמש פונקציות DOM ילידים
וסוג של JavaScript גלם.
למעשה, JQuery כפי שאתה יכול יודע הפך כל כך פופולרי
כי רוב האנשים פשוט סכסוך jQuery עם JavaScript
אבל באמת רק ארוחת ערב ספרייה שימושית נכתבה
על ידי בחור בשם ג'ון Resig ומאז אחרים
שיש להם רק גורם לי הרבה דברים משעממים
ב-JavaScript קל יותר ותמציתי יותר.
לכן, במקרה זה כאן מה קורה?
אז, יש לי מראה זה של סימן דולר, עוד על כך
רק רגע, ואז מדובר בבורר ה-CSS.
אז, זה דומה מאוד ב רוח למה שעשיתי בעבר,
אבל הפעם, אני פשוטו כמשמעו שימוש בתג החשיש
כדי לציין ייחודי מזהה בשם ברכה
ולאחר מכן, ככל הנראה, . Css הוא שיטה הבנויה
לכל אובייקט הוא שאני פשוט יצרתי
ואני בודק את הערך של מפתח הראות.
ואם הערך של מפתח ש שווה, שווה, שווה, נסתר,
אז אני הולך לעבור את זה ו אני הולך לעבור את זה הפעם
על ידי שימוש באותה השיטה שככל הנראה עמוס
במובן זה שיש לו שתי חתימות שונות,
אחד עם טענה אחת ו אחד עם שני טיעונים,
השני של אשר הוא כלב הציד,
לשעבר אשר הוא גטר כביכול.
ואם סקרן ואם הייתי מעולם לא נראה ממש בשלב זה,
אם אנחנו הולכים לjquery.css תקווה הלהיט בראש הוא אכן זו
ואתה יכול לראות יותר הסבר רשמי
שאנחנו פשוט להשתמש בזה, . Css עם שם מאפיין
ולאחר מכן סטר זה CSS הנקודה
עם שם מאפיין וערך.
אז, באופן שולי נקי, אבל שים לב לסוג של דפוס כאן
עם כל איטרציה של קוד זה,
אנחנו סוג של מה שהופך את הדוק יותר והדוק יותר ויותר
ויש אומרים שעיצובים טובים יותר
מאז שאנחנו משתמשים במישהו של קוד אחר שבוטל
חלק מהמורכבות.
אז, עכשיו בואו נעשה את זה אפילו פשוט יותר.
ולמעשה, אם אני תסיר את כל ציטוטים שתראו רק את כל
להגיב תראה איך זה פשוט קיבל.
הבדל אחד כאן, כמובן, הוא
כי אני משתמש במתג שיטה שבה גם מגיע מובנה
לjQuery וזה רק
בגלל שמישהו אחר כתב את הקוד
שמחליף למעשה הגדרת הנראות
של כל אלמנט DOM שאתה שולח אותו.
לכן, יותר ויותר טוב.
וכן, מדובר בדפוס,
אף על פי שמדובר בארוחת ערב דוגמא וסוג פשוט
השפעה נטו טיפשית אשר היא פיסת הטקסט מהבהבת,
זה סוג של מחשבה תהליך שאתה צריך לחשוב -
לחשוב על לא בהכרח הראשון
כתיבה פסיבית משהו לפרויקט הקרוב
אבל בהחלט כמו שאתה לחזר עם היועץ שלך או איתי
ופגישות צוות או שאתה רק בקוד חברי צוות שלך
על הידוק את דברים, נכון?
אחרי הכל, הם פחות -
פחות שורות קוד סופו של דבר יש לך
בתאוריה פחות באגים צפוי להיות מזמין
כי יש פשוט פחות קוד להתעסק עם.
בסדר.
אז, כמה מזנונים.
פונקציות למבדה, פונקציות בעילום שם,
על רבים מכם לא ראה לפני
ולאחר מכן גם רק הידוק דברים עם ספרייה
כמו jQuery בזה מקרה מסוים.
בסדר.
כל שאלה?
בואו נעשה אחד אחר לקוח היבט צד כאן,
בטופס אפס יש לנו השפעה נטו זה.
צורה סופר פשוטה וככל הנראה אם אני מנסה לחץ להרשמה כאן,
בהתחלה זה אומר לי אתה נרשם, טוב, לא ממש.
ובכן, מדוע זה כך?
ובכן, הנה טופס 0.html קוד מעט מאוד,
אין JavaScript כלשהו ו זה לחלוטין סוג מזויף
של צורה, כי הפעולה ערך הוא registered.html
מה שאומר שלא משנה מה אני מקליד לתוך טופס זה,
איפה זה הולך תישלח בשרת?
כן. לכן, כדי registered.html וזו ללא ספק קובץ HTML
אשר על כן סטטית קובץ שאין לו אמצעים
של לקיחת קלט משתמש בהנחה אין קוד JavaScript
מוטבע בו זה מחפש ב-URL
אז זה לגמרי NOOP ו שום דבר לא הולך לקרות
עם הנתונים שנמסרו, אבל אתה יכול לראות את המבנה
של טופס HTML5 פשוט למדי
שיש לו כמה את הסיסמה, כמה סוגי קלט.
אז, בואו ממש עכשיו להוסיף קצת בדיקת שגיאות
ולראות איך אנחנו יכולים לשפר את זה.
אז, הנה הוא סוג של עניים דרכו של אדם ליישום זה
וזה סוג של נתח מגעיל של קוד.
גלילה אז בואו הראשון של עד לתחתית
כדי לראות מה יש באותו ומה שונה.
הדבר היחיד ששונה עכשיו בין זה
והגרסה הקודמת היא כי אני כבר קבלתי את הצורה וזיהוי
מיכול "רישום" יש דבר היה שאני רוצה
אבל שלו אמור להיות באופן ייחודי זיהוי אפילו זה לא
הכרחי, כי אם דף יש רק צורה אחת בוודאי
הצלחתי למצוא אותו עם אחד שיטות הבורר של jQuery.
אבל דרך זו רק גורמת זה יותר דטרמיניסטי.
לכן, אם אני עולה עכשיו לתסריט שלי תג, שים לב את הדברים הבאים,
שווים window.onload פונקציה אנונימית.
אז, מה עושה את זה?
לכן, ייתכן שאתה זוכר כי ב תכנות בצד הלקוח -
JavaScript ולא דפי HTML יש אירועים שונים הקשורים
עם אלמנטים, לחיצה והגשה והתמקדות
וטשטוש ואחר כגון אירועים שיכולים לקרות
כמשתמש בדרך כלל אינטראקציה עם הדף,
window.onload עושה מה שהוא אומר.
בכל טעינת חלונות
לכן ברגע שכל התמונות היו לאחר הורדה כל הקבצים
כבר הוריד ופעם אחת הדף נטען,
לעשות את הקוד הבא, ו שמתי לב, אם אני עובר לתחתית
בשיטה זו, שים לב כי אין סוגריים
לאחר הסד המתולתל כלומר
שאני לא מבצע פונקציה זו עד כאן עכשיו,
הדפדפן הולך לבצע זה בשבילי כאשר הוא קבע
שהדף נטען.
אז, בואו יראו את מה שעשינו,
document.getElementById הרשמה
כך שרק נותן לי התייחסות לצומת
בעץ זה של יש זיהוי של רישום.
ועכשיו, אני הולך לרשום מטפל באירועים אחר
על ידי עושה form.onsubmit מקבל פונקציה אנונימית זה
מה שאומר את הדברים הבאים קוד צריך לבצע בכל פעם
הטופס שהוגש.
עכשיו, רוב זה רק סוג של משעמם היגיון.
לכן, אם הערך של שדה הדוא"ל בטופס
"שום דבר" אז אתה חייב לספק את כתובת הדוא"ל שלך,
אתה צועק על המשתמש עם להתריע ולאחר מכן לחזור שווא.
ואז יש לי חבורה של שיקים אחרים,
הבדיקות לסיסמה,
בודק אם סיסמאות הן אותו הדבר,
הבדיקות אם ההסכם תיבת סימון מסומנת או לא
ואני רק צועק על המשתמש אם בכלל
מבחנים אלה נכשלים למעשה.
וכך, הנה דוגמא אפילו למרות שזה קצת מאולץ
כאן העובדה שאני משתמש שווה, שווה, שווה,
משמעות הדבר היא שהמשתמש לא יכול לנסות להונות אותי
על ידי הקלדת מה הערך.
או יותר נכון אני באמת בדיקה לנוכחות
של המחרוזת הריקה, המשתמש לא הקליד שום דבר עדיין.
אם משתמש הקליד באפס, פשוטו כמשמעו,
"אפס" באופן פוטנציאלי יכול להיות מבולבל עם המחרוזת הריקה.
ואני אומר שזה סוג של חסר משמעות כאן
כי ברור שאפילו אפס לא כתובת דואר אלקטרוני.
אבל אם זה היה יותר תחום הגנרי כמו שדה טקסט
או שם או תיאור או משהו שאתה רוצה ערך עבור
וזה לא בהכרח מבחינה תחבירית יש לי
להיות כתובת דואר אלקטרוני, המשתמש יכול להקליד משהו כמו אפס
ושוב מקרה פינה אבל זה למה בדרך כלל בדיקת סוגיו
דבר שימושי.
אתה באמת בודק עבור המשתמש שהוקלד דבר
לשדה זה.
אז, מה קורה אם אף אחד מבחנים אלה נכשלים, טובים,
חוזר אמיתי בתוך של מטפל באירועים
כמו onsubmit רק אומר בואו ההתנהגות המקורית באמת
להפיץ ולכן טופס יקבל הוגש.
וזו הסיבה שכשאני סוף סוף לחיצה על 'שלח לפני שהגעתי
דרך לregister.html ו אם אני עושה את זה עכשיו, הודעה מוקדמת,
אני צועק על אם אני לא לספק כתובת דואר אלקטרוני
ואני יכול להקליד malan@harvard.edu,
[הפונטי] ארגמן, ארגמן, סימון התיבה,
ועכשיו להירשם ו זה אומר לי, שוב,
אתה רושמים או לא ממש.
בסדר.
אז, בואו לנקות את זה פשוט קצת ולאחר מכן מעבר
לחדש חדש דברים בצד השרת.
לכן, אם אני נכנסתי לטופס-2.html, שם לב כמה דברים.
לכן, אחד, הבאתי jQuery חזרה לתערובת
לכן יש שוב סימן דולר זה
ועכשיו אני משתמש כמה שיטות jQuery.
אז, קודם כל, מה זה על זה סימן דולר זה
כל כך מיוחד כאן?
מהו סימן דולר שרוכים לאורך רוב כל קוד jQuery?
כן.
[הערה לא נשמע]
על אישור. לכן, פונקצית סימן דולר עובר DOM מחפש
משהו עם זה בורר CSS בפרט.
אז, נכון, אבל כמעט מדי מדויק.
זה מה שקורה כשאתה עובר במחרוזת
כמו במקרה זה, אבל אתה לא תמיד צריך לעבור במחרוזת.
למעשה, דוגמה לכך, מאוד השורה הראשונה כאן היא שזה לא
בורר CSS, אני מעביר בפונקציה למבדה.
לכן, באופן כללי יותר - כך, תשובה טובה, אבל מדויקת מדי.
באופן כללי יותר, מה הוא סימן דולר מייצג?
>> רק jQuery.
>> כן. אז, רק jQuery או שזה רק פונקציה
כי כמה שנות בחור לפני כתבתי ויש לי אנשים אחרים
המשופר מאז שפשוטו כמשמעו כברירת מחדל נקראת -
אופס, נקרא jQuery.
זה פשוט - מתברר מתוך שלא כמו הרבה
של סימן דולר שפות היא סמל חוקי לחלוטין לשימוש
בשמו של משתנה ואילו
בסימן דולר PHP ברור שיש לו משמעות מיוחדת
אבל ב-JavaScript, כמו ב שפות מסוימות, סימן דולר
ולהבליט וכאלה אחרים תווים מיוחדים חוקי לחלוטין
כדי להשתמש בסמל שלך שמות למשתנים.
אז, מישהו פשוט החליט כי, אתם יודעים מה?
זה הולך להיות די מייגע
על מנת להפוך את העולם כולו הקלד jQuery כל הזמן,
תן לי סוג של צמח יתד באדמה ולומר,
"ספרייה זה תהיה להשתמש בסימן דולר. "
ולמעשה, זו אין להעלות את הסיכון
שמישהו בזדון אחר הוא הולך להשתמש בסימן הדולר
לספרייה, אבל שלו או שלה יש דרכים להבטיח את מין
כי כאשר אתה משתמש בדולר לחתום עליו מפות לjQuery
כי אתה יכול לבדוק אם זה כבר הוקצה
למשהו במהות אחר.
בסדר.
אז, זה כל מה ש הוא, אין שום קסם.
זה פשוט סקסי מחפש חתיכת התחביר שהיא נחמד
וקל ומהיר להקלדה.
אז, מה קורה כאשר אתה הקלד סוגריים פתוחים סימן דולר
ולאחר מכן פונקציה אנונימית.
ובכן, מתברר שזה סימון מקוצר למעשה
לנקודת מסמך paren הפתוח מוכן.
אז, כפי ששמה לב סינתיה מוקדם יותר כבר מצאנו אחד
מקרה פינה.
אם אתה פשוט עובר ב הפונקציה למבדה,
את השפעתו של הדולר הסימן הוא קצת שונה.
למעשה, מה שבאמת קורים הוא שזה שווה ערך לזה,
עובר בהתייחסות ל אובייקט המסמך הגלובלי
שהוא גלובלי בדיוק כמו חלון האובייקט הוא
זה נותן לך כמה פונקציונלי מיוחד
המשפיע על העמוד השלם או דפדפן ומתברר
מתוך מסמך שכאשר אתה עוטף את זה עם jQuery,
jQuery בעצם מבין, הו, זו התייחסות
כדי שאובייקט מסמך מיוחד,
תן לי עכשיו להירשם מטפל באירועים בשם מוכן
שאינו ילידים JavaScript או DOM קשור.
מוכן הוא jQuery דבר שאומר
כאשר הדף נטען כל האלמנטים של HTML
אך לא בהכרח טעון, כל CSS והתמונות
וקבצים ו-JavaScript קבצי פלאש ואת אוהבת.
אז, זה צעד לפני על עומס אז קדימה
ולבצע את הפעולות הבאות.
והיתרון של שימוש במוכן פירוש הדבר הוא כי אתה יכול, אתה יודע,
שכל האלמנטים בDOM שלך,
כל מזוהה באופן ייחודי דברים עם תעודות, הם קיימים אפילו
אם הדף, התוכן שלה עדיין טעינה וטעינה
ויש לך כמה סמלים שבורים לרגע
או דף לבן ברקע.
כן.
>> מה היה קורה אם [לא ברור]?
>> דוגמא מושלמת, שאלה מושלמת.
אז, בואו נראה אם ​​אנחנו יכולים לדמות הזאת עכשיו.
אז, תן לי ללכת קדימה ולמחוק שני קווים זה עד כאן ולאחר מכן
בלי לטרוח לתקן כניסה, תן לי ללכת קדימה
ולמחוק את זה כאן למטה - אופס, זה כאן למטה.
ועכשיו, תן לי ללכת אל דף, ללכת לטופס-2.html וסוג
בהרשמה, שום דבר לא נראה יקרו, נניח, למה זה היה,
בואו נלך קדימה, לפתוח עד המפקח של הכרום,
לפתוח את קונסולה רק כדי לראות אם משהו קורה כאן, עכשיו,
להירשם, עדיין כלום.
לכן, הקוד הוא מבחינה תחבירית קנס
אז אני לא רואה שום הודעות שגיאה אדומה,
אבל מה שברור לא קורה?
אף אחד מהקוד שלי הוא נכון, זה לא עובד כך שאף אחד
קודיי נראה שיש ביצוע, אז למה זה?
ובכן, JavaScript ודפדפנים באופן כללי יותר לבצע את
תוכן של דף האינטרנט, בראש למטה, משמאל לימין.
והבעיה היא שבגלל שהחלק העליון
בדף זה יש HTML ואז ראש אז תסריט אז תסריט אחר,
זה הולך לקבל להורג לפני מה שהוא אפילו מוכן,
או אפילו קיים בעץ ייצוג של הדף.
הטופס עצמו, אפילו לא גוף קיים בשלב זה.
אז, jQuery היא מספיק חכמה עם בדיקת שגיאותיו של
שאם אין אלמנט עם את המזהה הייחודית של רישום,
זה לא הולך ל לחלץ אותך
ורק לעורר כמה קונסולה שגיאות ולשבור את כל הדף,
זה הולך להתעלם בשקט לך, אבל הסיבה שאף אחד
קוד זה אי פעם מבצע הוא
כי כאשר יש לך רשום זה להגיש את המטפל,
לא היה שום אלמנט לצרף אותו.
אז, זה סוג של לא אופ שם.
אז, על ידי ציון במקום, לחכות עד הגיל נטען
אם עשיתי window.onload דבר שהוא סוג
מדרך בית הספר הישנה של עשייה את זה או את דרך jQuery סקסית
ככה, אנחנו יכולים תגיד לו לחכות עד שכל
תגי HTML אלה שיש לי כך היה מנותח, שאפילו
אם התמונות לא נטענות, ב לפחות הצומת היא בעץ,
אז JQuery ניתן להבטיח כל מה שהוא שם.
כן.
[הערה לא נשמע]
כן, טוב, כן בהחלט.
לכן, הפתרון האחר ל זה, אם אתה לא משתמש בזה
או לא זכר שזה קיים,
לחלוטין שאתה יכול לזוז כל זה עד לתחתית
של דף האינטרנט, בתוך גוף עדיין, אבל מתחת לטופס
וזה גם היית לפתור את הבעיה הזו.
זה רק בדרך כלל נחשב מנהג רע.
זה קצת מבולגן ומרושל במיוחד
אם אתה שומר שיבוש הכל לחלק התחתון של הדף,
במיוחד כאשר אני שומר דברים פשוטים על ידי הצבת כל
הקוד שלי בתוך של דף ה-HTML
כאשר כמובן שאתה יכול בהחלט להיכנס להרגל
של הפקטורינג את זה לקובץ נפרד
ובשלב זה רק נחמד
לרכז את קבצים בראש.
פרט יש מחיר שאתה משלם
על ידי הצבת JavaScript נכסים אחר כמו קבצי CSS
בראשו של הדף, מה סיכון שאתה מפעיל?
>> טעינת דף איטי יותר.
>> טעינת דף איטי יותר, למה?
>> בגלל שאנחנו מנסים כדי לטעון את כל הספריות
לפני [לא ברור].
>> בדיוק בגלל דפדפנים לקרוא את הקוד העליון לתחתון,
משמאל לימין אם גוגל ניתוח הוא איטי
או CDN jQuery הוא איטי או ה-API של פייסבוק הוא איטית
וקובץ שפשוט נתקע פוטנציאלי בהתאם
על איך שטענת קובץ זה, כל דף יכול להופיע לתלות.
ואם אתה רואה את זה הרבה כנות
באתרי אינטרנט שיש להם הרבה פרסומות איכות נמוכה
עליהם, אנחנו פשוט איטי אחד או אתר שהופל אפשר לתלות דף
עבור חלק בלתי מוגדר מספר שניות
עד שלבסוף הדפדפן אני מקווה פעמים על ש
ואז מראה לך שאר הדף.
לכן, אם אי פעם השתמשו כמו פייסבוק, כמו כפתור,
בדף האינטרנט שלך, תן לי לראות אם אני יכול למצוא את זה
מבלי להיכנס כאן.
לכן, אם אתה הולך ל הכפתור כמו של פייסבוק
ולחץ על קוד גט, לעזאזל,
מאפשר לראות אם אנחנו יכולים למצוא את הדוגמא,
בטח מישהו שלח את זה.
[הפסקה]
אני אתן בכמה שניות אם אנחנו לא רואים את זה.
asynch פייסבוק - אישור.
אז, זה הקוד ואלא אם כן הם שינו את זה לאחרונה
כי פייסבוק בעצם ממליץ להשתמש
כדי לטעון את הספרייה שלהם ולמעשה מציע
שאתה מכניס את זה את גופתו של הדף שלך.
אז, פייסבוק מייעץ לך ליצור סוג של DIV הטיפש
כי יש רק זיהוי ייחודי כמו זה, אז יש לי תג סקריפט
וכל המורכבות הזאת בעצם מבצע את הפעולות הבאות
והם לא משתמשים בכל JQuery בגלל שהם לא רוצים
להניח כל דבר אחר יחסי תלות,
תן לי לעבור את זה על רק קצת.
אז, שם לב שיש להם פונקציה אנונימית כאן,
עוד על כך ברגע,
לאחר מכן הם משתמשים document.createElement,
הם יוצרים אלמנט DOM, זה כמו malloc כביכול
שם התג הוא מסוג תסריט, שזה אז ציון
שהתכונה סינכרוני של התג כי הוא הולך
להיות אמיתי אז אתה הולך קדימה ולהבין מה כתובת האתר
של JavaScript של פייסבוק צריך להיות
וזו רק הדרך המפוארת
מבדיקה צריכה זה יהיה HGP או HDPS.
ולבסוף, אתה שים לב למה פייסבוק עושה,
הם מקבלים את צומת DOM ש יש זיהוי של שורש פייסבוק
וזה מה שהם אמרו לי לך לשים לתוך הדף
ואז הם לצרף את הילד כך ההשפעה של כל זה היא
לסוג של דינמי להזריק תג תסריט חדש לדף שלך
כילד של DIV שאתה הכנסתי שם כדי ששאר
של טעינת הדף בשמחה
ולאחר מכן את הקוד הזה ממש מקבל עמוס באופן אסינכרוני.
לכן, למעשה אחרי אזכור עובדה ואני נדחים
של הפונקציה בעילום שם,
מה זה פאנקי תחביר המתייחס לכאן
כאשר יש לי לא רק פונקציה לפתוח סוגר פארן, קרובים
ואז סוגריים מסולסלים, מדוע paren הפתוח כאן
ולאחר מכן קרוב הפתוח, קרוב פארן שם, מה זה עושה?
>> [לא ברור] הגדרה ולאחר מכן ביצוע?
>> בדיוק, זה הגדרה פונקציה אשר היא אנונימי
אלא רק מגדיר את פונקציה,
כמובן אינו מבצע פונקציה עד שאתה קורא לזה
לפי שם, אבל כמובן שזה הוא פונקציה אנונימית
כך שאתה לא יכול לקרוא לזה לפי שם אבל אתה יכול
ב-JavaScript לבצע פונקציה אנונימית רק
על ידי המתמצת את כל העניין בסוגריים כמו שעשינו
עם סוגריים זה ואת זה פארן כאן ולאחר מכן קיבוע
לסוף הפונקציה paren הפתוח, קרוב פארן,
אם אתה לא רוצה להעביר אותו כל טענות.
אבל זה נראה קצת טיפשי,
כמו למה זה נוסף מורכבות תחביריות
כי רוב האנשים לא נראים להכיר, מה הערך
עטיפה אלה שלוש שורות של קוד
בפונקציה אנונימית בדרך זו.
כן.
>> כדי להימנע מדריסה יקר ב[ לא ברור].
>> בדיוק, כדי למנוע החלפה משתנה
בדף קיים, נכון?
פייסבוק הוא קצת החליט בזדון,
הם הולכים להשתמש E משתנה, זה די סביר
שאתה או כל מי שמשתמש פייסבוק כמו כפתור
או מה שתוסף חברתי אחר
ביש משתנים קרא איפשהו E. אז,
על ידי המתמצת את כל הקוד שלהם בתוך
של הפונקציה האנונימי הזה, הם בעצם יש לי היקפם
שלא לסכן את מחצו כל משתנים קיימים.
לכן, גם את זה הוא למעשה הפרדיגמה נפוצה מאוד,
במיוחד בעת כתיבה קוד ספרייה
או כאשר אתה בעצמך לא לעשות רוצה להעמיס את השם שלך בחלל
עם משתנים אחרים שאתה רוצה הערך לחיות
ולמות ברגע שאתה יוצא בלוק של קוד,
זו היא טכניקה נחמדה ב-JavaScript.
בסדר.
אז, ואז חזרה לדוגמא זו כאן, כל מה שעשינו בסופו של הדבר
עם דוגמא זו היא רק ניקיתי את הקוד.
אז, זה עדיין יש לי שלם חבורה של מתגים, כל חבורה
תנאים כאן, אבל שם לב קצת תחביר,
זה ניגש לצומת DOM עם רישום המזהה הייחודי,
אמצעי החלל נראה עכשיו צאצא של הצומת,
למצוא אותו אם זה מסוג קלט ולאחר מכן אף
אם לא ראה את זה בעבר, אתה יכול לדעת
כי זה רק אומר שימצא אותו עם תג הקלט,
אלמנטי הקלט שיש לו תכונה של שם עם ערך
של דואר אלקטרוני, ולאחר מכן אפשר שלי להניף את היד שלי על כמה
לכל השאר לא כל מגרה ש
אבל באמת רק תחביר jQuery עבור אותן פעולות.
בסדר.
אבל מה שלא כל כך חשוב כאן הוא הדברים בצד הדפדפן
אלא העובדה שאנחנו היו דרכים נקיות יותר ונקיה יותר
של ביצוע בפועל כי עבודה של קוד.
בסדר.
כל שאלה?
[הערה לא נשמע]
על אישור. עכשיו החלק הכיפי.
אז, node.js למה?
למי אכפת?
מה אתה יודע על זה היום?
Node.js, למה?
הנרי [להניח כתיב].
[הערה לא נשמע]
איפוס סוללה?
מה - זה קולב צוק מושלם
למחצית השנייה של היום.
למה אנחנו לא הולכים לקחת הפסקה של 5 דקות לכאן,
יש חצי ממתקים מכונה שם אם היית
כמו כמה סוכריות ללא לשים רבע פנימה