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



آموزش React Native

برای ثبت نام در دوره آموزش React Native به سایت آموزشگاه تحلیل داده رجوع کنید

مقدمه

در دوره آموزش React Native می آموزید که چگونه Application های Cross Platform بسازید که در سیستم عامل های Android و IOS اجرا شوند. 
در دوره برنامه نویسی React Native می آموزید برنامه هایی بسازید که از لحاظ خروجی و Peformance دقیقا Native بوده و برنامه تولید شده دقیقا مانند برنامه ای است که با Java یا Swift ساخته شده است. 
نرم افزارهای مشهور Instagram، Facebook، Skype و. نمونه هایی از Application هایی هستند که با React Native ساخته شده اند.

 

اهداف دوره

دانشجویان در دوره React Native بر معماری سیستم عامل Android تسلط کافی می یابند. 
دانشجویان در دوره React Native بر معماری سیستم عامل IOS تسلط کافی می یابند. 
در دوره آموزش React Native دانشجویان به تسلط کامل در نصب محیط و راه اندازی محیط برنامه نویسی و همچنین راه اندازی Emulator مسلط می شوند. 
در دوره آموزش React Native دانشجویان به جنبه های قدرتمند زبان برنامه نویسی JavaScript که در برنامه نویسی React Native استفاده می شود مسلط می شوند. 
آموزش ساخت انواع Layout و استانداردهای Layout در Android و IOS از اهداف این دوره می باشد. 
دانشجویان در دوره آموزش React Native به کار با State ها و همچنین Debug نمودن برنامه های React Native مسلط می شوند. 
طراحی انواع Navigation های موبایل شامل Android و IOS و همچنین ساخت انواع Animation از اهداف دوره آموزش React Native می باشد. 
آموزش کار با دستگاه های جانبی موبایل مثل دوربین، نقشه و. از اهداف دوره می باشد. 
دانشجویان در دوره آموزش React Native می آموزند که با استفاده از Http Request چگونه انواع API ها و Web Service ها و دیگر منابع Web را مورد دسترسی قرار دهند.

 

مخاطبین این دوره

  •  شرکت ها و برنامه نویسان فعال در حوزه نرم افزار که می خواهند هزینه تولید اپلیکیشن های خود را کاهش دهند.
  •  تمامی برنامه نویسان حرفه ای Andoird و IOS که می خواهند به دنیای جدیدی از طراحی اپلیکیشن وارد شوند.
  •  طراحانی که می خواهند بدون درگیر شدن با Android و IOS اپلیکشن بسازند.
  •  کلیه برنامه نویسان Web و Desktop که می خواهند بدون یادگیری Java و Swift تخصص اپلیکیشن نویسی را به گنجینه دانسته های خود بیفزایند.


پیشنیاز

آشنایی با HTML و CSS و مفاهیم برنامه نویسی


o مقدمات

  • معرفی سیستم عامل و پلتفرم ها
  • انواع برنامه نویسی به صورت Cross Platform
  • آینده وب و موبایل
  • مروری بر HTML و CSS
  • آموزش حرفه ای Package Manager برای React Natvie
  • آموزش Package.json
  • مزایا و معایب React Native


o آموزش نصب و راه اندازی محیط React Native

  • آموزش نصب NodeJS
  • آموزش نصب Android Studio
  • آموزش نصب Visual Studio Code
  • آموزش نصب React Native
  • آموزش نصب React Native CLI
  • آموزش کاربردی Extension های Vysor، Web Server، Audits و.
  • کار Developer Options در موبایل
  • معرفی و نصب شبیه ساز


o آموزش جاوااسکریپت برای React Native

  • آموزش کاربردی EcmaScript 6
  • آموزش کاربردی Arrow Functions
  • آموزش کار با کلاس ها (Classes) در جاوااسکریپت
  • آموزش Enhanced Object Literals در جاوااسکریپت
  • آموزش String interpolation در جاوااسکریپت
  • آموزش Destructuring در جاوااسکریپت
  • آموزش Default در جاوااسکریپت
  • آموزش Spread در جاوااسکریپت
  • آموزش Spread + Object Literals در جاوااسکریپت
  • آموزش Rest در جاوااسکریپت
  • آموزش Let در جاوااسکریپت
  • آموزش Const در جاوااسکریپت
  • آموزش Forof در جاوااسکریپت
  • آموزش Unicode در جاوااسکریپت
  • آموزش Modules And Module Loaders در جاوااسکریپت
  • آموزش Set در جاوااسکریپت
  • آموزش WeakSet در جاوااسکریپت
  • آموزش Map در جاوااسکریپت
  • آموزش WeakMap در جاوااسکریپت
  • آموزش Proxies در جاوااسکریپت
  • آموزش Symbols در جاوااسکریپت
  • آموزش Inheritable Built-ins در جاوااسکریپت
  • آموزش New Library در جاوااسکریپت
  • آموزش Binary and Octal در جاوااسکریپت
  • آموزش Promises در جاوااسکریپت
  • آموزش Reflect در جاوااسکریپت
  • آموزش Tail Call Optimization در جاوااسکریپت


o آموزش ساختار محیط Android Studio و سیستم عامل Android

  • آشنایی با محیط Android Studio
  • آموزش Folder Structure در Android Studio
  • آشنایی با Java و XML
  • آشنایی با مدل لایه ای معماری Android
  • آشنایی با اصطلاحات Android
  • بررسی کامل و جامع Activity
  • بررسی Fragment در اندروید
  • بررسی Widget در اندروید
  • بررسی Layout در اندروید
  • آموزش جامع Manifest


o آموزش ساختار محیط XCode و سیستم عامل IOS

  • مقدمات IOS
  • آشنایی با Swift
  • آشنایی با اصطلاحات IOS
  • بررسی Stackview در IOS
  • بررسی Auto Layouts در IOS
  • بررسی Segues در IOS
  • بررسی Package در IOS


o آموزش React Native

  • ایجاد اولین پروژه React Native
  • آموزش خروجی گرفتن از پروژه React Native
  • آموزش اجرای برنامه React Native در Android
  • آموزش اجرای برنامه React Native در IOS
  • آموزش کار با ورودی متنی (Textinput) در React Native
  • آموزش استایل دهی در React Native
  • آموزش استفاده از یک Framework اختصاصی در React Native
  • آموزش Position در React Native
  • آموزش (Button) در React Native
  • آموزش ساخت کامپوننت های اختصاصی در React Native
  • آموزش Listening to Touch Events در React Native
  • آموزش ScrollView در React Native
  • آموزش Static Images در React Native
  • آموزش Network Images در React Native
  • آموزش Modal در React Native


o آموزش Managing Application State در React Native

  • آموزش State
  • آموزش Redux در React Native
  • آموزش نصب Redux در React Native
  • آموزش Actions در React Native
  • آموزش Reducer در React Native
  • آموزش Store در React Native
  • آموزش React Native و Redux در React Native


o آموزش رفع Bug در React Native

  • آموزش Console
  • آموزش Console در React Native
  • آموزش Breakpoints در React Native
  • آموزش React Native Debugger در React Native
  • آموزش Debugging Redux در React Native


o آموزش Navigation در React Native

  • مقایسه Navigation در برنامه های Web و برنامه های Native
  • آموزش Exploring Native Navigation Solutions در React Native
  • آموزش افزودن React Native Navigation به Android
  • آموزش افزودن React Native Navigation به IOS
  • آموزش Tabs Navigation در React Native
  • آموزش Icons در React Native
  • آموزش Pushing Pages در React Native
  • آموزش Popping Pages در React Native
  • آموزش Navigator Methods در React Native
  • آموزش Side Drawer در React Native
  • آموزش Navigation Events And Toggling the Drawer در React Native


o آموزش طراحی ظاهر برنامه و انیمیشن در React Native

  • آموزش Stylesheet در React Native
  • آموزش کامل و حرفه ای Flexbox در React Native
  • آموزش انواع واحد ها
  • آموزش Relative
  • آموزش Absolute
  • آموزش Text Style در React Native
  • آموزش Background Image در React Native
  • آموزش کامل Custom Button در React Native
  • آموزش کامل Side Drawer در React Native
  • آموزش Custom Button در React Native
  • آموزش Cross Platform Styles And Responsiveness در React Native
  • نمایش Icon های مختلف برای Platform های مختلف در React Native
  • آموزش بحث Centering with Margins در React Native
  • استفاده از Animated API در React Native


o آموزش ورودی های کاربر و اعتبارسنجی در React Native

  • آموزش Validation در React Native
  • آموزش Managing Input/ Control State در React Native
  • آموزش Validation Logic در React Native
  • آموزش Validation State در React Native
  • آموزش Auth Action در React Native
  • آموزش Soft Keyboard در React Native


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

  • آموزش نصب react-native-maps در React Native
  • آموزش عملیات Render نقشه در React Native
  • آموزش انتخاب یک موقیعت روی نقشه در React Native
  • آموزش افزودن یک Map Marker در React Native
  • آموزش نصب react-native-image-picker در React Native
  • آموزش کار با Image Picker در React Native
  • آموزش Storing the Picked Images در React Native
  • آموزش Image Picker and the Data it Returns در React Native


o آموزش شبکه و Http Request در React Native

  • بررسی تئوری Http Request در React Native
  • آموزش ایجاد Server در React Native
  • آموزش استفاده از Fetch-API در React Native
  • آموزش کار با Storing Data in Firebase در React Native
  • آموزش کار با Image Upload در React Native
  • آموزش Storing Data in Firebase در React Native
  • آموزش Storing the Remaining Data در React Native
  • آموزش Activity Indicator در React Native
  • آموزش Getting Data from the Server در React Native

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

آموزش PHP

خودآموز گام به گام PHP ADOdb

PHP ADOdb چیست؟

·         کتابخانه ای برای دسترسی به انواع از پایگاه داده.

·          PHP ADOdb با PHP نوشته شده است.

·          از سیستم متاتایپ (metatype system) برای یافتن نوع داده(data type)  معادل یک فیلد در پایگاه داده استفاده می کند.

·         ایده ان از Microsoft ADOdb گرفته شده است.

چرا PHP ADOdb؟

·         از انواع پایگاه داده مانند MySQL، Oracle، Microsoft SQL Server، Sybase، Sybase SQL Anywhere، Informix، PostgreSQL، FrontBase، Interbase ، Foxpro، Access، ADO و ODBCپشتیبانی می کند.

·         همچنین این کتابخانه نه تنها از دستورات select و Delete که از Insert  نیز پشتیبانی می کند.

·         PHP ADOdb از نوع Write once run anywhere است. (یکبار بنویسید همه جا استفاده کنید).

·         کد sql ان انتقال پذیر(portable)  است .

 

مقدمه ای برای ADOdb

می توانید مشتریتان را با گفتن "مشکلی نیست می توانید از mysql، mssql، oracle و غیره استفاده کنید"، شگفت زده کنید. برنامه ما بدون نیاز به تغییر کد، تمام پایگاه های داده اصلی را پشتیبانی می کند. حتما ارتقاء می گیرید. ابزار جادویی ما php ADOdb است. توابع PHP برای دسترسی به پایگاه داده استاندارد نشده است. این نیاز به یک Class Library پایگاه داده را برای پنهان کردن اختلافات بین API پایگاه داده، بیشتر می کند، با این Class Library می توانیم به راحتی پایگاه داده را تعویض کنیم. در حال حاضر ADOdb ازMySQL، Oracle، Microsoft SQL Server، Sybase، Sybase SQL Anywhere، Informix، PostgreSQL، FrontBase، Interbase،Foxpro، Access، ADO and ODBC پشتیبانی می کند. گزارش هایی مبنی بر اتصال موفق به Progress و DB2 هم از طریق ODBCداشته ایم. ویژگی های یکتای ADOdb عبارتند از:

·         برای کاربران ویندوز کار با ان راحت است. چون بسیاری از قرارداد ها شبیه Microsoft ADO است. بر خلاف دیگر کلاس های پایگاه داده PHP که بر دستور Select تمرکز دارند، ما کدی را ارائه می کنیم که insert و delete را هم انجام داده و قابل انتقال به دیگر پایگاه های داده باشد. برای هر پایگاه داده، متدهایی برای پردازش تاریخ (date)، الحاق رشته ها ارائه شده است.

·         یک سیستم متاتایپ به طور توکار نوشته شده که می توانیم معادل های نوع داده هایی مانند CHAR، STRING و TEXT را برای انواع پایگاه داده ها بیابیم.

·         انتقال ان راحت است، چون تمام کد وابسته به پایگاه داده در توابع stub نگهداری می شود. لازم نیست منطق هسته ی(Core logic)  کلاس ها را منتقل کنید.

·         پشتیبانی از PHP Session.

حالا این کتابخانه را تست می کنیم.

1.     از sourceforge انرا دانلود کنید.

2.     فایل فشرده شده را در یک دایرکتوری وب استخراج کنید.

3.     مدیر پایگاه داده را باز کنید (مثلا phpmyadmin).

4.     یک پایگاه داده بسازید (مثلا inventory)

5.     یک جدول ساده بسازید (مثلا products)

6.     حالا یک تست ساده. کد زیر رابنویسید. انرا درون دایرکتوری با پوشه adodb بگذارید نام انرا adodbtest.php بگذارید:

01

<?php    

02

    include('adodb/adodb.inc.php');

03

     

04

    $databasetype = 'mysql';

05

    $server = 'localhost';

06

    $user   = 'root';

07

    $password = 'r0ot';

08

    $database = 'inventory';

09

     

10

    $db = ADONewConnection($databasetype);

11

    $db->debug = true;

12

    $db->Connect($server، $user، $password، $database);

13

    $rs = $db->Execute('select * from products');

14

    print "<pre>";

15

    print_r($rs->GetRows());

16

    print "</pre>";

17

?>

   

7.     فایل را اجرا کنید

 

دستور Connection

در این بخش، درباره اتصال ها (connection) در php ADOdb صحبت خواهیم کرد. دو اتصال در ADOdb وجود دارد:Connect()  وPconnect().

Connect($host,[$user],[$password],[$database])  - از این در مثال اولمان استفاده کردیم. اتصال ناماندگار (non-persistent) به پایگاه داده یا سرور به نام $host، با استفاده از نام کاربری $user و پسورد $password. اگر سرور از چند پایگاه داده پشتیبانی کند، به $database متصل می شویم.

کد مانند این است:

1

$db = ADONewConnection($databasetype);

2

$db->debug = true;

 

3

$db->Connect($server, $user, $password, $database);

اگر به جای OLEDB از Microsoft ADO استفاده می کنید می توانید، پارامتر $database را برابر ارائه دهنده داده OLEDB (OLEDB data provider) که استفاده می کنید قرار دهید.

PConnect($host,[$user],[$password],[$database])  - اتصال ماندگار (persistent) به پایگاه داده با استفاده از نام کاربری$user و پسورد $password. . اگر سرور از چند پایگاه داده پشتیبانی کند، به $database متصل می شویم.

1

include('adodb.inc.php'); # load code common to ADOdb

2

    $conn = &ADONewConnection('access'); # create a connection

 

3

    $conn->PConnect('northwind'); # connect to MS-Access, northwind DSN

 

اگر connect و pconnect را با هم اشتباه می کنید، نکات زیر ممکن است مفید باشد:

اول، هنگام اتصال، تابع سعی می کند، لینکی ماندگار و باز به همان هاست، نام کاربری و پسورد بیابد. اگر یافت شود، در عوض ساخت اتصال جدید، شناسه(id)  ان اتصال باز برگردانده می شود.

دوم، بعد از اتمام اسکریپت، اتصال به سرور SQL  بسته نمی شود. در عوض، لینک برای استفاده اینده باز گذاشته می شود (مثلاmysql_close() لینکهایی که با pconnect() باز شده را نمی بندد.)

 

دستور Select پیشرفته

ADOdb ویژگی هایی دارد که سرعت شما را افزایش می دهد. یکی از این ویژگی ها دستور پیشرفته select است. با استفاده از این می توانید کد های خود را بهبود دهید.

select ساده

مثال select ساده:

01

include('adodb.inc.php'); # load code common to ADOdb

02

   $conn = &ADONewConnection('access'); # create a connection

 

03

   $conn->PConnect('northwind'); # connect to MS-Access, northwind DSN

04

 

 

05

   $recordSet = &$conn->Execute('select * from products');

06

 

 

07

   if (!$recordSet)

08

       print $conn->ErrorMsg();

 

09

   else

10

       while (!$recordSet->EOF) {

 

11

           print $recordSet->fields[0].' '.$recordSet->fields[1].'<br>';

12

           $recordSet->MoveNext();

 

13

       }    $recordSet->Close(); # optional

14

   $conn->Close(); # optional

 

selectlimit

فرمول ان اینگونه است:

SelectLimit($sql,$numrows=-1,$offset=-1,$inputarr=false)

 

اگر موفق باشد یک Recordset را برمی گرداند.یک select ساده را اجرا می کند، با شبیه سازی دستور Select در PostgreSQL ، تعداد را به $numrows با شروع از $offset محدود می کند.

مثال:

01

$connection->SelectLimit('SELECT * FROM TABLE',-1,10)

 

نحوه نمایش جدول

نمایش تمام جدول ها با استفاده از ADOdb ساده است. فقط به MetaTables() نیاز دارید. مثال را ببینید:

برنامه چند لایه چیست؟

در معماری چند لایه تمام برنامه به چندین بخش تقسیم می شود. این بخش ها می توانند فیزیکی یا منطقی باشند. هر بخش کار خاصی را انجام می دهد مثلا نمایش اینترفیس کاربر یا دسترسی به داده ها. برنامه می تواند به هر تعداد لایه داشته باشد ولی به هر حال بیشتر برنامه ها سه لایه مجزا دارند که عبارتند از :
1- Presentation Layer
2- Business Logic Layer 
3- Data Access Layer 

همان طور که احتمالا حدس زده اید، لایه Presentation چیزی نیست به جز بخشی از نرم افزار که با کاربر برنامه شما ارتباط برقرار می کند ( اینترفیس برنامه شماست ) نمایش داده ها به کاربر نهایی و اجازه به آنان برای ارتباط داشتن با داده ها، اصلی ترین وظیفه این لایه است.

در بیشتر موارد داده هایی که توسط کاربر وارد می شوند نیاز به اعتبارسنجی یا پردازش اضافی دارند. این مسوولیت لایه Business Logic است.

در نهایت داده های برنامه شما نیاز به ذخیره و بازیابی از طریق یک انبار داده دارند ( مثلا سیستم مدیریت دیتابیس های رابطه ای یا RDBMS و یا XML , ) این وظیفه توسط لایه دسترسی به داده انجام می شود.

به طور خلاصه، فرآیند مورد نظر ما این گونه کار می کند:

- کاربر برای داده های برنامه درخواستی ارسال می کند.
- لایه Data Access داده های مورد نظر را بازیابی می کند و از طریق لایه Business Logic آن ها را به لایه نمایش می فرستد.بعضی مواقع لایه دسترسی به داده ها، این داده ها را مستقیما به لایه نمایش ارسال می کند.
- لایه نمایش اطلاعاتی که باید نمایش داده شوند را از طریق لایه Business Logic دریافت می کند.
- کاربر داده ها را تغییر می دهد و عمل مناسب در مورد آن ها را اجرا می کند ( مثل اضافه یا به روز کردن داده ها )
- لایه Business Logic صحت داده های وارد شده توسط کاربر را بررسی می کند ( داده ها را اعتبار سنجی می کند)
- اگر داده ها معتبر باشند آن ها را برای به روز رسانی در بانک اطلاعاتی به دست لایه دسترسی به داده می سپارد.

برای یادگیری کامل سی شارپ به این سایت رجوع کنید:

آموزش سی شارپ

 

 

آموزش C#


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


این مقاله، یک برنامه نمونه (sample application) ایجاد می کند که از ویژگی های AJAX ASP.NET استفاده می کند.

شما در این مقاله، برنامه ای خواهید ساخت که صفحات اطلاعات کارمندان را از بانک اطلاعاتی نمونه AdventureWorks نمایش می دهد. این برنامه از کنترل UpdatePanel برای ریفرش کردن تنها بخشی از صفحه که تغییر پیدا کرده است، استفاده می کند؛ بدون اینکه page flashیی که با post back اتفاق می اقتد.این کار، "آپدیت جزیی صفحه" (partial-page update) نامیده می شود. همچنین برنامه نمونه از کنترل UpdateProgress، جهت نمایش پیام وضعیت، هنگامی که آپدیت جزیی صفحه در حال اجرا است، استفاده می کند.

 

پیش نیازها

شما برای پیاده سازی این مقاله، به موارد زیر احتیاج دارید:

  • Microsoft Visual Studio 2005 یا Microsoft Visual Web Developer Express.
  • یک وب سایت ASP.NET با قابلیت AJAX
  • بانک اطلاعاتی نمونه AdventureWorks.

ایجاد وب سایت ASP.NET

وب سایتی که بطور پیش فرض در ASP.NET ایجاد می کنید، قابلیت Microsoft Ajax را ساپورت می کند.

ایجاد یک وب سایت ASP.NET با قابلیت AJAX

  1. Visual Studio را باز کنید.
  2. در منوی File، روی New Web Site کلیک کنید.  ( پنجره New Web Site ظاهر می شود.)
  3. زیر Visual Studio installed templates، گزینه ASP.NET Web Site را انتخاب کنید.
  4. مکان (location) و زبان را وارد کنید و سپس OK کنید.

 

اضافه کردن کنترل UpdatePanel به صفحه وب ASP.NET

بعد از اینکه یک وب سایت ASP.NET ایجاد کردید، باید یک صفحه وب ایجاد کنید که حاوی کنترل UpdatePanel باشد. قبل از اینکه کنترل UpdatePanel را به صفحه اضافه کنید، باید یک کنترل ScriptManager اضافه کنید. کنترل UpdatePanel، وابسته به کنترل ScriptManager، جهت مدیریت کردن آپدیت جزیی صفحه، است.

ایجاد یک صفحه وب ASP.NET

1. در Solution Explorer، روی نام سایت کلیک راست و سپس روی Add New Item کلیک کنید.

پنجره Add New Item ظاهر می شود.

2. زیر Visual Studio installed templates، گزینه Web Form را انتخاب کنید.

3. صفحه جدید Employees.aspx را نامگذاری کنید و تیک گزینه Place code in separate file را بردارید.

4. زبانی را که می خواهید استفاده کنید، انتخاب کنید.

5. روی Add کلیک کنید.

6. به ویووی Design سوییچ کنید.

7. در تب AJAX Extensions در toolbox، روی کنترل ScriptManager دابل کلیک کنید تا آن را به صفحه اضافه کنید.

clip_image001

8. یک کنترل UpdatePanel از toolbox درگ کنید و و زیر کنترل ScriptManager دراپ کنید.

clip_image002

 

اضافه کردن محتوا (content) به کنترل UpdatePanel

کنترل UpdatePanel، آپدیت جزیی صفحه را اجرا می کند و محتوایی را که باید بطور مجزا از بقیه صفحه آپدیت شود، تعیین می کند. در این بخش ار مقاله، باید یک کنترل محدود به داده ها (data-bound) اضافه کنید که داده های بانک اطلاعاتی AdventureWorks را نمایش می دهد.

1. در تب Data در toolbox، یک کنترل GridView به ناحیه قابل ویرایش کنترل UpdatePanel درگ کنید.

2. در منوی GridView Tasks، روی Auto Format کلیک کنید.

3. در پنل Auto Format، زیر Select a scheme، گزینه Colorful را انتخاب و سپس OK کنید.

4. در منوی GridView Tasks، گزینه <New data source> را از لیست Choose Data Source انتخاب کنید.

ویزارد Data Source Configuration ظاهر می شود.

5. زیر Where will the application get data from، گزینه Database را انتخاب و سپس OK کنید.

6. برای مرحله Choose Your Data Connection، در ویزارد Configure Data Source، یک کانکشن به بانک اطلاعاتی AdventureWorks ایجاد کنید و سپس روی کلیک کنید.

7. در مرحله Configure the Select Statement، گزینه Specify a custom SQL statement or stored procedure را انتخاب و سپس روی Next کلیک کنید.

8. در مرحله Define Custom Statement or Stored Procedures، در تب SELECT، عبارت SQL زیر را وارد کنید:

SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName

9. روی Next کلیک کنید.

10. روی Finish کلیک کنید.

11. در منوی GridView Tasks، چک باکس Enable paging را فعال کنید.

12. تغییرات را ذخیره کنید، و CTRL+F5 را فشار دهید تا صفحه را در مرورگر مشاهده کنید.

توجه داشته باشید هنگام انتخاب صفحه های داده ها، هیچ page flashیی وجود ندارد. به این دلیل که صفحه مورد نظر هیچ postbsck یا هربار آپدیت کردن کل صفحه را اجرا نمی کند.

 برای یادگیری بیشتر به اینجا رجوع کنید

آموزش ASP.NET

اضافه کردن کنترل UpdateProgress به صفحه

1. کنترل UpdateProgress، هنگام request محتوای جدید کنترل UpdatePanel،یک پیام وضعیت (status message)، نشان می دهد.

2. یک کنترل UpdateProgress از تب AJAX Extensions درtoolbox، روی صفحه درگ کنید و آن را زیر کنترل UpdatePanel دراپ کنید.

3. کنترل UpdateProgress را انتخاب کنید، و در پنجره Properties، پراپرتی AssociatedUpdatePanelID را روی UpdatePanel1 تنظیم کنید.

این کار، کنترل UpdateProgress را به کنترل UpdatePanel، که قبلاً اضافه کرده اید، مرتبط می کند.

4. در ناحیه قابل ویرایش کنترل UpdateProgress،عبارت Getting Employees . را تایپ کنید.

5. تغییرات را ذخیره کنید، و CTRL+F5 را فشار دهید تا صفحه را در مرورگر مشاهده کنید.

اگر هنگامی که صفحه، SQL query را اجرا می کند و داده ها را باز می گرداند تاخیری وجود داشته باشد، کنترل UpdateProgress، پیامی را نمایش می دهد که در کنترل UpdateProgress وارد کرده اید.

اضافه کردن Delay به Sample Application

اگر برنامه شما هر صفحه داده را سریعاً آپدیت می کند، شاید محتوای کنترل UpdateProgress را روی صفحه نبینید. این کنترل، پراپرتی DisplayAfter را، که شما را قادر می کند یک تاخیر (delay) قبل از نمایش کنترل قرار دهید، ساپورت می کند. این کار، اگر آپدیت خیلی سریع اتفاق بیافتد، کنترل را از flashing در مرورگر باز می دارد. این تاخیر بطور پیش فرض، روی 500 میلی ثانیه (نصف ثانیه) تنظیم است، بدین معنی که اگر آپدیت کمتر از نیم ثانیه طول بکشد، کنترل UpdateProgress نمایش داده نخواهد شد.

در محیط development، می توانید یک تاخیر مصنوعی به برنامه تان اضافه کنید تا مطمئن شوید که کنترل UpdateProgress همانطور که انتظار می رفت عمل می کند. این کار اختیاری است و فقط برای تست کردن برنامه تان است.

1. درون کنترل UpdatePanel، کنترل GridView را انتخاب کنید.

2. در پنجره Properties، روی دکمه Events کلیک کنید.

3. روی ایونت PageIndexChanged دابل کلیک کنید تا یک event handler ایجاد کنید.

4. کد زیر را به ایونت هندلر PageIndexChanged اضافه کنید تا یک تاخیر سه ثانیه ای ایجاد کنید.

در VB:

'Include three second delay for example only.
System.Threading.Thread.Sleep(3000)

 

در C#:

//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);

 

5. تغییرات را ذخیره کنید، و CTRL+F5 را فشار دهید تا صفحه را در مرورگر مشاهده کنید.

از آنجاییکه حالا هر دفعه که به صفحه جدیدی از داده ها می رویم یک تاخیر سه ثانیه ای داریم، می توانید کنترل UpdateProgress را ببینید.

در VB:

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

Protected Sub GridView1_PageIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
'Include three second delay for example only.
System.Threading.Thread.Sleep(3000)
End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Getting employees.
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>

 

