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

به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی

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

به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی

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


آدرس : خیابان شریعتی بالاتر از ملک جنب بانک صادرات طبقه دوم واحد 7
همراه: 09123840871 تلفن: 88146323 - 88146330

  • ۰
  • ۰
آموزش طراحی سایت : من معتقدم HTML5 دستاورد بزرگی خواهد بود (بسیاری از مردم هم چنین اعتقادی دارند.). این برنامه ممکن است روش لباس پوشیدن و غذا خوردن ما را تغییر ندهد، اما مطمئنا روش توسعه ی برنامه های وب و طراحی صفحات وب را در 10 سال آینده تغییر خواهد داد. به هرحال این صفحه آموزش HTML نمی باشد. HTML5 چیز کاملا جدیدی نمی باشد. بسیاری از ویژگی های HTML5 از HTML4 یا HTML1.0 گرفته شده اند. با زمان و انرژی محدودم می توانم فقط آنچه را در HTML5 جدید است و تمرینات قدیمی که دیگر مورد استفاده نیستند را پوشش دهم.
این یک سایت HTML5 می باشد. هنگامی که در حال کشف و یادگیری HTML5 هستم، امیدوارم بتوانم آنچه را که یاد گرفته ام با شما به اشتراک بگذارم.
" دو نوع انگیزه وجود دارد که با دونوع هدف منطبق می شود. انگیزه های سلطه گرایی هستند که هدف آنها رسیدن به متعلقات شخصی می باشد که نمی توان به اشتراک گذاشت و در مرکز انگیزه ی مادی قرار می گیرند. انگیزه های خلاقانه نیز وجود دارند که هدف آنها آوردن اموالی است که در آنها هیچ گونه تملک و یا شخصی بودنی وجود ندارد.
بهترین زنگی، آن زندگی میباشد که انگیزه های خلاقانه بیشترین نقش را داشته و انگیزه های مالی کمترین را.
برتراند راسل (1872 –1970)
با توجه به این نوشته HTML5 یک نسخه ی در حال کار می باشد. به عبارت دیگر HTML5 هنوز یک کار در حال پیشروی می باشد. ویژگی های آن در W3C منتشر شده و روز به روز تغییر می کند.

 

چرا HTML5 مهم است؟
حتمالا تاکنون در مورد HTML5 شنیده اید، فکر می کنم محبوب ترین برنامه ای که فیلم را بدون Adobe Flash اجرا می کند، باید از آقای استیو جابز برای تبدیل آن به یک فن آوری معروف تشکر کرد. علاوه بر این ممکن است در مورد ایجاد انیمیشن بدون پلاگین، کنترل ورودی غنی مانند دیت پیکر، کالرپیکر، اسلایدر بدون جاوااسکریپت و در انتها ذخیره ی داده ی برون خطی (آفلاین) نیز شنیده باشید. به هرحال این هم فقط بخشی از HTML5 می باشد. چه وقت؟ WC3 در فوریه ی 2011 اعلام کرد که جولای 2014 تاریخی است که HTML5 پیشنهاد رسمی برای استاندارد وب می شود. زمان را فراموش کنید: واقعیت این است که جدول زمانی پیشنهادی از طرف WHATWG واقعا اتفاق نیفتاد. توسعه ی وب در دستان دو گروه از مردم واقع شده است. اولین گروه کمپانی های مرورگر معروفی مانند Mozilla، مایکروسافت، اپل، گوگل و اپرا می باشند. گروه دوم نیز طراحان و توسعه دهندگان وب در این زمینه می باشند. ضعفHTML1.1 و HTML 2 خیلی ساده است، کمپانی های مرورگر فکر می کردند که ایده ی احمقانه است، بنابراین درهای خود را به روی آن بستند. امروزه بسیاری از مرورگرها به شدت تمایل دارند که از HTML5 پشتیبانی کنند.
هیچ دلیلی وجود ندارد که طراحان تحت تاثیر HTML5 قرار نگیرند، زیرا که زندگی را از همیشه برای ما آسانتر کرده است.
اعلام نوع داکیومنت در HTML5 هم ساده و هم جالب می باشد. این کار به سادگی زیر میباشد:
‎<!DOCTYPE html>
و ‎بر خلاف doctype در HTML1 و HTML4 که با آن آشنا هستیم:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">‎
‎<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ‎‎"HTTP>
/www.w3.org/TR/html4/loose.dtd">‎
‎<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" ‎‎"HTTP>
/www.w3.org/TR/html4/frameset.dtd">‎
‎<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ‎‎"HTTP>
/www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">‎
‎<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ‎‎"HTTP>
/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">‎
 
برخی از آنها حتی در یک خط نوشته نمی شوند. این اولین دلیلی است که نشان می دهد کار طراحان وب با HTML5 راحت تر شده. یک صفحه ی HTML5 می تواند به سادگی زیر باشد:
<!DOCTYPE html>‎
<html>‎
<head> ‎
<title>HTML5 is rocks!</title> ‎
</head>‎
<body>
‎ <h1>HTML5 Rocks!</h1> ‎
</body>‎
</html>‎

 

آموزش کن وس Canvas
آموزش طراحی سایت : یکی از داغ ترین موضوعات HTML5 موضوع canvas می باشد، اما دقیقا canvas چیست؟ canvas یک پارچه ی ساده بافته شده ی سنگین می باشد که برای ساختن قایق، چادر، کوله پشتی، خیمه و دیگر ابزاری که استحکام لازم دارند، استفاده می شود. و همچنین توسط نقاشان به عنوان سطح نقاشی که روی چارچوب چوبی نصب شده باشد، استفاده می شود. شاید این جوابی که شما به دنبال آن بودید، نباشد.به هرحال canvas در HTML5 از کاربرد آن توسط هنرمندان تقلید می کند و بوم نقاشی نامیده می شود.بوم نقاشی یک فضای خالی بدون رنگ ( حتی بدون سفید) است، که قرار است با مداد و قلم موی جاوااسکریپت تبدیل به یک کار هنری شود. البته که وجود بوم نقاشی تنها برای یک تصویر ثابت نیست. تصویر ثابت می تواند به سادگی به وسیله ی عنصر قدیمی img مورد بررسی قرار بگیرد. با جاوااسکریپت به عنوان قلم موی خود، می توانید یک انیمیشن شاد و یا حتی بازیهای تکرار شونده ایجاد کنید. اگر قبلا انیمیشن های درخشانی ایجاد کرده اید و امید دارید که یک ورژن HTML5 ایجاد کنید، ابزاری وجود دارند که در انجام آن به شما کمک می کنند. یکی از آنها Flash to HTML5 می باشد.HTML5 مقوله ی خیلی بزرگی است، آنقدر بزرگ که می توانید در مورد آن یک کتاب بنویسید. هدف من در این آموزش تحت پوشش قرار دادن جزئیات مربوط به بوم نقاشی نیست، بلکه تنها معرفی مختصری از آن است. به یاد داشته باشد که این تنها شروع آن است. برای ایجاد بوم نقاشی، کد ساده ی زیر لازم است.
‎<canvas width="200" height="200"></canvas>‎
به هرحال به یاد داشته باشید که مرز یک بوم نقاشی یک آبجکت ناپیداست. این برنامه فضایی را می گیرد اما شما آن را نمی بینید. اجازه دهید یک سبک مرزی اضافه کرده و از ID برای مرجع استفاده کنیم. هدف از ID این است که با استفاده از DOM (document object model) آن را قابل دسترس کنیم. بدون مرجع ID، جاوا اسکریپت، در این مورد قلم موی شما، هیچ ایده ای برای نقاشی روی بوم ندارد.
‎<canvas id="Canvas1" width="200" height="200" style="border:solid 1px #000000"</canvas>‎
 
کن وس Rectangle در آموزش طراحی سایت
ابتدا روی دکمه ی قرمز کلیک کنید. اگر دکمه ی قرمز در بوم نقاشی نمی بینید، احتمالا تمایل داشته باشید مرورگر درستی برای ادامه بگیرید.
 
<canvas id="c1" width="200" height="200" style="border:solid 1px #000000;"></canvas>
‎<button onclick="draw_square();return true;">Red Square</button>
<script>
function draw_square() {
‎ var c1 = document.getElementById("c1");
‎ var c1_context = c1.getContext("2d");
‎ c1_context.fillStyle = "#f00";
‎ c1_context.fillRect(50, 50, 100, 100);
‎}
‎</script>‎
برای کشیدن هرچیزی در بوم نقاشی، چیزی بین برچسب opening و برچسب closing از <canvas> قرار ندهید، مرورگرهایی که بوم نقاشی را پشتیبانی می کنند، آن را نادیده خواهند گرفت. شما می توانید فقط از جاوااسکریپت برای انجام نقاشی خود استفاده کنید. قانون شماره یک، عنصر بوم نقاشی شما باید دارای یک ID باشد، بنابراین می توانیم از جاوااسکریپت برای قراردادن آن استفاده کنیم. قانون شماره دو، هر بوم نقاشی دارای یک کانتکست می باشد. در واقع کانتکست بوم نقاشی آن چیزی است که قرار است روی آن نقاشی بکشیم، نه خود بوم.
var c1 = document.getElementById("c1");
var c1_context = c1.getContext("2d");‎
ز لحاظ نگارش، نه تنها کانتکست های دو بعدی، بلکه سه بعدی آن نیز در دسترس می باشند. به هرحال کانتکست سه بعدی که webGL نامیده می شود، برای شما توسط W3G یا WHATWG آورده نمی شودبلکه توسط یک شرکت غیرانتفاعی به نام Khronos Group ارائه می شود. علاوه بر آن گوگل هم در دسامبر 2010 برای اطمینان بیشتر آینده ی این استاندارد، تولید شگفت انگیز Body Browser را آزاد کرد. اجازه دهید از رنگ قرمز (fillStyle="#f00";) استفاده کرده و یک مربع قرمز با اضلاع 100px بکشیم.
c1_context.fillStyle = "#f00";
c1_context.fillRect(50, 50, 100, 100);‎
جدول زیر روش های کشیدن مستطیل را نشان می دهد.
 
<div>
<canvas id="Canvas2" width="200" height="200" style="border:solid 1px #000000;"></canvas>
‎ <div>
‎ <button onclick="blue_square_2();return true;">Blue Square</button>
‎ <button onclick="red_stroke_2();return true;">Red Square</button>
‎ <button onclick="clear_rect_2();return true;">Erase Everything</button>
</div>
</div>
<script>
‎ var c2 = document.getElementById("c2");
‎ var c2_context = c2.getContext("2d");
‎ function blue_square_2() { //Blue color square
‎ c2_context.fillStyle = "#00f";
‎ c2_context.fillRect(50, 50, 100, 100);
‎ }
‎ function red_stroke_2() { //Red color edges
‎ c2_context.strokeStyle = "#f00";
‎ c2_context.strokeRect(45, 45, 110, 110);
‎ }
‎ function clear_rect_2() { //Clear all
‎ c2_context.clearRect(40, 40, 120, 120);
‎ }
‎</script>‎
 
آموزش طراحی سایت ادامه دارد
  • افشین رفوآ
  • ۰
  • ۰
سلام عزیزان در این سری آموزشها با پایگاه داده Sql Server آشنا میشوید.
در قسمت قبل با مفاهیم زیر آشنا شدید:
با ادامه آموزش Sql server همراه باشید
 

 

آموزش Sql server : دستور SELECT DISTINCT
در یک جدول یک ستون ممکن است حاوی داده های تکراری باشد و بعضی مواقع شما می خواهید تنها لیستی را تهیه کنید که مشخصاً داده های مختلف (distinct) در آن باشد.
از کلید واژه DISTINCT میتوان برای بازگرداندن مقادیر مشخصاً متفاوت استفاده کرد.
فرم دستور SELECT DISTINCT:
SELECT DISTINCT column_name , column_name
FROM table_name;
نحوه استفاده از SELECT DISTINCT در پایگاه داده
در این آموزش از نمونه پایگاه داده مشهور Northwind استفاده خواهیم کرد.
جدول زیر از میان جدول "Customers" انتخاب شده است:
 
مثال استفاده از SELECT DISTINCT
دستور SQL زیر تنها مقادیر مختلف را از ستون "City" واقع در جدول "Customers" انتخاب می کند:
SELECT DISTINCT City FROM customers;
 

 

دستور WHERE در آموزش Sql server

 

عبارت WHERE در SQL
عبارت WHERE برای استخراج رکوردهایی استفاده می شود که در طبقه بندی بخصوصی جای می گیرند.

 

فرم عبارت WHERE
SELECT column_name,column_name
FROM table_name
WHERE column_name operator value;
 

 

 

 

نحوه استفاده از WHERE در پایگاه داده
در این آموزش از نمونه پایگاه داده مشهور Northwind استفاده خواهیم کرد.
جدول زیر از میان جدول "Customers " انتخاب شده است:
 

 

مثال استفاده از عبارت WHERE
دستور SQL زیر تمام customer هایی را که اهل کشور(Country") Mexico") ) هستند از جدول "Customers" انتخاب می کند:
SELECT * FROM Customers
WHERE Country='Mexico';
تفاوت استفاده از کوتیشن (") در داده های متنی و داده های عددی در SQL مسلزم استفاده ازکوتیشن در اطراف مقادیر متنی هستید. (اکثر سیستم های پایگاه داده اجازه استفاده از دابل کوتیشن (" ") را به کاربران می دهند)
درحالیکه داده های عددی نباید در داخل کوتیشن قرار گیرند:
SELECT * FROM Customers
WHERE CustomerID=1;

 

عملگرهای عبارت WHERE
از عملگر های زیر می توان در عبارت WHERE استفاده کرد:
عملگرهای عبارت WHERE در sql server
 
آموزش Sql server ادامه دارد
  • افشین رفوآ
  • ۰
  • ۰
سلام دوستان ...در قسمت قبل آموزش پایتون مفاهیم زیر را یاد دادیم
  • آموزش خواندن و نوشتن فایل در زبان برنامه نویسی پایتون
  • آموزش خطاها و استثناها در برنامه نویسی پایتون
  • آموزش مدیریت استثناها در آموزش پایتون
 
با ادامه آموزش پایتون همراه ما باشید.
 

 

آموزش اعلام استثناها در برنامه نویسی پایتون
عبارت raise به برنامه نویس این امکان را می دهد تا یک استثنای خاص را مجبور به رخ دادن کند. برای مثال:
>>> raise NameError('HiThere')
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
NameError: HiThere
</module></stdin>
تنها آرگومان raise بیان می کند که استثنا اعلام شود. این یا باید یک نمونه استثنا (exception instance) باشد یا یک کلاس استثنا ( یک کلاس که از Exception مشتق شده باشد). اگر یک کلاس استثنا پاس شود، با فراخوانی سازنده آن بدون هیچ آرگومانی، به طور ضمنی نمونه گیری می شود.
raise ValueError  # shorthand for 'raise ValueError()'
اگر باید تعیین کنید که آیا یک استثنا اعلام شده اما قصد مدیریت آن را ندارید، حالت ساده تری از عبارت raise به شما این امکان را می دهد تا استثنا را دوباره اعلام کنید.
>>> try:
... raise NameError('HiThere')
... except NameError:
... print('An exception flew by!')
... raise
...
An exception flew by!
Traceback (most recent call last):
File "<stdin>", line 2, in <module>
NameError: HiThere
</module></stdin>

 

آموزش استثناهای تعریف شده توسط کاربر در آموزش پایتون
برنامه ها ممکن است با ساخت یک کلاس جدید استثنا، خود برای استثناهای خود نام بگذارند
معمولا استثناها باید به طور مستقیم یا غیر مستقیم از کلاس Exception مشتق شوند.
کلاس های استثنا را میتوان به گونه ای تعریف کرد که کارهایی که هر کلاس دیگری انجام می دهد را بتوانند انجام دهند، اما معمولا آنها را ساده می سازند. این کلاس ها اغلب فقط تعدادی ویژگی ارائه می کنند که امکان استخراج اطلاعات درباره خطا توسط اداره کننده خطا (handler) را فراهم می کند.
در زمان ایجاد ماژولی که بتواند چندین خطای متمایز را اعلام کند، معمول است که یک کلاس پایه برای استثناهای تعریف شده توسط آن ماژول ایجاد کنند، و نیز زیر کلاسی برای ایجاد کلاس های استثنای خاص برای شرایط متفاوت خطا بسازند.
class Error(Exception):
"""Base class for exceptions in this module."""
pass
 
class InputError(Error):
"""Exception raised for errors in the input.
 
Attributes:
expression -- input expression in which the error occurred
message -- explanation of the error
"""
 
def __init__(self, expression, message):
self.expression = expression
self.message = message
 
class TransitionError(Error):
"""Raised when an operation attempts a state transition that's not
allowed.
 
Attributes:
previous -- state at beginning of transition
next -- attempted new state
message -- explanation of why the specific transition is not allowed
"""
 
def __init__(self, previous, next, message):
self.previous = previous
self.next = next
اکثر استثناها، مشابه نامگذاری استثناهای استاندارد، با نام هایی که به “Error” ختم می شود تعریف می شوند. بسیاری از ماژول های استاندارد به منظور گزارش خطاهایی که ممکن است در توابعی که خود تعریف کرده اند رخ دهد، استثناهای خود را تعریف می کنند.

 

آموزش تعریف عملیات تمیزکاری در برنامه نویسی آموزش پایتون
عبارت try یک بخش اختیاری دیگری نیز دارد که وظیفه آن تعریف عملیات تمیزکاری (clean-up actions) است که تحت هر شرایطی باید اجرا شوند. برای مثال:
>>> try:
... raise KeyboardInterrupt
... finally:
... print('Goodbye, world!')
...
Goodbye, world!
KeyboardInterrupt
Traceback (most recent call last):
File "<stdin>", line 2, in <module>
</module></stdin>
اگر یک بخش finally وجود داشته باشد، این بخش finally به عنوان اخرین وظیفه قبل از تکمیل شدن عبارت try اجرا خواهد شد. بخش finally ، چه عبارت try، استثنایی تولید کند یا نکند، اجرا می شود. نکات زیر موارد پیچیده تری از زمانی که استثنا رخ می دهد را بیان می کند.
  • اگر استثنایی در حین اجرای بخش try رخ دهد، استثنا ممکن است توسط بخش except اداره شود. اگر استثنا توسط بخش except اداره نشود، استثنا پس از اجرای بخش finally ، دوباره اعلام می شود.
  • یک استثنا می تواند در حین اجرای یک بخش except یا else رخ دهد. مجددا، استثنا پس از اجرای بخش finally ، دوباره اعلام می شود.
  • اگر عبارت try به یک عبارت break ، continue یا return برسد، بخش finally دقیقا قبل از اجرای عبارات break ، continue یا return اجرا می شود.
  • اگر بخش finally شامل عبارت return باشد، مقدار بازگشت داده شده، از عبارت return بخش finally خواهد بود، نه مقداری که عبارت return بخش try باز می گرداند.
برای مثال:
>>> def bool_return():
... try:
... return True
... finally:
... return False
...
>>> bool_return()
False
یک مثال پیچیده تر:
>>> def divide(x, y):
... try:
... result = x / y
... except ZeroDivisionError:
... print("division by zero!")
... else:
... print("result is", result)
... finally:
... print("executing finally clause")
...
>>> divide(2, 1)
result is 2.0
executing finally clause
>>> divide(2, 0)
division by zero!
executing finally clause
>>> divide("2", "1")
executing finally clause
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
File "<stdin>", line 3, in divide
TypeError: unsupported operand type(s) for /: 'str' and 'str'
</stdin></module></stdin>
همانطور که می بینید، بخش finally در هر شرایطی اجرا شده است. خطای TypeError که به واسطه تقسیم دو رشته بر هم اعلام شده است، توسط بخش except اداره نشده است، بنابراین پس از اجرای بخش finally دوباره اعلام می شود. در برنامه های دنیای واقعی، استفاده از بخش finally برای آزادسازی منابع خارجی (مانند فایل ها یا ارتباطات شبکه) مفید است، صرف نظر از اینکه آیا استفاده از منبع موفقیت آمیز بوده است.

 

آموزش عملیات تمیزکاری از قبل تعریف شده در برنامه نویسی پایتون
برخی از اشیا عملیات تمیزکاری استانداردی را تعریف می کنند که در زمانی که شی، دیگر مورد نیاز نیست انجام شوند، صرف نظر از اینکه عملیاتی که از آن شی استفاده می کرد موفق بود یا شکست خورد. مثال زیر را ببینید، که می خواهد یک فایل را باز کند و محتویات آن را روی صفحه نمایش چاپ کند.
for line in open("myfile.txt"):
print(line, end="")
مشکل این کد این است که، برای مدت زمان نامعلومی پس از اتمام اجرای این بخش، فایل را باز می گذارد. در کدهای ساده این مسئله ای نیست، اما برای برنامه های بزرگتر می تواند یک مشکل باشد. عبارت with این تضمین را می دهد تا اشیایی مانند فایل ها به گونه ای مورد استفاده قرار گیرند که همیشه فورا و به طور صحیحی تمیز شوند.
with open("myfile.txt") as f:
for line in f:
print(line, end="")
پس از اجرای این عبارت، فایل f همیشه بسته می شود، حتی اگر در حین پردازش خطوط با مشکلی مواجه شود. اشیایی (مانند فایل ها) که عملیات تمیزکاری از پیش تعریف شده را ارائه می کنند، آن را در مستندات خود توضیح می دهند.
دوره آموزش پایتون ادامه دارد
  • افشین رفوآ
  • ۰
  • ۰
سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل با مفهوم زیر آشنا شدیم
  • کار با فرم Form در Bootstrap 4
  • آموزش اعتبارسنجی فرم ها (Form Validation) در Bootstrap
  • آموزش کار با کنترل های ورود اطلاعات Input در بوت استرپ 4
 
حال با ادامه آموزش بوت استرپ 4 از دوره آموزش طراحی سایت همراه باشید:
 

 

آموزش ساخت اسلایدر Carousel در Bootstrap 4
یک اسلایدر یا carousel در بوت استرپ 4، یک اسلاید شو برای نمایش دو یا چند عکس پشت سر هم و تکرار وار است.

 

نحوه ایجاد یک اسلایدر carousel در بوت استرپ 4:
در کد مثال عملی، نحوه ساخت یک اسلایدر carousel را که دارای فلش های حرکت بین عکس ها و کنترل های لازم است را آموزش داده ایم.
به کد مثال و خروجی آن دقت نمایید. در ادامه به تشریح هر بخش پرداخته ایم :

 

مثال 1
<div id="demo" class="carousel slide" data-ride="carousel">
 
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
 
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York">
</div>
</div>
 
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
 
</div>
توضیح مثال : در ادامه به تشریح و آموزش کارکرد هریک از کلاس های استفاده شده در carousel پرداخته ایم :
 
آموزش اضافه کردن عنوان (Caption) به هر عکس اسلایدر:
معمولا در زیر هر عکس یک عنوان یا Caption که در مورد اسلایدر توضیح می دهد، قرار می گیرد.
با استفاده از کلاس های carousel-caption و carousel-item در یک تگ div می توانید توضیح یا Caption برای هر اسلاید تعیین کنید، همانند مثال زیر:

 

مثال 2
<div class="carousel-item">
  <img src="la.jpg" alt="Los Angeles">
  <div class="carousel-caption">
    <h3>Los Angeles</h3>
    <p>We had such a great time in LA!</p>
  </div>
</div>

 

آموزش طراحی سایت آموزش کار با کادر پیام Modal در Bootstrap 4
کامپوننت Modal در چهارچوب کاری بوت استرپ 4، یک کادر نمایش popup است که در بالای صفحه جاری ظاهر شده و نمایش داده می شود. عملکرد Modal شبیه کادر اخطار alert در جاوا اسکریپت است، ولی با ظاهری مدرن تر و زیباتر.

 

آموزش ساخت یک کادر نمایش Modal در بوت استرپ 4:
در کد مثال عملی زیر، نحوه ساخت یک کادر نمایش Modal در Bootstrap 4 را نمایش داده ایم، کد را مطالعه کرده و خروجی را مشاهده نمایید، نکات مهم کد عبارتند از :
  • برای فراخوانی و اجرای کادر نمایش Modal معمولا از یک دکمه button یا تگ link استفاده می شود که با کلیک بر روی آن، کادر ظاهر می شود. این المنت بایستی درای خاصیت data-toggle برابر modal بوده و مقدار خاصیت data-target آن نیز برابر با id المنت Modal تنظیم شود.
  • کادر نمایش Modal در یک تگ یا عنصر دربرگیرنده (مثل تگ div) با کلاس modal قرار گرفته و بدنه اصلی آن را نیز 2 تگ با کلاس های modal-dialog و modal-content تعیین می کنند.
  • یک کادر نمایش Modal می تواند دارای 3 بخش اصلی هدر، بدنه و فوتر باشد که به ترتیب با المنت هایی با کلاس modal-header با modal-body و modal-footer تعریف می شوند.
  • برای تعیین عنوان کادر نمایش Modal از یک عنصر با کلاس modal-tittle استفاده می شود.

 

مثال 1
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
 
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
 
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
 
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
 
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
 
</div>
</div>
</div>

 

اضافه کردن افکت animation به کادر نمایش Modal:
می توانید افکت fade یا محو و ظاهر شدن تدریجی را با اعمال کلاس fade. به کادر نمایش Modal، بدان اضافه نمایید.
مثال: در کد مثال عملی زیر، در کادر نمایش Modal یکی با افکت fade و دیگری بدون افکت ایجاد کرده ایم که می توانید تفاوت در ظاهر شدن را مقایسه نمایید :

 

مثال 2
<!-- Fading modal -->
<div class="modal fade"></div>
 
<!-- Modal without animation -->
<div class="modal"></div>

 

آموزش تعیین سایز کادر نمایش Modal در Bootstrap 4:
می توانید با تعیین کلاس modal-sm، اندازه کادر نمایش Modal را کوچک کرده و با کلاس modal-lg سایزی بسیار بزرگ برایش تعیین نمایید.
کلاس اندازه مورد نظر را بایست به عنصر با کلاس modal-dialog اضافه نمایید. در کد مثال های عملی زیر، سایز مختلف Modal را ایجاد کرده ایم :
مثال 1: حالت کوچک sm

 

مثال sm
<div class="modal-dialog modal-sm">
</div>
مثال2: حالت بزرگ Lg

 

مثال lg
<div class="modal-dialog modal-lg">
</div>
مثال 3: حالت بسیار بزرگ xl

 

مثال xl
<div class="modal-dialog modal-xl">
</div>
نکته :
در حالت پیش فرض، بوت استرپ 4، کادرهای نمایش Modal را در اندازه متوسط md یا medium نمایش می دهد.

 

آموزش وسط نمایش دادن کادر نمایش Modal در بوت استرپ 4:
می توایند با اعمال کلاس modal-dialog-centred به کادر نمایش Modal، هم به صورت افقی و هم عمودی، آن را در وسط صفحه نمایش دهید. همانند کد مثال عملی زیر :

 

مثال center
<div class="modal-dialog modal-dialog-centered">
</div>

 

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

 

مثال scroll
<div class="modal-dialog">
</div>
در حالت قبل، برای دیدن ادامه محتویات کادر نمایش Modal صفحه رو به پایین و بالا اسکرول می شود. اما می توانید با اضافه کردن کلاس modal-dialog-scrollable به عنصر دارای کلاس modal-dialog، کاری کنید خود کادر نمایش Modal دارای نوار اسکرول شده و بدون اسکرول صفحه، مابقی محتویات آن را ببینید. همانند کد مثال عملی زیر :

 

مثال scroll 2
<div class="modal-dialog modal-dialog-scrollable">
</div>

 

آموزش کار با عنوان راهنما tooltip در Bootstrap 4
کامپوننت عنوان راهنما یا tooltip یک کادر کوچک popup است که در هنگام عبور موس از روی یک المنت، ظاهر شده و معمولا توضیحاتی راجع به آن ارائه می دهد.

 

آموزش ایجاد عنوان راهنما tooltip در بوت استرپ 4:
برای ایجاد یک tooltip، خاصیت data-toggle=” tooltip” را به المنت مورد نظرتان اضافه کنید. سپس متن ی که می خواهید در tooltip نمایش داده شود را درون خاصیت title تعیین نمایید. نحوه انجام کار را در کد مثال عملی زیر نشان داده ایم :

 

مثال 1
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
نکته :
برای اجرای صحیح کادر عنوان tooltip در بوت استرپ 4، بایستی آن را توسط jQuery فراخوانی اولیه نمایید. به این صورت که المنت مورد نظر را انتخاب کرده و متد tooltip() را بر رویش اجرا نمایید.
کد زیر برای اجرای اولیه tooltip در Bootstrap 4 توسط jQuery بایستی به صفحه اضافه شود :
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>

 

آموزش تعیین موقعیت قرارگیری tooltip در بوت استرپ 4:
به صورت پیش، کادر متن راهنما tooltip در بالای عنصر نمایش داده می شود.
اما می توانید از خاصیت data-placement برای قرارگرفتن کادر tooltip در بالا (top)، پایین (bottom)، راست (right) و چپ (left) عنصر استفاده نمایید. همانند کد مثال عملی زیر :

 

مثال 2
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
آموزش طراحی سایت ادامه دارد
  • افشین رفوآ
  • ۰
  • ۰
سلام دوستان ... در قسمت قبل آموزش جاوا اسکریپت مفاهیم زیر را یاد دادیم .
  • آموزش عملگر های جایگزین در جاوا اسکریپت
  • آموزش انواع داده در جاوا اسکریپت-data types
  • رشته ها در جاوا اسکریپت
  • آرایه ها (arrays) در جاوا اسکریپت
  • اشیا (objects) در جاوا اسکریپت
حال با ادامه دوره آموزش طراحی سایت همراه باشید
 

 

آموزش توابع (functions) درجاوا اسکریپت
تابع (function) در جاوا اسکریپت عبارت است از یک مجموعه یا بلوکی از کدهای داخل آکولاد {} که برای انجام وظیفه ی (task) خاصی طراحی شده اند. یک تابع زمانی اجرا می شود که چیزی (مانند رویداد onclick) آن را صدا زده یا فرابخواند.
مثال:

 

نمونه یک
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

 

سینتکس یا دستور نحوی تابع در جاوا اسکریپت در آموزش طراحی سایت
نحوه ی تعریف یک تابع در زبان جاوا اسکریپت بدین ترتیب می باشد : در مرحله ی اول کلیدواژه ی function را تایپ می کنیم، سپس یک اسم و به دنبال آن پرانتز () را قرار می دهیم. اسم تابع می تواند دربردارنده ی حروف، اعداد، خط زیرین / underscore و همچنین علامت دلار باشد، در حقیقت همان قواعدی که برای متغیرها رعایت می شود. می توان اسم پارامترها را داخل پرانتز جای گذاری کرده و آن ها را با ویرگول از هم جداسازی کرد، مشابه این نمونه : ...) (parameter1,parameter2, کدی که باید توسط تابع اجرا گردد، داخل آکولاد {} قرار می گیرد.
function name(parameter1‎،‎ parameter2‎،‎ parameter3) {
‎ code to be executed
‎}‎
پارامتر parameter / پارامترهای تابع همان / nameاسامی هستند که در تعریف تابع لیست شده اند.
آرگومان Argument / آرگومان های تابع نیز همان value / مقادیر حقیقی هستند که هنگامی که تابع فراخوانده می شود این مقادیر واقعی به آن (تابع) داده می شوند. داخل تابع، آرگومان ها به عنوان متغیرهای محلی (local variables) مورد استفاده قرار می گیرند.
توجه:
تابع در حقیقت همان زیر روال (subroutine) یا رویه (procedure) در دیگر زبان های برنامه نویسی است.

 

فراخوانی تابع / Function invocation
کد داخل تابع زمانی اجرا می شود که چیزی تابع یا function را صدا بزند. زمانی که یک رویداد یا event رخ می دهد.(برای مثال زمانی که کاربر روی دکمه ی کلیک می کند) هنگامی که از کد جاوا اسکریپت فراخوانی می شود. و یا به صورت خودکار که به آن self invoked گفته می شود و تابع طی آن خودش را به صورت اتوماتیک صدا می زند.

 

دستور return
هنگامی که جاوا اسکریپت به return statement (دستور return) می رسد، تابع اجرای کدها را متوقف می کند. چنانچه تابع از یک دستور (statement) فراخوانی شود، در آن صورت جاوا اسکریپت باز گشته تا کد را پس از دستور فراخوان (invoking statement / دستوری که تابع را صدا زده بود) اجرا کند. دستور return برای برگداندن یک مقدار مشخص در توابع، بکار گرفته می شود. توابع اغلب یک return value / مقدار بازگشتی محاسبه کرده و بازمی گردانند، به عبارتی دیگر تابع مقدار بازگشتی را به فراخوان یا صدا زننده (caller) برمی گرداند.
مثال:
حاصل ضرب دو عدد را محاسبه کرده و نتیجه را برمی گرداند.

 

نمونه دو
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
 

 

چرا باید از توابع (functions) استفاده کنیم؟
می توان کدها را مجددا مورد استفاده قرار داد : یکبار کد را تعریف کنید و آن را بارها بکار ببرید. می توان یک کد را بارها استفاده نمود و هر بار یک آرگومان متفاوت برای آن در نظر گرفت و از این طریق نتایج گوناگون بدست آورد.
مثال:

 

تبدیل فارنهایت به سلسیوس

 

نمونه سه
function toCelsius(f) {
return (5 / 9) * (f - 32);
}
document.getElementById("demo").innerHTML = toCelsius(32);
 
عملگر () تابع را فراخوانی می کند. با استفاده از مثال بالا می توان دریافت که toCelsius به شی تابع (function object) ارجاع می دهد و toCelsius() به نتیجه ی تابع اشاره دارد.
مثال:
دسترسی به تابع بدون استفاده از عملگر () باعث می شود که بجای نتیجه، تعریف تابع برگردانده شود.

 

نمونه چهار
function toCelsius(f) {
return (5 / 9) * (f - 32);
}
document.getElementById("demo").innerHTML = toCelsius;
//document.getElementById("demo").innerHTML = toCelsius(32);
 

 

استفاده از توابع به عنوان متغیر
در زبان جاوا اسکریپت می توان توابع را به همان شیوه ی که متغیرها را استفاده می نمایید، بکار ببرید.
مثال:
می توانید از این نمونه
var text = "The temperature is " + toCelsius(32) + " Centigrade";‎
بجای
 
var x = toCelsius(32);
var text = "The temperature is " + x + " Centigrade";‎
استفاده کنید.

 

نمونه پنج
document.getElementById("demo").innerHTML =
"The temperature is " + toCelsius(32) + " Centigrade";
 
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
 

 

آموزش اشیا متدها و خصوصیات javascript در آموزش طراحی سایت

 

اشیا، متدها، خصوصیات
در جهان واقع اتومبیل یک object یا شی محسوب می شود. یک اتومبیل دارای property یا خصوصیت هایی از قبیل وزن، رنگ و همچنین توابع یا method هایی از قبیل : start و stop دارد.
 
تمامی اتومبیل ها دارای خصوصیات یکسان هستند، اما مقادیر property آن ها از اتومبیلی به اتومبیل دیگر ممکن است متفاوت باشد. کلیه ی اتومبیل ها دارای متدهای یکسان هستند، اما متدهای آن ها در زمان های مختلف اجرا می شوند.

 

اشیا جاوا اسکریپت
پیش تر آموختیم که متغیرها در واقع ظرف هایی برای ذخیره ی مقادیر داده محسوب می شوند. کد زیر یک مقدار ساده (Fiat) به متغیری به نام car تخصیص می دهد.

 

نمونه یک
<script>
var car = "Fiat";
document.getElementById("demo").innerHTML = car;
</script>
شیا نیز متغیر (variable) هستند، با این تفاوت که می توانند مقادیر زیادی را در خود جای دهند. به عنوان مثال، توجه خود را به نمونه ی زیر جلب کنید که در آن چندین مقدار متفاوت (Fiat ,500 , white) به متغیری به نام car اختصاص داده شده.

 

نمونه دو
<script>
var car = { type: "Fiat", model: 500, color: "white" };
document.getElementById("demo").innerHTML = car.type;
</script>
همان طور که مشاهده می کنید مقادیر به صورت جفت های اسم : مقدار (name:value pairs) نوشته شده اند.
توجه:
اشیا جاوا اسکریپت در حقیقت ظرف هایی برای مقادیر نام گذاری شده (named variables) هستند.

 

خصوصیات اشیا (object properties)
جفت های اسم : مقدار (name:values pairs) خصوصیات یا properties یک شی در جاوا اسکریپت اطلاق می گردند.
var person = {firstName:"John"‎،‎ lastName:"Doe"‎،‎ age:50‎،‎ ‎eyeColor:"blue"};‎
 

 

متدهای یک شی (object methods)
متدها در واقع عملیاتی هستند که می توان روی شی انجام داد. متدها به عنوانfunction definitions یا تعریف تابع در خصوصیات (property) ذخیره می گردند (می توان متدها را مانند تعریف یک تابع داخل خصوصیت ذخیره کرد).
 
توجه:
اشیا جاوا اسکریپت ظرف هایی برای نگهداری مقادیر نام گذاری شده (که خصوصیت یا property خوانده می شود) و متدها هستند.

 

تعریف یا ایجاد شی در جاوا اسکریپت
یک شئ جاوا اسکریپت را می توان با object literal(نوشته ی متنی) تعریف کرد.
مثال:
var person = {firstName:"John"‎،‎ lastName:"Doe"‎،‎ age:50‎،‎ ‎eyeColor:"blue"};‎
خط فاصله ها و استفاده از enter برای رفتن به خط بعدی اهمیتی نداشته و توسط جاوا اسکریپت نادیده گرفته می شود، به عبارتی دیگر تعریف شی می تواند چندین خط ادامه داشته باشد (در چندین خط قرار گرفته باشد).
مثال:

 

نمونه سه
<script>
var person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" };
 
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

 

دسترسی به خصوصیت های اشیا
از دو طریق می توان به خصوصیت اشیا دسترسی پیدا کرد.
objectName.propertyName‏ ‏
یا
objectName[propertyName]‎
مثال:
person.lastName;‎
مثال2:
person["lastName"];‎

 

دسترسی به متدهای یک شی
می توان با استفاده از دستور نحوی (syntax) زیر به متد یک شی دسترسی پیدا کرد.
objectName.methodName()
مثال:
name = person.fullName();‎
چنانچه سعی کنید به خصوصیت / property، fullName بدون عملگر () دسترسی پیدا کنید، در آن صورت تعریف تابع / function definition به عنوان نتیجه بازگردانده می شود.
مثال:
name = person.fullName;
توجه داشته باشید که هیچگاه نباید رشته ها (strings)، اعداد (numbers)، بولی ها (Booleans) را به عنوان شی تعریف کنید! چنانچه متغیری را در جاوا اسکریپت با کلیدواژه ی "new"تعریف کنید، آن متغیر به عنوان یک شی ایجاد می گردد.
var x = new String(); // Declares x as a String object
var y = new Number(); // Declares y as a Number object
var z = new Boolean(); // Declares z as a Boolean object‎
از اشیا بولی، عددی، رشته ای اجتناب کنید، زیرا که کد را پیچیده تر ساخته و سرعت اجرا را کاهش می دهد.
آموزش طراحی سایت ادامه دارد
  • افشین رفوآ
  • ۰
  • ۰

سلام دوستان... در قسمت قبل آموزش React Native با مفاهیم زیر آشنا شدیم.

مفهوم Layout با استفاده از Flexbox در آموزش React Native

یک component می تواند چیدمان component های childخودرا با استفاده از algorithm Flexbox تعیین کند. Flexbox برای ایجاد یک Layout پایدار روی صفحات با سایزهای مختلف طراحی شده است.

با استفاده از ترکیبی از flexDirection، alignItems، و justifyContent می توان Layout مناسب طراحی کرد.Flexbox در React Native شبیه CSS عمل می کند. با این تفاوت که مقادیر پیش فرض متفاوتند. flexDirection به جای row، مقدار پیش فرض column دارد، و flex فقط یک عدد می گیرد.

مفهوم Flex

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

در مثال زیر، view های قرمز، زرد و سبز هر سه childهای Viewبا flex:1 هستند. view قرمز از flex: 1 استفاده می کند، viewزرد flex: 2 و view سبز flex: 3. جمع مقادیر flex این سه 6 است که به این معناست که view قرمز 6/1 فضا، viewزرد 6/2 و view سبز 6/3 فضا را می گیرد.

مفهوم Flex Direction

فلکس Flex Direction جهت چیدمان childهای یک nodeرا تعیین می کند. به آن محور اصلی نیز می گویند. محور دیگر، محور متقاطع، محور عمود به محور اصلی است، یا همان محوری است که خطوط wrapping را دربرمیگیرد. Row component های child را از چپ به راست میچیند. اگر wrapping فعال باشد، خط بعد دقیقا از زیر اولین آیتم از چپ شروع می شود. Column (مقدار پیش فرض) componentهای child را از بالا به پایین می چیند. اگر wrapping فعال باشد، خط بعد از اولین آیتم سمت چپ از بالا شروع می شود. row-reverse component های child را از راست به چپ میچیند. اگر wrapping فعال باشد، خط بعد از زیر اولین آیتم از راست شروع می شود. column-reverse component های child را از پایین به بالا می چیند. اگر wrapping فعال باشد، خط بعدی اولین آیتم سمت چپ از پایین شروع می شود.

import React, { Component } from 'react';

import { View } from 'react-native';

export default class FlexDirectionBasics extends Component {

render() {

return (

// Try setting `flexDirection` to `column`.

<View style={{flex: 1, flexDirection: 'row'}}>

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />

<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />

</View> ); }};

مفهوم Layout Direction

لایه Layout Direction تعیین کننده ی جهتی است که در آن childها و متن در یک سلسله مراتب باید چیده شوند. Layout Direction تعیین کننده این هستند که start و end به کدام لبه ها اشاره می کنند. به طور پیش فرض چیدمان صفحات در React Native بصورت LTR است. در این حالت start به چپ و endبه راست اشاره می کند. LTR(مقدار پیش فرض) متن ها و childها از چپ به راست چیده می شوند. Margin و paddingکه برای start یک المان تعیین می شوند به سمت چپ اعمال می شوند. RTLمتن ها و child ها از راست به چپ چیده می شوند. Margin و paddingکه برای start یک المان تعیین می شوند به سمت راست اعمال می شوند.

تراز کردن محتوا (justify Content)

محتوای justifyContent نحوه قرار گرفتن childها در راستای محور اصلی container شان را تعیین می کند. برای مثال، می توانید با استفاده از این ویژگی یک المان child را وسط یک containerقرار دهید؛ به این صورت که برای افقی وسط بودن، flexDirection را مساوی rowقرار دهید، برای عمودی وسط بودن، flexDirectionرا مساوی column قرار دهید. flex-start (مقدار پیش فرض) childهای یک container را از ابتدای محور اصلی آن، مرتب می کند. flex-end child های یک container را از انتهای محور اصلی آن، مرتب می کند. Center child های یک container را در راستای محور اصلی، وسط قرار می دهد. space-between المان های childرا در راستای محور اصلی container قرار می دهد و فضای اضافه را بین آن ها توزیع می کند. space-around المان های child را در راستای محور اصلی containerقرار می دهد و فضای اضافه را اطراف آن ها توزیع می کند. در مقایسه با space-between، فضای اضافه به ابتدا و انتهای اولین و آخرین child افزوده می شود.

import React, { Component } from 'react';

import { View } from 'react-native';

export default class JustifyContentBasics extends Component {

render() {

return (

// Try setting `justifyContent` to `center`.

// Try setting `flexDirection` to `row`.

<View style={{

flex: 1,

flexDirection: 'column',

justifyContent: 'space-between',

}}>

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />

<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />

</View>

);

}

};

تراز کردن آیتم ها (align Items) در آموزش React Native

ایتم alignItems تعیین کننده نحوه قرار گرفتن childها در راستای محور متقاطع container است. بسیار شبیه justifyContentعمل می کند، اما به جای اعمال شدن به محور اصلی، روی محور متقاطع اعمال می شود. Stretch (مقدار پیش فرض) childهای یک container را امتداد می دهد تا کامل محور متقاطع را بگیرند و heightمعادل محور متقاطع داشته باشند. flex-start child های یک container را از ابتدای محور متقاطع آن، مرتب می کند. flex-end child های یک container را از انتهای محور متقاطع آن، مرتب می کند. Center child های یک container را در راستای محور متقاطع ، وسط قرار می دهد. Baseline المان های childرا نسبت به یک نقطه مشترک مرتب می کند. المان های child می توانند طوری تنظیم شوند که نقطه ارجاعی برای parentشان باشند.

برای اینکه استفاده از Stretch موثر باشد، المان child نباید در راستای محور دیگر بعد ثابت داشته باشد. در مثال زیر، مقداردهی به صورت alignItems: stretchاثری ندارد، مگر زمانی که width: 50از المان child حذف شود.

import React, { Component } from 'react';

import { View } from 'react-native';

export default class AlignItemsBasics extends Component {

render() {

return (

// Try setting `alignItems` to 'flex-start'

// Try setting `justifyContent` to `flex-end`.

// Try setting `flexDirection` to `row`.

<View style={{

flex: 1,

flexDirection: 'column',

justifyContent: 'center',

alignItems: 'stretch',

}}>

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

<View style={{height: 50, backgroundColor: 'skyblue'}} />

<View style={{height: 100, backgroundColor: 'steelblue'}} />

</View>

);

}

};

مفوم AlignSelf

در alignSelf موارد مشابهی دارد و مثل alignItems عمل می کند اما به جای اثر روی child درون container، می توان آن را روی یک المان اعمال کرد ومستقل از parent، آن را تغییر داد.

مفهوم Align Content

در alignContent توزیع خطوط در راستای محور عرضی را تعیین می کند. فقط زمانی اثر آن اعمال می شود که آیتم ها با استفاده از flexWrapدر چندین خط شکسته (wrapped) شوند. flex-start (مقدار پیش فرض) خطوط شکسته (wrapped شده) را از ابتدای محور متقاطع container مرتب می کند. flex-end خطوط شکسته را از انتهای محور متقاطع container مرتب می کند. Stretch خطوط شکسته را امتداد می دهد تا کامل محور متقاطع container را پر کنند. center خطوط شکسته را در راستای محور متقاطع container ، وسط قرار می دهد. space-between خطوط شکسته را در راستای محور اصلی container قرار می دهد و فضای اضافه را بین آن ها توزیع می کند. space-around خطوط شکسته را در راستای محور اصلی container قرار می دهد و فضای اضافه را اطراف آن ها توزیع میکند. در مقایسه با space-between، فضای اضافه به ابتدا و انتهای اولین و آخرین خط افزوده میشود.

مفهوم Flex Wrap

ویژگی flexWrapروی container ها مقداردهی می شود و به کمک آن می توان تعیین کرد هنگامی که المان های childدر راستای محور اصلی از container بیرون میزنند، چه اتفاقی بیوفتد. به طور پیش فرض المان های child باید در یک خط قرار بگیرند ( که ممکن است باعث جمع شدن غیرعادی المان ها شود). اگر شکستن خطوط (wrapping) ممکن باشد، آیتم ها در راستای محور اصلی در چند خط شکسته می شوند.

موقع شکستن خطوط می توان از alignContent برای تعیین چگونگی قرارگیری خطوط در container، استفاده کرد.

مفهوم Flex Basis، Grow و Shrink

در flexGrow تعیین می کند چگونه فضای درون container بین المان های childدر راستای محور اصلی، توزیع شود. پس از قرارگرفتن المان های child درون container ، فضای باقی مانده با توجه به مقدار این متغیر در المان های child، توزیع می شود.flexGrow هر مقدار اعشاری بزرگ تر 0 را می پذیرد و صفر مقدار پیش فرض آن است. یک container براساس مقدار flexGrowالمان های child خود، فضای باقی مانده را بین آن ها توزیع می کند. flexShrink تعیین می کند چگونه المان های child در راستای محور اصلی کوچک شوند، در صورتی که اندازه آن ها از اندازه container شان درراستای محور اصلی، بیشتر شود. FlexShrink بسیار شبیه flexGrow عمل می کند و استفاده هم زمان از هر دو کمک می کند المان های child براساس نیاز بزرگ یا کوچک شوند. flexShrink هر مقدار اعشاری بزرگ تر 0 را می پذیرد و مقدار پیش فرض آن یک است. یک container براساس مقدار flexShrinkالمان های child خود، آن ها را کوچک می کند. FlexBasis یک روش مستقل از محور برای تعیین اندازه پیش فرض یک آیتم در راستای محور اصلی است. مقداردهی به flexBasisبرای یک المان child شبیه مقداردهی به width آن المان است، درصورتی که parent آن flexDirection: rowداشته باشد، و یا مقداردهی hightبه آن المان درصورتی که parent آن flexDirection: column داشته باشد. مقدار FlexBasisیک آیتم، سایز آن آیتم است؛ سایز پیش فرضی که قبل از هرگونه بزرگ و کوچک شدن المان به آن اختصاص می یابد.

مفهوم Width و Height

مقدار Widthیک المان نشان دهنده ی Width محتوای آن المان است. به طور مشابه، Height یک المان Heightمحتوای آن است.

می توان به هردو مقادیر زیر را نسبت داد: Autoمقدار پیش فرض است. React Native مقادیر width/height را برای المان بر اساس محتوایش محاسبه می کند. Pixels تعیین کننده width/heightبراساس pixel به صورت absolute می باشد. با توجه به استایل های دیگر component ، این مقادیر ممکن است اندازه نهایی ابعاد component باشند یا نباشند. Percentage تعیین کننده widthیا height یک componentبه صورت درصدی از width یا height المان parent آن می باشد.

مفهوم Layout های relative و absolute

نوع positionیک المان تعیین کننده نحوه قرار گرفتن آن نسبت به المان parent اش می باشد. Relative (مقدار پیش فرض) به طور پیش فرض یک المان مکانی نسبی دارد. به این معنا که یک المان، اول با توجه به جایگیری نرمال آیتم ها، و سپس براساس مقادیر top، right، bottom و leftنسبت به مکان مورد انتظار، قرار می گیرد. این انحراف، بر مکان sibling element ها، و یا جای المان parentتاثیری ندارد. Absolute اگر المانی به طور مطلق جایی قرار گرفته باشد، در جایگیری نرمال آیتم ها شرکت نمی کند، مستقل از المان های siblingخود قرار می گیرد و مکان دقیقش به کمک مقادیر top ، right، bottom و leftتعیین میشود.

ما در اینجا به مفاهیم پایه پرداختیم، اما style های زیادی هستند که برای layout های خود به آن نیاز خواهید داشت.

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

آموزش React Native ادامه دارد

  • افشین رفوآ
  • ۰
  • ۰

دوره آموزش sql

سلام عزیزان در این سری آموزشها با پایگاه داده Sql Server آشنا میشوید.
در قسمت قبل با مفاهیم زیر آشنا شدید:
با ادامه آموزش Sql همراه باشید

 

آموزش Views در SQL
ویو View یک جدول مجازی است.
این فصل نشان می دهد که چگونه یک View را ایجاد، حذف و یا تغییر دهید.

 

دستور CREATE VIEW در SQL
آدرس صفحه وبی که میخواهید نمایش دهید را Paste کنید
 
در SQL یک View یک جدول مجازی است که نتیجه حاصل از عبارات و دستورات SQL می باشد.
یک view شامل سطر و ستونهایی دقیقا شبیه یک جدول واقعی است. فیلدها در یک View فیلدهایی هستند که از یک یا چند جدول واقعی در پایگاه داده گرفته شده اند.
شما می توانید توابع SQLو همچنین عبارات WHERE و JOIN را به یک View اضافه کنید و داده های نتیجه را به گونه ای نشان دهید که گویی همگی از یک جدول آورده شده اند.

 

فرم دستور CREATE VIEW
CREATE VIEW view_name AS
SELECT column_name(s)
FROM table_name
WHERE condition
نکته:
یک View همیشه داده های به روز شده (up-to-date) را نشان می دهد! موتور یک پایگاه داده هر زمانی که کاربر در خواست view کند داده ها را بازسازی می نماید.

 

استفاده از CREATE VIEW در آموزش Sql
اگر پایگاه داده Northwind را دارید شما می توانید چندین view را که به طور پیش فرض روی آن نصب شده است را ببینید.
ویو View با نام Current Product List، لیست محصولات جاری (محصولاتی که تولید آنها متوقف نشده است) را از جدول “Products” نشان می دهد. این view توسط دستور زیر ایجاد می گردد:
CREATE VIEW [Current Product List] AS
SELECT ProductID,ProductName
FROM Products
WHERE Discontinued=No
می توانیم View فوق را به صورت زیر فراخوانی کنیم:
SELECT * FROM [Current Product List]
مثال دیگری از View در پایگاه داده Northwind، تمام محصولاتی را که در جدول “Products” قیمت واحدشان بزرگتر از میانگین قیمت هاست انتخاب می کند:
CREATE VIEW [Products Above Average Price] AS
SELECT ProductName,UnitPrice
FROM Products
WHERE UnitPrice>(SELECT AVG(UnitPrice) FROM Products)
می توانیم view فوق را به صورت زیر فراخوانی کنیم:
SELECT * FROM [Products Above Average Price]
مثال دیگری از View در پایگاه داده Northwind، فروش کل را برای هر دسته از محصولات در سال 1997 محاسبه می کند. توجه کنید که این view داده هایش را از view ی دیگری که “Product Sales for 1997” نامیده می شود می گیرد:
CREATE VIEW [Category Sales For 1997] AS
SELECT DISTINCT CategoryName,Sum(ProductSales) AS CategorySales
FROM [Product Sales for 1997]
GROUP BY CategoryName
می توانیم view فوق را به صورت زیر فراخوانی کنیم:
SELECT * FROM [Category Sales For 1997]
همچنین می توانیم یک شرط روی Query تعریف کنیم. اکنون می خواهیم فروش کل محصولاتی که در گروه “Beverages” هستند را ببینیم:
SELECT * FROM [Category Sales For 1997]
WHERE CategoryName='Beverages'

 

به روز رسانی یک View
می توانیم یک View را به وسیله دستور زیر به روز رسانی کنیم:
فرم دستور CREATE OR REPLACE VIEW در SQL
CREATE OR REPLACE VIEW view_name AS
SELECT column_name(s)
FROM table_name
WHERE condition
می خواهیم ستون “Category” را به view ی “Current Product List” اضافه کنیم. به وسیله دستور زیر view را به روز رسانی می کنیم:
CREATE VIEW [Current Product List] AS
SELECT ProductID,ProductName,Category
FROM Products
WHERE Discontinued=No

 

حذف یک View در SQL
می توانید یک view را به وسیله دستور DROP VIEW حذف کنید.
فرم دستور DROP VIEW در SQL
DROP VIEW view_name

 

آموزش دستور SELECT
دستور SELECT برای انتخاب داده از یک پایگاه داده استفاده می شود .
نتیجه در جدول نتایج که result-set نامیده می شود ذخیره میگردد .

 

فرم دستور SELECT
select column_name,column_name
from table_name;
select * from table_name;

 

نحوه استفاده از SELECT در پایگاه داده
در این آموزش از نمونه پایگاه داده مشهور Northwind استفاده خواهیم کرد.
جدول زیر از میان جدول "Customers" انتخاب شده است:
 
مثال انتخاب ستون با استفاده از دستور SELECT
دستور SQL زیر ستون های "Customer Name" و "City" را از جدول "Customers" انتخاب می کند:
SELECT CustomerName , City FROM Customeers;
مثال *SELECT
دستور SQL زیر تمام ستون های جدول "Customers" را انتخاب می کند:
SELECT * FROM customers;
در بخش بعدی از سری مقالات آموزشی sql server با نحوه استفاده از دستور select distinct در sql server آشنا می شویم.

 

پیمایش درResult-set
اکثر سیستم های نرم افزاری پایگاه داده اجازه پیمایش در Result-set ها را به وسیله توابع برنامه نویسی همچون Move-To-First-Record, Get-Record-Content, Move-To-Next-Record و غیره را می دهند.
آموزش Sql server ادامه دارد
  • افشین رفوآ
  • ۰
  • ۰
سلام دوستان ... در قسمت قبل آموزش جاوا اسکریپت مفاهیم زیر را یاد دادیم .
  • آموزش متغیرها در جاوا اسکریپت
  • شناسه های جاوا اسکریپت
  • آموزش محاسبه در جاوا اسکریپت
  • آموزش عملگرهای محاسباتی جاوا اسکریپت
 
حال با ادامه دوره آموزش طراحی سایت همراه باشید

 

آموزش عملگر های جایگزین در جاوا اسکریپت
همان طور که در مباحث پیشین ذکر شد، با استفاده از عملگرهای جایگزین به متغیرهای جاوا اسکریپت مقدار تخصیص می دهیم.
 
عملگر جایگزین یا انتساب / assignment operator (=) یک مقدار به متغیر تخصیص می دهد.

 

تخصیص مقدار
var x = 10;‎
عملگر += یک مقدار را به متغیر اضافه می کند.

 

مثال تخصیص مقدار
var x = 10;
x += 5;‎
عملگر -= یک مقدار را از متغیر کسر می کند.
مثال:
var x = 10;
x -= 5;‎
عملگر*= عملیات ضرب را روی یک متغیر انجام می دهد.
مثال:
var x = 10;
x *= 5;‎
عملگر /= یک متغیر را تقسیم می کند.
مثال:
var x = 10;
x /= 5;‎
عملگر %= باقی مانده ی تقسیم را به متغیر تخصیص می دهد.
مثال:
var x = 10;
x %= 5;‎

 

آموزش انواع داده در جاوا اسکریپت-data types
نوع داده دسته بندی ای از انواع تایپ‌های موجود مانند اعداد صحیح (integer)، بولی (boolean) و... است که ویژگی‌هایی از جمله : مقادیر قابل پذیرش توسط متغیر، عملیات قابل اجرا بر روی متغیر، معنای داده و حافظه مورد نیاز برای ذخیره متغیر را تعین می ‌کند. انواع داده : رشته، عدد، بولی، آرایه، شی (object)

 

نوع داده در جاوا اسکریپت
جاوا اسکریپت می تواند data type های گوناگونی مانند : اعداد (نوع عددی)، رشته (نوع رشته ی)، آرایه (از نوع آرایه) و از نوع object (شی).
var length = 16; // Number
var lastName = "Johnson"; // String
var cars = ["Saab"‎،‎ "Volvo"‎،‎ "BMW"]; // Array‎
var x = {firstName:"John"‎،‎ lastName:"Doe"}; // Object

 

مفهوم نوع داده
در برنامه نویسی، نوع داده مفهوم بسیار مهمی است. برای اینکه بتوان روی متغیرها عملیات انجام داد، باید چیزی درباره ی نوع آن دانست. بدون نوع داده، کامپیوتر قادر به فهم و محاسبه صحیح و امن داده نیست.
var x = 16 + "Volvo";‎
آیا عاقلانه به نظر می رسد که "Volvo" را به عدد 16 اضافه کنیم؟ آیا نتیجه ی صحیح و منطقی بدست می دهد و یا در نتیجه ی عملیات خطا برمی گرداند (ارور می دهد)؟ جاوا اسکریپت مثال بالا را اینگونه پردازش می کند.
var x = "16" + "Volvo";  ‎
در صورتی که عملوند operand / دوم یک رشته باشد، جاوا اسکریپت عملوند اول را نیز رشته محسوب می کند.
مثال:

 

نمونه یک
<script>
var x = 16 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>
جاوا اسکریپت عبارات را از چپ به راست ارزیابی می کند. ترتیب و توالی متفاوت ممکن است نتایج متفاوتی را رقم بزند.

 

نمونه دو
<script>
var x = 16 + 4 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>

 

مثال جاوا اسکریپت

 

نمونه سه
<script>
var x = "Volvo" + 16 + 4;
document.getElementById("demo").innerHTML = x;
</script>
در مثال اول، جاوا اسکریپت 16 و 4 را به عنوان رقم یا عدد درنظر می گیرد تا اینکه به "Volvo" می رسد.(که یک رشته تلقی می گردد) حال در مثال دوم، از آنجایی که عملوند اول یک رشته است، دیگر عملوندها نیز به مثابه ی رشته درنظر گرفته می شوند. جاوا اسکریپت دارای نوع داده ی پویا (dynamic type) است. جاوا اسکریپت نیز دارای نوع داده ی پویا است، بدین معنا که یک متغیر را می توان به عنوان نوع های مختلف بکار برد.
مثال:
var x; // Now x is undefined
var x = 5; // Now x is a Number
var x = "John"; // Now x is a String

 

رشته ها در جاوا اسکریپت (متغیر رشته ای)
در آموزش طراحی سایت یک رشته string / (یا همان رشته ی مبتنی بر متنtext string / ) متشکل است از یک سری کاراکتر مانند این مثال "John Doe" که یک رشته محسوب می شود. رشته ها باید حتماً داخل علامت نقل و قول نوشته شوند. برای این منظور می توان از هر دو کاراکتر " " و ' ' بهره گرفت.
مثال:
var carName = "Volvo XC60"; // Using double quotes
var carName = 'Volvo XC60'; // Using single quotes‎
همچنین می توان از علامت نقل و قول داخل رشته استفاده کرد، البته تا زمانی که با علامت نقل و قول اطراف رشته یکی نشوند.
مثال:

 

نمونه چهار
<script>
var person;
document.getElementById("demo").innerHTML =
person + "<br>" + typeof person;
</script>

 

اعداد در جاوا اسکریپت (متغیرهای عددی)
جاوا اسکریپت تنها یک نوع عدد دارد، به عبارتی دیگر اعداد را می توان با اعشار (decimal) یا بدون اعشار بکار برد / متغیرهای عددی در جاوا اسکریپت یا به صورت اعشاری و دهدهی نوشته می شوند و یا به صورت عدد صحیح نمایش داده می شوند.
مثال:
var x1 = 34.00; // Written with decimals
var x2 = 34; // Written without decimals
اعدادی که بیش از حد بزرگ یا کوچک هستند را می توان با نماد علمی scientific notation / نوشت.
var y = 123e5; // 12300000‎
var z = 123e-5; // 0.00123‎

 

نوع داده ی بولی (متغیر بولی) در جاوا اسکریپت / Boolean
متغیرهای بولی تنها می توانند دو مقدار true یا false را داشته باشند.
var x = true;‎
var y = false;‎
متغیرهای بولی برای آزمودن و تست یک شرط بکار می رود.

 

آرایه ها (arrays) در جاوا اسکریپت
در آموزش طراحی سایت آرایه ها در جاوا اسکریپت داخل کروشه یا همان کاراکتر [] قرار می گیرند. آیتم های یک آرایه توسط ویرگول از هم جدا می شوند. کد زیر آرایه ی به نام cars که شامل سه آیتم (اسم اتومبیل) می باشد را ایجاد (تعریف) می کند.
مثال:

 

نمونه پنج
<script>
var car = "";
document.getElementById("demo").innerHTML =
"The value is: " +
car + "<br>" +
"The type is:" + typeof car;
</script>
اندیس یا شاخص آرایه از صفر آغاز می گردد، بدین معنا که آرایه ی اول [0]، دومین [1] و به همین ترتیب ادامه پیدا می کند.

 

اشیا (objects) در جاوا اسکریپت
در جاوا اسکریپت اشیا داخل کاراکتر {} (آکولاد) قرار داده و تعریف می شوند. خصوصیت های اشیا در جاوا اسکریپت داخل آکولاد به صورت جفت اسم : مقدار (name:value pairs) نوشته شده و توسط ویرگول از هم جدا می گردند.
مثال:

 

نمونه شش
<script>
var person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" };
var person = null;
document.getElementById("demo").innerHTML = typeof person;
</script>
شی (person) در مثال فوق دارای چهار خصوصیت می باشد : firstName، lastName، age وeyeColor.

 

عملگر typeof
می توان با استفاده از عملگر typeof نوع یک متغیر جاوا اسکریپت را بدست آورد / عملگر ذکر شده نوع متغیر را برمی گرداند.
مثال:
typeof "John" // Returns string
typeof 3.14 // Returns number
typeof false // Returns boolean
typeof [1‎،‎2‎،‎3‎،‎4] // Returns object‎
typeof {name:'John'‎،‎ age:34} // Returns object
نکته:
در جاوا اسکریپت، آرایه در واقع یک نوع شی محسوب می گردد. بنابراین typeof [1,2,3,4] در نتیجه نوع object را برمی گرداند.

 

Undefined (تعریف نشده)
متغیری که مقداردهی نشده است، به صورت پیش فرض تعریف نشده تلقی می گردد و مقدار آن undefined می باشد. در صورت استفاده از typeof نیز مقدار undefined به عنوان نتیجه بازگردانده می شود.
مثال:
var person;                  // Value is undefined،‎ type is undefined
هر متغیری را می توان با تنظیم مقدار آن روی undefined تهی کرد، همچنین نوع آن undefined یا تعریف نشده درنظر گرفته می شود.
مثال:
person = undefined;          // Value is undefined،‎ type is undefined

 

مقادیری تهی / empty values
یک مقدار تهی هیچ گونه ارتباطی با مقدار تعریف نشده (undefined) ندارد. یک متغیر رشته ی تهی (empty string variable) هم مقدار و هم نوع آن تعریف شده هستند.(دارای نوع و مقدار است)
مثال:
var car = "";                // The value is ""‎،‎ the typeof is string

 

مقدار null
مقدار Null در جاوا اسکریپت به معنای تهی یا "nothing" است. متاسفانه در زبان برنامه نویسی بیان شده نوع داده ی null یک شی حساب می شود. با تنظیم مقدار یک شی روی null می توان آن شی را تهی کرد / تخصیص null به شی می توان آن را تهی کرد.
مثال:
var person = null; // Value is null،‎ but type is still an object
همچنین می توان برای تهی کردن یک شی آن را undefined مقداردهی کرد.
مثال:

 

نمونه هفت
<script>
var person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" };
var person = undefined;
document.getElementById("demo").innerHTML = typeof person;
</script>
در مثال زیر تفاوت بین undefined و null تشریح شده
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
آموزش طراحی سایت ادامه دارد

 

  • افشین رفوآ
  • ۰
  • ۰
سلام دوستان ...در قسمت قبل آموزش پایتون مفاهیم زیر را یاد دادیم
  • مقایسه دنباله ها و سایر انواع در برنامه نویسی Python
  • آموزش ماژول ها در برنامه نویسی پایتون
  • آموزش ماژول های استاندارد در برنامه نویسی پایتون
  • آموزش تابع dir() در برنامه نویسی پایتون
با ادامه آموزش پایتون همراه ما باشید.
 

 

آموزش خواندن و نوشتن فایل در زبان برنامه نویسی پایتون
دستور open() یک شی فایل (file object) را باز می گرداند، و در اکثر مواقع با دو آرگومان استفاده می شود:
open(filename, mode)
>>> f = open('workfile', 'w')
آرگومان اول یک رشته شامل نام فایل است. آرگومان دوم یک رشته دیگر شامل تعداد کمی کاراکتر است که روش استفاده از فایل را توصیف می کند. حالت (mode) می تواند r باشد برای زمانی که فایل فقط خوانده می شود، w برای فقط نوشتن (فایل موجود با نام مشابه پاک خواهد شد)، و a فایل را برای افزودن(append) باز می کند؛
هر داده ای که در فایل نوشته شود به صورت خودکار به انتهای فایل اضافه می شود. r+ فایل را برای خواندن و نوشتن باز می کند. آرگومان حالت اختیاری است.
در صوت حذف، r در نظر گرفته می شود. به طور معمول فایل ها در حالت متن(text) باز می شوند، این به این معنی است که شما رشته ها را از فایل می خوانید و درون فایل می نویسید، که این فایل به یک روش رمزنگاری خاص کدگذاری شده است.
اگر روش رمزنگاری مشخص نشده باشد، پیش فرض وابسته به پلتفرم(platform) است
اگر b به حالت اضافه شود، فایل در حالت باینری (binary) باز می شود.، حال، داده در قالب اشیای بایت خوانده و نوشته می شود. این حالت باید برای همه فایل هایی که شامل متن نیستند استفاده شود.
هنگام خواندن در حالت متن، پیش فرض این است که انتهای خطوط خاص هر پلتفرم (\n در Unix، \r\n در ویندوز) را فقط به \n تبدیل کند. هنگام نوشتن در حالت متن، پیش فرض این است که هر جا \n وجود دارد را به انتهای خطوط خاص هر پلتفرم بازگرداند. این تغییرات پشت پرده روی داده فایل برای فایل های متنی مشکلی ایجاد نمی کند، اما داده های باینری مانند فایل های JPEG یا EXE را خراب می کند.
در هنگام خواندن و نوشتن چنین فایل هایی بسیار مراقب استفاده از حالت باینری باشید. خوب است هنگام کار با اشیای فایل از کلمه کلیدی with استفاده کنید. مزیت آن این است که پس از اتمام مجموعه فایل، حتی درصورتی که در جایی یک استثنا رخ دهد، فایل به درستی بسته می شود. همچنین استفاده از with بسیار کوتاهتر از نوشتن بلاک try-finally برابر با آن است.
>>> with open('workfile') as f:
... read_data = f.read()
 
>>> # We can check that the file has been automatically closed.
>>> f.closed
True
اگر از کلمه کلیدی with استفاده نمی کنید، پس باید f.close() را فراخوانی کنید تا فایل را ببندد و فورا منابع سیستمی استفاده شده توسط آن را آزاد کند. اگر صریحا یک فایل را نبندید، زباله جمع کن پایتون (Python’s garbage collector) نهایتا شی را نابود می کند و فایل را برای شما می بندد، اما ممکن است برای مدتی فایل باز بماند. احتمال خطر دیگری که وجود دارد این است که پیاده سازی های مختلف پایتون، این عمل تمیز کردن را در زمان های مختلف انجام می دهند. پس از اینکه یک شی فایل بسته شد، تلاش برای استفاده از شی فایل چه از طریق عبارت with یا با فراخوانی f.close() ، به صورت خودکار شکست می خورد.
>>> f.close()
>>> f.read()
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
ValueError: I/O operation on closed file.
</module></stdin>

 

آموزش متدهای اشیای فایل در آموزش پایتون
در بقیه مثال های این بخش فرض شده است که یک شی فایل به نام f پیش از این ایجاد شده است. برای خواندن محتویات یک فایل f.read(size) را فراخوانی کنید، که تعدادی داده را می خواند و به صورت یک رشته(در حالت متن) یا شی بایت (در حالت باینری) باز می گرداند.
سایز Size یک آرگومان عددی اختیاری است. زمانی که size حذف شود یا منفی باشد، کل محتویات فایل خوانده و باز گردانده می شود. این مشکل شماست اگر فایل دو برابر بزرگتر از حافظه سیستم شماست. در غیر این صورت، حداکثر اندازه کاراکتر (در حالت متن) یا اندازه بایت(در حالت باینری) خوانده و باز گردانده می شود. اگر به انتهای فایل رسیده باشیم، f.read() یک رشته خالی را باز می گرداند (‘ ‘).
>>> f.read()
'This is the entire file.\n'
>>> f.read()
''
دستور f.readline() یک خط از فایل را می خواند. کاراکتر خط جدید (\n) در انتهای رشته قرار می گیرد، و فقط زمانی حذف می شود که به آخرین خط فایل رسیده باشیم، و البته اگر فایل با خط جدید(\n) تمام نشود. این باعث می شود تا مقدار بازگشتی واضح باشد. اگر f.readline() یک رشته خالی را باز گرداند، به انتهای فایل رسیدیم، در حالی که یک خط خالی توسط \n نمایش داده شده است، یک رشته شامل تنها یک خط جدید.
>>> f.readline()
'This is the first line of the file.\n'
>>> f.readline()
'Second line of the file\n'
>>> f.readline()
''
برای خواندن خطوط از یک فایل، میتوانید روی شی فایل حلقه بزنید. این عمل از نظر حافظه کارآمد است، سریع است و ما را به یک کد ساده می رساند.
>>> for line in f:
... print(line, end='')
...
This is the first line of the file.
Second line of the file
اگر می خواهید همه خطوط یک فایل را بخوانید و در یک لیست قرار دهید، می توانید از list(f) یا f.readlines() استفاده کنید. f.write(string) محتویات رشته را درون فایل می نویسد، و تعداد کاراکتر های نوشته شده را باز می گرداند.
>>> f.write('This is a test\n')
15
سایر انواع اشیا باید قبل از نوشته شدن، یا به یک رشته (در حالت متن) یا به یک شی بایت (در حالت باینری) تبدیل شوند.
>>> value = ('the answer', 42)
>>> s = str(value) # convert the tuple to string
>>> f.write(s)
18
دستور f.tell() یک عدد صحیح که مکان فعلی شی فایل را در فایل مشخص می کند، باز می گرداند. این مقدار بازگشتی به صورت عددی از بایت ها از آغاز فایل در حالت باینری و یک عدد opaque در حالت متن، نمایش داده می شود. برای تغییر مکان شی فایل، از f.seek(offset, whence) استفاده کنید.
مکان با افزودن offset به یک نقطه مرجع محاسبه می شود. نقطه مرجع توسط آرگومان whence انتخاب می شود. مقدار 0 برای whence ، از ابتدای فایل می سنجد، 1 از مکان فعلی استفاده می کند، و 2 از انتهای فایل به عنوان نقطه مرجع استفاده می کند. whence می تواند حذف شود و پیش فرض 0 است که از ابتدای فایل به عنوان نقطه مرجع استفاده می کند.
>>> f = open('workfile', 'rb+')
>>> f.write(b'0123456789abcdef')
16
>>> f.seek(5) # Go to the 6th byte in the file
5
>>> f.read(1)
b'5'
>>> f.seek(-3, 2) # Go to the 3rd byte before the end
13
>>> f.read(1)
b'd'
در فایل های متنی(آنهایی که بدون b در رشته حالت، باز شده اند)، تنها جستجوهای وابسته به شروع فایل مجاز است (استثنای جستجو از انتهای فایل با seek(0, 2) انجام می شود) و تنها مقادیر معتبر offset آنهایی هستند که یا صفر باشند یا توسط f.tell() باز گردانده شده اند.
هر مقدار offset دیگری، رفتار تعریف نشده ای را تولید می کند. اشیای فایل، متدهای اضافی دیگری هم دارند، مانند isatty() و truncate() که کمتر مورد استفاده قرار میگیرند.

 

آموزش ذخیره داده ساخت یافته با استفاده از json در آموزش پایتون
رشته ها را می توان به سادگی از فایل خواند یا درون فایل نوشت. اعداد نیاز به تلاش بیشتری دارد، از آنجایی که متد read() فقط رشته باز می گرداند، باید به یک تابع مانند int() پاس داده شود، که یک رشته مانند ‘123’ را می گیرد و مقدار عددی آن یعنی 123 را باز می گرداند. زمانی که بخواهید انواع داده پیچیده تری مانند لیست های تو در تو و دیکشنری ها را ذخیره کنید، پارس کردن (parsing) و سریال سازی دستی پیچیده می شود.
به جای اینکه کاربران مدام به نوشتن و اشکال زدایی کد برای ذخیره انواع داده پیچیده در فایل بپردازند، پایتون به شما این امکان را می دهد تا از فرمت تبادل داده محبوب به نام JSON (نماد شی جاوا اسکریپت)استفاده کنید.
ماژول استاندارد json می تواند سلسله مراتب داده پایتون را بگیرد، و آنها را به نمایش های رشته ای تبدیل کند. این روند سریال سازی (serializing) نام دارد. بازسازی داده از نمایش رشته ای، محصور کردن (deserializing) نام دارد. بین سریال سازی و محصور کردن، رشته ای که نمایشگر شی است ممکن است در یک فایل یا داده ذخیره شده باشد، یا از طریق ارتباطات شبکه به یک سیستم دور فرستاده شده باشد.
توجه !
معمولا برای تبادل داده، فرمت JSON توسط برنامه های کاربردی مدرن استفاده می شود. در حال حاظر بسیاری از برنامه نویسان با آن آشنا هستند، و همین آن را به یک گزینه خوب برای همکاری تبدیل کرده است.
اگر شی x را داشته باشید، می توانید نمایش رشته ای JSON آن را با یک خط کد ساده ببینید:
>>> import json
>>> json.dumps([1, 'simple', 'list'])
'[1, "simple", "list"]'
گونه دیگری از تابع dumps()، dump() نام دارد، که به سادگی شی را به یک فایل متنی سریال سازی می کند. بنابراین اگر f یک شی فایل متنی باشد که برای نوشتن باز شده باشد، می توانیم این کار را انجام دهیم:
json.dump(x, f)
برای رمزگشایی مجدد شی، اگر f یک شی فایل متنی باشد که برای خواندن باز شده باشد:
x = json.load(f)
این روش ساده سریال سازی می تواند لیست ها و دیکشنری ها را مدیریت کند، اما سریال سازی اختیاری نمونه های کلاس در JSON نیاز به کمی تلاش بیشتر دارد. مرجع مربوط به ماژول json در بردارنده توضیحاتی برای این موضوع است.

 

آموزش خطاها و استثناها در برنامه نویسی پایتون
تا اینجا به پیام های خطا فقط اشاره کردیم، اما اگر مثال ها را انجام داده باشید احتمالا به برخی از آنها برخورده اید. حداقل دو نوع خطای متمایز وجود دارد: خطاهای نحوی(نگارشی- syntax) و استثناها.

 

آموزش خطاهای نحوی در Python
خطاهای نحوی که همچنین با نام خطاهای parsing نیز شناخته شده هستند، شاید معمول ترین نوع خطا باشد که در حین یادگیری پایتون به آن بر می خورید.
>>> while True print('Hello world')
File "<stdin>", line 1
while True print('Hello world')
^
SyntaxError: invalid syntax
</stdin>

 

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

 

آموزش استثناها در برنامه نویسی پایتون
حتی اگر یک عبارت یا اصطلاح از نظر نگارشی صحیح باشد، ممکن است زمانی که قصد اجرای آن را داریم، باعث بروز خطا شود. خطاهای تشخیص داده شده در حین اجرا، استثنا نام دارد و بی قید و شرط مهلک نیستند: به زودی نحوه مدیریت آنها در برنامه های پایتون را فرا خواهید گرفت. اغلب استثناها توسط برنامه ها مدیریت نمی شوند، اگرچه منجر به پیام های خطا می شوند که در اینجا نشان داده شده است.
>>> 10 * (1/0)
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
ZeroDivisionError: division by zero
>>> 4 + spam*3
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
NameError: name 'spam' is not defined
>>> '2' + 2
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
TypeError: Can't convert 'int' object to str implicitly
</module></stdin></module></stdin></module></stdin>
آخرین خط در پیام خطا، بیان می کند که چه اتفاقی افتاده است. استثناها انواع مختلفی دارند، و نوع آنها به عنوان بخشی از پیام چاپ می شود.
نوع خطاها در این مثال ZeroDivisionError ، NameError و TypeError است. رشته چاپ شده به عنوان نوع استثنا، نام استثنای داخلی (built-in exception) است که رخ داده. این امر برای همه استثناهای داخلی صحت دارد، اما نیاز نیست برای استثناهای تعریف شده توسط کاربر نیز صحت داشته باشد (هرچند این یک قرارداد مفید است).
به طور کلی شامل یک ردیابی پشته ای است که خطوط کد را لیست می کند. اگر چه خطوط خوانده شده از ورودی استاندارد را نمایش نمی دهد. لینک Built-in Exceptions استثناهای درونی را بر می شمارد و معانی آنها را می گوید.

 

آموزش مدیریت استثناها در آموزش پایتون
نوشتن برنامه هایی که استثناهای انتخاب شده را مدیریت کند امکان پذیر است. مثال زیر را ببینید که تا زمان دریافت عدد صحیح معتبر، از کاربر درخواست ورودی می کند.
اما به کاربر این امکان را می دهد که برنامه را قطع کند (با استفاده از کنترل +C و یا هر آنچه که سیستم عامل پشتیبانی می کند). توجه داشته باشید این قطع شدن برنامه که توسط کاربر رخ داده است با اعلام استثنای KeyboardInterrupt شناسانده می شود.
>>> while True:
... try:
... x = int(input("Please enter a number: "))
... break
... except ValueError:
... print("Oops! That was no valid number. Try again...")
...
عبارت try به صورت زیر کار می کند.
  • ابتدا، بخش try (عبارات بین دو کلمه کلیدی try و except) اجرا می شود.
  • اگر هیچ استثنایی رخ ندهد، از روی بخش except می پرد( این بخش اجرا نمی شود) و اجرای عبارت try تمام می شود.
  • اگر در حین اجرای بخش try استثنایی رخ دهد، از اجرای بقیه این بخش صرف نظر می کند. سپس اگر نوع خطای رخ داده با نام خطای نوشته شده پس از کلمه کلیدی except یکسان باشد، بخش except اجرا می شود، و سپس اجرا از پس از عبارت try ادامه می یابد.
  • اگر استثنایی رخ دهد که مشابه نام استثنا در بخش except نباشد، به خارج از عبارات بخش try منتقل می شود. اگر هیچ بخش مدیریتی (handler) وجود نداشته باشد، یک استثنای مدیریت نشده رخ داده است و اجرا با پیامی که در بالا نشان داده شده است متوقف می شود.
یک عبارت try ممکن است برای مدیریت استثناهای مختلف، بیشتر از یک بخش except داشته باشد. حداکثر یک بخش مدیریتی اجرا خواهد شد. بخش های مدیریتی، تنها استثناهای رخ داده شده در بخش try مربوطه را مدیریت می کنند، نه در سایر بخش های مدیریتی از عبارت try مشابه. یک بخش استثنا ممکن است چندین استثنا را در قالب یک چندتایی پرانتز دار نام ببرد. برای مثال:
... except (RuntimeError, TypeError, NameError):
... pass
یک کلاس درون یک بخش except ، با یک استثنا سازگار است، اگر همان کلاس مشابه یا یک کلاس پایه باشد. (اما عکس آن صادق نیست- یک بخش except که یک کلاس مشتق شده را لیست کرده است با یک کلاس پایه سازگار نیست). برای مثال، کد زیر B ,C ,D را به این ترتیب چاپ می کند.
class B(Exception):
pass
 
class C(B):
pass
 
class D(C):
pass
 
for cls in [B, C, D]:
try:
raise cls()
except D:
print("D")
except C:
print("C")
except B:
print("B")
 
توجه داشته باشید که اگر بخش های except معکوس شوند ( اول except B باشد)، B,B,B چاپ می شد—اولین بخش except فعال شده است.
آخرین بخش except ممکن است نام استثنا(ها) را حذف کند. از این قابلیت با احتیاط بسیار استفاده کنید، زیرا پنهان شدن یک خطای واقعی برنامه نویسی از این طریق به سادگی امکان پذیر است. همچنین از آن می توان برای چاپ یک پیام خطا و اعلام دوباره آن استثنا استفاده کرد (همچنین اجازه به فراخواننده برای مدیریت استثنا).
import sys
 
try:
f = open('myfile.txt')
s = f.readline()
i = int(s.strip())
except OSError as err:
print("OS error: {0}".format(err))
except ValueError:
print("Could not convert data to an integer.")
except:
print("Unexpected error:", sys.exc_info()[0])
raise
عبارت try … except دارای یک بخش else اختیاری است که در صورت وجود باید از همه بخش های استثنا پیروی کند. این برای کدی که بخش try آن استثنایی اعلام نکرده و باید اجرا شود، مفید است. برای مثال:
for arg in sys.argv[1:]:
try:
f = open(arg, 'r')
except OSError:
print('cannot open', arg)
else:
print(arg, 'has', len(f.readlines()), 'lines')
f.close()
 
استفاده از بخش else بهتر از افزودن کد اضافی به بخش try است، زیرا آن از گرفتن تصادفی استثنایی که توسط کدی که با عبارت try … except محافظت می شود، جلوگیری میکند. زمانی که یک استثنا رخ می دهد، ممکن است یک مقدار وابسته داشته باشد، که به عنوان آرگومان استثنا نیز شناخته می شود.
حضور و نوع آرگومان به نوع استثنا بستگی دارد. بخش except ممکن است یک متغیر را بعد از نام استثنا مشخص کند. متغیر به یک نمونه استثنا (exception instance) محدود است و آرگومان ها در instance.args ذخیره می شوند.
.برای سادگی، نمونه استثنا __str__() را تعریف می کند، بنابراین آرگومان ها می توانند مستقیما بدون نیاز به ارجاع به .args چاپ شوند. همچنین ممکن است ابتدا پیش از اعلام یک استثنا، مقدار دهی اولیه شود و هر ویژگی دلخواه به آن اضافه شود.
>>> try:
... raise Exception('spam', 'eggs')
... except Exception as inst:
... print(type(inst)) # the exception instance
... print(inst.args) # arguments stored in .args
... print(inst) # __str__ allows args to be printed directly,
... # but may be overridden in exception subclasses
... x, y = inst.args # unpack args
... print('x =', x)
... print('y =', y)
...
<class 'exception'="">
('spam', 'eggs')
('spam', 'eggs')
x = spam
y = eggs
</class>
اگر یک استثنا دارای آرگومان باشد، آنها همانند بخش آخر (‘detail’) پیام برای استثناهای مدیریت نشده، چاپ می شوند. بخش مدیریت استثنا فقط استثناها را در صورت وقوع فوری در بخش try مدیریت نمیکند، بلکه اگر درون توابع بخش try فراخوانی شوند یا حتی مستقیما در آن توابع رخ دهند نیز مدیریت می شوند. برای مثال:
>>> def this_fails():
... x = 1/0
...
>>> try:
... this_fails()
... except ZeroDivisionError as err:
... print('Handling run-time error:', err)
...
Handling run-time error: division by zero
آموزش پایتون ادامه دارد
  • افشین رفوآ
  • ۰
  • ۰
سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل با مفهوم زیر آشنا شدیم
  • کار با منو بار Navs در Bootstrap 4
  • آموزش کار با لبه ها Tabs در Bootstrap 4
  • آموزش کار با Pills در بوت استرپ 4
  • آموزش کاربرد Dropdown با منوی pills
  • آموزش کاربرد Dropdown با منوی Tabs
حال با ادامه آموزش بوت استرپ 4 از دوره آموزش طراحی سایت همراه باشید:
 

 

آموزش کار با فرم Form در Bootstrap 4
بوت استرپ 4، کلاس ها و امکانات ویژه ای برای کار با فرم ها (تگ <form>) فراهم کرده است.
کنترل های درون تگ Form در بوت استرپ 4، به صورت خودکار کلیه ی استایل عمومی را دریافت می کند. برای مثال کلیه کادرهای متن در فرم ها مثل تگ <input>، تگ <teatarea> و تگ <select> در صورت دریافت کلاس form control، عرضی برابر 100 درصد خواهند داشت.
بوت استرپ 4 دو نوع قالب یا layout در نمایش اجرای فرم به کار می برد :
1-حالت تمام عرض برای هر کنترل (stacked full width) : در این حالت، کنترل های فرم بر روی هم و با عرض 100 درصد صفحه یا عنصر دربرگیرنده، نمایش داده می شوند.
2- حالت درون خطی (inline form): در این حالت کنترل های فرم در کنار هم و در یک خط، حالت چپ چین نمایش داده می شوند.

 

آموزش حالت تمام عرض در فرم های بوت استرپ 4:
 
در کد مثال عملی زیر، یک فرم بوت استرپ با 2 کنترل ورودی کادر متن، یک دکمه checkbox و یک دکمه ارسال submit button ایجاد کرده ایم که در حالت تمام عرض (full width) نمایش داده می شوند.
برای اطمینان از نمایش درست کنترل ها و رعایت مارجین و Padding، هر کنترل را درون یک عنصر دربرگیرنده با کلاس form-group قرار دهید :

 

مثال 1
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
 

 

آموزش حالت درون خطی inline form در آموزش طراحی سایت :
 
در حالت نمایش درون خطی (inline form)، تمامی کنترل ها در یک خط و با حالت پیش فرض چپ چین نمایش داده می شوند.
نکته :
حالت inline فقط در صفحه نمایش های بزرگتر از عرض 576 پیکسل کار می کند. در صفحات موبایلی و کمتر از عرض 576 پیکسل، به صورت خودکار فرم ها به صورت تمام عرض و هر کنترل در یک خط نمایش داده می شود.
برای نمایش المنت های فرم به صورت درون خطی در Bootstrap 4، بایستی کلاس form-inline. را به تگ <form> اضافه نمایید.
مثال عملی : در کد مثال عملی زیر، دو کنترل کادر متن، یک chechbox و دکمه ارسال submit را در یک فرم به صورت خطی (inline) نمایش داده ایم :

 

مثال 2
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

 

آموزش چیدمان بهتر کنترل ها در حالت inline با استفاده از کلاس های کمکی utilities بوت استرپ 4:
کنترل های فرم در مثال آموزشی قبلی، بسیار به هم چسبیده و فشرده هستند. شما می توانید از کلاس های کمکی بوت استرپ (utility classes) برای چیدمان بهتر این کنترل ها در فرم استفاده کنید.
مثلا در کد مثال زیر، از کلاس کمکی mr-sm-2. استفاده کرده ایم که در تمامی دستگاه و اندازه های صفحه نمایش، یک مارجین راست 2 پیکسلی را به تمامی کنترل ها می دهد.
همچنین کلاس کمکی mb-2.، در صورتی که کنترل ها در حالت stacked و بر روی هم قرار بگیرند (به دلیل عرض کم جهت نمایش همه آن ها در یک خط)، یک مارجین زیر (bottom margin) به اندازه 2 پیکسل را به همه کنترل ها اضافه کردند. برای درک بهتر به خروجی و کد مثال دقت نمایید :

 

مثال 3
<form class="form-inline" action="/action_page.php">
<label for="email" class="mr-sm-2">Email address:</label>
<input type="email" class="form-control mb-2 mr-sm-2" id="email">
<label for="pwd" class="mr-sm-2">Password:</label>
<input type="password" class="form-control mb-2 mr-sm-2" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
راهنمایی :
راهنمایی : به طور کامل در بخش آموزش کلاس های کمکی (Bootstrap 4 utilities classes) به آموزش استفاده از این کلاس ها خواهیم پرداخت.

 

آموزش اعتبارسنجی فرم ها (Form Validation) در Bootstrap 4:
در بوت استرپ 4، می توانید از کلاس اعتبارسنجی (Validation Classes) برای ارسال فیدبک های چک کردن اطلاعات وارد شده در فرم، به کاربر، استفاده کنید.
می توانید کلاس های was-validated یا needs-validation را به المنت form اضافه کرده، بسته به این که بخواهید فرم را قبل یا بعد از زدن دکمه ارسال یا submit، چک کرده و پیام های اعتبارسنجی را به کاربر نشان دهید.
در صورت ورود اطلاعات درست در هر کادر متن یا input فرم، کنترل دارای خطوط حاشیه سبز (valid) و در صورت ورود اطلاعات اشتباه یا عدم ورود اطلاعات لازم، دارای خطوط حاشیه قرمز (invalid) خواهد بود.
همچنین می توانید از المنت هایی با کلاس valid-feedback یا invalid-feedback برای اعلام دقیق پیام خطا به کاربر و یا اعلام اینکه چه چیزی فراموش شده یا نادرست است، استفاده کنید.
مثال عملی : در کد مثال عملی زیر، تمامی موارد گفته شده فوق را در عمل به کار برده ایم. در این کد از کلاس was-validated استفاده کرده ایم که اطلاعات را قبل از ارسال و زدن دکمه submit، چک خواهد کرد :

 

مثال 4
<form action="/action_page.php" class="was-validated">
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required="">
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required="">
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required=""> I agree on blabla.
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

 

آموزش کار با کادرهای ورود اطلاعات فرم در Bootstrap 4
بوت استرپ 4 از کنترل های فرم و ورود اطلاعات زیر، پشتیبانی می کند :
  • ورود متن input.
  • ورود متن چند خطی textarea.
  • کنترل انتخاب گزینه checkbox.
  • کنترل های رادیویی radio.
  • کنترل کادر کشویی select.
در ادامه به آموزش کار با هر یک از کنترل های فوق و ارائه مثال های عملی خواهیم پرداخت.

  • افشین رفوآ