JavaScript در طراحی وب سایت
دوشنبه 14 مهر 1393 11:11 AM
جاوا اسکریپ پرکاربردترین زبان برنامه نویسی تحت وب می باشد، زبانی که در صفحات Html وب سایت ، کامپیوتر،سرور،لپ تاپ، تبلت،گوشی های هوشمند استفاده می شود.تمامی صفحات مدرن Html از کدهای JavaScript بهره می گیرند. در دنیای طراحی وب سایت زبان Html به منظور تعیین محتوای صفحات وب، CSS برای مشخص نمودن ساختار و چارچوب صفحات سایت و زبان JavaScript برنامه ای برای تغییر رفتار صفحات سایت می باشد که با ایجاد افکت ها و برنامه های جذاب موجب جلب نظر کاربران وب سایت خود شویم و روند رو به جلویی در سئو سایت خود داشته باشیم. زبان JavaScript می تواند خصیصه های Html را تغییر دهد. قطعه کد زیر را در نظر بگیرید.
document.getElementById("demo").innerHTML = "Hello JavaScript";
که برنامه ای با نمایش متن "Hello JavaScript" در صفحه است.
JavaScript همچنین در کدهای CSSدر طراحی سایت را نیز می تواند تغییراتی را ایجاد نماید.
document.getElementById("demo").style.fontSize = "25px";
برای درج کدهای JavaScript می بایست درون تگ <script> </script> قرار گیرد و بر بخش <body> و یا <head> در طراحی وب سایت ما قرار گیرد.
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "My First JavaScript Function";
}
</script>
در قطعه کد زیر اسکریپ جاوا اسکریپ در بخش <head> جاسازی شده است:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" on-click="myFunction()">Try it</button>
</body>
</html>
و یا کد زیر در بخش <body> قرار گرفته شده است:
<!DOCTYPE html>
<html>
<body> <h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" on-click="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
روش دیگری برای استفاده از کدهای جاوا اسکریپ قرار دادن کدها در فایل خارجی می باشد. این روش زمانی پرکاربرد خواهد بود که می بایست از کد فایل در چندین بخش از صفحه استفاده شود. بدین منظور نام فایل اسکریپ را در تگ <script> و با خصیصه src ارجاع می دهید. در کد زیر فایل جاوا اسکریپ خارجی myScript.js استفاده شده است.
<!DOCTYPE html>
<html>
<body>
<script src="/demo/myScript.js"></script>
</body>
</html>
طراحی سایت
