نوشتن اولین برنامه به زبان جاوا اسکریپت 👋

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

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

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

اولین برنامه با JavaScript 🥇

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

۱- باز کردن فایل hello.html 📂

در پوشه این درس (chapter1) یک فایل با نام hello.html وجو دارد، فایل را با یک ویرایشگر ساده مانند notepad باز کنید

۲- قرار دادن تگ اسکریپت

درست قبل از تگ بسته <head/> عبارت <script> را تایپ کنید.

...
    <script>
</head>
...

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

۳- نوشتن دستورات جاوا اسکریپت

در خط بعدی کد جاوااسکریپت ; alert ('Hello World') را تایپ کنید.

...
    <script>
        alert ('Hello World');
</head>
...

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

تابع ()alert دستوری است که یک پیغام هشدار را نمایش می‌دهد و متن آن همان عبارتی است که شما بین دو پرانتز وارد می‌کنید. در این مثال عبارت Hello World است که در خروجی نمایش داده خواهد شد.

برای جلوگیری از سردرگمی فعلاً از پرداختن به نکات دستوری مانند گیومه،؛ و پرانتزها صرف‌نظر می‌کنیم.

۴- پایان تک اسکریپت ✔️

بعد از خط فوق نیاز است تا به مرورگر پایان دستورات JavaScript را بفهمانیم. برای این کار در انتهای دستورات جاوااسکریپت در خطی جداگانه عبارت <script/> را قرار می‌دهیم مانند کد زیر

...
    <script>
        alert ('Hello World');
    </script>
</head>
...

در پایان فایل را ذخیره کنید تا تغییرات در فایل اجرا شود دقت کنید که کد نهایی باید به صورت زیر باشد و نهایتا برنامه notepad را ببندید

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Hello World</title>
		<script>
  			alert('hello world');
		</script>
	</head>
	<body>
	</body>
</html>

۵- فایل hello.html را با دوبار کلیک بر روی آن در مرورگر بازکنید

با اجرای فایل، در مرورگر پیغام هشداری نمایش داده خواهد شد.

نوشتن اولین برنامه به زبان جاوا اسکریپت : خروجی اجرای تابع

چنانچه پیغام نمایش داده نشد به این معنی است که قسمتی از کد را اشتباه نوشته‌اید. مجددا کد خود را بررسی کنید و یا آن را با فایل complete_hello.html که نسخه کامل شده آن است مقایسه کنید

۶- برای بستن پیغام بر روی دکمه OK کلیک کنید.

با کلیک بر روی دکمه OK پیغام بسته شده و صفحه خالی در مرورگر نمایش داده خواهد شد.در کل این برنامه آن‌قدر پیچیده نبود تا در مورد آن توضیح دهیم اما برای شروع کافی است.

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

خلاصه درس📜

آزمون درس اولین برنامه 🧪

اگر مطالب فوق را به خوبی درک کرده و آماده درس بعدی هستید بهتر از قبل از رفتن به درس بعدی خودتان را با آزمون ساده زیر محک بزنید.

آزمون درس اولین برنامه جاوا اسکریپت در Google form

🧶

درس بعدی : ساختار کد در جاوا اسکریپت

درس قبلی: افزودن جاوا اسکریپت به صفحات