عنوان : آموزش کامل طراحی سایت(متخصصین ایران) - درس هفت
متخصصین ایران طراحی سایت

بکارگیری و مدیریت اسکریپت ها

استفاده از اسکریپتهای نوشته شده به زبان java script توانمندیهای زیادی را به برنامه اضافه می کند. برای نمونه آمار افراد online, ساعت دیجیتال، منوهای متحرک و ... از افزونه های جاوا اسکریپت هستند. قبل از شروع لازم است یادآوری شود زبان Java Script را با زبان Java یکسان فرض نکنید، این دو هیچ ارتباطی به هم ندارند. در این بخش چگونگی استفاده از کدهای جاوا در وب سایت آموزش داده می شود. 

 

دانلود کدهای جاوا اسکریپت

کدهای جاوا همه جای وب سایت ها و بویژه وبلاگها هستند. نیازی به دوباره نویسی آنها نیست و به سادگی با یک جستجوی ساده هر نوع کدی قابل دستیابی است. برای نمونه به سایتجهان جاوا نیز رجوع کنید. 

نکته اسکریپت ها توانمندیهای زیادی دارند ولی عموما نیازی به آنها نیست! مطمئن باشید.

 

اسکریپت نویسی

مانند کدنویسی CSS جهت اسکریپت نویسی می توانید از اسکریپت نویسی داخلی یا خارجی استفاده کنید.

 

اسکریپت نویسی داخلی

برای اسکریپت نویسی داخلی باید کدها را در برچسب script وارد کنید. با این تفاوت که در اینجا برخی از اسکریپت ها باید در بخش head وارد شوند و برخی دیگر از اسکریپت ها را باید در بخش body وارد کنید.

قالب اسکریپت داخلی

 

اسکریپت نویسی خارجی

اسکریپت ها برخلاف دستورات css بسیار شلوغ و طولانی هستند. اگر می خواهید صفحات شما خلوت باشد یا از یک اسکریپت در چندین صفحه استفاده کنید باید از اسکریپت خارجی استفاده کنید. کدهای مورد نظر را در فایل متنی ساده با نامی مانند sample.js بوسیله برنامه notepad وارد و ذخیره کنید. پسوند فایل باید js باشد.

حالا برای پیوند اسکریپت به صفحه در بخش head یا body (به دستور موردنظر بستگی دارد) به js خارجی لینک دهید. بازهم به ابتدای بحث طراحی سایت بر می گردیم. فرض کنید مجموعه فایلهای سایت ما به صورت زیر است.

فرض کنید فایل js خارجی با نام fall.js در پوشه any ذخیره شده است. برای ارجاع به این فایل دستور زیر را واررد کنید:

 در تهیه اسکریپت خارجی نیازی به استفاده از برچسب script نیست و مستقیماً باید کدنویسی را انجام دهید.

 

تمرین 1: نمایش کادر پیام

با استفاده از اسکزیپت ساده زیر می توانید به هنگام بالا آمدن صفحه یک پیام به کاربر مخابره کنید. این کد را باید در قسمت body وارد کنید یا اگر آن را در یک js خارجی ذخیره کرده اید آنرا در بخش body فراخوانی کنید.

 

این ساده ترین کد قابل درج با جاوا است. کدهای پیچیده تر نیز با همین اصول قابل استفاده است.

 

تمرین 2: تهیه تصاویر rollover

یکی از قابلیت های جاوا اسکریپت که زیاد استفاده می شود تهیه تصاویر rollover‌است. یعنی تصاویری که با انتقال ماوس روی آنها شکل آن تصویر تغییر می کند. برای این منظور یا از اینترنت کدهای مربوط را به راحتی دانلود کنید و یا از نرم افزار dreamweaver فرمان زیر را اجرا کنید:

Insert/ Image objects/ Rollover image

در کادر ظاهر شده از تغییر دکمه های browse تصویر اصلی و تصویر جایگزین را انتخاب کنید. تنظیمات دیگر ساده است.

 

