javascript | طراحی سایت

JavaScript Events

HTML Events رویدادهایی است که برای المان های HTML رخ می دهد.

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

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

مثالي از event ها:

كليك موس
زماني كه يك صفحه يا يك عكس بارگذاري مي شود
موس بر روي يك نقطه خاص بر روي صفحه برود
انتخاب كردن يك فيلد ورودي در فرم HTML
فرستادن يك فرم HTML
يك بار كليك كردن

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

HTML اجازه می دهد مشخصه های event handler همراه با کد جاوااسکریپت به المان های HTML اضافه شود.

<some-HTML-element some-event='some JavaScript'>

در مثال بعدی یک مشخصه onclick همراه با کد به یک المان کلید اضافه شده است:

<button 
onclick='document.getElementById("demo").innerHTML=Date()'>The time is?</button>

در مثال بالا کد JavaScript مقدار المان با ” id=”demo را تغییر می دهد.

در مثال بعدی کد JavaScript مقدار خود المان اصلی را توسط دستور this.innerHTML تغییر می دهد:

<button 
onclick='this.innerHTML=Date()'>The time is?</button>

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

<button onclick="displayDate()">The time is?</button>

توجه کنید که در مثال قبل تابع displayDate به محض رخ دادن رویداد click فراخوانی خواهد شد.

و نکته دیگر مثال اینکه به جای ‘ از ” استفاده شد.

رویدادهای رایج HTML

در ادامه فهرستی از بعضی رویدادهای رایج HTML که در طراحی سایت استفاده می شوند نمایش داده شده است:

رویداد / event	توضیح
onchange	یک المان HTML تغییر کرده است
onclick	کاربر روی یک المان HTML کلیک کرده است
onmouseover	کاربر نشان گر موس را روی یک المان HTML حرکت داده است
onmouseout	کاربر نشان گر موس از روی یک المان HTML کنار برده است
onkeydown	کاربر یک کلید کیبورد را فشرده است
onload	مرورگر لود صفحه را به اتمام رسانده است

این لیست بسیار طولانی تر از آن است که می بینید برای کسب اطلاعات بیشتر به مرجع HTML DOM مراجعه نمایید.

JavaScript چه کارهایی می تواند انجام دهد؟

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

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

روش های مختلفی برای اینکه JavaScript بتواند با رویدادها کار کند قابل استفاده است:

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

JavaScript – دستور for/in

دستور for/in در زبان جاوا اسکریپت بر روی ویژگیها (مشخصه یا property) های یک شی یک حلقه ایجاد می کند. به عبارتی دستورات داخل حلقه برای هریک از property های شی یکبار اجرا می شود.

Syntax

for (variable in object)
{
code to be executed
}

مثال:

var person = {fname:"John", lname:"Doe", age:25}; 

var text = "";
var x;
for (x in person) {
    text += person[x];
}

عبارت Break

عبارت Break حلقه را متوقف می کند و كد بعد از حلقه را اجرا مي كند (اگر كدي بعد از آن نوشته شده باشد)

مثال

<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

عبارت Continue

عبارت Continue اجرای این دور از حلقه جاري را متوقف مي كند و با مقدار بعدي ادامه پيدا مي كند.

مثال

<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

حلقه while و استفاده از آن , JavaScript

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

حلقه while

حلقه ي while ، یک بلاک از کد را تا زمانیکه شرطی برقرار باشد اجرا می کند.

Syntax

while (var<=endvalue)
{
code to be executed
}

توجه: <= مي تواند هر عبارت مقايسه ای باشد.

مثال:

مثال زير يك حلقه را با مقدار اوليه i=0 را تعريف كرده .حلقه تا زماني كه i كوچكتر ويا مساوي 5 است ادامه مي يابد. مقدار i با هر بار اجراي حلقه يك واحد افزايش مي يابد.

مثال:

<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=5)
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
</script>
</body>
</html>

حلقه do … while:

حلقه do … while يك نوع خاصي از حلقه ي while است .اين حلقه يك بلاك از كد را حداقل یک بار اجرا می کند سپس تا زماني كه شرط درست باشد آن را تكرار مي كند.

Syntax

do
{
code to be executed
}
while (var<=endvalue);

مثال:

مثال زير از حلقه ي do … while استفاده كرده است . حلقه ي do … while حداقل يك بار اجرا مي شود ؛ حتي زماني كه شرط غلط باشد. زيرا قبل از اينكه شرط بررسي گردد بدنه آن اجرا مي شود .

<html>
<body>
<script type="text/javascript">
var i=0;
do
{
document.write("The number is " + i);
document.write("<br />");  i++;  }
while (i<=5);
</script>
</body>
</html>

مترجم: فاطمه سیفی

JavaScript و حلقه for

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

