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

تخفیفات تابستان تاپایان: سه شنبه ۱ فروردین ۱۴۰۲

لیست محتوای این بخش

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

در مورد محل نوشتن کدهای جاوا اسکریپت انعطاف پذیری بالائی وجود دارد و تقریبا شما در هر جایی از سند 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")
}

اتمام

محصولات برگزیده مناسب شما

دوره ی آموزش پروژه محور ساخت دفترچه تلفن با Vue.js و Laravel پکیج آموزشی فریمورک Vuejs 2 دوره ی آموزش جاوااسکریپت-صفرتاصد کارگاه آموزشی کار با Grunt js

ساخته و تولید شده توسط گروه آموزشی آواسام

تمام حقوق محفوظ است