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

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

اگر توسعه دهنده فرانت اِند(Front-end web developer) هستید و می خواهید در حوزه تخصصی خود حرفی برای گفتن داشته باشید بایستی در کنار HTML و CSS به دنبال یادگیری و تسلط بر جاوا اسکریپت باشید.

اگر هیچ تجربه ای در این زمینه ندارید پیشنهاد می کنیم ابتدا زبان نشانه گذاری HTML، سپس CSS و پس از آن جاوا اسکریپت را فرا بگیرید.

اگر توسعه دهنده وردپرس(WordPress Developer) هستید، تنها به جی کوئری(jQuery) اکتفا نکنید، هر چند جی کوئری یکی از کتابخانه های معروف و قدیمی جاوا اسکریپت است، اما جزئیات و دانش پایه ای کار با جاوا اسکریپت را از دید شما مخفی می کند، البته این موضوع یک مزیت عالی محسوب می شود، چرا که سرعت توسعه وب(Web Development) را افزایش داده و پیچیدگی های کار را کاهش می دهد.

چرایی یادگیری جاوا اسکریپت کتابخانه jquery

وردپرس در توسعه ویرایشگر جدید و مدرن گوتنبرگ ار کتابخانه جاوا اسکریپتی React.js استفاده کرده است.

مهمتر آنکه جاوا اسکریپت دیگر محدود به صفحات وب نیست، به کمک Node.js می توانید اسکریپت های جاوا اسکریپت را به آسانی در سمت سرور(Server Side) اجرا کنید، مشابه PHP که یک زبان سرور ساید است.

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

جاوا اسکریپت یعنی یک تیر و دو نشان: یک زبان مشترک یاد می گیرید و در توسعه کلاینت(Front-end) و سرور(Back-end) استفاده می کنید.

همچنین فریمورک ها و کتابخانه های جاوا اسکریپت را فراموش نکنید، آنها بخش جدایی ناپذیری از توسعه وب هستند، برخی از معروف ترین آنها عبارتند از:

  • Angular
  • React.js
  • Vue.js
  • jQuery

چرایی یادگیری جاوا اسکریپت کتابخانه reactjs

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

ما در این دوره آموزشی از هیچ کتابخانه یا فریمورکی استفاده نخواهیم کرد و هر آنچه آموزش می دهیم بر مبنای جاوا اسکریپت خالص(Vanilla Javascript یا Pure Javascript) خواهد بود.

برای اینکه با هدف و انگیزه کافی وارد فاز یادگیری شوید به تصویر زیر(یکی از اگهی های سایت jobinja) دقت کنید.

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

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

جاوا اسکریپت(JavaScript یا JS) یک زبان اسکریپت نویسی شی گرا(Object Oriented Scripting Language) است که برای ایجاد صفحات وب تعاملی(Interactive) طراحی شده است.

کارهایی مثل ایجاد انیمیشن های پیچیده، پیاده سازی بازی های ساده تحت مرورگر، ایجاد منوهای پویا و نقشه های تعاملی، پخش کننده ویدیو(Video Player)، نمایش تاریح و زمان، اعتبارسنجی فرم های HTML، نمایش پاپ آپ(Pop-up)، مدیریت درخواست های Ajax، کار با حافظه محلی مرورگر(Local Storage) و … از جمله مواردی است که به راحتی در جاوا اسکریپت قابل انجام است.

همانظور که در ابتدای آموزش گفتیم زبان جاوا اسکریپت دیگر محدود به صفحات وب نیست و در سمت سرور هم قابل استفاده است، پس می توانیم جاوا اسکریپت را در هر دو دسته زبان های اسکریپت نویسی سمت کاربر(Client-side scripting language) و سمت سرور(Server-side scripting languages) دسته بندی کنیم.

اما Client Side بودن جاوا اسکریپت به چه معناست؟

  1. یعنی اسکریپت های Javascript در مرورگر وب پردازش می شوند نه در وب سرور(Web Server)، به عبارت دیگر این کدها پس از لود صفحه وب اجرا می شوند.
  2. بر خلاف زبان ها اسکریپت نویسی سمت سرور مثل PHP که فقط در وب سرور اجرا می شوند و نتیجه نهایی را به مرورگر باز می گردانند، جاوا اسکریپت می تواند با HTML ترکیب شده و در مرورگر اجرا شود.
  3. جاوا اسکریپت یک زبان بی خطر و ایمن(Safe) است، چرا که نمی تواند به حافظه، CPU و توابع سیستم عامل دسترسی داشته باشد و فقط در محدوده مرورگر اجرا می شود.

چگونه جاوا اسکریپت را به صفحات وب اضافه کنیم؟

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

با این حال چگونه می توانیم جاوا اسکریپت را وارد بازی کنیم؟ برای این منظور کافی است اسکریپت های JS را از طریق تگ <script> به صفحات وب اضافه کنید، بدین ترتیب مرورگر وب می تواند آنها را از کدهای دیگر متمایز کرده و اجرا نماید.

<script type="text/javascript"></script>

 

البته روش بالا قدیمی است، در حال حاضر جاوا اسکریپت تنها زبان اسکریپت نویسی سمت کلاینت است و سالهاست که رقیب نه چندان قدرتمند او یعنی VB Script از رده خارج شده است، به همین دلیل طبق مستندات HTML 5 ویژگی type = text/javascript غیر ضروری است و می توانید از آن صرف نظر نمائید، چون مرورگرها به طور پیش فرض می دانند شما در حال استفاده از زبان جاوا اسکریپت هستید.

پس بهتر است به صورت زیر عمل کنید.

<script></script>

 

چگونه از تگ <script> استفاده کنیم؟

کدهای Javascript را به دو صورت می توانید به تگ <script> اضافه کنید:

۱- آنها را بین تگ باز و بسته <script> قرار دهید، به این روش اصطلاحا Inline JavaScript می گویند.

<script>
    // JavaScript Code
</script>

 

۲- آنها را در یک فایل خارجی با پسوند js. ذخیره کرده و مسیر آن را در ویژگی src تگ <script> مشخص کنید(روش بهینه و پیشنهادی)، به این شیوه External JavaScript گفته می شود.

توجه داشته باشید که در فایل js نباید از تگ <script> استفاده کنید.

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

همچنین این امکان وجود دارد که آدرس کامل URL را جایگزین مسیر نسبی(Relative) نمائید.

<script src="https://modiredev.com/js/scripts.js"></script>

 

پیشنهاد می کنیم در پروژه های خود از روش External JavaScript استفاده کنید، چرا که مزایای زیر را به همراه خواهد داشت:

  • جداسازی و تفکیک اسکریپت ها از کدهای HTML و CSS
  • قراردادن کدهای جاوا اسکریپت در چندین فایل JS برای مدیریت بهتر پروژه
  • مدیریت و نگهداری راحتر کدها
  • امکان کش شدن فایل های JS در مرورگر و افزایش سرعت لود صفحات وب

تگ <script> را در کجای صفحه قرار دهیم؟

شما می توانید از تگ <script> در داخل تگ های <head> و <body> صفحات وب به هر تعداد که نیاز دارید استفاده کنید.

۱- افزودن کدها به صورت Inline در بخش <head>

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head section -->

    <!-- Add inline javascript -->
    <script>
               document.write('Hello World');
        </script>
    
</head>
<body>
    <!-- Body section -->

</body>
</html>

 

۲- افزودن کدها به صورت Inline در بخش <body>

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head section -->

</head>
<body>
    <!-- Body section -->
     
    <!-- Add inline javascript-->
    <script>
             document.write( 'Hello World' );
        </script>

</body>
</html>

۳- فراخوانی کدها به صورت External در بخش <head>

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head section -->
    
    <!-- Add external javascript -->
    <script src="js/scripts.js"></script>
    
</head>
<body>
    <!-- Body section -->

</body>
</html>

 

۴- فراخوانی کدها به صورت External در بخش <body> (روش پیشنهادی).

چرا بهتر است تگ <script> را به انتهای صفحه وب و قبل از تگ <body/> اضافه کنیم؟

برای پاسخ به این سوال باید بدانید که مرورگر وب کد صفحات وب را از بالا به پایین(Top To Bottom) و خط به خط اجرا می کند، فرض کنید چند فایل جاوا اسکریپت که از قضا بعضی از آنها حجیم هستند را به بخش head صفحه اضافه کردید.

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

به همین خاطر توصیه می کنیم فایل های JS را در انتهای صفحه قرار دهید، این کار سرعت لود صفحات را افزایش می دهد، چرا که بازدیدکنندگان ساختار و استراکچر اولیه صفحه را زودتر و قبل از بارگذاری فایل های JS مشاهده خواهند کرد.

البته برخی موارد استثنا هم وجود دارد، مثلا اسکریپت HTML5 shiv باید در ابتدا و قبل از نمایش یک صفحه وب بارگذاری شود.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head section -->
    
</head>
<body>
    <!-- Body section -->
    
    <!-- Add external javascript -->
    <script src="js/scripts.js"></script>

</body>
</html>

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

قبل از اینکه وارد گود شوید و کدنویسی JS را شروع کنید لازم است به تعدادی ابزار مجهز شوید.

در ابتدا به یک ویرایشگر کد(Code Editor) نیاز دارید تا بتوانید در یک محیط مناسب کدهای JavaScript را بنویسید، در لیست زیر برخی از ویرایشگرهای پرکاربرد را مشاهده می کنید:

  • Visual Studio Code یا VS Code – رایگان
  • Atom – رایگان
  • Brackets – رایگان
  • WebStorm – غیر رایگان، البته برای دانشجویان(نیاز به ایمیل دانشجویی) و استارتاپ ها رایگان است.
  • Sublime Text – رایگان
  • ++Notepad – رایگان

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

  • Google Chrome
  • Firefox
  • Microsoft Edge
  • Opera
  • Safari

البته برای یادگیری و اهداف آموزشی می توانید از ویرایشگرهای آنلاین استفاده کنید، با گوگل کردن عبارت online javascript editor موارد زیادی خواهید دید، اما پیشنهاد می کنیم از ادیتور Code Pen استفاده کنید.

یادگیری جاوا اسکریپت با ابزار code pen

یک سلام گرم به جاوا اسکریپت

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

فایل main.js داخل دایرکتوری js قرار دارد.

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

 

کدهای زیر را در فایل index.html قرار دهید، فایل main.js به صورت External در انتهای صفحه قرار گرفته است.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Test</title>
</head>
<body>
    <h1></h1>

    <!-- External JavaScript -->
    <script src="js/main.js"></script>
</body>
</html>

 

اسکریپت زیر را به فایل main.js اضافه کنید، همانطور که ملاحظه می کنید از تگ <script> خبری نیست. کد فوق متن Hello JavaScript را با رنگ سبز به تگ h1 اضافه می کند.

const myH1 = document.querySelector( 'h1' );
myH1.style.color = '#008000';
myH1.textContent = 'Hello JavaScript';

 

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

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

خلاصه

  • از تگ <script> برای افزودن کدهای جاوا اسکریپت به صفحات وب استفاده می شود.
  • ویژگی های type و language تگ <script> دیگر ضروری نیستند.
  • هیچ محدودیتی در تعداد تگ های <script> یک صفحه وب وجود ندارد.
  • بهتر است کدهای Javascript را در یک فایل جداگانه با پسوند js. قرار دهید، به این روش External Javascript می گویند.
  • برای افزودن فایل های Javascript به صورت <script src=”path/script.js”></script> عمل کنید.
  • کدهای جاوا اسکرپیت را در انتهای صفحه و قبل از تگ بسته <body/> قرار دهید.
برچسب ها
سعید یاورنیا 117 نوشته 117 دیدگاه

توسعه دهنده وب، کارشناس ارشد نرم افزار.

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

نشانی ایمیل شما منتشر نخواهد شد، بخش‌های موردنیاز با * مشخص شده‌اند.