DOUG LLOYD: Bu video, biz istəyirdik ayrı-ayrı diqqət səslənirəm bir çox xüsusi etmək JavaScript element lazımlı ola bilər ki, zaman başlanğıc edirik web pages manipulyasiya işləmək və web page məzmununu dəyişən Tez. Və anlayışı var Document Object Model. Kimi Beləliklə, biz bizim video gördüm JavaScript, obyektlərin çox çevik edir. Onlar müxtəlif sahələri ola bilər. Və biz bir çox daxil etməyib, baxmayaraq ətraflı, həmin sahələrdə və ya xassələri, ki, biz yəqin ki, daha olardı müvafiq onlara zəng hətta bir obyekt kontekstində o xassələri digər obyektlərin ola bilər. Və həmin obyektlərin daxili digər obyektlərin ola bilər. 

Bu çox böyük obyekt var digər obyektlərin bir çox bunun içərisində olan sort böyük bir ağac bu fikri yaradır. İndi sənəd obyekt bir JavaScript çox xüsusi obyekt ki, bütün web təşkil çətir bu cür altında səhifə bir obyekt. Və belə sənədin daxili object təqdim obyektləri Sizin web page baş və bədən. 

O Inside digər var obyektləri, Et Cetera, Et Cetera, bütün web page var qədər bu böyük obyekt təşkil olunub. Alt-üst sağ, burada nə var? Bəli, biz işləmək üçün necə JavaScript obyektləri ilə. 

Biz bir obyekt varsa Belə ki, ki, bizim bütün web page aiddir düzgün axtararaq deməkdir üsulları obyekt manipulyasiya və ya müəyyən değiştirmeyle onun xassələri, biz elementləri dəyişə bilərsiniz Bizim səhifə program JavaScript istifadə əvəzinə olan HTML, demək, hər şeyi kod. Belə ki, burada bir misal var web page çox sadə, sağ? Bu HTML tags, baş var. 

Daxilində bir adı, salam dünya var. Sonra bir orqan var. Ki, Inside, mən üç müxtəlif şeylər. Mən bir h2 header tag var paraqraf, və bir link. Bu, çox sadə web page edir. 

Yaxşı, nə güc sənəd kimi bu baxmaq üçün etiraz? Bəli, bu bir az bəlkə ilk scary. Lakin bu, həqiqətən, yalnız bir böyük ağac var. Və çox kök sənəddir. 

Sənəd başqa Inside mənim səhifə HTML istinad obyekt. Və mənim səhifə HTML bütün bu var. Və sonra HTML daxilində obyekt, mən baş obyekt var, orada hər şey aiddir. 

Və daxilində, Mən bir mövzu obyekt var. Və daxilində, başqa bir var yalnız salam dünya var etiraz. Mən bədən ola bilər Bu kimi təmsil edib. 

Mənim bədən daxilində, Mən H2 var obyekt və paraqraf üçün bir p obyekt və keçid üçün bir bir obyekt. Və bu bütün iyerarxiya böyük ağac kimi təmsil oluna bilər kiçik Little çox hər şeyi həyata gəlir. İndi, əlbəttə, zaman biz biz, proqramlaşdırma edirik böyük bir ağac kimi şeylər düşünmürəm. Biz faktiki görmək istəyirik kodu aid şeylər. 

Və xoşbəxtlikdən, biz Geliştirici vasitələrdən istifadə həqiqətən bir nəzər Bu veb sənəd obyekt. Və bunu edək. Mən bir browser nişanı açdı etdik. 

Mən Developer Tools açdı etdik. Və JavaScript mənim video, I konsol deyil ki, qeyd yalnız yerde harada biz məlumat çap, bu da bir yerdə var biz giriş məlumat bilərsiniz. Bu çərçivədə, nə Mən demək gedirəm Mən geri almaq istəyirəm sənəd obyektləri, mən ona nəzər başlaya bilərsiniz. Mən bu necə ola bilər? Bəli, mən istəyirsinizsə həqiqətən gözəl təşkil, Mən console.dir, D-I-R demək gedirəm. İndi yalnız çap console.log istifadə həyata bir şey çox sadə. Amma bu təşkil etmək istəyirsinizsə, hiyerarşik bir obyekt kimi, Mən bu cür strukturlaşdırılmış istəyirəm bir kataloq strukturu kimi. 

