آشنایی با جاوااسکریپت و کاربردهای آن

اگر به‌تازگی وارد دنیای طراحی و برنامه‌نویسی وب شده‌اید، احتمالاً نام جاوااسکریپت را زیاد شنیده‌اید. جاوااسکریپت یکی از مهم‌ترین زبان‌های برنامه‌نویسی در دنیای وب است و به ما اجازه می‌دهد صفحات وب را از حالت ثابت خارج کنیم و به آن‌ها تعامل، منطق و رفتار پویا اضافه کنیم.
در HTML ساختار صفحه را ایجاد می‌کنیم، با CSS ظاهر آن را طراحی می‌کنیم و با جاوااسکریپت می‌توانیم رفتار صفحه را کنترل کنیم. برای مثال، می‌توانیم با کلیک کاربر روی یک دکمه، متنی را تغییر دهیم، یک منو را باز کنیم، اطلاعات یک فرم را بررسی کنیم یا بدون بارگذاری مجدد صفحه با یک سرور ارتباط برقرار کنیم.

در این مقاله قرار است جاوااسکریپت را از پایه بشناسیم و یاد بگیریم جاوااسکریپت چیست، چه کاربردی دارد، چگونه اجرا می‌شود و اولین کد جاوااسکریپت خود را چگونه بنویسیم.

جاوااسکریپت چیست؟

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

HTML
  ↓
Page Structure

CSS
  ↓
Page Design

JavaScript
  ↓
Page Behavior

برای مثال فرض کنید یک صفحه وب دارای یک دکمه است.
HTML مشخص می‌کند که دکمه وجود داشته باشد:

<button>Click Me</button>

CSS می‌تواند ظاهر دکمه را تغییر دهد:

button {
    background: blue;
    color: white;
}

اما جاوااسکریپت می‌تواند مشخص کند وقتی کاربر روی دکمه کلیک کرد چه اتفاقی بیفتد.

button.addEventListener("click", function () {
    alert("Hello!");
});

بنابراین می‌توانیم به‌صورت ساده بگوییم:

HTML = ساختار

CSS = ظاهر

JavaScript = رفتار

البته جاوااسکریپت فقط برای دکمه‌ها و صفحات وب استفاده نمی‌شود و امروزه کاربردهای بسیار گسترده‌تری دارد.

چرا یادگیری جاوااسکریپت مهم است؟

جاوااسکریپت یکی از فناوری‌های اصلی توسعه وب است و یادگیری آن برای افرادی که قصد دارند وارد توسعه Front-End شوند، اهمیت زیادی دارد.

با جاوااسکریپت می‌توانیم:

• صفحات تعاملی ایجاد کنیم.

• اطلاعات فرم‌ها را بررسی کنیم.

• عناصر HTML را تغییر دهیم.

• رویدادهای مختلف کاربر را مدیریت کنیم.

• با APIها ارتباط برقرار کنیم.

• اطلاعات را در مرورگر ذخیره کنیم.

• برنامه‌های وب پیچیده ایجاد کنیم.

• برنامه‌های سمت سرور بنویسیم.

• برنامه‌های موبایل و دسکتاپ ایجاد کنیم.

• پروژه‌های بزرگ و مدرن توسعه دهیم.

در ادامه دوره با تمام این موارد به‌صورت مرحله‌به‌مرحله آشنا خواهیم شد.

جاوااسکریپت در کجا استفاده می‌شود؟

یکی از ویژگی‌های مهم جاوااسکریپت این است که کاربرد آن فقط به یک نوع برنامه محدود نیست.

توسعه Front-End

یکی از مهم‌ترین کاربردهای جاوااسکریپت، توسعه Front-End وب‌سایت‌ها و برنامه‌های تحت وب است.

برای مثال می‌توانیم با جاوااسکریپت:

• منوی سایت را باز و بسته کنیم.

• اسلایدر ایجاد کنیم.

• فرم ثبت‌نام را اعتبارسنجی کنیم.

• محتوای صفحه را تغییر دهیم.

• پنجره‌های Modal ایجاد کنیم.

• اطلاعات را از API دریافت کنیم.

• رابط کاربری تعاملی ایجاد کنیم.

توسعه Back-End

جاوااسکریپت فقط در مرورگر اجرا نمی‌شود.

با استفاده از محیط‌هایی مانند Node.js می‌توان از جاوااسکریپت برای توسعه سمت سرور نیز استفاده کرد.

برای مثال می‌توان با جاوااسکریپت و Node.js:

• API ایجاد کرد.

• با پایگاه داده کار کرد.

