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

پنجشنبه ۰۴ اردیبهشت ۱۴۰۴

Thursday, April 24, 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

قبلی »

« بعدی

مطالب بیشتر:
تعریف و استفاده از متغیر (Variable) در جاوا اسکریپت (JavaScript)
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
عملگرها (Operators) در جاوا اسکریپت (JavaScript)
رویدادها (Events) در جاوا اسکریپت (JavaScript)
کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)

دیدگاه

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

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

بهنام

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

سلام استاد بزرگوار خسته نباشین
امیدوارم موفق باشی من منتظر بروز رسانی سایتتون هستم

بهنام

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

با تشکر از شما
یه سوال داشتم چرا سایت وبگو به روز نمیشه؟ خوشحال میشم مطلب جدیدی و آموزش های جدیدتری ارسال کنید با تشکر

فعلا آموزش ها به همین روال خواهند بود تا روند تغییرات سایت تکمیل و به نسخه جدید به روزرسانی گردد!

بهنام

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

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

function NewDaste(){
	document.getElementById('page').style.display = 'none';
	var elm = document.getElementById('newpage').style;
	elm.display = 'block';
	elm.margin = 'auto';
}

من یه کد نوشتم و وقتی فانکشن را صدا میزنم در مرورگر فایرفاکس به خوبی عمل میکند و در گوگل کروم کار نمیکنه چرا؟

<option value="newcat" onclick="NewDaste();">ایجاد یک دسته جدید</option>

در ضمن موقع فراخوانی تابع به این صورت هست
ولی اگه به تگ دیگه ای onclick بدم تو کروم هم کار میکنه تو تگ آپشن کار نمیکنه

تشکر، رویداد onclick برای تگ option پشتیبانی نمی شود، به جای آن از onchange برای تگ select استفاده کنید و برای برگرداندن مقدار انتخاب شده، در قسمت آرگومان تابع، this.value قرار دهید.

<script type="text/javascript">
function alertValue(value){
	alert(value);
}
function alertText(element){
	var text = element.options[element.selectedIndex].text;
	alert(text);
}
</script>
<select onchange="alertValue(this.value)">
<option value="1">select 1</option>
<option value="2">select 2</option>
<option value="3">select 3</option>
</select>
<select onchange="alertText(this)">
<option value="1">select 1</option>
<option value="2">select 2</option>
<option value="3">select 3</option>
</select>

بهنام

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

سلام
در کد زیر میخواهم پنجره ی پیغام در صورتی که فیلدی خالی بود ظاهر شه و بین دو تا + + ها کدی بنویسید که اگر فیلد های 2 و 3 خالی بود بگه لطفا فیلد 2 را خالی نگذارید یک بار دیگه برای فیلد 3 همچین پیغامی را بده در واقع قسمت آرایه هارو میخوام برگردانه

var elm = new Array();
function myFunction(){
	var elm = new Array();
	elm[0] = myform.name;
	elm[1] = myform.famil;
	elm[2] = myform.sen;
	elm[3] = myform.about;
	for(var i = 0; i <= 3; i++){
		if(elm[i].value.length < 1){
			alert('لطفا فیلد ' +  + ' را خالی نگذارید');
		}
	}
}

اگر درست متوجه سوال شده باشیم، هر دور از حلقه مخصوص به یک عضو آرایه است، لذا متغیر i یا i + 1 می تواند بین دو + + استفاده شود.

بهنام

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

سلام
خسته نباشید

بهنام

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

سلام
کد اسکی یعنی چه؟ آیا کد اسکی همان کی کد است؟

document.write('w'.charCodeAt(0));

در کد فوق معنی اینکه کد اسکی w 119 است یعنی چه؟

عبارت ASCII مخفف American Standard Code for Information Interchange است که در اصطلاح به مجموعه ای از کاراکترهای تعریف شده در قالب یک استاندارد جهت تفهیم علایم به سیستم ها در قالب جدول اعداد گفته می شود، به عبارتی در این استاندارد هر عدد معادل یک حرف یا کاراکتر خاص است، این استاندارد به این دلیل که کامپیوترها اغلب تنها قادر به پردازش اعداد بودند شکل گرفت و امروزه کاربردهای مختلف دارد، اطلاعات بیشتر:

http://www.asciitable.com

مهدی

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

با سلام. آیا امکان دارد متغییری را تعریف کرد. سپس متن یک text را به آن مقدار دهی کرد. سپس محتوای این متغییر را با قسمت خاصی از متن یک textarea جایگزین کرد؟؟
یا حداقل به قسمت مشخصی از متن textarea اضافه کرد. اگر می شود لطفا توضیحاتی درباره آن ها بدهید.

سوال مبهم و کلی است! در مجموع این کار در شرایطی شدنی است منتها بسته به هدف و سورس صفحه، ممکن است نیاز به کدنویسی خاصی باشد به طور مثال استفاده از عبارات باقاعده (Regex) و متدهای مربوطه.

بهنام

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

سلام و عرض ادب.
سوالی داشتم : چرا در کد زیر کد:

eighteenth = document.getElementById('nineteenth').innerHTML;

را قبلش با var شروع کنیم کد دچار مشکل میشود و دیگر تایپ نمیکند؟ یعنی کد بالا را به این صورت ویرایش کنیم

var eighteenth = document.getElementById('nineteenth').innerHTML;

در کد زیر:

var seventeenth = 0;
window.onload = function(){
	eighteenth = document.getElementById('nineteenth').innerHTML;
	document.getElementById('nineteenth').innerHTML = '';
	sixth();
}
function sixth(){
	document.getElementById('nineteenth').innerHTML += eighteenth.charAt(seventeenth);
	if(seventeenth < eighteenth.length){
		seventeenth++;
		setTimeout('sixth()', 100);
	}
	else return true;
}

