در سلسله آموزشهای قبل آنلاینر به مبحث لینک ها پرداختیم.
در این مقاله قصد آموزش صفات کاربردی در جاوا اسکریپت را داریم.
شما میتوانید در صفحه وب خود از کدهای جاوا اسکریپت نیز استفاده کنید. قبل از اینکه به صفات در جاوا اسکریپت بپردازیم بهتر است نحوه نوشتن کد های جاوا اسکریپت در صفحه HTML خود را یاد بگیرید.
درج کد جاوا اسکریپت در HTML
برای درج کدهای جاوا اسکریپت باید آنها را در تگ <script> قرار دهید. به تکه کد زیر دقت کنید.
[html]
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
[/html]
همانطور که مشاهده میکنید در دو تگ <script> کدهای جاوا اسکریپت قرار گرفته اند. در تگ button از صفتی به نام onclick استفاده کردیم که مقدار آن نام یک تابع جاوا اسکریپت. حال این تابع در تگ <script> تعریف شده است. زمانی که روی عامل button کلیک شد صفت onclick مقدار خود را که یک تابع با نام myfunction() است اجرا میکند. حال اینکه در تابع شما چه کد هایی قرار گرفته باشد به خود شما بستگی دارد. در تابع myfunction() تکه کدی نوشته شده است که با اجرای آن ابتدا عاملی با id=”demo” انتخاب شده سپس به داخل آن عامل متن hello world را اضافه میکند.
پس تا اینجا متوجه شدید که صفت onclick برای رویداد کلیک استفاده میشود.
صفتی دیگر به نام onmouseover وجود دارد. مقدار این صفت زمانی اجرا میشود که موس بر روی عامل قرار گیرد.
تبدیل مثال قبل به رویداد onmouseover :
[html]
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<button onmouseover="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
[/html]
صفتی دیکر به نام onmouseout نیز وجود دارد که مقدار آن زمانیکه موس از محدوده عامل مورد نظر خارج شود اجرا خواهد شد.
این صفت را بعنوان یک تمرین در منزل در نظر بگیرید.
در آموزش بعد به مبحث تصاویر میپردازیم.
با آنلاینر همراه شوید …
