طراحی سایت و برنامه نویسی
آموزش طراحی سایت و برنامه نویسیطراحی سایت و برنامه نویسی
آموزش طراحی سایت و برنامه نویسیگزاره switch..case در ++C — راهنمای کاربردی
در بخشهای قبلی (+) این سری مقالات آموزش زبان برنامهنویسی ++C با گزاره if..else..if آشنا شدیم که امکان اجرای یک قطعه کد را در میان گزینههای مختلف فراهم میسازد. با این حال اگر قصد دارید مقدار یک متغیر منفرد را با استفاده از گزارههای متوالی if..else..if بررسی کنید، بهتر است به جای آن از گزاره switch..case استفاده کنید. برای مطالعه بخش قبلی این سری ملاقات آموزشی زبان برنامهنویسی ++C به لینک زیر مراجعه کنید:
گزاره switch اگر نه همیشه، دستکم در اغلب موارد سریعتر از گزاره if…else است. ضمناً ساختار گزاره سوئیچ سادهتر و درک آن آسانتر است.
ساختار گزاره switch…case در زبان ++C
در شبه کد فوق تصور کنید مقدار n برابر با constant2 باشد. کامپایلر بلوک کدی را اجرا خواهد کرد با گزاره case مرتبط هستند تا این که به انتهای بلوک سوئیچ برسد یا با گزاره break مواجه شود. گزاره break برای جلوگیری از اجرای کد در case بعدی استفاده میشود.
فلوچارت گزاره switch
شکل فوق نشان میدهد که گزاره switch چگونه کار میکند و شرایط مختلف چگونه درون بند case سوئیچ بررسی میشوند.
مثالی از گزاره switch در ++C
Enter an operator (+, -, *, /): + - Enter two operands: 2.3 4.5 2.3 - 4.5 = -2.2
عملگر (-) که از سوی کاربر وارد میشود در متغیر 0 ذخیره میشود. دو عملوند 2.3 و 4.5 به ترتیب در متغیرهای num1 و num2 ذخیره میشوند. سپس کنترل برنامه به دستور زیر میرسد:
cout << num1 << " - " << num2 << " = " << num1-num2;
در نهایت گزاره break موجب اتمام گزاره switch میشود. اگر گزاره break استفاده نشود، همه case-های بعد از حالت صحیح نیز اجرا خواهند شد. برای مشاهده بخش بعدی این مطلب به لینک زیر رجوع کنید:
اگر این مطلب برای شما مفید بوده است، آموزشهای زیر نیز به شما پیشنهاد میشوند:
آموزش ساخت یک اپلیکیشن آیفون (بخش هفتم) — به زبان ساده
در بخشهای قبلی این سری مقالات از طرحبندیهای پیشفرض Xcode برای صحنهها و سلولها استفاده کردیم. در انتهای بخش ششم (+) همه تصاویر و متنهای نمونه اپلیکیشن خود را به آن وارد کرده و آنها را دیدیم، اما طرحبندی سلولها هنوز در لیستهای News ،Products و Chat همگی مشابه هم هستند. برای مطالعه بخش قبلی این مقاله به لینک زیر مراجعه کنید:
در بخش حاضر از سری مقالات آموزش ساخت اپلیکیشن آیفون که بخش هفتم است، شروع به ایجاد نوعی طرحبندیهای سفارشی در اپلیکیشن خودمان میکنیم. یکی از مهمترین جنبهها و مزیتهای ایجاد طرحبندی به روش نیتیو (به جای استفاده از ابزارهای پروتو تایپسازی) این است که میتوان از ابزارهای واقعی تعیین حدود طرحبندی که iOS از طریق Xcode ارائه میکند، استفاده کرد. گفتنی است که در این راهنما، قصد داریم جزییات زیادی را در این خصوص بررسی کنیم.
سلول نمای جدولی News
سلولهای نماهای ما که با استفاده از سبک subtitle در Xcode طراحی شدهاند در حال حاضر به صورت زیر هستند:
هر سلول شامل یک نمای فرعی از نمای تصویر و دو برچسب است که مانند بلوکهای لِگو روی صفحه مبنای سلول قرار گرفتهاند.
ما میخواهیم در نهایت در انتهای این مقاله سلولهای اپلیکیشن ظاهری مانند تصویر زیر داشته باشند:
چنان که میبینید در طرحبندی مطلوب متن جزییات/عنوان فرعی به جای این که کنار تصویر نخست ظاهر شود، زیر آن قرار میگیرد. یک برچسب متنی سوم هم وجود دارد که تاریخ را نشان میدهد. دستکم یک برچسب متنی امکان شکستن به چند خط را خواهد داشت. فونتها استایلهای متفاوتی را نمایش میدهند. ارتفاع سلول بر مبنای محتوای آن افزایش مییابد. یک تصویر جزییات دوم نیز وجود دارد که زیر محتوای دیگر قرار میگیرد.
برای رسیدن به این وضعیت باید طرحبندی سفارشی خودمان را داشته باشیم که شامل نماهای فرعی دیگری است.
ایجاد یک فایل Xib
چند روش برای ایجاد این طرحبندی سلولی سفارشی وجود دارد. در این راهنما یک فایل جداگانه ایجاد میکنیم که صرفاً شامل این طرحبندی سلولی است و بدین ترتیب قادر خواهیم بود از آن به عنوان یک سلول در هر نمای جدولی استفاده کنیم. روی پوشه گروهی زردرنگ Social راست-کلیک یا کنترل-کلیک کنید. در منوی بازشدنی که ظاهر میشود گزینه New File را انتخاب کنید.
گزینه iOS و Cocoa Touch Class را انتخاب کرده و روی Next کلیک کنید.
در منوی بازشدنی Subclass of، گزینه UITableViewCell را انتخاب کنید. برای Class مقدار UITableViewCell را وارد کنید. گزینه Also create XIB file را انتخاب کنید و زبان را نیز روی Swift قرار دهید.
زمانی که فرم به طرز صحیحی تکمیل شد، روی دکمه Next کلیک کنید. کادر محاورهای Save به صورت پیشفرض به موقعیت فایلهای پروژه اشاره میکند.
روی دکمه Create کلیک کنید. در این زمان دو فایل جدید میبینید که به پروژه اضافه شدهاند.
NewsTableViewCell.swift کد فایل است. ما فعلاً نیازی برای پرداختن به آن نداریم. فایل NewsTableViewCell.xib شامل طرحبندی سلول سفارشی ما است.
XIB را میتوان اختصاری برای عبارت «سازنده اینترفیس ایکس کد» (Xcode Interface Builder) دانست. هر فایل xib به طور معمول شامل یک نمای منفرد است. شما میتوانید طرحبندی و خصوصیتهای آن را با استفاده از ابزارهای سازنده اینترفیس سفارشیسازی کنید و روش آن مشابه اصلاح صحنهای در یک استوریبورد است که قبلاً مشاهده کردهایم. زمانی که Xcode یک پروژه را ایجاد میکند، هر فایل xib را کامپایل میکند تا یک فایل nib بسازد. البته واژههای xib و nib غالباً به جای هم استفاده میشوند.
افزودن یک نمای تصویر
یک بار روی فایل NewsTableViewCell.xib کلیک کنید. در این زمان یک سلول نمای جدولی خالی را مشاهده میکنید.
لبه پایینی سلول را به سمت پایین بکشید. تا Xcode در زمان درگ کردن اندازههای آن را نمایش دهد. ارتفاع آن را حدوداً 170 پوینت تنظیم کنید. نیازی نیست این عدد دقیق باشد، چون ما صرفاً میخواهیم فضایی برای افزودن محتوای جدید ایجاد کنیم.
روی دکمه Library در نوار ابزار کلیک کنید. مقدار Image را در فیلد جستجو وارد کنید.
Image View را از لیست به سلول خالی درگ کنید تا تقریباً در مرکز آن قرار گیرد.
همان طور که توضیح موجود در Object Library اشاره کرده است، یک نمای تصویر برای نمایش تصاویر استفاده میشود. برای این که بتوانیم تصویر را در طرحبندی خود با سهولت ببینیم، یک placeholder برای آن ایجاد میکنیم.
ابتدا نمای تصویر فوق را انتخاب کنید. سپس در پنل Attributes Inspector مقدار Image را برابر با placeholder قرار دهید. ما میخواهیم ابعاد طول و عرض تصویر حفظ شود و درون نمای تصویر جای بگیرد. بنابراین مقدار Content Mode را به صورت Aspect Fit تنظیم میکنیم.
دستگیره پایین-راست نمای تصویر را میکشیم تا ابعاد آن تا حدود 44 در 44 پوینت کاهش یابد.
افزودن برچسب
روی دکمه Library کلیک کرده و عبارت label را در فیلد جستجو وارد کنید.
Label را از سوی لیست Object Library به روی سلول و سمت راست نمای تصویر بکشید.
این فرایند را برای افزودن برچسب دوم به سلول و درست زیر برچسب اول تکرار کنید.
نماهای پشتهای
در این بخش برخی قواعد طرحبندی را به اپلیکیشن خود اضافه میکنیم. کار خود را با جاسازی دو برچسب در یک «نمای پشتهای» (stack view) آغاز میکنیم. نمای پشتهای محتوای خود را به صورت همراستا در یک ردیف افقی یا عمودی نگه میدارد.
روی یکی از برچسبها کلیک کنید. برچسب دوم را نیز با Shift+Click انتخاب کنید. زمانی که هر دو برچسب انتخاب شدند، روی دکمه Embed In در انتهای بوم کلیک کرده و گزینه Stack View را از منوی بازشدنی انتخاب کنید.
Xcode بنا بر اطلاعات مفروض قبلی حدسهایی در مورد مقصد مطلوب شما درون نمای پشتهای میزند. این حدسها مبتنی بر موقعیت نسبی دو برچسب هستند.
زمانی که نمای پشتهای ایجاد شده همچنان در حالت انتخاب قرار دارد، بررسی کنید که خصوصیتها با مواردی که در تصویر زیر مشاهده میکنید، مطابقت داشته باشند و در صورت نیاز تغییرات لازم را وارد کنید.
ما دو برچسب داریم که مانند لگو روی هم دیگر پشته شدهاند.
سپس نمای پشتهای دارای دو برچسب را با نمای تصویر در یک نمای پشتهای افقی ترکیب میکنیم.
در حالی که نمای پشتهای برچسبها در حالت انتخاب قرار دارد، روی نمای تصویر Shift+Click کنید. روی دکمه Embed In کلیک کرده و مجدداً گزینه Stack View را انتخاب کنید.
این بار Xcode باید نتیجهگیری کند که میخواهید یک نمای پشتهای افقی بسازید. بنابراین، هر خصوصیت مورد نیاز را ویرایش کنید تا با این تنظیمات مطابقت داشته باشند. توجه داشته باشید که باید مقدار Spacing را به صورت Standard تنظیم کنید. هر عددی که در فیلد متن ظاهر میشود را حذف کنید. همچنین میتوانید Use Standard Value را از منوی بازشدنی انتخاب کنید.
اندازه محتوای ذاتی
احتمالاً متوجه شدهاید که وقتی این نمای تصویر را در یک نمای پشتهای جاسازی میکنیم، اندازه نمای تصویر تغییر مییابد. به صورت پیشفرض یک نمای پشتهای تلاش میکند تا اشیای نمایی که در آن قرار دارند تا حدی که محتوایشان ایجاب میکند بزرگتر شوند. این وضعیت به نام «اندازه محتوای ذاتی» (intrinsic content size) شناخته میشود. در این حال میتوان دید که نماهای پشتهای فضای کافی برای هر برچسب فراهم میسازند تا محتوای متنی خود را نمایش دهد.
تصویر placeholder نمای تصویر کنونی اندازهای برابر با 64 در 64 پوینت دارد. بنابراین اگر چه کرانهای نمای تصویر را قبلاً تا حدود 44 در 44 پوینت کشیدهایم، اما نمای پشتهای امکان رشد تا اندازه محتوای ذاتی را به ما میدهد.
محدودیت عرض و ارتفاع
مقصود ما این است که این طرحبندی سلولی برای آیتمهای news مختلفی مورد استفاده قرار گیرد که هر یک تصاویر متفاوتی در نمای تصویر خواهند داشت. آن تصاویر میتوانند ابعاد کاملاً گوناگونی داشته باشند.
اگر این طرحبندی را چنان که هست دستنخورده باقی بگذاریم، هر سلول نمای تصویر را در اندازه متفاوتی نمایش میدهد و این حالت ظاهر مطلوبی ندارد. ما میخواهیم این نمای تصویر صرفنظر از اندازه فایل تصویری که در آن بارگذاری میشود، همواره مقید به اندازه 44 در 44 باشد. از آنجا که قبلاً مقدار content mode را برای این نمای تصویر به صورت aspect fit تعیین کردهایم، باید مطمئن شویم که وقتی اندازه نمای تصویر محدود میشود، نمای تصویر، عملاً اندازه تصویر درون خود را تغییر میدهد تا ابعاد تصویر حفظ شود.
یک بار روی نمای تصویر کلیک کنید تا انتخاب شود. زیر بخش انتهای بوم روی دکمه Add New Constraints کلیک کنید.
کادر بازشونده Add New Constraints حدود لبهها را نمایش میدهد. البته ما برای یک شیء که درون نمای پشتهای قرار دارد، عموماً این مقادیر را تنظیم نمیکنیم. این کادر همچنین مقادیر width و height را نیز نشان میدهد.
مقدار 44 را درون فیلدهای width و height وارد کنید. سپس روی دکمه Add 2 Constraints در انتها کلیک کنید. Xcode حدود جدید را هر زمان که نمای تصویر انتخاب شود با خطوط آبی نمایش میدهد.
از آنجا که ارتفاع نمای تصویر کاهش یافته است، اندازه نمای پشتهای متناظر نیز کاهش یافته است.
Size Inspector
در پنل Inspector در سمت راست IDE در کنار آیکون attributes inspector یک آیکون خط کش وجود دارد که متعلق به بخش «بازبینی اندازه» (Size Inspector) است، روی آن کلیک کنید.
بخش نمای View فوقانی عرض و ارتفاع کنونی نمای تصویر انتخابی را نشان میدهد. این موارد قابل ویرایش نیستند، چون از روی «حدود» (Constraints) تعیین میشوند. در بخش زیرین به بخش Constraints نگاه میکنیم.
این بخشِ Constraints دو حد را نمایش میدهد که به تازگی اضافه شدند: Width Equals: 44 و Height Equals: 44.
افزودن برچسب دیگر
سپس همه آن چیزی را که تا به این جا داریم، همراه با یک برچسب جدید به صورت عمودی پشتهسازی میکنیم.
روی دکمه Library کلیک کنید و label دیگری درست زیر نمای تصویر به سلول اضافه کنید. Xcode راهنماهای آبیرنگی جهت کمک به همراستا کردن و فاصلهبندی بین اشیا نمایش میدهد.
روی نمای پشتهای افقی موجود یا هر چیزی درون آن Shift+Click کنید به طوری که نمای پشتهای و برچسب جدید زیر آن انتخاب شوند. روی دکمه Embed In کلیک کرده و گزینه Stack View را مجدداً انتخاب کنید.
بررسی کنید که خصوصیتهای نمای پشتهای جدید با آن چه در تصویر زیر میبینید مطابقت داشته باشند:
افزودن یک نمای پشتهای موجود
تا به اینجا نماهای موجود (یک نمای تصویر و برچسبها) را در نماهای پشتهای جدیدی جاسازی کردهایم. همچنین میتوانیم نماهای جدید را مستقیماً درون یک نمای پشتهای موجود درگ کنیم.
طراحی ما نیازمند تصویر دومی نیز هست. این تصویر مستقیماً زیر برچسب سوم که اضافه کردهایم قرار میگیرد:
روی دکمه Library کلیک کنید. یک Image View جدید درون سلول بکشید و مستقیماً زیر برچسب انتهایی قرار دهید. قبل از رها کردن ماوس مطمئن شوید که درون نمای پشتهای قرار دارد.
ایجاد امکان افزایش اندازه تصویر
توجه داشته باشید که نمای تصویر جدید به رنگ قرمز در آمده است و نشان میدهد که یک خطای طرحبندی وجود دارد، چون نمیتواند ارتفاع این نمای تصویر را تشخیص دهد.
نمای تصویر هنوز تصویری ندارد (که اندازه محتوای ذاتی داشته باشد). همچنین حدود عرض و ارتفاع صریحی هم ندارد. در این حالت، میخواهیم این تصویر به اندازه محتوای تصویر رشد یابد. بنابراین اجازه خواهیم داد که عرض آن به اندازه لبه سلول و همچنین ارتفاع آن تا حدی که لازم است افزایش پیدا کند تا محتوا بتواند نمایش بیابد. همچنین باید حالت محتوا را روی حفظ ابعاد تصویر قرار دهیم، اما طوری که کل فضای نمای تصویر را اشغال کند.
در حالی که نمای تصویر انتهایی انتخاب شده است در پنل Attributes Inspector مقدار Image را برابر با placeholder و مقدار Content Mode را برابر با Aspect Fill تنظیم کنید.
محدودسازی به لبهها
تا به اینجا سه پشتهی تودرتو داریم که وظیفه طرحبندی نمای فرعی درون نمای سلول را بر عهده دارند. ما هنوز هیچ قیودی روی چگونگی محدودسازی نمای پشته بیرونی از سوی کرانهای سلول تعیین نکردهایم. نمای پشتهای به همراه برچسبها و تصاویر درون آن میتوانند به سادگی از لبههای سلول بزرگتر شوند و از آن عبور کنند که باعث برش یافتن محتوا میشود. به جای آن باید به نمای پشتهای اعلام کنیم که در حدود لبههای سلول باقی بماند.
یک بار روی هر کجای نمای پشته بیرونی در فضای سفید کلیک کنید. برای مثال میتوانید روی سمت راست نمای تصویر انتهایی کلیک کنید. همچنین میتوانید نمای پشته بیرونی را از بخش document outline (پنلی که در سمت بوم قرار دارد) انتخاب کنید. در این حالت میبینید که یک خط بیرونی آبیرنگ پیرامون آن ایجاد میشود.
روی دکمه Add New Constraints زیر بوم کلیک کنید. در کادر بازشدنی گزینه Constrain to margins را انتخاب کرده و مقدار 0 را برای هر چهار لبه وارد کنید.
روی دکمه Add 4 Constraints کلیک کنید. چنان که میبینید Xcode نمای پشتهای را بزرگ میکند تا سلول را تا لبههایش پر کنند.
همراستا کردن نمای پشتهای
تصویر انتهایی هنوز آن چه را میخواهیم به طور کامل اجرا نمیکند. برای رسیدن به هدف، این تصویر باید عرض سلول را (تا لبهها) پر کند. چنان که میبینید نمای پشتهای بیرونی در حال حاضر طوری تنظیم شده که محتوای خود را با لبه Leading همراستا کند.
در حالی که نمای پشته بیرونی انتخاب شده است، در Attributes Inspector مقدار Alignment را از Leading به Fill تغییر دهید.
برش کرانها
چنان که میبینید این تکنیک جواب میدهد و نمای تصویر اینک عرض نمای پشتهای را پر میکند. با این حال، تصویر از نظر عمودی از کرانهای مستطیل نمای تصویر خود بیرون میزند. ما باید به نمای تصویر بگوییم که تصویر را بر اساس کرانهایش برش دهد.
به این منظور یک بار روی نمای تصویر انتهایی زیر برچسب انتهای کلیک کنید. توجه کنید که دستگیرههای لبه نمای تصویر در ناحیه مستطیلی مورد نظر هستند، گرچه تصویر درون آن از کرانهای نمای تصویر گذر کرده است.
در حالی که نمای تصویر همچنان در حالت انتخاب است، به پنل Attributes Inspector در ادامه بخش View نگاه کنید. کادر Clip to Bounds را انتخاب کنید.
کامیت کردن تغییرها
همان طور که در بخشهای قبلی انجام دادیم، در انتهای کار باید تغییرهایی را که در پروژه ایجاد کردهایم کامیت کنیم. مراحل کار به صورت زیر است:
- گزینه Commit Changes را از منوی Source Control انتخاب کنید.
- یک توضیح مانند: Created NewsTableViewCell with custom layout، را وارد کنید.
- روی دکمه Commit کلیک کنید.
جمعبندی
ما در این مقاله یک طرحبندی سفارشی برای سلول News اپلیکیشن خود ساختیم. همچنین نماهای پشتهای و قیودی را اضافه کردیم که همه موارد با فرض هر محتوای متن و تصویری به طرز صحیحی قرار گیرند. برای این که این طرحبندی کار کند، باید به استوریبورد بگوییم که از این سلول به جای سلول استاندارد اپل استفاده کند. همچنین باید برخی موارد قالببندی مانند فونتها را دستکاری کنیم. برای مطالعه بخش بعدی این مطلب به لینک زیر رجوع کنید:
قابلیت های پیشرفته جداول HTML — راهنمای کاربردی
در بخش قبلی این سری مقالات به بررسی جداول HTML پرداختیم. در این بخش برخی از قابلیتهای پیشرفتهتر جداول HTML مانند کپشن، جمعبندی و گروهبندی ردیفها در عنوان جدول یا بخشهای بدنه و فوتر را بررسی میکنیم. همچنین بحث دسترس پذیری جداول HTML برای کاربران دچار نقص بینایی را بیشتر مورد بررسی قرار میدهیم. برای مطالعه بخش قبلی این مجموعه مطلب آموزشی، روی لینک زیر کلیک کنید:
پیشنیاز مطالعه این مقاله آشنایی با مبانی HTML است. انتظار میرود با مطالعه این مطلب با قابلیتهای پیشرفتهتر جداول HTML و دسترسپذیری جداول آشنا شوید.
ارائه توضیح مختصر راجع به جدول با <caption>
با قرار دادن عنصر <caption> و تعریف تودرتوی آن در عنصر <HTML> میتوان یک کپشن (توصیف کوتاه راجع به محتوای جدول) برای جدول تعریف کرد. این عنصر باید درست پس از تگ باز <table> قرار گیرد.
چنان که از مثال کوتاه فوق مشخص است، کپشن به منظور ارائه توصیفی کوتاه از محتوای جدول ارائه میشود. این وضعیت برای همه خوانندگانی که قصد دارند ایده سریعی از فایده جدول داشته باشند، مفید خواهد بود و میتوانند به سرعت با محتوای جدول آشنا شوند. همچنین افراد نابینا نیز میتوانند از محتوای جدول آگاه شوند. به جای این که یک ابزار قرائت صفحه محتوای سلولهای مختلف را بخواند تا این افراد بتوانند در مورد جدول کسب اطلاع بکنند، میتوانند از کپشن استفاده کنند و تصمیم بگیرند که میخواهند جزییات بیشتری از راجع به آن بخوانند یا نه. مجدداً تأکید میکنیم که یک کپشن مستقیماً زیر تگ <table> قرار میگیرد.
نکته: خصوصیت summary روی عنصر <table> نیز میتواند مفید باشد و توصیفی از جدول ارائه کند. این خصوصیت نیز از سوی ابزارهای قرائت صفحه خوانده میشود، اما ما توصیه میکنیم از <caption> استفاده کنید. summary در HTML5 منسوخ شده و کاربران بینا نمیتوانند آن را بخوانند، چون روی صفحه نمایش پیدا نمیکند.
مثال کاربردی: افزودن <caption>
در این بخش به بررسی مجدد مثالی میپردازیم که در بخش قبلی این مقاله ملاحظه کردیم. جدول زمانی مدرسه معلم زبان را از کد زیر کپی کرده و روی سیستم خود در فایلی به نام timetable-fixed.html بچسبانید:
یک کپشن مناسب برای جدول درج کنید. کد را ذخیره کرده و آن را در یک مرورگر باز کنید تا تغییرات حاصل شده را مشاهده کنید.
افزودن ساختار با <thead> ،<tfoot> و <tbody>
زمانی که جدولها ساختار پیچیدهتری مییابند، بهتر است از تعاریف ساختاری بیشتری در ایجاد آنها بهره بگریم. یک روش مشخص استفاده از عناصر <thead> ،<tfoot> و <tbody> است که امکان نشانهگذاری بخشهای هدر، فوتر و بدنه جدول را فراهم میسازد.
این عناصر موجب نمیشوند که جداول دسترسپذیری بیشتری برای ابزارهای قرائت صفحه پیدا کنند و از این نظر ذاتاً ارزش چندانی برای بهبود دیداری ندارند. با این حال، برای استایلدهی و طرحبندی جداول کاملاً مفید هستند و به عنوان قلابهایی برای افزودن CSS به جدول عمل میکنند. برای این که برخی مثالهای جالب در اختیار شما قرار دهیم، باید بگوییم که وقتی جدولی بسیار طولانی میشود، میتوانید در هر بازه نمایشی از جدول یک هدر و یک فوتر قرار دهید. همچنین میتوانید بدنه جدول را در یک صفحه منفرد نمایش دهید و محتوای یکسانی را با اسکرول به سمت بالا و پایین داشته باشید.
برای استفاده از آنها به صورت زیر میتوان عمل کرد:
- عنصر <thead> باید بخشی از جدول را که هدر نام دارد در بربگیرد. این بخش به طور معمول نخستین ردیفی است که عناوین ستونها را شامل میشود، اما لزوماً همیشه چنین نیست. اگر از عنصر استفاده کنید، هدر جدول باید درست زیر آنها قرار گیرد.
- عنصر <tfoot> باید بخشی از جدول را که فوتر نام دارد در بر بگیرد. برای نمونه این بخش میتواند ردیف نهایی باشد که جمعبندی ردیفهای قبلی محسوب میشود. میتوان فوتر جدول را درست در انتهای جدول یا آن را دقیقاً زیر هدر قرار دارد. در هر حال مرورگر آن را در انتهای جدول رندر خواهند کرد.
- عنصر <tbody> باید بخشهایی از جدول را در بر بگیرد که در هدر یا فوتر جدول قرار ندرند. این بخش دقیقاً زیر هدر یا گاهی اوقات زیر فوتر قرار میگیرد و این حالت به تصمیم شما در مورد ساختاربندی جدول بستگی دارد.
نکته: <tbody> همواره و در همه جدولها وجود دارد، هرچند آن را در کد خود به صراحت نیاورده باشید. برای بررسی این موضوع یکی از مثالهای قبلی را که شامل <tbody> نیست باز کنید و به کد HTML در بخش ابزارهای توسعهدهنده مرورگر نگاه کنید. در این حالت مشاهده خواهید کرد که مرورگر این عنصر را به جای شما اضافه میکند. ممکن است کنجکاو باشید که چه لزومی برای گنجاندن این عنصر وجود دارد، دلیل آن این است که بدین ترتیب کنترل بیشتری روی ساختاربندی و استایلدهی جدول خواهید داشت.
مثال کاربردی: افزودن ساختار جدول
در این بخش عناصری جدیدی را که بررسی کردیم، در عمل مورد استفاده قرار میدهیم. قبل از هر چیز یک کپی از کدهای زیر برداشته و روی سیستم خود در فایلهایی با نامهای spending-record.html و minimal-table.css بچسبانید:
فایل spending-record.html
فایل minimal-table.css
این فایل HTML را در مرورگر باز کنید. چنان که میبینید ظاهر مناسبی دارد، اما همچنان نیاز به بهبود دارد. ردیف SUM شامل جمعبندی مقادیر صرف شده است و به نظر میرسد در مکان نامناسبی قرار گرفته است. برخی جزییات کد نیز مفقود هستند.
ردیف هدرها را در یک عنصر <thead> قرار دهید و ردیف SUM را نیز درون عنصر <tfoot> قرار دهید و بقیه کد درون عنصر <tbody> قرار میگیرد. کد را ذخیره و صفحه را رفرش کنید. در ادامه میبینید که افزودن عنصر <tfoot> موجب میشود که ردیف SUM به انتهای جدول برود. سپس خصوصیت colspan را اضافه کنید تا سلول SUM روی چهار ستون نخست گسترش یابد، بنابراین تعداد واقعی در انتهای ستون Cost ظاهر میشود.
در ادامه استایلدهی اضافی سادهای به جدول اضافه میکنیم تا ایدهای از میزان مفید بودن این عناصر برای بهکارگیری کد CSS به دست آوریم. درون بخش عنوان سند HTML یک عنصر <style> خالی میبینیم. درون این عنصر خطوط کد CSS زیر را اضافه کنید:
کد را ذخیره و صفحه را رفرش کنید و نگاهی به نتیجه بیندازید. اگر عناصر <tbody> و <tfoot> در مکان خود نباشند باید سلکتورها و قواعد پیچیدهای برای اعمال استایل ها بنویسید.
جدول تکمیلشده شما چیزی مانند زیر خواهد بود:
کد جدول فوق به صورت زیر است:
جداول تودرتو
امکان تعریف تودرتوی یک جدول درون جدول دیگر وجود دارد و به این منظور کافی است که ساختار کامل را شامل عنصر <html> تعریف کنید. البته این روش چندان توصیه نمیشود، چون موجب خواهد شد که نشانهگذاری پیچیدهتر شود و ابزارهای قرائت صفحه دسترسپذیری کمتری به جدول داشته باشند. در موارد زیادی میتوان سلول/ردیف/ستونهای بیشتری در همان جدول موجود درج کرد. با این حال در پارهای موارد برای نمونه در صورتی که بخواهید محتوا را به سادگی از منابع دیگر ایمپورت کنید، این وضعیت ناگزیر خواهد بود.
در ادامه کد نشانهگذاری یک جدول تودرتوی ساده را ملاحظه میکنید:
خروجی کد فوق چیزی مانند زیر خواهد بود:
| title1 | title2 | title3 | |||
|---|---|---|---|---|---|
| cell2 | cell3 | |||
| cell4 | cell5 | cell6 |
جداول HTML برای کاربران دچار نقص بینایی
در این بخش شیوه استفاده از جدولهای داده را جمعبندی میکنیم. یک جدول میتواند ابزار کارآمدی باشد و دسترسی سریعی به دادهها بدهد. همچنین امکان بررسی و مقایسه مقادیر مختلف را فراهم میسازد. با صرفاً یک نگاه گذرا به جدول زیر میتوان دریافت که چند عدد حلقه در ماه آگوست اخیر در Gent فروخته شده است. برای درک این اطلاعات باید اتصال دیداری بین دادههای این و هدرهای ردیف و / یا ستونهای آن برقرار کنیم.
| Clothes | Accessories | |||||
|---|---|---|---|---|---|---|
| Trousers | Skirts | Dresses | Bracelets | Rings | ||
| Belgium | Antwerp | 56 | 22 | 43 | 72 | 23 |
| Gent | 46 | 18 | 50 | 61 | 15 | |
| Brussels | 51 | 27 | 38 | 69 | 28 | |
| The Netherlands | Amsterdam | 89 | 34 | 69 | 85 | 38 |
| Utrecht | 80 | 12 | 43 | 36 | 19 | |
اما اگر شما نتوانید آن ارتباطهای دیداری را ایجاد کنید چطور؟ در این صورت چگونه میتوانید یک جدول مانند جدول فوق را بخوانید؟ افراد دچار نقص بینایی غالباً از یک ابزار قرائت صفحه استفاده میکنند که اطلاعات روی صفحه وب را برای آنها میخواند. این وضعیت زمانی که متن ساده باشد هیچ مشکلی ایجاد نمیکند، اما تفسیر یک جدول برای فرد نابینا میتواند چالشی جدی محسوب شود. در هر حال، نشانهگذاری صحیح میتواند آن ارتباطهای دیداری را با ارتباطهای برنامهنویسی شده جایگزین کند.
نکته: بر اساس آمار سازمان بهداشت جهانی در سال 2017، حدود 235 میلیون فرد در دنیا با نوعی نقص بینایی زندگی میکردهاند. در همین راستا در این بخش از مقاله تکنیکهای بیشتری معرفی میکنیم که به کمک آنها میتوانید جدولها را تا بیشترین حد ممکن دسترسپذیر کنید.
استفاده از هدرهای ردیف و ستون
ابزارهای قرائت صفحه همه هدرها را شناسایی میکنند و از آنها برای ایجاد ارتباط برنامهنویسی شده بین هدرها و سلولهایی که با آنها ارتباط دارند کمک میگیرند. ترکیب هدرهای ردیف و ستون میتواند جدول را مانند روشی که فرد بینا جدول را تفسیر میکند، ارائه دهد.
در بخش قبلی (+) این مقاله با روش درج هدر در جدول آشنا شدیم.
خصوصیت scope
مبحث جدیدی که در این مقاله بررسی میکنیم خصوصیت scope است که میتوان با استفاده از عنصر <th> به جدول اضافه کرد. این خصوصیت به ابزارهای قرائت صفحه اعلام میکند که هدر مربوط به کدام سلولها است و آیا هدری برای ردیف یا ستون خاص محسوب میشود یا نه. اگر به مثال سوابق مصارف خود بازگردیم بدین ترتیب میتوانیم بدون هیچ ابهامی هدرهای ستون را به صورت زیر تعریف کنیم:
هر ردیف یک هدر دارد که به صورت زیر تعریف میشود (در صورتی که خواسته باشیم علاوه بر هدر ستون، هدر ردیف نیز اضافه کنیم):
ابزارهای قرائت صفحه نشانهگذاریهایی که به این صورت ساختاربندی شده باشند را شناسایی میکنند و برای نمونه به کاربران خود اجازه میدهند که کل ستون یا ردیف را به صورت یکباره بخوانند.
scope دو مقدار ممکن دیگر نیز دارد که colgroup و rowgroup نام دارند. این مقادیر برای عناوینی استفاده میشوند که روی چندین ستون یا ردیف قرار میگیرند. اگر نگاهی دوباره به جدول Items Sold August 2016 در آغاز این بخش از جدول داشته باشیم، میبینیم که سلول Clothes روی سلولهای rousers ،Skirts و Dresses قرار میگیرند. همه این سلولها باید به صورت هدر <th> نشانهگذاری شوند. از این رو Clothes عنوانی است که در ابتدای جدول قرار میگیرد و سه زیرعنوان دیگر را تعریف میکند. بدین ترتیب Clothes میتواند یک خصوصیت بگیرد، در حالی که سلولهای دیگر دارای خصوصیت scope=”col”هستند.
خصوصیتهای id و headers
یک جایگزین برای استفاده از خصوصیت scope استفاده از خصوصیتهای id و headers برای ایجاد ارتباط بین هدرها و سلولها است. این روش به صورت زیر مورد استفاده قرار میگیرد:
- یک id یکتا به هر عنصر <th> اضافه میشود.
- یک خصوصیت headers به هر عنصر <td> اضافه شود. هر خصوصیت headers باید شامل فهرستی از id-ها برای همه عناصر <th> باشد که به عنوان یک هدر برای سلول عمل میکنند و با فاصله از هم جدا میشوند.
- بدین ترتیب جدول HTML یک تعریف صریح از موقعیت هر سلول در جدول پیدا میکند که به وسیله هدر (های) هر ستون و ردیف که بخشی از آن هستند تعریف میشود و تا حدودی شبیه به یک «صفحه گسترده» (Spreadsheet) است. برای این که این تکنیک به درستی کار کند، جدول باید واقعاً به هر دو هدر ردیف و ستون نیاز داشته باشد.
اگر به مثال «هزینههای مصرفی» بازگردیم، دو قطعه کد قبلی را میتوان به صورت زیر بازنویسی کرد:
نکته: این روش ارتباط بسیار دقیقی بین سلولهای هدر و داده برقرار میکند، اما از نشانهگذاری بسیار زیادی استفاده شده است و هیچ پیشبینی برای خطا وجود ندارد. رویکرد scope برای اغلب جدولها کافی به نظر میرسد.
مثال کاربردی: کار کردن با scope و headers
در این تمرین نهایی ابتدا یک کپی از فایل زیر برداشته و در سیستم خود در فایلی با نام items-sold.html درج کنید.
فایل items-sold.html
همچنین کد زیر را در فایلی با نام minimal-table.css ذخیره کنید:
اکنون تلاش کنید، خصوصیت scope مناسب را اضافه کنید تا جدول به شکل صحیحتری نمایش پیدا کند. در نهایت کپی دیگری از فایلهای اولیه ایجاد کنید و این بار با استفاده از خصوصیتهای id و headers جدول را دسترسپذیر تر بسازید.
نکته: در نهایت کار خود را با دو کد زیر مقایسه کنید:
فایل کامل شده مثال هزینههای مصرفی با استفاده از scope
فایل کامل شده مثال هزینههای مصرفی با استفاده از headers
جمعبندی
چند نکته دیگر نیز وجود دارند که باید در مورد جداول HTML بدانید، اما همه موارد مهمی که تا به این جا واقعاً باید میدانستید در این مقاله ارائه کردهایم. در بخش بعدی این سری مقالات به بررسی روشهای استایلدهی جداول خواهیم پرداخت.
برای مطالعه قسمت بعدی این مجموعه مطلب آموزشی میتوانید روی لینک زیر کلیک کنید:
شل اسکریپت (Shell Script) روی VPS (بخش اول) — از صفر تا صد
در این نوشته روش نوشتن یک شِل اسکریپت روی VPS را که میتواند با مقاصد مختلفی مورد استفاده قرار گیرد، توضیح خواهیم داد. اسکریپتهای شل میتوانند برای اجرای دستورهای چندگانه، یک دستور منفرد با آرگومانهای دشوار یا گسترده و یا ایجاد یک رابط کاربرپسندتر برای انتشار پروژهها مورد استفاده قرار گیرند. به طور کلی شل اسکریپتها از طریق خودکارسازی کارها باعث سادهتر شدن امور میشوند، چون در صورتی که از آنها استفاده نکنید باید کارهای زیادی را به صورت دستی انجام دهید.
تنظیم یک پوشه
پیش از آن که آغاز به نوشتن یک شل اسکریپت بکنید، بهتر است یک پوشه مشخص به این کار اختصاص بدهید. توصیه شده است که برای اسکریپتهای شخصی این کار را در پوشه bin/~ انجام دهید. بدین منظور دستور زیر را اجرا کنید.
mkdir ~/bin
و برای این که اسکریپتها را بتوانید از هر کجای سیستم اجرا کنید، باید با اجرای دستور زیر فایل etc/profile/ را باز کنید:
sudo nano /etc/profile
سپس خطوط زیر را به انتهای فایل اضافه کنید:
PATH=$PATH:$HOME/bin export PATH
به خاطر داشته باشید که Ctrl + O را برای ذخیرهسازی و CTRL + X را برای خروج بزنید. برای این که این تغییرات اعمال شوند، دستور زیر را اجرا کنید:
source /etc/profile
اگر توزیع لینوکسی که استفاده میکنید، از دستورهای منبع پشتیبانی نمیکند، میتوانید VPS را با دستور زیر مجدداً راهاندازی کنید:
sudo reboot
ایجاد یک فایل
برای آغاز یک شل اسکریپت، باید ابتدا یک فایل اجرایی بسازید. این کار از طریق اجرای دستور زیر، ممکن است:
touch ~/bin/firstscript chmod +x ~/bin/firstscript
ویرایشگر متن نانو را برای افزودن دستورات باز کنید:
nano ~/bin/firstscript
برای این که بارگذار (loader) برنامه این فایل اجرایی را به عنوان یک شل اسکریپت تشخیص دهد و دستورهای داخل آن را اجرا کند، باید آن را در دایرکتوری صحیحی قرار دهید و خط زیر را به ابتدای آن اضافه کنید:
#!/bin/sh
اینک آماده هستید که هر دستور لینوکسی را که دوست دارید، به صورت زیر به آن اضافه کنید:
clear echo “Hello World!”
پس از ذخیره کردن (CTRL + O) و خروج (CTRL + X) از نانو، میتوانید اسکریپت را با وارد کردن دستور زیر در هر کجا در سیستم اجرا کنید:
Firstscript
نتیجه اجرای دستور فوق چیزی شبیه زیر خواهد بود:
اسکریپت نمونه
یکی از امتیازهای عمده شل اسکریپتها این است که میانبرهایی برای وظایف تکراری ارائه میکنند. برای نمونه اگر فایلهای زیادی را به پوشه backup/~ انتقال میدهید، میتوانید اسکریپتی راهاندازی کنید که هر چیزی که در آن تعریف کردید را به پوشه مربوطه انتقال دهد. ساختار چنین اسکریپتی به صورت زیر خواهد بود:
filebackup file-name1 file-name2...
سپس هر زمان که به آن نیاز داشتید، کافی است با وارد کردن عنوانش آن را اجرا کنید. پیش از این که چنین اسکریپتی را بنویسیم، باید نگاهی به چیزهایی که باید بیاموزیم داشته باشیم. ما میخواهیم شل اسکریپتی بنویسیم که هارد کد نشده باشد. این بدان معنی است که در این مثال اگر بخواهید پوشه پشتیبانگیری را تغییر دهید، بتوانید به راحتی با تغییر دادن چند خط ابتدایی کد اسکریپت، آن را بهروزرسانی کنید. شما ممکن است متغیر مربوط به آن را تنها یک بار ارجاع داده باشید؛ اما آشنایی با این روش صحیح برنامهنویسی مناسبتر است. برای تست کردن این وضعیت، لازم نیست بیدرنگ به سراغ ویرایشگر متنی بروید، بلکه میتوانید از همان خط فرمان این کار را انجام دهید:
testvariable=teststring
دستور echo متنی را در خروجی ارائه میدهد. با اجرای دستور زیر، میتوانید ببینید که چه مقداری برای آن تعیین شده است که در این مورد «teststring» است:
echo $testvariable
اینک میتوانید شروع به کدنویسی به طور معمول بکنید:
touch ~/bin/filebackup chmod +x ~/bin/filebackup nano ~/bin/filebackup
به خاطر داشته باشید که هر خطی که با # آغاز شود یک کامنت است. این خطوط به هیچ وجه تأثیری بر اجرای برنامه ندارند؛ مگر این که با یک علامت تعجب (!) پس از آن در خط اول برنامه بیاید که در این صورت تبدیل به shebang میشود. این شبانگ در خط اولیه کد زیر استفاده شده است:
#!/bin/sh #Backup script #Description: makes a copy of any given file at the backup folder #Author: Your Name #Date: 8/10/2013 #Backup folder; set this variable to any folder you have write permissions on BACKUPFOLDER=~/backup #The script will make sure the folder exists mkdir -p $BACKUPFOLDER #Now the script will copy the given file to the folder cp -a $@ $BACKUPFOLDER
اینک پس از این که فایل را ذخیره (CTRL + O) کردید و خارج شدید (CTRL + X) میتوانیم مروری بر کد داشته باشیم. چند خط اولیه جایی است که کامنتها را ارائه کردهایم. سپس با یک متغیر BACKUPFOLDER جایی که میخواهیم فایلهایمان پشتیبانگیری شوند را تعیین کردیم. در ادامه دستور «mkdir -p $BACKUPFOLDER» را اجرا میکنیم. کاری که این دستور انجام میدهد، این است که یک پوشه ایجاد میکند؛ اما اگر از قبل این پوشه وجود داشته باشد، خطایی ایجاد نمیکند.
در دستور بعدی یعنی «cp» هر آرگومانی که برای فراخوانی اسکریپت لازم است را با تعیین $@ تعیین کردهایم. درست پس از آن یک پوشه مقصد وجود دارد که در این مورد BACKUPFOLDER$ نام دارد. اینک میتوانید اسکریپت خود را با رفتن به هر پوشهای روی سیستم که چند فایل دارد و اجرای دستور زیر تست کنید:
filebackup file1 file2
شما میتوانید هر تعداد که فایل میخواهید به این دستور اضافه کنید تا به پوشه backup کپی شوند.
سخن پایانی
شل اسکریپتها هر جایی در سیستمهای لینوکسی حضور دارند و دلیل این مسئله آن است که بسیار مفید هستند و قابلیتهایی که ارائه میدهند بسیار زیاد است. در این راهنما مبانی شل اسکریپت را ارائه کردیم؛ اما موارد بسیار زیاد دیگری وجود دارند که باید آموخت. این موارد را در مقالات بعدی مجله فرادرس پیگیر باشید.
دستور ALTER در MySQL — راهنمای جامع
دستور ALTER در MySQL هنگامی که میخواهید نام یکی از جدولها یا یکی از فیلدهای جدولی را تغییر دهید، یا وقتی میخواهید یک ستون به جدول اضافه یا حذف کنید، دستوری کاملاً مفید محسوب میشود. در ادامه کار خود را با ایجاد یک جدول به نام testalter_tbl آغاز میکنیم:
حذف، افزودن یا تغییر موقعیت یک ستون
اگر بخواهید یک ستون i موجود در جدول MySQL فوق را حذف کنید در این صوت باید از بند DROP همراه با دستور ALTER به صورت زیر استفاده کنید:
بند DROP در صورتی که ستون تنها ستون جدول باشد، کار نخواهد کرد.
برای افزودن یک ستون باید از ADD و تعریف ستون استفاده کنید. عبارت زیر ستون i را به جدول testalter_tbl باز میگرداند:
پس از ارسال این عبارت، جدول testalter شامل دو ستون خواهد بود که در هنگام ایجاد اولیه، در آن گنجانده شده بود؛ اما ساختار این جدولها به همان ترتیب نخواهد بود. دلیل این امر آن است که ستونهای جدیدی وجود دارند که به طور پیشفرض به انتهای جدول اضافه شدهاند. بنابراین گرچه i در ابتدا نخستین ستون در mytbl بود؛ اما اینک آخرین ستون است.
برای نشان دادن این که ستونی باید در یک موقعیت خاص در جدول ایجاد شود، باید از FIRST استفاده کنید تا به عنوان ستون نخست ایجاد شود یا از ALTER col_name استفاده کنید تا تعیین کنید که ستون جدید باید پس از ستون col_name قرار گیرد.
عبارتهای ALTER TABLE زیر را با استفاده از SHOW COLUMNS پس از هر عبارت بررسی کنید تا ببینید هر کدام جه تأثیری روی جدول دارند:
کلیدواژههای FIRST و AFTER تنها به همراه بند ADD کار میکنند. این بدان معنی است که اگر بخواهید موقعیت یک ستون موجود را در یک جدول تغییر دهید، ابتدا باید آن را DROP کنید و سپس آن را در موقعیت جدید ADD نمایید.
تغییر دادن تعریف یا نام یک ستون
برای تغییر دادن تعریف یک ستون باید از بندهای MIDITY یا CHANGE همراه به دستور ALTER استفاده کنید. برای نمونه برای تغییر دادن ستون c از (CHAR(1 به (CHAR(10 باید از دستور زیر استفاده کنید:
البته ساختار عبارت CHANGE کمی متفاوت است. پس از کلیدواژه CHANGE باید نام ستونی که میخواهید تغییر یابد را تعیین کنید، سپس تعریف جدید را به همراه نام جدید وارد کنید. مثال زیر را امتحان کنید:
اگر میخواهید از CHANGE برای تبدیل j از BIGINT به INT بدون تغییر دادن نام ستون استفاده کنید، در این صورت عبارت به صورت زیر خواهد بود:
تأثیر ALTER TABLE روی خصوصیتهای با مقدار NULL و پیشفرض
زمانی که عبارتهای CHANGE یا ALTER را روی یک ستون استفاده میکنید، میتوانید تعیین کنید که ستون میتواند شامل مقادیر NULL باشد یا نباشد و این که مقدار پیشفرض آن چیست. در واقع اگر این کار را انجام ندهید، MySQL به طور خودکار مقادیری را برای این خصوصیات انتساب میدهد.
به عنوان مثال در کد زیر میبینیم که ستون NOT NULL مقدار 100 را به صورت پیشفرض دارد.
اگر از دستور فوق استفاده نکنید، در این صورت MySQL مقادیر NULL را در همه ستونها پر میکند.
تغییر دادن مقدار پیشفرض یک ستون
شما میتوانید مقداری که هر ستون به طور پیشفرض دارد، با استفاده از دستور ALTER تغییر دهید. مثال زیر را بررسی کنید:
میتوان فیلد پیشفرض را با استفاده از بند DROP همراه با دستور ALTER از همه ستونها حذف کرد.
تغییر نوع یک جدول
شما میتوانید با استفاده از بند TYPE همراه با دستور ALTER، نوع خاصی از جدول را مورد استفاده قرار دهید. مثال زیر را برای تغییر دادن نوع جدول testalter_tbl به MYISAM بررسی کنید. برای یافتن نوع کنونی یک جدول از عبارت SHOW TABLE STATUS استفاده کنید.
تغییر نام یک جدول
برای تغییر دادن نام یک جدول باید از گزینه RENAME به همراه عبارت ALTER TABLE استفاده کنید. مثال زیر را برای تغییر دادن نام testalter_tbl به alter_tbl مورد استفاده قرار دهید.
شما میتوانید از دستور ALTER برای ایجاد و یا حذف دستور INDEX روی یک فایل MySQL استفاده کنید. در بخشهای بعدی این سلسله مطالب آموزش MySQL در این مورد بیشتر صحبت خواهیم کرد.