سبد (0)

تبلیغات

رویدادها در JavaScript

مدل DOM به JavaScript اجازه می دهد تا به رویدادهای یک صفحه HTML، واکنش نشان دهد.

مثال (رویدادها در JavaScript)

Mouse Over Me
Click Me

واکنش به رویدادها

Wiki

یک کد JavaScript می تواند زمانی که یک رویداد اتفاق می افتد، اجرا شود، مانند زمانی که کاربر روی یک دکمه کلیک کند.

برای اجرای شدن کد JavaScript به ازای یک رویداد، باید کد مورد نظر را در خصوصیت مربوط به همان رویداد نوشت:

onclick=JavaScript

مثالی از رویدادها:

  • با كلیك موس
  • زمانی كه یك صفحه یا یك عكس بارگذاری می شود
  • موس بر روی یك نقطه خاص بر روی صفحه برود
  • انتخاب كردن یك فیلد ورودی در فرم HTML
  • ارسال یك فرم HTML
  • فشردن یک کلید کیبورد

توجه: معمولاً رویدادها در تركیب با توابع استفاده می شوند و قبل از آنكه رویداد اتفاق بیافتد، تابع اجرا نخواهد شد.

در مثال زیر، زمانی که کاربر روی متن کلیک کند، محتوای عنصر <h1> تغییر می کند:

مثال (رویدادها در JavaScript)

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
خودتان امتحان کنید »

در مثال زیر، زمانی که کاربر روی متن کلیک کند، تابع changetext فراخوانی می شود:

مثال (رویدادها در JavaScript)

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
خودتان امتحان کنید »

اختصاص رویدادها به عناصر

Wiki

برای اختصاص دادن رویدادها به عناصر HTML، باید از نام خصوصیت های مربوط به همان رویداد استفاده نمود.

مثال (رویدادها در JavaScript)

اختصاص خصوصیت onclick به عنصر button

<button onclick="displayDate()">Try it</button>
خودتان امتحان کنید »

در مثال بالا، زمانی که کاربر روی دکمه کلیک نماید، تابع displayDate فراخوانی می شود.


اختصاص رویدادها با استفاده از مدل DOM

Wiki

مدل DOM به شما اجازه می دهد تا رویدادها را به صورت داینامیک به عناصر HTML اختصاص دهید:

مثال (رویدادها در JavaScript)

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
خودتان امتحان کنید »

در مثال بالا، به ازای رویداد onclick عنصر با شناسه "myBtn"، تابع displayDate فراخوانی می شود. (زمانی که روی عنصر کلیک شود تابع فراخوانی می شود)


رویدادهای onload و onunload

Wiki

onload رویدادی است که با ورود کاربر به صفحه راه اندازی می شود و onunload زمانی که از آن خارج می شود.

رویداد onload معمولا برای چك كردن نوع و نسخه مرورگر بیننده استفاده می شود و بر اساس اطلاعات بدست آمده یک نسخه مناسب از صفحه وب را بارگذاری می کند.

همچنین هر دو رویداد معمولا برای تنظیم كوكی ها، موقعی كه كاربر وارد صفحه می شود و یا آنرا ترك می كند، استفاده می شود. برای مثال شما می توانید یك پنجره popup برای درخواست نام كاربر به محض اولین ورود به صفحه داشته باشید. اسم مورد نظر در داخل كوكی ذخیره می شود. دفعه ی بعد كه بیننده وارد صفحه ی شما می شود می توانید یك پنجره popup جدید مانند "آقای احمدی خوش آمدید" را داشته باشید.

مثال (رویدادها در JavaScript)

<body onload="checkCookies()">
خودتان امتحان کنید »

رویدادهای onFocus ، onBlur و onChange

Wiki

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

onBlur: هنگامیکه تمرکز از روی یکی از اجزای فرم خارج شود.

onfocus: هنگامیکه توسط موس و یا دکمه Tab کیبورد بر روی یکی از اجزای فرم تمرکز شود.

onchange: هنگامی که در اجزای فرم تغییر ایجاد شود، مانند زمانی که متن داخل یک کادر متنی تغییر یابد.

