Up next in 10
DOM, BOM & Window Object _ JavaScript Tutorial in Hindi #28
89 views
Feb 9, 2024
The video "DOM, BOM & Window Object _ JavaScript Tutorial in Hindi #28" provides an overview of the Document Object Model (DOM), Browser Object Model (BOM), and the Window object in JavaScript, presented in Hindi. It covers how the DOM allows JavaScript to interact with HTML elements and modify their content and structure dynamically. Additionally, it explains the BOM, which provides JavaScript access to browser features like history, location, and navigation. The Window object, representing the browser window, is also discussed, along with its properties and methods. This tutorial is valuable for Hindi-speaking beginners seeking to understand the core concepts of JavaScript for web development.
View Video Transcript
0:00
आज के इस वीडियो में हम लोग जानेंगे विंडो ऑब्जेक्ट के बारे मे�
0:02
हम देखेंगे कि BOM क्या होती है, DOM क्या होती है और ब्राॉजर में कौन-कौन से जावास्क्रिप्ट के कोर फीचर्स आप लोग को देखने को मिलते है�
0:09
बॉम ब्राउजर ऑब्जेक्ट मॉडल और डॉम डॉक्यूमेंट ऑब्जेक्ट मॉडल जो कि आपके एक चैनल पेज को पूरे डॉक्यूमेंट ट्री की तरह दिखाती है चलते हैं कंप्यूटर स्क्रीन में देखते हैं कैसे बॉम डॉम और जावासफुट के कोर फीचर्स �
0:39
आप इस्तेमाल भी कोई बड़ सकते हैं ऐसा नहीं कि आपको इस्तेमाल नहीं करना चाहिए आप डेफिनेटली इनक�
0:44
इस्तेमाल कर सकते हैं लेकिन एक सबसे बड़ा ड्रॉप एक जो इनका है वह यह है कि स्क्रिप्ट के एक्जिकेशन क�
0:49
पॉज कर देते हैं ताकि यूजर इंटरेक्ट कर सके तो जो स्क्रिप्ट है आपकी जावास्क्रिप्ट है वह पॉज हो जाएगा उसक�
0:55
एक्वेशन और जब तक वह रिंडो डिस्मिस्ट नहीं की जाती तब तक आप लोग जो है बिल्कुल भी एज एयर यूजर इंटरेक्�
1:02
नहीं कर सकते पेज से दूसरी चीज यह कि आपकी जो एक्सेट लोकेशन होती है इस मोडल की वह आपको नही�
1:08
नहीं आ लूं क्या होती है वह ब्राउजर डिiesoइट करता है मोस्ट ऑफ दे केसेस में ऊपर से निकलकर आता है अलर्ट करफ़�
1:13
और प्रॉब्लम लेकिन कोई गैरेंटी नहीं कि ऊपर से निकलकर आएगा फिर एक और चीज यह होती है कि आप इसको ज्याद�
1:18
डिफाइड कर सकते हैं आप चाहते हैं मोडर लुट डालना तो वह नहीं डाल सकते तो यह कुछ लिमिटेशन से आज ह�
1:24
बात करेंगे बॉम और डॉम की यह बॉम वह फटने वाला बॉम नहीं है और विंडो ऑप्शन की बात करेंगे ठीक है तो यहा�
1:30
जल्दी से एक रैपल बना लूंगा HTML, CSS और JavaScript का इस्तेमाल करते हु�
1:33
और इसका नाम मैं रखूँगा 28 underscore और window और उसे के साथ साथ bomb
1:42
और उसे के साथ साथ dom टीक है विंडो के W को small कर लेते है�
1:46
क्योंकि जो विंडो object होता है वो small व्यूटर लूजियों से होता है और यहां पर मैंने जो है क्रिएड कर लिए अपनी रेप्पल ठीक है अब मैं आप लोगो�
1:53
दिखाना यह चाहता हूं इसको नई टैप में खोलता हूं पहले दिखाना मैं आप लोगों को यह चाहता हूं कि विंड�
1:57
अच्छे क्या होता है अगर मैं यहां पर अपनी स्क्रिप्ट के अंदर देखो एक फास्टेस्ट वे जो है वह यहां प�
2:02
स्क्रिप्ट को लिखने का है स्क्रिप्ट टेक्स्ट इस्तेमाल करके बट क्योंकि इसको अलडी एडिट है यहां प�
2:07
देते हैं ठीक है मैं आप इस बीचों माफ कंसोल डॉट लॉग विंडो ठीक है सेव करूंगा और इसको जब रिलोड करूंग�
2:14
और अपने कंसोल को खोलूंगा तब आप लोग देखो यहां पर विंडो ऑब्जेक्ट मेरा प्रिंट हो गया अब इसके अंदर लड�
2:20
एटीओ बी होता है ब्लर होता है बहुत सारे मेथड्स होते हैं लेकिन हम लोग बात करेंगे कुछ मेथड्स की जो कि आ�
2:26
लोगों पता होने चाहिए ठीक है विंडो एक ग्लोबल ऑब्जेक्ट होता है मैंने जैसे कि नोट्स में आप लोगों के लिए लिख�
2:31
विशेष फॉलिंग जब उसके ब्राउजर विंडो ऑब्जेक्ट उसके अंदर डॉम है बॉम है और जावास्क्रिप्ट के को फीच�
2:37
से ठीक है यह ग्लोबल ऑब्जेक्ट है तो आप लोगों को विंडो डॉट कंसोल डॉट लॉग लिखने की जरूरत नहीं है अगर choix
3:04
तो हमने यह चीज़ी सीखी कि window एक global object होता है, अब bomb और dom की काफी बात की जाती है
3:09
देखो वैसे तो javascript अगर आपको आती है, code लिखना आता है, तो bomb और dom क्या है यह matter नहीं करता
3:14
अगर आपको नहीं मालूम, लेकिन मैं आपलों को बताना चाहता हूँ, कि BOM और DOM क्या है ये अगर आप लोगों को मालूम है तो आप लोगों की understanding बढ़ेगी कोई अगर आपस�
3:22
कहते हैं कि DOM में ये होता है BOM में ये होता है तो आप समझेंगे कि सामने वाला क्या बात कर रहा है तो ज�
3:27
डॉम होता है वो है document object model यह नहीं कि आपके पूर�
3:31
HTML page का एक object बन कि उसको document नाम दे दिया गया ह�
3:35
दुबारा बोल लो आपके पूरे HTML page को एक JavaScript object बना दिया गया है औ�
3:41
उसको document नाम दे दिया गया है तो अगर मैं यहाँ प�
3:45
मान लो मैं Alt Shift Bottom की दबाओ down arrow की तो यहाँ पर मैं लिखूंगा window.console
3:53
window लिखने की जरूरत नहीं है मैं थोड़ा simplify करूँगा इसको मैं जस्ट आप लोगों को बता रहा था document ठीक है अब document को मै�
3:59
window.document भी लिख सकता हूँ window global object इसकी मैं आप लोगों को बताया था इसको सेव करूँगा रिलोड करूँगा यहाँ पर और आप लोग यहाँ पर देखोगे डॉक्यूमेंट आगे अभी डॉक्यूमेंट क्या है यह डॉक्यूमेंट है इसका जावास्क्रिप्ट रिपेजेंटेशन मैं आपको दिखाता ह�
4:31
और भी बहुत सारे methods हैं जो कि use किये जा सकते हैं, आप लोग यहाँ पर देख सकते हैं, पूरी list आ गई है
4:36
लेकिन मैं यहाँ पर आप लोग को document.body print करके दिखाता हूँ, तो अगर मैं यहाँ पर document.body को print करूँ
4:41
तब आप लोग यहाँ पर देखोगे कि body print हो गई है और body के अंदर आप देखो बहुत सारे methods है first child है first element है और भी हम लोग क्या कर सकते हैं dom को manipulate कर सकते हैं dom के अंदर के एलिमेंट पर click करो तो क्या होगा dom के अंदर कोई element आप select करना चाते हैं तो वो कर सकते हैं इसका next sibling क्या है first
5:11
कि इस तरह से हम लोग एक particular element को target करके उस पर click listeners लगा सकते हैं
5:15
events को listen कर सकते हैं, but यह document object model आप लोगों को बता होना चाहिए कि यह होता है
5:21
पूरा document एक javascript object के तौर पर, window object represents browser window and provides methods to control it
5:27
it is a global object, जो window object है वो एक global object है और यह आप लोगों को एक तरीका प्रदान करता है
5:33
आपकी पूरी browser window को control करने का एक global object है य�
5:37
DOM represent the page content as HTML document page body as a javascript object styles change
6:08
और अपने प्रोपर्टीज चेंज कर सकते हैं और आपको इस तरह से आप लोग जो स्टाइल चेंज कर सकते हो और आप लोगो�
6:14
सीएसस आती है तो ऑलमोस्ट सारी सीएसस प्रोपर्टीज आप लोग जावास्क्रिप्ट से चेंज कर सकते हो अब आ�
6:19
लोग सोचो कि मैं JavaScript से क्यों change करूँ? मैं JavaScript से change क्यों करना चाहूँगा? तो उसका answer यार देखो यह है कि JavaScript से आप change इसलिए करना चाहोगे क्योंकि कभी-कभी हम लोग user ने क्या किया है? कौन सा event चल रहा है? उसके आधार पर change करना चाहेंगे कुछ properties और कुछ values को ठीक है? जैस�
6:49
तो आप चेंज कर नहीं सकते जाकर वालो आप चाहते हो कि किसी यूजर ने एंटर किया येलो और आपका जो बैकरांड पर यह लो�
6:57
है तो आप स्टाइल शीट तो आप चेंज करने सकते जाकर स्टाइल शीट तो आप जो साइड और सीजेंट पर स्टाइल से के �
7:16
जावास्क्रिप्ट के थ्रू CSS में आप लोग मैलिपिलेशन कर सकते हो पर इस तरह से background कलर change करन�
7:21
recommended नहीं है यह चीज़ें आप तब यूज करोगे जब आप चाहोगे कि यूजर के किसी action पर कोई काम हो ठीक ह�
7:27
आप लोगों समझ रहे होंगे मैं इस बारे में आप बात कर रहा हूं ठीक है सो आगे मैं बढ़ूंगा और आप लोगो�
7:35
बताऊंगा बॉम के बारे में जो कि एब्राउजर ऑप्शन मॉडल ब्राउजर ऑप्शन मॉडल ट्रेड एडिशनल ऑप्शन प्रोवाइडि�
7:42
ब्राउजर की और एडिशनल ऑब्जेक्ट अगर आप लोगों को चाहिए होस्ट एंड वार्यमेंट पर कुछ और मैंने प्लेश�
7:47
करनी है जैसे कि मान लो मैं चाहता हूं कि आज जैसे किसी देखो एक एक्शन किया मान लो किसी बटन पर क्लिक किय�
7:52
लूजर ने तो चला जाए गूगल डॉट कॉम पर किसी दूसरे बटन पर क्लिक किया तो चला जाए फेज़बुक डॉट कॉम प�
7:57
ठीक है तो मैं इस तरह की काम करा सकता हूं बॉन का इस्तेमाल करके इन फैक्ट जो हमने एलर्ट कंफर्म प्रॉम्�
8:04
थे वो बॉन की ही हिस्सा थे ब्राउजर ऑब्जेक्ट मॉडल की हिस्सा थे इसलिए मैंने आपसे कहा था कि अगर आ�
8:09
टोट जीएस यूज करें तो एलर्ट कंफर्म प्रॉम्ट शायद आप लोग यूज़ अच्छे से नहीं कर पाओ ठीक है तो एलर्ट कंफर्�
8:41
होगा host environment यह phone हो जाएगा उस code के लिए जो की run हो रहा है तो हो सकता है कि यह host environment कुछ और additional objects को provide करें तो अगर ऐसा होता है तो क्या होगा कि आप लोग उस host environment की द्वारा ब्रदान की जाने वाले objects को use कर सकते हो मैं आप आप लोगों को दिखाता हूँ अगर मैं आप लिखता ह�
9:11
लिख दिया मैंने ठीक है तो यह मुझे को विदारी डॉट कॉम पर डाइट कर देगा जैसे कि आप लोग देख सकते ह�
9:19
तो यह बॉम का ही हिस्सा है ठीक है आई होब कि आप लोगों को समझ में आ रहा है मैं किस बारे में बात कर रह�
9:24
और सब लोग notes को जरूर access कर लेना, और notes जो है
9:28
chapter 6 जो है बी यहाँ पर complete हो गया, मैं आप लोग को बता दू, तो notes जरूर access कर लेना आप सबी के सबी
9:33
और अगले वीडियो में हम लोग chapter 6 से related कुछ questions को देखने वाले हैं
9:37
तो उसको भी जरूर देखना ध्यान से, पाओगे प्रिंट आउट निकल वालो और वह सस्ता होता अपनी नज़ीदी की जरॉक्स वालों के पास जाओ सस्ते में डी�
10:00
करो उनके साथ ठीक है और निकल वालो मैं आपको एक ट्रिक और बताता हूं मैं जो बहुत पहले करता था और करन�
10:04
न chatter नहीं होते थे और मुझे प्रिंट आउट निकालना होता था किसी भी चीज का तो मैं क्या करता था कि ए�
10:13
पेज पर आट आट निकलवाता था पेजें से एक पेज यहां पर 123456789 चार-चार करके आट निकाल सकते हो आप आ�
10:21
तीन तीन करके नौ निकाल सकते तो वहीं ट्रिक का मैं इस्तेमाल करता था तो एक पेज को दोनों साइड से भ�
10:26
प्रिंट करा था और यहां पर एक दो तीन चार पांच शेष आठ नौ तो नौ और नौ अठारा यानि कि एक रुपये के पेप�
10:32
मैं 18 पेजेस को प्रेट कर लेता था तो हाँ विसली उसके ड्रॉबैक्स है कि छोटा हो जाएगा दिखेगा नही�
10:38
आपको आपकी आपको पर स्ट्रेन पड़ेगा वह तो है यार ठीक है बट समथिंग इस बेटर थे ना थी मैं प्रिंट आउट न�
10:43
निकलवा हूं विजाविस मैं मेरे पास कुछ हो ठीक है तो मुझे अभी शापिन डाउट पर फॉर्ट था उस पर निशा�
10:49
वगैरह लगा लेता तो मैं बस बता रहा हूं मैं यह नहीं कर रहा हूं कि आपको करना है और अगर आप लोग फु�
10:54
प्रेडेंट करा सकते हैं तो उससे अच्छा कुछ नहीं है ठीक है जिस मैंने अपने बारे में बताया सो I hope कि आप लोगों यह वीडियो पसंद आया होग�
11:00
और आपने यह playlist को जरूर access कर लेना है अब इस वीडियो में इतना है guys
11:04
Thank you so much guys for watching this video and I will see you
11:08
next time करते है�
#Flash-Based Entertainment