کارگاه آموزشی طراحی صفحات وب
تیر ماه 89
گردآوری:
منصوردهستانی
www.dehestani.net
وب WWW چیست؟
امروزه شما به هر طرفي که نگاه مي کنيد آدرس هاي اينترنتي
را مشاهده مي کنيد که اين آدرس ها شما را به صفحاتي در اينترنت هدايت مي کنند تا اطلاعاتي
را در اختيار شما قرار دهند.بيشتر اين آدرس ها با www آغاز شده که مخفف سه کلمه World Wide Web مي باشد. وب قسمتي از دنياي اينترنت است که شامل متن،
عکس و تصوير يا حتي صدا مي باشد که بعضي از اين صفحات به هم مرتبط بوده و شما را به
صفحه ديگر حرکت مي دهند.
همانطور که ميدانيد براي دسترسي به اين صفحات نياز به چند چيز داريد:
ابتدا شما بايد مشترک يکي از شرکتهاي سرويس دهنده اينترنت شويد که به اين شرکتها ISP مي گويند.ISP مخفف Internet Service
Providers است.
سپس شما براي مشاهده صفحات نياز به يک برنامه به اسم مرورگر وب Web browser داريد مانند: Internet explorer, Netscape Navigator, Opera,
Mozilla تا کدهاي متني اين صفحات را ترجمه کرده و به صورت يک سري اطلاعات قابل فهم
براي ما نمايش دهند.
داخل اين مرورگرها کادري(Address bar) است که شما مي توانيد
آدرس هاي اينترنتي را وارد کرده و پس از فشار دادن دکمه Enter برروي کيبورد منتظر نمايش
يک وب سايت باشيد. اگر دقت کرده باشيد پس از اين عمل کلمه http درجلوي آدرس وارد شده
اضافه مي گردد که مخفف HyperText Transport
Protocol ميباشد، اين کلمه به مرورگرميفهماند، اين آدرس از چه پيوند و تکنولوژي مي خواهد
براي نمايش صفحه استفاده کند، چون پروتکلهاي مختلفي هست مانند: FTP که مخفف File Transfer Protocol .، نام فني آدرسهاي اينترنتي URL مي باشد که اين اصطلاح مخفف سه کلمه Universal Resource Locator است.
HTML چيست؟
زمانيکه شما داخل صفحات يک وب سايت مي گرديد اجزاي گوناگوني را مي بينيد که
تمام آنها در يک چيز مشترک هستند و آن زبان يا کدي است که آنها را توليد مي کند که
اين زبان HyperText Markup Language يا همان HTML مي باشد.
: Hyperمتضاد نوشته هاي خطي( Linear ) است ، اگر شما با زبانهاي برنامه نويسي کامپيوتر آشنايي
داشته باشيد مانند ويژوال بيسيک ميبينيد که بايد کدها را خط به خط بنويسيد و تا يک
خط اجرا نشود بعدي خوانده نمي شود يعني آنها را بايد به ترتيب بنويسيد تا برنامه اجرا
شود ولي HTML اينطوري نيست و الگوي
خطي ندارد شما هر کدي را مي توانيد هر جا که بخواهيد بنويسيد.
Text : به همان متني مي گويند که مي نويسيد تا در مرورگر نشان داده شود
Markup: عملي است که مرورگر برايتان انجام ميدهد يعني يک متن ساده مي نويسيد
ولي جور ديگري نمايش داده مي شود.
Language : زبان
عناصر
تشکيل دهندهHTML
براي شروع کدنويسي
در HTML
4.01 اولين چيزي که
بايد رعايت کنيد DTD آن فايل
است که در حال حاضر مرورگر ها بدون آن هم صفحه را نمايش ميدهند ولي در آينده ممکن است
اينچنين نباشد. همانطور که ميدانيد DTD بايد قبل ازتگ <HTML> نوشته شود. براي اين نسخه سه مدل در نظر گرفته شده است :
حالت اول براي صفحه اي است که فقط از دستورات صحيح XHTML استفاده شده و براي مرورگرهايي است که از CSS پشتيباني ميکنند،
حالت اول براي صفحه اي است که فقط از دستورات صحيح XHTML استفاده شده و براي مرورگرهايي است که از CSS پشتيباني ميکنند،
<!
DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML
1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
حالت دوم براي صفحه اي است که مخلوطي از کدهاي HTML و XHTML باشد و مرورگرهاييکه از CSS پشتيباني نميکنند هم آنرا نمايش دهند،
<!
DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML
1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
و حالت سوم هم براي استفاده عنصر فريم Frame در صفحه است،
<!
DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML
1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
فراموش نکنيد
که نوشتن يکي از آنها اجباري است.
HTMLزبان وب ميباشد که داراي
عناصر( elements )
گوناگوني
است که بر روي هم تشکيل يک صفحه از سايت را
ميدهند. اين عناصر عبارتند از:
( texts & lists ) متنها و ليست ها : نوشته هاي داخل يک صفحه را در
برميگيرد.
( images ) عکسها : عکس هاي داخل
يک صفحه که زيبايي خاصي به وب سايتها مي بخشند
(tables) جدولها : جدولها بهترين عنصر براي سازمان دهي و مرتب
کردن اطلاعات ما هستند که نقش اساسي در طراحي يک سابت دارند.
((forms فرمها : عناصري
که بيننده سايت به کمک آنها مي تواند اطلاعاتي را وارد کرده تا ذخيره شده يا فرستاده
شود.
( (hyperlinks نقطه پيوند : البته اين معني اصلي لغت نمي باشد و اين
عناصر، نقطه پيوند و ارتباط بين دو صفحه از
يک سايت يا دو وب سايت متفاوت مي باشد. مانند :www.yahoo.com
( frames ) چارچوبها : فريمها
يا چارچوبها تنها عناصري هستند که با استفاده از آنها ما مي توانيم چند صفحه اينترنتي
را در يک صفحه جاي دهيم. مانند
( multimedia ) چند رسانه اي : شايد بشه آنرا صوت و تصوير هم گفت ،
اگرچه از ابتدا صوت و تصوير با HTML نبوده اما در حال حاضر
بيشتر مرورگر هاي وب از اين عنصر پشتيباني مي کنند و شما ميتوانيد در وب سايتتان فيلم
وموزيک پخش کنيد.
( javascript ) جاوا اسکريپت : يک نوع زبان نوشتاري
يا بهتر بگويم يک نوع کد است که ارتباط نزديکي با HTML دارد و البته آنها را
بايد داخل کدهاي html بکار برد تا بتوانيد يک
وب سايت حرفه اي با جذابيت بالا طراحي کنيد.
( JavaApplets ) جاوا اپلت : اپلتها برنامه هايي هستند
که توسط زبان جاوا نوشته مي شوند و مي توان آنها را در يک صفحه جاسازي کرد براي کارآيي
بالاي وب سايت مانند عمليات پيچيده رياضيات يا ساختن بازيها. زبان برنامه نويسي جاوا خود يک زبان مجزا و داراي محبوبيت خاصي دردنيا مي
باشد که با جاوا اسکريپت فرق دارد.
( style sheets ) استايل شيت : اين عناصر
قابليت انتقال اطلاعات به عنوان يک الگوي مشترک در بين صفحات را دارد. به طور مثال
شما يک الگو براي رنگ متن مي سازيد و سپس آنرا بين صفحاتي که مي خواهيد به اشتراک مي
گذاريد.
( DHTML ) مخفف دو کلمهDynamic Html
مي باشد که وظيفه آن روح بخشيدن به صفحات و بالا
بردن جذابيت وب سايت مي باشد، شما مي توانيد با هماهنگي کدهاي javascript و Dhtml يک وب سايت پويا و زنده طراحي کنيد.
تمامي اين عناصر elements که در بخش قبل ذکر شد مي توان همگي يا تک تک آنها را
در ميان کدهاي html بکار برد. لازم بذکر است که کليه کدها و عناصر
مربوط به زبان html توسط يک کنسرسيوم و انجمني به نام W3C تأييد و به رسميت شناخته
مي شود. انجمن W3C که مخفف World Wide Web Consortium مي باشد، به غير از Html بر کدهاي Style
sheet, xml, xhtml هم نظارت دارد. اين انجمن پس از بررسي کدهاي جديد آنها را در سايت رسمي خود www.w3.org اعلام مي نمايد. در حال حاضر آخرين نسخه html، نسخه html 4.01 ميباشد و بعد از آن نسخه
هاي Xhtml به وب معرفي شده است.
هدف
از ساخت وب سايت
قبل از هر کاري شما بايد هدف مشخصي داشته باشيد تا مصمم تر آن را دنبال کنيد،
پس براي ساختن يک وب سايت هم هدف از ساخت آنرا مشخص کنيد به طور مثال موضوع آن چيست
يا چه طرحي مي خواهيد داشته باشه با چه تعداد صفحه. بد نيست که نوع مخاطبين و بيننده
ها را هم مشخص کنيد که چه کساني قرار است از سايت شما استفاده کنند. شما مي توانيد
در ابتدا از يک سايت شخصي شروع کنيد، فکر کنم با پيشرفت تکنولوژي کامپيوتر و اينترنت
در آينده نزديک هر کسي مانند شناسنامه بايد يک سايت براي معرفي خود داشته باشه. هميشه
سعي کنيد تا مطالب را متناسب با مضمون سايت انتخاب کنيد و در هر قسمت يک هدف را دنبال
کنيد که بيننده گيج و فراري نشود. اگر سايت شما شخصي است و در آن خاطرات ، عکسهاي خود
يا دوستانتان را گذاشته ايد پس ديگرنبايد تبليغ محصولات توليدی را اضافه کنيد يا بالعکس.
کجا و چگونه سايت را راه
اندازي کنيد
ابتدا بايد يک اسم مناسب براي سايت انتخاب کنيد که به اين اسم domain مي گويند، اسم يک وب سايت
از سه قسمت تشکيل مي شود: www که مخفف World Wide Web ميباشد، اسم منتخب شما
يا همان Domain و در آخر پسوندهاي مشخص
مانند:.com, .net, .org, .info
پس
از انتخاب اسم که بايد يک هماهنگي با مطالب
سايت داشته باشد، نوبت به ثبت آن ميرسد که شما مجبورهستيد با يک شرکت خدمات
اينترنت قرار داد ببنديد، براي ثبت اسم و اجاره فضا تا اطلاعات شما را در اينترنت به
معرض نمايش بگذارند. بعد از اينکه تنظيمات اوليه انجام شد، شما مي توانيد با استفاده
از سرويسهايي مانند FTP که مخفف File Transfer
Protocol ميباشد اطلاعات سايت را حذف ، اضافه يا تغيير دهيد که در مورد اين
سرويس در بخش ديگري توضيح خواهم داد.
البته سابتهايي هستند که شما ميتوانيد به طور رايگان سايت خود را راه اندازي کنيد اما
معايبي هم دارند که يکي از آنها پخش تبليغات در صفحات شما ميباشد و ديگر اينکه امکانات
محدود آنها است ولي براي شروع کار و آشنايي با نصب و راه اندازي يک وب سايت بسيار مناسب
ميباشند.
اهميت
طراحي وب سايت
يک وب سايت موفق در مرحله طراحي جان مي گيرد چون چند چيز مهم در اين قسمت مشخص
ميشود مانند، قالب بندي، رنگ، محتوا ومديريت اطلاعات سايت. اگر ما درست کردن وب سايت
را به ساختن يک خانه تشبيه کنيم، ميبينيد که انسان منطقي خانه را بدون نقشه و طرح نمي
سازد، پس بياييد به اين قسمت اهميت بيشتري بدهيم تا در پايان کار احساس رضايت بکنيم.
در ساخت يک خانه نکات مهم ديگري هم هست، ظاهر و نماي آن، مواد ومصالح که قرار است بکار
برده شود، در ضمن به راحتي کساني که ميخواهند از آن استفاده کنند هم بايد فکر کرد.
پس شما هم اين نکات را مد نظر داشته باشيد که ظاهر صفحات چه شکلي داشته باشد از چه
رنگهايي استفاده کنيد و چه مطالبي را بکار بريد تا مخاطبين را مجذوب کرده وهمچنين بتوانند
به کليه قسمتهاي سايت دسترسي داشته باشند در هربخشي که هستند. زمان بيشتري را صرف اين
قسمت کنيد تا نيازي به تغييرات اساسي در آينده نداشته باشيد.
براي يادگيري HTML به چه چيزهايي نياز داريد
براي ديدن صفحاتي که طراحي مي کنيد نياز به يک مرورگر
وب web browser داريد اگر شما اين صفحه را مي بينيد پس يکي از اين مرورگرها
را داريد. اما براي نوشتن کدهاي html در حال حاضر به برنامه
ساده notepad
که
درکليه سيستمهاي عامل ويندوز وجود دارد نياز داريد، برنامه هاي پيشرفته ديگري هم هست
که محيط گرافيکي دارند مانند: Microsoft frontpage ,
Macromedia Dreamweaver ولي براي شروع بهتر است که از همان Notepad استفاده کنيد. پس مهمترين چيزي که نياز داريد کمي وقت
و علاقه هست.
تاريخچه Html
HTML توسط Tim Berners-Lee در خلال دهه 90 ميلادي
همراه با گسترش وب، شکوفا شد. اين زبان توسط مرورگر Mosaic معروفيت خاصي پيدا کرد.
در آن زمان HTML در چند مدل منتشر مي شد که آن بستگي داشت به
سازنده فايل و انجمنهايي که در زمينه وب فعاليت داشتند.
در نوامبر 1995 نسخه HTML 2.0 گسترش يافت و بلافاصله
در همان سال HTML 3.0 منتشر شد، ولي استقبالي
از آن نشد. در سال 1996 انجمن W3C شروع به فعاليت بر روي
نسخه اين زبان کرد که حاصل کار آنها در 14 ژانويه 1997 انتشار HTML 3.02 بود. اين نسخه توانست رضايت اکثريت را جلب کند چون هماهنگي
بيشتري با مرورگرهاي مختلف در سيستمهاي عامل متفاوت داشت. در تمام نسخه هاي اين زبان
، سعي بر اين شده بود تا نظر کساني که در زمينه وب سرمايه گذاري کرده بودند جلب شود
و برنامه هاي توليد شده براي وب بتوانند مدت طولاني تري قابل استفاده باشند. به همين
منظور HTML براي اهداف گسترده تري ، در وب توسعه يافت تا
در کليه سيستمهاي اطلاع رساني و الکترونيکي کوچک و بزرگ با بکار بردن گرافيک و رنگها،
قابليت بهره برداري بيشتري داشته باشد.
در 18 دسامبر 1997 نسخه HTML 4.0 در وب منتشر شد و در همين
بين شرکتهاي توليد کننده مرورگر وب يکسري مشخصات منحصر بخود را به اين نسخه اضافه کردند
که قابل اجرا در مرورگرهاي ديگر نبود. بعضي از اين تغييرات در W3C مورد تاييد قرار گرفت
اما بعضي ديگر نه. با تغييرات HTML مرورگرها مجبور به تغيير
شدند تا با تحولات جديد سازگار شوند.
در تاريخ 24 آوريل 1998 در اين نسخه تجديد نظر شد و حاصل آن پيدايش HTML 4.01 بود که با کمي تغيير و رفع يکسري مشکلات، در W3C برسميت شناخته شد و اين انجمن استفاده از آنرا به توسعه دهندگان و طراحان وب
، توصيه کرد.
بطور کل مجموعه HTML 4 با قابليت استفاده از embeded objects, frames, scripting, style sheets و با کارآيي بالاتر جدولها
و فرمها به وب معرفي شد، همچنين در اين نسخه توجه زيادي به افراد با توانايي کم شده
بود تا اين افراد هم بتوانند از محيط وب استفاده کنند. اما مهمترين قدمي که در اين
نسخه برداشته شد، پشتيباني HTML از زبانهايي بود که از
راست به چپ نوشته ميشدند مانند زبان فارسي،
که در اين نسخه با پذيرفتن استاندارد ISO 10646 به هدف بزرگ بين المللي شدن اين زبان نزديک شدند تا
همه مردم دنيا در هر کجا و با هر زباني بتوانند اسناد HTML را منتقل کنند. HTML 4.01 تفاوت کمي با نسخه اصلي خود يعني
4.0 دارد اما در عوض هماهنگي بيشتري با نسل جديد زبان وب يعني XHTML و نسل بعدي يعني XML دارد. در اصل XHTML اساس و مقدمه XML است که براي هماهنگي و سازگاري HTML با XML منتشر شده است.
HTML 4 زبان بسيار قوي است براي
طراحان و سازندگان محصولات وب اما در آن توجهي به دستگاههاي اطلاع رساني و الکترونيکي
کوچک با قدرت و حافظه کمتر نشده است. به همين منظورW3C در 26 ژانويه 2000 اقدام به معرفي XHTML 1.0 کرد و در 19 دسامبر همان
سال آنرا به رسميت شناخت و تاکيد به استفاده از اين نسخه کرد تا با بکارگيري ويژگيهايي
که دارد دامنه استفاده از زبان محبوب HTML را گسترش دهد و مقدمات
معرفي XML را فراهم کند.
تگهاي HTML
اولين چيزي که براي برنامه نويسي html بايد بدانيد، اينست که
تگ html چيست و چه کاري انجام
ميدهد. تگهاي html دو نوع هستند، تگهاي آغازين و تگهاي پايان دهنده.
بطور کل تگها با دو علامت کوچکتر و بزرگتر، يعني < > مشخص ميشوند و بين اين دو
علامت کد html نوشته ميشود، مانند:
اين يک تگ آغازين است و کد داخل آن به مرورگر ما ميفهماند که متن بعد از آن
بايد بصورت حروف ضخيم و bold به بيننده صفحه نشان داده
شود و بلافاصله متن مورد نظر را مينويسيم و در آخر آن، تگ پايان دهنده که مرورگر بفهمد تا کجا اين متن
بايد بصورت ضخيم نمايش داده شود،
This is a bold text.
همانطور که مشاهده ميکنيد، تگهاي پايان دهنده داراي يک علامت Slash ( / ) ميباشد. اما کار اين تگها چيست؟ مرورگرهاي
وب مانند اينترنت اکسپلورر، به علامتهاي
< > حساس هستند و به محض اينکه به آنها مي رسند کد داخل آنها را خوانده و عمليات
لازم را بر روي متن بعد از آن انجام ميدهند تا به تگ پايان دهنده برسند. در حقيقت مرورگرها
حکم مترجم را براي ما دارند و کليه تگها ونوشته هاي داخل آنها را بصورت اطلاعات منظم
و قابل فهم در قالب يک صفحه وب براي ما ترجمه
کرده و به نمايش ميگذارند. ما با وارد کردن تگهاي مناسب، کنترل نمايش صفحه وب را در
مرورگرها به کنترل خود در مي آوريم پس بايد ياد بگيريد که تگهاي html را چگونه و در کجا بنويسيد. زبان html هم مانند هر زبان ديگري
ساختار و قواعد خاص خود را دارد که در صفحات بعد با آنها آشنا مي شويد.
Source code
صفحات وب داراي مزيتي هستند و آن مشاهده
کدهاي Html در مرورگر است که شما براحتي مي توانيد تگهاي
عناصر تشکيل دهنده آن صفحه را ببينيد و با نحوه قرار گرفتن و تکنيکهاي بکار گرفته شده
آشنا شويد. براي ديدن سورس کد يا همان کد تشکيل دهنده صفحه وب داخل منوي view در مرورگر مي شويد و بر
روي گزينه Source
کليک
مي کنيد که بطور معمول برنامه Notepad باز شده و تگهاي Html را نشان مي دهد که در
حال حاضر فهميدن آنها براي شما مشکل است ولي در آينده نزديک هيچ مشکلي براي درک کدها
نخواهيد داشت.
در
اين بخش شما اولين صفحه وب را خواهيد ساخت تا سادگي زبان html را لمس کنيد. براي شروع
ابتدا برنامه Notepad ويندوز را باز کنيد، البته مي توانيد از هر برنامه
ويرايشگر متن استفاده کنيد. سپس اين تگها را بنويسيد:
اين
تگها به مرورگر وب ميفهماند که از کجا کدهاي html شروع و به کجا ختم ميشوند.
پس بقيه تگها را ما بايد بين اين دو وارد کنيم. تگها را ما به دو دسته تقسيم ميکنيم:
تگهاي قسمت سر head و تگهاي قسمت بدنه body ،
بدين صورت:
فرق اين دو قسمت در اينست که هر اطلاعاتي داخل تگهاي قسمت سر head نوشته شود در صفحه مرورگر نشان داده نميشود ولي در قسمت بدنه body هر اطلاعاتي وارد شود در صفحه نمايش داده ميشود.
خب دوستان اين ساختار کلي و اسکلت بندي يک صفحه وب هست که بايد هميشه
آنرا در نظر داشته باشيد. حالا يک متني بين تگهاي بدنه body وارد کنيد، مثلاً
This
is my first page!
نامگذاری و ذخيره کردن فايل
حالا کدنويسي ما تکميل شد و بايد اين فايل متني را ذخيره کنيم تا بتوانيم در
مرورگر وب خود امتحانش کنيم. ابتدا منو File را باز کنيد و گزينه Save as را انتخاب کنيد، يک پنجره براي آدرس دهي و نامگذاري
آن فايل باز ميشود که آدرس جايي که بايد ذخيره شود را مانند My Documents وارد کنيد. سپس در پايين پنجره باز شده در قسمت File Name اسم فايل را بنام Firstpage وارد کنيد و دقت کنيد
تا در آخر اين اسم يک نقطه بگذاريد و پسوند html را بنويسيد و دکمه Save را بزنيد تا فايل متني ما بصورت يک فايل html ذخيره شود. دقت کنيد اگر ميخواهيد فايل شما در
سيستم عامل DOS هم باز شود بايد پسوند .htm را در آخر اسم وارد کنيد. حالا به سراغ فايل
ذخيره شده ميرويم، اگر در سيستم عامل ويندوز اينکار را انجام داده ايد، آن فايل بايد
آيکون مرورگر اينترنت اکسپلورر را داشته باشد، روي فايل کليک کنيد تا باز شود، همانطور
که مشاهده ميکنيد مرورگر وب شما باز ميشود تا اطلاعات آن صفحه را نمايش دهد. اگر داخل
صفحه فقط نوشتهايي که بين تگ body وارد کرده ايد را مي بينيد
پس بايد به شما تبريک بگويم و از اين به بعد بايد به خودتان بيشتر توجه کنيد. اگر هم
غير از آن مي بينيد يا چيزي مشاهده نميکنيد، مراحل گفته شده را دوباره انجام دهيد. همانطور که دربخشهاي
قبل گفته شد، هرمتني را بين تگهاي وارد کنيد بعد از ذخيره
آن فايل با پسوند.html يا.htm و هنگام نمايش فايل در مرورگر آنرا مشاهده خواهيد کرد
که متن مورد نظر با تنظيمات مرورگر نمايان خواهد شد. ولي ما با استفاده از تگهاي اين
عنصر کنترل نمايش نوشته ها را بدست خود ميگيريم تا همان چيزي که مورد نظر ما است نشان
داده شوند. تگهاي متن را ميتوان به دو دسته
تقسيم کرد، تگهاي اوليه که بيشتر وظيفه خط بندي، پاراگراف بندي و يا تنظيمات در ارتباط
با متن را به عهده دارند و تگهايي که شکل و آرايش حروف را کنترل ميکنند که به آنها formatting مي گويند. بهتر است که Notepad يا هر برنامه ويرايشگر متن را که داريد باز کنيد و هر
کدام از اين تگها را امتحان کنيد تا کاربرد آنها در ذهن شما جاي گيرد.
براي
خط بندي از اين تگ استفاده ميشود و متن بعد از آن به يک خط پايين تر منتقل ميشود که
نيازي به تگ پايان دهنده هم ندارد.
پاراگراف بندي متن را به عهده دارد و فاصله بيشتري را نسبت به
بين خطوط ايجاد ميکند. اين تگ داراي خصوصيت align= " " ميباشد که محل قرارگيري پاراگراف را در يک سطر کنترل ميکند و با کلمات "left", "center", "right", "justify"مقداردهي ميشود.
بين خطوط ايجاد ميکند. اين تگ داراي خصوصيت align= " " ميباشد که محل قرارگيري پاراگراف را در يک سطر کنترل ميکند و با کلمات "left", "center", "right", "justify"مقداردهي ميشود.
...
همانطور که از اسمش پيداست متن بين اين دو تگ در وسط يک سطر قرار خواهد گرفت،
البته اين تگ را براي عناصر ديگر وب نيز ميتوان بکار برد.
مرورگرها فاصله هر کلمه را در حد استاندارد نشان ميدهند و اگر شما بخواهيد
که يک متن با فاصله هاي زيادي نمايش داده شود يعني آنطور که ميخواهيد نشان داده شود
از اين تگ استفاده ميکنيد.
به اين تگHeading مي گويند و براي مشخص کردن سرفصلها و تيترها بکار ميرود.
اين تگ از عدد يک تا شش درجه بندي دارد که عدد يک بزرگترين حد و شش کوچکترين حد حروف
را نمايش ميدهند. در ضمن داراي خصوصيت " "=align ميباشند و با left, center , right مقداردهي ميشود.
اين تگ روي خود متن کاري صورت نميدهد و فقط با ترسيم
يک خط افقي آنها را از هم جدا ميکند که داراي خصوصيات زير ميباشد.
width=" "طول خط را کنترل ميکند
که هم با عدد در مقياس پيکسل و هم با درصد ميتوان مقدار دهي کرد.
align="
" که
محل قرار گيري خط در يک سطر را کنترل ميکند.
color=" "رنگ خط که ميتوانيد اسم
رنگ يا کد هگز رنگ را بنويسيد.
size=" " اين خصوصيت ضخامت خط را
تعيين ميکند که هرچه عدد بزرگتر باشد ، ضخامت بيشتر است. بصورت پيش فرض خط داراي سايه
ميباشد و اگر خصوصيت noshade را به تگ اضافه کنيد ديگر سايه را نشان نميدهد.مثال
اين تگ کاربرد فراواني براي مدل دادن به متن دارد و
مانند تگ
آن قسمت از متن را جدا ميکند وبه خط بعد منتقل ميکند . خصوصيت style=" " در اين تگ توانايي اعمال يک الگوي خاص در آن قسمت از متن را ميدهد. بطور مثال هر گاه کاربر نشانگر موس را روي آن متن برد ، نوشته هاي ما خط دار شود، البته هر نوع Style که تعريف شود همان را بکار ميبرد. در بخش Style Sheets درست کردن الگوها را توضيح خواهم داد.
آن قسمت از متن را جدا ميکند وبه خط بعد منتقل ميکند . خصوصيت style=" " در اين تگ توانايي اعمال يک الگوي خاص در آن قسمت از متن را ميدهد. بطور مثال هر گاه کاربر نشانگر موس را روي آن متن برد ، نوشته هاي ما خط دار شود، البته هر نوع Style که تعريف شود همان را بکار ميبرد. در بخش Style Sheets درست کردن الگوها را توضيح خواهم داد.
اين تگ هم مانند تگ بالا ميباشد با اين تفاوت که مخصوص يک کلمه يا حتي يک حرف
ميباشد چون مانند div متن را از بقيه جدا نميکند
و داراي خصوصيت style=" " ميباشد که بر فرض هنگام
قرار گرفتن موس روي يک کلمه زمينه آن رنگي شود.
متن بين اين دو تگ متحرک خواهد شد و داراي خصوصيات زير ميباشد، البته اين تگ
ممکن است در همه مرورگرها عمل نکند ولي در مرورگر اينترنت اکسپلورر (IE) مشکلي براي نمايش ندارد. خصوصيات اين تگ عبارتند از :
align=" "محل قرار گرفتن متن را
تعيين ميکند که با کلمات top, middle, bottom مقدار دهي ميشود.
behavior=" "اين خصوصيت نحوه حرکت
متن را کنترل ميکند که آنرا برابر با scroll اگر قرار دهيم، متن بصورت متناوب از يکطرف صفحه وارد
و از طرف ديگر خارج ميشود و اگر برابر با alternate قرار دهيم ، متن از صفحه خارج نميشود و در عرض مرورگر
حرکت ميکند، همچنين اگر برابر با slide باشد ، متن از يکطرف وارد صفحه شده و در طرف ديگرميايستد.
bgcolor="
" رنگ
زمينه آن تگ را مشخص ميکند که يا نام رنگ يا کد هگز آنرا مينويسيد.
direction=" "جهت ورود متن به صفحه
را کنترل ميکند و با کلمات left, right, top,
down که از چپ ، راست، بالا
و پايين ميتواند وارد شود.
height=" "ارتفاع کادر marquee را به عدد در مقياس پيکسل يا به درصد تعيين ميکند.
hspace="
" حاشيه چپ و راست را کم وزياد ميکند.
loop=" "تعداد چرخش متن را کنترل
ميکند.
scrolldelay=" "
سرعت
حرکت متن را تعيين ميکند.
vspace="
" حاشيه بالا و پايين متن را مشخص ميکند.
width="
" عرض کادر را کنترل ميکند.
<-->
از اين تگ براي افزودن نظريه يا هر نوشته ديگري که نميخواهيد در مرورگر نمايش
داده شود و يا عملي را انجام دهد استفاده ميکنيد که بجاي نقطه چين هر متني را ميتوانيد
وارد کنيد .
اين تگ فقط مخصوص مشخص کردن متن ازطرف چپ يا راست که داراي خصوصيت dir=” “ ميباشد و با ltr يعني از چپ به راست و rtl يعني از راست به چپ مقدار دهي ميشود.
ليستها هم جزو عنصر متن در html ميباشند که بخاطر زياد بودن تگهاي متن مجبورم آنها را
از هم جدا کنم. سه نوع ليست وجود دارد، يکي ليستهاي با ترکيب منظم (Ordered list) و ليست با ترکيب نا منظم (Unordered list) وديگري ليستهاي توصيفي (Definition list) . شايد اين نوع نامگذاري بخاطر وجود اعداد يا حروف بترتيب
در ليست منظم است که در ديگري فقط نقطه هاي
توپر هست که ترتيبي را نميتوان براي آنها در نظر گرفت. در هر صورت تگهاي آن به شرح
زير ميباشند:
براي درست کردن ليست در يک صفحه از اين تگها بايد استفاده کنيم، بدين صورت
که در آغاز قسمتي که ميخواهيم ليست درست کنيم تگ
را اضافه ميکنيم و در انتهاي گزينه ها تگ پايان دهنده
را می نويسيم. را اضافه ميکنيم و در انتهاي گزينه ها تگ پايان دهنده
اگر
دقت کنيد به صورت پيش فرض اعداد 1,2,3 به ابتداي گزينه هاي ليست مان اضافه ميشود. شما
ميتوانيد خصوصيت type را به تگ
اين تگ را unordered list مينامند و مانند تگهاي
بالا براي درست کردن ليست در يک صفحه ميباشد با اين تفاوت که بجاي حروف و اعداد از
دايره يا مربع هاي توپر استفاده ميکند که مانند بالا ميتوانيد از خصوصيت type که با کلمات” disc”, “circle”, “square”
مقدار
دهي ميشود استفاده کنيد.
شما ميتوانيد براي درست کردن يک ليست که داراي چند گزينه است و هر گزينه هم
چند زير مجموعه دارد از مخلوط اين دو نوع ليست استفاده کنيد که به اين حالت Nested list گفته ميشود.
بر
فرض مثال ما يک ليست داريم که چهار گزينه دارد و هر کدام از آنها دو رنگ سفيد و سياه
دارند:
- Black
- White
- Black
- White
- Black
- White
- Black
- White
آخرين مدل، ليستهاي توصيفي هستند که براي تعريف و توصيف يک کلمه بکار ميروند
که کلمه مشخص را با تگ
و توصيف آنرا با بکار ميبرند.
لينک
چيست؟
لينکها يا همان نقاط پيوند صفحات هم، يک نوع متن به حساب مي آيند، فقط تنها فرقي که بين
آنها وجود دارد در اين است که هنگاميکه با موس بر روي آنها ميرويم نشانگر موس شکل دست
به خود گرفته تا ما بر روي آن کليک کنيم، البته در بيشتر مواقع رنگ آن هم با متن هاي
معمولي فرق دارد. پس از کليک کردن روي لينکها، ما
به صفحات ديگر يا حتي به سايتي ديگر هدايت ميشويم. تگ مخصوص لينک ميباشد که با خصوصيت href آدرس دهي ميشود که آن
لينک به کجا وصل خواهد شد. به طور مثال اگر ما بخواهيم يک لينک درست کنيم که به سايت yahoo متصل شود بدين صورت عمل ميکنيم،
که در مرورگر لينک زير ظاهر ميشود و ما را به سمت سايت
ياهو حرکت ميدهد دقت کنيد فقط متني که مابين دو تگ آغاز کننده يعني و تگ پايان دهنده
نوشته شود در مرورگر به شکل لينک ظاهر ميشود و قابل
کليک است .
همانطور که مشاهده ميکنيد به صورت پيش فرض رنگ لينکها آبي بوده و زير آنها خط کشيده
ميشود که در بخش Style Sheet شما ياد خواهيد گرفت تا
اين خط را برداشته يا رنگ آن را تغيير دهيد. لينکها را مي توان به دو دسته داخلي و
خارجي تقسيم کرد، همانطور که از اسمشان پيداست لينکهاي داخلي نقاط پيوند داخل يک صفحه
يا صفحات مختلف يک وب سايت ميباشند و لينکهاي خارجي نقاط پيوند بين دو سايت مختلف ميباشند.
Absolute and
Relative
لينکهاي داخلي به دو صورت نوشته ميشوند، يا بايد آدرس کامل وب سايت و فايل
را نوشت مانند:
به اين مدل لينک absolute ميگويند.
و يا اينکه فقط اسم فايل را بنويسيم البته اگر آن فايل داخل يک دايرکتوري است
بايد ابتدا اسم آن دايرکتوري را نوشته سپس نام فايل را مينويسيم. به فرض مثال اگر لينک ما قرار است به يک صفحه به اسم Page01.htm در دايرکتوري بنام htmlpages متصل شود مجموعه کدي که بايد نوشته شود بدين صورت است:
به
اين مدل relative
مي
گويند.
دقت کنيد وقتي صفحه اي که قرار است به اين لينک ما پيوند داده شود دردايرکتوري
پايين تر از اين صفحه قرار دارد اينگونه عمل ميشود اما اگر لينک ما در صفحه اي قرار دارد که قرار است به يک صفحه در
دايرکتوري بالاتر از آن متصل شود مي توانيم به جاي اسم دايرکتوري بالاتر از دو نقطه
کنار هم( .. ) استفاده کنيم،
به طور ساده مي توان گفت که اگر اين صفحه قرار است به صفحه اي داخل دو فولدر
تو در تو متصل شود بايد اسم فولدر اول بعد اسم فولدر داخل فولدر اول سپس اسم آن فايل
يا صفحه را مينويسيم ولي اگر در آن صفحه بخواهيم
يک لينک بگذاريم که به اين صفحه پيوند داده شود جاي فولدر داخلي و فولدر اول ميتوانيم
دو نقطه بگذاريم و سپس اسم اين فايل را بنويسيم يعني بدين شکل:
target
تگ لينک خصوصيتي دارد که توسط آن مي توانيد محل باز شدن و يا نمايش صفحه اي
که مي خواهيد به آن پيوند دهيد را کنترل کند که آن صفحه در همان پنجره يا در يک پنجره جديد باز شود. اين خصوصيت target نام دارد که بايد برابر با يکي از مقادير _blank , _self , _top ,
_parent قرار گيرد.
target="_blank"
اين
مقدار يک پنجره جديد در مرورگر باز کرده و صفحه مربوط به آن لينک را نمايش ميدهد.
_self
اطلاعات
صفحه مربوط به آن لينک در همان فريم که لينک قرار دارد نمايش داده ميشود.
_parent
صفحه
مورد نظر در همان پنجره مرورگر باز خواهد شد ، نه در پنجره جديد.
_top
صفحه
مربوط به اين لينک هيچگاه در پنجره اي که فريم دارد باز نخواهد شد.
Anchor
يک نوع لينک هم هست که دو نقطه را در داخل يک صفحه بهم
متصل ميکند که به آن anchor مي گويند. کاربردهاي گوناگوني
دارد ولي بيشترين کاربرد اين نوع لينک براي مواقعي است که طول يک صفحه از سايت زياد شده و در انتهاي همان
صفحه شما يک لينک مي گذاريد تا با کليک کردن بر روي آن بيننده سايت شما به بالاي همان
صفحه هدايت شود. براي اينکار دو سري تگ لازم است که بايد بنويسيد، يکي جايي است که
ميخواهيد لينک به آن متصل شود که بايد آن نقطه از صفحه را نامگذاري کنيد و اين اسم
بايد داخل همان صفحه تک باشد يعني در جاي ديگر بکار نبرده باشيد و تگ آن به اين صورت
است:
در بين دو علامت " " و به جاي کلمه top هر اسمي ميتوانيد بکار بريد اين نکته را در ذهن داشته
باشيد که اين تگ درمرورگر ظاهر نميشود.اما تگ ديگري که نياز است خود کد لينک است وبجاي
نوشتن آدرس فايل در خصوصيت href شما نامي را که انتخاب کرديد به اضافه علامت # را مينويسيد:
در مورد لينکهاي خارجي يعني لينکهايي که به سايتهاي ديگر وصل ميشوند بايد از
مدل absolute استفاده کنيد و آدرس کامل
را بنويسيد:
نکته: نوشتن پروتکل http:// اجباري نيست و ميتوانيد از نوشتن آن صرف نظر کنيد.
mailto
علاوه بر اين لينکها شما ميتوانيد براي آدرسهاي ايميل
هم لينک درست کنيد که تگ آن به صورت زير ميباشد:
کلمه mailto:
به
مرورگر ميفهماند که بايد يک ايميل به آدرس بعد از آن فرستاده شود. البته اين لينکها
براي بيننده هايي که ايميل هايشان را با برنامه هايي مانند Outlook express چک ميکنند ، مفيد است چون وقتي که روي اين نوع لينک
کليک شود برنامه پيش فرض مديريت ايميل در سيستم عامل کاربر باز ميشود پس براي بيننده
هايي که آدرس ايميل ياهو دارند اين کد مفيد نيست بهتر است که آدرس کامل ايميل را نوشته
و به صورت يک لينک درست کنيد تا براي کليه بينندگان سايت مفيد باشد، مانند مثال زير:
البته شما ميتوانيد حتي موضوع و متن ايميل را تعيين کنيد. اگر قصد همچين کاري
را داريد پس بايد بلافاصله بعد ازآدرس ايميل داخل تگ يک علامت سوال اضافه کنيد تا مرورگر
بفهمد که اين آدرس ادامه دارد و بعد از علامت سوال کلمه subject= را مينويسيد که اين کلمه نشانگر موضوع ايميل است و هرچيزي
که جلوي آن نوشته شود به عنوان موضوع ايميل در برنامه مشخصه نمايان خواهد شد و اگر
متن ايميل هم بخواهيد نوشته شود بايد بعد از موضوعي که نوشتيد علامت & را بگذاريد وسپس کلمه body= را که نشانگر متن ايميل است و در جلوي علامت
مساوي هر متني را ميتوانيد وارد کنيد. بر فرض مثال ميخواهيد که ايميل با موضوع Test و متن Hello my friends به آدرس ايميل فرستاده شود:
توجه داشته باشيد که اگر ميخواهيد اين کد را امتحان
کنيد اول بايد برنامه پيش فرض مديريت ايميل مانند نرم افزار Outlook را براي آدرس ايميل خود تنظيم کنيد.
يکي از عناصري که باعث جذابيت در وب سايت ميشود عنصر عکس يا همان image است. عکسها زيبايي خاصي
به صفحات ميبخشند ولي از طرف ديگر توليد دردسر هم ميکنند، اگر شما تعداد زيادي عکس
در يک صفحه بگذاريد يا از عکسهايي با حجم زياد استفاده کنيد آن موقع است که بيننده
بايد مدت طولاني را صرف کند تا صفحه سايت شما را به طور کامل ببيند و همين موضوع باعث
از دست دادن يک بيننده و يک نمره منفي به حساب ميايد. همانطور که ميدانيد در کشور عزيزمان
ايران سرعتهاي اينترنت خيلي پايين هست و ديدن صفحات سنگين بسيارعذاب آور است البته
بماند که بعضي وقتها همان يک ذره سرعت هم نداريم. پس هميشه تا جايي که ميتوانيد صفحه
را سبک کنيد تا براي بيننده خسته کننده نباشد. يک سايت موفق سايتي است که بيننده زياد
داشته باشد.
فرمتهاي عکس در وب:
خب بپردازيم به ادامه بحث ، عکسها داراي فرمتهاي زيادي
ميباشند ولي فرمتهايي که در وب بکار برده ميشوند، عبارتند از:
.gif (Graphic Interchange Format)
.jpeg
(Joint Photographic Experts Group)
.png
(Portable Network Graphics)
عکسها
با فرمت .gif بيشترين استفاده را در وب دارند و محبوبترين
نوع عکس است. اين نوع فرمت 256 رنگ را پشتيباني ميکند و از ويژگيهاي ديگر آن animation, transparency,
interlacing است . البته محبوبيت آن
بيشتر براي حجم کم آن است.
Transparency به شفافيت يک عکس ميگويند
که آنرا پشت نما هم مينامند. اين ويژگي است که يک عکس آنقدر شفاف است که شما ميتوانيد
تا تصوير ، متن يا رنگ زير آن عکس را ببينيد.
Interlacing
گاهي
وقتها شما منتظر ميشويد تا يک عکس به دليل بزرگي اندازه بارگذاري شود بعد آنرا ببينيد
اما اگر عکسي اين ويژگي را داشته باشد کم کم عکس کامل خواهد شد يعني خط به خط به عکس
اضافه ميشود تا کامل بارگذاري شود.مثال
Animation عکسهاي متحرک را مي گويند وفقط اين
فرمت هست که از متحرک سازي عکس حمايت ميکند.
عکسهايي با فرمت .jpeg حدود 16 ميليون رنگ را
پشتيباني ميکنند ، نسبت به فرمت .gif از حجم بالاتري برخوردار
است ولي کيفيتش بهتر است ، تمام ويژگيهاي gif را دارد به غير از Animation. فرمت .png نسبت به قبليها جديدتر
است و مخلوطي از آنهاست يعني کيفيت jpeg و حجم کم gif را دارد.
افزودن
عکس به صفحه وب:
مانند همه عناصر داخل صفحه، عنصر عکس هم تگ خاص خودش
را دارد که آن تگ
![]()
و پايان دهنده هم ندارد. اما براي مشخص کردن فايل عکس و آدرس دهي آن بايد از
خصوصيت src=" " داخل تگ استفاده کنيم
که اگر يک عکس داخل دايرکتوري وب سايت خودتان باشد ديگر نيازي به آدرس کامل نيست و
فقط اسم دايرکتوري و اسم فايل با پسوند مشخصه آن عکس نوشته ميشود ولي اگر ميخواهيد
که عکسي را از وب سايت ديگري در صفحه خود بگذاريد بايد آدرس آن وب سايت و دايرکتوري
که عکس در آن قرار گرفته و اسم کامل آن فايل را بنويسيد مانند:
Height, Width
اين تگ خصوصيات ديگري هم دارد، يکي از آنها که کاربرد زيادي هم دارد خصوصيات
طول height و عرض width ميباشد که توسط آنها اندازه
يک عکس را داخل صفحه ميتوانيد کنترل کنيد. مقياس اندازه گيري طول و عرض بر حسب پيکسل Pixel ميباشد، اگر شما اين خصوصيات
را کنترل نکنيد عکس در اندازه اصلي خود ظاهر ميشود. بطور مثال شما ميخواهيد عکسي را
وارد کنيد که در صفحه بايد به اندازه 100×100 فضا اشغال کند:
اين نکته را در نظر داشته باشيد که سرعت کامل شدن عکس يعني download شدن آن در صفحه بستگي
به حجم آن دارد نه اندازه عکس، پس ميتوانيد اندازه هاي يک عکس را اضافه کنيد ولي دقت
کنيد که کيفيت عکس خراب نشود.
Alignment
شما ميتوانيد محل قرارگرفتن عکس را نسبت به عناصر اطراف خودش با خصوصيت align=” “تعيين کنيد و ميتوانيد کلمات
left,right,top,middle,bottom را براي اين خصوصيت بکار
بريد. بر فرض ميخواهيد که يک متن بعد از عکس و در وسط قرار گيرد:
This is a text
در ضمن اگر ميخواهيد خود عکس در وسط صفحه قرارگيرد بايد از تگ
قبل از تگ ![]()
استفاده کنيد و بعد از
آن
را بنويسيد: 
Border
اگر مايل هستيد براي عکس کادر بگذاريد ميتوانيد از خصوصيت border=” “ استفاده کنيد و آنرا برابر
با يک عدد قرار دهيد که هر چه اين عدد بزرگتر باشد ، کادر دور عکس هم ضخيم تر است به
صورت پيش فرض border=”0”
است
يعني هيچ کادري مشاهده نميشود.مثال
Alt
تا حالا متوجه شديد که در يک وب سايت هنگاميکه نشانگر
موس بر روي يک عکس که قرار ميگيرد يک کادر متني کوچک باز شده بنام tooltip و اطلاعاتي را راجع به آن عکس ميدهد؟ پس شما هم اينکار
را انجام دهيد، خصوصيت alt=" "
را
داخل تگ گذاشته و هر متني را که جلويش بنويسيد در صفحه هنگاميکه موس بر روي عکس قرار
گيرد ، زيرنشانگر نمايان ميشود. بهتر است که شما هميشه اين کار را انجام دهيد چون مرورگرهايي
وجود دارد که عکس را نمايش نميدهد پس با اينکار بيننده از حضور آن عکس خبر دار ميشود.مثال
hspace,
vspace
دو خصوصيت ديگر هست که حاشيه و فضاي خالي دور عکس را
کنترل می کند، hspace=”
“براي
حاشيه چپ و راست عکس وvspace=”
“ براي
بالا و پايين. عددي را که وارد ميکنيد در مقياس پيکسل است.مثال
Image
link
شما
ميتوانيد يک عکس را به صورت لينک هم درست کنيد يعني هرگاه بيننده روي عکس کليک کرد
به صفحه يا سايت ديگر هدايت شود. در بخش قبل با درست کردن لينک آشنا شديد، در اينجا
شما بايد تگ لينک را قبل از تگ عکس بنويسيد و تگ پايان دهنده لينک را بعد از تگ عکس
وارد ميکنيد، بدين صورت:
ساخت
نقشه تصويری ( image map )
Image
map يکي
از تکنيکهاي ساخت عکس بصورت لينک است که گاهي اوقات به کمک ما ميايد. بطور مثال ما
نقشه ايران را در صفحه اي قرارداده و ميخواهيم که بيننده سايت هرگاه روي يک استان کليک
کرد صفحه مربوط به آن باز شود تا اطلاعات مربوطه را در اختيار کاربر قرار دهد. اين
حالت حجم عکس را افزايش نخواهد داد و بهتر است از عکسهايي با حجم بالا استفاده نکنيم
عکس مورد نظر را با استفاده از تگ ![]()
درصفحه قراردهيد، سپس خصوصيت usemap=" " را به تگ اضافه
کنيد که آنرا برابربا يک اسم واحد بايد قرار دهيم تا از آن اسم در جاي ديگر استفاده
شود. اين خصوصيت به مرورگر ميفهماند که عکس را بصورت Image map ميخواهيم بکار بريم.
به علامت # دقت کنيد که بايد نوشته شود. در حال حاضر عکس آماده است و بايد
تگهاي نقشه را وارد کنيم.ابتدا تگ وارد ميکنيم تا مرورگر
بفهمد که نقشه آغاز شده و با استفاده از خصوصيت name=" " مشخص ميشود که چه عکسي قرار است اين خاصيت را داشته
باشد. حالا نوبت به تعيين قسمتهاي مختلف عکس رسيده که هر قسمت در چه اندازه اي و به
کجا بايد لينک شود. اين قسمتها ميتوانند اشکال هندسي نظيردايره، چهارگوش وچند ضلعي
باشند. اين اطلاعات در تگ مشخص ميشوند، اين تگ داراي
سه خصوصيت ميباشد:
Shape=" " مشخص ميکند که هر قسمت
داراي چه شکل هندسي ميباشد. اگر چهارگوش rectangle باشد آنرا برابر با "rect" قرار ميدهيم، اگر دايره circle بخواهيم برابر با "circle" و اگر چند ضلعي polygon بخواهيم برابر با "poly" قرار ميدهيم.
Coords=" "اين خصوصيت، مختصات نقاط تشکيل دهنده شکلها را مشخص ميکند که مختصات هر نقطه بر اساس
محور x, y در مقياس پيکسل ميباشد.
براي تشکيل يک لينک به شکل چهارگوش بايد مختصات دو نقطه گوشه چپ طرف بالاوگوشه راست
طرف پايين آنرا بدست بياوريم ، چون هر نقطه داراي دو مختصات ميباشد يکي بر روي محور xها و ديگري yها پس چهار عدد بايد بنويسيم و هر عدد را با علامت کاما
جدا کنيم.
Coords="10,10,65,65"
همچنين براي درست کردن يک لينک به شکل دايره مختصات مرکز آن و اندازه طول شعاع
را بايد پيدا کنيم که با توجه به گفته بالا سه عدد بايد نوشته شود و براي چند ضلعي
به تعداد هر نقطه دو عدد مينويسيم که ديگر محدوديت ندارد.
href="
" که
در اين قسمت آدرس صفحه يا سايت مورد نظر را وارد ميکنيم.
خب سوالي که حالا پيش ميايد، اينست که مختصات اين نقاط را چگونه پيدا کنيم؟
دو راه براي آن وجود دارد، يکي استفاده از برنامه هاي مختلف مانند Photoshop و ديگري که برايتان توضيح خواهم داد
بدون استفاده از برنامه جانبي است و داخل همان صفحه ، با کمک مرورگر اينترنت اکسپلورراست.
بعد از اينکه يک عکس را در صفحه قرار داديم و مراحل تشکيل Image map را انجام داديم يک تگ
و يک خصوصيت به اين کدها اضافه ميکنيم و آنچه را که ميخواهيم براحتي بدست مياوريم.
ابتدا تگ مخصوص لينک را قبل از![]()
قرار ميدهيم تا عکس ما
بصورت يک لينک ظاهر شود و سپس خصوصيت ismap را به تگ![]()
اضافه ميکنيم و فايل را ذخيره ميکنيم. حالا آنرا باز
کرده و همانطور که موس را روي عکس حرکت ميدهيد يک نگاه به نوار وضعيت status bar مرورگر در پايين بياندازيد،
اعدادي را که مشاهده ميکنيد مختصات نقاط ميباشند.
تگ
جدول
جدولها يکي از بهترين و مفيدترين عنصرها در صفحات وب ميباشند، با استفاده از
آنها ما مي توانيم اطلاعات و عناصررا در يک صفحه سازمان دهي و مرتب کنيم . کليه اطلاعات
يا عناصر ديگر وب را ميتوانيم داخل رديف ها يا ستون هاي يک جدول قرار دهيم بدون آنکه
خطوط جدول مشخص باشد و يا در صورت نياز خطوط آنها نمايان ميشود. کمتر کسي را پيدا ميکنيد
که از اين عنصر استفاده نکند و زمانيکه تجربه
کافي براي طراحي يک سايت بدست آورديد به اهميت اين عنصر پي خواهيد برد.تگ مشخصه جدول
ميباشد. اما براي اضافه
کردن رديف به يک جدول از
و براي ستون از تگ استفاده ميکنيم. پس ساختار کلي يک جدول بدين صورت ميباشد:
this
is a table.
هر چه تگهاي رديف و ستون بيشتر باشد به همان اندازه ما در جدولمان خانه خواهيم
داشت. مجموعه کد بالا نشان دهنده يک جدول با يک رديف و يک ستون است يعني اين جدول داراي
يک خانه ميباشد. يکي از ويژگيهاي جدول که محبوبيت آنرا زياد ميکند اينست که هر خانه
از آن ميتواند به طور مجزا زمينه رنگي و يا عکسي در زمينه آن داشته باشد البته اندازه
هاي هر خانه هم ميتواند متفاوت باشد.
border
خب براي اينکه بتوانيم يک جدول را در مرورگر خود ببينيم بايد با خصوصيت border=" " آشنا شويم. اين خصوصيت
دور جدول يک کادردرست ميکند البته اگر اين خصوصيت را برابربا صفر قرار دهيم يا آنرا
ننويسيم کادر دور جدول در مرورگر نمايان نخواهد شد و هر چه عدد بزرگتري بگذاريم کادر
ضخيم تري خواهيم داشت، در ضمن رنگ کادرهم با bordercolor=" " که برابر با عدد هگز رنگ است تعيين ميشود. border ويژگيهاي ديگري هم دارد، به طور مثال شما ميتوانيد خصوصيت frame=" " را به تگ
اضافه کرده و آنرا برابر با يکي از کلمات void, above, below, hsides, vsides,lhs, rhs, box قرار دهيد تا کادر دور جدول را کنترل کنيد. اين کلمات
هر کدام يک قسمت از کادر را نمايان ميکنند.
rule
ويژگي ديگري هم هست ولي بهتره اول يک جدول درست کنيد تا مطلب جا بيافتد، برنامه Notepad را باز کنيد و کد زير را وارد کرده و به اسم Table.htm ذخيره کنيد:
cell 01
cell 02
cell 03
cell 04
حالا خصوصيت rules=" "را به تگ
اضافه کنيد و هر بار يکي از کلمات all, none, groups, rows, cols
را
جلوي آن قرار دهيد و فايل را دوباره ذخيره کنيد تا تاثير اين خصوصيت را ببينيد.
Alignment
ميتوانيد با استفاده از خصوصيت align=" "که در تگ مينويسيد محل قرارگرفتن
يک عنصر مانند متن را تعيين کنيد که ميتوانيد اين خصوصيت را با کلمات left, right, center,
justify مقداردهي کنيد.
height, width
با خصوصيات height=" " , width="
" هم اندازه طول و عرض يک
جدول را ميتوان کنترل کرد که بايد آنها را برابر با عدد در مقياس پيکسل قرار دهيد در
ضمن شما ميتوانيد از درصد % هم استفاده کنيد مانند
width="90%" که اين جدول نود درصد
عرض يک صفحه را اشغال ميکند.
bgcolor
براي تعيين رنگ زمينه يک جدول ازbgcolor=" " که با عدد هگز رنگها مقدار دهي ميشود استفاده ميکنيم.
اين خصوصيت را در تگ هاي
و هم مي توانيد بکار بريد.
cellspacing,
cellpadding
تگ
دو خصوصيت ديگر هم دارد
که شما با بکار بردن آنها ميتوانيد فاصله بين خانه هاي جدول را از هم کنترل کنيد يعني
فضاي خالي بين خانه ها اضافه کنيد، اين خصوصيت اين است cellspacing=" "و ديگري فاصله بين متن
داخل يک خانه در جدول با لبه هاي چارچوب آن خانه است که خصوصيت cellpadding=" "
اين
وظيفه را به عهده دارد. هرچه مقداردهي عددي آنها بزرگتر باشد فاصله ها بيشتر خواهد
بود.
header:
حالا که با درست کردن رديف و ستون در جدول آشنا شديد، ميتوانيد براي هر ستون
و رديف عنوان گذاري کنيد و يک تيتر به بالاي ستون يا به ابتداي يک رديف اضافه کنيد.
در هر قسمت که شما به يک تيتر و عنوان نياز داشتيد بجاي تگ از تگ استفاده کنيد که در اين حالت متن نوشته شده در
آن خانه بصورت ضخيم ظاهر شده و از بقيه متمايز ميشود.
colspan,
rowspan
گاهي اوقات شما نياز داريد تا چند خانه در يک رديف يا يک ستون از جدول را ترکيب
کنيد تا يک خانه درست شود و بطور مثال يک تيتر و عنوان در آن قرار دهيد که براي ترکيب
خانه هاي يک ستون از خصوصيت rowspan=" " و براي يک رديف از colspan=" " در تگ استفاده ميکنيد و مقدار
آنرا برابر با تعداد خانه هايي که بايد يکي شوند، قرار ميدهيد.
caption
بطور معمول هر جدول داراي يک اسم و يا يک توضيح ميباشد که آنرا با تگ در ميان تگهاي
مشخص ميکنند. اين تگ داراي
خصوصيت align=" " ميباشد با کلمات top, bottom, left,
center, right مقداردهي ميشود.
thead, tbody,
tfoot
اگر جدول شما داراي ستونها و رديفهاي زيادي است پس تکرار خصوصيات در هر تگ
مربوطه بسيار دشوار است. شما ميتوانيد بصورت گروهي اين خصوصيات را کنترل کنيد. براي
کنترل رديفها بايد آنها را به سه قسمت تقسيم کرد، قسمت سرشامل فقط خانه هاي رديف اول،
بدنه شامل همه رديفهاي وسط و قسمت انتهايي شامل فقط خانه هاي آخرين رديف، که قسمت سر
را با ، قسمت بدنه را با
و قسمت انتهايي را با
کنترل ميکنيم. اين تگ داراي خصوصيت align نيز ميباشد.
colgroup
همچنين با تگ ميتوانيد خصوصيات کليه
ستونهاي يک جدول را کنترل کنيد که اين تگ علاوه بر خصوصيات گفته شده در اين بخش داراي
خصوصيت span=" " نيز ميباشد که توسط آن
تعداد ستونهايي که بايد کنترل شوند را تعيين ميکنيد.
summery
يک خصوصيت ديگر نيز براي تگ
هست بنام summery=" " که توصيفي از جدول ميباشد ولي در جايي نمايش
داده نميشود. اين خصوصيت براي مرورگرهايي که فقط متن را نمايش ميدهند و يا مرورگرهاي
مخصوص افراد ناتوان ، مفيد ميباشد که بهتر است از آن استفاده کنيد. به اين موضوع هم توجه داشته باشيد که شما ميتوانيد داخل
يک جدول، جدول ديگري هم درست کنيد يعني داخل هرخانه جداگانه يک جدول بسازيد که به اين
روشNested
table گفته ميشود.
فرم
چيست؟
فرمها تنها عنصري هستند که بيننده سايت ميتواند اطلاعاتي
را بطور مستقيم وارد کرده که اين اطلاعات بعد از تجزيه و تحليل يا در فايلي ذخيره شده
يا فرستاده ميشود. شما ميتوانيد داخل يک صفحه
يا يک وب سايت چندين فرم داشته باشيد بطور مثال براي چند نوع نظرسنجي از بينندگان که
هر کدام از اين فرمها را با استفاده از خصوصيت name=” “در تگ بايد نامگذاري کنيد تا اطلاعات مربوط به هر فرم با نام همان فرم پردازش شود. فرمها داراي اجزاي متفاوتي با وظيفه
مشخص ميباشند که بايد قبل از تگ پايان دهنده
فرمها توسط برنامه هايي نظير ASP, CGI و با افزودن خصوصيات action=” “, method=” “, enctype=” “ در تگ
اطلاعات وارده را پردازش کرده و به وب سرور ميفهماند که به چه روش و در کجا اطلاعات ذخيره يا فرستاده شود. وب سرور به کامپيوتري که محتواي سايت شما بر روي آن قرار دارد گفته ميشود.
اطلاعات وارده را پردازش کرده و به وب سرور ميفهماند که به چه روش و در کجا اطلاعات ذخيره يا فرستاده شود. وب سرور به کامپيوتري که محتواي سايت شما بر روي آن قرار دارد گفته ميشود.
دکمه (button)
کليه
اجزاي ساخته شده در يک فرم بدون بودن دکمه تأييد بي فايده هستند، چون بعد از فشردن
اين دکمه است که اطلاعات وارده در فرم پردازش ميشوند. پس ابتدا به ساختن اين دکمه ميپردازيم.
براي ساختن دکمه ها در يک فرم به دو روش ميتوانيم عمل کنيم:
روش
اول: با استفاده از تگ
که داراي دو خصوصيت name=” “براي نامگذاري و type=” “براي مشخص کردن نوع دکمه که submit و يا reset ميباشد . در بين تگ آغازکننده
و پايان دهنده هر چي نوشته شود در ظاهر دکمه نمايان ميشود
روش دوم: با استفاده از تگ که مانند روش اول دو خصوصيت name=” “که بايد کلمه button در جلوي آن بيايد و type=” “که ميتواند هم submit باشد و يا reset.
فرقي که اين دو روش با هم دارند در اينست که شما در روش اول هر نوشته اي را
بخواهيد در روي دکمه هنگام نمايش صفحه در مرورگر نشان داده ميشود اما در روش دوم شما
دخالتي در اين کار نداريد و به صورت پيش فرض کلمه submit , reset نمايان ميشود. البته ميتوانيد بجاي دکمه هاي ساخته شده
توسط مرورگراز عکس هم استفاده کنيد يعني شکل يک دکمه را طراحي کنيد و در فرم قرار دهيد
که خصوصيت type=” “
را
برابر با کلمه image قرار ميدهيد و با خصوصيت src=” “ آن را آدرس دهي ميکنيد:
لازم بذکر است که در اين تکنيک فقط از حالت submit دکمه بايد استفاده کرد.
text field,
text area
خب بعد از ساختن دکمه ها ميپردازيم به بقيه اجزاي يک
فرم. از اين به بعد ما با تگ
وخصوصياتش زياد کار داريم
. ما براي وارد کردن متن در فرم بسته به نيازمان از دو مدل کادرمتني ميتوانيم استفاده
کنيم، يکي براي وارد کردن يک خط متن کوتاه که چند کلمه بيشتر نباشد و کادر ما هم به
صورت خطي ميباشد و ديگري براي يک متن بلند است و کادر ما داراي چندين رديف ميباشد.
در
مدل اول ازاين تگ استفاده ميکنيم:
دقت کنيد که کلمه text بايد در جلوي خصوصيت type=” “بيايد تا مرورگر بفهمد چه اجزائي از يک فرم را نمايش
ميدهد. توسط خصوصيت size=” “
که
با عدد مقدار دهي ميکنيد اندازه نمايش اين کادر خطي در مرورگر را کنترل ميکنيد و توسطmaxlength=” “
حداکثر
تعداد حروفي را که بيننده مجاز هست تا وارد کند را کنترل ميکنيد.
Textfield
:
اگر قرار باشد که بيننده داخل اين کادر خطي ، کلمه رمز را وارد کند پس بجاي خصوصيت type=”text” بايد از type=”password” استفاده کنيد تا هر متني
که وارد شود بصورت ستاره در مرورگر نمايش داده شود.
Password
:
اما مدل ديگري هست که متنهاي بلند داخل آن نوشته خواهد
شد که بايد از تگ استفاده کنيد که جدا از
خصوصيت name=” “از خصوصيات cols=” “ , rows=” “براي کنترل رديفها و ستونهاي
کادر بکار ميبريد.
this
is a textarea example.
label
زمانيکه شما اجزاي فرم را اضافه مي کنيد، مي توانيد کنار هر کدام يک متني وارد
کنيد تا نام آن قسمت درمرورگر مشخص شود. اما با افزودن تگ کنترل بيشتري روي نام
واجزاي يک فرم خواهيد داشت چون مي توانيد توسط اين تگ يکي از اجزاي فرم را احاطه کنيد،
بدين صورت:
Name:
دراين تگ، توسط خصوصيت for مي توانيد مشخص کنيد که label مربوط به کدام قسمت فرم است و در اين حالت نيازي به احاطه کردن اجزاي فرم نيست،
Tab order
يکي از خصوصيات مفيد تگهاي html بنام tabindex است که کاربرد زيادي در عنصر فرم دارد و به همين خاطر
در اين قسمت آنرا توضيح ميدهيم. تاکنون متوجه شده ايد که با زدن دکمه Tab بر روي کيبورد، مکان نما با ترتيب خاصي بر نقاط مختلف صفحه متمرکز مي شود که
مي توانيم اين ترتيب حرکت را به کنترل خود در بياوريم. قبول کنيد که حرکت کردن بين
اجزاي يک فرم توسط موس مخصوصاً زمانيکه يک فرم طولاني پيش رو داريم، بسيار سخت تر از
حرکت با دکمه Tab کيبورد است. با اضافه کردن خصوصيت tabindex به تگهاي يک فرم و مقداردهي اين خصوصيت به ترتيب اعداد
مي توانيم تمرکز مکان نما را از يک نقطه به نقطه مورد نظر به کنترل خود در آوريم. دقت
کنيد که مقادير اين خصوصيت تکراري نباشد. به کد زير توجه بفرماييد:
file field
گاهي اوقات نياز هست که به همراه اطلاعات وارد شده در فرم، فايلي هم ضميمه
و به سرور فرستاده شود. براي اين حالت بايد در فرم، تگ را نوشت و خصوصيت type آنرا برابر با کلمه file قرار داد. هنگاميکه اين
خصوصيت را وارد مي کنيد، مرورگر بطور اتوماتيک يک کادر متني و يک دکمه براي جستجوي
فايل بنام Browse نمايان مي کند. در نظر داشته باشيد که براي اين
تگ تنظيمات وب سروربسيار مهم است وگرنه فايل فرستاده شده، خراب خواهد شد و اگر هم فرم
قرار است که به ايميل فرستاده شود پس به اين نکات بايد دقت کنيد که در تگ اصلي فرم
حتماً enctype="multipart/form-data" را نوشته و در تگ file field هم accept="text/plain"
را
وارد کنيد که در اين حالت فايلهاي متني txt به درستي فرستاده مي شود. کلاً در
بيشتر مواقع و با تنظيمات درست هم ممکن است فايل خراب شود.
قاب
یا فريم چيست؟
هنگاميکه بخواهيد دو يا سه صفحه را در يک صفحه جاي دهيد بايد از عنصر فريم
يا چارچوب استفاده کنيد. اين عنصر زماني کارآيي دارد که ميخواهيد يک قسمت، در همه صفحات
ثابت باشد. به طور مثال شما در سمت چب صفحه يک ليست ثابت داريد و ميخواهيد هر وقت بيننده
روي هر گزينه از اين ليست که کليک کرد توضيحات مربوط به آن در سمت راست نمايان شود.
پس ابتدا يک صفحه براي آن ليست درست کنيد و براي اطلاعات هر گزينه هم يک صفحه بسازيد
و آنها را در يک فريم بگذاريد.
به مجموعه صفحات گنجانده شده در يک صفحه frameset مي گويند و به هر صفحه از آن يک frame يا يک چارچوب گفته ميشود.
در ساختار اصلي کدها، ديگر تگ نوشته نميشود و جاي آن تگ
قرارميگيرد، البته هر صفحه يعني هر فريم را که کد نويسي
ميکنيد مانند ساختار معمولي است و از تگ بايد استفاده کنيد ولي
هنگاميکه صفحات را در يک frameset ميگذاريد بايد در ساختار
کد آن بجاي از استفاده کرد،
توجه داشته باشيد که براي ديدن source code فريمها بايد بر روي هر
فريم کليک راست کرده و گزينه view source را انتخاب کنيد و براي
مشاهده کدهاي يک frameset بايد از منو view مرورگر اقدام نماييد.
cols, rows
هر فريم ميتواند عمودي يا افقي در صفحه قرار گيرد يا يک frameset مخلوطي از چند فريم عمودي و افقي باشد که هر کدام از
آنها توسط خصوصيتي در تگکنترل ميشوند. به طور مثال اگر دو فريم داشته باشيم
و آنها را بخواهيم به صورت عمودي در صفحه قرار دهيم از خصوصيت cols=” “ استفاده ميکنيم و اين
خصوصيت را برابر با درصد اشغال هر فريم قرار ميدهيم يعني اگر ما دو فريم داشته باشيم
و بخواهيم که يکي از آنها %30 صفحه را اشغال کند پس ديگري %70 را اشغال خواهد کرد و تگ آن بدين صورت ميشود:
دقت کنيد که اين اعداد با علامت ويرگول از هم جدا ميشوند. اگرهم بخواهيد دو
فريم افقي داشته باشيد از خصوصيت rows=” “ استفاده ميکنيد. اما براي قراردادن دو صفحه يا دوفريم
درframeset بايد هر کدام از آنها را بطور جداگانه آدرس دهي کنيد
و تگ آن براي هر کدام از فريمها به اين صورت است:
آدرس
دهي و نامگذاري
همانطور که ملاحظه ميفرماييد جلوي خصوصيت src=” “بايد آدرس صفحه را بنويسيد.
خصوصيت ديگري هم هست که به غير ازخصوصيت src بايد به اين تگ اضافه شود و آن name=” “ است که براي نامگذاري
هر فريم بکار ميرود. اين نامگذاري زماني براي ما مفيد است که هرگاه ما بخواهيم دريکي
از فريمها لينک بگذاريم هنگاميکه روي لينک کليک ميشود بايد مشخص شود که اطلاعات آن
لينک در کدام فريم نمايش داده شود، به طور مثال فريم سمت چپ داراي يکسري لينک است که
اطلاعات هر کدام بايد در فريم سمت راست نمايش داده شود پس به لينکها بايد نام فريم
مورد نظر را بدهيم تا مشخص شود که اطلاعات را در کدام فريم نشان دهند. اما جدا از نامگذاري
هر فريم براي اينکار بايد به هر لينک خصوصيت target=” “
را
اضافه کرد و آنرا برابر با نام منتخب هر فريم قرار داد.
اگر
هم يک لينک در فايل 01.html داشته باشيم و بخواهيم
درindex01.htm نمايش داده شود، طبق گفته
هاي بالا:
frame border
شما اگر يک frameset درست کرده باشيد متوجه
يک کادر بين فريمهاي داخل آن شده ايد، براي برداشتن اين کادر ميتوانيد frameborder="no" و يا border=”0” رابه تگ اضافه کنيد.
noresize
هنگاميکه frameset در مرورگر نمايش داده
شود، بيننده سايت شما ميتواند سايز هر فريم را تغيير دهد يعني وقتي که نشانگر موس را
روي لبه هر فريم ببرد ميتواند آنرا با drag کردن کم يا
اضافه کند که براي جلوگيري از تغيير سايز هر فريم خصوصيت noresize رابه تگ بيافزاييد.
scrolling
خصوصيت ديگري هم هست که scroll bar هر فريم را کنترل ميکند،
هر فريم داراي
scroll ميباشد يعني ميتوانيد
صفحه داخل فريم را به چپ وراست يا بالاوپايين حرکت دهيد که با خصوصيت scrolling=” “ کنترل ميشود و آنرا برابر
با کلمات Yes,no,auto
قرار
دهيد.
noframes
بعضي از مرورگرها هستند که از اين عنصر پشتيباني نمي کنند و فريم ها را نشان
نمي دهند، به همين دليل شما مجبور هستيد تا به کاربراني که از اين گونه مرورگرها استفاده
مي کنند، اعلام کنيد که مرورگر آنها اين قابليت را ندارد. پس فراموش نکنيد که اين قطعه
کد را هميشه به frameset اضافه کنيد:
با پيشرفت تکنولوژي در وب و نسخه هاي جديد مرورگرها که توانايي استفاده از
مولتي مديا را در اختيار ما مي گذاشتن، انگيزه اي ايجاد شد تا صوت و تصوير هم در صفحات
وب گنجانده شوند و سايتها را جذاب تر کنند. در اين صفحه راههاي اضافه کردن فايل صوتي
به يک صفحه را مي آموزيد و در صفحه بعد افزودن فايلهاي تصويري را ياد خواهيد گرفت.
اهميت
حجم فايل صوتي
فايلهاي صوتي يکي از سنگين ترين عناصر در وب از لحاظ حجم مي باشند که بايد
در انتخاب آنها بيشتر دقت کنيد، چون هر چه فايل سنگين تر باشد دانلود شدن آن و همچنين
صفحه وب کند تر و خسته کننده تر خواهد شد.
MIME
هنگاميکه يک فايل صوتي به صفحه اضافه شود، مرورگر به تنهايي قادر به پخش آن
نمي باشد و بايد به کمک يک برنامه کاربردي ديگر اينکار را انجام دهد. مرورگرها توسط
اطلاعاتي که از فايل دريافت مي کنند مي توانند تشخيص دهند که چه برنامه اي را بايد
براي پخش آن فايل صدا بزنند که اين اطلاعات را MIME مي گويند. MIME مخفف Multipurpose Internet
Mail Extensions است. زمانيکه مرورگر
با يک MIME ناشناخته مواجه شود، پيغام خطاي “File Not Found” را در صفحه نمايش مي دهد.
فرمتهاي
فايلهاي صوتي
WAV
يکي از فرمتهاي صوتي که کيفيت بالايي هم دارد و البته حجم زيادي هم اشغال
مي کند و در سيستم عامل ويندوز بکار مي رود. نوع MIME اين فرمت برابر است با audio/wav .
AU اين فرمت متعلق
به سيستمهاي عامل UNIX, Linux است و خاصيت آن داشتن
حجم کم و البته با کيفيت پايين تر، که نوع MIME اين فرمت برابر است با audio/basic .
AIFF اين فرمت هم متعلق به
کامپيوترهاي Macintosh است با کيفيت بالا و حجم
بسيار بالا. نوع MIME آن برابر است با audio/aiff .
MIDI اين فرمت با فرمتهاي ديگر
صوتي تفاوتهايي دارد. در اين فرمت بجاي ذخيره شدن فرکانس صدا، آهنگ صدا يا همان نت
هاي موسيقي را ذخيره و پخش مي کند. بزرگترين مزيت آن حجم بسيار پايين و عيب آن، پخش آهنگ بدون گفتار است. نوع MIME اين فرمت audio/midi است.
افزودن فايل صوتي به زمينه صفحه
با اضافه کردن تگ
افزودن
فايل صوتي بصورت لينک
يکي ديگر از راههاي اضافه کردن فايل صوتي به صفحه از طريق قرار دادن لينک و
تگ است که بيننده با کليک کردن بر روي آن لينک مي تواند
هم آن فايل را بر روي هارد ديسک خود ذخيره کند و يا آنرا از همانجا باز کند. البته
در مرورگراينترنت اکسپلورر نسخه 6.0 ابتدا پيغامي ظاهر مي شود که اگر دکمه Yes را بزنيد آن فايل توسط خود مرورگر پخش خواهد شد. در تگ لينک بايد از خصوصيت href براي آدرس دهي استفاده کنيد، فقط دقت کنيد که پسوندها را درست بنويسيد.
افزودن
فايل صوتي از طريق object
يکي از بهترين راههايي که مي توان فايل صوتي را به صفحه اضافه کرد، از طريق
تگ است. يکي از مزايايي که اين تگ دارد اينست که، شما مي
توانيد يک متني را بين تگ آغازين و پايان دهنده اضافه کنيد که اگر مرورگر نتوانست آن
فايل را بشناسد، نوشته مذکور در صفحه نمايان شود. در اين تگ براي آدرس دهي از خصوصيت data و براي تعيين MIME آن فايل از خصوصيت type استفاده مي شود، همچنين
از خصوصيت height, width براي کنترل طول و عرض
لوگوي برنامه پخش کننده فايل استفاده کنيد که در صورت لزوم آنها را برابر با عدد صفر
قرار دهيد تا لوگو در صفحه ظاهر نشود.
Your
browser doesn’t support this audio format.
نکته: هنگاميکه صفحه داراي اين تگ را باز کنيد يک پيغام هشدار در مورد ActiveX ظاهر خواهد شد که براي اجراي فايل بايد دکمه Yes را بزنيد.
Embed file
تکنيک ديگر براي افزودن يک فايل مولتي مديا به صفحه از طريق تگ embed است. اين تگ استاندارد W3C نيست و در بيشتر مرورگرها
اجرا نمي شود. از خصوصيت src براي آدرس دهي فايل و
براي کنترل طول و عرض لوگوي برنامه کمکي از خصوصيت height, width مي توانيد استفاده کنيد.
اين تگ داراي خصوصيات autostart و loop مي باشد که با کلمات false يا true مقدار دهي مي شوند.
loop="false"
height="40" width="150">
Streaming
Audio
احتمالاً متوجه شديد که راههاي ذکر شده در بالا به درستي جواب نمي دهند و به
خاطر مشکلات امنيتي ، مرورگرها فايلها را پخش نمي کنند. اما تکنيک ديگري هم هست که
کليه مرورگرها از آن پشتيباني کرده و حتي با استفاده از آن مي توانيد فايلهاي سنگين
را هم در صفحات بکار بريد بدون آنکه بيننده زمان زيادي را براي دانلود آنها صرف کند.
اين تکنيک استفاده از روش Streaming Audio and Video
است
که در صفحه بعد به آن مي پردازيم.
doctype
در اين بخش ميخواهم در مورد تگهاي قسمت برايتان توضيح دهم . همانطور
که ميدانيد تگهاي Html را به دو بخش اصلي تقسيم
کرديم ، يکي قسمت سر يا همان head ديگري قسمت بدنه يا body که هر دو مابين دو تگ اصلي نوشته ميشوند، اما يک
تگ هم وجود دارد که خارج از اين قانون عمل ميکند و در اولين خط شروع کدنويسي بايد آنرا بنويسيم يعني قبل از تگ آغاز
کننده و آن DTD يک صفحه وب ميباشد که مخفف Document Type
Definition است و کار آن معرفي نوع
تگها خصوصيات آنها و قوانيني که بايد در آن صفحه وب بکار برده شود که بطور خلاصه در
تگ مربوط به آن توصيف ميشود. تگ مشخصه DTD ،
ميباشد و مانند بقيه تگها داراي خصوصياتي هست، البته
اين تگ اختياري است چون بعضي از مرورگرها بدون آن هم صفحه را نمايش ميدهند ولي بهتر
است که نوشته شود.
هر نسخه از HTML يک DTD مخصوص به خود را دارد و نسخه هاي معتبر HTML عبارتند از: 2, 3.2, 4 و نسخه جديد آن Html 4.01 ميباشد و اگر از کدهاي XHTML هم استفاده ميکنيد ، آنرا
هم بايد مشخص کنيد. همانطور که در بخشهاي قبل گفتم اعلام و به رسميت شناختن تگهاو نسخه
هاي HTML , XHTML به عهده W3C ميباشد .
DTD براي HTML 4.0
و
براي XHTML
1.0
مابين اين دو تگ اطلاعات مربوط به همان صفحه وارد ميشود
که در مرورگر نشان داده نميشود و فقط اسم صفحه است که در نوار عنوان مرورگر نمايش داده ميشود. اين
اطلاعات بيشتر براي سايتهاي جستجوگر مانند گوگل مفيد ميباشند که در بخش اين سايتها
بيشتر توضيح خواهم داد.
تگهاي
لازم براي اين قسمت به شرح زير ميباشند:
بين اين دو تگ هر چي نوشته شود در نوار عنوان مرورگر title bar نمايان خواهد شد. دقت
داشته باشيد که از اسامي کوتاه استفاده کنيد چون جمله طولاني را نصفه نشان ميدهد و
همچنين اگر فارسي بنويسيد در سيستمهايي که قابليت فارسي ندارند به صورت علامت سوال
نمايان ميشود.
در مواردي که بخواهيد آدرس اصلي وب سايت را همان ابتدا
معرفي کنيد ، از اين تگ استفاده ميکنيد. خاصيت اين تگ اينست که در هنگام درست کردن
لينکهاي داخلي وب سايت ديگر نيازي به نوشتن آدرس کامل نيست و فقط ميتوانيد در خصوصيت href=” “ لينکها، اسم دايرکتوري
در صورت نياز و اسم خود فايل را بنويسيد.
دقت
کنيد که نوشتن پروتکل http اجباري است.
متا تگها اطلاعات مربوط به موتورهاي جستجوگر را کنترل ميکنند. در اين تگها
هر نوع اطلاعات که براي جستجو نياز باشد را وارد ميکنيد ، مانند کلمات کليدي يا نام
سازنده سايت و يا تاريخ راه اندازي و از اين
قبيل که در بخش سايتهاي جستجوگر بيشتر توضيح
خواهم داد. خصوصياتي را که در اين تگ ميتوانيد بکار بريد،
http-equiv=”
“, name=” “ , content=” “
براي معرفي کلمات کليدي سايت بايد خصوصيت http-equiv=”keyword” قرار دهيم و کلمات مورد
نظر را در خصوصيت content=” “
وارد
کنيم،
همچنين ميتوانيد نوع رمزگذاري encoding مرورگر را در اين قسمت
معين کنيد که براي بکار بردن حروف فارسي بايد از utf-8 استفاده کنيد که در قسمت
فارسي نويسي توضيح خواهم داد.
اين تگ به مرورگر ميفهماند که بايد از حروف و علامتهاي يونيکد براي نمايش صفحه
استفاده کند. براي وارد کردن اطلاعات ديگر هم مانند زير عمل ميکنيد:
اگر شما نميخواهيد که صفحه اي در هارد ديسک کاربر سايت شما ذخيره شود تا بتوان
آنرا بصورت offline
هم
ببينند، از اين تگ بايد استفاده کنيد:
يا اينکه آن صفحه هر لحظه اطلاعاتش عوض ميشود و ميخواهيد تا بيننده سريع آن
اطلاعات را ببيند، از خاصيت refresh مرورگر استفاده کرده و اين تگ را اضافه ميکنيد:
که
آن عدد زمان بر حسب ثانيه است. اگر ميخواهيد که بعد زمان معين همان صفحه به يک صفحه
ديگر يا يک وب سايت ديگر هدايت شود خصوصيت زير را اضافه کنيد
اين تگ براي زماني است که ما بخواهيم از اطلاعات يک فايل مانند style sheet در آن صفحه استفاده کنيم،
که کليه دستورات جاوااسکريپت بايد مابين آنها قرار
گيرد. اين تگهاي اچ تي ام ال به مرورگر مي فهمانند که در کجا اين زبان آغاز شده تا
مفسر جاوااسکريپت مرورگر فعال شود و در کجا پايان مي پذيرد که برنامه مفسر هم کار
خود را خاتمه دهد.
اما تگ script مانند
بقيه تگها داراي خصوصياتي مي باشد، يکي از آنها language است که
مقدار آنرا بايد برابر با javascript قرار دهيد،
براي مقدار javascript مي توانيد
نسخه آن را هم بنويسيد. اين زبان هم مانند اچ تي ام ال داراي نسخه هاي مختلفي است
که هر کدام آنها با قابليتهاي جديدي در وب توسعه يافتند. نسخه هاي اين زبان عبارتند
از 1.0 ، 1.1 ، 1.2 ، 1.3 ، 1.4 و آخرين نسخه حال حاضر هم 1.5 مي باشد که هم اکنون
اين نسخه با مرورگر مايکروسافت يعني اينترنت اکسپلورر سازگاري ندارد. فعلاً مرورگر
اينترنت اکسپلورر از نسخه 1.3 اين زبان پشتيباني مي کند.
تگ اسکريپت خصوصيت type هم دارد که
براي اين زبان بايد آنرا برابر با text/javascript قرار دهيد. نکته قابل توجه اينست که اگر اين خصوصيت را به اين تگ
اضافه کنيد، مرورگر اينترنت اکسپلورر نسخه 1.5 اين زبان را ناديده مي گيرد و کد را
اجرا مي کند. شما مي توانيد با اجراي کد زير هم اولين اسکريپت خود را تجربه کنيد و
هم خصوصيت type را در IE امتحان کنيد.
خب مانند زبان اچ تي ام ال مي توانيد از يک
ويرايشگر متن مانند برنامه Notepad استفاده کرده و کد زير را در آن وارد کنيد:
اکنون اين فايل را با پسوند htm ذخيره
کنيد و سپس آنرا در مرورگر اينترنت اکسپلورر اجرا کنيد که جمله Hello
my friends را بايد در صفحه ببينيد. حالا خصوصيت type را حذف
کنيد و دوباره فايل را ذخيره و مشاهده کنيد، هيچ متني در صفحه ديده نميشود که با
تغيير نسخه 1.5 به 1.3 آن متن دوباره نمايان خواهد شد. نوشتن نسخه جاوااسکريپت
اجباري نيست يعني مي توانيد آنرا ننويسيد.
حالا
ببينيم که چه اتفاقي هنگام اجراي اين کد مي افتد. تگ اسکريپت و خصوصيات آن روشن
است اما به عبارت زير دقت کنيد:
document.write("
Hello my friends ")
ببينيم در اينجا اين عبارت چگونه براي مرورگر تفسير
مي شود. document يعني همان سند و فايل html که در آن
اين عمليات بايد انجام شود و مرورگر به محض برخورد با اين عبارت آماده مي شود براي
انجام کاري که بعد از يک نقطه نوشته مي شود. در اينجا بايد عمل write يعني
نوشتن را انجام دهد اما چي بايد بنويسد، طبق قرارداد بايد هر چيزي که در بين
پرانتز هست را بنويسد و چون محتواي داخل پرانتز مابين دو علامت نقل قول يعني
" " قرار گرفته پس بايد بصورت يک string در
بيايند. string يعني يک رشته کاراکتر که مي
تواند هم حرف باشد هم عدد و هم علامت و خاصيت string در اين
است که هرچيزي مابين دو علامت " " قرار گرفت عيناً بايد در صفحه نوشته
شود. در جاوااسکريپت به document يک object يعني شئ
مي گويند و هنگامي که يک نقطه بعد از آن گذاشته مي شود آن شئ منتظر method خود مي
شود که در اينجا همان write است. به عبارت ساده اين خط
مي گويد که آن شئ را بردار و در آن توسط متد نوشتن چيزي بنويس.
src
تگ script يک خصوصيت ديگر هم دارد که src است و با
آن آشنا هستيد، بله همانطور که حدس زديد براي آدرس دهي است. کدهاي جاوااسکريپت را
هم مانند استايل شيت مي توانيد در يک فايل جداگانه نوشته و با پسوند js ذخيره
کنيد سپس با خصوصيت src آدرس آن فايل را مشخص کنيد.
توجه داشته باشيد که در آن فايل نبايد ديگر تگ script را
بنويسيد. معمولاً در اين حالت تگ اسکريپت در قسمت head گنجانده
مي شود تا با شروع صفحه فايل جاوااسکريپت فراخواني شود.
چگونگي دريافت پيغام خطا
يکي از مواردي که در
نوشتن کدهاي جاوااسکريپت ممکن است زياد با آن برخورد کنيد، دريافت پيغام هاي خطا
هنگام اجراي کدها در مرورگر مي باشد، پس بهتر است در همين ابتداي کار با آنها آشنا
شويد تا هنگام مشاهده خطا، تجربه کافي براي رفع آن داشته باشيد. خطاهاي جاوااسکريپت
را به دو صورت متوجه مي شويد يکي ظاهر شدن مثلثي زرد با يک علامت تعجب در سمت چپ
نوار وضعيت مرورگر مانند شکل زير:
در بعضي از مرورگرها
اين نوار مشاهده نمي شود که مي توانيد براي مشاهده آن به منوي View
مرورگر رفته و روي گزينه Status Bar کليک کنيد. حالت ديگر ديدن پيغامهاي خطا، باز شدن
يک پنجره در وسط مرورگر است که در اين حالت جزئيات خطاي ايجاد شده را هم مي توانيد
مشاهده کنيد. مانند شکل زير:
توجه داشته باشيد، در
نسخه هاي جديد مرورگر اينترنت اکسپلورر اين پنجره مشاهده نميشود و ابتدا آنرا بايد
فعال کنيد. براي فعال کردن آن به منوي Tools
مرورگر رفته و گزينه Internet Options
را انتخاب کنيد، در پنجره باز شده به قسمت Advanced
رفته و گزينه Display a notification about script error
را تيک بزنيد، سپس دکمه Ok را زده تا کار شما تأييد شود. بهتر است که قبل از شروع کد نويسي جاوااسکريپت
اين عمل را انجام دهيد تا هنگام بروز خطا در صدد رفع آن برآييد که به اين کار
اشکال زدايي يا Debugging مي گويند. اگر هم اين گزينه را فعال نکرديد، هنگام
بروز خطا مي توانيد بر روي آن مثلث زرد رنگ در نوار وضعيت رفته و دوبار کليک کنيد
که همان پنجره اعلان خطا باز خواهد شد.
اساساً دو نوع خطا
براي جاوااسکريپت وجود دارد، خطاهاي نحوي يا Syntax errors و خطاهاي زمان اجرا يا Run time errors
که در خطاهاي نحوي يک مشکلي در ترکيبات کدها بوجود آمده مثلاً يک غلط املائي در يک
دستور يا جا انداختن يک حروف يا علامت و در خطاهاي زمان اجرا احتمالاً يک دستور بطور اشتباه جاي يک دستور ديگر نوشته
شده است که در هنگام اجراي کد، مفسر مرورگر نمي تواند اين دستور را تجزيه تحليل
کند وخطا را اعلام مي کند.
ايجاد يک خطا
خب حالا اجازه دهيد تا اين پيغام ها را تجربه کنيم و ببينيد که به چه
راحتي توسط آنها مي توانيد اشکال زدايي کرده و کد خود را به سرعت اصلاح کنيد. ممکن
است که دهها بار با پيغام خطا روبرو شويد ولي نااميد نشويد چون حرفه اي ها هم
بارها و بارها با آن مواجه مي شوند. حالا کد زير را با نام error.htm
ذخيره کنيد:
يکبار
آنرا اجرا کنيد و نتيجه را مشاهده کنيد. حالا پرانتز دوم راحذف مي کنيم، بدين
صورت:
document.write("I'm
ready for first error message.";
سپس فايل را دوباره ذخيره کرده و اجرا مي کنيم. همانطور که انتظار داشتيم
پنجره پيغام خطا باز شد، اگر جزئيات پيغام را نداريد روي دکمه Details
يا Show Details کليک کنيد تا ببينيم که چه اطلاعاتي را مي توانيم بدست آوريم. در
کادر جزئيات اولين گزينه Line مي باشد که اگر مطابق کد بالا عمل کرده باشيد بايد درجلوي آن عدد
7 نوشته شده باشد. اين خط به ما مي فهماند که ايراد در خط هفتم سورس کد است. دقت
کنيد، تنها خطهاي مربوط به جاوااسکريپت را نبايد بخوانيد بلکه کليه خطوط از بالا
به پايين خوانده مي شود، حتي خطهاي خالي هم بايد شمرده شوند. دومين گزينه، کلمه Char
است که بيانگر عدد شمارش شده کاراکتري که باعث بروز خطا شده است و در اينجا آن عدد
52 مي باشد. فراموش نکنيد که هر فاصله بين کلمات هم يک کاراکتر به حساب ميايد.
شايد اينجا سؤالي برايتان پيش بيايد که چرا عدد 52 ؟ در صورتي که در اينجا پرانتز
کاراکتر51 است. بايد يک نکته را خدمتتان عرض کنم که علامت ; در جاوااسکريپت يک
کاراکتر اختياري است که نشان دهنده پايان يک خط از کد مي باشد و برنامه نويسان بر
حسب عادتي که دارند از اين علامت استفاده مي کنند ، در اينجا مفسر جاوااسکريپت
آنرا به عنوان يک کاراکتر قبل از کاراکتر اصلي خطا شناسايي کرده است. گزينه بعدي Code
ميباشد که ظاهراً بطور معمول عدد صفر جلوي آن ميباشد و هنوز نتوانستم کارآيي آنرا
تشخيص بدهم و گزينه آخر هم URL است که آدرس فايل اچ تي ام
ال است که در آن خطا توليد شده است. در مجموع شما براي اشکال زدايي به سه گزينه
اول نياز داريد که با توجه به آنها بلافاصله مي توانيد محل بروز اشکال را تشخيص
دهيد. يک نکته را به خاطر بسپاريد که در کدهاي طولاني ممکن است با تعداد خطاهاي
زيادي برخورد کنيد که در بيشتر مواقع برطرف کردن اولين خطا باعث رفع کليه اشکالات
مي شود. به عنوان جمله آخر اين قسمت، هميشه به پنجره هاي اعلان خطا با ديد مثبت
نگاه کنيد چون آنها به ما کمک مي کنند تا اشکال را براحتي پيدا کنيم.
نوشتن کدهای جاوا اسکریپت
بطور
کل کدهاي جاوااسکريپت به سه دسته تقسيم ميشوند، يک سري از آنها در قسمت سر يعني head
جاي مي گيرند و يک سري در قسمت بدنه کدهاي اچ تي ام ال و دسته سوم هم در يک فايل
جداگانه و خارج از کدهاي html با پسوند js قرار مي گيرند که در ادامه به توضيح هر دسته خواهيم
پرداخت.
کليه کدهاي
جاوااسکريپت به محض باز شدن يک صفحه وب در مرورگر اجرا مي شوند اما گاهي اوقات ما
نياز داريم تا يک اسکريپت زودتر از کدهاي ديگر اجرا شده و يا آماده باشد تا در
صورت لزوم فراخواني شود. که اينگونه کدها را بايد در قسمت سر و ما بين تگ head
بنويسيم. بطور مثال شما نياز به اين داريد که به محض ورود کاربر به صفحه در همان
ابتدا پيغامي ظاهر شود و تا کاربر آنرا تأييد نکرده است صفحه تکميل نشود.
اسکريپتهاي قسمت سر هميشه آماده اجرا و يا آماده پاسخ به اتفاقي در صفحه وب هستند،
که در اين مورد شما مطمئن هستيد اسکريپت مورد نظر قبل از هر چيزي در صفحه، اجرا
خواهد شد. براي نوشتن کدهاي جاوااسکريپت بصورت زير عمل مي کنيد:
نوشتن اسکريپت در قسمت بدنه
هنگاميکه نياز داشته باشيد تا کدهاي جاوااسکريپت در
بدنه فايل html اجرا شود آنها را در قسمت body
صفحه وارد مي کنيد،
شما حتي مي توانيد توسط کدهاي جاوااسکريپت قسمتي از
يک صفحه را بسازيد يعني با ترکيب جاوااسکريپت و تگهاي اچ تي ام ال در body
يک عنصر در صفحه وارد کنيد. کدهاي زير را بنويسيد و اجرا کنيد:
شما
مي توانيد براي نظم دادن و جلوگيري از شلوغي قسمت بدنه يک اسکريپت بصورت function
در قسمت head تعريف کنيد و در قسمت بدنه آنرا فراخواني کنيد.
فايل خارجي جاوااسکريپت
شما مي توانيد براي
حفظ نظم تگهاي اچ تي ام ال در يک صفحه وب و يا براي جلوگيري از تکرار يک اسکريپت
در صفحات يک وب سايت، کدهاي جاوااسکريپت را در يک فايل جداگانه نوشته و با پسوند js
آنها را ذخيره کنيد سپس در هر قسمت و هر صفحه اي که لازم بود، وارد کنيد. خط زير
را در برنامه Notepad نوشته و آنرا به اسم test.js ذخيره کنيد:
document.write(" JavaScript external file
")
حالا يک فايل اچ تي ام ال بسازيد و تگهاي
زير را در آن وارد کنيد سپس با يک اسم دلخواه آنرا در همان پوشه که فايل
جاوااسکريپت را ذخيره کرده ايد قرار دهيد:
اگر مراحل را بدرستي انجام داده باشيد، جمله
زير را در مرورگرتان مشاهده خواهيد کرد.
JavaScript external file
دقت کنيد که اگر فايل جاوااسکريپت را در
پوشه اي جدا از فايل html قرار مي دهيد حتماً در
خصوصيت src آدرس دقيق آنرا بنويسيد.
متغير
چيست؟
متغيرها
يکي از مباحث مهم در جاوااسکريپت هستند چون کاربرد زيادي در اين زبان دارند. متغيرها
يا Variables مانند يک ظرف و
مخزن براي ذخيره سازي اطلاعات هستند که اين اطلاعات مي تواند يک کلمه يا جمله ، عدد
و يا حتي يک شئ باشد. متغيرها، کد نويسي را راحت تر کرده و نظم خاصي به اسکريپت ما
مي بخشند. بطور مثال ما يک متن را مي خواهيم در چند نقطه از کد وارد کنيم که بجاي آن
مي توانيم از يک کلمه کوتاه که اين متن در آن ذخيره شده استفاده کنيم تا از تکرار جلوگيري
کرده و اسکريپت هم شلوغ نشود. به مثال زير توجه کنيد تا وظيفه يک متغير را ببينيد:
var
strTest = "This is an example for variable."
اصطلاح var از کلمه variable مي آيد که نوشتن آن اختياري مي باشد، يعني مي توانيد يک متغير را بدون نوشتن
آن هم تعريف کنيد ولي اگر مي خواهيد کد شما خوانا تر باشد بهتر است که از var استفاده کنيد. قسمت بعدي يعني strTest نامي است که شما براي آن متغير انتخاب مي کنيد و سپس علامت مساوي است که متغير
را برابر با يک مقدار قرار مي دهد و در آخر هم مقدار تعيين شده براي متغير که در اينجا
يک رشته متني است يا يک text string ميباشد که به همين دليل بايد آنرا
بين دو علامت " " قرار دهيم تا عيناً محتويات آن در مرورگر نوشته شود.
انتخاب نام
متغير
بهتر است نام يک متغير را طوري انتخاب کنيد که در عين
سادگي، گويا بوده و يادآور نکاتي براي شما باشد چون هميشه کدهاي شما به چند خط ختم
نميشود، گاهي اوقات ممکن است مجبور شويد بيش از صد خط کد در يک صفحه قرار دهيد. بطور
مثال چون مقدار متغيردر اينجا يک رشته يعني string بود من سه حرف str را به ابتداي نام
متغير اضافه کردم. اما براي انتخاب نام متغير
بايد نکات زير را رعايت کنيد:
نام يک متغير مي تواند از مجموع حروف، اعداد و علامت
underline يا زيرين خط يعني
_ تشکيل شود، که آغاز کننده نام نبايد يک عدد باشد و همچنين هيچگونه فاصله اي هم در
آن نبايد باشد. در جاوااسکريپت حروف کوچک با
بزرگ متفاوت مي باشند يعني strTest با strtest کاملاً تفاوت دارد که اصطلاحاً مي گويند جاوااسکريپت case
sensitive است.
انواع متغيرها
دو نوع متغير وجود دارد که تفاوت اين دو مدل در محل
استفاده از آنها مي باشد. متغيرهاي کلي و سراسري که به آنها global گفته مي شود. اين متغيرها در سراسر يک فايل اچ تي ام ال کاربرد دارند يعني
يکبار آنرا در ابتداي اسکريپت تعريف و مقدار دهي مي کنيد ولي در هر کجا از کد که مورد
نياز باشد از آنها بهره مي گيريد. نوع ديگر آن متغيرهاي محلي يا local هستند که فقط در يک قسمت از اسکريپت کارآيي دارند که ممکن است در قسمت ديگري
همان متغير با يک مقدار ديگري تعريف شود. معمولاً متغير هاي محلي در توابع يا function ها کاربرد دارند که يک متغير در هر تابع مي تواند مقادير متفاوت داشته باشد
بدون اينکه پيغام خطايي توليد کند که در قسمت مورد نظر function ها را ياد خواهيد گرفت. به قسمتي از اسکريپت که يک متغير در آن کاربرد دارد،
حوضه يا scope آن متغير گفته
مي شود.
Date Object
يکي از ويژگي هايي که
جاوااسکريپت دارد جمع آوري اطلاعات از سيستم کاربر و نمايش آنها در صفحات وب است.
همانطور که ميدانيد زبان اچ تي ام ال به تنهايي قادر به انجام چنين کاري نيست اما
با کمک زبانهاي ديگر تحت وب مانند Javascript ، مي تواند تا حدودي اين
مشکل را برطرف کند. شئ هايي در جاوااسکريپت وجود دارند که توسط متدهاي مختلف،
اطلاعات مورد نياز را از سيستم گرفته و در اختيار کاربران قرار مي دهند. يکي از
اين object ها و شئ ها ، Date مي باشد که به کمک آن مي توانيم تاريخ و زمان سيستم را هنگام
اجراي کد دريافت کنيم، سپس آنرا نمايش دهيم و يا اينکه در يک متغير ذخيره کنيم تا
در صورت لزوم از آن بهره گيريم. اين object
بصورت زير تعريف مي شود:
new Date()
به طرز نوشتن آن دقت
کنيد که غير از اين باشد با پيغام خطا روبرو خواهيد شد چون جاوااسکريپت زبان حساسي
است پس هر جا که حروف بزرگ است بايد بزرگ و هر جا کوچک است بايد کوچک نوشته شود.
در آخر هم پرانتز مي گذاريد که در قسمتهاي بعدي همين صفحه کارآيي آنها را درک
خواهيد کرد. اين شئ يک رشته متني شامل روز، ماه، سال، ساعت، دقيقه، ثانيه و اختلاف
زماني با UTC را برميگرداند. UTC مخفف Coordinated Universal
Time مي باشد که به آن Zulu time هم مي گويند و مطابق
با استاندارد جهاني زمان است.
کد
زير را در يک سند اچ تي ام ال وارد کنيد و پس از ذخيره، آنرا اجرا کنيد:
متدهاي شئ Date
بعد از ساختن شئ جديد Date
، مي توانيد توسط متدهاي مربوط به آن جزئيات ديگري از اين شئ دريافت کنيد. اين شئ
داراي هفت متد اصلي ميباشد که بيشترين کاربرد را دارند. اين متدها عبارتند از:
getDate(), getDay(), getMonth(), getYear(),
getHours(), getMinutes(), getSeconds()
براي تعريف و استفاده از اين متدها بايد ابتدا شئ
را نوشته، سپس يک نقطه بگذاريم و بعد از نقطه متد مورد نظر را بنويسيم.
براي درک بهتر مطالب
گفته شده يک تمرين را با هم انجام مي دهيم. در يک صفحه وب، مي خواهيم زمان ورود يک
کاربر به همان صفحه را اعلام کنيم. بطور مثال:
شما دقيقاً درساعت 13:34:44
وارد اين صفحه شديد. که اسکريپت آن براي برگرداندن زمان مورد نظر به صورت زير مي
باشد:
ابتدا شئ Date
را تعريف کرده و در يک متغير به نام vorood ذخيره مي کنيم تا بکار بردن آن در قسمتهاي بعدي راحت تر باشد، سپس از شئ document
و متد write براي چاپ نتيجه در صفحه وب استفاده کرده و متدهاي
لازم براي برگرداندن اطلاعات مورد نياز را مي نويسيم. دقت کنيد که براي ترکيب
متدها از علامت + استفاده کرديم، اين علامت باعث ترکيب و پيوند بين اجزاي يک
اسکريپت مي شود که خاصيت آنرا در بخش بعدي operator
ها يعني عملگرها توضيح خواهم داد. ازعلامت : هم بين ساعت، دقيقه و ثانيه استفاده
شده و چون مي خواستيم که اين علامت عيناً در صفحه نوشته شود آنرا بين علامت نقل
قول يعني "" گذاشتيم. در ضمن مي توانيد از کدهاي اچ تي ام ال هم استفاده
کنيد تا زمان به شکل دلخواه شما در صفحه چاپ شود. بطور مثال اگر بخواهيد که صورت Bold
در صفحه نوشته شود، به شکل زير عمل مي کنيد:
document.write(""+
vorood.getHours()+ ":"+ ...... + "")
نکته: هنگاميکه
از متد getMonth() براي برگرداندن عدد ماه استفاده مي کنيد بايد هميشه
آنرا بعلاوه عدد يک کنيد چون جاوااسکريپت اولين ماه ميلادي را برابر با عدد صفر
قرار مي دهد.
document.write( new Date().getMonth()+1 )
در مورد متد getYear()
هم اگر مي خواهيد نتيجه کامل برگردد يعني سال بصورت چهاررقمي نوشته شود بايد از
متد getFullYear()
استفاده کنيد.
اگر هم بخواهيد تمام مقادير بر اساس UTC
برگردانده شوند، بايد اين کلمه را در وسط متد مورد نظر وارد کنيد. بدين صورت:
getUTCFullyear(), getUTCDate(), getUTCHours(),
getUTCMinutes()
تنظيم تاريخ و زمان
شئ Date به غير از متدهاي ذکر شده در بالا، داراي متدهاي ديگري است که
توسط آنها مي توانيد زمان و تاريخي را بصورت دلخواه تنظيم کنيد. در اينگونه متدها
بجاي کلمه get بايد از set استفاده کنيد و مقدار معيني را در پرانتز وارد کنيد. بطور مثال مي
خواهيم همين موقع را در سال 2008 داخل صفحه چاپ کنيم.
نتيجه اي که اين
اسکريپت برميگرداند بصورت زير است، به روز هفته در اول خط و سال در آخر خط توجه
کنيد که براي سال 2008 تنظيم شده است.
Wed Jul 9 13:34:44 UTC+0430 2008
عملگرها يا همان operator ها، سمبلي براي نشان دادن يک علامت
مشخص هستند که هر کدام از آنها وظيفه خاصي دارند، مثلاً علامت + نشان دهنده جمع
کردن است. در کل، عملگرها در زبانهاي برنامه نويسي بسيار کاربرد دارند و همچنين در
جاوااسکريپت که توسط آنها مي توان عملياتي را بر روي اعداد و رشته هاي متني انجام
داد. در اين صفحه با انواع عملگرها آشنا مي شويد ولي نگران کاربرد آنها نباشيد چون
در بخشهاي بعدي بيشتر به آنها نياز خواهيم داشت و مفهوم اصلي آنها را درک خواهيد
کرد.
انواع عملگرها
عملگرها
در جاوااسکريپت به چند دسته تقسيم مي شوند:
عملگرهاي
رياضي يا Arithmetic Operators: اين نوع عملگرها چهار عمل اصلي در رياضي را انجام
مي دهند. علاوه بر آنها يک عملگر وظيفه نمايش خارج قسمت يک تقسيم را بعهده دارد و
دو عملگر ديگر هر کدام به ترتيب يک واحد اضافه و يک واحد کم مي کنند که در جدول
زير مشخص شده اند.
نتيجه
|
مثال
|
توصيف
|
عملگر
|
4
|
x = 2, y = 2
x+y |
جمع
|
+
|
2
|
x = 5 , y = 3
x - y |
تفريق
|
-
|
20
|
x = 5 , y = 4
x * y |
ضرب
|
*
|
5
|
x = 20 , y = 4
x / y |
تقسيم
|
/
|
3
|
x = 19 , y = 4
x % y |
خارج قسمت
|
%
|
x = 6
|
x = 5
x++ |
افزودن
|
++
|
x = 4
|
x = 5
x-- |
کم کردن
|
--
|
عملگرهاي
زير به نام Assignment Operators معروف
هستند که يک مقداري را به يک متغير نسبت مي دهند.
برابر
است با
|
مثال
|
عملگرها
|
x = y
|
x = y
|
=
|
x = x + y
|
x + = y
|
+ =
|
x = x - y
|
x - = y
|
- =
|
x = x * y
|
x * = y
|
* =
|
x = x / y
|
x /= y
|
/=
|
x = x % y
|
x %= y
|
%=
|
عملگرهاي
مقايسه اي: اين نوع عملگرها مقدارهاي دو
متغير را با هم مقايسه مي کنند و نتيجه اين مقايسه يا درست است يا غلط که در
دستورات شرطي جاوااسکريپت بسيار کاربرد دارند.
مثال
|
توصيف
|
عملگرها
|
x
= 5 , y = 5
x == y |
مقادير اگر برابر باشند نتيجه درست
خواهد بود.
|
==
|
x
= 5
y = "5" x === y |
مقايسه بين مقادير و جنس متغير
که در مثال روبرو نتيجه غلط بازگردانده مي شود
|
===
|
5
!= 8
|
اگر مقادير برابر نباشند نتيجه
درست است
|
!=
|
8
> 5
|
بزرگتر
|
>
|
8
< 10
|
کوچکتر
|
<
|
5
>= 8
|
بزرگتر يا مساوي که در اين مثال
نتيجه غلط است
|
>=
|
5
<= 8
|
کوچکتر يا مساوي که در اين مثال
نتيجه درست است
|
<=
|
عملگرهاي
منطقي: در اين مدل سه نوع عملگر وجود
دارند که در حقيقت يک يا چند نتيجه را بررسي مي کنند و جواب را بازمي گردانند. اين
عملگرها به اين شکل مي باشند:
&& , || , !
عملگر
&& در حقيقت مانند حرف اضافه " و " در فارسي عمل مي کند:
x = 5
y = 3
( x < 10 && y > 1)
y = 3
( x < 10 && y > 1)
در
اينجا اگر مقدار متغير x کوچکتر از عدد 10 باشه و
y بزرگتر از 1 باشه، نتيجه true
بازگردانده مي شود. چون حرف و آمده است پس بايد دو طرف عملگر جواب درست
باشد تا در مجموع نتيجه درست در بيايد. عملگر || مانند کلمه " يا
" در فارسي است:
x = 6
y = 3
( x == 5 || y == 5 )
y = 3
( x == 5 || y == 5 )
همانطور
که حدس زده ايد، نتيجه غلط است يعني false بازگردانده مي شود. چون يا
آمده است پس حداقل يکي از طرفين عملگر بايد درست باشد تا نتيجه درست در بيايد
اما اينجا هر دو طرف غلط است که در مجموع نتيجه غلط است. اما در حالت زير نتيجه
درست بازگردانده مي شود:
( x == 5 || y < 5 )
عملگر !
در حقيقت يک عمليات و معادله را بررسي مي کند اگر جواب آن معادله درست نباشد نتيجه
true يا همان درست را برميگرداند:
x = 5
y = 4
! ( x == y )
y = 4
! ( x == y )
در اينجا در کل نتيجه درست است. حالا ببينيم که چه
اتفاقي افتاده است، اول يک نگاهي به داخل پرانتز بياندازيد. شرط درستي در اين است
که x برابر با y باشد، اما
اينچنين نيست چون مقادير با هم متفاوت هستند ولي چون عملگر ! آمده است پس شرط
درستي در اينست که نتيجه داخل پرانتز غلط باشد چون گاهي اوقات ما نياز داريم که در
اسکريپت دو چيز را با هم مقايسه کنيم و اگر نتيجه غلط بود ادامه دهيم که اين علامت
بکار ما مي آيد.
کاربرد
عملگرها در متن
در بالا
تمام مثالها براي اعداد بود ولي گاهي اوقات از بعضي از عملگرها مي توانيم براي
رشته هاي متني هم استفاده کنيم:
strText01
= " Hello "
strText02 = "my friends!"
document.write ( strText01 + strText02 )
strText02 = "my friends!"
document.write ( strText01 + strText02 )
دستورهای
شرطی:
يکي
از مهمترين قابليت هاي زبان جاوااسکريپت، توانايي آن در انجام دادن عکس العملهاي
متفاوت در شرايط مختلف است. بر اين اساس اين زبان قادر است که متغيرهاي مختلف را
با هم مقايسه کند و شرطهايي را براي آنها تعيين کند تا به يک نتيجه دلخواه برسد.
اغلب اوقات هنگام
نوشتن يک اسکريپت، شما نياز داريد که تصميم هاي متفاوتي در مقابل نتايج مختلف
بگيريد. بطور مثال ميخواهيد هنگاميکه يک کاربر وارد سايت شما مي شود اگر
ساعت قبل از 10 صبح بود يک متن در بالاي صفحه ظاهر شود و به کاربر صبح بخير
بگويد. در اينجا دستور if به کمک ما مي آيد. اين دستور يکي از مهمترين دستور در کد نويسي
است چون توسط آن مي توانيم شرط تعيين کنيم که اگر اينطور شد، نتيجه اين باشد. اين
دستور هميشه دو قسمت دارد: يکي قسمت شرط و ديگري قسمت نتيجه شرط است. به کد زير
توجه کنيد:
حالا ببينيم که چه
اتفاقي افتاده است، در خط سوم ما يک متغير بنام d تعريف کرديم که به آن شئ Date
را نسبت داديم و در خط بعد از آن يک متغير ديگر که يکي از متدهاي آن شئ را مقدار
دهي کرديم تا ساعت سيستم براي ما ذخيره شود، سپس با يک خط خالي قسمت شرط را جدا
کرديم تا به خوانايي اسکريپت کمک کنيم. کلمه if
را مي نويسيم، دقت کنيد که شرط را حتماً داخل پرانتز بايد نوشت و در آن هم همانطور
که مشاهده مي کنيد از عملگر کوچکتر استفاده کرديم. در اينجا ساعت سيستم در متغير t
ذخيره شده است و دستور if داره شرط کوچکتر بودن را بررسي مي کند. در خط بعدي هم علامت آکلاد
{ } را بکار برديم که در اينجا آنرا براي نظم و خوانايي بيشتر کد استفاده کرديم
اما فراموش نکنيد که اين دستور ممکن است از چندين قسمت تشکيل شود که در آنصورت
بکار بردن آکلاد لازم است تا بتوانيم هر قسمت را از هم جدا کنيم. در آخر هم دستور
تايپ يک متن مناسب در صفحه را به عنوان نتيجه شرط نوشتيم.
دستور if...else
در مثال بالا درستي
يک شرط بررسي شد و يک نتيجه هم در بر داشت، اما حالا مي خواهيم در صورتي که شرط
درست نبود هم يک نتيجه در بر داشته باشد، پس ما به يک قسمت ديگر در اين دستور نياز
داريم که در حالت جديد مثال ما به اين صورت خواهد بود: اگر ساعت قبل يا
برابر 10 بود پس جمله صبح بخير نمايش داده شود در غير اينصورت
متن سلام دوستان ظاهر شود. در کد بجاي قسمت در غير اينصورت مي توانيم کلمه else
را وارد کنيم تا به مفهوم مورد نظر برسيم.
if ( t < 10 || t == 10 ) {
document.write ( " Good morning " )
}
else
{
document.write ( " Hello friends ")
}
document.write ( " Good morning " )
}
else
{
document.write ( " Hello friends ")
}
دستور if...else if...else
اين دستور را زماني مي توانيد استفاده کنيد که
بخواهيد يک شرط در شرايط مختلف بررسي شود تا نتيجه هاي متفاوت هم بدست بيايد:
if ( t <= 10 ) {
document.write ( " Good morning " )
}
else if ( t > 10 && t < 13 ) {
document.write ( " Hello friends " )
}
else if ( t >= 13 && t < 18 ) {
document.write ( " Good afternoon " )
}
else {
document.write ( " Good evening " )
}
document.write ( " Good morning " )
}
else if ( t > 10 && t < 13 ) {
document.write ( " Hello friends " )
}
else if ( t >= 13 && t < 18 ) {
document.write ( " Good afternoon " )
}
else {
document.write ( " Good evening " )
}
switch
دستور switch
يکي ديگر از دستورات شرطي جاوااسکريپت است که چندين شرط را براي متغيرها مقايسه مي
کند تا نتايج مختلف بدست بيايد. در حقيقت دستور switch
از تکرار if else جلوگيري مي کند. در مواردي که شرطها و نتايج آنها
کم هستند مي توانيد از دستور if else استفاده کنيد اما براي شرطهاي زياد بهتر است switch
را بکار بريد تا کد شما منظم تر باشد. تنها مشکلي که اين دستور دارد اينست که از
نسخه javascript 1.2
به بعد از آن پشتيباني شده که ممکن است بعضي از مرورگرهاي قديمي با اين دستور مشکل
داشته باشند، ولي در ايران مشکلي نيست چون مطمئناً به علت استفاده رايگان از
مرورگرها، ديگر کسي را پيدا نخواهيد کرد که مرورگر قديمي داشته باشد. دستور سوئيچ
مانند if داراي قسمتهايي است برای مثال
مي خواهيم يک صفحه درست کنيم که به محض ورود کاربر به آن، آنروز هفته را در
صفحه نمايش دهد:
ابتدا توسط شئ Date
، تاريخ و زمان سيستم را در يک متغير بنام d ذخيره کرديم و سپس در خط
بعدي توسط متد getDay اين شئ ، عدد روز هفته را از سيستم بدست آورديم و در متغير weekday
ذخيره کرديم. دقت کنيد که اين متد عدد برميگرداند نه خود روزهاي هفته را و در نظر
داشته باشيد که مفسر جاوااسکريپت روز اول هفته را يکشنبه ميداند و عدد 0 را به آن
تعلق ميدهد و روز دوشنبه را عدد يک و به همين ترتيب تا آخرين روز هفته که شنبه
باشد عدد 6 را ميدهد. اکنون نوبت به بررسي
شرط رسيده که مي خواهيم از دستور سوئيچ استفاده کنيم. ابتدا خود دستور را مي
نويسيم يعني همان کلمه switch و سپس يک پرانتز باز مي کنيم تا متغيري که بايد در شرايط مختلف
بررسي شود را در آن بنويسيم. براي نظم اسکريپت يک آکلاد هم باز مي کنيم ولي در آخر
اين مجموعه آنرا مي بنديم.
case
همانطور که مشاهده مي
کنيد از کلمه case بجاي if else استفاده مي کنيم و
حالت مختلف شرط را در جلوي آن مي نويسيم و سپس علامت : مي گذاريم. در حقيقت ما
اينجا به مفسرجاوااسکريپت مي گوييم که اگر متغير ما که روزهاي هفته است برابر با
صفر بود، نتيجه اين مي شود که بايد کلمه Sunday را در صفحه چاپ کني،
در غير اينصورت برو حالت بعدي يعني case بعدي را مقايسه کن.
break
دستور break يکي از بخشهاي switch است که به مفسر
جاوااسکريپت مي فهماند که در کجا قسمت case تمام مي شود و يک
قسمت ديگر شروع مي شود، در حقيقت از تداخل قسمتهاي مختلف جلوگيري مي کند. دقت کنيد
که شما هم بايد آنرا قبل از شروع case بعدي بنويسيد.
default
دستورات case
را همينطور ادامه مي دهيد تا به جايي برسيم که کليه حالتها بررسي شده باشد و به
عنوان آخرين حالت که ممکن است پيش بيايد ما يک نتيجه اي را در نظر مي گيريم، يعني
در حقيقت else آخر مي باشد. در اينجا چون مثال ما روزهاي هفته است
و از هفت روز عادي هفته نمي تواند خارج باشد، آخرين روز را که شنبه باشد براي اين
حالت در نظر گرفتيم و مفهوم آن اينطور است که 6 روز هفته را بررسي کن اگر هيچ کدام
از آنها نبود، روز شنبه را براي نتيجه اعلام کن. و در آخر هم آکلاد باز شده را مي
بنديم تا پايان اين مجموعه از دستور سوئيچ مشخص شود. در نظر داشته باشيد که
دستورات شرطي بسيار کاربرد دارند و حتي ممکن است در يک اسکريپت چندين بار از اين
دستورات استفاده کنيد.
تکرار
دستورات توسط حلقه ها javascript loops
هر گاه بخواهيد يک مجموعه کد به دفعات مشخص و يا رسيدن به يک نتيجه مشخص
تکرار شود، بايد از حلقه استفاده کنيد. حلقه ها در جاوااسکريپت دو نوع هستند، يکي
حلقه for و ديگري حلقه while که هر کدام از آنها هم ممکن است بسته به موقعيت کد مدلهاي مختلفي داشته باشند
که در ادامه با کار آنها آشنا خواهيد شد.
در اين حلقه، مجموعه
کد مورد نظر به تعداد مشخص تکرار مي شود که در ابتداي حلقه تعداد دفعات اجراي کد
بايد اعلام شود. پس هرگاه مي دانستيد که چند بار قرار است کد اجرا شود از اين حلقه
استفاده کنيد. بطور مثال مي خواهيم اعداد از 0 تا 10 در صفحه چاپ شوند:
خب براي اجراي اين مثال ابتدا کلمه for
را نوشتيم تا شروع حلقه را به مفسر اعلام کنيم سپس يک پرانتز بايد باز کنيم تا
پارامترهاي لازم براي تکرار در اين حلقه را وارد کنيم. اولين پارامتري که بايد
وارد شود، يک متغير است با مقداردهي اوليه که به آن initial expression
يا همان عبارت آغازين مي گويند. سپس دومين پارامتر که يک شرط است و مفهوم آن اينست
که حلقه بايد ادامه پيدا کند تا متغير کوچکتر يا برابر با عدد 10 بشود. سومين
پارامتر به عبارت افزاينده يا increment expression
معروف است که در اينجا به اين مفهوم مي باشد که در هر بار اجراي حلقه يک واحد بايد
به متغير افزوده شود. در انتهاي اعلام پارامترها پرانتز را مي بنديم. فقط دقت کنيد
که در اين پرانتز هر پارامتري که نوشته شود بلافاصله بعد از آن بايد علامت ; قرار
گيرد تا تداخلي بين آنها بوجود نيايد. بطور ساده پارامترهاي داخل پرانتز را مي
توانيم اينچنين بيان کنيم: مقدار اوليه متغير سپس مقدار نهايي و در آخر هم ترتيب
افزايش متغير در هر تکرار حلقه. ناگفته نماند که حتماً نبايد مقدار افزايشي باشد،
مي تواند به ترتيب کم شود که همه مقادير برعکس خواهند شد. در خط بعد هم نتيجه را
مابين آکلاد مي گذاريم تا به اسکريپت نظم دهيم و سپس دستور تايپ نتيجه که کلمه number
را چون مي خواهيم عيناً در صفحه چاپ شود داخل " " گذاشتيم و بعد + که با
پارامترهاي ديگه ترکيب بشود. البته در اينجا بجاي علامت بعلاوه مي توانيد کاما هم
بگذاريد و بعد از آن متغير تعريف شده و در انتهاي آنها از تگ br
استفاده کرديم تا هربار که حلقه تکرار مي شود نتيجه در يک خط جديد چاپ شود.
نوع ديگر حلقه ها،
حلقه while مي باشد که بر خلاف حلقه for لزومي ندارد که
متغيرها را در داخل پرانتز به عنوان پارامتر حلقه اعلام کنيم و همچنين در مواردي
هم که مقدار انتهايي حلقه مشخص نيست مي توانيم از اين نوع استفاده کنيم چون کد
مورد نظر تا جايي که نتيجه دلخواه بدست بيايد تکرار خواهد شد. البته اين نوع حلقه
را مي توانيم بجاي حلقه for هم بکار بريم يعني اگر مقدار نهايي متغير هم داشته
باشيم اين حلقه کاربرد خواهد داشت. مثال بالا را در مورد اين حلقه مي توانيم به
اين صورت ذکر کنيم:
var i = 0
while (i <= 10)
{
document.write(" Number " + i + "
")
i++
}
while (i <= 10)
{
document.write(" Number " + i + "
")
i++
}
کلمه while را مي توانيم ترجمه کنيم به ماداميکه ،
پس در اينجا ما متغير را جداگانه تعريف کرديم و حالا مي گوييم، ماداميکه شرط
کوچکتر يا مساوي 10 بودن برقرار نيست حلقه را تکرار کن و يک واحد به آن اضافه کن
تا بالاخره شرط ما درست دربيايد.
يک نوع حلقه ديگر در
جاوااسکريپت وجود دارد که در حقيقت برعکس حلقه while مي باشد. در اين حلقه، شرط در آخر بدنه حلقه بررسي مي شود يعني
يکسري دستور اجرا مي شود سپس شرط بررسي مي گردد که آيا به نتيجه مورد نظر رسيده
است يا نه که اگر نتيجه درست نبود دوباره باز تکرار خواهد شد. فرق اين حلقه با
حلقه while در اينست که حداقل يکبار
دستورات اجرا خواهند شد ولي در حلقه while
ممکن بود در صورت برقرار بودن شرط در همان ابتدا ديگر دستورات اجرا نشوند. حالا به
مثال زير توجه کنيد تا کاملاً موضوع را درک کنيد:
var i=0
do
{
document.write(" Number " + i + "
")
i=i+1
}
while (i <= 10)
do
{
document.write(" Number " + i + "
")
i=i+1
}
while (i <= 10)
در
اينجا همه چيز مانند مثالهاي بالا است با اين تفاوت که کلمه do
به ابتداي حلقه اضافه شده و بررسي شرط هم به انتهاي حلقه منتقل شده. همانطور که
ميدانيد يکي از معني هاي do انجام دادن کاري است. مفهوم
اين کد هم بدين گونه است که دستور چاپ را انجام بده و يک واحد به متغير اضافه کن
ماداميکه متغير کوچکتر يا مساوي با عدد 10 بشود. پس اين دستورات حداقل يکبار اجرا
مي شوند تا به شرط برسند، شما مي توانيد براي رسيدن به صحت اين گفته مقدار متغير
را بجاي صفر به يک عدد ديگر تغيير دهيد مثلاً عدد 20 را بدهيد و يکبار کد را اجرا
کنيد. در اين مثال نوع ديگر افزايش هم نشان داده شده است که شما مي توانيد از اين
مدل هم استفاده کنيد.
break
مثالهايي که در بالا ذکر شد همگي ساده بودند اما هنگاميکه شما نياز به
نوشتن حلقه هاي پيچيده تري داريد، بايد دقت کنيد که حلقه شما دچار حلقه بي نهايت
يا همان حلقه نامتناهي نشود. بطور مثال يک مقدار اوليه براي متغير در نظر مي گيريد
و يک شرطي هم تعيين مي کنيد اما هيچگاه شرط حلقه درست نخواهد شد که حلقه از تکرار
باز ايستد و همينطور اجراي کد ادامه پيدا مي کند تا خود کاربر آن را با بستن
مرورگر متوقف کند و گاهي حتي مجبور به راه اندازي مجدد کامپيوتر خواهد شد. براي جلوگيري از همچين اتفاقي مي توانيد از دستور
break استفاده کنيد و يک شرطي هم براي آن در نظر بگيريد تا از حلقه هاي
بي نهايت جلوگيري شود.
var i
= 11
while (i >= 10)
{
document.write(" Number " + i + "
")
i++
if ( i == 21 ) break
}
while (i >= 10)
{
document.write(" Number " + i + "
")
i++
if ( i == 21 ) break
}
در اين حلقه هيچگاه شرط درست نخواهد بود و تا بي نهايت ادامه پيدا مي کند
اما با استفاده از دستور break و شرطي که در نظر گرفتيم از تکرار نا محدود اين حلقه جلوگيري
کرديم در حقيقت از حلقه خارج شديم. پس استفاده از اين دستور را براي حلقه هاي
پيچيده در نظر داشته باشيد تا با مشکلات جدي مواجه نشويد.
آرایه ها Arrays
آرايه
چيست؟
آرايه يکي ديگر از دستورات جاوااسکريپت مي باشد که همانند بقيه دستورها يک
وظيفه اي دارد و بهترين خاصيت اين دستور، کوتاه کردن اسکريپت ما است. شئ آرايه يا
همان Array براي ذخيره کردن مقادير متفاوت در يک متغير بکار مي رود. همانطور
که مي دانيد تا قبل از شناخت اين دستور براي هر متغير يک مقدار مشخص در نظر گرفته
مي شد، اما توسط يک آرايه شما مي توانيد چندين مقدار را به يک متغير نسبت دهيد.
بطور مثال مي توانيد اسامي روزهاي هفته را در يک متغير ذخيره کنيد. دستور آرايه
داراي قسمتهايي است که با توجه به مثال زير به توضيح آنها مي پردازيم:
var
weekdays = new Array(7)
weekdays[0] = "Shanbeh"
weekdays[1] = "Yekshanbeh"
weekdays[2] = "Doshanbeh"
weekdays[3] = "Seshanbeh"
weekdays[4] = "Chaharshanbeh"
weekdays[5] = "Panjshanbeh"
weekdays[6] = "Jomeh"
weekdays[0] = "Shanbeh"
weekdays[1] = "Yekshanbeh"
weekdays[2] = "Doshanbeh"
weekdays[3] = "Seshanbeh"
weekdays[4] = "Chaharshanbeh"
weekdays[5] = "Panjshanbeh"
weekdays[6] = "Jomeh"
اول از همه يک متغير بنام weekdays تعريف کرديم و آنرا
برابر با آرايه جديد قرار داديم، دستور آرايه را بايد با new Array
شروع کنيد که به طرز نوشتن حروف بايد توجه کنيد، سپس پرانتزي باز کرده و تعداد
مقادير را در آن مي نويسيم. به اين عدد داخل پرانتز index
يا انديس مي گويند. انديس ها از صفر شروع مي شوند. در خطوط بعد، نوبت به
مقداردهي هر انديس مي رسد که متغير را مي نويسيم و هر انديس را بايد در کروشه [ ]
بگذاريم و سپس آنها را برابر با يک مقدار قرار دهيم که اين مقادير هر چيزي مي
توانند باشند مانند رشته هاي متني و يا اعداد. مثال بالا را مي توان بصورت زير هم
نوشت:
var
weekdays = new Array ("Shanbeh","Yekshanbeh",...)
يعني
بجاي نوشتن انديس کلي در پرانتز، مقادير هر انديس را بنويسيم و توسط کاما آنها را
از هم جدا کنيم.
خصوصيت آرايه
متدهاي
آرايه
تابع چیست؟
Call function
حالا مي خواهيم هنگام باز شدن صفحه وب، روزهاي هفته به ترتيب نمايش داده
شوند. بعد از اينکه مقادير را در آرايه تعريف کرديم سپس بهترين دستوري که به ما در
اينجا کمک مي کند يک حلقه است تا دستور چاپ کردن در صفحه را تکرار کند تا به آخرين
روز هفته برسيم:
for (
i=0; i<7 br="" i="">
document.write ( weekdays[ i ] + "
" )
}
" )
}
خصوصيت آرايه
آرايه هم داراي
خصوصيت و متدهايي است که شما در صورت لزوم مي توانيد آنها را بکار بريد. براي
تعريف کردن يک خصوصيت براي آرايه کافيست که بعد از متغير تعريف شده در آرايه، يک نقطه بگذاريد و سپس
آن خصوصيت را بنويسيد. خصوصيتي که بيشترين
کاربرد را براي آرايه دارد، length مي باشد. وظيفه اين خصوصيت
نمايش انديس کلي يک آرايه است. اگر بخواهيم در مثال بالا اين خصوصيت را بکار بريم،
بايد خط زير را بعد يا قبل از حلقه for بکار بريم:
document.write ( weekdays.length + "
" )
" )
بعد از وارد کردن اين
کد و اجراي اسکريپت، عدد هفت در صفحه نوشته خواهد شد چون انديس ما در اينجا هفت
بود.
متدهاي
آرايه
آرايه داراي متدهايي هم هست که نحوه تعريف کردن آنها همانند خصوصيت است و
تنها فرقي که دارد بعد از نوشتن متد بايد پرانتز هم بگذاريد. متدهاي آرايه عبارتند
از:
concat(),
join(), pop(), shift(), push(), unshift(), reverse(), slice(), sort(),
splice(), toString(), valueOf()
متد concat براي ترکيب مقادير دو يا سه آرايه بکار مي رود. اين متد هيچ چيزي
را در آرايه ها تغيير نمي دهد و فقط مقادير تعريف شده را در صفحه چاپ مي کند. متد join تقريباً مانند متد قبلي
عمل مي کند و کليه مقادير را بصورت يک رشته متني در صفحه نشان مي دهد با اين تفاوت
که در اين متد مي توانيد يک علامت مانند نقطه، تعيين کنيد تا بين مقادير چاپ شده
در صفحه قرار گيرد. بصورت پيش فرض اين علامت، کاما مي باشد. متد pop
آخرين مقدار آرايه را جدا کرده و در صفحه نمايش مي دهد. دقت کنيد که اين متد در
خصوصيت length تأثير مي گذارد يعني اگر بعد از اين متد خصوصيت length
را بکار بريد، يک انديس کمتر نشان مي دهد. متد shift برعکس متد قبلي است
يعني اين متد اولين مقدار آرايه را جدا مي کند و نشان مي دهد. متد push يک يا چند مقدار را به آخر
يک آرايه اضافه مي کند و انديس جديد برمي گرداند. متد unshift يک يا چند مقدار به
ابتداي يک آرايه اضافه مي کند و انديس جديد بر مي گرداند. دقت کنيد که اين متد در
مرورگر اينترنت اکسپلورر بدرستي کار نمي کند. متد reverse ترتيب نمايش مقادير يک
آرايه را برعکس کرده و در صفحه وب نمايش مي دهد.
متد slice
يکسري از مقادير موجود در يک آرايه را جدا مي کند که در اين متد شماره انديس
مقداري که مي خواهيد از آنجا جداسازي شروع شود را بايد بنويسيد و همچنين مي توانيد
آخرين مقدار هم مشخص کنيد که اگر آنرا معين نکنيد تا آخرين مقدار انتخاب خواهد شد.
متد sort
براي منظم کردن مقادير يک آرايه به ترتيب حروف الفباي انگليسي است. اگر هم مقادير
يک آرايه، عدد باشند به ترتيب اعداد تنظيم خواهند شد که مفسر جاوااسکريپت به اولين
عدد از سمت چپ نگاه مي کند و بعد از رديف کردن آنها سپس به اعداد بعدي نگاه مي
کند. متد splice
براي اضافه يا حذف يک مقدار در آرايه مي باشد که اين متد داراي پارامترهايي مي
باشد که اين پارامترها را بايد در پرانتز مشخص کنيد. اولين پارامتر شماره انديس که
در آنجا يک مقدار حذف يا اضافه خواهد شد و بايد عدد باشد. دومين پارامتر مقدار
عددي است که معين مي کند چند تا مقدار از آن انديسي که در پارامتر قبل انتخاب
کرديم، بايد حذف شود که اگر آنرا صفر در نظر بگيريد هيچ مقداري حذف نخواهد شد. اين
دو پارامتر حتماً بايد نوشته شوند. در ضمن اگر مي خواهيد مقاديري هم اضافه شود بعد
از اين پارامتر ها به عنوان پارامترهاي بعدي ذکر مي کنيد.
متد
toString مقادير يک آرايه را تبديل به يک رشته متني مي کند.
توابع Functions
تابع چیست؟
هنگاميکه شما شروع به
نوشتن کد مي کنيد، بايد سعي کنيد که اسکريپت شما حتي الامکان خلاصه و منظم و خوانا
باشد تا در مراجعت بعدي براي عيب يابي و يا تغييرات، مشکلي نداشته باشيد. هميشه
کدهاي شما کوتاه نيست و گاهي اسکريپت شما ممکن است تا پنجاه خط برسد که در اين
موقع نياز به يک سازمان دهي داريد. توابع
يا همان functions در جاوااسکريپت مي توانند
کمک بزرگي به اين سازمان دهي کنند. شما مي توانيد يک مجموعه کد را که بايد در
جاهاي مختلف تکرار شود را به صورت يک تابع تعريف کنيد و در هر جاي اسکريپت به آن
نياز داشتيد آنرا فراخواني کنيد و از نوشتن مجدد بپرهيزيد. پس يک تابع، مجموعه کدي
است که مي توان آنرا در جاهاي مختلف اسکريپت استفاده کرد بدون آنکه نياز به نوشتن
مجدد آن کدها باشد. يک تابع مي تواند هر دستوري از جاوااسکريپت و يا حتي يک خط کد
ساده باشد:
function message ( )
{
alert ( " Hello friends! " )
}
{
alert ( " Hello friends! " )
}
همانطور که مشاهده مي
کنيد براي تعريف يک تابع از کلمه function استفاده مي شود و دقت کنيد
که حروف آن بايد حتماً کوچک باشد. بعد از نوشتن دستور function
نوبت به تعيين يک اسم واحد براي اين تابع است که بهتر است اين اسم متناسب با وظيفه
اي که اين مجموعه قرار است انجام دهد باشد چون بخاطر آوردن آن هم راحتتر خواهد
بود. سپس پرانتز مي گذاريم تا در صورت لزوم پارامترهايي را در آن مشخص کنيم که به
اين پارامترها آرگومان و يا argument مي گويند. طبق معمول هم با
گذاشتن علامت آکلاد مشخص مي کنيم که اين مجموعه در کجا شروع و در کجا ختم مي شود
که در بين اين علامت هم کدهاي جاوااسکريپت را وارد مي کنيم. در اينجا يک دستوري
نوشته شده که هنگام فراخواني اين تابع و اجراي کد، يک پنجره باز مي کند و عبارت
متني داخل پرانتز را نمايش مي دهد. شما يک تابع را در هر کجاي يک سند html
مي توانيد بکار بريد. اگر دستوراتي است که هنگام باز شدن صفحه وب بايد اجرا شوند و
يا آماده اجرا باشند پس بهتر است در قسمت head
نوشته شوند. حتي مي توانيد يک تابع را در فايل خارجي جاوااسکريپت که با پسوند js
ذخيره مي شود وارد کنيد تا در صفحات مختلف آنرا بکار بريد.
توابعي که در يک سند
اچ تي ام ال تعريف مي شوند به خودي خود اجرا نخواهند شد. اگر شما يک تابع تعريف
کنيد پس از باز کردن صفحه وب خواهيد ديد که هيچ اتفاقي نمي افتد. توابع پس از
تعريف بايد در جاي مورد نظر فراخواني شوند يعني آنها را صدا کنيم تا به کمک ما
بيايند. در حقيقت آنها آماده هستند تا پس از فراخواني اجرا شوند. همانطور که با
صدا کردن اسمتان شما پاسخ مي دهيد، يک تابع هم بايد اسمش را بکار بريد تا اجرا
شود. پس هر کجا که نياز به دستورات آن تابع داشتيد، نامش را بنويسيد:
نگران دستور alert و onclick نباشيد چون در بخشهاي بعدي با آنها آشنا خواهيد شد. فقط به
فراخواني تابع دقت کنيد که چگونه بکار برده مي شود.
گاهي اوقات هنگام
تعريف يک تابع، آرگومان و يا پارامتري را براي آن داخل پرانتز تعيين مي کنيد تا
هنگام صدا زدن تابع، آن آرگومان مقداردهي شود. در کل مي توان گفت که يک آرگومان،
متغيري است که هنگام صدا زدن تابع مقدار آن ارسال مي شود تا تابع از آن استفاده
کند. مي توانيم مثال بالا را با يک آرگومان تعريف کنيم:
function message ( msg )
{
alert ( msg )
}
{
alert ( msg )
}
در اينجا يک آرگومان
بنام msg
تعيين کرديم تا هنگام فراخواني تابع، مقدارش به تابع فرستاده شود و نتيجه آن اجرا
شود. در حقيقت عبارت Hello friends
مقدار اين آرگومان مي باشد. تعيين آرگومان هيچ محدوديتي ندارد و فقط بايد آنها را
با علامت کاما از هم جدا کنيد. دقت کنيد که در دستورات جاوااسکريپت، بين دو علامت
" " بايد از ' ' استفاده شود چون اگر مجدداً از خود علامت نقل قول يعني
" " استفاده کنيد با پيغام خطا مواجه مي شويد.
بازگرداندن یک مقدار
توسط دستور return: توابع جاوااسکريپت
داراي يک دستوري بنام return هستند که وظيفه اين دستور برگرداندن مقادير تعريف
شده در آن تابع است.
function greeting ( ) {
return ( " Hello world! " )
}
.......
document.write ( greeting( ) )
return ( " Hello world! " )
}
.......
document.write ( greeting( ) )
اين مجموعه کد را اگر بدون استفاده از return
اجرا کنيد، نتيجه درست نخواهيد گرفت. به يک مثال ديگر توجه کنيد:
همانطور که مشاهده مي کنيد دو آرگومان براي تابع total
تعريف شده است که در متغير x ذخيره مي شوند و توسط دستور return
مقدارشان به تابع ارسال خواهد شد. در نظر داشته باشيد که توابع در جاوااسکريپت
بسيار کاربرد دارند و شما هنگام نوشتن اسکريپت خود پي به اهميت آنها خواهيد برد
مخصوصاً زماني که يک سري کد را بخواهيد در کليه صفحات يک وب سايت بکار بريد که مي
توانيد آنها را بصورت يک تابع در يک فايل خارجي جاوااسکريپت ذخيره کنيد و سپس در
هر صفحه آن تابع را فراخواني کنيد.
پنجره
های ارتباط با کاربر popup boxes
سه نوع پنجره در جاوااسکريپت وجود دارند که مي توانيد توسط آنها پيغامي را
در صفحه براي کاربر نمايش دهيد و يا اطلاعاتي براي تأييد آنها بفرستيد و يا اينکه
اطلاعاتي را از آنها بخواهيد. آنها پنجره هاي کوچکي هستند که چون خيلي سريع در
صفحه بالا آمده و در مقابل کاربر ظاهر مي شوند، به آنها popup
گفته مي شود. اين پنجره ها عبارتند از:
پنجره alert ، پنجره confirm و پنجره prompt .
پنجره alert ، حاوي يک اخطاريه
براي کاربر است که در آن هشداري داده مي شود تا کاربر متوجه کاري که مي کند باشد.
دستور اين پنجره به صورت زير است:
alert (" text ")
اين پنجره فقط داراي يک
دکمه OK است که کاربر بعد از خواندن آن اخطاريه با زدن دکمه ok ، پنجره را مي بندد.
پنجره Confirm
اين مدل پنجره ،
همانطور که از اسمش پيداست براي گرفتن تأييد از کاربر اجرا مي شود. اين پنجره داراي
دو دکمه OK و Cancel مي باشد که با زدن دکمه OK
توسط کاربر مقدار true بازگردانده مي شود و با زدن Cancel
مقدار false برگردانده مي شود. دستور اين پنجره به اين صورت
است:
confirm ( " text " )
اين پنجره براي
مواقعي خوب است که شما نياز به جواب کاربر براي ادامه مطلبي يا چيزي داريد، در
صورتيکه کاربر تأييد کند آن مطلب ادامه پيدا مي کند و در غير اينصورت همانجا متوقف
خواهد شد.
در اين اسکريپت ما ابتدا يک تابع در قسمت head
تعريف کرديم سپس دستور confirm را در يک متغير بنام button ذخيره کرديم تا
بتوانيم براي اين متغير شرطي را تعيين کنيم. همانطور که گفتيم اگر کاربر دکمه OK
را بزند، مقدار true برگردانده مي شود پس شرط را بر اين روال گرفتيم که اگر مقدار true
بازگردانده شد متني در صفحه چاپ شود و در غير اينصورت متني ديگر نوشته شود. سپس
اين تابع را در تگ بدنه و در رويداد onload قرار داديم تا به محض
باز شدن صفحه پنجره confirm اجرا شود. رويداد onload را در بخش بعدي ياد
خواهيد گرفت.
از اين پنجره زماني
استفاده مي شود که شما نياز داشته باشيد تا اطلاعاتي را از کاربر دريافت کنيد و
آنرا در جايي مناسب بازگردانيد. معمولاً اجراي اين پنجره هنگام باز شدن صفحه وب
است و داراي دو قسمت يا دو پارامتر مي باشد:
prompt ( "text or question", "
default value " )
در قسمت اول يک متن
که معمولاً سؤال است را وارد مي کنيد تا در پنجره ظاهر شود و در قسمت دوم يک مقدار
پيش فرض براي راهنمايي کاربر وارد مي کنيد که معمولاً آن قسمت را خالي مي گذارند
تا کاربر آن مقدار را وارد نمايد. البته اگر هم شما مقدار پيش فرض را وارد نماييد،
باز کاربر قادر به وارد کردن مقدار ميباشد.
مانند مثال قبل عمل کرديم با اين تفاوت که اين بار از دستور prompt
استفاده شده است. فقط به يک نکته دقت کنيد که در دستور شرط ما متغير name
را نا مساوي با مقدار null قرار داديم. null به معني هيچ چيز ميباشد و در
اينجا آنرا بکار گرفتيم تا اگر کاربر بعد از باز شدن پنجره دکمه cancel
را زد و يا هيچ اسمي وارد نکرد تغييري در صفحه ايجاد نشود. شما مي توانيد يکبار
آنرا حذف کنيد و نتيجه اجراي کد را ببينيد. در حال حاضر شما سه نوع پنجره ارتباط
با کاربر را فرا گرفتيد که دو مدل اول بيشترين کاربرد را در کدنويسي شما خواهند
داشت.
رويدادها و حوادث Javascript Events
رويدادها و يا حوادث در جاوااسکريپت، کدهاي کوتاهي هستند که بين اقدامات
انجام شده توسط کاربر مانند کليک کردن موس و اسکريپت، ارتباط برقرار مي کنند. يعني
هنگاميکه کاربر بر روي دکمه هاي موس فشار مي آورد، رويدادها به اسکريپت اين موضوع
را مي فهمانند تا اسکريپت براي آن حرکت عکس العملي در نظر بگيرد. اين اقدامات شامل
حرکاتي است مانند کليک کردن دکمه هاي موس، قرار گرفتن نشانگر موس بر روي يک نقطه
از صفحه، فشردن کليدهاي کيبورد، انتخاب يا تغيير در اجزاي يک فرم، فشردن دکمه هاي
فرم و يا باز و بستن يک صفحه وب. در کل رويدادها باعث مي شوند تا جاوااسکريپت
اينگونه حرکات را شناسايي و درک کند. رويدادها مانند بقيه خصوصيات تگهاي اچ تي ام
ال هستند که بايد در ميان تگها قرار گيرند و آنها را برابر با يک کد کوتاه
جاوااسکريپت و يا اسم يک تابع تعريف شده بايد قرار داد. برای مثال رويداد و کد
استفاده شده زير را در نظر بگیرید:
در صفحات قبل با بعضي از رويدادها آشنا شديد و حالا در اينجا کليه آنها را
ياد خواهيد گرفت. لازم بذکر است که، همه رويدادها در تمام مرورگرها اجرا نمی شوند.
رويدادهاي موس
زمانيکه مي خواهيد جاوااسکريپت نسبت به حرکات موس،
عکس العمل نشان دهد از اين رويدادها استفاده مي کنيد. به سورس کد مثالها دقت کنيد
تا با کاربرد آنها بيشتر آشنا شويد.
onClick براي کليک کردن دکمه چپ موس توسط کاربر.
onDblClick رويداد براي دوبار کليک دکمه چپ موس.
onMouseDown فشار آوردن بر روي دکمه چپ موس.
onMouseUp رها کردن دکمه موس پس از فشردن آن.
onMouseOver قرار گرفتن نشانگر موس بر روي يک چيزي.
onMouseOut خارج شدن موس از روي يک چيزي.
در اين رويدادها، جاوااسکريپت نسبت به فشردن يک
کليد بر روي کيبورد توسط کاربر، عکس العمل نشان خواهد داد.
onKeyPress فشردن يک کليد کيبورد.
onKeyDown مانند رويداد بالا براي فشردن يک کليد.
onKeyUp رها کردن يک کليد فشرده شده.
رويدادهاي فرم
اين رويدادها مربوط
به عملياتي است که کاربر بر روي اجزاي فرم انجام مي دهد. البته ممکن است بعضي از
اين رويدادها بر روي متنهاي عادي در صفحه هم عکس العمل نشان دهند اما بيشترين
کاربرد را در فرمها دارند.
onFocus
هنگاميکه توسط موس و يا دکمه Tab کيبورد بر روي يکي از اجزاي فرم متمرکز شويد.
onBlur هنگاميکه تمرکز از روي يکي از اجزاي فرم خارج شود.
onSelect انتخاب کردن يک متن در صفحه يا در يک فرم.
onChange تغيير در اجزاي فرم، مانند تغيير متن در کادر متني.
onSubmit فشردن دکمه تأييد يک فرم.
onReset فشردن دکمه reset يا همان پاک کردن
اطلاعات فرم.
يکسري از رويدادها هم مربوط به صفحات وب مي باشد،
مانند لود شدن صفحه يا بستن آن.
onLoad
تکميل شدن يک صفحه وب يا يک تصوير در مرورگر.
onUnload بستن مرورگر يا خروج از يک صفحه وب.
onResize تغيير اندازه پنجره مرورگر.
يک
رويداد ديگر هست که مي توان هم براي يک صفحه و هم براي يک عکس بکار برد:
onError اين رويداد زماني اجرا مي شود که يک عکس به هر دليلي لود نشود
يعني در جاي خود قرار نگيرد.
معمولاً براي رويدادها، ابتدا يک تابع تعريف مي شود تا هنگام نوشتن رويداد
در يک تگ اچ تي ام ال، نظم برقرار باشد و از شلوغي تگ جلوگيري شود. بيشترين کاربرد
اين رويدادها در تأييد اعتبار فرمها و پرسشنامه ها مي باشند
شئ ها در جاوااسکريپت Javascript Objects
در بخشهاي قبل با بعضي از object ها يا همان شئ هاي
جاوااسکريپت مانند، شئ Date و آرايه ها آشنا شديد. در اين صفحه قصد داريم در مورد شئ هاي ديگر
در جاوااسکريپت صحبت کنيم.
شئ جاوااسکريپت چيست؟
وظيفه شئ ها را مي
توان شبيه به متغير ها دانست اما شئ ها بسيار کامل تر از متغيرها هستند چون آنها
مي توانند اطلاعات بيشتري را در خود ذخيره کنند و همچنين تفاوت ديگري هم که با
متغيرها دارند اينست که متغيرها بايد تعريف شوند تا جاوااسکريپت آنها را بشناسد
اما بعضي از شئ ها در جاوااسکريپت ساخته و تعريف شده اند. اين شئ هاي از قبل تعريف
شده را درون ساخت يا Built-in مي گويند مانند شئ Date
. البته همانطور که ميدانيد بايد همين اشياء هم در ابتداي کد يکبار ديگر با دستور new
تعريف شوند:
mydate = new Date ( )
name = new Array ( )
name = new Array ( )
پس فراموش نکنيد که
از اين دستور براي شروع يک object استفاده کنيد. کليه شئ ها داراي خصوصيات و متدهاي
شناخته شده براي جاوااسکريپت هستند که آنها را با گذاشتن يک نقطه بعد از خود شئ
بکار مي بريم و مي توانيم مقادير مختلفي را براي آنها در نظر بگيريم.
انواع اشياء
به غير از شئ هاي
درون ساخت Date و Array که در صفحات قبل با آنها آشنا شديد، شئ هاي درون ساخت ديگر
جاوااسکريپت عبارتند از شئ String و Math و شئ هايي که مربوط به HTML DOM مي شوند. در بخش هاي بعدي به ترتيب به توضيح هر کدام
از اين اشياء خواهيم پرداخت.
دستور with
در اين دستور شما مي
توانيد يک شئ را به همراه خصوصيات و متدهايش بصورت پيش فرض در اسکريپت خود تعريف
کنيد. اين دستور به نوعي کد شما را راحت تر و خلاصه تر مي کند و مانند توابع فقط
اسم تعيين شده را در کدها بکار مي بريد که جاوااسکريپت کليه خصوصيات و متدهاي آنرا
برايش در نظر خواهد گرفت. قالب دستور with به شکل زير است:
with ( name ) {
.... javascript code ....
}
.... javascript code ....
}
روش ساخت يک شئ
در بالا صحبت از يک
سري اشياء شد که جاوااسکريپت از قبل با آنها آشناست اما گاهي اوقات نياز هست که يک
شئ را خودتان تعريف کنيد تا بهتر بتوانيد اسکريپت خود را مديريت کنيد. البته توسط
دستور with هم مي توانيد اينکار را انجام دهيد، به اين صورت که
اسم شئ مورد نظر را بجاي name در الگوي بالا بنويسيد و خصوصيت و متد آنرا در خطوط
بعدي بين { } تعريف کنيد. اما اگر بخواهيد يک شئ را در اسکريپت خود بسازيد نياز به
دو چيز داريد، ابتدا يک تابع سازنده که به آن Constructor
مي گويند و در آن نوع شئ تعيين مي شود، سپس به نمونه شئ که از آن تابع استفاده مي
کند و به آن Instance مي گويند که توسط دستور
new
تعريف مي شود. اين مطلب ممکن است کمي گيج کننده باشد اما به مثال زير توجه کنيد تا
کاملاً به ساخت شئ توسط خودتان تسلط پيدا کنيد. مي خواهيم يک شئ براي اتومبيل
تعريف کنيم که خصوصياتي مانند اسم، رنگ و مدل را داشته باشد. براي اينکار ابتدا يک
تابع بايد تعريف کنيم بنام car و خصوصيات آنرا به عنوان پارامترهايش در پرانتز
بنويسيم و سپس اين پارامترها را بر اساس خصوصياتش مقداردهي مي کنيم:
function Car ( name, model, color ) {
this.name = name
this.model = model
this.color = color
}
this.name = name
this.model = model
this.color = color
}
به عبارت this
دقت کنيد، اين يک دستور جاوااسکريپت است و به شئ که در حال تعريف آن هستيم، اشاره
دارد و در حقيقت به مفسر جاوااسکريپت مي فهماند که اين خصوصيت شئ
تعريف شده با اين مقدار است و شما بايد از اين دستور استفاده کنيد تا خصوصيت يک شئ
را برايش تعريف کنيد و مقدار آنها را هم مانند بالا مشخص کنيد. حالا بايد يک شئ
جديد براي آن بسازيد که اين شئ جديد را در متغيري بنام mycar
ذخيره مي کنيم:
mycar = new Car ( "Corvette",
"Z06", "Red" )
اين خط کد به
جاوااسکريپت مي فهماند که يک شئ بنام mycar
داراي خصوصيات اسم که Corvette و مدل Z06
و رنگ Red مي باشد. شما مي توانيد هر شئ ديگر که بخواهيد با
دستور new بسازيد:
thecar = new Car ( "BMW",
"Z4", "Silver" )
الان مي خواهيم از شئ
اول اسم ماشين و از شئ دوم رنگ را در صفحه چاپ کنيم:
document.write ( mycar.name + "
" )
document.write ( thecar.color )
" )
document.write ( thecar.color )
بعد از اينکه خصوصياتي براي يک شئ تعريف کرديد حالا نوبت به متدهاي شئ
ساخته شده، مي رسد. در اينجا متدي که تعريف مي کنيم براي کليه ماشينها مي توانيم
بکار بريم. الگوي کلي يک متد به شرح زير است:
object.methodname(
) = function_name
object شئ است که ساختيم، methodname
نام متدي است که شما در نظر مي گيريد و function name
هم اسم تابعي که بايد بسازيد. سپس هر کجا که لازم بود از متد استفاده کنيد ابتدا
شئ و سپس با گذاشتن يک نقطه متد را به همراه پرانتز مي نويسيد که اگر اين متد
پارامتري هم داشت بايد آنرا داخل پرانتز معين کنيد. متدي که مي خواهيم براي شئ Car
بسازيم را بايد ابتدا بصورت يک تابع تعريف کنيم:
function
displaycar ( ) {
var result = " I like " + this.name + " " + this.model + " with " + this.color + " color."
document.write ( result )
}
var result = " I like " + this.name + " " + this.model + " with " + this.color + " color."
document.write ( result )
}
حالا با استفاده از دستور this اين تابع را به عنوان متد شئ
Car تعريف مي کنيم:
function
Car ( name, model, color ) {
this.name = name
this.model = model
this.color = color
this.displaycar = displaycar
}
this.name = name
this.model = model
this.color = color
this.displaycar = displaycar
}
بعد از تعريف توابع، شئ را توسط دستور new
مي سازيم و متد را اجرا مي کنيم:
mycar
= new Car ( "Corvette", "Z06", "Red" )
mycar.displaycar ( )
mycar.displaycar ( )
دستور
prototype
در طول اسکريپت شما، ممکن است به جايي برسيد که نياز داشته باشيد يک
خصوصيت و يا يک متد ديگر براي شئ ساخته شده در خارج از آن توابع تعريف شود که با
استفاده از دستور prototype مي توانيد آنها را تعريف کنيد. الگوي اين دستور به اين صورت مي
باشد:
object.prototype.method
or property = value
کليه دستورات بالا را توسط توابع و آرايه مي توانيد انجام دهيد اما تعريف
کردن شئ در اسکريپت هاي طولاني بسيار راحت تر و سريع تر از نوشتن بقيه دستورات مي
باشد. در ادامه، با شئ هاي درون ساخت string ، math
و همچنين شئ هاي مربوط به HTML DOM آشنا خواهيد شد. شئ Math
هم يکي ديگر از اشياي درون ساخت جاوااسکريپت است که شامل يکسري مقادير ثابت و
همچنين توابعي براي انجام عمليات رياضي در صفحات وب ميباشد.براي ساختن اين شئ نيازي
به دستور new نيست چون اين شئ براي مفسر جاوااسکريپت، کاملاً شناخته شده است. اين
شئ هم مانند بقيه اشياء داراي خصوصيات و متدهايي است که ابتدا به معرفي چند متد
پرکاربرد از اين شئ مي پردازيم و سپس با بقيه آنها آشنا خواهيم شد.
خلق اعداد تصادفي، Random
number
شئ Math داراي يک متد مفيد براي خلق اعداد تصادفي بنام random
است که الگوي آن بصورت زير ميباشد:
Math.random ( )
در متد بالا، جاوااسکريپت بين عدد يک و صفر، يک
عددي را انتخاب مي کند که اين عدد اعشاري است.
هرگاه
نياز داشتيد که اين متد بين صفر و يک عدد بزرگتر از يک، عدد تصادفي پيدا کند بايد
طبق الگوي زير عمل کنيد:
Math.random
( ) * num
که
بجاي num عدد مورد نظر را مي نويسيد.
گرد کردن اعداد اعشاري
همانطور که از اسم
اين متد پيداست، براي گرد کردن يک عدد اعشاري استفاده مي شود که البته همين متد را
به سه مدل مي توان تعريف کرد:
براي گرد کردن يک عدد اعشاري به عدد صحيح بعد از
خود بايد به شکل زير عمل کنيد:
Math.ceil ( num )
براي
گرد کردن يک عدد اعشاري به عدد قبل:
Math.floor
( num )
و
براي گرد کردن عدد اعشاري به نزديک ترين عدد:
Math.round
( num )
بهتر
است براي خلق اعداد تصادفي، اين دو متد گفته شده را با هم ترکيب کنيد تا اعداد
صحيح بدست بيايند. دو متد ديگر وجود دارد
که مي توانند بين اعداد تعيين شده، بزرگترين و کوچکترين عدد را پيدا کنند:
Math.max
( num, num, ... )
Math.min ( num, num, ... )
Math.min ( num, num, ... )
خصوصيات شئ Math
اين شئ داراي خصوصيات و ثابتهايي است که
براي محاسبات عمليات پيچيده رياضي بکار مي رود:
Math.E اين خصوصيت مقدار ثابت عدد Euler
را بر ميگرداند که تقريباً برابر است با 2.7182 . اين عدد به عدد E
معروف است.
Math.PI مقدار ثابت عدد پي که تقريباً برابر است با 3.14
Math.LOG2E لگاريتم عدد Euler بر مبناي دو. تقريباً برابر
است با 1.4426
Math.LOG10E لگاريتم E بر مبناي ده. تقريباً برابر است با 0.4342
Math.LN2 لگاريتم دو بر مبناي E.
تقريباً برابر است با 0.6931
Math.LN10 لگاريتم ده بر مبناي E.
تقريباً برابر است با 2.3025
Math.SQRT2 جذر عدد دو. تقريباً برابر است با 1.4142
Math.SQRT1_2 جذر يک دوم. تقريباً برابر است با 0.7071
توسط اين خصوصيات ديگر لازم نيست که شما اين
اعداد را به خاطر بسپاريد و فقط کافي است در صورت نياز، اين خصوصيات را در اسکريپت
خود وارد کنيد.
متدهاي شئ Math
متدهايي هم که در زير ليست شده اند، کاربرد کمتري
نسبت به متدهاي ذکر شده در ابتداي اين بخش دارند.
abs
قدرمطلق بر ميگرداند.
acos آرک کسينوس نقطه x که يک عدد ميان منفي يک و يک
بايد باشد؛ خارج از اين اعداد مقدار NaN بر گردانده مي شود. آرک
کسينوس عدد يک برابر با صفر است و منفي يک برابر با عدد پي.
asin آرک سينوس نقطه x که يک عدد ميان منفي يک و يک
؛ خارج از آن مقدار NaN بر گردانده مي شود.
atan آرک تانژانت نقطه x .
atan2 آرک تانژانت زاويه تتا بين دو نقطه x
و y .
cos کسينوس يک زاويه را بر ميگرداند.
exp مقدار Ex را بر ميگرداند که E همان عدد ثابت Euler
است و x هم يک مقدار عددي.
log لگاريتم يک عدد بر مبناي عدد E
.
pow اين متد توان را براي يک عدد محاسبه مي کند و داراي دو پارامتر
است که در اولي عدد مشخص مي شود و در پارامتر دوم مقدار عددي توان را تعيين مي
کنيد.
sin سينوس يک مقدار عددي را محاسبه مي کند.
sqrt جذر يک عدد را برمي گرداند.
tan عددي بر مي گرداند که نشان دهنده تانژانت يک زاويه است.
شئ
هاي مربوط به HTML DOM
تعريف
DOM
DOM مخفف سه کلمه Document Object Model مي باشد. در بعضي جاها
برگردان فارسي آنرا مدل شئ سند مي گويند. متني که در زير آمده تعريف DOM بر اساس W3C است:
" The
Document Object Model is a platform- and language -neutral interface that will
allow programs and scripts to dynamically access and update the content,
structure and style of documents. The document can be further processed and the
results of that processing can be incorporated back into the presented page.
This is an overview of DOM-related materials here at W3C and around the web.
"
اما به زبان ساده، DOM رابطه بين
عناصر HTML مانند متن ها، عکس ها و غيره
را با همان سند اچ تي ام ال بيان مي کند. اين يک فرآيندي است که به برنامه ها و
اسکريپت ها اجازه دسترسي به محتوا و ساختار داخلي پنجره مرورگر را ميدهد تا آنها
بتوانند بصورت آزادانه تغييراتي ايجاد کنند که نتيجه اين تغييرات در صفحه وب
نمايان شود. در همين رابطه زباني بنام DHTML بوجود آمد که با ترکيب کردن
عناصر اچ تي ام ال با استايل شيت و اسکريپتها مي تواند محتواي اسناد وب را بصورت
متحرک و پويا درآورد. در اينجا پويا بودن فقط به اين منظور نيست که متنها حرکت
کنند و از يک طرف وارد بشوند و از طرف ديگر خارج؛ ممکن است لينکها هر بار شما را
به يک سايتي پيوند دهند و يا عکس ها مرتب تغيير کنند، کلاً هر تغييري که نياز به
کدنويسي مجدد براي آن سند را نداشته باشد، منظور پويا بودن را مي رساند.
جاوااسکريپت،
شئ هايي دارد که مي توانند بطور مستقيم با خود مرورگر ارتباط برقرار کنند و همچنين
شئ هايي که با صفحه وب در ارتباط هستند. در کل مي توان اين اشياء را به دو دسته
اصلي تقسيم کرد، دسته اول که BOM گفته مي شود يعني Browser Object Model شئ هايي
که با پنجره مرورگر مي توانند ارتباط برقرار کنند و دسته دوم DOM که با Document يعني همان سند اچ تي ام ال.
تمامي اين اشياء بر اساس يک سلسله مراتبي اين ارتباط را برقرار مي کنند که در رأس
آنها شئ window مي باشد. در زیر اين سلسله را مشاهده می کنید
همانطور که در شکل مشاهده کرديد از شئ window تا شئ Document جزو دسته BOM مي باشند
و اشياء بعد از Document در دسته DOM قرار مي
گيرند. ناگفته نماند که در حال حاضر کمتر صحبت اصطلاح BOM مي شود و
کلاً اين مجموعه را DOM مي گويند. شما بايد اين
سلسله مراتب را براي استفاده اشياء آن، رعايت کنيد. اين سلسله مراتب را مي توان به
شجره نامه تشبيه کرد و شما مجبور هستيد براي صدا کردن هر شخص آنرا با نام پدرش
بياوريد و در بعضي جاها حتي نام پدر بزرگ هم لازم است، بطور مثال: علي فرزند محمد
يا علي فرزند محمد فرزند حسين. در اينجا هم پدر اصلي Window مي باشد
وپدر بعدي Document است که فرزندهاي آن همان
عناصر اچ تي ام ال ميباشند و سپس Form و در آخر هم Select که تنها
يک فرزند دارد. براي استفاده از آنها بايد ابتدا اسم پدر و سپس اسم فرزند را نوشت
و در آخر هم خصوصيت و يا متد آن فرزند که همه اينها با يک نقطه از هم بايد جدا
شوند. بطور مثال اگر ميخواهيد يک فرم را بنام form1 صدا بزنيد
تا با آن ارتباط برقرار کنيد بايد به شکل زير عمل شود:
window.document.form1
مانند همه اشياء در جاوااسکريپت ، اين شئ ها هم
داراي خصوصيات و متدهايي هستند که بعد از رعايت کردن سلسله مراتب با گذاشتن يک
نقطه مي توانيد آنها را بنويسيد. مانند:
window.history.go (-1)
که اگر
اين شئ را در يک لينک قرار دهيد با کليک کردن بر روي آن، کاربر به صفحه قبل بازگشت
داده مي شود.
در جدول
زير شئ هاي اصلي اين سلسله مراتب ليست شده است.
اين شئ مستقيماً با پنجره مرورگر در ارتباط است که معمولاً خصوصيات
و متدهاي اين شئ در تگهاي body و frameset بکار مي روند.
|
window
|
اين شئ شامل اطلاعاتي در رابطه با مرورگر کاربر است که توسط خصوصيات
و متدهاي آن اين اطلاعات ذخيره تا مورد استفاده قرار گيرند.
|
navigator
|
براي کار کردن بر روي فريمهاي اچ تي
ام ال.
|
frame
|
دسترسي و ارتباط با کليه عناصر اچ تي ام ال مانند، متنها فرمها
عکسها و غيره.
|
document
|
شامل اطلاعاتي در مورد URL يا همان آدرس
اينترنتي صفحه اي که در حال نمايش است.
|
location
|
اين شئ داراي اطلاعاتي براي رجوع
کاربر به صفحاتي که قبل از آن صفحه مشاهده شده و بر عکس.
|
history
|
اطلاعات صفحه مرورگر کاربر را بر مي
گرداند مانند اندازه طول و عرض.
|
screen
|
اين شئ در جاوااسکريپت مستقيماً با پنجره مرورگر
ارتباط برقرار مي کند. شئ window اولين شئ در سلسله مراتب DOM مي باشد.
مانند
تمام شئ هاي جاوااسکريپت اين شئ هم داراي خصوصيات و متدهايي است که توسط آنها مي توانيد
بعضي از فعاليتهاي يک مرورگر را کنترل کنيد. براي هر صفحه وب داخل مرورگر يک شئ window در نظر
گرفته مي شود، يعني اگر شما از يک فريم استفاده مي کنيد که سه صفحه وب را در خود
جاي داده پس سه شئ window براي هر کدام از آنها وجود
دارد.
window objects
اين شئ
داراي اشياء ديگري نيز مي باشد که به عنوان شئ هاي فرزند براي آن شناخته مي شوند.
اين اشياء عبارتند از:
navigator, frame, document,
location, history, screen
