وب سایت آموزش فارسی زبان های تحت وب
http://webfocus.ir/index.html

http://www.w3schools.com/default.asp


موضوعات مرتبط: آموزش زیان های برنامه نویسی

تاريخ : یکشنبه بیست و هفتم بهمن ۱۳۹۲ | 8:42 | نویسنده : حمید مقصودی |
آموزش JavaScript قسمت نهم

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

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

نحو (Syntax) :
1
2
3
4
for (گام پرش + متغییر شمارنده = متغییر شمارنده ; حد بالای < متغییر شمارنده ; حد پایین = متغییر شمارنده )
  {
  دستوراتی که باید تکرار شوند
  }

مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
For Loop Example
"text/javascript">
var myArray = ["karaj","tehran","alborz"];
var arrayLength = myArray.length;
for (var count = 0; count < arrayLength; count++ ) {
alert(myArray[count]);
}

توضیح : در مثال بالا ایتدا در خط 9 نهم یک آرایه رشته ای حاوی 3 رشته تعریف می کنیم { یک آرایه شامل متغییر هایی می باشد که با نامی واحد تعریف می شوند و با استفاده از اندیس ها متمایز می شوند.اندیس آرایه ها از عدد صفر شروع می شود }
سپس در خط دهم توسط دستور length طول آرایه را بدست می آوریم تا آن را به عنوان حد بالای حلقه به کار ببریم.
یعنی در مثال بالا حد پایین برابر صفر 0 می باشد و حد بالای آن برابر سه 3 می باشد.در ابتدای حلقه شرط حلقه بررسی می گردد { آیا 3>0 می باشد }، از آنجا که شرط برقرار است دستورات داخل حلقه اجرا می شود یعنی توسط دستور alert مقدار اولین عنصر آرایه که با اندیس صفر 0 مشخص شده است نمایش داده می شود.سپس توسط گام پرش ++count یک واحد به شمارنده حلقه اضافه می شود، سپس مجدد شرط حلقه بررسی می شود { آیا 3>1 می باشد } ، از آنجا که شرط برقرار است دستورات داخل حلقه اجرا می شود یعنی توسط دستور alert مقدار دومین عنصر آرایه که با اندیس یک 1 مشخص شده است نمایش داده می شود.مجددا توسط گام پرش ++count یک واحد به شمارنده حلقه اضافه می شود، سپس مجدد شرط حلقه بررسی می شود { آیا 3>2 می باشد }، ، از آنجا که شرط برقرار است دستورات داخل حلقه اجرا می شود یعنی توسط دستور alert مقدار دومین عنصر آرایه که با اندیس دو 2 مشخص شده است نمایش داده می شود.در نهایت توسط گام پرش ++count یک واحد دیگر به شمارنده حلقه اضافه می شود، با بررسی حلقه ب{ آیا 3>3 می باشد }،متوجه می شویم که شرط برقرار نیست لذا دستورات داخل حلقه اجرا نمی شود و از حلقه خارج می شویم.

مثالی دیگر :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 

Click the button to loop through a block of code five times.

"demo">

 
function myFunction()
{
var x="",i;
for (i=0;i<5;i++)
  {
  x=x + "The number is " + i + "
";
  }
document.getElementById("demo").innerHTML=x;
}
 

توضیح : در مثال بالا ابتدا در خط هفتم 7،یک پاراگراف تعریف می کنیم
1

"demo">

سپس در خط دهم 10 با استفاده از دستور
1
function myFunction()
یک تابع با نام myFunction تعریف می کنیم.
سپس توسط حلقه ی FOR دستور خود را به تعداد 5 مرتبه تکرار می کند.سپس محتوای متغییر X که متغییری رشته ای است توسط دستور
1
document.getElementById("demo").innerHTML=x;
چاپ می شود.
  • حلقه های یا تعداد تکرار نا مشخص : از این نوع حلقه ها زمانی استفاده می کنیم که نمی دانیم دستورات را به چه تعدادی می خواهیم تکرار کنیم و حلقه ی ما صرفا وابسته به یک شرط می باشد یعنی تا زمانی که شرط برقرار است دستورات حلقه اجرا می شود.یکی از معروفترین نمونه های این نوع حلقه، حلقه ی WHILE می باشد :

نحو (Syntax) :
1
2
3
4
while (شرط تکرار حلقه)
  {
 دستوراتی که باید تکرار شوند
  }

مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 

Click the button to loop through a block of as long as i is less than 5.

