رفع غلط های املایی سایت با Firefox

در طراحی یک سایت موفق نداشتن غلط املایی در میان حروف خیلی مهم است. تا جایی که ممکنه باعث بشه خواننده رو از وبسایت زده کنه.

در این روشی که معرفی می کنم هیچ کاری لازم نیست انجام بدید فقط کد زیر رو در نوار آدرس سایتتون وارد کنید. توجه کنید که مرورگر باید Firefox باشه (روی opera 10 امتحان کردم و جواب داد):

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0


توجه کنید که این کد یک خط هست و به خاطر اینکه در یک خط جا نشده اینطوری نشون داده می شه. با این کار صفحه به طور کامل قابل ویرایش خواهد شد و زیر خطاهای املایی خط کشیده خواهد شد. با کلیک روی این خطاها می تونید لیست عبارات صحیح رو مشاهده کنید.

Firefox is spell checking a website

در حقیقت این کد تمام صفحه رو در حالت ویرایش قرار میده، در این صورت هست که فایرفاکس و مرورگر های جدید اقدام به یافتم غلط های املایی می کنند.

نکته: برای اینکه این غلط یابی برای فارسی درست کار کنه باید دیکشنری فارسی فایرفاکس رو نصب کنید. اینجا.

این نکته رو مدتی بود که دیده بودم، و اخیرا لازمم شد دنبالش گشتم و اینجا هم خواستم که شما هم استفاده کنید. این هم وبلاگ منبع.

Firebug 1.4

امروز فایرباگ نسخه 1.4 نهایی منتشر شد. از این نسخه 11 بتا منتشر شده بود.

از جمله ویژگی های این نسخه می توان به تغییر ظاهر آن و افزایش کارایی و همچنین غیر فعال بودن کامل در صورت عدم استفاده ذکر کرد. همچنین تعدادی ویزگی قابل توجه به بخش اشکال زدایی جاوا اسکریپت اضافه شده است.

بخش Net هم اطلاعات مختلف را در قالب های مناسبتری نمایش می دهد. همچنین سعی شده با افزودن کلیدهای میانبر کاربری این افزونه قدرتمند هرچی سریعتر شود.

لیست کلیه تغییرات را در اینجا مطالعه کنید. (برای ایران مسدود است)

دریافت از صفحه Addons

در صورتی که قبلا این افزونه را نصب کرده اید حتما باید فایرفاکس وجود نسخه جدید را به شما اطلاع داده باشد.

نکته: برای استفاده از این نسخه باید حتما از فایرفاکس 3 به بالا استفاده کنید.

افزونه فایرفاکس: تشخیص تغییرات DOM و CSS در صفحات وب

FireDiff یک افزونه جدید برای فایرفاکس است که به افزونه Firebug اضافه می شود.

این افزونه این امکان را فراهم می کنه که تمامی تغییراتی که توسط جاوا اسکریپت به DOM صفحه و یا CSS آن اعمال می شود را ثبت نمابد.

این افزونه برای کسانی که در حال برنامه نویسی javascript و کار با صفحه وب هستند بسیار مفید خواهد بود.

FireDiff

FireDiff صفحه ای رو به FireBug با نام changes اضافه می کنه که لیست آخرین تغییرات در آن نمایش داده می شوند.

دریافت

ابتدا باید افزونه Firebug رو از اینجا دریافت کنید.

سپس خود FireDiff از این آدرس http://www.incaseofstairs.com/firediff دریافت کنید.

Threadها در جاوا اسکریپت

در جاوا اسکریپت نیز همانند سایر زبانها انجام برخی محاسبات نیاز به زمان زیادی دارد.

همانند کد زیر که رشته فیبوناچی را محاسبه می کند:

