آموزش رویداد در جاوا اسکریپت

هدایت عباسی آموزش جاوا اسکریپت

آموزش رویداد در جاوا اسکریپت از جمله رویداد کلیک ، focus و change و غیره . همراه با مثال و توضیحات کامل.

در این بخش از آموزش جاوا اسکریپت (javascript) از تاپ سایت 98 به معرفی چند رویداد می پردازیم.

رویداد کلیک در جاوا اسکریپت

رویداد کلیک در جاوا اسکریپت یکی از رویدادهای مهم است .

در مثال زیر با کلیک روی دکمه جمله Hello TopSite98.com نشان داده می شود.

ابتدا پاراگراف را خالی ایجاد می کنیم و id آن را top1 می گذاریم.

سپس با کلیک روی دکمه ، تابع myFunction اجرا شده و این متن در پاراگراف نمایش داده می شود.

<!DOCTYPE html>
<html>
<body>
<h1>TopSite98.comt</h1>
<p>onclick event</p>
<button onclick="myFunction()">Click me</button>
<p id="top1"></p>
<script>
function myFunction() {
document.getElementById("top1").innerHTML = "Hello TopSite98.com";
}
</script>
</body>
</html>

رویداد onfocus در جاوا اسکریپت

در مثال زیر با کاربرد رویداد onfocus در جاوا اسکریپت آشنا می شوید.

رویداد onfocus زمانی اتفاق می افتد که یک عنصر فوکوس شود.

رویداد onfocus اغلب با <input>، <select> و <a> استفاده می شود.

در این مثال هنگامی که کاربر در input کلیک کند تابع myFunc اجرا می شود.

با فراخوانی تابع رنگ پس زمینه قرمز و سایز متن نیز بزرگ می شود.

<!DOCTYPE html>
<html>
<body>
<h1>TopSite98.comt</h1>
<p>focus event</p>
Enter your name: <input type="text" onfocus="myFunc(this)">
<script>
function myFunc(x) {
x.style.background = "red";
x.style.fontSize = "xx-large";
}
</script>
</body>
</html>

رویداد onchange در جاوا اسکریپت

رویداد onchange هنگامی رخ می دهد که مقدار یک عنصر تغییر کرده است.

برای دکمه های radiobuttons و checkboxes ، رویداد onchange هنگامی رخ می دهد که وضعیت چک شده تغییر کرده است.

در مثال زیر با انتخاب هر گزینه ، نام آن در پاراگراف demo نمایش داده می شود.

با تغییر و انتخاب عناصر داخل تگ select تابع mycar اجرا می شود.

برای اجرا کدها کافی است که کد را در یک فایل html ذخیره کرده و اجرا نمایید.

<!DOCTYPE html>
<html>
<body>
<p>Select car</p>
<select id="topsite98" onchange="mycar()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<p id="demo"></p>
<script>
function mycar() {
var x = document.getElementById("topsite98").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>

امیدواریم از این آموزش لذت برده باشید.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید