ايران ويج

صفحه‌ها: 1 2

درس اول- آشنایی با زبان‌های برنامه‌نویسی

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

پیش نیاز یادگیری این دوره دو مبحث اچ تی ام ال (HTML) و سی اس اس (CSS) و صد البته آشنایی با اینترنت و وب است. اگر هنوز در مورد این موضوع‌ها مطلبی نخوانده اید، پیشنهاد می‌کنیم ابتدا به یادگیری آنها بپردازید و سپس به این دوره رجوع کنید.

در این درس اندکی به شرح زبان‌های برنامه نویسی رایانه‌ای یا میزکار (دسکتاپ) و زبان‌های برنامه نویسی تحت وب می‌پردازیم و در آخر به توضیح بیشتر جاوا اسکریپت و ویژگی‌های آن می‌رسیم.

آشنایی با برنامه نویسی
امروزه زبان‌های برنامه نویسی زیادی در دنیا وجود دارند. از جمله این زبان‌ها می‌توان به زبان‌های C#، C++، جاوا و… اشاره کرد. کاربرد زبان‌های برنامه نویسی در انتقال دستورات ما به رایانه‌ها است. در واقع زبان‌های برنامه نویسی راه‌هایی هستند برای اینکه ما به کمک آنها دستورات و خواسته‌های خود را به رایانه‌ها منتقل کنیم تا آنها این دستورات را برای ما اجرا کنند. در اصل به کمک این زبان‌ها می‌توانیم برنامه‌ها و حتی نرم افزارهای مورد نیاز را ساخته و بکار گیریم.

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

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

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

تفاوت جاوا و جاوا اسکریپت
جاوا اسکریپت متعلق به شرکت نت اسکیپ می‌باشد اما زبان جاوا متعلق به شرکت Sun Microsystems است. جاوا اسکریپت در عمل یک زبان اسکریپت نویسی است نه یک زبان برنامه نویسی رایانه‌ای. با این تعریف شاید بشود اسکریپت نویسی با جاوا اسکریپت را یک نوع زبان برنامه نویسی خیلی سبک نامید اما جاوا یک زبان برنامه نویسی پیچیده مانند زبان C است. تفاوت دیگر آنها در اینست که جاوا اسکریپت توسط یک برنامه مفسر یا Interpreter که در مرورگر تعریف شده است قابل اجرا می‌باشد و کل عملیات‌ها در مرورگر انجام می‌شوند اما برنامه‌های جاوا باید توسط یک کامپایلر Compiler، کامپایل شود (کامپایل یعنی ترجمه داده‌ها به زبان قابل فهم برای رایانه). در مجموع باید گفت که جاوا اسکریپت تنها در صفحات وب اثر گذار است اما جاوا برای ساخت برنامه‌های پیچیده در رایانه ساخته شده است.

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

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

یکی دیگر از قابلیت‌های زبان جاوا اسکریپت این است که به راحتی می‌تواند با HTML ترکیب شود و از امکانات آن استفاده نماید. با کمک جاوا اسکریپت و ترکیب آن با HTML و PHP می‌توانیم تارنماهایی پویا ایجاد نماییم. این زبان، یک زبان اسکریپت نویسی برای سرویس گیرنده (Client) است، البته برای برنامه نویسی در سرویس دهنده (Server) نیز به کار می‌آید ولی بیشتر در برنامه نویسی برای سرویس گیرنده کارایی دارد. در دنیای اینترنت زبان‌های دیگری نیز برای برنامه نویسی تحت وب وجود دارند، مانند Jscript ،VBscript و PHP.

نکته: تفاوت زبان برنامه نویسی سمت کاربر (Client Side) مانند جاوا اسکریپت و سمت سرور (Server Side) مانند پی اچ پی در اینست که برای استفاده از زبان سمت سرور نیاز به یک سرویس دهنده است تا کد‌ها را اجرا کند. اما زبان‌های سمت کاربر نیازی به سرویس دهنده ندارند و تنها با یک مرورگر قابل استفاده هستند. این بدین معنی است که وقتی شما کدهایی با زبان جاوا اسکریپت می‌نویسید، می‌توانید آن را در رایانه شخصی خود و تنها با دوبار کلیک کردن فایل ساخته شده اجرا کرده و نتیجه کار را ببینید. اما برای اجرای زبان‌های سمت سرور نیاز دارید که بطور حتم آن را در یک سرویس دهنده قرار دهید و یا از یک برنامه‌ای مانند WampServer که رایانه شما را تبدیل به یک سرور یا سرویس دهنده می‌کند استفاده کنید.

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

همچنین جاوا اسکریپت می‌تواند کدهای اچ تی‌ام ال را بخواند و یا تولید کند که توسط این ویژگی می‌توانید در هر زمان مشخص، متن و یا هر عنصر دیگری (مانند تصویر) را تولید یا تغییر دهید.

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

با کمک این زبان می‌توان برنامه‌هایی را نوشت که بر روی مرورگر کار می‌کنند برای نمونه با کمک جاوا اسکریپت می‌توان یک ماشین حساب تحت وب طراحی کرد.

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

در درس بعد با معرفی مفاهیم ابتدایی زبان برنامه نویسی جاوا اسکریپت کار را برای یادگیری این زبان ادامه می‌دهیم.

در درس پیشین نگاهی گذرا به زبان‌های برنامه نویسی داشتیم و در آخر اندکی در مورد زبان برنامه نویسی جاوا اسکریپت سخن گفتیم. در این درس کمی با مقدمات برنامه نویسی با این زبان آشنا می‌شویم و با نمونه‌های کوچکی، چگونگی کار با این زبان را نشان خواهیم داد.

برچسب Script
برای نوشتن برنامه‌ای تحت وب و با زبان جاوا اسکریپت ابتدا باید کدهای جاوا اسکریپت را به مرورگر معرفی کرد. معرفی کدهای جاوا اسکریپت به مرورگر با نوشتن یک برچسب (تگ) انجام می‌شود. برچسب script که بصورت یک برچسب شروع کننده کد‌ها و یک برچسب پایان دهنده کد‌ها نوشته می‌شود، وظیفه شناساندن کدهای جاوا اسکریپت را برعهده دارد. این برچسب‌ها به مرورگر می‌فهمانند که در کجا فعالیت این زبان آغاز شده -تا مفسر جاوا اسکریپت مرورگر فعال شود- و در کجا پایان می‌پذیرد که برنامه مفسر هم کار خود را خاتمه دهد.

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

گفتیم که برای اجرا شدن کدهای جاوا اسکریپت باید آنها را در میان برچسب‌های اچ تی‌ ام ال قرار دهیم. پرسشی که ممکن است پیش بیاید این است که باید آنها را در کجای برچسب‌های اچ تی‌ ام ال بگذاریم، آیا جای ویژه‌ای دارند یا در هر کجا می‌توانیم اینکار را انجام دهیم؟ پاسخ این پرسش اینست که کدهای جاوا اسکریپت می‌توانند در هر کجای فایل اچ تی‌ ام ال باشند اما باید ابتدا تشخیص دهیم که نسبت به نیاز ما (برنامه‌ای که می‌نویسیم) بکار بردن هر قسمت از اسکریپت در کجای برگه مناسب‌تر می‌باشد. بطور کل محل قرار دادن کدهای جاوا اسکریپت به سه دسته تقسیم می‌شوند، یک دسته از آنها در قسمت «سر» یعنی head جای می‌گیرند و یک دسته در قسمت «بدنه» اچ تی‌ ام ال و دسته سوم هم در یک فایل جداگانه و خارج از کدهای HTML با پسوند js قرار می‌گیرند که در ادامه به توضیح هر دسته خواهیم پرداخت.

قرار دادن کدهای جاوا اسکریپت در بدنه اچ‌ تی‌ ام‌ ال
در این دسته ما کد‌ها را بطور مستقیم در بدنه فایل اچ تی‌ ام ال و بین برچسب‌های باز و بسته <body> قرار می‌دهیم.

برای نمونه به کدهای زیر توجه بفرمایید:

کد: 
<script>

alert("درود جهان");

</script>

برای دیدن خروجی کدهای بالا ابتدا باید یک فایل ساخته و کدها را در آن قرار دهیم. فایلی با نام Lesson2.txt که یک فایل نوشتن است بسازید و کدهای زیر را در آن قرار دهید:

کد: 
<html><head>

<title> آموزش جاوا اسکریپت - درسنامه </title>

</head>

<body>

<script>

alert("درود جهان");

</script> </body> </html>

نکته: همانطور که می‌بینید کدهای باز و بسته اسکریپت (Script) را در داخل برچسب‌های اچ‌ تی‌ ام‌ ال قرار داده‌ایم.

بعد از نوشتن کدهای بالا فایل خود را در پوشه‌ای که برایتان براحتی قابل دسترسی باشد با نام درس دوم (Lesson2.txt) یا هر نامی که دوست دارید ثبت کنید. فراموش نکنید که هنگام ثبت فایل، نوع یاEncoding آن را از ANSI به UTF-8 تغییر دهید وگرنه نوشته‌های فارسی بصورت کاراکترهای عجیب نمایش داده می‌شود.

نکته: بعد از نوشتن کد‌ها وقتی می‌خواهید فایل را ثبت کنید هشداری به مفهوم «اعلام وجود نوشته‌هایی که ممکن است بصورت کاراکترهای عجیب نمایان شوند»، دریافت می‌کنید. متن این هشدار به زبان انگلیسی و بصورت «This file contains characters in unicode...» می‌باشد. در اینجا شما باید انتخاب Cancel را بزنید تا پنچره Save as باز شود. در این پنچره شما می‌توانید نوع فایل(Encoding) را از ANSI به UTF-8 تغییر دهید.

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

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

[attachment=11104]

بدین صورت شما نخستین کد جاوا اسکریپت را در برگه اچ تی‌ام ال نوشتید. همانطور که دیدید ما کد‌ها را در بین دو برچسب <body> و </body> قرار دادیم.

قرار دادن کد‌ها در بخش برچسب سرایند (Head)
در قسمت قبلی نمونه‌ای که اجرا کردیم کد‌ها را بطور مستقیم در بدنه گذاشتیم اما در این قسمت می‌خواهیم کد‌ها را در بخش «برچسب سرایند» (<head>) برگه اچ تی‌ ام ال بگذاریم. کدهای جاوا اسکریپت به محض باز شدن یک صفحه در مرورگر اجرا می‌شوند، اما گاهی ما نیاز داریم تا یک اسکریپت زود‌تر از کدهای دیگر اجرا شده و یا آماده باشد تا در صورت لازم فراخوانی شود. در این زمان، ما کد‌ها را باید در قسمت سرایند و مابین تگ head بنویسیم و در قسمت بدنه آن را فراخوانی کنیم. به نمونه زیر توجه کنید:

کد: 
<!DOCTYPE html>

<html>

<head>

<script>

function myFunction()

{

document.getElementById("demo").innerHTML="نخستین تابع در جاوا اسکریپت";

}

