آموزش جاوا اسکريپت ابتدايي

گام آخر

jscript — Sun, 09 Oct 2005 23:53:18 GMT

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

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

سلام

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

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

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

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

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

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

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

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

خدانگهدار

جلسه 20

jscript — Sun, 09 Oct 2005 23:50:18 GMT

مفاهيم و واژه‌نامه

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

« مفـاهيـم »

برنامه نويسي

زبان برنامه نويسي، وسيله‌اي است براي ساختن برنامه و نرم‌افزار مورد نياز ما.

به طور كلي مي‌توانيم برنامه‌هاي خود را به دو گروه، تقسيم كنيم:
1- برنامه‌هايي كه در محيط رايانه، استفاده مي‌شوند.
2- برنامه‌هايي كه در محيط وب و اينترنت قابل استفاده هستند.

زبان كاربري

بعضي از زبانهاي برنامه نويسي تحت وب، در طرف كاربر و كلاينت (Client) - يعني شما كه از اينترنت استفاده مي‌كنيد - اجراء مي‌شود. مانند JavaScript, JScript, VBScript.

زبان سِـروري

زبانهاي برنامه نويسي تحت وبي كه در طرف سرور (Server) - يعني سايتي كه شما از آن استفاده مي‌كنيد - اجراء مي‌شود. مانند asp, php.

جاوا اسكريپت

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

Object (شي)

هر چيزي كه در صفحه ما وجود دارد، يك شي حساب مي‌شود و مي‌توان از آن استفاده كرد و تغييرش داد. اولين شي موجود، خود صفحه و سند (document) است، كه قبلا با آن آشنا شده‌ايد.

Properties (خصوصيات)

هر شي، يك مشخصات و خصوصياتي دارد كه بيانگر كمّيت و كيفيت آنست. مثلا يك سند، داراي اين خصوصيات است: پس زمينه، عنوان (Title)، نوار وضعيت (Status)، نوار پيمايش (Scroll)، متن (Text)، لينك (Link).

Methods (متُد)

کاري که اشياء مي‌توانند انجام دهند، متد ناميده مي‌شود؛ مانند باز كردن يا بستن پنجره. شالوده و اصل يك زبان برنامه نويسي، متدهاي آن برنامه است، كه ما بايد آنها را به خوبي ياد گرفته و در جاي مناسب استفاده نماييم. متدها، توسط سازندگان زبان برنامه نويسي، نوشته و تهيه مي‌شود و ممكن است در نسخه‌هاي جديد آن زبان، تغيير داده شده، اضافه و تكميل شود.

Event (رويداد)

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

شرط

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

ادات شرط

1. if
2. switch ... case
3. variable = (condition) ? true : false

معروفترين ادات شرط، if است.

ساختمان شرط

• جمله شرطي، از سه قسمت اصلي، تشكيل شده است.
1- ادات شرط: كلمه‌اي كه شرط را مي‌رساند؛ مانند اگر.
2- شرط: جمله‌اي كه شرطِ انجام كاري، واقع شده.
3- مشروط يا جزا: جمله‌اي كه جزاي شرط و در جواب آن آمده؛ يعني در صورت تحقق شرط، آن نيز به وقوع مي‌پيوندد.

Operators (عملگرها)

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

عمليات برنامه نويسي

• يك عمليات برنامه نويسي، داراي سه بخش، است.
1. دريافت داده. در اين قسمت، اسكريپت، اطلاعاتي را كه نياز دارد، مي‌گيرد.
2. پردازش داده. در اين قسمت، اطلاعاتي كه تهيه كرده، تجزيه و تحليل مي‌كند.
3. نمايش داده. در اين قسمت، اطلاعات پردازش شده را، ارائه مي‌كند.

ثابت و متغير

بعضي از اطلاعاتي كه يك برنامه، به دست مي‌آورد، ثابت (Constant) است، و بعضي، متغير (Variable). متغير به اين معني كه يك چيز ثابت، مشخص و از پيش تعريف شده نيست. آنچه كه برنامه نويس، بيشتر با او سر و كار دارد، متغير است.

انواع متغير

1- رشته‌اي (String): حروف و كلمه
2- عددي (Number): اعداد و ارقام (اعداد صحيح و اعشاري)
3- منطقي (Boolean): بله و خير

متغير سراسري، عمومي (Global گلوبال)
اگر متغير را خارج از تابع بنويسيد، عمومي است؛ چون مي‌شود در سرتاسر برنامه، آنرا صدا زده و مورد استفاده قرار داد.

متغير محلي، خصوصي (Local لوكال)
اگر متغيري را داخل تابع تعريف كنيد، خصوصي است؛ يعني فقط در همان محل و همان تابع، كابرد دارد، و بيرون از آن، نه مي‌شود صدا زد و نه مي‌شود استفاده كرد.

زمان

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

تابع