"demo">

 
function myFunction()
{
var x="",i=0;
while (i<5)
  {
  x=x + "The number is " + i + "
";
  i++;
  }
document.getElementById("demo").innerHTML=x;
}
 

توضیح : در اینجا ما مثال مربوط به FOR را با استفاده از WHILE پیاده سازی کرده ایم.

حلقه ی do...while : این حلقه دقیقا مشابه WHILE می باشد با این تفاوت که دستورات آن حداقل یک بار اجرا می شوند و آن هم به این دلیل است که شرط مربوط به این حلقه در انتهای حلقه بررسی می شود .

نحو (Syntax) :
1
2
3
4
5
do
  {
  دستوراتی که بایستی تکرار شوند
  }
while (شرط حلقه);

مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 

Click the button to loop through a block of as long as i is less than 5.

"demo">

 
function myFunction()
{
var x="",i=0;
do
  {
  x=x + "The number is " + i + "
";
  i++;
  }
while (i<5) 
document.getElementById("demo").innerHTML=x;
}
 


موضوعات مرتبط: آموزش زیان های برنامه نویسی

تاريخ : چهارشنبه بیست و نهم خرداد ۱۳۹۲ | 8:55 | نویسنده : حمید مقصودی |
آموزش JavaScript قسمت هشتم

ساختار شرطی switch : از این ساختار زمانی استفاده می کنیم که بخواهیم بر اساس مقادیر مختلف یک متغییر،تصمیمات متفاوتی بگیریم و دستورات متفاوتی را اجرا کنیم.معمولا زمانی که تعداد حالات (case) زیاد باشد از این ساختار به جای ساختار If...else if...else Statement، استفاده می کنیم.در این ساختار ابتدا محتوای متغییر ارزیابی شده،سپس تک تک حالات (case) از بالا به پایین بررسی می شوند،در صورتیکه یکی از حالات برقرار باشد دستورات آن اجرا می شود تا به کلمه break برسد،زمانی که به کلمه break رسید از ساختار switch خارج می شود.و در صورتیکه هیچ یک از حالات برقرار نباشد،دستورات پیش فرض ( default ) اجرا می شوند.

نحو (Syntax) :
1
2
3
4
5
6
7
8
9
10
11
switch(متغییر مورد نظر)
{
case 1:
   دستورات 1
  break;
case 2:
     دستورات 2
  break;
default:
  دستورات پیش فرض
}


نکته : دقت داشته باشید که در صورتیکه کلمه break برای یک case مشخص نشود،اگر شرط برقرار باشد سیستم دستورات را اجرا می کند تا به یک break برسد،مثلا در مثال زیر اگر شرط اول ( case )برقرار باشد دستورات شرط دوم ( case ) نیز اجرا می شود زیرا شرط اول break ندارد.
1
2
3
4
5
6
7
8
9
10
11
switch(متغییر مورد نظر)
{
case 1:
   دستورات 1
 
case 2:
     دستورات 2
  break;
default:
  دستورات پیش فرض
}

مثال : در مثال زیر،ما ابتدا کد روز هفته را بدست می آوریم،سپس براساس عدد بدست آمده پیغام مناسبی را نمایش می دهیم.در واقع کد روز بدست آمده درون متغییر day قرار می گیرد،سپس محتوای این متغییر با تک تک case ها مقایسه می شود،هرجا که مقدارشان با یکدیگر برابر بود،دستورات مربوط به آن case اجرا می شود :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 

Click the button to display what day it is today.

 
 

"demo">

 
"text/javascript">
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
  {
  case 0:
    x="Today it's Sunday";
    break;
  case 1:
    x="Today it's Monday";
    break;
  case 2:
    x="Today it's Tuesday";
    break;
  case 3:
    x="Today it's Wednesday";
    break;
  case 4:
    x="Today it's Thursday";
    break;
  case 5:
    x="Today it's Friday";
    break;
  case 6:
    x="Today it's Saturday";
    break;
  }
document.getElementById("demo").innerHTML=x;
}
 

استفاده از دستور default : دستورات این بخش از ساختار Switch زمانی اجرا می شوند که هیچ یک از case ها با مقدار متغییر برابر نباشند :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

Click the button to display a message based on what day it is today.

 
 

"demo">

 
"text/javascript">
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
  {
  case 6:
    x="Today it's Saturday";
    break;
  case 0:
    x="Today it's Sunday";
    break;
  default:
    x="Looking forward to the Weekend";
  }
document.getElementById("demo").innerHTML=x;
}
 