function fibonacci(n) {
  if(n == 0)
    return 0;
  if(n == 1)
    return 1;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

در صورتی که این کد را در صفحه وب خود برای محاسبه عدد 35 ام استفاده کنید، در اکثر مرورگر ها صفحه قفل خواهد شد و اگر خوش شانس باشید مرورگر پس از مدتی با پیغامی ادامه عملیات را خواهد پرسید.

برای رفع چنین مشکلاتی در نسخه 3.1 فایرفاکس استاندارد جدیدی با نام web workers و یا به فارسی “کارگر وب” پیاده سازی شده است. این کارگر وب یکی از استاندارد های نهایی نشده کارگزار استانداردهای وب یا WhatWG است که در حال تکمیل موارد آن هستند.
کار اصلی کارگر وب انجام عملیات و دستورات طولانی در یک thread (به فارسی رشته) جداگانه است تا صفحه اصلی بتواند به طور همزمان و بدون قفل شدن به کار خود ادامه بدهد.
به طبع جدا بودن threadهای اصلی و کارگر وب سبب ایجاد تعدادی محدودیت می شود که برای جلوگیری از مشکلات هستند. یک محدودیت اساسی ارتباط داشتن دو thread با هم از طریق پیغام ها است.
همچنین امکان دسترسی و دستکاری اشیاء DOM وجود ندارد (منظور از DOM سرنام عبارت Dodcument Object Model که همان عناصر صفحه است).
و البته امکان استفاده از AJAX یا شیئ XMLHttpRequest وجود دارد.

• تعدادی از ویژگیهای Web Workers

دسترسی به شیئ navigator در درون کارگر وب که امکان شناسایی مرورگر را می دهد. ویژگی های appName، appVersion، platform و userAgent قابل استفاده هستند.
امکان خاتمه دادن کار کارگر وب با استفاده از دستور terminate .
اسکریپتهای کارگر وب باید در یک فایل جداگانه و در مسیر یکسان از محل اجرای صفحه قرار داشته باشند.
امکان کنترل خطاهای رخ داده در درون کارگر وب با استفاده از رویداد onerror . در درون این رویداد با استفاده از ویژگی preventDefault  میتوان از خطای رخ داده چشم پوشی کرد.
امکان ارسال اعداد، boolean و اشیاء وجود دارد. تنها محدودیت در این زمینه عدم امکان استفاده از توابع و اشیاء ارجاع داده شده به DOM است.

• نمونه پیاده سازی

در اینجاها نمونه پیاده سازی شده کامل وجود دارد
http://people.mozilla.com/~bturner/weaveworker/weaveDecryptor.html
https://wiki.mozilla.org/DOMWorkerThreads_current

ابتدا باید آخرین نسخه از Firefox را دریافت کنید. در حال حاظر Firefox 3.1 Beta 3 برای دانلود موجود است. لینک دریافت. (نسخه فارسی نیز موجود است)

در صفحه خود باید یک نمونه از شیئ Worker ایجاد کنید. مانند کد زیر:

var webworker = new Worker("workerScript.js");

در این کد به سازنده کلاس اسکریپت workerScript.js ارسال می شود. سپس برای اینکه بتوانیم پیغام ارسالی توسط کارگر را دریافت کنیم باید رویداد onmessage را پیاده سازی کنیم:

webworker.onmessage = function(event) {
	document.getElementById("result").textContent = event.data;
};

این کد در thread اصلی صفحه اجرا خواهد شد پس امکان تغییر اطلاعات DOM وجود دارد. در اینجا فیلدی با نام result تغییر خواهد کرد.
در صورت تمایل می توان OnError را هم برای دریافت خطاهای احتمالی پیاده سازی کرد:

webworker.onerror = function(event) {
	document.getElementById("result").textContent = "Worker error: " + event.data + "n";
};

پیاده سازی فایل اسکریپت workerScript.js
این فایل که در thread جداگانه ای اجرا خواهد شد باید حداقل دارای یک پیاده سازی ار رویداد onmessage باشد تا بتواند کار مورد نظر را درون خود انجام دهد.

onmessage = function(event) {
  var n = parseInt(event.data);

  if (n == 0 || n == 1) {
    postMessage('Hello');
    return;
  }
}

توجه کنید که تعریف رویداد onmessage مستقیما بوده است. این رویداد پس از اجرای postMessage در thread اصلی اجرا خواهد شد. در این رویداد مقدار ورودی آن را بررسی می کنیم و در صورت برقرار بودن شرط پیغامی به صفحه ارسال می شود.

هم اکنون می توان به کارگر وب دستور اجرا را صادر کرد. برای این منظور باید از متد postMessage استفاده کنید. پس از اولین postMessage ارسالی کارگر وب شروع به کار کرده و اجرا می شود.
توجه کنید که این کد را باید در صفحه بنویسید و نه در فایل اسکریپت.
worker.postMessage(10);

منابع
https://developer.mozilla.org/web-tech/2008/09/04/web-workers-part-1/
https://developer.mozilla.org/web-tech/2008/12/04/web-workers-part-2/
https://developer.mozilla.org/web-tech/2009/01/05/web-workers-part-3/
https://wiki.mozilla.org/DOMWorkerThreads
https://wiki.mozilla.org/DOMWorkerThreads_current
http://www.whatwg.org/specs/web-workers/current-work/
http://ajaxian.com/archives/web-workers-update-for-firefox-31

راهنمای سریع و مرجع کامل Html و CSS

FireScope

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

در این مرجع موضوعات به طور دسته بندی شده قرار گرفته اند که امکان یافتن موارد مورد نیاز از Html و Css را آسان میکنه. همچنین توضیحات و نحوه استفاده از هر مورد به طور کامل ذکر شده است. مثالهای دکر شده نیز قابل توجه هستند. قابلیت جستجو هم که جای خود دارد.

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

پشتیبانی نسخه های مختلف از مرورگرهای Firefox , Internet Explorer , Opera , Safari ذکر است.

SitePoint Reference

ویژگی های این سایت مرجع به همین جا خلاصه نمی شه.

برای رضای خدا Internet Explorer را رها کنید

Bad IE

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

متاسفانه تعداد کسیری از کاربران اینترنت از این دسته افراد هستند.

طبق آمار در ساعات اداری که کارمندان مشغول به کار هستند استفاده کنندگان از IE زیاد هست و پس از ساعات اداری هست که آمار استفاده از سایر مرورگرها به خصوص Firefox بالا می رود. این نشان دهنده این مورد هست که بیشتر کارمندان که دور از ذهن هم نیست که در این مقوله بی اطلاع باشند از IE استفاده می کنند.

هدف از مطرح کردن مطالب فوق، مشخص شدن دلایل استفاده از IE بود و در بعضی بحث ها که حتی در فروم های خارجی مشاهده می کنم، افراد دلیل استفاده از IE رو راحتی و روان بودن و توصیف می کنند، این درحالی هست که ممکنه تجربه ای از سایر مرورگرها نداشته و یا اینکه اگر هم داشته اند به آن مرورگر آشنایی نداشته اند تا از امکانات آن بهره بگیرند.

تصور نکنید که بحث فوق برای گشور های غربی مطرح هست. بلکه عینا این مسله برای ایران نیز صادق است.

طبق تجربه شخصی خودم اکثریت بازدیدکنندگان سایتهای عمومی از IE استفاده می کنند که شاید به چیزی حدود 95 درصد برسد. در حالی که سایت خودم که در زمینه برنامه نویسی هست و یک سایت قبلیم در حدود 65 درصد از IE و 26 درصد از Firefox و بقیه از سایر مرورگرها استفاده می کنند.

این درصد ها گفته های قبلی مبنی بر کم آگاهی از سایر مرورها رو تصدیق می کند.

این مقدمه ای بود بر وضعیت IE در میان کاربران.

اما بیایید ببینیم چرا باید Internet Explorer رو ترک کنیم!

*- اولین مورد که شاید هم طنز آمیز بیاید نفرین های طراحان وب است. من به عنوان کسی که مدتی به عنوان طراح وب کار می کردم و هم اکنون طراحی سایت SoftProjects را خودم انجام دادم و همچنین دوستانی دارم که طراح وب هستند، خاطرات زیادی از عذاب و شکنجه هایمان از در دست و پنجه نرم کردم با IE داریم.از زمان عرضه نسخه 6 از IE در سال 2002 تا کنون که نسخه 8 از IE درحال آمدن است. استانداردهای وب تغییرات زیادی کرده اند و مرورگرها پیشرفتهای بسیار زیادی کرده اند.

این درحالی است که مرورگر IE بسیار بد و تنبل حرکت کرده است و دست طراحان وب را برای استفاده از تکنولوژی های روز بسته مانده است.

این وقاحت تا جایی است که حتی تیم ماکروسافت استانداردهای وب را جدا از مسیر حرکت IE دانسته و از پیاده سازی آن در کوتاه مدت سر باز می زنند! برای لینک به اخر مطلب مراجعه کنید.

*- استاندارد و به روز بودن. مدتی هست که جنگ مرورگرها در محافل وب مطرح است. این جنگ بر روی کسب کاربران بیشتر از طرق مختلف است. مهمترین محور جنگ پشتیبانی از آخرین تکولوژی های وب است که استانداردها در راس قرار می گیرند.استانداردهای وب با این هدف ایجاد شدند تا جلوی ناهماهنگی در رفتار مرورگرها را بگیرند. مرورگرها در جهت هر چه بیشتر استاندارد شدن در رقابت با هم هستند. در حالی IE مانند یک غده مغرور همیشه مشکل ساز بوده است.

مهمترین این استانداردها شامل:

Html 5, CSS 2.1, CSS 3, SVG, APng و چند مورد دیگر

*- امنیت و قابلیت اطمینان. سایر مرورگرها و به خصوص Firefox درارای مشکلات امنیتی بسیار کمی هستند و به علت کد باز بودن، در صورتی که مشکلی یافت شود به سرعت رفع شده و در اختیار عموم قرار می گیرد.علاوه بر این در صورتی که مشکل امنیتی جدی باشد، مرورگر به صورت خودکار و به سرعت آخرین بسته اصلاحی را دریافت کرده و اعمال می نماید.

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

*- قابلیت سفارش سازی.افزونه های نوشته شده برای IE به ندرت یافت می شوند. همچنین امکانات بسیار کمی برای سفارشی سازی مرورگر وجود دارد.

در مقابل سایر مرورگرها به خصوص Firefox با داشتن چند هزار افزونه که در نوع خود کم نظیر است می توانید امکانات فوق العاده ای به مرورگر خود اضافه کنید و یا تغییر پوسته آن را سفارشی کنید.

*- سرعت اجرای سایتهای Web 2این سایتها به علت استفاده زیاد از javascript در IE باعث کند شدن مرورگر می شوند. این درحالی هست سایر مرورگرها در زمان اجرای javascript شدیدا با یکدیگر مبارزه می کنند.

Don't hurt web with Internet Explorer

مراجع برای تحقیق مطالب فوق

به عنوان خلاصه مطلب لینک ها و مطالبی رو برای رجوع سریع مطرح می کنم.

مقایسه سرعت اجرای javascript که مثل همیشه IE آخر هستند

تست Acid 3 که میزان پشتیبانی از استانداردهای وب را نشان می دهید (به در صد IE8 توجه کنید!)

تکنولوژیها و جلوه های وب که کابران IE از آن محروم هستند:

طراحی سه بعدی مستقیما در خود مرورگر با استفاده از تگ Canvas

ویژگیهای جدید CSS 3 بخش 1

ویژگیهای جدید CSS 3 بخش 2

جلوه های ویژه و سایه برای متون

انتخابگر ها ( یا CSS Selector) که در نحوه شکل دهی ظاهر صفحات بسیار مهم هستند.
مرورگر خود را در مقابل CSS Selector ها بررسی کنید

حیله هایی که طراحان وب برای هماهنگی با IE استفاده می کنند:

حقه ای برای قعال کردن تگهای article,section و … از Html 5 در IE

چند حقه برای شناسایی مرورگر IE

مشکل با تگ img

غرور و تکبر یا شاید هم سستی در پیاده سازی استانداردها:

Chris Wilson [MS] (Expert):

Q: What do you guys think of the Acid-tests, especially Acid3? Is it your goal to let IE 8 pass Acid3?

A: Alex, The ACID3 test is a collection of interesting tests, spread across a large set of standards. Some of those standards will see improvements in IE8 – in fact, IE8 already improves on IE7’s score – but we are focused on the most important features and standards to make web developers’ lives easier. The ACID3 test does not map directly to that goal.

پیشرفتهایی که در IE8 صورت می گیرد که به نظرم کمتر از حد انتظار هستند

و مراجعی برای تعداد کابران مرورگرها و غیره

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

تعداد کاربران سایت w3schools.com

بررسی کلی از ویژگیهای مرورگرهای مختلف

جنگ مرورگرها

مقایسه مرورگرها

Firefox از Chrome جلو می زند

ناتوانی مایکروسافت در رفع نقص امنیتی اینترنت اکسپلورر برای مدت 453 روز

با این اوصاف برای رضای خدا هم که شده در آشنا کردن افراد با سایر مرورگرها کوشا باشید

مشترک این وبلاگ شوید و آن را از طریق RSS دنبال کنید.

Firefox فارسی در دست تهیه

فایرفاکس فارسی توسط احسان اخگری و بهنام اسفهبد در حال تهیه است. برای آشنایی هم که شده باید بدانید که احسان اسکندری سایت افزونه های فایرفاکس را اخیرا فارسی کرده اند. توضیحات از زبان خودش.

اگرچه فایرفاکس قبلا فارسی شده بود ولی این فارسی به صورت یک افزونه است وباید جداگانه نصب بشه. البته افزونه بودن مشکلاتی رو ایجاد می کنه و مقداری باعث ناهماهنگی می شه که زیاد جالب به نظر نمی رسه.

این نسخه ای که توسط احسان اخگری تهیه می شود نسخه اصلی خود فایرفاکس خواهد بود و به احتمال زیاد همراه با نسخه 3.2 عرضه خواهد شد. در حال حاضر نسخه قبل آلفا که فارسی شده است را می توانید از لینک موجود در وبلاگ ایشان دریافت کنید:

http://ehsanakhgari.org/blog/2008-12-03/first-persian-firefox-builds-available

تصویری از برنامه در این آدرس :

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

برای این دو نفر آرزوی موفقیت می کنم.

اعضای تیم فعلی فارسی سازی همراه با لیست اعضای قبلی:

https://wiki.mozilla.org/L10n:Teams:fa

رفع مشکل login در وردپرس

مشکلی که برای من وجود داره اینه که نمی تونم به راحتی وارد حساب کاربری خودم تو wordpress بشم! قبلا ها مشکلی نداشتم ولی اخیرا یعنی نزدیک به یک ماه میشه که این مشکل رو دارم و پرس و جویی که کردم اکثرا این مشکل رو داشتند.

نمی دونم این مشکل رو همه دارن یا نه ولی حداقل برای من که 6 تا ISP رو امتحان کردم 5 تاش مشکل داشت!!

• به روز رسانی 21 آذر
  

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

• بررسی مشکل و علت آن

مشکل رو که بررسی کردم متوجه شدم که در ارتباط SSL مشکلی وجود داره. به زبان ساده وقتی که وارد صفحه login می شید ابتدای آدرس یه S اضافی داره. یعنی httpS://wordpress.com/wp-login.php

پس از مدتی گشت و گذار تو اینترنت متوجه شدم که این مشکل مربوط به وردپرس نیست و تعدادی سایت هم باهاش مشکل پیدا کردند. مانند سایت donbale که هنوز این مشکل رو داره و چند تا دیگه. این در حالیه که با استفاده از پراکـــسی به راحتی میشه حتی از این S اضافه هم استفاده کرد(منظور همون SSL هست).

احتمالیکه من میدم اینه مشکل از سیستم فیل.ترینگ مخابرات و شرکت های ISP هست و به نحوی دچار مشکل هستند. احتمال بسیار ضعیف هم وجود که لیسانس SSL این سایت ها مسدود شده باشه، که البته فکر نکنم تکنولوژی این کار تولید شده باشه! شاید هم اینا کردن!؟!

به هر حال برای رفع این مشکل در wordpress باید SSL رو دور بزنیم.

• رفع مشکل

رفع مشکل کمی فنـیه و اگه اطلاعات کمی داشته باشید ممکنه که دچار مشکل بشید، به هر حال سعی میکنم که ساده توضیح بدم.

موارد مورد نیاز:

• FireFox
• افزونه Web Developer دریافت از این آدرس

بعد از اینکه افزونه Web Developer رو نصب کردین (و البته پس از Restart مرورگر)، باید نواری از منوها در زیر نوار آدرس نمایش داده بشه. پس مراحل زیر رو دنبال کنید:

1. به صفحه Login وردپرس برین. دقت کنید که httpS نــبـــاشـد. دقیقا این آدرس.
2. از نوار مربوط به Web Developer گزینه Miscellaneous رو که آیکون نسبتا خاکستری داره پیدا کرده و کلیک کنید. از منوی ظاهر شده گزینه Edit Html رو انتخاب کنید.
3. باید پتجره ای در پایین مرورگر با نام Edit Html ظاهر شده باشه که در اون می تونید کدهای Html رو ویرایش کنید که همان لحظه در مرورگر اعمال می شه.
4. در کادر کوچک بالایی این پنجره که برای جستجو در میان کدهای html هست، عبارت https://wordpress.com رو وارد کنید تا نشانه گر در متون html قرار بگیره. در این حالت فقط حرف S رو از https در متون html که مشخص شده است حذف کنید.
5. بدون اینکه به پنجره Edit Html دست بزنید در صفحه وردپرس نام کاربری و کلمه عبورتون رو وارد کنید و فراموش نکنید که Remember me رو تیک بزنید تا دیگه مجبور نباشید مراحل بالا رو تکرار کنید.
6. دکمه Login رو بزنید. صبر کنید تا داشبورد وردپرس بالا بیاد و بعد اون می تونید پنجره Edit Html رو ببندید
7. تمام! تصویری از Edit Html و کاری رو که باید در اون باید انجام بدید رو مشاهده می کنید:

نحوه اعمال تغییرات با استفاده از گزینه Edit Html

• توضیح بیشتر

در حقیقت کاری که در این روش انجام دادین تغییر محل ارسال اطلاعات فرم ورود از صفحه با SSL به یک صفحه معمولی هست.

• به روز رسانی: روشی ساده تر

همونطور که از کامنت اول مشخصه دوست خوبم ایمان روش ساده تری رو پیشنهاد کردن که در ادامه توضیح می دم. در این روش ابتدا با استفاده از نسخه موبایل وردپرس عمل ورود به حساب کاربری رو انجام می دیم. با این کار سایت اصلی وردپرس نیز شما را از طریق کوکی ذخیره شده شناسایی خواهد کرد و می تونید وارد حساب کاربری خودتون بشید.

1. آدرس http://m.wordpress.com وارد کنید.
2. نام کاربری و کلمه عبورتون رو وارد کنید و گزینه Remember me رو انتخاب کنید.
3. دکمه Login رو کلیک کنید و تمام! از این پس در سایت اصلی وردپرس می تونید از حساب کاربری خودتون استفاده کنید.

موفق باشید.

تعریف ویژگی ها (Properties) در جاوا اسکریپت

یکی از امکانات نسخه های جدید JavaScript پشتیبانی از ویژگی ها (Property) هست. اگر با سایر زبان های برنامه نویسی آشنایی داشته باشید، مطمئنن می دانید که ویزگی ها یکی از بخش های جدایی ناپذیر زبانهای برنامه نویسی OOP هستند.

ویژگی ها این امکان را فراهم می کنند که بر روی مقادیر متغیرهای خود کنترل داشته باشید و حق دسترسی برای آنها جهت ویرایش تعیین کنید. همچنین می توان داده های وارده را فیلتر کرده تا فقط محدوده و داده های مورد نظر اعمال شوند.

با این مقدمه می خواهم چند روش تعریف ویژگی ها در جاوا اسکریپت مطرح کنم.

تعریف اول:

جاوا اسکریپت زبان بسیار ساده ای است. ابجکت ها (یا اشیا) در جاوا اسکریپت چیزی بیش از مجموعه ای از کلید ها و مقادیر نیستند. به این معنی که برای دسترسی به عضوی از یک شیئ می توانید همانند یک آرایه با آن رفتار کنید.

برای مثال برای افزودن یک عضو به یک شیئ به مثال زیر توجه کنید:

var thing = new Object();
thing[ “prop1” ] = “Hello”;

در این مثال ما عضو جدیدی به نام prop1 را به thing اضافه کردیم. مقدار prop1 برابر Hello خواهد بود. روش دیگری هم برای افزودن عضو به شیئ مورد وجود دارد. به مثال زیر توجه کنید:

var thing = new Object();
thing.prop1 = “Hello”;

روش دیگر برای معرفی اشیا استفاده از لیتراتهای ابچکت هست که نتیجه ای دقیقا مانند دو مثال قبلی دارد:

var thing = {prop1 : “Hello”};

استفاده از مقدار prop1 بسیار ساده است می توان همانند یک آرایه یا یک ویژگی از آن استفاده کرد:

var thing = new Object();
thing.prop1 = “Hello”;
alert( thing[“prop1”] );
thing.prop1 = “Hello Again!”;
alert( thing.prop1 );

روش دوم:

روشی که در بالا توضیح دادم خیلی ساده و کاربردی است ولی تنها محدودیتی که دارد این است که امکان کنترل بر داده هایی که قبول می کند و یا مقداری که باید برگرداند وجود ندارد.

برای رفع این مشکل شرکت Mozilla راه حلی را ارائه کرده است که به مرور سایر مرورگر ها نیز از آن پشتیبانی می کنند.

این روش چیزی جز کلمات کلیدی get و set نیست.

var thing =  {
_price: 0,
get price() { return this._price; },
set price(value)
{
	if (value < 0)
	throw "price must be greater than zero";
	this._price = value;
}
};

در این مثال شیئ با نام thing تعریف شده است. این شیئ دارای یک متغیر با نام price_ و ویژگی price هست که با استفاده از یک متد get و یک متد set تعریف شده است.

به طور ساده تر زمانی که می خواهید مقداری را از ویزگی price بخوانید تابع معرفی شده در مقابل get فراخوانی خواهد شد و همچنین، هنگام مقدار دهی به price تابع معرفی شده در مقابل set فراخوانی خواهد شد.

همانطور که می بینید ویزگی price در هنگام عمل set مقدار ورودی را بررسی می کند و اگر کوچکتر از صفر باشد خطایی را تولید خواهد کرد.

نمونه استفاده از کد بالا:

// مقدار دهی
thing.price = 5;
// نمایش مقدار
alert( thing.price );
// مقدار نامعتبر و تولید خطا
thing.price = -10;

متاسفانه از این روش مرورگر های کمی پشتیبانی می کنند و در حال حاظر مرورگرهای Firefox و Safari 3 و Opera 9.5 از آن پشتیبانی می کنند.

روش سوم:

این روش را مرورگر Firefox برای استفاده در خودش طراحی کرده و در سایر مرورگرها کار نخواهد کرد. روش بسیار جالبی است و ساده تر از روش قبلی می باشد.

var thing =
{
_price: 0
};
thing.__defineGetter__("price", function(){ return this._price; });
thing.__defineSetter__("price", function(value)
{
	if (value < 0)
		throw "price must be greater than 0";
	this._price = value;
}
);

در این مثال ابتدا شیئ thingتعرفی می شود. سپس با استفاده از تابع __defineGetter__ متد get با برای ویژگی price تعریف می شود. این تابع دو ورودی دارد که اولی نام ویژگی مورد نظر است و دومی رفرنسی به تابع مورد نظر برای get. البته در این مثال تابع در همان جا تعریف شده است.

تابع __defineSetter__ همانند __defineGetter__ عمل می کند و فقط برای اضافه کردن تعریف set به ویژگی مورد نظر مورد استفاده است. در این مثال تابع مربوط به set در همان خط تعریف شده و مقدار ورودی را برای مقادیر کمتر از صفر کنترل می کند.

همانند مثال قبلی این مثال نیز کار خواهد کرد:

// مقدار دهی
thing.price = 5;
// نمایش مقدار
alert( thing.price );
// مقدار نامعتبر و تولید خطا
thing.price = -10;

روش چهارم:

در این روشی که می خوام معرفی کنم، واقعا ویژگی ها را پیاده سازی نمی کند ولی مانند یک ویژگی عمل می کنه و می تونه در کار شما مفید واقع بشه. در این روش در حقیقت ما دو تابع جداگانه برای خواندن و نوشتن در متغیر تعریف می کنیم و کارهای مورد نظر را در داخل آنها انجام می دهیم.

function thing()
{
	var _price = 0;
	this.getPrice = function(){
		return _price;
	};
	this.setPrice = function(val){
		if (val < 0)
			throw "price must be greater than 0";
		_price = val;
	};
}

در این مثال شیئ thing به عنوان یک تابع تعریف شده است که می توان از روی متغیر و اشیا دیگری هم ساخت. در داخل این تابع دو تابع getPrice برای خواندن و setPrice برای نوشتن در متغیر _price تعریف شده است.

// ایجاد نمونه جدید از تابع تعریف شده
var product= new thing();
// دسترسی متقیم به متغیر داخلی
alert(product._price);
//مقدار دهی با استفاده از تابع
product.setPrice(2);
// دسترسی به مقدار با استفاده از تابع مربوطه
alert( product.getPrice() );
// مقدار با یک مقدار نامعتبر و دریافت خطا
product.setPrice( -4 );

با این اوصاف مشاهده می کنید که javascript روز به روز قوی تر می شود، مخصوصا که Web 2 بسیار به javascript وابسته هستند.

موفق باشید

منابع:

http://weblogs.asp.net/stephenwalther/archive/2008/02/29/creating-javascript-properties-in-asp-net-ajax.aspx
http://ejohn.org/blog/javascript-getters-and-setters/
http://ajaxian.com/archives/getters-and-setters-in-javascript

ویژگیهای جدید در CSS 3 بخش دوم

این مقاله ادامه مقاله بخش اول هست که به بررسی ویژگی های جدید در CSS 3 می پردازیم.

تعدادی از ویژگی ها با صورت لیست وار

بخش اول

• Selector ها - انتخاب کننده های عناصر
• text-shadow – سایه در زیر متن
• border-image – تصاویر برای حاشیه عناصر
• border-radius – خمیده کردن حاشیه عناصر
• box-shadow – سایه در زیر یک کادر
• text-overflow – از محدوده خارج شدن متن
• word-wrap – خط شکن در متون طولانی
• resize – قابلیت تغییر اندازه کادر ها توسط کاربر
• outline – خطوط پیرامون اشیا

بخش دوم

• @page – انتخابگرهای صفحه
• multiple backgrounds - چندین زمینه برای اشیا
• background-origin و background-clip – تعیین محدوده و موقعیت به صورت پیشرفته برای پس زمینه ها
• Opacity – تعیین شفافیت یا آلفای یک شیئ
• رنگهای HSL و HSLA و RGBA
• Multi-column – چند سطونی کردن متون
• Web fonts – فونت های سفارشی برای سایت
• Speech - برای تعیین نحوه خواندن متون توسط نرم افزار

توضیح پیرامون ویژگی های فوق در بخش دوم

انتخابگر @page

ویژگی که در CSS 3 تغییر زیادی کرده انتخابگر page@ هست. این نوع انتخابگر ها با نام media شناخته می شن و با کارکتر @ مشخص میشوند. چون این موارد هنوز تکمیل نشده است و احتمال تغییر در اونها خیلی زیاده در موردشون توضیح نمی دم اما برای اطلاعات بیشتر می تونید به اینجا مراجعه کنید: http://www.w3.org/TR/css3-mediaqueries

انتخابگر مورد نظر من که خیلی جالب هست page@ هست. این انتخابگر یا selector این قدرت رو میده که به صفحه به صورت تکه تکه استیل تعیین کنید. نحوه کار این ویژگی اینطور هست که صفحه را به چندین قسمت تقسیم کرده و امکان تنظیم ویژگی های css رو به آنها میده. در تصویر زیر می بینید که صفحه به چندین قیمت تقسیم شده و سه قسمت از راست پر رنگ نشان داده شده اند:

CSS3 Paged Media Margin Boxes

به این کد توجه کنید

@page {
size: 8.5in 11in;
margin: 10%;

@right-top {
content: “Hamlet”;
}
@right-middle {
content: “Page ” counter(page);
}
@right-bottom {
font-size: 14pt;
}
}

در این کد ابتدا صفحه به عنوان یک مدیا در نظر گرفته میشه و سپس طول 8.5 اینچ و ارتفاع 11 اینج و مقدار margin 10 درصد از کل صفحه داده میشه. در انتخابگر بعدی قسمت بالا راست right-top از صفحه انتخاب شده و متن اون Hamlet قرار داده میشه. همونطور که میبینید امکان تعریف تو در توی انتخابگر های مدیا وجود داره. بخش های بعدی هم right-middle برای سمت راست وسط و right-bottom برای راست پایین هستند.

قسمت هایی که قابل استفاده هستند و در شکل بالا با نقطه چین نمایش داده شد اند شامل موارد زیر هستند:

top-left-corner, top-left, top-center, top-right, top-right-corner, left-top, left-middle, left-bottom, right-top, right-middle, right-bottom, bottom-left-corner, bottom-left, bottom-center, bottom-right, bottom-right-corner

اطلاعات بیشتر: http://www.w3.org/TR/css3-page

multiple backgrounds

با استفاده از این ویژگی این امکان فراهم می شود که به جای تعیین یک پس زمینه چندین پس زمینه جداگانه تنظیم کنید.

امکان تنظیم چندین پس زمینه برای من یک آرزو بود تا زمانی که این ویژگی رو تو CSS 3 دیدم. تصور اینکه چه قدرتی این ویژگی به شما خواهد دور از انتظار هست. پس برای اینکه گوشه ای از قدرت این ویژگی رو ببینید به تصویر زیر نگاه کنید:

Multiple backgrounds

در آدرس: http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html

البته در حال حاظر فقط مرورگر safari امکان نمایش چندین پس زمینه را دارد.

تو این صفحه فقط به یک تگ div برای تنظیم زمینه پس زمینه داده شده است! در ضمن از هیچ تگ اضافه هم استفاده نشده است.

background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg)  top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

