نحوه استفاده از کدهای جاوا اسکرپت در صفحهبه طور کلی به سه طریق می توانیم از جاوا اسکرپت در یک صفحه استفاده کنیم:
به یاد داشته باشید که می توانید از همه روشهای بالا به طور همزمان برای وارد کردن جاوا اسکرپت در صفحه استفاده کنید.
در دو روش اول کدهای جاوا اسکرپت به طور مستقیم وارد صفحه HTML می شوند. برای وارد کردن جاوا اسکرپت در این دو روش از تگ استفاده می شود. تمامی کدهای جاوا اسکرپتی که می خواهید به طور مستقیم وارد صفحه کنید باید در تگ قرار داشته باشند وگرنه مرورگر به جای به کار بردن آنها را به صورت متن در صفحه نمایش می دهد. معمولاً کدهای جاوا اسکرپت با ساختار زیر وارد صفحه می شوند :
در تگ بالا برای مشخص کردن نوع موتور اسکرپتی که مرورگر باید برای تفسیر کردن کد استفاده کند از دو شناسه language و type استفاده می کنیم.
در هنگام باز شدن یک صفحه وب عناصر موجود در بخش <head> قبل از سایر اجزای صفحه لود می شوند. معمولاً هنگامی کدهای جاوا اسکرپت در بخش <head> متن استفاده می شود که بخواهیم مطمئن شویم به هنگام نیاز کدهای ما لود شده اند.
در اینجا یک مثال از استفاده از جاوا اسکرپت در <head> را مشاهده می کنید:
برای مشاهده صفحه ساخته شده با کد بالا اینجا را کلیک کنید.
این امکان وجود دارد که کدهای جاوا اسکرپت را در قسمت <body> صفحه وارد کنیم. در این صورت لود شدن آنها تا هنگامی که آن بخش از صفحه لود شود به عقب می افتد و اگر صفحه به صورت کامل باز نشود ممکن است اسکرپت ما کار نکند. مثال زیر یک نمونه از وارد کردن جاوا اسکرپت در <body> صفحه HTML را نشان می دهد:
<html dir="rtl">
<head>
<title>جاوا اسکرپت در بدنه صفحه</title>
</head>
<body>
< language="java" type="text/java">
document.write("<br><h1 align="center">این متن توسط جاوا اسکرپت نوشته شده است.</h1>");
</>
</body>
</html>
برای مشاهده صفحه مربوط به کد بالا اینجا را کلیک کنید
گاهی اوقات ممکن است بخواهید از یک سری از کدهای جاوا اسکرپت برای چندین صفحه استفاده کنید و نمی خواهید همه آنها را به صورت جداگانه در هر صفحه بنویسید. در این مواقع می توانید کدهای مورد نظر خود را در یک فایل متنی وارد کنید و آنرا با پسوند js. ذخیره کنید. در هر صفحه ای که بخواهید از این فایل استفاده کنید کافی است آنرا در آن صفحه فرا خوانی کنید. ( به یاد داشته باشید که در این فایلهای خارجی نباید از تگهای <> که مخصوص HTML هستند استفاده کنید )
برای فرا خوانی این فایلها به صفحه از همان تگ که در موارد قبل استفاده می کردیم کمک می گیریم با این تفاوت که در اینجا به آن یک شناسه src که آدرس اسکرپت ما به عنوان مقدار آن قرار گرفته است اضافه می کنیم.
برای مثال کد جاوا اسکرپت زیر را در نظر بگیرید :
ما این کد را در فایلی با نام external.js در همان پوشه ای که صفحه ما قرار دارد ذخیره کرده ایم. حالا با وارد کردن کد زیر در صفحه می توانیم فایل بالا را فراخوانی کنیم:
برای مشاهده صفحه ای که فایل ذخیره شده ما را فرا خوانی می کند اینجا را کلیک کنید.
با استفاده از کلاس می توانیم برای یک تگ HTML استایلهای متفاوتی را تعریف کنیم. برای نمونه فرض کنیم می خواهیم در صفحه دو نوع پاراگراف داشته باشیم: یکی با متن مشکی و دیگری با متن قرمز. برای مشخص کردن این دو نوع پاراگراف می توانیم از سلکتور کلاس استفاده کنیم. ابتدا استایل را به صورت زیر می نویسیم:
در مرحله بعد باید برای هر پاراگرافی که می خواهیم به رنگ مشکی باشد از شناسه "class="black در تگ <p> استفاده کنیم و برای پاراگراف قرمز از شناسه "class="red. البته نام کلاسها اختیاری است ولی بهتر است آنها را طوری انتخاب کنید که مفهوم داشته باشند تا وقتی که حجم استایل شما بیشتر شد به گنگ نباشد. در مثال زیر می توانید کد مربوط به نوشتن دو پاراگراف بالا را در متن HTML ملاحظه کنید:
نکته : شما می توانید بیش از یک کلاس برای یک تگ HTML تعریف کنید اما برای این کار نباید دو بار از شناسه class استفاده کرد. بلکه باید در یک شناسه class نام دو کلاس مورد نظر را با یک فاصله بین آنها وارد کرد. برای مثال برای پاراگراف زیر از دو کلاس فرضی red و center استفاده شده است:
در نوشتن استایل می توان از نوشتن نام تگ در سلکتور کلاس چشم پوشی کرد. در این صورت ویژگیهای تعریف شده در آن کلاس بر هر تگ HTML که از کلاس مربوطه در شناسه class آن استفاده شده باشد اثر می گذارد. برای مثال در کلاس زیر ویژگی وسط چین را تعریف می کنیم و از نام تگ در سلکتور کلاس استفاده نمی کنیم:
اکنون برای هر تگی که احتیاج به وسط چین داشته باشد می توانیم از کلاس بالا استفاده کنیم. به چند نمونه در زیر توجه کنید:
تذکر : هیچ وقت نام کلاس را با یک عدد شروع نکنید چون در این صورت مرورگرهای Mozilla و Firefox نمی توانند از آن کلاس استفاده کنند.
ما می توانیم از سلکتور کلاس برای تگی که حاوی شناسه class است استفاده کنیم که در قسمتهای قبلی در این مورد توضیح داده شد. علاوه بر این می توانیم از ویژگیهای تعریف شده در سلکتور کلاس برای تگهایی که در یک تگ محتوی شناسه class قرار دارند نیز استفاده کنیم. مثلا برای لینکهایی که در یک DIV قرار دارند و برای DIV کلاس تعریف شده است. برای این کار در نوشتن استایل مربوطه باید پس از نقطه که مشخص کننده سلکتور کلاس است نام کلاس را وارد کنیم و پس از وارد کردن یک فضای خالی نام تگی که می خواهیم ویژگیهای بر روی آن اعمال شود. به مثال زیر توجه کنید:
در این مثال از استایل زیر در استفاده می کنیم:
کد HTML زیر برای این مثال مورد استفاده قرار می گیرد:
می توانید نتیجه را در اینجا مشاهده کنید:
لینک آزمایشی شماره 2همانطور که در مثال بالا می بینید خواص لینک آزمایشی شماره 1 تحت تأثیر استایل مورد استفاده برای تگ DIV قرار دارد ولی لینک آزمایشی شماره 2 مانند سایر لینکهای خارج از DIV نمایش داده می شود.
همانطور که می دانید با وجود اینکه برخی از عناصر در صفحه با هم تفاوت دارند، از یک تگ HTML برای ایجاد آنها استفاده می شود.برای مثال برخی از این عناصر را که از تگ <input> در به وجود آوردن آنها استفاده می شود می توانید در زیر مشاهده کنید:
حالا فرض کنید ما در یک صفحه از چند نمونه از عناصر بالا استفاده کرده ایم ولی فقط می خواهیم ویژگیهای یکی از آنها را تغییر دهیم. دو روش برای این کار وجود دارد: یکی استفاده از کلاس است که در این روش اگر تعداد زیادی از عنصر مورد نظر در صفحه وجود داشته باشد باید به همان تعداد از شناسه class در تگهای آنها استفاده کنیم و ممکن است این کار باعث افزایش حجم صفحه یا موجب سختی در نوشتن کد شود. روش دوم تعریف کردن سلکتور input برای عناصر مورد نظر است که به صورت زیر انجام می گیرد:
فرض کنید می خواهیم فقط عرض کادرهای متنی را در صفحه تغییر دهیم. در صورتی که در استایل از سلکتور input به تنهایی استفاده کنیم عرض همه چک باکسها ، دکمه ارسال، دکمه های رادیو و سایر عناصری که از تگ <input> استفاده کرده اند نیز تغییر می کند. برای انجام این کار می توانید سلکتور را به صورت زیر تعریف کنیم:
کد استایلی که در بالا نوشتیم فقط بر روی کادر های متنی که در آنها از شناسه "type="text استفاده شده است اثر می گذارد.
البته این روش ممکن است در مرورگر Internet Explorer پشتیبانی نشود اما مرورگرهای Firefox و Opera از آن پشتیبانی می کنند.
روش دیگری که برای تعریف استایل وجود دارد استفاده از id است. شناسه id احتمالاً در آینده جایگزین شناسه name در تگهای HTML می شود بنا بر این در هرصفحه نباید بیش از یک بار از هر ID استفاده شود. اگر بیش از یک بار از یک id استفاده شود کارایی صفحه تغییری نمی کند ولی صفحه اعتبار خود را از دست می دهد. سلکتور id با علامت # مشخص می شود. با استایل زیر همه عناصر که شناسه "id="border دارند با کادری سبز رنگ نمایش داده می شوند:
برای مثال ما از استایل بالا در این صفحه استفاده کرده ایم. حالا کد زیر را وارد صفحه می کنیم:
در قسمت زیر می توانید نتیجه کد بالا را مشاهده کنید:
همانطور که کلاس را می توانستیم برای یک عنصر مشخص تعریف کنیم در مورد id نیز می توانیم این کار را انجام دهیم. به استایل زیر توجه کنید:
استایل بالا فقط روی پاراگرافی که شناسه "id="green در آن به کا رفته اثر می گذارد.
نکته : هرگز نام یک id را با یک عدد آغاز نکنید چون در این صورت مرورگرهای Mozilla و Firefox نمی توانند از آن استفاده کنند
در اینجا می خواهیم به ساختار شناسه ها یا همان تگها (tag) در HTML بپردازیم. یک تگ همیشه با علامت کوچکتر ریاضی یعنی این علامت > آغاز می شود و با علامت بزرگتر < به پایان می رسد. مثلاً تگی که باعث ایجاد زیرخط کلمات می شود اینطور نوشته می شود: <U> این علامت را قبل از متنی که می خواهیم زیر آن خط کشیده شود قرار می دهیم. به این تگ ، تگ ابتدایی (Opening tag) می گویند، که عملیاتی را که شما می خواهید آغاز کنید شروع می کند. به منظور پایان دادن به زیرخط باید از یک تگ پایانی استفاده کنید. یک تگ پایانی با این علامت شروع می شود: /> بقیه تگ مانند تگ ابتدایی می باشد. برای درک بهتر این مطلب به مثال زیر توجه کنید:
اگر بخواهید متن بالا را با زیرخط در مرورگر خود ببینید باید آنرا مطابق خط روبرو در ویرایشگر متن خود بنویسید:
نتیجه را به این صورت می بینید:
Tags and their position
در HTML همه تگها به یک تگ پایانی نیاز ندارند. برای مثال تگی که برای وارد کردن عکس استفاده می شود از این قبیل تگهاست، که به این صورت می باشد:
البته بعداً در مورد این تگ توضیح خواهیم داد در اینجا فقط برای مثال این تگ را آوردیم. موارد دیگری هم با این وضعیت وجود دارند مثلاً <br> که برای رفتن به خط بعدی استفاده می شود، <hr> که برای ایجاد یک خط افقی به کار می رود و <p> که برای رفتن به پاراگراف بعدی استفاده می شود.
در ضمن نیاز نیست که حتماً تگها با حروف بزرگ نوشته شوند. مثلاً <P> همان <p> است. البته در نسخه های جدیدتر HTML توصیه می شود کدهای HTML با حروف کوچک نوشته در XHTML هم نوشتن کدها با حروف کوچک الزامی است. فضای خالی هم بین تگها تأثیری ندارد. مثلاً :
کد بالا همان نتیجه ای را می دهد که کد زیر دارد:
به این طریق هم اگر نوشته شود فرقی نمی کند:
قالب پایه ای یک فایل HTML مانند زیر است. ببینید می توانید کاری را که تگهای این کد انجام می دهند حدس بزنید؟ البته همه آنها را بعداً توضیح می دهیم.
برای درک بهتر این قسمت سعی کنید تگها را به صورت جفتی در نظر بگیرید (از جایی که باز می شوند تا جایی که بسته می شوند) اولین تگ <html> است که علامت شروع یک متن HTML است و تگ پایانی آن <html/> است که همانطور که ممکن است حدس زده باشید نشانه پایان متن HTML است. هر چیزی در HTML باید بین این دو تگ قرار گیرد. مانند متن، دیگر تگها، عکسها و... چون این دو تگ نشان دهنده آغاز و پایان صفحه شما هستند.
تگ بعدی <head> است. این تگ مشخص کننده بخشی است که شما باید عنوان صفحه، کلمات کلیدی، و دیگر توضیحات خود برای این صفحه را در آن قرار دهید. این بخش با <head/> به پایان می رسد. در مثال بالا تنها قسمت HEAD عنوان صفحه بود که با TITLE مشخص می شود.
تگ <title> به شما اجازه می دهد برای صفحه خود یک عنوان برگزینید. این قسمت مورد استفاده موتورهای جستجو قرار می گیرد و همان متنی است که به هنگام مشاهده صفحه در نوار عنوان مرورگر نشان داده می شود. تا هنگامی که این تگ در قسمت BODY قرار نگیرد در متن شما نشان داده نمی شود. برای پایان دادن به تگ عنوان از این تگ استفاده می شود: <title/> در مثال بالا عنوانی که برای صفحه نشان داده می شود قالب اصلی HTML است.
تگ <body> بخشی را آغاز می کند که در صفحه مرورگر شما به نمایش در می آید. این قسمت جایی است که ما باید کار اصلی خود را در آن انجام دهیم. برای پایان دادن به این تگ از <body/> استفاده می کنیم. در مثال بالا متنی که در صفحه مرورگر دیده می شود به صورت زیر است (البته در اینجا برای نوشته زیر رنگ و فونت نیز انتخاب شده که در قسمتهای بعد به آنها خواهیم پرداخت) :
هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است
چیزی که در اینجا می بینیم متنی است که به صورت ساده نوشته شده و در طرف چپ صفحه قرار دارد.
مرورگر ها به صورت پیش فرض آدرس و حتی خود صفحاتی را که کاربر مشاهده می کند ذخیره می کنند. این آدرسها به ترتیبی که کاربر آنها را مشاهده کرده است در تاریخچه (history) مرورگر ثبت می شوند و دکمه های Back و Forward پنجره مرورگر بر اساس این تاریخچه کار می کنند. با استفاده از جاوا اسکرپت می توانیم به این تاریخچه دسترسی داشته باشیم و با کمک آن مسیر کاربران را هدایت کنیم.
ما برای کار با تاریخچه مرورگر در اینجا از دکمه های HTML استفاده می کنیم که با کمک رویداد onclick در هنگام کلیک کردن روی این دکمه ها دستورات مورد نظر ما اجرا خواهند شد. در اینجا می توانید کد HTML مربوط به ساخت این دکمه ها را مشاهده کنید (البته مقدار مربوط به شناسه onclick مربوط به دستورات جاوا اسکرپت است که بعداً وارد خواهد شد) :
برای آشنایی بیشتر با رویداد های HTML می توانید از صفحه رویدادهای مربوط به صفحه کلید و ماوس در HTML استفاده کنید. (لینک در صفحه جدید باز خواهد شد)
دستورات مختلفی برای کار با تاریخچه مرورگر وجود دارد که همه آنها از شیء history استفاده می کنند. در ادامه می توانید تعدادی از این دستورات را که با بیشتر مرورگرها کار می کنند مشاهده کنید
از این فرمان می توانید جهت هدایت کاربران به صفحه ای که قبل از صفحه کنونی در پنجره مرورگر مشاهد کرده اند استفاده کنید. این دستور دقیقاً مانند دکمه Back در پنجره مرورگر عمل می کند و در صورتی که صفحه کنونی اولین صفحه ای باشد که از زمان باز شدن پنجره نمایش داده شده باشد این دستور کاربردی ندارد. برای مشاهده یک نمونه از کاربرد این دستور می توانید لینک را کلیک کنید :
برای مشاهده کاربرد دستور ()history.back اینجا را کلیک کنید
در اینجا می توانید کئ مورد استفاده در مثال بالا را مشاهده کنید :
در صورتی که بازدید کننده قبلاً از دکمه Back در مرورگر خود استفاده کرده باشد یا با استفاده از دستور
()history.back به صفحه قبلی باز گشته باشد می توانیم از دستور ()history.forward برای هدایت بازدید کننده به صفحه ای که پس از صفحه کنونی باز کرده است استفاده کنیم. این دستور کاربردی مشابه دکمه Forward در پنجره مرورگر دارد و کاربرد آن عکس کاربرد ()history.back است.
دکمه زیر با استفاده از دستور ()history.forward شما را به صفحه ای که برای مثال مربوط به بازگشت به صفحه قبلی مشاهده کرده اید هدایت می کند :
می توانید کد استفاده شده در ساخت دکمه بالا را در اینجا مشاهده کنید :
با استفاده از دستورهای ()history.back و ()history.forward فقط امکان این وجود دارد که کاربران را یک صفحه به عقب یا جلو هدایت کنیم. اگر بخواهیم بازدید کننده را به چندین صفحه عقب یا جلو هدایت کنیم باید از دستور ()history.go استفاده کنیم.
اگر برای دستور ()history.go از مقداری مثبت استفاده شود کاربر به همان تعداد صفحه در تاریخچه مرورگر به جلو هدایت می شود. به کد زیر توجه کنید :
کد بالا دکمه ای را می سازد که کلیک کردن بر روی آن همان کاری را انجام می دهد که سه بار فشار دادن دکمه Forward در پنجره مرورگر انجام می دهد.
در صورتی که دستور به صورت (1)history.go نوشته شود مانند دستور ()history.forward عمل می کند.
در صورتی که این دستور به صورت (0)history.go نوشته شود باعث باز بارگذاری مجدد همان صفحه خواهد شد. برای مثال به کد زیر و دکمه ساخته شده با آن توجه کنید :
این هم دکمه ساخته شده :
اگر بخواهیم کاربر را چند صفحه در تاریخچه مرورگر به عقب هدایت کنیم می توانیم برای دستور ()history.go از مقادیر منفی استفاده کنیم. برای مثال به کد زیر توجه کنید :
این کد دکمه ای را می سازد که وقتی کاربر آنرا کلیک کند به سومین صفحه ای که قبل از صفحه کنونی در پنجره مرورگر بازدید کرده است هداین می شود. کاربرد این دکمه در اینجا مشابه سه بار فشار دادن دکمه Back در پنجره مرورگر است.
با استفاده از دستور history.lentgh می توانید تعداد صفحاتی را که در تاریخچه مرورگر وجود دارد پیدا کنید. یعنی با استفاده از این دستور می توانیم به تعداد صفحاتی که از زمان باز شدن پنجره مرورگر در آن نمایش داده شده است پی ببریم. برای مثال می توانید با کلیک کردن بر روی لینک زیر تعداد صفحات ذخیره شده در تایریخچه پنجره مرورگر خود را پیدا کنید :
نمایش تعداد صفحات موجود در تاریخچه مرورگر
در اینجا می توانید کد مورد استفاده در ساخت لینک بالا را مشاهده کنید :
ویژگیهای مربوط به متن در CSSدر این قسمت به ادامه ویژگیهایی که بر روی متن ها اثر می گذارند می پردازیم.
این ویژگی مشخص می کند که متن با استفاده از حروف بزرگ نوشته شود یا حروف کوچک و یا به صورت معمولی البته بدون آنکه در حروفی که تایپ شده است تغییری به وجود آورید. با این روش اگر خواستید قسمتی از متن مثلاً برای تأکید بیشتر با حروف بزرگ مشاهده شود نیازی نیست که دوباره آن قسمت را از اول تایپ کنید. البته این ویژگی در زبان فارسی چندان استفاده ای ندارد ولی در زبانهایی مثل انگلیسی می توانید آنرا به کار ببرید.
به یک مثال در مورد این ویژگی توجه کنید:
این هم نتیجه:
همانطور که مشاهده می کنید بدون استفاده از حروف بزرگ در نوشتن کد، متن ما با حروف بزرگ نمایش داده می شود.
این ویژگی چند مقدار دارد که در اینجا مشاهده می کنید:
متن به صورت زیر نمایش داده می شود:
این ویژگی به ما امکان می دهد تا ارتفاع سطر ها را مشخص کنیم. این ارتفاع می تواند به صورت درصد یا در مقیاس پیکسل باشد و فاصله بین سطرها را مشخص می کند.
برای مثال اگر بخواهیم سطرها از هم 50 پیکسل فاصله داشته باشند می توانیم به صورت زیر عمل کنیم:
نتیجه به صورت زیر خواهد بود:
این ویژگی مقدار تو رفتگی متن را در سطر اول هر قسمت (مثلاً سطر اول هر پاراگراف) مشخص می کند. این مقدار می تواند بر حسب پیکسل یا در صد باشد.
در مثال زیر این مقدار تو رفتگی را 30 پیکسل در نظر می گیریم:
این هم نتیجه:
