داگ لوید: در این ویدئو، ما می خواستیم به تماس از توجه جداگانه به یک بسیار خاص عنصر از جاوا اسکریپت که شما ممکن است مفید زمانی که شما شروع به کار بر روی صفحات وب و دستکاری تغییر محتوای صفحه وب خود در پرواز است. و که مفهوم است مدل شیء سند. بنابراین ما به عنوان در ویدیو های ما در دیدم جاوا اسکریپت، اشیاء بسیار انعطاف پذیر است. و آنها می توانند شامل زمینه های مختلف. و هر چند ما به بسیاری از رفتن نیست جزئیات، کسانی که در زمینه و یا خواص، که ما احتمالا بیشتر مناسب آنها پاسخ در زمینه یک شی، حتی آن دسته از خواص می تواند اشیاء دیگر. و در داخل از آن اشیاء می تواند اشیاء دیگر. 

شما باید این شی بسیار بزرگ با تعداد زیادی از اشیاء دیگر در داخل آن، که به نوعی این ایده از یک درخت بزرگ ایجاد می کند. در حال حاضر، شی سند است شی بسیار ویژه ای در جاوا اسکریپت که سازماندهی کل وب سایت خود را صفحه زیر به این نوع از چتر از یک شی. و بنابراین در داخل سند اشیاء ارائه می سر و بدن از صفحه وب خود را. 

در داخل از آن دیگر اشیاء، و غیره، و غیره، تا زمانی که صفحه وب خود را تمام است شده است در این شیء بزرگ سازمان یافته است. صعودی در اینجا چیست، درست است؟ خب، ما می دانیم که چگونه به کار با اشیاء در جاوا اسکریپت. 

بنابراین اگر ما یک شی است که اشاره به کل صفحه وب سایت ما، که معنی با تماس با درست روش برای دستکاری در شی یا اصلاح خاص از خواص آن، ما می تواند عناصر تغییر صفحه ما برنامه نویسی به جای استفاده از جاوا اسکریپت داشتن کد همه چیز با، مثلا، HTML. بنابراین در اینجا یک مثال از یک است بسیار ساده صفحه وب، درست است؟ آن را به تگ های HTML، سر. 

داخل یک عنوان، سلام جهان وجود دارد. پس از آن من بدن داشته باشد. در داخل آن، من سه چیز متفاوت است. من یک تگ هدر H2، یک پاراگراف، و یک لینک. این یک صفحه وب بسیار ساده است. 

خب، چه ممکن است سند شی برای این مانند نگاه؟ خوب، آن را کمی ترسناک شاید در ابتدا. اما این واقعا فقط یک درخت بزرگ است. و در ریشه بسیار از آن سند است. 

داخل سند دیگری است شی با اشاره به HTML صفحه من. و HTML صفحه من همه از این است. و سپس در داخل از HTML شی، من یک شی سر، که اشاره به همه چیز وجود دارد. 

و در داخل وجود دارد، من یک شی عنوان. و در داخل وجود دارد، من یکی دیگر از اعتراض که فقط سلام جهان است. من می توانم بدن من نمایندگی مثل این. 

در داخل بدن من، من یک H2 شی و یک شی P بند و یک شی برای یک لینک. و این تمام سلسله مراتب می تواند به عنوان یک درخت بزرگ نشان با تعداد زیادی از کمی کوچکتر همه چیز از آن در آینده. در حال حاضر، البته زمانی که، ما در حال برنامه نویسی، ما از چیزهایی مانند یک درخت بزرگ فکر نمی کنم. ما می خواهیم واقعی کد چیز مربوط. 

و خوشبختانه، ما می توانیم استفاده از ابزار توسعه دهنده ما در واقع یک نگاه شی سند این وب سایت است. و اجازه دهید انجام این کار. بنابراین من باز کردم یک تب مرورگر. 

و من باز کرده ام تا ابزار های برنامه نویسی. و در ویدئو من در جاوا اسکریپت، من به ذکر است که این کنسول است تنها جایی که در آن ما این اطلاعات را چاپ کنید، آن را نیز مکانی که در آن ما می توانیم اطلاعات ورودی. در این زمینه، چه من قصد دارم بگویم این است من می خواهم به عقب بر گردیم اشیاء سند، بنابراین من می توانید شروع به یک نگاه در آن است. پس چگونه ممکن است من انجام این کار؟ خوب، اگر من می خواهم سازماندهی آن واقعا سادگی، من قصد دارم به console.dir، D-I-R. در حال حاضر، من با استفاده از console.log به چاپ فقط چیزی بسیار ساده است. اما اگر من می خواهم برای سازماندهی این سلسله مراتبی مانند یک شی، من می خواهم این نوع از ساختار مانند یک ساختار دایرکتوری. 