تابع يا همان فانِكشين (Function)، مجموعه‌اي از يك يا چند كد است كه در يك جا جمع شده و داراي نام شده‌اند.
آرگومان: گاهي، داخل پرانتزي كه بعد از نام تابع قرار مي‌گيرد، چيزي نوشته مي‌شود به نام آرگومان كه يك نوع متغير است.

آرايه

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

حلقه

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

ادات حلقه

• از روشهاي مختلفي براي ايجاد حلقه، استفاده مي‌شود.

1. for
2. While
3. do ... while

معروفترين ابزار حلقه، for است.

ساختمان حلقه

1. ابتداي حلقه: a = 0. اين عدد، شروع و ابتداي حلقه را معيّن مي‌كند.
2. انتهاي حلقه: a < 10. اين عدد، حداكثر و انتهاي حلقه - به عبارت ديگر، تعداد تكرار دستورات - را مشخص مي‌كند.
3. افزايش يا كاهش: اين پارامتر، مشخص مي‌كند كه حلقه، در هر بار اجرا، يك واحد زياد شود يا كم.
4. جواب حلقه: حلقه، بي شباهت به شرط نيست. به عبارت ديگر: اگر متغير ما (a)، از 0 تا 10 تداوم داشت، نمايش پيام، ادامه داشته باشد.

فرم

فرم وسيله‌اي است براي دريافت اطلاعات از كاربر.

method = نوع ارسال اطلاعات را معين مي‌كند، كه دو نوع است: post, get. اين دو روش با تفاوتهايي، عمليات ارسال را انجام ‌مي‌دهند. روش پُست، عمومي‌تر است و از لحاظ امنيتي، برتري دارد. اگر متد را ننويسيد، از پُست، استفاده مي‌شود.
action = محلي را نشان مي‌دهد كه اطلاعات، براي پردازش، به آنجا ارسال خواهد شد؛ يعني آدرس يك صفحه است، كه در اينجا براي مثال، test.htm را انتخاب كرده‌ام.
name = نام فرم.
onSubmit = يك رويداد است. تابعي را كه در جاوا اسكريپت، نوشته‌ايد را صدا مي‌كند.
Get - Post = تفاوت بين اين دو، در چگونگي ارسال اطلاعات از فرم، به اسكريپت پردازشگر است.

اگر از روش گت، استفاده كنيد، مقدار اطلاعاتي كه مي‌توانيد ارسال كنيد، محدود است.
با استفاده از روش get، اطلاعات به دست آمده از فرم، به عنوان بخشي از يك URL، انتقال مي‌يابد؛ اما در روش post، اطلاعات، در حقيقت به صورت نامرئي، منتقل مي‌شود. اگر براي مثال، در روش گت، كاربر، يك رمز عبور را در فيلد پسورد، بنويسد، و فرد ديگري نيز در حال مشاهده صفحه نمايش كاربر باشد، به راحتي مي‌تواند از رمز عبور كاربر، آگاه شود. به عبارت ديگر، اين روش، در سطح امنيتي پايين‌تري از روش پست مي‌باشد.
صفحه‌اي كه حاوي فرمي با مشخصه گت است، مي‌تواند نشانه گذاري (Bookmark) شود؛ در حالي كه در روش پست، اين كار، ممكن نيست.

اشاره‌گر

اشاره‌گر (Cursor) - كه كاربران معمولا و به اشتباه، به آن موس هم مي‌گويند - همان شكلي است كه با حركت موس، در مانيتور، حركت مي‌كند و نمادي از انگشت و دست شماست براي اشاره به اشياء داخل صفحه.

« واژه نــامه »

