جمعه ۱۰ فروردین ۱۴۰۳

Friday, March 29, 2024 GMT +3: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 مطالب بیشتر:
کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
دستورات شرطی (Conditional Statements) در جاوا اسکریپت (JavaScript)
متدهای کار با آرایه در جاوا اسکریپت (JavaScript)
کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
دیدگاه
more ۵۷ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
nili ball
۲۳:۲۳ ۱۳۹۷/۰۱/۲۴
سلام وقت بخیر .. واقعا تشکر میکنم از مطالبتون خیلی عالی بود . ممکنه راهنماییم کنید من یه عکس دارم می خوام روش کلیک شد بره به یه صفحه دیگه که لینکشو دارم مثلا روی عکس لوگو گوگل کلیک شد بره صفحه مربوط به گوگلو یاز کنه یعنی روش کلیک شد وارد https://www.google.com بشه ممکه راهنماییم کنید؟
برای این منظور باید به آدرس صفحه مد نظر با تگ a در HTML لینک ایجاد کنید به فرض:
<a href="https://google.com" title="Google" target="_self">Google</a>
برای نمایش لینک در صفحه جدید به جای self مقدار blank را قرار دهید.
محمود
۰۹:۰۰ ۱۳۹۷/۰۵/۲۱
سلام ، با آرزوی سلامتی برا شما و سایت خوبتان.
میخواهم تابعی طراحی کنم که وقتی روی یکی از خانه های جدول کلیک شد تابع فراخوانی شود. البته در خانه های جدول رویداد onclick را ننویسم . مثل خواسته دوستمان مصطفی که خاسته بود تابعی طراحی کنید که اگه کاربر هر کجای صفحه کلیک کرد تابع فراخوانی بشه،
به مصطفی اینچنین پاسخ داده بودید .
<script type="text/javascript">
window.onclick = function(){
alert('ok!');
}
</script>
حال اگر به جای window من کد زیر را قرار می دهم جواب نمی دهد.
document.getElementById("ftrow").onclick = function(){
alert('ok!');
}
لطفن راهنمایی کنید.
احتمالا باید تابع را بعد از کدهای جدول در صفحه درج کنید (نه قبل از آن)، علت این است که بر اساس HTML DOM عناصر صفحه از بالا به پائین بارگذاری می شوند و زمانی که به یک عنصر ارجاع می دهید باید از قبل بارگذاری شده و در دسترس باشد، در غیر اینصورت خطای Element Undefined در مفسر جاوا اسکریپت رخ می دهد.
admin
۱۹:۰۲ ۱۳۹۷/۰۹/۳۰
سلام خدمت مدیر گروه محترم
برای تغییر رنگ خودکار تصویر پس زمینه در زمانهای مختلف مثلا شب تم شب و روز تم روز ظاهر شود از چه دستوری باید استفاده کنیم
در نمونه کد زیر تغییر رنگ پس زمینه با توجه به زمان شب یا روز بودن برای بلاک با آی دی header انجام شده است که از همین الگو می توانید برای موارد مشابه استفاده کنید:
<style>
#header {
height: 200px;
width: 100%;
border: 1px solid #B5B5B5;
}
.day {
background: #35AAFF;
}
.night {
background: #F7272A;
}
</style>
<div id="header"></div>
<script>
function smartTemplate(){
var daynight = document.querySelector('#header');
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();

if(hours < 6 || hours >= 18) {
//console.log('night');
daynight.classList.remove('day');
daynight.classList.add('night');
}

if(hours >= 6 && hours < 18) {
//console.log('day');
daynight.classList.remove('night');
daynight.classList.add('day');
}
}

