ورود

smmm · 31-04-1395، 08:47 ب.ظ

با سلام خدمت اعضای محترم وب سایت و انجمن علمی NCIS ...
در این تاپیک تا جایی که امکان داشته باشد جاوا اسکریپت را آموزش خواهیم داد.
با ما باشید.
سیدمحمدمهدی موسوی

smmm · (آخرین تغییر در ارسال: 01-05-1395، 07:30 ق.ظ توسط smmm.)

خوب شروع می کنیم.
یکی از متدهایی که در جاوا اسکریپت به کرات استفاده می شود ، متد : 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) یعنی (داخلی ) است.
به همین راحتی .
سیدمحمدمهدی موسوی
با ما همراه باشید.

smmm · (آخرین تغییر در ارسال: 05-05-1395، 01:56 ب.ظ توسط smmm.)

مثال دوم :
جاوا اسکریپت می تونه ، صفت ها رو هم تغییر بده مثلا صفت 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 .
موفق باشید.
سیدمحمدمهدی موسوی

ورود
نام‌کاربری
رمزعبور:	فراموشی رمزعبور
	مرا به‌خاطر بسپار.