آگهی
article

توابع (Functions) در جاوا اسکریپت (JavaScript)

javascript-function

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

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


اولین سوالی که ممکن است به ذهنمان برسد این است که اصلا تابع چیست و چه کاربردی دارد؟!
پاسخ این است که در برنامه نویسی توابع یا Functions شبیه ماشین ها در دنیای واقعی هستند که با دستورالعمل ثابت هر بار با توجه به ورودی دریافتی خروجی متفاوتی تولید می کنند، توابع با این هدف در زبان های برنامه نویسی معرفی شده اند تا از چندبارنویسی عملیات های مشابه جلوگیری شود، به طور مثال نرم افزار نصب شده بر روی دستگاه چاپ را در دنیای واقعی تصور کنیم اگر بخواهیم 100 برگ کاغذ را با نوشته های مختلف بدون کمک نرم افزار و به صورت تنظیمات دستی پرینت کنیم قاعدتا زمان بسیار زیادی از ما خواهد گرفت، اما کافی است یک بار برای سخت افزار دستگاه برنامه بنویسیم و هر بار با توجه به تنظیمات مدنظرمان به هر تعداد که می خواهیم خروجی بگیریم، عملکرد توابع در دنیای برنامه نویسی هم بی شباهت به این مثال نیست، در برنامه نویسی شرایطی پیش می آید که یک روند به تعداد خیلی زیاد ممکن است تکرار شود، به طور مثال تنظیم فونت دلخواه در صفحات مختلف، اگر بخواهیم هر بار تمام جزئیات را مورد به مورد برای هر صفحه بنویسیم علاوه بر اینکه این کار وقت زیادی از ما می گیرد باعث افزایش ضریب خطا و حجم کلی کدنویسی صفحات خواهد شد، از این رو روش بهتر و حرفه ای تر آن است که یک بار الگویی را به شکل تابع بنویسیم و هر بار با ورودی های متفاوت (یا مشابه) خروجی مدنظرمان را دریافت کنیم.

شیوه نگارش (Syntax) توابع در جاوا اسکریپت


توابع در جاوا اسکریپت (JavaScript) با عبارت function تعریف و معمولا پارامترهایی به عنوان آرگیومنت (Argument) می پذیرند، آرگیومنت به زبان ساده یعنی همان ورودی هایی که به تابع داده می شود و می تواند از نوع عدد، رشته، آرایه، تابع و... باشد، مثال زیر Syntax صحیح نحوه تعریف یک تابع ساده را در جاوا اسکریپت نشان می دهد:
<script>
function userInfo(u, c){
    var user = 'your username: ' + u + '<br>';
    var country = 'your country: ' + c + '<br>';
    var output = user + country;
    
    return output;
}
document.write(userInfo('admin', 'Iran'));
</script>
توضیح:
- برای تعریف تابع در جاوا اسکریپت از عبارت function استفاده می کنیم.
- نام تابع باید با حروف انگلیسی (یا کاراکترهای _ و $) شروع شود و استفاده از اعداد به عنوان شروع تابع صحیح نیست اما می توانیم در ادامه از اعداد استفاده کنیم به فرض user1Info یا u123_info، دقت کنیم استفاده از کلماتی که به عنوان دستورات خاص در جاوا اسکریپت کاربرد دارند (به فرض var، if، default و...) مجاز نیست، برنامه نویسان برای خواناتر شدن کدها از عبارت های دارای معنی و معمولا به صورت کلمات چندبخشی (به فرض userInfo) استفاده می کنند.
- در نمونه تابع بالا دو آرگیومنت فرضی (u و c) به عنوان نام کاربری و کشور در ورودی دریافت می شود، در نظر گرفتن آرگیومنت برای تابع اجباری نیست و بسته به نیاز برنامه ممکن است تابع با یا بدون آرگیومنت نوشته شود.
- سپس درون تابع (بین کاراکترهای {}) سه متغیر با نام های دلخواه username، country و output تعریف شده که در واقع نهایتا خروجی به صورت
your username: admin
your country: Iran
برگردانده شده و در بیرون از تابع چاپ می شود.
- در قسمت return خروجی تابع ارسال می شود، در اینجا return متغیر output را که خود حاصل جمع دو متغیر name و country است به عنوان خروجی تابع برمی گرداند (به ارسال خروجی تابع در اصطلاح برگردان یا return می گویند)، استفاده از دستور return در تابع اجباری نیست و بسته به نوع تابع و عملیاتی که مد نظر است می توانیم از این دستور استفاده کنیم (معمولا توابع به همراه قسمت return تعریف می شوند).
نکته: در صورتی که در هر قسمت از تابع دستور return اجرا شود، ادامه پردازش کدهای آن (در صورت وجود) متوقف شده و عملیات تابع به پایان می رسد.
- دقت کنیم توابع در جاوا اسکریپت باید حتما با یک دستور یا رویداد فراخوانی شوند به طور مثال بارگذاری کامل صفحه (رویداد onload) یا کلیک کاربر بر روی یک دکمه (رویداد onclick) و...، در حالت عادی صرف وجود یک تابع در صفحه به خودی خود کار خاصی انجام نمی دهد، در مثال بالا فراخوانی تابع با دستور document.write انجام شده که نتیجه را در صفحه وب چاپ می کند.

