آموزش طراحی سایت-آموزش متد های اعداد جاوااسکریپت

​

سلام بر دوستان عزیزم..

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

آموزش طراحی سایت : متدهای سراسری (global methods)

توابع سراسری (global functions) را می توان برای تمامی نوع داده های (data type) جاوااسکریپت بکار برد. جدول های زیر پرکاربرد ترین متدهایی که حین کار با اعداد در زبان جاوا اسکریپت کارایی دارند را با ذکر کاربرد آن فهرست می کند.

 

​

متد های مربوط به number، متدهایی هستند که می توان برای اعداد از آن ها استفاده کرد.

 

​

متد toString()

این متد یک عدد یا متغیر عددی را به عنوان رشته ی متنی بر می گرداند. متدهای مربوط به شی number را می توان برای انواع عدد بکار گرفت اعم از لفظ ها (literals)، متغیرهای عددی (variable)، عبارت های عددی (expression).

مثال یک :

    var x = 123;
    document.getElementById("demo").innerHTML =
        x.toString() + "< br>" +
       (123).toString() + "< br>" +
       (100 + 23).toS

 

متد toExponential()

رشته ی با اعداد گرد شده برمی گرداند که با قرارداد نمایی (exponential notation) نوشته شده باشد. این تابع در حقیقت یک متغیر عددی را به قرارداد نمایی (exponential notation) تبدیل می کند. یک پارامتر ورودی تعداد کاراکترهای بعد از ممیز اعشار را تعیین می کند.

مثال دو :

var x = 9.656;
document.getElementById("demo") =
x.toExponential() + "< br>" +
x.toExponential(2) + "< br>" +
 x.toExponential(4) + "< br>" +
x.toExponential(6);

پارامتر اختیاری است. در صورت مشخص نکردن پارامتر، جاوا اسکریپت عدد را گرد نمی کند.

 

متد toFixed()

رشته عددی با تعداد اعشار مشخص شده برمی گرداند.

مثال سه :

var x = 9.656;
document.getElementById("demo") =
x.toFixed(0) + "< br>" +
x.toFixed(2) + "< br>" +
x.toFixed(4) + "< br>" +
x.toFixed(6);

 

متد toPrecision()

یک رشته ی عددی با طول مشخص (تعداد کاراکتر معین) برمی گرداند.

مثال چهار :

var x = 9.656;
document.getElementById("demo").innerHTML =
x.toPrecision() + "<br>" +
x.toPrecision(2) + "<br>" +
x.toPrecision(4) + "<br>" +
x.toPrecision(6);

 

آموزش طراحی سایت : تبدیل متغیر به عدد

سه تابع در جاوا اسکریپت وجود دارد که متغیر را به عدد تبدیل می کنند.

The Number() method
The parseInt() method
The parseFloat() method

توابع بالا متدهای مختص شی number نیستند (number methods)، بلکه متدهای سراسری یا global زبان جاوا اسکریپت محسوب می شوند.

 

متد Number()

این تابع متغیرهای جاوا اسکریپت را به عدد تبدیل می کند.

مثال پنج :

document.getElementById("demo") =
Number(true) + "< br>" +
Number(false) + "< br>" +
Number(new Date()) + "< br>" +
Number("  10") + "< br>" +
Number("10  ") + "< br>" +
Number("10 6");   

 

متد parseInt()

تابع parseInt() یک رشته را تجزیه (parse) کرده و یک عدد صحیح برمی گرداند. استفاده از فاصله امکان پذیر می باشد. توجه داشته باشید که تنها عدد اول برگردانده می شود.

مثال شش :

document.getElementById("demo") =
parseInt("10") + "< br>" +
parseInt("10.33") + "< br>" +
parseInt("10 6") + "< br>" +
parseInt("10 years") + "< br>" +
parseInt("years 10"); 

چنانچه امکان تبدیل عدد مورد نظر وجود نداشته باشد، در جواب (NaN (not a number برگردانده می شود.

 

متد parseFloat()

تابع parseFloat() یک رشته را تجزیه (parse) کرده و در جواب یک عدد برمی گرداند. استفاده از فاصله مجاز می باشد. تنها اولین عدد برگردانده می شود.

مثال هفت :

document.getElementById("demo") =
parseFloat("10") + "< br>" +
parseFloat("10.33") + "< br>" +
parseFloat("10 6") + "< br>" +
parseFloat("10 years") + "< br>" +
parseFloat("years 10");

در صورت عدم امکان تبدیل عدد، (NaN (not a number برگردانده می شود.

 

متد valueOf()

یک متغیر عددی را به صورت های مختلف عدد (لفظ / literal، متغیر، عبارت عددی) برمی گرداند.

مثال هشت :

var x = 123;
document.getElementById("demo") =
x.valueOf() + "< br>" +
(123).valueOf() + "< br>" +
(100 + 23).valueOf();

در جاوا اسکریپت، یک عدد می تواند یک مقدار اولیه (typeof = number) یا یک شی (typeof = object) باشد. متد ValueOf() داخل زبان جاوا اسکریپت به منظور تبدیل اشیا یا آیجکت number به مقادیر اولیه بکار گرفته می شود، هیچ لزومی ندارد از آن در کد خود استفاده کنید.

 

با آموزش های دیگر از آموزش جاوا اسکریپت در آموزش طراحی سایت با ما همراه باشید....

​

آموزش طراحی سایت-رنگ و گرادینت در CSS3

​

  

سلام دوستان...

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

 

آموزش رنگها در CSS3

در CSS از اسم رنگ دلخواه, مقدار شانزده شانزدهی (hexadecimal) و RGB (red blue green) پشتیبانی می کند . اما در CSS3 خواص و امکانات نوینی ارائه گردیده که به شرح زیر می باشد :

• رنگ های RGBA (red, blue, green و alpha)

• رنگ های HSL (hue-saturation-lightness / اشباع-روشنایی یا سبکی رنگ)

• رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

• درجه ی شفافیت و کدری Opacity

 

رنگ های RGBA شامل (red, blue, green و alpha)

 

رنگ های RGBA در واقع همان red, blue, green هستند که در CSS3 با افزوده شدن کانال آلفا (Alpha channel) به آن توسعه داده شده و قابلیت بیشتری پیدا کرده است . این قابلیت جدید به شما امکان می دهد درجه یا میزان کدری و شفافیت (opacity) را تعیین کنید . مقدار رنگ های RGBA باrgba(red, green, blue, alpha) تعریف و مقداردهی می شوند . پارامتر alpha عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) .

​

 

مثال زیر رنگ های RGBA متفاوتی تعریف می کند :

p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */

#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */

#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

 

آموزش طراحی سایت : رنگ های HSL

اچ HSL مخفف یا سرنام Hue, Saturation و Lightness می باشد .

یک مقدار HSLبا hsl(hue, saturation, lightness) مقدار دهی و مشخص می شود .

مقدار HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :

• 0 (یا 360) کاملاً قرمز است

• 120 سبز محسوب می شود

• 240 آبی محسوب می شود/li>

 

مفهوم Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آن

مفهوم Lightness نیز یک درصد است : %0 تیره و %100 سفید است .

​

 

مثال زیر رنگ های مختلف HSL را مقداردهی می کند :

#p1 {background-color: hsl(120, 100%, 50%);} /* green */

#p2 {background-color: hsl(120, 100%, 75%);} /* light green */

#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */

#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */

 

رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

مقادیر HSLA در حقیقت همان مقادیر رنگ های HSL هستند که کانال الفا به آن ها افزوده شده است که درجه ی کدری و روشنایی (opacity) رنگ را تنظیم می کند . مقدار رنگ های HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود, پارامتر آلفا میزان کدری و شفافیت رنگ را تنظیم می کند . پارامتر الفا عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر و تیره) .

​

 

نمونه ی زیر رنگ های HSLA متفاوتی را تعریف و مقداردهی می کند :

#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */

#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */

#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */

#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */

 

مفهوم Opacity (درجه ی تیرگی و شفافیت)

خاصیت Opacity درجه ی تیرگی و شفافیت را ویژه ی یک مقدار RGB مشخص, مقداردهی می کند . مقدار خاصیت opacity باید عدد یا مقداری بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) باشد .

​

 

همان طور که مشاهده می کنید نوشته ی درون رنگ نیز همراه خود رنگ کدر شده است . مثال زیر مقادیر RGB مختلفی را با opacity نشان می دهد :

#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */

#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */

#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */

 

آموزش گرادینت در css

در CSS از اسم رنگ دلخواه, مقدار شانزده شانزدهی (hexadecimal) و RGB (red blue green) پشتیبانی می کند .

اما در CSS3 خواص و امکانات نوینی ارائه گردیده که به شرح زیر می باشد :

• رنگ های RGBA (red, blue, green و alpha)

• رنگ های HSL (hue-saturation-lightness / اشباع-روشنایی یا سبکی رنگ)

• رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

• درجه ی شفافیت و کدری Opacity

رنگ های RGBA (red, blue, green و alpha)

رنگ های RGBA در واقع همان red, blue, green هستند که در CSS3 با افزوده شدن کانال آلفا (Alpha channel) به آن توسعه داده شده و قابلیت بیشتری پیدا کرده است . این قابلیت جدید به شما امکان می دهد درجه یا میزان کدری و شفافیت (opacity) را تعیین کنید . مقدار رنگ های RGBA باrgba(red, green, blue, alpha) تعریف و مقداردهی می شوند . پارامتر alpha عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) .

​

 

مثال زیر رنگ های RGBA متفاوتی تعریف می کند :

#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */

#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */

#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

 

رنگ های HSL

رنگ HSL مخفف یا سرنام Hue, Saturation و Lightness می باشد . یک مقدار HSLبا hsl(hue, saturation, lightness) مقدار دهی و مشخص می شود .

مقدار HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :

• 0 (یا 360) کاملاً قرمز است

• 120 سبز محسوب می شود

• 240 آبی محسوب می شود/li>

مفهوم Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آن

مفهوم Lightness نیز یک درصد است : %0 تیره و %100 سفید است .

​

 

مثال زیر رنگ های مختلف HSL را مقداردهی می کند :

#p1 {background-color: hsl(120, 100%, 50%);} /* green */

#p2 {background-color: hsl(120, 100%, 75%);} /* light green */

#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */

#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */

 

رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

مقادیر HSLA در حقیقت همان مقادیر رنگ های HSL هستند که کانال الفا به آن ها افزوده شده است که درجه ی کدری و روشنایی (opacity) رنگ را تنظیم می کند . مقدار رنگ های HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود, پارامتر آلفا میزان کدری و شفافیت رنگ را تنظیم می کند . پارامتر الفا عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر و تیره) .

​

 

نمونه ی زیر رنگ های HSLA متفاوتی را تعریف و مقداردهی می کند :

#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */

#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */

#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */

#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */

 

درجه ی تیرگی و شفافیت Opacity

خاصیت Opacity درجه ی تیرگی و شفافیت را ویژه ی یک مقدار RGB مشخص, مقداردهی می کند . مقدار خاصیت opacity باید عدد یا مقداری بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) باشد .

​

 

همان طور که مشاهده می کنید نوشته ی درون رنگ نیز همراه خود رنگ کدر شده است . مثال زیر مقادیر RGB مختلفی را با opacity نشان می دهد :

#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */

#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */

#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */

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

​

دوره آموزش ASP.NET Core

اهداف دوره MVC Core :

1. در این دوره MVC Core، معماری Core، چگونگی کارکرد MVC Core، بررسی کامل یک Request Life Style و همچنین آموزش انواع MiddleWare، چرخه حیات Middle Ware و انواع آنها بویژه Middle Ware های جدیدی که برای ایمن سازی وبسایت ها از آنها استفاده می شود، آموزش داده می شوند. این بخش از جمله مهم ترین بخش های آموزشی بوده که 2 یا 3 جلسه بطول می انجامد.
2. در این دوره آموزش MVC Core، یک معماری لایه ای قدرتمند (کمی سبک تر از Onion Architecture) بصورت کامل و حرفه ای آموزش داده می شود.
3. در دوره آموزش ASP.Net Core، کلیه اصول طراحی پنج گانه Solid در قالب یک پروژه پیاده سازی می شود.
4. در آموزش MVC Core، کلیه مراحل ساخت بانک اطلاعاتی به روش Code First، Entity Framework و Fluent API آموزش داده می شوند.
5. در دوره MVC Core، کوئری نویسی حرفه ای برای Entity Framework، برای بازیابی انواع مختلفJoin ، SubQuery Table Drive، SubQuery Scollar و همچنین SubQuery نوع سوم، Dynamic Query (جستجو پویا) و گروه بندی داده ها آموزش داده می شود.
6. در دوره ASP.Net Core، تمامی مباحث MVC Core از جمله Model-View-Controller و ارتباط آنها با یکدیگر، بصورت گام به گام آموزش داده می شوند. دانشجویان پس از گذراندن مرحله بالا به توانایی علمی کافی در ساخت پروژه MVC Core می رسند.
7. در این دوره از آموزش پروژه محور ASP.Net Core، کلیه مراحل استفاده از بوت استرپ جهت ساخت پنل مدیریت ریسپانسیو آموزش داده می شود.
8. دانشجویان در دوره MVC Core قادر خواهند بود که بصورت صد در صد کاربردی، پروژه های خود را Full-Ajax کنند؛ بعبارت دیگر در ابتدا آموزش جامعی از یکی از library های فرانت اند و جاوا اسکریپت داده می شود و در بخش بعدی، پس از آموزش Ajax، از ترکیب Ajax با کتابخانه های کمکی مثل بوت استرپ، فرم هایی کاملن مشابه برنامه های تحت ویندوز (پاسخگو به ایونت های کیبورد در جستجو، قابلیت استفاده از Modal جهت افزودن و حذف، استفاده از Sweet Alert جهت نمایش پیغام ها و هشدارها و ...) استفاده می شود.
9. در دوره آموزش پروژه محور MVC Core می آموزید که مراحل ایمن سازی یک وبسایت جهت جلوگیری از هر نوع ورود غیرمجاز بصورت کاربردی و حرفه ای به چه شکل است. در این مرحله، تمامی مباحث identity شامل مدیریت کاربران، مدیریت نقش ها، مدیریت دسترسی نقش ها به بخش های سایت و همچنین استفاده از Claim ها آموزش داده می شود.
10. در این بخش از دوره آموزش MVC Core، تمامی مراحل ساخت یک فروشگاه الکترونیک، از صفر تا صد، بصورت پروژه محور آموزش داده می شود.

در دوره آموزش MVC Core می آموزید که برخلاف فیلم های آموزشی یا انتظار بسیاری از دانشجویان، معماری MVC فقط بعنوان یک پوسته برای پروژه های تحت وب استفاده می شود و تمامی بخش های پروژه در قالب یک معماری برگرفته شده از Onion Architecture ساخته می شود که فرآیند مدلسازی در بخشی جدا، فرآیند ذخیره و بازیابی در بخشی جدا و همچنین هماهنگی تمامی بخش های پروژه برای پیاده سازی قوانین تجاری (Business Rules) در بخش جداگانه ای قرار می گیرند. علاوه بر این، با توجه به قوانین پنج گانه SOLID برای هر یک از بخش های فوق، یک لایه انتزاعی (Abstraction) بصورت جداگانه طراحی می گردد. این دوره آموزشی از دو بخش تشکیل شده که در ابتدا این بخش ها تلاش می شود به شرح مختصری از فریمورک .NET و معماری MVC بپردازیم، سپس عناوین مورد نظر برای تدریس را ارائه دهیم.

سرفصل دوره MVC Core
بخش اول از دوره  MVC Core

آموزش برخی ویژگی های زبان سی شارپ

• آموزش Generic Method ها و کاربرد آن در ASP.Net Core
• آموزش Delegateها و کاربرد آن در ASP.Net Core
• آموزش Anonymous Functionها و کاربرد آن در ASP.Net Core
• آموزش Actionها و Funcها و کاربردهای آنها در ASP.Net Core
• آموزش Lambda Expressionها و کاربرد آن در ASP.Net Core
• آموزش Extension Methodها در C# و کاربرد آن ها در C# Core
• استفاده از var در C# Core و کاربردهای آن ها
• آموزش مفهوم Asynchronous Programming در ASP.Net Core
• کاربرد await و async در Multi Thread
• Thread چیست و کاربرد آن در ASP.Net Core
• آموزش MultiThread
• چه هنگام از Multi Thread استفاده کنیم
• در چه مواقعی استفاده از Multi Thread به ما کمکی نمی کند
• کپسوله سازی مفهوم Threating در await و async
• بررسی State اجرایی یک پردازش async در C# Core
• آموزش Dependency Injection (DI)
• آموزش Inversion of Control (IoC)
• آموزش پروتکل های ATP
• آموزش Builder Pattern
• آموزش Marker Builder

آموزش معماری ASP.Net Core و تشریح Request Life Cycle در ASP.Net Core

• آموزش Model و مفهوم آن در ASP.Net Core
• آموزش View و مفهوم آن در ASP.Net Core
• آموزش Controller و مفهوم آن در ASP.Net Core
• ساخت اولین پروژه کوچک برای درک مفهوم ASP.Net Core

آموزش Entity Framework Code First و کاربردهای آن در برنامه نویسی ASP.Net Core

• آموزش مفهوم ORM در برنامه نویسی
• ساخت Data Base براساس Class Diagram
• بررسی رابطه Composition بین کلاس های موجود در یک Diagram ساده
• نگاشت Composition با Data Base رابطه ای با استفاده از Code First
• آموزش Fluent API و کاربرد Fluent API در Entity Framework Core
• آموزش ساخت Relation یک به چند با استفاده از Fluent API
• آموزش Unique Constraint با استفاده از Fluent API در ASP.Net Core
• آموزش Default Value با استفاده از Fluent API در ASP.Net Core
• آموزش تخصیص دقیق نوع داده ای (Data Type) با استفاده از Fluent API در ASP.Net Core
• آموزش ساخت رابطه چند به چند(Many to Many) با استفاده از Fluent API در ASP.Net Core
• بررسی مفهوم Migration در ASP.Net Core
• آموزش Versioning در ASP.Net Core Migration

آموزش ذخیره و بازیابی داده ها در ASP.Net Core

• آموزش Insert و Update و Delete نمونه رکوردها با استفاده از ASP.Net Core
• آموزش بازیابی مجموعه ای از Recordها در ASP.Net Core
• بازیابی از چندین جدول با استفاده از Joinها در ASP.Net Core
• مفهوم Scalar Subquery در SQL Server و شبیه سازی آن در ASP.Net Core
• مفهوم Table Drived Sub Query و شبیه سازی آن در ASP.Net Core
• بازیابی Recordها براساس شناسه اصلی(Primary Key)
• محدودسازی Recordها با استفاده از Take
• مفهوم صفحه بندی Recordها در ASP.Net Core
• آموزش مفهوم Dynamic Query در ASP.Net Core
• آموزش مفهوم Search Model در ASP.Net Core

پروژه عملی بخش اول از دوره MVC Core :
ساخت Class Diagram برای ساخت سایت خبری بصورت گام به گام بهمراه بانک اطلاعات بهینه سازی شده بر اساس Fluent API در ASP.NET Core

بخش دوم از دوره  MVC Core

آشنایی با مفهوم View Model در دوره MVC Core

• آموزش مفهوم View Model و کاربردهای آن در ASP.Net Core
• آموزش Attribute Validationها و مفهوم شی گرایی آن
• آموزش Required Attributeها در ASP.Net Core Model View
• آموزش String Lengthها در ASP.Net Core Model View
• آموزش Rangeها در ASP.Net Core Model View
• آموزش Compareها در ASP.Net Core Model View
• آموزش Urlها در ASP.Net Core Model View
• آموزش Regular Expressionها در ASP.Net Core Model View
• آموزش بررسی صحت داده ای View Model با استفاده از ویژگی Model State
• آموزش مفهوم Unobtrusive Validation در ASP.Net Core و ارائه چند مثال کاربردی
• بررسی کتابخانه اعتبارسنجی Unobtrusive مورد نیاز بر ASP.Net Core

آموزش انواع خروجی های توابع Action در ASP.Net Core

• آموزش ViewCore Result و کاربردهای آن در ASP.Net
• آموزش Partial View Result و کاربردهای آن در ASP.Net Core
• آموزش Redirect Result و کاربردهای آن در ASP.Net Core
• آموزش JSon Result و کاربردهای آن در ASP.Net Core
• آموزش JavaScript Result و کاربردهای آن در ASP.Net Core
• آموزش File Result و کاربردهای آن در ASP.Net Core
• آموزش Empty Result و کاربردهای آن در ASP.Net Core

آموزش نحوه ارسال اطلاعات از Actionها به Viewها

• آموزش View Bag در ASP.Net Core
• آموزش TempData در ASP.Net Core
• آموزش View Data در ASP.Net Core
• آموزش تخصیص یک Model کامل به یک View یا Partial View
• آموزش Bind به عنوان یک View با یک Model

آموزش انواع Scope Variableها در ASP.Net Core

• آموزش مفهوم Session در ASP.Net Core و کاربرد آن و اشتراک گذاری داده ها در فضای کاری یک کاربر
• احتیاط های لازم برای کار کردن با Sessionها در ASP.Net Core
• قرار دادن Objectهای پیچیده درون Session
• آموزش Json Serialize برای نگه داری اشیا پیچیده در Session
• آموزش Reserialize کردن اشیا پیچیده در درون Session
• آموزش Applicationها در ASP.Net Core و کاربرردهای آن

آموزش Routing در ASP.Net Core

• آموزش مفهوم Middle Wareها در ASP.Net Core
• آموزش تنظیمات Middle Wareهای Routing در ASP.Net Core
• آموزش تجزیه و تحلیل Routeها و متغیرهای آنها
• آموزش مفهوم Routing Attribute در ASP.Net Core
• آموزش استفاده از چندین Routing Attribute برای یک Action در ASP.Net Core

آموزش Security و Login با استفاده از ASP Identity

• معرفی ASP.Net Core Identity و امکانات آن
• آموزش نصب و پیکربندی ASP.Net Core Identity
• ساخت صفحات Login ، Logout و Registry برای ASP.Net Core
• آموزش Authorize Attribute در ASP.Net Core
• پیاده سازی Login و Logout در ASP.Net Core

آموزش Cookie در ASP.Net Core

• آموزش مفهوم Cookie در ASP.Net Core
• آموزش خواندن داده ها در Cookie در ASP.Net Core
• آموزش نوشتن داده ها در Cookie در ASP.Net Core
• آموزش حذف Cookieها در ASP.Net Core
• آموزش کامل optionهای Cookie شامل Secure ، HTTP Only، Expires، Path و Domain 

آموزش Razor و قواعد استفاده از آن

• آموزش Syntax مربوط به Razor در ASP.Net Core
• آموزش Razorهای Implicit در ASP.Net Core
• آموزش Razorهای Explicit در ASP.Net Core
• آموزش Expression Encoding در Razor و ماهیت کاربردهای آن
• آموزش Razor Code Blocks در ASP.Net Core
• استفاده از حلقه های تکرار درRazor
• استفاده از حلقه های تکراردر Code Variableها در حالات مختلف CsHTML

آموزش Tag Helperها در ASP.Net Core

• Tag Helper چیست و چه کاربردی دارد؟
• آموزش Form Tag Helper و کاربردهای آن در ASP.Net Core
• آموزش Action های Post و GET و تفاوت های آنها در ASP.Net Core
• آموزش Input Tag Helper در ASP.Net Core
• آموزش Text Area Tag Helper در ASP.Net Core
• آموزش Validation Message در ASP.Net Core
• آموزش Validation Summary Tag Helper در ASP.Net Core
• آموزش Bind کردن در ASP.Net Core
• آموزش Multi Selector در ASP.Net Core

آموزش کامل View در ASP.Net Core

• آموزش Layout در ASP.Net Core و ارائه مثال کاربردی
• آموزش Partial View در ASP.Net Core و ارائه مثال کاربردی
• آموزش View Component در ASP.Net Core و ارائه مثال کاربردی

پروژه عملی بخش دوم از دوره MVC Core  :

ساخت سایت خبری

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

آموزش معماری لایه ای

• آموزش علل استفاده از معماری لایه ای در ASP.Net Core
• آموزش ساخت لایه Domain Model با استفاده از EF Core
• آموزش ساخت لایه Data Access با استفاده از EF Core
• آموزش برقراری ارتباط با لایه ها و ساخت DTO هر لایه
• طراحی Class Diagram مربوط به سایت خبری
• ساختن لایه Domain Model براساس Class Diagram
• ساختن Data Base براساس Domain Model
• تکمیل Repository هریک از Classهای رده بندی خود خبر
• طراحی بخش نظرات کاربران(Data Access + Domain Model)
• چگونه از کامنت گذاری کاربران Login نکرده جلوگیری کنیم
• طرحی از بخش UI مربوط به رده بندی اخبار
• طراحی بخش UI مرتبط با بخش مدیریت اخبار
• ساخت صفحه جستجوی Domain مربوط به وب سایت
• آموزش Page بندی در صفحات
• چگون از ورود افراد Login نکرده به صفحات مدیریتی جلوگیری کنیم
• آپلود کردن تصویر همراه با خبر به وب سایت
• چگونه کلیه راه های نفوذ از طریق آپلود تصویر را بگیریم
• چگونه در وب سایت هنگام Login کاربران Catch بگذاریم
• ساخت بخش مدیریتی نظرات کاربران
• ساخت صفحه مدیریت نظرات کاربران به Ajax کامل
• استفاده از Logout حرفه ای برای سایت خبری
• چگونه Menu داینامیک برای رده بندی اخبار بسازیم
• آموزش امکانات و استاتداردهای لازم جهت SEO سازی صفحات خبری
• ساخت صفحه درج نظرات
• جلوگیری از درج نظرات کاربران Login نکرده
• آموزش تنظیمات Config جهت Upload کردن سایت
• آموزش Script گیری Data Base جهت Upload کردن سایت
• آموزش Upload کردن نهایی وب سایت بر روی هاست

آموزش Jquery

• Jquery چیست؟
• نحوه استفاده از Layout Pages Jquery
• آموزش مفهوم DOM و Eventهای Jquery DOM
• آموزش انواع Jquery Selector جهت هماهنگی با ASP.Net Core
• آموزش نحوه استفاده از Eventها در JQuery
• آموزش Effectهای درونی JQuery جهت ASP.Net Core

آموزش Ajax

• Ajax چیست و کاربرد آن در ASP.Net Core
• معرفی شی xml HTTP Request و پردازش های async
• آموزش فراخوانی Requestهای get و جانمایی آنها توسط JQuery در ASP.Net Core
• آموزش فراخوانی Requestهای Post و دریافت نتایج آنها توسط ASP.Net Core
• آموزش JSon در ASP.Net Core و کاربرد آن
• آموزش Serialize کردن و Deserilize کردن داده توسط ASP.Net Core و Jquery
• آموزش Cascade Drop Down همراه با Sub Form توسط Ajax
• آموزش استفاده از Auto Completeها و کاربرد آنها در پروژه های وب

 آموزش Roting در MVC Core

• آموزش Routing Template در MVC Core
• آموزش مسیریابی متعارف(Conventional Routing)
• نحوه تنظیم Route های مختلف
• آموزش Attribute Routing در MVC Core
• آموزش URL Generation در MVCCore

 

آموزش ASP.NET Core - چرا ASP.NET Core

سلام بر دوستان عزیز و همراه...

امروز با یک مبحث دیگه در زمینه آموزش ASP.NET Core همراه شما هستم، بدون شک دوستانی که در زمینه توسعه اپلیکیشن های تحت وب با استفاده از سی شارپ و فریمورک های NET. فعال هستند، با مفهوم NET. و NET Core. آشنایی دارند، اما بهتر برای دوستانی که آشنایی محدودی با این فریم ورک دارند توضیح مختصری ارائه بدیم.

فریمورک NET. از جمله محصولات مایکروسافت بود که سال ها توسط برنامه نویسان فعال در حوزه تولید اپلیکیشن مورد استفاده قرار می گرفت اما بدلیل برخی محدودیت هایی که برای برنامه نویسان ایجاد می کرد، محبوبیت خود را بویژه در میان Startup ها از دست داد، تا اینکه مایکروسافت با معرفی فریم ورک NET Core. انقلابی جدید ایجاد کرد. فریم ورک NET Core. بصورت محسوسی سبک بود و وجود مزایا دیگری همچون متن باز بودن (Open Source)، چند سکویی بودن (Cross Platform)، ساده، قدرتمند، رایگان و ماژولار بودن باعث شد که این محصول جدید مایکروسافت به سرعت مورد استقبال قرار بگیرد و دوباره مایکروسافت در فضا رقابتی توسعه اپلیکیشن های تحت وب خوش بدرخشد.

علاوه بر این، آموزش ASP.NET Core به شما نشان می دهد که فریم ورک NET Core. تمامی ویژگی های Core که برای راه اندازی یک برنامه NET Core. نیاز است رو شامل میشه. اگر ویژگی دیگری در Core نیاز باشه می توان آن را بوسیله NuGet Packages تامین کرد که در صورت نیاز می تونیم آنها رو به برنامه خود اضافه کنیم. پس برنامه NET Core. می تونه باعث بهبود عملکرد، کاهش حافظه مورد نیاز و آسان شدن حفظ و نگهداری برنامه ساخته شده هم بشه.

خوب اگر از من بپرسید که جواب من به سوال "چرا NET Core." چیه، جواب شما رو با استفاده از دو پاراگراف زیر میدم (این دو پاراگراف برگرفته از مقاله ای هستش که بر اساس مطالب سایت های مختلف آماده کردم) :

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

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

حالا وقتش رسیده که ویژگی های NET Core. و ضرورت آموزش ASP.NET Core برای دوستان فعال در این حوزه رو بصورت مفصل با همدیگه بررسی و مطالعه کنیم :

1. متن باز بودن فریم ورک NET Core. :

از آنجا که NET Core. فریمورکی متن باز است، بر روی سایت GitHub در دسترس است.

2. ویژگی کراس پلتفرم در فریم ورک NET Core. :

فریم ورک NET Core. را می توان بر روی سیستم های عامل ویندوز، مک و لینوکس اجرا کرد. در هر سیستم عامل، زمان مورد نیاز برای اجرا کد یکسان و خروجی گرفتن از آن متفاوت است.

3. سازگاری با معماری های مختلف در فریم ورک NET Core. :

فریم ورک NET Core. را می توان در معماری های ساختاری مختلف همچون X64، X86 و ARM استفاده کرد و رفتار مشابهی را از آن دریافت کرد.

4. دامنه وسیعی از برنامه ها در MVC Core :

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

5. امکان پشتیبانی از چند زبان در فریمورک NET Core. :

برای توسعه برنامه در Asp.NET Core می توانید از زبان های برنامه نویسی C#، F# و ویژوال بیسیک استفاده کنید. علاوه بر این، می توانید از IDE دلخواه خود، همچون Visual Studio 2017/2019، Visual Studio Code، Sublime Text، Vim و .... استفاده کنید.

6. معماری ماژولار در MVC Core :

فریم ورک NET Core. با استفاده از NuGet Packages از معماری ماژولار پشتیبانی می کند. پکیج های متفاوتی وجود دارد که کاربر آنها را متناسب با نیاز خود به پروژه اضافه می کند. نکته قابل توجه این است که حتی کتابخانه NET Core. نیز بعنوان یک NuGet Package ارائه می شود و این مسئله باعث کاهش فضا اشغال شده از حافظه، بهبود عملکرد و نگهداری آسان پروژه می شود.

7. پیاده سازی CLI در MVC Core :

فریم ورک NET. ابزارهای Command-Line Interface را برای توسعه و یکپارچه سازی برنامه بصورت پیوسته، بکار می گیرد.

8. سازگاری در فریم ورک NET Core. :

با استفاده از بکارگیری .NET Standard Specification با فریمورک NET. و Mono APIs نیز سازگاری دارد.

9. انعطاف پذیری در فریم ورک NET Core. :

برنامه NET Core. می تواند در سطح کاربر یا سیستم یا با کانتینرهای Docker گسترش داده شود.

 

از اونجایی که دوست ندارم این مطلب رو بصورت ناقص با شما به اشتراک بگذارم، پیکربندی فریم ورک NET Core. رو با استفاده از یک شکل با هم بررسی می کنیم :

 

 

 

 

 

 

 

 

 

 

 

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

آموزش پایگاه داده پایتون

سلام دوستان...

 

با آموزش پایتون همراه ما باشید :

 

پایتون Python و دسترسی به دیتابیس MySQL

پایتون جهت دسترسی به دیتابیس از توابع کتابخانه ای DB-API استفاده کرده و interface هایی که برای اتصال به پایگاه داده و مدیریت داده های اپلیکیشن بایستی پیاده سازی شود، بر اساس همین استاندارد می باشد. در واقع بیشتر رابط های (interface) اتصال به دیتابیس از این استاندارد پیروی می کنند.

توسعه دهنده می تواند بر اساس نیاز اپلیکیشن خود، دیتابیس مناسب را انتخاب کند. توابع کتابخانه ای اتصال و استفاده از دیتابیس زبان پایتون (API) از database server های زیر پشتیبانی می کند:

• GadFly
• mSQL
• MySQL
• PostgreSQL
• Microsoft SQL Server
• Informix
• Interbase
• Oracle
• Sybase

برای مشاهده لیست interface های اتصال به دیتابیس می توانید به این لینک مراجعه کنید: http://wiki.python.org/moin/DatabaseInterfaces. لازم به ذکر است که برای اتصال به هر دیتابیس مجزا و جهت دسترسی یا مدیریت داده های اپلیکیشن می بایست یک ماژول DB API جداگانه دانلود و نصب نمایید. به طور مثال، چنانچه توسعه دهنده می بایست علاوه بر MySQL به دیتابیس Oracle دسترسی پیدا کند، بدیهی است که باید ماژول های مجزا هریک را جداگانه از اینترنت بارگیری کرده و نصب نماید (ماژول های دیتابیس MySQL و Oracle).

ماژول DB API یک حداقل استاندارد برای مدیریت دیتابیس با استفاده از ساختار و دستور نحوی زبان برنامه نویسی پایتون در اختیار توسعه دهنده قرار می دهد. استفاده از این مجموعه توابع کتابخانه ای یا API مراحل زیر را شامل می شود:

• وارد کردن ماژول این مجموعه توابع کتابخانه ای با استفاده از دستور import
• برقراری اتصال به دیتابیس
• صدور و فراخوانی دستورات و توابع (Store procedure) مورد نیاز SQL
• بستن و قطع اتصال به دیتابیس

در آموزش حاضر تمامی این مباحث را با دیتابیس رابطه ای MySQL مدیریت می کنیم. به همین جهت ماژول MySQLdb را بارگیری نموده و نصب می کنیم.

 

آموزش پایتون : ماژول MySQLdb

ماژول MySQLdb یک رابط یا interface برای اتصال به سرویس دهنده دیتابیس MySQL (MySQL Database server) با زبان برنامه نویسی پایتون است که توسعه دهنده می بایست برای دسترسی و مدیریت داده های اپلیکیشن آن را پیاده سازی کند. این اینترفیس ویرایش 2.0 Database API پایتون را پیاده سازی کرده و بر پایه ی MySQL C API ساخته شده است.

 

نصب MySQLdb

جهت استفاده از توابع MySQLdb لازم است ماژول آن را بر روی دستگاه خود نصب نمایید. کافی است دستورات زیر را در اسکریپت پایتون لحاظ کرده و آن ها را اجرا نمایید:

#!/usr/bin/python

import MySQLdb

کد فوق یک پیغام خطا مبنی بر اینکه ماژول MySQLdb نصب نشده است تولید می کند:

Traceback (most recent call last):

File "test.py", line 3, in <module>

import MySQLdb

ImportError: No module named MySQLdb

</module>

به منظور نصب ماژول MySQLdb، کافی است دستورات زیر را تایپ نمایید:

For Ubuntu, use the following command -

$ sudo apt-get install python-pip python-dev libmysqlclient-dev

For Fedora, use the following command -

$ sudo dnf install python python-devel mysql-devel redhat-rpm-config gcc

For Python command prompt, use the following command -

pip install MySQL-python

نکته:

لازم است جهت نصب ماژول فوق، root privilege (مجوز در سطح دسترسی به فایل های ریشه) داشته باشید.

 

پیاده سازی اتصال به دیتابیس (Database connection) در آموزش پایتون

پیش از اتصال به دیتابیس MySQL، لازم است اقدامات زیر را کامل انجام داده باشید:

• یک دیتابیس به نام TESTDB ایجاد نموده اید.
• یک جدول به نام EMPLOYEE در دیتابیس مزبور تعریف کرده اید.
• جدول مورد نظر فیلدهایی به نام FIRST_NAME، LAST_NAME، AGE، SEX و INCOME را دربرمی گیرد.
• جهت دسترسی به دیتابیس User ID (شناسه ی کاربری) را بر روی "testuser" و گذرواژه را بر روی "test123" تنظیم کرده اید.
• ماژول MySQLdb به طور کامل بر روی دستگاه مورد نظر نصب شده است.
• با مفاهیم پایه و ابتدایی دیتابیس MySQL آشنایی کافی داشته باشید.

 

ماژول

ذیل مثالی را مشاهده می کنید که در آن توسعه دهنده با زبان پایتون به دیتابیس رابطه ای MySQL به نام "TESTDB" متصل می شود.

#!/usr/bin/python

import MySQLdb

# Open database connection

db = MySQLdb.connect("localhost","testuser","test123","TESTDB" )

# prepare a cursor object using cursor() method

cursor = db.cursor()

# execute SQL query using execute() method.

cursor.execute("SELECT VERSION()")

# Fetch a single row using fetchone() method.

data = cursor.fetchone()

print "Database version : %s " % data

# disconnect from server

db.close()

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

Database version : 5.0.45

زمانی که اتصال به دیتابیس یا منبع داده ای مورد نظر با موفقیت انجام می شود، یک آبجکت Connection در خروجی بازگردانی شده و متعاقبا داخل آبجکت db جهت استفاده در آینده ذخیره می گردد. در غیر این صورت مقدار db برابر None قرار داده خواهد شد. آبجکت db سپس جهت اعلان و آماده سازی آبجکت cursor استفاده می شود. حال به منظور اجرای دستورهای درخواست داده و پرس و جو از دیتابیس، متد execute() بر روی آبجکت cursor فراخوانی می شود. در پایان، پیش از خروج از دیتابیس، اتصال به دیتابیس قطع شده و منابع مورد استفاده آزاد می شوند.

 

ایجاد جدول دیتابیس در آموزش پایتون

پس از اینکه اتصال به دیتابیس برقرار شد، توسعه دهنده می تواند اقدام به ساخت جدول و درج سطر در جداول دیتابیس نماید. برای این منظور لازم است متد execute را بر روی آبجکت cursor صدا بزند.

مثال

در زیر یک جدول به نام EMPLOYEE ایجاد می کنیم:

#!/usr/bin/python

import MySQLdb

# Open database connection

db = MySQLdb.connect("localhost","testuser","test123","TESTDB" )

# prepare a cursor object using cursor() method

cursor = db.cursor()

# Drop table if it already exist using execute() method.

cursor.execute("DROP TABLE IF EXISTS EMPLOYEE")

# Create table as per requirement

sql = """CREATE TABLE EMPLOYEE (

FIRST_NAME CHAR(20) NOT NULL,

LAST_NAME CHAR(20),

AGE INT,

SEX CHAR(1),

INCOME FLOAT )"""

cursor.execute(sql)

# disconnect from server

db.close()

 

عملیات INSERT

این عملیات زمانی اجرا می شود که توسعه دهنده بخواهد سطر و رکورد جدید در جدول دیتابیس جاری درج نماید.

مثال

مثال زیر دستور INSERT زبان SQL را برای ایجاد رکورد جدید در جدول EMPLOYEE اجرا می کند:

#!/usr/bin/python

import MySQLdb

# Open database connection

db = MySQLdb.connect("localhost","testuser","test123","TESTDB" )

# prepare a cursor object using cursor() method

cursor = db.cursor()

# Prepare SQL query to INSERT a record into the database.

sql = """INSERT INTO EMPLOYEE(FIRST_NAME,

LAST_NAME, AGE, SEX, INCOME)

VALUES ('Mac', 'Mohan', 20, 'M', 2000)"""

try:

# Execute the SQL command

cursor.execute(sql)

# Commit your changes in the database

db.commit()

except:

# Rollback in case there is any error

db.rollback()

# disconnect from server

db.close()

مثال فوق را می توان جهت تولید Query های SQL به صورت dynamic (در زمان اجرا) به صورت زیر نوشت:

#!/usr/bin/python

import MySQLdb

# Open database connection

db = MySQLdb.connect("localhost","testuser","test123","TESTDB" )

# prepare a cursor object using cursor() method

cursor = db.cursor()

# Prepare SQL query to INSERT a record into the database.

sql = "INSERT INTO EMPLOYEE(FIRST_NAME, \

LAST_NAME, AGE, SEX, INCOME) \

VALUES ('%s', '%s', '%d', '%c', '%d' )" % \

('Mac', 'Mohan', 20, 'M', 2000)

try:

# Execute the SQL command

cursor.execute(sql)

# Commit your changes in the database

db.commit()

except:

# Rollback in case there is any error

db.rollback()

# disconnect from server

db.close()

مثال

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

..................................

user_id = "test123"

password = "password"

con.execute('insert into Login values("%s", "%s")' % \

(user_id, password))

..................................

 

عملیات خواندن داده ها (READ)

عملیات READ منحصرا اطلاعات مفیدی را از دیتابیس واکشی می کند.

پس از برقرار اتصال به دیتابیس، می توان از آن جهت درخواست داده های مورد نظر Query گرفت. دو متد fetchone() و fetchall() نیز برای همین منظور تعبیه شده اند.

متد fetchone(): این متد همان طور که از اسم آن پیدا است، تنها یک رکورد یا سطر را در خروجی برمی گرداند. در واقع متد حاضر سطر بعدی از میان مجموعه سطرهای داده (result set خروجی کوئری) را بازگردانی می نماید. زمانی که توسعه دهنده با استفاده از cursor از دیتابیس کوئری می گیرد، خروجی یک آبجکت result set (مجموعه سطرهای داده) می باشد.

متد fetchall(): متد جاری قادر است همزمان چندین مقدار را ازدیتابیس واکشی کند. این متد تمامی سطرهای موجود در مجموعه سطرهای داده یا آبجکت result set را بازیابی می کند. اگر برخی از سطرها قبلا از دیتابیس استخراج شده باشد، در آن صورت باقی سطرها از آبجکت result set واکشی می شود.

متد rowcount: این المان یک attribute فقط خواندنی (read-only) است و تعدد سطرهایی که تحت تاثیر متد execute() قرار گرفتند را بازمی گرداند.

مثال

رویه procedure زیر تمامی سطرهای موجود در دیتابیس را از جدول EMPLOYEE که مقدار فیلد income آن بیشتر از 1000 می باشد را به عنوان خروجی کوئری بازمی گرداند:

#!/usr/bin/python

import MySQLdb

# Open database connection

db = MySQLdb.connect("localhost","testuser","test123","TESTDB" )

# prepare a cursor object using cursor() method

cursor = db.cursor()

# Prepare SQL query to INSERT a record into the database.

sql = "SELECT * FROM EMPLOYEE \

WHERE INCOME > '%d'" % (1000)

try:

# Execute the SQL command

cursor.execute(sql)

# Fetch all the rows in a list of lists.

results = cursor.fetchall()

for row in results:

fname = row[0]

lname = row[1]

age = row[2]

sex = row[3]

income = row[4]

# Now print fetched result

print "fname=%s,lname=%s,age=%d,sex=%s,income=%d" % \

(fname, lname, age, sex, income )

except:

print "Error: unable to fecth data"

# disconnect from server

db.close()

خروجی زیر را برمی گرداند:

fname=Mac, lname=Mohan, age=20, sex=M, income=2000

 

عملیات UPDATE و بروز رسانی داده ها

زمانی که عملیات UPDATE بر روی دیتابیس اجرا می شود، یک یا چندین سطر موجود در این دیتابیس با داده های جدید بروز رسانی می شوند.

رویه procedure و قطعه کدی که در زیر مشاهده می کنید، تمامی رکوردهایی که مقدار فیلد SEX آن ها 'M' می باشد را بروز رسانی می کند.در مثال جاری، مقدار فیلد AGE تمامی مردها را به میزان یک سال افزایش می دهیم.

مثال

#!/usr/bin/python

import MySQLdb

# Open database connection

db = MySQLdb.connect("localhost","testuser","test123","TESTDB" )

# prepare a cursor object using cursor() method

cursor = db.cursor()

# Prepare SQL query to UPDATE required records

sql = "UPDATE EMPLOYEE SET AGE = AGE + 1

WHERE SEX = '%c'" % ('M')

try:

# Execute the SQL command

cursor.execute(sql)

# Commit your changes in the database

db.commit()

except:

# Rollback in case there is any error

db.rollback()

# disconnect from server

db.close()

 

عملیات DELETE و حذف رکورد از دیتابیس

عملیات DELETE زمانی استفاده می شود که لازم باشد یک یا چند رکورد از دیتابیس مورد نظر پاک شوند. کد حاضر تمامی رکوردهای جدول EMPLOYEE که مقدار فیلد AGE آن ها بیش از 20 می باشد را حذف می نماید:

مثال

#!/usr/bin/python

import MySQLdb

# Open database connection

db = MySQLdb.connect("localhost","testuser","test123","TESTDB" )

# prepare a cursor object using cursor() method

cursor = db.cursor()

# Prepare SQL query to DELETE required records

sql = "DELETE FROM EMPLOYEE WHERE AGE > '%d'" % (20)

try:

# Execute the SQL command

cursor.execute(sql)

# Commit your changes in the database

db.commit()

except:

# Rollback in case there is any error

db.rollback()

# disconnect from server

db.close()

 

اجرای تراکنش بر روی دیتابیس (Transactions)

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

تراکنش دارای چهار ویژگی معروف می باشد:

(اصل یا همه یا هیچ) Atomicity : تراکنش یا کاملا و به صورت یک پکیج اجرا می شود یا هیچ اتفاقی نمی افتد.

(اصل یکپارچگی و پایداری) Consistency: یک تراکنش باید پایگاه داده را از وضعیت پایدار و مشخص به وضعیت سالم، مشخص و پایدار دیگری انتقال دهد.

(اصل انزوا) Isolation: اطمینان حاصل می کند که تراکنش هایی که به طور همزمان اجرا می شوند، بر روی یکدیگر و سلامت دیتابیس اثری نمی گذارد، گویا هر یک در انزوا و به طور جداگانه اجرا می شوند.

(اصل پایایی و ماندگاری) Durability : زمانی که یک تراکنش به صورت نهایی ثبت و به اجرا رسید (commit)، اثرشان ماندگار و پایا خواهد بود، حتی اگر سیستم دچار خرابی ناگهانی شود.

مثال

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

# Prepare SQL query to DELETE required records

sql = "DELETE FROM EMPLOYEE WHERE AGE > '%d'" % (20)

try:

# Execute the SQL command

cursor.execute(sql)

# Commit your changes in the database

db.commit()

except:

# Rollback in case there is any error

db.rollback()

عملیات Commit و ثبت نهایی

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

در زیر تکه کد ساده ای را مشاهده می کنید که متد commit() را بر روی آبجکت db صدا می زند.

db.commit()

 

عملیات ROLLBACK و بازگشت به وضعیت قبلی

اگر از تغییرات ثبت شده رضایت کامل ندارید، می توانید دیتابیس را به وضعیت قبل از انجام تراکنش بازگردانید. برای این منظور کافی است متد rollback() را بر روی آبجکت db فراخوانی نمایید.

db.rollback()

 

قطع اتصال به دیتابیس (متد close())

جهت بستن اتصال به دیتابیس کافی است متد close() را به صورت زیر فراخوانی نمایید:

db.close()

اگر اتصال به دیتابیس با فراخوانی متد close() بسته شود، در آن صورت تمامی تراکنش های انجام نشده به صورت نهایی، توسط DB به وضعیت قبلی بازگردانی می شوند.

 

مدیریت خطاها

خطاها بر اثر عوامل مختلفی رخ می دهند. برخی از خطاها بر اثر خطا گرامری و اشکال در سینتکس دستور SQL اجرا شده، رخ می دهند. برخی دیگر بر اثر عدم موفقیت در اتصال (connection failure) و برخی هم به دلیل فراخوانی متد fetch بر روی دستوری که قبلا یا کاملا انجام شده و یا لغو گردیده، اتفاق می افتند.

با DB API تعدادی خطا اعلان می کند که باید در هر ماژولی تعریف شده باشد. این خطاها (exceptions) در جدول زیر لیست شده اند:

 

اسکریپت های پایتون اپلیکیشن شما می بایست تمامی این خطاها را مدیریت کند. اما لازم است قبل از بکار بردن هر کدام از این exception ها اطمینان حاصل نمایید که MySQLdb امکان پشتیبانی از آن ها را دارد.

آموزش پایتون ادامه دارد.

آموزش طراحی سایت-روش Flex در Bootstrap 4

​

  

سلام با آموزش Bootstrap 4 از دوره آموزش طراحی سایت در خدمت شما هستیم

 

آموزش کاربرد روش Flex در Bootstrap 4

بوت استرپ 4، از کلاس های Flex برای کنترل چیدمان (layout) اجزای صفحه استفاده می کند.

 

آموزش FlexBox با بوت استرپ 4:

بزرگترین تفاوت بین Bootstrap 3 و Bootstrap 4 این است که بوت استرپ 4 از FlexBox به جای شناورسازی (floats) جهت مدیریت و چیدمان قرارگیری عناصر صفحه، استفاده می کند.

ماژول قالب بندی Flexible Box، روش ساده تری جهت ایجاد قالب ریسپانسیو و واکنش گرا، بدون استفاده از خاصیت های شناوری (float) و موقعیت (Position)، در اختیارمان قرار داده است. اگر با ماژول Flex آشنا نیستید، به بخش آموزش FlexBox در سایت تحلیل داده بروید.

نکته :

ماژول FlexBox در نسخه های IE9 و قبلتر پشتیبانی نمی شود.

اگر نیاز دارید تا از پشتیبانی مرورگرهای IE9 و IE8 بهره گیرید، از Bootstrap 3 استفاده نمایید. بوت استرپ ورژن 3، پایدارترین نسخه بوت استرپ تا سال 2019 بوده و همچنان توسط تیم تولید کننده جهت رفع باگ های احتمالی و پشتیبانی و آموزش، مورد حمایت است اما ویژگی های جدید بوت استرپ 4، به آن اضافه نشده است!

برای ایجاد یک عنصر دربرگیرنده (Container) ماژول FlexBox و قرار دادن عناصر فرزند مورد نظر در آن، از کلاس d-flex، استفاده نمایید.

مثال: در کد مثال عملی زیر، یک عنصر FlexBox ایجاد کرده ایم که 3 عنصر دیگر درون آن قرار گرفته است.

 

 

 

آموزش طراحی سایت : مثال 1

 

 

 

 

Bootstrap Example

 

 

 

 

 

 

 

 

 

 

 

 

Flex

 

 

To create a flexbox container and transform direct children into flex items, use the d-flex class:

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

 

 

خروجی :

 

Flex

To create a flexbox container and transform direct children into flex items, use the d-flex class:

​

 

برای ایجاد یک عنصر درون خطی inline flexbox، از کلاس d-inline-flex به صورت زیر استفاده کنید :

 

مثال 2

 

 

 

 

 

Bootstrap Example

 

 

 

 

 

 

 

 

 

 

 

 

Inline Flex

 

 

To create an inline flexbox container, use the d-inline-flex class:

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

 

 

خروجی :

 

Inline Flex

To create an inline flexbox container, use the d-inline-flex class:

​

 

 

آموزش طراحی سایت : آموزش چینش افقی Horizontal Direction در FlexBox:

از کلاس flex-row برای نمایش افقی (Horizontal) عناصر به صورت کنار هم استفاده نمایید (این حالت، روش پیش فرض نمایش flexBox است).

نکته :

برای نمایش عناصر از راست به چپ (برعکس حالت پیش فرض)، از کلاس flex-row-reverse استفاده نمایید.

مثال: در کد مثال عملی زیر، گروه اول عناصر را به صورت پیش فرض و از چپ به راست نمایش داده و گروه دوم را به صورت برعکس (از راست به چپ) قرار داده ایم :

 

مثال 3

 

 

 

 

Bootstrap Example

 

 

 

 

 

 

 

 

 

 

 

 

Horizontal Direction

 

 

Use .flex-row to make the flex items appear side by side (default):

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

Use .flex-row-reverse to right-align the direction:

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

 

 

خروجی :

 

Horizontal Direction

Use .flex-row to make the flex items appear side by side (default):

​

 

Use .flex-row-reverse to right-align the direction:

​

 

 

آموزش چینش عمودی عناصر Vertical Direction در FlexBox:

از کلاس flex-column برای نمایش عناصر به صورت عمودی (بر روی هم) استفاده کنید. همچنین کلاس flex-column-reverse، عناصر را به صورت عمودی، ولی با ترتیب برعکس از پایین به بالا، نشان می دهد. همانند کد مثال عملی زیر :

 

مثال 4

 

 

 

 

Bootstrap Example

 

 

 

 

 

 

 

 

 

 

 

 

Vertical Direction

 

 

Use .flex-column to display the flex items vertically (on top of each other):

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

Use .flex-column-reverse to reverse the vertical direction:

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

 

 

خروجی :

 

Vertical Direction

Use .flex-column to display the flex items vertically (on top of each other):

​

 

Use .flex-column-reverse to reverse the vertical direction:

​

 

 

آموزش طراحی سایت : آموزش ترازبندی خطی (Justify) عناصر در FlexBox:

از کلاس های justify-content-* برای تنظیم ترتیب قرارگیری افقی (Justify) عناصر FlexBox استفاده می شود که در آن * می تواند یکی از مقادیر زیر را داشته باشد :

• مقدار start : حالت پیش فرض. در این حالت عناصر از سمت چپ به راست مرتب می شوند.

• مقدار end : در این حالت، عناصر در سمت راست عنصر دربرگیرنده تراز می شوند.

• مقدار Center: در این حالت عناصر در وسط عنصر دربرگیرنده قرار می گیرند.

• مقدار between: در این حالت، عنصر اول و آخر به لبه های عنصر مادر چسبیده و سایر عناصر در بین آن ها با فاصله تراز می شوند.

• مقدار around: در این حالت، عناصر به همراه فضای خالی به صورت مساوی درون عنصر مادر قرار می گیرند.

تمامی موارد فوق را در کد مثال عملی زیر نشان داده ایم :

 

مثال 5

 

 

 

 

Bootstrap Example

 

 

 

 

 

 

 

 

 

 

 

 

Justify content

 

 

Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default), end, center, between or around:

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

Flex item 1

 

 

Flex item 2

 

 

Flex item 3

 

 

 

 

 

 

 

 

خروجی :

 

Justify content

Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default), end, center, between or around:

​

 

​

 

​

 

 

آموزش طراحی سایت ادامه دارد.

​

آموزش طراحی سایت-JQuery

​

  

سلام عزیزان ... با آموزش JQuery از دوره آموزش طراحی سایت همراه باشید

 

جی کوئری Jquery چیست؟

برای اینکه بدانیم به راحتی باید گفت که یک کتابخانه یا چارچوب کاری برای زبان برنامه نویسی سمت سرویس گیرنده جاوا اسکریپت (JavaScript framework) است که هدف اصلی آن فراهم آوردن زمینه ی استفاده ی آسان از زبان نام برده در برنامه نویسی تحت وب (صفحات وب) می باشد. jQuery یک کتابخانه از جاوا اسکریپت است . از آن جایی که کتابخانه ی JQuery بسیاری از امکانات و عملیات قابل اجرا توسط زبان جاوا اسکریپت را گرفته و در قالب یک سری تابع می گنجاند که می توانید به راحتی هر چه تمام تر فراخوانی و اجرا کنید (با کم ترین میزان کدنویسی بیشترین عملیات ممکن را اجرا کنید)، می توان آن را یک لایه ی سطح بالا (abstraction layer) نیز نامید. با این حال، لازم است به خاطر داشته باشید که کتابخانه ی ذکر شده به هیچ وجه نمی تواند کاملا جایگزین JavaScript گردد. اگرچه jQuery در بسیاری از موارد میزان کدنویسی را کاهش داده و در عین حال همان عملیات قابل اجرا توسط جاوا اسکپریت را اجرا می کند، اما نباید فراموش کنید که توابع و دستورات jQuery هم در حقیقت همان کد زبان جاوا اسکریپت است.

آموزش طراحی سایت : با توجه به آنچه گفته شد،در لزومی ندارد برای استفاده از کتابخانه ی مزبور حتما یک متخصص در زمینه ی برنامه نویسی با جاوا اسکریپت باشید.در واقع، jQuery سعی دارد بسیاری از کارهایی که می توان با استفاده از کدهای جاوا اسکریپت پیاده سازی کرد، همچون دستکاری DOM و فراخوانی توابع AJAX، را تسهیل نماید. از این رو لازم نیست درباره ی جاوا اسکریپت اطلاعات بسیار بالایی داشته باشید. تعدادی زیادی کتابخانه ی جاوا اسکریپت وجود دارد که در حال حاضر jQuery پرکاربردترین و کارآمدترین آن ها محسوب می شود. از جمله دلایل محبوبیت این کتابخانه می توان به قابلیت توسعه پذیری بالا اشاره کرد. بنابراین شما می توانید برای هر کاری که تصورش را می کنید، افزونه (plugin) پیدا کنید. قدرت و کارایی بالا، دامنه ی وسیع افزونه های پرکاربرد، ساختار نگارشی روان و کارآمد این چارچوب کاری را از دیگر کتابخانه های jQuery تمایز بخشیده است.

 

آموزش طراحی سایت : آموزش انتخاب یک ویرایشگر مناسب برای jQuery

می توان دستورات و توابع jQuery را در هر ویرایشگر متن نظیر Windows Notepad نوشت. اما نوشتن کدهای آن داخل یک ویرایشگر HTML که دستورات جاوا اسکریپت خود را در آن می نویسید، به مراتب کارامد تر خواهد بود. تعدادی ویرایشگر وجود دارد که با jQuery مانند شهروند درجه یک برخورد می کنند. بهترین ویرایشگر برای درج بهینه و سریع دستورات آن، TSW WebCoder می باشد که با داشتن قابلیت های بی نظیر IntelliSense و ارائه دادن تمامی تکنولوژی های مورد نیاز همچون HTML، CSS، JavaScript، PHP و البته jQuery در کدنویسی به یاری شما می آید.

داشتن لیستی از property ها، متدها و پارامترهای احتمالی آن ها کمک بزرگی به شما می کند، به خصوص اگر در کدنویسی با jQuery یک تازه وارد هستید. در زیر تعدادی تصویر از ویرایشگر TSW WebCoder مشاهده می کنید که اشاره به علت برتری این ویرایشگر و قابلیت آسان سازی کدنویسی با آن دارد: تصویر زیر توابع قابل فراخوانی بر روی یک شی jQuery را نشان می دهد.

​

 

​

 

این تصویر نیز پارامترهای متد fadeIn را نشان می دهد.

 

 

آموزش استفاده از jQuery در صفحات وب

جهت استفاده از jQuery، بایستی آن را به صفحاتی که می خواهید از کدهای آن استفاده کنند، اضافه نمایید. برای این منظور می بایست ابتدا این کتابخانه را از سایت www.jquery.com دانلود نمایید. با مراجعه به سایت مزبور با دو گزینه برای دانلود مواجه می شوید: 1. نسخه ی "Production" 2. نسخه ی "Development" . نسخه ی "Production" برای وب سایت ها live و آماده می باشد. این نسخه ی فشرده و کم حجم (minify) شده تا کم ترین میزان فضا را اشغال کند و برای کاربرانی که مرورگرها آن ها باید فایل jQuery را همراه با باقی اطلاعات سایت بارگیری کند، بهترین گزینه می باشد. اما برای آزمایش و توسعه، نسخه ی "Development" گزینه ی ارجح تلقی می شود. نسخه ی یاد شده فشرده سازی (minify)نشده و به همین خاطر در صورت برخورد با خطا می توانید مشاهده کنید خطا در کجا رخ داده است.

پس از دانلود فایل jQuery JavaScript، لازم است آن را به وسیله ی تگ< script>اچ تی ام ال به صفحه ی وب خود متصل کنید (خصیصه ی type تگ نام برده را با مقدار ="text/javascript" src="jquery-1.5.1.js" تنظیم نمایید یا به عبارتی دیگر در تگ script به آن ارجاع دهید). بهترین کار جایگذاری فایل دانلود شده ی jquery.js در پوشه ی متعلق به صفحه ای است که می خواهید از jQuery استفاده کند. سپس آن را در بخش < head> بگنجانید (در بخش head صفحه به آن ارجاع دهید):

 

اکنون بخشی از صفحه ی شما به شکل زیر خواهد:

 

jQuery test

 

یک روش جدیدتر (بجای دانلود jQuery و میزبانی آن) این است که jQuery را از یک CDN (تحویل محتوا روی شبکه) دریافت کنید. Google و Microsoft هر دو نسخه های مختلفی از کتابخانه ی مذکور و دیگر کتابخانه های جاوا اسکریپت را میزبانی می کنند. با این کار دیگر نیازی به دانلود و ذخیره ی فایل jQuery نیست. بعلاوه از آنجایی این فایل از یک URL مشترک با سایت دیگر دریافت می شود، به احتمال زیاد زمانی که کاربران به سایت شما مراجعه می کنند و مرورگر کتابخانه را درخواست می کنند، فایل نام برده از قبل در حافظه ی نهان (cache) آماده می باشد (به این دلیل که سایت دیگری دقیقا همین نسخه و فایل را از قبل استفاده می کند). همچنین بیشتر CDN ها اطمینان حاصل می کنند، وقتی کاربری فایلی را از آن درخواست می کند، آن فایل از طریق نزدیکترین سرویس دهنده به کاربر (از نظر موقعیت جغرافیایی و مکانی) تحویل داده شود. می توانید jQuery را از یک CDN، درست مانند زمانی که آن را دانلود می کنید، مورد استفاده قرار دهید. تنها چیزی که تغییر می کند، آدرس URL می باشد. برای نمونه، جهت اضافه کردن ویرایش jQuery 3.5.1 از سرورهای Google به صفحه ی وب مورد نظر، دستور زیر را وارد می کنید:

 

 

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

​

آموزش طراحی سایت-BackGround در CSS3

​

  

سلام دوستان...

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

 

آموزش BackGround در CSS3

خاصیت های مربوط به پس زمینه در CSS 3:

با CSS 3 تعدادی خاصیت جدید مربوط به پس زمینه در اختیار طراح وب قرار می دهد که امکان کنترل و مدیریت پس زمینه را در سطح پیشرفته تری فراهم می کند. در این فصل شما را با نحوه ی افزودن چندین تصویر پس زمینه به تنها یک المان آشنا می سازیم. همچنین با خاصیت های جدید زیر که در CSS3 عرضه شده آشنایی پیدا می کنید:

background-size background-origin background-clip

مرورگرهایی که در این جدول ارائه شده از این خاصیت نوین پشتیبانی می کنند

 

آموزش طراحی سایت : افزودن چندین پس زمینه در CSS 3

سی اس اس CSS3 به شما این امکان را می دهد با استفاده از خاصیت background-image چندین تصویر پس زمینه به المان خود اضافه کنید. تصاویر پس زمینه متمایز با استفاده از کاراکتر ویرگول از هم جدا شده و بر روی هم انباشته می شوند (قرار می گیرند) به گونه ای که اولین تصویر به بیننده از دیگر تصاویر نزدیک تر است. مثال زیر دارای دو تصویر پس زمینه است که اولین آن ها تصویر یک گل (که در پایین سمت راست تراز بندی شده و قرار گرفته) و دیگری یک پس زمینه ی کاغذ است (که در بالا سمت چپ قرار داده شده).

مثال:

#example1 {

background-image: url(img_flwr.gif), url(paper.gif);

background-position: right bottom, left top;

background-repeat: no-repeat, repeat;

}

می توان چندین تصویر پس زمینه را یا با خاصیت مختصر نویسی (مقداردهی در تنها یک تعریف و به صورت خلاصه / به صورت خاصیت چند مقداری) به المان اضافه کرد و یا به صورت جداگانه (تعیین به صورت خاصیت تک مقداری( تصویر پس زمینه را به المان اضافه کرد مانند مثال فوق. مثال زیر از روش اول برای این منظور بهره می گیرد:

#example1 {

    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

}

 

آموزش طراحی سایت : خاصیت background-size در CSS 3

پیش از CSS3, تصویر پس زمینه همان اندازه ی اولیه و اصلی خود تصویر باقی می ماند. CSS3 این قابلیت را فراهم می کند که تصاویر پس زمینه را مجدداً در کانتکست ها و زمینه های مختلف بکار ببرید. اندازه ی تصاویر را می توان بر حسب پیکسل (بر حسب واحد length) , درصد (percentage) یا یکی از دو کلیدواژه ی contain یا cover تعریف کرد. مثال زیر تصویر پس زمینه را بسیار کوچکتر از اندازه ی اصلی آن تنظیم می کند (بر حسب پیکسل): تصویر اصلی:

​

 

زیر همان تصویر را مشاهده می کنید که مجدداً اندازه بندی شده است:

​

 

کد لازم برای عملیات فوق:

#div1 {

background: url(css3.jpg);

background-size: 100px 80px;

background-repeat: no-repeat;

}

همان طور که پیش تر ذکر شد دو مقادیر ممکن دیگر برای تعیین اندازه ی تصویر پس زمینه وجود دارند, کلید واژه های "contain" و "cover". کلید واژه ی "contain" تصویر پس زمینه را تا حد ممکن بزرگ مقیاس دهی و اندازه بندی می کنند (البته طول و عرض هر دو باید داخل کادر و محدوده ی محتوا جای گیرد). به عبارتی دیگر, عکس پس زمینه به اندازه محتویات درون عنصر بزرگ خواهد شد، تا ارتفاع وعرض آن اندازه المان شود. از این رو, بسته به نسبت و اندازه ی تصویر پس زمینه و همچنین مکان قرار گیری تصویر پس زمینه, ممکن است بخش هایی از پس زمینه توسط تصویر مربوطه پوشش داده نشود. کلید واژه ی "cover" تصویر پس زمینه را گونه ای مقیاس دهی می کند که کلاً ناحیه یا محدوده ی محتوا را تحت پوشش قرار دهد (هر دو عرض و ارتفاع تصویر باید با ناحیه ی محتوا برابر بوده یا از آن بیشتر شود). در حقیقت, عکس پس زمینه به اندازه محتویات درون عنصر کوچک خواهد شد، تا ارتفاع وعرض آن اندازه عنصر شود. از این رو, بخش هایی از تصویر ممکن است در محل موقعیت دهی قابل رویت نباشند. مثال زیر استفاده از این دو کلید واژه را در تنظیم اندازه ی تصویر پس زمینه, نمایش می دهد:

#div1 {

background: url(img_flower.jpg);

background-size: contain;

background-repeat: no-repeat;

}

#div2 {

background: url(img_flower.jpg);

background-size: cover;

background-repeat: no-repeat;

}

 

اندازه ی چندین تصویر پس زمینه را به طور همزمان مقداردهی کنید

خاصیت background-size همچنین قادر است هنگام کار با چند پس زمینه, چندین مقدار برای تصویر پس زمینه بپذیرد (برای این منظور لازم است از لیستی که توسط ویرگول ایتم ها را از هم جدا می کند استفاده کنید). مثال زیر سه تصویر پس زمینه ی منحصر به فرد مشخص کرده, و برای هر تصویر یک مقدار background-size متمایز در نظر می گیرد:

مثال:

#example1 {

background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

background-size: 50px, 130px, auto;

}

 

تصویر پس زمینه ی تمام صفحه

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

• کل صفحه را با تصویر بپوشاند (هیچ گونه فضای سفیدی نباید وجود داشته باشد)

• تصویر را متناسب با نیاز مقیاس دهی و اندازه بندی کند

• تصویر در مرکز صفحه قرار گیرد

• سبب ایجاد نوار پیمایش (scrollbar) برای مشاهده ی کل تصویر نشود

مثال زیر نحوه ی انجام عملیات مزبور را تشریح می کند. برای انجام این مثال کافی است از تگ html بهره بگیرید (زیرا که عنصر html همیشه حداقل از نظر ارتفاع با پنجره ی مرورگر مطابقت دارد). سپس یک پس زمینه ی وسط چین شده و ثابت روی آن مقدار دهی کنید. در مرحله ی نهایی عملیات اندازه ی تصویر را با استفاده از خاصیت background-size تنظیم کنید:

html {

background: url(img_flower.jpg) no-repeat center center fixed;

background-size: cover;

 

خاصیت background-origin در CSS3

خاصیت background-origin تعیین می کند تصویر پس زمینه در کدام موقعیت قرار بگیرد (نقطه ی شروع مکان قرار گیری پس زمینه ی المان مورد نظر را مشخص می کند). این خاصیت سه مقدار مقدار متفاوت می گیرد:

​

 

مثال زیر کاربرد خاصیت background-origin را نمایش می دهد:

#example1 {

border: 10px solid black;

padding:35px;

background:url(img_flwr.gif);

background-repeat: no-repeat;

background-origin: content-box;

}

 

خصوصیت background-clip در CSS3

این ویژگی به منظور تعیین مکان و نحوه قرار گیری پس زمینه در عنصر مورد نظر بکار گرفته می شود. خاصیت background-clip سه مقدار متفاوت می پذیرد که به شرح زیر است:

​

 

مثال زیر این خاصیت را کاربردی نمایش می دهد:

#example1 {

border: 10px dotted black;

padding:35px;

background: yellow;

background-clip: content-box;

}

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

​

 

 

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

​

آموزش طراحی سایت-اعداد در جاوا اسکریپت

سلام عزیزان با آموزش جاوا اسکریپت از دوره آموزش طراحی سایت در خدمت شما دوستان هستیم

 

آموزش اعداد در جاوا اسکریپت

 

اعداد در جاوا اسکریپت

آموزش طراحی سایت : زبان جاوا اسکریپت فقط یک نوع متغیر عددی دارد. متغیرهای عددی می توانند از نوع عددی یا اعشاری باشند.

مثال:

var x = 34.00; // A number with decimals

var y = 34; // A number without decimals‎

اعداد بسیار کوچک یا کوچک را می توان با نماد علمی نوشت

مثال:

var x = 123e5; // 12300000

var y = 123e-5; // 0.00123‎

اعداد جاوا اسکریپت همیشه 64 بیتی و با ممیز شناور (در مبنای 10) هستند. برخلاف بسیاری از زبان های برنامه نویسی، جاوا اسکریپت انواع عددی از قبیل : integer (عدد صحیح)، short، long و floating-point تعریف نمی کند و این نوع اعداد در جاوا اسکریپت استفاده نمی شوند. در جاوا اسکریپت اعداد همیشه به صورت ممیز شناور با دو رقم اعشار (double precision floating-point number) ذخیره می شوند که در حقیقت دنبال رو استاندارد بین المللی IEEE 754 می باشد. در این نوع قالب دهی یا فرمت اعداد در 64 بیت ذخیره می گردند، به گونه ای که کسر (fraction) در بیت های 0 تا 51، نما یا توان (exponent) در بیت های 52 تا 62 و علامت (sign) در بیت 63 ذخیره می گردد.

 

دقت اعشار (precision)

اعداد صحیح integer در حداکثر 15 رقم و همیشه به صورت دقیق مطرح می شوند.

 

 

مثال:

 

نمونه یک

<script>

function myFunction() {

var x = 999999999999999;

var y = 9999999999999999;

document.getElementById("demo").innerHTML = x + "<br>" + y;

}

</script>

حداکثر تعداد اعشار، 17 رقم است، اما حساب ممیز شناور همیشه 100% دقیق نیست.

 

نمونه دو

<script>

function myFunction() {

var x = 0.2 + 0.1;

document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;

}

</script>

به منظور حل مشکل بالا، انجام عمل ضرب و تقسیم کمک زیادی می کند.

مثال:

 

نمونه سه

function myFunction() {

var x = (0.2 * 10 + 0.1 * 10) / 10;

document.getElementById("demo").innerHTML = "0.2 + 0.1 = " + x;

}

 

آموزش طراحی سایت : اعداد شانزده شانزدهی (hexadecimal)

جاوا اسکریپت ثابت های عددی (اعداد ثابتی) را که با 0x شروع می شوند به عنوان اعداد در مبنای شانزده در نظر می گیرد (تفسیر می کند).

مثال:

 

نمونه چهار

function myFunction() {

document.getElementById("demo").innerHTML = "0xFF = " + 0xFF;

}

توجه:

هیچگاه یک عدد را با صفر مقدم ننویسید (مانند این مثال 07(.

بعضی از ویرایش های جاوا اسکریپت یک عدد را در صورتی که با صفر مقدم نوشته شوند، به صورت octal / هشت هشتی تفسیر می کند. به صورت پیش فرض، جاوا اسکریپت اعداد را به صورت اعشاری و در مبنای 10 نمایش می دهد، اما شما می توانید با استفاده از تابع toString() اعداد را به صورت مبنای 16، مبنای 8 یا مبنای 2 (دودئی) (به عنوان خروجی) نمایش دهید.

مثال:

 

نمونه پنج

function myFunction() {

var myNumber = 128;

document.getElementById("demo").innerHTML = "128 = " +

myNumber + " Decimal, " +

myNumber.toString(16) + " Hexadecimal, " +

myNumber.toString(8) + " Octal, " +

myNumber.toString(2) + " Binary."

}

 

Infinity (مقدار بی نهایت)

چنانچه عددی را که بزرگتر از بیشینه ی حد ممکن اعداد در جاوا اسکریپت است محاسبه کنید، مقدار infinity برگردانده می شود.

مثال:

 

نمونه شش

function myFunction() {

var myNumber = 2;

var txt = "";

while (myNumber != Infinity) {

myNumber = myNumber * myNumber;

txt = txt + myNumber + "<br>";

}

document.getElementById("demo").innerHTML = txt;

}

در صورت تقسیم عددی بر 0 نیز مقدار بی نهایت برگردانده می شود.

مثال:

 

نمونه هفت

function myFunction() {

var x = 2 / 0;

var y = -2 / 0;

document.getElementById("demo").innerHTML = x + "<br>" + y;

}

توضیح : infinity یک عدد است : typeOf infinity یک عدد برمی گرداند.

مثال:

 

نمونه هشت

function myFunction() {

document.getElementById("demo").innerHTML = typeof Infinity;

}

عبارت NaN- عبارت رزرو شده ی Not a Number

عبارت NaN یک کلمه ی رزرو شده (reserved word) است که بیان می کند یک مقدار از نوع عدد نیست. چنانچه سعی کنید با رشته ی غیر عددی عملیات محسابه ی انجام دهید، جاوا اسکریپت عبارت رزرو شده ی Not a Number را بر می گرداند.

 

نمونه نه

document.getElementById("demo").innerHTML = 100 / "Apple"

اما چنانچه رشته دربردارنده ی یک مقدار عددی باشد، نتیجه نیز یک عدد خواهد بود.

مثال:

 

نمونه ده

document.getElementById("demo").innerHTML = 100 / "10";

می توانید از تابع سراسری (global function) isNaN() برای کشف این مسئله که آیا مقدار یک عدد است یا خیر استفاده کنید.

مثال:

 

نمونه یازده

var x = 100 / "Apple";

document.getElementById("demo").innerHTML = isNaN(x);

اگر در محاسبات ریاضی از NaN استفاده کنید، نتیجه نیز NaN خواهد بود.

مثال:

 

نمونه دوازده

var x = NaN;

var y = 5;

document.getElementById("demo").innerHTML = x + y;

 

نمونه سیزده

var x = NaN;

var y = "5";

document.getElementById("demo").innerHTML = x + y;

دستور NaN یک عدد است : typeOf NaN عدد بازمی گرداند.

مثال:

 

نمونه چهارده

document.getElementById("demo").innerHTML = typeof NaN;

اعداد می توانند شی باشند. به طور معمول اعداد مقادیر اولیه ی هستند که از literal ها ایجاد می گردند.

var x = 123‎

اما اعداد را می توان با استفاده از کلیدواژه ی new به عنوان شی (object) تعریف کرد، بدین ترتیب

var y = new Number(123)‎

مثال:

 

نمونه پانزده

document.getElementById("demo").innerHTML = typeof x + "<br>" + typeof y;

از ایجاد شی number خودداری کنید، زیرا که سرعت اجرا را کاهش داده و عوارض جانبی فراوانی را منجر می شوند. عملگر == برای اعدادی بکار می رود که از لحاظ مقدار برابر باشند.

مثال:

 

نمونه شانزده

var x = 500; // x is a number

var y = new Number(500); // y is an object

document.getElementById("demo").innerHTML = (x == y);

 

توجه داشته باشید که در صورت استفاده از عملگر === دیگر اعداد با مقدار یکسان مساوی یا برابر محسوب نمی شوند زیرا که این عملگر انتظار دارد اعداد هم از نظر نوع و هم از نظر مقدار با هم برابر باشند.

 

نمونه هفده

var x = 500; // x is a number

var y = new Number(500); // y is an object

document.getElementById("demo").innerHTML = (x === y);

بخاطر داشته باشید که مقایسه ی اشی با هم امکان پذیر نمی باشد.

مثال:

 

نمونه هجده

var x = 500; // x is a number

var y = new Number(500); // y is an object

document.getElementById("demo").innerHTML = (x === y);

 

خواص (properties) و متدهای مربوط به اعداد در جاوا اسکریپت

مقادیر اولیه ی مثل 3.14 یا 2014، نمی توانند متد یا خاصیت داشته باشند (زیرا که در اصل این ها شی نیستند که بتوانند خاصیت یا متد داشته باشند). اما در رابطه با جاوا اسکریپت این امر صادق نیست. به این خاطر که زبان بیان شده هنگام اجرای متدها و خصوصیت ها با مقادیر اولیه به مثابه ی شی برخورد می کند. از این رو مقادیر اولیه همچنان قادر هستند در زبان جاوا اسکریپت متد و خاصیت داشته باشند.

 

مثال:

 

نمونه نوزده

document.getElementById("demo").innerHTML = Number.MAX_VALUE;

خاصیت های مربوط به اعداد در جاوا اسکریپت متعلق به دبرگیرنده یا wrapper شی number هستند که خود Number نامیده می شوند. دسترسی به خاصیت های نام برده تنها از این طریق ممکن می باشد.

Number.MAX_VALUE‎

استفاده از myNumber.MAX_VALUE در جایی که myNumber یک متغیر، عبارت یا مقدار است، باعث برگردانده شدن undefined می شود.

مثال:

 

نمونه بیست

var x = 6;

document.getElementById("demo").innerHTML = x.MAX_VALUE;

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

آموزش طراحی سایت-Bootstrap 4

​

  

سلام با آموزش Bootstrap 4 از دوره آموزش طراحی سایت در خدمت شما هستیم

آموزش تعیین جهت شناوری Float عنصر در بوت استرپ 4:

در قسمت قبل با کار با کلاس های کاربردی Utility Classes در Bootstrap 4 آشنا شدید

در شکل زیر، انواع حالت شناوری یک عنصر یا float آن در عنصر دربرگیرنده را نشان داده ایم :

​

 

به وسیله کلاس float-right می توانید عنصر را در جهت راست و با کلاس float-left، عنصر را در جهت چپ، تراز نمایید.

همچنین به وسیله کلاس clearfix می توانید اعمال هرگونه float به عنصر را از بین برده و حالت پیش فرض را نمایش دهید.

مثال : در کد مثال عملی زیر، انواع حالت float را با مثال و سورس کد نشان داده ایم :

 

مثال

 

 

Float left

Float right

 

 

 

آموزش طراحی سایت : آموزش تعیین float به صورت ریسپانسیو Responsive:

می توانید به وسیله کلاس هایی خاص، شناوری یا Float عنصر را بر حسب سایز صفحه نمایش تغییر دهید. برای این منظور از کلاس float-*-left/right استفاده می شود که در آن * می تواند یکی از مقادیر زیر را داشته و جهت هم بایستی یا چپ (left) و یا راست (right) باشد :

• اندازه sm برای صفحه نمایش های بزرگتر از 576 پیکسل.

• اندازه md برای صفحه نمایش های بزرگتر از 768 پیکسل.

• اندازه lg برای صفحه نمایش های بزرگتر از 992 پیکسل.

• اندازه xl برای صفحه نمایش بزرگتر از 1200 پیکسل و ... .

مثال : در کد مثال عملی زیر، نحوه استفاده از انواع کلاس های ریسپانسیو responsive float را در عمل نشان داده ایم :

 

مثال

 

Float right on small screens or wider

 

 

 

 

Float right on medium screens or wider

 

 

 

 

Float right on large screens or wider

 

 

 

 

Float right on extra large screens or wider

 

 

 

 

Float none

 

 

آموزش طراحی سایت : آموزش تعیین چیدمان وسط Center Align در Bootstrap 4:

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

​

 

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

 

مثال

 

Centered

 

 

آموزش تعیین عرض (width) یک عنصر در Bootstrap 4:

در بوت استرپ 4، می توانید با کلاس های خاصی، عرض یک عنصر را سریع تعیین نمایید، همانند شکل زیر :

​

 

برای تعیین عرض عناصر در Bootstrap 4، می توانید از کلاس w-* استفاده نمایید که در آن * نشان دهنده میزان درصد عرض عنصر از 100 درصد عرض ممکن است. برای مثال کلاس هایی مثل w-25، w-50، w-100 و یا mw-100 که مورد آخر خلاصه حداکثر عرض مجاز یا max width است.

مثال : در کد مثال عملی زیر، چندین عنصر با عرض های 25 درصد تا 100 درصد، ایجاد کرده ایم :

 

مثال

 

Width 25%

 

 

Width 50%

 

 

Width 75%

 

 

Width 100%

 

 

Max Width 100%

 

 

آموزش تعیین ارتفاع (Hight) عنصر در بوت استرپ 4:

به وسیله کلاس های خاصی در Bootstrap 4، می توانید ارتفاع یک عنصر را بسیار ساده تعیین نمایید، مثل شکل زیر :

​

 

برای تعیین ارتفاع عناصر در Bootstrap 4، می توانید از کلاس h-* استفاده نمایید که در آن * نشان دهنده میزان درصد ارتفاع عنصر از 100 درصد ارتفاع ممکن است. برای مثال کلاس هایی مثل h- 25، h-50، h-75 و یا mh-100 که مورد آخر خلاصه حداکثر ارتفاع مجاز یا Max height است.

مثال : در کد مثال عملی زیر، چندین عنصر با ارتفاع های بین 25 درصد تا 100 درصد را به وسیله کلاس های جدید بوت استرپ 4، ایجاد کرده ایم :

 

مثال

 

 

 

Height 25%

 

 

Height 50%

 

 

Height 75%

 

 

Height 100%

 

 

Max Height 100%

 

 

 

 

آموزش تعیین فاصله (Spacing) در Bootstrap 4:

بوت استرپ 4، دارای رنج گسترده ای از کلاس های کمکی ویژه جهت تعیین فاصله بیرونی (margin) و حاشیه درونی (padding) می باشد.

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

• حالت xs برای صفحات کوچکتر از عرض 576 پیکسل.

• حالت sm برای صفحات یزرگتر از عرض 576 پیکسل.

• حالت md برای صفحات بزرگتر از عرض 768 پیکسل.

• حالت lg برای صفحات بزرگتر از عرض 992 پیکسل.

• حالت xl برای صفحات یزرگتر از عرض 1200 پیکسل.

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

• فرمت حالت xs: {properts} {sides} -{size} = {خاصیت} {جهت ها}- {اندازه}

• - فرمت حالت های sm، md، lg و xl :

• دستور {property} {sides} -{brealpoint} -{size} = {خاصیت} {جهت ها}{سایز صفحه نمایش}- {اندازه}

در فرمول فوق، property یا خاصیت می تواند یکی از دو مقدار زیر را داشته باشد :

• مقدار m که تنظیم کننده حاشیه بیرونی یا margin است.

• مقدار p که تنظیم کننده حاشیه درونی یا padding است.

همچنین مقدار sides یا جهت ها هم می تواند یکی از مقادیر زیر را داشته باشد :

• مقدار t که تنظیم کننده حاشیه درونی بالا padding-top یا حاشیه بیرونی بالا margin-top است.

• مقدار b که تعیین کننده حاشیه درونی پایین padding-bottom یا حاشیه بیرونی پایین margin-bottom است.

• مقدار l که تنظیم کننده حاشیه درونی چپ padding-left و حاشیه بیرونی چپ margin-left است.

• مقدار r که تعیین کننده حاشیه درونی راست padding-right و حاشیه بیرونی راست margin-right است.

• مقدار x که می تواند هر دو حاشیه درونی راست و چپ (padding-right و padding-left) و هر دو حاشیه بیرونی راست و چپ (margin-right و margin-left) را تنظیم نماید.

• مقدار y که می تواند هر دو حاشیه درونی بالا وپایین (padding-top و padding-bottom) و هر دو حاشیه بیرونی بالا و پایین (margin-top و margin-left) را تنظیم نماید.

• مقدار خالی، اگر مقداری برای آن تعیین نشود، حاشیه درونی (padding) و حاشیه بیرونی (margin) هر 4 طرف عنصر را به اندازه تعیین شده، به صورت یکسان تنظیم می کند.

همچنین پارامتر اندازه یا Size نیز می تواند یکی از مقادیر زیر را داشته باشد :

• مقدار 0، که حاشیه درونی (padding) و حاشیه بیرونی (margin) را برابر صفر، تنظیم می کند.

• مقدار 1، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر مقدار 0.25rem یا معادل 4 پیکسل در حالتی که اندازه فوت 16 پیکسل باشد، تنظیم می کند.

• مقدار 2، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر با مقدار 0.5rem یا معادل 8 پیکسل، در حالتی که اندازه فونت 16 پیکسل باشد، تنظیم می کند.

• مقدار 3، که حاشیه بیرونی (margin) و حاشیه درونی (padding) عنصر را برابر مقدار 1rem یا معادل 16 پیکسل، در صورتی که فونت نوشته 16 پیکسل باشد، تنظیم می کند.

• مقدار 4، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر مقدار 1.5rem یا معادل 24 پیکسل، در صورتی که فونت نوشته 16 پیکسل باشد، تنظیم می کند.

• مقدار 5، که حاشیه درونی (padding) و حاشیه بیرونی (margin) عنصر را برابر مقدار 3rem یا معادل 48 پیکسل، در صورتی که فونت نوشته 16 پیکسل باشد، تنظیم می کند.

• مقدار auto که مارجین و padding عنصر را به صورت اتوماتیک تنظیم می کند.

نکته :

حاشیه بیرونی یا margin می تواند مقادیر منفی نیز داشته باشد. برای این منظور بایستی عدد n را در مقابل سایز هدف، قرار دهید، به صورت زیر :

• مقدار n1، که مارجین را برابر مقدار منفی 0.25 rem یا منفی 4 پیکسل تعیین می کند.

• مقدار n2، که مارجین را برابر مقدار منفی -0.5 rem یا منفی 8 پیکسل تعیین می کند.

• مقدار n3، که مارجین را برابر مقدار منفی -1 rem یا منفی 16 پیکسل تعیین می کند.

• مقدار n4، که مارجین را برابر مقدار منفی 1.5 rem یا منفی 24 پیکسل تعیین می کند.

• مقدار n5، که مارجین را برابر مقدار منفی 3 rem یا منفی 48 پیکسل تعیین می کند.

مثال : در کد مثال عملی زیر، چند مثال از کلاس کاربردی ویژه تعیین فاصله را به کار برده و خروجی آن را نشان داده ایم :

 

مثال

 

I only have a top padding (1.5rem = 24px)

 

 

I have a padding on all sides (3rem = 48px)

 

 

I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)

 

 

سایر کلاس های تعیین مارجین و Padding در بوت استرپ 4، به صورت زیر هستند :

​

 

 

آموزش طراحی سایت : آموزش تعیین سایه Shadow برای عنصر در Bootstrap 4:

شکل زیر، انواع حالت های ایجاد سایه برای یک عنصر را در بوت استرپ 4، نشان می دهد :

​

 

از کلاس های shadow-*، می توانید برای تعیین سایه یک عنصر در Bootstrap 4 استفاده نمایید که در آن، * می تواند یکی از مقادیر زیر باشد :

• مقدار none: در این حالت عنصر فاقد سایه یا shadow خواهد بود.

• مقدار sm: در این حالت عنصر دارای سایه ی کوچک خواهد بود.

• بدون مقدار : حالت پیش فرض بوده و عنصر دارای سایه یا shadow با اندازه معمول است.

• مقدار Lg: در این حالت، عنصر دارای سایه ی بزرگتر از حالت معمول می شود.

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

 

مثال

 

No shadow

 

 

Small shadow

 

 

Default shadow

 

 

Large shadow

 

 

آموزش ترازبندی عمومی Vertical Align در بوت استرپ 4:

به وسیله کلاس های align-*، می توانید ترازبندی عمودی عناصر را در یک خط، تعیین نمایید (این کلاس ها فقط بر روی عناصر درون خطی Inline، درون خطی تمام عرض inline-block، درون خطی جدولی Inline-table و عناصر درون خانه های جدول اثر دارد). مقدار * می تواند یکی از مقادیر زیر باشد :

​

 

مثال

baseline

top

middle

bottom

text-top

text-bottom

 

آموزش ایجاد فایل های embed ریسپانسیو در Bootstrap4:

در بوت استرپ 4، می توانید فایل های الحاق شده به صفحه یا embed، مثل ویدیو یا اسلاید شو را به صورت ریسپانسیو و بر حسب عرض عنصر مادر آن نمایش دهید.

برای این منظور بایستی کلاس embed-responsive-item را به عنصر الحاق شده (embed) مثل تگ video یا iframe اضافه کرده آن را در یک عنصر مادر یا دربرگیرنده که دارای کلاس embed-responsive-* قرار دهید. علامت * هم تعیین کننده نسبت نمایش عرض و طول مثلا 16 در 9 یا 4 در 3 و ... می باشد.

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

 

مثال

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

آموزش نمایش یا عدم نمایش آیتم (Visibility) در Bootstrap 4:

به وسیله کلاس های visible (نمایان) و invisible (مخفی)، می توانید نمایش یا عدم نمایش عنصر را در بوت استرپ 4، کنترل نمایید.

نکته :

کلاس های visible و invisible، مقدار خاصیت CSS display را تغییر نمی دهند. آن ها فقط حالت عنصر را به visibility برابر visible یا hidden تغییر می دهند.

مثال : در کد مثال زیر، عنصر اول را نمایان و عنصر دوم را مخفی کرده ایم :

 

مثال

 

I am visible

 

 

I am invisible

 

 

آموزش تعیین موقعیت Position عنصر در بوت استرپ 4:

می توانید با استفاده از کلاسfixed-top در بوت استرپ 4 ، کاری کنید که عنصر به بالای صفحه چسبیده و همواره (حتی با اسکرول صفحه به پایین)، در جای خود ثابت نشان داده شود.

در کد مثال زیر، منوی navbar را با کلاس fixed-top، در بالای صفحه ثابت کرده ایم :

 

مثال

 

 

...

 

 

همچنین با استفاده از کلاس fixed-bottom، می توانید یک عنصر را در پایین صفحه چسبانده و همواره (حتی با اسکرول صفحه به بالا)، به طور ثابت در انتهای صفحه نمایش دهید.

در کد مثال دوم، منوی navbar را به انتهای صفحه، چسبانده ایم :

 

مثال

 

 

...

 

 

در حالت سوم، به وسیله کلاس sticky-top، می توانید کاری کنید تا یک عنصر، هنگامی که موقعیت اسکرول صفحه به آن رسید، به بالای صفحه چسبیده و تا زمان برگشت به موقعیت اسکرول آن، ثابت در بالای صفحه بماند.

نکته :

این کلاس در مرورگر IE 11 کار نمی کند.

مثال : در کد مثال زیر، به منوی navbar کلاس sticky-top داده ایم. هنگامی که کاربر به پایین اسکرول کرده و موقعیت صفحه به آن می رسد، به بالای صفحه پرش کرده و به صورت ثابت در آنجا نمایش داده می شود :

 

 

...

 

 

می توانید از کلاس close، برای ایجاد یک دکمه بستن استفاده کنید. معمولا از این دکمه ها در کادرهای هشدار alert یا پیام modal، استفاده می شود.

اگر به مثال عملی زیر دقت نمایید، ما از کاراکتر ویژه × برای ایجاد یک ضربدر (×) که نمایانگر دکمه بستن است، استفاده کرده ایم. همچنین، علامت × به صورت پیش فرض، در سمت راست عنصر قرار می گیرد :

 

مثال

×

 

آموزش تعیین متن برای دستگاه های نابینایان Screen readers :

می توانید از کلاس sr-only برای مخفی کردن یک عنصر یا نوشته، در کلیه دستگاه ها و صفحه نمایش ها به جز صفحه نمایش های Screen Reader که مختص نابینایان است، استفاده نمایید. همانند کد مثال عملی زیر :

 

مثال

I will be hidden on all screens except for screen readers.

 

آموزش کار با رنگ ها Colors در بوت استرپ 4:

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

این کلاس ها به همراه توضیح مختصری راجع به آن ها، عبارتند از :

​

 

مثال

 

 

 

Contextual Colors

 

 

Use the contextual classes to provide "meaning through colors":

 

 

This text is muted.

 

 

This text is important.

 

 

This text indicates success.

 

 

This text represents some information.

 

 

This text represents a warning.

 

 

This text represents danger.

 

 

Secondary text.

 

 

This text is dark grey.

 

 

Default body color (often black).

 

 

This text is light grey (on white background).

 

 

This text is white (on white background).

 

 

 

کلاس های رنگی متنی ویژه بوت استرپ 4 را می توانید درون لینک ها (تگ a یا Link) نیز به کار ببرید. در این صورت، در هنگام عبور موس از روی نوشته (hover)، رنگ نوشته لینک کمی تیره تر هم می شود. همانند مثال عملی زیر :

 

مثال

 

 

 

Contextual Link Colors

 

 

Hover over the links.

 

Muted link.

Primary link.

Success link.

Info link.

Warning link.

Danger link.

Secondary link.

Dark grey link.

Body/black link.

Light grey link.

 

 

همچنین می توانید با استفاده از کلاس های text-black-50 و text-white-50 به نوشته های سیاه یا سفید، پس زمینه و مقدار وضوح 50 درصد بدهید. نحوه کاربرد این کلاس ها را در کد مثال عملی زیر، نشان داده ایم :

 

مثال

 

 

 

Opacity Text Colors

 

 

Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

 

 

Black text with 50% opacity on white background

 

 

White text with 50% opacity on black background

 

 

 

 

آموزش کار با رنگ های پس زمینه background Colors در بوت استرپ 4:

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

کلاس های رنگی مخصوص پس زمینه در بوت استرپ 4 به همراه توضیح مختصر آن ها به شرح زیر هستند :

​

 

مثال : در کد مثال عملی زیر، انواع کلاس های مختلف رنگی بوت استرپ 4 برای پس زمینه را در عمل به کار برده ایم :

 

مثال

 

 

 

Contextual Backgrounds

 

 

Use the contextual background classes to provide "meaning through colors".

 

 

Note that you can also add a .text-* class if you want a different text color:

 

 

This text is important.

 

 

This text indicates success.

 

 

This text represents some information.

 

 

This text represents a warning.

 

 

This text represents danger.

 

 

Secondary background color.

 

 

Dark grey background color.

 

 

Light grey background color.

 

 

 

 

بررسی کلاس کار با متن و فن چاپ در بوت استرپ 4 :

همانطور که در بخش آموزش کار با متن و فن چاپ در Bootstrap 4 نشان داده ایم، از کلاس های ویژه typography برای کار با متن و نوشته در بوت استرپ 4 استفاده می شود. لیست زیر، تمامی این کلاس ها را به ترتیب معرفی کرده است :

​

 

​

 

 

آموزش کار با عناصر تمام عرض (Block) در بوت استرپ 4:

برای این که یک عنصر به صورت تمام عرض در صفحه یا عنصر دربرگیرنده آن نمایش داده شود، بایستی کلاس d-block را به آن اضافه کنید. همچنین می توانید از کلاس های d-*-block برای کنترل نمایش تمام عرض عنصر در هر یک از سایزهای صفحه نمایش نیز استفاده کنید که در آن * می تواند یکی از مقادیر sm، md، Lg یا xl باشد.

مثال : در کد مثال عملی زیر، یک عنصر تمام عرض (Block) و چند عنصر دیگر که در صفحه نمایش های مختلف تمام عرض هستند را ایجاد کرده ایم :

مثال

d-block

d-sm-block

d-md-block

d-lg-block

d-xl-block

 

معرفی سایر کلاس های نمایش Display عنصر در Bootstrap 4 :

سایر کلاس های کنترل نمایش (Display) عناصر در بوت استرپ 4 را در جدول زیر معرفی کرده ایم :

​

 

 

آموزش طراحی سایت : آموزش کار با Flex در Bootstrap 4 :

می توانید از کلاس flex-* برای کنترل نحوه نمایش و قالب بندی (layout) یک عنصر توسط FlexBox، استفاده کنید.

برای دریافت اطلاعات بیشتر، به بخش آموزش کاربرد FlexBox در سایت تحلیل داده بروید.

علامت * در کلاس فوق می تواند یکی از مقادیر sm، md، lg و یا xl را داشته باشد که تعیین کننده سایز صفحه نمایش است.

در عکس زیر ، مثال های مختلفی از تراز بندی عناصر با FlexBox را نشان داده ایم :

​

 

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

​