كـُد (Code): دستور و فرماني كه به زبان برنامه نويسي، نوشته شده.
تَـگ (Tag): كوچكترين جزء يك كد. مثلا تگ سر = ؛ تگ بدنه = ؛ تگ اسكريپت = . هر تگ بايد در داخل اين دو علامت < >، قرار گيرد.
پارامتر (Parameter): مقداري كه براي تگ، نوشته مي‌شود. مثلا براي تگ خط، معيّن مي‌كنيم كه از چه نوعي، به چه اندازه‌اي و چه رنگي باشد. مثال: كلمه ‍Color، در تگ Font، پارامتري است كه رنگ متن را مشخص مي‌كند. پارامتر را شايد بتوان اين گونه تعريف كرد كه "قيد حالت است براي تگ". تگ اسكريپت، هم داراي پارامترهايي است.
document = سند، صفحه جاري، پنجره‌اي كه در آن كار مي‌كنيد.
document.bgColor = رنگ پس زمينه سند.
new Date: متدِ زمان به صورت كلي و مطلق است. بعد از آن بايد نوع زمان خود را مشخص كنيد؛ يعني چه قسمتي از زمان را مي‌خواهيد بدانيد؛ سال، ماه، هفته، روز و ... . به تنهايي چيزي را نشان نمي‌دهد.
toLocaleString: متدي براي به دست آوردن زمان كامل (تاريخ و ساعت) است كه به عنوان خصوصيت، براي زمان كلي استفاده مي‌شود.
document.write: متدي كه براي نوشتن متن در صفحه استفاده مي‌شود.
document.writeln: مانند دستور قبلي عمل مي‌كند؛ با اين تفاوت كه يك فاصله تا رشته قبلي، ايجاد مي‌كند.
; : به اين علامت، سِمي كالـِن (Semicolon) گفته مي‌شود كه در پايان هر دستور، مي‌آيد؛ هر چند در جاوا، اجباري نيست.
// : به اين علامت، كامنت (Comment) گفته مي‌شود كه براي نوشتن توضيح، در ميان كدهاي برنامه نويسي است. هر عبارتي كه بعد از اين علامت بيايد، توسط برنامه، خوانده و اجرا نمي‌شود و صرفا ً توضيحي است كه برنامه نويس، يادداشت كرده.
ID: آي‌دي، همان نام (Name) شي است؛ البته گاهي در عمل تفاوتهايي با هم دارند.
innerText: با اين دستور، متن يك تگ در قسمت بدنه - مانند محتويات تگ پاراگراف - نمايش داده مي‌شود؛ و مي‌توانيم آنرا تغيير داده و ويرايش كنيم.
outerHTML - innerHTML - outerText: اين 3 متد، شبيه دستور قبلي است؛ البته با كمي تفاوت.
setTimeout: دستور تايمر و زمان شمار است. بعد از آن، يك جفت پرانتز، قرار دارد كه داخلش، دو پارامتر نوشته مي‌شود:
1. اسم چيزي است كه قرار است اجرا شود؛ مانند يك تابع.
2. زماني كه تايمر در آن فعال خواهد شد. واحد زمان، ميلي ثانيه است. (1000 = يك ثانيه)
setInterval: دستور تايمر و زمان شمار است. مانند دستور قبل، عمل مي‌كند؛ با كمي تفاوت.
Table = جدول. <table>
Row = سطر، ستون افقي.
Cell = سلول، خانه‌هاي جدول.
window = شي صفحه است، كه داراي متدهاي مختلفي است.
window.scroll = متد اسكرول صفحه. داخل پرانتز، دو پارامتر دارد كه دو عدد هستند كه موقعيت صفحه را نشان مي‌دهند. اولي، موقعيت فعلي صفحه؛ دومي، موقعيتي كه بايد به آنجا برسد.
window.scrollTo - window.scrollBy = دو متد ديگر از parent هستند. با تمرين، به دست آورديد كه چه كاري انجام مي‌دهند.
parent = معادل window است و در مورد اسكرول، مي‌تواند به جاي آن قرار گيرد.

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

جلسه 19

jscript — Wed, 05 Oct 2005 13:40:18 GMT

حركت 2

سلام

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

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

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

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

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

نمونه:

موقعيت موس از بالا - clientY:

موقعيت موس از چپ - 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:

• كد 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 است، به جدول خود، فيلتر آلفا، يا همان كمرنگ شدن در حالت جابجايي مي‌دهيم.

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

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

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

جلسه 18

jscript — Thu, 25 Aug 2005 00:52:18 GMT

حركت 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)

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

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

كتابخانه وب

jscript — Thu, 21 Jul 2005 15:06:18 GMT

كتابخانه وب

سلام

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

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

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

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

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

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

جلسه 17

jscript — Tue, 17 May 2005 07:49:18 GMT

موس و صفحه كليد

سلام

تغييرات:
- در جلسه 16، بخش «معرفي نرم‌افزار» اضافه شد. (دوشنبه 30 خرداد)

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

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

استخراج كُد كليد (Key Code)

• صفحه كليد

استخراج كُد كليد (Key Code)، كار راحتي است. در زبان جاوا اسكريپت، براي به دست آوردن آن، از اين دستور استفاده مي‌شود: «window.event.keyCode»

تمرين

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

//***صفحه كليد
function funKeyCode(){
var key = window.event.keyCode;
inCode.value = key;
}
document.onkeypress=funKeyCode; // تنظيم رويداد

در قسمت بدنه، جعبه متني قرار دهيد كه محل نمايش كد باشد.

كد هر كليدي را كه فشار دهيد، اينجا نوشته مي‌شود:

• موس

موس نيز مانند صفحه كليد عمل مي‌كند؛ منتها داراي كليدهاي كمتري است. از اين كد «window.event.button» مي‌توانيد براي استخراج كد كليد موس، استفاده كنيد.

تمرين

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

//***كليك موس
function funClick()
{
    if (document.all)
    {
        if (window.event.button)
        {
            inButton.value = window.event.button;
        return false;
        }
    }
}
document.onmousedown=funClick; // تنظيم رويداد

در قسمت بدنه، جعبه متني قرار دهيد كه محل نمايش كد باشد.

كُد كليك موس :

• اشاره‌گر

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

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

اين تغيير شكلها، همه به دست تواناي شماي برنامه‌نويس، ميسّر مي‌شود و بس. خوشبختانه در وب نيز مي‌شود شكل دلخواه و مورد نياز به اشاره‌گر داد؛ ‌كافي است كه كد هر شكل را بنويسيد.