Belə ki, sənəd console.dir istəyirəm. Mən Enter düyməsini basın gedirəm. Və sağ aşağıdakı indi, və mən burada zoom lazımdır Bu cavab sənədi var onun yanında bir az ox ilə. İndi bu arrow açmaq zaman, heyəti bir çox var olacaq. 

Amma biz çox ignore olacaq Bu və diqqət yalnız cür ən mühüm hissəsi, biz belə bu sənədi naviqasiya başlaya bilərsiniz. DOM daha bir çox daha çox var qovşaqlarının və uşaq qovşaqlarının yalnız ana. Əlavə məhsulları bir çox var. 

Mən bu açmaq üçün gedirəm. Və bütövlükdə çox var stuff ki pops. Amma qayğı bütün burada, uşaq qovşaqlarının. Ki açmaq edək. 

Orada Inside görürəm tanış bir şey, HTML. Bizim sənədin daxilində So bir səviyyədə aşağı, HTML. Hesab edirəm ki, açmaq. Biz nə gözləyirik? 

Siz bizim diaqram geri əgər, biz HTML daxilində nə tapmaq lazımdır? Ağac aşağıdakı hansı iki qovşaqlarının var? Tapmaq edək. Biz HTML açmaq. Biz uşaq qovşaqlarının enmək. 

Açıq Pop. Baş və bədən var. Və biz baş aça bilər. Onun uşaq qovşaqlarının gedin. Yaxşı, adı var. 

Və biz davam edə bilər və Bu kimi əbədi. Biz həmçinin orqanı ilə bunu edə bilər. Amma baxmaq üçün bir yol var böyük obyekt kimi təşkil sənəd. Biz baxsaq və böyük var bir çox görünür obyekt kodu kimi, ki, biz başlaya bilərsiniz deməkdir istifadə edərək, bu böyük obyekt manipulyasiya code nə dəyişdirmək üçün veb görünür və kimi hiss edir. 

Belə ki, bir olduqca güclü alət var indi bizim sərəncamında var. Biz yalnız gördüm, belə ki, sənəd obyekt özü və onun daxili obyektlərin bütün yalnız xassələri və üsulları var biz hər hansı digər obyekt kimi JavaScript ilə işləyir. Amma biz bu xüsusiyyətləri istifadə edə bilərsiniz və sort aşağı qazmaq bu metodlardan istifadə və böyük sənəd almaq aşağı və aşağı və aşağı, finer və finer taxıl ətraflı, biz qədər çox xüsusi bir parça almaq bizim biz dəyişdirmək istədiyiniz web page. 

Və biz xassələri yeniləmə zaman Obyekt sənəd və ya bu üsulları zəng, şeyi bizim web page baş verə bilər. Və biz hər hansı bir sərinləşdirici etmək lazım deyil bu dəyişikliklər qüvvəyə var. 

Və olduqca sərin imkanı var biz kodu ilə çalışırıq zaman var. Belə ki, bu xüsusiyyətləri bəzi hansılardır sənəd obyekt hissəsi var? Yaxşı, siz yəqin ki, gördüm Onların bir neçə həqiqətən tez biz zipping kimi nəhəng sənəd vasitəsilə object biz yalnız web browser gördüm. 

Lakin bu xüsusiyyətləri bir neçə daxili HTML kimi şeylər ola bilər. Və hətta məni geri bilər JavaScript video bu istifadə çox sonunda mən hadisələr haqqında danışırdı. Bu daxili HTML nə idi? Bəli, bu yalnız nə var tags arasında. 

Və belə daxili HTML, Məsələn, adı biz sizə əgər tag, gedən bir an əvvəl, məsələn ki, salam dünya olardı. Yəni bizim səhifənin adı idi. Digər xassələri node adı, daxil olan HTML adı adı kimi element. ID edir ID, HTML element bağlayırlar. 

