آموزش جاوااسکریپت - بخش اول (معرفی و شروع به کار)

جاوا اسکریپت محبوب ترین زبان برنامه نویسی در جهان است. جاوا اسکریپت زبان برنامه نویسی وب است. یادگیری جاوا اسکریپت نسبتا آسان است.

این آموزش جاوا اسکریپت را از مقدماتی تا پیشرفته به شما آموزش می دهد.

جاوا اسکریپت می تواند محتوای HTML را تغییر دهد

یکی از مهمترین متدها در جاوا اسکریپت()getElementById است . (در ادامه با متد آشنا می شوید)

مثال زیر یک عنصر HTML (با id="demo") را می یابید که محتوای عنصر (innerHTML) را به "Hello JavaScript " تغییر می دهد:

<!DOCTYPE html>
<html>
<body>

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

<p id=&quotdemo&quot>JavaScript can change HTML content.</p>

<button type=&quotbutton&quot ='document.getElementById(&quotdemo&quot) = &quotHello JavaScript!&quot'>Click Me!</button>

</body>
</html>

جاوا اسکریپت هم نقل قول های دوتایی(دابل کوتیشن "" ) و هم تکی (تک کوتیشن '') را می پذیرد:

<!DOCTYPE html> 
<html> 
<body>  

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

<p id=&quotdemo&quot>JavaScript can change HTML content.</p>

<button type=&quotbutton&quot =&quotdocument.getElementById('demo') = 'Hello JavaScript!'&quot>Click Me!</button>

</body>
</html>

تگ

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

<p id=&quotdemo&quot></p>


document.getElementById(&quotdemo&quot) = &quotMy First JavaScript&quot


</body>
</html>

توابع Functions و رویدادهای Events جاوا اسکریپت

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

به عنوان مثال، زمانی که یک رویداد اتفاق می افتد، یک تابع را می توان فراخوانی کرد، مانند زمانی که کاربر روی یک دکمه کلیک می کند.

در بخش های بعدی اطلاعات بیشتری در مورد عملکردها و رویدادها خواهید آموخت.

جاوا اسکریپت در <head> یا <body>

شما می توانید هر تعداد اسکریپت را در یک سند HTML قرار دهید.

اسکریپت ها را می توان در <body> یا در بخش <head> یک صفحه HTML یا در هر دو قرار داد.

جاوا اسکریپت در <head>

در این مثال، یک تابع function جاوا اسکریپت در بخش <head> یک صفحه HTML قرار داده شده است.

با کلیک روی یک دکمه، تابع فراخوانی می شود:

<!DOCTYPE html>
<html>
<head>

function myFunction() {
 document.getElementById(&quotdemo&quot) = &quotParagraph changed.&quot
}

</head>
<body>

<h2>Demo JavaScript in Head</h2>

<p id=&quotdemo&quot>A Paragraph.</p>

<button type=&quotbutton&quot =&quotmyFunction()&quot>Try it</button>

</body>
</html>

جاوا اسکریپت در <body>

در این مثال، یک تابع function جاوا اسکریپت در بخش <body> صفحه HTML قرار داده شده است.

با کلیک روی یک دکمه، تابع فراخوانی می شود:

<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id=&quotdemo&quot>A Paragraph.</p>

<button type=&quotbutton&quot =&quotmyFunction()&quot>Try it</button>


function myFunction() {
 document.getElementById(&quotdemo&quot) = &quotParagraph changed.&quot
}


</body>
</html>

نوشتن جاوا اسکریپت در خارج از سند html

اسکریپت ها را می توان در فایل های خارجی نیز قرار داد:

// External file: myScript.js
function myFunction() {
  document.getElementById(&quotdemo&quot) = &quotParagraph changed.&quot
}

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

فایل های جاوا اسکریپت دارای پسوند فایل .js هستند.

برای استفاده از یک اسکریپت خارجی، نام فایل اسکریپت را در ویژگی src(source) در تگ قرار دهید:

<!DOCTYPE html>
<html>
<body>

<h2>Demo External JavaScript</h2>

<p id=&quotdemo&quot>A Paragraph.</p>

<button type=&quotbutton&quot =&quotmyFunction()&quot>Try it</button>

<p>This example links to &quotmyScript.js&quot.</p>
<p>(myFunction is stored in &quotmyScript.js&quot)</p>

<script src=&quotmyScript.js&quot>< /script >

</body>
</html>

شما می توانید اسکریپت خارجی خود را به دلخواه در <head> یا <body> وارد کنید.

اسکریپت طوری رفتار خواهد کرد که انگار دقیقاً در جایی قرار دارد که تگ script در آن قرار دارد.

اسکریپت های خارجی نمی توانند حاوی برچسب های script باشند.

مزایای نوشتن جاوا اسکریپت خارج از سند html

قرار دادن اسکریپت ها در فایل های خارجی مزایایی دارد:

کد و HTML را از هم جدا می کند
خواندن و نگهداری HTML و JavaScript را آسان‌تر می‌کند
فایل های جاوا اسکریپت ذخیره شده می توانند سرعت بارگذاری صفحه را افزایش دهند

برای افزودن چندین فایل اسکریپت به یک صفحه - از چندین تگ اسکریپت استفاده کنید:

<script src=&quotmyScript1.< /script >
<script src=&quotmyScript2.js&quot>< /script >

رفرنس خارجی

رفرنس خارجیِ یک اسکریپت خارجی را می توان به 3 روش مختلف ارجاع داد:

با یک URL کامل (یک آدرس وب کامل)
با یک مسیر فایل (مانند /js/)
بدون هیچ مسیری

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

<script src=&quothttps://www.w3schools.com/js/myScript.js&quot>< /script >

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

<script src=&quot/js/myScript.js&quot>< /script >

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

<script src=&quotmyScript.js&quot>< /script >