كاش در دهكده عشـق فراواني بود
توي بـازار صداقت، كمي ارزاني بود

كاش اگر گاه، كمي لطف به هم مي‌كرديم
مختصـــر بـود ولــي ســاده و پنهانـي بــود

سلام

"اين وبلاگ را براي راه افتادن چندتا از دوستان، باز كردم. هم تشويقي براي شروع به كار آنها باشد و هم مرجعي براي جواب سوالهايشان. قصدم اين نبود كه زبان جاوا اسكريپت را به طور كامل، تدريس كنم. با وجود سايتهاي معتبر و تخصصي خارجي و ايراني، جايي براي چنين ادعايي نيست. ولي گاهي اوقات، اثري كه يك درس خصوصي و چند نفره دارد، يك كلاس عمومي، نخواهد داشت."

قريب يكسال پيش (پنجشنبه 19 آذر 1383)، با اين جملات، وبلاگ "آموزش جاوا اسكريپت" آغاز شد. آن روز به خاطر يك دوست خوب، نوشتم؛ و امروز كه آن دوست در بين ما نيست، در ميان شما دوستان خوب هستم.

الان كه به نوشته‌هاي آن روز نگاه مي‌كنم، از اينكه به هدفم نزديك شدم، خوشحالم؛ و خوشحالم كه اين درس، نيمه كاره نماند و به پايان رسيد؛ هرچند كه با مشكلاتي روبرو شد. تعداد دروسي كه در ذهنم بود، حدود 20 جلسه بود و خوشبختانه همينطور هم شد. از خدا خواستم كه از اين امتحان، رو سفيد بيرون بيايم و اميدوارم كه اينطور شده باشد. خدا را به خاطر فرصتي كه به من داد سپاسگزارم.

سرانجام كار، تو خوشند باشي و من رستگار

بعضي از دوستان، درس را جدي گرفتند و به نتيجه رسيدند، و بعضي به خاطر مشكلات يا سست عهدي، رفيق نيمه راه بودند. براي همه آنها آرزوي سلامت و موفقيت مي‌كنم.
از دوستاني كه مرا همراهي كرده و ابراز لطف نمودند، تشكر مي‌كنم.
از دوستاني كه به هر دليلي نتوانستم پاسخ نامه و سوالهايشان را بدهم عذرخواهي مي‌كنم. احتمال اينكه نامه‌يتان به دستم نرسيده باشد، يا پاسخ من، به دست شما، زياد است.
اگر در نوشتن درسها يا پاسخ به سوالها، تاخير نموده، و باعث تلف شدن وقتتان شدم، معذرت مي‌خواهم.

از دوستان خوبم ساحل، هستي، ايراني، mreza، الهام، رسول، ليلا، آشيل، جعفر، بهروز، مجتبي، پژمان قدرتي، حامد، وحيد، ناصر، رضا، حبیب میرزاي، کیومرث، هاني، ramyar، آزاده، هليا، Nice، محمد، افشين، سيد اكبر حسيني، اميررضا، سيد محسن هاشمي، علي، هنگامه، و ناشناس عزيز، تشكر فراوان كرده و همه را به خداي مهربان مي‌سپارم.

اين روزا بايد هممون براي هم سايه باشيم
شبـا يكـم دلـواپس كـودك همـسايه باشيم

اگـه بـه هـم كمـك كنيـم زنـدگـي ديـدنـي ميـشه
بر سر پيمان مي‌مونند دوستاي خوب تا هميشه

خدانگهدار

حركت 2

سلام

فرارسيدن ماه مبارك رمضان را به شما دوستان عزيز! تبريك مي‌گويم. اميدوارم كه اين ماه براي همه، پر از خير و بركت باشد.

تغييرات:
- بحث "حركت دادن اشيا" به اين جلسه اضافه شده است. (جمعه 15 مهر)

بحث ما حركت است. در جلسه قبل، مشاهده كرديد كه حركت پنجره به چه راحتي انجام پذير است. در اين ساعت، خواهي ديد كه حركت اشيا به دنبال اشاره‌گر موس نيز به سهولت امكان دارد.

• تعقيب اشاره‌گر

• براي اين عمليات، ابتدا موقعيت اشاره‌گر را به  دست مي‌آوريم. همانطور كه در تمرين جلسه قبل، اجرا شد، با اين دو دستور (event.clientY - event.clientX) مي‌شود موقعيت اشاره‌گر را گرفت.

نمونه:

• حالا بايد چيزي را كه مي‌خواهيد به دنبال اشاره‌گر، حركت كند مشخص نماييد. اين شي مي‌تواند از لحاظ ظاهر، متن يا عكس يا هر چيز ديگر، و از لحاظ محتوا، ثابت يا متغير باشد.
- سه متن بنويسيد؛ يك متن براي حركت عمودي، و يك متن براي حركت افقي، و يكي هم براي حركت كامل.
- هر كدام را داخل يك لايه قرار دهيد.
- لايه‌ها را به اين ترتيب نامگذاري نماييد: (div1 - divY - divX)
- استيل آنها را به اين صورت تعريف كنيد: (style=position: absolute). اين كد، به شي مورد نظر اجازه حركت مي‌دهد.

• كد HTML:

<p><div id="div1" style="position: absolute;">متن</div></p>
<p><div id="divY" style="position: absolute;">عمودي</div></p>
<p><div id="divX" style="position: absolute;">افقي</div></p>

• كد JavaScript:

function cursorPos() // تابع
{
// حركت عمودي و افقي
div1.style.top = event.clientY;
div1.style.left = event.clientX;
// حركت عمودي
divY.style.top = event.clientY;
// حركت افقي
divX.style.left = event.clientX;
}
document.onmousemove=cursorPos;

براي ديدن نمونه، اينجا كليك كنيد.

• حركت دادن اشياء

در اين مبحث، خواهيم آموخت كه چگونه به وسيله موس، اشيا را جابجا كنيم؛ همانگونه كه در ويندوز به راحتي انجام مي‌شود.

• مراحل عمليات:

- ساختن شي مورد نظر
- به دست آوردن موقعيت اشاره‌گر
- به دست آوردن موقعيت شي مورد نظر
- تعريف كردن رويداد كليك و كشيدن

• شيئي كه براي اين كار در نظر گرفته‌ام، يك جدول است كه شبيه كادرهاي محاوره‌اي در ويندوز مي‌باشد.
- اين جدول، داراي دو سلول است. سلول اول، براي عنوان كادر و محل كشيدن و جابجايي، و سلول پايين، محل نوشته محتوي است.
- داخل سلول اول، يك لايه (div) قرار داده‌ام به نام (moveMe1). جدول را هم (moveMe)، نامگذاري نموده‌ام.
- استيل جدول را به اين صورت تعريف كنيد: (style=position: relative). اين كد، به شي مورد نظر اجازه حركت مي‌دهد.

• كد HTML:

<table id="moveMe" style="position: relative;" border="0" width="200" bgcolor="#FBF9FB">
<tr>
<td bgcolor="#F6F4F6" align="center">
<div id="moveMe1">&nbsp;</div></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

• كد JavaScript:

mouseover = true
function coordinates()
{
if (!moveMe)
{
return
}
if (event.srcElement.id == "moveMe1")
{
mouseover = true
// موقعيت جدول
pleft = moveMe.style.pixelLeft
ptop = moveMe.style.pixelTop
// موقعيت اشاره‌گر
xcoor = event.clientX
ycoor = event.clientY
document.onmousemove = funmove
}
}
function funmove()
{
if (mouseover && event.button == 1) // اگر كليك چپ شد
{
moveMe.style.pixelLeft = pleft + event.clientX-xcoor
moveMe.style.pixelTop = ptop + event.clientY-ycoor
moveMe1.style.cursor = "move"; // تغيير شكل اشاره‌گر
moveMe.style.filter = "alpha(opacity=50)"; // استفاده از فيلتر آلفا
return false
}
}
function mouseup()
{
moveMe1.style.cursor = ""; // شكل عادي اشاره‌گر
moveMe.style.filter = "alpha(opacity=100)"; // از كار انداختن فيلتر آلفا
mouseover = false
}
document.onmousedown=coordinates
document.onmouseup=mouseup
 

• شرح كد:
- moveMe1.style.cursor = move = در جلسه 17، خوانديم كه شكل اشاره‌گر، قابل تغيير است. در اينجا، شكل "حركت" را انتخاب مي‌كنيم.
-  event.button == 1 = در جلسه 17، ديده شد كه كد كليك چپ، 1 است. با به دست آوردن اين كد، مي‌فهميم كه موس، در حالت كليك باقي مانده؛ يعني همان كشيدن به وسيله موس.
- moveMe.style.filter = "alpha(opacity=50)" = به وسيله اين كد، كه از زبان HTML است، به جدول خود، فيلتر آلفا، يا همان كمرنگ شدن در حالت جابجايي مي‌دهيم.

براي ديدن نمونه، اينجا كليك كنيد.

همانطور كه مشاهده كرديد، اين كار زيبا به سادگي امكان پذير است. شما هم مي‌توانيد در پايگاه و حتي وبلاگ خود، از كادرهاي متحرك استفاده كنيد. كادرهايي كه كاربر مي‌تواند آنها را جابجا نمايد. با به كارگيري كمي ذوق و سليقه، كادرهاي زيباتر، طبيعي‌تر و داراي قابليت بيشتري - مانند امكان كمينه (ميني مايز) كردن و يا بستن كادر - خواهيد ساخت.

اميدوارم كه اين درس برايتان مفيد بوده و از آن لذت ببريد.
به اميد ديدار
خدانگهدار

حركت 1
حركت پنجره

تغييرات:
به همين جلسه مطالبي (حركت و تغيير اندازه پنجره) اضافه شد. (شنبه 5 شهريور)

سلام

مفهوم حركت در رايانه و به خصوص وب، بحث جذاب و كاربردي است كه هم باعث زيبايي صفحات مي‌شود، هم توجه بيننده را به خود جلب مي‌كند و هم در بهتر ارايه كردن مطالب، دست ما را باز مي‌گذارد.

براي دو مورد اول، مثالهاي فراواني در پايگاه و وبلاگها وجود دارد. مثل اشكال و نوشته‌هايي كه به دنبال موس حركت مي‌كنند؛ يا ستاره‌هايي كه در صفحه، پخش مي‌شوند؛ يا نوشته‌هايي كه در نوار عنوان يا نوار وضعيت، در حال حركت هستند.

همانطور كه بهره‌برداري به جا از اين ابزار، باعث زيبايي و كارايي مي‌شود، استفاده بي‌مورد يا زيادي - كه متاسفانه در بعضي از وبلاگها مشاهده مي‌شود - باعث اذيت و خسته شدن بيننده خواهد شد؛ مخصوصا در دو نوار عنوان و وضعيت. به ياد داشته باشيد كه اين دو مكان، ساخته شده‌اند براي كار مهمتري؛ نه براي بازي و حركت بي‌مورد نوشته‌ها.

مفهوم حركت

حركت، نسبي است. كم و بيش با اين جمله آشنا هستيد. نظريه "نسبيت حركت"، مي‌گويد كه حركت شي، نسبت به اطراف او سنجيده مي‌شود. تصور كنيد در قطار هستيد. شما نسبت به اشيا بيرون از قطار، در حال حركت هستيد. از بعضي دور مي‌شويد و به بعضي نزديك؛ كه اين بستگي به "جهت حركت" شما دارد. اما نسبت به خود قطار، حركتي نداريد؛ مگر اينكه در همان قطار، شروع به راه رفتن كنيد.

كره زمين براي ما ثابت و بي‌حركت است؛ اما نسبت به كهكشان، جـِـرم كوچكي است در حال حركت. اشياء داخل صفحه وب نيز همين حالت را دارند؛ كه بزرگترين و مهمترين آن، خود پنجره (window) است.

انواع حركت

به يك صفحه، خوب نگاه كنيد. به نظر شما چه چيزهايي مي‌توانند حركت كنند؟ آيا همه حركتها، از يك نوع است؟ عامل اصلي حركت چيست؟

ظاهرا مي‌شود گفت هر چيزي كه در صفحه وجود دارد، قابل حركت است. ظاهرا حركتها از يك نوع نيستند؛ چون "نيروي محركه" آنها تفاوت دارد. چه چيز باعث حركت اشاره‌گر موس مي‌شود؟ خود پنجره قابل حركت است. مي‌توانيد با كليك بر روي نوار عنوان، آنرا گرفته و به هر نقطه كه تمايل داريد بكشيد. اگر تغيير اندازه را هم نوعي حركت بدانيم، با نوع متفاوتي از حركت روبرو خواهيم شد.

قالب حركت

در رايانه، قالبي وجود دارد كه موقعيت اشيا، نسبت به آن سنجيده مي‌شود. بالا و پايين، چپ و راست. اين چهار جهت اصلي، قالب ما هستند و موقعيت يك آيكون، نوشته، عكس يا پنجره، نسبت به آنها سنجيده مي‌شود. چرا مي‌گوييم اين پنجره از آن پنجره بالاتر است؟ چون نسبت به بالا، نزديكتر است.

اگر اين بخش را هم خوب درك كرده باشيد، متوجه مي‌شويد كه براي شروع كار، لازم است "موقعيت جغرافيايي" يا همان "طول و عرض جغرافيايي" را به دست بياوريم. خوشبختانه در زبان جاوا اسكريپت، دستورات لازم براي به دست آوردن آن، وجود دارد.

از چهار جهت اصلي، دو جهت، معيار هستند؛ بالا و چپ. البته ما فارسي‌ زبانها، چون از راست به چپ مي‌نويسيم و آرايش صفحات ما از راست به چپ است، بهتر است تا آنجا كه ممكن است، بالا و راست را معيار خود قرار دهيم.

طول جغرافيايي - فاصله از بالا - را با y (ايگرگ)،  و عرض جغرافيايي - فاصله از چپ - را با x (ايكس) نشان مي‌دهند.

جدولي را تهيه كرده‌ام كه راه به دست آوردن اين اندازه‌ها را به شما نشان مي‌دهد.

براي ديدن جدول، اينجا كليك كنيد.

• حركت پنجره

براي حركت پنجره، دو دستور وجود دارد.

1- window.moveBy (x, y)

با اين دستور، مي‌توان پنجره را يكباره به منطقه‌اي كه با عدد مشخص (x, y) مي‌شود، منتقل كرد.

2- window.moveTo (x, y)

اين دستور مانند دستور قبل عمل مي‌كند؛ با اين تفاوت كه اگر آنرا در يك حلقه قرار دهيم، به آهستگي پنجره را حركت مي‌دهد.

كد: كافي است اين كد را داخل يك اسكريپت قرار داده و صفحه را باز كنيد.

for(a = 1; a <= 250; a++) {window.moveTo (250, a)};

• تغيير اندازه پنجره

براي تغيير اندازه پنجره، دو دستور وجود دارد.

1- window.resizeTo (x, y)

با اين دستور مي‌توان اندازه پنجره را تغيير داد و اگر آنرا در يك حلقه قرار دهيم، به آهستگي اندازه پنجره را تغيير مي‌دهد.

كد:

for(a = 1; a <= 500; a++) {window.resizeTo (100, a)};
for(b = 1; b <= 500; b++) {window.resizeTo (b, 500)};

2- window.resizeBy (x, y)

اين دستور هم براي تغيير اندازه است؛ اما به دقت و قدرت دستور قبلي نيست.

به اميد ديدار
خدانگهدار

كتابخانه وب

سلام

تغييرات:
- به كتابخانه وب، جستجو اضافه شد (يكشنبه 16 مرداد)
- به جلسه قبل، بحث "اشاره‌گر" اضافه شد. (چهارشنبه 12 مرداد)

خدمت همه دوستان و تازه واردان عزيز، سلام و خسته نباشيد، و خوش آمد عرض مي‌كنم. از كساني كه از مطالب وبلاگ، خوششان آمده و ابراز لطف نموده‌اند تشكر مي‌كنم.

قرار بود اين جلسه را اختصاص دهم به معرفي چند نرم افزار تخصصي و مفيد، كه مسلما شما را در نوشتن و عيب‌يابي كدها، كمك مي‌كند. اما همانطور كه قبلا گفتم، آرزويم، يك بانك و مرجع عمومي و كامل است.

اين طرح بزرگ، يك مشكل بزرگ داشت، و آن كوچكي من است. هم اطلاعاتم محدود است، و هم اينكه هميشه در بين شما نيستم كه اين كار را انجام دهم. احتياج به همكاري علاقمندان بيشتر است. براي همين، بانكي را تهيه كردم كه باز است و هركسي مي‌تواند نرم‌افزاري را كه مي‌شناسد معرفي كند. نام اين بانك را "كتابخانه وب" گذاشتم كه لينكش در سمت چپ همين وبلاگ قرار دارد.

اختصاص به زباني ندارد. هرآنچه كه مربوط به طراحي و برنامه نويسي وب است. اين پروژه، به صورت آزمايشي راه‌اندازي شده است. البته اين به نظر قاصر و ناقص راهنماست. براي كامل شدن اين پروژه، احتياج به راهنمايي و نظر شماست.

به اميد ديدار
خدانگهدار