محل نوشتن کدهای جاوا اسکریپت

محل نوشتن کدهای جاوا اسکریپت

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

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

  • درون تگ <head>...</head> 
  • درون تگ <body>...</body>
  • درون هر دو تگ <body>...</body> و <head>...</head> 
  • کدنویسی کردن درون یک فایل جدا و لود کردن در تگ <head>...</head> 

 

در ادامه ، شیوه های اضافه کردن کدهای جاوا اسکریپت به سند html را بصورت مفصل یاد میگیریم 

 

نوشتن کدهای جاوا اسکریپت در بخش <head>...</head>  : 

 

اگر شما بخواهید کدهای جاوا اسکریپت خود را درون تگ head در سند html قرار دهید . قبل از لود شدن تگ body کدهای جاوا اسکریپت شما لود میشود و برای اینکه یک متن ساده را به کاربر نشان دهید باید به شکل زیر کدنویسی کنید : 

<html>
   <head>      
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>     
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>  
</html>

 

در مثال بالا میبینید که تگ script درون تگ head قرار گرفته است و کدهای جاوا اسکریپت به این شکل درون تگ head نوشته میشود . 

 

نوشتن کدهای جاوا اسکریپت در بخش <body>...</body> :

 

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

مثال : 

<html>
   <head>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <p>This is web page body </p>
   </body

 

 

نوشتن کدهای جاوا اسکریپت هم در تگ head و هم تگ body : 

 

شما میتوانید کدهای جاوا اسکریپت را هم درون تگ head که در بخش اول بالا مشاهده کردید بنویسید هم در تگ body که در بخش دوم مشاهده کردید . 

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

مثال : 

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>
</html>

 

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

 

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

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

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

در مثالی که برای شما آورده ایم شما مشاهده میکنید که در تگ head ما یک تگ script تعریف کردیم که خاصیت src دارد و در خاصیت src مسیر قرار گیری فایل جاوا اسکریپت را معرفی میکنیم 

<html>
   <head>
      <script type = "text/javascript" src = "filename.js" ></script>
   </head>
   
   <body>
      .......
   </body>
</html>

 

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

در مثال بالا مشاهده کردید که ما فایلی با نام و فرمت filename.js را فراخوانی کردیم که حاوی کدهای جاوا اسکریپت خواهد بود . 

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

function sayHello() {
   alert("Hello World")
}

 

اتمام