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

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

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

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

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

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

تصویر زیر رو نگاه کنین

HTML: مثل اسکلت بدن ما میمونه که با استفاده از تگ های معنادار اسکلت صفحات وب ما ساخته میشن

CSS مثل گوشت و پوست میمونن که رنگ و ظاهر ما رو زیبا میکنن؛ دقیقا رنگ و لعاب دادن به المان ها هم به همین صورت هست.

و اما JavaScript مثل ایجاد عضلات برای حرکت هست که دقیقا مثل ایجاد کردن رویدادهایی برای المان ها و حرکت اسلایدی تصاویر و حتی امکان فیلتر کردن المان ها هست.

به مثال زیر توجه کنین.

<p>Player 1: Chris</p>
خروجی=> Player 1:Chris

تو قدم بعدی یکسری استایل با Css بهش میدیم تا جدابتر بشه

p {

  font-family: 'helvetica neue', helvetica, sans-serif;

  letter-spacing: 1px;

  text-transform: uppercase;

  text-align: center;

  border: 2px solid rgba(0,0,200,0.6);

  background: rgba(0,0,200,0.3);

  color: rgba(0,0,200,0.6);

  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);

  border-radius: 10px;

  padding: 3px 10px;

  display: inline-block;

  cursor: pointer;

}

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

const para = document.querySelector('p'); با استفاده از این دستور به المان دسترسی پیدا کردیم 

para.addEventListener('click', updateName);و با این دستور یک رویداد به المان اضافه کردیم در واقع با کلیک روی المان تابعی که در زیر نوشته شده اجرا میشود.

function updateName() {

  let name = ('BUTTON');

  para.textContent = 'Player 1: ' + name;

}

در واقع با کلیک روی المان اسم المان به نام دلخواه ما تغییر میکند.

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

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

• این امکان رو به ما میده تا مقادیر مفیدی رو داخل متغیرها ذخیره کنیم. همانند مثال بالا که ما مقدار رشته‌ای BUTTON رو داخل متغییری به نام name ذخیره کردیم.
• ایجاد عملیات روی تکه ای از متن، توی مثال بالا ما یه بخشی از متن رو "player 1" رو گرفتیم و ترکیبش کردیم با مقدار متغیر name , و برای المان یک برچسب کامل ایجاد کردیم.
• اجرای کد در پاسخ به بعضی از رویدادهایی که اتفاق میافته، تو مثال بالا از رویداد "click" استفاده شده و زمانی که روی المان کلیک اتفاق بیفته متن المان به روزرسانی میشه.
• و ...

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

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

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

آنها به طور کلی به دو دسته تقسیم‌بندی میشن

• Browser APIs
• 3rd party APIs

Browser APIs

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

• DOM(document objects model) API
  این امکان رو به ما میده که HTML و CSS رو دستکاری کنیم مثلا المان یا استایلی رو ایجاد کنیم؛ حذف کنیم و یا HTML رو تغییر بدیم؛ استایل های جدید پویا به صفحه مون اضافه کنیک.هر زمان که ما میبینیم پنجره ای توی صفحه ما ظاهر میشه و یا محتوای جدید نمایش داده میشه از DOM استفاده شده.

<p id=&quot&quotcontent&quot>Expamle</p>

/js/

let content=document.getElementById(&quotcontent&quot)

در این مثال با استفاده از DOM به المان دسترسی پیدا کردیم حالا میتونیم المان رو حذف کنیم، بهش استایل بدیم ، یا بهش رویدادی رو اضافه کنیم.

• Geolocation API
  اطلاعات جغرافیایی رو بازیابی میکنه ، و قادر هست اون محل، و نقطه رو روی نقشه پیدا کنه.
• canvas & WebGl APIs
  این امکان رو فراهم میکنن که ما یکسری گرافیک های متحرک دو بعدی و سه بعدی ایجاد کنیم. مردم با استفاده از این فناوری های وب کارهای خارق‌العاده انجام میدن.

Third party APIs

آن‌ها عموما به طور پیش فرض توی مرورگر تعبیه نشده اند و ما باید آن کدها و اطلاعات رو از جایی در وب دریافت کنیم. برای مثال:

