تقلب نامه (Cheat Sheet) دستورهای SQL — راهنمای کاربردی

تقلب نامه (Cheat Sheet)، متنی کوتاه اما جامع پیرامون یک موضوع مشخص است. هدف اصلی ارائه تقلب‌نامه، انتقال مفاهیمِ مرتبط با یک موضوع به صورت کامل و ساده، در کمترین زمان ممکن است. با استفاده از تقلب‌نامه، می‌توان چکیده مفاهیم بیان شده در کلاس‌های درس، ویدئوها و کتاب‌های آموزشی را در مدت زمان بسیار اندکی فرا گرفت. از تقلب‌نامه‌های زبان‌های برنامه‌نویسی و ابزارها و دستورهای خط فرمان، می‌توان برای آگاهی از دستورات مورد نیاز برای انجام امور گوناگون استفاده کرد. شایان توجه است که چنین تقلب‌نامه‌هایی، حجم زیادی از اطلاعات مفید و مهم را به صورت یکجا و یکپارچه در بر می‌گیرند. با توجه به اهمیت بیان شده، وبلاگ فرادرس اقدام به انتشار تقلب‌نامه‌هایی در حوزه‌های گوناگون از جمله پایگاه داده و به طور خاص، «زبان ساختارمند پرسش‌ها» (Structured Query Language | SQL) یا همان اس کیو ال (سی‌کوال) کرده است. به منظور دسترسی به کلیه تقلب‌نامه‌های منتشر شده در وبلاگ فرادرس، می‌توانید از این لینک استفاده کنید. نوشته حاضر در برگیرنده تقلب‌نامه دستورهای SQL است.

تقلب‌نامه دستورهای SQL

«پایگاه داده» (Data Base)، مجموعه‌ای سازمان یافته و ساختار یافته از داده‌ها است. دسترسی به اطلاعات موجود در پایگاه داده، معمولا به وسیله «سیستم‌های مدیریت پایگاه داده» (Data Base Management Systems | DBMS) انجام می‌شود. از «زبان ساختارمند پرسش‌ها» (Structured Query Language | SQL) یا همان اس‌کیوال (سی‌کوال) که یک زبان سطح بالا است، برای انجام عملیات روی پایگاه داده‌های رابطه‌ای استفاده می‌شود. در این تقلب‌نامه، به مفاهیم کلیدی و دستورهای SQL همراه با ارائه مثال‌هایی، پرداخته شده است. برخی از محورهای مورد بررسی در تقلب‌نامه دستورهای SQL، در ادمه آمده‌اند.

• مبانی SQL
• تعاریف پایگاه داده
• انتخاب (Select) داده از جدول پایگاه داده
• به روز رسانی (Update) داده‌های جدول
• روش گروه‌بندی (Group) داده‌ها و استفاده از تجمیع (Aggregates)
• روش انتخاب از بیش از یک جدول
• دسته‌های مختلف دستورات SQL
• روش درج (Insert) داده در جدول
• روش حذف (Delete) داده از یک جدول
• روش مرتب‌سازی (Order) داده‌های جدول
• استفاده از علمگر UNION
• ساخت جدول

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

دانلود تقلب‌نامه (+ کلیک کنید)

اگر نوشته بالا برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های پایگاه داده
• منبع: فرادرس
• 
  
• 
  

آموزش 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 <[e-mail]> (https://flaviocopes.com)" }

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

1 2 3 4 5 6 7

{   "author": {     "name": "Flavio Copes",     "email": "[e-mail]",     "url": "https://flaviocopes.com"   } }

contributors

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

1 2 3 4 5

{   "contributors": [     "Flavio Copes <[e-mail]> (https://flaviocopes.com)"   ] }

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

1 2 3 4 5 6 7 8 9

{   "contributors": [     {       "name": "Flavio Copes",       "email": "[e-mail]",       "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 صحبت خواهیم کرد.

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

• آموزش Node.js: آشنایی با npm و npx — بخش پنجم
• منبع: فرادرس
• 
  

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

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

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

جدول چیست؟

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

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

به همین دلیل جای شگفتی نیست که خالقان زبان 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> باشد. بدین ترتیب جدولی مانند زیر ایجاد می‌شود:

افزودن 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>

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

ما باید راهی بیابیم که عبارت‌های 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 در دو ردیف گسترش یابند. فایل را ذخیره کرده و در مرورگر باز کنید تا شاهد بهبود اتفاق افتاده باشید.

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

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

آخرین ویژگی جدول‌ها که در این مقاله بررسی خواهیم کرد، روشی برای تعریف اطلاع استایل‌دهی کل ستون داده‌ها است. این کار با استفاده از عناصر <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>

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

   background-color:#DCC48E; border:4px solid #C1437A

8. دو روز آخر هفته تعطیل هستند و از این رو به آن‌ها هیچ رنگ پس‌زمینه ندهید و فقط عرض آن‌ها را با تعریف خصوصیت 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 صحبت خواهیم کرد. همچنین در مورد راه‌های افزایش دسترس‌پذیری برای افراد دچار نقص بینایی توضیح خواهیم داد. برای مشاهده بخش بعدی این سری مطالب به لینک زیر مراجعه کنید:

منبع: فرادرس

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• icon block.png
• icon [e-mail]
• icon [e-mail]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. گزینه Commit Changes را از منوی Source Control انتخاب کنید.
2. یک توضیح مانند زیر برای کامیت وارد کنید:

   Added image assets for cells and tab bar items.

3. روی دکمه Commit کلیک کنید.

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

جمع‌بندی

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

منبعک فرادرس

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