از متغیر eighteenth در توابع دیگر استفاده شده، لذا نمی تواند درون تابع با عبارت var تعریف شود، چون دامنه شمول (Scope) آن محدود به تابع می شود و از بیرون تابع قابل فراخوانی نیست، اگر متغیر بدون عبارت var (یا با عبارت var ولی بیرون از توابع) تعریف شود، دامنه سراسری یا Global Scope می گیرد و در همه جای کدها قابل دسترسی است.

بهنام

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

سلام
نهایت تشکر را از شما دارم امیدوارم در این دنیا و آخرت خیر ببینی با تشکر !
لطف بفرمایید لینک لیست رویدادها در جاوا اسکریپت را بدین به طور اتفاقی تو سایتتون پیدا کردم دیگه یادم رفت کجا بود!

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

http://webgoo.ir/example/javascript/javascript-event-list.html

بهنام

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

سلام
از جواب دقیق شما بسیار ممنون، کامل فرا گرفتم فقط چند سوال جزئی مانده:

x_pos = document.all ? window.event.clientX : e.pageX;

1. شرط document.all چه موقع ای اعمال میشه؟ یعنی چه موقع ای window.event.clientX اجرا میشود؟
2. و document.all یعنی چه؟
3. چرا window.event.clientX آره ؟ چرا e.clientX نه؟ چرا از window.event استفاده شده است؟
4. اگر کد:

x_pos = document.all ? window.event.clientX : e.pageX;

را به کد زیر تغییر دهیم مشکلی از نظر من پیش نمیاید و فرقشون چیه؟ چه اتفاقی بعد ها میفته؟

x_pos = e.pageX;

در یک توضیح می توان پاسخ تمام سوالتتان را داد:
document.all شرط نیست، متدی برای دسترسی به تمام عناصر موجود در صفحه HTML یا HTML DOM است، البته این متد قدیمی و مخصوص مرورگر IE است که اگر توسط مرورگر پشتیبانی شود (یعنی مرورگر نسخه قدیمی IE باشد)، قسمت window.event اجرا و در غیر این صورت e اجرا می شود (e مخفف Event و معرفی برای بروز یک رویداد در مرورگرهای جدید است)، لذا در مرورگرهای جدید اگر قسمت نخست را حذف کنید اتفاق خاصی نمی افتد!

بهنام

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

سلام
خیلی تشکر می کنم بابت جواب.
لطفا ایمیلتون رو چک کنید.

بهنام

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

یه سوال دیگه داشتم
نمیدونم سی اس اس بود یا جاوا اسکریپت یا پی اچ پی ولی این امکان رو میداد:
در تگ table مثلا ستون چند تا ستون داریم فکر کنم سی اس اس اس بود که میشد ستون های فرد و ستون های زوج را هرکدام یه استایلی بدیم لطفا آن کد را معرفی کنید؟

این کار با PHP و CSS انجام می شود، با PHP به صورت زوج و فرد تگ های tr با دو کلاس CSS متفاوت خروجی داده می شوند و نتیجه جدولی با ستون های زوج و فرد دیده می شود، مثال در قسمت PHP:

<?php
$class = "color-1";    
while($row = mysql_fetch_array($result)){
	if($class == "color-1"){
		echo "<tr class='$class'>";
		$class = "color-2";
	}
	else{
		echo "<tr class='$class'>";
		$class = "color-1";
	}
	echo "<td>" . $row['FirstName'] . "</td>";
	echo "<td>" . $row['LastName'] . "</td>";
	echo "</tr>";
}
?>

و در قسمت CSS:

<style type="text/css">
tr.color-1{
    background-color:#FFF;
}
tr.color-2{
    background-color:#CCC;
}
</style>

نتیجه فرضی:

<table>
<tr class="color-1">
<td>FirstName</td>
<td>LastName</td>
</tr>
<tr class="color-2">
<td>FirstName</td>
<td>LastName</td>
</tr>
<tr class="color-1">
<td>FirstName</td>
<td>LastName</td>
</tr>
</table>

بهنام

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

سلام
ممنون
لینکی که دادین کد های آن را در صفحه ی تو لوکال هاست میریزم اما با کلیک ماوس بلاک تکان نمیخورد ولی در لینکی که شما دادین تکان میخورد دقیقا همان کد ها را کپی کردم کار نکرد چرا؟

سعی کنید پلاگین مربوط به نمایش خطاهای جاوا اسکریپت را در مرورگر داشته باشید، به طور مثال پلاگین Web Developer Toolbar برای فایرفاکس، مشکل از این قسمت است:

document.getElementById('draggable-element').onmousedown = function () {
    _drag_init(this);
    return false;
};

که خطای

TypeError: document.getElementById(...) is null

می دهد، این قسمت زمانی باید اجرا شود که پیشتر بلاک div در HTML DOM پردازش شده باشد، به عبارتی یا باید بلاک div قبل از تکه کد اسکریپت قرار گیرید، یا بخش مورد نظر اسکریپت به صورت زیر ویرایش شود:

window.onload = function(){
	document.getElementById('draggable-element').onmousedown = function () {
		_drag_init(this);
		return false;
	};
}

بهنام

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

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

این نمونه آماده را بررسی کنید، واضح است:

http://jsfiddle.net/tovic/Xcb8d/light

محمد

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

چطوری میشه با جاوا اسکریپت یک چیزی مثل عکس رو حرکت داد؟

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

صفحه 4 از 6

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