روش های تعریف تابع در جاوا اسکریپت


همان طور که گفتیم تابع در جاوا اسکریپت (JavaScript) با عبارت function تعریف می شود اما روش های تعریف می تواند بسته به موقعیت و نیاز برنامه متفاوت باشد:
- تعریف تابع به صورت معمول
در این حالت تابع به صورت معمول و با در نظر گرفتن نام اختصاصی تعریف می شود، مثال:
<script>
function addNumbers(num_1, num_2, num_3){
    return num_1 + num_2 + num_3;
}
alert(addNumbers(8, 5, 7));
</script>
با درج این کد در صفحه HTML و اجرای فایل در مرورگر تابع addNumbers فراخوانی و خروجی زیر به صورت پیام هشدار نمایش داده می شود:
20
در این روش تابع به صورت معمول و مستقل تعریف شده است، دقت کنیم استفاده از عبارت addNumbers برای تعریف توابع دیگر در همان صفحه وب ممکن است نتایج ناخواسته در پی داشته باشد و در صورتی که دو تابع هم نام در یک اجرا داشته باشیم مفسر جاوا اسکریپت صرفا آخرین تابع را پردازش می کند.
- تعریف تابع با متغیر
یک روش دیگر تعریف تابع در نظر گرفتن نام به صورت متغیر است، مثال:
<script>
var myFunc;
//var num = 'JS';
var num = 20;
var result;

if(Number.isInteger(num)){
    myFunc = function(num){
        result = num - 5;
        return result;
    }
} else{
    myFunc = function(num){
        result = 'Error! Please Use Integer.';
        return result;
    }
}

alert(myFunc(num));
</script>
در این شیوه فرآیندی که تابع باید اجرا کند ابتدا با دستور شرطی (متد Number.isInteger) ارزیابی و سپس تابع تعریف می شود، با توجه به این نمونه کد اگر ورودی (متغیر فرضی num) برابر مقدار عددی باشد، قسمت اول شرط if اجرا و خروجی به صورت عدد زیر نمایش داده می شود:
15
اما اگر ورودی مقدار غیر عددی باشد (به فرض عبارت JS) خروجی به صورت زیر نمایش داده می شود:
Error! Please Use Integer.
دقت کنیم حتی اگر مقدار عددی را بین علامت های '' در متغیر num قرار دهیم (به فرض '10') در حالت عادی از دید مفسر جاوا اسکریپت مقدار درج شده رشته ای (String) است نه عددی (Integer) و پیام خطا نمایش داده خواهد شد.
- تعریف تابع در تابع دیگر
گاهی مواقع در برنامه نویسی موقعیت هایی پیش می آید که ممکن است به جهت ساختار کدها یا مختصرنویسی و پرهیز از کدنویسی مجزا برای انجام فرآیندهای تکراری نیاز به تعریف تابع در تابع دیگری باشد، مثال:
<script>
function addNumbers(num_1, num_2, num_3){
    var result = num_1 + num_2 + num_3;
    
    function showAlert(){
        alert(result);
    }
    
    return showAlert();
}

addNumbers(1, 5, 7);
</script>
خروجی نمونه کد بالا به صورت پیام هشدار نمایش داده می شود:
13
نکته مهم در این شیوه حدود (Scope) دسترسی به تابع درونی است که فقط در تابع اصلی قابل فراخوانی و استفاده است، به عبارت دیگر در نمونه کد بالا نمی توانیم تابع showAlert را در بیرون از تابع addNumbers فراخوانی کنیم.

حدود دسترسی تابع (Function Scope) در جاوا اسکریپت


