آموزش کار با جاوا اسکریپت

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

آموزش کار با جاوا اسکریپت

آشنایی با تگ <script>

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

آموزش طراحی سایت

در نسخه های قبلی جاوا اسکریپت ما از یک Attribute به نام type جهت مشخص کردن زبان اسکریپت صفحه استفاده می کردیم اما الان نیازی به این Attribute نیست:

<"script type="text/javascript>

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

توابع و رویدادهای جاوا اسکریپت

یک function (تابع) جاوا اسکریپت یه مجموعه از دستورات جاوا اسکریپت است که تحت یک نام مشخص می شوند و زمانی که این تابع فراخوانی شود اجرا می گردد. به عنوان مثال یک تابع جاوا اسکریپت می تواند زمانی که یک رویدادی (event) مانند کلیک بر روی یک button اتفاق می افتد صدا زده شود.

محل قرارگیری کدهای جاوا اسکریپت در صفحه HTML

شما می توانید تعداد script های مختلفی را در صفحه HTML قرار دهید.

Script های جاوا اسکریپت می توانند یا درون تگ body قرار بگیرند یا درون تگ head یا درون هر دو تگ.

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

در مثال زیر یک تابع جاوا اسکریپت درون تگ head از صفحه HTML قرار گرفته است. این تابع زمانی که کاربر روی button کلیک کند اجرا می شود.

آموزش جاوااسکریپت

قرارگیری script درون تگ body

در مثال زیر یک تابع جاوا اسکریپت درون تگ body از صفحه HTML قرار گرفته است. این تابع زمانی که کاربر  روی button کلیک کند اجرا می شود.

آموزش جاوا اسکریپت

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

External Javascript

اسکریپت های زبان JavaScript همچنین می توانند در یک فایل بیرونی قرار بگیرند و به عبارتی از کدهای HTML شما مجزا باشند. بنابراین شما می توانید یک فایل جدید با پسوند js. برای نوشتن دستورات جاوا اسکریپت ایجاد نمایید. به عنوان مثال ما تابع زیر را درون فایلی به نام mySCript.js نوشته ایم.

آموزش javascript

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

javascript

در این دستور صفت src (source) اشاره به فایل مقصد دارد که شما قصد پیوند به آن را دارید. به عبارتی با این دستور مشخص می کنیم که از این پس این صفحه باید اسکریپت های خود را از فایل myScript.js بخواند. دقت داشته باشید که پسوند فایل های جاوا اسکریپت js است و این فایل ها نمی توانند دارای تگ script باشند. این دستور می تواند هم درون تگ head و هم درون تگ body در انتهای صفحه قرار گیرد.

مزایای استفاده ار external javascript

  • کدهای HTML شما از کدهای JavaScript شما مجزا هستند و بنابراین خوانایی، توسعه و خطایابی راحت تر صورت می گیرد.
  • با استفاده از این روش شما یک بار توابع و دستورات خود را در فایل js خود نوشته و بارها و بارها می توانید از آن در صفحات مختلف استفاده کنید.
  • سرعت بارگزاری صفحه HTML شما با استفاده از این روش بیشتر است.

اضافه کردن چندین external javascript به صفحه وب

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

یادگیری جاوااسکریپت

اسکریپت های external را می توان با یک URL کامل یا مسیری نسبت به صفحه وب فعلی ارجاع داد.

در این مثال از یک URL (آدرس اینترنتی) برای پیوند به یک فایل JavaScript استفاده می شود که بر روی سایت دیگری در بستر اینترنت قرار دارد:

آموزش طراحی وب سایت

شما همچنین می توانید به یک فایل external javascript که در یک فولدر دیگری از وب سایت قرار دارد ارجاع داشته باشید. برای این کار می توانید از روش زیر استفاده کنید:

آموزش زبان جاوااسکریپت

همانطور که در تکه کد بالا می بینید، فایل myScript.js درون فولدری به نام js قرار دارد.

آموزش طراحی سایت آموزش جاوا اسکریپت دوره آموزش جاوا اسکریپت آموزش javascript دوره آموزش javascript

مقالات این دسته بندی