با عرض سلام و ادب خدمت کاربران سایت پی وی لرن.
در این جلسه و جلسات آتی قصد داریم تا شما را با زبان جاوا اسکریپت (JavaScript) و کاربرد جاوا اسکریپت آشنا کنیم و این زبان را به شما آموزش دهیم.
پس با ما باشید با آموزش جاوا اسکریپت از مقدماتی تا پیشرفته.
جاوا اسکریپت (JavaScript) زبان برنامه نویسی وب است.
یادگیری جاوا اسکریپت آسان است.
جاوا اسکریپت یکی از سه زبانی هست که هر توسعه دهنده وب باید آن را بلد باشد:
جاوا اسکریپت تنها در صفحات وب استفاده نمی شود.
بسیاری از برنامه های دسکتاپ و سرور از جاوا اسکریپت استفاده می کنند. Node.js یکی از بهترین مثال هاست.
برخی از پایگاه های داده مانند MongoDB و CouchDB از جاوا اسکریپت به عنوان زبان برنامه نویسی شان استفاده می کنند.
نکته: زبان Java با زبان JavaScript بسیار تفاوت دارند که نباید این دو را با هم اشتباه گرفت.
یکی از توابع پرکارد جاوا اسکریپت تابع ()getElementByID است.
در مثال زیر ما محتوای یک عنصر ( با id=”demo” ) را به مقدار Hello JavaScript تغییر می دهیم:
1 | document.getElementById("demo").innerHTML = "Hello JavaScript"; |
جاوا اسکریپت هر دو نوع کوتیشن را پشتیبانی می کند. (سینگ ‘ و دابل “)
1 | document.getElementById('demo').innerHTML = 'Hello JavaScript'; |
در مثال زیر ما مقدار ویژگی src یک تگ <img> را تغییر می دهیم:
1 | document.getElementById('myImage').src='pic_bulbon.gif' |
تغییر استایل یک عنصر مانند تغییر محتوای آن در جاوااسکریپت است:
1 2 3 | document.getElementById("demo").style.fontSize = "35px"; or document.getElementById('demo').style.fontSize = '35px'; |
1 2 3 | document.getElementById("demo").style.display = "none"; or document.getElementById('demo').style.display = 'none'; |
1 2 3 | document.getElementById("demo").style.display = "block"; or document.getElementById('demo').style.display = 'block'; |
در HTML، کد های جاوا اسکریپت باید در داخل تگ <script> تعریف شود:
1 2 3 | <script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script> |
کد های جاوا اسکریپت می توانند در هر کجا از سند HTML قرار بگیرند.
شما می توانید هر تعداد اسکریپت را در یک سند HTML قرار دهید.
اسکریپت ها می توانند در قسمت <body> یا در قسمت <head> یک صفحه HTML یا در هر دو قرار داده شوند.
در این مثال، یک تابع جاوا اسکریپت در قسمت <head> یک صفحه HTML قرار می گیرد.
هنگامی که یک دکمه روی آن کلیک می شود، تابع فراخوانی می شود:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!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> یک صفحه HTML قرار می گیرد.
هنگامی که یک دکمه روی آن کلیک می شود، تابع فراخوانی می شود :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!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> |
وارد کردن جاوا اسکریپت از یک منبع خارجی مزایای خودش را دارد:
مثال-کد داخل فایل خارجی myScript.js :
1 2 3 | function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } |
اسکریپت های خارجی عملی هستند زمانی که همان کد در بسیاری از صفحات مختلف وب استفاده می شود.
فایل های جاوا اسکریپت دارای پسوند فایل js. هستند.
برای استفاده از یک اسکریپت خارجی، نام فایل اسکریپت را در مشخصه (src) تگ <script> قرار دهید:
شما می توانید مرجع اسکریپت خارجی را در <head> یا <body> قرار دهید که دوست دارید.
این اسکریپت به همان شیوه ای که در آن تگ <script> واقع شده است، رفتار می کند.
نکته : اسکریپت های خارجی نمی توانند تگ های <script> را داشته باشند.
قرار دادن اسکریپت ها در فایل های خارجی دارای مزایایی است:
برای اضافه کردن چندین فایل اسکریپت به یک صفحه – از چندین تگ اسکریپت استفاده کنید:
1 2 | <script src="myScript1.js"></script> <script src="myScript2.js"></script> |
همچنین فایل های جاوا اسکریپت می توانند از یک url در برنامه جای داده شوند:
1 | <script src="https://www.pvlearn.com/js/myScript1.js"></script> |
مثال زیر یک اسکریپت را در پوشه خاصی از سرور، وارد می کند:
1 | <script src="/js/myScript1.js"></script> |
این مثال به یک اسکریپت در پوشه مشابه صفحه فعلی لینک می شود:
1 | <script src="myScript1.js"></script> |
جلسه معرفی جاوا اسکریپت و کاربرد جاوااسکریپت به پایان رسید.
در جلسه ینده در مورد ساختار دستور زبان جاوا اسکریپت بحث خواهیم کرد. با ما همراه باشید.