طراحی سایت و برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

طراحی سایت و برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

آموزش Node.js: راهنمای package.json — بخش چهارم

فایل package.json یک عنصر کلیدی در بسیاری از کدبیس‌های اپلیکیشن مبتنی بر اکوسیستم Node.js است. اگر با جاوا اسکریپت کار کرده باشید یا حتی با یک پروژه پروژه فرانت‌اند برای مدتی مشغول بوده‌اید، قطعاً با فایل package.json سروکار داشته‌اید. فایل package.json نوعی مانیفست برای پروژه محسوب می‌شود.

این فایل می‌تواند کارهای زیادی انجام دهد که در برخی موارد کاملاً نامربوط به هم هستند. برای نمونه فایل package.json یک ریپازیتوری مرکزی برای ابزارها است. همچنین جایی است که npm و yarn نام‌ها و نسخه‌های پکیج‌هایی که نصب شده‌اند را نگه‌داری می‌کنند. برای مطالعه بخش قبلی از این مجموعه مقالات آموزشی، می‌توانید به لینک زیر رجوع کنید:

آموزش Node.js: معرفی NPM — بخش سوم

ساختار فایل

در این بخش مثالی از فایل package.json را ملاحظه می‌کنید:

1
2
{
}

چنان که می‌بینید این فایل خالی است! هیچ الزام ثابتی در مورد محتوایی که باید در فایل package.json برای یک اپلیکیشن نوشت وجود ندارد. تنها الزام این است که قالب JSON رعایت شود، چون در غیر این صورت از سوی برنامه‌هایی که تلاش می‌کنند مشخصه‌های آن را به صورت برنامه‌نویسی شده پردازش کنند قابل خواندن نخواهد بود.

اگر مشغول ساخت یک پکیج Node.js باشید که بخواهید آن را روی npm توزیع کنید، همه چیز به سرعت تغییر می‌یابند و باید مجموعه‌ی از مشخصه‌ها را داشته باشید که به افراد دیگر برای استفاده از پکیج کمک می‌کنند. در این خصوص در ادامه بیشتر توضیح خواهیم داد. به مثال زیر از یک فایل package.json توجه کنید:

1
2
3
{
  "name": "test-project"
}

مثالی از ساختار فایل package.json

این فایل مشخصه name را تعریف می‌کند که نام اپلیکیشن یا پکیج را مشخص می‌کنند و شامل نام پوشه‌ای هستند که فایل در آن قرار دارد. در ادامه مثال بسیار پیچیده‌تری را شاهد هستیم که آن را از یک اپلیکیشن نمونه Vue.js استخراج کرده‌ایم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
{
  "name": "test-project",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "main": "src/main.js",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-airbnb-base": "^11.3.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-import-resolver-webpack": "^0.8.3",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^22.0.4",
    "jest-serializer-vue": "^0.3.0",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-jest": "^1.0.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

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

Name – نام اپلیکیشن/پکیج را تعیین می‌کند.
version – نسخه کنونی را مشخص می‌سازد.
desctiption – توضیح خلاصه‌ای در مورد اپلیکیشن/پکیج است.
main – نقطه ورود اپلیکیشن را تعیین می‌کند.
private – اگر به صورت true تعیین شده باشد، از انتشار تصادفی اپلیکیشن/پکیج روی npm جلوگیری می‌کند.
scripts – مجموعه‌ای از اسکریپت‌های Node را تعریف می‌کند که می‌توان اجرا کرد.
dependencies – فهرستی از پکیج‌های npm را که به صورت وابستگی نصب شده‌اند تعیین می‌کند.
devDependencies – فهرستی از پکیج‌های npm را تعیین می‌کند که به صورت «وابستگی‌های توسعه» (development dependencies) نصب شده‌اند.
Engines – تعیین می‌کند که این پکیج/اپلیکیشن روی کدام نسخه‌های Node کار می‌کند.
Browserslist – برای تعیین نوع مرورگرها (و نسخه‌های آن‌ها) که می‌خواهید پشتیبانی شوند استفاده می‌شود.

همه مشخصه‌های فوق از سوی npm یا دیگر ابزارهایی که استفاده می‌کنیم، مورد بهره‌برداری قرار می‌گیرند.

تحلیل مشخصه‌ها

در این بخش مشخصه‌هایی را که می‌توان استفاده کرد به تفصیل بررسی می‌کنیم. ما در جاهای مختلف از عبارت «پکیج» (package) استفاده می‌کنیم، اما همان حالت در مورد اپلیکیشن‌های محلی که از پکیج‌ها استفاده نمی‌کنند نیز صدق می‌کند. اغلب این مشخصه‌ها تنها روی وب‌سایت npm استفاده می‌شوند و موارد دیگر از سوی اسکریپت‌هایی که با کد تعامل دارند مانند npm و نظایر آن مورد بهره‌برداری قرار می‌گیرند.

name

نام پکیج را تعیین می‌کند. مثالی از آن به صورت زیر است:

1
"name": "test-project"

نام باید کمتر از 214 کاراکتر باشد و نباید فاصله داشته باشد و تنها می‌تواند شامل حروف، خط تیره (-) و زیرخط (_) باشد. دلیل این امر آن است که وقتی روی npm منتشر می‌شود یک URL خاص دریافت می‌کند که مبتنی بر همین مشخصه است. اگر بخواهید پکیج را به صورت عمومی روی گیت‌هاب منتشر کنید، همین واقعیت در مورد خصوصیت name برای نام ریپازیتوری گیت‌هاب نیز صادق است.

author

نام نویسندگان پکیج را فهرست می‌کند. مثالی از آن به صورت زیر است:

1
2
3
{
  "author": "Flavio Copes <flavio@flaviocopes.com> (https://flaviocopes.com)"
}

این مشخصه می‌تواند با قالب زیر نیز استفاده شود:

1
2
3
4
5
6
7
{
  "author": {
    "name": "Flavio Copes",
    "email": "flavio@flaviocopes.com",
    "url": "https://flaviocopes.com"
  }
}

contributors

همانند author، پروژه می‌تواند یک یا چند مشارکت‌کننده نیز داشته باشد. این مشخصه آرایه‌ای است که مشارکت‌کنندگان در پروژه را فهرست‌بندی می‌کند. مثالی از آن به صورت زیر است:

1
2
3
4
5
{
  "contributors": [
    "Flavio Copes <flavio@flaviocopes.com> (https://flaviocopes.com)"
  ]
}

این مشخصه می‌تواند با قالب‌بندی زیر نیز باشد:

1
2
3
4
5
6
7
8
9
{
  "contributors": [
    {
      "name": "Flavio Copes",
      "email": "flavio@flaviocopes.com",
      "url": "https://flaviocopes.com"
    }
  ]
}

bugs

این مشخصه ابزار «ردگیری مشکلات پکیج» (package issue tracker) را به طور عمده با صفحه issues گیت‌هاب مرتبط می‌سازد. مثالی از کاربرد این مشخصه به صورت زیر است:

1
2
3
{
  "bugs": "https://github.com/flaviocopes/package/issues"
}

Homepage

صفحه اصلی پکیج را تعیین می‌کند. مثالی از آن به صورت زیر است:

1
2
3
{
  "homepage": "https://flaviocopes.com/package"
}

version

تعیین‌کننده نسخه کنونی پکیج است. مثالی از آن به صورت زیر است:

1
"version": "1.0.0"

این مشخصه امکان استفاده از نمادهای نسخه‌بندی معناشناختی (semver) را برای نسخه‌ها می‌دهد. منظور از نسخه‌بندی معنایی این است که نسخه‌های یک پکیج یا اپلیکیشن همواره با 3 عدد x.x.x بیان می‌شوند. عدد نخست این نسخه‌بندی عدد اصلی (major) است، عدد دوم نسخه فرعی (minor) و عدد سوم نیز وصله (patch) را نمایش می‌دهد.

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

license

نشان‌دهنده لایسنس یا پروانه پکیج است. مثالی از آن به صورت زیر است:

1
"license": "MIT"

keywords

این مشخصه شامل آرایه‌ای از کلیدواژه‌ها است که با پکیج مرتبط هستند. مثالی از آن به صورت زیر است:

1
2
3
4
5
"keywords": [
  "email",
  "machine learning",
  "ai"
]

این کلیدواژه‌ها به پیدا شدن پکیج شما در زمان ناوبری در میان پکیج‌های مشابه یا در زمان گشتن در وب‌سایت npm کمک می‌کنند.

description

این مشخصه شامل توضیح کوتاهی از پکیج است. مثالی از آن به صورت زیر است:

1
"description": "A package to work with strings"

این مشخصه به طور خاص در مواردی که تصمیم دارید پکیج خود را در npm منتشر کنید و افراد بتوانند بفهمند موضوع پکیج چیست، مفید خواهد بود.

repository

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

1
"repository": "github:flaviocopes/testing"،

به پیشوند github دقت کنید. سرویس‌های پشتیبانی شده محبوب دیگری نیز وجود دارند:

1
2
3
"repository": "gitlab:flaviocopes/testing"،
 
"repository": "bitbucket:flaviocopes/testing"،

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

1
2
3
4
"repository": {
  "type": "git",
  "url": "https://github.com/flaviocopes/testing.git"
}

شما می‌توانید از سیستم‌های کنترل نسخه متفاوتی استفاده کنید:

1
2
3
4
"repository": {
  "type": "svn",
  "url": "..."
}

main

نقطه ورود پکیج را تعیین می‌کند. زمانی که این پکیج را در یک اپلیکیشن ایمپورت می‌کنید، این همان نقطه‌ای خواهد بود که اپلیکیشن برای اکپسورت ماژول‌ها جستجو خواهد کرد. مثالی از آن به صورت زیر است:

1
"main": "src/main.js"

private

اگر به صورت true تنظیم شده باشد، اپلیکیشن/پکیج نمی‌تواند به صورت تصادفی روی npm منتشر شود. مثالی از آن به صورت زیر است:

1
"private": true

scripts

مجموعه‌ای از اسکریپت‌های node را تعریف می‌کند که می‌توان اجرا کرد. مثالی از آن به صورت زیر است:

1
2
3
4
5
6
7
8
"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "unit": "jest --config test/unit/jest.conf.js --coverage",
  "test": "npm run unit",
  "lint": "eslint --ext .js,.vue src test/unit",
  "build": "node build/build.js"
}

این اسکریپت‌ها اپلیکیشن‌های خط فرمان هستند. آن‌ها را می‌توان به شکل run XXXX یا yarn XXXX فراخوانی کرد که XXXX نام فرمان است. مثالی از آن به صورت زیر است:

npm run dev

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

dependencies

فهرستی از پکیج‌های نصب‌شده npm به عنوان وابستگی را تعیین می‌کند. زمانی که یک پکیج را با استفاده از npm یا yarn نصب می‌کنید:

npm install <PACKAGENAME>

yarn add <PACKAGENAME>

این پکیج به صورت خودکار در این فهرست قرار می‌گیرد. مثالی از آن به صورت زیر است:

1
2
3
"dependencies": {
  "vue": "^2.5.2"
}

devDependencies

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

npm install --dev <PACKAGENAME>

yarn add --dev <PACKAGENAME>

این پکیج به صورت خودکار در این فهرست قرار می‌گیرد. مثالی از آن به صورت زیر است:

1
2
3
4
"devDependencies": {
  "autoprefixer": "^7.1.2",
  "babel-core": "^6.22.1"
}

Engines

تعیین می‌کند که این پکیج/اپلیکیشن روی کدام نسخه‌ها از Node.js و دیگر فرمان‌ها کار می‌کند. مثالی از آن به صورت زیر است:

1
2
3
4
5
"engines": {
  "node": ">= 6.0.0",
  "npm": ">= 3.0.0",
  "yarn": "^0.13.0"
}

browserslist

این مشخصه برای این استفاده می‌شود که مشخص شود کدام مرورگرها (و کدام نسخه از آن‌ها) پشتیبانی می‌شوند. این مشخصه از سوی Babel ،Autoprefixer و دیگر ابزارها پشتیبانی می‌شود تا تنها polyfill-ها و fallback-های مورد نیاز مرورگرهای هدف اضافه شوند. مثالی از آن به صورت زیر است:

1
2
3
4
5
"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
]

این پیکربندی به آن معنی است که می‌خواهیم از 2 نسخه اصلی همه مرورگرهایی که دست‌کم 1% استفاده دارند به جز IE8 و پایین‌تر، پشتیبانی شود. آمار این مرورگرها از وب‌سایت CanIUse.com (+) استخراج می‌شود.

مشخصه‌های خاص دستور

فایل package.json می‌تواند میزبان پیکربندی خاص دستور، برای نمونه Babel ،ESLint و موارد دیگر باشد. هر یک از این موارد مشخصه خاصی مانند eslintConfig ،babel و موارد دیگر دارند. این مشخصه‌ها به نام مشخصه‌های خاص دستور شناخته می‌شوند و شیوه استفاده از آن‌ها را می‌توان در مستندات مربوط به دستور/پروژه یافت.

نسخه‌های پکیج

در بخش قبلی توضیح‌هایی در مورد اعداد نسخه‌ها مانند 3.0.0~ یا 0.13.0^ ارائه کردیم. شاید بپرسید معنی آن‌ها چیست و از کدام روش‌های دیگر برای توصیف نسخه می‌توان استفاده کرد. این نماد تعیین می‌کند که پکیج کدام به‌روزرسانی‌ها از آن وابستگی می‌پذیرد.

با فرض این که از semver استفاده می‌کنید، همه نسخه‌ها 3 رقم دارند که رقم نخست انتشار اصلی، دومی انتشار فرعی و سومی انتشار وصله است و قواعد زیر در مورد آن‌ها صدق می‌کند:

~: اگر عدد به صورت 0.13.0~ نوشته شود، بدین معنی است که می‌خواهید صرفاً انتشار وصله استفاده شود. در این حالت 0.13.1 درست است، اما 0.14.0 صدق نمی‌کند.
^: اگر عدد به صورت 0.13.0^ نوشته شده باشد، به این معنی است که انتشارهای وصله و فرعی نصب می‌شوند. برای نمونه 0.13.1، 0.14.0 و مواردی از این دست.
*: اگر عدد به صورت * نوشته باشد، به این معنی است که همه به‌روزرسانی‌ها شامل ارتقای نسخه‌های اصلی مورد قبول است.
>: این مقدار به آن معنی است که هر نسخه‌ای بالاتر از آن که تعیین شده مورد قبول است.
>=: نسخه‌ای معادل یا بالاتر از آن که تعیین شده مورد پذیرش است.
<=: نسخه‌ای معادل یا پایین‌تر از آن که تعیین شده مورد قبول است.
<: هر نسخه‌ای پایین‌تر از آن که اشاره کرده پذیرش می‌شود.

قواعد دیگری مانند زیر نیز وجود دارند:

no symbol: تنها نسخه خاصی که تعیین شده مورد پذیرش است.
Latest: از آخرین نسخه موجود استفاده می‌شود.

همچنین می‌توان برخی از قواعد فوق را برای داشتن بازه‌های خاص با هم ترکیب کرد برای نمونه:

.0.0 || >=1.1.0 <1.2.0

باعث می‌شود که از نسخه 1.0.0 یا انتشارهایی از 1.1.0 به بالا و پایین‌تر از 1.2.0 استفاده کنیم.

فایل package-lock.json

فایل package-lock.json به صورت خودکار در زمان نصب کردن پکیج‌های node ایجاد می‌شود. npm در نسخه 5 فایل package-lock.json را معرفی کرده است. در بخش قبلی در مورد فایل package.json که رواج و قدمت بیشتری دارد توضیحات مفصلی ارائه کردیم. هدف از این فایل آن است که ردپای نسخه دقیق هر پکیج که نصب می‌شود، حفظ شود، به طوری که محصول 100% به همان ترتیبی که پکیج‌ها از سوی نگه‌دارندگانشان به‌روزرسانی می‌شوند، قابل بازتولید باشنبد.

این فایل یک مشکل خاص را که فایل package.json حل‌نشده باقی گذاشته بود حل می‌کند. در فایل package.json می‌توان با استفاده از نمادگذاری semver تعیین کرد که می‌خواهیم کدام نسخه‌ها ارتقا یابند. برای نمونه به مثال‌های زیر توجه کنید:

اگر بنویسیم 0.13.0~ به این معنی است که می‌خواهیم انتشارهای وصله به‌روزرسانی شود، برای مثال 0.1.13.1، 0.14.0 و غیره.
اگر بنویسیم 0.13.0^ به این معنی است که می‌خواهیم انتشارهای وصله و فرعی به‌روزرسانی شوند یعنی 0.13.1، 0.14.0 و غیره.
اگر بنویسیم 0.13.0 به این معنی است که همواره می‌خواهیم آن نسخه دقیق تعیین شده مورد استفاده قرار گیرد.

چرا به آن نیاز داریم؟

ما معمولاً پوشه node_modules را به گیت کامیت نمی‌کنیم، چون عموماً پوشه بزرگی است و زمانی که پروژه را روی ماشین دیگری با استفاده از دستور npm install کپی کنیم، در صورتی که از ساختار ~ استفاده کرده باشیم یک نسخه وصله از پکیج انتشار می‌یابد که باید نصب شود. همین وضعیت در مورد ^ و انتشارهای فرعی نیز صدق می‌کند.

اگر عدد دقیق نسخه مثلاً به صورت 0.13.0 تعیین شده باشد، تحت تأثیر این مشکل قرار نخواهید گرفت. در هر حال ممکن است خود شما یا کس دیگری تلاش کنید تا پروژه را در سمت دیگر با اجرای دستور npm install مقداردهی اولیه کنید.

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

فایل package-lock.json نسخه نصب‌شده کنونی از هر پکیج را ثابت می‌کند و npm از آن نسخه‌های دقیق در زمان استفاده از دستور npm install بهره خواهد گرفت. این مفهوم جدیدی نیست و ابزارهای مدیریت بسته در زبان‌های برنامه‌نویسی دیگر مثلاً کامپوزر در PHP سال‌ها است که از سیستم مشابهی استفاده می‌کنند. اگر پروژه عمومی باشد یا همکارانی داشته باشید و یا اگر از گیت به عنوان منبعی برای توزیع استفاده کنید، فایل package-lock.json باید به ریپازیتوری گیت کامیت شود تا افراد دیگر بتوانند آن را واکشی کنند.

نسخه‌های وابستگی‌ها در زمان اجرای دستور npm update در فایل package-lock.json به‌روزرسانی خواهند شد.

مثال

در این بخش مثالی از ساختار یک فایل package-lock.json ارائه می‌کنیم که در زمان اجرای دستور npm install cowsay در یک پوشه خالی به دست می‌آید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
{
  "requires": true,
  "lockfileVersion": 1,
  "dependencies": {
    "ansi-regex": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.
0.0.tgz",
      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
    },
    "cowsay": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/cowsay/-/cowsay-1.3.1.tgz"
,
      "integrity": "sha512-3PVFe6FePVtPj1HTeLin9v8WyLl+VmM1l1H/5P+BTTDkM
Ajufp+0F9eLjzRnOHzVAYeIYFF5po5NjRrgefnRMQ==",
      "requires": {
        "get-stdin": "^5.0.1",
        "optimist": "~0.6.1",
        "string-width": "~2.1.1",
        "strip-eof": "^1.0.0"
      }
    },
    "get-stdin": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.
1.tgz",
      "integrity": "sha1-Ei4WFZHiH/TFJTAwVpPyDmOTo5g="
    },
    "is-fullwidth-code-point": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/
is-fullwidth-code-point-2.0.0.tgz",
      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
    },
    "minimist": {
      "version": "0.0.10",
      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10
.tgz",
      "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
    },
    "optimist": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
      "requires": {
        "minimist": "~0.0.1",
        "wordwrap": "~0.0.2"
      }
    },
    "string-width": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
      "requires": {
        "is-fullwidth-code-point": "^2.0.0",
        "strip-ansi": "^4.0.0"
      }
    },
    "strip-ansi": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
      "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
      "requires": {
        "ansi-regex": "^3.0.0"
      }
    },
    "strip-eof": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
      "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8="
    },
    "wordwrap": {
      "version": "0.0.3",
      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
      "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
    }
  }
}

ما cowsay را نصب کرده‌ایم که به موارد زیر وابسته است:

get-stdin
optimist
string-width
strip-eof

چنان که در مشخصه requires می‌بینیم، این پکیج‌ها به نوبه خود نیازمند پکیج‌های دیگری هستند:

ansi-regex
is-fullwidth-code-point
minimist
wordwrap
strip-eof

این موارد در فایل با ترتیب الفبایی اضافه شده‌اند و هر یک فیلد version، یک فیلد resolved که به مکان پکیج اشاره دارد و یک رشته دارند که از آن برای اعتبارسنجی پکیج استفاده می‌کنیم. بدین ترتیب به پایان این بخش از سری مقالات آموزش Node.js می‌رسیم. در بخش بعدی در مورد برخی دستورهای دیگر npm صحبت خواهیم کرد.

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

مشاوره چهارشنبه 9 مرداد 1398 ساعت 14:50

0 نظر

جداول در HTML — راهنمای جامع

در این مقاله به بررسی جداول در HTML می‌پردازیم و با موارد کاملاً ساده‌ای مانند ردیف و سلول، عنوان، گسترش سلول به چند ردیف یا ستون و شیوه گروه‌بندی همه سلول‌ها در یک ستون برای استایل‌دهی آشنا می‌شویم. پیش‌نیاز این مطلب آشنایی با مبانی HTML است. برای مطالعه قسمت قبلی این مجموعه آموزشی می‌توانید روی لینک زیر کلیک کنید:

تصاویر واکنش گرا (Responsive) در HTML — راهنمای جامع

جدول چیست؟

جداول HTML

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

جداول HTML

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

جداول HTML

به همین دلیل جای شگفتی نیست که خالقان زبان HTML ابزاری ارائه کرده‌اند که به وسیله آن می‌توان داده‌های جدولی را روی وب ساختاربندی و ارائه کرد.

طرز کار جدول چگونه است؟

نکته مهم در جدول این است که به صورت یک «شبکه» (grid) است. اطلاعات به سادگی با ایجاد ارتباط دیداری بین عناوین ردیف‌ها و ستون‌ها نمایان می‌شوند. برای نمونه به جدول زیر نگاه کنید که سیاره مشتری را به عنوان یک غول گازی با 62 قمرش نمایش می‌دهد. برای یافتن پاسخ می‌توانید عناوین ردیف‌ها و ستون‌های مرتبط را دنبال کنید.

داده‌های سیارات منظومه شمسی

		نام	جرم (1024kg)	قطر (km)	چگالی (kg/m3)	گرانش (m/s2)	طول روز (ساعت)	فاصله از خورشید (106km)	میانگین دما (°C)	تعداد اقمار	توضیح
سیارات خاکی		عطارد	0.330	4,879	5427	3.7	4222.6	57.9	167	0	نزدیکترین به خورشید
		ناهید	4.87	12,104	5243	8.9	2802.0	108.2	464	0
		زمین	5.97	12,756	5514	9.8	24.0	149.6	15	1	دنیای ما
		بهرام	0.642	6,792	3933	3.7	24.7	227.9	-65	2	سیاره سرخ
سیارات مشتری‌سان	غول‌های گازی	مشتری	1898	142,984	1326	23.1	9.9	778.6	110-	67	بزرگترین سیاره
	غول‌های گازی	کیوان	568	120,536	687	9.0	10.7	1433.5	140-	62
	غول‌های یخی	اورانوس	86.8	51,118	1271	8.7	17.2	2872.5	195-	27
	غول‌های یخی	نپتون	102	49,528	1638	11.0	16.1	4495.1	200-	14
سیارات کوتوله		پلوتو	0.0146	2,370	2095	0.7	153.3	5906.4	225-	5	در سال 2006 به عنوان سیاره دسته‌بندی شد.

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

استایل‌دهی به جدول

برای مشاهده مثال زنده جدول فوق به این صفحه (+) مراجعه کنید. نکته‌ای که متوجه می‌شویم این است که جدول در این صفحه خواناتر به نظر می‌رسد. دلیل این امر آن است که جدولی که در بخش قبلی این صفحه دیدیم، دارای کمترین «استایل‌دهی» (Styling) بود، در حالی که نسخه گیت‌هاب دارای CSS زیادی است.

شکی نیست که برای کسب بالاترین کارایی از جدول‌های وب باید نوعی اطلاعات استایل‌دهی با CSS ارائه شود و همچنین ساختار HTML مناسبی مورد استفاده قرار گرفته باشد. در این بخش از سری مقالات آموزش HTML روی بخش HTML متمرکز خواهیم شد. با این حال مقداری stylesheet CSS نیز برای خواناتر ساختن جدول‌ها استفاده خواهیم کرد. این نسخه مینیمال از سند HTML به صورت زیر است:

فایل HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Table template</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1>Table template</h1>
 
 
  </body>
</html>

فایل CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
html {
  font-family: sans-serif;
}
 
table {
  border-collapse: collapse;
  border: 2px solid rgb(200,200,200);
  letter-spacing: 1px;
  font-size: 0.8rem;
}
 
td, th {
  border: 1px solid rgb(190,190,190);
  padding: 10px 20px;
}
 
th {
  background-color: rgb(235,235,235);
}
 
td {
  text-align: center;
}
 
tr:nth-child(even) td {
  background-color: rgb(250,250,250);
}
 
tr:nth-child(odd) td {
  background-color: rgb(245,245,245);
}
 
caption {
  padding: 10px;
}

این دو فایل به کمک همدیگر نقطه آغاز خوبی برای تجربه جدول‌های HTML به دست می‌دهند.

چه هنگام نباید از جداول HTML استفاده کنیم؟

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

به بیان خلاصه استفاده از جدول برای طرح‌بندی به جای تکنیک‌های طرح‌بندی مبتنی بر CSS ایده بدی محسوب می‌شود. دلایل اصلی این مسئله به صورت زیر هستند:

جدول‌های طرح‌بندی، برای کاربران دچار نقص بینایی دسترس‌پذیری کمتری دارند: ابزارهای قرائت صفحه که از سوی افراد نابینا استفاده می‌شوند، تگ‌های موجود در صفحه HTML را شناسایی کرده و محتوای آن را برای کاربر می‌خوانند. از آنجا که جدول‌ها ابزار مناسبی برای طرح‌بندی نیستند و نشانه‌گذاری با استفاده از تکنیک‌های طرح‌بندی CSS دشوارتر می‌شود، خروجی ابزارهای قرائت صفحه موجب سردرگمی کاربران خواهد شد.

جدول‌ها موجب ازدحام تگ می‌شوند: همان طور که پیش‌تر اشاره کردیم طرح‌بندی جدولی عموماً شامل ساختارهای نشانه‌گذاری پیچیده‌تری نسبت به تکنیک‌های صحیح طرح‌بندی است. این امر موجب می‌شود که نوشتن، نگهداری و دیباگ کردن کد دشوارتر شود.

جدول‌ها به صورت خودکار واکنش‌گرا نیستند: هنگامی که از کانتینرهای طرح‌بندی صحیحی مانند <header> ،<section> ،<article> یا <div> استفاده می‌کنید، مقادیر پیش‌فرض عرض آن‌ها 100% از عنصر والدشان است. در سوی دیگر، جدول‌ها به صورت پیش‌فرض بر اساس محتوایشان اندازه‌بندی می‌شوند و از این رو به معیارهای بیشتری برای استایل‌دهی مؤثر طرح‌بندی جدولی روی دستگاه‌های متفاوت نیاز خواهیم داشت.

مثال: ایجاد نخستین جدول

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

قبل از هر چیز کدهای زیر را کپی کرده و به ترتیب در فایل‌هایی با نام blank-template.html و minimal-table.css روی سیستم خود در یک دایرکتوری جدید ذخیره کنید.

فایل blank-template.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Table template</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1>Table template</h1>
 
 
  </body>
</html>

فایل minimal-table.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
html {
  font-family: sans-serif;
}
 
table {
  border-collapse: collapse;
  border: 2px solid rgb(200,200,200);
  letter-spacing: 1px;
  font-size: 0.8rem;
}
 
td, th {
  border: 1px solid rgb(190,190,190);
  padding: 10px 20px;
}
 
th {
  background-color: rgb(235,235,235);
}
 
td {
  text-align: center;
}
 
tr:nth-child(even) td {
  background-color: rgb(250,250,250);
}
 
tr:nth-child(odd) td {
  background-color: rgb(245,245,245);
}
 
caption {
  padding: 10px;
}

محتوای همه جدول‌ها درون دو تگ <table></table> قرار می‌گیرد و این دو تگ نیز درون بخش body در سند HTML قرار دارند.

کوچک‌ترین بخش در یک جدول سلول نام دارد که به وسیله عنصر td ساخته می‌شود. td اختصاری برای عبارت «داده‌های جدول» (table data) است. عبارت زیر را درون تگ‌های جدول وارد کنید:

1
<td>Hi، I'm your first cell.</td>

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

1
2
3
4
<td>Hi، I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>

همان طور که می‌بینید، سلول‌ها زیر همدیگر قرار نمی‌گیرند؛ بلکه به صورت خودکار روی همان ردیف و همراستا با یکدیگر قرار می‌گیرند. هر عنصر <td> یک سلول منفرد ایجاد می‌کند و با همدیگر ردیف نخست جدول را تشکیل می‌دهند. هر سلول که اضافه می‌کنیم، ردیف طولانی‌تر می‌شود.

برای توقف رشد بیش از حد ردیف و شروع به جایگذاری سلول‌ها روی ردیف دوم، باید از عنصر <tr> استفاده کنیم. tr اختصاری برای عبارت «ردیف جدول» (table row) است. در ادامه این عنصر را بررسی می‌کنیم.

چهار سلول را که قبلاً ایجاد کردیم مانند حالت زیر درون تگ‌های <tr> قرار دهید:

1
2
3
4
5
6
<tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>

اکنون یک ردیف ایجاد شده است، می‌خواهیم یک یا دو ردیف دیگر نیز ایجاد کنیم که هر ردیف باید درون عناصر <tr> دیگر قرار گیرد و هر سلول نیز درون یک <td> باشد. بدین ترتیب جدولی مانند زیر ایجاد می‌شود:

جداول HTML

افزودن Header با عناصر <th>

اکنون باید توجه خود را معطوف به هدرهای جدول بکنیم. سلول‌های خاصی در جدول هستند که در ابتدای ردیف یا ستون حضور دارند و نوع داده‌ای که در آن ردیف یا ستون وجود دارد را تعریف می‌کنند. برای نمونه سلول‌های Person و Age در مثال فوق چنین حالتی دارند.

برای نشان دادن دلیل مفید بودن هدر باید نگاهی به یک مثال از جدول بیندازیم. برای نمونه کد زیر را ملاحظه کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

رندر عملی جدول به صورت زیر است:

Knocky	Flor	Ella	Juan
Breed	Jack Russell	Poodle	Streetdog	Cocker Spaniel
Age	16	9	10	5
Owner	Mother-in-law	Me	Me	Sister-in-law
Eating Habits	Eats everyone’s leftovers	Nibbles at food	Hearty eater	Will eat till he explodes

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

مثال: هدرهای جدول

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

فایل dogs-table.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dogs table</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1>Dogs Table</h1>
 
    <table>
      <tr>
        <td>&nbsp;</td>
        <td>Knocky</td>
        <td>Flor</td>
        <td>Ella</td>
        <td>Juan</td>
      </tr>
      <tr>
        <td>Breed</td>
        <td>Jack Russell</td>
        <td>Poodle</td>
        <td>Streetdog</td>
        <td>Cocker Spaniel</td>
      </tr>
      <tr>
        <td>Age</td>
        <td>16</td>
        <td>9</td>
        <td>10</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Owner</td>
        <td>Mother-in-law</td>
        <td>Me</td>
        <td>Me</td>
        <td>Sister-in-law</td>
      </tr>
      <tr>
        <td>Eating Habits</td>
        <td>Eats everyone's leftovers</td>
        <td>Nibbles at food</td>
        <td>Hearty eater</td>
        <td>Will eat till he explodes</td>
      </tr>
    </table>
 
 
  </body>
</html>

فایل minimal-table.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
html {
  font-family: sans-serif;
}
 
table {
  border-collapse: collapse;
  border: 2px solid rgb(200,200,200);
  letter-spacing: 1px;
  font-size: 0.8rem;
}
 
td, th {
  border: 1px solid rgb(190,190,190);
  padding: 10px 20px;
}
 
th {
  background-color: rgb(235,235,235);
}
 
td {
  text-align: center;
}
 
tr:nth-child(even) td {
  background-color: rgb(250,250,250);
}
 
tr:nth-child(odd) td {
  background-color: rgb(245,245,245);
}
 
caption {
  padding: 10px;
}

سند HTML شامل برخی نژاد‌های سگ است که قبلاً دیدیم.

برای این که هدرها هم به صورت دیداری و هم معناشناختی به عنوان هدر جدول شناسایی شوند، می‌توانید از عنصر <th> استفاده کنید. th اختصاری برای عبارت «هدر جدول» (Table Header) است. طرز کار این عنصر دقیقاً مشابه <td> است، به جز این که یک هدر را نمایندگی می‌کند و نه یک سلول معمولی. به سند HTML بروید و عناصر <td> پیرامون هدرهای جدول را به عناصر <th> تغییر دهید. سند HTML را ذخیره کرده و آن را در یک مرورگر پیاده‌سازی کنید. بدین ترتیب مشاهده خواهید کرد که هدرها اینک مانند هدر نمایش می‌یابند.

چرا هدرها مفید هستند؟

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

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

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

گسترش سلول‌ها به چند ردیف یا ستون

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table>
  <tr>
    <th>Animals</th>
  </tr>
  <tr>
    <th>Hippopotamus</th>
  </tr>
  <tr>
    <th>Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th>Crocodile</th>
  </tr>
  <tr>
    <th>Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>

اما خروجی کار آنچه را مد نظر ما است در اختیارمان قرار نمی‌دهد.

جداول HTML

ما باید راهی بیابیم که عبارت‌های Animals ،Hippopotamus و Crocodile هر دو ستون را اشغال کنند و Horse و Chicken به سمت پایین و دو ردیف گسترش یابند. خوشبختانه سلول‌های هدر جدول خصوصیت‌های colspan و rowspan دارد که به ما امکان می‌دهد این کارها را انجام دهیم. هر دو این خصوصیت‌ها مقدار عددی را نمایش می‌دهند که معادل تعداد ردیف‌ها یا ستون‌هایی است که قرار است گسترش یابند. برای نمونه colspan=”2″ موجب می‌شود که سلول در دو ستون گسترش یابد.

بنابراین از colspan و rowspan برای بهبود جدول استفاده می‌کنیم. ابتدا محتوای کدهای زیر را در دو فایل در یک دایرکتوری جدید روی سیستم خود قرار دهید.

فایل animals-table.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Animals table</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1>Animals table</h1>
 
    <table>
      <tr>
        <th>Animals</th>
      </tr>
      <tr>
        <th>Hippopotamus</th>
      </tr>
      <tr>
        <th>Horse</th>
        <td>Mare</td>
      </tr>
      <tr>
        <td>Stallion</td>
      </tr>
      <tr>
        <th>Crocodile</th>
      </tr>
      <tr>
        <th>Chicken</th>
        <td>Hen</td>
      </tr>
      <tr>
        <td>Rooster</td>
      </tr>
    </table>
 
 
  </body>
</html>

فایل minimal-table.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
html {
  font-family: sans-serif;
}
 
table {
  border-collapse: collapse;
  border: 2px solid rgb(200,200,200);
  letter-spacing: 1px;
  font-size: 0.8rem;
}
 
td, th {
  border: 1px solid rgb(190,190,190);
  padding: 10px 20px;
}
 
th {
  background-color: rgb(235,235,235);
}
 
td {
  text-align: center;
}
 
tr:nth-child(even) td {
  background-color: rgb(250,250,250);
}
 
tr:nth-child(odd) td {
  background-color: rgb(245,245,245);
}
 
caption {
  padding: 10px;
}

سند HTML شامل همان مثال حیوانات قبلی است. سپس از colspan برای گسترش دادن ردیف‌های Animals، Hippopotamus و Crocodile به دو ستون استفاده می‌کنیم. در نهایت از rowspan استفاده می‌کنیم تا Horse و Chicken در دو ردیف گسترش یابند. فایل را ذخیره کرده و در مرورگر باز کنید تا شاهد بهبود اتفاق افتاده باشید.

نسخه نهایی باید به صورت زیر باشد:

جداول HTML

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

آخرین ویژگی جدول‌ها که در این مقاله بررسی خواهیم کرد، روشی برای تعریف اطلاع استایل‌دهی کل ستون داده‌ها است. این کار با استفاده از عناصر <col> و <colgroup> اجرا می‌شود. دلیل نیاز به این دو عنصر آن است که در برخی موارد تعریف استایل‌دهی ستون‌ها ممکن است کار دشواری باشد، چون مجبور هستید این اطلاعات را برای همه عناصر <td> و <th> ستون تعریف کنید و یا از سلکتورهای پیچیده‌تری مانند ()nth-child: استفاده کنید. مثال ساده زیر را در نظر بگیرید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
  <tr>
    <th>Data 1</th>
    <th style="background-color: yellow">Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td style="background-color: yellow">Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td style="background-color: yellow">Jazz</td>
  </tr>
</table>

کد فوق خروجی زیر را در اختیار ما قرار می‌دهد:

Data 1	Data 2
Calcutta	Orange
Robots	Jazz

این وضعیت ایده‌آلی نیست، زیرا باید اطلاعات استایل را روی هر سه ستون جدول تکرار کنیم. در صورت استفاده از CSS نیز باید کلاسی داشته باشیم که روی هر سه سلول تعریف شود و اطلاعات استایل‌دهی را در یک استایل‌شیت مجزا بیاوریم. به جای این کارها، می‌توانیم این اطلاعات را یک بار و روی عنصر <col> بیاوریم. عناصر <col> درون کانتینر <colgroup> و درست زیر تگ آغازین <table> تعریف می‌شوند. بدین ترتیب همان حالت که در مثال قبل دیدیم، با استفاده از کد زیر نیز به دست می‌آید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table>
  <colgroup>
    <col>
    <col style="background-color: yellow">
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

ما در عمل دو «ستون استایل» (style columns) تعریف می‌کنیم که یکی برای تعیین اطلاعات استایل‌دهی برای هر ستون است. ما ستون نخست را استایل‌دهی نمی‌کنیم، اما همچنان باید عنصر <col> را برای آن قید کنیم، چون اگر چنین نکنیم، استایل‌دهی در مورد ستون نخست نیز اعمال خواهد شد. اگر خواسته باشیم اطلاعات استایل‌دهی را روی هر دو ستون اِعمال کنیم، می‌توانیم یک عنصر <col> را با یک خصوصیت span روی آن به صورت زیر قید کنیم:

1
2
3
<colgroup>
  <col style="background-color: yellow" span="2">
</colgroup>

span نیز همانند colspan و rowspan مقدار عددی بی واحدی می‌گیرد که تعداد ستون‌هایی که قرار است اطلاعات استایل‌دهی روی آن‌ها اعمال شوند، نشان می‌دهد.

مثال: colgroup و col

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

