امروز پنجشنبه ۱۴۰۰/۰۱/۲۶

2021/04/15 GMT +4:30

» رویدادها (Events) در جاوا اسکریپت (JavaScript)

javascript-event

از جمله ویژگی های ذاتی زبان برنامه نویسی جاوا اسکریپت (JavaScript) رویداد محور بودن آن است که امکان ایجاد قابلیت های تعاملی را در صفحات وب ممکن می کند، به طور مثال می توانیم تابعی تعریف کنیم که حاصل جمع نمرات آزمون های آنلاین را پس از کلیک کاربر (رویداد onclick) بر روی دکمه (button) در یک کادر نمایش دهد، یا به فرض زمانی که صفحه وب به صورت کامل بارگذاری شد (رویداد onload) مدت زمان باقیمانده تا رفرش بعدی را در خروجی چاپ کند، تعداد و نوع رویدادها در مفسر جاوا اسکریپت بسته به نیاز قابلیت های در نظر گرفته شده در صفحات وب بسیار متنوع است و چند شیوه مختلف برای به کار بردن (Handle) آنها وجود دارد، در ادامه این آموزش با معنی رویداد، انواع مختلف و نحوه استفاده از آنها در کدنویسی HTML و JavaScript به صورت مفصل آشنا خواهیم شد.

معنی رویداد (Event) در جاوا اسکریپت


به طور ساده رویداد (Event) در جاوا اسکریپت به معنی بروز یک اتفاق در صفحه وب (یا هر بستری که مفسر جاوا اسکریپت در آن اجرا می شود) است که می تواند عامل آن کاربر یا سیستم باشد، بعد از رخ دادن رویداد مفسر جاوا اسکریپت آن را شناسایی کرده و در صورتی که متناسب با آن Event کد خاصی نوشته شده باشد دستورات متناظر اجرا می شود، لذا همانطور که پیش تر در بحث توابع (Functions) دیدیم رویدادها در واقع حکم استارت را برای موتور توابع بازی می کنند و معمولا هر تابع متصل به یک یا چند رویداد است.
در مثال زیر نحوه فراخوانی تابع با رویداد onclick (زمانی که کاربر روی یک عنصر کلیک می کند) را بررسی می کنیم:
<script>
function setAlert(){
    alert("این پیام با کلیک کاربر بر روی دکمه نمایش داده می شود");
}
</script>
<input type="button" name="button" value="کلیک" onclick="setAlert();">
زمانی که کاربر بر روی دکمه input کلیک می کند قسمت مربوط به onclick اجرا و تابع فرضی setAlert فراخوانی می شود، onclick یکی از رویدادهای پرکاربرد جاوا اسکریپت در صفحات وب است.

شیوه های به کار بردن (Handle) رویدادها در صفحات وب


 برای استفاده از رویدادها یا به اصطلاح Handle (به کار بردن) آنها در صفحات وب و نسبت دادن رویداد به یک عنصر در مجموع سه راه وجود دارد:
- استفاده از رویداد با Event Handler خطی (Inline) و ترکیب با کدنویسی HTML
- استفاده از رویداد با Event Handler مستقل و خارج از کدنویسی HTML
- استفاده از رویداد با addEventListener و removeEventListener
در ادامه آموزش به صورت موردی در خصوص هر کدام از این شیوه ها توضیح خواهیم داد.

استفاده از رویداد با Event Handler خطی (Inline)


ساده ترین شیوه به کاربردن رویداد در صفحات وب استفاده از آنها به صورت خطی (Inline) در ترکیب با تگ های HTML مانند input، div، button و... است، به طور مثال:
<script>
function showMessage(msg){
    alert(msg);
}
</script>
<button type="button" onclick="showMessage('پیامی که با کلیک نمایش داده می شود');">Click</button>
با کلیک بر روی دکمه button رویداد خطی onclick اتفاق می افتد و تابع showMessage اجرا و در نهایت پیام زیر به صورت پنجره Alert نمایش داده خواهد شد:
پیامی که با کلیک نمایش داده می شود
نکته 1: اختصاص رویداد به شیوه خطی به جهت ترکیب بخش اسکریپت نویسی با کدنویسی HTML از نظر دانش سئو (SEO یا بهینه سازی صفحات وب برای موتورهای جستجو) توصیه نمی شود، بهتر است این شیوه را صرفا به عنوان روشی به اصطلاح دم دستی مد نظر داشته باشیم و برای صفحاتی که از نظر سئو باید بهینه باشند از روش هایی که در ادامه بررسی خواهیم کرد استفاده کنیم (توصیه می شود بخش اسکریپت ها را از بخش HTML جدا کنیم).
نکته 2: در اصطلاح برنامه نویسی به اتفاق افتادن رویداد Fire یا Trigger و به فراخوانی تابع Call می گویند.

استفاده از رویداد با Event Handler مستقل


روش دیگر به کار بردن رویداد استفاده از آن به صورت مستقل (در تگ script یا فایل JS) و خارج از کدنویسی HTML است، در این شیوه می توانیم به یک عنصر در صفحات وب یک یا چند رویداد مجزا با تنظیمات سفارشی نسبت دهیم، به طور مثال:
<button id="click-button" type="button">Click</button>
<script>
function showMessage(msg){
    alert(msg);
}
var elm = document.getElementById('click-button');
elm.onclick = function(){
    showMessage('پیامی که با کلیک نمایش داده می شود');
}
</script>
همان طور که مشخص است در این شیوه از به کار بردن رویدادها ابتدا باید عنصر مورد نظر در صفحه انتخاب شود (در اینجا متغیر elm با توجه به ID تعیین شده در متد getElementById دکمه button را انتخاب و تبدیل به آبجکت می کند)، سپس با نمونه Syntax زیر رویداد onclick را برای این آبجکت Handle می کنیم (یعنی با اجرای onclick در عنصر elm کدهای تنظیم شده در داخل کاراکترهای {} پردازش می شوند):
elm.onclick = function(){}
عنصر مورد نظر در صفحات وب می تواند بسته به نیاز برنامه متفاوت باشد، به طور مثال آبجکت window یا آبجکت تگ های HTML، مثال:
<script>
function showMessage(msg){
    alert(msg);
}
window.onload = function (){
    var elm = document.getElementById('click-button');
    elm.onclick = function(){
        showMessage('پیامی که با کلیک نمایش داده می شود');
    }
}
</script>
<button id="click-button" type="button">Click</button>
در این نمونه کد ما رویداد onload را برای آبجکت window (پنجره جاری) تنظیم کرده ایم، در نمونه کد اول اگر تگ script را قبل از تگ button درج کنیم خطای زیر را دریافت خواهیم کرد (مشاهده خطاها با زدن کلید F12 در مرورگر، قسمت Console):
Uncaught TypeError: elm is null
دلیل دریافت این خطا مشخص است، ما عنصری را در صفحه وب انتخاب کرده ایم که هنوز پردازش نشده است! کدنویسی صفحات وب به ترتیب از بالا به پائین پردازش می شود و مشخص است انتخاب تگی که هنوز در دسترس نیست برنامه را با خطا مواجه می کند، برای رفع این خطا می توانیم پردازش قسمتی از کدهای جاوا اسکریپت را به بعد از بارگذاری کامل صفحه موکول کنیم و این کار با اختصاص رویداد onload به آبجکت window (عنصر صفحه جاری) قابل انجام است، به این صورت حتی اگر کدها را قبل از تگ مورد نظر درج کنیم مشکلی به وجود نمی آید و بعد از بارگذاری کامل صفحه این قسمت از دستورات پردازش می شود.

استفاده از رویداد با addEventListener و removeEventListener


در سال 2000 میلادی کنسرسیوم جهانی وب W3C شیوه دیگری برای اختصاص رویداد جاوا اسکریپتی به عناصر مختلف صفحات وب معرفی کرد که در حال حاضر به استانداردی فراگیر تبدیل شده است:
https://www.w3.org/TR/DOM-Level-2-Events/#events-Events-registration
این شیوه استفاده از متدی تحت عنوان addEventListener است که در مکانیزم آن مفسر جاوا اسکریپتی مرورگر گوش به زنگ اجرای رویداد بر روی عنصر مورد نظر بوده و در صورت اتفاق تابع متناظر پردازش می شود، شیوه کار addEventListener شباهت زیادی به Event Handler مستقل دارد منتها Syntax آنها متفاوت و قابلیت های addEventListener بیشتر است که در ادامه بررسی خواهیم کرد.
نکته: addEventListener در نسخه های قدیمی (8 و ماقبل) مرورگر اینترنت اکسپلورر پشتیبانی نمی شود و در صورتی که کاربرانی با این نسخه از مرورگر اکپسلورر مد نظر برنامه ما باشند باید از attachEvent استفاده کنیم.
برای استفاده از addEventListener باید از Syntax آن پیروی کنیم:
object.addEventListener('event', function, options);
پارامتر object همان عنصری است که در صفحه انتخاب کرده ایم، قسمت Event نام رویداد (به فرض click) و Function تابعی است که به رویداد متصل و قسمت Options تنظیمات اضافه و اختیاری متد است که در صورت نیاز اعمال می شود (مقدار پارامتر سوم را فعلا false در نظر گرفته و توضیح تکمیلی در این خصوص را به آموزش های پیشرفته جاوا اسکریپت موکول می کنیم)، در نمونه کد زیر در صورت کلیک بر روی بلاک رنگی با آی دی فرضی clickable تابع showText اجرا می شود:
<style>
#clickable{
    width: 100px;
    height: 100px;
    background: #FC9;
}
</style>
<div id="clickable"></div>
<script>
var block = document.getElementById("clickable");

