مشاوره رایگان طراحی سایت و قالب وردپرس
۰۵۱-۳۸۸۴۶۰۲۷ ۰۹۱۲۰۲۴۸۱۱۲ ۰۹۳۶۷۹۸۸۱۱۲

صفات در اسکریپت یا Event attribute در html

در جاوا اسکریپت یکسری صفات رویدادهای پنجره ای ( Window Event Attributes ) ،  رویداد های کیبورد Keyboard Events ،  صفات رویداد های فرمی Form Events ،  رویداد های موس Mouse Events وجود دارد که در این مطلب می خواهیم به برخی از آنها بپردازیم.

صفات رویدادهای پنجره ای Window Event Attributes

onafterprint : اسکریپت زمانی اجرا میشود که سند پرینت گرفته شود.
onbeforeprint : اسکریپت قبل از پرینت صفحه اجرا خواهد شد.
onerror : اسکریپت زمانی که خطایی رخ دهد اجرا خواهد شد.
onhaschange : کدهای اسکریپت با تغییر سند اجرا خواهند شد.
onload : باعث میشود تا زمانیکه صفحه بصورت کامل لود نشده است اسکریپت اجرا نشود.
onmessage : هنگام نمایش دادن یک پیغام باعث اجرای اسکریپت خواهد شد.
onoffline : اسکریپت در این رویداد زمانی اجرا میشود که سند صفحه وب در حال آفلاین شدن است.
ononline : در این رویداد اسکریپت زمانی اجرا میشود که صفحه وب آنلاین شود.
onpagehide : اسکریپت زمانی اجرا میشود که پنجره مخفی شود.
onpageshow : بر عکس رویداد قبل هنگامی که پنجره نمایش داده شود  اسکریپت اجرا میشود.
onpopstate : این رویداد زمانی اجرا میشود که پنجره های تاریخچه history تغییر داده شوند.
onredo : این رویداد زمانی اجرا میشود که یک عمل redo روی صفحه انجام شود.
onresize : اسکریپت های این رویداد زمانی اجرا میشوند که اندازه پنجره تغییر کند.
onundo : این رویداد زمانی اجرا میشود که یک عمل undo روی صفحه انجام شود.
onunload : هنگامی که یکی از صفحه های وب unload ویا پنجره مرور گر بسته شود.

میخواهیم یکی از رویداد های پنجره ای را تست کنیم و نتیجه آن را مشاهده کنیم مسلما اگر این مثال را به دقت آموزش ببینید رویداد های دیگر را نیز به خوبی میتوانید در صفحه فرم خود استفاده کنید.

در مثال زیر  کاربرد رویداد onresize  را می توانید مشاهده کنید.

<html>
<head>
<script>
function showMsg()
{
alert("اندازه پنجره شما تغییر کرد!");
}
</script>
</head>
<body onresize="showMsg()">
<p>اندازه پنجره مرورگر خود را تغییر دهید.</p>
</body>

 رویداد های کیبورد Keyboard Events

onkeydown : این رویداد زمانی اجرا میشود که دکمه ای از کیبورد پایین فشرده شود.
onkeypress : این رویداد نیز هنگامی که دکمه ای فشرده شود اجرا خواهد شد. نکته: این رویداد از رویداد قبلی زودتر اجرا خواهد شد.
onkeyup : و این رویداد نیز هنگامی که دکمه ای از کیبورد رها شود اجرا خواهد شد.

این رویداد ها همانطور که از عنوان صفحه پیداست مربوط به کیبورد میباشند.

مثالی کاربردی از onkeyup حتما در درک این رویداد ها کمک خواهد کرد.

<html>
<head>
<script>
function displayResult()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

<p>این تابع هنگامی که کاراکتری را وارد کنید به محض رها کردن دکمه کیبورد حرف انگلیسی وارد شده به حرف بزگ تبدیل میشود.</p>
نام خود را وارد کنید: <input type="text" id="fname" onkeyup="displayResult()">

</body>
</html>

 صفات رویداد های فرمی Form Events

onblur : اسکریپت ها هنگامی که عامل مورد نظر فوکوس را از دست بدهد اجرا میشود.
onchange : در زمانیکه مقدار عامل مورد نظر تغییر کند اسکریپت اجرا میشود.
onfocus : اسکریپت ها هنگامی که روی عامل مورد نظر فوکوس شود اجرا میشود.
onformchange : این رویداد زمانی اتفاق می افتد که فرم تغییر کند.
onforminput : این رویداد نیز هنگامی که کاربر مقداری را در یکی از عامل های درون فرم وارد کند اتفاق می افتد.
oninput : هنگامی که عامل از کاربر مقداری را دریافت کند اسکریپت اجرا خواهد شد.
oninvalid : اسکریپت هنگامی که مقدار اشتباه وارد شود اجرا خواهد شد.
onreset : این رویداد زمانی اجرا خواهد شد که دکمه reset در فرم کلیک شود. نکته این رویداد در html5 پشتیبانی نمیشود.
onselect : زمانی که متنی در عامل مورد نظر انتخاب شود اسکریپت اجرا خواهد شد.
onsubmit : در این رویداد هنگامی که دکمه submit در فرم کلیک شود اجرا خواهد شد.

رویداد های فرمی در صفحات وب کاربرد بسیار زیادی دارند به طوری که جذابیت و رفاه کاربر را در صفحه به طور چشمگیری افزایش می دهد.

