در دو قسمت قبلی از آموزش زبان برنامه‌نویسی JavaScript، در ابتدا آشنایی مختصری با این زبان پیدا کردید و در مرحله بعد وارد کد‌نویسی با این زبان برنامه‌نویسی محبوب و نحوه استفاده از تگ script شدیم. این مقاله نیز آخرین قسمت منتشر شده از این آموزش خواهد بود؛ پس به شما عزیزان پیشنهاد میکنیم در ابتدا دو قسمت قبلی را مطالعه کرده و بعد به این مقاله بپردازید.
کد‌نویسی JavaScript؛ بخش دوم
در این بخش به مفاهیم باقی‌مانده از مرحله کد‌نویسی میپردازیم.
آشنایی با متد ()document.getElementById
متد ()document.getElementById یکی از پرکاربردترین و مهم‌ترین متدهای JavaScript برای دسترسی به عناصر HTML است. با استفاده از این متد، می‌توانیم یک عنصر خاص را از صفحه HTML بر اساس شناسه یا به عبارتی دیگر همان id، آن را انتخاب کنیم و تغییرات دلخواهی بر روی آن اعمال نماییم. در این مقاله به بررسی کامل این متد، کاربردها و مثال‌های عملی آن خواهیم پرداخت.
ساختار کلی این متد به‌صورت زیر است.
document.getElementById("elementID")
در قطعه کد بالا elementID همان شناسه (id) عنصری است که قصد داریم به آن دسترسی پیدا کنیم.
کاربرد ()getElementById
این متد در جاوااسکریپت برای دسترسی به عناصر HTML و تغییر خصوصیات آنها به کار می‌رود. پس از انتخاب یک عنصر، می‌توانیم به آن دسترسی داشته باشیم و خواص مختلف آن مانند محتوا، استایل، ویژگی‌ها و … را تغییر دهیم.
نکات مهم درباره ()getElementById
شناسه (id) باید منحصربه‌فرد باشد
هر عنصر در HTML که از شناسه استفاده می‌کند باید شناسه‌ای یکتا داشته باشد. اگر چندین عنصر با یک شناسه وجود داشته باشد، متد ()getElementById فقط اولین عنصر را برمی‌گرداند.
مقدار بازگشتی
اگر عنصری با شناسه مورد نظر پیدا شود، این متد همان عنصر را برمی‌گرداند. اگر هیچ عنصری با آن شناسه وجود نداشته باشد، null بازمی‌گرداند.
دسترسی به عناصر
با استفاده از این متد می‌توان به تمام ویژگی‌ها و استایل‌های یک عنصر دسترسی داشت و آنها را تغییر داد. از جمله مهم‌ترین ویژگی‌هایی که می‌توان تغییر داد، موارد زیر هستند.
محتوای HTML داخل عنصر.
استایل‌های CSS مربوط به عنصر.
ویژگی‌های HTML مثل src، href و ….
مثال؛ تغییر محتوای چندین عنصر
فرض کنید در صفحه HTML چندین عنصر مختلف داریم که قصد داریم با کلیک بر روی دکمه، محتوای آنها را تغییر دهیم
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>تغییر چندین عنصر</title>
</head>
<body data-rsssl=1>
<h1 id="header">عنوان اصلی</h1>
<p id="paragraph">این یک پاراگراف است</p>
<button onclick="changeContent()">تغییر محتوا</button>
<script>
function changeContent() {
document.getElementById("header").innerHTML = "عنوان جدید";
document.getElementById("paragraph").innerHTML = "متن پاراگراف جدید!";
}
</script>
</body>
</html>
در این مثال، با استفاده از ()getElementById ابتدا به عنصر هدر (header) و سپس به پاراگراف (paragraph) دسترسی پیدا کرده و محتوای آنها را تغییر می‌دهیم.
کامنت‌گذاری در JavaScript
کامنت‌گذاری در برنامه‌نویسی یک بخش حیاتی است که به توسعه‌دهندگان امکان می‌دهد توضیحاتی درباره کد خود ارائه دهند و باعث بهبود خوانایی و نگهداری پروژه شوند. در JavaScript، روش‌های مختلفی برای کامنت‌گذاری وجود دارد که به شما اجازه می‌دهد توضیحات خود را درون کد قرار دهید، بدون اینکه بر اجرای برنامه تأثیر بگذارند.
اصلا چرا باید از کامنت‌گذاری استفاده کنیم؟
درک بهتر کدها
توضیحات در مورد کدها به توسعه‌دهندگان دیگر یا حتی خود شما در آینده کمک می‌کند تا سریع‌تر متوجه شوند کد چه کاری انجام می‌دهد.
آسان ساختن نگهداری و به‌روزرسانی کدها
زمانی که کد نیاز به تغییر یا بهبود دارد، کامنت‌ها به راحتی می‌توانند ساختار و منطق پشت کد را روشن کنند.
توضیح بخش‌های پیچیده
برخی از بخش‌های کد ممکن است بسیار پیچیده باشند. با استفاده از کامنت‌ها می‌توانیم توضیحات دقیقی در مورد این بخش‌ها ارائه دهیم.
انواع کامنت‌ها در JavaScript
در جاوااسکریپت دو نوع کامنت وجود دارد که در ادامه به بررسی آنها میپردازیم.
کامنت تک‌خطی
برای نوشتن کامنت‌های تک‌خطی از علامت // استفاده می‌شود. هر چیزی که بعد از این علامت در یک خط بیاید، به‌عنوان کامنت در نظر گرفته می‌شود و JavaScript آن را اجرا نمی‌کند. از این نوع کامنت برای توضیح کوتاه یا غیرفعال‌سازی یک خط از کد استفاده می‌شود.
let x = 5; // مقدار دهی به متغیر x
کامنت چندخطی
برای نوشتن کامنت‌های چندخطی از /* … */ استفاده می‌شود. این نوع کامنت برای زمانی مناسب است که بخواهید توضیحات طولانی‌تری بنویسید یا چندین خط را به‌عنوان کامنت مشخص کنید.
/*
این یک کامنت چندخطی است.
این نوع کامنت برای نوشتن توضیحات طولانی در چندین خط استفاده می‌شود.
می‌توان از این نوع کامنت برای توضیحات پیچیده یا مستندسازی استفاده کرد.
*/
let y = 10;
چطور یک کامنت خوب و خوانا بگذاریم
نکاتی برای کامنت‌گذاری در برنامه‌نویسی وجود دارد که با رعایت آنها میتوانید حرفه‌ای‌تر کد‌نویسی کنید. تعدادی از این نکات شامل استفاده از کامنت‌های معنا‌دار، استفاده از کامنت‌ها برای توضیح منطقی کد‌های پیچیده، بروز رسانی مداوم کامنت‌ها، استفاده از کامنت‌ها برای غیرفعال کردن کد‌های اضافی و ناکارامد میشوند.
متغیرها در JavaScript
متغیر مکانی در حافظه است که می‌توانیم داده‌هایی مانند اعداد، رشته‌ها و سایر انواع داده‌ها را در آن ذخیره کنیم. به عبارت دیگر، متغیر نامی است که به یک مقدار خاص اشاره می‌کند و می‌توانیم در طول برنامه آن را تغییر دهیم یا از آن استفاده کنیم.در جاوااسکریپت، سه کلمه کلیدی اصلی برای تعریف متغیرها وجود دارد؛ var, let ,const هر یک از این کلمات کلیدی ویژگی‌ها و کاربردهای خاص خود را دارند که در ادامه آنها را توضیح خواهیم داد.
تعریف متغیر با var
متغیرهای تعریف شده با var دارای محدوده سراسری (global) یا محدوده تابعی (function scope) هستند، به این معنی که می‌توانند در کل تابع یا به طور کلی در برنامه قابل دسترسی باشند و امکان تعریف مجدد متغیر با var وجود دارد.
var name = "Ali";
console.log(name); // Ali
در اینجا، یک متغیر با نام name تعریف شده و مقدار “Ali” به آن اختصاص داده شده است. سپس با استفاده از ()console.log، مقدار آن را در کنسول مرورگر چاپ میکنیم.
تعریف متغیر با let
کلمه کلیدی let در ECMAScript 6 (ES6) معرفی شد و برای تعریف متغیرهایی استفاده می‌شود که ممکن است در طول برنامه تغییر کنند. برخلاف var، متغیرهایی که با let تعریف میشوند دارای محدوده بلوکی (block scope) هستند. متغیرهای تعریف شده با let تنها در داخل بلوک یا اسکوپ خاص خود (مانند داخل یک تابع یا حلقه) معتبر هستند و امکان تعریف مجدد متغیر با let در همان اسکوپ وجود ندارد، اما می‌توان مقدار آن را تغییر داد.
let age = 25;
console.log(age); // 25
تعریف متغیر با const
const نیز مانند let در ES6 معرفی شد و برای تعریف متغیرهایی استفاده می‌شود که مقدار آنها در طول برنامه تغییر نمی‌کند. به عبارت دیگر، متغیرهایی که با const تعریف میشوند ثابت (constant) هستند. متغیرهای تعریف شده با const باید در لحظه تعریف مقداردهی شوند، امکان تغییر یا تعریف مجدد متغیرهای const در طول برنامه وجود ندارد و مانند let، متغیرهای const دارای محدوده بلوکی هستند.
const pi = 3.14;
console.log(pi); // 3.14
در اینجا، یک متغیر ثابت با نام pi تعریف شده و مقدار 3.14 به آن اختصاص داده شده است. از آنجا که این متغیر با const تعریف شده، نمی‌توانیم مقدار آن را در طول برنامه تغییر دهیم.
انواع داده‌ها (Data Types) در JavaScript
یکی از ویژگی‌های مهم و اساسی هر زبان برنامه‌نویسی، انواع داده‌ها (Data Types) هستند. در جاوااسکریپت، هر داده‌ای که استفاده می‌شود به یکی از انواع داده‌ها تعلق دارد. آشنایی با انواع داده‌ها و نحوه استفاده از آنها به شما کمک می‌کند تا کدهایی کارآمدتر و بدون خطا بنویسید.
در این مقاله، به بررسی انواع داده‌های اولیه و پیچیده در جاوااسکریپت خواهیم پرداخت و با مثال‌هایی کاربردی آنها را شرح می‌دهیم.
تقسیم‌بندی داده‌ها در JavaScript
انواع داده‌ها در جاوااسکریپت به دو دسته کلی تقسیم میشوند که شامل داده‌های اولیه (Primitive Data Types) و داده‌های مرجع (Reference Data Types) میشوند.
داده‌های اولیه (Primitive Data Types)
داده‌های اولیه آن دسته از داده‌هایی هستند که مستقیماً در حافظه ذخیره میشوند و هر متغیر مقدار خاص خود را دارد. این داده‌ها غیر قابل تغییر (immutable) هستند، به این معنی که نمی‌توان مقادیر آنها را پس از تعریف تغییر داد، بلکه مقدار جدیدی به آنها نسبت داده می‌شود.
عدد (Number)
جالب است بدانید نوع داده Number برای نمایش اعداد (چه صحیح و چه اعشاری) استفاده می‌شود. برخلاف برخی زبان‌های برنامه‌نویسی دیگر، JavaScript فقط یک نوع داده عددی دارد.
let age = 25;
let price = 99.99;
رشته (String)
نوع داده String برای نمایش مقادیر متنی استفاده می‌شود. رشته‌ها را می‌توان با استفاده از نقل قول‌های تک (‘) یا دو (“) تعریف کرد.
let name = "Ali";
let greeting = 'Hello, World!';
بولین (Boolean)
نوع داده Boolean دو مقدار true یا false دارد و معمولاً برای شرط‌ها و بررسی‌های منطقی استفاده می‌شود.
let isOnline = true;
let hasFinished = false;
مقدار تهی (Null)
null یک مقدار خاص است که نشان می‌دهد متغیر به عمد هیچ مقداری ندارد. این نوع داده معمولاً برای خالی‌سازی یک متغیر استفاده می‌شود.
let selectedItem = null;
ناشناخته (Undefined)
اگر متغیری تعریف شود ولی مقداری به آن نسبت داده نشود، مقدار آن undefined خواهد بود.
let x;
console.log(x); // undefined
نماد (Symbol)
Symbol نوع داده‌ای است که یک مقدار یکتا و غیرقابل تغییر را نمایش می‌دهد. این نوع داده بیشتر برای شناسایی یکتای خصوصیات در شیء‌ها استفاده می‌شود.
let symbol1 = Symbol('id');
let symbol2 = Symbol('id');
console.log(symbol1 === symbol2); // false
داده‌های مرجع (Reference Data Types)
داده‌های مرجع به جای اینکه به طور مستقیم در حافظه ذخیره شوند، به مکانی در حافظه ارجاع می‌دهند. این داده‌ها شامل آرایه‌ها، اشیاء و توابع میشوند.
شیء (Object)
Object نوع داده‌ای پیچیده است که از مجموعه‌ای از جفت‌های کلید-مقدار تشکیل شده است. هر کلید می‌تواند یک رشته یا نماد باشد و مقدارها می‌توانند هر نوع داده‌ای باشند.
let person = {
name: "Ali",
age: 30,
isEmployed: true
};
آرایه (Array)
آرایه نوع خاصی از شیء است که مجموعه‌ای از مقادیر را به ترتیب ذخیره می‌کند. هر مقدار در آرایه یک عنصر نامیده می‌شود و با استفاده از یک اندیس (index) می‌توان به آن دسترسی داشت.
let colors = ["red", "green", "blue"];
console.log(colors[0]); // red
تابع (Function)
توابع در جاوااسکریپت نیز نوعی شیء هستند. یک تابع مجموعه‌ای از دستورالعمل‌ها را تعریف می‌کند که می‌توان آنها را بارها و بارها اجرا کرد.
function greet() {
return "Hello, World!";
}
console.log(greet()); // Hello, World!
ویدئوی یوتیوب
عملیات‌های ریاضی پایه در JavaScript
جاوااسکریپت از تعدادی عملگر ریاضی پایه برای انجام محاسبات ساده استفاده می‌کند.
جمع (+)
عملگر + برای جمع دو مقدار عددی استفاده می‌شود. همچنین از این عملگر برای ادغام رشته‌ها نیز استفاده می‌شود.
let x = 10;
let y = 5;
let sum = x + y;
console.log(sum); // 15
تفریق (-)
عملگر – برای کم کردن مقدار دوم از مقدار اول استفاده می‌شود.
let x = 10;
let y = 5;
let difference = x - y;
console.log(difference); // 5
ضرب (*)
عملگر * برای ضرب دو مقدار عددی استفاده می‌شود.
let x = 10;
let y = 5;
let product = x * y;
console.log(product); // 50
تقسیم (/)
عملگر / برای تقسیم مقدار اول بر مقدار دوم استفاده می‌شود.
let x = 10;
let y = 5;
let quotient = x / y;
console.log(quotient); // 2
باقی‌مانده (Modulus یا %)
عملگر % برای محاسبه باقی‌مانده تقسیم دو عدد استفاده می‌شود.
let x = 10;
let y = 3;
let remainder = x % y;
console.log(remainder); // 1
توان (Exponentiation)
عملگر ** یا تابع Math.pow() برای محاسبه توان استفاده می‌شود.
let base = 2;
let exponent = 3;
let result = base ** exponent;
console.log(result); // 8
let result = Math.pow(2, 3);
console.log(result); // 8
اولویت عملگرها
مانند بسیاری از زبان‌های برنامه‌نویسی دیگر، JavaScript نیز از اولویت عملگرها پیروی می‌کند. به عنوان مثال، ضرب و تقسیم نسبت به جمع و تفریق اولویت بیشتری دارند. برای اطمینان از اجرای صحیح محاسبات، می‌توان از پرانتزها استفاده کرد.
let result = 10 + 2 * 5;
console.log(result); // 20 (اول ضرب سپس جمع)
let resultWithParentheses = (10 + 2) * 5;
console.log(resultWithParentheses); // 60 (اول محاسبه داخل پرانتز)
افزایش و کاهش (Increment & Decrement)
جاوااسکریپت از عملگرهای افزایش (++) و کاهش (–) برای اضافه کردن یا کم کردن یک واحد به مقدار متغیر استفاده می‌کند.
++x (افزایش قبل از استفاده): ابتدا مقدار را یک واحد افزایش می‌دهد و سپس از آن استفاده می‌کند.
x++ (افزایش بعد از استفاده): ابتدا مقدار فعلی را استفاده می‌کند و سپس یک واحد افزایش می‌دهد.
let x = 5;
console.log(++x); // 6
console.log(x++); // 6 (سپس x می‌شود 7)
