آموزش جاوا اسکریپت (Javascript) – قسمت اول

 

آموزش جاوا اسکریپت
آموزش جاوا اسکریپت

جاوا اسکریپت

جاوا اسكریپت زبان اسكریپت نویسی وب است.

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

یادگیری جاوا اسكریپت آسان است.شما از آن لذت خواهید برد.

 

 

مقدمه ای بر جاوا اسكریپت

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

جاوا اسكریپت بیشتر زبان اسكریپت نویسی عمومی اینترنت است و در همه مرورگرهای اصلی مانند Internet Explorer، Mozilla،FireFox ، NetscapeوOpera كار می كند.

 

جاوا اسكریپت چیست؟

  • جاوا اسكریپت برای اضافه كردن تأثیرات متقابل به صفحات HTML طراحی شده است.
  • جاوا اسكریپت یك زبان اسكریپت نویسی است.
  • یك زبان جاوا اسكریپت یك زبان برنامه نویسی سبك است.
  • یك جاوا اسكریپت شامل خطوطی از كدهای كامپیوتری اجرایی است.
  • یك جاوا اسكریپت معمولاً مستقیماً در صفحات HTML جاسازی می شود.
  • جاوا اسكریپت یك زبان تفسیری است(به این معنی كه پردازه ها بدون كامپایل مقدماتی اجرا می شوند).
  • هركسی می تواند جاوا اسكریپت را بدون خرید مجوز استفاده كند.

 

آیا جاوا و جاوا اسكریپت شبیه هم هستند؟

نه!

جاوا و جاوا اسكریپت دو زبان كاملاً متفاوت هم از نظرمفهوم و هم از نظر طراحی هستند!

جاوا(توسعه یافته توسط Sun Microsystems ) زبان برنامه نویسی قدرتمند و خیلی پیچیده است _در همان دستهC وC++.

 

جاوا اسكریپت می تواند چه كار كند؟

  • جاوا اسكریپت به طراحان HTML یك ابزار برنامه نویسی می دهد-مؤلفان HTML معمولاً برنامه نویس نیستند،اما جاوا اسكریپت یك زبان اسكریپت نویسی با یك تركیب خیلی ساده است !تقریباً هركسی می تواند كدهای خیلی كوچك را داخل صفحات وب خود بگذارد
  • جاوا اسكریپت می تواند متن پویا را داخل یك صفحه HTML بگذارد-یك دستور جاوا اسكریپت مانند این:

document.write(“<h1>” + name + “</h1>”)

 

می تواند یك متغیر متنی را داخل یك صفحه HTML بنویسد.

  • جاوا اسكریپت می تواند به مراحل واكنش نشان دهد-یك جاوا اسكریپت می تواند برای اجرا انتخاب شود زمانی كه اتفاقاتی می افتد،مانند زمانی كه Load یك صفحه در حال تمام شدن است یا زمانی كه كاربر بر روی یك عنصر HTML كلیك می كند.
  • جاوا اسكریپت می تواند عناصر HTML را بخواند و بنویسد-یك جاوا اسكریپت می تواند مضمون یك عنصر HTML را بخواند یا تغییر دهد.
  • جاوا اسكریپت می تواند برای داده های معتبر بكار گرفته شود-یك جاوا اسكریپت می تواند برای داده های فرم معتبر- قبل از اینكه آن فرم به یك سرور ارائه شود-بكار گرفته شود.این سرویس دهنده از پردازش حجیم جلوگیری و ذخیره منابع می نماید.
  • جاوا اسكریپت می تواند برای پیدا كردن مرورگرهای ملاقات كننده استفاده شود-یك جاوا اسكریپت می تواند برای پیدا كردن مرورگر ملاقات كننده استفاده شودو وابسته به مرورگر صفحه دیگری مخصوص طراحی برای آن مرورگر را Load کند.
  • جاوا اسكریپت می تواند برای ساختن كوكیها استفاده شود. یك جاوا اسكریپت می تواند برای ذخیره و بازیابی اطلاعات روی كامپیوتر ملاقات كننده استفاده شود.

 

ECMAScript

نام واقعی آن ECMAScript است.

نام رسمی جاوا اسكریپت ECMAScript”” است.استاندارد آن توسط سازمان ECMA توسعه یافته و نگهداری شده است.

ECMA-262 استاندارد رسمی جاوا اسكریپت است.استاندارد آن مبنی بر جاوا اسكریپت (Netscape) و جاوا اسكریپت (Microsoft) است.

این زبان توسط Brendan Eich در Netscape ابداع شد و در همه مرورگرهای Netscape و Microsoft از سال 1996 ظاهر شده است.