جعبه های هشدار در جاوا اسکریپت ( Alert Box ) : از این دستور زمانی استفاده می کنیم که بخواهیم مطمئن شویم،کاربر از موضوعی اطلاع کامل دارد.در واقع توسط جعبه های هشدار سعی داریم تا کاربر را از موضوعی خاص مطلع کنیم :

نحو (Syntax) :
1
alert("متن مورد نظر");

مثال : در مثال زیر ما تابعی با نام myFunction تعریف کرده ایم ،که این تابع یک جعبه هشدار را به نمایش می گذارد.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"text/javascript">
function myFunction()
{
alert("Hello! I am an alert box!");
}
 
"button" onclick="myFunction()" value="Show alert box" />
 

جعبه های تایید در جاوا اسکریپت ( Confirm Box ) : از این دستور زمانی استفاده می کنیم که بخواهیم کاربر عملی را تایید یا در واقع قبول کند،در صورتی که کاربر بر روی دکمه ی ( OK ) کلیک کند،این دستور مقدار ( true ) را باز می گرداند و در صورتی که کاربر بر روی دکمه ی ( Cancel ) کلیک کند،این دستور مقدار ( false ) را باز می گرداند.

نحو (Syntax) :
1
confirm("متن مورد نظر");

مثال : در اینجا ما با یک مثال متوجه می شویم که نحوه عملکرد این دستور به چه شکلی است.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 

Click the button to display a confirm box.

 
 

"demo">

 
"text/javascript">
function myFunction()
{
var x;
var r=confirm("Press a button!");
if (r==true)
  {
  x="You pressed OK!";
  }
else
  {
  x="You pressed Cancel!";
  }
document.getElementById("demo").innerHTML=x;
}
 


جعبه های اعلان در جاوا اسکریپت ( Prompt Box ) : از این دستور زمانی استفاده می کنیم که بخواهیم از کاربر مقداری را به عنوان ورودی دریافت کنیم.در صورتی که کاربر بر روی دکمه ی ( OK ) کلیک کند،این دستور مقدار وارد شده توسط کاربر را باز می گرداند و در صورتی که کاربر بر روی دکمه ی ( Cancel ) کلیک کند،این دستور مقدار ( null) یا تهی را باز می گرداند.

نحو (Syntax) :
1
prompt("مقدار پیش فرض","متن مورد نظر");

نکته : دقت داشته باشید وارد کردن مقدار پیش فرض اختیاری می باشد.در صورتی که مقداری را وارد کنید، این مقدار به صورت پیش فرض و از قبل وارد شده درون کادر به نمایش در می آید.

مثال :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 

Click the button to demonstrate the prompt box.

 
 

"demo">

 
"text/javascript">
function myFunction()
{
var x;
 
var name=prompt("Please enter your name","Harry Potter");
 
if (name!=null)
  {
  x="Hello " + name + "! How are you today?";
  document.getElementById("demo").innerHTML=x;
  }
}

نحوه پرش به خط بعد در جاوا اسکریپت ( Line Breaks ) : برای این منظور ما از کاراکتر کنترلی ( n\ ) استفاده می کنیم.

مثال :در اینجا ما متن درون جعبه هشدار را در دو خط به نمایش می گذاریم :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 

Click the button to demonstrate line-breaks in a popup box.

 
 

"demo">

 
"text/javascript">
function myFunction()
{
alert("Hello\nHow are you?");
}
 


موضوعات مرتبط: آموزش زیان های برنامه نویسی

تاريخ : چهارشنبه بیست و نهم خرداد ۱۳۹۲ | 8:54 | نویسنده : حمید مقصودی |
آموزش JavaScript قسمت هفتم

ساختار شرطی switch : از این ساختار زمانی استفاده می کنیم که بخواهیم بر اساس مقادیر مختلف یک متغییر،تصمیمات متفاوتی بگیریم و دستورات متفاوتی را اجرا کنیم.معمولا زمانی که تعداد حالات (case) زیاد باشد از این ساختار به جای ساختار If...else if...else Statement، استفاده می کنیم.در این ساختار ابتدا محتوای متغییر ارزیابی شده،سپس تک تک حالات (case) از بالا به پایین بررسی می شوند،در صورتیکه یکی از حالات برقرار باشد دستورات آن اجرا می شود تا به کلمه break برسد،زمانی که به کلمه break رسید از ساختار switch خارج می شود.و در صورتیکه هیچ یک از حالات برقرار نباشد،دستورات پیش فرض ( default ) اجرا می شوند.

