article

رویدادها (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>
پیش نمایش آنلاین
sectionدسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» دستورات شرطی (Conditional Statements) در جاوا اسکریپت (JavaScript)
» کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
» دستور switch و case در جاوا اسکریپت (JavaScript)
» آرایه (Array) در جاوا اسکریپت (JavaScript)
» شروعی بر برنامه نویسی جاوا اسکریپت (JavaScript)
commentنظرات (۴۱ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: فریبا
۰۱:۲۶ ۱۳۹۱/۰۴/۲۰
سلام
عالی بود.
ممکنه یه نرم افزار خوب برای کدنویسی جاوا اسکریپت معرفی کنید که اختصاصاً برای این زبان باشد؟
پاسخ: 
سلام
در برنامه های زیادی می توانید کد های جاوا اسکریپت را بنویسید، شاید ساده ترین و سبک ترین آن ++Notepad باشد، در آدرس:
http://notepad-plus-plus.org
برنامه aptana هم گزینه مناسبی برای کسانی است که با دنیای open source کد می نویسند، در آدرس:
http://www.aptana.com
افزونه مرورگر فایرفاکس به نام Firebug هم در خطا یابی کمک می کند:
https://addons.mozilla.org/en-US/firefox/extensions/web-development/
اگر می خواهید همه ی آنها را با هم داشته باشید حتما از Adobe Dreamweaver CS استفاده کنید.
نویسنده: farhad
۲۱:۵۰ ۱۳۹۱/۰۸/۰۷
سلام من می خواستم text field های برنامه خودم رو فیلتر کنم یعنی در قسمت ثبت نام در فیلد name فقط بتونم اسم وارد کنم اگر عدد وارد شد ارور بده و برعکس اگه میشه لطفا کدش رو بذارید ممنون
پاسخ: 
سلام
برای این کار می توانید از تابع preg_match_all استفاده کنید:
<?php
$string = 'test';
if (preg_match_all('/([0-9]+)/', $string)){
echo 'Error!';
}
else{
echo 'Ok!';
}
?>
این تابع با مقادیر regular expressions که برایش در نظر گرفته ایم، وجود عدد در مقادیر ارسالی را بررسی می کند، اگر عددی پیدا شود، قسمت خطا اجرا و در غیر این صورت ادامه برنامه اجرا می شود.
اگر هم می خواهید فقط عدد باشد و string نباشد، به صورت زیر از تابع استفاده کنید:
<?php
$string = '1234[';
if (preg_match_all('/([a-z,;[}$#.])/i', $string)){
echo 'Error!';
}
else{
echo 'Ok!';
}
?>
دقت کنید علامت هایی که بعد از a-z آمده اند هم شامل موارد غیر مجاز می شوند که می توانید بر حسب نیاز آنها را حذف یا موارد دیگری را اضافه کنید.
نویسنده: Dante
۱۴:۴۲ ۱۳۹۱/۱۰/۲۰
من یه کد دارم که توش مقادیر x و y رو که توی دیتابیس ذخیره کرده بازیابی می کنه ولی مشکل اینجاست که اگه 100 مقدار واسه x یا y داشته باشیم همشون توی یه صفحه نشون داده می شه و حجم صفحه زیاد می شه
من می خوام که این مقدار x وقتی از دیتابیس بازیابی می شه توی دراب داون ظاهر بشه که این رو با استفاده از تگ
<option></option> می شه حل کرد ولی یه مشکلی که هست با انتخاب مقدار x از منو , مقدار y ظاهر نمی شه!!! یکی از دوستان گفتند با استفاده از javascript event onclick مشکل حل می شه ولی من نتونستم راه حلش رو پیدا بکنم
می خواستم بپرسم که ایا می شه این کار رو کرد و اگر می شه چه طوری ؟
در اخر هم از اموزشتون ممنونم
پاسخ: 
سوالتان کمی مبهم است، منظورتان از اینکه مقدار y ظاهر نمی شود مشخص نیست؟ مقدار y در کجای کد استفاده شده است، به عنوان value برای option ها؟ اگر این طور است و می خواهید با انتخاب یک آیتم از منوی کشویی، مقادیر آن در صفحه نشان داده شود، می توانید از نمونه زیر استفاده کنید:
<script type="text/javascript">
function GetSelected(id,div){
var menu = document.getElementById(id);
if(menu.selectedIndex == -1){
return null;
}
else{
var option = menu.options[menu.selectedIndex].value;
document.getElementById(div).innerHTML = option;
}
}
</script>
<form action="#" method="post">
<select name="name" id="id" onchange="GetSelected(this.id, 'show');">
<option value="y-1">x-1</option>
<option value="y-2">x-2</option>
<option value="y-3">x-3</option>
<option value="y-4">x-4</option>
</select>
</form>
<div id="show"></div>
در غیر این صورت لطفا مشکلتان را با ارائه نمونه کد صفحه مطرح کنید تا دقیق تر راهنمایی کنیم.
نویسنده: Dante
۱۷:۲۱ ۱۳۹۱/۱۰/۲۱
خیلی خوب این کد من هست
//> p3
$result = $db->query("SELECT * FROM ".PREFIX."_school_p3 where num='$idnum'");
while($row = $db->get_row($result)){
$p3_list.="
تاريخ امتحان: {$row['date']}</br>تصوير کارنامه: </br><center><img src=\"http://bioexam.ir/engine/inc/upload/{$row['filename']}\"></center><hr>
";
}
;
خوب حالا من به این صورت می خوام که با انتخاب تاریخ امتحان از منو دراپ داون توی قسمت پایین عکسی که مربوط به اون تاریخ هست (تصویر کارنامه) نشون داده بشه
با تشکر
پاسخ: 
کدی که در پاسخ قبل برایتان نوشتیم دقیقا همین کار را انجام می دهد، کافی است در خروجی مقادیر date را به عنوان x ها و آدرس کامل تصاویر را به عنوان y ها تنظیم کنید، مثال:
<?php
//> p3
$result = $db->query("SELECT * FROM ".PREFIX."_school_p3 where num='$idnum'");
$p3_list .= '<form action="#" method="post">
<select name="name" id="id" onchange="GetSelected(this.id, \'show\');">';
while($row = $db->get_row($result)){
$p3_list.='<option value="<img src="http://bioexam.ir/engine/inc/upload/{'.$row['filename'].'}">">'.$row['date'].'</option>';
}
$p3_list .= '</select>
</form>
<center>
<div id="show"></div>
</center>';
;
?>
البته چون ما به کدهای شما دسترسی نداریم نتوانستیم کد را تست کنیم، ولی روش کار به همین صورت است.
نکته: تابع جاوا اسکریپت را هم باید در صفحه قرار داده باشید.
نویسنده: Dante
۰۰:۵۶ ۱۳۹۱/۱۰/۲۲
خوب اقا
یه قسمت که همون منوی کشویی هست درست شد ولی با انتخاب از منوی کشویی یا دراپ داون تصویر نشون داده نمی شه و در ضمن منظور از کد جاوا اسکریپت چیه ؟
کل کد بر اساس PHP هست و فقط برای این قسمت به پیشنهاد دوستان می خوام از جاوا استفاده بکنم
اگر این قسمت رو هم راهنمایی بفرمایید ممنون می شم
با تشکر
پاسخ: 
منظور از کد جاوا اسکریپت همان تکه کدی است که در پاسخ اول نوشتیم، باید کد را در قسمت head صفحه قرار دهید، هر کجا هم که مایل به نمایش تصاویر بودید، (یک بار) بلاک div با آی دی show را قرار دهید، اکنون با انتخاب یک مقدار از منو، رویداد onchange اجرا شده و تابع GetSelected فراخوانی می شود، این تابع (همان تابعی است که در کد جاوا اسکریپت وجود دارد) مقادیر value از option انتخاب شده را داخل بلاک show خروجی می دهد و چون این مقادیر کد html نمایش یک تصویر است، خروجی باید به صورت یک تصویر نشان داده شود.
نکته: در پاسخ قبل علامت های {} باید از قسمت متغیر filename حذف می شد (چون در آدرس تصاویر چنین علامتی نباید باشد) که از قلم افتاده بود، این علامت ها را حذف کنید، به این صورت باید باشد:
$p3_list.='<option value="<img src="http://bioexam.ir/engine/inc/upload/'.$row['filename'].'">">'.$row['date'].'</option>';
نویسنده: Dante
۱۲:۱۳ ۱۳۹۱/۱۰/۲۲
اگر منظور شما از کد این هست
<script type="text/javascript">
function GetSelected(id,div){
var menu = document.getElementById(id);
if(menu.selectedIndex == -1){
return null;
}
else{
var option = menu.options[menu.selectedIndex].value;
document.getElementById(div).innerHTML = option;
}
}
</script>
من این کد رو قرار دادم و تغییراتی که شما مد نظرتون بود رو انجام دادم ولی باز هم نشان داده نشد البته اون بلاک div و ای دی show را توی کدی که به من داده بودید , بود و احتیاجی به دوباره نوشتن نبود
ولی باز هم تصویر نشان داده نشد
پاسخ: 
همان طور که گفتیم چون به برنامه شما دسترسی نبود، امکان تست نهایی وجود نداشت، به هر صورت مشکل بررسی شد، چند ایراد مختصر وجود داشت، اما راه حل نهایی:
کد جاوا اسکریپت را زیر تگ title قرار دهید، کد قبلی را پاک کنید و کد زیر را قرار دهید:
<script type="text/javascript">
function GetSelected(id,div){
var menu = document.getElementById(id);
if(menu.selectedIndex == -1){
return null;
}
else{
var option = menu.options[menu.selectedIndex].value;
var image = '<img src="http://bioexam.ir/engine/inc/upload/'+option+'">';
document.getElementById(div).innerHTML = image;
}
}
</script>
قسمت مربوط به کدهای php را هم به شکل زیر تغییر دهید:
//> p3
$result = $db->query("SELECT * FROM ".PREFIX."_school_p3 where num='$idnum'");
$p3_list .= '<form action="#" method="post">
<select name="name" id="id" onchange="GetSelected(this.id, \'show\');">
<option value="">انتخاب کنید</option>';
while($row = $db->get_row($result)){
$p3_list.='<option value="'.$row['filename'].'">'.$row['date'].'</option>';
}
$p3_list .= '</select>
</form>
<center>
<div id="show"></div>
</center>';
;
اگر همه چیز درست باشد، برنامه شما باید عمل کند.
نکته 1: filename که برای مقادیر option value از دیتابیس فراخوانی می شود باید به صورت نام تصویر و پسوند آن باشد، به فرض image.jpg.
نکته 2: این مقادیر با متغیر image در کد جاوا اسکریپت ترکیب شده و در نهایت آدرس کامل تصویر را به صورت زیر می سازد:
http://bioexam.ir/engine/inc/upload/image.jpg
لذا تصویر مذکور باید در وب وجود داشته باشد (در آدرس فوق آپلود شده باشد).
نویسنده: Dante
۱۶:۱۴ ۱۳۹۱/۱۰/۲۲
دستتون درد نکنه به خوبی کار کرد
با تشکر
نویسنده: سعید
۰۱:۰۰ ۱۳۹۲/۰۴/۳۰
من تقریباً اکثر قسمت های سایت خوبتان را مطالعه کردم. سایت خیلی خوبیه. از شما بی نهایت سپاسگذارم.
سوالی که برایم پیش آمد این بود که چطور می شود یک عدد را با رویداد onclick جاوا اسکریپت در بانک اطلاعاتی mysql توسط php ذخیره کرد.
مثلاً دکمه ی like و از این قبیل من در طراحی پروژه ای که دارم می خواهم تعداد دانلود های یک مقاله را به دست آورم و به این نتیجه رسیدم که پس از کلیک روی لینک دانلود یک واحد به فیلدی که مروط به همان مقاله است باید اضافه شود. آیا می شود بدون باز شدن یک صفحه ی خالی دیگر به صورت پنهانی این کار را توسط جاوا اسکریپت انجام داد ؟
ممنون و سپاسگذارم
پاسخ: 
سلام
برای این گونه موارد باید با آژاکس (Ajax) آشنا باشید، این زبان در واقع ترکیب جاوا اسکریپت و XML است، کافی است با جاوا اسکریپت آشنایی داشته باشید، در این صورت کار با آژاکس چندان سخت نیست، آموزش ها و مثال های زیادی هم در بخش مقدماتی و هم کاربردی در سایت و در وب وجود دارد.
نویسنده: elnaz
۱۱:۲۹ ۱۳۹۲/۰۴/۳۰
با عرض سلام می خواستم بپرسم رویداد ontype را با جاوا اسکریپت چطوری میشه نوشت؟ کار این رویداد مثل سرچ گوگله که وقتی کلماتی را در text box سرچ می کنیم همزمان با تایپ ما کلمات مربوطه که قبلا سرچ شده را میاره. با تشکر
پاسخ: 
سلام
در جاوا اسکریپت رویدادی به نام ontype نداریم، اما هدف شما با رویداد های زیر امکانپذیر است:
- برای حالت عادی که کاربر در فیلد شروع به نوشتن می کند، رویداد onkeydown یا onkeypress کاربرد دارد.
- برای مواقعی که کاربر به فرض با کلیک راست مقادیر را به اصطلاح paste می کند، از رویداد onpaste (در مرورگر IE) و oninput (در سایر مرورگرها) استفاده کنید.
نویسنده: خلیل
۰۳:۴۴ ۱۳۹۲/۰۷/۲۷
ممنون از زحماتتون . خیلی خوب اموزش میدین .
نویسنده: رضا
۱۶:۳۴ ۱۳۹۲/۰۸/۰۱
سلام
چطور میشه وقتی یه رویداد رخ میده اون رو در پایگاد داده ثبت کنیم مثلا یه فیلد در پایگاه داده بنام num داریم که مقدارش 1 هست حالا میخوایم با یه رویداد از طریق جاوا اسکریپت مقدارش به 2 تغییر کنه
پاسخ: 
سلام
جاوا اسکریپت تنها قابلیت اعمال تغییر در سمت کاربر (مرورگر) را دارد، برای این کار معمولا از Ajax (ترکیب جاوا اسکریپت + XML) استفاده می کنند که خود مبحث جداگانه ای دارد (به آموزش های بخش Ajax مراجعه کنید).
نویسنده: مصطفی
۱۶:۲۹ ۱۳۹۲/۰۸/۱۳
سلام می خواستم تابعی طراحی کنم که اگه کاربر هر کجای صفحه کلیک کرد تابع فراخوانی بشه ایا راهی داره؟
پاسخ: 
سلام
می توانید از نمونه زیر استفاده کنید:
<script type="text/javascript">
window.onclick = function(){
alert('ok!');
}
</script>
نویسنده: حمید
۲۰:۰۰ ۱۳۹۳/۰۱/۱۳
سلام من یه عکس دارم در یک بلوک که اندازه ی عکس از بلوک بزرگتره و تمام عکس دیده نمیشه حالا میخوام با رویداد زمانی که روی عکس کلیک میکنم و کلیک رو نگه می دارم (onmousedown) و ماوس رو حرکت میدم عکس هم حرکت کنه مثلا اگه ماوس رو پایین کشدم عکس هم بیاد پایین. لطفا کمک کنید نیاز دارم به این با تشکر
پاسخ: 
سلام
می توانید از کد آماده زیر استفاده کنید:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>وبگو | کد آماده برای درگ و دراپ تصویر</title>
<!-- http://webgoo.ir -->
<style type="text/css">
.dragme{
position:relative;
width:270px;
height:203px;
cursor:move;
}
#draggable{
background-color:#CCC;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
function startDrag(e) {
//determine event object
if(!e){
var e = window.event;
}

//IE uses srcElement, others use target
var targ = e.target ? e.target : e.srcElement;
if(targ.className != 'dragme'){
return null;
};

//calculate event X, Y coordinates
offsetX = e.clientX;
offsetY = e.clientY;

//assign default values for top and left properties
if(!targ.style.left){
targ.style.left = '0px';
};
if(!targ.style.top){
targ.style.top = '0px';
};

//calculate integer values for top and left
//properties
coordX = parseInt(targ.style.left);
coordY = parseInt(targ.style.top);
drag = true;

//move div element
document.onmousemove = dragDiv;

return false;
}
function dragDiv(e){
if (!drag){
return null;
};
if(!e){
var e = window.event
};
var targ = e.target ? e.target : e.srcElement;
//move div element
targ.style.left = coordX + e.clientX - offsetX + 'px';
targ.style.top = coordY + e.clientY - offsetY + 'px';
return false;
}
function stopDrag(){
drag = false;
}
window.onload = function(){
document.onmousedown = startDrag;
document.onmouseup = stopDrag;
}
</script>
</head>
<body>
<div id="draggable" class="dragme">"drag-and-drop image script!"</div>
<img src="flower.jpg" alt="image" title="image" class="dragme">
</body>
</html>
نویسنده: MF
۰۹:۵۱ ۱۳۹۳/۰۱/۲۵
با سلام و احترام
این کد آماده ای که برای حمید گذاشتید خیلی جالبه اما یه سوال:
می شه تصویر را در یک مقیاس معین در صفحه سایت تعریف کرد؟ چون در این حالت عکس روی تمام صفحه سایت move می شه.
اگر راهنمایی بفرمائید ممنون می شم.
با تشکر
پاسخ: 
سلام
تست نکرده ایم، اما به نظر با محاسبه فاصله از محور X ها و Y ها بتوانید یک شرط تعیین کنید که اگر به فرض فاصله از مقدار موقعیت مورد نظر بیشتر بود، بخش Stop اجرا شود، باید آزمایش و خطا کنید.
نویسنده: مصطفی
۱۲:۰۸ ۱۳۹۳/۰۳/۱۲
سلام چطور میشه از طریق جاوا اسکریپت یک رویداد رو حذف کنیم مثلا یه تگ دارم که روی اون رویداد onclick تعریف شده حالا میخوام onclick رو از این تگ حذف کنم
پاسخ: 
سلام
به چند شیوه این کار میسر است، می توانید کل محتوا را با استفاده از متدهایی مانند innerHTML تغییر دهید (روش ساده)، یا از تابع زیر استفاده کنید:
<script type="text/javascript">
function removeEvent(elem){
elem = document.getElementById(elem);
elem.onclick = null;
alert('removed!');
}
function test(){
alert('onclick!');
}
</script>
<input type="button" id="test" onclick="test();" value="تست">
<input type="button" onclick="removeEvent('test');" value="حذف رویداد">
به این ترتیب رویداد مورد نظر برابر null شده و در واقع حذف و بی اثر می گردد.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





5 × 1
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form محمد رستمی
در:
سلام اگه میشه لیست توابع و کاربردشونو توی یه فایل pdf بزارین
۱۳۹۹/۰۹/۰۵

form شهریار صادقی
در:
من سه تا صفحه در php storm درست کردم یکی برای html یکی برای جاوا اسکریپت و جی کوِئری و یکی هم برای css اول...
۱۳۹۹/۰۹/۰۱

form دوست خوب
در:
اگر بخواهیم برای رفتن به مرورگر و باز کردن یک صفحه لینک دهیم؟
۱۳۹۹/۰۹/۰۱

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

form Alireza
در:
خیلی ممنون از پاسخگویی سریع! بله خوشبختانه سرور هاست دانلود LiteSpeed هست و از جدیدترین PHP هم پشتیبانی میکنه. تو قسمت path هم دایرکتوری...
۱۳۹۹/۰۸/۲۹

form Alireza
در:
عرض سلام و خسته نباشید از مطالب استفاده کردم و نظرات هم خوندم واقعا مفید بودن. یکی دو نفر مشکلی شبیه بنده داشتن. من...
۱۳۹۹/۰۸/۲۹

form امیرحسین
در:
سلام استاد عزیز وقت بخیر من یه سوال در مورد function use داشتم اگه ممکنه با مثالی کاربردی توضیح بدید که کارش چیه :...
۱۳۹۹/۰۸/۲۷

form Amin Eskandari
در:
سلام عالی بود ممنون
۱۳۹۹/۰۸/۲۷

form فاطمه
در:
چگونه در حلقه ها اعداد را جمع کنیم و در خروجی مجموع انان را نشان دهد مثلا جواب
۱۳۹۹/۰۸/۲۶

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

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

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

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

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

form ar
در:
سلام ممنون از سایت خوبتون ببخشید من تازه دارم زبان برنامه نویسی جاوااسکریپت رو یاد میگیرم و لپتاپم لپتاپ نسبتا ضعیفی هست من...
۱۳۹۹/۰۸/۲۰
form saba
در:
سلام من این کد رو در قسمت کد های اختصاصی کاربر وارد کردم اما هیچ تغییری ایجاد نشد ممکنه راهنمایی کنید؟
۱۳۹۹/۰۸/۱۹
form مینا
در:
سلام. من میخوام از regex توی ماشین حساب استفاده کنم ممنون میشم منو راهنمایی کنین
۱۳۹۹/۰۸/۱۹
form intal
در:
سلام خسته نباشید من واقعا از وبگو ممنونم که این آموزش های ارزشمند رو در اختیار کاربران قرار میده راستش من هرکاری می کنم پوزیشن...
۱۳۹۹/۰۸/۱۷
form بهروز
در:
مهندس جان خیلی عالی بود دستت درد نکنه درست شد.
۱۳۹۹/۰۸/۱۷
form اصغر
در:
خوندمش خیلی ممنون مفید بود
۱۳۹۹/۰۸/۱۵
form بهروز
در:
ممنون، خیلی لطف کردید، چشم امتحان میکنم خبر میدم فقط یه موری رو یادم رفت عرض کنم اینکه مثلا لینک exm.ir/m/yyyy به...
۱۳۹۹/۰۸/۱۴
form بهروز
در:
ممنون از پاسخگویی سریعتان در سوال فوق yyyy متغیر هست یعنی هرسری یه عددی کلیک میشه مثلا exm.ir/1234 حالا میخوام ریدایرکت بشه به آدرس...
۱۳۹۹/۰۸/۱۴
form بهروز
در:
سلام اگه بخوام ادرس 1 رو به ادرس دو ریدایرکت کنم چطور انجام دهم:
۱۳۹۹/۰۸/۱۴
form Mori
در:
سلام. میخواستم بدونم که چگونه در html میشه چند لیست عمودی رو کنار هم قرار داد. یعنی در واقع لیست ها زیر هم نباشند. ...
۱۳۹۹/۰۸/۱۰
form مبین
در:
با سلام من می خواستم دستوری در دیتابیس بنویسم که بر اساس قد افراد نتایج را مرتب و چاپ کند و اگه قد برار بود...
۱۳۹۹/۰۸/۰۹
form عباس علیمردانی
در:
سلام. من یک سوال یا بهتر بگم خواهش داشتم ایا شما میتوانید وبلاگ رو فیلتر کنید؟ یعنی با حکم قضایی فیلتر بشه. وبلاگ برایه...
۱۳۹۹/۰۸/۰۹
form ابوالفضل
در:
سلام استاد اومدم امروز بعد از سالها سوالاتی که از شما استاد بزرگوارم میپرسیدم رو زیر این پست مرور می کردم واقعا چقدر مبتدی...
۱۳۹۹/۰۸/۰۹
form mahtab
در:
سلام وقتتون بخیر ببخشید من میخوام یه آهنگی رو بزارم وبم کدش تو اینترنت زدم اما نیاورد بی زحمت میشه راهنمایی کنین چجوری...
۱۳۹۹/۰۸/۰۸
form Mori
در:
بهترین سایت برنامه نویسی در ایران هستید
۱۳۹۹/۰۸/۰۷
form Mori
در:
سلام. چگونه باید در لیست برای هر کدام از اعضا به صورت جداگانه لینک بگذاریم؟؟
۱۳۹۹/۰۸/۰۷
form جیهوپ
در:
سلام استاد عزیز من میخواستم صفحه وبی ایجاد کنم مثل این صفحه وبی ایجاد کنید که مشخصات شما را در 3 پاراگراف با ویژگی...
۱۳۹۹/۰۸/۰۶
  در انتظار بررسی: ۲
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.