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

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

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

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

قابلیت های پیشرفته جداول HTML — راهنمای کاربردی

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

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

پیش‌نیاز مطالعه این مقاله آشنایی با مبانی HTML است. انتظار می‌رود با مطالعه این مطلب با قابلیت‌های پیشرفته‌تر جداول HTML و دسترس‌پذیری جداول آشنا شوید.

ارائه توضیح مختصر راجع به جدول با <caption>

با قرار دادن عنصر <caption> و تعریف تودرتوی آن در عنصر <HTML> می‌توان یک کپشن (توصیف کوتاه راجع به محتوای جدول) برای جدول تعریف کرد. این عنصر باید درست پس از تگ باز <table> قرار گیرد.

1
2
3
4
5
<table>
  <caption>Dinosaurs in the Jurassic period</caption>
 
  ...
</table>

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

نکته: خصوصیت summary روی عنصر <table> نیز می‌تواند مفید باشد و توصیفی از جدول ارائه کند. این خصوصیت نیز از سوی ابزارهای قرائت صفحه خوانده می‌شود، اما ما توصیه می‌کنیم از <caption> استفاده کنید. summary در HTML5 منسوخ شده و کاربران بینا نمی‌توانند آن را بخوانند، چون روی صفحه نمایش پیدا نمی‌کند.

مثال کاربردی: افزودن <caption>

در این بخش به بررسی مجدد مثالی می‌پردازیم که در بخش قبلی این مقاله ملاحظه کردیم. جدول زمانی مدرسه معلم زبان را از کد زیر کپی کرده و روی سیستم خود در فایلی به نام timetable-fixed.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
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>

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

افزودن ساختار با <thead> ،<tfoot> و <tbody>

زمانی که جدول‌ها ساختار پیچیده‌تری می‌یابند، بهتر است از تعاریف ساختاری بیشتری در ایجاد آن‌ها بهره بگریم. یک روش مشخص استفاده از عناصر <thead> ،<tfoot> و <tbody> است که امکان نشانه‌گذاری بخش‌های هدر، فوتر و بدنه جدول را فراهم می‌سازد.

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

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

عنصر <thead> باید بخشی از جدول را که هدر نام دارد در بربگیرد. این بخش به طور معمول نخستین ردیفی است که عناوین ستون‌ها را شامل می‌شود، اما لزوماً همیشه چنین نیست. اگر از عنصر استفاده کنید، هدر جدول باید درست زیر آن‌ها قرار گیرد.
عنصر <tfoot> باید بخشی از جدول را که فوتر نام دارد در بر بگیرد. برای نمونه این بخش می‌تواند ردیف نهایی باشد که جمع‌بندی ردیف‌های قبلی محسوب می‌شود. می‌توان فوتر جدول را درست در انتهای جدول یا آن را دقیقاً زیر هدر قرار دارد. در هر حال مرورگر آن را در انتهای جدول رندر خواهند کرد.
عنصر <tbody> باید بخش‌هایی از جدول را در بر بگیرد که در هدر یا فوتر جدول قرار ندرند. این بخش دقیقاً زیر هدر یا گاهی اوقات زیر فوتر قرار می‌گیرد و این حالت به تصمیم شما در مورد ساختاربندی جدول بستگی دارد.

نکته: <tbody> همواره و در همه جدول‌ها وجود دارد، هرچند آن را در کد خود به صراحت نیاورده باشید. برای بررسی این موضوع یکی از مثال‌های قبلی را که شامل <tbody> نیست باز کنید و به کد HTML در بخش ابزارهای توسعه‌دهنده مرورگر نگاه کنید. در این حالت مشاهده خواهید کرد که مرورگر این عنصر را به جای شما اضافه می‌کند. ممکن است کنجکاو باشید که چه لزومی برای گنجاندن این عنصر وجود دارد، دلیل آن این است که بدین ترتیب کنترل بیشتری روی ساختاربندی و استایل‌دهی جدول خواهید داشت.

مثال کاربردی: افزودن ساختار جدول

در این بخش عناصری جدیدی را که بررسی کردیم، در عمل مورد استفاده قرار می‌دهیم. قبل از هر چیز یک کپی از کدهای زیر برداشته و روی سیستم خود در فایل‌هایی با نام‌های spending-record.html و minimal-table.css بچسبانید:

فایل spending-record.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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My spending record</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">
    <style>
    </style>
  </head>
  <body>
    <h1>My spending record</h1>
 
      <table>
        <caption>How I chose to spend my money</caption>
          <tr>
            <th>Purchase</th>
            <th>Location</th>
            <th>Date</th>
            <th>Evaluation</th>
            <th>Cost (€)</th>
          </tr>
          <tr>
            <td>SUM</td>
            <td>118</td>
          </tr>
          <tr>
            <td>Haircut</td>
            <td>Hairdresser</td>
            <td>12/09</td>
            <td>Great idea</td>
            <td>30</td>
          </tr>
          <tr>
            <td>Lasagna</td>
            <td>Restaurant</td>
            <td>12/09</td>
            <td>Regrets</td>
            <td>18</td>
          </tr>
          <tr>
            <td>Shoes</td>
            <td>Shoeshop</td>
            <td>13/09</td>
            <td>Big regrets</td>
            <td>65</td>
          </tr>
          <tr>
            <td>Toothpaste</td>
            <td>Supermarket</td>
            <td>13/09</td>
            <td>Good</td>
            <td>5</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 را در مرورگر باز کنید. چنان که می‌بینید ظاهر مناسبی دارد، اما همچنان نیاز به بهبود دارد. ردیف SUM شامل جمع‌بندی مقادیر صرف شده است و به نظر می‌رسد در مکان نامناسبی قرار گرفته است. برخی جزییات کد نیز مفقود هستند.

ردیف هدرها را در یک عنصر <thead> قرار دهید و ردیف SUM را نیز درون عنصر <tfoot> قرار دهید و بقیه کد درون عنصر <tbody> قرار می‌گیرد. کد را ذخیره و صفحه را رفرش کنید. در ادامه می‌بینید که افزودن عنصر <tfoot> موجب می‌شود که ردیف SUM به انتهای جدول برود. سپس خصوصیت colspan را اضافه کنید تا سلول SUM روی چهار ستون نخست گسترش یابد، بنابراین تعداد واقعی در انتهای ستون Cost ظاهر می‌شود.

در ادامه استایل‌دهی اضافی ساده‌ای به جدول اضافه می‌کنیم تا ایده‌ای از میزان مفید بودن این عناصر برای به‌کارگیری کد CSS به دست آوریم. درون بخش عنوان سند HTML یک عنصر <style> خالی می‌بینیم. درون این عنصر خطوط کد CSS زیر را اضافه کنید:

1
2
3
4
5
6
7
8
tbody {
  font-size: 90%;
  font-style: italic;
}
 
tfoot {
  font-weight: bold;
}

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

جدول تکمیل‌شده شما چیزی مانند زیر خواهد بود:

کد جدول فوق به صورت زیر است:

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My spending record</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">
    <style>
        tbody {
          font-size: 90%;
          font-style: italic;
        }
        tfoot {
          font-weight: bold;
        }
    </style>
  </head>
  <body>
    <h1>My spending record</h1>
 
      <table>
        <caption>How I chose to spend my money</caption>
        <thead>
          <tr>
            <th>Purchase</th>
            <th>Location</th>
            <th>Date</th>
            <th>Evaluation</th>
            <th>Cost (€)</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="4">SUM</td>
            <td>118</td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>Haircut</td>
            <td>Hairdresser</td>
            <td>12/09</td>
            <td>Great idea</td>
            <td>30</td>
          </tr>
          <tr>
            <td>Lasagna</td>
            <td>Restaurant</td>
            <td>12/09</td>
            <td>Regrets</td>
            <td>18</td>
          </tr>
          <tr>
            <td>Shoes</td>
            <td>Shoeshop</td>
            <td>13/09</td>
            <td>Big regrets</td>
            <td>65</td>
          </tr>
          <tr>
            <td>Toothpaste</td>
            <td>Supermarket</td>
            <td>13/09</td>
            <td>Good</td>
            <td>5</td>
          </tr>
        </tbody>
    </table>
 
  </body>
</html>

جداول تودرتو

امکان تعریف تودرتوی یک جدول درون جدول دیگر وجود دارد و به این منظور کافی است که ساختار کامل را شامل عنصر <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
<table id="table1">
  <tr>
    <th>title1</th>
    <th>title2</th>
    <th>title3</th>
  </tr>
  <tr>
    <td id="nested">
      <table id="table2">
        <tr>
          <td>cell1</td>
          <td>cell2</td>
          <td>cell3</td>
        </tr>
      </table>
    </td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
</table>

خروجی کد فوق چیزی مانند زیر خواهد بود:

title1

title2

title3

cell1

cell2

cell3

cell2

cell3

cell4

cell5

cell6

جداول HTML برای کاربران دچار نقص بینایی

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

Items Sold August 2016
		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
The Netherlands	Utrecht	80	12	43	36	19

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

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

استفاده از هدرهای ردیف و ستون

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

در بخش قبلی (+) این مقاله با روش درج هدر در جدول آشنا شدیم.

خصوصیت scope

مبحث جدیدی که در این مقاله بررسی می‌کنیم خصوصیت scope است که می‌توان با استفاده از عنصر <th> به جدول اضافه کرد. این خصوصیت به ابزارهای قرائت صفحه اعلام می‌کند که هدر مربوط به کدام سلول‌ها است و آیا هدری برای ردیف یا ستون خاص محسوب می‌شود یا نه. اگر به مثال سوابق مصارف خود بازگردیم بدین ترتیب می‌توانیم بدون هیچ ابهامی هدرهای ستون را به صورت زیر تعریف کنیم:

1
2
3
4
5
6
7
8
9
<thead>
  <tr>
    <th scope="col">Purchase</th>
    <th scope="col">Location</th>
    <th scope="col">Date</th>
    <th scope="col">Evaluation</th>
    <th scope="col">Cost (€)</th>
  </tr>
</thead>

هر ردیف یک هدر دارد که به صورت زیر تعریف می‌شود (در صورتی که خواسته باشیم علاوه بر هدر ستون، هدر ردیف نیز اضافه کنیم):

1
2
3
4
5
6
7
<tr>
  <th scope="row">Haircut</th>
  <td>Hairdresser</td>
  <td>12/09</td>
  <td>Great idea</td>
  <td>30</td>
</tr>

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

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) است. برای این که این تکنیک به درستی کار کند، جدول باید واقعاً به هر دو هدر ردیف و ستون نیاز داشته باشد.

اگر به مثال «هزینه‌های مصرفی» بازگردیم، دو قطعه کد قبلی را می‌توان به صورت زیر بازنویسی کرد:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<thead>
  <tr>
    <th id="purchase">Purchase</th>
    <th id="location">Location</th>
    <th id="date">Date</th>
    <th id="evaluation">Evaluation</th>
    <th id="cost">Cost (€)</th>
  </tr>
</thead>
<tbody>
<tr>
  <th id="haircut">Haircut</th>
  <td headers="location haircut">Hairdresser</td>
  <td headers="date haircut">12/09</td>
  <td headers="evaluation haircut">Great idea</td>
  <td headers="cost haircut">30</td>
</tr>
 
  ...
 
</tbody>

نکته: این روش ارتباط بسیار دقیقی بین سلول‌های هدر و داده برقرار می‌کند، اما از نشانه‌گذاری بسیار زیادی استفاده شده است و هیچ پیش‌بینی برای خطا وجود ندارد. رویکرد scope برای اغلب جدول‌ها کافی به نظر می‌رسد.

مثال کاربردی: کار کردن با scope و headers

در این تمرین نهایی ابتدا یک کپی از فایل زیر برداشته و در سیستم خود در فایلی با نام items-sold.html درج کنید.

فایل items-sold.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
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Items sold summary</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">
</head>
 
<body>
    <h1>Items sold summary</h1>
 
    <table>
      <caption>Items Sold August 2016</caption>
        <thead>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <th colspan="3">Clothes</th>
            <th colspan="2">Accessories</th>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <th>Trousers</th>
            <th>Skirts</th>
            <th>Dresses</th>
            <th>Bracelets</th>
            <th>Rings</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th rowspan="3">Belgium</th>
            <th>Antwerp</th>
            <td>56</td>
            <td>22</td>
            <td>43</td>
            <td>72</td>
            <td>23</td>
          </tr>
          <tr>
            <th>Gent</th>
            <td>46</td>
            <td>18</td>
            <td>50</td>
            <td>61</td>
            <td>15</td>
         </tr>
         <tr>
           <th>Brussels</th>
           <td>51</td>
           <td>27</td>
           <td>38</td>
           <td>69</td>
           <td>28</td>
         </tr>
         <tr>
           <th rowspan="2">The Netherlands</th>
           <th>Amsterdam</th>
           <td>89</td>
           <td>34</td>
           <td>69</td>
           <td>85</td>
           <td>38</td>
         </tr>
         <tr>
           <th>Utrecht</th>
           <td>80</td>
           <td>12</td>
           <td>43</td>
           <td>36</td>
           <td>19</td>
         </tr>
       </tbody>
    </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;
}

اکنون تلاش کنید، خصوصیت scope مناسب را اضافه کنید تا جدول به شکل صحیح‌تری نمایش پیدا کند. در نهایت کپی دیگری از فایل‌های اولیه ایجاد کنید و این بار با استفاده از خصوصیت‌های id و headers جدول را دسترس‌پذیر تر بسازید.

نکته: در نهایت کار خود را با دو کد زیر مقایسه کنید:

فایل کامل شده مثال هزینه‌های مصرفی با استفاده از 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
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
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Items sold summary</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">
</head>
 
<body>
    <h1>Items sold summary</h1>
 
    <table>
      <caption>Items Sold August 2016</caption>
        <thead>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <th colspan="3" scope="colgroup">Clothes</th>
            <th colspan="2" scope="colgroup">Accessories</th>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <th scope="col">Trousers</th>
            <th scope="col">Skirts</th>
            <th scope="col">Dresses</th>
            <th scope="col">Bracelets</th>
            <th scope="col">Rings</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th rowspan="3" scope="rowgroup">Belgium</th>
            <th scope="row">Antwerp</th>
            <td>56</td>
            <td>22</td>
            <td>43</td>
            <td>72</td>
            <td>23</td>
          </tr>
          <tr>
            <th scope="row">Gent</th>
            <td>46</td>
            <td>18</td>
            <td>50</td>
            <td>61</td>
            <td>15</td>
         </tr>
         <tr>
           <th scope="row">Brussels</th>
           <td>51</td>
           <td>27</td>
           <td>38</td>
           <td>69</td>
           <td>28</td>
         </tr>
         <tr>
           <th rowspan="2" scope="rowgroup">The Netherlands</th>
           <th scope="row">Amsterdam</th>
           <td>89</td>
           <td>34</td>
           <td>69</td>
           <td>85</td>
           <td>38</td>
         </tr>
         <tr>
           <th scope="row">Utrecht</th>
           <td>80</td>
           <td>12</td>
           <td>43</td>
           <td>36</td>
           <td>19</td>
         </tr>
       </tbody>
    </table>
 
</body>
 
</html>

فایل کامل شده مثال هزینه‌های مصرفی با استفاده از headers

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
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Items sold summary</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">
</head>
 
<body>
    <h1>Items sold summary</h1>
 
    <table>
      <caption>Items Sold August 2016</caption>
        <thead>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <th colspan="3" id="clothes">Clothes</th>
            <th colspan="2" id="accessories">Accessories</th>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <th id="trousers">Trousers</th>
            <th id="skirts">Skirts</th>
            <th id="dresses">Dresses</th>
            <th id="bracelets">Bracelets</th>
            <th id="rings">Rings</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th rowspan="3" id="belgium">Belgium</th>
            <th id="antwerp">Antwerp</th>
            <td headers="clothes trousers belgium antwerp">56</td>
            <td headers="clothes skirts belgium antwerp">22</td>
            <td headers="clothes dresses belgium antwerp">43</td>
            <td headers="accessories bracelets belgium antwerp">72</td>
            <td headers="accessories rings belgium antwerp">23</td>
          </tr>
          <tr>
            <th id="gent">Gent</th>
            <td headers="clothes trousers belgium gent">46</td>
            <td headers="clothes skirts belgium gent">18</td>
            <td headers="clothes dresses belgium gent">50</td>
            <td headers="accessories bracelets belgium gent">61</td>
            <td headers="accessories rings belgium gent">15</td>
         </tr>
         <tr>
           <th id="brussels">Brussels</th>
           <td headers="clothes trousers belgium brussels">51</td>
           <td headers="clothes skirts belgium brussels">27</td>
           <td headers="clothes dresses belgium brussels">38</td>
           <td headers="accessories bracelets belgium brussels">69</td>
           <td headers="accessories rings belgium brussels">28</td>
         </tr>
         <tr>
           <th rowspan="2" id="netherlands">The Netherlands</th>
           <th id="amsterdam">Amsterdam</th>
           <td headers="clothes trousers netherlands amsterdam">89</td>
           <td headers="clothes skirts netherlands amsterdam">34</td>
           <td headers="clothes dresses netherlands amsterdam">69</td>
           <td headers="accessories bracelets netherlands amsterdam">85</td>
           <td headers="accessories rings netherlands amsterdam">38</td>
         </tr>
         <tr>
           <th id="utrecht">Utrecht</th>
           <td headers="clothes trousers netherlands utrecht">80</td>
           <td headers="clothes skirts netherlands utrecht">12</td>
           <td headers="clothes dresses netherlands utrecht">43</td>
           <td headers="accessories bracelets netherlands utrecht">36</td>
           <td headers="accessories rings netherlands utrecht">19</td>
         </tr>
       </tbody>
    </table>
 
</body>
 
</html>

جمع‌بندی

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

منبع: فرادرس

مشاوره شنبه 29 تیر 1398 ساعت 14:20

0 نظر

جستجوی فیبوناچی (Fibonacci Search) — به زبان ساده

مشاوره شنبه 29 تیر 1398 ساعت 14:19

0 نظر

آموزش سوئیفت (Swift): آشنایی با Getter و Setter — بخش شانزدهم

در بخش قبلی این سری مقالات آموزش زبان برنامه‌نویسی سوئیفت با کاربرد ژنریک‌ها به همراه بستار و Enum آشنا شدیم. در این بخش قصد داریم از همه این مباحث جدا شویم و در مورد چند موضوع صحبت کنیم که موجب می‌شوند کد سوئیفت کارایی بیشتری پیدا کند. بدین ترتیب قصد آشنایی با Getter و Setter ،inout و lazy را داریم. برای مطالعه بخش قبلی این مجموعه مطلب آموزشی به لینک زیر رجوع کنید:

آموزش سوئیفت (Swift): کاربرد Enum با ژنریک و بستار – بخش پانزدهم

inout

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Without inout
var number = 10
func multiply(number: Int, by multiplier: Int) -> Int {
    return number * multiplier
}
 
number = multiply(number: number, by: 2)    // number is assigned 20
print(number)      // prints 20
 
// With inout
var secondNumber = 5
 
func multiply(number: inout Int, by: multiplier) {
    number *= multiplier
}
 
multiply(number: &secondNumber, by: 2)
// passed in a reference to secondNumber using &
print(number)      // prints 10

هنگامی که یک تابع استاندارد بدون استفاده inout ایجاد شود، متغیر ارسالی «تغییرناپذیر» (immutable) است و امکان اصلاح آن وجود نخواهد داشت. به بیان دیگر به صورت یک ثابت ارسال می‌شود. کلیدواژه inout امکان تغییر دادن متغیر ارسالی را می‌دهد، زیرا با ارجاع ارسال شده است و نه با مقدار، چرا که در این صورت باید یک & در ابتدای آن وجود می‌داشت. اگر می‌خواهید در این رابطه بیشتر بدانید به مطلب زیر رجوع کنید:

آموزش برنامه‌نویسی سوئیفت (Swift): اشاره‌گرها و انواع داده — بخش دوم

در مثال فوق هنگامی که از یک تابع بدون inout استفاده کنیم، از آنجا که number به (:multiply(number:by ارسال شده است، در واقع به صورت number ارسال نشده است بلکه مقدار کنونی number که 10 است ارسال شده است. آن را می‌توان به صورت زیر فراخوانی کرد:

1
number = multiply(number: 10، by: 2)

اگر به تابعی که از inout استفاده می‌کند نگاه کنیم، می‌بینیم که سه تغییر رخ داده است، نخستین تغییر این است که هیچ نوع بازگشتی وجود ندارد. دوم این که از کلیدواژه در کنار نوع پارامتر استفاده کرده‌ایم (inout Int). تغییر سوم این است که هیچ گزاره return در بدنه تابع ما وجود ندارد.

زمانی که تابع inout را فراخوانی می‌کنیم مجبور نیستیم که یک مقدار بازگشتی انتساب دهیم، زیرا هیچ مقداری بازگشت نمی‌یابد. به جای آن زمانی که تابع inout را فراخوانی می‌کنیم، در واقع مکان متغیر را در حافظه ارسال می‌کنیم. برای این که موضوع روشن‌تر شود، باید بگوییم که وقتی از &secondNumber استفاده می‌کنیم، secondNumber به آدرس حافظه 0x01 انتساب می‌یابد. این وضعیت در عمل به صورت زیر ترجمه می‌شود:

1
multiply(number: 0x01، by: 2)

البته نباید سردرگم شوید، چون وقتی به آدرس 0x01 نگاه می‌کنیم تا مقدار مورد نظر را ببینیم، همچنان مقدار «عدد دوم» (secondNumber) را می‌بینیم که 5 است.

درون تابع inout همه چیز به طرز متفاوتی عمل می‌کند. ما از number *= multiplier برای تغییر مقدار ذخیره شده در آدرس secondNumber استفاده می‌کنیم، زیرا مقدار را مستقیماً تغییر می‌دهیم و مقدار تغییر یافته در هر جایی در برنامه که ارجاعی به secondNumber صورت گرفته باشد، اعمال خواهد شد. جنبه مثبت این وضعیت آن است که مصرف حافظه کمی دارد و باید صرفاً نگران این متغیر که شامل مقدار number است نگران باشید.

جنبه منفی این رویکرد برای استفاده از inout آن است که همه انواع ارجاع را ناممکن می‌سازد. اگر secondNumber را در جایی از برنامه که ارجاع یافته تغییر دهید، ممکن است نخواهید در همه جاهای دیگر مقدار آن تغییر پیدا کند.

به عنوان مثال عملی‌تر، اگر بخواهیم یک مقدار را در userData فوق‌الذکر ارسال کنیم که از نوع Data است و شامل برخی اطلاعات باشد که لازم باشد در جای دیگری در اپلیکیشن به آن ارجاع دهیم، آن را به صورت یک پارامتر inout به یک تابع ارسال می‌کنیم و بدین ترتیب داده‌ها تغییر می‌یابند و داده‌های اولیه نیز همچنان در موارد نیاز در دسترس خواهند بود. اگر بعدها به userData مراجعه کنیم و انتظار داشته باشیم که همان مقدار را داشته باشد ممکن است متوجه شویم که تغییر یافته است. بهترین حالت این است که اپلیکیشن تغییر را مدیریت کند و موارد مقتضی را بر همین مبنا اجرا کند. بدترین حالت این است که اپلیکیشن به دلیل تهی بودن یک مقدار یا این که نوع داده ذخیره شده در مکان حافظه تغییر یافته است، از کار بیفتد.

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

Lazy

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// CLLocationCoordinate2d is a structured way of using two Doubles
class myClass {
    var coordinates: CLLocationCoordinate2d
    var mapView: MKMapView
  
    init(coordinates: CLLocationCoordinate2d) {
        self.coordinates = coordinates
        self.mapView = MKMapView()
    }
  
    func getLocation(of coordinates: CLLocationCoordinate2d {
        mapView.setCenter(coordinates, animated: true)
    }
}

این مثال چیز بزرگی به نظر نمی‌رسد، با استفاده از این کلاس در واقع از یک CLLocationCoordinate2d برای نمایش مکانی روی نقشه استفاده می‌کنیم.

اگر بخواهید بدانید CLLocationCoordinate2d چیست، باید بگوییم که یک struct شامل طول و عرض جغرافیایی مکان به همراه برخی متدهای ساده است. هم طول و هم عرض جغرافیایی به صورت CLLocationDegrees هستند که صرفاً یک «نوع مستعار» (typealias) برای این نوع Double محسوب می‌شود. به بیان ساده‌تر CLLocationCoordinate2d یک روش برای ارائه دو مقدار Double است که مکانی را روی نقشه تعیین می‌کنند و در مجموع بسیار سبک است.

در سوی دیگر MKMapView، حافظه زیادی اشغال می‌کند. فقط بارگذاری یک نقشه و بزرگنمایی به یک مختصات باعث مصرف چندین مگابایت از حافظه می‌شود. زمانی که از یک نقشه در برنامه‌های خود استفاده می‌کنیم، تقریباً 2000 annotation بارگذاری می‌شود و هنگامی که کمی در نقشه بگردیم مصرف حافظه تا 430 مگابایت افزایش پیدا می‌کند. پس چنان که می‌بینید نماهای نقشه تا حدودی پرهزینه هستند. همان طور که حدس می‌زنید این نمای نقشه همان نمایی است که هنگام باز کردن اپلیکیشن Maps در گوشی خود مشاهده می‌کنید.

خبر خوب این است که iPhone-ها و iPad-ها امروزه چندین گیگابایت حافظه دارند و لذا این مسئله چندان بزرگ به حساب نمی‌آید، اما با این حال همچنان می‌توان این وضعیت را بهینه‌سازی کرد. این همان جایی است که مشخصه‌های با ذخیره‌سازی Lazy به کار می‌آیند.

سناریویی را تصور کنید که یک «نما» (view) در اپلیکیشن خود داریم و این نما می‌تواند یک نقشه را نمایش دهد یا ندهد. اگر نقشه را نمایش ندهد قطعاً دوست نداریم صدها مگابایت داده را در حافظه بارگذاری کنیم، اما همچنان می‌خواهیم که بتوانیم در صورت نیاز نقشه را در اپلیکیشن خود و همچنین در تابع‌هایی دیگری که نما را مالکیت می‌کنند داشته باشیم. در مثال زیر طرز کار این رویکرد را می‌توانید ملاحظه کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class myViewController: UIViewController {
    var coordinates: CLLocationCoordinate2d?
    lazy var mapView = MKMapView()
    var view: UIView!
  
    // do stuff
  
    @IBAction func showMapTapped(_ sender: UIButton) {
        createView()
        view.addSubview(mapView)
        guard let coordinates = self.coordinates else { return }
        mapView.setCenter(coordinates, animated: true)
    }
}

کلیدواژه lazy در ابتدای ()var mapView = MKMapView جایی است که بخش اصلی داستان اتفاق می‌افتند. این کلیدواژه به برنامه اعلام می‌کند که آماده شود چون ممکن است mapView در این نما استفاده شود. زمانی که زمان استفاده از نمای نقشه فرا برسد، کد ایجاد آن به صورت فوق خواهد بود.

در ادامه کد می‌بینیم که وقتی کاربر روی یک دکمه برای نمایش نقشه ضربه بزند، ()createView را فراخوانی می‌کنیم. این متد شامل منطقی است که در پشت صحنه نوشته‌ایم تا نمایی را که نقشه را نمایش می‌دهد به نمای جاری اضافه کنیم. زمانی که از (view.addSubview(mapView استفاده می‌کنیم، کد mapView فراخوانی می‌شود که mapView را ایجاد می‌کند و در صورت نیاز می‌توانیم تابع‌ها را روی mapView فراخوانی کنیم.

اگر این نما ایجاد نشده باشد و یک تابع را روی mapView فراخوانی کنیم، mapView در آن زمان ایجاد خواهد شد. بنابراین Lazy اساساً ایجاد mapView را تا زمانی که واقعاً ضروری باشد به تعویق می‌اندازد. مشخصه‌های Lazy می‌توانند به صورت «بستار» (closure) ها نیز باشند. در واقع این حالتی است که عموماً مورد استفاده قرار می‌گیرند و بدین ترتیب از محاسبات اضافی تا زمانی که واقعاً ضروری نباشد جلوگیری می‌کنند. این حالت را در پشته Core Data به طور مکرر مشاهده می‌کنید. با این حال اگر از چیزی سر در نیاوردید لازم نیست، نگران باشید، چون فعلاً روی lazy تمرکز داریم.

1
2
3
4
5
6
7
8
9
10
11
12
lazy var persistentContainer: NSPersistentContainer = {
    let container = NSPersistentContainer(name: "DataModel")
  
    container.loadPersistentStores(completionHandler: {     
        (storeDescription, error) in
        if let error = error as NSError? {
            fatalError("error.localizedDescription")
        }
    })
    
    return container
}()

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

استفاده از Lazy زیبا است و غالباً باید در جاهایی استفاده شود که مفید باشد. نباید نگران باشید که رویه‌های ساده با استفاده از Lazy پیچیده می‌شوند، چون در هر صورت امکان Lazy ساختن ثابت‌ها وجود ندارد. اگر تلاش کنید یک ثابت را به صورت Lazy تعریف کنید، Xcode شما را مأیوس خواهد کرد.

Getter و Setter

Getter-ها و Setter-ها بخشی از «مشخصه‌های محاسبه شده» (Computed Properties) هستند. آن‌ها خویشاوند نزدیک مشاهده‌گرهای مشخصه به نام didSet و willSet محسوب می‌شوند. چنان که احتمالاً به خاطر دارید didSet و willSet جهت اجرای وظایف اضافی در زمان تغییر یافتن یک مشخصه محاسبه شده استفاده می‌شوند. Getter-ها و Setter-ها منطقی در اختیار ما قرار می‌دهند که می‌توانیم برای تعیین یک مقدار یا بازیابی آن مورد استفاده قرار دهیم. به مثال زیر توجه کنید:

1
2
var number: Int { get set }
var gettableNumber: Int { get }

در مثال فوق، number پیاده‌سازی پیش‌فرض get و set را ارائه می‌کند که در صورت عدم اضافه شدن { get set } به انتها می‌توانستیم داشته باشیم. تنها دلیل استفاده از آن‌ها روشن‌تر شدن موضوع بوده است. حفظ انسجام کد همواره خوب است و اگر مشخصه‌ای دارید که تنها get دارد، در این صورت بهتر است { get set } را روی مشخصه‌هایی اضافه کنید که قابلیت get و set داشته باشند.

زمانی که تنها از { get } استفاده می‌کنیم در واقع صرفاً امکان بازیابی مقدار را داریم و نمی‌توانیم مقدار را تعیین کنیم. این وضعیت مشابه یک ثابت است، گرچه عموماً محاسبه مشخصه‌های دیگر را نیز بازگشت می‌دهد. در ادامه چند مثال را می‌بینید که در آن‌ها می‌توان از { get } استفاده کرد.

1
2
3
4
5
6
7
8
9
10
struct Employee {
    var hourlyRate: Double
    var hoursWorked: Double
    // computed property using { get }
    var earnings: Int {
        get {
            return hourlyRate * hoursWorked
        }
    }
}

در مثال فوق ما یک نرخ ساعتی و همچنین تعداد ساعت‌های کارکرد را داریم که با استفاده از دستورهای زیر قابل تعیین هستند:

1
2
myEmployee.hourlyRate = 9.75
myEmployee.hoursWorked = 40

سپس می‌توانیم دریافتی کارمند را با استفاده از دستور زیر به دست آوریم:

1
let wagesEarned = myEmployee.earnings

در ادامه مثالی پیچیده‌تر را بررسی می‌کنیم.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
struct Employee {
    var hourlyRate: Double = 0
    var hoursWorked: Double = 0
 
 
    // computed property with public get and private set
    private(set) var earnings: Double {
        get { return earnings }
        set { hourlyRate = earnings / hoursWorked }
    }
    init(hourlyRate: Double, hoursWorked: Double) {
        self.hourlyRate = hourlyRate
        self.hoursWorked = hoursWorked
    }
 
 
    func updateEarnings(to amount: Double, hours: Double) {
        guard amount >= 0 else { return }
        guard hours > 0 else { return }
        self.earnings = amount
        self.hoursWorked = hours
    }
}

در کد فوق چند فاصله اضافی درج کرده‌ایم تا خوانایی بهتری داشته باشد. در این مثال یک setter خصوصی در ابتدای (private(set داریم. بدین ترتیب مطمئن می‌شویم که مقدار صحیحی تعیین شده است. ما هرگز یک «دریافتی» (earnings) منفی یا 0 نخواهیم داشت، بنابراین می‌توانیم مطمئن باشیم که earnings مقدار مثبتی دارد و این که قبل از تعیین مقدار واقعی earnings و hoursWorked مقداری کارکرد داشته‌ایم. سپس از setter مربوط به earnings برای به‌روزرسانی مقدار hourlyRate استفاده می‌کنیم.

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

1
updateEarnings(to amount: Double، rate: Double)

اما این بدان معنی است که باید به خاطر بسپاریم آیا hoursWorked یا hourlyRate را تنظیم کرده‌ایم یا نه و بنابراین می‌توانیم بررسی کنیم که کدام مورد نیازمند به‌روزرسانی است.

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

از کد فوق استفاده کنید و ببینید آیا می‌توانید آن را به نحوی بازسازی و اصلاح کنید که بتوان از دو تابع برای به‌روزرسانی دریافتی‌ها و ساعت‌های کاری یا نرخ دستمزد استفاده کرد. به این ترتیب struct کارمند قابلیت استفاده بیشتری می‌یابد. حتی می‌توان از آن برای محاسبه تغییرها برای پرداخت‌های شخصی نیز استفاده کرد. برای نمونه با افزودن یک فلگ isPaidHourly می‌توان ساعت‌ها را در صورت false بودن به صورت خودکار روی 40 تنظیم کرد و متدی برای به‌روزرسانی کارگران مزدبگیر داشت.

نکته: با این که می‌توان از optional-ها و اعلان متدی مانند زیر استفاده کرد:

1
updateEarnings(to amount: Double، hours: Double?، rate: Double?)

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

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

جمع‌بندی

ما در این مقاله با مفاهیم inout ،lazy و get و set آشنا شدیم. همچنین روش استفاده از آن‌ها و بهترین کاربردشان را دیدیدم. Inout زمانی استفاده می‌شود که بخواهیم یک مقدار را با ارجاع ارسال کنیم. اپل در مستندات خود (+) یک راهنما در مورد این موضوع منتشر کرده است.

Lazy زمانی استفاده می‌شود که بخواهیم یک مقداردهی با تأخیر برای هر چیزی داشته باشیم که شاید همیشه در زمان بارگذاری یک کلاس یا struct مورد استفاده قرار نمی‌گیرد. برای کسب اطلاعات بیشتر در این خصوص می‌توانید به این صفحه از مستندات اپل (+) مراجعه کنید.

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

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

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

منبع: فرادرس

مشاوره شنبه 29 تیر 1398 ساعت 14:17

0 نظر

الگوریتم بازی مار و پله همراه با کد — به زبان ساده

بازی مار و پله (Snakes and Ladders)، یک بازی باستانی هندی است که اکنون یک بازی کلاسیک جهانی محبوب محسوب می‌شود. این بازی قابل انجام بین دو یا تعداد بیشتری بازیکن است. صفحه بازی مار و پله، شطرنجی است؛ در این بازی، در برخی از خانه‌ها نردبان‌هایی وجود دارد که فرد را به خانه‌های بالاتر می‌رساند و در بعضی از خانه‌ها، مارهایی وجود دارد که فرد را اصطلاحا نیش می‌زنند و به خانه‌های پایین‌تری انتقال می‌دهند (جایی که دم مار در آن قرار دارد). بازی به این صورت انجام می‌شود که هر بازیکن تاس می‌اندازد و با توجه به عددی که می‌آید، تعداد خانه‌هایی را به جلو حرکت می‌کند. بسته به عدد تاس، ممکن است فرد در یک خانه عادی، دارای نربان و یا دارای مار قرار بگیرد. در «مساله مار و پله» (Snake and Ladder Problem)، هدف پیدا کردن کمترین تعداد دفعات پرتاب تاس لازم برای رسیدن به مقصد (آخرین خانه در صفحه شطرنجی) از مبدا (اولین خانه) است. این مساله کمی با بازی تخته‌ای متداول مار و پله که افراد بازی می‌کنند متفاوت است و در آن، بازیکن بر عددی که در پرتاب تاس به دست می‌آید کنترل دارد و باید اعدادی را پیدا کند که با کمترین تعداد پرتاب تاس به خانه نهایی برسد. در ادامه، الگوریتم بازی مار و پله (در واقع الگوریتم لازم برای حل این مساله) ارائه و پیاده‌سازی آن در زبان‌های برنامه‌نویسی «پایتون» (Python)، «جاوا» (Java)، «سی‌پلاس‌پلاس» (++C) و «سی‌شارپ» (#C) انجام شده است.

الگوریتم بازی مار و پله همراه با کد

الگوریتم بازی مار و پله

برای مثال، در صفحه بازی موجود در تصویر بالا، تعداد پرتاب‌های تاس لازم برای رسیدن از خانه ۱ به خانه ۳۰ برابر با سه است. گام‌های زیر برای آنکه بازیکن با سه پرتاب تاس به نتیجه برسد انجام می‌شود.

ابتدا تاس دو انداخته می‌شود تا بازیکن از خانه یک به خانه سه برود و با استفاده از نردبان به خانه ۲۲ برسد.
سپس، تاس ۶ انداخته می‌شود تا فرد از خانه ۲۲ به خانه ۲۸ برسد.
در نهایت، با انداختن تاس ۲، بازیکن به خانه ۳۰ (مقصد نهایی) می‌رسد.

برخی از دیگر راهکارهای موجود برای حل مساله مار و پله (با کمترین تعداد پرتاب تاس) عبارتند از: (2, 2, 6)، (2, 4, 4) و (2, 3, 5).

ایده موجود برای حل این مساله در حالت کلی آن است که صفحه بازی به صورت یک گراف جهت‌دار در نظر گرفته شود. اکنون، مساله یافتن کوتاه‌ترین مسیر در گراف است. هر «راس» (Vertex) از گراف، دارای «یالی» (Edge) به شش راس بعدی است؛ اگر راس‌های بعدی دارای نردبان یا مار نباشند. اگر هر یک از شش راس دارای مار یا نردبان باشند، یال از راس کنونی به راس بالای نردبان یا دم مار متصل می‌شود. با توجه به اینکه همه یال‌ها دارای وزن‌های برابری هستند، می‌توان کوتاه‌ترین مسیر را با استفاده از «جستجوی اول عمق» (Breadth First Search) کشف کرد. در ادامه، پیاده‌سازی ایده بالا با استفاده از زبان‌های برنامه‌نویسی گوناگون انجام شده است. ورودی با دو چیز نمایش داده شده است: N که تعداد خانه‌های صفحه بازی است و آرایه [move[0…N-1 با اندازه N. یک ورودی [move[i برابر با ۱- است اگر هیچ مار یا نردبانی از i وجود نداشته باشد؛ در غیر این صورت، [move[i حاوی اندیس سلول مقصد برای مار یا نردبان در i است.

پیاده سازی الگوریتم بازی مار و پله در ++C

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
95
96
97
98
99
100
101
102
103
104
// C++ program to find minimum number of dice throws required to 
// reach last cell from first cell of a given snake and ladder 
// board 
#include<iostream> 
#include <queue> 
using namespace std; 
  
// An entry in queue used in BFS 
struct queueEntry 
{ 
    int v;     // Vertex number 
    int dist;  // Distance of this vertex from source 
}; 
  
// This function returns minimum number of dice throws required to 
// Reach last cell from 0'th cell in a snake and ladder game. 
// move[] is an array of size N where N is no. of cells on board 
// If there is no snake or ladder from cell i, then move[i] is -1 
// Otherwise move[i] contains cell to which snake or ladder at i 
// takes to. 
int getMinDiceThrows(int move[], int N) 
{ 
    // The graph has N vertices. Mark all the vertices as 
    // not visited 
    bool *visited = new bool[N]; 
    for (int i = 0; i < N; i++) 
        visited[i] = false; 
  
    // Create a queue for BFS 
    queue<queueEntry> q; 
  
    // Mark the node 0 as visited and enqueue it. 
    visited[0] = true; 
    queueEntry s = {0, 0};  // distance of 0't vertex is also 0 
    q.push(s);  // Enqueue 0'th vertex 
  
    // Do a BFS starting from vertex at index 0 
    queueEntry qe;  // A queue entry (qe) 
    while (!q.empty()) 
    { 
        qe = q.front(); 
        int v = qe.v; // vertex no. of queue entry 
  
        // If front vertex is the destination vertex, 
        // we are done 
        if (v == N-1) 
            break; 
  
        // Otherwise dequeue the front vertex and enqueue 
        // its adjacent vertices (or cell numbers reachable 
        // through a dice throw) 
        q.pop(); 
        for (int j=v+1; j<=(v+6) && j<N; ++j) 
        { 
            // If this cell is already visited, then ignore 
            if (!visited[j]) 
            { 
                // Otherwise calculate its distance and mark it 
                // as visited 
                queueEntry a; 
                a.dist = (qe.dist + 1); 
                visited[j] = true; 
  
                // Check if there a snake or ladder at 'j' 
                // then tail of snake or top of ladder 
                // become the adjacent of 'i' 
                if (move[j] != -1) 
                    a.v = move[j]; 
                else
                    a.v = j; 
                q.push(a); 
            } 
        } 
    } 
  
    // We reach here when 'qe' has last vertex 
    // return the distance of vertex in 'qe' 
    return qe.dist; 
} 
  
// Driver program to test methods of graph class 
int main() 
{ 
    // Let us construct the board given in above diagram 
    int N = 30; 
    int moves[N]; 
    for (int i = 0; i<N; i++) 
        moves[i] = -1; 
  
    // Ladders 
    moves[2] = 21; 
    moves[4] = 7; 
    moves[10] = 25; 
    moves[19] = 28; 
  
    // Snakes 
    moves[26] = 0; 
    moves[20] = 8; 
    moves[16] = 3; 
    moves[18] = 6; 
  
    cout << "Min Dice throws required is " << getMinDiceThrows(moves, N); 
    return 0; 
}

پیاده سازی الگوریتم بازی مار و پله در پایتون

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
95
96
97
# Python3 program to find minimum number 
# of dice throws required to reach last 
# cell from first cell of a given 
# snake and ladder board 
  
# An entry in queue used in BFS 
class QueueEntry(object): 
    def __init__(self, v = 0, dist = 0): 
        self.v = v 
        self.dist = dist 
  
'''This function returns minimum number of 
dice throws required to. Reach last cell  
from 0'th cell in a snake and ladder game. 
move[] is an array of size N where N is  
no. of cells on board. If there is no  
snake or ladder from cell i, then move[i]  
is -1. Otherwise move[i] contains cell to 
which snake or ladder at i takes to.'''
def getMinDiceThrows(move, N): 
      
    # The graph has N vertices. Mark all 
    # the vertices as not visited 
    visited = [False] * N 
  
    # Create a queue for BFS 
    queue = [] 
  
    # Mark the node 0 as visited and enqueue it 
    visited[0] = True
  
    # Distance of 0't vertex is also 0 
    # Enqueue 0'th vertex 
    queue.append(QueueEntry(0, 0)) 
  
    # Do a BFS starting from vertex at index 0 
    qe = QueueEntry() # A queue entry (qe) 
    while queue: 
        qe = queue.pop(0) 
        v = qe.v # Vertex no. of queue entry 
  
        # If front vertex is the destination 
        # vertex, we are done 
        if v == N - 1: 
            break
  
        # Otherwise dequeue the front vertex  
        # and enqueue its adjacent vertices  
        # (or cell numbers reachable through 
        # a dice throw) 
        j = v + 1
        while j <= v + 6 and j < N: 
          
            # If this cell is already visited, 
            # then ignore 
            if visited[j] is False: 
                  
                # Otherwise calculate its  
                # distance and mark it  
                # as visited 
                a = QueueEntry() 
                a.dist = qe.dist + 1
                visited[j] = True
  
                # Check if there a snake or ladder 
                # at 'j' then tail of snake or top 
                # of ladder become the adjacent of 'i' 
                a.v = move[j] if move[j] != -1 else j 
  
                queue.append(a) 
  
            j += 1
  
    # We reach here when 'qe' has last vertex 
    # return the distance of vertex in 'qe 
    return qe.dist 
  
# driver code 
N = 30
moves = [-1] * N 
  
# Ladders 
moves[2] = 21
moves[4] = 7
moves[10] = 25
moves[19] = 28
  
# Snakes 
moves[26] = 0
moves[20] = 8
moves[16] = 3
moves[18] = 6
  
print("Min Dice throws required is {0}". 
       format(getMinDiceThrows(moves, N))) 
  
# This code is contributed by Ajitesh Pathak

پیاده سازی الگوریتم بازی مار و پله در جاوا

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
95
96
97
98
99
100
101
// Java program to find minimum number of dice  
// throws required to reach last cell from first  
// cell of a given snake and ladder board 
  
import java.util.LinkedList; 
import java.util.Queue; 
  
public class SnakesLadder  
{ 
    // An entry in queue used in BFS 
    static class qentry  
    { 
        int v;// Vertex number 
        int dist;// Distance of this vertex from source 
    } 
  
    // This function returns minimum number of dice  
    // throws required to Reach last cell from 0'th cell  
    // in a snake and ladder game. move[] is an array of  
    // size N where N is no. of cells on board If there  
    // is no snake or ladder from cell i, then move[i]  
    // is -1 Otherwise move[i] contains cell to which  
    // snake or ladder at i takes to. 
    static int getMinDiceThrows(int move[], int n)  
    { 
        int visited[] = new int[n]; 
        Queue<qentry> q = new LinkedList<>(); 
        qentry qe = new qentry(); 
        qe.v = 0; 
        qe.dist = 0; 
  
        // Mark the node 0 as visited and enqueue it. 
        visited[0] = 1; 
        q.add(qe); 
  
        // Do a BFS starting from vertex at index 0 
        while (!q.isEmpty())  
        { 
            qe = q.remove(); 
            int v = qe.v; 
  
            // If front vertex is the destination  
            // vertex, we are done 
            if (v == n - 1) 
                break; 
  
            // Otherwise dequeue the front vertex and  
            // enqueue its adjacent vertices (or cell  
            // numbers reachable through a dice throw) 
            for (int j = v + 1; j <= (v + 6) && j < n; ++j)  
            { 
                // If this cell is already visited, then ignore 
                if (visited[j] == 0) 
                { 
                    // Otherwise calculate its distance and  
                    // mark it as visited 
                    qentry a = new qentry(); 
                    a.dist = (qe.dist + 1); 
                    visited[j] = 1; 
  
                    // Check if there a snake or ladder at 'j' 
                    // then tail of snake or top of ladder 
                    // become the adjacent of 'i' 
                    if (move[j] != -1) 
                        a.v = move[j]; 
                    else
                        a.v = j; 
                    q.add(a); 
                } 
            } 
        } 
  
        // We reach here when 'qe' has last vertex 
        // return the distance of vertex in 'qe' 
        return qe.dist; 
    } 
  
    public static void main(String[] args)  
    { 
        // Let us construct the board given in above diagram 
        int N = 30; 
        int moves[] = new int[N]; 
        for (int i = 0; i < N; i++) 
            moves[i] = -1; 
  
        // Ladders 
        moves[2] = 21; 
        moves[4] = 7; 
        moves[10] = 25; 
        moves[19] = 28; 
  
        // Snakes 
        moves[26] = 0; 
        moves[20] = 8; 
        moves[16] = 3; 
        moves[18] = 6; 
  
        System.out.println("Min Dice throws required is " +  
                          getMinDiceThrows(moves, N)); 
    } 
}

خروجی:

Min Dice throws required is 3

پیچیدگی زمانی راهکار بالا از درجه (O(N است؛ زیرا هر سلول تنها یک‌بار به «صف» (Queue) اضافه و کم می‌شود و یک فرایند معمول افزودن به صف یا حذف کردن از آن از درجه زمانی (O(1 است.

منبع: فرادرس

مشاوره شنبه 29 تیر 1398 ساعت 14:17

0 نظر

آموزش پایتون با ساخت اپلیکیشن های واقعی

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

چنان که پیش‌تر در مقاله «برترین و محبوب‌ترین زبان‌های برنامه‌نویسی در سال 2۰1۸» در مجله فرادرس دیدیم، زبان پایتون با در نظر گرفتن شاخص‌های مختلف در رتبه سومین زبان محبوب در طی سال گذشته قرار گرفته است.

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

آموزش پایتون

فهرست مقالات آموزش پایتون با ساخت اپلیکشین های واقعی

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

ساخت اپلیکیشن دیکشنری — از صفر تا صد

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

ساخت اپلیکیشن نقشه وب — به زبان ساده

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

ساخت اپلیکیشن مسدودکننده وب‌سایت در 3 مرحله — به زبان ساده

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

ساخت و انتشار وب‌سایت با Flask — به زبان ساده

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

تحلیل احساسات توییتر در 3 دقیقه — به زبان ساده

در ادامه سری مطالب آموزش پایتون با ساخت اپلیکیشن های واقعی در مجله فرادرس در بخش پنجم آن یک اسکریپت پایتون می‌نویسیم که برای تحلیل احساسات توییتر افراد مختلف در مورد یک موضوع خاص استفاده می‌شود. بدین منظور از یک کتابخانه «پردازش زبان طبیعی» (Natural Language Processing) به نام TextBlob استفاده شده است. سادگی کار با کتابخانه‌های پایتون حیرت‌انگیز است به طوری که در این راهنما صرفاً با نوشتن 15 خط کد موفق شده‌ایم، یک اپلیکیشن تحلیل احساسات در پایتون بنویسیم.

وب اسکرپینگ سایت FiFa.com با BeautifulSoup — راهنمای کاربردی

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

ساخت وب اپلیکیشن برای گردآوری داده با PostgreSQL و Flask

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

مفاهیم OpenCV برای تشخیص چهره و حرکت — راهنمای مقدماتی

در بخش هشتم از این سری مقالات آموزش پروژه محور پایتون به معرفی کتابخانه OpenCV می‌پردازیم. این کتابخانه مشهور پایتون به منظور پیاده‌سازی الگوریتم‌های بینایی ماشین طراحی شده است. با استفاده از OpenCV می‌توانید اپلیکیشن‌های مختلفی برای تشخیص چهره و موارد دیگر بنویسید. در این بخش با روش‌های بارگذاری تصاویر، تغییر اندازه تصاویر و تشخیص چهره در تصاویر و ویدئوهای زنده آشنا خواهیم شد.

ساخت نمودارهای مالی با Bokeh — از صفر تا صد

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

سخن پایانی

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

منبع: فرادرس

مشاوره شنبه 29 تیر 1398 ساعت 14:16

0 نظر

332
1
...
43
44
صفحه 45
46
47
...
67

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

ابر برجسب

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

بایگانی

جستجو

قابلیت های پیشرفته جداول HTML — راهنمای کاربردی

ارائه توضیح مختصر راجع به جدول با <caption>

مثال کاربردی: افزودن <caption>

افزودن ساختار با <thead> ،<tfoot> و <tbody>

مثال کاربردی: افزودن ساختار جدول

فایل spending-record.html

فایل minimal-table.css

جداول تودرتو

جداول HTML برای کاربران دچار نقص بینایی

استفاده از هدرهای ردیف و ستون

خصوصیت scope

خصوصیت‌های id و headers

مثال کاربردی: کار کردن با scope و headers

فایل items-sold.html

فایل کامل شده مثال هزینه‌های مصرفی با استفاده از scope

فایل کامل شده مثال هزینه‌های مصرفی با استفاده از headers

جمع‌بندی

جستجوی فیبوناچی (Fibonacci Search) — به زبان ساده

آموزش سوئیفت (Swift): آشنایی با Getter و Setter — بخش شانزدهم

inout

Lazy

Getter و Setter

جمع‌بندی

الگوریتم بازی مار و پله همراه با کد — به زبان ساده

الگوریتم بازی مار و پله

پیاده سازی الگوریتم بازی مار و پله در ++C

پیاده سازی الگوریتم بازی مار و پله در پایتون

پیاده سازی الگوریتم بازی مار و پله در جاوا

آموزش پایتون با ساخت اپلیکیشن های واقعی

فهرست مقالات آموزش پایتون با ساخت اپلیکشین های واقعی

سخن پایانی