نحو (Syntax) :
1
2
3
4
5
6
7
8
9
10
11
switch(متغییر مورد نظر)
{
case 1:
   دستورات 1
  break;
case 2:
     دستورات 2
  break;
default:
  دستورات پیش فرض
}


نکته : دقت داشته باشید که در صورتیکه کلمه break برای یک case مشخص نشود،اگر شرط برقرار باشد سیستم دستورات را اجرا می کند تا به یک break برسد،مثلا در مثال زیر اگر شرط اول ( case )برقرار باشد دستورات شرط دوم ( case ) نیز اجرا می شود زیرا شرط اول break ندارد.
1
2
3
4
5
6
7
8
9
10
11
switch(متغییر مورد نظر)
{
case 1:
   دستورات 1
 
case 2:
     دستورات 2
  break;
default:
  دستورات پیش فرض
}

مثال : در مثال زیر،ما ابتدا توسط تابع زیر ،عدد مربوط به روز هفته را بدست می آوریم و در یک متغییر قرار می دهیم ،سپس با بررسی عدد بدست آمده که در درون متغییر " day " قرار دارد پیغام مناسبی را نمایش می دهیم :
1
var day=new Date().getDay();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 

Click the button to display what day it is today.

 
 

"demo">

 
"text/javascript">
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
  {
  case 0:
    x="Today it's Sunday";
    break;
  case 1:
    x="Today it's Monday";
    break;
  case 2:
    x="Today it's Tuesday";
    break;
  case 3:
    x="Today it's Wednesday";
    break;
  case 4:
    x="Today it's Thursday";
    break;
  case 5:
    x="Today it's Friday";
    break;
  case 6:
    x="Today it's Saturday";
    break;
  }
document.getElementById("demo").innerHTML=x;
}
 

مثال : در اینجا مثالی دیگر را بیان می کنیم که دراین مثال،اگر روز شنبه یا یکشنبه باشد هر کدام پیغامی مناسب صادر می کنند و در صورتیکه در هیچ کدام از این دو روز نباشیم،پیغام مربوط به default اجرا می شود :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

Click the button to display a message based on what day it is today.

 
 

"demo">

 
"text/javascript">
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
  {
  case 6:
    x="Today it's Saturday";
    break;
  case 0:
    x="Today it's Sunday";
    break;
  default:
    x="Looking forward to the Weekend";
  }
document.getElementById("demo").innerHTML=x;
}
 

موضوعات مرتبط: آموزش زیان های برنامه نویسی

تاريخ : چهارشنبه بیست و نهم خرداد ۱۳۹۲ | 8:54 | نویسنده : حمید مقصودی |
آموزش JavaScript قسمت ششم


 ساختارهای شرطی در Java Script :
ما از ساختارهای شرطی به منظور انجام عملیات متفاوت بر اساس شرایط متفاوت،استفاده می کنیم.
انواع ساختارهای شرطی در Java Script :
نوع اول : ساختار شرطی if statement : از این ساختار زمانی استفاده می کنیم که بخواهیم یک یا چند دستور،تنها در صورتیکه شرط برقرار باشد اجرا شوند :
نحو (Syntax) :

1
2
3
4
if (شرط)
  {
  دستورات
  }

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

در مثال زیر در صورتیکه ساعت کمتر از 8 عصر باشد،پیغام مناسب (Good day) صادر می شود :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 

Click the button to get a "Good day" greeting if the time is less than 20:00.

 
 

"demo">

 
"text/javascript">
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<20)
  {
  x="Good day";
  }
document.getElementById("demo").innerHTML=x;
}
 

نوع دوم : ساختار شرطی If...else Statement : از این ساختار زمانی استفاده می کنیم که بخواهیم یک یا چند دستور،تنها در صورتیکه شرط برقرار باشد اجرا شوند (دستورات 1) و در غیر اینصورت یعنی اگر شرط برقرار نباشد دستور یا دستورات دیگری را اجرا کند (دستورات 2) :

نحو (Syntax) :
1
2
3
4
5
6
7
8
if (شرط)
  {
  دستورات 1
  }
else
  {
  دستورات 2
  }

در مثال زیر در صورتیکه ساعت کمتر از 8 عصر باشد،پیغام مناسب (Good day) صادر می شود و در غیر این صورت پیغامی مناسب (Good evening) ظاهر می شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 

Click the button to get a time-based greeting.

 
 

"demo">

 
"text/javascript">
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }
document.getElementById("demo").innerHTML=x;
}
 