كـُد

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

استايل

استايل(Style)، تگي است مانند اسكريپيت (Script) كه درون سر (Head) نوشته مي‌شود. همانند جاوا، دو قسمت دارد: 1- نوشتن كد 2- فراخواني كد.

1- نوشتن كد. كد را داخل تگ استايل و درون سر، مي‌نويسيم.

<html>
<head>
<style>
#Auto {Cursor: auto}
#Crosshair {Cursor: crosshair}
#Default {Cursor: default}
#Pointer {Cursor: pointer}
#Hand {Cursor: hand}
#Move {Cursor: move}
#e-resize {Cursor: e-resize}
#ne-resize {Cursor: ne-resize}
#nw-resize {Cursor: nw-resize}
#n-resize {Cursor: n-resize}
#se-resize {Cursor: se-resize}
#sw-resize {Cursor: sw-resize}
#s-resize {Cursor: s-resize}
#w-resize {Cursor: }
#text {Cursor: text}
#wait {Cursor: wait}
#help {Cursor: help}
</style>
</head>

تحليل كد: #Hand = نام كد، كه به دلخواه شماست. { } = كد، داخل اين علامت، نوشته مي‌شود. Cursor: hand = كد شكل اشاره‌گر، كه در اينجا به صورت دست است.

2- فراخواني كد. شي مورد نظر را، كه قرار است اشاره‌گر، به محض رفتن بر روي آن، تغيير شكل دهد، داخل بدنه مي‌نويسيم. آن شي، ممكن است يك عكس باشد يا يك متن يا چيز ديگر. در اين مثال، متني را در نظر گرفته‌ام كه درون تگ (Span) نوشته‌ام.

<BODY>

<SPAN ID="Auto">Auto</SPAN><BR>
<SPAN ID="Crosshair">Crosshair</SPAN><BR>
<SPAN ID="Default">Default</SPAN><BR>
<SPAN ID="Pointer">Pointer</SPAN><BR>
<SPAN ID="Hand">Hand</SPAN><BR>
<SPAN ID="Move">Move</SPAN><BR>
<SPAN ID="e-resize">e-resize</SPAN><BR>
<SPAN ID="ne-resize">ne-resize</SPAN><BR>
<SPAN ID="nw-resize">nw-resize</SPAN><BR>
<SPAN ID="n-resize">n-resize</SPAN><BR>
<SPAN ID="se-resize">se-resize</SPAN><BR>
<SPAN ID="sw-resize">sw-resize</SPAN><BR>
<SPAN ID="s-resize">s-resize</SPAN><BR>
<SPAN ID="w-resize">w-resize</SPAN><BR>
<SPAN ID="text">text</SPAN><BR>
<SPAN ID="wait">wait</SPAN><BR>
<SPAN ID="help">help</SPAN><BR>

</BODY>
</HTML>

ID = آي‌دي، همان نامي است كه در بالا نوشتيم؛ مانند (Hand).

نمونه عملي: اشاره‌گر خود را بر روي نوشته‌ها ببريد.

Auto
Crosshair
Default
Pointer
Hand
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help

اسم هر كد، نمايانگر حالت و نوع آن است.

اشاره‌گر دست‌ساز

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

#Test {Cursor: url (test.cur); }

داخل پرانتز:
هر تغيير شكلي، بايد به خاطر نياز و مناسب با زمان و مكان باشد؛ وگرنه كار شايسته‌اي نيست.

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

جلسه 16

jscript — Sun, 15 May 2005 14:14:18 GMT

دستور زبان
(آيين نگارش)

سلام

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

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

1- غلط املايي

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

در نوشتن window، دقت كنيد. ويندو، به صورت مفرد است. با نام سيستم عامل ويندوز، اشتباه نگيريد.
يا document و Mouse، جاي حروف o و u را اشتباه نكنيد.
يا كلماتي كه از لحاظ املايي، نزديك هم هستند؛ مانند white (سفيد) with (با) While (حلقه).

2- كلمات رزرو شده و كليدي

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

3- كلمات كليدي

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

4- دستورات تركيبي

يعني دستوراتي كه از دو يا سه كلمه، تشكيل شده‌اند. مانند setTimeout, onMouseover كه از سه كلمه، تركيب شده‌اند. اولين كلمه اين دستورات، با حرف كوچك شروع شده، و دومين كلمه، با حرف بزرگ.

5- نام گذاري

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

اسم بي‌مسمّي شنيده‌ايد؟ اسمي كه با شخص يا شيي ناميده شده، سنخيتي ندارد؛ مثل اينكه به يك سگ سياه، بگوييم سفيد برفي. اسمي كه براي اشيا يا دستورات خود، انتخاب مي‌كنيد، بايد جنس و كار آن را نشان دهد.

مثلا مي‌خواهم تابعي بنويسم كه مطالب يك فرم را ارسال كند. نام دكمه ارسال را btnSubmit گذاشته، و نام تابع را funSubmit مي‌گذارم.
btn = مخفف button (دكمه)
fun = مخفف function (تابع)

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

