با سلام خدمت اعضای محترم وب سایت و انجمن علمی NCIS ...
در این تاپیک تا جایی که امکان داشته باشد جاوا اسکریپت را آموزش خواهیم داد.
با ما باشید.
سیدمحمدمهدی موسوی
خوب شروع می کنیم.
یکی از متدهایی که در جاوا اسکریپت به کرات استفاده می شود ، متد : getElementById می باشد.
کار متد فوق ، پیدا کردن عناصر اچ تی ام ال به وسیله id های آن هاست.
خوب حالا مثال ها رو باهم دیگه شروع می کنیم...
مثال اول :
در این مثال میخواهیم یک متن رو با متد فوق ، هنگام کلیک کردن روی یک دکمه خاص ، تغییر بدیم.
خوب فعلا بدون استفاده از جاوا اسکریپت یک سند اچ تی ام ال متناسب با کارمون ، می نویسیم:
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" >روی من کلیک کنید .</button>
</body>
</html>
حالا لطفا روی دکمه ایجاد شده کلیک کنید . خواهید دید هیچ اتفاق شگفت انگیزی رخ نمیدهد.
حالا به دکمه خودتون ، دستور جاوا اسکریپت زیر را با استفاده از متد فوق اضافه کنید:
کد:
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button>
خوب حالا می تونید دکمه خودتون رو یه بار دیگه با رفرش کردن مرورگر خود ، امتحان کنید.
خوب ما با استفاده از صفت جاوا اسکریپت onclick یک دستور جاوا اسکریپتی نوشتیم.
و با نوشتن دستورات زیر در واقع :
document.getElementById('demo').innerHTML
داریم میگیم که مرورگر عزیز لطفا در سند ما ، به دنبال عنصری بگرد که آی دی اون demo باشد؛ و تغییرات داخلی انجام بده . ایننر (inner) یعنی (داخلی ) است.
به همین راحتی .
سیدمحمدمهدی موسوی
با ما همراه باشید.
مثال دوم :
جاوا اسکریپت می تونه ، صفت ها رو هم تغییر بده مثلا صفت source که برای فراخوانی آدرس تصویر در html به کار می رود . مثلا:
کد:
<img src="images/blue.png" />
حالا میخواهیم با استفاده از تغییر صفت های src یه لامپ رو خاموش و روشن کنیم :
اول سند اچ تی ام ال مرتبط رو بدون استفاده از کدهای جاوا اسکریپت می نویسیم :
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<button>Turn on please</button>
<img id="myImage" src="off.png" style="width:100px">
<button>Turn off please</button>
</body>
</html>
حالا این کد رو در مرورگرتون اجرا کنید.
توجه : تصاویر دو لامپ روشن و خاموش در این تاپیک ضمیمه شده اند.
حالا مثل قبل ، می خواهیم با صفت onclick و با متد getElementById لامپ رو با فشردن دکمه مرتبط روشن و خاموش کنیم.
کد:
<button
onclick="document.getElementById('myImage').src='off.png'"
></button>
حالا با استفاده از دستور فوق این کد رو کامل می کنیم :
کد:
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<button onclick="document.getElementById('myImage').src='on.png'">Turn on</button>
<img id="myImage" src="off.png" style="width:100px">
<button onclick="document.getElementById('myImage').src='off.png'">Turn off</button>
</body>
</html>
حالا کار تمام شد.
کد رو در مرورگرتون اجرا کنید ، خواهید دید که با فشردن دکمه روشن ، لامپ روشن می شود و با فشردن دکمه خاموش ، لامپ خاموش .
در واقع هنگام فشرده شدن دکمه روش ، تصویر on.png فراخوانی می شود و در هنگام فشرده شدن دکمه خاموش ، تصویر off.png .
موفق باشید.
سیدمحمدمهدی موسوی