با استفاده از زبان جاوا اسکریپت در صفحات HTML می توانید منطق را به صفحات وب سایت خود اضافه کنید، زبان های HTML و CSS زبان های نشانه گذاری بوده و توانایی کافی برای انجام محاسبات منطقی را ندارند و صرفا مناسب ساخت صفحه های استاتیک و ثابت می باشند که امروزه این سایت ها نیازمند داینامیک شدن و تعامل داشتن با کاربران می باشند. به همین منظور ما با استفاده از زبان برنامه نویسی جاوا اسکریپت صفحات HTML خود را داینامیک تر و پویاتر می کنیم.
مثال:
در این صفحه، هنگامی که روی دکمه کلیک می شود، یک کد جاوا اسکریپت اجرا می شود که وظیفه آن دریافت عنصر با شناسه demo و تغییر متن درون آن است. این کد، متن درون عنصر را مساوی با تاریخ امروز قرار می دهد.
برای اضافه کردن جاوا اسکریپت به صفحات HTML نیازی نیست تا کار زیادی انجام دهید، تنها به تگ مخصوص کدهای جاوا اسکریپت یعنی < script > نیاز دارید.
تگ < script > در HTML
تگ < script > در HTML به منظور تعریف کردن یک (client-side script (JavaScript می باشد. عنصر < script > یا شامل دستورهای اسکریپت بوده و یا از طریق ویژگی src به یک فایل اسکریپت خارجی اشاره دارد. استفاده های متداول از جاوا اسکریپت شامل ویرایش تصویر، اعتبار سنجی فرم و تغییرات داینامیک محتوای صفحه HTML است.
برای انتخاب کردن یک عنصر HTML، در جاوا اسکریپت باید اغلب از متد ()document.getElementById استفاده شود.
در این مثال، جاوا اسکریپت، عنصر با "id=demo" را دریافت کرده و متن "!Hello JavaScript" را داخل یک عنصر HTML می نویسد:
همانطور که مشاهده می کنید، هنگامی که صفحه html در مرورگر اجرا می شود، کدهای درون تگ script اجرا شده و نتیجه به شکل زیر خواهد بود:
مزایای جاوا اسکریپت
در اینجا چند مثال از قابلیت های جالب جاوا اسکریپت را با هم بررسی می کنیم:
در این مثال، پس از کلیک روی دکمه، تابع ()myFunction اجرا می شود. وظیفه این تابع این است که با استفاده از javascript عنصری را که آیدی demo دارد دریافت کرده و متن درون آن را به "hello javascript" تغییر دهد. در زیر نتیجه این کد را مشاهده می کنید:
مثال دوم:
در این مثال، با کلیک بر روی دکمه، تابع ()myFunction در جاوا اسکریپت اجرا می شود. وظیفه این کد جاوا اسکریپت این است که عنصر با آیدی demo دریافت شود و استایل هایی به آن افزوده شود. مثلا در این کد، fontSize=25px ، color=red و backgroundColor=yellow قرار داده شده است و نتیجه آن را می توانید در کد زیر مشاهده کنید:
مثال سوم:
در این مثال با استفاده از جاوا اسکریپت، عکس موجود در صفحه تغییر می کند. به این صورت که در کد جاوا اسکریپت تابع Light تعریف و در بدنه این تابع گفته شده است که اگر ورودی تابع مساوی با صفر بود، مقدار متغییر pic مساوی با pic_bulboff.git شود. پس از آن عنصر با آیدی myImage دریافت شده و ویژگی src آن مساوی با مقدار pic شود. حال اگر مقدار ورودی به این تابع مساوی با هر عددی جز 0 بود، مقدار pic مساوی با pic_bulbon.git قرار داده شود. حال اگر روی دکمه Light on کلیک شود، تابع با مقدار یک و اگر روی دکمه Light Off کلیک شود تابع با مقدار 0 فراخوانی می شود. نتیجه این کد را می توانید در زیر مشاهده کنید:
تگ < noscript > در HTML
تگ < noscript > در HTML یک محتوای جایگزین را برای نمایش داده شدن به کاربرانی که اسکریپت را در مرورگر خود غیر فعال کردند و یا یک مرورگری دارند که از اسکریپت ها پشتیبانی نمی کند تعریف می کند:
در این حالت اگر کاربری script را در مرورگر خود غیرفعال کرده باشد، به جای اجرا شدن کد جاوا اسکریپت مذکور، مقدار تعریف شده در تگ noscript نمایش داده می شود.
تگ های اسکریپت در HTML
