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

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

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

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

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

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

בתוך המסמך אחר אובייקט מתייחס לHTML בדף שלי. וה- HTML של הדף שלי הוא כל זה. ואז בתוך HTML אובייקט, יש לי אובייקט ראש, המתייחס לכל מה שיש. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ויש גם כמה שיטות שאנחנו יכולים להשתמש בו כדי גם מהר יותר אולי בודד אלמנטים של אובייקט המסמך. אולי, רוב תכליתי של getElementById להיות אלה. אז אני יכול להגיד משהו כמו, משום ש לזכור שזה שיטה של ​​המסמך מתנגד, document.getElementById. 

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

GetElementsByTagName הוא דומה מאוד ברוחו. אולי זה היה למצוא את כל תגים מודגשים או כל תגי p ולתת לי מערך של כל מה ש כי אז אני יכול לעבוד איתו. appendChild מוסיף משהו רמה אחת למטה בעץ. 

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

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

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

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

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

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

הנה, אני כנראה מקבל ElementById colorDiv. ואני רוצה להגדיר צבע הרקע שלה. אני אם רק אני משתמש JavaScript הטהור באמצעות מודל אובייקט המסמך, זה הרבה דברים, נכון? document.getElementById colorDiv.style.backgroundColor = ירוק. 

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

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

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

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

זה יהיה נחמד אם הייתי יכול יש גישה כללית יותר. ובכן, קודם ניקח את מבט על מה הן חמש פונקציות אלה document.getElementById colorDiv.style.background = סגול, ירוק, כתום, אדום, וכחול, בהתאמה. אז, לא במיוחד את העיצוב הטוב ביותר. 

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

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

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

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

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

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

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

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

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

זהו הרעיון של שהכפתור היה לוחץ. אבל חוץ מזה, זה סוג של מתנהג בדומה לאירוע. זה בדיוק אותו הדבר כמו שאני יבטא את זה בjQuery. שוב, זה כנראה הרבה יותר מפחיד. זה לא ברור כמו משהו כמו event.js, שהוא אולי קצת יותר אבל קצת מפורט, פחות הַטָלַת אֵימָה. 

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

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