حلقه هاي جاوا اسكريپت

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

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

Syntax

for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}

مثال:
مثال زير براي يك حلقه با مقدار ابتدايي i=0 تعريف شده است .حلقه تا زماني كه iكوچكتر يا مساوي 5 باشد ادامه پيدا مي كند . مقدار i با هر بار اجراي حلقه يك واحد افزایش مي يابد.

توجه : مقدار پارامتر اضافه شونده مي تواند منفي باشد و <= مي تواند هر عبارت مقايسه ای باشد.

Example

<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=5;i++)
{
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

حلقه while :
اين حلقه در مبحث بعدي مطرح خواهد شد .

استفاده از توابع در زبان JavaScript

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

گاهی به هنگام طراحی سایت برای جلوگیری از اجرای یک قطعه کد توسط مرورگر می توانید آن را در یک تابع قرار دهید.
یک تابع شامل کدهایی است که زمانی که یک رویداد خاص رخ دهد و یا تابع فراخوانی شود اجرا می شود.
شما ممکن است یک تابع را در هر جایی از صفحه فراخوانی کنید ( یا حتی در صفحات دیگر اگر تابع در داخل فایل با پیوند “.js” جا سازی شده باشد.)
تابع در هر دو قسمت “head” و یا “body” می تواند تعریف شود.
اگر چه برای اطمینان از اینکه قبل از فراخوانی ، آن تابع توسط مرورگر خوانده و بارگذاری شده است می توانید آن را در قسمت < head > قرار دهید.

هنگام طراحی سایت چگونه یک تابع را تعریف کنیم؟

دستورالعمل برای ایجاد تابع:

function functionname(var1,var2,...,varX)
{
some code
}

Var1,var2,… متغیرها و مقدارها را به تابع می فرستند} و { آغاز و پایان یک تابع را تعیین می کنند.
توجه: یک تابع بدون پارامتر باید بعد از نام تابع شامل پرانتز () باشد.

function functionname()
{
some code
}

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

مثالی از یک تابع در جاوا اسکریپت

<html>
<head>
<script type="text/javascript">
    function displaymessage()
    {
       alert("Hello World!");
    }
</script>
</head>

<body>
    <form>
       <input type="button" value="Click me!" onclick="displaymessage()" />
    </form>
</body>
</html>

اگر خط alert(“Hello world!!”) در مثال بالا داخل تابع قرار نگرفته بود ، این خط به محظ لود صفحه اجرا می شد. حالا قبل از اینکه کاربر دکمه را فشار دهد اسکریپت اجرا نمی شود.
ما باید یک رویداد onclick را به دکمه برای اجرای تابع displaymessage() اضافه کنیم تا با کلیک بر روی دکمه این تابع فراخوانی شود.
نکات بیشتری در مورد رویدادهای جاوا ایکریپت را در فصل رویدادها یاد خواهیم گرفت.

عبارت بازگشتی :

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

مثال
تابع زیر باید حاصلضرب دو تابع را برگرداند

<html>
<head>
<script type="text/javascript">
    function product(a,b)
    {
         return a*b;
    }
</script>
</head>

<body>
    <script type="text/javascript">
         document.write(product(4,3));
    </script>
</body>
</html>

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

p=product(2,3);

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

عمر متغیرهای جاوا اسکریپت

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

مترجم: فاطمه سیفی

چطور در JavaScript پنجره popup ایجاد نماییم؟

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

پنجره هشدار

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

Syntax:

alert("sometext");

پنجره تایید

پنجره تایید معمولا زمانی در طراحی وب سایت استفاده می شود که کاربر باید چیزی را قبول یا بررسی کند.
زمانی که یک پنجره تایید ظاهر می شود ، برای ادامه ، کاربر باید بر روی “ok” یا “cancel” کلیک کند.
اگر بر روی “ok” کلیک کند ، پنجره مقدار “true” و اگر بر روی “cancel” کلیک کند مقدار “false” بر می گرداند.

Syntax:

confirm("sometext");

پنجره دریافت پیام Prompt برای طراحی سایت

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

Syntax:

prompt("sometext","defaultvalue");

مترجم: فاطمه سیفی

JavaScript – دستور switch

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

عبارت switch در جاوا اسکریپت

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

Syntax

switch(n)
{
case 1:
  execute code block 1
  break;    
case 2:
  execute code block 2
  break;
default:
  code to be executed if n is
  different from case 1 and 2
}

نحوه کار : اول ما یک عبارت واحد n داریم ( اغلب اوقات یک متغیر) که فقط یک مرتبه ارزیابی می شود . مقادیراین عبارت با مقدار هر case در ساختار مقایسه می شود اگر برابر بود بلاک حاوی آن که وابسته به آن است اجرا می شود . از break برای جلوگیری از اینکه به طور اتوماتیک به case بعدی نرود استفاده می شود .

مثال

<script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.

var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
  document.write("Finally Friday");
  break;
case 6:
  document.write("Super Saturday");
  break;
case 0:
  document.write("Sleepy Sunday");
  break;
default:
  document.write("I'm looking forward to this weekend!");
}
</script>

