آموزش برنامه نویسی وب و مهارتهای مرتبط

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

شروعی بر برنامه نویسی جاوا اسکریپت (JavaScript)

یکی از زبان های انعطاف پذیر و در عین حال قدرتمندی که در کنار تگ های ساده HTML و استایل CSS مورد استفاده برنامه نویسان وب قرار می گیرد، زبان برنامه نویسی جاوا اسکریپت (JavaScript) است، البته شاید تصورمان از شنیدن عنوان جاوا اسکریپت بیشتر معطوف به کدهای کاربردی وبلاگ ها و سایت ها شود، اما در واقع باید گفت قدرت این زبان برنامه نویسی خیلی بیشتر از جلوه های ظاهری است که می بینیم و احیانا به عنوان مدیر وبلاگ یا سایت با آنها سر و کار داریم، در دنیای حرفه ای بیشتر سایت ها و صفحات وب برای ایجاد انواع قابلیت های تعاملی سمت کاربر، بررسی اعتبار فرم ها، ارتباط با سرور، شناسایی قابلیت های مرورگر کاربران، کار با کوکی ها (Cookie) و مواردی از این دست از جاوا اسکریپت استفاده می کنند، البته با همه این تفاسیر به دلیل سمت کاربر (Client-side) بودن این زبان (یعنی جاوا اسکریپت تنها روی مرورگر کاربران قابل اجراست و برای تفسیر آن از مفسر مرورگر استفاده می شود نه سرور سایت)، در عین قدرتمندی محدودیت هایی نیز وجود خواهد داشت که جزء ویژگی های ذاتی هر زبان برنامه نویسی محسوب می شود.

اهمیت آموزش جاوا اسکریپت (JavaScript)

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

دانش و برنامه های مورد نیاز برای یادگیری جاوا اسکریپت

برای فراگیری جاوا اسکریپت لازم است که ابتدا با HTML و CSS آشنا باشیم، به طور خاص در وب داشتن تسلط و دانش کافی در این دو زبان به نوعی پیش نیاز محسوب می شود، کدنویسی را نیز می توانیم در برنامه های ویرایشگر متنی مختلف انجام دهیم، از برنامه ساده Notepad ویندوز تا برنامه های قدرتمند مانند phpStorm، Dreamwaever، NetBeans و... همگی می توانند مورد استفاده قرار گیرند، در حال حاضر توصیه ما استفاده از برنامه قوی phpStorm است، در نهایت کدهای نوشته شده باید در صفحات HTML استفاده و با فراخوانی در مرورگر اجرا شوند.

نکات کلی که باید در رابطه با جاوا اسکریپت بدانیم

قبل از پرداختن به ادامه بحث نکات کلی را یادآور می شویم که در کار با دستورات جاوا اسکریپت لازم است آنها را بدانیم، اهمیت به خاطر داشتن این نکات در این است که حتی یک ایراد کوچک کدنویسی نیز می تواند موجب از کار افتادن کل برنامه شود، این موارد را به جهت پراکنده بودن در مبحثی جداگانه مطرح نکرده و در همین قسمت به صورت موردی مرور می کنیم:
- مفسر جاوا اسکریپت حساس به حروف بزرگ و کوچک است، یعنی به فرض عبارت var با Var از نظر مفسر این زبان متفاوت هستند.
- برای قرار دادن متن توضیحات یا راهنمای بین کدها از شیوه

/*متن راهنما*/

یا

//متن راهنما

استفاده می کنیم، این متن در هنگام اجرای کدها هیچ تاثیر خاصی ندارد اما برای درج توضیحات و یا راهنمایی در خصوص شیوه کدنویسی استفاده می شود، مثال:

<script type="text/javascript">
//متن توضیحات
var test = 1;
alert(test);
</script>

