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

جاسازی جاوا اسکریپت در فایل HTML

برای قرار دادن کدهای JavaScript در هر جایی از سند HTML انعطاف پذیری وجود دارد. با این حال ، ارجح ترین روش ها برای قرار دادن کدهای جاوا اسکریپت در یک فایل HTML به شرح ذیل هستند:

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

در بخش زیر ، خواهیم دید که چگونه می توانیم کدهای جاوا اسکریپت را در یک فایل 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>

نتیجه ای که از کد فوق حاصل می شود به این صورت است که یک پنجره popup فعال می شود که پیام Hello World را نمایش می دهد.

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

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

<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

جاوا اسکریپت در بخش های <body> و <head>

می توانیم کدهای جاوا اسکریپت را در بخش های <body> و <head> به صورت هم زمان مانند کد زیر قرار دهیم:

<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>

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

که با کلیک کردن بر روی کلید Say Hello ، یک پنجره popup در صفحه مرورگر ظاهر می شود که پیام Hello World را نمایش می دهد.

جاوا اسکریپت در فایل خارجی

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

محدودیتی برای استفاده از کدهای یکسان در چندین فایل HTML وجود ندارد. تک script مکانیزمی را فراهم می کند که به ما این امکان را می دهد که بتوانیم کدهای جاوا اسکریپت را در یک فایل خارجی ذخیره نموده و سپس آن را در داخل فایل های HTML خود اضافه نماییم.

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

<html>

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

برای استفاده از یک منبع فایل خارجی ، نیاز داریم که تمام کدهای منبع جاوا اسکریپت را در یک فایل text ساده با پسوند “.js” بنویسیم و سپس آن فایل را مطابق کد فوق در سند HTML اضافه نماییم.

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

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

پکیج های آموزشی جدید

آموزش ساخت ادیتور Html

فصلِ: 1 , تعداد قسمت ها: 4 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش JAVASCRIPT

این فصل در یک نگاه:

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

با توجه به اینکه آموزش جامع و کاملی در مورد نحوه ایجاد و شخصی سازی یک ادیتور در وب سایت و صفحات وب، وجود نداشت برآن شدیم تا یک سری مجموعه آموزشی کامل و جامع در رابطه با این موضوع تهیه نماییم…

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز