برای وارد کردن کدهای جاوا اسکریپت نیاز است که به کد های html آشنایی داشته باشیم. به وسیله تگ <script></script>، بین این دو تگ متن برنامه جاوااسکریپت را می نویسیم.

 

 درس چهارم از سری آموزش های جاوا اسکریپت JavaScript )JS) گروه دهکده

 javascript logo

 

کدنویسی در JavScript

برای وارد کردن کدهای جاوااسکریپت باید html بدانیم. به وسیله تگ <script></script>، بین این دو تگ متن برنامه جاوااسکریپت را می نویسیم.

صفات تگ اسکریپت

این تگ چند صفت دارد:

1-     صفت زبان Language

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

2-     صفت Src

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

3-     صفت Type

می تواند باینری، تکست یا... باشد. جهت تعریف نوع کدها (MIME type) به کار می رود. ساده ترین حالت text است که در این حالت می نویسیم:

 به صورت پیش فرض       Type=" Text/javascript "

اجرای کدهای جاوا در html

1-  Inline

توسط تگ اسکریپت در پایین کدهای html برنامه نویسی انجام می شود. عمدتاً در قسمت <head> کدنویسی می کنیم.

2-  External

برنامه ها و کدهای جاوا در فایل متنی با پسوند.js ذخیره می شود و در محیط html با صفت src فراخوانی می شوند.

برنامه نویسی به روش Inline

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

مثال :

<html>
<head>
<title>Title of Page</title>

<script language = “javascript”>
            var test = “Hello!”;
</script>

</head>
</html>

 

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

<html>
<head>
<title>Title of Page</title>

<script language = “javascript”>
            Function test()
{
            Alert(“Hello!”);
}
</script>

</head>

<body>
<script language = “javascript”>
            test();
</script>
<p>……..</p>
</body>
</html>

 

در نمونه بالا وقتی صفحه لود می شود فوراً یک پیام Hello ظاهر می شود و تا وقتی این پیام بسته نشود بقیه صفحه لود نمی شود، بهتر است اجرای تابع اسکریپتی (مثل تابع بالا) منوط به وقوع یک رخداد باشد.

برنامه نویسی به روش External

ابتدا متن برنامه در فایل متنی نوشته شده سپس آن را با نام test.js ذخیره کرده ایم. (یعنی همان قسمتی که در head نوشتیم، فارغ از تگ اسکریپت) سپس به صورت زیر در html آن را فراخوانی می کنیم:

<html>
<head>
<title>Title of Page</title>

<script language = “javascript” src= “test.js”>
            test();
</script>

</head>
</html>

 

 

  
Inline:

<script language = “javascript”>

متن برنامه

</script>

 

External:

<script language = “javascript” src = “نام.js”>

 

مزایای استفاده از روش External:

  1. کپی کردن کد برنامه و استفاده به دفعات متعدد از آن.
  2. امنیت: دسترسی هکرها به سورس برنامه محدود می شود.
  3. مرورگرهای کلاینت فایل .js را در cache سیستم کاربر ذخیره می کنند و در استفاده های مجدد سرعت بارگذاری بیشتر می شود.

 

معایب و اشکالات استفاده از جاوا

اگر مرورگر کد جاوا را نشناسد (یعنی از جاوا اسکریپت پشتیبانی نکند/ مرورگر قدیمی باشد) کد را به طور خام روی صفحه نشان می دهد.

برای غلبه بر این اشکال:

اگر برنامه جاوا را در تگ مربوط به صورت توضیحات در علامت <!--    -- > قرار دهیم مرورگرهای قدیمی وقتی که به علامت کامنت HTML می رسند آن کدها را اجرا نمی کنند اما مرورگرهای جدید که جاوا را پشتیبانی می کنند با دیدن تگ اسکریپت متوجه موضوع شده و آن را اجرا می کنند.

در غیر این صورت در مرورگرهای قدیمی، متن برنامه را در صفحه عیناً مشاهده می کنیم:

مثال:

<script language = “javascript”><!--
function test
{alert(“Hello”);}
//-- >
</script>

 

نکته: علامت <!-- بعد از تگ آغازین اسکریپت باید در همان خط بدون فاصله بیاید، در غیر این صورت خطا رخ می دهد. برای این که علامت --> توسط جاوا به صورت خطا دیده نشود قبل از آن // قرار می دهیم.

برای جایگزینی پیام مناسبی به جای عدم اجرای برنامه جاوا در مرورگرهای قدیمی می توان از تگ <noscript> استفاده کرد. به این شکل:

<noscript>

<p>پیام دلخواه</p>

</script>

در این حالت مرورگرهای قدیمی متن پیام را نمایش داده و مرورگرهای جدید از تگ <noscript> می گذرند.