6- مرتب نويسي

كدها بايد طوري نوشته شود كه خوانا و واضح باشد. شايد در برنامه‌هاي كوتاه، ضرورتي براي اين كار ديده نشود؛ اما در كدهاي عريض و طويل و پيچيده كه از دهها تابع ساخته شده‌اند، اين امر، ضروري است.

به ترتيب و چينش اين كدها دقت كنيد:

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

7- پايان دستور

در پايان هر دستور، از نقطه ويرگول (;) استفاده كنيد. هرچند در جاوا اسكريپت، اين كار ضرورتي ندارد؛ اما مراعات آن، ضرري ندارد. نه تنها پايان هر دستوري را مشخص مي‌كند، بلكه ما را در زبانهاي ديگر - مانند php كه اين كار لازم است - آماده مي‌كند.

معرفي نرم‌افزار

1- JavaScript Code Improver 1.00
اين برنامه، كدهاي نوشته شده جاوا اسكريپت را مرتب مي‌كند. همانطور كه در نكته 6 گفته شد، مرتب نويسي، باعث خوانا شدن كدها مي‌شود؛ اما هميشه از كدهاي خود استفاده نمي‌كنيم؛ بلكه در بسياري مواقع، از برنامه‌هاي آماده در اينترنت يا نوشته شده توسط دوستان خود، بهره‌برداري مي‌كنيم. در اين صورت، براي اينكه وقت زيادي را صرف مرتب كردن آنها نكنيد، بهتر است اين نرم‌افزار را به كار برده تا ظرف چند ثانيه، كدها را شُسته رُفته، به شما تحويل دهد.

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

2- JavaScript Maker 2.7
با اين برنامه، مي‌توانيد كدهاي نوشته شده در htm را تبديل به js كنيد. به اين صورت كه تمام كدهاي شما، صحيح و بدون هيچگونه خطا، داخل يك تابع قرار مي‌گيرد. براي اجرا صفحه وب تبديل شده، كافي است آن تابع را صدا كنيد.

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

3- JavaScript Animator Express v1.10
با اين برنامه، مي‌توانيد به راحتي چند عكس را به صورت اسلايد، نمايش دهيد؛ البته با كمك زبان جاوا اسكريپت. براي آشنايي بيشتر و دريافت آن، به اين آدرس، مراجعه كنيد.

4- HTMLAsText v1.01
تبديل اچ‌تي‌ام‌ال(htm) به متن(txt). براي آشنايي بيشتر و دريافت آن، به اين آدرس، مراجعه كنيد.

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

جلسه 15

jscript — Thu, 14 Apr 2005 13:58:18 GMT

فـُرم

سلام

تغييرات:
- در همين جلسه، تغييراتي داده شده. (سه‌شنبه 20 ارديبهشت)
- در جلسه 7، تغييراتي داده شد. (پنجشنبه 25 فروردين)

اينبار به مقوله‌اي مي‌پردازيم كه هم كاربردي است و هم محلي براي تمرين دروس قبلي.

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

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

«پايگاههاي وب، از فرمها براي منظورهاي مختلفي استفاده مي‌كنند. از قبيل: ثبت نام كردن كاربران، و يا ورود آنها به فضاهاي خاص وب (Login)، دريافت نظرات و فرمهاي نظرسنجي، و يا خريد و فروش آنلاين.»

ساختمان فرم

هر فرمي، عمليات خود را - كه دريافت و ارسال داده باشد - در سه بخش، انجام مي‌دهد.

اسكلت و ظاهر: اين بخش - كه تشكليل شده از تعدادي جعبه متن (فيلد) و دكمه - توسط اچ‌تي‌ام‌ال ساخته مي‌شود. البته با نرم‌افزارهايي - كه قبلا نام برديم - اين كار، سريعتر و دقيقتر انجام مي‌شود. اين قسمت، مكان نوشتن اطلاعات، توسط كاربر است.
خطاياب: اين بخش، تخصص جاوا اسكريپت است. يك حد مياني بين اچ‌تي‌ام‌ال و زبان سِروري. در اين قسمت، اطلاعات وارد شده توسط كاربر، كنترل مي‌شود. مثلا تمامي فيلدهايي كه بايد نوشته شود، پر شده يا نه؟ و آيا تركيب ايميلي كه وارد شده، درست است؟ در صورت وجود خطا، با اخطار به كاربر، مانع از ارسال مطالب به صورت ناقص يا نادرست مي‌شود.
ارسال و ذخيره اطلاعات: اين قسمت، به عهده يك زبان سروري مانند asp و php است، و از حيطه مسؤوليت جاوا، خارج است.

با توجه به اين تقسيم بندي، وظيفه جاوا، مشخص شده و دقيقا مي‌دانيم كه از او چه مي‌خواهيم.

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

اجزاي فرم