استاندارد آن بصورت یك سازمان بین المللی استاندارد سازی (ISO/IEC 16262) در سال 1998 به تصویب در آمد.

توسعه استاندارد هنوز در حال پیشرفت است.

چگونگی جاوا اسكریپت برای….

تگ <HTML> برای اضافه كردن یك جاوا اسكریپت درون یك صفحه HTML بكار گرفته می شود.

 

 

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

 

-نوشتن متن با جاوا اسكریپت

<html>

<body>

<script type=”text/javascript”>

Document.write(“Hello World!”);

</script>

</body>

</html>

 

این مثال چگونگی استفاده از جاوا اسكریپت برای نوشتن متن در یك صفحه وب را نشان می دهد.

 

 

-نوشتن HTML با جاوا اسكریپت

 

<html>

<body>

<script type=”text/javascript”>

Document.write(“<h1>This is a header</h1>”);

</script>

</body>

</html>

 

این مثال چگونگی استفاده از جاوا اسكریپت برای نوشتن تگهای HTML در یك صفحه وب را نشان می دهد.

 

چگونگی گذاشتن جاوا اسكریپت درون یك صفحه HTML

 

<html>

<body>

<script type=”text/javascript”>

Document.write(“Hello World!”);

</script>

</body>

</html>

كد بالا این خروجی را بر روی یك صفحه HTML تولید خواهد كرد:

Hello World!

 

توضیح مثال

برای اضافه كردن یك جاوا اسكریپت به یك صفحه html، ما تگ <script> رابكار می بریم. داخل تگ <script> ما “مشخصه ای كه زبان اسكریپت نویسی تعریف می كند”=type را بكار می بریم.

بنابراین

<script type=”text/javascript”> و </script>

به ما می گوید كه كجا جاوا اسكریپت شروع و كجا پایان می پذیرد:

 

<html>

<body>

<script type=”text/javascript”>

…..

</script>

</body>

</html>

 

كلمه document.write یك دستور استاندارد جاوا اسكریپت برای نوشتن خروجی در یك صفحه است.

با وارد كردن دستور document.write بین تگهای <script> و</script> مرورگر آنرا به عنوان یك دستور جاوا اسكریپت به رسمیت می شناسد و آن خط كد را اجرا می كند. در اینصورت مرورگر بر روی صفحه Hello World! را خواهد نوشت.

 

<html>

<body>

<script type=”text/javascript”>

Document.write(“Hello World!”);

</script>

</body>

</html>

 

یادداشت: اگر ما تگ <script> را وارد نكنیم، مرورگر با آن مانند یك document رفتار میكند. دستور (“Hello World!”) مانند یك متن خالص می نویسد و فقط خط كاملی روی صفحه می نویسد.

 

توضیحات HTML به مرورگرهای ساده دستی

مرورگرهایی كه جاوا اسكریپت را پشتیبانی نمی كنند جاوا اسكریپت را مانند محتوای صفحه نشان خواهند داد.

تگ توضیح HTML می تواند ممانعت كردن آنها ازانجام این كار را به عنوان قطعه ای از استاندارد جاوا اسكریپت ، می فقط با اضافه كردن یك تگ توضیحHTML ،–<!، قبل از اولین دستور جاوا اسكریپت و یك،>–، بعد از آخرین دستور جاوا اسكریپت برای مخفی كردن جاوا اسكریپت به اطلاع کاربر برساند.

 

<html>

<body>

<script type=”text/javascript”>

<!—

Document.write(“Hello World!”);

//–>

</script>

</body>

</html>

 

دو slash جلویی در انتهای سطر توضیحی نشانه توضیح جاوا اسكریپت است.این ممانعت جاوا اسكریپت از اجرای تگ–> است.

مكان جاوا اسكریپت برای…..

جاوا اسكریپت در بخش بدنه اصلی تا زمانی كه صفحه بارگذاری شود،اجرا خواهد شد .

جاوا اسكریپت در بخش ابتدایی زمانی كه فراخوانی شود اجرا خواهد شد.

 

مثال ها

 

  • بخش ابتدایی

 

<html>

<head>

<script type=”text/javascript”>

Function message()

{

Alert(“This alert box was called with the onload event”);

}

</script>

</head>

<body onload=”message()”>

</body>

</html>

 

 

پردازه هایی كه شامل توابع هستند برای رفتن به بخش ابتدایی document هستند.پس ما می توانیم مطمئن باشیم اسكریپتی كه load شده قبل از تابعی است كه فراخوانی شده است.

 

  • بخش بدنه اصلی