Biz xüsusi göstərə bilər Xatırladaq ki, Bizim HTML xüsusi elementləri adətən ID atributu ilə CSS kontekstində lazımlı gəlir, xüsusi. Istinad edir valideyn node, Yalnız mənə yuxarıda DOM nə. Və uşaq qovşaqlarının, olan bir aşağı mənə aşağıda nə üçün arayış. Və biz bir çox gördüm yalnız vasitəsilə axtarır. Aldıq necə uşaq qovşaqlarının, ki ağac aşağı və aşağı. 

Atributları ki, yalnız bir sıra var HTML element atributları. Belə ki, atributları nümunə bilər Bir image tag varsa ola, adətən mənbə atributu var, bəlkə bir hündürlüyü və eni atributu. Və belə ki, yalnız bir sıra olacaq bağlı atributları bütün ki, HTML element ilə. 

Style başqa biridir ki, CSS təmsil edir xüsusi element üslubu. Və sonra bu video, biz xüsusi lazımdır leverage stil bir neçə etmək bizim veb səhifəsinə dəyişikliklər. Belə ki, o, bəzi xassələri vardır. 

Həmçinin bəzi var ki, biz üsulları də daha tez bəlkə təcrid etmək üçün istifadə Document Obyekt elementləri. Yəqin ki, ən çox Bu olan getElementById edir. Beləliklə, mən, çünki kimi bir şey deyə bilər Bu sənəd üsulu var unutmayın , Document.getElementByID Obyekt. 

Və bu mötərizə daxilində müəyyən xüsusi ID ilə bir HTML element Mən əvvəllər etdik ki atributu müəyyən və mən dərhal lazımdır ki, element doğru getmək ümumi saytının. Belə ki, bəlkə qazmaq yoxdur hər bir qat vasitəsilə aşağı. Mən yalnız onu tapmaq üçün bu metodu istifadə edə bilərsiniz, sort bir istilik axtaran raket kimi, sağ? Bu, yalnız gedir və hesab dəqiq axtarır nə. 

GetElementsByTagName deyil ruhunda çox oxşardır. Bəlkə bütün bu tapmaq olardı qalın tags və ya p tags bütün və mənə hər şeyi bir sıra vermək Mən sonra işləmək bilər. appendChild bir şey edər aşağı ağac bir səviyyədə. 

Beləliklə, mən bütün yeni əlavə edə bilərsiniz element bir səviyyədə aşağı. Və ya ki, bir element aradan qaldırılması də mən istəyirəm bir səviyyədə aşağı Mənim web page bir şey silmək üçün. İndi tez kodlaşdırma qeyd və sürətli baş ağrısı ümid edirəm ki, qeyd qənaət. 

getElementById-- d kiçik edir. Mən neçə dəfə sizə deyə bilməz istifadə getElementById və kapitallaşdırılmış orada d. Bu, həqiqətən, ümumi var, çünki. Biz sözü ID yazmaq, bu adətən kapital I kapital D. Və mənim kodu yalnız iş deyil. Mən niyə anlamaq bilməz. Bu, həqiqətən, həqiqətən, həqiqətən, bir var hamı edir ki, ümumi səhv, hətta ekspertlər əbədi bunu. Belə ki, yalnız, getElementById xəbərdar ola bilər, ki, d kiçik deyil. Və ümid edirəm ki, siz bir neçə saxlayır dert ən azı dəqiqə. 

Belə ki, nə bu bütün bizə nə deyir? Biz bu üsulları var. Biz bu xüsusiyyətləri var. İndi biz başlamaq əgər sənəd, sənəd. nə olursa olsun, biz indi hər hansı bir əldə edə bilərsiniz bizim web page bir parça biz JavaScript istifadə etmək istəyirəm ki, yalnız bu üsulları zəng və xassələri yararlanarak biz müxtəlif yerlərdə tapmaq. 

Bu, wordy əldə edə bilərsiniz document.getElementByID, bəlkə uzun tag adı, bəlkə daha sonra zəng edin. Things bir az wordy əldə edə bilərsiniz. Və proqramçılar kimi, var kimi yəqin ki, bu video çox görülən, biz wordy şeyi kimi deyil. 

Biz tez şeyə qadirdir olmaq istəyirəm. Beləliklə, biz bir daha istəyirəm qısa yol bir şey demək. Belə ki, potensial bu cür bir şey anlayışı jQuery çağırıb. İndi jQuery JavaScript deyil. Bu JavaScript hissəsi deyil. 

