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

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

با استفاده از زبان جاوا اسکریپت در صفحات 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 اجرا شده و نتیجه به شکل زیر خواهد بود:

آموزش HTML


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

در اینجا چند مثال از قابلیت های جالب جاوا اسکریپت را با هم بررسی می کنیم:

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

در این مثال، پس از کلیک روی دکمه، تابع ()myFunction اجرا می شود. وظیفه این تابع این است که با استفاده از javascript عنصری را که آیدی demo دارد دریافت کرده و متن درون آن را به "hello javascript" تغییر دهد. در زیر نتیجه این کد را مشاهده می کنید:

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

مثال دوم:

آموزش HTML

در این مثال، با کلیک بر روی دکمه، تابع ()myFunction در جاوا اسکریپت اجرا می شود. وظیفه این کد جاوا اسکریپت این است که عنصر با آیدی demo دریافت شود و استایل هایی به آن افزوده شود. مثلا در این کد، fontSize=25px ، color=red و backgroundColor=yellow قرار داده شده است و نتیجه آن را می توانید در کد زیر مشاهده کنید:

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

مثال سوم:

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

در این مثال با استفاده از جاوا اسکریپت، عکس موجود در صفحه تغییر می کند. به این صورت که در کد جاوا اسکریپت تابع Light تعریف و در بدنه این تابع گفته شده است که اگر ورودی تابع مساوی با صفر بود، مقدار متغییر pic مساوی با pic_bulboff.git شود. پس از آن عنصر با آیدی myImage دریافت شده و ویژگی src آن مساوی با مقدار pic شود. حال اگر مقدار ورودی به این تابع مساوی با هر عددی جز 0 بود، مقدار pic مساوی با pic_bulbon.git قرار داده شود. حال اگر روی دکمه Light on کلیک شود، تابع با مقدار یک و اگر روی دکمه Light Off کلیک شود تابع با مقدار 0 فراخوانی می شود. نتیجه این کد را می توانید در زیر مشاهده کنید:

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

تگ < noscript > در HTML

تگ < noscript > در HTML یک محتوای جایگزین را برای نمایش داده شدن به کاربرانی که اسکریپت را در مرورگر خود غیر فعال کردند و یا یک مرورگری دارند که از اسکریپت ها پشتیبانی نمی کند تعریف می کند:

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

در این حالت اگر کاربری script را در مرورگر خود غیرفعال کرده باشد، به جای اجرا شدن کد جاوا اسکریپت مذکور، مقدار تعریف شده در تگ noscript نمایش داده می شود.

آموزش HTML

تگ های اسکریپت در HTML

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