مثال زیر چگونگی استفاده از رویداد onchange را نشان می دهد. زمانی كه كاربر محتوای کادر متنی را تغییر دهد، تابع ()upperCase فراخوانی می شود:

مثال (رویدادها در JavaScript)

<input type="text" id="fname" onchange="upperCase()">
خودتان امتحان کنید »

رویداد onmouseover و onmouseout

Wiki

رویداد onmouseover و onmouseout می تواند زمانی که موس کاربر روی یک عنصر HTML قرار می گیرد و یا از روی آن خارج می شود، یک تابع را راه اندازی کند.

در مثال ساده زیر، زمانی که موس روی کادر قرمز رنگ قرار می گیرد (onmouseover)، متن آن تغییر می کند و زمانی که موس از روی آن کنار می رود (onmouseout)، به حالت اول برمی گردد:

مثال (رویدادها در JavaScript)

Mouse Over Me
خودتان امتحان کنید »

 رویداد onmousedown و onmouseup و onclick

Wiki

onmousedown: زمانی که دکمه موس، فشار داده می شود.

onmouseup: زمانی که دکمه موس، رها می شود.

onclick: زمانی که عملیات کلیک کردن موس، کامل می شود.

مثال (رویدادها در JavaScript)

یک مثال ساده از رویدادهای onmousedown و onmouseup

Click Me
خودتان امتحان کنید »

رویداد onSubmit

Wiki

رویداد onsubmit معمولاً برای اعتبارسنجی همه ی فیلدها یک فرم، قبل از ارسال به سرور استفاده می شود.

در مثال زیر چگونگی استفاده از این رویداد نشان داده شده است. تابع ()checkForm زمانی كه كاربر دكمه ای از فرم را فشار می دهد فراخوانی می شود. اگر مقادیر فیلدها پذیرفته نشود، ارسال صفحه به سرور متوقف می شود، تابع ()checkForm مقدار True و یا False  را بر می گرداند. اگر مقدار True را برگرداند صفحه ارسال می شود، در غیر این صورت ارسال صفحه متوقف خواهد شد:

<form method="post" action="test.htm" onsubmit="return checkForm()">

مثال های بیشر

onmousedown and onmouseup
زمانی که کاربر دکمه موس را پایین نگه می دارد، خصوصیت src عنصر <img> تغییر می کند.

onload
نمایش یک پیغام، زمانی که بارگذاری صفحه تمام شود.

onfocus
زمانی که موس روی عنصر <input> قرار گرفت (focus)، رنگ پس زمینه آن عوض می شود.

Mouse Events
زمانی که موس روی عنصر حرکت می کند، رنگ آن تغییر می کند.

دیدگاه‌ها  

+3 # elnaz 1395-04-08 12:03
سلام خسته نباشید مرسی از مطالب خوبتون.
من مباحث html، css و javascript رو از روی سایت خوندم و فقط تمریناتی که در حین درس بود رو نوشتم. حالا میخوام یه دفترچه تقویم مانند طراحی کنم که بالای هر صفحه تاریخ نوشته شده باشه و اینکه بشه چندکلمه ای هم توی صفحه مورد نظر نوشت . و همچنین قابلیت لمسی داشته باشه. یعنی با حرکت دست ورق بخوره. میشه لطفا راهنماییم کنید از کجا و چطور باید شروع کنم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیر پهلوان صادق 1395-04-08 19:31
سلام شما می توانید یک Application اندرویدی برای این منظور طراحی کنید. در واقع نرم افزار مذکور که یک دفترچه با مثال های فراوان است می تواند روی گوشی های مبایل و همچنین تبلت ها نصب شود.
بنابراین شما باید با برنامه نویسی اندروید آشنا شوید. پیشنهاد می کنم از منوها بالای سایت، "بیاموز اندروید" را انتخاب کنید و شروع به مطالعه این قسمت نمایید و یا می توانید از فیلم آموزش اندروید که لینک آنرا در پایین برایتان قرار دادم استفاده نمایید:
http://beyamooz.com/product/android
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # س.محمودی 1395-02-10 13:59
سلام و خسته نباشید
باتشکر از آموزش خوبتون

من میخوام با جاوا اسکریپت یک tab درست کنم که از یک سری عکس درست شده و میخوام با کلیک بر روی هر عکس یک نوشته مشخصی رو نمایش بده
میدونم که باید برای نوشته هام id تعریف کنم و برای هر عکس یک کلاس ولی نمیدونم توی جاوا چطور پیاده سازیش کنم

ممنون میشم کمکم کنید با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1395-02-12 08:14
با سلام و تشکر.
راهکار منطقی این هست که نوشته‌ی موردنظر رو به طریقی به عکس مربوطه وصل کنید. یعنی در هر دو یک خصوصیات یا دیتای واحدی بذارید که مشخص کنه این متن مرتبط با عکس موردنظر هست. سپس در رویداد عکس، مشخص کنید که با کلیک روی این عکس، این متن رو نمایش بده.
مثلا فرض کنید عکس‌های ما به صورت زیر هست:
<img src="image s/1.jpg" id="img1&q uot; onclick="S howText(1);&quo t; /><br> <span id="show1"></span>
<img src="image s/2.jpg" id="img2&q uot; onclick="S howText(2);&quo t; /><br> <span id="show2"></span>
<img src="image s/3.jpg" id="img3&q uot; onclick="S howText(3);&quo t; /><br> <span id="show3"></span>
<img src="image s/4.jpg" id="img4&q uot; onclick="S howText(4);&quo t; /><br> <span id="show4"></span>
<img src="image s/5.jpg" id="img5&q uot; onclick="S howText(5);&quo t; /><br> <span id="show5"></span>


حالا متنها رو به صورت زیر تعریف کنید:
<div id="text1& quot; data-id="1 ">This is a Text 1.</div>
<div id="text2& quot; data-id="2 ">This is a Text 2.</div>
<div id="text3& quot; data-id="3 ">This is a Text 3.</div>
<div id="text4& quot; data-id="4 ">This is a Text 4.</div>
<div id="text5& quot; data-id="5 ">This is a Text 5.</div>


حالا تابع زیر رو بنویسید:
<script type="text /javascript&quo t;>
function ShowText(num){
var str = document.getEle mentById(" text"+num) .innerHTML;
document.getEle mentById(" show"+num) .innerHTML = str;
alert(str);
}
</script>


سعی کردم خیلی ساده کد رو بنویسم تا قابل درک باشه. والّا را‌ه‌های ساده‌تر و بهتری هم برای نوشتن این کد هست.
اگر منطق برنامه رو کمی بهش دقت کنید، درکش خیلی راحته و متوجه میشید که برنامه چی کار داره میکنه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # حمید 3 1394-08-24 12:56
سلام! من میخوام یک رویداد بنویسم که اگر روی هر جای سند کلیک شد بک گراند body بشه مثلا قرمز!
ولی اگه روی یک پاراگراف خاص کلیک شد بک گرداند بشه آبی!
هر کار میکنم بک گراند قرمز میشه و انگار اصلا در نظر نمیگیره تابع پاراگراف رو! انگار سند الویت داره به همه ی عناصر!
میدونین چجوری میشه این مشکل رو حل کرد؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-08-24 22:32
با سلام.
کد زیر کار میکنه، ولی کامل نیست. اگه روی پاراگراف کلیک کنید، فقط پاراگراف رنگی میشه، ولی اگه جایی غیر از پاراگراف و داخل تگ body کلیک کنید، بدنه رنگ میشه.
میتونید با کمی برنامه نویسی اون رو مطابق سلیقه خودتون در بیارید.<!doctype html>
<html>
<head>
<meta charset="u tf-8">
<title>CO DE</title> ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var p = 0;
$(document).ready(function(){
$("body").click(function(){
if(!p){
$(this).css({"background-color" : "red"});
}
p = 0;
});
$("p").click(function(){
p++;
$(this).css({"background-color" : "green"});
});
});
</script>
</head>
<body>
<div>div</div>
<p>paragraph 1</p>
<div>
<p>paragraph 2</p>
<span>span</span>
</div>
</body>
</html>

در ضمن انجمن سایت بیاموز به آدرس http://beyamooz.com/forum راه اندازی گردید. از این پس میتوانید با درج سؤال خود در انجمن، علاوه بر پاسخ سریع، از نظرات دیگر کاربران هم بهره مند گردید.

با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # حمید 3 1394-08-25 00:23
ممنون از پاسختتون! ولی این که با جی کویری هستش و خودم هم میدونستم! میخواستم بدونم جی کویری چجوری از جاوا به این کد رسیده!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-08-25 07:00
برای بادی از document.body.c lick استفاده کنید و برای پاراگراف از document.getEle mentByClass استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # amin. 1394-07-11 16:27
this و obj چیست ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1394-07-13 20:31
عبارت this به عنصر جاری اشاره می کند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # amirkian 1394-05-22 12:52
ببینید یک ابهام برام ایجاد شده
بجای اینکه از رویداد onClick استفاده کنیم میتوانیم بگوییم اگه روی این دکمه کلیک شد؛فلان اتفاق بیافتد؟!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-05-22 23:09
خب روی همین دکمه ای که شما می گویید هم عمل کلیک اتفاق می افته! به عبارت دیگر از onclick استفاده می شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیرکیان 1393-12-15 15:52
ببخشید این سوال را اینجا می پرسم
---------------------------------------
یک المان دارم ،که بصورت "none"است یعنی مخفی است.
میخام وقتی که کاربر روی یک لینکی کلیک کرد ؛خاصیت عنصر دیو به visible تغییر کند

با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # مظاهر نصوحی 1393-12-16 08:34
با سلام خدمت شما کاربر عزیز
می توانیم با استفاده از یک تابع در جاوا اسکریپت وضعیت مخفی بودن عنصر را چک کنیم در صورتی که مخفی بود آن را نمایش می دهیم. کد زیر سوال شما را دقیقاً پاسخ می دهد:
<!DOCTYPE html>
<html>
<body>
<div onClick="show(s econd_Div)" style="backgrou nd-color:#D94A3 8;width:90px;he ight:20px;paddi ng:40px;">Cl ick Me</div>
<div id="second_Div" style= "display:none ; background-colo r:#ccc;width:90 px;height:20px; padding:40px;"" > hello
</div>
<script>
function show(obj)
{ if(obj.style.display=="none")
{ obj.style.displ ay="block"; }
else { obj.style.displ ay="none"; }
}
</script>
</body>
</html>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیرکیان 1393-12-17 14:07
من بجاش این کد را نوشتم نمی دونم چرا درست عمل نمی کنه؟!
document.getElementsByClassName("ftarget").onclick=showtarget();

function showtarget(){
document.getElementById("target").style.display="block"

---------------------------------------------------------------------------
ftarget:نام کلاس یکسری لینکه؛که وقتی روش کلید شه باید دیو که آی دی تارگت را داره نمایش داده بشه
-----------------------------------------------------------------------------------
آیا کد بالا اشکال دارد؛چون میخام وقتی که روی لینک کلید شد دو من نمایش داده شود ؛در حالت فعلی همینطوری نمایش میدهد؟؟؟
----------------------------------------------------------------
در ضمن اگر جواب سوال را بگیرم به سایت شما کمک نقدی خواهم کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # مظاهر نصوحی 1393-12-17 15:04
با سلام خدمت شما دوست عزیز

با اینکه سوالت کمی مبهمه ولی فکر کنم از کد زیر باید استفاده کنید:
var elements = document.getElementsByClassName('ftarget');
for(var i = 0, len = elements.length ; i < len; i++) {
elements.onclic k = function () {
document.getElementById("target").style.display="block";
trackOutboundLi nk(this.href);
return false;
}
}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+11 # مظاهر نصوحی 1393-12-18 15:11
دقت بفرمایید که getElementsByCl assName آرایه ای از عناصر را بر می گرداند. ما این عناصر را در یک آرایه با نام elements ذخیره کرده ایم. برای انتساب رویداد باید روی تک تک این عناصر حرکت کنیم (حلقه ی for) و به ازای تک تک عناصر رویداد onClick را تعریف می کنیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # امیرکیان 1393-12-18 11:23
با اینکه زیاد متوجه نشدم؛ولی کمکتان(نقدی) کردم ؛در حد خرید یک کارت شارژ :)
هر وقت که جواب سوال راگرفتم تصمیم گرفتم کمک کنم .از این به بعد شارژهاتون با من. ;)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی JavaScript

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی