logo
logo
تبلیغ کلیکی تاپ سایت 98

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

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

آموزش رویداد در جاوا اسکریپت از جمله رویداد کلیک ، 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>

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

موفق باشید.

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

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

دوره ارز دیجیتال تاپ سایت 98

منبع: تاپ سایت 98

تگ:

دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.

  • کامنت ناشناس

    2022-06-12 00:41:26

    عشقین