وانە پێنجەم: فێربوونی زمانی HTML و CSS و JavaScript! 🎉

بەخێربێیت بۆ وانە پێنجەم لە سلسلەی فێربوونی زمانەکانی HTML و CSS و JavaScript ! لەم وانەیەدا، ئێمە ڕێگەی خۆمان دەستپێدەکەین بە JavaScript ، کە زمانێکی بەرنامەنووسییە بۆ زیادکردنی ڕاکێشی و جوڵایەتی بۆ پەڕگەکانی وێب. ئێمە فێردەبین چۆن ئەفەکتە ڕاکێشەکانی وەک دوگمەی دیاریکردن/شاردنی نوسینەکان ، شوێنی جوڵاو ، و هتد زیاد بکەین.

1. پێداچوونەوەی خێرا

لە وانەکانی پێشوو، ئێمە فێر بووین:

• چۆن بەکاربێنین HTML بۆ دروستکردنی ڕەچاوی پەڕگە.
• ڕوونکردنەوەی پەڕگەکان بە بەکارهێنانی CSS .
• تەکنیکە پێشکەوتووەکان وەک Flexbox و Grid بۆ ڕووبەندکردنی کێش.

ئێستا، ئێمە بەرزدەچینەوە بۆ JavaScript بۆ زیادکردنی ڕاکێشی !

2. دەستپێکردن بە JavaScript

JavaScript چییە؟

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

• ناوەڕۆکی پەڕگە بە شێوەیەکی جوڵاو گۆڕێت.
• وەڵام بدات بۆ کردارەکانی بەکارهێنەر (وەک کرتەکردنی دوگمە).
• کۆنتڕۆڵی بکات لەسەر ڕوونکردنەوە (CSS) و ڕەچاو (HTML) .

JavaScript چۆن کار دەکات؟

زۆرجار JavaScript نوسراوەتەوە لە ناو فایلی HTML بە بەکارهێنانی <script>، یان لە فایلێکی دەرەکی کە بە پەڕگە بەسترابێت.

3. نووسینی یەکەم کۆدی JavaScript

أ. نووسینی کۆد بە شێوەی دەرەکی لە HTML:

<script>
alert("مرحبًا بالعالم!");
</script>

ب. بەستنەوەی فایلی JavaScriptی دەرەکی:

<script src="script.js"></script>

4. زیادکردنی ڕاکێشی بە بەکارهێنانی JavaScript

أ. کارکردن لەگەڵ کەسەلات (Events):

ئێمە دەتوانین بەکاربێنین JavaScript بۆ وەڵامدانەوە بۆ کەسەلات وەک کرتەکردن (click) یان نوسین (input) .

نموونە: دوگمەی "دیاریکردن/شاردن" نوسین:

<button onclick="toggleText()">إظهار/إخفاء النص</button>
<p id="text" style="display: none;">هذا النص سيظهر ويختفي!</p>


<script>
function toggleText() {
var text = document.getElementById("text");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
</script>

ب. گۆڕینی ڕوونکردنەوەکان بە شێوەیەکی جوڵاو:

ئێمە دەتوانین بەکاربێنین JavaScript بۆ گۆڕینی ڕوونکردنەوەکانی CSS بە شێوەیەکی جوڵاو.

نموونە: گۆڕینی ڕەنگی پشتبوون کاتێک کرتە دەکرێت:

<button onclick="changeColor()">غير اللون</button>


<script>
function changeColor() {
document.body.style.backgroundColor = "lightblue";
}
</script>

5. دروستکردنی شوێنی جوڵاو

أ. دروستکردنی شوێنی جوڵاو:

<div>
<label for="slider">اختر قيمة:</label>
<input type="range" id="slider" min="0" max="100" value="50">
<p>القيمة الحالية: <span id="value">50</span></p>
</div>


<script>
const slider = document.getElementById("slider");
const value = document.getElementById("value");


slider.addEventListener("input", function() {
value.textContent = slider.value;
});
</script>

6. ئەنیمەیشنەکان بە بەکارهێنانی JavaScript

أ. جوڵاندنی ئەلیمەنتەکان:

ئێمە دەتوانین بەکاربێنین JavaScript بۆ جوڵاندنی ئەلیمەنتەکان بە بەکارهێنانی تایبەتمەندییەکانی style .

نموونە: جوڵاندنی کەسرو بۆ ئاسۆیی:

<div id="box" style="width: 100px; height: 100px; background-color: lightgreen; position: relative;"></div>
<button onclick="moveBox()">حرك الصندوق</button>


<script>
function moveBox() {
const box = document.getElementById("box");
let pos = 0;
const interval = setInterval(() => {
if (pos >= 300) {
clearInterval(interval);
} else {
pos += 5;
box.style.left = pos + "px";
}
}, 10);
}
</script>

7. کاری تاقیکردنەوە

هەوڵبدە پەڕگەیەکی HTML دروست بکەیت کە پێکهاتووە لە:

• دوگمەی "دیاریکردن/شاردن" نوسین:

  • کاتێک دوگمە کرتە دەکرێت، نوسین ئازار دەبێت یان دەربخات.

• شوێنی جوڵاو:

  • نیشاندەدات گەورەیەکی ئێستایی شوێنی جوڵاو.

• کەسروی جوڵاو:

  • کاتێک دوگمە کرتە دەکرێت، کەسرو بۆ ئاسۆیی دەجوڵێت.

• گۆڕینی ڕەنگی پشتبوون:

  • کاتێک دوگمە کرتە دەکرێت، ڕەنگی پشتبوونی پەڕگە گۆڕدرێت.

8. چی دواتر؟

لە وانەی داهاتوودا، ئێمە فێردەبین:

• چۆن بەکاربێنین AJAX بۆ داگرتنی داتا بە بێ ڕۆشتنەوەی پەڕگە.
• کارکردن لەگەڵ APIs بۆ هێنانی داتا لە ئینتەرنێت.
• دروستکردنی بەرنامەی وێبی ڕاکێشی زیاتر پێشکەوتوو.

📌 پێشنیار: هیچ شک نەکە بۆ تاقیکردنەوەی کۆدەکان بە خۆت و گۆڕینیان بۆ بینینی ئەنجامەکان. چارەسەرکردن مەرجە بۆ باشبوونەوە! 🚀