تبلیغات
پایگاه علمی سینوس

اسلایدر


 
برای تعجیل در فرج امام عصر (عج) یک صلوات با "وعجّل فرجهم" از ته دل بفرست
 
 
 
 
 
 
 
 
 
 

آموزش جاوا اسکرپت (بخش اول)

نویسنده : سرباز گمنام | تاریخ : 02:48 ب.ظ - جمعه 10 شهریور 1391

http://up9.iranblog.com/images/n61veoivh7jc18m3tew.jpg


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

نکته : باید توجه داشت که جاوا اسکرپت یک زبان طرف کاربر (Client Side) است توسط کامپیوتر شخصی کاربر تفسیر می شود. کدهای مربوط به جاوا اسکرپت توسط کاربر نهایی قابل مشاهده هستند پس توصیه می شود از آن برای مقاصد مهم نظیر اتصال به دیتابیس استفاده نشود.

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

بهتر است قبل از شروع به یادگیری جاوا اسکرپت با HTML و CSS آشنایی داشته باشد تا بتوانید به خوبی از قابلیتهای جاوا اسکرپت استفاده کنید.

برای آزمایش کردن اسکرپتهایی که می نویسید باید از مرورگری استفاده کنید که از جاوا اسکرپت پشتیبانی می کند. قابل ذکر است که تقریباً همه مرورگرهای جدید از جاوا اسکرپت پشتیبانی می کنند از جمله این مرورگرها می توان به اینترنت اکسپلورر (IE) که در ویندوز به صورت پیش فرض نصب می شود، فایر فوکس (Firefox) و اپرا (Opera) اشاره کرد. به خاطر داشته باشید که نسخه های قبل از نسخه 4.0 اینترنت اکسپلورر و Netscape از جاوا اسکرپت پشتیبانی نمی کنند.


Source   منبع: انـ اسکین




دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی ,
 

نحوه استفاده از کدهای جاوا اسکرپت در صفحه (بخش 2 جاوا اسکریپت)

نویسنده : سرباز گمنام | تاریخ : 02:39 ب.ظ - جمعه 10 شهریور 1391

http://up2.iranblog.com/images/bxd659bmyq67oorna1d.bmp

 

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

صفحه

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

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

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

در تگ بالا برای مشخص کردن نوع موتور اسکرپتی که مرورگر باید برای تفسیر کردن کد استفاده کند از دو شناسه language و type استفاده می کنیم.


وارد کردن اسکرپت در بخش

در هنگام باز شدن یک صفحه وب عناصر موجود در بخش

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

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

را مشاهده می کنید:

 







روی این متن کلیک کنید






وارد کردن جاوا اسکرپت در قسمت بدنه متن HTML

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

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

 

 



 



این متن توسط جاوا اسکرپت نوشته شده است.


 


فرا خوانی اسکرپت خارجی به صفحه

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

Source   منبع: انـ اسکین




دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی ,
 

معرفی عملگرهای مورد استفاده در JavaScript (بخش 3)

نویسنده : سرباز گمنام | تاریخ : 02:34 ب.ظ - جمعه 10 شهریور 1391

WwW.Nskin.Ir


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


عملگرهای محاسباتی

از این نوع عملگرها برای انجام عملیات ریاضی نظیر جمع و ضرب استفاده می شود. می توانید این عملگرها را در اینجا مشاهده کنید ( در مثال زیر متغیر x را برابر 8 و متغیر y را برابر 4 در نظر بگیرید ) :

نام عملگر مثال نتیجه
جمع + x + y 12
تفریق - x - y 4
ضرب * x * y 32
تقسیم / x / y 2
باقیمانده % 9 % y 1
افزایش ++ x++ 9
کاهش -- x-- 7

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


عملگرهای جایگزینی

این عملگرها ترکیبی از عملگرهای دیگر هستند و به همین دلیل آنها را عملگرهای ترکیبی هم می نامند. می توانید این عملگرها را در جدول زیر مشاهده کنید ( در مثال زیر متغیر x را برابر 8 و متغیر y را برابر 4 در نظر بگیرید ) :

نام عملگر مثال عبارت معادل
انتساب = x = 8 x = 8
انتساب جمع += x += y x = x + y
انتساب تفریق -= x -= y x = x - y
انتساب ضرب *= x *= y x = x * y
انتساب تقسیم /= x /= y x = x / y
انتساب باقیمانده %= x %= y x = x % y

عملگرهای مقایسه ای

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

در جدول زیر مقادیر x و y و z را مطابق زیر در نظر بگیرید و توجه داشته باشید که مقدار متغیرهای x و y عددی و مقدار متغیر z از نوع رشته ای است :

x = 4;
y = 8;
z = "4";
نام عملگر مثال نتیجه
تساوی == x == z True
همانی === x === z False
نامساوی != x != y True
بزرگتر از > x > y False
کوچکتر از < x < y True
بزرگتر یا مساوی >= x >= z True
کوچکتر یا مساوی <= x <= y True

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


عملگرهای منطقی

این عملگرها برای انجام عملیات منطقی بر روی دو عبارت به کار می روند ( در مثال زیر متغیر x را برابر 8 و متغیر y را برابر 4 در نظر بگیرید ) :

نام عملگر مثال نتیجه
نقیض ! !(x==y) True
!(y==3) False
و && (x=4 && y=8) True
(x>4 && y=8) False
یا || (x>4 || y=8) True
(x>4 || y>8) False

عملگر رشته ای

از این عملگر برای چسباندن دو رشته به هم استفاده می شود. مثلاً برای اتصال دو متغیر از نوع رشته از این عملگر استفاده می شود.

نام عملگر مثال
عملوند رشته ای +
  a = 'طراحی وب';
  b = 'با جاوا اسکرپت';
  c = a+b;

در مثال بالا مقدار متغیر c این است : 'طراحی وببا جاوا اسکرپت'

برای ایجا فاصله بین کلمه وب و کلمه با می توانیم یک فاصله خالی به یکی از متغیرهای a یا b اضافه کنیم یا با استفاده از عملوند رشته ای یک فضای خالی به متغیر c اضافه کنیم :
a = ' طراحی وب';


------------------------------
a = 'طراحی وب';

b ='با جاوا اسکرپت'; c = a+b; b ='با جاوا اسکرپت'; c = a+' '+b;