//call function
smartTemplate();
</script>
ansari
۰۹:۳۰ ۱۳۹۸/۰۷/۱۵
سلام وقتتون بخیر من می خوام وقتی که از تابع alert استفاده می کنم title باکس رو عوض کنم یعنی this page says نیاد مثلا مثل شما که نوشتید webgoo.ir says بیاد باید چیکار کنم خیلی گشتم چیزی پیدا نکردم
ممنون میشم کمکم کنید
این متن به صورت خودکار توسط مرورگر (گوگل کروم) اضافه می شود و متاسفانه امکان تغییر آن وجود ندارد، در صورتی که در سایت آنلاین پنجره را نمایش دهید آدرس سایت در عبارت جایگزین می شود، اگر نیاز مبرم به نمایش متن سفارشی دارید باید پنجره اختصاصی مشابه طراحی کنید که نیازمند کدنویسی HTML + CSS + JavaScript است.
mahdi
۲۰:۲۸ ۱۳۹۹/۰۱/۰۱
سلام استاد ، یه سوالی داشتم ، من باید دونه دونه ایونت ها رو یاد بگیرم ؟ چون خیلیاشون رو دیدم که اصلا الکی هستن یا این لیستی که گذاشتین کافیه ؟... بعد من اگر بخوام جاوااسکریپت رو بصورت حرفه ای یاد بگیرم رو چه مباحثیش تاکید کنم و از چه مباحثیش بگذرم که اصلا اهمیتی ندارن ؟ چون من یه عادت بد یا خوب دارم اینکه آموزش یه چیزیو شروع میکنم خودمو حبس میکنم تا زیرو بمشو یاد بگیرم ... آموزش کاملی هم که وجود نداره مثلا برا یه مبحثی که شاید یه معلم توی ده دقیقه کامل آموزشش میده ، من باید اول متوجه بشم که یه همچین مبحثی هست بعد مثلا یه روز زمان بزارم که همون مبحث ده دقیقه ای رو یاد بگیرم ، ممنون میشم راهنماییم کنی
در مباحث برنامه نویسی و به طور خاص برنامه نویسی وب لزومی ندارد تمام ریز متدها و رویدادها را مورد به مورد بررسی کنیم چون عملا چنین کاری به دلیل گستردگی آیتم ها نه نیاز است و نه ممکن، مهم این است کلیت یک مبحث و نکات کلیدی آن را یاد بگیریم به طور مثال نحوه فراخوانی و بکارگیری رویدادها، هدف از به کار بردن آنها، طیف های متنوع رویدادها و در نهایت کار با چند نمونه رویداد و تست در مرورگر، همین قدر برای سطح مقدماتی کافی است، در هنگام نوشتن پروژه ها و برنامه ها ممکن است نیاز به تمرکز بیشتر روی رویداد خاصی باشد که در آن مرحله می توانیم و باید وقت بیشتری روی آن رویداد خاص صرف کنیم، این حالت در اغلب مباحث به همین شکل است و با نوشتن برنامه های کوچک و ساده به مرور متوجه می شوید که خیلی از مباحث و تجربه ها حین کار کسب می شوند.
mahdi
۱۰:۴۱ ۱۳۹۹/۰۱/۰۴
سلام استاد عزیز ، Bubble یا حباب دقیقا یعنی چی ؟ یعنی گسترده شدن رویداد یک عنصر تا عنصر فرزندش؟
این مبحث به ترتیب اجرا و اعمال رویدادها در HTML DOM یا همان سورس صفحه مربوط می شود، به زبان ساده وقتی چند عنصر به صورت والد و فرزند داریم:
<html>
<div>
<ul>
<li>
</li>
</ul>
</div>
</html>
در این نمونه ساختار اگر رویداد onclick را به تگ li و div نسبت داده باشیم با کلیک کاربر در محدوده li قاعدتا هم li و هم div باید رویداد onclick را اجرا یا به اصطلاح Handle کنند چون خود li درون div قرار گرفته و کلیک کردن علاوه بر li شامل div نیز می شود، اما مرورگر چطور تصمیم می گیرد رویداد کدام عنصر اول اجرا شود؟ اینجاست که بحث Event Bubbling و Capturing مطرح می شود، در حالت Bubbling مرورگر ابتدا عنصر اصلی که کلیک شده را بررسی و رویداد آن را اجرا می کند، سپس گام به گام تگ های والد بالاتر از عنصر اصلی را برای پیدا کردن رویداد متناظر با کلیک بررسی کرده تا به بالاترین تگ صفحه یعنی html برسد، اما در حالت Capturing این رویه برعکس اتفاق می افتد و مرورگر از تگ html رویدادها را بررسی و در نهایت به عنصر اصلی کلیک شده می رسد.
مرورگرهای جدید از هر دو حالت پشتیبانی می کنند اما حالت Bubbling شیوه پیش فرض است، برای تغییر حالت پیش فرض در هنگام استفاده از addEventListener می توانیم آرگیومنت سوم را به صورت true در نظر بگیریم (معمولا تغییر این موارد ضرورتی ندارد!)، همچنین برای جلوگیری از تداخل و اجرای ناخواسته رویدادها از stopPropagation استفاده می کنیم.
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
نکته: اینها نکات عمیق و پیشرفته جاوا اسکریپت هستند که بهتر است پس از تجربه نوشتن چند برنامه ساده تا متوسط به آنها نیم نگاهی داشته باشیم.
امید
۰۰:۱۰ ۱۳۹۹/۰۲/۱۷
با سلام و عرض ادب
فیلتری میخوام که تعداد جوابهای فیلترهای سایت tse بورس که با جاوا نوشته شده رو بگه مثلا
(pd1)=(tmax)
بگه چنتا جواب داره و در
=(cfield0)
قرار بدهد
چنتا برنامه اینترنت پیدا کردم ولی تو سایت وارد میکنم
آلارم class میده
تا آنجا که اطلاع داریم (در این زمینه فعالیتی نداریم!) راهنمای قسمت فیلترهای سایت بورس برای نمایش تعداد نتایج برگردانده شده دستور یا رویه خاصی ارائه نکرده است، اگر کلاس خاصی در دسترس دارید در صورت تمایل می توانید درج کنید تا امتحان کنیم، ممکن است ایرادی در Syntax یا پارامترها وجود داشته باشد.
Maryam
۰۲:۲۱ ۱۳۹۹/۰۲/۳۱
سلام .. من میخاستم کدی بنویسم که خروجی آن دکمه on .. of باشه که با زدن دکمه رنگ پس زمینه تغییر کند ممنون میشم کمکم کنین باتشگر
آموزش اختصاصی در این خصوص در سایت وجود دارد، لطفا عبارت "ساخت افکت رنگی با جاوا اسکریپت + وبگو" را در گوگل جستجو کنید.
شبنم
۱۷:۱۰ ۱۳۹۹/۰۷/۱۷
سلام وقتتون بخیر، ببخشید از کلمه event یا e دقیقا چه زمانی توی فانکشن استفاده میکنیم؟
اجرای توابع جاوا اسکریپت در صفحات وب متنی بر رویداد است، به طور مثال وقتی بر روی قسمتی از صفحه کلیک می کنیم یا زمانی که صفحه بارگذاری می شود اطلاعات این رویداد در مفسر جاوا اسکریپت در آبجکت Event نگهداری می شود، برای دسترسی به این آبجکت و اطلاعات زیرمجموعه آن از عبارت e که مخفف event است به عنوان آرگیومنت استفاده می کنیم، لذا زمانی باید از e در تابع استفاده کنیم که بخواهیم از اطلاعات آبجکت رویداد استفاده یا رفتار عادی مرورگر مبتنی بر رویدادها را تغییر دهیم، چند مثال:
- به دست آوردن شماره دکمه صفحه کلید کاربر:
<script>
function getKeyCode(e) {
var code = e.keyCode ? e.keyCode : e.charCode;
//console.log(code);
alert(code);
}
</script>
<input type="text" size="20" placeholder="کلیک و تایپ" onkeyup="getKeyCode(event);">
- غیرفعال کردن اسکرول مرورگر:
<style>
body {
height: 2000px;
}
</style>
<script>
/*
left: 37, up: 38, right: 39, down: 40,
spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
*/

