حلقه ی while یک مجموعه دستور را تا زمانی که شرط خاصی برقرار باشد، تکرار می نماید. چنانچه تعداد دفعات تکرار ثابت و مشخص نیست، توصیه می شود از این حلقه برای تکرار مجموعه دستور مورد نظر بهره بگیرید.
while(condition){
//code to be executed
}
مثال کاربردی:
public class WhileExample {
public static void main(String[] args) {
int i=1;
while(i<=10){
System.out.println(i);
i++;
}
}
}
خروجی:
1
2
3
4
5
6
7
8
9
10
حلقه ی while بی نهایت در Java
آموزش جاوا : اگر مقدار بولی true را به عنوان پارامتر به دستور while پاس دهید، این حلقه مجموعه دستورات را تا بی نهایت تکرار می کند.
دستور استفاده از حلقه ی while بی نهایت:
while(true){
//code to be executed
}
مثال کاربردی:
public class WhileExample2 {
public static void main(String[] args) {
while(true){
System.out.println("infinitive while loop");
}
}
}
خروجی:
infinitive while loop
infinitive while loop
infinitive while loop
infinitive while loop
infinitive while loop
ctrl+c
حال جهت خروج از برنامه و خاتمه دادن اجرای حلقه ی بی نهایت، لازم است کلیدهای ctrl+c را همزمان فشار دهید.
آموزش Java – حلقه ی do-while در Java
حلقه ی do-while بخشی از برنامه را به تعداد دفعات معینی تکرار می کند. اگر تعداد دفعات تکرار مجموعه دستورات ثابت و مشخص نیست و قصد دارید که حلقه را حداقل یکبار قبل از بررسی شرط، اجرا نمایید، توصیه می شود که از این حلقه استفاده کنید. با توجه به آنچه گفته شد، حلقه ی do-while حداقل یکبار اجرا می شود، خواه شرطی که در پایین آن تعریف شده صحیح باشد خواه غلط.
دستور استفاده:
do{
//code to be executed
}while(condition)
مثال کاربردی:
public class DoWhileExample {
public static void main(String[] args) {
int i=1;
do{
System.out.println(i);
i++;
}while(i<=10);
}
}
خروجی:
1
2
3
4
5
6
7
8
9
10
حلقه ی do-while بی نهایت
اگر مقدار بولی true را به عنوان پارامتر به دستور do-while ارسال نمایید، مجموعه دستورات مورد نظر تا بی نهایت تکرار می شوند.
دستور استفاده:
do{
//code to be executed
}while(true);
مثال کاربردی:
public class DoWhileExample2 {
public static void main(String[] args) {
do{
System.out.println("infinitive do while loop");
}while(true);
}
}
خروجی:
infinitive do while loop
infinitive do while loop
infinitive do while loop
ctrl+c
اکنون جهت خروج از برنامه کافی است کلیدهای ctrl+c را فشار دهید.
سلام عزیزان ... با آموزش JQuery از دوره آموزش طراحی سایت همراه باشید
جی کوئری Jquery چیست؟
برای اینکه بدانیم به راحتی باید گفت که یک کتابخانه یا چارچوب کاری برای زبان برنامه نویسی سمت سرویس گیرنده جاوا اسکریپت (JavaScript framework) است که هدف اصلی آن فراهم آوردن زمینه ی استفاده ی آسان از زبان نام برده در برنامه نویسی تحت وب (صفحات وب) می باشد. jQuery یک کتابخانه از جاوا اسکریپت است . از آن جایی که کتابخانه ی JQuery بسیاری از امکانات و عملیات قابل اجرا توسط زبان جاوا اسکریپت را گرفته و در قالب یک سری تابع می گنجاند که می توانید به راحتی هر چه تمام تر فراخوانی و اجرا کنید (با کم ترین میزان کدنویسی بیشترین عملیات ممکن را اجرا کنید)، می توان آن را یک لایه ی سطح بالا (abstraction layer) نیز نامید. با این حال، لازم است به خاطر داشته باشید که کتابخانه ی ذکر شده به هیچ وجه نمی تواند کاملا جایگزین JavaScript گردد. اگرچه jQuery در بسیاری از موارد میزان کدنویسی را کاهش داده و در عین حال همان عملیات قابل اجرا توسط جاوا اسکپریت را اجرا می کند، اما نباید فراموش کنید که توابع و دستورات jQuery هم در حقیقت همان کد زبان جاوا اسکریپت است.
آموزش طراحی سایت : با توجه به آنچه گفته شد،در لزومی ندارد برای استفاده از کتابخانه ی مزبور حتما یک متخصص در زمینه ی برنامه نویسی با جاوا اسکریپت باشید.در واقع، jQuery سعی دارد بسیاری از کارهایی که می توان با استفاده از کدهای جاوا اسکریپت پیاده سازی کرد، همچون دستکاری DOM و فراخوانی توابع AJAX، را تسهیل نماید. از این رو لازم نیست درباره ی جاوا اسکریپت اطلاعات بسیار بالایی داشته باشید. تعدادی زیادی کتابخانه ی جاوا اسکریپت وجود دارد که در حال حاضر jQuery پرکاربردترین و کارآمدترین آن ها محسوب می شود. از جمله دلایل محبوبیت این کتابخانه می توان به قابلیت توسعه پذیری بالا اشاره کرد. بنابراین شما می توانید برای هر کاری که تصورش را می کنید، افزونه (plugin) پیدا کنید. قدرت و کارایی بالا، دامنه ی وسیع افزونه های پرکاربرد، ساختار نگارشی روان و کارآمد این چارچوب کاری را از دیگر کتابخانه های jQuery تمایز بخشیده است.
می توان دستورات و توابع jQuery را در هر ویرایشگر متن نظیر Windows Notepad نوشت. اما نوشتن کدهای آن داخل یک ویرایشگر HTML که دستورات جاوا اسکریپت خود را در آن می نویسید، به مراتب کارامد تر خواهد بود. تعدادی ویرایشگر وجود دارد که با jQuery مانند شهروند درجه یک برخورد می کنند. بهترین ویرایشگر برای درج بهینه و سریع دستورات آن، TSW WebCoder می باشد که با داشتن قابلیت های بی نظیر IntelliSense و ارائه دادن تمامی تکنولوژی های مورد نیاز همچون HTML، CSS، JavaScript، PHP و البته jQuery در کدنویسی به یاری شما می آید.
داشتن لیستی از property ها، متدها و پارامترهای احتمالی آن ها کمک بزرگی به شما می کند، به خصوص اگر در کدنویسی با jQuery یک تازه وارد هستید. در زیر تعدادی تصویر از ویرایشگر TSW WebCoder مشاهده می کنید که اشاره به علت برتری این ویرایشگر و قابلیت آسان سازی کدنویسی با آن دارد: تصویر زیر توابع قابل فراخوانی بر روی یک شی jQuery را نشان می دهد.
این تصویر نیز پارامترهای متد fadeIn را نشان می دهد.
آموزش استفاده از jQuery در صفحات وب
جهت استفاده از jQuery، بایستی آن را به صفحاتی که می خواهید از کدهای آن استفاده کنند، اضافه نمایید. برای این منظور می بایست ابتدا این کتابخانه را از سایت www.jquery.com دانلود نمایید. با مراجعه به سایت مزبور با دو گزینه برای دانلود مواجه می شوید: 1. نسخه ی "Production" 2. نسخه ی "Development" . نسخه ی "Production" برای وب سایت ها live و آماده می باشد. این نسخه ی فشرده و کم حجم (minify) شده تا کم ترین میزان فضا را اشغال کند و برای کاربرانی که مرورگرها آن ها باید فایل jQuery را همراه با باقی اطلاعات سایت بارگیری کند، بهترین گزینه می باشد. اما برای آزمایش و توسعه، نسخه ی "Development" گزینه ی ارجح تلقی می شود. نسخه ی یاد شده فشرده سازی (minify)نشده و به همین خاطر در صورت برخورد با خطا می توانید مشاهده کنید خطا در کجا رخ داده است.
پس از دانلود فایل jQuery JavaScript، لازم است آن را به وسیله ی تگ< script>اچ تی ام ال به صفحه ی وب خود متصل کنید (خصیصه ی type تگ نام برده را با مقدار ="text/javascript" src="jquery-1.5.1.js" تنظیم نمایید یا به عبارتی دیگر در تگ script به آن ارجاع دهید). بهترین کار جایگذاری فایل دانلود شده ی jquery.js در پوشه ی متعلق به صفحه ای است که می خواهید از jQuery استفاده کند. سپس آن را در بخش < head> بگنجانید (در بخش head صفحه به آن ارجاع دهید):
اکنون بخشی از صفحه ی شما به شکل زیر خواهد:
jQuery test
یک روش جدیدتر (بجای دانلود jQuery و میزبانی آن) این است که jQuery را از یک CDN (تحویل محتوا روی شبکه) دریافت کنید. Google و Microsoft هر دو نسخه های مختلفی از کتابخانه ی مذکور و دیگر کتابخانه های جاوا اسکریپت را میزبانی می کنند. با این کار دیگر نیازی به دانلود و ذخیره ی فایل jQuery نیست. بعلاوه از آنجایی این فایل از یک URL مشترک با سایت دیگر دریافت می شود، به احتمال زیاد زمانی که کاربران به سایت شما مراجعه می کنند و مرورگر کتابخانه را درخواست می کنند، فایل نام برده از قبل در حافظه ی نهان (cache) آماده می باشد (به این دلیل که سایت دیگری دقیقا همین نسخه و فایل را از قبل استفاده می کند). همچنین بیشتر CDN ها اطمینان حاصل می کنند، وقتی کاربری فایلی را از آن درخواست می کند، آن فایل از طریق نزدیکترین سرویس دهنده به کاربر (از نظر موقعیت جغرافیایی و مکانی) تحویل داده شود. می توانید jQuery را از یک CDN، درست مانند زمانی که آن را دانلود می کنید، مورد استفاده قرار دهید. تنها چیزی که تغییر می کند، آدرس URL می باشد. برای نمونه، جهت اضافه کردن ویرایش jQuery 3.5.1 از سرورهای Google به صفحه ی وب مورد نظر، دستور زیر را وارد می کنید:
با CSS 3 تعدادی خاصیت جدید مربوط به پس زمینه در اختیار طراح وب قرار می دهد که امکان کنترل و مدیریت پس زمینه را در سطح پیشرفته تری فراهم می کند. در این فصل شما را با نحوه ی افزودن چندین تصویر پس زمینه به تنها یک المان آشنا می سازیم. همچنین با خاصیت های جدید زیر که در CSS3 عرضه شده آشنایی پیدا می کنید:
background-size background-origin background-clip
مرورگرهایی که در این جدول ارائه شده از این خاصیت نوین پشتیبانی می کنند
سی اس اس CSS3 به شما این امکان را می دهد با استفاده از خاصیت background-image چندین تصویر پس زمینه به المان خود اضافه کنید. تصاویر پس زمینه متمایز با استفاده از کاراکتر ویرگول از هم جدا شده و بر روی هم انباشته می شوند (قرار می گیرند) به گونه ای که اولین تصویر به بیننده از دیگر تصاویر نزدیک تر است. مثال زیر دارای دو تصویر پس زمینه است که اولین آن ها تصویر یک گل (که در پایین سمت راست تراز بندی شده و قرار گرفته) و دیگری یک پس زمینه ی کاغذ است (که در بالا سمت چپ قرار داده شده).
می توان چندین تصویر پس زمینه را یا با خاصیت مختصر نویسی (مقداردهی در تنها یک تعریف و به صورت خلاصه / به صورت خاصیت چند مقداری) به المان اضافه کرد و یا به صورت جداگانه (تعیین به صورت خاصیت تک مقداری( تصویر پس زمینه را به المان اضافه کرد مانند مثال فوق. مثال زیر از روش اول برای این منظور بهره می گیرد:
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
پیش از CSS3, تصویر پس زمینه همان اندازه ی اولیه و اصلی خود تصویر باقی می ماند. CSS3 این قابلیت را فراهم می کند که تصاویر پس زمینه را مجدداً در کانتکست ها و زمینه های مختلف بکار ببرید. اندازه ی تصاویر را می توان بر حسب پیکسل (بر حسب واحد length) , درصد (percentage) یا یکی از دو کلیدواژه ی contain یا cover تعریف کرد. مثال زیر تصویر پس زمینه را بسیار کوچکتر از اندازه ی اصلی آن تنظیم می کند (بر حسب پیکسل): تصویر اصلی:
زیر همان تصویر را مشاهده می کنید که مجدداً اندازه بندی شده است:
کد لازم برای عملیات فوق:
#div1 {
background: url(css3.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
همان طور که پیش تر ذکر شد دو مقادیر ممکن دیگر برای تعیین اندازه ی تصویر پس زمینه وجود دارند, کلید واژه های "contain" و "cover". کلید واژه ی "contain" تصویر پس زمینه را تا حد ممکن بزرگ مقیاس دهی و اندازه بندی می کنند (البته طول و عرض هر دو باید داخل کادر و محدوده ی محتوا جای گیرد). به عبارتی دیگر, عکس پس زمینه به اندازه محتویات درون عنصر بزرگ خواهد شد، تا ارتفاع وعرض آن اندازه المان شود. از این رو, بسته به نسبت و اندازه ی تصویر پس زمینه و همچنین مکان قرار گیری تصویر پس زمینه, ممکن است بخش هایی از پس زمینه توسط تصویر مربوطه پوشش داده نشود. کلید واژه ی "cover" تصویر پس زمینه را گونه ای مقیاس دهی می کند که کلاً ناحیه یا محدوده ی محتوا را تحت پوشش قرار دهد (هر دو عرض و ارتفاع تصویر باید با ناحیه ی محتوا برابر بوده یا از آن بیشتر شود). در حقیقت, عکس پس زمینه به اندازه محتویات درون عنصر کوچک خواهد شد، تا ارتفاع وعرض آن اندازه عنصر شود. از این رو, بخش هایی از تصویر ممکن است در محل موقعیت دهی قابل رویت نباشند. مثال زیر استفاده از این دو کلید واژه را در تنظیم اندازه ی تصویر پس زمینه, نمایش می دهد:
#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
اندازه ی چندین تصویر پس زمینه را به طور همزمان مقداردهی کنید
خاصیت background-size همچنین قادر است هنگام کار با چند پس زمینه, چندین مقدار برای تصویر پس زمینه بپذیرد (برای این منظور لازم است از لیستی که توسط ویرگول ایتم ها را از هم جدا می کند استفاده کنید). مثال زیر سه تصویر پس زمینه ی منحصر به فرد مشخص کرده, و برای هر تصویر یک مقدار background-size متمایز در نظر می گیرد:
مثال:
#example1 {
background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}
تصویر پس زمینه ی تمام صفحه
اکنون می خواهیم تصویر پس زمینه ی روی وب سایت خود پیاده کنیم که همواره (در همه شرایط) کل فضای موجود در پنجره ی مرورگر را پوشش دهد. شرایط لازم برای چنین تصویر به شرح زیر می باشد:
کل صفحه را با تصویر بپوشاند (هیچ گونه فضای سفیدی نباید وجود داشته باشد)
تصویر را متناسب با نیاز مقیاس دهی و اندازه بندی کند
تصویر در مرکز صفحه قرار گیرد
سبب ایجاد نوار پیمایش (scrollbar) برای مشاهده ی کل تصویر نشود
مثال زیر نحوه ی انجام عملیات مزبور را تشریح می کند. برای انجام این مثال کافی است از تگ html بهره بگیرید (زیرا که عنصر html همیشه حداقل از نظر ارتفاع با پنجره ی مرورگر مطابقت دارد). سپس یک پس زمینه ی وسط چین شده و ثابت روی آن مقدار دهی کنید. در مرحله ی نهایی عملیات اندازه ی تصویر را با استفاده از خاصیت background-size تنظیم کنید:
html {
background: url(img_flower.jpg) no-repeat center center fixed;
background-size: cover;
خاصیت background-origin در CSS3
خاصیت background-origin تعیین می کند تصویر پس زمینه در کدام موقعیت قرار بگیرد (نقطه ی شروع مکان قرار گیری پس زمینه ی المان مورد نظر را مشخص می کند). این خاصیت سه مقدار مقدار متفاوت می گیرد:
مثال زیر کاربرد خاصیت background-origin را نمایش می دهد:
#example1 {
border: 10px solid black;
padding:35px;
background:url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
خصوصیت background-clip در CSS3
این ویژگی به منظور تعیین مکان و نحوه قرار گیری پس زمینه در عنصر مورد نظر بکار گرفته می شود. خاصیت background-clip سه مقدار متفاوت می پذیرد که به شرح زیر است:
مثال زیر این خاصیت را کاربردی نمایش می دهد:
#example1 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: content-box;
}
کلیه ی خصوصیات مربوطه به پس زمینه در جدول زیر با ذکر شرح آن ارائه گردیده:
اسلاید Slidebars یک افزونه jQuery برای اجرای سریع و سبک منوها و نوارهای باریک افقی و عمودی در وب سایت شما است. Slidebars 2 پر از ویژگی های جذاب میباشد. تعداد نامحدودی از اسلایدها - دیگر فقط یک سمت چپ ، یک راست وجود ندارد.
اسلایدهای بالا و پایین.
آموزش طراحی سایت : رویدادها - نمایش اسلایدها رویدادهایی را نشان می دهد که نشان دهنده رفتار آن است.
سبک انیمیشن شیفت جدید.
مدت زمان بهبود انیمیشن.
سبک های چاپ
سبک وزن تنها 1.69kb gzipped
جهت استفاده از این افزونه لازم است ، ابتدا فایلهای cssو js لازم را در پروژه اضافه میکنیم.
< link href="css/slidebars.css" rel="stylesheet" >
< script src="js/jquery.js" >< /script >
< script src="js/slidebars.js" >< /script >
در بخش body صفحه Html ، صفحه به دو بخش محتوای اصلی و منو تقسیم میکنیم و محتوا دلخواه در آنها قرار میدهیم
رویدادهای ایجاد نمونه جدید، اعمال css روی منو که شامل shift و overlay ،push و reveal میباشد. مدل رفتاری منو در زمان باز و بسته شدن را نشان میدهد. رویداد باز و بسته شدن منو نیز از رویدادهای این افزونه میباشد.
پلاگین alertify ، پلاگینی سبک برای توسعه دیالوگ باکس و هشدارهای زیبا در مرورگر ها میباشد. از ویژگی های این پلاگین میتوان به قابلیت گسترش و سفارشی سازی آن ، واکنشگرا بودن ، قابلیت اعمال قالب روی آنها و راست چین بودن آنها اشاره کرد.
آدرس صفحه وبی که میخواهید نمایش دهید را Paste کنید
این پلاگین درواقع جایگزینی برای دیالوگ باکسهای پیش فرض مرورگرها است و استفاده ی بسیار آسانی دارد.
در ادامه قطعه کدهای استفاده از این پلاگین را به ازای هشدارهای متفاوت مرورگرها مشاهده میکنیم
نمایش پیام و یا هشدار:
if(!alertify.myAlert){
//define a new dialog
alertify.dialog('myAlert',function(){
return{
main:function(message){
this.message = message;
},
setup:function(){
return {
buttons:[{text: "cool!", key:27/*Esc*/}],
focus: { element:0 }
};
},
prepare:function(){
this.setContent(this.message);
}
}});
}
//launch it.
alertify.myAlert("Browser dialogs made easy!");
آموزش راه اندازی پلاگین alertify
.alert("This is an alert dialog.", function(){
alertify.message('OK');
});
دریافت تاییدیه از کاربر
alertify.confirm("This is a confirm dialog.",
function(){
alertify.success('Ok');
},
function(){
alertify.error('Cancel');
});
Run Example Documentation
دریافت ورودی از کاربر
alertify.prompt("This is a prompt dialog.", "Default value",
آموزش خواندن و نوشتن فایل در زبان برنامه نویسی پایتون
دستور open() یک شی فایل (file object) را باز می گرداند، و در اکثر مواقع با دو آرگومان استفاده می شود:
open(filename, mode)
>>> f = open('workfile', 'w')
آرگومان اول یک رشته شامل نام فایل است. آرگومان دوم یک رشته دیگر شامل تعداد کمی کاراکتر است که روش استفاده از فایل را توصیف می کند. حالت (mode) می تواند r باشد برای زمانی که فایل فقط خوانده می شود، w برای فقط نوشتن (فایل موجود با نام مشابه پاک خواهد شد)، و a فایل را برای افزودن(append) باز می کند؛
هر داده ای که در فایل نوشته شود به صورت خودکار به انتهای فایل اضافه می شود. r+ فایل را برای خواندن و نوشتن باز می کند. آرگومان حالت اختیاری است.
در صوت حذف، r در نظر گرفته می شود. به طور معمول فایل ها در حالت متن(text) باز می شوند، این به این معنی است که شما رشته ها را از فایل می خوانید و درون فایل می نویسید، که این فایل به یک روش رمزنگاری خاص کدگذاری شده است.
اگر روش رمزنگاری مشخص نشده باشد، پیش فرض وابسته به پلتفرم(platform) است
اگر b به حالت اضافه شود، فایل در حالت باینری (binary) باز می شود.، حال، داده در قالب اشیای بایت خوانده و نوشته می شود. این حالت باید برای همه فایل هایی که شامل متن نیستند استفاده شود.
هنگام خواندن در حالت متن، پیش فرض این است که انتهای خطوط خاص هر پلتفرم (n در Unix، rn در ویندوز) را فقط به n تبدیل کند. هنگام نوشتن در حالت متن، پیش فرض این است که هر جا n وجود دارد را به انتهای خطوط خاص هر پلتفرم بازگرداند. این تغییرات پشت پرده روی داده فایل برای فایل های متنی مشکلی ایجاد نمی کند، اما داده های باینری مانند فایل های JPEG یا EXE را خراب می کند.
در هنگام خواندن و نوشتن چنین فایل هایی بسیار مراقب استفاده از حالت باینری باشید. خوب است هنگام کار با اشیای فایل از کلمه کلیدی with استفاده کنید. مزیت آن این است که پس از اتمام مجموعه فایل، حتی درصورتی که در جایی یک استثنا رخ دهد، فایل به درستی بسته می شود. همچنین استفاده از with بسیار کوتاهتر از نوشتن بلاک try-finally برابر با آن است.
>>> with open('workfile') as f:
... read_data = f.read()
>>> # We can check that the file has been automatically closed.
>>> f.closed
True
اگر از کلمه کلیدی with استفاده نمی کنید، پس باید f.close() را فراخوانی کنید تا فایل را ببندد و فورا منابع سیستمی استفاده شده توسط آن را آزاد کند. اگر صریحا یک فایل را نبندید، زباله جمع کن پایتون (Python’s garbage collector) نهایتا شی را نابود می کند و فایل را برای شما می بندد، اما ممکن است برای مدتی فایل باز بماند. احتمال خطر دیگری که وجود دارد این است که پیاده سازی های مختلف پایتون، این عمل تمیز کردن را در زمان های مختلف انجام می دهند. پس از اینکه یک شی فایل بسته شد، تلاش برای استفاده از شی فایل چه از طریق عبارت with یا با فراخوانی f.close() ، به صورت خودکار شکست می خورد.
در بقیه مثال های این بخش فرض شده است که یک شی فایل به نام f پیش از این ایجاد شده است. برای خواندن محتویات یک فایل f.read(size) را فراخوانی کنید، که تعدادی داده را می خواند و به صورت یک رشته(در حالت متن) یا شی بایت (در حالت باینری) باز می گرداند.
سایز Size یک آرگومان عددی اختیاری است. زمانی که size حذف شود یا منفی باشد، کل محتویات فایل خوانده و باز گردانده می شود. این مشکل شماست اگر فایل دو برابر بزرگتر از حافظه سیستم شماست. در غیر این صورت، حداکثر اندازه کاراکتر (در حالت متن) یا اندازه بایت(در حالت باینری) خوانده و باز گردانده می شود. اگر به انتهای فایل رسیده باشیم، f.read() یک رشته خالی را باز می گرداند (‘ ‘).
>>> f.read()
'This is the entire file.n'
>>> f.read()
''
دستور f.readline() یک خط از فایل را می خواند. کاراکتر خط جدید (n) در انتهای رشته قرار می گیرد، و فقط زمانی حذف می شود که به آخرین خط فایل رسیده باشیم، و البته اگر فایل با خط جدید(n) تمام نشود. این باعث می شود تا مقدار بازگشتی واضح باشد. اگر f.readline() یک رشته خالی را باز گرداند، به انتهای فایل رسیدیم، در حالی که یک خط خالی توسط n نمایش داده شده است، یک رشته شامل تنها یک خط جدید.
>>> f.readline()
'This is the first line of the file.n'
>>> f.readline()
'Second line of the filen'
>>> f.readline()
''
برای خواندن خطوط از یک فایل، میتوانید روی شی فایل حلقه بزنید. این عمل از نظر حافظه کارآمد است، سریع است و ما را به یک کد ساده می رساند.
>>> for line in f:
... print(line, end='')
...
This is the first line of the file.
Second line of the file
اگر می خواهید همه خطوط یک فایل را بخوانید و در یک لیست قرار دهید، می توانید از list(f) یا f.readlines() استفاده کنید. f.write(string) محتویات رشته را درون فایل می نویسد، و تعداد کاراکتر های نوشته شده را باز می گرداند.
>>> f.write('This is a testn')
15
سایر انواع اشیا باید قبل از نوشته شدن، یا به یک رشته (در حالت متن) یا به یک شی بایت (در حالت باینری) تبدیل شوند.
>>> value = ('the answer', 42)
>>> s = str(value) # convert the tuple to string
>>> f.write(s)
18
دستور f.tell() یک عدد صحیح که مکان فعلی شی فایل را در فایل مشخص می کند، باز می گرداند. این مقدار بازگشتی به صورت عددی از بایت ها از آغاز فایل در حالت باینری و یک عدد opaque در حالت متن، نمایش داده می شود. برای تغییر مکان شی فایل، از f.seek(offset, whence) استفاده کنید.
مکان با افزودن offset به یک نقطه مرجع محاسبه می شود. نقطه مرجع توسط آرگومان whence انتخاب می شود. مقدار 0 برای whence ، از ابتدای فایل می سنجد، 1 از مکان فعلی استفاده می کند، و 2 از انتهای فایل به عنوان نقطه مرجع استفاده می کند. whence می تواند حذف شود و پیش فرض 0 است که از ابتدای فایل به عنوان نقطه مرجع استفاده می کند.
>>> f = open('workfile', 'rb+')
>>> f.write(b'0123456789abcdef')
16
>>> f.seek(5) # Go to the 6th byte in the file
5
>>> f.read(1)
b'5'
>>> f.seek(-3, 2) # Go to the 3rd byte before the end
13
>>> f.read(1)
b'd'
در فایل های متنی(آنهایی که بدون b در رشته حالت، باز شده اند)، تنها جستجوهای وابسته به شروع فایل مجاز است (استثنای جستجو از انتهای فایل با seek(0, 2) انجام می شود) و تنها مقادیر معتبر offset آنهایی هستند که یا صفر باشند یا توسط f.tell() باز گردانده شده اند.
هر مقدار offset دیگری، رفتار تعریف نشده ای را تولید می کند. اشیای فایل، متدهای اضافی دیگری هم دارند، مانند isatty() و truncate() که کمتر مورد استفاده قرار میگیرند.
آموزش ذخیره داده ساخت یافته با استفاده از json در آموزش پایتون
رشته ها را می توان به سادگی از فایل خواند یا درون فایل نوشت. اعداد نیاز به تلاش بیشتری دارد، از آنجایی که متد read() فقط رشته باز می گرداند، باید به یک تابع مانند int() پاس داده شود، که یک رشته مانند ‘123’ را می گیرد و مقدار عددی آن یعنی 123 را باز می گرداند. زمانی که بخواهید انواع داده پیچیده تری مانند لیست های تو در تو و دیکشنری ها را ذخیره کنید، پارس کردن (parsing) و سریال سازی دستی پیچیده می شود.
به جای اینکه کاربران مدام به نوشتن و اشکال زدایی کد برای ذخیره انواع داده پیچیده در فایل بپردازند، پایتون به شما این امکان را می دهد تا از فرمت تبادل داده محبوب به نام JSON (نماد شی جاوا اسکریپت)استفاده کنید.
ماژول استاندارد json می تواند سلسله مراتب داده پایتون را بگیرد، و آنها را به نمایش های رشته ای تبدیل کند. این روند سریال سازی (serializing) نام دارد. بازسازی داده از نمایش رشته ای، محصور کردن (deserializing) نام دارد. بین سریال سازی و محصور کردن، رشته ای که نمایشگر شی است ممکن است در یک فایل یا داده ذخیره شده باشد، یا از طریق ارتباطات شبکه به یک سیستم دور فرستاده شده باشد.
توجه !
معمولا برای تبادل داده، فرمت JSON توسط برنامه های کاربردی مدرن استفاده می شود. در حال حاظر بسیاری از برنامه نویسان با آن آشنا هستند، و همین آن را به یک گزینه خوب برای همکاری تبدیل کرده است.
اگر شی x را داشته باشید، می توانید نمایش رشته ای JSON آن را با یک خط کد ساده ببینید:
>>> import json
>>> json.dumps([1, 'simple', 'list'])
'[1, "simple", "list"]'
گونه دیگری از تابع dumps()، dump() نام دارد، که به سادگی شی را به یک فایل متنی سریال سازی می کند. بنابراین اگر f یک شی فایل متنی باشد که برای نوشتن باز شده باشد، می توانیم این کار را انجام دهیم:
json.dump(x, f)
برای رمزگشایی مجدد شی، اگر f یک شی فایل متنی باشد که برای خواندن باز شده باشد:
x = json.load(f)
این روش ساده سریال سازی می تواند لیست ها و دیکشنری ها را مدیریت کند، اما سریال سازی اختیاری نمونه های کلاس در JSON نیاز به کمی تلاش بیشتر دارد. مرجع مربوط به ماژول json در بردارنده توضیحاتی برای این موضوع است.
آموزش خطاها و استثناها در برنامه نویسی پایتون
تا اینجا به پیام های خطا فقط اشاره کردیم، اما اگر مثال ها را انجام داده باشید احتمالا به برخی از آنها برخورده اید. حداقل دو نوع خطای متمایز وجود دارد: خطاهای نحوی(نگارشی- syntax) و استثناها.
آموزش خطاهای نحوی در Python
خطاهای نحوی که همچنین با نام خطاهای parsing نیز شناخته شده هستند، شاید معمول ترین نوع خطا باشد که در حین یادگیری پایتون به آن بر می خورید.
>>> while True print('Hello world')
File "", line 1
while True print('Hello world')
^
SyntaxError: invalid syntax
آموزش Parser در Python
خط دارای خطا را تکرار می کند و یک فلش کوچکی را نمایش می دهد که به اولین نقطه در خط، جایی که خطا تشخیص داده شده است، اشاره می کند. خطا توسط علامتی که قبل از فلش وجود دارد رخ داده است یا حداقل در آن نقطه تشخیص داده شده است.
در این مثال، خطا در تابع print() تشخیص داده شده است، زیرا یک دو نقطه (:) قبل از آن حذف شده است. نام فایل و شماره خط چاپ شده است، بنابراین در صورتی که ورودی از یک script بیاید می دانید کجا به دنبال خطا بگردید.
آموزش استثناها در برنامه نویسی پایتون
حتی اگر یک عبارت یا اصطلاح از نظر نگارشی صحیح باشد، ممکن است زمانی که قصد اجرای آن را داریم، باعث بروز خطا شود. خطاهای تشخیص داده شده در حین اجرا، استثنا نام دارد و بی قید و شرط مهلک نیستند: به زودی نحوه مدیریت آنها در برنامه های پایتون را فرا خواهید گرفت. اغلب استثناها توسط برنامه ها مدیریت نمی شوند، اگرچه منجر به پیام های خطا می شوند که در اینجا نشان داده شده است.
>>> 10 * (1/0)
Traceback (most recent call last):
File "", line 1, in
ZeroDivisionError: division by zero
>>> 4 + spam*3
Traceback (most recent call last):
File "", line 1, in
NameError: name 'spam' is not defined
>>> '2' + 2
Traceback (most recent call last):
File "", line 1, in
TypeError: Can't convert 'int' object to str implicitly
آخرین خط در پیام خطا، بیان می کند که چه اتفاقی افتاده است. استثناها انواع مختلفی دارند، و نوع آنها به عنوان بخشی از پیام چاپ می شود.
نوع خطاها در این مثال ZeroDivisionError ، NameError و TypeError است. رشته چاپ شده به عنوان نوع استثنا، نام استثنای داخلی (built-in exception) است که رخ داده. این امر برای همه استثناهای داخلی صحت دارد، اما نیاز نیست برای استثناهای تعریف شده توسط کاربر نیز صحت داشته باشد (هرچند این یک قرارداد مفید است).
به طور کلی شامل یک ردیابی پشته ای است که خطوط کد را لیست می کند. اگر چه خطوط خوانده شده از ورودی استاندارد را نمایش نمی دهد. لینک Built-in Exceptions استثناهای درونی را بر می شمارد و معانی آنها را می گوید.
نوشتن برنامه هایی که استثناهای انتخاب شده را مدیریت کند امکان پذیر است. مثال زیر را ببینید که تا زمان دریافت عدد صحیح معتبر، از کاربر درخواست ورودی می کند.
اما به کاربر این امکان را می دهد که برنامه را قطع کند (با استفاده از کنترل +C و یا هر آنچه که سیستم عامل پشتیبانی می کند). توجه داشته باشید این قطع شدن برنامه که توسط کاربر رخ داده است با اعلام استثنای KeyboardInterrupt شناسانده می شود.
>>> while True:
... try:
... x = int(input("Please enter a number: "))
... break
... except ValueError:
... print("Oops! That was no valid number. Try again...")
...
عبارت try به صورت زیر کار می کند.
ابتدا، بخش try (عبارات بین دو کلمه کلیدی try و except) اجرا می شود.
اگر هیچ استثنایی رخ ندهد، از روی بخش except می پرد( این بخش اجرا نمی شود) و اجرای عبارت try تمام می شود.
اگر در حین اجرای بخش try استثنایی رخ دهد، از اجرای بقیه این بخش صرف نظر می کند. سپس اگر نوع خطای رخ داده با نام خطای نوشته شده پس از کلمه کلیدی except یکسان باشد، بخش except اجرا می شود، و سپس اجرا از پس از عبارت try ادامه می یابد.
اگر استثنایی رخ دهد که مشابه نام استثنا در بخش except نباشد، به خارج از عبارات بخش try منتقل می شود. اگر هیچ بخش مدیریتی (handler) وجود نداشته باشد، یک استثنای مدیریت نشده رخ داده است و اجرا با پیامی که در بالا نشان داده شده است متوقف می شود.
یک عبارت try ممکن است برای مدیریت استثناهای مختلف، بیشتر از یک بخش except داشته باشد. حداکثر یک بخش مدیریتی اجرا خواهد شد. بخش های مدیریتی، تنها استثناهای رخ داده شده در بخش try مربوطه را مدیریت می کنند، نه در سایر بخش های مدیریتی از عبارت try مشابه. یک بخش استثنا ممکن است چندین استثنا را در قالب یک چندتایی پرانتز دار نام ببرد. برای مثال:
... except (RuntimeError, TypeError, NameError):
... pass
یک کلاس درون یک بخش except ، با یک استثنا سازگار است، اگر همان کلاس مشابه یا یک کلاس پایه باشد. (اما عکس آن صادق نیست- یک بخش except که یک کلاس مشتق شده را لیست کرده است با یک کلاس پایه سازگار نیست). برای مثال، کد زیر B ,C ,D را به این ترتیب چاپ می کند.
class B(Exception):
pass
class C(B):
pass
class D(C):
pass
for cls in [B, C, D]:
try:
raise cls()
except D:
print("D")
except C:
print("C")
except B:
print("B")
توجه داشته باشید که اگر بخش های except معکوس شوند ( اول except B باشد)، B,B,B چاپ می شد—اولین بخش except فعال شده است.
آخرین بخش except ممکن است نام استثنا(ها) را حذف کند. از این قابلیت با احتیاط بسیار استفاده کنید، زیرا پنهان شدن یک خطای واقعی برنامه نویسی از این طریق به سادگی امکان پذیر است. همچنین از آن می توان برای چاپ یک پیام خطا و اعلام دوباره آن استثنا استفاده کرد (همچنین اجازه به فراخواننده برای مدیریت استثنا).
import sys
try:
f = open('myfile.txt')
s = f.readline()
i = int(s.strip())
except OSError as err:
print("OS error: {0}".format(err))
except ValueError:
print("Could not convert data to an integer.")
except:
print("Unexpected error:", sys.exc_info()[0])
raise
عبارت try … except دارای یک بخش else اختیاری است که در صورت وجود باید از همه بخش های استثنا پیروی کند. این برای کدی که بخش try آن استثنایی اعلام نکرده و باید اجرا شود، مفید است. برای مثال:
for arg in sys.argv[1:]:
try:
f = open(arg, 'r')
except OSError:
print('cannot open', arg)
else:
print(arg, 'has', len(f.readlines()), 'lines')
f.close()
استفاده از بخش else بهتر از افزودن کد اضافی به بخش try است، زیرا آن از گرفتن تصادفی استثنایی که توسط کدی که با عبارت try … except محافظت می شود، جلوگیری میکند. زمانی که یک استثنا رخ می دهد، ممکن است یک مقدار وابسته داشته باشد، که به عنوان آرگومان استثنا نیز شناخته می شود.
حضور و نوع آرگومان به نوع استثنا بستگی دارد. بخش except ممکن است یک متغیر را بعد از نام استثنا مشخص کند. متغیر به یک نمونه استثنا (exception instance) محدود است و آرگومان ها در instance.args ذخیره می شوند.
.برای سادگی، نمونه استثنا __str__() را تعریف می کند، بنابراین آرگومان ها می توانند مستقیما بدون نیاز به ارجاع به .args چاپ شوند. همچنین ممکن است ابتدا پیش از اعلام یک استثنا، مقدار دهی اولیه شود و هر ویژگی دلخواه به آن اضافه شود.
>>> try:
... raise Exception('spam', 'eggs')
... except Exception as inst:
... print(type(inst)) # the exception instance
... print(inst.args) # arguments stored in .args
... print(inst) # __str__ allows args to be printed directly,
... # but may be overridden in exception subclasses
... x, y = inst.args # unpack args
... print('x =', x)
... print('y =', y)
...
('spam', 'eggs')
('spam', 'eggs')
x = spam
y = eggs
اگر یک استثنا دارای آرگومان باشد، آنها همانند بخش آخر (‘detail’) پیام برای استثناهای مدیریت نشده، چاپ می شوند. بخش مدیریت استثنا فقط استثناها را در صورت وقوع فوری در بخش try مدیریت نمیکند، بلکه اگر درون توابع بخش try فراخوانی شوند یا حتی مستقیما در آن توابع رخ دهند نیز مدیریت می شوند. برای مثال:
راه اندازی محیط توسعه برای React Native برای Windows و Android
نصب پیش نیازها
برای این کار به Node، Python2، خط فرمان React Native، و JDK و Android Studio نیاز دارید.
می توانید از هر ویرایشگری برای توسعه application خود استفاده کنید، با این حال Android Studio را برای راه اندازی ابزارهای مورد نیاز برای build کردن application React Native خود برای android لازم خواهید داشت.
نصب Node, Python2, JDK
پیشنهاد می کنیم Nodeو Python2را با استفاده از Package Manager معروف Chocolatey برای Windows، نصب کنید.
ری اکت React Native به version جدیدی از package Java SE Development Kit) JDK) احتیاج دارد. همه این ها توسط Chocolatey قابل نصب است.CMD را با دسترسی administrator باز کنید و دستور زیر را اجرا کنید:
1choco install -y nodejs.install python2 jdk8
اگر Node را قبلا روی سیستم خود نصب کرده اید، مطئمن شوید versionآن 8.3 به بالا باشد.
اگر قبلا JDKرا نصب کرده اید، مطمئن شوید که از version 8 آن یا جدیدتر، استفاده می کنید.
می توانید راه های دیگر نصب Node را در این صفحه ببینید.
ابزار React Native CLI
نود Node با npm همراه است، که به شما امکان نصب خط فرمان React Native CLI را می دهد.
دستورات زیر را در ترمینال (cmdیا shell) اجرا کنید.
1npm install -g react-native-cli
اگر به خطایی مثل Cannot find module 'npmlog' برخوردید، npm را مستیم نصب کنید: curl -0 -L https://npmjs.org/install.sh | sudo sh
اگر در ابتدای راه توسعه ی androidباشید، راه اندازی محیط توسعه android کار خسته کننده ای است. اگر با توسعه android آشنا هستید، مواردی هست که باید configشوند. درهر دو حالت، لطفا گام های بعدی را با دقت دنبال کنید.
1. نصب Android Studio
اندروید Android Studio را دانلود و نصب کنید. گزینه ی “Custom” را موقع انتخاب نوع نصب، انتخاب کنید. تمام موارد زیر باید تیک خورده باشند:
• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM) (ببینید AMDبرای )
• Android Virtual Device گزینه “Next” را بزنید تا componentهای بالا نصب شوند.
اگر باکس های موارد بالا غیرفعالند می توانید بعدا component مربوطه را نصب کنید.
2. نصب Android SDK
اندروید Android Studio به طور پیش فرض آخرین version SDKرا نصب می کند. با این حال، build کردن یک application React Native به همراه کد native، نیاز به Android 9 (Pie) SDK دارد. SDK های دیگر از طریق SDK Manager در Android Studio قابل نصب هستند.
از صفحه ی "Welcome to Android Studio" گزینه ی "Configure" را انتخاب کنید. سپس "SDK Manager" را انتخاب کنید.
میتوان "SDK Manager" را در قسمت "Preferences" در خود Android Studio، از مسیر Appearance & Behavior → System Settings → Android SDK پیدا کرد.
تب "SDK Platforms" را در SDK Manager انتخاب کنید، سپس باکس کنار "Show Package Details" را در گوشه پایین سمت راست انتخاب کنید. Android 9 (Pie) را پیدا کنید، آن را باز کنید و موارد زیر را تیک بزنید:
Android SDK Platform 28
Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image
سپس تب "SDK Tools" را بزنید و باکس کنار "Show Package Details" را هم تیک بزنید. "Show Package Details" را پیدا کنید، آن را باز کنید و مطمئن شوید 28.0.3 انتخاب شده باشد.
در آخر، دکمه Applyرا بزنید تا Android SDK و بقیه ابزارهای build نصب شوند.
3. قسمت config ANDROID_HOME environment variable
ابزارهای React Native برای build کردن application با کد native نیاز به متغیرهای محیطی (environment variable) دارند.
در کنترل پنل System and Security را انتخاب کنید. در صفحه جدید Systemرا انتخاب کنید و روی Change settings کلیک کنید. تب Advanced را باز کنید و روی Environment Variables کلیک کنید. برای ساخت یک متغیر محیطی ANDROID_HOMEروی Newکلیک کنید.
به طور پیش فرض SDKدر مسیر زیر نصب شده است:
c:UsersYOUR_USERNAMEAppDataLocalAndroidSdk
میتوانید مکان SDKرا در Android Studioدر بخش "Preferences"، در مسیر Appearance & Behavior → System Settings → Android SDK پیدا کنید.
یک CMD جدید باز کنید و قبل از رفتن به مراحل بعد، از اضافه شدن متغیر محیطی جدید مطمئن شوید.
4. افزودن platform-tools به path
در control panel به بخش System and Security بروید. در صفحه جدید System را انتخاب کنید و روی Change settingsکلیک کنید. تب Advancedرا باز کنید و روی Environment Variables کلیک کنید. Path variable را انتخاب کنید، Edit را بزنید. سپس روی New کلیک کنید و مسیر platform-tools را به لیست اضافه کنید.
توسط خط فرمان React Native یک پروژه ی React Native جدید به اسم AwesomeProject ایجاد کنید:
1react-native init AwesomeProject
اگر میخواهید React Native را در یک application موجود ادغام کنید، یا اگر از Expo(یا Create React Native App) پروژه ای را eject کرده اید، یا اگر میخواهید پشتیبانی از iOS را به یک پروژه ی React Native اضافه کنید(کد پلتفرم-محور را ببینید)، این کار لازم نیست. همچنین می توانید از CLI های دیگری مثل Ignite CLI برای ساخت application React Native خود استفاده کنید.
استفاده از یک versionخاص
اگر می خواهید پروژه جدیدی را با یک version خاص از React Native بسازید، می توانید از آرگومان –version استفاده کنید:
به یک device androidنیاز دارید که application android React Native خود را روی آن اجرا کنید. می تواند یک موبایل باشد یا می توانید از Android Virtual Device به عنوان شبیه ساز device android روی کامپیوتر خود استفاده کنید.
درهرصورت، باید deviceرا برای اجرای applicationدرهنگام توسعه، آماده کنید.
استفاده از یک deviceفیزیکی
اگر یک device androidواقعی دارید، میتوانید به جای AVD از آن هنگام توسعه استفاده کنید. Device را با کابل USB به کامپیوتر وصل کنید و دستورالعمل این بخش را دنبال کنید.
استفاده از یک Virtual device
اگر با Android Studioپروژه ی ./AwesomeProject/androidرا باز کنید، می توانید لیستی از virtual device هایandroid را ببینید. از بخش "AVD Manager" ببینید. دنبال آیکنی شبیه عکس زیر بگردید:
اگر تازه Android Studioرا نصب کرده باشید، احتمالا باید یک AVD جدید بسازید. گزینه ی "Create Virtual Device..." را بزنید، سپس یکی از موبایل ها را از لیست انتخاب کنید و روی "Next" کلیک کنید. سپس Image Pie API Level 28 را انتخاب کنید.
اگر HAXM را نصب ندارید، این دستورالعمل را برای راه اندازی آن دنبال کنید، سپس به AVD Manager بازگردید.
روی "Next" و سپس "Finish" کلیک کنید. در این لحظه برای راه اندازی AVD ساخته شده، روی دکمه مثلثی سبز کنار AVD تان کلیک کنید . سپس به مرحله بعد بروید.
از دستور react-native run-android در پوشه ی مربوط به پروژه تان استفاده کنید:
Cd AwesomeProject
React-native run-android
اگر همه چیز درست انجام شده باشد باید application در شبیه ساز android اجرا شود.
دستور react-native run-android فقط یکی از راه های اجرای برنامه است. می توانید مستقیما از داخل Android Studio آن را اجرا کنید.
اگر دراین روش با مشکل مواجه شدید صفحه Troubleshooting را ببینید.
تغییر در application
حال که توانستید بدون مشکل applicationرا اجرا کنید، می توانید آن را تغییر دهید.
• فایل App.js را در ویرایشگر دلخواه خود باز کنید و تغییری در برنامه بدهید.
• کلید R را دوبار فشاردهید یا گزینه ی Reload از منوی Developer (Ctrl + M) بزنید تا تغییرات را ببینید!
تمام شد!
تبریک میگویم. شما اولین برنامه React Native خود را اجرا کرده اید!
قدم بعدی؟
• از منوی Developer، Live Reload را فعال کنید. اکنون برنامه با هر تغییری در کد، به طور اتوماتیک reload می شود.
• اگر می خواهید به یک applicationموجود کد React Native اضافه کنید بخش راهنمای ادغام applicationهای موجود با React Native را ببینید.
اگر می خواهید درمورد React Native بیشتر بدانید با ادامه این آموزش همراه باشید.
راه اندازی محیط توسعه برای React Native برای Mac و iOS:
نصب پیش نیازها
برای اینکار به Node، Watchman، خط فرمان React Native، و XCode نیاز دارید.
می توانید از هر ویرایشگری برای توسعه application خود استفاده کنید، با این حال XCode برای راه اندازی ابزارهای مورد نیاز برای build کردن application React Native برای iOS لازم است.
نصب Node, Watchman, JDK
توصیه می شود برای نصب این سه از Homebrew استفاده کنید. بعد از نصب Homebrew، دستورات زیر را در ترمینال اجرا کنید:
brew install node
brew install watchman
brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8
اگر Node را قبلا روی سیستم خود نصب کرده اید، مطئمن شوید version آن 8.3 به بالا باشد.
واچمن Watchman ابزاری برای Facebook برای دنبال کردن تغییرات در فایل سیستم است. پیشنهاد می کنم برای performance بهتر آن را نصب کنید.
اگر قبلا JDK را نصب کرده اید، مطمئن شوید که از version 8 آن یا جدیدتر، استفاده می کنید.
ابزار React Native CLI
نود Node با npm همراه است، که به شما امکان نصب خط فرمان React Native CLI را می دهد.
دستورات زیر را در ترمینال اجرا کنید.
npm install -g react-native-cli
اگر به خطایی مثل Cannot find module 'npmlog' برخوردید، npm را مستقیم نصب کنید: curl -0 -L https://npmjs.org/install.sh | sudo sh
Xcode
راحتترین روش نصب Xcode، استفاده از Mac App Store است. نصب Xcode با نصب شبیه ساز iOS و همه ابزارهای مورد نیاز build برای application iOS ها همراه خواهد بود.
اگر قبلا Xcode را نصب کرده اید، مطمئن شوید version 9.4 یا جدیدتر آن باشد.
ابزار خط فرمان
باید ابزار خط فرمان Xcode (Xcode Command Line Tools) را نیز نصب کنید. Xcode را باز کنید و از منوی آن Preferences را انتخاب کنید. به پنل Locations بروید . در بخش Command Line Tools جدیدترین version ابزار Command Line Tools را پیدا کرده و آن را نصب کنید.
ساخت یک application
توسط خط فرمان React Native یک پروژه ی React Native جدید به اسم AwesomeProject ایجاد کنید:
react-native init AwesomeProject
اگر می خواهید React Native را در یک application موجود ادغام کنید، یا اگر از Expo (یا Create React Native App) پروژه ای را eject کرده اید، یا اگر می خواهید پشتیبانی از iOS را به یک پروژه ی React Native اضافه کنید(کد پلتفرم - محور را ببینید)، این کار لازم نیست. همچنین می توانید از CLI های دیگری مثل Ignite CLI برای ساخت application React Native خود استفاده کنید.
استفاده از یک version خاص
اگر می خواهید پروژه جدیدی را با یک version خاص از React Native بسازید، میتوانید از آرگومان –version استفاده کنید:
از دستور react-native run-ios در پوشه ی مربوط به پروژه تان استفاده کنید:
1cd AwesomeProject
1react-native run-ios
اپلیکیشن application در شبیه ساز iOS اجرا می شود:
دستور react-native run-ios فقط یکی از روش های اجرای برنامه است. می توانید به طور مستقیم از درون Xcode آن را اجرا کنید.
اگر دراین روش با مشکل مواجه شدید صفحه Troubleshooting را ببینید.
اجرای برنامه روی device
دستور بالا به طور پیش فرض برنامه شما را روی شبیه ساز اجرا می کند. اگر می خواهید آن را روی یک device iOS اجرا کنید دستورالعمل های این بخش را دنبال کنید.
تغییر در application
حال که توانستید بدون مشکل application را اجرا کنید، می توانید آن را تغییر دهید.
· فایل App.js را در ویرایشگر دلخواه خود باز کنید و تغییری در برنامه بدهید.
· در شبیه ساز iOS خود ⌘R را بزنید تا application از اول اجرا شود و تغییرات را ببینید.
تمام شد!
تبریک می گویم. شما اولین برنامه React Native خود را اجرا کرده اید!
قدم بعدی؟
· از منوی Developer، Live Reload را فعال کنید. اکنون برنامه با هر تغییری در کد، به طور اتوماتیک reload می شود.
اکنون که چند مقدار پیش فرض داریم، می توانیم متدی را اضافه کنیم که مقادیر مختلفی را برای آنها تنظیم می کند. متد زیر را به گروه StudentResultsخود اضافه کنید.
در آموزش جاوااین متد جدید fullName نامیده می شود و دارای یک متغیر String جدید به نام aName بین پرانتزهای آن می باشد. این متد کار بزرگی انجام نمی دهد و به خاطر سادگی در اینجاست. می توانستیم متدی داشته باشیم که کارهای بیشتری انجام دهد، از جمله چک کردن خطاها، اطمینان حاصل کردن در رابطه با یک مورد مناسب، بررسی رشته های خالی و غیره. اما نکته ی مهم این است که این متد برای فیلد Full_Name یک مقدار تنظیم می کند و این فیلد را به عنوان یک مقدار باز می گرداند. وقتی این متد را فرا می خوانیم، مقدار پیش فرض را برای Full_Name خواهد نوشت و یک مقدار جدید وارد خواهد کرد. هر آنچه در متغیر aName است، مقدار جدید Full_Name خواهد بود. اجازه بدهید این مورد را در عمل ببینیم.
روی back کلیک کنید تا به گروه ExamDetails بازگردید. دو خط زیر را به آن اضافه کنید.
مثال:
1String sName = aStudent.fullName("Bill Gates");
1System.out.println( sName );
کد مربوط به گروه ExamDetails باید مشابه زیر باشد.
آنچه در اینجا انجام می دهیم، فراخوانی متد fullName از آبجکت aStudent می باشد. ما در حال توزیع مقدار "Bill Gates" می باشیم. این مقدارمربوط به فیلد Full_Name نیز خواهد بود. ( این مقدار می توانست برای خطاها بررسی شده، اصلاح شود و سپس در یک فیلد ذخیره شود.) سپس مقدار Full_Name بازگردانده شده و در متغیر sName ذخیره می شود.
درست مانند متدهایی که در بخش قبل ایجاد کردیم، گرچه متد fullName روی لیست NetBeans می باشد. به هرحال توجه داشته باشید که constructor در آنجا نیست.
برای امتحان آن کد خود را اجرا کنید. پنجره ی Output باید صفحه ی زیر را نمایش دهد.
بنابراین آنچه انجام داده ایم امتحان کردن یک مقدار برای یک متغیر فیلد در یک گروه به نام StudentResults می باشد. سپس به آن مقدار دسترسی پیدا کرده و آن را چاپ می کنیم.
حالا اجازه بدهید متدی وارد کنیم که واقعا کار مفیدی انجام می دهد. کاری که انجام خواهیم داد این است که به یک یوزر اجازه می دهیم تا یک کد امتحان دو حرفی وارد کند. سپس آن دو حرف را به متدی انتقال خواهیم داد که دو حرف را به نام یک امتحان بازمی گرداند. برای مثال اگر یک یوزر دو حرف "VB" را وارد کند، متد رشته ی "Visual Basic .NET" را گزارش خواهد داد. رشته ی بلندتر در متغیر فیلد Exam_Name ذخیره خواهد شد.
کد زیر را به گروه StudentResults، درست زیر متد fullName اضافه کنید.
متد examName دارای یک متغیر رشته به نام examCode می باشد که بین پرانتزهای آن قرار می گیرد. این رشته آن دو حرف می باشد. خطوط IF … ELSE IF بررسی می کنند تا ببینند کدام دو حرف در رشته می باشند. اگر یک هماهنگی برای دو دو حرف پیدا کردیم، تیتر بلندتر در فیلد Exam_Name قرار می گیرد. اگر هیچ گونه هماهنگی پیدا نشد، متن مربوط به فیلد "No Exam Selected" خواهد بود.
به گروه ExamDetails خود بازگشته و خط زیر را به آن اضافه کنید.
مثال:
1String exam = aStudent.examName("VB");
دوباره ما در حال فراخوانی متد می باشیم. به حروف "VB" دسترسی داریم. متد مقدار "Visual Basic .NET" را گزارش می دهد و سپس آن را در متغیر رشته ای که آن را exam نامیدیم، ذخیره می کند. یک print line جدید اضافه کنید، کد شما باید مانند زیر باشد.
سپس کد خود را اجراکنید، Outout مشابه زیر می باشد.
آموزش متودهای بیشتری در جاوا
بنابراین ما نام یک دانش آموز و نام یک امتحان داریم. هر دو در فیلد اسم ها در گروه StudentResults ذخیره می شوند. اکنون می توانیم یک نمونه ی امتحان نیز ذخیره کنیم.
متد جدید زیر را درست بعد از متد examName در گروه خود اضافه کنید.
این متد جدید examScore نامیده می شود با یک متغیر int به نام aScore بین پرانتزهای آن. این متد برای بازگرداندن یک مقدار String تنظیم شده است. خود متد نمره را با رشته ی " out of 50" ترکیب می کند. بنابراین اگر مقدار در aScore عدد 30 باشد، متن "30 out of 50" در فیلد Exam_Score ذخیره خواهد شد.
در گروه ExamDetails ، خط زیر را اضافه کنید.
مثال:
1String score = aStudent.examScore(30);
بنابراین متد جدید examScore را فرا می خوانیم و به آن مقدار 30 را می دهیم. مقدار در فیلد Exam_Score بازگردانده می شود، و سپس در یک متغیر رشته ذخیره می شود که ما آن را نمره (score) نامیده ایم.
یک متد print line جدید اضافه کنید، بنابراین کد شما شبیه به کد ما در زیر می شود.
بنابراین ما نام دانش آموز، نام امتحان و نمره از 50 را در دست داریم. اکنون به پنجره ی خروجی می توانیم یک درجه نیز اضافه کنیم.
برای درجه از حروف مجزا استفاده می کنیم: A، B, C، D، یا E. اگر دانش اموزی نمره ی 41 یا بیشتر بگیرد، حرف A را به آن اختصاص می دهیم. اگر نمره بین 31 و 40 باشد، درجه مربوطه B خواهد بود. برای نمره ی بین 21 تا 30 حرف C اختصاص داده می شود. درجه ی D نمره ی بین 11 تا 20 می باشد و حرف E برای نمرات بین 0 تا 10 می باشد.
برای محاسبه ی درجات بالا متد زیر را اضافه کنید.( آن را به گروه StudentResults خود اضافه کنید)
دقت داشته باشید که این متد privat (خصوصی) می باشد. درست مانند متغیرهای فیلد، خصوصی ساختن یک متد به این معناست که آن متد تنها در داخل این گروه قابل مشاهده می باشد و می تواند به وسیله ی گروه ExamDetails مشاهده شود.
برای به دست آوردن درجه، متد دیگری را در داخل گروه StudentResults تنظیم خواهیم کرد و از آن برای به دست آوردن درجه استفاده می کنیم. متد زیر را درست در بالای متد getGrade اضافه کنید.(گرچه اگر تمایل داشته باشید، می توانید آن را در زیر این متد نیز اضافه کنید: در جاوا هیچ فرقی نمی کند)
1مثال:
1String examGrade(int aScore) {
1
1 Exam_Grade = this.getGrade( aScore) ;
1 return Exam_Grade;
1 }
این متدی است که به جای متد getGrade از گروه ExamDetails فرا خوانی می کنیم. نام این متد جدید examGrade می باشد و مجددا آن را به نمره ی دانش آموز انتقال می دهیم. به این خط دقت کنید.
مثال:
1Exam_Grade = this.getGrade( aScore );
در اینجا متد getGrade فراخوانده می شود و آن را به نمره ای انتقال می دهیم که توزیع شده بود. فراخوانی یک متد از متد دیگر یک تمرین استاندارد می باشد، و به شما اجازه می دهد تا کد خود را ساده کنید. جایگزین آن داشتن متدهای خیلی بلند می باشد که خواندن آنها سخت است.
مورد دیگری که در خط بالا باید به آن توجه داشت لغت کلیدی this در جاوا می باشد. لغت کلیدی this به معنای "this class" می باشد و نه گروه دیگری که ممکن است دارای متد هم نام باشد. این امر از هر گونه سردرگمی جلوگیری می کند. این مسئله زیاد ضروری نیست و می توانید آن را نادیده بگیرید. فراخوانی متد هنوز بدون آن کار می کند.
مثال:
1Exam_Grade = getGrade( aScore );
گرچه نتیجه ی نهایی هنوز همان است: ما در حال ذخیره سازی چیزی در فیلد متغیر Exam_Grade می باشیم و آن عبارت خواهد بود از عبارت "Grade is" به علاوه ی یک حرف مربوط به درجه.
برای امتحان کردن متدهای جدید، خط زیر را به گروه ExamDetails اضافه کنید.
مثال:
1String grade = aStudent.examGrade(30);
این خط مقداری برابر 30 را به متد examGrade می دهد. سپس در فیلد متغیر Exam_Grade مقداری گزارش می شود و در متغیری به نام grade ذخیره می شود.
با یک print line، گروه ExamDetails باید به شکل زیر باشد.
برنامه ی خود را اجرا کنید تا پنجره ی Output را مشاهده کنید.
اگر برنامه ی شما به درستی کار نمی کند، در اینجا کد کامل مربوط به گروه StudentResults را مشاهده می کنید.
در این بخش چگونگی ایجاد آبجکت ها را فرا خواهید گرفت. یادگیری کلاس ها را تقریبا در یخش قبل آغاز کرده اید. اکنون به جزئیات بیشتری می پردازیم. در برخی موارد در مورد تفاوت بین یک آبجکت و کلاس گیج می شوید، گرچه وقتی درمورد یک کلاس صحبت می کنیم در واقع در مورد خود کد صحبت می کنیم، کدی که کاری انجام نمی دهد. وقتی کد را برای انجام کار فعال می سازید، این کد یک آبجکت می باشد.
وقتی کلاسی ایجاد می کنید، یک کد برای انجام یک کار خاص می نویسید. این کار ممکن است مربوط به یک کارمند باشد، اما فروش شرکت نیز در همان زمان شکل نمی گیرد. برای آمار فروش باید یک کلاس مجزا بنویسید. به این روش می توانید از کلاس کارمند (employee) در یک پروژه ی دیگر استفاده کنید. آمار فروش داده ی برکنار شده (redundant data) می باشند.
وقتی که سعی دارید نظریه های خود را در کلاس ها به کار برید، باید مسئله ی برکناری را در ذهن داشته باشید و از خود بپرسید: " آیا کدی در این کلاس وجود دارد که نیازی به آن در اینجا نیست؟"
در مورد مثال مربوط به این بخش، کلاسی خواهیم نوشت که شامل چند تمرین خواهد بود. روی وب سایت ما (www.tahlildadeh.com) چند امتحان وجود دارد که می توانید به رایگان به آنها دسترسی داشته باشید. در یک زمان سوال داده می شود و هر امتحان دارای 50 سوال می باشد. تمرین های مختلفی وجود دارند که می توانید به آنها دسترسی داشته باشید. در مورد مثال ما، سوالات را ساده می کنیم. نام شخصی که امتحان می گیرد، ایمکه کدام امتحان گرفته شده، نمره از 50 و یک درجه را ثبت می کنیم.
اجازه بدهید که یکی از موارد را شروع کنیم.
برای این مسئله یک پروژه ی جدید جاوا ایجاد کنید. پوشه ی exams را فرا بخوانید و سپس نام متود را از Main به ExamDetails تغییر دهید. سپس باید کد زیر را داشته باشید.
کلاس دومی ایجاد خواهیم کرد تا داده ی امتحان را بررسی کنیم. بنابراین در NetBeans از نوار منو روی File کلیک کنید. از منوی File گزینه ی New File را انتخاب کنید. Java را در لیست Categories و Java Class را در لیست File Types مشخص کنید. سپس روی Finish کلیک کنید. NetBeans در پروژه ی شما یک کلاس دوم ایجاد خواهد کرد. شما می توانید کامنت های پیش فرض را حذف کنید.
در بخش قبل در مورد متغیرهای داخل متدها صحبت کردیم. متغیرهایی که داخل متدها تنظیم می کنید، تنها در دسترس همان متدها می باشند و در متدهای دیگر قرار نمی گیرند، گفته می شود که دارای دامنه ی داخلی می باشند.
به هرحال می توانید متغیرهایی را در خارج از متدها تنظیم کنید که همه ی متدهای موجود در گروه شما می توانند ببینند. این متغیرها، متغیرهای Field (یا متغیرهای Instance) نامیده می شوند. می توانید آنها را دقیقا به روش دیگر متغیرها تنظیم کنید. چهار فیلد زیر را گزوه جدید StudentResult اضافه کنید.
ما چهار رشته متغیر (چهار رشته فیلد) تنظیم می کنیم. همانطور که نام فیلدها نشان می دهد، رشته حاوی نام یک شخص، نام یک امتحان، یک نمره و یک درجه می شود. این چهار فیلد در دسترس همه ی متدهایی که در این گروه نوشتیم، قرار می گیرند و برای متدها داخلی نیستند. گفته می شود که دارای دامنه ی جهانی می باشند.
برای اینکه چگونگی جهانی بودن آنها را مشاهده کنیم، به گروه ExamDetails خود بازگردید، گروهی با متد اصلی (main). برای ایجاد یک آبجکت جدید از گروه StudentResults ، کد زیر را اضافه کنید.
این همان کاری می باشد که در بخش قبل انجام دادهیم – استفاده از یک لغت کلیدی جدید برای ایجاد یک آبجکت جدید. نام آبجکت aStudent خواهد بود و از نوع StudentResults می باشد که گروه ماست.
در خط بعدی نام متغیر (aStudent) را که با یک نقطه (dot) دنبال می شود، تایپ کنید. به محض اینکه نقطه را تایپ کردید، NetBeans لیستی از متدها و پراپرتی های موجود در آبجکت شما را ارائه می دهد.
چهار فیلدی که تنظیم کردیم، روی لیست قرار دارند. اینها متد نیستند، بلکه چیزی به نام پراپرتی می باشند. این واقعیت که آنها روی لیست هستند، به این معناست که دارای دامنه ی جهانی می باشند. اگر دارای دامنه ی داخلی بودند، روی لیست قرار نمی گرفتند.
شما می توانید مقادیری را برای پراپرتی ها تنظیم کنید. این مورد را امتحان کنید: کد مشخص شده ی زیر را به متد اصلی خود اضافه کنید.
ما فیلد Exam_Name را از لیست انتخاب کرده ایم و به آن مقدار "VB NET" اختصاص داده ایم. سپس خط بعدی مقدار Exam_Name را از آبجکت aStudent می گیرد. نتیجه در متغیری به نام امتحان (exam) ذخیره شده و سپس چاپ می شود. وقتی برنامه را اجرا می کنید، خروجی رشته ی "VB Net" می باشد.
بنابراین چهار متغیری که تنظیم کرده ایم، در هر دو گروه در دسترس می باشند.
به هرحال جهانی ساختن متغیرهای فیلد، مانند این مورد، فکر خوبی نیست. شما تمایل به از دست دادن پیگیری مقادیری را دارید که در این متغیرها می باشند، بنابراین اشکال زدایی کد شما بسیار سخت تر می شود. محدود کردن دامنه ی متغیرهای فیلد، برنامه نویسی خوبی تلقی می شود.
برای اینکه یک متغیر فیلد تنها در دسترس یک گروه خاص باشد، درست قبل از اعلام فیلد لغت کلیدی private را وارد کنید. کد را در گروه StudentResults مانند زیر تغییر دهید.
اکنون تنها کد موجود در گروه StudentResults می تواند این متغیرها را ببیند. برای بررسی به عقب، به متد اصلی خود بازگردید. باید چند اخطار و خطوط قرمز مشاهده کنید.
سه خط را در پایین حذف کنید. aStudent را و سپس یک نقطه تایپ کنید تا لیست NetBeans را مشاهده کنید.
همانطور که مشاهده می کنید، اکنون چهار متغیر فیلد محو شده اند. علت حذف آنها این است که دیگر دامنه ی جهانی ندارند و بنابراین از گروه ExamDetails قابل مشاهده نیستند.
در بخش بعد در مورد چیزی به نام class constructor خواهید آموخت.
آموزش سازنده در جاوا
از آنجایی که متغیرهای فیلد را خصوصی ساخته ایم، نیاز به راه دیگری برای اختصاص دادن مقادیر به آنها داریم. یک راه برای انجام آن استفاده از constructor (سازنده) می باشد. این دروافقع متودی است که می توانید برای تنظیم مقادیر اولیه ی متغیرهای فیلد استفاده کنید. وفتی آبجکت ایجاد می شود، ابتدا جاوا constructor را فرا می خواند. سپس هر کدی که در این سازنده دارید، اجرا می شود. نیازی به هیچگونه فراخوانی خاصی به یک متود constructor ندارید – در هنگام ایجاد یک آبجکت این اتفاق به طور خودکار انجام می شود.
متودهای Constructor هم نام گروه می باشند. Constructor زیر را به گروه StudentResults اضافه کنید.
بنابراین نام این Constructor (سازنده) نیز StudentResults می باشد. این دقیقا همان نام گروه می باشد. برخلاف متودهای عادی، گروه constructor ها به نوع بازگشتی مانند int یا double و کلا هیچ گونه گزارشی نیاز ندارد. به هرحال شما می توانید مقادیر را به constructor های خود انتقال دهید. اگر بخواهیم مقادیر را به متغیرهای فیلد انتقال دهیم، می توانیم مانند زیر عمل کنیم.
در اینجا دو متغیر String به پرانتزهای constructor اضافه کرده ایم. در داخل پرانتزها این مقادیر را به فیلدهای Full_Name و Exam_Gradeاختصاص داده ایم. وقتی که یک آبجکت جدید ایجاد می کنید، نیاز به دو رشته بین پرانتزهای نام گروه دارید.
1StudentResults aStudent = new StudentResults( "Bill Gates", "A" );
وقتی آبجکت ایجاد می شود، مقادیر "Bill Gates" و "A"در constructor بررسی می شوند.
به هرحال تنظیم چند مقدار پیش فرض برای متغیرهای فیلد فکر خوبی است. این مقادیر در هنگام ایجاد آبجکت، اختصاص داده می شوند. کد زیر را به constructor خود اضافه کنید.
اکنون هر وقت یک آبجکت StudentResults جدید ایجاد می شود، هر چهار متغیر فیلد ما دارای مقدار پیش فرض می باشند. دقت کنید که اکنون هیچ چیز بین پرانتزهای گروه constructor وجود ندارد.
در بخش بعد به دسترسی به گروه متغیرها خواهیم پرداخت.
آموزش ایجاد یک آیتم غیر فعال (Disabled) در لیست Bootstrap 4:
برای تعیین یک آیتم در لیست به صورت غیر فعال (Disabled) بایستی کلاس .disabled را به عنصر اضافه کنید. در این حالت، رنگ نوشته آیتم به صورت خاکستری و کم رنگ در می آید و غیر فعال خواهد بود. همچنین در لیست های لینکی، قابلیت hover آن ها نیز از بین می رود.
مثال: در مثال زیر، یک لیست در بوت استرپ 4، ایجاد کرده ایم که آیتم اول و دوم آن، غیر فعال است.
اگر می خواهید آیتم های لیست در بوت استرپ 4، به صورت افقی یا Horizontal به جای عمودی Vertical (در کنار هم به جای قرار گرفتن بر روی هم) نمایش داده شوند، کلاس .list-group-horizontal را به عنصر مادر لیست (تگ
یا
با کلاس list-group)، اضافه نمایید، همانند کد مثال عملی زیر:
مثال 6
First item
Second item
Third item
Fourth item
آموزش استفاده از کلاس های رنگی متنی در لیست بوت استرپ 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
Success item
Secondary item
Info item
Warning item
Danger item
Primary item
Dark item
Light item
آموزش ایجاد لیست لینک دار رنگی در Bootstrap 4:
همانند مثال بخش های قبلی، می توانید از کلاس های رنگی ویژه بوت استرپ 4 در لیست های لینک دار هم استفاده کنید، با این تفاوت که در لیست های لینک دار از تگ های
آموزش ایجاد لیست های گروهی نشان دار Badges List در Bootstrap 4:
می توانید با ترکیب کلاس badge و چند کلاس کمکی دیگر در بوت استرپ 4، لیست هایی دارای نشانه های عمودی یا متنی (Badge List) ایجاد نمایید، همانند عکس زیر:
مثال: در کد مثال عملی زیر یک لیست نشان دار یا Badge List ایجاد کرده ایم. روال کار همانند یک لیست ساده بوت استرپ 4 است. با این تفاوت که برای اضافه کردن Badge یک تگ مثل با کلاس .badge و یکسری کلاس کمکی دیگر، درون هر آیتم لیست قرار داده ایم:
مثال 9
Inbox
12
Ads
50
Junk
99
نکته :
می توانید اعداد درون Badge را به صورت ایستاتیک تعریف کرده یا با استفاده از jQuery و Ajax آن را به صورت دینامیک نیز تغییر دهید.
رنگ پیش فرض چرخنده (Spiner) در بوت استرپ 4، مشکی (Black) است.
آموزش ساخت چرخنده Spiner رنگی در بوت استرپ 4:
با استفاده از کلاس های رنگی متنی ویژه بوت استرپ 4 (سری- text)، همانند کد مثال عملی زیر، می توانید چرخنده Spiner با رنگ های مختلف و مفهومی ایجاد کنید :
آموزش ساخت چرخنده های بزرگ شونده Growing Spinner:
اگر از کلاس .spinner-grow به جای .spinner-border استفاده کنید، چرخنده یا Spiner ایجاد شده، به جای چرخیدن، از سایز کوچک شروع شده و بزرگ می شود. در کد مثال عملی زیر، نحوه استفاده از این کلاس و خروجی آن را نشان داده ایم:
مثال 3
آموزش ساخت دکمه با چرخنده های متحرک در بوت استرپ 4:
می توانید یک المنت با کلاس .spinner-border یا .spinner-grow را درون یک دکمه یا button قرار داده و آن را به یک دکمه لود تبدیل کنید. در این حالت می توانید برای دکمه متن نیز تعیین کرده یا خالی بگذارید.
مثال: در کد مثال عملی زیر، نحوه ایجاد انواع دکمه با چرخنده های متحرک در Bootstrap 4 را نشان داده ایم:
مثال 5
Loading..
Loading..
Loading..
آموزش صفحه بندی Pagination در Bootstrap 4:
اگر سایتی دارید که دارای تعدادی زیادی صفحه است، حتما نیاز پیدا خواهید کرد صفحه بندی یا Pagination ی همانند زیر را برای پیمایش صفحات سایت ایجاد نمایید :
برای ایجاد یک صفحه بندی Pagination ساده در صفحات وب سایت تان با ستتفاده از بوت استرپ 4، ابتدا یک تگ
آموزش غیر فعال کردن لینک یک صفحه در صفحه بندی Pagination:
در صورت اعمال کلاس .disabled به لینک یک صفحه در صفحه بندی Bootstrap 4، لینک آن صفحه به صورت غیر فعال نشان داده شده و کاربر نمی تواند بر رویش کلیک نماید :
مثال : در کد مثال زیر، با استفاده از کلاس .disabled، لینک صفحه قبل (Previous) را غیر فعال کرده ایم:
آموزش تعیین جهت قرارگیری صفحه بندی Pagination Alignment:
به صورت پیش فرض در بوت استرپ 4، دکمه های صفحه بندی Pagination از سمت چپ تراز می شوند اما از کلاس های ویژه utility در Bootstrap 4 برای وسط چین یا راست چین کردن آن ها می توانید استفاده کنید :
مثال: در کد مثال عملی زیر، از کلاس ویژه کاربردی بوت استرپ 4 (utility Classess) استفاده کرده و جهت چینش در منوی صفحه بندی دوم و سوم را به دلخواه تغییر داده ایم :
مثال 5
...
...
...
راهنمایی :
در بخش آموزش کلاس های کاربردی بوت استرپ 4 به آموزش کار با Bootstrap Utility Class پرداخته شده است.
آموزش ایجاد صفحه بندی خطی Breadcrumb Pagination:
مدل دیگه ای از صفحه بندی و ایجاد منوی صفحات در Bootstrap 4، منوی خطی یا نوار پیمایش افقی (به انگلیسی Breadcrumb) است. در این مدل منو، کل مسیر طی شد تا صفحه جاری نمایش داده می شود :
مثال : برای ایجاد یک منوی خطی Breadcrumb در بوت استرپ 4، بایستی کلاس .breadcrumb را به تگ
