مکان قرار گیری کدهای جاوا اسکریپت

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


مکان قرارگیری کدهای JavaScript

شما میتوانید کد های جاوا اسکریپت را در هر جایی از یک سند HTML قرار دهید. با این حال با ترجیح ترین روش ها برای قرار دادن کد های جاوا اسکریپت در یک فایل HTML به شرحی است که در زیر آمده است :

  • کد جاوا اسکریپت در قسمت <head>...</head>
  • کد جاوا اسکریپت در قسمت <body>...</body>
  • کد جاوا اسکریپت در قسمت  <body>...</body> و <head>...</head>
  • نوشتن کد های جاوا اسکریپت در یک فایل جداگانه و سپس قرار دادن ارجاعی از آن در قسمت <head>...</head> 

در بخش زیر خواهیم دید که چگونه میتوان کد های JavaScript را به روش های مختلف در یک فایل HTML گنجاند.


جاوا اسکریپت در قسمت <head>...</head>

اگر میخواهید اسکریپتی داشته باشید که در موقع رخداد بعضی از رویداد ها اجرا شود، مانند وقتی که یک کاربر روی چیزی کلیک میکند، بهتر است آن اسکریپت را به شکلی که در زیر نشان داده شده است در قسمت head قرار دهید :

<html>
   <head>
      <script type="text/javascript">

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

      </script>
   </head>
  
   <body>
      <input type="button" onclick="sayHello()" value="Say Hello" />
   </body>
</html>

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

 emaple

در نمونه مثال بالا کاربر بعد از کلیک کردن روی دکمه ی "say hello" پیغامی را در مرورگر مشاهده خواهد کرد.

در نمونه مثال زیر هم با کلیک کردن روی دکمه tryit ، تابع ()myFunction فراخوانی خواهد شد :

<!DOCTYPE html>
<html>
  <head>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "Paragraph changed.";
      }
    </script>
  </head>

  <body>

    <h1>A Web Page</h1>
    <p id="demo">A Paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>

  </body>
</html>

 در نمونه مثال بالا در ابتدا محتوای پاراگراف با شناسه ی demo مقدار "A Paragraph" است. بعد از کلیک روی دکمه ی Try it مقدار پاراگراف به مقدار ".Paragraph changed" تغییر خواهد کرد.


جاوا اسکریپت در قسمت <body>...</body>

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

<html>

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

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

Hello World
This is web page 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>

کدهای JavaScript در یک فایل خارجی

موقعی که کار با جاوا اسکریپت را به طور گسترده آغاز کردید، به خوبی خواهید فهمید که مواردی پیش خواهد آمد که باید از یک کد جاوا اسکریپت یکسان در چندین صفحه از یک سایت استفاده کرد.شما محدود به این نخواهید بود که یک کد جاوا اسکریپت یکسان را در چندین فایل HTML قرار دهید.

مکانیزمی وجود دارد که به شما اجازه میدهد کد های جاوا اسکریپت را در یک فایل خارجی قرار داده و سپس ارجاعی از این فایل را در صفحات HTML ایی که مخواهند از آن استفاده کنند درج کنید. در اینجا مثالی است که نشان میدهد چطور میتوان ارجاعی از یک فایل خارجی جاوا اسکریپت را در سند HTML قرار دهید. این کار با استفاده از تگ script صفت src آن انجام میشود :

<html>

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

برای استفاده از یک فایل خارجی جاوا اسکریپت ، شما باید تمام کد جاوا اسکریپت خود را در یک فایل متنی با پسوند js. قرار داده و سپس آن را به شکل بالا در سند مورد نظر درج کنید.برای مثال میتوانید محتوای زیر را در یک فایلی با نام filename.js قرار داده و سپس بعد از قرار دادن ارجاعی از این فایل خارجی، از نام sayHello برای فراخوانی این تابع استفاده کنید.
 

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

 

منتشر شده در ۱۳ مهر ۱۳۹۶ حمید رضا ملکی ۵۶۲۸ بازدید
دیدگاه ها
عرفان م چهار شنبه ۳۰ آبان ۱۳۹۷

سلام خسته نباشید راستش من هیچ چیز از جاوااسکریپت نمیدونم تازه هم دوره html , css رو به پایان رسوندم الان میخواستم بگم که اگر یکم بیشتر توضیح میدادید بهتر بود الان من این جلسه رو خوندم اصلا متوجه نشدم function چی هست یا get element byid چیکار میکنه :

حمید رضا ملکی چهار شنبه ۳۰ آبان ۱۳۹۷

سلام. سعی شده تا جای ممکن ساده توضیح داده بشه. این جلسه مخصوص function نیست . فقط اشاره ی کوتاهی به اون شده. بهتره توابع را در جلسات بعدی دنبال کنید

fani شنبه ۲۶ خرداد ۱۳۹۷

با عرض سلام و تشکر بخاطر اموزش هاتون سوالی داشتم در مورد کد های جاوا در فایل خارجی چگونه فایل ها رو بریزم داخل فایل خارجی وچگونه ازشون استفاده کنم توضیحاتتون واسم گنگ بود خواهش میکنم لطف کنید بیشتر و ساده تر و با ذکر مثالی برام توضیح بدین دوست عزیز وباز ازتون تشکر میکنم

حمید رضا ملکی دوشنبه ۲۸ خرداد ۱۳۹۷

فایل خارجی یک فایل متنی ساده است. کافی هست در سیستم عامل یک فایل متنی ایجاد کرده و بعد از قرار دادن کد های جاوا اسکریپت پسوند آن را از txt. به js. تغییر بدید. البته مسلما اگر قرار باشه شما سایتی را طراحی کنید از یک محیط قوی برای این کار استفاده میکنید. مثلا ویژوال استادیو و یا دریم ویور که هرکدام از آنها این امکان را برای شما فراهم می آورند که یک فایل خارجی جاوا اسکریپت ایجاد کنید.

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

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