function showText(){
    alert("بر روی بلاک رنگی کلیک شد");
}

if(block.addEventListener){
    //تمام مرورگرها به جزء اینترنت اکسپلورر 8 و ماقبل
    block.addEventListener("click", showText, false);
} else{
    //اینترنت اکسپلورر 8 و ماقبل
    block.attachEvent("onclick", showText);
}
</script>
در انتهای این صفحه می توانیم به صورت آنلاین مثال هایی از کاربرد addEventListener را بررسی کنیم.
همان طور که مشخص است بین دو روش addEventListener و Event Handler مستقل شباهت زیادی وجود دارد، اما به چند دلیل استفاده از روش addEventListener می تواند بهینه تر باشد:
- وجود امکان حذف رویداد اختصاص داده شده به یک عنصر با removeEventListener (detachEvent برای IE8 و ماقبل)، مثال:
<style>
#clickable{
    width: 100px;
    height: 100px;
    background: #FC9;
}
</style>
<div id="clickable"></div>
<script>
var block = document.getElementById("clickable");

function showText(){
    alert("این پیام فقط یک بار نمایش داده می شود");
    if(block.removeEventListener){
        block.removeEventListener("click", showText, false);
    } else{
        block.detachEvent("onclick", showText);
    }
}

if(block.addEventListener){
    block.addEventListener("click", showText, false);
} else{
    block.attachEvent("onclick", showText);
}
</script>
به این صورت با یک بار اجرای تابع showText رویدادهای اختصاص داده شد قبلی حذف می شوند.
- وجود امکان اختصاص بیش از یک تابع در رویداد مد نظر، به طور مثال:
<button id="click-button" type="button">Click</button>
<script>
var button = document.getElementById("click-button");

function showText1(){
    alert("تابع اول اجرا شد");
}

function showText2(){
    alert("تابع دوم اجرا شد");
}

if(button.addEventListener){
    button.addEventListener("click", showText1, false);
    button.addEventListener("click", showText2, false);
} else{
    button.attachEvent("onclick", showText1);
    button.attachEvent("onclick", showText2);
}
</script>
به این صورت می توانیم دو یا چند Handler مختلف را به عنصر مورد نظرمان با Listener مشابه نسبت دهیم.

رویدادهای پرکاربرد جاوا اسکریپت در صفحات وب


با توجه به طیف وسیع دستگاه هایی که جاوا اسکریپت در آنها اجرا می شود و همچنین وجود قابلیت تنظیم خاصیت های CSS با JavaScript رویدادهای این زبان فراوانی و تنوع زیادی دارند و بررسی کامل آنها زمانبر و شاید خارج از حوصله این مبحث است، از این رو جهت آشنایی بیشتر در لینک زیر لیستی از رویدادهایی که بیشترین کاربرد را در کدنویسی صفحات وب دارند به همراه مثال های آنلاین تهیه کرده ایم که به نظر برای آشنایی اولیه و استفاده های متداول کافی خواهد بود:
لیست رویدادهای پرکاربرد جاوا اسکریپت در صفحات وب
نکته: برخی رویدادهای جاوا اسکریپتی در مرورگرها و نسخه های مختلف آنها به یک میزان و به یک شکل پشتیبانی نمی شوند، لذا در به کار بردن آنها (بخصوص اگر کاربران هدف برنامه ما از نسخه های قدیمی مرورگرها استفاده می کنند) باید به سطح پشتیبانی رویداد دقت و حتی المقدور در چند مرورگر مختلف آن را تست و بررسی کنیم.

مثال و پیش نمایش آنلاین


برای آشنایی بیشتر با مبحث رویدادها آموزش را با چند مثال به پایان می بریم، جهت تست و بررسی می توانیم از کد و پیش نمایش آنلاین زیر استفاده کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تست و بررسی رویدادها در جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
#black-block {
    width: 100px;
    height: 100px;
    background-color: #333;
    display: block;
    margin: 4px;
}
#show-text {
    height: 20px;
}
</style>
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است!<br></noscript>
<script>
function hello(){
    alert("به آموزش جاوا اسکریپت خوش آمدید");
}

function add(){
        document.getElementById("show-text").innerHTML = "این متن با اجرا شدن رویداد onmouseover در بلاک div با آی دی فرضی show-text چاپ می شود، برای بررسی رویداد onmouseout نشانه گر را از محدوده این دکمه خارج کنید.";
}

function clean(){
        document.getElementById("show-text").innerHTML = '';
}
</script>
مثال برای رویداد onclick:
<br><br>
<input type="button" value="کلیک کنید" onclick="hello();">
<hr>
مثال برای رویداد onclick با شیوه addEventListener:
<br><br>
بر روی بلاک زیر کلیک کنید.
<div id="black-block"></div>
<script>
var myblock = document.getElementById("black-block");

function showText(){
    alert("بر روی بلاک مشکی کلیک شد");
}

if(myblock.addEventListener){
    //تمام مرورگرها به جزء اینترنت اکسپلورر نسخه 8 و ماقبل
    myblock.addEventListener("click", showText, false);
} else {
    //اینترنت اکسپلورر نسخه 8 و ماقبل
    myblock.attachEvent("onclick", showText);
}
</script>
<hr>
مثال برای رویدادهای onmouseover و onmouseout:
<br><br>
<input type="button" value="ماوس را بر روی این دکمه بیاورید" onmouseover="add();" onmouseout="clean();">
<div id="show-text"></div>
<hr>
مثال برای رویدادهای onfocus و onblur:
<br><br>
<input type="text" value="در این فیلد کلیک کنید..." onfocus="myFocusFunc(this);" onblur="myBlurFunc(this);">
<script>
function myFocusFunc(element){
    if(element.value == element.defaultValue){
        element.value = '';
    }
}

function myBlurFunc(element){
    if(element.value == ''){
        element.value = element.defaultValue;
    }  
}
</script>
<hr>
مثال برای رویدادهای onkeydown و onkeyup:
<br><br>
<input type="text" id="first" placeholder="اینجا تایپ کنید..." onkeydown="myKeydownFunc(this);" onkeyup="myKeyupFunc(this);">
<script>
function myKeydownFunc(element){
    element.style.color = "red";  
}

