جاوا اسکریپت در مرورگرها
حال که تا حدودی با بسیاری از مفاهیم پایه جاوا اسکریپت آشنا شدیم می خواهیم طریقه استفاده و قرار دادن آن ها در صفحه را بررسی کنیم. HTML برای استفاده از جاوا اسکریپت در صفحات مرورگرها تگی به نام <script> را فراهم کرده که در ادامه با آن آشنا خواهیم شد.
عموما از این تگ در داخل تگ head صفحه استفاده می شود و می تواند یک ، دو یا سه صفت را بگیرد. صفت language که نوع زبان استفاده شده را تعیین می کند، صفت اختیاری src که مکان یک فایل خارجی جاوا اسکریپت را مشخص می کند و صفت type که نوع MIME TYPE یک فایل خارجی جاوا اسکریپت را مشخص می کند و باید برابر عبارت text/javascript قرار داده شود. مقدار صفت language معمولا برابر javascript یا یکی از نسخه های آن مثلا javascript 1.3 تعیین می شود. (اگر از صفت javascript چشم پوشی شود ، مرورگرها آخرین نسخه موجود این زبان را در نظر می گیرند.)
فراخوانی جاوا اسکریپت در مرورگر
کدهای جاوا اسکریپت در داخل تگ <script> نوشته می شوند اما در صورتی که همزمان از صفت src نیز استفاده شود در این صورت معمولا مرورگرها کدهای داخل تگ <script> را نادیده می گیرند. به مثال زیر دقت کنید:
<html> <head> <title>Title of Page</title> <script language=”JavaScript”> var i = 0; </script> <script language=”JavaScript” src=”../scripts/external.js”></script> </head> <body> <!-- body goes here --> </body>
در این مثال هر دو نوع تعریف کدهای جاوا اسکریپت در صفحه نشان داده شده است. تگ اسکریپت اول به صورت درون خطی به تعریف کدها پرداخته است و در تگ <script> دوم (به روش کدهای خارجی) به یک فایل خارجی javascript اشاره شده است.
فایل های خارجی javascript
فایل های خارجی جاوا اسکریپت فرمت بسیار ساده ای دارند. آن ها درواقع فایل های متنی ساده حاوی کدهای جاوا اسکریپت هستند. دقت کنید که در فایل های خارجی جاوا اسکریپت از هیچ تگ script ی نباید استفاده شود. به عنوان مثال به تکه کد زیر دفت کنید:
<head>
<title>Title of Page</title>
<script language=”JavaScript”>
function sayHi() {
alert(“Hi”);
}
</script>
</head>
<body>
<!-- body goes here -->
</body>
می توانیم خود تابع ()sayh i را در فایلی خارجی مثلا به نام external.js ذخیره کرده و آن را به صورت زیر در صفحه مورد نظر الحاق کنیم:
<html> <head> <title>Title of Page</title> <script language=”JavaScript” src=”external.js”></script> </head> <body> <!-- body goes here --> </body> </html>
تفاوت های به کارگیری کدها به صورت درون خطی و خارجی
چه موقع ما باید از روش درون خطی و چه موقع باید از روش خارجی برای به کارگیری کدهای جاوا اسکریپت استفاده کنیم؟ هر چند که قانون سفت و سختی برای استفاده از هر یک از روش های فوق وجود ندارد اما به دلایل زیر استفاده از روش درون خطی مناسب به نظر نمی رسد:
امنیت : هر کسی می تواند با باز کردن source صفحه شما، کدها را ببیند و چه بسا به حفره های امنیتی آن پی برده و از آن ها سوءاستفاده کند.
ذخیره شدن در حافظه مرورگرها: یکی از مزیت های استفاده از روش خارجی این است که فایل های خارجی جاوا اسکریپت پس از اولین بارگذاری در حافظه نهان مرورگر ذخیره شده و در دفعات بعد، از حافظه فراخوانی و استفاده خواهند شد.
نگه داری کدها : چنانچه شما بخواهید از یک کد در چندین صفحه وب استفاده کنید مطمئنا استفاده از روش اول موجب افزایش کد نویسی و در نتیجه حجم صفحه خواهد شد اما می توانیم از روش دوم برای چندین فایل استفاده کنیم.
مکان قرار دادن تگ <script> در صفحه
معمولا کدها و توابع تعریفی بوسیله جاوا اسکریپت باید در قسمت head صفحه قرار گیرد تا به موقع بارگذاری شده و برای استفاده در قسمت body صفحه آماده استفاده و فراخوانی باشند. معمولا کدهایی که در آن ها، توابع از قبل تعریف شده صدا زده می شوند در قسمت body قرار می گیرند.
قراردادن تگ <script> در داخل قسمت body موجب اجراشدن کدهای داخل آن به محض بارگذاری قسمتی از صفحه در مرورگر خواهد شد. برای مثال به تکه کد زیر دقت کنید:
<html>
<head>
<title>Title of Page</title>
<script language=”JavaScript”>
function sayHi() {
alert(“Hi”);
}
</script>
</head>
<body>
<script language=”JavaScript”>
sayHi();
</script>
<p>This is the first text the user will see.</p>
</body>
</html>
در کد فوق تابع ()sayHi دقیقا قبل از نمایش هر گونه متنی در صفحه اجرا خواهد شد. به این معنی که پنجره alert قبل از متن This is the first text the user will see اجرا خواهد شد. این روش برای فراخوانی متدهای جاوا اسکریپت اصلا پیشنهاد نمی شود و می بایست به جای آن از کنترلگر های رویداد استفاده کرد. مثلا:
<html>
<head>
<title>Title of Page</title>
<script language=”JavaScript”>
function sayHi() {
alert(“Hi”);
}
</script>
</head>
<body>
<input type=”button” value=”Call Function” onclick=”sayHi()” />
</body>
</html>
در صورت اجرای کد فوق یک خطا رخ خواهد داد زیرا تابع قبل از اینکه تعریف شود فراخوانی شده است. به دلیل بارگذاری کدها از بالا به پایین، تابع ()sayHi تا زمانی که تگ <script> دوم ایجاد نشده است در دسترس نخواهد بود.
مخفی کردن اسکریپت ها از مرورگرهای قدیمی
هنوز کاربران زیادی وجود دارند که از مرورگرهایی استفاده می کنند که با جاوا اسکریپت ناسازگار هستند. از آن مهمتر ، تعدادی از کاربران گزینه پشتیبانی از جاوا اسکریپت را در مرورگر خود غیر فعال کرده اند. از آنجایی که مرورگرهای قدیمی تگ <script> را نمی شناسند و نمی توانند آن را تفسیر نمایند در اکثر موارد به جای تفسیر اسکریپت ، متن آن را در صفحه نمایش می دهند.
برای جلوگیری از این مشکل، می توان اسکریپت ها را در داخل توضیحات HTML قرار داد. با این کار مرورگرهای قدیمی آن را نادیده گرفته و نمایش نخواهند داد. از طرف دیگر مرورگرهای جدید می دانند که دستورات توضیحی که در بین دستورات آغازین و پایانی <script> منظور شده اند تنها برای مخفی کردن اسکریپت از دید مرورگرهای قدیمی تر است و لذا به تفسیر اسکریپت ادامه می دهند.
همان طور که می دانید برای نوشتن یک توضیح در سند HTML کافی است علامت <–را در ابتدا و علامت –!> را در انتهای آن قرار دهید. به مثال زیر دقت کنید:
<script language=”JavaScript”><!-- hide from older browsers
function sayHi() {
alert(“Hi”);
}
//-->
</script>
به دو کاراکتر / که در انتهای دستور فوق آمده دقت کنید. این دو / برای جلوگیری از این که مفسر مرورگرهای سازگاز با جاوا اسکریپت، عبارت <– را به عنوان یک دستور جاوا اسکریپت تفسیر نکند استفاده شده است. عدم استفاده از این دو / موجب ایجاد یک خطا خواهد شد.
روش مخفی کردن اسکریپت ها از مرورگرهای ناسازگار با جاوا اسکریپت را فرا گرفتیم. اما چگونه می توان برای کاربرانی که از این مرورگرها استفاده می کنند نیز مطلب جایگزینی نمایش داد؟ برای این کار باید از تگی به نام <noscript> استفاده کنیم.
مرورگرهای سازگار هر چیزی را که بین دستورات آغازین و پایانی <noscript> قرار داشته باشد ، نادیده می گیرند. از طرف دیگر مرورگرهای قدیمی این دستور را نمی شناسند و بنابراین آنرا نادیده گرفته و به سراغ دستورات بعدی (که توسط این دستور احاطه شده اند) می روند. به مثال زیر توجه کنید:
<html>
<head>
<title>Title of Page</title>
<script language=”JavaScript”>
function sayHi() {
alert(“Hi”);
}
</script>
</head>
<body>
<script language=”JavaScript”>
sayHi();
</script>
<noscript>
<p>Your browser doesn’t support JavaScript. If it did
support JavaScript, you would see this message: Hi!</p>
</noscript>
<p>This is the first text the user will see if JavaScript is
enabled. If
JavaScript is disabled this is the second text the user will see.</p>
</body>
</html>
خطایابی استفاده از جاوا اسکریپت در مرورگرها
زمانی که مرورگرها قادر به اجرای دستور خاصی از کدهای جاوا اسکریپت نباشند، پیغامی مبنی بر رخداد یک خطا را نمایش می دهند. ما برای رفع خطاها به این پیغام ها نیاز داریم اما متاسفانه درك بسیاری از این پیغام ها در مرورگرهای مختلف دشوار است. اغلب برای مشاهده پیغام ها می بایست به console جاوا اسکریپت در مرورگرها مراجعه کنید:
در مرورگر FireFox می توان از مسیر زیر به کنسول جاوا اسکریپت دسترسی داشت :
FireFox Menu Tools> Web Developer > Error Console
این کار با استفاده از میانبر ctrl+shift+j نیز امکان پذیر است.
در مرورگر opera این کار از مسیر زیر
Tools > Advanced > Error Console
یا استفاده از میانبر ctrl+shift+o انجام می شود.
در مرورگر Google Chrome نیز می توان از مسیر
تصویر آچار > Tools > Javascript Console
ctrl+shift+j یا میانبر به این بخش دسترسی داشت.
در مرورگر Internet Explorer برای مشاهده پیغام مربوط به خطاهای رخ داده در صفحه می بایست بر روی آیکن زردرنگ موجود در گوشه پایین سمت چپ مرورگر کلیک کرد تا پنجره ای حاوی متن و شماره خطی از برنامه که خطا در آن رخ داده است باز شود.
دیدگاه ها