نوع سوم : ساختار شرطی If...else if...else Statement : توسط این ساختار شما می توانید چندین شرط را بررسی کنید (به تعداد نا محدود)،در این حالت شرط ها از بالا به پایین بررسی می شوند،هرگاه شرطی درست باشد دستورات مربوط به آن اجرا شده (دستورات 1) و از ساختار شرطی خارج می شویم ( یعنی سایر شرط ها بررسی نمی شوند )، اما اگر شرط اول درست نباشد، شرط دوم بررسی می شود و این کار تا انتها ادامه پیدا می کند و در صورتیکه هیچ یک از شرط ها برقرار نباشند،دستورات مربوط به else اجرا می شوند :

نحو (Syntax) :
1
2
3
4
5
6
7
8
9
10
11
12
if ( شرط 1 )
  {
  دستورات 1
  }
else if ( شرط 2  )
  {
    دستورات 2
  }
else
  {
    دستورات 3
  }

در مثال زیر در صورتیکه شرط اول برقرار باشد (یعنی اگر ساعت کمتر از 10 صبح باشد) پیغامی مناسب ( Good morning ) صادر می شود،در غیر این صورت شرط دوم بررسی می گردد (یعنی اگر ساعت کمتر از 8 عصر باشد) پیغام مناسب ( Good day) صادر می شود ،اما اگر این شرط هم برقرار نباشد دستورات ( Good evening) مربوط به else اجرا می شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 

Click the button to get a time-based greeting.

 
 

"demo">

 
"text/javascript">
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<10)
  {
  x="Good morning";
  }
else if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }
document.getElementById("demo").innerHTML=x;
}
 


موضوعات مرتبط: آموزش زیان های برنامه نویسی

تاريخ : چهارشنبه بیست و نهم خرداد ۱۳۹۲ | 8:53 | نویسنده : حمید مقصودی |
آموزش JavaScript قسمت پنجم


 عملگرها در جاوا اسکریپت :
در این قسمت قصد داریم با دو مفهوم عملوند و عملگر آشنا شویم : عملگر : به علائم و نشانه هایی گفته می شود که بر روی یکسری از مقادیر عملیات خاصی را انجام می دهند (فاعل). عملوند : به مقادیر یا متغییرهایی گفته می شود که عملگرها بر روی آنها کار می کنند (مفعول).
به طور مثال در نمونه برنامه ی زیر : متغییرهای x و y و z عملوند محسوب می شوند و علائم انتساب " = " و حاصل جمع " + " عملگر محسوب می شوند :

1
2
3
y=5;
z=2;
x=y+z;

انواع عملگرها در JavaScript :

عملگرهای محاسباتی : از این عملگرها به منظور انجام عملیات محاسباتی استفاده می شود :
Image


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


عملگرهای " + " در رشته ها : از این عملگر به منظور اتصال دو رشته به یکدیگر استفاده می شود :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 

Click the button to create and add string variables.

 

"demo">

 
"text/javascript">
function myFunction()
{
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
document.getElementById("demo").innerHTML=txt3;
}
 

در مثال زیر ما یک فضای خالی بین دو رشته ایجاد کرده ایم :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 

Click the button to create and add string variables.

 

"demo">

 
"text/javascript">
function myFunction()
{
txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;
document.getElementById("demo").innerHTML=txt3;
}
 

مثالی دیگر :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 

Click the button to create and add string variables.

 

"demo">

 
"text/javascript">
function myFunction()
{
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
document.getElementById("demo").innerHTML=txt3;
}
 

در مثال زیر تفاوت جمع دو عدد با جمع دو کاراکتر عدد نمایش داده شده است :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 

Click the button to add numbers and strings.

 

"demo">

 
"text/javascript">
function myFunction()
{
var x=5+5;
var y="5"+5;
var z="Hello"+5;
 
var demoP=document.getElementById("demo");
demoP.innerHTML=x + "
" + y + "
" + z;
}
 

عملگرهای مقایسه ای : از این عملگرها به منظور انجام عملیات مقایسه ای استفاده می شود،حاصل این عملگر ها همواره یک نتیجه منطقی (درست یا غلط) می باشد :

برای متوجه شدن جدول زیر،فرض کنید x=5 است :
Image


ما از عملگرهای مقایسه ای معمولا در ساختارهای شرطی (در قسمت های بعدی شرح می دهیم) استفاده می کنیم :
1
if (age<18) x="Too young";

عملگرهای منطقی : از این عملگرها به منظور انجام عملیات منطقی استفاده می شود، این عملگر ها همواره بر روی مقادیر منطقی (درست یا غلط) ( true , false )عمل می کنند :