در نتیجه کد بالا مقدار متغیر c به این صورت خواهد بود : 'طراحی وب با جاوا اسکرپت'


عملگر شرطی

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

VAR_NAME=(شرط)?value1:value2

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

age_group=(age>18)?'زیر سن بلوغ':'بزرگسال'

در این مثال اگر متغیر age بزرگتر از 18 باشد مقدار 'بزرگسال' به متغیر age_group تخصیص داده می شود و در صورتی که متغیر age کوچکتر از 18 باشد مقدار 'زیر سن بلوغ' به عنوان مقدار متغیر age_group قرار می گیرد.

 Source   منبع: انـ اسکین




دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی ,
 

نمایش پیام هشدار در صفحه با استفاده از جاوا اسکرپت (بخش 4)

نویسنده : سرباز گمنام | تاریخ : 01:59 ب.ظ - جمعه 10 شهریور 1391

http://nskin.persiangig.com/Javascript%20part%204%20%28www.nskin.ir%29.JPG

 

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

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

alert('متنی که می خواهید به بازدید کننده نشان داده شود')

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

<a href="alert.php" onmouseover="alert('Insert your message here')">       
ماوس خود را روی این لینک قرار دهید        
</a>

آنرا امتحان کنید.

در ابنجا به ارائه توضیحاتی در مورد دستورات جاوا اسکرپت استفاده شده در کد بالا می پردازیم :

  • :onmouseover 
    این رویداد مسئولیت اجرای کد جاوا اسکرپت موجود در خود را وقتی که ماوس روی آن قرار می گیرد بر عهده دارد.

:(' ')alert
این تابع متنی را که به عنوان مقدار آن قرار گیرد در یک کادر محاوره ای با یک دکمه OK نمایش می دهد.

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

برای ساختن این نوع کادر هشدار فرمان هشدار را بین <head> و <head/> قرار دهید. برای این کار باید از تگهای <script> که در اول فصل با آن آشنا شدیم استفاده کنیم تا کدهای جاوا اسکرپت بین بقیه کدها تشخیص داده شوند:

<head>
<script language="javascript">         
<!-- hide from old browsers               
alert('
به این صفحه خوش آمدید ');            
//-->
</script>
</head>

فرمان بالا یک کادر محاوره ای را وقتی که بیننده صفحه شما را باز می کند نشان می دهد. وقتی که OK را کلیک کنید بارگذاری صفحه ادامه پیدا می کند.

آیا می خواهید چند گام جلو تر برویم؟ چندین فرمان هشدار را در تگ SCRIPT قرار دهیم تا چندین کادر هشدار پشت سر هم به محض باز شدن صفحه نمایش داده  شوند و البته برای هر پیام باید دکمه OK را کلیک کنیم تا به پیام بعدی برویم.

این هم کدی که مسئول این پیامها است:

<head>
<title>javascript example 2</title>   
<script language="javascript">         
<!--
alert('خود اضافه کنید favorite لطفاً سایت ما را به منوی');       
alert('را انتخاب کنید add to favorite گزینه favorite از منوی');               
alert('می توانید این کا را با کلیدهای میانبر هم انجام دهید');     
alert('را فشار دهید d فقط کلید کنترل را نگهدارید و کلید');        
//-->
</script>
</head>

شما می توانید برای ظاهر شدن کادر هشدار از دکمه ها هم استفاده کنید. فقط کد را در جایی که می خواهید دکمه نشان داده شود قرار دهید. در این حالت شما نیازی به تگهای <script> هم ندارید. این هم یک نمونه از این نوع پیام هشدار:

این هم کد این اسکرپت:

<input type="button" value="اگر این صفحه را مطالعه کرده اید اینجا را کلیک کنید"
onclick="alert('از اینکه به سایت ما مراجعه کردید متشکریم باز هم سری به ما بزنید')">

ما در این دکمه از رویداد onclick استفاده کردیم. کار این رویداد هم مانند onmouseover است با این تفاوت که کد مربوطه را در هنگام کلیک کردن روی آن اجرا می کند.

 

 Source   منبع: انـ اسکین





دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی ,
 

نوشتن متن با استفاده از جاوا اسکرپت (بخش 5)

نویسنده : سرباز گمنام | تاریخ : 03:41 ق.ظ - جمعه 10 شهریور 1391

اموزش نوشتن متن با استفاده از جاوا اسکرپت

در جاوا اسکرپت این امکان وجود دارد که متنی را نوشته و در صفحه نمایش بدهیم. متن مورد نظر را می توانیم قالب بندی کنیم و از تگهای HTML نیز در آن استافده کنیم. برای این کار از فرمان ()document.write استفاده می کنیم که یک فرمان جاوا اسکرپت مخصوص چاپ کردن خروجی در صفحه است. روش کار به صورت زیر است :

نوشتن متنهای ساده

<script language="JavaScript" type="text/javascript">

document.write('متن مورد نظر خود را اینجا بنویسید');

</script>

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

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



نوشتن متنهای قالب بندی شده

با استفاده از فرمان document.write امکان نوشتن متنهای قالب بندی شده با استفاده از تگهای HTML هم وجود دارد. برای اینکار فقط کافیست متن HTML مورد نظر خود را در تابع ()document.write قرار دهید. برای مثال به کد زیر توجه کنید :

<script language="JavaScript" type="text/javascript">

document.write('<h1>این متن با استفاده از جاوا اسکرپت نوشته شده است!</h1>');

</script>

تابع ()document.write با مقدار چند سطری

اگر بخواهیم متنی که با استفاده از جاوا اسکرپت متنی را بنویسیم که در صفحه در چند سطر نمایش داده شود به راحتی می توانیم با وارد کردم <br> در متن مورد نظر یا با سایر تگهای HTML این کار را انجام دهیم. اما اگر بخواهیم مقداری را که به تابع ()document.write می دهیم در چند سطر وارد کنیدم باید مقدار مورد نظر را در هر سطر از هم جدا کرده و با استفاده از عملوند رشته ای + آنها را در چند سطر به هم پیوند بزنیم.

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

اگر کد خود را به صورت زیر بنویسید با خطا مواجه خواهید شد :

<script language="JavaScript" type="text/javascript">

document.write('First part of text

Second part of text');

</script>

برای اینکه با خطا مواجه نشوید و کد شما کار حود را انجام دهد باید آنرا به صورت زیر بنویسید :

<script language="JavaScript" type="text/javascript">

document.write('First part of text'

+

'Second part of text');

</script>

Source   منبع: انـ اسکین






دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی ,
 

معرفی دستور شرطی if...else و کاربردهای مختلف آن (بخش 6)

نویسنده : سرباز گمنام | تاریخ : 03:26 ق.ظ - جمعه 10 شهریور 1391

java script part 6

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

دستور شرطی if

if (condition)

{

دستوری که در صورت درستی شرط اجرا می شود در اینجا قرار می گیرد

}

به یک مثال برای دستور if توجه کنید :

var test = confirm('اگر این پیام را تأیید کنید دستور شرطی اجرا می شود');


if (test == true) {

alert('شما دکمه مورد نظر را کلیک کردید و این پیام به نمایش در آمد');

}

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


دستور شرطی if...else

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

if (condition) {

دستوراتی که در صورت برقراری شرط اجرا می شوند.

}

else {

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

}

در کد بالا ابتدا شرط بررسی می شود و در صورت برقراری آن دستورات مربوطه اجرا می شوند ولی در صورتی که شرط برقرار نباشد دستورات مربوط به قسمت else اجرا می شود.

var yourmark = prompt('یک شماره از 0 تا 20 وارد کنید :','');


if (yourmark > 10) {

alert('شماره ای که وارد کرده ای از 10 بزرگتر است');

}

else {

alert('عبارتی که شما وارد کرده اید از 10 بزرگتر نیست!');

}

برای مشاهده نتیجه مثال بالا لینک زیر را کلیک کنید و در کادری که نمایش داده می شود یک عدد از 0 تا 20 وارد کنید و دکمه OK را کلیک کنید.


استفاده از دستور if..else if...else (دستورات شرطی تو در تو)

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

if (condition 1) {

دستوراتی که در صورت درستی شرط اول اجرا می شوند

}

else if (condition 2) {

دستوراتی که در صورت درستی شرط دوم اجرا می شوند

}

else {

دستوراتی که زمانی که هیچکدام از شرطها صحیح نباشد اجرا می شوند

}

در این روش محدودیتی از نظر تعداد شرطها وجود ندارد و می توانیم به تعداد نامحدود از دستور else if استفاده کنیم ولی در مواردی که تعداد این شرطها خیلی زیاد می شود بهتر است به جای این روش از دستور switch که بعداً توضیح داده خواهد شد استفاده کنیم.

در اینجا مثال قبل را با کمی تغییر برای این روش استفاده می کنیم :

var yourmark = prompt('یک شماره به دلخواه وارد کنید :','');


if (yourmark > 0 && yourmark < 100 ) {

alert('شماره وارد شده بین 0 تا 100 است');

}

else if (yourmark > 100) {

alert('شماره وارد شده از 100 بزرگتر است');

}

else {

alert('عبارت وارد شده یا 0 است یا به جای عدد از حروف استفاده کرده اید');

}

 Source   منبع: انـ اسکین




دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی ,
 

دستور شرطی switch در جاوا اسکرپت (بخش 7)

نویسنده : سرباز گمنام | تاریخ : 03:05 ق.ظ - جمعه 10 شهریور 1391

Java Script

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

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

switch(x) 

{

case مقدار اول:

این کد در صورت برابری متغیر x با مقدار اول اجرا می شود

break    

case مقدار دوم:

این کد در صورت برابری متغیر x با مقدار دوم اجرا می شود

break

default:

این کد در صورتی اجرا می شود که مقدار متغیر x با هیچکدام از مقادیر ذکر شده برابر نباشد

}

در این دستور مقدار متغیر معرفی شده در قسمت switch با مقادیر آورده شده در هر case مقایسه می شود. در صورت مساوی بودن مقادیر کد همان case اجرا می شود و با استفاده از دستور break آورده شده در هر قسمت برنامه پس از اجرای کد آن قسمت به خارج از دستور switch هدایت می شود. در غیر این صورت برنامه به سراغ case بعدی می رود و در صورتی که مقدار متغیر مورد نظر با هیچکدام از case ها برایر نبود کد قسمت default اجرا خواهد شد.

قابل ذکر است که استفاده از default اختیاری است و شما بنا به نیاز خود می توانید از آن استفاده کرده یا آنرا حذف کنید.در دستور switch محدودیتی در تعدار case ها وجود ندارد و می توانید به هر تعدادی که نیاز داری از این مورد استفاده کنید.

در این قسمت به ذکر یک نمونه برای ادستور switch می پردازیم :

به کدی که در اینجا آورده شده است توجه کنید. پس از جرای این کد کادری باز می شود که از شما میخواهد عددی را وارد کنید. با وارد کردن عدد در این کادر و تأیید آن پیامی متناسب با روز معادل آن عدد در هفته ظاهر می شود. البته ما این کار را فقط برای اعداد 1 تا 3 انجام دادیم، شما در صورت تمایل می توانید آنرا تکمیل کنید :

var x=prompt('لطفاً یک عدد بین 1 تا 7 وارد کنید :',' ');


switch (x) {

case '1':

alert('شماره وارد شده مربوط به روز « شنبه » است');

break

case '2':

alert('شماره وارد شده مربوط به روز « یکشنبه » است');

break

case '3':

alert('شماره وارد شده مربوط به روز « دوشنبه » است');

break

case '4':

alert('شماره وارد شده مربوط به روز « سه شنبه » است');

break

case '5':

alert('شماره وارد شده مربوط به روز « چهارشنبه » است');

break

case '6':

alert('شماره وارد شده مربوط به روز « پنجشنبه » است');

break

case '7':

alert('شماره وارد شده مربوط به روز « جمعه » است');

break

default:

alert('روز مربوط به شماره وارد شده در این برنامه وجود ندارد');

}


 Source   منبع: انـ اسکین



دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی ,
 

آموزش کار با استایل (CSS) بخش اول

نویسنده : سرباز گمنام | تاریخ : 08:28 ب.ظ - پنجشنبه 9 شهریور 1391

http://www.bdesolution.com/wp-content/uploads/2011/01/CSSEditLogo.png

CSS یا همان Cascading Style Sheet روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود بدون استفاده از کدهای HTML. از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود جلوگیری کنیم. برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکرپت نیز استفاده کنیم و چون مشکلات جاوا اسکرپت مثلاً غیر فعال بودن جاوا اسکرپت در مرورگر را ندارد با خیالی آسوده تر می توانیم از آن استفاده کنیم.

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

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

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

Source   منبع: انـ اسکین





دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی ,
 

استفاده از کلاس و id در طراحی صفحات با CSS (بخش دوم CSS)

نویسنده : سرباز گمنام | تاریخ : 08:26 ب.ظ - پنجشنبه 9 شهریور 1391

http://up1.iranblog.com/images/u7tp6v9952msb3e4uox.jpg
» سلکتور

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

p.black {color: black}
p.red {color:red
{

در مرحله بعد باید برای هر پاراگرافی که می خواهیم به رنگ مشکی باشد از شناسه "class="black در تگ

استفاده کنیم و برای پاراگراف قرمز از شناسه "class="red. البته نام کلاسها اختیاری است ولی بهتر است آنها را طوری انتخاب کنید که مفهوم داشته باشند تا وقتی که حجم استایل شما بیشتر شد به گنگ نباشد. در مثال زیر می توانید کد مربوط به نوشتن دو پاراگراف بالا را در متن HTML ملاحظه کنید:

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


این متن به رنگ قرمز نمایش داده می شود.

نکته : شما می توانید بیش از یک کلاس برای یک تگ HTML تعریف کنید اما برای این کار نباید دو بار از شناسه class استفاده کرد. بلکه باید در یک شناسه class نام دو کلاس مورد نظر را با یک فاصله بین آنها وارد کرد. برای مثال برای پاراگراف زیر از دو کلاس فرضی red و center استفاده شده است:

این متن پاراگرافی است که تحت تأثیر دو کلاس red و center قرار دارد

در نوشتن استایل می توان از نوشتن نام تگ در سلکتور کلاس چشم پوشی کرد. در این صورت ویژگیهای تعریف شده در آن کلاس بر هر تگ HTML که از کلاس مربوطه در شناسه class آن استفاده شده باشد اثر می گذارد. برای مثال در کلاس زیر ویژگی وسط چین را تعریف می کنیم و از نام تگ در سلکتور کلاس استفاده نمی کنیم:

.center {text-align: center}

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

متن این پاراگراف به صورت وسط چین نمایش داده می شود


متن این قسمت به صورت وسط چین نمایش داده می شود

متن این سرفصل به صورت وسط چین نمایش داده می شود

تذکر : هیچ وقت نام کلاس را با یک عدد شروع نکنید چون در این صورت مرورگرهای Mozilla و Firefox نمی توانند از آن کلاس استفاده کنند.

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

در این مثال از استایل زیر در استفاده می کنیم:

.test { border: #F00 1px double }
.test a { color: green }
.test a:hover { border: yellow 2px solid }

کد HTML زیر برای این مثال مورد استفاده قرار می گیرد:


همانطور که در مثال بالا می بینید خواص لینک آزمایشی شماره 1 تحت تأثیر استایل مورد استفاده برای تگ DIV قرار دارد ولی لینک آزمایشی شماره 2 مانند سایر لینکهای خارج از DIV نمایش داده می شود.

 


  • افزودن استایل به نوع مشخصی از عناصر

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

  • <"input type="text>
    کادرهای متنی که در فرمها استفاده می شود.
  • <"input type="checkbox>
    چک باکس هم با استفاده از تگ به وجود می آید.
  • <"input type="radio>
    در ساختن دکمه های رادیو هم از همان تگ استفاده می شود.
  • <"input type="button>
    این تگ در ساختن هم استفاده می شود.
  • <"input type="submit>
    برای ساختن دکمه ارسال فرم هم از تگ استفاده می شود.

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

فرض کنید می خواهیم فقط عرض کادرهای متنی را در صفحه تغییر دهیم. در صورتی که در استایل از سلکتور input به تنهایی استفاده کنیم عرض همه چک باکسها ، دکمه ارسال، دکمه های رادیو و سایر عناصری که از تگ استفاده کرده اند نیز تغییر می کند. برای انجام این کار می توانید سلکتور را به صورت زیر تعریف کنیم:

input[type="text"] {
width: 200px
}

کد استایلی که در بالا نوشتیم فقط بر روی کادر های متنی که در آنها از شناسه "type="text استفاده شده است اثر می گذارد.

البته این روش ممکن است در مرورگر Internet Explorer پشتیبانی نشود اما مرورگرهای Firefox و Opera از آن پشتیبانی می کنند.

 


سلکتور id

روش دیگری که برای تعریف استایل وجود دارد استفاده از id است. شناسه id احتمالاً در آینده جایگزین شناسه name در تگهای HTML می شود بنا بر این در هرصفحه نباید بیش از یک بار از هر ID استفاده شود. اگر بیش از یک بار از یک id استفاده شود کارایی صفحه تغییری نمی کند ولی صفحه اعتبار خود را از دست می دهد. سلکتور id با علامت # مشخص می شود. با استایل زیر همه عناصر که شناسه "id="border دارند با کادری سبز رنگ نمایش داده می شوند:

#border { border: green thin solid }

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

این یک سرفصل با اندازه 3 است


این قسمت یک div است

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

این یک سرفصل با اندازه 3 است

این قسمت یک div است

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

p#border { border: green thin solid }

استایل بالا فقط روی پاراگرافی که شناسه "id="green در آن به کا رفته اثر می گذارد.

نکته : هرگز نام یک id را با یک عدد آغاز نکنید چون در این صورت مرورگرهای Mozilla و Firefox نمی توانند از آن استفاده کنند.

Source   منبع: انـ اسکین





دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی , رایانه؛ابزار وب ,
 

وارد کردن CSS در تگهای HTML با استفاده از شناسه Style (بخش 3)

نویسنده : سرباز گمنام | تاریخ : 08:17 ب.ظ - پنجشنبه 9 شهریور 1391

h2r2ly286kuatq1szb.jpg

ساده ترین راه برای افزودن استایل به یک صفحه استفاده از شناسه style در تگهای HTML است.
برای افزودن استایل به یک تگ باید عبارت " "=style را وارد تگ مربوطه کنیم و ویژگیهای مورد نیاز خود را بین دو دابل کوت ( " ) وارد می کنیم. مثلاً فرض کنید می خواهیم به یک تگ DIV استایل اضافه کنیم. در این صورت تگ DIV به صورت زیر در می آید.

<div style="property:value"

برای نمونه وقتی بخواهیم متن داخل یک DIV به رنگ سبز نمایش داده شود می توانیم به صورت زیر تگ DIV را بنویسیم:

<div style="color:green">متن داخل DIV </div>

توجه کنید که بین ویژگی color و رنگ سبز ( green ) از علامت دو نقطه ( : ) استفاده شده نه از علامت مساوی که در تگهای HTML استفاده می شود. همچنین لازم نیست مقادیر مورد نظر را بین علامت های نقل قول ( " ) قرار دهیم. می توانید نتیجه به کارگیری کد بالا را در سطر زیر مشاهده کنید:

متن داخل DIV

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

این امکان نیز وجود دارد که به یک تگ HTML بیش از یک ویژگی افزوده شود. تنها کافی است بین ویژگیهای مختلف از یک نقطه ویرگول ( ; ) استفاده کنیم. برای مثال اگر بخواهیم متنی که در یک DIV قرار دارد به رنگ قرمز و به صورت ایتالیک باشد می توانیم به صورت زیر کد DIV را بنویسیم:

<div style="color:red; font-style:italic">این متن قرمز رنگ و ایتالیک است.</div>

نتیجه به صورت زیر خواهد بود:

این متن قرمز رنگ و ایتالیک است.

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

<div style="color:blue; font-style:italic; font-weight:bold; font-size:12pt; text-align:center">متن مورد نظر اینجا قرار می گیرد.</div>

در این مثال ما متنی را با رنگ آبی، ایتالیک، ضخیم، اندازه فونت 12pt و در وسط صفحه خواهیم داشت:

متن مورد نظر اینجا قرار می گیرد.

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

Source   منبع: انـ اسکین





دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی ,
 

تعریف کردن استایل در بخش head صفحه HTML

نویسنده : سرباز گمنام | تاریخ : 08:14 ب.ظ - پنجشنبه 9 شهریور 1391

استفاده از استایلها می تواند به ما کمک کند تا از دوباره نویسی فرمانها جلوگیری کنیم. برای انجام این کار ما می توانیم یک Style را در بخش HEAD در متن HTML خود تعریف کنیم. یک استایل در HEAD با تگ <STYLE> آغاز می شود و با <STYLE/> به پایان می رسد. در قسمت زیر می توانید یک نمونه از استایل را که مشخصاتی را برای تگ <SPAN> تعریف می کند مشاهده کنید که در بخش HEAD در متن قرار گرفته است.

<head>
<style>
<!--
span { color:red; font-style:italic }
-->
</style>
</head>

همانطور که می بینید استایل با تگ <style> آغاز می شود. سپس یک کامنت را شروع می کنیم تا مرورگرهایی که از CSS پشتیبانی نمی کنند استایل را نادیده بگیرند و در صفحه به نمایش در نیاورند. در قسمت بعد این خط را مشاهده می کنید:

span { color:red; font-style:italic }

این خط مشخص می کند که هر بار که در صفحه از تگهای <STYLE> <STYLE/> استفاده می شود. متن بین آنها به رنگ قرمز و به صورت ایتالیک نمایش داده می شود. در نوشتن استایل باید در نظر داشته باشید که نباید از علامتهای کوچکتر و بزرگتر ( < و > ) که در اطراف تگهای HTML استفاده می شود، استفاده کنید. همچنین به جای استفاده از علامتهای نقل قول ( " " ) که در متن HTML استفاده می شود از آکولاد ( { } ) در اطراف خواص استایل استفاده می کنیم. خواص مختلف یک استایل هم به وسیله یک نقطه ویرگول ( ; ) از هم جدا می شوند.

وقتی ما استایلی را در بخش HEAD متن خود برای یک تگ خاص تعریف می کنیم برای محتویات همه تگهایی که استایل برای آن تعریف شده در صفحه مورد استفاده قرار می گیرد. برای مثال وقتی که ما کد بالا را در HEAD متن خود قرار دادیم، هر تگ <SPAN> که در صفحه استفاده شود دارای متنی قرمز و ایتالیک است و نیاز ندارید هر بار دوباره مشخصات متن مورد نظر را تعریف شود.

برای مثال کد زیر را وارد متن HTML خود می کنیم:

<span>این متن قرمز و ایتالیک است،</span> اما این متن خارج تگ &lt;span&gt; است و مشخصات آنرا ندارد.<br>
<span>این متن نیز قرمز و ایتالیک است.</span>

نتیجه را به صورت زیر مشاهده خواهید کرد:

این متن قرمز و ایتالیک است، اما این متن خارج تگ <span> است و مشخصات آنرا ندارد.
این متن نیز قرمز و ایتالیک است.

با این روش ما می توانیم تقریباً خواص همه تگهای HTML را کنترل کنیم، اما این کافی نیست. در قسمتهای بعدی روشهایی را معرفی می کنیم که یک استایل مشخص به وسیله تگهای مختلفی مورد استفاده قرار بگیرد. این کا را با استفاده از CLASS و ID انجام می دهیم.

Source   منبع: انـ اسکین





دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی ,
 

آموزش ۵ تکنیک کاربردی CSS و jQuery

نویسنده : سرباز گمنام | تاریخ : 08:10 ب.ظ - پنجشنبه 9 شهریور 1391

سایت CSS-Tricks در فوتر خود از یک افکت جالب برای آیکون های موجود در آن استفاده کرده که با قرار گرفتن موس روی آنها به شکل زیبایی رنگ و طرحشان عوض میشود! در این مطلب قصد دارم تا نوع ساده ای از این افکت را به شما آموزش دهم که با استفاده از CSS3 میتوان آن را ایجاد کرد.


f6zl8p5h5jjojhn4ecrn.jpg


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

ابتدا لینک و متن های مورد نظر را به صورت زیر ایجاد میکنیم :

<a href="#">
<h3>Panel Title</h3>
<p>Additional information about the panel goes in a paragraph here</p>
</a>

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

.hover-panel {
background-color: #E6E2DF;
color: #B2AAA4;
float: left;
height: 130px;
width: 262px;
margin: 0 10px 10px 0;
padding: 15px;
}
.hover-panel h3 {
font-family: tandelle-1, tandelle-2, Impact, Sans-serif, sans;
font-size: 38px;
line-height: 1;
margin: 0 0 10px;
text-transform: uppercase;
}
.hover-panel p {
font-size: 12px;
width: 65%;
}

کدهای بالا استایل حالت اولیه دکمه است. در ادامه استایل حالت دوم یا Hover را اضافه میکنیم :

.hover-panel:hover {
background-color: #237ABE;
}
.hover-panel:hover h3 {
color: #FFF;
text-shadow: rgba(0, 0, 0, 0.398438) 0px 0px 4px;
}
.hover-panel:hover p {
color: #FFF:
}

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

.hover-panel {
background-image: url(hover-panel-icon.png);
background-position: 292px 10px;
background-repeat: no-repeat;
}
.hover-panel:hover {
background-position: 180px 10px;
}

در مراحل بالا استایل اصلی دکمه را ایجاد کردیم . حالا باید حالت Transition را به آن اضافه کنیم.

با اضافه کردن کدهای زیر، حالت Transition ایجاد میشود.

.hover-panel {
-moz-transition: all 0.2s ease; /* FF3.7+ */
-o-transition: all 0.2s ease; /* Opera 10.5 */
-webkit-transition: all 0.2s ease; /* Saf3.2+, Chrome */
transition: all 0.2s ease;
}

کد CSS پایانی به صورت زیر میشود :

.hover-panel {
background-color: #E6E2DF;
background-image: url(hover-panel-icon.png);
background-position: 292px 10px;
background-repeat: no-repeat;
color: #B2AAA4;
display: block;
float: left;
height: 130px;
width: 262px;
margin: 0 10px 10px 0;
padding: 15px;
-moz-transition: all 0.2s ease; /* FF3.7+ */
-o-transition: all 0.2s ease; /* Opera 10.5 */
-webkit-transition: all 0.2s ease; /* Saf3.2+, Chrome */
transition: all 0.2s ease;
}
.hover-panel h3 {
font-family: tandelle-1, tandelle-2, Impact, Sans-serif, sans;
font-size: 38px;
line-height: 1;
margin: 0 0 10px;
text-transform: uppercase;
}
.hover-panel p {
font-size: 12px;
width: 65%;
}
.hover-panel:hover {
background-color: #237ABE;
background-position: 180px 10px;
}
.hover-panel:hover h3 {
color: #FFF;
text-shadow: rgba(0, 0, 0, 0.398438) 0px 0px 4px;
}
.hover-panel:hover p {
color: #FFF:
}


دمو

Source   منبع: انـ اسکین




دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی , رایانه؛ابزار وب ,
 

استفاده از استایل خارجی برای طراحی صفحات HTML

نویسنده : سرباز گمنام | تاریخ : 08:04 ب.ظ - پنجشنبه 9 شهریور 1391

استفاده از استایل خارجی برای طراحی صفحات HTML


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

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

div { font-family:Arial }
.redtext { color:red }

حالا این متن را با نام example.css ذخیره کنید ( شما می توانید از هر نامی که می خواهید برای ذخیره کردن فایل استفاده کنید، فقط به خاطر داشته باشید که پسوند فایل باید css. باشد. ).

برای پیوند دادن یک فایل استایل خارجی به صفحه HTML باید از تگ <LINK> استفاده کنیم که در بخش HEAD در متن HTML قرار می گیرد. یک نمونه از این تگ را می توانید در اینجا ببینید:

<link rel="stylesheet" type="text/css" href="URL">

شناسه "rel="stylesheet مشخص می کند که فایل مورد نظر شما یک استایل است.

شناسه "type="text/css مشخص کننده نوع متن فایل برای مرورگر است.

شناسه " "=href مشخص کننده محل قرار گرفتن فایل استایل شماست. شما می توانید از آدرس کامل فایل استفاده کنید و یا اگر فایل شما در همان پوشه ای است که متن HTML شما قرار دارد می توانید تنها از نام فایل استفاده کنید.

حالا متن HTML مورد نظر که می خواهید استایل به آن افزوده شود را باز کنید . خط زیر را بین تگ <HEAD> و <HEAD/> وارد کنید. مطمئن شوید که آدرس فایل CSS را درست وارد کرده اید:

<link rel="stylesheet" type="text/css" href="http://www.neopersia.org/css/example.css">

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

حالا هر تگ DIV که در صفحات مورد نظر شما وجود داشته باشد محتویاتی با فونت Arial خواهد داشت. برای مثال فایل example.css به همین صفحه پیوند شده است و در صورتی که در این صفحه از DIV استفاده شود محتویات آن با فونت Arial نمایش داده می شوند:

<div>این متن با فونت Arial نمایش داده خواهد شد.</div>

این هم نتیجه:

این متن با فونت Arial نمایش داده خواهد شد.

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

<p class="redtext">این متن به رنگ قرمز نمایش داده خواهد شد.<p>

نتیجه به این صورت خواهد بود:

این متن به رنگ قرمز نمایش داده خواهد شد.

Source   منبع: انـ اسکین





دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی , رایانه؛ابزار وب ,
 

تنظیم عرض، ارتفاع، و overflow با CSS

نویسنده : سرباز گمنام | تاریخ : 07:59 ب.ظ - پنجشنبه 9 شهریور 1391

تنظیم عرض، ارتفاع، و overflow با CSS


عرض و ارتفاع

width

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

<div style="width:200px">این جمله پس از اینکه عرض آن از 200 پیکسل بیشتر شد در سطرهای بعدی ادامه پیدا می کند.</div>

نتیجه به صورت زیر خواهد بود:

این جمله پس از اینکه عرض آن از 200 پیکسل بیشتر شد در سطرهای بعدی ادامه پیدا می کند.

مقادیری که برای پارامتر width قرار می دهید می تواند بر اساس پیکسل باشد که در این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل است را بنویسید. مقادیر ممکن است بر اساس درصد باشند که در آن صورت باید علامت درصد ( % ) را پس از مقدار قرار دهید.



height

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

  1. ابتدا هنگامی که ارتفاع متن از ارتفاع DIV کمتر است:

  1. <div style="height:100px">ارتفاع این متن از 100 پیکسل کمتر است.</div>

  1. ارتفاع این متن از 100 پیکسل کمتر است.
  2. حالا هنگامی که ارتفاع متن از ارتفاع DIV بیشتر است:

  1. <div style="height:100px">ارتفاع<br>این<br>متن از<br>100<br>پیکسل <br>کمتر<br>است.</div>

  1. ارتفاع

  1. این

  1. متن از

  1. 100

  1. پیکسل

  1. کمتر

  1. است.

اگر بخواهیم ارتفاع DIV همان 100 پیکسل بماند و تغییر نکند باید از پارامتر overflow در استایل استفاده کنیم. این پارامتر به ما این امکان را می دهد که تعیین کنیم وقتی محتویات DIV از عرض یا ارتفاع DIV بزرگتر می شود چگونه نمایش داده شود. در اینجا برای پارامتر overflow از مقدار hidden استفاده می کنیم که تعیین می کند هر چیزی بزرگتر از عرض یا ارتفاع DIV نمایش داده نشود. به مثال زیر توجه کنید:

<div style="height:100px;overflow:hidden">ارتفاع<br>این<br>متن از<br>100<br>پیکسل <br>کمتر<br>است.</div>
ارتفاع

این

متن از

100

پیکسل

کمتر

است.

مقادیری که برای پارامتر height قرار می دهید می تواند بر اساس پیکسل باشد که در این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل است را بنویسید. مقادیر ممکن است بر اساس درصد باشند که در آن صورت باید علامت درصد ( % ) را پس از مقدار قرار دهید.



overflow

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

<div style="width:200px; overflow:hidden"><nobr>طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر ز عرض DIV دیده نمی شوند.</nobr></div>
طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر از عرض DIV دیده نمی شوند.

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

  1. visible

  1. یا قرار دادن این مقدار برای overflow همه محتویاتی که طول یا عرض بیش از اندازه داشته اند نمایش داده خواهند شد.
  2. hidden

  1. این مقدار باعث خواهد شد تا محتویات با طول یا عرض بیش از اندازه نمایش داده نشوند.
  2. scroll

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

به یک مثال توجه کنید:

<div style="width:200px; overflow:scroll; border:dashed 1px #3399FF; white-space:nowrap">

طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر از عرض DIV دیده نمی شوند.

</div>

این هم نتیجه:

طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیش

Source   منبع: انـ اسکین




دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی , رایانه؛ابزار وب ,
 

قالب single.php جدا برای هر موضوع

نویسنده : سرباز گمنام | تاریخ : 05:10 ب.ظ - پنجشنبه 9 شهریور 1391

www.nskin.ir

شاید برای شما پیش بیاید که نیاز داشته باشید برای هر موضوع فایل single.php یا همون ادامه مطلب جداگانه تعریف نمائید.برای این منظور کد زیر را در فایل single.php قرار دهید :


< ?php
$post = $wp_query- >post;

if ( in_category('1') ) {
include(TEMPLATEPATH . '/single1.php');

} elseif ( in_category('2') ) {
include(TEMPLATEPATH . '/single2.php');

} else {
include(TEMPLATEPATH . '/single_other.php');

}

? >


خب همونطور که مشاهده میکنید در قسمت if ( in_category(’1′) ) { به جای ۱ آیدی موضوع مورد نظر رو قرار بدید و در include(TEMPLATEPATH . ‘/single1.php’); به جای single1.php اسم فایل مورد نظر که برای اون موضوع در نظر گرفتید رو جایگزین نمائید.در این کد تعریف شده اگر موضوعات بالا نبود فایل single_other.php اجرا شود. فکر کنم بقیه واضح باشه ! راستی فاصله بین < و ؟ را در < ?php از بین ببرید.

Source   منبع: انـ اسکین





دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی , رایانه؛ابزار وب ,
 

چگونه فقط تصاویر مطالب را در وردپرس نشان دهیم ؟

نویسنده : سرباز گمنام | تاریخ : 05:09 ب.ظ - پنجشنبه 9 شهریور 1391

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

چگونه فقط تصاویر مطالب را در وردپرس نشان دهیم ؟

همانطور که میدونید برای نمایش مطالب در وردپرس ما از کد <?php the_content(__(”)); ?> استفاده میکنیم و خروجی آن هم در مطالب ما تصاویر و متنی هست که در ویرایشگر وردپرس نوشتیم و انتشار دادیم . خوب حالا شاید افرادی باشند که بخواهند تنها تصویر مطلب رو نشان دهند و متن آن را نشان ندهند ، اوین فکری که ممکن است شما بکنید استفاده از پلاگین است . اما اینطور نیست ما امروز با جایگزاری یک کد به جای این کار را انجام میدهیم و تصویر اولی که وارد کردیم در پست را نشان میدهیم .

 

کافیست جای کد :

 

 <?php the_content(__('')); ?>

 

از کد زیر استفاده کنید :

 

 <?php  $szPostContent = $post->post_content;

$szSearchPattern = '~<img [^\>]*\ />~';

preg_match_all( $szSearchPattern, $szPostContent, $aPics );

echo $aPics[0][0]; ?>

Source   منبع: انـ اسکین




دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی , رایانه؛ابزار وب ,
 

نمایش مطالب مرتبط در وردپرس بدون نصب پلاگین

نویسنده : سرباز گمنام | تاریخ : 05:05 ب.ظ - پنجشنبه 9 شهریور 1391

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

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

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

برای این کار به فایل single.php وارد شوید.

و کد زیر را در انتهای حلقه مطالب کپی کنید قبل از نظرات



<!-- start releated post www.nskin.ir --> 

<?php
$tags = wp_get_post_tags($post->ID);
if ($tags) {
    $tag_ids = array();
    foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
    $args=array(
        'tag__in' => $tag_ids,
        'post__not_in' => array($post->ID),
        'showposts'=>5, // تعداد مطالب مرتبط جهت نمایش
        'caller_get_posts'=>1
    );
    $my_query = new wp_query($args);
    if( $my_query->have_posts() ) {
        echo '<ul>';
        while ($my_query->have_posts()) {
            $my_query->the_post();
        ?>
            <li><a href="<?php the_permalink() ?>"
            rel="bookmark" title="<?php the_title_attribute(); ?>">
            <?php the_title(); ?></a>
            </li>
        <?php
        }
        echo '</ul>';
    }
}
  wp_reset_query();
?>

<!-- end releated post www.nskin.ir -->  


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

Source   منبع: انـ اسکین




دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی , رایانه؛ابزار وب ,
 

برترین مطالب وردپرس بدون نصب افزونه

نویسنده : سرباز گمنام | تاریخ : 05:02 ب.ظ - پنجشنبه 9 شهریور 1391

نمایش مطالب محبوب در وردپرس

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

کدی که در زیر قرار دادم در آخر  فایل functions.php  قالبتون قبل از تگ <? قرار بدید.




function popularPosts($num) {
global $wpdb;
 
$posts = $wpdb->get_results("SELECT comment_count, ID,
 post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , $num");
 
foreach ($posts as $post) {
setup_postdata($post);
$id = $post->ID;
$title = $post->post_title;
$count = $post->comment_count;
 
if ($count != 0) {
$popular .= '<li>';
$popular .= '<a href="' . get_permalink($id) . '" title="' . $title . '">'
 . $title . '</a> ';
$popular .= '</li>';
 
}
 
}
 
return $popular;
}

کد پایین رو هم جایی که میخواهید برترین مطالب نمایش درآید قرار دهید
 




<ul>
<?php echo popularPosts(10); ?>
</ul>

با تغییر دادن عدد ۱۰ میتونید تعداد مطالبی که نمایش میدید کم یا زیاد کنید.
بازم اگر سوالی بود تو قسمت نظرات همین بخش مطرح کنید در خدمت هستم


Source   منبع: انـ اسکین





دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی , رایانه؛ابزار وب ,
 

فعال کردن تصویر شاخص در قالب

نویسنده : سرباز گمنام | تاریخ : 04:58 ب.ظ - پنجشنبه 9 شهریور 1391

فعال کردن تصویر شاخص در قالب

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

با استفاده از این قابلیت شما میتونین به هر پستتون یه تصویر ویژه بدین و از اون توی قالبتون به هر نحوی که دوس دارین استفاده ببرین. مثل استفاده از اونها به عنوان تصاویر بندانگشتی … خب برای استفاده از این قابلیت اولین کاری که باید انجام بدین اینه که بیاین و اون رو برای قالبی که دارین ازش استفاده میکنین فعال کنین. شما با جاگذاری کردن کد زیر توی functions.php میتونین این قابلیت رو فعال کنین برای قالبتون و از اون استفاده ببرین.


<?php
 
// Add support for Featured Images
 
if (function_exists('add_theme_support')) {
 
    add_theme_support('post-thumbnails');
 
    add_image_size('index-categories', 150, 150, true);
 
    add_image_size('page-single', 350, 350, true);
 
}
 
?>

خوب حالا این کد رو هم جایی که میخواین تصویرتون نمایش داده بشه بزارید!


<?php if ( has_post_thumbnail()) the_post_thumbnail('post-thumb'); ?>

Source   منبع: انـ اسکین




دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی , رایانه؛ابزار وب ,
 

از صفحات خطای ۴۰۴ راحت شوید

نویسنده : سرباز گمنام | تاریخ : 04:54 ب.ظ - پنجشنبه 9 شهریور 1391

از صفحات خطای ۴۰۴ راحت شوید

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

دانلود افزونه
Source   منبع: انـ اسکین




دسته بندی : رایانه؛اینترنت , رایانه؛برنامه نویسی , رایانه؛ابزار وب ,
 

آخرین مطالب

» دانلود آهنگ "سلام عشق من،سلام دلخوشی"/امید معنوی/امام رضا (ع)/صوتی 3.8 مگابایت ( یکشنبه 24 مرداد 1395 )
» تخمین مسافت ( پنجشنبه 13 اسفند 1394 )
» تخمین مسافت طولی ( پنجشنبه 13 اسفند 1394 )
» سنگر شناسی ( چهارشنبه 12 اسفند 1394 )
» جزوه رزم انفرادی ( چهارشنبه 12 اسفند 1394 )
» آموزش نصب و بوت دوگانه سیستم‌عامل اوبونتو در کنار اندروید ( چهارشنبه 30 دی 1394 )
» دانلود و آموزش برنامه Bluestacks ( دوشنبه 7 دی 1394 )
» نصب سیستم عامل آندروید بر روی کامپیوتر ( دوشنبه 7 دی 1394 )
» دستورات ترمینال لینوکس بصورت کامل ( شنبه 5 دی 1394 )
» مرجع دستورات ترمینال لینوکس ( شنبه 5 دی 1394 )
» برترین توزیع های لینوکس در کاربری های مختلف 2014 ( شنبه 5 دی 1394 )
» کدام توزیع لینوکس را نصب کنم؟ ( شنبه 5 دی 1394 )
» دانلود کتاب عصر ظهور ( جمعه 27 آذر 1394 )
» دیدگاه آیت الله وحید در باره ولایت فقیه ( دوشنبه 23 آذر 1394 )
» تصویر و وصیتنامه شهید علی ناظری ( دوشنبه 23 آذر 1394 )
» جوانان و محبت اهل بیت (ع) ( جمعه 20 آذر 1394 )
» شعارهای حسینی 2 ( دوشنبه 3 فروردین 1394 )
» شعارهای حسینی 1 ( دوشنبه 3 فروردین 1394 )
» آیا خدا وجود دارد؟ ( سه شنبه 15 مرداد 1392 )
» دانستنی هایی از قران و نماز ( سه شنبه 15 مرداد 1392 )
» انگشت نگاری در قرآن ( شنبه 12 مرداد 1392 )
» تعدادی از معجرات علمی قرآن کریم ( جمعه 11 مرداد 1392 )
» 12 اشاره ی علمی قرآن ( جمعه 11 مرداد 1392 )
» قرآن و عسل ( جمعه 11 مرداد 1392 )
» ساختار موتور های پله ای چیست ؟ ( سه شنبه 10 اردیبهشت 1392 )
» سیم پیچ تسلا چیست؟ (Tesla Coil) ( سه شنبه 10 اردیبهشت 1392 )
» در سینه ات نهنگی می تپد! ( سه شنبه 22 اسفند 1391 )
» شعر "کوچه" از "فریدون مشیری" ( سه شنبه 22 اسفند 1391 )
» خرم خاتون و سلطان سلیمان عثمانی-جنگ عثمانی با صفویان ( چهارشنبه 16 اسفند 1391 )
» سلطان صلاح الدین ایوبی ( چهارشنبه 16 اسفند 1391 )
 
صفحات سایت: [ 1 ] [ 2 ]