در C#:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void GridView1_PageIndexChanged(object sender, EventArgs e)
{
//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Getting employees.
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>





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


 عنوان دوره:دوره مقدماتی جاوا

 

پیش نیاز ها : آشنایی با اصول پایه برنامه نویسی

 

 

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

 

 

اهداف دوره :

 

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

آموزش جاوا

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

 

 

 آموزش PHP

عنوان دوره :  کارگاه عملی آموزش پی اچ پی همراه با ساخت فروشگاه الکترونیکی

پیش نیاز : 

 

1- آشنایی با اینترنت

2- آشنایی با طراحی صفحات وب و HTML

3- آشنایی با CSS و کاربرد آن در طراحی صفحات وب

 

مخاطبین دوره :

 

1-      طراحان WEB که می خواهند دانش عملی خود را در زمینه برنامه نویسی PHP گسترش دهند  .

2-      آن دسته از برنامه نویسان PHP که با ویژگیهای زبان PHP بصورت عملی کار نکرده اند .

3-      آن دسته از برنامه نویسان PHP که تا بحال تجربه عملی ساخت کلیه مراحل برنامه نویسی وب سایت را از ابتدا تا انتها نداشته اند .

 

مهمترین اهداف دوره :

در این دوره مباحثی نظیر نصب و پیکره بندی PHP و همچنین نصب و پیکره بندی MySQL ، آموزش مبانی زبان برنامه نویسی PHP مانند آرایه ها ، توابع ، کلاس ها ، مباحثی نظیر Security و login و logout و همچنین مدیریت ارتباطات با بانک اطلاعاتی در قالب آموزش عملی ساخت و مدیریت یک فروشگاه الکترونیکی بخوبی آموزش داده   می شود .

آموزش php

 

بخش اول : بخش مدیریتی (پنل مدیریتی سایت) :

1-      امکان رده بندی نامحدود محصولات (برای دسترسی سریعتر)

2-      امکان افزودن و حذف و ویرایش محصولات

3-      امکان افزودن گالری عکس و تعداد نامحدودی عکس به گالری به ازای هر محصول

4-      امکان مشاهده و گزارش گیری از فاکتورهای مشتریان

5-      امکان تغییر وضعیت فاکتور از "در دست پیگیری" به "تحویل به پست" و سپس "تحویل به مشتری"

6-      امکام تعریف حراجی و افزودن کالاها به حراجی

7-      امکان ارسال ایمیل گروهی و یا تکی به مشتریان فروشگاه

8-      امکان ارسال SMS گروهی و یا تکی به مشتریان فروشگاه

9-      امکان ایجاد گزارشات مالی شامل :

  • گزارش پرفروشترین محصولات
  • گزارش کم فروشترین محصولات
  • گزارش فروش هفتگی و ماهیانه
  • فهرست فروش هفتگی و ماهیانه

 

بخش دوم :    امکانات سمت Visitory شامل :

  • امکان جستجوی محصول
  • امکان استفاده از رده بندی برای دسترسی سریعتر به محضول
  • امکان جستجوی پیشرفته محصول
  • امکام استفاده از سبد خرید
  • مشخص نمودن تعداد محصولات در سبد خرید
  • خذف محصول از سبد خرید
  • تغییر دینامیکی محتویات سبد خرید

 

بخش سوم :   امکان login  و پیگیری وضعیت سبد فاکتور

 

بخش چهارم :   امکان پرداخت online و اتصال به گذرگاههای پرداخت الکترونیکی

 

بخش پنجم :  امکان دریافت SMS پس از پرداخت

 


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

 

 

 

 

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

 

 

کارگاه های آموزشی تخصصی برنامه نویسی

آموزش پروژه ای ، کاربردی ، عملی

کارگاه تخصصی SharePoint

C#.Net - WPF - WCF - Silverlight

ASP.Net

MVC

SQL Server

SQL Server Business Intelligence

PHP & MySQL

UML & RUP

Joomla

طراحی سایت (HTML - CSS - jQuery - Java Script)

آموزش بهینه سازی موتور جستجو (SEO)


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

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


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


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

عنوان دوره :  دوره آموزشی طراحی بانکهای اطلاعاتی با استفاده از SQL Server 2008

 

مخاطبین دوره :

این دوره برای افرادی طراحی شده است که عملکردبانک اطلاعاتی SqlServer 2008 آشنایی کامل ندارند.

برنامه نویسانی که در سطح متوسط و یا مبتدی با Sql آشنایی دارند نیز می توانند از این دوره استفاده نمایند.

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

 

اهداف دوره :

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

1 ) نصب و پیکر بندی بانک اطلاعاتی SQL Server 2008

2) محیط کاری SQL Server Management Studio

3) ساخت و مدیریت بانک های اطلاعاتی

4)ایمن سازی و سطوح امنیت در SQL Server 2008

5) ساخن و مدیریت جداول

6)ساخت و مدیریت ایندکسها و دیاگرامها

7) تهیه Backup و روشهای بازیابی Backup

8) ساخت یک Maintenance plan (روش پشتیبانی)

9) کار کردن با اطلاعات ( دستورات ذخیره و بازیابی)

10) ساخت نمایه ها(view)

11) برنامه نویسی ساخت یافته در SqlServer

ساخت رویه های ذخیره شده (Stored Procedure)

ساخت توابع دست ساز کاربر (User Defined function)

12)آغاز برنامه نویسی T-Sql

13)نکات کاربردی و حرفهای برنامه نویسی در Sql

14) ساخت Trigger ها

برای یادگیری این دوره به سایت زیر رجوع کنید


آموزش sql server 2008

آموزش sql sever


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

دوره آموزش کامل Node.js و ایجاد API

اهداف دوره

در این دوره می آموزید که چگونه با زبان JavaScript برنامه نویسی سمت Server انجام دهید. 
در دوره آموزش Node.Js، دانشجو به صورت کامل کار با پایگاه داده MongoDB را می آموزد. 
در دوره آموزش Node.Js، دانشجو به صورت کاربردی نحوه ساخت API در Node.Js را می آموزد. 
در دوره آموزش Node.Js، دانشجو به صورت کاربردی بر Socket Programming مسلط می شود. 
در دوره آموزش Node.Js، کلیه مراحل ساخت یک چت روم آنلاین را به صورت پروژه محور می آموزید. 
دانشجو در دوره آموزش Node.Js، به تسلط کامل بر مفاهیم شی گرایی و پیاده سازی آن در Node.Js مسلط می شود. 
در دوره آموزش Node.js، دانشجویان به تسلط کامل بر معماری MVC می رسند. 
در دوره آموزش Node.js،دانشجو به تسلط کامل بر Design Pattern Dependeny Injection و همچنین به تسلط بر کار با ابزار IOC در Node.js می رسد. IOC ها ابزارهای مدیریت ساخت اشیا هستند که از یک نقطه مرکزی کل فرآیند ساخت ومیریت حافظه همه اشیا را بر عهده می گیرند. 
در دوره آموزش Node.Js، دانشجویان به تسلط کامل بر سیستم احراز هویت در Node.Js می رسند. استفاده از JWT که یکی از بهترین روشهای Token سازی میباشد،میرسند 
در دوره آموزش Node.js دانشجویان با تسلط کامل مفاهیم Asymmetric Encryption، وهمچین DIGITALL SIGNATURE اقدام به رمزگذاری Token های امنیتی می پردازند 
در دوره آموزش Node.Js، دانشجویان به تسلط کامل بر مفاهیم MiddleWare می رسند و قادر خواهند بود تا MiddleWare ها رادر PIPE Line بارگ

برای ثبت نام در دوره آموزشی Node js  و یا دوره های دیگر برنامه نویسی به سایت آموزشگاه تحلیل داده رجوع کنید یا با تلفنهای 028146323و 028146330 تماس بگیرید.

مخاطبین این دوره

  •  دانشجویانی که با یک زبان برنامه نویسی آشنایی دارند و برنامه نویسان حرفه ای و مبتدی که علاقه مند به یادگیری Node.js هستند.


پیشنیاز

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


o آموزش مقدمات Node.js

  • آموزش Package Manager و کار با NPM
  • آموزش مفاهیم Package و فرمت JSON
  • نصب و راه اندازی Node.js و Visual Studio Code
  • مروری بر JavaScript و ES 6
  • تفاوت های شیوه های برنامه نویسی در سمت Back End


o آموزش مفاهیم کاربردی جاوااسکریپت در Node.js

  • آموزش ایجاد نخستین پروژه در Node.js
  • آموزش بررسی ساختار نخستین پروژه Node.js
  • آموزش ایجاد ساختار های مختلف در پروژه Node.js
  • آموزش معرفی انواع داده (Data Type) و عملگرها در Node.js
  • آموزش تعریف انواع توابع در Node.js
  • آموزش خصوصیات String (Length, Constructor, Prototype) در Node.js
  • آموزش متدهای کار رشته در Node.js
  • آموزش انواع شرط ها و حلقه ها در Node.js
  • آموزش کار با کلاس ها در Node.js
  • آموزش کار با آرایه ها و متدهای مربوط به آن در Node.js
  • آموزش آشنایی و کار با Callback و برنامه نویسی Sync و Async در Node.js
  • آموزش درک معماری های SCA و N-Layer و بررسی آنها در Node.js


o آموزش کار با Database در Node.js

  • تعریف Database
  • انواع Database و تفاوت های بین SQL و NOSQL
  • آموزش نصب و راه اندازی MongoDB
  • آموزش انواع داده ها در MongoDB
  • آموزش مفاهیم Scope و Variables در Node.js
  • آموزش عملگرها در Node.js
  • آموزش مفاهیم اشیا، آرایه ها و تابع ها در Node.js
  • آموزش Anonymous function در Node.js
  • آموزش Module System در Node.js
  • آموزش طرز کارکرد MongoDB
  • آموزش انجام چهار عمل اصلی در MongoDB (Insert, Update, Delete, Query)


o آموزش Express.js

  • آموزش طراحی یک وب اپلیکیشن در Node.js
  • آموزش سازماندهی فایل ها در Node.js
  • آموزش ایجاد Entry Point در Node.js
  • آموزش درک و استفاده از Middleware در Node.js
  • آموزش Router در Node.js
  • آموزش Controller در Node.js
  • آموزش Model در Node.js
  • آموزش Handlebars as view engines در Node.js


o آموزش Templating with Handlebars در Node.js

  • آموزش Client-side templating در Node.js
  • آموزش Server-side templating در Node.js
  • آموزش View ها در Node.js
  • آموزش Layout ها در Node.js
  • آموزش Partial View ها در Node.js
  • آموزش Handlebars در Node.js
  • آموزش عملیات Binding اشیا به template در Node.js
  • آموزش Handlebars helper در Node.js
  • آموزش عملیات Render کردن View ها در Node.js


o آموزش Controllers and View Models در Node.js

  • آموزش Controllers در Node.js
  • آموزش View Models در Node.js
  • آموزش Helpers for reusable code در Node.js


o آموزش Persisting Data with MongoDB در Node.js

  • آموزش اتصال به MongoDB در Node.js
  • آموزش ثبت و بازیابی یک document در Node.js
  • معرفی Mongoose در Node.js
  • آموزش Schemas در Node.js
  • آموزش Models در Node.js
  • آموزش Built-in validation در Node.js
  • آموزش Static methods در Node.js
  • آموزش Virtual properties در Node.js
  • آموزش اتصال با Mongoose در Node.js
  • آموزش انجام عملیات CRUD در Node.js

برای ثبت نام در دوره آموزشی Node js  و یا دوره های دیگر برنامه نویسی به سایت آموزشگاه تحلیل داده رجوع کنید یا با تلفنهای 028146323و 028146330 تماس بگیرید.

o آموزش ایجاد RESTful API در Node.js

  • معنا و مفهوم RESTful API چیست؟
  • آموزش Postman
  • آموزش ساخت یک API server در Node.js
  • آموزش انواع متدهای GET و POST و PUT و DELETE


o آموزش Socket در Node.js

  • تعریف مفهوم سوکت و برنامه نویسی سوکت
  • آموزش Event Handling در Node.js
  • آموزش Broadcasting در Node.js
  • آموزش Namespaces در Node.js
  • آموزش Rooms در Node.js
  • آموزش Error Handling در Node.js
  • آموزش Logging and Debugging در Node.js
  • آموزش Internals در Node.js
  • آموزش Chat Application در Node.js


o آموزش Test در Node.js

  • تست چیست و چرا باید از تست استفاده کنیم؟
  • آموزش ایجاد Test helper در Node.js
  • آموزش تست Route در Node.js
  • آموزش تست Server در Node.js
  • آموزش تست یک Model در Node.js
  • آموزش تست یک Controller در Node.js


o آموزش Deploy در Node.js

  • آموزش گرفتن خروجی از پروژه و انتشار آن در Node.js


o آموزش SPA

  • معرفی ساختار SPA
  • معرفی چند Framework برای Frontend


o آموزش Node.js Framework

  • معرفی سایر Framework های Node.js

 برای ثبت نام در دوره آموزشی Node js  و یا دوره های دیگر برنامه نویسی به سایت آموزشگاه تحلیل داده رجوع کنید یا با تلفنهای 028146323و 028146330 تماس بگیرید.


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

آموزش Html 5

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

این یک سایت HTML5 می باشد. هنگامی که در حال کشف و یادگیری HTML5 هستم، امیدوارم بتوانم آنچه را که یاد گرفته ام با شما به اشتراک بگذارم.

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

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

بهترین زنگی، آن زندگی میباشد که انگیزه های خلاقانه بیشترین نقش را داشته و انگیزه های مالی کمترین را.

برتراند راسل (72 –1970)

با توجه به این نوشته HTML5 یک نسخه ی در حال کار می باشد. به عبارت دیگر HTML5 هنوز یک کار در حال پیشروی می باشد. ویژگی های آن در W3C منتشر شده و روز به روز تغییر می کند.

چرا HTML5 مهم است؟

احتمالا تاکنون در مورد HTML5 شنیده اید، فکر می کنم محبوب ترین برنامه ای که فیلم را بدون Adobe Flash اجرا می کند، باید از آقای استیو جابز برای تبدیل آن به یک فن آوری معروف تشکر کرد.

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

چه وقت؟

WC3 در فوریه ی 2011 اعلام کرد که جولای 2014 تاریخی است که HTML5 پیشنهاد رسمی برای استاندارد وب می شود.

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

زمان را فراموش کنید:

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

اولین گروه کمپانی های مرورگر معروفی مانند Mozilla، مایکروسافت، اپل، گوگل و اپرا می باشند. گروه دوم نیز طراحان و توسعه دهندگان وب در این زمینه می باشند. ضعفHTML1.1 و HTML 2 خیلی ساده است، کمپانی های مرورگر فکر می کردند که ایده ی احمقانه است، بنابراین درهای خود را به روی آن بستند.

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

از آنجایی که مایکروسافت اعلام کرده که هیچ طرحی برای آزاد کردن IE9 برای یوزرهای ویندوز XP ندارد، اگر تمایل دارید از IE9 استفاده کنید، باید از ویندوز vista sp2 یا 7 استفاده کنید.

هیچ دلیلی وجود ندارد که طراحان تحت تاثیر HTML5 قرار نگیرند، زیرا که زندگی را از همیشه برای ما آسانتر کرده است.

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


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

آموزش طراحی سایت:قسمت هفتم

آموزش List آموزش List

 

 

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML طراحی جدول را یاد گرفتیم , در قسمت هفتم با ادامه آموزش HTML همراه باشید:

آموزش List

اچ تی ام ال HTML سه روش برای مشخص کردن لیست هایی از اطلاعات ارائه می دهد. تمام لیست ها باید شامل یک یا بیشتر ازیک عنصر باشند. لیست ها ممکن است شامل موارد زیر شوند.

< ul>

لیست بدون ترتیب. این لیست آیتم ها را با استفاده از bullet های ساده لیست می کند.

< ol>

لیست منظم. این لیست از نمودارهای عددی مختلف برای لیست کردن آیتم های شما استفاده می کند.

< dl>

لیست تعریف. این لیست آیتم های شما را به همان روشی که در دیکشنری منظم شده اند، منظم می کند.

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

لیست بدون ترتیب مجموعه ای از آیتم های مربوط به هم می باشد که هیچگونه نظم و ترتیب خاصی ندارند. این لیست با استفاده از برچسب < ul> در HTML ایجاد می شود. هر آیتم در لیست با یک bullet مشخص می شود.

مثال:

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

نمونه یک

<ul>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

ویژگی type

می توانید از ویژگی type برای برچسب < ul> استفاده کنید تا نوع bullet خود را مشخص کنید، که به طور پیش فرض یک دیسک می باشد. در زیر گزینه های ممکن را مشاهده می کنید.

<ul type="square">

<ul type="disc">

<ul type="circle"></ul></ul></ul>

در زیر مثالی را میبینید که در آن از < ul type="square"> استفاده می کنیم.

نمونه دو

<ul type="square">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

در زیر مثالی را می بینید که در آن از < ul type="disc"> استفاده کرده ایم.

نمونه سه

<ul type="disc">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

در زیر مثالی را می بینید که در آن از < ul type="circle"> استفاده کرده ایم.

نمونه چهار

<ul type="circle">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

لیست های منظم HTML

اگر تمایل دارید آیتم های خود را به جای قرار دادن در یک لیست دارای bullet، در یک لیست عددگذاری شده قرار دهید، می توانید از لیست منظم HTML استفاده کنید. این لیست با استفاده از برچسب < ol> ایجاد می شود. شماره گذاری از یک شروع شده و برای هر لیست منظم عنصر بعدی با اضافه شدن یک عدد و به همراه برچسب< li>اضافه می شود.
می توانید از ویژگی type برای برچسب < ol> استفاده کنیم تا نوع شماره گذاریمورد نظر خود را مشخص کنید. به طور پیش فرض شماره گذاری به وسیله ی عدد انجام می شود. در زیر گزینه های ممکن را مشاهده می کنید.

<ol type="1">

- Default-Case Numerals.

<ol type="I">

- Upper-Case Numerals.

<ol type="i">

- Lower-Case Numerals.

<ol type="a">

- Lower-Case Letters.

<ol type="A"> - Upper-Case Letters.</ol></ol></ol></ol></ol>

در زیر مثالی را می بینید که در آن از < ol type="1"> استفاده کرده ایم.

نمونه پنج

<ol type="1">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

در زیر مثالی را می بینید که در آن از < ol type="I"> استفاده می کنیم.

نمونه شش

<ol type="I">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

در زیر مثالی را میبینید که در آن از < ol type="i"> استفاده کرده ایم.

نمونه هفت

<ol type="i">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

مثال:

در زیر مثالی را می بینید که در آن از < ol type="A"> استفاده کرده ایم.

<ol type="A">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

در زیر مثالی را می بینید که در آن از< ol type="a"> استفاده کرده ایم.

نمونه نه

<ol type="a">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

ویژگی start

آموزش طراحی سایت:قسمت ششم

آموزش Table در HTMLآموزش Table در HTML

 

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML را شروع کردیم , در قسمت پنجم با ادامه آموزش HTML ( آموزش ساخت جدول ) همراه باشید:

آموزش Table در HTML

جدول های HTML به نویسندگان وب اجازه می دهند تا داده هایی مانند متن، تصاویر، لینک ها، جدول های دیگر و غیره در ردیف ها و ستون ها تنظیم کنید. جدول های HTML با استفاده از برچسب < table> ایجاد می شوند که در آن برچسب < tr> برای ایجاد ردیف ها و برچسب < td> برای ایجاد داده های سلول ها استفاده می شوند.

مثال:

نمونه یک

<table border="1">

    <tbody>

        <tr>

            <td>Row 1, Column 1</td>

            <td>Row 1, Column 2</td>

        </tr>

    </tbody>

</table>

ویژگی های colspan و rowspan

اگر بخواهید دو یا بیشتر از دو ستون را با هم تلفیق کنید از ویژگی colspan استفاده می کنید. به طور مشابه اگر بخواهید دو یا بیشتر از دو ردیف را در یک ردیف تلفیق کنید از rowspan استفاده کنید.

مثال:

نمونه سه

<p>Column 1 Column 2 Column 3 Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3 Row 2 Cell 2Row 2 Cell 3</p>

پس زمینه ی جدول

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

  • ویژگی Bg color: می توانید رنگ زمینه را برای همه ی جدول و یا تنها برای یک سلول تنظیم کنید.
  • ویژگی background: می توانید یک تصویر را برای کل جدول یا تنها یک سلول تنظیم کنید.

همچنین می توانید با استفاده از ویژگی bordercolor رنگ حاشیه را نیز تنظیم کنید.

مثال:

نمونه چهار

<p>Column 1 Column 2 Column 3 Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3 Row 2 Cell 2Row 2 Cell 3</p>

در اینجا مثالی در رابطه با استفاده از ویژگی background می بینید. در این مثال ما از تصویری موجود در image directory استفاده کرده ایم.

نمونه پنج

<table border="1">

<tbody>

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

<td rowspan="2">Row 1 Cell 1</td>

<td>Row 1 Cell 2</td>

<td>Row 1 Cell 3</td>

</tr>

<tr>

<td>Row 2 Cell 2</td>

<td>Row 2 Cell 3</td>

</tr>

<tr>

<td colspan="3">Row 3 Cell 1</td>

</tr>

</tbody>

</table>

طول و عرض جدول

شما می توانید طول و عرض جدولی را با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض جدول را به پیکسل و یا متناسب با درصد صفحه ی جاری تنظیم کنید.

مثال:

نمونه شش

<p>Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2</p>

شرح جدول

برچسب caption یک توضیح یا یک تیتر برای جدول می باشد که در بالای جدول نمایش داده می شود. این برچسب در ورژن های جدید HTML/XHTML توصیه می شود.

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

نمونه هفت

<table border="1" style="width:100%">

<caption>This is the caption</caption>

<tbody>

<tr>

<td>row 1, column 1</td>

<td>row 1, columnn 2</td>

</tr>

<tr>

<td>row 2, column 1</td>

<td>row 2, columnn 2</td>

</tr>

</tbody>

</table>

تیتر، بدنه و پاورقی جدول

جدول ها می توانند به سه بخش تقسیم شوند: تیتر، بدنه و پاورقی جدول. عنوان و فوت(tfoot) در واقع شبیه به تیتر و پاورقی در یک فایل پردازش word می باشند که برای هرصفحه یکی می باشد، در حالیکه بدنه همان نگه دارنده ی محتوای اصلی جدول می باشد.
سه عنصر برای مجزا کردن عنوان، بدنه و فوت در یک جدول عبارتند از

  • < thead> - برای ایجاد یک تیتر مجزا
  • < tbody>- برای نشان دادن بدنه ی اصلی جدول
  • < tfoot> - برای ایجاد یک پاورقی مجزا در یک جدول

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

مثال:

نمونه هشت

<p>This is the head of the table This is the foot of the table Cell 1 Cell 2 Cell 3 Cell 4</p>

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

مثال:

در زیر مثالی را از استفاده ی یک جدول و برچسب های دیگر در داخل یک سلول مشاهده می کنید.

<a class="btn btn-danger"rel="nofollow" href="/Try/441/9" target="_blank">امتحان کنید</a><p> </p><p class="MsoNormal" style="unicode-bidi: embed; direction: rtl; margin: 0in 0in 10pt; line-height: 17pt;" dir="rtl"><span style="line-height: pt; mso-bidi-language: fa;" lang="FA"><span style="font-size: 12pt; color: #000000;"> <br></span></span></p><div class="row" style="padding-top: 10px;">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

<ul class="bookMoreInfo">

<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">

<span class="VisitCountHolder">

<span class="fa fa fa-eye"> </span>

<span id="BodyContent2_UVVisitCount1_VisitCountSeparator" class="VisitCountSeparator"> </span>

<span id="BodyContent2_UVVisitCount1_VisitCountCount" class="VisitCountNumber">1945</span>

</span>

</li>

<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">

<em class="fa fa-download"> </em>

<span id="BodyContent2_Lbl_dlcount">424</span>

</li>

<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">تاریخ ارسال:

<span id="BodyContent2_Lbl_createdate">1394/07/27</span>

</li>

</ul>

آموزش #C-آموزش سی شارپ:قسمت پنجم

آموزش سی شارپآموزش سی شارپ

 

سلام با آموزش برنامه نویسی سی شارپ قسمت پنجم در خدمت شما عزیزان هستیم, در قسمت قبلی با پارامترهای توابع ,کار با آرایه ها Arrays آشنا شدیم. ادامه آموزش برنامه نویسی #C :

آموزش کار با کلاس ها در C# :

در این درس قصد داریم تا شما را با مفهوم کلاس ( class ) در C# و کاربرد آن ها آشنا کنیم. همچنین به بیان نحوه تعریف کلاس ها در برنامه و تعیین خواص و متدها برای آن ها خواهیم پرداخت.
اول از همه با مفهوم کلاس Class در C# شروع می کنیم. یک کلاس، مجموعه ای از خاصیت ها، متغیرها و متدهای مرتبط با هم است. یک کلاس خصوصیات ذکر شده را توصیف و پیاده سازی کرده و برای استفاده از آن در کد برنامه، بایستی یک نسخه از آن را (که به آن شی یا object می گویند) بسازید. بر روی شی یا object ایجاد شده، می توانید متغیرها و متدهای کلاس را به کار ببرید. هر تعداد که نیاز داشته باشید می توانید شی یا object از روی کلاس ساخته و در نقاط مختلف کد برنامه استفاده کنید.
مبحث شی گرایی یا object oriented یک مقوله بسیار گسترده است که در این درس، درس های دیگر این بخش به مهم ترین جزئیات آن خواهیم پرداخت.
در بخش مقدمه آموزش C# و در مثال Hello World مشاهده کردید که از یک کلاس در کد برنامه استفاده شده بود در C# تقریبا همه چیز بر مبنای کلاس ها ایجاد می شوند. در کد این درس قصد داریم تا کلاس خود را گسترش داده و با انواع امکانات آن آشنا شویم :

using System;

namespace ConsoleApplication1

{

class Program

{

static void Main(string[] args)

{

Car car;

car = new Car("Red");

Console.WriteLine(car.Describe());

car = new Car("Green");

Console.WriteLine(car.Describe());

Console.ReadLine();

}

}

class Car

{

private string color;

public Car(string color)

{

this.color = color;

}

public string Describe()

{

return "This car is " + Color;

}

public string Color

{

get { return color; }

set { color = value; }

}

}

}

همانطور که مشاهده می کنید، در کد فوق یک کلاس جدید به نام Car ایجاد کرده ایم. برای سهولت کار، این کلاس جدید را به همراه کلاس Program در فایل اصلی برنامه قرار داده ایم، اما روش رایج این است که هر کلاس درون فایلی جداگانه هم نام خود کلاس ایجاد شود. کلاس Car دارای یک متغیر (ویژگی) به نام Color است که برای تعیین رنگ خودرو به کار می رود. ویژگی Color به صورت خصوصی یا private تعیین شده که به این معناست که توابع و کلاس های خارج از تابع Car امکان دسترسی مستقیم به این خاصیت را ندارند. فقط توابع و متدهای داخل کلاس Car می توانند به خاصیت Color دسترسی مستقیم داشته باشند.

نکته :

اگر تابع یا کلاسی خارج از کلاس Car بخواهد به خاصیت خصوصی یا private به نام Color دسترسی داشته باشد، بایستی از یک Property برای این منظور استفاده کند. یک Property به نام Color در انتهای کد کلاس Car تعریف شده که وظیفه خواندن و نوشتن این خاصیت را بر عهده داشته و به سایر کلاس ها و توابع برنامه اجازه دسترسی به آن را می دهد.

همچنین کلاس Car دارای یک تابع سازنده یا Constructor می باشد. تابع سازنده، متدی است که وظیفه ساخت یک نمونه شی از کلاس مربوطه و برگردندن آن را به عهده داشته و به محض ساخته شدن یک نمونه شیء از کلاس اجرا می شود. تابع سازنده کلاس Car دارای یک پارامتر بوده که برای مقداردهی اولیه شی Car با خاصیت Color بزرگ قرمز (Red) به کار می رود. بنابراین هر شی از کلاس Car که ساخته شود، رنگ قرمز را به صورت پیش فرض برای خاصیت Color خود خواهد داشت. برای نشان دادن درستی این مسئله نیز تابع Describe طراحی شده که نام هر شی یا object ساخته شده با مقدار رنگ آن را در خروجی نشان می دهد.
در قسمت های بعدی به آموزش مفاهیمی همچون خواص (Properties)، تابع سازنده (Constructor) و بازه دید (Visibility) خواهیم پرداخت.

آموزش خواص Properties در کلاس های زبان C# :

آموزش سی شارپ