تمرین 3: تهیه نوار منوها

یکی دیگر از قابلیت های مورد اقبال جاوا اسکریپت است. کدهای طراحی منوهای متعدد و جذابی را به سادگی می توانید از اینترنت دانلود کنید یا از نرم افزار dreamweaver فرمان زیر را اجرا کنید:

Insert/ Image objects/ Navigation Bar

 

 

ویژگی onload

زمانیکه یک صفحه بارگذاری می شود اولین اتفاق صفحه رویداد onload است. این رویداد به عنوان یک ویژگی برای کلاس body تعریف شده است. شما می توانید با برنامه نویسی برای این ویژگی قبل از بالا آمدن سایت پیامی را به کاربر مخابره کنید. برای قبل از بالا آمدن صفحه یک تصویر را به کاربر نمایش می دهد. احتمالا دیده اید که برخی سایتها قبل از بالا آمدن پیامی مانند please wait را مخابره می کنند. آنها از همین ویژگی استفاده می کنند.

دستورات جاوا اسکریپت را بعضاً باید در این رویداد فراخوانی کرد. به کد زیر توجه کنید:

تابع init() که در کد بالا فراخوانی شده قبلا با دستورات جاوا اسکریپت نوشته شده است. برای نمونه یک تابع به صورت زیر کدنویسی می شود. 

نمونه اسکریپت های دیگر

 اسکریپت های زیر توسط سایت شهرآشوب نوشته نشده و هیچ تضمینی برای آنها وجود ندارد.

کد قطره شبنم 1: این اسکریپت را می توانید در هرجای صفحه قرار دهید. 

کد قطره شبنم 2: این اسکریپت را می توانید در هرجای صفحه قرار دهید.

کد پرواز پروانه: این اسکریپت را می توانید در هرجای صفحه قرار دهید. 

جلوگیری از نمایش popup

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




نظر شما درباره این مطلب:




مطالب مشابه

2

آموزش کامل طراحی سایت (متخصصین ایران)- درس نخست


متخصصین ایران طراحی سایت

اساس آموزش طراحی سایت ارائه شده در این بخش .....


آموزش کامل طراحی سایت (متخصصین ایران)- درس نخست                  (اطلاعات بیشتر)

4

آموزش کامل طراحی سایت (متخصصین ایران)- درس سه


متخصصین ایران طراحی سایت

مدیریت پیوندها: کار با HyperLink


آموزش کامل طراحی سایت (متخصصین ایران)- درس سه                  (اطلاعات بیشتر)

3

آموزش کامل طراحی سایت (متخصصین ایران)- درس دو


متخصصین ایران طراحی سایت

 

اصول درج متن

تابحال توانسته اید یک صفحه فارسی برای شروع کار تهیه کنید. حال برای نوشتن متن.....

 

 

 

 

 

 


آموزش کامل طراحی سایت (متخصصین ایران)- درس دو                  (اطلاعات بیشتر)

5

آموزش کامل طراحی سایت (متخصصین ایران)- درس چهار


متخصصین ایران طراحی سایت

معرفی تگ های متا

بدون شک وقتی اقدام به فراگیری طراحی سایت نموده اید آنقدر هوشمند...


آموزش کامل طراحی سایت (متخصصین ایران)- درس چهار                  (اطلاعات بیشتر)

6

آموزش کامل طراحی سایت(متخصصین ایران) - درس پنجم


متخصصین ایران طراحی سایت

طراحی جدول

به طور کلی از جدول برای طراحی فضای قالب وب...


آموزش کامل طراحی سایت(متخصصین ایران) - درس پنجم                  (اطلاعات بیشتر)

7

آموزش کامل طراحی سایت(متخصصین ایران) - درس شش


متخصصین ایران طراحی سایت

آموزش CSS

واژه CSS مخفف Cascade Style Sheets جهت طراحی انواع ...


آموزش کامل طراحی سایت(متخصصین ایران) - درس شش                  (اطلاعات بیشتر)