مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش چگونگی استفاده از کدهای جاوااسکریپت در html بپردازیم. جاوااسکریپت ( JavaScript )در حقیقت به خودی خود یک زبان سطح بالا محسوب می شود. که زبان سمت سرور آن با نام Nodjs در حوزه های گسترده ای در طراحی سایت و برنامه های کاربردی قابل نصب و استفاده بر روی کامپیوتر و گوشی موبایل استفاده می شود.
از جاوااسکریپت در html برای دادن رفتارهایی به صفحه وب و ایجاد قابلیت پاسخ دادن به درخواست کاربر، استفاده می شود. صفحه وبی که تنها از html و css تشکیل شده و فاقد کدهای JavaScript است. هیچگونه عکس العملی در برابر درخواست کاربر نشان نمی دهد.
در مطالب آموزشی قبلی در حوزه html ما به آموزش چگونگی کار با تگ های Table , Div ، تگ img ، تعریف رنگ ها در html ، تعریف فرم ها در html ،پرداختیم. در این پست نیز به چگونگی کار با کدهای جاوااسکرپت در html می پردازیم.
JS- کدهای جاوااسکرپت در html
جاوااسکریپت در html
JavaScript صفحات وب را پویا و تعاملی می سازد.
مثال : استفاده از جاوا اسکریپت
| <!DOCTYPE html> <html> <body> <h1>My First JavaScript</h1> <button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time.</button> <p id="demo"></p> </body> </html> |
تگ <script> در html
تگ <script> برای ایجاد یک اسکریپت سمت سرویس گیرنده استفاده می شود. تگ <script> یا خود حاوی کدهای اسکریپتی می باشد، یا به یک فایل اسکریپت خارجی از طریق ویژگی src اشاره می کند.
در جاوااسکریپت برای انتخاب کردن و اعمال رفتار روی هر کدام از عناصر html از دستور
مثال :
| () document.getElementById |
استفاده می شود.
در مثال ساده زیر پس از اجرا ، عبارت “Hello JavaScript!” در عنصر html با یک ID با نام “demo” قرار می گیرد.
مثال : مثالی از جاوا اسکریپت
| <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> |
مثال هایی از جاوا اسکریپت
در JavaScript می توان همانند css به style های عناصر html دسترسی یافته و آنها را تغییر داد.
مثال : مثال-2
| document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow"; |
تگ <noscript>
تگ <noscript> برای ارائه یک محتوای جایگزین برای کاربرانی است که اسکریپت ها را در مرورگر خود غیرفعال کرده اند و یا از مرورگری استفاده می کنند که از اسکریپت های سمت سرور پشتیبانی نمی کند.
مثال:
مثال : تگ <noscript>
| <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> <noscript>Sorry, your browser does not support JavaScript!</noscript> |
تگ های script در html
| تگ | توضیحات |
|---|
| <script> | یک اسکریپت سمت سرویس دهنده را تعریف می کند. |
| <noscript> | یک محتوای جایگزین برای کاربرانی که از اسکریپت های سمت سرویس پشتیبانی نمی کنند، تعریف می کند |
کلام آخر
صفحات وب سایت های معمولا شامل سه بخش html و css و جاوا اسکریپت می باشد، html و css اسکلت و ظاهر عناصر html را می سازند، اما اسکریپت های جاوااسکریپت در HTML صفحات وب را تعاملی می سازد، و امکان تعریف رفتارهای خاص برای عناصر html را فراهم می کند.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
