From ed2c9751e26d161ad81d86a8d50985cb964d30a1 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:01 +0100 Subject: unslug fa: move --- .../installing_basic_software/index.html | 54 +++ .../javascript_basics/index.html | 420 +++++++++++++++++++++ .../publishing_your_website/index.html | 126 +++++++ .../what_will_your_website_look_like/index.html | 101 +++++ .../index.html" | 420 --------------------- .../index.html" | 126 ------- .../index.html" | 54 --- .../index.html" | 101 ----- .../author_fast-loading_html_pages/index.html | 127 +++++++ .../fa/learn/javascript/objects/basics/index.html | 254 +++++++++++++ .../index.html" | 254 ------------- files/fa/learn/server-side/first_steps/index.html | 45 +++ .../index.html" | 45 --- 13 files changed, 1127 insertions(+), 1000 deletions(-) create mode 100644 files/fa/learn/getting_started_with_the_web/installing_basic_software/index.html create mode 100644 files/fa/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/fa/learn/getting_started_with_the_web/publishing_your_website/index.html create mode 100644 files/fa/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html delete mode 100644 "files/fa/learn/getting_started_with_the_web/\331\205\331\202\330\257\331\205\330\247\330\252_\330\254\330\247\331\210\330\247\330\247\330\263\332\251\330\261\333\214\331\276\330\252/index.html" delete mode 100644 "files/fa/learn/getting_started_with_the_web/\331\205\331\206\330\252\330\264\330\261_\332\251\330\261\330\257\331\206_\331\210\330\250\330\263\330\247\333\214\330\252_\330\264\331\205\330\247/index.html" delete mode 100644 "files/fa/learn/getting_started_with_the_web/\331\206\330\265\330\250_\331\206\330\261\331\205_\330\247\331\201\330\262\330\247\330\261\331\207\330\247\333\214_\331\276\330\247\333\214\331\207/index.html" delete mode 100644 "files/fa/learn/getting_started_with_the_web/\331\210\330\250_\330\263\330\247\333\214\330\252_\330\264\331\205\330\247_\332\206\331\207_\330\264\332\251\331\204\333\214_\330\247\330\263\330\252\330\237/index.html" create mode 100644 files/fa/learn/html/howto/author_fast-loading_html_pages/index.html create mode 100644 files/fa/learn/javascript/objects/basics/index.html delete mode 100644 "files/fa/learn/javascript/objects/\331\205\331\202\330\257\331\205\330\247\330\252/index.html" create mode 100644 files/fa/learn/server-side/first_steps/index.html delete mode 100644 "files/fa/learn/server-side/\331\202\330\257\331\205_\330\247\331\210\331\204/index.html" (limited to 'files/fa/learn') diff --git a/files/fa/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/fa/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..a4e8158d1c --- /dev/null +++ b/files/fa/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,54 @@ +--- +title: نصب نرم افزارهای پایه +slug: Learn/Getting_started_with_the_web/نصب_نرم_افزارهای_پایه +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
+ +
+

در نصب نرم افزار پایه، نشان می دهیم که برای توسعه وب به چه ابزارهایی نیاز دارید و چگونه آنها را نصب نمایید.

+
+ +

حرفه ای ها از چه ابزارهایی استفاده می کنند؟

+ + + +

در حال حاظر به چه ابزارهایی نیاز دارید؟

+ +

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

+ +

نصب یک ویرایشگر متن

+ +

احتمالا بر روی کامپیوتر خود یک  text editor خیلی ساده دارید. بطور پیش فرض Notepad در ویندوز و TextEdit در مکیناش هستند. در توزیع های مختلف لینوکس، اوضاع متفاوت است; مثلا در ابونتو(Ubuntu) ، gedit به صورت پیش فرض وجود دارد.

+ +

برای توسعه وب می توان چیزی بهتر از Notepad یاTextEdit داشت. توصیه ما این است که با Brackets شروع کنید، که ویژگی هایlive previews و code hints را ارائه می کند.

+ +

نصب مرورگرهای جدید وب

+ +

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

+ + + +

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

+ +

نصب یک وب سرور محلی

+ +

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

+ +

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

diff --git a/files/fa/learn/getting_started_with_the_web/javascript_basics/index.html b/files/fa/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..85c20598af --- /dev/null +++ b/files/fa/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,420 @@ +--- +title: مقدمات جاوااسکریپت +slug: Learn/Getting_started_with_the_web/مقدمات_جاوااسکریپت +tags: + - آموزش + - جاوا‌ اسکریپت + - مقدماتی + - وب +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +

{{PreviousNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}

+ +
+

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

+
+ +

جاوااسکریپت واقعا چیست؟ 

+ +

{{Glossary("جاوااسکریپت")}} یک زبان برنامه نویسی کاملا داینامیک است که زمانیکه به اسناد {{Glossary("HTML")}} اعمال میشود، تعامل پویا با وبسایت را ممکن میکند. جاوااسکریپت توسط برندان ایخ یکی از موسسین پروژه موزیلا، بنیاد موزیلا و شرکت موزیلا، ساخته شد.

+ +

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

+ +

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

+ +

واسط‌ های برنامه نویسی کاربردی  ({{Glossary("API","APIs")}}) — APIs ،  در داخل مرورگر تعبیه شده اند تا کارهایی مانند ایجاد پویایه HTML  و تنظیم استایل های CSS ، یا گرفتن و دستکاری یک استریم ویدئو از وب کم کاربر، یا ایجاد گرافیک های سه بعدی و نمونه های صوتی را فراهم کنند.

+ + + +

یک مثال ساده

+ +

قسمت بالا واقعا هیجان انگیز به نظر میرسد و باید هم اینطور باشد -جاوا اسکریپت یکی از مهیجترین تکنولوژی های شبکه اینترنت است وقتی شما شروع به پیدا کردن مهارت در آن میکنید وب سایت شما وارد یک بعد جدید از قدرت و خلاقیت میگردد.

+ +

اما راحت بودن با جاوا اسکریپت از راحت بودن با HTML  و CSS مقداری سخت تر است. شاید شما مجبور باشید که با قدم های استوار از کارهای کوچک شروع کنید. برای شروع، ما به شما نشان میدهیم چطور کدهای جاوا اسکریپت ساده و ابتدایی به صفحه تان اضافه کنید. ساختن مثال "hello world!"(the standard in basic programming examples.)

+ +
+

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

+
+ +
    +
  1. ابتدا, به صفحه وب آزمایشی خود بروید و یک فایل جدید با نام main.js بسازید و آن را در فولدر scripts خود ذخیره کنید.
    2. +
  2. سپس به فایل index.htm رفته و عناصر زیر را در یک خط جدید و پیش از  </body> بنویسید.
    3. +
+ +
<script src="scripts/main.js"></script>
+ +

3. این دقیقا همان کاری است که با عنصر {{htmlelement("link")}} برای وارد کردن CSS میکنیم.— با این کار دستوزات جاوااسکریپت را به سند HTML خود اضافه می کنید بنابراین روی HTML,CSS و سایر عناصر صفحه تاثیر خواهد گذاشت.

+ +

4. اکنون کد زیر را به فایل main.js اضافه کنید: 

+ +
var myHeading = document.querySelector('h1');
+myHeading.innerHTML = 'Hello world!';
+ +

5. حالا مطمئن شوید فایل های HTML و Javadcript ذخیره شده اند. سپس index.html را در مرورگر باز کنید. باید چیزی مشابه تصویر زیر مشاهده کنید. 7

+ +

+ +
+

توجه : دلیل اینکه ما از تگ {{htmlelement("script")}} در پایان محتوا فایل HTML استفاده می کنیم این است که کد جاوا‌‌‌‌‌‌‍‌اسکریپت مستقیم از درون فایل HTML توسط مرورگر لود شود . اگر کد جاوااسکریپت را در بالای محتوای موجود در فایل HTML قرار دهیم  در اینصورت  محتوای زیرین HTML تحت تاثیر عملکرد کد جاوااسکریپت خواهند بود و به همین دلیل کد جاوااسکریپت را در پایینترین بخش محتوا صفحه  HTML می گذاریم .

+
+ +

قدم بعدی چیست ؟

+ +

خوب همانطور که امتحان کردید شما با کمک جاوااسکریپت متن موجود در سرتیتر (تگ H1) را به متن "Hello World"   تغییر دادید.  این عمل را با صدا زدن تابع {{domxref("Document.querySelector", "querySelector()")}} بمنظور ارجاع دادن به سرتیتر H1 و ذخیره آن در متغییر myHeading  انجام داده اید. این عمل بسیار به شبیه کاری است که ما selectors در CSS انجام می دهیم. زمانی که می خواهید روی یک تگ یا المان عملی را انجام دهید احتیاج است اول آن را انتخاب کنید.

+ +

بعد از آن متن یا محتوا مورد نظر را  به متغییر myHeading   که توسط تابع {{domxref("Element.innerHTML", "innerHTML")}} تعریف شده است ٫ به ویژگی محتوای متن  تگ H1  محتوای "Hello World" مقدار دهی می شود.

+ +

توضیح پایه ای زبان

+ +

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

+ +
+

نکته مهم: سعی کنید در زمان مطالعه‌ی این مقاله کدهای مثال را در کنسول مرورگر خود اجرا کنید تا نتیجه‌ی کار را بهتر درک کنید . برای جزئیات بیشتر برای کار کردن با کنسول مرورگر اینجا << بررسی ابزارهای توسعه مرورگر>> کلیک کنید .

+
+ +

متغییرها

+ +

{{Glossary("Variable", "Variables")}} نگهدارنده هایی هستند که شما میتوانید مقادیر را درون آن ها نگهداری کنید. با تعریف یک متغیر با استفاده از کلمه کلیدی var شروع کنید، سپس با یک نام دلخواه کار را ادامه دهید:

+ +
var myVariable;
+ +
+

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

+
+ +
+

توجه: شما می توانید تقریبا هر نامی به یک متغییر بدهید اما محدودیت هایی برای تعریف نام وجود دارد (برای آشنای بیشتر با قوانین نام گذاری متغیرها اینجا را کلیک کنید )

+
+ +
+

نکته: جاوااسکریپت به حروف کوچک و بزرگ حساس است و نام متغییرmyVariable  با نام myvariable  از نظر جاوااسکریپت متفاوت است. اگر مشکلی در فراخوانی و بدست آوردن مقدار از یک متغییر تعریف شده دارید بزرگ یا کوچک بودن حروف نام متغییر را چک کنید !

+
+ +

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

+ +
myVariable = 'Bob';
+ +

شما میتوانید مقداررا تنها با فراخوانی نام متغیر بدست آورید:

+ +
myVariable;
+ +

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

+ +
var myVariable = 'Bob';
+ +

پس از دادن یک مقدار به متغیر شما میتوانید آن را تغییر دهید:

+ +
var myVariable = 'Bob';
+myVariable = 'Steve';
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
متغییرتوضیحمثال
{{Glossary("String")}} +

متغییر رشته ای برای نگهداری مقدار متن استفاده می شود. حتمی برای مقدار دهی به متغییر متنی باید  متن یا محتوا در کوتیشن قرار دهید.

+ 		var myVariable = 'Bob';
{{Glossary("Number")}} +

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

+ 		var myVariable = 10;
{{Glossary("Boolean")}} +

متغییر درست یا غلط . کلمات true/false بعنوان کلیداصلی در JS تعریف شده اند و در زمان مقدار دهی نیاز به استفاده از کوتیشن ندارند

+ 		var myVariable = true;
{{Glossary("Array")}} +

این ساختار(آرایه) اجازه می دهد چندین مقدار را با یک نام ذخیره کنید.

+ 		+

var myVariable = [1,'Bob','Steve',10];
+ هر عضو از متغییر(آرایه) مانند زیر می توان صدا زد:

+ +

myVariable[0], myVariable[1], ... .

+
{{Glossary("Object")}} +

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

+ +

n.

+ 		var myVariable = document.querySelector('h1');
+ مثال های بالای در این مقاله.
+ +

اگر شما تازه برنامه نویسی را شروع کرده باشید حتمی از خودتان می پرسید چرا به متغییرها نیاز داریم ؟ خوب٫ ما به متغییرها نیاز داریم تا همه کارهای جالب را انجام بدیم.  اگر نتوانیم مقدار را تغییر دهیم پس نمی توانیم هیچ چیز داینامیک یا  پویایی را بسازیم مانند یک پیام تبریک خصوصی یا نمایش یک عکس از مجموعه گالری عکس ها . در هر عمل پویایی نیاز به متغییر داریم.

+ +

نظر ها  (یادداشت ها)

+ +

در کد جاوااسکریپت مانند سی اس اس می توانید نظر (یادداشت) بگذارید :

+ +
/*
+Everything in between is a comment.
+*/
+ +

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

+ +
// This is a comment
+
+ +

عملیات ها

+ +

{{Glossary("operator")}} نماد یک عمل  ریاضی است که نتیجه را بر اساس دو مقدار (یا متغییر) تولید می کند. در جدول زیر بعضی از عملیات های ساده لیست شده اسند که می توانید در کنسول مرورگر آنها را امتحان کنید.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
عملتوضیحنماد(ها)مثال
بعلاوه / جمع +

زمان جمع دو مقدار عددی و یا برای بعلاوه ( پیوست دادن) دو رشته استفاده می شود.

+ 		+6 + 9;
+ "Hello " + "world!";
تفریق, ضرب, تقسیم +

عمل های پایه ریاضی را انجام می دهند و فقط روی مقدار عدد قابل استفاده هستند.

+ 		-, *, /9 - 3;
+ 8 * 2; // multiply in JS is an asterisk
+ 9 / 3;
مقدار دهیدر مثال می بینید با کمک مساوی مقدار به متغییر داده شده است.=var myVariable = 'Bob';
عمل تطابق +

در یک آزمایش خواهید دید وقتی دو مقدار باهم برابر نباشند مقدار بازگشت داده شده از عمل مقایسه مقدار صحیح یا غلط (true/false) خواهد بود. 

+ 		===var myVariable = 3;
+ myVariable === 4;
عدم تساوی / نه منطقی +

 (true )عدم تساوی یا نه منطقی (نات منطقی) زمانی مقدار صحیح برمی گردادند که دو طرف تساوی باهم مساوی نباشند. اگر دو طرف تساویی مساوی باشند مقدار غلط (false)  بر می گرداند

+ 		!, !== +

The basic expression is true, but the comparison returns false because we've negated it:

+ +

var myVariable = 3;
+ !myVariable === 3;

+ +

Here we are testing "is myVariable NOT equal to 3". This returns false, because it IS equal to 3.

+ +

var myVariable = 3;
+ myVariable !== 3;

+
+ +

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

+ +
+

نکته مهم: ترکیب چند نوع  متفاوت از متغییرها در زمان محاسبه باعث ایجاد نتایج عجیبی می شود ٫ پس مراقب باشید متغییرها را به درستی استفاده کنید تا نتیجه صحیح بگیرید. برای مثال در کنسول خود عبارت  "35" + "25" وارد کنید. چرا نتیجه ای که فکر می کنید را نخواهید ؟ زیرا اعداد بین دوتا نماد نقل قول است پس کامپایلر مثل جمع رشته با آن برخورد می کند نه بعلاوه عدد صحیح. اگر شما 35 + 25 در کنسول وارد کنید نتیجه صحیح را خواهید دید.

+
+ +

شرط ها

+ +

شرط ها در ساختار کد به شما اجازه می دهند در صورت صحیح یا غلط بودن یک عبارت مقدار یا فرمانی اجرا شود و اجرای  ٫ بستگی به خروجی شرط دارد .  رایج ترین  ساختار شرطی :  if ... else  است بصورت نمونه :

+ +
var iceCream = 'chocolate';
+if (iceCream === 'chocolate') {
+  alert('Yay, I love chocolate ice cream!');
+} else {
+  alert('Awwww, but chocolate is my favorite...');
+}
+ +

عبارت درون  if ( ... ) یک شرط است  - این شرط  می گوید  اگر مقدار متغیر iceCream  برابر با مقدار رشته یی chocolate  بود پس نتیجه شرط true (صحیح) است در نتیجه تکه کد درون  {} اجرا می شود و اگر شرط برقرار نبود یا به عبارتی غلط بود از تکه کد اول می گذرد و تکه کد بعد از else  اجرا خواهد شد. 

+ +

توابع 

+ +

{{Glossary("Function", "Functions")}} یک روش برای بسته بندی دستورات است که می خواهید برای چند بار از آن استفاده کنید ٫ فارغ از اینکه چه زمان می خواهید از این مجموعه دستورات استفاده کنید با صدا زدن نام تابعی که این دستورات در درون آن قرار دارند می توانید آنها را بارها بدون تکرار اجرا کنید.  شما نمونه ای از توابع را در مثال های قبل دیدید. بصورت نمونه:

+ +
    +
  1. + 
    var myVariable = document.querySelector('h1');
    +
    2. +
  2. + 
    alert('hello!');
    +
    3. +
+ +

توابع بالا در درون بروزر وجود دارند و هر زمان بخواهید می توانید آنها را صدا بزنید.

+ +

اگر شما چیزی شبیه نام متغییر دیدید که جلوی آن پرانتز های باز و بسته () وجود دارد آن چیز حتمی تابع است.  توابع معمولا پارامترهایی ({{Glossary("Argument", "arguments")}} ) را به عنوان ورودی می گیرند و این اطلاعات را لازم دارند تا بتواند کار خود را انجام دهند. پارامترهای ورودی در در بین علامت های پرانتز قرار می گیرند و در صورتی که بیشتر از یک پارامتر ورودی وجود داشته باشد با علامت کاما از یک دیگر جدا می شوند.

+ +

برای نمونه تابع alert() باعث می شود که  باکس پاپ آپ در پنجره مرورگر نمایش داده شود ولی  برای نمایش دادن باکس پاپ آپ نیاز هست مقداری به عنوان پارمتر ورودی توسط تابع دریافت ٫ تا عمل انجام گردد.

+ +

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

+ +
function multiply(num1,num2) {
+  var result = num1 * num2;
+  return result;
+}
+ +

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

+ +
multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);
+ +
+

توجه: عبارت return به مرورگر می گوید مقدار درون متغییر result به عنوان خروجی یا نتیجه محاسبه تابع در نظر بگیر. این عمل اجباری است زیرا متغییرهای تعریف شده در درون تابع فقط در دسترس داخل همان تابع خواهد بود . به موضوع تعیین قوانین و شرایط دسترسی به متغییرهای درون تابع {{Glossary("Scope", "scoping")}} می گویند. برای اطلاعات بیشتر در مورد اسکوپینگ متغییرها ( محدود دسترسی به متغییر) به اینجا مراجعه کنید.

+
+ +

رویداد ها

+ +

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

+ +
document.querySelector('html').onclick = function() {
+    alert('Ouch! Stop poking me!');
+}
+ +

روش های زیادی وجود دارد که برای المان یا تگ یک رویداد تعریف کرد. در کد زیری ما المان (تگ) HTML را توسط یک رویداد با نام onclick بدون تعریف یک نام  به بصورت مستقیم تابعی بدون نام به آن نسبت داده ایم ٫ محتوا تابع همان کدهای خواهند بود که زمان عمل کلیک می خواهیم اجرا شوند.

+ +

به این کد توجه کنید:

+ +
document.querySelector('html').onclick = function() {};
+ +

نتیجه اجرای کد بالا با پایین یکی است:

+ +
var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};
+ +

این بهینه تر است!

+ +

یک مثال فوق العاده از وبسایت

+ +

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

+ +

+ +

تعویض کننده تصویر

+ +

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

+ +
    +
  1.  اول از همه عکس مورد علاقه خود را که می خواهید در سایت شما نمایش داده شود پیدا کنید فقط در نظر بگیرید با عکس اول هم اندازه باشد یا در حد امکان سایز آن نزدیک به تصویر قبلی باشد .
    2. +
  2. تصویر را در فولدر images  ذخیره کنید.
    3. +
  3. فایل main.js  باز کنید و کد زیر را وارد کنید (اگر کد سلام دنیا شما در فایل وجود دارد آن را پاک کنید):
    4. +
+ +
var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var mySrc = myImage.getAttribute('src');
+    if(mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute ('src','images/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','images/firefox-icon.png');
+    }
+}
+ +

تمام تغییرات را در فایل ها باز را ذخیره کنید و فایل index.html را توسط مرورگر اجرا کنید. حالا زمانی که روی تصویر کلیک می کنید باید تصویر بعدی را به شما نمایش دهد.

+ +

کاری که در کد بالا کردیم ٫ المان image  را در متغییر myImage بعنوان منبع ذخیره کردیم . در مرحله بعد توسط رویداد onclick به ویژگی مربوط به گرفتن محل یک تابع نوشتم که بعد از هر کلیک اتفاقات زیر برای المان تصویر پیش می آید:

+ +
    +
  1. مقدار ویژگی src را در درون متغییر ریختیم.
    2. +
  2. مقدار درون متغییر را با شرط مقایسه کردیم و اگر مقدار برابر با src بود کد درون شرط اجرا می شود .
    3. +
  3.  اگر شرط صحیح بود مقدار ویژگی  src  به تصویر دوم تغییر داده می شود و تصویر در درون المان {{htmlelement("image")}}  نمایش در می آید.
    4. +
  4. اگر شرط صحیح نبود  یعنی تصویر به تازگی تغییر کرده است و مقدار ويژگی src  به محل ذخیره سازی تصویر اول(اصلی) می بایست تغییر نشانی دهد .
    5. +
+ +

اضافه  کردن یک پیام خوش آمد گویی

+ +

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

+ +
    +
  1.  در فایل index.html را بعد از المان (تگ)   {{htmlelement("script")}} وارد کنید 
    2. +
  2. + 
    <button>Change user</button>
    +
    3. +
  3. در فایل main.js در پایین ترین بخش فایل دقیقا تک کد زیر را وارد کنید .در کد زیر یک رونوشت مانند از المان های button  (دکمه) و heading (عنوان)  در متغییر ها ریخته شده .
    4. +
  4. + 
    var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');
    +
    5. +
  5. تابع زیر را در فایل اضافه کنید . در حال حاضر کاری انجام نمی دهد اما بعدا خواهید دید
    6. +
  6. + 
    function setUserName() {
+  var myName = prompt('Please enter your name.');
+  localStorage.setItem('name', myName);
+  myHeading.innerHTML = 'Mozilla is cool, ' + myName;
+}
    + تابع prompt() یک جعبه دریافت متن نمایش می دهد مانند  alert() با این تفاوت  در prompt() از کاربر اطلاعاتی را به عنوان ورودی می گیرد و در ادامه در متغییری بعد از زدن دکمه اوکی ذخیره می کند. ما در اینجا از کاربر خواسته ایم نام خود را وارد کند و در ادامه با کمک API  و صدا زدن تابع localStorage اطلاعات وارد شده (نام) را در حافظه داخلی مرورگر ذخیره می کنیم . ما  از حافظه محلی (حافظه محلی مرورگر)  بوسیله تابع setItem()  و اختصاص دادن اسم 'name'  به اطلاعاتی که در درون متغیر myName  می باشدرا  ذخیره کردیم و این اطلاعات ذخیره شده همان نامی است که توسط کاربر وارد شده است.
    7. +
  7. کد if ... else را اضافه کنید بهتر ایست این قسمت از کد را بخش مقدار دهی اولیه نام گذاری کنیم زیرا در اینجا مشخص می شود چه زمان باید چه اتفاقی پیش آید
    8. +
  8. + 
    if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
+}
    + کد درون شرط نه منطقی زمانی اجرا می شود که اطلاعاتی برای  name در ذخیره سازی محلی وجود نداشته باشد و در نتیجه تابع setUserName() فراخوانی می شود( نامی که کاربر در بازدید قبلی داده است ست می شود) این نام از طریق استفاده از تابع getItem()  و مقدار دریافت مقدار  بازگشتی از تابع  و دادن این مقدار برای تنظیم (ست کردن) بوسیله innerHTML صورت می گیرد.
    9. +
  9. در پایان رویداد onclick  که برای دکمه تعیین شده است تابع setUserName() فراخوانی می کند . این عمل به کاربر اجازه می دهد هر زمان که بخواهد با کلیک روی این دکمه بتواند هر نام جدیدی که می خواهد وارد کند
    10. +
  10. + 
    myButton.onclick = function() {
+  setUserName();
+}
+
    +
    11. +
+ +

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

+ +

نتیجه گیری

+ +

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

+ +

+ +

اگر به مشکلی بر خوردید می توانید کار خود را با نسخه نهایی مثال ما که کد آن روی گیت‌هاب موجود است مقایسه کنید.

+ +

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

+ +

{{PreviousNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}

diff --git a/files/fa/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/fa/learn/getting_started_with_the_web/publishing_your_website/index.html new file mode 100644 index 0000000000..1292676834 --- /dev/null +++ b/files/fa/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,126 @@ +--- +title: منتشر کردن وبسایت شما +slug: Learn/Getting_started_with_the_web/منتشر_کردن_وبسایت_شما +tags: + - آموزش + - اف تی پی + - انتشار + - مقدماتی + - وب + - وب‌سرور + - گوگل اپ انجین + - گیت‌هاب +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
+ +
+

بعد از اتمام کد نویسی و سازماندهی و ساخت وبسایت ٫ زمان انتشار آن بصورت آنلاین فرا می رسید تا مردم بتوانند به وبسایت شما مراجعه کنند.  در این مقاله روش انتشار کدهای که شما نوشته اید بصورت آنلاین را توضیح می دهد.

+
+ +

گزینه ها چیست ؟

+ +

انتشار وبسایت یک موضوع (مبحث) ساده ای نیست . زیرا روش های متفاوتی برای این عمل وجود دارد . در این مقاله تمام روش های موجود پوشش داده نشده است بلکه رایج ترین روش های که  یک فرد مبتدی به راحتی از آن استفاده کند توضیح داده شده ست .

+ +

گرفتن فضا و دامنه

+ +

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

+ + + +

بسیار از از حرفه ها از این طریق وبسایت خود را بارگذاری می کنند.

+ +

In addition, you will need a {{Glossary("FTP", "File Transfer Protocol (FTP)")}} program (see How much does it cost: software for more details) to actually transfer the website files over to the server. FTP  programs vary widely, but generally you have to log on to your web server using details provided by your hosting company (e.g. username, password, host name). Then the program shows you your local files and the web server's files in two windows, so you can transfer them back and forth:

+ +

+ +

Tips for finding hosting and domains

+ + + +

استفاده از ابزارهای آنلاین مثل گیت‌هاب و گوگل اپ انجین

+ +

Some tools let you publish your website online:

+ + + +

Unlike most hosting, such tools are usually free to use, but you only get a limited feature-set.

+ +

استفاده از IDE  مثل Thimble

+ +

There are a number of web apps that emulate a website development environment, allowing you to enter HTML, CSS and JavaScript and then display the result of that code when rendered as a website — all in one browser tab. Generally speaking these tools are quite easy, great for learning, and free (for basic features), and they host your rendered page at a unique web address. However, the basic features are pretty limited, and the apps usually don't provide hosting space for assets (like images).

+ +

Try playing with some of these examples, and see which one you like the best:

+ + + +

+ +

انتشار در مقابل گیت‌هاب

+ +

Now let's take you through how to easily publish your site via GitHub Pages.

+ +
    +
  1. First of all, sign up for GitHub and verify your email address.
    2. +
  2. Next, you need to create a repository for your files to go in.
    3. +
  3. On this page, in the Repository name box, enter username.github.io, where username is your username. So for example, our friend bobsmith would enter bobsmith.github.io.
    + Also check Initialize this repository with a README and then click Create repository.
    4. +
  4. After that, drag and drop the content of your website folder into your repository and then click Commit changes.
    + +
    +

    Note: Make sure your folder has an index.html file.

    +
    +
    5. +
  5. +

    Now navigate your browser to username.github.io to see your website online. For example, for the username chrisdavidmills, go to chrisdavidmills.github.io.

    + +
    +

    Note: It may take a few minutes for your website to go live. If it doesn't work immediately, you may have to wait a few minutes and then try again.

    +
    +
    6. +
+ +

To learn more, see GitHub Pages Help.

+ +

مطالعه بیشتر

+ + + +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

+ +

مرتبط به مقاله

+ + diff --git a/files/fa/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/fa/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html new file mode 100644 index 0000000000..3f68570e18 --- /dev/null +++ b/files/fa/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,101 @@ +--- +title: وب سایت شما چه شکلی است؟ +slug: Learn/Getting_started_with_the_web/وب_سایت_شما_چه_شکلی_است؟ +tags: + - آموزش + - طراحی + - طرح + - فونت + - محتوا + - مقدماتی + - منابع +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
+ +
+

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

+
+ +

قبل از شروع کار: برنامه ریزی

+ +

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

+ +

برای شروع لازم هست که به سوالات زیر پاسخ دهید:

+ +
    +
  1. وب سایتتان در مورد چیست؟ حیوانات را دوست دارید یا،شهر اصفهان، یا بازی شبگرد؟
    2. +
  2. در مورد این موضوع چه اطلاعاتی را رائه می کنید؟ یک عنوان و چندتا پاراگراف بنویسید، و بعد از آن در مورد تصویری فکر کنید که می خواهید در صفحه خود نمایش دهید.
    3. +
  3. به صورت خیلی کلی، وب سایت شما چه شکلی است. رنگ پس زمینه چه شکلی است؟ چه سبکی از فونت مناسب کار شماست: رسمی، کارتونی، ضخیم و شلوغ، ظریف.
    4. +
+ +
+

توجه: پروژه های خیلی پیچیده به دستورالعمل (guidelines) جزئی تری نیاز دارند که تمامی جزئیات مربوط رنگها، فونت ها، فاصله بین موارد داخل صفحه، حالت مناسب نوشته ها، و ... را تعیین کند. گاهی اوقات آن را راهنمای طراحی (design guide) یا کتاب برند (brand book) می گویند، که می توانید نمونه از آن را در دستورالعمل های سیستم عامل فایرفاکس (Firefox OS Guidelines)  ببینید.

+
+ +

طراحی خود را بکشید

+ +

قدم بعدی، برداشتن قلم و کاغذ و کشیدن یک چیز تقریبی است که قرار هست وب سایت شما آن شکلی باشد. برای نخستین صفحه وب ساده یتان، چیز زیادی برای کشیدن وجود ندارد، ولی برای عادت کردن به این کار باید از همین الان آن را انجام دهید. واقعاً کمک کننده است --توجه کنید که قرار نیست کمال المک باشید!

+ +

+ +
+

توجه: حتی در وب سایت های پیچیده که داراری تیم های طراحی جداگانه هستند، کار با کشیدن طرح های دستی روی کاغذ شروع می شود و بعداً  برای طرح نهایی از یک ویرایشگر گرافیکی یا تکنولوژی های وب استفاده می کنند.

+ +

تیم های وب اغلب شامل هم یک طراح گرافیکی و یک طراح {{Glossary("UX", "user-experience")}} (UX) هستند. طراح های گرافیکی یا graphic designers، مشخص است که چه کاری انجام می دهند، قرار دادن اجزاء وب سایت کنار یکدیگر. طراحان UX نقش تا حدودی انتزاعی تری دارند که باید به تجربه کاربران و نحوه تعامل آنها با وب سایت بپردازند.

+
+ +

منابع خود را تعیین کنید

+ +

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

+ +

متن

+ +

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

+ +

قالب رنگ

+ +

برای انتخاب رنگ، به قسمت  انتخاب کننده رنگ(the Color Picker) رفته و رنگ مورد نظر خود را پیدا کنید. هر زمان که بر روی رنگی کلیک می کنید، یک کد شش حرفی عجیب شبیه #660066 را می بینید. به این کد هگز (دسیمال) گفته می شود و نشان دهنده رنگ شماست. این کد را فعلاً در جای مطمئنی کپی کنید.

+ +

+ +

تصاویر

+ +

برای انتخاب یک تصویر، به تصاویر گوگل (Google Images) رفته و چیز مناسبی را جستجو کنید.

+ +
    +
  1. وقتی تصویر مناسبی را پیدا کردید، روی آن کلیک کنید.
    2. +
  2. کلید View image را بزنید.
    3. +
  3. در صفحه بعدی روی تصویر راست کلیک کنید (در مکینتاش از Ctrl + click استفاده کنید) و Save Image As... را انتخاب کنید،  و بعد از آن مکان مناسبی را برای ذخیره تصویر خود انتخاب کنید. علاوه بر آن، آدرس وب تصویر را هم از قسمت آدرس بار مرورگر، برای استفاده های بعدی کپی کنید.
    4. +
+ +

+ +

+ +

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

+ +

۱ روی دکمه tools کلیک کنید و  ۲ در منوی انتخاب شده گزینه label for reuse را انتخاب کنید تا تصاویر برای استفاده مجدد در جست و جو ظاهر شوند.

+ +
+

+
+ +

فونت

+ +

برای انتخاب فونت:

+ +
    +
  1. به گوگل فونت(Google Fonts) بروید و در لیست فونت مورد نظر خود را پیدا کنید. برای اعمال فیلترهای بیشتر بر روی نتایج می توانید از قسمت سمت راست استفاده کنید.
    2. +
  2. بعد از انتخاب فونت بر روی آیکن "بعلاوه" (Add to) کلیک کنید.
    3. +
  3. در پنل پایین صفحه بر روی کلید  "* Family Selected" کلیک کنید ("*" بستگی به این دارد که چه تعداد فونت انتخاب کرده باشید).
    4. +
  4. در پنجره ظاهر شد یا به اصطلاح popup box ، می توانید کدهای Google  را ببینید که برای استفاده های آینده آنها را کپی و ذخیره کنید.
    5. +
+ +

+ +

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

diff --git "a/files/fa/learn/getting_started_with_the_web/\331\205\331\202\330\257\331\205\330\247\330\252_\330\254\330\247\331\210\330\247\330\247\330\263\332\251\330\261\333\214\331\276\330\252/index.html" "b/files/fa/learn/getting_started_with_the_web/\331\205\331\202\330\257\331\205\330\247\330\252_\330\254\330\247\331\210\330\247\330\247\330\263\332\251\330\261\333\214\331\276\330\252/index.html" deleted file mode 100644 index 85c20598af..0000000000 --- "a/files/fa/learn/getting_started_with_the_web/\331\205\331\202\330\257\331\205\330\247\330\252_\330\254\330\247\331\210\330\247\330\247\330\263\332\251\330\261\333\214\331\276\330\252/index.html" +++ /dev/null @@ -1,420 +0,0 @@ ---- -title: مقدمات جاوااسکریپت -slug: Learn/Getting_started_with_the_web/مقدمات_جاوااسکریپت -tags: - - آموزش - - جاوا‌ اسکریپت - - مقدماتی - - وب -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics ---- -

{{PreviousNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}

- -
-

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

-
- -

جاوااسکریپت واقعا چیست؟ 

- -

{{Glossary("جاوااسکریپت")}} یک زبان برنامه نویسی کاملا داینامیک است که زمانیکه به اسناد {{Glossary("HTML")}} اعمال میشود، تعامل پویا با وبسایت را ممکن میکند. جاوااسکریپت توسط برندان ایخ یکی از موسسین پروژه موزیلا، بنیاد موزیلا و شرکت موزیلا، ساخته شد.

- -

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

- -

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

- -

واسط‌ های برنامه نویسی کاربردی  ({{Glossary("API","APIs")}}) — APIs ،  در داخل مرورگر تعبیه شده اند تا کارهایی مانند ایجاد پویایه HTML  و تنظیم استایل های CSS ، یا گرفتن و دستکاری یک استریم ویدئو از وب کم کاربر، یا ایجاد گرافیک های سه بعدی و نمونه های صوتی را فراهم کنند.

- - - -

یک مثال ساده

- -

قسمت بالا واقعا هیجان انگیز به نظر میرسد و باید هم اینطور باشد -جاوا اسکریپت یکی از مهیجترین تکنولوژی های شبکه اینترنت است وقتی شما شروع به پیدا کردن مهارت در آن میکنید وب سایت شما وارد یک بعد جدید از قدرت و خلاقیت میگردد.

- -

اما راحت بودن با جاوا اسکریپت از راحت بودن با HTML  و CSS مقداری سخت تر است. شاید شما مجبور باشید که با قدم های استوار از کارهای کوچک شروع کنید. برای شروع، ما به شما نشان میدهیم چطور کدهای جاوا اسکریپت ساده و ابتدایی به صفحه تان اضافه کنید. ساختن مثال "hello world!"(the standard in basic programming examples.)

- -
-

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

-
- -
    -
  1. ابتدا, به صفحه وب آزمایشی خود بروید و یک فایل جدید با نام main.js بسازید و آن را در فولدر scripts خود ذخیره کنید.
    2. -
  2. سپس به فایل index.htm رفته و عناصر زیر را در یک خط جدید و پیش از  </body> بنویسید.
    3. -
- -
<script src="scripts/main.js"></script>
- -

3. این دقیقا همان کاری است که با عنصر {{htmlelement("link")}} برای وارد کردن CSS میکنیم.— با این کار دستوزات جاوااسکریپت را به سند HTML خود اضافه می کنید بنابراین روی HTML,CSS و سایر عناصر صفحه تاثیر خواهد گذاشت.

- -

4. اکنون کد زیر را به فایل main.js اضافه کنید: 

- -
var myHeading = document.querySelector('h1');
-myHeading.innerHTML = 'Hello world!';
- -

5. حالا مطمئن شوید فایل های HTML و Javadcript ذخیره شده اند. سپس index.html را در مرورگر باز کنید. باید چیزی مشابه تصویر زیر مشاهده کنید. 7

- -

- -
-

توجه : دلیل اینکه ما از تگ {{htmlelement("script")}} در پایان محتوا فایل HTML استفاده می کنیم این است که کد جاوا‌‌‌‌‌‌‍‌اسکریپت مستقیم از درون فایل HTML توسط مرورگر لود شود . اگر کد جاوااسکریپت را در بالای محتوای موجود در فایل HTML قرار دهیم  در اینصورت  محتوای زیرین HTML تحت تاثیر عملکرد کد جاوااسکریپت خواهند بود و به همین دلیل کد جاوااسکریپت را در پایینترین بخش محتوا صفحه  HTML می گذاریم .

-
- -

قدم بعدی چیست ؟

- -

خوب همانطور که امتحان کردید شما با کمک جاوااسکریپت متن موجود در سرتیتر (تگ H1) را به متن "Hello World"   تغییر دادید.  این عمل را با صدا زدن تابع {{domxref("Document.querySelector", "querySelector()")}} بمنظور ارجاع دادن به سرتیتر H1 و ذخیره آن در متغییر myHeading  انجام داده اید. این عمل بسیار به شبیه کاری است که ما selectors در CSS انجام می دهیم. زمانی که می خواهید روی یک تگ یا المان عملی را انجام دهید احتیاج است اول آن را انتخاب کنید.

- -

بعد از آن متن یا محتوا مورد نظر را  به متغییر myHeading   که توسط تابع {{domxref("Element.innerHTML", "innerHTML")}} تعریف شده است ٫ به ویژگی محتوای متن  تگ H1  محتوای "Hello World" مقدار دهی می شود.

- -

توضیح پایه ای زبان

- -

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

- -
-

نکته مهم: سعی کنید در زمان مطالعه‌ی این مقاله کدهای مثال را در کنسول مرورگر خود اجرا کنید تا نتیجه‌ی کار را بهتر درک کنید . برای جزئیات بیشتر برای کار کردن با کنسول مرورگر اینجا << بررسی ابزارهای توسعه مرورگر>> کلیک کنید .

-
- -

متغییرها

- -

{{Glossary("Variable", "Variables")}} نگهدارنده هایی هستند که شما میتوانید مقادیر را درون آن ها نگهداری کنید. با تعریف یک متغیر با استفاده از کلمه کلیدی var شروع کنید، سپس با یک نام دلخواه کار را ادامه دهید:

- -
var myVariable;
- -
-

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

-
- -
-

توجه: شما می توانید تقریبا هر نامی به یک متغییر بدهید اما محدودیت هایی برای تعریف نام وجود دارد (برای آشنای بیشتر با قوانین نام گذاری متغیرها اینجا را کلیک کنید )

-
- -
-

نکته: جاوااسکریپت به حروف کوچک و بزرگ حساس است و نام متغییرmyVariable  با نام myvariable  از نظر جاوااسکریپت متفاوت است. اگر مشکلی در فراخوانی و بدست آوردن مقدار از یک متغییر تعریف شده دارید بزرگ یا کوچک بودن حروف نام متغییر را چک کنید !

-
- -

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

- -
myVariable = 'Bob';
- -

شما میتوانید مقداررا تنها با فراخوانی نام متغیر بدست آورید:

- -
myVariable;
- -

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

- -
var myVariable = 'Bob';
- -

پس از دادن یک مقدار به متغیر شما میتوانید آن را تغییر دهید:

- -
var myVariable = 'Bob';
-myVariable = 'Steve';
- -

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
متغییرتوضیحمثال
{{Glossary("String")}} -

متغییر رشته ای برای نگهداری مقدار متن استفاده می شود. حتمی برای مقدار دهی به متغییر متنی باید  متن یا محتوا در کوتیشن قرار دهید.

- 		var myVariable = 'Bob';
{{Glossary("Number")}} -

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

- 		var myVariable = 10;
{{Glossary("Boolean")}} -

متغییر درست یا غلط . کلمات true/false بعنوان کلیداصلی در JS تعریف شده اند و در زمان مقدار دهی نیاز به استفاده از کوتیشن ندارند

- 		var myVariable = true;
{{Glossary("Array")}} -

این ساختار(آرایه) اجازه می دهد چندین مقدار را با یک نام ذخیره کنید.

- 		-

var myVariable = [1,'Bob','Steve',10];
- هر عضو از متغییر(آرایه) مانند زیر می توان صدا زد:

- -

myVariable[0], myVariable[1], ... .

-
{{Glossary("Object")}} -

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

- -

n.

- 		var myVariable = document.querySelector('h1');
- مثال های بالای در این مقاله.
- -

اگر شما تازه برنامه نویسی را شروع کرده باشید حتمی از خودتان می پرسید چرا به متغییرها نیاز داریم ؟ خوب٫ ما به متغییرها نیاز داریم تا همه کارهای جالب را انجام بدیم.  اگر نتوانیم مقدار را تغییر دهیم پس نمی توانیم هیچ چیز داینامیک یا  پویایی را بسازیم مانند یک پیام تبریک خصوصی یا نمایش یک عکس از مجموعه گالری عکس ها . در هر عمل پویایی نیاز به متغییر داریم.

- -

نظر ها  (یادداشت ها)

- -

در کد جاوااسکریپت مانند سی اس اس می توانید نظر (یادداشت) بگذارید :

- -
/*
-Everything in between is a comment.
-*/
- -

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

- -
// This is a comment
-
- -

عملیات ها

- -

{{Glossary("operator")}} نماد یک عمل  ریاضی است که نتیجه را بر اساس دو مقدار (یا متغییر) تولید می کند. در جدول زیر بعضی از عملیات های ساده لیست شده اسند که می توانید در کنسول مرورگر آنها را امتحان کنید.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
عملتوضیحنماد(ها)مثال
بعلاوه / جمع -

زمان جمع دو مقدار عددی و یا برای بعلاوه ( پیوست دادن) دو رشته استفاده می شود.

- 		+6 + 9;
- "Hello " + "world!";
تفریق, ضرب, تقسیم -

عمل های پایه ریاضی را انجام می دهند و فقط روی مقدار عدد قابل استفاده هستند.

- 		-, *, /9 - 3;
- 8 * 2; // multiply in JS is an asterisk
- 9 / 3;
مقدار دهیدر مثال می بینید با کمک مساوی مقدار به متغییر داده شده است.=var myVariable = 'Bob';
عمل تطابق -

در یک آزمایش خواهید دید وقتی دو مقدار باهم برابر نباشند مقدار بازگشت داده شده از عمل مقایسه مقدار صحیح یا غلط (true/false) خواهد بود. 

- 		===var myVariable = 3;
- myVariable === 4;
عدم تساوی / نه منطقی -

 (true )عدم تساوی یا نه منطقی (نات منطقی) زمانی مقدار صحیح برمی گردادند که دو طرف تساوی باهم مساوی نباشند. اگر دو طرف تساویی مساوی باشند مقدار غلط (false)  بر می گرداند

- 		!, !== -

The basic expression is true, but the comparison returns false because we've negated it:

- -

var myVariable = 3;
- !myVariable === 3;

- -

Here we are testing "is myVariable NOT equal to 3". This returns false, because it IS equal to 3.

- -

var myVariable = 3;
- myVariable !== 3;

-
- -

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

- -
-

نکته مهم: ترکیب چند نوع  متفاوت از متغییرها در زمان محاسبه باعث ایجاد نتایج عجیبی می شود ٫ پس مراقب باشید متغییرها را به درستی استفاده کنید تا نتیجه صحیح بگیرید. برای مثال در کنسول خود عبارت  "35" + "25" وارد کنید. چرا نتیجه ای که فکر می کنید را نخواهید ؟ زیرا اعداد بین دوتا نماد نقل قول است پس کامپایلر مثل جمع رشته با آن برخورد می کند نه بعلاوه عدد صحیح. اگر شما 35 + 25 در کنسول وارد کنید نتیجه صحیح را خواهید دید.

-
- -

شرط ها

- -

شرط ها در ساختار کد به شما اجازه می دهند در صورت صحیح یا غلط بودن یک عبارت مقدار یا فرمانی اجرا شود و اجرای  ٫ بستگی به خروجی شرط دارد .  رایج ترین  ساختار شرطی :  if ... else  است بصورت نمونه :

- -
var iceCream = 'chocolate';
-if (iceCream === 'chocolate') {
-  alert('Yay, I love chocolate ice cream!');
-} else {
-  alert('Awwww, but chocolate is my favorite...');
-}
- -

عبارت درون  if ( ... ) یک شرط است  - این شرط  می گوید  اگر مقدار متغیر iceCream  برابر با مقدار رشته یی chocolate  بود پس نتیجه شرط true (صحیح) است در نتیجه تکه کد درون  {} اجرا می شود و اگر شرط برقرار نبود یا به عبارتی غلط بود از تکه کد اول می گذرد و تکه کد بعد از else  اجرا خواهد شد. 

- -

توابع 

- -

{{Glossary("Function", "Functions")}} یک روش برای بسته بندی دستورات است که می خواهید برای چند بار از آن استفاده کنید ٫ فارغ از اینکه چه زمان می خواهید از این مجموعه دستورات استفاده کنید با صدا زدن نام تابعی که این دستورات در درون آن قرار دارند می توانید آنها را بارها بدون تکرار اجرا کنید.  شما نمونه ای از توابع را در مثال های قبل دیدید. بصورت نمونه:

- -
    -
  1. - 
    var myVariable = document.querySelector('h1');
    -
    2. -
  2. - 
    alert('hello!');
    -
    3. -
- -

توابع بالا در درون بروزر وجود دارند و هر زمان بخواهید می توانید آنها را صدا بزنید.

- -

اگر شما چیزی شبیه نام متغییر دیدید که جلوی آن پرانتز های باز و بسته () وجود دارد آن چیز حتمی تابع است.  توابع معمولا پارامترهایی ({{Glossary("Argument", "arguments")}} ) را به عنوان ورودی می گیرند و این اطلاعات را لازم دارند تا بتواند کار خود را انجام دهند. پارامترهای ورودی در در بین علامت های پرانتز قرار می گیرند و در صورتی که بیشتر از یک پارامتر ورودی وجود داشته باشد با علامت کاما از یک دیگر جدا می شوند.

- -

برای نمونه تابع alert() باعث می شود که  باکس پاپ آپ در پنجره مرورگر نمایش داده شود ولی  برای نمایش دادن باکس پاپ آپ نیاز هست مقداری به عنوان پارمتر ورودی توسط تابع دریافت ٫ تا عمل انجام گردد.

- -

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

- -
function multiply(num1,num2) {
-  var result = num1 * num2;
-  return result;
-}
- -

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

- -
multiply(4,7);
-multiply(20,20);
-multiply(0.5,3);
- -
-

توجه: عبارت return به مرورگر می گوید مقدار درون متغییر result به عنوان خروجی یا نتیجه محاسبه تابع در نظر بگیر. این عمل اجباری است زیرا متغییرهای تعریف شده در درون تابع فقط در دسترس داخل همان تابع خواهد بود . به موضوع تعیین قوانین و شرایط دسترسی به متغییرهای درون تابع {{Glossary("Scope", "scoping")}} می گویند. برای اطلاعات بیشتر در مورد اسکوپینگ متغییرها ( محدود دسترسی به متغییر) به اینجا مراجعه کنید.

-
- -

رویداد ها

- -

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

- -
document.querySelector('html').onclick = function() {
-    alert('Ouch! Stop poking me!');
-}
- -

روش های زیادی وجود دارد که برای المان یا تگ یک رویداد تعریف کرد. در کد زیری ما المان (تگ) HTML را توسط یک رویداد با نام onclick بدون تعریف یک نام  به بصورت مستقیم تابعی بدون نام به آن نسبت داده ایم ٫ محتوا تابع همان کدهای خواهند بود که زمان عمل کلیک می خواهیم اجرا شوند.

- -

به این کد توجه کنید:

- -
document.querySelector('html').onclick = function() {};
- -

نتیجه اجرای کد بالا با پایین یکی است:

- -
var myHTML = document.querySelector('html');
-myHTML.onclick = function() {};
- -

این بهینه تر است!

- -

یک مثال فوق العاده از وبسایت

- -

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

- -

- -

تعویض کننده تصویر

- -

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

- -
    -
  1.  اول از همه عکس مورد علاقه خود را که می خواهید در سایت شما نمایش داده شود پیدا کنید فقط در نظر بگیرید با عکس اول هم اندازه باشد یا در حد امکان سایز آن نزدیک به تصویر قبلی باشد .
    2. -
  2. تصویر را در فولدر images  ذخیره کنید.
    3. -
  3. فایل main.js  باز کنید و کد زیر را وارد کنید (اگر کد سلام دنیا شما در فایل وجود دارد آن را پاک کنید):
    4. -
- -
var myImage = document.querySelector('img');
-
-myImage.onclick = function() {
-    var mySrc = myImage.getAttribute('src');
-    if(mySrc === 'images/firefox-icon.png') {
-      myImage.setAttribute ('src','images/firefox2.png');
-    } else {
-      myImage.setAttribute ('src','images/firefox-icon.png');
-    }
-}
- -

تمام تغییرات را در فایل ها باز را ذخیره کنید و فایل index.html را توسط مرورگر اجرا کنید. حالا زمانی که روی تصویر کلیک می کنید باید تصویر بعدی را به شما نمایش دهد.

- -

کاری که در کد بالا کردیم ٫ المان image  را در متغییر myImage بعنوان منبع ذخیره کردیم . در مرحله بعد توسط رویداد onclick به ویژگی مربوط به گرفتن محل یک تابع نوشتم که بعد از هر کلیک اتفاقات زیر برای المان تصویر پیش می آید:

- -
    -
  1. مقدار ویژگی src را در درون متغییر ریختیم.
    2. -
  2. مقدار درون متغییر را با شرط مقایسه کردیم و اگر مقدار برابر با src بود کد درون شرط اجرا می شود .
    3. -
  3.  اگر شرط صحیح بود مقدار ویژگی  src  به تصویر دوم تغییر داده می شود و تصویر در درون المان {{htmlelement("image")}}  نمایش در می آید.
    4. -
  4. اگر شرط صحیح نبود  یعنی تصویر به تازگی تغییر کرده است و مقدار ويژگی src  به محل ذخیره سازی تصویر اول(اصلی) می بایست تغییر نشانی دهد .
    5. -
- -

اضافه  کردن یک پیام خوش آمد گویی

- -

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

- -
    -
  1.  در فایل index.html را بعد از المان (تگ)   {{htmlelement("script")}} وارد کنید 
    2. -
  2. - 
    <button>Change user</button>
    -
    3. -
  3. در فایل main.js در پایین ترین بخش فایل دقیقا تک کد زیر را وارد کنید .در کد زیر یک رونوشت مانند از المان های button  (دکمه) و heading (عنوان)  در متغییر ها ریخته شده .
    4. -
  4. - 
    var myButton = document.querySelector('button');
-var myHeading = document.querySelector('h1');
    -
    5. -
  5. تابع زیر را در فایل اضافه کنید . در حال حاضر کاری انجام نمی دهد اما بعدا خواهید دید
    6. -
  6. - 
    function setUserName() {
-  var myName = prompt('Please enter your name.');
-  localStorage.setItem('name', myName);
-  myHeading.innerHTML = 'Mozilla is cool, ' + myName;
-}
    - تابع prompt() یک جعبه دریافت متن نمایش می دهد مانند  alert() با این تفاوت  در prompt() از کاربر اطلاعاتی را به عنوان ورودی می گیرد و در ادامه در متغییری بعد از زدن دکمه اوکی ذخیره می کند. ما در اینجا از کاربر خواسته ایم نام خود را وارد کند و در ادامه با کمک API  و صدا زدن تابع localStorage اطلاعات وارد شده (نام) را در حافظه داخلی مرورگر ذخیره می کنیم . ما  از حافظه محلی (حافظه محلی مرورگر)  بوسیله تابع setItem()  و اختصاص دادن اسم 'name'  به اطلاعاتی که در درون متغیر myName  می باشدرا  ذخیره کردیم و این اطلاعات ذخیره شده همان نامی است که توسط کاربر وارد شده است.
    7. -
  7. کد if ... else را اضافه کنید بهتر ایست این قسمت از کد را بخش مقدار دهی اولیه نام گذاری کنیم زیرا در اینجا مشخص می شود چه زمان باید چه اتفاقی پیش آید
    8. -
  8. - 
    if(!localStorage.getItem('name')) {
-  setUserName();
-} else {
-  var storedName = localStorage.getItem('name');
-  myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
-}
    - کد درون شرط نه منطقی زمانی اجرا می شود که اطلاعاتی برای  name در ذخیره سازی محلی وجود نداشته باشد و در نتیجه تابع setUserName() فراخوانی می شود( نامی که کاربر در بازدید قبلی داده است ست می شود) این نام از طریق استفاده از تابع getItem()  و مقدار دریافت مقدار  بازگشتی از تابع  و دادن این مقدار برای تنظیم (ست کردن) بوسیله innerHTML صورت می گیرد.
    9. -
  9. در پایان رویداد onclick  که برای دکمه تعیین شده است تابع setUserName() فراخوانی می کند . این عمل به کاربر اجازه می دهد هر زمان که بخواهد با کلیک روی این دکمه بتواند هر نام جدیدی که می خواهد وارد کند
    10. -
  10. - 
    myButton.onclick = function() {
-  setUserName();
-}
-
    -
    11. -
- -

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

- -

نتیجه گیری

- -

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

- -

- -

اگر به مشکلی بر خوردید می توانید کار خود را با نسخه نهایی مثال ما که کد آن روی گیت‌هاب موجود است مقایسه کنید.

- -

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

- -

{{PreviousNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}

diff --git "a/files/fa/learn/getting_started_with_the_web/\331\205\331\206\330\252\330\264\330\261_\332\251\330\261\330\257\331\206_\331\210\330\250\330\263\330\247\333\214\330\252_\330\264\331\205\330\247/index.html" "b/files/fa/learn/getting_started_with_the_web/\331\205\331\206\330\252\330\264\330\261_\332\251\330\261\330\257\331\206_\331\210\330\250\330\263\330\247\333\214\330\252_\330\264\331\205\330\247/index.html" deleted file mode 100644 index 1292676834..0000000000 --- "a/files/fa/learn/getting_started_with_the_web/\331\205\331\206\330\252\330\264\330\261_\332\251\330\261\330\257\331\206_\331\210\330\250\330\263\330\247\333\214\330\252_\330\264\331\205\330\247/index.html" +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: منتشر کردن وبسایت شما -slug: Learn/Getting_started_with_the_web/منتشر_کردن_وبسایت_شما -tags: - - آموزش - - اف تی پی - - انتشار - - مقدماتی - - وب - - وب‌سرور - - گوگل اپ انجین - - گیت‌هاب -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
- -
-

بعد از اتمام کد نویسی و سازماندهی و ساخت وبسایت ٫ زمان انتشار آن بصورت آنلاین فرا می رسید تا مردم بتوانند به وبسایت شما مراجعه کنند.  در این مقاله روش انتشار کدهای که شما نوشته اید بصورت آنلاین را توضیح می دهد.

-
- -

گزینه ها چیست ؟

- -

انتشار وبسایت یک موضوع (مبحث) ساده ای نیست . زیرا روش های متفاوتی برای این عمل وجود دارد . در این مقاله تمام روش های موجود پوشش داده نشده است بلکه رایج ترین روش های که  یک فرد مبتدی به راحتی از آن استفاده کند توضیح داده شده ست .

- -

گرفتن فضا و دامنه

- -

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

- - - -

بسیار از از حرفه ها از این طریق وبسایت خود را بارگذاری می کنند.

- -

In addition, you will need a {{Glossary("FTP", "File Transfer Protocol (FTP)")}} program (see How much does it cost: software for more details) to actually transfer the website files over to the server. FTP  programs vary widely, but generally you have to log on to your web server using details provided by your hosting company (e.g. username, password, host name). Then the program shows you your local files and the web server's files in two windows, so you can transfer them back and forth:

- -

- -

Tips for finding hosting and domains

- - - -

استفاده از ابزارهای آنلاین مثل گیت‌هاب و گوگل اپ انجین

- -

Some tools let you publish your website online:

- - - -

Unlike most hosting, such tools are usually free to use, but you only get a limited feature-set.

- -

استفاده از IDE  مثل Thimble

- -

There are a number of web apps that emulate a website development environment, allowing you to enter HTML, CSS and JavaScript and then display the result of that code when rendered as a website — all in one browser tab. Generally speaking these tools are quite easy, great for learning, and free (for basic features), and they host your rendered page at a unique web address. However, the basic features are pretty limited, and the apps usually don't provide hosting space for assets (like images).

- -

Try playing with some of these examples, and see which one you like the best:

- - - -

- -

انتشار در مقابل گیت‌هاب

- -

Now let's take you through how to easily publish your site via GitHub Pages.

- -
    -
  1. First of all, sign up for GitHub and verify your email address.
    2. -
  2. Next, you need to create a repository for your files to go in.
    3. -
  3. On this page, in the Repository name box, enter username.github.io, where username is your username. So for example, our friend bobsmith would enter bobsmith.github.io.
    - Also check Initialize this repository with a README and then click Create repository.
    4. -
  4. After that, drag and drop the content of your website folder into your repository and then click Commit changes.
    - -
    -

    Note: Make sure your folder has an index.html file.

    -
    -
    5. -
  5. -

    Now navigate your browser to username.github.io to see your website online. For example, for the username chrisdavidmills, go to chrisdavidmills.github.io.

    - -
    -

    Note: It may take a few minutes for your website to go live. If it doesn't work immediately, you may have to wait a few minutes and then try again.

    -
    -
    6. -
- -

To learn more, see GitHub Pages Help.

- -

مطالعه بیشتر

- - - -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

- -

مرتبط به مقاله

- - diff --git "a/files/fa/learn/getting_started_with_the_web/\331\206\330\265\330\250_\331\206\330\261\331\205_\330\247\331\201\330\262\330\247\330\261\331\207\330\247\333\214_\331\276\330\247\333\214\331\207/index.html" "b/files/fa/learn/getting_started_with_the_web/\331\206\330\265\330\250_\331\206\330\261\331\205_\330\247\331\201\330\262\330\247\330\261\331\207\330\247\333\214_\331\276\330\247\333\214\331\207/index.html" deleted file mode 100644 index a4e8158d1c..0000000000 --- "a/files/fa/learn/getting_started_with_the_web/\331\206\330\265\330\250_\331\206\330\261\331\205_\330\247\331\201\330\262\330\247\330\261\331\207\330\247\333\214_\331\276\330\247\333\214\331\207/index.html" +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: نصب نرم افزارهای پایه -slug: Learn/Getting_started_with_the_web/نصب_نرم_افزارهای_پایه -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
- -
-

در نصب نرم افزار پایه، نشان می دهیم که برای توسعه وب به چه ابزارهایی نیاز دارید و چگونه آنها را نصب نمایید.

-
- -

حرفه ای ها از چه ابزارهایی استفاده می کنند؟

- - - -

در حال حاظر به چه ابزارهایی نیاز دارید؟

- -

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

- -

نصب یک ویرایشگر متن

- -

احتمالا بر روی کامپیوتر خود یک  text editor خیلی ساده دارید. بطور پیش فرض Notepad در ویندوز و TextEdit در مکیناش هستند. در توزیع های مختلف لینوکس، اوضاع متفاوت است; مثلا در ابونتو(Ubuntu) ، gedit به صورت پیش فرض وجود دارد.

- -

برای توسعه وب می توان چیزی بهتر از Notepad یاTextEdit داشت. توصیه ما این است که با Brackets شروع کنید، که ویژگی هایlive previews و code hints را ارائه می کند.

- -

نصب مرورگرهای جدید وب

- -

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

- - - -

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

- -

نصب یک وب سرور محلی

- -

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

- -

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

diff --git "a/files/fa/learn/getting_started_with_the_web/\331\210\330\250_\330\263\330\247\333\214\330\252_\330\264\331\205\330\247_\332\206\331\207_\330\264\332\251\331\204\333\214_\330\247\330\263\330\252\330\237/index.html" "b/files/fa/learn/getting_started_with_the_web/\331\210\330\250_\330\263\330\247\333\214\330\252_\330\264\331\205\330\247_\332\206\331\207_\330\264\332\251\331\204\333\214_\330\247\330\263\330\252\330\237/index.html" deleted file mode 100644 index 3f68570e18..0000000000 --- "a/files/fa/learn/getting_started_with_the_web/\331\210\330\250_\330\263\330\247\333\214\330\252_\330\264\331\205\330\247_\332\206\331\207_\330\264\332\251\331\204\333\214_\330\247\330\263\330\252\330\237/index.html" +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: وب سایت شما چه شکلی است؟ -slug: Learn/Getting_started_with_the_web/وب_سایت_شما_چه_شکلی_است؟ -tags: - - آموزش - - طراحی - - طرح - - فونت - - محتوا - - مقدماتی - - منابع -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
- -
-

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

-
- -

قبل از شروع کار: برنامه ریزی

- -

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

- -

برای شروع لازم هست که به سوالات زیر پاسخ دهید:

- -
    -
  1. وب سایتتان در مورد چیست؟ حیوانات را دوست دارید یا،شهر اصفهان، یا بازی شبگرد؟
    2. -
  2. در مورد این موضوع چه اطلاعاتی را رائه می کنید؟ یک عنوان و چندتا پاراگراف بنویسید، و بعد از آن در مورد تصویری فکر کنید که می خواهید در صفحه خود نمایش دهید.
    3. -
  3. به صورت خیلی کلی، وب سایت شما چه شکلی است. رنگ پس زمینه چه شکلی است؟ چه سبکی از فونت مناسب کار شماست: رسمی، کارتونی، ضخیم و شلوغ، ظریف.
    4. -
- -
-

توجه: پروژه های خیلی پیچیده به دستورالعمل (guidelines) جزئی تری نیاز دارند که تمامی جزئیات مربوط رنگها، فونت ها، فاصله بین موارد داخل صفحه، حالت مناسب نوشته ها، و ... را تعیین کند. گاهی اوقات آن را راهنمای طراحی (design guide) یا کتاب برند (brand book) می گویند، که می توانید نمونه از آن را در دستورالعمل های سیستم عامل فایرفاکس (Firefox OS Guidelines)  ببینید.

-
- -

طراحی خود را بکشید

- -

قدم بعدی، برداشتن قلم و کاغذ و کشیدن یک چیز تقریبی است که قرار هست وب سایت شما آن شکلی باشد. برای نخستین صفحه وب ساده یتان، چیز زیادی برای کشیدن وجود ندارد، ولی برای عادت کردن به این کار باید از همین الان آن را انجام دهید. واقعاً کمک کننده است --توجه کنید که قرار نیست کمال المک باشید!

- -

- -
-

توجه: حتی در وب سایت های پیچیده که داراری تیم های طراحی جداگانه هستند، کار با کشیدن طرح های دستی روی کاغذ شروع می شود و بعداً  برای طرح نهایی از یک ویرایشگر گرافیکی یا تکنولوژی های وب استفاده می کنند.

- -

تیم های وب اغلب شامل هم یک طراح گرافیکی و یک طراح {{Glossary("UX", "user-experience")}} (UX) هستند. طراح های گرافیکی یا graphic designers، مشخص است که چه کاری انجام می دهند، قرار دادن اجزاء وب سایت کنار یکدیگر. طراحان UX نقش تا حدودی انتزاعی تری دارند که باید به تجربه کاربران و نحوه تعامل آنها با وب سایت بپردازند.

-
- -

منابع خود را تعیین کنید

- -

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

- -

متن

- -

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

- -

قالب رنگ

- -

برای انتخاب رنگ، به قسمت  انتخاب کننده رنگ(the Color Picker) رفته و رنگ مورد نظر خود را پیدا کنید. هر زمان که بر روی رنگی کلیک می کنید، یک کد شش حرفی عجیب شبیه #660066 را می بینید. به این کد هگز (دسیمال) گفته می شود و نشان دهنده رنگ شماست. این کد را فعلاً در جای مطمئنی کپی کنید.

- -

- -

تصاویر

- -

برای انتخاب یک تصویر، به تصاویر گوگل (Google Images) رفته و چیز مناسبی را جستجو کنید.

- -
    -
  1. وقتی تصویر مناسبی را پیدا کردید، روی آن کلیک کنید.
    2. -
  2. کلید View image را بزنید.
    3. -
  3. در صفحه بعدی روی تصویر راست کلیک کنید (در مکینتاش از Ctrl + click استفاده کنید) و Save Image As... را انتخاب کنید،  و بعد از آن مکان مناسبی را برای ذخیره تصویر خود انتخاب کنید. علاوه بر آن، آدرس وب تصویر را هم از قسمت آدرس بار مرورگر، برای استفاده های بعدی کپی کنید.
    4. -
- -

- -

- -

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

- -

۱ روی دکمه tools کلیک کنید و  ۲ در منوی انتخاب شده گزینه label for reuse را انتخاب کنید تا تصاویر برای استفاده مجدد در جست و جو ظاهر شوند.

- -
-

-
- -

فونت

- -

برای انتخاب فونت:

- -
    -
  1. به گوگل فونت(Google Fonts) بروید و در لیست فونت مورد نظر خود را پیدا کنید. برای اعمال فیلترهای بیشتر بر روی نتایج می توانید از قسمت سمت راست استفاده کنید.
    2. -
  2. بعد از انتخاب فونت بر روی آیکن "بعلاوه" (Add to) کلیک کنید.
    3. -
  3. در پنل پایین صفحه بر روی کلید  "* Family Selected" کلیک کنید ("*" بستگی به این دارد که چه تعداد فونت انتخاب کرده باشید).
    4. -
  4. در پنجره ظاهر شد یا به اصطلاح popup box ، می توانید کدهای Google  را ببینید که برای استفاده های آینده آنها را کپی و ذخیره کنید.
    5. -
- -

- -

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

diff --git a/files/fa/learn/html/howto/author_fast-loading_html_pages/index.html b/files/fa/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..94048c4ba7 --- /dev/null +++ b/files/fa/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,127 @@ +--- +title: نکاتی درباره‌ی ایجاد صفحات HTML سریع +slug: Web/HTML/Tips_for_authoring_fast-loading_HTML_pages +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

نکات زیر بر اساس دانش و تجربه به دست آمده‌اند.

+

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

+

بهینه‌سازی عملکرد یک صفحه فقط برای کاربران با اینترنت کم سرعت مطرح نیست. بلکه برای آن دسته از کاربران با اینترنت پرسرعت نیز تاثیر به سزایی دارد.

+

نکته‌ها

+

کاهش دادن وزن صفحه

+

وزن صفحه، یکی از مهم‌ترین فاکتورهای بارگیری یک صفحه است.

+

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

+

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

+

کاهش تعداد فایل‌ها

+

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

+

بسته به تنظیمات حافظه‌ی نهان مرورگر، ممکن است درخواست If-Modified-Since به وب‌سرور برای هر فایل CSS، جاوااسکریپت یا تصویر فرستاده شود که در آن مشخص می‌شود آیا فایل نسبت به آخرین باری که دانلود شده، تغییر کرده است یا خیر.

+

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

+

اگر از تصاویر پس‌زمینه در فایل CSS خود به نسبت زیادی استفاده می‌کنید می‌توانید با استفاده از تکینیکی به نام image sprite این تصاویر را با هم ترکیب کنید تا تعداد درخواست‌های ارسالی به سرور کاهش یابد. تنها کافی است با تغییر موقعیت تصویر در صفحه نحوه‌ی نمایش آن را در حالت‌های مختلف تنظیم کنید. این تکنیک برای عنصرهایی که ابعاد محدودی در صفحه دارند به خوبی کار می‌کند. اگرچه تعداد درخواست‌های http کمتر و cache کردن هر تصویر نیز می‌تواند به عنوان راه حل جایگزین مطرح باشد.

+

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

+

کاهش تعداد ارجاع‌ها به دامنه‌های مختلف

+

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

+

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

+

محتوای کاربردی را Cache کنید

+

اطمینان یابید هر محتوایی که قابل cache شدن است، این اتفاق برایش افتاده باشد و زمان پایانی cache نیز دارا باشد.

+

در حقیقت باید به فایل سرآیند (header) با نام Last-Modified توجه خاصی داشت. کار این فایل ذخیره‌سازی آخرین زمانی است که به صفحات ثابت (html و css و ...) از طریق user agent یا همان مرورگر بر اساس زمان موجود در وب سرور، ارجاع شده است. البته این موضوع در رابطه با صفحات پویا (php و aspx و ...) اتفاق نمی‌افتد، یعنی این فایل سرآیند ارسال نمی‌شود.

+

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

+
    +
  1. HTTP Conditional Get for RSS Hackers
    2. +
  2. HTTP 304: Not Modified
    3. +
  3. On HTTP Last-Modified and ETag
    4. +
+

ترتیب بهینه‌ی اجزای تشکیل دهنده‌ی صفحه

+

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

+

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

+

کاهش تعداد اسکریپت‌های برخط (inline)

+

این نوع اسکریپت‌ها می‌توانند زمان زیادی را به خود اختصاص دهند، چرا که parser باید در نظر بگیرد که یک اسکریپت برخط می‌تواند ساختار صفحه را هنگامی که خود صفحه در حال parse شدن است، تغییر دهد. کاهش تعداد این اسکریپت‌ها به صورت عمومی، و کاهش استفاده از document.write به صورت اختصاصی، می‌تواند منجر به افزایش سرعت در بارگذاری صفحات شود. همچنین استفاده از روش‌های پیشرفته در AJAX جهت تغییر در محتوای صفحه به جای استفاده از document.write توصیه می‌شود.

+

استفاده از CSS پیشرفته و عنصرهای معتبر

+

استفاده از CSS به صورت صحیح می‌تواند تعداد عنصرهای مورد نیاز در صفحه را به شکل قابل ملاحظه‌ای کاهش دهد. از جمله این تکنیک‌ها می‌توان به جایگزین کردن برخی تصاویر (که به spacer معروف هستند) با معادل CSS آن‌ها جهت قالب‌بندی صفحه اشاره کرد.

+

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

+

به علاوه، استفاده از عنصرهای معتبر این امکان را در اختیار سایر ابزار می‌گذارد تا صفحات سایت شما را بررسی (pre-process) کنند. برای نمونه، HTML Tidy می‌تواند فضای خالی در صفحات و تگ‌های پایانی اختیاری را حذف کند; اگرچه این ابزار در صفحاتی که دارای خطاهای بسیار در عنصرها باشند، اجرا نمی‌شود.

+

محتوا را طبقه‌بندی کنید

+

استفاده از جدول‌ها در قالب‌بندی صفحات یک روش منسوخ است که دیگر نباید استفاده شود. در عوض از عنصر {{ HTMLElement("div") }} و در آینده‌ی نزدیک از ساختار چند ستونی CSS3 یا ساختار منعطف جعبه‌ای CSS3 باید استفاده شود.

+

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

+

به جای این‌که از ساختاری مانند این استفاده کنید:

+
<TABLE>
+  <TABLE>
+    <TABLE>
+          ...
+    </TABLE>
+  </TABLE>
+</TABLE>
+

در عوض از جدول‌هایی که جداگانه هستند یا divها استفاده کنید.

+
<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+
+

همچنین می‌توانید مستندات CSS3 Multi-column Layout یا CSS3 Flexible Box Layout را مشاهده کنید.

+

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

+

اگر مرورگر به محض دریافت تصویر یا جدول بتواند اندازه‌ی آن را تشخیص دهد، این امر موجب نمایش هر چه بهتر محتوای صفحه در زمان بارگذاری خواهد شد. به همین منظور استفاده از height و width برای تصویرها در هر جایی که ممکن است باید استفاده گردند.

+

برای جدول‌ها نیز می‌توان از قطعه کد CSS زیر استفاده کرد:

+
  table-layout: fixed;
+
+

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

+

حداقل محدودیت‌های مرورگر را در نظر بگیرید

+

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

+

در حقیقت، حداقل پیش‌نیازهای شما باید منطبق با مرورگرهای پیشرفته‌ای باشند که استانداردهای وب را رعایت می‌کنند که این مرورگرها شامل Firefox 3.6 به بالا برای تمامی پلتفرم‌ها، Internet Explorer 8 به بالا در ویندوز، Opera 10 به بالا در ویندوز و Safari 4 به بالا در Mac OS X هستند.

+

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

+

ساختار صفحه‌ی مورد نظر ما

+

· HTML

+
+
+ · HEAD
+
+
+
+
+
+ · LINK ...
+
+ فایل‌های CSS که جهت نمایش صفحه مورد نیاز هستند. تعداد این فایل‌ها را پایین نگه دارید تا عملکرد صفحه افزایش یابد. همچنین می‌توان سایر فایل‌های CSS نامربتط با این صفحه را در فایل‌های دیگر قرار داد.
+
+
+
+
+
+
+
+ · SCRIPT ...
+
+ فایل‌های JavaScript که موردنیاز توابعی هستند که در زمان بارگذاری صفحه فراخوانی می‌شوند. تعداد این فایل‌ها را جهت عملکرد بهتر صفحه، پایین نگه دارید.
+
+
+
+
+
+ · BODY
+
+ محتوای مورد نظر صفحه که در قالب جدول‌ها یا divها گردآوری شده‌اند. این محتوا می‌تواند جدا از سایر اجزای صفحه نمایش یابد.
+
+
+
+
+
+ · SCRIPT ...
+
+ هر اسکریپتی که در ساختار صفحه (DHTML) تغییر ایجاد می‌کند. این اسکریپت‌ها می‌توانند پس از بارگذاری تمام صفحه و نمایش محتوا به کاربر، اجرا شوند. بنابراین دلیلی ندارد که بارگذاری آن‌ها قبل از محتوا صورت گیرد که در این صورت نمایش محتوا به کاربر با تاخیر همراه می‌شود.
+
+ اگر تصویری جهت حرکت‌های rollover در نظر گرفته‌اید، باید در این قسمت از صفحه preload یا پیش‌بارگذاری شوند، جایی که محتوای صفحه قبل از آن نمایش داده شده است.
+
+
+
+ + +
+

Original Document Information

+ +
+

 

diff --git a/files/fa/learn/javascript/objects/basics/index.html b/files/fa/learn/javascript/objects/basics/index.html new file mode 100644 index 0000000000..47ee37c7a2 --- /dev/null +++ b/files/fa/learn/javascript/objects/basics/index.html @@ -0,0 +1,254 @@ +--- +title: مقدمات اشیا در جاوااسکریپت +slug: Learn/JavaScript/Objects/مقدمات +translation_of: Learn/JavaScript/Objects/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
+ +

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

+ + + + + + + + + + + + +
پیش‌نیازها:ادبیات اولیه کامپیوتر، فهم مقدماتی HTML و CSS، آشنایی با مقدمات جاوااسکریپت ( قدم‌های اول در جاوااسکریپت و بلوک‌های سازنده جاوااسکریپت را ببینید).
اهداف:یادگیری اصول اولیه برنامه نویسی شی-گرا، ارتباط آن با جاوااسکریپت ("تقریبا همه چیز یک شی است") و چگونگی کار با اشیاء در جاوااسکریپت.
+ +

مقدمات اشیاء

+ +

یک شی مجموعه از داده‌ها و یا عملکردهای مرتبط است (که معمولا شامل تعدادی متغییر و تابع است — در داخل اشیاء به متغییرها خاصیت و به توابع، متد گویند). بیایید با یک نمونه بفهمیم آن‌ها چگونه هستند.

+ +

برای شروع، یک کپی از فالی oojs.html ما را دانلود کنید.این فایل یک  {{HTMLElement("script")}}  برای نوشتن کد ما را فراهم می‌آورد.

+ +

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

+ +
var person = {};
+ +

اگر در کنسول جاوااسکریپت person را وارد نمایید و دکه اینتر را بزنید، خروجی زیر را خواهید داشت:

+ +
[object Object]
+ +

تبریک! شما اولین شی خود را ساختید. کار انجام شد! اما این شی هنوز خالی است، نمیتواند کار خاصی را انجام دهد، پس بیایید شی‌مان را آپدیت کنیم تا به شکل زیر در بیاید:

+ +
var person = {
+  name: ['Bob', 'Smith'],
+  age: 32,
+  gender: 'male',
+  interests: ['music', 'skiing'],
+  bio: function() {
+    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  },
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name[0] + '.');
+  }
+};
+
+ +

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

+ +
person.name
+person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()
+ +

شما حالا مقداری داده و عملکرد داخل شی خود دارید و میتوناید با نشان‌گذاری ساده‌ای به آن دسترسی داشته باشید.

+ +
+

Note: If you are having trouble getting this to work, try comparing your code against our version — see oojs-finished.html (also see it running live). The live version will give you a blank screen, but that's OK — again, open your devtools and try typing in the above commands to see the object structure.

+
+ +

So what is going on here? Well, an object is made up of multiple members, each of which has a name (e.g. name and age above), and a value (e.g. ['Bob', 'Smith'] and 32). Each name/value pair must be separated by a comma, and the name and value in each case are separated by a colon. The syntax always follows this pattern:

+ +
var objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+};
+ +