اطلاعات بیشتر: http://www.w3.org/TR/css3-background/#the-background-image

background-origin

این ویژگی موقعیت اعمال ویژگی موقعیت یا background-position را تحت تاثیر قرار میده و موقعیت کلی را تغییر می دهد.

این ویژگی سه مقدار می گیرد که border، padding و content هستند. در صورت انتخاب padding موقعیت یا position با توجه گوشه بالایی سمت چپ ویژگی padding شیئ در نظر گرفته خواهد شد. در صورت انتخاب border موقعیت با توجه به گوشه بالایی سمت چپ ویژگی border شیئ در نظر گرفته خواهد شد و در صورت انتخاب content موقعیت با توجه به گوشه بالایی سمت چپ محتویات یا متن داخل شئ در نظر گرفته خواهد شد.

برای دیدن نمونه به تصویر بعدی نگاه کنید.

background-clip

این ویزگی تعیین می کند اعمال ویژگیهای پس زمینه در قسمت حاشیه به چه صورت باشد. این ویژگی دو مقدار می گیرد که اولی border هست و تایین می کند اعمال پس زمینه فقط تا border ادامه داشته باشد. مقدار دوم padding هست که مشخص می کند که اعمال پس زمینه تا ناحیه Padding باشد.

ویژگی های background-clip و background-origin در تصویر زیر مشخص شده اند.

در تصویر زیر در سطر اول برای background-clip مقدار border و در سطر دوم مقدار padding انتخاب شده است.
همچنین برای ویژگی background-clip ردیف اول اعمال مقدار border ردیف دوم padding و ردیف سوم content را نشان می دهد.

background origin and clip

اطلاعات بیشتر: http://www.w3.org/TR/2005/WD-css3-background-20050216

Opacity
شفافیت عناصر را مشخص می کند. کاربرد این عنصر زمانی مشخص هست که عناصر بر روی هم قرار گیرند و در این حالت لازم باشد تا عناصر زیرین هم کمی دیده شوند.
مقداری Opacity عددی اعشاری از یک تا صفر است.

رنگهای HSL و HSLA و RGBA
امکان انتخاب رنگ ها را طیف رنگهای مختلف میدهد. در گذشته باید زنگها حتما در استاندارد RGB رنگ انتخاب میشد.

برای مطالعه پیرامون Opacity و رنگها به این مقاله مراجعه کنید: A brief introduction to Opacity and RGBA

Multi-column
ویژگی جالب دیگری که اضافه شده امکان ستون بندی متون است. این ستون یندی به دو صورت قابل تعریف است؛ اولی با تعیین عرض برای هر ستون و دومی با تعریف تعداد ستون ها.
در حال حاضر این ویژگی به طور غیر رسمی توسط مرورگرها FireFox و Safari پشتیبانی می شود.

FireFox
-moz-column-width: 13em;
-moz-column-gap: 1em;

Safari
-webkit-column-width: 13em;
-webkit-column-gap: 1em;

توضیحات کامل: http://www.w3.org/TR/css3-multicol

Web fonts

امکان تغییر فونت های سایت به فونت هایی سفارشی را می دهد.

تغییر دادن فونت های سایت به فوت سفارشی ویژگی کاملا جدیدی نیست و توسط IE 5 پشتیبانی شده بود. ولی به این علت که نوع فونتی که مورد استفاده قرار می گرفت (Embedded Open Type .eot) مورد استقبال سایر مرورگر ها قرار نگرفت؛ تا الان که به صورت استاندارد درآمده است.
در حال حاظر امکان استفاده از فونت های TrueType .ttf و OpenType .otf باید توسط مرورگر ها فراهم شود. نکته ای که در اینجا مهم است لایسنس داشتن فونت ها است.
اعمال فونت های سفارشی توسط ویژگی @font-face فراهم شده است.

@font-face {
font-family: Delicious;
src: url(‘Delicious-Roman.otf’);
}

جالب است بدانید که یکی از دلایل عقب افتادن عرضه FireFox 3.1 پیاده سازی این ویژگی است.

نمونه اعمال شده: http://www.css3.info/preview/web-fonts-with-font-face
توضیحات کامل: http://www.w3.org/TR/css3-webfonts/#font-descriptions

Speech
Speech یا خواندن متون توسط نرم افزار ویزگی جدیدی در Css 3 نیست ولی دچار تغییرات زیادی شده است. این دسته از ویژگی ها امکان تعیین سرعت، کلفتی صدا، جنسیت خواننده و .. را می دهد.
این ویزگی ها این امکان را به شما می دهد که در زمانی که خسته هستید به چشمان خود استراحت دهید تا نرم افزار برای شما متون را بخواند.
در میان مرورگر ها، مرورگر Opera از چندین نسخه قیلی این ویژگی را دارا می باشد که متون را بخواند، ولی در حالت عادی این امکان در ان غیر فعال است و برای فعال کردن آن باید بسته مربوطه را دریافت و نصب نمایید.

توضیحات کامل: http://www.w3.org/TR/css3-speech