برای این که بتوانیم با کدهای جاوا اسکریپت تغییراتی روی سند HTML ساخته شده ایجاد کنیم، باید کدهای جاوا اسکریپت و HTML به یکدیگر اتصال داشته و برای هم قابل دسترسی باشند. این کار را به دو روش می‌توان انجام داد، که در ادامه هر دو روش را توضیح می‌دهم.


۱. جاوا اسکریپت‌های داخلی

در این حالت کدهای جاوا اسکریپت را درون سند HTML و در انتهای تگ body می‌نویسیم. برای این کار باید از تگ script استفاده کنیم.

به کد زیر دقت کنید:

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

خط ۳ یک کامنت در زبان HTML است، که محل قرار گیری کدهای HTML را نشان می‌دهد.

خط ۵ یک کامنت در زبان جاوا اسکریپت است، که محل قرار گیری کدهای جاوا اسکریپت را نشان می‌دهد.

این روش به دلایلی از جمله طولانی شدن سند HTML و همینطور دشوار بودن پیدا کردن کدهای جاوا اسکریپت، برای سندهای بزرگ توصیه نمی‌شود.


۲. جاوا اسکریپت‌های خارجی

این روش مانند CSSهای خارجی برای سندهای HTML می‌باشد، کدها را در فایلی جداگانه نوشته و لینک آن را به سند HTML می‌دهیم.

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

  1. یک پوشه با نام دلخواه (مثلا JSFolder) ایجاد کنید.
  2. وارد پوشه ساخته شده شوید.
  3. یک فایل HTML با نام دلخواه و پسوند html (مثلا index.html) ایجاد کنید.
  4. یک فایل جاوا اسکریپت با نام دلخواه و پسوند js (مثلا main.js) ایجاد کنید.

حال بیایید محتویات این فایل‌ها را بنویسیم:

  • محتویات فایل index.html
  • محتویات فایل main.js

دقت کنید که خط اول هر دو فایل کامنت می‌باشد.


اتصال به سند HTML

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

مقدار ویژگی src باید نام فایل جاوا اسکریپت باشد. اگر فایل‌های جاوا اسکریپت و HTML در یک فولدر نباشند، شما باید آدرس دقیق فایل جاوا اسکریپت را درون ویژگی src بنویسید.

کد بالا را در دو محل از سند HTML می‌توانید قرار دهید که هیچ تفاوتی با یکدیگر ندارند:

  • در تگ head
  • در انتهای تگ body

〉〉 نمی‌توانید درون یک تگ script هم کد بنویسید و هم از ویژگی src برای افزودن یک فایل جاوا اسکریپت به سند HTML استفاده کنید.

برای مثال کد زیر اشتباه است:

بنابراین تمامی کدهایی که در خط ۲ به بعد قرار بگیرند، نادیده گرفته خواهند شد.

برای اینکه بتوانید دو بیش از یک فایل جاوا اسکریپت را به سند HTML اضافه کنید، باید هر فایل جاوا اسکریپت را در یک تگ script جداگانه بنویسیم.

برای مثال در کد زیر ما ۲ فایل جاوا اسکریپت را بصورت خارجی و یک کد داخلی جاوا اسکریپت را به سند HTML اضافه کرده‌ایم:


نوشتن اولین برنامه

می‌توان گفت در تمامی زبان‌ها، چاپ کردن متن اولین گام است. همان برنامه معروف Hello World.

در زبان جاوا اسکریپت نمایش متن برای کاربر بصورت یک صفحه پاپ‌آپ (pop-up) است که این کار به کمک تابع alert انجام می‌شود:

برای مشاهده خروجی این کد می‌توانید آن را درون فایل روی سیستم خود کپی کرده (همانطور که در مطلب قبل مثال زدم، index.html) و سپس فایل HTML را در مرورگر خود باز کنید و یا با استفاده از این سایت کدها را اجرا کنید.

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


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