پێشەکی

دوای ئەوەی فێری ئەوە بوویت چۆن توخمەکان لە پەڕەی HTML-دا دیاری بکەیت، ئێستا کاتی ئەوەیە فێری ئەوە بیت چۆن دەستکارییان بکەیت. بەکارهێنانی JavaScript ڕێگەت پێ دەدات پەڕەیەکی وێب دروست بکەیت کە کارلێککار (Interactive) بێت.

گۆڕینی دەقی توخمەکان

بۆ گۆڕینی دەقی ناو توخمێک، دوو ڕێگەی سەرەکیمان هەیە: innerText و textContent. هەردووکیان دەق دەگۆڕن، بەڵام جیاوازی وردیان هەیە لە مامەڵەکردن لەگەڵ ستایلی CSS-دا.

const title = document.querySelector('h1');
// گۆڕینی دەق بە بەکارهێنانی innerText
title.innerText = 'سڵاو لە جیهانی پڕۆگرامینگ!';

لە نموونەی سەرەوەدا، ئێمە ناونیشانی پەڕەکەمان گۆڕی. ئەگەر هەڵەیەک لە ناوی توخمەکەدا هەبێت (بۆ نموونە ئەگەر h1 بوونی نەبێت)، کۆدەکە کار ناکات. هەمیشە دڵنیابە لەوەی توخمەکە بوونی هەیە پێش ئەوەی دەستکاری بکەیت.

بەکارهێنانی innerHTML بۆ گۆڕینی پێکهاتە

ئەگەر بتەوێت نەک تەنها دەق، بەڵکو توخمی نوێی HTML-یش زیاد بکەیت، ئەوا innerHTML باشترین هەڵبژاردەیە. ئەم تایبەتمەندییە ڕێگەت پێ دەدات کۆدی HTML-یش لەناو توخمەکەدا دابنێیت.

const container = document.querySelector('.box');
// زیادکردنی لینک یان دەقی ڕازاوە
container.innerHTML = '<p>ئەمە دەقێکی <strong>نوێیە</strong></p>';

کاتێک innerHTML بەکاردەهێنیت، وێبگەڕەکە کۆدەکە وەک HTML دەخوێنێتەوە. ئەمە زۆر بەسوودە، بەڵام ئاگاداربە کە نابێت بەکارهێنەری نەناسراو ڕێگەی پێ بدەیت دەقێک بنووسێت کە لە innerHTML بەکاربێت، چونکە مەترسی ئەمنی (XSS) دروست دەکات.

گۆڕینی ستایلی CSS

هەموو توخمێک خاوەنی تایبەتمەندییەکی style-ە. تۆ دەتوانیت بە ئاسانی هەر تایبەتمەندییەکی CSS لە ڕێگەی JavaScript-ەوە بگۆڕیت. تێبینی بکە کە لە JavaScript-دا ناوی تایبەتمەندییەکان بە شێوازی camelCase دەنووسرێت.

const box = document.querySelector('#myBox');

// گۆڕینی ڕەنگ و قەبارە
box.style.backgroundColor = 'red';
box.style.padding = '20px';
box.style.borderRadius = '10px';

بەکارهێنانی classList بۆ ستایلکردن

باشترین ڕێگە بۆ ستایلکردن ئەوەیە کە ستایلەکان لە پەڕەی CSS-دا بنووسیت و تەنها بە JavaScript کلاسەکە زیاد بکەیت یان لای ببەیت. ئەمە کۆدەکەت پاکتر دەکات.

const element = document.querySelector('.card');
// زیادکردنی کلاس
element.classList.add('active');
// لابردنی کلاس
element.classList.remove('hidden');

کورتەی وانەکە

• بۆ گۆڕینی دەق innerText بەکاربهێنە.
• بۆ گۆڕینی پێکهاتەی HTML innerHTML بەکاربهێنە.
• بۆ ستایلی تاکەکەسی element.style بەکاربهێنە.
• بۆ ستایلی گشتی classList بەکاربهێنە.

ڕاهێنان

هەوڵ بدە پەڕەیەکی HTML دروست بکەیت کە تێیدا دوگمەیەک هەبێت. کاتێک بەکارهێنەر کلیک لەسەر دوگمەکە دەکات، ڕەنگی پاشبنەمای پەڕەکە (document.body.style.backgroundColor) بگۆڕێت بۆ ڕەنگێکی تر.