</script>

</head>

<body>

<h1>درود دنیا</h1>

<p id="demo"> محل استفاده از تابع </p>

<button type="button" onclick="myFunction()"> انتخاب کنید </button>

</body>

</html>

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

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

[attachment=11105]

با فشردن دکمه «انتخاب کنید» تابع فراخوان می‌شود و متن دیگری نمایش داده می‌شود.

[attachment=11104]
نوشتن کد‌ها در یک فایل خارجی
دسته سوم از کد نویسی جاوا اسکریپت قرار دادن کد‌ها در یک فایل خارجی و وارد کردن آن در فایل‌های دیگر است. ما می‌توانیم جهت ساده سازی کدنویسی و یا برای جلوگیری از تکرار یک اسکریپت در صفحات وب، برچسب‌های اچ تی‌ ام ال را در یک صفحه و کدهای جاوا اسکریپت را در یک فایل جداگانه داخل برگه دیگری بنویسیم و با پسوند js آنها را ذخیره کنیم سپس در هر قسمت برگه اچ تی‌ ام ال که لازم بود، و یا در قسمت سرایند آن را وارد کنیم.

کدهای زیر را در یک فایل نوشته و آنرا به اسم javascirpt.js ذخیره کنید:

کد: 
document.write (" گرفتن داده از فایل خارجی ")

حال برگه‌ای دیگر با نام Lesson2-3.html ساخته و کدهای زیر را در آن قرار دهید:

کد: 
<!DOCTYPE html>

<html>

<head>

<script language="javascirpt" type="text/javascirpt"  src="javascirpt.js">

</script>

</head>

<body>

</body>

</html>

همانطور که می‌بینید با اجرا کردن فایل اچ تی‌ ام ال، نوشته‌ای که شما در کد جاوا اسکریپت- در فایل خارجی- قرار داده‌اید، نمایان می‌شود. یعنی وقتی شما فایل Lesson2-3.html اجرا می‌کنید (روی آن دو بار کلیک می‌کنید)، برگه کد جاوا اسکریپت که نشانی‌اش را داده‌ایم فراخوان می‌شود و کد داخل آن نوشته را نمایش می‌دهد.

خصوصیت یا ویژگی‌های برچسب Script
برچسب اسکریپت که برچسب اصلی مشخص کننده کدهای جاوا اسکریپت است دارای یک سری ویژگی‌هایی می‌باشد که توسط آنها بهتر به مرورگر شناسانده می‌شود.

ویژگی زبان یا Language
این برچسب نقش مشخص کردن زبان کد‌ها را بازی می‌کند. برای برچسب زبان باید مقدار javascirpt به صورت زیر نوشته شود:

کد: 
<script language="javascirpt">

........

</script>

ویژگی نوع یا Type
این برچسب نوع کد‌ها را به مرورگر می‌شناساند و شیوه نوشتن آن بصورت زیر است:

کد: 
<script  type="text/javascirpt">

</script>

ویژگی منبع یا src (Source)
از این برچسب در زمان‌هایی که می‌خواهیم از کدهای جاوا اسکریپت که در فایل خارجی قرار دارد استفاده کنیم، بهره می‌بریم. همانطور که در بخش «نوشتن کد‌ها در یک فایل خارجی» دیدید ما از این ویژگی استفاده کردیم.

بدین ترتیب نسخه کامل برچسب اسکریپت باید بصورت زیر باشد:

کد: 
<script language="javascirpt" type="text/javascirpt" src="نام و نشانی فایل خارجی">

</script>

در این صورت ما زبان، نوع کد‌ها نام و نشانی منبع فایل خارجی را به مرورگر معرفی کرده‌ایم.

درس سوم- اظهارات، متغیر‌ها و ثابت‌ها

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

مفاهیم مهم
اظهارات (دستورات) جاوا اسکریپت
جاوا اسکریپت در اصل مجموعه ای از اظهارات (خطوط یا دستورات) نوشته شده است که توسط مرورگر خوانده و اجرا می‌شود. این خطوط یا اظهارات برای مرورگر به عنوان دستوراتی تعریف می‌شوند که مرورگر باید خط به خط (به ترتیب خط) آنها را اجرا کند. در اصل این دستورات هستند که به مرورگر می‌گویند باید چه عملی را انجام دهد.

بطور نمونه:

کد: 
alert("درود جهان");

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

نقطه ویرگول یا Semicolon سمی کالن ( ; )
نقش اصلی «نقطه ویرگول» جدا سازی دستورات (اظهارات) است و بطور عمومی در انتهای هر دستور اجرایی گذاشته می‌شود. استفاده از این علامت به ما این امکان را می‌دهد که در یک خط بتوانیم چندین دستور اجرایی را بنویسیم و آنها را با نقطه ویرگول از هم جدا کنیم.

کد: 
alert("درود جهان");

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

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

کد: 
function myFunction()

{

document.write(" گرفتن داده از فایل خارجی ");

.

.

.

}

بزرگی و کوچکی عبارات در جاوا اسکریپت
جاوا اسکریپت به بزرگی یا کوچکی حروف استفاده شده در اظهارات حساس است. یعنی تابعی با نام myFunction با تابع MyFunction در حالی که دارای یک نام هستند دو تابع متفاوت می‌باشند.

فضای خالی
جاوا اسکریپت فضاهای اضافی (خالی) را نادیده می‌گیرد. شما می‌توانید فضای سفید یا خالی به ما بین اسکریپت خود اضافه کنید، تا آن را بیشتر قابل خواندن کنید. این امر به راحتی و خوانایی کدهای شما کمک می‌کند.

شکستن خطوط کد‌ها با خط مورب
با کمک یک خط مورب () می‌توانید یک خط کد را به دو قسمت تقسیم کرده و آنها را در دو خط بنویسید:

کد: 
document.write ("درود

جهان") ;

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

کد: 
document.write

("درود جهان");

توضیحات (Comments) در جاوا اسکریپت
توضیحات نوشته‌هایی هستند که شما برای شرح کدهای خود می‌نویسید. این عمل به شما کمک می‌کند که اگر در آینده به سراغ کدهای پیشین خود آمدید با خواندن توضیحات خیلی ساده عملکرد کدهای خود را بیاد آورید.

نکته: توضیحات توسط جاوا اسکریپت اجرا نمی‌شوند، این یعنی مرورگر آنها را نمایش نمی‌دهد.

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

// این یک توضیح اضافه تک خطی برای یادآوری کدهاست

توضیحات چند خطی: توضیحات چند خطی با یک خط مورب و ستاره (*/) آغاز شده و با ستاره خط مورب (/*) پایان می‌یابد.

/*

این یک توضیح اضافه چند خطی می‌باشد.

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

*/

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

کد: 
/*

document.write(" گرفتن داده از فایل خارجی ")

*/

از این تکنیک در زمان ایراد یابی کد‌ها استفاده می‌کنیم.

نکته: می‌توانیم از توضیحات در آخر یک خط کد برای شرح آن دستور استفاده کنیم:

کد: 
document.write(" گرفتن داده از فایل خارجی "); // این دستور عبارت داخل پرانتز را چاپ می کند

متغیر‌ها در جاوا اسکریپت
متغیر‌ها ظرف یا مکانی درون حافظه هستند که برای نگهداری و ذخیره مقدارهای مختلف مورد استفاده قرار می‌گیرند. برای هر متغیری می‌توان نامی انتخاب کرد و یکی از انواع داده‌ها را به آن نسبت داد. (درون آن قرار داد.)

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

کد: 
var x ;               // این اظهار که در قالب یک دستور نوشته شده است یک متغییر می سازد

این عمل متغییری با نام x می‌سازد که مقدار آن خالی است.

نکته: حال متغییر x یک متغیر با مقدار تعریف نشده (undefined) است.

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

کد: 
var x = 5;           // این دستور یک متغیر عددی با مقدار 5 می سازد

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

کد: 
x = 5 ;

y = 6 ;

z = x ; مقدار این متغیر می شود  5 //

z = x + y ;  مقدار این متغیر می شود 11 // *

z = 2 + y ;  مقدار این متغیر می شود 8 // *

نکته: متغیر‌ها می‌توانند حاوی یک مقدار یا عبارت بشوند. (به نمونه بالا دقت کنید. *)

نکته: در جاوا اسکریپت ما قادریم چندین متغیر را در یک خط با استفاده از «ویرگول» تعریف کنیم:

کد: 
var lastname = "علی" ,  age = 30 , job = "ایرانی" ;

قوانین نام گذاری متغیر‌ها

نام متغیر باید با یک حرف شروع شود.
نام متغیر می‌تواند با علامت‌های $ و _ آغاز شود. (پیشنهاد نمی‌شود.)
جاوا اسکریپت به بزرگی و کوچکی نام متغیر حساس است.

ثابت‌ها
همانطور که از نام آن پیداست ثابت‌ها مقادیری که تغییر نمی‌کنند را در خود نگهداری می‌کنند. ثابت‌ها را با استفاده از کلمه کلیدی const تعریف می‌کنیم. تفاوت ثابت‌ها با متغیر‌ها در این است که ثابت‌ها فقط می‌توانند یک مقدار ثابت بگیرند و دیگر نمی‌توان مقدار آنها را تغییر داد. برای نمونه وقتی در یک برنامه برای بدست آوردن مساحت دایره یک ثابت با مقدار ۳.۱۴ تعریف می‌کنیم دیگر در طول برنامه مقدار آن را تغییر نمی‌دهیم. همانطور که می‌دانید برای بدست آوردن مساحت دایره به عدد ثابت «پی» نیاز داریم و این عدد همواره ثابت است.

کد: 
Const p=3.14;

Const p=2;این تغییر امکان پذیر نیست و مقدار این ثابت را که در بالا تعریف کردیم دیگر نمی توان تغییر داد //

نوع داده‌ها در جاوا اسکریپت
در جاوا اسکریپت انواع داده‌های زیر وجود دارند:

- عددی (Number)
جاوا اسکریپت تنها یک نوعِ عددی دارد که می‌تواند صحیح یا اعشاری باشد.

کد: 
var x = 4.00 ;     

var y = 4 ;

- رشته‌ای (String)
مجموعه‌ای از کاراکتر‌ها را شامل می‌شود که داخل علامت‌های " " یا ' ' قرار می‌گیرند. این کاراکتر‌ها حتی می‌توانند عدد باشند.

کد: 
var name =  "احمد 11" ;

var name = '547' ;

- منطقی (Boolean)

نوعی که مقدار «درست» یا «نادرست» را شامل می‌شود.

کد: 
var x=true;

var y=false;

- آرایه‌ها (Array)

نوعی داده که مجموعه‌ای از مقادیر را در بر می‌گیرد. در اصل آرایه مجموعه‌ای از متغیرهایی از یک نوع داده با نام یکسان است که هر کدام از اعضای (متغیرهای) آن توسط یک شمارنده (اندیس) از یکدیگر متمایز می‌شوند. شمارنده هر عضو آرایه در یک براکت در مقابل نام آن بصورت عددی (از ۰ تا....) تعیین می‌شود و برای مقدار دهی و دسترسی به هر عضو آرایه از اندیس آن استفاده می‌شود. برای تعریف یک آرایه از واژه کلیدی new Array به شکل زیر استفاده می‌شود:

کد: 
var =  نام آرايه   new Array();

var Cars = new Array();

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

کد: 
cars[0] = "پراید";

cars[1] = "رنو";

cars[2] = "بنز";

در ادامه دوره بیشتر در این مورد بحث خواهد شد.

- آبجکت‌ها (Objects)
توضیح در طول دوره!

- تهی (null)
نوعی که دارای مقدار تهی می‌شود. توجه کنید متغیری که دارای مقدار تهی است خالی نیست بلکه مقداری با تعریف تهی در آن قرار می‌گیرد.

کد: 
name = null ;

- تعریف نشده (undefined)
مقداری که اندازه آن تعریف نشده است. در قسمت متغیر‌ها متوجه این مفهوم شدیم:

کد: 
var x ;

متغییر x یک متغیر با مقدار تعریف نشده (undefined) است.

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

درس چهارم- عملگر‌ها و توابع

در درس پیشین با تعدادی مفاهیم پایه‌ای جاوا اسکریپت (اظهارات و...) آشنا شدیم. در این درس به تعداد دیگری از این مفاهیم می‌پردازیم.

عملگر‌ها
عملگر‌ها در اصل نماد یا نشانه‌ای برای انجام عمل ویژه‌ای هستند. هر کدام از عملگر‌ها وظیفه خاصی دارند، بطور نمونه عملگر + وظیفه جمع کردن را بر عهده دارد. عملگر‌ها در بیشتر زبان‌های برنامه نویسی وجود دارند چرا که فاکتورهایی برای حل مشکلاتی هستند که برنامه نویس‌ها برایشان برنامه می‌نویسند. به عنوان نمونه برنامه «ماشین حسابی» را در نظر بگیرید که توسط یک برنامه‌نویس نوشته شده باشد، بطور حتم در این برنامه از عملگر‌ها استفاده شده است.

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

انواع عملگر‌ها در جاوا اسکریپت
عملگرهای محاسباتی یا ریاضی (Arithmetic Operators)
این نوع عملگر‌ها اعمال اصلی (+ - / *) در ریاضی را انجام می‌دهند. علاوه بر آنها عملگر دیگری (%) که وظیفه نمایش خارج قسمت یک تقسیم را بعهده دارد بهمراه دو عملگر دیگر که هر کدام به ترتیب یک واحد اضافه (x++ یا ++x) و يک واحد کم (x-- یا x--) می‌کنند، وجود دارند. به نظر می‌رسد که نیازی به شرح عملگرهای چهار عمل اصلی ریاضی نباشد اما وظیفه سه عمگر دیگر به این ترتیب است که عملگر (%) باقیمانده تقسیم دو عدد را بر می‌گرداند. برای نمونه با استفاده از این عملگر باقیمانده تقسیم ۵ بر ۲ که ۱ می‌شود برگردانده می‌شود. دو عملگر دیگر (x++ یا ++x) و (x-- یا x--) به ترتیب یک واحد به عدد x اضافه و کم می‌کنند.

عملگرهای مقایسه‌ای
این نوع عملگر‌ها مقدارهای دو متغیر را با هم مقایسه می‌کنند و نتیجه این مقایسه یا درست می‌شود و یا غلط. عملگرهای مقایسه‌ای در دستورات شرطی جاوا اسکریپت بسیار کارایی بالایی دارند. در تصویر زیر شش نوع از این عملگر‌ها نشان داده شده است.
[attachment=11163]

شما هیچ نیازی به بخاطر سپردن این عملگر‌ها ندارید، در طول دوره و در زمان نوشتن کدهای خود اندک اندک کارکردن با تمام این عملگر‌ها برایتان ساده می‌شود.

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

&& به معنی «و» یا AND مانند (x < 10 && y > 1)

||به معنی «یا» OR مانند (x==5 || y==5)

!این عملگر نتیجه را منفی می کند مانند (x==y) !

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

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

کد: 
var x = 5 ;

حال فرض کنید می‌خواهیم مقدار x را به مقدار قبلی خود اضافه کنیم:

کد: 
x+= x ;

alert(x); // مقدار 10 را نمایش میدهد چراکه 5 دوباره به مقدار قبلی آن اضافه شده است

این عبارت در اصل‌‌ همان x = x + x می‌شود.

به همین ترتیب می‌توان مقداری را از متغیر خود کم کنیم:

کد: 
var x = 5 ;

var y = 3 ;

x-=y;

alert(x);  این دستور مقدار 2 را باز می گرداند //

این عمل (x-=y) در اصل‌‌ همان x=x-y است.

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

کد: 
x*=y

x/=y

x%=y

استفاده از عملگر + برای مقادیر رشته‌ای
کاربرد دیگر عملگر + در بهم پیوستن دو مقدار رشته‌ای می‌باشد:

کد: 
var txt1 = " چه " ;

var txt2 = " ماشین خوبی " ;

var txt3 = txt1 + txt2 ;

alert(txt3) ;

نکته: برای قرار دادن فاصله بین مقادیر رشته‌ای کافیست یک جای خالی (فاصله) در یکی از رشته‌ها قرار دهید.

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

کد: 
var x=5+5;خروجی عدد 10 //

var y="5"+5;خروجی رشته 55 //

var z="درود"+5; خروجی رشته درود5 //

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

برای نمونه به مجموعه کدهای زیر دقت کنید:

کد: 
<!DOCTYPE html>

<html>

<head>

<script>

function myFunction()

{

alert("درود دنیا ");

var txt1 = " چه " ;

var txt2 = " ماشین خوبی " ;

var txt3 = txt1 + txt2 ;

alert(txt3) ;

}

</script>

</head>

<body>

<button onclick="myFunction()"> امتحان کنید </button>

</body>

</html>

در نمونه بالا تابع ()myFunction دارای مجموعه‌ای از کدهاست که در زمان فراخوانی آن اجرا می‌شوند. برای فراخوانی این تابع کافیست کاربر دکمه «امتحان کنید» را بفشارد. در حقیقت با فشردن دکمه «امتحان کنید» عمل فراخوانی تابع انجام شده و کدهای داخل بلوک تابع اجرا می‌شوند.

نحوه نوشتن تابع به شکلی زیر می‌باشد:

کد: 
function  نام تابع()

{

کدهای داخل تابع که می خواهید اجرا شوند

}

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

کد: 
<!DOCTYPE html>

<html>

<head>

<script>

function myFunction(name)

{

alert(" درود " + name);

}

</script>

</head>

<body>

<button onclick="myFunction(' پیمان')"> امتحان کنید </button>

</body>

</html>

در نمونه بالا تابع myFunction (name) یک پارامتر (نام) را دریافت کرده و در داخل تابع از آن استفاده می‌کند. شما می‌توانید هر مقداری که خواستید به عنوان ورودی به تابع بفرستید.

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

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

کد: 
<!DOCTYPE html>

<html> <head>

<script>

function myFunction(x) {

y = x / 2 ;

return y ; }

</script> </head>

<body>

<script>

var num = myFunction(200);

alert(num);

</script>

</body>

</html>

واژه return دستوری است که نقش بازگرداندن خروجی را بر عهده دارد.

نکته: در صورتی که بخواهیم در قسمتی از تابع از آن خارج شویم یعنی اجازه اجرای کدهای بعدی را ندهیم از return استفاده می‌کنیم.

کد: 
function myFunction( a , b ) {

if ( a > b )  {

  return ;  }

x = a + b ;  }

در نمونه بالا بدون ارسال خروجی، تنها برای خارج شدن از تابع و اتمام اجرای کدهای داخل آن، از return استفاده کرده‌ایم. اگر a بزرگ‌تر از b باشد از تابع خارج می‌شویم.

متغیرهای محلی یا داخلی (Local Variables)
زمانی که متغیری را در داخل یک تابع تعریف می‌کنیم آن متغیر محلی می‌شود، یعنی تنها در داخل‌‌ همان تابع قابل استفاده است. در اصل دامنه دسترسی به آن داخل تابع است.

کد: 
function myFunction(  ) {

  var a ;

var b ;

}

دو متغیر a و b متغیرهای محلی می‌باشند.

نکته: این نوع متغیر بعد از اتمام کار تابع از بین خواهند رفت.

متغیرهای جهانی (Global Variables)
به متغیرهایی جهانی گفته می‌شود که بیرون از توابع تعریف شده باشند. همه دستورات و توابع توانایی استفاده کردن از این نوع متغیر را دارا می‌باشند.

نکته: متغیرهای جهانی وقتی صفحه را ببندید از بین خواهند رفت.

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

کد: 
name = "پیمان" ;

به این شکل متغیر name یک متغیر جهانی خواهد بود و حتی در داخل توابع هم جهانی پنداشته خواهد شد.

دستور alert (ایجاد یک کادر پیام)
برای نمایش یک کادر پیام به کاربر از دستور alert استفاده می‌کنیم. همانطور که متوجه شده‌اید در درس‌های گذشته به کررات از این دستور استفاده کردیم.

کد: 
alert (" درود ") ;

دستور prompt (دریافت داده از کاربر)
اگر نیاز داشته باشیم که یک پیام به کاربر داده و از او پاسخی دریافت کنیم با استفاده از دستور prompt این مهم را انجام می‌دهیم.

کد: 
<!DOCTYPE html>

<html> <head> </head>

<body>

<script>

 var name = prompt ( "  لطف کنید نام خود را وارد کنید " ) ;

alert ( "  خوش آمدید " + name ) ;

</script>

</body> </html>

همانطور که در نمونه بالا مشاهده می‌کنید ابتدا با استفاده از دستور prompt نام کاربر را گرفته و در متغیر name قرار داده‌ایم و بعد با استفاده از alert آن را به همراه پیغام «خوش آمدید» چاپ کرده‌ایم.

درس پنجم- آبجکت‌ها
از آنجا که زبان برنامه نویسی جاوا اسکریپت یک زبان آبجکت گرا (Object Oriented) می‌باشد پیش از فرو رفتن بیشتر به مفاهیم عمومی برنامه نویسی، کمی با این ویژگی (آبجکت گرایی) جاوا اسکریپت آشنا می‌شویم. به همین خاطر درس پنجم را به شرح مفاهیم آبجکت گرایی جاوا اسکریپت و دیگر متعلقاتش از قبیل رویداد، متد و... اختصاص می‌دهیم.

آبجکت (شی) Objects
ما در زندگی روزمره خود با مفهوم آبجکت آشنایی کامل داریم و هر روزه در اطرف خود از این آبجکتها استفاده می‌کنیم. برای توضیح ساده این مفهوم معمولا از نمونه ماشین استفاده می‌شود. بله‌‌ همان ماشینی که هر روز از آن برای رفت و آمد استفاده می‌کنیم یک نمونه کامل از آبجکت است. هر آبجکت دارای دو فاکتور مهم است؛ ویژگی‌ها (Properties) و متد‌ها .(Methods) اگر ماشین را یک آبجکت در نظر بگیریم، رنگ، مدل، وزن و نام آن را می‌توانیم به عنوان ویژگی‌های آن بر شمریم، و برای متدهای آن به روشن کردن، راندن و ترمز کردن اشاره می‌کنیم. همه ماشین‌ها دارای این ویژگی‌ها و متد‌ها هستند اما مقادیر و عملکرد آنها ماشین به ماشین متفاوت است.

آبجکت در دنیای برنامه نویسی جاوا اسکریپت در اصل مفهومی است که کاربرد آن همانند متغییر در نگهداری داده‌ها تعریف شده است. این یعنی آبجکت متغیری است دارای دو فاکتور «ویژگی‌ها» و «متد‌ها» (متد‌ها در اصل‌‌ همان توابع هستند منتها در اینجا با نام متد استفاده می‌شوند). داشتن این دو فاکتور این اجازه را به آبجکتها می‌دهد تا هم مقادیر بیشتری از داده‌ها و هم انواع مختلف از آنها را نگه داری کنند. ویژگی‌های هر آبجکت مقادیری هستند که به آن آبجکت منتسب می‌شوند و متد‌هایش عمل‌هایی هستند که آن آبجکت قادر به انجام آنها می‌باشد. برای نمونه ماشین قرمز سفید را در نظر بگیرید. این ماشین دارای ویژگی «سفید» و متد «ترمز کردن» است.

ساختن و استفاده کردن از آبجکت به این ترتیب است که ابتدا ما نیاز به تهیه یک الگو داریم. مانند الگوی ساخت یک خودرو –می‌توانیم به آن نقشه هم بگوییم- که با استفاده از آن خودرو را می‌سازیم. بعد از داشتن الگو می‌توانیم نمونه‌هایی از روی آن تهیه کنیم، درست مانند شرکت‌های خودرو سازی که ابتدا الگوی خودرو را فراهم کرده و بعد از روی آن خودرو‌ها (آبجکتها) را می‌سازند. در برنامه نویسی آبجکت گرا (مانند جاوا اسکریپت) از این مفهوم استفاده شده و آن را پیاده می‌کنیم. یعنی ابتدا یک الگو ساخته و بعد از روی آن الگو آبجکت (نمونه)‌هایی را می‌سازیم.

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

نکته: همه چیز در جاوا اسکریپت یک آبجکت است. در طول دوره، این مهم برایتان روشن خواهد شد.

تصویر زیر نمایان گر یک آبجکت (خودرو) بهمراه ویژگی‌ها و متد‌هایش است.

[attachment=11260]
تصویر از w3schools
تقریبا همه چیز در جاوا اسکریپت را می‌توان یک آبجکت نامید؛ توابع، رشته‌ها، آرایه‌ها، تاریخ و غیره. در جاوا اسکریپت دو نوع آبجکت وجود دارد یکی آنهایی که بطور پیش فرض (Built-in) در آن از پیش ساخته شده است و دیگری آبجکتهایی که ما به عنوان برنامه نویس می‌سازیم. از نمونه آبجکتهایی از پیش ساخته شده می‌توانیم به تاریخ (Date) یا رشته اشاره کنیم. در نمونه کدهای زیر ما از ویژگی length که متعلق به آبجکت «رشته» است استفاده می‌کنیم.

کد: 
<!DOCTYPE html>

<html> <head> </head>

<body>

<script>

 var msg = prompt("  لطف کنید نام خود را وارد کنید ");

var x = msg.length ;

alert (" نام شما دارای " + x  + " حرف است   " );   

</script>

</body> </html>

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

در این قسمت با کمک دو آبجکت سند (Document) و پنجره (Window) نمونه‌هایی را اجرا می‌کنیم تا شما درک بهتری از این نوع آبجکتها پیدا کنید و رفته رفته در طول دوره دیگر آبجکتها را معرفی خواهیم کرد.

سند Document
اجازه بدهید با نوشتن نمونه‌ای شرح آبجکت سند را بیان کنیم:

کد: 
<!DOCTYPE html>

<html> <head> </head>

<script>

document.write("<p>در این کد از آبجکت سند به همراه متد نوشتن استفاده شده است </p>");

</script>

</body>  </html>

همانطور که می‌بینید کدهای بالا با استفاده از نام آبجکت و نام متد آن آبجکت، متنی را در مرورگر چاپ می‌کنند. استفاده کردن از آبجکتها بسیار ساده می‌باشد کافیست که نام آنها و ویژگی‌ها و متد‌هایشان را بدانید.

پنجره Window
پنجره یکی دیگر از آبجکتهای از پیش ساخته شده جاوا اسکریپت است که سطح آن از نظر کارایی بالاست. در قسمت پیشین زمانی که از دو متد alert () و prompt () استفاده کردیم در اصل از دو متد آبجکت پنجره بهره بردیم.

کد: 
<!DOCTYPE html>

<html> <head>

<script>

var myWindow;

function openWin() {

myWindow = window.open(); }

function closeWin() {

myWindow.close(); }

</script> </head>

<body>

<button onclick="openWin()">یک پنجره باز کن</button>

<button onclick="closeWin()"> پنجره را ببند </button>

</body> </html>

مجموعه کدهای بالا دو دکمه را می‌سازد که با فشردن یکی (یک پنجره باز کن) پنجره‌ای باز می‌شود و با فشردن دیگری (پنجره را ببند) پنجره بسته می‌شود.

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

کد: 
person = new Object() ;

به این ترتیب ما یک آبجکت با نام personساختیم که می‌تواند دارای ویژگی‌های خاص خود باشد. برای نسبت دادن ویژگی و مقدار به آن به شکل زیر عمل می‌کنیم:

کد: 
person.firstname =" پیمان " ;

person.lastname="  ایرانی ";

person.age=  30 ;

نکته: راه‌های متفاوتی برای ساخت یک آبجکت وجود دارد که در طول دوره با آنها آشنا می‌شویم.

دسترسی به ویژگی‌های یک آبجکت
برای دسترسی به ویژگی‌های یک آبجکت باید به شیوه زیر عمل کنیم:

کد: 
نام آبجکت . نام ویژگی

در نمونه پایین ابتدا یک آبجکت ساخته و مقادیری را به آن اختصاص می‌دهیم. بعد ویژگی‌های آن را چاپ می‌کنیم.

کد: 
<!DOCTYPE html>

<html> <head> </head>

<body>

<script>

person = new Object() ;

person.firstname =" پیمان " ;

person.lastname="  ایرانی ";

person.age=  30 ;

alert (person.firstname + person.lastname + person.age + " ساله " );       

</script>

</body> </html>

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

کد: 
نام آبجکت . نام متد

کد: 
<!DOCTYPE html>

<html> <head> </head>

<body>

<script>

person = new Object() ;

person.firstname =" peyman " ;

var x= person.firstname.toUpperCase();

alert (x) ;         

</script>

</body> </html>

در نمونه بالا ابتدا یک آبجکت ساخته و ویژگی‌ای را به آن اختصاص داده‌ایم. بعد متد toUpperCase () را که حروف را بزرگ می‌کند به آن آبجکت منتسب کردیم و مقدار نهایی را در متغیری ریخته‌ایم و در آخر خروجی آن را چاپ کردیم.

رویدادها در جاوا اسکریپت (Events)
رویداد‌ها اتفاق‌هایی هستند که در واقع به دست کاربران ایجاد می‌شوند، اتفاق‌هایی که آبجکتها با آنها رو به رو می‌شوند و بر اساس تعریف داده شده به آن اتفاق از خود واکنشی نشان می‌دهند. برای نمونه رویداد کلیک کردن را در نظر بگیرید (کلیک چپ کردن کاربر بر روی آبجکت) این رویداد ممکن است برای یک دکمه یا یک تصویر (آبجکتی) اتفاق بیافتد. حرکت موس، باز کردن یک پنجره، بستن یک پنجره و… همه یک رویداد هستند، حتی قرار گرفتن موس روی یک عکس یا خارج شدن موس از روی عکس نیز یک رویداد برای عکس محسوب می‌شود. در لیست زیر مجموعه‌ای از رویدادهای تعریف شده در جاوا اسکریپت آورده شده است:

onClick کلیک کردن
onDblclick دابل کلیک کردن
onMoseover ورود موس بر روی یک آبجکت
onMouseout خروج موس از روی یک آبجکت
onMousemove حرکت کردن موس
onKeypress فشردن یکی از کلیدهای صفحه کلید
onKeydown پایین آمدن یکی از کلیدهای صفحه کلید
onLoad باز شدن یک پنجره
onUnload بسته شدن یک پنجره
و تعداد دیگری از رویداد‌ها که در طول دوره از آنها استفاده خواهیم کرد.

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

جملات شرطی در جاوا اسکریپت
ما در زندگی روزمره خود بار‌ها از دستورات شرطی استفاده می‌کنیم. برای نمونه می‌گوییم: اگر ورزش کنی سلامت می‌مانی. جملات شرطی دارای یک شرط و یک (یا چندین) عمل هستند که بعد از شرط آورده (اجرا) می‌شوند و در صورت برقرار بودن شرط است که عمل صورت می‌گیرد. همانطور که می‌بینید جمله شرطی گفته شده (اگر ورزش کنی سلامت می‌مانی) از دو قسمت تشکیل شده است؛ اگر ورزش کنی (شرط جمله)، سلامت می‌مانی (دستور یا عمل مربوط به شرط). این منطق دقیقا در زبان‌های برنامه نویسی از جمله در زبان برنامه نویسی جاوا اسکریپت استفاده شده است. شیوه استفاده از جملات شرطی در جاوا اسکریپت به این شکل است که ابتدا یک شرط بیان می‌شود و بعد در صورت درست بودن آن شرط عملی انجام می‌شود. بطور کلی می‌توان گفت که جملات شرطی برای اجرای دستورات متفاوت بر اساس شرط‌های متفاوت استفاده می‌شوند. البته دستورات شرطی به چند نوع تقسیم می‌شوند که در هر نوع نگارش کدنویسی آن متفاوت است.

انواع جملات شرطی در جاوا اسکریپت
در جاوا اسکریپت چهار نوع جملات شرطی وجود دارند که به شرح زیر می‌باشند:

۱- اگر (شرط) آنگاه (عمل):

کد: 
if (شرط)

  {

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

  }

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

کد: 
<!DOCTYPE html>

<html>

<body>

<script>

var x = 5 ;

if ( x == 5 )

{

document.write('  برابر 5 است x ');

}

</script>

</body>

</html>

در نمونه بالا ابتدا یک متغیر درست و به آن مقدار ۵ داده شده است بعد در جمله شرطی آمده که اگر مقدار متغیر برابر ۵ بود یک پیغام چاپ کند. همانطور که می‌بینید این نوع جملات شرطی یک شرط دارند که در صورت درستی آن عملی انجام می‌شود یعنی فقط درست بودن شرط است که باعث ایجاد عمل می‌شود.

۲- اگر (شرط) آنگاه (عمل) در غیر اینصورت (عمل دیگری):

کد: 
if (شرط)

  {

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

  }  else

 {

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

}

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

کد: 
<!DOCTYPE html>

<html>

<body>

<script>

var x = 6 ;

if ( x == 5 )

{

document.write('  برابر 5 است x ');

}

else

{

document.write(' برابر 5 نیست x ');

}

</script>

</body>

</html>

در مجموعه کدهای بالا ابتدا مقدار متغیر x برابر ۶ قرار داده شده است و بعد در داخل جمله شرطی مقدار آن بررسی شده است: اگر x برابر ۵ است یک پیغام چاپ می‌شود و در غیر این صورت پیغام دیگری چاپ می‌شود. یعنی در صورت برقرار نبودن شرط باز عملی انجام می‌شود و این فقط درست بودن شرط نیست که باعث انجام عمل می‌شود.

۳- اگر (شرط) آنگاه (عمل) در غیر این صورت اگر (شرط) آنگاه (عمل دیگری) ..... در غیر این صورت (عمل دیگری):

کد: 
if ( شرط )  {

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

  }   else if ( شرط ) {

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

} else  {

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

}

نوع سوم جملات شرطی در اصل از چند جمله شرطی پی در پی تشکیل شده است. بدین ترتیب که چند شرط پشت سر هم بررسی می‌شود هر جا که شرطی برقرار بود دستور مربوط به آن شرط انجام می‌شود، در صورت برقرار نبودن همه شرط‌ها دستور آخر که مربوط به «در غیر این صورت است» اجرا می‌شود.

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

کد: 
<!DOCTYPE html>

<html>

<body>

<script>

var x = prompt ( "  یک عدد وارد کنید " ) ;

if ( x == 0 )

{

document.write('   عدد وارد شده صفر است  ');

}

else if (x < 0)

{

document.write('   عدد وارد شده منفی است  ');

} else {

document.write('   عدد وارد شده مثبت است  ');

}

</script>

</body>

</html>

مجموعه کدهای بالا ابتدا یک عدد را توسط دستور (propmt) از کاربر درخواست می‌کند و آن را در داخل متغیر (x) قرار می‌دهد. بعد در داخل جملات شرطی ابتدا صفر بودن عدد را بررسی می‌کند که اگر اینطور باشد پیغام (عدد وارد شده صفر است) را چاپ می‌کند. در صورتی که عدد وارد شده صفر نباشد سراغ شرط بعدی می‌رود که در آن منفی بودن عدد را (x < 0) بررسی می‌کند و اگر این طور باشد پیغام (عدد وارد شده منفی است) را چاپ می‌کند. در صورتی که هیچ کدام از شرط‌های پیشین درست نباشند پیغام (عدد وارد شده مثبت است) چاپ می‌شود.

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

کد: 
<!DOCTYPE html>

<html>

<body>

<script>

var x = prompt ( "  یک عدد وارد کنید " ) ;

if ( x > 0 )

{

            if ( x % 2 == 0) {

                        document.write('   عدد وارد شده زوج است  ');

                 } else {

                        document.write('   عدد وارد شده فرد است  ');       

                        }

} else if (x == 0) {

document.write('   عدد وارد شده صفر  است  ');

} else {

document.write('   عدد وارد شده منفی  است  ');

}

</script>

</body>

</html>

در مجموعه کدهایی که در بالا نوشته‌ایم ابتدا مثبت بودن عدد را با شرط x > 0 بررسی می‌کنیم؛ اگر عدد مثبت باشد (بزرگ‌تر از صفر باشد) وارد بلوک کدهای جمله شرطی مربوطه (x > 0) شده و شرط دیگر که باقیمانده تقسیم عدد بر دو باشد را بررسی می‌کند. در زیر حالت‌هایی که ممکن است اتفاق بیافتد را می‌آوریم:

۱- اگر عدد بزرگ‌تر از صفر بود و اگر باقیمانده تقسیم آن بر دو صفر بود پیغام (عدد وارد شده زوج است) را چاپ می‌کند.
۲- اگر عدد بزرگ‌تر از صفر بود و اگر باقیمانده تقسیم آن بر دو صفر نبود پیغام (عدد وارد شده فرد است) را چاپ می‌کند.
۳- اگر عدد بزرگ‌تر از صفر نبود. اگر عدد برابر صفر بود پیغام (عدد وارد شده صفر است) را چاپ می‌کند.
۴- در غیر این صورت پیغام (عدد وارد شده منفی است) را چاپ می‌کند.
همانطور که مشاهده می‌کنید در قسمت ۱ و ۲، شرطی تو در تو اتفاق می‌افتند یعنی در صورت برقرار بودن شرط ابتدایی وارد شرط دوم که درون شرط ابتدایی است، می‌شویم.

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

نکته: نقطه اشتراک هر سه نوع شرطی بالا استفاده از عبارت if برای بررسی شرط‌ها است.

۴- شرطی نوع چهارم: شرطی چند گانه Switch Statement

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

کد: 
switch (مورد شرط)

{

case  1شرط:

  کدها

  break;

case 2شرط:

  کدها

  break;

default:

  حالت پیش فرض (در صورتی که هیچکدام از شرط ها برقرار نشد)

}

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

همانطور که می‌بینید یک مقدار به عنوان مورد شرط در نظر گرفته می‌شود و بعد در هر قسمت با کمک عبارت case شرط مورد بررسی قرار می‌گیرد. به این نوع شرطی، شرطی چندگانه گفته می‌شود، زیرا با استفاده از یک مقدار چندین شرط بررسی می‌شود.

کد: 
<!DOCTYPE html>

<html>

<body>

<script>

var day = new Date().getDay() ;

switch (day)

{

case 0 :

  x = " یکشنبه " ;

  break ;

case 1 :

  x = "  دوشنبه " ;

  break ;

case 2 :

  x = " سه شنبه " ;

  break ;

case 3 :

  x = " چهار شنبه " ;

  break ;

case 4 :

  x = " پنج شنبه " ;

  break ;

case 5 :

  x = " جمعه " ;

  break ;

case 6 :

  x = " شنبه" ;

  break ;

}

document.write ( +  " است " x "امروز " + );

</script>

</body>

</html>

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

درس هفتم- حلقه‌ها

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

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

حلقه For
for یکی از رایج‌ترین و پرکاربرد‌ترین ابزار حلقه است، این دستور مجموعه‌ای از دستورات را به تعداد «دفعات مشخصی» تکرار می‌کند. عبارت «دفعات مشخصی» در جمله پیشین بسیار حایز اهمیت است، این عبارت یعنی ما می‌دانیم که حلقه ما به چه تعداد دفعه تکرار خواهد شد. همانطور که پیش از این گفتیم حلقه را در زمان تکرار کدهایی بکار می‌گیریم پس وقتی که می‌دانیم یک مجموعه کد را می‌خواهیم برای تعداد دفعات مشخصی اجرا کنیم از این نوع حلقه بهره می‌بریم.

ساختار کلی حلقه for به شکل زیر است:

کد: 
for ( شمارنده  ;   شرط ; گام حلقه )

  {

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

  }

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

- شمارنده
شمارنده یک متغیر است که برای آغاز کردن حلقه به آن نیاز داریم پس ابتدا آن را تعریف می‌کنیم. این شمارنده ابتدای حلقه را مشخص می‌کند بطور نمونه تعیین می‌کند که حلقه از ۰ شروع شود یا از ۱. شما می‌توانید شمارنده را هر عددی که خواستید انتخاب کنید.

نکته: شمارنده می‌تواند خارج از حلقه هم تعریف شود.

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

- گام حلقه
این جمله وظیفه افزایش یا کاهش شمارنده را بر عهده دارد. در اصل این عبارت گام حرکت حلقه را کنترل می‌کند.

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

نکته: گام حلقه می‌تواند بسته به آغاز حلقه (شمارنده) مثبت یا منفی باشد. اگر شما شمارنده را از عدد کوچک شروع کنید (بطور نمونه ۱) و بخواهید که حلقه ۵ بار تکرار شود، گام حلقه باید مثبت باشد تا شرط پایان حلقه محقق گردد. اما زمانی که شما شمارنده را از عدد بزرگ‌تر شروع کنید (برای نمونه ۶) برای تکرار پنج باره حلقه می‌توانید گام را منفی در نظر بگیرید. در زیر با نوشتن نمونه‌هایی این حالات را بررسی می‌کنیم.

فرض کنید با استفاده از این فن می‌خواهیم از شماره ۱ تا ۵ را در مرورگر چاپ کنیم. شیوه نگارش این حلقه با گام مثبت به ترتیب زیر است:

کد: 
<!DOCTYPE html>

<html>

<body>

<script>

for ( var i=1  ;  i <6 ; i++)

  {

  document.write(i + "<br />");

  }

</script>

</body>

</html>

در نمونه بالا شمارنده متغیری با مقدار ۱ است و شرط حلقه تا زمانی که این عدد کوچک‌تر از ۶ یعنی ۵ باشد درست است. گام حلقه متغیر را یکی یکی افزایش می‌دهد (گام مثبت) و حلقه تا زمانی که شمارنده به عدد ۵ برسد تکرار و کدهای داخل بلوک حلقه اجرا می‌شود. توضیح ساده حلقه می‌شود: شمارنده را عدد «۱» در نظر بگیر و تا زمانی که کوچک‌تر از «۶» است یکی به آن اضافه کن.

حلقه چاپ ۵ عدد با گام منفی:

کد: 
<!DOCTYPE html>

<html>

<body>

<script>

for ( var i = 5  ;  i  > 0 ; i --)

  {

  document.write(i + "<br />");

  }

</script>

</body>

</html>

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

حلقه for/in
این نوع حلقه برای جستجو در مقادیر یک آبجکت یا آرایه استفاده می‌شود. در درس‌های بعدی بیشتر به این نوع حلقه‌ها خواهیم پرداخت. در اینجا با اجرای یک نمونه، تنها به آن اشاره‌ای کوتاه خواهیم کرد تا شما با این نوع حلقه هم آشنایی مختصری پیدا کنید.

کد: 
<!DOCTYPE html>

<html>

<body>

<script>

var person={fname:"پیمان",lname:"ایرانی",age:25};

for (x in person)

  {

 document.write( person[x] + "<br />");

  }

</script>

</body>

</html>

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

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

کد: 
تعریف شمارنده

while (شرط)

  {

بلوک کدها برای اجرا

گام حلقه

  }

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

کد: 
<!DOCTYPE html>

<html>

<body>

<script>

i = 1; شمارنده //  

while ( i < 6)

  {

 document.write( i + "<br />");

 i++;

  }

</script>

</body>

</html>

در نمونه بالا شرط پایان حلقه کوچک‌تر بودن شمارنده از شرط (عدد ۶) است. نکته‌ای که باید در این نوع حلقه فراموش نکنیم، افزایش یا کاهش گام حلقه (i++) در داخل بلوک کدهاست. همانطور که گفتیم این نوع حلقه دارای یک شرط پایان است اما نباید فراموش کنیم که این گام حلقه است که شرایط پایان حلقه را با افزایش یا کاهش شمارنده فراهم می‌کند. پس در این نوع حلقه هم به یک شمارنده، یک شرط و یک گام حرکت نیاز داریم.

حلقه Do/While
Do/While نوعی دیگر از حلقه While است با این تفاوت که در این نوع حلقه پیش از بررسی شرط، بلوک کد‌ها یکبار اجرا می‌شود. پس از آن تا زمانی که شرط درست باشد حلقه تکرار شده و کد‌ها اجرا می‌شوند. عبارت مورد استفاده در این نوع حلقه Do و While است بهمراه شرطی که در مقابل While داخل پرانتز نوشته می‌شود.

کد: 
do

  {

  کدها برای اجرا

  }

while (شرط);

در نمونه زیر چاپ اعداد ۱ تا ۵ با استفاده از حلقه Do/While صورت می‌گیرد.

کد: 
<!DOCTYPE html>

<html>

<body>

<script>

i = 1;

do

  {

 document.write( i + "<br />");

 i++;

  } while (i < 6) ;

</script>

</body>

</html>

همانطور که در نمونه بالا پیداست ابتدا شمارنده یا متغیر i تعریف شده و بعد حلقه با کمک کلمه do آغاز می‌شود. سپس اجرای حلقه برای یکبار صورت گرفته و گام حلقه یک عدد افزایش می‌یابد، در خط آخر هم شرط حلقه (while (i < 6)) بررسی می‌شود. این اتفاق تا زمانی که شرط درست است تکرار می‌شود.

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

خارج شدن از حلقه The Break Statement
پیش از این در درس دستورات شرطی قسمت switch با عبارت Break روبرو شدیم. در شرح چگونگی کاربرد switch دیدیم که وقتی می‌خواستیم از «بلوک» مجموعه کدهایی خارج شویم از عبارت Break استفاده کردیم. به نمونه گفته شده در درس سویچ دقت کنید:

کد: 
switch (day)

{

case 0 :

  x = " یکشنبه " ;

  break ;

.

.

{

کدهای نوشته شده در بالا تکه‌ای از مجموعه کدهایی‌ست که در آن، از سویچ استفاده شده است. همانطور که می‌بینید در زمان درستی شرط (case 0:) عملیاتی (x = "یکشنبه") انجام شده و با استفاده ا[/code]ز break از بلوک کد‌ها خارج می‌شویم. پس یکی از کاربردهای break در سویچ است که برای خارج شدن از بلوک کد‌ها از آن استفاده می‌کنیم. کاربرد دیگر break در خارج شدن از حلقه است یعنی برای خارج شدن از حلقه در زمانی که شرط برقرار شده است. در این حالت break حلقه را شکسته و پس از آن کدهای بعد از حلقه اجرا می‌شوند.

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

کد: 
<!DOCTYPE html>

<html>

<body>

<script>

 for  ( i = 0 ;  i < 10  ; i++ )

  {

  if  ( i == 3 )   {

    break ;

    }

document.write ( "  شماره مورد نظر >>   " + i + "<<   است   "  +  "<br/ > " ) ;

  }

</script>

</body>

</html>

نمونه بالا نشان دهنده چگونگی استفاده از break در حلقه است. همانطور که در کدهای بالا پیداست در ابتدای حلقه یک شرط وجود دارد که شمارنده را برای برقراری شرط بررسی می‌کند و به محض برقراری شرط با استفاده از break از حلقه خارج می‌شود یعنی حلقه تا زمانی تکرار می‌شود که شرط برقرار نباشد. حلقه بالا در کل سه بار تکرار می‌شود زمانی که شمارنده ۰، ۱ و یا ۲ است. وقتی شمارنده به عدد ۳ می‌رسد، شرط برقرار می‌شود و کدهای داخل بلوک شرط که تنها شامل break است، اجرا می‌شوند، بعد از حلقه خارج شده و اجرای حلقه پایان می‌پذیرد.

ادامه دادن حلقه Continue Statement
حکم (اظهار) «ادامه دادن حلقه«(Continue) برای جلوگیری از اجرای (تکرار) یک دستور در داخل حلقه استفاده می‌شود. عبارت Continue همانند break باعث جلوگیری از تکرار حلقه می‌شود با این تفاوت که در break بعد از برقراری شرط بطور کامل از حلقه خارج می‌شود اما در Continue بعد از برقراری شرط تنها یکبار از تکرار حلقه جلوگیری کرده (دستور بعد از شرط اجرا نمی‌شود) و بعد دوباره به ابتدای حلقه برمی گردد و حلقه تکرار خود را ادامه می‌دهد.

کد: 
<!DOCTYPE html>

<html>

<body>

<script>

 for  ( i = 0 ;  i < 10  ; i++ )

  {

  if  ( i==3 )

    {

    continue ;

    }

document.write ( "  شماره مورد نظر <<   " + i + ">>   است   "  +  "<br>" ) ;

  }

</script>

</body>

</html>

نمونه کدهای بالا شبیه به کدهایی است که در قسمت break استفاده کردیم با این تفاوت که در اینجا بجای break از عبارت Continue بهره برده‌ایم. اتفاقی که می‌افتند اینست که به محض برقراری شرط دستور بعد از آن اجرا نمی‌شود و حلقه دوباره ادامه پیدا می‌کند. در این حالت حلقه ۹ بار تکرار می‌شود و تنها زمانی که شرط برقرار است (i==3) دستور داخل حلقه اجرا نمی‌شود.

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

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

کد: 
: (نام حلقه) یا (نام بلوک کد)

}

. . .

{

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

کد: 
<!DOCTYPE html>

<html>

<body>

<script>

numbers :

 for  ( i = 0 ;  i < 10  ; i++ )

  {

  if  ( i==3 )  {

    break numbers ;

    }

document.write( "  شماره مورد نظر <<   " + i + ">>   است   "  +  "<br>" ) ;

  }

</script>

</body>

</html>

همانطور که در نمونه بالا می‌بینید ابتدا نام (numbers:) را برای حلقه خود انتخاب کرده‌ایم و در داخل حلقه در زمان برقراری شرط با اشاره به آن (break numbers ;) از حلقه خارج شده‌ایم.

کدهای بالا نمونه‌ای برای استفاده از break است، شما می‌توانید از این قابلیت در Continue هم بهره ببرید تنها کافی‌ست که کدهای بالا را تغییر داده و از Continue استفاده کنید.

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

نکته: از قابلیت break بدون برچسب حلقه تنها می‌توانید در داخل حلقه استفاده کنید. یعنی با استفاده از برچسب شما قادر خواهید بود که از break برای خارج شدن از هر دسته کدی (بلوک کد) بهره ببرید اما بدون برچسب فقط داخل حلقه اجرا می‌شود.

استفاده از break همراه برچسب برای خارج شدن از بلوک کد
از break همراه برچسب می‌توان برای خارج شدن از یک بلوک کد استفاده کرد. کافیست برای بلوک کدهای خود نامی را برگزینیم، آنگاه با اشاره به نام در هر کجا که خواستیم از بلوک خارج می‌شویم. در نمونه زیر به این قابلیت پرداخته شده است.

کد: 
<!DOCTYPE html>

<html>

<body>

<script>

names = [ "پیمان" , "پژمان" , "پویا" , "پیروز" ] ;

list :

{

document.write(names[0] + "<br>");

document.write(names[1] + "<br>");

document.write(names[2] + "<br>");

document.write(names[3] + "<br>");

}

</script>

</body>

</html>

در کدهای بالا ابتدا متغیری (آرایه) با نام «names» ساخته شده و مقادیری (چندین نام) در داخل آن قرار داده شده است:

کد: 
names = [ "محمد" , "علی" , "پویا" , "پیروز" ] ;

سپس برای بلوک کدهایی که در ادامه نوشته شده نام list: انتخاب شده است.

کد: 
list :

انتخاب نام برای حلقه این توانایی را به ما داده است که در بین دستورات داخل بلوک هر جایی که خواستیم از حلقه خارج شویم. همانطور که می‌بینید بعد از سه دستور -که نام‌ها را چاپ می‌کنند- از برچسب (break list;) استفاده شده است در نتیجه چهارمین دستور اجرا نمی‌شود و نام آخر چاپ نمی‌شود.

کد: 
list :

{

document.write(names[0] + "<br>");

document.write(names[1] + "<br>");

document.write(names[2] + "<br>");

break list;

document.write(names[3] + "<br>");

}

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

آجکت در جاوا اسکریپت
در درس پنجم (درس آبجکتها) در مورد آبجکتها در جاوا اسکریپت شرح دادیم و گفتیم که بطور تقریبی همه چیز در جاوا اسکریپت آبجکت هستند؛ حتی انواع داده‌های نخستین مانند رشته‌ها؛ البته به غیر از null و undefined، علاوه بر آن شما می‌توانید آبجکتی را برای خودتان بسازید. نکته‌ای که باید به آن توجه کنید اینست که هر کدام از انواع داده‌های نخستین می‌توانند هم به شکل سنتی (نوع نخستین داده‌ها) و هم به شکل آبجکت مورد استفاده قرار گیرند. این بدان معنی ست که داده‌ها را هم می‌توان بشکل همیشگی آن استفاده کرد و هم می‌توان آنها را به عنوان یک آبجکت معرفی کرد با این تفاوت که وقتی آنها را به شکل آبجکت معرفی می‌کنیم داده‌ها دارای «ویژگی» و «متد» می‌شوند.

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

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

کد: 
person = new Object() ;

به این ترتیب ما یک آبجکت با نام person ساختیم که می‌تواند دارای ویژگی‌های خاص خود باشد. برای ساخت ویژگی و نسبت دادن مقدار به آنها به شکل زیر عمل می‌کنیم:

کد: 
person.firstname =" محمد " ;

person.lastname="  "ققنونس";

person.age=  30 ;

برای دسترسی به ویژگی‌های آبجکت ساخته شده به دو صورت می‌توانیم عمل کنیم:

یکم: دسترسی به ویژگی‌ها بصورت تک به تک:

کد: 
alert (person.firstname) ;

همانطور که می‌بینید با آوردن «نام آبجکت. نام ویژگی» می‌توانیم به آن دسترسی پیدا کنیم.

دوم: نوع دیگر کار با آبجکتها استفاده از حلقه (for in) در دسترسی به ویژگی‌های آبجکت است که این عمل دسترسی به همه آنها را بصورت یکباره و نه تک به تک می‌سر می‌سازد و کار با آبجکت‌ها را برای ما بسیار ساده می‌کند:

کد: 
for (x in person) {

document.write(person[x]);

}

x متغیری ست که مقادیر داخل آبجکت در هر تکرار حلقه در داخل آن قرار می‌گیرند.

کد: 
x in person نحوه اشاره به مقادیر در هر دور تکرار حلقه است.

person[x]  شیوه دسترسی به ویژگی‌های آبجکت در زمان استفاده از حلقه است.

استفاده از حلقه برای دسترسی به ویژگی‌های آبجکت
برای دسترسی به ویژگی‌های یک آبجکت با استفاده از حلقه به شکل زیر عمل می‌کنیم:

کد: 
<!DOCTYPE html>

<html> <head> </head>

<body>

<script>

person = new Object() ;

person.firstname =" محمد" ;

person.lastname ="  "ققنوس ";

person.age =  30 ;

for (x in person) {

document.write  ( person[x] + "<br />" ) ;

}          

</script>

</body> </html>

در نمونه ذکر شده ابتدا یک آبجکت با نام (person) ساخته شده و بعد مقادیری به ویژگی‌های ساخته شده نسبت داده شده است. سپس توسط حلقه for in داده‌های نسبت داده شده به آبجکت چاپ شده است:

کد: 
for (x in person) {

document.write  ( person[x] + "<br />" ) ;

}

سازنده آبجکت Object Constructor
«سازنده آبجکت» یک تابع است که می‌توان با کمک آن یک آبجکت ساخته و مقادیری را به ویژگی‌ها و متدهای آن اختصاص داد. بعد از ساخت «سازنده آبجکت» تنها با گرفتن نمونه از «سازنده» می‌توان یک آبجکت ساخت. بدین شکل می‌توان نمونه‌های بسیاری از روی سازنده ساخت:

کد: 
function person ( firstname, lastname, age )

{

this.firstname = firstname ;

this.lastname = lastname ;

this.age = age ;

}

با تابع (سازنده آبجکت) ساخته شده در بالا توانایی نمونه سازی‌های متفاوت تنها از روی این سازنده را بهمراه ویژگی‌های داخل آن پیدا می‌کنیم. برای نمونه سازی از روی آن کافیست به شکل زیر عمل کنیم:

کد: 
var person1 = new person ( "محمد" , "ققنوس" , 35 );

var person2 = new person ( "علی" , "اصفهانی" , 34 );

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

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

کد: 
function person (  firstname , lastname ,  age ) {

this.firstname = firstname;

this.lastname = lastname;

this.age = age ;

this.changeName = changeName;

function changeName (name)

{

this. firstname = name ;

}

}

در داخل «آبجکت سازنده» متدی با نام «changeName» تعریف کرده و در داخل آن عملیاتی (تغییر نام) را نوشته‌ایم.

کد: 
function changeName (name)

{

this. firstname = name ;

}

نکته: عبارت this در this. firstname برای اشاره کردن به ویژگی مورد نظر در تابع لازم است. چراکه ما از این تابع برای تغییر نام‌های بسیاری استفاده می‌کنیم و با استفاده از این عبارت به نام خاصی اشاره نمی‌کنیم بلکه هر بار که تغییرات لازم بود تنها با آوردن نام آبجکت مورد نظر عملیات بصورت عمومی و برای همه نام‌ها انجام می‌شود.

حال با فراخواندن نام متد می‌توانیم عملیات مورد نظر را انجام دهیم.

کد: 
person1.changeName("محمد");

person2.changeName("علی");

در کدهای بالا می‌بینید که با آوردن نام آبجکت و نام متد، موفق به تغییر هر دو نام می‌شویم. حال می‌خواهیم با نوشتن کامل کد‌ها ابتدا آبجکتی تعریف کرده و در داخل آن مقادیری را نسبت دهیم و بعد آنها را چاپ کنیم. در ادامه با کمک متد (changeName) نام یکی از آبجکتها را تغییر داده و دوباره خروجی آن را چاپ می‌کنیم تا تغییر ایجادی توسط تابع را مشاهده کنیم:

کد: 
<!DOCTYPE html>

<html> <head> <script>

function person (  firstname , lastname ,  age ) {

this.firstname = firstname ;

this.lastname = lastname ;

this.age = age ;

this.changeName = changeName ;

function changeName (name) {

            this.firstname = name ;

            }           }

</script> </head>

<body>

<script>

var person1 = new person ( "پیمان" , "ایرانی" , 35 );

document.write(  " <br />"  +  person1.firstname  + "<br />" ) ;

person1.changeName("پژمان") ;

document.write(  " <br />"  +  person1.firstname  + "<br />" ) ;

</script>

</body>

</html>

با مروری بر کدهای نوشته شده تغییر انجام شده توسط تابع changeName را مشاهده می‌کنیم.

در درس گذشته پیرامون آبجکت در جاوا اسکریپت صحبت کردیم و چگونگی کاربرد آن را بررسی نمودیم. در این درس می‌خواهیم چگونگی کار با آبجکتی بنام آرایه را بررسی کنیم.

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

آرایه از طریق روش یکم
در این روش ابتدا آرایه را با کمک کلمه کلیدی (new Array) تعریف کرده و بعد مقدار‌ها را بصورت جدا جدا و توسط شمارنده‌های هر خانه آرایه در آن قرار می‌دهیم.

کد: 
var names = new Array() ;

names[0]="محمد";     

names[1]="ققنوس";

names[2]="علی";

آرایه از طریق روش دوم
در این روش مانند روش یکم از عبارت کلیدی (new Array) استفاده می‌شود با این تفاوت که در این روش در‌‌ همان ابتدای کار و در زمان تعریف آرایه مقدار‌ها را در آن قرار می‌دهیم.

کد: 
var names = new Array("محمد" , "ققنوس" , "علی");

آرایه از طریق روش سوم
این روش بدون استفاده از کلمه کلیدی (new Array) عمل می‌کند اما مقدارهای داده شده باید در درون علامت‌های [و ] قرار بگیرند.

کد: 
var names = [ "محمد" , "ققنوس" , "علی" ];

پیش از این، در درس استفاده از break (درس هشتم)، از این روش ساخت آرایه به صورت یک نمونه استفاده کردیم.

ساخت آرایه (طریق روش یکم)
برای ساخت و نسبت دادن داده‌ای به یک آرایه به شکل زیر عمل می‌کنیم:

کد: 
var name = new Array(2) ;

names[0]="محمد";     

:name نامی است که برای آرایه انتخاب می‌کنیم.

:new Array کلمات کلیدی که یک آرایه ایجاد می‌کنند.

نکته: (2) Array، در صورت نوشتن عددی در داخل پرانتز تعداد خانه‌های آرایه مشخص می‌شود. اگر داخل پرانتز چیزی ننویسیم تعداد خانه‌ها را مشخص نکرده و خانه‌های آرایه به محض انتساب کردن مقادیر ساخته می‌شوند. در کد بالا ما یک آرایه با طول ۲ را ایجاد نموده‌ایم.

[0]: شمارنده آرایه عددی است که داخل براکت روبروی نام آرایه در زمان فراخوانی آن قرار می‌گیرد. این عدد از شماره 0 آغاز می‌شود و تعیین کننده خانه مشخصی از خانه‌های آرایه است.

نکته: تعداد خانه‌هایی (متغیرهایی) که هر آرایه می‌تواند ذخیره کند در دست سازنده آن آرایه است اما بهتر آنست که همیشه به میزان نیاز خود آنها را بسازیم تا از استفاده بی‌رویه حافظه جلوگیری کنیم.

روش‌های مقدار دادن به آرایه
برای مقدار دادن به آرایه باید به یکی از سه روش زیر عمل کنیم:

- روش یکم

کد: 
var name = new Array(2) ;

name[0] = "  محمد" ;

name[1] = "  ققنوس" ;

در نمونه بالا ما یک آرایه با تعداد خانه ۲ ایجاد کرده‌ایم اگر دقت کنید متوجه می‌شوید که از دو شمارنده با عدد ۰ (به عنوان یکمین خانه) و عدد ۱ (به عنوان دومین خانه) برای ساخت دو متغیر استفاده شده است.

- روش دوم

کد: 
var name = new Array("محمد" , " ققنوس") ;

در روش دوم بیکباره آرایه تعریف شده و دو مقدار در آن ذخیره گشته است. به این ترتیب دو متغیر با شمارنده‌های ۰ و ۱ بطور خودکار ساخته می‌شوند.

- روش سوم

کد: 
var names = [ "محمد" , "ققنوس" , "علی" ];

در روش سوم هم مانند روش دوم مقدار‌ها بیکباره در آن ریخته می‌شوند با این تفاوت که کلمه‌های کلیدی (new Array) حذف شده و علامت پرانتز جای خود را به علامت براکت می‌دهد.

چاپ کردن آرایه
برای چاپ مقداری مشخص در درون آرایه -با توجه به اینکه هر آرایه دارای مقادیر متفاوتی است- نیاز به دانستن و اشاره به شمارنده آن مقدار داریم. برای صدا زدن و چاپ مقدارهایی با شمارنده مشخص به شکل زیر عمل می‌کنیم:

کد: 
document.write(name[0]) ;

document.write(name[1]) ;

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

برای درک بهتر کاربرد آرایه به کدهای زیر توجه بفرمایید:

کد: 
<!DOCTYPE html>

<html> <body>

<script>

var name = new Array(2) ;

name[0] = prompt("نام خود را وارد کنید");

name[1] = prompt("نام خانوادگی خود را وارد کنید");

document.write("نام شما: " +name[0] + " " + name[1] + "<br>");

</script>

</body>

</html>

در نمونه کدهای بالا ابتدا یک آرایه با دو خانه (متغیر) تعریف شده، سپس از کاربر درخواست شده تا نام و نام خانوادگی خود را وارد کند. بعد مقادیر را در داخل خانه‌های آرایه ذخیره کرده و در آخر با اشاره به شمارنده هر خانه آنها را چاپ نموده‌ایم.

آرایه و for in
از حلقه for in در درس آبجکتها استفاده کردیم، حال می‌خواهیم این فن را در مورد آرایه‌ها هم بکار بریم. اجازه بدهید با یک نمونه شرح این مفهوم را شروع کنیم:

کد: 
<!DOCTYPE html>

<html>

<body>

<script>

var name = new Array(2) ;

name[0] = prompt("نام خود را وارد کنید");

name[1] = prompt("نام خانوادگی خود را وارد کنید");

i =0

document.write(  "نام شما" + "  :") ;

for (x in name)

{

document.write(  name[i] + " ") ;

i++ ;

}

</script>

</body>

</html>

در نمونه نوشته شده ابتدا آرایه‌ای با دو خانه ساخته شده و مقادیر نوشته شده توسط کاربر در آن قرار داده شده است. همانطور که پیداست برای چاپ مقادیر درون آرایه از حلقه بهره برده شده است. پیش از استفاده از حلقه، متغیری با نام i تعریف شده است که برای تغییر شمارنده به منظور دسترسی به همه خانه‌های آرایه، بکار برده شده است.

نکته: فراموش نکنید که برای دسترسی به مقادیر داخل آرایه نیاز به اشاره کردن به شمارنده هر مقدار داریم. در نمونه بالا به دلیل استفاده از حلقه این شمارنده را متغیری قرار داده‌ایم که با هر بار تکرار حلقه یک عدد به آن (i++) اضافه می‌شود.

نکته: به دلیل اینکه آرایه خود یک آبجکت است شما می‌توانید هر نوع داده‌ای را در آن قرار دهید. بطور نمونه می‌توانید یک آبجکت دیگر را درون آرایه قرار دهید و یا یک آرایه درون آرایه دیگر بگذارید.

نکته: آرایه هم مانند دیگر آبجکتها دارای ویژگی‌ها و متدهایی می‌باشد:

کد: 
var x = name.length  ;     

متد length برای نشان دادن طول آرایه

var y = name.indexOf("محمد") ;

ویژگی indexOf برای نشان دادن شمارنده مقدار یاد شده است.

تبدیل رشته به آرایه
برای تبدیل یک مقدار رشته‌ای به یک آرایه از متد «split» استفاده می‌کنیم:

کد: 
txt = "a,b,c,d,e"  

txt.split(",");   //بین کاراکترها تبدیل توسط ویرگول

txt = "a  b  c   d  e"  

txt.split(" ");   // تبدیل توسط فضای خالی بین کاراکترها

txt = "a|b|c|d|e"  

txt.split("|");   // تبدیل توسط دو خط عمودی

متد «split» از جمله متدهای آبجکت «رشته» است که با توجه به علامتی که کاراکتر‌ها یا جملات یک رشته را از هم تفکیک می‌دهد عمل می‌کند.

نمونه پایین شیوه کار با این متد را بهمراه سه علامتی که در بالا آمده نشان می‌دهد:

کد: 
<!DOCTYPE html>

<html> <body>

<script>

txt1 = "a,b,c,d,e"  

var text1 = txt1.split(",");   //بین کاراکترها تبدیل توسط ویرگول

var i = 0 ;

for (x in text1) {

document.write(text1[i]) ;

i++ ;

}

document.write("<br />") ;

txt2 = "a  b  c   d  e"  

var text2 = txt2.split(" ");   // تبدیل توسط فضای خالی بین کاراکترها

var j = 0 ;

for (x in text2) {

document.write(text2[j]) ;

j++ ;

}

document.write("<br />") ;

txt3 = "a|b|c|d|e"  

var text3 = txt3.split("|");   // تبدیل توسط دو خط عمودی

var k = 0 ;

for (x in text3) {

document.write(text3[k]) ;

k++ ;

}

document.write("<br />") ;

</script> </body> </html>

اگر به خروجی حلقه‌های استفاده شده برای چاپ داده‌ها دقت کنید متوجه می‌شوید که هر سه یک شکل خروجی داشته‌اند اما رشته‌های وارد شده هر کدام دارای یک نوع علامت (| یا فاصله یا ،) بوده‌اند. متد «split» در هر رشته این علامت‌ها را شناسایی کرده و هر کدام از حروف بین علامت‌ها را در داخل یک خانه آرایه قرار داده است.

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

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

نترسید قرار نیست ما در این درس به حل مسئله‌های ریاضی بپردازیم. ما تنها با چند قابلیت جاوا اسکریپت در قالب متدهای آن برای عملیات‌های ریاضی آشنا می‌شویم.

آبجکت Math
این آبجکت به ما توانایی انجام عملیات‌های ریاضی را می‌دهد. این آبجکت از تعدادی «ثابت‌ها» و «متد‌ها» تشکیل شده است که با استفاده از آنها می‌توانیم عملیات‌های مورد نظر خود را انجام دهیم. برای نمونه به کدهای زیر توجه کنید:

کد: 
var x=Math.PI;خروجی این دستور می شود 3.14 //

این یکی از ثابت‌های آبجکت فوق است که خروجی آن مشخص و ثابت (۳.۱۴) است. آبجکت ریاضی دارای هشت ثابت است که از طریق این آبجکت قابل دسترس هستند.

کد: 
var y=Math.sqrt(16);

یکی از متدهای آبجکت ریاضی که جذر عدد داخل پرانتز را بر می‌گرداند.

ثابت‌ها در آبجکت ریاضی
همانطور که در قسمت پیشین گفتیم آبجکت ریاضی دارای هشت ثابت است که از طریق این آبجکت می‌توانیم از آنها بهره ببریم. در زیر این ثابت‌ها آورده شده‌اند.

کد: 
Math.E

Math.PI

Math.SQRT2

Math.SQRT1_2

Math.LN2

Math.LN10

Math.LOG2E

Math.LOG10E

برای دیدن هر کردام از این ثابت‌ها کافیست که آنها را در مرورگر خود چاپ کنید:

کد: 
<!DOCTYPE html>

<html> <body> <script>

document.write(Math.E);

document.write("<br />");

document.write(Math.PI);

document.write("<br />");

document.write(Math.SQRT2);

document.write("<br />");

document.write(Math.SQRT1_2);

document.write("<br />");

document.write(Math.LN2);

document.write("<br />");

document.write(Math.LN10);

document.write("<br />");

document.write(Math.LOG2E) ;

document.write("<br />");

document.write(Math.LOG10E);

document.write("<br />");</script>

</body>

</html>

متدهای ریاضی
آبجکتهای ریاضی علاوه بر ثابت‌ها دارای متدهایی هستند که توسط آنها می‌توان عمل‌هایی را بر روی مقادیر انجام داد. بطور نمونه متد زیر مقدار ورودی متد را گرد می‌کند:

کد: 
Math.round(5.7) ; 

 خروجی این دستور6  می شود//

هر کدام از نمونه‌های زیر عملی را بر روی ورودی متد انجام می‌دهند:

کد: 
Math.random() ;  خروجی  این دستور یک عدد بین 0  و 1 می باشد //

Math.floor(Math.random()*11) ;خروجی این دستورات یک عدد بین 0 و 10 می شود //

Math.max(3,6); // 6  =  عدد بزرگتر را بین دو عدد انتخاب می کند

Math.min(2,8) ;// 2  =  عدد کوچکتر را بین دو عدد انتخاب می کند

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

کد: 
<!DOCTYPE html>

<html> <body>

<script>

var num = 1.48 ;

num = Math.round(num) ;

document.write(num + "<br />") ;

num = Math.round(5.7) ;

document.write(num + "<br />") ;

document.write(Math.random() + "<br />") ;

document.write(Math.floor(Math.random() * 11)+ " <br /> ") ;

document.write(Math.max(3,6) + "<br />") ;

document.write(Math.min(2,8) + "<br />") ;

</script> </body> </html>

آبجکت Date
آبجکت تاریخ (date) برای کار کردن با دو فاکتور تاریخ و زمان در جاوا اسکریپت بکار گرفته می‌شود. این آبجکت توسط «سازنده آبجکت» تاریخ (Date () constructor) ساخته می‌شود. برای آغاز کردن کار با این آبجکت چهار روش وجود دارد.

روش یکم:

کد: 
new Date()

روش دوم:

کد: 
new Date(milliseconds)

روش سوم:

کد: 
new Date(dateString)

روش چهارم:

کد: 
new Date(year, month, day, hours, minutes, seconds, milliseconds)

بیشتر ورودی‌ها (پارامتر‌ها)ی متدهای یاد شده در بالا انتخابی هستند و اگر ورودی ارسال نشود عدد 0 برای آن متد فرستاده می‌شود.

بعد از ساختن یک آبجکت از date (به یکی از روش‌های چهاگانه بالا) تعدادی از متد‌ها برای انجام عملیات بر روی داده‌ها قابل استفاده می‌شوند. اغلب این متد‌ها به شما این اجازه را می‌دهند که بر روی سال، ماه، روز، ساعت و غیره زمان و تاریخ را بر اساس استاندارد محلی یا جهانی تنظیم کرده و یا دریافت کنید. به نمونه‌هایی از این دست توجه فرمایید:

کد: 
var today = new Date() ;

var date1 = new Date("October 13, 2012 11:12:00") ;

var date2 = new Date(2012,5,24) ;

var date3 = new Date(2012,5,24,11,33,0) ;

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

کد: 
<!DOCTYPE html>

<html>

<head>

<SCRIPT LANGUAGE = "javascirpt"> var today= new Date() </SCRIPT>

</head>

<body onload=alert(today)>

<script>

var today = new Date()

var d1 = new Date("October 13, 2012 11:13:00")

var d2 = new Date(2012,5,24)

var d3 = new Date(2012,5,24,11,33,0)

document.write(d1 + "<br />" + d2 + "<br />" + d3 + "<br />") ;

</script>

</body>

</html>

ما براحتی می‌توانیم تاریخ را بر اساس زمان دلخواه خود توسط متدهای موجود تغییر دهیم. برای نمونه ما می‌توانیم یک تاریخ را بر حسب زمان مشخصی تنظیم کنیم:

کد: 
var myDate=new Date();

myDate.setFullYear(2012,1,15);

در این نمونه تاریخ بر اساس پارامتر وارد شده تنظیم می‌شود. ما حتی می‌توانیم یک تاریخ را بر اساس زمانی در آینده تنظیم کنیم:

کد: 
var myDate=new Date();

myDate.setDate(myDate.getDate()+6);

در نمونه بالا تاریخ بر اساس ۶ روز جلو‌تر (آینده) تنظیم شده است. اگر این تغییرات برای روزهای آخر ماه باشد و این تغییرات باعث تغییر ماه شود در این صورت آبجکت تاریخ خود این تغییرات را انجام می‌دهد.

با استفاده از آبجکت تاریخ می‌توانیم دو زمان را با هم مقایسه کنیم:

کد: 
var x = new Date() ;

x.setFullYear(2100,0,14) ;

var today = new Date() ;

if ( x>today )

  {  alert(" امروز پیش از 16th January 2010 است  ") ; }

 else

  { alert("امروز پش از 16th January 2010 است  ") ; }

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

کد: 
<!DOCTYPE html>

<html>  <head> <SCRIPT LANGUAGE = "javascirpt"> var today = new Date() </SCRIPT> </head>

<body onload = alert(today)>

<script>

var x = new Date() ;

x.setFullYear(2013,3,14) ;

var today = new Date() ;

if ( x > today )

  {  alert( "  امروز پیش از 16 th January 2013 است  " ) ;  }

else

  { alert("امروز پس از 16 th January 2013 است  ") ; }

document.write( "امروز " + today) ;

</script> </body>  </html>

صفحه‌ها: 1 2

Ghoghnus

Ghoghnus

Ghoghnus

Ghoghnus

Ghoghnus

Ghoghnus

Ghoghnus

Ghoghnus

Ghoghnus

Ghoghnus

Ghoghnus