function myKeyupFunc(element){
    element.style.color = "blue";    
}
</script>
</body>
</html>
پیش نمایش آنلاین
دسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» دستور switch و case در جاوا اسکریپت (JavaScript)
» شروعی بر برنامه نویسی جاوا اسکریپت (JavaScript)
» آرایه (Array) در جاوا اسکریپت (JavaScript)
» کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
» کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
commentنظرات (۴۳ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: محسن
۱۵:۱۹ ۱۳۹۳/۰۳/۳۱
با عرض سلام و خسته نیاشید اگه امکان داره کد ویرایش کردن در جاوا اسکریپت رو برام بذارین
پاسخ: 
سوالتان مبهم است! ویرایش چه چیزی؟!
نویسنده: مصطفی ر
۲۳:۳۹ ۱۳۹۳/۰۸/۲۸
سلام. یه سوال داشتم لطفا جواب بدین. مرسی. چطوری میتونم توی یک آرایه دو بعدی کاری کنم که بعد از درگ و دراپ کردن، آرایه عوض بشه. مثلا مثل شطرنج که وقتی یه مهره رو درگ و دراپ میکنیم و مهره دیگه حذف میشه کلا آرایه صفحه (نحوه چینش مهره ها) تغییر میکنه. خواهشا کمک کنید. مرسی
پاسخ: 
در جاوا اسکریپت به طور مستقل رویدادی برای درگ و دراپ وجود ندارد، برای انجام این کار به مجموعه ای از دستورات نسبتا پیچیده نیاز است، به این معنی که از زمانی که به فرض کاربر روی یک عنصر کلیک می کند تا زمانی که ماوس را رها کند، جزء رویداد درگ و دراپ است. حال تغییر عناصر آرایه و... می تواند در هر مرحله از این کار تعریف شود که این بستگی به نیاز و هدف شما دارد (تنظیم آرایه ها مسئله جداگانه ای است که باید به آموزش های مربوط به آن مراجعه کنید)، متاسفانه این مبحث طوری نیست که به سادگی بتوان در این قسمت آن را توضیح داد، نگاهی به نمونه آموزش زیر به درک مسئله کمک خواهد کرد:
http://www.webreference.com/programming/javascript/mk/column2/index.html
نکته: ایجاد و مدیریت این نوع جلوه ها جزء مهارتهای حرفه ای در جاوا اسکریپت محسوب می شود، بدین معنی که تنها با داشتن دانش و تجربه اولیه به میزان کافی، پرداختن به این سطح توصیه می شود.
نویسنده: عبدالهی
۱۳:۴۹ ۱۳۹۳/۰۹/۱۲
سلام خسته نباشید من سه عدد text box ایجاد کردم و چند button که اعداد هستند میخواهم وقتی داخل هر کدام از text box ها که هستم اعداد داخل همان text box نمایش داده شود. اگه ممکن راهنمایی کنید.
پاسخ: 
آیا اعداد به عنوان value برای button ها تنظیم شده اند یا حالت دیگری مد نظر است؟ لطفا سوالتان را دقیق تر مطرح کنید.
نویسنده: mohammad
۱۴:۰۹ ۱۳۹۳/۱۰/۰۵
سلام یه لینک دارم میخوام زمانی که کلیک شد
یک متنی داخل تکس باکس نمایش داده شود
پاسخ: 
نمونه کد:
<script>
function printText(id){
document.getElementById(id).value = 'این متن آزمایشی است';
}
</script>
<a href="#" onclick="printText('test');">print</a>
<textarea id="test" cols="50" rows="10">
</textarea>
نویسنده: مباحث 90
۱۸:۰۵ ۱۳۹۳/۱۲/۲۸
سلام. من تازه با این زبان اشنا شدم. واسه تمرینم کمک لازم دارم. مثال این هست:
حذف شد
از ما خواسته شدی مثال رو به نحوی تغییر بدیم که پس از گذشت 1 دقیقه این افکت بایستد. ممنون میشم بهم بگید چطور
پاسخ: 
می توانید متد clearInterval را داخل متد setTimeout استفاده کنید، مثال:
var i = setInterval(FunctionA ,1000);
setTimeout(function(){clearInterval(i);}, 60000);
نویسنده: سارا
۲۲:۱۴ ۱۳۹۴/۰۱/۱۸
سلام
از چه فیلترهایی برای تغییر تصاویر میتوان استفاده کرد؟ در جاوا اسکریپت
ممنون اگه جواب بدین
پاسخ: 
سوالتان کلی است! جاوا اسکریپت فیلتری از پیش تعریف شده برای تغییر تصاویر ندارد! لطفا هدفتان را دقیق تر توضیح دهید تا راهنمایی کنیم.
نویسنده: حسام آقاجانی
۲۱:۳۶ ۱۳۹۴/۰۴/۲۳
سلام من یک فرم ساختم و کد یک جعبه دانلود دارم من میخوام اطلاعات ورودی که داخل فیلد ها وارد میشه وارد کد جعبه دانلود بشه و اونو تکمیل کنه مـثلا یک فیلد هست به نام لینک دانلود و کد زیر:
<a href="www.yxz.com">دانلود فایل </a>
من میخوام لینک دانلودی که در فیلد وارد میشه جایگزین www.xyz.com بشه باید چی کار کنم ؟
پاسخ: 
هرچند دقیقا متوجه ابزاری که می خواهید طراحی کنید نشدیم، اما طبق برداشت ما قاعدتا باید مرحله به مرحله کدنویسی کنید، در تئوری باید دکمه ای بنویسید که با رویداد onclick مقادیر را از فیلد با متدهایی مانند
document.getElementById("id").value
دریافت و برای جایگزینی مقدار باید از متدهای مرتبط با عبارات با قاعده استفاده کنید، به فرض:
<script>
function replaceValue(id_1, id_2){
var rgx = /((www\.)[A-Z0-9-_]+(\.com))/i;
var txt_1 = document.getElementById(id_1).value;
var txt_2 = document.getElementById(id_2).value;
document.getElementById(id_2).value = txt_2.replace(rgx, txt_1);
return false;
}
</script>
<input type="text" id="id_1">
<input type="text" id="id_2" value="www.xyz.com">
<input type="button" value="click!" onclick="replaceValue('id_1', 'id_2');">
نویسنده: زهرا
۱۴:۱۳ ۱۳۹۴/۰۴/۲۶
سلام
من یه سری اسم و فامیلی و شماره در دیتابیسم ذخیره کردم و میخام وقتی اسم و فامیلی رو تو تکس باکس میدم با زدن رو دکمه جستجو شماره تلفن رد بده
کوئری هاشو بلدم
فقط نمی تونم دکمه رو فعال کنم
کمکم کنید لطفا
پاسخ: 
لطفا یک نمونه کد از منظورتان درج کنید تا امکان راهنمایی وجود داشته باشد!
نویسنده: سعید
۰۹:۲۳ ۱۳۹۴/۰۷/۰۲
سلام
یه سوال داشتم، شاید به موضوع این صفحه ربطی نداشته باشه ولی دیگه چیکارکنم، مطلبی با موضوع سوال من نبود
چیکار کنم که وقتی مثلا یه باکسی که با css ساختم رو با ماوس میگیرم و میکشم، اون باکس به دنبال ماوس بیاد و وقتی کلیک رو ول کردم، باکس همونجا بمونه مثل همین پنجره های ویندوز که از بالاشون میگیرم و مکانشون رو عوض میکنیم اگه این مشکلم رو حل کنین واقعا خیلی خیلی ممنون میشمم چون ۱ ماه هست که علاف این کد هستم
این یک ماه رو که داشتم تحقیق میکردم، فقط تونستم این کد رو بنویسم
<style>
#div {width: 500px;height: 300px;border: 1px solid black;}
#box{width: 100px;height: 100px;border: 1px solid black;position:absolute}
</style>
<div id='div'>
<div id="box" onmousedown='down()'></div>
</div>
<script>
var div = document.getElementById("div");
function down(){
div.addEventListener("mousemove",function(e){
var x = e.clientX;
var y = e.clientY;
var box = document.getElementById("box");
box.style.marginLeft=x;
box.style.marginTop=y;
});}
</script>
این کد اون چیزی رو که من میخوام نیست
ممنون
پاسخ: 
نمونه های آماده زیادی برای بلاک های "دراگ دراپ" در وب وجود دارد، به طور مثال:
<style>
#bg{
height:500px;
width:500;
background-color:#F4EB02;
}
#draggable{
width:100px;
height:50px;
background-color:#2674AC;
cursor:move;
}
</style>
<div id="bg">
<div id="draggable"></div>
</div>
<script>
window.onload = addListeners();
function addListeners(){
document.getElementById('draggable').addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
}
function mouseUp(){
window.removeEventListener('mousemove', divMove, true);
}
function mouseDown(e){
window.addEventListener('mousemove', divMove, true);
}
function divMove(e){
var div = document.getElementById('draggable');
div.style.position = 'absolute';
div.style.top = e.clientY + 'px';
div.style.left = e.clientX + 'px';
}
</script>
نمونه با jQuery:
http://jqueryui.com/draggable
نویسنده: سعید
۱۶:۵۷ ۱۳۹۴/۰۷/۱۰
سلامی دوباره
از اون کدی که دادین من خیلی چیزا یاد گرفتم، نوکرتم
این بار خودم یه اسکریپت نوشتم ولی کار نمی کنه
<style>
body{margin:0}
#div{width:100px;height:100px;border:1px solid black;position:absolute;}
</style>
<div id='div'></div>
<div id='t'></div>
<script>
var div = document.querySelector('#div'),
t = document.querySelector('#t');

div.addEventListener('mousedown',function(){div.setAttribute('move','true');});
document.addEventListener('mouseup',function(){div.setAttribute('move','false')});

document.addEventListener('mousemove',function(e){
if(div.getAttribute('move')=='true'){
var my = e.clientY,
mx = e.clientX,
dy = div.offsetTop,
dx = div.offsetLeft,
Y = my - dy,
X = mx - dx,
mY = my - Y,
mX = mx - X;
div.style.top = mY;
div.style.left = mX;
}
});
</script>
این کد تا متغییر X و Y درست کار میکنه ولی وقتی اومدم mY و mX رو نوشتم، عدد اونا (mY و mX) ثابت می مونه!!!!
مثل اینکه e.clientY و e.clientX از کار افتاده!!!
کمکم می کنید؟
پاسخ: 
سعی کنید
window.addEventListener
و همچنین
window.removeEventListener
را مطابق نمونه کد تعریف کنید، همچنین مقدارها باید با استفاده از "px" درج شوند (به نمونه کد دقت کنید!).
نویسنده: حسین
۱۳:۵۸ ۱۳۹۴/۰۸/۰۸
با سلام و تشکر از آموزشهای خوب شما
من می خواهم با استفاده از کدهای جاوا اسکریپت وقتی آیتمی خاص را از لیست دراپ داون در یک فرم انتخاب می کنم بخش آپلود فایل به طور کلی یا حذف و یا غیرفعال شود!
لطفا نحوه کار را آموزش دهید
با تشکر از سایت خوبتان
پاسخ: 
- باید ابتدا ببینید بخش آپلود به چه نحوی کدنویسی شده!
- در هنگام تغییر گزینه ها در منوی select option می توان با رویداد onchange یک تابع جاوا اسکریپتی را اجرا کرد.
- پس از اجرای تابع می توان id یک بلاک را که فرم آپلود در آن قرار دارد یا با استفاده از disabled فیلد را با استفاده از id آن مخفی یا غیر فعال کرد، مثال:
<script>
function disableFunc(id, value){
if(value == 2){
document.getElementById(id).disabled = true;
}
else{
document.getElementById(id).disabled = false;
alert('Please Select 2!');
}
}
</script>
<select onchange="disableFunc('test', this.value)">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input name="upload" id="test" type="file">
- استفاده از زبان های سمت کاربر شیوه مطمئنی برای اعتبارسنجی نیست (به اصطلاح قابل دور زدن هستند!) و باید در سمت سرور نیز پارامترهای ارسالی توسط زبان های برنامه نویسی مانند PHP بررسی شوند!
نویسنده: حسین
۱۰:۰۳ ۱۳۹۴/۰۸/۰۹
ممنون از لطفتون همینو میخواستم!
نویسنده: سلیمان
۲۰:۴۹ ۱۳۹۴/۱۱/۲۰
سلام.
منظور از کلمه this در کد زیر چیست.
onfocus="myFocus(this)"onblur="myblur(this)
آیا اشاره به این دکمه دارد؟
پاسخ: 
عبارت this در اینجا اشاره به تگ HTML ای دارد که رویداد در آن فراخوانی شده، به طور مثال تگ input (از نوع button)، به این صورت یک Object از تگ input را می توان به عنوان آرگیومنت به تابع myFocus ارسال کرد یا با this.id می توان id تگ را ارسال کرد و...
نویسنده: رضا
۲۰:۲۸ ۱۳۹۵/۰۷/۰۴
با سلام و عرض خسته نباشید
من میخوام وقتی کاربر یه جایی روی صفحه کلیک کرد بهش پیغام خطا بده مثلا.
یه کدی شبیه این :
widows.click
میشه کمک کنین.
پاسخ: 
​می توانید از متد زیر استفاده کنید:
document.onclick = function(){
// your code
//alert("clicked");
}​
نویسنده: محسن
۲۲:۴۰ ۱۳۹۵/۱۰/۲۱
با سلام و تشکر از آموزشهای خوبتون
یه تکست باکس دارم و میخوام به محض اینکه صفحه باز میشه cursor داخل آن فعال باشه و بشه بدون کلیک اولیه داخل آن اطلاعات (مثلا اسم) وارد کرد.
سپاسگزارم
پاسخ: 
می توانید یک تابع بنویسید و در آن از متد focus استفاده کنید، در نهایت تابع را به روش های مختلف مانند رویداد onload برای تگ body فراخوانی کنید، مثال:
<body onload="onloadInput('test');">
<script type="text/javascript">
function onloadInput(id){
document.getElementById(id).focus();
}
</script>
<input name="test" id="test" type="text">
</body>
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





2 × 1
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form شریفی
در:
سلام مجدد. من یه سوال خیلی تخصصی دارم. ممنون میشم پاسخ بدین. برای پروژه پایان نامه. دارم روی موتورهای جستجوگر تحقیق میکنم. فرض...
۱۴۰۰/۰۱/۲۵

form شریفی
در:
سلام استاد. من از متد file_get_contents استفاده می کنم برای دریافت اطلاعات از سایت های مختلف. بعضی وقتها سایت ها دیر لود میشه. آیا...
۱۴۰۰/۰۱/۲۵

form hh
در:
سلام خدمت شما بنده یه سوال داشتم تمام مراحل شما رو انجام دادم و نتیجه گرفتم و لازمه یه تشکرم بکنم. وبسایت من،...
۱۴۰۰/۰۱/۲۵

form erfan
در:
سلام من واسه یه دکمه یه محتوایی تعریف کردم که وقتی کلیک شد محتوا رو نشون بده اما تو دوجاش موندم یک اینکه چیکار کنم...
۱۴۰۰/۰۱/۲۱

form mahdi
در:
سلام استاد عزیز ، بازم معذرت میخوام سوالام زیاد شد ولی همشون در یک موضوع هستن ، تونستم که با این روش برای هر اسلایدر...
۱۴۰۰/۰۱/۱۸

