راهنمای کامل تبدیل شدن به یک توسعه دهنده وب: قسمت 2

به قسمت 2 “راهنمای کامل تبدیل شدن به یک توسعه دهنده وب” خوش آمدید. در این بخش، یکی از حیاتی ترین مؤلفه های توسعه وب را بررسی می کنیم: جاوا اسکریپت. این زبان برنامه نویسی قدرتمند تعامل را به صفحات وب شما می آورد و ستون فقرات برنامه های وب مدرن را تشکیل می دهد.

در “JavaScript 101: Basics and Modern JS Syntax”، مفاهیم اساسی مانند متغیرها، انواع داده ها و توابع و همچنین ویژگی های مدرن ES6 را بررسی خواهیم کرد.

مبانی دستوری JS

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

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

جاوا اسکریپت یک زبان برنامه نویسی سطح بالا و تفسیر شده است که سنگ بنای وب است. تعاملی را به وب سایت شما اضافه می کند و به شما امکان می دهد برنامه های وب غنی ایجاد کنید. اگر HTML اسکلت یک وب سایت و CSS لباس آن است، جاوا اسکریپت مغز پشت عملیات است که به همه چیز جان می دهد!

شروع کار با جاوا اسکریپت

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

console.log("Hello, World!");

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

متغیرها

متغیرها در جاوا اسکریپت محفظه هایی برای داده ها هستند. آنها می توانند اعداد، متن (رشته ها) و حتی ساختارهای داده پیچیده مانند اشیا و آرایه ها را نگه دارند. در اینجا نحوه ایجاد یک متغیر آمده است:

let greeting = "Hello, World!";

اینجا، greeting متغیری است که رشته “Hello, World!” را نگه می دارد. شما می توانید استفاده کنید var بجای let برای اعلام یک متغیر، اما let در جاوا اسکریپت مدرن ترجیح داده می شود زیرا دارای محدوده بلاک است.

در جاوا اسکریپت، متغیری را با یکی از سه کلمه کلیدی اعلام می کنید: var، let، یا const. این سه کلمه کلیدی دامنه متفاوتی را مدیریت می کنند و قوانین متفاوتی برای استفاده دارند.

بود

var قدیمی ترین روش برای اعلام متغیرها است. تابع-scoped است، به این معنی که یک متغیر در داخل یک تابع با var فقط در آن تابع موجود است. با این حال، var محدوده بلوک ندارد. این بدان معناست که اگر یک متغیر در داخل یک بلوک، مانند an، اعلان شود if بیانیه یا الف for حلقه، در واقع خارج از آن بلوک در دسترس است.

در اینجا یک مثال است:

function sayHello() {
  var greeting = "Hello, World!";
  console.log(greeting);  // outputs: Hello, World!
}

sayHello();
console.log(greeting);  // ReferenceError: greeting is not defined

اینجا، greeting فقط در داخل موجود است sayHello تابع.

if (true) {
  var name = "Alice";
}

console.log(name);  // outputs: Alice

بااینکه name در داخل اعلام شده است if مسدود کردن، در خارج از بلوک در دسترس است زیرا var محدوده بلوک ندارد.

اجازه دهید

let یک روش جدیدتر برای اعلام متغیرها است که در ES6 (همچنین به عنوان ES2015 شناخته می شود) معرفی شده است. بر خلاف var، let بلوک اسکوپ است. این به معنی یک متغیر اعلام شده با است let فقط در بلوکی که در آن اعلام شده در دسترس است.

if (true) {
  let name = "Alice";
}

console.log(name);  // ReferenceError: name is not defined

اینجا، name خارج از دسترس نیست if مسدود کردن به دلیل let دارای محدوده بلوک

ثابت ها

اگر مقداری دارید که در طول برنامه شما تغییر نمی کند، می توانید آن را به عنوان یک ثابت اعلام کنید:

const pi = 3.14159;

پایان

const روش دیگری برای اعلام متغیرها است که در ES6 نیز معرفی شده است. const مانند بلوک اسکوپ است let، اما یک قانون اضافی دارد: شما نمی توانید a را دوباره اختصاص دهید const متغیر. هنگامی که یک مقدار را به a اختصاص می دهید const متغیر، شما نمی توانید آن مقدار را تغییر دهید.

const pi = 3.14159;
pi = 3.14;  // TypeError: Assignment to constant variable.

در این مثال، secondsInMinute و minutesInHour ثابت هستند. چون استفاده کرده ایم const برای این متغیرها، می توانیم مطمئن باشیم که مقادیر آنها هرگز در جای دیگری از کد تغییر نخواهد کرد.

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

const person = {
  name: "Alice",
  age: 25
};

person.age = 26;  // This is fine
person = { name: "Bob", age: 30 };  // TypeError: Assignment to constant variable.

در این مثال، تغییر در age دارایی از person شیء مجاز است، هر چند person هست یک const. با این حال، تلاش برای اختصاص یک شی جدید به person منجر به خطا می شود.

شما می گویید “من یک شناسه ثابت دارم person که به یک شی در حافظه اشاره می کند.” این چیزی است که نمی توانید تغییر دهید: person همیشه به آن شی خاص اشاره خواهد کرد. شما نمی توانید بسازید person به یک شی متفاوت یا نوع دیگری از داده اشاره کنید.

ولی const خود شی واقعی را تغییرناپذیر نمی کند. شی person اشاره می کند هنوز کاملاً قابل تغییر است: می توانید ویژگی های آن را تغییر دهید، ویژگی های جدید اضافه کنید، ویژگی ها را حذف کنید و غیره.

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

const secondsInMinute = 60;
const minutesInHour = 60;
const secondsInHour = secondsInMinute * minutesInHour;

انواع داده ها و ساختارها

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

در جاوا اسکریپت، ما در درجه اول با چند نوع داده کلیدی سروکار داریم: Number، String، Boolean، Object، Null، و Undefined.

عدد

را Number نوع برای هر نوع عددی اعم از عدد صحیح یا ممیز شناور استفاده می شود.

let integer = 10;
let floatingPoint = 3.14159;

رشته

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

let singleQuoted = 'Hello, World!';
let doubleQuoted = "Hello, World!";
let backticks = `Hello, World!`;

بولی

آ Boolean می تواند یکی از دو مقدار باشد: true یا false. معمولاً برای شرایط و مقایسه استفاده می شود.

let isHappy = true;
let isSad = false;

پوچ و تعریف نشده

Null و Undefined دو نوع متمایز در جاوا اسکریپت هستند که هر کدام یک مقدار دارند. Null یک مقدار انتساب است که به معنای بدون مقدار یا بدون شی است. عمدا هیچی نیست Undefined یعنی متغیری اعلام شده است اما هنوز مقداری به آن اختصاص داده نشده است.

let nothing = null;
let somethingUndefined;
console.log(somethingUndefined); // Outputs: undefined

ساختارهای داده: اشیا و آرایه ها

جاوا اسکریپت ساختارهای داده پیچیده ای مانند Objects و Arrays.

اشیاء

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

let person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // Outputs: Hello, my name is Alice

همانطور که در بالا نشان داده شده است، می توانید به ویژگی های یک شی با استفاده از نماد نقطه، همانطور که در بالا نشان داده شده است، یا علامت گذاری براکت (person['name']).

تخریب اشیاء

تخریب یک روش راحت برای استخراج مقادیر متعدد از داده های ذخیره شده در اشیا و آرایه ها است.

let person = {
  name: "Alice",
  age: 25
};

let { name, age } = person;

console.log(name); // Outputs: Alice
console.log(age); // Outputs: 25

آرایه ها

از آرایه ها برای ذخیره چندین مقدار در یک متغیر استفاده می شود. شما می توانید به عناصر یک آرایه با استفاده از نمایه آنها (از 0 شروع می شود) دسترسی پیدا کنید.

let colors = ['red', 'green', 'blue'];

console.log(colors[0]); // Outputs: red

دستکاری یک آرایه

چندین روش داخلی برای دستکاری آرایه ها وجود دارد، مانند push (اضافه کردن عنصر به انتها)، pop (عنصر را از انتها حذف کنید)، shift (حذف عنصر از ابتدا)، unshift (اضافه کردن عنصر به آغاز)، و بیشتر.

let colors = ['red', 'green', 'blue'];
colors.push('yellow');

console.log(colors); // Outputs: ['red', 'green', 'blue', 'yellow']

پارامترهای Spread Operator و Rest

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

let colors1 = ['red', 'green', 'blue'];
let colors2 = [...colors1, 'yellow'];

console.log(colors2); // Outputs: ['red', 'green', 'blue', 'yellow']

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

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b);
}

console.log(sum(1, 2, 3, 4, 5)); // Outputs: 15

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

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

کارکرد

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

function greet() {
  console.log("Hello, World!");
}

greet();  // Outputs: Hello, World!

پارامترهای تابع و آرگومان ها

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

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("Alice");  // Outputs: Hello, Alice!

ارزش های بازگشتی

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

function add(a, b) {
  return a + b;
}

let sum = add(1, 2);
console.log(sum);  // Outputs: 3

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

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

اعلامیه های عملکرد

اعلان های توابع تابع استاندارد در جاوا اسکریپت هستند. آنها با اعلام شده است function کلمه کلیدی و به دنبال آن نام تابع.

function greet() {
  console.log("Hello, World!");
}

عبارات تابع

عبارات تابع توابعی هستند که به یک متغیر اختصاص داده می شوند. آنها می توانند نام یا ناشناس باشند.

let greet = function() {
  console.log("Hello, World!");
}

توابع پیکان

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

let greet = () => {
  console.log("Hello, World!");
}

روش های شی

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

let person = {
  name: "Alice",
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet();  // Outputs: Hello, my name is Alice

اینجا greet روش استفاده می کند this کلمه کلیدی برای ارجاع به person هدف – شی. در این مورد، this اجازه می دهد greet روش دسترسی به سایر خصوصیات person هدف – شی.

کلمه کلیدی “این”.

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

در یک روش، this به شی مالک اشاره دارد:

let person = {
  name: "Alice",
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet();  // Outputs: Hello, my name is Alice

در یک تابع معمولی (نه یک تابع متد یا پیکان)، this به شی جهانی اشاره دارد (window در یک مرورگر، global در Node.js):

function greet() {
  console.log(this);  // Outputs: the global object
}

greet();

در یک کنترل کننده رویداد، this به عنصری اشاره دارد که رویداد را دریافت کرده است:

button.addEventListener('click', function() {
  console.log(this);  // Outputs: the element that was clicked
});

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

PS توابع و this کلمه کلیدی مراحل مهمی در سفر جاوا اسکریپت شما هستند.

ECMAScript

ما در مورد Let و Const، توابع پیکان، الفاظ قالب، پارامترهای استراحت و عملگر Spread بحث کردیم. لطفاً برای دریافت اطلاعات بیشتر به موضوعات بالا بروید یا اگر جزئیات بیشتری می‌خواهید بهتر است این مقاله (ECMAScript ES6+: راهنمای جامع برای جاوا اسکریپت مدرن) را مطالعه کنید.

در همین حال، اجازه دهید به وعده‌ها و Async/Await بعدی بپردازیم.

Promises and Async/Await

وعده‌ها و همگام‌سازی/انتظار، برخورد با کد ناهمزمان را قابل مدیریت‌تر می‌کند. Promise یک شی است که نشان دهنده تکمیل یا شکست نهایی یک عملیات ناهمزمان است. سینتکس async/wait راه خواناتر و تمیزتر را برای کار با وعده ها ارائه می دهد.

async function fetchUser() {
  try {
    let response = await fetch('https://api.github.com/users/octocat');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchUser();

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

PS هنگامی که آماده خواندن اطلاعات بیشتر در مورد Promises و Async / Await هستید و اطلاعات بیشتری با جزئیات عالی دریافت می کنید، می توانید به این مقاله بروید: جاوا اسکریپت ناهمزمان را درک کنید: Callbacks، Promises و Async/Await

نتیجه:

ما به پایان «جاوا اسکریپت 101: اصول و نحو مدرن JS» رسیده‌ایم، که نقطه عطفی در سفر ما به سمت تسلط بر توسعه وب است. در این بخش، ما به طور کامل جنبه های اساسی جاوا اسکریپت را بررسی کرده ایم و خود را با نحو مدرن JS آشنا کرده ایم. ما اکنون درک خوبی از متغیرها، انواع داده ها، توابع و ویژگی های ES6 داریم که همگی ابزارهای ضروری در جعبه ابزار توسعه دهندگان هستند.

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

در مرحله بعد، ما می خواهیم به صفحات وب استاتیک حیات بخشیده و شکاف بین front-end و back-end را پر کنیم. در مقاله‌های آینده‌مان، «تعامل با DOM» و «جاوا اسکریپت ناهمزمان، AJAX، JSON، و API: راهنمای عملی»، نحوه تعامل جاوا اسکریپت با مدل شی سند (DOM) صفحه وب را بررسی خواهیم کرد و صفحه را پویا می‌کند. و تعاملی

ما همچنین به جاوا اسکریپت ناهمزمان می پردازیم، جایی که یاد می گیریم با عملیاتی که بدون مسدود کردن بقیه کدمان تکمیل می شوند، به زمان نیاز داشته باشیم. ما AJAX (جاوا اسکریپت ناهمزمان و XML) را بررسی می‌کنیم، نحوه کار با داده‌های JSON و نحوه عملکرد APIها را می‌آموزیم.

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