var keys = {37: 1, 38: 1, 39: 1, 40: 1};

function preventDefault(e) {
e.preventDefault();
}

function preventDefaultForScrollKeys(e) {
if(keys[e.keyCode]) {
preventDefault(e);
return false;
}
}

//modern Chrome requires {passive: false} when adding event
var supportsPassive = false;
try {
window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
get: function() {supportsPassive = true;}
}));
} catch(e) {}

var wheel_option = supportsPassive ? {passive: false} : false;
var wheel_event = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';

//call this to Disable
function disableScroll() {
window.addEventListener('DOMMouseScroll', preventDefault, false); //older FF
window.addEventListener(wheel_event, preventDefault, wheel_option); //modern desktop
window.addEventListener('touchmove', preventDefault, wheel_option); //mobile
window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

//call this to Enable
function enableScroll() {
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.removeEventListener(wheel_event, preventDefault, wheel_option);
window.removeEventListener('touchmove', preventDefault, wheel_option);
window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}
</script>
<html>
<body>
<input type="button" value="اسکرول خاموش" onclick="disableScroll();">
<input type="button" value="اسکرول روشن" onclick="enableScroll();">
</body>
</html>
- بدست آوردن آی دی عنصر کلیک شده:
<script>
function getElmID(e){
e = e || window.event;
elm = e.target || e.srcElement;

alert(elm.id);
}
</script>
<input id="btn-1" type="button" value="کلیک" onclick="getElmID();">
<input id="btn-2" type="button" value="کلیک" onclick="getElmID();">
احسان عباسی
۱۹:۴۰ ۱۳۹۹/۰۷/۱۷
با سلام و تشکر از سایت خوبتون من یه کد تعریف کردم که در بورس ایران سهم مدنظرمو بیاره .. میخواستم ببینم امکانش هست دستوری رو اضافه کنم تا زمان آوردن اون سهم هم برای من نمایش داده بشه
سپاس
تا آنجا که اطلاع داریم بورس تهران پلتفرم خاص خودش را دارد و مبتنی بر فیلترنویسی است، متاسفانه در خصوص فیلترنویسی و موارد مشابه فعالیتی نداریم.
ar
۱۴:۵۵ ۱۳۹۹/۰۸/۲۰
سلام ممنون از سایت خوبتون
ببخشید من تازه دارم زبان برنامه نویسی جاوااسکریپت رو یاد میگیرم و لپتاپم لپتاپ نسبتا ضعیفی هست
من بعضی وقتا کدهایی که مینویسم اجرا نمیشه میخواستم بدونم مشکل از لپتاپ هست یا چیز دیگه ای ؟؟
مثلا توی همین addEventListener وقتی میخوام تابع رو بزارم توی این کد حتما باید () رو برای تابع بزارم تا اجرا بشه به این صورت :
addEventListener('click',function(
درصورتی که درکلیپ های آموزشی بدون گزاشتن () برای تابع دستور اجرا میشه.
یا مثلا وقتی از دستور removeEventListener استفاده میکنه اصلا دستور اجرا نمیشه من میگم اون دستوری که تو addEventListener دادم رو حذف کنم ولی دستور بازم اجرا میشه از detachEvent , attachEvent هم استفاده کردم مشکل برطرف نشد
دستورات اونجوری که تو ویدیوها نشون داده میشه اجرا نمیشه درصورتی که من همون کد رو مینویسم مثلا تو ویدیو به صورت alert وقتی روی صفحه نمایش کلیک میکنه پیام نشون داده میشه ولی من همون کد رو مینویسم ولی اجرا نمیشه (فقط یکبار وقتی صفحه نمایش رو رفرش میکنم اجرا میشه ولی وقتی روی صفحه نمایش کلیک میکنم اجرا نمیشه ولی تو آموزش وقتی کلیک میکنه هم alert باز میشه و پیام نشون داده میشه)
خواهش میکنم راهنماییم کنید خیلی گیج شدم
نمیدونم مشکل از لپتاپه یا چیز دیگه ای هست؟
کدنویسی رو همیشه تو brackets انجام میدم چون سبکه و هنگام کدنویسی هم کمک میکنه. از phpstorm و notepad++ هم استفاده میکنم فرقی نمیکنه مشکل برطرف نمیشه.
خیلی ممنون
قوی یا ضعیف بودن سخت افزار ارتباط خاصی به اجرای دستورات جاوا اسکریپت ندارد، همین که مرورگر بتواند صفحه وب را پردازش و بارگذاری کند کافی خواهد بود، سعی کنید Syntax دستورات را مطابق آموزش حاضر پیاده سازی نمائید و با زدن دکمه F12 در پنجره مرورگر قسمت Console خطاهای احتمالی را مشاهده و رفع کنید، برای اطمینان می توانید از پیش نمایش آنلاینی که در انتهای این آموزش درج شده استفاده کنید.
محسن
۱۵:۰۵ ۱۴۰۰/۰۱/۰۸
سلام ،
سوال من مربوط به پنل کارگزاری هاست ، وقتی اسم یک سهم (نماد) را در قسمت جست و جو سرچ میکنم ، وقتی چند تا نماد در چند صفحه مجزا سرچ میکنم نمادها میان ولی با تاخیر بروزرسانی میشن و نمیتونم عملا خرید و فروشی انجام بدم چون جا میمونم و باید دوباره خودم نماد رو سرچ کنم تا بیاد تغییرات قیمتی که روش اعمال شده. حالا میخوام با استفاده از کدنویسی ، کاری کنم که این نماد هر ۵ ثانیه یکبار بروزرسانی بشه و اسکرول صفحه بیاد بالا و از ابتدای صفحه نمایش داده بشه.
لطفا من رو راهنمایی کنید؟ آیا میشه کدنویسی کرد.
با توجه به توضیحات یا باید از iFrame استفاده کنیم یا اینکه پنل کارگزاری را با توابعی مانند file_get_contents و curl دریافت و رفرش ها را مدیریت کنیم، در کل بدون بررسی فنی ساختار و کدنویسی پنل کارگزاری نمی توان نظر خاصی داد، احتمال دارد دسترسی به صفحه در حالت فریم بلاک شده باشد و نتوانیم از این طریق کنترل رفرش را بدست بگیریم که در اینصورت کار سخت خواهد بود، در صورت تمایل برنامه تیم ویور را نصب و از طریق منوی تماس اطلاع دهید تا به صورت آنلاین امکان انجام چنین کاری بررسی شود.
erfan
۲۰:۳۳ ۱۴۰۰/۰۱/۲۱
سلام من واسه یه دکمه یه محتوایی تعریف کردم که وقتی کلیک شد محتوا رو نشون بده اما تو دوجاش موندم یک اینکه چیکار کنم با زدن دوباره دکمه اون محتوا مثل اول پنهان بشه؟ دو اینکه چیکار کنم که از بین اون 5 تا دکمه وقتی یکی زده میشه و بعد میخوای دکمه بعدیو بزنی دکمه قبلی بسته بشه؟
برای ایجاد دکمه های نمایش و مخفی سازی محتوا می توانید از الگوی نمونه کد زیر استفاده کنید:
<style>
.block {
display: none;
}
</style>
<div id="block-1" class="block">محتوای 1</div>
<div id="block-2" class="block">محتوای 2</div>
<div id="block-3" class="block">محتوای 3</div>
<button onclick="toggleShowHide('block-1', 3);">دکمه 1</button>
<button onclick="toggleShowHide('block-2', 3);">دکمه 2</button>
<button onclick="toggleShowHide('block-3', 3);">دکمه 3</button>
<script>
function toggleShowHide(id, total){
let active_block = document.getElementById(id);
let other_block;

//بلاک مربوط به دکمه کلیک شده
if(active_block.style.display != 'block'){
active_block.style.display = 'block';
} else {
active_block.style.display = 'none';
}

//سایر بلاک ها
for(let i = 1; i <= total; i++){
other_block = document.getElementById('block-' + i);

if(active_block != other_block){
other_block.style.display = 'none';
}
}
}
</script>
علیرضا حسینی
۰۱:۳۳ ۱۴۰۰/۰۳/۱۸
دمتون گرم خسته نباشید
خیلی عالی بود
محمد جواد
۲۲:۱۷ ۱۴۰۰/۰۵/۰۶
سلام. اگر من دکمه ای دارم و میخوام که وقتی روش کلیک شه فایل css رو فراخوانی کنه چی باید بنویسم میتونید راهنمایی کنید؟ با تشکر.
برای فراخوانی فایل CSS پس از کلیک بر روی دکمه می توانید از نمونه کد زیر استفاده کنید:
<input type="button" value="کلیک" onclick="loadCSSFile();">
<script>
function loadCSSFile(){
var check_id = 'css-id';
if (!document.getElementById(check_id)){
var head_tag = document.getElementsByTagName('HEAD')[0];
var css_link = document.createElement('link');
css_link.id = check_id;
css_link.rel = 'stylesheet';
css_link.type = 'text/css';
css_link.href = 'http://example.com/style/style.css';
css_link.media = 'all';
head_tag.appendChild(css_link);
}
}
</script>
تگ head باید در صفحه باشد و همچنین آدرس فایل CSS را در نمونه کد جایگزین پارامتر href کنید.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
1 × 5
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
سید صالح
با سلام و خسته نباشید من یک فرم ساده دارم که کاربر باید پر کنه چون سوال امنیتی و اینا نداره ربات ها همه...
۱۴۰۳/۰۱/۰۷

فرهادی
با تشکر از شما یه سوال دیگه هم دارم توی تعدادی از سایتهای فروشگاهی صفحات سایت مپ به جای لینک صفحات حاوی لینکهایی هستند...
۱۴۰۳/۰۱/۰۶

فرهادی
با سلام و درود سال نو رو بهتون تبریک میگم یه سوال من میخوام لینکهای داخل صفحه sitemap.xml سایتها رو دربیارم کدش رو هم...
۱۴۰۳/۰۱/۰۲

فرهادی
ببخشید می تونید با سایت خودتون یه الگو رو چک کنید؟ با روش اول و دوم چک کنید وقتی الگو توی دیتابیس باشه مطلقا هیچی...
۱۴۰۲/۱۲/۲۱

فرهادی
با تشکر از شما جدول دیتابیس رو نگاه کردم و دقیقا به شیوه ای که نوشتن ذخیره شده و با htmlentities هم الگویی که...
۱۴۰۲/۱۲/۲۱

فرهادی
با سلام من اومدم توی دیتابیس من می خوام به شیوه اول کار کنه چون الگوها رو میخوام از توی پنل مدیریت توی دیتابیس...
۱۴۰۲/۱۲/۲۱

علی
سلام وقت بخیر یک سوال داشتم ممنون میشم راهنمایی کنید. بنده تاریخ را برای یک فرم به صورت datetime در پایگاه داده ذخیره کرده...
۱۴۰۲/۱۲/۲۰

اسماعیل سیدی
با تشکر از شما که جواب دادید یه سوال دیگه هم داشتم من مطالب سایتم زیاده توی مطالب لینکهایی هستند که توی آپلودسنترها آپلود...
۱۴۰۲/۱۲/۱۹

اسماعیل سیدی
ببخشید یه سوال دیگه هم دارم چطور می تونم وقتی یه مطلبی رو توی سایتم میذارم اگه اون مطلب حاوی لینک دانلود بود اون...
۱۴۰۲/۱۲/۱۴

اسماعیل سیدی
با سلام سایت نگاه کنید با نسخه دسکتاپ وقتی وسط رو به طرف پایین اسکرول می کنیم سمت چپ ثابته و فقط ستون...
۱۴۰۲/۱۲/۱۴

پـــرتو
ممنونم از جوابتون ، خب در مورد تلگرام حساب مثلا منکه 6 ماه استفاده نکردم حذف میشه یا اونا حسابشون رو استفاده نکردن و حذف...
۱۴۰۲/۱۲/۰۹

پـــرتو
سلام خوبید؟ ببخشید مزاحم میشم یه سوال کامپیوتری داشتم اونم اینکه این خطای dll یعنی چی و چطوری رفع میشه ؟ بیشتر توی نرم افزارها...
۱۴۰۲/۱۲/۰۵

سعید
با تشکر از شما دوست عزیز درست شد. دست شما درد نکنه یه سوال دیگه هم دارم چطور میشه توی استایل تصاویر رو فیت...
۱۴۰۲/۱۲/۰۳

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

سعید
با تشکر از شما خیلی خوب بود. فقط یه مشکلی داره، اگه لینک دانلود داخل عکس باشه کار نمی کنه و بازم لینک رو...
۱۴۰۲/۱۲/۰۲

سعید
با سلام و خسته نباشید من یه تابع با php میخوام که لینک های موجود در یک متن رو برام شناسایی کنه بعد به...
۱۴۰۲/۱۲/۰۱

روح اله
سلام چرا وبلاگ من در نتایج یاهو میاید ولی در نتایج گوگل نمیاید؟
۱۴۰۲/۱۱/۲۶

جواد
سلام خسته نباشید. من میخواستم تعداد نامحدودی عدد رو با هم جمع و تفریق کنم از کدوم حلقه باید در public function کلاسم استفاذه...
۱۴۰۲/۱۱/۲۵

محمد
سلام من گوشی نوکیای جاوا دارم که ساعت گویاش فعال شده و به صورت انگلیسی ساعت رو میگه میخواستم ببینم چطور میشه ساعت گویاش...
۱۴۰۲/۱۱/۲۳

پـــرتو
سلام خوبید؟ ممنون از راهنماییتون من ادرس وبلاگ رو براتون ایمیل کردم واقعا ممنونم مچکرم مرسی
۱۴۰۲/۱۱/۱۸

پـــرتو
سلام خسته نباشید ببخشید مزاحم میشم سوال قبلیم رو یادتونه که گفته بودم یه کد بدین که بشه عکس های داخل پست رو فیکس کنه...
۱۴۰۲/۱۱/۱۵
  در انتظار بررسی: ۲
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.