form mahdi
در:
سلام استاد عزیز عذر میخوام بار سومه پیام میزارم ، مشکلش از ست اینترول بود که قطع نمیشد و با هم تداخل داشتند ولی بدون...
۱۴۰۰/۰۱/۱۸

form mahdi
در:
سلام وقت بخیر استاد عزیز ، یک تابع رو چطور میشه در جاوا اسکریپت اورراید کرد؟ که مثلا با هر فراخوانی مجدد ، قبلی ها...
۱۴۰۰/۰۱/۱۸

form متین
در:
سلام چجوری برای خود صفحه ادرس بسازیم که سایتی که رو ساختیم رو با دستگاه دیگه پیداش کنیم
۱۴۰۰/۰۱/۱۶

form امیرحسین برزویی
در:
من یک وبلاگ دارم و 9 سالمه من در وبلاگم مداحی می گذارم ولی وقتی قاب گذاشتم از این سایت من دیگه فیلم...
۱۴۰۰/۰۱/۱۶

form بنده خدا
در:
سلام خسته نباشین، خدا قوت. یه سوال دارم. چرا در بخش نظردهی وبلاگ به جای عنوان پست می نویسه مطلب مورد نظر یافت نشد؟!...
۱۴۰۰/۰۱/۱۵

form روح الله
در:
موقعی میخواهم وارد سایت ایران خودرو بشم پیام میده از Ip داخلی استفاده کنید دلیلش چیست
۱۴۰۰/۰۱/۱۴

form غریب
در:
تشکر از شما مشکلم حل شد امیدوارم موفق و پیروز باشید هر جا که هستید
۱۴۰۰/۰۱/۱۱

form غریب
در:
سلام مجدد ممنون و تشکر از کمکتون کد به خوبی کار میکنه اما همچنان من مشکلی دارم که حل نتونستم کنم...
۱۴۰۰/۰۱/۱۰

form غریب
در:
سلام مجدد این کدی که دادید خوب هست ولی من بد و ناقص توضیح دادم توجه کنید کد این هست تقریبا ممنون...
۱۴۰۰/۰۱/۱۰

form غریب
در:
سلام خسته نباشید من کدی دارم که میخوام داخل یه بخشیش نتیجه یه رویداد رو فراخوانی کنم و راهش و نمیدونم اگر میشه کمک...
۱۴۰۰/۰۱/۱۰

form محسن
در:
سلام ، سوال من مربوط به پنل کارگزاری هاست ، وقتی اسم یک سهم (نماد) را در قسمت جست و جو سرچ میکنم...
۱۴۰۰/۰۱/۰۸

form ترجمه
در:
باسلام همه صفحات من دارای دو url می باشد که یکی با حروف کوچک است و دیگری با حروف بزرگ چجوری این مشکل را...
۱۴۰۰/۰۱/۰۸

form سهیل ملکی
در:
سلام خسته نباشید ببخشید من میخوام از تابع navigator.online توی جاوا اسکریپت استفاده کنم تا باهاش بفهمم کاربر آنلاین هست یا نه و اگه بود...
۱۴۰۰/۰۱/۰۴

form Rabbiten
در:
سلام. من چند ماه است که دنبال کد استایل تصویر مثل تبلیغات بالای سایت شما هستم. اما هیچ جا پیدایش نمی کنم. لطف می...
۱۴۰۰/۰۱/۰۱

form mahdi
در:
سلام استاد عزیز سال نو رو تبریک میگم بهتون ، امیدوارم که خودتون و خانوادتون همیشه سالم و سلامت باشید و امسال پر از...
۱۳۹۹/۱۲/۳۰

form korosh abbasy
در:
سلام وقت بخیر ببخشید در مورد این مطلب سوالی پرسیدم شما در مورد output buffering توضیح دادید کد کار نمیکنه میخواستم ببینم نیازی هست من...
۱۳۹۹/۱۲/۲۹

form احمد
در:
سلام مجدد عذرخواهی میکنم یه موردی دیگه بود فراموش کردم در مورد سوال هدر بگم اینکه روی لوکال به هدر ارسال میشه ولی روی هاست...
۱۳۹۹/۱۲/۲۸

form احمد
در:
با سلام خسته نباشید ببخشید قبلا یه سری دستورات جی کوری رو از خودتون گرفتم وقتی فیلدهای فرمم تکمیل شده است توسط هدر بره به...
۱۳۹۹/۱۲/۲۸

form korosh abbasy
در:
سلام دم شما گرم این دستور برای خوندن فایل هم استفاده میشه؟ من میخوام دسترسی تعیین کنم که اگر یک متغییر true...
۱۳۹۹/۱۲/۲۷
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.