در زیر مثالی از رویداد onfocus را میتوانید مشاهده کنید. سعی کنید این مثال را حتما در سیستم خود تست کنید. با درک این مثال حتما دیگر رویداد ها را به سادگی و بدون خطا میتوانید در صفحه وب خود به کار گیرید.

<html>
<head>
<script>
function setStyle(x)
{
document.getElementById(x).style.background="yellow";
}
</script>
</head>
<body>

<p>در تابعی که در این مثال نوشته شده است با گرفتن فوکوس یکی از فیلد های ورودی ، رنگ زمینه آن تغییر پیدا میکند.</p>
First name: <input type="text" id="fname" onfocus="setStyle(this.id)"><br>
Last name: <input type="text" id="lname" onfocus="setStyle(this.id)">

</body>

 رویداد های موس Mouse Events

onclick : این رویداد زمانی اجرا میشود که روی عامل مورد نظر کلیک شود.
ondblclick : این رویداد زمانی اجرا میشود که روی عامل مورد نظر دابل کلیک شود.
ondrag : این رویداد زمانی اجرا میشود که عامل مورد نظر درگ شود.
ondragend : این رویداد در پایان عملیات درگ  اجرا میشود.
ondragenter : این رویداد زمانی اجرا میشود که عامل مورد نظر در مقصد معتبری درگ شود.
ondragleave : این رویداد زمانی اجرا میشود که عامل مورد نظر توسط درگ از مکان معتبر خود خارج شود.
ondragover : این رویداد زمانی اجرا میشود که عامل درگ شده وارد منطقه معتبر شود.
ondragstart : این رویداد زمانی اجرا میشود که عملیات درگ شروع شود.
ondrop : این رویداد زمانی اجرا میشود که عامل درگ شده رها شود.
onmousedown : این رویداد زمانی اجرا میشود که یکی از دکمه های موس پایین فشرده شود.
onmousemove : این رویداد زمانی اجرا میشود که موس حرکت داده شود.
onmouseout : این رویداد زمانی اجرا میشود که اشاره گر موس از محدوده عامل مورد نظر خارج شود.
onmouseover : این رویداد زمانی اجرا میشود که اشاره گر موس وارد محدوده عامل مورد نظر شود.
onmouseup : این رویداد زمانی اجرا میشود که یکی از دکمه های موس رها شود.
onmousewheel : این رویداد زمانی اجرا میشود که دکمه چرخشی موس چرخش داده شود.
onscroll : این رویداد زمانی اجرا میشود که در نوار اسکرول عامل مورد نظر اسکرول شود.

رویداد های موس در صفحات وب از اهمیت خاصی برخوردارند به نحوی که هم در کارایی صفحه وب و هم در جذابیت و رفاه کاربر تاثیر بسزایی دارد.

مثال زیر کاربرد رویدادهای onmouseup و onmousedown را به خوبی بیان میکند.

<html>
<head>
<script>
function mouseDown()
{
document.getElementById("p1").style.color="red";
}

function mouseUp()
{
document.getElementById("p1").style.color="green";
}
</script>
</head>
<body>

<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">
روی متن کلیک کنید.</p>

</body>
</html>

 

اشتراک کذاری در :
سوالات متداول

توس وب تضمین میکند مطابق با مفاد قرارداد رسمی که درابتدا, متناسب با نیاز مشتری تنظیم شده عمل نماید (تحویل به موقع – پشتیبانی پس از تحویل – رعایت استاندارد های جهانی)

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

طراحی اختصاصی توسط تیم حرفه ای و بدون استفاده از قالب های آماده و با رعایت استانداردهای جهانی وب

تیم توس وب تلاش کرده تا تمامی موارد امنیتی که مربوط به کدنویسی قالب ها بوده را رعایت کند.

بله – پس از طراحی فایل های آموزشی به صورت متنی یا ویدئویی در اختیار شما قرار می گیرد.

خیر، کارکردن با سایت بسیار آسان است، زیرا پنل تنظیمات و مدیریت سایت کاملاً فارسی بوده و آموزش کامل آن در اختیار مشتری قرار می گیرد.

توس وب از بروزترین تکنولوژی های مورد استفاده در وب از قبیل PHP,HTML5,CSS3,Java Script,Bootstrap استفاده می کند.

بله، قالب هایی که توسط توس وب طراحی می شوند منطبق با آخرین استانداردهای جهانی وب ( استاندارد کنسرسیوم جهانی وب = html css
استاندارد ECMA = استاندارد کدهای جاوا اسکریپت ) می باشد.

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

پاسخ این سوال را می توان در چند جمله اینگونه بیان کرد :

پشتیبانی حرفه ای – طراحی متناسب با سلیقه و نیازهای مشتری – حجم کم کدنویسی پائین و سرعت لود بالا

با توجه به نوع وبسایت و امکانات آن بین ۲۵ تا ۶۰ روز متغیر می باشد.

چرا به توس وب اعتماد کنیم ؟

توس وب یک سایت رسمی می باشد و همچنین دارای گواهی نامه های معتبر ( نماد اعتماد الکترونیک از مرکز توسعه و تجارت الکترونیک , نماد ساماندهی از وزارت ارشاد و درگاه پرداخت ایمن بانک ملت ) می باشد

نظرات برخی مشتریات درباره توس وب