ویژگی (Property) در C# به شما امکان کنترل روش دسترسی و تغییر متغیرهای یک کلاس را می دهد. استفاده از ویژگی در C#، راه توصیه شده و درست جهت دسترسی به متغیرهای یک کلاس، به وسیله متدها یا توابع خارج از کلاس جاری، در زبان برنامه نویسی شی گرا object oriented می باشد. به عبارت دیگر، وقتی که یک متد یا کلاس دیگری در برنامه، بخواهد به متغیر یک کلاس دسترسی داشته باشد، بهتر است به جای این که مستقیما متغیر را استفاده کند، از طریق یک ویژگی یا Property در کلاس خود متغیر، به آن دسترسی داشته باشد.
در مثال آموزشی درس قبل (کار با کلاس ها) برای اولین بار روش استفاده از یک ویژگی یا Property را نشان دادیم. یک ویژگی یا Property همانند ترکیبی از یک متغیر Variable و یک متد method است. ویژگی نمی تواند پارامتری را دریافت کند، اما به وسیله آن می توانید قبل از ارسال و دریافت متغیر، مقدار آن را تغییر دهید. هر ویژگی یا Property از دو قسمت اصلی get و set تشکیل شده که همانند کد مثال زیر درون مجموعه Property تعریف می شوند :

private string color;

public string Color

{

get { return color; }

set { color = value; }

}

متد get مقدار متغیر را خوانده و آن را به برنامه بر می گرداند، از طرف دیگر متد set هم مقدار مورد نظر را به متغیر نسبت می دهد. مثال اول، ساده ترین حالت تعریف Property در C# است، اما می توانید آن را گسترش نیز بدهید.

نکته مهم :

مسئله مهم در هنگام تعریف یک ویژگی یا Property این است که تعریف یکی از متدهای set یا get نیز کفایت می کند و در صورت تعریف یکی، تعریف متد دیگر اختیاری است. این مسئله، امکان تعریف ویژگی های فقط خواندنی read-only و یا فقط نوشتنی write-only را می دهد.

در کد زیر یک مثال کامل تر از نحوه تعریف ویژگی ها در C# را نشان داده ایم :

public string Color

{

get

{

return color.ToUpper();

}

set

{

if(value == "Red")

color = value;

else

Console.WriteLine("This car can only be red!");

}

}

در کد مثال فوق، ویژگی را کمی گسترش دادیم. در کد جدید، متغیر Color در هنگام return، به دلیل استفاده از متد ToUpper() به صورت حروف بزرگ، برگردانده می شود. از طرف دیگر، با استفاده از دستور شرطی if، فقط مقدار رنگ “red” برای متغیر Color پذیرفته می شود.

آموزش کار با تابع سازنده Constructor در زبان C# :

تابع سازنده یا Constructor متد ویژه ای است که هر بار به محض ساخته شدن یک شی یا object از کلاس، اجرا می شود. درواقع از تابع سازنده برای مقداردهی اولیه متغیرها یا اجرای یک کد ثابت استفاده می شود.
یک تابع سازنده هیچ گاه مقدار خروجی یا return ندارد و به همین دلیل در تعریف آن، هیچ نوع متغیری جهت return تعریف نمی شود. ساختار کلی تعریف تابع سازنده Constructor در کلاس های C# به صورت زیر است :

public ClassName()

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

public Car()

در مثال عملی این درس، کلاسی به نام Car داریم که دارای یک تابع سازنده بوده که یک پارامتر متنی String را به عنوان ورودی دریافت می کند. البته تابع های سازنده در C# می توانند overload نیز شوند. یعنی این که ما چندین تابع سازنده هم نام برای یک کلاس داشته باشیم، ولی پارامترهای ورودی آن ها با هم متفاوت باشد. کلاس زیر یک کد عمل را نشان می دهد :

public Car()

{

}

public Car(string color)

{

this.color = color;

}

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

public Car()

{

Console.WriteLine("Constructor with no parameters called!");

}

public Car(string color) : this()

{

this.color = color;

Console.WriteLine("Constructor with color parameter called!");

}

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

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

پس زمینه در html پس زمینه در html

 

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML لینک های عکس در html , لینک های متنی , لینک ایمیل در HTML و قابها در html را یاد گرفتیم , در قسمت نهم با ادامه آموزش HTML همراه باشید:

پس زمینه در html

به طور پیش فرض رنگ زمینه ی صفحه ی وب شما سفید می باشد. ممکن است این زمینه را دوست نداشته باشید، اما نگرانی وجود ندارد. HTML دو روش مناسب زیر را ارائه می دهد تا زمینه ی صفحه وب خود را به دلخواه بیارایید.

  • زمینه ی HTML با رنگ ها.
  • زمینه ی HTML با تصاویر.

اکنون اجازه بدهید هر دو روش را یکی یکی و با استفاده از مثال های مناسب بررسی کنیم.

زمینه ی HTML با رنگها

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

< tagname bgcolor="color_value" .>

این color- value می تواند به هرکدام از فرمت های زیر ارائه شود.

<!-- Format 1 - Use color name -->

< table bgcolor="lime">

<!-- Format 2 - Use hex value -->

< table bgcolor="#f1f1f1">

<!-- Format 3 - Use color value in RGB terms -->

< table bgcolor="rgb(0,0,120)">

مثال:

در اینجا مثالی را می بینید از تنظیم زمینه ی یک برچسب HTML.

نمونه یک

<table bgcolor="yellow" width="100%">

<tbody><tr>

<td>

This background is yellow

</td>

</tr>

</tbody></table>

زمینه ی HTML با تصاویر

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

توجه:

ویژگی background به عنوان ویژگی خوبی تلقی نمی شود و توصیه می شود از style sheet برای تنظیم زمینه استفاده کنید.

< tagname background="Image URL" .>

متداول ترین فرمت های مورد استفاده ی تصویر عبارتند از JPEG، PNG و GIF.

مثال:

در اینجا مثال هایی را از تنظیم تصویر به عنوان زمینه ی جدول مشاهده می کنید.

نمونه دو

This background is filled up with HTML image.

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

 

زمینه های طرح دار و شفاف

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

مثال:

در اینجا مثالی از تنظیم یک الگوی زمینه برای یک جدول را مشاهده می کنید.

نمونه سه

This background is filled up with a pattern image.

رنگ در html:

رنگ ها برای دادن یک ظاهر و احساس خوب به وب سایت شما بسیار مهم می باشند. شما می توانید رنگ ها را روی لایه ی صفحه با استفاده از برچسب < body>مشخص کنید، یا می توانید رنگ ها را برای برچسب های مجزا با استفاده از ویژگی bgcolor مشخص کنید.
برچسب< body>دارای ویژگی های زیر می باشد که می تواند برای تنظیم رنگ های مختلف استفاده شود.

bgcolor

رنگی را برای زمینه ی صفحه تنظیم می کند.

text

رنگی را برای متن تنظیم می کند

alink

رنگی را برای لینک های فعال یا انتخاب شده تنظیم می کند.

link

رنگی را برای متن لینک شده تنظیم می کند.

رنگی را برای لینک های بازدید شده تنظیم می کند- یعنی برای متن لینک شده که روی آن کلیک کرده اید.

روش های کدگذاری رنگ HTML

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

Color names -

می توانید نام رنگ ها را به طور مستقیم تعیین کنید، به عنوان مثال سبز، قرمز، آبی و غیره.

Hex codes -

یک کد شش رقمی که نشان دهنده ی مقدار آبی، قرمز و سبز سازنده ی رنگ، می باشد.

Color decimal or percentage values-

این مقدار با استفاده از ویژگی rgb( ) تعیین می شود.

اکنون این روش های رنگ گذاری را یکی یکی بررسی خواهیم کرد.

رنگ های HTML – نام رنگ

می توانید برای تنظیم رنگ متن یا زمینه به طور مستقیم از نام رنگ استفاده کنید. W3C لیستی از 16 رنگ پایه را دارد که توسط یک اعتباز سنج HTML ارزیابی می شود، اما نام بیشتر از 200 رنگ مختلف وجود داردکه توسط مرورگرهای مهم پشتیبانی می شوند.

16 رنگ استاندارد W3C

در اینجا نام 16 رنگ استاندارد W3C را مشاهده می کنید، پیشنهاد می شود که از آنها استفاده کنید.

16 رنگ استاندارد W3C16 رنگ استاندارد W3C

مثال:

در اینجا مثال هایی را میبینید از تنظیم زمینه ی یک برچسب HTML به وسیله ی نام رنگ.

نمونه یک

<p>Use different color names for for body and table and see the result.</p>

رنگ های HTML – کدهای Hex

هگزادسیمال یک نمایش 6 رقمی از یک رنگ می باشد. دو رقم اول یعنی RR نمایانگر رنگ قرمر (Red) می باشند، دو رقم بعدی (GG) مقدار سبز (green) را نشان می دهند و آخرین دو رقم (BB) نیز مقدار آبی (blue) را نشان می دهند.
هر کد هگزادسیمال به وسیله ی یک علامت # دنبال می شود. در ادامه رنگ های مورد استفاده در نشانه گذاری هگزادسیمال را مشاهده می کنید.

در زیر مثال هایی را می بینیند از تنظیم زمینه ی یک برچسب HTML به وسیله ی کد رنگ در هگزادسیمال.

نمونه دو

<p>Use different color hexa for for body and table and see the result.</p>

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

 

رنگ های HTML – مقادیر RGB

مقدار این رنگ با استفاده از ویژگی rgb( ) مشخص می شود. این ویژگی سه مقدار می گیرد که هر کدام برای سبز، قرمز و آبی می باشد. مقدار می تواند عددی بین 0 و 255 یا یک درصد باشد.

توجه:

همه ی مرورگرها ویژگی ( )rgb را پشتیبانی نمی کنند، بنابراین توصیه می شود از آن استفاده نکنید.

در زیر لیستی از رنگ ها با مقادیر RGB را مشاهده می کنید.

رنگ های HTML – مقادیر RGB رنگ های HTML – مقادیر RGB

 

در اینجا مثال هایی را مشاهده می کنید از تنظیم زمینه ی یک برچسب HTML به وسیله ی برچسب rgb() با کد رنگ.

نمونه سه

<p>Use different color code for for body and table and see the result.</p>

در زیر لیستی از 216 رنگ را مشاهده می کنید که تصور می شود سالم ترین و مستقل ترین رنگ های کامپیوتر باشند. این رنگ ها از کد هگزای 000000 تا FFFFFF متفاوت می باشند و توسط همه ی کامپیوترهای دارای پالت رنگ 256 تایی پشتیبانی می شوند.

فونت ها:

فونت ها نقش مهمی در زیبا ساختن و خواناتر کردن وب سایت بازی می کنند. ظاهرو رنگ فونت به طور کامل بستگی به کامپیوتر و مرورگری دارد که استفاده می شود، اما شما می توانید از برچسب < font>در HTML برای افزودن استایل، سایز و رنگ به متن خود در وب سایت استفاده کنید. می توانید از یک برچسب< basefont> برای تنظیم تمام متن خود به اندازه، ظاهر و رنگ یکسان استفاده کنید.
برچسب فونت دارای سه ویژگی به نام های size، color و face می باشد که فونت شکا را به دلخواه در می آورد. برای تغییر هرکدام از ویژگی های فونت در هر زمانی در صفحه ی وب خود، به سادگی از برچسب < font> استفاده کنید. متنی که دنبال می کند، تغییر یافته با قی می ماند تا زمانی که شما آن را با < /font> برچسب ببندید. شما می توانید یکی از ویژگی ها یا همه ی ویژگی های داخل برچسب < font> را تغییر دهید.

نکته:

برچسب های font و basefont استفاده نمی شوند و احتمال می رود که در ورژن های بعدی HTML حذف شوند. بنابراین نباید مورد استفاده قرار بگیرند، پیشنهاد می شود که برای اجرای فونت های خود از استایل های CSS استفاده کنید. اما برای رسیدن به هدف این فصل برچسب های font و basefont رابا جزئیات توضیح می دهد.

تنظیم اندازه ی فونت

شما می توانید با استفتده از ویژگی size اندازه فونت محتوا را تنظیم کنید. دامنه ی مقادیر قابل قبول از 1 (کوچکترین) تا 7 (بزرگترین) می باشد. اندازه ی فونت پیش فرض 3 می باشد.

مثال:

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

 

نمونه یک

<font size="1">Font size="1"</font><br>

<font size="2">Font size="2"</font><br>

<font size="3">Font size="3"</font><br>

اندازه ی فونت مربوط

شما می توانید مشخص کنید چه تعداد از فونت ها بزرگتر و چه تعداد کوچکتر از اندازه ی فونت حاضر باشند. می توانید آن را مانند< font size="+n"> or < font size="-n"> مشخص کنید.

مثال:

نمونه دو

<font size="-1">Font size="-1"</font><br>

<font size="+1">Font size="+1"</font><br>

<font size="+2">Font size="+2"</font><br>

تنظیم ظاهر فونت

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

مثال:

نمونه سه

<font face="Times New Roman" size="5">Times New Roman</font><br>

<font face="Verdana" size="5">Verdana</font><br>

<font face="Comic sans MS" size="5">Comic Sans MS</font><br>

تعیین ظاهر فونت جایگزین

یک بازدید کننده فقط قادر خواهد بود فونت شما را ببیند، اگر آن را نصب شده روی کامپیوتر خود داشته باشد. بنابراین امکان تعیین دو یا بیشتر از دو ظاهر جایگزین با ارائه ی نام های مربوط به فونت ها وجود دارد.

< font face="arial,helvetica">

< font face="Lucida Calligraphy,Comic Sans MS,Lucida Console">

اگر هیچکدام از فونت های ارائه شده نصب نشده باشند، بنابراین فونت پیش فرض Times New Roman نمایش داده خواهد شد.

تنظیم رنگ فونت

شما می توانید با استفاده از ویژگی color هر رنگی رابرای فونت تنظیم کنید. شما می توانید رنگ مورد نظر خود را یا با استفاده از نام رنگ و یا با استفاده از کد هگزادسیمال برای آن رنگ تعیین کنید.

مثال:

نمونه چهار

<font color="#FF00FF">This text is in pink</font><br>

عنصر < basefont>

انتظار می رود که عنصر < basefont> یک اندازه، رنگ و ظاهر پیش فرض برای هر بخشی از داکیومنت که در برچسب < font>قرار نمی گیرند، تنظیم کند. شما می توانید از عناصر < font>استفاده کنید تا تنظیمات < basefont> را انجام دهید.
برچسب < basefont> همچنین ویژگی های رنگ، اندازه و ظاهر را می گیرد و با دادن مقدار بیشتر از 1+ برای فونت های بزرگتر و کمتر از 2- برای فونت های کوچکتر، تنظیمات فونت مربوطه را پشتیبانی می کند.

مثال:

نمونه پنج

<basefont face="arial, verdana, sans-serif" size="2" color="#ff0000">

<p>This is the page's default font.</p>

<h2>Example of the <basefont> element<="" h2=""></basefont>></h2>

 

 

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

 


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

آموزش #C-قسمت ششم

 

سلام با آموزش برنامه نویسی سی شارپ قسمت ششم در خدمت شما عزیزان هستیم, در قسمت قبلی با کلاسها ,خواص Properties ,کار با تابع سازنده Constructor و تابع تخریب کننده یا Destructor در زبان C# آشنا شدیم. ادامه آموزش سی شارپ :

آموزش کار با روش Method overloading در C# :

بسیاری از زبان های برنامه نویسی از تکنیک ای به نام پارامترهای پیش فرض /اختیاری (defult/optional parameters) پشتیبانی می کنند. این تکنیک به برنامه امکان می دهد تا با تعیین مقدار پیش فرض برای یک یا چند پارامتر تابع، آن ها را در هنگام مقدار دهی اختیار کند. این روش برای افزودن انعطاف پذیری به کد برنامه، بسیار کاربرد دارد.
برای مثال، می خواهید قابلیت کارکرد را به تابع ای که یک یا چند پارامتر ورودی دارد، بدهید. در اینگونه موارد، به دلیل عدم ارسال تعداد مورد نیاز پارامتر در هنگام فراخوانی، ممکن است کد شما درست اجرا نشود. برای حل این مسئله، می توانید از امکان جدید تعیین پارامترهای اختیاری یا optional استفاده کنید. در این روش، شما برای برخی پارامترها یک مقدار پیش فرضی یا default تعیین کرده که حتی اگر در هنگام فراخوانی تابع، مقداری برای آن ارسال نشد، کد دچار مشکل نشود.
پارامترهای پیش فرض (default parameters) در زبان C# 4.0 معرفی شدند، اما تا قبل از آن برنامه نویسان از تکنیکی تقریبا مشابه به نام method overloading استفاده می کردند. در این حالت، برنامه نویس چندین تابع هم نام ولی با مجموعه پارامترهای مختلف را تعریف می کند. برای مثال متد اول یک پارامتر و متد دوم دو پارامتر دریافت می کند. یک مثال مناسب برای این روش، تابع Substring از کلاس String Class است. به صورت زیر :

string Substring (int startIndex)

string Substring (int startIndex, int length)

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

class SillyMath

{

public static int Plus(int number1, int number2)

{

return Plus(number1, number2, 0);

}

public static int Plus(int number1, int number2, int number3)

{

return number1 + number2 + number3;

}

}

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

class SillyMath

{

public static int Plus(int number1, int number2)

{

return Plus(number1, number2, 0);

}

 

public static int Plus(int number1, int number2, int number3)

{

return Plus(number1, number2, number3, 0);

}

 

public static int Plus(int number1, int number2, int number3, int number4)

{

return number1 + number2 + number3 + number4;

}

}

مثال فوق خیلی ساده تکنیک method overloading را در C# نشان داده و نحوه ارتباط دادن توابع با هم را بیان می کند.


 

آموزش سطح دسترسی(Access Modifier) در C#

با تعیین بازه دسترسی یک کلاس، متد، متغیر یا ویژگی در C#، روش و امکان دسترسی به آن عنصر و دیده شدن در سطح کل برنامه را تعیین می کند. به این امکان در اصطلاح سطح دسترسی یا access modifier می گویند.
رایج ترین حالت ها برای access modifier در C#، خصوصی Private و عمومی Public است، اما حالت های دیگری نیز وجود دارد که در لیست زیر به معرفی آن ها پرداخته ایم. برخی از موارد زیر ممکن است تاکنون مورد استفاده شما قرار گرفته باشد، اما دانستن آن ها ضروری است.

  • عمومی Public : در این حالت عنصر به صورت عمومی تعریف شده و از هر جای برنامه توسط هر عنصر دیگر مثل سایر کلاس ها و توابع قابل دسترسی است. این حالت دارای حداقل محدودیت برای عنصر بوده و Enums و Interface ها به صورت پیش فرض public هستند.
  • محافظت شده یا Protected : در این حالت عنصر فقط توسط عوامل کلاس خود یا کلاس هایی که از کلاس آن به ارث رفته اند، قابل دسترس است.
  • درونی یا internal : در این حالت عنصر فقط درون پروژه جاری قابل دسترسی است.
  • درونی محافظت شده یا Protected internal : این حالت، همانند حالت internal است با این تفاوت که عناصر موجود در کلاس هایی که از کلاس عنصر به ارث رفته اند، حتی اگر در پروژه های دیگر باشند قابلیت دسترسی به آن را دارند.
  • خصوصی یا Private : در این حالت فقط اعضای همان کلاس امکان دسترسی به آیتم مورد نظر را دارند. این حالت دارای بیشترین میزان محدودیت بوده و Class ها و Struct ها به صورت پیش فرض خصوصی private هستند.

برای مثال، اگر شما دارای دو کلاس به نام های Class 1 و Class 2 باشید، اعضای private مربوط به Class 1 فقط درون خود آن کلاس قابل دسترس هستند. شما نمی توانید یک نمونه از اشیای Class 1 را در Class 2 ساخته و امکان دسترسی به آن ها را داشته باشید.
اما اگر Class 2 از Class 1 به ارث رفته یاشد (فرزند آن باشد) که در اصطلاح می گوییم inherit شده، فقط اعضای غیر private کلاس 1 در کلاس 2 قابل دسترس هستند.

 

پایان قسمت ششم آموزش سی شارپ

قسمت اول آموزش #C


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

 

 

 

 

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

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML فرم ها در Html را یاد گرفتیم , در قسمت یازدهم با ادامه آموزش طراحی سایت همراه باشید:

آموزش چند رسانه ای در HTML‏:

گاهی اوقات تمایل دارید که موسیقی یا ویدئو به صفحه ی وب خود اضافه کنید. ساده ترین راه برای افزودن صدا یا ویدئو به وب سایت، وارد کردن برچسب خاص HTML به نام < embed> می باشد. این برچسب باعث می شود که مرورگر به طور خودکار کنترل هایی را برای مولتی مدیا وارد کند که مرورگر ارائه شده برچسب < embed> و نوع مدیای ارائه شده را پشتیبانی می کند.
همچنین می توانید یک برچسب < noembed>برای مرورگرهایی وارد کنید که برچسب < embed> را نمی شناسند. به عنوان مثال می توانید از < embed> برای نمایش یک فیلم به انتخاب خود استفاده کنید واگر مرورگر < embed> را پشتیبانی نمی کند، از< noembed> برای نمایش یک تصویر JPG مجزا استفاده کنید. 

مثال:

در اینجا مثال ساده ای می بینید از اجرای یک فایل جاسازی شده ی midi.

 

مرحله 1

<embed src="/html/yourfile.mid">

<p><img alt="Alternative Media" src="yourimage.gif"><embed></p>

ویژگی های برچسب < embed>

در زیر لیستی از ویژگی های مهمی را می بینید که توسط برچسب < embed> استفاده می شود.

 

 

انواع ویدیوهای پشتیبانی شده

می توانید از انواع مدیاهای مختلفی مانند فایل های flash movies، AVi و MOV در داخل برچسب embed استفاده کنید.

  • فایل های swf – فایل هایی هستند که با برنامه ی macromedia’s flash تولید می شوند.
  • فایل های wmv – انواع فایل های تصویری ویندوز مایکروسافت می باشند.
  • فایل های mov - فرمت Quick time movie در اپل.
  • فایل های mpeg – فایل های تصویری هستند که توسط گروه تخصصی تصاویر متحرک (Moving Pictures Expert Group) ایجاد می شوند.

مرحله 2

<embed height="200" src="/html/yourfile.swf" width="200">

<p><img alt="Alternative Media" src="yourimage.gif"><embed></p>

صدای زمینه

شما می توانید از برچسب < bgsound>در html برای اجرای صدا در زمینه ی صفحه ی وب خود استفاده کنید. این برچسب فقط توسط اینترنت اکسپلورر پشتیبانی می شود و دیگر مرورگرها آن را نادیده می گیرند. زمانی که سند اصلی در ابتدا توسط کاربر دانلود شده و نمایش داده می شود، این برچسب یک فایل صدا را دانلود کرده و اجرا می کند. همچنین هروقت کاربر مرورگر را تازه سازی کند، صدای زمینه نیز دوباره اجرا خواهد شد.این برچسب دارای فقط دو ویژگی می باشد، loop و src، که همانطور که در بالا توضیح داده شد هر دوی این ویژگی ها دارای یک معنا می باشند.
در اینجا مثال ساده ای از اجرای فایل کوچک midi را می بینید.

مرحله 3

<p><img src="yourimage.gif"></p>

این مثال یک صفحه ی خالی تولید خواهد کرد. این برچسب هیچ مولفه ای را اجرا نمی کند و مخفی باقی می ماند.
اینترنت اکسپلورر نیز تنها سه فرمت صدا را اجرا می کند: wav فرمت داخلی کامپیوترها، au فرمت داخلی برای کار ابزارهای Unix و MIDI یک کد برنامه گذاری جهانی برای موسیقی.

برچسب آبجکت در HTML

HTML 4 عنصر< object>را معرفی می کند که یک راه حل چند منظوره برای وارد کردن آبجکت عمومی ارائه می دهد. عنصر< object>به نویسندگان HTML اجازه می دهد تا هر چیز لازم را با یک آبجکت برای ارائه ی آن توسط یک کاربر، تعیین کند.
در اینجا چند مثال در این رابطه می بینید.

مثال:

شما می توانید یک سند HTML را در خود سند HTML اجرا کنید.

مرحله 4

<object data="data/test.htm" type="text/html" width="300" height="200">

alt : <arel="nofollow" href="data/test.htm">test.htm<a>

</object>

در اینجا اگر مرورگر برچسب object را پشتیبانی نکند، ویژگی alt وارد تصویر می شود.

مثال:

شما می توانید یک سند PDF را در یک سند HTML اجرا کنید.

<object data="data/test.pdf" type="application/pdf" width="300" height="200">

alt : <arel="nofollow" href="data/test.pdf">test.htm<a>

</object>

مثال:

شما می توانید با استفاده از برچسب < param> برخی پارامترهای متناسب با سند را مشخص کنید. در اینجا مثالی از اجرای فایل wavرا می بینید.

مرحله 5

<object data="data/test.wav" type="audio/x-wav" width="200" height="20">

<param name="src" value="data/test.wav">

<param name="autoplay" value="false">

<param name="autoStart" value="0">

alt : <arel="nofollow" href="data/test.wav">test.wav<a>

</object>

مثال:

شما می توانید یک سند flash مانند زیر اجرا کنید.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="penguin"

codebase="someplace/swflash.cab" width="200" height="300">

<param name="movie" value="flash/penguin.swf" />

<param name="quality" value="high" />

<img src="penguin.jpg" width="200" height="300" alt="Penguin" />

</object>

مثال:

شما می توانید یک سند java applet وارد سند HTML کنید.

مرحله 6

 

<object classid="clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"

width="200" height="200">

<param name="code" value="applet.class">

</object>

ویژگی classid تعیین می کند که چه نسخه ای از java plug-in استفاده شود. شما می توانید از ویژگی انتخابی codebase برای مشخص کردن چگونگی دانلود JRE استفاده کنید.

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

ادامه دارد.

 





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

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTMLپس زمینه در html , رنگ در html و فونت ها در Html را یاد گرفتیم , در قسمت دهم با ادامه آموزش طراحی سایت همراه باشید:

 

فرم های html

وقتی که می خواهید داده هایی را از سایت بازدیدکننده جمع آوری کنید، به فرم های HTML احتیاج خواهید داشت. به عنوان مثال در هنگام ثبت کاربر، اطلاعاتی مانند نام، آدرس ایمیل و کارت اعتباری و غیره را جمع آوری می کنید. یک فرم داده ها را از بازدیدکننده ی سایت می گیرد و سپس آن را به یک برنامه ی پایانی مانند CGI، اسکریپت ASP یا اسکریپت PHP باز می گرداند. برنامه ی پایانی فرایندهای مورد نیاز را بر اساس کار تعریف شده در برنامه، روی داده ی منتقل شده انجام می دهد.
عناصر متفاوتی برای فرم در دسترس میباشند، مانند فیلدهای متن، فیلدهای textarea، منوهای رو به پایین، دکمه های رادیو، چک باکس ها و غیره.
برچسب < form>مربوط به HTML، برای ایجاد یک فرم HTML استفاده می شود و دارای ترکیب زیر می باشد

< form action="Script URL" method="GET|POST">

form elements like input, textarea etc.

< /form>

ویژگی های فرم

علاوه بر ویژگی های متداول، در زیر لیستی از متداول ترین ویژگی های مربوط به فرم را مشاهده می کنید .

کنترل های فرم HTML

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

  • کنترل های ورودی متن
  • کنترل های چک باکس
  • کنترل های رادیو باکس
  • کنترل های انتخاب باکس
  • باکس های انتخاب فایل
  • کنترل های مخفی
  • دکمه های قابل کلیک شدن
  • ثبت و تنظیم مجدد

کنترل های ورودی متن

سه نوع ورودی متن وجود دارد که در فرم ها استفاده می شوند .

  • کنترل های ورودی متن تک خطی: این کنترل برای آیتم هایی استفاده می شود که فقط یک خط از ورودی کاربر را لازم دارد، مانند باکس های جستجو و نام ها. این کنترل ها با استفاده ازبرچسب < input>مربوط به HTML ایجاد می شوند.
  • کنترل ورودی گذرواژه: این نیز یک متن ورودی تک خطی می باشد، اما به محض اینکه کاربر کاراکتر را وارد می کند، این کنترل آن را می پوشاند.
  • کنترل های متن ورودی چند خطی: زمانی استفاده می شود که لازم است کاربر جزئیاتی را وارد کند که بیشتر از یک جمله می باشند. کنترل های ورودی چند خطی با استفاده از برچسب < textarea>استفاده می شوند.

کنترل های ورودی تک خطی

این کنترل ها برای آیتم هایی استفاده می شوند که کاربر فقط یک خط ورودی احتیاج دارد، مانند باکس های جستجو و نام ها و با استفاده از برچسب < input>مربوط به HTML ایجاد می شوند.

مثال:

در اینجا مثال پایه ای می بینید از یک ورودی تک خطی که برای گرفتن نام کوچک و نام خانوادگی به کار می رود .

نمونه یک

First name:

 

Last name:

ویژگی ها

در زیر لیستی از ویژگی های برچسب < input>را برای ایجاد فیلد متن می بینید.

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

 

کنترل های پسورد ورودی

این کنترل نیز یک کنترل تک خطی می باشد، اما به محض اینکه کاربر کاراکترها را وارد می کند، آنها را می پوشاند. این ها نیزبا استفاده از برچسب < input>مربوط به HTML ایجاد می شوند، اما نوع ویژگی با عنوان password تنظیم میشود.

مثال:

در اینجا مثالی از ورودی تک خطی پسوورد می بینید که برای گرفتن پسورد کاربر استفاده می شود.

نمونه دو

User ID :

 

Password:

ویژگی ها

در زیر لیست مربوط به ویژگی های برچسب < input>را برای ایجاد فیلد پسوورد می بینید.

کنترل های متن ورودی چند خطی

زمانی استفاده می شود که یک کاربر باید جزئیاتی را ئارد کند که بیشتر از یک جمله می باشند. کنترل های ورودی چند خطی با استفاده از برچسب < textarea>ایجاد میشوند.

مثال:

در اینجا مثالی را می بینید از یک ورودی متن چند خطی که برای ارائه ی توصیفات آیتم استفاده می شود.

نمونه سه

Description :


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

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

 

 

 

 

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبلچند رسانه ای در HTML‏ را یاد گرفتیم , در قسمت دوازدهم با ادامه آموزش طراحی سایت همراه باشید:

یاد گرفتیم که یک نمونه داکیومنت HTML دارای ساختار زیر می باشد.

Document declaration tag

< html>

< head>

Document header related tags

< head>

< body>

Document body related tags

< body>

< html>

این فصل جزئیات بیشتری در مورد بخش سربرگ در HTML ارائه می دهد که به وسیله ی برچسب <head> نمایش داده می شود. برچسب< head>حاوی برچسب های مهمی می باشد که عبارتند از:

<title>

< meta>

< link>

< base>

< style>

< script >

< noscript >

 

 

برچسب < title> در HTML

این برچسب برای تعیین تیتر داکیومنت HTML استفاده می شود. در زیر مثالی می بینید از ارائه ی تیتر به داکیومنت HTML.

نمونه یک

<title>HTML Title Tag Example</title>

<p>Hello, World!</p><p>

</p>

برچسب < meta> در HTML

این برچسب برای ارائه ی متادیتا در مورد داکیومنت HTML استفاده می شود که اطلاعاتی از قبیل انقضا صفحه، گردآورنده ی صفحه، لیست کلمات کلیدی، توصیف صفحه و غیره ارائه می دهد.
در ادامه استفاده های مهم برچسب < meta> در داکیومنت HTML ارائه شده اند

نمونه دو

<title>HTML Title Tag Example</title>

<!-- Provide list of keywords -->

<meta name="keywords" content="C, C++, Java, PHP, Perl, Python">

<!-- Provide description of the page -->

<meta name="description" content="Simply Easy Learning by Tutorials Point">

<!-- Author information -->

<meta name="author" content="Tutorials Point">

برچسب < base> در HTML

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

نمونه سه

<title>HTML Title Tag Example</title>

<baserel="nofollow" href="http://www.tahlildadeh.com/">

<img src="/banner/02.jpg" alt="Logo Images">

<arel="nofollow" href="/ArticleDetails/HTML Marquees" title="HTML Tutorial">HTML Tutorial</a>

 

برچسب < link> در HTML

این برچسب ارتباط بین داکیومنت جاری و منبع خارجی را تعیین می کند. در ادامه مثالی را می بینید از لینک یک فایل style sheet خارجی موجود در مسیر css با یک web root.

نمونه چهار

<title>HTML Title Tag Example</title>

<baserel="nofollow" href="http://www.tahlildadeh.com/">

<link rel="stylesheet" type="text/css"rel="nofollow" href="/css/style.css">

برچسب< style>در HTML

این برچسب برای تعیین style sheet برای داکیومنت جاری HTML استفاده می شود. در ادامه مثالی را می بینید از تعریف برخی قوانین style sheet در داخل برچسب< style>.

نمونه پنج

<style>

.myclass {

background-color: #aaa;

padding: 10px;

}

</style>

توجه:

برای فراگیری چگونگی کار Cascading Style Sheet یک آموزش مجزای موجود در اینجا را کلیک کنید.

برچسب< script>در HTML

این برچسب برای وارد کردن فایل اسکریپت خارجی و یا تعریف فایل اسکریپت داخلی برای داکیومنت HTML استفاده می شود. در زیر مثالی را می بینید که در آن از جاوا اسکریپت برای تعریف عملکرد ساده ی جاوااسکریپت استفاده می کنیم.

نمونه شش

function Hello() {

alert("Hello, World");

}

 

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

 





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

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

سلام با آموزش طراحی سایت در خدمت شما هستیم , درقسمت قبلسر برگ در HTML‏ را یاد گرفتیم , در حال با ادامه آموزش طراحی سایت همراه باشید:

آموزش Cascading style sheet ‏ ‏

استایل شیت Cascading style sheet (CSS) بیان می کند که داکیومنت ها روی صفحه و در چاپ چگونه نشان داده می شوند، یا شاید چگونه بیان می شوند. از زمانی که کنسرسیوم در سال 1994 تاسیس شد، W3C به طور فعالانه ای در استفاده از Style sheet روی وب پیشرفت کرده است.
CSS جایگزین های ساده و موثری را برای تعیین ویژگی های مختلف برچسب های HTML ارائه می دهد. با استفاده از CSS شما می توانید تعدادی از ویژگی های طراحی را برای یک HTML ارائه شده تعیین کنید. هر ویژگی دارای نام مقدار میباشد که به وسیله ی علامت (:) از هم جدا شده اند. اطلاعیه ی مربوط به هر ویژگی نیز توسط علامت نقطه ویرگول (;) از یکدیگر جدا شده اند.

 

مثال:

ابتدا اجازه بدهید که مثالی از داکیومنت HTML را مورد بررسی قرار دهیم که برای تعیین رنگ و اندازه ی فونت از برچسب < font> استفاده می کند.

<p><font color="green" size="5">Hello, World!</font></p>

می توانیم با استفاده از style sheet مثال بالا را مانند زیر بازنویسی کنیم.

<p style="color:green;font-size:24px;">Hello, World!</p>

شما می توانید به سه روش از CSS در داکیومنت HTML خود استفاده کنید.

استایل Style sheet خارجی – قوانین style sheet را در یک فایل css مجزا تعریف می کند، و سپس آن فایل را با استفاده از برچسب در HTML وارد داکیومنت HTML شما می کند.

استایل Style sheet داخلی – قوانین style sheet را در با استفاده از برچسب< style>در بخش سربرگ داکیومنت HTML تعریف می کند.

استایل Inline style sheet – قوانین style sheet را مستقیما و به همراه عناصر HTML با استفاده از ویژگی style تعریف می کند.

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

Style sheet خارجی

اگر می خواهید از style sheet خود در صفحات مختلف استفاده کنید، توصیه می شود که یک style sheet متداول در یک فایل مجزا تعریف کنید. یک فایل cascading style sheet دارای ضمیمه هایی مانند css می باشد و با استفاده از برچسب < link> وارد فایل های HTML خواهد شد.

توجه داشته باشید که ما یک فایل style sheet به نام style.css که دارای قوانین زیر می بشد، تعریف می کنیم.

.red{

   color: red;

}

.thick{

   font-size:20px;

}

.green{

   color:green;

}

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

!DOCTYPE html>

< html>

< head>

< title>HTML External CSS< /title>

<link rel="stylesheet" type="text/css"rel="nofollow" href="/html/style.css">

< /head>

< body>

< p class="red">This is red< /p>

< p class="thick">This is thick< /p>

< p class="green">This is green< /p>

< p class="thick green">This is thick and green< /p>

< /body>

< /html>

این مثال نتیجه ی زیر را تولید خواهد کرد.

This is red

This is thick

This is green

This is thick and green

Style sheet داخلی

اگر می خواهید قوانین style sheet را برای یک داکیومنت مجزا به کار ببرید، فقط آن موقع است که می توانید این قوانین را با استفاده از برچسب< style>وارد بخش سربرگ داکیومنت HTML کنید.
قوانین تعریف شده در style sheet داخلی، قوانین تعریف شده در فایل CSS خارجی را نیز در بر می گیرد.

مثال:

اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما در اینجا قوانین style sheet را در همان داکیومنت HTML و با استفاده از برچسب< style>می نویسیم.

<style type="text/css">

.red {

color: red;

}

.thick {

font-size: 20px;

}

.green {

color: green;

}

</style>

شما می توانید با استفاده از ویژگی style از برچسب مربوطه، قوانین style sheet را مستقیما برای هر عنصر HTML به کار برید. این امر فقطزمانی می تواند انجام شود که شما علاقمند به ایجاد تغییرات خاص در هرکدام از عناصر HTML می باشید.
قوانین تعریف شده با عنصر درون خطی، قوانین تعریف شده در یک فایل CSS خارجی و نیز قوانین تعریف شده در یک عنصر< style>را در برمی گیرد. اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما این بار قوانین style sheet را همراه با قوانین HTML و با استفاده از ویژگی style در عناصر خواهیم نوشت.

<p style="color:red;">This is red</p>

<p style="font-size:20px;">This is thick</p>

<p style="color:green;">This is green</p>

<p style="color:green;font-size:20px;">This is </p>

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


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

آموزش کار با آرایه ها Arrays در زبان C# :

سلام با آموزش برنامه نویسی سی شارپ قسمت هفتم در خدمت شما عزیزان هستیم, در قسمت قبلی با روش Method overloading در زبان C# آشنا شدیم. ادامه آموزش سی شارپ :

آرایه ها Arrays مجموعه ای از آیتم ها مثل متن String می باشند. شما می توانید از آرایه ها برای قرار دادن چندین متغیر همسان در یک گروه و سپس انجام اعمال خاصی بر روی آن ها مثل مرتب سازی یا sorting استفاده کنید.
آرایه ها در C# تقریبا شبیه متغیرها تعریف می شوند با این فرق که یک [ ] در مقابل نوع داده ای آرایه قرار می گیرد. ساختار کلی تعریف یک آرایه در C# به صورت زیر است :

string[] names;

 

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

string[] names = new string[2];

در کد فوق، عدد 2 سایز آرایه را تعیین می کند. سایز آرایه تعداد اعضایی که می توانید در آرایه قرار دهید را مشخص می سازد. قرار دادن آیتم ها در یک Arrays کار ساده ای است. به صورت زیر :

names[0] = "John Doe";

اما چرا در تعریف اولین عضو آرایه از عدد 0 استفاده کردیم. به دلیل این که در C# همانند سایر زبان های برنامه نویسی، شمارش واحدها به جای 1 از 0 شروع می شود. بنابراین اولین عضو آرایه با 0 اندیس گذاری شده، دومی با 1 و به این ترتیب.
شما بایستی به تعداد اعضای یک آرایه دقت کنید، زیرا تعریف عضو بیشتر از تعداد تعیین شده برای آرایه، برنامه را دچار خطا می کند. دقت کنید وقتی یک آرایه با 2 عضو تعیین می شود، اعضای آن دارای اندیس های 0 و 1 هستند و عضوی با 2 اندیس وجود ندارد. این یک اشتباه رایج در هنگام استفاده از آرایه هاست.
در درس های قبل تر، با ساختارهای تکرار (حلقه) در C# آشنا شدید، این ساختارها برای کار با آرایه ها بسیار مناسب هستند.
رایج ترین راه برای استخراج اطلاعات یک آرایه Arrays استفاده از حلقه ها یا loops می باشد. در هر بار تکرار حلقه، یک عضو آرایه استخراج شده و می توان عملیات مورد نظر خود را بر روی آن انجام داد. در مثال عملی زیر، نحوه خواندن و کار با یک آرایه را به وسیله حلقه loop نشان داده ایم :

using System;

using System.Collections;

namespace ConsoleApplication1

{

class Program

{

static void Main(string[] args)

{

string[] names = new string[2];

names[0] = "John Doe";

names[1] = "Jane Doe";

foreach(string s in names)

Console.WriteLine(s);

Console.ReadLine();

}

}

}

در مثال فوق، از حلقه foreach استفاده کردیم که ساده ترین نوع حلقه برای کار با آرایه هاست. اما می توان از سایر انواع حلقه ها در C# نیز استفدده نمود، مثل حلقه for که به راحتی به وسیله آن می توان اعضای یک آرایه را شمرد و به تعداد اعضا پیام در خروجی چاپ کرد :

for(int i = 0; i < names.Length; i++)

Console.WriteLine("Item number " + i + ": " + names[i]);

کارکرد کد فوق بسیار ساده است. ما از اندازه طول آرایه (Arrays Length) برای تعیین این که حلقه بایستی چند بار تکرار شود، استفاده کرده ایم. همچنین از شمارنده Counter(i) برای فهمیدن این که هر لحظه در کجای پردازش آرایه بوده و برای بیرون کشیدن هریک از اعضای آن استفاده نموده ایم. همانطور که در هنگام تعریف و مقداردهی آرایه از یک عدد به نام اندیس یا indexer استفاده کردیم، از همان عدد می توان برای خواندن و بیرون کشیدن اعضای آرایه استفاده نمود.
در بخش قبل گفتیم که می توان اعضای یک آرایه را مرتب یا sort کرد. این کار بسیار راحت است. کلاس Array Class شامل چندین متد (method) مختلف است که از آن ها می توانید برای کار با آرایه ها استفاده کنید. در مثال زیر اعداد به جای string یا متن استفاده کرده ایم تا منظور خاصی را نشان دهیم، وگرنه به همین سادگی می توان اعضای یک آرایه را از نوع string هم تعریف کرد. روش بسیار ساده تر دیگری نیز برای پر کردن و مقداردهی اعضای یک آرایه وجود دارد، به خصوص زمانی که اعضای آرایه شما مشخص و مرتب هستند. به صورت زیر :

int[] numbers = new int[5] { 4, 3, 8, 0, 5 };

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

int[] numbers = { 4, 3, 8, 0, 5 };

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

using System;

using System.Collections;

namespace ConsoleApplication1

{

class Program

{

static void Main(string[] args)

{

int[] numbers = { 4, 3, 8, 0, 5 };

Array.Sort(numbers);

foreach(int i in numbers)

Console.WriteLine(i);

Console.ReadLine();

}

}

}

تنها چیز جدید در کد مثال فوق، دستور Array.Sort است. این متد می تواند پارامترهای مختلفی را به عنوان ورودی دریافت کرده و در هر کدام یک نوع آرایه را مرتب خواهد کرد. مثلا نزولی، صعودی و یا . .
کلاس Array Class دارای متدهای مختلف دیگری برای کار با آرایه ها مثل متد Reverse() است که به وسیله آن می توان ترتیب اعضای یک آرایه را مع کرد. برای درک بهتر، به لیست کامل متدهای آرایه ها در C# بروید.
آرایه هایی که در مثال های این درس استفاده کردیم، همه تک بعدی هستند، ولی آرایه ها در C# می توانند 2 یا 3 بعدی نیز باشند. به این آرایه ها آرایه های تو در تو یا ماتریس هم می گویند.
آرایه های چند بعدی در C# به 2 دسته تقسیم می شوند :

  • آرایه های مستطیلی یا Rectangular Array.
  • آرایه های نامنظم یا Jagged Array.

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

آموزش سی شارپ ادامه دارد

لینک قسمت اول : آموزش #C





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

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل CSS در HTML‏ را یاد گرفتیم , در حال با ادامه آموزش طراحی سایت همراه باشید:

یک اسکریپت قطعه ی کوچکی از برنامه است که می تواند به وب سایت شما تعامل اضافه کند. به عنوان مثال یک اسکریپت می تواند یک هشدار پاپ آپ مربوط به باکس پیغام تولید کند، یا یک منوی رو به پایین ایجاد کند. این اسکریپت توسط javascript یا VBScript نوشته می شود.
شما می توانید با استفاده از هر زبان اسکریپتی، کارکردهای متنوع کوچکی به نام گردانندگان رویداد بنویسید و سپس می توانید آن عملکردها را با استفاده از ویژگی های HTML اجرا کنید.
این روزها فقط javascript و چارچوب های متناظر با آن توسط بسیاری از توسعه دهندگان وب استفاده می شوند. VBScript حتی توسط برخی مرورگرها پشتیبانی هم نمی شود.
شما می توانید کد javascript را در یک فایل مجزا نگهداری کرده و سپس هرزمان که لازم بود آن را وارد کنید، یا می توانید قابلیت را در داخل خود داکیومنت HTML تعریف کنید. اجازه بدهید هر دو مورد را یکی یکی با مثال های مناسب بررسی کنیم.


جاوااسکریپت خارجی
اگر قصد دارید قابلیتی را تعریف کنید که در انواع داکیومنت های HTML استفاده می شود، بهتر است آن قابلیت را در یک فایل مجزای جاوااسکریپت حفظ کرده و آن فایل را وارد داکیومنت های HTML خود کنید. یک فایل جاوااسکریپت دارای ضمیمه هایی مانند js می باشد که با استفاده از برچسب< script>وارد فایل های HTML می شود.

مثال:

تصور کنید که با استفاده از جاوااسکریپت در script.js یک عملکرد کوچک را تعریف می کنیم که دارای کد زیر می باشد.

function Hello()

{

alert("Hello, World");

}


اکنون اجازه بدهید از فایل جاوااسکریپت خارجی بالا در داکیومنت HTML خود استفاده کنیم، مانند زیر



این مثال نتیجه ای را به دنبال خواهد داشت که می توانید با کلیک کردن برروی دکمه ی ارائه شده توسط این مثال آن را امتحان کنید.

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

نمونه یک







Javascript Internal Script





function Hello() {


alert("Hello, World");






این مثال نتیجه ای را به دنبال خواهد داشت که می توانید با کلیک کردن برروی دکمه ی ارائه شده توسط این مثال آن را امتحان کنید.

گردانندگان رویدادها(()EventHandler)
گردانندگان رویدادها عملکردهای تعریف شده ی ساده ای می باشند که می توانند برعلیه هر یک از عملکردهای ماوس یا صفحه کلید فراخوانده شوند. شما می توانید عملکرد خود را در یک گرداننده ی رویداد تعریف کنید که می تواند یک خط تا 1000 خط کد باشد.
در زیر مثالی را می بینید که چگونگی نگارش یک گرداننده ی رویداد را نشان می دهد. اجازه بدهید یک تیتر ساده ی ()EventHandler را در تیتر داکیومنت بنویسیم. هر زمان که کاربر ماوس را روی یک پاراگراف بیاورد، این عملکر را فرا خواهیم خواند.

نمونه دو






Event Handlers Example




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

 

 

آموزش کار با جدول

 

 

 

 

سلام با آموزش BootStrap 4 قسمت چهارم در خدمت شما هستیم .در قسمت قبل با آموزش رنگ در بوت استرپ آشنا شدیم.

آموزش کار با جدول (Table) در Bootstrap4:

آموزش ساخت جدول ساده در Bootstrap4:

یک جدول ساده در Bootstrap 4 دارای حاشیه درونی کم و جداکننده های افقی است. کلاس .table، استایل ساده ای همانند خروجی زیر را به جدول ها می دهد :

1مثال آموزش ساخت جدول ساده:
1<div class="container">
1<h2>Basic Table</h2>
1
1<p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>
1
1<table class="table">
1 <thead>
1 <tr>
1 <th>Firstname</th>
1 <th>Lastname</th>
1 <th>Email</th>
1 </tr>
1 </thead>
1 <tbody>
1 <tr>
1 <td>John</td>
1 <td>Doe</td>
1 <td>john@example.com</td>
1 </tr>
1 <tr>
1 <td>Mary</td>
1 <td>Moe</td>
1 <td>mary@example.com</td>
1 </tr>
1 <tr>
1 <td>July</td>
1 <td>Dooley</td>
1 <td>july@example.com</td>
1 </tr>
1 </tbody>
1</table>
12</div> 

آموزش ساخت ردیف های راه راه در جدول Bootstrap 4 :

دوره آموزش BootStrap 4

با اضافه کردن کلاس .table-striped به جدول در Bootstrap 4 ، ردیف های جدول به صورت یک در میان رنگی و سفید (راه راه) می شود. در کد مثال عملی زیر، نحوه استفاده از کلاس .table-striped به صورت عملی نشان داده شده است :

1مثال جدول Striped در بوت استرپ
1<div class="container">
1<h2>Striped Rows</h2>
1
1<p>The .table-striped class adds zebra-stripes to a table:</p>
1
1<table class="table table-striped">
1 <thead>
1 <tr>
1 <th>Firstname</th>
1 <th>Lastname</th>
1 <th>Email</th>
1 </tr>
1 </thead>
1 <tbody>
1 <tr>
1 <td>John</td>
1 <td>Doe</td>
1 <td>john@example.com</td>
1 </tr>
1 <tr>
1 <td>Mary</td>
1 <td>Moe</td>
1 <td>mary@example.com</td>
1 </tr>
1 <tr>
1 <td>July</td>
1 <td>Dooley</td>
1 <td>july@example.com</td>
1 </tr>
1 </tbody>
1</table>
1</div>

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

با اضافه کردن کلاس .table-bordered به جدول، خطوط حاشیه به دور کل جدول اضافه می شود. در مثال زیر، نحوه استفاده از این کلاس در عمل نشان داده شده است:

مثال جدول با خطوط حاشیه در بوت استرپ

1<div class="container">
1 <h2>Bordered Table</h2>
1 <p>The .table-bordered class adds borders on all sides of the table and the cells:</p> 
1 <table class="table table-bordered">
1 <thead>
1 <tr>
1 <th>Firstname</th>
1 <th>Lastname</th>
1 <th>Email</th>
1 </tr>
1 </thead>
1 <tbody>
1 <tr>
1 <td>John</td>
1 <td>Doe</td>
1 <td>john@example.com</td>
1 </tr>
1 <tr>
1 <td>Mary</td>
1 <td>Moe</td>
1 <td>mary@example.com</td>
1 </tr>
1 <tr>
1 <td>July</td>
1 <td>Dooley</td>
1 <td>july@example.com</td>
1 </tr>
1 </tbody>
1 </table>
1</div>

آموزش ساخت ردیف های hover در جدول:

دوره آموزش BootStrap 4

در صورت استفاده از کلاس .table-hover در یک جدول Bootstrap 4 ، در صورت عبور موس (hover) از روی هر ردیف جدول، رنگ پس زمینه آن به خاکستری تغییر می کند، هماننند کد مثال عملی زیر :

1مثال جدول hover در بوت استرپ
1<div class="container">
1<h2>Hover Rows</h2>
1
1<p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p>
1
1<table class="table table-hover">
1 <thead>
1 <tr>
1 <th>Firstname</th>
1 <th>Lastname</th>
1 <th>Email</th>
1 </tr>
1 </thead>
1 <tbody>
1 <tr>
1 <td>John</td>
1 <td>Doe</td>
1 <td>john@example.com</td>
1 </tr>
1 <tr>
1 <td>Mary</td>
1 <td>Moe</td>
1 <td>mary@example.com</td>
1 </tr>
1 <tr>
1 <td>July</td>
1 <td>Dooley</td>
1 <td>july@example.com</td>
1 </tr>
1 </tbody>
1</table>
1</div>

آموزش ساخت جدول سیاه و تیره در Bootstrap 4 :

با اضافه کردن کلاس .table-dark به جدول در Bootstrap 4، جدول با پس زمینه تیره، نوشته سفید و خطوط حاشیه روشن به صورت زیر نمایش داده خواهد شد :

مثال جدول دو رنگ در بوت استرپ

1<div class="container">
1 <h2>Black/Dark Table</h2>
1 <p>The .table-dark class adds a black background to the table:</p> 
1 <table class="table table-dark">
1 <thead>
1 <tr>
1 <th>Firstname</th>
1 <th>Lastname</th>
1 <th>Email</th>
1 </tr>
1 </thead>
1 <tbody>
1 <tr>
1 <td>John</td>
1 <td>Doe</td>
1 <td>john@example.com</td>
1 </tr>
1 <tr>
1 <td>Mary</td>
1 <td>Moe</td>
1 <td>mary@example.com</td>
1 </tr>
1 <tr>
1 <td>July</td>
1 <td>Dooley</td>
1 <td>july@example.com</td>
1 </tr>
1 </tbody>
1 </table>
1</div>

آموزش ساخت جدول تیره و راه راه در Bootstrap 4:

در صورت استفاده همزمان از کلاس های .table-darkو .table-striped، جدول با پس زمینه تیره، نوشته سفید و ردیف های یک در میان روشن تر و تیره تر، به صورت راه راه همانند کد زیر، نشان داده می شود :

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

1<div class="container">
1<h2>Dark Striped Table</h2>
1
1<p>Combine .table-dark and .table-striped to create a dark, striped table:</p>
1
1<table class="table table-dark table-striped">
1 <thead>
1 <tr>
1 <th>Firstname</th>
1 <th>Lastname</th>
1 <th>Email</th>
1 </tr>
1 </thead>
1 <tbody>
1 <tr>
1 <td>John</td>
1 <td>Doe</td>
1 <td>john@example.com</td>
1 </tr>
1 <tr>
1 <td>Mary</td>
1 <td>Moe</td>
1 <td>mary@example.com</td>
1 </tr>
1 <tr>
1 <td>July</td>
1 <td>Dooley</td>
1 <td>july@example.com</td>
1 </tr>
1 </tbody>
1</table>
1</div>

آموزش ساخت جدول تیره با قابلیت hover:

در صورت استفاده همزمان از کلاس های .table-hover و .table-dark جدول به صورت تیره نشان داده شده ولی در هنگام عبور موس از روی هر ردیف، رنگ ردیف کلی روشن تر می شود. همانند کد مثال عملی زیر:

مثال جدول تیره hover در bootstrap

1<p><div class="container"><br>
1 <h2>Hoverable Dark Table</h2><br>
1 <p>The .table-hover class adds a hover effect (grey background color) on table rows:</p> <br>
1 <table class="table table-dark table-hover"><br>
1 <thead><br>
1 <tr><br>
1 <th>Firstname</th><br>
1 <th>Lastname</th><br>
1 <th>Email</th><br>
1 </tr><br>
1 </thead><br>
1 <tbody><br>
1 <tr><br>
1 <td>John</td><br>
1 <td>Doe</td><br>
1 <td>john@example.com</td><br>
1 </tr><br>
1 <tr><br>
1 <td>Mary</td><br>
1 <td>Moe</td><br>
1 <td>mary@example.com</td><br>
1 </tr><br>
1 <tr><br>
1 <td>July</td><br>
1 <td>Dooley</td><br>
1 <td>july@example.com</td><br>
1 </tr><br>
1 </tbody><br>
1 </table><br>
1</div></p>

آموزش ساخت جدول بدون خطوط در Bootstrap 4 :

اضافه کردن کلاس .table-bordeless، باعث از بین رفتن خطوط درونی و خطوط حاشیه در جدول شده و به صورت ساده نشان داده خواهد شد. همانند کد مثال عملی زیر:

مثال جدول بدون خطوط حاشیه در بوت استرپ

1<div class="container">
1 <h2>Borderless Table</h2>
1 <p>The .table-borderless class removes borders from the table:</p> 
1 <table class="table table-borderless">
1 <thead>
1 <tr>
1 <th>Firstname</th>
1 <th>Lastname</th>
1 <th>Email</th>
1 </tr>
1 </thead>
1 <tbody>
1 <tr>
1 <td>John</td>
1 <td>Doe</td>
1 <td>john@example.com</td>
1 </tr>
1 <tr>
1 <td>Mary</td>
1 <td>Moe</td>
1 <td>mary@example.com</td>
1 </tr>
1 <tr>
1 <td>July</td>
1 <td>Dooley</td>
1 <td>july@example.com</td>
1 </tr>
1 </tbody>
1 </table>
1</div>

آموزش بوت استرپ ادامه دارد


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

 

 

سلام با آموزش BootStrap 4 قسمت سوم در خدمت شما هستیم .در قسمت قبل با آموزش مقدماتی سیستم گرید بندی (Grid System) و آموزش کار با متن (Text) و فن چاپ در بوت استرپ آشنا شدیم.

آموزش کار با رنگ در Bootstrap4:

چهارچوب کاری بوت استرپ 4 دارای تعدادی کلاس متنی است که با توجه به نام آن ها، رنگ های مفهومی و مرتبط به نوشته و سایر عناصر در صفحه می دهند.
برای مثال کلاس text-success داریم که به معنای متن موفق است و رنگ آن سبز است که به علامت و مفهوم موفقیت اشاره دارد.
کلاس های مختلف برای رنگ متن ها در Bootstrap 4 عبارتند از : .text-muted، .text-primary، .text-success، .text-info، .text-warning، .text-danger، .text-secondary، .text-while، .text-dark، .text-light و در نهایت کلاس .text-body ( که رنگ پیش فرض body صفحه خواهد شد که غالبا مشکی است) .
در کد مثال عملی زیر، نحوه استفاده از این کلاس ها برای تعیین رنگ نوشته در بوت استرپ 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 را در لینک ها نیز می توانید به کار ببرید. این کلاس ها معمولا رنگ تیره تری را در هنگام عبور موس از روی نوشته به آن ها می دهند.
در کد مثال زیر، نحوه استفاده عملی از کلاس های متنی رنگ درBootstrap 4 برای لینک ها و خروجی آن ها را نشان داده ایم :

مثال 2

 

 

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.

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

مثال 3

 

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 Color) در بوت استرپ 4:

دوره آموزش BootStrap 4

 

همانند کلاس های متنی بخش قبل، کلاس های متنی مخصوصی در بوت استرپ 4 داریم که رنگ های مخصوصی را به عنوان پس زمینه نوشته و سایر عناصر، تعیین می کند.
این کلاس ها عبارتند از : .bg-primary، .bg-success، .bg-info، .bg-warning، .bg-danger، .bg-secondary، .bg-dark و در نهایت .bg-light .

نکته :

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

 

 

آموزش بوت استرپ ادامه دارد


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

سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل کار با دکمه Button در Bootstrap4 آشنا شدیم.

حال با ادامه آموزش بوت استرپ 4 همراه باشید:

آموزش گروه بندی دکمه ها Button در Bootstrap 4:

چهارچوب کاری بوت استرپ 4، این امکان را فراهم کرده تا چندین کنترل را با هم در یک گروه قرار داده و مثلا آن ها را در یک خط کنار هم نشان دهید. همانند شکل زیر:

برای گروه بندی دکمه ها در Bootstrap 4، از یک تگ <div> با کلاس .btn-group استفاده کرده و Button ها را درون آن قرار می دهید، همانند کد مثال عملی زیر:

مثال 1

<div class="btn-group">

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

<button type="button" class="btn btn-primary">Sony</button>

</div>

نکته :

به جای تعیین کلاس سایز در هر دکمه گروه، کافی است برای بزرگ بودن دکمه ها کلاس .btn-group-lg و برای کوچک بودن آن ها، کلاس .btn-group-sm را به تگ <div> یا عنصر دربرگیرنده دکمه ها، اضافه کنید. در شکل زیر سایز انواع دکمه های بوت استرپ 4 را نشان داده ایم:

آموزش bootstrap

مثال عملی: در کد مثال عملی زیر، 3 دکمه (Button) را با استفاده از کلاس btn-group-lg تگ <div>، در سایز بزرگ دسته بندی کرده ایم:

مثال 2

<div class="btn-group btn-group-lg">

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

<button type="button" class="btn btn-primary">Sony</button>

</div>

آموزش گروه بندی عمودی دکمه ها در Bootstrap 4:

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

برای این منظور، بایستی مثل کد مثال عملی زیر، دکمه ها را درون یک تگ <div> با کلاس .btn-group-vertical قرار دهید :

مثال 3

<div class="btn-group-vertical">

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

<button type="button" class="btn btn-primary">Sony</button>

</div>

آموزش گروه بندی تو در تو (Nested) دکمه ها و ساخت منوی کشویی (DropDown) در بوت استرپ 4:

با گروه بندی تو در تو دکمه ها (Nested Buttons) در Bootstrap 4، می توانید منوهای کرکره ای یا DropDown ایجاد نمایید. در بخش های بعدی به آموزش کامل کار با DropDown در بوت استرپ خواهیم پرداخت.

 

مثال: در کد مثال عملی زیر، درون دکمه با عنوان Sony یک گروه دکمه قرار داده ایم که باعث شده تا این دکمه به صورت منوی کرکره ای در بیاید:

دوره آموزش BootStrap 4

 

مثال 4

<div class="btn-group">AppleSamsung

<div class="btn-group">Sony

<div class="dropdown-menu"><a class="dropdown-item"rel="nofollow" href="#">Tablet</a> <a class="dropdown-item"rel="nofollow" href="#">Smartphone</a></div>

</div>

</div>

با استفاده از یک تگ <span> با کلاس Caret می توانید بین عنوان منوی کرکره ای و فلش آن، کمی فاصله ایجاد کنید، همانند کد مثال و خروجی زیر:

<div class="btn-group">Sony

<div class="dropdown-menu"><a class="dropdown-item"rel="nofollow" href="#">Tablet</a> <a class="dropdown-item"rel="nofollow" href="#">Smartphone</a></div>

</div>

همچنین در صورت استفاده از کلاس .btn-group-vertical، می توانید منوی کرکره ای و سایر دکمه ها را به صورت عمودی نشان دهید، همانند کد مثال زیر:

مثال 6

<div class="btn-group-vertical">AppleSamsung

<div class="btn-group">Sony

<div class="dropdown-menu"><a class="dropdown-item"rel="nofollow" href="#">Tablet</a> <a class="dropdown-item"rel="nofollow" href="#">Smartphone</a></div>

</div>

</div>

قرار دادن دو گروه دکمه در کنار هم در Bootstrap 4:

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

مثال 7

<div class="btn-group">

<button type="button" class="btn btn-primary">Apple</button>

<button type="button" class="btn btn-primary">Samsung</button>

<button type="button" class="btn btn-primary">Sony</button>

</div>

 

<div class="btn-group">

<button type="button" class="btn btn-primary">BMW</button>

<button type="button" class="btn btn-primary">Mercedes</button>

<button type="button" class="btn btn-primary">Volvo</button>

</div>

آموزش کار با نشان برجسته Badges در Bootstrap 4

از امکان برجسته یا به انگلیسی Badges در بوت استرپ 4، می توان برای اضافه کردن اطلاعات بیشتر به یک محتوا استفاده کرد.

برای مثال می توانید از یک عنصر با کلاس .badges به همراه یک عنصر دیگر که دارای کلاس های رنگی متنی (مثلا کلاس .badges-secondary) است مثل یک المنت <span> برای ایجاد یک نشان مستطیل رنگی، استفاده کنید.

توجه داشته باشید که چنانچه عنصر badge درون یک عنصر مادر یا parent باشد، اندازه خود را بر حسب بزرگی یا کوچکی آن ، تنظیم می کند.

مثال عملی: در کد مثال عملی زیر، نحوه ایجاد یک عنصر badge را درون تگ های عنوان <h1> تا <h6> نشان داده ایم:

مثال 1

<h1>Example heading New</h1>

<h2>Example heading New</h2>

<h3>Example heading New</h3>

<h4>Example heading New</h4>

<h5>Example heading New</h5>

<h6>Example heading New</h6>

آموزش استفاده از کلاس های متنی رنگی برای badge:

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

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

دوره آموزش BootStrap 4

مثال 2

<span class="badge badge-primary">Primary</span>

<span class="badge badge-secondary">Secondary</span>

<span class="badge badge-success">Success</span>

<span class="badge badge-danger">Danger</span>

<span class="badge badge-warning">Warning</span>

<span class="badge badge-info">Info</span>

<span class="badge badge-light">Light</span>

<span class="badge badge-dark">Dark</span>

آموزش ساخت نشانه های گرد (Pill Badges) در بوت استرپ 4 :

از کلاس .badges-pill می توانید برای گرد کردن گوشه های عنصر badge در Bootstrap 4 استفاده کنید.

مثال: در کد مثال عملی زیر، نحوه استفاده از کلاس .badge-pill و ساخت Pill Badge را نشان داده ایم :

<span class="badge badge-pill badge-primary">Primary</span>

<span class="badge badge-pill badge-secondary">Secondary</span>

<span class="badge badge-pill badge-success">Success</span>

<span class="badge badge-pill badge-danger">Danger</span>

<span class="badge badge-pill badge-warning">Warning</span>

<span class="badge badge-pill badge-info">Info</span>

<span class="badge badge-pill badge-light">Light</span>

<span class="badge badge-pill badge-dark">Dark</span>

 

آموزش استفاده از Badge درون یک عنصر دیگر :

در کد مثال عملی زیر، از یک عنصر Badge در یک دکمه استفاده کرده ایم:

مثال 4

<p>Messages 4</p>

 

دوره آموزش BootStrap 4 ادامه دارد




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


آموزش BootStrap 4



سلام
 با
آموزش Bootstrap 4
در خدمت شما هستیم در
قسمت قبل با کار با عکس و تصویر , jumbotron و کار با کادر هشدار Alert Box در Bootstrap4 آشنا شدیم.

آموزش کار با دکمه Button در Bootstrap 4:
چهارچوب کاری بوت استرپ 4، چندین استایل و رنگ مختلف دکمه دارد که از هر کدام می توانید برای منظور خاصی استفاده کنید.مثلا یک دکمه برای عملیات تأیید مناسب است و دکمه دیگر برای اعلام خطر به کاربر. در شکل زیر، انواع مختلف دکمه های Bootstrap 4 با ظاهرهای گوناگون را نشان داده ایم:
 
مثال: در کد مثال عملی زیر، نحوه ایجاد انواع مختلف دکمه های (Button) بوت استرپ 4 به همراه خروجی آن را نشان داده ایم:
مثال:
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
کلاس های ویژه دکمه (Button) در بوت استرپ را می توانید به تگ های لینک <a>، دکمه <button> و کادرهای ورودی <input> اعمال کنید. در کد مثال عملی زیر، نحوه انجام این کار در تگ های مختلف در خروجی آن، نشان داده شده است :
مثال 2
<arel="nofollow" href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
راهنمایی : چرا در خاصیت آدرس برخی لینک ها (href) مقدار # قرار می دهیم؟
چنانچه برای یک لینک آدرس مشخصی وجود ندارد و نمی خواهید کاربر با کلیک بر روی آن، خطای یافت نشدن صفحه (Error 404) را مشاهده نماید، می توانید یک کاراکتر # را در خاصیت آدرس یاrel="nofollow" href لینک قرار دهید. در مدل های طراحی حرفه ای تر، بهتر است اینگونه لینک ها را به صفحه جستو سایت، هدایت نمایید.
آموزش ایجاد دکمه های بی رنگ outline Button در Bootstrap 4:
علاوه بر دکمه های رنگی که در بخش قبل اشاره کردیم، بوت استرپ 4 ، هشت مدل دکمه بدون رنگ با خطوط حاشیه و نوشته رنگی را نیز معرفی کرده است، که در شکل زیر مشاهده می کنید:
 
مثال: در کد مثال عملی زیر، نحوه ایجاد دکمه های بی رنگ (outline Button) در بوت استرپ را نشان داده ایم:
مثال 3
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
آموزش تعیین سایز دکمه Button در Bootstrap 4:
با استفاده از 3 کلاس .btn-lg(دکمه بزرگ)، .btn(اندازه عادی) و btn-sm(دکمه کوچک)، می توانید سایز دکمه ها در Bootstrap 4 را تعیین نمایید، همانند شکل زیر:
 
کد مثال عملی زیر، نحوه استفاده از کلاس های مختلف اندازه دکمه بوت استرپ را نشان داده است :
مثال 4
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
آموزش ایجاد دکمه تمام عرض در بوت استرپ:
در صورت اضافه کردن کلاس .btn-block، دکمه به صورت تمام عرض نشان داده شده و کل عرض عنصر دربرگیرنده خود یا صفحه را اشغال می کند. طرز استفاده از این کلاس و خروجی آن را در کد مثال عملی زیر نشان داده ایم:
 
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
آموزش ایجاد دکمه فعال/غیر فعال در بوت استرپ 4 :
در Bootstrap 4 می توانید یک دکمه را به حالت فعال (انگار که کلیک شده) و یا غیر فعال (غیر قابل کلیک کردن) در بیاورید، همانند دو دکمه زیر :
 
مثال 6
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled Primary</button>
<arel="nofollow" href="#" class="btn btn-primary disabled">Disabled Link</a>
کلاس .active، دکمه مورد نظر را به صورت فعال (انگار که کلیک شده است) نشان داده و کلاس .disabled آن را غیر فعال می کند به طوری که کاربر نمی تواند روی آن کلیک نماید. دقت داشته باشید که تگ <a> از خاصیت disabled در HTML پشتیبانی نمی کند بنابراین استفاده از کلاس disabled. در آن، فقط لینک را به صورت ظاهری غیر فعال نشان داده و در عمل، قابل کلیک کردن خواهد بود.
آموزش ایجاد دکمه های چرخنده (spinrer Button) در Bootstrap 4:
در بوت استرپ 4 ، می توانید آی های چرخنده (Spinrer) را به یک دکمه اضافه کنید، برای دریافت اطلاعات بیشتر به بخش کار با چرخنده در Bootstrap 4 بروید. شکل زیر، انواع دکمه های Bootstrap 4 را با دکمه چرخنده نشان می دهد :
 
در کد مثال عملی زیر، نحوه استفاده از کلاس چرخنده Spinrer در یک دکمه بوت استرپ و خروجی آن را نشان داده ایم:
مثال 7
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading
</button>



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

سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل با کار با جداول در Bootstrap 4 آشنا شدیم.

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

  • عکس با گوشه های گرد
  • عکس کاملا گرد
  • عکس با حالت نمایش کوچک thumbnail

 

 

آموزش ایجاد تصویر با گوشه های گرد در Bootstrap 4 :

به کار بردن کلاس rounded در تگ <img> باعث می شود عکس با گوشه های گرد نمایش داده شود، همانند کد و مثال عملی زیر :

انواع نمایش عکس در بوت استرپ 4

1<p><img alt="Cinque Terre" class="rounded" src="cinqueterre.jpg"></p>


آموزش نمایش عکس به صورت گرد در Bootstrap 4:

کلاس rounded-circle در Bootstrap 4 باعث می شود تا عکس در تصویر (تگ <img> ) به صورت تمام گرد و دایره نمایش داده شود. همانند کد مثال عملی زیر:

مثال حالت Circle

1<p><img alt="Cinque Terre" class="rounded-circle" src="cinqueterre.jpg"></p>

آموزش نمایش عکس به صورت بند انگشتی یا thumbnail:

به کار بردن کلاس .img-thumbnail در تگ <img>، باعث می شود تا عکس به صورت پیش نمایش، کوچکتر و بند انگشتی همراه با خطوط حاشیه ای باریک نمایش داده شود. همانند کد مثال عملی زیر:

مثال حالت Thumbnail

1<p><img alt="Cinque Terre" class="img-thumbnail" src="cinqueterre.jpg"></p>

دوره آموزش BootStrap 4

آموزش تنظیم موقعیت قرارگیری عکس در Bootstrap 4:

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

مثال تراز کردن عکس در بوت استرپ

1<p><img class="float-left" src="paris.jpg"> <img class="float-right" src="paris.jpg"></p>

از طرف دیگر، با به کار بردن کلاس های .mx-auto (معادل حالت margin:auto) و کلاس .d-block معادل (خاصیت display : block) در Bootstrap 4، می توان یک عکس را در وسط صفحه یا عنصر مادر قرار داد، همانند کد مثال عملی زیر:

مثال حالت Center

1<p><img class="d-block mx-auto" src="paris.jpg"></p>

عکس ها دارای سایزهای مختلفی هستند و صفحه نمایش ها هم عرض و طول های گوناگونی دارند. عکس های واکنش گرا یا Responsive Image به طور خودکار اندازه خود را برای بهترین حالت نمایش در صفحه، بزرگ و کوچک کرده و تنظیم می کنند.
با اضافه کردن کلاس .img-fluid در Bootstrap به تگ <img>، یک عکس را واکنش گرا می کنید. عکس هدف اندازه خود را بر حسب اندازه عنصر دربرگیرنده اش تنظیم کرده و نمایش می دهد.
به کار بردن کلاس .img-fluid برای یک عکس، خواص max-width:100% و height:auto را به آن می دهد.
در کد مثال عملی زیر، از کلاس .img-fluid برای Responsive کردن عکس استفاده کرده ایم. همانطور که در خروجی مشاهده می کنید، با بزرگ و کوچک کردن صفحه، عکس نیز تغییر کرده و بزرگ و کوچک می شود.

مثال ریسپانسیو کردن عکس

1<img alt="Chania" class="img-fluid" src="img_chania.jpg">

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

یک jumbotron در Bootstrap 4، یک جعبه بزرگ خاکستری رنگ ایجاد می کند که می توانید برای نمایش اطلاعات مهم و جلب توجه کاربر به نوشته، از آن استفاده کنید.
jumbotron در Bootstrap 4، معمولا عرض کل عنصر دربرگیرنده خود را اشغال می کند، پس زمینه ای خاکستری داشته و نوشته های آن گرد است.

نکته :

درون یک jumbotron می توانید تقریبا هر تگ معتبر HTML ای قرار داده و از المنت های Bootstrap با کلاس مختلف نیز استفاده کنید.

برای ایجاد یک jumbotron بایستی از تگ <div> با کلاس .jumbotron استفاده نمایید، همانند کد مثال عملی زیر:

مثال jumbotron

1<div class="jumbotron">
1<h1>Bootstrap Tutorial</h1>
1
1<p>Bootstrap is the most popular HTML, CSS.</p>
1</div>

آموزش ایجاد یک jumbotron تمام عرض در Bootstrap 4:

اگر می خواهید jumbotron ایجاد شده، تمامی عرض صفحه یا عنصر مادر خود را اشغال کرده و در گوشه های آن گرد نباشد، بایستی از کلاس .jumbotron-fluid با یک عنصر داخلی (مثل تگ) با کلاس .container یا .container-fluid استفاده نمایید. همانند کد مثال عملی زیر:

مثال jumbotron تمام عرض

1<div class="jumbotron jumbotron-fluid">
1 <div class="container">
1 <h1>Bootstrap Tutorial</h1>
1 <p>Bootstrap is the most popular HTML, CSS.</p>
1 </div>
1</div>

آموزش کار با کادر هشدار Alert Box در Bootstrap4:

چهارچوب کاری بوت استرپ4، روش بسیار ساده ای برای ایجاد کادر هشدار یا Alert Box فراهم کرده است.
کادر هشدار Alert توسط یک تگ <div> با کلاس .alert ایجاد می شود و از کلاس های متنی کمکی می توانید برای تعیین رنگ نوشته و پس زمینه آن نیز استفاده کنید. این کلاس ها عبارتند از .alert-success، .alert-info، .alert-warning، .alert-danger، .alert-primary، .alert-secondary، .alert-light و .alert-dark که هر کدام مفهوم خاصی را به کاربر نشان می دهند.
در مثال های عملی زیر، انواع کادرهای هشدار با رنگ های مختلف به همراه توضیح و کاربرد هر کدام را نشان داده ایم:

 

 

موفقیت Success : کادر هشدار بیان گر عمل مثبت یا انجام موفقیت آمیز عملیات است.

اطلاع Info : کادر هشدار نشان دهنده یک عمل عادی یا اطلاعات کم اهمیت تر است.

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

خطر Danger : این کادر بیان گر عمل منفی یا انجام یک عملیات خطرناک است.

مهم Primary : کادر هشدار نشان دهنده یک عمل مهم و قابل توجه است.

رده 2 secondary : در این حالت کادر هشدار اعلام می کند یک عمل با درجه اهمیت کمتر رخ داده است.

تیره Dark : یک کادر هشدار با پس زمینه خاکستری یا تیره نشان داده می شود.

مثال عملی: در کد زیر، یک کادر هشدار را با کلاس های .alert و .alert-success ایجاد کرده و خروجی آن را نشان داده ایم:

مثال 1

1<div class="alert alert-success"><strong>Success!</strong> You should <a class="alert-link"rel="nofollow" href="#">read this message</a>.</div>

آموزش ایجاد لینک Link درون کادر هشدار بوت استرپ 4 :

می توانید درون کادر هشداری که در Bootstrap 4 ایجاد کرده ایم، یک تگ لینک یا <a> با کلاس .alert-link قرار دهید. برنامه لینک را به صورت توپر و با رنگی مشابه رنگ نوشته کادر هشدار نشان می دهد.
در مثال های زیر، انواع حالت لینک در کادرهای هشدار را نشان داده ایم:

 

 

مثال عملی: کد مثال زیر نحوه قرار دادن یک لینک یا تگ <a> را درون یک کادر هشدار نشان داده است:

مثال 2

1<div class="alert alert-success alert-dismissible">×<strong>Success!</strong> Indicates a successful or positive action.</div>

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

برای این که کادر هشدار ایجاد شده، قابلیت بسته شدن داشته باشد، بایستی کلاس .alert-dismissible را به تگ Alert Box اضافه کنید.
سپس یک لینک یا دکمه (Button) که می خواهید با کلیک بر روی آن، کادر هشدار بسته شده را با کلاس class=”close” و خاصیت data-dismiss=”alert” درون عنصر اصلی کادر هشدار قرار می دهید، همانند کد مثال عملی زیر:

مثال 3

1<div class="alert alert-success alert-dismissible">
1 <button type="button" class="close" data-dismiss="alert">×</button>
1 <strong>Success!</strong> Indicates a successful or positive action.
1</div>

موجودیت × یا (x) یک HTML Entity یا خاصیت ذاتی HTML است که بیشتر به جای حرف X برای ایجاد یک آی یا دکمه بستن، از آن استفاده می شود.

اضافه کردن جلوه های نمایشی به کادر هشدار در Bootstrap 4:

با اضافه کردن کلاس های .fade و .show کادر هشدار با جلوه نمایشی و به صورت محو شدن یا ظاهر شدن تدریجی، نمایش داده می شود. نحوه استفاده از این دو کلاس و خروجی آن در مثال زیر نشان داده شده است:

مثال 4

1<div class="alert alert-danger alert-dismissible fade show">

برای دریافت اطلاعات بیشتر راجع به کادرهای هشدار در بوت استرپ 4 ، به مرجع آموزش کادر هشدار Alert Box در Bootstrap 4 بروید.

 

1</div>

آموزش bootstrap 4 ادامه دارد





آموزش برنامه نویسی
سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل کار با نوار پیشرفت در Bootstrap4 آشنا شدیم.
حال با ادامه آموزش بوت استرپ 4 همراه باشید:
آموزش ایجاد چرخنده Sppiner در Bootstrap 4:
برای ایجاد یک شکلک چرخنده (Sppiner) یا آی لود (loader) در بوت استرپ 4، از یک المنت با کلاس spinner-border، استفاده کنید.
مثال: در کد مثال زیر، به وسیله یک تگ <div> با کلاس .spinner-boarder، یک چرخنده در حال لود ایجاد کرده ایم:
 
مثال 1
<div class="spinner-border"></div>
نکته :
رنگ پیش فرض چرخنده (Spiner) در بوت استرپ 4، مشکی (Black) است.
آموزش ساخت چرخنده Spiner رنگی در بوت استرپ 4:
با استفاده از کلاس های رنگی متنی ویژه بوت استرپ 4 (سری- text)، همانند کد مثال عملی زیر، می توانید چرخنده Spiner با رنگ های مختلف و مفهومی ایجاد کنید :
<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
آموزش ساخت چرخنده های بزرگ شونده Growing Spinner:
اگر از کلاس .spinner-grow به جای .spinner-border استفاده کنید، چرخنده یا Spiner ایجاد شده، به جای چرخیدن، از سایز کوچک شروع شده و بزرگ می شود. در کد مثال عملی زیر، نحوه استفاده از این کلاس و خروجی آن را نشان داده ایم:
مثال 3
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
آموزش ساخت دکمه با چرخنده های متحرک در بوت استرپ 4:
می توانید یک المنت با کلاس .spinner-border یا .spinner-grow را درون یک دکمه یا button قرار داده و آن را به یک دکمه لود تبدیل کنید. در این حالت می توانید برای دکمه متن نیز تعیین کرده یا خالی بگذارید.
مثال: در کد مثال عملی زیر، نحوه ایجاد انواع دکمه با چرخنده های متحرک در Bootstrap 4 را نشان داده ایم:
مثال 5
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading
</button>
<button class="btn btn-primary" disabled="">
<span class="spinner-border spinner-border-sm"></span>
Loading
</button>
<button class="btn btn-primary" disabled="">
<span class="spinner-grow spinner-grow-sm"></span>
Loading
</button>
آموزش صفحه بندی Pagination در Bootstrap 4:
اگر سایتی دارید که دارای تعدادی زیادی صفحه است، حتما نیاز پیدا خواهید کرد صفحه بندی یا Pagination ی همانند زیر را برای پیمایش صفحات سایت ایجاد نمایید :

 

 

 

برای ایجاد یک صفحه بندی Pagination ساده در صفحات وب سایت تان با ستتفاده از بوت استرپ 4، ابتدا یک تگ <ul> با کلاس Pagination. ایجاد نمایید. سپس به هر یک از <li> درون لیست، کلاس .page-item داده و برای لینک ها هم (تگ <a> یا دکمه)، کلاس .page-link تعیین کنید.
در کد مثال عملی زیر، نحوه ایجاد یک صفحه بندی Pagination کامل در Bootstrap 4 را نشان داده ایم:
مثال 1
<ul class="pagination">
<li class="page-item"><a class="page-link"rel="nofollow" href="#">Previous</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">1</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">2</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">3</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">Next</a></li>
</ul>
آموزش فعال کردن شماره صفحه جاری (Active State) در Pagination:
در صورت اعمال کلاس .active به یکی از آیتم های <li> لیست <ul> در صفحه بندی Bootstrap 4، شماره آن صفحه (که صفحه جاری خواهد بود) به صورت رنگی و توپر نشان داده می شود :

 

 

 

مثال : در کد مثال زیر، صفحه 2 را با استفاده از کلاس .active، به عنوان صفحه جاری نشان داده ایم :
مثال 2
<ul class="pagination">
<li class="page-item"><a class="page-link"rel="nofollow" href="#">Previous</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">1</a></li>
<li class="page-item active"><a class="page-link"rel="nofollow" href="#">2</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">3</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">Next</a></li>
</ul>
آموزش غیر فعال کردن لینک یک صفحه در صفحه بندی Pagination:
در صورت اعمال کلاس .disabled به لینک یک صفحه در صفحه بندی Bootstrap 4، لینک آن صفحه به صورت غیر فعال نشان داده شده و کاربر نمی تواند بر رویش کلیک نماید :

 

 

 

 
مثال : در کد مثال زیر، با استفاده از کلاس .disabled، لینک صفحه قبل (Previous) را غیر فعال کرده ایم:
مثال 3
<ul class="pagination">
<li class="page-item disabled"><a class="page-link"rel="nofollow" href="#">Previous</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">1</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">2</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">3</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">Next</a></li>
</ul>
آموزش تعیین سایز دکمه های صفحه بندی Pagination:
اندازه دکمه ها که در مثال های صفحه بندی Pagination Bootstrap 4، تاکنون در این درس مشاهده کردید، سایز متوسط یا پیش فرض بوت استرپ 4 است.
می توانید سایز بزرگ تر یا کوچک تر از حالت پیش فرض نیز برای دکمه ها تعیین کنید :

 

 

 

با اعمال کلاس .pagination-lg به تگ مادر صفحه بندی (<ul>)، دکمه ها به صورت بزرگ تر و با کلاس .pagination-sm، دکمه های به صورت کوچکتر نشان داده خواهند شد :
مثال 4
<p>Large:</p>
<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link"rel="nofollow" href="#">Previous</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">1</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">2</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">3</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">Next</a></li>
</ul>
<p>Default:</p>
<ul class="pagination">
<li class="page-item"><a class="page-link"rel="nofollow" href="#">Previous</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">1</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">2</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">3</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">Next</a></li>
</ul>
<p>Small:</p>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link"rel="nofollow" href="#">Previous</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">1</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">2</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">3</a></li>
<li class="page-item"><a class="page-link"rel="nofollow" href="#">Next</a></li>
</ul>
آموزش تعیین جهت قرارگیری صفحه بندی Pagination Alignment:
به صورت پیش فرض در بوت استرپ 4، دکمه های صفحه بندی Pagination از سمت چپ تراز می شوند اما از کلاس های ویژه utility در Bootstrap 4 برای وسط چین یا راست چین کردن آن ها می توانید استفاده کنید :

 

 

 

مثال: در کد مثال عملی زیر، از کلاس ویژه کاربردی بوت استرپ 4 (utility Classess) استفاده کرده و جهت چینش در منوی صفحه بندی دوم و سوم را به دلخواه تغییر داده ایم :
مثال 5
<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px 0">
<li class="page-item">.</li>
</ul>
<!-- Center-aligned -->
<ul class="pagination justify-content-center" style="margin:20px 0">
<li class="page-item">.</li>
</ul>
<!-- Right-aligned -->
<ul class="pagination justify-content-end" style="margin:20px 0">
<li class="page-item">.</li>
</ul>
راهنمایی :
در بخش آموزش کلاس های کاربردی بوت استرپ 4 به آموزش کار با Bootstrap Utility Class پرداخته شده است.
آموزش ایجاد صفحه بندی خطی Breadcrumb Pagination:
مدل دیگه ای از صفحه بندی و ایجاد منوی صفحات در Bootstrap 4، منوی خطی یا نوار پیمایش افقی (به انگلیسی Breadcrumb) است. در این مدل منو، کل مسیر طی شد تا صفحه جاری نمایش داده می شود :

 

 

 

مثال : برای ایجاد یک منوی خطی Breadcrumb در بوت استرپ 4، بایستی کلاس .breadcrumb را به تگ <ul> بدهید، پس برای هریک از آیتم های <li> لیست <ul>، کلاس .breadcrumb-item را تعیین کنید :
مثال 6
<ul class="breadcrumb">
<li class="breadcrumb-item"><arel="nofollow" href="#">Photos</a></li>
<li class="breadcrumb-item"><arel="nofollow" href="#">Summer 2017</a></li>
<li class="breadcrumb-item"><arel="nofollow" href="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>
</ul>
دوره آموزش بوت استرپ 4 ادامه دارد

آموزش برنامه نویسی
سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبلگروه بندی دکمه ها Button و کار با نشان برجسته Badges در Bootstrap4 آشنا شدیم.
حال با ادامه آموزش بوت استرپ 4 همراه باشید:
آموزش کار با نوار پیشرفت Progress Bar در Bootstrap 4
از نوار پیشرفت یا Progress Bar می توان برای نشان دادن میزان پیشرفت یک عملیات یا حجم انجام شده یک پروسه توسط کاربر، استفاده کرد.

 

 

 

برای ایجاد یک نوار پیشرفت یا Progress Bar در Bootstrap 4، کلاس .progress را به عنصر مادر یا Container و کلاس .progress-bar را به عنصر یا عناصر فرزند آن، اعمال کنید.
همچنین از خاصیت width نوار پیشرفت، از که 0 تا 100 درصد تعیین می شود، می توانید برای نمایش میزان کار، استفاده کنید.
نکته :
توجه داشته باشید که خاصیت width در نوار پیشرفت Bootstrap 4 را هم می توانید به صورت ثابت یا دستی و هم به صورت خودکار و لحظه ای تنظیم نمایید.
مثال: در کد مثال عملی زیر، یک نوار پیشرفت یا Progress Bar ساده با حجم 70 درصد پیشرفت را در بوت استرپ 4 ، ایجاد کرده ایم:
 
مثال 1
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
آموزش تنظیم ارتفاع Progress Bar در Bootstrap 4:

 

 

 

ارتفاع نوار پیشرفت یا Progress Bar به صورت پیش فرض در بوت استرپ 4 ، مقدار 16 پیکسل است. می توانید از خاصیت ارتفاع CSS height برای تغییر آن به میزان دلخواه استفاده کنید. فقط توجه داشته باشید که مقدار خاصیت ارتفاع (height) در عنصر دربرگیرنده یا Container و عنصر یا عناصر فرزند، بایستی به یک اندازه باشد.
مثال عملی: در کد مثال عملی زیر، یک نوار پیشرفت Progress Bar با ارتفاع 20 پیکسل را ایجاد کرده ایم:
مثال 2
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"> </div>
</div>
آموزش نمایش متن در Progress Bar بوت استرپ 4 :

 

 

 

می توانید با قرار دادن متن درون عنصر فرزند آیتم نوار پیشرفت در Bootstrap 4 میزان پیشرفت کار را به صورت متنی نیز نشان دهید.
دقت نمایید که این متن را می توانید با استفاده از جاوا اسکریپت یا jQuery به صورت داینامیک نیز تغییر دهید.
مثال: در کد مثال عملی زیر، با قرار دادن عدد 70% درون تگ <div> عنصر فرزند نوار پیشرفت، میزان حجم جلورفت کار را به صورت متنی نیز نشان داده ایم:
مثال 3
 
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
آموزش ایجاد نوار پیشرفت رنگی در Bootstrap 4:

 

 

 

در Bootstrap 4 به صورت پیش فرض رنگ نوار پیشرفت آبی (کلاس primary) است. می توانید از کلاس های متنی رنگی بوت استرپ 4 ، که در بخش های گذشته آموزش دادیم، برای تعیین رنگ دلخواه Progress Bar استفاده کنید.
مثال: در کد مثال عملی زیر، با استفاده از کلاس های متنی رنگی Bootstrap 4 رنگ پس زمینه (برای مثال .bg-success برای رنگ سبز)، نوار پیمایش ها را تغییر داده ایم:
مثال 4
 
<!-- Blue -->
<div class="progress">
<div class="progress-bar" style="width:10%"></div>
</div>
<!-- Green -->
<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div>
<!-- Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<!-- Red -->
<div class="progress">
<div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<!-- White -->
<div class="progress border">
<div class="progress-bar bg-white" style="width:60%"></div>
</div>
<!-- Grey -->
<div class="progress">
<div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- Light Grey -->
<div class="progress border">
<div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
ایجاد نوار پیشرفت راه راه Striped Progress Bar در بوت استرپ 4 :

 

 

 

از کلاس ویژه .progress-bar-striped می توانید جهت راه راه کردن بخش رنگی نوار پیشرفت در Bootstrap 4 استفاده کنید:
مثال 5
 
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
نکته :
کلاس .progress-bar-striped بایستی به عنصر یا عناصر فرزند نوار پیشرفت بوت استرپ 4 ، اضافه شوند نه عنصر مادر یا Container.
 
آموزش ایجاد نوار پیشرفت متحرک Animated Progress Bar:
در صورت اضافه کردن کلاس .progress-bar-animated به عنصر سازنده نوار پیشرفت و استفاده همزمان از کلاس .progress-bar-strped، خط های راه راه قسمت پر شده در نوار پیشرفت، حالت متحرک و پویا پیدا می کنند. برای درک بهتر مثال عملی زیر را مشاهده کنید :
مثال 6
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
آموزش ایجاد نوار پیمایش چندگانه Multiple Progress Bar:
می توانید با قرار دادن چندین المنت با کلاس .progress-bar درون یک المنت مادر با کلاس .progress که هر کدام از عناصر فرزند درصدی بین 0 تا 100 دارند، یک نوار پیمایش چندگانه و با رنگ های مختلف (با استفاده از کلاس های رنگی متنی ویژه Bootstrap 4)، همانند عکس زیر ایجاد نمایید :

 

 

 

<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>
آموزش بوت استرپ ادامه دارد

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

سلام با قسمت سوم آموزش جاوا JAVA در خدمت شما عزیزان هستم

در قسمت قبل از آموزش تصویری برنامه نویسی جاوا با متغیرهای جاوا آشنا شدیم

حال با ادامه آموزش جاوا همراه باشید:

آموزش متغیر Double

متغیر double می تواند اعداد خیلی بزرگ (یا کوچک) را در خود داشته باشد. حداکثر و حداقل مقادیر 17 می باشد که با 307 صفر دنبال می شود.

متغیر double برای نگهداری مقادیر ممیزی شناور نیز استفاده می شود. یک مقدار ممیزی شناور عددی مانند 8.7، 12.5، 10.1 و غیره می باشد. به عبارت دیگر این عدد ممیزی در انتها دارد. اگر سعی کنید یک مقدار ممیزی را در یک متغیر int ذخیره کنید، NetBeans زیر کد پیش فرض را خط خواهد کشید. اگر سعی کنید برنامه را اجرا کنید، کامپایلر یک پیغام خطا ارائه می دهد. اجازه بدهید با متغیرهای double کمی تمرین کنیم.

از بخش int را به double تغییر دهید. بنابراین این مورد را نیز تغییر دهید:

int first_number, second_number, answer;

به خط زیر:

double first_number, second_number, answer;

اکنون مقادیر ذخیره شده را تغییر دهید:

first_number = 10.5;

second_number = 20.8;

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

 

 

برنامه ی خود را مجددا اجرا کنید، پنجره ی خروجی باید مانند زیر باشد:

 

 

تغییر مقادیر ذخیره شده در first_number و second_number را امتحان کنید. از هر مقداری که تمایل دارید، استفاده کنید. برنامه ی خود را اجرا کرده و نتیجه را مشاهده کنید.

در بخش بعدی در مورد دو نوع متغیر دیگر جاوا فرا خواهید گرفت: short و float.

 

آموزش Java - آموزش متغیرهای Float و Short

دو نوع متغیر دیگری که می توانید استفاده کنید short و float می باشند. متغیر short برای ذخیره ی اعداد کوچکتر استفاده می شود و دامنه ی آن بین منفی 32768 و مثبت 32767 می باشد. به جای استفاده از int در کد خود مانند صفحات قبل، می توانستیم از متغیر short استفاده کنیم. اگر مطمئن هستید که متغیری را که مخواهید ذخیره کنید، بیشتر از 32767 و کمتر از -32768 نیست، باید فقط از متغیر short استفاده کنید.

متغیر double را که استفاده کردیم، می تواند اعداد ممیزی شناور واقعا بزرگ را ذخیره کند. به جای استفاهد از double، متغیر float نیز می تواند استفاده شود. هنگام ذخیره ی یک مقدار در یک متغیر float، نیاز به حرف f در انتهای آن دارید. مانند مورد زیر:

float first_number, second_number, answer;‎

first_number = 10.5f;

second_number = 20.8f;‎

بنابراین حرف f بعد از عدد اما قبل از نقطه ویرگول در انتهای خط قرار می گیرد. برای مشاهده ی تفاوت بین float و double مورد زیر را بررسی کنید.

حساب ساده ( Simple Arithmetic) با متغیرهایی که استفاده کرده اید، می توانید از نمادهای زیر نیز برای انجام محاسبت استفاده کنید: + (علامت جمع) _ (علامت منفی) *(علامت ضرب که یک ستاره است.) / (علامت تقسیم که یک اسلش رو به جلو می باشد.) این تمرین را امتحان کنید: علامت جمع را که برای اضافه کردن first_number و second_numberاستفاده می شود، حذف کنید. آن را با نمادهای بالا جایگزین کنید، ابتدا علامت منفی، سپس علامت ضرب و در نهایت علامت تقسیم. پاسخ به مورد آخر، تقسیم، باید یک عدد واقعا بزرگ به شما ارائه دهد. عددی که باید برای تقسیم ارائه دهید 0.5048076923076923 می باشد. این به این دلیل است که شما از متغیر نوع double استفاده کرده اید. به هرحال double را به float تغییر دهید. سپس حرف f را به انتهای اعداد اضافه کنید. بنابراین کد شما باید مانند زیر باشد:

 

 

وقتی که کد بالا را اجرا می کنید، اکنون پاسخ 0.5048077 می باشد. جاوا 6 عدد اول بعد از ممیز را گرفته و سپس بقیه را گرد کرده است. ( double یک عدد 64 بیتی است و float فقط 32 بیتی می باشد.)

در بخش بعد در مورد اهمیت Operator Precedence فرا خواهید گرفت.

آموزش Java - آموزش اولویت عمگرها

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

first_number = 100;

second_number = 75;

third_number = 25;

answer = first_number - second_number + third_number;

اگر محاسبه را از سمت چپ به راست انجام داده باشید، 75-100 می شود که پاسخ 25 است. سپس عدد سوم را که 25 است اضافه کنید. مجموع 50 خواهد بود. به هرحال اگر مد نظر شما این نباشد چطور؟ اگر تمایل داشته باشید اعداد دوم و سوم را با هم اضافه کنید و سپس مجموع را از اولین عدد کسر کنید، چطور؟ بنابراین 25+75 است که پاسخ 100 می باشد. سپس آن را از اولین عدد کسر کنید که 100 می باشد. اکنون مجموع 0 خواهد بود.

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

answer = (first_number - second_number) + third_number;

این پنجره ی برنامه نویسی می باشد، بنابراین می توانید آن را امتحان کنید:

 

 

محاسبه دوم نیز به این شکل می باشد:

answer = first_number - (second_number + third_number);

پنجره ی کد آن را نیز در اینجا مشاهده می کنید:

 

 

اکنون اجازه بدهید چند عمل ضرب و جمع را امتحان کنیم.

نمادهای ریاضی خود را به (که اپراتور نامیده می شوند) به جمع و ضرب تبدیل کنید:

answer = first_number + second_number * third_number;

تمام آکولادها را حذف کرده و سپس برنامه ی خود را اجرا کنید.

بدون آکولا تصور می کنید که Java از چپ به راست محاسبه را انجام می دهد. بنابراین تصور می کنید که عدد اول را به عدد دوم اضافه می کند تا 175 به دست آورد. سپس تصور می کنید که در عدد سوم ضرب می شود که 25 می باشد. بنابراین پاسخ 4375 خواهد بود. سپس برنامه را اجرا کنید. پاسخ حقیقی را که شما به دست می آورید 1975 می باشد. پس جریان چیست؟

دلیل اینکه جاوا پاسخ اشتباه ارائه می دهد Operator Precedence است. جاوا برخی از نمادهای ریاضی را مهم تر از بقیه در نظر می گیرد. این برنامه ضرب را مقدم به جمع می داند، بنابراین عملیات ضرب را قبل از جمع انجام می دهد، سپس جمع را انجام می دهد. بنابراین جاوا در حال انجام عملیات زیر می باشد:

answer = first_number + (second_number * third_number);

با قرار دادن آکولادها در جای درست مشاهده می کنید که عدد دوم در عدد سوم ضرب شده است. سپس مجموع به اولین عدد اضافه می شود. بنابراین حاصل 75 در 25 عدد 75 می باشد. عدد 100 را اضافه کنید، که 1975می باشد.

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

answer = (first_number + second_number) * third_number;

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

answer = first_number + second_number / third_number;

پاسخی که به دست می آورید 103 می باشد. اکنون چند آکولاد اضافه کنید:

answer = (first_number + second_number) / third_number;

پاسخ این بار 7 خواهد بود. بنابراین بدون آکولادها، جاوا ابتدا تقسیم را انجام می دهد و سپس 100 را به مجموع اضافه می کند – این عملکرد از چپ به راست کار نمی کند.

در اینجا لیستی از Operator Precedence را مشاهده می کنید:

ضرب و تقسیم – به طور مساوی رفتار می شوند، اما نسبت به جمع و تفریق دارای اولویت هستند. جمع و تفریق – به طور مساوی رفتار می شوند اما نسبت به ضرب و تقسیم اولویت پایین تری دارند. بنابراین اگر فکر می کنید که جاوا پاسخ اشتباه به شما می دهد، به یاد داشته باشید که Operator Precedence مهم می باشد و چند آکولاد اضافه می کند. در قسمت بعدی به چگونگی ذخیره ی مقادیر با استفاده از Java نگاهی خواهیم داشت.

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

این آموزش ادامه دارد


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

سلام با قسمت دوم آموزش جاوا JAVA در خدمت شما عزیزان هستم

در قسمت قبل از آموزش برنامه نویسی جاوا با مفهوم جاوا آشنا شدیم و JDK و نرم افزار IntelliJ IDEA را یاد دادیم و برنامه ای اجرا نمودیم

حال با ادامه آموزش جاوا همراه باشید:

آموزش متغیرهای جاوا:

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

برای ذخیره ی یک عدد در جاوا، باید گزینه های زیادی داشته باشید. تمام اعداد مانند 8، 10، 12 و غیره با استفاده از متغیر int ذخیره می شوند. ( int مخفف integer (عددصحیح) می باشد.). اعداد ممیز شناور مانند 8.4، 10.5، 12.8 و غیره با استفاده از متغیر دوگانه ذخیره می شوند. شما ذخیره سازی را با یک علامت تساوی ( = ) انجام می دهید. اجازه بدهید چند مثال را بررسی کنیم (می توانید از کد FirstProject برای این مثال ها استفاده کنید.)

برای تنظیم یک عدد کامل (عدد صحیح)، موارد زیر را به متود main از بخش قبل اضافه کنید:

public static void main(String[ ] args) {

int first_number;

System.out.println("My First Project");

}

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

نام متغیرها نباید با عدد شروع شود. بنابراین نام first_number درست می باشد اما نام 1st_number درست نیست. می توانید اعداد را در هرجایی از نام متغیر به جز ابتدای آن قراردهید.

نام های متغیرها نمی تواند مشابه لغات کلیدی Java باشد. موارد بسیاری از این گونه وجود دارد که در NetBeans به رنگ آبی در خواهند آمد، مانند int در بالا.

نمی توانید در نام های متغیرها فاصله داشته باشید. اطلاعیه ی متغیر int first number، خطایی را دریافت خواهد کرد. ما از متغیرهای تاکید شده استفاده کرده ایم، اما متداول این است که حرف اول با حروف کوچک انگلیسی و حرف بعدی یا بقیه ی حروف را با حرف بزرگ انگلیسی نوشته شوند: firstNumber, myFirstNumber

نام های متغیرها موارد هوشمندی هستند، بنابراین firstNumber و FirstNumber نام های متفاوتی برای متغیرها می باشند.

برای ذخیره ی موردی در متغیری به نام first_number، یک علامت تساوی و سپس مقداری مورد نظر برای ذخیره را تایپ کنید:

public static void main(String[ ] args) {

int first_number;

first_number = 10;

System.out.println("My First Project");

}

بنابراین این برنامه به جاوا می گوید که می خواهید مقداری از 10 را در متغیر عدد صحیح که first_number نامیده ایم، ذخیره کنید.

اگر تمایل دارید، می توانید تمام این کار را در یک خط انجام دهید:

public static void main(String[ ] args) {

int first_number = 10;

System.out.println("My First Project");

}

برای اینکه تمام موارد را در عمل ببینید، متد println را به این شکل تغییر دهید:

System.out.println( "First number = " + first_number );

آنچه ما اکنون در بین آکولادهای println داریم، متن های مستقیمی هستند که در علامت نقل قول محدود شده اند:

("First number = "

ما یک علامت به علاوه نیز داریم که با نام متغیرمان دنبال می شود:

 

+ first_number );

علامت به اضافه به معنای اتصال به یکدیگر "join together" می باشد. بنابراین ما متن و نام متغیر خود را به یکدیگر متصل می کنیم. این عملکرد به عنوان concatenation (الحاق) مطرح است.

پنجره ی شما اکنون باید مانند زیر به نظر برسد (دقت داشته باشید که هر خط با نقطه ویرگول به پایان می رسد.):

 

 

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

بنابراین عددی را که در متغیر ذخیره کرده ایم، به نام first_number ، خروجی می باشد پس از علامت تساوی.

 

 

اجازه بدهید چند جمع ساده را امتحان کنیم. چند متغیر int به کد خود اضافه کنید، یکی برای ذخیره ی رومین عدد و دیگری برای ذخیره ی پاسخ.

int first_number, second_number, answer;

دقت کنید که چگونه سه متغیر نام روی یک خط داریم. اگر متغیرها از یک نوع باشند، شما می توانید این کار را در جاوا انجام دهید (برای مورد ما نوع int). بنابراین نام هر متغیر با کاما (ویرگول) جدا می شود.

بنابراین می توانیم در متغیرهای جدید چیزی اضافه کنیم:

first_number = 10;

second_number = 20;

answer = first_number + second_number;

برای متغیر پاسخ، می خواهیم اولین عدد را به دومین عدد اضافه کنیم. جمع کردن با علامت به اضافه ( + ) انجام می شود. بنابراین Java مقادیر را در first_number و second_number به یکدیگر اضافه می کند. وقتی این کار تمام شد، مجموع را در متغیر واقع در سمت راست تساوی ذخیره می کند. بنابراین به جای اختصاص دادن 10 یا 20 به نام متغیر، عمل جمع را انجام خواهد داد و سپس اختصاص می دهد. در موردی که واضح نیست، اتفاقی مانند زیر رخ خواهد داد:

 

 

مورد بالا سازگار با این مورد می باشد:

answer = 10 + 20;

اما جاوا تقریبا می داند که در داخل دو متغیر first_number و second_number چه چیزی وجود دارد، بنابراین شما می توانید فقط از نام ها استفاده کنید.

اکنون متد println خود را مانند زیر تغییر دهید:

System.out.println("Addition Total = " + answer );

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

 

 

 

 

 

بنابراین برنامه ی ما موارد زیر را انجام داده است:

یک عدد ذخیره کرده است. یک عدد دوم ذخیره کرده است. این دو عدد را با یکدیگر جمع کرده است. نتیجه ی جمع را در یک متغیر سوم ذخیره کرده است. نتیجه را چاپ کرده است. شما مستقیما نیز می توانید از اعداد استفاده کنید. خط پاسخ را مانند زیر تغییر دهید: answer = first_number + second_number + 12; برنامه ی خود را مجددا اجرا کنید. چه چیزی چاپ شده است؟ همان موردی است که انتظار داشتید؟ می توانید اعداد کاملا بزرگی در متغیر نوع int ذخیره کنید. حداکثر مقدار 2147483647 می باشد. اگر یک عدد منفی مورد نظر شماست، کمترین مقداری که می توانید داشته باشید -2147483648 می باشد. اگر اعداد بزرگتر و یا کوچکتر می خواهید، می توانید از متغیر عددی دیگری استفاده کنید: double ، که آنها را در بخش بعدی مورد بررسی قرار می دهیم.

پایان بخش دوم آموزش برنامه نویسی JAVA

این آموزش ادامه دارد





آموزش برنامه نویسی
سلام با قسمت چهارم آموزش جاوا JAVA در خدمت شما عزیزان هستم
در قسمت قبل از آموزش تصویری برنامه نویسی جاوا با متغیر Double و اولویت عمگرها آشنا شدیم
حال با ادامه آموزش جاوا همراه باشید:
آموزش متغیر String در جاوا
همانند ذخیره ی مقادیر عددی، متغیرها می توانند متن را در خود حفظ کنند. شما میتوانید تنها یک کاراکتر یا چندید کاراکتر را ذخیره کنید. برای ذخیره ی تنها یک کاراکتر، متغیر char استفاده می شود. گرچه معمولا تمایل دارید بیشتر از یک کاراکتر را ذخیره کنید. برای انجام این کار نیاز به متغیر نوع رشته ای دارید.
حال یک برنامه در محیط NetBeans می نویسیم , البته شما می تونید همین کد ها را در محیط IntelliJ IDEA
که در قسمت اول آموزش دیدید اجرا کنید

 

با کلیک کردن بر روی File > New Project از نوار منو در بالای NetBeans، یک پروژه ی جدید را آغاز کنید. وقتی دیالوگ باکس New Project ظاهر می شود، اطمینان حاصل کنید که آموزش Java و Java Application انتخاب شده اند:

روی Next کلیک کرده و StringVars را با عنوان نام پروژه تایپ کنید. اطمینان حاصل کنید که در قسمت Create Main Class یک تیک وجود دارد. سپس Main را پس از stringvars حذف کرده و در عوض StringVariables را تایپ کنید، مانند تصویر زیر:

بنابراین نام پروژه StringVars است و نام گروه نیز StringVariables می باشد. روی دکمه ی Finish کلیک کنید، پنجره ی برنامه نویسی شما مانند تصویر زیر خواهد بود ( ما تمام کامنت های پیش فرض را حذف کرده ایم.) دقت داشته باشید که تمام حروف مربوط به نام پوشه با حروف کوچک نوشته شده اند(stringvars)، اما نام پروژه StringVars می باشد.

برای برقراری یک متغیر string ، لغت String را تایپ کنید که پس از آن نام متغیر قرار می گیرد. توجه داشته باشید که در لغت String حرف S بزرگ نوشته شده است. مجددا خط با یک نقطه ویرگول به پایان می رسد:
String first_name;
با تایپ کردن یک علامت تساوی، یک مقدار جدید را به متغیر string خود اختصاص دهید. پس از علامت تساوی متنی را که می خواهید ذخیره کنید، بین دو علامت نقل قول (") قرار می گیرد:
first_name = "William";
اگر ترجیح می دهید، می توانید تمام آن را در یک خط داشته باشید:
String first_name = "William";
متغیر دوم string را برقرار کنید تا یک نام یا نام خانوادگی را حفظ کنید:
String family_name = "Shakespeare";
برای اینکه هر دو نام را چاپ کنید، println( ) زیر را اضافه کنید:
System.out.println( first_name + " " + family_name );
در بین آکولادهای println عبارت زیر را داریم:
first_name + " " + family_name
هر آنچه در متغیر به نام first_name وجود دارد، نسخه ی چاپی (print out) می نامیم. پس از آن یک علامت به علاوه وجود دارد که با یک فاصله دنبال می شود. این فاصله بین علامت های نقل قول احاطه شده است. به این روش جاوا در می یابد که ما قصد چاپ یک کاراکتر فاصله (space character) را داریم. پس از فاصله یک علامت به علاوه ی دیگر وجود دارد که با متغیر family_name دنبال می شود.

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


اگر شما در حال ذخیره ی تنها یک کاراکتر مجزا هستید، متغیر مورد نیاز شما char ( با حرف کوچک) می باشد. برای ذخیره ی کاراکتر از علامت نقل قول (‘) به جای (“) استفاده می کنید. در اینجا مجددا برنامه را مشاهده می کنید، اما این بار با متغیر char:
اگر سعی کنید یک متغیر char را با علامت نقل قول جفت (“) ذخیره کنید، NetBeans زیر کد ناسازگار با قرمز خط خواهد کشید و خطای نوع ناسازگار (incompatible type) ارائه خواهد داد. به هرحال شما می توانید یک متغیر String تنها با یک کاراکتر مجزا داشته باشید. اما به علامت نقل قول دوگانه (“) نیاز دارید. بنابراین این مورد درست می باشد:
String first_name = "W";
اما مورد زیر درست نمی باشد:
String first_name = 'W';
ورژن دوم دارای یک علامت نقل قول مجزا می باشد، در حالیکه مورد اول دارای علامت نقل قول دوگانه (“) می باشد.
موارد بیشتری در مورد string ها وجود دارد و بعدها مجددا آنها را مشاهده خواهید کرد. اکنون اجازه دهید ادامه داده و چند ورودی از یوزر دریافت کنیم.
آموزش دریافت ورودی از کاربر
یکی از نقاط قوت Java، وجود کتابخانه های عظیمی از کدهای موجود برای شما می باشد. برای انجام کارهای خاص کدهایی نوشته شده است. تمام آنچه باید انجام دهید ارجاع به کتابخانه ی مورد نظر و سپس فراخوانی متد می باشد. گروه واقعا مفیدی که ورودی یک یوزر را کنترل می کند، گروه Scanner نامیده می شود. این گروه در کتابخانه ی java.util یافت می شود. برای استفاده از گروه Scanner لازم است به آن گروه در کد خود ارجاع کنید. این کار با لغت کلیدی import انجام می شود.
import java.util.Scanner;
عبارت import لازم است بالای عبارت عبارت Class قرار بگیرد.
import java.util.Scanner;
public class StringVariables {
}
این عبارت به جاوا می گوید که می خواهید از یک گروه خاص در یک کتابخانه ی خاص استفاده کنید – گروه Scanner که در java.util واقع شده است.

 

کار دیگری که باید انجام دهید ایجاد یک آبجکت از گروه Scanner می باشد. (یک گروه در واقع دسته ای از کدهاست. این کد تا زمانیکه یک آبجکت جدید از آن ایجاد نکنید، کاری انجام نمی دهد.)
برای ایجاد یک آبجکت Scanner جدید، کد مورد نیاز را در زیر مشاهده می کنید:
Scanner user_input = new Scanner( System.in );
عبارت import لازم است بالای عبارت عبارت Class قرار بگیرد.
import java.util.Scanner;
public class StringVariables {
}
این عبارت به جاوا می گوید که می خواهید از یک گروه خاص در یک کتابخانه ی خاص استفاده کنید – گروه Scanner که در java.util واقع شده است.
کار دیگری که باید انجام دهید ایجاد یک آبجکت از گروه Scanner می باشد. (یک گروه در واقع دسته ای از کدهاست. این کد تا زمانیکه یک آبجکت جدید از آن ایجاد نکنید، کاری انجام نمی دهد.)
برای ایجاد یک آبجکت Scanner جدید، کد مورد نیاز را در زیر مشاهده می کنید:
Scanner user_input = new Scanner( System.in );
بنابراین به جای متغیر int یا یک متغیر String ، در حال تنظیم یک متغیر Scanner می باشیم، که مورد ما user_input نامیده می شود. پس از یک علامت تساوی لغت کلیدی new را داریم که برای ایجاد آبجکت های جدید از یک گروه استفاده می شود. آبجکتی که در حال ایجاد آن هستیم از گروه Scanner می باشد. در بین آکولادها باید به جاوا اعلام کنید که از System Input (System.in) خواهد بود.
برای گرفتن ورودی یوزر، می توانید یکی از چندین متد موجود را در آبجکت جدید Scanner وارد عمل کنید. یکی از این متدها next نامیده می شود. این متد رشته ی بعدی متن را که یک یوزر روی صفحه کلید تایپ می کند، دریافت می کند:
String first_name;
first_name = user_input.next( );
بنابراین پس از آبجکت user_input یک نقطه تایپ می کنیم. سپس لیستی از متدهای موجود مشاهده خواهید کرد. روی next دابل کلیک کنید و سپس در انتهای خط یک نقطه ویرگول تایپ کنید. برای به جلو بردن یوزر می توانیم متن نیز تایپ کنیم:
String first_name;
System.out.print("Enter your first name: ");
first_name = user_input.next( );
دقت داشته باشید که مانند قبل از print به جای println استفاده می کنیم. تفاوت بین این دو این است که println پس از خورجی مکان نما را به یک خط جدید حرکت می دهد، اما print روی همان خط می ماند.
یک پیشروی برای نام خانوادگی نیز وارد می کنیم:
String family_name;
System.out.print("Enter your family name: ");
family_name = user_input.next( );
این همان کد است به جز اینکه اکنون جاوا هرآنچه را یوزر در قسمت متغیر family_name به جای متغیر first_name تایپ می کند، ذخیره می کند.
برای چاپ ورودی می توانیم مورد زیر را اضافه کنیم:
String full_name;
full_name = first_name + " " + family_name;
System.out.println("You are " + full_name);
یک متغیر String دیگر با عنوان full_name تنظیم می کنیم و هر آنچه در متغیرهای first_name و family_name است را ذخیره می کنیم. در بین این دو یک فاصله قرار می دهیم. خط آخر همه ی آن را در پنجره ی Output چاپ خواهد کرد.
بنابراین کد خود را طوری تطبیق دهید تا با تصویر بعدی هماهنگی داشته باشد:

برنامه ی خود را اجرا کنید تا اینکه پنجره ی Output تصویر زیر را نمایش دهد:

اکنون جاوا متوقف شده تا اینکه در صفحه کلید چیزی وارد کنید، و تا زمانیکه دکمه ی Enter صفحه کلید را فشار ندهید، پیشرفتی رخ نخواهد داد. بنابراین بعداز "Enter your first name:" را کلیک چپ کنید، مشاهده خواهید کرد که مکان نمای شما محو خواهد شد. یک نام تایپ کنید و سپس دکمه ی enter را فشار دهید.
پس از فشردن دکمه ی enter، جاوا هر آنچه را که در سمت چپ علامت تساوی در متغیر نام تایپ و ذخیره شده، خواهد گرفت. در مورد ما این متغیر first_name نامیده می شد.
سپس برنامه وارد خط بعدی کد می شود:

یک نام خانوادگی تایپ کرده و سپس مجددا دکمه ی Enter را فشار دهید:

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

بنابراین ما از گروه Scanner برای گرفتن ورودی از یک یوزر استفاده می کنیم. هر آنچه تایپ شد در متغیرها ذخیره شد. نتیجه نیز در پنجره ی Output چاپ شد. در بخش بعدی نگاه کوتاهی به Option Panes خواهیم داشت.
پایان قسمت چهارم آموزش جاوا
دوره آموزش برنامه نویسی JAVA ادامه دارد




آموزش برنامه نویسی
سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل صفحه بندی Pagination و ایجاد چرخنده Sppiner در Bootstrap4 آشنا شدیم.
حال با ادامه آموزش بوت استرپ 4 همراه باشید:
آموزش کار با لیست گروهی List Group در بوت استرپ 4
ساده ترین نوع لیست گروهی یک لیست بدون نشانه و ترتیب (Unordered list) با یک یا چندین آیتم درون آن است، همانند عکس زیر:

 

 

 

 
برای ایجاد یک لیست گروهی ساده در بوت استرپ 4، از یک تگ <ul> با کلاس list-group، استفاده می شود که هر آیتم درون آن با یک تگ <li> با کلاس list-group-item، تعیین خواهد شد، همانند کد مثال عملی زیر:
مثال
1
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
آموزش فعال کردن یک آیتم در لیست Active Item:
اگر به یکی از آیتم های <li> درون یک لیست بوت استرپ 4، کلاس .active بدهید، آن آیتم به صورت فعال با پس زمینه رنگی (به صورت پیش فرض) و متمایز از بقیه نشان داده خواهد شد.

 

 

 

 
مثال: در کد مثال زیر، یک لیست گروهی در Bootstrap 4 ایجاد کرده ایم که آیتم اول آن به صورت فعال درآمده است :
مثال2
<ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
آموزش ایجاد لیست با آیتم های لینک در Bootstrap 4:
برای ایجاد یک لیست گروهی با آیتم های لینک، از یک تگ <div> به جای تگ <ul> استفاده کرده و به جای آیتم های <li>، درون آن آیتم های <a> تعریف کنیم. همچنین در صورت تمایل می توانید برای اینکه در هنگام عبور موس کاربر از روی لینک ها، پس زمینه آن ها به صورت خاکستری داشته و حالت hover پیدا کنند، از کلاس .list-group-item-action در تگ های <a> استفاده نمایید، همانند کد مثال عملی زیر:
مثال 3
<div class="list-group">
<arel="nofollow" href="#" class="list-group-item list-group-item-action">First item</a>
<arel="nofollow" href="#" class="list-group-item list-group-item-action">Second item</a>
<arel="nofollow" href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
آموزش ایجاد یک آیتم غیر فعال (Disabled) در لیست Bootstrap 4:
برای تعیین یک آیتم در لیست به صورت غیر فعال (Disabled) بایستی کلاس .disabled را به عنصر اضافه کنید. در این حالت، رنگ نوشته آیتم به صورت خاکستری و کم رنگ در می آید و غیر فعال خواهد بود. همچنین در لیست های لینکی، قابلیت hover آن ها نیز از بین می رود.

 

 

 

 
مثال: در مثال زیر، یک لیست در بوت استرپ 4، ایجاد کرده ایم که آیتم اول و دوم آن، غیر فعال است.
مثال 4
<div class="list-group">
<arel="nofollow" href="#" class="list-group-item disabled">Disabled item</a>
<arel="nofollow" href="#" class="list-group-item disabled">Disabled item</a>
<arel="nofollow" href="#" class="list-group-item">Third item</a>
</div>
آموزش حذف خطوط حاشیه (border) لیست در بوت استرپ 4:
در صورت استفاده از کلاس .list-group-flush در عنصر مادر لیست تگ <ul>، خطوط حاشیه یا Border دور لیست حذف شده و دیگر نوشته های آن گرد نیز نخواهد بود، همانند کد عملی مثال زیر :

 

 

 

مثال 5
<ul class="list-group list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
آموزش ایجاد لیست افقی Horizontal List در بوت استرپ 4:
 
اگر می خواهید آیتم های لیست در بوت استرپ 4، به صورت افقی یا Horizontal به جای عمودی Vertical (در کنار هم به جای قرار گرفتن بر روی هم) نمایش داده شوند، کلاس .list-group-horizontal را به عنصر مادر لیست (تگ <ul> یا <div> با کلاس list-group)، اضافه نمایید، همانند کد مثال عملی زیر:

 

 

 

مثال 6
<ul class="list-group list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
آموزش استفاده از کلاس های رنگی متنی در لیست بوت استرپ 4:
از کلاس های متنی رنگی ویژه بوت استرپ 4، یا کلاس های Contextual Classes که در بخش های قبل معرفی کردیم، برای تعیین رنگ پس زمینه آیتم های لیست استفاده نمایید. این رنگ ها مفهومی هستند و هریک پیام خاصی مثل موفقیت یا خطر را به کاربر نشان می دهد:

 

 

 

مثال: کلاس های رنگی متنی ویژه بوت استرپ 4، عبارتند از .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-dark و list-group-item-light، که از هریک از آن ها در لیست زیر برای تعیین رنگ یک آیتم لیست، استفاده کرده ایم :
مثال 7
<ul class="list-group">
<li class="list-group-item list-group-item-success">Success item</li>
<li class="list-group-item list-group-item-secondary">Secondary item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li class="list-group-item list-group-item-light">Light item</li>
</ul>
آموزش ایجاد لیست لینک دار رنگی در Bootstrap 4:
همانند مثال بخش های قبلی، می توانید از کلاس های رنگی ویژه بوت استرپ 4 در لیست های لینک دار هم استفاده کنید، با این تفاوت که در لیست های لینک دار از تگ های <div> به جای <ul> در عنصر مادر لیست و تگ <a> به جای تگ <li> برای تعریف هر آیتم استفاده می کنیم. کلاس رنگی را نیز بایستی به تگ <a> اعمال کنید و با به کار بردن کلاس .list-group-item-action در لینک ها، خاصیت hover یا تیره شدن رنگ در هنگام عبور موس بر روی آیتم، بدان اضافه خواهد شد.
مثال: به کد مثال عملی زیر دقت کنید و خروجی را مشاهده نمایید :
<div class="list-group">
<arel="nofollow" href="#" class="list-group-item list-group-item-action">Action item</a>
<arel="nofollow" href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
<arel="nofollow" href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
<arel="nofollow" href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
<arel="nofollow" href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
<arel="nofollow" href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
<arel="nofollow" href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
<arel="nofollow" href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
<arel="nofollow" href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>
آموزش ایجاد لیست های گروهی نشان دار Badges List در Bootstrap 4:
می توانید با ترکیب کلاس badge و چند کلاس کمکی دیگر در بوت استرپ 4، لیست هایی دارای نشانه های عمودی یا متنی (Badge List) ایجاد نمایید، همانند عکس زیر:

 

 

 

مثال: در کد مثال عملی زیر یک لیست نشان دار یا Badge List ایجاد کرده ایم. روال کار همانند یک لیست ساده بوت استرپ 4 است. با این تفاوت که برای اضافه کردن Badge یک تگ مثل <span> با کلاس .badge و یکسری کلاس کمکی دیگر، درون هر آیتم لیست قرار داده ایم:
مثال 9
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Inbox
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge badge-primary badge-pill">50</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Junk
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>
نکته :
می توانید اعداد درون Badge را به صورت ایستاتیک تعریف کرده یا با استفاده از jQuery و Ajax آن را به صورت دینامیک نیز تغییر دهید.
آموزش بوت استرپ 4 ادامه دارد

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

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

  • آموزش دستورات جاوا اسکریپت
  • کلید واژه های جاوا اسکریپت
  • آموزش متغیرها و انواع داده ای در زبان جاوا اسکریپت
  • آموزش محل قرار گیری کدهای جاوا اسکریپت

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

آموزش خروجی جاوا اسکریپت:

زبان JavaScript هیچ گونه توابع توکار (built-in) مربوط به چاپ و نمایش (print،display) ندارد.

توانایی جاوا اسکریپت در نمایش داده ها به گونه های مختلف (با استفاده از توابع متفاوت)

جاوا اسکریپت قادر است داده را به شیوه های مختلف نمایش دهد.

  1. با استفاده از تابع window.alert()، در پنجره ی هشدار (alert box) داده را نمایش می دهد.
  2. با استفاده از تابع ()، متن مشخص (خروجی HTML) را در صفحه چاپ کرده و نمایش می دهد.
  3. به وسیله ی خاصیت innerHTML، محتوای HTML را تعریف می کند و داخل آن کد می نویسید یا آن را دستکاری می کند.
  4. به کمک متد console.log()، داده ی مورد نظر را در مرورگر به نمایش می گذارد.

استفاده از تابع ()window.alert

می توانید از یک پنجره ی هشدار (alert box) برای نمایش دادن خروجی (داده) استفاده کرد.

1< h1 >My First Web Page< /h1 >
1< p >My first paragraph.< /p >
1
1< script >
1 window.alert(5 + 6);
1< /script >

استفاده از متد ()

برای انجام تست و نمایش خروجی، می توان از تابع () استفاده کرد.

مثال:

1< script >
1 (5 + 6);
1< /script >11

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

مثال:

< button type="button" ="(5 + 6)" >Try it< /button >

استفاده از خاصیت innerHTML

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

جهت دسترسی به عنصر HTML، جاوا اسکریپت می تواند از متد document.getElementById(id) بهره بگیرد.
خصیصه ی id عنصر HTML را تعریف می کند. خاصیت innerHTML در واقع محتوای HTML را تعریف می کند.

مثال:

1< script >
1 document.getElementById("demo") = 5 + 6;
1< /script >

استفاده از متد ()console.log

می توان در مرورگر با استفاده از متد console.log()، داده ی مورد نظر را نمایش داد.
دکمه ی F12 را فشار داده تا پنجره ی فرمان / کنسول مرورگر فعال شود، سپس "Console" را در منو انتخاب کنید.

مثال:

1< script >
1 console.log(5 + 6);
1< /script >

آموزش Syntax جاوا اسکریپت:

دستور گرامری Syntax در حقیقت یک سری قوانین است که به وسیله ی آن می توان فهمید برنامه های جاوا اسکریپت چگونه ساخته می شوند.

برنامه های جاوا اسکریپت

یک برنامه ی کامپیوتری / Computer program در واقع فهرستی از "دستورات / instructions" می باشد که باید توسط رایانه "اجرا / execute" شود.
در یک زبان برنامه نویسی به instruction های برنامه، Statement (دستور) گفته می شود.
جاوا اسکریپت نیز یک زبان برنامه نویسی محسوب می شود.
دستورات زبان جاوا اسکریپت توسط کاراکتر نقطه ویرگول (;) از هم جدا می شوند.

مثال:

1var x = 5; 
1var y = 6; 
1var z = x + y; 

نکته:

در HTML، برنامه های جاوا اسکریپت توسط مرورگر وب اجرا می شوند.

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

دستورات JavaScript

دستورات جاوا اسکریپت متشکل است از : values (مقادیر)، Operators (عملگرها)، Expressions (عبارات)، Keywords (کلیدواژه ها) و Comments (توضیحات).

لفظ ها یا لیترال های جاوا اسکریپت JavaScript literals:

مهمترین قوانین برای نوشتن مقادیر ثابت عبارتند از

اعداد Numbers – اعدادی که با اعشار (decimal) یا بدون اعشار نوشته می شوند، به ترتیب زیر

10.50

‎1001‎

رشته ها Strings – رشته ها متن یا نوشته هایی هستند که درون علامت های " " یا ' ' نوشته می شوند.

"John Doe" ‎

‎'John Doe'

عبارات Expressions – عبارات نیز می توانند نمایان گر مقادیر ثابت باشند.

5 + 6

‎5 * 10

متغیرهای جاوا اسکریپت (JavaScript Variables)

در یک زبان برنامه نویسی، متغیرها (variables) به منظور ذخیره سازی (store) مقادیر داده ها بکار می روند.
جاوا اسکریپت با استفاده از کلید واژه ی var متغیر تعریف (define) می کند.
علامت مساوی (=) را به منظور تخصیص مقادیر به متغیرها مورد استفاده قرار می دهیم.
در این مثال، x به عنوان متغیر تعریف شده، سپس به مقدار 6 به آن اختصاص داده شده است.

var x;

x = 6; ‎‏

عملگرهای جاوا اسکریپت (JavaScript Operators)

جاوا اسکریپت با استفاده از عملگر جایگزین / assignment operator(=) مقادیر را به متغیر ها نسبت (تخصیص / assign) می دهد.

var x = 5;

var y = 6;‎

جاوا اسکریپت با استفاده از عملگرهای محاسباتی (arithmetic operator) از جمله :+ - * / مقادیر را محاسبه (compute) می کند.

(5 + 6) * 10‎‏ ‏

کلیدواژه های جاوا اسکریپت (JavaScript Keywords)

واژه های کلیدی (Keyword) جاوا اسکریپت به منظور شناسایی عملیاتی که باید (انجام) پیاده شود مورد استفاده قرار می گیرد.
در واقع کلید واژه ی var به مرورگر دستور / اطلاع می دهد یک متغیر جدید ایجاد کند.

var x = 5 + 6;

var y = x * 10;‎‏

توضیحات در جاوا اسکریپت (JavaScript Comments)

تمامی دستورات جاوا اسکریپت وماً "اجرا" نمی شوند.
کدهایی که پس از کاراکتر // یا بین */ و /* قرار داده می شوند در حقیقت توضیح (comment) محسوب می شوند و از این رو در اجرا نادیده گرفته می شوند.

var x = 5; // I will be executed

‎// var x = 6; I will NOT be executed

جاوا اسکریپت، حساس به کوچک و بزرگی حروف (Case sensitive)

تمامی شناسه های (identifier) جاوا اسکریپت به کوچک و بزرگی حروف حساس هستند.
به عنوان مثال، lastName و lastname گرچه هر دو متغیر هستند ولی به دلیل تفاوت در کوچک و بزرگی حروف کاملاً از هم متمایز تلقی می گردند.

lastName = "Doe";

lastname = "Peterson";‎

برای جاوا اسکریپت VAR یا Var با کلید واژه ی var یکسان نیست.

JavaScript و Camel Case

در گذشته، برنامه نویسان از سه روش برای گنجاندن چندین کلمه در یک اسم متغیر واحد استفاده می کردند.

خط تیره (hyphen)

first-name،‎ last-name،‎ master-card،‎ inter-city ‏

خط زیرین (underscore)

first_name،‎ last_name،‎ master_card،‎ inter_city

و

First Name،‎ LastName،‎ MasterCard،‎ InterCity‎

در زبان های برنامه نویسی، بخصوص جاوا اسکریپت، camel case اغلب با یک حرف کوچک (lower case) شروع می شود.

firstName،‎ lastName،‎ masterCard،‎ interCity

توجه:

در جاوا اسکریپت اجازه ی استفاده از خط تیره (hyphen) به برنامه نویس داده نمی شود مگر برای تفریق.

مجموعه کاراکترهای جاوا اسکریپت (JavaScript Character set)

جاوا اسکریپت از مجموعه کاراکترهای Unicode استفاده می کند.

یونیکد Unicodeتمامی کاراکترها، نشانه گذاری ها (punctuation) و علائم موجود را دربر می گیرد.

آموزش توضیحات در جاوا اسکریپت:

از Comment ها در جاوا اسکریپت برای توضیح کد و بهبود خوانایی آن ها استفاده می شود.
همچنین از توضیحات / comments می توانیم زمانی که می خواهیم کد جایگزینی را به جای کد اصلی امتحان کنیم، کمک بگیریم.

توضیحات تک خطی (single line comments)

توضیحات تک خطی با کاراکتر // آغاز می گردند.
جاوا اسکریپت هر متنی را که بین کاراکتر // و انتهای خط قرار بگیرد کاملاً نادیده می گیرد(اجرا نمی کند).
در این مثال از comment تک خطی پیش از هر خط به منظور تشریح کد مربوط استفاده شده.

مثال

1< script >
1 // Change heading:
1 document.getElementById("myH") = "My First Page"
1 // Change paragraph:
1 document.getElementById("myP") = "My first paragraph."
1< /script >

مثال زیر برای توضیح کد در انتهای هر خط یک comment تک خطی بکار گرفته.

1< script >
1 var x = 5; // Declare x, give it the value of 5
1 var y = x + 2; // Declare y, give it the value of x + 2
1
1 document.getElementById("demo") = y; // Write y to demo
1< /script >

توضیحات چند خطی (multi-line comments)

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

کامنت Comment های چند خطی با */ آغاز شده و با کاراکتر /* خاتمه می یابند.
هر نوشته ی که بین دو کاراکتر گفته شده قرار گیرد کاملاً توسط جاوا اسکریپت نادیده گرفته می شود.
این مثال یک توضیح چند خطی (comment block یا مجموعه ی از توضیحات) را برای تشریح کد مورد نظر بکار می گیرد

مثال:

1< script >
1 /*
1 The code below will change
1 the heading with id = "myH"
1 and the paragraph with id = "myp"
1 in my web page:
1 */
1 document.getElementById("myH") = "My First Page"
1 document.getElementById("myP") = "My first paragraph."
1< /script >

نکته:

در بیشتر مواقع برنامه نویسان از توضیح تک خطی استفاده می کنند.

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

استفاده از توضیحات برای جلوگیری از اجرای کد

با بهره گیری از توضیحات (comments) می توان از اجرای کد جلوگیری کرد که برای اجرای تست و امتحان کردن کد جایگزین بسیار کارامد تلقی می گردد.
افزودن کاراکتر // در ابتدای خط کد باعث می شود خط کد از حالت قابل اجرا به حالت comment تبدیل شود، بدین معنا که دیگر خط کد مورد نظر اجراشدنی نبوده و به یک توضیح ساده تبدیل گردد.
این مثال با استفاده از //، اجرای یکی از خط کدها را مانع می شود.

مثال:

1< script >
1 //document.getElementById("myH") = "My First Page"
1 document.getElementById("myP") = "My first paragraph."
1< /script >

حال مثال زیر را مشاهده می کنید که به کمک comment block از اجرای چندین خط کد جلوگیری می کند.

مثال:

1< script >
1 /*
1 document.getElementById("myH") = "Welcome to my Homepage"
1 document.getElementById("myP") = "This is my first paragraph."
1 */
1 < /script >

 

 

 

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


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

در این مقاله از سری مقاله های دوره آموزش سی شارپ به بررسی OverLoading Method در سی شارپ می پردزایم:

بسیاری از زبان های برنامه نویسی از تکنیک ای به نام پارامترهای پیش فرض /اختیاری (defult/optional parameters) پشتیبانی می کنند. این تکنیک به برنامه امکان می دهد تا با تعیین مقدار پیش فرض برای یک یا چند پارامتر تابع، آن ها را در هنگام مقدار دهی انتخاب کند. این روش برای افزودن انعطاف پذیری به کد برنامه، بسیار کاربرد دارد.

برای مثال، می خواهید قابلیت کارکرد را به تابع ای که یک یا چند پارامتر ورودی دارد، بدهید. در اینگونه موارد، به دلیل عدم ارسال تعداد مورد نیاز پارامتر در هنگام فراخوانی، ممکن است کد شما درست اجرا نشود. برای حل این مسئله، می توانید از امکان جدید تعیین پارامترهای اختیاری یا optional استفاده کنید. در این روش، شما برای برخی پارامترها یک مقدار پیش فرضی یا default تعیین کرده که حتی اگر در هنگام فراخوانی تابع، مقداری برای آن ارسال نشد، کد دچار مشکل نشود.

پارامترهای پیش فرض (default parameters) در زبان C# 4.0 معرفی شدند، اما تا قبل از آن برنامه نویسان از تکنیکی تقریبا مشابه به نام method overloading استفاده می کردند. در این حالت، برنامه نویس چندین تابع هم نام ولی با مجموعه پارامترهای مختلف را تعریف می کند. برای مثال متد اول یک پارامتر و متد دوم دو پارامتر دریافت می کند.

 

مثالی از متد OverLoading در آموزش سی شارپ

یک مثال مناسب برای این روش، تابع Substring از کلاس String Class است. به صورت زیر :

string Substring (int startIndex)
string Substring (int startIndex, int length)

 

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

class SillyMath
{
    public static int Plus(int number1, int number2)
    {
        return Plus(number1, number2, 0);
    }
    public static int Plus(int number1, int number2, int number3)
    {
        return number1 + number2 + number3;
    }
}

 

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

class SillyMath
{
    public static int Plus(int number1, int number2)
    {
        return Plus(number1, number2, 0);
    }
    public static int Plus(int number1, int number2, int number3)
    {
        return Plus(number1, number2, number3, 0);
    }
    public static int Plus(int number1, int number2, int number3, int number4)
    {
        return number1 + number2 + number3 + number4;
    }
}

 

مثال فوق خیلی ساده تکنیک method overloading را در C# نشان داده و نحوه ارتباط دادن توابع با هم را بیان می کند.

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


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

به بخش جدید آموزش سي شارپ خوش آمدید.

در این درس قصد داریم تا شما را با مفهوم تابع سازنده Constructor و destructor در C# و کاربرد آن ها آشنا کنیم.

تابع سازنده یا Constructor متد ویژه ای است که هر بار به محض ساخته شدن یک شی یا object از کلاس، اجرا می شود. درواقع از تابع سازنده برای مقداردهی اولیه متغیرها یا اجرای یک کد ثابت استفاده می شود. یک تابع سازنده هیچ گاه مقدار خروجی یا return ندارد و به همین دلیل در تعریف آن، هیچ نوع متغیری جهت return تعریف نمی شود. ساختار کلی تعریف تابع سازنده Constructor در کلاس های C# به صورت زیر است :

public ClassName()

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

public Car()

 

در مثال عملی این درس، کلاسی به نام Car داریم که دارای یک تابع سازنده بوده که یک پارامتر متنی String را به عنوان ورودی دریافت می کند. البته تابع های سازنده در C# می توانند overload نیز شوند. یعنی این که ما چندین تابع سازنده هم نام برای یک کلاس داشته باشیم، ولی پارامترهای ورودی آن ها با هم متفاوت باشد. کلاس زیر یک کد عمل را نشان می دهد :

public Car()

{

}

public Car(string color)

{

this.color = color;

}

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

public Car()

{

Console.WriteLine("Constructor with no parameters called!");

}

public Car(string color) : this()

{

this.color = color;

Console.WriteLine("Constructor with color parameter called!");

}

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

public Car(string color) : this()

{

this.color = color;

Console.WriteLine("Constructor with color parameter called!");

}

public Car(string param1, string param2) : this(param1)

{

}

اگر شما تابع سازنده ای که دارای 2 پارامتر است را فراخوانی کنید، پارامتر اول برای فراخوانی تابع سازنده ای که دارای 1 پارامتر است، استفاده می شود.

 

آموزش کار با تابع تخریب کننده یا Destructor در C# :

تابع تخریب کننده یا Destructor در زبان C#، متدی است که در هنگام از بین رفتن یک شی از کلاس، اجرا می شود. زبان C#، یک زبان پاک کننده خودکار سیستم یا garbage collector است. به این معنی که اشیایی که دیگر در برنامه نیاز ندارید را جهت خالی کردن حافظه و آزاد نمودن سیستم، پاک می کند. از طرف دیگر در برخی موارد شاید نیاز داشته باشید تا یک Clean up در سیستم انجام دهید، اینجاست که تابع های تخریب کننده Destructor به کار می آیند. تابع های تخریب کننده چندان شبیه سایر متدها در زبان C# نیستند. در کد عملی زیر یک مثال از تابع تخریب کننده نشان داده شده است :

~Car()

{

Console.WriteLine("Out");

}

به محض این که شی ایجاد شده از کلاس، توسط تمیز کننده خودکار garbage collector جمع آوری شده، متد فوق فراخوانی می شود.


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

در این مقاله از سری مقاله های آموزش SQL Server به آموزش کپی کردن اطلاعات از یک جدول به جدول دیگر می پردازیم، برای این کار می توانید از دو دستور Select Into و Insert Into Select استفاده کنید. در ادامه به شرح هر یک از این دستورات و تفاوت آنها با یکدیگر می پردازیم :

 

آموزش دستور Select Into

در SQL می توانید اطلاعات را از یک جدول به داخل جدول دیگری کپی نمایید. دستور SELECT INTO داده ها را از یک جدول بر می دارد و در جدولی دیگر وارد می کند.

 

فرم دستور Select Into

می توانیم تمام ستون ها را به یک جدول جدید وارد کنیم :

SELECT *
INTO newtable [IN externaldb]
FROM table1;

 

یا می توانیم تنها ستون مورد نظر خود را به جدول جدیدی وارد کنیم :

SELECT column_name(s)
INTO newtable [IN externaldb]
FROM table1;

جدول جدید با نام ستون ها و تنظیماتی که در عبارت SELECT برای آن تعریف شده است ایجاد می گردد. برای اضافه کردن نام های جدید می توانید از عبارت AS استفاده نمایید.

 

مثال استفاده از دستور Select Into

دستور زیر از جدول Customers یک بکاپ تهیه می کند :

SELECT *
INTO CustomersBackup2013
FROM Customers;

 

همچنین می توانیم از عبارت IN برای کپی کردن جدول به پایگاه داده دیگر استفاده کنیم :

SELECT *
INTO CustomersBackup2013 IN 'Backup.mdb'
FROM Customers;

 

دستور زیر تنها مشتریانی که نام کشورشان آلمان است را در جدول جدید کپی می کند :

SELECT *
INTO CustomersBackup2013
FROM Customers
WHERE Country='Germany';
SELECT *
INTO CustomersBackup2013
FROM Customers
WHERE Country='Germany';

 

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

SELECT Customers.CustomerName, Orders.OrderID
INTO CustomersOrderBackup2013
FROM Customers
LEFT JOIN Orders
ON Customers.CustomerID=Orders.CustomerID;

 

نکته :

از عبارت SELECT INTO میتوان برای ایجاد یک جدول خالی جدید با بهره گیری از طرح های ظاهری جدول های دیگر استفاده کرد. برای اینکار تنها کافی است تا دستور WHERE را به عبارت خود اضافه کنیم، این کار سبب می شود تا query ارسال شده بدون پاسخ بازگردد :

SELECT *
INTO newtable
FROM table1
WHERE 1=0;

 

آموزش Insert Into Select

در SQL می توان اطلاعات را از یک جدول به جدول دیگر کپی کرد. عبارت INSERT INTO SELECT داده ها را از یک جدول کپی کرده و در جدول دیگری وارد می نماید. سطر های جدول مقصد در این پروسه بدون هیچگونه تغییر باقی می ماند.

 

فرم عبارت Insert Into Select

با استفاده ازعبارت زیر می توانیم تمام ستون ها را از یک جدول به جدول دیگری کپی کنیم :

INSERT INTO table2
SELECT * FROM table1;

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

INSERT INTO table2
(column_name(s))
SELECT column_name(s)
FROM table1;

 

نحوه استفاده از عبارت Insert Into Select در پایگاه داده

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

 

آنچه در زیر می بینید گزیده ای است از جدول "Suppliers" :

 

مثال استفاده از عبارت INSERT INTO SELECT

عبارت زیر تنها تعدادی کمی از ستون ها را از جدول Suppliers به جدول Customers کپی می کند:

INSERT INTO Customers (CustomerName, Country)
SELECT SupplierName, Country FROM Suppliers;

 

عبارت زیر تنها عرضه کنندگان آلمانی را از جدول Suppliers به جدول Customers کپی می کند :

INSERT INTO Customers (CustomerName, Country)
SELECT SupplierName, Country FROM Suppliers
WHERE Country='Germany';

 

با دیگر مقالات ما در زمینه آموزش SQL Server همراه باشید


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

 

در این مقاله از سری مقاله های آموزش SQL Server به آموزش انواع join می پردازیم :

عملگر UNION نتیجه دو یا چند دستور SELECT را با یکدیگر ترکیب می کند.

عملگر UNION برای ترکیب نتایج دو یا چند دستور SELECT استفاده می شود.

توجه داشته باشید که هر دستور SELECT در عملگر UNION باید تعداد ستونهای یکسانی را برگردانند. همچنین ستونها باید Data Type یکسانی داشته باشند. علاوه بر این ستونها در هر دستور SELECT باید به یک صورت مرتب شده باشند.

 

فرم عملگر UNION

SELECT column_name(s) FROM table1

نکته:

عملگر UNION تنها داده هایی را به صورت پیش فرض انتخاب می کند که از یکدیگر متمایز باشند. برای اینکه داده های تکراری را هم بیاوریم از کلید واژه ALL به همراه UNION استفاده کنید.

فرم عملگر UNION ALL

SELECT column_name(s) FROM table1

نکته: نام ستون ها در جدول نتایج معمولا برابر نام ستونها در دستور SELECT اول در عملگر UNION می باشد.

نحوه استفاده از کلید واژه UNION در پایگاه داده

در این آموزش از نمونه پایگاه داده مشهور Northwind استفاده خواهیم کرد.

جدول زیر از میان جدول "Customers" انتخاب شده است:

 

 

آنچه در زیر می بینید گزیده ای است از جدول "Suppliers":

 

مثال استفاده از کلید واژه UNION

عبارت SQL زیر نام تمام شهر های مختلف را (تنها از بین مقادیر مشخص) از ستون "City" و از میان جداول Customers و Suppliers انتخاب می کند:

SELECT City FROM Customers

SELECT City FROM Suppliers

ORDER BY City;

نکته:

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

می گیرد. UNION تنها مقادیر غیر تکراری را انتخاب می کند. برای انتخاب مقادیر تکراری از UNION ALL استفاده کنید.

مثال استفاده از عملگر UNION ALL

آموزش SQL Server : عبارت SQL زیر از عملگر UNION ALL برای انتخاب تمام (حتی مقادیر تکراری) شهر ها از جداول Customers و Suppliers استفاده می کند:

SELECT City FROM Customers

UNION ALL

SELECT City FROM Suppliers

ORDER BY City;

مثال استفاده از عملگر UNION ALL همراه با دستور WHERE

عبارت SQL زیر از عملگر UNION ALL برای انتخاب تمام (حتی مقادیر تکراری) شهر های آلمانAnchor از جداول Customers و Suppliers استفاده می کند:

SELECT City, Country FROM Customers

WHERE Country='Germany'

UNION ALL

SELECT City, Country FROM Suppliers

WHERE Country='Germany'

ORDER BY City;

آموزش SQL Server ادامه دارد


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

در این مقاله از سری مقاله های آموزش SQL Server به آموزش انواع join می پردازیم :

کلید واژه Join برای ترکیب سطر های دو یا چند جدول به کار می رود. ایج ترین نوع Join –Inner join (پیوند داخلی) است که تمام سطر هایی از جدول های گوناگون را که از شرط Join پیروی می کنند فرا می خواند. بیایید نگاهی به گزیده ای از جدول "Orders"( سفارشات) در پایین بیاندازیم.

 

حالا نگاهی به گزیده ای از جدول "Customers" در زیر بیاندازید:

 

دقت داشته باشید که ستون "Customers ID" در جدول "Orders" به ستون "Customers ID" در جدول "Customers" اشاره دارد. رابطه بین دو جدول بالا ستون "Customer ID" می باشد. بنابراین اگر ما عبارت SQL زیر را که شامل (INNER JOIN) می باشد اجرا کنیم.

SELECT Orders.OrderID, Customers.CompanyName
, Orders.OrderDate
FROM Orders
INNER JOIN Customers
ON Orders.CustomerID=Customers.CustomerID;

 

آموزش JOIN

قبل از اینکه مثال ها را ادامه دهیم انواع پیوندهایی که می توان از آنها استفاده کرد را به همراه تفاوت های آن ها بیان می کنیم.

  • کلید واژه INNER JOIN : سطرهایی را که در هر دو جدول تناظر دارند را بر می گرداند.
  • کلید واژه LEFT JOIN : تمامی سطرها را از جدول سمت چپ و همچنین سطر هایی را از جدول سمت راست که با جدول سمت چپ متناظر هستند را فرا می خواند.
  • کلید واژه RIGHT JOIN : تمام سطر ها را از جدول سمت راست و همچنین سطرهایی را از جدول سمت چپ که با جدول سمت راست متناظر هستند را فرا می خواند.
  • کلید واژه FULL JOIN : تمام ردیف های موجود در جداول را با وجود حتی یک همخوانی میان جداول فرا می خواند.

 

آموزش INNER JOIN

کلید واژه INNER JOIN سطرهایی از هر دو جدول را انتخاب می کند که حداقل یک داده متناظر در ستون های مرتبط با هم داشته باشد.

فرم عبارت INNER JOIN

SELECT column_name(s)
FROM table1
INNER JOIN table2
ON table1.column_name=table2.column_name;
یا:
SELECT column_name(s)
FROM table1
JOIN table2
ON table1.column_name=table2.column_name;

نکته :

تفاوتی بین JOIN و INNER JOIN وجود ندارد یا به عبارت دیگر INNER JOIN همان JOIN است.

 

نحوه استفاده از کلید واژه INNER JOIN در پایگاه داده

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

 

جدول زیر نیز گزیده ای از جدول "Orders" می باشد:

 

آموزش انواع join : مثال استفاده از کلید واژه INNER JOIN

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

SELECT Customers.CustomerName, Orders.OrderID
FROM Customers
INNER JOIN Orders
ON Customers.CustomerID=Orders.CustomerID
ORDER BY Customers.CustomerName;

نکته :

عبارت کلیدی INNER JOIN سطرهایی که حداقل یک تناظر در دو جدول داشته باشند را برمی گرداند. اگر سطری در جدول Customers وجود دارد که تناظری با جدول Orders ندارد، آن سطر لیست نمی شود.

 

آموزش دستور LEFT JOIN

کلید واژه LEFT JOIN تمام سطر های جدول سمت چپ (table1) و آندسته از سطر های جدول سمت راست (table2) را که با جدول سمت چپ متناظر است فرا می خواند. اگر در جدول سمت راست سطر متناظری وجود نداشته باشد نتیجه در سمت راست صفرAnchor خواهد بود.

فرم کلید واژه LEFT JOIN

 SELECT column_name(s)
FROM table1
LEFT JOIN table2
ON table1.column_name=table2.column_name;
یا :
SELECT column_name(s)
FROM table1
LEFT OUTER JOIN table2
ON table1.column_name=table2.column_name;

نکته :

در برخی از پایگاه های داده LEFT JOIN به نام LEFT OUTER JOIN نیز نامیده می شود.

 

نحوه استفاده از کلید واژه LEFT JOIN در پایگاه داده

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

 

آنچه در زیر می بینید گزیده ای است از جدول "Orders":

 

مثال استفاده از کلید واژه LEFT JOIN

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

SELECT Customers.CustomerName, Orders.OrderID
FROM Customers
LEFT JOIN Orders
ON Customers.CustomerID=Orders.CustomerID
ORDER BY Customers.CustomerName;

نکته :

کلید واژه LEFT JOIN تمام سطرهای جدول سمت چپ (Customers) را برمی گرداند حتی اگر هیچ داده متناظری برای آن در جدول سمت راست (Orders) وجود نداشته باشد.

 

آموزش دستور RIGHT JOIN

کلید واژه RIGHT JOIN تمام سطر های جدول سمت راست (table2) و آندسته از سطر های جدول سمت چپ (table1) را که با جدول سمت راست متناظر است فرا می خواند. اگر در جدول سمت چپ سطر متناظری وجود نداشته باشد نتیجه در سمت چپ صفرAnchor خواهد بود.

فرم کلید واژه RIGHT JOIN

SELECT column_name(s)
FROM table1
RIGHT JOIN table2
ON table1.column_name=table2.column_name;
یا :
SELECT column_name(s)
FROM table1
RIGHT OUTER JOIN table2
ON table1.column_name=table2.column_name;

نکته :

در برخی از پایگاه های داده RIGHT JOIN به نام RIGHT OUTER JOIN نیز نامیده می شود.

 

 

نحوه استفاده از کلید واژه RIGHT JOIN در پایگاه داده

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

آنچه در زیر می بینید گزیده ای است از جدول "EmployeesAnchor":

 

مثال استفاده از کلید واژه RIGHT JOIN

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

SELECT Orders.OrderID, Employees.FirstName
FROM Orders
RIGHT JOIN Employees
ON Orders.EmployeeID=Employees.EmployeeID
ORDER BY Orders.OrderID;

نکته :

کلید واژه RIGHT JOIN تمام سطرهای جدول سمت راست (Employees) را برمی گرداند حتی اگر هیچ داده متناظری برای آن در جدول سمت چپ (Orders) وجود نداشته باشد.

 

آموزش OUTER JOIN

کلید واژه FULL OUTER JOIN تمام ردیف های جدول سمت چپ (table1) و سمت راست (table2) را فرا می خواند. کلید واژه FULL OUTER JOIN نتایج بدست آمده از پیوند های چپ و راستAnchor را با یکدیگر ترکیب می کند.

فرم کلید واژه FULL OUTER JOIN

SELECT column_name(s)
FROM table1
FULL OUTER JOIN table2
ON table1.column_name=table2.column_name;

 

نحوه استفاده از کلید واژه FULL OUTER JOIN در پایگاه داده

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

 

مثال استفاده از کلید واژه FULL OUTER JOIN

عبارت SQL زیر تمام مشتریان و سفارشاتشان را انتخاب می کند:

SELECT Customers.CustomerName, Orders.OrderID
FROM Customers
FULL OUTER JOIN Orders
ON Customers.CustomerID=Orders.CustomerID
ORDER BY Customers.CustomerName;

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

 

نکته :

کلید واژه FULL OUTER JOIN تمام سطرهای جدول سمت چپ (Customers) و تمام سطرهای موجود در جدول سمت راست (Orders) را بر می گرداند. اگر سطری در جدول Customers وجود دارد که تناظری در جدول Orders ندارد یا اگر سطری در جدول Orders وجود دارد که تناظری در جدول Customers ندارد با این وجود این سطرها نیز در جدول نتیجه نمایش داده خواهند شد.

 

با دیگر مقاله های ما در زمینه آموزش SQL Server همراه باشید


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

در این مقاله از مجموعه مقاله های آموزش SQL Server به آموزش دستورات in و between در SQL Server می پردازیم

 

عملگر IN در sql server

عملگر IN به شما اين امکان را مي دهد که چندين ارزش )مقدار) را در عبارت WHERE مشخص کنيد. فرم عملگر IN به صورت زیر است :

SELECT column_name(s)
FROM table_name
WHERE column_name IN (value1,value2,.);

 

نحوه استفاده از عملگر IN در پایگاه داده

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

 

آموزش دستور in در SQL Server : مثال استفاده از عملگر IN

عبارت SQL زیر مشتریانی را انتخاب می کند که نام شهر هایشان "Paris" با "London" باشد:

SELECT * FROM Customers
WHERE City IN ('Paris','London');

 

آموزش SQL Server : عملگر BETWEEN در sql server

عملگر BETWEEN برای انتخاب مقادیر بین یک محدوده استفاده می شود. عملگر BETWEEN برای انتخاب مقادیر بین یک محدوده استفاده می شود. مقدارها می توانند اعداد، متن و یا تاریخ باشند.

 

فرم عملگر BETWEEN

SELECT column_name(s)
FROM table_name
WHERE column_name BETWEEN value1 AND value2;

 

نحوه استفاده از عملگر BETWEEN در پایگاه داده

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

 

آموزش دستور between در SQL Server : مثال استفاده از عملگر BETWEEN

عبارت SQL زیر تمام محصولاتی را که قیمت آنها بین 10 و 20 باشد را انتخاب می کند:

SELECT * FROM Products
WHERE Price BETWEEN 10 AND 20;

 

آموزش دستور between در SQL Server : مثال استفاده از عملگر NOT BETWEEN

برای نمایش محصولاتی که خارج از محدوده مثال قبل باشد از NOT BETWEEN استفاده می کنیم:

SELECT * FROM Products
WHERE Price NOT BETWEEN 10 AND 20;

 

آموزش دستور between در SQL Server : مثال استفاده از عملگر BETWEEN همراه با IN

عبارت SQL زیر محصولاتی را که در محدوده قیمتی 10 و 20 بوده را انتخاب می کند ولی محصولاتی که "Category ID" آنها 1، 2 یا 3 باشد را نشان نمی دهد:

SELECT * FROM Products
WHERE (Price BETWEEN 10 AND 20)
AND NOT CategoryID IN (1,2,3);

 

آموزش دستور between در SQL Server : مثال استفاده از عملگر BETWEEN همراه با مقادیر متنی

عبارت SQL زیر محصولاتی را که نام آنها با هر کدام از حروف مابین "C" و "M" آغاز شده باشد را انتخاب می کند:

SELECT * FROM Products
WHERE ProductName BETWEEN 'C' AND 'M';

 

آموزش دستور between در SQL Server : مثال استفاده از عملگر BETWEEN NOT همراه با مقادیر متنی

عبارت SQL زیر محصولاتی را که نام آنها با حرفی غیر از حروف مابین "C" و "M" آغاز شده باشد را انتخاب می کند:

SELECT * FROM Products
WHERE ProductName NOT BETWEEN 'C' AND 'M';

 

جدول زیر گزیده ای است از جدول "Order":

 

آموزش دستور between در SQL Server : مثال استفاده از عملگر BETWEEN همراه Date Value

مقدار SQL زیر تمام سفارشاتی را که در بین تاریخ های "04-July-1996" و "09-July-1996" انجام شده است انتخاب می کند:

SELECT * FROM Orders
WHERE OrderDate BETWEEN #07/04/1996# AND #07/09/1996#;

توجه داشته باشید که عملگر BETWEEN در پایگاه های داده مختلف نتایج گوناگونی خواهد داشت. در بعضی از پایگاه داده ها عملگر BETWEEN فیلدهای بین دو مقدار را بجز مقادیر ابتدا و انتهای محدوده را انتخاب می کند. در بعضی دیگر از پایگاه داده ها عملگر BETWEEN فیلدهای بین دو مقدار رابه همراه مقادیر ابتدا و انتهای محدوده را انتخاب می کند. در بعضی دیگر از پایگاه داده ها عملگر BETWEEN فیلدهای بین دو مقدار رابه همراه مقدار ابتدایی و بدون مقدار انتهایی محدوده را انتخاب می کند.

بنابراین: پایگاه داده خود را کنترل کنید که چگونه با عملگر BETWEEN رفتار می کند!

 

با دیگر مقالات ما در زمینه آموزش SQL Server همراه باشید


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

 

سلام عزیزان. با آموزش جاوا همراه ما باشید

 

دستور break در Java

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

دستور استفاده از break:

1. jump-statement;

2. break;

 

مثال کاربردی:

public class BreakExample }

public static void main(String[] args) }

for(int i=1;i<=10;i++)}

if(i==5)}

break;

}

System.out.println(i);

}

}

}

آموزش جاوا خروجی:

1

2

3

4

 

استفاده از دستور break در حلقه های تودرتو

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

دستور استفاده:

public class BreakExample2 }

public static void main(String[] args) }

for(int i=1;i<=3;i++)}

for(int j=1;j<=3;j++)}

if(i==2&&j==2)}

break;

{

System.out.println(i+" "+j);

{

{

{

{

خروجی:

1 1

1 2

1 3

2 1

3 1

3 2

3 3

 

آموزش جاوا دستور Continue در Java

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

دستور استفاده از continue:

jump-statement;

continue;

مثال کاربردی از استفاده ی دستور continue در Java

public class ContinueExample }

public static void main(String[] args) }

for(int i=1;i<=10;i++)}

if(i==5)}

continue;

{

System.out.println(i);

{

{

{

خروجی:

1

2

3

4

6

7

8

9

10

 

استفاده از دستور continue در حلقه های تودرتو

برای اینکه continue داخل حلقه ی داخلی اجرا و اعمال شود، دستور نام برده باید صراحتا داخل بدنه ی حلقه ی درونی (تودرتو) جایگذاری شود.

مثال کاربردی:

public class ContinueExample2}

public static void main(String[] args) }

for(int i=1;i<=3;i++)}

for(int j=1;j<=3;j++)}

if(i==2&&j==2)}

continue;

{

System.out.println(i+" "+j);

{

{

{

{

خروجی:

1 1

1 2

1 3

2 1

2 3

3 1

3 2

3 3

آموزش جاوا ادامه دارد


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

امروز با پست جدیدی از سری پست های آموزش طراحی سایت همراه شما هستیم. در این پست دستورات if else در جاوا اسکریپت را مورد بررسی قرار می دهیم.

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

 

دستورات شرطی (conditional statements)

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

دستور if - از اين ساختار در مواقعی که می خواهيم در صورت بر قرار بودن شرط معینی دستور مشخصی اجرا شود، استفاده می کنیم . چنانچه شرط تعیین شده صحیح یا برقرار نبود، هيچ دستوری اجرا نخواهد شد. دستور else - از اين ساختار زمانی استفاده می کنیم که می خواهيم در صورت بر قرار بودن شرط، دستور معینی اجرا شود و در صورت عدم بر قراری آن شرط، دستور یا مجموعه ای از دستورات دیگر اجرا گردند.

دستور else if : اگر شرط درست باشد دستور مقابل if اجرا می شود در غیر این صورت دستور مقابل else اجرا می گردد (در صورت غلط بودن شرط اول، شرط دیگری را برای امتحان کردن مشخص می کند).

دستور Switch : برای گزینش و اجرای یک دستور از میان چندین دستور مختلف بکار می رود.

 

دستور شرطی if

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

 

آموزش طراحی سایت دستور نگارش (syntax)

نکته:

توجه داشته باشید که دستور شرطی if با حروف کوچک نوشته می شود. نوشتن آن با حروف بزرگ If یا IF باعث ایجاد خطا می شود.

مثال:

در صورتی که زمان هنوز مرز ساعت :00 را رد نکرده، رشته ی "Good day" را نشان بده.

if (hour < )

{

greeting = "Good day";

‎}

 

نمونه یک

if (new Date().getHours() < ) {

document.getElementById("demo").innerHTML = "Good day!";

}

 

امتحان کنید:

 

 

Display "Good day!" if the hour is less than :00:

 

 

Good Evening!

 

 

if (new Date().getHours() < ) {

document.getElementById("demo").innerHTML = "Good day!";

}

 

 

 

دستور شرطی else

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

دستور if (شرط) { قطعه کدی که در صورت برقرار بودن شرط باید اجرا گردد

دستور } else {

قطعه کدی که در صورت غلط یا برقرار نبودن شرط اول اجرا می گردد {

اگر زمان از مرز ساعت نگذشته، رشته ی "Good day" را نشان بده و در غیر این صورت "Good evening" را

if (hour < ) {

‎ greeting = "Good day";

‎} else {

‎ greeting = "Good evening";

}‎

نتیجه:

 

نمونه دو

function myFunction() {

var hour = new Date().getHours();

var greeting;

if (hour < ) {

greeting = "Good day";

} else {

greeting = "Good evening";

}

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

}

 

امتحان کنید:

body>

 

Click the button to display a time-based greeting:

 

Try it

 

 

 

 

function myFunction() {

var hour = new Date().getHours();

var greeting;

if (hour < ) {

greeting = "Good day";

} else {

greeting = "Good evening";

}

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

}

 

 

 

دستور شرطی else if

اگر شرط درست باشد دستور مقابل if اجرا می شود در غیر این صورت دستور مقابل else اجرا می گردد (در صورت غلط بودن شرط اول، شرط دیگری را برای امتحان کردن مشخص می کند).

 

دستور نگارش

دستور if (شرط اول) { قطه کدی که در صورت صحیح بودن شرط اول باید اجرا گردد

دستور } else if (شرط دوم) { قطعه کدی که در صورت غلط بودن شرط اول و صحیح بودن شرط دوم باید اجرا شود

دستور } else { قطعه کدی که در صورت غلط بودن هر دو شرط اول و دوم باید اجرا شود }

مثال:

در صورتی که زمان حاضر مرز ساعت 10:00 را پشت سر نگذاشته، رشته ی "Good morning" نمایش داده می شود و چنانچه زمان از ساعت 20:00 عبور نکرده رشته ی "Good day" و در غیر این صورت نیز "Good evening".

if (time < 10) {

‎ greeting = "Good morning";

‎} else if (time < 20) {

‎ greeting = "Good day";

‎} else {

‎ greeting = "Good evening";

}‎

نتیجه:

 

نمونه سه

function myFunction() {

var greeting;

var time = new Date().getHours();

if (time < 10) {

greeting = "Good morning";

} else if (time < 20) {

greeting = "Good day";

} else {

greeting = "Good evening";

}

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

}

 

امتحان کنید:

 

 

 

Click the button to get a time-based greeting:

 

 

Try it

 

 

 

 

 

 

function myFunction() {

var greeting;

var time = new Date().getHours();

if (time < 10) {

greeting = "Good morning";

} else if (time < 20) {

greeting = "Good day";

} else {

greeting = "Good evening";

}

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

}

 

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


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

 

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

آموزش SQL SERVER: عبارتSELECT TOP برای مشخص کردن تعداد رکوردهایی که می خواهیم برگردانده شود استفاده می شود.

عبارت TOP در جداول بزرگ با هزاران record می تواند بسیار مفید باشد. بیرون کشیدن تعداد زیادی از رکوردها می تواند روی عملکرد تاثیر گذارد.

نکته:

تمام سیستم های پایگاه داده ازSELECT TOP پشتیبانی نمی کنند.

فرم عبارت SELECT TOP در SQL Server و MS Access

SELECT TOP number|percent column_name(s)

FROM table_name;

معادل SELECT TOP در MySQL و Oracle

 

فرم در MySQL

SELECT column_name(s)

FROM table_name

LIMIT number;

مثال:

SELECT *

FROM Persons

LIMIT 5;

فرم در Oracle

SELECT column_name(s)

FROM table_name

WHERE ROWNUM <= number;

مثال:

SELECT *

FROM Persons

WHERE ROWNUM <=5;

آموزش SQL SERVER : نحوه استفاده از عبارت SELECT TOP در پایگاه داده

در این آموزش از نمونه پایگاه داده مشهور Northwind استفاده خواهیم کرد.

جدول زیر از میان جدول "Customers" انتخاب شده است:

 

 

مثال استفاده از دستور SELECT TOP

عبارت SQL زیر تنها دو record اول را از جدول "Customers" انتخاب می کند:

SELECT TOP 2 * FROM Customers;

مثال استفاده از دستور SELECT TOP PERCENT

عبارت SQL زیر 50 درصد record های اول را از جدول "Customers" انتخاب می کند:

SELECT TOP 50 PERCENT * FROM Customers;

 

 

آموزش عملگر LIKE

عملگر LIKE در عبارت WHERE برای پیدا کردن یک الگوی خاص در یک ستون استفاده می شود.

 

فرم عملگر LIKE

SELECT column_name(s)

FROM table_name

WHERE column_name LIKE pattern;

 

نحوه استفاده از عملگر LIKE در پایگاه داده

در این آموزش از نمونه پایگاه داده مشهور Northwind استفاده خواهیم کرد.

جدول زیر از میان جدول "Customers" انتخاب شده است:

 

مثال استفاده از عملگر LIKE

عبارت SQL زیر تمام مشتریانی را که در شهری زندگی می کنند که با حرف "S" آغاز می شود انتخاب می کند:

SELECT * FROM Customers

WHERE City LIKE 's%';

نکته:

علامت % برای تعریف wildcards (حروف مفقود شده) قبل و بعد از الگو استفاده می شود. در فصل بعد بیشتر راجع به wildcards خواهید آموخت.

عبارت SQL زیر تمام مشتریانی را که در شهری زندگی می کنند که به حرف "S" ختم می شود انتخاب می کند:

SELECT * FROM Customers

WHERE City LIKE '%s';

عبارت SQL زیر تمام مشتریانی را که در کشوری زندگی می کنند که حاوی کلمه "land" باشند انتخاب می کند:

SELECT * FROM Customers

WHERE Country LIKE '%land%';

استفاده از کلید واژه NOT به شما این امکان را می دهد تا record هایی را انتخاب کنید که با الگو مطابقت ندارند.

عبارت SQL زیر تمام مشتریانی را که در کشوری زندگی می کنند که حاوی کلمه "land" نمی باشند انتخاب می کند:

SELECT * FROM Customers

WHERE Country NOT LIKE '%land%';

 

 

آموزش SQL SERVER ادامه دارد


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

آخرین مطالب

آخرین جستجو ها