برای درک جدول زیر فرض کنید x=6 و y=3 :
Image


عملگر شرطی : در این عملگر اگر شرط درست باشد مقدار اول درون متغییر قرار می گیرد،در غیر اینصورت مقدار دوم در متغییر قرار می گیرد :

در مثال زیر ابتدا سن شخص دریافت می شود،در صورتیکه سنش بزرگتر یا مساوی 18 باشد پیغامی مبنی بر توانایی "رای دادن" صادر می شود و در غیر اینصورت پیغامی دیگر صادر می شود مبنی بر عدم توانایی "رای دادن" :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 

Click the button to check the age.

 
Age:"age" value="18" />

Old enough to vote?

 

"demo">

 
"text/javascript">
function myFunction()
{
var age,voteable;
age=document.getElementById("age").value;
voteable=(age<18)?"Too young":"Old enough";
document.getElementById("demo").innerHTML=voteable;
}
 


موضوعات مرتبط: آموزش زیان های برنامه نویسی

تاريخ : چهارشنبه بیست و نهم خرداد ۱۳۹۲ | 8:52 | نویسنده : حمید مقصودی |
آموزش JavaScript قسمت چهارم


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

  • متغییرها در واقع ظروفی هستند برای نگداری موقت داده ها و اطلاعات.

هر متغییری دارای یک نام است که نام می توان یک حرف کوتاه مثل "x" یا یک کلمه معنادار مثل "carname" باشد.

قوانین نام گذاری متغییرها در جاوا اسکریپت :
  • در نام گذاری متییرها دقت کنید،زیرا جاوا اسکریپت نسبت به بزرگی و کوچکی حروف حساس است یعنی "y" و "Y" دو متغییر مجزا محسوب می شوند.
  • نام متغییر بایستی با یکی از حروف انگلیسی یا علامت زیر خط "_" یا علامت "$" شروع شود :

نحوه اعلان یا تعریف یک متغییر در جاوا اسکریپت :

برای تعریف یک متغییر می بایست از کلمه کلیدی " var " استفاده کنید:
1
var carname;

زمانی که یک متغییر ساخته می شود دارای محتوای تهی می باشد و شما برای مقداردهی آن می توانید از عملگر مساوی "=" استفده کنید :
1
carname="Volvo";

شما می توانید یک متغییر را در زمان تعریف مقدار دهی اولیه کنید :
1
var carname="Volvo";

در مثال زیر شما می بینید که مقدار یک متغییر به عنوان محتوای یک المان HTML به کار رفته است :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 

Click the button to create a variable, and display the result.

 
 

"demo">

 
"text/javascript">
function myFunction()
{
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
}
 

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

متغییرهای محلی در جاوا اسکریپت :

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

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

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

مقداردهی به متغییری که تعریف نشده است :

اگر شما به متغییری که اعلان یا در واقع تعریف نشده است،مقدار بدهید،جاوا اسکریپت آن را به عنوان متغییر سراسری تعریف می کند :
1
carname="Volvo";


موضوعات مرتبط: آموزش زیان های برنامه نویسی

تاريخ : چهارشنبه بیست و نهم خرداد ۱۳۹۲ | 8:51 | نویسنده : حمید مقصودی |
آموزش JavaScript قسمت سوم


جاوا اسکریپت در واقع دنباله ای از دستورات می باشد که توسط مرورگر اجرا می شوند.
نکته : جاوا اسکریپت نسبت به بزرگی و کوچکی حروف حساس است در واقع Case Sensitive است.
جملات و دستورات جاوا اسکریپت :
دستورات جاوا اسکریپت در واقع فرمان هایی به مرورگر هستند،هدف از این فرمان ها این است که به مرورگر بگویند که چه کاری باید انجام دهد.
به طور مثال در مثال زیر،دستورات جاوا اسکریپت به مرورگر فرمان می دهد که متن "Hello Dolly" را به عنوان محتوای یک المان HTML واردکند :

1
document.getElementById("demo").innerHTML="Hello Dolly";

نکته : در جاوا اسکریپت استاندارد استفاده از علامت ";" در انتهای دستورات اختیاری است،زیرا مرورگر رسیدن به انتهای خط را به عنوان انتهای دستور در نظر می گیرند.البته استفاده کردن از سمی کالن باعث می شود که شما بتوانید در یک خط چندین دستور جاوا اسکریپت وارد کنید.

در پایین مثالی کامل تر آورده ام :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 

My Web Page

 

"demo">A Paragraph.

 

