آموزش جاوا اسکریپت 1


آموزش جاوا اسکریپت 1

با جاوا اسکریپت می توانید متنی که با html نمایش داده می شود را تغییر دهید.

که در این روش باید به اشیا  شناسه یا id بدهیم تا مشخص کنیم متن کدام شی تغییر کند.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>What Can JavaScript Do?</h1>

<p id=”demo”>JavaScript can change HTML content.</p>

<button type=”button”
onclick=”document.getElementById(‘demo’).innerHTML = ‘Hello JavaScript!'”>
Click Me!</button>

</body>
</html>

در مثال بالا متنی نمایش داده می شود که به تگ <p> آی دی به نام demo داده شده و زمانی که روی دکمه کلیک می شود متتن را تغیید می دهد.

<button type=”button”
onclick=”document.getElementById(‘demo’).innerHTML = ‘Hello JavaScript!'”>
Click Me!</button>

در خط بالا یک دکمه ایجاد می شود و در onclick دکمه با کد document.getElementById گفته می شود سندی با آی دی (‘demo’) را زمانی که دکمه فشار داده شد با کد innerHTML محتوای آی دی demo را تغییر بده.

Click Me! متن روی دکمه است.و ‘Hello JavaScript!'” متنی است که به جای محتوای قبلی آی دی demo قرار می گیرد.

جاوا اسکریپت یکی از 3 زبانی است که همه توسعه دهندگان وب باید یاد بگیرند:

1. HTML برای تعریف محتوای صفحات وب

2. CSS برای مشخص کردن طرح صفحات وب

3. JavaScript برنامه نویسی رفتار صفحات وب

خب با نوشتن تگ scriptشروع می کنیم!

نوشتن جاوا اسکریپت در تگ <script>:

می توانید برای منظم نوشتن کد ها جاوا اسکریپت را در تگ <script> بنویسید و هر جا که می خواهید استفاده کنید.

مزایای نوشتن جاوا اسکریپت در تگ <script>:

وقتی شما اشیا زیادی در صفحه دارید و عملکرد همه آن ها مثل یک دیگر است می توانید از این روش استفاده کنید تا کد زیادی ننویسید.

مثال:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>
</head>

<body>

<h1>JavaScript in Head</h1>

<p id=”demo”>A Paragraph.</p>

<button type=”button” onclick=”myFunction()”>Try it</button>

</body>
</html>

برای نوشتن جاوا اسکریت در تگ <script> باید از دستور function استفاده کنید و یک نام به آن بدهید.و هرجا خواستید این عملکرد اجرا شود کافیست نام function را بنویید.

یعنی در <button type=”button” onclick=”myFunction()”>Try it</button> گفته شده که وقتی روی دکمه کلیک شد function به نام myFunction اجرا شود تا متن موجود در آی دی demo تغییر کند.
شما می توانید تگ <script> را حتی در <body> بنویسید.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript in Body</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>

نوشتن جاوا اسکریپت به صورت یک فایل جداگانه:

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

مثال:

<!DOCTYPE html>
<html>
<body>

<h1>External JavaScript</h1>

<p id=”demo”>A Paragraph.</p>

<button type=”button” onclick=”myFunction()”>Try it</button>

<p><strong>Note:</strong> myFunction is stored in an external file called “myScript.js”.</p>

<script src=”myScript.js”></script>

</body>
</html>

در مثال بالا از فایل myScript.js کد های جاوا اسکریپت را می خواند.
کد های مربوط به فایل myScript.js:

function myFunction() {
document.getElementById(“demo”).innerHTML=”Paragraph changed.”;
}

 

نظر خودتان را ارسال کنید