مترجم: فاطمه سیفی

عبارت های شرطی در JavaScript

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

عبارات شرطی

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

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

عبارت if :

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

Syntax

if (condition)
{
   code to be executed if condition is true
}

توجه کنید که if با حروف کوچک نوشته شده ، استفاده از حروف بزرگ ( IF ) در جاوا اسکریپت پیغام خطا صادر می کند .

مثال 1

<script type="text/javascript">
//Write a "Good morning" greeting if
//the time is less than 10
var d=new Date();
var time=d.getHours();

if (time<10) 
{
document.write("<b>Good morning</b>");
}
</script>

مثال 2

<script type="text/javascript">
//Write "Lunch-time!" if the time is 11
var d=new Date();
var time=d.getHours();

if (time==11) 
{
document.write("<b>Lunch-time!</b>");
}
</script>

توجه : زمانی که شما دو متغیر را مساوی هم قرار می دهید شما باید دو طرف تساوی را هم علامت قرار دهید (==) !

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

عبارت if … else :

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

Syntax

if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}

مثال

<script type="text/javascript">
//If the time is less than 10,
//you will get a "Good morning" greeting.
//Otherwise you will get a "Good day" greeting.
var d = new Date();
var time = d.getHours();

if (time < 10) 
{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
</script>

عبارت if … else if … else :

شما زمانی از if … else if … else باید استفاده کنید که شما می خواهید از بین تعداد زیادی مجموعه ای از خط ها برای اجرا فقط یکی را انتخاب کنید .

Syntax

if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if condition1 and
condition2 are not true
}

مثال

<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>");
}
else if (time>10 && time<16)
{
document.write("<b>Good day</b>");
}
else
{
document.write("<b>Hello World!</b>");
}
</script>

مترجم: فاطمه سیفی

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

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

عملگر مساوی

برای عبارات منطقی و برای تعیین تساوی یا اختلاف بین متغیرها و یا شاخص ها استفاده می شود .
x را مساوی 5 قرار می دهیم . جدول زیر توضیح مقایسه عملگرهاست

عملگر	توضیح	مثال
==	is equal to	x==8 is false
===	is exactly equal to (value and type)	x===5 is true x===”5″ is false
!=	is not equal	x!=8 is true
>	is greater than	x>8 is false
<	is less than	x<8 is true
>=	is greater than or equal to	x>=8 is false
<=	is less than or equal to	x<=8 is true

چگونه از آن استفاده کنیم؟

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

if (age<18) document.write("Too young");

شما می توانید چیزهای بیشتری از عبارات شرطی در بخش بعدی یاد بگیرید

عبارات منطقی

برای تعیین کردن منطق بین متغیرها و یا شاخص ها استفاده می شود .
x=6 و y=3 را در نظر می گیریم. جدول زیر توضیح عملگرهای منطقی است

عملگر	توضیح	مثال
&&	and	(x < 10 && y > 1) is true
\|\|	or	(x==5 \|\| y==5) is false
!	not	!(x==y) is true

عملگر شرطی

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

variablename=(condition)?value1:value2

مثال

greeting=(visitor=="PRES")?"Dear President ":"Dear ";

اگر متغیر visitor مقدار “PRES” بگیرد آنگاه متغیر greeting مقدار “Dear President ” را در خود جای می دهد در غیر این صورت مقدار Dear در آن ذخیره می شود .

مترجم: فاطمه سیفی

برچسب: javascript

JavaScript Events

JavaScript – دستور for/in

JavaScript – دستور break

عبارت Break

عبارت Continue

حلقه while و استفاده از آن , JavaScript

حلقه while

حلقه do … while:

JavaScript و حلقه for

حلقه هاي جاوا اسكريپت

استفاده از توابع در زبان JavaScript

هنگام طراحی سایت چگونه یک تابع را تعریف کنیم؟

مثالی از یک تابع در جاوا اسکریپت

عبارت بازگشتی :

عمر متغیرهای جاوا اسکریپت

چطور در JavaScript پنجره popup ایجاد نماییم؟

پنجره هشدار

پنجره تایید

پنجره دریافت پیام Prompt برای طراحی سایت

JavaScript – دستور switch

عبارت switch در جاوا اسکریپت

عبارت های شرطی در JavaScript

عبارات شرطی

عبارت if :

عبارت if … else :

عبارت if … else if … else :

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

عملگر مساوی

چگونه از آن استفاده کنیم؟

عبارات منطقی

عملگر شرطی