منظور از حدود دسترسی یا Scope، وجود یا عدم وجود قابلیت استفاده از پارامترهای تابع (متغیر، تابع، آبجکت و..) در بیرون از تابع یا پارامترهای بیرون از تابع در تابع برای مفسر جاوا اسکریپت در زمان پردازش دستورات است، طبق قوانین زبان جاوا اسکریپت:
- هر متغیر، تابع یا آبجکتی که درون یک تابع تعریف می شود صرفا توسط همان تابع (یا تابعی که درون آن تابع تعریف شده باشد) قابل دسترس است، به طور مثال کد زیر خطا خواهد داشت:
<script>
function myScope_1(){
    var txt = 'Hello!';
}
function myScope_2(){
    return txt;
}
alert(myScope_2());
</script>
چون متغیر فرضی txt در تابع myScope_1 تعریف اما در تابع myScope_2 فراخوانی شده است با اجرای کدها مفسر جاوا اسکریپت خطای زیر را برمی گرداند:
ReferenceError: txt is not defined
بر طبق همین قانون کد زیر صحیح است و خطایی نخواهد داشت:
<script>
function myScope_1(){
    var txt = 'Hello!';
    
    function myScope_2(){
        return txt;
    }
    
    return myScope_2();
}

alert(myScope_1());
</script>
تابع myScope_2 درون تابع myScope_1 تعریف شده و به پارامترهای آن دسترسی دارد، نتیجه اجرای نمونه کد بالا پیام زیر خواهد بود:
Hello!
- متغیرهایی که بیرون از تابع به صورت دسترسی سراسری (Global Scope) تعریف شوند در تابع قابل استفاده و تغییر هستند، مثال:
<script>
var txt;
function myScope_1(){
    txt = 'Hello!';
}
function myScope_2(){
    return txt;
}
myScope_1();
alert(myScope_2());
</script>
متغیر txt در بیرون از توابع تعریف شده و در این حالت دسترسی سراسری یا Global Scope دارد، نتیجه اجرای نمونه کد بالا پیام زیر خواهد بود:
Hello!
نکته: همان طور که در نمونه کد بالا مشخص است متغیرهایی که به صورت سراسری تعریف می شوند در روند اجرای دستورات توسط توابع مختلف قابل تغییر هستند، در اینجا متغیر txt در بیرون از توابع تعریف، در تابع myScope_1 مقداردهی و در تابع myScope_2 فراخوانی شده است.
- توابعی که به صورت مستقل تعریف می شوند دسترسی سراسری Global Scope دارند و می توانیم از آنها در سایر توابع استفاده کنیم، مثال:
<script>
function myScope_1(){
    var txt = myScope_2('Welcome');
    return txt;
}
function myScope_2(str){
    return str + '!';
}
alert(myScope_1());
</script>
نتیجه کد بالا به صورت پیام هشدار و متن زیر نمایش داده می شود:
Welcome!
همان طور که مشخص است از تابع myScope_2 در تابع myScope_1 استفاده کرده ایم.

تابع بازگشتی (Recursive Function) در جاوا اسکریپت


توابع در جاوا اسکریپت این قابلیت را دارند که بسته به نیاز برنامه خودشان را فراخوانی کنند، به این حالت در اصطلاح تابع بازگشتی یا Recursive Function گفته می شود، مثال:
<script>
var num = 0;
function recurFunc(){
    if(num > 10){
        alert(num);
        return true;
    }
    
    num++;
    recurFunc();
}
recurFunc();
</script>
با اجرای این تابع تا زمانی که متغیر num کوچکتر یا مساوی با 10 باشد تابع مقدار متغیر را یک واحد افزایش و مجددا خودش را فراخوانی می کند، برای جلوگیری از دور تکرار بینهایت (infinite loop) تابع باید در مرحله ای خاتمه یابد، این خاتمه معمولا با در نظر گرفتن دستور شرطی (در اینجا if) انجام می شود و با اجرای دستور return دور تکرار خاتمه می یابد (مشابه با عملکرد دستور break در حلقه ها)، بر این اساس نتیجه تابع بالا به صورت زیر خواهد بود:
11
توابع بازگشتی ساز و کاری مشابه حلقه ها (for، while) دارند و با توجه به نیاز برنامه استفاده می شوند.

نحوه فراخوانی توابع در جاوا اسکریپت