• Twitter APIs
  به ما اجازه میدن که کارهایی شبیه به نمایش دادن آخرین توییت انجام بدیم.
• Google Map API & OpenStreetMap API
  این امکان رو برای ما فراهم میکنن که نقشه های سفارشیمون رو داخل وبسایتمون یا عملکردهای مشابه جاسازی کنیم.

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

بریم به طور خلاصه بگیم که چه اتفاقی می‌افته وقتی صفحه وب ما در یه مرورگر لود میشه، ,وقتی که ما لود میکنیم یک صفحه وب رو در یک مرورگر؛ کدهای ما اجرا میشن داخل یک محیط اجرا؛ اون مثل یک کارخونه هست که توی یک سطر مواد اولیه(کدها ) رو میگیره و محصول رو خارج میکنه(صفحه وب) .

رایج‌ترین استفاده از جاوااسکریپت؛ تغییرات HTML و CSS به صورت پویا هست؛ برای به روز کردن رابط کاربری از طریق DOM( Document Object Model API) هست. باید توجه داشته باشیم که کدها در داکیومنت صفحه وب ما به طور کلی لود شده باشن و به ترتیب نمایش داده شده اجرا بشن؛ اگر جاوااسکرپیت قبل از HTML و CSS ی که قصد تغییرش رو داریم اجرا و بارگذاری بشه ممکنه خطا رخ بده.

چطوری جاوااسکریپت رو به صفحه‌مون اضافه کنیم:
به سه روش می تونیم این کار رو انجام بدیم.

1- Internal

2- External

3- Inline(که خیلی توصیه نمیشه)

• روش Internal

اول از همه یک نمونه فایل html درست میکنیم و در پوشه ای در جایی معقول ذخیر میکنیم. بعد فایل رو در صفحه مرورگر و text Editor باز میکنیم. توی تگ<head></head> تگ رو قرار میدیم و کد مون رو داخلش مینویسیم. به طور مثال:

<head>

document.addEventListener(&quotDOMContentLoaded&quot, function() {

  function createParagraph() {

    let para = document.createElement('p');

    para.textContent = 'You clicked the button!';

    document.body(para);

  }

  const buttons = document.querySelectorAll('button');

  for(let i = 0; i < buttons.length ; i++) {

    buttons[i].addEventListener('click', createParagraph);

  }

});

</head>

و حالا کدمون رو ذخیره میکنیم و صفحه وب رو Refresh میکنیم. خواهیم دید که اگر روی دکمه کلیک کنیم بک پاراگراف جدید ایجاد میشه و زیر هم قرار میگیره.

• External

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

اول از همه باید یک فایل ایجاد کنیم توی یک پوشه و به مثال اسمش رو بذاریم main.js باید دقت کنیم که حتما پسوند فایل باید js. باشه ، بعدش باید به جای کد بالا کد زیر رو بنویسیم

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

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

داخل فایل main.js

function createParagraph() {

  let para = document.createElement('p');

  para.textContent = 'You clicked the button!';

  document.body(para);

}

const buttons = document.querySelectorAll('button');

for(let i = 0; i < buttons.length ; i++) {

  buttons[i].addEventListener('click', createParagraph);

}

اگر ما فایلمون رو ذخیره کنیم و صفحه وب رو رفرش کنیم دقیقا همون چیزها رو خواهیم دید با همان کارکرد.

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

• internal

گاهی اوقات ما برخی کدهای جاواسکریپت رو به صورت inline تو HTML استفاده میکنیم.

function createParagraph() {

  let para = document.createElement('p');

  para.textContent = 'You clicked the button!';

  document.body(para);

}

<button ="createParagraph()">Click me!</button>

این روش هم دقیقا همون عملکرد مثال های قبل رو داره جز اینکه </button><buttom> شامل یک () به صورت inline هست برای کنترل کردن تابع وقتی روی دکمه کلیک میشه.

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

نکته مهم:ما به همه این تفاسیر بهتر هست که تگ script رو داخل تگ body و در انتهای اون قرار بدیم تا المان های سند HTML به طور کامل بارگذاری بشه و بعد جاوااسکریپت اجرا بشه

امیدوارم مطالب مفید بوده باشه

بخش زیادی از این مقاله، ترجمه مقاله‌ای از سایت developer.mozilla.org هست.