نمایش پیام صفحه در حال بارگذاری با جاوا اسکریپت

همان طور که می دانیم، از جاوا اسکریپت (JavaScript) در وب، در موارد زیادی می توان استفاده نمود، ویژگی های خوب این زبان اسکریپت نویسی و مهم تر از همه، ویژگی سمت کاربر بودن آن، این امکان را به ما می دهد تا در موقعیت های متفاوت، بر نحوه پردازش صفحه در مرورگر کنترل داشته باشیم، یکی از این موقعیت ها زمانی است که صفحه سایت یا وبلاگ در حال بارگذاری است، بدین منظور در جاوا اسکریپت رویدادی به نام onLoad وجود دارد که دقیقا با همین هدف، یعنی اجرای کدهای جاوا اسکریپت در زمانی که صفحه بارگذاری می شود، تعریف شده است، از این رو در این مطلب می خواهیم با استفاده از این امکان، با نحوه نمایش پیام و تصویر "صفحه در حال بارگذاری است... لطفا کمی صبر نمائید...!" آشنا شویم.

کد و آموزش نمایش پیام صفحه در حال بارگذاری

برای ایجاد یک پیام "صفحه در حال بارگذاری است..." کافی است از نمونه کد زیر در قالب سایت یا وبلاگ خود استفاده نمائیم؛ به این صورت پیش از اینکه صفحه به طور کامل در مرورگر بارگذاری شود، پیامی به کاربر نشان داده می شود و بعد از بارگذاری کامل، پیام محو می گردد، در این نمونه کد، سعی شده با حداقل کدنویسی، به هدف خود دست یابیم، همچنین برای سازگاری با مرورگرهای مختلف، در تابع جاوا اسکریپتی خود از خاصیت های متفاوت استفاده کرده ایم

نحوه ایجاد دکمه رفتن به بالای صفحه (go to top) با جاوا اسکریپت

یکی از کاربردهای جاوا اسکریپت (javascript) در صفحات وب، امکان ایجاد دکمه های کنترلی برای راحتی هر چه بیشتر کاربران، مخصوصا در مرور صفحاتی است که ارتفاع زیادی دارند، از طرفی برخی از طراحان وب علاقمندند که به جهت زیباتر شدن قالبهایشان از این نوع تکنیک ها استفاده نمایند؛ اگر چه برخی ترجیح می دهند از توابع و کتابخانه های جی کئوری (jquery) به جای توابع ساده جاوا اسکریپت بدین منظور استفاده کنند، اما متاسفانه معمولا حاصل کار ایجاد صفحاتی حجیم و در نهایت کندی بارگذاری سایت یا وبلاگ و افزایش استفاده از پهنای باند سرور است؛ به هر صورت در این مطلب قصد داریم انجام این کار را به چند روش آموزش دهیم.

ایجاد لینک ساده رفتن به بالای صفحه با جاوا اسکریپت:

مایش پیام در بالا یا پائین صفحات وبلاگ و سایت با جاوا اسکریپت

در این مطلب قصد داریم نحوه قرار دادن پیامی شناور در بالا (top bar) یا پائین (bottom bar) صفحات وب (وبلاگ یا سایت) را آموزش دهیم، البته راههای زیادی برای انجام این کار وجود دارد، مثلا استفاده از کتابخانه های جی کئوری یا پلاگین های جاوا اسکریپتی، ولی اکثرا یا حجم زیادی دارند یا اینکه با برخی مرورگرها سازگار نیستند؛ به همین دلیل سعی کرده ایم کدی را قرار دهیم که در عین سبکی و حجم پائین، قابلیت سازگاری و انعطاف پذیری خوبی نیز داشته باشد.

کد جاوا اسکریپت و css نمایش پیام

کنترل و تغییر اندازه فونت صفحه با جاوا اسکریپت

یکی از قابلیت های خوب جاوا اسکریپت (JavaScript)، کنترل عناصر صفحات وب است که بعضا کاربرد آن در این خصوص کامل محسوس به نظر می رسد، مثلا اگر بخواهید به کاربران خود امکان تغییر رنگ پس زمینه سایت یا وبلاگتان را بدهید یا به آنهایی که ممکن است دیدن فونت های معمولی، برایشان سخت باشد، قابلیت تغییر اندازه فونت را بدهید، بهترین گزینه انتخاب جاوا اسکریپت است، چرا که در عین کم حجم بودن، قابلیت سازگاری خوبی نیز دارد (البته این موضوع تا حدود زیادی به نحوه کدنویسی نیز بستگی دارد)؛ به همین دلیل در این مطلب می خواهیم ببینیم که چگونه می توان با این زبان برنامه نویسی، قابلیتی ایجاد کرد که به کمک آن کاربران بتوانند به راحتی مطالب را با اندازه مورد نظر خود ببینند.

ساخت منوی آکاردئونی با جاوا اسکریپت و CSS

ساخت منوها و باکس های آکاردئونی (accordion) یا به اصطلاح جمع شونده، یکی از قابلیت هایی است که جاوا اسکریپت (JavaScript) و کتابخانه های زیرمجموعه آن مانند جی کئوری (jQuery) در اختیار برنامه نویسان و طراحان وب قرار می دهند، قابلیت تعاملی و زیبایی که این نوع منوها به رابط کاربری (Interface) سایت یا وبلاگ می دهد باعث می شود که خیلی از مدیران وب گرایش به سمت استفاده از آن داشته باشند، البته در این مورد باید همیشه به مقوله سازگاری، سرعت و سبکی صفحات دقت نمود، چرا که هرچند می توانیم جلوه های خیلی خاصی در صفحات وب ایجاد کنیم، اما باید توجه داشت که این جلوه ها سرعت بارگذاری و قابلیت سازگاری سایت یا وبلاگمان را در مرورگرها و سیستم های مختلف تحت تاثیر قرار ندهند، از این رو است که همیشه استفاده از کدهای کم حجم با بیشترین سازگاری توصیه می شود.

ساخت افکت رنگی با جاوا اسکریپت (Javascript)

در این مطلب می خواهیم نحوه ایجاد افکت های رنگی زیبا و در عین حال سبک و کم حجم را با برنامه نویسی به زبان جاوا اسکریپت آموزش دهیم، افکت هایی که به صورت محو و آشکار شدن رنگ و معمولا تحت عنوان Fade یا (fadein و fadeout) شناخته می شوند و بین کاربران محبوبیت زیادی نیز دارند، چرا که جلوه ی خاصی به سایت یا وبلاگشان می دهد، البته برخی نیز ترجیح می دهند از توابع موجود در کتابخانه های جاوا اسکریپتی (مثل جی کئوری jQuery و موارد مشابه) بدین منظور استفاده کنند که این کار لااقل برای مخاطبان با سرعت و کیفیت اینترنت پائین یک عیب عمده محسوب می شود، از طرفی وقتی می توانیم در منابع وب صرفه جویی کنیم و صفحاتی با حداقل حجم داشته باشیم، لزومی ندارد رو به فایل ها و روش های حجیم تر بیاوریم، به هر حال اگر مشتاق هستید در کدنویسی های خود، کمی از افکت های رنگی سبک و زیبا استفاده کنید، با ادامه این آموزش همراه ما باشید.

چگونه لوگوی حمایتی برای نمایش در سایت یا وبلاگ بسازیم؟

حتما تا به حال در وبلاگ ها و سایت های مختلف بنرها و لوگوهای تبلیغاتی یا حمایتی را دیده اید که معمولا به شکل مثلثی در قسمت بالا یا پائین و در جهت چپ یا راست صفحه نمایش داده می شوند، یا به عنوان مثال، مدیران سایت ها و وبلاگ ها برای کمک به افزایش محبوبیت و داشتن یک تعامل دوسویه با کاربرانشان، لوگوهای کوچکی به شکل مربع یا مستطیل به همراه کد می سازند تا کاربران با درج آن در قالب سایت یا وبلاگشان، از آنها حمایت کنند، در این مطلب می خواهیم به صورت ساده و روان نحوه ساخت و نمایش این گونه لوگوها (چه به صورت مثلثی، مبتنی بر جاوا اسکریپت و css و چه به صورت لوگوهای ثابت، مبتنی بر تگ های html، به همراه باکس نمایش کد) را آموزش دهیم تا دوستانی که مایل به ایجاد و استفاده از این نوع لوگوهای شخصی هستند بتوانند از آن بهره ببرند، پس بدین منظور با ادامه آموزش همراه ما باشید.

ایجاد لوگوی حمایتی برای سایت یا وبلاگ در فتوشاپ و html

ایجاد باکس جمع شونده با جاوا اسکریپت و دریم ویور

