مقدمه
با عرض سلام خدمت کاربران محترم سایت پی وی لرن. همانطور که می دانیم اسکریپت های جاوا اسکریپت برای اعمال رفتارهای خاصی به عناصر html صفحه وب نوشته می شوند، پس باید آنها را در قالب کد html قرار داده و یا فایل js را به نحوی به صفحه html مربوطه متصل کرد. برای این منظور روش های مختلفی وجود دارد که ما در ادامه ی این بخش شما را با نحوه استفاده از جاوا اسکریپت در html آشنا خواهیم کرد.
نحوه استفاده از جاوا اسکریپت
در ادامه ی این آموزش ما را با نحوه استفاده از جاوا اسکریپت در html و روش های آن آشنا خواهیم کرد.
تگ <script>
در کد HTML اسکریپت های جاوا اسکریپت باید داخل تگ های <script> و </script> قرار بگیرند.
مثال : تگ script
| <script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script> |
مثال های قدیمی جاوا اسکریپت ممکن است از ویژگی نوع استفاده کنند: <“script type = “text / javascript>.
خصیصه نوع مورد نیاز نیست. جاوا اسکریپت زبان برنامه نویسی پیش فرض در HTML است.
رویدادها و توابع جاوا اسکریپت
یک تابع جاوا اسکریپت یک کد بسته از جاوا اسکریپت است که می تواند با فراخوانی اجرا شود.
برای مثال یک تابع می تواند در هنگام رخ دادن یک رویداد خاص فراخوانی شود. (برای مثال هنگام کلیک کردن button).
جاوا اسکریپت در تگ های <body>یا <head>
شما می توانید هر تعداد اسکریپت در کد HTML قرار بدهید.
اسکریپت ها را می توان در تگ های <body> یا <head> در کد HTML قرار داد.
جاوا اسکریپت در تگ <head>
در مثال زیر یک تابع جاوا اسکریپت داخل تگ <head> نوشته شده است :
این تابع در زمان کلیک کردن button فراخوانی می شود.
مثال : تگ head
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </head> <body> <h1>A Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> </body> </html> |
جاوا اسکریپت در <body>
در مثال زیر تابع جاو اسکریپت در بخش <body> در یک صفحه ی HTML قرار می گیرد.
این تابع در زمان کلیک کردن یک button فراخوانی می شود :
مثال : تگ body
| <!DOCTYPE html> <html> <body> <h1>A Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </body> </html> |
قرار دادن اسکریپت در پایین عنصر <body> سرعت نمایش را بهبود می بخشد، زیرا تدوین اسکریپت صفحه نمایش را سبک می کند.
جاوا اسکریپت خارجی
اسکریپت ها را می توان در یک فایل خارجی قرار داد.
مثال :
| function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } |
اسکریپت های خارجی زمانی که همان کد در بسیاری از صفحات مختلف وب استفاده می شود، بسیار پرکاربرد هستند.
فایل های جاوا اسکریپت دارای پسوند فایل js. هستند.
برای استفاده از یک اسکریپت خارجی، نام فایل اسکریپت را در مشخصه src تگ <script> قرار دهید:
شما می توانید مرجع اسکریپت خارجی را در <head> یا <body> قرار دهید که دوست دارید.
این اسکریپت به همان شیوه ای که در آن تگ <script> واقع شده است، رفتار می کند.
نکته : فایل های اسکریپت خارجی شامل تگ <script> نیستند.
مزایای جاوا اسکریپت خارجی
قرار دادن اسکریپت ها در فایل های خارجی دارای مزایای زیر است:
- این HTML و کد را جدا می کند.
- این حالت باعث می شود که HTML و جاوا اسکریپت برای خواندن و نگهداری آسان تر باشد.
- فایل های جاوا اسکریپتی ذخیره شده می توانند حجم صفحه را افزایش دهند.
برای اضافه کردن چندین فایل اسکریپت به یک صفحه از چندین تگ اسکریپت استفاده کنید:
مثال :
| <script src="myScript1.js"></script> <script src="myScript2.js"></script> |
مراجع خارجی
اسکریپت های خارجی را می توان با یک URL کامل یا با یک مسیر نسبت به صفحه وب فعلی ارجاع داد.
این مثال از یک URL کامل برای پیوند به یک اسکریپت استفاده می کند:
مثال : منبع خارجی حاوی فایل جاوا اسکریپت
| <script src="https://www.pvlearn.com/js/myScript1.js"></script> |
این مثال از یک اسکریپت در یک پوشه مشخص در وب سایت فعلی استفاده می کند:
این مثال به یک اسکریپت در پوشه مشابه صفحه فعلی لینک می شود:
کلام آخر
اسکریپت های جاوا اسکریپت به عنوان یکی از سه بخش اصلی تشکیل دهنده ی صفحات وب (بخش اول و دوم HTML و CSS) محسوب می شود. بنابراین برای کار با اسکریپت ها باید با نحوه استفاده از جاوا اسکریپت در صفحات وب آشنایی داشته باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