توابع در جاوا اسکریپت بدون وجود رویدادها و دستورات کاربردی ندارند، یک رویداد یا دستور به معنی حالتی است که پس از وقوع یا اعمال آن موتور تابع به حرکت می افتد درست شبیه به استارت زدن یک خودرو!
اگرچه به صرف درج تابع در تگ های script می توانیم تابع را فراخوانی کنیم (مانند نمونه کدهای بالا) اما معمولا فراخوانی توابع در جاوا اسکریپت با رویدادها انجام می شود، در مثال زیر شیوه فراخوانی یک تابع را با دو رویداد پرکاربرد onclick (زمانی که کاربر بر روی یک عنصر کلیک می کند) و onload (زمانی که صفحه وب به صورت کامل بارگذاری می شود) بررسی می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | فراخواني تابع در جاوا اسکريپت با رويداد onclick</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    line-height: 22px;    
}
a {
    text-decoration: none;
}
</style>
</head>
<body>
<script>
function addNum(num1, num2){
    var elm = document.getElementById('result');
    var output = num1 + num2;
    
    return elm.innerHTML = output;
}
</script>
<noscript>جاوا اسکريپت در مرورگر شما غير فعال است يا پشتيباني نمي شود!</noscript>
<a href="#" onclick="addNum(3, 6);">براي مشاهده نحوه عملکرد تابع در جاوا اسکريپت، کليک کنيد</a>
<div id="result"></div>
</body>
</html>
توضیح:
- تابع بالا با رویداد onclick (کلیک کاربر بر روی لینک) اجرا می شود.
- دقت کنیم در جاوا اسکریپت نحوه تعیین مقادیر در نوع رفتار تابع اثرگذار است، به فرض اگر کد بالا را به صورت زیر فراخوانی کنیم به جای جمع دو عدد، حاصل ترکیب آنها به صورت یک رشته نمایش داده می شود:
//نمایش نتیجه به صورت یک رشته متنی
onclick="addNum('3', '6');"
//نمایش نتیجه به صورت حاصل جمع دو عدد
onclick="addNum(3, 6);"
همان طور که حدس زدید دلیل این حالت استفاده از عملگر جمع (+) در تابع جاوا اسکریپتی است که هم برای مقادیر رشته ای (String) کاربرد دارد و هم مقادیر عددی (Integer).
- در این نمونه کد از متدهای document.getElementById و innerHTML استفاده شده است که در آموزش های پیش رو به صورت جداگانه در رابطه با آنها خواهیم گفت، فعلا در این حد بدانیم که با متد document.getElementById یک عنصر در صفحه انتخاب و با متد innerHTML مقادیر (کدهای HTML + متن) به عنصر مد نظر اضافه می شود.
در ادامه تابع دیگری را در رویداد onload (بارگذاری کامل صفحه) فراخوانی و با پیش نمایش آنلاین بررسی می کنیم.

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


در نمونه کد زیر از رویداد onload (بارگذاری کامل صفحه) برای فراخوانی تابع استفاده کرده ایم که لینک پیش نمایش آنلاین آن نیز جهت بررسی درج شده است:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | فراخواني تابع در جاوا اسکريپت با رويداد onload</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    line-height: 22px;    
}
a {
    text-decoration: none;
}
</style>
</head>
<body>
<noscript>جاوا اسکريپت در مرورگر شما غير فعال است يا پشتيباني نمي شود!</noscript>
با بارگذاری کامل صفحه رویداد onload اجرا شده و تابع welcome فراخوانی می شود.
<script>
function welcome(){
    var text = 'این پیام با فراخوانی تابع در جاوا اسکریپت نمایش داده می شود';
    var output = alert(text);
    
    return output;
}

