ఈ పోస్ట్ జావాస్క్రిప్ట్‌లో డేటా అట్రిబ్యూట్‌ల వినియోగాన్ని వివరిస్తుంది.
జావాస్క్రిప్ట్‌లో డేటా అట్రిబ్యూట్‌లను ఎలా ఉపయోగించాలి?
జావాస్క్రిప్ట్‌లో, ' సమాచారం ” వెబ్ పేజీలో ప్రదర్శించబడని అదనపు సమాచారాన్ని నిల్వ చేయడానికి గుణాలు ఉపయోగించబడతాయి. ఈ సమాచారాన్ని వినియోగదారు అవసరాలకు అనుగుణంగా వ్రాయవచ్చు, యాక్సెస్ చేయవచ్చు, చదవవచ్చు మరియు డైనమిక్‌గా మార్చవచ్చు. ఈ విభాగం డేటా లక్షణాలపై ఆచరణాత్మకంగా చర్చించిన పనిని నిర్వహించింది.
వాక్యనిర్మాణం
< మూలకం డేటా -*= 'కొంత విలువ' >
పై వాక్యనిర్మాణంలో:
- ' మూలకం ” డేటా అట్రిబ్యూట్ ఉపయోగించబడే HTML మూలకాన్ని సూచిస్తుంది.
- ' సమాచారం-* ” అనేది ఉపసర్గ (డేటా-)తో ప్రారంభమయ్యే బహుళ(*) డేటా లక్షణాలను సూచిస్తుంది, అనగా డేటా కీవర్డ్ తర్వాత హైఫన్.
- కొంత విలువ: ఇది డేటా అట్రిబ్యూట్ విలువను నిర్దేశిస్తుంది.
ఇప్పుడు, డేటా లక్షణాన్ని సృష్టించడానికి పై వాక్యనిర్మాణాన్ని ఉపయోగించండి.
డేటా లక్షణాలను సృష్టించండి
< div id = 'myDiv' సమాచారం - పేరు = 'ఆల్విన్' సమాచారం - వయస్సు = '40' సమాచారం - లింగం = 'పురుషుడు' > div >పేర్కొన్న ఒక-లైన్ HTML కోడ్ క్రింది వాటిని సృష్టిస్తుంది ' డేటా-పేరు ',' డేటా వయస్సు ', ఇంకా ' డేటా-లింగం 'div' మూలకం లోపల ఉన్న లక్షణాలు 'myDiv' ఐడి.
సృష్టించిన డేటా లక్షణాలను చదవండి/యాక్సెస్ చేద్దాం.
ఉదాహరణ 1: “డేటాసెట్” ప్రాపర్టీని ఉపయోగించి డేటా అట్రిబ్యూట్ చదవండి/యాక్సెస్ చేయండి
ఈ ఉదాహరణ నిర్దిష్ట లేదా మొత్తం డేటా లక్షణాలను చదవడానికి/యాక్సెస్ చేయడానికి “డేటాసెట్” ప్రాపర్టీని వర్తింపజేస్తుంది.
మొదట, '' చూడండి బటన్ '' అని పిలిచే మూలకం jsFunc() 'దానితో సంబంధం ఉన్నప్పుడు' క్లిక్ చేయండి ” ఈవెంట్ బటన్ క్లిక్ మీద ట్రిగ్గర్ చేయబడింది:
< బటన్ క్లిక్ చేయండి = 'jsFunc()' > యాక్సెస్ డేటా లక్షణం బటన్ >ఇప్పుడు, “jsFunc()” నిర్వచనానికి వెళ్లండి:
< స్క్రిప్ట్ >ఫంక్షన్ jsFunc ( ) {
స్థిరంగా మూలకం = పత్రం. getElementById ( 'myDiv' ) ;
కన్సోల్. లాగ్ ( మూలకం. డేటాసెట్ ) ;
}
స్క్రిప్ట్ >
పై కోడ్ లైన్లలో:
- ది ' jsFunc() 'మొదట 'ఎలిమ్' అనే వేరియబుల్ డిక్లేర్ చేస్తుంది, అది ' document.getElementById() ” జోడించిన div మూలకాన్ని దాని id “myDiv” ద్వారా యాక్సెస్ చేసే పద్ధతి.
- తరువాత, ఇది 'ని ఉపయోగిస్తుంది console.log() 'ఉపయోగించే పద్ధతి' డేటాసెట్ ” ప్రాపర్టీ యాక్సెస్ చేయబడిన div ఎలిమెంట్ యొక్క డేటా అట్రిబ్యూట్‌లను యాక్సెస్ చేయడానికి మరియు వాటిని వెబ్ కన్సోల్‌లో ప్రదర్శించడానికి.
అవుట్‌పుట్
వెబ్ కన్సోల్‌ను తెరవడానికి F12 నొక్కండి:
ఇచ్చిన బటన్‌పై క్లిక్ చేసిన తర్వాత, కన్సోల్ “ని చూపుతుంది. DOMStringMap ” div మూలకం యొక్క అన్ని డేటా లక్షణాలను కలిగి ఉంటుంది.
నిర్దిష్ట విలువను యాక్సెస్ చేయండి
వినియోగదారు నిర్దిష్ట డేటా లక్షణాన్ని యాక్సెస్ చేయాలనుకుంటే, 'డేటాసెట్' ప్రాపర్టీతో దాని పేరును ఇలా పేర్కొనండి:
< స్క్రిప్ట్ >ఫంక్షన్ పొందండి ( ) {
స్థిరంగా మూలకం = పత్రం. getElementById ( 'myDiv' ) ;
కన్సోల్. లాగ్ ( మూలకం. డేటాసెట్ . పేరు ) ;
}
స్క్రిప్ట్ >
ఈ సమయంలో, “పేరు” డేటా లక్షణాలు “ని ఉపయోగించి యాక్సెస్ చేయబడతాయి. డేటాసెట్ ”ఆస్తి.
అవుట్‌పుట్
బటన్ క్లిక్‌పై కన్సోల్ పేర్కొన్న డేటా లక్షణాల విలువను మాత్రమే చూపుతున్నట్లు చూడవచ్చు.
ఉదాహరణ 2: “getAttribute()” పద్ధతిని ఉపయోగించి డేటా లక్షణాన్ని చదవండి/యాక్సెస్ చేయండి
ఈ ఉదాహరణ డేటా అట్రిబ్యూట్‌లను చదవడానికి/యాక్సెస్ చేయడానికి “getAttribute()” పద్ధతిని ఉపయోగిస్తుంది.
ఈ దృష్టాంతంలో, మొదటి ఉదాహరణ యొక్క బటన్ మూలకం కూడా చేర్చబడింది:
< బటన్ క్లిక్ చేయండి = 'jsFunc()' > యాక్సెస్ డేటా లక్షణం బటన్ >“getAttribute()” పద్ధతి యొక్క కార్యాచరణను చూద్దాం:
< స్క్రిప్ట్ >ఫంక్షన్ jsFunc ( ) {
స్థిరంగా మూలకం = పత్రం. getElementById ( 'myDiv' ) ;
కన్సోల్. లాగ్ ( మూలకం. పొందు లక్షణం ( 'డేటా-పేరు' ) ) ;
కన్సోల్. లాగ్ ( మూలకం. పొందు లక్షణం ( 'డేటా-వయస్సు' ) ) ;
కన్సోల్. లాగ్ ( మూలకం. పొందు లక్షణం ( 'డేటా-లింగం' ) ) ;
}
స్క్రిప్ట్ >
పై కోడ్ స్నిప్పెట్‌లో:
- “elem” వేరియబుల్ “ని వర్తింపజేస్తుంది document.getElementById() 'మైడివ్' ఐడిని ఉపయోగించి జోడించిన డివివి ఎలిమెంట్‌ను యాక్సెస్ చేసే పద్ధతి.
- తరువాత, ' console.log() 'పద్ధతి' ఉపయోగిస్తుంది getAtribute() పొందబడిన div మూలకం యొక్క పేర్కొన్న “డేటా” అట్రిబ్యూట్ విలువను పొందే పద్ధతి మరియు దానిని వెబ్ కన్సోల్‌లో ప్రదర్శించడం.
- మిగిలిన పేర్కొన్న డేటా లక్షణాలను యాక్సెస్ చేయడానికి అదే పని చేయబడుతుంది.
గమనిక: “getAttribute()” పద్ధతి డేటా లక్షణాన్ని “డేటా” ఉపసర్గతో పేర్కొంటుంది, తర్వాత హైఫన్(-) అంటే (డేటా-) “డేటాసెట్()” ప్రాపర్టీని ఉపయోగిస్తున్నప్పుడు అవసరం లేదు.
అవుట్‌పుట్
పైన పేర్కొన్న అవుట్‌పుట్ బటన్ క్లిక్‌పై పేర్కొన్న అన్ని డేటా అట్రిబ్యూట్ విలువలను ప్రదర్శిస్తుంది.
ఉదాహరణ 3: “డేటాసెట్” ప్రాపర్టీని ఉపయోగించి డేటా లక్షణాన్ని వ్రాయండి
ఈ ఉదాహరణ 'డేటాసెట్' ప్రాపర్టీని ఉపయోగించి డేటా లక్షణాలను వ్రాస్తుంది.
బటన్ మూలకం యొక్క కంటెంట్ ప్రస్తుత దృష్టాంతానికి అనుగుణంగా మార్చబడింది:
< బటన్ క్లిక్ చేయండి = 'jsFunc()' > డేటా లక్షణాన్ని వ్రాయండి బటన్ >ఇప్పుడు, జోడించిన div మూలకంలో కొత్త డేటా లక్షణాన్ని వ్రాయండి:
< స్క్రిప్ట్ >ఫంక్షన్ jsFunc ( ) {
స్థిరంగా మూలకం = పత్రం. getElementById ( 'myDiv' ) ;
మూలకం. డేటాసెట్ . id = 'వ్యక్తి'
కన్సోల్. లాగ్ ( మూలకం. డేటాసెట్ ) ;
}
స్క్రిప్ట్ >
పై కోడ్ బ్లాక్‌లో:
- ది ' డేటాసెట్ ”ప్రాపర్టీ పేర్కొన్న స్ట్రింగ్ విలువతో కొత్త డేటా అట్రిబ్యూట్ పేరు “id”ని వ్రాస్తుంది.
- తరువాత, ' conolse.log() ” వెబ్ కన్సోల్‌లో కొత్తగా వ్రాసిన డేటా లక్షణాన్ని కలిగి ఉన్న “DOMStringMap” ఇంటర్‌ఫేస్‌ను ప్రదర్శించడానికి “డేటాసెట్” లక్షణాన్ని ఉపయోగిస్తుంది.
అవుట్‌పుట్
ఇక్కడ, కన్సోల్ 'డేటాసెట్' ప్రాపర్టీని ఉపయోగించి వ్రాసిన కొత్త డేటా అట్రిబ్యూట్ 'id'ని కలిగి ఉన్న 'DOMStringMap'ని ప్రదర్శిస్తుంది.
ఉదాహరణ 4: డేటా అట్రిబ్యూట్ విలువను నవీకరించండి
ఈ ఉదాహరణ 'డేటాసెట్' ప్రాపర్టీ సహాయంతో నిర్దిష్ట డేటా లక్షణం యొక్క ప్రస్తుత విలువను నవీకరిస్తుంది.
ఇచ్చిన దృష్టాంతం ప్రకారం బటన్ మూలకం యొక్క వచనం మార్చబడింది:
< బటన్ క్లిక్ చేయండి = 'jsFunc()' > డేటా లక్షణాన్ని నవీకరించండి బటన్ >ఇప్పుడు, జావాస్క్రిప్ట్ విభాగానికి వెళ్లండి:
< స్క్రిప్ట్ >ఫంక్షన్ jsFunc ( ) {
స్థిరంగా మూలకం = పత్రం. getElementById ( 'myDiv' ) ;
మూలకం. డేటాసెట్ . పేరు = 'జాన్'
కన్సోల్. లాగ్ ( మూలకం. డేటాసెట్ . పేరు ) ;
}
స్క్రిప్ట్ >
ఎగువ కోడ్ బ్లాక్‌లో, పేర్కొన్న “పేరు” డేటా అట్రిబ్యూట్ విలువ “” సహాయంతో నవీకరించబడింది. డేటాసెట్ ”ఆస్తి.
అవుట్‌పుట్
బటన్ క్లిక్‌పై పేర్కొన్న డేటా లక్షణాల యొక్క నవీకరించబడిన విలువను కన్సోల్ చూపుతుంది.
ఉదాహరణ 5: డేటా లక్షణాన్ని తొలగించండి
ఈ ఉదాహరణ 'తొలగించు' కీవర్డ్‌ని ఉపయోగించడం ద్వారా నిర్దిష్ట డేటా లక్షణాన్ని తొలగిస్తుంది.
బటన్ మూలకం యొక్క వచనం అవసరానికి అనుగుణంగా మార్చబడింది:
< బటన్ క్లిక్ చేయండి = 'jsFunc()' > డేటా లక్షణాన్ని తొలగించండి బటన్ >ఇప్పుడు, జావాస్క్రిప్ట్ కోడ్ బ్లాక్‌ని అనుసరించండి:
< స్క్రిప్ట్ >ఫంక్షన్ jsFunc ( ) {
స్థిరంగా మూలకం = పత్రం. getElementById ( 'myDiv' ) ;
మూలకాన్ని తొలగించండి. డేటాసెట్ . వయస్సు ;
కన్సోల్. లాగ్ ( మూలకం. డేటాసెట్ . వయస్సు ) ;
}
స్క్రిప్ట్ >
పై కోడ్ స్నిప్పెట్ ' తొలగించు యాక్సెస్ చేయబడిన డేటా లక్షణాన్ని తొలగించడానికి 'డేటాసెట్' ప్రాపర్టీతో కీవర్డ్.
అవుట్‌పుట్
కన్సోల్ చూపిస్తుంది ' నిర్వచించబడలేదు యాక్సెస్ చేయబడిన డేటా అట్రిబ్యూట్ తొలగించబడిందని స్పష్టంగా ధృవీకరించే బటన్‌పై క్లిక్ చేయండి.
ముగింపు
జావాస్క్రిప్ట్‌లో, డేటా అట్రిబ్యూట్‌లను అవసరాలకు అనుగుణంగా చదవడం, యాక్సెస్ చేయడం, వ్రాయడం, నవీకరించడం మరియు తొలగించడం వంటి వివిధ మార్గాల్లో ఉపయోగించవచ్చు. ఈ పనులన్నీ అంతర్నిర్మిత సహాయంతో నిర్వహించబడతాయి ' డేటాసెట్ ”ఆస్తి. అయినప్పటికీ, వినియోగదారు '' సహాయంతో డేటా లక్షణాన్ని ఒక్కొక్కటిగా యాక్సెస్ చేయవచ్చు getAtribute() ” పద్ధతి. ఈ పోస్ట్ జావాస్క్రిప్ట్‌లో డేటా అట్రిబ్యూట్‌ల వినియోగాన్ని ఆచరణాత్మకంగా వివరించింది.