תומס Reimers: היי, כולם. שמי תומס Reimers. 

מייק ריזו: ואני מייק ריזו. 

תומס Reimers: אנחנו שתיים מTS CS50s. והיום אנחנו מובילים את הסמינר על JavaScript ו-CSS ליישומי אינטרנט. אם אתה רוצה לבצע יחד, קישור נכון לשם. ואתה רוצה לשים את זה בלחיצה קצרה על המחשב? 

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

מייק ריזו: בסדר. אז בואו נתחיל. 

תומס Reimers: אז אתה רוצה להתחיל? על אישור. 

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

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

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

לאחר מכן הוא מבקש את קובץ ספציפי. אז אם אתה הולך - אני לא יודע - example.com / index.html או / test.html, אתה הולך לבקש שקובץ ספציפי. והשרת של האינטרנט הולכים להחזיר אותו אליך. 

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

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

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

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

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

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

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

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

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

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

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

אז 110 בינארי יהיו 6. 100 יהיו 4. אותו דבר עם עולם. אז המספר היית מקבל עבור הרשאות לכך יהיו 644. 

מייק ריזו: ואם אתם חושבים לחזור כאשר אתה chmoded משהו, אני מאמין הם נתנו בבעיה להגדיר את דוגמא שבו אתה יכול לעשות משהו כמו chmod 644 ולאחר מכן את שם קובץ. 644 אז, עכשיו אתה יכול לראות באופן ישיר מהיכן זה בא. אז אני מקווה שעושה את זה קצת יותר ברור. 

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

תומס Reimers: ואז יש לנו מהיר רשימת הרשאות משותפות. אז ספריות, אתה רוצה לchmod למעשה 711. מהיר בצד - לספרייה יש משמעות אישור הפעלה כדי שתוכל כדי לפתוח את הספרייה. תמונות, CSS, JavaScript, HTML צרכי 644 כי, בעצם, העולם צרכי הרשאות קריאה. 

ו-PHP, שאתם ראיתם למרות שאנחנו לא מדברים על זה בהחלט הוא chmoded בדרך כלל עם רשות 600 כי זה לרוץ עם ההרשאות של הבעלים. לפחות על המכשיר. 

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

תומס Reimers: וההערה האחרונה ל פיתוח מקומי במהירות הוא - אנחנו העליתי את הנושא הזה, אבל אנחנו פשוט רצינו להעלות את זה שוב - אם אתה שואל על שרת - מארח כל כך מקומי, לדוגמא, com או משהו כזה. - ולא יציין קובץ ספציפי, את הקובץ שבמחשב שלך הולך לבקש נקרא index.html. או אם זה לא קיים, index.php. 

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

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

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

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

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

אז יש לנו שווים סוג התסריט JavaScript מקור שווים JavaScript.js. ואם אתם חושבים לחזור לCS50 בעיה האוצר לקבוע, אם נראה ב header.php בתיקיית התבניות, היית צריך לראות את כמה מאלה שנכללו. אז קודם כל זה אחד - התסריטים - הוא כולל ספריית JavaScript. כולל ספריית CSS הוא קצת שונה. 

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

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

תומס Reimers: בסדר, אני מקווה שאתה החבר 'ה כבר מכיר עם איך לקשר-CSS. אתה הייתי צריך לעשות את זה על סט החום האחרון שלך. JavaScript, חלק מכם אולי יש לו קצת ניסיון עם. חלק מכם אולי לא. 

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

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

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

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

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

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

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

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

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

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

תומס Reimers: ואם אתה באמת לחץ על קראו עוד ממש שם - לחץ על המקור בGitHub - אתה בעצם תראה את הקוד הפתוח רישיון על LICENSE.md ממש שם. ואתם תראו כאן הוא רישיון MIT מאוד פופולרי. שוב, אם אתה קורא את הטקסט, תוכל למצוא אותו באתר אנו מפנה לפני ולהיות מסוגלים להבין אותו מבלי לקרוא דרך העגה המשפטית. 

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

קהל: אז כשאתה מוריד אותו, אתה פשוט בצע את הקוד שיש להם תחת כפתור ההורדה? 

תומס Reimers: כן, ולכן בעת ההורדה - 

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

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

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

רק בצד מהיר - שמתי לב שקפצנו לתוך זה. שאר מצגת זו היא הולך להיות סקירה מהירה. סקר של ספריות. 

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

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

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

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

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

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

אז אם אני רוצה סמל של תוספת זו כיכר ממש כאן, הייתי נותן לי זה ברמה ה-FA. ולאחר מכן מקף FA בתוספת כיכר מקף. 

מייק ריזו: מגניב, בסדר. 

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

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

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

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

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