window.onload = welcome();
</script>
</body>
</html>
پیش نمایش آنلاین
در این نمونه کد هیچ آرگیومنتی برای تابع در نظر نگرفته ایم، قبلا گفتیم که در نظر گرفتن آرگیومنت برای تابع اختیاری است و بستگی به نیاز برنامه دارد.
نکته: استفاده از رویداد onload معمولا می تواند به یکی از شیوه های زیر باشد:
- فراخوانی در تگ body، مثال:
<body onload="welcome();">
- فراخوانی با آبجکت window، مثال:
window.onload = welcome();
نتیجه هر دو روش یکسان است و تفاوت صرفا در شرایطی است که نتوانیم (به دلیل ساختار برنامه) یا نخواهیم (سلیقه برنامه نویس) از یک شیوه استفاده کنیم.
نکته: رویدادها در جاوا اسکریپت تنوع زیادی دارند و محدود به موارد گفته شده (onclick و onload) نمی شوند، در مباحث پیش رو از بخش آموزش های مقدماتی جاوا اسکریپت به صورت مفصل در این خصوص صحبت خواهیم کرد.
sectionدسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» حلقه for و while در جاوا اسکریپت (JavaScript)
» کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
» عملگرها (Operators) در جاوا اسکریپت (JavaScript)
» دستور switch و case در جاوا اسکریپت (JavaScript)
» کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
commentنظرات (۴۴ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: جواد
زمان: ۱۳:۴۹:۴۴ - تاریخ: ۱۳۹۲/۰۸/۲۸
سلام و تشکر از زحماتتون
می خواستم بدونم چطور میشه با جاوا اسکریپت یه ثانیه شمار افزایشی ساخت
پاسخ: 
سلام
از تابع نمونه زیر استفاده کنید:
<script type="text/javascript">
function CountUp(id){
var second = document.getElementById(id).innerHTML;
if(!second > 0){
second = 0;
document.getElementById(id).innerHTML = second;
}
else{
document.getElementById(id).innerHTML = parseInt(second) + 1;
}
}
window.onload = function(){
CountUp('counter');
setInterval("CountUp('counter')", 1000);
}
</script>
<div id="counter"></div>
نویسنده: ابوالفضل
زمان: ۱۹:۵۶:۰۴ - تاریخ: ۱۳۹۲/۱۰/۲۴
سلام من توی سایتم یه بخشی هستش که وقتی کاربر کلیک می کنه با آجاکس اطلاعات یک دیو نمایش داده میشه این قسمتی از اسکریپتشه:
$("#up").click(function(){     $(".a3").fadeToggle(); $("#up-win").slideToggle();       });
حالا میخوام به محض اینکه کاربر وارد صفحه شد این منو باز بشه و نیازی به کلیک کاربر نباشه راهی وجود داره؟
پاسخ: 
سلام
از حالت زیر استفاده کنید:
$(document).ready(function(){$(".a3").fadeToggle(); $("#up-win").slideToggle();});
نویسنده: -مریم-
زمان: ۰۲:۴۰:۵۹ - تاریخ: ۱۳۹۲/۱۱/۱۹
با سلام. من از یک کد آماده(java) برای اینکه تصاویرم به صورت البوم نمایش داده بشه می خوام استفاده کنم(سایتم رو با php نوشتم) این هم کدش:
<script type="text/javascript" src="http://pChAk.Net/blogcod/gallery/g.js"></script>
<script type="text/javascript">
viewer.add('http://pChAk.Net/blogcod/gallery/pic/01.jpg',' تصویر شماره یك');
viewer.add('http://pChAk.Net/blogcod/gallery/pic/02.jpg',' تصویر شماره دو');
viewer.add('http://pChAk.Net/blogcod/gallery/pic/03.jpg',' تصویر شماره سه');
viewer.add('http://pChAk.Net/blogcod/gallery/pic/04.jpg',' تصویر شماره چهار');
</script>
<center><a href="javascript:void(viewer.show(0))"><img border="0" src="http://pChAk.Net/blogcod/gallery/image/09.png" alt="برای نمایش تصاویر گالری كلیك كنید"></a></center><br><br><p align="center">
<font face="Tahoma" style="font-size: 7pt">
<a target="_blank" href="http://pichak.net"><span style="text-decoration: none">
<font color="#006666">&#1583;&#1585;&#1740;&#1575;&#1601;&#1578; &#1603;&#1583; &#1711;&#1575;&#1604;&#1585;&#1740; &#1593;&#1603;&#1587; &#1583;&#1585; &#1608;&#1576;</font></span></a></font></p>
حالا اگر بخوام تصاویر داخل پایگاهم رو نمایش بدم باید چی کار کنم خودم یه چیزایی امتحان کردم اما نشده. اگه میشه راهنمایی ام کنید. با تشکر
پاسخ: 
سلام
قاعدتا باید با استفاده از دستور SELECT موارد را از دیتابیس استخراج و خروجی را در قسمت های مربوط به viewer.add به صورت آدرس تصویر جایگزین کنید (باید تجربه کار با PHP را داشته باشید، گرفتن خروجی و جایگزینی در کد نیاز به رعایت جزئیاتی دارد که تمام آنها در این مطلب قابل ذکر نیست).
نویسنده: محمد
زمان: ۰۱:۴۱:۱۲ - تاریخ: ۱۳۹۳/۰۳/۰۸
سلام
این تابعی که نوشتید هم داخل تابع با document.write مقدار رو چاپ کردید و هم با return برگردوندید
لازمه که return کنید؟
function add (num1,num2){
var output = num1 + num2;
return document.write(output);
}
پاسخ: 
سلام
زمانی که دستوری بعد از return قرار می گیرد، به عنوان نتیجه تابع عمل می کند و در جایی چاپ می شود که تابع فراخوانی شده است، به عبارتی اینکه خود تابع کجای صفحه درج شده مهم نیست (دستور document.write درون تابع به صورت مستقل اجرا نمی شود)، بلکه نتیجه در جایی نمایش داده می شود که تابع فراخوانی شده.
نویسنده: مصطفی
زمان: ۱۷:۰۲:۰۹ - تاریخ: ۱۳۹۳/۰۶/۱۱
سلام و تشکر از سایت خوبتون من یه تابع دارم که داخلش یه
setIterval()
تعریف شده و هر یک ثانیه کار میکنه ولی وقتی این تابع دوباره در صفحه توسط یه رویداد دیگه فراخوانی میشه سرعت
setInterval()
دو برابر میشه چرا این اتفاق می افته راه حلش چیه
پاسخ: 
سلام
پیش از فراخوانی مجدد تابع، مقدار قبلی را غیر فعال کنید، مثال:
<script type="text/javascript">
function intervalSet(action){
var interval = setInterval(yourfunction, 1000);
if(action == 'off'){
clearInterval(interval);
}
}
</script>
نویسنده: صفری
زمان: ۲۲:۰۳:۳۳ - تاریخ: ۱۳۹۳/۰۶/۱۴
در پیش نمایشی که قرار دادین پنجره آلرتی نمایش داده میبشه با عنوان (the page at webgoo.ir says:) چطور میتونم به جای این عنوان، عنوان مورد نظر خودمو قرار بدم.
پاسخ: 
تا آنجا که اطلاع داریم تغییر این قسمت ممکن نیست! استفاده از alert برای موارد ضروری و مقدماتی است، برای حالت های پیشرفته تر و سفارشی، بهتر است با جاوا اسکریپت + HTML و CSS یک شبه alert داشته باشید که خود نیازمند آموزش های جداگانه است!
نویسنده: shokouhi70
زمان: ۱۴:۱۸:۱۸ - تاریخ: ۱۳۹۳/۰۷/۰۳
با سلام و خسته نباشید
ممنون از مطالب عالی که در سایت میگذارید
سوالی داشتم
میخوام زمانی که کاربر یه گزینه از لیست انتخاب می کند رویدادی رخ دهد مثلا
اگر کشور ایران را انتخاب کند شهرهای ایران را در لیست بعدی نشان دهد
اگه میشه کامل شرح دهید ممنون میشم
ممنون
پاسخ: 
سلام
پاسخ کوتاهی برای سوالتان وجود ندارد!
می توانید رویداد onchange را برای تگ select قرار دهید، با تغییر مقدار لیست یک تابع فراخوانی کنید و که با توجه به مقدار انتخاب شده کاربر یک div مخفی که درون آن لیست دیگری باشد را نمایش دهد (به فرض style آن را از حالت none به block تبدیل کند)، مثال:
<style type="text/css">
#div-1{
display:none;
background:#F90;
}
#div-2{
display:none;
background:#6CF;
}
</style>
<script type="text/javascript">
function showDiv(value){
if(value == '1'){
document.getElementById("div-1").style.display = "block";
document.getElementById("div-2").style.display = "none";
}
else if(value == '2'){
document.getElementById("div-1").style.display = "none";
document.getElementById("div-2").style.display = "block";
}
else{
document.getElementById("div-1").style.display = "none";
document.getElementById("div-2").style.display = "none";
}
}
</script>
<select name="test" onchange="showDiv(this.value);">
<option value="">- Select -</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="div-1">1</div>
<div id="div-2">2</div>
قاعدتا برای توسعه این کد باید جاوا اسکریپت کار کرده باشید.
نویسنده: مهدی خدایاری
زمان: ۰۰:۲۷:۵۷ - تاریخ: ۱۳۹۳/۰۷/۲۳
من می خوام یک یا چند متغیر رو از یک ادرس بگیرم و قوانینم رو نسبت به اون درست کنم
پاسخ: 
سوال مبهم است! اگر منظورتان دریافت اطلاعات URL است، می توانید با متد زیر این کار را در جاوا اسکریپت انجام دهید:
<script type="text/javascript">
var url = window.location.href;
alert(url);
</script>
در غیر این صورت باید با مبحث متد GET در PHP و نحوه دریافت آن همچنین ترکیب PHP و JavaScript آشنا باشید.
نویسنده: ماهان
زمان: ۱۲:۱۶:۵۶ - تاریخ: ۱۳۹۴/۰۶/۲۹
درود
ما تو سایت مون بخاطر سئو... بعضی از اسکریپت ها رو که بصورت آی فریم فراخوانی می کنیم هر فانکشن میاد تو یه فایل جداگانه. می خواستم ببینیم این اسکریپت های فراخوانی آی فریم رو می تونیم در یک فایل جاوا اسکریپ پشت هم جمع کنیم که تعداد جاوا اسکریپ ها زیاد نشه ... امکانش وجود داره ؟
اینم نمونه
function tak() {
document.write(\'<iframe name="tak" frameborder="0" scrolling="no" id="tak" src="http://web.com/top/tak.php"></iframe>\');
}
پاسخ: 
سلام
برای بررسی این مورد باید یک کد واقعی ارائه کنید (ظاهرا کد درج شده عمل نمی کند!)، اما در کل در صورت آشنایی با جاوا اسکریپت و رعایت Syntax کدها، امکان جمع کردن فانکشن ها در یک فایل وجود دارد و تفاوتی با حالت پراکنده بودن فایل ها ندارد، البته باید توجه کنید که گاهی پس و پیش بودن برخی دستورات در نحوه اجرای کدها موثر است که باز نیاز به بررسی موردی دارد!
نویسنده: علی
زمان: ۱۷:۳۹:۴۴ - تاریخ: ۱۳۹۴/۰۷/۲۲
سلام خسته نباشید من می خوام یه تابع رو دردو زمان فراخوانی کنم . مثلا تابع
show()
رو که خودم نوشتم در دو زمان مختلف فراخوانی کنم با
setInterval()
به یک زمان دقیق و به یکی زمان دو دقیقه بدم امکانش هست .
پاسخ: 
سلام
با اختصاص setInterval به یک متغیر می توانید چند نمونه از آن با تنظیمات متفاوت داشته باشید، به فرض:
<script type="text/javascript">
function alertText(text){
alert(text);
}
var interval_1 = setInterval("alertText('1')", 0);
var interval_2 = setInterval("alertText('2')", 120000);
</script>
نکته: هر 1000 میلی ثانیه برابر با 1 ثانیه است، لذا 120000 میلی ثانیه که در مثال تنظیم شده، برابر با 2 دقیقه (120) ثانیه است!
نویسنده: سعید
زمان: ۱۳:۴۶:۴۲ - تاریخ: ۱۳۹۴/۱۰/۰۱
سلام، ممنون از مطالب آموزنده، من میخواهم در یک فایل php مقادیری رو بوسیله روش get یا post بگیرم و به یک تابع در جاوااسکریپت پاس بدم، لطفا مرا راهنمایی کنید.
با تشکر
پاسخ: 
سلام
برای این منظور باید کدهای JavaScript را به صورت نمونه زیر با PHP ترکیب کنید:
<?php 
$var = $_POST['var'];
?>
<script type="text/javascript">
function test(<?php echo $var; ?>){
}
</script>
نکته: قاعدتا فرمت فایل شما باید php باشد!
نویسنده: Matori73
زمان: ۱۵:۳۹:۴۳ - تاریخ: ۱۳۹۴/۱۱/۲۰
درود !
میخوام در یک وبلاگ، با استفاده از جی کوئری، عبارتی خاص رو تبدیل به کد کنم !
یعنی در متن پست، مثلا کلمه "سلام" تبدیل بشه به :
<img src="http://site.com/pic.png" width="284" height="209">
ممنون میشم راهنمایی بفرمایید ؟
پاسخ: 
نمونه کدهای آماده برای این کار وجود دارد:
http://www.jqueryrain.com/2012/12/replace-text-in-a-string-with-jquery/

http://jsfiddle.net/2EvGF/
نویسنده: جواد
زمان: ۱۴:۱۱:۱۶ - تاریخ: ۱۳۹۴/۱۲/۱۲
با عرض سلام و خسته نباشید .
من میخواستم یک تابع برام بنویسید که وقتی توسط onclick خوانده میشه از مقدار درون فیلد نوشته یک واحد کم کنه یعنی دقیقا کار دکمه backspace رو درصفحه کلید رو برام انجام بده .
مثلا وقتی روی دکمه BKS در کد زیر کلید میکنم مقدار فیلد text از 9510 به 951 تغییر کنه .
با تشکر
<"form name="C>
</"input type="text" name="I" value="9510>
</"input type="button" onclick="" value="BKS>
<form/>
پاسخ: 
برای شبیه سازی دکمه backspace با جاوا اسکریپت می توانید از تابع و نمونه کد زیر استفاده کنید:
<script type="text/javascript">
function backspaceAtCursor(id) {
var field = document.getElementById(id);

if (field.selectionStart) {
var startPos = field.selectionStart;
var endPos = field.selectionEnd;

if (field.selectionStart == field.selectionEnd) {
field.value = field.value.substring(0, startPos - 1) + field.value.substring(endPos, field.value.length);
field.focus();
field.setSelectionRange(startPos - 1, startPos - 1);
} else {
field.value = field.value.substring(0, startPos) + field.value.substring(endPos, field.value.length);
field.focus();
field.setSelectionRange(startPos, startPos);
}
} else {
field.value = field.value.substring(0, field.value.length - 1);
}
}
</script>
<form name="C">
<input type="text" name="I" id="test" value="9510" />
<input type="button" onclick="backspaceAtCursor('test');" value="BKS" />
<form/>
نویسنده: حسام آقاجانی
زمان: ۲۳:۴۴:۲۴ - تاریخ: ۱۳۹۴/۱۲/۲۳
با عرض سلام و خسته نباشید من میخواستم یک تابع برای دکمه ی محاسبه در کد زیر بنویسید که بتونه توابعی که تو صفحه نمایش نوشته میشه محاسبه کنه مثلا فیلد زیر :
<script type="text/javascript">
function pow(id, num_1, num_2) {
var result = num_1;
for (var i = 1; i < num_2; i++) {
result = result * num_1;
}
document.getElementById(id).value = result;
}
</script>
<form name="C">
<input type="text" name="I" id="display">
<input type="button" onClick="pow('display', 4,2)" value="محاسبه">
</form>
وقتی کسی مینویسه (4,2)pow و روی دکمه ی محاسبه کلید میکنه توان رسانی انجام بشه و عدد 16 رو نمایش بده ممنون از حضورتون .
پاسخ: 
کد بالا اصلاح شد!
نویسنده: غریب
زمان: ۱۵:۲۶:۳۳ - تاریخ: ۱۳۹۵/۰۳/۱۳
سلام عزیز خسته نباشید
<pre onclick="return fieldtoclipboard.copyfield(event, this)">1</pre><pre onclick="return fieldtoclipboard.copyfield(event, this)">2</pre>
و به همینصورت ادامه پیدا میکنه این کد فایل ضمیمه ای داره که کاری میکنه هر عدد در باکس کوچک جدا قرار بگیره و با کلیک روی اون هم رنگش ابیبشه هم کپیش میکنه
منتها مشکل من تکرار این هست دستوری چیزی وجود داره که بنده بتونم خاصیت
onclick="return fieldtoclipboard.copyfield(event, this)
رو مثل کاری که در سی اس اس میشه کرد برای per مشخص کنم تا تکرار نشه؟
یعنی فقط با گذاشتن تگ per این خصوصیات اعمال بشه
ممنون میشم راهنماییم کنید مرسی و خدا قوت
پاسخ: 
می توانید نمونه کد زیر را مطابق با نیازتان ویرایش کنید، به نظر همان چیزی است که به دنبال آن هستید!:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
pre{
width: 50px;
height: 50px;
border: 1px solid #CC0000;
}
</style>
<script type="text/javascript">
function eventHandler() {
var e = e || window.event;
var tags = document.getElementsByTagName('pre');
for ( var i = 0; i < tags.length; i++ ) (function(i){
tags[i].onclick = function(e) {
yourFunction(e, tags[i], (i + 1));
}
})(i);
}
function yourFunction(e, tag, num){
alert(num);
}
</script>
</head>
<body>
<pre>1</pre>
<pre>2</pre>
<script type="text/javascript">
eventHandler();
</script>
</body>
</html>
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




4 × 2
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form حامد
در:
عالی بود
۲۱:۳۸:۳۱ ۱۳۹۸/۱۱/۰۷

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

form فرید
در:
درود بشما، میخواستم بدونم مثل کلمه @، کلمه ایی ساین هم داریم؟ با تشکر
۱۲:۱۹:۰۷ ۱۳۹۸/۱۱/۰۷

form ناشناس
در:
سلام میشه لطفا به سوالم جواب بدید من می خوام با استفاده از عبارات با قاعده تمام تگ های html رو تشخیص بدم...
۱۰:۱۳:۰۵ ۱۳۹۸/۱۱/۰۷

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

form رسول
در:
سلام میخوام بجای نمایش متن، متن موجود در یه لینکو بهم نشون بده ممنون میشم کمکم کنید
۱۳:۳۸:۱۸ ۱۳۹۸/۱۱/۰۶

form حسن
در:
من مطابق کد نوشته شده شما میخواستم آدرس
۱۴:۱۰:۱۳ ۱۳۹۸/۱۱/۰۵

form saemrezaei
در:
سلام واقعا عالییه خیلی استفاده کردم به وبلاگم سر بزن لطفا.
۱۳:۳۷:۳۴ ۱۳۹۸/۱۱/۰۵

form نصراله رضایی
در:
سلام در ادمین های گذشته که باز می کنم تصاویر مشاهده نمی شود و من را به آدرس Huge domains.com ارجاع می...
۲۲:۳۹:۵۳ ۱۳۹۸/۱۱/۰۴

form نقدی زاده
در:
واقعا مرسی یه overflow-y:hidden به body دادم اسکرل افقی برای صفحه نمایش تبلت از بین رفت
۱۴:۴۴:۱۳ ۱۳۹۸/۱۱/۰۴

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

form امین
در:
سلام تشکر بابت راهنماییتون. منظور من این بود که: الان با ثبت نام کاربر a در سایت اطلاعاتش در دیتابیس ثبت میشه و یک پوشه...
۰۳:۱۲:۴۰ ۱۳۹۸/۱۱/۰۲

form شریفی
در:
سلام معنی متن زیر چیست؟
۱۸:۲۸:۰۹ ۱۳۹۸/۱۱/۰۱

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

form Admin
در:
سلام دوست عزیز. میشه بگویید چگونه میتوان در وبلاگ کادری را باز کرد که بازدید کنندگان بتوانند در آن چیزی بنویسند. ممنون میشم...
۱۱:۲۸:۵۰ ۱۳۹۸/۱۰/۳۰
آگهی