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

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

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

اگر نمی دونی جاوااسکریپت و جاوا چه ارتباط و چه فرقی با هم دارن حتما این مطلب رو بخون: تفاوت جاوا و جاوااسکریپت

اگر میخوای بدونی جاوااسکریپت از کجا اومده و جچوری به اینجا رسیده حتما این مطلب رو بخون: تاریخچه جاوااسکریپت

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

درکل، جاوااسکریپت روی مرورگر اینترنت (مثلا گوگل کروم یا موزیلا فایرفاکس) اجرا میشه.

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

۱- جاوااسکریپت رو داخل یک فایل با پسوند js بنوبسیم و آدرسش رو توی فایل html خودمون قرار بدیم.

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

۲- جاوااسکریپت رو داخل تگ <script> توی فایل html بنویسیم.

<script>
alert('Salam Bache haa');
</script>

۳- جاوااسکریپت رو به صورت اتریبیوت onClick داخل یکی از المنت های html بنویسیم.

<button type="button" onclick="alert('Salam Bache haa')">به عمو سلام کن</button>

۴- جاوااسکریپت رو توی کنسول مرورگر بنویسیم.

برای این کار یک تب توی مرورگر باز می کنیم (بهتره از گوگل کروم استفاده کنید. باحال تره).

بعد، کلید F12 کیبورد رو فشار میدیم. میتونیم بجای F12 از کلید ترکیبی Ctrl+Shift+i هم استفاده کنیم.

با این کار قسمت Developer Tools مرورگر کروم باز میشه.

google developer tools panel

حالا روی تب Console کلیک کنید تا کنسول جاوااسکریپت براتون باز بشه.

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

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

خروجی کدهای جاوااسکریپت

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

1- خروجی در یک المنت html

جاوااسکریپت میتونه هر کدام از المنت های html را با روش های مختلف (مثلا بوسیله id آنها) انتخاب کنه. بعد از انتخاب المنت مورد نظر، میتونه محتوای این المنتها رو تغییر بده.

مثلا اینجوری:

<!DOCTYPE html>
<html>
<body>

<p id="firstParagraph"></p>

<script>
document.getElementById("firstParagraph").innerHTML = "salam! ";
</script>

</body>
</html>

در کد بالا – که یک صفحه html هست – در سطر پنجم یک تگ پاراگراف <p> داریم که id آن را firstParagraph گذاشتیم.

در سطر 8 یک دستور جاوااسکریپت داخل تگ های باز و بسته <script> نوشتیم. این دستور بوسیله getElementById تگ <p> سطر 5 را انتخاب می کند و توی آن می نویسد: !salam

2- خروجی درجا، در همان جایی از html که تگ <script> هست

در صورتی که جاوااسکریپت را توی فایل html نوشته باشیم، میتونه همونجایی که هست، مستقیماً محتوا تولید کنه. و اون محتوا رو نمایش بده.

این مثالو ببینید:

<!DOCTYPE html>
<html>
<body>

<p> this is a parapraph </p>

<script>
document.write("salam");
</script>

</body>
</html> 

در کد بالا در سطر 8، بوسیله دستور document.write عبارت salam مستقیما توی صفحه نوشته میشه. خروجی که میده دقیقا مثل این می مونه که کد html رو این شکلی نوشته باشیم:

<!DOCTYPE html>
<html>
<body>

<p> this is a parapraph </p>

<span>
   salam
</span>

</body>
</html> 

هشدار!

در صورتی که دستور document.write بعد از لود شدن داکیومنت html فراخوانی بشه، کل محتوای html صفحه رو پاک میکنه!

خیییلی مواظب باشید.

3- خروجی در alert box مرورگر

تومخی ترین و فحش خور ترین روش خروجی گرفتن از جاوااسکریپت!

با این روش، یک دیالوگ باکس روی صفحه مرورگر باز میشه و یک پیغام alert به کاربر نشون میده. کاربر هم به صورت مجازی با خانواده برنامه نویس احوالپرسی می کنه!

اینجوری نوشته میشه:

<!DOCTYPE html>
<html>
<body>

<p> this is a parapraph </p>

<script>
alert("به وبلاگ من خوش آمدی");
</script>

</body>
</html> 

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

javascript alert
نکنید از این کارا. آخر و عاقبت نداره!

دستور alert رو به صورت window.alert هم میتونید بنویسید.

4- خروجی به صورت log در کنسول developer tools مرورگر

از این نوع خروجی برای تست و رفع عیب کدهای جاوااسکریپت استفاده میشه. چون کاربر و بازدیدکننده سایت، خروجی در لاگ کنسول رو نمی بینه. و فقط داخل تب console در developer tools قابل مشاهده است.

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

<!DOCTYPE html>
<html>
<body>

<p> this is a parapraph </p>

<script>
console.log("this is my message");
</script>

</body>
</html> 

و برای مشاهده نتیجه اش باید F12 بزنید تا developer tools باز بشه و به تب console برید.

لاگ جاوااسکریپت

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

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

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

اما خب بعضی از ویرایشگرهای کد، امکانات خوبی بهتون میده و باعث میشه راحت تر و کم-خطا تر کد بنویسید.

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

۱- ویژوال استودیو کد VS Code

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

محیط توسعه جاوااسکریپت

مزایای ویژوال استودیو کد:

  • کاملا رایگانه
  • به طور منظم بروزرسانی میشه
  • امکانات خوبی داره
  • هر جور افزونه ای که فکرشو بکنی براش پیدا میشه

معایب ویژوال استودیو کد:

  • توسط مایکروسافت توسعه داده شده :))
  • گاهی اوقات در شناسایی کدها خنگ است
  • افزونه های متفاوت باعث تداخل در کار یکدیگر میشوند
  • بعضی اوقات به صورت خود به خودی کد را دستکاری می کند

۲- نوت پد پلاس پلاس

نوت پد پلاس پلاس (به انگلیسی: ++Notepad ) یکی از سریعترین و کار راه انداز ترین ویرایشگر های کد برای جاوااسکریپت هستش. نوت پد پلاس پلاس کاملا رایگانه و از اینجا می تونید دانلودش کنید.

ویرایشگر جاوااسکریپت

مزایای نوت پد پلاس پلاس:

  • کاملا رایگانه
  • به طور منظم آپدیت میشه (گرچه من هنوز نفهمیدم در آپدیت هاش چه چیزی اضافه میشه!)
  • کدهای جاوااسکریپت رو خوب بلده
  • سبک و کم حجمه و سریع اجرا می شه

معایب نوت پد پلاس پلاس:

  • ‌ظاهرش قدیمیه
  • امکانات کامل یک محیط توسعه را نداره و در حد ویرایشگر باقی می مونه
  • به صورت پیشفرض از دستورات خلاصه و حالتهای کدنویسی سریع پشتیبانی نمی کنه

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

توی درس های آینده ساختار کدهای جاوااسکریپت رو بهتون آموزش میدم و متغیرهای جاوااسکریپت، فانکشن های جاوااسکریپت و چند تا مثال عملی رو براتون توضیح میدم.

مرسی که هستین!

برچسب ها

حامد عسکریان

برنامه نویس و عاشق تکنولوژی

دیدگاهتان را بنویسید

دکمه بازگشت به بالا
بستن
بستن