فرمها، بسته به نياز ما، مي‌توانند ساده يا پيچيده باشند. كمترين حد فرم، يك جعبه متن و يك دكمه ارسال (Submit) است؛ همانند فرم ثبت نامي كه در همين وبلاگ، قرار داده‌ام.

دكمه Reset كه يك دكمه اختياري است، براي پاك كردن فرم است. اين ساده‌ترين شكل فرم است.

اسكلت فرم (كد HTML)

فراموش نكنيد كه براي هر جزء، نامي بگذاريد. تا اينجاي كار، اسكلت و ظاهر فرم، ساخته شده است.

خطايابي (كد جاوا)

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

پس بايد طوري برنامه نويسي كنيم كه مانع انجام اين اشتباههات بشويم.

• در فرم ساده ما، خطا، زماني است كه اسمي نوشته نشود، و فرم خالي ارسال شود. پس بايد با كمك جاوا بنويسيم كه اگر فيلد نام، خالي بود، مانع ارسال فرم شده و پيام بدهد.

ارسال و ذخيره اطلاعات

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

ذخيره در كوكي: اطلاعات كوتاه و ضروري را در آن ذخيره مي‌كنند. به اميد خدا در جلسات آتي، به آن خواهيم پرداخت.
ذخيره در پرونده‌هاي معمولي: مثلا در پرونده متني (Text). نسبت به كوكي، قادر به ذخيره اطلاعات بيشتري است؛ اما به لحاظ اينكه براي ساخت، تغيير و حذف يك پرونده يا پوشه، احتياج به مجوز از طرف سيستم شماست، و اين كار، به خاطر جلوگيري از نفوذ ويروس و خرابكاران (هكر)، به سختي انجام مي‌پذيرد، مقرون به صرفه نيست.
ذخيره در بانك اطلاعاتي: بهترين روش ذخيره اطلاعات است؛ هم از لحاظ ذخيره حجم بالاي اطلاعات، هم ترتيب و نظم، هم خواندن راحت و سريع آنها. اساس كار بانك اطاعات، استفاده از جدول است؛ جدولي كه تشكيل شده از ستون و سطرهاي مختلف؛ مانند جداولي كه در بسياري از جاها، ديده‌ايد.

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

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

• به اميد خدا بعد از پايان درس جاوا اسكريپت، اگر دوستان علاقمندي باشند، به بحث درباره يكي از زبانهاي سروري (asp, php) خواهيم پراخت؛ حداقل تا جايي كه بتوانيد خودتان يك بانك را ساخته و اطلاعاتان را در آن ذخيره كنيد.

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

واژه‌نامه

Get - Post = تفاوت بين اين دو، در چگونگي ارسال اطلاعات از فرم، به اسكريپت پردازشگر است.

اگر از روش گت، استفاده كنيد، مقدار اطلاعاتي كه مي‌توانيد ارسال كنيد، محدود است.
با استفاده از روش get، اطلاعات به دست آمده از فرم، به عنوان بخشي از يك URL، انتقال مي‌يابد؛ اما در روش post، اطلاعات، در حقيقت به صورت نامرئي، منتقل مي‌شود. اگر براي مثال، در روش گت، كاربر، يك رمز عبور را در فيلد پسورد، بنويسد، و فرد ديگري نيز در حال مشاهده صفحه نمايش كاربر باشد، به راحتي مي‌تواند از رمز عبور كاربر، آگاه شود. به عبارت ديگر، اين روش، در سطح امنيتي پايين‌تري از روش پست مي‌باشد.
صفحه‌اي كه حاوي فرمي با مشخصه گت است، مي‌تواند نشانه گذاري (Bookmark) شود؛ در حالي كه در روش پست، اين كار، ممكن نيست.

عناصر فرم

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

گروه

دكمه

كد اين دو دكمه، با هم تفاوت دارد

دكمه ارسال

دكمه پاك كردن

Checkbox - چك باكس

دكمه راديويي
مرد
ززن

ComboBox-JumpMenu - فهرست آبشاري

ListBox - ليست باكس

ListBox-Multiple - ليست باكس چند انتخابي

Button-Image - دكمه عكسي

File - دريافت فايل

Text - متن

Password - پسورد

Hidden - متن مخفي

123456789 TextArea - متن زياد

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

فراخوان

jscript — Mon, 07 Mar 2005 16:00:18 GMT

فراخوان

سلام

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

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

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

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

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

تقريبا در هر سه مورد، كارهايي انجام داده‌ام، و بانكي از كدها، و نرم افزارهاي اين زبان را تهيه كرده‌ام.

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

داخل پرانتز: يكي از چيزهايي كه باعث نااميدي بعضي از دوستان تازه كار مي‌شود، اين است كه از ديگران عقب مانده‌اند و يا ديرتر درس را ياد مي‌گيرند. منتظر مي‌مانم تا برسند. دوستان ديگري كه از هوش و استعداد، يا فرصت بيشتري برخوردارند، مي‌توانند با مراجعه به پايگاه‌ها و كتابهايي كه معرفي شده، پيش بروند.

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

به حرفهايي كه گفتم فكر كرده و راهنمايي‌هاي خود را از من دريغ نفرماييد.

