JavaScript တွင် DOM ကို နမူနာထားသည့် ကုဒ်ရေးသားခြင်း အကြံပြုချက်များ

သင့်ရှေ့တွင် အတော်အသင့် ရှုပ်ထွေးသော တာဝန်တစ်ခု ရှိနေပြီး ၎င်းကို အကောင်အထည်ဖော်ရန် ကုဒ်စာကြောင်း အချို့ ရေးသားရန် လိုအပ်သည်ဟု ဆိုကြပါစို့။

မှားယွင်းသော ချဉ်းကပ်နည်းမှာ ဖြေရှင်းချက် တစ်ခုလုံးကို ကုဒ်အဖြစ် တစ်ခါတည်း ရေးပြီး မှန်မမှန် စစ်ဆေးရန် ကြိုးစားခြင်းပင် ဖြစ်သည်။ ဤသို့ပြုလုပ်ပါက သင့်တွင် ဘာမှ အလုပ်မလုပ်ဘဲ ဖြစ်နေမည်မှာ အလားအလာများပြီး အမှားကို ကုဒ်အများအပြားအတွင်း ရှာဖွေရန် လိုအပ်လာနိုင်သည်။

မှန်ကန်သော ချဉ်းကပ်နည်းမှာ တာဝန်ကို အသေးစား အခြေခံအဆင့်များအဖြစ် ခွဲခြားပြီး၊ ၎င်းတို့ကို အကောင်အထည်ဖော်ကာ ၎င်းတို့၏ မှန်ကန်မှုကို ချက်ချင်း စစ်ဆေးခြင်းပင် ဖြစ်သည်။ ဤနည်းဖြင့်၊ သင် တစ်နေရာရာတွင် မှားယွင်းသည့်တိုင် ပြဿနာကို ချက်ချင်း သတိပြုမိပြီး ပြင်ဆင်နိုင်မည် ဖြစ်သည်။

လက်တွေ့တွင် စမ်းကြည့်ကြပါစို့။ သင့်တွင် အောက်ပါစာပိုဒ်များ ရှိသည်ဟု ဆိုကြပါစို့။

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>

သင့်ရှေ့တွင် ထားရှိသော တာဝန်မှာ 3 ဖြင့် စားလဒ်ပြည့်စေသော နံပါတ်များ ပါဝင်သည့် စာပိုဒ်များကို ရှာဖွေပြီး ၎င်းတို့၏ ဂဏန်းများ ပေါင်းလဒ်ကို ရှာဖွေရန် ဖြစ်ပါစို့။

ပထမဆုံး အသေးစား အဆင့်အနေဖြင့် ကျွန်ုပ်၏ အကြံပြုချက်မှာ စာပိုဒ်များကို array တစ်ခုအနေဖြင့် ရယူပြီး ၎င်း array ကို console တွင် ထုတ်ပြရန်၊ ကျွန်ုပ်တို့ အားလုံးကို မှန်ကန်စွာ ရရှိကြောင်း ကြည့်ရှုရန် ဖြစ်သည်။ ထိုသို့ လုပ်ဆောင်ကြပါစို့။

let elems = document.querySelectorAll('p');
console.log(elems);

နောက်ထပ် အသေးစား အဆင့်မှာ စာပိုဒ်များကို loop ဖြင့် ဖြတ်သန်းပြီး တစ်ခုချင်းစီကို console တွင် သီးသန့် ထုတ်ပြရန် လိုအပ်သည်။

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	console.log(elem);
}

ယခု loop အတွင်းတွင် ကျွန်ုပ်တို့၏ စာပိုဒ်များ၏ စာသားများကို ထုတ်ပြကြပါစို့။

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	console.log(elem.textContent);
}

ယခု ကျွန်ုပ်တို့၏ စာပိုဒ်များထဲမှ ဂဏန်းသည် 3 ဖြင့် စားလဒ်ပြည့်စေသော စာပိုဒ်များ၏ စာသားများကို ထုတ်ပြကြပါစို့။

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	let text = +elem.textContent;
	
	if (text % 3 === 0) {
		console.log(text);
	}
}

ကျွန်ုပ်တို့ မှန်ကန်သော စာပိုဒ်များကို ရရှိကြောင်း သေချာပြီးနောက် ၎င်းတို့၏ ဂဏန်းများ ပေါင်းလဒ်ကို စတင်နိုင်ပါပြီ။

let elems = document.querySelectorAll('p');
let sum = 0;

for (let elem of elems) {
	let text = +elem.textContent;
	
	if (text % 3 === 0) {
		sum += text;
	}
}

console.log(sum);

အောက်ပါ ခုနှစ်များဖြင့် စာရင်းတစ်ခု ရှိပါသည်။

<ul>
	<li>2000</li>
	<li>2004</li>
	<li>2021</li>
	<li>2022</li>
	<li>2025</li>
	<li>2031</li>
</ul>

ဂဏန်းများ၏ ပေါင်းလဒ်သည် 6 နှင့် ညီမျှသော ခုနှစ်များကို ရယူပါ။ ရရှိသော ခုနှစ်များ၏ ပေါင်းလဒ်ကို ရှာဖွေပါ။