- کدهای جاوا اسکریپت بین تگ head یا body قابل درج و اجرا هستند، علاوه بر این به صورت فایل خارجی نیز می توانیم آنها را در صفحه وارد کنیم، در حالت حرفه ای توصیه می شود جهت خواناتر شدن کدنویسی عموما از شیوه فایل خارجی استفاده کنیم، همچنین درج کدها و فایل های جاوا اسکریپتی در قسمت های انتهایی تگ body به جهت رعایت اصول بهینه سازی و افزایش سرعت بارگذاری ترجیح دارد.
- جاوا اسکریپت زبانی سمت کاربر (Client-side) است یعنی تنها در مرورگر کاربران قابل پردازش و اجرا می باشد، این عبارت در مقابل زبان های سمت سرور (Server-side) استفاده می شود که برای اجرا نیاز به یک سرور آنلاین یا لوکال دارند (مانند زبان برنامه نویسی PHP).
- نوع داده در جاوا اسکریپت می تواند به سه صورت عددی (Int) به فرض 1، رشته ای (String) به فرض book یا بولین (Boolean) یعنی به صورت true یا false باشد، همچنین در صورتی که یک منبع تعریف شده اما مقداری نداشته باشد به صورت undefined و در صورتی که مقدار آن به هر دلیل خالی باشد به صورت null در نظر گرفته می شود، مثال:

<script type="text/javascript">
var test;
alert(test);
</script>

با اجرای کد بالا مقدار undefined در پنجره مرورگر نمایش داده خواهد شد چرا که متغیر فرضی test تعریف شده اما مقداری به آن اختصاص داده نشده است، بر همین اساس نمونه کد زیر مقدار null را نمایش خواهد داد:

<script type="text/javascript">
var test = null;
alert(test);
</script>

همان طور که مشخص است متغیر test با مقدار null تعریف شده است.

چند مثال از کاربرد جاوا اسکریپت در صفحات وب

برای کسب آشنایی اولیه و شروع عملی آموزش ها بد نیست چند مثال ساده از قابلیت های اسکریپت نویسی این زبان در صفحات وب را با هم بررسی کنیم، در زیر کدی را جهت نمایش پیام هشدار در پنجره مرورگر درج کرده ایم که به کمک متد alert و آبجکت window به محض پردازش صفحه در مرورگر نمایش داده می شود.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد یک هشدار در جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    text-align:justify;
    font-size:12px;
    direction:rtl;
}
</style>
<script type="text/javascript">
//نمایش یک پیام
window.alert("سلام! این یک پیام جاوا اسکریپت است");
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
</noscript>
<hr>
کدهای جاوا اسکریپت بین تگ script نوشته می شوند.
</body>
</html>

پیش نمایش
همانطور که می بینیم شیوه نوشتاری (Syntax) این زبان به طور کلی به صورت زیر است:

object.method(argument1, argument2);

آبجکت ها در جاوا اسکریپت می توانند به طور مثال document یا window و متد نیز به فرض write، alert باشند، در صورت عدم آشنایی قبلی با این مفاهیم (آبجکت، متد) جای نگرانی نیست، همین که بدانیم چگونه از نمونه کدها مطابق با نیازمان پیروی کنیم، کافی خواهد بود، دستورات جاوا اسکریپت بین تگ های script نوشته و صفت type با مقدار text/javascript برای این تگ استفاده می شود، البته استفاده از این صفت در HTML نسخه 5 دلخواه است و حذف آن مشکلی به وجود نمی آورد اما در حال حاضر بهتر است این صفت را حذف نکنیم! از تگ noscript نیز برای نمایش پیام هشدار به کاربر در صورت فعال نبودن جاوا اسکریپت در مرورگر استفاده می کنیم، اگرچه در اغلب مرورگرها جاوا اسکریپت جزء ملزومات اولیه بوده و به صورت پیش فرض فعال است اما ممکن است به دلایلی خواسته یا ناخواسته این امکان غیرفعال باشد، در این صورت با نمایش پیام هشدار کاربر را نسبت به این موضوع آگاه می کنیم.

مثالی دیگر با جاوا اسکریپت

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد یک پاراگراف در جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<script type="text/javascript" src="docwrite.js"></script>
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    text-align:justify;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
</noscript>
<hr>
کدهای این صفحه به صورت یک فایل خارجی ایمپورت شده است.
</body>
</html>

کد ایمپورت شده در صفحه:

document.write("کد جاوا اسکریپت، ایجاد یک پاراگراف و نمایش تاریخ:<br>");
 document.write("<p>" + Date() + "</p>");

پیش نمایش
همان طور که اشاره شد، کدهای جاوا اسکریپت را می توان به صورت فایل خارجی نیز در صفحه ایمپورت کرد که در مثال بالا در قسمت src به صورت آدرس دهی نسبی مشخص است، برای کاهش حجم کلی صفحات وب و افزایش سرعت بارگذاری بهینه تر این است که دستورات جاوا اسکریپت را تا حد امکان در یک یا چند فایل تجمیع کرده و بین تگ head قرار دهیم، البته در مواردی نیز ممکن است مجبور باشیم کدها را در انتهای صفحه یا در بخش دیگری درج کنیم، به طور مثال اگر فایل از سروری خارجی (دامنه ای به غیر از سایت اصلی) در صفحه بارگذاری شود، اختلال در بارگذاری آن فایل (به این دلیل که اغلب مرورگرها تا هنگام بارگذاری کامل فایل های js از پردازش ادامه صفحه خودداری می کنند) می تواند موجب تاخیر در بارگذاری کل صفحه شود و ممکن است مجبور باشیم اینگونه فایل ها را در انتهای صفحه قرار دهیم.
نکته: عبارت Date به کار رفته در کد بالا یک تابع درونی جاوا اسکریپت است (یعنی این تابع و ویژگی های آن از قبل در مفسر تعریف شده است)، از تابع Date برای موارد مربوط به تاریخ و زمان استفاده می شود (در آموزش های بعدی به صورت اختصاصی در این رابطه بیشتر خواهیم گفت).
در مطالب پیش رو گام به گام با مفاهیم، دستورات و قابلیت های این زبان آشنا خواهیم شد تا در نهایت به تسلط کافی برای نوشتن اسکریپت ها و برنامه های مورد نیازمان دست پیدا کنیم.

دسته بندی: آموزش مقدماتی » JavaScript

برچسب ها: HTML - JavaScript

قبلی »

« بعدی

مطالب بیشتر:
دستورات شرطی (Conditional Statements) در جاوا اسکریپت (JavaScript)
متدهای کار با آرایه در جاوا اسکریپت (JavaScript)
حلقه for و while در جاوا اسکریپت (JavaScript)
عملگرها (Operators) در جاوا اسکریپت (JavaScript)
رویدادها (Events) در جاوا اسکریپت (JavaScript)

دیدگاه

۹۰ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

محمد

۱۲:۴۹ ۱۳۹۳/۰۳/۳۱

با جاوا نسخه و اسم مرورگر رو بدست می آوردم. ولی راهی برای بدست اوردن ip هست؟

خیر، صرف جاوا اسکریپت این امکان را ندارد، مگر اینکه با Ajax و PHP ترکیب شود.

محمد

۱۳:۱۷ ۱۳۹۳/۰۳/۳۰

ببخشید. لطفا به

http://xzn.ir/hosting/free

آدرس بروید. نوشته هاست رایگان 20 گیگابایت. درسته؟ میشه از آن استفاده کرد.؟

استفاده از هاست های رایگان تنها برای موارد آزمایشی توصیه می شود!

محمد

۱۹:۳۱ ۱۳۹۳/۰۳/۲۹

پس اینجوری دیگه سوالی نیست. چون اگه قرار باشه php باشه جاوا رو می خوام چیکار!!؟ بازم ممنون از راهنماییتون.

جاوا اسکریپت و PHP در کنار هم کاربردهای خاص خود را دارند!

محمد

۱۵:۰۳ ۱۳۹۳/۰۳/۲۹

شما زبان برنامه نویسی می شناسید که در بلاگفا به جز جاوا اسکریپت عمل کند؟ من خودم تقریبا php رو تا سطح معمولی بلدم ولی تو وبلاگ قابل استفاده نیست. یا با استفاده از کوکی ها می توان یک آمار بازدید برای وی ساخت؟؟ یا مثلا نظر سنجی ساخت؟ خواهشا راهنماییم کنید. در ضمن من کلاسی چیزی نرفتم.

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

محمد

۱۸:۱۱ ۱۳۹۳/۰۳/۲۶

در جاوا اسکریپت میشه یک اطلاعات وارد شده در input را به صفحه ای دیگر انتقال و نمایش داد؟

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

بهنام

۲۰:۱۲ ۱۳۹۳/۰۲/۳۰

سلام
انتظار من این بود تا حدی از کمک شما استفاده کنم، من دستور innerHTML را به خوبی درک میکنم

function Chat(){
	AjaxStart();
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			document.getElementById('Chatinhalt').innerHTML = xmlhttp.responseText;
			var Elm = document.getElementById('Chatinhalt');
			Elm.scrollTop = Elm.scrollHeight;
		}else{
			var x = '<img src="../img/loading.gif" alt="کمی صبر کنید..." title="در حال بارگذاری صفحه" />';
			document.getElementById('Chatinhalt').innerHTML = x;
		}
	}
	xmlhttp.open("POST","../php_ajax/ajax_chat.php");
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlhttp.send("showpm=showpm");
}

این کدهای آژاکس من است ؛ فقط نمیدونم فانکشن را کجا صدا بزنم

Chat();

میتونستم کاری کنم که هر بار کاربر ماوس را حرکت داد یا در صفحه کلیک کرد عمل کنه ولی بجای اینجار ها از این استفاده کردم

setInterval("Chat();",2000);

و کل کدها را می گیرد هر 2 ثانیه ریفرش میدهد لطفا کمکم کنید که چطوری پیام های جدید را ریفرش کند که در صفحه نمایش داده شود ولی این کل پیام های درون دیتابیس را ریفرش میدهد و صفحه مرورگر هنگ می کند به فرض در دیتابیس 1000 تا پیام وجود دارد هر 2 ثانیه بخواهد آژاکس آپدیت بشه و کل کدها رو نمایش بده به نظر کار زیاد جالبی نیست ؛ ممنون میشم یه راه حلی پیشنهاد کنید.

اینکه گفتیم باید تجربه بیشتر داشته باشید دقیقا به همین خاطر بود، یک برنامه کاربردی با این حجم زیاد رد و بدل اطلاعات بین کلاینت و سرور باید با حداکثر بهینه سازی نوشته شود، به طور مثال به جای دریافت کل اطلاعات، تنها باید ردیفی گرفته شود که قبلا فراخوانی نشده باشد، این کار به روش های مختلف امکان پذیر است، به فرض هر ردیفی که قبلا به کلاینت منتقل شده با یک ستون و مقادیر فرضی غیر فعال شود، یا در سمت مرورگر مقادیر موجود نباید تغییر کنند، بلکه صرفا مقادیر جدید به خروجی اضافه شود (این کار با innerHTML ممکن است، برای آشنایی بیشتر نمایش زنده آمار با Ajax را در وب جستجو کنید)، در کل نوشتن این پروژه نیازمند داشتن هوش تئوری بالا در طراحی برنامه های تحت وب است که این هم بیشتر با تمرین حاصل می شود.

بهنام

۰۱:۴۲ ۱۳۹۳/۰۲/۳۰

