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

1396/7/19 --- 20526

جاوا اسکریپت معروف به زبان اسکریپتی در سمت سرویس گیرنده یا همان کلاینت است، ولی امروزه برای برنامه نویسی در سمت سرور و همچنین برای نوشتن اپلیکیشن های دسکتاپ و موبایل هم به کار می ­رود. یعنی شما تنها با یاد گرفتن یک زبان برنامه نویسی قادر به این هستید که برای وب، موبایل و دسکتاپ کد بزنید. این زبان یک زبان تفسیری (interpreted) و مبتنی بر شئ گرایی (object based) است.

به این دلیل که اولین چیزی که با شنیدن کلمه جاوا اسکریپت به ذهن می­رسد، یک زبان برنامه نویسی سمت کلاینت می باشد، ما هم در اینجا ابتدا با محوریت client side پیش میریم، سپس رفته رفته با مفاهیم دیگر آن از جمله مفاهیم شئ گرایی که می توان از آن هم در سمت کلاینت و هم در سمت سرور استفاده کرد می پردازیم.

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

برای آغاز کار یک فایل html ایجاد می کنیم. برای اینکار notepad یا هر ویرایشگر متن مورد نظر خود را باز کرده و یک فایل توسط آن ایجاد کرده و آن فایل را با پسوند .html ذخیره کنید. درون این فایل کدهایhtml زیر را قرار دهید و ذخیره نمایید.

undefined

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

<!DOCTYPEhtml>
<html>
<head>
<scripttype="text/javascript">
</script>
</head>
<body>
</body>
</html>

به دلیل اینکه زبانهای برنامه نویسیاسکریپتی دیگری نیز در سمت کلاینت وجود دارد و همچنین استفاده های متنوع از تگscript، ترجیحا برای شناساندن نوع و زبان مورد استفاده در این تگscript از صفت خاصه (attribute) type استفاده می نماییم. استفاده از این attribute اختیاری است.

در نظر داشته باشید که جاوا اسکریپتcase sensitive است یعنی به حروف کوچک و بزرگ حساس است. پس متغیر num1 با Num1 متفاوت است. نکته دیگری که باید در نظر داشت قانون نام گذاری در کدهای جاوا اسکریپت است. برای نامگذاری متغیرها و توابع می بایست نام آنها با حروف کوچک آغاز شود و ولی نام کلاسها با حرف بزرگ آغاز می شود مانند کلاس Array.

اولین دستوری که در اینجا با آن آشنا خواهیم شد alert است.

برای چاپ پیام های کوتاه در یک پنجره از متد alert() می توان استفاده کرد. این متد به شئwindow تعلق دارد. شئwindow به پنجره فعلی دلالت دارد. متد alert به صورت زیر به کار می رود:

alert('Hello World!');

کد صفحه html مطابق زیر خواهد شد.

<!DOCTYPEhtml>
<html>
<head>
<scripttype="text/javascript">
alert('Hello World!');
</script>
</head>
<body>
</body>
</html>

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

برای نشان دادن یک رشته در جاوا اسکریپت هم می توان از مونو کوتیشن (') و هم از دابل کوتیشن (") استفاده کرد. پس دو دستور زیر با هم تفاوتی نخواهند داشت:

alert("Hello World!");
alert('Hello World!');

استفاده از این دو علامت سلیقه ای است اما در جایی که ما می خواهیم مثلا یک دابل کوتیشن را در رشته مورد نظر استفاده کنیم می توانیم از مونو کوتیشن برای نمایش رشته استفاده کنیم، یا بالعکس!

alert("Hello 'John'!");
alert('Hello "John"!');

گرچه می توان از بکاسلش () قبل از هر کدام از آنها نیز استفاده کرد!

alert("Hello "John"!");
alert('Hello 'John'!');

برای قرار دادن توضیح (comment) یک خطی و میان خطی در کدهایجاوااسکریپت از \ استفاده می شود و برای قرار دادن توضیح چند خطی از /**/ استفاده می شود.

// This is comment
/* This is
comment!*/

محتوای فایل html ایجاد شده:

<!DOCTYPEhtml>
<html>
<head>
<scripttype="text/javascript">
alert('Hello World!');

/*alert("Hello World!");
alert('Hello World!');*/

/*alert("Hello 'John'!");
alert('Hello "John"!');*/

/*alert("Hello "John"!");
alert('Hello 'John'!');*/

</script>
</head>
<body>
    This is body!
</body>
</html>

حالا صفحه html را در مرورگرباز کنید!

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

قسمت body در صفحه html، قسمت قابل نمایش این صفحه می باشد، من در این قسمت عبارت "This is body!" را قرار دادم تا اولویت اجرا شدن دستورات را در یک صفحه html ببینیم. ملاحظه می کنید که قبل از اینکه عبارت درون body نمایش داده شود، پیام درون alert نمایش داده می شود. مرورگر یک صفحه html را به صورت خط به خط اجرا میکند. پس قبل از اینکه به body برسد با تگscript مواجه شده و کدهای درون آن را به صورت خط به خط اجرا می کند.

ویژگی alert این است که باعث توقف پردازش خطوط بعد از خود، چه در تگscript و چه دیگر تگهایhtml صفحه خواهد شد تا زمانی که با زدن دکمه ok این پیام را ببندید.

تگscript را به همراه کدهای درون آن به قسمت body و بعد از پیام "This is body!" انتقال دهید. خواهید دید که ابتدا پیام "This is body!" در صفحه قرار خواهد گرفت و سپس پیغام درون alert نمایش داده خواهد شد.