در این مطلب قصد داریم آموزش ایجاد پنلی جمع شونده (CollapsiblePanel) را به کمک جاوا اسکریپت (Javascript) و نرم افزار فوق العاده دریم ویور (Dreamweaver) ارائه کنیم؛ روش های زیادی برای ایجاد جلوه های ویژه و انعطاف پذیر در صفحات وب وجود دارد، از جمله استفاده از کتابخانه های جی کوئری (jquery)، موتولز(mootools)، فایل های فلش (flash) و... اما حرفه ای تر ها در وب، همیشه به دنبال کم حجم ترین و در عین حال سازگارترین کدها هستند! از این رو کدی که در این مطلب قصد معرفی آن را داریم در عین سبکی (کم حجمی) از قابلیت سازگاری خوبی با مرورگرهای استاندارد برخوردار است و در کنار کدهای جاوا اسکریپت قابلیت ایجاد تعییرات سفارشی از طریق ویرایش فایل css نیز وجود دارد که می توانید بر اساس سلیقه خودتان آن را تنظیم کنید.

استفاده از قابلیت Spry در دریم ویور

برای ایجاد این باکس یا پنل از قابلیت Spry در نرم افزار معروف و قدرتمند دریم ویور (Dreamweaver) استفاده کرده ایم با این تفاوت که موارد اضافه و غیر ضروری را جهت کم حجم کردن کد، حذف کرده ایم، نمای کلی کد ما به شکل زیر است:

اعتبار سنجی فرم های وب با جاوا اسکریپت

یکی از موارد کاربردی استفاده از جاوا اسکریپت (javascript) در صفحات وب، اجرای توابع در هنگام کار با عناصر فرم های وب در سمت کاربر (مرورگر) است، به فرض وقتی کاربر در حال تکمیل اطلاعاتی در یک فیلد می باشد، می توان همزمان یا بعد از اینکه بر روی دکمه ارسال کلیک نمود، با اجرای یک رویداد و فراخوانی توابع جاوا اسکریپتی، از معتبر بودن اطلاعات تکمیل شده تا حدود زیادی اطمینان حاصل کرد و در صورت غیر معتبر بودن مقادیر، به شیوه های مختلف کاربر را جهت تکمیل موارد مورد نیاز راهنمایی نمود، از این رو در این آموزش هدف این است که چند روش کاربردی و در عین حال خلاقانه اعتبار سنجی فرم های وب با جاوا اسکریپت را با هم بررسی کنیم.

منظور از اعتبار سنجی چیست؟

قبل از پرداختن به ادامه آموزش، ذکر این نکته لازم است که منظور از اعتبار سنجی در فرم های وب، یعنی بررسی معتبر بودن اطلاعاتی که کاربر در آنها وارد کرده است با مقادیر مورد انتظار ما، یا به فرض عدم اجازه ارسال فرم های خالی، به طور مثال هنگامی که کاربر بدون تکمیل فیلدهای مورد نیاز و ضروری، قصد ارسال فرم را دارد، پیام هشداری به او نشان داده شود، یا اگر در فیلدی ایمیل خود را وارد کرده و این ایمیل سهوا یا عمدا بدون علامت @ درج شده باشد، این موضوع قبل از ارسال فرم، به اطلاع او برسد، البته اعتبار سنجی در وب می تواند به طور کلی در دو مرحله صورت گیرد، در سمت کاربر (در مرورگر) و همچنین در سمت سرور (با برنامه نویسی سمت سرور مثل php ,asp و...) ترکیبی از این روش ها نیز با استفاده از فناوری آژاکس (ajax) امکان پذیر است که در این رابطه پیش تر در بخش آموزش های  آژاکس (ajax) صحبت کرده ایم.

استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP

همان طور که می دانیم، جاوا اسکریپت (JavaScript) به عنوان یک زبان اسکریپت نویسی سمت کاربر و قابل اجرا در مرورگر، به خودی خود فواید و کاربردهای زیادی در صفحات وب دارد و تقریبا تمام برنامه نویسان و توسعه دهنده گان از آن استفاده می کنند، از این گذشته مواردی پیش می آید که بخواهیم از قدرت و قابلیت های آن برای نمایش محتوای داینامیک و به طور خاص در تعامل و ترکیب با PHP استفاده کنیم، این شیوه یکی از معمول ترین روش هایی است که بیشتر سایت های خدمات دهنده در زمینه ابزارهای وبلاگ نویسی برای کوتاه کردن کدهای نهایی و خیلی فواید دیگر از آن استفاده می کنند، از این رو و به جهت اینکه پرسش های زیادی از طرف کاربران در این خصوص مطرح می شود، قصد داریم این آموزش را به نحوه استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP اختصاص دهیم.

هدف از ترکیب JavaScript و PHP