کار با HTML ،CSS و JavaScript
در حالی که HTML و CSS ساختار و ظاهر وبسایت را فراهم میکنند، JavaScript تعاملپذیری را به وبسایتها اضافه میکند. جاوااسکریپت امکان پیادهسازی قابلیتهای پیچیدهای مثل مدیریت ورودی کاربر، انیمیشن عناصر، و حتی ساخت برنامههای کامل وب را فراهم میکند.
انواع داده (Data Types) در جاوااسکریپت
نوع داده به برنامه کمک میکند بفهمد با چه نوع دادهای کار میکند؛ مثلاً عدد، متن یا نوع دیگری از داده.
Number
نوع Number برای نمایش اعداد صحیح و اعشاری استفاده میشود.
نمونه اعداد صحیح:
7
19
90
Floating Point
اعداد اعشاری که دارای نقطه اعشار هستند.
نمونهها:
3.14
0.5
0.0001
String
یک رشته دنبالهای از کاراکترها (متن) است که داخل کوتیشن قرار میگیرد.
"I like coding"
'JavaScript is fun'
Boolean
نوع داده Boolean فقط دو مقدار دارد:
true
false
برای نمایش وضعیتها استفاده میشود، مثل:
let isLoggedIn = true;
Undefined و Null
Undefined
وقتی متغیری تعریف شود ولی مقداری به آن اختصاص داده نشود.
let age;
Null
یک مقدار خالی است که عمداً به متغیر داده میشود.
let user = null;
Object
یک شیء (Object) مجموعهای از جفتهای کلید-مقدار (key-value) است.
let pet = {
name: "Fluffy",
age: 3,
type: "dog"
};
در این مثال:
کلیدها:
name
age
type
مقادیر:
Fluffy
3
dog
Symbol
نوع داده Symbol یک مقدار منحصر بهفرد و تغییرناپذیر است که معمولاً برای شناسهی ویژگیهای اشیاء استفاده میشود.
const crypticKey1 = Symbol("saltNpepper");
const crypticKey2 = Symbol("saltNpepper");
console.log(crypticKey1 === crypticKey2); // false
حتی اگر توضیح (description) یکسان باشد، دو Symbol با هم برابر نیستند.
BigInt
اگر عددی خیلی بزرگتر از محدوده نوع Number باشد، میتوان از BigInt استفاده کرد.
برای ساخت BigInt باید n به انتهای عدد اضافه کنید.
const veryBigNumber = 1234567890123456789012345678901234567890n;
متغیرها در جاوااسکریپت
برای تعریف متغیر معمولاً از let استفاده میشود.
let cityName;
برای مقداردهی:
cityName = "New York";
متغیرهای let قابل تغییر هستند:
let cityName = "New York";
cityName = "Los Angeles";
console.log(cityName); // Los Angeles
const
روش دیگر تعریف متغیر استفاده از const است.
اما مقدار آن قابل تغییر نیست.
const cityName = "New York";
cityName = "Los Angeles"; // TypeError
معمولاً برای مقادیر ثابت استفاده میشود مثل:
PI
MAX_SIZE
قوانین نامگذاری متغیرها
- نام متغیر باید معنادار باشد.
- از camelCase استفاده کنید.
مثال:
cityName
isLoggedIn
veryBigNumber
قوانین دیگر:
- نباید با عدد شروع شود
- باید با حرف، _ یا $ شروع شود
- نباید فاصله داشته باشد
- نباید از کلمات رزرو شده استفاده کند
- جاوااسکریپت حساس به حروف بزرگ و کوچک است
age
Age
دو متغیر متفاوت هستند.
رشتهها و تغییرناپذیری (Immutability)
رشتهها دنبالهای از کاراکترها هستند که داخل کوتیشن قرار میگیرند.
let correctWay = 'This is a string';
let alsoCorrect = "This is also a string";
رشتهها در جاوااسکریپت تغییرناپذیر (immutable) هستند.
یعنی نمیتوان کاراکترهای داخل آن را تغییر داد، اما میتوان کل مقدار رشته را عوض کرد.
let firstName = "John";
firstName = "Jane";
اتصال رشتهها (String Concatenation)
برای اتصال رشتهها معمولاً از عملگر + استفاده میشود.
let studentName = "Asad";
let studentAge = 25;
let studentInfo = studentName + " is " + studentAge + " years old.";
console.log(studentInfo);
خروجی:
Asad is 25 years old.
استفاده از +=
برای اضافه کردن متن به رشته موجود:
let message = "Welcome to programming, ";
message += "Asad!";
console.log(message);
خروجی:
Welcome to programming, Asad!
استفاده از concat()
متد concat() هم میتواند رشتهها را به هم وصل کند.
let firstName = "John";
let lastName = "Doe";
let fullName = firstName.concat(" ", lastName);
console.log(fullName);
خروجی:
John Doe
استفاده از console.log()
متد console.log() برای نمایش پیامها در کنسول مرورگر استفاده میشود و ابزار مهمی برای دیباگ کردن است.
console.log("Hello, World!");
خروجی:
Hello, World!
سمیکالنها در جاوااسکریپت
سمیکالن ; برای مشخص کردن پایان یک دستور استفاده میشود.
let message = "Hello, World!";
let number = 42;
سمیکالنها کمک میکنند موتور جاوااسکریپت مرز بین دستورات را تشخیص دهد.
کامنتها در جاوااسکریپت
کامنتها توسط موتور جاوااسکریپت اجرا نمیشوند و برای توضیح کد استفاده میشوند.
کامنت تکخطی
// This is a single-line comment
کامنت چندخطی
/*
This is a multi-line comment.
It can span multiple lines.
*/
جاوااسکریپت یک زبان با تایپ پویا (Dynamic Typing)
در جاوااسکریپت لازم نیست نوع داده متغیر را مشخص کنید.
let error = 404;
error = "Not Found";
جاوااسکریپت خودش نوع داده را تشخیص میدهد.
در زبانهایی مثل C# این کار باعث خطا میشود:
int error = 404;
error = "Not Found"; // Error
استفاده از عملگر typeof
عملگر typeof برای فهمیدن نوع داده یک متغیر استفاده میشود.
let age = 25;
console.log(typeof age); // "number"
let isLoggedIn = true;
console.log(typeof isLoggedIn); // "boolean"
خروجی:
"number"
"boolean"
نکته مهم درباره null
در جاوااسکریپت یک رفتار عجیب وجود دارد:
let user = null;
console.log(typeof user); // "object"
با اینکه null یک شیء نیست، اما typeof مقدار "object" برمیگرداند. این یک اشکال قدیمی در طراحی جاوااسکریپت است که برای سازگاری هنوز حفظ شده است.
آزمون متغیرها و نوع دادهها در جاوااسکریپت
1. کدام یک از گزینههای زیر بهترین توصیف برای JavaScript است؟
- یک سیستم مدیریت پایگاه داده
- یک زبان نشانهگذاری برای طراحی وبسایتها
✅ یک زبان برنامهنویسی که برای توسعه وب استفاده میشود - یک زبان برنامهنویسی سمت سرور
2. کدام یک از گزینههای زیر نوع داده در جاوااسکریپت نیست؟
- Number
- Undefined
- Object
✅ Double
3. کدام یک از گزینههای زیر یک تعریف معتبر برای متغیر در جاوااسکریپت نیست؟
- var x;
- let x;
✅ public Int x; - const x = 0;
4. کدام یک از گزینههای زیر یک روش رایج نامگذاری متغیرها در جاوااسکریپت است؟
- Lightning case
✅ Camel case - Giraffe case
- JavaScript case
5. تفاوت بین let و const در جاوااسکریپت چیست؟
- const میتواند دوباره مقداردهی و دوباره تعریف شود، اما let نمیتواند.
- const میتواند دوباره مقداردهی شود اما دوباره تعریف نشود، let میتواند دوباره تعریف شود اما مقداردهی نشود.
- const نمیتواند دوباره مقداردهی یا تعریف شود، اما let میتواند هر دو کار را انجام دهد.
✅ const نمیتواند دوباره مقداردهی یا دوباره تعریف شود، اما let میتواند دوباره مقداردهی شود ولی دوباره تعریف نشود.
6. چرا رشتهها (Strings) در جاوااسکریپت immutable (تغییرناپذیر) محسوب میشوند؟
- میتوان رشتهها را تغییر داد اما فقط از طریق متغیرهای سراسری
- نمیتوان رشتهها را با استفاده از متغیرها ایجاد کرد
✅ وقتی یک رشته ایجاد شد، نمیتوان کاراکترهای آن را به طور مستقیم تغییر داد - رشتهها فقط با استفاده از literal ساخته میشوند
7. چگونه رشته Hello, world! را در کنسول جاوااسکریپت چاپ میکنید؟
✅ console.log(“Hello, world!”);
- System.out.println(“Hello, world!”);
- print(“Hello, world!”)
- alert(“Hello, world”);
8. کد زیر چه کاری انجام میدهد؟
let hello = "Hello";
hello += " world";
console.log(hello);
- تعداد کاراکترهای Hello world را در کنسول چاپ میکند
- رشته ” world” را به متغیر hello نسبت میدهد و آن را چاپ میکند
- دو رشته را ترکیب میکند اما مقدار hello همچنان “Hello” باقی میماند
✅ مقدار فعلی hello را با رشته ” world” ترکیب میکند، مقدار جدید را به hello نسبت میدهد و آن را در کنسول چاپ میکند
9. کدام کاراکتر در جاوااسکریپت برای پایان دادن به یک دستور استفاده میشود؟
- ,
- .
✅ ; - :
10. کدام یک از موارد زیر یک کامنت تکخطی معتبر در جاوااسکریپت است؟
✅ // This is a single line comment
- # This is a single line comment
- — This is a single line comment
- /* This is a single line comment */
11. Dynamic typing در جاوااسکریپت به چه معناست؟
- باید قبل از استفاده نوع داده متغیر را تعریف کنید
- جاوااسکریپت قبل از اجرای برنامه نوعها را بررسی میکند
✅ جاوااسکریپت نوع داده را بر اساس مقداری که به متغیر داده میشود تشخیص میدهد - نمیتوان مقدار با نوع متفاوت به یک متغیر داد
12. کدام گزینه نوع متغیر x را در کنسول چاپ میکند؟
- console.log(typeOf(x));
✅ console.log(typeof x); - console.log(isNaN(x));
- console.log(x.type);
13. خروجی کد زیر چه خواهد بود؟
console.log(typeof null);
- “NaN”
- “undefined”
- “null”
✅ “object”
14. کدام یک کامنت چندخطی معتبر در جاوااسکریپت است؟
✅ /*
This is a
multi-line
comment
*/
'''
This is a
multi-line
comment
'''
<!--
This is a
multi-line
comment
-->
// This is a
// multi-line
// comment
15. کدام گزینه متغیری را تعریف میکند که قابل تغییر نیست؟
- let x = 0;
- var x = 0;
✅ const x = 0; - final x = 0;
16. کدام یک از گزینههای زیر نام معتبر برای متغیر در جاوااسکریپت است؟
✅ $number
- 4cats
- !!dogs
- tart@n
17. کدام یک از گزینههای زیر روش معتبر برای اتصال رشتهها نیست؟
- console.log(“string1 ” + string2);
- console.log(string1 + ” ” + string2);
- console.log(string1.concat(” “, string2));
✅ console.log(string1 string2);
18. کدام نام متغیر به درستی از camelCase استفاده کرده است؟
✅ aLongVariableName
- alongvariableName
- a_long_variable_name
- ALongVariableName
19. چرا بهتر است با وجود Automatic Semicolon Insertion در جاوااسکریپت، سمیکالنها را بهصورت صریح بنویسیم؟
- برای افزایش سرعت اجرای کد
- برای هماهنگی با زبانهای برنامهنویسی دیگر
- برای کمک به دیباگ بهتر و ردگیری خطاها
✅ برای بهبود خوانایی و قابل اعتماد بودن کد
20. کدام یک از گزینههای زیر نوع داده در جاوااسکریپت نیست؟
- Null
✅ Float - Symbol
- Boolean