• سیستم احراز هویت ساخت.

• سرور وب ایجاد کرد.

• برنامه‌های سمت سرور توسعه داد.

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

ساخت برنامه‌های موبایل

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

برای مثال فناوری‌هایی مانند React Native به توسعه‌دهندگان اجازه می‌دهند با استفاده از جاوااسکریپت برنامه‌های موبایل ایجاد کنند.

ساخت برنامه‌های دسکتاپ

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

فناوری‌هایی مانند Electron امکان ساخت برنامه‌های دسکتاپ با استفاده از فناوری‌های وب را فراهم می‌کنند.

بنابراین جاوااسکریپت فقط یک زبان برای تغییر متن یک صفحه وب نیست؛ بلکه می‌تواند در بخش‌های مختلف توسعه نرم‌افزار مورد استفاده قرار بگیرد.

جاوااسکریپت چگونه با مرورگر کار می‌کند؟

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

وقتی یک صفحه وب را در مرورگر باز می‌کنیم، مرورگر فایل‌های HTML، CSS و JavaScript را دریافت و پردازش می‌کند.

به‌صورت ساده می‌توان این فرآیند را این‌گونه تصور کرد:

Web Page
   ↓
Browser
   ↓
HTML + CSS + JavaScript
   ↓
JavaScript Engine
   ↓
Execute JavaScript
   ↓
Update Page

مرورگرهای مختلف دارای موتورهای JavaScript هستند.

برای مثال مرورگر Google Chrome از موتور V8 استفاده می‌کند.

مرورگر Firefox از موتور SpiderMonkey استفاده می‌کند.

مرورگر Safari از موتور JavaScriptCore استفاده می‌کند.

لازم نیست در ابتدای مسیر جزئیات داخلی این موتور‌ها را بدانید. در این مرحله کافی است بدانید که مرورگر دارای بخشی است که کد جاوااسکریپت را دریافت و اجرا می‌کند.

اولین کد جاوااسکریپت

حالا وقت آن رسیده است که اولین کد جاوااسکریپت خود را بنویسیم.

یکی از ساده‌ترین دستورات جاوااسکریپت، استفاده از console.log() است.

console.log("Hello JavaScript!");

این دستور متن زیر را در Console مرورگر نمایش می‌دهد:

Hello JavaScript!

در اینجا:

console.log()

برای نمایش یک مقدار در Console استفاده شده است.

و عبارت:

"Hello JavaScript!"

متنی است که می‌خواهیم نمایش داده شود.

اجرای جاوااسکریپت در مرورگر

برای شروع حتی نیازی به ایجاد یک پروژه پیچیده نداریم.

اگر از مرورگرهایی مانند Chrome استفاده می‌کنید، می‌توانید ابزار Developer Tools را باز کنید.

در Windows معمولاً می‌توانید با فشردن کلید زیر Developer Tools را باز کنید:

F12

یا:

Ctrl + Shift + I

سپس وارد بخش Console شوید.

در Console بنویسید:

console.log("Hello JavaScript!");

و Enter را فشار دهید.

باید نتیجه مشابه زیر را مشاهده کنید:

Hello JavaScript!

تبریک! شما همین حالا اولین دستور جاوااسکریپت خود را اجرا کرده‌اید.

جاوااسکریپت در فایل HTML

روش دیگری که بیشتر در پروژه‌های واقعی استفاده می‌شود، قرار دادن جاوااسکریپت در یک فایل جداگانه است.

ابتدا یک فایل HTML ایجاد کنید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Tutorial</title>
</head>
<body>

    <h1>My First JavaScript Page</h1>

</body>
</html>

حالا یک فایل با نام زیر ایجاد کنید:

script.js

داخل فایل script.js بنویسید:

console.log("Hello from JavaScript!");

سپس فایل JavaScript را به HTML متصل کنید:

<script src="script.js"></script>

بنابراین ساختار پروژه ما می‌تواند به شکل زیر باشد:

project/
│
├── index.html
└── script.js

فایل index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Tutorial</title>
</head>
<body>

    <h1>My First JavaScript Page</h1>

    <script src="script.js"></script>
</body>
</html>

فایل script.js:

console.log("Hello from JavaScript!");

حالا index.html را در مرورگر باز کنید و Console را مشاهده کنید.

باید عبارت زیر نمایش داده شود:

Hello from JavaScript!

قرار دادن جاوااسکریپت داخل HTML

یک روش دیگر نیز وجود دارد که می‌توانیم کد جاوااسکریپت را مستقیماً داخل HTML قرار دهیم.

برای این کار از تگ <script> استفاده می‌کنیم:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>

    <h1>Hello</h1>

    <script>
        console.log("Hello JavaScript!");
    </script>

</body>
</html>

در این روش، کد جاوااسکریپت بین تگ‌های زیر قرار گرفته است:

<script>
    // JavaScript code
</script>

این روش برای مثال‌های کوچک مناسب است، اما در پروژه‌های بزرگ معمولاً بهتر است کد جاوااسکریپت را در فایل جداگانه قرار دهیم.

نمایش پیام با alert

جاوااسکریپت امکانات مختلفی برای تعامل با کاربر دارد.

یکی از ساده‌ترین آن‌ها alert() است.

alert("Hello JavaScript!");

وقتی این دستور اجرا شود، مرورگر یک پنجره پیام نمایش می‌دهد.

برای مثال:

alert("Welcome to JavaScript!");

این روش برای آشنایی اولیه مناسب است، اما در برنامه‌های واقعی معمولاً از روش‌های حرفه‌ای‌تر برای نمایش پیام استفاده می‌کنیم.

جاوااسکریپت و HTML چگونه با یکدیگر ارتباط دارند؟

جاوااسکریپت می‌تواند عناصر موجود در HTML را پیدا کرده و آن‌ها را تغییر دهد.

برای مثال HTML زیر را در نظر بگیرید:

<h1 id="title">Hello</h1>

حالا جاوااسکریپت می‌تواند این عنصر را پیدا کند:

const title = document.getElementById("title");

و متن آن را تغییر دهد:

title.textContent = "Hello JavaScript!";

کد کامل:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>

    <h1 id="title">Hello</h1>

    <script>
        const title = document.getElementById("title");

        title.textContent = "Hello JavaScript!";
    </script>

</body>
</html>

وقتی صفحه را باز کنید، متن:

Hello

به:

Hello JavaScript!

تغییر خواهد کرد.

در این مثال برای اولین بار با مفهوم DOM روبه‌رو شدیم. در مقالات آینده به‌صورت کامل و ساده با DOM آشنا خواهیم شد.

یک مثال عملی ساده

بیایید یک مثال کوچک‌تر و جذاب‌تر ایجاد کنیم.

می‌خواهیم یک دکمه داشته باشیم که با کلیک روی آن، متن صفحه تغییر کند.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Example</title>
</head>
<body>

    <h1 id="message">Hello!</h1>

    <button id="changeButton">Change Text</button>

    <script>
        const button = document.getElementById("changeButton");

        button.addEventListener("click", function () {
            document.getElementById("message").textContent = "Hello JavaScript!";
        });
    </script>
</body>
</html>

در این مثال چند مفهوم جدید وجود دارد که فعلاً لازم نیست همه آن‌ها را کاملاً یاد بگیرید.

مهم‌ترین قسمت برای درک فعلی این است:

button.addEventListener("click", function () {
    document.getElementById("message").textContent = "Hello JavaScript!";
});

این کد می‌گوید:

وقتی کاربر روی دکمه کلیک کرد، متن موردنظر را تغییر بده.

در بخش‌های بعدی این دوره، هر کدام از این مفاهیم را جداگانه و از پایه یاد خواهیم گرفت.

آیا جاوااسکریپت با Java یکی است؟

خیر.

با وجود شباهت در نام، JavaScript و Java دو زبان برنامه‌نویسی متفاوت هستند.

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

Java نیز یک زبان برنامه‌نویسی مستقل است که در حوزه‌های مختلف نرم‌افزار استفاده می‌شود.

بنابراین نباید این دو زبان را یک زبان یا نسخه‌های مختلف یک فناوری در نظر گرفت.

جاوااسکریپت و ECMAScript چیست؟

ممکن است هنگام مطالعه جاوااسکریپت با نام ECMAScript نیز مواجه شوید.

ECMAScript یک استاندارد است که مشخص می‌کند زبان JavaScript چه ویژگی‌ها و رفتارهایی داشته باشد.

JavaScript در طول زمان ویژگی‌های جدیدی دریافت کرده است.

یکی از مهم‌ترین نسخه‌های تاریخی آن ES6 یا ECMAScript 2015 است که قابلیت‌های مهمی مانند let، const، Arrow Function و Class را معرفی کرد.

در ادامه دوره با ویژگی‌های مدرن جاوااسکریپت نیز آشنا خواهیم شد.

جاوااسکریپت در سمت Client و Server

یکی از مفاهیم مهم برای شروع یادگیری جاوااسکریپت، تفاوت Client-Side و Server-Side است.

Client-Side JavaScript

در این حالت کد JavaScript در محیط کاربر، معمولاً مرورگر، اجرا می‌شود.

برای مثال:

User
  ↓
Browser
  ↓
JavaScript
  ↓
Web Page

تغییر محتوای صفحه، مدیریت کلیک‌ها، اعتبارسنجی اولیه فرم و بسیاری از تعاملات رابط کاربری نمونه‌هایی از کاربرد جاوااسکریپت در سمت Client هستند.

Server-Side JavaScript

در سمت Server می‌توان از محیط‌هایی مانند Node.js استفاده کرد.

در این حالت:

Browser
   ↓
Request
   ↓
Server
   ↓
JavaScript / Node.js
   ↓
Response
   ↓
Browser

در ادامه مسیر یادگیری جاوااسکریپت، ابتدا روی مفاهیم اصلی زبان تمرکز می‌کنیم و سپس به ارتباط با API و مفاهیم مرتبط خواهیم رسید.

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

اگر تازه شروع کرده‌اید، چند نکته مهم را به خاطر داشته باشید.

۱. جاوااسکریپت را فقط با مطالعه یاد نگیرید.

حتماً مثال‌ها را خودتان تایپ و اجرا کنید.

۲. از حفظ کردن کدها خودداری کنید.

هدف این است که بفهمید هر دستور چه کاری انجام می‌دهد.

۳. اشتباه کردن طبیعی است.

خطاهای برنامه‌نویسی بخشی از فرآیند یادگیری هستند.

۴. از مثال‌های ساده شروع کنید.

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

۵. تمرین کنید.

حتی یک تمرین پنج‌دقیقه‌ای می‌تواند بیشتر از مطالعه چند صفحه مطلب به یادگیری شما کمک کند.

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

تلاش برای یادگیری همه چیز به‌صورت هم‌زمان

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

ابتدا مفاهیم پایه را به‌خوبی یاد بگیرید و سپس به سراغ مباحث بعدی بروید.

کپی کردن بدون درک کد

کپی کردن یک قطعه کد ممکن است باعث شود برنامه شما موقتاً کار کند، اما اگر دلیل کارکرد آن را ندانید، در پروژه بعدی دچار مشکل خواهید شد.

نادیده گرفتن خطاها

خطاهای جاوااسکریپت اطلاعات مفیدی در اختیار شما قرار می‌دهند.

از همان ابتدای یادگیری به پیام‌های خطا توجه کنید و سعی کنید دلیل آن‌ها را پیدا کنید.

تمرین عملی

حالا نوبت شماست.

یک فایل HTML به نام:

index.html

ایجاد کنید.

داخل آن یک عنوان قرار دهید:

<h1>Welcome</h1>

سپس یک فایل JavaScript به نام:

script.js

ایجاد کنید و آن را به HTML متصل کنید.

در فایل JavaScript ابتدا این کد را بنویسید:

console.log("I am learning JavaScript!");

سپس تلاش کنید با استفاده از alert() پیام زیر را نمایش دهید:

Welcome to JavaScript!

تمرین دوم

یک دکمه به صفحه اضافه کنید:

<button>Click Me</button>

سپس سعی کنید کاری کنید که وقتی کاربر روی دکمه کلیک می‌کند، یک پیام نمایش داده شود.

در این مرحله اگر هنوز نمی‌دانید چگونه این کار را انجام دهید، مشکلی نیست. در مقاله‌های بعدی قدم‌به‌قدم با متغیرها، داده‌ها، توابع و Eventها آشنا خواهیم شد.

جمع‌بندی

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

یاد گرفتیم که:

• جاوااسکریپت برای ایجاد رفتار و تعامل در صفحات وب استفاده می‌شود.

• HTML ساختار صفحه را ایجاد می‌کند.

• CSS ظاهر صفحه را کنترل می‌کند.

• جاوااسکریپت رفتار صفحه را کنترل می‌کند.

• جاوااسکریپت می‌تواند در مرورگر اجرا شود.

• با Node.js می‌توان از جاوااسکریپت در سمت Server نیز استفاده کرد.

• برای اجرای جاوااسکریپت در مرورگر می‌توان از Console استفاده کرد.

• می‌توان جاوااسکریپت را داخل HTML یا در یک فایل جداگانه قرار داد.

• console.log() برای نمایش اطلاعات در Console استفاده می‌شود.

• alert() می‌تواند یک پیام را به کاربر نمایش دهد.

• جاوااسکریپت می‌تواند عناصر HTML را تغییر دهد.