جاوا اسکرپت گسترده ترین زبان اسکرپت نویسی مورد استفاده در اینترنت است.
بسیاری از سایتها از این زبان برای ساختن صفحات پویایی که در کامپیوتر کاربر اجرا می شونداستفاده می کنند.
تقریباً همه مرورگرهای مشهور از این زبان پشتیبانی می کنند و اگرچه امکان غیر فعال کردن آن توسط کاربران وجود دارد اما طبق آمار جاوا اسکرپت در مرورگرهای بیش از 90 درصد کاربران اینترنت فعال است.
در حقیقت HTML را نمی توان یک زبان برنامه نویسی دانست ولی جاوا اسکرپت یک زبان برنامه نویسی با ساختاری ساده است که می تواندعناصر HTML را بخواند، بنویسید و یا آنها را تغییر دهد.
جاوا اسکرپت توانایی واکنش نشان دادن به رویداد ها را در صفحه HTML دارد.
برای مثال می توان کد جاوا اسکرپتی نوشت که در هنگام ارسال یک فرم اجرا شود.
با برندتیک همراه باشید.
طراحی سایت با جاوا اسکرپت
جاوا اسکریپت معروف به زبان اسکریپتی در سمت سرویس گیرنده یا همان کلاینت است، ولی امروزه برای برنامه نویسی در سمت سرور و همچنین برای نوشتن اپلیکیشن های دسکتاپ و موبایل هم به کار می رود.
یعنی شما تنها با یاد گرفتن زبان جاوا اسکریپت قادر به این هستید که برای وب، موبایل و دسکتاپ کد بزنید.
این زبان یک زبان تفسیری (interpreted) و مبتنی بر شئ گرایی (object based) است.
به این دلیل که اولین چیزی که با شنیدن کلمه جاوا اسکریپت به ذهن میرسد، یک زبان برنامه نویسی سمت کلاینت می باشد،
یکی از قابلیتهای زبان جاوا اسکریپت این است که به راحتی می تواند با html ترکیب شود.
می توان کدهای جاوا اسکریپت را درون یک فایل مجزا یا در میان تگهایhtml نوشت.
برای آغاز کار یک فایل html ایجاد می کنیم.
برای اینکار notepad یا هر ویرایشگر متن مورد نظر خود را باز کرده و یک فایل توسط آن ایجاد کرده و آن فایل را با پسوند .html ذخیره کنید.
درون این فایل کدهایhtml زیر را قرار دهید و ذخیره نمایید.
تگ script جاوا اسکریپت
برای نوشتن کدهای جاوا اسکریپت در فایل html از تگ اسکریپت استفاده میکنیم.
<html> |
<head> |
<script type="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 مطابق زیر خواهد شد.
<html> |
<head> |
<script type="text/javascript"> |
alert('hello panda!'); |
</script> |
</head> |
<body> |
</body> |
</html> |
سمی کالن در جاوا اسکریپت
قرار دادن سمی کالن (;) در انتهای دستورات اختیاری است اما به این دلیل که مرورگرهای مختلف و ورژن های مختلف آنها تفسیر و قوانین متفاوتی برای دستورات جاوا اسکریپت دارند، ترجیح می دهیم که از ; در انتهای دستورات استفاده کنیم.
برای نشان دادن یک رشته در جاوا اسکریپت هم می توان از سینگل کوتیشن (‘) و هم از دابل کوتیشن (“) استفاده کرد. پس دو دستور زیر با هم تفاوتی نخواهند داشت:
alert(‘Hello World!’);
alert(“Hello World!”);
برای قرار دادن توضیح (comment) یک خطی و میان خطی در کدهایجاوااسکریپت از \\ استفاده می شود و برای قرار دادن توضیح چند خطی از /**/ استفاده می شود.
//this is comment!
/*this is
comment*/
محتوای فایل html ایجاد شده:
<html> |
<head> |
<script type="text/javascript"> |
alert('hello panda!'); |
|
//کامنت کردن مخصوص یک خطی ها |
|
/* |
کامنت |
کردن |
مخصوص |
چندخطی ها |
*/ |
|
</script> |
</head> |
<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 نمایش داده خواهد شد.