بنابراین من می خواهم به console.dir سند. من قصد دارم به ضربه را وارد کنید. و درست در زیر آن در حال حاضر، و من در اینجا در زوم، من این سند پاسخ با یک فلش کوچک کنار آن. در حال حاضر، زمانی که من باز کردن این فلش، رفتن به بسیاری از مسائل وجود دارد. 

اما ما قصد داریم به چشم پوشی از بسیاری از آن و فقط نوع تمرکز در مهم ترین بخش است، بنابراین ما می توانید شروع به حرکت این سند است. خیلی بیشتر به DOM از وجود دارد فقط پدر و مادر و فرزند گره. در بسیاری از مسائل جانبی وجود دارد. 

بنابراین من قصد دارم برای باز کردن این است. و در خیلی چیزها وجود دارد از مسائل که بالا میآید. اما من تو را در مورد مراقبت است در اینجا، گره فرزند. اجازه دهید باز است که تا. 

در داخل وجود دارد که من می بینم چیزی آشنا، HTML. بنابراین در داخل از سند ما سطح پایین، HTML. من برای باز کردن است که تا. چه انتظار می کنیم؟ 

اگر شما از نمودار ما یاد می آورند، ما باید چه در داخل HTML را پیدا کنید؟ چه دو گره در زیر آن در درخت است؟ بیایید پیدا کردن. ما برای باز کردن HTML. ما به پایین به گره های فرزند آن است. 

پاپ که باز است. سر و بدن وجود دارد. و ما می توانیم باز کردن سر. برو به گره های فرزند آن است. خوب، عنوان وجود دارد. 

و ما در می تواند برود و در مثل این برای همیشه. ما می توانیم این با بدن نیز هست. اما یک راه را برای ما به در نگاه وجود دارد سند سازمان به عنوان یک شی بزرگ است. و اگر ما نگاه بزرگ است شی است که به نظر می رسد بسیاری مانند کد، که بدان معنی است که ما می توانیم شروع به دستکاری این شی بزرگ با استفاده از کد برای تغییر آنچه ما وب سایت نظر می رسد و احساس می کند مانند. 

به طوری که یک ابزار بسیار قدرتمند است ما در حال حاضر در اختیار ما. بنابراین ما به عنوان تنها دیدم، شی سند خود و همه از اشیاء داخل آن خواص و روش ها، فقط مانند هر شی دیگری که ما را کار با در جاوا اسکریپت. اما ما می توانیم آن دسته از خواص و استفاده استفاده از این روش به نوعی تمرین کردن از سند بزرگ و پایین و پایین تر و پایین تر، ظریف و ظریف دانه از جزئیات، تا زمانی که ما به یک قطعه خاص از ما بسیار صفحه وب است که ما می خواهیم را تغییر دهید. 

و هنگامی که ما خواص از به روز رسانی شیئی سند و یا پاسخ این روش، همه چیز ممکن است بر روی صفحه وب ما اتفاق می افتد. و ما لازم نیست برای انجام هر گونه طراوت به این تغییرات را به اثر. 

و این یک توانایی بسیار سرد است به زمانی که ما در حال کار با کد. پس چه برخی از این خواص هستند که بخشی از یک شیء Document؟ خوب، شما احتمالا شاهد یک زن و شوهر از آنها واقعا به سرعت همانطور که ما زیپ شد از طریق سند غول شی ما فقط در مرورگر وب را دیدم. 

اما چند تا از این خواص ممکن است چیزهایی مانند HTML درونی. و شما حتی ممکن یاد من با استفاده از این در این ویدئو جاوا اسکریپت در پایان وقتی که من در مورد حوادث صحبت می شد. این HTML درونی چه بود؟ خوب، آن را فقط چه در بین تگ. 

و به این ترتیب HTML درونی، برای مثال، از عنوان تگ، اگر ما را نگه داشته بود که در که به عنوان مثال یک لحظه پیش، اند جهان بوده است سلام. که به عنوان صفحه ما بود. خواص دیگر شامل نام گره، که نام یک HTML غیر فعال است عنصر مانند عنوان. ID است که ID ویژگی یک عنصر HTML. 