Bu yazılmış bir kitabxanadır bəzi JavaScript proqramçılar tərəfindən təxminən 10 il əvvəl. Və onun məqsədi bu nədir asanlaşdırmaq üçün adlı klient scripting olan biz yalnız nə əsasən DOM manipulyasiya ilə söhbət. Belə ki, Mən dəyişdirmək istədi Mənim web page fon rəngi, bəlkə xüsusi Div. 

Burada yəqin alıram ElementById colorDiv. Mən onun fon rəngi təyin etmək istəyirəm. Mən yalnız təmiz JavaScript istifadə edirəm əgər Document Object Model istifadə edərək, ki, sağ məhsulları bir çox var? document.getElementByID colorDiv.style.backgroundColor yaşıl =. 

Whew. Yəni bir çox idi. Bu da yazın bir çox var. Və belə jQuery, biz bəlkə demək olar Bu bir az daha yığcam. onu olmaqla off ticarət bəlkə bir az var bit qəflətən daha sirli, sağ? 

Ən azı uzun bir az daha biz edirik nə kimi izahlı. Bu dollar işarəsi, parantez, bir quote, hash, colorDiv, sağ? Bunun mənası nədir? Yaxşı, ki, yalnız əsasən document.getElementByID colorDiv. 

Amma bu stenoqrafiya bu sort jQuery istifadə edərək bunu yol. Yalnız indi bir nəzər salaq müxtəlif yollarla bir neçə Mən, həqiqətən, bilər ki, bu Document Object istifadə Model mənim site ədəd manipulyasiya. Xüsusilə, gedirik manipulyasiya iş üçün xüsusi rəng Bir web page Div, colorDiv. Belə ki, bir nəzər salaq. Oldu. Mən bir səhifə deyiləm. Siz download zaman test.html deyirlər bu siz bu ilə misgər istəyirsinizsə. Mən bir dəstə var Bu səhifədə düymələri. Mən fərdi funksiyaları deyirəm fon rəngi, yaşıl, bənövşəyi üçün, narıncı, qırmızı, mavi, bir funksiyası background rəng, hadisə handler fon rəngi, və jQuery istifadə üçün. Mən nə söhbət edirəm mən bunu edirəm? Beləliklə, biz düymələri gördüm. İndi bir nəzər salaq burada mənbə kodu bəzi. Biz test.html ilə başlamaq lazımdır. Fon üçün belə fərdi funksiyaları rəng Burada tipli olduğunuz nə. Mənə bir az hərəkət edək. 

Və mən görəcəksiniz Bu düymələri müəyyən etmişik bu düyməni tıklandığında demək, bənövşəyi çevirmək funksiyası zəng. Bu düyməsini basın zaman, daha doğrusu, funksiyası yaşıl çevirmək zəng qırmızı, narıncı çevirmək, mavi açın. Siz yəqin ki, bu ki, tahmin edə bilərsiniz ən yaxşı dizayn bəlkə deyil mənada, sağ? 

Mən əgər gözəl olardı daha ümumi yanaşma var. Bəli, ilk biz bir nəzər lazımdır bu beş funksiyaları nə document.getElementByID bənövşəyi colorDiv.style.background = qırmızı, yaşıl, narıncı müvafiq olaraq, mavi. Belə ki, xüsusilə ən yaxşı dizayn. 

düymələri növbəti set Mən yazdıq var adlı bir funksiyası ki, yəqin rəngini onun arqument kimi bir simli qəbul edir. Belə ki, bu bir az daha yaxşıdır. Qırmızı, bənövşəyi, yaşıl, narıncı, blue artıq bir dəlildir. Mən bir daha ümumi yazdıq hal JavaScript funksiyası, bu kimi bir şey ola bilər. Mən keçən alıram. Bu funksiya dəyişiklik rəng rəng adlı bir dəlil gözləyirik. Mən müəyyən deyirəm rəng fon rəngi. Belə ki, burada mən burada var nə edir. Belə ki, bir az daha yaxşıdır. 

Amma edə bilər daha yaxşı edə. Biz nəzər enmək əgər Tədbirdə handler vəziyyəti, İndi bütün bu zənglər eyni baxmaq. Siz geri əgər bizim Tədbirdə işleyicileri müzakirəsi, Mən haqqında məlumat əldə edə bilərsiniz Bu düymələri tıklayan və istifadə edilib. 

Və belə event.JavaScript, mən var yazılı dəyişiklik rəng hadisə olan tıklayan olan düyməsini tutulur. Ki, trigger obyekt xətt var. Və sonra burada, bu, həqiqətən wordy olur. Amma nə edirəm mən var fon qəbulu triggerObject inner.HTML rəng. Bu mətn var düyməsini tags arasında. 

Və sonra mən yəqin var kiçik müəyyən etmək. Və mən bütün çevirə bilərsiniz necə string istifadə JavaScript kiçik ki, üsul kiçik. Mən bir rəng təyin Çünki, Mən burada çalışıram kimi, rəng bütün kiçik olmalıdır. 

Amma mən düyməsini biz başqa bir nəzər əgər, mətn olduğunu qeyd bənövşəyi üçün kapital P ilə yazılı. Və sonra çox Burada alt, mən yəqin cəhd və həmçinin bu istifadə jQuery yoxdur. Və bu halda, mən, həqiqətən deyiləm bütün bir funksiyası zəng. Mən yalnız mən sinif deyiləm ki, bildirib etdik Bu düyməsinə istifadə edərək, bir JQ düyməsini edir. Bu belədir. 

Belə ki, necə jQuery edirəm nə bilir? Bəli, bu üstünlüklərindən biridir jQuery mənfi cəhətləri doğramaq. Mənə şeyə imkan bilər çox yığcam, amma bəlkə deyil kimi daxilən. Bəlkə o digər üç etmək az daha edirəm nə hiss. Burada, baxmayaraq ki, nə olub? 

Görünür, yaratmaq anonim funksiyası ki, yük zaman mənim sənəd , belə ki, document.ready hazır bir funksiyası baş verəcək. Əsasən, bir sənəd hazırdır? Mənim səhifə yüklənmiş zaman var. 

Belə ki, tezliklə mənim səhifə yüklənən kimi, funksiyası aşağıdakı həmişə hazırdır. Bildirilir ki, əgər növü jQButton obyekti, və ya sinif jQButton tıklayan əgər, bu funksiyanı yerinə. Belə ki, burada iki anonim funksiyaları var, bir başqa daxilində müəyyən edilmişdir. 

Mənim bütün kontekstində So burada indiyə qədər mənim səhifə Bu yükləyir zaman bu funksiyanı çağırır. Bu funksiya gözləyir bir düyməsinə tıklayan. Və bir düyməsinə tıklandığında, JQ düyməsini xüsusi tıklandığında, bu digər çağırır funksiyası gedir fon təyin etmək colorDiv rəng olmaq hər hansı mətn tags arasında edir. 

Bu anlayışdır olan düyməsinə tıklandığında. Lakin başqa, bu sort edir bir hadisə bənzər davranır. Bu, sadəcə eyni şəkildə Mən jQuery bu ifadə edirəm. Yenə də, bu, yəqin ki, bir daha çox qorxuducu. Bu kimi aydın deyil event.js kimi bir şey, olan bəlkə bir az daha verbose, lakin bir az daha az qorxuducu. 

Amma biz mənim brauzerinizin üzərində geri pop əgər pəncərə, Mən də clicking-- başlamaq əgər, ki, bənövşəyi dəyişib. Bu string metodundan istifadə yaşıl rəngdədir. Bu hadisə handler istifadə narıncı edir. 

Bu hüquq, jQuery istifadə edərək qırmızı? Onlar bütün eyni davranırlar. Onlar yalnız müxtəlif istifadə etmək problemi həll etmək üçün yaxınlaşır. Daha çox var jQuery sonra əlbəttə ki, istəyirik Bu video haqqında danışmaq olacaq. Daha çox öyrənmək istəyirsinizsə Lakin, siz sənədlərin jQuery növ getmək və haqqında bir az daha ətraflı məlumat Bu çox çevik kitabxana, olan klient etmək üçün böyük Belə biz nə etdiklərinizi kimi scripting görünüşünü manipulyasiya və bizim web page hiss Document Object Model. Mən Doug Lloyd edirəm. Bu CS50 edir.