سلام
ممنون
یه سوالی در مورد تابع setInterval داشتم ؛ ممنون میشم اگه کمکم کنید
من با آژاکس فرضا یک چت با آژاکس درست کردم
کاری کردم که با آژاکس کل متن های درون پایگاه داده را با دستور select در mysql داخل مرورگر نمایش داده بشه و گفتم که اگر به پایگاه داده متن جدیدی اضافه شد یک ثانیه بعد در صفحه متن جدید را نمایش بدهد
و در جاوا اسکریپت setInterval را کاری کردم که هر ثانیه متن های جدید را نمایش بدهد و مشکلی در صفحه بوجود آماده اینه که هر یک ثانیه کل کد ها رو یعنی هرچی در صفحه هست را هر یک ثانیه ریفرش میدهد البته ریفرش آژاکسی که فرضا متن ها خاموش روشن میشوند و من میخواهم کاری کنم که بدون این کار هر ثانیه متن های جدید را نمایش بدهد ولی نه به این صورت.

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

بهنام

۲۲:۰۵ ۱۳۹۳/۰۲/۲۸

سلام
من تو وبلاگم یه کدی نوشتم که میخواهم به کاربر هر 5 دقیقه بهش خبر بدم که اگه 5 دقیقه تو وب بمونه بگه شما 5 دقیقه اینجا هستید بعد 10 دقیقه شد بگه 10 دقیقه اینجا هستید یعنی کلا هر 5 دقیقه بهش اخطار بده و کد هام همینه نمیدونم چرا فقط دفعه اول اخطار رو میده

<script type="text/javascript">
window.onload = function(){
	setInterval(function(){
		var i = document.getElementById('time').value;
		i++;
		for(var x = i; x == 20; x = x * 2){
			alert('شما'+i+'دقیقه ای است که وارد سایت هستید');
		}
		document.getElementById('time').value = i;
	},100);
}
</script>

<input type="text" id="time" value="0" />

کد را باید به صورت زیر استفاده کنید:

<script type="text/javascript">
window.onload = function(){
	setInterval(function(){
		var i = document.getElementById('time').value;
		i++;
		alert('شما'+ i +'دقیقه ای است که وارد سایت هستید');
		document.getElementById('time').value = i;
	}, 60000);
}
</script>

پارامتر دوم متد setInterval در واقع مدت زمان فراخوان بعدی تابع به میلی ثانیه است که 60000 برابر با 60 ثانیه است.

بهنام

۱۵:۳۹ ۱۳۹۳/۰۱/۱۴

سلام
توضیحاتی که دادین عالی بود کار کرد و خیلی ممنون
من یه وبلاگ آزمایشی ساختم و قالبی که درست کردم را گذاشتم داخلش و یه سوالی داشتم:
داخل وبلاگ نوشتن بستن پنجره رو اون کلیک کنید پنجره بسته میشود و کد های بستن پنجره همین هستن

function DisplayHeader(){
document.getElementById("header").style.transition = "width 7s, height 5s";
	document.getElementById("header").style.width = "0";
	document.getElementById("header").style.height = "0";
	document.getElementById("header").style.border = "none";
}

میدونم یه نقص هایی دارد و بعضی از مرورگر ها از این کد پشتیبانی نمی کنند
مثال در این کد

document.getElementById("header").style.transition = "width 7s, height 5s";

خاصیت transition قبلش -moz- یا -webkit- و ... نمیشود اینجا تعیین کرد چگونه میشود تعیین کنم؟
و سوال دوم:
همانطور که میبینید برای هر خاصیتی یه کد نوشته شده مثلا برای border و height و width و transition و کدها سنگین می شوند می خواهم راه ساده تری بیان کنید نمی شوند این گونه نوشت؟

document.getElementById("header").style.("width:0;height:0;border:none;transition:width 7s, height 7s;-moz-transition:width 7s, height 7s;");

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

document.getElementById("header").style.setProperty("-webkit-transition", "left 5s linear");

در مورد سوال دوم، راه حلی آن طور که مد نظر شما است وجود ندارد، اما می توانید قسمت های مشابه را در یک متغیر تعریف کنید، به فرض:

var elm = document.getElementById("header").style;
elm.width = '0px';
elm.height = '0px';

بهنام

۰۱:۳۶ ۱۳۹۳/۰۱/۱۲

سلام
یه سوال داشتم:
من دوتا تگ marquee دارم

<marquee direction="down" scrollamount="2" scrolldelay="90" style="text-align:center;" onmouseover="this.stop()" onmouseout="this.start()" behavior="scroll" id="scroll_links">

و دیگری

<marquee direction="down" scrollamount="2" scrolldelay="90" style="text-align:center;" onmouseover="this.stop()" onmouseout="this.start()" behavior="scroll" id="scroll_peyvands">

توجه: قسمت آی دی نام آی دی ها با یک دیگر فرق می کنند

<a href="#" onclick="scroll_peyvands.direction = 'up';scroll_peyvands.start();scroll_links.direction = 'up';scroll_links.start()">حرکت به بالا</a>

کلیک میکنی متون به سمت بالا در می آیند
و فقط در تگ marquee اولی عمل می کند و دومی همچنان به حرکت کردن به بالا ادامه میدهد ولی اگه جای این ها رو عوض کنی دومی به حرکت در می آیند به طور مثال این کد را:

scroll_peyvands.direction = 'up';scroll_peyvands.start();scroll_links.direction = 'up';scroll_links.start()

به این صورت نوشت

scroll_links.direction = 'up';scroll_links.start();scroll_peyvands.direction = 'up';scroll_peyvands.start()

اکنون marquee پایینی عمل می کند دلیلش را نیافتم لطفا کمکم کنید اول دو تا آی دی ها یکی بود باز هم نمیشد آی دی ها رو عوض کردم باز هم نشد آیا شما راه بهتری سراغ دارید؟ چطور میشود با یه کلیک کردن مثلا ما 5 عدد تگ marquee داریم و میخواهیم هم زمان با کلیک کردن تغییرات اعمال بشه؟

از نمونه کد زیر برای کنترل تگ marquee استفاده کنید:

<script type="text/javascript">
function changeMarquee(dir){
	var elm = document.getElementsByTagName('marquee');
	for(var i = 0; i < elm.length; i++){
		if('direction' in elm[i]){
			elm[i].direction = dir;
		}
		else{
			//Google Chrome & Safari
			elm[i].setAttribute ("direction", dir);
		}
	}
}
</script>
<marquee direction="down" scrollAmount="2" scrolldelay="90" style="text-align:center;" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 1, 0);" behavior="scroll" id="scroll_links">1</marquee>
<marquee direction="down" scrollAmount="2" scrolldelay="90" style="text-align:center;" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 1, 0);" behavior="scroll" id="scroll_peyvands">2</marquee>
<a href="#" onclick="changeMarquee('up');">حرکت به بالا</a>
<a href="#" onclick="changeMarquee('down');">حرکت به پائین</a>

نکته: حالت this.stop و this.start در برخی مرورگرهای جدید پشتیبانی نمی شود، از this.setAttribute مطابق نمونه استفاده کنید.

بهنام

۰۲:۳۰ ۱۳۹۳/۰۱/۱۰

ممنون از زحمات شما
جواب سوال را یافتم تشکر
من متغیر را به نام i نامیده بودم ؛ اسم متغیر را عوض کردم درست شد

var Default = 1;
function ChangeBg(){
	Default++;
	document.getElementById("body").style.background = "url(img/body"+Default+".jpg) repeat left top #000";
	if(Default == 4){
		Default = 0;
	}
}

باز هم تشکر

بهنام

۲۳:۴۷ ۱۳۹۳/۰۱/۰۹

سلام مجدد
این روش را انجام دادم ولی باز هم نمیدونم چه ایرادی داره کد را به این صورت نوشتم:

function ChangeBg(){
	var i = 1;
	i++;
	alert(i);
}

که با هر کلیک یک شماره اضافه بشه ولی فقط یک بار اضافه شد کلیک های بعدی اضافه نمیشه
و به این صورت نوشتم:

var i = 1;
function ChangeBg(){
	i++;
	alert(i);
}

ولی این بار با هر کلیک اضافه میشود اما از یک اضافه میشه میخوام مقدار پیش فرضش 1 باشه و 1 عدد اضافه بشه بشه 2 ولی متغیر بیرون از فانکشن نادیده گرفته میشه مشکل از چیه؟

بهنام

۲۳:۱۱ ۱۳۹۳/۰۱/۰۹

به این روش هم میشه تجزیه کرد

window.onload = function(){
	document.cookie = "menu=all; max-age=60";
	alert(document.cookie.split("=")[1]);
}

بهنام

۱۶:۳۷ ۱۳۹۳/۰۱/۰۸

سوال بعدی در مورد کوکی در جاوا اسکریپت این که چگونه یه کوکی را مقدارش را با alert نمایش دهیم

window.onload = function(){
	document.cookie = "content=valueone; max-age=60;";
}
alert(document.cookie['content']);

مقادیر کوکی را نمی توانید به صورت مستقیم دریافت کنید، باید پارامترها را به روش نمونه زیر تجزیه کنید:

//get cookie value
var cookie_name = "content";
var cookie_value = "";
var cookie_start;
var cookie_end;
if(document.cookie.length > 0){
	cookie_start = document.cookie.indexOf(cookie_name + "=");
	if(cookie_start != -1){
		cookie_start = cookie_start + cookie_name.length + 1;
        cookie_end = document.cookie.indexOf(";", cookie_start);
        if(cookie_end == -1){
			cookie_end = document.cookie.length;
        }
		cookie_value = unescape(document.cookie.substring(cookie_start, cookie_end));
        alert(cookie_value);
    }
    else{
         alert('Error!');
    }
}

بهنام

۱۳:۴۰ ۱۳۹۳/۰۱/۰۸

سلام همیشه قدردان زحمات شما بوده و هستم من یکی از پربازدیدکنندگان سایت وبگو هستم که همه ی مطالباتون رو خوانده ام و منتظر آموزش های بعدی شما هستم
یه سوال دارم
چطور میشه با جاوا اسکریپت یک لینکی رو ایجاد کنی مثلا من این کد رو نوشتم

<a href="#" onclick="ChangeBg();">تغییر تصویر زمینه پست ها</a>
و کد جاوا اسکریپت
function ChangeBg(){
	for(var i = 1; i <= 3; i++){
		document.getElementById("post").style.background = 'url(post'+i+'.jpg)';
	}
}

میخوام با هر کلیک یک عکس عوض بشه با کلیک اول عکس اول با کلیک دوم عکس دوم و با کلیک سوم عکس سوم من این رو نوشتم و با کلیک اول عکس آخر عوض میشه و نوبت به قبلی ها نمیرسه

نظر لطف شما است، در مورد سوال، در تئوری باید یک متغیر خارج از تابع داشته باشید که در واقع همان مقدار i و با مقادیر پیش فرض 1 باشد، در تابع به جای حلقه for (به حلقه نیازی ندارید، چون در هر کلیک تنها یک دستور باید اجرا شود) ابتدا تصویر پس زمینه را تنظیم کنید، سپس مقدار i را یک واحد افزایش دهید، در کلیک بعدی مقدار i عدد 2 خواهد شد و البته در کلیک بعدی وقتی به 3 رسید باید دستور شرطی داشته باشید که آن را مجددا به 1 تبدیل کند!

صفحه 5 از 6

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.