سرویس گوگل برای بدست آوردن favicon ها و اعمال آن بر لینک های خارجی

8 02 2010

ظاهرا مدتی هست که گوگل یک سرویس ویژه راه اندازی کرده که علنی نیست، ولی خوب معلوم نیست چه کسی و چطوری متوجه این سرویس شده به نظر میرسه بسیار شبیه به سرویس مورد استفاده در google reader هست. در هر صورت استفاده از این سرویس  رواج پیدا کرده.

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

مزیت اصلی این سرویس گوگل در همین زمینه است، یعنی برای سایتهایی که favicon آنها یافت نشد یک آیکون پیش فرض در نظر میگیرد. مزیت دیگر آن png بودن فرمت تصاویر این favicon های برگردانده شده هست که باعث خواهد شد که تقریبا توسط همه مرورگرها قابل شناسایی باشند.

آدرس این سرویس مورد نظرما:

http://www.google.com/s2/favicons?domain=domainName

آیکون پیش فرض این سرویس یک جهان 16 پیکسلی هست که خیلی مناسب برای منظور ماست. البته سرویس مورد استفاده در google reader به این آدرس هست:

http://s2.googleusercontent.com/s2/favicons?domain=domainName&alt=feed

که آیکون پیش فرض آن هم آیکون فید هست. میتونید با حذف &alt=feed آیکون پیش فرض رو به آیکون جهان تغییر بدید.

به جای domainName باید آدرس دامین سایت قرار دهید. برای مثال دامنه برای سایت گوگل google.com خواهد بود و آدرس سرویس آن هم http://www.google.com/s2/favicons?domain=google.com است. که نتیجه این Google Favicon تصویر آیکون گوگل هست که به این طریق بدست آمده.

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

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

افزودن تصویر favicon به لینکهای خارجی با JQuery

اگر در سایتتون از jquery استفاده میکنید، میتوانید از این کد استفاده کنید:

$(document).ready(function() {
	$("a").each(function() {
		var href = $(this).attr("href");
		if (href && href.match(/:\/\//) && !href.match(document.domain)) {
			var domain = href.replace(/^(https?:\/\/[^\/]+).*$/, '$1').split('/')[2];
			var img = "<img src='http://www.google.com/s2/favicons?domain=" + domain + "' style='margin:0px 2px;border:0px;width:13px;height:13px'/>";
			//$(this).prepend(img); // For LTR site
			$(this).append(img); // For RTL site
		}
	})
});

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

در صورتی که از jquery استفاده نمی کنید میتوانید از کد زیر استفاده کنید:

function ApplyFavicons() {
for (i = 0; i < document.links.length; i++) {
	var a = document.links[i];
	var href = a.href;
	if (href && href.match(/:\/\//) && !href.match(document.domain)) {
		var domain = href.replace(/^(https?:\/\/[^\/]+).*$/, '$1').split('/')[2];
		var img = document.createElement("img");
		img.src = "http://www.google.com/s2/favicons?domain=" + domain;
		img.style.border = '0px'; img.style.margin = '0px 2px'; img.style.width = '13px'; img.style.height = '13px';
		a.appendChild(img);
	}
}}

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

توجه کنید که در این دو تابع من اندازه favicon را به 13 پیکسل تغییر دادم. در صورت نیاز می توانید آن را به اندازه پیش فرض یعنی 16 پیکسل تغییر دهید.

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





JavaScript Deobfuscator

30 01 2010

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

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

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

در زمینه رمزگشایی کدهای Obfuscate شده چندین وبسایت و حتی یک افزونه برای فایرفاکس وجود دارد. افزونه فایرفاکس با نام JavaScript Deobfuscator بیشتر شبیه یک profiler هست که کد های اجرا شده توسط مرورگر رو شناسایی می کنه و سپس به ترتیب آنها رو رمز گشایی میکنه. شیوه عمل این افزونه اصلا برام جالب نبود ولی با این حال نتیجه بدست امده مطمئن هست.

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

در این آدرس: http://www.gosu.pl/decoder

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

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

fact = function (fact) {
	var i,result=1;
	for (i = 1; i <= fact; i++) {
		result = result * i;
	}
	return result;
}

این کد رو با استفاده از ابزاری مانند Closure Compiler فشرده می کنیم و نتیجه مانند این خواهد بود:

fact=function(c){var a,b=1;for(a=1;a<=c;a++)b*=a;return b};

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

پس با استفاده از JavaScript Decoder که در بالا لینک داده شده کد مزبور رو رمز گشایی می کنیم:

fact = function (c)
{
    var a, b = 1;
    for (a = 1; a <= c; a++) {
        b *= a;
    }
    return b;
};

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





ایجاد FavIcon متحرک و تغییر آن با جاوا اسکریپت

9 05 2009

تاکنون سایتهایی را دیده اید که favicon متحرک دارند. اعمال این انیمشین به سادگی امکان پذیر است.

برای اطلاع از اینکه favicon چیست به اینجا مراجعه کنید.

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

favicon متحرک

برای اعمال آیکون متحرک ابتدا فایل انیمشن gif مورد خودتون رو ایجاد کنید و در مسیر سایت قرار بدید.

کد زیر رو به قسمت head فایل html مورد نظر اضافه کنید:
<link rel="shortcut icon" href="favicon.gif" type="image/gif">

نکته ای که در اینجا مهم هست استفاده همزمان از فایل gif و icon هست  تا برای مرورگرهایی که از این ویژگی پشتیانی نمی کنند مشکلی پیش نیاید و همچنان آیکون سایت نمایش داده بشود.
بس برای این منظور فایل favicon.ico را هم در مسیر قرار و لینک آن را نیز به قسمت head اضافه کنید. توجه کنید لینک icon باید قبل از gif باشد تا فایل gif در اولویت قرار گیرد.

نتیجه نهایی قسمت head صفحه به این صورت خواهد بود:

<head>
  <title>SalarBlog.wordpress.com Animated Favicons</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="shortcut icon" href="favicon.gif" type="image/gif">
</head>

نحوه تغییر favicon با جاوا اسکریپت

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

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

function ChangeFavicon(iconUrl){
  var docHead=document.getElementsByTagName('head');
  if(docHead!=null && docHead.length>0)
    docHead=docHead[0];
else return;
  var link = document.createElement("link");
  link.type="image/x-icon";
  link.href=iconUrl;
  link.rel="shortcut icon";
  docHead.appendChild(link);
}

در این تابع با ایجاد یک شی Link و مقدار دهی آن و سپس اضافه کردن آن به بخش head سایت مرورگر رو وادار به شناسایی آیکون جدید کرده و آن را نمایش می دهیم.

استفاده از این تابع آسان است و به صورت زیر خواهد بود.

ChangeFavicon('favicon-frame1.ico');
ChangeFavicon('favicon-frame2.ico');
ChangeFavicon('favicon-frame3.ico');

پ.ن: برای ایجاد favicon به صورت آنلاین از سایت favicon.cc استفاده کنید.

موفق باشید





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

18 04 2009

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

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

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

FireDiff

FireDiff

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

دریافت

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

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





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

13 03 2009
WebWorker

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

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

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





SyntaxHighlighter با طعم JQuery

29 01 2009
SyntaxHighlighter JQuery

اگه تا حالا از اسکریپت SyntaxHighlighter استفاده کرده باشین میدونین که با استفاده از این اسکریپت می شه کدها یا همون Code Snipped ها را رنگی و فرمت کرد.
برای استفاده از این اسکریپت در حالت عادی لازم است که علاوه بر موتور اصلی این اسکریپت (shCore.js) اسکرپیت مخصوص زبان استفاده شده در کدتون رو هم اضافه کنید. برای مثال برای سی شارپ shBrushCSharp.js

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

در زیر اسکریپتی رو که با استفاده از JQuery نوشته ام اگر در صفحه خود استفاده کنید علاوه بر کاهش تعداد درخواست ها به سرور و کاهش حجم دریافتی، اعمال SyntaxHighlighter به صورت خودکار خواهد بود و نیازی به درج هیچ کد اضافه ای نخواهید داشت. این امکان هم هست که اگر در صفحه هیچ کدی(منظور code snipped) وجود نداشته باشد هیچ کدام از اسکریپتهای SyntaxHighlighter استفاده نشود.
پس برای استفاده، به جای لینک مستقیم به SyntaxHighlighter باید از اسکریپت زیر استفاده کنید:

// Coded by Salar Khalilzadeh 2009-01-29
// https://salarblog.wordpress.com/

if($){
// SyntaxHighlighter scripts path
var BrushBasePath='http://www.YourSite.com/SyntaxHighlighter/scripts/';

// SyntaxHighlighter style sheet
var StyleFilePath='http://www.YourSite.com/SyntaxHighlighter/styles/SyntaxHighlighter.css';
var BrushFileName='shBrushXXX.js';
var BrushCoreFile='shCore.js';
var BrushAliases=[
	['xml','xml'], ['xhtml','xml'], ['xslt','xml'], ['html','xml'] , ['xhtml','xml'],
	['vb','vb'], ['vb.net','vb'],
	['sql','sql'],
	//['asm','asm'], uncomment if you have assmbly brush
	['ruby','ruby'], ['rails','ruby'], ['ror','ruby'],
	['py','python'], ['python','python'],
	['php','php'],
	['js','jscript'], ['jscript','jscript'], ['javascript','jscript'],
	['java','java'],
	['delphi','delphi'], ['pascal','delphi']
];

var codeTags=$('pre,code');
var matchedElements=[];
codeTags.each(function(){
	var $item = $(this);
	var href = $item.attr("href");
	var i;
	for(i=0;i<BrushAliases.length;i++){
		var attr=$item.attr("class");
		if(attr.indexOf(BrushAliases[i][0])!=-1 && matchedElements[BrushAliases[i][1]]==null){
			matchedElements.push(BrushAliases[i][1]);
		}
	}
})

// Highlighter core, if there is any language
if(matchedElements.length>0){
	document.write("<link rel='stylesheet' type='text/css' href='"+StyleFilePath+"' />");
	var jsCore=BrushBasePath+BrushCoreFile;
	document.write(unescape("%3Cscript%20type%3D%27text/javascript%27%20src%3D%27")+ jsCore + unescape("%27%3E%3C/script%3E"));
}

// Brushes
for(i=0;i<matchedElements.length;i++){
	var jsSrc=BrushFileName.replace('XXX',matchedElements[i]);
	jsSrc=BrushBasePath+jsSrc;
	document.write(unescape("%3Cscript%20type%3D%27text/javascript%27%20src%3D%27")+ jsSrc + unescape("%27%3E%3C/script%3E"));
}}

نحوه استفاده: این کد رو در حتما در آخر صفحه درج کنید. علت این کار رو در ادامه توضیح می دم.
در این کد در مقدار BrushBasePath آدرس محل brush های SyntaxHighlighter خواهد بود که با توجه به اینکه آن ها را در کجای وبسایت خود قرار داده اید باید آن را مسیر دهی کنید.
StyleFilePath آدرس فایل CSS مورد استفاده SyntaxHighlighter است.

شیوه کار این کد به این صورت هست که با استفاده از لیست زبانهای قابل استفاده، در تگ های pre به جستجو می پردازد و در صورت یافتن، اسکریپت مربوط به آن زبان را به صفحه اضافه می کند.
تنها نکته مهمی که وجود داره عدم استفاده از $(document).ready() مربوط به JQuery هست. به این علت که این تکه کد مقداری اسکریپت در صفحه درج می کند و زمان وقوع رویداد ready کد html کامل دریافت شده است و درج مجدد یک اسکریپت جدید باعث refresh شده صفحه و از دست رفتن ظاهر اون میشه.

موفق باشید





بررسی فعال بودن Javascript در ASP.NET

28 12 2008

برای اینکه به فعال بودن جاوا اسکریپت در مرورگر کاربر مطمئن بشین چند روش می تونید استفاده کنید که با توجه به نیازتون یکی از اونا رو انتخاب کنید و یا ترکیبی از آنها استفاده کنید.

  • استفاده از تگ noscript

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

<meta http-equiv="refresh" content="0;url=EnableScripts.htm">

همانطور که از کد مشخصه این کار باعث میشه تا کاربر به صفحه EnableScripts.htm هدایت بشه. معمولا این روش زیاد کاربر پسند نیست ولی برای صفحاتی که بدون وجود جاوا اسکریپت به هم خواهند خورد و فعال بودن آن حیاطی هست می تونید از این روش استفاده کنید. دقت کنید که کد بالا باید در بخش Head سایت قرار بگیره، مانند زیر:<head>
<title>Welcome</title>
<noscript>
<meta http-equiv="refresh" content="0;url=http://www.google.com">
</noscript>
</head>

همچنین به جای کد بالا می تونید پیغامی رو در صفحه نمایش بدید:

<noscript>
کاربر گرامی، برای مشاهده این صفحه باید جاوا اسکریپت را در مرورگر خود فعال نمایید.
</noscript>

که این کد رو می تونید در هرجای صفحه قرار بدین.

  • استفاده از فیلد مخفی یا Hidden در ASP.NET

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

برای بررسی فعال بودن جاوا اسکریپت در رویداد های PostBack ابتدا باید یک فیلد hidden رو در فرم قرار بدین و مقدار این فیلد رو برابر 0 قرار بدین. چیزی شبیه این:
<asp:HiddenField ID="txtCheckJS" runat="server" Value="0" />

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

<script type="text/javascript">
document.getElementById('<%=txtCheckJS.ClientID %>').value='1';
</script>

کاری که این کد جاوا اسکریپت انجام میده تغییر مقدار فیلد به 1 هست، که یعنی جاوا اسکریپت فعال است. تنها کاری که باقی مونده بررسی این فیلد در رویداد کلیک هست. کافی هست که کدی مانند زیر رو استفاده کنید:
if (Page.IsPostBack)
{
if (Convert.ToInt32(txtCheckJS.Value) == 1)
{
// Javascript is enabled
}
else
{
// Oh No!
// Javascript is not enabled
}
}

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





راهنمای کامل توابع JQuery و MooTools به صورت CHM

20 12 2008

در زیر لینک دانلود مرجع کامل توابع اصلی JQuery همراه با توابع UI رو گذاشتم. حجم فایل 184 کیلوبایت و در فرمت chm هست.

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

به روز رسانی 7 بهمن: JQuery 1.3  لینک دانلود

JQuery 1.2.1  لینک دانلود 1
JQuery 1.2.1  لینک دانلود 2

این هم لینک دریافت مرجع توابع کتابخانه MooTools:

MooTools لینک دانلود:

http://www.adrive.com/public/15c1ff4378301e96b18a9a56a1fa591f4ec46972ba49a5b5ad2ab0126e5570c5.html

منبع: http://charupload.wordpress.com/2007/12/07/jquery-documentation-chm





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

28 11 2008

یکی از امکانات نسخه های جدید 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 بخش دوم

15 10 2008

این مقاله ادامه مقاله بخش اول هست که به بررسی ویژگی های جدید در 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

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

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

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