"myDIV">A DIV.

 
"text/javascript">
document.getElementById("demo").innerHTML="Hello Dolly";
document.getElementById("myDIV").innerHTML="How are you?";
 

بلوک های دستور در جاوا اسکریپت :

جملات و دستورات جاوا اسکریپت می تواند با هم در بلوک های گروه بندی شده است.یک بلوک از دستورات با براکت باز و براکت بسته احاطه می شود "{}".هدف از ایجاد یک بلاک دستورات اجرای دنباله ای از دستورات با یکدیگر است.نمونه ای از بلاک های دستورات "توابع" هستند.
در مثال زیر یک تابع محتوای دو المان HTML را دستکاری می کند :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 

My Web Page

 

"demo">A Paragraph.

 

"myDIV">A DIV.

 
 
"text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML="Hello Dolly";
document.getElementById("myDIV").innerHTML="How are you?";
}
 

توضیحات (comments) در جاوا اسکریپت :

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

نظرات تک خطی را می توان با این دو علامت شروع کرد "" :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 

"myH1">

 

"myP">

 
"text/javascript">
// Write to a heading:
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// Write to a paragraph:
document.getElementById("myP").innerHTML="This is my first paragraph.";
 

Note: The comments are not executed.

 

توضیحات چند خطی این گونه استفاده می شوند :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 

"myH1">

 

"myP">

 
"text/javascript">
/*
The code below will write
to a heading and to a paragraph,
and will represent the start of
my homepage:
*/
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
 

Note: The comment-block is not executed.

 

نکته : شما می توانید با استفاده از توضیحات در زمان خطایابی از اجرای یک یا چند خط از دستورات به طور موقت جلوگیری کنید :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 

"myH1">

 

"myP">

 
"text/javascript">
//document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
 

Note: The comment is not executed.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 

"myH1">

 

"myP">

 
"text/javascript">
/*
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
*/
 

Note: The comment-block is not executed.

 

نکته : شما می توانید توضیحات خود را در انتهای یک خط دستور وارد کنید،در این حالت توضیحات هیچ تاثیری بر کده نخواهند داشت :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 

"myP">

 
"text/javascript">
var x=5; // declare a variable and assign a value to it
x=x+2; // Add 2 to the variable x
var demoP=document.getElementById("myP") // access the P
demoP.innerHTML="x=" + x; // write the value of x to the P
 

Note: The comments are not executed.

 


موضوعات مرتبط: آموزش زیان های برنامه نویسی

تاريخ : چهارشنبه بیست و نهم خرداد ۱۳۹۲ | 8:51 | نویسنده : حمید مقصودی |
آموزش JavaScript قسمت دوم


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 

My Web Page

 

"demo">A Paragraph.

 
"text/javascript">
document.getElementById("demo").innerHTML="My First JavaScript";
 

اضافه کردن مستقیم محتوا درون سند HTML :
1
2
3
4
5
6
7
8
9
10
11
12
 

My First Web Page

 
"text/javascript">
document.write("

My First JavaScript

");
 
همانطور که در مثال بالا مشاهده می کنید ما یک تگ

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

جاوا اسکریپت می تواند در بخش body و در بخش HEAD یک صفحه HTML قرار داده شود :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<body>
 
<h1>My Web Pageh1>
 
<p id="demo">A Paragraph.p>
 
<script type="text/javascript">
document.getElementById("demo").innerHTML="My First JavaScript";
script>
 
body>
html>

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

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

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

قرار دادن توابع درون head در یک سند HTML :

در مثال زیر تابعی را که در بخش head سند HTML خود قرار داده ایم زمانی که رویداد کلیک برای دکمه رخ دهد اجرا می شود :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
"text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
 
 

My Web Page

 

"demo">A Paragraph.

 
 

در مثال زیر تابعی را که در بخش body سند HTML خود قرار داده ایم زمانی که رویداد کلیک برای دکمه رخ دهد اجرا می شود :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 

My First Web Page

 

"demo">A Paragraph.

 
 
"text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
 

شما می توانید تعداد نامحدودی از اسکریپت ها را در سند HTML قرار دهید، و شما می توانید از اسکریپت ها در هر دو بخش body و head را همزمان داشته باشید.

استفاده از جاوا اسکریپت به عنوان یک فایل خارجی :

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

در فایل های جاوا اسکریپت خارجی شما نمی توانید از تگ script استفاده کنید،بلکه بایستی فایل های جاوا اسکریپت خارجی را با پسوند JS. بسازید و ذخیره کنید.سپس در زمان استفاده از یک فایل جاوا اسکریپت خارجی بایستی آدرس و نام فایل جاوا اسکریپت را با پسون js درون خاصیت SRC تگ script در سند HTML قرار دهید.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 

My Web Page

 

"demo">A Paragraph.

 
 

Note: The actual script is in an external script file called "myScript.js".

 
"text/javascript" src="myScript.js">
 
دقت داشته باشید که با توجه به نحوه آدرس دهی در مثال بالا،فایل جاوا اسکریپت نام برده شده بایستی در همان پوشه و مسیری باشد که صفحه وب ما قرار دارد.


موضوعات مرتبط: آموزش زیان های برنامه نویسی

تاريخ : چهارشنبه بیست و نهم خرداد ۱۳۹۲ | 8:50 | نویسنده : حمید مقصودی |
آموزش JavaScript قسمت اول


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
script>
head>
<body>
 
<h1>My First Web Pageh1>
<p id="demo">This is a paragraph.p>
 
<button type="button" onclick="displayDate()">Display Datebutton>
 
body>
html>

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

آنچه شما باید بدانید :

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

جاوا اسکریپت چیست؟
  • جاوا اسکریپت برای اضافه کردن تعامل کاربر با صفحات HTML طراحی شده بود.
  • جاوا اسکریپت یک زبان اسکریپت نویسی است.
  • اسکریپت نویسی یک زبان برنامه نویسی بسیار سبک می باشد.
  • جاوا اسکریپت است معمولا به طور مستقیم درون صفحات HTML نوشته شده و به کار می رود.
  • جاوا اسکریپت یک زبان مفسری است (بدان معنی است که کدهای نوشته شده قبل از اجرا کامپایل نشده اند و خط به خط در زمان اجرا تفسیر می شوند).
  • هر کس می تواند جاوا اسکریپت را بصورت رایگان و بدون دریافت مجوز استفاده کند.

آیا جاوا و جاوا اسکریپت ، یکسان هستند ؟

خیر یکی نیستند.جاوا و جاوا اسکریپت دو زبان کاملا متفاوت می باشند چه به لحاظ مفهوم و چه به لحاظ طراحی.
جاوا (توسعه یافته توسط سان مایکروسیستمز) زبان برنامه نویسی قدرتمند و بسیار پیچیده تری است و در رده زبان های برنامه نویسی همچون C و ++C می باشد.

با جاوا اسکریپت چه کارهایی میتوان انجام داد ؟
  • جاوا اسکریپت به طراحان HTML یک ابزار برنامه نویسی ارائه می دهد.نویسندگان HTML معمولا برنامه نویس نیستند، اما جاوا اسکریپت یک زبان برنامه نویسی را با نحو بسیار ساده است! تقریبا هر کسی می تواند قطعه "کوچک" از کد را در صفحات HTML خود را قرار دهد.
  • جاوا اسکریپت می تواند به وقایع واکنش نشان می دهند، جاوا اسکریپت را می توان به گونه ای به کار گرفته شود تا زمانی که رویدادی اتفاق می افتد، مانند هنگامی که یک بارگذاری یک صفحه به پایان رسید یا هنگامی که کلیک کاربر روی عنصر HTML،از خود عکس العمل نشان دهد یکسری فرامین را اجرا کند.
  • جاوا اسکریپت می تواند محتوای عنصر HTML خواند و یا ویرایش کند.
  • جاوا اسکریپت می تواند برای اعتبار سنجی داده به کار گرفته شود،ضمنا می تواند برای اعتبار سنجی داده های وارد شده توسط تگ form به کار گرفته شود.
  • توسط جاوا اسکریپت شما میتوانید بفهمید که کاربر بیننده سایت شما از چه مرورگری استفاده میکند و در نهایت با متوجه شدن نوع مرورگر کابر صفحه ی خاص را به او نمایش دهیم.
  • از جاوا اسکریپت برای کار بر روی کوکی ها می توان استفاده کرد،ضمنا از این زبان اسکریپت نویسی می توان به منظور ذخیره و بازیابی اطلاعات بر روی کامپیوتر بیننده سایت استفاده کرد


موضوعات مرتبط: آموزش زیان های برنامه نویسی

تاريخ : چهارشنبه بیست و نهم خرداد ۱۳۹۲ | 8:49 | نویسنده : حمید مقصودی |
.: Weblog Themes By Bia2skin :.
[قالب وبلاگ : بیاتو اسکین] [Weblog Themes By : Bia2skin.ir]