با پیگیری مراحل زیر می‌تواند جدول فوق را ایجاد کنید. ابتدا محتوای کد زیر را در یک دایرکتوری جدید و در فایلی با نام timetable.html روی سیستم خود کپی کنید.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>School timetable</title>
    <style>
    html {
      font-family: sans-serif;
    }
    table {
      border-collapse: collapse;
      border: 2px solid rgb(200,200,200);
      letter-spacing: 1px;
      font-size: 0.8rem;
    }
    td, th {
      border: 1px solid rgb(190,190,190);
      padding: 10px 20px;
    }
    td {
      text-align: center;
    }
    caption {
      padding: 10px;
    }
    </style>
  </head>
  <body>
    <h1>School timetable</h1>
 
    <table>
      <tr>
        <td>&nbsp;</td>
        <th>Mon</th>
        <th>Tues</th>
        <th>Wed</th>
        <th>Thurs</th>
        <th>Fri</th>
        <th>Sat</th>
        <th>Sun</th>
      </tr>
      <tr>
        <th>1st period</th>
        <td>English</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>German</td>
        <td>Dutch</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <th>2nd period</th>
        <td>English</td>
        <td>English</td>
        <td>&nbsp;</td>
        <td>German</td>
        <td>Dutch</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <th>3rd period</th>
        <td>&nbsp;</td>
        <td>German</td>
        <td>&nbsp;</td>
        <td>German</td>
        <td>Dutch</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <th>4th period</th>
        <td>&nbsp;</td>
        <td>English</td>
        <td>&nbsp;</td>
        <td>English</td>
        <td>Dutch</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
 
 
  </body>
</html>

این کد HML شامل جدولی است که در بخش قبل دیدیم به جز این که اطلاعات استایل‌دهی ستون در آن نیامده است.
یک عنصر <colgroup> در ابتدای جدول و درست زیر عنصر <table> اضافه کنید که در آن می‌توانید عناصر <col> خود را درج کنید.
دو ستون نخست باید بدون استایل‌دهی حفظ شوند.
یک رنگ پس‌زمینه به ستون سوم اضافه کنید. مقدار خصوصیت style به صورت background-color:#97DB9A باید باشد.
یک عرض جداسازی روی ستون چهارم قید کنید و مقدار خصوصیت style برابر با width: 42px خواهد بود.
یک رنگ پس‌زمینه به ستون پنجم اضافه کنید. مقدار خصوصیت style برای آن به صورت background-color: #97DB9A است.
یک رنگ پس‌زمینه متفاوت به علاوه یک حاشیه به ستون ششم اضافه کنید تا مشخص سازید که این روز یک روز خاص است و باید یک کلاس جدید تدریس شود. مقدار خصوصیت style را به صورت زیر تعیین کنید:
```
background-color:#DCC48E; border:4px solid #C1437A
```
دو روز آخر هفته تعطیل هستند و از این رو به آن‌ها هیچ رنگ پس‌زمینه ندهید و فقط عرض آن‌ها را با تعریف خصوصیت style به صورت width: 42px تعیین کنید.

اگر در هر مرحله از کار با مشکل مواجه شدید، می‌توانید به کد کامل زیر مراجعه کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>School timetable</title>
    <style>
    html {
      font-family: sans-serif;
    }
    table {
      border-collapse: collapse;
      border: 2px solid rgb(200,200,200);
      letter-spacing: 1px;
      font-size: 0.8rem;
    }
    td, th {
      border: 1px solid rgb(190,190,190);
      padding: 10px 20px;
    }
    td {
      text-align: center;
    }
    caption {
      padding: 10px;
    }
    </style>
  </head>
  <body>
    <h1>School timetable</h1>
 
    <table>
      <colgroup>
        <col span="2">
        <col style="background-color:#97DB9A;">
        <col style="width:42px;">
        <col style="background-color:#97DB9A;">
        <col style="background-color:#DCC48E; border:4px solid #C1437A;">
        <col span="2" style="width:42px;">
      </colgroup>
      <tr>
        <td>&nbsp;</td>
        <th>Mon</th>
        <th>Tues</th>
        <th>Wed</th>
        <th>Thurs</th>
        <th>Fri</th>
        <th>Sat</th>
        <th>Sun</th>
      </tr>
      <tr>
        <th>1st period</th>
        <td>English</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>German</td>
        <td>Dutch</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <th>2nd period</th>
        <td>English</td>
        <td>English</td>
        <td>&nbsp;</td>
        <td>German</td>
        <td>Dutch</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <th>3rd period</th>
        <td>&nbsp;</td>
        <td>German</td>
        <td>&nbsp;</td>
        <td>German</td>
        <td>Dutch</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <th>4th period</th>
        <td>&nbsp;</td>
        <td>English</td>
        <td>&nbsp;</td>
        <td>English</td>
        <td>Dutch</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
 
 
  </body>
</html>

در نهایت جدول شما باید به صورت زیر دربیاید:

جداول HTML

سخن پایانی

در این مقاله به بررسی مبانی مقدماتی جدول‌های HTML پرداخته‌ایم. در مقاله بعدی در مورد برخی ویژگی‌های پیشرفته‌تر جدول‌های HTML صحبت خواهیم کرد. همچنین در مورد راه‌های افزایش دسترس‌پذیری برای افراد دچار نقص بینایی توضیح خواهیم داد. برای مشاهده بخش بعدی این سری مطالب به لینک زیر مراجعه کنید:

منبع: فرادرس

مشاوره چهارشنبه 9 مرداد 1398 ساعت 14:50

0 نظر

آموزش ساخت یک اپلیکیشن آیفون (بخش ششم) — به زبان ساده

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

آموزش ساخت یک اپلیکیشن آیفون (بخش پنجم) — به زبان ساده

دانلود تصاویر

در آغاز فایل‌های تصویر لگو را که برای این راهنما ضروری هستند دانلود کنید. این یک فایل آرشیو فشرده است و زمانی که آن را استخراج کنید، با پوشه‌ای به نام Lego_image_assets مواجه می‌شوید. این پوشه را باز کنید تا فهرستی از آیکون‌ها و تصاویر اپلیکیشن را ببینید. برخی از آن‌ها در قالب JPEG و برخی دیگر در قالب PNG هستند.

assets

افزودن کاتالوگ فایل‌ها

Xcode می‌تواند تصاویر را به صورت فایل‌های منفرد مدیریت کند، اما مدیریت آن‌ها درون یک «کاتالوگ assets» (یا assets catalog) راحت‌تر است. شما می‌توانید چندین کاتالوگ assets در یک پروژه داشته باشید اما فعلاً تنها از کاتالوگ «Assets» استفاده می‌کنیم که از قبل در قالب پروژه گنجانده شده است.

اگر Xcode در حال حاضر پنل ناوبری پروژه را نمایش نمی‌دهد، روی دکمه Hide or Show the Navigator در نزدیکی سمت راست نوار ابزار کلیک کنید. در پروژه Xcode آیتم Assets.xcassets را در پنل ناوبری پروژه انتخاب کنید.

assets

بدین ترتیب با یک کانتینر خالی برای AppIcon همراه با دو تصویر موجود first و second مواجه می‌شوید. چنان که احتمالاً حدس می‌زنید، این دو تصویر در حال حاضر به عنوان آیکون‌هایی برای آیتم‌های نوار برگه اپلیکیشن استفاده می‌شوند. این تصاویر در قالب اپلیکیشن Xcode که در ابتدا با عنوان Tabbed App انتخاب کرده‌ایم وجود داشتند. ما دیگر به این دو آیکون نیاز نداریم، چون آیکون‌های سفارشی خودمان را اضافه خواهیم کرد.

روی آیکون first کلیک کنید و با نگه‌داشتن کلید Shift روی آیکون Second نیز کلیک کنید.

assets

کلید delete کیبورد را بزنید تا این تصاویر از پروژه حذف شوند. به Finder بازگردید و همه فایل‌های درون پوشه Lego_image_assets را انتخاب کنید. یک روش برای انجام این کار آن است که یک فایل را انتخاب و سپس از منوی Edit در Finder گزینه Select All را انتخاب کنید. همه فایل‌ها را درون Xcode و به میانه پنل زیر کانتینر AppIcon منتقل کنید.

assets

اینک می‌بینید که تصاویر در کاتالوگ فایل‌ها فهرست شده‌اند.

assets

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

بررسی کاتالوگ Assets

یک بار روی فایل icon block کلیک کنید تا انتخاب شود. در سمت راست یک کانتینر برای وضوح‌های مختلف این تصویر مشاهده می‌کنید.

assets

آیفون، آی‌پد و مک صفحه‌ای با چندین وضوح تصویر دارند. صفحه‌های با استاندارد اصلی در هر نقطه یک پیکسل دارند. دستگاه‌های نسل اخیر مجهز به صفحه‌های «رتینا» (Retina) شده‌اند که در هر نقطه 4=2×2 پیکسل دارند. برخی دستگاه‌ها نیز مانند آیفون ایکس دارای 9=3×3 پیکسل در هر نقطه هستند. کاتالوگ asset دارای کانتینرهایی برای هر یک از این وضوح‌های تصویراست که به صورت 1x، 2x و 3x مشخص شده است.

زمانی که فایل‌های تصویر را در کاتالوگ asset می‌کشید، Xcode سه فایل تصویر زیر را نمایش می‌دهد:

icon block.png
icon block@2x.png
icon block@3x.png

وضوح‌های مختلف تصویر

آیتم شناسایی شده همان نام مبنا را دارد، اما دو مورد دیگر دارای پسوند 2x@ و 3x@ هستند. Xcode از روی نام‌های فایل‌ها تشخیص می‌دهد که این سه فایل وضوح‌های تصویر مختلفی برای تصویر واحد هستند. به همین دلیل است که آن‌ها را به صورت هم و در یک asset ترکیبی گروه‌بندی کرده است. Xcode همین منطق را در مورد فایل‌های دیگر که در کاتالوگ assets درگ کنیم اِعمال خواهد کرد.

ما می‌توانیم فایل‌های منفرد را درون کانتینرهای هر وضوح تصویر بکشیم، اما در این مورد به این کار نیاز نداریم. فایل farmerHead را با یک بار کلیک انتخاب کنید.

assets

توجه داشته باشید که این تنها asset است که یک فایل دارد و Xcode آن را در دسته 1x قرار داده است. از آنجا که هیچ نسخه خاصی از این تصویر برای وضوح‌های دیگر وجود ندارد، Xcode فایل اصلی را در صورت ضرورت مقیاس‌بندی خواهد کرد.

قاعده کلی چنین است که تصویری (مانند icon block) که به صورت یک رسم ایجاد شده باشد بهتر است همانند فایل PNG خود شامل هر سه وضوح تصویر باشد. برای یک تصویر JPEG مانند farmerHead معمولاً گنجاندن یک نسخه با وضوح تصویر کافی برای هر پیکسل که در زمان مقیاس‌بندی برای دستگاه‌های مختلف به خوبی نمایش یابد کافی است.

تصویر آیتم نوار برگه‌ای

در این مرحله می‌خواهیم از فایل‌هایی که به اپلیکیشن اضافه کردیم استفاده کنیم. کار خود را با تعیین آیکون‌ها در آیتم‌های نوار برگه‌ای آغاز می‌کنیم. در پنل ناوبری پروژه گزینه Main.storyboard را انتخاب کنید:

assets

یک بار روی آیتم نوار برگه‌ای News کلیک کنید تا انتخاب شود.

assets

در پنل «بازبینی خصوصیات» (Attributes Inspector) در بخش Bar Item گزینه Image را از first به icon news تغییر دهید.

assets

شما می‌توانید روی فهرست بازشدنی اسکرول کنید یا چند حرف نخست (به حروف کوچک و بزرگ حساس است) را وارد کنید تا مورد مطلوب را پیدا کنید.

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

در بخش Tab Bar Item فوقانی پنل بازبینی خصوصیات، مقدار گزینه Selected Image را برابر با icon news highlighted تعیین کنید.

assets

به طور مشابه برای نوار آیتم برگه‌ای Products مقدار Bar Item Image را به icon block و مقدار Selected Image را به icon block highlighted تغییر دهید و در مورد آیتم نوار برگه‌ای Chat نیز به ترتیب از icon chat و icon chat highlighted استفاده کنید.

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

assets

تصاویر سلول نمای جدولی

ما چند نمای جدولی در اپلیکیشن خود داریم که قبلاً متون آماده‌ای به آن‌ها اضافه کرده‌ایم. استایل‌های این سلول‌ها امکان افزودن یک تصویر را به ما می‌دهد. به این منظور روی سلول اول در لیست News کلیک کنید تا انتخاب شود. در پنل بازبینی خصوصیات، مقدار Image را به blockCircle عوض کنید.

assets

نکته: به نظر می‌رسد در نسخه 10.1 Xcode یک باگ وجود دارد که تصویر در زمان انتخاب آن از منوی بازشدنی به‌روزرسانی نمی‌شود. اگر چنین حالتی برای شما پیش آمد، کافی است آن را برای بار دوم انتخاب کنید تا کار کند.

سلول دوم را انتخاب کنید و مقدار Image را به صورت houseSimple قرار دهید.

assets

به طور مشابه در سلول Products مقدار Image را به ترتیب برابر با Sydney و spaceShuttleSatellite تعیین کنید.

assets

در نهایت سلول‌ها را در نمای جدولی Chat برابر با orangeHead ،winkHead و farmerHead تنظیم کنید.

assets

اکنون اپلیکیشن ما غالب گرافیک‌هایی را که اضافه کردیم نمایش می‌دهد.

نکته: در این اسکرین‌شات اندازه صفحه‌ها کاهش یافته‌اند، اما شما باید بتوانید صفحه‌ها را در اندازه کامل مشاهده کنید.

assets

اجرای اپلیکیشن

اپلیکیشن را اجرا کرده و تأیید کنید که تصاویر به درستی نمایش می‌یابند. به این منظور آیتم‌های نوار برگه‌ای را در حالت‌های نرمال و انتخاب شده بررسی کنید. همچنین سلول‌های نمای جدولی را در هر صحنه بررسی کنید.

assets

کامیت کردن تغییرها

همانند بخش‌های قبلی باید تغییرهایی را که در پروژه ایجاد کرده‌ایم کامیت کنیم. به این منظور مراحل زیر را انجام دهید:

گزینه Commit Changes را از منوی Source Control انتخاب کنید.
یک توضیح مانند زیر برای کامیت وارد کنید:
```
Added image assets for cells and tab bar items.
```
روی دکمه Commit کلیک کنید.

توجه داشته باشید که این بار کامیت شامل فایل‌های جدید زیادی است و همه آن فایل‌های تصاویر و فایل‌های json که Xcode در پشت‌صحنه برای کاتالوگ assets ایجاد کرده است کامیت می‌شوند.

assets

جمع‌بندی

اینک اپلیکیشن را باز کنید تا آیکون‌ها و تصاویر جدید را عملاً مشاهده کنید. هر گونه سؤال یا پیشنهاد خود را می‌توانید در بخش نظرات این مطلب با ما مطرح کنید. در بخش بعدی این سری مقالات آموزشی شروع به ایجاد طرح‌بندی سفارشی برای سلول‌ها می‌کنیم و بدین ترتیب می‌توانیم همه متون و تصاویر را به وضوح ببینیم. قسمت بعدی را در لینک زیر ملاحطه کنید:

منبعک فرادرس

مشاوره چهارشنبه 9 مرداد 1398 ساعت 14:47

0 نظر

روش رانگ کوتا مرتبه چهارم (RK4) — از صفر تا صد

مشاوره چهارشنبه 9 مرداد 1398 ساعت 14:47

0 نظر

راهنمای جامع تایپ اسکریپت (Typescript) — از صفر تا صد

t یک ابرمجموعه نوع‌بندی شده از جاوا اسکریپت و هدف آن تسهیل توسعه اپلیکیشن‌های بزرگ جاوا اسکریپت است. تایپ اسکریپت مفاهیم رایجی مانند کلاس‌ها، ژنریک‌ها، اینترفیس‌ها و انواع استاتیک را به جاوا اسکریپت می‌افزاید و به توسعه‌دهندگان امکان می‌دهد که از ابزارهایی همچون بررسی استاتیک و «بازسازی» (Refactoring) کد استفاده کنند.

Typescript چه اهمیتی دارد؟

در واقع سؤال فوق را می‌توان این گونه نیز بیان کرد که چرا باید از تایپ اسکریپت استفاده کرد؟ در ادامه برخی از دلایلی که توسعه‌دهندگان جاوا اسکریپت باید یادگیری Typescript را در نظر داشته باشند توضیح می‌دهیم.

نوع‌بندی استاتیک: جاوا اسکریپت یک زبان برنامه‌نویسی با نوع‌بندی دینامیک است یعنی تا زمانی که وهله‌ای از یک متغیر را در زمان اجرا ایجاد نکنید در مورد نوع متغیر اطلاعی ندارد و همین مسئله موجب بروز مشکلات و خطاهایی در پروژه می‌شود. Typescript پشتیبانی از نوع‌بندی استاتیک را به جاوا اسکریپت اضافه کرده است که موجب می‌شود از بروز باگ‌هایی که ناشی از تصور نادرست در مورد نوع متغیر هستند جلوگیری شود. ما همچنان در صورتی که از نوع متغیر استفاده کنیم، کنترل کاملی روی میزان صراحت نوع متغیر در کد خود داریم.

پشتیبانی بهتر از IDE: یکی از بزرگ‌ترین مزیت‌های Typescript نسبت به جاوا اسکریپت، پشتیبانی عالی از IDE است که شامل Intellisense، اطلاعات آنی از کامپایلر Typescript، دیباگ کردن و مواردی از این دست می‌شود. همچنین برخی اکستنشن‌های عالی برای ارتقای بیشتر تجربه توسعه Typescript وجود دارند.

دسترسی به قابلیت‌های جدید ECMAScript: تایپ‌اسکریپت امکان دسترسی به جدیدترین قابلیت‌های ECMAScript را می‌دهد و آن‌ها را به اهداف ECMAScript مورد نظر شما تبدیل می‌کند. این بدان معنی است که می‌توانید اپلیکیشن‌ها را با استفاده از جدیدترین ابزارها بدون نیاز به نگرانی در مورد پشتیبانی از مرورگر توسعه دهید.

چه هنگام باید از Typescript استفاده کنیم؟

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

زمانی که کدبیس بزرگی وجود دارد: تایپ‌اسکریپت یک ارتقای مهم برای کدبیس های بزرگ محسوب می‌شود، چون کمک می‌کند از بروز بسیاری از خطاهای رایج پیشگیری کنیم. این واقعیت به طور خاص در مواردی که توسعه‌دهندگان زیادی روی پروژه منفرد کار کنند صدق می‌کند.

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

راه‌اندازی Typescript

برای راه‌اندازی تایپ‌اسکریپت، کافی است آن را با ابزار مدیریت بسته npm نصب کرده و یک فایل تایپ‌اسکریپت جدید بسازیم:

npm install -g typescript

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

نوع‌ها

اینک نوبت آن رسیده است که ببینیم تایپ‌اسکریپت چه نوع‌هایی را در اختیار ما قرار می‌دهد.

نوع عددی

همه اعداد در تایپ‌اسکریپت مقادیر اعشاری هستند. همه این مقادیر نوع عددی می‌گیرند و این وضعیت شامل مقادیر باینری و هگزادسیمال نیز می‌شود.

1
2
3
let num: number = 0.222;
let hex: number = 0xbeef;
let bin: number = 0b0010;

نوع رشته

تایپ‌اسکریپت مانند زبان‌های دیگر از نوع داده String برای ذخیره داده‌های متنی استفاده می‌کند.

1
let str: string = 'Hello World!';

شما در تایپ‌اسکریپت می‌توانید با قرار دادن رشته درون بک‌تیک () از رشته‌های چندخطی و همچنین عبارت‌های جاسازی‌شده (embed) استفاده کنید.

1
2
3
4
let multiStr: string = `A simple
multiline string!`
let expression = 'A new expression'
let expressionStr: string = `Expression str: ${ expression }`

نوع بولی

تایپ‌اسکریپت از اغلب انواع داده ابتدایی پشتیانی می‌کند که شامل مقادیر بولی نیز می‌شوند. این مقادیر تنها می‌توانند شامل دو مقدار درست و نادرست باشند.

1
2
let boolFalse: boolean = false;
let boolTrue: boolean = true;

انتساب نوع

اینک که با انواع داده ابتدایی آشنا شدیم، می‌توانیم به بررسی روش انتساب نوع‌ها در تایپ‌اسکریپت بپردازیم. بدین منظور اساساً کافی است که نوع متغیر را پس از نام آن و یک کاراکتر دونقطه (:) بنویسید.

نوع منفرد

در ادامه مثالی را مشاهده می‌کنید که نوع داده رشته‌ای را به یک متغیر انتساب می‌دهد:

1
let str: string = 'Hello World'

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

انواع چندگانه

با استفاده از عملگر (|) امکان انتساب چند نوع داده مختلف به متغیرها نیز وجود دارد:

1
2
let multitypeVar: string | number = 'String'
multitypeVar = 20

در این روش دو نوع را با استفاده از عملگر | به متغیر خود انتساب می‌دهیم. بدین ترتیب می‌توانیم در آن رشته و همچنین عدد ذخیره کنیم.

بررسی نوع‌ها

اکنون نوبت آن رسیده است که بررسی کنیم آیا متغیرهای ما نوع صحیحی دارند یا نه. ما چندین گزینه به این منظور داریم، اما تنها دو مورد از انواع پراستفاده یعنی Typeof و Instanceof را بررسی می‌کنیم.

Typeof

دستور Typeof تنها با انواع داده ابتدایی آشنایی دارد. این بدان معنی است که این دستور تنها می‌تواند متغیری را از یکی از انواع داده که در بخش قبل اشاره کردیم بررسی کند:

1
2
3
4
5
6
let str: string = 'Hello World!'
if(typeof str === number){
 console.log('Str is a number')
} else {
 console.log('Str is not a number')
}

در این مثال یک متغیر رشته‌ای ایجاد می‌کنیم و از دستور typeof استفاده می‌کنیم تا بررسی کنیم که آیا str از نوع عددی است یا نه (که همواره نادرست است). سپس عدد بودن یا نبودن آن را نمایش می‌دهیم.

Instanceof

عملگر Instanceof تقریباً همانند Typeof است و تنها تفاوت این است که می‌تواند انواع سفارشی را که از قبل از سوی جاوا اسکریپت تعریف نشده‌اند را نیز بررسی کند.

1
2
3
4
5
6
7
8
9
10
class Human{
 name: string;
 constructor(data: string) {
  this.name = data;
 }
}
let human = new Human('Gabriel')
if(human instanceof Human){
 console.log(`${human.name} is a human`)
}

در کد فوق یک نوع سفارشی داریم که در ادامه این مقاله آن را بیشتر بررسی خواهیم کرد. فعلاً یک وهله از آن می‌سازیم و سپس بررسی می‌کنیم که آیا واقعاً متغیری از نوع Human است یا نه و نتیجه را در کنسول نمایش می‌دهیم.

تأکید بر نوع

برخی اوقات لازم می‌شود که متغیرهای خود را به نوع‌های خاصی تبدیل کنیم. این موارد غالباً زمانی رخ می‌دهند که یک نوع عمومی مانند any انتساب داده باشیم و بخواهیم تابع‌هایی از نوع خاص استفاده کنیم. چندین گزینه برای حل این مشکل وجود دارد، اما در ادامه تنها دو مورد را بررسی می‌کنیم.

کلیدواژه as

با استفاده از کلیدواژه as پس از نام متغیر و سپس اشاره به نوع داده جدید می‌توان به سادگی، نوع یک متغیر را تغییر داد.

1
2
let str: any = 'I am a String'
let strLength = (str as string).length

عملگر <>

همچنین می‌توانیم از عملگر <> استفاده کنیم که دقیقاً همان تأثیر کلیدواژه as را با ساختاری متفاوت به دست می‌دهد.

1
2
let str: any = 'I am a String'
let strLength = (<string>str).length

این قطعه کد دقیقاً همان کارکرد قطعه کد قبلی را دارد. تنها ساختار آن متفاوت است.

آرایه‌ها

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

ایجاد آرایه‌ها

روش‌های مختلف ایجاد آرایه را در ادامه مشاهده می‌کنید.

با استفاده از []

می‌توان یک آرایه را با نوشتن نوع و سپس [] برای نمایش این که یک آرایه است ایجاد کرد.

1
let strings: string[] = ['Hello'، 'World'، '!']

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

با استفاده از نوع آرایه ژنریک

امکان تعریف یک آرایه با استفاده از نوع ژنریک به صورت نوشتن Array<Type> نیز وجود دارد:

1
let numbers: Array<number> = [1، 2، 3، 4، 5]

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

آرایه‌های چندگانه

به علاوه می‌توانیم انواع چندگانه‌ای را با استفاده از یک عملگر | به یک آرایه انتساب دهیم.

1
let stringsAndNumbers: (string | number)[] = ['Age'، 20]

در این مثال، یک آرایه ایجاد کرده‌ایم که می‌تواند مقادیر رشته‌ای و عددی را نگه‌داری کنید.

آرایه‌های چندبعدی

تایپ‌اسکریپت امکان تعریف آرایه چندبعدی را نیز می‌دهد و معنی آن این است که می‌توانیم یک آرایه را درون آرایه دیگر ذخیره کنیم. بدین ترتیب می‌توانیم آرایه چندبعدی را با استفاده از عملگرهای چندگانه [] پس از همدیگر تعریف کنیم.

1
let numbersArray: number[][] = [[1،2،3،4،5]، [6،7،8،9،10]]

در مثال فوق یک آرایه تعریف کرده‌ایم که آرایه عددی دیگری را نگهداری می‌کند.

چندتایی

چندتایی‌ها اساساً شبیه به آرایه هستند و تنها یک تفاوت کلیدی با آن دارند. تفاوت این است که می‌توان نوع داده‌ای که در هر موقعیت ذخیره خواهد شد را تعیین کرد و این بدان معنی است که با شمارش انواع مختلف درون براکت‌های مربعی، می‌توانیم انواعی برای اندیس‌ها تعیین کنیم.

1
let exampleTuple: [number، string] = [20، 'https://google.com'];

در مثال فوق یک چندتایی ساده ساخته‌ایم که در اندیس 0 عدد و در اندیس 1 رشته دارد. این بدان معنی است که اگر تلاش کنیم نوع داده متفاوتی در این اندیس قرار دهیم با خطایی مواجه خواهیم شد.

در ادامه مثالی از یک چندتایی نامعتبر را می‌بینید:

1
const exampleTuple: [string، number] = [20، 'https://google.com'];

Enum-ها

Enum-ها در تایپ‌اسکریپت شبیه به دیگر زبان‌های برنامه‌نویسی شیءگرا هستند و امکان تعریف کردن مجموعه‌ای از ثابت‌های دارای نام را به ما می‌دهند. تایپ‌اسکریپت هم Enum-های مبتنی بر عدد و هم مبتنی بر رشته دارد. Enum-ها در تایپ‌اسکریپت با استفاده از کلیدواژه enum تعریف می‌شوند.

عددی

ابتدا نگاهی به enum-های عددی خواهیم داشت که در آن مقدار یک کلید با یک اندیس تطبیق می‌یابد.

1
2
3
4
5
enum State{
 Playing = 0,
 Paused = 1,
 Stopped = 2
}

در کد فوق اقدام به تعریف یک enum عددی می‌کنیم که Playing با 0 مقداردهی می‌شود، مقدار Paused برابر با 1 و همین طور تا آخر است.

1
2
3
4
5
enum State{
 Playing,
 Paused,
 Stopped
}

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

رشته

تعریف کردن یک enum رشته‌ای در تایپ‌اسکریپت کار آسانی است و کافی است مقادیر را با رشته‌ها مقداردهی کنیم.

1
2
3
4
5
enum State{
 Playing = 'PLAYING',
 Paused = 'PAUSED',
 Stopped = 'STOPPED'
}

در کد فوق یک enum رشته‌ای را با مقداردهی States به وسیله رشته‌ها تعریف کرده‌ایم.

شییءها

منظور از شیء در جاوا اسکریپت وهله‌ای است که شامل مجموعه‌ای از جفت‌های کلید-مقدار است. این مقادیر می‌توانند متغیر، آرایه یا حتی تابع باشند. همچنین آن را می‌توان به صورت نوع داده‌ای تصور کرد که انواع غیر مقدماتی را نمایش می‌دهد.

با استفاده از آکولاد می‌توان شیء ایجاد کرد:

1
2
3
4
5
const human = {
 firstName: 'Frank',
 age: 32,
 height: 185
};

در کد فوق یک شیء human ساخته‌ایم که سه جفت مختلف کلید-مقدار دارد. همچنین می‌توانیم تابع‌هایی را به شیء خود اضافه کنیم:

1
2
3
4
5
6
7
8
const human = {
 firstName: 'Frank',
 age: 32,
 height: 185,
 greet: function(){
  console.log("Greetings stranger!")
 }
};

انواع سفارشی

تایپ‌اسکریپت امکان تعریف انواع سفارشی را نیز فراهم ساخته است که «اسم مستعار» (alias) نام دارد و می‌توان در ادامه به سهولت از آن‌ها استفاده مجدد کرد. برای ایجاد نوع سفارشی کافی است از کلیدواژه type استفاده کرده و نوع مورد نظر خود را تعریف کنیم.

1
type Human = {firstName: string، age: number، height: number}

در این مثال، به تعریف یک نوع سفارشی با نام Human و مشخصات مورد نظر می‌پردازیم. اینک نگاهی به روشی ایجاد یک شیء با این نوع خواهیم داشت:

1
firstName const human: Human = {firstName: ‘Franz’، age: 32، height: 185}

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

پارامترهای تابع و نوع‌های بازگشتی

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

1
2
3
4
5
6
function printState(state: State): void {
 console.log(`The song state is ${state}`)
}
function add(num1: number, num2: number): number {
 return num1 + num2
}

در کد فوق دو تابع نمونه داریم که هر دو پارامترهایی با انواع تعریف شده دارند. همچنین می‌بینیم که نوع بازگشتی پس از بستن پرانتزها تعریف شده است.

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

1
2
3
add(2, 5)
add(1) // Error to few parameters
add(5, '2') // Error the second argument must be type number

مشخصه‌های اختیاری

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

1
2
3
4
5
function printName(firstName: string, lastName?: string) {
if (lastName) 
 console.log(`Firstname: ${firstName}, Lastname: ${lastName}`);
else console.log(`Firstname: ${firstName}`);
}

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

1
2
printName('Gabriel', 'Tanner')
printName('Gabriel')

این بدان معنی است که هر دو این حالت‌ها صحیح تلقی می‌شوند.

مقادیر پیش‌فرض

متد دومی که می‌توانیم برای ایجاد یک مشخصه اختیاری استفاده کنیم از طریق انتساب آن به یک مقدار پیش‌فرض است. این کار از طریق انتساب دادن مقدار مستقیماً به عنوان یک تابع میسر خواهد بود.

1
2
3
function printName(firstName: string, lastName: string = 'Tanner') {
 console.log(`Firstname: ${firstName}, Lastname: ${lastName}`);
}

در این مثال، ما یک مقدار پیش‌فرض را به lastName انتساب داده‌ایم. معنی آن این است که نمی‌خواهیم آن را در هر بار فراخوانی تابع ارائه کنیم.

اینترفیس‌ها

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

در ادامه نگاهی به مثالی از ساخت این گزاره‌ها خواهیم داشت تا مسائل کمی روشن‌تر شوند:

1
2
3
4
5
interface Person{
 name: string
}
const person: Person = {name: 'Gabriel'}
const person2: Person = {names: 'Gabriel'} // is not assignable to type Person

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

مشخصه‌های اختیاری

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

1
2
3
4
5
6
interface Person{
 name: string
 age?: number
}
const person: Person = {name: 'Frank', age: 28}
const person2: Person = {name: 'Gabriel'}

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

مشخصه‌های فقط-خواندنی

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

1
2
3
4
5
6
7
interface Person{
 name: string
 readonly id: number
 age?: number
}
const person: Person = {name: 'Gabriel', id: 3127831827}
person.id = 200 // Cannot assign to id because it is readonly

در این مثال، مشخصه id فقط-خواندنی است و نمی‌توان آن را پس از ایجاد شیء تغییر داد.

Barrels

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

1
2
3
export * from './person';
export * from './animal';
export * from './human';

پس از انجام این کار می‌توانیم همه این ماژول‌ها را با استفاده از یک گزاره منفرد import، در پروژه ایمپورت کنیم.

1
import { Person، Animal، Human } from 'index';

ژنریک‌ها

ژنریک‌ها امکان ایجاد کامپوننت‌هایی را می‌دهند که با طیف گسترده‌ای از نوع‌ها منطبق هستند و اختصاص به یک نوع ندارند. بدین ترتیب کامپوننت ما open می‌شود و قابلیت استفاده مجدد پیدا می‌کند. اینک ممکن است کنجکاو شوید که چرا مستقیماً از یک نوع استفاده نمی‌کنیم که چند نوع منفرد برای کامپوننت ما ارائه کند. در ادامه به بررسی یک مثال می‌پردازیم تا این موقعیت را بهتر درک کنیم. ما می‌خواهیم یک تابع ساختگی ساده داشته باشیم که پارامتری که به آن تجزیه می‌شود را بازگشت دهد.

1
2
3
function dummyFun(arg: any): any {
 return arg;
}

با این که any یک ژنریک است و هر نوعی که برای آرگومان ارسال شود قبول می‌کند، اما یک تفاوت بزرگ وجود دارد. در این روش ما اطلاعات نوع داده ارسالی و نوع بازگشتی تابع را از دست می‌دهیم. بنابراین در ادامه به بررسی روش پذیرش همه انواع و در عین حال حفظ اطلاعات در مورد نوع بازگشتی می‌پردازیم.

1
2
3
function dummyFun<T>(arg: T): T {
 return arg
}

در کد فوق از یک پارامتر ژنریک T استفاده کرده‌ایم و از این رو می‌توانیم نوع متغیر را دریافت کرده و آن را در ادامه استفاده کنیم. همچنین می‌توانیم از آن به عنوان پارامتر بازگشتی خود استفاده کنیم که به ما امکان می‌دهد نوع متناظر را در زمان بازبینی کد ببینیم.

مادیفایرهای دسترسی

مادیفایرهای دسترسی به کنترل دسترس‌پذیری اعضای کلاس می‌پردازند. تایپ‌اسکریپت از سه نوع مادیفایر دسترسی به صورت public ،private و protected پشتیبانی می‌کند.

Public: اعضای عمومی یا Public بدون هیچ محدودیتی در همه جا در دسترس هستند. این مادیفایر یک مادیفایر استاندارد محسوب می‌شود، یعنی لازم نیست در زمان تعریف متغیرهای عمومی از کلیدواژه Public استفاده کنید.

Private: اعضای خصوصی تنها از درون کلاسی که در آن تعریف شده‌اند قابل دسترسی هستند.

Protected: اعضای حفاظت شده می‌توانند تنها از درون کلاسی که در آن تعریف شده‌اند و همچنین کلاس‌های فرعی و فرزند آن مورد دسترسی قرار گیرند.

TSLINT

TSLINT یک linter استاندارد برای تایپ‌اسکریپت است و به نوشتن کدهای تمیز، قابل نگهداری و خوانا کمک می‌کند. آن را می‌توانیم با قواعد lint، پیکربندی و قالب‌بندی‌های خاص که خودمان می‌نویسیم به صورت سفارشی درآوریم.

نصب TSLINT

ابتدا باید تایپ‌اسکریپت و tslint را نصب کنیم و این کار به صورت محلی یا سراسری ممکن است:

npm install tslint typescript --save-dev

npm install tslint typescript –g

پس از آن می‌توانیم از TSLINT CLI برای مقداردهی اولیه TSLINT در پروژه خود استفاده کنیم:

tslint –init

اینک که فایل tslint.json خود را ساختیم، می‌توانیم شروع به پیکربندی قواعد خاص خود بکنیم.

پیکربندی TSLINT

TSLINT امکان پیکربندی قواعد خاص و سفارشی روش نمایش کد را به ما می‌دهد. به صورت پیش‌فرض فایل tslint.json مانند زیر است و تنها قواعد پیش‌فرض در آن قرار دارند:

1
2
3
4
5
6
7
8
9
{
"defaultSeverity": "error",
"extends": [
 "tslint:recommended"
],
"jsRules": {},
"rules": {},
"rulesDirectory": []
}

ما می‌توانیم قواعد خود را با قرار دادن در شیء rules تعریف کنیم:

1
2
3
4
5
6
7
"rules": {
 "no-unnecessary-type-assertion": true,
 "array-type": [true, "array"],
 "no-double-space": true,
 "no-var-keyword": true,
 "semicolon": [true, "always", "ignore-bound-class-methods"]
},

برای کسب اطلاعات بیشتر در مورد قواعد موجود می‌توانید نگاهی به مستندات رسمی (+) آن بیندازید.

سخن پایانی

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

منبع: فرادرس

مشاوره چهارشنبه 9 مرداد 1398 ساعت 14:46

0 نظر

332
1
...
31
32
صفحه 33
34
35
...
67

طراحی سایت و برنامه نویسی

ابر برجسب

جدیدترین یادداشت‌ها

بایگانی

جستجو

آموزش Node.js: راهنمای package.json — بخش چهارم

ساختار فایل

مثالی از ساختار فایل package.json

تحلیل مشخصه‌ها

name

author

contributors

bugs

Homepage

version

license

keywords

description

repository

main

private

scripts

dependencies

devDependencies

Engines

browserslist

مشخصه‌های خاص دستور

نسخه‌های پکیج

فایل package-lock.json

چرا به آن نیاز داریم؟

مثال

جداول در HTML — راهنمای جامع

جدول چیست؟

طرز کار جدول چگونه است؟

داده‌های سیارات منظومه شمسی

استایل‌دهی به جدول

فایل HTML

فایل CSS

چه هنگام نباید از جداول HTML استفاده کنیم؟

مثال: ایجاد نخستین جدول

فایل blank-template.html

فایل minimal-table.css

افزودن Header با عناصر <th>

مثال: هدرهای جدول

فایل dogs-table.html

فایل minimal-table.css

چرا هدرها مفید هستند؟

گسترش سلول‌ها به چند ردیف یا ستون

فایل animals-table.html

فایل minimal-table.css

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

مثال: colgroup و col

سخن پایانی

آموزش ساخت یک اپلیکیشن آیفون (بخش ششم) — به زبان ساده

دانلود تصاویر

افزودن کاتالوگ فایل‌ها

بررسی کاتالوگ Assets

وضوح‌های مختلف تصویر

تصویر آیتم نوار برگه‌ای

تصاویر سلول نمای جدولی

اجرای اپلیکیشن

کامیت کردن تغییرها

جمع‌بندی

روش رانگ کوتا مرتبه چهارم (RK4) — از صفر تا صد

راهنمای جامع تایپ اسکریپت (Typescript) — از صفر تا صد

Typescript چه اهمیتی دارد؟

چه هنگام باید از Typescript استفاده کنیم؟

راه‌اندازی Typescript

نوع‌ها

نوع عددی

نوع رشته

نوع بولی

انتساب نوع

نوع منفرد

انواع چندگانه

بررسی نوع‌ها

Typeof

Instanceof

تأکید بر نوع

کلیدواژه as