אז, המחשב שלך הולך לראות, אה, זה מתארח ב-google.com ולא מאשר על theirsite.com. תן לי ללכת לשאול את גוגל עבור קובץ זה. ואז, זה הולך כולל זה כמעט כאילו היה חלק מהאתר שלך. 

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

מייק ריזו: אישור. אז אנחנו פשוט סיימנו עם CSS. וכמה מכם עשוי לחשוב, טוב, היו לנו כמה CSS על CS50 האוצר. אבל ספריית CSS הייתה bootstrap. אנחנו בעצם כוללים המגף קטן מאוחר יותר תחת JavaScript כי עם ספריית המגף CSS מגיעה גם עם הרבה JavaScript כי Bootstrap או טוויטר - שעשה את המגף - משתמש בו כדי לנהל את כולם ב-CSS. 

תומס Reimers: האם מישהו יש לי שאלות עד כה על CSS באופן כללי? אנחנו טובים? מדהים. 

מייק ריזו: מדהים. 

תומס Reimers: אז נע על JavaScript. 

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

תומס Reimers: אם עדיין לא שמע על זה או הרצאה אם ​​לא צפתה עדיין, סוג Document Object Model הוא בעצם איך דברים מיוצגים. אז HTML נראה כמו סוג של עץ כאשר אתה בעצם למשוך אותו החוצה. יש לך את אלמנט ה-HTML על העליונה. יש לך בראש ובגוף. 

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

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

אז זוכר בחזרה כאשר אנו אמרו כי לא כל הדפדפנים ליישם דברים באותה הדרך? הדבר נכון גם ב-JavaScript. ואחד הדברים הגדולים על jQuery הוא שזה יאתר דפדפן ולזהות את שיטה מתאימה. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

תומס Reimers: וזה מרחיב. CSS המשתרע. בדיוק כמו ב-CSS, אתה יכול לבחור את כל קישורים, שיש לי foo הכיתה. הנה, זה אותו הדבר. 

אתה יכול לעשות את a.foo, אשר היה לבחור כל הקישורים עם foo הכיתה. אתה יכול לעשות את הבר חד, אשר היו בחר את הקישור עם בר זיהוי וכך הלאה וכן הלאה. כל בורר CSS הוא חוקי בורר jQuery. 

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

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

תומס Reimers: אז תרגום קל של שיהיה אם jQuery, בעצם, פשוט לקחתי את foo. ולאחר מכן ב-CSS, אמר, צבע האדום וקרוב. זה אותו הרעיון. מה עושה את זה הוא זה שנבחר כל אלמנטי foo. ואז זה מיושם. סוג של, צבע המאפיין שווה אדום. 

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

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

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

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

קהל: אז היית להטביע את זה בתוך קוד ה-HTML במשהו כמו [לא ברור]? 

מייק ריזו: נכון. כן, אנחנו נגיע לזה בקצת. כן, זה דומה קצת ל-PHP. לא בדיוק דומה. 

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

תומס Reimers: אז דרך אחת לחשוב על זה אם אני המחשב ו מייק הוא, בערך, בשרת. מה שהולך לקרות הוא שאני הולך שואל מייק, היי, אני יכול לקבל עותק של דף אינטרנט זה? והוא ייתן לי עותק שלה. 

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

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

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

מתברר jQuery בנה בפונקציות זה עושה את כל זה אנימציה ממש ממש קל. אז יש ראשון לדעוך פונקציה החוצה, אשר אתה יכול לקרוא על משהו. וזה דרך לשנות את ה-CSS של אלמנט שבדרך אנימציה. אז זה לוקח כל אלמנט אתה קורא לזה לדהות ב. ולאחר מכן, משנה את האטימות שלו באיטיות עד שהוא הולך שקוף לחלוטין. 

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

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

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

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

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

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

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

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

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

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

תומס Reimers: לחלופין, יש לך בריחוף, שהוא מאוד פופולרי. אז בחזרה לירידה שלי למטה רעיון תפריט. היה לך בראש אחד בריחוף. ואז אתה יכול לשנות את זה. 

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

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

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

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

מייק ריזו: האם יש שאלות על זה? זה יכול להיות קצת מבלבל בפעם הראשונה שאתה רואה אותו. 

תומס Reimers: אתה באמת רוצה לפתוח את הקובץ ולהראות להם כמה jQuery עכשיו? 

מייק ריזו: כן, בואו נעשה את זה. על אישור. 

תומס Reimers: אז עכשיו אנחנו במכשיר. ומה שעשינו זה לקחת את חירות של יצירת שני index.html קובץ, אשר מקשר אל קובץ JavaScript. ואנחנו יכולים לפתוח את - כן. ובכן, זה עושה שני דברים. 

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

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

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

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

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

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

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

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

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

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

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

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

אז בואו נעשה משהו לגוף שוב. ונניח שאנחנו עושים את זה על - לחץ. אנו נוסיף פונקציה. 

השינוי בואו: תומס Reimers זה צבע לאדום שוב. למה לא? 

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

תומס Reimers: וזה הופך לאדום. 

מייק ריזו: והיא עושה להאדים כצפוי. 

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

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

מייק ריזו: אישור. רק כדוגמא - אתה לא זוכה לראות את זה קודם - אני רק אראה לך מה זה נראה כאשר אנו רוצים להסתיר משהו. אז אני אלך קדימה ואל להחליק למעלה. 

תומס Reimers: רוצה לעטוף את זה ב סוג פסקה לפני שאנחנו עושים את זה? 

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

תומס Reimers: ובוא נותן לו בכיתה. 

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

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

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

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

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

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

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

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

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

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

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

אתה רואה כאן הוא Bootstrap אתר ב-CSS. אתה תראה המגף. ואם אתה לגלול למטה, תראה כיצד להוריד אותו, איך להתקין אותו, וכולי. 

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

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

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

אז הנה יש לנו מעברים, modals, dropdowns, כרטיסיות, ובטיפים. Tooltip הוא מה שצץ תחתיך עכבר כאשר אתם מרחפים על משהו. Popovers, התראות, כפתורים, מתקפל אקורדיונים הוא מה הם בדרך כלל קוראים לזה. קרוסלות, אשר להעיף באמצעות דימויים כמו. 

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

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

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

תומס Reimers: אז זה הכל נעשה בלעדינו כותבים כמעט כל CSS. גם אנחנו רואים את כותרת לרוחב החלק העליון, שהצבעים הם על ידינו. אבל בפועל לשים אותו על החלק העליון של הדף ומה שהופך את גלילה זה הייתה המגף. ולאחר מכן גם לספרייה אחרת - זה הוא לא אחד שדברנו עליו אבל אחד אתה יכול לגגל אם אתה רוצה. זה נקרא prettify.js. וזה תחביר להדגיש את הקוד שלך בשבילך הן באמצעות CSS ו-JavaScript. 

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

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

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

אז רוב הדברים - כאשר אתה מוצא אותם - הולכים להתארח באחד אתרים שבם קוד מחשב מארח. הם כמה אלה פופולריים. הפופולרי ביותר, על ידי כה, הוא github.com. ואם אתה הולך לGitHub זה בעצם שבו לנרמל התארח. אז אם אתה רוצה לחזור לזה. הראה להם את זה. 

מייק ריזו: וזה למעשה שם זו מתארחת מדי, אם שמת לב. 

תומס Reimers: כן. אז אם אתה הולך על לנרמל וללכת לGitHub. היה זה? 

מייק ריזו: דבר חתול קטן זה הוא סמל GitHub. 

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

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

מייק ריזו: הפסקת העישון של האינטרנט. 

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

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

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

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

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

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

תומס Reimers: אז יש לי באמת מהיר תכנית ממש כאן, שאומר לחצן בלחיצה. אז יש לנו ללולאה. להוא שאני פחות מ404. זה רק הולך לצוץ הודעות התראה אלה. 

מייק ריזו: ומה היה קוד 404 עמד לב-HTML? האם מישהו זוכר? לא מצא, נכון. כרום גם הוסיף את זה מסודר דבר שבו אתה יכול - 

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

מייק ריזו: כן. 

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

מייק ריזו: כל דבר שאתם רוצים כדי לראות באמת מהיר ב, כמו, שני דקות או פחות? 

תומס Reimers: כל דבר אנחנו יכולים להבהיר? איך לכתוב ב-- 

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

מייק ריזו: כן, אז זהו זה - 

תומס Reimers: אתה יכול רק להכות Control-U באתר. 

מייק ריזו: הו, אני לא יודע את זה. 

תומס Reimers: אני חושב, כן. בקרה-U. כן. 

מייק ריזו: אה, אז זה קוד לאתר האינטרנט. אבל אם אתה באמת רוצה להוריד אותנו קבצים והכל, הוא אירח על github.com 

תומס Reimers: לקצץ את השם שלי - תומס Reimers - לוכסן סמינר מקף CS50. 

מייק ריזו: ואתה יכול למצוא כל מה שיש. 

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

מייק ריזו: כן, ואם אנחנו פשוט לחצו על index.html ממש מהר - 

תומס Reimers: תראה הנה קוד מקור של האתר שלנו. 

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

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

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

מייק ריזו: כן, ליהנות. להתראות חבר 'ה. 

תומס Reimers: נתראה.