The value of an object member can be pretty much anything — in our person object we've got a string, a number, two arrays, and two functions. The first four items are data items, and are referred to as the object's properties. The last two items are functions that allow the object to do something with that data, and are referred to as the object's methods.

+ +

An object like this is referred to as an object literal — we've literally written out the object contents as we've come to create it. This is in contrast to objects instantiated from classes, which we'll look at later on.

+ +

It is very common to create an object using an object literal when you want to transfer a series of structured, related data items in some manner, for example sending a request to the server to be put into a database. Sending a single object is much more efficient than sending several items individually, and it is easier to work with than an array, when you want to identify individual items by name.

+ +

Dot notation

+ +

Above, you accessed the object's properties and methods using dot notation. The object name (person) acts as the namespace — it must be entered first to access anything encapsulated inside the object. Next you write a dot, then the item you want to access — this can be the name of a simple property, an item of an array property, or a call to one of the object's methods, for example:

+ +
person.age
+person.interests[1]
+person.bio()
+ +

Sub-namespaces

+ +

It is even possible to make the value of an object member another object. For example, try changing the name member from

+ +
name: ['Bob', 'Smith'],
+ +

to

+ +
name : {
+  first: 'Bob',
+  last: 'Smith'
+},
+ +

Here we are effectively creating a sub-namespace. This sounds complex, but really it's not — to access these items you just need to chain the extra step onto the end with another dot. Try these in the JS console:

+ +
person.name.first
+person.name.last
+ +

Important: At this point you'll also need to go through your method code and change any instances of

+ +
name[0]
+name[1]
+ +

to

+ +
name.first
+name.last
+ +

Otherwise your methods will no longer work.

+ +

Bracket notation

+ +

There is another way to access object properties — using bracket notation. Instead of using these:

+ +
person.age
+person.name.first
+ +

You can use

+ +
person['age']
+person['name']['first']
+ +

This looks very similar to how you access the items in an array, and it is basically the same thing — instead of using an index number to select an item, you are using the name associated with each member's value. It is no wonder that objects are sometimes called associative arrays — they map strings to values in the same way that arrays map numbers to values.

+ +

Setting object members

+ +

So far we've only looked at retrieving (or getting) object members — you can also set (update) the value of object members by simply declaring the member you want to set (using dot or bracket notation), like this:

+ +
person.age = 45;
+person['name']['last'] = 'Cratchit';
+ +

Try entering the above lines, and then getting the members again to see how they've changed, like so:

+ +
person.age
+person['name']['last']
+ +

Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these in the JS console:

+ +
person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }
+ +

You can now test out your new members:

+ +
person['eyes']
+person.farewell()
+ +

One useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too. Let's say we wanted users to be able to store custom value types in their people data, by typing the member name and value into two text inputs? We could get those values like this:

+ +
var myDataName = nameInput.value;
+var myDataValue = nameValue.value;
+ +

we could then add this new member name and value to the person object like this:

+ +
person[myDataName] = myDataValue;
+ +

To test this, try adding the following lines into your code, just below the closing curly brace of the person object:

+ +
var myDataName = 'height';
+var myDataValue = '1.75m';
+person[myDataName] = myDataValue;
+ +

Now try saving and refreshing, and entering the following into your text input:

+ +
person.height
+ +

Adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name.

+ +

What is "this"?

+ +

You may have noticed something slightly strange in our methods. Look at this one for example:

+ +
greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}
+ +

You are probably wondering what "this" is. The this keyword refers to the current object the code is being written inside — so in this case this is equivalent to person. So why not just write person instead? As you'll see in the Object-oriented JavaScript for beginners article when we start creating constructors, etc., this is very useful — it will always ensure that the correct values are used when a member's context changes (e.g. two different person object instances may have different names, but will want to use their own name when saying their greeting).

+ +

Let's illustrate what we mean with a simplified pair of person objects:

+ +
var person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+var person2 = {
+  name: 'Brian',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+ +

In this case, person1.greeting() will output "Hi! I'm Chris."; person2.greeting() on the other hand will output "Hi! I'm Brian.", even though the method's code is exactly the same in each case. As we said earlier, this is equal to the object the code is inside — this isn't hugely useful when you are writing out object literals by hand, but it really comes into its own when you are dynamically generating objects (for example using constructors). It will all become clearer later on.

+ +

You've been using objects all along

+ +

As you've been going through these examples, you have probably been thinking that the dot notation you've been using is very familiar. That's because you've been using it throughout the course! Every time we've been working through an example that uses a built-in browser API or JavaScript object, we've been using objects, because such features are built using exactly the same kind of object structures that we've been looking at here, albeit more complex ones than our own basic custom examples.

+ +

So when you used string methods like:

+ +
myString.split(',');
+ +

You were using a method available on an instance of the String class. Every time you create a string in your code, that string is automatically created as an instance of String, and therefore has several common methods/properties available on it.

+ +

When you accessed the document object model using lines like this:

+ +
var myDiv = document.createElement('div');
+var myVideo = document.querySelector('video');
+ +

You were using methods available on an instance of the Document class. For each webpage loaded, an instance of Document is created, called document, which represents the entire page's structure, content, and other features such as its URL. Again, this means that it has several common methods/properties available on it.

+ +

The same is true of pretty much any other built-in object/API you've been using — Array, Math, etc.

+ +

Note that built in Objects/APIs don't always create object instances automatically. As an example, the Notifications API — which allows modern browsers to fire system notifications — requires you to instantiate a new object instance using the constructor for each notification you want to fire. Try entering the following into your JavaScript console:

+ +
var myNotification = new Notification('Hello!');
+ +

Again, we'll look at constructors in a later article.

+ +
+

Note: It is useful to think about the way objects communicate as message passing — when an object needs another object to perform some kind of action often it will send a message to another object via one of its methods, and wait for a response, which we know as a return value.

+
+ +

Summary

+ +

Congratulations, you've reached the end of our first JS objects article — you should now have a good idea of how to work with objects in JavaScript — including creating your own simple objects. You should also appreciate that objects are very useful as structures for storing related data and functionality — if you tried to keep track of all the properties and methods in our person object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names. Objects let us keep the information safely locked away in their own package, out of harm's way.

+ +

In the next article we'll start to look at object-oriented programming (OOP) theory, and how such techniques can be used in JavaScript.

+ +

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

+ +

In this module

+ + diff --git "a/files/fa/learn/javascript/objects/\331\205\331\202\330\257\331\205\330\247\330\252/index.html" "b/files/fa/learn/javascript/objects/\331\205\331\202\330\257\331\205\330\247\330\252/index.html" deleted file mode 100644 index 47ee37c7a2..0000000000 --- "a/files/fa/learn/javascript/objects/\331\205\331\202\330\257\331\205\330\247\330\252/index.html" +++ /dev/null @@ -1,254 +0,0 @@ ---- -title: مقدمات اشیا در جاوااسکریپت -slug: Learn/JavaScript/Objects/مقدمات -translation_of: Learn/JavaScript/Objects/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
- -

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

- - - - - - - - - - - - -
پیش‌نیازها:ادبیات اولیه کامپیوتر، فهم مقدماتی HTML و CSS، آشنایی با مقدمات جاوااسکریپت ( قدم‌های اول در جاوااسکریپت و بلوک‌های سازنده جاوااسکریپت را ببینید).
اهداف:یادگیری اصول اولیه برنامه نویسی شی-گرا، ارتباط آن با جاوااسکریپت ("تقریبا همه چیز یک شی است") و چگونگی کار با اشیاء در جاوااسکریپت.
- -

مقدمات اشیاء

- -

یک شی مجموعه از داده‌ها و یا عملکردهای مرتبط است (که معمولا شامل تعدادی متغییر و تابع است — در داخل اشیاء به متغییرها خاصیت و به توابع، متد گویند). بیایید با یک نمونه بفهمیم آن‌ها چگونه هستند.

- -

برای شروع، یک کپی از فالی oojs.html ما را دانلود کنید.این فایل یک  {{HTMLElement("script")}}  برای نوشتن کد ما را فراهم می‌آورد.

- -

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

- -
var person = {};
- -

اگر در کنسول جاوااسکریپت person را وارد نمایید و دکه اینتر را بزنید، خروجی زیر را خواهید داشت:

- -
[object Object]
- -

تبریک! شما اولین شی خود را ساختید. کار انجام شد! اما این شی هنوز خالی است، نمیتواند کار خاصی را انجام دهد، پس بیایید شی‌مان را آپدیت کنیم تا به شکل زیر در بیاید:

- -
var person = {
-  name: ['Bob', 'Smith'],
-  age: 32,
-  gender: 'male',
-  interests: ['music', 'skiing'],
-  bio: function() {
-    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
-  },
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name[0] + '.');
-  }
-};
-
- -

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

- -
person.name
-person.name[0]
-person.age
-person.interests[1]
-person.bio()
-person.greeting()
- -

شما حالا مقداری داده و عملکرد داخل شی خود دارید و میتوناید با نشان‌گذاری ساده‌ای به آن دسترسی داشته باشید.

- -
-

Note: If you are having trouble getting this to work, try comparing your code against our version — see oojs-finished.html (also see it running live). The live version will give you a blank screen, but that's OK — again, open your devtools and try typing in the above commands to see the object structure.

-
- -

So what is going on here? Well, an object is made up of multiple members, each of which has a name (e.g. name and age above), and a value (e.g. ['Bob', 'Smith'] and 32). Each name/value pair must be separated by a comma, and the name and value in each case are separated by a colon. The syntax always follows this pattern:

- -
var objectName = {
-  member1Name: member1Value,
-  member2Name: member2Value,
-  member3Name: member3Value
-};
- -

The value of an object member can be pretty much anything — in our person object we've got a string, a number, two arrays, and two functions. The first four items are data items, and are referred to as the object's properties. The last two items are functions that allow the object to do something with that data, and are referred to as the object's methods.

- -

An object like this is referred to as an object literal — we've literally written out the object contents as we've come to create it. This is in contrast to objects instantiated from classes, which we'll look at later on.

- -

It is very common to create an object using an object literal when you want to transfer a series of structured, related data items in some manner, for example sending a request to the server to be put into a database. Sending a single object is much more efficient than sending several items individually, and it is easier to work with than an array, when you want to identify individual items by name.

- -

Dot notation

- -

Above, you accessed the object's properties and methods using dot notation. The object name (person) acts as the namespace — it must be entered first to access anything encapsulated inside the object. Next you write a dot, then the item you want to access — this can be the name of a simple property, an item of an array property, or a call to one of the object's methods, for example:

- -
person.age
-person.interests[1]
-person.bio()
- -

Sub-namespaces

- -

It is even possible to make the value of an object member another object. For example, try changing the name member from

- -
name: ['Bob', 'Smith'],
- -

to

- -
name : {
-  first: 'Bob',
-  last: 'Smith'
-},
- -

Here we are effectively creating a sub-namespace. This sounds complex, but really it's not — to access these items you just need to chain the extra step onto the end with another dot. Try these in the JS console:

- -
person.name.first
-person.name.last
- -

Important: At this point you'll also need to go through your method code and change any instances of

- -
name[0]
-name[1]
- -

to

- -
name.first
-name.last
- -

Otherwise your methods will no longer work.

- -

Bracket notation

- -

There is another way to access object properties — using bracket notation. Instead of using these:

- -
person.age
-person.name.first
- -

You can use

- -
person['age']
-person['name']['first']
- -

This looks very similar to how you access the items in an array, and it is basically the same thing — instead of using an index number to select an item, you are using the name associated with each member's value. It is no wonder that objects are sometimes called associative arrays — they map strings to values in the same way that arrays map numbers to values.

- -

Setting object members

- -

So far we've only looked at retrieving (or getting) object members — you can also set (update) the value of object members by simply declaring the member you want to set (using dot or bracket notation), like this:

- -
person.age = 45;
-person['name']['last'] = 'Cratchit';
- -

Try entering the above lines, and then getting the members again to see how they've changed, like so:

- -
person.age
-person['name']['last']
- -

Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these in the JS console:

- -
person['eyes'] = 'hazel';
-person.farewell = function() { alert("Bye everybody!"); }
- -

You can now test out your new members:

- -
person['eyes']
-person.farewell()
- -

One useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too. Let's say we wanted users to be able to store custom value types in their people data, by typing the member name and value into two text inputs? We could get those values like this:

- -
var myDataName = nameInput.value;
-var myDataValue = nameValue.value;
- -

we could then add this new member name and value to the person object like this:

- -
person[myDataName] = myDataValue;
- -

To test this, try adding the following lines into your code, just below the closing curly brace of the person object:

- -
var myDataName = 'height';
-var myDataValue = '1.75m';
-person[myDataName] = myDataValue;
- -

Now try saving and refreshing, and entering the following into your text input:

- -
person.height
- -

Adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name.

- -

What is "this"?

- -

You may have noticed something slightly strange in our methods. Look at this one for example:

- -
greeting: function() {
-  alert('Hi! I\'m ' + this.name.first + '.');
-}
- -

You are probably wondering what "this" is. The this keyword refers to the current object the code is being written inside — so in this case this is equivalent to person. So why not just write person instead? As you'll see in the Object-oriented JavaScript for beginners article when we start creating constructors, etc., this is very useful — it will always ensure that the correct values are used when a member's context changes (e.g. two different person object instances may have different names, but will want to use their own name when saying their greeting).

- -

Let's illustrate what we mean with a simplified pair of person objects:

- -
var person1 = {
-  name: 'Chris',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
-
-var person2 = {
-  name: 'Brian',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
- -

In this case, person1.greeting() will output "Hi! I'm Chris."; person2.greeting() on the other hand will output "Hi! I'm Brian.", even though the method's code is exactly the same in each case. As we said earlier, this is equal to the object the code is inside — this isn't hugely useful when you are writing out object literals by hand, but it really comes into its own when you are dynamically generating objects (for example using constructors). It will all become clearer later on.

- -

You've been using objects all along

- -

As you've been going through these examples, you have probably been thinking that the dot notation you've been using is very familiar. That's because you've been using it throughout the course! Every time we've been working through an example that uses a built-in browser API or JavaScript object, we've been using objects, because such features are built using exactly the same kind of object structures that we've been looking at here, albeit more complex ones than our own basic custom examples.

- -

So when you used string methods like:

- -
myString.split(',');
- -

You were using a method available on an instance of the String class. Every time you create a string in your code, that string is automatically created as an instance of String, and therefore has several common methods/properties available on it.

- -

When you accessed the document object model using lines like this:

- -
var myDiv = document.createElement('div');
-var myVideo = document.querySelector('video');
- -

You were using methods available on an instance of the Document class. For each webpage loaded, an instance of Document is created, called document, which represents the entire page's structure, content, and other features such as its URL. Again, this means that it has several common methods/properties available on it.

- -

The same is true of pretty much any other built-in object/API you've been using — Array, Math, etc.

- -

Note that built in Objects/APIs don't always create object instances automatically. As an example, the Notifications API — which allows modern browsers to fire system notifications — requires you to instantiate a new object instance using the constructor for each notification you want to fire. Try entering the following into your JavaScript console:

- -
var myNotification = new Notification('Hello!');
- -

Again, we'll look at constructors in a later article.

- -
-

Note: It is useful to think about the way objects communicate as message passing — when an object needs another object to perform some kind of action often it will send a message to another object via one of its methods, and wait for a response, which we know as a return value.

-
- -

Summary

- -

Congratulations, you've reached the end of our first JS objects article — you should now have a good idea of how to work with objects in JavaScript — including creating your own simple objects. You should also appreciate that objects are very useful as structures for storing related data and functionality — if you tried to keep track of all the properties and methods in our person object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names. Objects let us keep the information safely locked away in their own package, out of harm's way.

- -

In the next article we'll start to look at object-oriented programming (OOP) theory, and how such techniques can be used in JavaScript.

- -

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

- -

In this module

- - diff --git a/files/fa/learn/server-side/first_steps/index.html b/files/fa/learn/server-side/first_steps/index.html new file mode 100644 index 0000000000..2ce55b9041 --- /dev/null +++ b/files/fa/learn/server-side/first_steps/index.html @@ -0,0 +1,45 @@ +--- +title: قدم اول برنامه نویسی وب سمت سرور +slug: Learn/Server-side/قدم_اول +tags: + - آموزش + - برنامه نویسی سمت سرور + - راهنمایی + - مقدماتی + - کد +translation_of: Learn/Server-side/First_steps +--- +
 
+ +

در این دوره ماژول برنامه نویسی سمت سرویس  ما چند سوال اساسی در باره برنامه نویسی سمت سرور پاسخ می دهیم "برنامه نویسی سمت سرور چیست؟", "تفاوت برنامه نویسی سمت سرور و سمت کلاینت چیست؟", و"برنامه نویسی سمت سرور  چطور میتواند مفید باشد". در ادامه ما محبوب ترین فریمورک های وب سمت سرور را بررسی می کنیم و در طول این راهنمایی   چگونگی روش انتخاب  مناسب ترین فریمورک برای ساخت اولین وبسایت شما را خواهیم داشت.

+ +

پیش نیازها

+ +

پیش از شروع نیازی نیست شما درباره برنامه نویسی وب سمت سرور هیچ دانشی داشت باشید در عوض شما باید با نوع برنامه نویسی آشنای داشته باشید.

+ +

به هر حال, شما خواهید فهمید "وب چگونه کار می کنید" ما پیشنهاد می کنیم اول موضوعات زیر را دنبال کنید:

+ + + +

بعد از آشنای با مفاهیم پایه شما آماده خواهید بود ادامه این ماژول را دنبال کنید.

+ +

راهنما

+ +
+
آشنای با سمت سرور
+
به دوره آموزش ابتدایی سمت سرور MDN خوش آمدید ! در این آموزش ٬ ما از بالاترین سطح برنامه نویس به سمت سرور نگاه می کنیم و به سوال های مثل "چه چیزی هست ؟" , "چه تفاوتی با برنامه نویسی سمت کلاینت دارد؟" و "برنامه نویسی سمت سرور مفید است ؟" . بعد از خواندن این مقاله شما خواهید فهمید قدرت کد نویسی سمت سرور در چیست.
+
بررسی اجمالی سمت سرور
+
الان شما با خواندن مقاله موجود در لینک بالا می فهمید هدف و فواید برنامه نویسی سمت سرور در چیست. ما با بررسی های که خواهیم انجام داد روی درخواست های داینامک از طرف مرورگر (بروزر) به جزییات آن آشنا خواهیم شد. اکثر کد های سمت سرور یک وبسایت وظیفه هندل در خواست ها و پاسخ ها را از طریق یکسان دارند . درک این موضوع به شما کمک می کند که بدانید در نوشتن کدهای خود چه مواردی را باید در نظر بگیرید .
+
فریم ورک وب سمت سرور
+
در مقاله قبلی دیدید یک وب اپ سمت سرو چطوری به درخواست های دریافت شده از مرورگر وب پاسخ می دهد . الان در این مقاله که در لینک بالا وجود دارد خواهید دید یک فریمورک وب چگونه مدریت فرآیند ها (تسک ها) را آسانتر می کند. این موضوع به شما کمک می کند فریمورک بهتری برای وب اپ خود انتخاب کنید .
+
امنیت وبسایت
+
امنیت وبسایت مستلزم در نظر گرفتن همه جنبه ها در طراحی و استفاده  وبسایت است . با خواندن مقاله موجود در لینک یک الگو یا معلم تمام و کمال برای راهنمای شما جهت تامین امنیت وبسایت شما نباید اما این آموزش به شما کمک خواهد کرد با در نظر گرفتن قدم های مهم که باعث می شود وب اپ شما مقاومت لازم در مقابل بیشتر تهدید های عمومی بدست آورد
+
+ +

ارزیابی 

+ +

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

diff --git "a/files/fa/learn/server-side/\331\202\330\257\331\205_\330\247\331\210\331\204/index.html" "b/files/fa/learn/server-side/\331\202\330\257\331\205_\330\247\331\210\331\204/index.html" deleted file mode 100644 index 2ce55b9041..0000000000 --- "a/files/fa/learn/server-side/\331\202\330\257\331\205_\330\247\331\210\331\204/index.html" +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: قدم اول برنامه نویسی وب سمت سرور -slug: Learn/Server-side/قدم_اول -tags: - - آموزش - - برنامه نویسی سمت سرور - - راهنمایی - - مقدماتی - - کد -translation_of: Learn/Server-side/First_steps ---- -
 
- -

در این دوره ماژول برنامه نویسی سمت سرویس  ما چند سوال اساسی در باره برنامه نویسی سمت سرور پاسخ می دهیم "برنامه نویسی سمت سرور چیست؟", "تفاوت برنامه نویسی سمت سرور و سمت کلاینت چیست؟", و"برنامه نویسی سمت سرور  چطور میتواند مفید باشد". در ادامه ما محبوب ترین فریمورک های وب سمت سرور را بررسی می کنیم و در طول این راهنمایی   چگونگی روش انتخاب  مناسب ترین فریمورک برای ساخت اولین وبسایت شما را خواهیم داشت.

- -

پیش نیازها

- -

پیش از شروع نیازی نیست شما درباره برنامه نویسی وب سمت سرور هیچ دانشی داشت باشید در عوض شما باید با نوع برنامه نویسی آشنای داشته باشید.

- -

به هر حال, شما خواهید فهمید "وب چگونه کار می کنید" ما پیشنهاد می کنیم اول موضوعات زیر را دنبال کنید:

- - - -

بعد از آشنای با مفاهیم پایه شما آماده خواهید بود ادامه این ماژول را دنبال کنید.

- -

راهنما

- -
-
آشنای با سمت سرور
-
به دوره آموزش ابتدایی سمت سرور MDN خوش آمدید ! در این آموزش ٬ ما از بالاترین سطح برنامه نویس به سمت سرور نگاه می کنیم و به سوال های مثل "چه چیزی هست ؟" , "چه تفاوتی با برنامه نویسی سمت کلاینت دارد؟" و "برنامه نویسی سمت سرور مفید است ؟" . بعد از خواندن این مقاله شما خواهید فهمید قدرت کد نویسی سمت سرور در چیست.
-
بررسی اجمالی سمت سرور
-
الان شما با خواندن مقاله موجود در لینک بالا می فهمید هدف و فواید برنامه نویسی سمت سرور در چیست. ما با بررسی های که خواهیم انجام داد روی درخواست های داینامک از طرف مرورگر (بروزر) به جزییات آن آشنا خواهیم شد. اکثر کد های سمت سرور یک وبسایت وظیفه هندل در خواست ها و پاسخ ها را از طریق یکسان دارند . درک این موضوع به شما کمک می کند که بدانید در نوشتن کدهای خود چه مواردی را باید در نظر بگیرید .
-
فریم ورک وب سمت سرور
-
در مقاله قبلی دیدید یک وب اپ سمت سرو چطوری به درخواست های دریافت شده از مرورگر وب پاسخ می دهد . الان در این مقاله که در لینک بالا وجود دارد خواهید دید یک فریمورک وب چگونه مدریت فرآیند ها (تسک ها) را آسانتر می کند. این موضوع به شما کمک می کند فریمورک بهتری برای وب اپ خود انتخاب کنید .
-
امنیت وبسایت
-
امنیت وبسایت مستلزم در نظر گرفتن همه جنبه ها در طراحی و استفاده  وبسایت است . با خواندن مقاله موجود در لینک یک الگو یا معلم تمام و کمال برای راهنمای شما جهت تامین امنیت وبسایت شما نباید اما این آموزش به شما کمک خواهد کرد با در نظر گرفتن قدم های مهم که باعث می شود وب اپ شما مقاومت لازم در مقابل بیشتر تهدید های عمومی بدست آورد
-
- -

ارزیابی 

- -

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

-- cgit v1.2.3-54-g00ecf