پرسش و پاسخ:

?پرسش:

سلام. يه سوال: اگه خواستيم مثلا با کليک روي يک دکمه يه پاراگراف جديد درست بشه چکار بايد کرد؟

• پاسخ:

سلام
1- يك خواهش داشتم. سوالت را واضح بنويس؛ مثلا بگو در كجا مي‌خواهي اين كد را استفاده كني. با اين كار، مخاطب شما، بهتر منظورتان را بهتر درك مي‌كند.
2- با تشكر از ايراني كه لطف كردند و پاسخ دادند. آفرين به شما.
3- راه حلي كه من دارم خدمتتان مي‌نويسم.

<body>

<input type="button" value="پاراگراف" onclick ="funAdd()" >

<script>
function funAdd()
{
document.body.innerHTML += "<li><p>پاراگراف"
}
</script>

</body>

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

• پاسخ:

سلام دوست عزيز mreza! نامه شما به دستم رسيد. ظاهرا شما تمايل داريد با قدرت و كارايي اين زبان آشنا شويد. نمي‌دانم قبلا با چه زباني كار كرده‌ايد؛ اما نظر شما را به اين موضوع جلب مي‌كنم كه: عناصر و اشياء موجود در يك صفحه، ماهيت و كارايي مختلفي دارند. بعضي از آنها قابل ويرايش نيستند و به اصطلاح ReadOnly (فقط خواندني) هستند؛ و بعضي اجازه تغيير و اصلاح و يا نوشتن متن را به شما مي‌دهند. مانند جعبه متن (Textbox). توجه به اين نكته، شايد شما را در رسيدن به هدفتان، كمك كند.

• پاسخ:

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

علاوه بر اينكه موافق نظرتان نيستم، و اميدوارم كه وبلاگتان، به مرور علاقمندان خاص خود را پيدا كند؛ شما را به رعايت نكاتي كه عرض كردم و همچنين تبليغ مناسب از وبلاگتان، توصيه مي‌كنم. خدانگهدار

?پرسش:

با سلام. شما مي‌توانيد ميلي ثانيه را با دستور زير به دست بياوريد؟

getMilliseconds()

• پاسخ:

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

بازي:

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

تمام اينها، هديه‌اي به شما دوستان عزيزم

• براي ديدن بازي، اينجا كليك كنيد. براي اولين بار، صفحه باز شده را رفرش كنيد.

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

جلسه 14

jscript — Sat, 26 Feb 2005 07:46:18 GMT

حلقه (2)

سلام

اين درس را، كه اهميت ويژه‌اي دارد، هديه مي‌كنم به شما دوستان عزيزم؛ مخصوصا دوستي كه مدتي است نمي‌تواند ما را در اين دروس، همراهي كند. براي سلامتي او، دعا مي‌كنم.

يارب! آن نوگل خندان که سپردي به منش    مي‌سپارم به تو از چشم حسود چَمَنش
گرچه از کوي وفا، گشت به صد مرحله دور            دور باد آفتِ دور فلک از جان و تنش
هرکه ترسد ز ملال، اندُه عشقش نه حلال           سَر ما و قدَمش، يا لب ما و دَهنش

حلقه for ... in

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

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

ساختمان حلقه

for (var x in object)
{
document.write ("<li>object." + x + " = " + object [x]);
}

مشاهده مي‌كنيد كه ساختمان اين حلقه، با حلقه for كه قبلا ديده‌ايم، تفاوت دارد.

x = خصوصيات شي. يك متغير است كه بيانگر تمام خصوصيات شي است.
in = كلمه‌اي كليدي؛ به اين معني كه هرچه خصوصيات (x) در اين شي است.
Object = به جاي اين كلمه، نام شي را بنويسيد؛ مثلا window, document.
object [x] = شيئي كه نوشته‌ايم، تبديل به آرايه مي‌شود؛ يعني يك متغير كه داراي چندين مقدار است.

تمرين

مي‌خواهيم، خصوصيات شي سند (window) را به دست آوريم

كد:

چيزي كه جاوا به شما نمايش خواهد داد، اين است:

window.onbeforeunload = null
window.onafterprint = null
window.top = [object]
window.location = file:///E:/Web/Weblog/JScript/15.02.htm
window.parent = [object]
window.offscreenBuffering = auto
window.frameElement = null
window.onerror = null
window.screen = [object]
window.event = null
window.clipboardData = [object]
window.onresize = null
window.defaultStatus =
window.onblur = null
window.window = [object]
window.onload = null
window.onscroll = null
window.screenTop = 119
window.onfocus = null
window.Option = [object]
window.length = 0
window.onbeforeprint = null
window.frames = [object]
window.self = [object]
window.clientInformation =
window.external =
window.screenLeft = 4
window.opener = undefined
window.onunload = null
window.document = [object]
window.closed = false
window.history = [object]
window.Image = [object]
window.navigator =
window.status =
window.onhelp = null
window.name =

تحليل

• همانطور كه مي‌بينيد جاوا، 37 خط، نوشته است كه مخلوطي از اشياء، خصوصيات و رويدادهاي پنجره (window) است. چرا به شكل درهم و نامنظم نوشته شده، من نمي‌دانم! ولي تشخيص اين سه، كار مشكلي نيست.

شي: هر كدام كه مقابلش object نوشته شده، يك شي ديگري است كه زير مجموعه window مي‌باشد؛ مانند top.
رويداد: هر كدام كه با on شروع شده، رويداد (event) است؛ مانند onload. مقابل رويدادهايي كه از آنها در پنجره، استفاده نكرده‌ايم، null نوشته مي‌شود؛ در غير اين صورت، نوع عمليات را مي‌نويسد.
خصوصيت: هر چيزي به غير از اينها، خصوصيات window است، كه معمولا چيزي مقابلش نوشته شده است؛ مانند screenTop، كه موقعيت پنجره را از بالا، نشان مي‌دهد. اگر پنجره را تغيير مكان دهيد و رفرش كنيد، مقدار آن تغيير مي‌كند.

• براي ديدن نمونه‌هاي بيشتر، اينجا كليك كنيد.

پرسش و پاسخ
. با عذرخواهي از كساني كه پاسخشان دير شد.
. هر يك از دوستان كه جواب مرا كافي يا صحيح ندانست، حتما تذكر دهد.

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

var a = 0;
function funFor(){
        if (a < 5)
            {
            a++;
            alert ("پيام" + a);
            }
setTimeout ("funFor()", 1000);
}
funFor();

شايد اين حداكثر كاري باشد كه مي‌توان در تكرار يك دستور انجام داد. مسلما، بهترين و ساده‌ترين راه، استفاده از حلقه است.

?پرسش:
سلام. اول تشكر كنم به خاطر وبلاگ خوبتون. چطوري ميشه خروجي يك كد جاوا اسكريپت را در يك جدول گذاشت؟ يا مثلا ورودي يك كد جاوا را از يك اديت (input) گرفت. يك دنيا ممنون.

• پاسخ:
سلام دوست عزيز! تشكر از لطفتان.
1- يك راه، قرار دادن تگ اسكريپت، درون جدول است. يعني كل كدها را در بدنه و داخل همان جدول بگذاريد و آنگاه از دستور document.write براي نوشتن نتيجه، استفاده كنيد. براي آشنايي بيشتر، به جلسه 11، "صدا كردن تابع" مراجعه كنيد.
روش ديگر اين است كه از دستور innerText استفاده كنيد كه من در "يك پروژه" به كار برده‌ام.
2- براي گرفتن داده، از يك شي، به تمرين جلسه 12 مراجعه كنيد. همانجا كه از Menu.value استفاده كرده‌ام. input داراي يك value است؛ همانجا كه متن خود را وارد مي‌كنيد.

?پرسش:
دوست عزيز! من تازه شروع کردم به ياد گيري؛ اما از اونجايي که من با C, Delphi به صورت حرفه شغلي کار کردم. اين درسهاي شما را خوب مي فهمم. ولي سوالم اينه که با چه اديتوري بايد اينها رو نوشت؟

• پاسخ:
سلام حسين آقا! خوش آمديد.
1- اگر برايتان ممكن است، از اين به بعد پيامتان را در آخرين درس بنويسيد، تا زودتر متوجه آن بشوم.
2- حق با شماست. جاوا اسكريپت چون از لحاظ ساختاري، به C و دلفي شبيه است، يادگيري و فهمش برايتان راحت است.
3- در جلسه سوم در اين باره توضيح داده‌ام. "نوشتن اين زبان، احتياج به محيط خاصي ندارد. مثلا زبان ويژول بيسيك را، بايد برنامه ويژوال بيسيك را نصب، و در محيط آن بنويسيم؛ ولي زبانهاي وب، چنين محدوديتي ندارند. مثلا شما در يك متن ساده (Text)،‌ مي‌توانيد به راحتي، هم HTML بنويسيد و هم Java و هم PHP". به آن مراجعه كنيد.

?پرسش:
لطفا آموزش اين برنامه را بگوييد. دادن پيغام در روزهاي 5، 9، 12 هر ماه. فارسي؛ نه انگليسي.

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

• پاسخ يكي از دوستان:
سلام استاد! در مورد اون برنامه‌اي كه دوستمون از شما سؤال كرده بود، من هم اونو به عنوان يك تمرين انجام دادم. لطفاً اگه راه‌هاي ديگري هم هست راهنماييم كنيد. ممنون.

var now = new Date()
var A = now.getDate()
if    (A == 6)    alert("امروز قرار داريد");
if    (A == 12)    alert("امروز قرار داريد");
if    (A == 26)    alert("امروز قرار داريد");

• براي جلسه آينده يك بازي زيبا - كه با جاوا اسكريپت ساخته شده - آماده كرده‌ام؛ اگر خطوط كُند اينترنتي، مانع نشوند.

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