Transcript for:
JavaScript DOM Manipulation

हैव एवरीवन लास्ट वीडियो में हमने देखा कैसे एक एलिमेंट को हम क्लोन करके किसी दूसरे एलिमेंट के अंदर उसको अपेंड कर सकते हैं और जितनी बार चाहे हम उतनी बार अपेंड कर सकते हैं और वो मल्टीपल टाइम्स हमने कार्ड क्रिएट किए द कई सारे कार्ड 100 1000 कार्ड क्रिएट किए द ज्यादा स्क्रिप्ट का उसे करके अगर वो एचटीएमएल का उसे करके खुद से हाथ से करना होता तो बहुत ज्यादा टाइम लग जाता और जो अपेंड करने के लिए एक कंडीशन बस होती है की जिस एलिमेंट को तुम appeand करने जा रहे हो वो पैरेंट नहीं होना चाहिए बाकी किसी भी एलिमेंट को अपेंड कर सकते हैं और अगर हम क्लोन करके अगर हम क्लोन किए बिना पेंट करेंगे तो क्या होता है वहां से कट करके पेस्ट हो जाता है सर से कट पेस्ट की तरह कॉपी पेस्ट की तरह होता है ओरिजिनल पेस्ट होता है एलिमेंट को कॉपी पेस्ट करते हैं इस वीडियो में देखेंगे की कैसे नया एलिमेंट क्रिएट कर सकते हैं और उसे एलिमेंट को फिर हम अपने एचटीएमएल पेज के अंदर अपेंड कर सकते हैं तो चलो अपनी स्क्रीन पर आते हैं और देखते हैं कैसे अपेंड करेंगे उसके पहले मैंने क्या किया यहां पर एक एचटीएमएल वही है लगभग जो पुराने प्रोजेक्ट का था वही है बस यहां पर मैंने कुछ इमेजेस अपेंड कर दी हैं अपेंड नहीं मतलब यहां पे रख दिए हैं ये पोकेमोन की इमेजेस हैं पोकेमोन समझ लो एक कैरक्टर है कार्टून कैरक्टर है मुझे भी बहुत ज्यादा पता नहीं है लेकिन एक कार्टून कैरक्टर होता है उसमें मतलब अलग-अलग तरह के कार्टून कैरेक्टर्स होते हैं तो इसका गेम भी आया था एक काफी दिन पहले हमें पोकेमोन कलेक्ट करना था तो वही पोकेमोन कैरक्टर है कार्टून कैरक्टर तो किसी ने गेट अप के ऊपर सारे पोकेमोन के बहुत सारे कैरेक्टर्स को अपलोड कर रखा है और उसको नंबर दे रखा है 123 तो मैं इसको अगर थोड़ा सा जूम कर डन तो हो सकता है आपको ना दिखे तो यहां पर यहां पर क्या किया उन्होंने एक फोल्डर के अंदर सारे पोकेमोन कैरेक्टर्स को अपलोड कर दिया और उसको नंबर दे दिया 123 यानी की अगर तुम यहां पर ए जाओ गूगल पर सर्च करोगे अगर पोकेमोन पोकेमोन एपीआई तो यही अगर तुम सर्च करोगे गूगल पे आके ओके समझ लो गूगल ड्राइव की तरह जैसे फोल्डर होता है वैसे यहां पर फोल्डर है और फोल्डर के अंदर यह स्प्राइट नाम से फोल्डर है इस फोल्डर के अंदर एक पोकेमोन नाम से फोल्डर है तो उसके अंदर वही सारी इमेजेस मिल जाएंगी जो की हमने उसे किया जैसे इमेज नंबर ओपन करोगे तो कुछ इस तरह से खुलकर ए रही है और यहां पर अगर तुम चेंज करोगे तो अगर मैं यहां पर चेंज करके कोई कैरक्टर है यहां पे हमें यह दिख नहीं रहा है लेकिन कोई कैरेक्टर अगर 60 कर देंगे तो भी कोई ना कोई कैरक्टर है तो उसे नाम से उन्होंने इमेजेस अपलोड कर दिए फोल्डर के अंदर और हम उसी नंबर को चेंज कर रहे हैं यहां पे हमारा ये है ना यूआरएल इसके अंदर ये नंबर को चेंज कर रहे हैं एक दो तीन चार पंच और चार पंच करके ऐसे ही मुझे ए रही है यहां पर अगर आके देखोगे यह जो फोल्डर है पोकेमान वाला तो इसके अंदर तुम्हें बहुत सारी इमेजेस मिल जाएंगी और यहां पर जो ऑर्डर है बहुत ही अच्छे से नहीं किया गया है यहां पर क्या किया गया 11 वाला सब कुछ आगे रख दिए हैं फिर वैन के बाद जब आएगा खत्म हो जाएगा वैन वाला तब तो के बाद वाला उसे करेंगे फ्रेंड्स हमारे कम के लिए उतना ही बहुत है तो अभी आपका कम क्या है मैं यहां से यह पंच इमेजेस मैंने यहां पे राखी है और स्टाइल में भी मैंने थोड़ा सा स्टाइल है थोड़ी सी बड़ी है तो आप चाहो तो यहां से वेट हटा सकते हो लेकिन 50 50 पिक्सल ठीक है मैं 60 कर देता हूं थोड़ा सा बड़ा और हो जाएगा ताकि देखने में थोड़ा सा क्लियर दिखे और 60 पिक्सल मैंने इसको कर दिया आपको डिस्क्रिप्शन में मिल जाएगा इसका स्टार्टर को वहां से स्टार्टर को डाउनलोड कर लेना और स्क्रिप्ट जिसके अंदर यह वही पुराने वीडियो का कोड है जो की ऑलरेडी आपके पास होगा अगर आपने पुराने कोड में किया है मतलब पुराने वीडियो को फॉलो किया है जिसके पहले जस्ट वीडियो को फॉलो किया है तो यह वाला आपके पास ऑलरेडी होगा यहां से यह चीज हटा दो क्योंकि यह एरर देगा यहां से मैंने कार्ड वाला वह हटा दिया कार्ड वाला तो यह नल ए रहा है क्योंकि कार्ड नाम से कोई भी यहां पे क्लास नहीं है तो यह यह वाला चीज हटा सकते हो बाकी h1 है हमने सिलेक्ट किया और कंटेनर सिलेक्ट किया इसको सिलेक्ट रहने दो अभी इसका हम थोड़ी देर में उसे करेंगे आगे चल के तो ये हो गया अब मैं क्या चाहता हूं आप एचटीएमएल के अंदर से यह एक से लेकर मतलब दो से लेके पंच तक सारे पोकेमोन को हटा दो सारी चीजों को हटा दो अब आप उनको क्या करना है ज्यादा स्क्रिप्ट के अंदर आना है और इस जो यह वाली इमेज है जो अभी हमारे पेज के अंदर इमेज है इसको सिलेक्ट करना है आप चाहे क्लास के सिलेक्ट करो चाहे बिना क्लास देखे सिलेक्ट करो किसी तरह से आपको इसको सिलेक्ट करना है और फिर इसको क्लोन करना जैसे हमने लास्ट में कार्ड को लोन किया था इसको क्लोन करना और इसके यूआरएल को चेंज करते रहना करते-करते आपको हंड्रेड इमेजेस यहां पर लगानी है आप वीडियो को पॉज करो ट्राई करो तो मैं उम्मीद करता हूं अपने कर लिया होगा बहुत मुश्किल नहीं है लेकिन मैं फिर से करके यहां पर दिखाता हूं एक बार हम पहले क्या करेंगे उसे इमेज को सिलेक्ट करेंगे तो कौन मैन लो इमेज फर्स्ट इमेज फर्स्ट इमेज कर देते हैं और फिर यहां से हम सिलेक्ट कर लेंगे तो यह हो गया ठीक है अभी मैं क्या करना है हम उसे करेंगे फॉर लूप फॉर लूप हमने लास्ट वीडियो में किया था वही हम अनकमिट करके कर सकते हैं तो मैं यही अनकनेक्ट कर देता हूं और मैं कार्ड वार्ड को नहीं करूंगा कार्ड में हटा देता हूं मैं क्लोन करूंगा अच्छा मैं यही रहने देता हूं मैं क्या करता हूं न्यू इमेज इसको कर देता हूं और मैं यह जो कार्ड था इसको मैं चेंज करके कर देता हूं फर्स्ट इमेज यानी की हम फर्स्ट इमेज को क्लोन कर रहे हैं और क्लोन करके एक न्यू इमेज बना रहे हैं उसका सोर्स ऑलरेडी होगा अगर हम चाहे है तो यह अगर मैं कर डन यह तो अभी मैंने क्या किया फर्स्ट इमेज को मैंने कर लिया और लोन करके उसको मैंने इस कंटेनर के अंदर अपेंड कर दिया तो देखो यह हर एक मतलब जितनी बार हमने लूप चलाया उतनी बार केवल एक ही इमेज हो रही है तो हमने इसके सोर्स को अपडेट नहीं किया है जो हम क्लोन करते हैं तो जो उसके ऊपर अटरीब्यूट है सोर्स एक अटरीब्यूट होता है वो भी क्लोन हो जाता है अगर मैं यहां पर फर्स्ट इमेज को क्लोन करके लिखा हूं यह देखो फर्स्ट इमेज को क्लोन करता हूं तो उसके ऊपर जो भी सोर्स था वह क्लोन हो गया है तो इसीलिए हमें इतनी सारी इमेजेस दिख रही हैं अभी मैं क्या करूंगा क्लोन करने के बाद में इसका जो सोर्स है उसको मैं अपडेट करूंगा अपडेट कैसे करेंगे हम यहां से कॉपी कर लेते हैं और करेंगे न्यू image.src में अपडेट कर देंगे यह वाला सोर्स लेकिन हम इसको रखेंगे स्ट्रिंग टेंप्लेट लिटिल में और यहां पर वैन नहीं ब्रैकेट लाएंगे और यहां पर लिख देंगे फर्स्ट टाइम में तू रहेगा तो हम क्या करते हम उसको सिलेक्ट करेंगे तो हम हमें इमेज ही नहीं मिलेगी अभी इमेज नहीं मिलेगी तो हम क्लोन किसको करेंगे और क्लोन नहीं करेंगे तो सोर्स की kacchate करेंगे और फिर किसको अपेंड करेंगे तो फिर ये पुरी कहानी खत्म हो गई तो अब हम कैसे करें तो हमें ये फर्स्ट इमेज नहीं मिलेगी इसको मैं कमेंट आउट कर देता हूं मैन लो फर्स्ट इमेज हमारे पास नहीं है अब वही से चीज करना है एक से लेकर 100 तक हमें सारी इमेजेस को लगाना है उसके अंदर लेकिन अब कैसे करेंगे हम तो यहां पर हम उसे करते हैं डॉक्यूमेंट डॉट क्रिएट एलिमेंट तो डॉक्यूमेंट. क्रिएट एलिमेंट क्या करता है अभी के लिए मैं इतने कोड को कमेंट कर देता हूं थोड़ा सा समझते हैं document.com क्रिएट एलिमेंट क्या करता है मैं यहां पर ए जाता हूं कौन सोल में ही और यहीं पे डॉक्यूमेंट क्रिएट एलिमेंट करके दिखाता हूं जैसे हमने किया document.com क्रिएट एलिमेंट क्रिएट एलिमेंट जैसे ही करेंगे तो यह होता है फंक्शन चाहिए लेकिन तुमने कोई अरगुमेंट नहीं पास किया इसके अंदर हमें कुछ पास करना है बेसिकली बोल रहा है की इसको उसे एलिमेंट का नाम बताओ जो एलिमेंट में क्रिएट करना है फॉर एग्जांपल यह क्या करेगा एक पैराग्राफ से रिलेटेड फॉर्मेट में दिखा रहा है लेकिन हम चाहे कर सकते हैं अगर consol.ir करेंगे यह एलिमेंट जो उसने क्रिएट करके दिया है तो इसके ऊपर देखो की बहुत सारी प्रॉपर्टीज और बहुत सारी चीज इससे रिलेटेड जो भी स्टाइल्स हैं बहुत सारी चीज पैराग्राफ एलिमेंट क्रिएट कर दिया और इसके इसका उसे करके तुम केवल वही एलिमेंट्स नहीं क्रिएट कर सकते हो जो की एचटीएमएल के ऊपर डिफाइंड होते हैं तो हम कोई भी एलिमेंट क्रिएट कर सकते हो जैसे की तुम चाहो तो अपने नाम का एलिमेंट क्रिएट कर सकते हो जैसे मैं अगर अनुराग के नाम का एलिमेंट चाहो तो क्रिएट कर सकता हूं तो यह क्या करेगा पहले उसको स्मॉल केस में कर देगा मतलब हमने ए को कैपिटल किया है ना यहां पे लेकिन वो स्मॉल लेटर में बदल देगा मैं और फिर उसे अनुराग नाम से एक टैग क्रिएट कर देगा तो इसको तुम कोई भी नाम दे दो उसे नाम से एक एलिमेंट क्रिएट करके दे देता है एचटीएमएल एलिमेंट और एक एचटीएमएल एलिमेंट के ऊपर कोई भी प्रॉपर्टी हो वह सारी प्रॉपर्टीज वहां पे उसके अंदर ए जाएंगी एक ऑब्जेक्ट रहेगा उसके अंदर ए जाएंगी जिसको हम डॉक्यूमेंट डॉट कॉम डॉ करके देख सकते हैं और आपको पता हो या ना पता हो हम कोई भी एलिमेंट क्रिएट कर सकते हैं अपने एचटीएमएल के अंदर भी जैसे की मैं अपने नाम से एलिमेंट चाहूं तो क्रिएट कर सकता हूं अगर मैं एलिमेंट क्रिएट करो ऐसे तो एक वैलिड एलिमेंट है कोई एरर नहीं देता देखो यह हे ए गया बस इसकी कुछ डिफॉल्ट चीज होती हैं जो हमें पता होनी चाहिए जिससे हमारा एक अनुराग नाम से एलिमेंट ए गया है तो ये आप गैस करके बताओ ये ब्लॉक लेवल एलिमेंट है की इनलाइन एलिमेंट है तो इसका यहां पे तो कुछ दिखेगा नहीं लेकिन कंप्यूटर में अगर जाओगे तो ये होता है इन लाइन अगर डिस्प्ले सर्च करोगे डिस्प्ले तो यह डिस्प्ले इन लाइन होता है और भी कुछ चीज होती हैं बस तुम समझ लो की जो भी ऐसा एलिमेंट जिसका नाम तुम हवा से लेके ए गए हो कहीं से भी अपने मैन से लिख दिया वो एक इन लाइन एलिमेंट होगा अगर मैं यहां पर सिंह कर डन सिंह में हेलो कर दूंगा तो देखो दोनों साइड बाय साइड ए जाएंगे क्योंकि इन लाइन एलिमेंट्स हैं तो यह डिफरेंस होता है तो किसी भी नाम से एक टैग क्रिएट कर सकते हो है तो हम फालतू एलिमेंट बिना नाम के नहीं क्रिएट करेंगे हम यूजफुल एलिमेंट्स सीक्रेट करेंगे जैसे की h1 डेफ टैग यही सब क्रिएट करेंगे लेकिन करने को तो कोई भी एलिमेंट क्रिएट कर सकते हो और मैं यहां पे अगर दीप पास करूं और डेप को कैपिटल में दे डन कैपिटल में आई दी आई सी कर देता हूं तो यह दीप क्रिएट करेगा और उसको स्मॉल बना देगा ये देखो उसने एक दीव टैग क्रिएट करके दे दिया ये केवल टैग नहीं है ये पूरा का पूरा एलिमेंट है उसके अंदर बहुत सारी प्रॉपर्टीज हैं एंड डी साइंस ये एक ऑब्जेक्ट की तरह हमारे जावास्क्रिप्ट की मेमोरी के अंदर से है तो इस तरह से हम एक एलिमेंट क्रिएट कर सकते हैं अब हमने क्रिएट तो कर लिया अब हम इसको ऐड कैसे करेंगे वो ऐड कर सकते हैं जैसे हमने अभी तक किया अपेंड करके तो चलो अपने इसमें आते हैं और मैं एक पहले क्रिएट करता हूं मैं क्या करता हूं बस पी नाम देते हैं और डॉक्यूमेंट डॉक्यूमेंट क्रिएट एलिमेंट और यहां पर मैं दल दूंगा हम करेंगे अपेंड अपने कंटेनर के अंदर पेंट कर सकते हैं अपने पिता के अंदर भी पेंट कर सकते हैं तो चलो पहले बॉडी के अंदर ऐप एंड करके दिखाता हूं मैं देखो अभी बॉडी के अंदर हमारे ये है h1 है स्क्रिप्ट है तो अपेंड करने पर क्या होता है सबसे एंड में जाता है तो सबसे एंड में यानी की स्क्रिप्ट के एंड में आएगा स्क्रिप्ट के बाद आएगा यहां पे क्योंकि वही सबसे लास्ट वाली जगह है तो उधर हम अपेंड करते हैं इसको तो हमारे पास पी है हमारी जो ब्राउज़र का मेमोरी है जावास्क्रिप्ट की मेमोरी है वहां पर हमने पी टाइप ऑलरेडी क्रिएट कर रखा है अब इसको मैं दल देता हूं इसके अंदर बॉडी के अंदर अब बॉडी में करता हूं डॉक्यूमेंट बॉडी डॉट अपेंड अपेंड उसे करो यहां पर हम दल देंगे वेरिएबल है जो की हमने अभी क्रिएट किया है तो जैसे ही हम एंड जैसे इंटर करेंगे यहां पर एक पिता का ए जाएगा देखना तुम स्क्रिप्ट के जस्ट नीचे मैंने इंटर किया देखो यह पी टैग ए गया यहां पे और हमें ब्राउज़र के अंदर कुछ नहीं दिख रहा है ब्राउज़र के अंदर आंटी दिख रहा है मत इसीलिए दिख रहा है क्योंकि हमने पी टाइप के अंदर कुछ लिखा ही नहीं है अगर हम यहां पर एचटीएमएल के अंदर भी एमटीपी टाइप अगर क्रिएट कर देते हैं तो मैं कुछ नहीं दिखता है तो कंटेनर के बाद हमने क्रिएट किया है तो कंटेंट के बाद यहां पे ए रहा है पिता लेकिन हमें कुछ दिखता ही नहीं है क्योंकि अंदर कुछ हमने लिखा ही नहीं है कुछ लिखेंगे तब तो आएगा तो हमने अपेंड कर दिया अभी पेज हमारा रीलोड हो गया तो गायब हो जाएगा तो हम यहां पे प्रिंट करते हैं ये वाला पिता काटा देते हैं हम अपने जावास्क्रिप्ट के अंदर पेंट करते हैं और हम कंटेनर के अंदर करते हैं बॉडी के अंदर नहीं चलो यहां पे कंटेनर के अंदर मैं प्रिंट करके दिखाता हूं अभी जो हमारा कंटेनर है वो एम्टी है देखो मत है यहां पे कंटेनर के अंदर कुछ भी नहीं है इसके अंदर में अपेंड करके दिखाता हूं मैं यहां पर अपेंड करके एक बार दिखा देता हूं कंटेनर को मैंने ऑलरेडी सिलेक्ट कर रखा है यहां पर देखो यह मैं अपने उंगली से ऐसे स्क्रीन पर दिखा रहा हूं तो आपको दिखेगी नहीं मिली हान ऑलरेडी यहां पे सिलेक्ट कर रखा है इसीलिए हम कंटेनर कर का रहे हैं और कंटेनर पेंट करेंगे तो यहां पर हम बता सकते हैं तो यह पिता इसके अंदर ए जाएगा यह हमारे यहां पर जो एम्टी स्पेस दिख रहा है ना कुछ इसके बीच में ए जाएगा ओपनिंग क्लोजिंग टैग है उसके बीच में ए जाएगा इंटर करता हूं ये देखो ये तीन डॉट करके दिखाने लगा है और इसको हमें एक्सपेंड करने का ऑप्शन ए गया है तो अब हमने यहां पे अपेंड कर दिया है एक पी टाइप को ये पिता मत है तो भी यहां पे कुछ दिख नहीं रहा है अब हम चाहें तो पी टाइप का इनर टेक्स्ट हम सेट कर सकते हैं हेलो है और इंटर करेंगे तो यह देखो इसके अंदर हमारा हेलो प्रिंट होकर ए रहा है तो इस तरह से हम एक नया एलिमेंट क्रिएट करके उसको अपेंड करके उसके अंदर का टेक्स्ट भी सेट कर सकते हैं लेकिन ज्यादा कॉमन प्रैक्टिस होती है की अपेंड करने से पहले तक सेट कर दो तो हम क्या करते हैं चलो इस चीज को मैं यहां पे करके दिखाता हूं और फिर अपेंड केंद्र में क्या डालना है हम इसका नाम चेंज करके पैराग्राफ पैराग्राफ बोलते हैं तो उसके ऊपर भी वीडियो मैंने बनाई है कस वाली प्लेलिस्ट में आपको वीडियो मिल जाएगी व्हाट इस डिफरेंस बिटवीन एलिमेंट एंड टैग उसको मैंने एक्सप्लेन किया है अच्छे से यह हो गया हमारा पैराग्राफ हेलो ऐसा कर सकते हैं तो मैंने हेलो कर दिया और यह अपडेट हो गया अब आप सोच रहे होंगे मैंने अपेंड करने के बाद इसको चेंज किया है तो कैसे रिफ्लेक्ट हो रहा है अगर मैं यहां से हटा के मैं इधर ए जाता हूं ब्राउज़र में यहां पर भी अगर करता हूं तो जैसे इंटर प्रेस करूंगा ये अपडेट हो जाएगा तो एक्चुअल में क्या होता है हमने ऑलरेडी पिता क्रिएट कर लिया तो मेमोरी में हमारे हमारी मेमोरी के अंदर का जो भी है इसका रेफरेंस है हमारी मेमोरी के अंदर स्टोर है अब इसको हमने अपेंड कर दिया कंटेनर के अंदर तो जब भी हम इसको अपडेट करेंगे चाहे बाद में चाहे पहले तो हमारे ब्राउज़र के अंदर भी अपडेट होगा हम स्पीड ट्रैक को डायरेक्टली अपडेट कर रहे हैं उसके अंदर का कंटेंट अपडेट कर रहे हैं और वह हमारे इस डॉन के अंदर ए चुका है डॉन के अंदर हमने अपेंड कर दिया नहीं की डॉन के अंदर वह प्लांट हो गया उसका जड़ वहां पर जाकर बैठ गया है तो हम यहां पर जब भी कुछ भी चेंज करेंगे जवाब स्क्रिप्ट का उसे करके वहां पर रिफ्लेक्ट होगा रिफ्लेक्ट होता है कभी भी तुम एक एलिमेंट को जैसे की हमने हैडिंग को सिलेक्ट कर लिया है ऑलरेडी ये जो हेडिंग है इसको हम चाहे तो मॉडिफाई कर सकते हैं हेडिंग जो हमारा हेडिंग है हेडिंग नाम से h1 नाम से साथ वेरिएबल क्रिएट किया हान एच1 नाम से वेरिएबल क्रिएट किया और डॉट इन ए टेक्स्ट इस इक्वल तू कुछ भी कर देते हैं हे अगर ऐसा करके इंटर करेंगे तो हमारा चेंज हो जाएगा यहां पर पूरा यहां पर ए जाएगा और यहां पर दिखेगा वहां पर अपडेट हो रहा है और उसका सीधा प्रभाव यहां पर पद रहा है तो एकदम से कनेक्ट हो जाता है एक बार तुम उसको एक बार वेरिएबल में स्टोर कर लो तो उसे वेरिएबल को अपडेट करोगे तो यह हमारे ब्राउज़र के ऊपर भी अपडेट होगा उसकी कोई भी प्रॉपर्टी को अपडेट करोगे तो तो ये कनेक्शन समझना जरूरी है किस तरह से कनेक्टेड होता है तो यहां पर यह हो गया तो इसको मैं यहीं पर पड़ा रहने देता हूं लेकिन यह उतनी अच्छी प्रैक्टिस नहीं मणि जाती है की पहले तुम अपेंड कर दो बाद में तुम उसका नाटक सेट करो लेकिन कोई दिक्कत नहीं है हमें कोई पता भी नहीं चलेगा लेकिन एक्चुअल में क्या होगा जैसे मेरा कोड हमारा ब्राउज़र रन होगा पहले एम्टी पैराग्राफ नहीं दिखेगा और यहां पर कभी सारा कम बहुत ही फास्ट हो रहा है तो हमें दिखता नहीं है लेकिन हम इसको ऊपर कर देते हैं इसको ओपन कर देते हैं तो उससे क्या होगा पहले उसका इनर टेक्स्ट हो जाएगा तो उसके अंदर ऑलरेडी हेलो लिखा है तो इसको अगर हम अपेंड करेंगे यह उसे करके पूरा का पूरा वहां पर चला जाएगा उसके अंदर का टेक्स्ट भी हमें दिखने लगेगा तुरंत इस तरह से हम एक नया एलिमेंट क्रिकेट कर सकते हैं और उसके अंदर की प्रॉपर्टी भी सेट कर सकते हैं और उसको अपने ब्राउज़र के ऊपर दिखा भी सकते हैं क्लास कैसे ऐड करेंगे पैराग्राफ डॉट क्लास लिस्ट यहां पर अगर पैराग्राफ चेक करोगे पैराग्राफ आईडी भी सेट कर सकते हैं अब आप वीडियो को पॉज करो और यहां पे आईडी सेट करके दिखाओ हो आईडी के लिए आईडी लिस्ट डॉट ऐड ऐसा नहीं होता है सीधा डॉट आईडी = समथिंग तो आप वीडियो को पॉज करके एक बार ट्राई करो कोई भी आईडी ऐड करो तो मैं उम्मीद करता हूं अपने कर लिया होगा मैं खुद से ऐड करके दिखा देता हूं डॉट आईडी डॉट ऐड मैंने जो बोला था मैं वही करने लगा मैंने जो बोला था की नहीं करना है वही करने लगा आईडी हम ऐसे देते हैं मैन लो मैं हे नाम से आईडी दे देता हूं ऐसे तो यहां पर ऐड करने के मतलब अपेंड करने के पहले तो ऐड करो या बंद करने के बाद ऐड करो वह यहां पर अपडेट हो जाएगा और मैं यह पैराग्राफ को ओपन करने वाली क्लास को कमेंट कर देता हूं और पैराग्राफ और उसको वहीं पर पड़ा रहने देते हैं तो अभी मैं क्या करूंगा यहां पर अभी आप वीडियो को पास करो और आप खुद से ट्राई करो आप खुद से ट्राई करो बहुत ज्यादा मुश्किल नहीं है एक नया इमेज वाला एलिमेंट क्रिएट करो उसका सेट करो और सोर्स डायनॉमिकली सेट करना इस तरह तो वीडियो को पास करो एक बार खुद से ट्राई करो मुश्किल नहीं है बहुत ही आसान है तो मैं उम्मीद करता हूं अपनी कर लिया होगा अभी मैं करके दिखाता हूं देखो यहां पर हम कौन सौल में ए जाएं और अगर हम करते हैं document.com इमेज वाला एलिमेंट क्रिएट करना यहां पे इमेज डालेंगे तो ये हमें एक इमेज एलिमेंट क्रिएट करके दे देगा और देखो इसको पता है की इमेज जो है एक ऐसा एलिमेंट है जिसका क्लोजिंग टैग नहीं होता उसका एक ही टैग होता है ओपनिंग टाइम होता है और वही सेल्फ क्लोजिंग होता है तो उसने स्पेशल तरह से क्रिएट कर दिया अगर तुम इस तरह से क्रिएट करोगे जो की हमारे एचटीएमएल के अंदर नहीं होता कुछ ऐसा है जैसे हमने अनुराग अभी थोड़ी देर पहले क्रिएट किया था अनुराग नाम से टाइप क्रिएट करके दिया तो इसका मतलब इसके ऊपर कुछ स्पेशल प्रॉपर्टीज लगा कर दिया होगा जैसे की अगर मैं इसको क्रिएट एलिमेंट करके मैं पिता अगर क्रिएट करता हूं और मैं इसको कंट्रोल करेगा एचटीएमएल पैराग्राफ एलिमेंट जो हमारा यह डॉक्यूमेंट उसको पता है की हम ग्राफ एलिमेंट क्रिएट कर रहे हैं इसीलिए उसने एक पैराग्राफ एलिमेंट क्रिएट किया और उससे रिलेटेड जितनी भी प्रॉपर्टीज हैं उनको दिया है लेकिन अगर हम यहीं पर इमेज कर दें इमेज कर देते हैं तो अभी एक इमेज नाम से एलिमेंट क्रिएट करके हमें देगा लेकिन उसके ऊपर देखो आल्ट टेक की प्रॉपर्टी है ना और टैग तो वह प्रॉपर्टी है और यहां पर हमें सोर्स वाली प्रॉपर्टी भी मिल जाएगी ये देखो सोर्स है तो वह भी है और यहां पर टैग नाम इमेज है यहां पे लिखके ए रहा है और देखो यह एचटीएमएल इमेज एलिमेंट यानी की इमेज वाला एलिमेंट है तो अगर हम कोई भी अपने नाम क्रिएट कर ले तो किस टाइप का एलिमेंट होगा अगर मैं यहां पर करता हूं तो यह एचटीएमएल एलिमेंट होगा और इसके अंदर ओपन नहीं हो रहा है जीमेल अननोन एलिमेंट है यानी की यहां पर जो हमारा जावास्क्रिप्ट है यह हमारा जो ब्राउज़र है उसको यह पता नहीं है कौन सा एलिमेंट है यह एक अननोन एलिमेंट क्रिएट करके दे रहा है तो अननोन एलिमेंट का एक बिहाइंड डी साइंस एक रोल होता है की नॉन एलिमेंट जब मिले तो उसको इस तरह से तुम क्रिएट कर देना बाकी जो नॉन एलिमेंट है उनका अलग-अलग रूल है उनको अलग अलग तरह से क्रिएट किया जाता है तो ऐसे अगर हम इमेज नाम से अटरीब्यूट क्रिएट करें एलिमेंट क्रिएट करें हो यहां पर देखोगे एचटीएमएल अननोन एलिमेंट तो ऐसे एलिमेंट्स जो की हमारे ब्राउज़र को नहीं पता है हमारे एचटीएमएल के अंदर नहीं डिफाइंड है वह सारे नो एलिमेंट के कैटिगरी में आते हैं और उनको जब हम कंसल्ट आईआर करेंगे तो सबसे नीचे जो उनका प्रोटो टाइप होगा वो होगा एचटीएमएल अननोन एलिमेंट तो यहां से हम देख सकते हैं अलग-अलग तरह से एलिमेंट क्रिएट होते हैं तो जब हम इमेज वाले एलिमेंट करते हैं तो एचटीएमएल इमेज एलिमेंट है और इमेज एलिमेंट से रिलेटेड जितनी भी प्रॉपर्टीज हैं उसे पर डिफॉल्ट अवेलेबल रहेगी उसको हम सीधा सेट कर सकेंगे तो जैसे की हमने यहां पर क्रिएट कर लिया है अभी नहीं क्रिएट किया है क्रिएट एलिमेंट और यहां पर हम देंगे इमेज तो इसको पता है की हम एक इमेज टाइप का एलिमेंट क्रिएट करना चाह रहे हैं और जितनी भी प्रॉपर्टीज होंगी वह डायरेक्टली इसके ऊपर लगाकर हमें दे देगा तो अभी हम अगर न्यू इमेज को चेक करेंगे तो एक इमेज टैग टाइप में यहां पे दिखेगा तो इसके ऊपर हम डायरेक्ट सोर्स सेट कर सकते हैं अगर अभी हम सोर्स करें [संगीत] तो एक बार मैं सबसे नीचे जाकर करता हूं क्योंकि ऊपर यहां से हम करते हैं और यहां पर मैं क्या करूंगा न्यू इमेज डॉट एस आर सी करूंगा कंटेनर डॉट अपेंड न्यू इमेज कंटेंट न्यूज़ कोई एलिमेंट ना हो तो अभी हम स्क्रैच से क्रिएट कर सकते हैं document.com इधर आते हैं अपने इसके ऊपर और फर्स्ट इमेज तो अभी हमारे पास होगी नहीं क्योंकि फर्स्ट मैच को हमने तो वहां से रिमूव कर दिया यहां पर हमारे कंटेंट के अंदर तो है नहीं कोई इमेज तो हम क्लोन नहीं करेंगे न्यू इमेज क्रिएट करेंगे तो हम कैसे क्रिएट करेंगे डॉक्यूमेंट .कॉम यहां पर 9005 तक मैंने देखा अच्छे से आती है वह थोड़ा सा गड़बड़ हो जाता है 910 कर देता हूं तो लास्ट की चार इमेजेस चार-पांच इमेजेस पंच इमेजेस सिर्फ ब्रोकन ये देखो| ₹900 तक 9:30 900 तक प्रॉपर इमेजेस है और उसके बाद ₹10000 के बाद है बहुत सारी इमेजेस लेकिन हमारे लिए इतनी ही बहुत बहुत मतलब मॉडर्न को उसे करेंगे यहां पर और स्वामी जिसको प्रिंट करवा देंगे तो हमने देखा की यहां पर हमारे एचटीएमएल के अंदर कुछ भी नहीं है कंटेंट के अंदर कुछ भी नहीं है लेकिन जावा स्क्रिप्ट का उसे करके हमने इतना सारा एचटीएमएल क्रिएट कर लिया टास्क में आपको देना चाहता हूं की यह हमारी इमेज है नंबर लिखकर इमेज के सारे इमेजेस के नीचे इमेज का नंबर लिखकर आए और यह वाली एक्सरसाइज मैंने कहां से उठाई है कोल्ड स्टील का कोर्स मैंने फॉलो किया था उनके कोर्स में यह पोकेमोन वाला एक्सरसाइज था तो वहीं से मैंने उठा लिया मतलब उन्होंने मुझे पढ़ाया था मैं आपको पढ़ा देता हूं तो ये काफी अच्छी एक्सरसाइज है काफी कूल है ये तो वहीं से मैंने उठाइए उनका क्रेडिट मैं यहां पे देना चाहता हूं की ये मैंने खुद से ये मुझे पता नहीं था की एक वेबसाइट है मतलब एक रिपोजिटरी है जहां से ये सारे पोकेमोन इतने सारे मिल जाएंगे एक सीरियल वाइस तो मुझे नहीं पता था मैंने वहां से उठाया वहां से मैंने पढ़ा था तो मैं आपको पढ़ा रहा हूं तो अभी ये आपको टास्क करना है तो उसके लिए हम क्या करेंगे अभी मैं एक का करके दिखाता हूं एक एचटीएमएल में करके दिखाता हूं की किस तरह से मैं करना है फिर आप खुद से करना जावास्क्रिप्ट का उसे करके तो अभी इस एचटीएमएल में बहुत सारी चीज हो गई हैं तो मैं क्या करता हूं इस एचटीएमएल एचटीएमएल बोल रहा हूं इस जावास्क्रिप्ट फिल्म फाइल में काफी ज्यादा कोड हो गया है मतलब कमेंट्स काफी ज्यादा है मैं एक दूसरी फाइल क्रिएट कर लेता हूं स्क्रिप्ट तू डॉट स्क्रिप्ट नहीं करना चाहता हूं ताकि आपके रेफरेंस के लिए सारी सारा कोड वहां मिले अगर आप फाइनल कोड स्टार्टर कोड कुछ भी डाउनलोड करो तो आपको कोड मिल जाए और मैं क्या करूंगा फिर यहां पे जो एचटीएमएल है इस एचटीएमएल के अंदर से यह चेंज कर दूंगा ओके कंटेन वाले वेरिएबल को आगे चलकर उसे करेंगे और फिर उसके बाद यह वेरिएबल फाइल बंद कर देते हैं और यहां पर मैं एक इमेज रखना चाहता हूं एक इमेज को रखेंगे और उसके नीचे पैराग्राफ [संगीत] इसको थोड़ा सा स्टाइल दूंगा पहले तो इसको क्लास देते हैं क्लास में इस इमेज कंटेनर को क्या कर देंगे डिस्प्ले फ्लेक्स कर देते हैं पहले तो फ्लेक्स करने की जरूरत नहीं ऊपर हो गया टेक्स्ट अलायंस सेंटर इमेज टेक्स्ट सेंटर में पैराग्राफ पास में लेकिन इस तरह से मार्जिन जीरो नहीं करेंगे मतलब इस तरह से पैराग्राफ इसका फोन स्विच थोड़ा सा ठीक है कोई दिक्कत नहीं है मैंने जूम किया इसलिए बड़ा दिख रहा है अभी 100% एक्चुअल में अभी जाऊंगा तो इसको जमीन रहने होगा तो आप ज़मीन कर सकते नहीं तो आप फॉन्ट साइज थोड़ा सा बड़ा कर सकते हैं छोटा कर सकते हैं तो यह हो गया हमारा नंबर एक नंबर ए गया है अब यही से चीज इतना हमें एचटीएमएल क्रिएट करना है इतना सिस्टम में जावा स्क्रिप्ट का उसे करके क्रिएट करना है और हमें एक क्रिएट करना है और उसके अंदर नंबर देना तो चलो देखते हैं कैसे क्रिएट करेंगे आप वीडियो को पॉज करो और इतना एक बार नहीं क्रिएट करना है यह सब कुछ डायनॉमिकली करना है तो कैसे करेंगे चलो देखते हैं पर मैं इसको रिमूव कर देता हूं और यहां पर ए जाऊं तो पहले तो हमें सबसे पहले जो की इमेज कंटेनर है इसके ऊपर क्लास तो हम करेंगे एलिमेंट 21 टाइप का एलिमेंट्री यहां पर करके देखते हैं तो इसकी मैं वह वाली प्रॉपर्टी देखना चाह रहा हूं की किस टाइप है स्टाइल दिया थोड़ा सा इसके अंदर तो उसके ऊपर में क्लास भी देनी है अभी अगर हम केवल इसको चेक करते हैं तो केवल यह कंटेनर नाम से क्लास चाहिए दूसरा है तो कंटेनर है इसके ऊपर में क्लास नहीं है तो मैं क्या करना है इस तरह से हमने ऐड कर दी अब क्या हो गया यहां पर इमेज कंटेंट की क्लास ऐड हो चुकी है इतना हो गया इस इक्वल तू कमेंट आईएमडी कर देंगे इमेज क्रिएट हो गया मैं अलग-अलग स्पेस मतलब इन दोनों के बीच में स्पेस इसलिए दे रहा हूं ताकि यह अलग है हमें पता चले की साथ कम कर रहे हैं और यहां पर हम पैराग्राफ पैराग्राफ के साथ कम करें सेट करके हमें कर देना मैं मैन लो कर देता हूं इसका पैराग्राफ भी है और हमारा पैराग्राफ तुम्हारी मेमोरी में कहीं रखा होगा मैच कंटेनर पैराग्राफ टैग पैराग्राफ [संगीत] डालना है तो कैसे डालना है अगर अपेंड उसे करेंगे तो देखो हम क्या करेंगे तो उसके अंदर दो चीज पेड हो गई और पैराग्राफ भी उसका साइड बन गया हमने इन दोनों को अपेंड कर दिया लेकिन अपेंड का यही फायदा की हम दो चीजों को एक साथ अपेंड कर सकते हैं यानी की हम अगर यहां पे कमा करके पैराग्राफ अगर दल देंगे तो दोनों चीज एक ही बार में अपेंड हो जाएगी और यहां पर अगर हम देखेंगे तो दोनों चीज एक ही बार में अपेंड हो गई हैं यहां पर एक इमेज ए गई है हमारा जो इमेज कंटेनर है वो रेडी है अपेंड होने के लिए कंटेनर के अंदर मैं इस इमेज कंटेनर को अपने कंटेनर के अंदर पेंट करना है ना ऐसे तो करना क्योंकि अभी हमारा यह जो इमेज कंटेनर है वह बाहर हवा में पड़ा है जो एचटीएमएल के अंदर हमने लिखा यहां पर यह एचटीएमएल के अंदर यह वाला इमेज कंटेनर है तो इसको हम हटा देते हैं एकदम से इसको मैं हटा देता हूं मैं कमेंट कर देता हूं हटा ही देते हैं या कमेंट कर देते हैं मैन लो कम लग जाए उसको मैंने हटा दिया और यहां पर अभी हमारे कंटेंट के अंदर कुछ भी नहीं है कुछ कमेंट लिखा कुछ भी कमेंट है तो अभी जो हमने क्रिएट किया है जो की हमारी मेमोरी के अंदर है लेकिन पेज के अंदर नहीं है पेज के अंदर कोई एलिमेंट ऐसा हो जिसके अंदर हमारा एक कंटेनर वाला एलिमेंट है उसके ऊपर डॉट अपेंड appenditure करके हम बता देंगे इमेज कंटेनर इसको ओपन करना जिसे हम प्रिंट करेंगे यह पूरा इतना ए जाएगा राजस्थानी फोटो बना देते हैं 10 तक जाएगी और फिर इस पूरे कोड को इसके अंदर अगर लिख देंगे तो बस हमें रिप्लेस करना है जो नंबर है टेंपरेट लगा देना यहां पर 123 हो जाएगी कितना आसान है बहुत ही मस्त है सही है तो अभी यह एक्चुअल में ऐसे ही करना पड़ता है अब हमें इतना सा एचटीएमएल क्रिएट करने के लिए इतना सारा कोड लिखना पड़ा लेकिन एचटीएमएल के अंदर बस इतना सा ही लिखा था वो तीन ही लाइन में ए गया हम कुछ इस तरह से कर सकते हैं की इतना कोड तो हमें मतलब इतना तो लिखना पड़ेगा उसके बाद हम क्या कर सकते हैं हम एक स्ट्रिंग क्रिएट कर सकते हैं कुछ इस तरह कास्ट मैंने उतना कमेंट कर दिया और यहां पर मैंने इंटर प्रेस कर दिया इसको लाकर पेश कर देता हूं और कंटेनर ऑलरेडी हमने क्रिएट कर लिया तो हम इतना एचटीएमएल इस तरह से लिख सकते हैं और यहां पर हम डॉलर लगा सकते हैं और यहां पर हम लिख सकते हैं और यहां पर लगा सकते हैं और लिख सकते हैं यह हो गया मिस कंटेनर डॉट इन एचटीएमएल इस इक्वल तू कर देंगे हम माय एचटीएमएल इसका बाद हम कंटेनर के अंदर अपने इमेज को अपेंड कर देंगे तो यहां पर हमने क्या किया मैंने इतना एचटीएमएल उसे तरह से नहीं क्रिएट किया जैसे हम document.com [संगीत] दूसरा तरीका इस तरीके को इस तरीके को मैं कमेंट कर देता हूं और जो ओरिजिनल तरीका था उसको अनकमिट कर देता हूं और इसको कर देते नीचे दोनों लाइन है यहां पे इसको हम रिमूव करके कर देते हैं नीचे कुछ इस तरह का उसे करके सेट कर देना [संगीत] वह क्या करेंगे और बहुत ही लंबी सिस्टम क्रिएट करेंगे मैंने देखा ट्राई करो मैं बताता हूं एक मैन लो लेट करेंगे लेट माय एचटीएमएल इस इक्वल तू अभी और लेट आई इस इक्वल तू वैन और फिर यहां पर इसके अंदर इस स्ट्रिंग में ऐड करते जाएंगे कुछ इस तरह इस तरह से पूरा इस तरह से दल देंगे और यहां पर यह हो जाएगा और यहां पर फिर से आई और इधर हो जाएगा डॉलर तो अभी यह क्या कर रहा है इतना कोड इतना कोड यह एचटीएमएल स्ट्रिंग क्रिएट कर रहा लंबी सी बहुत ही लंबी स्ट्रिंग तो जो हमारा पूरा नहीं सकता कंटेनर का हमारा कंटेनर कंटेनर एचटीएमएल तो देखो यह 10 एलिमेंट्स क्रिएट हो गए हैं और इनर करते ही जो उसका था इसका खुद का एचटीएमएल उसको रिप्लेस कर दिया इसलिए मैं दो बार नहीं दिख रहा है हंड्रेड हो गया और हंड्रेड टाइम्स ए गया यहां पर हमें यह जो हमारा कोड है यहां पर यह काफी छोटा है देखोगे तो काफी छोटा कोड था लगभग इतना बड़ा अगर यह दोनों लाइन हटा दें तो इतना बड़ा डॉक्यूमेंट करना पद रहा था और फिर उसका सेट करो यहां पर लिखते हैं [संगीत] है और आप दोनों में से कोई भी एप्रोच कर सकते हैं एक दूसरे को चाहिए लेकिन मैं प्रेफर करता हूं इसी को उसे करो क्योंकि बिहाइंड डी साइंस जो लाइब्रेरीज होती हैं जैसे की रिएक्ट होता है हमने बस केवल एचटीएमएल क्रिएट कर दिया सब कुछ हो गया ऑटोमेटिक क्रिएट एलिमेंट का उसे करके अलग तरह के एलिमेंट्स क्रिएट कर सकते हैं और सब एलिमेंट्स का टाइप नीचे आता है की किस टाइप का एलिमेंट है यह अगर पैराग्राफ ताकि आप अपना प्रोग्राम में उसका स्क्रीनशॉट भेज सकते हैं और वहां पर अपनी क्वेश्चंस पूछ सकते हैं जैसे मुझे टाइम मिलेगा मैं आपके प्रॉब्लम को सॉल्व करने की कोशिश करूंगा और आप अगर कुछ नया क्रिएट करते हैं तो भी वहां पर शेयर कर सकते हैं काफी अच्छे लोग हैं एक दूसरे के सपोर्ट करते हैं हेल्प करते हैं और वह लोग भी आपको फीडबैक देंगे आपके प्रोजेक्ट पे और अगर आप मुझसे कोई भी क्वेश्चन डायरेक्टली पूछना चाहते हैं तो हम लोग सन्डे को हर सन्डे रात के 8:00 बजे गूगल मीत पर कनेक्ट होते हैं तो आप भी वहां पर कनेक्ट करके आप अपने क्वेश्चंस पूछ सकते हैं और जो भी क्वेश्चन है जो भी डाउट है कोई भी क्वेश्चन आप पूछ सकते हैं मैं उसका शेयर करूंगा वहां पर और मैं उम्मीद करता हूं नेक्स्ट वीडियो में तब तक के लिए बाय बाय [संगीत]