به یاد بیاورید که ما به خصوص می تواند نشان دهد عناصر خاص HTML ما با یک ویژگی ID، که معمولا می آید در دستی در زمینه CSS، به طور خاص. گره پدر و مادر است، که یک مرجع به آنچه که فقط در بالا من در DOM. و فرزند است، که یک مرجع به آن چه که در زیر من. و ما دیدیم که بسیاری از این فقط به دنبال از طریق. گره فرزند، این که چگونه ما پایین و پایین تر به درخت. 

ویژگی ها، که فقط از یک آرایه است از ویژگی های عنصر HTML. بنابراین یک مثال از صفات ممکن است اگر شما برچسب تصویر داشته باشد، معمولا دارای یک صفت منبع، شاید یک ارتفاع و عرض یک ویژگی. و به طوری که فقط می تواند یک آرایه از همه از ویژگی های همراه با عنصر HTML. 

سبک یکی دیگر است که می کند نشان دهنده CSS یک ظاهر طراحی شده از یک عنصر خاص. و بعد از آن در این فیلم، ما به طور خاص سبک اهرم به یک زن و شوهر از تغییرات به وب سایت ما. بنابراین کسانی که برخی از خواص. 

و همچنین برخی از آنها روش که ما می توانیم استفاده از به هم با سرعت بیشتری شاید منزوی عناصر از شیء سند. شاید، متنوع ترین از این که getElementById. بنابراین من ممکن است چیزی شبیه گویند، چرا که به یاد داشته باشید آن را به یک روش سند شی، کد document.getElementById. 

و در داخل پرانتز، مشخص یک عنصر HTML با یک ID خاص ویژگی است که من قبلا این تعیین می کنند، و من بلافاصله به حق به آن عنصر از وب سایت به طور کلی. بنابراین من لازم نیست به تمرین شاید پایین را از طریق هر لایه. من فقط می تواند استفاده از این روش برای پیدا کردن آن، نوع مانند یک موشک دنبال گرما، درست؟ فقط می رود و می یابد دقیقا همان چیزی را به دنبال. 

GetElementsByTagName است در روح بسیار مشابه است. شاید این که همه از پیدا برچسب ها جسورانه و یا همه از تگ P در و من یک آرایه از همه چیز که من پس از کار می تواند با. appendChild چیزی اضافه می کند سطح پایین در درخت. 

بنابراین من می تواند کل یک جدید اضافه کنید عنصر یک سطح پایین تر. یا من می توانم یک عنصر که حذف یک سطح پایین تر و همچنین اگر من می خواهم چیزی از صفحه وب من را حذف کنید. در حال حاضر، توجه داشته باشید برنامه نویسی سریع و سریع سردرد صرفه جویی توجه داشته باشید، امیدوارم. 

getElementById-- د حروف کوچک است. من نمی توانم به شما بگویم که چگونه بسیاری از من استفاده getElementById و با حروف بزرگ د وجود دارد. از آنجا که آن را واقعا رایج است. اگر ما ارسال کلمه ID، آن را معمولا سرمایه من سرمایه D. و کد من فقط کار نمی کند. و من نمی توانم بفهمم چرا. این واقعا، واقعا، واقعا اشکال معمول است که همه را می سازد، حتی کارشناسان که انجام شده است این برای همیشه. پس فقط آگاه باشید، getElementById، که د حروف کوچک است. و امیدوارم، که موجب صرفه جویی شما چند دقیقه حداقل اندوه. 

پس چه همه از این به ما بگویید؟ ما این روش ها. ما باید این خواص است. حال اگر ما از شروع سند، سند. هر چه، ما در حال حاضر می توانید به هر دریافت قطعه واحد از صفحه وب ما که ما به استفاده از جاوا اسکریپت می خواهید فقط از طریق تماس با این روش و اعمال نفوذ خواص که ما در مکان های مختلف پیدا کنید. 

این می تواند دارای اطناب، این کد document.getElementById، شاید یک نام تگ طولانی، شاید شما انجام تماس های بیشتر بعد از آن. چیزهایی که می توانید کمی دارای اطناب است. و به عنوان برنامه نویسان، همانطور که شما احتمالا در بسیاری از این فیلم ها دیده می شود، ما چیزهای اطناب را دوست ندارد. 

ما دوست داریم که قادر به انجام کارهای به سرعت. بنابراین ما می خواهیم یک دوست تر راه کوتاه برای چیزی می گویند. بنابراین این نوع منجر به مفهوم چیزی به نام جی کوئری. در حال حاضر جاوا اسکریپت jQuery است ندارد. این بخشی از جاوا اسکریپت نیست. 

این یک کتابخانه که نوشته شده است توسط برنامه نویسان جاوا اسکریپت برخی حدود 10 سال پیش است. و هدف آن است که به ساده این چه به نام مشتری برنامه نویسی طرف، که است که اساسا چه ما فقط صحبت کردن با دستکاری DOM در مورد. و به همین ترتیب اگر من می خواستم برای تغییر رنگ پس زمینه صفحه وب من، شاید یک div خاص. 

در اینجا، من ظاهرا با گرفتن ElementById colorDiv. و من می خواهم به تنظیم رنگ پس زمینه آن است. اگر من فقط با استفاده از خالص جاوا اسکریپت با استفاده از مدل شیء سند، که بسیاری از مسائل، درست است؟ کد document.getElementById colorDiv.style.backgroundColor = سبز. 

بگیرد. که بسیاری برای گفتن بود. این یک مقدار زیادی به نوع، بیش از حد. و به این ترتیب در jQuery، ما شاید می توان گفت این بیت کمی مختصر تر. تجارت کردن را از آن است شاید کمی کمی بیشتر مرموز همه ناگهانی، درست؟ 

حداقل طولانی است که یک کمی بیشتر توضیحی به عنوان به آنچه که ما انجام می دهند. این علامت دلار، پرانتز، تنها نقل قول، هش، colorDiv، درست است؟ معنی آن چیست؟ خوب، که اساسا فقط کد document.getElementById colorDiv. 

اما این نوع از مختصر راه انجام آن با استفاده از jQuery. بیایید فقط یک نگاه کن در چند راه مختلف که من در واقع ممکن است استفاده از این شیئی سند مدل برای دستکاری قطعه از سایت من. به طور خاص، ما قصد داریم به کار بر روی دستکاری رنگ خاص DIV، colorDiv، در یک صفحه وب. بنابراین اجازه دهید نگاهی به که. خیلی خوب. بنابراین من در یک صفحه است. آن را به نام test.html زمانی که شما دانلود این اگر شما می خواهید به سرهم بندی کردن با این. و من یک دسته از ام دکمه در این صفحه. و من گفت: توابع فرد برای رنگ پس زمینه، بنفش، سبز، نارنجی، قرمز، آبی، یک تابع تک برای رنگ پس زمینه، رویداد برای رنگ پس زمینه، و با استفاده از jQuery. چه هستم من صحبت کردن در مورد وقتی که من انجام این کار؟ بنابراین ما از دکمه دیده می شود. در حال حاضر، اجازه دهید یک نگاه برخی از کد منبع در اینجا. ما با test.html شروع می شود. توابع منحصر به فرد برای پس زمینه رنگ چیزی است که من در اینجا تایپ کرده اید. اجازه بدهید من یک کمی حرکت کنید. 

و شما که من متوجه این دکمه ها تعریف کرده اند می گویند زمانی که این دکمه کلیک، تابع تبدیل بنفش است. زمانی که این دکمه کلیک کنید، و نه، فراخوانی تابع رنگ سبز روشن، به نوبه خود، نارنجی، قرمز، به رنگ آبی. شما احتمالا می توانید حدس بزنید که این شاید بهترین طراحی حس، درست است؟ 

این اگر من می توانم به خوبی خواهد بود یک رویکرد کلی تر. خب، اول ما یک نگاه در چه آن پنج توابع کد document.getElementById colorDiv.style.background = بنفش، سبز، نارنجی، قرمز، و آبی به ترتیب. بنابراین، به خصوص بهترین طراحی نیست. 

مجموعه ای از دکمه های من این است که من نوشته ام یک تابع تک نام تغییر رنگ که ظاهرا یک رشته به عنوان آرگومان آن را می پذیرد. پس این است که کمی بهتر است. بنفش، سبز، نارنجی، قرمز، آبی در حال حاضر یک استدلال است. بنابراین من یک کلی تر نوشته شده است مورد تابع جاوا اسکریپت، که ممکن است چیزی شبیه به این. من عبور در. این تغییر رنگ تابع است منتظر استدلال به نام رنگ. و من گفت: مجموعه ای از رنگ پس زمینه به رنگ. بنابراین در اینجا نشان دهنده آنچه که من در اینجا دارم. به طوری که کمی بهتر است. 

اما من ممکن است قادر به بهتر از آن. اگر ما به پایین را به یک نگاه در وضعیت رویداد، در حال حاضر همه این تماس همان نگاه کنید. اگر شما برای یاد ما بحث و گفتگو در گرداننده رویداد، من می توانم اطلاعات در مورد که از گرفتن این دکمه کلیک شده و استفاده از آن. 

و به این ترتیب در event.JavaScript، من نوشته شده رویداد تغییر رنگ، که ارقام که دکمه کلیک شد. که خط شی ماشه است. و پس از آن در اینجا، آن می شود واقعا دارای اطناب. اما آنچه من انجام است من تنظیم پس زمینه رنگ به triggerObject inner.HTML. که متن را در این بین تگ را فشار دهید. 

و بعد من ظاهرا به آن مجموعه به کوچک. و این که چگونه من می توانم یک کل تبدیل رشته به حروف کوچک در جاوا اسکریپت با استفاده از که روش به کوچک. زیرا زمانی که من مجموعه ای از یک رنگ، به عنوان من در تلاش برای انجام در اینجا، رنگ را به تمام حروف کوچک. 

اما بر روی دکمه که من تا به حال، اگر ما نگاه دیگری، توجه کنید که متن وجود دارد است نوشته شده با P سرمایه برای بنفش. و پس از آن در بسیار پایین در اینجا من به ظاهر امتحان کنید و این کار را با استفاده از jQuery است. و در این مورد، من در واقع نمی فراخوانی یک تابع در همه. من فقط گفته ام از کلاس که من با استفاده از این دکمه برای یک دکمه JQ است. خودشه. 

پس چگونه جی کوئری می دانم آنچه من انجام می دهند؟ خوب، این یکی از مزایای استفاده است بریده بریده معایب جی کوئری. این می تواند به من اجازه می دهد به انجام کارهای بسیار مختصر، اما شاید نه به عنوان به طور مستقیم. شاید کسانی که سه تن دیگر را کمی بیشتر حس آنچه من انجام. در اینجا، هر چند، چه خبر است؟ 

ظاهرا، ایجاد یک تابع بی نام که بارهای هر زمان که سند من آماده است، بنابراین document.ready در است، برخی از عملکرد است رخ دهد. در واقع، زمانی که یک سند آماده است؟ این زمانی است که صفحه من لود شده است. 

بنابراین به محض صفحه من بارگذاری شد زیر تابع است همیشه آماده است. این گزارش می گوید، اگر یک شی از نوع jQButton، و یا اگر jQButton کلاس کلیک شده است، اجرای این تابع. بنابراین در اینجا دو تابع ناشناس، یکی تعریف شده در داخل از سوی دیگر است. 

بنابراین کل زمینه من اینجا تا کنون صفحه من است آن بارهای آن را از این تابع می نامد. و این تابع است که در انتظار برای یک دکمه برای کلیک شود. و هنگامی که یک دکمه کلیک، JQ دکمه به طور خاص کلیک می شود، به این دیگر تماس تابع است، که رفتن به مجموعه ای از پس زمینه رنگ colorDiv به هر متنی که در بین تگ. 

این مفهوم است که دکمه کلیک شد. اما در غیر این صورت، این است مرتب کردن بر اساس رفتار مشابه یک رویداد. این فقط به همان شیوه است من این در jQuery را بیان کنند. باز هم، آن را احتمالا یک بسیاری تهدید آمیز تر. آن را به عنوان به عنوان روشن نیست چیزی شبیه به event.js، است که شاید کمی بیشتر طولانی، اما کمی کمتر تهدید آمیز. 

اما اگر ما تماس پاپ را به مرورگر من پنجره، اگر من شروع clicking-- خوب، که به بنفش تغییر کرده است. این سبز است با استفاده از روش رشته است. این نارنجی است با استفاده از اداره کننده رویداد. 

این قرمز است با استفاده از jQuery، درست است؟ همه آنها رفتار دقیقا همان است. آنها فقط آن را با استفاده از مختلف روش برای حل این مشکل. خیلی بیشتر به وجود جی کوئری پس از آن ما قطعا هستید رفتن به مورد در این فیلم صحبت کنید. اما اگر شما می خواهید برای کسب اطلاعات بیشتر، شما می توانید رفتن به مرتب سازی بر جی کوئری از اسناد و مدارک و یاد بگیرند که کاملا کمی بیشتر در مورد این کتابخانه بسیار انعطاف پذیر، که بزرگ برای انجام سمت سرویس گیرنده است برنامه نویسی مانند آنچه که ما انجام به دستکاری نگاه و احساس از صفحه وب ما با مدل شیء سند. من داگ لوید هستم. این CS50 است.