ورود

نسخه کامل مشاهده نسخه کامل : آموزش جاوا اسكريپت


majic-pc
02-11-2006, 19:24
انجام پروژه ساخت لحظه شمار
در این مطلب به شما یاد داده می شود که چگونه تاریخ معینی ( لحظه شماری ) را ، با استفاده از جاوا اسکریپت ، در سایت و یا وبلاگ خود نمایش دهید .
مثلا : در سایت ( یا وبلاگ ) خودتان می خواهید تاریخ بروز رسانی یا تاریخ تولد یکی از اعضاء را به صورت لحظه شمار ، به نمایش در آورید .
شما با استفاده از این اســــــــکریپت می توانید مدت باقی مانده را به صورت ( روز – ساعت – دقیقه و ثانیه ) را نشان دهید.
آخر توضیح این که این اسکریپت قابل اجرا در مرورگرهای زیر می باشد :


1- Fire fox = همه ورژن ها
2- Mozilla = ورژن های 1 به بالا
3- Intenet Explorer = ورژن های 3 به بالا
4- Netscape Navigator = ورژن های 3 به بالا


طرز کار و بررسی اسکریپت :
شما ابتدا این کدهایی که در زیر آمده را ، در بین تگ های < HEAD > و </HEAD> سایت ( و یا وبلاگ ) خودتان قرار می دهید .


<!-- SHORO SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
/*
SCRIPT EDITE zanjandata.com
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
*/
Maintenant = new Date;
TempMaintenant = Maintenant.getTime();
Future = new Date(2006, 2, 14);
TempFuture = Future.getTime();
DiffSec = Math.floor((TempFuture-TempMaintenant)/1000);
DiffMin = Math.floor(DiffSec/60);
Diffheure = Math.floor(DiffMin/60);
DiffJour = Math.floor(Diffheure/24);
while (DiffMin>=60)
{
DiffMin = DiffMin-60;
}
while (Diffheure>=24)
{
Diffheure = Diffheure-24;
}
while (DiffSec>=60)
{
DiffSec = DiffSec-60;
}
</SCRIPT>
<!-- ETMAM SCRIPT -->


سپس در این سطر :
Future = new Date(2006, 2, 02);
و در داخل پرانتز ، به ترتیب از چپ به راست ، سال - ماه – روز ، مورد نظر، یعنی در حقیقت تاریخ مورد نظرتان را تعیین می کنید .
سپس این اسکریپت را در بین دو تگ <BODY> و </BODY> قرار می دهید .


<!-- SHORO SCRIPT -->
<!--
SCRIPT EDITE zanjandata.com
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]
-->
<SCRIPT LANGUAGE="JavaScript">
document.write('سایت تا &nbsp &nbsp ' + DiffJour + ' روز , ' + Diffheure + ' ساعت, ' + DiffMin + ' دقیقه و ' + DiffSec + ' ثانیه &nbsp &nbsp بروز خواهد شد ');
</SCRIPT>
<!-- ETMAM SCRIPT -->


سپس اتفاقی ( رویدادی ) که قرار است بعد از آن مدت رخ دهد را در بین دو علامت ' ' اولی قرار می دهید .
مثلا ما از : سایت تا ، برای قسمت اول اســـــــتفاده کرده ایم و همچنین برای قسمت دوم ، در بین علامت ' ' دومی ، از : بروز خواهد شد . ، استفاده کرده ایم .


document.write('سایت تا &nbsp &nbsp ' + DiffJour + ' روز , ' + Diffheure + ' ساعت, ' + DiffMin + ' دقیقه و ' + DiffSec + ' ثانیه &nbsp &nbsp بروز خواهد شد ');


در ضمن شــــــما می توانید تغییرات دیگری در استکریپت برای بهتر جلو کردن ، لحظه شمار ، ایجاد کنید .
مثلا می توانید با اســـــــتفاده از تگ های <FONT> و </FONT> رنگ نوشـــــت های خودتان را تغییر دهید .
بدین ترتیب که ، نوشـــــته های خودتان را در بین این تـــگ ها قرار می دهید ، در این مثال ما رنگ نوشته ها قرمز در نظر گرفته ایم و سایز آن را 8 ( اندازه بر حسب پیکسل می باشد ) و نوع فونت را arial در نظر گرفته ایم :


document.write('<font face="arial" size="8" color=#FF0000> سایت تا &nbsp &nbsp</font> ' + DiffJour + ' روز , ' + Diffheure + ' ساعت, ' + DiffMin + ' دقیقه و ' + DiffSec + ' ثانیه <font face="arial" size="8" color=#FF0000> &nbsp &nbsp بروز خواهد شد </font> ');


و باز هم با ذوق و سلیقه می توانید تغییراتی انجام دهید ...
majic-pc
02-11-2006, 19:29
مات ( تاریک ) کردن یک تصویر
این اسکریپت برای این می باشد که شما می توانید با استفاده از آن تصاویر ( عکس های ) موجود در سایت ( و یا وبلاگ ) خودتان را به صورت مات ( تاریک ) قرار دهید ، سپس هرگاه که اشاره گر ( موس ) بر روی آن قرار گیرد ، تصویر واضح می شود .
این اسکریپت قابل اجرا در مرورگرهای زیر می باشد :
1- Fire fox = همه ورژن ها
2- Mozilla = ورژن های 1 به بالا
3- Intenet Explorer = ورژن های 5 به بالا
4- Netscape Navigator = غیر قابل استفاده

طرز کار و بررسی اسکریپت :
شما ابتدا کدهای که در زیر آمده را در بین دو تگ <Head> و <Head/> قرار می دهید :


<script language="JavaScript1.2">
/* [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] */
var opacite = 40;//tanzime Mati tasvir adade momken az 0 ta 100
function incOpa(element){
objet = element;
intervalle = setInterval("progressifChange(objet,100,true)",50);
}
function decOpa(element){
objet = element;
intervalle = setInterval("progressifChange(objet,opacite,false)",50);
}
function progressifChange(image,maxOpa,sens){
if(sens){
// Afzayesh Mati Tasvir
if (image.filters.alpha.opacity<maxOpa)
image.filters.alpha.opacity+=5;
else if (window.intervalle)
clearInterval(intervalle);
}else{
// Kaheshe Mati Tasvir
if (image.filters.alpha.opacity>maxOpa)
image.filters.alpha.opacity-=5;
else if (window.intervalle)
clearInterval(intervalle);
}
}
</script>
شما می توانید مقدار مات ( تاریک ) بودن تصویر را با تغییر دادن عدد که در جلوی کد :
var opacite = 40
قرار دارد را ، کم و یا زیاد کنید . برای مثال ما در اینجا مقدار را 40 در نظر گرفته ایم .
در ضمن اعداد انتخابی شما می توانند بین 0 تا 100 باشند .
نکته : 0 به معنی این می باشد که تصویر خیلی مات باشد و همینطور که رقم بالا می رود از ماتی آن کاسته می شود .
با تغییر عدد کدی که در پایین آمده ، می توانید مقدار روشنایی ( به عبارتی دیگر ، درجه روشنایی ) تصویر هنگامی که اشاره گر ( موس ) بر روی تصویر قرار می گیرد را افزایش دهید .
image.filters.alpha.opacity+=5;
ما در اینجا برای مثال از عدد 5 استقاده کرده ایم .( اعداد قابل استقاده از 0 تا 100 )
با تغییر عدد کدی که در پایین آمده ، می توانید مقدار روشنایی ( به عبارتی دیگر ، درجه روشنایی ) تصویر هنگامی که اشاره گر ( موس ) بر روی تصویر قرار می گیرد را کاهش دهید .
image.filters.alpha.opacity-=5;
سپس کد زیر را باید در بین دو تگ <BODY> و <BODY/> قرار دهید .
نکته : دو تگ <CENTER> و <CENTER/> برای این می باشد که عکس در وسط قرار گیرد شما می توانید با استفاده از تگ های RIGHT و LEFT محل عکس را به ترتیب راست ، و چپ قرار دهید .
نکته : ما در اینجا برای مثال از [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] به عنوان تصویر استفاده کرده ایم ، شما آدرس عکسی که آپلود کرده اید را قرار می دهید .



<center>
<a href="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]" target="_blank">
<img src="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]" border=0 style="filter:alpha(opacity=40);" onMouseover="incOpa(this)" onMouseout="decOpa(this)">
</a>
</center>


<html>

<head>
<meta [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]"Content-Type" content="text/html; charset=windows-1252">
<title>zanjandata</title>
<script language="JavaScript1.2">
/* [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] */
var opacite = 40;//tanzime Mati tasvir adade momken az 0 ta 100
function incOpa(element){
objet = element;
intervalle = setInterval("progressifChange(objet,100,true)",50);
}
function decOpa(element){
objet = element;
intervalle = setInterval("progressifChange(objet,opacite,false)",50);
}
function progressifChange(image,maxOpa,sens){
if(sens){
// Afzayesh Mati Tasvir
if (image.filters.alpha.opacity<maxOpa)
image.filters.alpha.opacity+=5;
else if (window.intervalle)
clearInterval(intervalle);
}else{
// Kaheshe Mati Tasvir
if (image.filters.alpha.opacity>maxOpa)
image.filters.alpha.opacity-=5;
else if (window.intervalle)
clearInterval(intervalle);
}
}
</script>
</head>
<body>
<center>
<a href="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]" target="_blank">
<img src="[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]" border=0 style="filter:alpha(opacity=40);" onMouseover="incOpa(this)" onMouseout="decOpa(this)">
</a>
</center>
</body>
</html>
نکته : زمانی که بر روی تصویر کلیک شود به صفحه ای که در کد قرار دادید ، وارد می شوید . ما برای مثال ، سایت [ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] را قرار داده ایم . ( یعنی بعد از کلیک بر روی عکس ، وارد سایت می شوید. )