Up next in 10
HTML Attributes and their methods _ JavaScript Tutorial in Hindi #42
171 views
Feb 9, 2024
"HTML Attributes and Their Methods" is the 42nd tutorial in a series of JavaScript tutorials delivered in Hindi. In this video, viewers can expect to learn about HTML attributes and various methods available in JavaScript to manipulate them. The tutorial likely covers methods such as `getAttribute`, `setAttribute`, `hasAttribute`, and `removeAttribute`, which enable developers to access, modify, check for, and remove HTML attributes dynamically. Through practical examples and explanations in Hindi, viewers will gain a solid understanding of how to interact with HTML attributes using JavaScript, empowering them to create more dynamic and responsive web applications. This tutorial caters to Hindi-speaking audiences interested in expanding their skills in JavaScript and web development.
View Video Transcript
0:00
गैस आज के इस वीडियो में हम लोग attribute के कुछ methods को देखेंग��
0:03
देखेंगे कि किस तरह से attribute को set किया जाता है, get किया जाता ह��
0:06
और किस तरह से attribute के कुछ methods काम करते हैं जो कि आप लोगों की life को easy बनाएंग��
0:12
जब हम web programming करेंगे javascript के तरू लेट्स गो टो देखते हैं लेट्स के टाइप करने वाले है कि किस तरह से आप लोग कुछ एट्रिब्यूट क��
0:30
मेथड्स को इस्तेमाल करके एट्रिब्यूट के साथ खेल सकते हो एट्रिब्यूट के अंदर इस बात का क्या मतलब है आ��
0:36
इसको समझाता हूं सबसे वह मैं क्या करूंगा अपने रापरेट अकाउंड में आकर एक रापर बनाऊंगा और मैं सिंपल��
0:41
पॉडी टू अंडरस्कोर एट्रीब्यूट मेंटेड्स के नाम से अपना तो मैं जो टेंपलेट इसको चूज कर लेता हू��
0:46
यहां पर मैं अंड्रेस को लेकर मैं थे लिखकर एक रैपल बना लेता हूं और इसके अंदर हम लोग अब देखेंगे क��
1:00
किस तरह से अट्रीब्यूट के मेथड्स के साथ खेला जाता है ठीक है मालों मैं यहां पर एक टेव लगाता हूं औ��
1:10
इसके बाद मैं देखता हूं है एम फर्स्ट कंटेइनर और मान लो इसके अंदर मैं आईडी लगाता हूं और मैं आईड��
1:19
इजेक्वल टू डाल देता हूं इसमें फर्स्ट और इसके बाद मैं इसमें क्या करूं मैं इसके अंदर एक एट्रिब्यू��
1:29
और मैं यहां पर बोलूंगा क्या attribute दो यार इसमें class is equal to hey, hey नाम की class देजी
1:37
देखो class का नाम जो है वो मेरे उपर है, मैं कुछ भी दे देता हूँ, मेरी बर्जी, ठीक है
1:41
तो अब मैं क्या करूंगा script.js में जाओंगा एक बार खुलना है मुझे script.js और zoom in कर लेता हूँ जादा भी नहीं तो मैं क्या करूंगा यहाँ पर मैं कहूंगा कि मुझे इस वाले element की class चाहिए ठीक है तो मैं simply क्या करूंगा मैं यहाँ पर बोल सकता हूँ first.get attribute और यहाँ प��
2:11
लूंगा कंसोल टोटल लॉगी ठीक है बहुत सिंपल सी चीज है और मैं अगर अपना कंसोल खोलूं तो आप यहां पर दे��
2:21
सकते हो कि है यहां पर लिखकर आ गया ठीक है तो इस तरह से मैं गैट ट्रिब्यूट जो है वह यूज कर सकता हू��
2:28
मुझे simply क्या करना है get attribute के अंदर attribute का नाम डाल देना ह��
2:32
और मुझे पता चल जाएगा कि उस attribute की value क्या ह��
2:37
ठीक है अब has attribute मेरिट के बारे में देख लेते हैं क्य��
2:40
इसमें एक attribute सेट किया गया है जैसे कि मालो मुझे पता करना ह��
2:44
कि क्या style attribute ए में सेट किया गया है तो मैं सिंपली क्या करूंगा मैं कहूंगा ए डॉट है एट्रीब्यूट ठीक है और मै��
2:55
जैसे ही है एट्रीब्यूट करूंगा और उसके बाद मैं आप अपने देखने जाता हूं कि इसमें क्लास सेट की गई है ज��
3:03
देखी गई है जो कि ट्रू मुझे देना चाहिए इसको और फिर स्कूल फॉल्स देना चाहिए और यहां टोट है एट्रीब्यू��
3:11
attribute a reload true false class attribute first element style
3:44
value of an attribute ठीक है अब सेटिविट मालो मैं सेट करना चाहता हूं क्या सेट करना चाहता हूं माल��
3:50
मैं क्लास को सेट करना चाहता हूं ठीक है मैं यहां पर एक काम करता हूं एस टीएमल एट्रीब्यूट सर्च करत��
3:57
दिबाग में यार कोई attribute आ नहीं रहा है पता नहीं क्या चल रहा है यार ठीक है कोई attribute
4:02
हफ आईडी हाइट वेट ऑल्ट और भी कोई यार यहाँ पर hidden hidden attribute ठीक है तो मैं यहाँ प��
4:12
यह देखना चाहता हूं तो मैं आपको लिखूंगा फर्स्ट डॉट सेट एट्रिब्यूट और यहां पर मैं लिखूंगा लेटर स��
4:27
यह क्लास नहीं हिडन और हिडन को मैं क्या कर दूंगा हिडन को मैं कर दूंगा ट्रू ठीक है मान ल��
4:38
है और मैं इसको एजर स्ट्रिंग सेट करूंगा और मैं इसको इसे रिलोड करूंगा यह कह रहा है कि यार ब्रैके��
4:45
outlet लो यह बैकेट लगाया मैंने कैसा मजा चल रहा है भाई ठीक है लोट करो और यहां पर तो इधर मैंने ट्र��
4:54
कर दी है तो गायब हुए एलिमेंट मेरा ठीक है तो मैं इस राइन को मैं डाउट कर दूंगा ताकि यह जो पर्स ह��
5:01
जो कि मेरा element with id first है, अब आप confused मतू ना है, first क्यों मैंने as a variable directly use कर लिया
5:07
वैसे काय दे के हिसाब से, तो मुझे यह करना चाहिए था, क्या करना चाहिए था, यह करना चाहिए था
5:15
get element by id, और first, कुछ इस तरह से करना चाहिए था
5:21
मैं आल से हूँ, मैंने किया नहीं हो एक अलग बात है आप लोग करना ठीक है मैंने भी कर दिया बातें बैदे बैदे कि यह प्रैक्टि��
5:26
आप डालेट लिए आईडी के नाम से अक्सेस तो कर सकते हो लेकिन करना नहीं चाहिए आपको ठीक है तो यह ची��
5:31
देखी तीन मेट्रेट देखें बीच सेट एट्रिब्यूट भी देख लिया हमने आप कोई भी एट्रिब्यूट सेट कर सकते ह��
5:35
मान लो कि मैं इसका क्लास एट्रिब्यूट सेट करना चाहता हूं मैं कहना चाहता हूं कि इसमें क्लास एक तो ट्र��
5:46
दे दो एक दे दो सच यह दो क्लासेस दे दो इसमें ठीक है सचिन ऑटो कंप्लीट कर दिया भाई लो ��
5:54
है ठीक है तो यहां पर देखो क्लास इसे प्लूट रूस पेशिट आ गया ठीक है नहीं कि दो क्लास में दे मैंने दी इसमे��
5:59
first वाले element में, एक true दे दी, एक such in दे दी, space से आप लोग separate करें, classes दे सकते हैं
6:04
इसलिए आपने मान लो, true, space, such in लिखा, तो दोनों classes आ जाएगी, true भी आ जाएगी, such in भी आ जाएगी
6:09
ठीक है, I hope that's clear, ठीक है, अब classes के साथ खेलने के लिए
6:15
मैं आप लोग को और method बताऊंगा, class list के methods होते हैं
6:18
ठीक है, वो सब हम देखेंगे, अब याने वाले videos में, यह भी कर सकते हो
6:22
ठीक है, यह बात आप लोग को बताऊनी चाहिए, तो set attribute हमने देखा, अब हम देखेंगे
6:27
remove attribute, कि remove attribute क्या करता है, remove attribute simply क्या करता ह��
6:31
attribute को remove करता है as simple as that class remove class remove simply remove attribute
6:46
मैं remove attribute चला दूँगा और class जो है वो ऐसे गायब हो गई आप नहीं देखा भ��
6:52
class गायब हो गई इसमें इसमें मैंने class भी डाल रही थी बाइदा बे आपको दिखा दूँ मै��
6:57
index.html के अंदर class as equal to hey डाली हुई थी लेकि��
7:01
वो गायब हो गई क्यों गायब हो गई क्योंकि मैंने remove attribute class लिख दिया और javascript execute हो ग��
7:05
जब मैं इसको reload करूँगा आप देखना एक split second के लिए class दिखाई देग��
7:09
देखना देखो देखो देखा ना देखा आपने देखो देखो देखा आपने class is equal to है लिख करा ह��
7:19
फिर वो गायब हो गई जैसे ही मेरी javascript execute हुई वो गायब हो गई ठीक ह��
7:23
class is equal to जो लिखा हुआ था वो attribute गायब हो गया क्योंकि remove attribute
7:27
जो है वो remove करते था है attribute ठीक है चलो जी बढ़िय��
7:33
अब lm.attributes अगर आप करोगे जिसकी मान लो मैं यहाँ पर कुछ इस तरह काम करता हूँ मान लो मैं यहाँ प��
7:39
लिखता हूँ console.log और मैं आपको लिखता हूँ first.attributes डॉट लास्ट नहीं first.attributes और मैं इसको रिलोड कर��
7:53
तो आप लोग यहाँ पर देख सकते हो कि यहाँ पर इसके सारे attributes आ गए ठीक है इसकी class उसी के साथ सा��
8:02
आप देख सकते हो यहाँ पर एक ID आया एक class आया ठीक है आप इसकी class
8:06
और ID को directly access कर सकते हो ठीक है यह एक named
8:09
node map का instance है ठीक है तो I hope कि आप लोगों समझ मे��
8:14
आगे यह चीज़ कि आप सारे attributes को भी यहाँ पर लिख कर आ सकते ह��
8:20
ठीक है अब data star attributes, ये क्या होता है, चलो जी बताता हूँ इसकी कहानी भी आप लोग को, देखो क्या होता है कि आप अपने custom attributes बना सकते हो, ठीक है, आप अपने custom attributes बना सकते हो, आपको कोई रोक टोक नहीं है, लेकिन मान लो मैंने एक attribute बनाया, मान लो game नाम से, ठीक है, मेरी मरजी मैंने बना ��
8:52
नहीं है मालो future में game नाम का attribute डाल देते हैं javascript वाले javascript committee
8:57
जो akma script को manage कर दिया है वो एक decision लेती है वो कहती है यार एक काम करते है��
9:03
akma script standard में game नाम का attribute introduce कर देते हैं तो मेरी जो script चल रही ह��
9:07
इसमें मैंने अपना custom attribute बना ला खाए एक game के नाम से वो तो problem create करते है��
9:13
क्योंकि game is equal to javascript ने अपने अंदर add कर लिया कुछ ठीक है तो इससे बचने के लि��
9:18
javascript की specification कहती है कि आप data dash करके अपना custom attribute बनाओ जैसे मान ल��
9:24
मुझे game डालना है तो मैं data dash game के नाम से बनाओ अपना attribute औ��
9:28
उसको मैं data set के नाम से एक data set के नाम स��
9:32
प्रॉपर्टी मुझे मिल जाएगी और मैं उस प्रॉपर्टी का इस्तेमाल करके यह सारे डेटा इटरब्यूट्स निकाल सकत��
9:38
हूं लेट मी एक्सप्लेन ठीक है मैं क्या करूंगा यहां पर मानो मैं लिख दूंगा डेटा गेम इज एकॉल टो मैं Arts
10:06
अब अगर मान लो मैं यहाँ पर लिखता हूँ console.log और मैं यहाँ पर लिखता हूँ first
10:15
और उसके बाद मुझे dataset लिखना है simple ठीक है dataset और मुझे क्या मिलेगा आपको भी देखकर मज़ा आ जाएग��
10:22
यह देखो मुझे यहां पर गेम मारियो प्लेयर है नहीं मिल गया यानी कि यानी कि अगर मैं फर्स्ट डाटा स��
10:30
डॉट गेम लिखोंगा तो मुझे मारियो मिल जाएगा और अगर मैं फर्स्ट डाटा से डॉट प्लेयर लिखोंगा प्लेयर क��
10:36
spelling मुझे आती है ये मैं अभी आपको दिखा देता हूँ देखा दोस्तों मुझे player की spelling आती है मैं इसको reload करूँगा तो आप देखो मारी और हरियां पर print हो गया तो आप अपने custom attributes data dash करके ही add करो हमेशा कहीं ऐसा ना हो कि आपने अब मान लो आपका नाम सचिन है ठीक है मान लो ��
11:06
वो फेल हो जाएगी इसलिए डेटा डेश के नाम से दे रखे है ना आपको इतनी प्यारी प्रॉपर्टी दे रखी है डेटा सेट नाम की आप उसमें से सारे के सारे डेटा डेश वाले अट्रिब्यूट्स को ले सकते हैं अब डेटा डेश स्टार मैंने लिखा है मतलब कु��
11:36
तो वो हमको first.dataset.game के नाम से मिल गया है first क्या है first मेरा element है by the way आपको बता दूँ मै��
11:42
यह है first first यह वाला element है जिसको मैंने id डाल कर get element by id करके लिया हुआ ह��
11:48
get element by id हमेशा एक element लेता है ठीक है चुकि id का मतलब होता है unique identity प��
11:53
जैसे कि आपका class में role number होता था unique आपकी का रॉल नंबर अगर 1001 है आपका रॉल नंबर है तो आपकी का है किसी का और का नहीं होगा ठीक ह��
12:00
उसी तरह से आईडी इसकी फर्स्ट है तो किसी और की नहीं होगी अगर आप आईडी इसकी फर्स्ट इसकी भी डाल देते हो किसी और एलिमेंट की भी तो देख��
12:06
rules तो break करी सकते हो आप लेकिन rule के इसाबसे आपक��
12:11
सिर्फ एक ID देनी और जितने भी pages होते हैं जो भी serious websites इंटरनेट पर बनी होई ह��
12:15
सब में एक element पर एक एडी होगी और वो ID किसी दूसरे element मे��
12:19
नहीं होगी ठीक है I hope कि ये video helpful रहा आप लोगों के लि��
12:23
आप लोग समझे काफी चीज़े एट्रिब्यूट के मेथड्स देखे हमने डेटा एट्रिब्यूट से कि अगर प्लेलिस्ट अक्सेस नहीं करी है अभी त��
12:29
आपने जोसको जरूर अक्सेस कर लेना और नोट्स को भी आप सबी लोग जरूर अक्सेस कर लेन��
12:32
यार बहुत मेनत लग रही है notes में, बहुत सारे लोग comment करते हैं, यार जल्दी ला दो
12:36
जल्दी ला दो, जल्दी बना दो video, जल्दी, तो यार बहुत सारे काम रहते हैं, उसके बाद यह सब मैं करता हूँ
12:41
तो थोड़ा सा मैं आप लोगों से, यही कहूँगा कि मुझे time द��
12:45
मुझे मेरा time लेने दोगे तबी अच्छा course बनेगा और मैं अपना time लेके बना दू यार course
12:50
मैं अपना time लेके course बनाऊँगा तबी अच्छा course बनेगा यह मुझे भी मालूम ह��
12:54
तो मैं अपना time लेके बना रहा हूँ course I hope you understand thank you so much guys for watching this video and i will see you next time