<html>

<head>

</head>

<body>

<script type=”text/javascript”>

Document.write(“This message is written by Javascript”);

</script>

</body>

</html>

 

 

یك اسكریپت كه درون بدنه اصلی قرار داده شده است را اجرا می كند.

 

  • پردازه خارجی

<html>

<head>

</head>

<body>

<script src=”/yyy.js”>

</script>

<p>

The actual script is in an external script file called “yyy.js”.

</p>

</body>

</html>

 

چگونگی دستیابی به یك پردازه خارجی را نشان می دهد.

 

مكان گذاشتن Java Script

جاوا اسكریپتهای یك صفحه فوراً اجرا خواهند شد تا آن صفحه در مرورگر load شود.این موضوع همیشه چیزی كه ما می خواهیم نیست.بعضی اوقات ما می خواهیم یك اسكریپت را تا زمانی كه صفحه load می شود اجرا كنیم یا گاهی تا زمانی كه كاربر یك رویداد را رها می كند.

اسكریپتها در بخش ابتدایی: اسكریپتها زمانی كه فراخوانی می شوند یا زمانی كه یك رویداد رخ می دهد برای رفتن به بخش ابتدایی اجرا می شوند.زمانی كه شما یك اسكریپت را در بخش ابتدایی قرار می دهید اطمینان پیدا خواهید كرد كه اسكریپت قبل از آنكه كسی آنرا بكار ببرد load می شود.

<html>

<head>

<script type=”text/javascript”>

…..

</script>

</head>

 

 

اسكریپتها در بدنه اصلی: اسكریپتها تا زمانی كه صفحه load شده به بدنه اصلی منتقل می شود،اجرا خواهند شد.زمانی كه شما یك اسكریپت را درون بدنه اصلی قرار می دهید، آن مضمون صفحه را تولید می كند.

<html>

<head>

</head>

<body>

<script type=”text/javascript”>

….

</script>

</body>

 

اسكریپتها در بدنه اصلی و بخش ابتدایی: شما می توانید یك تعداد نا محدود در document خود قرار دهید ، بنابراین شما می توانید هم بدنه اصلی و هم بخش ابتدایی را داشته باشید.

<html>

<head>

<script type=”text/javascript”>

….

</script>

</head>

<body>

<script type=”text/javascript”>

….

</script>

</body>

 

كاربرد یك جاوا اسكریپت خارجی

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

برای ساده تر كردن این، شما می توانید یك جاوا اسكریپت را در یك فایل خارجی بنویسید و فایل جاوا اسكریپت خارجی را با پسوند فایل.js ذخیره كنید.

نکته: اسكریپت خارجی نمی تواند شامل تگ <script> باشد!

برای استفاده از اسكریپت خارجی، به فایل با پسوند .js در خاصیت src تگ <script> اشاره كنید:

<html>

<head>

<script src=”/yyy.js”>

</head>

<body>

</body>

</html>

 

 

نکته: بخاطر داشته باشید كه مكان اسكریپت دقیقاً جایی است كه ممكن است شما اسكریپت را نوشته باشید.

 

دستورات جاوا اسكریپت

جاوا اسكریپت یك سری دستورات قابل اجرا توسط مرورگراست.

دستورات یك جاوا اسكریپت یك فرمان به مرورگر است. هدف فرمان این است كه به مرورگر می گوید كه چه كاری انجام دهد.

این دستور جاوا اسكریپت به مرورگر می گوید كه “Hello Dolly” را بر روی صفحه وب نمایش دهد:

 

Document.write(“Hello Dolly”);

 

اضافه كردن یك سمی كالن در انتهای هر دستور اجرایی کاری معمولی است.بعضی از مردم معتقدند كه این یك روش برنامه نویسی خوب است و اغلب این را در مثالهای جاوا اسكریپت روی وب خواهید دید.

گذاشتن سمی كولن اختیاری است (مطابق با استاندارد جاوا اسكریپت) و برای مرورگر در آخر هر خط همانند آخر هر دستور یك سمی كالن فرض شده است. به این دلیل شما اغلب آخر مثالها را بدون سمی كالن خواهید دید.

یادداشت:استفاده از سمی كالن، نوشتن چندین دستور روی یك خط را ممكن می سازد.

 

كد جاوا اسكریپت

كد جاوا اسكریپت یك سری دستورات جاوا اسكریپت است.

هر دستور توسط مرورگر با ترتیبی كه نوشته شده اجرا خواهد شد.

این مثال یك header (سر فصل) و دو پاراگراف را در یك صفحه وب خواهد نوشت:

<script type=”text/javascript”>

Document.write(“<h1>This is a header</h1>”);

Document.write(“<p>This is a paragraph</p>”);

Document.write(“<p>This is another paragraph</p>”);

</script>

بلوك جاوا اسكریپت

دستورات جاوا اسكریپت می توانند باهم در یك بلوك گروه بندی شوند.

بلوكها با یك كروشه چپ،حلقه حلقه شروع می شوند.

هدف بلوك اجرایی ساختن سلسله مراتب دستورات با هم است.

این مثال یك header و دو پاراگراف در یك صفحه وب خواهد نوشت:

<script type=”text/javascript”>

{

Document.write(“<h1>This is a header</h1>”);

Document.write(“<p>This is a paragraph</p>”);

Document.write(“<p>This is another paragraph</p>”);

}

</script>

 

 

مثال بالا خیلی كاربردی نیست و فقط برای نشان دادن استفاده بلوك است. معمولاً یك بلوك برای یك گروه دستورات با هم در یك تابع یا یك وضعیت استفاده می شود (جایی كه یك گروه دستورات باید اجرا شوند اگر با یك وضعیت برخورد كند).

شما چیزهای بیشتری در رابطه با توابع و وضعیتها در فصول بعدی خواهید آموخت.

 

توضیحات جاوا اسكریپت

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

توضیحات می توانند برای شرح یك جاوا اسكریپت یا برای خواناتر كردن آن استفاده شوند.

توضیحات تك خط با // شروع می شود.

این مثال كاربرد توضیحات تك خط را برای كد شرح نشان میدهد:

<script type=”text/javascript”>

// This will write a header:

Document.write(“<h1>This is a header</h1>”);

// This will write two paragraphs:

Document.write(“<p>This is a paragraph</p>”);

Document.write(“<p>This is anather paragraph</p>”);

</script>

 

توضیحات چند خطه جاوا اسكریپت

 

توضیحات چند خطه با */ شروع و /* پایان می یابند.

این مثال كاربرد توضیح چند خطه را برای شرح كد نشان می دهد:

<script type=”text/javascript”>

/*

The code bellow will write

One header and two paragrapgs

*/

Document.write(“<h1>This is aheader</h1>”);

Document.write(“<p>This is a paragraph</p>”);

Document.write(“<p>This is another paragraph</p>”);

</script>

 

كاربرد توضیحات برای جلوگیری از اجرا

در این مثال توضیح برای جلوگیری از اجرای یك خط كد استفاده می شود:

<script type=”text/javascrit”>

Document.write(“<h1>This is a header</h1>”);

Document.write(“<p>This is a paragraph</p>”);

//document.write(“<p>This is another paragraph</p>”);

</script>

در این مثال توضیحات برای جلوگیری از اجرای چندین خط كد بكار گرفته می شوند:

<script type=”text/javascript”>

*/

Document.write(“<h1>This is a header</h1>”);

Document.write(“<p>This is a paragraph</p>”);

Document.write(“<p>This is another paragraph</p>”);

/*

</script>

 

كاربرد توضیحات در آخر یك خط

این مثال چگونگی قرار گرفتن توضیح در آخر یك خط را نشان می دهد:

<script type=”text/javascript”>

Document.write(“Hello”); // This is write “Hello”

Document.write(“Dolly”); // This is write “Dolly”

</script>

 

متغیرهای جاوا اسكریپت

 

متغیرها مكانی برای ذخیره اطلاعات هستند:

X=5; length==66.10;

آیا جبر را از دوران مدرسه به یاد دارید؟

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

X=5 y=6 z=x+y

آیا به خاطر دارید كه حرفی (مانندx) می توانست برای نگه داشتن یك مقدار(مانند5 )استفاده شود و اینكه شما می توانستید اطلاعات بالا را برای محاسبه ونگهداشتن مقدار 11 در z استفاده كنید؟

این حروف، متغیرها نام گذاری می شوند و متغیرها می توانند برای نگه داشتن مقادیر(x=5) یا عبارات(z=x+y) استفاده شوند.

همانند جبر، متغیرهای جاوا اسكریپت برای نگهداری مقادیر یا عبارات استفاده می شوند.

یك متغیر می تواند یك نام كوتاه ، مانند x ، یا یك نام با توضیحات بیشتری، مانند length داشته باشد.

یك متغیر جاوا اسكریپت همچنین می تواند یك مقدار متنی نگه دارد مانند carname=”Volvo”.

 

قوانین نامهای متغیرهای جاوا اسكریپت:

  • نام متغیرنسبت به حروف كوچك و بزرگ حساس است (y وY دو متغیر متفاوت هستند.)
  • نام متغیر باید با یك حرف یا علامت زیر خط شروع شود.

نکته: برای اینکه جاوا اسكریپت به حروف كوچك و بزرگ حساس است،نام متغیرها نیز به حروف كوچك و بزرگ حساس است.

 

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

مقدار یك متغیر می تواند در حین اجرای یك اسكریپت تغییر كند. شما می توانید به یك متغیر با استفاده از نامش برای نشان دادن یا تغییر مقدارش مراجعه كنید .

این مثال به شما این موضوع را نشان می دهد:

 

<html>

<body>

<script type=”text/javascript”>

Var firstname;

Firstname=”Hege”;

Document.write(firstname);

Document.write(“<br />”);

Firstname=”Tovo”;

Document.write(firstname);

</script>

<p>The script above declares a variable,

Assigns a value to it,displays the value,

Change the value,

And displays the value assign.</p>

</body>

</html>

 

اعلان متغیرهای جاوا اسكریپت

ایجاد متغیرها در جاوا اسكریپت همانند اعلان متغیرهاست.

شما می توانید متغیرهای جاوا اسكریپت را با دستورvar اعلان كنید.

 

Var x;

Var carname;

 

بعد از اعلانی كه در بالا نشان داده شد، متغیرها هیچ مقداری نخواهند داشت، اما شما می توانید مقداری رابه متغیرها اختصاص دهید تا زمانی كه آنها را اعلان می كنید.

Var x=5;

Var carname=”Volvo”;

 

نکته:زمانی كه شما مقداری به متغیرمتنی اختصاص می دهید،باید از گیومه دو طرف آن استفاده كنید.

 

اختصاص مقادیر به متغیرهای جاوا اسكریپت

مقادیر را به متغیرها با دستورات انتصاب اختصاص دهید.

نام متغیر در سمت چپ علامت = و مقداری كه می خواهید به متغیر بدهید در سمت راست قرار می گیرد.

بعد از اجرای دستورت بالا متغیر x مقدار 5 و carname مقدار Volvo را در خود نگه می دارد.

 

اختصاص مقادیر به متغیرهای اعلان نشده جاوا اسكریپت

اگر شما مقادیری به متغیرهایی كه هنوز اعلان نشده اند اختصاص دهید، متغیرها به طور خودكار اعلان خواهند شد.

این دستورات:

X=5;

Carname=”Volvo”;

 

همان اثر را دارد،چنانچه:

Var x=5;

Var carname=”Volvo”;

 

اعلان دوباره متغیرهای جاوا اسكریپت

اگر شما یك متغیر جاوا اسكریپت را دوباره اعلان كنید،مقدار اصلیش را گم نخواهد كرد.

Var x=5;

Var x;

 

بعد از اجرای دستورات بالا متغیر x هنوز مقدار 5 را دارد. مقدارx پاك نمی شود وقتی كه آنرا دوباره اعلان می كنید.

 

محاسبات جاوا اسكریپت

همانند جبر،شما می توانید با متغیرها محاسبات انجام دهید:

Y=x-5;

Z=y+5;

 

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

 

عملگرهای جاوا اسكریپت

عملگر = برای انتصاب مقادیربه متغیرهای جاوا اسكریپت استفاده می شود.

عملگر + برای جمع مقادیر باهم استفاده می شود.

Y=5;

Z=2;

X=y+z;

مقدار x بعد از اجرای دستورات بالا 7 است.

 

عملگرهای محاسباتی جاوا اسكریپت

عملگرهای محاسباتی برای انجام محاسبات بین متغیرها ویا مقادیر بكار گرفته می شود.

با مقدار y=5 جدول زیر عملگرهای محاسباتی را شرح می دهد:

 

Result Example Description Oprator
X=7 X=y+2 ‌Addition +
X=3 X=y-2 Subtraction
X=10 X=y*2 Multiplication *
X=2.5 X=y/2 Division /
X=1 X=y%2 Modulus(divition remainder) %
X=6 X=++y Increment ++
X=4 X=–y Decrement

 

عملگرهای انتصابی جاوا اسكریپت

عملگرهای انتصابی برای انتصاب مقادیر به متغیرهای جاوا اسكریپت استفاده می شوند.

با مقدار x=10 و y=5 جدول زیر عملگرهای انتصابی را شرح می دهد:

 

Result Same As Example Operator
X=5 X=y =
X=15 X=x+y X+=y =+
X=5 X=x-y X-=y =-
X=50 X=x*y X*=y =*
X=2 X=x/y X/=y =/
X=0 X=x%y X%=y =%

 

كاربرد عملگر + روی رشته ها

عملگر + همچنین می تواند برای الحاق متغیرهای رشته ای یا مقادیر متنی با هم بكار می رود.

برای الحاق دو یا چندین متغیر رشته ای با هم از عملگر+ استفاده كنید.

 

txt1=”What a very”; txt2=”nice day”; txt3=txt1+txt2;

 

بعد از اجرای دستورات بالا متغیر txt3 شامل “what a verynice day” می شود.

برای اضافه كردن یك مكان خالی بین دو رشته، یك فضای خالی در اولین رشته درج كنید:

 

txt1=”What a very “; txt2=”nice day”; txt3=txt1+txt2;

 

یا یك فضای خالی در عبارت درج كنید:

 

txt1=”What a very”; txt2=”nice day”; txt3=txt1+” “+txt2;

 

بعد از اجرای دستورات بالا متغیر txt3 شامل این مقدار است:

 

“What a very nice day”

 

الحاق رشته ها و اعداد

 

به این مثال نگاه كنید:

x=5+5;

document.write(x);

x=”5″+”5″;

document.write(x);

x=5+”5″;

document.write(x);

x=”5″+5;

document.write(x);

 

قانون:

اگر شما یك عدد و یك رشته اضافه كنید، نتیجه یك رشته خواهد شد.

 

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

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

 

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

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

با مقدار x=5 جدول زیر عملگرهای مقایسه ای را شرح می دهد:

Example Discription Operator
X==8 is false Is equal to ==
X==5 is true 

X===”5″ is false

Is exactly equal to (value and type) ===
X!=8 is true Is not equal =!
x>8 is false Is greater than >
X<8 is true Is less than <
x>=8 is false Is greater than or equal to =>
X<=8 is true Is less than or equal to =<

 

چگونگی كاربرد آنها

عملگرهای مقایسه ای می توانند در دستورات شرطی برای مقایسه مقادیرو اقدام به وابستگی نتیجه بكار برده شود:

 

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

 

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

 

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

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

با مقدار x=6 وy=3 جدول زیر عملگرهای منطقی را شرح می دهد:

 

Example Description Operator
(x<10 && y>1) is true and &&
(x==5 || y==5) is false or ||
!(x==y) is true not !

 

عملگر شرطی

جاوا اسكریپت همچنین شامل یك عملگر شرطی است كه به مقدار یك متغیر مبنی بر بعضی وضعیتها اختصاص داده می شوند.

تركیب

 

variablename=(condition)?value1:value2

 

مثال

 

greeting=(visitor==”PRES”)?”Dear President “:”Dear “;

 

اگر متغیر visitor مقدار”PRES” را داشته باشد سپس متغیر greeting مقدار “Dear president” را خواهد داشت، در غیر اینصورت مقدار”Dear” را خواهد داشت.

 

 

دستورات If…..Else جاوا اسكریپت

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

 

مثال

چگونگی نوشتن یك دستور If

 

<html>

<body>

<script type=”text/javascript”>

Var d = new Date();

Var time = d.getHours();

If (time < 10)

{

Document.write(“<b>Good morning</b>”);

}

</script>

<p>

This example demonstrates the If statement.

</p>

<p>

If the time on your browser is less than

10,

You will get a”Good morning” greeting.

</p>

</body>

</html>

 

 

چگونگی نوشتن یك دستور If….Else

 

<html>

<body>

<script type=”text/javascript”>

Var d=new Date();

Var time =d.getHours();

If (time < 10)

{

Document.write(“<b>Good morning</b>”);

}

Else

{

Document.write(“<b>Good day</b>”);

}

</script>

<p>

This example demonstrates If…Else statement.

</p>

<p>

If the time on your browser is less than 10,

You will get a “Good morning” greeting.

Otherwise you will get a “Good day” greeting.

</p>

</body>

</html>

 

چگونگی نوشتن دستور If…else if…else

<html>

<body>

<“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>

<p>

This example demonstrates the if…else

If…else statement.

</p>

</body>

</html>

 

 

دستورات شرطی

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

در جاوا اسكریپت ما دستورات شرطی زیر را داریم:

  • دستور If : با استفاده از این دستور If شما می توانید تعداد كدی را اجرا كنید اگر یك شرط خاص درست است.
  • دستور If…else : با استفاده از این دستور شما می توانید تعداد كدی را اجرا كنید كه شرطش درست است و كد دیگری كه شرط آن غلط است.
  • دستور If…else if…else : با استفاده از این دستور شما می توانید یك یا چندین بلوك كد را برای اجرا انتخاب كنید.
  • دستور switch : با استفاده از این دستور شما می توانید یك یا چندین بلوك كد را برای اجرا انتخاب كنید.

 

دستور if

شما با استفاده از دستور If می توانید تعداد كدی را كه فقط یك شرط خاص آن درست است اجرا كنید.

 

طرز نوشتن دستور

 

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>

نکته: زمانی كه شما متغیرها را مقایسه می كنید همیشه باید دو علامت مساوی پشت سرهم استفاده كنید.

تذكر: جایی كه در این تركیب ..else.. نیست. شما فقط به كد می گویید كه آن قسمت از كدی را اجرا كند كه در آن شرط خاصی درست است.

 

دستور If…else

اگر شما بخواهید تكه كدی را اجرا كنید كه یك شرطش درست و شرط دیگر نادرست باشد از دستور If…else استفاده می كنید.

 

طرز نوشتن دستور

 

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…elseif…else را بكار ببرید اگر می خواهید یك یا تعدادی خط را برای اجرا انتخاب كنید.

 

طرز نوشتن دستور

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>

دستور Switch جاوا اسكریپت

 

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

مثالها

 

چگونگی نوشتن دستور Switch

<html>

<body>

<script type=”text/javascript”>

Var d=new Date();

The Day=d.getDay();

Switch(theDay)

{

Case 5:

Document.write(“<b>finally Friday</b>”);

Break;

Case 6:

Document.write(“<b>super Saturday</b>”);

Break;

Case 0:

Document.write(“<b>sleepy Sunday</b>”);

Break;

Defult:

Document.write(“<b>I’mreally looking forward to this weekend!</b>”);

</script>

<p>this java script will generate a different greeting based on what day it is.

Note that Sunday=0,Monday=1,Tuesday=2,ect.</p>

</body>

</html>

 

دستور Switch جاوا اسكریپت

شما باید دستور Switch را بكار ببرید،اگر بخواهید یك یا چندین بلوك یك كد را برای اجرا انتخاب كنید.

 

طرز نوشتن دستور

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 }

 

طرز كاركرد Switch : در ابتدا ما یك عبارت n داریم (اغلب یك متغیر) كه یك بار ارزیابی می شود. سپس مقدار آن عبارت با مقادیر هرساختار case مقایسه می شود.اگر مطابقتی داشته باشند، بلوك كد وابسته به آن 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>

 

كادر های Popup جاوا اسكریپت

 

در جاوا اسكریپت ما می توانیم سه نوع كادر Popup ایجاد كنیم: كادرAlert ،كادرConfirm وكادر Prompt .

 

مثالها

 

كادر Alert

<html>

<body>

<script type=”text/javascript”>

Function disp_alert()

{

Alert (“I am an alert box!!”);

}

</script>

</body>

</html>

 

كادر Alert با خط وقفه

<html>

<head>

<script type=”text/javascript”>

Function disp_alert()

{

Alert(“hello again!This is how we” + ‘\n’ + “add line breaks to an alert box!”);

}

</script>

</head>

<body>

<input type=”botton” onclick=”disp_alert()” value=”Display alert box”/>

</body>

</html>

كادر Confirm

 

<html>

<head>

<script type=”text/javascript”>

Function disp_confirm()

{

Var r=confirm(“press a botton”);

If (r==true)

{

Document.write(“you pressed OK!”);

}

Else

{

Document.write(“you pressed cancel!”);

}

}

</script>

</head>

<body>

<input type=”botton” onclick=”disp_confirm()” value=”Display a confirm box” />

</body>

</html>

 

كادر Prompt

 

<html>

<head>

<script type=”text/javascript”>

Function disp_prompt()

{

Var name=prompt(“please enter your name”,”Harry Potter”);

If (name!=null && name!=””)

{

Document.write(“Hello “+ name + “! How are you today?”);

}

}

</script>

</head>

<body>

<input type=”botton” onclick=”disp_prompt()” value=”Display a prompt box” />

</body>

</html>

كادر Alert

یك كادر Alert اغلب اگر شما بخواهید مطمئن شوید كه اطلاعات بطور موفقیت آمیز بدست كاربر رسیده باشد، بكار می رود.

زمانی كه یك كادر Alert بالامی آید، كاربر با كلیك بر روی OK می تواند پیش برود.

 

طرز نوشتن دستور

alert(“sometext”);

 

كادر Confirm

یك كادر Confirm اغلب مواقعی كه اگر شما بخواهید بعضی چیزها را رسیدگی یا قبول كنید، استفاده می شود.

زمانی كه یك كادر confirm بالا می آید، كاربر با كلیك بر روی OK یا Cancel می تواند پیش برود.

اگر كاربر بر روی OK كلیك كند، كادر درست بر می گردد. اما اگر كاربر بر روی Cancel كلیك كند كادر نادرست بر می گردد.

 

طرز نوشتن دستور

confirm(“sometext”);

 

كادر Prompt

یك كادر Prompt اغلب زمانی كه شما بخواهید یك مقدار را قبل از ورود به صفحه وارد كنید بكار می رود.

زمانی كه یك كادر Prompt بالا می آید ،كاربر با كلیك بر روی OK یا Cancel پیش خواهد رفت بعد از آنكه یك مقدار ورودی وارد می شود.

اگر كاربر بر روی OK كلیك كند، كادر مقدار ورودی را برمی گرداند.اما اگر برروی Cancel كلیك كند، كادر مقدار تهی را بر می گرداند.

 

طرز نوشتن دستور

prompt(“sometext”,”defaultvalue”);

توابع جاوا اسكریپت

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

 

مثال ها

 

تابع

چگونگی نوشتن یك تابع.

 

<html>

<head>

<script type=”text/javascript”>

Function myfunction()

{

Alert(“Hello”);

}

</script>

</head>

<body>

<form>

<input type=”botton” onclick=”myfunction” value=”call function”>

</form>

<p>By pressing the button,a function will be called.the function will alert a message.</p>

</body>

</html>

 

تابع با آرگومان

چگونگی فرستادن یك متغیر به یك تابع و استفاده از متغیر درون تابع.

 

<html>

<head>

<script type=”text/javascript”>

Function my function(txt)

{

Alert(txt);

}

</script>

</head>

<body>

<form>

<input type=”button” onclick=”myfunction(‘hello’)”

Value=”call function”>

</form>

<p>By pressing the button, a function with an argument will be called.The function will alert this argument.</p>

</body>

</html>

 

تابع با دو آرگومان

چگونگی فرستادن متغیرها به یك تابع و استفاده از متغیرها درون تابع.

 

<html>

<head>

<script type=”text/javascript”>

Function myfunction(txt)

{

Alert(txt);

}

</script>

</head>

<body>

<form>

<input type=”button” onclick=”myfunction(‘Good Moning!’)” value=”In the morning”>

<input type=”button” onclick=”myfuncion(‘Good evening!’)” value=”In the evening”>

</form>

<p>

When you click on one of the buttons, a function called.the function will alert the argument that is passed to it.

</p>

</body>

</html>

 

تابعی كه مقداری برمی گرداند

چگونگی برگرداندن مقدار یك تابع

 

<html>

<head>

<script type=”text/javascript”>

Function myfunction()

{

Return(“Hello, have a nice day!”);

}

</script>

</head>

<body>

<script type=”text/javascript”>

Document.write(myfunction())

</script>

<p>The script In the body section calls a function.</p>

<p>The function returns a text.</p>

</body>

</html>

 

تابع با آرگومان كه مقداری برمی گرداند

چگونگی پیدا كردن حاصلضرب مقدار دو آرگومان و برگرداندن نتیجه آن

 

<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>

<p>The script in the body section calls a function with two parameters(4 and 3).</p>

<p>The function will return the product of these two parameters.</p>

</body>

</html>

منبع : w3schools.com

3 دیدگاه دربارهٔ «آموزش جاوا اسکریپت (Javascript) – قسمت اول»

  1. عالي بود.
    ايميلم غلطه. براي يه كامنت كه نبايد ايميل بدم. اوونم زوري. ولي مطلبتون عالي بود.

  2. عالی بود
    ببخشید من یک سوال دارم
    اگر امکانش هست این مثال رو که میگم رو انجام بدین و کدش رو قرار بدین خیلی ممنون میشم
    سوال من اینه من میخام یک سایت دو صفحه ای درست کنم که بر روی صفحه index یک کادر متن و یک دکمه قرار بدم و بر روی صفحه دوم یک label حالا میخام یک فایل جاوا اسکریپت خارجی بسازم و توی اون یک متغیر تعریف کنم که مقدارش رو از کادر متن دریافت کنه یعنی اینکه مقدار درون کادر متن رو داخل متغیر فایل خارجی جاوا اسکریپت ذخیره کنه و بعد در صفحه دوم بتونم مقدار درون متغیر رو در کنترل label نمایش بدم
    ممنون میشم اگه راهنمایی بفرمایید

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *